/* コンセプトカフェ ゆめうつつ（作品用デモ・画像LP）
   見た目の正解は images/*.webp のデザインカンプ。HTMLで作るのは、押せる場所・PCの左右の帯・スマホの追従ボタンだけ。
   背景はページ全体で1枚のつながった背景（カンプの外周と同じミルクピンク＋淡いダマスク柄）。各セクションはその上のカード。
   ボタンは mato-button-depth の決まり：ピル型／上3分の1の光沢／上端の内側の明部／右下の内側の照り返し／影は黒やグレーでなく赤紫。 */

:root {
  --bg: #F6DCE6; --bg-pat: #F0D0DD;
  --ink: #231C24; --sub: #4A3A44; --muted: #7A5A68;
  --pink: #F09DBB; --hot: #D94F86; --hot-hi: #E8679A; --hot-lo: #B83D70; --hot-base: #A8376A;
  --gold: #D8B48A;
  --shadow-rgb: 138, 63, 98;         /* 影の色：背景のピンクを濃くした赤紫 #8A3F62 */
  --col: 560px;                      /* PCで最も見やすい画像の幅 */
  --mincho: "Hina Mincho", "Hiragino Mincho ProN", serif;
  --dot: "DotGothic16", "Zen Kaku Gothic New", monospace;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  /* つながった1枚の背景：カンプの外周と同じミルクピンク（PCの左右も同じ色でつなぐ。CSSで柄を描かない） */
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dot { font-family: var(--dot); letter-spacing: .06em; }

/* ---------- 配置 ---------- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.lp { width: 100%; max-width: var(--col); margin: 0 auto; }
.sec { position: relative; container-type: inline-size; scroll-margin-top: 0; }
.sec img { aspect-ratio: 1024 / 1792; }
.foot { padding: 28px 20px calc(96px + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .06em; }

/* 画像の中のボタンの上に重ねる、押せる場所（見た目は画像のボタンのまま） */
.hit {
  position: absolute;
  left: var(--x); width: var(--w);
  top: var(--top); height: var(--h);
  min-height: 44px;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.hit:hover { background-color: rgba(255, 255, 255, .12); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) inset; }
.hit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hit--sub { border-radius: 8px; }

/* ---------- ボタン（mato-button-depth 8-1） ---------- */
.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  border-radius: 9999px;
  color: #fff;
  font-family: var(--gothic);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(var(--shadow-rgb), .35);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 33%),
    linear-gradient(100deg, var(--hot-hi), var(--hot) 45%, var(--hot-lo));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),          /* 明部：上端の内側 */
    inset -2px -4px 8px rgba(255, 255, 255, .28),     /* 反射光：右下の内側 */
    inset 0 0 0 2px rgba(255, 255, 255, .35),         /* 内側の細い白の線 */
    0 4px 0 var(--hot-base),                           /* 厚みの層 */
    0 12px 26px rgba(var(--shadow-rgb), .45);          /* 外側のやわらかい影（赤紫） */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn__arrow { font-size: 1.1em; line-height: 1; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 0 0 2px rgba(255,255,255,.35), 0 1px 0 var(--hot-base), 0 6px 14px rgba(var(--shadow-rgb), .4); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

/* スマホの追従ボタン */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(246, 220, 230, .96) 55%, rgba(246, 220, 230, 0));
  transform: translateY(110%); transition: transform .28s ease;
  pointer-events: none;
}
.sticky.is-on { transform: translateY(0); pointer-events: auto; }
.btn--sticky { max-width: calc(var(--col) - 32px); margin: 0 auto; min-height: 52px; font-size: 16px; }

/* ---------- PC：左右の帯 ---------- */
.side { display: none; }
@media (min-width: 1100px) {
  :root { --side: 360px; --gap: 64px; }
  .page { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .lp { grid-column: 2; grid-row: 1; }
  /* 左右の帯：同じ幅・画像からの距離も同じ・縦の中央に。左は画像側（右）にそろえ、右は画像側（左）にそろえる */
  .side {
    display: flex; flex-direction: column; justify-content: center;
    position: sticky; top: 0; height: 100vh; grid-row: 1;
  }
  /* 左右の帯は画像（世界観に合わせて生成した素材を背景から抜いたもの）。左＝doちゃんとロゴ、右＝営業時間の窓とボタン */
  .side--left { grid-column: 1; align-items: flex-end; padding-right: var(--gap); }
  .side--right { grid-column: 3; align-items: flex-start; padding-left: var(--gap); }
  .side__img { width: auto; max-width: 100%; }
  .side__img--left { height: min(80vh, 680px); filter: drop-shadow(0 16px 20px rgba(var(--shadow-rgb), .22)); }
  .side__board { position: relative; width: min(var(--side), 100%); }
  .side__img--right { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(var(--shadow-rgb), .22)); }
  .sticky { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  :root { --side: 270px; --gap: 28px; }
  .side__img--left { height: min(72vh, 560px); }
}

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