/* ============================================================
   route-look.css — 最短巡旅(ツール・モデルコース)の見た目を、
   Story Travel・入口ページと同じ水準にそろえる(2026-10-19)
   暗い写真の先頭+大きな見出し、角丸24pxのカード、すりガラス、軽い動き
   ============================================================ */

/* ---- ツール(/route)の先頭 ---- */
.home .rt-hero{position:relative; isolation:isolate; overflow:hidden; color:#fff;
  margin:0 calc(50% - 50vw) 0; padding:34px max(16px, calc(50vw - 520px)) 76px; text-align:left;
  background:#0b1310}
.home .rt-hero .rt-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  animation:rt-zoom 14s ease-out forwards}
@keyframes rt-zoom{from{transform:scale(1.08)} to{transform:scale(1)}}
.home .rt-hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,14,11,.55),rgba(6,14,11,.45) 40%,rgba(6,14,11,.92)),
             radial-gradient(60% 60% at 90% 0%,rgba(95,214,168,.28),transparent 70%)}
.home .rt-hero .rt-k{margin:0; font-size:12px; font-weight:800; letter-spacing:.2em; color:#5fd6a8}
.home .rt-hero h1{margin:.35em 0 .3em; color:#fff; font-size:clamp(30px,8vw,56px); line-height:1.2; font-weight:800;
  font-feature-settings:"palt"; text-align:left}
.home .rt-hero h1 strong{background:linear-gradient(100deg,#5fd6a8,#9db0ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.home .rt-hero .hero-sub{margin:0; color:rgba(255,255,255,.85); font-size:clamp(14px,2.4vw,17px); text-align:left}
.home .rt-hero .rt-credit{position:absolute; right:12px; top:8px; margin:0; font-size:10px; color:rgba(255,255,255,.6)}
.home .rt-hero .rt-credit a{color:inherit}
/* 入力のカードを先頭に少し重ねる */
.home .planner{position:relative; z-index:2; margin-top:-52px}
.home .pcard{border-radius:24px; border:1px solid rgba(16,24,40,.06);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 36px rgba(16,24,40,.10)}
.home .pcard + .pcard{margin-top:12px}

/* ---- モデルコースの先頭(写真があれば写真、無ければ緑のにじみ) ---- */
.course-hero{position:relative; isolation:isolate; overflow:hidden; color:#fff; margin:0 -16px 18px;
  min-height:min(56vh,440px); display:flex; align-items:flex-end; border-radius:0 0 24px 24px;
  background:radial-gradient(70% 80% at 85% 0%,#2f9a74 0%,transparent 60%),linear-gradient(150deg,#06231a,#0f4634)}
.course-hero img{position:absolute; inset:0; width:100%; height:100%!important; max-width:none; margin:0; border-radius:0;
  object-fit:cover; z-index:-2}
.course-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,14,11,.2),rgba(6,14,11,.35) 45%,rgba(6,14,11,.9))}
.course-hero .ch-in{padding:24px 20px}
.course-hero .ch-k{margin:0; font-size:12px; font-weight:800; letter-spacing:.18em; color:#5fd6a8}
.course-hero h1{margin:.3em 0 0; color:#fff; font-feature-settings:"palt"}
.course-hero h1 .h1-main{display:block; font-size:clamp(28px,7vw,44px); line-height:1.2; font-weight:800}
.course-hero h1 .h1-sub{display:block; margin-top:6px; font-size:15px; font-weight:700; color:rgba(255,255,255,.85)}
.course-hero .ch-credit{position:absolute; right:10px; top:8px; margin:0; font-size:10px; color:rgba(255,255,255,.7)}
.course-hero .ch-credit a{color:inherit}
@media (min-width:760px){.course-hero{margin:0 0 22px; border-radius:24px}}

/* ほかのモデルコース:文字の一覧を、押しやすいカードの並びに */
.lp .otherlinks{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0}
.lp .otherlinks li{margin:0}
.lp .otherlinks a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  background:#fff; border:1px solid rgba(16,24,40,.08); box-shadow:0 4px 14px rgba(16,24,40,.06);
  text-decoration:none; font-weight:700; color:#0f4634; transition:transform .2s}
.lp .otherlinks a:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .home .rt-hero .rt-bg{animation:none}
  .lp .otherlinks a{transition:none}
}