@charset "UTF-8";
/* =========================================================
   イベントLP雛形（SP 750px カンプ基準）
   --u = カンプ上の1px。画面幅375pxなら 0.5px、PCでは最大1px
   寸法はすべて calc(var(--u) * カンプ上のpx) で書く
   配色は :root の変数だけを変える（チラシ・横断幕から色を拾う）
   ========================================================= */
:root {
  --u: calc(min(100vw, 750px) / 750);
  /* ↓テーマ色（キャンペーンごとに差し替え） */
  /* 1107チラシ：空の青（平屋）・オレンジ（2階建て）・緑（暮らしカード）・ベージュ（来場特典） */
  --purple: #0f73b8;    /* 平屋ブロックの青。見出し・枠 */
  --purple-d: #0b4f80;
  --orange: #ee6b25;    /* 2階建てブロック */
  --yellow: #ffe600;
  --pink: #e5007f;      /* 予約ボタン */
  --teal: #1fb2c4;      /* 資金相談・こんな方必見 */
  --green: #16a37f;     /* 暮らしカード */
  --red: #e60023;       /* 特典の金額 */
  --navy: #2aa5c9;      /* 検索窓（チラシの水色） */
  --ink: #1e1e1e;
  --white: #fff;
  --cream: #f6eed6;     /* 来場特典のベージュ */
  --beige: #d9c08a;
  --pale-purple: #eaf5fc;
  --pale-pink: #fde4ef;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  font-feature-settings: "palt";
  color: var(--ink);
  background: #0b4f80 radial-gradient(circle at 50% 0, #4fb3e8 0, #0b4f80 70%) fixed;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
[hidden] { display: none !important; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
small { font-size: inherit; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: var(--white);
  overflow: clip; /* hidden だとヘッダーの sticky が効かない */
  box-shadow: 0 0 40px rgba(0, 0, 0, .4);
  padding-bottom: calc(var(--u) * 150); /* 追従CTA分 */
}

/* ---------- 共通 ---------- */
.sec-sub {
  font-size: calc(var(--u) * 26);
  color: var(--pink);
  text-align: center;
}
.sec-sub.is-purple { color: var(--purple); }
.sec-title {
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--u) * 44);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.sec-title.is-purple { color: var(--purple); }
.sec-title.is-pink { color: var(--pink); }

.cta { padding: 0 calc(var(--u) * 40); position: relative; }
.cta__sub {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto calc(var(--u) * -18);
  padding: calc(var(--u) * 2) calc(var(--u) * 18);
  font-size: calc(var(--u) * 20);
  color: var(--pink);
  background: var(--white);
  border: calc(var(--u) * 3) solid var(--pink);
  border-radius: 999px;
}
.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 24);
  width: 100%;
  height: calc(var(--u) * 112);
  padding: 0;
  border: 0;
  font: 900 calc(var(--u) * 40) / 1 "Noto Sans JP", sans-serif;
  color: var(--white);
  background: linear-gradient(#ff2e98, #d4006f);
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 8) 0 var(--cta-shadow);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  --cta-shadow: #9b004f; /* 下影の色。色違い（is-orange 等）は background とこれを替える */
}
.cta__btn:hover { transform: translateY(calc(var(--u) * 4)); box-shadow: 0 calc(var(--u) * 4) 0 var(--cta-shadow); }
.cta__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.cta__arrow { font-size: calc(var(--u) * 28); }
@media (prefers-reduced-motion: no-preference) {
  .cta__btn { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.03; }
}

/* ---------- CTAのバリエーション（部品と使い分けは reference/cta.html / cta.md） ---------- */
/* ボタンの色 */
.cta__btn.is-orange { --cta-shadow: #b35500; background: linear-gradient(#ffad33, #f07800); }
.cta__btn.is-purple { --cta-shadow: var(--purple-d); background: linear-gradient(#7a3cc0, var(--purple)); }
.cta__btn.is-yellow { --cta-shadow: #c29d00; color: var(--ink); background: linear-gradient(#fff36b, var(--yellow)); }
.cta__btn.is-tel {
  --cta-shadow: var(--purple-d);
  color: var(--purple);
  background: var(--white);
  border: calc(var(--u) * 4) solid var(--purple);
  animation: none;
}
/* ボタン内の小さい1行（例：ご来場特典つき）とアイコン */
.cta__btn-body { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.cta__btn-lead { font-size: calc(var(--u) * 22); font-weight: 700; }
.cta__icon { flex: none; width: calc(var(--u) * 44); height: calc(var(--u) * 44); fill: currentColor; }
/* 光が流れる */
.cta__btn.is-shine { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .cta__btn.is-shine::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: shine 3s ease-in-out infinite;
  }
}
@keyframes shine { 0%, 60% { left: -40%; } 100% { left: 120%; } }

/* ボタン上のラベル（既定はピンク枠の丸ラベル） */
.cta__sub.is-balloon {
  margin-bottom: calc(var(--u) * 20);
  padding: calc(var(--u) * 6) calc(var(--u) * 26);
  font-size: calc(var(--u) * 24);
  color: var(--white);
  background: var(--pink);
  border: 0;
}
.cta__sub.is-balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  border: calc(var(--u) * 12) solid transparent;
  border-top-color: var(--pink);
  border-bottom: 0;
}
.cta__sub.is-slash { margin-bottom: calc(var(--u) * 10); padding: 0; font-size: calc(var(--u) * 26); background: none; border: 0; }
.cta__sub.is-slash::before { content: "＼ "; }
.cta__sub.is-slash::after { content: " ／"; }
.cta__sub.is-ribbon {
  margin-bottom: calc(var(--u) * -20);
  padding: calc(var(--u) * 4) calc(var(--u) * 46);
  font-size: calc(var(--u) * 22);
  color: var(--ink);
  background: var(--yellow);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 16) 50%, 100% 100%, 0 100%, calc(var(--u) * 16) 50%);
}

/* 予約＋電話の2列（電話は店舗特定時のみ。隠れている時は1列） */
.cta.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--u) * 20); }
.cta.is-pair:has(.is-tel[hidden]) { grid-template-columns: 1fr; }
.cta.is-pair .cta__sub { grid-column: 1 / -1; }
.cta.is-pair .cta__btn { height: calc(var(--u) * 100); font-size: calc(var(--u) * 32); gap: calc(var(--u) * 12); }
.cta.is-pair .cta__icon { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }

/* 会期の残り日数（js/main.js が data-end から計算して表示。終わったら隠れたまま） */
.countdown b { margin: 0 calc(var(--u) * 4); font-size: 1.6em; line-height: 1; color: var(--pink); }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 96);
  padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 24);
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.header__logo img { height: calc(var(--u) * 76); width: auto; }
/* テキストロゴ（ロゴ画像が無いブランド） */
.header__logo.is-text { display: flex; flex-direction: column; line-height: 1.2; }
.header__logo-main { font-size: calc(var(--u) * 30); font-weight: 900; letter-spacing: .02em; }
.header__logo-sub { font-size: calc(var(--u) * 16); font-weight: 500; color: #555; }
.header__btn {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 180);
  height: calc(var(--u) * 60);
  font-size: calc(var(--u) * 24);
  font-weight: 900;
  color: var(--white);
  background: linear-gradient(#ff2e98, #d4006f);
  border-radius: 999px;
}

/* ---------- FV（横断幕レイアウト） ---------- */
/* 横断幕の背景書き出しを基準に、タイトルと日程を%で重ねる（値は scripts/fv_position.py で算出） */
/* チラシ表面の上部。背景の切り出し範囲（635×233.3pt）に対する%（タイトルは背景の上端で切っている） */
.fv { position: relative; background: var(--white); }
.fv__bg { width: 100%; }
.fv__title, .fv__date { position: absolute; }
.fv__title { left: 3.524%; top: 0; width: 90.129%; }
.fv__date { left: 76%; top: 3.44%; width: 19.95%; }
/* FV下の帯：会期＋契約実績 */
.fv-info { display: grid; justify-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 10) calc(var(--u) * 40) calc(var(--u) * 36); background: linear-gradient(var(--white), var(--pale-purple)); }
.fv-info__date img { width: calc(var(--u) * 670); } /* 10/31始まりに差し替えて横長になった（1383×371） */
.fv-info__record img { width: calc(var(--u) * 520); }

@media (prefers-reduced-motion: no-preference) {
  .fv__title { animation: pop .8s cubic-bezier(.2, 1.4, .4, 1) both .2s; }
  .fv__date, .fv-info__date { animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both .6s; }
}
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- 予約CTA ---------- */
.fv-cta { padding: calc(var(--u) * 30) 0 calc(var(--u) * 56); background: var(--cream); text-align: center; }
.fv-cta__bonus { width: calc(var(--u) * 730); margin: 0 auto; }
.fv-cta__venue { font-size: calc(var(--u) * 24); font-weight: 900; color: var(--purple); }
.fv-cta__label {
  display: inline-block;
  margin-right: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 18);
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 38);
  color: var(--white);
  background: var(--purple);
  border-radius: 999px;
}
.fv-cta__note { margin: calc(var(--u) * 10) 0 calc(var(--u) * 40); font-size: calc(var(--u) * 20); font-weight: 500; color: #666; }

/* ---------- 中間CTA（セクションの間に挟む。型は reference/cta.html） ---------- */
.mid-cta { padding: calc(var(--u) * 50) 0 calc(var(--u) * 60); background: var(--pale-pink); text-align: center; }
.mid-cta__lead { margin-bottom: calc(var(--u) * 30); font-size: calc(var(--u) * 34); font-weight: 900; line-height: 1.4; color: var(--purple); }
.mid-cta__lead em { font-style: normal; color: var(--pink); background: linear-gradient(transparent 65%, var(--yellow) 65%); }
/* is-band：テーマ色の帯 */
.mid-cta.is-band { background: linear-gradient(#1f8fd3, var(--purple-d)); }
.mid-cta.is-band .mid-cta__lead { color: var(--white); }
.mid-cta.is-band .mid-cta__lead em { color: var(--yellow); background: none; }
/* is-card：写真＋一言＋ボタンのカード */
.mid-cta.is-card { padding: calc(var(--u) * 40) calc(var(--u) * 30) calc(var(--u) * 50); background: var(--cream); }
.mid-cta__card { overflow: hidden; padding-bottom: calc(var(--u) * 44); background: var(--white); border: calc(var(--u) * 4) solid var(--purple); border-radius: calc(var(--u) * 24); }
.mid-cta__card .mid-cta__lead { margin: calc(var(--u) * 26) calc(var(--u) * 20) calc(var(--u) * 26); }
.mid-cta__card .cta { padding: 0 calc(var(--u) * 30); }
/* is-bonus：特典の金額を小さく再掲 */
.mid-cta__bonus { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 26); font-weight: 900; line-height: 1.1; color: var(--pink); }
.mid-cta__bonus-label {
  align-self: center;
  margin-right: calc(var(--u) * 8);
  padding: calc(var(--u) * 4) calc(var(--u) * 16);
  font-size: calc(var(--u) * 24);
  color: var(--white);
  background: var(--purple);
  border-radius: calc(var(--u) * 8);
}
.mid-cta__bonus-num { font-size: calc(var(--u) * 80); letter-spacing: -.02em; }
.mid-cta__bonus-unit { font-size: calc(var(--u) * 34); }
/* is-count：会期の残り日数 */
.mid-cta.is-count { background: var(--purple-d); }
.mid-cta.is-count .countdown {
  width: fit-content;
  margin: 0 auto calc(var(--u) * 30);
  padding: calc(var(--u) * 6) calc(var(--u) * 40);
  font-size: calc(var(--u) * 30);
  font-weight: 900;
  background: var(--white);
  border-radius: 999px;
}
.mid-cta.is-count .countdown b { color: var(--red); }
.mid-cta.is-count .mid-cta__lead { color: var(--white); }

/* ---------- 実績 ---------- */
.record { padding: calc(var(--u) * 30) 0; background: var(--purple-d); }
.record img { width: calc(var(--u) * 710); margin: 0 auto; }

/* ---------- 画像ブロック（チラシのデザイン済みブロック） ---------- */
.imgblock { padding: calc(var(--u) * 40) calc(var(--u) * 20); background: var(--white); }
.imgblock.is-pink { padding: calc(var(--u) * 40) 0 calc(var(--u) * 50); background: var(--pale-pink); }
.imgblock__img { margin: 0 auto; }
.imgblock hgroup + .imgblock__img { margin-top: calc(var(--u) * 24); }
.imgblock__img.is-narrow { width: calc(var(--u) * 580); } /* 縦長ブロックは幅を絞る */

/* ---------- イベント ---------- */
.event {
  padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 50);
  background: linear-gradient(#1f8fd3, var(--purple-d));
}
.event__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(var(--u) * 40);
  font-weight: 900;
  line-height: 1.3;
  color: var(--yellow);
  -webkit-text-stroke: calc(var(--u) * 8) var(--purple-d);
  paint-order: stroke fill;
}
.event__title-l { font-size: calc(var(--u) * 52); }
.event-card {
  position: relative;
  margin-top: calc(var(--u) * 30);
  padding: calc(var(--u) * 80) calc(var(--u) * 20) calc(var(--u) * 24);
  background: var(--white);
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
}
.event-card__label {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--u) * 190);
  padding: calc(var(--u) * 6) 0;
  font-size: calc(var(--u) * 26);
  font-weight: 900;
  color: var(--white);
  text-align: center;
  background: var(--teal);
  border-radius: 0 0 calc(var(--u) * 20) 0;
}
.event-card__head { display: flex; flex-direction: column; align-items: center; margin-bottom: calc(var(--u) * 20); font-weight: 900; line-height: 1.3; text-align: center; }
.event-card__head-main { font-size: calc(var(--u) * 46); font-weight: 900; }
.event-card__head-main.is-orange { color: var(--orange); }
.event-card__head-main.is-pink { color: var(--pink); font-size: calc(var(--u) * 52); }
.event-card__head-sub { font-size: calc(var(--u) * 34); color: var(--purple); }
.event-card__head-lead { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 24); font-weight: 700; color: var(--ink); }
.event-card__note { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 20); font-weight: 500; color: #666; text-align: center; }
.event__note { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 20); font-weight: 500; color: #d8c8f0; text-align: center; }

/* ---------- うれしいポイント ---------- */
.point { padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 50); background: var(--pale-purple); }
.point__list { display: grid; gap: calc(var(--u) * 20); margin-top: calc(var(--u) * 24); }

/* ---------- 相談会 ---------- */
.consult { padding: calc(var(--u) * 28) calc(var(--u) * 20) calc(var(--u) * 50); background: var(--teal); }
.consult__head { display: flex; align-items: center; gap: calc(var(--u) * 24); }
.consult__circle {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 170);
  height: calc(var(--u) * 170);
  font-size: calc(var(--u) * 44);
  font-weight: 900;
  line-height: 1.15;
  color: var(--red);
  text-align: center;
  background: var(--white);
  border: calc(var(--u) * 6) solid var(--red);
  border-radius: 50%;
}
.consult__pre { font-size: calc(var(--u) * 22); color: var(--white); }
.consult__free {
  font-size: calc(var(--u) * 76);
  font-weight: 900;
  line-height: 1.2;
  color: var(--yellow);
  -webkit-text-stroke: calc(var(--u) * 6) var(--ink);
  paint-order: stroke fill;
}
.consult__sub { font-size: calc(var(--u) * 28); font-weight: 900; color: var(--white); }
.consult__img { margin-top: calc(var(--u) * 24); border-radius: calc(var(--u) * 16); }

/* ---------- 最終CTA（フォーム版の .form も同梱） ---------- */
.final { padding: calc(var(--u) * 40) 0 calc(var(--u) * 50); background: var(--cream); text-align: center; scroll-margin-top: calc(var(--u) * 96); }
.final__title { font-size: calc(var(--u) * 44); font-weight: 900; color: var(--purple); }
.final__limit {
  width: fit-content;
  margin: calc(var(--u) * 10) auto 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 30);
  font-size: calc(var(--u) * 26);
  font-weight: 900;
  color: var(--white);
  background: var(--pink);
  border-radius: 999px;
}
.final__price { color: var(--pink); font-weight: 900; line-height: 1.1; }
.final__price-sum { font-size: calc(var(--u) * 40); }
.final__price-num { font-size: calc(var(--u) * 120); letter-spacing: -.02em; }
.final__price-unit { font-size: calc(var(--u) * 48); }
.final__gift { font-size: calc(var(--u) * 38); font-weight: 900; }
.final__note { margin-bottom: calc(var(--u) * 40); font-size: calc(var(--u) * 20); font-weight: 500; color: #666; }

.form {
  display: grid;
  gap: calc(var(--u) * 36);
  margin: 0 calc(var(--u) * 24);
  padding: calc(var(--u) * 40) calc(var(--u) * 32) calc(var(--u) * 50);
  background: var(--white);
  border: calc(var(--u) * 4) solid var(--purple);
  border-radius: calc(var(--u) * 24);
  text-align: left;
}
.form__title {
  margin: calc(var(--u) * -40) calc(var(--u) * -32) 0;
  padding: calc(var(--u) * 14) 0;
  font-size: calc(var(--u) * 34);
  font-weight: 900;
  color: var(--white);
  text-align: center;
  background: var(--purple);
}
.form__label { display: flex; align-items: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 27); font-weight: 900; }
.form__tag {
  padding: 0 calc(var(--u) * 12);
  font-size: calc(var(--u) * 20);
  font-weight: 700;
  line-height: calc(var(--u) * 36);
  color: var(--white);
  background: var(--red);
  border-radius: calc(var(--u) * 6);
}
.form__tag.is-opt { background: #999; }
.form__input {
  display: block;
  width: 100%;
  height: calc(var(--u) * 92);
  margin-top: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 26);
  border: 1px solid #ccc;
  border-radius: calc(var(--u) * 12);
  background: #f6f6f8;
  font: 500 max(16px, calc(var(--u) * 28)) "Noto Sans JP", sans-serif; /* 16px未満だとiOSで自動ズーム */
  color: var(--ink);
}
.form__input::placeholder { color: #aaa; }
.form__input:focus { outline: 2px solid var(--pink); outline-offset: 0; border-color: var(--pink); background: var(--white); }
.form__select {
  appearance: none;
  padding-right: calc(var(--u) * 70);
  background: #f6f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%234a1d7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right calc(var(--u) * 26) center / calc(var(--u) * 30) no-repeat;
}
.form__select:invalid { color: #aaa; }
.form__select option { color: var(--ink); }
.form__textarea { height: auto; min-height: calc(var(--u) * 190); padding: calc(var(--u) * 20) calc(var(--u) * 26); resize: vertical; line-height: 1.6; }
.form__agree { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 25); cursor: pointer; }
.form__agree input { width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin: 0; accent-color: var(--pink); }
.form__agree a { color: #0068b7; text-decoration: underline; }
.form .cta { padding: 0; margin-top: calc(var(--u) * 10); }
/* 先方発行フォーム用：姓・名を横並び、補足、送信エラー、送信中 */
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20); }
.form__hint { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 21); font-weight: 500; color: #666; }
.form__error { font-size: calc(var(--u) * 24); color: var(--red); text-align: center; }
.cta__btn:disabled { opacity: .6; cursor: wait; animation: none; }

.tel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 96);
  margin: calc(var(--u) * 40) calc(var(--u) * 40) 0;
  color: var(--purple);
  background: var(--white);
  border: calc(var(--u) * 4) solid var(--purple);
  border-radius: 999px;
  line-height: 1.2;
}
.tel-btn__sub { font-size: calc(var(--u) * 20); }
.tel-btn__num { font-size: calc(var(--u) * 38); font-weight: 900; }

/* ---------- 店舗情報 ---------- */
.shop { padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 60); }
.shop__table { margin-top: calc(var(--u) * 20); }
.shop__table div { display: flex; padding: calc(var(--u) * 16) calc(var(--u) * 10); border-bottom: 2px solid #ddd; font-size: calc(var(--u) * 24); }
.shop__table dt { flex: none; width: calc(var(--u) * 140); font-weight: 900; color: var(--purple); }
.shop__table dd { font-weight: 500; }
.shop__map { height: calc(var(--u) * 420); margin-top: calc(var(--u) * 30); background: #e9e9e9; }
.shop__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- フッター ---------- */
.footer { padding: calc(var(--u) * 50) calc(var(--u) * 24) calc(var(--u) * 40); color: var(--white); background: var(--purple-d); text-align: center; }
.footer__logo img {
  width: calc(var(--u) * 200);
  margin: 0 auto;
  padding: calc(var(--u) * 12) calc(var(--u) * 20);
  background: var(--white);
  border-radius: calc(var(--u) * 12);
}
.footer__logo.is-text { font-size: calc(var(--u) * 40); font-weight: 900; }
.footer__sub { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 24); font-weight: 700; }
.footer__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--u) * 400);
  margin: calc(var(--u) * 24) auto 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 30);
  font-size: calc(var(--u) * 24);
  color: var(--navy);
  background: var(--white);
  border-radius: calc(var(--u) * 6);
}
.footer__search-btn { padding: calc(var(--u) * 6) calc(var(--u) * 20); font-size: calc(var(--u) * 20); color: var(--white); background: var(--navy); border-radius: calc(var(--u) * 4); }
.footer__license { margin-top: calc(var(--u) * 30); font-size: calc(var(--u) * 17); font-weight: 500; line-height: 1.7; color: #cfe6f5; }
.footer__copy { margin-top: calc(var(--u) * 30); font-size: calc(var(--u) * 18); font-weight: 500; color: #a9cde6; }

/* ---------- 追従CTA ---------- */
.fixed-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 360fr 342fr;
  gap: calc(var(--u) * 16);
  width: min(100%, 750px);
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(calc(var(--u) * 16) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
  transform: translate(-50%, 110%);
  transition: transform .3s ease;
}
.fixed-cta.is-show { transform: translate(-50%, 0); }
.fixed-cta:has(.fixed-cta__tel[hidden]) { grid-template-columns: 1fr; } /* 店舗未特定時は予約ボタンのみ */
.fixed-cta a {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 88);
  font-size: calc(var(--u) * 30);
  font-weight: 900;
  border-radius: 999px;
}
.fixed-cta__reserve { color: var(--white); background: linear-gradient(#ff2e98, #d4006f); }
.fixed-cta__tel { color: var(--purple); background: var(--white); border: calc(var(--u) * 4) solid var(--purple); }

/* 追従CTAの型（reference/cta.html）。is-bonus のバッジがはみ出すため、隠す時は余分に下げる */
.fixed-cta:is(.is-bonus, .is-count) { transform: translate(-50%, calc(100% + var(--u) * 40)); }
.fixed-cta:is(.is-bonus, .is-count).is-show { transform: translate(-50%, 0); }
.fixed-cta__badge {
  position: absolute;
  top: calc(var(--u) * -22);
  left: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 18);
  font-size: calc(var(--u) * 20);
  font-weight: 900;
  line-height: calc(var(--u) * 40);
  color: var(--ink);
  background: var(--yellow);
  border: calc(var(--u) * 3) solid var(--pink);
  border-radius: 999px;
}
.fixed-cta.is-bonus { padding-top: calc(var(--u) * 26); }
.fixed-cta__count { grid-column: 1 / -1; margin-bottom: calc(var(--u) * -4); font-size: calc(var(--u) * 22); text-align: center; color: var(--purple); }
.fixed-cta__count b { font-size: calc(var(--u) * 34); color: var(--pink); }
/* is-fab：右下の丸ボタン（予約だけ。電話の a は消す） */
.fixed-cta.is-fab {
  left: auto;
  right: max(calc(var(--u) * 24), calc((100vw - 750px) / 2 + 24px));
  bottom: calc(var(--u) * 24 + env(safe-area-inset-bottom));
  display: block;
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: translateY(calc(100% + var(--u) * 60));
}
.fixed-cta.is-fab.is-show { transform: none; }
.fixed-cta.is-fab a {
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 160);
  font-size: calc(var(--u) * 30);
  line-height: 1.2;
  text-align: center;
  border: calc(var(--u) * 5) solid var(--white);
  border-radius: 50%;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .3);
}

/* ---------- スクロールフェードイン ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-fade { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .js-fade.is-in { opacity: 1; transform: none; }
}
/* フォーム下の個人情報・特典条件（reference/kokubu-form-terms.html） */
.form-terms { margin: calc(var(--u) * 36) calc(var(--u) * 24) 0; padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 34); text-align: left; background: var(--white); border: 1px solid #ddd; border-radius: calc(var(--u) * 16); font-size: calc(var(--u) * 21); font-weight: 500; line-height: 1.7; color: #444; scroll-margin-top: calc(var(--u) * 20); }
.form-terms__title { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 26); font-weight: 900; color: var(--ink); }
.form-terms__sub { margin: calc(var(--u) * 16) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 23); font-weight: 900; color: var(--red); }
.form-terms__notes { margin-top: calc(var(--u) * 16); }
.final__note a { text-decoration: underline; }

/* ========== 1107 選べる暮らしキャンペーン ========== */
/* 平屋の暮らし／2階建ての暮らし */
.style { padding: calc(var(--u) * 50) 0 calc(var(--u) * 50); background: var(--white); }
.style__list { display: grid; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 30); }
.style__list li:first-child img { margin-right: calc(var(--u) * 20); }
.style__list li:last-child img { margin-left: calc(var(--u) * 20); }
.style__list img { width: calc(var(--u) * 730); }

/* 5つの暮らし（2列。5枚目は中央） */
.life { padding: calc(var(--u) * 50) calc(var(--u) * 24) calc(var(--u) * 40); background: #eef8f4; }
.life .sec-sub { color: var(--green); }
.life__list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 26) calc(var(--u) * 18); margin-top: calc(var(--u) * 30); }
.life__list li:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--u) * 9); }
.life__note { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 20); font-weight: 500; color: #666; text-align: right; }

/* 裏面の画像ブロック */
.imgblock.is-solar { padding-top: 0; }
.imgblock.is-loan { background: #e6f6f8; }

/* こんな方必見 */
.wish { margin: 0 calc(var(--u) * 24) calc(var(--u) * 10); padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 30); background: var(--teal); border-radius: calc(var(--u) * 16); }
.wish__title { font-size: calc(var(--u) * 40); font-weight: 900; color: var(--yellow); text-align: center; }
.wish__list { display: grid; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 28); color: var(--white); }
.wish__list li { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.wish__list li::before { content: ""; flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border: calc(var(--u) * 3) solid var(--white); background: rgba(255, 255, 255, .15); }

/* 月々のお支払い例 */
.voice { padding: calc(var(--u) * 50) calc(var(--u) * 24) calc(var(--u) * 50); background: var(--white); }
.voice-card { margin-top: calc(var(--u) * 30); padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 24); border: calc(var(--u) * 3) solid #cfe9ee; border-radius: calc(var(--u) * 16); }
.voice-card__head { display: flex; gap: calc(var(--u) * 22); align-items: center; }
.voice-card__head img { flex: none; width: calc(var(--u) * 280); border-radius: calc(var(--u) * 8); }
.voice-card__prof { font-size: calc(var(--u) * 21); font-weight: 500; line-height: 1.6; }
.voice-card__prof dt { width: fit-content; padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 20); color: var(--teal); border: calc(var(--u) * 2) solid var(--teal); border-radius: 999px; }
.voice-card__income { width: fit-content; margin: calc(var(--u) * 6) 0; padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 22); font-weight: 900; color: var(--white); background: var(--teal); border-radius: calc(var(--u) * 6); }
.voice-card__comment { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 30); font-weight: 900; line-height: 1.4; color: var(--teal); }
.voice-card__pay { display: flex; align-items: baseline; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 12); font-weight: 900; line-height: 1.1; }
.voice-card__pay-label { align-self: center; padding: calc(var(--u) * 8) calc(var(--u) * 34) calc(var(--u) * 8) calc(var(--u) * 18); font-size: calc(var(--u) * 26); color: var(--white); background: #555; clip-path: polygon(0 0, calc(100% - var(--u) * 18) 0, 100% 50%, calc(100% - var(--u) * 18) 100%, 0 100%); }
.voice-card__pay-num { font-size: calc(var(--u) * 76); color: var(--red); letter-spacing: -.01em; }
.voice-card__pay-unit { font-size: calc(var(--u) * 30); color: var(--red); }
.voice-card__zero { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 24); }
.voice-card__total { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 19); font-weight: 500; line-height: 1.6; color: #444; }
.voice-card__total b { font-size: calc(var(--u) * 24); font-weight: 900; color: var(--teal); }

/* 特典の再掲・最終CTAはチラシのベージュと赤 */
.mid-cta.is-bonus { background: var(--cream); }
.final__price { color: var(--red); }
.form-terms { scroll-margin-top: calc(var(--u) * 110); }
.mid-cta__bonus { color: var(--red); }
/* GTMバナーの href="#form" の飛び先（フォームの直前）。固定ヘッダーに隠れないよう余白をとる */
.form-anchor { display: block; scroll-margin-top: calc(var(--u) * 110); }

/* ========== CTA（1107チラシの来場特典ブロックに合わせる：赤ボタン＋黄色ラベル） ========== */
.page { padding-bottom: calc(var(--u) * 180); } /* 追従バナー分 */
.cta__btn {
  --cta-shadow: #8c0012;
  justify-content: center;
  gap: calc(var(--u) * 20);
  background: linear-gradient(#f4404f, #d5001c 55%, #c00018);
  border-radius: calc(var(--u) * 20);
  box-shadow: 0 calc(var(--u) * 8) 0 var(--cta-shadow), inset 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .55);
  text-shadow: 0 calc(var(--u) * 2) 0 rgba(120, 0, 15, .45);
}
.cta__btn:hover { box-shadow: 0 calc(var(--u) * 4) 0 var(--cta-shadow), inset 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .55); }
.cta__arrow {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  padding-left: calc(var(--u) * 4);
  font-size: calc(var(--u) * 22);
  color: #d5001c;
  background: var(--white);
  border-radius: 50%;
  text-shadow: none;
}
/* ボタン上のラベル：チラシの「ご予約来場特典」の黄色い帯 */
.cta__sub {
  margin-bottom: calc(var(--u) * -16);
  padding: calc(var(--u) * 4) calc(var(--u) * 30);
  font-size: calc(var(--u) * 24);
  font-weight: 900;
  color: var(--ink);
  background: var(--yellow);
  border: 0;
  border-radius: calc(var(--u) * 6);
  rotate: -2deg;
  box-shadow: 0 calc(var(--u) * 3) 0 rgba(0, 0, 0, .15);
}
.cta__sub.is-balloon { color: var(--ink); background: var(--yellow); }
.cta__sub.is-balloon::after { border-top-color: var(--yellow); }

/* ヘッダー：正規ロゴのみ */
.header { justify-content: center; }
.header__logo img { height: calc(var(--u) * 58); }
.footer__logo img { width: calc(var(--u) * 420); padding: calc(var(--u) * 18) calc(var(--u) * 26); }

/* 追従CTA：来場特典ブロックの画像バナー */
.fixed-cta.is-banner {
  display: block;
  padding: 0 calc(var(--u) * 10) calc(calc(var(--u) * 10) + env(safe-area-inset-bottom));
  background: none;
  box-shadow: none;
}
.fixed-cta.is-banner a { display: block; height: auto; border-radius: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .35); overflow: hidden; }
.fixed-cta.is-banner img { width: 100%; }

/* GTM（line-saas popups.js）が差し込む紺のフローティングバナーは、このLPでは出さない（追従CTAに特典画像のバナーを使うため。2026-10-27 ユーザー指示） */
#khg-floating-banner { display: none !important; }