/* =========================================================
   アイフルホーム 漫画LP
   PC: 1440px カンバス基準（1rem = 10px @1440、以下は縮小）
   SP: 393px カンバス基準（1rem = 10px @393）
   ========================================================= */
:root {
  --fb: "Toppan Bunkyu Gothic", "ToppanBunkyuGothicPr6N-DB", "Noto Sans JP", sans-serif;
  --fh: "Toppan Bunkyu Midashi Gothic", "ToppanBunkyuMidashiGothicStdN-ExtraBold", "Noto Sans JP", sans-serif;
  --brown: #524a46;
  --coral: #eb7360;
  --salmon: #f9a092;
  --orange: #ff7763;
  --bg: #fdfcfa;
}

/* 1440px時に1rem=10px。それ以外の幅は比率を保って拡縮（JSがスクロールバー幅を除いて補正） */
html { font-size: calc(100vw / 144); }
@media (max-width: 767px)  { html { font-size: calc(100vw / 39.3); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--brown);
  font-family: var(--fb);
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
img, picture { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h2, h3 { font-family: var(--fh); font-weight: 800; }
b, strong, em { font-family: var(--fh); font-weight: 800; font-style: normal; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
.sp-br { display: none; }

/* ---------- 共通 ---------- */
.header__inner, .fv__inner, .sv__inner, .manga__inner, .cases1__inner,
.cases2__inner, .message__inner, .campaign__inner {
  position: relative;
  width: 144rem;
  margin: 0 auto;
}
.fv, .sv, .manga, .cases1, .cases2, .message, .campaign { position: relative; overflow: hidden; }

/* 固定のドット背景（Figma「固定背景」: 1600×1200の水玉画像を右90°回転し、左右2枚・不透明度30%・画面に固定）。
   背景が透明な区画（漫画の区画・SVの下端）からだけ見える */
.fixed-bg { position: fixed; z-index: -1; top: 0; left: -.5rem; width: 145.05rem; height: 100vh; opacity: .3; pointer-events: none; }
.fixed-bg::before, .fixed-bg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%;
  background: url(../assets/img/dots_bg.webp) center / cover no-repeat;
}
.fixed-bg::before { left: 0; }
.fixed-bg::after { right: 0; }
/* SVは下端16.8%で透明に抜ける（Figma）。CASEの区画は不透明＝ドットを隠す。
   上下の帯は漫画との間隔調整で重なる分（上2.1rem・下2.7rem）を透明にして、ドットの境目をFigmaと同じ位置に保つ */
.sv { background: linear-gradient(180deg, var(--bg) 83.173%, rgba(253, 252, 250, 0) 100%); }
.cases2 { background: linear-gradient(transparent 2.1rem, var(--bg) 2.1rem, var(--bg) calc(100% - 2.7rem), transparent calc(100% - 2.7rem)); }

.halftone {
  position: absolute;
  left: 0; top: 0;
  width: 55.737rem;
  height: 27.728rem;
  transform-origin: 0 0;
  pointer-events: none;
}

/* 見出しの斜線飾り */
.deco-title { white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .8rem; }
.deco-title__l, .deco-title__r { width: 1.9rem; height: 2.645rem; }
.deco-title__r { transform: scaleX(-1); } /* Figmaの右側は左右反転（書き出しSVGは反転前の形） */

/* CTA（吹き出し＋ボタン） */
.cta { position: absolute; display: block; width: 44rem; height: 10.4rem; }
.cta__balloon {
  position: absolute; left: 8rem; top: 0; z-index: 1; /* 吹き出しはボタンの手前（Figma） */
  width: 28.1rem; height: 5.561rem;
  padding-top: .6rem;
  background: url(../assets/svg/pc_message_union.svg) no-repeat 0 0 / 100% 100%;
  filter: drop-shadow(0 .4rem 1rem rgba(0, 0, 0, .16));
  text-align: center; white-space: nowrap;
  font-family: var(--fh); font-weight: 800; font-size: 1.6rem; line-height: 3.9rem;
  color: var(--brown);
}
.cta__num { font-size: 2.6rem; color: var(--orange); }
.cta__unit { color: var(--orange); }
.cta__btn {
  position: absolute; left: 0; top: 3.8rem;
  width: 100%; height: 6.6rem;
  border-radius: 10rem;
  background: linear-gradient(180deg, #ff9a8b 0%, #e65252 77.885%); /* Figma: 上→下 */
  box-shadow: inset 0 0 0 .1rem var(--brown);
  transition: opacity .2s;
}
.cta:hover .cta__btn { opacity: .85; }
.cta__label {
  position: absolute; left: 8.1rem; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-family: var(--fh); font-weight: 800; line-height: 3.3rem;
  color: #fff; white-space: nowrap;
}
.cta__l1 { font-size: 2.1rem; letter-spacing: -.02em; }
.cta__l0 { font-size: 1.8rem; letter-spacing: -.02em; }
.cta__l2 { font-size: 2.2rem; letter-spacing: -.02em; }
.cta__arrow { position: absolute; right: 7rem; top: 2.7rem; width: 1.125rem; height: 1.3rem; }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 6rem; background: #fff; }
body { padding-top: 6rem; }
#manga, #point, #case, #gift, #terms { scroll-margin-top: 6rem; }
.header__inner { height: 6rem; }
.header__logo { position: absolute; left: 30.7rem; top: 2.1rem; width: 11.72rem; }
.header__logo img { width: 100%; height: auto; }
.header__menu { position: absolute; left: 115.8rem; top: 1.8rem; width: 2.4rem; height: 2.3rem; }
.header__menu::before { content: ""; position: absolute; inset: -1.2rem; } /* タップ領域を広げる */
.header__menu span {
  position: absolute; left: 0; width: 2.4rem; height: .2rem;
  border-radius: .1rem; background: #fe8d7d;
  transition: transform .3s ease;
}
.header__menu span:nth-child(1) { top: .5rem; }
.header__menu span:nth-child(2) { top: 1.5rem; }
/* 線を画素の境目に揃えて、拡縮時に線がにじんで2本に見えるのを防ぐ */
@supports (top: round(1.5rem, 1px)) {
  .header__menu { top: round(1.8rem, 1px); }
  .header__menu span { height: max(2px, round(.2rem, 1px)); }
  .header__menu span:nth-child(1) { top: round(.5rem, 1px); }
  .header__menu span:nth-child(2) { top: round(1.5rem, 1px); }
}
.header__menu.is-open span:nth-child(1) { transform: translateY(.5rem) rotate(45deg); }
.header__menu.is-open span:nth-child(2) { transform: translateY(-.5rem) rotate(-45deg); }

/* ページ内メニュー（Figma未定義のため、LP内の書体・点線・CTAで構成） */
.gnav { position: fixed; top: 6rem; left: 0; right: 0; bottom: 0; z-index: 90; visibility: hidden; transition: visibility 0s .3s; }
.gnav.is-open { visibility: visible; transition: none; }
.gnav__overlay { position: absolute; inset: 0; background: rgba(18, 18, 18, .45); opacity: 0; transition: opacity .3s; }
.gnav.is-open .gnav__overlay { opacity: 1; }
.gnav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48rem;
  padding: 1.2rem 2rem 4rem; background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .3s ease;
}
.gnav.is-open .gnav__panel { transform: none; }
.gnav__list a {
  display: block; padding: 2.2rem .8rem;
  border-bottom: .1rem dashed #cfc2be;
  font-family: var(--fh); font-weight: 800; font-size: 1.8rem; line-height: 1.5;
  transition: opacity .2s;
}
.gnav__list a:hover { opacity: .6; }
.gnav__cta { position: relative; height: 10.4rem; margin-top: 3.6rem; }
.gnav__cta .cta { left: 0; top: 0; }

/* 追従CTA（PC: 画面下の帯の中央。帯の高さはボタン分だけで、吹き出しは帯の上にはみ出す）
   CTAは --fls（JSが画面幅から計算）で縮尺をかけ、どの画面幅でも幅396px・ボタン高さ約59pxで出す */
.float-bar {
  position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; height: 84px;
  background: rgba(253, 252, 250, .94);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 -4px 16px rgba(82, 74, 70, .08);
  transform: translateY(130px); visibility: hidden;
  transition: transform .35s ease, visibility 0s .35s;
}
.float-bar.is-show { transform: none; visibility: visible; transition: transform .35s ease; }
.cta--float {
  left: 50%; top: auto; bottom: 12px;
  transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--fls, .9));
}

/* ---------- FV ---------- */
.fv { background: var(--bg); }
.fv__inner { height: 63.5rem; }
.fv__ht-tl { transform: translate(-13.7rem, 4.5758rem) matrix(.95106, -.30902, .30902, .95106, 0, 0) scale(1.50234); }
.fv__ht-br { transform: translate(75.0729rem, 91.8944rem) matrix(.95106, -.30902, -.30902, -.95106, 0, 0) scale(1.50234); }

.fv__photo {
  position: absolute; left: 65.225rem; top: -8.912rem;
  width: 56.575rem; height: 56.575rem;
  border-radius: 50%; overflow: hidden;
}
.fv__photo img { position: absolute; left: -15.543rem; top: 7.46rem; width: 84.028rem; height: 56.026rem; }

.fv__t1, .fv__t2, .fv__t3 { position: absolute; }
.fv__t1 { left: 28.849rem; top: 3.039rem; width: 34.445rem; }
.fv__t2 { left: 28.689rem; top: 8.379rem; width: 32.629rem; }
.fv__t3 { left: 27.197rem; top: 27.806rem; width: 35.958rem; }
.fv__t1 img, .fv__t2 img, .fv__t3 img { width: 100%; height: auto; }

.fv__band {
  position: absolute; left: -1.3rem; top: 39.6rem;
  width: 147.4rem; height: 10rem;
  background: #feffec; border: .111rem solid #000;
}
.fv__band-text {
  position: absolute; left: 0; right: 0; top: 3.785rem;
  text-align: center;
  font-family: var(--fh); font-weight: 800; font-size: 2.62rem; line-height: 3.9rem;
  color: var(--brown);
}
.fv__band-text em { color: var(--coral); }

.fv__ribbon { position: absolute; left: 57.92rem; top: 36.7rem; width: 27.85rem; height: 5.519rem; }
.fv__ribbon img { width: 100%; height: auto; }
.fv__ribbon-text {
  position: absolute; left: 0; right: 0; top: .69rem;
  text-align: center; text-indent: .09em; letter-spacing: .09em;
  font-size: 2.483rem; line-height: 3.7rem; color: #fff;
}
.fv__cta { left: 50rem; top: 50.7rem; }

/* ---------- こんな方におすすめ ---------- */
.sv__inner { height: 38rem; }
.sv__title { position: absolute; left: 53.3rem; top: 3.4rem; width: 37rem; height: 5.4rem; }
.sv__title span { font-size: 3.6rem; line-height: 5.4rem; color: var(--coral); }
.sv__title small { font-size: 3.2rem; }
.sv__list {
  position: absolute; left: 32.5rem; top: 11.4rem; width: 78.6rem;
  display: grid; grid-template-columns: 38.6rem 38.6rem;
  column-gap: 1.4rem; row-gap: 1.6rem;
}
.sv__item {
  display: flex; align-items: center;
  height: 9.6rem; padding: 2rem;
  background: #fff; border: .1rem dashed #b6b6b6; border-radius: .5rem;
}
.sv__item p { font-size: 1.8rem; line-height: 2.7rem; white-space: nowrap; }
.sv__item--land    { gap: 1.8rem; }
.sv__item--company { gap: 1.3rem; }
.sv__item--start   { gap: 1rem; }
.sv__item--child   { gap: 1.6rem; }
.sv__item--land .sv__ico    { width: 3.093rem; }
.sv__item--company .sv__ico { width: 4.245rem; }
.sv__item--start .sv__ico   { width: 4.652rem; }
.sv__item--child .sv__ico   { width: 3.608rem; }
.sv__ico { flex: none; height: auto; }
.sv__line { display: none; }

/* ---------- 漫画 ---------- */
.manga--1 .manga__inner { height: 361rem; }
.manga--2 .manga__inner { height: 249.1rem; }
.manga--3 .manga__inner { height: 258rem; }
/* 漫画の枠と、前後の漫画以外の要素との間隔を全箇所57pxに統一（西宮指示 2026-09-28。基準=漫画1〜9の下と「住宅会社を選ぶ前に」の間） */
.manga--1 { margin-top: -1.7rem; }
.manga--2 { margin-top: 4.1rem; margin-bottom: -2.1rem; }
.manga--3 { margin-top: -2.7rem; }
.manga__panel { position: absolute; left: 37.8rem; width: 67.981rem; overflow: hidden; }
.manga__panel img { width: 100%; height: auto; }
.manga__panel--01 { top: 1rem;       height: 34.431rem; }
.manga__panel--02 { top: 35.431rem;  height: 62.191rem; }
.manga__panel--03 { top: 97.622rem;  height: 47.209rem; }
.manga__panel--04 { top: 144.831rem; height: 29.369rem; }
.manga__panel--05 { top: 174.2rem;   height: 47.2rem; }
.manga__panel--06 { top: 221.4rem;   height: 28.8rem; }
.manga__panel--06 img { margin-top: -.45rem; }
.manga__panel--07 { top: 250.2rem;   height: 29.2rem; }
.manga__panel--08 { top: 279.4rem;   height: 47.2rem; }
.manga__panel--09 { top: 326.6rem;   height: 29.8rem; }
.manga__panel--09 img { margin-top: -.44rem; }
.manga__panel--10 { top: 1rem;       height: 29.207rem; }
.manga__panel--11 { top: 30.207rem;  height: 47.209rem; }
.manga__panel--12 { top: 77.416rem;  height: 47.209rem; }
.manga__panel--13 { top: 124.625rem; height: 29.075rem; }
.manga__panel--14 { top: 153.7rem;   height: 47.2rem; }
.manga__panel--15 { top: 200.9rem;   height: 47.209rem; }
.manga__panel--16 { top: 1rem;       height: 47.209rem; }
.manga__panel--17 { top: 48.209rem;  height: 29.421rem; }
.manga__panel--18 { top: 77.63rem;   height: 29.498rem; }
.manga__panel--19 { top: 107.128rem; height: 29.322rem; }
.manga__panel--20 { top: 136.45rem;  height: 47.163rem; }
.manga__panel--21 { top: 183.613rem; height: 69.24rem; }

/* ---------- 住宅会社を選ぶ前にまず考えたいこと ---------- */
.cases1 { background: #c4e8e4; }
.cases1__inner { height: 80rem; }
.cases1__head { position: absolute; left: 0; top: 0; width: 100%; height: 21.6rem; background: rgba(255, 255, 255, .5); }
.cases1__title { position: absolute; left: -1.3rem; right: 1.3rem; top: 5.6rem; text-align: center; font-size: 3.2rem; line-height: 4.8rem; }
.cases1__lead { position: absolute; left: -1.3rem; right: 1.3rem; top: 11.5rem; text-align: center; font-size: 1.7rem; line-height: 2.6rem; }
.cases1__band { position: absolute; left: 0; top: 48.8rem; width: 100%; height: 31.3rem; }
.cases1__band--sp { display: none; }
.cases1__ht { transform: translate(109.7686rem, 93.2949rem) matrix(.95106, -.30902, -.30902, -.95106, 0, 0); }

.cases1__bubble { position: absolute; }
.cases1__bubble img { width: 100%; height: auto; }
.cases1__bubble--1 { left: 19.1rem; top: 26.5rem; width: 29.1rem; }
.cases1__bubble--2 { left: 51.1rem; top: 26.5rem; width: 30.4rem; }
.cases1__bubble--3 { left: 84.4rem; top: 25.4rem; width: 40.2rem; }
.cases1__type { position: absolute; color: #fff; font-size: 1.7rem; line-height: 1.53; text-align: center; }
.cases1__type b { font-size: 1.9rem; color: #fef8a6; }
.cases1__type--1 { left: 24.3rem; top: 30.8rem; width: 18.7rem; }
.cases1__type--2 { left: 56.3rem; top: 29.3rem; width: 20.1rem; }
.cases1__type--3 { left: 88.4rem; top: 28.2rem; width: 32.2rem; }
.cases1__house { position: absolute; }
.cases1__house img { width: 100%; height: auto; }
img.cases1__house { height: auto; }
.cases1__house--1 { left: 28.407rem; top: 38.3rem; width: 10.4rem; }
.cases1__house--2 { left: 61rem;     top: 37.8rem; width: 11.1rem; }
.cases1__house--3 { left: 98.784rem; top: 38.9rem; width: 11.3rem; }

.cases1__box { position: absolute; left: 36.9rem; top: 58.9rem; width: 69.8rem; height: 17.5rem; background: #fff; }
.cases1__marker { position: absolute; height: .8rem; background: #fef8a6; }
.cases1__marker--1 { left: 11.3rem; top: 9.6rem; width: 51rem; }
.cases1__marker--2 { display: none; }
.cases1__msg { position: absolute; left: 4.9rem; top: 3.5rem; width: 60rem; text-align: center; font-size: 1.8rem; }
/* 文字幅の合計が枠幅とちょうど同じ＝画面幅の端数で溢れて折り返すので、PCは行の途中で折り返さない（1728px幅で発生） */
.cases1__msg span { display: block; white-space: nowrap; }
.cases1__msg-l1 { line-height: 3.06rem; }
.cases1__msg-l2 { position: relative; top: .3rem; line-height: 4.08rem; }
.cases1__msg-l2 b { font-size: 2.4rem; color: #47999c; }
.cases1__msg-l3 { line-height: 4.14rem; }

/* ---------- CASE ---------- */
.cases2__inner { height: 59.8rem; }
.cases2__ht { display: none; }
.cases2__list { position: absolute; left: 16rem; top: 4.9rem; display: flex; gap: 1.6rem; }
.case {
  width: 36.1rem; min-height: 49.9rem;
  padding: 1rem 1.5rem 1.3rem;
  background: #fff; border-radius: 1rem;
  box-shadow: 0 .4rem 3.4rem rgba(0, 0, 0, .05);
}
.case__head { display: flex; align-items: center; gap: .9rem; height: 3.3rem; }
.case__head img { width: 3.078rem; height: 3rem; }
.case__head span { font-size: 2.2rem; line-height: 3.3rem; color: var(--salmon); }
.case__pill {
  width: fit-content; margin-top: .8rem;
  padding: .5rem 1.5rem .3rem 1.7rem;
  background: #ffe9e6; border-radius: 2rem;
  font-size: 1.7rem; line-height: 2.3rem;
}
.case__photo { margin-top: .8rem; width: 33.1rem; height: 22rem; overflow: hidden; }
.case__photo img { width: 100%; height: 100%; object-fit: cover; }
.case__photo--chart { height: 22.1rem; background: #f4f5f7; }
.case__photo--chart img { object-fit: contain; }
.case__body { margin-top: .8rem; font-size: 1.5rem; line-height: 2.4rem; white-space: nowrap; }
.hl {
  font-size: 1.5rem; line-height: 2.4rem;
  padding-bottom: .2rem;
  background: linear-gradient(#ffe9e6, #ffe9e6) no-repeat 0 100% / 100% .9rem;
}

/* ---------- メッセージ ---------- */
.message { background: #fff; }
.message__inner { height: 63.8rem; }
.message__photo { position: absolute; left: -3.2rem; top: -21.1rem; width: 150rem; height: 106rem; filter: blur(.25rem); }
.message__title {
  position: absolute; left: 0; right: 0; top: 5.4rem;
  text-align: center; color: #fff;
  font-size: 3.2rem; line-height: 5.12rem;
  text-shadow: 0 .2rem .4rem rgba(0, 0, 0, .2);
}
.message__box { position: absolute; left: 48.394rem; top: 18.2rem; width: 45.869rem; height: 25.837rem; }
.message__box::before, .message__box::after { content: ""; position: absolute; z-index: 0; }
.message__box::before { left: 1.143rem; top: .887rem; width: 45.869rem; height: 26.169rem; background: var(--salmon); }
.message__box::after { left: 0; top: 0; width: 100%; height: 100%; background: #fff; }
.message__p1, .message__p2 { position: absolute; z-index: 1; left: .57rem; right: -.57rem; text-align: center; font-size: 1.7rem; line-height: 2.72rem; }
.message__p1 { top: 4.3rem; }
.message__p2 { top: 17rem; }
.message__cta { left: 49.9rem; top: 47.856rem; }
.message__cta .cta__balloon { left: 7.8rem; padding-left: .5rem; }

/* ---------- キャンペーン ---------- */
.campaign { background: linear-gradient(var(--salmon) 0 71.2rem, var(--bg) 71.2rem); padding-bottom: 120px; } /* 下余白=追従CTAの帯の逃げ */
.campaign__inner { height: 138.2rem; }
.campaign__illust { position: absolute; left: .2rem; top: 0; width: 143.5rem; }
.campaign__illust img { width: 100%; height: auto; }
.campaign__paper { position: absolute; left: 0; top: 71.2rem; width: 100%; height: 81.2rem; background: var(--bg); }
.campaign__badge { position: absolute; left: 66.1rem; top: 2.9rem; width: 11.5rem; height: 7.4rem; }
.campaign__badge-spark { position: absolute; left: 0; top: .222rem; width: 11.5rem; }
.campaign__badge-gift { position: absolute; left: 2.768rem; top: 0; width: 5.835rem; }

.gift {
  position: absolute; left: 39.8rem; top: 11.7rem;
  width: 64.3rem; height: 55.5rem;
  background: #fff; border-radius: .5rem; overflow: hidden;
}
.gift__title { position: absolute; left: 0; right: 0; top: 2.5rem; }
.gift__title span { font-size: 2.6rem; line-height: 3.9rem; color: #555; }
.gift__amount {
  position: absolute; left: 0; right: 0; top: 6.6rem;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-family: var(--fh); font-weight: 800; color: var(--orange);
}
.gift__amount-pre { font-size: 1.8rem; line-height: 2.16rem; text-align: center; }
.gift__amount-num { font-size: 4.6rem; line-height: 6.9rem; }
.gift__amount-num small { font-size: 2.6rem; }
.gift__lead {
  position: absolute; left: 0; right: 0; top: 13rem;
  text-align: center; letter-spacing: -.05em;
  font-family: var(--fh); font-weight: 800; font-size: 2.6rem; line-height: 3.9rem; color: var(--orange);
}
.gift__line { position: absolute; left: 11.25rem; width: 41.8rem; height: .1rem; background: url(../assets/svg/camp_line.svg) no-repeat 0 0 / 100% 100%; }
.gift__line--1 { top: 18rem; }
.gift__line--2 { top: 29.2rem; }
.gift__row { position: absolute; left: 17.15rem; top: 19.1rem; width: 30rem; height: 9rem; display: flex; align-items: center; gap: .6rem; }
.gift__col { width: 13.4rem; align-self: flex-start; text-align: center; font-family: var(--fh); font-weight: 800; }
.gift__when { font-size: 1.6rem; line-height: 1.92rem; color: var(--brown); }
.gift__card { margin-top: 1rem; font-size: 2rem; line-height: 1.12; letter-spacing: -.04em; color: var(--orange); }
.gift__card-num { font-size: 3.2rem; letter-spacing: 0; }
.gift__card-unit { font-size: 2.2rem; letter-spacing: 0; }
.gift__plus { width: 2rem; height: 2rem; flex: none; }
.gift__col:last-child .gift__card { letter-spacing: -.05em; }
.gift__orig { position: absolute; left: 0; right: 0; top: 30.3rem; text-align: center; font-family: var(--fh); font-weight: 800; color: var(--orange); }
.gift__orig-sub { font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -.07em; }
.gift__orig-main { font-size: 2.2rem; line-height: 3.3rem; letter-spacing: -.07em; }

.kizzuna { position: absolute; left: 0; top: 36.9rem; width: 64.3rem; height: 18.6rem; background: #e4f9f9; }
.kizzuna__title {
  position: absolute; left: 0; right: 0; top: 1.2rem;
  text-align: center; letter-spacing: -.07em;
  font-family: var(--fh); font-weight: 800; font-size: 2rem; line-height: 3rem; color: #004098;
}
.kizzuna__title small { font-size: 1.6rem; }
.kizzuna__desc { position: absolute; left: 0; right: 0; top: 4.7rem; text-align: center; letter-spacing: -.05em; font-size: 1.4rem; line-height: 2.1rem; color: #000; }
.kizzuna__x {
  position: absolute; left: 10.1rem; top: 9.7rem; width: 44rem; height: 7.6rem;
  padding: .8rem 3rem .5rem 2.9rem;
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  background: #333; border-radius: .3rem; color: #fff;
}
.kizzuna__id { font-family: var(--fh); font-weight: 800; font-size: 1.8rem; line-height: 2.7rem; white-space: nowrap; }
.kizzuna__x-text { font-size: 1.4rem; line-height: 2.1rem; letter-spacing: -.05em; white-space: nowrap; }

.terms { position: absolute; left: 26.8rem; top: 76.3rem; width: 90rem; }
.terms__block + .terms__block { margin-top: 2.8rem; }
.terms__head {
  display: flex; align-items: center; justify-content: center;
  height: 4.8rem; background: #ffe9e6;
  font-size: 2.6rem; line-height: 3.64rem;
}
.terms__dot { color: var(--orange); }
.terms__body { margin-top: 1.1rem; height: 19.8rem; font-size: 1.6rem; line-height: 2.24rem; }

/* =========================================================
   SP（393px基準）
   ========================================================= */
@media (max-width: 767px) {
  .sp-br { display: inline; }
  .header__inner, .fv__inner, .sv__inner, .manga__inner, .cases1__inner,
  .cases2__inner, .message__inner, .campaign__inner { width: 39.3rem; }

  /* CTA */
  .cta { width: 34rem; }
  .cta__balloon { left: 2.9rem; padding-left: .3rem; }
  .cta__label { left: 3.1rem; }
  .cta__arrow { right: 2.3rem; }

  /* header */
  .header__logo { left: 1.8rem; }
  .header__menu { left: 34.7rem; }
  .gnav__panel { width: 100%; padding: .8rem 2.65rem 4rem; }
  .gnav__list a { padding: 2rem .6rem; font-size: 1.6rem; }
  .gnav__cta { margin-top: 3.2rem; }
  .campaign { padding-bottom: 12rem; }
  .fixed-bg { display: none; }
  .sv, .cases2 { background: none; }
  /* SPは帯なし・CTAだけ下中央 */
  .float-bar { height: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: translateY(14rem); }
  .cta--float { bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .cta--float .cta__btn { box-shadow: inset 0 0 0 .1rem var(--brown), 0 .6rem 1.6rem rgba(0, 0, 0, .2); }

  /* FV */
  .fv__inner { height: 53.6rem; }
  .fv__ht-tl { transform: translate(-21.4rem, 5.0357rem) matrix(.95106, -.30902, .30902, .95106, 0, 0); }
  .fv__ht-br { transform: translate(-5.9089rem, 72.188rem) matrix(.95106, -.30902, -.30902, -.95106, 0, 0); }
  .fv__photo { left: 11.825rem; top: -6.4rem; width: 35.75rem; height: 35.75rem; }
  .fv__photo img { left: -9.821rem; top: 4.714rem; width: 53.098rem; height: 35.403rem; }
  .fv__t1 { left: 1.254rem; top: 2.975rem; width: 24.77rem; }
  .fv__t2 { left: 1.067rem; top: 6.936rem; width: 23.464rem; }
  .fv__t3 { left: 0; top: 21.199rem; width: 24.846rem; }
  .fv__band { top: 31rem; width: 42rem; height: 9.5rem; border-width: .1rem; }
  .fv__band-text { top: 2.1rem; font-size: 2rem; line-height: 3rem; }
  .fv__ribbon { left: 10.062rem; top: 28.7rem; width: 19.177rem; height: 3.8rem; }
  .fv__ribbon-text { top: .475rem; font-size: 1.71rem; line-height: 2.6rem; }
  .fv__cta { left: 2.7rem; top: 41.7rem; }

  /* こんな方におすすめ */
  .sv__inner { height: 39.4rem; }
  .sv__title { left: 5.65rem; top: 2.2rem; width: 28rem; height: 3.9rem; }
  .sv__title span { font-size: 2.6rem; line-height: 3.9rem; }
  .sv__title small { font-size: 2.2rem; }
  .sv__list { left: 0; top: 8rem; width: 39.3rem; display: block; }
  .sv__item {
    position: relative; display: block;
    height: 8rem; padding: 0 0 0 8.95rem;
    background: none; border: 0; border-radius: 0;
  }
  .sv__item p { font-size: 1.7rem; line-height: 2.6rem; }
  .sv__item--child   { order: 1; }
  .sv__item--start   { order: 2; }
  .sv__item--land    { order: 3; }
  .sv__item--company { order: 4; }
  .sv__list { display: flex; flex-direction: column; gap: 0; }
  .sv__ico { position: absolute; }
  .sv__item--child .sv__ico   { left: 3.75rem; top: .522rem; }
  .sv__item--start .sv__ico   { left: 3.25rem; top: .332rem; }
  .sv__item--land .sv__ico    { left: 4.05rem; top: .543rem; }
  .sv__item--company .sv__ico { left: 3.45rem; top: .375rem; }
  .sv__line { display: block; position: absolute; left: 2.75rem; width: 33.8rem; height: .1rem; }
  .sv__line--1 { top: 14.6rem; }
  .sv__line--2 { top: 22.6rem; }
  .sv__line--3 { top: 30.6rem; }

  /* 漫画 */
  .manga--1 .manga__inner { height: 205.292rem; }
  .manga--2 .manga__inner { height: 142.875rem; }
  .manga--3 .manga__inner { height: 145.596rem; }
  /* SPは漫画幅の比率で同じ見え方＝33px */
  .manga--3 .manga__inner { height: 145.596rem; }
  .manga--1 { margin-top: .3rem; margin-bottom: 2.5rem; }
  .manga--2 { margin-top: 2.9rem; margin-bottom: 2.6rem; }
  .manga--3 { margin-top: -2.7rem; margin-bottom: 3rem; }
  .manga__panel { left: 0; width: 39.3rem; }
  .manga__panel img { mix-blend-mode: multiply; } /* 画像内の白余白（枠の外）をページ地色 #fdfcfa に同化 */
  .manga__panel--01 { top: 0;          height: 19.6rem; }
  .manga__panel--02 { top: 19.6rem;    height: 36rem; }
  .manga__panel--03 { top: 55.6rem;    height: 27.1rem; }
  .manga__panel--03 img { margin-top: -.02rem; }
  .manga__panel--04 { top: 82.7rem;    height: 16.9rem; }
  .manga__panel--04 img { margin-top: -.03rem; }
  .manga__panel--05 { top: 99.6rem;    height: 27.3rem; }
  .manga__panel--06 { top: 126.9rem;   height: 16.8rem; }
  .manga__panel--06 img { margin-top: -.089rem; }
  .manga__panel--07 { top: 143.7rem;   height: 17rem; }
  .manga__panel--07 img { margin-top: -.04rem; }
  .manga__panel--08 { top: 160.7rem;   height: 27.292rem; }
  .manga__panel--09 { top: 187.992rem; height: 17.3rem; }
  .manga__panel--09 img { margin-top: -.284rem; }
  .manga__panel--10 { top: 0;          height: 16.9rem; }
  .manga__panel--11 { top: 16.9rem;    height: 27.292rem; }
  .manga__panel--12 { top: 44.191rem;  height: 27.292rem; }
  .manga__panel--13 { top: 71.483rem;  height: 16.8rem; }
  .manga__panel--13 img { margin-top: -.025rem; }
  .manga__panel--14 { top: 88.283rem;  height: 27.292rem; }
  .manga__panel--15 { top: 115.575rem; height: 27.3rem; }
  .manga__panel--16 { top: 0;          height: 27.291rem; }
  .manga__panel--17 { top: 27.291rem;  height: 17.008rem; }
  .manga__panel--18 { top: 44.299rem;  height: 17.053rem; }
  .manga__panel--19 { top: 61.352rem;  height: 16.951rem; }
  .manga__panel--20 { top: 78.303rem;  height: 27.265rem; }
  .manga__panel--21 { top: 105.568rem; height: 40.028rem; }

  /* 住宅会社を選ぶ前に */
  .cases1__inner { height: 94.7rem; }
  .cases1__head { height: 19.4rem; }
  .cases1__title { left: 0; right: 0; top: 3.4rem; font-size: 2.6rem; line-height: 3.9rem; }
  .cases1__lead { left: 0; right: 0; top: 12.3rem; }
  .cases1__band { display: none; }
  .cases1__band--sp { display: block; top: 67.8rem; height: 27.3rem; }
  .cases1__ht { transform: translate(3.9685rem, 107.0946rem) matrix(.95106, -.30902, -.30902, -.95106, 0, 0); }
  .cases1__bubble--1 { left: 8.2rem; top: 22.07rem; width: 29.085rem; }
  .cases1__bubble--2 { left: 1.3rem; top: 35.5rem; width: 30.4rem; }
  .cases1__bubble--3 { left: -.7rem; top: 50.8rem; width: 42.7rem; }
  .cases1__type--1 { left: 14rem;  top: 24.4rem; width: 18.7rem; text-align: left; }
  .cases1__type--2 { left: 6.1rem; top: 37.5rem; width: 20.1rem; text-align: left; }
  .cases1__type--3 { left: 4.3rem; top: 53.3rem; width: 32.2rem; text-align: right; }
  .cases1__house--1 { left: 2.785rem; top: 25.1rem;  width: 10.487rem; }
  .cases1__house--2 { left: 26.5rem;  top: 39.6rem;  width: 11.1rem; }
  .cases1__house--3 { left: 3.6rem;   top: 59.34rem; width: 11.317rem; }
  .cases1__box { left: 1.3rem; top: 73.3rem; width: 36.6rem; height: 19.5rem; }
  .cases1__marker--1 { left: 11.4rem; top: 10.2rem; width: 20.9rem; }
  .cases1__marker--2 { display: block; left: 5.9rem; top: 13.3rem; width: 20.9rem; }
  .cases1__msg { left: 1.7rem; top: 2.1rem; width: 33.2rem; font-size: 1.7rem; }
  .cases1__msg span { white-space: normal; }
  .cases1__msg-l1 { line-height: 2.89rem; }
  .cases1__msg-l2 { top: .2rem; line-height: 3.3rem; }
  .cases1__msg-l2 b { font-size: 2rem; }
  .cases1__msg-l3 { line-height: 2.89rem; }

  /* CASE */
  .cases2__inner { height: 154.3rem; }
  .cases2__ht { display: block; }
  .cases2__ht--t { transform: translate(-18.4rem, -.9647rem) matrix(.95106, -.30902, .30902, .95106, 0, 0); }
  .cases2__ht--b { transform: translate(4.6686rem, 122.6945rem) matrix(.95106, -.30902, -.30902, -.95106, 0, 0); }
  .cases2__list { left: 1.6rem; top: 3.6rem; flex-direction: column; }
  .case { min-height: 0; }
  .case__photo--chart { height: 16.1rem; background: none; }

  /* メッセージ */
  .message__inner { height: 54rem; }
  .message__photo { left: -27.3rem; top: -.05rem; width: 94rem; height: 66.5rem; }
  .message__title { top: 3.95rem; font-size: 2.2rem; line-height: 3.52rem; }
  .message__box { left: 1.2rem; top: 13.05rem; width: 36.1rem; height: 23.3rem; }
  .message__box::before { left: .9rem; top: .8rem; width: 36.1rem; height: 23.6rem; }
  .message__p1, .message__p2 { left: .45rem; right: -.45rem; font-size: 1.6rem; line-height: 2.56rem; }
  .message__p1 { top: 2.8rem; }
  .message__p2 { top: 15.5rem; }
  .message__cta { left: 2.7rem; top: 39.55rem; }
  .message__cta .cta__balloon { left: 2.9rem; padding-left: .3rem; }

  /* キャンペーン */
  .campaign__inner { height: 152.4rem; }
  .campaign__illust { left: 0; width: 39.3rem; }
  .campaign__badge { left: 13.9rem; }
  .gift { left: 2.5rem; top: 11.8rem; width: 34.3rem; height: 57.8rem; }
  .gift__amount { top: 5.9rem; }
  .gift__lead { top: 12.3rem; }
  .gift__line { left: 1.25rem; width: 31.8rem; }
  .gift__line--1 { top: 17.2rem; }
  .gift__line--2 { top: 28.2rem; }
  .gift__row { left: 2.15rem; top: 18.2rem; }
  .gift__orig { top: 29.2rem; }
  .kizzuna { left: .85rem; top: 36.7rem; width: 32.6rem; height: 12rem; }
  .kizzuna__title { top: 1.1rem; }
  .kizzuna__desc { top: 4.5rem; }
  .kizzuna__x {
    left: 0; top: 12rem; width: 32.6rem; height: 7.6rem;
    padding: .8rem .7rem .8rem 1.3rem;
    justify-content: space-between; gap: 1.4rem; border-radius: 0;
  }
  .kizzuna__id { font-size: 1.3rem; line-height: 2rem; }
  .kizzuna__x-text { font-size: 1.3rem; line-height: 2rem; }
  .terms { left: 2.3rem; top: 73.3rem; width: 35.3rem; }
  .terms__head { justify-content: flex-start; height: 3.6rem; font-size: 1.7rem; line-height: 2.4rem; }
  .terms__body { height: auto; font-size: 1.5rem; line-height: 2.1rem; }
}