@charset "UTF-8";
/* ==========================================================================
   GRANADA SUITE on À TABLE — style.css
   --------------------------------------------------------------------------
   00. Tokens / Fluid root
   01. Reset / Base
   02. Utility / Icons / Motion
   03. Parts (title, more, link, fill button, heading, media fit, dot list, sns, label, slider arrows)
   04. Header / Global navigation
   05. Drawer (hamburger menu)
   06. KV (c-kv : top / -page = 下層共通)
   07. Topics list (top + archive)
   08. Top : Menu
   09. Concept band (ABOUT / top・about 共通)
   10. Top : Anniversary
   11. Top : Takeout / Access
   12. FAQ (c-faqsec / c-faq : top・plan 共通)
   13. Information (common)
   14. Footer
   15. Page head (c-pagehead) / Page : Topics archive
   16. Page : Topics detail
   17. Page KV・Gallery (下層共通) / Page : About (features)
   18. Contact form (c-contact / c-steps / c-form : contact・plan 共通)
   19. Plan template components (sechead / intro / rows / cards / plans / modal / split / flow / cta)
   20. Tablet adjust / Reduced motion / Print

   ■ 可変フォント設計
     PC  : デザイン幅1440pxで 1rem = 10px。ビューポートに比例(2K/4Kでも等倍の見え方)
     SP  : デザイン幅 400pxで 1rem = 10px。560px以上〜1023pxは 14px 固定(タブレット)
     サイズ指定はすべて rem。本文は max() で最小可読サイズを担保。
   ========================================================================== */

/* 00. Tokens
   ========================================================================== */
:root {
  --c-main: #f8f5ed;
  --c-bg: #f2ecde;
  --c-cream: #f2eddf;
  --c-text: #444138;
  --c-text-en: #444138;
  --c-accent: #ba3511;
  --c-khaki: #918974;
  --c-line: #ccc3b0;
  --c-line-e: oklch(80% 0.02 90 / 0.5); /* #ccc3b0の50% */
  --c-line-light: oklch(100% 0 0 / 0.7); /* 白の70% */
  --c-white: #fff;
  --c-accent-dark: #8e240a;   /* ボタン hover */
  --c-line-dark: #aea897;     /* リンク下線・ステップ枠 */
  --c-field: #faf8f5;         /* subカラー / フォーム入力欄など */
  --c-placeholder: #c4c4c4;   /* 地図・カレンダー読込前 */
  --c-box: #ece4d5;           /* 補足ボックス・FLOWカード */
  --bg-paper: var(--c-bg) url(../img/bg_3.webp) repeat 0 0 / 10rem 10rem; /* 主背景 */

  --ff-en: "Inter", sans-serif;
  --ff-jp: "Noto Sans JP", sans-serif;
  --ff-base: "Inter", "Noto Sans JP", sans-serif;

  --fs-10: max(1rem, 10px);
  --fs-14: max(1.4rem, 11px);
  --fs-12: max(0.857rem, 12px);  /* 12px (12 / 14rem) */
  --fs-13: max(0.929rem, 13px);  /* 13px (13 / 14rem) */
  --fs-14: max(1rem, 14px);      /* 14px (1rem) */
  --fs-15: max(1.5rem, 12px);
  --fs-16: max(1.6rem, 12px);
  --fs-125: max(1.25rem, 12px);  /* 16.8px (1.25rem) - L-和文見出し */
  --fs-144: max(1.44rem, 14px);  /* 20.16px (1.44rem) - H3 SUBPAGE */
  --fs-172: max(1.728rem, 16px); /* 24.19px (1.728rem) - H3-HEADLINE */
  --fs-207: max(2.074rem, 18px); /* 29px (2.074rem) - TITLE */
  --fs-248: max(2.488rem, 20px); /* 34.18px (2.488rem) - H2-HEADLINE */

  --gutter: 2rem;
  --header-h: 6.2rem;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-lux: cubic-bezier(.19, 1, .22, 1);

  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.365.327A.75.75 0 0 1 3.408.13l5.454 3.719.828.565-.776.635-5.454 4.463a.75.75 0 1 1-.95-1.161l3.93-3.215H.75a.75.75 0 0 1 0-1.5h5.136L2.563 1.37a.75.75 0 0 1-.198-1.043Z'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='none' stroke='%23444138' stroke-width='1'%3E%3Cpath d='M.5.5 8 8 15.5.5'/%3E%3C/svg%3E");
  --ico-win: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M0 0h7.489v5.349H0V0Z'/%3E%3Cpath d='M10.158.932v7.088H2V6.682h6.82V.932h1.338Z'/%3E%3C/svg%3E");
}

html {
  font-size: calc(100vw / 40);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-gutter: stable;
}

@media (min-width: 560px) {
  html { font-size: 14px; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 5rem;
    --header-h: 8.6rem;
  }
  html { font-size: calc(100vw / 144); }
}

/* 01. Reset / Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
address { font-style: normal; }
iframe { border: 0; }
[hidden] { display: none !important; }

body {
  overflow-x: clip;
  background: var(--bg-paper);
  color: var(--c-text);
  font-family: var(--ff-base);
  font-optical-sizing: auto;
  font-size: var(--fs-14);
  font-weight: 350;
  line-height: 1.8;
  letter-spacing: -.02em;
  text-spacing-trim: space-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

[tabindex="-1"]:focus { outline: none; } /* JS でフォーカスを移すだけの要素（モーダルから #contact へ移動した時など） */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

::selection { background: var(--c-accent); color: var(--c-cream); }

/* 02. Utility / Icons / Motion
   ========================================================================== */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (min-width: 1024px) { .u-sp { display: none !important; } }
@media not all and (min-width: 1024px) { .u-pc { display: none !important; } }

.skip-link {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 1000;
  padding: 1rem 2rem;
  background: var(--c-accent);
  color: var(--c-cream);
  font-size: var(--fs-13);
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* icon : 1つのSVGを mask で使い回し、色は currentColor で制御 */
.ico-arrow,
.ico-win {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico-arrow) no-repeat center / contain;
  mask: var(--ico-arrow) no-repeat center / contain;
}
.ico-arrow { width: 1rem; height: 1rem; }
.ico-arrow.-down { transform: rotate(90deg); }
.ico-arrow.-up { transform: rotate(-90deg); }
.ico-arrow.-left { transform: rotate(180deg); }
.ico-win {
  width: 1.1rem; height: .9rem;
  -webkit-mask-image: var(--ico-win);
  mask-image: var(--ico-win);
}

/* scroll reveal (JS有効時のみ初期状態を隠す) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-inview { opacity: 1; transform: none; }

.js [data-reveal="image"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--ease-lux);
  transition-delay: calc(var(--reveal-delay, 0) * 1s);
}
.js [data-reveal="image"] > img,
.js [data-reveal="image"] > picture > img {
  transform: scale(1.18);
  transition: transform 2.2s var(--ease-lux);
  transition-delay: calc(var(--reveal-delay, 0) * 1s);
}
.js [data-reveal="image"].is-inview { clip-path: inset(0 0 0 0); }
.js [data-reveal="image"].is-inview > img,
.js [data-reveal="image"].is-inview > picture > img { transform: none; }

/* 英字の大文字表示
   HTML 上は "Kids Birthday" のように大文字+小文字で記述し、カンプ通りの全大文字は CSS で表現する。
   （全大文字の HTML は音声ブラウザが略語と誤認して1文字ずつ読み上げることがあるため）
   例外 : FAQ / PDF / TEL / JR / OT SPiCE / on À TABLE など略語・ブランド表記は HTML の表記のまま。 */
.c-title,
.c-heading,
.c-more,
.c-kv__catch .line,
.c-kv__place,
.l-gnav__link,
.l-gnav__sub a,
.c-reserve__en,
.l-drawer__main .en,
.l-drawer__sub .en,
.l-drawer__foot > a,
.c-topics__pickup,
.l-info__hours dt,
.c-concept__circle > span,
.p-about-feature__title,
.p-anv-card__name,
.p-article__cat,
.l-footer__nav,
.c-row__title,
.c-cards__title,
.c-split__label,
.c-plan__name,
.c-modal__title,
.c-modal__label,
.c-modal__rich h3,
.c-modal__list > li,
.c-form__choices label { text-transform: uppercase; }
.c-modal__list > li > p { text-transform: none; }
.u-case-keep { text-transform: none !important; } /* ブランド表記「on À TABLE」など、大文字化しない英字に付与（上記のどのセレクタにも勝たせる） */

/* 03. Parts
   ========================================================================== */
/* section title + red dot */
.c-title {
  display: inline-block;
  position: relative;
  padding-right: 1.4rem;
  color: var(--c-text);
  font-family: var(--ff-en);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}
.c-title::after,
.l-drawer__main a[aria-current="page"] .en::after { /* red dot（タイトル右肩 / ドロワー現在地） */
  content: "";
  position: absolute;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--c-accent);
}
.c-title::after { top: .1rem; right: 0; }
.c-title.-white { color: var(--c-cream); }

.c-title__inner { display: inline-block; }
.js .c-title[data-reveal] { opacity: 1; transform: none; overflow: hidden; padding-top: .4rem; margin-top: -.4rem; padding-bottom: .4rem; margin-bottom: -.4rem; }
.js .c-title[data-reveal]::after { top: .5rem; transform: scale(0); transition: transform .8s var(--ease-out) .7s; }
.js .c-title[data-reveal] .c-title__inner { transform: translateY(110%); transition: transform 1.3s var(--ease-lux); }
.js .c-title[data-reveal].is-inview .c-title__inner { transform: none; }
.js .c-title[data-reveal].is-inview::after { transform: none; }

@media (min-width: 1024px) {
  .c-title { font-size: 4rem; }
}

/* ellipse arrow button */
.c-more {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--c-text-en);
  font-family: var(--ff-base);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.c-more__circle {
  display: grid;
  place-items: center;
  position: relative;
  width: 5.8rem; height: 3rem;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.c-more__circle .ico-arrow { transition: transform .6s var(--ease-out), background-color .3s; }
.c-more.-accent { color: var(--c-accent); }
.c-more.-white { color: var(--c-cream); }

@media (hover: hover) {
  .c-more:hover .c-more__circle { background-color: var(--c-text-en); border-color: var(--c-text-en); }
  .c-more:hover .c-more__circle .ico-arrow { background-color: var(--c-cream); }
  .c-more:hover .c-more__circle .ico-arrow,
  .c-arrows__btn:hover .ico-arrow,
  .c-btn:hover .ico-arrow,
  .c-kv__pickup:hover .ico-arrow { animation: arrow-pass .7s var(--ease-in-out); } /* 矢印が右へ抜けて左から戻る hover 演出（共通） */
  .c-more.-accent:hover .c-more__circle { background-color: var(--c-accent); border-color: var(--c-accent); }
  .c-more.-white:hover .c-more__circle { background-color: var(--c-cream); border-color: var(--c-cream); }
  .c-more.-white:hover .c-more__circle .ico-arrow { background-color: var(--c-text-en); }
}
@keyframes arrow-pass {
  0% { translate: 0 0; opacity: 1; }
  45% { translate: 2.4rem 0; opacity: 0; }
  46% { translate: -2.4rem 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
.c-more .ico-arrow.-down { animation-name: none; }
@media (hover: hover) {
  .c-more:hover .ico-arrow.-down,
  .c-more:hover .ico-arrow.-up { animation: arrow-pass-y .7s var(--ease-in-out); }
}
@keyframes arrow-pass-y {
  0% { translate: 0 0; opacity: 1; }
  45% { translate: 0 var(--pass, 1.6rem); opacity: 0; }
  46% { translate: 0 calc(var(--pass, 1.6rem) * -1); opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
.ico-arrow.-up { --pass: -1.6rem; }

/* underline link (PDF / external) */
.c-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  padding-bottom: .5rem;
  color: var(--c-text-en);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.5;
}
.c-link::before,
.c-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-line-dark);
}
.c-link::after {
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--ease-out);
}
.c-link__file {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--c-khaki);
  font-family: var(--ff-en);
}
.c-link__file .ico-win { width: 1rem; height: .8rem; }
.c-link > .ico-win { color: var(--c-text-en); margin-right: .2rem; }
/* 縦の区切り線（アラカルト｜11月 / 福岡空港から｜…） */
.c-link__sep,
.p-guide__route .sep { display: inline-block; width: 1px; height: 1em; background: currentColor; opacity: .6; }
.c-link__sep { margin: 0 .6rem; vertical-align: -.1em; }
@media (hover: hover) {
  .c-link { transition: color .4s; }
  .c-link:hover { color: var(--c-accent); }
  .c-link:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* fill button : hover で下から濃色がせり上がる共通ボタン（予約 / 送信） */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-accent);
  color: var(--c-cream);
  isolation: isolate;
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent-dark);
  transform: translateY(101%);
  transition: transform .6s var(--ease-out);
}
.c-btn.-lg {
  gap: .8rem;
  min-width: 17.2rem;
  min-height: 6.1rem;
  padding: 1rem 1.6rem;
  font-family: var(--ff-jp);
  font-size: var(--fs-14);
  line-height: 1.4;
  letter-spacing: 0;
}
.c-btn.-md { gap: .8rem; min-height: 5rem; padding: .8rem 4rem; font-family: var(--ff-jp); font-size: var(--fs-14); line-height: 1.4; letter-spacing: 0; }
@media (hover: hover) {
  .c-btn:hover::before { transform: none; }
}

/* heading (EN 24px) : DINNER / TAKE OUT / ACCESS / INFORMATION */
.c-heading {
  color: var(--c-text);
  font-family: var(--ff-en);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

/* media fit : ラッパーいっぱいに画像・iframe を敷く */
.c-fit > picture { width: 100%; height: 100%; }
.c-fit > img,
.c-fit > picture > img,
.c-fit > iframe { width: 100%; height: 100%; object-fit: cover; }

/* dot list（記事本文の ul も同じ見た目） */
.c-dotlist > li,
.c-dotlist > div,
.p-article__content ul li { position: relative; padding-left: 1.2rem; }
.c-dotlist > li::before,
.c-dotlist > div::before,
.p-article__content ul li::before { content: ""; position: absolute; top: .85em; left: 0; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

/* SNS icons（ドロワー / フッター） */
.c-sns { display: flex; gap: 1.6rem; }
.c-sns img { width: 2rem; height: 2rem; }
.c-sns a { display: block; transition: opacity .4s, transform .6s var(--ease-out); }
@media (hover: hover) {
  .c-sns a:hover { opacity: .6; transform: translateY(-.2rem); }
}

/* day label */
.c-label {
  display: inline-block;
  margin-left: .6rem;
  padding: 0 .6rem;
  border: 1px solid #8a8475;
  color: var(--c-khaki);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.6;
  vertical-align: .1em;
  white-space: nowrap;
}

/* slider arrows */
.c-arrows { display: flex; gap: .9rem; }
.c-arrows__btn {
  display: grid;
  place-items: center;
  position: relative;
  width: 6.4rem; height: 3.6rem;
  overflow: hidden;
  border: 1px solid rgba(242, 237, 223, .75);
  border-radius: 2px;
  color: var(--c-cream);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), border-color .5s;
}
.c-arrows__btn::after { content: ""; position: absolute; inset: -.6rem -.4rem; } /* tap area（左右は隣のボタンと重ならない幅） */
@media (hover: hover) {
  .c-arrows__btn:hover { background-color: var(--c-cream); border-color: var(--c-cream); color: var(--c-text-en); }
  .c-arrows__btn:hover .ico-arrow.-left { animation-name: arrow-pass-rev; }
}
@keyframes arrow-pass-rev {
  0% { translate: 0 0; opacity: 1; }
  45% { translate: -2.4rem 0; opacity: 0; }
  46% { translate: 2.4rem 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

/* 04. Header
   ========================================================================== */
.l-header {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  color: var(--c-text-en);
  transition: transform .6s var(--ease-out);
}
.l-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--c-line);
  background: var(--bg-paper);
  transition: opacity .5s var(--ease-out);
}
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter) .4rem;
  transition: height .6s var(--ease-out), padding .6s var(--ease-out);
}
.l-header__logo { flex: none; line-height: 1; }
.l-header__logo a { display: block; }
.l-header__logo img {
  width: 11rem;
  transition: width .6s var(--ease-out), filter .4s;
}
.l-header__side { display: flex; align-items: center; gap: .8rem; }

/* transparent state (top page, before scroll) */
.l-header.is-transparent { color: var(--c-white); }
.l-header.is-transparent::before { opacity: 0; }
.l-header.is-transparent .l-header__inner { height: 12.2rem; padding-bottom: 0; }
.l-header.is-transparent .l-header__logo img { filter: brightness(0) invert(1); width: 12.4rem; }
.l-header.is-hidden { transform: translateY(-101%); }
html.is-modal-open .l-header { opacity: 1; transform: none; } /* プランのモーダルはヘッダーの下から始まるため、開いている間は必ず表示 */
.is-drawer-open .l-header { transform: none; color: var(--c-text-en); }
.is-drawer-open .l-header::before { opacity: 1; border-bottom-color: transparent; } /* ナビがスクロールしてもロゴ・予約・×に被らない */
.is-drawer-open .l-header .l-header__logo img { filter: none; }
.is-drawer-open .l-gnav { visibility: hidden; }
.is-drawer-open .l-header.is-transparent .l-header__inner { height: var(--header-h); padding-bottom: .4rem; }
.is-drawer-open .l-header.is-transparent .l-header__logo img { width: 11rem; }

.l-gnav { display: none; }

/* reservation button */
/* ベースは .c-btn */
.c-reserve {
  gap: .7rem;
  min-width: 8.1rem;
  height: 4.2rem;
  padding: 0 1.6rem;
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1;
}
/* 4 dots : CSSのみで表現（予約ボタン / CTA / フォーム送信で共用） */
.ico-dots {
  flex: none;
  width: 1.1rem; height: 1rem;
  background:
    radial-gradient(circle at center, currentColor 0 .2rem, transparent calc(.2rem + .5px)) 0 0 / .4rem .4rem no-repeat,
    radial-gradient(circle at center, currentColor 0 .2rem, transparent calc(.2rem + .5px)) 100% 0 / .4rem .4rem no-repeat,
    radial-gradient(circle at center, currentColor 0 .2rem, transparent calc(.2rem + .5px)) 0 100% / .4rem .4rem no-repeat,
    radial-gradient(circle at center, currentColor 0 .2rem, transparent calc(.2rem + .5px)) 100% 100% / .4rem .4rem no-repeat;
  transition: transform .8s var(--ease-out);
}
.c-reserve__en { display: none; font-family: var(--ff-en); font-size: var(--fs-14); }
.c-reserve__jp { font-size: var(--fs-13); }
@media (hover: hover) {
  .c-btn:hover .ico-dots { transform: rotate(180deg); }
}

/* hamburger */
.c-burger {
  display: grid;
  place-items: center;
  position: relative;
  width: 4.6rem; height: 4.2rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--c-accent);
  transition: color .4s, background-color .5s var(--ease-out);
}
.l-header.is-transparent .c-burger { color: var(--c-white); }
.is-drawer-open .l-header .c-burger { color: var(--c-accent); }
.c-burger__lines { position: relative; width: 2rem; height: .9rem; }
.c-burger__lines span {
  position: absolute;
  left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform .7s var(--ease-lux), opacity .4s, top .7s var(--ease-lux);
}
.c-burger__lines span:nth-child(1) { top: 0; }
.c-burger__lines span:nth-child(2) { top: .4rem; }
.c-burger__lines span:nth-child(3) { top: .8rem; }
[aria-expanded="true"] > .c-burger__lines span:nth-child(1) { top: .4rem; transform: rotate(22deg); }
[aria-expanded="true"] > .c-burger__lines span:nth-child(2) { opacity: 0; transform: scaleX(0); }
[aria-expanded="true"] > .c-burger__lines span:nth-child(3) { top: .4rem; transform: rotate(-22deg); }
@media (hover: hover) {
  .c-burger:hover .c-burger__lines span:nth-child(1) { transform: translateX(.3rem); }
  .c-burger:hover .c-burger__lines span:nth-child(3) { transform: translateX(-.3rem); }
  .c-burger[aria-expanded="true"]:hover .c-burger__lines span:nth-child(1) { transform: rotate(-22deg); }
  .c-burger[aria-expanded="true"]:hover .c-burger__lines span:nth-child(3) { transform: rotate(22deg); }
}

@media (min-width: 1024px) {
  .l-header__inner { padding: .8rem var(--gutter) 0; }
  .l-header.is-transparent .l-header__inner { padding-top: 0; }
  .is-drawer-open .l-header.is-transparent .l-header__inner { padding-top: .8rem; padding-bottom: 0; }
  .is-drawer-open .l-header .c-burger { color: var(--c-cream); }
  .l-header__logo img { width: 12.3rem; }
  .l-header.is-transparent .l-header__inner { height: 17rem; }
  .l-header.is-transparent .l-header__logo img { width: 16.2rem; }
  .is-drawer-open .l-header.is-transparent .l-header__logo img { width: 12.3rem; }
  .l-header__side { gap: .8rem; }

  .l-gnav {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .l-gnav__list { display: flex; align-items: center; gap: 4.1rem; }
  .l-gnav__item { position: relative; }
  .l-gnav__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 1rem 0;
    font-family: var(--ff-en);
    font-size: var(--fs-15);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
  }
  .l-gnav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: .3rem;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .6s var(--ease-out);
  }
  .l-gnav__link:hover::after,
  .l-gnav__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left center; }
  /* plus : CSS */
  .l-gnav__plus { position: relative; width: 1.1rem; height: 1.1rem; }
  .l-gnav__plus::before,
  .l-gnav__plus::after {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 1.5px;
    margin-top: -.75px;
    background: currentColor;
    transition: transform .6s var(--ease-out);
  }
  .l-gnav__plus::after { transform: rotate(90deg); }
  [aria-expanded="true"] > .l-gnav__plus::before { transform: rotate(180deg); }
  [aria-expanded="true"] > .l-gnav__plus::after { transform: rotate(180deg); }

  .l-gnav__sub {
    position: absolute;
    top: 100%; left: 50%;
    min-width: 24rem;
    padding: 1.2rem 2.4rem;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--bg-paper);
    box-shadow: 0 2rem 4rem rgba(40, 30, 10, .12);
    color: var(--c-text-en);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0);
    clip-path: inset(0 0 100% 0);
    transition: opacity .5s var(--ease-out), clip-path .7s var(--ease-lux), transform .7s var(--ease-lux), visibility 0s .7s;
  }
  .l-gnav__sub.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 1rem);
    clip-path: inset(-5rem);
    transition-delay: 0s;
  }
  .l-gnav__sub a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.1rem 0;
    font-family: var(--ff-en);
    font-size: var(--fs-15); /* グローバルナビ・予約ボタンと同じ */
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    transition: color .4s;
  }
  .l-gnav__sub a small { color: var(--c-khaki); font-family: var(--ff-jp); font-size: var(--fs-10); }
  #gnav-anniversary a { font-family: var(--ff-jp); } /* ANNIVERSARY は日本語のみ・区切り線なし */
  .l-gnav__sub a:hover,
  .l-gnav__sub a[aria-current="page"] { color: var(--c-accent); }

  .c-reserve { min-width: 17.1rem; height: 4.6rem; padding: 0 1.2rem; }
  .c-reserve__en { display: inline; font-size: var(--fs-15); } /* グローバルナビと同じ */
  .c-reserve__jp { font-size: var(--fs-12); }
  .c-burger { width: 4.6rem; height: 4.6rem; }
}

/* 05. Drawer
   ========================================================================== */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  transition: visibility 0s 1s;
}
.l-drawer.is-open { visibility: visible; transition-delay: 0s; }
.l-drawer__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease-lux);
}
.l-drawer.is-open .l-drawer__panel { clip-path: inset(0 0 0 0); }
/* スクロール領域はヘッダーの下から始める（スクロールバーもヘッダーに潜らない） */
.l-drawer__body {
  position: absolute;
  inset: var(--header-h) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3.7rem 4rem 6rem;
}
.l-drawer__visual { display: none; }

.l-drawer__main > li + li { margin-top: 3.4rem; }
.l-drawer__main a {
  display: inline-flex;
  align-items: baseline;
  gap: 1.7rem;
  color: var(--c-text-en);
  line-height: 1.2;
}
.l-drawer__main .en {
  position: relative;
  font-family: var(--ff-en);
  font-size: 2.4rem;
  font-weight: 400;
  transition: color .4s;
}
.l-drawer__main a[aria-current="page"] .en::after { top: .2rem; right: -1.1rem; } /* 形状は 03. Parts の red dot */
.l-drawer__main a[aria-current="page"] { gap: 2.6rem; }
.l-drawer__main .jp,
.l-drawer__sub .jp { font-family: var(--ff-jp); font-size: var(--fs-12); font-weight: 400; color: var(--c-text); }

.l-drawer__sub { margin-top: 3.7rem; }
.l-drawer__sub > li + li { margin-top: 2.2rem; }
.l-drawer__sub a { display: inline-flex; align-items: baseline; gap: .9rem; color: var(--c-text-en); line-height: 1.7; }
.l-drawer__sub a[aria-current="page"] .en { color: var(--c-accent); }
.l-drawer__sub .en { font-family: var(--ff-en); font-size: var(--fs-14); font-weight: 500; letter-spacing: 0; transition: color .4s; }

.l-drawer__foot {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-top: 6.3rem;
  color: var(--c-text-en);
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1;
}
.l-drawer__foot .slash { font-weight: 300; }
@media (hover: hover) {
  .l-drawer__main a:hover .en,
  .l-drawer__sub a:hover .en,
  .l-drawer__foot > a:hover { color: var(--c-accent); }
}

/* stagger */
.l-drawer [data-stagger] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .4s, transform .4s;
}
.l-drawer.is-open [data-stagger] {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(.35s + var(--i, 0) * .06s);
}

@media (min-width: 1024px) {
  .l-drawer__panel { display: flex; }
  .is-drawer-open .l-header::before { right: 39.8%; } /* PC: 右の写真は上端まで見せる（カンプ準拠） */
  .l-drawer__body {
    display: grid;
    grid-template-columns: 30.7rem 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    position: static;
    flex: 1 1 auto;
    width: 60.2%;
    height: calc(100% - var(--header-h));
    margin-top: var(--header-h);
    padding: 9.8rem 4rem 6rem 10.5rem;
    overflow: hidden; /* PC: ブラウザの高さが低くてもスクロールバーを出さない */
  }
  .l-drawer__visual {
    display: block;
    flex: none;
    width: 39.8%;
    overflow: hidden;
  }
  .l-drawer__visual img {
    transform: scale(1.15);
    transition: transform 2.4s var(--ease-lux);
  }
  .l-drawer.is-open .l-drawer__visual img { transform: none; transition-delay: .1s; }

  .l-drawer__main { grid-row: 1 / 3; }
  .l-drawer__main > li + li { margin-top: 4.6rem; }
  .l-drawer__main a { display: inline-block; }
  .l-drawer__main a[aria-current="page"] { gap: 0; }
  .l-drawer__main .en { display: inline-block; font-size: 2.8rem; line-height: 1.2; }
  .l-drawer__main .jp { display: block; margin-top: .2rem; }
  .l-drawer__sub { margin-top: .6rem; }
  .l-drawer__sub > li + li { margin-top: 2.65rem; }
  .l-drawer__sub a[aria-current="page"] .en { color: var(--c-accent); }
.l-drawer__sub .en { font-size: 1.9rem; }
  .l-drawer__foot { grid-column: 2; align-self: start; margin-top: 16.1rem; font-size: var(--fs-14); }
}

/* 06. KV
   ========================================================================== */
.c-kv {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 60rem;
  max-height: 90rem;
  overflow: hidden;
  background: #14110e;
  color: var(--c-cream);
}
.c-kv__slides,
.c-kv__slide { position: absolute; inset: 0; }
.c-kv__slide {
  opacity: 0;
  transition: opacity 2.2s var(--ease-in-out);
}
.c-kv__slide img { transform: scale(1.12); }
.c-kv__slide.is-active { opacity: 1; z-index: 1; }
.c-kv__slide.is-active img,
.c-kv__slide.is-leaving img { animation: kv-zoom 9s linear forwards; }
.c-kv.is-paused .c-kv__slide img { animation-play-state: paused; }
@keyframes kv-zoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
/* 画像の上の暗いグラデーションは無し（濃度は設定する画像側で調整する） */
.c-kv__body { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.c-kv__body a,
.c-kv__body button { pointer-events: auto; }

.c-kv__copy { position: absolute; top: 15.6rem; left: var(--gutter); right: var(--gutter); }
.c-kv__catch {
  font-family: var(--ff-en);
  font-size: 4.2rem;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0;
}
.c-kv__catch .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.c-kv__catch .line > span { display: inline-block; }
.c-kv__lead { margin-top: 1.4rem; font-family: var(--ff-jp); font-size: var(--fs-15); font-weight: 400; line-height: 1.6; }
.c-kv__place {
  position: absolute;
  top: 43.4rem; left: 18rem;
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: 300;
  line-height: 1.5;
  white-space: nowrap;
  opacity: .9;
}

.c-kv__pickup {
  display: flex;
  position: absolute;
  left: 2.4rem; right: 1.6rem; bottom: 9.8rem;
  min-height: 8.1rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-khaki);
  color: var(--c-cream);
  transition: background-color .5s var(--ease-out);
}
.c-kv__pickup-thumb { flex: none; width: 8.1rem; overflow: hidden; }
.c-kv__pickup-thumb img { transition: transform 1.2s var(--ease-out); }
.c-kv__pickup-text {
  flex: 1 1 auto;
  align-self: center;
  padding: 1rem 1.6rem;
  font-family: var(--ff-jp);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.77;
}
.c-kv__pickup-text > span:first-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.c-kv__pickup-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.3rem;
  border-left: 1px solid rgba(242, 237, 223, .6);
  transition: background-color .5s var(--ease-out);
}
@media (hover: hover) {
  .c-kv__pickup:hover .c-kv__pickup-thumb img { transform: scale(1.1); }
  .c-kv__pickup:hover { background-color: #87806f; } /* バナー全体の色を変える（矢印の動きは共通の hover 演出） */
}

.c-kv__scroll {
  position: absolute;
  left: 50%; bottom: 3.4rem;
  transform: translateX(-50%);
  font-family: var(--ff-en);
  white-space: nowrap;
}
.c-kv__scroll .ico-arrow { animation: scroll-hint 2.4s var(--ease-in-out) infinite; }
@keyframes scroll-hint {
  0%, 20% { translate: 0 -1.6rem; opacity: 0; }
  50% { translate: 0 0; opacity: 1; }
  80%, 100% { translate: 0 1.6rem; opacity: 0; }
}

/* progress + pause (WCAG 2.2.2 自動再生の一時停止手段) */
.c-kv__ctrl {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: absolute;
  right: 1.6rem; bottom: 19.4rem;
}
.c-kv__bars { display: flex; gap: .6rem; }
.c-kv__bar { position: relative; width: 2.4rem; height: 2rem; }
.c-kv__bar::before,
.c-kv__bar::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: rgba(242, 237, 223, .4);
}
.c-kv__bar::after { background: var(--c-cream); transform: scaleX(0); transform-origin: left center; }
.c-kv__bar.is-active::after { animation: kv-progress var(--kv-duration, 6s) linear forwards; }
.c-kv__bar.is-done::after { transform: scaleX(1); }
.c-kv.is-paused .c-kv__bar.is-active::after { animation-play-state: paused; }
@keyframes kv-progress { to { transform: scaleX(1); } }
.c-kv__pause { display: grid; place-items: center; position: relative; width: 2.4rem; height: 2.4rem; }
.c-kv__pause::before {
  content: "";
  width: .8rem; height: 1rem;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.c-kv__pause[aria-pressed="true"]::before {
  width: 0; height: 0;
  border: .5rem solid transparent;
  border-left: .9rem solid currentColor;
  border-right: 0;
}

/* opening */
.js .c-kv__catch .line > span { transform: translateY(110%); }
.js .c-kv__lead,
.js .c-kv__place,
.js .c-kv__pickup,
.js .c-kv__scroll,
.js .c-kv__ctrl { opacity: 0; }
.js .c-kv__slides { opacity: 0; transform: scale(1.06); }
.js.is-loaded .c-kv__slides { opacity: 1; transform: none; transition: opacity 2s var(--ease-out), transform 3s var(--ease-lux); }
.js.is-loaded .c-kv__catch .line > span { transform: none; transition: transform 1.6s var(--ease-lux) .5s; }
.js.is-loaded .c-kv__catch .line:nth-child(2) > span { transition-delay: .65s; }
.js.is-loaded .c-kv__lead { opacity: 1; transition: opacity 1.6s var(--ease-out) 1.2s; }
.js.is-loaded .c-kv__place { opacity: .9; transition: opacity 1.6s var(--ease-out) 1.5s; }
.js.is-loaded .c-kv__pickup { opacity: 1; transition: opacity 1.6s var(--ease-out) 1.7s; }
.js.is-loaded .c-kv__scroll,
.js.is-loaded .c-kv__ctrl { opacity: 1; transition: opacity 1.6s var(--ease-out) 1.9s; }
.js .l-header { opacity: 0; }
.js.is-loaded .l-header { opacity: 1; transition: opacity 1.4s var(--ease-out) .3s, transform .6s var(--ease-out); }

@media (min-width: 1024px) {
  .c-kv { min-height: 64rem; max-height: none; } /* コピーとSCROLL DOWNが重ならない最小高さ */
  .c-kv__copy { top: 22.2rem; } /* ブラウザ高さに関係なくカンプと同じ上余白 */
  .c-kv__catch { font-size: 8rem; line-height: .95; }
  .c-kv__lead { margin-top: 2rem; font-size: var(--fs-16); }
  .c-kv__place { top: auto; bottom: 29.8rem; left: auto; right: 5.8rem; min-width: 19.2rem; font-size: var(--fs-15); line-height: 1.8; }
  .c-kv__pickup { left: auto; right: 4.8rem; bottom: 13.6rem; width: 41rem; }
  .c-kv__pickup-text { padding: 1rem .4rem 1rem 1.6rem; }
  .c-kv__scroll { left: var(--gutter); bottom: 13.6rem; transform: none; }
  .c-kv__ctrl { right: 4.8rem; bottom: 8.2rem; }
}

/* 07. Topics list
   ========================================================================== */
.p-top-topics { padding-top: 6.4rem; }
.p-top-topics__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--gutter) 2.2rem;
}
.p-top-topics__head .c-more { margin-bottom: -.4rem; font-size: var(--fs-13); text-transform: none; }

.c-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}
.c-topics__item {
  display: flex;
  border-bottom: 1px solid var(--c-line);
}
.c-topics__item:nth-child(2n+1) { border-right: 1px solid var(--c-line); }
.c-topics__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3.6rem 2rem 3.9rem;
  transition: background-color .5s var(--ease-out);
}
.c-topics__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  min-height: 2.2rem;
}
.c-topics__pickup {
  padding: 0 .4rem;
  border-radius: 2px;
  background: var(--c-khaki);
  color: var(--c-cream);
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.67;
  white-space: nowrap;
}
.c-topics__date {
  color: var(--c-khaki);
  font-family: var(--ff-en);
  font-size: var(--fs-13);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: .85;
}
.c-topics__title {
  margin-top: .8rem;
  margin-bottom: 2rem;
  font-family: var(--ff-jp);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.92;
  letter-spacing: 0;
  transition: color .4s;
}
.c-topics__img { margin-top: auto; overflow: hidden; aspect-ratio: 3 / 2; }
.c-topics__img img { transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out); }
@media (hover: hover) {
  .c-topics__link:hover { background-color: #eae3d1; } /* 文字色は変えず、背景色だけ変える */
  .c-topics__link:hover .c-topics__img img { transform: scale(1.07); }
}

/* archive (SP 1col) */
.c-topics.-archive { grid-template-columns: minmax(0, 1fr); }
.c-topics.-archive .c-topics__item { border-right: 0; }
.c-topics.-archive .c-topics__link { padding: 3.8rem 2rem 4rem; }
.c-topics.-archive .c-topics__title { margin-top: 1.2rem; margin-bottom: 2.3rem; font-size: var(--fs-13); }

@media (min-width: 1024px) {
  .p-top-topics { padding-top: 8rem; }
  .p-top-topics__head { padding-bottom: 2.1rem; }
  .p-top-topics__head .c-more { margin-bottom: -1.2rem; font-size: var(--fs-12); text-transform: uppercase; }

  .c-topics,
  .c-topics.-archive { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c-topics__item,
  .c-topics.-archive .c-topics__item { border-right: 1px solid var(--c-line); }
  .c-topics__item:nth-child(4n) { border-right: 0; }
  .c-topics__link,
  .c-topics.-archive .c-topics__link { min-height: 39.9rem; padding: 4rem 5rem 3.9rem; }
  .c-topics__meta { display: contents; }
  .c-topics__pickup { order: 1; align-self: flex-start; margin-bottom: 1rem; }
  .c-topics__title,
  .c-topics.-archive .c-topics__title { order: 2; margin-top: 0; margin-bottom: 0; font-size: var(--fs-14); line-height: 1.8; }
  .c-topics__date { order: 3; margin-top: .9rem; font-size: var(--fs-14); }
  .c-topics__pickup + .c-topics__date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* PC: PICK UP の日付は視覚的に非表示(デザイン準拠)。読み上げには残す */
  .c-topics__img { order: 4; }
}

/* 08. Menu
   ========================================================================== */
.p-top-menu { padding-top: 8rem; }
.p-top-menu__head { padding: 0 var(--gutter) 2.2rem; }
.p-menu { border-top: 1px solid var(--c-line-light); }
.p-menu__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #2a2622; }
.p-menu__slides,
.p-menu__slide { position: absolute; inset: 0; }
.p-menu__slide {
  visibility: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.2s var(--ease-lux), visibility 0s 1.2s;
}
.p-menu__slide img { transform: scale(1.15); transition: transform 1.8s var(--ease-lux); }
.p-menu__slide.is-active { visibility: visible; z-index: 2; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.p-menu__slide.is-active img { transform: none; }
.p-menu__slide.is-prev { visibility: visible; z-index: 1; clip-path: inset(0 0 0 0); transition: none; }
.p-menu__slide.is-prev img { transform: none; } /* 下敷きの写真は動かさない（上に来る写真のワイプだけを見せる） */
.p-menu__media.is-reverse .p-menu__slide { clip-path: inset(0 100% 0 0); }
.p-menu__media.is-reverse .p-menu__slide.is-active,
.p-menu__media.is-reverse .p-menu__slide.is-prev { clip-path: inset(0 0 0 0); }
/* 入場の初期状態。閉じ途中のスライドを再表示するとき、その位置から動き出してワイプが短くなる（連打でほぼ拡大だけになる）ため、
   JSが1フレームだけこの状態に戻してからアニメーションを始める。必ず .is-active / .is-prev より後に書くこと */
.p-menu__slide.is-enter { visibility: visible; z-index: 2; clip-path: inset(0 0 0 100%); transition: none; }
.p-menu__media.is-reverse .p-menu__slide.is-enter { clip-path: inset(0 100% 0 0); }
.p-menu__slide.is-enter img { transform: scale(1.15); transition: none; }
/* 写真の切替 : FV（.c-kv__bar / .c-kv__pause）と同じ表示。自動で切り替わり、バーは進行状況を表す。クリックでその写真へ */
.p-menu__ctrl { display: flex; align-items: center; gap: 1.2rem; position: absolute; right: 1.6rem; bottom: 1.6rem; z-index: 3; color: var(--c-cream); }
.p-menu__bars { display: flex; gap: .6rem; }
.p-menu__bar { position: relative; width: 2.4rem; height: 2rem; }
.p-menu__bar::before,
.p-menu__bar::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: rgba(242, 237, 223, .4);
}
.p-menu__bar::after { background: var(--c-cream); transform: scaleX(0); transform-origin: left center; }
.p-menu__bar.is-active::after { animation: kv-progress var(--menu-duration, 5s) linear forwards; }
.p-menu__bar.is-done::after { transform: scaleX(1); }
.p-menu__media.is-paused .p-menu__bar.is-active::after { animation-play-state: paused; }
.p-menu__pause { display: grid; place-items: center; position: relative; width: 2.4rem; height: 2.4rem; }
.p-menu__pause::before {
  content: "";
  width: .8rem; height: 1rem;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.p-menu__pause[aria-pressed="true"]::before {
  width: 0; height: 0;
  border: .5rem solid transparent;
  border-left: .9rem solid currentColor;
  border-right: 0;
}
@media (hover: hover) {
  .p-menu__bar:hover::before { background: rgba(242, 237, 223, .8); }
}

.p-menu__body { padding: 2rem var(--gutter) 6.4rem; }
.p-menu__name { color: var(--c-text-en); } /* + .c-heading */
.p-menu__hours { margin-top: .1rem; color: var(--c-text-en); font-family: var(--ff-en); font-size: var(--fs-14); font-weight: 300; line-height: 1.78; letter-spacing: .02em; }
.p-menu__text { margin-top: 3.6rem; font-family: var(--ff-jp); line-height: 1.8; }
.p-menu__links { display: flex; flex-wrap: wrap; gap: 2rem 2.8rem; margin-top: 3.8rem; }
.p-menu__links li { display: flex; }

@media (min-width: 1024px) {
  .p-top-menu { padding-top: 8rem; }
  .p-top-menu__head { padding-bottom: 1.6rem; }
  .p-menu { display: grid; grid-template-columns: 56.04% minmax(0, 1fr); }
  .p-menu__media { aspect-ratio: 807 / 571; }
  .p-menu__body { align-self: center; padding: 4rem var(--gutter) 4rem 5rem; }
  .p-menu__hours { margin-top: 1rem; }
  .p-menu__text { max-width: 51rem; }
  .p-menu__links { gap: 2rem 2.4rem; margin-top: 6.4rem; }
}

/* 09. Concept band (ABOUT) : top / about 共通
   ========================================================================== */
.c-concept {
  position: relative;
  overflow: hidden;
  padding: 8.4rem 4rem 7.7rem;
  background: #1b1a18;
  color: var(--c-cream);
  text-align: center;
  isolation: isolate;
}
.c-concept__bg { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
/* dot grid : CSS */
.c-concept::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px) 0 0 / 5rem 5rem,
    linear-gradient(180deg, rgba(10, 10, 10, .35), rgba(10, 10, 10, .2));
  background-position: center top, 0 0;
  pointer-events: none;
}
/* SP: 2列グリッドに明示配置（折り返し計算に依存しないので、どの画面幅でも崩れない）
   列幅16.6rem×2 = 33.2rem = 円18.6rem×2 − 重なり4rem。円はセルより大きく、内側へはみ出して重なる */
.c-concept__circles {
  display: grid;
  grid-template-columns: repeat(2, 16.6rem);
  position: relative;
  left: 50%;
  width: 33.2rem; /* セクションの左右paddingより外へ広げて中央に置く */
  margin: 2.9rem 0 0 -16.6rem;
}
.c-concept__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  width: 18.6rem;
  aspect-ratio: 1 / 1;
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.4;
}
.c-concept__circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(242, 237, 223, .75);
  border-radius: 50%;
}
.c-concept__circle:nth-child(1) { grid-column: 1 / -1; justify-self: center; margin-bottom: -4rem; }
.c-concept__circle:nth-child(2) { justify-self: start; }
.c-concept__circle:nth-child(3) { justify-self: end; }
.c-concept__circle small { margin-top: .9rem; font-family: var(--ff-jp); font-size: var(--fs-13); font-weight: 300; }
.js .c-concept__circle[data-reveal] { transform: none; }
.js .c-concept__circle[data-reveal]::before { transform: scale(.6) rotate(-90deg); opacity: 0; transition: transform 1.8s var(--ease-lux), opacity 1.4s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0) * 1s); }
.js .c-concept__circle[data-reveal].is-inview::before { transform: none; opacity: 1; }

.c-concept__text { margin-top: 4.2rem; font-family: var(--ff-jp); font-weight: 300; line-height: 1.8; text-align: left; }
.c-concept__text p + p { margin-top: 2.5rem; }
.c-concept__text p > span { display: block; }
.c-concept__text p > span + span { margin-top: 2.5rem; }
.c-concept__more { margin-top: 5.8rem; }

@media (min-width: 1024px) {
  .c-concept { padding: 12.4rem var(--gutter) 11.9rem; }
  .c-concept::before { background-size: 8rem 8rem, auto; background-position: calc(50% + 4rem) 3.2rem, 0 0; }
  .c-concept__circles { display: flex; justify-content: center; left: auto; width: auto; margin: 2.6rem 0 0; } /* PC: 横一列 */
  .c-concept__circle { width: 20.5rem; font-size: var(--fs-16); }
  .c-concept__circle:nth-child(1) { margin: 0; }
  .c-concept__circle + .c-concept__circle,
  .c-concept__circle:nth-child(3) { margin-left: -2rem; }
  .c-concept__text { margin-top: 4.2rem; font-weight: 400; text-align: center; }
  .c-concept__text p > span + span { margin-top: 0; }
  .c-concept__text p + p { margin-top: 4rem; }
  .c-concept__more { margin-top: 5.7rem; }
}

/* 10. Anniversary
   ========================================================================== */
.p-top-anv {
  position: relative;
  overflow: hidden;
  padding: 8.2rem 0 10.4rem;
  background: #c8b690 url(../img/bg_anniversary.webp) no-repeat center / cover;
  color: var(--c-cream);
  text-align: center;
}
.p-top-anv__lead { margin-top: 1rem; padding: 0 var(--gutter); font-family: var(--ff-jp); line-height: 1.8; }

.p-anv-slider { margin-top: 3.1rem; }
.p-anv-slider__viewport { overflow: hidden; padding: 1rem 0 2rem; touch-action: pan-y; cursor: grab; }
.p-anv-slider__viewport.is-dragging { cursor: grabbing; }
.p-anv-slider__track {
  display: flex;
  align-items: center;
  min-height: var(--anv-h, 41.2rem); /* = アクティブカードの高さ。JSが実測値で上書き */
  gap: 2.4rem;
  width: max-content;
  transition: transform 1.1s var(--ease-lux);
  will-change: transform;
}
.p-anv-slider__track.is-jumping,
.p-anv-slider__track.is-jumping * { transition: none !important; }

.p-anv-card {
  --card-w: 23rem;
  flex: none;
  width: var(--card-w);
  padding: 1.2rem 1.2rem 2.4rem;
  border-radius: 4px;
  background: var(--bg-paper);
  box-shadow: 0 .4rem 2.4rem rgba(90, 65, 20, .08);
  color: var(--c-text-en);
  transition: width 1.1s var(--ease-lux), padding 1.1s var(--ease-lux), box-shadow 1.1s var(--ease-lux);
  user-select: none;
}
.p-anv-card.is-active { --card-w: 28rem; padding: 1.6rem 1.6rem 3.2rem; box-shadow: 0 1.6rem 5rem rgba(90, 65, 20, .2); }
.p-anv-card__img { overflow: hidden; aspect-ratio: 1 / 1; }
.p-anv-card__img img { pointer-events: none; transition: transform 1.4s var(--ease-out); }
.p-anv-card__name { margin-top: 1.3rem; font-family: var(--ff-en); font-size: 1.8rem; font-weight: 500; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; }
.p-anv-card__jp { margin-top: .4rem; font-family: var(--ff-jp); font-size: var(--fs-12); font-weight: 400; color: var(--c-text); line-height: 1.6; }
.p-anv-card .c-more { margin-top: 2.4rem; }
@media (hover: hover) {
  .p-anv-card:hover .p-anv-card__img img { transform: scale(1.06); }
}
.p-anv-slider .c-arrows { justify-content: center; margin-top: 2rem; }

@media (min-width: 1024px) {
  .p-top-anv { padding: 10.4rem 0 9.8rem; }
  .p-top-anv__lead { margin-top: .6rem; }
  .p-anv-slider { margin-top: 1.6rem; }
  .p-anv-slider__viewport { padding: 2rem 0 4rem; }
  .p-anv-slider__track { min-height: var(--anv-h, 50.2rem); }
  .p-anv-card { --card-w: 30.3rem; padding: 1.6rem 1.6rem 3.2rem; }
  .p-anv-card.is-active { --card-w: 37rem; }
  .p-anv-card__name { margin-top: 1.25rem; font-size: 1.9rem; }
  .p-anv-card__jp { margin-top: .2rem; }
  .p-anv-card .c-more { margin-top: 2.55rem; }
  .p-anv-slider .c-arrows { margin-top: 0; }
}

/* 11. Takeout / Access
   ========================================================================== */
.p-top-guide { border-bottom: 1px solid var(--c-line); }
.p-guide { padding: 6.4rem var(--gutter) 6.4rem; }
.p-guide + .p-guide { border-top: 1px solid var(--c-line); }
.p-guide__media { overflow: hidden; aspect-ratio: 360 / 225; background: var(--c-placeholder); }
.p-guide__title { margin-top: 2rem; } /* + .c-heading */
.p-guide__sub { margin-top: .4rem; font-family: var(--ff-jp); font-size: var(--fs-13); font-weight: 400; line-height: 1.6; }
.p-guide__text { margin-top: 3.2rem; font-family: var(--ff-jp); font-weight: 400; }
.p-guide__text a { transition: color .4s; }
.p-guide__text a:hover { color: var(--c-accent); }
.p-guide__route { margin-top: 2.4rem; font-family: var(--ff-jp); font-weight: 400; }
.p-guide__route.-list { margin-top: .4rem; }
.p-guide__route .sep { margin: 0 .7rem; vertical-align: -.12em; }
.p-guide .c-more { margin-top: 3.9rem; }
.p-guide.-access .c-more { margin-top: 4.1rem; }
.p-guide .c-more.-jp { font-family: var(--ff-jp); }

@media (min-width: 1024px) {
  .p-top-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-guide { padding: 8rem var(--gutter) 8rem; }
  .p-guide + .p-guide { border-top: 0; border-left: 1px solid var(--c-line); }
  .p-guide__media { aspect-ratio: 620 / 349; }
  .p-guide__title { margin-top: 3.4rem; }
  .p-guide__text { margin-top: 3.6rem; }
  .p-guide .c-more { margin-top: 6.5rem; }
  .p-guide.-access .c-more { margin-top: 4rem; }
}

/* 12. FAQ
   ========================================================================== */
.c-faqsec { padding: 6rem var(--gutter) 6.4rem; border-bottom: 1px solid var(--c-line); }
.c-faqsec .c-title { font-size: 2.4rem; padding-right: 0; }
.c-faqsec .c-title::after { content: none; }
.c-faqsec__sub { margin-top: .2rem; font-family: var(--ff-jp); font-size: var(--fs-13); font-weight: 400; }
.c-faqsec.-wide { padding-block: 7rem 8.6rem; }
.c-faqsec.-wide .c-title { font-size: 3.6rem; padding-right: 1.4rem; }
.c-faqsec.-wide .c-title::after { content: ""; }
.c-faqsec.-wide .c-faqsec__sub { margin-top: .4rem; }
.c-faqsec.-wide .c-faq__btn::before { font-weight: 400; }
.c-faq { margin-top: 3.4rem; }
.c-faq__item { border-bottom: 1px solid var(--c-line); }
.c-faq__q { font: inherit; }
.c-faq__btn {
  display: grid;
  grid-template-columns: 3.9rem 1fr 1rem;
  align-items: center;
  width: 100%;
  min-height: 4.6rem;
  padding: .8rem 0;
  color: var(--c-text-en);
  font-family: var(--ff-jp);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  transition: color .4s;
}
.c-faq__btn::before { content: "Q"; font-family: var(--ff-en); font-size: 1.8rem; font-weight: 300; line-height: 1; }
.c-faq__btn .ico-arrow { transition: transform .7s var(--ease-lux); }
.c-faq__btn[aria-expanded="true"] .ico-arrow { transform: rotate(-90deg); }
@media (hover: hover) { .c-faq__btn:hover { color: var(--c-accent); } }
.c-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .8s var(--ease-lux), visibility 0s .8s;
}
.c-faq__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.c-faq__panel-inner { min-height: 0; overflow: hidden; }
.c-faq__a {
  display: grid;
  grid-template-columns: 3.9rem 1fr;
  padding: .6rem 2.4rem 2.4rem 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-13);
  font-weight: 400;
  opacity: 0;
  transform: translateY(-.8rem);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.c-faq__a::before { content: "A"; color: var(--c-accent); font-family: var(--ff-en); font-size: 1.8rem; font-weight: 300; line-height: 1.3; }
.c-faq__panel.is-open .c-faq__a { opacity: 1; transform: none; transition-delay: .15s; }
.no-js .p-anv-slider__viewport { overflow-x: auto; cursor: auto; }
.no-js .c-arrows,
.no-js .p-menu__ctrl,
.no-js .c-kv__ctrl { display: none; }
.no-js .c-faq__panel { grid-template-rows: 1fr; visibility: visible; }
.no-js .c-faq__a { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .c-faqsec { display: grid; grid-template-columns: 35rem minmax(0, 1fr); padding: 5.6rem var(--gutter) 5.9rem; }
  .c-faqsec .c-title { margin-top: .6rem; font-size: 4rem; padding-right: 1.4rem; }
  .c-faqsec .c-title::after { content: ""; }
  .c-faqsec.-wide { grid-template-columns: 45.5rem minmax(0, 1fr); padding-block: 7.8rem 8rem; }
  .c-faqsec.-wide .c-title { margin-top: 0; font-size: 4rem; }
  .c-faq { margin-top: 0; }
  .c-faq__btn { min-height: 4.6rem; }
}

/* 13. Information
   ========================================================================== */
.l-info { padding: 5.9rem var(--gutter) 6.4rem; }
.l-info__group { margin-top: 2.6rem; }
.l-info__main .l-info__group:first-child { margin-top: 1.8rem; }
.l-info__side { margin-top: 3.8rem; }
.l-info__side .l-info__group { margin-top: 0; }
.l-info__label { font-family: var(--ff-jp); font-size: var(--fs-14); font-weight: 700; line-height: 1.6; color: var(--c-text); }
.l-info__hours { margin-top: .9rem; color: var(--c-text-en); font-family: var(--ff-en); font-weight: 300; line-height: 1.78; letter-spacing: 0; }
.l-info__hours > div { display: grid; grid-template-columns: 8.5rem 1fr; }
.l-info__hours > div + div { margin-top: 1.1rem; }
.l-info__hours dt { font-weight: 400; }
.l-info__data { margin-top: .7rem; font-family: var(--ff-jp); font-weight: 400; }
.l-info__data.-inline { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.6rem; }
.l-info__data .c-link { font-size: var(--fs-13); }
.l-info__note { margin-top: 1.7rem; font-family: var(--ff-jp); font-size: var(--fs-12); font-weight: 400; }
/* 営業日程カレンダー
   表（table.cal）と当月の予定（.schedule_list）は外部スクリプト cal_ot.js が描画する。
   クラス名・ID はスクリプト側の仕様なので変更しないこと。 */
.l-info__calendar { margin-top: 1.9rem; font-family: var(--ff-jp); }
.l-info__calendar .cal_wrapper { padding: .8rem 1.2rem 1.2rem; border-radius: 4px; border: 1px solid var(--c-line); }
.l-info__calendar table.cal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.l-info__calendar table.cal th { padding: .8rem .4rem; border-bottom: 1px solid var(--c-line); }
.l-info__calendar table.cal tr th p { float: left; margin: 0; padding: .4rem; font-size: var(--fs-14); font-weight: 700; }
.l-info__calendar table.cal tr th div.cal_ui { float: right; }
.l-info__calendar table.cal tr th div.cal_ui input {
  margin: 0 .2rem; padding: .3rem 1rem; border: 1px solid var(--c-line-dark); border-radius: 2px;
  background: var(--c-cream); color: var(--c-text-en);
  font-family: var(--ff-en); font-size: var(--fs-12); cursor: pointer;
}
.l-info__calendar table.cal tr th div.cal_ui input:hover { background: var(--c-box); }
.l-info__calendar table.cal tr.headline { background: var(--c-box); }
.l-info__calendar table.cal tr.headline td { padding: .5rem 0; color: var(--c-text-en); }
.l-info__calendar table.cal tr td { padding: .2rem; border-top: 1px solid var(--c-line); font-size: var(--fs-12); text-align: center; }
.l-info__calendar table.cal tr td div { position: relative; padding: .5rem .2rem; border-radius: 2px; background: var(--c-white); white-space: nowrap; }
.l-info__calendar table.cal tr td div span {
  display: none; position: absolute; top: 2.2rem; left: 0; z-index: 3;
  width: 18rem; padding: .6rem; border: 1px solid var(--c-line);
  background: var(--c-white); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
}
.l-info__calendar table.cal tr td div.Sat { color: #1a5fb4; }
.l-info__calendar table.cal tr td div.Sun { color: var(--c-accent); }
.l-info__calendar table.cal tr td div.Today { border: 2px solid var(--c-accent); }
.l-info__calendar table.cal tr td div.Deli { background: #eef3ea; }
.l-info__calendar table.cal tr td div.Holyday { background: var(--c-khaki); color: var(--c-cream); font-weight: 700; }
.l-info__calendar table.cal tr td div.Closing { background: var(--c-line-dark); color: var(--c-cream); font-weight: 700; }
.l-info__calendar table.cal tr td div.backward { background: var(--c-box); color: var(--c-placeholder); }
.l-info__calendar table.cal tr td div.pointer { border: 1px solid transparent; cursor: pointer; }
.l-info__calendar table.cal tr td div.pointer:hover { border-color: var(--c-line-dark); }

.l-info__calhint { margin-top: .8rem; font-size: var(--fs-12); }
.l-info__caldetail {
  max-height: 0; 
  margin-top: .8rem; 
  padding: 0 1rem; 
  border-radius: 4px;
  border: 1px solid var(--c-line);
  font-size: var(--fs-12); 
  line-height: 1.6;
  opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out), opacity .3s var(--ease-out), padding .4s var(--ease-out);
}
.l-info__caldetail.is-open { max-height: 20rem; padding: 1rem; opacity: 1; }
.l-info__caldetail.is-closing #mobile-detail-date,
.l-info__caldetail.is-closing #mobile-detail-content { opacity: 0; }
#mobile-detail-date { margin-bottom: .4rem; font-weight: 700; color: var(--c-accent); }
#mobile-detail-content { white-space: pre-wrap; }

.l-info__calendar .schedule_wrapper { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--c-line); border-radius: 4px; }
.l-info__calschedule { margin: 0; font-size: var(--fs-13); font-weight: 700; }
.l-info__calendar .schedule_list { max-height: 10rem; margin-top: .6rem; overflow-y: auto; }

.l-info__calendar .schedule_list {
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-dark) transparent;
}
.l-info__calendar .schedule_list::-webkit-scrollbar {
    width: 4px;
}
.l-info__calendar .schedule_list::-webkit-scrollbar-thumb {
    background: var(--c-line-dark);
    border-radius: 4px;
}


.l-info__calendar .schedule_list ol { margin: 0; padding: 0;}
.l-info__calendar .schedule_list ol li { padding: .5rem 0; border-bottom: .5px solid var(--c-line); list-style: none; font-size: var(--fs-12); line-height: 1.5; }
.l-info__calendar .schedule_list b { color: var(--c-khaki) !important; }

@media (min-width: 1024px) {
  .l-info { padding: 7.6rem var(--gutter) 5.6rem; }
  .l-info__cols {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: space-between;
    gap: 4rem;
  }
  .l-info__main,.l-info__side { max-width: 80rem; }
  .l-info__side { margin-top: 0; }
  .l-info__main .l-info__group:first-child { margin-top: 0; }
  .l-info__group { margin-top: 2.4rem; }
  .l-info__hours > div + div { margin-top: .75rem; }
  .l-info__hours { line-height: 1.5; }
  .l-info__hours > div { align-items: start; }
  .l-info__data.-inline { display: block; }
  .l-info__data.-inline > span { display: block; }
  .l-info__data.-inline .c-link { margin-top: .2rem; }
  /* .l-info__side .l-info__group { margin-top: 4.8rem; } */
  .l-info__note { margin-top: 1.65rem; font-size: var(--fs-13); }
  .l-info__calendar { margin-top: 1.8rem; }

  .l-info__calhint { display: none; }
  .l-info__caldetail { position: relative; max-height: none; height: 8rem; padding: 1rem; opacity: 1; overflow: visible; transition: none; }
  .l-info__caldetail::after { content: '日付にカーソルを合わせるとここに内容が表示されます'; position: absolute; right: 1.2rem; bottom: .6rem; opacity: .2; }
  .l-info__caldetail #mobile-detail-date,
  .l-info__caldetail #mobile-detail-content { opacity: 0; transition: opacity .35s var(--ease-out); }
  .l-info__caldetail.has-content #mobile-detail-date,
  .l-info__caldetail.has-content #mobile-detail-content { opacity: 1; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .l-info__main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 3rem;
        gap:1rem;
    }
}

/* 14. Footer
   ========================================================================== */
.l-footer__inner { padding: 6.4rem var(--gutter) 4rem; border-top: 1px solid var(--c-accent); color: var(--c-text-en); }
.l-footer__logo img { width: 19rem; }
.l-footer__nav { margin-top: 6rem; font-family: var(--ff-en); font-weight: 400; }
.l-footer__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; font-size: 1.8rem; line-height: 1.55; letter-spacing: 0; }
.l-footer__main li:nth-child(1) { order: 2; }
.l-footer__main li:nth-child(2) { order: 1; }
.l-footer__main li:nth-child(3) { order: 3; }
.l-footer__main li:nth-child(4) { order: 4; }
.l-footer__main li:nth-child(5) { order: 5; }
.l-footer__main li:nth-child(6) { order: 6; }
.l-footer__heading { margin-top: 3.2rem; color: var(--c-khaki); font-size: var(--fs-14); font-weight: 400; line-height: 1.6; letter-spacing: .02em; }
.l-footer__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 0; margin-top: 1.6rem; font-size: var(--fs-14); line-height: 1.6; letter-spacing: .02em; }
.l-footer__follow { display: flex; align-items: center; gap: 2.4rem; margin-top: 3.4rem; }
.l-footer__follow .l-footer__heading { margin-top: 0; }
.l-footer__nav a { position: relative; transition: color .4s; }
@media (hover: hover) { .l-footer__nav a:hover { color: var(--c-accent); } }
.l-footer__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 3.7rem; }
.l-footer__copy { font-family: var(--ff-en); font-size: var(--fs-10); font-weight: 400; line-height: 1.6; letter-spacing: .01em; }
.l-footer__copy small { font-size: inherit; }
.l-footer__pagetop { color: var(--c-text-en); }
.l-footer__pagetop .c-more__circle { color: var(--c-accent); }
@media (hover: hover) {
  .l-footer__pagetop:hover .c-more__circle { background-color: var(--c-accent); border-color: var(--c-accent); }
}

@media (min-width: 1024px) {
  .l-footer__inner { display: grid; grid-template-columns: 46.7rem minmax(0, 1fr); padding: 6.4rem var(--gutter) 6.4rem; }
  .l-footer__logo img { width: 22.4rem; }
  .l-footer__nav { display: grid; grid-template-columns: 58.2rem minmax(0, 1fr); margin-top: -.5rem; }
  .l-footer__main { display: flex; justify-content: space-between; grid-column: 1 / 3; font-size: 2rem; }
  .l-footer__main li:nth-child(n) { order: 0; }
  .l-footer__anv { grid-column: 1; }
  .l-footer__heading { margin-top: 2.95rem; }
  .l-footer__sub { grid-template-columns: 29.1rem 1fr; gap: .76rem 0; margin-top: 1.6rem; }
  .l-footer__follow { display: block; grid-column: 2; margin-top: 0; }
  .l-footer__follow .l-footer__heading { margin-top: 2.95rem; }
  .l-footer__sns { margin-top: 1.9rem; }
  .l-footer__bottom { margin-top: 3.7rem; }
}

/* 15. Topics archive
   ========================================================================== */
.l-main.-lower { padding-top: var(--header-h); }
.c-pagehead { padding: 8.2rem var(--gutter) 2.6rem; text-align: center; }
.c-pagehead__lead { margin-top: 1.1rem; font-family: var(--ff-jp); font-size: var(--fs-13); font-weight: 400; line-height: 1.6; }

.c-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 3.2rem var(--gutter) 0;
  color: var(--c-text-en);
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1;
}
.c-pager a,
.c-pager span {
  display: grid;
  place-items: center;
  position: relative;
  min-width: 2rem; height: 3rem;
}
.c-pager a::after {
  content: "";
  position: absolute;
  left: 20%; bottom: .4rem;
  width: 60%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .5s var(--ease-out);
}
.c-pager [aria-current="page"] { font-weight: 500; }
.c-pager a:hover::after { transform: scaleX(1); }
.c-pager a:hover { color: var(--c-accent); }
/* WP paginate_links() の出力(.nav-links / .page-numbers.current / .next / .dots)にも対応 */
.c-pager .nav-links { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.c-pager .current { font-weight: 500; }
.c-pager .dots::after { content: none; }
.c-pager__next::before {
  content: "";
  width: .6rem; height: .6rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.c-pager__next::after { content: none !important; }
.p-topics-archive { padding-bottom: 7.3rem; }

@media (min-width: 1024px) {
  .c-pagehead { padding: 8rem var(--gutter) 2.6rem; }
  .c-pagehead__lead { margin-top: .85rem; }
  .c-pager { padding-top: 3.2rem; }
  .p-topics-archive { padding-bottom: 7.1rem; }
}

/* 16. Topics detail
   ========================================================================== */
.p-article { padding: 7.7rem var(--gutter) 0; }
.p-article__head { display: flex; flex-direction: column; }
.p-article__cat { color: var(--c-text-en); font-family: var(--ff-en); font-size: 2.8rem; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.p-article__date { margin-top: 1rem; color: var(--c-text-en); font-family: var(--ff-en); font-size: var(--fs-13); font-weight: 400; line-height: 1.6; }
.p-article__title { margin-top: 1.9rem; font-family: var(--ff-jp); font-size: 1.8rem; font-weight: 500; line-height: 1.64; }
.p-article__eyecatch { margin-top: 3.9rem; overflow: hidden; aspect-ratio: 360 / 192; }

.p-article__content { margin-top: 3.2rem; font-family: var(--ff-jp); font-weight: 400; line-height: 1.8; letter-spacing: 0; }
.p-article__content > * + * { margin-top: 2.5rem; }
.p-article__content h2 { margin-top: 5rem; font-size: 1.8rem; font-weight: 500; line-height: 1.6; }
.p-article__content h3 { margin-top: 4rem; font-size: var(--fs-16); font-weight: 700; line-height: 1.6; }
.p-article__content strong { font-weight: 700; }
.p-article__content img { width: 100%; }
/* the_content() 想定の追加スタイル(Gutenberg 出力) */
.p-article__content h4 { margin-top: 3.2rem; font-size: var(--fs-14); font-weight: 700; }
.p-article__content em { font-style: italic; }
.p-article__content hr { margin: 4rem 0; border: 0; border-top: 1px solid var(--c-line); }
.p-article__content figure { margin-inline: 0; }
.p-article__content figcaption { margin-top: .8rem; color: var(--c-khaki); font-size: var(--fs-12); line-height: 1.6; }
.p-article__content blockquote { margin-inline: 0; padding: 2rem 2.4rem; border-left: 2px solid var(--c-khaki); background: rgba(145, 137, 116, .1); }
.p-article__content table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.p-article__content th,
.p-article__content td { padding: 1rem 1.2rem; border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.p-article__content th { background: rgba(145, 137, 116, .12); font-weight: 500; }
.p-article__content .wp-block-embed iframe { width: 100%; }
.p-article__content .wp-block-embed iframe[src*="youtube"],
.p-article__content .wp-block-embed iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }
.p-article__content .aligncenter { margin-inline: auto; text-align: center; }
.p-article__content .alignleft,
.p-article__content .alignright { float: none; margin-inline: 0; } /* 1カラム幅のため回り込みは無効化 */
.p-article__content ol { padding-left: 1.6em; list-style: decimal; }
.p-article__content a:not(.c-link) { text-decoration: underline; text-underline-offset: .3em; transition: color .4s; }
.p-article__content a:not(.c-link):hover { color: var(--c-accent); }
.p-article__content .c-link { font-size: var(--fs-13); }
.p-article__back {
  margin-top: 6rem;
  padding: 3.4rem 0 5.9rem;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.p-article__back a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--ff-jp);
  font-size: var(--fs-13);
  font-weight: 400;
  text-decoration: none;
  transition: color .4s;
}
.p-article__back a > span:not(.ico-dots) { text-decoration: underline; text-underline-offset: .3em; }
.p-article__back a:hover { color: var(--c-accent); }

/* 前の記事 / 一覧へ戻る / 次の記事 を1行に */
.p-article__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.6rem;
  margin-top: 6rem;
  padding: 3.4rem 0 5.9rem;
  border-top: 1px solid var(--c-line);
}
.p-article__nav .p-article__back { margin: 0; padding: 0; border-top: 0; }
.p-article__prev,
.p-article__next {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .4s;
}
.p-article__prev { justify-self: start; }
.p-article__next { justify-self: end; }
@media (hover: hover) {
  .p-article__prev:hover,
  .p-article__next:hover { color: var(--c-accent); }
}


@media (min-width: 1024px) {
  .p-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 71.6rem;
    column-gap: 22rem;
    padding: 4.1rem var(--gutter) 0;
  }
  .p-article__head { position: sticky; top: calc(var(--header-h) + 4rem); align-self: start; padding-top: 4.3rem; padding-bottom: 4rem; }
  .p-article__title { order: 2; margin-top: 2.1rem; font-size: 1.8rem; line-height: 1.64; }
  .p-article__date { order: 3; margin-top: 1.2rem; }
  .p-article-wrap { border-bottom: 1px solid var(--c-line); }
  .p-article__eyecatch { margin-top: 0; aspect-ratio: 3 / 2; }
  .p-article__title { max-width: 37.8rem; }
  .p-article__body { grid-column: 2; }
  .p-article__content { margin-top: 3.4rem; }
  .p-article__back { margin-top: 11.2rem; padding: 0 0 11.1rem; border-top: 0; }
  .p-article__nav { margin-top: 5.9rem; padding: 3.4rem 0 11.1rem; }
  .p-article__nav .p-article__back { margin: 0; padding: 0; }
}

/* 17. Page : About
   ========================================================================== */
/* page KV（下層共通・1枚画像）: ヘッダー分を引いた高さで全面表示 */
.c-kv.-page { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 52rem; max-height: none; }
.c-kv.-page .c-kv__copy { top: auto; bottom: 9.3rem; text-align: center;}
.c-kv.-page .c-kv__catch { line-height: 1.05; }
.c-kv.-page .c-kv__lead { display: block; margin-top: 1.9rem; letter-spacing: -.02em; }
.c-kv.-page .c-kv__place {top: 5em; left: 1.5em;} /* タイトル・SCROLL DOWN と同じく下端基準（端末の高さに依存させない） */
.c-kv.-page .c-kv__scroll { bottom: 2.7rem; }
.c-kv.-page .c-kv__slides::after { /* 下層ページは文字の可読性のため残す（TOPのファーストビューは無し） */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 35%);
}

.c-concept.-page { padding-top: 12.4rem; padding-bottom: 11.7rem; } /* 円・本文のレイアウトは 09. の共通定義をそのまま使用。差分は上下余白のみ */

.p-about-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  column-gap: 2rem;
  padding: 6.4rem var(--gutter) 0;
}
.p-about-feature__head { align-self: end; }
.p-about-feature__num { color: var(--c-accent); font-family: var(--ff-en); font-size: var(--fs-14); font-weight: 400; line-height: 1.4; letter-spacing: .02em; }
.p-about-feature__title {
  margin-top: 1.4rem;
  margin-bottom: .3rem;
  color: var(--c-text-en);
  font-family: var(--ff-en);
  font-size: 4rem;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
}
.p-about-feature__sub { overflow: hidden; aspect-ratio: 290 / 387; }
.p-about-feature__body { grid-column: 1 / -1; margin-top: 2.2rem; }
.p-about-feature__lead { color: var(--c-text-en); font-family: var(--ff-jp); font-size: var(--fs-16); line-height: 1.5; letter-spacing: 0; }
.p-about-feature__text { margin-top: 4.2rem; font-family: var(--ff-jp); line-height: 1.8; }
.p-about-feature__text p + p { margin-top: 2.5rem; }
.p-about-feature__main { grid-column: 1 / -1; margin: 4.2rem calc(var(--gutter) * -1) 0; overflow: hidden; aspect-ratio: 500 / 334; }

.p-about-spice { margin-top: 3.3rem; padding-top: 2.6rem; border-top: 1px solid var(--c-line); }
.p-about-spice__logo img { width: 8rem; }
.p-about-spice__text { margin-top: 1.4rem; font-family: var(--ff-jp); font-size: var(--fs-12); line-height: 1.84; }
.p-about-spice .c-link { margin-top: 1.6rem; font-size: var(--fs-13); }

/* gallery : 無限ループのマーキー */
.c-gallery { position: relative; margin: 8rem 0; }
.c-gallery.-flush { margin: .8rem 0 0; }
.c-gallery__viewport { overflow: hidden; }
.c-gallery__track { display: flex; gap: .8rem; width: max-content; height: 26.7rem; }
.c-gallery__item { flex: none; height: 100%; }
.c-gallery__item img { width: auto; height: 100%; max-width: none; }
.c-gallery.is-ready .c-gallery__track { animation: marquee var(--marquee-duration, 60s) linear infinite; }
.c-gallery.is-paused .c-gallery__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(calc(var(--marquee-w, 0px) * -1), 0, 0); } }
/* 一時停止ボタンはキーボードフォーカス時のみ表示（WCAG 2.2.2） */
.c-gallery__pause {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 1rem 1.6rem;
  background: var(--c-accent);
  color: var(--c-cream);
  font-size: var(--fs-12);
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
}
.c-gallery__pause:focus-visible { opacity: 1; pointer-events: auto; }
.no-js .c-gallery__viewport { overflow-x: auto; }
.no-js .c-gallery__pause { display: none; }

@media (min-width: 1024px) {
  .c-kv.-page { min-height: 55rem; }
  .c-kv.-page .c-kv__copy { top: 13.6rem; bottom: auto; text-align: left;}
  .c-kv.-page .c-kv__catch { line-height: .975; }
  .c-kv.-page .c-kv__lead { margin-top: 1.7rem; }
  .c-kv.-page .c-kv__place {top: auto; bottom: 29.8rem; left:auto;}
  .c-kv.-page .c-kv__scroll { bottom: 13.6rem; }

  .c-concept.-page { padding-top: 16rem; padding-bottom: 16.2rem; }

  .p-about-feature {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 58rem;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 0;
    min-height: 80.9rem;
    padding: 0;
  }
  .p-about-feature__head { grid-column: 1; grid-row: 2; align-self: auto; padding-left: 9.5rem; }
  .p-about-feature__title { margin-top: 1.2rem; margin-bottom: 0; }
  .p-about-feature__body { grid-column: 1; grid-row: 3; width: 52.5rem; margin-top: 2.6rem; padding-left: 9.5rem; }
  .p-about-feature__text { margin-top: 4.2rem; }
  .p-about-feature__sub { position: absolute; top: 25.7rem; right: 43.5rem; z-index: 1; width: 29rem; }
  .p-about-feature__main { grid-column: 2; grid-row: 1 / -1; margin: 0; aspect-ratio: auto; }
  .p-about-spice { margin-top: 3.9rem; padding-top: 2.5rem; }
  .p-about-spice__text { margin-top: 1.5rem; }
  .c-gallery__track { height: 37.3rem; }
  .c-gallery.-flush { margin-top: .2rem; }
}

/* 紙芝居（PCのみ / JSが .is-stack を付与した時だけ有効）
   01–03 を同じ位置に重ね、ステージを画面に固定。スクロール量に応じて
   .is-before（表示済み）/ .is-active（表示中）/ クラスなし（これから）を切り替える。
   写真は下から上へカーテンのように現れ、文字は入れ替わる。戻る時は逆再生。 */
@media (min-width: 1024px) {
  .p-about-features.is-stack { height: calc(max(80.9rem, 100svh) + (var(--n, 3) - 1) * 90svh); }
  .is-stack .p-about-features__stage {
    display: grid;
    position: sticky;
    top: var(--stick-top, 0px); /* ステージが画面より高い時は JS が負の値を設定（下端を優先して見せる） */
    height: max(80.9rem, 100svh);
    overflow: hidden;
  }
  .is-stack .p-about-feature { grid-area: 1 / 1; min-height: 0; pointer-events: none; }
  .is-stack .p-about-feature.is-active { pointer-events: auto; }
  .is-stack .p-about-feature__sub { top: calc(50% - 14.75rem); } /* カンプ(高さ80.9rem)時に top:25.7rem と同値 */

  /* 文字 : これから=下で待機 / 表示済み=上へ抜ける */
  .js .is-stack .p-about-feature .p-about-feature__head,
  .js .is-stack .p-about-feature .p-about-feature__body {
    opacity: 0;
    transform: translate3d(0, 2.4rem, 0);
    transition: opacity .45s ease, transform .45s ease;
  }
  .js .is-stack .p-about-feature.is-before .p-about-feature__head,
  .js .is-stack .p-about-feature.is-before .p-about-feature__body { transform: translate3d(0, -2.4rem, 0); }
  .js .is-stack .p-about-feature.is-active .p-about-feature__head,
  .js .is-stack .p-about-feature.is-active .p-about-feature__body {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease-out) .4s, transform 1.3s var(--ease-out) .4s;
  }
  .js .is-stack .p-about-feature.is-active .p-about-feature__body { transition-delay: .52s; }

  /* 写真 : 表示中と表示済みは全面表示（後ろのブロックほど上に重なる）。これからのものは下端で待機 */
  .js .is-stack .p-about-feature .p-about-feature__main,
  .js .is-stack .p-about-feature .p-about-feature__sub {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.25s var(--ease-lux);
  }
  .js .is-stack .p-about-feature .p-about-feature__sub { transition-delay: .12s; }
  .js .is-stack .p-about-feature .p-about-feature__main img,
  .js .is-stack .p-about-feature .p-about-feature__sub img {
    transform: scale(1.16);
    transition: transform 1.9s var(--ease-lux);
  }
  .js .is-stack .p-about-feature:is(.is-active, .is-before) .p-about-feature__main,
  .js .is-stack .p-about-feature:is(.is-active, .is-before) .p-about-feature__sub { clip-path: inset(0 0 0 0); }
  .js .is-stack .p-about-feature:is(.is-active, .is-before) .p-about-feature__main img,
  .js .is-stack .p-about-feature:is(.is-active, .is-before) .p-about-feature__sub img { transform: none; }
}

/* 18. Page : Contact
   ========================================================================== */
.c-pagehead.-contact { padding-bottom: 0; }
.c-pagehead.-contact .c-pagehead__lead { margin-top: .8rem; font-size: var(--fs-14); line-height: 1.8; letter-spacing: 0; }
.c-pagehead__link { margin-top: 2.8rem; text-align: left; }
.c-pagehead__link .c-link { font-size: var(--fs-13); letter-spacing: 0; }
/* SP: 複数行に折り返すため text-decoration の下線に切り替え */
@media not all and (min-width: 1024px) {
.c-pagehead__link .c-link {
  display: inline;
  padding: 0;
  font-size: var(--fs-13);
  line-height: 1.95;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: var(--c-line-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}
.c-pagehead__link .c-link::before,
.c-pagehead__link .c-link::after { content: none; }
.c-pagehead__link .c-link .ico-win { margin-left: 1.6rem; }
}

.c-contact { padding: 8rem var(--gutter) 8rem; }

.c-steps { display: flex; gap: 4rem; }
.c-steps__item {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  position: relative;
  min-height: 6.3rem;
  border: 1px solid var(--c-line-dark);
  border-radius: 2px;
  color: var(--c-khaki);
  font-family: var(--ff-jp);
  font-size: var(--fs-14);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}
.c-steps__item[aria-current="step"] { border-color: var(--c-khaki); background: var(--c-khaki); color: var(--c-cream); }
.c-steps__item + .c-steps__item::before {
  content: "";
  position: absolute;
  top: 50%; left: -2.6rem;
  width: 1.1rem; height: 1.1rem;
  border-top: 1px solid var(--c-text-en);
  border-right: 1px solid var(--c-text-en);
  transform: translateY(-50%) rotate(45deg);
}

.c-form { margin-top: 7.2rem; font-family: var(--ff-jp); letter-spacing: 0; }
.c-form__row + .c-form__row { margin-top: 2.7rem; }
.c-form__label { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-14); line-height: 1.8; }
.c-form__req {
  flex: none;
  padding: 0 .4rem;
  border-radius: 2px;
  background: var(--c-accent);
  color: var(--c-cream);
  font-size: var(--fs-12);
  line-height: 2.17;
}
.c-form__field { margin-top: .6rem; }
.c-form__input {
  display: block;
  width: 100%;
  height: 4rem;
  padding: 0 .8rem;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-field);
  color: var(--c-text);
  font: inherit;
  font-size: max(1.4rem, 16px); /* iOSのフォーカス時ズーム防止 */
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .4s, background-color .4s, box-shadow .4s;
}
.c-form__input.-textarea { height: 23.8rem; padding: .8rem; resize: vertical; }
.c-form__input::placeholder { color: #a49d91; opacity: 1; }
.c-form__input:hover { border-color: var(--c-khaki); }
.c-form__input:focus-visible { outline: 0; border-color: var(--c-accent); background: var(--c-white); box-shadow: 0 0 0 3px rgba(186, 53, 17, .15); }
.c-form__input:user-invalid { border-color: var(--c-accent); }

.c-form__policy {
  position: relative;   /* 中の .u-visually-hidden（position:absolute）の基準。無いとページ下に余白ができる */
  height: 22rem;
  margin-top: 4rem;
  padding: 2.8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--c-line);
  background: var(--c-field);
  font-size: var(--fs-12);
  line-height: 1.84;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-dark) transparent;
}
.c-form__policy-title { margin-bottom: 2.2rem; color: var(--c-text-en); font-size: 1.9rem; font-weight: 500; line-height: 1.5; }
/* 見出しレベルは設置ページで変わる（contact: h2>h3>h4 / プランページ: h3>h4>h5）ためタグに依存させない */
.c-form__policy :is(h3, h4, h5):not(.c-form__policy-title) { font-size: inherit; font-weight: 500; }
.c-form__policy :is(p, ul, ol) + :is(h3, h4, h5) { margin-top: 2.2rem; }
.c-form__policy :is(h3, h4, h5) + :is(p, ul, ol) { margin-top: .4rem; }
.c-form__policy :is(ul, ol) { margin-top: .4rem; }
.c-form__policy ol { padding-left: 1.6em; list-style: decimal; }
.c-form__policy :is(p, ul, ol) + p { margin-top: 1.2rem; }
.c-form__policy a { color: var(--c-accent); text-decoration: underline; text-underline-offset: .2em; word-break: break-all; }
@media (hover: hover) {
  .c-form__policy a:hover { text-decoration: none; }
}

.c-form__agree { margin-top: 1.6rem; font-size: var(--fs-14); line-height: 1.8; }
.c-form__agree label,
.c-form__choices label { display: inline-flex; align-items: center; gap: 1.2rem; cursor: pointer; }
.c-form :is(input[type="radio"], input[type="checkbox"]) {
  display: grid;
  place-content: center;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  margin: 0;
  border: 1px solid #c9c4b8;
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s;
}
.c-form :is(input[type="radio"], input[type="checkbox"])::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-accent); transform: scale(0); transition: transform .4s var(--ease-out); }
.c-form :is(input[type="radio"], input[type="checkbox"]):checked { border-color: var(--c-accent); }
.c-form :is(input[type="radio"], input[type="checkbox"]):checked::before { transform: none; }

/* choices / sub rows / unit / note（プランページのフォーム項目） */
.c-form__choices { display: flex; flex-direction: column; gap: 1.1rem; font-size: var(--fs-14); line-height: 1.6; }
.c-form__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.c-form__sub + .c-form__sub { margin-top: 1.6rem; }
.c-form__sublabel { flex: none; min-width: 5.6rem; font-size: var(--fs-14); }
.c-form__sub .c-form__input { flex: 1 1 0; width: auto; min-width: 0; }
.c-form__sub .c-form__choices { flex-direction: row; flex-wrap: wrap; gap: 1rem 2.4rem; width: 100%; }
.c-form__input.-date { height: 4.4rem; padding-right: 4rem; background: var(--c-field) var(--ico-chevron) no-repeat right 1.2rem center / 1.6rem auto; }
.c-form__input.-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.c-form__input.-date { position: relative; }
.c-form__unit { display: flex; align-items: center; gap: 1.6rem; font-size: var(--fs-14); }
.c-form__unit .c-form__input { flex: 1 1 0; width: auto; min-width: 0; height: 4.4rem; }
.c-form__field.-inline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } /* minmax(0,…) : input の固有幅で列が広がり横はみ出しするのを防ぐ */
.c-form__note { margin-top: 1.2rem; color: var(--c-khaki); font-size: var(--fs-13); line-height: 1.9; }
.c-form__note + .c-form__note { margin-top: 0; }
.c-contact.-embed { padding-top: 0; }
.c-contact.-embed .c-sechead { padding: 7.4rem 0 5rem; }
.c-contact.-embed .c-form { margin-top: 5.6rem; }
.c-form__submit { margin-top: 6.4rem; text-align: center; }

@media (min-width: 1024px) {
  .c-pagehead.-contact { padding-top: 10.1rem; }
  .c-pagehead.-contact .c-pagehead__lead { margin-top: .8rem; }
  .c-pagehead__link { margin-top: 2.9rem; text-align: center; }
  .c-pagehead__link .c-link { gap: 1.8rem; padding-bottom: .4rem; }

  .c-contact { padding: 7.8rem 0 12rem; }
  .c-steps { justify-content: center; gap: 5.6rem; }
  .c-steps__item { flex: none; width: 22.5rem; min-height: 4.8rem; font-size: var(--fs-14); }
  .c-steps__item + .c-steps__item::before { left: -3.4rem; }

  .c-form { width: 98.4rem; margin: 7.4rem auto 0; }
  .c-form__row { display: grid; grid-template-columns: 15.6rem minmax(0, 1fr); align-items: center; }
  .c-form__row + .c-form__row { margin-top: 1.8rem; }
  .c-form__row.-textarea { align-items: start; }
  .c-form__row.-textarea .c-form__label { display: block; padding: .1rem 1.6rem 0 0; line-height: 1.8; }
  .c-form__row.-textarea .c-form__req { display: inline-block; margin-right: .8rem; }
  .c-form__field { margin-top: 0; }
  .c-form__input { height: 4.1rem; font-size: var(--fs-14); }
  .c-form__input.-textarea { height: 29rem; }
  .c-form__policy { margin-top: 4.8rem; padding: 4.6rem 4.8rem; }
  .c-form__agree { margin-top: 1.7rem; text-align: center; }
  .c-form__row.-group { align-items: start; }
  .c-form__row.-group > .c-form__label { padding-top: .8rem; line-height: 1.8; }
  .c-form__row.-group > .c-form__label .c-form__req { margin-right: .5rem; }
  .c-form__choices { flex-direction: row; flex-wrap: wrap; gap: 1rem 3rem; padding-top: .9rem; }
  .c-form__sub { flex-wrap: nowrap; }
  .c-form__sub .c-form__input,
  .c-form__unit .c-form__input { flex: none; width: 30rem; }
  .c-form__sub .c-form__choices { width: auto; margin-left: 2.4rem; padding-top: 0; }
  .c-form__sub + .c-form__sub { margin-top: 1.7rem; }
  .c-form__field.-inline { display: flex; gap: 6.4rem; }
  .c-form__note { margin-top: 1.4rem; }
  .c-contact.-embed .c-sechead { padding: 8rem 0 6.6rem; }
  .c-contact.-embed .c-form { margin-top: 5rem; }
  .c-contact.-embed .c-form__input.-textarea { height: 24rem; }
  .c-form__row.-group,
  .c-form__row.-group + .c-form__row { margin-top: 2.4rem; }
  .c-form__submit { margin-top: 6.2rem; }
}

/* 19. Plan template components（貸切 / 顔合わせ / プロポーズ / キッズ … WP: page-plan.php 共通）
   すべてページ非依存のコンポーネント。ACF Flexible Content の1レイアウト = 1コンポーネント。
   ========================================================================== */
/* section head : 中央寄せの見出し + リード + 注記 */
.c-sechead { padding: 7.8rem var(--gutter) 2.6rem; text-align: center; }
.c-sechead__lead { margin-top: .8rem; font-family: var(--ff-jp); line-height: 1.8; }
.c-sechead__lead > span { display: inline-block; }
.c-sechead__notes { margin: 1.2rem -1.2rem 0; color: var(--c-text-en); font-family: var(--ff-jp); font-size: max(1.1rem, 10px); line-height: 2.2; letter-spacing: -.03em; }

/* intro : 左テキスト + 右写真（ABOUT） */
.c-intro { padding: 6.3rem var(--gutter) 0; }
.c-intro__lead { margin-top: 1.9rem; color: var(--c-text-en); font-family: var(--ff-jp); font-size: var(--fs-15); line-height: 1.93; font-weight: 500; }
.c-intro__text { margin-top: 3.8rem; font-family: var(--ff-jp); line-height: 1.8; }
.c-intro__text p + p { margin-top: 2.5rem; }
.c-intro__img { margin: 6.6rem calc(var(--gutter) * -1) 0; overflow: hidden; aspect-ratio: 400 / 267; }

/* rows : 写真 + テキストの行（POINT / CASE STUDY） */
.c-rows__list { border-top: 1px solid var(--c-line); }
.c-row { border-bottom: 1px solid var(--c-line); }
.c-row__img { overflow: hidden; aspect-ratio: 400 / 247; }
.c-row__body { padding: 1.8rem 4rem 6.4rem; }
.c-row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; color: var(--c-accent); font-family: var(--ff-en); font-size: 2rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.c-row__num { font-size: var(--fs-14); white-space: nowrap; }
.c-row__num b { font-size: 2rem; font-weight: 400; }
.c-row__lead { margin-top: 2rem; color: var(--c-text-en); font-family: var(--ff-jp); font-size: var(--fs-15); line-height: 1.8; font-weight: 500; }
.c-row__text { margin-top: 4rem; font-family: var(--ff-jp); line-height: 1.8; }
.c-row__text p + p { margin-top: 2.5rem; }
.c-row__link { margin-top: 2rem; }

/* cards : 3カラムのカード（貸切 POINT） */
.c-cards__list { border-top: 1px solid var(--c-line); }
.c-cards__item { padding: 4rem var(--gutter) 4.4rem; border-bottom: 1px solid var(--c-line); }
.c-cards__img { overflow: hidden; aspect-ratio: 380 / 234; }
.c-cards__title { margin-top: 2rem; color: var(--c-accent); font-family: var(--ff-en); font-size: 1.8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.c-cards__text { margin-top: 1rem; color: var(--c-text-en); font-family: var(--ff-jp); font-size: var(--fs-13); line-height: 1.8; }

/* plans : 写真カード。文字の可読性のため写真の下側に CSS グラデーションを重ねる */
.c-plan { display: block; position: relative; overflow: hidden; color: var(--c-white); }
.c-plan__open { position: absolute; inset: 0; z-index: 2; width: 100%; } /* カード全体をクリック領域に */
.c-plan__open:focus-visible { outline-offset: -4px; outline-color: var(--c-cream); }
.c-plan__img { display: block; aspect-ratio: 1 / 1; }
.c-plan__img img { transition: transform 1.6s var(--ease-out); }
.c-plan__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 14, .78) 0%, rgba(20, 17, 14, .45) 26%, rgba(20, 17, 14, 0) 58%);
  pointer-events: none;
}
.c-plan__body { display: block; position: absolute; left: var(--gutter); right: 1rem; bottom: 2.2rem; }
.c-plan__name { display: block; color: inherit; font-family: var(--ff-en); font-size: 2.4rem; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.c-plan__price { display: block; margin-top: .1rem; font-family: var(--ff-en); font-size: var(--fs-16); line-height: 1.5; letter-spacing: .02em; }
.c-plan__desc { display: block; margin-top: 2rem; padding-right: 7.4rem; font-family: var(--ff-jp); line-height: 1.8; }
.c-plan__more {
  position: absolute;
  right: 1rem; bottom: .3rem;
  width: 5.8rem; height: 3rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.c-plan__more::before,
.c-plan__more::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1px; margin: -.5px 0 0 -.5rem; background: currentColor; transition: transform .6s var(--ease-out); }
.c-plan__more::after { transform: rotate(90deg); }
@media (hover: hover) {
  .c-plan:hover .c-plan__img img { transform: scale(1.06); }
  .c-plan:hover .c-plan__more { background-color: var(--c-cream); color: var(--c-text-en); }
  .c-plan:hover .c-plan__more::before { transform: rotate(180deg); }
  .c-plan:hover .c-plan__more::after { transform: rotate(270deg); }
}

/* modal : プラン詳細。ヘッダーの下、右から出るパネル（<dialog>）。overlay は dialog 自身の背景
   show()（非モーダル）で開き、ヘッダーの下だけを覆う。ヘッダーのナビは開いたまま操作できる（背面の inert は main.js） */
.c-modal {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 95; /* ヘッダー（100）の下、本文の上 */
  width: 100%; height: auto;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  overflow: hidden;
  overflow: clip; /* hidden だとスクロール可能領域が残り、フォーカス時にブラウザが横スクロールさせてパネルが定位置に飛ぶ。clip はスクロール自体を作らない */
  border: 0;
  background: transparent;
  color: var(--c-text);
}
.c-modal::backdrop { background: transparent; }
/* 暗幕 : opacity だけを動かす（背景色のトランジションは毎フレーム再描画になり引っかかる） */
.c-modal::before {
  content: "";
  position: absolute;
  inset: 0; /* ダイアログ自体がヘッダーの下から始まるので、ヘッダーは暗くならない（カンプ準拠） */
  background: rgba(27, 26, 24, .55);
  opacity: 0;
  transition: opacity .6s var(--ease-in-out);
  will-change: opacity;
}
.c-modal.is-open::before { opacity: 1; transition: opacity .8s var(--ease-out); }
.c-modal__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-paper);
  transform: translate3d(100%, 0, 0);
  transition: transform .6s var(--ease-in-out); /* 閉じる : 右へ戻る */
  will-change: transform;
  backface-visibility: hidden;
}
.c-modal.is-open .c-modal__panel { transform: translate3d(0, 0, 0); transition: transform .85s var(--ease-out); } /* 開く : 右から左へ */
.c-modal__close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 2rem; right: var(--gutter);
  z-index: 2;
  width: 4.6rem; height: 4.6rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--c-text-en);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
}
.c-modal__close.-bottom { position: static; margin-top: 6.4rem; border-width: 1px 1px 0 0; border-color: var(--c-line); }
.c-modal__x { position: relative; width: 2rem; height: 1px; }
.c-modal__x::before,
.c-modal__x::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: rotate(22deg); transition: transform .6s var(--ease-out); }
.c-modal__x::after { transform: rotate(-22deg); }
@media (hover: hover) {
  .c-modal__close:hover { background-color: var(--c-text-en); color: var(--c-cream); }
  .c-modal__close:hover .c-modal__x::before { transform: rotate(-22deg); }
  .c-modal__close:hover .c-modal__x::after { transform: rotate(22deg); }
}
.c-modal__head { padding: 8.4rem var(--gutter) 0; }
.c-modal__title { color: var(--c-text-en); font-family: var(--ff-en); font-size: 2.4rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.c-modal__price { margin-top: .8rem; color: var(--c-text-en); font-size: var(--fs-14); line-height: 1.6; }
.c-modal__price small { font-size: var(--fs-12); }
.c-modal__text { margin-top: 3.6rem; font-family: var(--ff-jp); line-height: 1.8; }
.c-gallery.-modal { margin: 4.8rem 0 0; }
.c-gallery.-modal .c-gallery__track { height: 20rem; }
.c-modal__cols { display: grid; gap: 4.8rem; padding: 4.8rem var(--gutter) 0; font-family: var(--ff-jp); font-size: var(--fs-13); line-height: 1.77; }
.c-modal__label { color: var(--c-accent); font-family: var(--ff-en); font-size: var(--fs-14); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.c-modal__sub { margin-top: 1.4rem; color: var(--c-text-en); font-size: var(--fs-14); font-weight: 500; line-height: 1.8; }
.c-modal__list + .c-modal__sub { margin-top: 1.7rem; }
.c-modal__list { margin-top: 1.2rem; }
.c-modal__list > li { padding-left: 1em; text-indent: -1em; }
.c-modal__list > li::before { content: "・"; }
.c-modal__list > li > p { margin: .9rem 0 1rem; text-indent: 0; line-break: strict; } /* strict : 「ー」「ッ」等を行頭に置かない（カンプと同じ折り返し） */
.c-modal__group + .c-modal__group { margin-top: 6.8rem; }
.c-modal__defs > li + li { margin-top: 2.2rem; }
.c-modal__defs p { margin-top: .8rem; }
.c-modal__notes { margin-top: 5.6rem; padding: 3.6rem var(--gutter) 4rem; background: var(--c-box); font-family: var(--ff-jp); font-size: var(--fs-13); line-height: 1.77; }
.c-modal__notes .c-modal__sub { margin-top: 0; }
.c-modal__notes ul { margin-top: 1.8rem; }
.c-modal__cta { margin-top: 5.6rem; text-align: center; }
.no-js .c-modal,
.no-dialog .c-modal { display: block; position: static; background: none; }
.no-js .c-modal::before,
.no-dialog .c-modal::before { content: none; }
.no-js .c-modal__panel,
.no-dialog .c-modal__panel { position: static; width: auto; transform: none; }
.no-js .c-modal__close,
.no-dialog .c-modal__close,
.no-js .c-plan__open,
.no-dialog .c-plan__open { display: none; }

/* split : 左に見出し・右に内容（OPTION / PLANNER / DETAILS） */
.c-split { padding: 6.4rem var(--gutter) 5.6rem; border-bottom: 1px solid var(--c-line); }
.c-split.-top { border-bottom: 0; }
.c-split__label { color: var(--c-accent); font-family: var(--ff-en); font-size: 1.8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.c-split__lead { margin-top: 1.2rem; color: var(--c-khaki); font-family: var(--ff-jp); line-height: 1.8; }
.c-split__sub { margin-top: 1.4rem; color: var(--c-khaki); font-family: var(--ff-jp); font-size: var(--fs-13); }
.c-split__body { margin-top: 2rem; }
.c-split.-top .c-split__body { margin-top: 3.4rem; }

.c-items { display: grid; gap: 5.6rem; }
.c-item__img { overflow: hidden; aspect-ratio: 423 / 262; }
.c-item__body { margin-top: 1.8rem; font-family: var(--ff-jp); }
.c-item__name { color: var(--c-text-en); font-size: var(--fs-14); font-weight: 500; line-height: 1.8; }
.c-item__price { margin-top: .6rem; color: var(--c-text-en); font-family: var(--ff-base); font-size: var(--fs-14); line-height: 1.8; }
.c-item__price small { font-size: var(--fs-12); }
.c-item__text { margin-top: 2rem; line-height: 1.8; }
.c-item__note { margin-top: 1.2rem; color: var(--c-khaki); font-size: var(--fs-12); line-height: 1.8; }
.c-item__link { margin-top: 1.6rem; }

.c-box { margin-top: 4.8rem; padding: 2.4rem; border-radius: 2px; background: var(--c-box); font-family: var(--ff-jp); font-size: var(--fs-13); line-height: 1.77; }
.c-box__title { color: var(--c-text-en); font-size: var(--fs-14); font-weight: 500; }
.c-box__list { margin-top: 1rem; }
.c-box__list > * + * { margin-top: 1rem; }
.c-box__list dt { font-weight: 500; }
ul.c-box__list > * + * { margin-top: 0; }

.c-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
.c-rooms__img { display: block; overflow: hidden; aspect-ratio: 279 / 173; }
.c-rooms figcaption { margin-top: 1.4rem; color: var(--c-text-en); font-family: var(--ff-jp); font-size: var(--fs-14); font-weight: 500; }
.c-spec > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); padding: 2.2rem 0 .5rem; border-bottom: 1px solid var(--c-line); }
.c-spec dt { color: var(--c-text-en); font-weight: 500; }

/* flow : 番号付きステップ。SPは横スクロール、PCは4カラム */
.c-flow { padding-bottom: 5.6rem; border-bottom: 1px solid var(--c-line); }
.c-flow__scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.c-flow__scroll::-webkit-scrollbar { display: none; }
.c-flow__list { display: flex; gap: 1.6rem; width: max-content; padding: 0 var(--gutter); }
.c-flow__item { position: relative; flex: none; width: 32.2rem; padding: 3.6rem 4rem 4.8rem; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-box); scroll-snap-align: start; }
.c-flow__num { color: var(--c-accent); font-family: var(--ff-en); font-size: 5.6rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; opacity: .78; }
.c-flow__title { margin-top: 1.8rem; color: var(--c-khaki); font-family: var(--ff-jp); font-size: var(--fs-14); font-weight: 400; }
.c-flow__text { margin-top: 3.6rem; font-family: var(--ff-jp); line-height: 1.8; }

/* cta */
.c-cta { display: flex; justify-content: center; gap: 4rem; padding: 8rem var(--gutter) 12rem; }

@media (min-width: 1024px) {
  .c-sechead { padding: 11.8rem var(--gutter) 2.1rem; }
  .c-sechead__lead { margin-top: .6rem; }
  .c-sechead__notes { margin-inline: 0; font-size: var(--fs-12); letter-spacing: -.02em; }

  .c-intro { display: grid; grid-template-columns: minmax(0, 1fr) 70.8rem; min-height: 80.9rem; padding: 0; }
  .c-intro__body { align-self: center; width: 57.6rem; padding: 4rem 0 4rem 15.1rem; }
  .c-intro__lead { margin-top: 2.4rem; font-size: var(--fs-16); }
  .c-intro__img { margin: 0; aspect-ratio: auto; }

  .c-row { display: grid; grid-template-columns: 50% minmax(0, 1fr); min-height: 44.5rem; }
  .c-row__img { aspect-ratio: auto; }
  .c-row__body { align-self: center; padding: 4rem 10rem 4rem 6.4rem; }
  .c-row__lead { margin-top: 2.2rem; }
  .c-row__text { margin-top: 4rem; }

  .c-cards .c-sechead { padding-bottom: 3.6rem; }
  .c-cards__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--c-line); } /* 件数可変 */
  .c-cards__item { padding: 4rem var(--gutter) 4.4rem; border-bottom: 0; }
  .c-cards__item + .c-cards__item { border-left: 1px solid var(--c-line); }

  .c-modal__panel { width: 82.2rem; }
  .c-modal__close { top: 5.1rem; }
  .c-modal__head { padding: 5.8rem 10rem 0; }
  .c-modal__title { font-size: 2.8rem; }
  .c-modal__price { margin-top: 1.2rem; }
  .c-modal__text { margin-top: 3.8rem; }
  .c-gallery.-modal { margin-top: 6.4rem; }
  .c-gallery.-modal .c-gallery__track { height: 29.9rem; }
  .c-modal__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6.1rem; padding: 6rem 6rem 0 6.4rem; }
  .c-modal__notes { margin-top: 6.2rem; padding: 4.2rem 6.4rem 3.6rem; }
  .c-modal__cta { margin-top: 6.4rem; }
  .c-modal__close.-bottom { margin-top: 8rem; }
  .c-plans__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* 件数可変 */
  .c-plan__img { aspect-ratio: 480 / 640; }
  .c-plan__body { left: 4rem; right: 4rem; bottom: 4.4rem; }
  .c-plan__more { right: 0; }
  .c-plan__desc { padding-right: 8rem; }

  .c-split { display: grid; grid-template-columns: 45.5rem minmax(0, 1fr); padding: 8rem var(--gutter) 5.6rem; }
  .c-split.-line { padding-block: 6.4rem; }
  .c-split.-top { padding-block: 9.6rem 3.2rem; }
  .c-split__label { font-size: 2rem; }
  .c-split__lead { margin-top: 1.4rem; }
  .c-split__body,
  .c-split.-top .c-split__body { margin-top: 0; }
  .c-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .c-items.-single { grid-template-columns: minmax(0, 1fr); }
  .c-items.-single .c-item { display: grid; grid-template-columns: 42.3rem minmax(0, 1fr); gap: 4rem; }
  .c-items.-single .c-item__body { margin-top: 2rem; }
  .c-item__body { margin-top: 2rem; }
  .c-item__text { margin-top: 2.4rem; }
  .c-box { display: grid; grid-template-columns: 14.6rem minmax(0, 1fr); padding: 2.4rem 3rem 2.4rem 3.5rem; }
  .c-box.-spec { display: block; padding: 1.6rem 4rem 4rem; }
  .c-box__title { padding-top: .8rem; }
  .c-box__list { margin-top: 0; }
  .c-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }

  .c-flow { padding-bottom: 6.8rem; }
  .c-flow__scroll { overflow: visible; }
  .c-flow__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: auto; } /* 件数可変 */
  .c-flow__item { width: auto; border: 0; }
  .c-flow__text { margin-top: 3.4rem; }
  .c-flow__item { padding-bottom: 3.6rem; }
}

/* 20. Tablet adjust / Reduced motion / Print
   ========================================================================== */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .p-menu__media { aspect-ratio: 807 / 571; }
  .p-guide__media { aspect-ratio: 620 / 349; }
  .c-topics.-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-topics.-archive .c-topics__item:nth-child(2n+1) { border-right: 1px solid var(--c-line); }
  .c-concept__text { max-width: 56rem; margin-inline: auto; }
  .c-kv__pickup { left: auto; width: 36rem; }
  .c-kv__place { left: auto; right: var(--gutter); }
  .p-article { max-width: 72rem; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .c-kv__slide img { transform: none !important; animation: none !important; }
  .c-kv__scroll .ico-arrow { animation: none; }
  .c-gallery__track { animation: none !important; }
  .c-flow__scroll { scroll-snap-type: none; }
  .c-gallery__viewport { overflow-x: auto; }
}

@media print {
  .c-faq__panel { grid-template-rows: 1fr !important; visibility: visible !important; }
  .c-faq__a { opacity: 1 !important; transform: none !important; }
  .p-about-features.is-stack { height: auto !important; }
  .is-stack .p-about-features__stage { display: block !important; position: static !important; height: auto !important; }
  .is-stack .p-about-feature * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .c-gallery__track { flex-wrap: wrap; width: auto !important; height: auto !important; animation: none !important; transform: none !important; }
  .c-gallery__item[aria-hidden="true"], .c-modal, .c-plan__open { display: none !important; }
  .l-header, .l-drawer, .skip-link, .c-arrows, .c-kv__ctrl { display: none !important; }
  .js [data-reveal], .js [data-reveal="image"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}


/* ==========================================================================
   WordPress 用の追加スタイル
   ========================================================================== */
/* プラン詳細モーダル : WYSIWYG（見出し3 = 赤ラベル / 見出し4 = 小見出し / 箇条書き = 項目 / 段落 = 説明） */
.c-modal__rich h3 { color: var(--c-accent); font-family: var(--ff-en); font-size: var(--fs-14); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.c-modal__rich h3:not(:first-child) { margin-top: 6.8rem; }
.c-modal__rich h4 { margin-top: 1.4rem; color: var(--c-text-en); font-size: var(--fs-14); font-weight: 500; line-height: 1.8; }
.c-modal__rich h4 + h4 { margin-top: 2.2rem; }
.c-modal__rich p + h4, .c-modal__rich ul + h4 { margin-top: 1.7rem; }
.c-modal__rich ul { margin-top: 1.2rem; }
.c-modal__rich ul + ul { margin-top: 0; }
.c-modal__rich ul > li { padding-left: 1em; text-indent: -1em; }
.c-modal__rich ul > li::before { content: "・"; }
.c-modal__rich p { margin-top: .8rem; line-break: strict; }
.c-modal__rich ul + p { margin: .9rem 0 1rem; padding-left: 1em; }
/* 入力画面だけ / 確認画面だけ 表示する（既存フォームの flow01 / flow02 に相当）
   レイアウト側の指定（.c-form__pair.-stack > span など）より詳細度が低くなるため、
   表示の切り替えは !important で確実に効かせる */
.mw_wp_form_confirm .u-input-only,
.mw_wp_form_input .u-confirm-only,
.mw_wp_form_complete .u-confirm-only { display: none !important; }

/* MW WP Form のエディタは保存時に自動整形（wpautop）で <p> や <br> を差し込むことがある。
   行のレイアウトはグリッドなので、余計な要素が増えると列がずれる。
   ラベルと入力欄の列を明示し、差し込まれた空要素は消して崩れないようにする */
.c-form__row > .c-form__label { grid-column: 1; }
.c-form__row > .c-form__field { grid-column: 2; }
.c-form__row > p:empty,
.c-form__row > br,
.c-form__field > p:empty,
.c-form__field > br { display: none; }

/* フォーム冒頭の案内文 */
.c-form__lead { margin-bottom: 3.2rem; font-size: var(--fs-14); line-height: 2; }
.c-form__lead p + p { margin-top: 1.2rem; }
.c-form__lead small { font-size: var(--fs-12); }

/* 「お名前（フリガナ）」「メールアドレス（確認用）」… 2つの欄を1行に。
   確認画面では括弧を出して「太郎（タロウ）」と読めるようにする */
.c-form__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
/* 横並びのときだけ幅を分け合う。縦積み（-stack）で指定すると flex-basis が「高さ」になり、
   入力欄が18rem の高さに伸びてしまうため :not(.-stack) で限定する */
.c-form__pair:not(.-stack) > .c-form__input { flex: 1 1 18rem; min-width: 0; }
.c-form__pair.-stack { flex-direction: column; align-items: stretch; }
.c-form__pair.-stack > .c-form__input,
.c-form__pair.-stack > span { flex: 0 0 auto; display: block; }
.c-form__paren { display: none; }
.mw_wp_form_confirm .c-form__pair { gap: 0; }
.mw_wp_form_confirm .c-form__paren { display: inline; }

/* 見出し列の幅
   デザイン時のラベル（お名前・電話番号など）に合わせて 15.6rem にしていたが、
   実際のフォームには「ご検討中のコース・オプション」のような長いラベルがあり、
   2行に折り返して窮屈になるため広げる */
@media (min-width: 1024px) {
  .c-form__row { grid-template-columns: 24rem minmax(0, 1fr); }
}

/* 電話番号は桁数があるので通常幅にする。
   すでに貼り付け済みのフォームに -short が残っていても効くよう、id で指定している */
.c-form__unit > .c-form__input#tel { flex: 1 1 auto; width: 100%; max-width: 30rem; }

/* 希望日の時間帯（ランチ / ディナー）
   内容の幅で並べると行ごとに数pxずれて見えるため、固定幅の2列にそろえる */
.c-form__sub .c-form__choices {
  display: grid;
  grid-template-columns: repeat(2, 14rem);
  gap: .6rem 1.2rem;
}
.c-form__sub .c-form__choices > * { min-width: 0; }

/* 数量など短い入力欄 */
.c-form__input.-short { flex: none; width: 12rem; }   /* flex コンテナ内なので flex も止める */

/* 日付欄（MW WP Form の datepicker）
   MW WP Form が読み込むのは jQuery UI の **JavaScript だけ**で、見た目のCSSは付いてこない。
   そのままだとカレンダーが枠も背景も無い素のHTMLで出てしまうため、ここで用意する。 */
/* デザイン側はブラウザ標準の日付入力に合わせて「プルダウンの記号」を出しているが、
   WordPress では MW WP Form のカレンダー（テキスト入力）なので、日付のアイコンに差し替える */
.c-form__input.-date {
  max-width: 20rem;
  padding-right: 3.6rem;
  cursor: pointer;
  background: var(--c-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23444138' stroke-width='1'%3E%3Crect x='.5' y='2.5' width='15' height='13' rx='1'/%3E%3Cpath d='M.5 6.5h15M4.5.5v3M11.5.5v3'/%3E%3C/svg%3E") no-repeat right 1.2rem center / 1.6rem auto;
}

.ui-datepicker {
  display: none;
  z-index: 100 !important;
  width: 28rem;
  padding: 1.2rem;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  font-family: var(--ff-base);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--c-text);
}
.ui-datepicker-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.2rem; margin-bottom: .6rem; }
.ui-datepicker-title { display: flex; gap: .8rem; }
.ui-datepicker-title select { height: 3rem; padding: 0 .4rem; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-cream); color: var(--c-text); font-size: var(--fs-13); }
/* 前月 / 次月（文字は隠して矢印を描く） */
.ui-datepicker-prev, .ui-datepicker-next { position: absolute; top: 50%; width: 2.8rem; height: 2.8rem; margin-top: -1.4rem; border-radius: 50%; cursor: pointer; overflow: hidden; text-indent: -999em; }
.ui-datepicker-prev { left: 0; }
.ui-datepicker-next { right: 0; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { background: var(--c-box); }
.ui-datepicker-prev::before, .ui-datepicker-next::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem;
  border-top: 1px solid var(--c-text-en); border-right: 1px solid var(--c-text-en);
}
.ui-datepicker-prev::before { margin: -.4rem 0 0 -.2rem; transform: rotate(-135deg); }
.ui-datepicker-next::before { margin: -.4rem 0 0 -.6rem; transform: rotate(45deg); }
.ui-datepicker .ui-icon { display: none; }
/* 日付の表 */
.ui-datepicker-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ui-datepicker-calendar th { padding: .4rem 0; font-size: var(--fs-12); font-weight: 400; text-align: center; }
.ui-datepicker-calendar td { padding: .1rem; text-align: center; }
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; margin: 0 auto; border-radius: 50%;
  color: var(--c-text); text-decoration: none;
}
.ui-datepicker-calendar tr > th:first-child,
.ui-datepicker-calendar tr > td:first-child a { color: var(--c-accent); }
.ui-datepicker-calendar tr > th:last-child,
.ui-datepicker-calendar tr > td:last-child a { color: #1a5fb4; }
.ui-datepicker-calendar td a:hover { background: var(--c-box); }
/* 今日 / 選択中 / 選べない日 */
.ui-datepicker-calendar td .ui-state-highlight { box-shadow: inset 0 0 0 1px var(--c-accent); }
.ui-datepicker-calendar td .ui-state-active { background: var(--c-khaki); color: var(--c-cream); }
.ui-datepicker-calendar td.ui-state-disabled span { color: var(--c-placeholder); }

/* 確認画面の確認文 */
.c-form__check { margin-top: 2.4rem; font-size: var(--fs-14); line-height: 1.8; text-align: center; }

/* 完了画面（MW WP Form の「完了画面メッセージ」に貼る内容） */
.c-form__done { text-align: center; }
.c-form__done-title { margin-bottom: 2.4rem; font-size: var(--fs-16); font-weight: 700; line-height: 1.8; }
.c-form__done p + p { margin-top: 1.6rem; }

/* MW WP Form の出力をデザインに合わせる（フォームの雛形は docs/mw-wp-form.md、連携処理は inc/form.php） */
.mw_wp_form .horizontal-item + .horizontal-item,
.mw_wp_form .vertical-item + .vertical-item { margin: 0 !important; } /* プラグインCSSの余白を打ち消し、.c-form__choices の gap に任せる（プラグイン側が後から読み込まれるため !important） */
.mw_wp_form .mwform-radio-field,
.mw_wp_form .mwform-checkbox-field { display: block; }
.mw_wp_form .mwform-radio-field label,
.mw_wp_form .mwform-checkbox-field label { display: inline-flex; align-items: center; gap: 1.2rem; cursor: pointer; text-transform: uppercase; } /* 選択肢の英字はCSSで大文字表示（HTMLは大文字+小文字） */
.mw_wp_form .error { display: block; margin-top: .6rem; color: var(--c-accent); font-size: var(--fs-12); line-height: 1.6; }
/* エラー文は日付欄・単位付き欄（flex）の中に出力されるため、行を変えて入力欄を潰さないようにする。
   単位付き欄（大人／こども）は2カラムに収めるため折り返しできないので、inc/form.php の JS がエラー文を欄の外へ移動する */
.c-form__sub { flex-wrap: wrap; }
.no-js .c-form__unit { flex-wrap: wrap; } /* JS無効時の保険（JSが動く環境ではエラー文は欄の外に出る） */
.c-form__sub .error, .c-form__unit .error { flex: 0 0 100%; margin-top: .2rem; }
.c-steps { scroll-margin-top: calc(var(--header-h) + 2.4rem); } /* 確認・完了・エラー時に inc/form.php の JS がここまでスクロールする */
/* 確認画面 : 入力値がテキストで出力される。方針文・注意書き・必須マークは隠す */
.mw_wp_form_confirm .c-form__field { font-size: var(--fs-14); line-height: 1.8; }
.mw_wp_form_confirm .c-form__choices { text-transform: uppercase; } /* 確認画面は label が無くテキストだけになるため、選択肢の行はここで大文字化（氏名・メール等は対象外） */
/* 確認画面
   入力欄が消えて文字だけになるため、行ごとに区切り線を引いて表のように読めるようにする。
   全フォーム共通で効きます（フォーム側の貼り付け内容は変えていません）。 */
.mw_wp_form_confirm .c-form__policy,
.mw_wp_form_confirm .c-form__note,
.mw_wp_form_confirm .c-form__agree { display: none; }
/* 必須バッジ : -textarea の行だけデザイン側で表示指定があるため、詳細度を上げて消す */
.mw_wp_form_confirm .c-form__req,
.mw_wp_form_confirm .c-form__row.-textarea .c-form__req { display: none; }

.mw_wp_form_confirm .c-form__rows { border-top: 1px solid var(--c-line); }
.mw_wp_form_confirm .c-form__row {
  align-items: start;
  margin-top: 0;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--c-line);
}
.mw_wp_form_confirm .c-form__row + .c-form__row { margin-top: 0; }
.mw_wp_form_confirm .c-form__label { color: var(--c-khaki); }
.mw_wp_form_confirm .c-form__label,
.mw_wp_form_confirm .c-form__sublabel { font-weight: 400; }
.mw_wp_form_confirm .c-form__field { font-size: var(--fs-14); line-height: 1.8; }
/* 未入力の項目は「—」を出して、空欄との区別をつける */
.mw_wp_form_confirm .c-form__field:empty::before { content: "—"; color: var(--c-khaki); }
/* 希望日など複数行の項目は行間をつめる */
.mw_wp_form_confirm .c-form__sub { gap: .4rem 1.6rem; }
.mw_wp_form_confirm .c-form__sub + .c-form__sub { margin-top: .6rem; }
.mw_wp_form_confirm .c-form__choices { gap: .4rem 2.4rem; padding-top: 0; }
.mw_wp_form_confirm .c-form__unit { gap: .4rem; }
.mw_wp_form_confirm .c-form__check { margin-top: 3.2rem; }
/* 完了画面 : 「完了画面メッセージ」がそのまま出力される */
.mw_wp_form_complete { margin-top: 4.8rem; font-size: var(--fs-14); line-height: 2; text-align: center; }
.mw_wp_form_complete p + p { margin-top: 1.6rem; }
/* 送信・戻るボタン : MW WP Form は <input type="submit"> しか出せないため、.c-btn のラッパー（.-input）の中に置く。ラッパーのクリックは inc/form.php の JS で input に渡す */
.c-form__submit { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.c-btn.-input input { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.c-btn.-input input:focus-visible { outline: 0; }
.c-btn.-input:focus-within { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.c-btn.-input:empty { display: none; } /* 戻るボタンは確認画面でしか出力されない（:empty 判定のため、戻るボタンのラッパーにはアイコンを入れない） */
.c-btn.-input .ico-arrow, .c-btn.-input .ico-dots { pointer-events: none; }
.c-btn.-input.-back { background: transparent; color: var(--c-text-en); box-shadow: inset 0 0 0 1px var(--c-line-dark); }
.c-btn.-input.-back::before { background: var(--c-field); }
/* ログイン中の管理バーぶん、固定ヘッダーを下げる */
@media (min-width: 1024px) {
  .c-form__sub { flex-wrap: wrap; } /* style.css の nowrap を戻す（上のエラー行のため。通常時は1行に収まるので見た目は変わらない） */
  .c-form__row > .error { grid-column: 2; margin-top: .6rem; } /* 単位付き欄から移動してきたエラー文（入力欄の下） */
}
@media (min-width: 783px) {
  .admin-bar .l-header, .admin-bar .l-drawer { top: 32px; }
}
/* 管理者にだけ見える案内 */
.oat-admin-note { margin: 0 0 2.4rem; padding: 1.2rem 1.6rem; border: 1px dashed var(--c-accent); color: var(--c-accent); font-size: var(--fs-12); line-height: 1.7; text-align: left; }