/* ============================================================
   hub.css — ワカトラベルの入口（トップページ）だけの見た目
   3つの道具（物語＝茶・しおりば＝青・最短巡旅＝緑）を1本の道でつなぐ。
   動きは CSS のアニメーションと、スクロールで付く .in だけ。
   「動きを減らす」設定の人には、すべて止める（いちばん下）。
   ============================================================ */
body.hub{
  --c-story:#8a4a2b; --c-plan:#2b44a8; --c-route:#1c6b52;
  --hub-ink:#15201b; --hub-muted:#5b6670;
  background:#f7f6f2; color:var(--hub-ink);
}
.hub .wrap{max-width:1040px}
.c-story{color:var(--c-story)} .c-plan{color:var(--c-plan)} .c-route{color:var(--c-route)}

/* ---- ヘッダー（共通の形。サービス名の代わりにサービスへの小さな入口） ---- */
.hub-head{position:sticky; top:0; z-index:50; background:rgba(247,246,242,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.05)}
.hub-name{font-size:13px; font-weight:700; letter-spacing:.02em; color:#5b6670}  /* 共通ヘッダーの決まり(WAKA_HEADER.md) */
.hub-head .wrap{height:48px}
.hub-story-btn{gap:4px; padding:0 16px!important; background:#15201b; color:#fff!important; font-weight:800}
.hub-story-btn:hover{background:#2a3a33!important}
.hub-story-btn span{transition:transform .2s} .hub-story-btn:hover span{transform:translateX(3px)}
.hub-nav{display:flex; gap:4px}
.hub-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  font-size:13px; font-weight:700; text-decoration:none; border-radius:999px}
.hub-nav a:hover{background:rgba(0,0,0,.05)}

/* ---- 最初の画面 ---- */
.hub-hero{position:relative; overflow:hidden; padding:56px 0 44px}
.hub-glow{position:absolute; inset:-20% -10% auto; height:120%; pointer-events:none; filter:blur(60px); opacity:.55}
.hub-glow i{position:absolute; width:46vmax; height:46vmax; border-radius:50%;
  animation:drift 22s ease-in-out infinite alternate}
.hub-glow i:nth-child(1){background:#f3d9c6; left:-12%; top:-18%}
.hub-glow i:nth-child(2){background:#d3dcfa; right:-14%; top:-8%; animation-delay:-7s}
.hub-glow i:nth-child(3){background:#cfe8dc; left:28%; top:22%; animation-delay:-14s}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(6%,8%) scale(1.12)}}
.hub-hero .wrap{position:relative}
.hub-eyebrow{margin:0; font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--hub-muted)}
.hub-title{margin:.25em 0 0; font-size:clamp(32px,7.4vw,64px); line-height:1.18; letter-spacing:-.01em; font-weight:800}
@media (max-width:480px){.hub-title{font-size:clamp(25px,7vw,32px)}}
.hub-title span, .hub-title .nw{white-space:nowrap}
.hub-title span{background:linear-gradient(90deg,var(--c-story),var(--c-plan) 50%,var(--c-route));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hub-lead{margin:18px 0 0; max-width:40em; font-size:clamp(15px,2.2vw,17px); line-height:1.9; color:#3a4640}
.hub-lead .pc{display:none}
@media (min-width:720px){.hub-lead .pc{display:inline}}

/* 1本の道：線が伸びて、点が順に灯る */
.hub-route{display:block; width:100%; max-width:640px; height:auto; margin:26px 0 0; overflow:visible}
.hr-line{fill:none; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900; animation:drawline 2.4s .3s cubic-bezier(.6,.1,.3,1) forwards}
.hr-node circle{stroke:#fff; stroke-width:4; transform-box:fill-box; transform-origin:center;
  transform:scale(0); animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards}
.hr-node text{font-size:24px; font-weight:800; text-anchor:middle; opacity:0; animation:fadein .5s forwards}
.n1 circle{fill:var(--c-story); animation-delay:.4s} .n1 text{fill:var(--c-story); animation-delay:.6s}
.n2 circle{fill:var(--c-plan); animation-delay:1.3s} .n2 text{fill:var(--c-plan); animation-delay:1.5s}
.n3 circle{fill:var(--c-route); animation-delay:2.3s} .n3 text{fill:var(--c-route); animation-delay:2.5s}
@keyframes drawline{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fadein{to{opacity:1}}

.hub-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hub-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 26px;
  border-radius:999px; font-weight:800; font-size:16px; text-decoration:none; transition:transform .2s, box-shadow .2s}
.hub-btn.primary{background:var(--c-route); color:#fff; box-shadow:0 8px 24px rgba(28,107,82,.28)}
.hub-btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(28,107,82,.34)}
.hub-btn.ghost{background:rgba(255,255,255,.7); color:var(--hub-ink); border:1px solid rgba(0,0,0,.08)}
.hub-btn span{transition:transform .2s} .hub-btn:hover span{transform:translateX(3px)}

/* ---- 3つの道具 ---- */
.hub-flow{padding:40px 0 20px}
.hub-h2{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0; font-size:clamp(24px,5vw,36px); font-weight:800}
.hub-h2 span:nth-of-type(1){color:var(--c-story)} .hub-h2 span:nth-of-type(2){color:var(--c-plan)} .hub-h2 span:nth-of-type(3){color:var(--c-route)}
.hub-h2 i{font-style:normal; color:#b9c0c6; font-weight:400}
.hub-sub{margin:8px 0 0; color:var(--hub-muted)}

/* 縦の道：--fill（0〜1）に合わせて、上から色が伸びる */
.flow{--fill:0; position:relative; list-style:none; margin:28px 0 0; padding:0 0 0 56px}
.flow::before, .flow::after{content:""; position:absolute; left:21px; top:22px; bottom:22px; width:4px; border-radius:4px}
.flow::before{background:#e3e0d8}
.flow::after{background:linear-gradient(var(--c-story),var(--c-plan),var(--c-route));
  transform-origin:top; transform:scaleY(var(--fill)); transition:transform .1s linear}
.flow-step{position:relative; margin:0 0 22px}
.flow-dot{position:absolute; left:-56px; top:6px; width:46px; height:46px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px;
  box-shadow:0 0 0 5px #f7f6f2}
.s-story .flow-dot{background:var(--c-story)} .s-plan .flow-dot{background:var(--c-plan)} .s-route .flow-dot{background:var(--c-route)}
.flow-card{background:#fff; border-radius:22px; padding:20px 20px 18px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(20,30,25,.07);
  border-top:4px solid var(--c, #ccc)}
.s-story{--c:var(--c-story)} .s-plan{--c:var(--c-plan)} .s-route{--c:var(--c-route)}
.flow-verb{margin:0; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--c)}
.flow-card h3{margin:.15em 0 .4em; font-size:22px; font-weight:800}
.flow-card h3 small{display:block; font-size:13px; font-weight:600; color:var(--hub-muted); margin-top:2px}
.flow-card > p{margin:0; line-height:1.85; color:#38443e; font-size:15px}
.flow-tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:12px 0 0; padding:0}
.flow-tags li{font-size:12px; padding:3px 10px; border-radius:999px; background:color-mix(in srgb, var(--c) 10%, #fff); color:var(--c); font-weight:700}
.flow-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; min-height:44px; font-weight:800; color:var(--c); text-decoration:none}
.flow-link span{transition:transform .2s} .flow-link:hover span{transform:translateX(3px)}
/* 組む：小さな旅程（点が順に灯る） */
.mini-tl{display:flex; flex-direction:column; gap:2px; margin:12px 0 0; padding:10px 12px; border-radius:14px; background:#f3f7f5; font-size:13px}
.mini-tl span{display:flex; align-items:center; gap:10px; position:relative; padding-left:16px}
.mini-tl span::before{content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--c-route); opacity:.25}
.mini-tl b{font-variant-numeric:tabular-nums; color:var(--hub-muted); font-weight:600; width:3em}
.s-route.in .mini-tl span::before{animation:lit .4s forwards}
.s-route.in .mini-tl span:nth-child(2)::before{animation-delay:.35s}
.s-route.in .mini-tl span:nth-child(3)::before{animation-delay:.7s}
.s-route.in .mini-tl span:nth-child(4)::before{animation-delay:1.05s}
@keyframes lit{to{opacity:1; box-shadow:0 0 0 4px rgba(28,107,82,.15)}}

/* PCでは3つを横に並べ、道は横に通す */
@media (min-width:900px){
  .flow{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:56px 0 0}
  .flow::before, .flow::after{left:23px; right:23px; top:21px; bottom:auto; width:auto; height:4px}
  .flow::after{transform-origin:left; transform:scaleX(var(--fill))}
  .flow-step{margin:0}
  .flow-dot{left:0; top:-56px}
  .flow-card{height:100%}
}

/* ---- 物語・モデルコース ---- */
.hub-sec{padding:36px 0 8px}
.hub-kicker{margin:0; font-size:13px; font-weight:800; letter-spacing:.12em}
.hub-h2s{margin:.15em 0 .6em; font-size:clamp(20px,4.2vw,28px); font-weight:800}
.hub .story-list .area-group h3, .hub .ex-list .area-group h3{font-size:12px; color:var(--hub-muted); margin:14px 0 6px}
.hub .story-cards, .hub .ex-cards{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.hub .story-cards a, .hub .ex-cards a{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px;
  border-radius:999px; background:#fff; border:1px solid #e6e2d8; text-decoration:none; font-weight:700; font-size:14px;
  transition:border-color .2s, transform .2s}
.hub .story-cards a{color:var(--c-story)} .hub .ex-cards a{color:var(--c-route)}
.hub .story-cards a:hover, .hub .ex-cards a:hover{transform:translateY(-1px); border-color:currentColor}
.hub .ex-cards i{font-style:normal; font-size:12px; font-weight:600; color:var(--hub-muted)}
.hub .ex-lead{margin:0 0 10px; font-size:14px}
.hub .ex-lead a{color:var(--c-route); font-weight:700}
.hub-more{margin-top:6px}
.hub-more > summary{cursor:pointer; display:inline-flex; align-items:center; min-height:44px; font-weight:800; color:var(--c-route)}

.hub-end{padding:44px 0 56px; text-align:center}
.hub-end p:first-child{font-size:clamp(18px,3.6vw,24px); font-weight:800; margin:0 0 16px}
.hub-free{margin:12px 0 0; font-size:12px; color:var(--hub-muted)}

/* ---- スクロールで出てくる ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.flow-step.reveal:nth-child(2){transition-delay:.08s} .flow-step.reveal:nth-child(3){transition-delay:.16s}

@media (max-width:480px){
  .hub-hero{padding:34px 0 30px}
  .hub-nav a{padding:0 7px; font-size:12px}
  .hub-btn{width:100%}
}

/* ============================================================
   最初の画面(2026-10 作り直し):写真の背景の上に、3つの入口カードをはじめから並べる
   ============================================================ */
.wh-hero{position:relative; min-height:max(600px, calc(100svh - 48px)); display:flex; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate; background:#0b1016}
.wh-bg{position:absolute; inset:0; z-index:-1}
.wh-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1); transition:opacity 1.2s ease; filter:saturate(1.08)}
.wh-bg img.on{opacity:1; animation:wh-zoom 7.2s linear forwards}
@keyframes wh-zoom{from{transform:scale(1)} to{transform:scale(1.08)}}
.wh-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,12,20,.6) 0%,rgba(8,12,20,.42) 35%,rgba(8,12,20,.9) 100%)}
.wh-glow{position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(80px); opacity:.25; z-index:1; pointer-events:none}
.wh-glow.g1{background:#f0a074; left:-25vmax; top:-25vmax}
.wh-glow.g2{background:#9db0ff; right:-30vmax; top:10%}
.wh-in{position:relative; z-index:2; width:100%; display:grid; gap:22px; padding-top:28px; padding-bottom:64px}
.wh-k{margin:0; font-size:12px; font-weight:800; letter-spacing:.2em; color:rgba(255,255,255,.7)}
.wh-title{margin:.35em 0 .3em; font-size:clamp(30px,8.4vw,64px); line-height:1.2; font-weight:800; letter-spacing:-.01em;
  font-feature-settings:"palt"; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.wh-title span{background:linear-gradient(100deg,#f0a074,#9db0ff 50%,#5fd6a8); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap}
.wh-lead{margin:0; font-size:clamp(14px,2.4vw,17px); color:rgba(255,255,255,.85)}
.wh-cards{display:flex; flex-direction:column; gap:10px}
.wh-card{--c:#fff; position:relative; display:flex; align-items:center; gap:14px; min-height:88px; padding:14px 16px 14px 18px;
  border-radius:20px; text-decoration:none; color:#fff; overflow:hidden;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  animation:wh-in .6s cubic-bezier(.2,.7,.2,1);
  transition:transform .2s, background .2s, border-color .2s}
.wh-card::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:var(--c)}
/* 動きがなくても見えるように、カードは最初から表示し、アニメーションは「下から出てくる」だけを足す */
.wh-card.c1{--c:#f0a074} .wh-card.c2{--c:#9db0ff; animation-duration:.75s} .wh-card.c3{--c:#5fd6a8; animation-duration:.9s}
@keyframes wh-in{from{opacity:0; transform:translateY(16px)}}
.wh-card:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3)}
.wh-card:active{transform:scale(.98)}
.wh-ico{flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--c); color:#0b1016}
.wh-ico svg{width:24px; height:24px}
.wh-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.wh-step{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--c)}
.wh-txt b{font-size:20px; font-weight:800; line-height:1.2}
.wh-desc{font-size:13px; color:rgba(255,255,255,.78); line-height:1.45}
.wh-go{flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); font-weight:800; transition:transform .2s}
.wh-card:hover .wh-go{transform:translateX(4px)}
.wh-credit{position:absolute; right:12px; bottom:10px; z-index:2; margin:0; font-size:11px; color:rgba(255,255,255,.62)}
.wh-credit a{color:inherit}
.wh-down{position:absolute; left:50%; bottom:6px; z-index:2; width:44px; height:44px; margin-left:-22px; display:flex;
  align-items:center; justify-content:center; color:rgba(255,255,255,.8); text-decoration:none; font-size:20px;
  animation:wh-bob 2.4s ease-in-out infinite}
@keyframes wh-bob{50%{transform:translateY(5px)}}
@media (max-width:480px){
  .wh-in{gap:16px; padding-top:20px}
  .wh-card{min-height:84px}
  .wh-credit{left:12px; right:auto; bottom:10px; max-width:70%}
  .wh-down{left:auto; right:8px; margin-left:0; bottom:2px}
}
@media (min-width:960px){
  .wh-in{grid-template-columns:7fr 5fr; align-items:center; gap:48px}
  .wh-title{font-size:64px}
  .wh-lead{font-size:17px}
  .wh-cards{max-width:440px; justify-self:end; width:100%}
}
#stories{scroll-margin-top:64px}

/* 動きを減らす設定の人には、すべて止めて最初から見せる */
@media (prefers-reduced-motion: reduce){
  .wh-bg img.on{animation:none} .wh-card{animation:none} .wh-down{animation:none}
  .hub-glow i, .hr-line, .hr-node circle, .hr-node text{animation:none}
  .hr-line{stroke-dashoffset:0} .hr-node circle{transform:none} .hr-node text{opacity:1}
  .reveal{opacity:1; transform:none; transition:none}
  .flow::after{transform:none}
}

/* ---- 2026-10-19:順番を強調しない形 ---- */
/* ヘッダー右:3つのサービスへ(色はサービスごと) */
.hub-nav{gap:2px}
.hub-nav .hn{min-height:44px; padding:0 9px; font-size:13px; font-weight:800; border-radius:999px; text-decoration:none}
.hub-nav .hn:hover{background:rgba(0,0,0,.05)}
@media (max-width:380px){.hub-nav .hn{padding:0 6px; font-size:12px}}
.wh-lead .pc{display:none}
@media (min-width:960px){.wh-lead .pc{display:inline}}
.wh-title span{white-space:nowrap}
/* 3つの道具でできること:番号・矢印・縦の線なし。カードを並べるだけ */
.flow-free{padding:0 !important; display:grid; gap:14px; margin-top:20px}
.flow-free::before, .flow-free::after{display:none}
@media (min-width:900px){.flow-free{grid-template-columns:repeat(3,1fr); gap:20px}}
.flow-free .flow-step{margin:0}
.flow-free .flow-card{border-top:0; border-radius:24px; position:relative; overflow:hidden}
.flow-free .flow-card::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--c)}