/* ==================== CSS変数（フォントサイズ） ==================== */
:root {
    /* Mobile (default) - 7段階フォントサイズ（全ページ共通） */
    --fs-xxl: 7vw;      /* 特大タイトル */
    --fs-xl: 6vw;       /* セクションタイトル */
    --fs-l: 4vw;        /* サブタイトル、記事タイトル */
    --fs-m: 3.5vw;      /* 本文/説明 */
    --fs-s: 3vw;        /* 補足/タグ/日付 */
    --fs-xs: 2.5vw;     /* 注釈/キャプション */
    --fs-btn: 3vw;      /* ENTERボタン（index.html専用） */
}

@media (orientation: landscape) {
    :root {
        /* PC版 */
        --fs-xxl: 2.4vw;
        --fs-xl: 2vw;
        --fs-l: 1.4vw;
        --fs-m: 1.2vw;
        --fs-s: 1vw;
        --fs-xs: 0.8vw;
        --fs-btn: 1vw;
    }
}

/* ==================== リセットCSS ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== ベーススタイル ==================== */
html {
    background-color: #0a0f0a;
}

body {
    background-color: transparent;
    color: #e8e8e8;
    overflow-x: hidden;
    /* overscroll-behavior: none; - Windows互換性のため無効化 */
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
}

/* ==================== セクション共通スタイル ==================== */
section {
    padding: 15vh 0;
}

.hero-section {
    padding: 0;
}

/* 数字専用フォントクラス
   使用例：<p>価格は<span class="optima">3,300</span>円です。</p>
*/
.optima {
    font-family: 'Optima', sans-serif !important;
}

/* ==================== モダン タイポグラフィ システム ====================
   
   7段階フォントサイズ（スマホ → PC）
   ─────────────────────────────────────
   XXL : 6vw    → 2vw     ヒーロー/ロゴ
   XL  : 5vw    → 1.6vw   セクションタイトル
   L   : 4vw    → 1.2vw   サブタイトル/カードタイトル
   M   : 3.5vw  → 1vw     本文/説明
   S   : 3vw    → 0.85vw  補足/タグ/日付
   XS  : 2.5vw  → 0.75vw  注釈/キャプション
   BTN : 3vw    → 0.9vw   ボタン
   
   ======================================== */

/* セクションタイトル（XL） */
.section-title {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #fff;
    line-height: 1.5;
    font-size: var(--fs-xl);  /* XL */
}

/* セクションサブタイトル（M） */
.section-subtitle {
    font-family: 'Spartan', sans-serif;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    font-size: var(--fs-l);  /* L */
}

/* 本文（M） */
.text-body {
    font-family: 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 2;
    font-size: var(--fs-m);  /* M */
    letter-spacing: 0.15em;
}

/* カードタイトル（XL） */
.card-title {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
    font-size: var(--fs-l);  /* L */
    letter-spacing: 0.15em;
}

/* カードサブタイトル（L） */
.text-card-subtitle {
    font-family: 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    font-size: var(--fs-m);  /* M */
    letter-spacing: 0.15em;
}

/* PC用font-sizeは:rootの変数で自動切替されるため削除 */



/* ==================== ユーティリティクラス ==================== */
/* スクリーンリーダー専用（視覚的に非表示） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mobile {
    display: block;
}

.pc {
    display: none;
}

@media (orientation: landscape) {
    .mobile {
        display: none;
    }
    
    .pc {
        display: block;
    }
}

/* ==================== ボタン共通スタイル ==================== */

/* プライマリボタン（透過 + ぼかし効果） */
.btn-primary {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-decoration: none;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8);
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Mobile版 */
    padding: 1.5vh 4vw;
    border-width: 0.2vw;
    font-size: 3vw;
}

.btn-primary:hover {
    background: #1a231a;
    border-color: #1a231a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(-0.2vh);
}

/* PC版 */
@media (orientation: landscape) {
    .btn-primary {
        font-size: 0.9vw;
        padding: 1.5vh 2vw;
        border-width: 1px;
    }
}

/* セカンダリボタン（透過 + ボーダー + 矢印アイコン） */
.btn-secondary {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(232, 232, 232, 0.5);
    border-radius: 0;
    color: #e8e8e8;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
    /* スマホ版デフォルト */
    font-size: var(--fs-m);  /* M */
    padding: 2.5vw 5vw;
}

.btn-secondary::before {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 0.7em;
    margin-right: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,5 19,5 15,1.5' stroke='white' stroke-width='1.2' fill='none' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.btn-secondary:hover {
    background: rgba(232, 232, 232, 0.1);
    border-color: rgba(232, 232, 232, 0.8);
}

/* 「一覧を見る」ボタン（.btn-text） */
.btn-text {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    color: #e8e8e8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.15em;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.btn-text:hover {
    opacity: 0.7;
}

/* 矢印（>） */
.btn-arrow::before {
    content: '>';
    margin-right: 0.5em;
}

.btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-text:hover .btn-arrow {
    transform: translateX(0.3vw);
}

/* キーボード操作時のフォーカス表示 */
.btn-text:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Mobile版：サイズとレイアウト */
.btn-text {
    font-size: var(--fs-m);
    gap: 2vw;
}

.btn-arrow {
    font-size: var(--fs-m);
}

section:has(.content-slide-images) > .btn-text {
    margin-top: 5vh;
    padding-left: 7.5vw;
}

/* PC版：サイズとレイアウト */
@media (orientation: landscape) {
    .btn-secondary {
        font-size: var(--fs-m);
        padding: 1.2vh 2.5vw;
    }
    
    .btn-text {
        font-size: var(--fs-m);
        gap: 0.7vw;
    }
    
    .btn-arrow {
        font-size: var(--fs-m);
    }
    
    section:has(> .pc) > .btn-text,
    section.pc > .btn-text {
        grid-column: 1 / -1;
        margin-top: 6vh;
        padding-left: 3.75vw;
    }
}

/* ==================== バッジ共通スタイル ==================== */
/* バッジ基本スタイル */
.badge-transparent,
.badge-green,
.badge-silver,
.badge-gold,
.badge-special {
    display: inline-block;
    padding: 1.5vh 2vw;
    margin-top: 2vh;
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    text-align: center;
    box-sizing: border-box;
}

.badge-transparent + .text-body,
.badge-green + .text-body,
.badge-silver + .text-body,
.badge-gold + .text-body,
.badge-special + .text-body {
    margin-top: 2vh;
}

/* バッジテキスト */
.badge-text {
    font-size: var(--fs-m);  /* M */
    font-weight: 500;
    color: #e8e8e8;
    margin: 0;
    line-height: 1; /* 英語と日本語で行の高さを統一 */
}

/* バッジ色バリエーション */
.badge-green {
    background: linear-gradient(135deg, rgba(58, 74, 47, 0.5) 0%, rgba(90, 112, 72, 0.5) 100%);
    border: 1px solid rgba(90, 112, 72, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.badge-silver {
    background: linear-gradient(135deg, rgba(216, 216, 216, 0.5) 0%, rgba(112, 112, 112, 0.5) 100%);
    border: 1px solid rgba(164, 164, 164, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.badge-gold {
    background: linear-gradient(135deg, rgba(212, 167, 106, 0.5) 0%, rgba(118, 76, 3, 0.5) 100%);
    border: 1px solid rgba(212, 167, 106, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.badge-special {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.5) 0%, rgba(118, 75, 162, 0.5) 100%);
    border: 1px solid rgba(110, 100, 198, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* スマホ版：バッジは全幅表示 */
@media (orientation: portrait) {
    .anchor-menu-grid--4col {
        margin-bottom: 10vh;
    }
    
    .content-slide-text .badge-transparent,
    .content-slide-text .badge-green,
    .content-slide-text .badge-silver,
    .content-slide-text .badge-gold,
    .content-slide-text .badge-special {
        display: block;
        width: 100%;
        padding: 1.5vh 2vw;
    }
}

/* PC版：バッジは全幅表示 */
@media (orientation: landscape) {
    .content-card-body .badge-transparent,
    .content-card-body .badge-green,
    .content-card-body .badge-silver,
    .content-card-body .badge-gold,
    .content-card-body .badge-special {
        display: block;
        width: 100%;
        padding: 1.2vh 2vw;
    }
    
    .badge-text {
        font-size: 1.0vw;
        line-height: 1; /* 英語と日本語で行の高さを統一（PC版） */
    }
}

/* ==================== 画像共通スタイル ==================== */
.card-image img,
.card-image picture,
.image-grid-3 img,
.image-grid-3 picture {
    width: 100%;
    height: 100%;
    display: block;
}

.card-image img,
.image-grid-3 img {
    object-fit: cover;
    object-position: center;
    /* 美術館風トーン統一フィルター */
    filter: saturate(0.85) contrast(1.08) brightness(0.98);
}

/* ==================== 3枚グリッド画像（4:3 汎用） ==================== */
.image-grid-3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 4 / 3;
    gap: 2vw;  /* スマホ版 */
}

/* 上の行（small + medium）: 50% */
.image-grid-row {
    display: flex;
    flex: 1 1 0;      /* flex-basisを0にして画像サイズに依存しない */
    min-height: 0;    /* flexの縮小を許可 */
    gap: 2vw;  /* スマホ版 */
}

/* 下の行（large）: 50% */
.image-grid-large {
    flex: 1 1 0;      /* flex-basisを0にして画像サイズに依存しない */
    min-height: 0;    /* flexの縮小を許可 */
    overflow: hidden;
}

/* PC版：gap調整 */
@media (orientation: landscape) {
    .image-grid-3 {
        gap: 1vw;
    }
    
    .image-grid-row {
        gap: 1vw;
    }
}

/* small: 上の行の1/3幅 */
.image-grid-small {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.image-grid-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* medium: 上の行の2/3幅 */
.image-grid-medium {
    flex: 2 1 0;
    min-width: 0;
    overflow: hidden;
}

.image-grid-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-grid-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== 1枚画像（4:3 汎用） ==================== */
.card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== ロゴパターン背景 ==================== */
/* ロゴパターン背景（固定レイヤー） */
.fixed-pattern-background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: -1;  /* 最背面に配置 */
}

.logo-pattern {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.logo-pattern.active {
    opacity: 1;
}

/* ロゴパターン背景オーバーレイ（セクション間の色差を強調） */
#logoPattern1::after,
#logoPattern2::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#logoPattern1::after {
    background: rgba(20, 35, 25, 0.35);  /* 緑系（森っぽい・暗め） */
}

#logoPattern2::after {
    background: rgba(60, 40, 15, 0.4);  /* ベージュ系（琥珀っぽく） */
}

/* ==================== セクションナビゲーション ==================== */
/* ナビゲーションバー本体 */
.section-navigation {
    /* 構造 */
    position: fixed;
    top: 0;  /* 基本位置は最上部 */
    left: 0;
    right: 0;
    height: 6vh;
    z-index: 600;  /* セクションナビを最前面に */
    display: flex;
    align-items: center;
    
    /* 色・装飾 */
    background: rgba(0, 0, 0, 0.5);  /* 半透明黒50% */
    backdrop-filter: blur(1vw);
    -webkit-backdrop-filter: blur(1vw);
    box-shadow: 0 0.2vw 0.8vw rgba(0, 0, 0, 0.3);
    
    /* アニメーション */
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 表示状態 */
.section-navigation.show {
    opacity: 1;
    pointer-events: auto;
}

/* メニュー開いている時は非表示 */
.section-navigation.hide-for-menu {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100%);
}

/* ヘッダー表示時：ヘッダー分下げる */
.section-navigation.with-header {
    transform: translateY(7vh);
}

/* ナビゲーションリンクコンテナ */
.section-nav-links {
    /* 構造 */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    height: 6vh;
    width: 100%;
    
    /* スクロール */
    overflow-x: scroll;
    scrollbar-width: none;
}

.section-nav-links::-webkit-scrollbar {
    display: none;
}

/* ナビゲーションリンク */
.section-nav-link {
    /* 構造 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vh;
    
    /* 余白 */
    padding: 0 5vw;
    
    /* 色・装飾 */
    font-family: 'Spartan', sans-serif;
    font-size: 2.5vw;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #CCCCCC;
    text-decoration: none;
    white-space: nowrap;
    
    /* アニメーション */
    transition: color 0.3s ease;
    
    /* インタラクション */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* 下線（::after疑似要素） */
.section-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.3vh;
    background: transparent;
    transition: background 0.3s ease;
}

.section-nav-link:focus,
.section-nav-link:active {
    outline: none;
    background: transparent;
}

/* アクティブ状態 */
.section-nav-link.active {
    color: #FFFFFF;
}

.section-nav-link.active::after {
    background: #FFFFFF;
}

/* PC版（1024px以上） */
@media (orientation: landscape) {
    .section-nav-link {
        font-size: 0.875vw;
        padding: 0 1.75vw;
    }
}

/* ==================== ヒーローセクション ==================== */
/* ヒーロー動画背景（固定レイヤー） */
.fixed-video-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.fixed-video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 動画暗転オーバーレイ */
.video-dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    background: #000;
    opacity: 0;
    z-index: 0;
}

/* ヒーローセクション本体 */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    z-index: 1;
}

.hero-text-top {
    display: flex;
    flex-direction: column;
}

.hero-text-top h1 {
    display: flex;
    flex-direction: column;
}

.hero-title {
    font-family: 'League Spartan', 'Yu Gothic', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.hero-subtitle {
    font-family: 'League Spartan', 'Yu Gothic', sans-serif;
    font-weight: 400;
    line-height: 1.3;
    color: #d0d0d0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.hero-youtube-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    /* inherit width/style from .btn-primary */
    border-color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.hero-youtube-btn:hover {
    background: #1a231a;
    border-color: #1a231a;
    color: #fff;
}

.hero-youtube-btn .fab {
    margin-right: 0.5em;
}

/* ヒーロー：YouTubeボタンを左寄せ・テキスト幅に固定（indexのEnterと同等） */
.hero-text-top .hero-youtube-btn {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
}

.hero-body {
    font-weight: 300;
    line-height: 1.8;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* スマホ版（縦向き） */
@media (orientation: portrait) {
    .hero-section {
        padding: 10vh 5vw;
    }
    
    .hero-text-top {
        position: absolute;
        top: 10vh;
        left: 5vw;
        right: 5vw;
    }
    
    .hero-text-top h1 {
        gap: 2vh;
    }
    
    .hero-title {
        font-size: var(--fs-xxl);  /* XXL */
    }
    
    .hero-subtitle {
        font-size: var(--fs-l);  /* L */
    }
    
    .hero-youtube-btn {
        gap: 2vw;
        padding: 1.5vh 4vw;
        margin-top: 6vh;
        font-size: var(--fs-m);  /* M */
    }
    
    .hero-youtube-btn .fab {
        font-size: 1.3em;
    }
    
    .hero-text-bottom {
        position: absolute;
        bottom: 5vh;
        left: 5vw;
        right: 5vw;
        text-align: right;
    }
    
    .hero-body {
        font-size: var(--fs-m);  /* M */
        margin-top: 40vh;
        text-align: left;
    }
}

/* PC版（横向き） */
@media (orientation: landscape) {
    .hero-text-top {
        position: absolute;
        top: 15vh;
        left: 5vw;
        right: 5vw;
    }
    
    .hero-text-top h1 {
        gap: 2vh;
    }
    
    .hero-title {
        font-size: var(--fs-xxl);  /* XXL */
    }
    
    .hero-subtitle {
        font-size: var(--fs-l);  /* L */
    }
    
    .hero-youtube-btn {
        font-size: var(--fs-m);  /* M */
        padding: 1.5vh 2vw;
        gap: 0.5vw;
        margin-top: 6vh;
    }
    
    .hero-text-bottom {
        position: absolute;
        bottom: 5vh;
        left: 5vw;
        right: 5vw;
        text-align: right;
    }
    
    .hero-body {
        font-size: var(--fs-m);  /* M */
        margin-top: 50vh;
    }
}

/* ==================== REASON1 セクション（カウントアップ） ==================== */
.reason-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

.count-container {
    width: 100%;
}

/* 各アイテム：Grid Layout */
.count-item {
    display: grid;
    grid-template-rows: auto auto;
    box-sizing: border-box;
}

/* h3を透明化して子要素を直接Grid配置 */
.count-item h3 {
    display: contents;
}

/* タイトル：1行目全体 */
.count-item h3 .count-label {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* 数字部分：2行目の左列、baseline揃え */
.count-item h3 .count-number-wrapper {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    align-self: baseline;
}

/* 説明文：2行目の右列、右揃え、baseline揃え */
.count-item > p {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: baseline;
    font-weight: 400;
    line-height: 1.6;
    color: #999;
}

.count-item {
    margin-top: 2vh;
}

.count-item:first-child {
    margin-top: 0;
}

/* 見出し（左寄せ） */
.reason-section .count-label {
    text-align: left;
    font-family: 'League Spartan', 'Yu Gothic', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: #999;
}

/* タイポグラフィ：カウントアップ数字 */
.count-number {
    font-family: 'Optima', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.count-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.count-number-wrapper .text-body {
    font-weight: 400;
    color: #fff;
}

/* スマホ版（縦向き） */
@media (orientation: portrait) {
    .reason-section {
        padding: 0;
    }
    
    /* 4アイテムのコンテナ（縦並び） */
    .count-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 8vh 7.5vw;
        box-sizing: border-box;
    }
    
    .count-item {
        grid-template-columns: 34vw 48vw;
        gap: 0.5vh 3vw;
        width: 85vw;
        padding-bottom: 0.5vh;
        margin-top: 2vh;
        border-bottom: 0.1vw solid #666666;
    }
    
    .count-item:first-child {
        margin-top: 0;
    }
    
    .count-item > p {
        font-size: 3.5vw;
    }
    
    .reason-section .count-label {
        font-size: 4.0vw;
    }
    
    .reason-section .count-label + .count-number-wrapper {
        margin-top: 0.5vh;
    }
    
    .count-number {
        font-size: 12.0vw;
    }
    
    .count-number-wrapper .text-body {
        font-size: 3.5vw;
        margin-left: 1vw;
    }
}

/* PC版（横向き） */
@media (orientation: landscape) {
    .reason-section {
        padding: 0;
    }
    
    .count-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 6vh 6vw;
        width: 100%;
        max-width: 100%;
        padding: 10vh 7.5vw;
    }
    
    .count-item {
        grid-template-columns: 11.9vw 16.8vw;
        gap: 1.5vh 1.05vw;
        width: 100%;
        padding-bottom: 1.5vh;
        border-bottom: 0.1vw solid #666666;
    }
    
    .reason-section .count-label {
        font-size: 1.3vw;
    }
    
    .reason-section .count-label + .count-number-wrapper {
        margin-top: 1.5vh;
    }
    
    .count-number {
        font-size: 3.5vw;
    }
    
    .count-number-wrapper .text-body {
        font-size: 1.1vw;
        margin-left: 1vw;
    }
    
    .count-item > p {
        font-size: 1.1vw;
    }
}

/* ==================== REASON2 セクション（テキストフェード） ==================== */
.hero-reason-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.hero-reason-grid {
    display: grid;
    width: 100%;
    padding: 0;
    gap: 0;
}

.hero-reason-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-reason-section .item-title {
    display: block !important;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    opacity: 0;
    transform: translateY(4vh);
}

.hero-reason-section .text-body {
    font-weight: 300;
    line-height: 1.6;
    color: #999;
}

/* アニメーション発動 */
.hero-reason-item.animate .item-title {
    animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(4vh); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-reason-item:nth-child(1) .item-title { animation-delay: 0s; }
.hero-reason-item:nth-child(2) .item-title { animation-delay: 0.1s; }
.hero-reason-item:nth-child(3) .item-title { animation-delay: 0.2s; }
.hero-reason-item:nth-child(4) .item-title { animation-delay: 0.3s; }
.hero-reason-item:nth-child(5) .item-title { animation-delay: 0.4s; }
.hero-reason-item:nth-child(6) .item-title { animation-delay: 0.5s; }

/* スマホ版（縦向き） */
@media (orientation: portrait) {
    .hero-reason-section {
        padding: 8vh 7.5vw;
    }
    
    .hero-reason-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    
    .hero-reason-item {
        min-height: 15vh;
        padding: 5vh 3vw;
    }
    
    /* 右端の項目（2, 4, 6）は右ボーダーなし */
    .hero-reason-item:nth-child(2),
    .hero-reason-item:nth-child(4),
    .hero-reason-item:nth-child(6) {
        border-right: none;
    }
    
    /* 最下段の項目（5, 6）は下ボーダーなし */
    .hero-reason-item:nth-child(5),
    .hero-reason-item:nth-child(6) {
        border-bottom: none;
    }
    
    .hero-reason-section .item-title {
        font-size: 6.0vw;
    }
    
    .hero-reason-section .item-title + .text-body {
        margin-top: 1vh;
    }
    
    .hero-reason-section .text-body {
        font-size: 3.5vw;
    }
}

/* PC版（横向き） */
@media (orientation: landscape) {
    .hero-reason-section {
        padding: 0 10vw;
    }
    
    .hero-reason-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    
    .hero-reason-item {
        min-height: 25vh;
        padding: 6vh 3vw;
    }
    
    /* 右端の項目（3, 6）は右ボーダーなし */
    .hero-reason-item:nth-child(3),
    .hero-reason-item:nth-child(6) {
        border-right: none;
    }
    
    /* 最下段の項目（4, 5, 6）は下ボーダーなし */
    .hero-reason-item:nth-child(4),
    .hero-reason-item:nth-child(5),
    .hero-reason-item:nth-child(6) {
        border-bottom: none;
    }
    
    .hero-reason-section .item-title {
        font-size: 2.2vw;
    }
    
    .hero-reason-section .item-title + .text-body {
        margin-top: 2vh;
    }
    
    .hero-reason-section .text-body {
        font-size: 1.1vw;
    }
}

/* ==================== REASON3 セクション（Canvas縦線背景） ==================== */
/* Canvas縦線背景（固定レイヤー） */
.fixed-canvas-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fixed-canvas-background.visible {
    opacity: 1;
}


/* REASON3セクション本体 */
.reason3-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

.reason3-text-container {
    width: 100%;
    text-align: center;
}

/* テキスト流れアニメーション（clip-path） */
.reason3-section .section-title {
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: #fff;
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reason3-section .text-body {
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .reveal クラスで表示 */
.reason3-section .section-title.reveal,
.reason3-section .text-body.reveal {
    clip-path: inset(0 0% 0 0);
}

/* 順次遅延アニメーション */
.reason3-section .section-title.reveal {
    transition-delay: 0s;
}

.reason3-section .text-body:nth-of-type(1).reveal {
    transition-delay: 0.5s;
}

.reason3-section .text-body:nth-of-type(2).reveal {
    transition-delay: 1.0s;
}

.reason3-section .text-body:nth-of-type(3).reveal {
    transition-delay: 1.5s;
}

/* スマホ版（縦向き・縦書き） */
@media (orientation: portrait) {
    .reason3-section .reason3-text-container {
        display: flex;
        flex-direction: row-reverse; /* 右から左に並べる */
        align-items: flex-start;
        justify-content: center;
        gap: 6vw; /* 行間 */
    }
    
    /* 縦書き設定 */
    .reason3-section .section-title,
    .reason3-section .text-body {
        writing-mode: vertical-rl; /* 縦書き・右から左 */
        text-orientation: upright; /* 文字を正立 */
        height: auto;
        max-height: 70vh;
        clip-path: inset(0 0 100% 0); /* 初期状態：下側100%隠す（縦書き用） */
        transition: clip-path 2.0s ease-out;
    }
    
    .reason3-section .section-title {
        font-size: var(--fs-xl);  /* XL */
        margin-bottom: 6vh;
        /* タイトルだけ横向き */
        text-orientation: sideways;
        margin-left: 8vw;
        height: auto;
    }
    
    .reason3-section .text-body {
        font-size: var(--fs-l);  /* L */
        margin-bottom: 3vh;
        /* 2、3、4行目のスタート位置を下げる */
        margin-top: 2vh;
        display: flex;
        align-items: flex-start;
    }
    
    /* .reveal で上から下に流れる */
    .reason3-section .section-title.reveal,
    .reason3-section .text-body.reveal {
        clip-path: inset(0 0 0 0); /* 表示状態 */
    }
}

/* PC版（横向き） */
@media (orientation: landscape) {
    .reason3-section {
        padding: 20vh 10vw;
    }
    
    .reason3-text-container {
        width: auto;
        max-width: 90vw;
        margin: 0 auto;
        text-align: left;
    }
    
    .reason3-section .section-title {
        font-size: var(--fs-xl);  /* XL */
        margin-top: 0;
        transition: clip-path 3.0s ease-out; /* PC: 3.0秒 */
    }
    
    .reason3-section .text-body {
        font-size: var(--fs-l);  /* L */
        margin-top: 2vh;
        transition: clip-path 3.0s ease-out; /* PC: 3.0秒 */
    }
    
    .reason3-section .text-body:nth-of-type(1) {
        margin-top: 4vh;
    }
    
    .reason3-section .text-body:nth-of-type(2),
    .reason3-section .text-body:nth-of-type(3) {
        margin-top: 2vh;
    }
}

/* ==================== アンカーメニュー ==================== */
/* メニューアンカーリンクセクション */
.anchor-menu-section {
    /* 構造 */
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 余白 */
    padding: 10vh 7.5vw;
    /* 色・装飾 */
    background: transparent;
}

/* カードグリッド */
.anchor-menu-grid {
    /* 構造 */
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 余白 */
    gap: 4vw;
}

/* フェードインアニメーション：グループ内順番表示 */
.anchor-menu-grid > * {
    /* 初期状態 */
    opacity: 0;
    transform: translateY(10px);
    /* アニメーション */
    transition: opacity 2.0s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 2.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.anchor-menu-grid > *.reveal {
    /* 表示状態 */
    opacity: 1;
    transform: translateY(0);
}

/* カード本体 */
.anchor-menu-card {
    /* 構造 */
    position: relative;
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    /* 色・装飾 */
    border-radius: 0;
    text-decoration: none;
}

/* カード画像エリア */
.anchor-menu-card-image {
    /* 構造 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 色・装飾 */
    background-size: cover;
    background-position: center;
}

/* カード画像内の<img>/<picture>タグ */
.anchor-menu-card-image img,
.anchor-menu-card-image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.anchor-menu-card:hover .anchor-menu-card-image img {
    transform: scale(1.1);
}

.anchor-menu-card-image img {
    display: block;
}

/* カードテキストエリア：Mobile版 */
.anchor-menu-card-body {
    /* 構造 */
    position: absolute;
    bottom: 4vh;
    left: 5vw;
    right: 5vw;
}

/* カードタイトル：Mobile版 */
.anchor-menu-card-title {
    /* 色・装飾 */
    font-size: var(--fs-l);  /* L */
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

.anchor-menu-card-title + .anchor-menu-card-description {
    /* 余白 */
    margin-top: 1.5vh;
}

/* カードサブタイトル：Mobile版 */
.anchor-menu-card-subtitle {
    /* 色・装飾 */
    font-size: var(--fs-m);  /* M */
    color: #FFFFFF;
    line-height: 1.8;
    text-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

/* PC版 */
@media (orientation: landscape) {
    .anchor-menu-section {
        height: 100vh;
        padding: 0 3.75vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .anchor-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
    }
    
    .anchor-menu-grid--4col {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5vw;
    }
    
    .anchor-menu-grid--5col {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.2vw;
    }
    

    
    .anchor-menu-card {
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }
    
    .anchor-menu-card-body {
        bottom: 3vh;
        left: 2vw;
        right: 2vw;
    }
    
    .anchor-menu-card-title {
        font-size: var(--fs-l);  /* L */
        text-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.5);
    }
    
    .anchor-menu-card-subtitle {
        font-size: var(--fs-m);  /* M */
        text-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.5);
    }
}

/* ==================== セクションヘッダー（共通） ==================== */

/* スマホ版 */
@media (orientation: portrait) {
    .section-header {
        padding: 0 7.5vw;
    }
    
    .section-header .section-title {
        margin-top: 0;
        /* font-sizeは:rootの--fs-xxlで管理 */
    }
    
    .section-header .section-subtitle {
        margin-top: 2vh;
        /* font-sizeは:rootの--fs-xlで管理 */
    }
    
    .section-header .text-body {
        margin-top: 2vh;
    }
    
    .section-header .btn-secondary {
        margin-top: 4vh;
    }
    
    /* 余白ありセクションヘッダ */
    .section-header-spaced {
        margin-top: 8vh;
    }
}

/* PC版 */
@media (orientation: landscape) {
    .section-header {
        padding: 0 3.75vw;
    }
    
    /* 余白ありセクションヘッダ */
    .section-header-spaced {
        margin-top: 8vh;
    }
}

/* ==================== コンテンツスライドシステム（固定プログレスバー） ==================== */
@media (orientation: portrait) {
    /* セクション設定 */
    section:has(.content-slide-images) {
        position: relative;
        width: 100%;
    }
    
    /* ========== 画像スライド（横スクロール） ========== */
    .content-slide-images {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 7.5vw;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        margin-top: 3vh;
        padding: 0 7.5vw;
        gap: 2vw;
    }
    
    .content-slide-images::-webkit-scrollbar {
        display: none;
    }
    
    /* 各スライド */
    .content-slide-images > * {
        width: 85vw;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        opacity: 0.3;
        transition: opacity 0.6s ease;
    }
    
    .content-slide-images > *.active {
        opacity: 1;
    }
    
    .content-slide-image {
        width: 100%;
    }
    
    /* ========== プログレスバー ========== */
    .content-slide-progress {
        display: flex;
        align-items: center;
        pointer-events: none;
        margin-top: 3vh;
        margin-left: 7.5vw;
        width: 85vw;
        gap: 3vw;
    }
    
    .content-slide-progress-container {
        flex: 1;
        height: 0.4vh;
        background: #E0E0E0;
    }
    
    .content-slide-progress-bar {
        height: 0.4vh;
        width: 25%;
        background: #4A5D3E;
    }
    
    .content-slide-arrows {
        display: flex;
        align-items: center;
        gap: 2vw;
    }
    
    .content-slide-arrow {
        font-size: 4vw;
        color: #555555;
        pointer-events: auto;
        cursor: pointer;
    }
    
    .progress-label {
        font-family: 'Optima', sans-serif;  /* 数字専用フォント */
        font-size: 3vw;
        font-weight: 500;
        color: #888888;
        letter-spacing: 0.15em;  /* 文字間隔を広げる */
        position: relative;
        top: -0.1em;  /* 視覚的に少し上げる */
    }
    
    /* ========== テキストスライド ========== */
    .content-slide-texts {
        position: relative;
        width: 100%;
        margin-top: 3vh;
        padding: 0 7.5vw;
        transition: height 0.3s ease;  /* 高さ変化をスムーズに */
    }
    
    /* EXPERIENCEセクションのタブ切り替え時のちらつき防止 */
    .experience-tab-content .content-slide-texts {
        min-height: 28vh;
    }
    
    .content-slide-text {
        position: absolute;
        top: 0;
        left: 7.5vw;
        width: calc(100% - 15vw);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease;
    }
    
    .content-slide-text.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .content-slide-text > .card-title {
        margin-top: 0;
    }
    
    .content-slide-text > .text-card-subtitle {
        margin-top: 1.5vh;
    }
    
    .content-slide-text > .text-body {
        /* font-sizeは共通CSS（3.5vw）を継承 */
        margin-top: 1.5vh;
    }
    
    .content-slide-text > .text-body:first-child {
        margin-top: 0;
    }
    
    .content-slide-text > .card-title + .text-body {
        margin-top: 2vh;
    }
    
    .content-slide-text > .btn-secondary {
        margin-top: 4vh;
    }
}

/* PC版では非表示 */
@media (orientation: landscape) {
    section:has(.content-slide-images) {
        display: none;
    }
}

/* ========================================
   カードスライドシステム（ドット連動）
   ======================================== */

/* ドットインジケーター */
.dot-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5vw;
    padding-top: 2vh;
    padding-bottom: 0;
}

.dot-indicator + .card-slide-container {
    margin-top: 3vh;
}

.dot {
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: #cccccc;
    transition: all 0.3s ease;
}

.dot.active {
    background: #4A5D3E;
    transform: scale(1.3);
}

/* セクション基本スタイル */
section:has(.card-slide-container) {
    position: relative;
    min-height: 100vh;
}

/* 横スクロールコンテナ */
.card-slide-container {
    display: flex;
    align-items: stretch;  /* カードの高さを揃える */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 7.5vw;
    -webkit-overflow-scrolling: touch;
    gap: 2vw;
    padding: 0 7.5vw;
    scrollbar-width: none;
    margin-top: 3vh;
}

.card-slide-container::-webkit-scrollbar {
    display: none;
}

/* 個別カード */
.card-slide {
    width: 85vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-self: stretch;
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

.card-slide.active {
    opacity: 1;
}

/* カード内部：高さ100%でFlexコンテナ化 */
.card-slide > .menu-card,
.card-slide > .plan-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2vh;
}

/* 画像エリア：固定高さ */
.card-slide .menu-card-image,
.card-slide .plan-card-image {
    flex-shrink: 0;
}

/* コンテンツエリア：残りスペースを埋める */
.card-slide .menu-card-body,
.card-slide .plan-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}



/* ドットインジケーター */
.dot-indicator {
    margin-top: 3vh;
}

/* タブボタンアニメーション（タブ連動時のみ） */
/* カード内共通：タイトル */
.card-slide .menu-card-body > .card-title {
    font-size: 4.0vw;
    color: #e8e8e8;
}

/* カード内共通：本文 */
.card-slide .plan-card-content > .text-body,
.card-slide .plan-card > .text-body {
    color: #e8e8e8;
}

/* PLANカード専用：カード内部構造 */
.card-slide > .plan-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-slide > .plan-card-wrapper > .plan-card {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3vh;
}

/* ==================== PC版レイアウト ==================== */
/* PC版専用：イントログリッド + コンテンツグリッド */
@media (orientation: landscape) {
    /* PC版のみ表示 */
    section:has(> .pc) {
        display: block;
    }
    
    /* イントロエリア（4:6グリッド） */
    .intro-grid {
        display: grid;
        grid-template-columns: 4fr 6fr;
        gap: 3vw;
        padding: 0 3.75vw;
    }
    
    /* イントロ画像エリアのサイズ制限（Safari対策） */
    .intro-images {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* テキスト余白 */
    section:has(> .pc) .section-title {
        margin-top: 0;
    }
    
    section:has(> .pc) .section-subtitle {
        margin-top: 2vh;
    }
    
    /* カード画像直後のタイトルに余白追加 */
    .content-card-body > .card-title {
        margin-top: 3vh;
    }
    
    .content-card-body > .text-card-subtitle {
        margin-top: 1.5vh;
    }
    
    .content-card-body > .text-body {
        margin-top: 1.5vh;
    }
    
    section:has(> .pc) .text-body {
        margin-top: 2vh;  /* カード内 */
    }
    
    section:has(> .pc) .intro-text > .text-body {
        margin-top: 6vh;  /* イントロエリア専用 */
    }
    
    /* ボタン */
    section:has(> .pc) .intro-text > .btn-secondary,
    .content-card-body > .btn-secondary {
        margin-top: 6vh;
    }
    
    .content-card-body > .btn-secondary {
        align-self: flex-start;
    }
    
    /* ========== カードグリッド ========== */
    /* グリッド共通スタイル */
    .content-grid-3,
    .content-grid-4 {
        display: grid;
        gap: 8vh 3vw;  /* 縦間隔8vh、横間隔3vw */
        margin-top: 8vh;
        padding: 0 3.75vw;
    }
    
    /* 列数バリエーション */
    .content-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .content-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* カード構造 */
    .content-card {
        display: flex;
        flex-direction: column;
    }
    
    .content-card-body {
        display: flex;
        flex-direction: column;
    }
    
    section:has(> .pc) .card-image + .content-grid-3 {
        margin-top: 4vh;
    }
    
}

/* ========================================
   スライドタブシステム（Type A）：横スクロール連動
   ======================================== */

/* タブボタンコンテナ */
.slide-tabs {
    display: flex;
    gap: 4vw;  /* タブ間の余白 */
    padding: 2.5vw 7.5vw;
    margin-top: 5vh;
    justify-content: center;
}

/* タブボタンの隣にカードスライドがある場合 */
.slide-tabs + .card-slide-container {
    margin-top: 3vh;
}

.slide-tabs + .dot-indicator {
    margin-top: 3vh;
}

/* タブボタン本体 */
.slide-tab {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    text-align: center;
    transition: color 0.2s ease;
    
    /* タップフィードバック無効化 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    
    /* テキスト幅ベース + 中央配置 */
    flex: 0 0 auto;
    padding: 0;
    min-width: auto;
    color: #888888;
    font-size: var(--fs-l);  /* L - サブタイトルと同じ */
    letter-spacing: 0.15em;
}

/* タブボタン：アクティブ */
.slide-tab {
    padding-bottom: 1vh;
    border-bottom: 0.3vh solid transparent;
}

.slide-tab.active {
    color: #e8e8e8;
    border-bottom-color: #4A5D3E;
}

/* ========================================
   コンテンツタブシステム（Type B）：中身切替
   ======================================== */

/* タブボタンコンテナ（基本） */
.content-tabs {
    display: flex;
    gap: 4vw;  /* タブ間の余白 */
    padding: 2.5vw 7.5vw;
    margin-top: 3vh;
    justify-content: center;
}

/* タブボタン本体（基本） */
.content-tab {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 500;
    color: #666666;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: color 0.2s ease;
    position: relative;
    /* テキスト幅ベース + 中央配置 */
    flex: 0 0 auto;
    padding: 0;
    min-width: auto;
    font-size: var(--fs-l);  /* L - サブタイトルと同じ */
    letter-spacing: 0.15em;
    white-space: nowrap;
    line-height: 1.5;
    
    /* タップフィードバック無効化 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* タブボタン：アクティブ */
.content-tab {
    padding-bottom: 1vh;
    border-bottom: 0.3vh solid transparent;
}

.content-tab.active {
    color: #FFFFFF;
    border-bottom-color: #4A5D3E;
}

/* タブコンテンツラッパー（基本） */
.tab-content-wrapper {
    margin-top: 3vh;
}

/* タブコンテンツ表示制御 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========================================
   コンテンツタブ：ページ別調整
   ======================================== */

/* EXPERIENCE セクション専用スタイルは js/articles.js に移動 */

/* ========================================
   タブ数別エリア幅（スマホ）
   ======================================== */
@media (orientation: portrait) {
    /* タブコンテナ：gap追加、中央揃え */
    .content-tabs,
    .slide-tabs {
        gap: 2vw;
        justify-content: center;
    }
    
    /* タブボタン：スマホではletter-spacing詰める */
    .content-tab,
    .slide-tab {
        letter-spacing: 0.05em;
    }
    
    /* コーティングOPタブ：スマホでサイズS */
    .tabs-coating-op .content-tab {
        font-size: var(--fs-s);
    }
    
    /* 国産/輸入等のタブ：emを戻す */
    .tabs-wide-spacing .content-tab {
        letter-spacing: 0.15em;
    }
    
    /* 2タブ：各35vw */
    .tabs-2 .content-tab,
    .tabs-2 .slide-tab {
        flex: 0 0 35vw;
    }
    
    /* 3タブ：各27vw */
    .tabs-3 .content-tab,
    .tabs-3 .slide-tab {
        flex: 0 0 27vw;
    }
    
    /* 4タブ：各21vw */
    .tabs-4 .content-tab,
    .tabs-4 .slide-tab {
        flex: 0 0 21vw;
    }
}


/* ========================================
   ページ固有のタブボタン調整
   ======================================== */

/* PC版タブボタン調整 */
@media (orientation: landscape) {
    .content-tabs {
        margin-top: 0;
    }
    
    .content-tab,
    .slide-tab {
        letter-spacing: 0.15em;
    }
    
    /* PC版タブ数別エリア幅 */
    /* 2タブ：各17.5vw */
    .tabs-2 .content-tab,
    .tabs-2 .slide-tab {
        flex: 0 0 17.5vw;
    }
    
    /* 3タブ：各13.5vw */
    .tabs-3 .content-tab,
    .tabs-3 .slide-tab {
        flex: 0 0 13.5vw;
    }
    
    /* 4タブ：各10.5vw */
    .tabs-4 .content-tab,
    .tabs-4 .slide-tab {
        flex: 0 0 10.5vw;
    }
    
    /* PC版タブ下余白 */
    .tab-content-wrapper {
        margin-top: 2vh;
    }
}

/* ==================== MENUカード ==================== */
/* 共通スタイル（PC/スマホ共通） */
.menu-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    overflow: hidden;
}

.menu-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
}

.menu-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像左上角のバッジ配置 */
.menu-card-image .badge-green,
.menu-card-image .badge-silver,
.menu-card-image .badge-gold,
.menu-card-image .badge-special,
.menu-card-image .badge-transparent {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
}

/* 画像左上角のバッジは不透明 */
.menu-card-image .badge-special {
    background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%);
}

/* コンテンツエリア */
.menu-card-body {
    padding: 4vh 2.5vw;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* タイトル（下線付き） */
.menu-card-body > .menu-card-title {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    margin-top: 0;
    font-size: var(--fs-l);  /* L */
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #e8e8e8;
    line-height: 1.3;
    position: relative;
    display: inline-block;
    padding-bottom: 1.5vh;
    align-self: flex-start;
}

.menu-card-body > .menu-card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    border-bottom: 0.2vh solid #e8e8e8;
}

/* 説明文（タイトル下線からの余白） */
.menu-card-body > .text-body {
    margin-top: 2vh;
}

/* 注釈用（小さめmargin） */
.menu-card-body > .text-body.note {
    margin-top: 1.5vh;
}

/* MENUカード内のバッジ */
.menu-card-body .badge-gold,
.menu-card-body .badge-silver,
.menu-card-body .badge-green,
.menu-card-body .badge-special,
.menu-card-body .badge-transparent {
    margin-top: 2vh;
}

/* スペックバッジ（寸法・価格グレード・車種情報） */
.menu-card-specs {
    display: inline-block;
    padding: 1.2vh 2vw;
    margin-top: 3.0vh;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(232, 232, 232, 0.3);
    border-radius: 0;
}

.menu-card-specs > .badge-text {
    margin: 0;
}

/* 価格エリア */
.menu-card-price {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    margin-top: 2.5vh;
}

.menu-card-price-body {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-size: var(--fs-m);  /* M */
    font-weight: 400;
    color: #e8e8e8;
    line-height: 1.8;
    margin: 0;
}

.menu-card-price-body .optima {
    font-family: 'Optima', sans-serif;
    font-weight: 500;
}

/* ボタンエリア */
.menu-card-button {
    margin-top: 3vh;
}

/* PC版：MENUカード */
@media (orientation: landscape) {
    .menu-card-body > .menu-card-title::after {
        left: -2.5vw;
        width: calc(100% + 2.5vw + 2.5vw);
    }
    
    .menu-card-button .btn-secondary {
        padding: 1.5vh 2vw;
        font-size: 0.9vw;
    }
    
    /* PC版：画像左上角のバッジテキスト */
    .menu-card-image .badge-text {
        font-size: 1.0vw;
    }
}

/* スマホ版：MENUカード */
@media (orientation: portrait) {
    .menu-card {
        width: 85vw;
        height: 100%;
        flex-shrink: 0;
    }
    
    .menu-card-body {
        padding: 4vh 5vw;
    }
    
    .menu-card-body > .menu-card-title {
        font-size: 4.0vw;
    }
    
    .menu-card-body > .menu-card-title::after {
        left: -5vw;
        width: calc(100% + 5vw + 5vw);
    }
    
    .menu-card-specs {
        padding: 1.5vh 4vw;
        margin-top: 3.0vh;
    }
    
    .menu-card-specs > .badge-text {
        font-size: 3.5vw;
    }
    
    .menu-card-price {
        gap: 1.5vh;
    }
    
    .menu-card-price-body {
        font-size: 3.5vw;
    }
    
    .menu-card-button .btn-secondary {
        padding: 2.5vw 5vw;
        font-size: 3.5vw;
    }
}

/* ==================== PLANカード ==================== */
/* 共通スタイル（PC/スマホ共通） */
.plan-card-wrapper {
    display: flex;
    flex-direction: column;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    flex: 1;
}

.plan-card-title {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    margin-top: 0;
    font-weight: 500;
    color: #222;
    line-height: 1.2;
}

.plan-card-description {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    margin-top: 2vh;
    font-weight: 300;
    color: #222;
    line-height: 1.8;
}

.plan-card-item,
.plan-card-section {
    margin-top: 3vh;
}

.plan-card-item-title,
.plan-card-section-title {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    margin-top: 0;
    font-weight: 500;
    color: #222;
    line-height: 1.3;
}

.plan-card-list {
    margin-top: 1.5vh;
    list-style: none;
}

.plan-card-list-item {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    position: relative;
    margin-top: 1vh;
    font-weight: 300;
    color: #222;
    line-height: 1.6;
}

.plan-card-list-item:first-child {
    margin-top: 0;
}

/* PLANカード内のバッジを全幅表示 */
.plan-card-item .badge-gold,
.plan-card-item .badge-silver,
.plan-card-item .badge-green,
.plan-card-item .badge-special,
.plan-card-item .badge-transparent {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 3vh;
}

.plan-card-list-item::before {
    content: '•';
    position: absolute;
    color: #222;
}

/* 日本語タイトルだけ太く */
.plan-card-item-title:not(:lang(en)),
.plan-card-section-title:not(:lang(en)) {
    font-weight: 600;
}

/* PC版：サイズと配置 */
@media (orientation: landscape) {
    .plan-card {
        padding: 4vh 2.5vw;
    }
    
    .plan-card-title {
        font-size: 1.8vw;
    }
    
    .plan-card-description {
        font-size: var(--fs-m);  /* M */
    }
    
    .plan-card-item-title,
    .plan-card-section-title {
        font-size: 1.2vw;
    }
    
    .plan-card-list {
        padding-left: 1.5vw;
    }
    
    .plan-card-list-item {
        font-size: 0.9vw;
    }
    
    .plan-card-list-item::before {
        left: -1.5vw;
    }
}

/* スマホ版：サイズと配置 */
@media (orientation: portrait) {
    .plan-card-wrapper {
        width: 85vw;
        height: 100%;
        flex-shrink: 0;
    }
    
    .plan-card {
        padding: 4vh 5vw;
    }
    
    .plan-card-item {
        margin-top: 0;
    }
    
    .plan-card-item:first-child {
        margin-top: 0;
    }
    
    .plan-card-title {
        font-size: 5vw;
    }
    
    .plan-card-description {
        font-size: clamp(2.5vw, 3.2vw, 3.5vw);  /* 自動縮小 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .plan-card-item-title,
    .plan-card-section-title {
        font-size: 3.5vw;
    }
    
    .plan-card-list {
        padding-left: 5vw;
    }
    
    .plan-card-list-item {
        font-size: 3.2vw;
    }
    
    .plan-card-list-item::before {
        left: -5vw;
    }
}

/* ==================== PLANカード バリエーション（3色） ==================== */
/* グリーン（LITE / Wrapping用） */
.plan-card-green {
    background: linear-gradient(135deg, rgba(90,112,72,0.5) 0%, rgba(58,74,47,0.5) 100%);
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.plan-card-green .plan-card-title,
.plan-card-green .plan-card-description,
.plan-card-green .plan-card-item-title,
.plan-card-green .plan-card-section-title,
.plan-card-green .plan-card-list-item {
    color: #000 !important;
}

/* シルバー（STANDARD / PPF用） */
.plan-card-silver {
    background: linear-gradient(135deg, rgba(176,176,176,0.5) 0%, rgba(80,80,80,0.5) 100%);
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.plan-card-silver .plan-card-title,
.plan-card-silver .plan-card-description,
.plan-card-silver .plan-card-item-title,
.plan-card-silver .plan-card-section-title,
.plan-card-silver .plan-card-list-item {
    color: #000 !important;
}

/* ゴールド（PREMIUM / Fenix用） */
.plan-card-gold {
    background: linear-gradient(135deg, rgba(196,154,74,0.5) 0%, rgba(90,64,3,0.5) 100%);
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.plan-card-gold .plan-card-title,
.plan-card-gold .plan-card-description,
.plan-card-gold .plan-card-item-title,
.plan-card-gold .plan-card-section-title,
.plan-card-gold .plan-card-list-item {
    color: #000 !important;
}

/* ==================== 価格表（Price Table）==================== */
/* 
   価格表の統一スタイル
   - コーティング価格表
   - メンテナンス価格表
   - ボディリペア価格表
   など、全ての価格表で共通使用
*/

/* 共通：セクション全体 */
section:has(.pt-wrapper) {
    width: 100%;
    background: transparent;
}

/* ラッパー */
.pt-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.pt-wrapper + .pt-wrapper {
    margin-top: 4vh;
}

.pt-table + .pt-table {
    margin-top: 4vh;
}

.pt-wrapper:last-child {
    margin-bottom: 0;
}

.pt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    background: transparent;
    -webkit-text-size-adjust: 100%;  /* iOS Safariの自動拡大を無効化 */
    text-size-adjust: 100%;
}

/* セル共通スタイル */
.pt-table th,
.pt-table td {
    padding: 2vh 1.5vw;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* グループヘッダー（左端の縦結合セル） */
.pt-table th.pt-group {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 400;  /* 600 → 400（card-titleと同じ） */
    color: #e8e8e8;
    line-height: 1.8;
    letter-spacing: 0;
    vertical-align: middle;
    padding: 2vh 1vw;
}

/* ヘッダー行（大見出し） */
.pt-table th.pt-header {
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 400;
    color: #e8e8e8;
    line-height: 1.3;
    letter-spacing: 0;  /* 0.05em → 0（card-titleと同じ） */
}

/* ヘッダー行（小見出し） */
.pt-table th.pt-sub {
    background: rgba(255, 255, 255, 0.05);
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;  /* 400 → 300（card-subtitleと同じ） */
    color: rgba(232, 232, 232, 0.85);
    line-height: 1.6;
    letter-spacing: 0;  /* 0.05em → 0 */
}

/* 項目名セル（左列） */
.pt-table td.pt-item {
    background: rgba(255, 255, 255, 0.04);
    text-align: left;
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 400;
    color: rgba(232, 232, 232, 0.85);
    line-height: 1.6;
}

/* 価格セル */
.pt-table td.pt-price {
    background: rgba(255, 255, 255, 0.02);
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 500;
    color: rgba(232, 232, 232, 0.95);
    line-height: 1.8;
}

/* 自動付帯セル */
.pt-table td.pt-included {
    background: rgba(74, 93, 62, 0.15);
}

.included-label {
    font-size: 0.75em;
    font-weight: 400;
    color: rgba(232, 232, 232, 0.7);
    letter-spacing: 0.05em;
}

/* 合計行金額 */
.pt-table td.pt-total-value {
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
    font-weight: 500;
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    color: rgba(232, 232, 232, 0.95);
    line-height: 1.8;
}

/* 数字をOptima適用（dataタグと.optimaクラスの両方に対応） */
.pt-table td.pt-price data,
.pt-table td.pt-price .optima,
.pt-table td.pt-total-value data,
.pt-table td.pt-total-value .optima {
    font-family: 'Optima', sans-serif;
}

/* 注釈 */
/* td.pt-note（選択不可セル） */
.pt-table td.pt-note {
    background: rgba(255, 255, 255, 0.02);
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;
    color: rgba(232, 232, 232, 0.6);
    line-height: 1.8;
    text-align: center;
}

/* span.pt-note（ヘッダー内の注釈） */
.pt-table span.pt-note {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;
    color: rgba(232, 232, 232, 0.6);
    line-height: 1.8;
    padding: 0;  /* padding削除 */
}

/* p.pt-note（テーブル外の注釈） */
.pt-note {
    font-family: 'Spartan', 'Yu Gothic', 'YuGothic', sans-serif;
    font-weight: 300;
    color: rgba(232, 232, 232, 0.6);
    line-height: 1.8;
    margin-top: 2vh;
    text-align: left;
    padding: 0 3.75vw;
}

/* モバイル版 */
@media (orientation: portrait) {
    .price-header {
        padding: 0 7.5vw;
    }
    
    .pt-wrapper {
        max-width: 100vw;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .pt-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* スマホで横スクロール用に表を広げる */
    .pt-table {
        width: max-content;
        min-width: 100%;
        margin: 0 7.5vw;
    }
    
    .pt-table th,
    .pt-table td {
        padding: 2vh 4vw;
    }
    
    .pt-table th.pt-group {
        padding: 2vh 3vw;
        font-size: 4.0vw;  /* L */
        line-height: 2.0;
    }
    
    .pt-table th.pt-header {
        font-size: 4.0vw;  /* L */
    }
    
    .pt-table th.pt-sub {
        font-size: 4.0vw;  /* L */
        font-weight: 400;  /* 普通 */
    }
    
    .pt-table td.pt-item {
        font-size: 4.0vw;  /* L */
        font-weight: 400;  /* 普通 */
    }
    
    .pt-table td.pt-price {
        font-size: 3.5vw;  /* M */
    }
    
    .pt-table td.pt-total-value {
        font-size: 3.5vw;  /* テキストボディと同じ */
    }
    
    .pt-note {
        font-size: 3.5vw;
        padding: 0 7.5vw;
    }
}

/* PC版 */
@media (orientation: landscape) {
    .pt-wrapper {
        margin: 0 3.75vw;
        width: calc(100% - 7.5vw);
        overflow-x: auto;
    }
    
    .pt-table {
        width: max-content;
        min-width: 100%;
    }
    
    .pt-table th.pt-group {
        font-size: 1.2vw;  /* L */
    }
    
    .pt-table th.pt-header {
        font-size: 1.2vw;  /* L */
    }
    
    .pt-table th.pt-sub {
        font-size: 1.2vw;  /* L */
        font-weight: 400;  /* 普通 */
    }
    
    .pt-table td.pt-item {
        font-size: 1.2vw;  /* L */
        font-weight: 400;  /* 普通 */
    }
    
    .pt-table td.pt-price {
        font-size: 1.0vw;  /* M */
    }
    
    .pt-table td.pt-total-value {
        font-size: 1.0vw;  /* M */
    }
    
    .pt-note {
        font-size: 1.0vw;
    }
    
    .price-header {
        padding: 0 3.75vw;
    }
}

/* ==================== クロスセルセクション ==================== */
/* 最後のセクション・フッター直前 */
.crosssell-section {
    /* 構造 */
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 余白 */
    padding: 10vh 7.5vw;
    /* 色・装飾 */
    background: transparent;
}

/* FAQの直後のクロスセルは上余白を詰める（スマホ） */
.faq-embed-section + .crosssell-section {
    padding-top: 0;
}

/* カードグリッド */
.crosssell-grid {
    /* 構造 */
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 余白 */
    gap: 4vw;
}

/* フェードインアニメーション：グループ内順番表示 */
.crosssell-grid > * {
    /* 初期状態 */
    opacity: 0;
    transform: translateY(10px);
    /* アニメーション */
    transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

.crosssell-grid > *.reveal {
    /* 表示状態 */
    opacity: 1;
    transform: translateY(0);
}

/* カード本体 */
.crosssell-card {
    /* 構造 */
    position: relative;
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    /* 色・装飾 */
    border-radius: 0;
    text-decoration: none;
}

/* カード画像エリア */
.crosssell-card-image {
    /* 構造 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 色・装飾 */
    background-size: cover;
    background-position: center;
}

/* カード画像内の<img>/<picture>タグ */
.crosssell-card-image img,
.crosssell-card-image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.crosssell-card:hover .crosssell-card-image img {
    transform: scale(1.1);
}

.crosssell-card-image img {
    display: block;
}

/* カードテキストエリア：Mobile版 */
.crosssell-card-content {
    /* 構造 */
    position: absolute;
    bottom: 4vh;
    left: 5vw;
    right: 5vw;
}

/* カードタイトル：Mobile版 */
.crosssell-card-title {
    /* 余白 */
    margin-bottom: 1.5vh;
    /* 色・装飾 */
    font-size: 4.5vw;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

/* カードサブタイトル：Mobile版 */
.crosssell-card-subtitle {
    /* 色・装飾 */
    font-size: 3.5vw;
    color: #FFFFFF;
    line-height: 1.8;
    text-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.5);
}

/* PC版 */
@media (orientation: landscape) {
    .crosssell-section {
        height: 100vh;
        padding: 0 3.75vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* FAQの直後のクロスセルは高さを詰める */
    .faq-embed-section + .crosssell-section {
        height: auto;
        padding-top: 0;
        padding-bottom: 10vh;
    }
    
    .crosssell-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
    }
    
    .crosssell-card {
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }
    
    .crosssell-card-content {
        bottom: 3vh;
        left: 2vw;
        right: 2vw;
    }
    
    .crosssell-card-title {
        font-size: 1.4vw;
        margin-bottom: 1vh;
        text-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.5);
    }
    
    .crosssell-card-subtitle {
        font-size: 1.1vw;
        text-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.5);
    }
    
    /* PC版では改行を無効化 */
    .mobile-br {
        display: none;
    }
}