/* =========================================================
   匠TEC 3Dでつくる理想のマイホーム相談会 LP（v2：予約率改善版）
   デザイン幅 700px 基準。--u = デザイン上の 1px（700px 以下の画面で縮小）
   ========================================================= */
:root {
  --u: min(1px, calc(100vw / 700));
  --navy: #1d4f80;
  --navy-deep: #1a4d7c;
  --yellow: #fde96a;
  --red: #e74a41;
  --red-dark: #c93a32;
  --cream: #fefbf6;
  --card: #f8f3ea;
  --ink: #2b2a28;
  --muted: #6b665e;
  --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-round: "Zen Maru Gothic", var(--font-base);
  --font-hand: "Klee One", var(--font-base);
  --font-serif: "Shippori Mincho B1", "Yu Mincho", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ece6dc;
  color: var(--ink);
  font-family: var(--font-base);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
ul, ol, dl, dd, p, h1, h2 { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.lp {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}
.pc-none { display: none; }

/* ---------- 共通：見出し ---------- */
.sec-title {
  text-align: center;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: max(20px, calc(28 * var(--u)));
  line-height: 1.4;
  letter-spacing: .06em;
}
.sec-title span {
  position: relative;
  display: inline-block;
  padding: 0 calc(54 * var(--u));
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 90%, transparent 90%) no-repeat center / calc(100% - 108 * var(--u)) 100%;
}
.sec-title span::before, .sec-title span::after { /* ＼ ／ の飾り */
  content: "";
  position: absolute;
  top: 8%;
  width: calc(22 * var(--u));
  height: 80%;
  background:
    linear-gradient(var(--navy), var(--navy)) 0 30% / 3px 70% no-repeat,
    linear-gradient(var(--navy), var(--navy)) 12px 0 / 3px 100% no-repeat;
}
.sec-title span::before { left: 0; transform: skewX(28deg); }
.sec-title span::after { right: 0; transform: skewX(-28deg) scaleX(-1); }
.sec-lead {
  margin-top: calc(10 * var(--u));
  text-align: center;
  color: var(--muted);
  font-size: max(13px, calc(16 * var(--u)));
}

/* ---------- ロゴ ---------- */
.logo {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: calc(4 * var(--u));
  color: #222;
  line-height: 1;
}
.logo__mark { font-family: var(--font-serif); font-size: calc(46 * var(--u)); }
.logo__en {
  font-family: var(--font-serif);
  font-size: calc(32 * var(--u));
  letter-spacing: .04em;
  padding-bottom: calc(4 * var(--u));
}
.logo__kana {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(5 * var(--u));
  font-size: max(8px, calc(10 * var(--u)));
  letter-spacing: .3em;
  white-space: nowrap;
}
.logo__kana::before, .logo__kana::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

/* 〜でもOK チップ */
.ok-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(18 * var(--u));
}
.ok-chips li {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: max(11px, calc(15 * var(--u)));
  line-height: 1.4;
}
.ok-chips li::before {
  content: "";
  width: .5em;
  height: .85em;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg) translateY(-.1em);
}

/* ---------- CTA（共通） ---------- */
.cta-block { padding: calc(28 * var(--u)) calc(22 * var(--u)) 0; }
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  height: max(64px, calc(88 * var(--u)));
  padding: 0 calc(20 * var(--u)) 0 calc(108 * var(--u));
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 0 var(--red-dark), 0 12px 24px rgba(231, 74, 65, .3);
  transition: transform .15s, box-shadow .15s;
}
.cta::after { /* 光が流れるアニメーション：視線を引きつける */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  animation: shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 55% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) { .cta::after { animation: none; } }
.cta:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--red-dark), 0 8px 18px rgba(231, 74, 65, .3); }
.cta:active { transform: translateY(6px); box-shadow: 0 0 0 var(--red-dark), 0 4px 10px rgba(231, 74, 65, .3); }
.cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.cta__badge { /* 「参加無料」バッジ：ゼロ価格効果 */
  position: absolute;
  left: calc(14 * var(--u));
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  display: grid;
  place-items: center;
  width: max(52px, calc(76 * var(--u)));
  height: max(52px, calc(76 * var(--u)));
  border-radius: 50%;
  background: var(--yellow);
  color: var(--red);
  font-weight: 900;
  font-size: max(13px, calc(19 * var(--u)));
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}
.cta__label {
  font-weight: 700;
  font-size: max(17px, calc(29 * var(--u)));
  letter-spacing: .06em;
  white-space: nowrap;
}
.cta__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: max(28px, calc(40 * var(--u)));
  height: max(28px, calc(40 * var(--u)));
  border-radius: 50%;
  background: #fff;
}
.cta__arrow svg {
  width: 62%;
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(20 * var(--u));
  margin-top: calc(18 * var(--u));
  font-weight: 700;
  font-size: max(12px, calc(15 * var(--u)));
}
.cta-points li { display: inline-flex; align-items: center; gap: .4em; }
.cta-points li::before {
  content: "";
  width: .45em;
  height: .8em;
  border: solid var(--red);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg) translateY(-.1em);
}

/* ---------- PHOTOS ---------- */
.photos {
  position: relative;
  display: grid;
  grid-template-columns: 372fr 326fr;
  gap: calc(2 * var(--u));
  margin-top: calc(30 * var(--u));
  container-type: inline-size;
}
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos__msg {
  /* 元デザインと同位置（写真に対する%指定）でオーバーレイ */
  position: absolute;
  left: 31.6%;
  top: 40%;
  width: 38.4%;
  padding: 1.6cqw 0;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
  font-family: var(--font-hand);
  font-size: 4cqw;
  line-height: 1.45;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}

/* ---------- CHECK（お悩みチェック） ---------- */
.check {
  background: var(--cream);
  padding: calc(40 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u));
}
.check__body {
  display: grid;
  grid-template-columns: 1fr calc(220 * var(--u));
  align-items: end;
  gap: calc(10 * var(--u));
  margin-top: calc(22 * var(--u));
}
.checklist { display: grid; gap: calc(8 * var(--u)); }
.checklist button {
  position: relative;
  width: 100%;
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u));
  border: 1.5px solid #e6dfd2;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  font-weight: 500;
  font-size: max(14px, calc(16.5 * var(--u)));
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.checklist button::before { /* チェックボックス */
  content: "";
  position: absolute;
  left: calc(14 * var(--u));
  top: 50%;
  width: 1.2em;
  height: 1.2em;
  transform: translateY(-50%);
  border: 2px solid var(--navy);
  border-radius: 3px;
  background: #fff;
}
.checklist button::after {
  content: "";
  position: absolute;
  left: calc(14 * var(--u) + .38em);
  top: 50%;
  width: .45em;
  height: .85em;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: translateY(-65%) rotate(40deg);
  opacity: 0;
}
.checklist button:hover { border-color: var(--navy); }
.checklist button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.checklist button[aria-pressed="true"] {
  border-color: var(--navy);
  background: #eef3f9;
  font-weight: 700;
}
.checklist button[aria-pressed="true"]::before { background: var(--navy); }
.checklist button[aria-pressed="true"]::after { opacity: 1; }
.check__illust {
  width: 100%;
  aspect-ratio: 252 / 236;
  object-fit: cover;
  object-position: top;
}
.check__result {
  margin-top: calc(20 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border: 2px dashed #d9cfbd;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.check__result.is-active { border: 2px solid var(--navy); background: #fffdf0; }
.check__count { font-weight: 700; font-size: max(15px, calc(18 * var(--u))); }
.check__count strong {
  display: inline-block;
  min-width: 1.4em;
  margin-right: .1em;
  color: var(--red);
  font-family: var(--font-round);
  font-size: 1.9em;
  line-height: 1;
  vertical-align: -.12em;
}
.check__msg { margin-top: calc(4 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }

/* ---------- ROADMAP ---------- */
.roadmap { padding: calc(48 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u)); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(18 * var(--u));
  margin-top: calc(34 * var(--u));
  counter-reset: step;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  min-height: calc(118 * var(--u));
  padding: calc(14 * var(--u)) calc(4 * var(--u));
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  text-align: center;
}
.step:not(:last-child)::after { /* 矢印 */
  content: "";
  position: absolute;
  right: calc(-14 * var(--u));
  top: 50%;
  border: calc(8 * var(--u)) solid transparent;
  border-left: calc(10 * var(--u)) solid #cfc5b4;
  transform: translateY(-50%);
}
.step__no { font-family: var(--font-round); font-weight: 900; font-size: max(11px, calc(14 * var(--u))); letter-spacing: .08em; }
.step__name { font-weight: 700; font-size: max(12px, calc(16 * var(--u))); line-height: 1.45; }
.step--now {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 79, 128, .3);
}
.step--now .step__no { color: var(--yellow); }
.step--now::after { border-left-color: var(--navy) !important; }
.step__now {
  position: absolute;
  top: calc(-16 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: max(11px, calc(13 * var(--u)));
  white-space: nowrap;
}
.step__now::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  border: 5px solid transparent;
  border-top-color: var(--red);
  border-bottom: 0;
  transform: translateX(-50%);
}

.caution {
  margin-top: calc(34 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border-radius: 12px;
  background: #fff6f1;
  border: 1.5px solid #f3d3c6;
}
.caution__title {
  font-weight: 700;
  font-size: max(15px, calc(18 * var(--u)));
  color: var(--red-dark);
}
.caution__list { margin-top: calc(10 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.caution__list li {
  position: relative;
  padding-left: 1.6em;
  font-size: max(13.5px, calc(16 * var(--u)));
}
.caution__list li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: .2em;
  display: grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 900;
  font-size: .85em;
  line-height: 1;
}
.caution__answer {
  margin-top: calc(14 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px dashed #f0c4b3;
  font-weight: 700;
  font-size: max(14px, calc(17 * var(--u)));
  line-height: 1.7;
}
.caution__answer em {
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}

/* ---------- FLOW ---------- */
.flow {
  background: var(--cream);
  padding: calc(46 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u));
}
.flow__list {
  position: relative;
  display: grid;
  gap: calc(14 * var(--u));
  margin-top: calc(28 * var(--u));
}
.flow__list::before { /* 縦のライン */
  content: "";
  position: absolute;
  left: calc(22 * var(--u));
  top: calc(20 * var(--u));
  bottom: calc(20 * var(--u));
  width: 2px;
  background: #d6cbb8;
}
.flow__list li {
  position: relative;
  display: grid;
  grid-template-columns: calc(46 * var(--u)) 1fr;
  align-items: center;
  gap: calc(16 * var(--u));
}
.flow__no {
  display: grid;
  place-items: center;
  width: max(34px, calc(46 * var(--u)));
  height: max(34px, calc(46 * var(--u)));
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: max(15px, calc(20 * var(--u)));
}
.flow__list li > div {
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(60, 45, 20, .06);
}
.flow__list b { font-size: max(15px, calc(18 * var(--u))); }
.flow__list p { margin-top: calc(2 * var(--u)); color: var(--muted); font-size: max(13px, calc(15 * var(--u))); }

/* ---------- BONUS ---------- */
.bonus {
  display: grid;
  grid-template-columns: 1fr calc(358 * var(--u));
  align-items: center;
  background: var(--navy-deep);
  color: #fff;
}
.bonus__text { padding: calc(22 * var(--u)) 0 calc(22 * var(--u)) calc(32 * var(--u)); }
.bonus__tag {
  display: inline-block;
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  background: var(--yellow);
  color: var(--ink);
  border-radius: 6px;
  font-weight: 900;
  font-size: max(14px, calc(21 * var(--u)));
  letter-spacing: .08em;
}
.bonus__lead {
  margin-top: calc(10 * var(--u));
  font-family: var(--font-hand);
  font-size: max(16px, calc(26 * var(--u)));
  line-height: 1.45;
  letter-spacing: .04em;
  transform: rotate(-2deg);
  transform-origin: left;
  white-space: nowrap;
}
.bonus__note {
  margin-top: calc(12 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  opacity: .9;
}
.bonus__img { width: 100%; }

/* ---------- INFO ---------- */
.info { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(44 * var(--u)); }
.info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(14 * var(--u));
}
.info__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(114 * var(--u));
  padding: calc(12 * var(--u)) calc(6 * var(--u));
  background: var(--card);
  border-radius: 8px;
  text-align: center;
}
.info__card--accent .info__val { color: var(--red); }
.info__card dt {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-weight: 700;
  font-size: max(12px, calc(16 * var(--u)));
}
.info__card dt svg {
  width: max(15px, calc(20 * var(--u)));
  height: max(15px, calc(20 * var(--u)));
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.info__card dt svg .dot { fill: var(--ink); stroke: none; }
.info__card dt svg.fill { fill: var(--ink); stroke: none; }
.info__card dt svg .yen { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.info__card dd { margin-top: calc(10 * var(--u)); line-height: 1.25; }
.info__val {
  display: block;
  font-weight: 700;
  font-size: max(18px, calc(27 * var(--u)));
  letter-spacing: .04em;
}
.info__sub { font-size: .62em; letter-spacing: 0; }
.info__card dd > small { display: block; font-weight: 500; font-size: max(11px, calc(14 * var(--u))); }
.scarcity {
  margin: calc(18 * var(--u)) 0 calc(26 * var(--u));
  text-align: center;
  font-weight: 700;
  font-size: max(13px, calc(15.5 * var(--u)));
  color: var(--red-dark);
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--cream);
  padding: calc(46 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u));
}
.faq__list { display: grid; gap: calc(10 * var(--u)); margin-top: calc(26 * var(--u)); }
.faq details {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(60, 45, 20, .06);
}
.faq summary {
  position: relative;
  padding: calc(16 * var(--u)) calc(48 * var(--u)) calc(16 * var(--u)) calc(54 * var(--u));
  font-weight: 700;
  font-size: max(14px, calc(17 * var(--u)));
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq details p::before {
  position: absolute;
  left: calc(18 * var(--u));
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 1.15em;
}
.faq summary::before { content: "Q"; color: var(--navy); }
.faq summary::after { /* 開閉アイコン */
  content: "";
  position: absolute;
  right: calc(20 * var(--u));
  top: 50%;
  width: .55em;
  height: .55em;
  border: solid var(--navy);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.faq details p {
  position: relative;
  margin: 0 calc(18 * var(--u));
  padding: calc(14 * var(--u)) 0 calc(16 * var(--u)) calc(36 * var(--u));
  border-top: 1px dashed #e3dacb;
  font-size: max(13.5px, calc(16 * var(--u)));
  line-height: 1.75;
}
.faq details p::before { content: "A"; left: 0; color: var(--red); }

/* ---------- BRAND + FINAL CTA ---------- */
.final { padding: calc(30 * var(--u)) calc(22 * var(--u)) calc(36 * var(--u)); }
.brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(24 * var(--u));
  padding-left: calc(8 * var(--u));
}
.brand__logo .logo__mark { font-size: calc(50 * var(--u)); }
.brand__logo .logo__en { font-size: calc(36 * var(--u)); }
.brand__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12 * var(--u));
}
.brand__points li {
  display: grid;
  place-items: center;
  min-height: calc(82 * var(--u));
  padding: calc(8 * var(--u)) calc(4 * var(--u));
  border-radius: 999px;
  background: var(--card);
  text-align: center;
  font-weight: 500;
  font-size: max(11px, calc(16 * var(--u)));
  line-height: 1.6;
  white-space: nowrap;
}

/* ---------- GALLERY ---------- */
.gallery {
  display: grid;
  grid-template-columns: 228fr 240fr 228fr;
  gap: calc(2 * var(--u));
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 追従CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(700px, 100%);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
  transform: translate(-50%, 110%);
  transition: transform .3s ease;
}
.sticky-cta.is-show { transform: translate(-50%, 0); }
.sticky-cta__text {
  flex: none;
  display: grid;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}
.sticky-cta__text b { color: var(--red); font-size: 15px; }
.sticky-cta__btn {
  flex: 1;
  display: grid;
  place-items: center;
  height: 50px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  box-shadow: 0 4px 0 var(--red-dark);
}
.sticky-cta__btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 560px) {
  .pc-none { display: inline; }
  .sp-none { display: none; }

  .sec-title { font-size: 18px; }
  .sec-title span { padding: 0 30px; background-size: calc(100% - 60px) 100%; }
  .sec-title span::before, .sec-title span::after { width: 16px; }

  .ok-chips { margin-bottom: 14px; gap: 6px; }
  .ok-chips li { padding: 4px 10px; font-size: 12px; }
  .logo__mark { font-size: 32px; }
  .logo__en { font-size: 22px; }

  .cta-block { padding: 26px 16px 0; }
  .cta { padding: 0 14px 0 74px; gap: 10px; }
  .cta__badge { left: 10px; }
  .cta-points { gap: 4px 14px; }

  .check { padding: 36px 16px 30px; }
  .check__body { grid-template-columns: 1fr; margin-top: 18px; }
  .checklist button { padding: 11px 12px 11px 42px; font-size: 14px; }
  .checklist button::before { left: 12px; }
  .checklist button::after { left: calc(12px + .38em); }
  .check__illust { width: 180px; margin: 6px auto 0; }

  .roadmap { padding: 40px 16px 36px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; margin-top: 30px; }
  .step { min-height: 96px; }
  .step:nth-child(2)::after { display: none; }
  .caution { padding: 18px 16px; }

  .flow { padding: 40px 16px 36px; }
  .flow__list li { grid-template-columns: 34px 1fr; gap: 12px; }
  .flow__list::before { left: 16px; }
  .flow__list li > div { padding: 12px 14px; }

  .bonus { grid-template-columns: 1fr; text-align: center; }
  .bonus__text { padding: 26px 16px 6px; }
  .bonus__lead { transform: rotate(-2deg); transform-origin: center; font-size: 20px; }
  .bonus__img { max-width: 360px; margin: 0 auto; }

  .info { padding: 20px 16px 36px; }
  .info__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .info__card { min-height: 100px; }
  .info__card dt { gap: 6px; font-size: 13px; }
  .info__card dd { margin-top: 8px; }
  .info__val { font-size: 22px; }

  .faq { padding: 40px 16px 36px; }
  .faq summary { padding: 15px 40px 15px 42px; }
  .faq summary::before { left: 16px; }
  .faq summary::after { right: 16px; }
  .faq details p { margin: 0 14px; padding-left: 28px; }

  .final { padding: 30px 16px 36px; }
  .brand { grid-template-columns: 1fr; justify-items: center; gap: 16px; padding: 0; }
  .brand__logo .logo__mark { font-size: 38px; }
  .brand__logo .logo__en { font-size: 27px; }
  .brand__points { width: 100%; gap: 8px; }
  .brand__points li { min-height: 64px; border-radius: 20px; font-size: 12px; }
}

/* ---------- FOOTER（本サイトへの導線） ---------- */
.footer {
  padding: calc(32 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  background: var(--cream);
  text-align: center;
}
.footer__lead { font-weight: 700; font-size: max(14px, calc(17 * var(--u))); }
.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(12 * var(--u));
  margin-top: calc(14 * var(--u));
}
.footer__links a {
  position: relative;
  display: grid;
  gap: 2px;
  padding: calc(14 * var(--u)) calc(36 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  border: 1.5px solid #e3dacb;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  font-size: max(13px, calc(16 * var(--u)));
  text-align: left;
  transition: border-color .15s;
}
.footer__links a:hover { border-color: var(--navy); }
.footer__links a::after {
  content: "";
  position: absolute;
  right: calc(16 * var(--u));
  top: 50%;
  width: .5em;
  height: .5em;
  border: solid var(--navy);
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.footer__links small { color: var(--navy); font-size: .75em; }
.footer__company {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: calc(22 * var(--u));
  color: var(--muted);
  font-size: max(12px, calc(13 * var(--u)));
}
.footer__company a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .footer { padding: 26px 16px 24px; }
  .footer__links { grid-template-columns: 1fr; gap: 8px; }
  .footer__links a { padding: 12px 36px 12px 14px; }
}

/* ---------- 予約フォーム ---------- */
.reserve {
  margin-top: calc(30 * var(--u));
  padding: calc(30 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
  border: 2px solid var(--yellow);
  border-radius: 16px;
  background: linear-gradient(#fffbe6, #fff8e0);
  scroll-margin-top: 12px;
}
.reserve__title {
  text-align: center;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: max(20px, calc(28 * var(--u)));
  line-height: 1.4;
}
.reserve__sub {
  margin-top: calc(6 * var(--u));
  text-align: center;
  color: var(--muted);
  font-size: max(13px, calc(15 * var(--u)));
}
.reserve__demo {
  margin-top: 8px;
  text-align: center;
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 700;
}

/* 進み具合 */
.progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(20 * var(--u)) 0 calc(22 * var(--u));
  counter-reset: p;
}
.progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #a39b8e;
  font-weight: 700;
  font-size: max(11px, calc(13 * var(--u)));
  counter-increment: p;
}
.progress li::before {
  content: counter(p);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: max(26px, calc(32 * var(--u)));
  height: max(26px, calc(32 * var(--u)));
  border-radius: 50%;
  background: #e8e0d2;
  color: #fff;
  font-family: var(--font-round);
  font-size: 1.15em;
}
.progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(max(26px, calc(32 * var(--u))) / 2 - 1px);
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e8e0d2;
}
.progress li.is-current, .progress li.is-done { color: var(--navy); }
.progress li.is-current::before, .progress li.is-done::before { background: var(--navy); }
.progress li.is-done::after { background: var(--navy); }

.reserve__form { border: 0; }
.rstep { margin: 0; padding: 0; border: 0; min-width: 0; }
.rstep__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(14 * var(--u));
  padding: 0;
  font-weight: 700;
  font-size: max(15px, calc(18 * var(--u)));
}
.rstep__title span {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-round);
  font-size: .9em;
}

/* 日程 */
.slots { display: grid; gap: calc(14 * var(--u)); }
.slots__date {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: max(14px, calc(16 * var(--u)));
}
.slots__times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8 * var(--u));
}
.slot {
  display: grid;
  gap: 2px;
  padding: calc(10 * var(--u)) 6px;
  border: 1.5px solid #ddd3c2;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.slot:hover:not(:disabled) { border-color: var(--navy); }
.slot:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.slot__time { font-weight: 700; font-size: max(15px, calc(18 * var(--u))); }
.slot__left { color: var(--navy); font-size: max(10.5px, calc(12 * var(--u))); font-weight: 500; }
.slot--few .slot__left { color: var(--red-dark); font-weight: 700; }
.slot[aria-checked="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.slot[aria-checked="true"] .slot__left { color: #fff; }
.slot:disabled { background: #f1ede6; color: #b3ab9e; cursor: not-allowed; }
.slot:disabled .slot__left { color: #b3ab9e; }
.slots__status {
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font-size: max(13px, calc(15 * var(--u)));
}
.slots__alt {
  margin-top: calc(14 * var(--u));
  color: var(--muted);
  font-size: max(12px, calc(13.5 * var(--u)));
}
.slots__alt a, .agree a, .done__small a { color: var(--navy); text-decoration: underline; }

/* 選択中の日時 */
.picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: calc(20 * var(--u));
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--navy);
  scroll-margin-top: 12px;
}
.picked__label { color: var(--muted); font-size: 12px; font-weight: 700; }
.picked__value { flex: 1; font-size: max(15px, calc(18 * var(--u))); }
.picked__change {
  padding: 6px 12px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* 入力欄 */
.field { display: grid; gap: 6px; margin-bottom: calc(16 * var(--u)); }
.field__label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: max(14px, calc(16 * var(--u))); }
.field__label em {
  padding: 1px 7px;
  border-radius: 4px;
  font-style: normal;
  font-size: 11px;
  color: #fff;
}
.req { background: var(--red); }
.opt { background: #a39b8e; }
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d6ccbb;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 16px; /* iOSでの自動ズームを防ぐ */
}
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29, 79, 128, .15); }
.field__help { color: var(--muted); font-size: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: calc(6 * var(--u)) 0 calc(18 * var(--u));
  font-size: max(13.5px, calc(15 * var(--u)));
  cursor: pointer;
}
.agree input { width: 20px; height: 20px; accent-color: var(--navy); }
.reserve__error {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fdecea;
  color: var(--red-dark);
  font-weight: 700;
  font-size: 14px;
}
.cta--submit { width: 100%; border: 0; cursor: pointer; font: inherit; }
.cta--submit:disabled { opacity: .7; cursor: wait; }
.reserve__note { margin-top: 14px; text-align: center; color: var(--muted); font-size: 12px; }

/* 完了 */
.done { text-align: center; outline: none; }
.done__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--navy);
}
.done__icon svg { width: 36px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.done__title { font-family: var(--font-round); font-weight: 900; font-size: max(19px, calc(24 * var(--u))); }
.done__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 16px auto;
  padding: 14px 18px;
  max-width: 400px;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}
.done__summary dt { color: var(--muted); font-size: 13px; }
.done__summary dd { font-weight: 700; }
.done__text { font-size: 15px; }
.done__small { margin-top: 10px; color: var(--muted); font-size: 12px; }

@media (max-width: 560px) {
  .reserve { padding: 24px 14px; }
  .slots__times { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .slot { padding: 9px 2px; }
}

/* 月ごとの見出し（残り枠） */
.slots__month + .slots__month { margin-top: calc(10 * var(--u)); }
.slots__month { display: grid; gap: calc(14 * var(--u)); }
.slots__monthname {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: max(14px, calc(16 * var(--u)));
}
.slots__left {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: .85em;
}
.slots__left b { margin: 0 2px; color: var(--red); font-size: 1.25em; }
.slots__left.is-closed { background: #e8e0d2; color: var(--muted); }
.slots__closed {
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.slots__times { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

/* 外観パースは後日プレゼント（フローの補足ラベル） */
.flow__list .flow__gift {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff4c2;
  color: var(--ink);
  font-weight: 700;
  font-size: max(12px, calc(13 * var(--u)));
}
.flow__list .flow__gift::before { content: "🎁 "; }

/* =========================================================
   スマートフォン：文字を大きく読みやすく（最後に読み込ませて優先）
   ========================================================= */
@media (max-width: 560px) {
  body { line-height: 1.7; }

  .ok-chips li { font-size: 13.5px; padding: 5px 11px; }
  .cta-points { font-size: 14px; gap: 4px 16px; }
  .cta__label { font-size: 18px; }

  .photos__msg { left: 26%; width: 48%; font-size: 4.5cqw; }

  .sec-title { font-size: 21px; }
  .sec-lead { font-size: 15px; }

  .checklist button { font-size: 15.5px; padding: 12px 12px 12px 42px; }
  .check__count { font-size: 17px; }
  .check__msg { font-size: 15.5px; }

  .step__no { font-size: 12px; }
  .step__name { font-size: 15px; }
  .step__now { font-size: 12px; }
  .caution__title { font-size: 17px; }
  .caution__list li { font-size: 15.5px; }
  .caution__answer { font-size: 16px; }

  .flow__list b { font-size: 17px; }
  .flow__list p { font-size: 15px; }
  .flow__list .flow__gift { font-size: 13px; }

  .bonus__tag { font-size: 16px; }
  .bonus__lead { font-size: 22px; }
  .bonus__note { font-size: 14.5px; padding: 0 8px; }

  .info__card dt { font-size: 14.5px; }
  .info__val { font-size: 24px; }
  .info__card dd > small { font-size: 13px; }
  .scarcity { font-size: 15px; line-height: 1.75; }

  .faq summary { font-size: 16px; }
  .faq details p { font-size: 15.5px; }

  .brand__points li { font-size: 13.5px; }

  .reserve__title { font-size: 22px; }
  .reserve__sub { font-size: 15px; }
  .progress li { font-size: 12.5px; }
  .rstep__title { font-size: 17px; }
  .slots__date { font-size: 16px; }
  .slot__time { font-size: 18px; }
  .slot__left { font-size: 13px; }
  .slots__alt { font-size: 14px; }
  .field__label { font-size: 16px; }
  .field__help { font-size: 13px; }
  .agree { font-size: 15.5px; }
  .reserve__note { font-size: 13px; }
  .done__text { font-size: 16px; }
  .done__small { font-size: 13px; }

  .footer__lead { font-size: 16px; }
  .footer__links a { font-size: 15.5px; }
  .footer__company { font-size: 13.5px; }

  .sticky-cta__text { font-size: 12.5px; }
  .sticky-cta__btn { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .sec-title { font-size: 20px; }
  .sec-title span { padding: 0 24px; background-size: calc(100% - 48px) 100%; }
  .sec-title span::before, .sec-title span::after { width: 14px; }
}

/* 改行の調整：.nb の中では改行しない／最後の行が短くなりすぎないようにする */
.nb { display: inline-block; }
/* text-wrap（一括指定）だと white-space: nowrap を打ち消してしまうため、text-wrap-style を使う */
.lp p, .lp li, .lp summary, .lp dd { text-wrap-style: pretty; }
.sec-title span, .checklist button span { text-wrap-style: balance; }
@media (max-width: 560px) {
  .flow .sec-title { font-size: 18.5px; }
}
@media (max-width: 560px) {
  .sec-title { letter-spacing: .02em; }
}

/* スマホでも特徴の丸を4つ横並びに */

/* ---------- 参加特典（スタイリッシュ版） ---------- */
.bonus {
  position: relative;
  isolation: isolate;
  grid-template-columns: 1fr calc(300 * var(--u));
  background: linear-gradient(135deg, #133a5e 0%, #1a4d7c 55%, #215c92 100%);
  overflow: hidden;
}
.bonus::before { /* 画像の後ろのやわらかい光 */
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  top: 50%;
  width: 60%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%);
}
.bonus__text { padding: calc(30 * var(--u)) 0 calc(30 * var(--u)) calc(34 * var(--u)); }
.bonus__eyebrow {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: max(10px, calc(12 * var(--u)));
  letter-spacing: .35em;
  color: rgba(255, 255, 255, .6);
}
.bonus__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--yellow);
  font-family: var(--font-base);
  font-weight: 900;
  font-size: max(18px, calc(22 * var(--u)));
  letter-spacing: .2em;
}
.bonus__tag::after { /* 細いライン */
  content: "";
  width: calc(48 * var(--u));
  min-width: 32px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.bonus__lead {
  margin-top: calc(10 * var(--u));
  transform: none;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: max(20px, calc(27.5 * var(--u)));
  line-height: 1.45;
  letter-spacing: .04em;
  text-shadow: none;
  white-space: nowrap !important; /* 指定した位置（「家」のあと）でだけ改行する */
}
.bonus__em {
  color: var(--yellow);
  font-size: 1em;
  background: linear-gradient(transparent 82%, rgba(253, 233, 106, .45) 82%);
}
.bonus__note {
  margin-top: calc(14 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .2);
  max-width: 24em;
  color: rgba(255, 255, 255, .82);
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.7;
  opacity: 1;
}
.bonus__img { /* 画像のふちを背景になじませる */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-composite: intersect;
}

@media (max-width: 560px) {
  .bonus { grid-template-columns: 1fr; }
  .bonus::before { right: auto; left: 50%; top: auto; bottom: -30%; width: 110%; transform: translateX(-50%); }
  .bonus__text { padding: 34px 20px 8px; text-align: center; }
  .bonus__eyebrow { font-size: 11px; }
  .bonus__tag { font-size: 19px; }
  .bonus__tag::before { /* スマホは中央寄せなので左右にライン */
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: .8;
  }
  .bonus__lead { font-size: 26px; transform: none; }
  .bonus__note { font-size: 14px; max-width: none; margin-left: auto; margin-right: auto; }
}

/* =========================================================
   トップ（キービジュアル）
   デザイン画像どおりの配置。--u 単位なので、画面幅に合わせて全体が同じ比率で縮小します
   ========================================================= */
.kv {
  --hand: "Yusei Magic", "Klee One", var(--font-base);
  position: relative;
  isolation: isolate;
  height: calc(720 * var(--u));
  overflow: hidden;
  color: var(--ink);
}
.kv__bg { /* 写真の上側（見出しの後ろ）をやわらかくぼかして延長 */
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("images/hero-photo.jpg") center top / cover;
  filter: blur(10px) brightness(1.1) saturate(.9);
  transform: scale(1.15);
}
.kv__photo {
  position: absolute;
  z-index: -2;
  left: 0;
  top: calc(195 * var(--u));
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
}
.kv__veil { /* 見出しを読みやすくする白いもや */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(255, 252, 247, .9) 0%,
    rgba(255, 252, 247, .78) 24%,
    rgba(255, 252, 247, .35) 34%,
    rgba(255, 252, 247, 0) 40%);
}

/* ロゴ */
.kv__logo { position: absolute; left: calc(24 * var(--u)); top: calc(20 * var(--u)); }
.kv__logo .logo__mark { font-size: calc(40 * var(--u)); }
.kv__logo .logo__en { font-size: calc(28 * var(--u)); }
.kv__logo .logo__kana { font-size: max(7px, calc(9 * var(--u))); }

/* ＼ 土地がなくてもOK！ ／ */
.kv__catch {
  position: absolute;
  top: calc(24 * var(--u));
  left: calc(300 * var(--u));
  width: calc(340 * var(--u));
  text-align: center;
  font-family: var(--hand);
  font-size: calc(28 * var(--u));
  letter-spacing: .06em;
  line-height: 1.3;
  -webkit-text-stroke: calc(.6 * var(--u)) currentColor;
}
.kv__catch span { position: relative; display: inline-block; padding: 0 calc(26 * var(--u)); }
.kv__catch span::before, .kv__catch span::after {
  content: "";
  position: absolute;
  top: 5%;
  width: calc(3 * var(--u));
  height: 90%;
  border-radius: 2px;
  background: var(--ink);
}
.kv__catch span::before { left: 0; transform: rotate(-25deg); }
.kv__catch span::after { right: 0; transform: rotate(25deg); }

/* 見出し */
.kv__title {
  font-family: var(--hand);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: calc(1.4 * var(--u)) currentColor; /* マーカーで書いたような太さに */
}
.kv__line1 {
  position: absolute;
  left: calc(140 * var(--u));
  top: calc(70 * var(--u));
  font-size: calc(54 * var(--u));
  letter-spacing: .02em;
  white-space: nowrap;
}
.kv__3d {
  position: relative;
  display: inline-block;
  margin-right: calc(6 * var(--u));
  color: var(--navy);
  font-size: calc(106 * var(--u));
  letter-spacing: -.02em;
  vertical-align: calc(-6 * var(--u));
}
.kv__3d::after { /* 黄色のマーカー */
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -8%;
  bottom: 4%;
  height: 20%;
  border-radius: 40% 10% 40% 10%;
  background: var(--yellow);
  transform: rotate(-3deg);
}
.kv__house {
  position: absolute;
  left: calc(522 * var(--u));
  top: calc(76 * var(--u));
  width: calc(96 * var(--u));
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kv__line2 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(180 * var(--u));
  text-align: center;
  font-size: calc(68 * var(--u));
  letter-spacing: .03em;
  white-space: nowrap;
}
.kv__no { font-size: .72em; }
.kv__line3 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(264 * var(--u));
  text-align: center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: calc(50 * var(--u));
  letter-spacing: .12em;
  -webkit-text-stroke: 0;
}

/* 黄色の吹き出し */
.kv__bubble {
  position: absolute;
  left: calc(484 * var(--u));
  top: calc(248 * var(--u));
  display: grid;
  place-items: center;
  width: calc(204 * var(--u));
  height: calc(114 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, #fff08f, #fde96a 70%);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: calc(15.5 * var(--u));
  line-height: 1.7;
  text-align: center;
  letter-spacing: .04em;
}

/* 特徴の丸（4つ） */
.kv__points {
  position: absolute;
  left: calc(22 * var(--u));
  right: calc(22 * var(--u));
  bottom: calc(10 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6 * var(--u));
}
.kv__points li {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  border-radius: 50%;
  background: rgba(255, 253, 249, .95);
  box-shadow: 0 6px 18px rgba(60, 45, 20, .16);
  text-align: center;
  font-weight: 700;
  font-size: calc(17 * var(--u));
  line-height: 1.5;
  white-space: nowrap;
}
.kv__points svg {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ファーストビュー直下の予約ボタン */
.cta-block {
  padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
  background: linear-gradient(#fff, #fffaf3);
}

@media (max-width: 560px) {
  .kv__bubble {
    left: auto;
    right: 6px;
    top: calc(262 * var(--u));
    width: 128px;
    height: 80px;
    font-size: 10.5px;
    line-height: 1.55;
  }
  .kv__points { left: 10px; right: 10px; gap: 5px; }
  .kv__points li { gap: 3px; font-size: 11.5px; line-height: 1.3; letter-spacing: -.02em; }
  .kv__points svg { width: 22px; height: 22px; }
  .cta-block { padding: 22px 16px 28px; }
}

/* 施工例写真（2枚組の1枚画像）とメッセージ */
.photos { display: block; }
.photos .photos__img { width: 100%; height: auto; }
.photos__msg {
  left: 50%;
  top: auto;
  bottom: 12%;
  width: auto;
  padding: 1.6cqw 3.2cqw;
  transform: translateX(-50%);
}
@media (max-width: 560px) {
  .photos__msg { left: 50%; width: auto; font-size: 4.2cqw; }
}

/* 施工事例（ページ下部の写真3枚） */
.gallery-wrap { padding-top: calc(28 * var(--u)); background: #fff; }
.gallery__title {
  margin-bottom: calc(14 * var(--u));
  text-align: center;
  font-weight: 700;
  font-size: max(15px, calc(18 * var(--u)));
  letter-spacing: .08em;
}
.gallery__title span {
  display: block;
  color: var(--navy);
  font-size: .6em;
  letter-spacing: .35em;
}
.gallery { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.gallery img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }

/* 参加特典：実際にお渡しする提案シートを、重ねたカードのように見せる */
.bonus { grid-template-columns: 1fr; text-align: center; }
.bonus::before { left: 50%; right: auto; top: auto; bottom: -25%; width: 90%; transform: translateX(-50%); }
.bonus__text { padding: calc(38 * var(--u)) calc(24 * var(--u)) 0; }
.bonus__tag::before { /* 中央寄せなので左右にライン */
  content: "";
  width: calc(48 * var(--u));
  min-width: 32px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.bonus__note { margin-left: auto; margin-right: auto; }
.bonus__visual {
  position: relative;
  width: min(100%, calc(600 * var(--u)));
  aspect-ratio: 600 / 470;
  margin: calc(26 * var(--u)) auto 0;
}
.bonus__sheet {
  position: absolute;
  width: 84%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.bonus__sheet--back { left: 0; top: 0; transform: rotate(-5deg); }
.bonus__sheet--front { right: 0; bottom: calc(26 * var(--u)); transform: rotate(3deg); }
@media (max-width: 560px) {
  .bonus__text { padding: 34px 20px 0; }
  .bonus__visual { width: calc(100% - 24px); margin-top: 22px; }
  .bonus__sheet--front { bottom: 18px; }
}
.bonus { padding-bottom: calc(30 * var(--u)); }
@media (max-width: 560px) { .bonus { padding-bottom: 24px; } }
.bonus__caption {
  margin-top: calc(8 * var(--u));
  color: rgba(255, 255, 255, .7);
  font-size: max(11px, calc(12 * var(--u)));
}

/* お悩みチェック横のイラスト（白背景を、乗算でクリーム色の背景になじませる） */
.check__illust {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 560px) {
  .check__illust { width: 200px; }
}

/* 家づくりの最初の一歩（STEP）：
   iPhone（Safari）で1文字ずつ縦に折り返されることがあるため、
   HTMLで改行した位置以外では折り返さないよう固定する */
.step { min-width: 0; }
.step__no, .step__name {
  display: block;
  width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;
}

/* 画面下に追従する予約ボタン：小さいスマホでも1行に収める */
.sticky-cta__btn { white-space: nowrap; }
@media (max-width: 360px) {
  .sticky-cta { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .sticky-cta__text { font-size: 11px; }
  .sticky-cta__btn { font-size: 14.5px; letter-spacing: 0; }
  .cta__label { font-size: 16px; letter-spacing: .02em; }
}

/* ---------- 代表メッセージ ---------- */
.staff {
  display: grid;
  grid-template-columns: calc(230 * var(--u)) 1fr;
  gap: calc(24 * var(--u));
  align-items: center;
  margin-top: calc(30 * var(--u));
  padding: calc(24 * var(--u));
  border-radius: 16px;
  background: var(--card);
}
.staff__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 12px;
}
.staff__label {
  color: var(--navy);
  font-weight: 700;
  font-size: max(13px, calc(14 * var(--u)));
  letter-spacing: .08em;
}
.staff__name {
  margin: 2px 0 calc(12 * var(--u));
  font-family: var(--font-round);
  font-weight: 900;
  font-size: max(22px, calc(28 * var(--u)));
  letter-spacing: .1em;
  line-height: 1.3;
}
.staff__name small {
  display: block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: max(12px, calc(13 * var(--u)));
  letter-spacing: .04em;
  color: var(--muted);
}
.staff__msg { font-size: max(14px, calc(15.5 * var(--u))); line-height: 1.85; }
.staff__msg + .staff__msg { margin-top: calc(8 * var(--u)); }

/* ---------- 会場・アクセス ---------- */
.access {
  padding: calc(46 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
  background: var(--cream);
}
.access__body {
  display: grid;
  grid-template-columns: calc(220 * var(--u)) 1fr;
  gap: calc(24 * var(--u));
  align-items: start;
  margin-top: calc(26 * var(--u));
}
.access__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.access__info { display: grid; gap: calc(14 * var(--u)); }
.access__info > div { padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid #e6dfd2; }
.access__info dt {
  color: var(--navy);
  font-weight: 700;
  font-size: max(12px, calc(13 * var(--u)));
  letter-spacing: .1em;
}
.access__info dd { margin-top: 2px; font-size: max(14.5px, calc(16 * var(--u))); line-height: 1.7; }
.access__info dd small { font-size: .85em; color: var(--muted); }
.access__info a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.access__free {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--yellow);
  font-style: normal;
  font-weight: 700;
  font-size: .9em;
}
.access__map {
  margin-top: calc(24 * var(--u));
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e8e3da;
}
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.access__link { margin-top: 10px; text-align: right; font-size: 14px; }
.access__link a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* ---------- フッターの会社情報 ---------- */
.company {
  margin-top: calc(26 * var(--u));
  padding-top: calc(20 * var(--u));
  border-top: 1px solid #e6dfd2;
  color: var(--muted);
  font-size: max(12.5px, calc(13 * var(--u)));
  line-height: 1.8;
}
.company__name { color: var(--ink); font-weight: 700; font-size: 1.15em; }
.company a { color: inherit; }
.company__name a { text-decoration: none; }
.company__links { margin-top: 8px; }
.company__links a { text-decoration: underline; }

@media (max-width: 560px) {
  .staff { grid-template-columns: 1fr; padding: 20px 18px 22px; gap: 16px; text-align: left; }
  .staff__photo { width: 200px; margin: 0 auto; }
  .staff__label, .staff__name { text-align: center; }
  .staff__msg { font-size: 15.5px; }
  .access { padding: 40px 16px 32px; }
  .access__body { grid-template-columns: 1fr; gap: 18px; }
  .access__photo { aspect-ratio: 16 / 10; object-position: center 34%; }
  .access__info dd { font-size: 15.5px; }
  .access__map { aspect-ratio: 4 / 3; }
  .company { font-size: 13px; }
}

/* 改行位置をHTMLで決めている短いラベル：iPhoneでも勝手に折り返さない */
.brand__points li, .kv__points li, .step__no, .step__name {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
@media (max-width: 360px) {
  .brand__points { gap: 6px; }
  .brand__points li { font-size: 12px; letter-spacing: -.02em; padding-left: 2px; padding-right: 2px; }
}