.panel__inner--plate {
  position: relative;
  display: flex;
  align-items: center;
}

.plateBoard {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.plateBoard__head {
  position: relative;
  z-index: 2;
}

.plateBoard__title {
  margin-bottom: 18px;
}

.plateBoard__lead {
  margin-bottom: 0;
}

/* --------------------------------
   image
-------------------------------- */
.plateBoard__image {
  position: absolute;
  top: 36px;
  right: 0;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  z-index: 1;
  opacity: 0;
  overflow: hidden;
  border-radius: 58% 42% 46% 54% / 41% 59% 43% 57%;
  will-change: border-radius;
}

.plateBoard__imageImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.82);
  transform: scale(1.08);
}

/* --------------------------------
   body
-------------------------------- */
.plateBoard__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 110px;
  margin-top: 64px;
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  opacity: 0;
}

.plateBoard__col {
  display: grid;
  gap: 28px;
}

.plateBoard__item {
  display: grid;
  grid-template-columns: 72px 12px 1fr;
  align-items: baseline;
  column-gap: 6px;
  line-height: 1.5;
}

.plateBoard__labelText {
  display: block;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(208, 216, 226, 0.82);
  white-space: nowrap;
}

.plateBoard__slash {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: rgba(208, 216, 226, 0.82);
  white-space: nowrap;
}

.plateBoard__text {
  display: block;
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(208, 216, 226, 0.72);
}

.plateBoard__note {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(208, 216, 226, 0.55);
  position: relative;
  z-index: 2;
  opacity: 0;
}

.plateBoard__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 48px;
  position: relative;
  z-index: 2;
  opacity: 0;
}

.plateBoard__priceLabel {
  font-size: 16px;
  color: rgba(208, 216, 226, 0.62);
}

.plateBoard__priceValue {
  font-size: clamp(44px, 4vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(208, 216, 226, 0.88);
}

.plateBoard__priceTax {
  font-size: 18px;
  font-weight: 700;
  color: rgba(208, 216, 226, 0.68);
}

/* --------------------------------
   inner scroll base
-------------------------------- */
[data-inner-scroll] {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------
   sp
-------------------------------- */
@media (max-width: 768px) {
  .panel__inner--plate {
    display: block;
    height: 100vh;
    min-height: 100vh;
  }

  .plateBoard {
    height: 100%;
    padding-top: 96px;
    padding-bottom: 96px;
    box-sizing: border-box;
  }

  .plateBoard__image {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: 40px;
  }

  .plateBoard__imageImg {
    filter: brightness(0.88);
    transform: scale(1.05);
  }

  .plateBoard__body {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 48px;
    width: 100%;
  }

  .plateBoard__col {
    gap: 14px;
  }

  .plateBoard__item {
    grid-template-columns: 64px 10px 1fr;
    column-gap: 4px;
  }

  .plateBoard__labelText,
  .plateBoard__slash,
  .plateBoard__text {
    font-size: 16px;
  }

  .plateBoard__text {
    line-height: 1.6;
  }

  .plateBoard__note {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.7;
  }

  .plateBoard__price {
    margin-top: 32px;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  .plateBoard__priceLabel {
    font-size: 14px;
  }

  .plateBoard__priceValue {
    font-size: 28px;
  }

  .plateBoard__priceTax {
    font-size: 14px;
  }
}
/* =============================================================
   plate-page.css
   PLATE ページ専用スタイル
   concept.css / structure.css のデザイン言語を踏襲
============================================================= */

/* =============================================
   BODY
============================================= */

body.plate-page { overflow-x: hidden; }
/* scrollHint は site-chrome.js の共通注入で表示。 HERO area 限定の表示制御は
   ui.css 側 (body.is-plate-content-active / is-footer-active 等) で行うため、
   ここでの全 page-wide な display:none は撤廃。 */

/* =============================================
   HERO（concept-hero と同一設計）
============================================= */

.plate-hero { min-height: 100vh; }

.plate-hero__inner {
  width: 100%;
  min-height: 100vh;
  padding: 0 148px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全子要素を align-items:center で同一縦軸に揃える */
.plate-hero__content {
  width: min(100%, 900px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* タイトル:「Plate」は5文字と短いため、concept と同じ視覚的重みを
   出すために font-size を concept より大きく設定する */
.plate-hero__title {
  margin: 0;
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 700;
  color: var(--title-color);
  text-align: center;
  width: 100%;
}
.plate-hero__title .textMotion,
.plate-hero__title .textMotion--hero {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.plate-hero__title .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* リード（concept-hero__lead と同一） */
.plate-hero__lead {
  margin: 20px 0 0;
  color: rgba(208, 216, 226, 0.68);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.005em;
  text-align: center;
  width: 100%;
  transform: translateX(10px);
}
.plate-hero__lead .textMotion,
.plate-hero__lead .textMotion--panel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.plate-hero__lead .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}
.plate-hero__lead .glyph__char { letter-spacing: 0.005em; }

/* メインコピー（concept-hero__copy と同一） */
.plate-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 52px;
  width: 100%;
  transform: translateX(10px);
}
.plate-hero__copyLine {
  margin: 0;
  color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  font-size: clamp(36px, 4.6vw, 66px);
}
.plate-hero__copyLine + .plate-hero__copyLine { margin-top: 4px; }
.plate-hero__copyLine .textMotion,
.plate-hero__copyLine .textMotion--panel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.plate-hero__copyLine .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}
.plate-hero__copyLine .glyph__char { letter-spacing: 0; }

/* 末尾句読点の光学補正（concept.css と同一） */
.chero-line--punct-end .textMotion__line {
  transform: translateX(0.22em);
}
.plate-hero__lead.chero-line--punct-end .textMotion__line {
  transform: translateX(0);
}
.plate-hero__copyLine--2.chero-line--punct-end .textMotion__line {
  transform: translateX(0.12em);
}

/* チラ見え防止: split 完了まで非表示 */
.js-hero-title,
.js-hero-jp,
.js-chero-copy-line { visibility: hidden; }
body.is-hero-ready .js-hero-title,
body.is-hero-ready .js-hero-jp,
body.is-hero-ready .js-chero-copy-line { visibility: visible; }

/* =============================================
   CONTENT PANEL
============================================= */

.plate-content-panel { overflow: hidden; }

.plate-content-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 46, 56, 0.28);
  backdrop-filter: blur(2px);
  opacity: 1;
  z-index: -1;
}

.plate-content-panel .panel__inner,
.plate-content-panel__inner {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh;
  display: flex;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

/* viewport: height 固定でクリップ */
.plate-content__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* inner: transform-based scroll target */
.plate-content__inner {
  width: 100%;
  padding: 100px 148px 160px 148px;
  box-sizing: border-box;
  will-change: transform;
}

/* =============================================
   INTRO（最初のコピー + リード）
============================================= */

.plateIntro {
  width: min(100%, 820px);
  margin: 0 auto 80px;
  text-align: center;
}

.plateIntro__statement {
  margin: 0 auto;
  color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(26px, 3.8vw, 50px);
  line-height: 1.26;
  letter-spacing: 0.005em;
  font-weight: 400;
}

.plateIntro__lead {
  margin: 32px auto 0;
  max-width: 560px;
  color: rgba(208, 216, 226, 0.60);
  font-size: 14px;
  line-height: 2.1;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: left;
}

/* =============================================
   01–05 SECTIONS
============================================= */

.plateSections {
  width: min(100%, 1000px);
  margin: 0 auto;
}

/* ── section 単体 ── */
.plateSection { /* 縦に積む、余分な padding は body 側で管理 */ }

/* ── 区切りライン ── */
.plateSection__line {
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
  will-change: clip-path;
}
.plateSection__line--top { clip-path: inset(0 100% 0 0); }

/* ── 本文 2カラム ── */
.plateSection__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 80px;
  row-gap: 0;
  padding: 72px 0 80px;
  align-items: center;
}

/* ── 左カラム ── */
.plateSection__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  align-self: stretch;
  padding-left: 24px;
}

.plateSection__num {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: rgba(214, 224, 234, 0.38);
  font-weight: 400;
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 18px;  /* title との距離 */
}

.plateSection__visual {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.plateSection__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 右カラム ── */
.plateSection__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plateSection__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 400;
  line-height: 1;
}
.plateSection__titleNum {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #b4c7dc;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.plateSection__titleEn {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(214, 224, 234, 0.28);
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.plateSection__copy {
  margin: 28px 0 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(208, 216, 226, 0.88);
}

.plateSection__lead {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 2.1;
  font-weight: 400;
  color: rgba(208, 216, 226, 0.56);
  letter-spacing: 0.01em;
}

/* =============================================
   MENU PLACEHOLDER（将来の簡易メニュー一覧）
============================================= */

/* =============================================
   MENU SECTION（05 の下）
============================================= */

.plateMenu {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding-bottom: 120px;
}

.plateMenu__inner {
  padding: 72px 0 0;
}

.plateMenu__title {
  margin: 0 0 52px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(208, 216, 226, 0.44);
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
}

.plateMenu__columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.plateMenu__col {
  flex: 1;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.plateMenu__col:first-child { padding-left: 0; }
.plateMenu__col:last-child  { padding-right: 0; }

/* 縦ライン：ごく薄い、必須 */
.plateMenu__divider {
  flex: 0 0 1px;
  background: rgba(255, 255, 255, 0.10);
  align-self: stretch;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

.plateMenu__groupName {
  margin: 0 0 14px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(214, 224, 234, 0.78);
  line-height: 1.6;
}

.plateMenu__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plateMenu__item {
  font-size: 13px;
  color: rgba(208, 216, 226, 0.50);
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-left: 1em;
}

.plateMenu__note {
  /* GT (gravity-token / membershipPrice__notes) と
     その日の食卓 (plateOffering__notes) の li と完全に同じ書式に揃える。
     1 行目だけメニューリストから 56px 離す。 2 行目以降は line-height 2.0 のみで連続。 */
  position: relative;
  margin: 0;
  padding: 0 0 0 1em;
  color: rgba(208, 216, 226, 0.42);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 2.0;
}
/* 1 行目はメニュー列から 56px 空ける */
.plateMenu__note:first-of-type {
  margin-top: 56px;
}
/* ※ マーク: 箇条書きの記号として静かに配置 (GT / 食卓と同じ) */
.plateMenu__note::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(208, 216, 226, 0.38);
}

/* ingredients (食材に対する考え方) への誘導リンク。
   about の lowerSection__pageLink と同じ hover MOV (下線が左→右に流れる) を
   plate 空間に移植。 note 群との視覚的階層を保つため、 note より少し明るめ・少し大きめ。
   左端は note 本文と視覚的に揃える。 ラテン大文字 "G" のサイドベアリングが
   ひらがな "そ" の本文左端 (note の padding-left: 1em ≒ 10.5px) と相殺するため、
   padding-left は 0 でぴったり揃う。 */
.plateMenu__pageLinkWrap {
  margin: 32px 0 0;
  padding-left: 0;
}
.plateMenu__pageLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(208, 216, 226, 0.72);
  text-decoration: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
}
.plateMenu__pageLinkLabel {
  display: inline-block;
}
/* 細い SVG 矢印。 currentColor で文字色 (hover 含む) に追従。 */
.plateMenu__pageLinkArrow {
  display: inline-block;
  flex-shrink: 0;
  color: inherit;
  /* 視覚的中心をテキストの x-height 中央に合わせる微調整 */
  transform: translateY(0.5px);
}
.plateMenu__pageLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(208, 216, 226, 0.55);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.plateMenu__pageLink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 初期 hidden 状態（JS アニメ起点） */
.plateMenu__title {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
.plateMenu__groupName,
.plateMenu__item,
.plateMenu__note,
.plateMenu__pageLinkWrap {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}

/* =============================================
   初期 hidden 状態（JS アニメ起点）
============================================= */

/* intro */
.plateIntro__statement {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
.plateIntro__lead {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}

/* section 要素 */
.plateSection__num,
.plateSection__visual {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
.plateSection__title,
.plateSection__copy {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
.plateSection__lead {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}

/* =============================================
   RESPONSIVE
============================================= */

/* 1100px 以下 */
@media (max-width: 1100px) {
  .plate-content__inner { padding-top: 80px; padding-bottom: 140px; }
  .plateSection__body {
    grid-template-columns: 260px 1fr;
    column-gap: 60px;
  }
}

/* =============================================
   OUTRO（最下部の締め・membership への誘導）
============================================= */

/* OUTRO の罫線は画面幅最大まで展開し、 左右がフェードするグラデーション (about /
   company の lower-page セクション罫線と同じデザイン) にする。
   親 .plateOutro は width: 680px / margin: 0 auto で中央寄せだが、 罫線だけは
   left: 50% + translateX(-50%) + width: 100vw で viewport 幅まで延ばす。
   .plate-content-panel に overflow: hidden が掛かっているため、 画面端で
   自然にクリップされる。
   既存の clip-path スイープアニメ (plate.js: revealOutro) は要素自体の幅を
   基準に動くので、 幅を広げてもアニメは正しく機能する。
   背景単色 (rgba(255,255,255,0.15)) を上書きするため !important で確実に
   グラデを当てる必要はないが、 .plateSection__line のカスケードを越えるため
   セレクタ詳細度を上げて指定する。 */
.plateOutro .plateOutro__line {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  background: linear-gradient(
    to right,
    rgba(208, 216, 226, 0)    0%,
    rgba(208, 216, 226, 0.10) 30%,
    rgba(208, 216, 226, 0.10) 70%,
    rgba(208, 216, 226, 0)    100%
  );
}

/* concept / structure と完全統一 */
.plateOutro {
  width: min(100%, 680px);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.plateOutro__inner {
  padding: 72px 0 0;
}

.plateOutro__statement {
  margin: 0 auto;
  color: rgba(208, 216, 226, 0.90);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.48;
  letter-spacing: 0.005em;
  font-weight: 400;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

.plateOutro__body {
  margin: 36px auto 0;
  width: min(100%, 560px);
  color: rgba(214, 224, 234, 0.58);
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}

/* CTA: concept / structure の conceptOutro__link と完全同一設計 */
.plateOutro__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  min-width: 400px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  overflow: hidden;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.plateOutro__link:hover {
  color: var(--line-button-text-hover);
  background: transparent;
}
.plateOutro__link:hover .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

/* 初期 hidden 状態 */
.plateOutro__statement {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
.plateOutro__body,
.plateOutro__link {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}


/* 900px 以下 */
@media (max-width: 900px) {
  .plate-hero__inner        { padding: 0 80px; }
  .plate-hero__title        { font-size: clamp(34px, 9vw, 56px); line-height: 0.96; }
  .plate-hero__lead         { margin-top: 16px; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.65; }
  .plate-hero__copy         { margin-top: 40px; }
  .plate-hero__copyLine--1  { font-size: clamp(24px, 7vw, 40px); }
  .plate-hero__copyLine--2  { font-size: clamp(28px, 8.5vw, 48px); }

  .plate-content__inner { padding-top: 80px; padding-bottom: 120px; }
  .plateIntro           { width: 100%; margin-bottom: 72px; }
  .plateIntro__statement { font-size: clamp(22px, 5.5vw, 38px); }
  .plateIntro__lead      { font-size: 13px; line-height: 1.95; }
  .plateMenu             { width: 100%; }
  .plateMenu__inner      { padding: 56px 0 0; }
  .plateOutro            { width: 100%; }
  .plateOutro__statement { font-size: clamp(22px, 5.5vw, 34px); }
  .plateMenu__col        { padding: 0 24px; }
  .plateMenu__col:first-child { padding-left: 0; }
  .plateMenu__col:last-child  { padding-right: 0; }
  .plateSections        { width: 100%; }
  .plateSection__body {
    grid-template-columns: 220px 1fr;
    column-gap: 44px;
    padding: 60px 0 68px;
  }
}

/* 768px 以下（SP）*/
@media (max-width: 768px) {
  .plate-hero__inner    { padding: 0 24px; }
  .plate-content__inner { padding: 104px 24px 100px; }
  .plateIntro           { margin-bottom: 56px; }
  .plateIntro__statement { font-size: clamp(26px, 3.8vw, 50px); }

  /* SP: 縦積み + 並び替え。
     __body は grid-template-areas で 「title → visual → copy → lead」 の縦並び。
     __right を display: contents にして、children (title/copy/lead) を __body の
     grid に直接参加させる。これで title だけを visual の上に持ってこられる。
     PC 側のレイアウトは無変更。
     padding-top: 20px = Concept SP の line→label 間と一致。 */
  .plateSection__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "visual"
      "copy"
      "lead";
    column-gap: 0;
    padding: 20px 0 52px;
  }
  .plateSection__right { display: contents; }
  /* title (= 01 RESPONSE label) → visual の間隔は 6px (Concept SP の __header margin-bottom と一致) */
  .plateSection__title { grid-area: title; margin-bottom: 6px; }
  .plateSection__left  { grid-area: visual; }
  .plateSection__copy  { grid-area: copy; }
  .plateSection__lead  { grid-area: lead; }

  /* SP: 左カラムは visual のみ。padding-left を解除して中央寄せ。
     visual → copy の間隔: Concept SP では gap 20 + content margin-top 8 = 28px だが、
     Concept の visual は 4:3 (横広め) で drawing が容器を満たすのに対し、
     Plate visual は 1:1 (やや縦長) なので、見た目のバランスを揃えるため 40px に拡張。 */
  .plateSection__left {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding-left: 0;
    margin-bottom: 40px;
  }

  /* SP: Concept 01〜03 の図版と同等の存在感に揃える。
     PC の max-width: 300px 制限を SP 用に 280px に再設定。
     aspect 1:1 は plate canvas が円形描画のため維持。
     plate-shared.js の resize() が parentElement の rect を見ているので、
     CSS を広げると canvas 内部解像度も自動追従する。 */
  .plateSection__visual {
    max-width: 280px;
    aspect-ratio: 1 / 1;
  }

  /* __title は default で小さなラベル化済 (Concept 01 RELATION 風)。
     SP 用の追加サイズ調整なし。 copy / lead だけ font-size 調整。 */
  /* SP: __copy / __lead サイズ調整。
     __copy の font-size は default (clamp 18→24px) のまま使用 = Concept __title と一致。 */
  .plateSection__copy   { margin-top: 18px; }
  .plateSection__lead   { margin-top: 16px; }
  .plateMenu             { padding-bottom: 44px; }
  .plateMenu__inner      { padding: 44px 0 0; }
  /* SP: HTML 上の hr 要素 .plateOutro__line が罫線本体。
     plateMenu padding-bottom: 44 + 罫線 + plateOutro__inner padding-top: 56 = 101px (Concept と一致)。
     CSS で .plateOutro に border-top を追加すると hr と二重になるため、border は付けない。 */
  .plateOutro__inner     { padding: 56px 0 0; }
  .plateOutro__lead      { font-size: 13px; }
  .plateMenu__columns    { flex-direction: column; }

  /* SP: col 単位の border-top は使わず、各 group の上に区切り線を引く方式に。
     これで Plates→Pasta→Main→Drinks→Dessert の全境界に等間隔で罫線が入る。
     PC default の gap: 40px が同一col内 group 間で効いてマージンが二重になるため、
     gap も 0 にして group 側の margin-top のみで間隔を制御する。 */
  .plateMenu__col {
    padding: 0;
    border-top: none;
    gap: 0;
  }
  .plateMenu__col:first-child,
  .plateMenu__col:last-child {
    padding-top: 0;
    border-top: none;
  }
  .plateMenu__divider    { display: none; }

  /* 各 group に上線と上下マージン。
     最後の item の line-height descent (~10px) で上側が広く見えがちなので
     margin-top は控えめ (16px) にし、line下は padding-top 24px。
     visual な上下対称感: 上 (descent ~10 + margin 16) ≒ 下 (padding 24 + 見出し line-height) */
  .plateMenu__group {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  /* 最初の group (= 1列目の Plates) は線なし */
  .plateMenu__col:first-child .plateMenu__group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* SP: ingredients 誘導リンクの余白を少し詰める。
     padding-left は PC default (6px) をそのまま継承 (font-size 11.5px → "G" の
     サイドベアリングはわずかに小さくなるが、 視覚差は 0.5px 未満で無視できる)。 */
  .plateMenu__pageLinkWrap { margin-top: 28px; }
  .plateMenu__pageLink     { font-size: 11.5px; }

  /* SP: Outro の Membership CTA。
     Concept / Membership と同じ SP 設計。
     plate.css:786 の PC default min-width: 400px が ui.css の min-width:0 を
     カスケード順序(source order)で上書きしてしまうため、ここで再度同じ値を
     宣言して打ち消す (concept.css:410, membership.css:1061 と同じ手法)。 */
  .plateOutro__link {
    min-width: 0;
    width: min(100%, 360px);
    padding: 0 20px;
  }
}

/* ================================================================
   背景粒子の強度切り替え（content エリア中は一段引かせる）
================================================================ */

#bg {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter  0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-plate-content-active #bg {
  opacity: 0.38;
  filter: blur(0.8px);
}
/* =================================================================
   plate 専用 footer 慣性スクロール (plate-page スコープ)
   ----------------------------------------------------------------
   footer.css / info-footer.js / site-chrome.js を一切触らず、
   plate.js 側で .footerPanel の中身を以下のように再ラップする:
     .footerPanel
       .footerPanel__viewport   ← 100vh で clip
         .footerPanel__inner    ← transform で慣性駆動
           .footerPanel__head   (元から)
           .siteFooterBlock     (元から)
       .footerPanel__copy       (viewport の外、 fixed)
       .footerPanel__sns        (viewport の外、 fixed)
   既存の他ページ (TOP / concept / structure / membership) は再ラップされず、
   このセレクタは body.plate-page 配下のみ適用される。
================================================================= */
body.plate-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.plate-page .footerPanel__inner {
  width: 100%;
  will-change: transform;
  /* 親 .panel__inner--footer 側で左右 padding 148px を持つので、 ここでは
     上下 padding のみ。 (元: padding: 100px 148px 80px 148px、 二重 padding 解消) */
  padding: 100px 0 80px 0;
  box-sizing: border-box;
}

/* SP: 既存 footer.css の親 padding (.panel__inner--footer の padding 120px 20px 0
   と .footerPanel の padding 0 0 72px) を plate-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.plate-page .panel__inner--footer {
    padding: 0;
  }
  body.plate-page .footerPanel {
    padding: 0;
  }
  body.plate-page .footerPanel__inner {
    padding: 100px 24px 80px 24px;
  }
  /* SP のサブリンク (プライバシーポリシー / 免責事項) の上下区切り線を
     footer.css のデフォルト (rgba 208,216,226,0.14) から、 暗いグレー寄りで
     さらに控えめな色 (rgba 142,152,163,0.12) に上書き。 footer.css に勝つため
     body.plate-page #plate-footer で specificity を上げて指定。 */
  body.plate-page #plate-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.plate-page #plate-footer .siteFooterBlock__subLink {
    border-bottom-color: rgba(142, 152, 163, 0.12);
  }
}

/* ── Info footer (中央寄せ) ───────────────────────────────────────
   タイトル / リードは中央寄せ、 リードと siteFooterBlock の内部テキストは
   max-width を保ちながら margin auto で中央配置 (改行時は左寄せ段落として見える) */
/* footer.css の `.panel__inner--footer { display: flex; align-items: center }` を
   block に解除する。 flex のままだと .footerPanel (flex 子) の幅が中身依存に縮み、
   inner 全体が画面の左寄りに固定される (= 中央寄せルールが効かなく見える) ため。
   慣性 transform 構造では .footerPanel__viewport が height: 100vh なので、
   親の垂直中央配置 (align-items: center) は不要になっている。
   panel.css の .panel__inner は左 148px / 右 28px の非対称 padding (左固定ロゴ
   との干渉回避目的)。 footer ではタイトル / リード / info を画面中央に置きたいので
   左右対称になるよう右 padding を 148px に揃える。 */
@media (min-width: 769px) {
  body.plate-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.plate-page #plate-footer .footerPanel__head {
  text-align: center;
}
body.plate-page #plate-footer .footerPanel__head .panel__title,
body.plate-page #plate-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.plate-page #plate-footer .footerPanel__head .textMotion,
body.plate-page #plate-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.plate-page #plate-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.plate-page #plate-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.plate-page #plate-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.plate-page #plate-footer .siteFooterBlock__info {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* サブリンク (プライバシーポリシー / 免責事項) も中身の自然幅で中央配置。
   PC 用の padding-left: 76px (footer.css、 label との揃え目的) は中央配置に
   不要なので 0 に上書き。 */
@media (min-width: 769px) {
  body.plate-page #plate-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}