:root {
        --bg: #f7f5f0;
        --bg-2: #f0f6ff;
        --surface: #ffffff;
        --surface-soft: #f6f1ff;
        --text: #1a2333;
        --subtext: #495972;
        --accent: #ff6b6b;
        --accent-2: #3cc2ff;
        --accent-3: #ffd166;
        --accent-4: #49d6a3;
        --shadow: 0 20px 40px rgba(33, 52, 92, 0.12);
        --radius-lg: 24px;
        --radius-md: 16px;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at 12% 8%, rgba(255, 209, 102, 0.26), transparent 35%),
          radial-gradient(circle at 90% 12%, rgba(60, 194, 255, 0.2), transparent 32%),
          linear-gradient(160deg, var(--bg), var(--bg-2));
        min-height: 100vh;
      }

      .orb {
        position: fixed;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 107, 107, 0.3), transparent 70%);
        filter: blur(2px);
        z-index: -1;
        animation: float 10s ease-in-out infinite;
      }
      .orb.one { top: 12%; left: -60px; }
      .orb.two {
        bottom: 8%;
        right: -40px;
        background: radial-gradient(circle, rgba(71, 209, 140, 0.3), transparent 65%);
        animation-delay: -4s;
      }

      .container { width: min(1120px, 92%); margin: 0 auto; }
      .section {
        /* 上下44pxだと、カード内padding(20px)と合わせて隣のカードとの間に
           136pxの余白ができ、間延びして見えた（2026-08-27 指摘）。30pxに詰めた。 */
        padding: 30px 0;
        /* content-visibility: auto は使わない（2026-08-22 に削除）。
           画面外のセクションは描画が省略され、高さが contain-intrinsic-size の
           仮の値で代用される。スクロールして描画された瞬間に本当の高さへ
           置き換わるため、その下にあるアンカーの着地位置がズレる。
           実測では #curriculum は 5,287px あるのに、未描画時は 788px と
           報告されていた。広告URL(#schedule)の着地が最大1,367pxズレていた。
           「ズレたあとにJSで直す」修正を7回重ねて毎回再発したため、原因側を消した。
           誤差はセクションが増えるほど積み上がる一方、追従処理の持ち時間は
           固定なので、コンテンツを足すたびに必ず悪化する構造だった。
           再導入する場合は、全アンカーの着地を実測で再検証すること。 */
      }

      .card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        /* 上下だけ詰める。左右24pxは読みやすさのため維持 */
        padding: 20px 24px;
        box-shadow: var(--shadow);
      }

      /* ヒーロー */
      .hero { padding: 36px 0 48px; }

      .hero-inner {
        display: grid;
        gap: 24px;
        background:
          linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.3)),
          linear-gradient(165deg, #fff1e9 0%, #fff7d6 55%, #e9f4ff 100%);
        color: #1c2a3d;
        border-radius: 28px;
        padding: 28px;
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
        animation: rise 1s ease-out both;
      }
      .hero-inner > div,
      .course-head > div {
        min-width: 0;
      }

      .hero h1 {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
        /* 2026-08-27: 少し小さくした（1.8/6.2vw/2.9rem → 1.65/5.6vw/2.6rem）。
           2行組みなので、大きすぎると1行目が画面幅いっぱいで詰まって見える。 */
        font-size: clamp(1.65rem, 5.6vw, 2.6rem);
        line-height: 1.2;
        margin: 0 0 12px;
      }

      .hero p {
        margin: 0 0 12px;
        font-size: clamp(1rem, 2.8vw, 1.2rem);
        color: #44546f;
        overflow-wrap: anywhere;
      }

      .tagline { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
      /* 日本語の見出し・リードを語の途中で折らない（2026-09-16）。
         スマホで「詳しく／なって」「活きてきま／す。」のように割れていたため、句ごとに inline-block にする */
      .phrase { display: inline-block; }
      /* 黄色のマーカー（下半分だけ塗る）。--accent-3 と同じ黄 */
      .marker {
        background: linear-gradient(transparent 58%, rgba(255, 209, 102, 0.75) 58%);
        font-weight: 700;
      }
      @media (max-width: 767px) {
        /* タグ3つ（小1〜高校生／PC未経験OK／Roblox）を375px幅で1行に収める */
        .hero .tagline { gap: 6px; }
      }

      .tag {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(140, 168, 214, 0.35);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 700;
        color: #2a3c56;
        max-width: 100%;
        white-space: normal;
      }

      /* 次回開催バー＝「情報」。ボタン（ピル型＋影）と区別するため角丸四角・影なしにする */
      .hero-next {
        display: none;
        align-items: center;
        gap: 8px;
        background: #0f2c59;
        color: #fff;
        font-weight: 800;
        font-size: 0.95rem;
        padding: 10px 16px;
        border-radius: 12px;
        margin-top: 4px;
      }
      .hero-next.show { display: inline-flex; }
      .hero-next::before { content: "📅"; }

      /* ヒーローの告知（手書き・一時的）。
         すぐ下のCTAが同じ赤なので、文字は暗めの赤にして competing させない。
         明るい --accent(#ff6b6b) をそのまま文字色にすると背景とのコントラストが
         足りず、モバイルで読みづらい。 */
      .hero .hero-news {
        margin: 12px 0 0;
        color: #d63a2f;
        font-weight: 800;
        font-size: 1rem;
        line-height: 1.4;
        text-align: center;
      }
      .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
      /* ヒーローの2ボタンは幅を揃える（モバイル=全幅、PC=均等2列） */
      .hero .cta-row { display: grid; grid-template-columns: 1fr; }
      @media (min-width: 768px) {
        .hero .cta-row { grid-template-columns: repeat(2, 1fr); }
      }

      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border-radius: 999px;
        font-weight: 800;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(180deg, var(--accent) 0%, #e6453b 100%);
        box-shadow: 0 8px 0 rgba(171, 39, 31, 0.9);
      }
      .cta.secondary {
        background: linear-gradient(180deg, #2dd6ff 0%, #1aa7d6 100%);
        box-shadow: 0 8px 0 rgba(16, 95, 126, 0.85);
      }
      /* 副ボタン。主ボタンと同じ「浮いている」影を持たせて押せると分かるようにする（色だけ控えめ） */
      /* ボタン内の補足。括弧の前で必ず改行させ、本文より一段小さくする。
         .cta は inline-flex なので、子を block にしないと改行できない。 */
      .cta .cta-sub {
        display: block;
        /* width:100% を付けると幅いっぱいのブロックになり、中の文字が左に寄る。
           幅を内容に合わせれば、親の align-items:center で中央にそろう。
           念のため text-align も明示しておく（2026-08-27 修正） */
        text-align: center;
        font-size: 0.8em;
        font-weight: 700;
        opacity: 0.85;
        margin-top: 2px;
      }
      .cta:has(.cta-sub) { flex-direction: column; line-height: 1.35; }

      .cta.outline {
        background: #fff;
        color: #2a3c56;
        border: 2px solid rgba(42, 60, 86, 0.25);
        box-shadow: 0 6px 0 rgba(42, 60, 86, 0.18);
      }
      .cta.disabled {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
        box-shadow: none;
      }
      .cta .cta-soon {
        font-size: 0.75rem;
        font-weight: 700;
        margin-left: 6px;
        opacity: 0.85;
      }

      .hero-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

      .hero-tile {
        border-radius: 16px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.65);
        aspect-ratio: 1 / 1;
        display: grid;
        place-items: center;
      }
      .hero-tile img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; }
      /* 作品スクショ用: 横長画像を両端カットして正方形に収める（縦は全面／余白なし） */
      .hero-tile.work img { object-fit: cover; padding: 0; }

      .hero-photo {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.65);
        box-shadow: 0 12px 24px rgba(28, 40, 70, 0.18);
        background: #fff;
        margin-bottom: 12px;
      }
      .hero-photo picture,
      .hero-tile picture,
      .teacher picture {
        display: block;
        width: 100%;
        height: auto;
      }
      .hero-photo img { width: 100%; height: auto; display: block; }

      .hero-note {
        margin-top: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 209, 102, 0.25);
        color: #7a4e00;
        font-weight: 700;
      }

      h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 4vw, 2rem); }

      .split { display: grid; gap: 18px; }

      .chips { display: flex; flex-wrap: wrap; gap: 8px; }
      .centered { text-align: center; }
      .centered .chips { justify-content: center; }

      .chip {
        background: var(--surface-soft);
        border-radius: 999px;
        padding: 6px 12px;
        font-weight: 700;
        color: var(--subtext);
        font-size: 0.85rem;
      }

      .grid-2, .grid-3 { display: grid; gap: 14px; }

      /* 日程まわりの文字にメリハリをつける（2026-08-25）
         それまでは .info も timeline も font-size の指定が無く、body の16pxを
         そのまま継いでいた。ラベルも値も同じ大きさで、weight も 700〜800 ばかり。
         結果「全部太字で同じ大きさ」に見えていた。
         他のセクション（作品コメントなど）は 0.9rem に落としているので、そちらに寄せる。
         全部小さくするのではなく、ラベルを控えめにして内容を主役にするのが狙い。 */
      .info {
        background: var(--surface-soft);
        padding: 16px;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        line-height: 1.7;
      }
      /* 「日時」「場所」などのラベル。小さく淡くして、値を引き立てる */
      .info strong {
        display: block;
        margin-bottom: 6px;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--subtext);
        letter-spacing: 0.04em;
      }

      /* 文中で強調を使うお知らせ。.info は中の <strong> がブロック表示になるため
         （「日時」などのラベル用）、文章には使えない。 */
      .notice {
        margin: 14px 0 0;
        padding: 14px 16px;
        background: rgba(178, 138, 255, 0.12);
        border-radius: var(--radius);
        color: var(--subtext);
        line-height: 1.8;
        font-size: 0.92rem;
      }
      .notice strong { color: #0f2c59; }
      .notice a { color: #0f6e9e; }

      /* 公式LINEの友だち追加ボタン（2026-09-08）。.notice の中に置く前提。
         画像はLINE公式のもので、サイズが固定なので拡大しない。 */
      .line-btn {
        display: block;
        width: fit-content;
        margin: 12px auto 0; /* 中央寄せ（2026-09-08） */
      }
      .line-btn img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      /* コースカード */
      .course-card {
        padding: 18px;
        border-radius: var(--radius-lg);
        background: #fff;
        border: 1px solid #e2e8ff;
        box-shadow: 0 12px 24px rgba(18, 34, 64, 0.12);
        display: grid;
        gap: 12px;
      }
      .course-card.highlight {
        border: 2px solid #ffb2ac;
        background: linear-gradient(160deg, #fff7f6 0%, #ffffff 60%);
      }

      .course-head { display: flex; gap: 12px; align-items: center; }
      .course-head picture {
        width: 72px; height: 72px;
        flex: 0 0 72px;
      }
      .course-head img {
        width: 100%; height: 100%;
        object-fit: contain;
        background: #f6f8ff;
        border-radius: 16px;
        padding: 10px;
      }
      .course-title { font-weight: 800; font-size: 1.1rem; }
      .course-meta { color: var(--subtext); font-size: 0.9rem; }

      /* タイムライン */
      .timeline { display: grid; gap: 10px; }
      .timeline-item {
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f7f9ff;
      }
      /* 「タイムテーブル」の小見出し。以前はJS側のインラインstyleで
         1rem/800 だったため、すぐ下の時刻と同じ見た目になっていた */
      .timeline-heading {
        margin: 0 0 10px;
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--subtext);
        letter-spacing: 0.06em;
      }
      /* 時刻は添え物。内容より一段小さくする */
      .timeline-time {
        font-size: 0.82rem;
        font-weight: 800;
        color: #0f2c59;
        white-space: nowrap;
      }
      /* タイムテーブルの内容。ここが主役 */
      .timeline-body { font-size: 0.95rem; line-height: 1.7; }

      .timeline-price {
        margin-left: 8px;
        color: var(--subtext);
        font-size: 0.85rem;
        font-weight: 700;
        white-space: nowrap;
      }

      /* 日程（details/summary） */
      .event-list { display: grid; gap: 12px; }

      /* ページ上部のバナー。画像を入れるまでは何も描かない（高さ0）。
         枠に背景や最小高さを持たせると、画像が無いあいだ空箱が出るため付けない。 */
      .page-banner img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-lg);
        margin: 0 0 20px;
      }

      /* 簡素表示の1回ぶん（schedule.html の data-compact）。
         時間割・対象・定員・持ち物はDoorkeeper側に同じものがあるので出さない。
         日程ページに来るのは「調べている人」で、申込の詳細は次の画面で足りる。 */
      .event-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding: 18px 20px;
        border: 1px solid #e2e8ff;
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 20px rgba(18, 34, 64, 0.08);
      }
      .event-row-main { display: grid; gap: 6px; flex: 1 1 260px; min-width: 0; }
      /* ラベルと値を2列に固定する。値が折り返しても左端に落ちず、
         値の列に揃う（参加費が長い回でバッジが行頭に落ちるのを防ぐ）。 */
      .event-row-item {
        display: grid;
        grid-template-columns: 3.6em 1fr;
        align-items: baseline;
        gap: 4px 12px;
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .event-row-item > span:first-child {
        font-size: 0.78rem;
        font-weight: 800;
        color: var(--subtext);
        letter-spacing: 0.06em;
      }
      .event-row .event-apply { flex: 0 0 auto; }
      @media (max-width: 640px) {
        .event-row .event-apply { width: 100%; }
      }

      /* 「このあとの開催」。開いているカードが2.5画面分あり、以降の日程が
         スクロールしないと見えないため、見出しの直下に一覧を出す。
         日程が合わなかった人に「次はいつか」を見せるのが comingSoon の目的で、
         その人にこそ届いていなかった。 */
      .event-more {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        margin: 0 0 16px;
        font-size: 0.92rem;
        color: var(--subtext);
      }
      .event-more a {
        display: inline-block;
        padding: 4px 10px;
        border: 1px solid #d7dcf0;
        border-radius: 999px;
        background: #fff;
        color: #0f2c59;
        font-weight: 700;
        text-decoration: none;
      }
      .event-more a:hover { border-color: #0f2c59; }
      .event-more-note { font-size: 0.85rem; }
      .event-more a.is-soon { color: var(--subtext); border-style: dashed; font-weight: 700; }
      .event-more-soon { margin-left: 6px; font-size: 0.75rem; font-weight: 700; opacity: 0.8; }

      .event-detail {
        border: 1px solid #e2e8ff;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(18, 34, 64, 0.08);
      }

      .event-summary {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        padding: 16px 20px;
        cursor: pointer;
        background: var(--surface-soft);
        list-style: none;
        user-select: none;
      }
      .event-summary::-webkit-details-marker { display: none; }
      .event-summary::after {
        content: '▼';
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--subtext);
        transition: transform 0.2s ease;
      }
      details[open] .event-summary::after { transform: rotate(180deg); }

      .event-date-badge { font-weight: 800; font-size: 1.05rem; color: #0f2c59; }
      .event-location-label { font-size: 0.9rem; color: var(--subtext); font-weight: 600; }

      .event-body { padding: 20px; display: grid; gap: 16px; }

      .event-note {
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 209, 102, 0.25);
        color: #7a4e00;
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .event-apply {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 13px 24px;
        border-radius: 999px;
        font-weight: 800;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(180deg, var(--accent) 0%, #e6453b 100%);
        box-shadow: 0 8px 0 rgba(171, 39, 31, 0.9);
        width: fit-content;
      }

      /* 申込ボタンの「誰向けか」ラベル（2026-08-25）
         トップは大人向け・お子様向けの両方の入口なので、ボタンだけ見て
         別のイベントに申し込んでしまうのを防ぐ。手数を増やさずに区別できる。 */
      .apply-block { display: grid; gap: 6px; justify-items: start; }
      .apply-label {
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--subtext);
        letter-spacing: 0.08em;
        padding-left: 2px;
      }

      .event-apply--soon {
        background: #999;
        box-shadow: 0 8px 0 rgba(80, 80, 80, 0.6);
        cursor: default;
        pointer-events: none;
      }

      /* 実績 */
      .stats-band { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
      .stat {
        background: var(--surface);
        border-radius: var(--radius-md);
        padding: 18px 12px;
        text-align: center;
        border: 1px solid #e2e8ff;
        box-shadow: 0 8px 20px rgba(18, 34, 64, 0.08);
      }
      .stat-number { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; color: #0f2c59; line-height: 1.2; }
      .stat-label { color: var(--subtext); font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
      .stats-note { color: var(--subtext); font-size: 0.8rem; text-align: center; margin: 10px 0 0; }

      /* 参加者の声 */
      .voice-card {
        background: #fff;
        border-radius: var(--radius-md);
        padding: 16px 18px;
        border: 1px solid #e2e8ff;
        box-shadow: 0 8px 20px rgba(18, 34, 64, 0.08);
      }
      .voice-text { margin: 0 0 8px; font-weight: 700; line-height: 1.7; color: var(--text); }
      .voice-meta { color: var(--subtext); font-size: 0.85rem; }

      /* 作品ピックアップ */
      .work-card {
        background: #fff;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid #e2e8ff;
        box-shadow: 0 12px 24px rgba(33, 52, 92, 0.1);
      }
      .work-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
      .work-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
      .work-title { font-weight: 800; color: #0f2c59; }
      .work-meta { color: var(--subtext); font-size: 0.85rem; font-weight: 700; }
      .work-comment { margin: 0; color: var(--subtext); line-height: 1.7; font-size: 0.9rem; }
      .work-comment strong { color: #7a4e00; }

      /* 比較 */
      .compare { display: grid; gap: 14px; }
      .compare-card { border-radius: var(--radius-lg); padding: 18px; }
      .compare-card strong { display: block; margin-bottom: 8px; }
      .compare-card ul { margin: 0; padding-left: 1.1em; }
      .compare-card.normal { background: #f6f4f1; }
      .compare-card.creator { background: #effff7; border: 2px solid rgba(73, 214, 163, 0.35); }

      /* FAQ */
      .faq { background: #f7f9ff; border-radius: var(--radius-lg); padding: 18px; }
      .faq-item { padding: 10px 0; border-bottom: 1px dashed #d7e0f2; }
      .faq-item:last-child { border-bottom: none; }

      /* FAQは畳んでおく（2026-09-02）。全部開いていると日程ページの35%を占めるが、
         答え自体はDOMに残るので検索には出る。減らすのは見えている量だけ。 */
      .faq-item > summary {
        cursor: pointer;
        font-weight: 700;
        line-height: 1.7;
        list-style: none;
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }
      .faq-item > summary::-webkit-details-marker { display: none; }
      .faq-item > summary::after {
        content: "＋";
        margin-left: auto;
        color: var(--subtext);
        font-weight: 800;
        flex: 0 0 auto;
      }
      .faq-item[open] > summary::after { content: "−"; }
      .faq-item > p { margin: 10px 0 2px; line-height: 1.8; }

      /* 作品ギャラリー */
      .game-grid { display: grid; gap: 16px; }
      .game-card {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 16px;
        box-shadow: 0 12px 24px rgba(33, 52, 92, 0.1);
        border: 1px solid #e2e8ff;
      }
      .game-title { font-weight: 800; margin-bottom: 10px; }
      .game-frame {
        width: 100%;
        aspect-ratio: 9 / 16;
        border: 0;
        border-radius: 14px;
        background: #f1f5ff;
      }

      /* 講師 */
      .teacher { display: grid; gap: 16px; align-items: center; }
      /* 講師の顔写真。正方形で表示する（モバイルで大きくなりすぎないよう上限を設ける） */
      .teacher img {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 18px;
        object-fit: cover;
        display: block;
        margin: 0 auto;
      }

      /* SNS */
      .social-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; margin-bottom: 10px; flex-wrap: wrap; }
      .social-label { font-weight: 700; color: #2a3c56; font-size: 0.9rem; }
      .social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
      .social-link {
        width: 40px; height: 40px;
        border-radius: 999px;
        display: grid; place-items: center;
        background: #fff;
        border: 1px solid rgba(42, 60, 86, 0.15);
        box-shadow: 0 6px 12px rgba(28, 40, 70, 0.08);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .social-link:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(28, 40, 70, 0.14); }
      .social-link img { width: 20px; height: 20px; }

      /* ビジョン */
      .vision {
        background: #fff8ee;
        border-radius: var(--radius-lg);
        padding: 20px;
        box-shadow: 0 12px 24px rgba(33, 52, 92, 0.1);
        border: 1px solid rgba(255, 209, 102, 0.45);
        text-align: center;
      }
      .vision p { margin: 0 0 10px; color: #2a3c56; line-height: 1.7; font-weight: 600; }
      .vision p:last-child { margin-bottom: 0; }

      /* Join */
      .join-block {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 20px;
        box-shadow: 0 12px 24px rgba(33, 52, 92, 0.1);
        border: 1px solid #e2e8ff;
        text-align: center;
      }
      .join-block p { margin: 8px 0 14px; color: #566b88; }
      .join-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center; }

      /* 最終CTA */
      .final {
        text-align: center;
        color: #1b2b45;
        padding: 28px;
        border-radius: 26px;
        background: linear-gradient(120deg, #ffe9d8 0%, #e6f2ff 100%);
        box-shadow: var(--shadow);
      }

      /* nav */
      .nav {
        padding: 14px 0;
        border-bottom: 1px solid rgba(42, 60, 86, 0.1);
        background: rgba(247, 245, 240, 0.9);
        backdrop-filter: blur(8px);
        position: sticky;
        top: 0;
        z-index: 10;
      }
      /* ロゴと同じ1行に収める（モバイルはハンバーガー、PCは横並び） */
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
      }
      .nav-logo {
        font-weight: 800;
        font-size: 1rem;
        color: #0f2c59;
        text-decoration: none;
        white-space: nowrap;
      }
      .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: none;
        font-size: 1.15rem;
        line-height: 1;
        color: #0f2c59;
        background: transparent;
        border: 1px solid rgba(42, 60, 86, 0.2);
        border-radius: 10px;
        cursor: pointer;
      }
      /* モバイル: リンクは折りたたみ（ハンバーガーで開閉） */
      .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px 12px;
        background: #f7f5f0;
        border-bottom: 1px solid rgba(42, 60, 86, 0.1);
        box-shadow: 0 12px 24px rgba(18, 34, 64, 0.12);
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        color: #2a3c56;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 10px 12px;
        border-radius: 10px;
        white-space: nowrap;
      }
      .nav-links a:hover { background: rgba(15, 44, 89, 0.08); }
      /* PC: 従来どおり横並び */
      @media (min-width: 768px) {
        .nav-toggle { display: none; }
        .nav-links {
          display: flex;
          position: static;
          flex-direction: row;
          padding: 0;
          background: transparent;
          border-bottom: 0;
          box-shadow: none;
        }
        .nav-links a { font-size: 0.85rem; padding: 6px 10px; border-radius: 999px; }
      }
      [id] { scroll-margin-top: 96px; }

      /* カリキュラム一覧 */
      .curri-grid { display: grid; gap: 14px; }
      .curri-card {
        background: #fff;
        border: 1px solid #e2e8ff;
        border-radius: var(--radius-lg);
        padding: 18px;
        box-shadow: 0 12px 24px rgba(18, 34, 64, 0.1);
        display: grid;
        gap: 8px;
        align-content: start;
      }
      .curri-card.soon {
        background: #f6f4f1;
        border: 1px dashed #c9c2b8;
        box-shadow: none;
      }
      .curri-icon { font-size: 1.8rem; line-height: 1; }
      .curri-title { font-weight: 800; font-size: 1.05rem; color: #0f2c59; }
      .curri-desc { margin: 0; color: var(--subtext); line-height: 1.7; font-size: 0.9rem; }
      .curri-badges { display: flex; flex-wrap: wrap; gap: 6px; }
      .curri-badge {
        font-size: 0.72rem;
        font-weight: 800;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(60, 194, 255, 0.16);
        color: #0f6e9e;
      }
      .curri-badge.tag-taiken { background: rgba(60, 194, 255, 0.16); color: #0f6e9e; }
      .curri-badge.tag-program { background: rgba(73, 214, 163, 0.18); color: #1d7a55; }
      .curri-badge.tag-creative { background: rgba(178, 138, 255, 0.2); color: #6b3fb0; }
      .curri-badge.subject { background: rgba(15, 44, 89, 0.1); color: #0f2c59; }

      /* トップページのカリキュラム要約。件数は curriculum/curriculum.js から
         数えて出しているため、ここに数字は書かない（index.html のコメント参照）。 */
      .curri-summary { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.8; color: #0f2c59; }
      .curri-summary-tags {
        display: inline-block;
        margin-top: 6px;
        color: var(--subtext);
        font-size: 0.9rem;
        letter-spacing: 0.02em;
      }
      .curri-badge.soon { background: rgba(255, 209, 102, 0.3); color: #7a4e00; }
      /* 要相談＝実施はできるが個別に相談が必要（準備中とは区別して白地） */
      .curri-badge.request { background: #fff; color: #0f2c59; border: 1px solid rgba(15, 44, 89, 0.35); }
      .curri-sessions { font-size: 0.8rem; color: var(--subtext); font-weight: 700; }
      /* 対象年齢・利用条件の注記（AIコースのツール年齢制限など） */
      .curri-age {
        font-size: 0.78rem;
        line-height: 1.6;
        color: #7a4e00;
        background: rgba(255, 209, 102, 0.22);
        padding: 6px 10px;
        border-radius: 10px;
      }
      .curri-detail { margin-top: 2px; }
      .curri-detail summary {
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 700;
        color: #0f6e9e;
        list-style: none;
      }
      .curri-detail summary::-webkit-details-marker { display: none; }
      .curri-detail summary::before { content: "詳しく見る ＋"; }
      .curri-detail[open] summary::before { content: "とじる －"; }
      .curri-detail p { margin: 8px 0 0; color: var(--subtext); line-height: 1.7; font-size: 0.88rem; }
      .curri-loading { color: var(--subtext); grid-column: 1 / -1; }

      /* JSが動かない環境向けの案内 */
      .noscript-note {
        color: var(--subtext);
        background: var(--surface-soft);
        border: 1px dashed var(--line, #d9dee8);
        border-radius: 12px;
        padding: 16px;
        margin: 8px 0 0;
        line-height: 1.7;
      }
      .noscript-note a { color: inherit; font-weight: 700; }

      /* カリキュラム 科目タブ */
      .curri-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
      .curri-tab {
        border: 1px solid #d6def5;
        background: #fff;
        color: #2a3c56;
        font-weight: 800;
        font-size: 0.85rem;
        padding: 8px 16px;
        border-radius: 999px;
        cursor: pointer;
      }
      .curri-tab.is-active { background: #0f2c59; color: #fff; border-color: #0f2c59; }

      .curri-note {
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255, 209, 102, 0.25);
        color: #7a4e00;
        font-weight: 700;
        text-align: center;
      }
      @media (min-width: 768px) {
        .curri-grid { grid-template-columns: repeat(3, 1fr); }
      }

      /* リピート強調バッジ */
      .tag.tag-strong {
        background: linear-gradient(180deg, #fff3cf 0%, #ffe9ae 100%);
        border: 1px solid rgba(212, 160, 23, 0.45);
        color: #7a4e00;
      }

      /* お試し価格バッジ */
      .price-badge {
        display: inline-block;
        background: linear-gradient(180deg, var(--accent) 0%, #e6453b 100%);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 999px;
        margin-left: 4px;
        vertical-align: middle;
        white-space: nowrap;
      }

      /* 特徴カード */
      .feature-card {
        padding: 20px;
        border-radius: var(--radius-lg);
        background: #fff;
        border: 1px solid #e2e8ff;
        box-shadow: 0 12px 24px rgba(18, 34, 64, 0.1);
        display: grid;
        gap: 10px;
      }
      .feature-icon { font-size: 2rem; line-height: 1; }
      .feature-card h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f2c59; }
      .feature-card p { margin: 0; color: var(--subtext); line-height: 1.7; }

      /* ステップバッジ */
      /* .step-badge は 2026-08-25 に削除した。
         トップを STEP 1/2/3 の順路で見せる作りをやめたため（LPからホームページへ）。
         復活させるなら、入口が複数あるサイトで通し番号が成立するか先に検討すること。 */

      /* コースアイテム */
      .course-item {
        padding: 16px 18px;
        border-radius: var(--radius-md);
        background: var(--surface-soft);
        display: grid;
        gap: 6px;
      }
      .course-item-title { font-weight: 800; color: #0f2c59; font-size: 1rem; }
      .course-item p { margin: 0; color: var(--subtext); line-height: 1.7; }

      /* 続けていく選択肢：流れ */
      .flow-list { display: grid; gap: 4px; margin: 0 0 16px; }
      .flow-step { background: var(--surface-soft); padding: 14px 18px; border-radius: var(--radius-md); }
      .flow-title { font-weight: 800; color: #0f2c59; }
      .flow-step p { margin: 6px 0 0; color: var(--subtext); }
      .flow-step ul { margin: 6px 0 0; padding-left: 20px; color: var(--subtext); }
      .flow-step li { margin-bottom: 4px; }
      .flow-arrow { text-align: center; color: var(--subtext); font-size: 1.1rem; margin: 2px 0; }
      .flow-note { font-size: 0.9em; }

      footer { color: #6c7f9c; text-align: center; font-size: 0.85rem; padding: 30px 0 40px; }
      .footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 12px; }
      .footer-links a { color: #4a5d7a; text-decoration: none; }
      .footer-links a:hover { text-decoration: underline; }

      /* モバイル固定CTA */
      .fixed-cta {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        box-shadow: 0 -8px 24px rgba(33, 52, 92, 0.15);
      }
      .fixed-cta .cta { width: 100%; }
      /* 固定CTAのラベル。申込へ直行するときだけJSが差し込む。
         バーが高くなるぶん body の padding-bottom も増やしている（下の媒体クエリ） */
      .fixed-cta-label {
        display: block;
        text-align: center;
        font-size: 0.7rem;
        font-weight: 800;
        color: var(--subtext);
        letter-spacing: 0.08em;
        margin-bottom: 4px;
      }
      @media (max-width: 767px) {
        .fixed-cta.show { display: block; }
        /* 固定CTAにラベル行が入ったぶん増やしてある（84 → 102） */
        body.has-fixed-cta { padding-bottom: 102px; }

        /* ── モバイルの横幅を取り戻す（2026-08-25）──────────────────
           角丸の枠が4段入れ子になっていて、375pxの画面で本文に使える幅が
           112pxしか残っていなかった（画面の70%が余白と枠）。

             375  画面
             345  .container 92%           -30
             297  .card padding 24         -48
             255  .event-body padding 20   -40
             236  .timeline-item padding   -28
             112  時刻112px固定の2カラム   -124

           入れ子の各段を少しずつ詰め、いちばん効く時刻列は縦積みにする。
           デスクトップ（768px以上）は変えない。 */
        .container { width: 94%; }
        .card { padding: 16px 18px; }
        .event-body { padding: 14px; }
        .info { padding: 12px; }

        /* 時刻を上、内容を下に積む。112px固定の列をやめると本文が2倍以上使える */
        .timeline-item {
          grid-template-columns: 1fr;
          gap: 4px;
          padding: 10px 12px;
        }

        /* セクション下の「もっと見る」系と申込ボタンを左右いっぱいに広げる。
           ヒーローのボタンは .hero .cta-row が grid 1fr なので元から全幅だが、
           セクションのボタンは inline-flex で文字数ぶんの幅しかなく、
           長さがバラバラで端が揃っていなかった。タップ範囲も広がる。 */
        .cta-block > .cta { width: 100%; }
        .event-apply { width: 100%; }
        .apply-block { justify-items: stretch; }
      }

      @media (min-width: 768px) {
        /* セクション下のボタンは中央に置く。カードが1120pxまで広がるため、
           左端に小さなボタンが1つ残ると迷子に見える。
           モバイルでは全幅にしているので、どちらの幅でも端が揃う。 */
        .cta-block { text-align: center; }
        .event-body > .event-apply,
        .event-body > .apply-block { justify-self: center; }
        .apply-block { justify-items: center; }

        .hero-inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: 36px; }
        .split { grid-template-columns: 1fr 1fr; align-items: start; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .game-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
        .stats-band { grid-template-columns: repeat(3, 1fr); }
        .teacher { grid-template-columns: 0.8fr 1.2fr; }
        .compare { grid-template-columns: repeat(2, 1fr); }
        .course-item-grid { grid-template-columns: repeat(2, 1fr); }
      }

      @keyframes rise {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-18px); }
      }