/* =========================================
   7fukujin - Base / Foundation CSS
   ========================================= */

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}
img, picture, video {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---- Variables ---- */
:root {
  /* Colors */
  --color-black: #1a1818;   /* 黒帯ベース色 */
  --color-accent: #fdd23b;  /* 黄色ライン */
  --color-bg: #fcfcfb;      /* メインコンテンツ背景 */
  --color-text: #1a1818;

  /* Layout（すべて1920px基準。remなので下のhtml{font-size}に連動して縮小されます） */
  --design-width: 1920px;   /* 全体フレームの上限幅(これだけpx固定) */
  --band-width: 24rem;      /* 黒帯の幅(片側) 240px相当 */
  --line-width: 0.6rem;     /* 黄色ラインの太さ 6px相当 */
  --content-width: 144rem;  /* 白コンテンツエリア幅 1440px相当 */
  --bp-sp: 767px;
}

/* ---- 1920px基準のスケーリング(767pxまで比例縮小、それ以下はSP側で別途固定) ---- */
html {
  font-size: clamp(1px, 0.5208vw, 10px); /* 1920px時=10px、767pxまで比例縮小 */
}

@media (max-width: 767px) {
  html {
    font-size: 10px; /* SP基準値。SPデザインを詰めたらここを調整 */
  }
}

body {
  font-size: 1.6rem; /* 16px相当 */
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* 1920pxを超えた分の余白にも黒帯パターンを敷き詰める */
  background-color: var(--color-black);
  background-image: url("../images/band-pattern-tile.png");
  background-repeat: repeat;
  background-size: 50px 87px;
}

/* ---- ページ全体の枠(黄色ライン+白コンテンツエリア) ----
   黒帯パターンはbody側1箇所だけで敷いているので(継ぎ目防止)、
   ここでは「外側は素通し(bodyの模様が見える)、内側は白」という
   1本のグラデーションで枠を表現する ---- */
.l-wrapper {
  position: relative;
  max-width: var(--design-width);
  margin-inline: auto;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-accent) var(--band-width),
    var(--color-accent) calc(var(--band-width) + var(--line-width)),
    var(--color-bg) calc(var(--band-width) + var(--line-width)),
    var(--color-bg) calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
}

/* フルスクリーンセクション：黒帯パターンの上に乗って画面幅いっぱいに広がる */
.is-full {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 通常セクション：白コンテンツエリア幅(1440px相当)に収める */
.l-section {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* =========================================
   FV（ファーストビュー動画）
   ========================================= */
.p-fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 800; /* 画面の高さ(vh)ではなく横幅に対する固定比率に変更 */
  overflow: hidden;
}

@media (max-width: 767px) {
  .p-fv {
    aspect-ratio: 3 / 4; /* SP用の縦動画に合わせた比率(推奨素材サイズ 1080×1440px) */
  }
}

.p-fv__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-fv__video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-fv__catch {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  /* キャッチコピーのレイアウトは追って調整 */
}

/* =========================================
   こだわり（p-concept）
   ========================================= */
.p-concept {
  margin-top: 10rem; /* FVとの間を+100px分広げる */
  padding-block: 8rem;
}

.p-concept__intro {
  display: flex; /* DOM順(本文→区切り線→見出し)のまま通常のrowで正しい並びになる */
  align-items: flex-start; /* 見出し・区切り線・本文の上端をすべて揃える */
  gap: 9rem; /* PDF実測: 本文とタイトルの間の余白(筆マークの逃げ場)がもっと広い */
  width: fit-content; /* 中身の幅だけ確保する(全幅に広がらないように) */
  margin-inline: auto; /* 右端固定ではなく左右にゆとりを持たせて中央寄りに配置 */
  margin-bottom: 10rem; /* 100px相当。rem指定なので画面幅に応じて可変 */
}

.p-concept__heading {
  position: relative;
}

/* 筆マーク背景: h2本体ではなくheadingの子要素(span)として独立させる。
   h2の実幅(縦書き列の幅=約18rem)にbackground-sizeが収まりきらず
   右端しか見えない(見切れる)問題を回避するため、幅に縛られない
   絶対配置の別レイヤーとして448px相当の実寸で描画する */
.p-concept__brush {
  display: block;
  position: absolute;
  top: -5rem; /* 見出しテキストのpadding-topを廃止した分、相対位置を維持するため上に補正 */
  left: -6rem; /* PDF実測: 区切り線の少し右から筆マークが始まる */
  width: 44rem;
  aspect-ratio: 874 / 792;
  background-image: url("../images/concept-brush.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  z-index: 0;
  pointer-events: none;
}

.p-concept__label {
  writing-mode: vertical-rl;
  position: absolute;
  top: 0; /* 見出し・区切り線・本文と上揃え */
  right: -4.3rem; /* 少し右へ移動 */
  z-index: 2;
  background-color: var(--color-black);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.1em;
  padding: 1.3rem 0.6rem; /* 上下+5px */
}

.p-concept__title {
  position: relative; /* ::before(筆マーク)より手前に描画する */
  z-index: 1;
  writing-mode: vertical-rl;
  font-size: 6rem; /* PDF実測ベース(仮名サイズ) */
  font-weight: 700;
  line-height: 1.15;
  font-family: 'Shippori Mincho', serif;
  /* 筆マーク背景は::beforeとして完全に独立させたのでpadding-topは不要
     (こだわりラベル・見出し・区切り線・本文をすべて上揃えにするため) */

  /* 見出しだけ: ぼかし+拡大 → シャープ+等倍 にスクロールインする演出 */
  filter: blur(18px);
  transform: scale(1.25);
  opacity: 0;
  transition:
    filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s ease-out;
}

.p-concept__title.is-inview {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-concept__title {
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.p-concept__title-large {
  font-size: 1.3em; /* PDF実測: 漢字だけ約1.3倍のサイズ */
}

.p-concept__divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--color-black);
}

.p-concept__text {
  writing-mode: vertical-rl;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4;
  /* <br>で改行位置を明示指定しているのでheightは不要(内容に応じて自然な高さになる) */
}

.p-concept__row {
  display: flex;
  align-items: center; /* 見出し+罫線+小見出し+テキストの塊を画像の高さに対して中央配置 */
  gap: 0; /* 画像と罫線を密着させる(行間の隙間はテキスト側のpadding-leftで作る) */
  max-width: 120rem; /* 1200px */
  margin-inline: auto;
  margin-top: 0; /* 上のブロックにくっつける */

  /* 下から上へフワッと出るディゾルブ(main.jsでスクロールインしたらis-inviewを付与) */
  opacity: 0;
  transform: translateY(4rem);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-concept__row.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .p-concept__row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.p-concept__row--reverse {
  flex-direction: row-reverse;
}

.p-concept__photo {
  flex: 0 0 60rem; /* 600px */
}

.p-concept__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-concept__col {
  flex: 0 0 60rem; /* 600px */
  padding-top: 1rem;
}

.p-concept__subtitle {
  font-family: 'Shippori Mincho', serif; /* A1明朝の代替 */
  font-size: 4.6rem; /* 46px */
  font-weight: 700;
  padding-bottom: 1.2rem;
  padding-left: 4rem; /* PC: 写真とテキストの隙間を拡大。border-boxなのでborder-bottom(罫線)の幅・位置には影響しない */
  border-bottom: 1px solid var(--color-black); /* 罫線の幅はp-concept__colの幅(600px)のまま、画像に密着 */
  margin-bottom: 2rem;
}

.p-concept__catch {
  font-size: 3.6rem; /* 36px */
  font-weight: 700;
  padding-left: 4rem; /* PC: 見出しと揃えて隙間を拡大 */
  margin-bottom: 1.6rem;
}

.p-concept__desc p {
  font-size: 2rem; /* 20px */
  line-height: 1.9;
  padding-left: 4rem; /* PC: 見出しと揃えて隙間を拡大 */
  margin-bottom: 1.2rem;
}

/* 下段(地域のために)は写真が右側にあるため、テキストは逆に左へ寄せて隙間を作る。
   罫線(border-bottom)はp-concept__colの幅のまま変わらない */
.p-concept__row--text-left .p-concept__subtitle,
.p-concept__row--text-left .p-concept__catch,
.p-concept__row--text-left .p-concept__desc p {
  padding-left: 0;
  padding-right: 4rem;
}

@media (max-width: 767px) {
  .p-concept {
    margin-top: 4rem; /* SPでは100px相当だと広すぎるため縮小 */
    padding-block: 4rem 2rem;
  }

  .p-concept__intro {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 2.4rem;
    margin-bottom: 6rem;
  }

  .p-concept__heading {
    order: -1; /* 縦書きレイアウトではDOM順=本文→見出しだが、SPでは見出しを先頭に見せる */
    width: 100%;
  }

  .p-concept__brush {
    top: -1.6rem;
    left: -1rem;
    width: 22rem;
  }

  .p-concept__label {
    writing-mode: horizontal-tb;
    position: relative; /* staticだとz-indexが効かず筆マークの下に隠れるため変更 */
    z-index: 2;
    display: inline-block;
    margin-bottom: 1.6rem;
    padding: 0.6rem 1.8rem; /* 高さを抑えつつ横の余白を増やす */
  }

  .p-concept__title {
    writing-mode: horizontal-tb;
    font-size: 3.2rem;
  }

  .p-concept__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }

  .p-concept__text {
    writing-mode: horizontal-tb;
    font-size: 1.5rem;
    line-height: 1.9;
  }

  .p-concept__row {
    flex-direction: column;
    align-items: stretch;
    gap: 2.4rem;
    max-width: 100%;
    margin-bottom: 6rem;
  }

  .p-concept__row:last-child {
    margin-bottom: 0;
  }

  .p-concept__photo {
    order: -1; /* 「地域のために」の行はDOM順がテキスト→写真だが、SPでは写真を必ず先に見せる */
    flex: 1 1 auto;
    width: 100%;
  }

  .p-concept__col {
    flex: 1 1 auto;
    width: 100%;
    padding-top: 0;
  }

  .p-concept__subtitle {
    font-size: 2.6rem;
    padding-left: 0.5em; /* SPは元の余白のまま(PC用の拡大は適用しない) */
    margin-bottom: 1.6rem;
  }

  .p-concept__catch {
    font-size: 2rem;
    padding-left: 0.5em;
    margin-bottom: 1.2rem;
  }

  .p-concept__desc p {
    font-size: 1.5rem;
    line-height: 1.8;
    padding-left: 0.5em;
  }

  .p-concept__row--text-left .p-concept__subtitle,
  .p-concept__row--text-left .p-concept__catch,
  .p-concept__row--text-left .p-concept__desc p {
    padding-right: 0;
    padding-left: 0.5em;
  }
}

/* ---- SP(767px以下)：帯は5%幅で表示し、コンテンツは内側の白背景に収める ---- */
@media (max-width: 767px) {
  :root {
    --band-width: 5%; /* PCは24rem固定だが、SPは画面幅に対する比率(5%)でバランスを取る */
  }
  .l-section {
    max-width: 100%;
    padding-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
  }
}

/* =========================================
   Header（固定ヘッダー / FV通過で色が変わる）
   ========================================= */
.p-siteHeader {
  width: 100%;
  z-index: 100;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* 通常フローに配置。追従させない。スクロールすると自然に画面外へ。
   スクロール後に出てくる.p-siteHeader--fixedと同じ黄色に統一 */
.p-siteHeader--top {
  position: relative;
  background-color: #fdda78; /* 画像の地色に合わせたフォールバック(黄色) */
  background-image: url("../images/header-pattern-yellow.webp");
}

/* 黄色：常時position:fixedで確保しておき、透明度だけ切り替える(レイアウトのガタつき防止) */
.p-siteHeader--fixed {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fdda78; /* 画像の地色に合わせたフォールバック(黄色) */
  background-image: url("../images/header-pattern-yellow.webp");
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.p-siteHeader--fixed.is-scrolled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.p-siteHeader__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.4rem;
  padding: 1.2rem 2.4rem;
}

.p-siteHeader__logo a {
  display: block;
}

.p-siteHeader__logo-img {
  display: block;
  width: 18.8rem; /* PDF実測: design 1920px時で約188px幅 */
  height: auto;
}

.p-siteHeader__nav {
  margin-left: 4rem;
}

.p-siteHeader__nav-list {
  display: flex;
  gap: 0.8rem;
}

.p-siteHeader__nav-list a {
  display: block;
  padding: 0.8rem 1.6rem;
  background-color: var(--color-black);
  color: #fff;
  font-weight: 700;
  font-size: 2.4rem; /* 指定:24px */
  font-family: 'Shippori Mincho', serif;
}

.p-siteHeader__sub {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.p-siteHeader__tel {
  font-weight: 700;
  font-size: 2.4rem; /* 指定:最大24px */
  white-space: nowrap;
}

.p-siteHeader__shop {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.p-siteHeader__shop-img {
  display: block;
  width: 30rem; /* 実画像は2倍書き出し(600x150) → 表示は半分の300px相当 */
  height: auto;
}

.p-siteHeader__sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-siteHeader__sns-icon {
  width: 4rem;
  height: 4rem;
  display: block;
}

/* ---- ハンバーガーメニュー（SPのみ表示） ---- */
.p-siteHeader__menuBtn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 4rem;
  height: 4rem;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ラーメンアイコン(icon-menu.png, 96x96)。表示は40x40 */
.p-siteHeader__menuBtn-icon {
  display: block;
  width: 4rem;
  height: 4rem;
}

/* 開いている間はアイコンを隠し、CSS描画の×に切り替える(ラーメン画像だとモーフィングできないため) */
.p-siteHeader__menuBtn-close {
  display: none;
  position: relative;
  width: 2.8rem;
  height: 2.8rem;
}

.p-siteHeader__menuBtn-close::before,
.p-siteHeader__menuBtn-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
}

.p-siteHeader__menuBtn-close::before {
  transform: rotate(45deg);
}

.p-siteHeader__menuBtn-close::after {
  transform: rotate(-45deg);
}

.p-siteHeader__menuBtn[aria-expanded="true"] .p-siteHeader__menuBtn-icon {
  display: none;
}

.p-siteHeader__menuBtn[aria-expanded="true"] .p-siteHeader__menuBtn-close {
  display: block;
}

/* PCでは.p-siteHeader__panelを透過(display:contents)させ、
   中のnavとsubを従来通り.p-siteHeader__innerの直接の子として扱う */
.p-siteHeader__panel {
  display: contents;
}

/* SP専用のパネル内ロゴ見出し。PCではdisplay:contentsで透過するpanelの中に
   あるためdisplay:noneで明示的に隠さないとinnerの直接の子として漏れてしまう */
.p-siteHeader__panel-head {
  display: none;
}

.p-siteHeader__overlay {
  display: none;
}

@media (max-width: 767px) {
  .p-siteHeader__inner {
    padding: 0.5rem 1.6rem; /* ヘッダー高さ目安50px(padding5px+ボタン40px+padding5px) */
  }

  .p-siteHeader__logo-img {
    width: 6rem; /* ヘッダーの高さに合わせて縮小 */
  }

  .p-siteHeader__panel-head {
    display: block;
    margin-bottom: 2.4rem; /* ホームなどのナビを閉じる×ボタンの高さ分、下にずらす */
  }

  .p-siteHeader__panel-logo {
    display: block;
    width: 8rem;
    height: auto;
  }

  .p-siteHeader {
    z-index: 250; /* overlay(z-index:150)より必ず手前に出し、ヘッダー全体(ロゴ・ボタン・パネル)が暗くならないようにする */
  }

  .p-siteHeader__menuBtn {
    display: flex;
    z-index: 210; /* パネル(z-index:200)より手前に出し、開いている間も×ボタンとして機能させる */
  }

  /* SPではnav+subをまとめて右からスライドインするドロワーパネルにする */
  .p-siteHeader__panel {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 32rem;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: #fff; /* パターン画像読み込み前のフォールバック */
    padding: 8rem 3.2rem 4rem;
    transition: right 0.35s ease;
    z-index: 200;
  }

  /* パネルの背景は、開いた時点のヘッダーと同じパターンを敷いて統一感を出す(現在は両方黄色) */
  .p-siteHeader--top .p-siteHeader__panel {
    background-color: #fdda78;
    background-image: url("../images/header-pattern-yellow.webp");
    background-repeat: repeat;
    background-size: auto 8.6rem;
  }

  .p-siteHeader--fixed .p-siteHeader__panel {
    background-color: #fdda78;
    background-image: url("../images/header-pattern-yellow.webp");
    background-repeat: repeat;
    background-size: auto 8.6rem;
  }

  body.is-menu-open .p-siteHeader__panel {
    right: 0;
  }

  body.is-menu-open {
    overflow: hidden;
  }

  .p-siteHeader__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
    z-index: 150;
  }

  body.is-menu-open .p-siteHeader__overlay {
    opacity: 1;
    visibility: visible;
  }

  .p-siteHeader__nav {
    margin-left: 0;
  }

  .p-siteHeader__nav-list {
    flex-direction: column;
    gap: 1.2rem;
  }

  .p-siteHeader__nav-list a {
    display: block;
    text-align: center;
    font-size: 1.8rem;
  }

  .p-siteHeader__sub {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    margin-top: 3.2rem;
    gap: 2rem;
  }

  .p-siteHeader__tel {
    font-size: 2rem;
  }

  .p-siteHeader__shop-img {
    width: 22rem;
  }

  .p-siteHeader__sns-icon {
    width: 3.2rem;
    height: 3.2rem;
  }
}

/* =========================================
   Footer
   ========================================= */
.l-footer {
  background-color: transparent;
  /* l-wrapperと同じくデザイン上限幅で中央寄せしないと、l-wrapperより横幅の
     広いモニターで黄色帯が画面端まで広がって見えてしまう（黒帯が消えて見える）ため */
  max-width: var(--design-width);
  margin-inline: auto;
}

.l-footer__band--info {
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-accent) var(--band-width),
    var(--color-accent) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
}

.l-footer__info-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3.2rem;
  flex-wrap: wrap;
  padding-block: 4rem;
}

.l-footer__shop-info {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.l-footer__logo {
  display: block;
  flex-shrink: 0;
}

.l-footer__logo-img {
  display: block;
  width: 14rem;
  height: auto;
}

.l-footer__address {
  font-style: normal;
  line-height: 1.8;
  font-weight: 500;
}

.l-footer__nav nav ul {
  display: flex;
  gap: 1.2rem;
}

.l-footer__nav nav ul a,
.l-footer__nav a.l-footer__privacy {
  font-size: 1.6rem;
}

.l-footer__privacy {
  display: block;
  margin-top: 1.2rem;
}

.l-footer__copyright {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-bg) var(--band-width),
    var(--color-bg) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
  text-align: center;
  padding-block: 2.4rem;
  font-size: 1.6rem;
  color: #888;
}

@media (max-width: 767px) {
  .l-footer__info-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
    padding-block: 3.2rem;
  }

  .l-footer__shop-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }

  .l-footer__logo-img {
    width: 11rem;
  }

  .l-footer__nav {
    width: 100%;
  }

  .l-footer__nav nav ul {
    flex-wrap: wrap;
    gap: 1.6rem;
  }
}

/* =========================================
   固定ヘッダー分のアンカーオフセット
   （#concept, #menu, #access に飛んだ時、見出しがヘッダーに隠れないように）
   ========================================= */
#concept,
#menu,
#access {
  scroll-margin-top: 8rem; /* ヘッダーの実高さに合わせて後で調整 */
}

@media (max-width: 767px) {
  #concept,
  #menu,
  #access {
    scroll-margin-top: 6rem; /* SPはヘッダーが1行のみで低くなるため調整 */
  }
}

/* =========================================
   オンラインショップ + ふるさと納税
   ========================================= */
.p-shop {
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-accent) var(--band-width),
    var(--color-accent) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
  text-align: center;
  padding-block: 6rem;
  overflow: hidden;
}

.p-shop__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-shop__title {
  display: block;
  width: 120.4rem;
  max-width: 100%;
  height: auto;
}

.p-shop__lead {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--color-black);
}

.p-shop__slider {
  overflow: hidden;
  width: 100%;
  margin-top: 6rem;
}

.p-shop__slider-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: p-shop-slide 45s linear infinite;
}

.p-shop__slider-track img {
  display: block;
  flex: 0 0 auto;
  width: 60rem;
  height: 40rem;
  object-fit: cover;
}

@keyframes p-shop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.p-shop__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6rem;
}

.p-shop__furusato-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 4rem;
  font-size: 1.8rem;
}

.p-shop__furusato-text {
  font-family: 'TsukuARdGothic-Bold', 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--color-black);
}

.p-shop__furusato-deco {
  font-size: 2rem;
  color: #6e6250;
}

.p-shop__furusato-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.2rem;
  margin-top: 2rem;
}

.p-shop__furusato-logos img {
  display: block;
  height: auto;
}

.p-shop__furusato-logos li:nth-child(1) img {
  width: 22.1rem;
}

.p-shop__furusato-logos li:nth-child(2) img {
  width: 21.7rem;
}

@media (max-width: 767px) {
  .p-shop {
    padding-block: 5rem;
  }

  .p-shop__title {
    width: 90%;
    max-width: 34rem;
  }

  .p-shop__lead {
    padding-inline: 2rem;
    font-size: 1.4rem;
  }

  .p-shop__slider {
    margin-top: 4rem;
  }

  /* スライド画像の高さを少し小さくする */
  .p-shop__slider-track img {
    width: 32rem;
    height: 21.4rem;
  }

  .p-shop__foot {
    margin-top: 4rem;
  }

  .p-shop__furusato-lead {
    font-size: 1.5rem;
    text-align: center;
  }

  .p-shop__furusato-logos {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .p-shop__furusato-logos li:nth-child(1) img,
  .p-shop__furusato-logos li:nth-child(2) img {
    width: 16rem;
  }
}

/* =========================================
   SNSフィード（Instagram・プラグイン側で描画）
   ========================================= */
.p-sns {
  padding-block: 6rem;
  text-align: center;
}

.p-sns__label {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.p-sns__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-black);
  margin-bottom: 2.4rem;
}

.p-sns__rule {
  display: block;
  width: 6rem;
  height: 2px;
  margin: 0 auto 4rem;
  background-color: var(--color-accent);
}

.p-sns__feed {
  max-width: 120rem;
  margin-inline: auto;
}

.p-sns__follow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 4rem;
  padding: 1.4rem 3.6rem;
  border: 2px solid var(--color-black);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-black);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.p-sns__follow:hover {
  background-color: var(--color-black);
  color: #fff;
}

@media (max-width: 767px) {
  .p-sns {
    padding-block: 5rem;
  }

  .p-sns__title {
    font-size: 2.4rem;
  }

  .p-sns__feed {
    max-width: 100%;
  }
}

/* =========================================
   手仕事：笑顔を支える、妥協なき手仕事
   横幅いっぱいの黒背景セクション。ピン留めスクロールで
   背景の白黒写真の上に 麺 → スープ → 具材 の順に
   ボケ→シャープで出現させる(main.jsで制御)
   ========================================= */
.p-craft {
  --craft-width: 192rem; /* 背景写真(craft-bg.webp / 1920px設計・2倍書き出し)の表示幅。
                             .p-craft__list のmax-widthと共有し、3分割された背景の中心と
                             麺・スープ・具材の列の中心を一致させる */
  background-color: var(--color-black);
  color: #fff;
}

.p-craft__pin {
  position: relative;
  height: 300vh; /* 3項目分のスクロール距離。ここでピン留めする長さを調整 */
}

.p-craft__pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-image: url("../images/craft-bg.webp");
  background-repeat: no-repeat;
  background-size: var(--craft-width) auto; /* 2倍書き出し画像(3840px)。1920px幅を基準にフィットさせ、それ以上の画面では拡大しない */
  background-position: center;
}

.p-craft__head {
  text-align: center;
  margin-bottom: 6rem;
}

.p-craft__heading-img {
  width: 87rem; /* 72.6remをさらに1.2倍 */
  height: auto;
  margin-inline: auto; /* imgはdisplay:blockになるため、親.p-craft__headのtext-align:centerだけでは中央寄せされない */
}

.p-craft__list {
  display: flex;
  width: 100%; /* margin-inline:autoだけだとflexアイテムとしてshrink-to-fitしてしまうため明示 */
  max-width: var(--craft-width); /* 背景の実際の表示幅に合わせる(content-widthだと背景の3分割と中心がズレる) */
  margin-inline: auto;
}

.p-craft__item {
  flex: 1 1 0;
  padding-inline: 4rem;
  text-align: center;

  /* ボケ→シャープで出現。一度出たら戻らない(main.jsでis-inviewを付与) */
  /* scaleの数値は「出現アニメーション用の拡大(1.08/1)」×「表示サイズを1.1倍にする分」 */
  filter: blur(18px);
  opacity: 0;
  transform: scale(1.188); /* 1.08 * 1.1 */
  transition:
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s ease-out;
}

.p-craft__item.is-inview {
  filter: blur(0);
  opacity: 1;
  transform: scale(1.1); /* 表示サイズを1.1倍に */
}

.p-craft__label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 3.6rem;
  color: var(--color-accent);
  margin-bottom: 2.4rem;
}

.p-craft__photo-wrap {
  position: relative;
  width: min(40rem, 100%); /* 基本は400px、アイテム幅がそれより狭い場合のみ追従(フェイルセーフ) */
  height: clamp(15rem, 26vh, 25rem); /* 高さを画面の"高さ"基準にする(Option B)。
    .p-craft__pin-innerがheight:100vhで固定されているため、写真の高さを画面幅ではなく
    画面の高さに連動させることで、幅だけ狭くなった時に上下の余白が広がるのを抑える */
  margin-inline: auto;
}

/* .p-craft__tag / .p-craft__tag-line(縦書きコピータグ)は廃止。
   テキストは craft-noodle.webp / craft-soup.webp / craft-ingredient.webp 側に
   画像として焼き込む方式に変更したため、CSSでの文字配置は不要になった */

.p-craft__photo {
  width: 100%;
  height: 100%;
  overflow: hidden; /* wrap側ではなくこちらに付ける(タグがwrapの外にはみ出す演出を維持するため) */
}

.p-craft__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 高さ基準のボックスに合わせて、はみ出た分を自然にトリミング */
  object-position: center top; /* テキストを焼き込んだタグが画像上部にあるため、
    トリミングは下側に寄せて上端が切れないようにする */
}

.p-craft__catch {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 2.4rem;
}

.p-craft__desc {
  max-width: 40rem;
  margin-inline: auto;
}

.p-craft__desc p {
  font-size: 1.6rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1.2rem;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .p-craft__item {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* このセクションだけ、他より早い1440pxでスマホ同様の縦積みレイアウトに切り替える。
   1441px以上でのみピン留め+3列(PC版)の演出を使う。
   (768〜1440pxの中間帯で、幅が狭まるほど写真の縦横比が崩れて上下の余白が
   目立って見えたための対応。他セクションのSP切り替え(767px)には影響しない)

   注意: htmlのfont-sizeは`clamp(1px, 0.5208vw, 10px)`で1920px→767pxの間ずっと
   連動して縮み続け、767px以下でだけ固定10pxに戻る(ファイル冒頭を参照)。
   このブロックは768〜1440pxもカバーするため、remのままだと文字やサイズが
   本来のSPデザインより小さく縮んでしまう。そのため、このブロック内の
   フォントサイズ・幅などはremではなくpx固定で指定し、767px以下の見た目
   (=既存のSPデザインで確認済みのサイズ)をこの帯域でもそのまま再現する。 */
@media (max-width: 1440px) {
  .p-craft__pin {
    height: auto;
  }
  .p-craft__pin-inner {
    position: static;
    height: auto;
    padding-block: 60px 0;
    background-image: none; /* SPではcraft-bg.webp(横3枚合成)は使わず、アイテムごとに縦長の背景を持たせる */
  }
  .p-craft__head {
    margin-bottom: 40px;
  }
  .p-craft__heading-img {
    width: 50%; /* 画面幅のおよそ半分になるように。狭いスマホでは小さすぎ、1440px近くでは大きすぎないよう上下限を設定 */
    min-width: 240px;
    max-width: 600px;
  }
  .p-craft__list {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  /* 麺/スープ/具材をそれぞれ縦長の背景写真つきカードにする。
     画像はSP専用に縦3枚を別途用意（下記コメント参照） */
  .p-craft__item {
    position: relative;
    flex: none;
    width: 100%;
    padding: 60px 40px; /* --band-width(PCは24rem固定/SPは5%)に依存しない固定値。
      768px前後の実測でも旧来の5%版とほぼ同じ余白になる */
    border-left: none !important;
    background-color: var(--color-black); /* 画像未投入時のフォールバック */
    background-repeat: no-repeat;
    background-size: cover; /* 画像側の装飾テキストを廃止し無地の写真に統一したため、
      トリミングされても問題ない。テキスト量でカードがaspect-ratioの目安より縦に伸びても
      coverが隙間なく埋めてくれる(以前はcoverだと装飾テキストが切れる問題があったが、
      画像に文字を焼き込まない方式に変更したことで解消) */
    background-position: center;
    aspect-ratio: 8 / 3; /* 高さがテキスト量まかせで、画面幅によって縦横比がバラバラになっていたため、
      基準の縦横比を指定。height:autoのままなので、テキストが長くて収まらない場合は
      自動的にこの比率より縦に伸びる(はみ出し防止) */

    /* ピン留めはやめ、スクロールで1枚ずつフワッと出現させる(main.jsでis-inview付与) */
    filter: none;
    transform: none;
    opacity: 0;
    transition: opacity 1.1s ease-out;
  }

  .p-craft__item.is-inview {
    opacity: 1;
    transform: none; /* 基本スタイル(PC用ピン留め演出)のscale(1.1)がis-inview付与時に残ってしまうため明示的に打ち消す */
  }

  @media (prefers-reduced-motion: reduce) {
    .p-craft__item {
      opacity: 1;
    }
  }

  /* SP用背景（横長）: 専用素材が届くまでの暫定として、既存のcraft-noodle/soup/ingredient.webp
     （PC版photo-wrapで使用中の横長写真）をcoverで敷いています。
     専用素材（推奨8:3(1600×600px相当)、既存の1600×900px画像もcoverで自動トリミングされるため流用可）が届き次第、下記urlをcraft-bg-sp-*.webpに差し替えてください */
  .p-craft__item--noodle {
    background-image: url("../images/craft-bg-sp-noodle.webp");
  }
  .p-craft__item--soup {
    background-image: url("../images/craft-bg-sp-soup.webp");
  }
  .p-craft__item--ingredient {
    background-image: url("../images/craft-bg-sp-ingredient.webp");
  }

  /* 可読性のため写真の上に薄暗いスクリムを敷く */
  .p-craft__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
  }

  .p-craft__label,
  .p-craft__photo-wrap,
  .p-craft__catch,
  .p-craft__desc {
    position: relative;
    z-index: 1;
  }

  /* 個別の小さい写真(photo-wrap)は背景に統合したのでSPでは非表示。
     麺/スープ/具材の説明文だけを写真の中央に重ねる */
  .p-craft__photo-wrap {
    display: none;
  }

  .p-craft__label {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .p-craft__catch {
    margin-top: 0;
    font-size: 18px;
  }

  .p-craft__desc {
    max-width: 480px; /* 768〜1440pxは1枚のカードに使える横幅が広いので、
      本来のSP幅(320px)より広げて、文字を大きくしても窮屈にならないようにする */
  }

  .p-craft__desc p {
    font-size: 18px; /* 視認性のため、SP基準(16px)より少し大きめに */
  }
}

/* =========================================
   お品書き：みんなを笑顔にする一杯
   （※PDF実測: アセット1.pdf ベース。雲・写真・筆マークは仮素材/構造のみ、
     餃子・ラーメン一覧とボタンは既存のままなので今回は未着手）
   ========================================= */
.p-menu {
  /* is-fullを外し、自前の背景も持たない。l-wrapperの帯グラデーション
     (黒帯パターン+黄ライン+白コンテンツ)をそのまま透過させて見せる */
  position: relative;
  padding-block: 12rem;
}

.p-menu__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-width); /* 他セクションと同じ白コンテンツ幅(1440px相当) */
  margin-inline: auto;
  padding-inline: 2rem;
}

@media (max-width: 767px) {
  .p-menu__inner {
    padding-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
  }
}

/* ---- 雲（背景装飾）
   このセクションが画面内にある間だけ表示(main.jsでis-visibleを付与)。
   position:fixedで画面に張り付いたまま、上をメニュー本文が流れていく。 ---- */
.p-menu__clouds {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.p-menu__clouds.is-visible {
  opacity: 1;
}

.p-menu__cloud {
  position: absolute;
  display: block;
  height: auto;
  animation: p-menu-float 10s ease-in-out infinite alternate;
}

.p-menu__cloud--1 {
  top: 15%; /* 8%だと固定ヘッダーの裏に隠れてしまうため下へ */
  left: 16%;
  width: 60rem;
  animation-duration: 7s;
}

.p-menu__cloud--2 {
  top: 42%;
  right: 14%;
  width: 60rem;
  animation-duration: 8s;
  animation-delay: -3s;
}

.p-menu__cloud--3 {
  bottom: 8%;
  left: 18%;
  width: 50rem;
  animation-duration: 7.5s;
  animation-delay: -4s;
}

@keyframes p-menu-float {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(3rem, -4.5rem); /* 動きが分かりにくかったため振れ幅を拡大(暫定) */
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-menu__cloud {
    animation: none;
  }
}

/* ---- 見出しブロック(お品書き)：こだわり(p-concept)の縦書き構成を流用 ---- */
.p-menu__intro {
  display: flex;
  align-items: flex-start;
  gap: 6rem; /* PDF実測: こだわりの見出し(9rem)より詰まった余白 */
  width: fit-content;
  margin-left: auto; /* こだわり(p-concept__intro)と同じ右寄りの位置に揃える */
  margin-right: 23.9rem;
  margin-bottom: 0; /* PCのみ0に(SPは下記media queryで独自にmargin指定) */
}

.p-menu__heading {
  position: relative;
}

.p-menu__brush {
  display: block;
  position: absolute;
  top: -5rem;
  left: -6rem;
  width: 44rem; /* PDF実測: こだわりの筆マークとほぼ同寸のためconcept-brush.pngを同サイズ流用 */
  aspect-ratio: 874 / 792;
  background-image: url("../images/concept-brush.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  z-index: 0;
  pointer-events: none;
}

.p-menu__label {
  writing-mode: vertical-rl;
  position: absolute;
  top: 0;
  right: -4.3rem;
  z-index: 2;
  background-color: var(--color-black);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.1em;
  padding: 1.3rem 0.6rem;
}

.p-menu__title {
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  font-size: 6.4rem; /* PDF実測ベース(仮。実素材投入後に微調整予定) */
  font-weight: 700;
  line-height: 1.15;
  font-family: 'Shippori Mincho', serif;
}

.p-menu__title-large {
  font-size: 1.3em;
}

.p-menu__divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--color-black);
}

.p-menu__text {
  writing-mode: vertical-rl;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4;
}

/* ---- 看板メニュー・メニュー1品ずつのブロック ---- */
.p-menu__feature {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 14rem;
}

.p-menu__feature-photo {
  flex: none;
}

/* 麺+スープを1枚に合成した写真を使う構成に変更(以前のmain/sub 2枚重ねは廃止) */
.p-menu__feature-photo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 7福神つけ麺(看板メニュー): PDF実測(麺+スープ合成後の外形目安)。
   看板メニューだけ写真を左の帯側にはみ出させて大きく見せる
   (こだわりエリア同様の左右帯の上にかかるイメージ。実測なしの暫定値) */
.p-menu__feature--tsukemen .p-menu__feature-photo {
  width: 110.5rem;
  margin-left: -20rem;
}

/* つけ麺しお: PDF実測(看板メニューよりひと回り小さく、左右反転) */
.p-menu__feature--shio {
  align-items: flex-start; /* テキストを写真に対して上寄りに */
  gap: 2rem; /* 画像側にテキストを近づける */
}

.p-menu__feature--shio .p-menu__feature-photo {
  width: 88.6rem;
}

.p-menu__feature--shio .p-menu__feature-col {
  flex: 0 1 auto; /* 幅いっぱいに伸びず、内容幅のまま */
  margin-left: auto; /* 写真側(右)に寄せる */
}

.p-menu__feature-col {
  flex: 1 1 auto;
  padding-top: 1rem;
}

.p-menu__feature-catch {
  position: relative;
  z-index: 0; /* 自身をスタッキングコンテキスト化し、背面の筆マークを確実にテキストの下に敷く */
  font-family: 'Shippori Mincho', serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.9;
  padding-left: 0.2em;
  margin-bottom: 1.6rem;
}

.p-menu__feature-catch-brush {
  display: block;
  position: absolute;
  left: -3rem;
  top: -2.9rem;
  width: 10.3rem;
  aspect-ratio: 874 / 792;
  background-image: url("../images/concept-brush.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  z-index: -1; /* テキストより背面に。親(.p-menu__feature-catch)のz-index:0とセットで機能 */
  pointer-events: none;
}

.p-menu__feature-title {
  position: relative;
  z-index: 1;
  font-family: 'Shippori Mincho', serif;
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.6rem;
}

.p-menu__feature-desc {
  position: relative;
  z-index: 1;
}

.p-menu__feature-desc p {
  font-size: 2rem;
  line-height: 1.7;
}

/* ---- 餃子2種 ---- */
.p-menu__gyoza {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  max-width: 120rem; /* 1200px */
  margin-inline: auto;
  margin-bottom: 8rem;
}

.p-menu__gyoza-photo img {
  width: 100%;
  height: auto;
}

.p-menu__gyoza-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

.p-menu__gyoza-desc {
  font-size: 1.6rem;
  line-height: 1.8;
}

/* ---- ラーメン3種 ---- */
.p-menu__ramen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 120rem; /* 1200px */
  margin-inline: auto;
  margin-bottom: 10rem;
}

.p-menu__ramen-photo {
  aspect-ratio: 4 / 3; /* 正方形(1:1)だと縦に間延びするため、高さ75%目安(4:3)で上下をトリミング */
  overflow: hidden;
}

.p-menu__ramen-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-menu__ramen-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-top: 1.6rem;
}

/* ---- お品書き一覧へボタン(隅付き飾り枠) ---- */
.p-menu__more {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* お品書き一覧へ／オンラインショップ ボタン: 通常画像+ホバー画像の2枚を重ねて配置し、
   ホバー時にホバー画像をふわっとクロスフェード表示する(JS不要) */
.c-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.c-btn__img {
  display: block;
  width: 61.2rem;
  height: auto;
}

.c-btn__img--hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.c-btn:hover .c-btn__img--hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .p-menu {
    padding-block: 6rem 4rem;
  }

  .p-menu__cloud {
    display: none; /* SPでは装飾の雲は非表示（パフォーマンス・見た目のスッキリさ優先） */
  }

  .p-menu__intro {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 2rem;
    margin: 0 0 5rem;
  }

  .p-menu__heading {
    order: -1;
    width: 100%;
  }

  .p-menu__brush {
    top: -1.6rem;
    left: -1rem;
    width: 20rem;
  }

  .p-menu__label {
    writing-mode: horizontal-tb;
    position: relative; /* staticだとz-indexが効かず筆マークの下に隠れるため変更 */
    z-index: 2;
    display: inline-block;
    margin-bottom: 1.2rem;
  }

  .p-menu__title {
    writing-mode: horizontal-tb;
    font-size: 3.4rem;
  }

  .p-menu__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }

  .p-menu__text {
    writing-mode: horizontal-tb;
    font-size: 1.5rem;
    line-height: 1.8;
  }

  /* 看板メニュー・つけ麺しお：帯へのはみ出しをやめて縦積みに */
  .p-menu__feature {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    margin-bottom: 8rem;
  }

  /* 看板メニュー・つけ麺しおともに、SPでは見出し・テキストを先に見せてから写真を出す */
  .p-menu__feature--tsukemen .p-menu__feature-photo {
    width: 100%;
    margin-left: 0;
    order: 1; /* DOM順は写真→テキストだが、SPではテキストを先に */
  }

  .p-menu__feature--shio {
    align-items: stretch;
    gap: 2rem;
  }

  .p-menu__feature--shio .p-menu__feature-photo {
    width: 100%;
  }

  .p-menu__feature--shio .p-menu__feature-col {
    width: 100%;
    margin-left: 0;
  }

  .p-menu__feature-catch {
    font-size: 1.7rem;
  }

  .p-menu__feature-title {
    font-size: 3.2rem;
  }

  .p-menu__feature-desc p {
    font-size: 1.6rem;
  }

  /* 餃子・ラーメンは縦積みでよい */
  .p-menu__gyoza {
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
  }

  .p-menu__ramen {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 6rem;
  }

  .c-btn__img {
    width: 100%;
    max-width: 44rem;
  }
}

/* =========================================
   店舗案内・アクセス
   （※レイアウト参考PDFなし。構造優先で暫定実装。要確認）
   ========================================= */
.p-access {
  padding-top: 10rem;
}

.p-access::before {
  content: "";
  position: absolute;
  top: 18rem;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-accent) var(--band-width),
    var(--color-accent) calc(var(--band-width) + var(--line-width)),
    #FFF9E8 calc(var(--band-width) + var(--line-width)),
    #FFF9E8 calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
  z-index: -1;
}

.p-access__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-bottom: 6rem;
  background-image: url("../images/access-bar.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: 'Shippori Mincho', serif;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-black);
}

.p-access__map {
  position: relative;
  width: 100%;
  max-width: 120rem;
  margin-inline: auto;
  aspect-ratio: 16 / 6;
  margin-bottom: 6rem;
}

.p-access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-access__body {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  max-width: 120rem;
  margin-inline: auto;
  padding-bottom: 10rem;
}

.p-access__photos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 0 0 59rem;
}

.p-access__photos img {
  display: block;
  width: 100%;
  height: auto;
}

.p-access__info {
  flex: 0 0 57rem;
  padding-top: 1rem;
}

.p-access__lead {
  margin-bottom: 3rem;
}

.p-access__lead p {
  font-size: 1.5rem;
  line-height: 2;
  margin-bottom: 1.6rem;
}

.p-access__lead p:last-child {
  margin-bottom: 0;
}

.p-access__shop-name {
  font-family: 'Shippori Mincho', serif;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-black);
}

.p-access__table {
  margin: 0;
}

.p-access__table-row {
  display: flex;
  gap: 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid #ddd;
  font-size: 1.5rem;
  line-height: 1.8;
}

.p-access__table-row dt {
  flex: 0 0 9rem;
  font-weight: 700;
}

/* 「7福神無人販売所」「7福神自動販売機」のようにラベルが長い行用 */
.p-access__table-row--wide dt {
  flex: 0 0 14rem;
}

.p-access__table-row dd {
  margin: 0;
  flex: 1 1 auto;
}

.p-access__table-row dd a {
  color: inherit;
  text-decoration: underline;
}

/* 営業日カレンダー(Simple Calendarプラグイン埋め込み) */
.p-access__calendar {
  max-width: 120rem;
  margin-inline: auto;
  padding-bottom: 10rem;
}

.p-access__calendar-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-black);
}

.p-access__calendar-embed {
  font-size: 1.5rem;
}

/* Simple Calendarのグリッドは列幅=行高になる正方形セルがデフォルトで、
   予定が1〜2行程度しかないと縦の空白がかなり大きく見えるため、
   セルの最低高さを詰めて余白を減らす（JSが都度インラインでmin-heightを
   再計算するため、!importantで上書きする） */
.p-access__calendar-embed .simcal-day > div {
  min-height: 8rem !important;
}

@media (max-width: 767px) {
  .p-access__calendar-embed .simcal-day > div {
    min-height: 9rem !important;
  }
}

/* PC表示時のみ、カレンダー内の予定テキストを20pxに拡大。
   （Simple Calendar側が .simcal-events に max(0.75rem, 0.68em) を
   指定しており標準だと小さいため上書き。スマホは現状のサイズのままでよいとのことなので
   min-width:768pxに限定し、SP側には影響させない） */
@media (min-width: 768px) {
  .p-access__calendar-embed .simcal-events,
  .p-access__calendar-embed .simcal-events-toggle {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .p-access {
    padding-top: 6rem;
  }

  .p-access::before {
    top: 9rem;
  }

  .p-access__title {
    height: 6rem;
    margin-bottom: 4rem;
    font-size: 2.2rem;
  }

  .p-access__map {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 4rem;
    margin-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
    width: auto;
  }

  .p-access__body {
    flex-direction: column;
    gap: 3.2rem;
    max-width: 100%;
    padding-bottom: 6rem;
    padding-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
  }

  .p-access__photos {
    flex-direction: row;
    flex: none;
    width: 100%;
    gap: 1.2rem;
  }

  .p-access__photos img {
    width: 50%;
  }

  .p-access__info {
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .p-access__calendar {
    max-width: 100%;
    padding-bottom: 6rem;
    padding-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
  }

  .p-access__calendar-title {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
}

/* =========================================
   共通ユーティリティ：SP専用の改行制御
   PC(縦書き)向けに調整された<br>をSPで無効化し、
   コンテナ幅に応じた自然な折り返しにする
   ========================================= */
@media (max-width: 767px) {
  br.u-br-pc {
    display: none;
  }
}

/* =========================================
   共通コンポーネント：画像クリックで拡大表示(ライトボックス)
   対象: こだわり写真・手仕事写真・お品書き写真(看板メニュー/餃子/ラーメン)・
         持ち帰りスライド・アクセス写真（js側でセレクタ指定、main.js参照）
   ========================================= */
.js-lightbox-trigger {
  cursor: zoom-in;
}

.js-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.js-lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.js-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.js-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

body.is-lightbox-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .js-lightbox-overlay {
    padding: 2rem 1.2rem;
  }

  .js-lightbox-close {
    top: 1.2rem;
    right: 1.2rem;
    width: 4rem;
    height: 4rem;
    font-size: 2.8rem;
  }
}

/* =========================================================
   お品書きページ（page-oshinagaki.php）専用スタイル
   ========================================================= */

:root {
  --osh-bg-special: #f5f5f4;  /* 01季節限定：淡いグレー */
  --osh-bg-tsukemen: #f8e2d6; /* 02つけめん：ベージュピンク */
  --osh-bg-ramen: #ece7db;    /* 03ラーメン：ベージュ */
  --osh-bg-gyoza: #f4f4f2;    /* 05餃子：淡いグレー */
  --osh-accent-text: #e8a932; /* 見出しの黄色強調文字 */
  --osh-badge: #c8102e;       /* 人気No.1などの赤丸バッジ */
}

/* ---- 帯（黒帯パターン＋黄色ライン）を保ったまま、セクションごとに
   中央コンテンツ部分の色だけを変える。.p-accessと同じ手法 ---- */
.p-oshinagaki-band {
  position: relative;
  /* isolation:isolate でこの要素だけの独立したスタッキングコンテキストを作る。
     これが無いと、::beforeの背景色(z-index:-1)がposition:relativeのl-wrapper
     (z-index:auto)の背景と同じ「面」で比較されてしまい、l-wrapperの白背景に
     隠れて見えなくなってしまう（実際に01/02/03/05すべてで色が出ていなかった）。
     isolate自体はz-indexを持たないため、雲(.p-oshinagaki__clouds, z-index:1)
     より下のまま = 雲は今まで通り背景の上に表示される。 */
  isolation: isolate;
}

.p-oshinagaki-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent var(--band-width),
    var(--color-accent) var(--band-width),
    var(--color-accent) calc(var(--band-width) + var(--line-width)),
    var(--section-bg, var(--color-bg)) calc(var(--band-width) + var(--line-width)),
    var(--section-bg, var(--color-bg)) calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width) - var(--line-width)),
    var(--color-accent) calc(100% - var(--band-width)),
    transparent calc(100% - var(--band-width)),
    transparent 100%
  );
}

/* ---- 帯の色エリアの上に重ねる、和紙調の背景画像（レイヤー構造としては一番下）。
   sfk_oshinagaki_band_style()が--section-bg-imageを設定した時だけ表示され、
   未設定の間は::beforeの単色のまま（下の帯ラインは常にこのレイヤーの外側なので隠れない） ---- */
.p-oshinagaki-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--band-width) + var(--line-width));
  right: calc(var(--band-width) + var(--line-width));
  z-index: -2;
  background-image: var(--section-bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.35; /* 和紙の質感を主張させすぎず、上に重なる透かし文字や写真の
                    視認性を保つため控えめに。単色(::before)に淡く重なるだけにする */
}

/* ---- 背景の雲（ページ全体でふわふわ。front-pageの.p-menu__cloudと同じ演出） ---- */
.p-oshinagaki__clouds {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.p-oshinagaki__cloud {
  position: absolute;
  display: block;
  height: auto;
  opacity: 0.9;
  animation: p-menu-float 10s ease-in-out infinite alternate;
}

.p-oshinagaki__cloud--1 {
  top: 12%;
  left: 14%;
  width: 55rem;
  animation-duration: 7s;
}

.p-oshinagaki__cloud--2 {
  top: 45%;
  right: 12%;
  width: 55rem;
  animation-duration: 8s;
  animation-delay: -3s;
}

.p-oshinagaki__cloud--3 {
  bottom: 15%;
  left: 20%;
  width: 46rem;
  animation-duration: 7.5s;
  animation-delay: -4s;
}

@media (prefers-reduced-motion: reduce) {
  .p-oshinagaki__cloud {
    animation: none;
  }
}

@media (max-width: 767px) {
  .p-oshinagaki__clouds {
    display: none; /* SPでは装飾の雲は非表示（パフォーマンス・見た目のスッキリさ優先。front-pageと同じ方針） */
  }
}

/* ---- セクション共通 ---- */
.p-oshinagaki__section {
  position: relative;
  padding-block: 10rem;
}

.p-oshinagaki__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 2rem;
  text-align: center;
}

.p-oshinagaki__eyebrow {
  color: var(--osh-badge);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}

.p-oshinagaki__heading {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.p-oshinagaki__accent {
  color: var(--osh-accent-text);
}

/* ---- 03ラーメン：見出しの一部だけ指定色(EEB033)にする専用クラス ---- */
.p-oshinagaki__accent-gold {
  color: #EEB033;
}

.p-oshinagaki__lead {
  font-size: 2rem;
  line-height: 1.9;
  margin-bottom: 6rem;
}

/* ---- 01季節限定：画像・見出し・本文サイズをこのセクションだけ拡大 ---- */
.p-oshinagaki__section--special .p-oshinagaki__item-title {
  font-size: 4.8rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
}

.p-oshinagaki__section--special .p-oshinagaki__item-desc {
  font-size: 2rem;
}

.p-oshinagaki__grid2--special {
  grid-template-columns: 60rem 60rem;
  justify-content: center;
  gap: 6rem;
}

/* ---- 中央固定のセクション見出しテキスト（背景の透かし文字）
   .p-craft__pinと同じ考え方：sticky要素は自分の高さを持たず(height:0)、
   セクション内をスクロールしている間だけ画面中央に留まる ---- */
.p-oshinagaki__watermark-layer {
  position: sticky;
  top: 50vh;
  height: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
  text-align: center;
}

.p-oshinagaki__watermark {
  display: inline-block;
  transform: translateY(-50%);
  font-size: clamp(6rem, 9vw, 13rem);
  font-weight: 900;
  color: rgba(0, 0, 0, 0.045);
  white-space: nowrap;
  letter-spacing: 0.05em;
  opacity: 1;
}

/* ---- 透かし文字を画像に差し替えた場合（images/にoshinagaki-watermark-*.webpを
   置くとfunctions.phpのsfk_oshinagaki_watermark()が自動でこちらに切り替える） ---- */
.p-oshinagaki__watermark-img {
  display: inline-block;
  transform: translateY(-50%);
  width: clamp(24rem, 34vw, 52rem);
  height: auto;
  opacity: 0.08; /* テキスト版と近い薄さ。素材に合わせて数値は調整可 */
}

/* ---- 透かし文字のディゾルブ出現演出（01季節限定にのみ付与。
   ページを開いた瞬間から見えていると格好悪いので、スクロールで
   セクションに入ってから薄く浮かび上がるようにする） ---- */
.p-oshinagaki__watermark-layer--dissolve > .p-oshinagaki__watermark,
.p-oshinagaki__watermark-layer--dissolve > .p-oshinagaki__watermark-img {
  transition: opacity 1.4s ease;
}

.p-oshinagaki__watermark-layer--dissolve:not(.is-inview) > .p-oshinagaki__watermark,
.p-oshinagaki__watermark-layer--dissolve:not(.is-inview) > .p-oshinagaki__watermark-img {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p-oshinagaki__watermark-layer--dissolve:not(.is-inview) > .p-oshinagaki__watermark,
  .p-oshinagaki__watermark-layer--dissolve:not(.is-inview) > .p-oshinagaki__watermark-img {
    opacity: 1;
  }
  .p-oshinagaki__watermark-layer--dissolve:not(.is-inview) > .p-oshinagaki__watermark-img {
    opacity: 0.08;
  }
}

/* ---- プレースホルダー（画像未着時のダミー表示） ---- */
.p-oshinagaki__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #e2e2e0, #e2e2e0 10px, #ececea 10px, #ececea 20px);
  color: #8a8a86;
  font-size: 2rem;
  text-align: center;
  border-radius: 0.8rem;
}

.p-oshinagaki__placeholder small {
  font-size: 2rem;
  margin-top: 0.4rem;
  word-break: break-all;
  padding-inline: 1rem;
}

/* ---- 写真まわり共通 ---- */
.p-oshinagaki__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
  cursor: zoom-in;
}

.p-oshinagaki__photo--round,
.p-oshinagaki__photo--round .p-oshinagaki__placeholder {
  width: 28rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.p-oshinagaki__photo--round img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ---- 03ラーメン：しおラーメンは別皿構成のため円形トリミングをやめ、
   透過背景の写真をそのまま自然な形で見せる ---- */
.p-oshinagaki__photo--natural,
.p-oshinagaki__photo--natural .p-oshinagaki__placeholder {
  width: 40rem;
  height: 40rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-oshinagaki__photo--natural img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

/* 03ラーメン：丸トリミングの2枚は元々28rem固定だったが、グリッドの列幅を40remに
   広げた際に合わせ忘れていたため、このセクション内だけ40remに揃える */
.p-oshinagaki__grid3 .p-oshinagaki__photo--round,
.p-oshinagaki__grid3 .p-oshinagaki__photo--round .p-oshinagaki__placeholder {
  width: 40rem;
}

/* ---- 2カラム／3カラムのアイテムグリッド ---- */
.p-oshinagaki__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem 4rem;
  text-align: left;
  margin-bottom: 4rem;
}

.p-oshinagaki__grid2--omiyage {
  grid-template-columns: 1fr 1fr;
  max-width: 100rem;
  margin-inline: auto;
  gap: 10rem;
}

/* ---- 07おみやげ：画像は450×280pxで表示（各カードの列幅と一致） ---- */
.p-oshinagaki__grid2--omiyage .p-oshinagaki__photo img {
  aspect-ratio: 450 / 280;
  object-fit: cover;
}

/* ---- 06おつまみ：写真2枚のグリッド幅を、直下の商品リスト(max-width:100rem)の
   左右端に揃える。中央に寄って見えるようにする ---- */
.p-oshinagaki__grid2--otsumami {
  max-width: 100rem;
  margin-inline: auto;
}

.p-oshinagaki__grid3 {
  display: grid;
  grid-template-columns: repeat(3, 40rem);
  gap: 7rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
  text-align: center;
}

.p-oshinagaki__item-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}

.p-oshinagaki__item-desc {
  font-size: 2rem;
  line-height: 1.8;
}

/* ---- 商品名の強調表示：しっぽり明朝でセクションごとに指定サイズ ---- */
.p-oshinagaki__grid2--tsukemen .p-oshinagaki__item-title {
  font-size: 4.8rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
}

.p-oshinagaki__feature .p-oshinagaki__item-title {
  font-size: 4.8rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
}

.p-oshinagaki__grid2--otsumami .p-oshinagaki__item-title {
  font-size: 4rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
}

.p-oshinagaki__grid2--omiyage .p-oshinagaki__item-title {
  font-size: 3.2rem;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
}

/* ---- 02つけめん：人気バッジ付きの2品 ---- */
.p-oshinagaki__grid2--tsukemen {
  margin-bottom: 6rem;
  align-items: start;
}

.p-oshinagaki__item--badge {
  position: relative;
  text-align: center;
}

/* ---- 02つけめん：写真をTOPページ流用の1枚構成に変更したため、
   photo-clusterのmain/sideレイアウトは使用終了。写真ごとに幅を指定 ---- */
.p-oshinagaki__photo--tsukemen-shio,
.p-oshinagaki__photo--tsukemen-7fukujin {
  height: 75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-oshinagaki__photo--tsukemen-shio {
  width: 75rem;
  margin-inline: auto;
}

.p-oshinagaki__photo--tsukemen-7fukujin {
  width: 60rem;
  margin-inline: auto;
}

.p-oshinagaki__badge {
  position: absolute;
  top: -1.5rem;
  z-index: 3;
  border-radius: 50%;
  background: var(--osh-badge);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.p-oshinagaki__badge--left {
  left: 0;
  width: 25rem;
  height: 25rem;
  font-size: 3.7rem;
}

.p-oshinagaki__badge--right {
  right: 0;
  width: 18rem;
  height: 18rem;
  font-size: 2.7rem;
}

/* ---- 02つけめん：5種スライダー ----
   PDFのデザインに合わせ、中央の1枚だけを大きく見せ、その両隣は
   中サイズで少しだけ覗く「中-大-中」の3枚見せカルーセルにする。
   ビューポート自体の横幅を絞ることで、両隣のスライドが枠の外に
   はみ出して覗くレイアウトになる（スライドは従来通りscroll-snapで中央寄せ）。 ---- */
.p-oshinagaki__slider {
  position: relative;
  max-width: 120rem;
  margin-inline: auto;
}

.p-oshinagaki__slider-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p-oshinagaki__slider-viewport::-webkit-scrollbar {
  display: none;
}

.p-oshinagaki__slider-track {
  display: flex;
  gap: 3rem;
}

/* 両端の余白は、トラックのpadding-inlineやスライドのmarginではなく、実際に幅を持つ
   スペーサー要素（.slider-spacer）で確保する。paddingやmarginだと末尾側がscrollWidthに
   反映されず、最後のスライドを中央までスクロールできなくなるブラウザ挙動があるため */
.p-oshinagaki__slider-spacer {
  flex: none;
  width: calc(50% - 24rem);
}

.p-oshinagaki__slider-slide {
  flex: none;
  width: 48rem;
  scroll-snap-align: center;
  transform: scale(0.6875);
  opacity: 0.9; /* 中サイズ：完全には薄くせず、写真としてしっかり見える濃さに */
  /* スクロール側(js/main.js のSLIDE_TRANSITION_MS)と同じ0.7s・同系統のeasingに揃えて、
     拡大縮小・フェードの動きとスクロール移動が同じ速さで滑らかに連動するようにする */
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform-origin 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-oshinagaki__slider-slide.is-active {
  transform: scale(1);
  opacity: 1;
}

/* 両隣の「覗き」スライドは、実寸(48rem)のレイアウト枠の中央に縮小表示を
   置いたままだと、枠の外側寄りの余白分だけビューポートで見切れてしまう。
   アクティブ側の内側の辺を基準に縮小させることで、見た目の位置をアクティブ
   スライドに寄せ、外側にはみ出す量を減らして見切れを防ぐ。 */
.p-oshinagaki__slider-slide.is-active + .p-oshinagaki__slider-slide {
  transform-origin: left center;
}

.p-oshinagaki__slider-slide:has(+ .p-oshinagaki__slider-slide.is-active) {
  transform-origin: right center;
}

.p-oshinagaki__slider-slide img,
.p-oshinagaki__slider-slide .p-oshinagaki__placeholder {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #EFEFEF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.p-oshinagaki__slider-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 4;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #000;
  font-size: 2rem;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}

.p-oshinagaki__slider-arrow--prev {
  left: -6rem;
}

.p-oshinagaki__slider-arrow--next {
  right: -6rem;
}

.p-oshinagaki__slider-labels {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 3rem;
  width: 120rem;
  margin-inline: auto;
}

.p-oshinagaki__slider-label {
  padding: 1rem 2rem;
  background: #e6e1d6;
  color: #63594a;
  border-radius: 0.4rem;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.p-oshinagaki__slider-label.is-active {
  background: #fbe8b8;
  color: #5b4522;
}

/* ---- 04トッピング：セクション上下のマージン(PDF内での余白確保) ---- */
.p-oshinagaki__section--topping {
  margin-block: 10rem; /* 100px相当。前後セクションとのゆとりを追加で確保 */
}

/* ---- 04トッピング：上下の罫線デザイン画像 ---- */
.p-oshinagaki__divider {
  max-width: 60rem;
  margin-inline: auto;
}

.p-oshinagaki__divider img {
  display: block;
  width: 100%;
  height: auto;
}

.p-oshinagaki__divider--top {
  margin-bottom: 3rem;
}

.p-oshinagaki__divider--bottom {
  margin-top: 4rem;
}

/* ---- 04トッピング：ぼけ→シャープ出現 ----
   PCでは「味玉〜きくらげ」が1行目、「ワカメ〜バター」が2行目に必ず収まるよう、
   flex-wrapの自然な折り返しに任せず、行ごとのコンテナ(.p-oshinagaki__toppings-row)に分けている ---- */
.p-oshinagaki__toppings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.p-oshinagaki__toppings-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2rem;
}

.p-oshinagaki__topping {
  padding: 1.4rem 3.2rem;
  border: 1px solid var(--osh-badge);
  border-radius: 999px;
  color: var(--osh-badge);
  font-weight: 700;
  font-size: 2rem;
  filter: blur(8px);
  opacity: 0;
  transform: scale(1.15);
  transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}

.p-oshinagaki__topping.is-inview {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .p-oshinagaki__topping {
    transition: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- 05餃子：写真とテキストが左右交互になるフィーチャーブロック ---- */
.p-oshinagaki__feature {
  display: flex;
  align-items: center;
  gap: 5rem;
  margin-bottom: 6rem;
  text-align: left;
}

.p-oshinagaki__feature--reverse {
  flex-direction: row-reverse;
}

.p-oshinagaki__feature .p-oshinagaki__photo,
.p-oshinagaki__feature .p-oshinagaki__feature-col {
  flex: 1 1 50%;
}

/* ---- 03/05/06 共通：2カラムのテキストリスト ---- */
.p-oshinagaki__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6rem;
  max-width: 100rem;
  margin-inline: auto;
  text-align: left;
}

.p-oshinagaki__list--2col {
  margin-top: -2rem;
}

.p-oshinagaki__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-oshinagaki__list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 0 2.2rem;
  position: relative;
  border-bottom: 1px dotted #DAD0B7;
  font-size: 2rem;
}

.p-oshinagaki__list li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-bottom: 1px solid #DAD0B7;
  bottom: 0.5rem;
}

.p-oshinagaki__list-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid #b5ab8f;
  border-radius: 50%;
}

.p-oshinagaki__list-icon--star {
  border: none;
  position: relative;
}

.p-oshinagaki__list-icon--star::before {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--osh-badge);
  font-size: 1.4rem;
}

.p-oshinagaki__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 3rem;
  font-size: 2rem;
}

/* ---- 07お土産：通販サイトCTA ---- */
.p-oshinagaki__shop-cta {
  display: block;
  max-width: 52rem;
  margin: 2rem auto 0;
  padding: 1.8rem 3rem;
  text-align: center;
  background: var(--color-black);
  border: 2px solid var(--color-accent);
  border-radius: 0.4rem;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  transition: opacity 0.3s ease;
}

.p-oshinagaki__shop-cta:hover {
  opacity: 0.8;
}

/* =========================================================
   タイトル：巻物アニメーション
   ========================================================= */
.p-oshinagaki__hero {
  padding-block: 8rem 7rem;
  text-align: center;
}

.p-oshinagaki__scroll {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 76rem);
  height: 18rem;
  margin-inline: auto;
}

.p-oshinagaki__scroll-paper {
  position: absolute;
  /* 軸(棒)が紙の端に少し重なるように内側の余白を狭める */
  inset: 0 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f6efd6;
  /* 実写素材：巻物の紙部分（和柄の縁＋和紙テクスチャ）をそのまま敷く */
  background-image: url('../images/oshinagaki-hero-paper.png');
  background-size: cover;
  background-position: center;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

.p-oshinagaki__scroll.is-open .p-oshinagaki__scroll-paper {
  clip-path: inset(0 0 0 0);
}

.p-oshinagaki__scroll-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease 0.85s, transform 0.6s ease 0.85s;
}

.p-oshinagaki__scroll-sub {
  font-size: 2rem;
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease 1s, transform 0.6s ease 1s;
}

.p-oshinagaki__scroll.is-open .p-oshinagaki__scroll-title,
.p-oshinagaki__scroll.is-open .p-oshinagaki__scroll-sub {
  opacity: 1;
  transform: translateY(0);
}

.p-oshinagaki__scroll-rod {
  position: absolute;
  /* 軸画像(69x406)の実測比率：上端飾り12.8% + 木目本体73.9% + 下端飾り13.3%。
     木目本体の高さが紙(帯)の高さ(18rem)と一致し、飾り部分は紙からはみ出すように配置する */
  top: -3.12rem;
  height: 24.36rem;
  width: 2.6rem;
  /* 実写素材：木目の軸＋金の軸端をそのまま敷く（下のcapは画像に含まれるため撤去） */
  background-image: url('../images/oshinagaki-hero-rod.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 3;
  /* オーバーシュートしない滑らかな減速カーブに変更（紙と軸が離れて見える原因だったバウンドを廃止） */
  transition: left 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-oshinagaki__scroll-rod--left {
  left: 50%;
  margin-left: -1.3rem; /* 開く前は2本の軸が中央で重なった状態からスタート */
  transform: rotate(-10deg); /* くるっと少し回転しながら開くことで「しゅるしゅる」感を出す */
}

.p-oshinagaki__scroll.is-open .p-oshinagaki__scroll-rod--left {
  left: 0;
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .p-oshinagaki__scroll-paper,
  .p-oshinagaki__scroll-title,
  .p-oshinagaki__scroll-sub,
  .p-oshinagaki__scroll-rod {
    transition: none;
    animation: none;
  }
}

/* =========================================================
   お品書きページ：SP（767px以下）
   ========================================================= */
@media (max-width: 767px) {
  .p-oshinagaki__section {
    padding-block: 6rem;
  }

  .p-oshinagaki__inner {
    padding-inline: calc(var(--band-width) + var(--line-width) + 1.6rem);
  }

  .p-oshinagaki__heading {
    font-size: 2.4rem;
  }

  .p-oshinagaki__watermark {
    font-size: clamp(4rem, 16vw, 7rem);
  }

  .p-oshinagaki__watermark-img {
    width: clamp(16rem, 50vw, 28rem);
  }

  .p-oshinagaki__section--topping {
    margin-block: 6rem;
  }

  .p-oshinagaki__grid2,
  .p-oshinagaki__grid2--omiyage,
  .p-oshinagaki__grid3 {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .p-oshinagaki__list {
    grid-template-columns: 1fr;
  }

  .p-oshinagaki__feature,
  .p-oshinagaki__feature--reverse {
    flex-direction: column;
    gap: 2rem;
  }

  .p-oshinagaki__scroll {
    width: 100%;
    height: 14rem;
  }

  .p-oshinagaki__scroll-rod {
    /* 同じ比率をSP版の紙の高さ(14rem)に合わせて再計算 */
    top: -2.43rem;
    height: 18.95rem;
  }

  .p-oshinagaki__scroll-title {
    font-size: 2.6rem;
  }

  .p-oshinagaki__slider-spacer {
    width: calc(50% - 13rem);
  }

  .p-oshinagaki__slider-slide {
    width: 26rem;
  }

  .p-oshinagaki__badge {
    width: 6.6rem;
    height: 6.6rem;
    font-size: 2rem;
  }

  .p-oshinagaki__grid3 .p-oshinagaki__photo--round,
  .p-oshinagaki__grid3 .p-oshinagaki__photo--round .p-oshinagaki__placeholder {
    width: 28rem;
  }

  .p-oshinagaki__photo--natural,
  .p-oshinagaki__photo--natural .p-oshinagaki__placeholder {
    width: 100%;
    max-width: 28rem;
    height: auto;
    display: block;
  }

  .p-oshinagaki__photo--natural img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .p-oshinagaki__photo--tsukemen-shio,
  .p-oshinagaki__photo--tsukemen-7fukujin {
    width: 100%;
    max-width: 32rem;
  }

  .p-oshinagaki__slider-labels {
    width: 100%;
    flex-wrap: wrap;
  }
}