/* ===== Base Reset ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    body {
      background: #FBF7EC;
      color: #2B2A1E;
      font-family: 'Noto Sans JP', sans-serif;
      line-height: 1.6;
    }

    .main-content { padding:0 !important; overflow-x:hidden; }
    .parallax-root { font-family:'Noto Sans JP',sans-serif; position:relative; }

    /* ════════ ヘッダー ════════ */
    .site-header {
      position:fixed; top:0; left:0; right:0; z-index:200;
      background:rgba(251,247,236,.75); backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(43,42,30,.08);
      transition:background .3s, border-color .3s;
    }
    .site-header.scrolled {
      background:rgba(251,247,236,.92); border-bottom-color:rgba(43,42,30,.14);
    }
    .site-header-inner {
      max-width:1100px; margin:0 auto; padding:12px 24px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .site-logo {
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color:#2B2A1E;
    }
    .site-logo-icon {
      position:relative; display:inline-flex; width:36px; height:36px;
      flex-shrink:0;
    }
    .site-logo-icon img {
      width:100%; height:100%; border-radius:50%; display:block;
      animation:waddle 1.8s ease-in-out infinite;
      filter:drop-shadow(0 0 10px rgba(240,168,60,.35));
    }
    @keyframes waddle {
      0%,100%{ transform:translateY(0) rotate(-6deg); }
      50%{ transform:translateY(-2px) rotate(6deg); }
    }
    .logo-speedlines {
      position:absolute; right:100%; top:50%; transform:translateY(-50%);
      display:flex; flex-direction:column; gap:3px; margin-right:5px;
    }
    .logo-speedlines span {
      display:block; height:2px; border-radius:2px;
      background:rgba(91,127,77,.6);
      animation:speedFade 1.8s ease-in-out infinite;
    }
    .logo-speedlines span:nth-child(1){ width:12px; animation-delay:0s; }
    .logo-speedlines span:nth-child(2){ width:8px;  animation-delay:.2s; }
    .logo-speedlines span:nth-child(3){ width:5px;  animation-delay:.4s; }
    @keyframes speedFade {
      0%,100%{ opacity:.15; transform:translateX(1px); }
      50%{ opacity:.7; transform:translateX(-2px); }
    }
    .site-logo-text {
      font-family:'Kaisei Decol',serif; font-size:19px; font-weight:700;
      letter-spacing:.5px;
    }
    .site-nav { display:flex; align-items:center; gap:18px; }
    .site-nav .nav-link {
      color:rgba(43,42,30,.75); text-decoration:none;
      font-size:14px; font-weight:700; letter-spacing:.3px;
      transition:color .2s;
    }
    .site-nav .nav-link:hover { color:#2B2A1E; }
    .btn-sm { padding:10px 24px !important; font-size:14px !important; }
    @media (max-width:640px) {
      .site-logo-text { font-size:16px; }
      .site-nav .nav-link { display:none; }
      .btn-sm { padding:9px 18px !important; font-size:13px !important; }
    }

    /* ════════ ヒーロー（木漏れ日） ════════ */
    .hero-section {
      position:relative; height:100vh; min-height:600px;
      overflow:hidden; display:flex; align-items:center;
      justify-content:center;
      background: linear-gradient(180deg, #FFF9EA 0%, #FBF0D2 55%, #F3E3B8 100%);
    }
    /* 木漏れ日レイヤー：ふわっと漂う光の玉と、舞い落ちる葉っぱ（starLayerの代わり） */
    .star-layer { position:absolute; inset:0; will-change:transform; overflow:hidden; }
    .star {
      /* 旧: 瞬く星 → 木漏れ日の光の玉（ソフトなぼかし円） */
      position:absolute; border-radius:50%;
      background: radial-gradient(circle, rgba(255,250,225,.9) 0%, rgba(255,224,150,.25) 60%, transparent 75%);
      filter: blur(1px);
      animation: twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
    }
    @keyframes twinkle {
      0%,100%{opacity:var(--min-op,.3);transform:scale(1);}
      50%{opacity:1;transform:scale(1.3);}
    }
    /* 舞い落ちる葉っぱ */
    .leaf {
      position:absolute; top:-10%;
      font-size:var(--lsize,16px);
      opacity:0;
      animation:leafFall var(--ldur,12s) linear infinite var(--ldelay,0s);
      pointer-events:none;
      will-change:transform, opacity;
    }
    @keyframes leafFall {
      0%   { transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
      8%   { opacity:.65; }
      50%  { transform:translateY(60vh) translateX(var(--ldrift,40px)) rotate(180deg); }
      92%  { opacity:.5; }
      100% { transform:translateY(120vh) translateX(calc(var(--ldrift,40px) * -1)) rotate(360deg); opacity:0; }
    }
    /* 旧: 地球アイコン → 使用しない（下でleaf-fallに置き換え） */
    .earth-layer { display:none; }
    .hero-content {
      position:relative; z-index:10; text-align:center;
      color:#2B2A1E; padding:0 24px; margin-bottom:15vh;
    }
    .hero-eyebrow {
      font-size:12px; letter-spacing:5px; text-transform:uppercase;
      color:#B9791F; margin-bottom:16px;
      opacity:0; animation:fadeUp .8s .3s forwards;
    }
    .hero-keywords {
      font-size:clamp(14px,2vw,20px); letter-spacing:2px; font-weight:700;
      color:rgba(43,42,30,.82); margin-bottom:20px;
    }
    .hk-arrow { color:#7A9B5E; margin:0 2px; }
    .hero-title {
      font-family:'Kaisei Decol',serif;
      font-size:clamp(36px,8vw,88px); font-weight:700;
      line-height:1.15; margin-bottom:20px;
      opacity:0; animation:fadeUp .8s .5s forwards;
      color:#2B2A1E;
      text-shadow:0 4px 40px rgba(240,168,60,.25);
    }
    .hero-title span { color:#B9791F; }
    .hero-sub {
      font-size:clamp(14px,2vw,18px); color:rgba(43,42,30,.72);
      line-height:1.9; margin-bottom:40px;
      opacity:0; animation:fadeUp .8s .7s forwards;
      text-shadow: none;
    }
    /* スマホ用 */
    @media (max-width: 768px) {
      .hero-sub {
        font-size: 13px;   /* 少し小さく */
        line-height: 1.7;  /* 行間も少し詰める */
      }
    }
    .hero-buttons {
      display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
      opacity:0; animation:fadeUp .8s .9s forwards;
    }
    @keyframes fadeUp {
      from{opacity:0;transform:translateY(30px);}
      to{opacity:1;transform:translateY(0);}
    }
    .btn-primary {
      background:linear-gradient(135deg,#7A9B5E,#5B7F4D); color:#FFFDF6;
      padding:14px 40px; border-radius:50px; font-size:16px; font-weight:700;
      text-decoration:none; box-shadow:0 8px 30px rgba(91,127,77,.35); transition:all .25s;
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(91,127,77,.45);}
    .btn-ghost {
      background:rgba(255,255,255,.5); color:#2B2A1E;
      padding:14px 40px; border-radius:50px; font-size:16px; font-weight:700;
      text-decoration:none; border:2px solid rgba(43,42,30,.25); transition:all .25s;
      backdrop-filter:blur(8px);
      text-shadow: none;
      box-shadow: 0 4px 16px rgba(120,90,40,.1);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.8);border-color:rgba(43,42,30,.4); }
    .scroll-hint {
      position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
      color:rgba(43,42,30,.4); font-size:12px; letter-spacing:3px; text-transform:uppercase;
      display:flex; flex-direction:column; align-items:center; gap:8px;
      animation:bounce2 2s ease-in-out infinite;
    }
    @keyframes bounce2{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}
    .scroll-arrow {
      width:20px; height:20px;
      border-right:2px solid rgba(43,42,30,.4);
      border-bottom:2px solid rgba(43,42,30,.4);
      transform:rotate(45deg);
    }

    /* ════════ 本の見出しの周りに使う共通mockup（電話フレーム）════════ */
    .mockup-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      max-width: 1000px;
      margin: 60px auto 0;
      padding: 0 24px;
      flex-wrap: wrap;
    }
    .mockup-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      flex: 1;
      min-width: 220px;
      max-width: 300px;
    }
    .mockup-item.center-item {
      transform: scale(1.05);
      transform-origin: center center;
    }
    .mockup-phone {
      position: relative;
      width: 100%;
      aspect-ratio: 9/19.5;
      background: #3B2E22;
      border-radius: 40px;
      border: 3px solid rgba(43,42,30,.18);
      box-shadow:
        0 0 0 1px rgba(43,42,30,.06),
        0 30px 70px rgba(120,90,40,.22),
        inset 0 0 0 1px rgba(255,255,255,.05);
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      cursor: pointer;
    }
    .mockup-phone::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 6px;
      background: rgba(255,255,255,0.2);
      border-radius: 3px;
      z-index: 10;
    }
    .mockup-phone:hover {
      transform: translateY(-12px) scale(1.02);
      border-color: rgba(91,127,77,0.45);
      box-shadow:
        0 0 0 1px rgba(91,127,77,0.2),
        0 40px 90px rgba(120,90,40,.28),
        0 0 40px rgba(240,168,60,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    }
    .mockup-phone img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      background: #3B2E22;
    }
    .mockup-info {
      text-align: center;
    }
    .mockup-label {
      display: inline-block;
      background: rgba(91,127,77,0.15);
      color: #4F7A3F;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 10px;
    }
    .mockup-title {
      font-size: 18px;
      font-weight: 700;
      color: #2B2A1E;
      margin-bottom: 8px;
    }
    .mockup-desc {
      font-size: 13px;
      color: rgba(43,42,30,0.62);
      line-height: 1.7;
    }
    .sc-free-badge {
      display: inline-block;
      margin-top: 32px;
      background: rgba(91,127,77,0.12);
      border: 1px solid rgba(91,127,77,0.3);
      color: #4F7A3F;
      font-size: 13px;
      padding: 6px 18px;
      border-radius: 20px;
      text-align: center;
    }
    @media (max-width: 768px) {
      .mockup-item.center-item { transform: none; }
      .mockup-grid { gap: 32px; }
    }

    /* ════════ スティッキースタッキング ════════ */
    .stack-section {
      background:#FBF3DD;
      padding-bottom:0;
    }
    .stack-wrapper {
      max-width:900px; margin:0 auto;
      padding:80px 24px 0;
    }
    .stack-header {
      text-align:center; padding-bottom:60px;
    }
    .stack-cards {
      position:relative;
    }
    .stack-card {
      position:sticky;
      top:80px;               /* ヘッダーの高さ分 */
      background:#FFFDF6;
      border:1px solid rgba(43,42,30,.1);
      border-radius:28px;
      padding:52px 48px;
      margin-bottom:24px;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:32px;
      align-items:center;
      transition:box-shadow .3s;
      will-change:transform;
    }
    .stack-card:hover {
      box-shadow:0 20px 50px rgba(120,90,40,.18);
      border-color:rgba(91,127,77,.35);
    }
    /* 各カードのtopをずらして重なり感を出す */
    .stack-card:nth-child(1){top:80px;}
    .stack-card:nth-child(2){top:96px;}
    .stack-card:nth-child(3){top:112px;}
    .stack-card:nth-child(4){top:128px;}
    .stack-card:nth-child(5){top:144px;}
    .stack-card:nth-child(6){top:160px;}
    .stack-card:nth-child(7){top:176px;}
    .stack-card:nth-child(8){top:192px;}
    /* カードの色アクセント */
    .stack-card:nth-child(1) .sc-num{color:#5B7F4D;}
    .stack-card:nth-child(2) .sc-num{color:#B9791F;}
    .stack-card:nth-child(3) .sc-num{color:#7A9B5E;}
    .stack-card:nth-child(4) .sc-num{color:#D98A3D;}
    .stack-card:nth-child(5) .sc-num{color:#C97A57;}
    .stack-card:nth-child(6) .sc-num{color:#4F7A3F;}
    .stack-card:nth-child(7) .sc-num{color:#E3922E;}
    .stack-card:nth-child(8) .sc-num{color:#8FAE73;}
    .sc-left { text-align:center; min-width:100px; }
    .sc-num {
      font-family:'Kaisei Decol',serif;
      font-size:80px; font-weight:700; line-height:1;
      display:block; margin-bottom:4px;
      opacity: 0.9;
    }
    .sc-title {
      font-family:'Kaisei Decol',serif;
      font-size:clamp(20px,3vw,28px); font-weight:700;
      color:#2B2A1E; margin-bottom:12px;
    }
    .sc-desc {
      font-size:16px; color:rgba(43,42,30,.68);
      line-height:2.0;
    }
    .sc-tag {
      display:inline-block; margin-top:16px;
      background:rgba(91,127,77,.08); border:1px solid rgba(91,127,77,.2);
      border-radius:20px; padding:4px 14px;
      font-size:16px; color:#4F7A3F; letter-spacing:1px;
    }
    /* スペーサー（最後のカードが画面中央に来るように） */
    .stack-spacer { height:60vh; }

    @media(max-width:600px){
      /* スタッキングカード: 画像1のレイアウト
         番号＋絵文字を横並びで左上、タイトル・説明を下に縦並び */
      .stack-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 24px;
      }
      .sc-left {
        display: flex;
        align-items: center;
        gap: 14px;
        /* 横並び: 番号と絵文字を左寄せ */
        justify-content: flex-start;
        text-align: left;
      }
      .sc-num  { font-size: 38px; margin-bottom: 0; }
      .sc-emoji{ font-size: 32px; }
      .sc-title{ font-size: 18px; }
      .sc-desc { font-size: 15px; line-height: 1.9; }
    }

    /* ════════ ルート ════════ */
    .routes-section {
      background:#0a0f2e; padding:120px 24px;
      position:relative; overflow:clip;
    }
    .routes-section::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 100% 60% at 80% 50%,rgba(59,130,246,.1) 0%,transparent 70%);
      pointer-events:none;
    }
    .section-title {
      text-align:center; font-family:'Kaisei Decol',serif;
      font-size:clamp(28px,5vw,52px); color:#2B2A1E; margin-bottom:16px;
    }
    .section-sub {
      text-align:center; color:rgba(43,42,30,.55);
      font-size:15px; margin-bottom:72px; line-height:1.7;
    }
    .routes-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      gap:16px; max-width:960px; margin:0 auto; position:relative; z-index:1;
    }
    .route-card {
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
      border-radius:16px; padding:20px 16px; text-align:center;
      transition:all .3s; opacity:0; transform:scale(.9);
    }
    .route-card.visible{opacity:1;transform:scale(1);}
    .route-card:hover{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.5);transform:scale(1.05);box-shadow:0 10px 30px rgba(59,130,246,.2);}
    .route-emoji{font-size:32px;margin-bottom:10px;display:block;}
    .route-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);line-height:1.4;}

    /* 写真エリア — aspect-ratio で統一 */
    .route-photo {
      position:relative;
      width:100%;
      aspect-ratio:16/10;   /* 全カード同じ比率 */
      overflow:hidden;
      background:#08101e;
    }
    .route-photo img {
      width:100%; height:100%; object-fit:cover; object-position:center;
      display:block;
      transition:transform .5s ease, filter .5s ease;
      filter:brightness(.92) saturate(1.1);
    }
    .route-card:hover .route-photo img { transform:scale(1.1); filter:brightness(1.0) saturate(1.2); }
    /* グラデーションオーバーレイ */
    .route-photo::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(to bottom, transparent 45%, rgba(5,10,26,.85) 100%);
    }
    /* フラグ + ルート名 オーバーレイ */
    .route-overlay {
      position:absolute; bottom:0; left:0; right:0;
      padding:10px 12px; z-index:1;
      display:flex; align-items:center; gap:8px;
    }
    .route-photo-flag { font-size:24px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); flex-shrink:0; }
    .route-name { font-size:13px; font-weight:800; color:#fff; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.8); }
    /* カラーバー */
    .route-bar { height:3px; background:var(--bar, linear-gradient(90deg,#3b82f6,#6366f1)); }
    /* ★ 削除: 旧 route-body / route-spots / route-spot */
    .route-spots_UNUSED {
      display:flex; flex-direction:column; gap:5px;
    }
    .route-spot {
      display:flex; align-items:center; gap:7px;
      font-size:12px; color:rgba(255,255,255,.5);
      padding:4px 8px; border-radius:8px;
      background:rgba(255,255,255,.04);
      transition:background .2s, color .2s;
    }
    .route-card:hover .route-spot{ color:rgba(255,255,255,.75); background:rgba(255,255,255,.07); }
    .route-spot-icon{ font-size:14px; }

    /* ════════ 特徴（3枚・重要感デザイン） ════════ */
    .features-section {
      background: linear-gradient(180deg,#FBF7EC 0%,#FBF3DD 50%,#F6EAC8 100%);
      padding: 120px 24px; position: relative; overflow: clip;
    }
    .features-section::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(240,168,60,.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .section-title {
      text-align: center; font-family: 'Kaisei Decol', serif;
      font-size: clamp(26px,5vw,52px); color: #2B2A1E; margin-bottom: 14px; position: relative;
    }
    .section-sub {
      text-align: center; color: rgba(43,42,30,.5);
      font-size: 15px; margin-bottom: 64px; line-height: 1.7; position: relative;
    }
    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      max-width: 720px;
      margin: 0 auto;
      position: relative;
    }
    /* カード全体 */
    .feature-card {
      position: relative;
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 32px;
      align-items: center;
      border-radius: 24px;
      padding: 36px 40px;
      border: 1.5px solid var(--fc-border, rgba(255,255,255,.12));
      background: var(--fc-bg, rgba(255,255,255,.04));
      box-shadow: 0 4px 30px var(--fc-shadow, rgba(0,0,0,.3));
      overflow: hidden;
      opacity: 0; transform: translateY(36px);
      transition:
        opacity .7s cubic-bezier(.22,1,.36,1) var(--delay,0s),
        transform .7s cubic-bezier(.22,1,.36,1) var(--delay,0s),
        box-shadow .3s, border-color .3s;
    }
    /* 左端のカラーライン */
    .feature-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: var(--fc-line, linear-gradient(180deg,#7dd3fc,#6366f1));
      border-radius: 4px 0 0 4px;
    }
    /* 右背景グロー */
    .feature-card::after {
      content: '';
      position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
      width: 260px; height: 260px;
      background: radial-gradient(circle, var(--fc-glow, rgba(99,102,241,.12)) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .feature-card.visible { opacity: 1; transform: translateY(0); }
    .feature-card:hover {
      border-color: var(--fc-border-hover, rgba(125,211,252,.5));
      box-shadow: 0 16px 56px var(--fc-shadow-hover, rgba(0,0,0,.5));
    }

    /* カード1: 青 */
    .feature-card:nth-child(1) {
      --fc-bg:           linear-gradient(135deg, rgba(14,28,70,.85), rgba(8,16,48,.9));
      --fc-border:       rgba(96,165,250,.3);
      --fc-border-hover: rgba(96,165,250,.7);
      --fc-line:         linear-gradient(180deg,#7dd3fc,#3b82f6);
      --fc-shadow:       rgba(59,130,246,.2);
      --fc-shadow-hover: rgba(59,130,246,.4);
      --fc-glow:         rgba(59,130,246,.15);
      --fc-icon-bg:      linear-gradient(135deg,#1d4ed8,#3b82f6);
      --fc-num:          #7dd3fc;
    }
    /* カード2: 緑 */
    .feature-card:nth-child(2) {
      --fc-bg:           linear-gradient(135deg, rgba(6,28,20,.85), rgba(4,20,14,.9));
      --fc-border:       rgba(52,211,153,.3);
      --fc-border-hover: rgba(52,211,153,.7);
      --fc-line:         linear-gradient(180deg,#6ee7b7,#10b981);
      --fc-shadow:       rgba(16,185,129,.2);
      --fc-shadow-hover: rgba(16,185,129,.4);
      --fc-glow:         rgba(16,185,129,.15);
      --fc-icon-bg:      linear-gradient(135deg,#047857,#10b981);
      --fc-num:          #6ee7b7;
    }
    /* カード3: 紫 */
    .feature-card:nth-child(3) {
      --fc-bg:           linear-gradient(135deg, rgba(20,10,50,.85), rgba(14,6,36,.9));
      --fc-border:       rgba(167,139,250,.3);
      --fc-border-hover: rgba(167,139,250,.7);
      --fc-line:         linear-gradient(180deg,#c4b5fd,#8b5cf6);
      --fc-shadow:       rgba(139,92,246,.2);
      --fc-shadow-hover: rgba(139,92,246,.4);
      --fc-glow:         rgba(139,92,246,.15);
      --fc-icon-bg:      linear-gradient(135deg,#6d28d9,#8b5cf6);
      --fc-num:          #c4b5fd;
    }

    /* アイコンボックス */
    .fc-icon-wrap {
      position: relative;
      width: 88px; height: 88px;
      border-radius: 22px;
      background: var(--fc-icon-bg, rgba(255,255,255,.1));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 28px rgba(0,0,0,.35);
      flex-shrink: 0;
    }
    /* 番号バッジ */
    .fc-badge {
      position: absolute;
      top: -8px; right: -8px;
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--fc-num, #7dd3fc);
      color: #04091a;
      font-size: 11px; font-weight: 900;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    .fc-emoji { font-size: 42px; display: block; line-height: 1; }
    /* テキスト */
    .fc-text { position: relative; z-index: 1; }
    .fc-title {
      font-family: 'Kaisei Decol', serif;
      font-size: clamp(18px, 2.4vw, 22px); font-weight: 700;
      color: #fff; margin-bottom: 10px; line-height: 1.3;
    }
    .fc-desc {
      font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.85;
      margin: 0;
    }

    /* スマホ用 */
    @media (max-width: 600px) {
      .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .feature-card {
        padding: 32px 24px;
      }

      .section-title {
        font-size: 28px;
      }

      .section-sub {
        margin-bottom: 40px;
        font-size: 14px;
      }
    }
    @media (max-width: 768px) {
      .features-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ════════ 本（近日公開） ════════ */
    .books-section {
      background:linear-gradient(180deg,#FBF3DD,#FBF7EC);
      padding:120px 24px; text-align:center;
    }
    .books-badge {
      display:inline-block; background:rgba(251,191,36,.15);
      border:1px solid rgba(251,191,36,.4); color:#fbbf24;
      font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
      padding:6px 20px; border-radius:50px; margin-bottom:24px;
    }
    .books-title{font-family:'Kaisei Decol',serif;font-size:clamp(24px,4vw,44px);color:#2B2A1E;margin-bottom:16px;}
    .books-desc{font-size:15px;color:rgba(43,42,30,.55);line-height:1.8;max-width:500px;margin:0 auto 48px;}
    /* ── 横スクロールラッパー ── */
    .books-scroll-outer {
      position: relative;
      margin-bottom: 48px;
    }
    /* 左右フェードアウト */
    .books-scroll-outer::before,
    .books-scroll-outer::after {
      content: '';
      position: absolute; top: 0; bottom: 0; width: 60px;
      pointer-events: none; z-index: 2;
    }
    .books-scroll-outer::before {
      left: 0;
      background: linear-gradient(to right, #0a0f2e, transparent);
    }
    .books-scroll-outer::after {
      right: 0;
      background: linear-gradient(to left, #0a0f2e, transparent);
    }
    .books-mockup {
      display: flex;
      gap: 32px;
      justify-content: center;
      align-items: flex-end;
      padding: 24px 24px 40px;
    }
    .book-stub {
      width: 140px; height: 196px;
      border-radius: 6px 14px 14px 6px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; font-size: 24px;
      box-shadow: 8px 10px 32px rgba(0,0,0,.6);
      position: relative; overflow: hidden;
      transition: transform .3s, box-shadow .3s;
    }
    /* スマホ用 */
    @media (max-width: 768px) {
      .book-stub {
        width: 90px;     /* ←小さく */
        height: 126px;   /* ←小さく */
        font-size: 24px; /* ←文字も縮小 */
      }
    }

    .book-stub::before { content:''; position:absolute; left:0; top:0; bottom:0; width:9px; background:rgba(0,0,0,.3); }
    .book-stub:hover { transform: translateY(-10px) rotate(-2deg); box-shadow: 10px 14px 32px rgba(0,0,0,.6); }
    .book-stub:nth-child(1){background:linear-gradient(135deg,#3b82f6,#6366f1);}
    .book-stub:nth-child(2){background:linear-gradient(135deg,#10b981,#0d9488);}
    .book-stub:nth-child(3){background:linear-gradient(135deg,#f59e0b,#ef4444);}
    .book-stub:nth-child(4){background:linear-gradient(135deg,#8b5cf6,#ec4899);}
    .book-stub:nth-child(5){background:linear-gradient(135deg,#06b6d4,#3b82f6);}
    .book-stub:nth-child(6){background:linear-gradient(135deg,#f43f5e,#fb923c);}
    .book-stub:nth-child(7){background:linear-gradient(135deg,#84cc16,#10b981);}
    .book-stub:nth-child(8){background:linear-gradient(135deg,#fbbf24,#f59e0b);}
    .book-stub:nth-child(9){background:linear-gradient(135deg,#22c55e,#4ade80);}
    .book-stub:nth-child(10){background:linear-gradient(135deg,#0ea5e9,#38bdf8);}
    .book-stub:nth-child(11){background:linear-gradient(135deg,#eab308,#fde047);}
    .book-stub:nth-child(12){background:linear-gradient(135deg,#ef4444,#f87171);}
    .book-stub:nth-child(13){background:linear-gradient(135deg,#a855f7,#c084fc);}
    .book-stub:nth-child(14){background:linear-gradient(135deg,#14b8a6,#2dd4bf);}
    .book-stub:nth-child(15){background:linear-gradient(135deg,#f97316,#fb923c);}
    .book-stub:nth-child(16){background:linear-gradient(135deg,#6366f1,#818cf8);}
    .book-stub:nth-child(17){background:linear-gradient(135deg,#ec4899,#f472b6);}
    .book-stub:nth-child(18){background:linear-gradient(135deg,#06b6d4,#67e8f9);}
    .book-stub.comic span {font-size: 0.8em}
    
    /* ════════ 公開ルート詳細カード ════════ */
    .route-detail-section {
      background: linear-gradient(180deg, #FBF3DD 0%, #F6EAC8 100%);
      padding: 100px 24px;
      position: relative;
    }
    .route-detail-section::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 50% at 20% 50%, rgba(240,168,60,.10) 0%, transparent 60%);
      pointer-events: none;
    }
    .route-detail-inner {
      max-width: 960px;
      margin: 0 auto;
    }
    .route-detail-badge {
      display: inline-block;
      background: rgba(240,168,60,.14);
      border: 1px solid rgba(240,168,60,.4);
      color: #B9791F;
      font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      padding: 5px 18px; border-radius: 50px; margin-bottom: 20px;
    }
    .route-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 56px;
    }
    .rd-card {
      background: #FFFDF6;
      border: 1px solid rgba(43,42,30,.1);
      border-radius: 20px;
      overflow: hidden;
      opacity: 0; transform: translateY(28px);
      transition: opacity .7s ease var(--rd-delay,0s), transform .7s ease var(--rd-delay,0s),
                  box-shadow .3s, border-color .3s;
    }
    .rd-card.visible {
      opacity: 1; transform: translateY(0);
    }
    .rd-card:hover {
      box-shadow: 0 20px 50px rgba(120,90,40,.18);
      border-color: rgba(91,127,77,.35);
    }
    .rd-header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid rgba(43,42,30,.08);
      display: flex; align-items: center; gap: 14px;
    }
    .rd-emoji {
      font-size: 36px; flex-shrink: 0;
      width: 56px; height: 56px;
      background: rgba(240,168,60,.1);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .rd-title-wrap {}
    .rd-name {
      font-family: 'Kaisei Decol', serif;
      font-size: 18px; font-weight: 700; color: #2B2A1E;
      margin-bottom: 4px;
    }
    .rd-tag-row {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .rd-tag {
      font-size: 10px; font-weight: 700; letter-spacing: 1px;
      padding: 2px 10px; border-radius: 20px;
    }
    .rd-tag.free  { background: rgba(91,127,77,.14); color: #4F7A3F; border: 1px solid rgba(91,127,77,.3); }
    .rd-tag.solo  { background: rgba(240,168,60,.14); color: #B9791F; border: 1px solid rgba(240,168,60,.3); }
    .rd-tag.group { background: rgba(199,124,58,.14); color: #A8632E; border: 1px solid rgba(199,124,58,.3); }
    .rd-body {
      padding: 20px 24px;
    }
    .rd-distance {
      font-size: 28px; font-weight: 900; color: #B9791F;
      font-family: 'Kaisei Decol', serif;
      margin-bottom: 4px;
    }
    .rd-distance span {
      font-size: 14px; font-weight: 400; color: rgba(43,42,30,.4);
      margin-left: 4px;
    }
    .rd-difficulty {
      font-size: 12px; color: rgba(43,42,30,.5);
      margin-bottom: 18px;
    }
    .rd-guide {
      display: flex; flex-direction: column; gap: 8px;
    }
    .rd-guide-row {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 13px; color: rgba(43,42,30,.68);
      line-height: 1.6;
    }
    .rd-guide-icon {
      flex-shrink: 0;
      font-size: 15px;
      margin-top: 1px;
    }
    .rd-footer {
      padding: 14px 24px 20px;
      border-top: 1px solid rgba(43,42,30,.07);
    }
    .rd-vehicle {
      font-size: 12px; color: rgba(43,42,30,.4);
      display: flex; align-items: center; gap: 6px;
    }
    @media (max-width: 600px) {
      .route-detail-grid { grid-template-columns: 1fr; }
    }

    /* ════════ CTA（陽だまり再び） ════════ */
    .cta-section {
      position:relative; min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(180deg, #F6EAC8 0%, #F0DBA0 100%);
      overflow:hidden;
      padding:80px 24px;
    }
    .cta-stars-layer { position:absolute; inset:0; will-change:transform; overflow:hidden; }
    .cta-glow {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:700px; height:700px;
      background:radial-gradient(circle,rgba(240,168,60,.25) 0%,transparent 70%);
      border-radius:50%; pointer-events:none; animation:glowPulse 4s ease-in-out infinite;
    }
    @keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7;}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1;}}
    .cta-shooting-star {
      /* 旧: 流れ星 → ふわりと舞う葉っぱの粒（JS側で葉に置き換え） */
      position:absolute; width:6px; height:6px; background:#7A9B5E; border-radius:2px 8px;
      animation:shoot var(--dur,3s) linear infinite var(--delay,0s);
      opacity:0;
    }
    @keyframes shoot {
      0%  {opacity:0;transform:translate(0,0) rotate(0deg);}
      5%  {opacity:.8;}
      60% {opacity:.5;}
      100%{opacity:0;transform:translate(var(--tx,300px),var(--ty,200px)) rotate(180deg);}
    }
    .cta-content { position:relative; z-index:10; text-align:center; color:#2B2A1E; }
    .cta-eyebrow {
      font-size:12px; letter-spacing:5px; text-transform:uppercase;
      color:#B9791F; margin-bottom:20px;
      opacity:0; animation:fadeUp .8s .2s both;
    }
    .cta-title {
      font-family:'Kaisei Decol',serif;
      font-size:clamp(36px,7vw,80px); font-weight:700;
      line-height:1.2; margin-bottom:20px;
      opacity:0; animation:fadeUp .8s .4s both;
      color:#2B2A1E;
      text-shadow:0 4px 60px rgba(240,168,60,.35);
    }
    .cta-sub {
      font-size:clamp(14px,2vw,18px); color:rgba(43,42,30,.6);
      line-height:1.9; margin-bottom:48px;
      opacity:0; animation:fadeUp .8s .6s both;
    }
    .cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s .8s both;}
    .cta-earth {
      /* 旧: 地球アイコン → 使用しない */
      display: none;
    }

    /* ── reveal ── */
    .route-card{transition:opacity .5s ease var(--card-delay,0s),transform .5s ease var(--card-delay,0s),background .3s,border-color .3s,box-shadow .3s;}

    /* ── レスポンシブ: 480px以下 ── */
    @media(max-width:480px){
      /* 写真カード: 2列固定 */
      .routes-grid { grid-template-columns: repeat(2,1fr) !important; gap:10px; }
      .route-name  { font-size:11px; }

      /* 特徴カード: 画像2のレイアウト
         アイコン中央・タイトル中央・説明文中央 */
      .features-section { padding: 80px 16px; }
      .features-grid    { grid-template-columns: 1fr; gap: 16px; }
      .feature-card     { grid-template-columns: 72px 1fr; gap: 20px; padding: 28px 22px; }
      .fc-icon-wrap     { width: 68px; height: 68px; border-radius: 18px; }
      .fc-emoji  { font-size: 34px; }
      .fc-title  { font-size: 17px; }
      .fc-desc   { font-size: 14px; }

      /* スタッキング幅調整 */
      .stack-wrapper { padding: 60px 16px 0; }
      .stack-card    { padding: 24px 18px; }
    }

    /* ════════ カスタムルート紹介 ════════ */
    .custom-section {
      background: linear-gradient(180deg, #050a1a 0%, #0a0f2e 40%, #0d1040 100%);
      padding: 120px 24px;
      position: relative;
      overflow: hidden;
    }
    .custom-section::before {
      content: '';
      position: absolute;
      top: -200px; left: 50%; transform: translateX(-50%);
      width: 900px; height: 600px;
      background: radial-gradient(ellipse, rgba(99,102,241,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .custom-inner {
      max-width: 960px;
      margin: 0 auto;
    }
    .custom-badge {
      display: inline-block;
      background: rgba(99,102,241,.15);
      border: 1px solid rgba(99,102,241,.4);
      color: #a78bfa;
      font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      padding: 5px 18px; border-radius: 50px; margin-bottom: 20px;
    }
    .custom-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      margin-top: 60px;
    }
    @media (max-width: 720px) {
      .custom-layout { grid-template-columns: 1fr; gap: 40px; }
    }
    .custom-steps {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .custom-step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity .6s ease var(--sd,0s), transform .6s ease var(--sd,0s);
    }
    .custom-step.visible { opacity: 1; transform: translateX(0); }
    .custom-step-num {
      flex-shrink: 0;
      width: 42px; height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 900; color: #fff;
      box-shadow: 0 4px 16px rgba(99,102,241,.4);
    }
    .custom-step-body {}
    .custom-step-title {
      font-family: 'Kaisei Decol', serif;
      font-size: 16px; font-weight: 700; color: #fff;
      margin-bottom: 6px;
    }
    .custom-step-desc {
      font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.8;
    }
    .custom-mockup {
      position: relative;
      border-radius: 20px;
      background: #0d1535;
      border: 1px solid rgba(99,102,241,.3);
      padding: 20px;
      box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.1);
      opacity: 0; transform: translateY(32px);
      transition: opacity .8s ease .2s, transform .8s ease .2s;
    }
    .custom-mockup.visible { opacity: 1; transform: translateY(0); }
    .custom-mockup-header {
      display: flex; align-items: center; gap: 10px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      margin-bottom: 16px;
    }
    .cm-dot { width: 10px; height: 10px; border-radius: 50%; }
    .cm-dot:nth-child(1){ background: #ef4444; }
    .cm-dot:nth-child(2){ background: #f59e0b; }
    .cm-dot:nth-child(3){ background: #22c55e; }
    .cm-title-bar {
      flex: 1; height: 8px; border-radius: 4px;
      background: rgba(255,255,255,.08);
      margin-left: 8px;
    }
    .cm-map {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: 12px;
      background: linear-gradient(145deg, #0f2a4a 0%, #1a3a5c 30%, #0d2438 60%, #162d48 100%);
      position: relative;
      overflow: hidden;
      margin-bottom: 14px;
    }
    /* グリッド線 */
    .cm-map::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(99,162,241,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,162,241,.06) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .cm-route-line {
      position: absolute;
      top: 15%; left: 12%;
      width: 76%; height: 70%;
    }
    .cm-cp {
      position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 10px currentColor;
      transform: translate(-50%, -50%);
    }
    .cm-cp.start  { background: #22c55e; color: #22c55e; top: 20%; left: 15%; }
    .cm-cp.cp1    { background: #3b82f6; color: #3b82f6; top: 45%; left: 38%; }
    .cm-cp.cp2    { background: #f59e0b; color: #f59e0b; top: 28%; left: 62%; }
    .cm-cp.goal   { background: #ef4444; color: #ef4444; top: 65%; left: 82%; }
    .cm-cp-label {
      position: absolute;
      top: -22px; left: 50%; transform: translateX(-50%);
      font-size: 9px; color: #fff; white-space: nowrap;
      background: rgba(0,0,0,.6); border-radius: 4px; padding: 2px 6px;
    }
    .cm-cursor {
      position: absolute;
      width: 18px; height: 18px;
      background: rgba(255,255,255,.9);
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
      animation: cursorMove 4s ease-in-out infinite;
      top: 50%; left: 50%;
    }
    @keyframes cursorMove {
      0%   { top: 50%; left: 50%; }
      30%  { top: 38%; left: 68%; }
      60%  { top: 60%; left: 72%; }
      100% { top: 50%; left: 50%; }
    }
    .cm-click-ripple {
      position: absolute;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 2px solid rgba(99,162,241,.8);
      animation: ripple 4s ease-in-out infinite;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }
    @keyframes ripple {
      0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.5); top: 50%; left: 50%; }
      25%  { opacity: 0; }
      30%  { top: 40%; left: 70%; opacity: 1; transform: translate(-50%,-50%) scale(0.5); }
      50%  { opacity: 0; transform: translate(-50%,-50%) scale(2); top: 40%; left: 70%; }
      100% { opacity: 0; }
    }
    .cm-chips {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .cm-chip {
      font-size: 11px; padding: 5px 12px; border-radius: 20px;
      font-weight: 700;
    }
    .cm-chip.green  { background: rgba(34,197,94,.15);  color: #86efac; border: 1px solid rgba(34,197,94,.3); }
    .cm-chip.blue   { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
    .cm-chip.amber  { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
    .cm-chip.purple { background: rgba(139,92,246,.15); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
    .cm-chip.red    { background: rgba(239,68,68,.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }