@charset "UTF-8";
/* ============================================================
   完成見学会LP（/lp/202610-openhouse/）
   単体で完結する静的ページ。テーマのCSSは読み込まない。
   /lp/001/ と同じ作りに合わせてある（:root にトークン・接頭辞なしの kebab-case）。

   色と級数の出典は Figma「完成見学会LP / PC 1440px」(293:2) と
   「/ SP 375px」(292:2) の実値。トークン名はテーマの
   assets/scss-add/_tokens-2026.scss と対応する（--nh- 接頭辞は
   テーマ内の衝突回避が目的なので、単独ページでは付けない）。

   ブレークポイントは 960px の1本だけ。基準はSPで、960px以上でPCに切り替える。
   index.html の <picture> の media も 959px で揃えてあるので、片方だけ変えないこと。
   （テーマ側は 767/1024 系だが、このLPはテーマのCSSを読まないので揃える必要はない）
============================================================ */

:root {
  --teal:      #0D9488;  /* 主CTA・アクセント */
  --teal-deep: #0F766E;  /* 来場特典の背景グラデーション（濃い側） */
  --ink:       #141816;  /* 基本の文字色 */
  --ink-2:     #262C29;  /* 本文 */
  --ink-3:     #3A3A3A;  /* 小さい本文・最終CTAの地色 */
  --black:     #2B2A2E;  /* フッタの地色・ロゴ */
  --muted:     #999999;  /* 注釈 */
  --muted-2:   #545B57;  /* 電話の受付時間 */
  --line:      #CFCFCF;  /* 罫線 */
  --line-soft: rgba(20, 24, 22, 0.1); /* ご案内の定義リストの罫線 */
  --paper:     #F6F3ED;  /* セクションの地色 */
  --soft:      #F5F4F1;  /* 第2ボタンの地色 */
  --white:     #FFFFFF;

  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  /* 数字（電話番号・日付・「?」・英字ラベル）は Figma が Helvetica 指定 */
  --num: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif-en: "Libre Baskerville", Georgia, serif;

  --gutter: 16px;   /* SPの左右余白。PCで 40px に切り替える */
  /* ⚠️ SP帯の中身は 640px で頭打ちにする。960px 直前まで1カラムのまま伸ばすと、
        縦長の写真（343:480）が画面幅いっぱいに育ってページ全高が1.4倍になる
        （959pxで実測 14143px → 頭打ちありで約1万px）。PCで 1200px に上げる。 */
  --maxw: 640px;

  /* 引用まわりの十字マーク。Figma の Vector（M0 16H64M15.2 0V64 / stroke #999999）そのまま */
  --quote-mark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path d="M0 16H64M15.2 0V64" stroke="%23999999"/></svg>');
}

/* ------------------------------------------------------------
   土台
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  /* SPは画面下の追従バーぶん、最後まで読めるように空ける */
  padding-bottom: 64px;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 700; }

a:focus-visible, :focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* 見た目には出さず、支援技術にだけ渡す。
   ⚠️ position:absolute なので flex の子でも gap を増やさない（FVの h1 がこれ）。
   ⚠️ display:none や visibility:hidden は読み上げからも消えるので使わない。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px; top: 8px; z-index: 100;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--ink);
}

/* ⚠️ --maxw は「中身の幅」。左右の余白は外側に足すので max-width に gutter×2 を含める。
      var(--maxw) だけにすると、広い画面で中身が 1200px より狭くなる。 */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 64px; }
.section-sm { padding-block: 48px; }
.section-paper { background: var(--paper); }

.center { text-align: center; }

/* SPだけの改行。見出し・引用は Figma の SP 版で改行位置が決まっているので、
   自動折り返しに任せると語の途中で折れる（「全力/の家。」など）。 */
.br-sp { display: inline; }

/* 縦の間隔だけを持つ入れ物。Figma の gap をそのまま名前にしている */
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-40 > * + * { margin-top: 24px; }
.stack-48 > * + * { margin-top: 32px; }
.stack-80 > * + * { margin-top: 48px; }
.stack-120 > * + * { margin-top: 64px; }

/* ------------------------------------------------------------
   ボタン
------------------------------------------------------------ */
/* SPでは縦積み。PC（960px以上）で横並びに戻す。
   ⚠️ 追従バーだけは SP でも横並び（小さいボタン2つ） */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stickybar .btn-row { flex-direction: row; gap: 4px; }
.btn-row-fill > .btn { flex: 1 1 0; min-width: 0; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: filter .2s;
}
.btn:hover { filter: brightness(.94); }

.btn-primary { background: var(--teal); color: var(--white); }
.btn-dark    { background: var(--ink);  color: var(--white); }
.btn-quiet   { background: var(--soft); color: var(--ink); }

.btn-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.btn-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.btn-tel-num {
  font-family: var(--num);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.btn-tel-hours {
  font-family: var(--num);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

/* ヘッダー・追従バーの小さい方 */
.btn-sm {
  min-height: 40px;
  gap: 8px;
  font-size: 12px;
}
.btn-sm .btn-icon { width: 16px; height: 16px; }
.btn-sm .btn-tel-num { font-size: 14px; }

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo img { width: 116px; height: auto; }

/* SPではヘッダーのボタンを出さない（画面下の追従バーが受け持つ） */
.header-btns { display: none; }

/* ------------------------------------------------------------
   FV
   PCでは日程バーがFVの下辺に重なる。SPではFVの下に積む。
   PCは .hero-wrap をグリッドにして同じマスに重ね、
   日程バーを align-self:end で下寄せする（高さの決め打ちが要らない）。
------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  min-height: 664px;
  padding: 32px var(--gutter);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SPは「縦書き2枚が右上 → バッジ → リード → ボタン → 注釈」の縦一列。
   PCでは横並び（左=本文／右=縦書き2枚）に切り替える。 */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}
.hero-main {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
}
.hero-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.hero-badge {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}
.hero-lead {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.hero-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* SPでは右上に置く。order で DOM を触らずに先頭へ回す。
   ⚠️ align-items: flex-start は必須。既定の stretch だと2枚の白箱が
      高い方に揃ってしまうが、Figma は上端を揃えて**高さは字数ぶんのまま**
      （「全力の家」184px ／「好きなことに」260px）。 */
.hero-tags {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  order: -1;
  align-self: flex-end;
}
/* ⚠️ 縦書きでは line-height が「行の横幅」、letter-spacing が「字送り」になる。
      Figma は1文字ずつ行を分けて line-height 1.2 で送っているので、
      横幅＝字面 32px・字送り 38.4px。CSSで同じ形にするには
      line-height: 1（横幅を字面ぴったりに）＋ letter-spacing: 0.2em（送りを1.2倍に）。
      line-height を 1.2 のままにすると箱が横に 6px 太る。 */
.vtag {
  writing-mode: vertical-rl;
  background: var(--white);
  color: var(--black);
  border-radius: 2px;
  padding: 16px 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
}

/* --- 日程バー ---
   ⚠️ 日付と時刻は PC でも縦並び（SPと同じ）。横並びにしない。 */
.eventbar { background: var(--white); }
.eventbar-inner {
  display: flex;
  flex-direction: column;
  max-width: var(--maxw);
  margin-inline: auto;
}
.eventdate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px var(--gutter);
  color: var(--ink);
}
.eventdate-days {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eventdate-month,
.eventdate-day {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--num);
  font-weight: 400;
  line-height: 1;
}
.eventdate-month { font-size: 24px; align-items: flex-start; }
.eventdate-day { font-size: 48px; }
/* 「10 / 」の斜線。Figma の Vector 1（M16.47 .17L.47 44.17 / stroke #141816） */
.eventdate-slash {
  display: block;
  width: 16px;
  height: 44px;
  margin-left: 4px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="45" fill="none"><path d="M16.47 0.17L0.47 44.17" stroke="%23141816"/></svg>') no-repeat center / contain;
}
/* ⚠️ 曜日は数字の高さの中央に揃える。1行（土・日）も2行（月/祝）も center なので、
      3つとも同じ中心線に乗る。flex-end にすると2行ぶんの高さの差で
      「月/祝」だけ上へ 7.6px ずれて見える。 */
.eventdate-dow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  align-self: center;
}
.eventdate-time {
  font-family: var(--num);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.eventfacts {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 24px var(--gutter);
  border-top: 1px solid var(--line);
}
.eventfacts li {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   引用（十字マークで囲む）
------------------------------------------------------------ */
.quote-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ⚠️ 左右余白は幅に追従させる（SP 24px 〜 PC 64px）。段階では切らない。
      ・Figma は行末の字間を数えないが、CSSは最後の1字のあとにも字間（0.12em）を足す。
        SPで 32px 固定にすると「ノイズレスな空間に」が2px はみ出し、
        「に」だけが4行目に落ちる。24px まで詰めて逃がしている。
      ・PCで 64px 固定にすると、960px のとき
        「できる限り、ノイズレスな空間にしたかった。」の余裕が2pxしか無くなる。
        clamp なら 960px で約42px・1440px で約64px（Figma通り）になる。
      ⚠️ 引用は「入るかどうか」が行数に直結する。級数・字間・文言を変えたら
         必ず各行の実幅と余裕を測り直すこと。 */
.quote {
  position: relative;
  padding: 40px clamp(24px, 4.45vw, 64px);
  color: var(--ink);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-align: center;
}
.quote::before,
.quote::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  background: var(--quote-mark) no-repeat center / contain;
  pointer-events: none;
}
.quote::before { top: 0; left: 0; }
.quote::after  { bottom: 0; right: 0; transform: rotate(180deg); }

.quote-source {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
}

.lead {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.lead-strong { font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------
   写真と本文
------------------------------------------------------------ */
.figure { display: flex; flex-direction: column; gap: 8px; }

.figure-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #E9E6DF;
}
.figure-media > picture > img,
.figure-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure-media-tall { aspect-ratio: 1 / 1; }

.figure-captions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 24px;
}
.figure-caption {
  background: var(--white);
  border-radius: 2px;
  padding: 8px 16px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.prose { display: flex; flex-direction: column; gap: 16px; }
.prose p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   特集（料理・ゲーム・テレビ）
------------------------------------------------------------ */
.feature { display: flex; flex-direction: column; gap: 24px; }

.feature-media { aspect-ratio: 343 / 480; }

/* ⚠️ 上寄せ。PC・SPとも Figma はチップを写真の左上に置いている（中央寄せではない）。
      写真側に焼き込まれた暗幕の位置と合わせる必要があるので、動かさないこと。 */
.feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding: 16px;
}
.feature-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  height: 120px;
  padding: 8px;
  background: var(--white);
  border-radius: 2px;
  line-height: 1;
}
.feature-chip-en {
  font-family: var(--num);
  font-size: 16px;
  color: var(--teal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feature-chip-ja {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.feature-headline {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   寝室 / 子ども部屋
------------------------------------------------------------ */
.duo {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.duo-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 24px;
}
.duo-item + .duo-item { border-top: 1px solid var(--line); }

.duo-label {
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}
.duo-body { display: flex; flex-direction: column; gap: 8px; }
.duo-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.duo-text {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.closing {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ------------------------------------------------------------
   1組ずつ、90分の貸し切りです
------------------------------------------------------------ */
.private { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.private-head { display: flex; flex-direction: column; gap: 24px; }
.private-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.private-text {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.qlist { display: flex; flex-direction: column; gap: 2px; }
.qitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--white);
  border-radius: 200px;
}
.qitem-text {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.qitem-line {
  flex: 1 1 0;
  min-width: 16px;
  height: 1px;
  background: var(--line);
}
.qitem-mark {
  flex-shrink: 0;
  font-family: var(--num);
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ------------------------------------------------------------
   完成見学会のご案内
------------------------------------------------------------ */
.section-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.info-cols { display: flex; flex-direction: column; gap: 32px; }

.dl { border-top: 1px solid var(--line-soft); }
.dl-row {
  display: flex;
  gap: 8px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.dl-key {
  flex-shrink: 0;
  width: 72px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.dl-val {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.howto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line-soft);
}
.howto-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
}
/* 手順と、番号の付かない補足を 1 ブロックにまとめる。
   .howto の 24px ではなく手順どうしと同じ 8px でつなぐため、入れ子にしている */
.howto-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 番号は Figma と同じ「1.」の形。ぶら下げにせず本文と同じ左端から始める */
.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: howto;
}
.howto-steps li {
  counter-increment: howto;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.howto-steps li::before { content: counter(howto) "."; }
/* 番号なしの補足。手順と同じ級数・行送りで、続きとして読ませる */
.howto-add {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.howto-note {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   来場特典（ヒーリングフォレストカフェ）
------------------------------------------------------------ */
.gift {
  position: relative;
  padding-block: 64px;
  background-image:
    linear-gradient(108.75deg, rgba(15, 118, 110, 0.94) 7.92%, rgba(13, 148, 136, 0.88) 92.08%),
    url('assets/cafe-main.webp');
  background-size: cover;
  background-position: center;
  background-color: var(--teal);
}

.gift-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.gift-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.gift-tag {
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
  padding: 8px 16px;
  font-family: var(--num);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.gift-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
/* 見出しを挟む ＼ ／。Figma の Vector 5 / 6（M0.43 0.26L12.43 20.26 / stroke #0D9488） */
.gift-mark {
  flex-shrink: 0;
  width: 12px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="21" fill="none"><path d="M0.43 0.26L12.43 20.26" stroke="%230D9488"/></svg>') no-repeat center / contain;
}
/* 素材そのままが「＼」。右側だけ反転して「／」にする */
.gift-mark-r { transform: scaleX(-1); }

.gift-title {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.gift-text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
}
.gift-photo { aspect-ratio: 16 / 10; }
.gift-photo img { width: 100%; height: 100%; object-fit: cover; }

.gift-list { display: flex; flex-direction: column; gap: 16px; }
.gift-item { display: flex; flex-direction: column; gap: 8px; }
.gift-item-media { aspect-ratio: 400 / 240; }
.gift-item-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-item-title {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.gift-item-note {
  color: var(--white);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.gift-shop { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gift-shop-info {
  color: var(--white);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
.gift-links { display: flex; align-items: center; justify-content: center; gap: 16px; }
.gift-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
.gift-link:hover { text-decoration: underline; }
/* ⚠️ SNSロゴは商標。テーマと同じ公式素材（icon-*.webp）を、同じ当て込み方で置いている。
      Instagram の公式素材は角丸が付いていない正方形なので、この border-radius で丸める。 */
.gift-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.gift-icon-instagram { background-image: url('assets/icon-instagram.webp'); }
.gift-icon-tabelog   { background-image: url('assets/icon-tabelog.webp'); }

.gift-note {
  color: var(--white);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ------------------------------------------------------------
   ご来場にあたって
------------------------------------------------------------ */
.notes-title {
  color: var(--ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.notelist li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.notelist li:last-child { border-bottom: 1px solid var(--line); }
.notelist-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--teal);
}

/* ------------------------------------------------------------
   最終CTA
------------------------------------------------------------ */
.final {
  position: relative;
  background: var(--ink-3);
  overflow: hidden;
}
/* 背景の外観写真は薄く敷くだけ（Figma は opacity 8%） */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/fv-pc.jpg') no-repeat center / cover;
  opacity: .08;
  pointer-events: none;
}
.final-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 48px var(--gutter);
}
.quote-light { color: var(--white); font-weight: 600; letter-spacing: 0.04em; }
.final-note {
  color: var(--white);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
.final-btns { width: 100%; max-width: 800px; }

/* ------------------------------------------------------------
   フッター
------------------------------------------------------------ */
/* ⚠️ 上下48pxはPC・SP共通（Figmaのフッタは 1440×108 / 375×108 で、48+12+48）。
      コピーライトは **SPでも左揃え**。テーマの `.footer-simple__copyright`
      （/contact/ など2026フォームページ）が text-align を持たず左のままなので、それに合わせる。
      ⚠️ Figma の SP フッタは文字ブロックが中央に置かれているが、
         本番サイトの実装は左揃え。サイト側に合わせること。 */
.footer {
  background: var(--black);
  padding-block: 48px;
}
.copyright {
  color: var(--white);
  font-family: var(--serif-en);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: left;
}

/* ------------------------------------------------------------
   画面下の追従バー（SPのみ）
------------------------------------------------------------ */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}
.stickybar .btn { flex: 1 1 0; min-width: 0; }

/* --- 出し入れ（JSが動くときだけ）---
   既定は「出したまま」。html に .js が付いているときだけ隠し、
   script.js が .is-shown を付け外しする。
   ⚠️ visibility も切り替える。transform だけだと画面外のリンクに
      タブで到達できてしまう。 */
.js .stickybar {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.js .stickybar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform .25s ease, visibility 0s linear 0s;
}
/* ⚠️ バーを引っ込めるので、body 下の逃げも要らない。
      残すとフッタの下に地色（白）の帯が出る。 */
.js body { padding-bottom: 0; }

/* ============================================================
   PC（960px 以上）
   ⚠️ index.html の <picture> の media（max-width: 959px）と対で動く。
      片方だけ変えると、SP用の写真がPCに出る／その逆になる。
   ⚠️ --gutter は 40px。64px にしても 1200px の中身は変わらない
      （.container が max-width: 1200 + gutter*2 で頭打ちになるため）が、
      960〜1280px の帯で2カラムが窮屈になる。
============================================================ */
@media (min-width: 960px) {
  :root { --gutter: 40px; --maxw: 1200px; }

  body { padding-bottom: 0; }

  .section { padding-block: 120px; }
  .section-sm { padding-block: 80px; }

  .stack-40 > * + * { margin-top: 40px; }
  .stack-48 > * + * { margin-top: 48px; }
  .stack-80 > * + * { margin-top: 80px; }
  .stack-120 > * + * { margin-top: 120px; }

  .br-sp { display: none; }

  .btn-row { flex-direction: row; gap: 4px; }

  /* --- ヘッダー --- */
  .header { border-bottom: 0; }
  .header-inner { padding: 20px var(--gutter); }
  .logo img { width: 140px; }
  .header-btns { display: flex; }
  .btn-sm { width: 160px; }

  /* --- FV ---
     ⚠️ PCも縦積み。Figma更新後の Container(293:14) は flex-col で、
        「縦書きタグ（右寄せ）→ すきまなし → 本文」の順に積む。
        横並びにしない＝SPと同じ構造なので、flex-direction は上書きしない。

        Figma の実寸（pt80 の下から）:
          タグ        y=  0  h=260
          バッジ+リード y=260  h=128   ← タグとの間に gap は無い
          ボタン       y=444  h= 64   ← 56px 空ける
          注釈         y=564         ← 56px 空ける
          Container 計 574（min-height 560 を content が上回る）
          FV 全体 = 80 + 574 + 16 + 日程バー132 = 802 */
  .hero {
    padding: 80px var(--gutter) 0;
    min-height: 802px;
    align-items: flex-start;
  }
  .hero-inner {
    justify-content: flex-start;
    min-height: 560px;
    gap: 0;
  }
  .hero-main { flex: 0 0 auto; width: 100%; gap: 56px; }
  .hero-head { flex-direction: row; align-items: center; gap: 24px; }
  .hero-badge { width: 120px; height: 120px; }
  .hero-lead { font-size: 20px; }
  /* ⚠️ 280px 固定にすると、狭い画面で2つ分（564px）がはみ出す。
        上限だけ 280px にして、狭いときは縮ませる。 */
  .hero-btns .btn { flex: 1 1 0; min-width: 0; max-width: 280px; }
  .hero-tags { padding-inline: 40px; }
  .vtag { font-size: 32px; }

  .eventdate-day { font-size: 56px; }
  .eventfacts li { font-size: 14px; }

  /* --- 引用 --- */
  /* 左右余白は base の clamp に任せる（段階で切らない） */
  .quote { font-size: 32px; }

  .lead { font-size: 18px; }
  .lead-strong { font-size: 20px; }

  /* --- 写真と本文 --- */
  .figure-media-tall { aspect-ratio: 1200 / 720; }
  .figure-captions { padding: 64px; }
  .figure-caption { font-size: 24px; }
  .prose p { font-size: 18px; }

  /* --- 特集 --- */
  .feature-media { aspect-ratio: 1200 / 560; }
  .feature-overlay { padding: 48px; }
  .feature-chip-en { font-size: 18px; }
  .feature-chip-ja { font-size: 14px; }
  .feature-headline { font-size: 24px; }

  /* --- 寝室 / 子ども部屋 --- */
  .duo-title { font-size: 20px; }

  .closing { font-size: 24px; }

  /* --- 貸し切り --- */
  .private-title { font-size: 32px; }
  .private-text { font-size: 16px; }
  .qitem-text { font-size: 18px; }
  .qitem-mark { font-size: 32px; }

  /* --- ご案内 --- */
  .section-title { font-size: 32px; }
  .info-cols { flex-direction: row; gap: 48px; }
  .info-cols > * { flex: 1 1 0; min-width: 0; }
  .dl-key { width: 80px; }

  /* --- 来場特典 --- */
  .gift { padding-block: 120px; }
  .gift-body { padding: 40px; }
  .gift-tag { font-size: 16px; }
  .gift-eyebrow { font-size: 14px; }
  .gift-title { font-size: 28px; }
  .gift-text { font-size: 16px; }
  .gift-list { flex-direction: row; gap: 16px; }
  .gift-item { flex: 1 1 0; min-width: 0; gap: 16px; }
  .gift-item-title { font-size: 16px; }
  .gift-btns { max-width: 800px; margin-inline: auto; }
  .gift-shop-info { font-size: 16px; }

  /* --- ご来場にあたって --- */
  .notes-title { font-size: 28px; }
  .notelist li { padding: 12px 16px; }

  /* --- 最終CTA --- */
  .final-inner { gap: 40px; padding: 80px var(--gutter); }
  .final-note { font-size: 18px; }

  /* --- フッター（上下48px・左揃えは SP と共通なので上書きなし）--- */

  /* --- 追従バーはSPだけ --- */
  .stickybar { display: none; }

  /* ============ ここから：横に並べるもの ============ */

  /* --- FV：日程バーをFVの下辺に重ねる --- */
  /* 同じグリッドマスに置いて下寄せするので、バーの高さを決め打ちしなくても下辺ぴったりになる */
  .hero-wrap {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero { grid-area: 1 / 1; }

  /* ⚠️ .hero は position:relative なので、位置指定なしのままだと
        日程バーがFVの背景写真の下に潜って見えなくなる。z-index で前に出す。 */
  .eventbar {
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    padding-inline: var(--gutter);
    background: transparent;
  }
  .eventbar-inner { flex-direction: row; align-items: stretch; background: var(--white); }
  /* ⚠️ flex-direction は上書きしない。日付と時刻は PC でも縦並びのまま。
        余白は Figma 更新後の実値（日付側 24px 四方 ／ 右側 34px 上下・24px 左右）。 */
  .eventdate {
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    padding: 24px;
  }
  .eventfacts {
    flex: 1 1 0;
    min-width: 0;
    padding: 34px 24px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  /* --- 寝室 / 子ども部屋 --- */
  .duo { flex-direction: row; gap: 40px; }
  .duo-item { flex: 1 1 0; min-width: 0; gap: 24px; padding-block: 40px; }
  .duo-item + .duo-item { border-top: 0; border-left: 1px solid var(--line); padding-left: 40px; }

  /* --- 貸し切り --- */
  /* ⚠️ Figma の 80px は1440px前提。960px で 80px のままだと
        「?」リストが1項目だけ2行に折れて、行高が揃わなくなる。
        vw で詰めれば、1440px では 80px のまま・960px では自動的に縮む。 */
  .private { flex-direction: row; gap: clamp(40px, 5.5vw, 80px); align-items: flex-start; }
  /* ⚠️ 見出しは2行で組む前提。幅を 304px で固定すると
        「90分の貸し切りです」が3行に折れるので、nowrap の見出しに幅を決めさせる。 */
  .private-head { flex-shrink: 0; }
  .private-title { white-space: nowrap; }
  .private-text { max-width: 304px; }
  .qlist { flex: 1 1 0; min-width: 0; }
  /* ⚠️ Figma の左右80pxは1440px前提。960pxでは入りきらず文字が2行に折れる。
        リスト幅に対する割合で持つと、1440pxで約80px・960pxでは自動的に縮む。
        ブレークポイントを増やさずに済む（10% = 1440px時 810px × 0.1 ≒ 80px）。 */
  .qitem { padding: 12px 10%; }

  /* --- 来場特典 --- */
  .gift-card { flex-direction: row; align-items: stretch; }
  .gift-body { flex: 1 1 0; min-width: 0; }
  .gift-photo { flex: 1 1 0; min-width: 0; aspect-ratio: auto; }
}


/* ============================================================
   動きを減らす設定の尊重
============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}