/* DEMOベーカリー（7R のホームページの見本）
   考え：パン屋の紙袋（クラフト紙）と、駅の発車標のような「焼き上がりの時刻」の板。
   板の文字は、開いたときにパタパタとめくれて出てくる（ここに大胆さを使う）。
   色：クラフト紙・ライ麦の焦げ茶・小麦の黄・店の判子の赤。字は太いゴシックと丸ゴシック。
   端末で「動きを減らす」にしていると、めくれ・湯気・ゆれは止まる。 */

:root {
  --kraft: #D8B98C;
  --kraft-2: #C9A472;
  --rye: #2A1A10;
  --rye-2: #3A2618;
  --rye-line: #4E3726;
  --wheat: #F3C24F;
  --stamp: #B3262F;
  --stamp-dark: #8E1B23;
  --flour: #FFFDF8;
  --crumb: #5A3B22;
  --on-rye: #F7EBD8;
  --on-rye-dim: #B59E84;

  --display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --body: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --gutter: 16px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--flour);
  color: var(--rye);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.2; }
p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--rye); outline-offset: 3px; border-radius: 4px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--flour); padding: 10px 16px; border: 3px solid var(--rye); }
.skip:focus { top: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* クラフト紙の目（細い繊維の線だけ） */
.hero, .torioki {
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(82deg, rgba(90, 59, 34, .045) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-9deg, rgba(255, 253, 248, .07) 0 1px, transparent 1px 17px);
}

.demo-band { padding: 6px var(--gutter); background: var(--rye); color: var(--on-rye); font-size: 12.5px; line-height: 1.6; text-align: center; }

/* 判子 */
.stamp {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--stamp); color: #FFFFFF;
  font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1;
  box-shadow: inset 0 0 0 3px var(--stamp), inset 0 0 0 5px #FFFFFF;
  transform: rotate(-10deg);
}
.stamp--big { width: 56px; height: 56px; font-size: 28px; }

/* 上の段 */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--flour); border-bottom: 3px solid var(--rye); }
.site-head__inner { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter); min-height: 66px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .02em; }
.site-nav { display: flex; margin-left: auto; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; text-decoration: none; font-size: 15px; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--stamp); }
.head-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--rye); color: var(--on-rye); border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 15px; }
.head-tel:focus-visible { outline-color: var(--stamp); }

/* ボタン（貼り紙のように、影をずらす） */
.btn {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 56px; padding: 10px 22px;
  border: 3px solid var(--rye); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--rye);
  font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rye); }
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--rye); }
.btn__sub { font-family: var(--body); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.btn--stamp { background: var(--stamp); color: #FFFFFF; }
.btn--rye { background: var(--rye); color: var(--wheat); }
.btn--paper { background: var(--flour); color: var(--rye); padding-left: 44px; }
.btn--paper::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #06C755; box-shadow: 0 0 0 2px var(--rye); }

/* ===== 最初の画面 ===== */
.hero { border-bottom: 3px solid var(--rye); }
.hero__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: stretch;
}
.hero__where { font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.hero__text { position: relative; }
.hero__msg { display: block; font-weight: 900; font-size: clamp(44px, 5.6vw, 72px); line-height: 1.1; letter-spacing: -.02em; }
.hero__name { display: inline-block; margin-top: 22px; font-weight: 800; font-size: 20px; letter-spacing: .04em; padding: 2px 0; border-bottom: 4px solid var(--stamp); }
.hero__hours { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.hero__hours span { display: inline-flex; align-items: center; padding: 4px 14px; border: 2px solid var(--rye); border-radius: 999px; background: var(--flour); font-weight: 700; font-size: 15px; }
.cta-set { display: grid; gap: 14px; max-width: 380px; }
.cta-set .btn { width: 100%; }

.loaf { position: absolute; right: 0; bottom: 0; width: 150px; height: auto; overflow: visible; }
.loaf__crust { fill: #8A4B1F; }
.loaf__crumb { fill: #F6E2B8; }
.loaf__steam { fill: none; stroke: var(--flour); stroke-width: 6; stroke-linecap: round; opacity: 0; animation: steam 3.4s ease-in-out infinite; }
.loaf__steam--2 { animation-delay: 1.1s; }
.loaf__steam--3 { animation-delay: 2.2s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(14px); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* 焼き上がりの板 */
.board-wrap { position: relative; }
.board {
  background: var(--rye); color: var(--on-rye);
  border-radius: 16px; padding: 26px 26px 20px;
  box-shadow: 10px 10px 0 var(--kraft-2), 10px 10px 0 3px var(--rye);
}
.board__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board__title { color: var(--wheat); font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .04em; }
.board__now { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--on-rye); display: inline-flex; align-items: center; gap: 8px; }
.board__now .cells { font-size: 22px; }
.board__status { margin: 10px 0 14px; min-height: 1.85em; font-size: 15px; color: var(--on-rye); }
.board__list { border-top: 2px solid var(--rye-line); }
.board__list li {
  display: grid; grid-template-columns: 8.6em minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 10px; border-bottom: 1px dashed var(--rye-line);
  border-left: 5px solid transparent;
}
.board__time { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--wheat); letter-spacing: .02em; font-variant-numeric: tabular-nums; perspective: 300px; white-space: nowrap; }
.board__item { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.4; transform-origin: 50% 50%; }
.board__mark { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.board__list li.is-past .board__time, .board__list li.is-past .board__item { color: var(--on-rye-dim); }
.board__list li.is-past .board__mark { color: var(--on-rye-dim); }
.board__list li.is-next { background: var(--rye-2); border-left-color: var(--wheat); }
.board__list li.is-next .board__mark { background: var(--wheat); color: var(--rye); padding: 3px 10px; border-radius: 999px; }
.board__foot { margin-top: 14px; font-size: 13.5px; color: var(--on-rye-dim); }

/* めくれる文字（JS が1字ずつに分ける） */
.cells { display: inline-flex; gap: 3px; perspective: 300px; }
.cell {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: .78em; padding: 0 .06em;
  background: var(--rye-2); border-radius: 5px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative; transform-origin: 50% 50%; backface-visibility: hidden;
}
.cell--colon { min-width: .36em; background: transparent; box-shadow: none; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .45); }
.cell--colon::after { display: none; }
.is-past .cell { background: #33231A; }
.is-next .cell { background: #1E120A; }
.flip { animation: flap 620ms cubic-bezier(.25, 1.5, .55, 1) both; }
.flip-row { animation: flaprow 700ms cubic-bezier(.25, 1.4, .55, 1) both; }
@keyframes flap { 0% { transform: rotateX(-100deg); opacity: .2; } 60% { opacity: 1; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes flaprow { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }

/* ===== いつものパン ===== */
.pan { padding: 80px 0 72px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-head h2 { font-weight: 900; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.01em; }
.sec-head p { font-weight: 700; color: var(--crumb); }
.sec-head--stack { display: block; margin-bottom: 24px; }

.tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; grid-auto-flow: dense; }
.tag {
  position: relative;
  background: var(--kraft); color: var(--rye);
  padding: 34px 22px 18px;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
  display: flex; flex-direction: column;
}
.tag::before { content: ""; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--flour); box-shadow: 0 0 0 3px var(--kraft-2); }
.tag--wide { grid-column: span 2; }
.tag:nth-child(4n + 1) { transform: rotate(-1.4deg); }
.tag:nth-child(4n + 2) { transform: rotate(1.1deg); }
.tag:nth-child(4n + 3) { transform: rotate(-.5deg); }
.tag:nth-child(4n) { transform: rotate(1.7deg); }
.tag h3 { font-weight: 900; font-size: 22px; line-height: 1.3; }
.tag h3 small { font-size: 14px; font-weight: 700; margin-left: 8px; }
.tag p { font-size: 14.5px; color: var(--crumb); margin-top: 8px; line-height: 1.7; flex: 1; }
.tag .tag__price { flex: none; margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--rye); }
.tag__price span { font-family: var(--body); font-size: 14px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.tag--wide h3 { font-size: 26px; }
.tag--wide .tag__price { font-size: 52px; }
.pan__note { margin-top: 36px; max-width: 46em; font-size: 15px; font-weight: 700; color: var(--crumb); border-left: 5px solid var(--stamp); padding: 4px 0 4px 14px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tag:hover { animation: swing 900ms ease-in-out; }
  @keyframes swing { 0%, 100% { rotate: 0deg; } 25% { rotate: 2.4deg; } 55% { rotate: -1.8deg; } 80% { rotate: .8deg; } }
}

/* ===== 取り置き ===== */
.torioki { padding: 76px 0 84px; border-top: 3px solid var(--rye); border-bottom: 3px solid var(--rye); }
.torioki__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.rules > div { padding: 14px 0; border-top: 2px solid var(--rye); }
.rules > div:last-child { border-bottom: 2px solid var(--rye); }
.rules dt { font-family: var(--display); font-weight: 800; font-size: 18px; }
.rules dd { color: var(--rye); }

.slip {
  background: var(--flour); border: 3px solid var(--rye); border-radius: 14px;
  box-shadow: 8px 8px 0 var(--rye);
  padding: 0 26px 26px; display: grid; gap: 20px;
}
.slip__title { margin: 0 -26px; padding: 14px 26px; background: var(--rye); color: var(--wheat); font-family: var(--display); font-weight: 900; font-size: 22px; border-radius: 10px 10px 0 0; border-bottom: 3px dashed var(--kraft); }
.field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.field > label, .field > legend { font-weight: 700; font-size: 15.5px; padding: 0; margin-bottom: 6px; }
.field input[type="text"], .field input[type="date"], .field textarea {
  width: 100%; min-height: 52px; padding: 10px 14px;
  font: inherit; color: var(--rye); background: #FFFFFF;
  border: 2px solid var(--rye); border-radius: 10px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field__help { font-size: 13.5px; color: var(--crumb); line-height: 1.7; }
.field__count { font-size: 13.5px; color: var(--crumb); text-align: right; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 2px solid var(--rye); border-radius: 999px; cursor: pointer; font-weight: 700; line-height: 1.3; }
.choice input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--stamp); }
.choice:has(input:checked) { background: var(--wheat); }
.choice:has(input:focus-visible) { outline: 3px solid var(--rye); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.btn--submit { justify-self: start; align-items: center; min-width: 240px; }
.slip__result:not(:empty) { background: var(--wheat); border: 2px solid var(--rye); border-radius: 10px; padding: 12px 16px; font-weight: 700; }

/* ===== 場所と時間 ===== */
.basho { padding: 80px 0 56px; }
.basho__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.basho h2 { font-weight: 900; font-size: clamp(30px, 3.6vw, 44px); }
.basho__big { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 6.4vw, 84px); line-height: 1; letter-spacing: -.03em; margin: 22px 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.basho__off { display: inline-block; background: var(--stamp); color: #FFFFFF; font-weight: 800; padding: 4px 14px; border-radius: 6px; margin-bottom: 26px; }
.basho__list > div { display: grid; grid-template-columns: 4em 1fr; gap: 14px; padding: 12px 0; border-top: 2px solid var(--rye); }
.basho__list > div:last-child { border-bottom: 2px solid var(--rye); }
.basho__list dt { font-weight: 800; }
.basho__demo { margin-top: 22px; font-size: 13.5px; color: var(--crumb); }

.street { width: 100%; height: auto; display: block; border: 3px solid var(--rye); border-radius: 14px; box-shadow: 8px 8px 0 var(--kraft-2); }
.street__bg { fill: var(--kraft); }
.street__road { stroke: var(--flour); stroke-width: 28; fill: none; }
.street__station { fill: var(--rye); }
.street__walk { fill: none; stroke: var(--rye); stroke-width: 5; stroke-dasharray: 1 12; stroke-linecap: round; }
.street__shop { fill: var(--stamp); stroke: var(--rye); stroke-width: 3; }
.street__label { font: 900 22px var(--display); fill: var(--rye); }
.street__label--light { fill: #FFFFFF; }
.street__small { font: 700 17px var(--body); fill: var(--rye); }

/* 下の段 */
.site-foot { background: var(--rye); color: var(--on-rye); margin-top: 24px; }
.site-foot__inner { padding-top: 52px; padding-bottom: 60px; }
.site-foot__brand { display: flex; align-items: center; gap: 16px; font-family: var(--display); font-weight: 900; font-size: 26px; margin-bottom: 24px; }
.site-foot__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.site-foot__list > div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rye-line); font-size: 15px; }
.site-foot__list dt { color: var(--on-rye-dim); }
.site-foot__demo { margin-top: 26px; font-size: 13px; color: var(--on-rye-dim); }

.dock { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%);
  width: min(92vw, 460px); background: var(--wheat); color: var(--rye);
  border: 3px solid var(--rye); border-radius: 12px; box-shadow: 5px 5px 0 var(--rye);
  padding: 14px 18px; font-weight: 700; font-size: 15px; line-height: 1.6;
}

/* ===== 幅の狭い画面 ===== */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .head-tel { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .loaf { display: none; }
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .torioki__grid { grid-template-columns: 1fr; gap: 36px; }
  .basho__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 78px; }
  .site-head__inner { min-height: 58px; }
  .brand__name { font-size: 17px; }
  .stamp { width: 34px; height: 34px; font-size: 17px; }
  .head-tel { display: none; }
  .hero__inner { padding-top: 30px; padding-bottom: 40px; }
  .hero__msg { font-size: 44px; }
  .cta-set { max-width: none; }

  .board { padding: 18px 14px 16px; box-shadow: 6px 6px 0 var(--kraft-2), 6px 6px 0 3px var(--rye); }
  .board__list li { grid-template-columns: 6.2em minmax(0, 1fr); grid-template-areas: "time item" "time mark"; column-gap: 8px; row-gap: 2px; padding: 10px 4px 10px 6px; }
  .board__time { grid-area: time; }
  .board__item { grid-area: item; }
  .board__mark { grid-area: mark; justify-self: start; }
  .board__mark:empty { display: none; }
  .board__time { font-size: 21px; }
  .board__item { font-size: 16px; }
  .board__mark { font-size: 12px; }
  .board__list li.is-next .board__mark { padding: 2px 8px; }
  .cells { gap: 2px; }

  .pan { padding: 56px 0 48px; }
  .tags { gap: 18px 12px; }
  .tag { padding: 30px 12px 14px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }
  .tag h3 { font-size: 18px; }
  .tag h3 small { display: block; margin-left: 0; font-size: 13px; }
  .tag p { font-size: 13.5px; }
  .tag .tag__price { font-size: 28px; }
  .tag__price span { font-size: 12px; margin-left: 2px; }
  .tag--wide h3 { font-size: 21px; }
  .tag--wide h3 small { display: inline; margin-left: 6px; }
  .tag--wide .tag__price { font-size: 40px; }

  .torioki { padding: 52px 0 60px; }
  .slip { padding: 0 16px 20px; box-shadow: 5px 5px 0 var(--rye); }
  .slip__title { margin: 0 -16px; padding: 12px 16px; }
  .choices { grid-template-columns: 1fr; }
  .btn--submit { width: 100%; }

  .basho { padding: 56px 0 40px; }
  .basho__big { font-size: clamp(40px, 13.6vw, 56px); letter-spacing: -.04em; }
  .street { box-shadow: 5px 5px 0 var(--kraft-2); }
  .site-foot__list { grid-template-columns: 1fr; }
  .site-foot__list > div { grid-template-columns: 8em 1fr; }

  .dock {
    display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: var(--flour); border-top: 3px solid var(--rye);
  }
  .dock__btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 3px solid var(--rye); border-radius: 12px; background: var(--rye); color: var(--wheat); font-family: var(--display); font-weight: 800; text-decoration: none; font-size: 16px; }
  .dock__btn--stamp { background: var(--stamp); color: #FFFFFF; }
  .dock__btn--paper { background: var(--flour); color: var(--rye); }
  .toast { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .loaf__steam { animation: none; opacity: .7; }
  .flip, .flip-row { animation: none; }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}