/* ==========================================================================
Responsive Styles
========================================================================== */
@media (max-width: 1199px){
	main{
		width: 100%;
	}
    .index-item {
        padding: 25px 5px;
    }
    .index-item span {
        font-size: 14px;
    }
    .index-title {
        font-size: 30px;
    }
    .intro-bottom-wrapper{
        padding: 24px 50px 24px 24px;
    }
    .intro-tree{
        right: -2vw;
        width: 80px;
    }
    .company-main-content{
        padding: 0 10px;
    }
}



/* 業者一覧セクション レスポンシブ */
@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: #181C5E !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: #181C5E;
        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: #181C5E;
        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: #181C5E;
        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;
    }
    .intro-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .intro-image {
        flex: 0 0 auto;
        width: 300px;
    }
    .intro-bottom-text {
        font-size: 18px;
    }
    .header-bubble{
        font-size: 2.7vw;
        width: 80%;
    }
    .header-bubble::before{
        width: 76.6vw;
        height: 9.1vw;
    }
    .reviews-text-grid{
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
    }
    .overview-content-wrapper{
        margin-left: 0;
    }
    .overview-inner{
        flex-direction: column;
    }
    .overview-table-wrapper{
        width: 100%;
    }
    .overview-map-wrapper{
        width: 100%;
    }
    .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;
        background-color: #fff;
    }

    /* 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;
    }
}

/* ==========================================================================
FV
   ========================================================================== */
@media screen and (max-width: 767px) {
    .fv-section {
        width: 100vw;
        /* スマホ用のアスペクト比（縦長：375/620など。背景画像に合わせて調整してください） */
        aspect-ratio: 375 / 620; 
        background: url(../images/mv_pc.webp) no-repeat center center; /* スマホ専用背景 */
        background-size: cover;
        background-position: center;
    }

    .fv-inner {
        width: 100%;
        height: 100%;
    }

    /* コンテンツ位置調整（スマホ位置） */
    .fv-content {
        top: 15vw; /* (56/375)*100 */
        left: 6.5vw; /* (24/375)*100 */
    }

    /* 吹き出し（スマホでは大きく） */
    .fv-bubble {
        width: 58vw; /* (218/375)*100 */
        margin-bottom: 0.5vw;
    }

    /* コピー：スマホサイズ */
    .fv-copy-01 {
        font-size: 5.3vw; /* 20px相当 */
        margin-bottom: 1.5vw;
    }
    .fv-copy-01 .num-gray {
        font-size: 9.3vw; /* 35px相当 */
        margin: 0 0.8vw;
    }

    .fv-copy-highlight {
        padding: 1.5vw 3vw;
        font-size: 8vw; /* 30px相当 */
        margin-bottom: 3vw;
        box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    .fv-copy-02 {
        font-size: 5.8vw; /* 22px相当 */
        margin-bottom: 0.5vw;
    }

    .fv-copy-03 {
        font-size: 6.9vw; /* 26px相当 */
    }

    .num-red {
        font-size: 14vw; /* 52px相当 */
        margin: 0 1vw;
        vertical-align: -1vw;
    }
    
    .txt-red {
        font-size: 6.9vw;
    }

    /* --- 下部の浮遊CTA（スマホ版） --- */
    .fv-cta {
        bottom: 8vw; /* 位置微調整 */
        width: 90vw; /* 画面横幅いっぱい近く */
        transform: translateX(-50%) translateY(30%); /* 下からのスライド量を調整 */
    }

    .fv-cta img {
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
    }
}

/* ==========================================================================
   INDEX Section Responsive (Non-vw)
   ========================================================================== */

/* タブレットサイズ (1024px以下) : 3列×2段 */
@media screen and (max-width: 1024px) {
    .index-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .index-grid-item {
        /* 3列になるので、3の倍数（右端）の線を消す */
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff; /* 段の間に横線を追加 */
    }

    .index-grid-item:nth-child(3n) {
        border-right: none;
    }

    /* 下の段の線を消す（4, 5, 6番目） */
    .index-grid-item:nth-child(n+4) {
        border-bottom: none;
    }
    
    .index-text-large {
        font-size: 24px;
    }
}

/* スマホサイズ (599px以下) : 2列×3段 */
@media screen and (max-width: 599px) {
    .content-index {
        padding: 0 10px; /* スマホの端の余白を少し詰める */
    }

    .index-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .index-grid-item {
        min-height: 90px;
        padding: 15px 5px;
        /* 一旦リセットしてから設定 */
        border-right: 2px solid #fff !important;
        border-bottom: 2px solid #fff !important;
    }

    /* 2列なので、偶数番目（右側）の縦線を消す */
    .index-grid-item:nth-child(2n) {
        border-right: none !important;
    }

    /* 最後の段（5, 6番目）の横線を消す */
    .index-grid-item:nth-child(n+5) {
        border-bottom: none !important;
    }

    .index-text-large {
        font-size: 20px;
    }

    .index-grid-text {
        font-size: 12px; /* 視認性確保のため少し小さく */
        line-height: 1.4;
    }

    .small-text {
        font-size: 10px; /* 「＼深谷市・本庄市／」のサイズ */
    }

    .index-square {
        width: 12px;
        height: 8px;
        bottom: 5px;
        right: 5px;
    }
}

/* ==========================================================================
   About Section Responsive
   ========================================================================== */

/* タブレット・スマホ共通 (1024px以下) */
@media screen and (max-width: 1024px) {
    .about-en-title {
        font-size: 36px;
    }
    .about-left-visual {
        width: 30%; /* 画面幅に合わせて縮小 */
    }
    .about-text-area {
        margin-top: 150px;
        max-width: 55%;
    }
    .about-description {
        font-size: 20px;
    }
    .about-kitchen-visual {
        width: 40%;
        margin-right: 80px;
    }
}

/* スマホ (767px以下) */
@media screen and (max-width: 767px) {
    .about-section {
        padding: 40px 0 0; /* 下パディングを0にして画像のはみ出しを強調 */
    }

    .about-inner {
        padding: 0 15px;
        display: flex;
        flex-direction: column;
    }

    /* 1. 左上の英語タイトル：少し小さくして装飾に徹する */
    .about-en-title {
        font-size: 28px;
        margin-bottom: 10px;
        position: relative; /* absoluteを解除して流れに組み込む */
    }

    /* 2. 左側の画像：横幅を広げ、少し右に寄せて重ねる */
    .about-left-visual {
        position: relative; /* absolute解除 */
        width: 85%;
        margin-left: -15px; /* 画面端まで寄せる */
        top: 0;
        z-index: 2;
    }

    /* 3. 中央のテキスト：画像に少し重なるように上に引き上げる */
    .about-text-area {
        margin-top: -40px; /* 画像と重ねる */
        margin-bottom: 40px;
        padding: 30px 20px;
        background-color: rgba(255, 255, 255, 0.8); /* 重なった部分の文字を読みやすく */
        z-index: 10;
        position: relative;
        max-width: 100%;
    }

    .about-description {
        font-size: 16px; /* スマホで読みやすいサイズ */
        line-height: 1.8;
    }

    /* 4. キッチン画像：右寄せを維持 */
    .about-kitchen-visual {
        width: 80%;
        margin-right: 0;
        margin-left: auto;
        position: relative;
        z-index: 5;
    }

    /* 5. 右側の縦書き画像：細長くして右端に配置、次のセクションへ大胆にはみ出す */
    .about-vertical-title {
        top: -30px; /* 開始位置を調整 */
        right: 10px;
        width: 85px; /* スマホ用に細く */
        z-index: 100;
    }

    .about-vertical-title img {
        /* 次のセクションの背景色に被るように大きく下にずらす */
        transform: translateY(120px); 
    }
}

/* 小さいスマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .about-en-title { font-size: 24px; }
    .about-description { font-size: 15px; }
    .about-vertical-title { width: 50px; }
}

/* ==========================================================================
   Comparison Section Responsive
   ========================================================================== */

/* タブレット・スマホ共通 */
@media screen and (max-width: 1024px) {
    .comparison-inner {
        max-width: 100%;
        padding: 0; /* 左右の余白はscroll-wrapperのpaddingで管理 */
    }

    /* ヘッダー周りの調整 */
    .comparison-sub-title {
        font-size: 20px;
        padding: 0 20px;
    }
    .comparison-main-title {
        font-size: 28px;
        padding: 0 20px;
    }
    
    /* タイトル横のライン（335px固定だとスマホからはみ出るため縮小） */
    .title-line-decor {
        width: 15vw; /* 画面幅に合わせて伸縮 */
        min-width: 40px;
    }
    .title-line-decor img {
        width: 100%;
        height: auto;
    }

    /* --- スクロールエリアの挙動強化 --- */
    .comparison-scroll-wrapper {
        margin: 0;
        padding: 20px 20px 40px; /* 下に余白を設けてスクロールしやすく */
        /* スムーズなスクロール体験を強制 */
        scroll-snap-type: x mandatory; 
    }

    .comparison-cards-container {
        margin: 0;
        gap: 15px; /* スマホでは少し詰める */
        padding-right: 20px; /* 最後のカードの右側に余白を確保 */
    }

    /* カードの横幅調整 */
    .comparison-company-card {
        width: 340px; /* スマホ画面に収まりつつ次が見えるサイズ */
        flex-shrink: 0; /* 潰れないように固定 */
        scroll-snap-align: center; /* スクロールが止まったときに中央に来る */
        border-radius: 20px;
    }

    /* カード内部のサイズ微調整 */
    .comparison-card-intro-box {
        font-size: 18px;
        min-height: 110px;
    }
    .comparison-card-header {
        min-height: 100px;
    }
    .comparison-card-company-name {
        font-size: 24px;
    }
    
    /* 坪単価ボックスのスマホサイズ */
    .price-box {
        width: 90%;
        margin: 25px auto;
    }
    .price-label {
        font-size: 14px;
        padding: 15px 10px;
    }
    .price-value {
        font-size: 14px;
    }
    .price-value .num {
        font-size: 24px;
    }
}

/* 小さいスマホ用調整 */
@media screen and (max-width: 375px) {
    .comparison-company-card {
        width: 290px; /* より小さい画面向け */
    }
    .comparison-main-title {
        font-size: 22px;
    }
}


/* ==========================================================================
   Points Section Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1200px) {
    .point-text p {
        margin-left: 50px; /* 余白を縮小 */
    }
    .point-text-right p {
        margin-left: 50px;
    }
}

@media screen and (max-width: 1024px) {
    .point-heading-box {
        max-width: 100%; /* ボックスがはみ出ないように */
    }
    .point-title {
        font-size: 22px; /* タイトルを少し小さく */
    }
    .point-text p {
        margin-left: 20px;
    }
    .point-text-right p {
        margin-left: 20px;
    }
}

/* スマホサイズ (768px以下) */
@media screen and (max-width: 768px) {
    .points-section {
        margin: 60px auto;
        padding: 0 15px;
    }

    .points-header {
        margin-bottom: 40px;
    }

    .points-main-title {
        font-size: 24px;
    }

    .points-main-title .title-num {
        font-size: 36px;
    }

    /* 1. フレックスを縦並びに変更 */
    .point-flex-container {
        flex-direction: column !important; /* 常に縦並び */
        gap: 20px;
    }

    .point-text {
        width: 100%;
        order: 1; /* 見出しとテキストを先に */
    }

    .point-image {
        width: 100%;
        max-width: 300px; /* 画像が大きすぎないように */
        margin: 0 auto;
        order: 2; /* 画像をテキストの後に（お好みで逆も可） */
    }

    /* 2. ネイビーの見出しボックスの調整 */
    .point-heading-box {
        width: 100%;
        max-width: 100%;
        padding: 10px 15px;
        margin-bottom: 20px;
        justify-content: flex-start; /* 左寄せ */
    }

    .point-number {
        font-size: 32px;
        margin-right: 10px;
    }

    .point-title {
        font-size: 18px;
        text-align: left;
    }

    /* 3. 本文の大きなマージンをリセット */
    .point-text p,
    .point-text-right p {
        margin-left: 0 !important;
        max-width: 100%;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 4. 逆レイアウト（02番）の右寄せを解除 */
    .point-item.inverse .point-heading-box {
        margin-left: 0;
    }
    
    .point-item {
        margin-bottom: 60px;
        padding-bottom: 40px;
        border-bottom: 1px dashed #ccc; /* 境目をわかりやすく（任意） */
    }
    .point-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
}

/* 小さいスマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .point-title {
        font-size: 16px;
    }
    .point-number {
        font-size: 28px;
    }
}

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

/* 中画面（タブレット）サイズ */
@media screen and (max-width: 1100px) {
    .intro-line-left img, .intro-line-right img { width: 15vw; }
    .company-main-visual { gap: 30px; padding: 20px; }
    .company-name-ja { font-size: 30px; }
    .feature-img img, 
    .feature-row.row-reverse .feature-img img { padding: 0 20px; }
    .feature-text-box { padding: 30px 7vw; }
}

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

    /* ヘッダー：線を縮小または非表示 */
    .intro-common-header { margin-bottom: 40px; }
    .intro-sub-title { font-size: 20px; }
    .intro-main-title { font-size: 24px; gap: 10px; }
    .intro-main-title .title-large { font-size: 44px; }
    .intro-line-left img, .intro-line-right img { display: none; }

    /* メインビジュアル：縦並び */
    .company-main-visual {
        flex-direction: column;
        padding: 20px 15px;
        gap: 20px;
        margin-bottom: 60px;
        box-shadow: 5px 5px 0 #C9C9C9;
    }
    .company-main-visual img { max-width: 100%; }
    .company-visual-right { width: 100%; }
    .company-name-ja { font-size: 26px; width: 100%; }
    .company-name-en { font-size: 16px; }

    /* 特徴見出しバー */
    .features-header-bar h3 { font-size: 20px; }

    /* 強み行：縦並び & 重なりの解消 */
    .feature-row, .feature-row.row-reverse {
        flex-direction: column;
        margin-bottom: 40px;
    }

    .feature-img {
        width: 100%;
        margin-bottom: -15px; /* テキストボックスと少しだけ重ねる装飾 */
    }
    .feature-img img,
    .feature-row.row-reverse .feature-img img {
        padding: 0; /* PC版の大きな余白をリセット */
    }

    .feature-img-cite {
        bottom: 20px; /* 位置を画像内に調整 */
        right: 10px;
        background: rgba(255,255,255,0.7); /* 可読性確保 */
        padding: 2px 5px;
    }

    /* 角落ちボックス：スマホ用にパディング調整 */
    .feature-text-box {
        width: 100% !important;
        margin: 0 !important;
        padding: 40px 25px 30px; /* 左右のパディングを減らす */
        background-size: 100% 100%;
        z-index: 2;
    }

    .feature-text-box h4 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .feature-text-box p {
        font-size: 15px; /* スマホで読みやすいサイズ */
        line-height: 1.7;
    }

    /* ボタンエリア：縦並び */
    .company-action-buttons {
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
        align-items: center;
    }
}

/* ==========================================================================
   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 10px;
    }

    .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-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: 20px 10px;
    }

    .company-info-inner {
        padding: 25px 10px; /* スマホでは内側の余白をさらに削る */
        border: 1px solid #000;
    }

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

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

/* タブレット・スマホ共通 (1024px以下) */
@media screen and (max-width: 1024px) {
    .faq-bg-wrapper {
        max-width: 95%;
        /* 左右のパディングを少し調整して中央に寄せる */
        padding: 50px 60px 60px 50px;
    }
}

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

    /* 1. 背景画像のコンテナ調整 */
    .faq-bg-wrapper {
        max-width: 92%;
        /* 角がカットされている部分に文字が被らないよう、
           スマホではパディングを「上下」にしっかり取ります */
        padding: 60px 25px 80px 25px; 
        background-size: 100% 100%; /* 全体にフィット */
    }

    .faq-main-title {
        font-size: 24px;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .faq-list {
        padding-top: 15px;
    }

    .faq-item {
        margin-bottom: 25px;
    }

    /* 2. 質問エリア（Q） */
    .faq-q {
        gap: 10px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

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

    .q-text {
        font-size: 15px;
        line-height: 1.4;
    }

    /* 3. 回答エリア（A） */
    .faq-a {
        font-size: 14px;
        /* スマホでは左余白を少し減らして、1行の文字数を確保する */
        padding-left: 38px; 
        line-height: 1.6;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .faq-bg-wrapper {
        padding: 50px 15px 70px 15px; /* さらにパディングを絞る */
    }
    
    .faq-main-title {
        font-size: 20px;
    }

    .q-text {
        font-size: 14px;
    }

    .faq-a {
        padding-left: 0; /* 極小画面ではQの真下から始める（読みやすさ優先） */
        margin-top: 5px;
    }
}











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

/* タブレットサイズ（1024px以下）: 2カラムに変更 */
@media (max-width: 1024px) {
    .company-list-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマホサイズ（768px以下） */
@media (max-width: 768px) {
    .company-list-section {
        padding: 60px 0 50px;
    }

    .section-title-wrapper {
        margin-bottom: 30px;
    }

    .company-list-title {
        font-size: 26px; /* タイトルサイズを調整 */
    }

    /* グリッドを1カラムに */
    .company-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* カードデザインの微調整 */
    .company-card {
        border-radius: 30px; /* 角丸を少し小さく */
        width: 100%;
    }

    .company-card .card-header {
        min-height: 80px;
        padding: 15px 10px;
    }

    .company-card .card-title {
        font-size: 22px;
    }

    /* 特徴ボックス */
    .feature-box {
        min-height: auto;
        padding: 15px;
    }

    .feature-box p {
        font-size: 16px;
    }

    /* 情報エリア */
    .info-label {
        font-size: 17px;
        padding-left: 5px;
    }

    .info-label::after {
        width: 80px; /* 下線の太い部分も短く調整 */
    }

    .info-value {
        font-size: 16px;
    }

    /* 地図の高さ調整 */
    .company-map iframe {
        height: 200px;
    }

    /* もっと見るボタンの調整 */
    .more-btn-area {
        margin-top: 20px;
    }

    .btn-more-gold {
        width: 100%; /* スマホでは横幅いっぱいに */
        max-width: 340px;
        padding: 16px 20px; /* 左右の大きなパディング(100px)を解除 */
        font-size: 18px;
        box-sizing: border-box;
        justify-content: center; /* テキストを中央に */
    }

    .btn-more-gold .btn-icon {
        width: 30px;
        right: 15px; /* アイコンの位置を調整 */
    }
}

/* 小さなスマホ（375px以下）向け */
@media (max-width: 375px) {
    .company-card .card-title {
        font-size: 20px;
    }
    .info-label {
        font-size: 16px;
    }
    .info-value {
        font-size: 15px;
    }
}


/* ==========================================================================
   Footer Responsive
   ========================================================================== */

/* タブレットサイズ (1024px以下) */
@media screen and (max-width: 1100px) {
    .footer-top-container {
        padding: 60px 40px;
        gap: 40px;
    }
    .footer-column {
        width: 48%; /* 横並び維持しつつ幅調整 */
    }
    .footer-dark-inner {
        padding: 0 40px;
    }
}

/* スマホサイズ (767px以下) */
@media screen and (max-width: 767px) {
    /* 1. フッタートップ（記事・会社一覧） */
    .footer-top-container {
        flex-direction: column; /* 縦並び */
        padding: 40px 20px;
        gap: 30px;
    }

    .footer-column {
        width: 100%; /* 全幅 */
    }

    .footer-section-title {
        font-size: 18px;
        text-align: center;
    }

    .footer-section-content {
        padding: 15px;
    }

    .footer-article-list, 
    .footer-company-links {
        gap: 15px;
    }

    .footer-article-list a, 
    .footer-company-links a {
        font-size: 14px; /* スマホで読みやすいサイズに調整 */
    }

    /* 2. 免責事項（24pxはスマホでは大きすぎるため調整） */
    .footer-disclaimer {
        font-size: 16px; /* 視認性を保ちつつダウン */
        padding: 0 20px 40px;
        line-height: 1.6;
        text-align: left; /* スマホでは左寄せの方が読みやすい */
    }

    /* 3. ダークセクション（メニュー・コピーライト） */
    .footer-dark-section {
        padding: 40px 0 60px;
        background-size: cover; /* 背景画像をスマホにフィットさせる */
    }

    .footer-navigation ul {
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 10px 20px;
        justify-content: center;
    }

    .footer-navigation ul li a {
        font-size: 15px; /* メニュー文字をスマホサイズに */
    }

    /* 4. 境界線とコピーライト */
    .footer-separator {
        margin-bottom: 40px; /* 130pxから大幅に縮小 */
    }

    .copyright {
        text-align: center; /* スマホでは中央寄せが定石 */
        font-size: 10px;
        line-height: 1.6;
        padding: 0 10px;
    }
}

/* 超小型スマホ用 (375px以下) */
@media screen and (max-width: 375px) {
    .footer-navigation ul {
        flex-direction: column; /* メニューを完全に縦に並べる */
        align-items: center;
        gap: 12px;
    }
    .footer-disclaimer {
        font-size: 14px;
    }
}







/* ==========================================================================
   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;
    }
}