/* ==========================================================================
*    メインCSS
   ========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* デフォルトフォントファミリーを設定 */
    font-size: 16px; /* デフォルトフォントサイズを設定 */
    line-height: 1.5; /* デフォルト行間を設定 */
}

header {
    height: 100px;
    padding: 30px 0 20px;
}

.logo {
    max-width: 100%;
    height: 50px;
}

.logo a {
    display: block;
    height: 100%;
}

.logo img {
    width: 100%;
    height: 100%;
    min-height: 50px;
}

header a {
    color: inherit; /* リンクのテキストカラーを親要素から継承 */
    text-decoration: none; /* リンクの下線を非表示 */
}

.header a {
    color: inherit; /* リンクのテキストカラーを親要素から継承 */
    text-decoration: none; /* リンクの下線を非表示 */
}

ul li {
    list-style: none;
}

.content01 {
    background-image: url('../img/sample/dammy_mainimg@1.5x.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-bottom: 100px;
    margin: 0 50px 24px;
    height: 60vh;
}

.content02 {
    background-image: url('../img/sample/back01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-bottom: 100px;
    margin-bottom: 24px;
}

.content03 {
    background-image: url('../img/sample/back02.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding-bottom: 100px;
    margin-bottom: 20px;
}

.content04 {
    background-image: url('../img/sample/back03.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.content05 {
}

.content06 {
    background: #eeeeee;
    padding: 90px 0 100px;
}

.content07 {
    background-image: url('../img/sample/back03.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


footer {
    background-image: url('../img/sample/back_fotter.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.content_inner {
    max-width: 1285px;
    margin: 0 auto;
    padding: 0 7px;
}

.content07_inner {
    margin: 0 auto;
    padding: 0 7px;
}




.content01 .content_inner {
    padding: 0;
    height: 100%;
}

.sub_title {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    justify-content: center; /* 水平中央揃え */
    padding: 43px 0 11px;
}

.sub_title h2 {
    text-align: center; /* テキストを水平中央に配置 */
    margin: 0;
    font-size: 42px;
    padding-top: 10px;
}

.sub_title img {
    padding: 8px 10px;
    max-height: 56px;
}

.sub_text {
    text-align: center;
    font-size: 25px;
    margin: 0 0 29px;
}

.image-container img {
    max-width: 100%;
    height: auto;
    margin: 0 10px; /* 画像間の間隔を追加 */
}

/*==================================================
　5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
    /*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

/*ボタン内側*/
.openbtn span {
    display: inline-block;
    transition: all .4s; /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    width: 45%;
}

.openbtn span:nth-of-type(1) {
    top: 15px;
}

.openbtn span:nth-of-type(2) {
    top: 23px;
}

.openbtn span:nth-of-type(3) {
    top: 31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active_burger span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active_burger span:nth-of-type(2) {
    opacity: 0; /*真ん中の線は透過*/
}

.openbtn.active_burger span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.header_inner {
    display: flex;
    justify-content: space-between; /* 要素を横並びに配置 */
    align-items: center; /* 垂直中央揃え */
}

/* 任意のスタイリングを追加できます */
.logo img {
    max-width: 100%;
}

.header_login {
    list-style: none;
    display: flex;
    padding: 0;
}

.header_login li {
    margin-right: 10px; /* リンク間の間隔を調整 */
}

.right-section .header_login li:hover a {
    background: #23a1de;
    color: #fff;
}

.openbtn {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直中央揃え */
}

.openbtn span {
    width: 35px;
    height: 2px;
    background: #000;
    margin: 2px 0;
}

.header_inner {
    display: flex;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: center; /* 垂直中央揃え */
}

/* 左側の要素を左寄せ */
.left-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 右側の要素を右寄せ */
.right-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 任意のスタイリングを追加できます */
.logo img {
    max-width: 100%;
}

.header_login {
    list-style: none;
    display: flex;
    padding: 0;
    margin-bottom: -10px;
}

.header_login li {
    margin-right: 10px; /* リンク間の間隔を調整 */
}

.left-section ul li {
    padding-left: 35px;
}

.right-section ul a {
    border: 2px solid black; /* 黒色の境界線を追加 */
    color: black; /* テキストカラーを黒に設定 */
    border-radius: 20px;
    padding: 10px 20px;
}

.openbtn {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直中央揃え */
}

.openbtn span {
    width: 35px;
    height: 2px;
    background: #000;
    margin: 2px 0;
}

.image-container01 {
    position: relative;
    height: 100%;
}

.image-container01 img {
    max-width: 100%;
    display: block;
}

.image-container01 img:first-child {
    position: relative;
    z-index: 1;
}

.image-container01 img:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.overlay-text {
    position: absolute;
    top: 24%;
    right: 6%;
    writing-mode: vertical-rl; /* 縦書き */
    z-index: 2;
    color: #fff;
    font-size: 27px;
    white-space: nowrap; /* テキスト内の空白を無視 */
}

.content02 h2 {
    font-size: 40px;
    margin: 0;
    padding-bottom: 10px;
}

.article_contents {
    display: flex;
    flex-wrap: nowrap; /* 記事が横に並ぶように nowrap を設定 */
    align-items: stretch;
    overflow: hidden;
    position: relative;
}

.content02 .article img {
    width: 100%;
}

.article {
    flex: 0 0 33.3%; /* 記事の幅を均等に分割 (3つ並ぶように) */
    padding: 0 13px; /* 記事の間に余白を追加 */
    box-sizing: border-box; /* paddingを幅に含める */
}

.article_inner {
    background: #fff;
    padding: 0 20px 35px;
    height: 100%;
}

.article_inner p {
    margin: 0;
}

.article_inner p:first-child {
    text-align: center;
    padding: 15px 0 0;
    font-size: 18px;
    font-weight: bold;
}

.content02 .alert_5 {
    background: #bd0003;
    color: #fff;
    padding: 2px 13px;
    margin-left: 5px;
}

.content02 .alert_4 {
    background: #fe0100;
    color: #fff;
    padding: 2px 13px;
    margin-left: 5px;
}

.content02 .alert_3 {
    background: #f94c00;
    color: #fff;
    padding: 2px 13px;
    margin-left: 5px;
}

.content02 .alert_2 {
    background: #ff880d;
    color: #fff;
    padding: 2px 13px;
    margin-left: 5px;
}

.content02 .alert_1 {
    background: #fcf200;
    color: #fff;
    padding: 2px 13px;
    margin-left: 5px;
}


.article_inner h3 {
    text-align: center;
    font-size: 27px;
    margin: 12px 0;
}

.article_inner h3 a,
a .article_text {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: none;
}

.article_text {
    font-size: 18px;
    padding-bottom: 26px;

    /** 追加 文字数制限しないと、何処までも伸びる為 **/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 行数を指定 */
}

.content02 .tags {
    display: inline-block;
    border: #000 solid 1px;
    margin-left: 15px;
    padding: 1px 10px;
    margin-bottom: 20px;
}

.content03 .sub_title {
    padding: 53px 0 11px;
}

.content03 .article_contents {
    padding-top: 11px;
}

.content03 .article_text {
    background: #fff;
    padding-bottom: 27px;
    height: 100%;
}

.content03 .article .alert {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    margin: 0;
    padding-top: 20px;
}

.content03 .article .alert_5 span {
    background: #bd0003;
    color: #fff;
    margin-left: 10px;
    padding: 0 10px;
}

.content03 .article .alert_4 span {
    background: #fe0100;
    margin-left: 10px;
    padding: 0 10px;
}

.content03 .article .alert_3 span {
    background: #f94c00;
    margin-left: 10px;
    padding: 0 10px;
}

.content03 .article .alert_2 span {
    background: #ff880d;
    margin-left: 10px;
    padding: 0 10px;
}

.content03 .article .alert_1 span {
    background: #fcf200;
    margin-left: 10px;
    padding: 0 10px;
}

.content03 .article .rank {
    background: #f00473;
    display: inline-block;
    color: #fff;
    margin: 0;
    padding: 10px 12px 0;
    vertical-align: super;
    font-size: 23px;
    line-height: 36px;
}

.content03 .article .rank span {
    font-size: 36px;
}

.content03 .article .article_title {
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    padding-left: 10px;
    margin: 5px 0;
    line-height: 31px;
}

.content04 .sub_title {
    padding: 72px 0 5px;
}

.content04 .article-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    width: calc(25% - 24px);
    margin: 10px;
}

.content04 .article-content a {
    color: #000;
    text-decoration: none;
}

.content04 .articles-list {
    padding: 0 0 21px;
    /*display: flex;*/
    /*overflow: hidden;*/
    width: 100%;
}

.content04 .article-image {
    float: left;
    max-width: 100%;
    margin-right: 10px;
    width: 70px;
}

.content04 .article-title {
    margin: 0;
    font-size: 21px;

    /** 追加 文字数制限しないと、何処までも伸びる為 **/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 行数を指定 */
}

.content04 .article-item:after {
    content: "";
    display: table;
    clear: both;
}

.content04 .article-text {
    margin: 0;
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 21px;
}

.content04 .article-text span {
    color: #fff;
    margin-left: 5px;
    padding: 0 8px;
}

.content04 .article-text span.alert_5 {
    background: #bd0003;
}

.content04 .article-text span.alert_4 {
    background: #fe0100;
}

.content04 .article-text span.alert_3 {
    background: #f94c00;
}

.content04 .article-text span.alert_2 {
    background: #ff880d;
}

.content04 .article-text span.alert_1 {
    background: #fcf200;
    color: #000;
}

.content04 .article-content-text {
    display: inline-block;

    /** 追加 文字数制限しないと、何処までも伸びる為 **/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 行数を指定 */

}

.content04-article-more-mobile,
.content04-article-more {
    text-align: center;
    padding: 27px 0;
}

.content04-article-more-mobile p,
.content04-article-more p {
    background: #009ee5;
    color: #fff;
    display: inline-block;
    font-size: 28px;
    max-width: 285px;
    width: 100%;
    padding: 10px 0;
    border-radius: 20px;
}

.content04-article-more-mobile p span,
.content04-article-more p span {
    padding-left: 6px;
}

.content04 .articles-list {
    display: flex;
    flex-wrap: wrap;
}

.content04 .article-content {
    width: calc(50% - 24px);
    margin: 0 10px 20px;
    padding: 10px;
    box-sizing: border-box;
}


/*.content04 .articles {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*}*/

.content04 .article-content {
    background-color: #fff; /* 白色の背景色を設定 */
    flex: 1; /* 各列の高さを均等にする */
    margin: 5px; /* 各記事の内部に5pxのマージンを設定 */
}

/*************
*
*************/

.content07 .sub_title {
    padding: 72px 0 5px;
}
.content07 .article-content a {
    color: #000;
    text-decoration: none;
}

.content07 .article-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
}

.content07 .articles-list {
    padding: 0 0 21px;
    /*display: flex;*/
    /*overflow: hidden;*/
    width: 100%;
}

.content07 .article-image {
    float: left;
    max-width: 100%;
    margin-right: 10px;
    width: 70px;
}

.content07 .article-title {
    margin: 0;
    font-size: 21px;

    /** 追加 文字数制限しないと、何処までも伸びる為 **/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 行数を指定 */
}
.content07 .article-item:after {
    content: "";
    display: table;
    clear: both;
}


.content07 .article-text {
    margin: 0;
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 21px;
}

.content07 .article-text span {
    color: #fff;
    margin-left: 5px;
    padding: 0 8px;
}


.content07 .article-text span.alert_5 {
    background: #bd0003;
}

.content07 .article-text span.alert_4 {
    background: #fe0100;
}

.content07 .article-text span.alert_3 {
    background: #f94c00;
}

.content07 .article-text span.alert_2 {
    background: #ff880d;
}

.content07 .article-text span.alert_1 {
    background: #fcf200;
    color: #000;
}


.content07 .article-content-text {
    display: inline-block;
    /** 追加 文字数制限しないと、何処までも伸びる為 **/
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 行数を指定 */

}






.situation {
    max-width: 854px;
    margin: 0 auto 25px;
}

.situation ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.situation li {
    background-color: #ccc;
    color: white;
    text-align: center;
    border-radius: 10px;
}

.situation li a {
    display: block;
    width: 100px;
    padding: 5px;
    color: #fff;
    text-decoration: none;
}

.keyword {
    text-align: center;
    max-width: 870px;
    margin: 0 auto 25px;
}

.keyword ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.keyword li {
    background-color: #f2f2f2; /* 薄灰色の背景色 */
    color: #333; /* 濃い灰色の文字色 */
    margin: 5px; /* 5pxの間隔 */
    padding: 10px; /* 適切な内部余白 */
}

.keyword li a {
    color: #000;
    text-decoration: none;
}

.recruiting {
    max-width: 890px;
    width: 100%;
    margin: 0 auto;
    background: #ed6100;
    text-align: center;
    color: #fff;
    border-radius: 20px;
}

.recruiting_inner {
    background-image: url('../img/sample/post.png');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 15%;
    padding: 10px;
    display: block;
}

.recruiting a h3,
.recruiting a p {
    color: #fff;
    text-decoration: none;
}

.recruiting p:last-child {
    font-size: 23px;
    background: #fff;
    color: #000;
    display: inline-block;
    font-weight: bold;
    padding: 15px 70px;
}

.recruiting p:last-child sapn {
    margin-left: 20px;
}

a.recruiting_inner:hover p:last-child {
    background: #23a1de;
    color: #fff;
}

.footer_section {
    display: flex; /* 左右のセクションを横並びに配置 */
    justify-content: space-between; /* 左右のセクションを均等に配置 */
    align-items: center; /* セクションの高さを中央揃え */
    padding: 75px 0;
}

.footer_left_section {
    flex: 1; /* 左セクションの幅を50%に設定 */
}

.footer_left_section img {
    max-width: 20%; /* 画像の幅を20%に設定 */
    margin-right: 10px; /* 画像の右側に余白を追加 */
    max-height: 50px;
}

.top_links {
    padding-top: 60px;
}

.top_links p,
.bottom_links p {
    display: inline; /* リンクをインライン要素として配置 */
    margin-right: 10px; /* リンクの右側に余白を追加 */
    font-size: 20px; /* リンクの文字サイズを設定 */
}

.top_links p a,
.bottom_links p a {
    text-decoration: none; /* 下線を削除 */
    color: black; /* リンクの文字色を黒に設定 */
}

.bottom_links {
    padding-top: 35px;
}

.bottom_links p {
    margin-top: 10px; /* 下のリンクセクションとの間に余白を追加 */
    font-size: 16px;
}

.footer_right_section,
.mobile_footer_right_section {
    flex: 1; /* 右セクションの幅を50%に設定 */
    background: #fff;
    margin-left: 15%;
    padding: 20px 30px;
}

.mobile_footer_right_section {
    display: none;
}

.right_content {
    display: flex; /* 画像とテキストを横並びに配置 */
    align-items: center; /* 画像とテキストを垂直中央揃え */
}

.right_content img {
    max-width: 20%; /* 画像の幅を20%に設定 */
    margin-right: 20px; /* 画像とテキストの間隔を設定 */
    max-height: 50px;
}

.copyright {
    text-align: center;
    padding-bottom: 45px;
}

.mobile_nav {
    display: none;
}

.article_detail_content .content02 {
    margin-bottom: 3px;
}

.sub_title img {
    max-width: 100%;
}

.article_detail_content .article1 {
    background: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 30px;
    padding: 40px 20px;
}

.article_detail_content .article1_inner {
    padding: 0 30px;
}

.article_detail_content .article_container {
    max-width: 750px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article_detail_content .article_left,
.article_detail_content .article_center,
.article_detail_content .article_right {
    flex: 1;
}

.article_detail_content .article_left {
    text-align: right;
}

.article_detail_content .article_center {
    text-align: center;
}

.article_detail_content .article_right {
    text-align: left;
}

.article_detail_content .test_content {
    text-align: right;
}

.article_detail_content .test {
    width: 70px;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    float: right;
    margin-bottom: 0;
}

.article_detail_content .test_content:after {
    content: "";
    display: table;
    clear: both;
}

.article_detail_content .alert {
    font-weight: bold;
}

.article_detail_content .alert span {
    background: #bd0003;
    color: #fff;
    font-weight: normal;
    padding: 2px 5px;
}

.article_detail_content .date {
    margin-bottom: 0;
}

.article_detail_content .tag {
    border: 1px #000 solid;
    padding: 0 5px;
    display: inline-block;
    margin-bottom: 8px;
    margin-right: 5px;
}

.article_detail_content .name {
    text-align: center;
    padding: 0;
    margin: 0;
}


.logo img {
    max-width: 100%;
}

.nav-wrapper {
    display: none;
}

.footer_left_section img,
.right_content img,
.right_content img {
    max-width: 100%;
}


/* 検索機能CSS ここから */
.search_container {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.search_container .category {
    height: 40px;
}

.search_container .card-default,
.search_container .card-footer {
    display: inline-block;
}

.search_container .card-body {
    display: inline-block;
    vertical-align: top;
    height: 40px;
}

.search_container .card-body .form-control {
    height: 40px;
    width: 300px;
}

.search_container .card-footer .btn {
    padding: 7px;
    font-size: 16px;
}

/* 検索機能CSS ここまで */

.content04 .article-list .article-content {
    width: calc(50% - 24px);
    margin: 10px;
}

.content04 .article-list .articles-list {
    padding: 0;
    width: 100%;
    display: block;
}

.content04 .article-list {
    padding: 30px 0;
}

.article-list .article-item {
    width: 100%;
    display: table;
}

.article-list .article-item .article-item-column {
    display: table-row;
}

.article-list .article-item .article-item-cell {
    display: table-cell;
}

.article-list .article-item .article-item-left img {
    float: none;
}

.article-list .article-item .cell-left {
    width: 20%;
    padding: 10px 5px 0;
}

.article-list .article-item .cell-right {
    text-align: left;
    padding: 10px 5px 0;
}

/* シチュエーションCSS ここから */
.situation2,
.situation li.situation2 {
    background-color: #00bfff;
}

.situation3,
.situation li.situation3 {
    background-color: #6495ed;
}

.situation4,
.situation li.situation4 {
    background-color: #8fbc8b;
}

.situation5,
.situation li.situation5 {
    background-color: #db7093;
}

.situation6,
.situation li.situation6 {
    background-color: #ff8c00;
}

.situation7,
.situation li.situation7 {
    background-color: #9370db;
}

.article-item-cell .situation {
    width: 100px;
    padding: 1px;
    color: #FFF;
    text-align: center;
    margin: 0;
    border-radius: 10px;
}

/* シチュエーションCSS ここまで */


.login_form {
    position: relative;
    width: 500px;
    margin: 80px auto 80px;
    border: solid 1px #ccc;
    border-radius: 5px;
}

.login_form h1 {
    text-align: center;
    font-size: 30px;
    padding: 20px;
}

.login_form ul {
    padding: 0 40px 20px;
}

.login_form ul li {
    border-radius: 5px;
    padding: 10px;
    border: solid 1px #ccc;
    margin-bottom: 20px;
    list-style: none;
}

.heads_up_main {
    padding: 0 40px 20px;
}

.heads_up_buttons {
    text-align: center;
}

.heads_up_button {
    text-align: center;
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid;
    margin: 20px 10px;
    text-align: center;
    border-radius: 20px;
}


/*************
/* サイドバー
*************/
#sidebar article {
    clear: both;
    margin-bottom: 20px;
}

#sidebar ul {
    padding: 15px 0;
}

#sidebar li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    list-style: none;
    border-bottom: 1px dashed #ebebeb;
}

#sidebar li:last-child {
    border: 0;
    margin-bottom: 0px;
}

#sidebar li a {
    color: #555;
    font-size: 12px;
    display: block;
}

#sidebar li a:hover {
    color: #999;
    font-size: 12px;
    display: block;
}


/*************
/* 共通にすべき項目
*************/
.main {
    /*padding-left: 20px;*/
    padding-top: 20px;
    /*padding-right: 20px;*/
}

.sub_main {
    width: 630px;
}


.left_nav {
    padding-left: 10px;
    padding-top: 20px;
}

.left_nav ul li a {
    display: block;
    padding: 4px 0 4px 10px;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(8, 19, 26, 0.66);
    font-weight: 450;
}

.left_nav ul li a:hover {
    background: #f5f8fa;
}

.main .contents {
    /* グリッドコンテナ */
    display: grid;
    /* 最小256px、最大1frの列を繰り返しつくる */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    /* 余白 */
    gap: 30px 30px;
}

.contents .item {
    display: grid;
    grid-template-rows: subgrid;
}

.contents .item dd:nth-child(2) {
    padding-top: 20px;
    font-size: 17px;
    font-weight: 600;
}

.contents .item dd:nth-child(3),
.contents .item dd:nth-child(4) {
    padding-top: 5px;
}

.contents .item dd:nth-child(4) i {
    font-size: 16px;
    margin-right: 20px;
}


nav div#panel {
    display: block !important;
    float: left;
}

a#menu {
    display: none;
}

#mainNav {
    overflow: hidden;
    clear: both;
    z-index: 200;
    position: relative;
    border-bottom: 1px solid #ebebeb;

}

#mainNav li {
    float: left;
    position: relative;
}

#mainNav li a {
    color: #555;
    display: block;
    text-align: center;
    _float: left;
    font-size: 16px;
    width: 160px;
    padding: 15px 0;

}


#mainNav li.current-menu-item a {
    border-color: #555;
}

#mainNav li.current-menu-item a,
#mainNav li a:hover,
#mainNav li.current-menu-item li a:hover {
    color: #999;
    border-bottom: solid 2px #09be94;
}

.sub_container .sub_left_nav {
    padding: 30px;
}

.sub_container .sub_left_nav h2 {
    padding-bottom: 20px;
}


.sub_container .page_title {
    font-size: 30px;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 30px;
}

.sub_container .page_body {
    font-size: 18px;
    line-height: 1.8;

}

.sub_container .sns_share {
    margin-bottom: 40px;
    overflow: hidden;
}

.sub_container .sns_share .user_profile {
    float: left;
    width: 49%;
}

.sub_container .sns_share .user_profile .post_date {
    float: left;
}

.sub_container .sns_share .sns_item {
    float: right;
    width: 49%;
}

.sub_container .sns_share .sns_item a i {
    float: right;
    margin-left: 10px;
    font-size: 20px;
    color: #ccc;
}

.sub_container .sns_share .sns_item a.twitter-button i {
    color: #1da1f2;
}

.delete_buttom {
    position: absolute;
    right: 0;
    background-color: #e5d7f3;
    width: 40px;
    height: 40px;
    line-height: 35px;
    border: #b683e9 solid 3px;
    border-radius: 50%;
    color: #000;
    font-weight: bold;
    margin: 5px;
    cursor: pointer;
}

.sub_container .sub_left_nav ul li {
    margin-bottom: 20px;
}

.sub_container .sub_left_nav li {
    margin-left: 20px;
}

.sub_container .sub_left_nav li:first-child {
    margin-left: 0;
}

.sub_container .sub_left_nav ul li a {
    overflow: hidden;
    display: block;
}

.sub_container .sub_left_nav .user_profile_img1 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 5px;
    float: left;
    border: solid 2px #1f221f;;
}

.sub_container .sub_left_nav li:first-child .user_profile_img1 {
    width: 60px;
    height: 60px;
    border: solid 2px #09be94;;
}

.sub_container .sub_left_nav .user_profile_img1 + span {
    display: block;
    margin-top: 20px;
    font-size: 16px;
}

.sub_container .sns_share .user_profile_img2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 5px;
    float: left;
}


.sub_container .page_body {
    clear: both;
}

.article_pankuzu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 10px;
}

.article_pankuzu li {
    font-size: 19px;
}

.article_pankuzu li:not(:last-of-type)::after {
    content: "»";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
}

.grid_element1 {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.grid_element1 .label_field {
    padding: 5px;
    grid-column: 1 / 2;
}

.grid_element1 .form_field {
    padding: 5px;

    grid-column: 2 / 3;
}

.grid_element1 .form_field .user_profile_img1 {
    width: 60px;
    height: 60px;
    border-radius: 30px;
}

.article_form_box {
    display: grid;
    grid-template-columns: 0.85fr 0.15fr;
}

.article_form_box .article_form_right {
    margin-left: 40px;
}


.profile h2 {
    position: relative;
    text-align: center;
    border: 2px solid #000;
    background: #fff;
    margin-bottom: 30px;
}

.profile h2:before,
.profile h2:after {
    position: absolute;
    content: '';
}

.profile h2:before {
    top: -40px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
}

.profile h2:after {
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 2px dashed #000;
    background: #fff;
}

.profile h2 i {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 60px;
    position: absolute;
    z-index: 2;
    top: -40px;
    left: calc(50% - 40px);
    width: 80px;
    height: 60px;
    text-align: center;
    color: orangered;
}

.profile h2 span {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1rem;
}

.profile h2 span:before,
.profile h2 span:after {
    position: absolute;
    content: '';
}

.profile h2 span:before {
    top: -34px;
    left: calc(50% - 34px);
    width: 68px;
    height: 40px;
    border: 2px dashed #000;
    border-radius: 50vw 50vw 0 0;
}

.profile h2 span:after {
    position: absolute;
    top: 4px;
    left: calc(50% - 32px);
    width: 64px;
    height: 10px;
    background: #fff;
}


/*ナビゲーションテスト*/
/*.mypage_nav {*/
/*    background: #333;*/
/*    overflow: hidden;*/
/*}*/
/*.mypage_nav li {*/
/*    display: block;*/
/*    float: left;*/
/*    !*width: 12.5%;*!*/
/*    margin: 0;*/
/*    padding: 0 5%;*/
/*}*/
/*.mypage_nav li a {*/
/*    display: block;*/
/*    padding: 12px 0 10px;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*}*/


.mypage_nav {
    /*padding: 20px;*/
    padding: 10px;
    background: #9dc3e6;
}

/*.mypage_nav ul {*/
/*    width: 80%;*/
/*    box-sizing: border-box; !* 要素の幅にボーダーやパディングを含める *!*/
/*    margin: 0 auto;*/
/*}*/

.mypage_nav ul li {
    display: inline-block;
    border-radius: 20px;
    background: #fff;
    /*margin-right: 3%; !* 余白を追加 *!*/
}

.mypage_nav ul li:last-child {
    margin-right: 0; /* 最後の要素には余白を追加しない */
}

.mypage_nav ul li a {
    color: #000;
    display: block; /* テキストリンクをブロック要素化 */
    /*padding: 20px 10px; !* テキストリンクの内部に余白を追加 *!*/
    text-align: center; /* テキストを中央揃えにする */
    text-decoration: none; /* リンクの下線を削除 */
}

.my_page_title {
    padding: 10px;
}

.my_page_title span {
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 10px 0.8em;
}

.my_page_title:before {
    border: solid 3px #0135fc;
    position: absolute;
    top: 25%;
    left: 20px;
    width: 6px;
    height: 50%;
    content: '';
    opacity: .2;
    -ms-filter: "alpha(opacity=20)";
    border-radius: 3px;
    background: #5f7276
}


/**
* 記事投稿画面
* ブロック記事タイトル
**/

#article_form .child_element {
    margin-top: 30px;
    margin-bottom: 30px;
}

#article_form p.title,
#article_form .child_title {
    position: relative;
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.4em 0.5em;
    color: #454545;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

#article_form p.title:after,
#article_form .child_title:after {
    position: absolute;
    content: '';
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #a8d4ff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.login_user_form {
    border-top: solid 1px #ccc;

}
.login_user_form h2 {
    text-align: center;
    padding: 20px;
    margin-top: 100px;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
}

.login_user_form .inner{
    margin: 0 20px;
    padding: 20px;
    /*border: solid 1px #ccc;*/
    /*border-radius: 3px;*/
}

.login_user_form .sns_login {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content:center;
}

.login_user_form  .sns_login li img {
    display: block;
}


.active_learning h3 {
    font-size: 29px;
    text-align: center;
    font-weight: normal;
}

.active_learning p {
    font-size: 20px;
}

.rate {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 30px;
    font-size: 20px;


    &::before,
    &::after {
        position: absolute;
        display: inline-block;
        height: 30px;
        content: '★★★★★';
        line-height: 30px;
    }

    &::before {
        color: #c4c4c4;
    }

    &::after {
        overflow: hidden;
        /*width: 105px;*/

        width: calc(var(--score) * 20px);
        color: #ffb906;
    }
}

/*.rate-wrap {*/
/*    display: flex;*/
/*    width: 330px;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    padding: 5px;*/
/*    border: 1.5px solid #e8d8b0;*/
/*    margin: 20px auto 0;*/
/*    font-weight: bold;*/
/*}*/
/*html * {outline: solid 1px red;}*/