@charset "UTF-8";
/* ==========================================================================
   麻辣湯 五更 — style.css
   設計仕様：五更 レイアウト設計仕様（京鼎樓の余白システムを適用）
   基準ビューポート：393px（iPhone 14/15 Pro）
   ========================================================================== */

/* ── トークン ───────────────────────────────────────────────────────── */
:root{
  /* 横の余白：これ1本を基準にする */
  --side-space:24px;        /* FVの重ね画像 345px = 393 - 24*2 から逆算 */
  --card-inset:8px;         /* 赤背景の中の白カードの左右 */
  --card-pad:46px;          /* カード内テキストの左右（本文幅285pxの根拠） */
  --card-pad-wide:20px;     /* 画像グリッドだけ狭くする */
  --card-radius:30px;

  /* 縦のリズム */
  --sec-pad:56px;           /* クリーム背景セクションの上下 */
  --sec-pad-red:56px;       /* 赤背景：見出しまで。背景色に関係なく56pxで統一 */
  --head-gap:32px;          /* 見出し → 本体 */
  --block-gap:56px;         /* 同じ形の塊どうし（Point間） */
  --stack-gap:14px;         /* 小見出し → 本文 */
  --text-gap:24px;          /* 段落間・グリッドの行間 */

  /* 色：赤は1本に統一（旧 #D21111 / #A24242 は廃止） */
  --c-red:#a70213;
  --c-cream:#f1eae0;
  --c-card:#f7f3ee;
  --c-white:#ffffff;
  --c-text:#26221f;
  --c-muted:#6d645b;
  --c-line:#cdc4b8;

  /* 書体：見出しは Ten Mincho（Adobe Fonts kit pdp8xge）。落ちたら順に代替 */
  --f-mincho:"ten-mincho","Shippori Mincho","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-gothic:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --header-h:68px;
  --z-header:9000;
  --z-drawer:8000;
}

/* ── リセット ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  line-break:strict; -webkit-text-size-adjust:100%;
  /* 固定ヘッダーのぶんだけアンカー着地点を下げる。
     これが無いとメニューから飛んだ先の見出しがヘッダーに隠れる */
  scroll-padding-top:var(--header-h);
  scroll-behavior:smooth;
}
body{
  margin:0;
  padding-top:var(--header-h);
  font-family:var(--f-gothic);
  font-size:14px;
  line-height:1.8;
  letter-spacing:.05em;
  color:var(--c-text);
  background:var(--c-cream);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}
/* height:auto が無いと、max-width で幅が縮んだとき height 属性の値が残って
   画像が縦に引き伸ばされる。個別に高さを指定している要素はクラス側で上書きする */
img,svg,iframe{display:block; max-width:100%; height:auto}
h1,h2,h3,p,dl,dd,figure,figcaption{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit}
button{
  /* ネイティブ描画を切る。入れないと環境によって背景色が無視される */
  appearance:none; -webkit-appearance:none;
  margin:0; border:0; background:none;
  font:inherit; color:inherit;
}
:focus-visible{outline:2px solid var(--c-red); outline-offset:3px}
.u-visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ── ヘッダー ───────────────────────────────────────────────────────── */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-header);
  height:var(--header-h);
  padding-inline:var(--side-space);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--c-white);
}
.header__logo{display:block; line-height:0}
.header__logo img{width:85px; height:32px}

/* 元サイズ（円61 / バー幅37 / 太さ1 / gap8）を線の太さまで含めて 3/4 にした値 */
.burger{
  width:45.75px; height:45.75px; padding:0; border:0; border-radius:50%;
  background:var(--c-red); cursor:pointer;
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.burger__bars{display:flex; flex-direction:column; gap:6px; width:27.75px}
.burger__bar{
  display:block; height:.75px; background:var(--c-white);
  transition:transform .3s cubic-bezier(.33,1,.68,1), opacity .2s linear;
}
/* バー中心間 = 太さ.75 + gap6 = 6.75px */
.burger.is-open .burger__bar:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
.burger.is-open .burger__bar:nth-child(2){opacity:0}
.burger.is-open .burger__bar:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

/* ── ドロワー ───────────────────────────────────────────────────────── */
.drawer{
  position:fixed; top:var(--header-h); left:0; right:0;
  z-index:var(--z-drawer);
  padding:28px var(--side-space) 36px;
  background:var(--c-red);
  color:var(--c-white);
}
.drawer__list{display:flex; flex-direction:column; gap:20px}
.drawer__list a{
  display:inline-block; text-decoration:none;
  font-size:14px; letter-spacing:.12em;
}

/* ── セクションの共通枠：section > .container > .inner ──────────────── */
.container{padding-inline:var(--side-space)}
.inner{display:flex; flex-direction:column; gap:var(--head-gap)}

.sec.-bg_cream{background:var(--c-cream); padding-block:var(--sec-pad)}
.sec.-bg_red{background:var(--c-red); padding-block:var(--sec-pad-red) var(--text-gap)}
/* 注文方法→こだわりは赤背景が連続する。#feature 側の padding-top(56px) だけで
   継ぎ目を作り、2セクションの間をちょうど56pxにする */
#order{padding-bottom:0}

/* 見出し。.sec の直下にあるとき（赤背景セクション）だけ自前で左右余白を持つ */
.sec__head{
  font-family:var(--f-mincho);
  font-weight:400; font-size:32px; line-height:1.4;
  letter-spacing:.05em;
  font-feature-settings:"halt" on;
  color:var(--c-red);
  text-align:center;
}
.sec > .sec__head{padding-inline:var(--side-space)}
.sec__head.-on_red{color:var(--c-white); margin-bottom:var(--head-gap)}

/* ── FV ─────────────────────────────────────────────────────────────── */
.fv{position:relative; aspect-ratio:393/492; overflow:hidden; background:var(--c-cream)}
/* 4枚を重ねて置き、.is-active だけ見せてクロスフェードする */
.fv__photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
/* 1枚目はHTML側で is-active を持っているので、JSが動かなくても表示される */
.fv__photo.is-active{opacity:1}
.fv__overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(100% - var(--side-space) * 2);
  height:auto; aspect-ratio:1;
  object-fit:cover;
}

/* ── おすすめ・フェア（中華風の装飾テクスチャを背景に敷く）─────────────
   飾り枠つきの正方形テクスチャなので cover で切らず、幅100%・高さautoで
   中央に置いて枠を保つ。上下に出るクリームは意図した余白。 */
.sec.-bg_fair{
  padding-block:var(--sec-pad);
  background:var(--c-cream) url("../img/fair-bg.webp") center top / 100% auto no-repeat;
}

/* ── カルーセル（全幅ブリード：親のpaddingを打ち消して内側で戻す）───── */
.carousel{margin-inline:calc(var(--side-space) * -1)}
.carousel__track{
  display:flex; gap:var(--text-gap);
  padding-inline:var(--side-space);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 60%; scroll-snap-align:start}
.carousel__slide img{width:100%; height:auto}
/* クーポンが1枚だけのときは横スクロールが成立しないので全幅に広げる */
.carousel__slide:only-child{flex-basis:100%}

.carousel__dots{display:flex; justify-content:center; gap:10px; margin-top:24px}
.carousel__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-line); transition:background .2s linear;
}
.carousel__dot.is-active{background:var(--c-text)}

/* ── メニュー（A4のメニュー表を全幅で置く）──────────────────────────── */
/* メニュー画像の上部に余白が入っているぶん、見出しに食い込ませて詰める */
.menu{margin-top:-12px}
.menu img{width:100%; height:auto}
/* 価格の注記。画像に重ねず、下に1行だけ置く */
.menu__cap{
  margin-top:14px; padding-inline:var(--side-space);
  font-size:12px; line-height:1.6; color:var(--c-muted);
  text-align:right;
}

/* ── 白カード ───────────────────────────────────────────────────────── */
.card{
  margin-inline:var(--card-inset);
  padding:30px var(--card-pad) 40px;
  border-radius:var(--card-radius);
  background:var(--c-card);
  overflow:hidden;
}

/* 料金システム（Figma 47:78）。白カードと同じ幅・角丸・地色で、下にもう1枚。
   白カードとの間隔はFigma実測18.6pxを20pxに丸めた。 */
.card.-pricing{
  margin-top:20px;
  padding:12px 20px 17px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}
.pricing__title{
  font-family:var(--f-mincho);
  font-weight:400; font-size:18px; line-height:1.6; letter-spacing:.05em;
  color:var(--c-red);
}
.pricing__line{
  font-family:var(--f-mincho);
  font-weight:400; font-size:14px; line-height:1.8; letter-spacing:.05em;
}

/* ── 注文方法：2列グリッド（カード内だけ余白を狭める）───────────────── */
.step_grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--text-gap) var(--card-pad-wide);
  /* 46px の padding を 20px 相当まで押し広げる */
  margin-inline:calc(var(--card-pad-wide) - var(--card-pad));
}
.step{display:flex; flex-direction:column; gap:10px}
.step img{width:100%; height:auto; aspect-ratio:1; object-fit:cover}
/* Figma指定どおり明朝。font-feature-settings は body の palt を継承させる
   （halt は約物向けなので、本文には効かせない） */
.step__text{
  font-family:var(--f-mincho);
  font-size:14px; line-height:1.8; letter-spacing:.05em;
}

/* ── こだわり：Point の縦リズム ──────────────────────────────────────── */
.point_list{display:flex; flex-direction:column; gap:var(--block-gap)}

/* 写真だけカード幅いっぱいに広げる */
.point__photo{margin-inline:calc(var(--card-pad) * -1)}
.point__photo img{width:100%; height:auto; aspect-ratio:377/250; object-fit:cover}

.point__badge{width:64px; height:auto; margin-top:30px}
.point__title{
  margin-top:10px;
  font-family:var(--f-mincho);
  font-weight:400; font-size:18px; line-height:1.6;
  letter-spacing:.05em;
  font-feature-settings:"halt" on;
}
.point__text{margin-top:var(--stack-gap); font-size:14px; line-height:1.8}

/* ── アクセス ───────────────────────────────────────────────────────── */
.map iframe{width:100%; aspect-ratio:4/3; border:0}
/* 店舗情報は Figma 指定どおり Zen Old Mincho 14px / 行間24px、ラベルは Bold */
.store_info{
  display:grid; grid-template-columns:auto 1fr; gap:12px 18px;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:14px; line-height:24px;
}
.store_info dt{font-weight:700; white-space:nowrap; color:var(--c-red)}
.store_info dd{font-weight:400}
.store_info a{text-decoration-thickness:1px; text-underline-offset:.25em}

/* ── フッター ───────────────────────────────────────────────────────── */
.footer{background:var(--c-white); padding-block:14px 18px}
.footer__row{display:flex; align-items:center; gap:18px}
.footer__label{font-size:14px; font-weight:500; letter-spacing:.1em}
.footer__sns{display:flex; gap:10px}
.footer__sns a{display:grid; place-items:center; width:40px; height:40px; color:var(--c-text)}
.footer__copy{margin-top:8px; font-size:12px; line-height:1.6; color:var(--c-muted)}

/* ── PC：モバイル専用デザインなので中央に置くだけ ────────────────────── */
@media (min-width:768px){
  body{background:#e3d9ca}
  .header{left:50%; right:auto; width:430px; margin-left:-215px}
  main,.footer{width:430px; margin-inline:auto}
  .footer{padding-bottom:32px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  .carousel__track{scroll-behavior:auto}
}