/* ==========================================================
   旅の思い出ページ 見本（箱根）
   ---------------------------------------------------------
   CUSTOMIZE:THEME — 顧客ごとに変えるのは基本この変数ブロックのみ
   ========================================================== */
:root {
  --bg: #f6f2e7;         /* 生成り */
  --bg-soft: #ece5d2;
  --ink: #2e3229;        /* 墨（緑がかった黒） */
  --ink-soft: #5c6156;
  --deep: #2f4a3c;       /* 深緑 */
  --accent: #7a2e2b;     /* 弁柄色 */
  --card: #fffdf6;
  --line: #d8cfb8;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}
[data-theme="tsubaki"] {
  --bg: #f5eeec; --bg-soft: #ecdfdc;
  --ink: #332b2c; --ink-soft: #6b5a5c;
  --deep: #5a2a33; --accent: #b23a48;
  --card: #fffafa; --line: #dcc8c8;
}
[data-theme="mizuumi"] {
  --bg: #eef1f0; --bg-soft: #e0e7e6;
  --ink: #28323a; --ink-soft: #5a6871;
  --deep: #35566b; --accent: #c67b3b;
  --card: #fbfdfd; --line: #c9d5d6;
}
/* CUSTOMIZE:THEME ここまで */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: .02em;
  transition: background .5s;
}
img { max-width: 100%; display: block; }

/* ---------- ヒーロー ---------- */
.hero { position: relative; height: 92svh; min-height: 480px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,24,20,.55), rgba(20,24,20,.05) 45%, rgba(20,24,20,.25));
}
.hero-text {
  position: absolute; left: 0; right: 0; bottom: 12%;
  text-align: center; color: #fff; z-index: 2;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.hero-text .label {
  font-size: 12px; letter-spacing: .35em; margin-bottom: 10px;
}
.hero-text h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 8vw, 52px); letter-spacing: .18em;
}
.hero-text .date { font-family: var(--serif); font-size: 14px; letter-spacing: .25em; margin-top: 10px; }
.scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 10px; letter-spacing: .3em; z-index: 2; opacity: .8;
  animation: cue 2.4s infinite;
}
@keyframes cue { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,7px);} }

/* ---------- 本文共通 ---------- */
main { max-width: 720px; margin: 0 auto; padding: 0 18px; }
.intro { padding: 64px 6px 8px; text-align: center; }
.intro p { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }

.day { padding-top: 56px; }
.day-head { text-align: center; margin-bottom: 34px; }
.day-head .en {
  font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: var(--accent);
}
.day-head h2 {
  font-family: var(--serif); font-size: 24px; letter-spacing: .12em; font-weight: 600;
}
.day-head .line { width: 46px; height: 1px; background: var(--accent); margin: 14px auto 0; }

/* タイムライン */
.spots { position: relative; padding-left: 26px; }
.spots::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}
.spot { position: relative; margin-bottom: 52px; }
.spot::before {
  content: attr(data-no); position: absolute; left: -26px; top: -2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--deep); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.spot figure {
  border-radius: 10px; overflow: hidden; margin-bottom: 14px;
  box-shadow: 0 6px 22px rgba(30,35,28,.14);
}
.spot figure img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.spot h3 {
  font-family: var(--serif); font-size: 19px; letter-spacing: .08em;
  font-weight: 600; margin-bottom: 4px;
}
.spot p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- ワイド写真の幕間 ---------- */
.interlude { margin: 70px 0 0; position: relative; }
.interlude img { width: 100%; height: 30vh; min-height: 170px; object-fit: cover; }
.interlude figcaption {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-size: clamp(16px, 4vw, 22px);
  letter-spacing: .2em; text-shadow: 0 1px 10px rgba(0,0,0,.6);
  background: rgba(15,20,15,.18);
}

/* ---------- ふたりの一枚（ポラロイド風） ---------- */
.polaroid-wrap { padding: 70px 0 10px; display: flex; justify-content: center; }
.polaroid {
  background: #fff; padding: 12px 12px 40px; transform: rotate(-2.4deg);
  box-shadow: 0 10px 30px rgba(30,35,28,.22); max-width: 420px; position: relative;
}
.polaroid img { aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption {
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 13px; color: #444; letter-spacing: .12em;
}

/* ---------- あしあと地図 ---------- */
.map-sec { padding-top: 70px; text-align: center; }
.map-sec h2 { font-family: var(--serif); font-size: 21px; letter-spacing: .15em; margin-bottom: 6px; }
.map-sec .note { font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; }
.map-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; box-shadow: 0 6px 22px rgba(30,35,28,.08);
}
.map-box svg { width: 100%; height: auto; }
.pin { cursor: pointer; }
.pin circle.dot { fill: var(--accent); transition: r .2s; }
.pin text.no { fill: #fff; font-size: 7px; pointer-events: none; }
.pin text.name {
  fill: var(--ink); font-size: 9px; opacity: 0; transition: opacity .25s;
  paint-order: stroke; stroke: var(--card); stroke-width: 3px;
}
.pin.active text.name { opacity: 1; }
.route { fill: none; stroke: var(--accent); stroke-dasharray: 3 4; stroke-width: 1.2; opacity: .7; }
.lake { fill: color-mix(in srgb, var(--deep) 22%, var(--bg)); }
.land-label { fill: var(--ink-soft); font-size: 8px; letter-spacing: .2em; }

/* ---------- むすび ---------- */
.closing { padding: 80px 10px 70px; text-align: center; }
.closing .line { width: 46px; height: 1px; background: var(--accent); margin: 0 auto 26px; }
.closing p {
  font-family: var(--serif); font-size: 15.5px; line-height: 2.3; letter-spacing: .06em;
}
.closing .sig { margin-top: 26px; font-size: 13px; color: var(--ink-soft); letter-spacing: .2em; }

/* ---------- DEMO-ONLY: テーマ切替（納品時はこのブロックとJS該当部を削除） ---------- */
.demo-themes {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 46px 18px 54px; text-align: center; transition: background .5s;
}
.demo-themes h2 { font-family: var(--serif); font-size: 17px; letter-spacing: .18em; margin-bottom: 4px; }
.demo-themes .note { font-size: 12px; color: var(--ink-soft); margin-bottom: 20px; }
.swatches { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.swatch {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; width: 104px; transition: transform .2s;
}
.swatch:active { transform: scale(.96); }
.swatch.on { outline: 2px solid var(--accent); }
.swatch .chips { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
.swatch .chips i { width: 18px; height: 18px; border-radius: 50%; }
.swatch span { font-family: var(--serif); font-size: 12px; letter-spacing: .1em; }
/* DEMO-ONLY ここまで */

/* ---------- フッター ---------- */
footer {
  background: var(--ink); color: #cfcabb; text-align: center;
  padding: 34px 18px 40px; font-size: 11px;
}
footer .brand { font-family: var(--serif); letter-spacing: .3em; font-size: 12px; margin-bottom: 10px; }
footer details { max-width: 640px; margin: 0 auto; text-align: left; }
footer summary { cursor: pointer; text-align: center; opacity: .8; }
footer li { list-style: none; line-height: 1.7; opacity: .75; }
footer a { color: #cfcabb; }

/* ---------- ふわっと表示 ---------- */
.fade { opacity: 0; transform: translateY(18px); transition: opacity .8s, transform .8s; }
.fade.in { opacity: 1; transform: none; }