/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
}



/* 業者一覧セクション レスポンシブ */
@media (max-width: 1024px) {
    main{
        margin-top: 0px;
    }
    body.admin-bar #page {
        padding-top: 20px;
    }
}



/* Mobile (max-width: 767px) */
@media (max-width: 767px){
    /* 共通 */
    .sp-only{
        display: block !important;
    }
    .header-container {
        display: none;
    }
    .site-main{
        margin-top: 0;
    }
    .main-navigation {
        display: none;
    }
    .site-header{
        background-color: transparent;
        border-bottom: none;
    }

    /* SP Hamburger Menu Button - 紫背景・白アイコン */
    .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 20px; /* トップバーの高さ(20px)のすぐ下 */
        right: 0;
        width: 60px;
        height: 60px;
        background: #EC562F !important;
        border: none;
        border-radius: 0;
        cursor: pointer;
        z-index: 10000;
        padding: 10px;
        gap: 4px;
        box-shadow: none;
    }

    /* WordPress管理バー対応 - ハンバーガーメニュー位置調整（タブレット：782px以上） */
    body.admin-bar .hamburger-btn {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
    }

    .hamburger-btn span {
        display: block !important;
        width: 26px;
        height: 3px;
        background-color: #FFF !important;
        transition: all 0.3s ease;
        border-radius: 1px;
    }

    .hamburger-btn span.menu-text {
        width: auto !important;
        height: auto !important;
        background: none !important;
        background-color: transparent !important;
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 10px;
        font-weight: 600;
        margin-top: 2px;
        letter-spacing: 0.5px;
    }

    /* Hamburger Active State (X mark) - 3本ライン対応 */
    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg);
        position: absolute;
        top: 22px;
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg);
        position: absolute;
        top: 22px;
    }

    .hamburger-btn.active span.menu-text {
        position: absolute;
        bottom: 10px;
        transform: none;
    }

    /* Mobile Menu - ハンバーガーボタンと同じ位置から開始 */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 20px;
        right: 0;
        width: 75%;
        max-width: 300px;
        height: calc(100vh - 20px);
        background-color: #EC562F;
        z-index: 10001;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
        border-radius: 0;
    }

    .mobile-menu.active {
        transform: translateX(0);
        visibility: visible;
    }

    /* WordPress管理バー対応 - モバイルメニュー位置調整（タブレット：782px以上） */
    body.admin-bar .mobile-menu {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
        height: calc(100vh - 52px);
    }

    /* 閉じるボタン - ハンバーガーボタンと同じ位置・スタイル */
    .mobile-menu-close {
        display: flex !important;
        position: fixed;
        top: 20px;
        right: 0;
        width: 60px;
        height: 60px;
        background: #EC562F;
        border: none;
        border-radius: 0;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        gap: 4px;
        z-index: 10002;
    }

    .mobile-menu-close .close-icon {
        position: relative;
        width: 26px;
        height: 26px;
    }

    .mobile-menu-close .close-icon::before,
    .mobile-menu-close .close-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26px;
        height: 3px;
        background-color: #FFF;
        border-radius: 1px;
    }

    .mobile-menu-close .close-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-menu-close .close-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-menu-close .close-text {
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* WordPress管理バー対応 - 閉じるボタン位置調整（タブレット：782px以上） */
    body.admin-bar .mobile-menu-close {
        top: 52px; /* admin-bar(32px) + top-bar(20px) */
    }

    .mobile-menu-content {
        padding: 80px 0 30px;
    }

    .mobile-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav li {
        border-bottom: none;
    }

    .mobile-nav a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 16px 25px;
        color: #FFF;
        font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .mobile-nav a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        opacity: 1;
    }

    .mobile-nav .arrow {
        display: inline-block;
        margin-left: 12px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #FFF;
    }

    .mobile-menu-banner {
        margin: 25px 15px;
        position: relative;
    }

    .mobile-menu-banner-pr {
        position: absolute;
        top: -8px;
        left: 0;
        background: #EC562F;
        color: #FFF;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        z-index: 2;
    }

    .mobile-menu-banner img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    .mobile-menu-overlay.active {
        display: block;
    }
    .company-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Top Bar - 固定表示・スクロール追従 */
    .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 9999;
    }

    /* WordPress管理バー対応 - トップバー位置調整 */
    body.admin-bar .top-bar {
        top: 46px;
    }
    #page {
        padding-top: 20px;
    }

    body.admin-bar #page {
        padding-top: 20px;
    }

    .top-bar-inner {
        padding: 0 10px;
        gap: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
    }

    .pr-label {
        width: 28px;
        height: 13px;
        font-size: 10px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .top-bar-text {
        font-size: 11px;
        white-space: nowrap;
        overflow: visible;
        display: inline;
    }
    .top-bar-text-pc {
        display: none;
    }

    .top-bar-text-sp {
        display: inline;
    }
    .header-left{
        display: none;
    }
}

/* --- ボタンのレスポンシブ --- */
@media screen and (max-width: 767px) {
    .btn, .btn.--wide {
        width: 100%;
        max-width: 400px;
        font-size: 15px;
        height: 60px;
    }
}


/* ==========================================================================
   Responsive (Smartphone - Base 375px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* --- First View (FV) Responsive - Unit: vw --- */
    .fv-section {
        aspect-ratio: 375 / 620; /* スマホ用の縦長比率に変更 */
        background: url(../images/mv_pc.webp) no-repeat center center;
        background-size: cover;
        overflow: visible;
    }

    .fv-content {
        top: 25vw; /* (94/375)*100 */
        left: 5.3vw; /* (20/375)*100 */
    }
	.fv-lead{
		font-size: 4vw;
	}

    /* 「群馬エリアの70社〜」帯 */
    .copy-line-top {
        font-size: 4.8vw; /* 18px相当 */
        padding: 1.5vw 3vw;
        margin-bottom: 2vw;
    }

    .copy-line-top .num {
        font-size: 8vw; /* 30px相当 */
    }

    .copy-line-main {
        font-size: 8.5vw; /* 32px相当 */
        line-height: 1.4;
    }

    /* 浮遊CTA */
    .fv-cta {
        width: 85vw; /* 画面横幅いっぱい近く */
        margin-top: 5vw;
        transform: translateY(30%); /* 下からのスライド量を調整 */
    }

    /* --- INDEX Section Responsive - Unit: px --- */
    .content-index {
        position: relative; /* スマホではFVの下に配置し、見切れを防ぐ */
        bottom: 0;
    }

    .index-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2列×3段 */
        max-width: 100%;
    }

    .index-grid-item {
        min-height: 100px;
        padding: 15px 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 横の区切り線を追加 */
    }

    /* 横の区切り線を調整：3段目(5,6番目)は不要 */
    .index-grid-item:nth-child(5),
    .index-grid-item:nth-child(6) {
        border-bottom: none;
    }

    /* 縦の区切り線（::before）のリセットと再配置 */
    .index-grid-item::before {
        height: 60%; /* 線を少し短くして上品に */
        top: 20%;
    }

    /* 偶数番目（右側）の縦の区切り線を消す */
    .index-grid-item:nth-child(2n)::before {
        display: none;
    }

    /* テキストサイズのpx固定調整 */
    .index-text-large {
        font-size: 20px;
    }

    .index-grid-text {
        font-size: 13px;
        line-height: 1.5;
    }

    .small-area {
        font-size: 10px;
        margin-bottom: 2px;
    }
}

/* 超小型スマホ (320px) 向け微調整 */
@media screen and (max-width: 320px) {
    .index-text-large { font-size: 18px; }
    .index-grid-text { font-size: 11px; }
}

/* ==========================================================================
   About Section Responsive (Gunma SP Ver. - 350px Base VW)
   ========================================================================== */

@media screen and (max-width: 767px) {
    .about-section {
        background-color: #F3EEE4;
        padding: 14.28vw 0 0; /* 50px / 350 */
        overflow: visible;
    }

    .about-inner {
        height: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* 1. 左上の英字画像 */
    .about-deco-en {
        position: relative;
        top: 0;
        left: 0;
        width: 51.42vw; /* 180px / 350 */
        margin-bottom: 7.14vw; /* 25px / 350 */
        margin-left: 6.57vw; /* 23px / 350 */
    }

    /* 2. テキストエリア */
    .about-center-content {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        bottom: 0;
        margin-bottom: 11.42vw; /* 40px / 350 */
    }

    .about-line-frame {
        display: none !important; /* SP不要 */
    }

    .about-text-block {
        padding-left: 0;
        margin-top: 0;
    }

    .about-main-heading {
        font-size: 5.14vw; /* 18px / 350 */
        line-height: 1.6;
        margin-bottom: 0;
        margin-left: 6.57vw; /* 23px / 350 */
        padding: 0;
        background-color: transparent;
    }

    .about-description {
        font-size: 4.28vw; /* 15px / 350 */
        line-height: 2;
        letter-spacing: .03em;
        width: 55vw; /* 55% -> 55vw */
        margin-left: 6.57vw; /* 23px / 350 */
    }

    /* 3. 画像群のレイアウト（フレックスと重なり） */
    .about-sp-flex {
        display: flex;
        align-items: center;
        gap: 1.71vw; /* 6px / 350 */
    }

    /* 右上の写真（植物・窓） */
    .about-img-right-lines {
        position: relative;
        top: 0;
        right: 0;
        width: 40vw; /* 40% -> 40vw */
        margin-left: auto;
        z-index: 2;
    }

    /* 左下の写真（雑誌・テーブル） */
    .about-img-left-lines {
        position: relative;
        top: -14.28vw; /* -50px / 350 */
        left: 0;
        width: 56vw; /* 56% -> 56vw */
        margin-bottom: -5.71vw; /* -20px / 350 */
        z-index: 3;
    }

    /* 矢印右の写真（ソファ） */
    .about-img-mid-right {
        position: relative;
        top: 0;
        right: 0;
        width: 66.6vw; /* 66.6% -> 66.6vw */
        margin-left: 0;
        z-index: 4;
        padding-bottom: 9.71vw; /* 34px / 350 */
    }

    /* 4. 縦書きテキスト（次セクションへのはみ出し） */
    .about-vertical-text {
        position: absolute;
        top: auto;
        /* カンプの比率を維持したはみ出し量 */
        bottom: -22%; 
        right: 8vw; /* 8% -> 8vw */
        width: 20vw; /* 20% -> 20vw */
        z-index: 100;
    }
    
    .about-vertical-text img {
        width: 100%;
        height: auto;
    }

    /* SP非表示要素 */
    .about-deco-arrow {
        display: none !important;
    }
}












/* ==========================================================================
   Gunma Area Comparison Section Responsive
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .comparison-section {
        padding: 53% 0 80px; /* 上下余白をスマホ用に調整 */
    }

    .comparison-inner {
        max-width: 100%;
        padding: 0;
    }

    /* --- ヘッダー：群馬版特有のパーツ調整 --- */
    .comparison-header {
        margin-bottom: 30px;
        padding: 0 8px;
    }

    /* ＼ 市町村名 ／ */
    .comparison-area-names {
        font-size: 14px;
        padding: 6px 15px;
        margin-bottom: 10px;
    }

    /* 吹き出しボックス */
    .comparison-bubble-box {
        font-size: 14px;
        padding: 10px 20px;
        margin-bottom: 20px;
        width: 90%; /* 画面幅に合わせて伸縮 */
        max-width: 400px;
    }

    /* 吹き出しのシッポ画像：540px固定を解除して可変に */
    .comparison-bubble-box::after {
        width: 90vw; 
        max-width: 480px; 
        height: 60px;
        bottom: -10px;
    }

    .comparison-main-title {
        font-size: 24px;
        line-height: 1.4;
    }
    .comparison-main-title .num-large {
        font-size: 40px;
    }

    /* --- スクロールエリアの設定 --- */
    .comparison-scroll-wrapper {
        margin: 0;
        padding: 20px 20px 40px; /* 左右に余白を作り、カードが端から始まるように */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* スナップ機能：スワイプした時にピタッと中央で止まる */
        scroll-snap-type: x mandatory; 
    }

    .comparison-cards-container {
        display: flex;
        justify-content: flex-start; /* 横並びの起点 */
        gap: 15px;
        width: max-content; /* 幅を固定せず中身に合わせる */
        padding-right: 20px; /* 最後のカードの右側の余白 */
    }

    /* --- カード本体：373pxを絶対死守 --- */
    .comparison-company-card {
        width: 373px !important; /* PCサイズを維持 */
        flex-shrink: 0; /* 画面幅に合わせて縮ませない */
        scroll-snap-align: center; /* スクロール時に画面中央でスナップ */
        border-radius: 15px;
    }

    /* カード内のフォントサイズ微調整（スマホ視認性向上） */
    .comparison-card-intro-box {
        font-size: 16px;
        min-height: 80px;
        max-width: 280px;
    }
    .comparison-card-header {
        min-height: 60px;
        padding: 15px 10px;
    }
    .comparison-card-company-name {
        font-size: 22px;
    }

    .comparison-card-body {
        margin-bottom: 20px;
        max-width: 92%;
    }


    /* 坪単価エリア */
    .price-box {
        padding: 10px 0 20px;
    }
    .card-actions{
        padding: 0 10px 20px;
    }
}

/* 超小型スマホ (iPhone SEなど) 向け */
@media screen and (max-width: 375px) {
    .comparison-company-card {
        /* 画面幅375pxに対して373pxのカードを表示する場合、
           scroll-snapを center ではなく start にすると端が切れにくい */
        scroll-snap-align: start; 
    }
    .comparison-main-title {
        font-size: 21px;
    }
}
/* ==========================================================================
   Notice Section Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1024px) {
    .notice-grid {
        grid-template-columns: repeat(2, 1fr); /* 3列から2列へ */
        gap: 40px 20px;
    }
    /* 1024px付近でタイトルが窮屈になるのを防ぐ */
    .notice-header::before,
    .notice-header::after {
        flex-grow: 0.5; /* 線の長さを控えめにする */
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .notice-section {
        padding: 60px 0;
        /* iOSでの表示不具合を防ぐため、スマホでは固定背景を解除するのがベテランの定石 */
        background-attachment: scroll;
    }

    .notice-inner {
        padding: 0 15px;
    }

    /* 1. ヘッダー：ラインの調整 */
    .notice-header {
        margin-bottom: 50px;
        white-space: normal; /* 折り返しを許可 */
    }

    .notice-main-title {
        font-size: 24px; /* スマホサイズにダウン */
        line-height: 1.4;
    }

    /* スマホでは線が文字に被りやすいため、短くするか、あえて消してスッキリさせる */
    .notice-header::before,
    .notice-header::after {
        display: none; /* スマホでは線を消して中央揃えを強調 */
    }

    .notice-sub-title {
        font-size: 15px;
        margin-top: 10px;
    }

    /* 2. カードグリッド：1列へ */
    .notice-grid {
        grid-template-columns: 1fr;
        gap: 60px; /* ナンバリングが次のカードに被らないよう余白を確保 */
    }

    /* 3. カード内部の調整 */
    .notice-card {
        max-width: 450px;
        margin: 0 auto;
    }

    .card-number {
        font-size: 32px; /* 少し控えめに */
        top: -35px;
    }

    .card-img-wrap {
        margin-bottom: 25px;
    }

    .card-body {
        padding: 0 15px 30px;
    }

    .card-heading {
        font-size: 19px;
        margin-bottom: 15px;
    }

    /* セパレーター：固定幅238pxを可変にする */
    .card-separator {
        width: 80%; /* カード幅に合わせる */
        max-width: 238px;
        margin-bottom: 15px;
    }

    .card-text {
        font-size: 14.5px;
        line-height: 1.7;
    }
}

/* 超小型スマホ (375px以下) */
@media screen and (max-width: 375px) {
    .notice-main-title {
        font-size: 20px;
    }
    .card-heading {
        font-size: 17px;
    }
    .card-text {
        font-size: 13.5px;
    }
}


/* ==========================================================================
   Introduction Section Responsive
   ========================================================================== */

/* タブレットサイズ (1100px以下) */
@media screen and (max-width: 1100px) {
    .introduction-inner {
        padding: 40px 20px;
    }
    .company-main-visual-flex {
        gap: 20px;
    }
    .company-name-ja {
        font-size: 36px;
    }
    .feature-card-title {
        font-size: 28px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .introduction-section {
        padding: 30px 0;
    }

    .introduction-inner {
        padding: 30px 15px;
    }

    /* 1. セクション共通ヘッダーの調整 */
    .intro-sub-title {
        font-size: 18px;
        padding: 8px 20px;
    }

    .intro-bubble {
        font-size: 16px;
        padding: 8px 25px;
        margin-bottom: 20px;
    }

    /* 吹き出しシッポ画像(385px)のスマホ対応 */
    .intro-bubble::after {
        width: 80vw;
        max-width: 300px;
        height: 50px;
        bottom: -10px;
    }

    .intro-main-title {
        font-size: 22px;
    }

    .intro-main-title .txt-orange {
        font-size: 40px;
    }

    /* 2. 会社紹介：メインエリアのスタッキング */
    .company-header-top {
        margin-bottom: 40px;
    }

    .company-number-wrap {
        text-align: center;
        margin-bottom: 15px;
    }

    .company-num {
        font-size: 48px;
    }

    .company-main-visual-flex {
        flex-direction: column; /* 縦並び */
        gap: 30px;
    }

    .company-visual-text-area,
    .company-visual-image-area {
        width: 100%;
    }

    /* 吹き出しシッポ画像(537px)のスマホ対応 */
    .company-catch-bubble {
        font-size: 18px;
        padding: 10px 0;
    }

    .company-catch-bubble::after {
        width: 100%;
        height: 80px;
    }

    .company-name-ja {
        font-size: 28px;
        padding: 15px 5px;
    }

    /* 3. 特徴と強み：装飾タイトルの調整 */
    .introduction-common-title-wrap {
        margin: 30px 0;
    }

    .introduction-common-title {
        font-size: 18px;
        margin: 0 10px;
    }

    /* 線の長さ調整 */
    .introduction-common-title-wrap::before {
        flex: 0 0 40px; /* 左線を短く固定 */
    }

    /* 4. 特徴カードグリッド：1列へ */
    .features-card-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .feature-card-inner {
        min-height: auto;
        padding: 20px 15px;
    }

    .feature-card-title {
        font-size: 20px;
    }

    .feature-card-sub {
        font-size: 14px;
        gap: 10px;
    }

    .feature-card-sub::before,
    .feature-card-sub::after {
        width: 15px;
    }

    .feature-card-desc {
        font-size: 14.5px;
        padding: 15px 0 10px;
    }

    /* 5. ボタンエリア：縦積み */
    .company-action-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .company-action-buttons .btn.--wide {
        width: 100%;
        max-width: 340px;
        height: 54px;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .company-name-ja {
        font-size: 24px;
    }
    .introduction-common-title {
        font-size: 16px;
    }
    .feature-card-title {
        font-size: 18px;
    }
}

/* ==========================================================================
   Works Section Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1024px) {
    .works-header-bar h3 {
        font-size: 24px;
    }
    .works-slider-outer {
        max-width: 90%;
        padding: 0 60px; /* 矢印スペースを少し詰める */
    }
    .works-vertical-text {
        font-size: 48px;
        left: 5px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .works-section {
        padding: 40px 0;
    }

    .works-inner {
        padding: 0;
    }

    .works-header-bar {
        margin-bottom: 30px;
        padding: 8px;
    }

    .works-header-bar h3 {
        font-size: 18px;
    }

    /* 1. スライダー外枠：矢印スペースをさらに確保 */
    .works-slider-outer {
        padding: 0 20px; /* スマホでの左右余白 */
    }

    /* 2. 縦書きWorks：スマホではデザインを邪魔しないサイズと位置に */
    .works-vertical-text {
        font-size: 30px; /* 小さくする */
        left: -12px;
        bottom: 0px;
        letter-spacing: 0.1em;
    }

    /* 3. メイン画像：比率を維持しつつ余白調整 */
    .works-main-display {
        margin-bottom: 10px;
    }
    .works-main-display img {
        aspect-ratio: 1.5 / 1; /* スマホで見やすい比率に微調整 */
    }

    /* 4. 下段レイアウト：Worksテキストを避けるためのマージン */
    .works-bottom-layout {
        gap: 10px;
        margin-top: 10px;
    }

    .works-thumbnails {
        gap: 8px;
    }

    /* 5. 矢印：スマホでも押しやすいサイズを維持しつつ配置調整 */
    .works-prev, .works-next {
        width: 36px !important;
        height: 36px !important;
        top: 35% !important; /* メイン画像の中心に合わせる */
    }
    .works-prev::after, .works-next::after {
        font-size: 14px !important;
    }

    /* 6. ボタンエリア：縦並びに変更 */
    .works-action-buttons {
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
        align-items: center;
    }
    .works-action-buttons .btn.--wide {
        width: 100%; /* 横幅いっぱい */
        max-width: 340px;
        font-size: 14px;
        height: 54px;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .works-slider-outer {
        padding: 0 40px;
    }
    .works-vertical-text {
        font-size: 24px;
    }
    .works-thumbnails {
        margin-left: 20px;
    }
}
/* ==========================================================================
   Reviews Section Responsive
   ========================================================================== */

/* タブレット・スマホ共通 (1024px以下) */
@media screen and (max-width: 1024px) {
    .reviews-grid {
        max-width: 95%; /* 画面幅いっぱいに広げる */
        gap: 20px;
    }
    .review-title {
        font-size: 24px; /* 少しサイズダウン */
        min-height: auto; /* 高さを自動に */
        padding: 10px 0;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .reviews-section {
        padding: 40px 0;
    }
    .reviews-inner{
        padding: 0;
    }
    .reviews-header-bar h3 {
        font-size: 20px;
    }

    /* 1. グリッドを1列に変更 */
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* 2. カードの余白調整 */
    .review-card {
        padding: 15px 8px 10px; /* ゴールドの縁を少し細く */
    }

    .avatar-circle {
        width: 80px; /* アイコンを少し小さく */
        margin-bottom: 12px;
    }

    /* 3. 白背景のボックス調整 */
    .card-lower-white-box {
        padding: 20px 15px 50px; /* 下部に引用リンク用のスペースを確保 */
        min-height: auto; /* スマホでは内容量に合わせる */
    }

    .review-title {
        font-size: 20px; /* スマホで見やすいサイズ */
        min-height: auto;
        margin-bottom: 10px;
        display: block; /* 中央揃えを維持 */
    }

    .review-line {
        margin: 0 auto 15px;
    }

    .review-text {
        font-size: 14px; /* PC版の12pxはスマホでは小さすぎるため拡大 */
        line-height: 1.7;
        text-align: justify; /* 左右を揃えて美しく */
    }

    /* 4. 引用リンクの配置固定 */
    .review-citation-link {
        font-size: 11px;
        bottom: 15px;
        right: 15px;
    }

    /* 5. アクションボタン：縦並びに変更 */
    .reviews-action-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 30px;
    }
    
    .reviews-action-buttons .btn.--wide {
        width: 100%;
        max-width: 340px;
        font-size: 15px;
        height: 54px;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .review-title {
        font-size: 18px;
    }
    .review-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   Company Info Section
   ========================================================================== */

/* 1. PC〜タブレット：余白の段階的調整 */
@media screen and (max-width: 1280px) {
    .company-info-inner {
        padding: 40px 40px 50px; /* 76pxから40pxへ縮小 */
    }
}

@media screen and (max-width: 1100px) {
    /* テーブルとマップを早めに縦並びにする */
    .profile-upper-flex {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .profile-table-area,
    .profile-map-area {
        width: 100%; /* 横幅をいっぱい使う */
    }
}

/* 2. テーブル自体の調整 */
.profile-table {
    table-layout: auto; /* コンテンツに合わせて幅を調整 */
}

.profile-table th {
    width: 120px; /* 30%ではなく、必要な最低限の幅(120px)に固定 */
    white-space: nowrap; /* 見出しの変な改行を防ぐ */
}

/* 3. スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .company-info-section {
        padding: 40px 10px; /* セクション全体の余白 */
    }

    .company-info-inner {
        padding: 30px 15px; /* 白背景内の余白をさらに絞る */
    }

    .info-header-bar {
        margin-bottom: 30px;
    }

    .info-header-bar h3 {
        font-size: 22px;
    }
    .company-info-section {
        padding: 0;
    }

    .company-info-inner {
        padding: 25px 10px;
    }

    .profile-table th, 
    .profile-table td {
        display: table-cell; /* 縦積みにせず、あえて横並びを維持するパターン（読みやすい方を選べます） */
        font-size: 12px;
        padding: 10px 8px;
    }

    /* もし横並びがキツイ場合は、ここを block に戻します */
    .profile-table th {
        width: 80px; /* スマホ時はさらに細く */
        min-width: 80px;
    }

    /* 店舗カードの調整 */
    .store-grid-container {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 10px;
    }
}

/* 4. アクションボタンの幅調整 */
@media screen and (max-width: 767px) {
    .info-action-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 30px;
    }
    .info-action-buttons .btn.--wide {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
New article Responsive
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr); /* タブレット2列 */
        gap: 25px;
    }
}

@media screen and (max-width: 599px) {
    .new-articles-section { padding: 50px 0; }
    .articles-grid {
        grid-template-columns: 1fr; /* スマホ1列 */
        gap: 30px;
    }
    .article-thumb-wrap {
        aspect-ratio: 16 / 9;
    }
    .overlay-ja { font-size: 28px; }
    .overlay-en { font-size: 34px; }
    .new-articles-section .company-list-subtitle::before,
    .new-articles-section .company-list-subtitle::after {
        width: 40px;
    }
}


/* ==========================================================================
   FAQ Section Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1024px) {
    .faq-bg-wrapper {
        max-width: 95%;
    }
    
    /* 328pxの線を画面幅に合わせて縮小 */
    .faq-subtitle::before,
    .faq-subtitle::after {
        width: 15vw; /* 画面幅に応じた長さに変更 */
        min-width: 40px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .faq-section {
        padding: 40px 0 60px; /* 下部の余白をスマホ用に調整 */
    }

    .faq-header {
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .faq-main-title {
        font-size: 22px; /* スマホで見やすいサイズ */
        line-height: 1.4;
    }

    .faq-subtitle {
        font-size: 14px;
        gap: 10px;
    }

    /* スマホでは線が邪魔にならないようさらに短く */
    .faq-subtitle::before,
    .faq-subtitle::after {
        width: 30px;
    }

    /* 1. 質問部分（Q）の調整 */
    .faq-q {
        padding: 12px 15px; /* タップ領域を確保しつつパディングを詰める */
        gap: 10px;
    }

    .q-icon {
        font-size: 16px;
    }

    .q-text {
        font-size: 14.5px;
        line-height: 1.5;
        padding-right: 25px; /* アイコンとの重なり防止 */
    }

    /* 2. 開閉アイコン（トリガー）の調整 */
    .faq-icon-trigger {
        right: 15px;
        width: 12px;
        height: 12px;
    }

    /* 3. 回答部分（A）の調整 */
    .faq-a-inner {
        padding: 15px 15px 20px 42px; /* Qアイコンの真下にテキストが来るように微調整 */
        font-size: 13.5px;
        line-height: 1.7;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .faq-main-title {
        font-size: 20px;
    }
    
    .faq-a-inner {
        padding-left: 15px; /* 画面が狭すぎる場合はインデントを解除して文字数を優先 */
    }
}










/* ==========================================================================
   Company List Section Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1024px) {
    .company-list-section {
        padding-bottom: 80px;
    }

    /* 274pxの装飾ラインを画面幅に合わせて縮小 */
    .company-list-subtitle::before,
    .company-list-subtitle::after {
        width: 15vw; 
        min-width: 50px;
    }

    .company-list-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列 */
        gap: 25px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .company-list-section {
        padding: 40px 0 60px;
    }

    .section-title-wrapper {
        margin-bottom: 35px;
        padding: 0 15px;
    }

    .company-list-title {
        font-size: 26px; /* スマホで見やすいサイズに */
        line-height: 1.3;
    }

    .company-list-subtitle {
        font-size: 14px;
        gap: 15px;
    }

    /* スマホではラインをさらに短くして中央に寄せる */
    .company-list-subtitle::before,
    .company-list-subtitle::after {
        width: 40px;
    }

    /* 1. グリッドを1列に変更 */
    .company-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 35px;
    }

    /* 2. カードヘッダーの調整 */
    .card-header-gold {
        min-height: 60px;
        padding: 12px 15px;
    }

    .card-title {
        font-size: 18px;
    }

    .header-arrow {
        right: 10px;
        width: 22px;
        height: 22px;
    }

    /* 3. カードボディ（中身）の余白調整 */
    .company-card .card-body {
        padding: 15px 12px 20px;
    }

    .feature-text-area {
        min-height: auto; /* 高さを内容に合わせる */
        padding: 12px;
    }
    
    .feature-text-area p {
        font-size: 14px;
    }

    /* 4. ラベルとテキストの調整 */
    .info-label-box {
        font-size: 13px;
        padding: 2px 8px;
    }

    .info-text {
        font-size: 13px;
    }

    /* 5. 「記事を見る」ボタン：スマホ用にフォントサイズを適正化 */
    .btn-view-article {
        font-size: 16px; /* PC版の20pxからスマホ向きの16pxへ */
        height: 48px;
    }

    .btn-view-article .btn-arrow {
        right: 15px;
        width: 20px;
        height: 20px;
    }

    /* 6. 「会社一覧を見る」オレンジボタン：全幅へ */
    .btn-gunma-orange {
        width: 100%;
        max-width: 340px;
        height: 60px;
        font-size: 17px;
    }
}

/* 超小型スマホ (375px以下) */
@media screen and (max-width: 375px) {
    .company-list-title {
        font-size: 22px;
    }
    
    .info-item {
        margin-bottom: 18px;
    }
}


/* ==========================================================================
   Gunma Area Footer Responsive
   ========================================================================== */

/* タブレット・スマホ共通 (1024px以下) */
@media screen and (max-width: 1024px) {
    .footer-overlay {
        padding: 60px 0 40px;
    }
    .footer-top-container {
        gap: 30px;
        padding: 0 15px;
    }
    .footer-section-content {
        padding: 20px;
        min-height: 200px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    .site-footer {
        background-position: 70% center; /* スマホで見栄えの良い位置に背景をずらす */
    }

    .footer-overlay {
        padding: 40px 0 30px;
    }

    /* 1. 上段カラムを縦並びに */
    .footer-top-container {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 30px;
    }

    .footer-section-title {
        font-size: 18px;
        text-align: center; /* スマホでは中央寄せが収まりが良い */
    }

    .footer-section-content {
        min-height: auto; /* 高さを内容に合わせる */
        padding: 20px 15px;
    }

    .footer-article-list a, 
    .footer-company-links a {
        font-size: 14px;
        padding: 10px 0; /* タップしやすく上下パディングを確保 */
        border-bottom: 1px solid #f0f0f0; /* 境界線を薄く入れて誤タップ防止 */
    }
    .footer-article-list li:last-child a, 
    .footer-company-links li:last-child a {
        border-bottom: none;
    }

    .footer-no-content {
        font-size: 15px;
        padding: 30px 0;
    }

    /* 2. 免責事項の調整 */
    .footer-disclaimer {
        font-size: 11px;
        line-height: 1.6;
        padding: 0 10px;
        margin-bottom: 25px;
        text-align: justify; /* 左右を揃えて整頓 */
    }

    /* 3. 下部エリア（ナビ ＆ コピーライト） */
    .footer-bottom-area {
        flex-direction: column; /* 縦並び */
        gap: 20px;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* 簡易的な区切り線 */
        padding-top: 20px;
    }

    .footer-menu {
        justify-content: center;
        flex-wrap: wrap; /* メニューが多い場合に折り返す */
        gap: 10px 20px;
    }

    .footer-menu li a {
        font-size: 13px;
    }

    .copyright {
        font-size: 10px;
        text-align: center;
        opacity: 0.8;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .footer-section-title { font-size: 17px; }
    .footer-menu { gap: 10px 15px; }
    .footer-menu li a { font-size: 12px; }
}





/* ==========================================================================
   Area Column Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .area-column-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .area-column-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .area-column-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .area-column-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .article-header .article-title {
        font-size: 22px;
        display: block;
        overflow: visible;
    }

    /* タブレット用：より詳細度の高いセレクタで確実に適用 */
    .area-column-article .article-header .article-title {
        display: block;
        overflow: visible;
        font-size: 22px;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 18px;
    }

    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .related-articles-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-nav {
        font-size: 12px;
        padding: 15px 0;
    }

    .breadcrumb-separator {
        margin: 0 5px;
    }

    .article-header .article-title {
        font-size: 20px;
        display: block;
        overflow: visible;
    }

    /* スマホ用：より詳細度の高いセレクタで確実に適用 */
    .area-column-article .article-header .article-title {
        display: block;
        overflow: visible;
        font-size: 20px;
    }

    .article-category-tag {
        font-size: 12px;
        padding: 5px 12px;
    }

    .article-dates {
        font-size: 12px;
    }

    .area-column-card-title {
        font-size: 14px;
    }

    .area-column-card-date {
        font-size: 12px;
    }
}
/* Small Mobile (max-width: 480px) */
@media (max-width: 480px){
    .top-bar-text {
        font-size: 11px;
    }
    /* Hero Section */
    .index-title {
        font-size: 24px;
    }

    .index-item span:not(.index-square):not(.index-arrow) {
        font-size: 15px;
    }

    .recommended-companies .section-header {
        margin-bottom: 10px;
    }

    /* FAQ Section Responsive */
    .faq-section{
        margin-bottom: 30px;
    }
    .faq-container {
        padding: 25px 20px;
    }
    .faq-container::before{
        right: -4px;
        bottom: -8px;
    }

    .faq-title {
        font-size: 22px;
    }

    faq-title-blue{
        font-size: 1.2em;
    }

    .faq-title-text {
        font-size: 20px;
    }

    .faq-line-icon {
        width: 25px;
        top: -10px;
        right: -22px;
    }

    .faq-item {
        padding: 0;
        width: 100%;
    }

    .faq-question {
        gap: 10px;
    }

    .faq-q-icon {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .faq-q-text {
        font-size: 15px;
        max-width: 70%;
    }

    /* 会社一覧セクション */
    .company-list-btn {
        padding: 12px 14px;
        min-height: 55px;
    }

    .company-list-btn .btn-text {
        font-size: 14px;
    }

    .company-list-btn .btn-text-line2 {
        font-size: 13px;
    }

    /* 追従 */
    .fixed-right-elements {
        bottom: 15px;
        right: 10px;
        gap: 10px;
    }

    .scroll-to-top-btn {
        width: 42px;
        height: 42px;
    }

    .scroll-to-top-btn .top-text {
        font-size: 8px;
    }

    .scroll-to-top-btn .top-arrow {
        width: 16px;
        height: 16px;
    }

    .fixed-banner {
        width: auto;
        height: auto;
        max-width: 340px;
    }

    .close-banner-btn {
        width: 20px;
        height: 20px;
        top: -6px;
        right: -6px;
    }

    .close-banner-btn svg {
        width: 8px;
        height: 8px;
    }
    /* Privacy Policy Page Responsive */
    .company-btn{
        font-size: 16px !important;
    }
    .policy-page-title {
        font-size: 20px;
        padding: 12px 15px;
    }

    .policy-intro {
        padding: 15px;
        margin-bottom: 30px;
    }

    .policy-intro p {
        font-size: 13px;
    }

    .policy-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .policy-section-title {
        font-size: 16px;
        padding-left: 10px;
        margin-bottom: 15px;
    }

    .policy-section-content {
        padding-left: 0;
    }

    .policy-section-content p {
        font-size: 13px;
    }

    .policy-subsection-title {
        font-size: 14px;
        padding: 6px 10px;
    }

    .policy-footer {
        margin-top: 30px;
        padding-top: 15px;
        text-align: center;
    }

    .policy-updated {
        font-size: 12px;
    }

    /* Site Map Page Responsive */
    .sitemap-article {
        padding: 20px 15px;
    }

    .sitemap-page-title {
        font-size: 20px;
    }

    .sitemap-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .sitemap-section-title {
        font-size: 16px;
        padding-left: 10px;
        margin-bottom: 15px;
    }

    .sitemap-list li {
        padding: 8px 0;
        padding-left: 16px;
    }

    .sitemap-list li::before {
        width: 6px;
        height: 6px;
    }

    .sitemap-list li a {
        font-size: 13px;
    }
}