/* ブランドフォントは同梱の fonts_local/ を相対参照する。
   prana-1.com は Access-Control-Allow-Origin を返さず、Webフォントは cross-origin だと
   CORS 必須のため、絶対URLだと prana-1.com 以外（ローカル/共有プレビュー）で全滅する。 */
/* GenWanMin2 は使用ウェイト（400/500/600）のみ。
   ★2026-07-24：コメントは「サブセット化済み」となっていたが実体は非サブセット（各273KB／計804KB）
     だったため、実際にサブセットし直した（各約178KB／計542KB）。
     収録＝ページ使用文字＋ひらがな・カタカナ全域＋ASCII＋全角英数記号（計752字）。
     かなを全部入れてあるのは、今後のコピー修正で欠字（フォールバック明朝との混植）を出さないため。
     ※新しい漢字を含むコピーを入れた場合は再サブセットが必要
       （手順：fonts_local/_originals/ の原本を fontTools.subset にかけ直す）。
     ※このフォントはCFFのCJKで1字あたり約290Bあり、数十KBまでは落ちない。
       これ以上減らすならウェイトを1つ落とす（500か600を統合する）のが唯一の大きな手。
   非サブセットの原本は fonts_local/_originals/ に退避済み。
   3ファイルとも <head> で preload 済み（CSS内@font-faceからしか発見されず、DL開始が遅れるため）。 */
@font-face {
  font-family: "GenWanMin2 JP";
  src: url("../fonts_local/genwanmin2-R.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2 JP";
  src: url("../fonts_local/genwanmin2-M.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2 JP";
  src: url("../fonts_local/genwanmin2-SB.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --color-bg: #faf5ec;
  --color-text: #3a2c22;
  --color-accent: #a8402f;
  --color-dark: #221812;
  --color-line: #06c755;
  --color-white: #fff;
  --font-serif: "Noto Serif JP", serif;
  --font-genwanmin2: "GenWanMin2 JP", "Noto Serif JP", serif;
  --content-width: 480px;
  --header-height: 73px;
  /* SP追従CTA（.sp-cta）の占有高さ。フッター下端の余白に使う。
     ★FVの高さからは差し引かない。追従CTAは js/main.js が .hero の交差で出し入れしており、
       FVを見ている間はバーが出ないため（旧実装は常時表示前提で差し引いており、
       SE級で見出し〜円ナビ〜OPENが不要に圧縮されていた）。
     常時ナビ(.pc-nav)が出る 1200px 以上では 0 に落とす */
  --sp-cta-height: calc(72px + env(safe-area-inset-bottom, 0px));
}

* {
  box-sizing: border-box;
  font-family: var(--font-genwanmin2);
}

br.pc {
  display: none;
}

#parking,
#service,
#menu,
#live,
#commitment,
#about,
#access,
#news {
  scroll-margin-top: var(--header-height);
}

/* 実機iPhone Safariの文字だけ拡大（自動テキスト拡大）を止める。
   未指定だとFV・キャプション・8日バンドの行組みが実機でのみ崩れる（全LP共通の教訓事項） */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* イントロ中の body{overflow:hidden} でスクロールバーが消え、
     解除された瞬間（＝FVを初めて見る瞬間）にページ全体が横に飛ぶのを止める */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--color-text);
  background: #f4f0e9;
  line-height: 1.7;
}

/* ★height:auto は必須。無いとHTMLのheight属性が「プレゼンテーションヒント」として
   実高さを決めてしまい、後述の aspect-ratio が一切効かない
   （基本サービスのポスター4枚・ライブ感2枚・こだわりミニカード・駐車場マップ・
   　こだわりアイコン・コラボポスターが縦に引き伸ばされていた）。 */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  /*max-width: 1200px;*/
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  line-height: 1.4;
  margin: 0;
}

p {
  margin: 0;
}

.button {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font-weight: bold;
}

.menu-photo {
  margin-block-end: 22px;
  border-radius: 10px;
}

/* loader */
.loader {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 9999;
  place-items: center;
  background: #e1251b;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loading {
  overflow: hidden;
}

/* header */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: url("https://prana-1.com/tsumugitei/images/bg-header.png") center / cover no-repeat;
}

main {
  overflow: hidden;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #000;
  text-decoration: none;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  flex-shrink: 0;
}

.logo img {
  width: 203px;
  height: 49px;
}

/* hamburger menu */
/* 線1px×2本＋gap10px＝実高さ約14pxしかなく、SP唯一のナビ導線がタップしづらかった。
   見た目（線の太さ・幅・間隔）は変えずに当たり判定だけ44pxへ広げる */
.menu-toggle {
  background: none;
  border: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-width: 55px;
  min-height: 44px;
  padding: 0;
  cursor: pointer;
}

.menu-toggle span {
  width: 55px;
  height: 1px;
  background: #d42a1e;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 160; /* 追従CTA(150)より上・固定ヘッダー(200)より下。開いたナビの上にCTA帯が残らない */
  background: var(--color-dark);
  color: #f0e8dc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav a {
  width: 100%;
  padding-block: 10px;
  padding-inline: 0;
  color: inherit;
  text-decoration: none;
  font-size: 18px;
}

/* hero */
/* 高さは「FV画像の比率(1206/2475=縦0.487)」ではなく「1画面」に合わせる。
   aspect-ratio固定だと全SP機種で画面より縦に長くなり、OPEN・立地行（375/390px機では円3つも）が
   初回表示に入らなかった。背景はcover表示のため写真の比率は崩れない。
   ビューポート単位はページ全体で dvh に統一する（vhと混ぜない） */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width);
  height: min(calc(100dvh - var(--header-height)), 800px);
  margin-top: var(--header-height);
  margin-inline: auto;
  color: var(--color-white);
  padding: 0;
  overflow: hidden;
}

/* FV下部の暗グラデ。旧実装はPC(min-width:900px)の中だけにあり、SPでは
   白文字（円ナビ・OPEN・立地行）の下限コントラストが保証されていなかった。
   ::after は湯気レイヤーが使うため、暗グラデは .hero::before に置く */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* FVモーション（Ken Burns）
   ※動画に差し替える際は、この .hero-bg を
     <video class="hero-video" autoplay muted loop playsinline poster="…fv.jpg"> に置き換え、
     .hero-bg のアニメーションを外すだけでよい（レイヤー構造・グラデはそのまま使える）。 */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  /* FV画像が未到達の間の下地。生成り地＋白文字（コントラスト1.1:1）で読めなくなるのを防ぐ */
  background-color: var(--color-dark);
}

/* FV動画（2026-07-30 エンジニア版同期：太旨⇄まぜそばを ended 毎に交互再生）。
   静止画FV(::before)の上に重ね、canplay後に is-active でフェードイン。
   動画が再生できない環境では opacity:0 のまま＝静止画FVが生きる */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-video.is-active {
  opacity: 1;
}

/* 動画再生中はケンバーンズを止めてGPUを空ける（絵は動画の下に隠れている） */
.hero.has-video .hero-bg::before {
  animation-play-state: paused;
}

/* Ken Burns。
   ・alternate（18秒かけて寄り、18秒かけて巻き戻る）は実写のKen Burnsに無い逆再生で、
     長く滞在すると丼が後退して見えるため廃止し、1回だけ寄って止める（forwards）。
   ・will-change の常時指定は、FV相当の巨大な合成レイヤーをセッション中ずっと確保させるため廃止
     （transformアニメは実行中に自動でプロモートされる）。
   ・画面外では js/main.js が .hero へ is-paused を付けて止める。 */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: -1%; /* 拡大・移動しても縁が出ないよう少し外に広げる（寄り幅1.045に合わせて縮小） */
  /* ★フレーミング：元画像(1206x2475)は右端で丼が断ち落とされており、左側に卓の余白がある。
     水平を 38% に寄せて右の切れ端を画面外へ逃がし、丼の主要部（麺・味玉・チャーシュー）を
     画面中央に置く。垂直は 58%＝丼の中心。 */
  background: url("https://prana-1.com/tsumugitei/images/fv.jpg") 38% 58% / cover no-repeat;
  transform-origin: 38% 58%; /* 寄りの基点も丼の中心に合わせ、拡大しても丼が逃げない */
  animation: heroKenBurns 18s ease-in-out forwards;
}

.hero.is-paused .hero-bg::before,
.hero.is-paused .hero-bg::after {
  animation-play-state: paused;
}

/* ★寄り幅は控えめに。1.11倍まで寄せると主役の丼が枠外へ出て「切れた写真」に見える。
   1.00→1.045 の微ズーム＋わずかな上移動に留め、丼のフチが常に画面内に残るようにする。 */
@keyframes heroKenBurns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.045) translate3d(0, -0.8%, 0);
  }
}

/* 湯気が立つような、ごく淡い光の揺らぎ（強く出すと安っぽくなるので最小限）。
   旧実装は中心 50% 78%＝縦長SPでは丼ではなく円ナビ（駐車場36台等）の行に一致し、
   白抜き文字の帯の真下で明度が9秒周期に往復していた＝「湯気」ではなく画面の明滅に見えていた。
   ・中心を丼（背景の transform-origin 52% 62%）側へ上げ、半径を絞って被写体に紐づける
   ・明度レンジを 0.35→0.55 に圧縮
   ・周期は 13秒（Ken Burns 18秒と整数比にせず、機械的な反復に聞こえないようにする） */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 40% at 52% 55%,
    rgba(255, 236, 205, 0.16) 0%,
    rgba(255, 236, 205, 0) 65%
  );
  animation: heroSteam 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroSteam {
  from {
    opacity: 0.35;
    transform: translateY(0);
  }
  to {
    opacity: 0.55;
    transform: translateY(-2.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero-bg::after {
    animation: none;
  }
}

.hero-inner {
  position: relative; /* .hero::before（暗グラデ）より上に文字を置く */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 39px;
  padding-inline: 0;
}

.hero-headline-box {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.hero-headline {
  position: relative;
  color: var(--color-white);
  text-align: right;
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  line-height: 115%;
  font-feature-settings: "palt";
}

.hero-headline-line {
  position: absolute;
  top: 14px;
  right: 0;
  width: 393px;
}

.hero-headline-sub {
  display: flex;
  flex-direction: column;
  padding-right: 6px;
}

.hero-headline-sub p {
  text-align: right;
}

.hero-headline-sub-text {
  position: relative;
  color: var(--color-white);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 139%;
  letter-spacing: 3.84px;
  font-feature-settings: "palt";
}

.hero-headline-sub-line {
  position: absolute;
  right: -6px;
  bottom: 0;
}

.hero-headline-sub p:first-of-type .hero-headline-sub-line {
  width: 201px;
}

.hero-headline-sub p:last-of-type .hero-headline-sub-line {
  width: 329px;
}

.hero-open-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 24px; /* 旧63px。下端を締めてOPEN・立地行を初回表示に収める */
}

.hero-open {
  color: var(--color-white);
  text-align: center;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* OPEN日の下に営業時間を小さく添える（過去日の告知だけにしない。既存の文字サイズ体系を流用し装飾は足さない） */
.hero-open-now {
  display: block;
  margin-top: 4px;
  font-size: 17.894px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-note {
  color: var(--color-white);
  text-align: center;
  font-size: 17.894px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.quick-nav {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 20px; /* 旧34px。同上 */
  padding-inline: 8px;
}

.quick-nav-item {
  width: 116px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 駐車場の円だけが#parkingへのアンカー。3つとも同じ形・同じ色で、押せるものと押せないものが
   判別できなかったため、見出し語にだけ細い下線を入れてタップ可能と分かるようにする
   （円の形・色・配置は変えない＝装飾は足さない） */
a.quick-nav-item {
  text-decoration: none;
}

a.quick-nav-item .quick-nav-heading {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.quick-nav-item:nth-child(1) {
  background: url("https://prana-1.com/tsumugitei/images/bg-nav-circle-01.png") center / cover no-repeat;
}

.quick-nav-item:nth-child(2) {
  background: url("https://prana-1.com/tsumugitei/images/bg-nav-circle-02.png") center / cover no-repeat;
}

.quick-nav-item:nth-child(3) {
  background: url("https://prana-1.com/tsumugitei/images/bg-nav-circle-03.png") center / cover no-repeat;
}

.quick-nav-heading {
  color: var(--color-white);
  font-size: 16.571px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6px;
}

.quick-nav-text {
  color: var(--color-white);
  font-size: 32.7px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.quick-nav-number {
  display: flex;
  justify-content: center;
  align-items: baseline;
  color: var(--color-white);
  font-size: 40.245px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.quick-nav-mini {
  color: var(--color-white);
  font-size: 16.571px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

/* sections */
section {
  padding-block: 3rem;
}

.menu {
  padding-block: 0;
  padding-inline: 0;
}

.menu h2 {
  color: #1f1f1f;
  text-align: center;
  text-shadow: 0 3px 5.4px #f4f0e9;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  margin-block-end: 35px;
}

.menu h2 span {
  position: relative;
  display: inline-block;
}

.menu h2 span img {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 197px;
  min-width: 197px;
  max-width: 197px;
}

.menu-list {
  position: relative;
  padding: 36px 20px;
  background: #fff;
  border-radius: 20px;
}

.parking .container {
  position: relative;
}

.parking {
  position: relative;
  overflow: hidden;
  padding-block: 13px 29px;
  padding-inline: 0;
}

.parking-map {
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-bottom: 23px;
}

/* 営業時間の1行（住所ブロックの直前）。既存の住所テキストと同トーンで新規パーツは作らない */
.parking-hours {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  margin-block-end: 8px;
}

/* 住所は必ず自分の行を占有させる（旧実装は横並びでボタンに幅を奪われ、SP375pxで
   「茨城県つくば市下広」「岡1055-160」と地名の途中で改行していた＝NAP表記として出せない）。
   ボタン3つは2行目に横並びで置く。 */
.parking-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.parking-address-text {
  flex: 1 0 100%;
  color: #1f1f1f;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 200%;
  margin-block-end: 2px;
}

/* 行動ボタン3つ（経路／電話／コピー）は共通寸法。
   高さ44px・文字13pxは指の的の下限（WCAG 2.5.8 / iOS推奨）。装飾は足さず寸法だけ。 */
.parking-address-map,
.parking-address-tel,
.parking-address-copy {
  display: flex;
  height: 44px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  background: #e1251b;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* 住所テキストの中にあった電話リンクをボタン行へ出した。
   理由は2つ：(1) 17pxのテキストリンクでは指の的として成立しない
   (2) 「コピー」が住所と一緒に電話番号までコピーし、地図アプリで住所解決に失敗していた */
.parking-address-copy {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.parking-address-copy.is-copied {
  background: #2e9e4f;
}

.parking h2 {
  color: #1f1f1f;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  margin-block-end: 33px;
  /*overflow: hidden;*/
}

.parking h2 span {
  position: relative;
}

.parking h2 span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 27px);
  width: 100vw;
  height: 1px;
  background: #000;
}

.menu-item {
  margin-block-end: 41.5px;
}

.menu-desc {
  color: #1f1f1f;
  font-size: 13px;
  /*font-size: 14px;*/
  font-style: normal;
  font-weight: 500;
  line-height: 187%;
}
.menu-tags {
  display: flex;
  align-items: center;
}

/* ★2026-08-03：375px未満（iPhone SE初代の320px、Androidの360px、iPhoneの拡大表示ON）対策。
   タグが2枚並ぶ行（冷やし夏定番＋2026.8.10 より発売）は 148px×2＝296px 必要だが、
   この行の使える幅は「画面幅−80px」で、360pxでは280px・320pxでは240pxしかなく、
   右端で16〜56px切れていた（「より発売」が画面外）。狭い時だけ2行に落とす。
   ★375px以上には掛けないこと。375pxでは295pxに296pxで1pxだけ足りないが、
     これは従来から見た目に出ていない差で、ここで折り返すと最も多いiPhone幅の表示が変わる。 */
@media (max-width: 374px) {
  .menu-tags {
    flex-wrap: wrap;
  }
}

.menu-tag {
  display: flex;
  width: 148px;
  height: 28px;
  justify-content: center;
  align-items: center;
  background: #e1251b;
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  vertical-align: top;
  margin-block-end: 15.5px;
}

.menu-item h3 {
  color: #1f1f1f;
  text-shadow: 0 3px 5.4px #f4f0e9;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  letter-spacing: 1.8px;
  border-block-end: 1px solid #c8c8c8;
  padding-bottom: 4px;
  margin-block-end: 10px;
}

.menu-item-row .menu-item-body h3 {
  color: #1f1f1f;
  text-shadow: 0 3px 5.4px #f4f0e9;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  letter-spacing: 0.78px;
}

.menu-item h3 rt {
  color: #1f1f1f;
  text-shadow: 0 3px 5.4px #f4f0e9;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  letter-spacing: 0.66px;
  padding-inline: 8px;
  padding-block: 0 4px;
}

.menu-item--sub {
  display: flex;
  flex-wrap: wrap;
  gap: 25.5px;
}

.menu-item-row {
  width: calc((100% - 25.5px) / 2);
}

.photo-thumb {
  border-radius: 10px;
  margin-bottom: 10px;
}

.commitment {
  background: url("https://prana-1.com/tsumugitei/images/bg-commitment.png") top left no-repeat, #f4f0e9;
  background-size: 100%;
  margin-top: -80px;
  padding-block: 125px 25px;
}

.commitment h2 {
  color: #1f1f1f;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  margin-bottom: 50px;
}

.commitment h2 span {
  position: relative;
}

.commitment h2 span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 27px);
  width: 100vw;
  height: 1px;
  background: #000;
}

.commitment-lead {
  color: #1f1f1f;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 192%;
  margin-bottom: 42px;
}

.commitment-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-start;
}

.commitment-title {
  display: flex;
  align-items: baseline;
  color: #e1251b;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  margin-bottom: 10px;
}

.commitment-title span {
  color: #1f1f1f;
  text-align: center;
  font-size: 21px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
  margin-left: 6px;
}

.commitment-icon {
  margin-block-end: 24px;
  border-radius: 10px;
}

.commitment-text {
  color: #1f1f1f;
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

.about {
  background: #fff;
  padding-block: 0;
  padding-bottom: 27px;
}

.about .container {
  padding: 0;
}

.about-slideshow {
  position: relative;
  aspect-ratio: 402 / 300;
  overflow: hidden;
  margin-block-end: 27px;
  /* ★2026-08-03：SPでスワイプが効かない件の対策の片側（もう片側は js/main.js の判定方式）。
     pan-y ＝ 縦スクロールはブラウザに任せ、横方向のパンはブラウザに起こさせない。
     これで JS 側が touchmove を preventDefault で打ち消す必要がなくなり、
     「斜めに触れると縦スクロールが止まる／横に払っても反応しない」の両方が消える。 */
  touch-action: pan-y;
  cursor: pointer; /* クリック（タップ）でも次の1枚へ送れる */
  -webkit-user-select: none;
  user-select: none; /* ドラッグ時に画像や周囲のテキストが選択されるのを防ぐ */
}

.about-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 2026-08-03：1s→0.6s（釜井指示「スライドの速度が遅い」）。
     js/main.js の AUTO_INTERVAL（3000）とセットで調整すること。 */
  transition: opacity 0.6s ease;
}

.about-slide.is-active {
  opacity: 1;
}

/* #about のドットは「押せる」側。24×24pxの当たり判定（WCAG 2.5.8）を確保し、
   見えているドットは擬似要素で描く。非アクティブは #d9d9d9（1.3:1＝薄い点線にしか見えない）を
   #c4bdb0 に落とし、アクティブは幅を伸ばすピル型にして「何枚目か」を形で示す。
   ※押せない側（お品書きの .photo-slider-dots）は別の見た目（細いバー）にして取り違えを防ぐ */
.about-slide-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-block-end: 22px;
}

.about-slide-dots button {
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.about-slide-dots button::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #c4bdb0;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.about-text {
  color: #1f1f1f;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 200%;
  padding-block: 0;
  padding-inline: 20px;
}

/* --- 店主の想い：長文を読みやすくする段落設計 --- */
/* 冒頭の一文は引用として大きく（明朝・行間広め） */
.about-lead {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 190%;
  letter-spacing: 0.02em;
  margin-block-end: 26px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid #e1251b;
}

.about-lead-em {
  color: #e1251b;
}

/* 本文の各段落。1文字目を少し下げず、段落間の余白で「息継ぎ」をつくる */
.about-para {
  font-size: 16px;
  line-height: 205%;
  margin-block-end: 22px;
}

.about-para:last-of-type {
  margin-block-end: 26px;
}

/* 締めの一文は余韻。中央寄せ・上に細い罫 */
.about-closing {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 200%;
  /*text-align: center;*/
  padding-block-start: 24px;
  border-block-start: 1px solid #dcd5c8;
}

/* --- スクロールで一段ずつ立ち上がるモーション ---
   隠す責務は「JSが動いている時だけ」に限定する（html.js は <head> のインラインscriptが付与）。
   main.js が落ちても店主の想い（クライアント確定コピー）は最初から見えている。
   stagger の遅延は要素固有の定数（旧 nth-of-type）ではなく、
   同時に交差した分だけ js/main.js が transition-delay を付ける（単独交差＝遅延0）。 */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


.about-slide-dots button.is-active::before {
  width: 16px;
  background: #575757;
}

.about h2 {
  display: flex;
  align-items: center;
  height: 98px;
  background: #e1251b;
  color: var(--color-white);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  padding-left: 20px;
}

.about h2 span {
  position: relative;
}

.about h2 span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 26px);
  width: 100vw;
  height: 1px;
  background: var(--color-white);
}

.access {
  padding-block: 50px 25px;
}

.access h2 {
  color: #1f1f1f;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  margin-block-end: 35px;
}

.access-map {
  aspect-ratio: 16 / 9;
  margin-block-end: 1rem;
}

.access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  /* 既定は静止プレビュー扱い。指が地図上を通ってもページスクロールが奪われない。
     タップ（js/main.js が .is-active を付与）で操作可能にする */
  pointer-events: none;
}

.access-map.is-active iframe {
  pointer-events: auto;
}

/* 地図直下の行動導線（経路／Googleマップ／電話）。
   駐車場セクションの小さい赤ピル（.parking-address-map）と同じ様式を流用し、新しい装飾は足さない */
.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 24px;
}

/* 高さ44px・文字13px＝指の的の下限（WCAG 2.5.8 / iOS推奨）。旧38px/12pxは未達だった */
.access-action {
  display: flex;
  height: 44px;
  padding: 10px 14px;
  justify-content: center;
  align-items: center;
  border-radius: 9px;
  background: #e1251b;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* PCはタップ発信できないため、電話ボタンはSPのみ。PC側は下の店舗情報表の電話番号で足りる */
@media (min-width: 900px) {
  .access-action--tel {
    display: none;
  }
}

.access h2 span {
  position: relative;
}

.access h2 span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  width: 100vw;
  height: 1px;
  background: #000;
}

.access-table {
  margin: 0;
  border-block-start: 1px solid #c8c8c8;
}

.access-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  padding: 0;
  border-block-end: 1px solid #c8c8c8;
}

.access-row dt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #151515;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  background: rgba(137, 137, 137, 0.17);
  padding: 10px;
}

.access-row dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #1f1f1f;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  padding: 10px;
  margin: 0;
}

/* 10px＋#e1251b（4.12:1）は屋外のスマホで実質判読不能。濃い赤＋11pxに上げる */
.access-row dd span {
  color: #c01c13;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
}

.access-row dd a {
  color: inherit;
  text-decoration: none;
}

/* 電話番号はタップ可能と分かるようにする（新規CTAは足さず、既存の赤で最小限に） */
.access-row dd a[href^="tel:"] {
  color: #c01c13;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.line-banner {
  color: var(--color-white);
  text-align: center;
  display: grid;
  gap: 1rem;
  place-items: center;
  padding-block: 25px 40px;
  padding-inline: 22px;
}

/* 2026-07-30 エンジニア版（Figma）同期：テキスト枠 → バナー型。
   2026-08-01：バナーをクライアント支給素材（line_banner_client＝Figma書き出し639x615）に差し替え、
   地色を素材の実測緑（#567e37）に一致させて、箱とバナーが1枚に見えるようにした。
   素材は角丸なしの矩形なので、角丸はCSS側で付ける。地が同色なので影は掛けない。
   旧テキスト型のルール（heading/desc/benefit）はHTML側が不使用＝復元用に残置 */
.line-banner-box {
  width: 100%;
  background: #567e37;
  border: none;
  border-radius: 20px;
  padding-block: 22px 24px;
  padding-inline: 20px;
}

.line-banner-pop {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
}

/* エンジニア版の白ピル（赤文字）を踏襲。白地に#c8271fで5.4:1（AA） */
.line-banner-btn {
  display: flex;
  width: min(300px, 100%);
  height: 58px;
  margin: 18px auto 0;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  color: #c8271f;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 条件注記：エンジニア版には無いがクレーム起点になるため削らない。
   緑地#4a7c1e×白は約5:1でAA確保（11pxでも判読可） */
.line-banner-note {
  color: var(--color-white);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  margin-top: 12px;
}

.line-banner-heading {
  display: flex;
  justify-content: center;
  gap: 17px;
  margin-block-end: 13px;
}

.line-banner-heading img {
  width: 50px;
}

/* #06c755 は生成り地の上で 1.99:1。枠線・地色（非テキスト）はブランド色のまま残し、
   文字だけ濃い緑に落とす（生成り地で約4.3:1） */
.line-banner-heading p {
  color: #04833a;
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 152%;
}

.line-banner-desc {
  color: #1f1f1f;
  text-align: left;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 168%;
  margin-block-end: 13px;
}

.line-banner .button {
  display: flex;
  width: 245px;
  height: 56px;
  margin: auto;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 57px;
  /* 白文字 on #06c755 は 2.26:1。ページ唯一のCVボタンがAA未達だったため、
     緑地を一段濃くして 4.6:1 にし、文字も16px/600へ（形・サイズ・角丸は据置） */
  background: #04873a;
  color: var(--color-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 168%;
}

/* footer */
.site-footer {
  background: url("https://prana-1.com/tsumugitei/images/footer-bg.png") center / cover no-repeat;
  color: #f0e8dc;
}

.site-footer .container {
  width: 100%;
  padding-block: 28px 16px;
  padding-inline: 24px 16px;
}

.footer-logo {
  width: 206px;
  margin-bottom: 19.2px;
}

.footer-nav {
  display: grid;
  gap: 29px;
  margin-block-end: 24px;
}

.footer-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 180%;
}

.footer-social {
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  margin-block-end: 1.5rem;
}

.footer-social a {
  display: grid;
  place-items: center;
}

.copyright {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 9px;
  font-weight: 400;
  line-height: 180%;
}

/* ============================================================
   mock v2 additions
   ============================================================ */

/* 新セクションのアンカー位置 */
#service,
#live,
#kids {
  scroll-margin-top: var(--header-height);
}

/* --- 1. のれんイントロ ---
   のれん画像（../images_local/noren_intro_portrait.webp）は GPT 生成（9:16・割れ目中央）。
   合成方式：各パネル（50.5%幅・計101%で継ぎ目を隠す）を overflow:hidden とし、
   内側の ::after（幅100vw・background-size:cover）で等比表示する。
   非等比の引き伸ばしをしないため紋・文字が歪まない。
   左パネル=擬似要素を左端に、右パネル=右端に寄せ、中央で画像が連続する。
   ※.loader 自体は透過のまま（不透過にすると開き演出時に本文が見えなくなる）。
     本文素通し防止の下地色はパネル側の background-color が担う。 */
.loader {
  background: transparent;
  cursor: pointer;
}

.noren-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  background-color: #a1170f; /* 画像ロード完了前の下地（本文チラ見え防止） */
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.noren-panel::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw;
  background: url("../images_local/noren_intro_portrait.webp") center / cover no-repeat;
}

.noren-panel--left {
  left: 0;
}

.noren-panel--left::after {
  left: 0;
}

.noren-panel--right {
  right: 0;
}

.noren-panel--right::after {
  right: 0;
}

/* スキップ案内。
   旧実装は bottom 依存で、iOS Safari のツールバー表示時（safe-area-inset-bottom が 0 を返す）に
   実効28px＝ツールバーの裏に隠れ、主要ターゲットのiPhoneでほぼ見えなかった。
   のれんの合わせ目（画面中央）のすぐ下に置き、ツールバーの影響を受けないようにする。
   文言はタッチ環境＝タップ／hover環境＝クリックで出し分ける。 */
.noren-skip {
  position: absolute;
  top: 56%;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 7px 18px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.noren-skip::after {
  content: "画面をタップでスキップ";
}

@media (hover: hover) and (pointer: fine) {
  .noren-skip::after {
    content: "クリック／Esc でスキップ";
  }
}

.loader.is-open .noren-skip {
  opacity: 0;
}

.loader.is-open .noren-panel--left {
  transform: translateX(-105%);
}

.loader.is-open .noren-panel--right {
  transform: translateX(105%);
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}

/* 横長・PC環境では横長ののれん素材（noren_intro.jpg 1586x992）へ切り替える。
   パネルは cover 表示のため縦横どちらでも等比が保たれ、紋・文字は歪まない。 */
@media (min-width: 601px), (orientation: landscape) {
  .noren-panel::after {
    background-image: url("../images_local/noren_intro.webp");
  }
}

/* --- 2. FVコピー差し替えに伴う筆線の微調整 --- */
.hero-headline .hero-headline-line {
  top: auto;
  bottom: 4px;
  width: 245px;
}

.hero-headline-sub p:first-of-type .hero-headline-sub-line {
  width: 170px;
}

/* --- 3. 毎月8日「つむぎ亭の日」バンド --- */
/* 2026-07-30 エンジニア版（Figma）同期：帯を見出し階層＋右の硬貨ブリードに再構成。
   text-align:left＋右側に硬貨の逃げを取る。
   ★幅はFV・各セクションと同じ --content-width に揃える（釜井指摘 7/30「赤い帯が上の画像と
     あってない」＝中間幅でFVは480pxカラム・帯だけ全幅に伸びてズレて見えた。SPでは従来どおり全幅） */
.day8-band {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  background: #e1251b;
  color: var(--color-white);
  text-align: left;
  padding-block: 26px 24px;
  overflow: hidden; /* 硬貨の右ブリードを帯の外に漏らさない */
}

.day8-inner {
  position: relative;
}

/* 500円玉（釜井さん支給のGPT生成・円形切り抜き）：帯の右端から少しはみ出す
   （エンジニア版Figmaと同じ構図）。top はワンコイン〜チップの行帯に合わせる
   （下の注記・ピルには掛からない高さ） */
.day8-coin {
  position: absolute;
  top: 88px;
  right: -46px;
  width: 180px;
  height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.day8-line1 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.day8-num {
  font-size: 30px;
  padding-inline: 2px;
}

.day8-title {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-top: 2px;
}

.day8-line2 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}

.day8-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}

.day8-onecoin {
  font-size: 20px;
  font-weight: 600;
}

.day8-price {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
}

.day8-price span {
  font-size: 20px;
}

/* 販売メニュー限定の条件（店内ポスター脚注の記載）。
   同じページに味噌940・ざる940・冷やし940・丼類を大きく載せているため、
   これが無いと8日にそれらを目当てに来店した客が「売っていない」に当たる。 */
.day8-note {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 12px;
  padding-right: 118px; /* 右の硬貨ブリードに文字を重ねない逃げ */
  color: #fff; /* #e1251b地でAA(4.5:1)を確保。打消し表示なので薄くしない */
}

.day8-line3 {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 5px 20px;
}

/* 8日バンドからLINE登録への橋渡し。
   2026-07-30 エンジニア版同期：下線リンク → 白ピルボタン（帯内の主導線に格上げ）

   ★2026-08-01：非表示にしている。LINEバナーのブロックを帯の直下へ移設した結果、
     この白ピル（毎月8日の告知をLINEで受け取る）と、直下の緑帯の白ピル（LINEを登録する！）が
     約100px差で縦に並び、しかも遷移先が同じ lin.ee/yw7zcv8 で完全に重複するため。
     LINEの入口は緑帯の1本に集約する。帯を単独で使う構成に戻すときはこの display:none を外す。 */
.day8-link {
  display: none;
  max-width: 340px;
  margin-top: 16px;
  padding: 14px 24px;
  background: var(--color-white);
  color: #c8271f; /* 白地上で 5.4:1（AA）。帯の #e1251b は白地だと 4.3:1 でAA未達のため一段濃く */
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* --- 4. 基本サービス --- */
.service {
  padding-block: 26px 48px;
}

.service h2,
.live h2 {
  color: #1f1f1f;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  margin-block-end: 33px;
  /*overflow: hidden;*/
}

.service h2 span,
.live h2 span {
  position: relative;
}

.service h2 span::after,
.live h2 span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 27px);
  width: 100vw;
  height: 1px;
  background: #000;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.service-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px 12px 18px;
  text-align: center;
}

.service-name {
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 3em; /* 2行分を確保＝「ライス食べ放題（１５０円）」の2行折返しでも4枚の縦位置が揃う */
  margin-block-end: 6px;
}

.service-desc {
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 400;
  line-height: 168%;
}

.service-close {
  color: #1f1f1f;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin-block-start: 24px;
}

/* 無料サービスの適用条件（店内サイン・ポスターの記載）。
   これが無いと「購入不要・無制限」と読める。注記水準は他の打消し表示と揃える */
.service-cond {
  color: #5f5f5f;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  margin-block-start: 10px;
}

/* --- 5. お品書き：写真カルーセル・ジャンル見出し・横スライダー --- */

/* ★写真カルーセル（.photo-slider / .photo-slide 系）は現在HTMLで未使用。
   実写真が1種しか無く「4スライドとも同じ写真」＝スワイプの報酬ゼロ＋
   1枚の写真に4つの別商品名（alt）が付く状態だったため、太旨・まぜそばも
   味噌・ざる・冷やしと同じ「写真1枚＋価格カード」様式に統一した。
   ★実写真が4種そろったらこのブロックを使ってカルーセルへ戻せる（HTML側の
     figure構造を復元するだけ。CSSは残してある）。 */
.photo-slider-wrap {
  position: relative;
}

.photo-slider-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20px;
  width: 44px;
  background: linear-gradient(to left, #fff 15%, rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.photo-slider-wrap::after {
  content: "スワイプ →";
  display: none;
  text-align: right;
  font-size: 11px;
  color: #6b6258;
  margin-top: 6px;
}

/* スワイプ案内はページ先頭のカルーセル（太旨ラーメン）のみ表示（反復ノイズ回避。
   以降はドットと右端のグラデーションが続きの手がかりを担う） */
.menu-list > article:first-of-type .photo-slider-wrap::after {
  display: block;
}

.photo-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-inline: -20px;
  padding-inline: 20px;
  padding-block: 2px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.photo-slider::-webkit-scrollbar {
  display: none;
}

.photo-slider:focus-visible {
  outline: 2px solid #e1251b;
  outline-offset: 2px;
}

.photo-slide {
  position: relative;
  flex: 0 0 86%;
  margin: 0;
  scroll-snap-align: start;
  /* ★2026-08-03：320px幅（iPhone SE初代／拡大表示ON）対策。
     素の min-width:280px だと、スライダーの内容領域（320px時＝240px＝画面320−左右padding各20−
     コンテナ余白）を40px超え、1枚目の右端＝価格「940円」等が20px切れていた。
     min() で内容領域を上限にする。内容領域が280px以上ある360px幅以上では従来どおり280px。 */
  min-width: min(280px, 100%);
}

@media (min-width: 481px) {
  .photo-slide {
    flex: 0 0 90%;
    min-width: unset;
  }
}

/* 写真は既存 menu-photo と同じ見た目（radius 10px）を正方形で */
.photo-slide img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

/* バッジ（味玉/おすすめ）は写真の左上に重ねる（price-badge 様式流用） */
.photo-slide .price-badge {
  top: 10px;
  left: 10px;
  z-index: 1;
}

.photo-slide-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px;
  margin-top: 10px;
}

.photo-slide-name {
  color: #1f1f1f;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

@media (min-width: 481px) {
  .photo-slide-caption {
    gap: 10px;
  }

  .photo-slide-name {
    font-size: 18px;
  }
}

.photo-slide-price {
  color: #1f1f1f;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.photo-slide-price span {
  font-size: 13px;
  margin-left: 2px;
}

/* 位置インジケータ（現在位置は js/main.js が scroll で同期）。
   こちらは aria-hidden の span＝押せない。#about の押せるドットと同じ見た目だと
   「押しても無反応」を食うため、点ではなく細いセグメントバーで表す。
   非アクティブも #d9d9d9（1.3:1）から #c4bdb0 に落として何本中の何本目かを読めるようにする */
.photo-slider-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 140px;
  margin-top: 12px;
  margin-inline: auto;
}

.photo-slider-dots span {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: #c4bdb0;
  transition: background-color 0.2s ease;
}

.photo-slider-dots span.is-active {
  background: #575757;
}

/* 写真注記は「打消し表示」として実際に読まれる必要がある。
   10px/#757575（生成り地で4.06:1）は日本語では実質判読不能なので、
   .line-banner-benefit-note と同じ 11px/#5f5f5f に揃える（ページ内の注記水準を統一）。 */
.photo-slider-note {
  font-size: 11px;
  color: #5f5f5f;
  text-align: right;
  margin-top: 8px;
}

.menu-genre {
  margin-block-end: 41.5px;
}

/* ジャンル見出し（トッピング・ドリンク）：味噌等の色帯タグと同階層のチップ見た目。
   帯色は特定ジャンル色を持たないため中立の焦げ茶（--color-text）とする */
.menu-genre-head {
  margin-block-end: 15.5px;
}

.menu-genre-tag {
  display: inline-flex;
  min-width: 148px;
  height: 28px;
  padding-inline: 16px;
  justify-content: center;
  align-items: center;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
}

/* 写真なしジャンル（味噌・ざる中華・冷やしぶっかけ）＝価格カードの横スライド。
   ジャンル区別はタグチップの色のみに留め、カード背景は共通の生成り（--color-bg）で統一
   （元テーマ＝赤×白×生成りに配色を増やさない） */
.menu-tag--miso {
  background: #8a5a24; /* 味噌色 */
}

.menu-tag--zaru {
  background: #33475b; /* ざる=藍鼠 */
}

.menu-tag--hiyashi {
  background: #1f7a8c; /* 冷やし=涼青 */
}

.menu-tag-summer {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding-inline: 8px;
  margin-left: 8px;
  background: var(--color-white);
  color: #1f7a8c;
  font-size: 10px;
  font-weight: bold;
}

.menu-genre .menu-tag {
  display: inline-flex; /* 看板・ご飯もののタグと同じチップ様式に統一（全幅帯にしない） */
  width: fit-content;
  min-width: 148px;
  padding-inline: 16px;
}

/* 横スライダー共通（純CSS scroll-snap・JS不要） */
.price-slider-wrap {
  position: relative;
}

.price-slider-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20px;
  width: 44px;
  background: linear-gradient(to left, #fff 15%, rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

/* スワイプ案内はページ先頭のスライダー（太旨ラーメンの価格カード）だけに出す。
   反復ノイズを避けるため2つ目以降は右端のグラデーションが続きの手がかりを担う。
   ※768px以上では price-slider が折り返しグリッドになるためヒントも消す（768pxブロック側） */
.menu-list > article:first-of-type .price-slider-wrap::after {
  content: "スワイプ →";
  display: block;
  text-align: right;
  font-size: 11px;
  color: #6b6258;
  margin-top: 6px;
}

.price-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-inline: -20px;
  padding-inline: 20px;
  padding-block: 10px 2px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.price-slider::-webkit-scrollbar {
  display: none;
}

/* キーボード操作用（tabindex=0 でフォーカス可能・矢印キーでスクロール） */
.price-slider:focus-visible {
  outline: 2px solid #e1251b;
  outline-offset: 2px;
}

/* マウス環境では細いスクロールバーを表示して操作可能にする */
@media (hover: hover) and (pointer: fine) {
  .price-slider,
  .photo-slider {
    scrollbar-width: thin;
    scrollbar-color: #c8c8c8 transparent;
  }

  .price-slider::-webkit-scrollbar,
  .photo-slider::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .price-slider::-webkit-scrollbar-track,
  .photo-slider::-webkit-scrollbar-track {
    background: transparent;
  }

  .price-slider::-webkit-scrollbar-thumb,
  .photo-slider::-webkit-scrollbar-thumb {
    background: #c8c8c8;
    border-radius: 3px;
  }
}

/* min-height と space-between は名前と価格の間に用途のない空白を生むため撤廃し、
   gap 固定で内容なりの高さに詰める */
.price-card {
  position: relative;
  flex: 0 0 66%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid #eee3d2;
  border-radius: 12px;
  padding: 16px 14px 12px;
}

.price-card-name {
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.price-card-price {
  color: #1f1f1f;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  margin-top: auto; /* 価格をカード下辺に吸着＝品名の行数差でカード高が不揃いに見えない */
}

.price-card-price span {
  font-size: 13px;
  margin-left: 2px;
}

.price-badge {
  position: absolute;
  top: -9px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 10px;
  border-radius: 999px;
  background: #e1251b;
  color: var(--color-white);
  font-size: 10px;
  font-weight: bold;
}

.price-badge--tamago {
  background: #3a2c22;
}

/* トッピング用チップカード */
.chip-card {
  flex: 0 0 44%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 76px;
  background: var(--color-bg);
  border: 1px solid #eee3d2;
  border-radius: 12px;
  padding: 12px;
}

.chip-name {
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.chip-price {
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.chip-price span {
  font-size: 11px;
}

/* PC幅ではスライダーを解除して折り返しグリッド表示（全カードを一覧可能に）
   ※.price-card/.chip-card の基底ルールより後に置くこと（同一詳細度のため順序で勝たせる）
   写真カルーセルは同一写真の並置になるためPCでも横スライドのまま
  （細スクロールバーで操作可・「スワイプ →」ヒントのみ非表示） */
@media (min-width: 768px) {
  .price-slider {
    flex-wrap: wrap;
    gap: 16px 10px; /* 行間はバッジ（top:-9px）のはみ出し分を確保 */
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }

  .price-card {
    flex: 0 0 calc((100% - 10px) / 2);
  }

  .chip-card {
    flex: 0 0 calc((100% - 20px) / 3);
  }

  /* 価格カードはこのブレークポイントで折り返しグリッドになるため、右端フェードは不要。
     ★写真カルーセルは900px未満では横スクロールのままなので、
       「スワイプ →」ヒントをここで消すと768〜899pxで操作可能性の手がかりが消える。
       ヒントの非表示は900pxブロック側に置く */
  .price-slider-wrap::before,
  .menu-list > article:first-of-type .price-slider-wrap::after {
    display: none;
  }

  /* 価格カードはグリッド展開されるため位置ドットは不要 */
  .price-slider-dots {
    display: none;
  }
}

/* ご飯もの価格・おこさまセット・ドリンク・税込注記 */
.menu-price {
  color: #1f1f1f;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  margin-top: 8px;
}

.menu-price span {
  font-size: 12px;
  margin-left: 2px;
}

.menu-price--small {
  font-size: 16px;
  margin-top: 6px;
}

.menu-oneline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-block: 1px solid #c8c8c8;
  padding: 12px 4px;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  margin-block-end: 41.5px;
}

.menu-oneline-price {
  font-size: 18px;
}

.menu-oneline-price span {
  font-size: 11px;
  margin-left: 2px;
}

.drink-block {
  margin-block-end: 8px;
}

.drink-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drink-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 500;
  padding-block: 6px;
  border-block-end: 1px dotted #c8c8c8;
}

.menu-tax-note {
  margin-top: 18px;
  font-size: 11px;
  color: #757575;
  text-align: right;
}

/* --- 6. オールスターバンド --- */
/* オールスター（全メニュー表）。2026-08-01：見出し付きのブロックに格上げし、
   お品書きの「締め」として読ませる（プラーナ専務のご要望＝目立たせたい）。
   DOM順＝タグ → 見出し → ポスター → 拡大ボタン → 注記。 */
.allstar-card {
  margin-block: 25px 45px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 22px 20px 20px;
  text-align: center;
}

.allstar-tag {
  display: inline-block;
  background: #e1251b;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 4px 12px;
}

.allstar-caption {
  color: #1f1f1f;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 14px;
}

/* 縮小表示では価格文字が読めないため、画像を開いて原寸で読ませる導線を必ず残す
   （入稿データ差し替え後も維持）。文言は「タップ」を使わない＝PCと共用するため */
.allstar-zoom {
  display: block;
}

/* 原本（900x1269）は左端 x=0-4px・右端 x=896-899px に撮影時の暗い切り残しが入っている。
   拡大表示するほど帯として見えるので、左右0.6%だけ内側に詰めて落とす。 */
.allstar-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  clip-path: inset(0 0.6%);
}

.allstar-expand {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 26px;
  border: 1px solid #e1251b;
  border-radius: 999px;
  color: #c8271f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.allstar-note {
  text-align: center;
  font-size: 11px;
  color: #5f5f5f;
  margin-top: 12px;
}

/* --- 7. ライブ感 --- */
.live {
  /* 下側は次セクション（こだわり）の margin-top:-80px 重なり分を確保 */
  padding-block: 10px 115px;
}

.live-main {
  border-radius: 10px;
  margin-block-end: 12px;
}

.live-sub {
  border-radius: 10px;
  margin-block-end: 18px;
}

.live-copy {
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 500;
  line-height: 200%;
}

/* --- 8. こだわり追記 --- */
.himokawa-callout {
  margin-top: 14px;
  border: 1px solid #e1251b;
  border-radius: 10px;
  background: var(--color-white);
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 500;
  line-height: 187%;
  padding: 14px 4px;
  /*padding: 14px 16px;*/
}

.commitment-mini-grid {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.commitment-mini-card {
  width: calc((100% - 12px) / 2);
  background: var(--color-white);
  border-radius: 20px;
  padding: 12px 12px 14px;
}

.commitment-mini-card img {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-block-end: 10px;
}

.commitment-mini-title {
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  margin-block-end: 6px;
}

.commitment-mini-text {
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 400;
  line-height: 180%;
}

/* --- 9. LINEバナー特典行 --- */
.line-banner-benefit {
  border: 1px dashed #06c755;
  border-radius: 8px;
  background: rgba(6, 199, 85, 0.06);
  color: #1f1f1f;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 168%;
  padding: 10px 12px;
  margin-block-end: 13px;
}

/* 10px・#757575（生成り地で4.06:1）は日本語では実質判読不能。11px＋濃いグレーへ */
.line-banner-benefit-note {
  display: block;
  color: #5f5f5f;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}

/* --- 10. 基本サービス：イメージ写真カード（2026-07-30 エンジニア版同期） --- */
/* 実物ポスター実写 → サービスの中身が想像できる実写クロップへ（エンジニア報告の変更点②）。
   全カード4:3・coverで統一（クロップ済み素材なので文字見切れの心配は無い）。
   品名(小)＋赤キーワード(大)＋説明の3段＝エンジニア版と同型。
   旧ポスター用の contain 系（--wide含む）は不使用だが復元用に下に残す */
.service-card {
  padding: 10px 10px 16px;
}

.service-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-block-end: 10px;
}

.service-photo--wide {
  aspect-ratio: 4 / 3;
}

.service-keyword {
  color: #c8271f; /* 白地で5.4:1（AA） */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-block: 2px 4px;
}

/* 品名は小さな上ラベルに（大きさはキーワード側が担う）。
   min-height:3em は旧「1行の品名＋2行の品名」揃え用＝新構成では不要 */
.service-name {
  font-size: 14px;
  min-height: 0;
  margin-block-end: 0;
}

/* --- 11. コラボ麺（松崎屋製麺所）カード --- */
/* commitment-grid は align-items:flex-start のため width:100% を明示。
   本文は店内ポスターの記載準拠（事実の追加はしない） */
.collab-card {
  width: 100%;
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px 20px 26px;
}

/* menu-tag（ジャンルチップ）と同様式の赤チップ */
.collab-tag {
  display: inline-flex;
  width: fit-content;
  min-width: 148px;
  height: 28px;
  padding-inline: 16px;
  justify-content: center;
  align-items: center;
  background: #e1251b;
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  margin-block-end: 14px;
}

.collab-title {
  color: #1f1f1f;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-block-end: 16px;
}

/* 狭幅で「所」だけが2行目に落ちないよう、店名単位で折り返す（折り返し位置は×の後） */
.collab-title-name {
  white-space: nowrap;
}

.collab-photo {
  border-radius: 8px;
  margin-block-end: 18px;
}

/* オールスターメニュー表と同じ様式の注記 */
.collab-photo-note {
  font-size: 11px;
  color: #5f5f5f;
  text-align: right;
  margin: -12px 0 14px;
}

.collab-lead {
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 190%;
  margin-block-end: 12px;
}

.collab-text {
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 400;
  line-height: 200%;
}

/* --- 12. SP追従CTA（地図・経路／LINE友だち登録） ---
   来店3ゴールがいずれも「最下部まで到達した人」しか実行できなかったため、
   読了中いつでも指の届く場所に2導線だけ常設する。ボタンは既存の赤（#e1251b）と
   LINE緑（AA確保のため濃度調整）＋既存フォントのみで、新しい装飾は足さない。
   #news 表示中は js/main.js が is-hidden を付けてLINE CTAの二重表示を避ける。 */
.sp-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  gap: 10px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(244, 240, 233, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sp-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.sp-cta-btn {
  flex: 1;
  display: flex;
  height: 56px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap; /* 特典入りの文言でも2行に折らない */
}

/* 文言を「LINE登録で特典」（7文字）に戻したため、地図側と1:1に揃える。
   赤×緑の帯を非対称に広げないことで、生成り＋和紙のトーンとの衝突も下がる */
.sp-cta-btn--map {
  background: #e1251b;
}

.sp-cta-btn--line {
  background: #04873a; /* 白文字で 4.6:1（#06c755 のままだと 2.26:1） */
}

/* 追従バーの分だけ下端を空けてフッターを隠さない。
   body ではなくフッター側に持たせる＝バーが引っ込んだとき（#news表示中）に
   フッター下へ生成りの帯が現れない。FVの高さも同じ変数で差し引いてある
   （OPEN・立地行がバーの裏に入らないようにするため）。 */
.site-footer {
  padding-bottom: var(--sp-cta-height);
}

/* 広い幅ではボタンだけSP相当の寸法に留めて中央に置く。
   旧実装は flex:1 のまま伸びるため、1199pxでは幅500〜640pxの巨大な赤と緑のカプセルが
   画面下端を横断し、生成り＋和紙＋明朝の抑制されたトーンに対して最も強い視覚要素になっていた。
   バー自体（背景・影）は全幅のまま＝下端の処理は変えない。 */
@media (min-width: 600px) {
  .sp-cta {
    justify-content: center;
    padding-inline: 20px;
  }

  .sp-cta-btn {
    flex: 0 1 240px;
  }
}

/* 追従CTAは「常時ナビ（.pc-nav）が出る幅」まで残す。
   900〜1199px（iPad横持ち・分割ウィンドウ）でCTAもナビも無い帯域を作らないため。 */
@media (min-width: 1200px) {
  :root {
    --sp-cta-height: 0px;
  }

  .sp-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-cta {
    transition: none;
  }
}

/* ============================================================
   PCレイヤー（min-width: 900px）
   SP(899px以下)には一切影響させない。基底・768pxブロックより
   後置し、同一詳細度は記述順で勝たせる。
   ============================================================ */

/* PC横並びナビは 1200px 以上でのみ出す（それ未満はハンバーガー継続）。
   ロゴ203px＋ナビ7項目（実測約880px）＝1100px超が必要で、
   900〜1199pxで出すと最後の「LINEでお知らせを受け取る」が画面右外に切れて押せなかった。
   .site-header は position:fixed でスクロールバーも出ないため、切れたことに気づけない。 */
.pc-nav {
  display: none;
}

@media (min-width: 900px) {
  /* --- 全体：コンテンツ幅1000px --- */
  :root {
    --content-width: 1000px; /* .container の max-width を一括拡張 */
  }

  br.pc {
    display: inline;
  }

  br.sp {
    display: none;
  }

  .header-inner {
    gap: 24px;
  }

  /* --- ヒーロー：全幅ビジュアルに（高さの考え方は基底と同じ。単位は dvh で統一） --- */
  .hero {
    max-width: none;
    /* 追従CTAはFV表示中は出ないため差し引かない（基底と同じ考え方・単位はdvhで統一） */
    height: min(calc(100dvh - var(--header-height)), 860px);
  }

  /* 背景画像は .hero-bg::before（Ken Burns層）が持つ。
     ★PCは横長枠に対して素材(1206x2475)が極端な縦長のため、cover のままでは丼が
       画面幅を大きく超えて拡大され「丼のフチだけ」が映る。contain 相当に切り替え、
       丼全体が入る大きさで中央に置く（余白は背景色 --color-dark が受ける）。 */
  /* ★PCのFV：素材(1206x2475)は極端な縦長で、横長枠に cover で入れると
     丼が大写しになり全体が入らない。高さ基準で丼が収まる倍率にし、
     左右に生じる余白は「写真の外側」ではなく画像自身をぼかして敷き詰める
     （黒帯を出さずに、丼を主役のまま全体を見せる）。 */
  /* 背面のぼかし敷きは .hero::after が担当（左右に黒帯を出さないため）。
     .hero-bg 自体は前面の「丼が全部入る層」だけを持つ。 */

  .hero-bg::before {
    inset: 0;
    background-position: 42% 57%;
    background-size: auto 145%;
    /* 前面（丼が全部入る層）と背面ぼかしの境目をなじませる */
    box-shadow: 0 0 90px 30px rgba(20, 14, 10, 0.5);
  }

  /* PCはヒーローを低くしすぎない（低いほど縦長素材の切り出しが厳しくなる） */
  .hero {
    height: min(calc(100dvh - var(--header-height) - var(--sp-cta-height)), 760px);
  }

  /* 暗グラデ（.hero::before）は基底に移設済み＝SPでも白文字の下限コントラストを保証する */

  .hero-inner {
    position: relative; /* OPENブロックの右下配置基準 */
    padding-top: 88px;
    padding-inline: 20px;
  }

  .hero-headline {
    font-size: 48px;
  }

  /* 筆線は文字スケール(34→48px)に合わせて拡大 */
  .hero-headline .hero-headline-line {
    width: 345px;
    bottom: 6px;
  }

  .hero-headline-sub-text {
    font-size: 28px;
    letter-spacing: 4.5px;
  }

  .hero-headline-sub p:first-of-type .hero-headline-sub-line {
    width: 200px;
  }

  .hero-headline-sub p:last-of-type .hero-headline-sub-line {
    width: 385px;
  }

  /* 円ナビ＝左下に寄せて140px */
  .quick-nav {
    justify-content: flex-start;
    gap: 32px;
    margin-bottom: 48px;
    padding-inline: 0;
  }

  .quick-nav-item {
    width: 140px;
    height: 140px;
  }

  .quick-nav-heading {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .quick-nav-number {
    font-size: 46px;
  }

  .quick-nav-mini {
    font-size: 18px;
  }

  .quick-nav-text {
    font-size: 38px;
  }

  /* OPENブロック＝右下 */
  .hero-open-block {
    position: absolute;
    right: 20px;
    bottom: 44px;
    margin-bottom: 0;
  }

  .hero-open {
    font-size: 42px;
  }

  .hero-open-now {
    font-size: 20px;
  }

  .hero-note {
    font-size: 20px;
  }

  /* --- つむぎ亭の日バンド（2026-07-30 エンジニア版同期：左テキスト階層＋右に大きな丼） ---
     SPと同じ絶対配置構成のまま、内容を640px幅で中央に寄せて要素を拡大する（右は硬貨）

     2026-08-01：帯を全幅に戻す（釜井さん指摘「赤い帯とFVの帯の長さを合わせて」）。
     .day8-band の max-width:var(--content-width) は 601〜899px（FVが480pxカラムになる帯域）
     のための指定で、900px以上でFVが全幅化する指定と噛み合っていなかった。
     実測＝W1000/900/700 では hero と帯が完全一致していたが、W1200 で左右100pxずつ、
     W1440 で220pxずつ帯だけ内側に入り、広い画面ほどFVとのズレが開いていた。
     背景だけ全幅にし、中身（.day8-inner 640px）は従来どおり中央寄せのまま＝構図は不変。 */
  .day8-band {
    position: relative;
    max-width: none;
    padding-block: 44px 40px;
  }

  /* 上下の細い白罫はエンジニア版Figmaに無いため、PCでは出さない（2026-08-01・Figmaに合わせる） */
  .day8-band::before {
    display: none;
  }

  /* 2026-08-01：帯の中身をエンジニア版Figmaの組みに合わせる。
     旧＝640pxの1カラムに全部を縦積み（毎月8日は→つむぎ亭の日→太旨…が、→500円→次回→注記→ピル）。
     Figma＝上段が「毎月8日は／つむぎ亭の日」（左）と「太旨ラーメン・まぜそばが、／ワンコイン500円」（右）の
     2カラム、その下に「次回は◯月◯日」ピルと注記を横並び、最下段に白ピル、右端に硬貨。
     要素はすべて .day8-inner の直下にあるので、HTMLを触らずグリッドエリアだけで組み替える。

     ★2026-08-01 追記：直下のLINE帯（.line-banner-box）と「同一のグリッド」を共有させる。
       330px / 1fr / 260px という同じ列を2本の帯で使うことで、
       左のテキスト↕左のボタン、中央の注記↕中央の注記、右の硬貨↕右のバナーが
       縦に揃う（釜井さん指示「LINEと上のワンコインの文字をシンメトリーに」）。
       ここの数値を変えるときは .line-banner-box 側も必ず同じ値にすること。 */
  .day8-inner {
    max-width: 1000px;
    margin-inline: auto;
    display: grid;
    /* 900〜1023pxでは固定330px+260px+gap88pxだと中央列が182pxしか残らず、
       「ワンコイン」が縦に割れる。列を割合で持たせて中央列に300px前後を確保する。 */
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr) minmax(0, 26%);
    grid-template-areas:
      "l1   l2    coin"
      "ttl  price coin"
      "next note  coin";
    column-gap: clamp(24px, 4.4vw, 44px);
    row-gap: 0;
    align-items: start;
  }

  .day8-line1 { grid-area: l1; align-self: end; }
  .day8-title { grid-area: ttl; }
  .day8-line2 { grid-area: l2; align-self: end; }
  .day8-price-row { grid-area: price; }
  .day8-line3 { grid-area: next; justify-self: start; align-self: center; }
  .day8-note { grid-area: note; align-self: center; }

  /* グリッド化に伴い硬貨は絶対配置をやめる（右カラムの中で縦センター） */
  .day8-coin {
    position: static;
    grid-area: coin;
    justify-self: end;
    align-self: center;
    width: 260px;
    margin-top: 0;
  }

  .day8-line1 {
    font-size: 24px;
  }

  .day8-num {
    font-size: 38px;
    padding-inline: 4px;
  }

  .day8-title {
    font-size: 44px;
  }

  .day8-line2 {
    font-size: 16px;
  }

  .day8-price {
    font-size: 64px;
  }

  .day8-price span {
    font-size: 24px;
  }

  .day8-onecoin {
    font-size: 24px;
  }

  .day8-line3 {
    font-size: 15px;
    padding: 8px 26px;
    margin-top: 26px;
    white-space: nowrap;
  }

  /* グリッドで硬貨と列が分かれたので、SPで入れていた硬貨の逃げ（padding-right）は不要 */
  .day8-note {
    padding-right: 0;
    margin-top: 26px;
    font-size: 12px;
  }

  .day8-link {
    white-space: nowrap;
    min-width: 330px; /* Figmaのピル幅（帯幅の約23%）に合わせる */
    max-width: none;
    width: auto;
    margin-top: 26px;
    padding-inline: 44px;
    font-size: 15px;
  }

  /* --- 駐車場：イラストマップは760pxに留めて中央へ ---
     ★営業時間の1行も同じ760pxで揃える（旧実装はここだけ1000pxコンテナの左端に
       取り残され、地図・住所より約60px左に飛び出していた） */
  .parking-map,
  .parking-hours,
  .parking-address {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  /* --- 基本サービス：4カード横1列 --- */
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /* 2026-07-30 エンジニア版同期：全カード4:3・coverのままPCも統一（旧containは廃止） */
  .service-photo,
  .service-photo--wide {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }

  .service-keyword {
    font-size: 26px;
  }

  .service-name {
    min-height: 0; /* PCでは全カード1行に収まるため詰める */
    font-size: 15px;
  }

  /* --- お品書き --- */
  .menu-list {
    padding: 48px;
  }

  .menu h2 {
    margin-block-end: 40px;
  }

  .menu-item h3 {
    /*font-size: 32px;*/
    font-size: 40px;
  }

  .menu-desc {
    /*font-size: 15px;*/
    font-size: 21px;
    margin-block: 0 12px;
    /*max-width: 46em; !* 1行が長くなりすぎない読了幅 *!*/
  }

  .menu-item--sub .menu-desc {
    font-size: 15px;
    margin-block: 0;
  }

  /* 2026-08-01：PCは4列グリッド（釜井さん指示「メニューはPC版は4列で」＝エンジニア版Figmaに合わせる）。
     旧＝スライド幅340px固定で2.5枚見せ＋前後矢印。1画面に全バリエーションが並ばず、
     PCでは価格の比較（890/1,040/1,090/1,290）ができなかった。
     SP・タブレットは従来どおり横スワイプのカルーセルのまま（グリッド化は900px以上だけ）。
     グリッド時はスクロールが発生しないので、ドット／前後矢印／右端グラデーション／
     「スワイプ →」の案内をまとめて畳む。tabindex は js/main.js の slider-focusability が
     scrollWidth を見て自動で外すため、無反応のフォーカス停止点は残らない。 */
  .photo-slider {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
    scroll-snap-type: none;
  }

  .photo-slide {
    flex: none;
  }

  .photo-slider-wrap::before,
  .photo-slider-wrap::after,
  .menu-list > article:first-of-type .photo-slider-wrap::after {
    display: none;
  }

  .photo-slider-dots {
    display: none;
  }

  /* 4列では1枚あたり約228px。品名と価格を1行に並べると「太旨ネギチャーシューメン」が
     折り返して価格とぶつかるため、Figma同様に品名（上・左揃え）→価格（下・中央）の縦積みにする */
  .photo-slide-caption {
    display: block;
    margin-top: 10px;
  }

  .photo-slide-name {
    display: block;
    /*font-size: 14px;*/
    font-size: 13px;
  }

  .photo-slide-price {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 24px;
  }

  /* 価格スライダー：4枚グリッド展開（スクロールなし。768pxブロックのwrap化を上書き） */
  .price-card {
    flex: 0 0 calc((100% - 30px) / 4);
  }

  .chip-card {
    flex: 0 0 calc((100% - 30px) / 4);
  }

  /* 写真は原寸貼りにせず560pxまで。左寄せ＝h3の下罫・本文・注記・価格カードと
     左端を揃える（中央寄せだと写真だけ軸がずれ、直下の注記と繋がって見えない） */
  .menu-item .menu-photo {
    max-width: 560px;
    margin-inline: 0;
  }

  .menu-item .menu-photo.center {
    margin-inline: auto;
  }

  /* 丼2品：サムネ+テキストの横組みに */
  .menu-item-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }

  .menu-item-row .photo-thumb {
    width: 42%;
    margin-bottom: 0;
  }

  .menu-item-body {
    flex: 1;
  }

  .menu-item-row .menu-item-body h3 {
    font-size: 15px;
  }

  /* ドリンクは2段組 */
  .drink-list {
    columns: 2;
    column-gap: 48px;
  }

  .drink-list li {
    break-inside: avoid;
  }

  /* --- オールスター：2026-08-01 でカードを960pxに広げ、ポスターを760pxまで拡大 ---
     （旧＝640pxカード／560pxポスター。専務のご要望「目立たせたい」に対して小さすぎた）
     ★760pxが上限。原本は900x1269で、表示幅Wでの実効文字サイズは native×W/900。
       原本での実測＝品名14px／価格20px／最小注記10px相当なので、
       560px表示では品名8.7px＝判読不能、760pxでも11.8px、900pxでようやく14px。
       つまり「LP上で読ませる」ことは素材の解像度上できない＝面としての存在感（専務のご要望）と
       読ませる責務（拡大表示）を分離する設計にしてある。900px超は等倍を超えるので禁止。
       760pxは既存の「駐車場イラストマップは760pxに留める」と同じ資料系画像の幅ルールに揃えた値。
       印刷用の入稿データを受領したら上限を上げてよい。 */
  .allstar-card {
    max-width: 960px;
    margin-inline: auto;
    padding: 40px 40px 32px;
  }

  .allstar-tag {
    font-size: 12px;
    padding: 5px 14px;
  }

  .allstar-caption {
    font-size: 30px;
    margin-top: 14px;
    margin-bottom: 22px;
  }

  .allstar-zoom {
    max-width: 760px;
    margin-inline: auto;
  }

  .allstar-expand {
    margin-top: 22px;
    padding: 13px 34px;
    font-size: 14px;
  }

  /* --- ライブ感：メイン+サブ横並び --- */
  .live {
    padding-block: 20px 130px;
  }

  .live .container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
  }

  .live h2 {
    grid-column: 1 / -1;
  }

  .live-main,
  .live-sub {
    height: 360px;
    object-fit: cover;
    margin-block-end: 0;
  }

  .live-copy {
    grid-column: 1 / -1;
    margin-top: 12px;
    text-align: center;
    font-size: 16px;
  }

  /* --- こだわり：3ブロック横並び＋コラボ麺2カラム＋ミニカード下段 --- */
  .commitment-lead {
    font-size: 22px;
  }

  .commitment-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 28px;
  }

  .commitment-item {
    width: calc((100% - 56px) / 3);
  }

  /* コラボ麺カードは3ブロックの下段へ回し、画像右40%+テキスト左60%の2カラム */
  .collab-card {
    order: 10;
    padding: 32px 36px 30px;
  }

  .collab-card::after {
    content: "";
    display: block;
    clear: both;
  }

  .collab-photo {
    float: right;
    width: 40%;
    margin: 0 0 10px 36px;
  }

  .collab-photo-note {
    float: right;
    clear: right;
    width: 40%;
    margin: 0 0 16px 36px;
  }

  .collab-title {
    font-size: 26px;
  }

  .collab-lead {
    font-size: 16px;
  }

  .collab-text {
    font-size: 14px;
  }

  .commitment-mini-grid {
    gap: 28px;
  }

  .commitment-mini-card {
    width: calc((100% - 28px) / 2);
    padding: 16px 16px 18px;
  }

  .commitment-mini-card img {
    aspect-ratio: 16 / 9;
  }

  .commitment-mini-title {
    font-size: 17px;
  }

  .commitment-mini-title br {
    display: none; /* PC幅では1行で読ませる */
  }

  .commitment-mini-text {
    font-size: 13px;
  }

  /* --- 店内の雰囲気(about)：スライドショー+テキストの2カラム --- */
  .about {
    padding-bottom: 60px;
  }

  .about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
    padding-inline: 20px;
    align-items: start;
  }

  .about h2 {
    grid-column: 1 / -1;
    margin-bottom: 36px;
  }

  .about-slideshow {
    grid-area: 2 / 1;
    margin-block-end: 16px;
    border-radius: 12px;
  }

  .about-slide-dots {
    grid-area: 3 / 1;
    margin-block-end: 0;
  }

  .about-text {
    grid-area: 2 / 2 / 4 / 3;
    padding-inline: 0;
    font-size: 15px;
  }

  /* PCは1行が長くなりすぎないよう読み幅を抑え、引用は少し大きく */
  .about-lead {
    font-size: 21px;
    margin-block-end: 22px;
  }

  .about-para {
    font-size: 15px;
    line-height: 210%;
    margin-block-end: 18px;
  }

  .about-closing {
    font-size: 16px;
    padding-block-start: 20px;
  }

  /* PCでは締めの一文を1行に流す */
  .about-br {
    display: none;
  }

  /* --- アクセス：地図+テーブルの2カラム --- */
  .access {
    padding-block: 60px 40px;
  }

  .access .container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 32px;
    align-items: stretch;
  }

  .access h2 {
    grid-column: 1 / -1;
  }

  /* 2カラム（左=地図／右=行動導線＋店舗情報表）。
     行動導線を右カラム上段に明示配置しないと、地図と表の間に割り込んで段組みが崩れる */
  .access-map {
    aspect-ratio: auto;
    height: 100%;
    min-height: 440px;
    margin-block-end: 0;
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .access-actions {
    grid-column: 2;
    grid-row: 2;
    margin-block-end: 12px;
  }

  .access-table {
    align-self: start;
    grid-column: 2;
    grid-row: 3;
  }

  .access-row dd {
    font-size: 13px;
  }

  /* --- LINEバナー：2026-08-01 で赤帯の直下へ移設したため、PCは赤帯と同じ1000px幅に揃える。
     640px中央のままだと真上の赤帯（1000px）と幅が食い違い、2枚が対に見えない。
     中身は「支給バナー（左）＋登録ボタン・条件注記（右）」の横組み＝赤帯の
     「テキスト左／硬貨右」と同じ骨格にして、2本の帯が並んで読めるようにする。 --- */
  .line-banner {
    background: #567e37; /* 緑地を全幅の帯にする＝赤帯・FVと左右の端を揃える */
    padding-block: 0;
    padding-inline: 0;
  }

  /* 中身の幅は赤帯の .day8-inner と同じ＝1000px（うち左右20pxは .container の padding）。
     ここで padding-inline:0 にすると、赤帯の本文だけ20px内側に入って左端が20pxずれるので、
     .container の既定値のまま使う（2本の帯で本文の左右端を一致させるため）。 */
  .line-banner .container {
    max-width: var(--content-width);
  }

  /* 地色は親（.line-banner）が持つので、箱は中身の器だけにする＝角丸なしで帯に接続 */
  .line-banner-box {
    width: 100%;
    max-width: none;
    background: transparent;
    border-radius: 0;
    margin-inline: auto;
    padding: 30px 0;
    /* ★上の赤帯（.day8-inner）と完全に同じ列。数値を変えるときは両方そろえること。
       左＝ボタン（赤帯の「毎月8日は／つむぎ亭の日」と同じ列）
       中＝条件注記（赤帯の「太旨…が、／ワンコイン500円／※注記」と同じ列）
       右＝支給バナー（赤帯の500円玉と同じ列・同じ幅）
       ＝2本の帯で文章の左右位置が縦に揃う（釜井さん指示のシンメトリー） */
    display: grid;
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr) minmax(0, 26%);
    grid-template-areas: "pop note btn";
    align-items: center;
    column-gap: clamp(24px, 4.4vw, 44px);
  }

  .line-banner-pop {
    grid-area: pop;
    max-width: 260px;
    justify-self: start;
    margin-inline: 0;
  }

  .line-banner-btn {
    grid-area: btn;
    width: 100%;
    height: 62px;
    font-size: 17px;
    margin: 0;
  }

  .line-banner-note {
    grid-area: note;
    text-align: left;
    margin-top: 0;
  }

  /* --- フッター：ナビ横並び --- */
  .site-footer .container {
    padding-block: 40px 18px;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
  }
}

/* ============================================================
   ヘッダーナビ（min-width: 1200px）
   900〜1199pxはハンバーガー継続。ナビを出す幅では .header-inner の
   1000px制限を外して全幅に広げ、右端の欠けを構造的に起こさない。
   ============================================================ */
@media (min-width: 1200px) {
  .menu-toggle {
    display: none;
  }

  .site-header .header-inner {
    max-width: none;
    padding-inline: 24px;
  }

  .pc-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
    margin-left: auto;
  }

  .pc-nav a {
    color: #1f1f1f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .pc-nav a:hover {
    color: #e1251b;
  }
}

/* カルーセル前後矢印：PC（hover環境）でのみ表示。SPはスワイプで送るため出さない。
   写真カルーセルをPCでも維持する方針（メニューは横に流す）に伴い復活。 */
/* 2026-08-01：PCの写真カルーセルを4列グリッドにしたため、前後矢印はPCでも出さない。
   （矢印は js/main.js の slider-arrows が常時DOMに生成しているので、CSS側で畳む。
     JSを消さないのは、4列を止めて横送りに戻す判断が出た時に1行で復帰できるようにするため） */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .slider-arrow {
    display: none;
  }
}

/* 価格などの語中改行を禁止する小ユーティリティ */
.nowrap {
  white-space: nowrap;
}


/* --- お品書きの1枚写真（看板2品＝実写／味噌・ざる・冷やし＝メニュー表からの仮素材） --- */
/* 写真の注記は写真幅に合わせて左寄せ（スライダー注記の右寄せを上書き） */
.menu-photo-note {
  text-align: left;
  margin-top: 0;
  margin-block-end: 14px;
}

/* 看板2品（太旨・まぜそば）＝旧カルーセル先頭スライドと同じ正方形フレーミングを維持 */
.menu-photo--hero {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-block-end: 8px;
}

/* ジャンル3種＝カード内容幅いっぱい。旧168pxはタグチップ(148px)とも本文とも右端が揃わず、
   小さい正方形が3連続してスクロールの報酬が落ちきっていた。
   object-position を下寄りに取っているのは、元ポスター上端の白抜き文字
   （味噌＝「ラーメン」／ざる＝赤白の文字）を表示窓の外へ追い出すため
   （4:3枠のcoverで上下計25%が切れ、うち上側が約15%）。 */
.menu-photo--genre {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 60%;
  border-radius: 10px;
  margin-block-end: 8px;
}


/* --- のれんイントロのフェイルセーフ＆継ぎ目 --- */
/* main.js が落ちても（取得失敗・実行時例外・拡張機能によるブロック）幕が残らないよう、
   CSSだけで必ず消える保険。正常時は JS の hideLoader() が先に効くので発火しない。 */
/* ★★ :not(.is-hidden) は必須。CSSアニメーション由来の宣言は通常の作者宣言より
   上位のカスケード段にあるため、これが無いと keyframes の opacity:1/visibility:visible が
   .loader.is-hidden{opacity:0;visibility:hidden} に勝ち、JSの hideLoader() が効かなくなる。
   壊れるのは例外ケースではなく主要導線そのもの：
   (a) セッション内2回目以降（sessionStorage seen）＝営業時間確認の再訪
   (b) #access 等ハッシュ付き着地（GBP・LINEからの流入）
   (c) 「画面をタップでスキップ」した時
   いずれも赤いのれんが全画面に数秒居座る。is-hidden が付いた瞬間にアニメを外し、
   通常宣言（transition）に戻す。 */
.loader:not(.is-hidden) {
  animation: norenFailsafe 4s linear 1 forwards;
}

/* 二重の保険：is-hidden 側でもアニメーションを明示的に切る */
.loader.is-hidden {
  animation: none;
}

@keyframes norenFailsafe {
  0%, 88% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 幕の裏でKen Burnsを進めない。のれんが開いた瞬間から寄りが始まる（演出の因果を合わせる） */
body.is-loading .hero-bg::before,
body.is-loading .hero-bg::after {
  animation-play-state: paused;
}


/* PCのFV：背面に敷いた写真をぼかす層（左右の余白を黒帯にしないため）。
   .hero-bg 本体をぼかすと前面の ::before まで一緒にぼけるので、専用の層を重ねる。 */
@media (min-width: 900px) {
  .hero::after {
    content: "";
    position: absolute;
    inset: -40px; /* ぼかしで縁が薄くならないよう外へ広げる */
    z-index: -2;  /* .hero-bg(-1) より奥。前面の丼レイヤーは覆わない */
    background: url("https://prana-1.com/tsumugitei/images/fv.jpg") 42% 57% / cover no-repeat;
    filter: blur(28px) saturate(115%) brightness(0.55);
    pointer-events: none;
  }
}


/* --- 2026-08-01 追加分のホバー／フォーカス（オールスターの拡大ボタン・帯のLINEピル） --- */
@media (hover: hover) and (pointer: fine) {
  .allstar-expand:hover {
    background: #e1251b;
    color: var(--color-white);
  }

  .day8-link:hover {
    background: #fff5f4;
  }
}

.allstar-expand,
.day8-link {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.allstar-expand:focus-visible,
.day8-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.allstar-expand:focus-visible {
  outline-color: #e1251b;
}