@charset "UTF-8";
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Damion&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&family=Patua+One&display=swap");
/* 376px〜1279px 時もスマホ幅を維持 */
/* スマホ時：special-lunch-set を下にずらすための下余白 */
/* PC ヒーロー二重枠：外枠をヘッダー内側へ（大きいほど画面端から離れる） */
/* 内枠は外枠の内側からの距離。外枠だけ内へ寄せるときはここを少し小さくすると内側の線が追従しすぎない */
/* ヒーロー英字タイトル PC：親が中央寄せのため inline-block + margin-left で右へ */
/* ヒーロー英字タイトル SP：わずかに右へ（Figma 合わせ・微調整はこの値で） */
/* --narrow（sidebarRecentNarrowTitle） */
/* SP: セクション2ブロック（本文＋画像）をカンプに合わせて下げる量 */
/* PC Section2 画像ブロック（Figma 19716-1661）：2枚同一包含・重なり */
/* max(0+350, 100+540) */
/* 274+263 */
/* SP: Section2 相殺に加え、Section3 ブロックをさらに上げる量 */
/* 既定 PC 125px よりやや低い */
/* リボン・吹き出し・デコ（最前面） */
/* heading-group */
/* body */
/* SP: heading 下端付近 */
/* PC: heading 下端付近 */
/* 376px〜1279px 時の body 幅 */
/* メニュー 4 枚の画像: SP 158px / PC 260px — タブレット帯はその間で clamp（_home-tablet-pc.scss） */
/* clamp 上限（算術平均 209px 付近〜やや広め） */
/* PC時は19個、横幅は set-menu-price エリアに合わせる */
/* .special-lunch-set__set-menu-info と同じ幅 */
/* 756〜1279px: 左右余白の clamp 上限（SP 20px と PC のビューポート余白の中間付近。_home-tablet-pc の .grand-menu__inner） */
/* 756〜1279px: カード画像枠は SP(158)〜PC(344) の間で clamp（_home-tablet-pc.scss） */
/* グランドメニューとギャラリー間のスペーサー（Figma node-id: 19710-4044 SP / 19710-2536 PC） */
/* PC時は少し余白を増やす */
/* ギャラリーとNEWS間スペーサー（Figma node-id: 19710-4048） */
/* NEWSとAccess間スペーサー（Figma node-id: 19710-4048） */
/* 756〜1279px: 画像枠 clamp 上限（SP 158px / PC 257px の中間付近。_home-tablet-pc） */
/* 257*4 + 24*3（横4列） */
/* 756〜1279px: カード幅・余白は _home-tablet-pc で clamp（SP 値と PC 値を min/max に使用） */
/* 右 2×2 ブロック。PC 560px よりやや小さく */
/* PC の news__card--small 間のギャップ（調整可） */
/* パンデコが上にはみ出す分を確保するラッパー用 */
/* 756〜1279px: access__inner 等の clamp は layout/_footer.scss の @mixin footer-access-tablet */
/* PC で上見切れ防止用の余白（パン top: -170px 用） */
/* 左へはみ出し量（さらに左へは値を小さく） */
/* 吹き出しデコ（SP: clamp / PC: % 配置） */
/* Layout styles */
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/** 756〜1279px かつトップ（`body.home` / `body.front-page`）。MV タブレット指定は layout/_base-header-mainvisual に集約 */
/* 376px〜1279px: 375px 相当の本文カラムを維持しつつ中央寄せ（TOP .concept 等）。756〜1279 のタブレット帯とは別用途 */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f3efeb;
}

/* 375px〜1280px: viewport-clip でビューポート幅でクリップし、content-center で 375px 中央。デコははみ出して表示 */
@media (max-width: 1279px) {
  .viewport-clip {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* 子の .content-center がページ別に広がるとき、親が flex/grid で縮まないよう確保 */
  }
  .content-center {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-width: 0;
    margin-inline: auto;
    overflow: visible; /* 子セクションのデコはみ出しを表示 */
  }
}
/* タブレット帯: トップ（HOME）— .content-center をビューポート幅いっぱいに（他ページの min(..., calc(100% - 32px)) による左右ガターを付けない） */
@media (min-width: 756px) and (max-width: 1279px) {
  body.home .content-center,
  body.front-page .content-center {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }
}
/*
 * ヘッダー（.Top）・フッター（.footer-sp-wrap）・アクセス前スペーサーを常にビューポート幅に。
 * .content-center が 375px のスマホ〜タブレットでも、帯だけは左右いっぱいに伸ばす（calc は親が全幅のとき 0 になり無害）。
 * ワイドモニターでも 100vw で画面端まで揃える。
 * 横スクロールが出る場合は .viewport-clip の overflow-x と併せて確認（responsive-composer-prompts.md）。
 */
.content-center > .Top,
.content-center > .footer-sp-wrap,
.content-center > .news-access-spacer,
.content-center > .concept-access-spacer,
.content-center > .menu-page__access-spacer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

@media (min-width: 1280px) {
  .special-lunch-set {
    overflow: visible !important;
  }
}
/* SP: viewport-clip と合わせ visible。PC: 横だけ切りたいが overflow-x: hidden 単独だと仕様上 overflow-y が auto になり .page-content-wrap 内で二重の縦スクロールになり得る → clip + visible で横のみクリップ */
@media (max-width: 1279px) {
  .page-content-wrap {
    overflow: visible;
  }
}
@media (min-width: 1280px) {
  .page-content-wrap {
    overflow-x: clip;
    overflow-y: visible;
  }
}

body {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222222;
  background: #f3efeb;
}
@media (max-width: 1279px) {
  body {
    width: 100%; /* content-center で 375px 中央を担当 */
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.container--fluid {
  max-width: 100%;
}
.container--narrow {
  max-width: 960px;
}
.container--wide {
  max-width: 1440px;
}

@media (min-width: 1280px) {
  .sp-br {
    display: none;
  }
}

@media (max-width: 1279px) {
  .pc-br {
    display: none;
  }
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.Top {
  --top-header-width: 200px;
}
@media (max-width: 1279px) {
  .Top {
    position: relative; /* mainvisual__pickup が .Top の子で absolute のため、包含ブロックを .Top にして左寄せを防ぐ */
    overflow: visible; /* デコのはみ出しを表示（viewport-clip でビューポート幅でクリップ） */
  }
}
@media (min-width: 1280px) {
  .Top {
    display: flex;
    align-items: stretch;
  }
}

@media (min-width: 1280px) {
  .top__bg {
    width: calc(100vw - 296px);
    height: 795px;
    position: absolute;
    right: 0;
    background: #eae0d5;
  }
}

@media (min-width: 1280px) {
  .Top .site-header {
    flex: 0 0 var(--top-header-width);
    width: var(--top-header-width);
    height: 735px;
    align-self: stretch;
    /* .site-header 既定の align-items: flex-start を上書きし、.header__inner を列高（= MV と同じ）まで伸ばす */
    align-items: stretch;
    padding: 18px 10px;
  }
}

@media (min-width: 1280px) {
  .Top .header__inner {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
}

@media (min-width: 1280px) {
  .Top .header__nav {
    width: 100%;
    padding: 20px 0 26.5px 0;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .Top .header__nav ul {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}

@media (min-width: 1280px) {
  .Top .header__social {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: 28px;
  }
}

@media (min-width: 1280px) {
  .Top .mainvisual {
    flex: 1 1 auto;
    width: calc(100vw - var(--top-header-width));
    margin-top: 0;
    padding-top: 20px;
  }
}

@media (min-width: 1280px) {
  .Top .mainvisual__text {
    left: 30px;
  }
}

@media (min-width: 1280px) {
  .Top .mainvisual__pagination {
    left: 20px !important;
  }
}

@media (min-width: 1280px) {
  .Top .mainvisual__pickup {
    width: 388px;
  }
}

.site-header {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px;
  border-bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 80px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
@media (min-width: 1280px) {
  .site-header {
    padding: 0;
  }
}

body.drawer-open .site-header {
  background-color: #382620 !important;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  width: 100%;
  z-index: 10;
}

.header__logo {
  position: relative;
  z-index: 10;
  display: block;
  line-height: 0;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0;
}
.header__logo img {
  width: 120px;
  height: 65px;
  flex-shrink: 0;
  display: block;
}
@media (min-width: 1280px) {
  .header__logo {
    padding: 0 7px;
  }
  .header__logo img {
    width: 166px;
    height: 90px;
    flex-shrink: 0;
  }
}
.header__logo:hover {
  opacity: 0.8;
}

.header__hamburger {
  position: relative;
  top: -3px;
  z-index: 10;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 1280px) {
  .header__hamburger {
    display: none;
  }
}
.header__hamburger {
  /* Figma ionic-ios-menu 28×18（icon-drawer-menu-*.svg） */
}
.header__hamburger img {
  width: 28px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* 共通: ドロワー用の茶丸 FAB（NEWS/MENU/CONCEPT 等）。 */
.open-cafe-drawer-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 30px;
  background: var(--cr-main, #382620);
  cursor: pointer;
}
.open-cafe-drawer-fab img {
  width: 28px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.open-cafe-drawer-fab:focus-visible {
  outline: 2px solid var(--cr-white, #fff);
  outline-offset: 2px;
}

/* 旧: SP 丸FAB（移行互換）。open-cafe-drawer-fab に寄せる。 */
.header__hamburger.header__hamburger--fab {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #382620;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
}

/* TOP は PC では縦ナビなので、ドロワー FAB を出さない（静的と同じ）。
   .header__hamburger--fab / .open-cafe-drawer-fab は常時 display:flex なので !important で上書き。 */
@media (min-width: 1280px) {
  body.home .Top .header__hamburger.header__hamburger--fab.open-cafe-drawer-fab,
  body.front-page .Top .header__hamburger.header__hamburger--fab.open-cafe-drawer-fab {
    display: none !important;
  }
}
.header__drawer-icon-open {
  width: 28px;
  height: 18px;
  flex-shrink: 0;
  background: transparent;
  /* PC でも表示（トップ以外はカンプどおり茶丸 FAB 内のアイコンを出す）。
     2 枚構成のヒーローは各ページの *-page-hero__icon-pc で 1 枚目を非表示にしている。 */
}

.header__nav {
  display: flex;
  padding: 50px 40px;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  flex: 1 0 0;
  align-self: stretch;
}
.header__nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__nav li {
  margin: 0;
}
.header__nav a {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #222222;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s ease;
}
.header__nav a:hover {
  color: #f07317;
}
@media (min-width: 1280px) {
  .header__nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
}
@media (min-width: 1280px) {
  .header__nav .header__link-en {
    color: #222222;
    text-align: center;
    font-family: "Patua One";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1.92px;
  }
}
@media (min-width: 1280px) {
  .header__nav .header__link-separator {
    display: none;
  }
}
@media (min-width: 1280px) {
  .header__nav .header__link-ja {
    color: #222222;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
  }
}
@media (max-width: 1279px) {
  .header__nav {
    display: none;
  }
}

.header__social {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1279px) {
  .header__social {
    display: none;
  }
}
@media (min-width: 1280px) {
  .header__social {
    gap: 24px;
  }
}

.header__social-link {
  display: block;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.header__social-link svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (min-width: 1280px) {
  .header__social-link {
    color: #222222;
  }
  .header__social-link svg {
    width: 19.5px;
    height: 15.838px;
    flex-shrink: 0;
    fill: #222222;
  }
  .header__social-link img {
    width: 19.5px;
    height: 15.838px;
    flex-shrink: 0;
  }
}
.header__social-link img {
  width: 24px;
  height: 24px;
  display: block;
}
.header__social-link:hover {
  opacity: 0.7;
}

.mainvisual {
  position: relative;
  min-height: 667px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-top: -85px;
  padding-top: 100px;
  overflow: hidden;
}

.mainvisual__background-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 667px;
  z-index: 0;
}
@media (min-width: 1280px) {
  .mainvisual__background-swiper {
    height: 735px;
  }
}
.mainvisual__background-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mainvisual__background-swiper .swiper-slide-active .mainvisual__backgroundimg {
  animation: kenburns 5s ease-out forwards;
}

@keyframes kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.mainvisual__backgroundimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 667px;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: center center;
}
@media (min-width: 1280px) {
  .mainvisual__backgroundimg {
    width: 100%;
    height: 735px;
  }
}

.mainvisual__inner {
  position: relative;
  z-index: 10;
  max-width: 100%;
}

.mainvisual__text {
  position: absolute;
  top: -523px;
  left: 0px;
  width: 260px;
  height: 96px;
  margin: 0;
  color: #ffffff;
  font-family: "Noto Serif JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 2.24px;
  z-index: 10;
}
@media (min-width: 1280px) {
  .mainvisual__text {
    width: 426.927px;
    font-size: 20px;
    line-height: 200%; /* 40px */
    letter-spacing: 2.8px;
    margin-top: 411px;
  }
}

.mainvisual__pagination {
  position: absolute;
  top: 647px !important;
  left: 20px !important;
  bottom: auto !important;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 !important;
  padding: 0;
}
@media (min-width: 1280px) {
  .mainvisual__pagination {
    top: 707px !important;
    left: 20px;
  }
}
.mainvisual__pagination .swiper-pagination-bullet {
  background-color: var(--cr-white, #fff);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 !important;
}
.mainvisual__pagination .swiper-pagination-bullet-active {
  background-color: #d59b71;
}

.mainvisual__pickup {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  position: absolute;
  top: 510px;
  left: 0px;
  width: 100%;
  max-width: 375px;
  box-sizing: border-box;
  z-index: 50;
}
@media (min-width: 1280px) {
  .mainvisual__pickup {
    top: 593px;
    right: 33px;
    width: 378px;
    left: auto;
  }
}

.mainvisual__pickup-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 0px;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-container {
    padding: 0;
  }
}

.mainvisual__pickup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
  max-width: 100%;
  width: min(100%, 335px);
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-grid {
    width: 388px;
  }
}

.mainvisual__pickup-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  background: rgba(255, 255, 255, 0.85);
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-decoration: none;
  color: inherit;
  padding: 12px;
  position: relative;
  z-index: 50;
}
.mainvisual__pickup-card:hover {
  transform: translateY(-4px);
}
@media (min-width: 1280px) {
  .mainvisual__pickup-card {
    display: flex;
    width: 388px;
    padding: 16px;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.85);
  }
}

.mainvisual__pickup-card-left {
  flex: 0 0 100px;
  display: flex;
  width: 100px;
  flex-direction: column;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-card-left {
    flex: 0 0 120px;
    width: 120px;
    flex-shrink: 0;
  }
}

.mainvisual__pickup-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.mainvisual__pickup-image {
  width: 100px;
  height: 100px;
  background-color: #e0e0e0; /* 画像読込前のフォールバック（旧 url(<path-to-image>) を削除し404解消） */
  overflow: hidden;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }
}
.mainvisual__pickup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mainvisual__pickup-category {
  display: flex;
  max-width: 116px;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: -8px;
  top: 8px;
  padding: 2px 10px;
  justify-content: center;
  background: #382620;
  z-index: 60;
}
.mainvisual__pickup-category::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 5px;
  height: 22px;
  align-self: stretch;
  transform: translateY(-50%);
  color: #222222;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='22' viewBox='0 0 5 22' fill='none'><path d='M5 22H0.000345965L0 0H5L0 11L5 22Z' fill='currentColor'/></svg>") no-repeat center/contain;
  pointer-events: none;
}

.mainvisual__pickup-date {
  align-self: stretch;
  color: #222222;
  font-family: "Noto Serif JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 18px */
  margin: 0;
  display: block;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-date {
    align-self: stretch;
    color: #222222;
    font-family: "Noto Serif JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
  }
}

.mainvisual__pickup-icon {
  width: 126px;
  height: 82px;
  position: absolute;
  top: -54px;
  right: -12px;
  flex-shrink: 0;
  margin: 0;
  z-index: 70;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-icon {
    width: 168px;
    height: 210px;
    flex-shrink: 0;
    top: -142px;
    right: -15px;
  }
}
.mainvisual__pickup-icon img,
.mainvisual__pickup-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mainvisual__pickup-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-self: stretch;
  overflow: hidden;
  color: #222222;
  text-overflow: ellipsis;
  font-family: "Noto Serif JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 18px */
  margin: 0;
}
@media (min-width: 1280px) {
  .mainvisual__pickup-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;
    overflow: hidden;
    color: #222222;
    text-overflow: ellipsis;
    font-family: "Noto Serif JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
  }
}

.category-badge {
  display: inline-block;
}
.category-badge__main {
  color: #ffffff;
  font-family: "Noto Serif JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 18px */
}

@media (min-width: 756px) and (max-width: 1279px) {
  body.home .Top,
  body.front-page .Top {
    /* 横並び（サイドバー + メインビジュアル） */
    --home-tablet-header-w: clamp(140px, 15.625vw, 200px);
    /* MV 画像高さの単一ソース（pagination / pickup / swiper で共有し、vw の食い違いで下に落ちないようにする） */
    --mv-swiper-h: clamp(
      560px,
      57.4vw,
      735px
    );
    display: flex;
    align-items: stretch;
  }
  body.home,
  body.front-page {
    /* 固定 height の clamp は MV 列より短くなりがち（.mainvisual は min-height + padding で伸びる）。absolute は flex に乗らないので top+bottom で .Top いっぱいに伸ばす */
  }
  body.home .top__bg,
  body.front-page .top__bg {
    width: calc(100vw - var(--home-tablet-header-w));
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    min-height: 0;
    background: #eae0d5;
  }
  body.home .Top .site-header,
  body.front-page .Top .site-header {
    /* 高さは固定しない: .mainvisual の min-height が決める行の高さに stretch で揃える */
    flex: 0 0 var(--home-tablet-header-w);
    width: var(--home-tablet-header-w);
    height: auto;
    min-height: 0;
    align-self: stretch;
    align-items: stretch;
    padding: clamp(12px, 1.4vw, 18px) 10px;
  }
  body.home .Top .header__inner,
  body.front-page .Top .header__inner {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 2.3vw, 30px);
  }
  body.home .Top .header__nav,
  body.front-page .Top .header__nav {
    display: flex !important;
    flex-direction: column;
    padding: clamp(36px, 4vw, 50px) clamp(28px, 3vw, 40px);
    gap: clamp(36px, 4vw, 50px);
    flex: 1 0 0;
    align-self: stretch;
  }
  body.home .Top .header__nav ul,
  body.front-page .Top .header__nav ul {
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.1vw, 14px);
  }
  body.home .Top .header__social,
  body.front-page .Top .header__social {
    display: flex !important;
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: clamp(20px, 2.2vw, 28px);
  }
  body.home .Top .header__hamburger,
  body.home .Top .header__hamburger.header__hamburger--fab,
  body.front-page .Top .header__hamburger,
  body.front-page .Top .header__hamburger.header__hamburger--fab {
    display: none !important;
  }
  body.home .Top .header__drawer-icon-open,
  body.front-page .Top .header__drawer-icon-open {
    display: none;
  }
  body.home .Top .header__nav a,
  body.front-page .Top .header__nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  body.home .Top .header__link-en,
  body.front-page .Top .header__link-en {
    color: #222222;
    text-align: center;
    font-family: "Patua One", cursive;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1.92px;
  }
  body.home .Top .header__link-separator,
  body.front-page .Top .header__link-separator {
    display: none;
  }
  body.home .Top .header__link-ja,
  body.front-page .Top .header__link-ja {
    color: #222222;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
  }
  body.home .Top .header__social-link,
  body.front-page .Top .header__social-link {
    color: #222222;
  }
  body.home .Top .header__social-link svg,
  body.front-page .Top .header__social-link svg {
    width: 19.5px;
    height: 15.838px;
    fill: #222222;
  }
  body.home .Top .header__social-link img,
  body.front-page .Top .header__social-link img {
    width: 19.5px;
    height: 15.838px;
  }
  body.home .Top .mainvisual,
  body.front-page .Top .mainvisual {
    flex: 1 1 auto;
    width: calc(100vw - var(--home-tablet-header-w));
    margin-top: 0;
    /* 上パディング + スライド高さに固定（内側の text / pagination が画像外に出ないようにする） */
    padding: 20px 20px 0;
    height: calc(var(--mv-swiper-h) + 20px);
    min-height: 0;
    box-sizing: border-box;
  }
  body.home .Top .mainvisual__background-swiper,
  body.home .Top .mainvisual__backgroundimg,
  body.front-page .Top .mainvisual__background-swiper,
  body.front-page .Top .mainvisual__backgroundimg {
    height: var(--mv-swiper-h);
  }
  body.home,
  body.front-page {
    /* テキストの包含ブロックをスライド画像と同一（上端は padding ではなく 0。inner を 20px 下げると margin-top の 411/735 が画像上端からずれる） */
  }
  body.home .Top .mainvisual__inner,
  body.front-page .Top .mainvisual__inner {
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    width: auto;
    height: var(--mv-swiper-h);
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
  }
  body.home .Top .mainvisual__inner .mainvisual__text,
  body.front-page .Top .mainvisual__inner .mainvisual__text {
    pointer-events: auto;
  }
  body.home,
  body.front-page {
    /* PC: margin-top 411px / 画像 735px → inner 上端＝画像上端（.mainvisual__inner top:0）で同じ比率 */
  }
  body.home .Top .mainvisual__text,
  body.front-page .Top .mainvisual__text {
    top: 0;
    margin-top: calc(var(--mv-swiper-h) * 0.8299319728);
    /* PC .Top .mainvisual__text と同じく最大 30px（.mainvisual の左右 padding と inner の left 20px は別） */
    left: clamp(16px, 2.3vw, 30px);
    right: auto;
    width: auto;
    max-width: min(90%, 427px);
    height: auto;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-size: clamp(14px, 1.25vw, 20px);
    line-height: 200%;
    letter-spacing: clamp(1.5px, 0.22vw, 2.8px);
  }
  body.home,
  body.front-page {
    /* PC と同じ：画像上端〜ページネーション上端 = 707/735（.mainvisual の bottom 基準だと padding で画像下端とずれる） */
  }
  body.home .Top .mainvisual__pagination,
  body.front-page .Top .mainvisual__pagination {
    top: calc(var(--mv-swiper-h) * 0.9619047619) !important;
    bottom: auto !important;
    left: clamp(12px, 1.6vw, 20px) !important;
  }
  body.home,
  body.front-page {
    /* .Top 基準。PC: padding + (735 − padding) × $home-mv-pickup-inner-ratio（593px と一致） */
  }
  body.home .Top .mainvisual__pickup,
  body.front-page .Top .mainvisual__pickup {
    top: calc(20px + (var(--mv-swiper-h) - 20px) * 0.8013986014);
    bottom: auto;
    left: auto;
    right: clamp(12px, 1.6vw, 20px);
    width: clamp(300px, 30vw, 388px);
    max-width: min(100% - 24px, 388px);
  }
  body.home .Top .mainvisual__pickup-grid,
  body.front-page .Top .mainvisual__pickup-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.concept {
  padding-top: 60px;
  margin-bottom: 120px;
  position: relative;
}
@media (min-width: 1280px) {
  .concept {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 80px;
    padding-top: 140px;
    padding-right: 90px;
    margin-bottom: 80px;
  }
}

.concept__inner {
  padding-inline: 20px;
  /* タブレット幅で左右中央 */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .concept__inner {
    max-width: 960px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .concept__inner {
    flex: 1;
    z-index: 1;
    padding: 0;
  }
}

.concept__deco {
  width: 128px;
  height: 130px;
  position: absolute;
  right: 0px;
  top: -19px;
  z-index: 100;
}
@media (min-width: 1280px) {
  .concept__deco {
    width: 255px;
    height: 265px;
    top: 20px;
  }
}

.concept__title {
  align-self: stretch;
  color: #222222;
  font-family: "Amatic SC", cursive;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: 4px;
  text-transform: uppercase;
  /* タブレット幅でもスマホ幅を維持して表示位置をキープ */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .concept__title {
    max-width: 375px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .concept__title {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-family: "Amatic SC";
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 78px */
    letter-spacing: 10.4px;
    text-transform: uppercase;
    margin-top: 30px;
  }
}

.concept__sub-title {
  align-self: stretch;
  color: #222222;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 18px */
  /* タブレット幅でもスマホ幅を維持して表示位置をキープ */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .concept__sub-title {
    max-width: 375px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .concept__sub-title {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-family: "Noto Serif JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
    margin-top: 2px;
  }
}

.concept__sub-heading {
  align-self: stretch;
  color: #222222;
  margin-top: 40px;
  /* heading-sp */
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 40px */
  /* タブレット幅でもスマホ幅を維持して表示位置をキープ */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .concept__sub-heading {
    max-width: 375px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .concept__sub-heading {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    /* heading-pc */
    font-family: "Noto Serif JP";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 200%; /* 56px */
    margin-top: 48px;
  }
}

.concept__description {
  align-self: stretch;
  color: #222222;
  margin-top: 40px;
  /* デフォルト */
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 200%; /* 28px */
  /* タブレット幅でもスマホ幅を維持して中央に */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .concept__description {
    max-width: 375px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .concept__description {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    /* デフォルト */
    font-family: "Noto Serif JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 28px */
    margin-top: 48px;
  }
}

.concept__description + .concept__description {
  margin-top: 14px;
}

.concept__link {
  background: #222222;
  display: flex;
  width: 290px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.concept__link:hover {
  opacity: 0.85;
}

.concept__image-wrapper {
  position: relative;
  display: block; /* スマホから中央寄せで同じ表示位置をキープ */
  margin-inline: auto;
}
@media (min-width: 1280px) {
  .concept__image-wrapper {
    flex: 0 0 auto;
    margin-inline: 0; /* PC は flex で配置 */
  }
}

.concept__button {
  margin-top: 40px;
  margin-bottom: 66px;
  margin-inline: auto;
}
@media (min-width: 1280px) {
  .concept__button {
    margin-inline: 0;
    margin-top: 49px;
  }
}

.concept__image {
  width: 315px;
  height: 401px;
  aspect-ratio: 315/401;
  position: relative;
  z-index: 2;
  display: block;
}
@media (min-width: 1280px) {
  .concept__image {
    width: 600px;
    height: 764px;
  }
}

.concept__bg {
  width: 355px;
  height: 100px;
  top: 361px;
  background: #eae0d5;
  position: absolute;
  z-index: 1;
}
@media (min-width: 1280px) {
  .concept__bg {
    width: 1190px;
    height: 300px;
    top: 544px;
    z-index: 0;
  }
}

/* Figma deco (deco-1): 葉の装飾 - node-id 19710:4061 */
.deco {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.deco__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.deco--leaves {
  max-width: 320px;
  height: 200px;
  margin: 0 auto 40px;
}
@media (min-width: 1280px) {
  .deco--leaves {
    max-width: 480px;
    height: 280px;
    margin-bottom: 60px;
  }
}
.deco--leaves .deco__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 756〜1279px: ベージュ帯を背面（z-index）／CTA をやや上へ（margin-top）。詳細レイアウトは _home-tablet-pc.scss */
@media (min-width: 756px) and (max-width: 1279px) {
  body.home .concept__bg,
  body.front-page .concept__bg {
    z-index: 0;
  }
  body.home .concept__button,
  body.front-page .concept__button {
    margin-inline: 0;
    margin-top: clamp(20px, 2.2vw, 36px);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.special-lunch-set {
  margin-top: 180px;
  position: relative; /* デコ・吹き出しの基準（section 直下に移動したため） */
  background: var(--cr-base, #f3efeb);
  overflow: visible; /* スマホ: デコ・吹き出しを切らせない */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .special-lunch-set {
    overflow: visible; /* レスポンシブ時も __deco・__speech-bubble のはみ出しを表示 */
  }
}
@media (min-width: 1280px) {
  .special-lunch-set {
    margin-top: 213px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 80px 40px 80px 40px;
    background: var(--cr-base-dark, #eae0d5);
    overflow: visible;
  }
}

.special-lunch-set__inner {
  position: relative;
  background: var(--cr-base-dark, #eae0d5); /* heading-group と同じ色 */
  padding-bottom: 60px;
}
@media (min-width: 1280px) {
  .special-lunch-set__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 0;
    background: transparent;
  }
}

/* デコ・吹き出しは section 直下。スマホは right:0 で枠内に収め、PCも right:0 で切れ防止 */
.special-lunch-set__deco {
  width: 85px;
  height: 135px;
  position: absolute;
  right: 0; /* スマホ: 枠内に収めて崩れ防止 */
  top: -170px;
  z-index: 20;
}
.special-lunch-set__deco img {
  width: 100%;
  height: 100%;
}
@media (min-width: 1280px) {
  .special-lunch-set__deco {
    width: 167px;
    height: 228px;
    right: 0;
    top: -130px;
  }
}

.special-lunch-set__speech-bubble {
  width: 186px;
  height: 107px;
  position: absolute;
  right: 0; /* スマホ: 枠内に収めて崩れ防止 */
  top: -46px;
  z-index: 20;
}
.special-lunch-set__speech-bubble img {
  width: 100%;
  height: 100%;
  display: block; /* 画像下の隙間を消し、レンダリングを安定させる */
}
.special-lunch-set__speech-bubble {
  /* Figma node-id: 19709-8200（PC用吹き出し） */
}
@media (min-width: 1280px) {
  .special-lunch-set__speech-bubble {
    width: 310px;
    height: 157px;
    right: 15px;
    top: 180px;
    transform-origin: center center;
  }
}

.special-lunch-set__heading-group {
  position: relative;
  z-index: 10;
  background: var(--cr-base-dark, #eae0d5);
  padding: 60px 0 60px 0;
}
@media (min-width: 1280px) {
  .special-lunch-set__heading-group {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
}

.special-lunch-set__title {
  color: var(--cr-contrast, #222);
  text-align: center;
  font-family: "Amatic SC";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: 4px;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .special-lunch-set__title {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 7px; /* 左にずれているのを補正 */
  }
}

.special-lunch-set__sub-title {
  color: var(--cr-contrast, #222);
  text-align: center;
  font-family: "Noto Serif JP";
  font-size: 12px;
  font-weight: 700;
  line-height: 150%; /* 18px */
}
@media (min-width: 1280px) {
  .special-lunch-set__sub-title {
    font-size: 14px;
    margin-top: -2px; /* 2px 上に寄せる */
  }
}

/* PC: 白いカード内のラッパー */
.special-lunch-set__body {
  position: relative;
  z-index: 0;
  background: var(--cr-white, #fff);
  padding-top: 12px;
  padding-bottom: 25px;
  /* タブレット幅では幅を固定（変数で変更可） */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .special-lunch-set__body {
    width: 375px;
    margin-inline: auto;
    box-sizing: border-box;
  }
}
@media (min-width: 1280px) {
  .special-lunch-set__body {
    width: 100%;
    padding: 80px 40px 40px; /* 上: リボン分の余白 */
  }
}

/* リボン: __inner 直下で独立。heading と body の境目に position で配置（top は変数で調整可） */
.special-lunch-set__ribbon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 175px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1280px) {
  .special-lunch-set__ribbon {
    top: 140px;
  }
}

.special-lunch-set__ribbon-left-deco {
  width: 31px;
  height: 37px;
  position: absolute;
  left: calc(50% - 133px);
  top: 7px;
}
.special-lunch-set__ribbon-left-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1280px) {
  .special-lunch-set__ribbon-left-deco {
    left: calc(50% - 163px); /* PC: 3px 左に寄せる */
  }
}

.special-lunch-set__ribbon-text {
  color: var(--cr-white, #fff);
  font-family: "Noto Serif JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  background: var(--cr-contrast, #222);
  display: flex;
  width: 230px;
  height: 37px;
  padding: 4px 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1280px) {
  .special-lunch-set__ribbon-text {
    font-size: 18px;
    width: auto;
    white-space: nowrap;
  }
}

.special-lunch-set__ribbon-right-deco {
  width: 31px;
  height: 37px;
  position: absolute;
  right: calc(50% - 133px);
  top: 7px;
}
.special-lunch-set__ribbon-right-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1280px) {
  .special-lunch-set__ribbon-right-deco {
    right: calc(50% - 163px); /* PC: 3px 右に寄せる */
  }
}

.special-lunch-set__menu {
  margin-top: 28px;
  margin-inline: 20px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  background: var(--cr-white, #fff);
}
@media (min-width: 1280px) {
  .special-lunch-set__menu {
    display: flex;
    justify-content: space-between;
    margin-top: -20px;
    margin-inline: 0;
    gap: 0;
  }
}

.special-lunch-set__menu-item {
  align-self: stretch;
}
.special-lunch-set__menu-item img {
  width: 158px;
  height: 158px;
  object-fit: cover;
  display: block;
}
@media (min-width: 1280px) {
  .special-lunch-set__menu-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 auto;
  }
  .special-lunch-set__menu-item img {
    width: 260px;
    height: 260px;
  }
  .special-lunch-set__menu-item:nth-child(2), .special-lunch-set__menu-item:nth-child(4) {
    padding-top: 40px;
  }
}

.special-lunch-set__menu-text {
  margin-top: 16px;
  width: 158px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1280px) {
  .special-lunch-set__menu-text {
    margin-top: 0;
    width: 100%;
    gap: 12px;
  }
}

.special-lunch-set__menu-icon {
  color: var(--cr-white, #fff);
  text-align: center;
  font-family: "Patua One";
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2.28px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .special-lunch-set__menu-icon {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    font-size: 32px;
    letter-spacing: 3.84px;
    padding: 4px 13px;
  }
}

.special-lunch-set__menu-name {
  color: var(--cr-contrast, #222);
  font-family: "Noto Serif JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  margin-left: -1px;
}
@media (min-width: 1280px) {
  .special-lunch-set__menu-name {
    font-size: 18px;
    width: 199px;
    margin-left: 0;
  }
}

/* Figma set-menu node-id: 19709-8093 */
.special-lunch-set__set-menu {
  display: flex;
  margin-top: 20px;
  margin-inline: 20px;
  padding: 18px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  background: #f7f6f4;
  margin-bottom: 0;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 230px;
    margin-top: 60px;
    margin-inline: 0;
    padding: 20px 70px;
    border-radius: 8px;
    background: #f7f6f4; /* Figma set-menu bg */
  }
}

.special-lunch-set__set-menu-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 335px;
  gap: 10px;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-detail {
    width: auto;
    gap: 12px; /* Figma set-menu__detail */
  }
}

.special-lunch-set__set-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 79px;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-item {
    width: 200px; /* Figma pasta/salad/drink コンテナ幅 */
    height: 190px;
  }
}

.special-lunch-set__set-menu-img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 5px auto 0;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-img {
    max-width: 172px;
    max-height: 145px;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

.special-lunch-set__set-menu-label {
  display: block;
  margin: 5px auto 0;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-label {
    width: 100%;
    height: 22px;
  }
}

.special-lunch-set__set-menu-icon-plus {
  width: 13px;
  height: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #382620;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-icon-plus {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 1280px) {
  .special-lunch-set__set-menu-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    width: 220px;
  }
}

.special-lunch-set__set-menu-title {
  color: var(--cr-contrast, #222);
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-title {
    text-align: right;
    font-size: 20px; /* Figma 19709:8137 */
    color: var(--cr-contrast, #222);
  }
}

.special-lunch-set__set-menu-price-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-price-group {
    align-items: flex-start;
    width: auto;
    gap: 10px;
  }
}

.special-lunch-set__set-menu-price {
  color: var(--cr-contrast, #222);
  text-align: center;
  font-family: "Damion", cursive;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-price {
    font-size: 60px; /* Figma 19709:8136 Damion */
    text-align: right;
    line-height: 1;
    color: var(--cr-contrast, #222);
  }
}

.special-lunch-set__repeat-grid {
  display: block;
  width: 4px;
  height: 4px;
  margin-top: 8px;
  position: relative;
  transform: translateX(-74px);
  border-radius: 50%;
  background-color: #382620;
  flex-shrink: 0;
  box-shadow: 12px 0 0 0 #382620, 24px 0 0 0 #382620, 36px 0 0 0 #382620, 48px 0 0 0 #382620, 60px 0 0 0 #382620, 72px 0 0 0 #382620, 84px 0 0 0 #382620, 96px 0 0 0 #382620, 108px 0 0 0 #382620, 120px 0 0 0 #382620, 132px 0 0 0 #382620, 144px 0 0 0 #382620;
}
@media (min-width: 1280px) {
  .special-lunch-set__repeat-grid {
    margin-left: 106px; /* 右に寄せる */
    margin-top: 0px; /* 上に寄せる */
    box-shadow: 11.6111111111px 0 0 0 #382620, 23.2222222222px 0 0 0 #382620, 34.8333333333px 0 0 0 #382620, 46.4444444444px 0 0 0 #382620, 58.0555555556px 0 0 0 #382620, 69.6666666667px 0 0 0 #382620, 81.2777777778px 0 0 0 #382620, 92.8888888889px 0 0 0 #382620, 104.5px 0 0 0 #382620, 116.1111111111px 0 0 0 #382620, 127.7222222222px 0 0 0 #382620, 139.3333333333px 0 0 0 #382620, 150.9444444444px 0 0 0 #382620, 162.5555555556px 0 0 0 #382620, 174.1666666667px 0 0 0 #382620, 185.7777777778px 0 0 0 #382620, 197.3888888889px 0 0 0 #382620, 209px 0 0 0 #382620; /* 19個のドット、横幅は set-menu-price エリア(220px)に合わせ済み */
    transform: translateX(-106.5px);
  }
}

.special-lunch-set__set-menu-availability {
  color: var(--cr-contrast, #222);
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 150%;
  margin-top: 12px;
}
@media (min-width: 1280px) {
  .special-lunch-set__set-menu-availability {
    text-align: right;
    font-size: 14px; /* Figma 19709:8096 */
    margin-top: 0;
    height: 20px;
    line-height: normal;
    color: var(--cr-contrast, #222);
    position: relative;
    top: -4px; /* レイアウトに影響させず視覚的に2px上に寄せる */
  }
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.grand-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0 62px 0;
  min-height: 100%;
  /* 葉デコは __clip の外に配置しているため overflow: visible。横はみ出し（豆デコ）は .grand-menu__clip でクリップ */
  overflow: visible;
  /* SP: padding-bottom 62px の背景の上に豆デコを表示するため、スペーサーより前面に */
  z-index: 1;
}
@media (min-width: 1280px) {
  .grand-menu {
    padding: 80px 0 0 0; /* bottom はスペーサーと重ならないように 0 */
    gap: 100px;
  }
}

/* セクション・__clip には overflow を指定しない（overflow-x が縦も切る挙動を避ける）。豆デコは __content の外に配置 */
.grand-menu__clip {
  position: relative;
  width: 100%;
  flex-shrink: 0; /* 親 .grand-menu の flex で縮むと豆デコの基準がずれボタンと重なるため */
}
@media (min-width: 1280px) {
  .grand-menu__clip {
    padding-bottom: 0;
  }
}

/* 横はみ出しのクリップはこのラッパーのみに指定（__bg・__inner のみ含む。豆デコは __clip 直下でこの外） */
.grand-menu__content {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: clip; /* 縦はスクロールコンテナにしない（__bg の bottom で下にはみ出した部分もクリップ） */
  /* SP: セクションの padding-bottom 62px + __bg 下端 2px 分をクリップ内に含める */
  padding-bottom: 64px;
}
@media (min-width: 1280px) {
  .grand-menu__content {
    /* PC: ボタン下に __bg を 62px 分表示するため（__bg は bottom:0 でこの下端に揃う） */
    padding-bottom: 88px;
  }
}

.grand-menu__bg {
  position: absolute;
  right: 0;
  bottom: 0; /* __clip の padding 下端に合わせる。下に 2px 見せる場合は __clip の padding-bottom を 64px に */
  width: 274px;
  height: 1565px;
  background: var(--cr-base-dark, #eae0d5);
  pointer-events: none;
}
@media (min-width: 1280px) {
  .grand-menu__bg {
    width: 1024px;
    height: 2196px;
  }
}

.grand-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 375px;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  /* タブレット幅でも左右中央 */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .grand-menu__inner {
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .grand-menu__inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto; /* 左右中央（Figma node-id: 19709-8259） */
    padding: 0;
    gap: 57px;
  }
}

.grand-menu__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  text-align: center;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .grand-menu__heading-group {
    height: auto;
    gap: 0;
  }
}

.grand-menu__title {
  font-family: "Amatic SC", cursive;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 1280px) {
  .grand-menu__title {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 10px; /* PC: 表示位置を少し左に */
  }
}

.grand-menu__sub-title {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 1280px) {
  .grand-menu__sub-title {
    font-size: 14px;
    margin-top: -2px;
  }
}

.grand-menu__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .grand-menu__menu {
    max-width: 1100px;
    gap: 98px;
  }
}

/* align-items: stretch で見出し・カードを幅いっぱいにし、見出しテキストは左寄せにする */
.grand-menu__section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}
@media (min-width: 1280px) {
  .grand-menu__section {
    gap: 24px;
  }
}

.grand-menu__section-heading {
  border: 2px solid var(--cr-contrast, #222);
  border-left: none;
  border-right: none;
  padding: 2px 0px;
  width: 100%;
}

/* Figma node-id: 19710-3705 見出しは左寄せ */
.grand-menu__section-heading .grand-menu__section-title {
  margin: 0;
  border-top: 1px solid var(--cr-contrast, #222);
  border-bottom: 1px solid var(--cr-contrast, #222);
  padding: 1px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .grand-menu__section-heading .grand-menu__section-title {
    padding: 5px 20px;
    font-size: 24px;
  }
}

.grand-menu__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
  width: 100%;
}
@media (min-width: 1280px) {
  .grand-menu__cards {
    gap: 40px 34px;
  }
}

.grand-menu__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 158px;
}
@media (min-width: 1280px) {
  .grand-menu__card {
    width: 344px;
  }
}

.grand-menu__card-img-wrap {
  position: relative;
  width: 158px;
  height: 158px;
  background: var(--cr-white, #fff);
  border: 5px solid var(--cr-white, #fff);
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .grand-menu__card-img-wrap {
    width: 344px;
    height: 344px;
    border-width: 8px;
  }
}

.grand-menu__card-img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  display: block;
}
@media (min-width: 1280px) {
  .grand-menu__card-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.grand-menu__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
}

.grand-menu__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
}
@media (min-width: 1280px) {
  .grand-menu__card-title {
    font-size: 20px;
  }
}

.grand-menu__card-price {
  margin: 0;
  font-family: "Damion", cursive;
  font-size: 24px;
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 7px;
}
@media (min-width: 1280px) {
  .grand-menu__card-price {
    font-size: 32px;
  }
}

.grand-menu__card-price-num {
  font-family: inherit;
}

/* ドリンクエリア */
.grand-menu__section--drink .grand-menu__section-heading {
  margin-bottom: 0;
}

/* Figma node-id: 19730-3950 drink-menu-pc */
.grand-menu__drink-row {
  width: 100%;
}
@media (min-width: 1280px) {
  .grand-menu__drink-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 85px;
    max-width: 1100px;
    margin: 0 auto;
  }
}

.grand-menu__drink-pc-image {
  display: none;
}
@media (min-width: 1280px) {
  .grand-menu__drink-pc-image {
    display: block;
    flex-shrink: 0;
    width: 327px;
    height: 327px;
    background: var(--cr-white, #fff);
    border: 8px solid var(--cr-white, #fff);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
}

@media (min-width: 1280px) {
  .grand-menu__drink-pc-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    transform: scale(1.1);
    transform-origin: center center;
  }
}

.grand-menu__drink {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: 0 20px;
}
@media (min-width: 1280px) {
  .grand-menu__drink {
    flex-direction: row;
    flex: 1;
    gap: 48px;
    padding-top: 3px;
    padding-inline: 0px;
  }
}

.grand-menu__drink-category {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1280px) {
  .grand-menu__drink-category {
    width: 197px;
    flex-shrink: 0;
    gap: 13px; /* Figma menu-list gap-[19px] */
  }
}

.grand-menu__drink-category-title {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cr-contrast, #222);
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .grand-menu__drink-category-title {
    margin: 0;
    padding-bottom: 6px;
    position: relative;
    top: -5px; /* PC: テキストを上に寄せる（レイアウトに影響させない） */
  }
}

.grand-menu__drink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
}

.grand-menu__drink-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}

.grand-menu__drink-name {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.grand-menu__drink-dots {
  flex: 1;
  min-width: 8px;
  height: 0;
  border-bottom: 1px dotted var(--cr-contrast, #222);
  margin-bottom: 3px;
}

.grand-menu__drink-price {
  font-family: "Damion", cursive;
  font-size: 20px;
  font-style: normal;
  text-align: right;
  flex-shrink: 0;
}

.grand-menu__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 296px;
  height: 78px;
  background: var(--cr-contrast, #222);
  color: var(--cr-white, #fff);
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.grand-menu__more-btn-text {
  flex: 1;
}

.grand-menu__more-btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 24px;
  object-fit: contain;
}

/* ボタン下の枠線（Figma ボタン__arrow） */
.grand-menu__more-btn::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 7.69%;
  right: 0;
  bottom: 7.69%;
  border-right: 1px solid var(--cr-contrast, #222);
  border-bottom: 1px solid var(--cr-contrast, #222);
  pointer-events: none;
}

.grand-menu__deco {
  position: absolute;
  pointer-events: none;
  z-index: 10; /* デコを最前面に（葉・豆とも） */
}

/* 葉デコ：位置・サイズは _variables_refined の $grand-menu-deco-leaf-* で調整 */
.grand-menu__deco--leaf {
  left: -10px;
  top: -67px;
  width: 128.365px;
  height: 141px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11; /* 葉デコを最優先表示（上半分が見切れないよう overflow-y: visible と併用） */
}
@media (min-width: 1280px) {
  .grand-menu__deco--leaf {
    left: -44px;
    top: -86px;
    transform: rotate(2deg);
    width: 266px;
    height: 294px;
  }
}

.grand-menu__deco--leaf .grand-menu__deco-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(135deg) scaleY(-1);
}

/* コーヒー豆デコ：右30pxを非表示。padding-bottom 62px の背景の上に表示 */
.grand-menu__deco--beans {
  right: -30px;
  bottom: -100px;
  width: 168px;
  height: 143px;
  overflow: hidden;
  clip-path: inset(0 30px 0 0);
  z-index: 11; /* 背景・スペーサーの上に表示（.grand-menu__deco の 10 より上） */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .grand-menu__deco--beans {
    overflow: visible;
    clip-path: none; /* レスポンシブ時ははみ出し表示 */
  }
}
@media (min-width: 1280px) {
  .grand-menu__deco--beans {
    right: -90px;
    bottom: -122px;
    width: 390px;
    height: 330px;
    /* PC: 右側のみ非表示（90px 分クリップ）、下側は表示 */
    clip-path: inset(0 90px 0 0);
  }
}

.grand-menu__deco--beans .grand-menu__deco-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grand-menu-gallery-spacer {
  position: relative;
  z-index: 0; /* 背面にし、.grand-menu と .gallery のデコが padding-bottom 62px 背景の上に表示されるように */
  width: 100%;
  height: 60px;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .grand-menu-gallery-spacer {
    height: 158px; /* PC時はスペーサーを表示して余白を少し増やす */
  }
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* セクションには overflow を指定しない（overflow-x が縦も切る挙動を避ける）。吹き出しデコは __clip の外に配置 */
.gallery {
  position: relative;
  z-index: 1; /* スペーサーより前面にし、吹き出しデコが padding-bottom 62px 背景の上に表示されるように */
  background: var(--cr-base-dark, #eae0d5);
  padding: 60px 0;
  overflow-y: visible; /* スマホ時：セクション内で縦スクロールさせない（ページスクロールに任せる） */
}
@media (min-width: 1280px) {
  .gallery {
    padding-top: 80px;
    padding-bottom: 72px;
  }
}

/* 横はみ出しのクリップはこのラッパーのみに指定（__inner のみ含む。吹き出しデコは .gallery 直下でこの外） */
.gallery__clip {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible; /* セクション内で縦スクロールさせない・button-arrow 下側を見せる */
}

.gallery__deco--speech {
  position: absolute;
  left: -20px;
  top: -60px;
  width: 200px;
  height: 104px;
  pointer-events: none;
  z-index: 10; /* 背景・スペーサーの上に表示 */
  /* Figma node-id: 19710-4076。SPでは表示、PCでは非表示 */
  display: block;
}
@media (min-width: 1280px) {
  .gallery__deco--speech {
    display: none;
  }
}
.gallery__deco--speech .gallery__deco-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 吹き出し（Figma node-id: 19823-9159）PC時のみ表示 */
.gallery__deco--balloon-pc {
  position: absolute;
  left: 297px;
  top: -60px;
  width: 266px;
  height: 138px;
  pointer-events: none;
  z-index: 10;
  display: none;
}
@media (min-width: 1280px) {
  .gallery__deco--balloon-pc {
    display: block;
  }
}
.gallery__deco--balloon-pc .gallery__deco-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__inner {
  position: relative;
  z-index: 0; /* 吹き出しデコ（z-index:10）が前面に来るように */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* button-arrow の下側（absolute で下にはみ出す分）が見切れないように余白を確保 */
  padding-bottom: 6px;
}
@media (min-width: 1280px) {
  .gallery__inner {
    gap: 60px;
    padding-bottom: 16px;
  }
}

.gallery__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  text-align: center;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
}

.gallery__title-en {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .gallery__title-en {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 12px;
  }
}

.gallery__title-ja {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
}
@media (min-width: 1280px) {
  .gallery__title-ja {
    font-size: 14px;
  }
}

.gallery__grid {
  display: grid;
  grid-template-columns: 158px 158px;
  gap: 19px;
  width: 100%;
  max-width: 335px;
  padding: 0; /* 左右 0px */
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .gallery__grid {
    grid-template-columns: repeat(4, 257px);
    gap: 24px;
    max-width: 1100px;
    margin-top: 22px;
  }
}

.gallery__img-wrap {
  position: relative;
  width: 158px;
  height: 158px;
}
@media (min-width: 1280px) {
  .gallery__img-wrap {
    width: 257px;
    height: 257px;
  }
}

.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.gallery__button {
  margin-top: 0;
}

.gallery-news-spacer {
  width: 100%;
  height: 60px;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .gallery-news-spacer {
    height: 80px;
  }
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.news {
  position: relative;
  z-index: 2; /* ギャラリーセクション（z-index:1）の背景より上に news__bg-deco を表示 */
  padding-top: 60px;
  padding-bottom: 0;
  margin-bottom: 60px;
  background: var(--cr-base, #f3efeb);
}

.news__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
  max-width: 100%;
  margin: 0 auto;
}

.news__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  text-align: center;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
  width: 100%;
}

.news__title-en {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.news__title-ja {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
}

.news__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 335px;
}

/* 大きいカード（Figma node-id: 19710-3939 card-news-large-sp） */
.news__card--large {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 335px;
  position: relative;
}

.news__card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5952380952;
  overflow: hidden;
  background: #e0e0e0;
}

.news__card--large .news__card-image-wrap {
  aspect-ratio: 1.5952380952;
}

.news__card-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.4s ease;
}

/* 記事カード: 画像ホバーで軽くズーム（ラッパーは overflow: hidden） */
.news__card--large:hover .news__card-image-wrap img,
.news__card--small:hover .news__card-image-wrap img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .news__card-image-wrap img {
    transition: none;
  }
  .news__card--large:hover .news__card-image-wrap img,
  .news__card--small:hover .news__card-image-wrap img {
    transform: scale(1);
  }
}
.news__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
}

.news__card--large .news__card-body {
  gap: 20px;
}

.news__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 大カード本文: flex 子で line-clamp する場合、ブロックに min-height:0 を付けないと
   子の省略が効かず行数が張り付くことがある（flex のデフォルト min-height:auto のため）。
   テキストの -webkit-line-clamp は内側 .news__card-desc-inner に付与（p 直下だと WebKit で不安定なため）。 */
.news__card-desc {
  margin: 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

.news__card-desc-inner {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 755px 以下: 大カード本文のみ（.news__card--small は .news__card-desc 非表示） */
@media (max-width: 755px) {
  .news__card--large .news__card-desc-inner {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.news__card-date {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
}

.news__card--small .news__card-date {
  font-size: 12px;
}

/* カテゴリバッジ（共通） */
.news__category {
  position: absolute;
  left: -8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news__card--large .news__category {
  top: 20px;
}

.news__card--small .news__category {
  top: 10px;
}

.news__category-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.news__category-main {
  background: var(--cr-main, #382620);
  color: var(--cr-white, #fff);
  padding: 2px 10px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.news__card--small .news__category-main {
  font-size: 12px;
}

/* カテゴリバッジ デコ（Figma 19710-3940 card-news-sp / 19710-3939 card-news-large-sp） */
.news__category-deco-right {
  flex-shrink: 0;
  width: 5px;
  height: 22px;
  display: flex;
  align-items: stretch;
}
.news__category-deco-right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.news__card--large .news__category-deco-right {
  height: 28px; /* 大カードはバッジ高さに合わせる（Figma 19710-3939） */
}

.news__category-deco-bottom {
  flex-shrink: 0;
  width: 8px;
  height: 4px;
  display: block;
}
.news__category-deco-bottom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* 小さいカードのグリッド */
.news__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 19px;
  width: 100%;
  max-width: 335px;
}

/* 小カード（Figma node-id: 19710-3940 card-news-sp） */
.news__card--small {
  display: flex;
  flex-direction: column;
  width: 158px;
  position: relative;
}

.news__card--small .news__card-image-wrap {
  aspect-ratio: 1.595959596;
  overflow: hidden;
}

.news__card--small .news__card-body {
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
  padding-top: 7px;
  border-radius: 0 0 8px 8px;
}

.news__card--small .news__card-title {
  font-size: 12px;
  -webkit-line-clamp: 3; /* LP（Figma node-id: 19710-3963）に合わせて3行表示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news__card--small .news__card-desc {
  display: none;
}

/* リンク化する場合は a タグ用 */
a.news__card--large,
a.news__card--small {
  text-decoration: none;
  color: inherit;
}

/* ボタン */
.news__button-wrap {
  width: 296px;
  max-width: 100%;
}

.news .button {
  margin: 0;
}

/* 背景デコ（左上） */
.news__bg-deco {
  position: absolute;
  left: -70px;
  top: -40px;
  width: 204px;
  height: 185px;
  pointer-events: none;
  z-index: 0;
  transform: rotate(180deg) scaleY(-1);
}

.news__bg-deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1280px) {
  .news {
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 60px;
  }
  .news__inner {
    gap: 62px;
    max-width: 1100px;
    padding: 0;
  }
  .news__heading {
    height: auto;
  }
  .news__title-en {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 8px;
  }
  .news__title-ja {
    font-size: 14px;
  }
  /* 左: 大カード / 右: 小カード2x2 */
  .news__list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 30px;
    max-width: none;
    width: 100%;
  }
  .news__card--large {
    flex: 0 0 510px;
    width: 510px;
    max-width: none;
    gap: 16px;
  }
  .news__card--large .news__card-image-wrap {
    aspect-ratio: 1.5987460815;
  }
  .news__card--large .news__card-body {
    gap: 20px;
  }
  .news__card--large .news__card-title {
    font-size: 20px;
  }
  .news__card--large .news__card-desc-inner {
    font-size: 14px;
  }
  .news__cards {
    flex: 0 0 560px;
    width: 560px;
    max-width: none;
    gap: 30px;
  }
  .news__card--small {
    width: 265px;
    gap: 2px;
  }
  .news__card--small .news__card-image-wrap {
    aspect-ratio: 1.5962441315;
  }
  .news__card--small .news__card-title {
    font-size: 16px;
  }
  .news__card--small .news__card-date {
    font-size: 14px;
  }
  .news__bg-deco {
    left: -87px;
    top: -145px;
    width: 354px;
    height: 320px;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/** 756〜1279px の ACCESS（`.footer-sp`）一式。値の変更はこの mixin 内だけでよい（`@include bp.media-tablet { @include footer-access-tablet; }` で適用） */
.news-access-spacer {
  width: 100%;
  height: 126px;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .news-access-spacer {
    height: 25px;
  }
}

/* パンデコ（上にはみ出し）が切れないよう overflow: visible のラッパーで上部余白を確保。横はみ出しは .footer__deco-bread-wrap でクリップ */
/* PC: デコは画面幅に連動。.footer-sp はワイドで max-width なし（帯いっぱい）。本文幅は .access__inner 等 */
.footer-sp-wrap {
  position: relative;
  overflow: visible;
  padding-top: 100px;
}
@media (min-width: 1280px) {
  .footer-sp-wrap {
    width: 100%;
    padding-top: 180px; /* パンデコ上はみ出し（top:-170px）用 */
  }
}

.footer-sp-wrap .footer-sp {
  margin-top: -100px;
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer-sp {
    margin-top: -180px;
  }
}

.footer-sp {
  position: relative;
  width: 100%;
  /* ワイドで左右に余白が出ないようフッターブロック自体はビューポート幅。本文幅は .access__inner 等で従来どおり */
}
@media (min-width: 1280px) {
  .footer-sp {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* Access エリア */
.footer-sp .access {
  position: relative;
  background: #eae0d5;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-sp .access__inner {
  width: 100%;
  max-width: 335px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 1280px) {
  .footer-sp .access__inner {
    max-width: 688px;
    gap: 40px;
  }
}

.footer-sp .access__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  text-align: center;
  color: var(--cr-contrast, #222);
  line-height: 1.5;
  width: 96px;
}
@media (min-width: 1280px) {
  .footer-sp .access__heading {
    height: auto;
    width: auto;
  }
}

.footer-sp .access__title-en {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .footer-sp .access__title-en {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 10px;
  }
}

.footer-sp .access__title-ja {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
}
@media (min-width: 1280px) {
  .footer-sp .access__title-ja {
    font-size: 14px;
  }
}

.footer-sp .access__map-wrap {
  width: 100%;
  height: 184px;
  border: 5px solid var(--cr-white, #fff);
  overflow: hidden;
  background: #e8e8e8;
}
@media (min-width: 1280px) {
  .footer-sp .access__map-wrap {
    height: 377px;
    border-width: 10px;
  }
}

.footer-sp .access__map-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-sp .access__shop-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .footer-sp .access__shop-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 43px;
  }
}

.footer-sp .access__dl {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 19px;
}
@media (min-width: 1280px) {
  .footer-sp .access__dl {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 23px 40px;
    width: 100%;
  }
}

.footer-sp .access__shop-info .access__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .footer-sp .access__shop-info .access__row {
    width: 324px;
    padding-bottom: 2px;
  }
}

.footer-sp .access__shop-info .access__dt {
  flex-shrink: 0;
  width: 56px;
  margin: 0;
}

.footer-sp .access__shop-info .access__dd {
  margin: 0;
  flex: 1;
}

.footer-sp .access__shop-info .access__dd p {
  margin: 0 0 0.1em;
}

.footer-sp .access__shop-info .access__dd p:last-child {
  margin-bottom: 0;
}

/* フッター（ダーク部分） */
.footer-sp .footer {
  position: relative;
  background: #382620;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 20px 14px;
}
@media (min-width: 1280px) {
  .footer-sp .footer {
    padding: 40px 20px 14px;
  }
}

.footer-sp .footer__sns {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.footer-sp .footer__sns a {
  display: block;
  width: 24px;
  height: 24px;
  color: inherit;
  text-decoration: none;
}

.footer-sp .footer__sns img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-sp .footer__copyright {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--cr-white, #fff);
  white-space: nowrap;
}

/* トップへ戻るボタン（100vw はスクロールバー幅を含み横空白の原因になるため、必要な幅のみの fixed ラッパーで配置） */
.to-top-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 54px;
  min-height: 54px;
  overflow: visible;
  pointer-events: none;
  z-index: 100;
}

.to-top-wrap .footer__to-top {
  pointer-events: auto;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--cr-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: var(--cr-contrast, #222);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
@media (min-width: 1280px) {
  .to-top-wrap .footer__to-top {
    bottom: 20px;
    right: 20px;
  }
}

.to-top-wrap .footer__to-top.is-at-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.to-top-wrap .footer__to-top img {
  display: block;
  width: 22px;
  height: 12px;
  object-fit: contain;
}

/* デコ（パン・豆・吹き出し）: .footer-sp-wrap 直下で、他セクションと同様に画面幅に連動して左右に広がる */
/* パンデコ外側ラッパー。376〜1279px ははみ出し表示、それ以外は右はみ出しをクリップ */
.footer-sp-wrap .footer__deco-bread-outer {
  position: absolute;
  right: 0;
  top: -93px;
  width: 154px;
  height: 179px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
@media (min-width: 376px) and (max-width: 1279px) {
  .footer-sp-wrap .footer__deco-bread-outer {
    overflow: visible; /* レスポンシブ時は豆同様にはみ出しを表示 */
  }
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer__deco-bread-outer {
    top: -170px;
    width: 298px; /* 389 - 91 = 298px */
    height: 359px;
  }
}

/* パンデコ用ラッパー: 376〜1279px ははみ出し表示、SP 375px では右 40px クリップ、上方向ははみ出し（セクション跨ぎ） */
.footer-sp-wrap .footer__deco-bread-wrap {
  position: absolute;
  right: 0;
  top: 0;
  width: 154px;
  height: 179px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 376px) and (max-width: 1279px) {
  .footer-sp-wrap .footer__deco-bread-wrap {
    overflow: visible;
  }
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer__deco-bread-wrap {
    right: -91px;
    width: 389px;
    height: 359px;
    overflow: visible;
  }
}

.footer-sp-wrap .footer__deco-bread-wrap .footer__deco--bread {
  position: absolute;
  right: -40px;
  top: 0;
  width: 194px;
  height: 179px;
  pointer-events: none;
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer__deco-bread-wrap .footer__deco--bread {
    right: 0;
    width: 389px;
    height: 359px;
  }
}

.footer-sp-wrap .footer__deco--bread img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* コーヒー豆デコ: PC は $footer-deco-beans-left-pc で左にはみ出し */
.footer-sp-wrap .footer__deco--beans {
  position: absolute;
  left: -32px;
  bottom: 89px;
  width: 128px;
  height: 108px;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer__deco--beans {
    left: -77px;
    bottom: 0;
    width: 341px;
    height: 288px;
  }
}

.footer-sp-wrap .footer__deco--beans img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 吹き出し: 旧 -8% は親幅≈100vw に比例し、タブレットで左に離れすぎる → clamp で抑える */
.footer-sp-wrap .footer__deco--balloon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  /* SP: 左上へ少し寄せる（1280px 未満のみ。PC は下記メディアクエリ） */
  left: clamp(-76px, -8.5vw, -24px);
  top: clamp(-44px, -5.2%, -10px);
  width: 200px;
  height: 172px;
}
@media (min-width: 1280px) {
  .footer-sp-wrap .footer__deco--balloon {
    left: 26.25%;
    top: -5.04%;
    right: 55.55%;
    bottom: 84.92%;
    width: auto;
    height: 200px;
    max-width: none;
  }
}

.footer-sp-wrap .footer__deco--balloon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ---------- タブレット帯（756px〜1279px）: ACCESS（`@mixin footer-access-tablet`） ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  .footer-sp .access__inner {
    max-width: clamp(335px, 35vw + 148px, 688px);
    padding-inline: clamp(20px, 2.8vw + 12px, 72px);
    box-sizing: border-box;
    gap: clamp(40px, 3vw, 40px);
  }
  .footer-sp .access__heading {
    height: auto;
    width: auto;
  }
  .footer-sp .access__title-en {
    font-size: clamp(40px, 2.5vw + 22px, 52px);
    letter-spacing: clamp(4px, 0.4vw + 1px, 10.4px);
    margin-left: clamp(0px, 0.5vw, 10px);
  }
  .footer-sp .access__title-ja {
    font-size: clamp(12px, 0.6vw + 8px, 14px);
  }
  .footer-sp .access__map-wrap {
    flex: 1 1 clamp(240px, 38vw, 344px);
    min-width: 0;
    height: clamp(184px, 22vw + 80px, 377px);
    border-width: clamp(5px, 0.45vw + 2.5px, 10px);
  }
  .footer-sp .access__shop-info {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(24px, 3.5vw, 43px);
    justify-content: center;
  }
  .footer-sp .access__dl {
    flex: 1 1 clamp(240px, 38vw, 344px);
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(16px, 2.2vw, 20px) clamp(20px, 3vw, 40px);
    width: min(100%, 688px);
    margin-inline: auto;
    justify-content: center;
    align-content: center;
  }
  .footer-sp .access__shop-info .access__row {
    width: clamp(240px, 42vw, 324px);
    max-width: 100%;
    padding-bottom: clamp(2px, 0.35vw, 4px);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* ---------- 1. ヒーロー兼ヘッダー ---------- */
/* site-header.concept-page-hero：ヘッダーとヒーロー合体・画面最上部に表示・ロゴなし */
.site-header.concept-page-hero {
  position: relative;
  width: 100%;
  height: 120px;
  padding: 6px;
  display: block;
  justify-content: unset;
  align-items: unset;
  min-height: unset;
  margin: 0;
}
@media (min-width: 1280px) {
  .site-header.concept-page-hero {
    height: 320px;
    padding: 10px;
  }
}

/* TOP では .Top .site-header が PC で幅 200px（縦ナビ用）。コンセプトは全幅ヒーローのため上書き */
@media (min-width: 1280px) {
  .Top .site-header.concept-page-hero {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    height: 320px;
    padding: 10px;
  }
}

/* ヒーロー（メインビジュアル）Figma mainvisual-sp: 19716-1772 / PC: 19716-1560 */
.concept-page-hero {
  overflow: hidden;
}

/* メニューは INDEX と同じ（icon-drawer-menu-main.svg・背景なし）。PC もドロワー用に表示 */
.site-header.concept-page-hero .header__inner--concept {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  padding: 10px;
  z-index: 2;
  justify-content: flex-end;
}
@media (max-width: 1279px) {
  .site-header.concept-page-hero .header__inner--concept {
    padding: 6px;
  }
}
@media (min-width: 1280px) {
  .site-header.concept-page-hero .header__inner--concept {
    top: 10px;
    right: 10px;
    padding: 0;
  }
}

@media (min-width: 1280px) {
  .site-header.concept-page-hero .header__hamburger {
    top: 0;
  }
}

.concept-page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.concept-page-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* 二重枠: Figma p-[6px]（SP）/ p-[10px]（PC）。PC 外枠 inset・内枠 inset は _variables_refined の $concept-page-hero-line-*。SP 19719:9559: 内 ml 1.38% / mt 5px / w 97.24% */
.concept-page-hero__line {
  position: absolute;
  border: 2px solid var(--cr-white, #fff);
  pointer-events: none;
  box-sizing: border-box;
}
@media (max-width: 1279px) {
  .concept-page-hero__line {
    /* ヒーロー 120px・padding 6 の内側 108px のうち、二重枠に margin:6 で外側に空け（外枠の縦は約 96px＝108−12） */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    margin: 6px;
    max-width: none;
    height: auto;
    transform: none;
    display: block;
  }
}
@media (min-width: 1280px) {
  .concept-page-hero__line {
    /* padding: 10px の内側で四辺 inset（外枠＋内枠をまとめて少し内側へ：$concept-page-hero-line-inset-pc） */
    left: 11px;
    right: 11px;
    top: 11px;
    bottom: 11px;
    width: auto;
    margin: 0;
    max-width: none;
    height: auto;
    transform: none;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
}

.concept-page-hero__line-inner {
  position: absolute;
  border: 1px solid var(--cr-white, #fff);
  box-sizing: border-box;
  /* 親 .concept-page-hero__line は pointer-events: none だが、子は既定で auto のため
     内側の透明ヒット領域がクリックを奪う。ヒーロー直下のナビ等への誤遮断を防ぐ */
  pointer-events: none;
}
@media (max-width: 1279px) {
  .concept-page-hero__line-inner {
    /* Figma mainvisual-sp（ギフト 19719:9559 ほか）: 内枠 ml 1.38% / mt 5px / w 97.24% / 外枠比縦 98/108 */
    inset: auto;
    left: 1.38%;
    top: 5px;
    bottom: 5px;
    width: 97.24%;
    height: auto;
    margin: 0;
  }
}
@media (min-width: 1280px) {
  .concept-page-hero__line-inner {
    /* 内枠：外枠から $concept-page-hero-line-inner-inset-pc（カンプは 6px だが外枠だけ内寄せ時は変数で調整） */
    inset: auto;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    width: auto;
    height: auto;
    margin: 0;
  }
}

.concept-page-hero__title {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--cr-white, #fff);
  z-index: 1;
}
@media (max-width: 1279px) {
  .concept-page-hero__title {
    left: calc(50% + 0.5px);
    width: 196px;
    max-width: 200px;
  }
}
@media (min-width: 1280px) {
  .concept-page-hero__title {
    left: 50%;
    max-width: 800px;
    width: 439px;
  }
}

.concept-page-hero__title-en {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 1279px) {
  .concept-page-hero__title-en {
    font-size: 32px;
    letter-spacing: 6.4px;
    display: inline-block;
    margin-left: 6px;
  }
}
@media (min-width: 1280px) {
  .concept-page-hero__title-en {
    font-size: 72px;
    letter-spacing: 14.4px;
    display: inline-block;
    margin-left: 16px;
  }
}

.concept-page-hero__title-ja {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1279px) {
  .concept-page-hero__title-ja {
    font-size: 12px;
    letter-spacing: 0.96px;
  }
}
@media (min-width: 1280px) {
  .concept-page-hero__title-ja {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
}

/* ---------- 2. パンくず ---------- */
.concept-page__pankuzu {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 20px 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: #382620;
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .concept-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
  }
}
.concept-page__pankuzu p {
  margin: 0;
}

.concept-page__pankuzu a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 3. メイン・セクション共通 ---------- */
/* メインコンテンツ（Figma main: 19716-1774）SP: pt 60px, pb 160px, w 335px, gap 100px
   幅の理屈: 親は .page-content-wrap（padding なし）> .content-center（max-width 375px）。
   margin: 0 20px にすると main の「含まれる領域」が 375px のままなので、main の content-box は 375−40＝335px になる。
   ただし子の .concept-page__section は width:100% で main の content-box を継承するだけなので、
   セクション幅を確実に 335px にするため main は幅を明示し、左右は margin: auto で中央寄せにする。 */
.concept-page__main {
  width: 335px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 0 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}
@media (min-width: 1280px) {
  .concept-page__main {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    align-items: stretch;
    gap: 200px;
  }
}

/* セクション共通（SP では幅を 335px に固定） */
.concept-page__section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--cr-contrast, #222);
}
@media (max-width: 1279px) {
  .concept-page__section {
    width: 335px;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .concept-page__section {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 70px;
  }
}

@media (min-width: 1280px) {
  .concept-page__section--reverse {
    flex-direction: row-reverse;
  }
}

/* SP: Section2（パスタ・reverse）をブロック単位でやや下げる。値は vars.$concept-page-section2-margin-top-sp */
@media (max-width: 1279px) {
  .concept-page__section--2 {
    margin-top: 31px;
  }
}

/* SP: Section2 の margin 分を相殺し、必要なら vars.$concept-page-section3-additional-pull-sp でさらに上げる */
@media (max-width: 1279px) {
  .concept-page__section--3 {
    margin-top: calc(0px - 31px - 1px);
  }
}

/* デコ背景（セクションごとの四角） */
.concept-page__deco-bg {
  position: absolute;
  background: var(--cr-base-dark, #eae0d5);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1279px) {
  .concept-page__deco-bg--section1 {
    left: 20px;
    bottom: -50px;
    width: 335px;
    height: 100px;
  }
}
@media (min-width: 1280px) {
  .concept-page__deco-bg--section1 {
    left: 206px;
    top: 630px;
    width: 984px;
    height: 200px;
  }
}

@media (max-width: 1279px) {
  .concept-page__deco-bg--section2 {
    left: -20px;
    top: 472px;
    width: 284px;
    height: 227px;
  }
}
@media (min-width: 1280px) {
  .concept-page__deco-bg--section2 {
    left: -90px;
    top: 160px;
    width: 580px;
    height: 437px;
  }
}

@media (max-width: 1279px) {
  .concept-page__deco-bg--section3 {
    left: 171px;
    top: 291px;
    width: 184px;
    height: 195px;
  }
}
@media (min-width: 1280px) {
  .concept-page__deco-bg--section3 {
    right: -90px;
    left: auto;
    top: -40px;
    width: 400px;
    height: 520px;
  }
}

/* ---------- 4. セクション本文 ---------- */
.concept-page__section-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  line-height: 2;
}
@media (min-width: 1280px) {
  .concept-page__section-body {
    width: 389px;
    flex-shrink: 0;
    gap: 34px;
  }
}

.concept-page__section-heading {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
}
@media (min-width: 1280px) {
  .concept-page__section-heading {
    font-size: 28px;
  }
}
.concept-page__section-heading p:last-child {
  margin-bottom: 0;
}

.concept-page__section-text {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  width: 335px;
  max-width: 100%;
}
@media (min-width: 1280px) {
  .concept-page__section-text {
    width: auto;
    line-height: 28px;
  }
}

/* ---------- 5. セクション画像共通 ---------- */
.concept-page__section-images {
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (min-width: 1280px) {
  .concept-page__section-images {
    width: 640px;
    flex-shrink: 0;
  }
}

/* ---------- 6. Section1 画像グリッド（Figma 19716-1852） ---------- */
@media (max-width: 1279px) {
  .concept-page__section-images--section1 {
    width: 335px;
    max-width: 100%;
    display: grid;
    grid-template-columns: 162px 162px;
    grid-template-rows: 209px 162px;
    gap: 11px;
    grid-template-areas: "bar bar" "coffee bread";
  }
}
@media (min-width: 1280px) {
  .concept-page__section-images--section1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
  }
}

.concept-page__section-img-wrap {
  position: relative;
  overflow: hidden;
}
.concept-page__section-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1279px) {
  .concept-page__section-img-wrap--bar {
    grid-area: bar;
    width: 100%;
    min-width: 0;
    height: 209px;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--bar {
    width: 640px;
    height: 400px;
  }
}

@media (max-width: 1279px) {
  .concept-page__section-img-wrap--coffee {
    grid-area: coffee;
    width: 162px;
    height: 162px;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--coffee {
    width: 310px;
    height: 310px;
  }
}

@media (max-width: 1279px) {
  .concept-page__section-img-wrap--bread {
    grid-area: bread;
    width: 162px;
    height: 162px;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--bread {
    width: 310px;
    height: 310px;
  }
}

/* ---------- 7. Section2 画像（SP: Figma 19716-1846 / PC: Figma 19716-1661） ---------- */
@media (max-width: 1279px) {
  .concept-page__section-images--section2 {
    display: grid;
    grid-template-columns: 52px 283px;
    grid-template-rows: 212px 138px;
    gap: 0;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-images--section2 {
    display: block;
    position: relative;
    width: 640px;
    height: 537px;
    flex-shrink: 0;
  }
}

@media (max-width: 1279px) {
  .concept-page__section-img-wrap--pasta1 {
    grid-column: 2;
    grid-row: 1;
    width: 283px;
    height: 212px;
    min-width: 0;
    min-height: 0;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--pasta1 {
    position: absolute;
    left: 100px;
    top: 0;
    width: 540px;
    height: 405px;
    min-width: 0;
    min-height: 0;
    z-index: 1; /* PC: pasta2 より背面 */
  }
}

/* SP: 下部多め。PC: Figma 19716-1640（h 237% top -91.5%）に近い切り出し */
.concept-page__section-img--crop-pasta1 {
  object-fit: cover;
  object-position: 0 66%;
}
@media (min-width: 1280px) {
  .concept-page__section-img--crop-pasta1 {
    object-position: 0 67%;
  }
}

@media (max-width: 1279px) {
  .concept-page__section-img-wrap--pasta2 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: 183px;
    height: 138px;
    min-width: 0;
    min-height: 0;
    margin-top: -69px;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--pasta2 {
    position: absolute;
    left: 0;
    top: 274px;
    width: 350px;
    height: 263px;
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    z-index: 2; /* PC: pasta1 より前面 */
  }
}

/* SP / PC で Figma の img クロップに合わせる */
.concept-page__section-img--crop-pasta2 {
  object-fit: cover;
  object-position: 0 45%;
}
@media (min-width: 1280px) {
  .concept-page__section-img--crop-pasta2 {
    object-position: 0 45%;
  }
}

/* ---------- 8. Section3 画像（Figma 19716-1837） ---------- */
@media (max-width: 1279px) {
  .concept-page__section-img-wrap--croissant {
    width: 100%;
    height: 210px;
  }
}
@media (min-width: 1280px) {
  .concept-page__section-img-wrap--croissant {
    width: 640px;
    height: 400px;
  }
}

/* ---------- タブレット帯（756px〜1279px）: 教材見本のように PC レイアウトの縮小版（2 カラム） ---------- */
/* 755px 以下は上記の max-width:1279px ブロック＝SP。ここから PC と同じ row / row-reverse を適用。 */
/* layout/_base.scss の .content-center は body.page-concept で max-width を上書きする。 */
/* デコ背景は SP 用座標のため、この帯では非表示（PC 相当の装飾は 1280px 以上で表示）。 */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-concept .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  /* ヒーロー／スペーサー／フッターの全幅は layout/_base.scss の .content-center > … 共通ルールに委ねる */
  body.page-concept .concept-page__deco-bg {
    display: none;
  }
  .site-header.concept-page-hero,
  .Top .site-header.concept-page-hero {
    height: clamp(200px, 32vw, 320px);
    padding: 10px;
  }
  /* ヒーロー枠: ヘッダー padding 内。SP と同様に二重枠外側 6px */
  .concept-page-hero__line {
    left: 0;
    right: 0;
    width: auto;
    margin: 6px;
    max-width: none;
    top: 0;
    transform: none;
    height: clamp(200px, 28vw, 300px);
    display: block;
  }
  .concept-page-hero__line-inner {
    position: absolute;
    inset: 6px;
    width: auto;
    height: auto;
  }
  .concept-page-hero__title {
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    width: min(439px, 88vw);
  }
  .concept-page-hero__title-en {
    font-size: clamp(40px, 5.5vw, 72px);
    letter-spacing: 0.2em;
    margin-left: 16px;
  }
  .concept-page-hero__title-ja {
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: 0.08em;
  }
  .concept-page__pankuzu {
    gap: 15px;
    padding: 16px clamp(24px, 5vw, 90px) 0;
    font-size: 14px;
  }
  .concept-page__main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(60px, 6vw, 80px) 20px 48px;
    gap: clamp(100px, 14vw, 200px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .concept-page__section {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 4vw, 70px);
  }
  .concept-page__section--reverse {
    flex-direction: row-reverse;
  }
  .concept-page__section-body {
    width: min(389px, 38%);
    flex-shrink: 0;
    gap: clamp(24px, 3vw, 34px);
  }
  .concept-page__section-heading {
    font-size: clamp(20px, 2vw, 28px);
  }
  .concept-page__section-text {
    width: auto;
    max-width: 100%;
    line-height: 28px;
  }
  .concept-page__section-images {
    width: min(640px, 58%);
    flex: 1 1 58%;
    min-width: 0;
  }
  /* Section1: PC と同じ flex ラップ（縮小） */
  .concept-page__section-images--section1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(12px, 2vw, 20px);
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .concept-page__section-img-wrap--bar {
    grid-area: unset;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 640/400;
    min-height: 0;
  }
  .concept-page__section-img-wrap--coffee,
  .concept-page__section-img-wrap--bread {
    grid-area: unset;
    width: min(310px, 50% - 10px);
    max-width: calc(50% - 10px);
    flex: 1 1 140px;
    height: auto;
    aspect-ratio: 1;
    min-height: 0;
  }
  /* Section2: PC と同じ絶対配置を、640×537 を基準に % でスケール */
  .concept-page__section-images--section2 {
    display: block;
    position: relative;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 640/537;
    margin-inline: 0;
    flex: 1 1 58%;
  }
  .concept-page__section-img-wrap--pasta1 {
    grid-column: unset;
    grid-row: unset;
    position: absolute;
    left: 15.625%;
    top: 0;
    width: 84.375%;
    height: 75.4189944134%;
    min-width: 0;
    min-height: 0;
    z-index: 1;
  }
  .concept-page__section-img-wrap--pasta2 {
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    position: absolute;
    left: 0;
    top: 51.0242085661%;
    width: 54.6875%;
    height: 48.9757914339%;
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    z-index: 2;
  }
  .concept-page__section-img-wrap--croissant {
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 640/400;
    margin-inline: 0;
  }
  .concept-access-spacer {
    height: 125px;
  }
}
/* メインコンテンツとアクセス（フッター）の間 — TOP の .news-access-spacer とは別名・別高さ（PC は広め） */
.concept-access-spacer {
  width: 100%;
  flex-shrink: 0;
  height: 126px;
}
@media (min-width: 1280px) {
  .concept-access-spacer {
    height: 125px;
  }
}

/* ---------- PC フッター／アクセス（Figma 19716-1563 ほか・共通フッター利用ページ） ---------- */
/* ※ site-footer-tail を使うが、当初セレクタに含まれていなかった page-shop / inner / news でも同一レイアウトに揃える */
/* ※ DOM 行順は Figma 19716-1775（住所→TEL→Mail→営業→定休→座席）。home も同一（トップのみ別順だった誤マークアップを修正済み） */
@media (min-width: 1280px) {
  body.home .content-center,
  body.front-page .content-center,
  body.page-concept .content-center,
  body.page-menu .content-center,
  body.page-menu-category .content-center,
  body.page-shop .content-center,
  body.page-inner .content-center,
  body.page-news-figma .content-center,
  body.page-gift .content-center {
    max-width: none;
    width: 100%;
  }
  body.home .footer-sp-wrap,
  body.front-page .footer-sp-wrap,
  body.page-concept .footer-sp-wrap,
  body.page-menu .footer-sp-wrap,
  body.page-menu-category .footer-sp-wrap,
  body.page-shop .footer-sp-wrap,
  body.page-inner .footer-sp-wrap,
  body.page-news-figma .footer-sp-wrap,
  body.page-gift .footer-sp-wrap {
    width: 100%;
  }
  /* 地図 → 下に 2 列×3 行の dl（688px 内・各行 324px / gap 20×40） */
  body.home .footer-sp .access__shop-info,
  body.front-page .footer-sp .access__shop-info,
  body.page-concept .footer-sp .access__shop-info,
  body.page-menu .footer-sp .access__shop-info,
  body.page-menu-category .footer-sp .access__shop-info,
  body.page-shop .footer-sp .access__shop-info,
  body.page-inner .footer-sp .access__shop-info,
  body.page-news-figma .footer-sp .access__shop-info,
  body.page-gift .footer-sp .access__shop-info {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  body.home .footer-sp .access__dl,
  body.front-page .footer-sp .access__dl,
  body.page-concept .footer-sp .access__dl,
  body.page-menu .footer-sp .access__dl,
  body.page-menu-category .footer-sp .access__dl,
  body.page-shop .footer-sp .access__dl,
  body.page-inner .footer-sp .access__dl,
  body.page-news-figma .footer-sp .access__dl,
  body.page-gift .footer-sp .access__dl {
    gap: 19px 40px;
    max-width: 688px;
    margin-inline: auto;
    /* 地図直下の余白をやや詰めてブロック全体を少し上に */
    margin-top: -1px;
  }
  body.home .footer-sp .access__shop-info .access__row,
  body.front-page .footer-sp .access__shop-info .access__row,
  body.page-concept .footer-sp .access__shop-info .access__row,
  body.page-menu .footer-sp .access__shop-info .access__row,
  body.page-menu-category .footer-sp .access__shop-info .access__row,
  body.page-shop .footer-sp .access__shop-info .access__row,
  body.page-inner .footer-sp .access__shop-info .access__row,
  body.page-news-figma .footer-sp .access__shop-info .access__row,
  body.page-gift .footer-sp .access__shop-info .access__row {
    width: 324px;
    padding-bottom: 6px;
    box-sizing: border-box;
  }
  /* 左: 住所・TEL・Mail / 右: 営業時間・定休日・座席 */
  body.home .footer-sp .access__dl .access__row:nth-child(1),
  body.front-page .footer-sp .access__dl .access__row:nth-child(1),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(1),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(1),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(1),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(1),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(1),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(1),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(1) {
    order: 1;
  }
  body.home .footer-sp .access__dl .access__row:nth-child(4),
  body.front-page .footer-sp .access__dl .access__row:nth-child(4),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(4),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(4),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(4),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(4),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(4),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(4),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(4) {
    order: 2;
  }
  body.home .footer-sp .access__dl .access__row:nth-child(2),
  body.front-page .footer-sp .access__dl .access__row:nth-child(2),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(2),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(2),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(2),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(2),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(2),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(2),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(2) {
    order: 3;
  }
  body.home .footer-sp .access__dl .access__row:nth-child(5),
  body.front-page .footer-sp .access__dl .access__row:nth-child(5),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(5),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(5),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(5),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(5),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(5),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(5),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(5) {
    order: 4;
  }
  body.home .footer-sp .access__dl .access__row:nth-child(3),
  body.front-page .footer-sp .access__dl .access__row:nth-child(3),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(3),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(3),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(3),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(3),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(3),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(3),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(3) {
    order: 5;
  }
  body.home .footer-sp .access__dl .access__row:nth-child(6),
  body.front-page .footer-sp .access__dl .access__row:nth-child(6),
  body.page-concept .footer-sp .access__dl .access__row:nth-child(6),
  body.page-menu .footer-sp .access__dl .access__row:nth-child(6),
  body.page-menu-category .footer-sp .access__dl .access__row:nth-child(6),
  body.page-shop .footer-sp .access__dl .access__row:nth-child(6),
  body.page-inner .footer-sp .access__dl .access__row:nth-child(6),
  body.page-news-figma .footer-sp .access__dl .access__row:nth-child(6),
  body.page-gift .footer-sp .access__dl .access__row:nth-child(6) {
    order: 6;
  }
  body.home .footer-sp .access__title-en,
  body.front-page .footer-sp .access__title-en,
  body.page-concept .footer-sp .access__title-en,
  body.page-menu .footer-sp .access__title-en,
  body.page-menu-category .footer-sp .access__title-en,
  body.page-shop .footer-sp .access__title-en,
  body.page-inner .footer-sp .access__title-en,
  body.page-news-figma .footer-sp .access__title-en,
  body.page-gift .footer-sp .access__title-en {
    margin-left: 10px;
  }
  body.home .footer-sp .access__heading,
  body.front-page .footer-sp .access__heading,
  body.page-concept .footer-sp .access__heading,
  body.page-menu .footer-sp .access__heading,
  body.page-menu-category .footer-sp .access__heading,
  body.page-shop .footer-sp .access__heading,
  body.page-inner .footer-sp .access__heading,
  body.page-news-figma .footer-sp .access__heading,
  body.page-gift .footer-sp .access__heading {
    justify-content: center;
    height: auto;
    min-height: 0;
    width: auto;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.menu-page__access-spacer {
  width: 100%;
  flex-shrink: 0;
  height: 0px;
}
@media (min-width: 1280px) {
  .menu-page__access-spacer {
    height: 0px;
  }
}

/* ---------- ヒーロー：SP/PC とも茶丸＋iOS風アイコン（19716:1883 / 19716:1876） ---------- */
body.page-menu .menu-page-hero__icon-pc,
body.page-menu-category .menu-page-hero__icon-pc {
  display: none !important;
}

body.page-menu .menu-page-hero__icon-sp,
body.page-menu-category .menu-page-hero__icon-sp {
  display: block;
  width: 28px;
  height: auto;
}

/* 詳細度を .site-header.concept-page-hero .header__hamburger（PC）より上げる。
   さもないと 1280px+ で display:block・寸法auto・背景透明が勝ち、FABが消える */
body.page-menu .site-header.concept-page-hero .menu-page-hero__menu-fab,
body.page-menu-category .site-header.concept-page-hero .menu-page-hero__menu-fab {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

@media (min-width: 1280px) {
  body.page-menu .site-header.concept-page-hero .menu-page-hero__menu-fab,
  body.page-menu-category .site-header.concept-page-hero .menu-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
}
body.page-menu .header__inner--menu-sp,
body.page-menu-category .header__inner--menu-sp {
  top: 0;
  right: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  body.page-menu .header__inner--menu-sp,
  body.page-menu-category .header__inner--menu-sp {
    top: 10px;
    right: 10px;
  }
}
/* ---------- SP パンくず文字色 cr-main（19716:1884） ---------- */
@media (max-width: 1279px) {
  body.page-menu .menu-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-menu .menu-page__pankuzu a {
    color: inherit;
  }
}
/* PC パンくず（19716:1877） */
@media (min-width: 1280px) {
  body.page-menu .menu-page__pankuzu--pc {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-menu .menu-page__pankuzu--pc a {
    color: inherit;
  }
}
/* ---------- SP 専用メニュー本体（19716:1885） ---------- */
.menu-page-sp {
  display: none;
  width: 100%;
  background: var(--cr-base, #f3efeb);
  padding: 60px 0 160px;
  box-sizing: border-box;
}
@media (max-width: 1279px) {
  .menu-page-sp {
    display: block;
  }
}

.menu-page-sp__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 335px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 2×2 カテゴリボタン #888・内側白枠 152×56 */
.menu-page-sp__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  row-gap: 14px;
  width: 100%;
}

.menu-page-sp__nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 64px;
  box-sizing: border-box;
  background: #888888; /* #888 Figma cr-disable */
  color: var(--cr-white, #fff);
  transition: background-color 0.3s ease-in-out;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.menu-page-sp__nav-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 152px;
  height: 56px;
  border: 1px solid var(--cr-white, #fff);
  pointer-events: none;
  box-sizing: border-box;
}
.menu-page-sp__nav-btn:hover {
  background: var(--cr-main, #382620);
}

.menu-page-sp__block {
  scroll-margin-top: 16px;
  width: 100%;
}

.menu-page-sp__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 19px;
  justify-content: flex-start;
  width: 100%;
}

.menu-page-sp__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 158px;
  max-width: calc(50% - 10px);
  flex: 0 0 auto;
}
.menu-page-sp__card[id^=menu-sp-] {
  scroll-margin-top: 16px;
}

.menu-page-sp__card-img {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
}
.menu-page-sp__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-page-sp__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
  width: 100%;
}

.menu-page-sp__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
}

.menu-page-sp__card-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: 100%;
  font-family: "Damion", cursive;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
}

.menu-page-sp__card-price-num {
  font-family: inherit;
}

/* ドリンク（19730:3951） */
.menu-page-sp__drinks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.menu-page-sp__drink-group {
  display: flex;
  flex-direction: column;
  gap: 19px;
  width: 100%;
}

.menu-page-sp__drink-heading {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cr-contrast, #222);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

.menu-page-sp__drink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.menu-page-sp__drink-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

.menu-page-sp__drink-name {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
}

.menu-page-sp__drink-price {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: "Damion", cursive;
  font-size: 20px;
  text-align: right;
  white-space: nowrap;
}

/* ---------- PC メニュー本体（19716:1878） ---------- */
.menu-page-pc {
  display: none;
  width: 100%;
  background: var(--cr-base, #f3efeb);
  padding: 80px 0 160px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .menu-page-pc {
    display: block;
  }
}

.menu-page-pc__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
}

.menu-page-pc__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.menu-page-pc__nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 69px;
  box-sizing: border-box;
  background: #888888;
  color: var(--cr-white, #fff);
  transition: background-color 0.3s ease-in-out;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.menu-page-pc__nav-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 192px;
  height: 61px;
  border: 1px solid var(--cr-white, #fff);
  pointer-events: none;
  box-sizing: border-box;
}
.menu-page-pc__nav-btn:hover {
  background: var(--cr-main, #382620);
}

.menu-page-pc__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: flex-start;
  width: 100%;
}

.menu-page-pc__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 245px;
  flex: 0 0 auto;
  /* ナビジャンプ用 id 付きカード（#menu-sp-{genre} と WP/静的で一致） */
}
.menu-page-pc__card#menu-sp-pasta, .menu-page-pc__card#menu-sp-salad, .menu-page-pc__card#menu-sp-bread-sweets {
  scroll-margin-top: 100px;
}

.menu-page-pc__card-img {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
}
.menu-page-pc__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-page-pc__card-body {
  line-height: 1.5;
  color: var(--cr-contrast, #222);
  width: 100%;
}

.menu-page-pc__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
}

.menu-page-pc__card-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: 100%;
  font-family: "Damion", cursive;
  font-size: 24px;
  text-align: center;
}

/* ドリンク：左 327 白枠＋311 画像、右 3 列（19730:3952） */
.menu-page-pc__drink {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 86px;
  width: 100%;
  flex-wrap: wrap;
}

.menu-page-pc__drink-visual {
  flex-shrink: 0;
  width: 327px;
  max-width: 100%;
  height: 327px;
  background: var(--cr-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
}

.menu-page-pc__drink-visual-inner {
  width: 311px;
  height: 311px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
}
.menu-page-pc__drink-visual-inner img {
  position: absolute;
  width: 111%;
  height: 167%;
  left: -5.6%;
  top: -13%;
  object-fit: cover;
  object-position: center;
}

.menu-page-pc__drink-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: flex-start;
  flex: 1;
  min-width: 280px;
}

.menu-page-pc__drink-col {
  width: 197px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 19px; /* Figma: カラム内の「見出し〜リスト」間隔 */
  /* flex-start だと ul が内容幅に縮み、価格の右寄せが効かない → 列幅いっぱいに揃える */
  align-items: stretch;
}

.menu-page-pc__drink-heading {
  margin: 0; /* gap は .menu-page-pc__drink-col 側で制御 */
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cr-contrast, #222);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

.menu-page-pc__drink-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma: 行間 */
  line-height: 1.5;
  white-space: nowrap;
}
.menu-page-pc__drink-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
.menu-page-pc__drink-list li > span:first-child {
  min-width: 0;
}

.menu-page-pc__drink-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
  flex-shrink: 0;
  font-family: "Damion", cursive;
  font-size: 20px;
  white-space: nowrap;
  text-align: right;
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、SP ブロックを PC 型の縮小版として補間（1280px 未満は .menu-page-sp のみ表示） ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-menu .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-menu .site-header.concept-page-hero .menu-page-hero__menu-fab,
  body.page-menu-category .site-header.concept-page-hero .menu-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
  body.page-menu .header__inner--menu-sp,
  body.page-menu-category .header__inner--menu-sp {
    top: 10px;
    right: 10px;
  }
  body.page-menu .menu-page__pankuzu--pc {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-menu .menu-page__pankuzu--pc a {
    color: inherit;
  }
  body.page-menu .menu-page-sp {
    padding: 80px 0 160px;
  }
  body.page-menu .menu-page-sp__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: clamp(24px, 3vw, 40px);
    max-width: min(1100px, 100% - 32px);
    width: 100%;
    align-items: start;
  }
  body.page-menu .menu-page-sp__nav {
    grid-column: 1/-1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    row-gap: 14px;
    width: 100%;
    margin-bottom: clamp(20px, 4vw, 36px);
  }
  body.page-menu .menu-page-sp__block {
    display: contents;
  }
  body.page-menu .menu-page-sp__cards {
    display: contents;
  }
  body.page-menu .menu-page-sp__card {
    width: auto;
    max-width: none;
    min-width: 0;
    height: 100%;
  }
  body.page-menu .menu-page-sp__card-body {
    flex: 1;
    min-height: 0;
  }
  body.page-menu .menu-page-sp__card-price {
    margin-top: auto;
  }
  body.page-menu .menu-page-sp__drinks {
    grid-column: 1/-1;
    padding: 0;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
body.page-menu-category.page-menu {
  background: var(--cr-base, #f3efeb);
}

/* ---------- パンくず（SP: 12px・px20 / PC: 14px・px90） ---------- */
.menu-category-page__pankuzu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px 20px 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
.menu-category-page__pankuzu a {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 1280px) {
  .menu-category-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
  }
}

/* ---------- メイン ---------- */
.menu-category-page__main {
  padding: 60px 0 160px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
@media (min-width: 1280px) {
  .menu-category-page__main {
    padding: 80px 0 160px;
  }
}

.menu-category-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 335px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .menu-category-page__inner {
    width: 1100px;
    gap: 80px;
  }
}

/* ---------- カテゴリボタン（SP 160×64 / PC 200×69・内側白枠） ---------- */
.menu-category-page__cat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  row-gap: 14px;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .menu-category-page__cat-nav {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 14px;
    max-width: none;
    row-gap: 0;
  }
}

.menu-category-page__cat-btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 64px;
  padding: 22px 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-white, #fff);
  text-align: center;
  text-decoration: none;
  background: var(--cr-disable, #888);
}
.menu-category-page__cat-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 152px;
  height: 56px;
  border: 1px solid var(--cr-white, #fff);
  pointer-events: none;
  box-sizing: border-box;
}
.menu-category-page__cat-btn:hover {
  opacity: 0.92;
}
.menu-category-page__cat-btn.is-current {
  background: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .menu-category-page__cat-btn {
    width: 200px;
    height: 69px;
    padding: 24px 20px;
    font-size: 16px;
  }
  .menu-category-page__cat-btn::after {
    width: 192px;
    height: 61px;
  }
}

/* ---------- ギャラリー（SP: 画像+タイトル+価格 / PC: 画像中心） ---------- */
.menu-category-page__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 19px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-start;
}
@media (min-width: 1280px) {
  .menu-category-page__gallery {
    gap: 40px;
  }
}

.menu-category-page__gallery-item {
  width: 158px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
@media (min-width: 1280px) {
  .menu-category-page__gallery-item {
    width: 245px;
  }
}
.menu-category-page__gallery-item picture {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.menu-category-page__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-category-page__card-body {
  color: var(--cr-contrast, #222);
  line-height: 1.5;
  width: 100%;
}

.menu-category-page__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
}

.menu-category-page__card-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: 100%;
  font-family: "Damion", cursive;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- ドリンクページ: SP/PC で同一HTMLを表示切替 ---------- */
.menu-category-page__drink-sp {
  display: block;
  width: 100%;
}
@media (min-width: 1280px) {
  .menu-category-page__drink-sp {
    display: none;
  }
}

.menu-category-page__drink-pc {
  display: none;
  width: 100%;
}
@media (min-width: 1280px) {
  .menu-category-page__drink-pc {
    display: block;
  }
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、ナビ／ギャラリーは PC 型の縮小版 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-menu-category .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-menu-category .site-header.concept-page-hero .menu-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
  body.page-menu-category .header__inner--menu-sp {
    top: 10px;
    right: 10px;
  }
  body.page-menu-category .menu-category-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
  }
  body.page-menu-category .menu-category-page__main {
    padding: 80px 0 160px;
  }
  body.page-menu-category .menu-category-page__inner {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
    gap: clamp(60px, 6vw, 80px);
  }
  body.page-menu-category .menu-category-page__cat-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    row-gap: 14px;
    max-width: none;
    width: 100%;
  }
  body.page-menu-category .menu-category-page__gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    justify-content: start;
  }
  body.page-menu-category .menu-category-page__gallery-item {
    width: auto;
    min-width: 0;
    height: 100%;
  }
  body.page-menu-category .menu-category-page__card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.page-menu-category .menu-category-page__card-price {
    margin-top: auto;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* body.page-news-figma でスコープ（他ページの .site-header と干渉しない） */
body.page-news-figma,
body.page-news-category,
body.page-news-single {
  background: var(--cr-base, #f3efeb);
}

.news-figma-hero {
  position: relative;
  width: 100%;
  height: 120px;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .news-figma-hero {
    height: 320px;
    padding: 10px;
  }
}

.news-figma-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.news-figma-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.news-figma-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4);
}

/* 二重白枠（SP: 19716:3297 / PC: 19716:3290 mainvisual__line 19709:5726） */
.news-figma-hero__line {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 108px;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 1280px) {
  .news-figma-hero__line {
    /* PC: 外枠 1260×300 相当を可変幅で（padding 10px 内側） */
    left: 10px;
    right: 10px;
    top: 10px;
    height: 300px;
  }
}

.news-figma-hero__line-outer {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--cr-white, #fff);
}

.news-figma-hero__line-inner {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--cr-white, #fff);
  /* 極窄幅のみ固定内枠（Figma SP 375 相当） */
}
@media (max-width: 375px) {
  .news-figma-hero__line-inner {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 353px;
    height: 98px;
  }
}
.news-figma-hero__line-inner {
  /* 376px〜1279px: .line-outer と同様にコンテナ幅へ追従（6px インセット）。756px 未満も含む */
}
@media (min-width: 376px) and (max-width: 1279px) {
  .news-figma-hero__line-inner {
    transform: none;
    left: 6px;
    right: 6px;
    width: auto;
    top: 6px;
    bottom: 6px;
    height: auto;
  }
}
@media (min-width: 1280px) {
  .news-figma-hero__line-inner {
    /* PC: 内枠 1248×288 相当＝外枠から 6px インセット（長方形 23123） */
    transform: none;
    left: 6px;
    right: 6px;
    width: auto;
    top: 6px;
    bottom: 6px;
    height: auto;
  }
}

/* タイトル枠・英日: mixins/_hero-mainvisual-title.scss（CONCEPT と同一トークン。NEWS は z-index のみ上げる） */
.news-figma-hero__title {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--cr-white, #fff);
  z-index: 2;
}
@media (max-width: 1279px) {
  .news-figma-hero__title {
    left: calc(50% + 0.5px);
    width: 196px;
    max-width: 200px;
  }
}
@media (min-width: 1280px) {
  .news-figma-hero__title {
    left: 50%;
    max-width: 800px;
    width: 439px;
  }
}

/* .is-layout-flow 等の「隣接ブロックマージン」で和英の間が空かないよう明示（一覧・詳細とも body に page-news-figma） */
body.page-news-figma .news-figma-hero__title > p {
  margin-block: 0;
}

.news-figma-hero__title-en {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 1279px) {
  .news-figma-hero__title-en {
    font-size: 32px;
    letter-spacing: 6.4px;
    display: inline-block;
    margin-left: 6px;
  }
}
@media (min-width: 1280px) {
  .news-figma-hero__title-en {
    font-size: 72px;
    letter-spacing: 14.4px;
    display: inline-block;
    margin-left: 16px;
  }
}

.news-figma-hero__title-ja {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1279px) {
  .news-figma-hero__title-ja {
    font-size: 12px;
    letter-spacing: 0.96px;
  }
}
@media (min-width: 1280px) {
  .news-figma-hero__title-ja {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
}

/* メニュー FAB（SP 19716:3297 / PC 19716:3290: 60×60・#382620・右上 10px） */
.news-figma-hero__menu-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

.news-figma-hero__menu-btn {
  /* 見た目は .open-cafe-drawer-fab に寄せる（共通化） */
}
.news-figma-hero__menu-btn:focus-visible {
  outline: 2px solid var(--cr-white, #fff);
  outline-offset: 2px;
}

/* パンくず（SP: 19716:3298 / PC: 19716:3291） */
.news-figma-page__pankuzu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px 20px 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
.news-figma-page__pankuzu a {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 1280px) {
  .news-figma-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
  }
}

/* 一覧本文は .news-figma-list（_news-list.scss）で余白管理 */
.news-figma-page__main {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* ---------- タブレット帯（756px〜1279px）: ヒーロー・パンくずを SP〜PC の間に補間 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  .news-figma-hero {
    height: clamp(120px, 22vw, 320px);
    padding: clamp(6px, 1vw, 10px);
  }
  .news-figma-hero__line {
    left: clamp(6px, 1vw, 10px);
    right: clamp(6px, 1vw, 10px);
    top: clamp(6px, 1vw, 10px);
    bottom: clamp(6px, 1vw, 10px);
    height: auto;
  }
  /* .line-inner はベースの (376px–1279px) で outer に追従済み。ここではパディングに合わせインセットを補間 */
  .news-figma-hero__line-inner {
    left: clamp(6px, 1vw, 10px);
    right: clamp(6px, 1vw, 10px);
    top: clamp(6px, 1vw, 10px);
    bottom: clamp(6px, 1vw, 10px);
  }
  .news-figma-hero__title {
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    width: min(439px, 88vw);
  }
  .news-figma-hero__title-en {
    font-size: clamp(40px, 5.5vw, 72px);
    letter-spacing: 0.2em;
    margin-left: 16px;
  }
  .news-figma-hero__title-ja {
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: 0.08em;
  }
  .news-figma-page__pankuzu {
    gap: 15px;
    padding: clamp(8px, 1.2vw, 16px) clamp(20px, 5vw, 90px) 0;
    font-size: clamp(12px, 1.1vw, 14px);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* --- 一覧ラッパ（pt 60 pb 160 / inner 335） --- */
.news-figma-list {
  padding: 60px 20px 160px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .news-figma-list {
    padding: 80px 40px 160px;
  }
}

.news-figma-list__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .news-figma-list__inner {
    max-width: 1100px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px; /* 1100 - 720(main) - 320(sidebar) = 60（Figma inner 19716:3687） */
  }
}

.news-figma-list__primary {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}
@media (min-width: 1280px) {
  .news-figma-list__primary {
    width: 720px;
    flex-shrink: 0;
    align-items: stretch;
    gap: 60px; /* Figma main 19716:3711: articles と pagenation の間 */
  }
}

/* SP: Figma 19716:3765 — flex-wrap, gap-y 24px, justify-between, 158px カード */
.news-figma-list__articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 24px;
  width: 100%;
  list-style: none;
  padding: 0;
}
@media (min-width: 1280px) {
  .news-figma-list__articles {
    display: grid;
    grid-template-columns: repeat(2, 340px);
    gap: 40px; /* Figma araticles gap-y + 列間 40px */
    justify-content: start;
    width: 100%;
  }
}

.news-figma-list__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 158px;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .news-figma-list__card {
    width: 340px; /* Figma card-news-pc */
  }
}

.news-figma-list__card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1280px) {
  .news-figma-list__card-link {
    gap: 12px; /* Figma card-news-pc: image と body */
  }
}
.news-figma-list__card-link:hover .news-figma-list__card-title {
  opacity: 0.85;
}

/* 枠（レイアウト）は固定・中の画像だけ scale（overflow でクリップ） */
.news-figma-list__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 158/99;
  overflow: hidden;
  background: #e8e4e0;
}
@media (min-width: 1280px) {
  .news-figma-list__card-img {
    aspect-ratio: 340/213; /* Figma card-news__image */
  }
}
.news-figma-list__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.4s ease;
}

.news-figma-list__card-link:hover .news-figma-list__card-img img,
.news-figma-list__card:hover .news-figma-list__card-img img {
  transform: scale(1.08);
}

.news-figma-list__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
  font-size: 12px;
}
@media (min-width: 1280px) {
  .news-figma-list__card-body {
    font-size: 16px; /* タイトル基準に合わせる（日付は下で 14px） */
  }
}

.news-figma-list__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* SP: 3行まで */
}
@media (min-width: 1280px) {
  .news-figma-list__card-title {
    font-size: 16px;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* PC: 3行まで */
  }
}

.news-figma-list__card-date {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
}
@media (min-width: 1280px) {
  .news-figma-list__card-date {
    font-size: 14px;
  }
}

/* カテゴリバッジ（19709:6039 系） */
.news-figma-list__badge {
  position: absolute;
  left: -8px;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.news-figma-list__badge-top {
  display: flex;
  align-items: stretch;
}

.news-figma-list__badge-main {
  background: var(--cr-main, #382620);
  color: var(--cr-white, #fff);
  padding: 2px 10px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.news-figma-list__badge-deco-right {
  flex-shrink: 0;
  width: 5px;
  align-self: stretch;
  min-height: 22px;
}
.news-figma-list__badge-deco-right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.news-figma-list__badge-deco-bottom {
  width: 8px;
  height: 4px;
  flex-shrink: 0;
}
.news-figma-list__badge-deco-bottom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ページネーション（19716:3770） */
.news-figma-list__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-figma-list__page-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--cr-main, #382620);
  background: var(--cr-white, #fff);
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  text-decoration: none;
  cursor: pointer;
}
.news-figma-list__page-btn:hover {
  opacity: 0.9;
}
.news-figma-list__page-btn.is-current {
  background: var(--cr-main, #382620);
  color: var(--cr-white, #fff);
}

.news-figma-list__page-next,
a.news-figma-list__page-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid var(--cr-main, #382620);
  box-sizing: border-box;
  text-decoration: none;
}
.news-figma-list__page-next:hover,
a.news-figma-list__page-next:hover {
  opacity: 0.9;
}

/* 2ページ目など：前ページへ（矢印は next の左右反転） */
.news-figma-list__page-prev,
a.news-figma-list__page-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid var(--cr-main, #382620);
  box-sizing: border-box;
  text-decoration: none;
}
.news-figma-list__page-prev:hover,
a.news-figma-list__page-prev:hover {
  opacity: 0.9;
}

.news-figma-list__page-prev-icon {
  display: block;
  width: 8px;
  height: 8px;
  margin-right: -2px;
  border-right: 2px solid var(--cr-main, #382620);
  border-bottom: 2px solid var(--cr-main, #382620);
  transform: rotate(135deg);
}

/* Figma imgPageNext 相当（ローカル画像なしのため SVG 矢印） */
.news-figma-list__page-next-icon {
  display: block;
  width: 8px;
  height: 8px;
  margin-left: -2px;
  border-right: 2px solid var(--cr-main, #382620);
  border-bottom: 2px solid var(--cr-main, #382620);
  transform: rotate(-45deg);
}

/* サイドバー Figma 19716:3771（SP 縦積み / PC 右列・幅 320 は 19716:3292 sidebar と同型） */
.news-figma-list__sidebar {
  display: flex;
  flex-direction: column;
  gap: 60px; /* セクション間（Figma sidebar ルート gap-[60px]） */
  width: 100%;
}
@media (min-width: 1280px) {
  .news-figma-list__sidebar {
    width: 320px;
    flex-shrink: 0;
  }
}

.news-figma-list__sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma sidebar-section: heading とリストの間 gap-[20px] */
  background: #f8f8f8;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.news-figma-list__sidebar-heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.news-figma-list__sidebar-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

.news-figma-list__sidebar-line {
  width: 32px;
  height: 1px;
  background: var(--cr-contrast, #222);
}

.news-figma-list__sidebar-articles {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-figma-list__sidebar-item {
  margin: 0;
}

.news-figma-list__sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.news-figma-list__sidebar-link:hover .news-figma-list__sidebar-item-title {
  opacity: 0.85;
}

.news-figma-list__sidebar-thumb {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: #e8e4e0;
}
.news-figma-list__sidebar-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.4s ease;
}

.news-figma-list__sidebar-link:hover .news-figma-list__sidebar-thumb img,
.news-figma-list__sidebar-item:hover .news-figma-list__sidebar-thumb img {
  transform: scale(1.08);
}

.news-figma-list__sidebar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

/* Figma news-sidebar: 14px Bold・長文は ellipsis（最大3行） */
.news-figma-list__sidebar-item-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
@media (max-width: 755px) {
  .news-figma-list__sidebar-item-title {
    max-width: 175px;
  }
}
.news-figma-list__sidebar-item-title {
  /* 幅は _variables_refined の $news-sidebar-title-max-sp-narrow（config/news-site.json と同期） */
}
@media (max-width: 755px) {
  .news-figma-list__sidebar-item-title--narrow {
    max-width: 167px;
  }
}

.news-figma-list__sidebar-item-date {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
}

.news-figma-list__categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-figma-list__category-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--cr-contrast, #222);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.news-figma-list__category-link svg,
.news-figma-list__category-link img {
  width: 6px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}
.news-figma-list__category-link:hover {
  opacity: 0.8;
}
.news-figma-list__category-link[aria-current=page] {
  color: var(--cr-main, #382620);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、一覧は SP マークアップのまま幅・グリッドを補間。ACCESS は _footer.scss の 335px を解除 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-news-figma .content-center,
  body.page-news-category .content-center,
  body.page-news-single .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  .news-figma-list {
    padding: clamp(60px, 7vw, 80px) clamp(20px, 4vw, 40px) clamp(120px, 14vw, 160px);
  }
  .news-figma-list__inner {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
    flex-direction: column;
    gap: clamp(48px, 6vw, 60px);
  }
  .news-figma-list__primary {
    width: 100%;
    max-width: 100%;
    gap: clamp(40px, 5vw, 60px);
    align-items: stretch;
  }
  .news-figma-list__articles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 2.5vw, 40px);
    row-gap: clamp(24px, 3vw, 40px);
    justify-content: start;
    width: 100%;
  }
  .news-figma-list__card {
    width: 100%;
    max-width: none;
  }
  .news-figma-list__card-link {
    gap: clamp(8px, 1.2vw, 12px);
  }
  .news-figma-list__card-img {
    aspect-ratio: 340/213;
  }
  .news-figma-list__card-body {
    font-size: clamp(12px, 1.1vw, 16px);
  }
  .news-figma-list__card-title {
    font-size: clamp(12px, 1.1vw, 16px);
  }
  .news-figma-list__card-date {
    font-size: clamp(12px, 1vw, 14px);
  }
  /* サイドバー灰枠を記事グリッド（primary と同じ列幅）に揃え、タブレットでも縦のラインが一本になるようにする */
  .news-figma-list__sidebar {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    align-self: stretch;
  }
  .news-figma-list__primary--category {
    gap: clamp(24px, 3vw, 40px);
  }
  .news-category__heading {
    font-size: clamp(20px, 2.2vw, 24px);
    max-width: 100%;
  }
}
.news-figma-list__primary--category {
  gap: 24px;
}
@media (min-width: 1280px) {
  .news-figma-list__primary--category {
    gap: 40px;
  }
}

.news-category__heading {
  margin: 0;
  align-self: flex-start;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .news-category__heading {
    font-size: 24px;
    max-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-figma-list__card-img img,
  .news-figma-list__sidebar-thumb img {
    transition: none;
  }
  .news-figma-list__card-link:hover .news-figma-list__card-img img,
  .news-figma-list__card:hover .news-figma-list__card-img img,
  .news-figma-list__sidebar-link:hover .news-figma-list__sidebar-thumb img,
  .news-figma-list__sidebar-item:hover .news-figma-list__sidebar-thumb img {
    transform: scale(1);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* ----- パンくず（PC px90 / SP px20・フォントサイズ切替） ----- */
.news-single__pankuzu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  padding: 6px 20px 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (min-width: 1280px) {
  .news-single__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.news-single__pankuzu a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.news-single__pankuzu a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.news-single__pankuzu span[aria-hidden=true] {
  flex-shrink: 0;
}
.news-single__pankuzu [aria-current=page] {
  white-space: nowrap;
}

/* ----- メインラッパ ----- */
.news-single__main {
  padding: 60px 20px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .news-single__main {
    padding: 80px 40px 160px;
  }
}

.news-single__inner {
  width: 100%;
  max-width: 335px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  /* SP（756px 未満）: flex の gap は段が均等のため、記事→ページネーション 41px / ページネーション→関連 100px を margin で分離 */
}
@media (max-width: 755px) {
  .news-single__inner {
    gap: 0;
  }
  .news-single__inner > .news-single-entry {
    margin-bottom: 41px;
  }
  .news-single__inner > .news-single-related {
    margin-top: 100px;
  }
}
@media (min-width: 1280px) {
  .news-single__inner {
    max-width: 688px;
    /* 記事→ページネーション 40px、ページネーション→関連 117px */
    gap: 0;
  }
  .news-single__inner > * + * {
    margin-top: 117px;
  }
  .news-single__inner > .news-single-entry + * {
    margin-top: 40px;
  }
}

/* ----- 記事エントリ ----- */
.news-single-entry {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.news-single-entry__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
@media (min-width: 1280px) {
  .news-single-entry__header {
    gap: 18px;
  }
}

.news-single-entry__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 335/176;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .news-single-entry__thumb {
    aspect-ratio: 688/361;
  }
}
.news-single-entry__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-single-entry__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .news-single-entry__title {
    font-size: 28px;
  }
}

.news-single-entry__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}

.news-single-entry__meta-divider {
  width: 1px;
  height: 18px;
  background: var(--cr-main, #382620);
  flex-shrink: 0;
}

/* ----- 本文 ----- */
.news-single-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.news-single-body__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
@media (min-width: 1280px) {
  .news-single-body__section {
    gap: 16px;
  }
}

.news-single-body__h2 {
  margin: 0;
  padding-left: 10px;
  border-left: 6px solid var(--cr-main, #382620);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .news-single-body__h2 {
    font-size: 24px;
  }
}

.news-single-body__h3 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cr-main, #382620);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  /* SP（756px 未満） */
}
@media (max-width: 755px) {
  .news-single-body__h3 {
    padding-bottom: 10px;
  }
}
@media (min-width: 1280px) {
  .news-single-body__h3 {
    font-size: 20px;
  }
}

.news-single-body__h4 {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .news-single-body__h4 {
    font-size: 16px;
  }
}

.news-single-body__p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .news-single-body__p {
    font-size: 16px;
  }
}

.news-single-body__blockquote {
  margin: 0;
  padding: 20px;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .news-single-body__blockquote {
    padding: 40px;
    gap: 16px;
    font-size: 16px;
  }
}
.news-single-body__blockquote p {
  margin: 0;
  /* ソース改行由来の <br>（wpautop）で英語名の前後が改行されないようにする */
}
.news-single-body__blockquote p br {
  display: none;
}
.news-single-body__blockquote cite {
  display: block;
  width: 100%;
  font-style: normal;
  font-size: 14px;
  text-align: right;
  line-height: 2;
  white-space: nowrap;
  /* wpautop / エディタが cite 内の改行を <br> にした場合も 1 行に（nowrap では <br> を抑止できない） */
}
.news-single-body__blockquote cite br {
  display: none;
}
.news-single-body__blockquote cite a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-single-body__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 688/250;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1279px) {
  .news-single-body__figure {
    aspect-ratio: 335/122;
  }
}
.news-single-body__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-single-body__ul,
.news-single-body__ol {
  margin: 0;
  padding-left: 1.5em;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .news-single-body__ul,
  .news-single-body__ol {
    font-size: 16px;
  }
}
.news-single-body__ul li + li,
.news-single-body__ol li + li {
  margin-top: 0;
}

.news-single-body__strong {
  font-weight: 700;
}

/* ----- ページネーション（前へ / 記事一覧 / 次へ） ----- */
.news-single-pagination {
  /* SP〜PC 共通: 左右を 1fr、中央を auto。flex + space-between だと無効時の空要素で「記事一覧」が右に寄る（Figma 19719:5140 / SP 19719:5913） */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 47px;
}
.news-single-pagination > :nth-child(1) {
  justify-self: start;
}
.news-single-pagination > :nth-child(2) {
  justify-self: center;
}
.news-single-pagination > :nth-child(3) {
  justify-self: end;
}

.news-single-pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  text-decoration: none;
}
@media (min-width: 1280px) {
  .news-single-pagination__link {
    font-size: 16px;
  }
}
.news-single-pagination__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 次の記事（テキスト → アイコンの順） */
.news-single-pagination__link--next {
  flex-direction: row;
}

.news-single-pagination__icon {
  display: block;
  width: 6px;
  height: 12px;
  flex-shrink: 0;
}

.news-single-pagination__list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 12px 36px;
  border: 1px solid var(--cr-main, #382620);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  text-decoration: none;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .news-single-pagination__list {
    font-size: 16px;
  }
}
.news-single-pagination__list:hover {
  background: rgba(56, 38, 32, 0.06);
}

.news-single-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  visibility: hidden;
  pointer-events: none;
}

.news-single-pagination__ghost {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .news-single-pagination__ghost {
    font-size: 16px;
  }
}

/* ----- 関連記事 ----- */
/* Figma 19719:5791: column gap 40（見出し〜グリッド）、グリッド幅 335・行 gap 24・列は justify-between で 19px 相当 */
.news-single-related {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (max-width: 755px) {
  .news-single-related {
    max-width: 335px;
    margin-inline: auto;
  }
}
@media (min-width: 1280px) {
  .news-single-related {
    gap: 60px;
  }
}
.news-single-related {
  /* ブロックテーマ等の .wp-block-group 由来 padding が付くと日付位置が崩れる */
}
.news-single-related .news-single-card__body {
  padding: 0 !important;
  border: 0;
}

/* 関連記事: 追加CSS・グループブロックの !important に負けないよう body まで繋いで上書き */
body.page-news-single .news-single-related .news-single-card .news-single-card__body {
  padding: 0 !important;
  border: 0;
}
body.page-news-single .news-single-related .news-single-card .news-single-card__date {
  /* 横・下のみ !important。margin-top: auto は日付下端揃えで使う */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 1280px) {
  body.page-news-single .news-single-related .news-single-card .news-single-card__date {
    margin-top: auto !important;
  }
  body.page-news-single .news-single-related .news-single-card__body > .news-single-card__title {
    /* title-wrap 無し（h3 直置き等）でも日付行を揃える */
    flex: 1 1 auto;
    min-height: 4.5em;
  }
}

.news-single-related__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .news-single-related__title {
    font-size: 28px;
    max-width: 678px;
  }
}

.news-single-related__grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 335px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px 19px;
  justify-content: space-between;
}
@media (min-width: 1280px) {
  .news-single-related__grid {
    max-width: none;
    width: 100%;
    gap: 40px;
    justify-content: flex-start;
  }
}

.news-single-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 158px;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 1280px) {
  .news-single-card {
    width: 202px;
    /* Figma card-news-pc / _news-list .news-figma-list__card-link — 画像と body（タイトル上）の間 */
    gap: 12px;
    /* space-between だと本文ブロック高さが不定になり日付が揃わない → 上詰め＋body を flex で伸ばす */
    justify-content: flex-start;
    min-height: 220px;
  }
}
.news-single-card:hover .news-single-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.news-single-card__img-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
}
@media (min-width: 1280px) {
  .news-single-card__img-wrap {
    flex-shrink: 0;
  }
}

.news-single-card__img-crop {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 158/99;
}
@media (min-width: 1280px) {
  .news-single-card__img-crop {
    aspect-ratio: 340/213;
  }
}
.news-single-card__img-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-single-card__badge {
  position: absolute;
  left: -8px;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.news-single-card__badge-top {
  display: flex;
  align-items: stretch;
}

.news-single-card__badge-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: var(--cr-main, #382620);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-white, #fff);
}

.news-single-card__badge-deco-right {
  flex-shrink: 0;
  width: 5px;
  align-self: stretch;
  position: relative;
}
.news-single-card__badge-deco-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.news-single-card__badge-deco-bottom {
  width: 8px;
  height: 4px;
  position: relative;
}
.news-single-card__badge-deco-bottom img {
  display: block;
  width: 100%;
  height: 100%;
}

.news-single-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  .news-single-card__body {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Figma card-news__body: タイトルと日付の間は gap 12px。-webkit-box の p に flex を当てると伸長が効かないことがあるためラップで確保 */
.news-single-card__title-wrap {
  width: 100%;
  min-width: 0;
  /* SP: Figma card-news-sp は行数でカード高が変わるため min-height は付けない（PC は 4.5em で日付揃え） */
}
@media (min-width: 1280px) {
  .news-single-card__title-wrap {
    flex: 1 1 auto;
    min-height: 4.5em;
  }
}

h3.news-single-card__title,
.news-single-card__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  /* SP: 3行まで表示（関連記事カード） */
}
@media (max-width: 755px) {
  h3.news-single-card__title,
  .news-single-card__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}
@media (min-width: 1280px) {
  h3.news-single-card__title,
  .news-single-card__title {
    font-size: 16px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.news-single-card__date {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
}
@media (min-width: 1280px) {
  .news-single-card__date {
    font-size: 14px;
    flex-shrink: 0;
    /* 関連記事でカード高が揃ったとき、タイトル行数差でも日付を body 下端に */
    margin-top: auto;
  }
}

/* ---------- タブレット帯（756px〜1279px）: `.content-center` は `_news-list.scss` と同型で拡張済み。本文は 688px 相当までリキッドに補間 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-news-single .news-single__pankuzu {
    gap: 15px;
    padding: clamp(8px, 1.2vw, 16px) clamp(20px, 5vw, 90px) 0;
    font-size: clamp(12px, 1.1vw, 14px);
    flex-wrap: wrap;
    overflow-x: visible;
  }
  body.page-news-single .news-single__main {
    padding: clamp(60px, 7vw, 80px) clamp(20px, 4vw, 40px) clamp(120px, 14vw, 160px);
  }
  body.page-news-single .news-single__inner {
    max-width: min(688px, 100% - 32px);
    width: 100%;
    gap: clamp(80px, 10vw, 120px);
  }
  body.page-news-single .news-single-entry__thumb {
    aspect-ratio: 688/361;
  }
  body.page-news-single .news-single-entry__title {
    font-size: clamp(20px, 2.2vw, 28px);
  }
  body.page-news-single .news-single-entry__meta {
    font-size: 14px;
  }
  body.page-news-single .news-single-body__section {
    gap: clamp(14px, 1.5vw, 16px);
  }
  body.page-news-single .news-single-body__h2 {
    font-size: clamp(18px, 1.8vw, 24px);
  }
  body.page-news-single .news-single-body__h3 {
    font-size: clamp(16px, 1.4vw, 20px);
  }
  body.page-news-single .news-single-body__h4 {
    font-size: clamp(14px, 1.1vw, 16px);
  }
  body.page-news-single .news-single-body__p,
  body.page-news-single .news-single-body__ul,
  body.page-news-single .news-single-body__ol {
    font-size: clamp(14px, 1.1vw, 16px);
  }
  body.page-news-single .news-single-body__blockquote {
    padding: clamp(20px, 3vw, 40px);
    gap: clamp(14px, 1.5vw, 16px);
    font-size: clamp(14px, 1.1vw, 16px);
  }
  body.page-news-single .news-single-body__blockquote cite {
    font-size: clamp(14px, 1.1vw, 14px);
  }
  body.page-news-single {
    /* SP の 335/122 よりワイドに合わせ PC 比率へ */
  }
  body.page-news-single .news-single-body__figure {
    aspect-ratio: 688/250;
  }
  body.page-news-single .news-single-pagination__link,
  body.page-news-single .news-single-pagination__list,
  body.page-news-single .news-single-pagination__ghost {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  body.page-news-single {
    /* 関連記事: タブレットも PC（1280px+）と同型 — 横並び flex・カード 202px・ギャップ 40px */
  }
  body.page-news-single .news-single-related__title {
    font-size: 28px;
    max-width: 678px;
  }
  body.page-news-single .news-single-related__grid {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    width: 100%;
    gap: 40px;
    justify-content: flex-start;
  }
  body.page-news-single .news-single-card {
    width: 202px;
    max-width: none;
    min-height: 220px;
    gap: 12px;
    justify-content: flex-start;
  }
  body.page-news-single .news-single-card__img-wrap {
    flex-shrink: 0;
  }
  body.page-news-single .news-single-card__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }
  body.page-news-single .news-single-card__title-wrap {
    flex: 1 1 auto;
    min-height: 4.5em;
  }
  body.page-news-single .news-single-card__img-crop {
    aspect-ratio: 340/213;
  }
  body.page-news-single .news-single-card__title {
    font-size: 16px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  body.page-news-single .news-single-card__date {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
  }
  body.page-news-single .news-single-card .news-single-card__body {
    padding: 0 !important;
  }
  body.page-news-single .news-single-card__body > .news-single-card__title {
    flex: 1 1 auto;
    min-height: 4.5em;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
/* ---------- ヒーロー：茶丸 FAB ＋ 白アイコン（店舗 Figma とメニュー同型） ---------- */
body.page-shop .shop-page-hero__icon-pc {
  display: none !important;
}

body.page-shop .shop-page-hero__icon-sp {
  display: block;
  width: 28px;
  height: auto;
}

body.page-shop .site-header.concept-page-hero .shop-page-hero__menu-fab {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 30px;
  background: var(--cr-main, #382620);
  cursor: pointer;
}
body.page-shop .site-header.concept-page-hero .shop-page-hero__menu-fab img {
  width: 28px;
  height: 18px;
  object-fit: contain;
}

@media (min-width: 1280px) {
  body.page-shop .site-header.concept-page-hero .shop-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
}
body.page-shop .header__inner--shop-sp {
  top: 0;
  right: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  body.page-shop .header__inner--shop-sp {
    top: 10px;
    right: 10px;
  }
}
/* ---------- パンくず：SP は cr-main（Figma pankuzu-sp 19719:6393） ---------- */
@media (max-width: 1279px) {
  body.page-shop .shop-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-shop .shop-page__pankuzu a {
    color: inherit;
  }
}
@media (min-width: 1280px) {
  body.page-shop .shop-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-shop .shop-page__pankuzu a {
    color: inherit;
  }
}
/* メインとアクセスの間 — コンセプトと同じ .concept-access-spacer、SHOP 用に SP / PC で調整 */
@media (max-width: 1279px) {
  body.page-shop .concept-access-spacer {
    height: 155px;
  }
}
@media (min-width: 1280px) {
  body.page-shop .concept-access-spacer {
    height: 158px;
  }
}
/* ---------- メイン（店舗一覧）Figma main PC 19719:6387 / SP 19719:6394 ---------- */
.shop-page__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 60px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  .shop-page__main {
    padding-top: 80px;
  }
}

.shop-page__items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 60px;
  width: 335px;
  max-width: 100%;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .shop-page__items {
    width: 100%;
    max-width: 688px;
    gap: 119px;
  }
}

.shop-page__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
@media (min-width: 1280px) {
  .shop-page__section {
    gap: 24px;
  }
}

.shop-page__h2 {
  margin: 0;
  padding-left: 10px;
  border-left: 6px solid var(--cr-main, #382620);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  .shop-page__h2 {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    font-size: 24px;
  }
}

.shop-page__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.shop-page__photo {
  position: relative;
  width: 100%;
  height: 184px;
  overflow: hidden;
}
@media (min-width: 1280px) {
  .shop-page__photo {
    height: 377px;
  }
}
.shop-page__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-page__dl {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
}

/* SP: 縦並び・行順は Figma（住所→TEL→Mail→営業時間→定休日→座席） */
@media (max-width: 1279px) {
  .shop-page__dl {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }
  .shop-page__row--address {
    order: 1;
  }
  .shop-page__row--tel {
    order: 2;
  }
  .shop-page__row--mail {
    order: 3;
  }
  .shop-page__row--hours {
    order: 4;
  }
  .shop-page__row--closed {
    order: 5;
  }
  .shop-page__row--seats {
    order: 6;
  }
}
.shop-page__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cr-contrast, #222);
  box-sizing: border-box;
}

/* PC: 2列ラップ（行順は DOM＝住所|営業時間 / TEL|定休日 / Mail|座席） */
@media (min-width: 1280px) {
  .shop-page__dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 19px 40px;
  }
  .shop-page__row {
    flex: 0 0 auto;
    width: 324px;
    max-width: calc(50% - 20px);
    order: 0;
  }
}
.shop-page__dt {
  flex: 0 0 56px;
  width: 56px;
  margin: 0;
}

.shop-page__dd {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.shop-page__dd-line {
  margin: 0;
}
.shop-page__dd-line + .shop-page__dd-line {
  margin-top: 0;
}

.shop-page__dd-link {
  color: inherit;
  text-decoration: none;
}
.shop-page__dd-link:hover {
  text-decoration: underline;
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、店舗ブロックは PC 型の縮小版 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-shop .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-shop .site-header.concept-page-hero .shop-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
  body.page-shop .header__inner--shop-sp {
    top: 10px;
    right: 10px;
  }
  body.page-shop .shop-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-shop .shop-page__pankuzu a {
    color: inherit;
  }
  body.page-shop .concept-access-spacer {
    height: 158px;
  }
  body.page-shop .shop-page__main {
    padding-top: 80px;
  }
  body.page-shop .shop-page__items {
    width: 100%;
    max-width: min(688px, 100% - 32px);
    gap: clamp(80px, 12vw, 120px);
  }
  body.page-shop .shop-page__h2 {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    font-size: clamp(18px, 2.2vw, 24px);
  }
  body.page-shop .shop-page__photo {
    height: clamp(200px, 38vw, 377px);
  }
  body.page-shop .shop-page__dl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 19px 40px;
  }
  body.page-shop .shop-page__row {
    flex: 0 0 auto;
    width: 324px;
    max-width: calc(50% - 20px);
    order: 0;
  }
  body.page-shop .shop-page__row--address,
  body.page-shop .shop-page__row--tel,
  body.page-shop .shop-page__row--mail,
  body.page-shop .shop-page__row--hours,
  body.page-shop .shop-page__row--closed,
  body.page-shop .shop-page__row--seats {
    order: 0;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
body.page-gift .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ヒーロー：茶丸 FAB ＋ 白アイコン（店舗ページと同型） ---------- */
body.page-gift .gift-page-hero__icon-pc {
  display: none !important;
}

body.page-gift .gift-page-hero__icon-sp {
  display: block;
  width: 28px;
  height: auto;
}

body.page-gift .site-header.concept-page-hero .gift-page-hero__menu-fab {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 30px;
  background: var(--cr-main, #382620);
  cursor: pointer;
}
body.page-gift .site-header.concept-page-hero .gift-page-hero__menu-fab img {
  width: 28px;
  height: 18px;
  object-fit: contain;
}

@media (min-width: 1280px) {
  body.page-gift .site-header.concept-page-hero .gift-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
}
body.page-gift .header__inner--gift-sp {
  top: 0;
  right: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  body.page-gift .header__inner--gift-sp {
    top: 10px;
    right: 10px;
  }
}
/* ---------- パンくず ---------- */
@media (max-width: 1279px) {
  body.page-gift .gift-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-gift .gift-page__pankuzu a {
    color: inherit;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-gift .gift-page__pankuzu a {
    color: inherit;
  }
}
/* ---------- メイン以降（body.page-gift 配下に限定）
   理由1: style.scss 末尾の h2,h3 { Amatic } が @use より後に出力され、単一クラスより詳細度が高い組み合わせで負けるのを防ぐ
   理由2: コンセプト／店舗と同様 .page-content-wrap 内に置く前提を明示 */
body.page-gift .gift-page__below-hero {
  width: 100%;
}
body.page-gift .gift-page__main {
  padding-top: 60px;
  padding-bottom: 159px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__main {
    padding-top: 80px;
    padding-bottom: 160px;
  }
}
body.page-gift .gift-page__main {
  /* style.scss 終端の h3 { font-family: Amatic } より後でも勝つ（型+クラス+クラス） */
}
body.page-gift .gift-page__main h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: var(--cr-contrast, #222);
}
body.page-gift .gift-page__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 20px;
  box-sizing: border-box;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__inner {
    padding-inline: 0;
  }
}
body.page-gift {
  /* カタログ：PC は feat | side / full---、SP は縦積み */
}
body.page-gift .gift-page__catalog-grid {
  display: grid;
  gap: 60px;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-areas: "feat" "side" "full";
  /* Figma gift-items 19719:9452: 縦 gap 20px（60px だと SP でカンプより広すぎる） */
}
@media (max-width: 1279px) {
  body.page-gift .gift-page__catalog-grid {
    gap: 20px;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__catalog-grid {
    grid-template-columns: 530px 530px;
    column-gap: 40px;
    row-gap: 40px;
    grid-template-areas: "feat side" "full full";
  }
}
body.page-gift .gift-page__card--featured {
  grid-area: feat;
}
body.page-gift .gift-page__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /* PC: 同一行のカード高さを揃え、タイトル行数差でも価格・CTA を下で揃える。SP は Figma gift-card-sp（19719:9395）どおり gap のみ（.gift-page__price の margin-top） */
}
body.page-gift .gift-page__grid > li {
  display: flex;
  min-width: 0;
}
body.page-gift .gift-page__grid > li .gift-page__card {
  flex: 1 1 auto;
  min-height: 0;
}
body.page-gift .gift-page__grid--top-right {
  grid-area: side;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* SP: 行間は Figma items の gap-y 20px 基準。試行で 17px（タブレット帯は下の bp ブロックで grid+gap が別） */
  row-gap: 20px;
  width: 100%;
  max-width: 335px;
  margin-inline: auto;
}
@media (max-width: 1279px) {
  body.page-gift .gift-page__grid--top-right {
    row-gap: 17px;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__grid--top-right {
    display: grid;
    grid-template-columns: 245px 245px;
    gap: 40px;
    max-width: none;
    margin-inline: 0;
    justify-content: start;
  }
}
body.page-gift .gift-page__grid--top-right > li {
  width: 158px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__grid--top-right > li {
    width: auto;
  }
}
body.page-gift .gift-page__grid--bottom {
  grid-area: full;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
  width: 100%;
  max-width: 335px;
  margin-inline: auto;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__grid--bottom {
    display: grid;
    grid-template-columns: repeat(4, 245px);
    gap: 40px;
    max-width: none;
    margin-inline: 0;
    justify-content: space-between;
  }
}
body.page-gift .gift-page__grid--bottom > li {
  width: 158px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__grid--bottom > li {
    width: auto;
  }
}
body.page-gift {
  /* カード */
}
body.page-gift .gift-page__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
body.page-gift .gift-page__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
body.page-gift .gift-page__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-gift .gift-page__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cr-contrast, #222);
  text-align: left;
  width: 100%;
}
body.page-gift .gift-page__card-title--featured {
  font-size: 20px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__card-title--featured {
    font-size: 24px;
  }
}
body.page-gift .gift-page__price {
  margin: 0;
  margin-top: auto;
  font-family: "Damion", cursive;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--cr-contrast, #222);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  /* SP: Figma 19719:9395 は画像・タイトル・価格・CTA を 8px 間隔のみ。auto だと1行タイトルで価格・ボタンが行内で下寄せになりすぎる */
}
@media (max-width: 1279px) {
  body.page-gift .gift-page__price {
    margin-top: 0;
  }
}
body.page-gift .gift-page__price--featured {
  font-size: 28px;
  gap: 8px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__price--featured {
    font-size: 32px;
  }
}
body.page-gift .gift-page__price-num {
  font: inherit;
}
body.page-gift {
  /* カード内 CTA — Figma ButtonShop 19719:11353（Dev）: デフォルト茶地+白字 / ホバー白地+茶字+枠 cr-main */
}
body.page-gift .gift-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--cr-main, #382620);
  color: var(--cr-white, #fff);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--cr-main, #382620);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* SP: カード幅に合わせた余白・字サイズ（PC は Figma py8 px24・14px と一致） */
}
@media (max-width: 1279px) {
  body.page-gift .gift-page__btn {
    padding: 6px 12px;
    font-size: 11.5px;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__btn {
    padding: 8px 24px;
    font-size: 14px;
  }
}
body.page-gift .gift-page__btn:hover, body.page-gift .gift-page__btn:focus-visible {
  background: var(--cr-white, #fff);
  color: var(--cr-main, #382620);
  border-color: var(--cr-main, #382620);
}
body.page-gift .gift-page__btn {
  /* リンク時: ラベル色も Figma と同じ（通常白字 → ホバー茶字） */
}
body.page-gift .gift-page__btn:is(a):link, body.page-gift .gift-page__btn:is(a):visited {
  color: var(--cr-white, #fff);
}
body.page-gift .gift-page__btn:is(a):hover, body.page-gift .gift-page__btn:is(a):focus-visible {
  color: var(--cr-main, #382620);
}
body.page-gift {
  /* button は要素セレクタで詳細度が上がるため、font: inherit だと .gift-page__btn の line-height より親（WP theme.json 等）の line-height が優先され縦に肥大化する */
}
body.page-gift button.gift-page__btn {
  appearance: none;
  margin: 0;
}
body.page-gift button.gift-page__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}
body.page-gift {
  /* ---------- ラッピング ---------- */
}
body.page-gift .gift-page__wrapping {
  margin-top: 100px;
  position: relative;
}
@media (max-width: 1279px) {
  body.page-gift .gift-page__wrapping {
    margin-top: 57px;
  }
}
body.page-gift .gift-page__wrapping-inner {
  position: relative;
  background: var(--cr-white, #fff);
  border: 4px solid var(--cr-main, #382620);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  box-sizing: border-box;
  /* SP: 内枠 inset / PC: Figma 19719:9457 1080×440 中央 */
}
body.page-gift .gift-page__wrapping-inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--cr-main, #382620);
  inset: 7px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-inner::after {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Sass の min() と区別するため文字列で CSS min + calc を出力 */
    width: min(1080px, calc(100% - 12px));
    height: min(440px, calc(100% - 12px));
    box-sizing: border-box;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-inner {
    /* PC Figma 19719:9454 — py / px / gap */
    flex-direction: row;
    align-items: center;
    gap: 60px;
    padding: 75px 60px;
  }
}
body.page-gift .gift-page__wrapping-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-body {
    flex: 0 0 460px;
    margin-left: -3px; /* 左へ微調整 */
  }
}
body.page-gift {
  /* Figma 19719:9550 — heading と本文の間 gap-[36px]（PC） */
}
body.page-gift .gift-page__wrapping-heading-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-heading-block {
    margin-bottom: 36px;
  }
}
body.page-gift .gift-page__wrapping-title {
  margin: 0;
  text-align: left;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-title {
    font-size: 24px;
  }
}
body.page-gift {
  /* SP: 1段落として折り返し / PC: 2行 */
}
body.page-gift .gift-page__wrapping-title-line {
  display: inline;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-title-line {
    display: block;
  }
}
body.page-gift {
  /* SP: 簡易点線 / PC: Figma 19719:9460（3px ドット・間隔 8px） */
}
body.page-gift .gift-page__wrapping-rule {
  height: 0;
  border-bottom: 2px dotted var(--cr-main, #382620);
  width: 100%;
  opacity: 0.85;
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-rule {
    height: 3px;
    border: none;
    opacity: 1;
    background-color: transparent;
    background-image: radial-gradient(circle at 1.5px 50%, var(--cr-main, #382620) 1.5px, transparent 1.51px);
    background-size: 11px 3px; /* 3px 幅 + 8px トラック = 11px 周期 */
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
}
body.page-gift .gift-page__wrapping-text {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  color: var(--cr-contrast, #222);
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-text {
    font-size: 16px;
  }
}
body.page-gift .gift-page__wrapping-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0;
  /* 本文との距離は `.gift-page__wrapping-inner` の `gap`（$_gift-wrap-gap-sp）のみ。ここに margin を足すと二重になる */
  margin-top: 0;
  /* 狭いスマホ: 枠の高さを固定（DevTools で 1 値に揃う） */
}
@media (max-width: 755px) {
  body.page-gift .gift-page__wrapping-photo {
    height: 164px;
    min-height: 0;
    overflow: hidden;
  }
}
body.page-gift .gift-page__wrapping-photo {
  /* 756〜1279: タブレット帯は下の `bp.media-tablet` で row＋別指定。ここでは高さ固定を外す */
}
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-gift .gift-page__wrapping-photo {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}
body.page-gift .gift-page__wrapping-photo {
  /* Figma 19719:9546 — image w-[460px] h-[300px] */
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-photo {
    flex: 0 0 460px;
    width: 460px;
    max-width: 460px;
    min-height: 300px;
    height: auto;
    overflow: visible;
  }
}
body.page-gift .gift-page__wrapping-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 755px) {
  body.page-gift .gift-page__wrapping-photo img {
    height: 100%;
    max-height: none;
    min-height: 0;
  }
}
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-gift .gift-page__wrapping-photo img {
    height: auto;
    max-height: none;
  }
}
@media (min-width: 1280px) {
  body.page-gift .gift-page__wrapping-photo img {
    height: 300px;
    min-height: 300px;
    max-height: none;
    object-fit: cover;
  }
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、カタログ／ラッピングは PC 型の縮小版 ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-gift .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-gift .site-header.concept-page-hero .gift-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
  body.page-gift .header__inner--gift-sp {
    top: 10px;
    right: 10px;
  }
  body.page-gift .gift-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-gift .gift-page__pankuzu a {
    color: inherit;
  }
  body.page-gift .gift-page__main {
    padding-top: 80px;
  }
  body.page-gift .gift-page__inner {
    padding-inline: 0;
  }
  body.page-gift .gift-page__catalog-grid {
    gap: clamp(40px, 5vw, 60px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: clamp(24px, 3vw, 40px);
    grid-template-areas: "feat side" "full full";
  }
  body.page-gift .gift-page__grid--top-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    max-width: none;
    margin-inline: 0;
    justify-content: start;
    flex-wrap: unset;
  }
  body.page-gift .gift-page__grid--top-right > li {
    width: auto;
  }
  body.page-gift .gift-page__grid--bottom {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    max-width: none;
    margin-inline: 0;
    justify-content: start;
    flex-wrap: unset;
  }
  body.page-gift .gift-page__grid--bottom > li {
    width: auto;
  }
  body.page-gift .gift-page__card-title--featured {
    font-size: clamp(20px, 2.2vw, 24px);
  }
  body.page-gift .gift-page__price--featured {
    font-size: clamp(28px, 3vw, 32px);
  }
  /* 可変フォント時も Figma ButtonShop と同じ default / hover */
  body.page-gift .gift-page__btn {
    padding: 8px 24px;
    font-size: 14px;
    background: var(--cr-main, #382620);
    color: var(--cr-white, #fff);
    border: 1px solid var(--cr-main, #382620);
  }
  body.page-gift .gift-page__btn:hover, body.page-gift .gift-page__btn:focus-visible {
    background: var(--cr-white, #fff);
    color: var(--cr-main, #382620);
  }
  body.page-gift .gift-page__wrapping {
    margin-top: clamp(80px, 10vw, 100px);
  }
  body.page-gift .gift-page__wrapping-inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 4vw, 60px);
    padding: clamp(48px, 6vw, 75px) clamp(32px, 4vw, 60px);
  }
  body.page-gift .gift-page__wrapping-inner::after {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1080px, calc(100% - 12px));
    height: min(440px, calc(100% - 12px));
    box-sizing: border-box;
  }
  body.page-gift .gift-page__wrapping-body {
    flex: 1 1 min(460px, 48%);
    min-width: 0;
    margin-left: 0;
  }
  body.page-gift .gift-page__wrapping-heading-block {
    margin-bottom: clamp(24px, 3vw, 36px);
  }
  body.page-gift .gift-page__wrapping-title {
    font-size: clamp(18px, 2vw, 24px);
  }
  body.page-gift .gift-page__wrapping-title-line {
    display: block;
  }
  body.page-gift .gift-page__wrapping-rule {
    height: 3px;
    border: none;
    border-bottom: none;
    opacity: 1;
    background-color: transparent;
    background-image: radial-gradient(circle at 1.5px 50%, var(--cr-main, #382620) 1.5px, transparent 1.51px);
    background-size: 11px 3px;
    background-repeat: repeat-x;
    background-position: 0 50%;
  }
  body.page-gift .gift-page__wrapping-text {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  body.page-gift .gift-page__wrapping-photo {
    flex: 1 1 min(460px, 48%);
    width: auto;
    max-width: min(460px, 52%);
    min-height: clamp(184px, 26vw, 280px);
    margin-top: 0;
    height: auto;
    overflow: visible;
  }
  body.page-gift .gift-page__wrapping-photo img {
    max-height: none;
    height: auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
body.page-inner--contact .contact-page-hero__icon-pc {
  display: none !important;
}

body.page-inner--contact .contact-page-hero__icon-sp {
  display: block;
  width: 28px;
  height: auto;
}

body.page-inner--contact .site-header.concept-page-hero .contact-page-hero__menu-fab {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 30px;
  background: var(--cr-main, #382620);
  cursor: pointer;
}
body.page-inner--contact .site-header.concept-page-hero .contact-page-hero__menu-fab img {
  width: 28px;
  height: 18px;
  object-fit: contain;
}

@media (min-width: 1280px) {
  body.page-inner--contact .site-header.concept-page-hero .contact-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
}
body.page-inner--contact .header__inner--contact-sp {
  top: 0;
  right: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  body.page-inner--contact .header__inner--contact-sp {
    top: 10px;
    right: 10px;
  }
}
/* パンくず（Figma pankuzu-sp 19719:10558 / pankuzu-pc 19719:10547） */
@media (max-width: 1279px) {
  body.page-inner--contact .contact-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-inner--contact .contact-page__pankuzu a {
    color: inherit;
  }
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-inner--contact .contact-page__pankuzu a {
    color: inherit;
  }
}
body.page-inner--contact .contact-page__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.page-inner--contact .contact-page__section {
  padding-top: 60px;
  padding-bottom: 158px;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__section {
    padding-top: 80px;
    padding-bottom: 160px;
  }
}

body.page-inner--contact .contact-page__entry {
  max-width: 335px;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__entry {
    max-width: 688px;
  }
}

body.page-inner--contact .contact-page__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  width: 100%;
  color: var(--cr-main, #382620);
  text-align: center;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__intro {
    gap: 24px;
  }
}

body.page-inner--contact .contact-page__title {
  margin: 0;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__title {
    font-size: 28px;
  }
}

body.page-inner--contact .contact-page__intro-text {
  margin: 0;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  text-align: left;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__intro-text {
    font-size: 16px;
  }
}

body.page-inner--contact .contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 39px;
  width: 100%;
  margin-top: 60px;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__form {
    gap: 40px;
    margin-top: 178px;
  }
}

body.page-inner--contact .contact-page__field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__field {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__field--start {
    align-items: flex-start;
  }
}

body.page-inner--contact .contact-page__label-wrap {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0; /* <label> 既定マージン解除 */
  cursor: pointer;
  min-width: 173px;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__label-wrap {
    /* ラベル列が狭まりすぎると「必須」が折り返されるため、PC は横並びに固定 */
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: auto;
    align-items: center;
  }
}

/*
 * 誤って <legend class="contact-page__label-wrap--fieldset"> にすると flex が効かず必須が改行されやすい（legend は UA 特別扱い・WebKit では flex に参加しないことも）。
 * 正しいのは <div class="…label-wrap--fieldset">。以下は誤用時の緩和（可能な限り）。
 */
body.page-inner--contact legend.contact-page__label-wrap.contact-page__label-wrap--fieldset,
body.page-inner--contact .contact-page__cf7 legend.contact-page__label-wrap.contact-page__label-wrap--fieldset {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: none;
  padding: 0;
  margin: 0 0 16px;
  float: none;
  border: none;
}
body.page-inner--contact legend.contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__label-text,
body.page-inner--contact legend.contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__required,
body.page-inner--contact .contact-page__cf7 legend.contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__label-text,
body.page-inner--contact .contact-page__cf7 legend.contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__required {
  flex-shrink: 0;
}

/* お問い合わせ項目: .label-wrap 既定の flex-wrap:wrap を上書き（詳細度を一段上げる） */
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset {
  cursor: default;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-width: min-content;
  max-width: none;
}
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__label-text,
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__required {
  flex-shrink: 0;
}
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset {
  /*
   * CF7 側で id 用に入った内側 div（例: .cf7-contact-inquiry-label）が block のままだと、
   * 中の span がインライン折り返しし「必須」だけ次行に落ちる。ラッパーも横並び flex にする。
   */
}
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset > div,
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-width: min-content;
  max-width: none;
}
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset > div .contact-page__label-text,
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset > div .contact-page__required,
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label .contact-page__label-text,
body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label .contact-page__required {
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: max-content;
  }
}

body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: min-content;
  max-width: none;
}
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__label-text,
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset .contact-page__required {
  flex-shrink: 0;
}
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset > div,
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: min-content;
  max-width: none;
}
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset > div .contact-page__label-text,
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset > div .contact-page__required,
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label .contact-page__label-text,
body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset .cf7-contact-inquiry-label .contact-page__required {
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: max-content;
  }
}

body.page-inner--contact .contact-page__label-text {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  white-space: nowrap;
}

body.page-inner--contact .contact-page__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  height: 19px;
  padding: 1px 6px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cr-white, #fff);
  background-color: var(--cr-accent, #f07317);
  border-radius: 2px;
}

body.page-inner--contact .contact-page__fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__fieldset {
    flex: 0 0 490px;
    width: 490px;
    max-width: 100%;
  }
}

body.page-inner--contact .contact-page__radio-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

body.page-inner--contact .contact-page__radio-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  cursor: pointer;
}

body.page-inner--contact .contact-page__radio {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  background-color: #fff;
  border: 1px solid var(--cr-main, #382620);
  border-radius: 1000px;
  cursor: pointer;
}
body.page-inner--contact .contact-page__radio:focus-visible {
  outline: 2px solid var(--cr-accent, #f07317);
  outline-offset: 2px;
}
body.page-inner--contact .contact-page__radio:checked {
  background-color: #fff;
  background-image: radial-gradient(circle, var(--cr-accent, #f07317) 0%, var(--cr-accent, #f07317) 45%, transparent 46%);
  border-color: var(--cr-main, #382620);
}

body.page-inner--contact .contact-page__radio-caption {
  user-select: none;
}

body.page-inner--contact .contact-page__control {
  width: 100%;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__control {
    flex: 0 0 490px;
    width: 490px;
    max-width: 100%;
  }
}

body.page-inner--contact .contact-page__input,
body.page-inner--contact .contact-page__textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  background-color: #fff;
  border: 1px solid var(--cr-main, #382620);
  border-radius: 6px;
}
body.page-inner--contact .contact-page__input::placeholder,
body.page-inner--contact .contact-page__textarea::placeholder {
  color: #cccccc;
  opacity: 1;
}
body.page-inner--contact .contact-page__input:focus,
body.page-inner--contact .contact-page__textarea:focus {
  outline: none;
  border-color: var(--cr-accent, #f07317);
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.15);
}
body.page-inner--contact .contact-page__input:focus-visible,
body.page-inner--contact .contact-page__textarea:focus-visible {
  outline: none;
  border-color: var(--cr-accent, #f07317);
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.15);
}

body.page-inner--contact .contact-page__input {
  min-height: 48px;
}

body.page-inner--contact .contact-page__textarea {
  min-height: 200px;
  resize: vertical;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__textarea {
    min-height: 240px;
  }
}

body.page-inner--contact .contact-page__privacy {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cr-main, #382620);
}

@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__form .contact-page__privacy,
  body.page-inner--contact .contact-page__cf7 .wpcf7-form .contact-page__privacy {
    margin-top: 2px;
  }
}
body.page-inner--contact .contact-page__submit-wrap {
  position: relative;
  width: 296px;
  max-width: 100%;
  height: 78px;
  margin: 0 auto;
}

/* 〜755px のみ SP 用の送信ボタン上余白（756〜1279 はタブレット帯で PC 値に近づける） */
@media (max-width: 755px) {
  body.page-inner--contact .contact-page__form .contact-page__submit-wrap,
  body.page-inner--contact .contact-page__cf7 .wpcf7-form .contact-page__submit-wrap {
    margin-top: 7px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__form .contact-page__submit-wrap,
  body.page-inner--contact .contact-page__cf7 .wpcf7-form .contact-page__submit-wrap {
    margin-top: 3px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
}
body.page-inner--contact .contact-page__submit-deco {
  position: absolute;
  inset: 7.69% 0 0 2.03%;
  pointer-events: none;
  border-right: 1px solid var(--cr-contrast, #222222);
  border-bottom: 1px solid var(--cr-contrast, #222222);
  border-radius: 0;
}

body.page-inner--contact .contact-page__submit {
  position: absolute;
  inset: 0 2.03% 7.69% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  cursor: pointer;
  background-color: var(--cr-contrast, #222222);
  border: none;
  border-radius: 0;
  transition: filter 0.2s ease, transform 0.3s ease;
}
body.page-inner--contact .contact-page__submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translate(6px, 6px);
}
body.page-inner--contact .contact-page__submit:focus-visible {
  outline: 2px solid var(--cr-accent, #f07317);
  outline-offset: 3px;
}

body.page-inner--contact .contact-page__submit-label {
  position: relative;
  z-index: 0;
  letter-spacing: 16px;
  text-indent: 16px;
  white-space: nowrap;
}

body.page-inner--contact .contact-page__submit-arrow {
  position: absolute;
  top: 24px;
  left: 252px;
  z-index: 1;
  width: 16px;
  height: 24px;
  margin-top: 0;
  object-fit: contain;
}

body.page-inner--contact .contact-page__cf7 {
  width: 100%;
  margin-top: 60px;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__cf7 {
    margin-top: 79px;
  }
}

body.page-inner--contact .contact-page__cf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 39px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__cf7 .wpcf7-form {
    gap: 39px;
  }
}

body.page-inner--contact .contact-page__cf7 .wpcf7-form > p:not(.contact-page__privacy) {
  display: contents;
  margin: 0;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

body.page-inner--contact .contact-page__cf7 .contact-page__control .wpcf7-form-control-wrap {
  margin: 0;
}

body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea,
body.page-inner--contact .contact-page__cf7 .wpcf7-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  min-height: 200px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  background-color: #fff;
  border: 1px solid var(--cr-main, #382620);
  border-radius: 6px;
  resize: vertical;
}
body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea::placeholder,
body.page-inner--contact .contact-page__cf7 .wpcf7-textarea::placeholder {
  color: #cccccc;
  opacity: 1;
}
body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea:focus, body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea:focus-visible,
body.page-inner--contact .contact-page__cf7 .wpcf7-textarea:focus,
body.page-inner--contact .contact-page__cf7 .wpcf7-textarea:focus-visible {
  outline: none;
  border-color: var(--cr-accent, #f07317);
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.15);
}
@media (min-width: 1280px) {
  body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea,
  body.page-inner--contact .contact-page__cf7 .wpcf7-textarea {
    min-height: 240px;
  }
}

body.page-inner--contact .contact-page__cf7 .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  cursor: pointer;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-radio input[type=radio] {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  background-color: #fff;
  border: 1px solid var(--cr-main, #382620);
  border-radius: 1000px;
  cursor: pointer;
}
body.page-inner--contact .contact-page__cf7 .wpcf7-radio input[type=radio]:focus-visible {
  outline: 2px solid var(--cr-accent, #f07317);
  outline-offset: 2px;
}
body.page-inner--contact .contact-page__cf7 .wpcf7-radio input[type=radio]:checked {
  background-color: #fff;
  background-image: radial-gradient(circle, var(--cr-accent, #f07317) 0%, var(--cr-accent, #f07317) 45%, transparent 46%);
  border-color: var(--cr-main, #382620);
}

body.page-inner--contact .contact-page__cf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 14px;
  color: #b91c1c;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  line-height: 1.5;
  border-width: 1px;
  border-radius: 6px;
}

body.page-inner--contact .contact-page__cf7 .wpcf7-spinner {
  margin: 12px auto 0;
}

body.page-inner--contact .contact-page__cf7 .contact-page__submit {
  position: absolute;
  inset: 0 2.03% 7.69% 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 24px 40px 24px 55px;
  margin: 0;
  letter-spacing: 16px;
  text-indent: 0;
  text-align: center;
  background-image: url("../../img/common/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px 24px;
  transition: filter 0.2s ease, transform 0.3s ease;
}
body.page-inner--contact .contact-page__cf7 .contact-page__submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translate(6px, 6px);
}
body.page-inner--contact .contact-page__cf7 .contact-page__submit:focus-visible {
  outline: 2px solid var(--cr-accent, #f07317);
  outline-offset: 3px;
}

@media (min-width: 756px) and (max-width: 1279px) {
  body.page-inner--contact .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-inner--contact .contact-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-inner--contact .contact-page__pankuzu a {
    color: inherit;
  }
  body.page-inner--contact .contact-page__section {
    padding-top: 80px;
    padding-bottom: 160px;
  }
  body.page-inner--contact .contact-page__entry {
    max-width: min(688px, 100% - 32px);
    margin-inline: auto;
  }
  body.page-inner--contact .contact-page__intro {
    gap: 24px;
  }
  body.page-inner--contact .contact-page__title {
    font-size: 28px;
  }
  body.page-inner--contact .contact-page__intro-text {
    font-size: 16px;
  }
  body.page-inner--contact .contact-page__form {
    gap: 40px;
    margin-top: clamp(80px, 14vw, 178px);
  }
  body.page-inner--contact .contact-page__field {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  body.page-inner--contact .contact-page__field--start {
    align-items: flex-start;
  }
  body.page-inner--contact .contact-page__label-wrap {
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: auto;
    align-items: center;
  }
  body.page-inner--contact .contact-page__label-wrap.contact-page__label-wrap--fieldset {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: max-content;
  }
  body.page-inner--contact .contact-page__cf7 .contact-page__label-wrap.contact-page__label-wrap--fieldset {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: max-content;
  }
  /* 記入欄は PC と同じ 490px 固定で左右端を揃える（flex:1 だとラベル幅差で入力幅が行ごとに変わる） */
  body.page-inner--contact .contact-page__fieldset {
    flex: 0 0 490px;
    width: 490px;
    max-width: 100%;
    min-width: 0;
  }
  body.page-inner--contact .contact-page__control {
    flex: 0 0 490px;
    width: 490px;
    max-width: 100%;
    min-width: 0;
  }
  body.page-inner--contact .contact-page__cf7 .contact-page__control .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.page-inner--contact .contact-page__textarea {
    min-height: 240px;
  }
  body.page-inner--contact .contact-page__form .contact-page__privacy,
  body.page-inner--contact .contact-page__cf7 .wpcf7-form .contact-page__privacy {
    margin-top: 2px;
  }
  body.page-inner--contact .contact-page__form .contact-page__submit-wrap,
  body.page-inner--contact .contact-page__cf7 .wpcf7-form .contact-page__submit-wrap {
    margin-top: 3px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  body.page-inner--contact .contact-page__cf7 {
    margin-top: clamp(60px, 10vw, 79px);
  }
  body.page-inner--contact .contact-page__cf7 .wpcf7-form {
    gap: 40px;
  }
  body.page-inner--contact .contact-page__cf7 textarea.contact-page__textarea,
  body.page-inner--contact .contact-page__cf7 .wpcf7-textarea {
    min-height: 240px;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
body.page-inner--thanks .thanks-page-hero__icon-pc {
  display: none !important;
}

body.page-inner--thanks .thanks-page-hero__icon-sp {
  display: block;
  width: 28px;
  height: auto;
}

body.page-inner--thanks .site-header.concept-page-hero .thanks-page-hero__menu-fab {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 30px;
  background: var(--cr-main, #382620);
  cursor: pointer;
}
body.page-inner--thanks .site-header.concept-page-hero .thanks-page-hero__menu-fab img {
  width: 28px;
  height: 18px;
  object-fit: contain;
}

@media (min-width: 1280px) {
  body.page-inner--thanks .site-header.concept-page-hero .thanks-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
}
body.page-inner--thanks .header__inner--thanks-sp {
  top: 0;
  right: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  body.page-inner--thanks .header__inner--thanks-sp {
    top: 10px;
    right: 10px;
  }
}
/* パンくず Figma pankuzu-pc 19719:10224 / pankuzu-sp 19719:10231（値は inner-page__pankuzu と一致） */
@media (max-width: 1279px) {
  body.page-inner--thanks .thanks-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-inner--thanks .thanks-page__pankuzu a {
    color: inherit;
  }
}
@media (min-width: 1280px) {
  body.page-inner--thanks .thanks-page__pankuzu {
    color: var(--cr-main, #382620);
  }
  body.page-inner--thanks .thanks-page__pankuzu a {
    color: inherit;
  }
}
/* 完了メッセージ */
body.page-inner--thanks .thanks-page__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60px 0 160px;
  overflow: clip;
}
@media (min-width: 1280px) {
  body.page-inner--thanks .thanks-page__section {
    padding: 80px 0 160px;
  }
}

body.page-inner--thanks .thanks-page__inner {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
  color: var(--cr-main, #382620);
  text-align: center;
}
@media (min-width: 1280px) {
  body.page-inner--thanks .thanks-page__inner {
    gap: 24px;
    max-width: 688px;
  }
}

body.page-inner--thanks .thanks-page__title {
  margin: 0;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}
@media (min-width: 1280px) {
  body.page-inner--thanks .thanks-page__title {
    font-size: 28px;
  }
}

body.page-inner--thanks .thanks-page__body {
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  text-align: left;
}
@media (min-width: 1280px) {
  body.page-inner--thanks .thanks-page__body {
    font-size: 16px;
  }
}
body.page-inner--thanks .thanks-page__body p {
  margin: 0;
}
body.page-inner--thanks .thanks-page__body p + p {
  margin-top: 0;
}

body.page-inner--thanks .thanks-page__back {
  margin-top: 8px;
}

/* ---------- タブレット帯（756px〜1279px） ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-inner--thanks .site-header.concept-page-hero .thanks-page-hero__menu-fab {
    top: 0;
    right: 0;
  }
  body.page-inner--thanks .header__inner--thanks-sp {
    top: 10px;
    right: 10px;
  }
  body.page-inner--thanks .thanks-page__section {
    padding: 80px 0 160px;
  }
  body.page-inner--thanks .thanks-page__inner {
    max-width: min(688px, 100% - 32px);
    gap: clamp(21px, 2vw, 24px);
  }
  body.page-inner--thanks .thanks-page__title {
    font-size: clamp(20px, 2.5vw, 28px);
  }
  body.page-inner--thanks .thanks-page__body {
    font-size: clamp(14px, 1.2vw, 16px);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
body.page-inner .inner-page-header {
  background-color: #f3efeb;
}

/* PC: 横型ヘッダーでもドロワー操作はカンプどおり（トップの縦ナビのみ FAB 非表示は _base-header-mainvisual の .front-page 側） */
@media (min-width: 1280px) {
  body.page-inner .inner-page-header .header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
body.page-inner .inner-page__pankuzu {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 20px 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cr-main, #382620);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  body.page-inner .inner-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
  }
}
body.page-inner .inner-page__pankuzu p {
  margin: 0;
}
body.page-inner .inner-page__pankuzu a {
  color: inherit;
  text-decoration: none;
}

.inner-page__main {
  width: 100%;
}

.inner-page__hero {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.inner-page__h1 {
  margin: 0 0 0.5rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  color: #222222;
}
@media (min-width: 1280px) {
  .inner-page__h1 {
    font-size: 1.75rem;
  }
}

.inner-page__lead {
  margin: 0;
  color: #382620;
  line-height: 1.6;
}

.inner-page__section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

/* ---------- タブレット帯（756px〜1279px）: layout/_base の .content-center を広げ、パンくずは PC 幅に近づける ---------- */
@media (min-width: 756px) and (max-width: 1279px) {
  body.page-inner .content-center {
    max-width: min(1100px, 100% - 32px);
    width: 100%;
  }
  body.page-inner .inner-page__pankuzu {
    gap: 15px;
    padding: 16px 90px 0;
    font-size: 14px;
    color: var(--cr-main, #382620);
  }
  body.page-inner .inner-page__pankuzu a {
    color: inherit;
  }
  body.page-inner .inner-page__h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
@media (min-width: 756px) and (max-width: 1279px) {
  body.home,
  body.front-page {
    /* 改行: PC と同じ（SP 専用 br を隠す） */
  }
  body.home .sp-br,
  body.front-page .sp-br {
    display: none !important;
  }
  body.home .pc-br,
  body.front-page .pc-br {
    display: inline !important;
  }
  body.home,
  body.front-page {
    /* ---------- CONCEPT: PC と同型の 2 カラム ---------- */
  }
  body.home .concept,
  body.front-page .concept {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(32px, 6vw, 80px);
    padding-top: clamp(80px, 11vw, 140px);
    padding-right: clamp(24px, 7vw, 90px);
    margin-bottom: clamp(48px, 6vw, 80px);
  }
  body.home .concept__inner,
  body.front-page .concept__inner {
    flex: 1;
    z-index: 1;
    padding: 0;
    max-width: none;
    margin-inline: 0;
  }
  body.home .concept__deco,
  body.front-page .concept__deco {
    width: clamp(160px, 20vw, 255px);
    height: clamp(165px, 20.7vw, 265px);
    top: clamp(8px, 1.5vw, 20px);
  }
  body.home .concept__title,
  body.front-page .concept__title {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-family: "Amatic SC", cursive;
    font-size: clamp(36px, 4vw, 52px);
    letter-spacing: clamp(6px, 0.8vw, 10.4px);
    margin-top: clamp(16px, 2.3vw, 30px);
  }
  body.home .concept__sub-title,
  body.front-page .concept__sub-title {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-size: clamp(12px, 1.1vw, 14px);
    margin-top: 2px;
  }
  body.home .concept__sub-heading,
  body.front-page .concept__sub-heading {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-size: clamp(20px, 2.2vw, 28px);
    margin-top: clamp(32px, 3vw, 48px);
  }
  body.home .concept__description,
  body.front-page .concept__description {
    max-width: none;
    margin-inline: 0;
    color: var(--cr-contrast, #222);
    font-size: clamp(13px, 1.1vw, 14px);
    margin-top: clamp(32px, 3vw, 48px);
  }
  body.home .concept__image-wrapper,
  body.front-page .concept__image-wrapper {
    flex: 0 0 auto;
    margin-inline: 0;
  }
  body.home .concept__image,
  body.front-page .concept__image {
    width: clamp(280px, 47vw, 600px);
    height: auto;
    aspect-ratio: 315/401;
  }
  body.home .concept__bg,
  body.front-page .concept__bg {
    width: clamp(400px, 93vw, 1190px);
    height: clamp(180px, 23vw, 300px);
    top: clamp(280px, 42vw, 544px);
  }
  body.home,
  body.front-page {
    /* ---------- Grand Menu ---------- */
  }
  body.home .grand-menu,
  body.front-page .grand-menu {
    padding: 80px 0 0 0;
    gap: clamp(48px, 8vw, 100px);
  }
  body.home .grand-menu__content,
  body.front-page .grand-menu__content {
    padding-bottom: 88px;
  }
  body.home .grand-menu__bg,
  body.front-page .grand-menu__bg {
    width: 1024px;
    height: 2196px;
  }
  body.home,
  body.front-page {
    /* PC は max-width 1100 中央寄せで左右に空き。タブレットは SP(20px)〜その中間くらいを clamp */
  }
  body.home .grand-menu__inner,
  body.front-page .grand-menu__inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-block: 0;
    padding-inline: clamp(20px, 2.8vw + 12px, 72px);
    gap: clamp(40px, 5vw, 57px);
  }
  body.home .grand-menu__heading-group,
  body.front-page .grand-menu__heading-group {
    height: auto;
    gap: 0;
  }
  body.home .grand-menu__title,
  body.front-page .grand-menu__title {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 10px;
  }
  body.home .grand-menu__sub-title,
  body.front-page .grand-menu__sub-title {
    font-size: 14px;
    margin-top: -2px;
  }
  body.home .grand-menu__menu,
  body.front-page .grand-menu__menu {
    max-width: 1100px;
    gap: clamp(48px, 8vw, 98px);
  }
  body.home .grand-menu__section,
  body.front-page .grand-menu__section {
    gap: 24px;
  }
  body.home .grand-menu__section-heading .grand-menu__section-title,
  body.front-page .grand-menu__section-heading .grand-menu__section-title {
    padding: 5px 20px;
    font-size: 24px;
  }
  body.home,
  body.front-page {
    /* カード: SP(158)〜PC(344) の中間を vw で補間。行の左右位置は PC と同じ space-between（_grand-menu.scss 1280px+） */
  }
  body.home .grand-menu__cards,
  body.front-page .grand-menu__cards {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 34px);
    justify-content: space-between;
    width: 100%;
  }
  body.home .grand-menu__card,
  body.front-page .grand-menu__card {
    width: clamp(158px, 15vw + 65px, 290px);
  }
  body.home .grand-menu__card-img-wrap,
  body.front-page .grand-menu__card-img-wrap {
    width: clamp(158px, 15vw + 65px, 290px);
    height: clamp(158px, 15vw + 65px, 290px);
    border-width: clamp(5px, 0.45vw + 2.5px, 8px);
  }
  body.home .grand-menu__card-img,
  body.front-page .grand-menu__card-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.home .grand-menu__card-title,
  body.front-page .grand-menu__card-title {
    font-size: clamp(14px, 1.1vw + 5px, 20px);
  }
  body.home .grand-menu__card-price,
  body.front-page .grand-menu__card-price {
    font-size: clamp(24px, 1.2vw + 16px, 32px);
  }
  body.home .grand-menu__drink-row,
  body.front-page .grand-menu__drink-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(24px, 4vw, 85px);
    max-width: 1100px;
    margin: 0 auto;
  }
  body.home .grand-menu__drink-pc-image,
  body.front-page .grand-menu__drink-pc-image {
    display: block;
    flex-shrink: 0;
    width: 327px;
    height: 327px;
    background: var(--cr-white, #fff);
    border: 8px solid var(--cr-white, #fff);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  body.home .grand-menu__drink-pc-image img,
  body.front-page .grand-menu__drink-pc-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    transform: scale(1.1);
    transform-origin: center center;
  }
  body.home .grand-menu__drink,
  body.front-page .grand-menu__drink {
    flex-direction: row;
    flex: 1;
    gap: 48px;
    padding-top: 3px;
    padding-inline: 0;
  }
  body.home .grand-menu__drink-category,
  body.front-page .grand-menu__drink-category {
    width: 197px;
    flex-shrink: 0;
    gap: 13px;
  }
  body.home .grand-menu__drink-category-title,
  body.front-page .grand-menu__drink-category-title {
    margin: 0;
    padding-bottom: 6px;
    position: relative;
    top: -5px;
  }
  body.home .grand-menu__deco--leaf,
  body.front-page .grand-menu__deco--leaf {
    left: -44px;
    top: -86px;
    transform: rotate(2deg);
    width: 266px;
    height: 294px;
  }
  body.home .grand-menu__deco--beans,
  body.front-page .grand-menu__deco--beans {
    right: -90px;
    bottom: -122px;
    width: 390px;
    height: 330px;
    clip-path: inset(0 90px 0 0);
    overflow: hidden;
  }
  body.home .grand-menu-gallery-spacer,
  body.front-page .grand-menu-gallery-spacer {
    height: 158px;
  }
  body.home,
  body.front-page {
    /* ---------- Gallery ---------- */
  }
  body.home .gallery,
  body.front-page .gallery {
    padding-top: 80px;
    padding-bottom: 72px;
  }
  body.home .gallery__deco--speech,
  body.front-page .gallery__deco--speech {
    display: none;
  }
  body.home .gallery__deco--balloon-pc,
  body.front-page .gallery__deco--balloon-pc {
    display: block;
    left: clamp(120px, 23vw, 297px);
    top: -60px;
    width: 266px;
    height: 138px;
  }
  body.home .gallery__inner,
  body.front-page .gallery__inner {
    gap: 60px;
    padding-bottom: 16px;
    padding-inline: clamp(20px, 2.8vw + 12px, 72px);
  }
  body.home .gallery__heading,
  body.front-page .gallery__heading {
    height: auto;
  }
  body.home .gallery__title-en,
  body.front-page .gallery__title-en {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 12px;
  }
  body.home .gallery__title-ja,
  body.front-page .gallery__title-ja {
    font-size: 14px;
  }
  body.home .gallery__grid,
  body.front-page .gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.9vw, 24px);
    width: 100%;
    max-width: min(1100px, 100%);
    margin-top: 22px;
  }
  body.home,
  body.front-page {
    /* SP(158)〜PC(257) の中間を clamp。セル内は margin-inline: auto で中央 */
  }
  body.home .gallery__img-wrap,
  body.front-page .gallery__img-wrap {
    width: 100%;
    max-width: clamp(158px, 12vw + 68px, 230px);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
  }
  body.home,
  body.front-page {
    /* ---------- News（SP〜PC の中間。右 4 枚は grid で 2×2、幅が足りないと flex で 1 列になっていたのを解消） ---------- */
  }
  body.home .news,
  body.front-page .news {
    padding-top: 80px;
  }
  body.home .news__inner,
  body.front-page .news__inner {
    gap: 60px;
    max-width: 1100px;
    padding-block: 0;
    padding-inline: clamp(20px, 2.8vw + 12px, 72px);
  }
  body.home .news__heading,
  body.front-page .news__heading {
    height: auto;
  }
  body.home .news__title-en,
  body.front-page .news__title-en {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 8px;
  }
  body.home .news__title-ja,
  body.front-page .news__title-ja {
    font-size: 14px;
  }
  body.home .news__list,
  body.front-page .news__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 2vw, 30px);
    max-width: none;
    width: 100%;
  }
  body.home .news__card--large,
  body.front-page .news__card--large {
    flex: 1 1 clamp(335px, 12vw + 240px, 460px);
    width: clamp(335px, 12vw + 240px, 460px);
    max-width: clamp(335px, 12vw + 240px, 460px);
    gap: 16px;
  }
  body.home .news__card--large .news__card-image-wrap,
  body.front-page .news__card--large .news__card-image-wrap {
    aspect-ratio: 1.5987460815;
  }
  body.home .news__card--large .news__card-body,
  body.front-page .news__card--large .news__card-body {
    gap: 20px;
  }
  body.home .news__card--large .news__card-title,
  body.front-page .news__card--large .news__card-title {
    font-size: clamp(14px, 1.1vw + 5px, 20px);
  }
  body.home .news__card--large .news__card-desc-inner,
  body.front-page .news__card--large .news__card-desc-inner {
    font-size: clamp(12px, 0.5vw + 9px, 14px);
  }
  body.home .news__cards,
  body.front-page .news__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 30px);
    row-gap: clamp(16px, 2vw, 30px);
    flex: 1 1 clamp(335px, 14vw + 180px, 500px);
    width: clamp(335px, 14vw + 180px, 500px);
    max-width: clamp(335px, 14vw + 180px, 500px);
    align-content: start;
  }
  body.home .news__card--small,
  body.front-page .news__card--small {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 2px;
  }
  body.home .news__card--small .news__card-image-wrap,
  body.front-page .news__card--small .news__card-image-wrap {
    aspect-ratio: 1.5962441315;
  }
  body.home .news__card--small .news__card-title,
  body.front-page .news__card--small .news__card-title {
    font-size: clamp(12px, 0.8vw + 8px, 16px);
  }
  body.home .news__card--small .news__card-date,
  body.front-page .news__card--small .news__card-date {
    font-size: clamp(12px, 0.5vw + 9px, 14px);
  }
  body.home .news__bg-deco,
  body.front-page .news__bg-deco {
    left: -87px;
    top: -145px;
    width: 354px;
    height: 320px;
  }
  body.home .special-lunch-set,
  body.front-page .special-lunch-set {
    margin-top: 213px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 80px 40px;
    background: var(--cr-base-dark, #eae0d5);
  }
  body.home .special-lunch-set__inner,
  body.front-page .special-lunch-set__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 0;
    background: transparent;
  }
  body.home .special-lunch-set__deco,
  body.front-page .special-lunch-set__deco {
    width: 167px;
    height: 228px;
    top: -130px;
  }
  body.home .special-lunch-set__speech-bubble,
  body.front-page .special-lunch-set__speech-bubble {
    width: 310px;
    height: 157px;
    right: 15px;
    top: 180px;
  }
  body.home .special-lunch-set__heading-group,
  body.front-page .special-lunch-set__heading-group {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  body.home .special-lunch-set__title,
  body.front-page .special-lunch-set__title {
    font-size: 52px;
    letter-spacing: 10.4px;
    margin-left: 7px;
  }
  body.home .special-lunch-set__sub-title,
  body.front-page .special-lunch-set__sub-title {
    font-size: 14px;
    margin-top: -2px;
  }
  body.home .special-lunch-set__body,
  body.front-page .special-lunch-set__body {
    width: 100%;
    padding: 80px 40px 40px;
  }
  body.home .special-lunch-set__menu,
  body.front-page .special-lunch-set__menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -20px;
    margin-inline: 0;
    gap: clamp(8px, 1.5vw, 20px);
    align-items: start;
    justify-items: center;
  }
  body.home .special-lunch-set__menu-item,
  body.front-page .special-lunch-set__menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.5vw, 16px);
    width: 100%;
    min-width: 0;
  }
  body.home .special-lunch-set__menu-item img,
  body.front-page .special-lunch-set__menu-item img {
    width: 100%;
    max-width: clamp(158px, 12vw + 68px, 220px);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }
  body.home .special-lunch-set__menu-item:nth-child(2), body.home .special-lunch-set__menu-item:nth-child(4),
  body.front-page .special-lunch-set__menu-item:nth-child(2),
  body.front-page .special-lunch-set__menu-item:nth-child(4) {
    padding-top: clamp(18px, 2.5vw, 40px);
  }
  body.home .special-lunch-set__menu-text,
  body.front-page .special-lunch-set__menu-text {
    margin-top: 0;
    width: 100%;
    max-width: clamp(158px, 12vw + 68px, 220px);
    gap: clamp(8px, 1vw, 12px);
  }
  body.home .special-lunch-set__menu-icon,
  body.front-page .special-lunch-set__menu-icon {
    width: clamp(24px, 3.2vw, 49px);
    height: clamp(24px, 3.2vw, 49px);
    flex: 0 0 auto;
    font-size: clamp(16px, 2.4vw, 32px);
    letter-spacing: clamp(1.5px, 0.22vw, 3.84px);
    padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 13px);
  }
  body.home .special-lunch-set__menu-name,
  body.front-page .special-lunch-set__menu-name {
    font-size: clamp(14px, 0.9vw + 10px, 18px);
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }
  body.home .special-lunch-set__set-menu,
  body.front-page .special-lunch-set__set-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 24px;
    min-height: 230px;
    height: auto;
    margin-top: 60px;
    margin-inline: 0;
    padding: 20px clamp(16px, 5vw, 70px);
    border-radius: 8px;
    background: #f7f6f4;
  }
  body.home .special-lunch-set__set-menu-detail,
  body.front-page .special-lunch-set__set-menu-detail {
    width: auto;
    gap: 12px;
  }
  body.home .special-lunch-set__set-menu-item,
  body.front-page .special-lunch-set__set-menu-item {
    width: 200px;
    height: 190px;
  }
  body.home .special-lunch-set__set-menu-img,
  body.front-page .special-lunch-set__set-menu-img {
    max-width: 172px;
    max-height: 145px;
    aspect-ratio: auto;
    object-fit: contain;
  }
  body.home .special-lunch-set__set-menu-icon-plus,
  body.front-page .special-lunch-set__set-menu-icon-plus {
    width: 26px;
    height: 26px;
  }
  body.home .special-lunch-set__set-menu-info,
  body.front-page .special-lunch-set__set-menu-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    width: 220px;
  }
  body.home .special-lunch-set__set-menu-title,
  body.front-page .special-lunch-set__set-menu-title {
    text-align: right;
    font-size: 20px;
  }
}
/* タブレット帯のうち幅が十分なとき: NEWS の大カード＋右 2×2 を PC と同様に 1 行へ（ネスト @media で CSS を分割しないためここに記述） */
@media (min-width: 1120px) and (max-width: 1279px) {
  body.home .news__list,
  body.front-page .news__list {
    flex-wrap: nowrap;
  }
}
/* Component styles */
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn {
  background-color: #f07317;
  color: #ffffff;
  border-color: #f07317;
  box-shadow: none;
}
.btn:hover:not(:disabled) {
  background-color: rgb(199.1255060729, 91.8380566802, 12.8744939271);
  border-color: rgb(199.1255060729, 91.8380566802, 12.8744939271);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn:active:not(:disabled) {
  background-color: rgb(175.1740890688, 80.7914979757, 11.3259109312);
  border-color: rgb(175.1740890688, 80.7914979757, 11.3259109312);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn:disabled {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: #888888;
}
.btn--sm {
  padding: 8px 16px;
  font-size: 12px;
  min-height: 32px;
  border-radius: 4px;
}
.btn--lg {
  padding: 16px 32px;
  font-size: 18px;
  min-height: 56px;
  border-radius: 8px;
}
.btn--secondary {
  background-color: transparent;
  color: #222222;
  border-color: #cccccc;
  box-shadow: none;
}
.btn--secondary:hover:not(:disabled) {
  background-color: hsl(25.4377880184, 87.8542510121%, 101.568627451%);
  color: #f07317;
  border-color: #f07317;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn--secondary:active:not(:disabled) {
  background-color: rgb(253.9372469636, 245.0809716599, 238.5627530364);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn--secondary:disabled {
  background-color: transparent;
  border-color: #e6e6e6;
  color: #888888;
}
.btn--ghost {
  background-color: transparent;
  color: #222222;
  border-color: transparent;
  box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
  background-color: #f8f8f8;
  color: #222222;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn--ghost:active:not(:disabled) {
  background-color: rgb(240.35, 240.35, 240.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn--ghost:disabled {
  background-color: transparent;
  color: #888888;
}
.btn--full {
  width: 100%;
}
.btn--rounded {
  border-radius: 24px;
}
.btn__icon {
  display: flex;
  align-items: center;
  font-size: inherit;
}
.btn__text {
  font-weight: inherit;
}

button.btn,
input[type=button].btn,
input[type=submit].btn,
input[type=reset].btn {
  font-family: inherit;
}

.button {
  position: relative;
  width: 296px;
}
.button:hover .button-main {
  transform: translate(6px, 6px);
}

.button-main {
  display: flex;
  width: 290px;
  padding: 24px 0;
  justify-content: center;
  align-items: center;
  background: var(--cr-contrast, #222);
  transition: transform 0.3s ease;
}

.arrow-right {
  width: 16px;
  height: 24px;
  fill: var(--cr-white, #fff);
  position: absolute;
  top: 24px;
  left: 252px;
}

.button-arrow {
  width: 290px;
  height: 72px;
  border-right: 1px solid var(--cr-contrast, #222);
  border-bottom: 1px solid var(--cr-contrast, #222);
  position: absolute;
  top: 6px;
  left: 6px;
  /* 下層の <a> より前面に重なるが、クリックはリンクへ通す */
  pointer-events: none;
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.form-group {
  margin-bottom: 20px;
}
.form-group--sm {
  margin-bottom: 12px;
}
.form-group--lg {
  margin-bottom: 28px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #222222;
}
.form-label--required::after {
  content: "*";
  margin-left: 4px;
  color: #ff4444;
}

.form-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #222222;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  appearance: none;
  transition: all 0.2s ease;
}
.form-input::placeholder {
  color: #888888;
  opacity: 1;
}
.form-input:focus {
  outline: none;
  border-color: #f07317;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}
.form-input:disabled {
  background-color: #f8f8f8;
  color: #888888;
  border-color: #e6e6e6;
  cursor: not-allowed;
  opacity: 0.6;
}
.form-input:read-only {
  background-color: #f8f8f8;
  border-color: #e6e6e6;
}
.form-input--sm {
  padding: 8px 10px;
  font-size: 12px;
  min-height: 32px;
}
.form-input--lg {
  padding: 12px 16px;
  font-size: 16px;
  min-height: 48px;
}
.form-input--error {
  border-color: #ff4444;
}
.form-input--error:focus {
  border-color: #ff4444;
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1);
}
.form-input--success {
  border-color: #4caf50;
}
.form-input--success:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.form-input--full {
  width: 100%;
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
  padding: 10px 12px;
}
textarea.form-input--sm {
  min-height: 60px;
}
textarea.form-input--lg {
  min-height: 140px;
}

.form-select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #222222;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  appearance: none;
  transition: all 0.2s ease;
}
.form-select::placeholder {
  color: #888888;
  opacity: 1;
}
.form-select:focus {
  outline: none;
  border-color: #f07317;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}
.form-select:disabled {
  background-color: #f8f8f8;
  color: #888888;
  border-color: #e6e6e6;
  cursor: not-allowed;
  opacity: 0.6;
}
.form-select:read-only {
  background-color: #f8f8f8;
  border-color: #e6e6e6;
}
.form-select {
  padding-right: calc(12px + 12px + 8px);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23888888" d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
.form-select::-webkit-scrollbar {
  width: 6px;
}
.form-select::-webkit-scrollbar-track {
  background: #ffffff;
}
.form-select::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 3px;
}
.form-select::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

.form-checkbox,
.form-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  transition: all 0.2s ease;
}
.form-checkbox:focus,
.form-radio:focus {
  outline: 2px solid rgba(240, 115, 23, 0.2);
}
.form-checkbox:checked,
.form-radio:checked {
  background-color: #f07317;
  border-color: #f07317;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23ffffff" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 11-1.06-1.06l7.25-7.25a.75.75 0 011.06 0z"/><path fill="%23ffffff" d="M4.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}
.form-checkbox:disabled,
.form-radio:disabled {
  background-color: #f8f8f8;
  border-color: #e6e6e6;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-radio {
  border-radius: 50%;
}
.form-radio:checked {
  background-image: radial-gradient(circle, white 30%, transparent 30%);
  background-size: 60%;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.form-check__label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.form-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #888888;
}
.form-help--error {
  color: #ff4444;
}
.form-help--success {
  color: #4caf50;
}

.form {
  width: 100%;
}
.form__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: flex-end;
}
.form__actions--center {
  justify-content: center;
}
.form__actions--start {
  justify-content: flex-start;
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e6e6e6;
  background-color: transparent;
  padding: 0px;
}
.tabs--full {
  width: 100%;
}
.tabs--scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs--scrollable::-webkit-scrollbar {
  height: 4px;
}
.tabs--scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.tabs--scrollable::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 2px;
}
.tabs--scrollable::-webkit-scrollbar-thumb:hover {
  background: #888888;
}
.tabs--vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid #e6e6e6;
}
.tabs__nav {
  display: flex;
  gap: 0;
  flex: 1;
  align-items: center;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #222222;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
}
.tab:hover:not(:disabled):not(.active) {
  background-color: #f8f8f8;
  color: #222222;
}
.tab.active, .tab[aria-selected=true] {
  background-color: transparent;
  color: #f07317;
  border-bottom-color: #f07317;
}
.tab.active::after, .tab[aria-selected=true]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #f07317;
}
.tab:disabled {
  color: #888888;
  cursor: not-allowed;
  opacity: 0.6;
}
.tab:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}
.tab--sm {
  padding: 8px 12px;
  font-size: 12px;
  min-height: 32px;
}
.tab--lg {
  padding: 16px 28px;
  font-size: 16px;
  min-height: 48px;
}
.tab--bordered {
  border: 2px solid transparent;
  border-radius: 0px;
  border-bottom: 2px solid transparent;
}
.tab--bordered.active, .tab--bordered[aria-selected=true] {
  border-color: #f07317;
  background-color: rgba(240, 115, 23, 0.05);
}
.tab--bordered.active::after, .tab--bordered[aria-selected=true]::after {
  display: none;
}
.tab--pill {
  border-radius: 20px;
  border: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.tab--pill.active, .tab--pill[aria-selected=true] {
  background-color: #f07317;
  color: #ffffff;
}
.tab--pill.active::after, .tab--pill[aria-selected=true]::after {
  display: none;
}
.tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: inherit;
}
.tab__label {
  flex: 1;
}
.tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background-color: #f07317;
  border-radius: 10px;
  min-width: 20px;
}

.tab-content {
  display: none;
}
.tab-content.active, .tab-content[aria-hidden=false] {
  display: block;
}
.tab-content--no-padding {
  padding: 0;
}

.tab-panel {
  padding: 20px;
}
.tab-panel--sm {
  padding: 12px;
}
.tab-panel--lg {
  padding: 28px;
}

/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0px;
}
.pagination--center {
  justify-content: center;
}
.pagination--start {
  justify-content: flex-start;
}
.pagination--end {
  justify-content: flex-end;
}
.pagination--sm {
  gap: 4px;
}
.pagination--sm .pagination__item {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
}
.pagination--lg {
  gap: 12px;
}
.pagination--lg .pagination__item {
  min-width: 44px;
  height: 44px;
  font-size: 16px;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #222222;
  background-color: transparent;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.pagination__item:hover:not(:disabled):not(.active) {
  background-color: #f8f8f8;
  color: #222222;
  border-color: #cccccc;
}
.pagination__item:active:not(:disabled):not(.active) {
  opacity: 0.8;
}
.pagination__item.active, .pagination__item[aria-current=page] {
  background-color: #f07317;
  color: #ffffff;
  border-color: #f07317;
  cursor: default;
}
.pagination__item:disabled, .pagination__item.disabled {
  background-color: #f8f8f8;
  color: #888888;
  border-color: #e6e6e6;
  cursor: not-allowed;
  opacity: 0.6;
}
.pagination__item:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}
.pagination__item--text {
  padding: 0 12px;
  border: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: #222222;
  background-color: transparent;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.pagination__link:hover:not(:disabled):not(.active) {
  background-color: #f8f8f8;
  color: #222222;
  border-color: #cccccc;
}
.pagination__link:active:not(:disabled):not(.active) {
  opacity: 0.8;
}
.pagination__link.active, .pagination__link[aria-current=page] {
  background-color: #f07317;
  color: #ffffff;
  border-color: #f07317;
  cursor: default;
}
.pagination__link:disabled, .pagination__link.disabled {
  background-color: #f8f8f8;
  color: #888888;
  border-color: #e6e6e6;
  cursor: not-allowed;
  opacity: 0.6;
}
.pagination__link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}
.pagination__link--prev, .pagination__link--next {
  padding: 0;
  min-width: auto;
}
.pagination__link--prev .pagination__arrow, .pagination__link--next .pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination__link--first, .pagination__link--last {
  padding: 0;
  min-width: auto;
}

.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.pagination__label {
  font-size: 13px;
  color: #888888;
  margin: 0 4px;
  white-space: nowrap;
}

.pagination__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888888;
  margin: 0 12px;
}
.pagination__info--emphasized {
  color: #222222;
  font-weight: 600;
}

.pagination__select {
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
}
.pagination__select:focus {
  outline: none;
  border-color: #f07317;
  box-shadow: 0 0 0 3px rgba(240, 115, 23, 0.1);
}

.pagination__ellipsis {
  color: #888888;
  padding: 0 4px;
  cursor: default;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}
.pagination-container--full {
  width: 100%;
}
.pagination-container--center {
  justify-content: center;
}

.pagination-summary {
  font-size: 13px;
  color: #888888;
  white-space: nowrap;
}
.pagination-summary__current {
  font-weight: 600;
  color: #222222;
}
.pagination-summary__total {
  color: #888888;
}

.pagination-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-range__label {
  font-size: 12px;
  color: #888888;
  white-space: nowrap;
}
.pagination-range__input {
  width: 50px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  text-align: center;
}
.pagination-range__input:focus {
  outline: none;
  border-color: #f07317;
  box-shadow: 0 0 0 2px rgba(240, 115, 23, 0.1);
}

@media (max-width: 768px) {
  .pagination {
    gap: 4px;
  }
  .pagination .pagination__item {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .pagination .pagination__info {
    display: none;
  }
  .pagination-container {
    flex-direction: column;
    align-items: center;
  }
  .pagination-summary {
    width: 100%;
    text-align: center;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.hero--sm {
  min-height: 300px;
  padding: 20px;
}
.hero--md {
  min-height: 350px;
  padding: 30px;
}
.hero--lg {
  min-height: 500px;
  padding: 60px;
}
.hero--light-overlay::before {
  background-color: rgba(0, 0, 0, 0.1);
}
.hero--dark-overlay::before {
  background-color: rgba(0, 0, 0, 0.5);
}
.hero--no-overlay::before {
  display: none;
}
.hero--gradient::before {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.hero--parallax {
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .hero--parallax {
    background-attachment: scroll;
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  max-width: 100%;
}
.hero__heading {
  font-family: "Amatic SC", cursive;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
  word-break: break-word;
}
.hero__subheading {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
  max-width: 90%;
}
.hero__description {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
  max-width: 80%;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.hero__badge {
  display: inline-block;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #f07317;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero__scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: scroll-bounce 2s infinite;
}
.hero__scroll-icon {
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__scroll-icon::after {
  content: "";
  width: 2px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 1px;
  animation: scroll-dot 2s infinite;
}
.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@keyframes scroll-bounce {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scroll-dot {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (max-width: 768px) {
  .hero {
    min-height: 300px;
    padding: 20px;
  }
  .hero__heading {
    font-size: 28px;
  }
  .hero__subheading {
    font-size: 14px;
  }
  .hero__description {
    font-size: 12px;
    max-width: 100%;
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .hero__content {
    gap: 12px;
  }
  .hero__scroll-indicator {
    display: none;
  }
}
@media (max-width: 480px) {
  .hero {
    min-height: 250px;
    padding: 16px;
  }
  .hero__heading {
    font-size: 24px;
  }
  .hero__subheading {
    font-size: 12px;
  }
  .hero__badge {
    font-size: 10px;
    padding: 6px 12px;
  }
  .hero__description {
    font-size: 11px;
  }
}
/*
  SCSS/style.scss（エントリーポイント）
  _variables_refined.scss を読み込み、プロジェクトの主要スタイルをまとめます。
  ビルド:
    npm run build:css        → ソースマップなし（本番・CI 相当）
    npm run build:css:map    → 埋め込みソースマップ付き
    npm run watch:css        → ウォッチ＋埋め込みソースマップ（開発向け）
*/
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; /* 100vw はスクロールバー幅を含み横空白の原因になるため left/right で幅を指定 */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}
.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 375px;
  height: 100%;
  background-color: var(--cr-main, #382620);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer.active {
  transform: translateX(0);
}
.drawer--left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.drawer--left.active {
  transform: translateX(0);
}
.drawer--sm {
  width: 240px;
}
.drawer--lg {
  width: 320px;
}

.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
  background-color: var(--cr-main, #382620);
  align-self: stretch;
}

.drawer__logo {
  display: block;
  line-height: 0;
}
.drawer__logo img {
  width: 119.999px;
  height: 65px;
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  position: relative;
}
.drawer__close::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-image: url("../img/common/close.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.drawer__close:hover {
  opacity: 0.7;
}

.drawer__body {
  background: var(--cr-main, #382620);
  padding-bottom: 50px;
}

.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 52px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  flex: 1 0 0;
  align-self: stretch;
}

.drawer__item {
  margin: 0;
  align-self: flex-start;
  width: 100%;
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 0;
  width: 100%;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cr-white, #fff);
  text-decoration: none;
  transition: all 0.2s ease;
}
.drawer__link:hover {
  opacity: 0.7;
}
.drawer__link.active, .drawer__link[aria-current=page] {
  color: #f07317;
  background-color: rgba(240, 115, 23, 0.05);
}
.drawer__link__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer__link-en {
  color: var(--cr-white, #fff);
  font-family: "Patua One";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 2.88px;
  text-transform: uppercase;
}

.drawer__link-separator {
  color: var(--cr-white, #fff);
  font-family: "Noto Serif JP";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 5px;
}

.drawer__link-ja {
  color: var(--cr-white, #fff);
  font-family: "Noto Serif JP";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 5px;
}

.drawer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: auto;
}

.drawer__social-link {
  display: block;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.drawer__social-link img {
  width: 19.5px;
  height: 15.838px;
  flex-shrink: 0;
  display: block;
}
.drawer__social-link:hover {
  opacity: 0.7;
}

.drawer__top-images {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.drawer__top-logo-link {
  display: block;
  line-height: 0;
}

.drawer__top-logo {
  height: auto;
  max-width: 120px;
}

.drawer__footer {
  padding: 20px;
  border-top: 1px solid #e6e6e6;
  margin-top: auto;
}

body.drawer-open {
  overflow: hidden;
}
@media (min-width: 769px) {
  body.drawer-open {
    overflow: auto;
  }
}

@media (max-width: 768px) {
  .header__hamburger {
    display: flex;
  }
  .drawer {
    width: 375px;
  }
}
@media (max-width: 480px) {
  .drawer {
    width: 375px;
  }
}
/* CSS カスタムプロパティにエクスポート（必要なら） */
:root {
  --color-text: #222222;
  --color-bg: #ffffff;
  --color-accent: #f07317;
  --font-family-sans: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-family-heading: "Amatic SC", cursive;
  --cr-base: #f3efeb;
  --cr-base-dark: #eae0d5;
  --cr-main: #382620;
  --cr-white: #ffffff;
  --cr-contrast: #222222;
}

/* ベーススタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  color: #222222;
  background-color: var(--cr-base, #f3efeb);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 375px〜1280px: content-center で 375px 中央寄せ（viewport-clip がビューポート幅でクリップ） */
@media (max-width: 1279px) {
  .content-center {
    margin-inline: auto;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Amatic SC", cursive;
  color: #222222;
}

/* プロジェクト固有の部分はここに追加してください */
/* 例: @use 'components/forms' as *; */
/* 例: @use 'components/cards' as *; */
/* レイヤー名の順序のみ宣言（本文スタイルは未レイヤー）。docs/css-layers.md 参照。 */
@layer open-cafe-base, open-cafe-components, open-cafe-wp-shims;