/* ============================================================
       DESIGN SYSTEM — TCL
       Primary:   #0A1D34 (Navy)   #152A4D (Deep Blue)
       Accent:    #A8FF3C (Lime Green)
       Neutral:   #F2F4F7 (Gray)   #FFFFFF (White)
    ============================================================ */
    :root {
      --navy:       #0A1D34;
      --deep-blue:  #152A4D;
      --lime:       #A8FF3C;
      --lime-dark:  #7acc1e;
      --gray-bg:    #F2F4F7;
      --gray-mid:   #D1D5DB;
      --white:      #FFFFFF;
      --text-dark:  #0A1D34;
      --text-mid:   #374151;
      --text-light: #6B7280;

      --font-display: 'Montserrat', sans-serif;
      --font-body:    'Noto Sans JP', sans-serif;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: var(--text-dark);
      background: var(--white);
      line-height: 1.8;
      font-size: 16px;
      overflow-x: hidden;
    }
    img { display: block; width: 100%; object-fit: cover; }
    a { text-decoration: none; color: inherit; }

    .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

    /* ---- BUTTONS ---- */
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 28px; border-radius: var(--radius-md);
      font-family: var(--font-body); font-weight: 700; font-size: 16px;
      cursor: pointer; border: none; transition: all 0.2s ease;
      white-space: nowrap;
    }
    .btn .arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
    .btn-primary { background: var(--lime); color: var(--navy); }
    .btn-primary:hover, .btn-primary:focus-visible { background: var(--lime-dark); transform: translateY(-2px); }
    .btn-outline-dark { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
    .btn-outline-dark:hover { background: var(--navy); color: var(--white); }
    .btn-outline-light { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.45); }
    .btn-outline-light:hover, .btn-outline-light:focus-visible { background: rgba(255,255,255,0.1); border-color: var(--white); transform: translateY(-2px); }
    .btn-lg { padding: 18px 36px; font-size: 17px; }
    .btn-full { width: 100%; justify-content: center; }

    /* ---- CHIPS ---- */
    .chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
    .chip-lime    { background: var(--lime); color: var(--navy); }
    .chip-navy    { background: var(--navy); color: var(--white); }
    .chip-outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
    .chip-light   { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }

    /* ---- SECTION LABELS ---- */
    .eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
    .eyebrow-lime { color: var(--lime); }
    .eyebrow-gray { color: var(--text-light); }
    .sec-title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.25; color: var(--navy); }
    .sec-title.light { color: var(--white); }
    .sec-title .hl { color: var(--lime); }
    .sec-title .hld { color: var(--lime-dark); }
    .sp-title-break { display: none; }
    .sec-body { font-size: 14px; color: var(--text-light); line-height: 1.85; margin-top: 12px; }
    .sec-body.light { color: rgba(255,255,255,0.6); }
    .jp-copy {
      line-break: strict;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .no-break { white-space: nowrap; }

    /* ---- IMAGE PLACEHOLDER ---- */
    .iph {
      background: linear-gradient(135deg, #1a3356 0%, #0f2540 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: rgba(168,255,60,0.45); gap: 10px; text-align: center; padding: 20px;
    }
    .iph svg { width: 36px; height: 36px; opacity: 0.4; }
    .iph small { font-size: 10px; opacity: 0.5; max-width: 160px; line-height: 1.5; font-family: var(--font-body); }

    /* ---- SCROLL REVEAL ---- */
    .rev { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .rev.in { opacity: 1; transform: none; }
    .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
    .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }

    /* ============================================================
       NAVBAR
    ============================================================ */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      padding: 18px 0; transition: all .3s;
    }
    .navbar.sc {
      background: rgba(10,29,52,.97);
      backdrop-filter: blur(16px);
      padding: 12px 0;
      box-shadow: 0 2px 24px rgba(0,0,0,.2);
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
    .nav-logo-img { display: block; height: 72px; width: auto; object-fit: contain; transition: height .28s ease; }
    .navbar.sc .nav-logo-img { height: 42px; }
    .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); transition: color .2s; }
    .nav-links a:hover { color: var(--lime); }
    .nav-cta { background: var(--lime) !important; color: var(--navy) !important; padding: 10px 20px !important; border-radius: var(--radius-md) !important; font-weight: 700 !important; font-size: 13px !important; }

    .language-switcher {
      display: inline-flex; align-items: center; gap: 2px;
      padding: 3px; border-radius: 999px;
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
    }
    .lang-option {
      min-width: 38px; min-height: 32px; padding: 7px 10px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px; font-family: var(--font-display); font-size: 12px; font-weight: 800;
      letter-spacing: .06em; color: rgba(255,255,255,.62);
      transition: background .2s, color .2s, transform .2s;
    }
    .lang-option:hover, .lang-option:focus-visible {
      color: var(--white); background: rgba(255,255,255,.12); outline: none;
    }
    .nav-links .lang-option:hover,
    .nav-links .lang-option:focus-visible {
      color: var(--white);
      background: rgba(255,255,255,.16);
    }
    .lang-option.is-active {
      background: var(--lime); color: var(--navy); box-shadow: 0 2px 10px rgba(168,255,60,.24);
    }
    .lang-option.is-active:hover,
    .lang-option.is-active:focus-visible {
      background: var(--lime);
      color: var(--navy);
    }
    .nav-links .lang-option.is-active:hover,
    .nav-links .lang-option.is-active:focus-visible {
      background: var(--lime);
      color: var(--navy);
    }
    .nav-lang { display: flex; align-items: center; }
    .nav-mobile-actions { display: none; align-items: center; gap: 12px; }
    .mobile-header-lang { display: none; }
    .mobile-header-lang .language-switcher { background: rgba(255,255,255,.12); }
    .mobile-header-lang .lang-option { min-width: 34px; min-height: 30px; padding: 6px 9px; font-size: 11px; }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; }

    /* Mobile nav */
    .mob-nav {
      display: none; position: fixed; inset: 0; background: var(--navy);
      z-index: 500; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    }
    .mob-nav.open { display: flex; }
    .mob-nav a { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--white); }
    .mob-nav a:hover, .mob-nav a.lime { color: var(--lime); }
    .mob-close {
      position: absolute; top: 18px; right: 22px; z-index: 501;
      width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
      color: var(--white); font-size: 32px; line-height: 1; cursor: pointer;
    }
    .mob-close:hover, .mob-close:focus-visible { background: var(--lime); color: var(--navy); outline: none; }

    /* ============================================================
       HERO
    ============================================================ */
    .hero {
      position: relative; min-height: 100svh; background: var(--navy);
      display: flex; align-items: center; overflow: hidden;
    }
    /* image-01: 1Day Leagueカード用の生成画像。お子さまがサッカーをプレー中の躍動感ある写真。 */
    .hero-bg { position: absolute; inset: 0; z-index: 0; }
    .hero-bg .iph { height: 100%; }
    .hero-ov {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(100deg, rgba(10,29,52,.93) 0%, rgba(10,29,52,.68) 50%, rgba(10,29,52,.28) 100%);
    }
    .hero-content { position: relative; z-index: 2; width: 100%; padding: 140px 0 100px; }
    .hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .hero-hl {
      font-family: var(--font-display);
      font-size: clamp(44px, 9vw, 80px); font-weight: 900; line-height: 1.08;
      color: var(--white); letter-spacing: -.01em; margin-bottom: 10px;
    }
    .hero-hl .lime { color: var(--lime); }
    .hero-sub { font-family: var(--font-display); font-size: clamp(13px, 1.6vw, 16px); font-weight: 700; color: rgba(255,255,255,.66); margin-bottom: 16px; }
    .hero-body { font-size: 14px; color: rgba(255,255,255,.6); max-width: 440px; line-height: 1.9; margin-bottom: 40px; }
    .hero-body-emphasis {
      display: inline-block;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.65;
      color: var(--white);
      margin-bottom: 6px;
      white-space: nowrap;
      text-shadow: 0 2px 14px rgba(0,0,0,.22);
    }
    .hero-mobile-break { display: none; }
    .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-scroll {
      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
      color: rgba(255,255,255,.35); font-family: var(--font-body);
    }
    .scroll-line {
      width: 1px; height: 36px;
      background: linear-gradient(to bottom, rgba(168,255,60,.6), transparent);
      animation: sc 2s ease-in-out infinite;
    }
    @keyframes sc {
      0%  { transform: scaleY(0); transform-origin: top; }
      49% { transform: scaleY(1); transform-origin: top; }
      50% { transform: scaleY(1); transform-origin: bottom; }
      100%{ transform: scaleY(0); transform-origin: bottom; }
    }

    /* ============================================================
       STATS BAR
    ============================================================ */
    .stats-bar { background: var(--lime); padding: 22px 0; }
    .stats-inner { display: flex; justify-content: center; flex-wrap: wrap; }
    .stat-item { display: flex; align-items: center; gap: 14px; padding: 8px 36px; position: relative; }
    .stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: rgba(10,29,52,.2); }
    .stat-num { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--navy); line-height: 1; }
    .stat-lbl { font-size: 12px; font-weight: 700; color: rgba(10,29,52,.65); line-height: 1.4; }

    /* ============================================================
       PROBLEM
    ============================================================ */
    .problem { padding: 96px 0; background: var(--gray-bg); }
    .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    /* image-02: 対象年齢・家庭セクション用の生成画像。国際コミュニティでお子さまが交流する写真。 */
    .problem-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; }
    .problem-img .iph { height: 100%; }
    .pain-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
    .pain-item {
      background: var(--white); border-radius: var(--radius-md);
      border-left: 3px solid var(--lime-dark); padding: 16px 20px;
      display: flex; gap: 14px; align-items: flex-start; transition: transform .2s;
    }
    .pain-item:hover { transform: translateX(4px); }
    .pain-emoji { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
    .pain-title { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 2px; }
    .pain-desc  { font-size: 12px; color: var(--text-light); line-height: 1.6; }

    /* ============================================================
       WHAT IS
    ============================================================ */
    .whatis { padding: 96px 0; background: var(--white); }
    .whatis-hd { max-width: 640px; margin: 0 auto 56px; text-align: center; }
    .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .feat-card {
      background: var(--white); border-radius: var(--radius-lg);
      border: 1px solid var(--gray-mid); padding: 28px 24px; transition: all .2s; position: relative;
    }
    .feat-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--lime); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      transform: scaleX(0); transition: transform .3s;
    }
    .feat-card:hover::before { transform: scaleX(1); }
    .feat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(10,29,52,.1); }
    .feat-lbl { font-size: 18px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dark); margin-bottom: 12px; display: block; font-family: var(--font-display); }
    .feat-title { font-weight: 800; font-size: 20px; color: var(--navy); line-height: 1.55; margin-bottom: 10px; }
    .feat-desc  { font-size: 14px; color: var(--text-light); line-height: 1.85; }

    /* ============================================================
       WHO IT'S FOR
    ============================================================ */
    .whofor { padding: 96px 0; background: var(--navy); position: relative; overflow: hidden; }
    .whofor::after {
      content: 'GA'; position: absolute; right: -20px; bottom: -60px;
      font-family: var(--font-display); font-size: 260px; font-weight: 900;
      color: rgba(168,255,60,.04); line-height: 1; pointer-events: none;
    }
    .whofor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
    /* image-03: 3 Month Leagueカード用の生成画像。継続型リーグらしいチーム練習の写真。 */
    .whofor-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/3; }
    .whofor-img .iph { height: 100%; }
    .checklist { display: flex; flex-direction: column; gap: 16px; }
    .chk-item { display: flex; gap: 14px; align-items: flex-start; }
    .chk-icon {
      width: 28px; height: 28px; background: var(--lime); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
    }
    .chk-icon svg { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .chk-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
    .chk-text span   { font-size: 13px; color: rgba(255,255,255,.55); }
    .age-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }

    /* ============================================================
       SCENE
    ============================================================ */
    .scene { padding: 96px 0; background: var(--navy); border-top: 1px solid rgba(255,255,255,.06); }
    .scene-hd { margin-bottom: 36px; }
    .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    /* image-09: 利用シーン①。試合中の躍動感あるプレーシーン。縦長3:4。差し替えはここ。 */
    /* image-10: 利用シーン②。チームメイトとハイタッチするシーン。縦長3:4。差し替えはここ。 */
    /* image-11: 利用シーン③。保護者がお子さまの試合を見守るシーン。縦長3:4。差し替えはここ。 */
    .scene-card { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; position: relative; }
    .scene-card .iph { height: 100%; }
    .scene-ov {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: linear-gradient(to top, rgba(10,29,52,.88) 0%, transparent 100%);
      padding: 28px 20px 20px;
    }
    .scene-chip { display: inline-block; background: var(--lime); color: var(--navy); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
    .scene-ttl  { font-weight: 700; font-size: 14px; color: var(--white); line-height: 1.4; }

    /* ============================================================
       PLANS
    ============================================================ */
    .plans { padding: 96px 0; background: var(--gray-bg); }
    .plans-hd { text-align: center; margin-bottom: 52px; }
    .plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .plan-card {
      background: var(--white); border-radius: var(--radius-xl); overflow: hidden;
      border: 1.5px solid var(--gray-mid); display: flex; flex-direction: column;
      transition: transform .25s, box-shadow .25s;
    }
    .plan-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(10,29,52,.12); }
    .plan-card.featured { border-color: var(--lime); border-width: 2px; }
    /* image-04: 1Day Leagueカード上部の写真（16:9）。1日体験の楽しい雰囲気。差し替えはここ。 */
    /* image-05: 3 Month Leagueカード上部の写真（16:9）。本格的なリーグ戦シーン。差し替えはここ。 */
    .plan-img { aspect-ratio: 16/9; position: relative; overflow: hidden; }
    .plan-img .iph { height: 100%; }
    .plan-badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .pb-trial   { background: rgba(255,255,255,.92); color: var(--navy); }
    .pb-popular { background: var(--lime); color: var(--navy); }
    .plan-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
    .plan-name { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1.1; margin-bottom: 4px; }
    .plan-tag  { font-size: 13px; color: var(--text-light); margin-bottom: 22px; }
    .plan-dets { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 20px; }
    .plan-det  { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-mid); }
    .plan-det svg { width: 15px; height: 15px; stroke: var(--lime-dark); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
    .plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
    .plan-price { font-family: var(--font-display); font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; }
    .plan-punit { font-size: 13px; color: var(--text-light); }
    .plan-seats { font-size: 12px; color: var(--text-light); margin-bottom: 18px; }
    .plan-note  { background: #EEF9E6; border-radius: var(--radius-md); padding: 10px 16px; font-size: 12px; color: #2f6c10; margin-bottom: 18px; }

    /* ============================================================
       SCHEDULE
    ============================================================ */
    .schedule { padding: 80px 0; background: var(--white); }
    .schedule-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 36px; align-items: start; margin-top: 40px; }
    .nm-card { background: var(--deep-blue); border-radius: var(--radius-lg); padding: 24px; border: 1px solid rgba(255,255,255,.08); }
    .nm-lbl  { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; display: block; }
    .nm-teams { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .nm-logo  { width: 46px; height: 46px; background: var(--lime); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 900; color: var(--navy); }
    .nm-vs    { font-family: var(--font-display); font-size: 16px; color: rgba(255,255,255,.35); font-weight: 700; }
    .nm-tname { font-weight: 700; font-size: 13px; color: var(--white); }
    .nm-tsub  { font-size: 11px; color: rgba(255,255,255,.45); }
    .nm-info  { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.8; }
    .nm-info strong { color: var(--lime); }
    .sch-list { display: flex; flex-direction: column; gap: 10px; }
    .sch-row  { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: var(--gray-bg); border-radius: var(--radius-md); font-size: 13px; }
    .sch-date { font-weight: 700; color: var(--navy); }
    .sch-name { color: var(--text-mid); }

    /* ============================================================
       TRUST
    ============================================================ */
    .trust { padding: 96px 0; background: var(--gray-bg); }
    .trust-hd { text-align: center; margin-bottom: 48px; }
    .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }
    .testi {
      background: var(--white); border-radius: var(--radius-lg);
      border: 1px solid var(--gray-mid); padding: 28px;
    }
    .testi-q    { font-family: var(--font-display); font-size: 52px; font-weight: 900; color: var(--lime); line-height: .8; margin-bottom: 12px; opacity: .45; }
    .testi-txt  { font-size: 13px; color: var(--text-mid); line-height: 1.85; margin-bottom: 20px; }
    .testi-auth { display: flex; align-items: center; gap: 12px; }
    /* image-06〜08: 保護者①〜③のアバター写真（44×44px 円形）。実際の写真に差し替え可。 */
    .testi-av   { width: 44px; height: 44px; border-radius: 50%; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--navy); border: 2px solid var(--lime); overflow: hidden; flex-shrink: 0; }
    .testi-name { font-weight: 700; font-size: 13px; color: var(--navy); }
    .testi-sub  { font-size: 11px; color: var(--text-light); }
    .school-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--gray-mid); padding-top: 36px; }
    .school-tag { padding: 10px 18px; border: 1.5px solid var(--gray-mid); border-radius: var(--radius-md); font-size: 12px; font-weight: 700; color: var(--text-light); }

    /* ============================================================
       FAQ
    ============================================================ */
    .faq { padding: 96px 0; background: var(--white); }
    .faq-hd  { text-align: center; margin-bottom: 44px; }
    .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
    .faq-item { border: 1.5px solid var(--gray-mid); border-radius: var(--radius-md); overflow: hidden; transition: border-color .2s; }
    .faq-item.open { border-color: var(--lime-dark); }
    .faq-q {
      padding: 18px 22px; display: flex; justify-content: space-between; align-items: center;
      gap: 16px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--navy);
      user-select: none; transition: background .2s;
    }
    .faq-q:hover { background: var(--gray-bg); }
    .faq-tog { width: 26px; height: 26px; background: var(--gray-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .3s; }
    .faq-item.open .faq-tog { background: var(--lime); transform: rotate(180deg); }
    .faq-tog svg { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2.5; stroke-linecap: round; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
    .faq-item.open .faq-a { max-height: 520px; }
    .faq-a-inner { padding: 0 22px 18px; font-size: 13px; color: var(--text-light); line-height: 1.85; }

    /* ============================================================
       FINAL CTA
    ============================================================ */
    .final-cta { padding: 120px 0; background: var(--navy); text-align: center; position: relative; overflow: hidden; }
    /* image-12: 最終CTAセクション背景。お子さまが円陣を組む・夕日の中でプレーするシーン。
       フルワイド横長写真。ネイビーオーバーレイをかける前提。差し替えはここ。 */
    .cta-bg { position: absolute; inset: 0; opacity: .08; }
    .cta-bg .iph { height: 100%; }
    .cta-glow {
      position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 300px;
      background: radial-gradient(ellipse, rgba(168,255,60,.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .final-cta .container { position: relative; z-index: 1; }
    .cta-ttl { font-family: var(--font-display); font-size: clamp(34px, 7vw, 64px); font-weight: 900; line-height: 1.15; color: var(--white); margin-bottom: 20px; }
    .cta-ttl .lime { color: var(--lime); }
    .cta-sub { font-size: 14px; color: rgba(255,255,255,.6); max-width: 460px; margin: 0 auto 44px; line-height: 1.9; }
    .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
    .cta-note { font-size: 12px; color: rgba(255,255,255,.3); }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer { background: var(--deep-blue); padding: 64px 0 28px; }
    .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 28px; }
    .ft-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .ft-logo-img { width: 220px; height: auto; object-fit: contain; display: block; flex-shrink: 0; }
    .ft-logo-txt { display: none; }
    .ft-tag { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 300px; margin-bottom: 20px; }
    .ft-social { display: flex; gap: 10px; }
    .soc-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
    .soc-btn:hover { background: var(--lime); }
    .soc-btn:hover svg { fill: var(--navy); }
    .soc-btn svg { width: 16px; height: 16px; fill: rgba(255,255,255,.6); }
    .ft-links { display: flex; gap: 48px; flex-wrap: wrap; }
    .ft-col h4 { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 16px; }
    .ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .ft-col a { font-size: 13px; color: rgba(255,255,255,.6); transition: color .2s; }
    .ft-col a:hover { color: var(--lime); }
    .ft-bot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,.25); }
    .ft-bot a { color: inherit; }
    .ft-bot a:hover { color: rgba(255,255,255,.5); }



    /* ============================================================
       OFFER / SEASON / EVENTS EXTENSIONS
    ============================================================ */
    .whatis-intro { max-width: 860px; margin: 0 auto 34px; text-align: center; }
    .whatis-intro .sec-body { color: var(--text-mid); font-size: 15px; }
    .tcl-values { padding: 96px 0; background: var(--navy); position: relative; overflow: hidden; }
    .tcl-values::before {
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(135deg, rgba(168,255,60,.1) 0%, transparent 34%),
        linear-gradient(225deg, rgba(255,255,255,.08) 0%, transparent 42%);
      pointer-events: none;
    }
    .tcl-values .container { position: relative; z-index: 1; }
    .values-hd { text-align: center; max-width: 720px; margin: 0 auto 44px; }
    .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .tcl-value-card {
      min-height: 100%; display: flex; flex-direction: column; gap: 18px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius-lg); padding: 24px 20px;
      color: var(--white); transition: transform .2s, border-color .2s, background .2s;
    }
    .tcl-value-card:hover { transform: translateY(-3px); border-color: rgba(168,255,60,.5); background: rgba(255,255,255,.11); }
    .tcl-value-icon {
      display: inline-flex; align-items: center; justify-content: flex-start;
      color: var(--white); font-size: 30px; line-height: 1;
    }
    .tcl-value-title {
      font-family: var(--font-display); font-size: 18px; font-weight: 900; line-height: 1.25;
      color: var(--white); margin-bottom: 10px;
    }
    .tcl-value-copy { font-size: 13px; color: rgba(255,255,255,.68); line-height: 1.75; }
    .offer { padding: 96px 0; background: var(--gray-bg); }
    .offer-hd { text-align: center; max-width: 720px; margin: 0 auto 44px; }
    .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .offer-card { background: var(--white); border: 1px solid var(--gray-mid); border-radius: var(--radius-lg); padding: 24px; transition: transform .2s, box-shadow .2s; }
    .offer-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(10,29,52,.09); }
    .offer-top { display: flex; justify-content: flex-start; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
    .value-label {
      display: block; padding: 0; color: var(--lime-dark);
      font-family: var(--font-display); font-size: clamp(22px,3vw,30px); font-weight: 900;
      letter-spacing: .06em; text-transform: uppercase; line-height: 1;
    }
    .offer-block { padding: 14px 0; border-top: 1px solid var(--gray-mid); }
    .offer-block:first-of-type { border-top: 0; padding-top: 0; }
    .offer-block small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--lime-dark); text-transform: uppercase; margin-bottom: 5px; }
    .offer-block strong { display: block; color: var(--navy); font-size: 15px; line-height: 1.55; }
    .offer-block p { font-size: 13px; color: var(--text-light); line-height: 1.75; }
    .offer-solution-card .offer-block { border-top: 0; padding: 0; }
    .offer-solutions { margin-top: 0; }
    .family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .family-card { display: flex; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); padding: 16px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }
    .family-card .chk-icon { margin-top: 0; }
    .events { padding: 96px 0; background: var(--gray-bg); }
    .events-hd { text-align: center; margin-bottom: 44px; }
    .events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .event-card { background: var(--white); border: 1px solid var(--gray-mid); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }
    .event-card.featured { border: 2px solid var(--lime); box-shadow: 0 16px 48px rgba(10,29,52,.12); }
    .event-card.is-soon { opacity: .76; }
    .event-card.is-soon .plan-img img { filter: grayscale(1); }
    .pb-soon { background: rgba(255,255,255,.9); color: var(--text-light); }
    .event-status { display: inline-flex; width: fit-content; background: #EEF9E6; color: #2f6c10; border-radius: 99px; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
    .event-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
    .event-name { font-family: var(--font-display); font-size: 25px; font-weight: 900; color: var(--navy); line-height: 1.15; margin-bottom: 14px; }
    .event-desc { font-size: 13px; color: var(--text-light); line-height: 1.75; margin: 12px 0 20px; flex: 1; }
    .event-dets { display: grid; gap: 9px; }
    .event-det { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--gray-bg); font-size: 13px; }
    .event-det span:first-child { color: var(--text-light); font-weight: 700; }
    .event-det span:last-child { color: var(--navy); text-align: right; }
    .event-actions { display: grid; gap: 10px; margin-top: 18px; }
    .footer-info { display: grid; gap: 8px; font-size: 13px; color: rgba(255,255,255,.62); }
    .footer-info strong { color: var(--white); }
    .ft-social-text { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 18px; align-items: center; }
    .sns-link {
      min-height: 42px; display: inline-flex; align-items: center; gap: 9px;
      color: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px; padding: 8px 14px 8px 9px; font-size: 12px; font-weight: 700;
      background: rgba(255,255,255,.055); transition: background .2s, color .2s, border-color .2s, transform .2s;
    }
    .sns-link:hover, .sns-link:focus-visible {
      color: var(--navy); background: var(--lime); border-color: var(--lime); transform: translateY(-1px); outline: none;
    }
    .sns-icon {
      width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.1); color: var(--white); flex-shrink: 0;
    }
    .sns-icon svg { width: 15px; height: 15px; fill: currentColor; }
    .sns-link:hover .sns-icon, .sns-link:focus-visible .sns-icon { background: var(--navy); color: var(--lime); }
    .mobile-sticky-cta { display: none; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 900px) {
      .nav-logo-img { height: 54px; }
      .navbar.sc .nav-logo-img { height: 34px; }
      .nav-links { display: none; }
      .nav-mobile-actions { display: flex; }
      .mobile-header-lang { display: block; }
      .hamburger { display: flex; }
      .problem-grid, .whofor-grid, .plans-grid, .schedule-grid, .offer-grid, .events-grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: repeat(2, 1fr); }
      .family-grid { grid-template-columns: 1fr; }
      .problem-img { order: -1; aspect-ratio: 16/9; }
      .whofor-img  { order: -1; aspect-ratio: 16/9; }
      .feat-grid   { grid-template-columns: 1fr 1fr; }
      .trust-grid  { grid-template-columns: 1fr; }
      .scene-grid  { grid-template-columns: 1fr 1fr; }
      .scene-grid .scene-card:last-child { display: none; }
      .footer-top  { grid-template-columns: 1fr; }
      .stat-item   { padding: 8px 20px; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 18px; }
      .sp-title-break { display: block; }
      .whatis, .tcl-values, .offer, .whofor, .events, .faq { padding: 64px 0; }
      .footer { padding: 48px 0 24px; }
      .footer-top { gap: 28px; padding-bottom: 28px; margin-bottom: 20px; }
      .whatis-intro, .values-hd, .offer-hd, .events-hd, .faq-hd { margin-bottom: 26px; }
      .whofor-grid { gap: 28px; margin-top: 30px; }
      .sec-body { margin-top: 10px; line-height: 1.75; }
      .hero-tags { margin-bottom: 18px; }
      .hero-sub { margin-bottom: 12px; }
      .hero-body { line-height: 1.75; margin-bottom: 28px; }
      .hero-body-emphasis { font-size: 17px; line-height: 1.55; margin-bottom: 6px; white-space: normal; }
      .hero-mobile-break { display: initial; }
      .btn-lg { padding: 15px 28px; }
      .hero-btns, .cta-btns { flex-direction: column; align-items: flex-start; }
      .hero-img { object-position: 62% 30%; }
      .cta-btns { align-items: center; }
      .feat-grid { grid-template-columns: 1fr; }
      .feat-grid, .values-grid, .offer-grid, .events-grid, .family-grid { gap: 12px; }
      .values-grid { grid-template-columns: 1fr; }
      .feat-card, .offer-card { padding: 20px 18px; }
      .tcl-value-card { padding: 20px 18px; flex-direction: row; align-items: flex-start; gap: 14px; }
      .tcl-value-icon { font-size: 24px; flex-shrink: 0; }
      .tcl-value-title { font-size: 16px; margin-bottom: 6px; }
      .tcl-value-copy { line-height: 1.65; }
      .feat-lbl { font-size: 15px; margin-bottom: 9px; }
      .feat-title { font-size: 18px; line-height: 1.45; margin-bottom: 8px; }
      .feat-desc { font-size: 13px; line-height: 1.7; }
      .offer-top { margin-bottom: 10px; }
      .offer-block p { line-height: 1.65; }
      .family-card { padding: 13px 14px; line-height: 1.55; }
      .event-body { padding: 22px 20px; }
      .event-status { margin-bottom: 10px; }
      .event-name { font-size: 22px; margin-bottom: 8px; }
      .event-desc { line-height: 1.65; margin: 8px 0 16px; }
      .event-dets { gap: 7px; }
      .event-det { padding-bottom: 7px; }
      .faq-q { padding: 15px 18px; }
      .faq-a-inner { padding: 0 18px 15px; line-height: 1.75; }
      .scene-grid { grid-template-columns: 1fr; }
      .scene-grid .scene-card:last-child { display: block; }
      .stat-item + .stat-item::before { display: none; }
      .ft-social-text { justify-content: center; flex-wrap: nowrap; gap: 8px; }
      .sns-link { min-width: 44px; min-height: 44px; padding: 8px; justify-content: center; }
      .sns-link span:last-child { display: none; }
      .sns-icon { width: 28px; height: 28px; }
      body { padding-bottom: 0; }
      body.has-sticky-cta { padding-bottom: 88px; }
      .mobile-sticky-cta {
        position: fixed; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 450;
        display: block; opacity: 0; transform: translateY(18px); pointer-events: none;
        transition: opacity .32s ease, transform .32s ease;
      }
      .mobile-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .mobile-sticky-cta a {
        min-height: 58px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        border-radius: var(--radius-md); background: var(--lime); color: var(--navy);
        font-weight: 800; font-size: 15px; box-shadow: 0 14px 34px rgba(0,0,0,.28);
      }
      .mobile-sticky-cta a:focus-visible { outline: 3px solid rgba(255,255,255,.75); outline-offset: 3px; }
      .mobile-sticky-cta .arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
    }