/* ============================================================
   麦の音 ベーカリー デモ — Crumbs（Shopify テーマ）参照リデザイン
   olive #77723E / cream #F9F6EC / ink #202020 / Figtree + Noto Sans JP
   ============================================================ */

:root {
  --cream:  #F9F6EC;
  --cream2: #EFE9D8;
  --olive:  #77723E;
  --olive-d:#5f5b31;
  --ink:    #202020;
  --ink-70: rgba(32,32,32,.70);
  --ink-50: rgba(32,32,32,.50);
  --paper:  #FFFFFF;
  --line:   rgba(32,32,32,.14);
  --sans: "Figtree", "Noto Sans JP", -apple-system, sans-serif;
  --maxw: 1200px;
  --pad: 20px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1,h2,h3 { margin: 0; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--cream); padding:10px 16px; }
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline:2px solid var(--olive); outline-offset:3px; }

.container { max-width: var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); width:100%; }

/* ---------- ボタン ---------- */
.btn {
  display:inline-block; font-family:inherit; font-size:15px; font-weight:600;
  text-decoration:none; padding:14px 24px; border-radius:5px; cursor:pointer;
  border:1px solid transparent; transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn--dark { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--dark:hover { background:#000; box-shadow:0 10px 24px rgba(32,32,32,.22); }
.btn--outline { background:var(--paper); color:var(--ink); border-color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:var(--cream); }
.btn--pill { background:var(--cream); color:var(--ink); border-radius:999px; padding:15px 30px; }
.btn--pill:hover { background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn--sm { padding:9px 18px; font-size:13px; }

/* ---------- 共通見出し ---------- */
.eyebrow {
  display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--olive);
}
.section__h {
  font-size: clamp(30px, 5.2vw, 50px); line-height:1.12; font-weight:700;
  color:var(--olive); letter-spacing:-.01em; margin:12px 0 0;
}
.section { padding:64px 0; }
.section--cream2 { background:var(--cream2); }
.section__head { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.section__lead { color:var(--ink-70); max-width:42ch; line-height:1.8; font-size:15px; margin:0; }

/* ---------- マーキー ---------- */
.marquee { overflow:hidden; white-space:nowrap; }
.marquee__track { display:inline-flex; align-items:center; gap:30px; padding:11px 15px; animation:marquee 30s linear infinite; will-change:transform; }
.marquee__track--rev { animation-direction:reverse; }
.marquee .spark { display:inline-block; opacity:.75; font-size:.8em; }
.marquee--top { background:var(--ink); color:var(--cream); }
.marquee--top .marquee__track { font-size:12.5px; letter-spacing:.05em; gap:20px; padding:9px 10px; font-weight:500; }
.marquee--band { background:var(--cream); color:var(--olive); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.marquee--band .marquee__track { font-size:clamp(20px,3.2vw,38px); font-weight:600; gap:34px; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- ヘッダー ---------- */
.hd { position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; }
.hd--scrolled { box-shadow:0 4px 18px rgba(32,32,32,.07); }
.hd__inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:14px; padding-bottom:14px; }
.hd__brand { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1.1; }
.hd__name { font-size:24px; font-weight:700; color:var(--olive); letter-spacing:.01em; }
.hd__status { font-size:11px; color:var(--ink-50); display:flex; align-items:center; gap:6px; margin-top:3px; letter-spacing:.02em; }
.hd__dot { width:7px; height:7px; border-radius:50%; background:#4a8a52; flex:0 0 auto; }
.hd__nav { display:none; gap:28px; font-size:14px; font-weight:500; }
.hd__nav a { text-decoration:none; color:var(--ink); transition:color .2s ease; }
.hd__nav a:hover { color:var(--olive); }
.hd__actions { display:flex; align-items:center; gap:10px; }
.hd__icon { width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .2s ease; }
.hd__icon:hover { transform:translateY(-2px); }
.hd__pill { display:inline-block; background:var(--ink); color:var(--cream); text-decoration:none; font-size:13px; font-weight:600; padding:10px 16px; border-radius:5px; white-space:nowrap; }
.hd__pill:hover { background:#000; }

/* ---------- Hero（フルブリード・非対称スプリット） ---------- */
.hero { width:100%; overflow:hidden; background:var(--cream); }
.hero__grid { display:grid; grid-template-columns:1fr; }
.hero__copy { padding:34px var(--pad) 6px; }
.eyebrow__line { display:inline-block; width:26px; height:1px; background:var(--olive); vertical-align:middle; margin-right:10px; }
.hero__title { font-size:clamp(38px,11vw,64px); line-height:1.04; font-weight:700; color:var(--olive); letter-spacing:-.02em; margin:16px 0 0; }
.hero__lead { margin:20px 0 0; font-size:16px; color:var(--ink-70); max-width:40ch; line-height:1.85; }
.hero__cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.hero__media img { width:100%; height:60vw; max-height:430px; object-fit:cover; background:#DCC59E; display:block; }

/* ---------- About（アコーディオン） ---------- */
.about__grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.about__media img { width:100%; height:64vw; max-height:480px; object-fit:cover; border-radius:var(--radius); }
.acc { margin-top:24px; border-top:1px solid var(--line); }
.acc__item { border-bottom:1px solid var(--line); }
.acc__head { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-family:inherit; font-size:18px; font-weight:600; color:var(--ink); text-align:left; }
.acc__arrow { width:38px; height:38px; border-radius:50%; border:1px solid var(--ink); flex:0 0 auto; position:relative; transition:transform .3s ease, background .3s ease, color .3s ease; }
.acc__arrow::before { content:""; position:absolute; left:50%; top:46%; width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translate(-50%,-50%) rotate(45deg); }
.acc__head[aria-expanded="true"] .acc__arrow { transform:rotate(180deg); background:var(--ink); color:var(--cream); }
.acc__panel { overflow:hidden; max-height:0; transition:max-height .35s ease; }
.acc__head[aria-expanded="true"] + .acc__panel { max-height:240px; }
.acc__panel p { margin:0 0 20px; color:var(--ink-70); line-height:1.85; max-width:46ch; }

/* ---------- 今月のおすすめ（注目品） ---------- */
.feat__grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.feat__media img { width:100%; height:62vw; max-height:460px; object-fit:cover; border-radius:var(--radius); }
.feat__name { font-size:clamp(32px,5.4vw,52px); font-weight:700; color:var(--olive); margin:12px 0 0; line-height:1.08; }
.feat__price { margin-top:16px; font-size:24px; font-weight:600; color:var(--ink); }
.feat__price span { font-size:13px; color:var(--ink-50); font-weight:400; }
.feat__desc { margin-top:18px; color:var(--ink-70); line-height:1.85; max-width:46ch; }
.feat__cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Signature グリッド ---------- */
.sig__grid { display:grid; grid-template-columns:1fr; gap:24px; }
.sig__img { position:relative; border-radius:12px; overflow:hidden; }
.sig__img img { width:100%; height:240px; object-fit:cover; transition:transform .5s ease; }
.sig__card:hover .sig__img img { transform:scale(1.04); }
.sig__badge { position:absolute; top:12px; left:12px; background:var(--olive); color:var(--cream); font-size:11px; padding:4px 11px; border-radius:999px; letter-spacing:.06em; }
.sig__row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:16px; }
.sig__row h3 { font-size:18px; font-weight:600; color:var(--ink); }
.sig__price { font-size:17px; font-weight:600; color:var(--olive); flex:0 0 auto; }
.sig__card p { margin:8px 0 0; color:var(--ink-70); font-size:14px; line-height:1.7; }

/* ---------- Lineup ---------- */
.link-arrow { color:var(--olive); font-weight:600; font-size:15px; text-decoration:none; border-bottom:1px solid var(--olive); padding-bottom:4px; white-space:nowrap; }
.lineup__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cat { text-align:center; }
.cat__icon { width:96px; height:96px; border-radius:50%; overflow:hidden; margin:0 auto; display:block; background:#E7D6BC; box-shadow:0 6px 18px rgba(32,32,32,.08); }
.cat__icon img { width:100%; height:100%; object-fit:cover; }
.cat__no { display:block; margin-top:14px; font-size:12px; color:var(--olive); font-weight:600; letter-spacing:.1em; }
.cat h3 { font-size:16px; font-weight:600; margin:4px 0 8px; color:var(--ink); }
.cat p { font-size:12.5px; color:var(--ink-70); line-height:1.7; }

/* ---------- Voice ---------- */
.voice__grid { display:grid; grid-template-columns:1fr; gap:18px; }
.voice__card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.voice__stars { color:var(--olive); letter-spacing:3px; font-size:14px; }
.voice__card blockquote { margin:16px 0 0; font-size:16px; line-height:1.85; color:var(--ink); font-weight:500; }
.voice__card figcaption { margin-top:18px; font-size:12px; color:var(--ink-50); }
.voice__note { margin-top:18px; font-size:11px; color:var(--ink-50); }

/* ---------- Stories ---------- */
.stories__grid { display:grid; grid-template-columns:1fr; gap:28px; }
.story__img { border-radius:12px; overflow:hidden; }
.story__img img { width:100%; height:220px; object-fit:cover; transition:transform .5s ease; }
.story:hover .story__img img { transform:scale(1.03); }
.story__date { display:block; margin-top:16px; font-size:12px; color:var(--ink-50); letter-spacing:.06em; }
.story h3 { font-size:18px; font-weight:600; line-height:1.5; margin:8px 0 10px; color:var(--ink); }
.story p { font-size:14px; color:var(--ink-70); line-height:1.75; margin:0 0 18px; }

/* ---------- フルワイド画像バンド ---------- */
.band { position:relative; }
.band__img { width:100%; height:380px; object-fit:cover; }
.band::after { content:""; position:absolute; inset:0; background:rgba(32,32,32,.36); }
.band__inner { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center; padding:0 20px; }
.band__title { color:#fff; font-size:clamp(28px,5.4vw,52px); font-weight:700; line-height:1.15; }

/* ---------- Information ---------- */
.info__grid { display:grid; grid-template-columns:1fr; gap:28px; }
.info__panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.info__table { width:100%; border-collapse:collapse; font-size:14.5px; }
.info__table th, .info__table td { text-align:left; padding:14px 0; vertical-align:top; }
.info__table tr { border-bottom:1px solid var(--line); }
.info__table th { width:84px; color:var(--ink-50); font-weight:500; font-size:12.5px; }
.info__table a { color:var(--olive); }
.info__small { font-size:11px; color:var(--ink-50); }
.info__btn { margin-top:22px; width:100%; text-align:center; }
.map-ph {
  width:100%; height:300px; border:1px solid var(--line); border-radius:var(--radius);
  background-color:#E9E3D2;
  background-image:linear-gradient(rgba(119,114,62,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(119,114,62,.08) 1px,transparent 1px);
  background-size:30px 30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; color:var(--ink-50);
}
.map-ph svg { color:var(--olive); }
.map-ph__label { font-size:18px; font-weight:600; letter-spacing:.1em; color:var(--olive); }
.map-ph__note { font-size:11px; color:var(--ink-50); padding:0 16px; }
.info__access { margin:8px 0 0; font-size:12px; color:var(--ink-70); }

/* ---------- Footer ---------- */
.ft { background:var(--ink); color:var(--cream); padding:44px 0 26px; }
.ft__social { display:flex; justify-content:center; gap:18px; padding-bottom:30px; border-bottom:1px solid rgba(249,246,236,.14); }
.ft__social a { color:var(--cream); opacity:.78; text-decoration:none; transition:opacity .2s ease; }
.ft__social a:hover { opacity:1; }
.ft__cols { display:grid; grid-template-columns:1fr 1fr; gap:32px 20px; padding-top:34px; padding-bottom:34px; }
.ft__logo { font-size:30px; font-weight:700; color:var(--cream); }
.ft__addr { margin:14px 0 0; font-size:13px; opacity:.7; line-height:1.9; }
.ft__col h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin:0 0 14px; font-weight:600; }
.ft__col a, .ft__col span { display:block; font-size:14px; opacity:.85; text-decoration:none; margin-bottom:10px; }
.ft__col a:hover { opacity:1; }
.ft__bottom { display:flex; flex-direction:column; gap:10px; padding-top:24px; border-top:1px solid rgba(249,246,236,.14); font-size:12px; opacity:.6; }
.ft__demo { margin-top:14px; font-size:11px; line-height:1.85; opacity:.45; }

/* ---------- Reveal（IntersectionObserver） ---------- */
.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity:1; transform:none; }

/* ============================================================
   Tablet (>=600px)
   ============================================================ */
@media (min-width:600px) {
  .sig__grid { grid-template-columns:1fr 1fr; }
  .lineup__grid { grid-template-columns:repeat(3,1fr); }
}

/* ============================================================
   Medium (>=760px)
   ============================================================ */
@media (min-width:760px) {
  .voice__grid { grid-template-columns:repeat(3,1fr); }
  .stories__grid { grid-template-columns:repeat(3,1fr); }
  .ft__cols { grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .ft__bottom { flex-direction:row; justify-content:space-between; }
}

/* ============================================================
   Desktop (>=880px)
   ============================================================ */
@media (min-width:880px) {
  :root { --pad:40px; }
  .hd__nav { display:flex; }
  .hd__pill { display:inline-block; background:var(--ink); color:var(--cream); text-decoration:none; font-size:13px; font-weight:600; padding:10px 18px; border-radius:5px; }
  .section { padding:100px 0; }
  .section__head { flex-direction:row; justify-content:space-between; align-items:flex-end; gap:30px; }

  .hero__grid { grid-template-columns:1.12fr 0.88fr; align-items:center; min-height:80vh; }
  .hero__copy {
    padding-left: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--pad));
    padding-right: clamp(32px, 3.5vw, 64px);
    padding-top: 0; padding-bottom: 0;
  }
  .hero__title { font-size:clamp(46px, 5.4vw, 72px); line-height:1.05; }
  .hero__media { height:80vh; }
  .hero__media img { height:100%; max-height:none; }

  .about__grid { grid-template-columns:1fr 1.05fr; gap:56px; }
  .about__media img { height:520px; max-height:none; }

  .feat__grid { grid-template-columns:1fr 1fr; gap:56px; }
  .feat__media img { height:480px; max-height:none; }

  .sig__grid { grid-template-columns:repeat(3,1fr); gap:28px; }
  .lineup__grid { grid-template-columns:repeat(6,1fr); }
  .info__grid { grid-template-columns:1fr 1.3fr; gap:48px; }
  .map-ph { height:420px; }
  .band__img { height:480px; }
}

/* ============================================================
   大画面 (>=1100px)
   ============================================================ */
@media (min-width:1100px) {
  :root { --pad:48px; }
}

/* ============================================================
   モーション抑制
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .marquee__track { animation:none !important; }
  .sig__img img, .story__img img { transition:none; }
}