/* 冬凪酒造 冬の蔵見学 — 完成画像を縦に並べ、操作と注意表示だけを HTML で重ねる */
:root {
  --washi: #ECE5D6;
  --washi-deep: #E2D9C7;
  --sumi: #24221E;
  --ai: #2C3A55;
  --shu: #A6452B;
  --hakuji: #F5F2EB;
  --col: 640px;              /* PC の表示幅。縦長の完成画像が読みやすい幅 */
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--washi-deep);
  color: var(--sumi);
  font-family: var(--font);
  line-height: 1.8;
}
img { display: block; max-width: 100%; height: auto; }

.lp {
  width: min(100%, var(--col));
  margin: 0 auto;
  background: var(--washi);
}
@media (min-width: 700px) {
  .lp { box-shadow: 0 0 0 1px rgba(36, 34, 30, .06), 0 18px 60px rgba(36, 34, 30, .10); }
}

.part { position: relative; }
.part img { width: 100%; }

/* 見出しの全文（画面には出さず、検索と読み上げのため） */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 画像の中のボタン・カードに重ねる押せる場所（見た目は画像のまま） */
.hot {
  position: absolute;
  top: var(--t); left: var(--l); width: var(--w); height: var(--h);
  min-height: 44px;
  border-radius: 6px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(44, 58, 85, .12);
}
.hot:focus-visible { outline: 3px solid var(--shu); outline-offset: 3px; }
@media (hover: hover) {
  .hot { transition: box-shadow .2s ease, background-color .2s ease; }
  .hot:hover { background: rgba(245, 242, 235, .10); box-shadow: 0 6px 18px rgba(36, 34, 30, .18); }
  .hot--card:hover { background: rgba(166, 69, 43, .05); }
}

/* 06 の下の一言 */
.note {
  margin: 0;
  padding: 0 8% 6%;
  font-size: clamp(13px, 3.4vw, 15px);
  color: #4A453E;
}

/* 07 の下：行き方（変わりやすい情報は HTML の文字で） */
.access {
  margin: 0 8%;
  padding: 0 0 9%;
}
.access__h {
  margin: 0 0 .6em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 500;
  font-size: clamp(18px, 4.6vw, 22px);
  letter-spacing: .08em;
}
.access__list { margin: 0; border-top: 1px solid rgba(36, 34, 30, .25); }
.access__list div {
  display: grid; grid-template-columns: 5.5em 1fr; gap: .8em;
  padding: .7em 0;
  border-bottom: 1px solid rgba(36, 34, 30, .25);
  font-size: clamp(14px, 3.8vw, 16px);
}
.access__list dt { color: #5A544B; }
.access__list dd { margin: 0; }

/* お酒の注意表示・デモの注記 */
.foot {
  width: min(100%, var(--col));
  margin: 0 auto;
  padding: 28px 8% calc(120px + env(safe-area-inset-bottom));
  background: var(--sumi);
  color: var(--hakuji);
}
.foot__notice {
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: clamp(14px, 3.8vw, 15px);
  line-height: 1.75;
}
.foot__notice li { padding-left: 1em; text-indent: -1em; }
.foot__notice li::before { content: "・"; }
.foot__demo, .foot__ver { margin: 0 0 6px; font-size: 13px; color: #CFCAC0; }

/* 画面の下に浮く予約ボタン（FV と予約の段が見えている間は隠す） */
.sticky {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  width: min(calc(100% - 32px), calc(var(--col) - 64px));
  min-height: 52px;
  padding: 0 1em;
  border-radius: 6px;
  background: var(--ai);
  color: var(--hakuji);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: .12em;
  box-shadow: 0 10px 28px rgba(18, 22, 34, .28);
  transform: translate(-50%, 140%);
  transition: transform .35s ease;
}
.sticky.is-on { transform: translate(-50%, 0); }
.sticky:focus-visible { outline: 3px solid var(--shu); outline-offset: 3px; }

/* デモの申込先の案内 */
.toast {
  position: fixed; left: 50%; top: 18px; z-index: 30;
  max-width: calc(100% - 32px);
  padding: .8em 1.2em;
  border-radius: 6px;
  background: var(--sumi); color: var(--hakuji);
  font-size: 14px;
  transform: translate(-50%, -160%);
  transition: transform .3s ease;
}
.toast.is-on { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky, .toast, .hot { transition: none; }
}