.hero-bg {
    background: #000;
}

.hero-inner {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.hero-panel {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.hero-brand {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

.hero-brand p {
    letter-spacing: 0.22em;
}

.hero-logo {
    margin: 0;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(4.5rem, 8vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: -0.06em;
    color: transparent;
    background: linear-gradient(90deg, #06b6d4 0%, #eaf8ff 45%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-copy {
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: #ffffff;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

.hero-copy-line {
    display: block;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
}

.hero-copy-line-strong {
    white-space: nowrap;
}

/* ここから追加 */
.hero-copy-line-text {
    display: inline;
}

.hero-cursor {
    display: inline-block;
    width: 0.08em;
    height: 0.9em;
    margin-left: 0.08em;
    background: #06b6d4;
    vertical-align: -0.08em;
    animation: heroCursorBlink 0.8s steps(1, end) infinite;
}

.hero-cursor.is-hidden {
    opacity: 0;
}

@keyframes heroCursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* ここまで追加 */

.hero-button {
    min-width: 220px;
    padding: 1rem 1.75rem;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hero-button-primary {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 20px 50px rgba(255, 255, 255, 0.08);
}

.hero-button-secondary {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

.hero-button-strong {
    background: #06b6d4;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(6, 182, 212, 0.18);
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-scroll span {
    background: rgba(148, 163, 184, 0.85);
}

/* ▼ ここから追加 ▼ */
#hero-buttons {
    opacity: 0;
    transform: translateY(20px);
    flex-wrap: wrap;
}

#hero-buttons>button,
#hero-buttons>a {
    white-space: nowrap;
}

#hero-buttons.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* ▲ ここまで追加 ▲ */

@media (max-width: 768px) {
    .hero-panel {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .hero-logo {
        font-size: clamp(3.5rem, 12vw, 6rem);
    }

    .hero-copy {
        gap: 0.5rem;
    }

    .hero-copy-line {
        font-size: clamp(2.2rem, 8vw, 3.8rem);
    }

    #hero-buttons {
        width: 100%;
    }

    .hero-button {
        width: 100%;
        min-width: auto;
    }
}

/* ===== Parallax: Hero layer styles (追加) =====
   目的:
   - data-parallax-speed を持つ要素を滑らかに動かすための土台
   - prefers-reduced-motion 環境では動きを無効化
*/
.parallax-layer {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .parallax-layer {
        transform: none !important;
    }
}

/* ===== /Parallax ===== */

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #0f172a;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;
}

/* [挿入] モーダル表示アニメーション */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-modal-fade {
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes resultFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-result-fade {
    animation: resultFadeIn 0.3s ease-out;
}

/* ===== Origin Mask Reveal (#origin scoped) ===== */
#origin #origin-mask-reveal.br-section {
    width: 100%;
    display: grid;
    gap: 0.7rem;
    padding: 0.25rem 0;
}

#origin #origin-mask-reveal .br-item {
    position: relative;
    overflow: hidden;
    padding-right: 6vw;
}

#origin #origin-mask-reveal .br-text {
    display: inline-block;
    width: max-content;
    margin: 0;
    color: #1f2937;
    font-size: clamp(1.05rem, 1vw + 0.7rem, 1.35rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    font-weight: 500;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path, transform;
    position: relative;
    z-index: 1;
}

#origin #origin-mask-reveal .br-mask {
    position: absolute;
    inset: 0;
    background: #111827;
    transform-origin: left center;
    transform: scaleX(0) translateX(0);
    will-change: transform;
    pointer-events: none;
    z-index: 2;
}

#origin #origin-mask-reveal .br-trail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    background: #f2ff00;
    box-shadow: 0 0 14px rgba(242, 255, 0, 0.55);
    transform-origin: right center;
    transform: scaleX(0);
    will-change: transform, left;
    pointer-events: none;
    z-index: 1;
}

#origin #origin-mask-reveal .br-brand {
    color: #06b6d4;
    font-weight: 700;
    text-shadow:
        0 0 5px rgba(6, 182, 212, 0.35),
        0 0 14px rgba(6, 182, 212, 0.22);
}

#origin #origin-mask-reveal .br-quote .br-text {
    background: rgba(250, 204, 21, 0.18);
    box-shadow: 0 0 0 0.08em rgba(250, 204, 21, 0.18);
    border-radius: 0.2em;
    padding: 0.05em 0.24em;
}

#origin #origin-mask-reveal .br-important .br-text {
    color: #1d4ed8;
    font-weight: 700;
}

#origin #origin-mask-reveal .br-keyword {
    opacity: 0.45;
    color: #f97316;
    font-weight: 700;
}

#origin #origin-mask-reveal .br-underline {
    position: absolute;
    left: 0;
    bottom: 0.28em;
    height: 0.1em;
    width: 0;
    background: #f97316;
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
    z-index: 3;
}

#origin #origin-mask-reveal .br-final .br-text {
    font-weight: 800;
    color: #0f172a;
}

/* mobile */
@media (max-width: 768px) {
    #origin #origin-mask-reveal.br-section {
        gap: 0.55rem;
    }

    #origin #origin-mask-reveal .br-item {
        padding-right: 0;
    }

    #origin #origin-mask-reveal .br-text {
        font-size: clamp(0.95rem, 2.2vw + 0.45rem, 1.12rem);
        line-height: 1.8;
        white-space: normal;
        width: auto;
    }

    #origin #origin-mask-reveal .br-trail,
    #origin #origin-mask-reveal .br-underline {
        display: none;
    }
}

/* ===== /Origin Mask Reveal ===== */

/* ===== Dark mode readability fix: Origin mask block only ===== */
html[data-theme="dark"] #origin .bg-white.p-8.md\:p-12.rounded-2xl.shadow-xl {
    background-color: #1e293b !important;
    border-left-color: #38bdf8 !important;
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-text {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-final .br-text {
    color: #f8fafc !important;
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-important .br-text {
    color: #93c5fd !important;
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-brand {
    color: #22d3ee !important;
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-quote .br-text {
    background: rgba(250, 204, 21, 0.22) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] #origin #origin-mask-reveal .br-mask {
    background: #0f172a !important;
}

/* ===== /Dark mode readability fix ===== */

/* AI cards reveal: rendering/perf hint only (layout unchanged) */
.ai-card {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Typewriter cursor */
#ai-typewriter .tw-cursor {
    display: inline-block;
    margin-left: 0.08em;
    animation: twBlink 0.9s steps(1, end) infinite;
}

@keyframes twBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* [追加][AIカード枠線統一]
   目的: 6枚すべての .ai-card に同じ青枠を適用
   注意: 右下だけ個別で border 指定がある場合も、見た目を統一するため共通指定で上書き
*/
.ai-card {
    border: 1.5px solid #2563eb !important;
    border-radius: 12px;
}

/* [追加][Targetカード枠線統一]
   目的: .course-card を付与したカードに青枠を一括適用
   備考: 既存 border 指定との競合回避のため !important を使用
*/
/* [強制適用] #target 内の course-card を青枠に */
#target .course-card {
    border-style: solid !important;
    border-width: 1.5px !important;
    border-color: #2563eb !important;
    border-radius: 12px !important;
}

/* ===============================
   Scroll Progress Circle
   ダークテーマ用ネオン進捗リング
   左下固定 / クリックでTOPへ戻る
================================ */

/* 全体コンテナ（左下固定） */
.scroll-progress {
    position: fixed;
    left: 40px;
    bottom: 40px;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 9999;
    /* 最前面表示 */
}

/* スマホ用の位置・サイズ調整 */
@media (max-width: 768px) {
    .scroll-progress {
        left: 16px;
        right: auto;
        bottom: 16px;
        width: 72px;
        height: 72px;
    }
}

/* SVGを上から開始させるため回転 */
.scroll-progress svg {
    transform: rotate(-90deg);
}

/* 背景リング */
.progress-bg {
    fill: none;
    stroke: #1a1a1a;
    /* ダーク背景用 */
    stroke-width: 6;
}

/* 進捗リング（ネオン） */
.progress-bar {
    fill: none;
    stroke: #00f0ff;
    /* 通常時ネオンブルー */
    stroke-width: 6;
    stroke-linecap: round;
    filter: url(#glow);
    /* 発光エフェクト */
    transition: stroke 0.3s ease, stroke-dashoffset 0.2s ease;
}

/* 中央の％表示 */
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 600;
    color: #00f0ff;
    text-shadow: 0 0 8px #00f0ff;
    /* 発光 */
}

/* =========================
   ローディング画面 全体設定
   ========================= */
#loading {
    position: fixed;
    /* 画面全体に固定表示 */
    inset: 0;
    /* top/right/bottom/left: 0 と同じ意味（全画面） */
    background: #0c1220;
    /* ダークネイビー背景（ブランド用） */
    display: flex;
    /* 中央配置のためにFlexbox使用 */
    align-items: center;
    /* 縦中央 */
    justify-content: center;
    /* 横中央 */
    z-index: 9999;
    /* 他の要素より最前面に表示 */
}

/* =========================
   ロゴ全体ラッパー
   ========================= */
.logo-wrap {
    text-align: center;
    /* ロゴを中央揃え */
    opacity: 0;
    /* 最初は透明 */
    animation: fadeIn 1.2s ease forwards;
    /* 1.2秒かけてフェードイン */
}

/* =========================
   メインロゴテキスト
   ========================= */
.logo-text {
    font-size: 4rem;
    /* ロゴサイズ */
    font-weight: 800;
    /* 太字 */
    letter-spacing: 2px;
    /* 文字間を少し広げる */

    /* グラデーション文字 */
    background: linear-gradient(90deg,
            #00c6ff,
            #ffffff,
            #00c6ff);
    -webkit-background-clip: text;
    /* 背景を文字にクリップ */
    -webkit-text-fill-color: transparent;
    /* 文字色を透明にして背景を見せる */
}

/* =========================
   ロゴ下のライン
   ========================= */
.logo-line {
    width: 60%;
    /* 横幅はロゴの約6割 */
    height: 3px;
    /* 線の太さ */
    margin: 10px auto;
    /* 上下余白＋中央寄せ */
    background: #00c6ff;
    /* ブランドカラー */
}

/* =========================
   サブテキスト
   ========================= */
.logo-sub {
    font-size: 0.8rem;
    /* 小さめ文字 */
    letter-spacing: 4px;
    /* 未来感出すため広め */
    color: #00c6ff;
    /* ブランドカラー */
}

/* =========================
   フェードインアニメーション
   ========================= */
@keyframes fadeIn {
    to {
        opacity: 1;
        /* 最終的に完全表示 */
    }
}

/* =========================
   [追加] Loading Status UI
   目的:
   - ローディング画面で「タイプライター文 + カーソル + %」を表示
   挿入位置:
   - head内のメインstyleの末尾付近
   - loading / logo-wrap 用CSSの近くに置くと管理しやすい
   ========================= */

/* ステータス行全体（中央揃え） */
.loading-status {
    margin-top: 14px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: #c9f6ff;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    min-height: 1.4em;
}

/* タイプライター文字列本体 */
#loadingTypewriter {
    white-space: nowrap;
}

/* 点滅カーソル */
.loading-cursor {
    animation: loadingCursorBlink 0.8s steps(1, end) infinite;
    color: #00c6ff;
}

/* パーセンテージ表示 */
#loadingPercent {
    font-weight: 700;
    color: #ffffff;
    min-width: 3ch;
    text-align: right;
}

/* カーソル点滅アニメーション */
@keyframes loadingCursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* =========================
   [追加] Sticky Course Group Heads
   目的:
   - #target 内の各カテゴリ見出しを sticky 化
   - 次の見出しが押し上げて“くっつく”ような見え方を作る
   - ダーク基調の半透明見出しで既存カードの可読性を保つ
   挿入位置:
   - <head> 内のメイン <style> の末尾
       ========================= */

/* 固定ヘッダー高さや重なり量を調整する変数 */
:root {
    --stickyTop: 88px;
    --groupOverlap: 30px;
    --groupHeadBg: rgba(15, 23, 42, 0.72);
    --groupHeadBorder: rgba(148, 163, 184, 0.16);
    --groupHeadBlur: 8px;
}

/* 各カテゴリセクション本体 */
#target .course-group {
    position: relative;
    padding-top: 1.5rem;
    margin-bottom: 2.5rem;
}

/* 次の見出しが下から押し上げてくる見え方を作る */
#target .course-group+.course-group {
    margin-top: calc(var(--groupOverlap) * -1);
    padding-top: calc(1.5rem + var(--groupOverlap));
}

/* sticky 見出し */
#target .group-head {
    position: sticky;
    top: var(--stickyTop);
    z-index: 20;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem 0.9rem;
    border: 1px solid var(--groupHeadBorder);
    border-radius: 20px;
    background: var(--groupHeadBg);
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.22);
    opacity: 0.92;
}

/* 対応ブラウザだけ軽くブラー */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    #target .group-head {
        backdrop-filter: blur(var(--groupHeadBlur));
        -webkit-backdrop-filter: blur(var(--groupHeadBlur));
    }
}

/* 英字大見出し */
#target .group-title {
    margin: 0;
    font-size: clamp(28px, 6vw, 84px);
    line-height: 0.92;
    letter-spacing: 0.08em;
    font-weight: 900;
    color: rgba(248, 250, 252, 0.96);
}

/* 日本語サブラベル */
#target .group-sub {
    margin: 0.4rem 0 0;
    font-size: clamp(13px, 1.5vw, 18px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #22d3ee;
}

/* カード本体を見出しより下のレイヤーへ */
#target .course-group .cards {
    position: relative;
    z-index: 1;
}

/* 見出し下のライン */
#target .group-head::after {
    content: "";
    display: block;
    margin-top: 0.85rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.8), rgba(34, 211, 238, 0));
}

/* [任意] JSで is-active が付いたグループだけ少しはっきり見せる */
#target .course-group.is-active .group-head {
    opacity: 1;
}

/* モバイル最適化 */
@media (max-width: 768px) {
    :root {
        --stickyTop: 76px;
        --groupOverlap: 18px;
    }

    #target .course-group {
        padding-top: 1rem;
        margin-bottom: 1.75rem;
    }

    #target .group-head {
        padding: 0.85rem 1rem 0.8rem;
        border-radius: 16px;
        margin-bottom: 1rem;
    }

    #target .group-title {
        font-size: clamp(22px, 9vw, 42px);
        letter-spacing: 0.06em;
    }

    #target .group-sub {
        font-size: 12px;
        letter-spacing: 0.14em;
    }
}

/* 動きの抑制設定がある環境では変化を最小化 */
@media (prefers-reduced-motion: reduce) {
    #target .group-head {
        transition: none;
    }
}

/* [追加] Seasonal cards reveal 用の描画最適化 */
#seasonal-lessons .season-card {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* =========================
       Weather Card
       目的:
       - アクセス欄の右側に置く天気カードの見た目を整える
       - 既存デザイン（wasedriveの青×オレンジ）に馴染ませる
    ========================= */

/* 天気カード全体
       - 疑似要素の背景演出を中に収めるため overflow: hidden
       - relative は ::before の基準位置 */
.weather-card {
    position: relative;
    overflow: hidden;
}

/* 天気カードのうっすらした背景グラデーション
       - シアンとオレンジを薄く重ねてブランド感を出す
       - pointer-events: none でクリック操作を邪魔しない */
.weather-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(249, 115, 22, 0.04));
    pointer-events: none;
}

/* カード内の本文を疑似要素より前面に出す
       - ::before が上に被って文字が薄くならないようにする */
.weather-card>* {
    position: relative;
    z-index: 1;
}

/* 各ステータス小カード
       - ホバー時に少し浮く演出をつけるため transition を設定 */
.weather-stat {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 小カードにマウスを乗せたとき
       - 少し上に浮かせて情報カードっぽく見せる */
.weather-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* =========================
       Dark Mode
       目的:
       - 既存のダークテーマ切替に合わせて
         天気カードも暗い配色へ自動で切り替える
    ========================= */

/* ダークモード時の天気カード本体 */
html[data-theme="dark"] .weather-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ダークモード時の小カード・予報カード */
html[data-theme="dark"] .weather-stat,
html[data-theme="dark"] #weather-forecast>div {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* ダークモード時の補助テキスト色
       - 最終更新時刻や日付などの薄い文字 */
html[data-theme="dark"] #weather-updated-at,
html[data-theme="dark"] #weather-card .text-gray-400 {
    color: #94a3b8 !important;
}

/* ダークモード時の説明文テキスト色
       - 「体験授業・ご来塾日の参考に〜」など */
html[data-theme="dark"] #weather-card .text-gray-500 {
    color: #cbd5e1 !important;
}

/* =========================
       Responsive
       目的:
       - スマホでも3日分の予報を横3列で保つ
       - 崩れ方を最小限にする
    ========================= */
@media (max-width: 768px) {
    #weather-forecast {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================
   Floating Chatbot for wasedrive
   目的:
   - 右下固定のチャットボットを表示
   - wasedrive の世界観に合うように配色を調整
========================= */

.chatbot {
    position: fixed;
    right: 24px;

    /* もともと 24px だったのを 44px に変更
       → 右下から少しだけ上へ移動 */
    bottom: 44px;

    z-index: 9998;
    animation: ctaEntrance 0.9s ease-out both;
}


@keyframes ctaEntrance {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-fab {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 130px;
    max-width: 150px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.chatbot-fab:hover {
    transform: translateY(-3px);
}

.fab-open {
    display: block;
    width: 100%;
}

.fab-close {
    display: none;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.96);
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.chatbot.is-open .fab-open {
    display: none;
}

.chatbot.is-open .fab-close {
    display: flex;
}

.chatbot.is-open .fab-close:hover {
    transform: scale(1.03);
}

.chatbot-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chatbot-bubble {
    position: relative;
    width: 130px;
    min-height: 180px;
    padding: 18px 10px 20px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.chatbot-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 10px 0 10px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.94) transparent transparent transparent;
}

.chatbot-bubble-text {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.1;
    white-space: pre;
}

.chatbot-avatar {
    width: 88px;
    height: 95px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
    background: #ffffff;
    margin-top: -18px;
}

.chatbot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.chatbot-panel {
    position: absolute;
    right: 0;
    bottom: 132px;
    width: min(380px, calc(100vw - 32px));
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.chatbot.is-open .chatbot-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chatbot-header {
    padding: 18px 20px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
}

.chatbot-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #67e8f9;
    text-transform: uppercase;
}

.chatbot-subtitle {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
}

.chatbot-messages {
    padding: 18px;
    background: #f8fafc;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    display: flex;
}

.message.user {
    justify-content: flex-end;
}

.message.bot {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 84%;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    word-break: break-word;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.message.bot .message-bubble {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

.message.user .message-bubble {
    background: #06b6d4;
    color: #ffffff;
}

.chatbot-form {
    display: flex;
    gap: 10px;
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.chatbot-form input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 12px 14px;
    font-size: 0.95rem;
    outline: none;
}

.chatbot-form input:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.14);
}

.chatbot-form button {
    border: none;
    border-radius: 9999px;
    padding: 0 18px;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.chatbot-form button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.chatbot-form button:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

html[data-theme="dark"] .chatbot-panel {
    background: rgba(15, 23, 42, 0.96);
    border-color: #334155;
}

html[data-theme="dark"] .chatbot-messages {
    background: #0f172a;
}

html[data-theme="dark"] .message.bot .message-bubble {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

html[data-theme="dark"] .chatbot-form {
    background: #0f172a;
    border-top-color: #334155;
}

html[data-theme="dark"] .chatbot-form input {
    background: #1e293b;
    color: #f8fafc;
    border-color: #475569;
}

@media (max-width: 768px) {
    .chatbot {
        right: 16px;

        /* もともと 16px だったのを 32px に変更
           → スマホでも少し上へ移動 */
        bottom: 32px;
    }

    .chatbot-fab {
        min-width: 120px;
        max-width: 140px;
    }

    .chatbot-bubble {
        width: 110px;
        min-height: 170px;
        padding: 16px 8px 18px;
        border-radius: 28px;
    }

    .chatbot-bubble-text {
        font-size: 0.96rem;
    }

    .chatbot-avatar {
        width: 76px;
        height: 82px;
        margin-top: -16px;
    }

    .chatbot-panel {
        width: min(360px, calc(100vw - 24px));
        bottom: 98px;
    }

    .chatbot-messages {
        max-height: 300px;
    }
}

/* --- AIセクション用CSS --- */
#ai-policy {
    padding: 60px 20px;
    background-color: #f9fafa;
    /* 少しグレーがかった清潔感のある背景 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    /* 既存サイトのフォントに合わせて調整してください */
    line-height: 1.6;
    color: #333;
}

.ai-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 導入部（画像とテキスト） */
.ai-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.ai-intro-text {
    flex: 1 1 500px;
    /* PCでは幅を確保、スマホでは折り返し */
    padding-right: 30px;
    box-sizing: border-box;
}

.ai-intro h2 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #0056b3;
    /* 知的な印象の青 */
    position: relative;
}

/* タイトルの下線アクセント（オプション） */
.ai-intro h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #ff9800;
    /* 熱量を感じるオレンジ */
    margin-top: 10px;
}

.ai-intro p.lead {
    font-size: 1.1rem;
    font-weight: 500;
}

.ai-intro-image {
    flex: 1 1 400px;
    text-align: center;
}

.ai-intro-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    /* 角丸で親しみやすく */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    /* 浮き上がるような影 */
}

/* メリットカード部分 */
.ai-merits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* レスポンシブなグリッド */
    gap: 25px;
}

.merit-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.merit-card:hover {
    transform: translateY(-5px);
    /* ホバー時に少し浮き上がる演出 */
}

.merit-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #0056b3;
    display: flex;
    align-items: center;
}

/* 簡易アイコン（本来はFontAwesomeなどを使うと良い） */
.merit-card h3::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ff9800;
    border-radius: 50%;
    margin-right: 10px;
}

.merit-card p {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* 6番目のカード内の強調リスト */
.merit-highlight-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.merit-highlight-list li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.merit-highlight-list li strong {
    display: block;
    color: #0056b3;
    margin-bottom: 5px;
    font-size: 1rem;
}

.merit-highlight-list li::before {
    content: '✓';
    /* チェックマーク */
    position: absolute;
    left: 0;
    color: #ff9800;
    font-weight: bold;
}

/* スマホ向け調整 */
@media (max-width: 768px) {
    .ai-intro-text {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .ai-intro h2 {
        font-size: 1.8rem;
    }
}

#ai-policy {
    padding: 80px 20px;
    background-color: #f4f8fb;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
}

.ai-container {
    max-width: 1000px;
    margin: 0 auto;
}

.ai-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.ai-text-area {
    flex: 1;
    min-width: 300px;
}

.ai-text-area h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #0044cc;
    line-height: 1.3;
}

.ai-text-area .lead {
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 20px;
}

.ai-image-area {
    flex: 1;
    min-width: 300px;
}

.ai-image-area img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.ai-image-area img:hover {
    transform: scale(1.02);
}

.ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.ai-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.ai-card h3 {
    font-size: 1.25rem;
    color: #0044cc;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.ai-card h3::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 24px;
    background: #ff9900;
    margin-right: 10px;
    border-radius: 4px;
}

.ai-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666;
}

.ai-card.highlight {
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
    border: 2px solid #0044cc;
    position: relative;
}

.ai-card.highlight h3 {
    color: #d32f2f;
}

.check-list {
    margin-top: 15px;
    list-style: none;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 0.95rem;
}

.check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #ff9900;
}

@media (max-width: 768px) {
    .ai-text-area h2 {
        font-size: 1.8rem;
    }
}

/* --- ここから: ダークモード用スタイル（変数ベース） --- */

/* 1) ライトモードの基本色を変数で定義 */
:root {
    --bg-main: #f8fafc;
    /* ページ全体背景 */
    --text-main: #1f2937;
    /* 基本文字色 */
    --card-bg: #ffffff;
    /* カード背景 */
    --card-border: #e5e7eb;
    /* カード枠線 */
    --header-bg: rgba(255, 255, 255, 0.95);
    /* 半透明ヘッダー背景 */
    --muted-text: #6b7280;
    /* 補助文字色（text-gray-500相当） */
    --brand-blue: #1e3a8a;
    /* text-waseBlue相当 */
    --toggle-bg: #f3f4f6;
    /* 切替ボタン背景 */
    --toggle-text: #0f172a;
    /* 切替ボタン文字色 */
    --toggle-hover-bg: #e5e7eb;
    /* 切替ボタンhover */
}

/* 2) ダークモード時の変数上書き */
html[data-theme="dark"] {
    --bg-main: #0f172a;
    --text-main: #f1f5f9;
    --card-bg: #1e293b;
    --card-border: #334155;
    --header-bg: rgba(15, 23, 42, 0.95);
    --muted-text: #94a3b8;
    --brand-blue: #ffffff;
    --toggle-bg: #334155;
    --toggle-text: #facc15;
    --toggle-hover-bg: #475569;
}

/* 3) ページ全体に変数を適用 */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* 4) 既存Tailwindクラスを変数で上書き（現在のページ構造を維持） */
.bg-white,
.bg-gray-50 {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* 5) 半透明ヘッダー用 */
.bg-white\/95 {
    background-color: var(--header-bg) !important;
}

/* 6) 文字色上書き */
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: var(--text-main) !important;
}

.text-gray-500 {
    color: var(--muted-text) !important;
}

.text-waseBlue {
    color: var(--brand-blue) !important;
}

.marker-highlight {
    background-color: #fef08a;
    color: #1f2937;
}

html[data-theme="dark"] .marker-highlight {
    background-color: #f59e0b;
    color: #0f172a;
}

/* 7) テーマ切替ボタン（IDは themeToggle 前提） */
#themeToggle {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 9999px;
    border: none;
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

#themeToggle:hover {
    background-color: var(--toggle-hover-bg);
    transform: scale(1.05);
}

/* --- ここまで: ダークモード用スタイル --- */

/* ★ここからタイピングエフェクト用のCSSを追加★ */
#typing-text::after {
    content: '|';
    animation: blink 0.8s infinite;
    margin-left: 0.1rem;
    color: #22d3ee;
    /* waseCyan (シアン色) */
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* --- ここまで追加 --- */

/* [MEMO] Typewriterの表示領域。高さ固定で文字切替時のレイアウト崩れ防止 */
.typewriter-wrap {
    min-height: 1.5em;
    font-size: clamp(0.75rem, 1.3vw, 1rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #67e8f9;
}

/* [MEMO] Typewriter用カーソル。既存の#typing-text::afterとは別管理 */
.typewriter-cursor {
    font-weight: 300;
    color: var(--color-primary-light, #22d3ee);
    animation: blink 0.8s step-end infinite;
    margin-left: 2px;
}

/* ボタンをふわっと浮かび上がらせるアニメーション */
.fade-in-up {
    animation: fadeInUp 1.0s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
        /* 20px下からスタート */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* 定位置で止まる */
    }
}

/* --- ここまで追加 --- */

/* ===== Custom Cursor ===== */
/* PC操作時はデフォルトカーソルを非表示 */
body {
    cursor: none;
}

/* 中心の点 */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #22d3ee;
    /* waseCyan寄り */
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease;
    mix-blend-mode: difference;
}

/* 遅れて追従する輪郭 */
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(34, 211, 238, 0.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.15s ease;
}

/* ホバー時: 点を拡大＆色変更 */
.cursor-dot.hover {
    transform: translate(-50%, -50%) scale(2.5);
    background: #f97316;
    /* waseOrange寄り */
}

/* ホバー時: 輪郭を拡大 */
.cursor-outline.hover {
    width: 56px;
    height: 56px;
    border-color: rgba(249, 115, 22, 0.45);
}

/* タッチ端末では無効化 */
@media (hover: none) and (pointer: coarse) {
    body {
        cursor: auto;
    }

    .cursor-dot,
    .cursor-outline {
        display: none;
    }
}

/* =========================================================
   Font Scale
   ---------------------------------------------------------
   目的:
   - A- / A / A+ ボタンでページ全体の基本文字サイズを変える
   - script.js の 85 / 95 / 105 とクラス名を合わせる
   ========================================================= */

/* 基本倍率 */
:root {
    --fs-scale: 1;
}

/* ページ全体の基準フォントサイズ */
html {
    font-size: calc(16px * var(--fs-scale));
}

/* A- */
html.font-scale-85 {
    --fs-scale: 0.85;
}

/* A */
html.font-scale-95 {
    --fs-scale: 0.95;
}

/* A+ */
html.font-scale-105 {
    --fs-scale: 1.05;
}

/* ===== Strategy Metrics Section ===== */
#strategy-metrics.strategy-metrics-section {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.16), transparent 32%),
        linear-gradient(180deg, #020617 0%, #081223 48%, #030712 100%);
    color: #e2e8f0;
}

.strategy-metrics-noise {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
}

.strategy-metrics-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
}

.strategy-metrics-orb-cyan {
    width: 18rem;
    height: 18rem;
    top: 9%;
    left: -4rem;
    background: rgba(34, 211, 238, 0.22);
}

.strategy-metrics-orb-orange {
    width: 16rem;
    height: 16rem;
    right: -3rem;
    bottom: 12%;
    background: rgba(249, 115, 22, 0.18);
}

.strategy-metrics-heading {
    letter-spacing: -0.04em;
}

.strategy-metrics-frame {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow:
        0 32px 80px rgba(2, 6, 23, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
}

.strategy-metrics-topline {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.strategy-metrics-topline-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #67e8f9;
}

.strategy-metrics-topline-copy {
    margin: 0;
    max-width: 50rem;
    color: #cbd5e1;
    line-height: 1.9;
}

.strategy-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.strategy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.76)),
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 38%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.strategy-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), transparent 42%);
    opacity: 0.8;
    pointer-events: none;
}

.strategy-card-emphasis {
    border-color: rgba(34, 211, 238, 0.26);
}

.strategy-card-critical {
    border-color: rgba(249, 115, 22, 0.32);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.8)),
        linear-gradient(135deg, rgba(249, 115, 22, 0.12), transparent 40%);
}

.strategy-card-year,
.strategy-card-copy,
.strategy-card-formula,
.strategy-card-unit,
.strategy-card-value {
    position: relative;
    z-index: 1;
}

.strategy-card-year {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: #94a3b8;
}

.strategy-card-value-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}

.strategy-card-value {
    font-size: clamp(3.3rem, 7vw, 5.8rem);
    line-height: 0.92;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 24px rgba(34, 211, 238, 0.18),
        0 0 56px rgba(15, 23, 42, 0.65);
}

.strategy-card-critical .strategy-card-value {
    color: #fff7ed;
    text-shadow: 0 0 32px rgba(249, 115, 22, 0.18);
}

.strategy-card-unit {
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #67e8f9;
    text-align: right;
}

.strategy-card-meter {
    position: relative;
    width: 100%;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.strategy-card-meter-fill {
    display: block;
    width: var(--meter-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 45%, #f97316 100%);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.3);
}

.strategy-card-copy {
    margin: 0 0 1.1rem;
    color: #dbe4f0;
    line-height: 1.85;
    flex-grow: 1;
}

.strategy-card-formula {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: #94a3b8;
}

.strategy-metrics-divider {
    width: 100%;
    height: 1px;
    margin: 2.2rem 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.24), transparent);
}

.strategy-metrics-message {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
    gap: 1.5rem;
    align-items: start;
}

.strategy-metrics-body {
    display: grid;
    gap: 1rem;
}

.strategy-metrics-body p {
    margin: 0;
    font-size: 1rem;
    line-height: 2;
    color: #dbe4f0;
}

.strategy-metrics-aside {
    padding: 1.35rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 47, 73, 0.26), rgba(15, 23, 42, 0.72)),
        rgba(15, 23, 42, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.strategy-metrics-aside-label {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #67e8f9;
}

.strategy-metrics-aside h3 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.5;
    color: #f8fafc;
}

.strategy-metrics-aside p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.9;
}

html[data-theme="light"] #strategy-metrics.strategy-metrics-section {
    color: #e2e8f0;
}

@media (max-width: 1024px) {
    .strategy-metrics-grid {
        grid-template-columns: 1fr;
    }

    .strategy-card-value-wrap {
        align-items: center;
    }

    .strategy-metrics-message {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .strategy-metrics-frame {
        border-radius: 1.5rem;
    }

    .strategy-card {
        padding: 1.25rem;
        border-radius: 1.25rem;
    }

    .strategy-card-year {
        font-size: 0.72rem;
        letter-spacing: 0.2em;
    }

    .strategy-card-value-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .strategy-card-unit {
        margin-bottom: 0;
        text-align: left;
    }

    .strategy-metrics-topline-copy,
    .strategy-metrics-body p,
    .strategy-metrics-aside p {
        font-size: 0.95rem;
    }
}

/* ===== /Strategy Metrics Section ===== */

/* =========================================
   Hero Visual transplant only
   文字構成を移植
========================================= */

.hero-v3 {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #020817 0%, #020617 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-left: 3px solid rgba(6, 182, 212, 0.45);
}

.hero-v3__glow {
    position: absolute;
    top: -18%;
    left: -10%;
    width: 72vw;
    height: 72vw;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.hero-v3__upper {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8.8rem 2rem 0 2rem;
}

.hero-v3__rule {
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.hero-v3__ja {
    margin: 0;
    padding: 1rem 0 0.9rem;
    font-size: clamp(2rem, 3.5vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.78);
}

.hero-v3__en {
    margin: 0;
    padding: 0.35rem 0 0.55rem;
    font-size: clamp(5rem, 14vw, 10rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.07em;
    color: transparent;
    background: linear-gradient(90deg, #06b6d4 0%, #eaf8ff 45%, #8fe8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-v3__lower {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 0 3rem;
    align-items: start;
    padding: 2.8rem 2rem 4rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-v3__label-wrap {
    display: flex;
    align-items: flex-start;
    padding-top: 0.35rem;
}

.hero-v3__label {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}

.hero-v3__message {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 920px;
}

.hero-v3__copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hero-v3__copy-line {
    display: block;
    min-height: 1.2em;
    font-size: clamp(2rem, 3vw, 3.35rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.hero-v3__copy-line--accent {
    color: #06b6d4;
}

.hero-v3__copy-text {
    display: inline;
}

.hero-v3__sub {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.4);
}

#hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 0.35rem;
    opacity: 0;
    transform: translateY(14px);
}

.hero-v3__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.72rem 1.55rem;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hero-v3__btn:hover {
    transform: translateY(-2px);
}

.hero-v3__btn--ghost {
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
}

.hero-v3__btn--ghost:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.hero-v3__btn--accent {
    color: #fff;
    background: #06b6d4;
    border: 1px solid transparent;
}

.hero-v3__btn--accent:hover {
    background: #0ea5e9;
}

.hero-v3__scroll {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.35rem;
}

.hero-v3__scroll-text {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.hero-v3__scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3));
}

.hero-v3__geo {
    position: absolute;
    right: 2rem;
    bottom: 1.45rem;
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.14);
    z-index: 1;
}

/* 既存の typewriter JS 用カーソル見た目を少し調整 */
.hero-cursor {
    display: inline-block;
    width: 0.065em;
    height: 0.85em;
    margin-left: 0.05em;
    background: #06b6d4;
    vertical-align: -0.05em;
    animation: heroCursorBlink 0.8s steps(1, end) infinite;
}

.hero-cursor.is-hidden {
    opacity: 0;
}

@keyframes heroCursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

#hero-buttons.fade-in-up {
    animation: fadeInUp 0.9s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .hero-v3__lower {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .hero-v3__label-wrap,
    .hero-v3__scroll,
    .hero-v3__geo {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-v3__upper {
        padding: 7.5rem 1.2rem 0 1.2rem;
    }

    .hero-v3__lower {
        padding: 2rem 1.2rem 3rem 1.2rem;
    }

    .hero-v3__ja {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .hero-v3__en {
        font-size: clamp(4rem, 20vw, 6rem);
    }

    .hero-v3__copy-line {
        font-size: clamp(1.8rem, 7.4vw, 2.8rem);
    }

    #hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-v3__btn {
        width: 100%;
    }
}

/* =========================================================
   Hero v3 : 下部メタ情報（座標 + 年号）
   ---------------------------------------------------------
   目的:
   - ヒーロー下部に「緯度」「経度」「© 2026 wasedrive.」を置く
   - スマホではクマやチャットボットとかぶりにくい位置へ逃がす
   ========================================================= */


/* ---------------------------------------------------------
   ヒーロー全体を absolute 配置の基準にする
   --------------------------------------------------------- */
.hero-v3 {
    position: relative;
}


/* ---------------------------------------------------------
   ヒーロー下部の情報エリア全体
   - 左右に余白を取りつつ
   - 下辺に沿って配置する
   - 中央に座標、右側にコピーライトを置く前提
   --------------------------------------------------------- */
.hero-v3__meta {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
    z-index: 3;

    /* 3カラム:
       [左の余白] [中央の座標] [右のコピーライト] */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;

    /* クリック操作を邪魔しない */
    pointer-events: none;
}


/* ---------------------------------------------------------
   座標2つをまとめるエリア
   中央列に置く
   --------------------------------------------------------- */
.hero-v3__coords {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    min-width: 0;
}


/* ---------------------------------------------------------
   緯度・経度それぞれの文字見た目
   - 小さめ
   - 少しメカっぽい雰囲気
   --------------------------------------------------------- */
.hero-v3__coord {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   右下のコピーライト
   右端寄せにする
   --------------------------------------------------------- */
.hero-v3__copyright {
    grid-column: 3;
    justify-self: end;
    margin: 0;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   もし古い hero-v3__geo が残っていても非表示にする
   （新しい meta 表示に統一するための保険）
   --------------------------------------------------------- */
.hero-v3__geo {
    display: none !important;
}


/* ---------------------------------------------------------
   画面幅が少し狭いとき
   - 全体余白を少し縮める
   - 座標の文字間隔も少し狭める
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-v3__meta {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1rem;
    }

    .hero-v3__coords {
        gap: 1.4rem;
    }

    .hero-v3__coord,
    .hero-v3__copyright {
        font-size: 0.64rem;
    }
}


/* ---------------------------------------------------------
   スマホ用
   ---------------------------------------------------------
   目的:
   - クマのキャラやチャットボットが右下に来るので、
     コピーライトは左下へ逃がす
   - 座標は上に小さく出す
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-v3__meta {
        left: 1rem;
        right: 1rem;
        bottom: 0.75rem;

        /* スマホでは自由配置しやすいように block に変更 */
        display: block;
        position: absolute;
    }

    /* 座標は上側にコンパクト表示 */
    .hero-v3__coords {
        display: flex;
        justify-content: center;
        gap: 0.8rem;
        margin-bottom: 0.35rem;
        flex-wrap: wrap;
    }

    .hero-v3__coord {
        font-size: 0.58rem;
    }

    /* コピーライトは左下に固定
       → クマや閉じるボタンとかぶりにくくする */
    .hero-v3__copyright {
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 0;
        font-size: 0.58rem;
        justify-self: auto;
    }
}

/* =========================================================
   Hero v3 : 円形スクロールインジケーター
   ---------------------------------------------------------
   目的:
   - 円形のスクロール表示に置き換える
   - 円周上の文字が回転して動いて見えるようにする
   - チャットボットとかぶりにくい位置へ逃がす
   ========================================================= */


/* ---------------------------------------------------------
   .hero-v3 自体を基準に配置できるようにする
   これがあると、中の absolute 要素がヒーロー基準で置ける
   --------------------------------------------------------- */
.hero-v3 {
    position: relative;
}


/* ---------------------------------------------------------
   下段エリアも relative にしておく
   円形スクロールを hero-v3__lower の中で微調整しやすくするため
   --------------------------------------------------------- */
.hero-v3__lower {
    position: relative;
}


/* ---------------------------------------------------------
   スクロール表示の外側コンテナ
   right / bottom で右下寄せにする
   ただしチャットボットとぶつかるので、少し左に逃がしている
   right: 190px; がそのための調整値
   --------------------------------------------------------- */
.hero-v3__scroll {
    position: absolute;
    right: 190px;
    bottom: 24px;
    z-index: 6;
}


/* ---------------------------------------------------------
   円そのもののクリック領域
   aタグなので、クリックすると次のセクションへ飛べる
   width / height は円の見た目サイズ
   --------------------------------------------------------- */
.hero-v3__scroll-circle {
    position: relative;
    display: block;
    width: 112px;
    height: 112px;
    text-decoration: none;
}


/* ---------------------------------------------------------
   円のガイドリング
   ::before で疑似要素の円を描いている
   inset を使って少し内側にリングを作る
   --------------------------------------------------------- */
.hero-v3__scroll-circle::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 9999px;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.08);
}


/* ---------------------------------------------------------
   円周文字を描く SVG 全体
   これ自体を回転させることで、
   「文字が円周上をぐるぐる回ってる」ように見せる
   --------------------------------------------------------- */
.hero-v3__scroll-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;

    /* 12秒で1周、ずっと回り続ける */
    animation: heroV3ScrollSpin 12s linear infinite;
}


/* ---------------------------------------------------------
   円周上の文字デザイン
   fill は SVG text の文字色
   letter-spacing を広めにすると雰囲気が出やすい
   --------------------------------------------------------- */
.hero-v3__scroll-ring-text {
    fill: rgba(148, 163, 184, 0.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   円の中央に置く矢印
   今回は ↓ を中央に表示
   ここを • にしたり、SCROLL にしたりもできる
   --------------------------------------------------------- */
.hero-v3__scroll-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #06b6d4;
    font-size: 1.25rem;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.35);
}


/* ---------------------------------------------------------
   回転アニメーション本体
   SVG全体を0度→360度に回す
   --------------------------------------------------------- */
@keyframes heroV3ScrollSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ---------------------------------------------------------
   タブレット〜スマホ用調整
   右下だとチャットボットとぶつかりやすいので、
   画面が狭いときは左下へ移動する
   サイズも少し小さくする
   --------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-v3__scroll {
        left: 16px;
        right: auto;
        bottom: 16px;
    }

    .hero-v3__scroll-circle {
        width: 88px;
        height: 88px;
    }

    .hero-v3__scroll-circle::before {
        inset: 12px;
    }

    .hero-v3__scroll-ring-text {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .hero-v3__scroll-center {
        font-size: 1rem;
    }
}


/* ---------------------------------------------------------
   アニメーション軽減設定
   OS側で「動きを減らす」が有効な人向け
   その場合は回転を止める
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-v3__scroll-svg {
        animation: none;
    }
}

/* =========================================================
   Hero v3 : 座標 + 年号表示
   ---------------------------------------------------------
   目的:
   - いま1行で出している緯度経度を分離する
   - 右端に © 2026 wasedrive. を追加する
   - スクショみたいな「下辺に情報が並ぶ感じ」に寄せる
   - 文字同士の重なりを防ぐ
   ========================================================= */


/* ---------------------------------------------------------
   ヒーロー下端の情報帯
   3カラム構成にして、
   - 真ん中に座標
   - 右端にコピーライト
   を置く
   --------------------------------------------------------- */
.hero-v3__meta {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;

    pointer-events: none;
    /* クリックを邪魔しない */
}


/* ---------------------------------------------------------
   座標2つをまとめる箱
   真ん中の列に固定する
   --------------------------------------------------------- */
.hero-v3__coords {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    min-width: 0;
}


/* ---------------------------------------------------------
   緯度・経度 それぞれの見た目
   スクショっぽく、細め・小さめ・少し無機質にする
   --------------------------------------------------------- */
.hero-v3__coord {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   右端の年号・コピーライト表記
   右側に寄せる
   --------------------------------------------------------- */
.hero-v3__copyright {
    grid-column: 3;
    justify-self: end;
    margin: 0;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}


/* ---------------------------------------------------------
   もし古い hero-v3__geo の見た目が残っていても、
   新構成では使わないので非表示にしておく保険
   --------------------------------------------------------- */
.hero-v3__geo {
    display: none !important;
}


/* ---------------------------------------------------------
   タブレット以下
   横幅が狭くなると座標とコピーライトが近づくので、
   少し上に上げて余裕を作る
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-v3__meta {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1rem;
    }

    .hero-v3__coords {
        gap: 1.4rem;
    }

    .hero-v3__coord,
    .hero-v3__copyright {
        font-size: 0.64rem;
    }
}


/* ---------------------------------------------------------
   スマホでは情報量が多くて窮屈になりやすいので
   2段にする
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-v3__meta {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.45rem;
        bottom: 5.3rem;
        /* 下のUIとかぶりにくくする */
    }

    .hero-v3__coords {
        grid-column: auto;
        flex-wrap: wrap;
        gap: 0.8rem 1.2rem;
    }

    .hero-v3__copyright {
        grid-column: auto;
        justify-self: center;
    }
}

/* =========================================================
   2段ヘッダー化
   ---------------------------------------------------------
   目的:
   - ヘッダーを1段から2段へ変更する
   - 上段: ロゴ + コントロール + CTA
   - 下段: ナビメニュー
   - いまの hero-v3 の余白を活かしつつ、
     ヘッダーが高くなった分だけヒーロー開始位置を少し下げる
   ========================================================= */


/* ---------------------------------------------------------
   ヘッダー全体
   - ダーク背景
   - 半透明 + blur
   - 下に細い境界線
   --------------------------------------------------------- */
.site-header-two-row {
    background: rgba(2, 8, 23, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* ---------------------------------------------------------
   上段
   - CTAが乗る段
   --------------------------------------------------------- */
.site-header-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* ---------------------------------------------------------
   下段
   - ナビ段
   --------------------------------------------------------- */
.site-header-bottom {
    background: rgba(255, 255, 255, 0.015);
}


/* ---------------------------------------------------------
   下段ナビリンク
   --------------------------------------------------------- */
.site-header-nav-link {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.site-header-nav-link:hover {
    color: #06b6d4;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   テーマ切替ボタン
   - いまの dark ヘッダーに馴染むよう調整
   --------------------------------------------------------- */
.site-header-two-row #themeToggle {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-header-two-row #themeToggle:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   文字サイズ切替の箱
   --------------------------------------------------------- */
.site-header-two-row #fontSizeControls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


/* ---------------------------------------------------------
   文字サイズ切替ボタン
   --------------------------------------------------------- */
.site-header-two-row #fontSizeControls button {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #ffffff;
    border-radius: 0.45rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* ---------------------------------------------------------
   文字サイズボタンの active 状態
   ---------------------------------------------------------
   - 現在選択中の倍率だけ、シアン系に光らせる
   - JS 側で .is-active と aria-pressed="true" を付ける
   --------------------------------------------------------- */
.site-header-two-row #fontSizeControls button.is-active,
.site-header-two-row #fontSizeControls button[aria-pressed="true"] {
    background: rgba(6, 182, 212, 0.16);
    border-color: rgba(34, 211, 238, 0.88);
    color: #ffffff;
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.20),
        0 0 14px rgba(6, 182, 212, 0.18);
}

.site-header-two-row #fontSizeControls button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   2段ヘッダーになって高さが増えるので、
   ヒーローの上余白を少し増やす
   これで「WASEDRIVE」がヘッダーに近づきすぎない
   --------------------------------------------------------- */
.hero-v3__upper {
    padding-top: 10.5rem;
}


/* ---------------------------------------------------------
   タブレット以下
   - 2段目の nav は hidden md:block なので自動で消える
   - 上段だけ残す
   - ロゴと右側要素が窮屈になりすぎないよう少し詰める
   --------------------------------------------------------- */
@media (max-width: 767px) {
    .site-header-two-row .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-header-two-row #themeToggle {
        padding: 0.48rem 0.8rem;
        font-size: 0.76rem;
    }

    .site-header-two-row #fontSizeControls button {
        padding: 0.32rem 0.45rem;
        font-size: 0.7rem;
    }

    /* モバイルでは2段目が消えるぶん、ヒーロー余白は少し戻す */
    .hero-v3__upper {
        padding-top: 8.2rem;
    }
}


/* ---------------------------------------------------------
   少し広い画面だけ微調整
   CTA群が窮屈なら gap を少し縮める
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .site-header-top .container {
        gap: 1rem;
    }
}

/* =========================================================
   Hero v3 : 上部の流れる英文タイポグラフィ（空白対策版）
   ---------------------------------------------------------
   目的:
   - 右側に空白が見える問題を解消する
   - 1セットを長くし、それを2グループ完全複製してループさせる
   - サイズ感はヘッダー案内と同程度のまま維持する
   ========================================================= */


/* ---------------------------------------------------------
   流れる文字全体の箱
   - はみ出した部分は隠す
   - 「次世代の、AI学習塾」の上に自然に入る余白
   --------------------------------------------------------- */
.hero-v3__ticker {
    width: 100%;
    overflow: hidden;
    margin: 0.9rem 0 0.85rem;
    pointer-events: none;
}


/* ---------------------------------------------------------
   アニメーションで横に流す本体
   - 中には「同じ内容のグループ」が2つ入る
   - そのため、-50% 動かすと綺麗にループする
   --------------------------------------------------------- */
.hero-v3__ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: heroV3TickerLoop 36s linear infinite;
}


/* ---------------------------------------------------------
   1グループぶん
   - これを2つ並べる
   - gap で単語の間隔を取る
   --------------------------------------------------------- */
.hero-v3__ticker-group {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    flex: 0 0 auto;
    padding-right: 2.2rem;
}


/* ---------------------------------------------------------
   個々の英文
   - ヘッダー案内と同じくらいの小さめサイズ
   - 主役ではないので薄めの白
   --------------------------------------------------------- */
.hero-v3__ticker-text {
    flex: 0 0 auto;
    white-space: nowrap;

    font-size: 0.875rem;
    /* ヘッダー案内くらい */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.40);
}


/* ---------------------------------------------------------
   ループアニメーション
   - トラック全体の半分まで動かす
   - 前半グループと後半グループが同一なので継ぎ目が消える
   --------------------------------------------------------- */
@keyframes heroV3TickerLoop {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* ---------------------------------------------------------
   ホバー中だけ止めたい場合
   - 不要なら消してOK
   --------------------------------------------------------- */
.hero-v3__ticker:hover .hero-v3__ticker-track {
    animation-play-state: paused;
}


/* ---------------------------------------------------------
   タブレット以下
   - 少しだけ小さくする
   - 間隔も少し詰める
   --------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-v3__ticker {
        margin: 0.75rem 0 0.7rem;
    }

    .hero-v3__ticker-group {
        gap: 1.8rem;
        padding-right: 1.8rem;
    }

    .hero-v3__ticker-text {
        font-size: 0.78rem;
        letter-spacing: 0.05em;
    }
}


/* ---------------------------------------------------------
   スマホ
   - 読みやすさ優先で少し遅くする
   - サイズも少しだけ下げる
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-v3__ticker {
        margin: 0.65rem 0 0.65rem;
    }

    .hero-v3__ticker-track {
        animation-duration: 42s;
    }

    .hero-v3__ticker-group {
        gap: 1.4rem;
        padding-right: 1.4rem;
    }

    .hero-v3__ticker-text {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }
}


/* ---------------------------------------------------------
   動きを減らす設定の人向け
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-v3__ticker-track {
        animation: none;
    }
}

/* =========================
   Online Support Section
   目的:
   - 24H自習室と季節講習の間に入る橋渡しセクション
   - 「オンライン授業」ではなく
     「コーチング・面談・専用タブレットによる伴走」を見せる
========================= */

#online-support .online-support-card,
#online-support .online-support-mini,
#online-support .online-support-bridge,
#online-support .online-support-chip {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#online-support .online-support-card:hover,
#online-support .online-support-mini:hover,
#online-support .online-support-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

#online-support .online-support-highlight {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#online-support .online-support-card-wide {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);
}

#online-support .online-support-bridge {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

/* Dark mode */
html[data-theme="dark"] #online-support {
    background: #0f172a !important;
    border-color: #1f2937 !important;
}

html[data-theme="dark"] #online-support .online-support-title,
html[data-theme="dark"] #online-support .online-support-card-title,
html[data-theme="dark"] #online-support .online-support-bridge p {
    color: #f8fafc !important;
}

html[data-theme="dark"] #online-support .online-support-kicker {
    color: #67e8f9 !important;
}

html[data-theme="dark"] #online-support .online-support-lead {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #online-support .online-support-text,
html[data-theme="dark"] #online-support .online-support-card-text,
html[data-theme="dark"] #online-support .online-support-mini,
html[data-theme="dark"] #online-support .online-support-mini ul,
html[data-theme="dark"] #online-support .online-support-mini p {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #online-support .online-support-card,
html[data-theme="dark"] #online-support .online-support-mini,
html[data-theme="dark"] #online-support .online-support-bridge,
html[data-theme="dark"] #online-support .online-support-chip {
    background-color: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] #online-support .online-support-card-wide {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
}

html[data-theme="dark"] #online-support .online-support-chip {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] #online-support .online-support-highlight {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-color: rgba(103, 232, 249, 0.12) !important;
}

/* =========================
   Pricing Section V2
   目的:
   - スクショ寄りのダークトーン価格表に更新
   - 上段3カード + 下段スタディスペース会員カード
   - 既存の #pricing スタイルに足す形で安全に上書き
========================= */

.pricing-v2-section {
    background: #1f2d45;
    padding-inline: 0;
}

.pricing-v2-frame {
    position: relative;
    background:
        linear-gradient(180deg, rgba(5, 16, 40, 0.96), rgba(7, 18, 43, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow:
        0 30px 80px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pricing-v2-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0.45;
}

.pricing-v2-orb-cyan {
    width: 220px;
    height: 220px;
    left: 8%;
    top: 6%;
    background: rgba(6, 182, 212, 0.16);
}

.pricing-v2-orb-orange {
    width: 220px;
    height: 220px;
    right: 10%;
    bottom: 8%;
    background: rgba(249, 115, 22, 0.12);
}

.pricing-v2-dot {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2px solid rgba(34, 211, 238, 0.85);
    box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.06);
}

/* =========================
   上段プランカード
========================= */
.pricing-v2-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.75rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(8, 17, 39, 0.96), rgba(10, 20, 43, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pricing-v2-plan-card--advance {
    transform: translateY(-10px);
}

.pricing-v2-plan-label {
    margin: 0 0 0.65rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: #dbeafe;
}

.pricing-v2-plan-title {
    margin: 0 0 1rem;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
}

.pricing-v2-price-wrap {
    margin-bottom: 1.25rem;
}

.pricing-v2-price {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
}

.pricing-v2-price-unit {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 700;
}

.pricing-v2-feature-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.pricing-v2-feature-list li {
    position: relative;
    padding-left: 1.2rem;
    color: #dbeafe;
    font-size: 0.92rem;
    line-height: 1.5;
    font-weight: 600;
}

.pricing-v2-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #22d3ee;
    font-weight: 900;
}

.pricing-v2-feature-list--orange li::before {
    color: #f97316;
}

.pricing-v2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    padding: 0.9rem 1.25rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.95rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
}

.pricing-v2-button:hover {
    transform: translateY(-2px);
}

.pricing-v2-button--ghost {
    border: 1.5px solid rgba(255, 255, 255, 0.76);
    color: #ffffff;
    background: transparent;
}

.pricing-v2-button--cyan {
    color: #ffffff;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    box-shadow: 0 14px 34px rgba(6, 182, 212, 0.26);
}

.pricing-v2-button--orange {
    color: #f97316;
    border: 1.5px solid rgba(249, 115, 22, 0.95);
    background: transparent;
}

/* バッジ類 */
.pricing-v2-recommended {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.pricing-v2-premium-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.28rem 0.55rem;
    border-radius: 9999px;
    background: rgba(249, 115, 22, 0.16);
    color: #fb923c;
    font-size: 0.66rem;
    font-weight: 800;
}

/* =========================
   下段：自習室会員
========================= */
.pricing-v2-member-label {
    margin: 0 0 0.9rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: #dbeafe;
}

.pricing-v2-member-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.15;
    font-weight: 900;
    color: #ffffff;
}

.pricing-v2-member-title-sub {
    font-size: 0.78em;
}

.pricing-v2-member-copy {
    margin: 0 0 1.2rem;
    color: #dbeafe;
    line-height: 1.9;
    font-size: 0.96rem;
    max-width: 44rem;
}

.pricing-v2-member-features {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.pricing-v2-member-features li {
    position: relative;
    padding-left: 1rem;
    color: #f8fafc;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 600;
}

.pricing-v2-member-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #22c55e;
    font-weight: 900;
}

.pricing-v2-member-price-box {
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.pricing-v2-member-price-label {
    margin: 0 0 0.35rem;
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 700;
}

.pricing-v2-member-price {
    margin: 0;
    color: #ffffff;
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 900;
}

.pricing-v2-member-price-unit {
    margin: 0.3rem 0 0;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
}

.pricing-v2-member-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: 0.25rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-v2-member-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.12);
}

.pricing-v2-note {
    margin: 1rem 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.6;
}

/* 既存バッジを今回仕様に少し寄せる */
.study-space-member-badge {
    background: linear-gradient(135deg, #991b1b, #dc2626);
    color: #ffffff;
    border: none;
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.22);
}

.study-space-member-badge-top {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    opacity: 0.9;
}

.study-space-member-badge-main {
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.1;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width: 1024px) {
    .pricing-v2-plan-card--advance {
        transform: none;
    }

    .pricing-v2-member-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pricing-v2-frame {
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 1.5rem;
    }

    .pricing-v2-plan-card,
    .study-space-member-card {
        padding: 1.25rem;
    }

    .pricing-v2-plan-title {
        font-size: 1.7rem;
    }

    .pricing-v2-price {
        font-size: 2.15rem;
    }

    .pricing-v2-member-title {
        font-size: 1.75rem;
    }

    .pricing-v2-member-features {
        grid-template-columns: 1fr;
    }

    .pricing-v2-member-price {
        font-size: 2rem;
    }

    .pricing-v2-recommended {
        top: -10px;
        font-size: 0.56rem;
    }
}

/* =========================
   ダークモードでも見た目維持
   備考:
   - #pricing 全体に既存ダークモード指定があるため、
     今回は V2専用クラスでさらに固定する
========================= */
html[data-theme="dark"] .pricing-v2-frame,
html[data-theme="dark"] .pricing-v2-plan-card,
html[data-theme="dark"] .study-space-member-card {
    background-color: transparent;
}

html[data-theme="dark"] .pricing-v2-button--ghost {
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
}

html[data-theme="dark"] .pricing-v2-member-cta {
    background: #f8fafc;
    color: #0f172a !important;
}

/* =========================================================
   Hero直後 横スクロール3パネル
   2〜4枚目専用
========================================================= */

.wd-horizontal-stage {
    position: relative;
    background:
        radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.12), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(249, 115, 22, 0.12), transparent 24%),
        linear-gradient(180deg, #020617 0%, #081223 46%, #030712 100%);
    overflow: clip;
}

.wd-horizontal-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.wd-horizontal-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.wd-horizontal-panel {
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8.5rem 2rem 4rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.wd-horizontal-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.05), transparent 18%),
        radial-gradient(circle at 18% 82%, rgba(255, 255, 255, 0.04), transparent 20%);
    pointer-events: none;
}

.wd-horizontal-panel-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.wd-horizontal-copy {
    color: #f8fafc;
}

.wd-horizontal-kicker {
    margin: 0 0 1rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #67e8f9;
}

.wd-horizontal-title {
    margin: 0;
    font-size: clamp(2.3rem, 5.4vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: #ffffff;
}

.wd-horizontal-text {
    margin: 1.4rem 0 0;
    max-width: 40rem;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.95;
    color: #cbd5e1;
}

.wd-horizontal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.wd-horizontal-tags span {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wd-horizontal-visual {
    position: relative;
}

.wd-horizontal-card {
    position: relative;
    min-height: 470px;
    border-radius: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92));
    box-shadow:
        0 28px 80px rgba(2, 6, 23, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.wd-horizontal-card--glow {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.22), transparent 24%),
        radial-gradient(circle at 75% 65%, rgba(249, 115, 22, 0.14), transparent 20%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92));
}

.wd-horizontal-lines {
    width: min(420px, 78%);
    display: grid;
    gap: 1rem;
}

.wd-horizontal-lines span {
    display: block;
    height: 70px;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    position: relative;
    overflow: hidden;
}

.wd-horizontal-lines span::after,
.wd-grid-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: translateX(-100%);
    animation: wdHorizontalShimmer 3.6s infinite;
}

.wd-horizontal-card--grid {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.wd-grid-box {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    min-height: 120px;
}

.wd-grid-box--lg {
    grid-row: span 2;
    min-height: 100%;
    background:
        radial-gradient(circle at 25% 25%, rgba(6, 182, 212, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.wd-grid-box--wide {
    grid-column: span 1;
}

.wd-horizontal-card--chart {
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92));
}

.wd-chart-bars {
    width: min(420px, 78%);
    height: 260px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.9rem;
}

.wd-chart-bars span {
    flex: 1;
    border-radius: 1rem 1rem 0.45rem 0.45rem;
    background: linear-gradient(180deg, #67e8f9 0%, #38bdf8 42%, #f97316 100%);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.18);
}

.wd-horizontal-metric {
    position: absolute;
    left: 1.5rem;
    bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wd-horizontal-metric strong {
    font-size: clamp(3.4rem, 8vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.16);
}

.wd-horizontal-metric small {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #94a3b8;
}

.wd-horizontal-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    z-index: 3;
    pointer-events: none;
    padding: 0 2rem;
}

.wd-horizontal-overlay-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
}

.wd-horizontal-steps {
    display: inline-flex;
    gap: 0.7rem;
    align-items: center;
}

.wd-horizontal-step {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.48);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: 0.25s ease;
}

.wd-horizontal-step.is-active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.32);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.30), rgba(249, 115, 22, 0.24));
    transform: scale(1.06);
}

.wd-horizontal-progress-wrap {
    width: min(420px, 48vw);
    margin-left: auto;
}

.wd-horizontal-progress-label {
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #94a3b8;
}

.wd-horizontal-progress {
    height: 4px;
    width: 100%;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.wd-horizontal-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 45%, #f97316 100%);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.32);
}

@keyframes wdHorizontalShimmer {
    100% {
        transform: translateX(100%);
    }
}

html[data-theme="light"] .wd-horizontal-stage {
    background:
        radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.10), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(249, 115, 22, 0.10), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 48%, #f7fafc 100%);
}

html[data-theme="light"] .wd-horizontal-title {
    color: #0f172a;
}

html[data-theme="light"] .wd-horizontal-text {
    color: #334155;
}

html[data-theme="light"] .wd-horizontal-tags span,
html[data-theme="light"] .wd-horizontal-step {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .wd-horizontal-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.96));
}

html[data-theme="light"] .wd-grid-box,
html[data-theme="light"] .wd-horizontal-lines span {
    border-color: rgba(148, 163, 184, 0.18);
}

@media (max-width: 1024px) {
    .wd-horizontal-panel-inner {
        grid-template-columns: 1fr;
    }

    .wd-horizontal-card {
        min-height: 380px;
    }

    .wd-horizontal-overlay-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .wd-horizontal-progress-wrap {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .wd-horizontal-stage {
        height: auto !important;
    }

    .wd-horizontal-sticky {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .wd-horizontal-track {
        display: block;
        transform: none !important;
    }

    .wd-horizontal-panel {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: auto;
        padding: 6.5rem 1.2rem 3rem;
    }

    .wd-horizontal-card {
        min-height: 300px;
    }

    .wd-horizontal-overlay {
        position: static;
        padding: 0 1.2rem 1.6rem;
        pointer-events: none;
    }

    .wd-horizontal-step {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   2枚目：保護者のお悩みスライド風パネル
========================================================= */

.wd-horizontal-panel--guardian {
    padding-top: 8rem;
    padding-bottom: 5rem;
}

.wd-horizontal-panel-inner--guardian {
    grid-template-columns: 1fr;
}

.wd-guardian-slide {
    position: relative;
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 42px) clamp(24px, 4vw, 52px) 50px;
    border-radius: 0;
    background: #c9d9e7;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.28);
    overflow: visible;
}

.wd-guardian-slide .wd-horizontal-kicker {
    color: #173b7a;
    margin-bottom: 1rem;
}

.wd-guardian-title {
    margin: 0;
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 900;
    color: #173b7a;
}

.wd-guardian-divider {
    width: 100%;
    height: 2px;
    margin: 0.9rem 0 2.1rem;
    background: rgba(23, 59, 122, 0.85);
}

.wd-guardian-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.25fr;
    gap: clamp(26px, 4vw, 48px);
    align-items: end;
}

.wd-guardian-left {
    display: flex;
    justify-content: center;
    align-items: end;
    min-height: 320px;
}

.wd-guardian-illust {
    width: min(340px, 100%);
}

.wd-guardian-illust svg {
    display: block;
    width: 100%;
    height: auto;
}

.wd-guardian-right {
    display: grid;
    gap: 1.35rem;
    align-content: center;
}

.wd-guardian-bubble {
    background: #ffffff;
    color: #173b7a;
    border-radius: 20px;
    padding: 1.15rem 1.4rem;
    text-align: center;
    font-size: clamp(1rem, 1.25vw, 1.45rem);
    line-height: 1.55;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(23, 59, 122, 0.08);
}

.wd-guardian-arrow {
    position: absolute;
    left: 50%;
    bottom: -44px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 46px solid transparent;
    border-right: 46px solid transparent;
    border-top: 44px solid #c9d9e7;
}

/* ライトテーマ時も見た目を保つ */
html[data-theme="light"] .wd-guardian-slide {
    background: #c9d9e7;
}

html[data-theme="light"] .wd-guardian-title,
html[data-theme="light"] .wd-guardian-slide .wd-horizontal-kicker,
html[data-theme="light"] .wd-guardian-bubble {
    color: #173b7a;
}

/* ダークテーマでもスライド感を優先して固定色 */
html[data-theme="dark"] .wd-guardian-slide {
    background: #c9d9e7;
}

html[data-theme="dark"] .wd-guardian-title,
html[data-theme="dark"] .wd-guardian-slide .wd-horizontal-kicker,
html[data-theme="dark"] .wd-guardian-bubble {
    color: #173b7a;
}

@media (max-width: 980px) {
    .wd-guardian-layout {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .wd-guardian-left {
        min-height: auto;
    }

    .wd-guardian-illust {
        width: min(260px, 70%);
    }

    .wd-guardian-arrow {
        border-left-width: 34px;
        border-right-width: 34px;
        border-top-width: 32px;
        bottom: -32px;
    }
}

@media (max-width: 768px) {
    .wd-guardian-slide {
        padding: 26px 18px 38px;
    }

    .wd-guardian-title {
        font-size: 1.7rem;
    }

    .wd-guardian-divider {
        margin: 0.8rem 0 1.3rem;
    }

    .wd-guardian-right {
        gap: 1rem;
    }

    .wd-guardian-bubble {
        padding: 0.95rem 1rem;
        font-size: 0.98rem;
        border-radius: 16px;
    }

    .wd-guardian-arrow {
        display: none;
    }
}

/* =========================================================
   3枚目：家で勉強できない中高一貫校生 スライド風パネル
========================================================= */

.wd-horizontal-panel--student {
    padding-top: 8rem;
    padding-bottom: 5rem;
}

.wd-horizontal-panel-inner--student {
    grid-template-columns: 1fr;
}

.wd-student-slide {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 42px) clamp(22px, 4vw, 44px) clamp(26px, 3vw, 34px);
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.24);
    color: #0f172a;
    overflow: hidden;
}

.wd-student-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.4rem;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 900;
    line-height: 1.3;
    color: #0f172a;
}

.wd-student-label-bar {
    display: inline-block;
    width: 8px;
    height: 56px;
    background: #f27a3f;
    flex: 0 0 auto;
}

.wd-student-main {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: end;
    margin-bottom: 1.2rem;
}

.wd-student-copy {
    align-self: center;
    padding-left: clamp(4px, 0.6vw, 10px);
}

.wd-student-catch {
    margin: 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(2.3rem, 5vw, 4.35rem);
    line-height: 1.38;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: #111111;
}

.wd-student-catch span {
    display: block;
}

.wd-student-underline {
    width: min(430px, 92%);
    height: 10px;
    margin-top: -4px;
    margin-left: 0.4rem;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255, 154, 166, 0.94) 0%,
            rgba(255, 145, 152, 0.88) 34%,
            rgba(255, 132, 145, 0.92) 68%,
            rgba(255, 154, 166, 0.84) 100%);
    filter: blur(0.2px);
    opacity: 0.96;
    transform: rotate(-0.8deg);
}

.wd-student-photo-area {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

.wd-student-photo-frame {
    position: relative;
    width: min(460px, 100%);
    height: 320px;
    background: linear-gradient(180deg, #fbfbfb 0%, #f8f8f8 100%);
    overflow: hidden;
}

.wd-student-photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(15, 23, 42, 0.03), transparent 22%),
        linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}

.wd-student-figure {
    position: absolute;
    right: 92px;
    bottom: 74px;
    width: 138px;
    height: 188px;
}

.wd-student-head {
    position: absolute;
    top: 18px;
    left: 34px;
    width: 70px;
    height: 82px;
    background: #f8e4d8;
    border-radius: 48% 48% 46% 46%;
    z-index: 2;
}

.wd-student-hair {
    position: absolute;
    top: 0;
    left: 24px;
    width: 92px;
    height: 120px;
    background: #3d2c2a;
    border-radius: 44px 44px 22px 22px;
    z-index: 1;
}

.wd-student-hair::before,
.wd-student-hair::after {
    content: "";
    position: absolute;
    top: 54px;
    width: 18px;
    height: 80px;
    background: #3d2c2a;
    border-radius: 999px;
}

.wd-student-hair::before {
    left: 4px;
}

.wd-student-hair::after {
    right: 4px;
}

.wd-student-body {
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 114px;
    height: 108px;
    background: #2b3559;
    border-radius: 18px 18px 0 0;
    z-index: 0;
}

.wd-student-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    width: 46px;
    height: 24px;
    background: #ffffff;
    border-radius: 0 0 18px 18px;
}

.wd-student-desk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: linear-gradient(180deg, #f0e6dc 0%, #eadfd5 100%);
}

.wd-student-book {
    position: absolute;
    right: 112px;
    bottom: 22px;
    width: 112px;
    height: 22px;
    background: #ffffff;
    border-radius: 2px 8px 8px 2px;
    transform: perspective(120px) rotateX(60deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.wd-student-pen {
    position: absolute;
    right: 198px;
    bottom: 34px;
    width: 52px;
    height: 4px;
    background: #b46b55;
    border-radius: 999px;
    transform: rotate(18deg);
}

.wd-student-ng {
    position: absolute;
    right: 62px;
    top: 78px;
    font-size: 4.4rem;
    line-height: 1;
    font-weight: 400;
    color: #f59ab2;
    opacity: 0.95;
}

.wd-student-points {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.4rem;
}

.wd-student-point {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.95rem;
    align-items: start;
}

.wd-student-num {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef7b3a;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.wd-student-point p {
    margin: 0;
    padding-top: 0.25rem;
    font-size: clamp(1rem, 1.18vw, 1.32rem);
    line-height: 1.85;
    font-weight: 800;
    color: #111827;
}

.wd-student-red {
    color: #d6453f;
}

.wd-student-point--long p {
    font-size: clamp(0.96rem, 1.08vw, 1.18rem);
    line-height: 1.85;
}

html[data-theme="light"] .wd-student-slide,
html[data-theme="dark"] .wd-student-slide {
    background: #ffffff;
    color: #0f172a;
}

html[data-theme="light"] .wd-student-label,
html[data-theme="light"] .wd-student-point p,
html[data-theme="light"] .wd-student-catch,
html[data-theme="dark"] .wd-student-label,
html[data-theme="dark"] .wd-student-point p,
html[data-theme="dark"] .wd-student-catch {
    color: #111827;
}

html[data-theme="light"] .wd-student-red,
html[data-theme="dark"] .wd-student-red {
    color: #d6453f;
}

@media (max-width: 1024px) {
    .wd-student-main {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        align-items: start;
    }

    .wd-student-photo-area {
        justify-content: center;
    }

    .wd-student-photo-frame {
        width: min(420px, 100%);
    }
}

@media (max-width: 768px) {
    .wd-student-slide {
        padding: 22px 16px 24px;
    }

    .wd-student-label {
        gap: 0.8rem;
        margin-bottom: 1rem;
        font-size: 1.05rem;
    }

    .wd-student-label-bar {
        width: 6px;
        height: 40px;
    }

    .wd-student-catch {
        font-size: 2rem;
        line-height: 1.5;
    }

    .wd-student-underline {
        width: min(280px, 88%);
        height: 8px;
    }

    .wd-student-photo-frame {
        height: 250px;
    }

    .wd-student-figure {
        right: 58px;
        bottom: 54px;
        transform: scale(0.82);
        transform-origin: bottom right;
    }

    .wd-student-ng {
        right: 28px;
        top: 56px;
        font-size: 3.2rem;
    }

    .wd-student-point {
        grid-template-columns: 34px 1fr;
        gap: 0.8rem;
    }

    .wd-student-num {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .wd-student-point p,
    .wd-student-point--long p {
        padding-top: 0.12rem;
        font-size: 0.96rem;
        line-height: 1.75;
    }
}

/* =========================================================
   4枚目：成績が上がらない中高一貫校生 スライド風パネル
========================================================= */

.wd-horizontal-panel--grade {
    padding-top: 8rem;
    padding-bottom: 5rem;
}

.wd-horizontal-panel-inner--grade {
    grid-template-columns: 1fr;
}

.wd-grade-slide {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 42px) clamp(22px, 4vw, 44px) clamp(26px, 3vw, 34px);
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.24);
    color: #0f172a;
    overflow: hidden;
}

.wd-grade-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.4rem;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 900;
    line-height: 1.3;
    color: #0f172a;
}

.wd-grade-label-bar {
    display: inline-block;
    width: 8px;
    height: 56px;
    background: #f27a3f;
    flex: 0 0 auto;
}

.wd-grade-main {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: end;
    margin-bottom: 1.2rem;
}

.wd-grade-copy {
    align-self: center;
    padding-left: clamp(4px, 0.6vw, 10px);
}

.wd-grade-catch {
    margin: 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: clamp(2.3rem, 5vw, 4.35rem);
    line-height: 1.38;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: #111111;
}

.wd-grade-catch span {
    display: block;
}

.wd-grade-underline {
    width: min(440px, 94%);
    height: 10px;
    margin-top: -4px;
    margin-left: 0.4rem;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255, 154, 166, 0.94) 0%,
            rgba(255, 145, 152, 0.88) 34%,
            rgba(255, 132, 145, 0.92) 68%,
            rgba(255, 154, 166, 0.84) 100%);
    opacity: 0.96;
    transform: rotate(-0.8deg);
}

.wd-grade-photo-area {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

/* =========================================
   4枚目の右画像枠
   「困った女の子.png」を表示するための枠
========================================= */
.wd-grade-photo-frame {
    position: relative;
    width: min(470px, 100%);
    height: 318px;
    background: #f7f7f7;
    overflow: hidden;
}

/* =========================================
   4枚目の実画像そのもの
   HTMLで <img class="wd-grade-real-photo"> に付く
========================================= */
.wd-grade-real-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.wd-grade-photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.015), rgba(0, 0, 0, 0)),
        linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.10) 36%, rgba(255,255,255,0) 48%);
}

.wd-grade-fade-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 34%;
    background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.65) 70%, rgba(255,255,255,0) 100%);
}

.wd-grade-figure {
    position: absolute;
    right: 102px;
    bottom: 62px;
    width: 190px;
    height: 196px;
}

.wd-grade-head {
    position: absolute;
    top: 10px;
    left: 76px;
    width: 66px;
    height: 74px;
    background: #f7dfd2;
    border-radius: 46% 46% 48% 48%;
    z-index: 3;
}

.wd-grade-hair {
    position: absolute;
    top: 0;
    left: 52px;
    width: 104px;
    height: 106px;
    background: #3b2c2d;
    border-radius: 44px 44px 22px 22px;
    z-index: 2;
}

.wd-grade-hair::before,
.wd-grade-hair::after {
    content: "";
    position: absolute;
    top: 28px;
    width: 28px;
    height: 118px;
    background: #3b2c2d;
    border-radius: 999px;
}

.wd-grade-hair::before {
    left: -6px;
}

.wd-grade-hair::after {
    right: -6px;
}

.wd-grade-uniform {
    position: absolute;
    left: 26px;
    bottom: 0;
    width: 156px;
    height: 134px;
    background: #2c3559;
    border-radius: 18px 18px 0 0;
    z-index: 1;
}

.wd-grade-uniform::before {
    content: "";
    position: absolute;
    top: 0;
    left: 36px;
    width: 84px;
    height: 22px;
    border-top: 4px solid #f0f4ff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-radius: 0 0 18px 18px;
}

.wd-grade-arm {
    position: absolute;
    left: 18px;
    top: 96px;
    width: 132px;
    height: 28px;
    background: #2c3559;
    border-radius: 999px;
    transform: rotate(10deg);
    z-index: 4;
}

.wd-grade-desk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: #ffffff;
}

.wd-grade-book {
    position: absolute;
    right: 92px;
    bottom: 26px;
    width: 136px;
    height: 28px;
    background: #ffffff;
    border-radius: 4px 10px 10px 4px;
    transform: perspective(140px) rotateX(62deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.wd-grade-pencil {
    position: absolute;
    right: 170px;
    bottom: 78px;
    width: 66px;
    height: 6px;
    background: linear-gradient(90deg, #f4c64d 0%, #f0ad2d 76%, #d18d23 100%);
    border-radius: 999px;
    transform: rotate(58deg);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

.wd-grade-eraser {
    position: absolute;
    left: 210px;
    bottom: 24px;
    width: 34px;
    height: 18px;
    background: #8fe0ef;
    border-radius: 4px;
    box-shadow: 18px 0 0 #99e7f3, 36px 0 0 #8fe0ef;
}

.wd-grade-sharpener {
    position: absolute;
    left: 292px;
    bottom: 20px;
    width: 18px;
    height: 18px;
    background: #444b57;
    border-radius: 4px;
}

.wd-grade-points {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

.wd-grade-point {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.95rem;
    align-items: start;
}

.wd-grade-num {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef7b3a;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.wd-grade-point p {
    margin: 0;
    padding-top: 0.2rem;
    font-size: clamp(0.98rem, 1.14vw, 1.24rem);
    line-height: 1.82;
    font-weight: 800;
    color: #111827;
}

.wd-grade-red {
    color: #d6453f;
}

html[data-theme="light"] .wd-grade-slide,
html[data-theme="dark"] .wd-grade-slide {
    background: #ffffff;
    color: #0f172a;
}

html[data-theme="light"] .wd-grade-label,
html[data-theme="light"] .wd-grade-point p,
html[data-theme="light"] .wd-grade-catch,
html[data-theme="dark"] .wd-grade-label,
html[data-theme="dark"] .wd-grade-point p,
html[data-theme="dark"] .wd-grade-catch {
    color: #111827;
}

html[data-theme="light"] .wd-grade-red,
html[data-theme="dark"] .wd-grade-red {
    color: #d6453f;
}

@media (max-width: 1024px) {
    .wd-grade-main {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        align-items: start;
    }

    .wd-grade-photo-area {
        justify-content: center;
    }

    .wd-grade-photo-frame {
        width: min(430px, 100%);
    }
}

@media (max-width: 768px) {
    .wd-grade-slide {
        padding: 22px 16px 24px;
    }

    .wd-grade-label {
        gap: 0.8rem;
        margin-bottom: 1rem;
        font-size: 1.05rem;
    }

    .wd-grade-label-bar {
        width: 6px;
        height: 40px;
    }

    .wd-grade-catch {
        font-size: 2rem;
        line-height: 1.5;
    }

    .wd-grade-underline {
        width: min(290px, 88%);
        height: 8px;
    }

    .wd-grade-photo-frame {
        height: 250px;
    }

    .wd-grade-figure {
        right: 58px;
        bottom: 54px;
        transform: scale(0.82);
        transform-origin: bottom right;
    }

    .wd-grade-book {
        right: 48px;
        bottom: 24px;
        transform: perspective(120px) rotateX(62deg) scale(0.88);
        transform-origin: bottom right;
    }

    .wd-grade-pencil {
        right: 108px;
        bottom: 66px;
        transform: rotate(58deg) scale(0.86);
    }

    .wd-grade-eraser {
        left: 136px;
        bottom: 20px;
        transform: scale(0.84);
        transform-origin: left bottom;
    }

    .wd-grade-sharpener {
        left: 202px;
        bottom: 18px;
    }

    .wd-grade-point {
        grid-template-columns: 34px 1fr;
        gap: 0.8rem;
    }

    .wd-grade-num {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .wd-grade-point p {
        padding-top: 0.12rem;
        font-size: 0.95rem;
        line-height: 1.74;
    }
}

/* =========================================================
   2枚目：保護者向け 推薦入試サポート版
   写真差し替え対応
========================================================= */

.wd-guardian-title--support {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2rem, 3.6vw, 3.45rem);
    line-height: 1.22;
    letter-spacing: -0.04em;
}

.wd-guardian-layout--photo {
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
}

.wd-guardian-layout--photo .wd-guardian-left {
    min-height: auto;
    align-items: center;
}

.wd-guardian-photo-box {
    width: min(360px, 100%);
    margin-inline: auto;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(23, 59, 122, 0.12);
}

.wd-guardian-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}

.wd-guardian-layout--photo .wd-guardian-right {
    gap: 1.5rem;
}

.wd-guardian-layout--photo .wd-guardian-bubble {
    min-height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 1.2vw, 1.35rem);
    line-height: 1.5;
    padding: 1.2rem 1.5rem;
}

@media (max-width: 980px) {
    .wd-guardian-title--support {
        font-size: clamp(1.75rem, 5.6vw, 2.5rem);
        line-height: 1.28;
    }

    .wd-guardian-layout--photo {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wd-guardian-photo-box {
        width: min(300px, 72%);
    }

    .wd-guardian-layout--photo .wd-guardian-bubble {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .wd-guardian-title--support {
        font-size: 1.5rem;
        line-height: 1.35;
    }

    .wd-guardian-photo-box {
        width: min(260px, 78%);
        border-radius: 18px;
    }

    .wd-guardian-layout--photo .wd-guardian-bubble {
        font-size: 0.98rem;
        padding: 1rem 1rem;
        border-radius: 16px;
    }
}

/* =========================================================
   3枚目：資料スライド風 学習相談パネル
========================================================= */

.wd-horizontal-panel--study-support {
    padding-top: 5.8rem;
    padding-bottom: 2.8rem;
}

.wd-horizontal-panel-inner--study-support {
    grid-template-columns: 1fr;
}

.wd-study-slide {
    width: min(1120px, 100%);
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.24);
    overflow: hidden;
}

.wd-study-head {
    padding: 26px 34px 0;
}

.wd-study-point {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.wd-study-point-no {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #e6cf4a;
}

.wd-study-point-title {
    font-size: clamp(1.8rem, 3.1vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    color: #213e84;
    letter-spacing: -0.03em;
}

.wd-study-divider {
    height: 2px;
    margin-top: 14px;
    background: #314d89;
    opacity: 0.95;
}

.wd-study-intro {
    padding: 22px 34px 6px;
    text-align: center;
}

.wd-study-intro p {
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.9;
    color: #202633;
    font-weight: 500;
}

.wd-study-body {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 28px;
    align-items: start;
    padding: 20px 34px 24px;
}

.wd-study-visual {
    min-width: 0;
}

.wd-study-photo-card {
    background: #eef1f5;
    min-height: 320px;
    overflow: hidden;
}

.wd-study-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: center;
}

.wd-study-consult {
    display: flex;
    flex-direction: column;
    padding-top: 26px;
}

.wd-study-consult-title {
    align-self: center;
    min-width: min(420px, 100%);
    padding: 12px 26px;
    border: 3px solid #27395f;
    border-radius: 999px;
    background: #ffffff;
    text-align: center;
    font-size: clamp(1.4rem, 2vw, 1.95rem);
    font-weight: 900;
    color: #213e84;
    line-height: 1.2;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}

.wd-study-consult-box {
    margin-top: -14px;
    padding: 44px 30px 28px;
    border-radius: 20px;
    background: #eef1f5;
    min-height: 260px;
}

.wd-study-list {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    color: #163f87;
}

.wd-study-list li {
    margin: 0;
    padding: 8px 0;
    font-size: clamp(1.08rem, 1.6vw, 1.66rem);
    line-height: 1.65;
    font-weight: 800;
    color: #111827;
}

.wd-study-list li::marker {
    color: #214b97;
    font-size: 1.1em;
}

.wd-study-footer {
    position: relative;
    margin-top: 8px;
    background: #1f377f;
}

.wd-study-footer::before {
    content: "";
    position: absolute;
    inset: auto auto 100% 0;
    width: 100%;
    height: 44px;
    background: linear-gradient(174deg, transparent 48%, #314d89 49%, #1f377f 50%);
}

.wd-study-footer-inner {
    padding: 28px 34px 30px;
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 3rem);
    line-height: 1.25;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
}

html[data-theme="light"] .wd-study-slide,
html[data-theme="dark"] .wd-study-slide {
    background: #ffffff;
}

@media (max-width: 1024px) {
    .wd-study-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wd-study-consult {
        padding-top: 0;
    }

    .wd-study-consult-title {
        min-width: min(360px, 100%);
    }

    .wd-study-consult-box {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .wd-horizontal-panel--study-support {
        padding-top: 6.2rem;
        padding-bottom: 2rem;
    }

    .wd-study-head {
        padding: 18px 16px 0;
    }

    .wd-study-point {
        gap: 10px;
    }

    .wd-study-point-no {
        font-size: 1.35rem;
    }

    .wd-study-point-title {
        font-size: 1.45rem;
        line-height: 1.3;
    }

    .wd-study-intro {
        padding: 16px 16px 0;
    }

    .wd-study-intro p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .wd-study-body {
        padding: 16px;
    }

    .wd-study-photo {
        min-height: 240px;
    }

    .wd-study-consult-title {
        min-width: 100%;
        padding: 10px 16px;
        font-size: 1.2rem;
        border-width: 2px;
    }

    .wd-study-consult-box {
        padding: 34px 18px 18px;
        border-radius: 16px;
    }

    .wd-study-list li {
        font-size: 1rem;
        line-height: 1.6;
        padding: 6px 0;
    }

    .wd-study-footer::before {
        height: 26px;
    }

    .wd-study-footer-inner {
        padding: 20px 16px 22px;
        font-size: 1.38rem;
        line-height: 1.35;
    }
}

/* =========================================
   Dark mode fix: contact form readability
   ナイトモード時にフォーム文字が見えなくなる不具合修正
========================================= */

html[data-theme="dark"] #contact .bg-white.text-gray-800 {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

html[data-theme="dark"] #contact label {
    color: #f8fafc !important;
}

html[data-theme="dark"] #contact input,
html[data-theme="dark"] #contact select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] #contact input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #contact select option {
    background-color: #0f172a;
    color: #f8fafc;
}

html[data-theme="dark"] #contact .fa-chevron-down {
    color: #cbd5e1 !important;
}

/* 特典バッジは、あえて明るい背景のまま読みやすくする */
html[data-theme="dark"] #contact .bg-orange-50 {
    background-color: #fff7ed !important;
    color: #9a3412 !important;
    border-color: #fed7aa !important;
}

html[data-theme="dark"] #contact .bg-cyan-50 {
    background-color: #ecfeff !important;
    color: #155e75 !important;
    border-color: #a5f3fc !important;
}

html[data-theme="dark"] #contact .bg-gray-100 {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="dark"] #contact .text-red-500 {
    color: #ef4444 !important;
}

html[data-theme="dark"] #contact form .text-gray-400 {
    color: #cbd5e1 !important;
}

/* =========================================
   Dark mode fix: Access section readability
   アクセス欄のナイトモード文字消え修正
========================================= */

html[data-theme="dark"] #access {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] #access h3,
html[data-theme="dark"] #access h4,
html[data-theme="dark"] #access .text-waseBlue {
    color: #f8fafc !important;
}

html[data-theme="dark"] #access .text-gray-600 {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] #access .text-gray-500,
html[data-theme="dark"] #access .text-gray-400 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #access .border-b {
    border-color: rgba(203, 213, 225, 0.35) !important;
}

/* 住所横の「木更津駅 東口徒歩3分」バッジ */
html[data-theme="dark"] #access .bg-gray-100 {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* 右側の開校時間カード・天気カード */
html[data-theme="dark"] #access .bg-gray-50,
html[data-theme="dark"] #access .weather-card,
html[data-theme="dark"] #access .weather-stat {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-theme="dark"] #access li {
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-theme="dark"] #access iframe {
    opacity: 0.92;
}