@charset "UTF-8";
/* =========================================================
   国分ハウジング ハロウィンマイホームフェア LP（SP 750px カンプ基準）
   --u = カンプ上の1px。画面幅375pxなら 0.5px、PCでは最大1px
   ========================================================= */
:root {
  --u: calc(min(100vw, 750px) / 750);
  --purple: #4a1d7a;
  --purple-d: #2b0f4f;
  --orange: #f18d00;
  --yellow: #ffe600;
  --pink: #e5007f;
  --teal: #1fb4c8;
  --red: #e60012;
  --navy: #1d2c7c;
  --ink: #1e1e1e;
  --white: #fff;
  --cream: #fff4d6;
  --pale-purple: #f6f0ff;
  --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: #1b0833 radial-gradient(circle at 50% 0, #5a2493 0, #1b0833 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: hidden;
  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 #9b004f;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.cta__btn:hover { transform: translateY(calc(var(--u) * 4)); box-shadow: 0 calc(var(--u) * 4) 0 #9b004f; }
.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; }
}

/* ---------- 00 ヘッダー ---------- */
.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__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;
}

/* ---------- 01 FV（横断幕レイアウト） ---------- */
/* 横断幕の書き出し（1546×2580px）を基準に、タイトルと日程を%で重ねる */
.fv { position: relative; background: #3a1566; }
.fv__bg { width: 100%; }
.fv__title, .fv__date { position: absolute; }
.fv__title { left: 1.746%; top: 27.4%; width: 96.18%; }
.fv__date { left: 76%; top: 3.44%; width: 19.95%; }

@media (prefers-reduced-motion: no-preference) {
  .fv__title { animation: pop .8s cubic-bezier(.2, 1.4, .4, 1) both .2s; }
  .fv__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; } }

/* ---------- 02 予約CTA ---------- */
.fv-cta { padding: calc(var(--u) * 30) 0 calc(var(--u) * 56); background: var(--cream); text-align: center; }
.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; }

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

/* ---------- 04 グレードアップ ---------- */
.gradeup { padding: calc(var(--u) * 40) calc(var(--u) * 20); background: var(--white); }

/* ---------- 05 ReFa ---------- */
.refa { padding: calc(var(--u) * 40) 0 calc(var(--u) * 50); background: var(--pale-pink); }
.refa__img { width: calc(var(--u) * 580); margin: calc(var(--u) * 24) auto 0; }

/* ---------- 06 イベント ---------- */
.event {
  padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 50);
  background: linear-gradient(#5a2493, #3a1566);
}
.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; }

/* ---------- 07 うれしいポイント ---------- */
.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); }

/* ---------- 08 相談会 ---------- */
.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); }

/* ---------- 09 最終CTA＋フォーム ---------- */
.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); }

.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; }

/* ---------- 10 店舗情報 ---------- */
.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; }

/* ---------- 11 フッター ---------- */
.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__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: #d8c8f0; }
.footer__copy { margin-top: calc(var(--u) * 30); font-size: calc(var(--u) * 18); font-weight: 500; color: #b9a6d9; }

/* ---------- 追従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); }

/* ---------- スクロールフェードイン ---------- */
@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; }
}