/* ------------------------------------------- */
/* 大きめのデスクトップ向け */
/* ------------------------------------------- */
@media screen and (min-width: 2000px) {
    /*------TOPページ------*/
    .main-visual{
        height: 760px;
    }
    .mv-copy{
        font-size: 4.4vw;
    }
    .service-card__base {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important; /* 100%で広げる */
    }
    #service-slider .splide__track,
    #service-slider .splide__list{
        width: 100%!important;
        justify-content: center;
    }
    /*-----会社概要-----*/
    .lower-level_container .h1-jptext{
        margin-bottom: -1%;
    }
    /*------事業詳細------*/
    .business-h2-title{
        padding-left: 2%;
    }
    /*------採用TOP------*/
    .recruitment-business_container .recruit-grid{
        max-width: none;
        padding :0 5.56%;
    }
    /*------下層共通------*/
    .lower-level_container h1{
        padding-left: 2%;
    }
    /*------フッター------*/
    .footer-banner {
        font-size: 1.5vw;
    }

}

/* ------------------------------------------- */
/* 採用トップページスライダー用 */
/* ------------------------------------------- */
@media screen and (min-width: 1750px) {
    #voice-slider,
    #voice-slider .splide__track {
        display: block !important;
        overflow: visible !important; /* はみ出しを隠さない */
        height: auto !important;     /* 高さを自動にする */
        width: 100% !important;
        max-width: 1440px !important;
        margin: 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 2. リストを横並びに強制 */
    #voice-slider .splide__list {
        display: flex !important;
        justify-content: center !important;
        gap: 40px !important;
        transform: none !important; /* Splideの座標計算を無効化 */
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. 各カード（li）を表示させる */
    #voice-slider .splide__slide {
        display: block !important;
        width: 440px !important;  /* 3枚並びに適した幅 */
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 4. 不要なナビを隠す */
    #voice-slider .voice-slider__nav,
    #voice-slider .splide__arrows,
    #voice-slider .splide__pagination {
        display: none !important;
    }
}


/* ------------------------------------------- */
/* 小さめのデスクトップ・大きめのタブレット向け */
/* ------------------------------------------- */
@media screen and (max-width: 1230px) {
    /* --- 基本レイアウト --- */
    header {
        padding: 15px 20px;
    }

    /* チェックボックスは完全に非表示 */
    #menu-btn-check {
        display: none !important;
    }
    /* 三本線ボタン */
    .menu-btn {
        display: flex;
        height: 50px;
        width: 50px;
        justify-content: center;
        align-items: center;
        z-index: 100;
        cursor: pointer;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 2px;
        width: 25px;
        background-color: #0F1419;
        position: absolute;
    }
    .menu-btn span:before { 
        bottom: 8px; }
    .menu-btn span:after { 
        top: 8px; }

    .menu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #0F1419;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-y: auto; /* メニュー内のスクロールを許可 */
        -webkit-overflow-scrolling: touch;
        padding: 80px 40px 120px; /* 下部に余白を追加 */
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
        display: block;
    }
    /* --- 開閉時の挙動 --- */
    #menu-btn-check:checked ~ .menu-container {
        opacity: 1;
        visibility: visible;
    }
    /* 開いた時のテキスト色一括指定 */
    #menu-btn-check:checked ~ .menu-container .main-menu a,
    #menu-btn-check:checked ~ .logo-container a {
        color: #FFFFFF !important;
        text-shadow:none;
    }
    /* 閉じるボタン（×） */
    .menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .menu-close span:before, .menu-close span:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 2px;
        background-color: #fff;
    }
    .menu-close span:before { transform: translate(-50%, -50%) rotate(45deg); }
    .menu-close span:after { transform: translate(-50%, -50%) rotate(-45deg); }
    /* --- メニュー項目 --- */
    .main-menu {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0;
    }
    .main-menu li {
        width: 100%;
        margin: 0 0 25px 0 !important;
    }
    .main-menu li a {
        font-size: 24px;
        font-weight: bold;
    }

    /* --- アコーディオン（子メニュー） --- */
    header .dropdown-menu {
        display: none; /* JSでslideToggleするためにデフォルト非表示 */
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        background: transparent;
        border: none;
        margin-top: 15px;
        padding-left: 15px;
    }
    .dropdown-menu .dropdown-item a {
        font-size: 18px;
        font-weight: normal;
        padding: 10px 0;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    .dropdown-menu .dropdown-item::after {
        display: none;
    }
    /* アコーディオンの矢印（Business/Recruitの横） */
    .has-dropdown > a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    .has-dropdown > a::after {
        content: '▼';
        font-size: 14px;
        transition: transform 0.3s;
    }
    /* 開いた時に矢印を上に向ける */
    .has-dropdown.is-open > a::after {
        transform: rotate(180deg);
    }
    /* --- Entryボタン --- */
    header .entry-btn {
        margin-top: 30px;
        width: 100%;
        text-align: center;
        background-color: #fff !important;
        border-color: #fff !important;
    }
    header .entry-btn a {
        color: #0F1419 !important;
        width: 100%;
        padding: 15px 0;
        display: block;
    }

    .top-company h2 span,
    .top-business h2 span,
    .top-recruit h2 span,
    .top-news h2 span{
        margin-bottom: -16px;
    }
    /*------ビジネス一覧------*/
    .business-list span{
        padding: 10px 15px;
    }
    /*------ビジネス詳細------*/
    .business-detail .business-detail_h1{
        font-size: 6vw;
    }
    .business-detail h2{
        font-size: 5vw;
    }
    /*------採用TOP------*/
    .recruitment-business_container .recruit-grid{
        padding: 0 20px;
    }
    .aboutUS-contents_text span{
        margin-bottom: -10px;
    }
    /*------募集要項------*/
    .recruit-recruiting_container .entry-btn-container{
        width: 100%;
        margin: 20px 0 40px 0;
    }
    .recruit-recruiting_container .entry-btn{
        padding: 6%;
    }
    .recruit-recruiting_container li{
        display: block;
    }
    .recruit-recruiting_container li:first-of-type{
        padding-top: 0;
    }
    .recruit-li-contents{
        padding-left: 0;
        margin-top: 10px;
    }
    .recruit-business-title{
        margin-bottom: 20px;
    }
    .recruit-li-title::before{
        display: none;
    }
    /*------社員の声------*/
    .voice-item .qa-row{
        flex-direction: column;
    }
    .voice-item .qa-image{
        margin: 20px 0;
        flex: none;
    }

}
/* ------------------------------------------- */
/* タブレット・スマートフォン向け (850px以下) */
/* ------------------------------------------- */
@media screen and (max-width: 850px) {
    /* --- ヘッダー --- */
    header img{
        width: 40px
    }
    .logo-container a{
        font-size:20px;
    }
    .logo-container a span{
        font-size: 23px;
    }
   /* --- TOP-メインビジュアル (MV) --- */
    .main-visual {
        flex-direction: column;
        height: auto;
    }

    .mv-left {
        position: relative;
        width: 100%;
        height: 370px;
        padding: 40px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .mv-bg-logo {
        width: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .mv-copy {
        white-space: normal;
        text-align: center;
        font-size: 7vw;
    }

    .mv-right {
        width: 100%;
        height: auto;
        padding-bottom: 40px;
        overflow: hidden; /* はみ出し防止 */
    }

    .vertical-scroll-wrapper {
        flex-direction: column;
        gap: 15px; /* 段ごとの隙間 */
        padding: 0;
    }

    .scroll-column {
        width: 100%;
    }

    .scroll-container-vertical {
        flex-direction: row; /* 横並び */
        display: flex;
        width: max-content;
    }

    /* --- 上下段で速度と向きを変える設定 --- */
    /* 上段：30秒で左へ */
    .column-1 .scroll-container-vertical {
        animation: infinity-scroll-horizontal 30s linear infinite !important;
    }

    /* 下段：45秒で右へ（reverse） */
    .column-2 .scroll-container-vertical {
        animation: infinity-scroll-horizontal 45s linear infinite reverse !important;
    }

    .scroll-list-vertical {
        display: flex;
    }

    .scroll-item-vertical {
        width: 200px; /* スマホで見やすいサイズに微調整 */
        padding: 0 5px;
        flex-shrink: 0;
    }

    .scroll-item-vertical img {
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    /* 横スクロールアニメーション定義 */
    @keyframes infinity-scroll-horizontal {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    .top-company h2 span,
    .top-business h2 span,
    .top-recruit h2 span,
    .top-news h2 span{
        margin-bottom: -8px;
    }
    /* --- TOP-Company (会社概要) --- */
    .top-company .h2-bg, 
    .top-business .h2-bg, 
    .top-recruit .h2-bg{
        width: 50%;
        padding-left: 20px;
    }
    .top-company .h2-bg .title-icon,
    .top-business .h2-bg .title-icon,
    .top-recruit .h2-bg .title-icon,
    .top-news .h2-bg .title-icon{
        width:15px;
    }

    .top-company_text-contents {
        padding-left: 0;
        padding: 0 20px;
    }

    .top-company_text-contents p {
        width: 100%;
    }
/* --- TOP-Business (スライダー) --- */
/* 1. スライド全体の高さを強制 */
    #service-slider .splide__slide {
        width: 100% !important;
        height: 396px !important; /* 指定の高さ */
    }
    /* 2. カードの外枠 */
    .service-card__base {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important; /* 100%で広げる */
    }
    #service-slider .splide__track,
    #service-slider .splide__list{
        width: 100%!important;
    }
    /* 3. 画像の拡大を抑える設定 */
    .service-card__img {
        width: 100% !important;
        height: 396px !important;
    }
    .service-card__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
        object-position: center !important;
    }
    /* 内部パーツの高さ調整 */
    .splide__slide a.service-card__link {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    #service-slider .splide__arrow{
        width: 40%!important;
    }
    #service-slider .splide__arrows{
        width: 300px;
    }

#service-slider .splide__pagination__page.is-active,
#service-slider .splide__pagination__page{
    width: 10px!important;
    height: 10px!important;
}
#service-slider .splide__arrow::after{
    width: 20px !important;
    height: 20px !important;
    border-width: 5px 5px 0 0 !important;
}
#service-slider .splide__arrow::before{
    height: 5px !important;
}
#service-slider .splide__arrow--next::after{
    transform: translateY(-50%) rotate(45deg)!important;
}
#service-slider .splide__arrow--prev::after{
    transform: translateY(-50%) rotate(-135deg) !important;
}
    /* --- TOP-Recruit (採用ボタン) --- */
    .top-recruit-btn_box {
        gap: 20px;
    }
    .top-recruit-btn .title-icon{
        width: 13px;
    }
    .top-recruit-btn {
        width: 100%;
        height: 80px;
    }

    /* --- TOP-News (お知らせ) --- */
     .top-news .h2-bg{
        width: 40%;
     }
    .top-news__item a {
        flex-direction: column; /* 日付とタイトルを縦並びに */
        align-items: flex-start;
    }

    .top-news__date {
        margin-right: 0;
        margin-bottom: 8px; /* 日付の下に余白 */
        font-size: 14px;
    }

    .top-news__title {
        font-size: 16px;
        line-height: 1.5;
    }

    .top-news-detail-wh-btn {
        width: 60%;
    }
    .top-news-detail-wh-btn a{
        padding: 10px;
    }
    /*------会社概要------*/
    .lower-level_container h1{
        font-size: 7vw;
    }
    .lower-level_container h1::before{
        width: 13px;
    }
    .company .flex-box{
        flex-direction: column-reverse;
    }
    .company .flex-box-representative{
        margin-left: 0;
        margin-bottom: 20px;
    }
    .company .flex-box-representative img{
        width: 100%;
    }
    .companyProfile-box{
        padding: 6% 4%;
    }
    .companyProfile-box ul li{
        display: block;
        padding: 6% 0;
    }
    .companyProfile-box ul li:first-child{
        padding-top: 0;
    }
    .companyProfile-box ul li span{
        display: inline-block;
        margin-right: 0;
        margin-bottom: 10px;
    }
    /*------ビジネス一覧------*/
    .business-list-box{
        display: block;
    }
    .business-list-box li{
        width: 100%;
        margin-bottom: 20px;
    }
    /*------ビジネス詳細------*/
    .business-detail_container_flexbox{
        flex-direction: column;
        gap: 20px;
    }
    .business-detail_container_flexbox:first-child{
        flex-direction: column-reverse;
    }
    .business-detail-business_img img,
    .business-detail-representative_img img{
        max-width: none;
    }
    .business-h2-title::before{
        width: 13px;
    }
    /*------採用TOP------*/
    .recruitment-business_container .recruit-grid{
        display: block;
    }
    .recruit-grid .recruit-card{
        margin-bottom: 20px;
    }
    .recruit-grid .recruit-card__text{
        font-size: 24px;
    }
    .top-voice .h2-bg,
    .recruit-recruitment-requirements .h2-bg{
        width: 45%;
    }
    .top-voice .h2-bg .title-icon,
    .recruit-recruitment-requirements .h2-bg .title-icon{
        width: 13px;
    }
    .voice-explanationtext{
        padding-right: 5.56%;
    }
    /* 1. 枠を画面内に収める */
    #voice-slider .splide__track,
    #voice-slider .splide__list {
        width: 100% !important;
        left: 0 !important;
    }

    #voice-slider .splide__track {
        overflow: hidden !important; /* はみ出し禁止 */
    }

    /* 2. スライドを100%にして中央寄せ */
    #voice-slider .splide__slide {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 20px !important;
    }

    /* 3. カードのデザイン調整 */
    .voice-card__base {
        width: 100% !important;
        margin: 0 auto !important;
        aspect-ratio: 1 / 1 !important; /* 正方形を維持 */
    }
    
    .voice-card__info {
        text-align: center;
        margin-top: 15px;
    }
    #voice-slider .splide__arrows{
        width: 300px!important;
    }
    #voice-slider .splide__arrow{
        width: 40%!important;
    }
    #voice-slider .splide__arrow::after{
    width: 20px !important;
    height: 20px !important;
    }
    #voice-slider .splide__arrow--prev::after{
    border-top: 5px solid #0F1419!important;
    border-left: 5px solid #0F1419!important;
    }
    #voice-slider .splide__arrow--next::after{
    border-top: 5px solid #0F1419!important;
    border-right: 5px solid #0F1419!important;
    }
    #voice-slider .splide__arrow::before{
        height: 5px!important;
    }
    .voice-card__dept{
        font-size: 20px;
        text-align: left;
    }

    /*------社員の声------*/
    .voice-header .icon::before{
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #0F1419;
    }
    .voice-header{
        padding: 20px 0;
    }
    .staff-badge{
        padding: 2%;
    }
    .staff-badge p{
        font-size: 12px;
    }
    /*------エントリーフォーム------*/
    .form-container .form-row{
        display: block;
    }
    .form-row dt{
        width: 100%;
        margin-bottom: 20px;
    }
    .form-row dd{
        width: 100%;
    }
    .submit-box,
    .backbtn-box{
        width: 100%;
    }
    .submit-box input,
    .backbtn-box input{
        padding: 20px;
    }
    .form-confirmation-container .form-row{
        border-bottom: none;
    }
    .name-fields .wpcf7-form-control{
        max-width: 210px!important;
    }
    /*------ニュース------*/
    .news-item__link{
        display: block;
        padding: 20px 0;
    }
    .news-item__date{
        margin-bottom: 10px;
    }
    .news-pagination li a, .news-pagination li span{
        width: 30px;
        height: 30px;
    }
    .news-pagination li a span{
        width: 12px;
        height: 12px;
    }
    .top-news-detail-btn{
        width: 100%;
    }

    /*------フッター------*/
    .footer-main-copy{
        margin-bottom: 40px;
    }
    .footer-banners{
        flex-direction: column;
        border: none;
    }
    .footer-banner{
        position: relative;
        height: 90px;
        border: solid 1px #0F1419;
        margin-bottom: 20px;
        padding: 15px;
        font-size: 4vw;
    }
    .footer-banner .arrow{
        position: absolute;
        top:50%;
        transform:translateY(-50%);
        right: 16px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 16px solid #fff;
    }
    footer-nav {
        gap: 40px 20px;
    }

    .footer-nav__col {
        width: calc(50% - 10px); 
        box-sizing: border-box;
    }
}
/* ------------------------------------------- */
/* スマートフォン縦向き向け*/
/* ------------------------------------------- */
@media screen and (max-width: 480px) {
    /*------TOPページ------*/
    .mv-copy{
        font-size: 10vw;
    }
        .top-company .h2-bg .title-icon,
        .top-business .h2-bg .title-icon,
        .top-recruit .h2-bg .title-icon,
        .top-news .h2-bg .title-icon{
            width: 10px;
        }
    .top-company .h2-bg{
        width: 60%;
    }
    .top-business .h2-bg{
        width: 58%;
    }

    .top-news-detail-wh-btn{
        width: 50%;
    }
    /*------TOPスライダー------*/
    #service-slider .splide__arrows{
        width: 160px!important;
    }
    #service-slider .splide__arrow{
        width: 35%;
    }
    .service-card__info{
        bottom: 20px!important;
        right: 20px!important;
    }
    /*-----会社概要------*/
    .lower-level_container h1::before{
        width: 9px;
        margin-top: 1px;
    }
    .company-sign{
        width: 40%;
    }
    /*------ビジネス一覧------*/
    .business-list span{
        right: 10px;
        bottom: 10px;
    }
    /*------ビジネス詳細------*/
    .lower-level_container h1::before,
    .business-h2-title::before{
        width: 8px;
    }
    /*------採用TOP------*/
    .recruit-grid .recruit-card__text{
        bottom: 15px;
        right: 10px;
        font-size: 20px;
    }
    .top-voice .h2-bg .title-icon,
    .recruit-recruitment-requirements .h2-bg .title-icon {
        width: 10px;
    }
    /*ドットと矢印のデザイン*/
    #voice-slider .splide__pagination__page{
        width: 10px!important;
        height: 10px!important;
    }
    #voice-slider .splide__arrows{
        width: 160px!important;
    }
    #voice-slider .splide__arrow{
        width: 35%;
    }
    /*------社員の声------*/
    .staff-main-visual{
        height: 160px;
    }
    /*エントリーフォーム*/
    .name-fields p{
        flex-wrap: wrap;
    }
    .confirm-data input,
    .confirm-data textarea{
        font-size: 14px!important;
    }
    .company-fields .wpcf7-form-control-wrap input[readonly] {
        width: 100% !important;
        font-size: 14px !important; /* 長い場合はここを12px程度まで下げてください */
        display: block !important;
        white-space: nowrap !important; /* 1行を維持 */
        overflow: hidden !important;   /* はみ出しを隠す */
        text-overflow: ellipsis !important; /* はみ出した分を「…」にする */
    }
    /*------フッター------*/
    .footer-main-copy{
        font-size: 22px;
    }
        .footer-banner .arrow{
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid #fff;
        }
    .footer-banner{
        height: 65px;
    }
    .footer-nav__title{
        font-size: 15px!important;
    }
    .footer-nav li a{
        font-size: 12px!important;
    }  
}
/* ------------------------------------------- */
/* スマートフォン縦向き向け*/
/* ------------------------------------------- */
@media screen and (max-width: 370px) {
    /*------ヘッダー------*/
    .logo-container a{
        font-size:18px;
    }
    .logo-container a span{
        font-size: 20px;
    }
    /*------TOPページ------*/
    .top-recruit .h2-bg{
        width: 57%;
    }
    .top-recruit-btn_box {
        flex-direction: column;
    }
        .top-company .h2-bg{
        width: 73%;
    }
    .top-business .h2-bg{
        width: 68%;
    }
    /*------社員の声------*/
    .voice-header .icon{
        right: 3%;
    }
}