/* ===========================
   尾道おもいでめぐり — style.css
   =========================== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --teal:#1E6B7C;
  --teal2:#2A8A9E;
  --amber:#C87028;
  --amber2:#E8982A;
  --navy:#0D1824;
  --navy2:#1A2E4A;
  --sand:#F5EDD8;
  --sand2:#EDE0C4;
  --sand3:#FAF6EC;
  --ink:#1C1410;
  --ink2:#3D2B1F;
  --muted:#7A6855;
  --border:rgba(200,112,40,0.22);
  --border-teal:rgba(30,107,124,0.22);
}
html,body{background:var(--navy);font-family:'Noto Sans JP',sans-serif;color:var(--ink);min-height:100%}

/* ── ヒーロー ── */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,#0E2236 55%,#0D1D14 100%);
  color:var(--sand);
  text-align:center;
  padding:2.5rem 1.4rem 2rem;
  position:relative;
}
.hero-badge{
  display:inline-block;
  font-size:11px;letter-spacing:.28em;
  color:var(--amber2);
  border:1px solid rgba(232,152,42,.35);
  border-radius:20px;
  padding:4px 14px;
  margin-bottom:1.1rem;
}
.hero-char{font-size:64px;margin-bottom:.7rem;line-height:1}
.hero-title{
  font-family:'Noto Serif JP',serif;
  font-size:46px;font-weight:700;
  color:var(--sand);
  line-height:1.2;
  letter-spacing:.04em;
  margin-bottom:.2rem;
}
.hero-title-sub{
  font-size:28px;
  color:var(--amber2);
  display:block;
}
.hero-tagline{
  font-size:14px;
  color:rgba(245,237,216,.78);
  line-height:2;
  margin:1rem 0 1.2rem;
}
.hero-ok-box{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin-bottom:1.4rem;
}
.ok-badge{
  font-size:11.5px;
  background:rgba(30,107,124,.25);
  border:1px solid rgba(42,138,158,.3);
  color:rgba(245,237,216,.88);
  border-radius:20px;
  padding:4px 10px;
}
.hero-cta{
  display:inline-block;
  background:var(--amber2);
  color:var(--ink);
  font-weight:700;font-size:15px;
  padding:.85rem 2rem;
  border-radius:14px;
  text-decoration:none;
  letter-spacing:.06em;
  margin-bottom:.9rem;
}
.hero-credit{font-size:10px;color:rgba(245,237,216,.38);margin-top:.5rem}

/* ── セクション共通 ── */
.menu-section,.spots-section,.routes-section,.howto-section,.faq-section,.form-section,.share-section{
  background:var(--sand3);
  padding:1.5rem 1rem;
  border-top:1px solid var(--border);
}
.section-title{
  font-family:'Noto Serif JP',serif;
  font-size:18px;font-weight:700;
  color:var(--teal);
  margin-bottom:.4rem;
  letter-spacing:.04em;
}
.section-sub{font-size:12px;color:var(--muted);margin-bottom:1rem}

/* ── メニューグリッド ── */
.menu-section-title{
  font-family:'Noto Serif JP',serif;
  font-size:17px;font-weight:700;
  color:var(--amber2);
  text-align:center;
  letter-spacing:.08em;
  margin-bottom:.9rem;
}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:.5rem;
}
.menu-card{
  background:linear-gradient(145deg,#1A2E4A,#0D1824);
  border:1px solid rgba(42,138,158,.28);
  border-radius:16px;
  padding:1.1rem .75rem .9rem;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
  min-height:96px;
  box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(42,138,158,.12);
  transition:background .18s,border-color .18s,transform .15s,box-shadow .15s;
}
.menu-card:hover{background:linear-gradient(145deg,rgba(42,138,158,.22),rgba(13,24,36,.9));border-color:rgba(42,138,158,.5);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.menu-card:active{transform:scale(.96)}
.menu-card-ic{font-size:26px;margin-bottom:6px;line-height:1}
.menu-card-title{font-family:'Noto Serif JP',serif;font-size:13px;font-weight:700;color:rgba(245,237,216,.95);line-height:1.3;margin-bottom:3px}
.menu-card-sub{font-size:10.5px;color:rgba(232,152,42,.8);line-height:1.4;letter-spacing:.01em}
.menu-card-pr{position:absolute;top:5px;right:6px;font-size:9px;color:rgba(232,152,42,.65);letter-spacing:.04em}
.menu-pr-note{font-size:10px;color:rgba(232,152,42,.5);text-align:center;margin:.4rem 0 0;line-height:1.6}

/* ── スポットへのCTA ── */
.spots-cta-section{
  background:var(--navy);
  padding:.8rem 1rem;
  text-align:center;
  border-top:1px solid rgba(42,138,158,.15);
}
.spots-cta-btn{
  width:100%;
  background:rgba(42,138,158,.12);
  border:1.5px solid rgba(42,138,158,.4);
  border-radius:14px;
  padding:.9rem 1rem;
  color:#a8dce8;
  font-size:14px;font-weight:700;
  cursor:pointer;
  letter-spacing:.04em;
}
.spots-cta-sub{font-size:11px;color:rgba(42,138,158,.5);margin-top:.4rem}

/* ── 参加方法 ── */
.howto-summary{
  background:#fff;
  border:1.5px solid var(--border-teal);
  border-radius:14px;
  padding:1rem 1.1rem;
  margin-bottom:1rem;
}
.howto-step{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:13.5px;color:var(--ink);
  line-height:1.8;
  padding:.3rem 0;
  border-bottom:1px solid rgba(30,107,124,.08);
}
.howto-step:last-child{border-bottom:none}
.howto-num{
  font-weight:700;color:var(--teal);
  font-size:15px;flex-shrink:0;width:1.8em;text-align:center;
}
.hashtag{color:var(--teal);font-size:15px}
.url-inline{font-size:11px;color:var(--muted)}
.howto-ok-note{
  background:rgba(30,107,124,.06);
  border:1px solid rgba(30,107,124,.18);
  border-radius:12px;
  padding:.8rem 1rem;
  margin-bottom:1rem;
}
.howto-ok-note p{font-size:12.5px;color:var(--ink2);line-height:1.9}
.howto-accordion-wrap{margin-bottom:1rem}
.howto-acc{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:.5rem;
  overflow:hidden;
}
.howto-acc summary{
  padding:.8rem 1rem;
  font-size:13px;font-weight:700;color:var(--ink2);
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.4rem;
}
.howto-acc summary::-webkit-details-marker{display:none}
.howto-acc summary::after{content:'›';margin-left:auto;color:var(--amber);font-size:18px;transition:transform .2s}
.howto-acc[open] summary::after{transform:rotate(90deg)}
.acc-body{padding:.7rem 1rem 1rem;font-size:13px;color:var(--ink2);line-height:1.8;border-top:1px solid var(--border)}
.acc-warn{border-color:rgba(30,107,124,.4)}
.acc-warn summary{color:var(--teal)}
.copy-box{
  background:rgba(30,107,124,.07);
  border:1px solid rgba(30,107,124,.2);
  border-radius:10px;
  padding:.7rem .9rem;
  margin-top:.5rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;
}
.copy-box code{font-size:12px;color:var(--ink);line-height:1.8;font-family:inherit}
.copy-btn{
  font-size:11px;padding:.4rem .6rem;
  background:var(--teal2);color:#fff;
  border:none;border-radius:8px;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.howto-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-spots,.btn-form{
  flex:1;min-width:140px;
  padding:.8rem .5rem;
  border:none;border-radius:12px;
  font-size:13.5px;font-weight:700;cursor:pointer;
  letter-spacing:.04em;
}
.btn-spots{background:rgba(42,138,158,.15);color:var(--teal);border:1.5px solid rgba(30,107,124,.4)}
.btn-form{background:var(--amber2);color:var(--ink)}

/* ── 投稿スポット ── */
.spots-grid{
  display:flex;flex-direction:column;gap:10px;
}
.spot-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  cursor:pointer;
}
.spot-card-header{display:flex;align-items:center;gap:.7rem}
.spot-ic{font-size:26px;flex-shrink:0}
.spot-name{font-family:'Noto Serif JP',serif;font-size:15px;font-weight:700;color:var(--ink);flex:1}
.spot-cat{font-size:10px;background:rgba(30,107,124,.1);color:var(--teal);border-radius:6px;padding:2px 7px}
.spot-desc{font-size:12.5px;color:var(--muted);line-height:1.75;margin:.6rem 0 .5rem}
.spot-tip{font-size:11.5px;color:var(--teal);background:rgba(30,107,124,.06);border-radius:8px;padding:.35rem .55rem;margin-bottom:.7rem}
.spot-share-btn{
  width:100%;padding:.65rem;
  background:var(--teal2);color:#fff;
  border:none;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;
}

/* ── ルート ── */
.route-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  margin-bottom:.85rem;
  cursor:pointer;
}
.route-badge{font-size:10px;color:var(--teal);background:rgba(30,107,124,.1);border-radius:6px;padding:2px 8px;margin-bottom:.5rem;display:inline-block}
.route-title{font-family:'Noto Serif JP',serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:.25rem}
.route-sub{font-size:12.5px;color:var(--muted);margin-bottom:.5rem}
.route-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.route-meta span{font-size:11px;color:var(--muted);background:rgba(200,112,40,.08);border-radius:6px;padding:2px 7px}
.route-desc{font-size:12.5px;color:var(--ink2);line-height:1.75;margin-bottom:.6rem}
.route-spots{font-size:12px;color:var(--teal);line-height:1.75}
.route-tip{font-size:11.5px;color:var(--amber);background:rgba(200,112,40,.07);border-radius:8px;padding:.35rem .6rem;margin-top:.5rem}

/* ── FAQ ── */
.faq-item{
  background:#fff;border:1px solid var(--border);
  border-radius:12px;margin-bottom:.5rem;overflow:hidden;
}
.faq-item summary{
  padding:.8rem 1rem;font-size:13px;font-weight:700;color:var(--ink2);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.4rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'›';margin-left:auto;color:var(--amber);font-size:18px;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(90deg)}
.faq-body{padding:.7rem 1rem 1rem;font-size:13px;color:var(--ink2);line-height:1.85;border-top:1px solid var(--border)}

/* ── フォーム ── */
.form-note-box{
  background:rgba(30,107,124,.07);border:1px solid rgba(30,107,124,.2);
  border-radius:12px;padding:1rem;margin-bottom:1rem;
}
.form-note-box p{font-size:13px;color:var(--ink2);line-height:1.8;margin-bottom:.4rem}
.hashtag-copy-box{
  background:#fff;border:1px solid var(--border-teal);border-radius:10px;
  padding:.7rem .9rem;margin-top:.5rem;
}
.hashtag-copy-box code{font-size:12px;color:var(--teal);line-height:1.8;display:block}
.btn-form-start{
  width:100%;padding:.9rem;
  background:var(--amber2);color:var(--ink);
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.04em;
}
.form-field{margin-bottom:1rem}
.form-field label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:.4rem}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:.7rem .9rem;
  border:1.5px solid var(--border);border-radius:10px;
  font-size:14px;font-family:'Noto Sans JP',sans-serif;color:var(--ink);
  background:#fff;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--teal2);
}
.required{font-size:10px;color:#c0392b;background:rgba(192,57,43,.1);padding:2px 6px;border-radius:4px;margin-left:.3rem}
.nourl-label{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:var(--muted);margin-top:.4rem;font-weight:400}
.agree-label{display:flex;align-items:flex-start;gap:.5rem;font-size:13px;color:var(--ink2);line-height:1.7;font-weight:400;cursor:pointer}
.agree-label input{margin-top:.2rem;flex-shrink:0}
.form-err{font-size:12.5px;color:#c0392b;background:rgba(192,57,43,.07);border-radius:8px;padding:.5rem .7rem;margin-bottom:.7rem;white-space:pre-line}
.btn-submit{
  width:100%;padding:.95rem;
  background:var(--teal);color:#fff;
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.06em;
}
.btn-submit:disabled{opacity:.5;cursor:default}
.form-done-box{
  background:#fff;border:2px solid rgba(30,107,124,.3);border-radius:16px;
  padding:1.5rem 1rem;text-align:center;
}
.form-done-ic{font-size:52px;margin-bottom:.6rem}
.form-done-box h3{font-size:20px;font-weight:700;color:var(--teal);margin-bottom:.5rem}
.form-done-box>p{font-size:13.5px;color:var(--muted);margin-bottom:1rem}
.entry-no-box{
  background:rgba(30,107,124,.06);border:1.5px solid rgba(30,107,124,.25);
  border-radius:12px;padding:1rem;margin-bottom:1rem;
}
.entry-no-label{font-size:11px;color:var(--muted);letter-spacing:.1em;margin-bottom:.3rem}
.entry-no{font-family:monospace;font-size:20px;font-weight:700;color:var(--teal);letter-spacing:.06em;margin-bottom:.6rem}
.form-done-note{font-size:12px;color:var(--muted);line-height:1.8;margin:.7rem 0}
.btn-share-result{
  width:100%;padding:.8rem;
  background:#111;color:#fff;
  border:none;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
}
.form-err-box{
  background:rgba(192,57,43,.07);border:1.5px solid rgba(192,57,43,.2);
  border-radius:12px;padding:1rem;text-align:center;
}
.form-err-box p{font-size:13px;color:#c0392b;margin-bottom:.8rem}

/* ── シェアボタン ── */
.share-section{text-align:center}
.share-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.share-btn{
  padding:.75rem 1.5rem;border:none;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
}
.share-x{background:#111;color:#fff}
.share-line{background:#06C755;color:#fff}

/* ── フッター ── */
.footer{
  background:var(--navy);color:rgba(245,237,216,.5);
  padding:1.5rem 1rem 2.5rem;text-align:center;
}
.footer-copy{font-family:'Noto Serif JP',serif;font-size:15px;color:var(--amber2);margin-bottom:.6rem}
.footer-links{display:flex;gap:1.2rem;justify-content:center;margin-bottom:.8rem;flex-wrap:wrap}
.footer-links a{font-size:11.5px;color:rgba(232,152,42,.5);text-decoration:underline}
.footer-note{font-size:10.5px;line-height:1.7}

/* ── モーダル ── */
.modal{
  position:fixed;inset:0;z-index:9800;
  background:rgba(13,24,36,.88);
  display:flex;align-items:flex-start;justify-content:center;
  padding:1rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal-inner{
  background:var(--sand3);
  border-radius:18px;
  width:100%;max-width:480px;
  overflow:hidden;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;
  background:var(--navy);color:var(--sand);
}
.modal-title{font-family:'Noto Serif JP',serif;font-size:16px;font-weight:700;color:var(--amber2)}
.modal-close{
  background:none;border:none;color:rgba(245,237,216,.6);
  font-size:20px;cursor:pointer;padding:.25rem .4rem;
}
.modal-body{padding:1rem;max-height:80vh;overflow-y:auto}

/* ── クイズ ── */
.quiz-intro-ic{font-size:52px;text-align:center;margin-bottom:.5rem}
.quiz-intro-title{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:700;color:var(--teal);text-align:center;margin-bottom:.3rem}
.quiz-intro-sub{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:.8rem;line-height:1.7}
.quiz-intro-desc{font-size:13px;color:var(--ink2);line-height:1.85;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem}
.quiz-start-btn{width:100%;padding:.9rem;background:var(--teal);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.06em}
.quiz-q-num{font-size:11px;color:var(--muted);letter-spacing:.1em;margin-bottom:.5rem;text-align:center}
.quiz-q-text{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:.9rem}
.quiz-choices{display:flex;flex-direction:column;gap:.5rem}
.quiz-choice{
  padding:.75rem .9rem;text-align:left;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;
  font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.quiz-choice:active,.quiz-choice.selected{border-color:var(--teal);background:rgba(30,107,124,.07)}
.quiz-choice.correct{border-color:#27ae60;background:rgba(39,174,96,.08);color:#1a6635}
.quiz-choice.wrong{border-color:#c0392b;background:rgba(192,57,43,.07);color:#c0392b}
.quiz-exp{font-size:12.5px;color:var(--ink2);line-height:1.8;background:rgba(30,107,124,.06);border:1px solid rgba(30,107,124,.15);border-radius:10px;padding:.7rem .9rem;margin-top:.7rem}
.quiz-next-btn{width:100%;padding:.8rem;background:var(--amber2);color:var(--ink);border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;margin-top:.8rem}
.quiz-result-ic{font-size:52px;text-align:center;margin:.5rem 0}
.quiz-result-title{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:700;color:var(--teal);text-align:center;margin-bottom:.5rem}
.quiz-result-msg{font-size:13.5px;color:var(--ink2);line-height:1.85;text-align:center;margin-bottom:1rem;white-space:pre-line}
.quiz-retry-btn{width:100%;padding:.8rem;background:var(--teal2);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer}

/* ── おみくじ ── */
.omikuji-draw-btn{width:100%;padding:1.1rem;background:var(--amber2);color:var(--ink);border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.08em;margin-top:.8rem}
.omikuji-fortune{font-family:'Noto Serif JP',serif;font-size:38px;font-weight:700;color:var(--teal);text-align:center;margin:1rem 0 .5rem}
.omikuji-fortune.chukichi{color:var(--teal2)}
.omikuji-fortune.shokichi{color:var(--amber)}
.omikuji-fortune.suekichi{color:var(--muted)}
.omikuji-fortune.kyo{color:#c0392b}
.omikuji-poem{font-size:13.5px;color:var(--ink2);text-align:center;line-height:2;white-space:pre-line;margin-bottom:1rem}
.omikuji-cats{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.omikuji-cat{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.5rem .75rem}
.omikuji-cat-lbl{font-size:12px;color:var(--muted);width:6em;flex-shrink:0}
.omikuji-cat-stars{color:var(--amber);font-size:13px;letter-spacing:1px}
.omikuji-cat-msg{font-size:12px;color:var(--ink2);flex:1}
.omikuji-retry-btn{width:100%;padding:.75rem;background:rgba(30,107,124,.1);color:var(--teal);border:1.5px solid rgba(30,107,124,.3);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;margin-top:.6rem}

/* ── 旅人診断 ── */
.shindan-q-text{font-size:15px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:.9rem}
.shindan-choices{display:flex;flex-direction:column;gap:.5rem}
.shindan-choice{padding:.75rem .9rem;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:12px;font-size:13.5px;color:var(--ink);cursor:pointer}
.shindan-choice:active{border-color:var(--teal);background:rgba(30,107,124,.07)}
.shindan-result-ic{font-size:52px;text-align:center;margin:.5rem 0}
.shindan-result-name{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:700;color:var(--teal);text-align:center;margin-bottom:.25rem}
.shindan-result-sub{font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:.8rem}
.shindan-result-desc{font-size:13px;color:var(--ink2);line-height:1.85;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;margin-bottom:.7rem}
.shindan-result-spots{font-size:12.5px;color:var(--teal);line-height:1.75}
.shindan-share-btn{width:100%;padding:.8rem;background:#111;color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;margin-top:.8rem}
.shindan-retry-btn{width:100%;padding:.75rem;background:rgba(30,107,124,.1);color:var(--teal);border:1.5px solid rgba(30,107,124,.3);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;margin-top:.5rem}

/* ── 旅グッズ ── */
.goods-intro{font-size:13px;color:var(--ink2);line-height:1.8;background:rgba(200,112,40,.06);border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem;margin-bottom:1rem}
.goods-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.goods-tab{font-size:11.5px;padding:.35rem .75rem;border:1px solid var(--border);border-radius:20px;background:#fff;color:var(--muted);cursor:pointer}
.goods-tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.goods-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.goods-img{aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f5f5f5}
.goods-img img,.goods-img a img{width:100%;height:100%;object-fit:cover}
.goods-info{padding:.6rem .7rem .75rem;flex:1;display:flex;flex-direction:column;gap:.4rem}
.goods-title{font-size:11.5px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.goods-cta{display:block;text-align:center;padding:.5rem;background:linear-gradient(135deg,#BF0000,#E03000);color:#fff;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none}

/* ── SPA ビュー ── */
.view{min-height:100vh}

/* ── サブページヘッダー ── */
.subpage-header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;gap:.75rem;
  background:var(--navy);
  padding:.8rem 1rem;
  border-bottom:1px solid rgba(42,138,158,.2);
}
.back-btn{
  background:none;border:none;color:rgba(245,237,216,.75);
  font-size:16px;cursor:pointer;padding:.2rem .4rem;
  flex-shrink:0;
}
.back-btn:hover{color:var(--sand)}
.subpage-title{
  font-family:'Noto Serif JP',serif;
  font-size:15px;font-weight:700;
  color:var(--amber2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.subpage-body{
  background:var(--sand3);
  padding:1.2rem 1rem 3rem;
}

/* ── トップナビカード ── */
.top-nav-grid{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.top-nav-card{
  display:flex;align-items:center;gap:.75rem;
  background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:.9rem 1rem;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.top-nav-card:hover{border-color:var(--teal2);background:rgba(30,107,124,.04)}
.top-nav-ic{font-size:22px}
.top-nav-txt{flex:1;font-size:14px;font-weight:700;color:var(--ink);font-family:'Noto Serif JP',serif}
.top-nav-arr{font-size:20px;color:var(--amber);margin-left:auto}

/* ── ルート一覧カード（SPA版） ── */
.route-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:1rem 1.1rem;
  margin-bottom:.85rem;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.route-card:hover{border-color:var(--teal2);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.route-card-top{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.6rem}
.route-emoji{font-size:32px;flex-shrink:0;line-height:1}
.route-card-info{flex:1}
.route-theme{font-size:12px;color:var(--teal);margin:.4rem 0 .6rem}
.route-rain-ok{font-size:10px;color:#2980b9;background:rgba(41,128,185,.1);border-radius:6px;padding:2px 7px}
.route-see-btn{
  width:100%;padding:.7rem;
  background:var(--teal);color:#fff;
  border:none;border-radius:10px;
  font-size:14px;font-weight:700;cursor:pointer;
  letter-spacing:.04em;
  margin-top:.3rem;
}
.route-see-btn:hover{background:var(--teal2)}

/* ── ルート詳細ページ ── */
.route-detail-hero{font-size:56px;text-align:center;padding:.8rem 0 .4rem}
.route-detail-meta{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.3rem}
.route-spots-heading{font-family:'Noto Serif JP',serif;font-size:15px;font-weight:700;color:var(--teal);margin:1rem 0 .5rem}
.route-spots-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.route-spot-item{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1.5px solid var(--border);border-radius:10px;
  padding:.65rem .9rem;font-size:13.5px;color:var(--ink);
  cursor:pointer;text-align:left;
  transition:border-color .15s;
}
.route-spot-item:hover{border-color:var(--teal2);background:rgba(30,107,124,.04)}
.route-spot-arr{color:var(--amber);font-size:18px;flex-shrink:0}
.route-post-btn{
  width:100%;padding:.9rem;
  background:var(--amber2);color:var(--ink);
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.04em;
  margin-top:.5rem;
}

/* ── スポット詳細ページ ── */
.spot-detail-hero{font-size:56px;text-align:center;padding:.8rem 0 .4rem}
.spot-detail-desc{font-size:13.5px;color:var(--ink2);line-height:1.8;margin-bottom:1rem}
.spot-detail-block{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:.85rem 1rem;margin-bottom:.7rem;
}
.spot-detail-block-title{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.06em;margin-bottom:.4rem}
.spot-detail-block-body{font-size:13px;color:var(--ink2);line-height:1.8}
.spot-share-text{
  font-size:12px;color:var(--ink);line-height:1.9;
  background:rgba(30,107,124,.05);border:1px solid rgba(30,107,124,.15);
  border-radius:8px;padding:.6rem .8rem;
}
.spot-rel-routes{display:flex;flex-direction:column;gap:.4rem}
.spot-rel-route{
  display:flex;align-items:center;
  background:rgba(30,107,124,.06);border:1px solid rgba(30,107,124,.2);border-radius:10px;
  padding:.55rem .85rem;font-size:13px;color:var(--teal);
  cursor:pointer;text-align:left;
  transition:background .15s;
}
.spot-rel-route:hover{background:rgba(30,107,124,.12)}
.spot-post-btn{
  width:100%;padding:.9rem;
  background:var(--amber2);color:var(--ink);
  border:none;border-radius:12px;
  font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.04em;
  margin-top:.8rem;
}

/* ── レスポンシブ ── */
/* ── ヒーローCTAボタン群 ── */
.hero-cta-btns{
  display:flex;flex-direction:column;gap:.6rem;
  margin-top:1.2rem;
}
.hero-btn{
  display:block;
  padding:.85rem 1.5rem;
  border-radius:14px;
  font-size:14px;font-weight:700;
  text-decoration:none;text-align:center;
  letter-spacing:.04em;
  cursor:pointer;border:none;width:100%;
}
.hero-btn-primary{background:var(--amber2);color:var(--ink)}
.hero-btn-secondary{background:rgba(42,138,158,.18);color:#a8dce8;border:1.5px solid rgba(42,138,158,.4)}
.hero-btn-form{background:rgba(30,107,124,.3);color:var(--sand);border:1.5px solid rgba(30,107,124,.5)}

@media(max-width:360px){
  .hero-title{font-size:38px}
}
@media(min-width:480px){
  .hero-cta-btns{flex-direction:row;flex-wrap:wrap}
  .hero-btn{flex:1;min-width:140px}
}
@media(min-width:600px){
  .hero{padding:3.5rem 2rem 2.5rem}
  .menu-section,.spots-section,.routes-section,.howto-section,.faq-section,.form-section,.share-section{padding:1.8rem 1.5rem}
  .menu-grid{grid-template-columns:repeat(4,1fr)}
  .goods-grid{grid-template-columns:repeat(3,1fr)}
  .spots-grid{display:grid;grid-template-columns:repeat(2,1fr)}
}