/* COTARU レンタサイクル スポット専用ランディングページ 共通CSS
   タイポグラフィ規定 v1.0 準拠（.claude/team/specs/cotaru-rentalcycle-typography-spec-2026-06-12.md） */
:root{
  --brand:#157a52; --brand-d:#0f5e3f; --ink:#1a1a1a; --muted:#717182;
  --line:rgba(0,0,0,.10); --bg:#fff; --radius:10px; --star:#c98a12; --soft:#f6f6f7;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.03);
  --font-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Noto Sans JP",-apple-system,"Hiragino Sans",sans-serif;
  --fs-display:clamp(32px,5.6vw,56px); --fs-h2:clamp(24px,3.2vw,36px);
  --fs-h3:clamp(19px,2.4vw,23px); --fs-h4:16px; --fs-lead:15px;
  --fs-body:14px; --fs-small:13px; --fs-caption:12px; --fs-label:11px;
  --ls-head:.05em; --ls-body:.02em; --ls-label:.2em;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-weight:400;background:var(--bg);color:var(--ink);line-height:1.9;letter-spacing:var(--ls-body)}
a{color:inherit}
.page{width:min(1000px,100%);margin:0 auto;background:#fff;overflow:hidden}
p{text-wrap:pretty;line-break:strict}
p+p{margin-top:.7em}
.tnum{font-variant-numeric:tabular-nums}
svg text{font-family:var(--font-sans)}

/* ヘッダー */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo-img{height:20px;width:auto;display:block}
.langbar{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;margin-left:auto}
.langbar button{border:0;background:#fff;color:var(--muted);font-size:var(--fs-label);font-weight:600;padding:4px 8px;cursor:pointer;border-left:1px solid var(--line);white-space:nowrap;font-family:var(--font-sans)}
.langbar button:first-child{border-left:0}
.langbar button.on{background:var(--brand);color:#fff}
header nav{display:flex;align-items:center;gap:14px}
header nav a.tlink{color:var(--muted);font-size:var(--fs-small);font-weight:600;text-decoration:none;white-space:nowrap}
header nav a.tlink:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--brand);border-radius:var(--radius);padding:10px 18px;background:var(--brand);color:#fff;text-decoration:none;font-size:var(--fs-body);font-weight:600;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--brand-d)}
.btn.subtle{background:#fff;color:var(--brand)}


/* パンくず */
.crumb{padding:10px 18px;font-size:var(--fs-caption);color:var(--muted)}
.crumb a{color:var(--brand);text-decoration:none}

/* ヒーロー */
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(60vh,460px);overflow:hidden;background:var(--soft)}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
.hero-in{position:relative;z-index:2;width:100%;padding:24px 18px 28px;color:#fff}
.hero-in .kick{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;opacity:.95;margin-bottom:8px}
.hero-in h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);line-height:1.22;letter-spacing:var(--ls-head);font-feature-settings:"palt";text-wrap:balance;text-shadow:0 1px 16px rgba(0,0,0,.35)}
.hero-in p{font-size:var(--fs-lead);line-height:1.9;max-width:34em;margin-top:10px;opacity:.97;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero-in .hbtn{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-in .btn.subtle{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(4px)}

/* 訴求バー */
.strip{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;text-align:center;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--fs-caption);font-weight:600}
.strip b{color:var(--brand)}

/* セクション */
section{padding:30px 18px;border-bottom:1px solid var(--line)}
@media(min-width:720px){section{padding:44px 24px}}
.kicker{color:var(--brand);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.kicker::after{content:"";flex:0 0 26px;height:1px;background:var(--brand);opacity:.5}
h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);line-height:1.35;letter-spacing:var(--ls-head);font-feature-settings:"palt";text-wrap:balance}
.lead{color:var(--muted);font-size:var(--fs-lead);line-height:2;margin-top:8px;max-width:38em}
.body{font-size:var(--fs-body);max-width:40em;margin-top:14px}
.body h3{font-family:var(--font-sans);font-size:var(--fs-h4);font-weight:600;margin:18px 0 4px}

/* 見どころカード */
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.spot{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.spot b{display:block;font-size:var(--fs-h4);font-weight:600;margin-bottom:2px}
.spot small{color:var(--muted);font-size:var(--fs-small);line-height:1.7}
@media(max-width:560px){.spots{grid-template-columns:1fr}}

/* 情報テーブル */
.facts{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-size:var(--fs-small)}
.facts div:first-child{border-top:0}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0}
.facts a{color:var(--brand)}

/* なぜ自転車（緑の帯） */
.why{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:16px}
.why h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:1.5;letter-spacing:var(--ls-head);margin-bottom:6px}
.why p{font-size:var(--fs-body);color:var(--ink)}

/* CTA */
.cta-box{text-align:center;padding:34px 18px;background:linear-gradient(180deg,#fff,#f7fbf9)}
.cta-box .price{font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;color:var(--brand);margin:6px 0}
.cta-box .price s{color:var(--muted);font-size:16px;font-weight:400;margin-right:8px}
.cta-box .big{display:inline-flex;min-height:50px;align-items:center;justify-content:center;background:var(--brand);color:#fff;border-radius:var(--radius);padding:14px 30px;font-size:var(--fs-h4);font-weight:600;text-decoration:none;margin-top:8px}
.cta-box .big:hover{background:var(--brand-d)}
.cta-box .note{color:var(--muted);font-size:var(--fs-caption);margin-top:10px}

/* 関連リンク */
.rel{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.rel a{flex:1 1 200px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;text-decoration:none;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.rel a:hover{border-color:var(--brand);color:var(--brand)}
.rel a small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-caption);margin-top:2px}

footer{padding:22px 18px;color:var(--muted);text-align:center;font-size:var(--fs-label)}
footer a{color:var(--brand)}

/* === レビュー集約ブラッシュアップ（口コミ/比較/FAQ/フロー/緊急性・2026-06-13） === */
.hero-trust{margin-top:14px;font-size:var(--fs-small);font-weight:600;color:#fff;opacity:.97;text-shadow:0 1px 8px rgba(0,0,0,.5);display:flex;flex-wrap:wrap;gap:6px 14px}
.hero-trust .st{color:var(--star)}
/* 比較表 */
.compare{width:100%;border-collapse:collapse;margin-top:14px;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.compare th,.compare td{border:1px solid var(--line);padding:9px 12px;text-align:center}
.compare th{background:var(--soft);color:var(--muted);font-weight:600}
.compare td:first-child,.compare th:first-child{text-align:left}
.compare tr.hi td{background:#f1f8f4;font-weight:600;color:var(--ink)}
.compare tr.hi td:first-child{color:var(--brand)}
.compare .cap{color:var(--muted);font-size:var(--fs-caption);margin-top:6px}
/* お客様の声 */
.reviews-sec .rating{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.reviews-sec .rating b{font-size:28px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.reviews-sec .rating .star{color:var(--star);font-size:var(--fs-body);letter-spacing:1px}
.reviews-sec .rating span{color:var(--muted);font-size:var(--fs-small)}
/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:13px 2px;font-size:var(--fs-body);font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--brand);font-weight:600}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 2px 13px;color:var(--muted);font-size:var(--fs-small)}
/* 予約の流れ */
.flow3{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;counter-reset:s}
.flow3 .step{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;position:relative}
.flow3 .step::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:var(--fs-caption);font-weight:600;margin-bottom:6px}
.flow3 .step b{display:block;font-size:var(--fs-small);font-weight:600}
.flow3 .step small{color:var(--muted);font-size:var(--fs-caption);line-height:1.6}
@media(max-width:640px){.flow3{grid-template-columns:1fr 1fr}}
/* 中間CTA */
.midcta{text-align:center;margin:18px 0 0}
.midcta a{display:inline-flex;min-height:46px;align-items:center;justify-content:center;background:var(--brand);color:#fff;border-radius:var(--radius);padding:12px 26px;font-size:var(--fs-body);font-weight:600;text-decoration:none}
.midcta a:hover{background:var(--brand-d)}
/* CTA 緊急性・プラン一覧 */
.urgent{color:var(--brand);font-size:var(--fs-small);font-weight:600;margin:4px 0 8px}
.plan-list2{font-variant-numeric:tabular-nums;font-size:var(--fs-small);color:var(--ink);margin:6px 0}
.plan-list2 s{color:var(--muted);font-weight:400}

/* === ギャラリー・ルート図（リッチ化 2026-06-13） === */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.gallery figcaption{font-size:var(--fs-caption);color:var(--muted);margin-top:5px;line-height:1.5}
@media(max-width:640px){.gallery{grid-template-columns:1fr 1fr}}
.routefig{margin:16px 0 0;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.routefig svg{width:100%;height:auto;display:block}
.rf-cap{font-size:var(--fs-caption);color:var(--muted);margin-bottom:8px;font-weight:600}
/* 見どころカードに写真 */
.spot.has-img{padding:0;overflow:hidden;border-radius:var(--radius)}
.spot.has-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.spot.has-img .txt{padding:12px 16px}
header nav a.tlink.on{color:var(--brand);border-bottom:2px solid var(--brand)}
header nav{flex-wrap:wrap}

/* === スマホ ハンバーガーメニュー（CSS-only・2026-06-13） === */
.hamburger{display:none}
.navtoggle{display:none}
@media(max-width:560px){
  header{position:relative;flex-wrap:nowrap}
  .langbar{flex:0 0 auto;margin-left:auto}
  .langbar button{padding:3px 6px;font-size:10px}
  .hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;order:3}
  .hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:0 auto;transition:.2s}
  .navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 16px rgba(0,0,0,.06);flex-direction:column;align-items:stretch;padding:6px 18px 14px;gap:0;z-index:30}
  .navtoggle:checked ~ nav{display:flex}
  header nav a.tlink{display:block;padding:12px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
  header nav a.tlink.on{border-bottom:1px solid var(--line);color:var(--brand)}
  header nav a.btn{margin-top:10px;justify-content:center}
}