/* ==========================================================================
*    レスポンシブCSS
   ========================================================================== */

/* PC用のスタイル（例: 993px以上の幅） */
@media screen and (min-width: 993px) {
    /* PC用のスタイルをここに記述 */
    .content02 .content_inner,
    .content03 .content_inner {
        padding:0 13px;
    }
    .content02 .article:first-child,
    .content03 .article:first-child {
        padding:0 26px;
        padding-left: 0;
    }
    .content02 .article:last-child,
    .content03 .article:last-child {
        padding:0 26px;
        padding-right: 0;
    }
    .content04 .articles {
        /*display: flex;*/
        /*flex-wrap: wrap;*/
        margin: -5px; /* 各記事の周りに-5pxのマージンを設定 */
    }

    .content04 .article-content {
        flex: 0 0 calc(25% - 20px); /* 4つの記事が1行に並ぶように */
        margin: 0 10px; /* 各記事の内部に5pxのマージンを設定 */
    }

    .content07 .articles-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
    }

    .content07 .article-content {
        width: calc(15.5% - 10px);
    }

    .mypage_nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
        gap: 20px;
    }
    .mypage_nav ul li {
        width: calc(15.5% - 10px);
    }
    .mypage_nav ul li a {
        padding: 20px 10px;
    }




    #container {
        display: grid;
        grid-template-columns: 190px 1fr;
    }

    .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;
    }

    .recruiting_inner {
        padding: 25px;
    }

    .content04-article-more-mobile {
        display: none;
    }
    .pc_only {
        display: table-row;
    }
    .mobile_only {
        display: none;
    }

    .login_user_form  .sns_login li {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #fff;
        margin: 20px;
    }
    .login_user_form  .sns_login li img {
        display: block;
        padding: 10px;
    }
    .login_user_form  .sns_login li:nth-child(2) img {
        display: block;
        width: 60%;
        margin: 20%;
    }
    .login_user_form  .sns_login li:nth-child(3) img {
        display: block;
        width: 80%;
        margin: 10%;
    }
}

/* タブレット用のスタイル（例: 769pxから992pxの幅） */
@media screen and (min-width: 769px) and (max-width: 992px) {
    /* タブレット用のスタイルをここに記述 */
    .left-section .header_login {
        display: none;
    }
    .content04 .article-content {
        flex: 0 0 calc(25% - 20px); /* 4つの記事が1行に並ぶように */
        margin: 0 10px; /* 各記事の内部に5pxのマージンを設定 */
    }

    .content04 .articles {
        display: flex;
        flex-wrap: wrap;
        margin: -5px 3px; /* 各記事の周りに-5pxのマージンを設定 */
    }

    .content07 .articles-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
    }
    .content07 .article-content {
        width: calc(30% - 10px);
    }

    .mypage_nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
        gap: 3px;
    }
    .mypage_nav ul li {
        width: 100%;
        border-radius: unset;
        padding: 2px;
        background: #9dc3e6;

    }
    .mypage_nav ul li a {
        padding: 18px 8px;
        background: #fff;
    }



    .situation ul {
        flex-wrap: wrap;
    }

    .situation li {
        width: calc(33.3% - 10px);
        max-width: 100px;
        margin-bottom: 10px;
    }

    .content04-article-more-mobile {
        display: none;
    }
    .pc_only {
        display: table-row;
    }
    .mobile_only {
        display: none;
    }


    .login_user_form  .sns_login li {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #fff;
        margin: 10px;
    }
    .login_user_form  .sns_login li img {
        display: block;
        padding: 10px;
    }
    .login_user_form  .sns_login li:nth-child(2) img {
        display: block;
        width: 60%;
        margin: 20%;
    }
    .login_user_form  .sns_login li:nth-child(3) img {
        display: block;
        width: 80%;
        margin: 10%;
    }

}

/* スマートフォン用のスタイル（例: 768px以下の幅） */
@media screen and (max-width: 768px) {
    /* スマートフォン用のスタイルをここに記述 */
    .mobile_nav {
        display: inline-block;
    }
    .header_login {
        display: none;
    }
    .logo a img {
        height: 80%;
    }
    .image-container01 img:last-child {
        height: 50%;
        top:70%;
    }
    .overlay-text {
        top:10%;
        right:5%;
        font-size: 20px;
    }
    .content01 {
        margin: 0 0 24px;
    }
    .article_contents {
        display: block;
    }
    .article_inner,
    .content03 .article_text{
        height: auto;
        margin-bottom: 20px;
    }
    .sub_title h2 {
        font-size: 1.5em;
        padding: 0;
    }
    .sub_title img {
        max-height: 1.5em;
        padding: 0 5px;
    }
    .sub_text {
        font-size: 1.3em;
    }
    .left-section .header_login {
        display: none;
    }
    .content04 .articles {
        display: block;
        padding: 0 13px;
    }
    .content04 .article-item {
        text-align: center;
    }
    .content04 .article-image {
        float: none;
    }
    .content04 .article-content {
        width: calc(50% - 24px);
        flex: none;
        margin: 0 10px 20px;
        padding: 10px;
        box-sizing: border-box;
    }

    .content04-article-more-mobile,
    .content04-article-more {
        padding-top: 0;
    }

    .content07 .articles-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
    }
    .content07 .article-content {
        width: calc(100% - 10px);
    }

    .mypage_nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:center;
        gap: 3px;
    }
    .mypage_nav ul li {
        width: 100%;
        border-radius: unset;
        padding: 2px;
        background: #9dc3e6;

    }
    .mypage_nav ul li a {
        padding: 18px 8px;
        background: #fff;
    }





    .situation ul {
        flex-wrap: wrap; /* この行を追加 */
    }

    .situation li {
        width: calc(33.3% - 20px);
        max-width: 100px;
        margin: 5px;
    }
    .situation li a {
        width: 100%;
    }
    .content06 {
        padding: 50px 0;
    }
    .recruiting_inner {
        background-image: none;
    }
    .footer_section,
    .footer_left_section,
    .footer_right_section {
        flex: none;
        margin-left:0;
        display: block;
    }
    .top_links {
        padding-top: 40px;
    }
    .article1_inner {
        padding: 0 !important;
    }
    .bottom_links {
        padding-bottom: 20px;
    }
    .recruiting_inner {
        background-image: none;
    }
    .footer_left_section img {
        margin-right: 5px;
    }
    .mobile_footer_right_section {
        display: block;
        padding: 10px 15px;
        margin: 10px 0;
    }
    .footer_right_section {
        display: none;
    }
    .top_links,
    .bottom_links {
        padding: 0;
    }
    .top_links p,
    .bottom_links p {
        margin: 10px;
        display: block;
        font-size: 20px;
    }
    .footer_section {
        padding: 30px 0;
    }
    .content04 .pc-articles-list,
    .content04 .mobile-hidden-articles-list,
    .content04 .content04-article-more{
        display: none;
    }
    .content04 .content04-article-more-mobile {
        display: block;
    }
    .content04 .article-content {
        flex: 0 0 calc(50% - 20px);
        margin: 0 10px 10px;
    }
    .content04 .article-list .article-content {
        width:100%;
    }

    .search_container {
        width: 100%;
        padding: 0 15px;
    }
    .search_container .category {
        width: 28%;
    }
    .search_container .card-default {
        width: 70%;
        text-align: left;
    }
    .search_container .card-default form .card-body {
        width: 70%;
    }
    .search_container .card-default form .card-body .row {
        margin: 0;
    }
    .search_container .card-default form .card-body .row .col-lg-3 {
        padding: 0;
    }
    .search_container .card-body .form-control {
        width: 100%;
    }
    .search_container .card-footer {
        width: 20%;
    }

    .pc_only {
        display: none;
    }
    .mobile_only {
        display: table-row;
    }

    .login_user_form  .sns_login li {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border:solid 1px #ccc;
        padding: 15px;
        margin: 5px;
        background: #fff;
    }


}