/* パン屋 こむぎ時計（デモ）
   配色: 生成り × 焦げ茶 × 小麦色。写真が主役なので色は5つまで。
   書体: 見出し Klee One／本文 Zen Maru Gothic */
:root {
  --paper: #FAF6EE;      /* 生成り（明るい） */
  --kinari: #F1E8D8;     /* 生成り（濃い） */
  --koge: #3B2A20;       /* 焦げ茶 */
  --koge-soft: #6B5848;  /* 焦げ茶の薄い字 */
  --komugi: #E0B56E;     /* 小麦色 */
  --komugi-deep: #B07A35;
  --line: #DCCDB3;
  --hand: "Klee One", "Zen Maru Gothic", serif;
  --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--koge);
  font-family: var(--body);
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--komugi-deep); outline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.h2 {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(25px, 1.2rem + 1.4vw, 34px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* ---------- ヘッダー（写真の上に重ねる） ---------- */
.head { position: absolute; inset: 0 0 auto; z-index: 20; color: #fff; }
.head__in {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 30px) clamp(20px, 3.4vw, 48px);
}
.head__brand { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mark { width: clamp(38px, 2rem + 0.8vw, 46px); height: auto; aspect-ratio: 1; display: block; filter: url(#mk-rough-s); }
.logo-word { display: block; width: clamp(112px, 6.4rem + 1.4vw, 136px); height: auto; aspect-ratio: 150 / 38; overflow: visible; }
.head__word { display: flex; flex-direction: column; }
.head__demo { font-size: 10px; letter-spacing: 0.24em; opacity: 0.75; margin-top: 1px; padding-left: 2px; }
.head__nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); font-size: 14px; letter-spacing: 0.12em; padding-top: 4px; }
.head__nav a { text-decoration: none; padding: 4px 0; }
.head__nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.head__ig svg, .foot__ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }
.head__ig svg .dot, .foot__ig svg .dot { fill: currentColor; stroke: none; }
.head__menu { display: none; }

@media (max-width: 767px) {
  .head__menu {
    display: block; position: relative; z-index: 2;
    background: none; border: 1px solid rgba(255,255,255,0.7); color: #fff;
    font: 500 11px/1 var(--body); letter-spacing: 0.2em;
    padding: 10px 12px; min-height: 40px; border-radius: 2px; cursor: pointer;
  }
  .head__nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 22px;
    background: var(--koge); color: var(--paper);
    font-size: 18px; letter-spacing: 0.16em;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .nav-open .head__nav { opacity: 1; visibility: visible; }
  .nav-open .head__menu { border-color: rgba(250,246,238,0.6); }
  .nav-open { overflow: hidden; }
  .head__ig svg { width: 24px; height: 24px; }
}

/* ---------- 最初の画面 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #2A1D14; color: #fff; }
.hero__ph { position: absolute; inset: 0; transform-origin: 38% 55%; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 60%;
  filter: brightness(0.58) saturate(1.05) contrast(1.05);
}
.hero__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px;
  text-shadow: 0 1px 18px rgba(20, 12, 6, 0.45);
}
.hero__stamp {
  width: clamp(76px, 4rem + 3vw, 112px); height: auto; aspect-ratio: 1;
  margin-bottom: clamp(12px, 2vw, 22px); color: #fff; opacity: 0.92;
  filter: url(#mk-rough) drop-shadow(0 1px 10px rgba(20,12,6,.35));
}
.hero__name {
  font-family: var(--hand); font-weight: 600;
  font-size: clamp(58px, 11vw, 148px);
  letter-spacing: 0.02em; line-height: 1.1;
  font-feature-settings: "palt";
}
.hero__lead {
  margin-top: clamp(14px, 2vw, 24px);
  font-weight: 500; font-size: clamp(15px, 0.8rem + 0.7vw, 21px);
  letter-spacing: 0.16em;
}
.hero__time {
  margin-top: 10px; font-size: clamp(12px, 0.7rem + 0.2vw, 14px);
  letter-spacing: 0.14em; opacity: 0.9;
}
.hero__down {
  position: absolute; left: 50%; bottom: clamp(18px, 3vh, 34px); transform: translateX(-50%);
  text-decoration: none; font-size: 20px; line-height: 1; padding: 8px 12px; opacity: 0.85;
}

/* ---------- お知らせ ---------- */
.news { padding: clamp(64px, 9vw, 120px) 0; }
.news__wrap { display: grid; gap: 8px; }
.news .h2 { margin-bottom: 20px; }
.news__list { border-top: 1px solid var(--line); }
.news__list li {
  display: grid; grid-template-columns: 7.2em 1fr; gap: 4px 20px;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
}
.news__list time { font-size: 14px; color: var(--komugi-deep); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; padding-top: 1px; }
.more { display: inline-block; margin-top: 20px; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.news__body { text-align: right; }
.news__list { text-align: left; }
@media (min-width: 768px) {
  .news__wrap { grid-template-columns: 220px 1fr; align-items: start; }
  .news .h2 { text-align: left; margin: 14px 0 0; }
}
@media (max-width: 479px) {
  .news__list li { grid-template-columns: 1fr; }
}

/* ---------- 営業日カレンダー ---------- */
.days { background: var(--kinari); padding: clamp(64px, 9vw, 120px) 0; }
.cal-pair { display: grid; gap: 40px 56px; max-width: 860px; margin-inline: auto; }
@media (min-width: 768px) { .cal-pair { grid-template-columns: 1fr 1fr; } }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal caption {
  font-family: var(--hand); font-weight: 600; font-size: 17px; letter-spacing: 0.08em;
  text-align: left; padding: 0 2px 14px;
}
.cal caption b { font-size: 32px; font-weight: 600; margin: 0 2px; }
.cal th { font-weight: 500; font-size: 12px; color: var(--koge-soft); padding: 14px 0 6px; }
.cal td { text-align: center; padding: 5px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.cal td span {
  display: inline-grid; place-items: center;
  width: clamp(30px, 8.4vw, 38px); aspect-ratio: 1; border-radius: 50%;
}
.cal td.open span { background: var(--komugi); color: var(--koge); }
.cal td.off span { background: #fff; color: var(--koge-soft); box-shadow: inset 0 0 0 1px var(--line); }
.cal td.today span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--koge); }
.cal tbody tr:last-child td { padding-bottom: 14px; }
.days__note { margin: 36px auto 0; max-width: 860px; font-size: 15px; display: grid; gap: 8px; }
.days__note p:last-child { color: var(--koge-soft); font-size: 14px; }

/* ---------- 定番のパン ---------- */
.bread { padding: clamp(64px, 9vw, 120px) 0; }
.bread__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
@media (min-width: 768px) { .bread__grid { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; } }
.bread__grid figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--kinari); }
.bread__grid img { width: 100%; height: 100%; object-fit: cover; }
.bread__grid p {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px;
  margin-top: 12px; font-size: 15px; line-height: 1.6;
}
.bread__grid .yen { color: var(--komugi-deep); font-variant-numeric: tabular-nums; }
.bread__note { margin-top: 40px; text-align: center; font-size: 14px; color: var(--koge-soft); }
@media (max-width: 479px) { .bread__grid p { font-size: 14px; flex-direction: column; margin-top: 10px; } }

/* ---------- こだわり ---------- */
.kodawari { background: #FFFCF6; padding: clamp(64px, 9vw, 120px) 0; }
.kd { display: grid; gap: 28px; align-items: center; }
.kd + .kd { margin-top: clamp(48px, 7vw, 96px); }
.kd__ph { overflow: hidden; border-radius: 3px; }
.kd__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kd__tx h3 {
  font-family: var(--hand); font-weight: 600; font-size: clamp(21px, 1rem + 0.6vw, 25px);
  letter-spacing: 0.12em; line-height: 1.4; margin-bottom: 10px;
}
.kd__tx p + h3 { margin-top: 32px; }
.kd__tx p { max-width: 30em; }
@media (min-width: 768px) {
  .kd--a { grid-template-columns: 1.25fr 1fr; gap: clamp(36px, 5vw, 72px); }
  .kd--b { grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 5vw, 72px); }
  .kd--b .kd__tx { padding-left: clamp(0px, 4vw, 56px); }
  .kd--b { grid-template-columns: 1fr 0.8fr; }
  .kd--b .kd__ph img { aspect-ratio: 1 / 1; object-position: 46% 50%; }
}
@media (max-width: 767px) {
  .kd--b .kd__ph { order: -1; }
}

/* ---------- 店舗情報 ---------- */
.shop { background: var(--kinari); padding: clamp(64px, 9vw, 120px) 0; }
.shop__ph { overflow: hidden; border-radius: 3px; }
.shop__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
@media (min-width: 768px) { .shop__ph img { aspect-ratio: 21 / 9; } }
.shop__cols { display: grid; gap: 40px; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .shop__cols { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } }
.shop__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.shop__table th, .shop__table td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px dotted #BFAE92; }
.shop__table tr:first-child th, .shop__table tr:first-child td { border-top: 1px dotted #BFAE92; }
.shop__table th { width: 6.5em; font-weight: 500; color: var(--koge-soft); padding-right: 12px; white-space: nowrap; }
.shop__table a { text-decoration: none; }
.shop__keep { margin-top: 22px; font-size: 13.5px; line-height: 1.8; color: var(--koge-soft); }
.btn-keep {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 12px;
  padding: 0 20px; border-radius: 999px;
  background: var(--koge); color: var(--paper);
  font-size: 13px; letter-spacing: 0.1em; text-decoration: none;
  transition: background .2s ease;
}
.btn-keep:hover { background: #5A4232; }
.map { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: #F3EBDC; box-shadow: 0 0 0 1px var(--line), 0 12px 26px -20px rgba(59,42,32,.5); }
.map svg { width: 100%; height: 100%; display: block; }

/* ---------- フッター ---------- */
.foot { background: var(--koge); color: #EADFCB; padding: 56px 0 40px; font-size: 13.5px; }
.foot__in { display: grid; justify-items: center; text-align: center; gap: 14px; }
.foot__stamp { width: 112px; height: 112px; color: var(--komugi); transform: rotate(-8deg); filter: url(#mk-rough); opacity: 0.95; }
.foot__name { color: var(--paper); margin-top: 2px; }
.foot__name .logo-word { width: 150px; }
.foot__ig { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 0; }
.foot small { margin-top: 14px; font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; }


/* ---------- あしらい ---------- */
/* 紙の質感：細かいざらつきを重ねる（静止） */
.news, .days, .bread, .kodawari, .shop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.dd { display: block; color: var(--komugi-deep); overflow: visible; }

/* 見出しの手書き下線 */
.h2--line { position: relative; width: fit-content; margin-inline: auto; padding-bottom: 6px; }
.h2__line { position: absolute; left: -6%; bottom: -6px; width: 112%; height: 11px; color: var(--komugi); overflow: visible; transform-origin: left center; }

/* お知らせ：見出しの横に麦の穂、今日の札 */
.news__head { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.news__sprig { width: 26px; height: 78px; transform-origin: 50% 100%; margin-bottom: 18px; }
@media (min-width: 768px) {
  .news__head { justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 14px; }
  .news__sprig { width: 34px; height: 102px; margin: 0 0 0 10px; }
}
.tag {
  display: inline-grid; place-items: center; vertical-align: 1px;
  margin-left: 8px; width: 2.9em; height: 2.9em; border-radius: 50%;
  border: 1.5px solid var(--komugi-deep); color: var(--komugi-deep);
  font-family: var(--hand); font-weight: 600; font-size: 11px; letter-spacing: 0;
  transform: rotate(-12deg);
}
.news__list li.is-today { background: linear-gradient(90deg, rgba(224,181,110,.14), rgba(224,181,110,0) 70%); }
.news__list time { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; }
@media (min-width: 480px) { .news__list li { grid-template-columns: 9.6em 1fr; } }

/* 営業日：ちぎって貼れる紙のカード（上にミシン目と穴） */
.cal-card {
  position: relative; background: var(--paper); border-radius: 4px;
  padding: 34px clamp(10px, 2vw, 18px) 6px;
  box-shadow: 0 1px 0 rgba(59,42,32,.06), 0 10px 24px -18px rgba(59,42,32,.45);
}
.cal-card::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 16px; height: 0;
  border-top: 2px dashed var(--line);
}
.cal-card::after {
  content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--kinari); box-shadow: inset 0 1px 2px rgba(59,42,32,.25);
}
.cal-pair .cal-card:nth-child(1) { transform: rotate(-0.6deg); }
.cal-pair .cal-card:nth-child(2) { transform: rotate(0.5deg); }

/* 定番のパン：見出しの両側にパンの線画 */
.bread__head { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 28px); margin-bottom: clamp(28px, 4vw, 48px); }
.bread__head .h2 { margin-bottom: 0; }
.bread__loaf { width: clamp(58px, 9vw, 96px); height: auto; aspect-ratio: 120 / 72; transform: rotate(-6deg); }
.bread__cro { width: clamp(56px, 8.6vw, 92px); height: auto; aspect-ratio: 120 / 62; transform: rotate(7deg); }
.bread__grid figure { box-shadow: 0 12px 24px -20px rgba(59,42,32,.6); }

/* こだわり：写真の角に丸いスタンプ、小見出しに麦、手書きの矢印 */
.kd__ph--stamp { position: relative; overflow: visible; }
.kd__ph--stamp img { border-radius: 3px; }
.kd__stamp {
  position: absolute; z-index: 1; right: -14px; top: -22px;
  width: clamp(84px, 10vw, 118px); height: auto; aspect-ratio: 1;
  color: var(--komugi-deep); background: #FFFCF6; border-radius: 50%; padding: 4px;
  transform: rotate(-12deg); filter: url(#mk-rough);
}
.kd__tx h3 { display: flex; align-items: flex-end; gap: 6px; }
.h3__sprig { width: 12px; height: 36px; color: var(--komugi-deep); flex: none; transform: rotate(-10deg); transform-origin: 50% 100%; overflow: visible; }
.kd--b .kd__tx { position: relative; }
.kd__arrow { width: 74px; height: auto; aspect-ratio: 90 / 56; margin-top: 18px; margin-left: 30%; transform: rotate(-4deg); }
@media (max-width: 767px) { .kd__arrow { display: none; } .kd__stamp { right: -6px; } }

/* 店舗情報：外観写真をマスキングテープで留める */
.shop__ph { position: relative; overflow: visible; }
.shop__ph img { border-radius: 3px; }
.tape {
  position: absolute; z-index: 1; top: -12px; width: clamp(80px, 10vw, 120px); height: 26px;
  background: rgba(224,181,110,.62);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px);
  box-shadow: 0 1px 2px rgba(59,42,32,.12);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 50%);
}
.tape--l { left: 6%; transform: rotate(-5deg); }
.tape--r { right: 6%; transform: rotate(4deg); }
.shop { position: relative; }
.shop::before, .days::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 2px dashed rgba(176,122,53,.35);
}
.days { position: relative; }
.shop::before, .days::before { top: 10px; }

/* 最初の画面：湯気 */
.hero__steam {
  position: absolute; z-index: 1; pointer-events: none;
  left: 13%; top: 2%; width: clamp(170px, 24vw, 380px); height: auto; aspect-ratio: 200 / 260;
  opacity: .32;
}
@media (max-width: 767px) { .hero__steam { left: 8%; top: 6%; width: 56vw; } }

/* ==PAGES== */
/* ---------- 全ページ共通：ナビの今いるページ・フッターのリンク・続きのリンク ---------- */
.head__nav a[aria-current="page"] { position: relative; }
.head__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -3px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 24 3, 44 10, 64 6 S 104 3, 117 7' fill='none' stroke='%23E0B56E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.head__nav a[aria-current="page"]:hover { text-decoration: none; }
@media (max-width: 767px) { .head__nav a[aria-current="page"]::after { bottom: 0; } }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 6px 0 2px; font-size: 13px; letter-spacing: .06em; }
.foot__nav a { text-decoration: none; padding: 6px 0; opacity: .9; }
.foot__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.to-more { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
.to-more--r { text-align: right; }
.to-more .more { margin-top: 0; font-size: 15px; }
.shop__keep .more { margin-top: 6px; color: var(--koge); white-space: nowrap; }

/* ---------- 下層ページ ---------- */
.sub .head { color: var(--koge); }
.sub .head__menu { border-color: rgba(59,42,32,.5); color: var(--koge); }
.sub.nav-open .head__menu { color: var(--paper); border-color: rgba(250,246,238,.6); }
.phead, .sec, .sub .days {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.phead { background-color: var(--kinari); position: relative; padding: clamp(120px, 14vw, 170px) 0 clamp(48px, 6vw, 80px); }
.phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; border-top: 2px dashed rgba(176,122,53,.35); }
.phead__in { display: grid; justify-items: center; text-align: center; gap: clamp(18px, 2.4vw, 28px); }
.phead__h1 {
  display: inline-flex; align-items: flex-end; gap: 10px;
  font-family: var(--hand); font-weight: 600; font-size: clamp(32px, 1.4rem + 2.6vw, 52px);
  letter-spacing: .1em; line-height: 1.3;
  animation: up .9s ease-out .1s backwards;
}
.phead__sprig { width: 20px; height: 60px; transform-origin: 50% 100%; animation: sway 4.8s ease-in-out infinite alternate; flex: none; }
.phead__lead { display: grid; gap: 2px; font-size: clamp(15px, .9rem + .3vw, 18px); animation: up .9s ease-out .35s backwards; }
.phead__ph { position: relative; width: 100%; margin-top: 10px; animation: up 1s ease-out .4s backwards; }
.phead__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
@media (min-width: 768px) { .phead__ph img { aspect-ratio: 21 / 9; } }

.sec { padding: clamp(64px, 8vw, 110px) 0; }
.sub .days::before { display: none; }
.sec--paper { background-color: var(--paper); }
.sec--white { background-color: #FFFCF6; }
.sec--kinari { background-color: var(--kinari); }
.narrow { max-width: 760px; margin-inline: auto; }
.wrap.narrow { width: min(100% - 40px, 760px); }
.center { text-align: center; }
.note-s { margin-top: 16px; font-size: 13.5px; color: var(--koge-soft); text-align: center; }
.lead-block { display: grid; gap: 4px; text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.end-line { margin-top: clamp(36px, 5vw, 52px); padding-top: 26px; border-top: 2px dashed rgba(176,122,53,.35); text-align: center; }
.end-line .more { margin-top: 0; white-space: nowrap; }

/* パンのご紹介 */
.bake { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 44px); }
.bake__clock { width: clamp(64px, 12vw, 110px); height: auto; aspect-ratio: 1; color: var(--komugi-deep); flex: none; filter: url(#mk-rough); }
.bake__table { border-collapse: collapse; font-size: 15px; width: min(100%, 380px); }
@media (max-width: 559px) { .bake { flex-direction: column; gap: 14px; } .bake__clock { width: 60px; } }
.bake__table th { font-weight: 500; font-size: 13px; color: var(--koge-soft); text-align: left; padding: 0 0 8px; border-bottom: 2px solid var(--koge); }
.bake__table td { padding: 12px 0; border-bottom: 1px dotted #BFAE92; }
.bake__table td:last-child, .bake__table th:last-child { text-align: right; padding-left: 28px; font-variant-numeric: tabular-nums; }
.bake__table td:last-child { color: var(--komugi-deep); font-weight: 500; }
.item { display: grid; gap: 20px; align-items: center; }
.item + .item { margin-top: clamp(40px, 6vw, 72px); }
.item__ph { overflow: hidden; border-radius: 3px; box-shadow: 0 14px 28px -22px rgba(59,42,32,.6); }
.item__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .item:hover .item__ph img { transform: scale(1.04) rotate(-1deg); } }
.item__tx h3, .small-pan h3 { font-family: var(--hand); font-weight: 600; font-size: clamp(21px, 1rem + .7vw, 26px); letter-spacing: .1em; line-height: 1.4; }
.item__yen { margin: 6px 0 12px; color: var(--komugi-deep); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
@media (min-width: 768px) {
  .item { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); }
  .item--r { grid-template-columns: 1fr 1.1fr; }
  .item--r .item__ph { order: 2; }
}
.small-pan { display: grid; gap: 36px 24px; }
@media (min-width: 640px) { .small-pan { grid-template-columns: repeat(3, 1fr); } }
.small-pan figure { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; box-shadow: 0 12px 24px -20px rgba(59,42,32,.6); }
.small-pan img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.small-pan h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 20px; }
.small-pan .yen { font-family: var(--body); font-size: 15px; color: var(--komugi-deep); letter-spacing: .04em; font-weight: 400; }
.small-pan p { margin-top: 6px; font-size: 14.5px; }
@media (hover: hover) { .small-pan li:hover img { transform: scale(1.05) rotate(-1.2deg); } }
.season { margin-top: 26px; display: grid; gap: 14px; }
.season li {
  display: grid; grid-template-columns: 8em 1fr; gap: 4px 18px; align-items: center;
  background: var(--paper); border-radius: 4px; padding: 18px 22px 18px 54px; position: relative;
  box-shadow: 0 10px 24px -20px rgba(59,42,32,.5);
}
.season li::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; border: 1.5px solid var(--komugi-deep);
  background: radial-gradient(circle, var(--komugi) 0 3px, transparent 3.5px);
}
.season b { font-family: var(--hand); font-weight: 600; font-size: 18px; letter-spacing: .08em; }
@media (max-width: 479px) { .season li { grid-template-columns: 1fr; } }

/* こだわり */
.split { display: grid; gap: 36px; align-items: center; }
.split__tx { display: grid; gap: 6px; }
.split__tx .h2 { margin-inline: 0; text-align: left; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
@media (max-width: 899px) { .split__tx .h2 { margin-inline: auto; } }
.yeast { display: grid; gap: 24px; align-items: center; justify-items: center; }
.yeast__jar { width: 92px; height: auto; aspect-ratio: 80 / 110; color: var(--komugi-deep); overflow: visible; }
.yeast__tx { display: grid; gap: 8px; }
@media (min-width: 640px) { .yeast { grid-template-columns: 120px 1fr; justify-items: start; } .yeast__jar { width: 110px; } }
.wide-ph { margin-top: clamp(40px, 6vw, 64px); }
.wide-ph img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 767px) { .wide-ph img { aspect-ratio: 4 / 3; } }

/* お知らせ一覧 */
.news__list--all li { padding: 20px 2px; }

/* 店舗情報 */
.route-cols { display: grid; gap: 28px; }
.route-cols__tx { display: grid; gap: 8px; align-content: center; }
@media (min-width: 900px) { .route-cols { grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } }

/* 取り置き */
.rules { display: grid; gap: 12px; max-width: 34em; margin-inline: auto; }
.rules li { position: relative; padding: 4px 0 4px 34px; }
.rules li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23B07A35' stroke-width='1.5'/%3E%3Cpath d='M5.8 10.4 L8.8 13.2 L14.4 6.8' fill='none' stroke='%23B07A35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact { display: grid; gap: 20px; max-width: 900px; margin-inline: auto; }
@media (min-width: 768px) { .contact { grid-template-columns: 1fr 1fr; gap: 28px; } }
.contact__card {
  position: relative; background: var(--paper); border-radius: 4px; padding: 40px 26px 28px;
  display: grid; gap: 10px; align-content: start; box-shadow: 0 12px 26px -20px rgba(59,42,32,.55);
}
.contact__card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 16px; border-top: 2px dashed var(--line); }
.contact__card h3 { font-family: var(--hand); font-weight: 600; font-size: 22px; letter-spacing: .1em; }
.contact__tel { font-size: clamp(24px, 1.2rem + 1vw, 30px); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.contact__tel a { text-decoration: none; }
.btn-line {
  justify-self: start; display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px;
  padding: 0 20px; border-radius: 999px; background: #06C755; color: #fff;
  font-size: 13px; letter-spacing: .1em; text-decoration: none; transition: transform .2s ease, opacity .2s ease;
}
.btn-line:hover { opacity: .9; transform: translateY(-1px); }
.form { display: grid; gap: 18px; margin-top: 32px; background: #FFFCF6; border-radius: 4px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 12px 26px -22px rgba(59,42,32,.55); }
.form__row { display: grid; gap: 6px; }
.form__lb { font-size: 14px; font-weight: 500; }
.req { color: var(--komugi-deep); font-size: 12.5px; margin-left: 2px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  font: inherit; color: inherit; width: 100%; padding: 12px 14px; border-radius: 3px;
  border: 1px solid #CDBB9E; background: var(--paper);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--komugi); outline-offset: 1px; }
.form__agree { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.form__agree input { width: 20px; height: 20px; accent-color: var(--komugi-deep); flex: none; }
.form__btn {
  justify-self: center; min-height: 48px; padding: 0 44px; margin-top: 6px; border: 0; border-radius: 999px;
  background: var(--koge); color: var(--paper); font: 500 15px/1 var(--body); letter-spacing: .14em; cursor: pointer;
}
.form__btn:hover { background: #5A4232; }

/* ---------- 図解 ---------- */
ol.day, ol.flow { margin: 0; padding: 0; list-style: none; }
/* B-1 一日の時間の線 */
.dg-day { margin: 0 auto; max-width: 1000px; }
.day { position: relative; display: grid; }
.day::before {
  content: ""; position: absolute; transform-origin: 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 400' preserveAspectRatio='none'%3E%3Cpath d='M6 2 C 4 80, 8 160, 6 240 S 4 340, 6 398' fill='none' stroke='%23B07A35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  left: 27px; top: 24px; bottom: 24px; width: 10px;
}
.day li { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; padding: 12px 0; align-items: center; }
.day__ic { grid-row: 1 / span 3; width: 46px; height: 46px; color: var(--koge); background: var(--kinari); border-radius: 50%; padding: 6px; box-shadow: 0 0 0 2px var(--kinari); justify-self: center; position: relative; z-index: 1; }
.day__dot { display: none; }
.day b { font-family: var(--hand); font-weight: 600; font-size: 18px; letter-spacing: .06em; line-height: 1.4; }
.day li > span:not(.day__dot) { font-size: 14.5px; line-height: 1.6; }
.day .is-key .day__ic { color: var(--paper); background: var(--komugi-deep); box-shadow: 0 0 0 2px var(--kinari), 0 0 0 4px var(--komugi-deep); }
.day .is-night .day__ic { color: #FAF6EE; background: #4A3A30; }
.day__keep {
  font-style: normal; font-size: 12.5px; color: var(--komugi-deep); margin-top: 6px; justify-self: start;
  border: 1.5px solid var(--komugi-deep); border-radius: 999px; padding: 1px 12px; transform: rotate(-2deg); white-space: nowrap;
}
@media (min-width: 900px) {
  .day { grid-template-columns: repeat(6, 1fr); gap: 0 10px; padding-top: 4px; }
  .day::before {
    left: 6%; right: 6%; top: 74px; bottom: auto; width: auto; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 80 3, 160 9, 240 6 S 340 4, 398 6' fill='none' stroke='%23B07A35' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .day li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0; align-content: start; }
  .day__ic { grid-row: auto; width: 60px; height: 60px; padding: 9px; }
  .day__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--komugi-deep); margin: 6px 0 14px; position: relative; z-index: 1; }
  .day .is-key .day__dot { background: var(--komugi-deep); }
  .day__keep { justify-self: center; margin-top: 12px; white-space: normal; border-radius: 14px; padding: 3px 10px; line-height: 1.5; max-width: 9.5em; }
}

/* B-2 小麦の産地 */
.dg-wheat { display: grid; gap: 22px; align-items: center; }
.wheat__map { width: min(100%, 380px); height: auto; aspect-ratio: 340 / 330; justify-self: center; overflow: visible; }
.wheat__key { display: grid; gap: 14px; }
.wheat__key li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: #FFFCF6; border-radius: 4px; padding: 14px 16px; box-shadow: 0 10px 22px -20px rgba(59,42,32,.5); }
.wheat__key b { font-weight: 500; }
.wheat__mk { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.wheat__mk--1 { border: 2.4px solid var(--komugi-deep); }
.wheat__mk--2 { border: 2.2px dashed var(--koge-soft); }
.wheat__arw { width: 40px; height: auto; aspect-ratio: 90 / 56; color: var(--komugi-deep); transform: rotate(-8deg); flex: none; }
.wheat__to { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hand); font-weight: 600; font-size: 17px; }
.wheat__to svg { width: 40px; height: 28px; color: var(--komugi-deep); flex: none; }

/* B-4 取り置きの流れ */
.flow { display: grid; gap: 6px; justify-items: center; max-width: 980px; margin-inline: auto; }
.flow > li:not(.flow__arw) {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 10px;
  width: min(100%, 320px); background: #FFFCF6; border-radius: 6px; padding: 26px 20px 24px;
  box-shadow: 0 12px 26px -20px rgba(59,42,32,.55);
}
.flow__ic { width: 96px; height: 96px; color: var(--koge); }
.flow__no {
  position: absolute; top: -14px; left: 50%; margin-left: -18px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--komugi-deep); color: var(--paper);
  font-family: var(--hand); font-weight: 600; font-size: 18px; transform: rotate(-8deg);
}
.flow p { font-size: 15px; line-height: 1.7; }
.flow__arw svg { width: 46px; height: auto; aspect-ratio: 90 / 56; color: var(--komugi-deep); transform: rotate(80deg); display: block; margin: 8px 0; }
@media (min-width: 900px) {
  .flow { grid-template-columns: 1fr 60px 1fr 60px 1fr; align-items: stretch; gap: 0 6px; }
  .flow > li:not(.flow__arw) { width: 100%; }
  .flow__arw { align-self: center; }
  .flow__arw svg { transform: rotate(-6deg); width: 56px; margin: 0; }
}
/* ==PAGES==END */
/* ---------- 動き（transform と opacity だけ） ---------- */
/* 最初の画面：写真がゆっくり寄る */
.hero__ph { animation: kb 20s ease-out both; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }

/* 湯気：下から立って消える。形はあらかじめぼかしてあり、ぼかしは動かさない */
.hero__steam .st { transform-box: fill-box; transform-origin: 50% 100%; animation: steam 7s ease-in-out infinite backwards; }
.hero__steam .st2 { animation-delay: 2.3s; }
.hero__steam .st3 { animation-delay: 4.6s; }
@keyframes steam {
  0%   { opacity: 0; transform: translate(0, 24px) scale(.9, .8); }
  35%  { opacity: 1; }
  70%  { opacity: .55; }
  100% { opacity: 0; transform: translate(10px, -46px) scale(1.15, 1.1); }
}

/* 印と店名と案内が順に出る（初期状態は見える。動くときだけ前から隠す） */
.hero__stamp { animation: stampIn 1.1s cubic-bezier(.2,.9,.3,1.2) .2s backwards; }
@keyframes stampIn { from { opacity: 0; transform: scale(1.35) rotate(-24deg); } to { opacity: .92; transform: none; } }
.hero__name .ch { display: inline-block; animation: chIn .9s ease-out backwards; animation-delay: calc(.55s + var(--i) * .14s); }
@keyframes chIn { from { opacity: 0; transform: translateY(.18em) rotate(-4deg); } to { opacity: 1; transform: none; } }
.hero__lead { animation: up .9s ease-out 1.45s backwards; }
.hero__time { animation: up .9s ease-out 1.7s backwards; }
@keyframes up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__down { animation: fadeIn .9s ease-out 2s backwards, bob 2.4s ease-in-out 3s infinite; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* 麦の穂がそよぐ */
.news__sprig { animation: sway 4.8s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } }
.h3__sprig { animation: sway2 4.2s ease-in-out infinite alternate; }
.kd__tx h3:nth-of-type(2) .h3__sprig { animation-delay: -1.6s; }
@keyframes sway2 { from { transform: rotate(-13deg); } to { transform: rotate(-6deg); } }

/* 写真：ふわっと出て、ホバーで少し寄って傾く */
.js .bread__grid figure, .js .kd__ph, .js .shop__ph {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .bread__grid li:nth-child(3n+2) figure { transition-delay: .1s; }
.js .bread__grid li:nth-child(3n) figure { transition-delay: .2s; }
.js .bread__grid figure.is-in, .js .kd__ph.is-in, .js .shop__ph.is-in { opacity: 1; transform: none; }
.bread__grid img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) {
  .bread__grid li:hover img { transform: scale(1.05) rotate(-1.2deg); }
  .bread__grid li:nth-child(even):hover img { transform: scale(1.05) rotate(1.2deg); }
}

/* こだわり：写真が出たあとにスタンプを押す */
.js .kd__ph.is-in .kd__stamp { animation: press .7s cubic-bezier(.2,.9,.3,1.3) .5s backwards; }
@keyframes press { from { opacity: 0; transform: scale(1.4) rotate(-30deg); } to { opacity: 1; transform: rotate(-12deg); } }

/* カレンダー：営業日の丸が順にポンと出る */
.js .cal-card td span { transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; transition-delay: calc(var(--i) * 22ms + .15s); }
.js .cal-card:not(.is-in) td span { opacity: 0; transform: scale(.2); }

/* 見出しの下線が左から引かれる */
.js .h2__line { transition: transform 1s cubic-bezier(.6,.1,.2,1) .2s; }
.js .h2--line:not(.is-in) .h2__line { transform: scaleX(0); }

/* 地図：駅から店まで点が順に伸び、最後にピンが落ちる */
.js .map .route circle { transition: opacity .2s ease; transition-delay: calc(var(--i) * 70ms + .3s); }
.js .map:not(.is-in) .route circle { opacity: 0; }
.map .pin > path, .map .pin > circle { transform-box: fill-box; }
.js .map .pin { transition: opacity .4s ease 1.9s; }
.js .map:not(.is-in) .pin { opacity: 0; }

/* ==MOTION2== */
/* 図解：画面に入ると順に出る */
.js .dg .day::before { transition: transform 1.4s cubic-bezier(.6,.1,.2,1) .1s; }
.js .dg:not(.is-in) .day::before { transform: scaleY(0); }
@media (min-width: 900px) { .js .dg:not(.is-in) .day::before { transform: scaleX(0); } }
.js .dg .day li, .js .dg .flow > li, .js .dg .wheat__key li { transition: opacity .6s ease, transform .6s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--i) * .22s + .25s); }
.js .dg:not(.is-in) .day li, .js .dg:not(.is-in) .flow > li, .js .dg:not(.is-in) .wheat__key li { opacity: 0; transform: translateY(14px) scale(.96); }
.js .dg .wheat__pin { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--i) * .3s + .3s); }
.js .dg:not(.is-in) .wheat__pin { opacity: 0; transform: scale(.3); }
.js .dg .wheat__land { transition: opacity .8s ease; }
.js .dg:not(.is-in) .wheat__land { opacity: 0; }
.dg.is-in .wheat__pin circle { transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-in-out 1.4s infinite; }
@keyframes ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.dg-flow.is-in .flow__ic { animation: nod 3.2s ease-in-out 1.6s infinite; transform-origin: 50% 80%; }
.dg-flow.is-in li:nth-child(3) .flow__ic { animation-delay: 2.1s; }
.dg-flow.is-in li:nth-child(5) .flow__ic { animation-delay: 2.6s; }
@keyframes nod { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-5deg); } 88% { transform: rotate(4deg); } }
.yeast .bub { transform-box: fill-box; transform-origin: center; animation: bub 3.4s ease-in infinite; animation-delay: calc(var(--i) * .8s); }
@keyframes bub { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.js .map .map__turn, .js .map .map__p { transition: opacity .5s ease; transition-delay: 1.4s; }
.js .map:not(.is-in) .map__turn, .js .map:not(.is-in) .map__p { opacity: 0; }
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--i, 0) * .12s); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ==MOTION2==END */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .bread__grid figure, .js .kd__ph, .js .shop__ph { opacity: 1; transform: none; }
  .js .cal-card td span, .js .map .route circle, .js .map .pin { opacity: 1 !important; transform: none !important; }
  .js .h2__line { transform: none !important; }
  .js .dg .day::before, .js .dg .day li, .js .dg .flow > li, .js .dg .wheat__key li, .js .dg .wheat__pin, .js .dg .wheat__land,
  .js .map .map__turn, .js .map .map__p, .yeast .bub, .js .rv { opacity: 1 !important; transform: none !important; }
}