@charset "UTF-8";
/* =========================================
   初期styleリセット
========================================= */
.lout-grid.lout-breadcrumbs {
    display: none !important;
}
.lout-grid h1 {
    display: none;
    border-bottom: none;
}
.lout-grid h1:after{
    content:none;
}
.lout-grid h2,.lout-grid h3{
    border-bottom: none;
}
.lout-grid.lout-breadcrumbs {
    width: 960px;
}
.lout-followmenu {
    display: none;
}

header.lout-header.lout-grid {
    width: 960px;
}
.lout-grid {
    width: 100%;
}
.lout-footer .lout-footer-inner {
    width: 100%;
max-width: 960px;
    margin: auto;
}
.lout-hamburgerbtn{
    display: none;
}
.lout-contents {
    padding-left: 0px;
    padding-right: 0px;
}
.css-1r2yhgy.evf3f5610{
    display: none;
}
.ymtbanner.is-w899 {
    margin: 0;
}

@media (min-width: 768px) {
.pc-br{
    display: none;
}
}

@media (max-width: 768px) {
.sp-br{
    display: none;
}
}

/* ---- [WordPress 追加CSS に貼る部分：テーマリセット] -------------------- */
.lout-grid { width: 100%; max-width: none; }
.lout-contents { padding-left: 0; padding-right: 0; max-width: none; }
.lout-grid h1 { display: none; border-bottom: none; }
.lout-grid h1:after { content: none; }
.lout-grid h2, .lout-grid h3, .lout-grid h4 { border: none; background: none; padding: 0; }
.lout-grid h2:before, .lout-grid h2:after,
.lout-grid h3:before, .lout-grid h3:after { content: none; display: none; }
/* ---- [ここまで] --------------------------------------------------------- */

/* =========================================================
   1. トークン
   ========================================================= */
#custom-lp-wrapper {
  /* 色はすべて支給イラスト（紙の切り絵）から取った（v6）。v19 で「生成りと朱」に変更：地＝イラストの見積書の紙色、見出し＝藍、ボタン＝朱 */
  --navy: #0F2443;        /* 見出し・屋根・比較シートの地（イラストのいちばん深い青緑） */
  --ink: #1C2433;         /* 本文 */
  --ink-2: #4E5666;       /* 補足 */
  --note: #676E7B;        /* 注釈 */
  --blue: #0F2443;        /* 朱（ボタン）。白文字で 5.3:1、紙の上の文字として 5.2:1、生成りの上で 4.6:1（AA） */        /* CTA・申込の帯（イラストの上着と扉の青） */
  --blue-h: #091A33;
  --blue-2: #0F2443;      /* C社の家・アバター */
  --paper: #FFFFFF;       /* ページの地（白に近い紙） */
  --cream: #F3F5F8;       /* セージの地（イラストの紙の見積書が浮いて見える、うすい緑の灰色） */
  --cream-2: #D8DDE6;     /* 枠線・点線 */
  --cream-50: #F8F9FB;
  --orange: #CBAB6A;      /* コーラル：図形・下線・A社 */
  --orange-ink: #676E7B;  /* 小見出し・コーラルの文字（セージの地の上でも AA 4.5:1 を超えるよう、朱のペンより半段だけ深く） */
  --orange-lt: #E3CFA0;   /* 深い青緑の地の上のコーラル */
  --orange-bg: #F7F1E2;
  --mustard: #8D93A0;     /* からし色：B社・のり・数字の下線 */
  --green: #0F2443;       /* オリーブ：書いてある／約束のチェック */
  --rule: rgba(15, 36, 67, .16); /* 1pxの罫はすべてこれ（--ink の派生。白・紙・生成りのどの地でも同じ濃さに見える） */
  --focus: #2A7DB8;       /* キーボードのフォーカス（紙・セージ・紺のどの地でも 3:1 以上） */
  --focus-lt: #F0E2BE;    /* 青・紺の地の上のボタンのフォーカス */
  /* 影は2つのレシピだけ。--shadow＝紙を1枚置いたくらい（白いカード：約束・表・チェック・最後の予約の紙）。
     --shadow-float＝写真の上に浮かぶ小さな札（TOPのひとこと・768px〜の追従の札） */
  --shadow: 0 0 0 1px rgba(15, 36, 67, .05), 0 1px 2px rgba(15, 36, 67, .04), 0 18px 40px -18px rgba(15, 36, 67, .22);
  --shadow-float: 0 10px 24px -10px rgba(15, 36, 67, .22);
  /* イラストの影は1つだけ。写真や紙の縁にまたがる4点（gk・sc・band・info）にだけ付ける。地の上に立つ絵には付けない */
  --lift: drop-shadow(0 3px 4px rgba(15, 36, 67, .10));
  /* 角丸は3段：小（札・チェックの枠・バナー）／中（ふつうの写真・吹き出し）／大（白いカード・帯・屋根の写真の角） */
  --r-s: 8px;
  --r-m: 16px;
  --r-l: 20px;

  --f-maru: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; /* 見出しの書体（v35：ロゴに合わせて丸ゴシックから細めの角ゴシックへ。変数名は据え置き） */
  --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  --f-en: "Jost", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 数字（v35：ロゴの英字と同じ系統の幾何学サンセリフ） */
  --pen: #B8954F;         /* 朱のペン（見落としの丸・下線・付箋の文字） */

  /* 文字の階層：主張の見出し（--fs-h2-l）＞ 見出し（--fs-h2）＞ 小見出し（--fs-h3）＞ 本文 ＞ 注記 */
  --fs-h2-l: 30px;
  --fs-h2: 27px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-table: 14px;
  --fs-eyebrow: 14px;

  --gut: 20px;
  --maxw: 1120px;
  /* 本文の枠から画面の端までの距離（写真を片側だけ画面の端まで伸ばすときに使う） */
  --bleed: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));

  /* 屋根：片流れの角度・屋根の厚み・軒の出 */
  --rt: 6deg;
  --roof-th: 8px;
  --roof-oh: 12px;

  /* 見出しまわりの間合い（小見出し→見出し、見出し→本文） */
  --gap-eyebrow: 16px;
  --gap-h2: 24px;

  /* 本文の行間は2つ：読ませる本文（--lh-body）／項目の説明・注記（--lh-item） */
  --lh-body: 1.9;
  --lh-item: 1.75;

  /* 紙のざらつき（イラストの質感に合わせる。ごく薄く） */
  /* 屋根のクレヨンの質感（紺の上の白い粒） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .20 0 0 0 0 .30 0 0 0 0 .30 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-spacing-trim: trim-start; /* 行頭の始め括弧の前の半字のアキを詰め、行の頭を本文の左端にそろえる */
  padding-bottom: 0;
  timeline-scope: --am-last;
}
#custom-lp-wrapper *, #custom-lp-wrapper *:before, #custom-lp-wrapper *:after { box-sizing: border-box; }

/* ---- wpautop 必須リセット ---- */
#custom-lp-wrapper p:empty { display: none !important; }
#custom-lp-wrapper p { margin: 0; }
/* 空白だけの class 無しの p 要素（行頭インデント由来）を落とす保険。LP側の p 要素はすべて class 付き */
#custom-lp-wrapper p:not([class]):not(:has(*)) { display: none !important; }
#custom-lp-wrapper .awrap { display: contents; }
/* テーマの段落・引用・表の装飾を無効化（本文系はラッパーから継承。LPの各クラス指定はこれより詳細度が高い） */
#custom-lp-wrapper p, #custom-lp-wrapper li, #custom-lp-wrapper dt, #custom-lp-wrapper dd,
#custom-lp-wrapper th, #custom-lp-wrapper td, #custom-lp-wrapper blockquote, #custom-lp-wrapper figcaption,
#custom-lp-wrapper summary, #custom-lp-wrapper label, #custom-lp-wrapper caption {
  font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; font-family: inherit;
}
#custom-lp-wrapper blockquote { border: 0; background: none; quotes: none; }
#custom-lp-wrapper blockquote:before, #custom-lp-wrapper blockquote:after { content: none; }
#custom-lp-wrapper h1, #custom-lp-wrapper h2,
#custom-lp-wrapper h3, #custom-lp-wrapper h4 {
  display: block !important;
  visibility: visible !important;
  margin: 0; padding: 0; font-weight: normal;
  border: none; background: none;
}
#custom-lp-wrapper h1:before, #custom-lp-wrapper h1:after,
#custom-lp-wrapper h2:before, #custom-lp-wrapper h2:after,
#custom-lp-wrapper h3:before, #custom-lp-wrapper h3:after { content: none; }
#custom-lp-wrapper img { max-width: 100%; height: auto; display: block; vertical-align: bottom; }
#custom-lp-wrapper a { text-decoration: none; color: inherit; }
#custom-lp-wrapper ul, #custom-lp-wrapper ol { list-style: none; margin: 0; padding: 0; }
#custom-lp-wrapper li { margin: 0; padding: 0; }
#custom-lp-wrapper dl, #custom-lp-wrapper dt, #custom-lp-wrapper dd,
#custom-lp-wrapper figure, #custom-lp-wrapper blockquote { margin: 0; padding: 0; }
#custom-lp-wrapper table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; }
#custom-lp-wrapper th, #custom-lp-wrapper td { padding: 0; border: 0; background: none; text-align: left; font-weight: normal; vertical-align: top; }
#custom-lp-wrapper sup { font-size: 12px; font-weight: 500; line-height: 0; vertical-align: .45em; letter-spacing: 0; margin-left: 2px; } /* ※の番号も12px（注記の最小サイズ）。上げすぎず行間を乱さない */
#custom-lp-wrapper .sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#custom-lp-wrapper .nw { display: inline-block; }
/* 行頭の括弧の詰め（ラッパーの trim-start）は、.nw（inline-block）の1字目にも「その箱の行頭」として効いてしまう。
   括弧で始まる .nw のうち、行の途中に来るもの（チェックの行2つ・人柄の本文・人柄のラベル）は詰めない。
   人柄の本文は、行頭に来る段（〜359px・1024px〜）だけ詰める（下の各段）。360〜1023pxは幅で行頭と行中が入れ替わるので詰めない（行中の詰まりを避ける） */
#custom-lp-wrapper p, #custom-lp-wrapper dd, #custom-lp-wrapper li { text-wrap: pretty; }
/* フォーカスの輪は要素の角丸に沿わせる（ピルのボタンを四角く変えない。角丸は summary だけに付ける） */
#custom-lp-wrapper a:focus-visible,
#custom-lp-wrapper summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#custom-lp-wrapper summary:focus-visible { border-radius: 12px; }

/* =========================================================
   2. 共通の型
   ========================================================= */
#custom-lp-wrapper .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
#custom-lp-wrapper .sec { position: relative; }

/* 小見出し：線で描いた小さな片流れの家（太い屋根＋細い壁＝写真にかけた屋根の縮図）＋日本語（英字ラベルは使わない）
   塗りの家の形はステッカーのように重く見えたので、TOPの見出しの「家の線」と同じ線の言葉づかいにそろえた */
#custom-lp-wrapper .eyebrow {
  display: flex; align-items: center; gap: 9px; margin-bottom: var(--gap-eyebrow);
  font-family: var(--f-maru); font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1.4; letter-spacing: .14em; color: var(--orange-ink);
}
#custom-lp-wrapper .eyebrow:before {
  content: ""; flex: none; width: 24px; height: 15px; margin-top: -1px; background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M1.4 6.4 24.6 1.6' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M4.6 7.2V14.8H21.4V3.4' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M1.4 6.4 24.6 1.6' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M4.6 7.2V14.8H21.4V3.4' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
#custom-lp-wrapper .eyebrow--w { color: var(--orange-lt); }
#custom-lp-wrapper .eyebrow:not(.eyebrow--w):before { background: var(--navy); } /* v35：家の線は紺・文字はグレー（ロゴの「家＝紺／相談会開催＝グレー」と同じ） */
/* 見出し：丸ゴシック900は太いので、字間を少し開けて（palt のあと .06em）黒い塊に見せない */
#custom-lp-wrapper .h2 {
  font-family: var(--f-maru); font-weight: 700; font-size: var(--fs-h2); line-height: 1.5;
  letter-spacing: .06em; font-feature-settings: "palt" 1; color: var(--navy);
  text-wrap: balance;
}
#custom-lp-wrapper .h2--l { font-size: var(--fs-h2-l); line-height: 1.42; }
#custom-lp-wrapper .h2--w { color: #fff; }
#custom-lp-wrapper .h3 { font-family: var(--f-maru); font-weight: 700; font-size: var(--fs-h3); line-height: 1.45; letter-spacing: .08em; font-feature-settings: "palt" 1; color: var(--navy); }
#custom-lp-wrapper .h2 + .p { margin-top: var(--gap-h2); }
#custom-lp-wrapper .p { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .04em; max-width: 38em; }
#custom-lp-wrapper .p--w { color: rgba(255, 255, 255, .92); }
/* 注記：「※」をぶら下げて、2行目以降の頭を本文の頭にそろえる */
#custom-lp-wrapper .note { padding-left: 1em; text-indent: -1em; font-size: var(--fs-small); line-height: var(--lh-item); color: var(--note); letter-spacing: .04em; }
#custom-lp-wrapper .note .nw, #custom-lp-wrapper .note span { text-indent: 0; } /* ぶら下げ（text-indent）が中の語の固まりにも継承され、前の句読点に重なるのを防ぐ */
#custom-lp-wrapper .note--w { color: rgba(255, 255, 255, .76); }

/* ---- 屋根の写真（シグネチャー） ----
   写真の上辺を片流れの角度で切り、紺の屋根（軒の出つき）をかける。
   --arn（縦横比）から傾きの高さ --ry を計算するので、どの幅でも屋根と写真の辺がずれない。 */
#custom-lp-wrapper .roof {
  --arn: 1.3333;
  --ry: calc(tan(var(--rt)) * var(--arn) * 100%);
  position: relative; aspect-ratio: var(--arn);
}
#custom-lp-wrapper .roof img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  clip-path: polygon(0 var(--ry), 100% 0, 100% 100%, 0 100%);
}
#custom-lp-wrapper .roof:before {
  content: ""; position: absolute; z-index: 2; left: 0; top: calc(var(--ry) - var(--roof-th));
  width: calc(100% / cos(var(--rt)) + var(--roof-oh) * 2); height: var(--roof-th);
  background: var(--grain), var(--navy); border-radius: 1.5px;
  box-shadow: 0 1px 0 var(--navy); /* 屋根の下辺と写真の継ぎ目に出る明るい縁（アンチエイリアス）を、紺1pxでふさぐ */
  transform-origin: 0 100%; transform: rotate(calc(var(--rt) * -1)) translateX(calc(var(--roof-oh) * -1));
}
/* 左上がり（向きを変えたいとき） */
#custom-lp-wrapper .roof--r img { clip-path: polygon(0 0, 100% var(--ry), 100% 100%, 0 100%); }
#custom-lp-wrapper .roof--r:before {
  left: auto; right: 0; transform-origin: 100% 100%;
  transform: rotate(var(--rt)) translateX(var(--roof-oh));
}
#custom-lp-wrapper .roof-cap {
  position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ink-2); font-size: 12px; line-height: 1.6; letter-spacing: .06em;
}

/* ふつうの写真（技術・モデルハウス）：角丸の枠 */
#custom-lp-wrapper .pic { position: relative; overflow: hidden; border-radius: var(--r-m); aspect-ratio: 4 / 3; background: var(--cream-2); }
#custom-lp-wrapper .pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#custom-lp-wrapper .pic--contain { background: #fff; }
#custom-lp-wrapper .pic--contain img { object-fit: contain; }

/* ---- ペン（手書きの丸・下線・矢印） ----
   インラインSVGの path を描く。pathLength="1" で長さをそろえ、スクロールで描く（animation-timeline 対応ブラウザだけ。
   非対応・動きを減らす設定では、最初から描き終わった状態）。 */
#custom-lp-wrapper .pen-svg { display: block; overflow: visible; pointer-events: none; }
#custom-lp-wrapper .pen-svg path { fill: none; stroke: var(--pen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#custom-lp-wrapper .pen-u { position: relative; }
#custom-lp-wrapper .pen-line { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .34em; }
#custom-lp-wrapper .pen-line path { stroke-width: 5; }
#custom-lp-wrapper .pen-line--last path { stroke: var(--orange); }

/* =========================================================
   3. CTA（丸いピル）
   ========================================================= */
/* 予約（第一）＝塗り＋矢印の丸、資料（第二）＝細い線。厚みは「5pxの硬い段」ではなく、紙から少し浮く程度のやわらかい影で出す。
   重さの差は 塗り/線・高さ（SPで縦に積むとき 58 / 52px）・矢印の有無でつける */
#custom-lp-wrapper .cta-set { display: grid; gap: 12px; margin-top: 28px; max-width: 560px; }
#custom-lp-wrapper .cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 10px 24px; border-radius: 999px;
  font-family: var(--f-maru); font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-align: center;
  font-feature-settings: "palt" 1;
  transition: background-color .2s ease, translate .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#custom-lp-wrapper .cta--p, #custom-lp-wrapper .cta--w { min-height: 58px; }
#custom-lp-wrapper .cta--p {
  background: var(--blue); color: #fff; --arw: var(--blue);
  box-shadow: 0 10px 20px -12px rgba(15, 36, 67, .38); /* 影は朱（--blue-h）の派生。藍の影は生成りの上で灰色ににごる */
}
#custom-lp-wrapper .cta--s { background: var(--paper); color: var(--blue); border: 1px solid var(--blue); }
#custom-lp-wrapper .cta--w {
  background: var(--paper); color: var(--blue); --arw: #fff;
  box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .5);
}
#custom-lp-wrapper .cta--o { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .78); }
#custom-lp-wrapper .cta:hover { translate: 0 -1px; }
#custom-lp-wrapper .cta--p:hover { background: var(--blue-h); box-shadow: 0 14px 22px -12px rgba(15, 36, 67, .48); }
#custom-lp-wrapper .cta--w:hover { box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .58); }
#custom-lp-wrapper .cta--s:hover { background: #fff; border-color: var(--blue-h); }
#custom-lp-wrapper .cta--o:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
#custom-lp-wrapper .cta:active { translate: 0 1px; }
#custom-lp-wrapper .cta--w:focus-visible, #custom-lp-wrapper .cta--o:focus-visible { outline-color: var(--focus-lt); }
/* 矢印の丸：線を細く、丸を小さく（ボタンの中の部品が主張しすぎない） */
#custom-lp-wrapper .cta-a { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: currentColor; transition: translate .2s ease; }
#custom-lp-wrapper .cta-a:after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -68% -50%;
  border-top: 2px solid var(--arw, #fff); border-right: 2px solid var(--arw, #fff); rotate: 45deg;
}
#custom-lp-wrapper .cta:hover .cta-a { translate: 3px 0; }
#custom-lp-wrapper .cta-micro { margin-top: 14px; font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; color: var(--ink-2); }

/* 追従バー（SP：画面下の全幅／768px〜：右下に浮かぶ小さな札）
   本文のCTAと同じ部品の言葉づかい（予約＝青の地に白い丸の矢印・紺の縁。資料＝白の地に青の線）を、小さく */
#custom-lp-wrapper .stick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr); gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid rgba(15, 36, 67, .12);
  box-shadow: 0 -8px 24px rgba(15, 36, 67, .07);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #custom-lp-wrapper .stick { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
}
#custom-lp-wrapper .stick br { display: none; }
#custom-lp-wrapper .stick-s, #custom-lp-wrapper .stick-p {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px;
  font-family: var(--f-maru); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-align: center; padding: 4px 10px;
  transition: background-color .2s ease;
}
#custom-lp-wrapper .stick-s { border: 1px solid var(--blue); color: var(--blue); background: var(--paper); }
#custom-lp-wrapper .stick-p { background: var(--blue); color: #fff; box-shadow: none; }
#custom-lp-wrapper .stick-p:active { translate: 0 1px; }
#custom-lp-wrapper .stick-p:after { /* 本文の「相談会を予約する」と同じ、白い丸の矢印（小さく） */
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.4 6.2 12.2 10l-3.8 3.8' fill='none' stroke='%230F2443' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#custom-lp-wrapper .stick-p:hover { background: var(--blue-h); }
#custom-lp-wrapper .stick-s:hover { background: var(--cream-50); }
@supports (animation-timeline: scroll()) {
  #custom-lp-wrapper .last { view-timeline-name: --am-last; }
  #custom-lp-wrapper .stick {
    animation: am-stick linear both, am-out linear both;
    animation-timeline: scroll(root), --am-last;
    animation-range: 0px 360px, entry 0% entry 40%;
  }
}
@keyframes am-stick { 0%, 70% { translate: 0 130%; visibility: hidden; } 100% { translate: 0 0; visibility: visible; } }
@keyframes am-out { to { translate: 0 130%; visibility: hidden; } }

/* =========================================================
   SEC-01 FV（雑誌の見開き：左に紙面、右に画面の端までの屋根の写真）
   ========================================================= */
#custom-lp-wrapper .fv { background: var(--paper); padding: 0 0 56px; } /* v35：TOPの地は白（ロゴの白地と同じ） */
#custom-lp-wrapper .fv-grid { display: flex; flex-direction: column; }
/* 写真：上辺に紺の片流れ屋根（ページのシグネチャー）。屋根のぶん上をあける。
   横長の帯（SP・タブレット）では6°だと屋根が3人の頭にかかるので、勾配をゆるめ（4°）、写真の上端を残す */
#custom-lp-wrapper .fv-photo { --arn: 1.85; --rt: 4deg; margin-top: 18px; } /* 1.85:1＝手と資料の上端まで入る高さ。予約ボタンの下端を 375×812・360×800 の初期画面の内側に（1.75 では 360×800 で越えた） */
#custom-lp-wrapper .fv-photo img { object-position: 50% 0; }
/* 写真に添えるひとこと：見出しと同じ言葉づかい（家の線・紺の丸ゴシック・黄色のマーカー）の小さなカード。
   SP・タブレットは写真の右下（夫婦の手元を隠さず、担当者の背中にかける）。右端は本文の右端にそろえる */
#custom-lp-wrapper .fv-note {
  position: absolute; z-index: 4; right: var(--gut); bottom: -14px; padding: 10px 14px 11px;
  background: var(--paper); border-radius: var(--r-s); box-shadow: var(--shadow-float);
  font-family: var(--f-maru); font-weight: 700; font-size: 14px; line-height: 1.5; letter-spacing: .06em; color: var(--navy);
  animation: am-in .5s .6s cubic-bezier(.2, .7, .2, 1) both;
}
#custom-lp-wrapper .fv-note-roof { display: block; width: 30px; height: 12px; margin-bottom: 6px; overflow: visible; }
#custom-lp-wrapper .fv-note-roof polyline { fill: none; stroke: #0F2443; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#custom-lp-wrapper .fv-note-t { display: block; }
#custom-lp-wrapper .fv-note-m { background: linear-gradient(transparent 60%, #F0E2BE 60%, #F0E2BE 92%, transparent 92%); padding: 0 2px; }
/* 考える家族の絵（v31）：写真の右下に立つ。写真の枠の中の img 用の規則（絶対配置・屋根の切り抜き）は打ち消す。SPはカードを左に寄せて場所を空ける */
#custom-lp-wrapper .fv-il { position: absolute; z-index: 3; right: 4px; bottom: -26px; width: 140px; height: auto; pointer-events: none; filter: var(--lift); }
#custom-lp-wrapper .fv-photo .fv-il img { position: static; inset: auto; display: block; width: 100%; height: auto; object-fit: initial; clip-path: none; }
#custom-lp-wrapper .fv-note { right: auto; left: var(--gut); }
#custom-lp-wrapper .fv-text { display: flex; flex-direction: column; padding: 36px var(--gut) 0; }
/* 見出し：支給デザインのロゴ（画像）。紺の線画の家・グレーの「相談会開催！」・金の吹き出しと椅子。
   文字は読み上げ用に .fv-sr で残す。地面の線の左端（画像の左端から約1%）を本文の左端にそろえる */
#custom-lp-wrapper .fv-lock { position: relative; width: 101%; max-width: 470px; margin-left: -1%; }
#custom-lp-wrapper .fv-lock .fv-h1 { margin: 0; padding: 0; font-size: 16px; line-height: 1; }
#custom-lp-wrapper .fv-logo { display: block; width: 100%; height: auto; }
#custom-lp-wrapper .fv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* リード：1文ずつ改行。最後の一文（いちばん伝えたいこと）は、半行あけて紺・太字に */
#custom-lp-wrapper .fv-lead { margin-top: 16px; font-size: 16px; line-height: var(--lh-body); font-weight: 500; letter-spacing: .05em; color: var(--ink-2); }
#custom-lp-wrapper .fv-s { display: block; }
#custom-lp-wrapper .fv-s--k { margin-top: 12px; color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; } /* 結論は太く大きく（v24・案3） */
#custom-lp-wrapper .fv-k { padding: 0 .06em; margin: 0 -.06em; background: linear-gradient(transparent 52%, #F0E2BE 52%, #F0E2BE 92%, transparent 92%); } /* 「同じ行で」に、ロゴの「相見積もり」と同じ黄色のマーカー */
/* 目次：そろえる・並べる・持ち帰る（1024px以上だけ。下の「相談会の2時間」で詳しく） */
/* 建てた人のデータ（案3）：数字が主役の3列の帯。SPは数字＋短いラベル、PC（1024px〜）は説明文つき */
#custom-lp-wrapper .fv-idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--navy); list-style: none; }
#custom-lp-wrapper .fv-idx-i { padding: 10px 10px 0; }
#custom-lp-wrapper .fv-idx-i:first-child { padding-left: 0; }
#custom-lp-wrapper .fv-idx-i + .fv-idx-i { border-left: 1px solid var(--rule); }
#custom-lp-wrapper .fv-num { display: flex; align-items: baseline; gap: 2px; font-family: var(--f-en); color: var(--navy); line-height: 1; white-space: nowrap; }
#custom-lp-wrapper .fv-num-v { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
#custom-lp-wrapper .fv-num-u { font-family: var(--f-en); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
#custom-lp-wrapper .fv-idx-s { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--ink-2); text-wrap: balance; }
#custom-lp-wrapper .fv-idx-d { display: none; }
#custom-lp-wrapper .fv-data-note { margin-top: 8px; font-size: 12px; line-height: 1.55; }
#custom-lp-wrapper .cta-set--fv { margin-top: 22px; }
/* 見出しの下線は、ページを開いたときに一度だけ描く（スクロールの描画とは別） */
#custom-lp-wrapper .fv .pen-line path { stroke-dasharray: 1; animation: am-draw .8s .6s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes am-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes am-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
#custom-lp-wrapper .an { animation: am-in .55s cubic-bezier(.2, .7, .2, 1) both; }
#custom-lp-wrapper .an-1 { animation-delay: .05s; }
#custom-lp-wrapper .an-2 { animation-delay: .12s; }
#custom-lp-wrapper .an-3 { animation-delay: .22s; }
#custom-lp-wrapper .an-4 { animation-delay: .3s; }
#custom-lp-wrapper .an-5 { animation-delay: .36s; }

/* =========================================================
   SEC-02 約束（写真の上に、白い約束のパネルを重ねる）
   ========================================================= */
#custom-lp-wrapper .pr { padding: 44px 0 80px; } /* v35：TOPも白なので、上の間を詰める（TOPの下56＋44＝100px） */
/* 写真の主役は家と、その前の家族。家族は写真の下1/4にいるので、下端でそろえ（空と電線を削る）、
   約束のパネルは家族の足もとより下（前面の土間）にだけかける */
#custom-lp-wrapper .pr-photo { --arn: .95; margin: 32px calc(var(--gut) * -1) 0; }
#custom-lp-wrapper .pr-photo img { object-position: 45% 100%; } /* 015.jpg：テーブルの男性（左）とキッチンの女性（中央）が入る位置。下は床まで */
#custom-lp-wrapper .pr-list {
  position: relative; z-index: 2; margin-top: -24px; padding: 4px 20px; background: #fff; border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
#custom-lp-wrapper .pr-i { position: relative; padding: 20px 0 20px 36px; }
#custom-lp-wrapper .pr-i + .pr-i { border-top: 1px solid var(--rule); }
#custom-lp-wrapper .pr-i:before { /* 緑のチェック：約束＝守ること。1行目の文字の高さにそろえる */
  content: ""; position: absolute; left: 0; top: 23px; width: 25px; height: 23px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M3 16 C 6 17, 9 20, 12 25 C 16 15, 22 7, 30 2' fill='none' stroke='%230F2443' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#custom-lp-wrapper .pr-k { font-family: var(--f-maru); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; color: var(--navy); }
#custom-lp-wrapper .pr-d { margin-top: 6px; font-size: 16px; line-height: var(--lh-item); letter-spacing: .03em; color: var(--ink-2); }
/* 3つ目の .pr-d の二重の .nw：外側の .nw は、320px で中の2つの .nw を折るための箱（inline-block の shrink-to-fit）。340px以上は外側ごと1行に入り、折りは base と同じ */

/* =========================================================
   SEC-03 比べられない理由（生成り。考え込む二人が、表の縁に乗る）
   罫線の約束：見出しの下＝細い線／合計の下＝会計の二重線（「合計の下にある行」を読ませる）／明細の行＝細い線
   ========================================================= */
#custom-lp-wrapper .gk { padding: 64px 0 64px; background: var(--noise), var(--cream); } /* SC-1：下は見積書チェックの紙に向けて64px */
#custom-lp-wrapper .h2--xl { font-size: var(--fs-h2-l); line-height: 1.4; letter-spacing: .03em; }
#custom-lp-wrapper .gk-head { display: grid; row-gap: 32px; }
#custom-lp-wrapper .gk-s { display: block; } /* 1文ずつ改行（SPは句の切れ目の .nw で折る） */

/* 考え込む二人：SPは吹き出し2つ（左右に振る）→ 絵。絵の下の見積書が、表の上辺に少し乗る */
#custom-lp-wrapper .gk-il { position: relative; z-index: 2; margin: 0; width: 100%; }
#custom-lp-wrapper .gk-il-img { position: relative; z-index: 2; width: min(86%, 340px); margin: 12px auto -22px; filter: var(--lift); }
#custom-lp-wrapper .gk-il img { width: 100%; }
#custom-lp-wrapper .bubble {
  --tail: 50%;
  position: relative; width: fit-content; max-width: 100%; padding: 8px 16px 9px;
  background: var(--paper); border: 1px solid var(--navy); border-radius: var(--r-m);
  font-family: var(--f-maru); font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .03em;
  font-feature-settings: "palt" 1; color: var(--navy);
}
#custom-lp-wrapper .bubble:after { /* しっぽ：話している人の頭の上へ */
  content: ""; position: absolute; bottom: -6.5px; left: var(--tail); width: 11px; height: 11px; margin-left: -5.5px;
  background: var(--paper); border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy); rotate: 45deg;
}
#custom-lp-wrapper .bubble--1 { --tail: 11%; } /* しっぽは左の人（男性）の側へ。360pxでも吹き出し2の左の角を指さない位置（14%だと320〜約370pxで角の真上に来る） */
#custom-lp-wrapper .bubble--2 { --tail: 64%; margin: 20px 0 0 auto; }

/* 比較表 */
#custom-lp-wrapper .gk-fig { position: relative; background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); }
#custom-lp-wrapper .mx { table-layout: fixed; }
#custom-lp-wrapper .mx-cap {
  caption-side: top; text-align: left; padding: 30px 16px 12px;
  font-family: var(--f-maru); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--navy);
}
#custom-lp-wrapper .mx-h {
  padding: 12px 2px 10px; font-family: var(--f-maru); font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .04em;
  text-align: center; vertical-align: bottom; color: var(--navy);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
#custom-lp-wrapper .mx-h--k { width: 36%; }
#custom-lp-wrapper .mx-h--low { background: var(--orange-bg); } /* A列は見出しも明細も1色の帯 */
/* 列の見出しの家：イラストの見積書の色の四角（A＝コーラル・B＝からし色・C＝青緑）と同じ色 */
#custom-lp-wrapper .mx-house {
  display: block; width: 22px; height: 18px; margin: 0 auto 6px; background: currentColor;
  clip-path: polygon(50% 0, 100% 46%, 86% 46%, 86% 100%, 14% 100%, 14% 46%, 0 46%);
}
#custom-lp-wrapper .mx-h--a .mx-house { color: var(--orange); }
#custom-lp-wrapper .mx-h--b .mx-house { color: var(--mustard); }
#custom-lp-wrapper .mx-h--c .mx-house { color: var(--blue-2); }
/* 明細の行：行の名前と値の1行目をそろえる（見積書と同じく、上そろえ） */
#custom-lp-wrapper .mx-k {
  padding: 14px 6px 13px 16px; font-size: var(--fs-table); font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  color: var(--navy); vertical-align: top; border-bottom: 1px solid var(--rule);
}
#custom-lp-wrapper .mx-ks { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .02em; color: var(--note); text-wrap: balance; }
#custom-lp-wrapper .mx-c {
  padding: 14px 2px 13px; font-size: var(--fs-table); line-height: 1.5; letter-spacing: .02em; text-align: center;
  vertical-align: top; border-bottom: 1px solid var(--rule);
}
#custom-lp-wrapper .mx-c--low { background: var(--orange-bg); }
#custom-lp-wrapper .mx-r:last-child .mx-k, #custom-lp-wrapper .mx-r:last-child .mx-c { border-bottom: 0; }
/* 合計の行：数字を大きく、下に会計の二重線 */
#custom-lp-wrapper .mx-r--total .mx-k, #custom-lp-wrapper .mx-r--total .mx-c { padding-top: 16px; padding-bottom: 14px; border-bottom: 3px double var(--navy); }
#custom-lp-wrapper .mx-r--total .mx-k { padding-top: 19px; }
#custom-lp-wrapper .mx-n { display: block; font-family: var(--f-en); font-size: 21px; font-weight: 700; letter-spacing: 0; line-height: 1.15; color: var(--navy); font-variant-numeric: tabular-nums; }
#custom-lp-wrapper .mx-u { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
#custom-lp-wrapper .mx-tag {
  display: block; width: fit-content; margin: 7px auto 0; padding: 1px 8px 2px; border-radius: 999px;
  background: var(--navy); color: #fff; font-family: var(--f-maru); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; white-space: nowrap;
}
#custom-lp-wrapper .mx-m {
  position: relative; display: inline-block; margin-top: -3px; padding: 3px 2px; color: var(--pen);
  font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; white-space: nowrap;
}
#custom-lp-wrapper .pen-o { position: absolute; left: -5px; top: -6px; width: calc(100% + 10px); height: calc(100% + 12px); } /* SPは「記載なし」の丸も A列の帯の内側に収まる幅（360pxで約0.6px内側） */
#custom-lp-wrapper .pen-o path { stroke-width: 3.6; } /* 実寸 約2〜2.5px（凡例の丸と同じ太さ） */
/* SP（〜767px）：4列の表だと1列が約71pxしかなく、値どうしが触れて読みにくい。
   行の名前を上の帯に出し、その下に A・B・C を3等分で並べる（1列 約111px）。768px〜は従来の表に戻す。
   表の意味（行・列）は HTML の role で保つ。「項目」の見出しは見た目だけ隠す */
#custom-lp-wrapper .mx, #custom-lp-wrapper .mx thead, #custom-lp-wrapper .mx tbody, #custom-lp-wrapper .mx-cap { display: block; }
#custom-lp-wrapper .mx tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#custom-lp-wrapper .mx-h, #custom-lp-wrapper .mx-c { display: block; }
#custom-lp-wrapper .mx-h--k { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
#custom-lp-wrapper .mx-k {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0;
  padding: 9px 16px 8px; background: var(--cream-50); border-bottom: 0; text-align: left;
}
#custom-lp-wrapper .mx-ks { display: inline; margin: 0; }
#custom-lp-wrapper .mx-c { padding: 13px 4px 14px; font-size: 15px; }
#custom-lp-wrapper .mx-m { padding: 3px 6px; font-size: 14px; }
#custom-lp-wrapper .mx-r--total .mx-k { padding-top: 9px; padding-bottom: 8px; border-bottom: 0; }
#custom-lp-wrapper .mx-r--total .mx-c { padding-top: 14px; padding-bottom: 14px; }
#custom-lp-wrapper .mx-n { display: inline; font-size: 24px; }
#custom-lp-wrapper .mx-u { display: inline; margin: 0 0 0 2px; }
/* 凡例と「架空の例」の注記：表のすぐ下の帯にまとめる */
#custom-lp-wrapper .mx-legend { display: grid; gap: 6px; padding: 14px 16px 16px; border-top: 1px solid var(--rule); background: var(--cream-50); }
#custom-lp-wrapper .mx-legend-k { display: block; font-size: var(--fs-small); line-height: 1.7; letter-spacing: .02em; color: var(--ink-2); }
#custom-lp-wrapper .mx-legend-m {
  display: inline-block; width: 30px; height: 16px; margin-right: 8px; vertical-align: -3px;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M24 12 C 54 2, 104 4, 114 24 C 122 42, 86 56, 54 55 C 22 54, 4 44, 7 29 C 10 16, 38 8, 72 9' fill='none' stroke='%23B8954F' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}
#custom-lp-wrapper .gk-note { display: block; font-size: 12px; line-height: 1.7; }
/* 結論：このセクションの答え。朱の丸を付けた行の名前だけ、ペンの色で */
#custom-lp-wrapper .gk-point {
  margin-top: 36px; font-family: var(--f-maru); font-size: 22px; font-weight: 700; line-height: 1.7; letter-spacing: .03em;
  font-feature-settings: "palt" 1; color: var(--navy);
}
#custom-lp-wrapper .gk-point-a { display: block; }
#custom-lp-wrapper .gk-point-m { color: var(--pen); }

/* =========================================================
   SEC-04 対象となる方（3つの条件。紺の罫で囲った3行＝「行」の言葉づかい。虫めがねの絵は、行の床に立つ）
   ========================================================= */
#custom-lp-wrapper .who { padding: 64px 0 88px; }
#custom-lp-wrapper .who-grid { position: relative; }
#custom-lp-wrapper .who-lead { max-width: 30em; }
#custom-lp-wrapper .who-il { position: relative; z-index: 1; width: min(46%, 190px); margin: 12px -4px -6px auto; } /* 絵の足もと＝一覧の上の罫 */
#custom-lp-wrapper .who-il img { width: 100%; height: auto; }
#custom-lp-wrapper .who-list { border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
#custom-lp-wrapper .who-i { position: relative; padding: 20px 0 20px 30px; }
#custom-lp-wrapper .who-i + .who-i { border-top: 1px solid var(--rule); }
#custom-lp-wrapper .who-i:before { /* 行頭の短い線＝見積書の「行」 */
  content: ""; position: absolute; left: 0; top: 33px; width: 16px; height: 1px; background: var(--navy);
}
#custom-lp-wrapper .who-k { font-family: var(--f-maru); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; color: var(--navy); }
#custom-lp-wrapper .who-d { margin-top: 6px; font-size: 16px; line-height: var(--lh-item); letter-spacing: .03em; color: var(--ink-2); }

/* =========================================================
   SEC-05 申込の帯（写真｜ヤマトブルー。継ぎ目にイラスト）
   ========================================================= */
/* 帯は「チェック（白い紙）」と「2時間（セージ）」の継ぎ目に乗せる。
   帯の後ろから次の区画の地を始める（SP：写真と青の継ぎ目の高さ／PC：帯の高さの半分）。帯が2つの区画をつなぐ */
#custom-lp-wrapper .band-sec { --band-pb: 48px; padding: 8px 0 var(--band-pb); isolation: isolate; }
/* 帯の幅（cqw）から写真の高さを出す：スクロールバーの幅に左右されない */
#custom-lp-wrapper .band-sec .wrap { container-type: inline-size; }
#custom-lp-wrapper .band { --band-ar: 1.6; position: relative; display: grid; border-radius: var(--r-l); background: var(--noise), var(--blue); color: #fff; }
#custom-lp-wrapper .band:before {
  content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw;
  top: calc(100cqw / var(--band-ar)); bottom: calc(var(--band-pb) * -1);
  background: var(--noise), var(--cream);
}
#custom-lp-wrapper .band-photo { position: relative; aspect-ratio: var(--band-ar); overflow: hidden; border-radius: var(--r-l) var(--r-l) 0 0; }
#custom-lp-wrapper .band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 40% 50%; }
/* 見積書の絵：写真と青の継ぎ目に、半分ずつかける（カードの内側に収める） */
#custom-lp-wrapper .band-il { position: absolute; z-index: 2; right: 10px; top: calc(100cqw / var(--band-ar) - 84px); width: 50%; max-width: 300px; filter: var(--lift); }
#custom-lp-wrapper .band-body { padding: 80px 24px 32px; }
#custom-lp-wrapper .band-h {
  font-family: var(--f-maru); font-weight: 700; font-size: 24px; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; /* 24px・.04em：「ぜひ比較しましょう。」（10字）を360pxでも1行に */
  color: #fff; text-wrap: balance;
}
#custom-lp-wrapper .band-p { margin-top: 14px; font-size: 16px; line-height: var(--lh-body); letter-spacing: .04em; color: rgba(255, 255, 255, .92); }
#custom-lp-wrapper .cta-set--band { margin-top: 28px; }

/* =========================================================
   SEC-06 相談会の2時間（セージ。片流れ屋根と同じ向きに上っていく階段。絵はペンの踏み板に立つ）
   ========================================================= */
#custom-lp-wrapper .fl { padding: 48px 0 calc(64px + 7vw); background: var(--noise), var(--cream); isolation: isolate; }
#custom-lp-wrapper .steps-wrap { position: relative; margin-top: 32px; }
#custom-lp-wrapper .steps-path { display: none; }
#custom-lp-wrapper .steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } /* 列の幅を画面に収める（語の固定でふくらまないように） */
/* SP：絵と番号・見出しを横に並べ、説明は下に全幅で（1行20字前後で読める幅） */
#custom-lp-wrapper .step {
  position: relative; z-index: 1; display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: 1fr auto auto;
  grid-template-areas: "il n" "il h" "d d"; column-gap: 18px; text-align: left;
}
#custom-lp-wrapper .step-il { grid-area: il; margin: 0; width: 100%; aspect-ratio: 5 / 4; display: flex; align-items: flex-end; justify-content: center; }
#custom-lp-wrapper .step-il img { width: auto; max-width: 100%; max-height: 100%; }
/* 元の絵の右下に残った切れ端を隠す（プランCの紙にはかからない範囲だけ） */
#custom-lp-wrapper .step:nth-child(2) .step-il img { clip-path: polygon(0 0, 100% 0, 100% 90%, 98% 90%, 98% 100%, 0 100%); }
/* 番号：塗りのラベルをやめ、数字そのものを朱のペンの色で */
#custom-lp-wrapper .step-n {
  grid-area: n; align-self: end; display: flex; align-items: baseline; gap: 6px; margin: 0;
  font-family: var(--f-en); line-height: 1; color: var(--navy);
}
#custom-lp-wrapper .step-n-l { font-weight: 600; font-size: 12px; letter-spacing: .2em; }
#custom-lp-wrapper .step-n-v { font-weight: 700; font-size: 30px; letter-spacing: .02em; color: var(--pen); }
#custom-lp-wrapper .step .h3 { grid-area: h; margin-top: 8px; font-size: 18px; line-height: 1.45; letter-spacing: .06em; } /* 見出しは2語。SPは小見出し・小の段（18px）で1語1行に */
#custom-lp-wrapper .step-d { grid-area: d; margin: 14px 0 0; font-size: 16px; line-height: var(--lh-body); letter-spacing: .04em; color: var(--ink-2); }

/* =========================================================
   SEC-07 比較シート（紺の「事実」の区画。片流れの上辺。写真だけ）
   ========================================================= */
/* 1枚の比較シートとして組む：行｜お手元の見積書（空欄のまま）｜ヤマト住建。
   お手元の列は、イラストの見積書の紙の色で「まだ書いていない欄」として残す（SPでも左に細い列で見せる）。
   数字は Nunito で一段大きく。罫線は細く（1px）。 */
#custom-lp-wrapper .cs-sec {
  --cs-paper: #FCF7EC;                 /* 窓の断面図の台紙（イラストの見積書の紙の色を白に寄せた色） */
  padding: 0 0 96px; margin-top: -7vw; background: var(--noise), var(--navy); color: #fff;
}
#custom-lp-wrapper .cs-sec:before { /* 上辺を片流れに切る（上の生成りをかぶせる） */
  content: ""; display: block; height: 7vw; margin-bottom: 56px; translate: 0 -1px; /* 上辺が小数pxのときに出る1pxの線を消す */
  background: var(--noise), var(--cream); clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ---- 数字の裏づけ（写真） ---- */
#custom-lp-wrapper .proof { margin-top: 0; }
#custom-lp-wrapper .proof-list { display: grid; gap: 24px; margin-top: 32px; } /* CS-1：見出し→中身の間を他の区画とそろえる */
#custom-lp-wrapper .proof-i:not(.proof-i--big) .proof-f { display: grid; grid-template-columns: 43% 1fr; column-gap: 16px; align-items: center; }
/* 窓の断面図：白い台紙だと紺の上で浮くので、見積書の紙の色に刷り込む。図の周りに余白 */
#custom-lp-wrapper .proof .pic--contain { background: var(--cs-paper); }
#custom-lp-wrapper .proof .pic--contain img { inset: 4%; width: 92%; height: 92%; mix-blend-mode: multiply; } /* CS-2：図の余白を4%に */
#custom-lp-wrapper .proof-i--big .pic { aspect-ratio: 3 / 2; }
#custom-lp-wrapper .proof-i--big .pic img { object-position: 72% 50%; } /* 縦長に切るPCでも、筒のビルシュタインの刻印を枠に残す */
#custom-lp-wrapper .proof-i:not(.proof-i--big) .pic img { object-position: 62% 50%; } /* 気密：測定の送風機を枠に入れる */
#custom-lp-wrapper .proof-cap { margin-top: 12px; font-size: 14px; line-height: var(--lh-item); letter-spacing: .03em; color: rgba(255, 255, 255, .86); } /* CS-1：13→14px */
#custom-lp-wrapper .proof-i:not(.proof-i--big) .proof-cap { margin-top: 0; }
/* CS-2：窓の断面図だけSPで全幅に（1:1の小さい枠では「結露防止」が読めない）。写真3枚が大・小・大の緩急になる */
#custom-lp-wrapper .proof-i:last-child .proof-f { display: block; }
#custom-lp-wrapper .proof-i:last-child .pic { aspect-ratio: 16 / 10; }
#custom-lp-wrapper .proof-i:last-child .proof-cap { margin-top: 12px; }
#custom-lp-wrapper .proof-k {
  display: block; margin-bottom: 4px; font-family: var(--f-maru); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--orange-lt);
}
#custom-lp-wrapper .cta-set--mid { margin: 48px auto 0; max-width: 600px; }

/* =========================================================
   SEC-08 人と声（雑誌の人物ページ：アーチの写真に縦組みのキャプション。
   数字は「65人ぶんの目盛り」で見せ、声は細い罫線で区切る）
   ========================================================= */
#custom-lp-wrapper .vo { padding: 80px 0 88px; }
#custom-lp-wrapper .vo-top { display: grid; gap: 40px; }
/* 写真＋縦組みのキャプション。付箋・手書き・矢印はやめ、写真の右の余白に縦に組む */
#custom-lp-wrapper .vo-photo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start;
  container-type: inline-size;
}
/* 上は半円、下の角はわずかに丸める（%指定で縮小計算を起こさない） */
#custom-lp-wrapper .arch {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-2);
  border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px;
}
#custom-lp-wrapper .arch img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 28% 50%; } /* 250729-28：横長の元画像から、顔・胸元・差し出した手まで（元画像の約13〜66%）を縦長の窓に。高さは全部入る */
/* 縦組み：アーチの肩（まっすぐな辺が始まる高さ）から書き出す */
#custom-lp-wrapper .vo-photo-cap { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 8px; margin-top: calc(50cqw - 58px); }
#custom-lp-wrapper .vo-photo-t, #custom-lp-wrapper .vo-photo-by { display: block; writing-mode: vertical-rl; white-space: nowrap; padding-top: 36px; }
#custom-lp-wrapper .vo-photo-t {
  font-family: var(--f-maru); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .32em; color: var(--navy);
  background: linear-gradient(var(--navy), var(--navy)) 50% 0 / 1px 24px no-repeat;
}
#custom-lp-wrapper .vo-photo-by { font-size: 12px; line-height: 1; letter-spacing: .16em; color: var(--ink-2); }
/* 数字：45/65名。下に65本の目盛り（1本＝取材した施主1名。濃い45本が「営業担当の人柄」） */
#custom-lp-wrapper .stat { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
#custom-lp-wrapper .stat-n { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
#custom-lp-wrapper .stat-v {
  margin-left: -.02em; font-family: var(--f-en); font-size: 96px; font-weight: 700; line-height: .78; letter-spacing: -.02em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
#custom-lp-wrapper .stat-u { font-family: var(--f-en); font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); } /* 700の要求で、数字は Nunito 800、「名」は丸ゴシック700 */
#custom-lp-wrapper .stat-bar {
  width: calc((100% - 2px) * 65 / 64); max-width: none; height: 22px; margin-top: 20px; /* 65本目の右端が、上の罫の右端に乗る */
  background:
    repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px calc(100% / 45)) 0 0 / calc(100% * 45 / 65) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--cream-2) 0 2px, transparent 2px calc(100% / 65)) 0 0 / 100% 100% no-repeat;
}
#custom-lp-wrapper .stat-k { margin-top: 18px; font-family: var(--f-maru); font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--navy); }
/* 声：握手の絵は右に寄せ、足もとの見積書を太い罫線にかける */
#custom-lp-wrapper .vo-grid { display: grid; margin-top: 56px; }
#custom-lp-wrapper .vo-il { position: relative; z-index: 1; width: min(66%, 280px); margin: 0 -4px -14px auto; }
#custom-lp-wrapper .vc { padding: 28px 0 28px; border-top: 1px solid var(--rule); }
#custom-lp-wrapper .vc--main { padding: 36px 0 32px; border-top: 1px solid var(--navy); }
/* 始めのかぎかっこを半字ぶら下げて、2行目以降と文字の頭をそろえる */
#custom-lp-wrapper .vc-t { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .04em; text-indent: -.5em; text-spacing-trim: normal; } /* 括弧のアキは text-indent で余白へ逃がしているので、行頭の詰めを重ねない */
#custom-lp-wrapper .vc--main .vc-t { font-family: var(--f-maru); font-weight: 500; font-size: 19px; line-height: 1.85; letter-spacing: .05em; color: var(--navy); }
/* 小さな声は、行末までそろえた組み（雑誌の段組み）。文節で折ると両端そろえの字間が開くので、ここだけ文字単位で折る */
#custom-lp-wrapper .vc:not(.vc--main) .vc-t { word-break: normal; text-align: justify; text-wrap: wrap; }
/* 段の幅を「1字（字間込み1.04em）」の整数倍に丸め、両端そろえで字間が開かないようにする（非対応ブラウザは段の幅いっぱい）。--vn は段に入る字数ぶんの幅 */
#custom-lp-wrapper .vc:not(.vc--main) .vc-t { --vn: round(down, 100%, 1.04em); width: calc(var(--vn) + 1px); }
/* SP（〜767px）：段に入る字数が「最終行が1〜2字になる字数」に当たったときだけ、1〜2字減らす。各項は字数が k のときだけ 1.04em、ほかは 0（abs() の代わりに max(x, -x) で古いブラウザでも通す）。
   減らす字数（声の順）：1つ目 21→20・31→30・32→30／2つ目 17→16・28→27・29→27・42→41・43→41／3つ目 18→17・27→26。
   文言・字間・文字の大きさを変えたら数え直す。声の並びを替えたら nth-of-type の番号も直す。768px以上は段ごとの固定幅が後ろで上書きする。
   round() 非対応のブラウザでは --vn ごと無効になり、width は段の幅いっぱいに戻る（孤立は元のまま。壊れはしない） */
@supports (width: round(down, 100%, 1.04em)) {
  #custom-lp-wrapper .vc:nth-of-type(2) .vc-t { width: calc(var(--vn) + 1px
    - (1.04em - min(1.04em, max(var(--vn) - 21.84em, 21.84em - var(--vn))))
    - (1.04em - min(1.04em, max(var(--vn) - 32.24em, 32.24em - var(--vn))))
    - 2 * (1.04em - min(1.04em, max(var(--vn) - 33.28em, 33.28em - var(--vn))))); }
  #custom-lp-wrapper .vc:nth-of-type(3) .vc-t { width: calc(var(--vn) + 1px
    - (1.04em - min(1.04em, max(var(--vn) - 17.68em, 17.68em - var(--vn))))
    - (1.04em - min(1.04em, max(var(--vn) - 29.12em, 29.12em - var(--vn))))
    - 2 * (1.04em - min(1.04em, max(var(--vn) - 30.16em, 30.16em - var(--vn))))
    - (1.04em - min(1.04em, max(var(--vn) - 43.68em, 43.68em - var(--vn))))
    - 2 * (1.04em - min(1.04em, max(var(--vn) - 44.72em, 44.72em - var(--vn))))); }
  #custom-lp-wrapper .vc:nth-of-type(4) .vc-t { width: calc(var(--vn) + 1px
    - (1.04em - min(1.04em, max(var(--vn) - 18.72em, 18.72em - var(--vn))))
    - (1.04em - min(1.04em, max(var(--vn) - 28.08em, 28.08em - var(--vn))))); }
}
/* 名前の前に短い線（丸いアバターはやめた。頭文字は aria-hidden なので線に置き換える） */
#custom-lp-wrapper .vc-who { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; margin-top: 16px; line-height: 1.5; }
#custom-lp-wrapper .av { grid-column: 1; grid-row: 1; width: 20px; height: 1px; overflow: hidden; background: var(--navy); font-size: 0; color: transparent; }
#custom-lp-wrapper .vc-who-n { grid-column: 2; grid-row: 1; font-family: var(--f-maru); font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--navy); }
#custom-lp-wrapper .vc-who-c { grid-column: 2; margin-top: 2px; font-size: var(--fs-small); letter-spacing: .03em; color: var(--ink-2); }
#custom-lp-wrapper .vo-note { padding-top: 20px; border-top: 1px solid var(--rule); }

/* =========================================================
   SEC-09 FAQ（セージの地。カードにせず、線で区切る。
   質問の表の下の紺の線を「床」にして、玄関に入っていく家族を立たせる → 次の開催概要へ）
   ========================================================= */
#custom-lp-wrapper .faq { padding: 72px 0 72px; background: var(--noise), var(--cream); interpolate-size: allow-keywords; } /* 開閉の高さを auto まで滑らかに（非対応のブラウザは今までどおり瞬時に開く） */
#custom-lp-wrapper .faq-grid { position: relative; }
#custom-lp-wrapper .faq-list { margin-top: 32px; border-top: 1px solid var(--navy); }
#custom-lp-wrapper .fq + .fq { border-top: 1px solid var(--rule); }
#custom-lp-wrapper .fq:last-of-type { border-bottom: 1px solid var(--rule); } /* wpautop が足す空の p に負けないよう last-of-type。PCは床の線が受けるので外す */
#custom-lp-wrapper .fq-q {
  position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 68px; padding: 20px 56px 20px 0;
  cursor: pointer; list-style: none; font-family: var(--f-maru); font-size: var(--fs-body); font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--navy);
}
#custom-lp-wrapper .fq-q::-webkit-details-marker { display: none; }
#custom-lp-wrapper .fq-q::marker { content: ""; }
/* Q は1行目にそろえる（2行の質問でも、行の頭の位置が変わらない） */
#custom-lp-wrapper .fq-q:before {
  content: "Q"; flex: none; width: 20px; font-family: var(--f-en); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: 0; color: var(--orange-ink);
}
/* 開閉のしるし：細い線の丸に、細い十字。開くと縦の線が縮んで「−」に */
#custom-lp-wrapper .fq-q:after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  border: 1px solid rgba(15, 36, 67, .55); /* 生成りの上で3.2:1。十字は紺の1.5pxのまま */
  background:
    linear-gradient(var(--navy), var(--navy)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 12px no-repeat;
  transition: background-size .25s ease, background-color .2s ease;
}
#custom-lp-wrapper .fq-q:hover:after { background-color: rgba(15, 36, 67, .08); }
#custom-lp-wrapper .fq[open] .fq-q:after { background-size: 12px 1.5px, 1.5px 0; }
/* 開閉：答えの高さを0からautoへ（Chrome 131〜）。閉じる動きの最後まで content-visibility を保つ */
#custom-lp-wrapper .fq::details-content { height: 0; overflow: clip; transition: height .28s ease, content-visibility .28s allow-discrete; }
#custom-lp-wrapper .fq[open]::details-content { height: auto; }
#custom-lp-wrapper .fq-a { padding: 0 0 26px 34px; margin-top: -4px; }
#custom-lp-wrapper .fq-at { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .04em; color: var(--ink-2); }
/* 床に立つ家族：SPは表のすぐ下、右に寄せる */
#custom-lp-wrapper .faq-il { position: relative; z-index: 1; width: min(44%, 172px); margin: 24px -2px 0 auto; } /* 最後の罫から玄関の絵まで24px（扉が罫に刺さって見えない） */
#custom-lp-wrapper .faq-il img { width: 100%; }
#custom-lp-wrapper .faq-grid:after { /* 床の線（表の下の紺の線を、家族の足もとまで） */
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; background: var(--navy);
}

/* =========================================================
   SEC-10 開催概要（招待状の見開き）
   左：案内状の組み（会の名前を大きく／「開催のご案内」に細い罫／会場は見積書の「開催期間」と同じ細枠のラベル）
   右：店舗の写真を画面の右端まで。屋根は右の端へ上がる（TOPの写真と同じ向き＝表紙と裏表紙）
   家族は写真の下の縁を、店へ向かって歩く。モデルハウスは小さな2枚目として、写真の説明を添える
   ========================================================= */
#custom-lp-wrapper .info { padding: 88px 0 64px; }
#custom-lp-wrapper .info-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
#custom-lp-wrapper .info-head { position: relative; z-index: 1; }
#custom-lp-wrapper .info .info-h { font-size: 16px; line-height: 1; letter-spacing: 0; }
#custom-lp-wrapper .info-h-name { display: block; font-size: var(--fs-h2-l); line-height: 1.3; letter-spacing: .06em; }
#custom-lp-wrapper .info-h-sub {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .3em;
}
#custom-lp-wrapper .info-h-sub:after { content: ""; flex: 1; min-width: 32px; height: 1px; background: currentColor; opacity: .32; }
#custom-lp-wrapper .info-venue {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 20px;
  font-size: var(--fs-body); font-weight: 500; line-height: 1.6; letter-spacing: .06em; color: var(--ink);
}
#custom-lp-wrapper .info-venue-k {
  flex: none; padding: 1px 9px 1px 11px; border: 1px solid rgba(15, 36, 67, .55); border-radius: 3px;
  font-family: var(--f-maru); font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .2em; color: var(--navy);
}
#custom-lp-wrapper .info-store { --arn: 1.5; margin: 36px calc(var(--gut) * -1) 0; }
#custom-lp-wrapper .info-store img { object-position: 42% 50%; }
#custom-lp-wrapper .info-il {
  position: relative; z-index: 2; width: 64%; margin: -58px 0 0 -6px;
  filter: var(--lift);
}
#custom-lp-wrapper .info-mh {
  display: grid; grid-template-columns: minmax(0, 1fr) 54%; column-gap: 16px; align-items: end; margin-top: -6px;
}
#custom-lp-wrapper .info-mh .pic { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 11; }
#custom-lp-wrapper .info-mh-cap {
  grid-column: 1; grid-row: 1; padding-top: 10px; border-top: 1px solid var(--navy);
  font-size: var(--fs-small); line-height: 1.75; letter-spacing: .04em; color: var(--ink-2);
}

/* =========================================================
   SEC-11 最終CTA（夕暮れの家を全幅の屋根の写真で。喜ぶ家族の足もとに、ひとこと。右に予約の紙）
   並び：ひとこと → ギフト券のバナー → すぐ下に「相談会を予約する」 → 資料 → 予約の条件 → 注記（※・Amazonの表記）
   ========================================================= */
#custom-lp-wrapper .last { padding: 24px 0 calc(64px + 76px); } /* 追従バーを引っ込められないブラウザでは、下端をバーの分だけ延ばす */
@supports (animation-timeline: scroll()) {
  #custom-lp-wrapper .last { padding-bottom: 72px; }
}
#custom-lp-wrapper .last-stage { position: relative; }
#custom-lp-wrapper .last-photo { --arn: .86; --rt: 4deg; --roof-th: 10px; }
#custom-lp-wrapper .last-photo img { object-position: 50% 40%; }
#custom-lp-wrapper .last-photo:after { /* 空の側に文字を載せるための影 */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(15, 36, 67, .62), rgba(15, 36, 67, .18) 50%, rgba(15, 36, 67, 0) 66%);
  clip-path: polygon(0 var(--ry), 100% 0, 100% 100%, 0 100%);
}
#custom-lp-wrapper .last-over { position: absolute; z-index: 2; left: 0; right: 0; top: calc(tan(4deg) * 100vw + 32px); }
#custom-lp-wrapper .last-h {
  font-family: var(--f-maru); font-weight: 700; font-size: 35px; line-height: 1.42; letter-spacing: .06em;
  font-feature-settings: "palt" 1; color: #fff; text-shadow: 0 2px 16px rgba(15, 36, 67, .45);
}
#custom-lp-wrapper .last-cheer { position: absolute; z-index: 3; left: 6px; bottom: 0; width: 36%; max-width: 168px; }
/* 女性の首に入っている透明な帯（絵の縦43.3〜45.3%）を、裏から肌色でふさぐ。寸法は絵に対する%なので、どの幅でも追従する */
#custom-lp-wrapper .last-cheer:before { content: ""; position: absolute; z-index: 0; left: 70.1%; top: 43.2%; width: 10.9%; height: 2.2%; background: #FCC998; }
#custom-lp-wrapper .last-cheer img { position: relative; z-index: 1; }
#custom-lp-wrapper .last-body { position: relative; z-index: 2; padding-top: 36px; }
/* ひとこと：一文目は見出しの書体で言い切る。二文目は本文で添える */
#custom-lp-wrapper .last-p { font-size: var(--fs-body); }
#custom-lp-wrapper .last-p-k {
  display: block; font-family: var(--f-maru); font-size: 22px; font-weight: 700; line-height: 1.55; letter-spacing: .05em;
  font-feature-settings: "palt" 1; color: var(--navy);
}
#custom-lp-wrapper .last-p-d { display: block; margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .04em; color: var(--ink-2); }
#custom-lp-wrapper .last-card { margin-top: 28px; }
/* ギフト券のバナー（予約ページへ）。「相談会を予約する」の真上。影で浮かせず、細い線で紙に置く */
#custom-lp-wrapper .last-gift {
  display: block; border-radius: var(--r-s); overflow: hidden; outline: 1px solid rgba(15, 36, 67, .1); outline-offset: -1px;
  transition: translate .2s ease;
}
#custom-lp-wrapper .last-gift img { width: 100%; height: auto; }
#custom-lp-wrapper .last-gift:hover { translate: 0 -2px; }
#custom-lp-wrapper .last-gift:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#custom-lp-wrapper .cta-set--last { margin-top: 14px; }
#custom-lp-wrapper .last .last-micro { margin-top: 14px; text-align: center; letter-spacing: .04em; }
#custom-lp-wrapper .last-gift-note {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.7; letter-spacing: .02em;
  word-break: auto-phrase; text-wrap: pretty; /* 注記は文節で折り、最終行が短くならないように整える（「株式会社」「キャンペーン」「Amazon.com, Inc.」を途中で割らない） */
}

/* =========================================================
   768px〜
   ========================================================= */
@media (min-width: 768px) {
  #custom-lp-wrapper {
    --fs-h2-l: 38px; --fs-h2: 32px; --fs-h3: 21px; --fs-table: 15px; --gut: 40px; --roof-th: 9px; --roof-oh: 16px;
    --gap-eyebrow: 16px; --gap-h2: 24px; --r-l: 24px;
  }
  #custom-lp-wrapper .cta-set--fv, #custom-lp-wrapper .cta-set--mid, #custom-lp-wrapper .cta-set--band, #custom-lp-wrapper .cta-set--last { grid-template-columns: 1.1fr 1fr; }

  #custom-lp-wrapper .fv-photo { --arn: 2.5; margin-top: 28px; }
  #custom-lp-wrapper .fv-note { bottom: -22px; padding: 12px 18px 13px; font-size: 16px; }
  #custom-lp-wrapper .fv-il { right: 16px; bottom: -30px; width: 200px; }
  #custom-lp-wrapper .fv-text { padding-top: 40px; }
  #custom-lp-wrapper .fv-lock { max-width: 520px; }
  #custom-lp-wrapper .fv-lead { margin-top: 22px; }
  #custom-lp-wrapper .cta-set--fv { margin-top: 26px; max-width: 620px; } /* 768〜1023px：紙面を本文の枠に広げる（1024〜は下の段の値） */
  #custom-lp-wrapper .fv-idx { max-width: 620px; margin-top: 24px; }
  #custom-lp-wrapper .fv-data-note { max-width: 620px; }
  #custom-lp-wrapper .fv-idx-i { padding: 14px 16px 2px; }
  #custom-lp-wrapper .fv-num-v { font-size: 40px; }
  #custom-lp-wrapper .fv-num-u { font-size: 14px; }
  #custom-lp-wrapper .fv-idx-s { font-size: 13px; }

  /* .pr-photo は SP と同じ窓（--arn: .95・45% 100%）のまま */
  #custom-lp-wrapper .pr-list { margin: -40px 0 0 auto; width: 84%; padding: 8px 36px; }
  #custom-lp-wrapper .pr-i { padding: 22px 0 22px 42px; }
  #custom-lp-wrapper .pr-i:before { top: 24px; width: 27px; height: 25px; }
  #custom-lp-wrapper .pr-k { font-size: 19px; }

  /* 比べられない理由：本文は1文ずつ改行。吹き出しは絵の左に並べ、しっぽを二人へ向ける */
  #custom-lp-wrapper .gk-head { row-gap: 24px; }
  #custom-lp-wrapper .gk-il { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 1fr auto auto 1.3fr; column-gap: 28px; }
  #custom-lp-wrapper .gk-il-img { grid-column: 2; grid-row: 1 / -1; width: 100%; margin: 0 0 -40px; }
  #custom-lp-wrapper .bubble { grid-column: 1; justify-self: end; }
  #custom-lp-wrapper .bubble--1 { grid-row: 2; }
  #custom-lp-wrapper .bubble--2 { grid-row: 3; margin: 14px 28px 0 0; }
  #custom-lp-wrapper .bubble:after { /* しっぽは右上（二人の頭）へ */
    left: 100%; top: 2px; bottom: auto; width: 18px; height: 24px; margin: 0; border: 0; rotate: none;
    background: no-repeat 0 0 / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M0 13 L17 2 L0 23Z' fill='%23FFFFFF'/%3E%3Cpath d='M1.5 12 L17 2 L1.5 21.2' fill='none' stroke='%230F2443' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  /* 比較表：768px〜は表に戻す（SPの「帯＋3等分」を打ち消す） */
  #custom-lp-wrapper .mx { display: table; }
  #custom-lp-wrapper .mx thead { display: table-header-group; }
  #custom-lp-wrapper .mx tbody { display: table-row-group; }
  #custom-lp-wrapper .mx tr { display: table-row; }
  #custom-lp-wrapper .mx-cap { display: table-caption; }
  #custom-lp-wrapper .mx-h, #custom-lp-wrapper .mx-c, #custom-lp-wrapper .mx-k { display: table-cell; }
  #custom-lp-wrapper .mx-h--k { position: static; height: auto; overflow: visible; clip: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  #custom-lp-wrapper .mx-k { background: none; border-bottom: 1px solid var(--rule); }
  #custom-lp-wrapper .mx-r:last-child .mx-k { border-bottom: 0; }
  #custom-lp-wrapper .mx-ks { display: block; margin: 1px 0 0; }
  #custom-lp-wrapper .mx-c { font-size: var(--fs-table); }
  #custom-lp-wrapper .mx-r--total .mx-k, #custom-lp-wrapper .mx-r--total .mx-c { padding-top: 16px; padding-bottom: 14px; border-bottom: 3px double var(--navy); }
  #custom-lp-wrapper .mx-h--k { width: 30%; }
  #custom-lp-wrapper .mx-cap { padding: 24px 45% 14px 24px; font-size: 15px; }
  #custom-lp-wrapper .mx-h { padding: 14px 6px 12px; font-size: 16px; }
  #custom-lp-wrapper .mx-house { width: 26px; height: 22px; }
  #custom-lp-wrapper .mx-k { padding: 16px 10px 15px 24px; }
  #custom-lp-wrapper .mx-c { padding: 16px 6px 15px; }
  #custom-lp-wrapper .mx-r--total .mx-k { padding-top: 22px; }
  #custom-lp-wrapper .mx-n { display: inline; font-size: 28px; }
  #custom-lp-wrapper .mx-u { display: inline; margin-left: 3px; font-size: 13px; }
  #custom-lp-wrapper .mx-m { padding: 3px 9px; font-size: 14px; }
  #custom-lp-wrapper .pen-o { left: -10px; width: calc(100% + 20px); }
  #custom-lp-wrapper .mx-legend { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; column-gap: 24px; padding: 14px 24px 16px; }
  #custom-lp-wrapper .gk-note { text-align: right; }
  #custom-lp-wrapper .gk-point { margin-top: 44px; font-size: 24px; line-height: 1.65; }
  /* 結果は1行に：左に数、右にひとこと（細い縦線で区切る） */

  #custom-lp-wrapper .who { padding: 80px 0 96px; }
  #custom-lp-wrapper .who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 48px; }
  #custom-lp-wrapper .who-head { grid-column: 1; grid-row: 1; align-self: start; }
  #custom-lp-wrapper .who-list { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  #custom-lp-wrapper .who-il { grid-column: 1; grid-row: 2; align-self: end; width: 200px; margin: 28px 0 -4px; } /* 絵の足もと＝一覧の下の罫 */
  #custom-lp-wrapper .who-i { padding: 22px 0 22px 32px; }
  #custom-lp-wrapper .who-i:before { top: 35px; }
  #custom-lp-wrapper .who-k { font-size: 19px; }
  #custom-lp-wrapper .band-sec { --band-pb: 64px; }
  /* BD-2：1列のあいだは帯の内法を860px（元画像689pxの1.25倍）まで。cqw の容器は .wrap なので、継ぎ目の高さと絵の位置が自動で合う */
  #custom-lp-wrapper .band-sec .wrap { max-width: 940px; }
  /* タブレット：写真は横長に（元画像689pxを引き伸ばさない）。電卓と手元が入る高さ */
  #custom-lp-wrapper .band { --band-ar: 2; }
  #custom-lp-wrapper .band-photo img { object-position: 40% 42%; }
  #custom-lp-wrapper .band-il { top: calc(100cqw / var(--band-ar) - 150px); right: 28px; width: 300px; }
  #custom-lp-wrapper .band-body { padding: 72px 44px 44px; }
  #custom-lp-wrapper .band-h { font-size: 32px; letter-spacing: .06em; }

  /* 相談会の2時間：3つの絵が、1本のペンの階段（踏み板）に立つ。
     踏み板の高さ＝絵の箱（列幅×0.8）の下。列幅は cqw から出すので、どの幅でも線と絵がずれない */
  #custom-lp-wrapper .fl { --st-g: 28px; --st-s: 56px; --st-c: calc((100cqw - var(--st-g) * 2) / 3); padding-top: 72px; }
  #custom-lp-wrapper .steps-wrap { container-type: inline-size; }
  #custom-lp-wrapper .steps { grid-template-columns: repeat(3, 1fr); gap: var(--st-g); }
  #custom-lp-wrapper .step { display: block; }
  #custom-lp-wrapper .step:nth-child(1) { margin-top: calc(var(--st-s) * 2); }
  #custom-lp-wrapper .step:nth-child(2) { margin-top: var(--st-s); }
  #custom-lp-wrapper .steps-path {
    display: block; position: absolute; z-index: 0; left: 0; width: 100%;
    top: calc(var(--st-c) * .8 + 14px - var(--st-s) / 4); height: calc(var(--st-s) * 2.5);
  }
  #custom-lp-wrapper .steps-path path { stroke-width: 2; vector-effect: non-scaling-stroke; }
  #custom-lp-wrapper .step-il { margin: 0; }
  #custom-lp-wrapper .step-n { margin-top: 34px; }
  #custom-lp-wrapper .step .h3 { margin-top: 10px; font-size: 21px; }
  #custom-lp-wrapper .step-d { margin: 10px 0 0; max-width: 21em; font-size: 15px; }

  #custom-lp-wrapper .cs-sec:before { margin-bottom: 72px; }

  #custom-lp-wrapper .proof-list { grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 24px; }
  #custom-lp-wrapper .proof-i--big { grid-column: 1; grid-row: 1 / 3; }
  #custom-lp-wrapper .proof-i--big .proof-f { display: flex; flex-direction: column; height: 100%; }
  #custom-lp-wrapper .proof-i:not(.proof-i--big) .proof-f { display: block; }
  #custom-lp-wrapper .proof-i:not(.proof-i--big) .proof-cap { margin-top: 12px; }
  #custom-lp-wrapper .proof-i .pic { aspect-ratio: 16 / 10; }
  #custom-lp-wrapper .proof-i--big .pic { flex: 1; aspect-ratio: auto; min-height: 260px; }

  #custom-lp-wrapper .vo { padding: 104px 0 104px; }
  #custom-lp-wrapper .vo-photo { width: 62%; column-gap: 20px; }
  #custom-lp-wrapper .vo-photo-t { font-size: 19px; }
  #custom-lp-wrapper .vo-photo-by { font-size: 13px; }
  #custom-lp-wrapper .vo .p { max-width: 34em; }
  #custom-lp-wrapper .vc:not(.vc--main) .vc-t { width: calc(31.2em + 1px); max-width: calc(31.2em + 1px); } /* 30字ぶん（3つ目の声の最終行を3字以上にする） */
  #custom-lp-wrapper .stat-bar { max-width: none; height: 24px; }
    #custom-lp-wrapper .vc--main { padding: 44px 0 40px; }
  #custom-lp-wrapper .vc--main .vc-t { font-size: 23px; max-width: 19em; }
  #custom-lp-wrapper .vo-il { width: 300px; margin-bottom: -18px; }

  #custom-lp-wrapper .faq { padding: 96px 0 88px; }
  #custom-lp-wrapper .faq-il { width: 200px; }

  /* 開催概要：写真は左に少し余白を残して、右の画面の端まで */
  #custom-lp-wrapper .info { padding: 104px 0 80px; }
  #custom-lp-wrapper .info-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  #custom-lp-wrapper .info-head { grid-column: 1 / -1; }
  #custom-lp-wrapper .info-h-sub { margin-top: 14px; font-size: 19px; }
  #custom-lp-wrapper .info-h-sub:after { flex: 0 1 220px; }
  #custom-lp-wrapper .info-venue { margin-top: 24px; }
  #custom-lp-wrapper .info-store { grid-column: 2 / -1; --arn: 1.55; margin: 44px calc(var(--gut) * -1) 0 0; }
  #custom-lp-wrapper .info-store img { border-radius: 0 0 0 var(--r-l); }
  #custom-lp-wrapper .info-il { grid-column: 1 / 8; grid-row: 3; width: 100%; margin: -120px 0 0 -8px; }
  #custom-lp-wrapper .info-mh { grid-column: 8 / -1; grid-row: 3; display: block; align-self: end; margin: 32px 0 0; }
  #custom-lp-wrapper .info-mh .pic { aspect-ratio: 16 / 10; }
  #custom-lp-wrapper .info-mh-cap { margin-top: 12px; }

  /* 最終CTA：写真の下は、左にひとこと・右に予約の紙（写真に重ねる） */
  #custom-lp-wrapper .last { padding-top: 40px; }
  #custom-lp-wrapper .last-photo { --arn: 1.5; }
  #custom-lp-wrapper .last-h { font-size: 44px; }
  #custom-lp-wrapper .last-cheer { left: calc(var(--gut) - 10px); width: 25%; max-width: 200px; }
  #custom-lp-wrapper .last-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); column-gap: 32px; align-items: start; padding-top: 0; }
  #custom-lp-wrapper .last-p { padding-top: 40px; }
  #custom-lp-wrapper .last-p-k { font-size: 23px; }
  #custom-lp-wrapper .last-card {
    margin: -150px 0 0; padding: 28px 28px 26px; background: #fff; border-radius: var(--r-l);
    box-shadow: var(--shadow);
  }
  #custom-lp-wrapper .cta-set--last { grid-template-columns: 1fr; }

  /* 追従バー：右下に浮かぶ札に */
  #custom-lp-wrapper .stick {
    left: auto; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
    display: flex; gap: 8px; padding: 8px; border: 1px solid rgba(15, 36, 67, .12); border-radius: 999px;
    box-shadow: var(--shadow-float);
  }
  #custom-lp-wrapper .stick-s, #custom-lp-wrapper .stick-p { min-height: 50px; padding: 4px 22px; }
  #custom-lp-wrapper .stick-p { padding-right: 14px; }
}

/* =========================================================
   1024px〜（PC）
   ========================================================= */
@media (min-width: 1024px) {
  #custom-lp-wrapper .who { padding: 96px 0 112px; }
  #custom-lp-wrapper .who-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; }
  #custom-lp-wrapper .who-il { width: 250px; margin-top: 36px; }
  #custom-lp-wrapper .who-i { padding: 26px 0 26px 36px; }
  #custom-lp-wrapper .who-i:before { top: 39px; width: 18px; }
  #custom-lp-wrapper .who-k { font-size: 20px; }
  #custom-lp-wrapper .who-d { font-size: 17px; }
  #custom-lp-wrapper {
    --fs-h2-l: 48px; --fs-h2: 36px; --fs-h3: 21px; --fs-body: 17px; --roof-th: 11px; --roof-oh: 20px;
    --gap-eyebrow: 16px; --gap-h2: 32px;
  }
  #custom-lp-wrapper .h2 { line-height: 1.45; }
  #custom-lp-wrapper .h2--l { line-height: 1.38; }
  #custom-lp-wrapper .cta { min-height: 56px; }
  #custom-lp-wrapper .cta--p, #custom-lp-wrapper .cta--w { min-height: 60px; }

  /* FV：左に紙面（本文の左端にそろえる）、右に画面の端までの屋根の写真（見出しの高さいっぱい） */
  #custom-lp-wrapper .fv { padding: 0; }
  #custom-lp-wrapper .fv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44vw; min-height: 800px; }
  #custom-lp-wrapper .fv-photo {
    grid-column: 2; grid-row: 1; aspect-ratio: auto; margin-top: 44px; --rt: 6deg;
    --ry: calc(tan(var(--rt)) * 44vw); /* 高さは紙面に合わせて伸びるので、傾きは幅から計算 */
  }
  #custom-lp-wrapper .fv-photo img { object-position: min(30%, calc(40% + (100vw - 1024px) * 1.04)) 50%; } /* 夫婦の顔を縦長の枠に入れる。1024px付近は右へ寄せて男性の頬と耳を残し、約1100pxで30%に戻す（cover の％は負の長さなので min と＋） */
  /* ひとことカード：写真の左の縁（紙面との継ぎ目）にかける。下端はボタンの下端にそろえる（紙面の下の余白と同じ50px） */
  #custom-lp-wrapper .fv-note { right: auto; left: -24px; bottom: 50px; padding: 16px 22px 17px; font-size: 18px; }
  #custom-lp-wrapper .fv-il { right: 20px; bottom: -36px; width: 260px; }
  #custom-lp-wrapper .fv-note-roof { width: 36px; height: 14px; margin-bottom: 8px; }
  /* 紙面：ロゴ組み｜リード｜目次｜ボタンを1本の左端と、ロゴ組みの幅（＝目次の幅）の中に組む */
  #custom-lp-wrapper .fv-text { grid-column: 1; grid-row: 1; justify-content: flex-end; padding: 48px 56px 50px var(--bleed); } /* 下そろえ：ボタンの下端＝ひとことカードの下端 */
  #custom-lp-wrapper .fv-lock { max-width: 520px; }
  #custom-lp-wrapper .fv-lead { margin-top: 28px; font-size: 17px; }
  #custom-lp-wrapper .fv-s--k { font-size: 26px; }
  #custom-lp-wrapper .fv-lead .fv-s:first-child .nw:first-child { display: block; } /* 1文目を読点で折る（ヤマト住建で建てた人の多くは、／何社も比べてから決めていました。） */
  #custom-lp-wrapper .fv-idx { max-width: 492px; margin-top: 36px; }
  #custom-lp-wrapper .fv-num-v { font-size: 44px; }
  #custom-lp-wrapper .fv-idx-s { display: none; }
  #custom-lp-wrapper .fv-idx-d { display: block; margin-top: 8px; font-size: 13px; line-height: 1.7; letter-spacing: .03em; color: var(--ink-2); }
  #custom-lp-wrapper .fv-data-note { max-width: 492px; margin-top: 10px; }
  #custom-lp-wrapper .cta-set--fv { margin-top: 32px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); max-width: 492px; } /* 横並び。右端を目次の右端にそろえる。予約（第一）を資料より少し広く */
  #custom-lp-wrapper .cta-set--fv .cta { padding-left: 18px; padding-right: 18px; letter-spacing: .05em; white-space: nowrap; } /* 共通ボタンの字間（.08em）では2つ目が折れるため、TOPの横並びだけ詰める */
  #custom-lp-wrapper .cta-set--fv .cta--s { letter-spacing: .03em; padding-left: 12px; padding-right: 12px; }

  /* 約束：写真は左の画面端から。見出しは右上、約束のパネルは写真に1列かぶせて右下。
     写真の高さは見出し＋パネルに合わせて伸ばし（下はパネルより72〜96px短く＝ずらし）、屋根の傾きは写真の幅から計算。
     パネルの文字の左端は、見出しの左端にそろえる（チェックは写真の右の縁の線上に下げる） */
  #custom-lp-wrapper .pr { padding: 120px 0 128px; }
  #custom-lp-wrapper .pr-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
    --pr-col: calc((min(100vw, var(--maxw)) - var(--gut) * 2 - 264px) / 12); /* 12列の1列の幅 */
  }
  /* 1024〜1279px は写真6列＋文字6列、1280px〜は写真7列＋文字5列（下の1280pxの段） */
  #custom-lp-wrapper .pr-photo {
    --pr-n: 6;
    grid-column: 1 / 7; grid-row: 1 / 3; align-self: stretch; aspect-ratio: auto; min-height: 460px;
    margin: 0 0 96px calc(var(--bleed) * -1);
    --ry: calc(tan(var(--rt)) * (var(--bleed) + var(--pr-col) * var(--pr-n) + 24px * (var(--pr-n) - 1)));
  }
  /* 切り抜きの左右：男性と女性が枠に入り、右下の手すりがパネルの下に隠れる位置 */
  #custom-lp-wrapper .pr-photo img { object-position: 45% 100%; border-radius: 0 0 var(--r-l) 0; }
  #custom-lp-wrapper .pr-head { grid-column: 7 / 13; grid-row: 1; align-self: end; padding: 24px 0 0 24px; }
  #custom-lp-wrapper .pr-list { grid-column: 6 / 13; grid-row: 2; margin: 44px 0 0 24px; width: auto; padding: 12px 40px 12px calc(var(--pr-col) - 20px); } /* パネルの左端だけ24px右へ（母親の肩から離す）。文字とチェックの位置は「1列＋4px」のまま */
  #custom-lp-wrapper .pr-i { padding: 20px 0 20px 44px; }
  #custom-lp-wrapper .pr-i:before { left: -1px; top: 21px; width: 28px; height: 26px; }
  #custom-lp-wrapper .pr-k { font-size: 21px; }
  #custom-lp-wrapper .pr-d { margin-top: 4px; font-size: 15px; }
  #custom-lp-wrapper .pr-head .h2 { font-size: min(36px, 3.2vw); } /* 「比べに来てください。」を1行に収める */

  /* 比べられない理由：見出しは特大。考え込む二人は表の右上の縁に乗る */
  #custom-lp-wrapper .gk { padding: 112px 0 96px; }
  #custom-lp-wrapper .h2--xl, #custom-lp-wrapper .h2--l { font-size: min(48px, 4.4vw); } /* 主張の段（gk・vo。info の会の名前は屋根の計算に合わせて 4.1vw） */
  #custom-lp-wrapper .h2--xl { line-height: 1.34; }
  /* 左に文字と吹き出し、右に考え込む二人（表の右上の縁に乗る）。
     吹き出しは figure の中身をグリッドに出して（display: contents）、文字の下・絵の左へ */
  #custom-lp-wrapper .gk-head { grid-template-columns: minmax(0, 1fr) min(440px, 38vw); grid-template-rows: auto auto auto 1fr; column-gap: 40px; row-gap: 0; }
  #custom-lp-wrapper .gk-text { grid-column: 1; grid-row: 1; }
  #custom-lp-wrapper .gk-text .p { max-width: none; }
  #custom-lp-wrapper .gk-il { display: contents; }
  #custom-lp-wrapper .gk-il-img { grid-column: 2; grid-row: 1 / -1; align-self: end; margin: 0 0 -88px; }
  #custom-lp-wrapper .bubble { grid-column: 1; padding: 9px 18px 10px; font-size: 16px; }
  #custom-lp-wrapper .bubble--1 { grid-row: 2; margin-top: 36px; }
  #custom-lp-wrapper .bubble--2 { grid-row: 3; margin: 14px 44px 0 0; }
  #custom-lp-wrapper .gk-fig, #custom-lp-wrapper .gk-point { max-width: 920px; }
  #custom-lp-wrapper .gk-fig { margin-top: 32px; }
  #custom-lp-wrapper .mx-h--k { width: 30%; }
  #custom-lp-wrapper .mx-cap { padding: 26px 45% 16px 28px; }
  #custom-lp-wrapper .mx-k { padding-left: 28px; font-size: 15px; }
  #custom-lp-wrapper .mx-ks { display: inline; margin: 0 0 0 10px; }
  #custom-lp-wrapper .mx-c { font-size: 15px; }
  #custom-lp-wrapper .mx-r--total .mx-k { padding-top: 24px; }
  #custom-lp-wrapper .mx-n { font-size: 30px; }
  #custom-lp-wrapper .mx-legend { padding: 14px 28px 16px; }
  #custom-lp-wrapper .gk-point { margin-top: 52px; font-size: 26px; line-height: 1.6; }

  /* 7行チェック */

  /* 申込の帯：左が写真、右が青。イラストは継ぎ目の下からはみ出す */
  #custom-lp-wrapper .band-sec { --band-pb: 80px; padding-top: 0; }
  #custom-lp-wrapper .band-sec .wrap { max-width: var(--maxw); } /* BD-2：2列に戻るので幅も戻す */
  #custom-lp-wrapper .band { grid-template-columns: 1fr 1fr; min-height: 400px; }
  #custom-lp-wrapper .band:before { top: 50%; }
  #custom-lp-wrapper .band-photo { aspect-ratio: auto; border-radius: var(--r-l) 0 0 var(--r-l); }
  #custom-lp-wrapper .band-il { top: auto; bottom: -44px; right: auto; left: calc(50% - 170px); width: 250px; max-width: none; } /* BD-1：写真側に170px・藍側に80px。ボタンの左端まで24px */
  #custom-lp-wrapper .band-body { padding: 56px 48px 56px 104px; align-self: center; }
  #custom-lp-wrapper .band-h { font-size: min(32px, 2.6vw); } /* 1024pxで約26.6px：2行目が1行に入る */
  #custom-lp-wrapper .cta-set--band { grid-template-columns: 1fr; max-width: 360px; }

  /* 相談会の2時間 */
  #custom-lp-wrapper .fl { --st-g: 48px; --st-s: 80px; padding: 80px 0 calc(64px + 7vw); }
  #custom-lp-wrapper .steps-wrap { margin-top: 8px; } /* FL-1：見出しの字面からSTEP03の絵まで32px以上 */
  #custom-lp-wrapper .step .h3 { font-size: 21px; }
  #custom-lp-wrapper .step-d { font-size: 16px; }
  /* 02・03の絵は元が小さい（419px・387px）ので、列いっぱいまで引き伸ばさない */
  #custom-lp-wrapper .step:nth-child(2) .step-il img, #custom-lp-wrapper .step:nth-child(3) .step-il img { max-width: min(100%, 280px); }

  /* 比較シート（紺） */
  #custom-lp-wrapper .cs-sec { padding-bottom: 120px; }
  #custom-lp-wrapper .cs-sec:before { margin-bottom: 96px; }
  /* 写真：大きい1枚は「行＋お手元」の幅、小さい2枚は「ヤマト住建」の列の幅 */
  #custom-lp-wrapper .proof-list { grid-template-columns: calc(59% - 32px) 41%; gap: 32px; margin-top: 40px; }
  #custom-lp-wrapper .proof-i--big .pic { min-height: 380px; }
  #custom-lp-wrapper .proof-i--big .pic img { object-position: 100% 50%; } /* CS-3：縦長に切っても、筒の BILSTEIN の刻印を枠に入れる */
  #custom-lp-wrapper .proof-cap { font-size: 15px; } /* CS-1 */
  #custom-lp-wrapper .proof-k { font-size: 15px; }
  #custom-lp-wrapper .proof-i:last-child .pic { aspect-ratio: 4 / 3; } /* CS-2：PCで窓の断面図の小さなラベルが読める大きさに（左の写真は flex で伸びる） */
  #custom-lp-wrapper .cta-set--mid { margin-top: 56px; }

  /* 人と声：左に写真と縦組み、右に見出しと数字。声は3段の罫線の中へ */
  #custom-lp-wrapper .vo { padding: 128px 0 120px; }
  #custom-lp-wrapper .vo-top { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); column-gap: 64px; align-items: end; } /* 写真の下端と目盛りの下端を1本の線にそろえる */
  #custom-lp-wrapper .vo-photo { width: 100%; column-gap: 22px; }
  #custom-lp-wrapper .vo-photo-t { font-size: 20px; letter-spacing: .34em; }
  /* 数字（左）｜ラベルと補足（右・下そろえ）／目盛りは全幅 */
  #custom-lp-wrapper .stat {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto auto;
    grid-template-areas: "n ." "n k" "n d" "b b"; column-gap: 32px; margin-top: 44px; padding-top: 36px;
  }
  #custom-lp-wrapper .stat-n { grid-area: n; align-self: end; }
  #custom-lp-wrapper .stat-v { font-size: 120px; }
  #custom-lp-wrapper .stat-u { font-size: 26px; }
  #custom-lp-wrapper .stat-k { grid-area: k; margin-top: 0; font-size: 21px; line-height: 1.55; }
  /* 1024px〜は「「営業担当の人柄」…」がいつも行頭に来る。本文（Noto）は詰める。ラベルの丸ゴシックは括弧の詰めの情報を持たないので、半字ぶら下げる */
  #custom-lp-wrapper .vo .p .nw { text-spacing-trim: trim-start; }
  #custom-lp-wrapper .stat-k .nw:first-child { margin-left: -.5em; }
    #custom-lp-wrapper .stat-bar { grid-area: b; margin-top: 24px; }
  #custom-lp-wrapper .vo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; margin-top: 104px; border-top: 1px solid var(--navy); }
  #custom-lp-wrapper .vo-il { grid-column: 3; grid-row: 1; align-self: end; width: 100%; max-width: 320px; margin: 32px 0 -26px auto; }
  #custom-lp-wrapper .vc--main { grid-column: 1 / 3; grid-row: 1; padding: 52px 0 48px; border-top: 0; }
  #custom-lp-wrapper .vc--main .vc-t { font-size: 26px; line-height: 1.8; max-width: 19em; }
  /* 3段：段の幅をそろえ（段間64px）、横と縦の罫線は段間の中央に引く */
  #custom-lp-wrapper .vc:not(.vc--main) { position: relative; grid-row: 2; padding: 40px 0 8px; border-top: 0; }
  #custom-lp-wrapper .vc:not(.vc--main):after { content: ""; position: absolute; top: 0; left: -32px; right: -32px; height: 1px; background: var(--rule); }
  #custom-lp-wrapper .vc--main + .vc:after { left: 0; }
  #custom-lp-wrapper .vc:last-of-type:after { right: 0; }
  #custom-lp-wrapper .vc:not(.vc--main) + .vc:not(.vc--main):before { content: ""; position: absolute; left: -32px; top: 1px; bottom: 0; width: 1px; background: var(--rule); } /* 横の罫と1pxも重ねない（半透明なので重なると点に見える） */
  #custom-lp-wrapper .vc:not(.vc--main) .vc-t { font-size: 16px; width: calc(15.6em + 1px); max-width: none; } /* 15字ぶん（段の幅272px以上に収まる） */
  #custom-lp-wrapper .vo-note { margin-top: 48px; }

  /* FAQ：左に見出し、右に質問。家族は左下で「床」（表の下の紺の線）に立つ */
  #custom-lp-wrapper .faq { padding: 120px 0 120px; }
  #custom-lp-wrapper .faq-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.8fr); column-gap: 64px; align-items: start; }
  #custom-lp-wrapper .faq-head { grid-column: 1; grid-row: 1; }
  #custom-lp-wrapper .faq-list { grid-column: 2; grid-row: 1; margin-top: 0; }
  #custom-lp-wrapper .faq-il { position: absolute; left: var(--gut); bottom: 0; width: 228px; margin: 0; }
  #custom-lp-wrapper .faq-head .h2 { font-size: min(36px, 3.2vw); letter-spacing: .03em; } /* 左の列（320px〜）で「先にお答えします。」を1行に（vw はスクロールバーの幅を含むので、字間で余裕を持たせる） */
  #custom-lp-wrapper .fq-q { min-height: 80px; padding: 24px 64px 24px 0; font-size: 18px; }
  #custom-lp-wrapper .fq-q:before { font-size: 22px; line-height: 1.3; }
  #custom-lp-wrapper .fq-a { padding: 0 64px 32px 34px; margin-top: -6px; }
  #custom-lp-wrapper .fq:last-of-type { border-bottom: 0; } /* 表の下端は床の線（2px）が受ける */

  /* 開催概要（見開き）：左上に案内状の組み、左下にモデルハウス。右は画面の端までの店舗。
     家族は二枚のあいだを、店舗の写真の下の縁に足をかけて歩く */
  #custom-lp-wrapper .info { padding: 128px 0 104px; }
  #custom-lp-wrapper .info-grid { grid-template-rows: auto 1fr; }
  #custom-lp-wrapper .info-head { grid-column: 1 / 6; grid-row: 1; padding-top: 28px; }
  #custom-lp-wrapper .info-h-name { font-size: min(48px, 4.1vw); line-height: 1.28; }
  #custom-lp-wrapper .info-h-sub { margin-top: 16px; font-size: 20px; }
  #custom-lp-wrapper .info-h-sub:after { flex: 1; }
  #custom-lp-wrapper .info-venue { margin-top: 28px; font-size: 17px; }
  /* 屋根の左の端を「開催のご案内」の罫の高さにそろえる（罫がそのまま軒へつながる）。
     罫の高さ＝上の余白28＋小見出し33.6＋会の名前（行送り1.28）＋16＋行の半分15。屋根の端＝写真の幅×tan(6°)−4.5 */
  /* 写真は画面の端まで伸びるので、高さは幅に比例させず上限を決める（TOPと同じく、傾きは幅から計算。幅＝50vw＋77px） */
  #custom-lp-wrapper .info-store {
    grid-column: 6 / 13; grid-row: 1 / 3; align-self: start;
    aspect-ratio: auto; height: clamp(440px, 40vw, 600px); --ry: calc(tan(var(--rt)) * (50vw + 77px));
    margin: calc(28px + 33.6px + min(48px, 4.1vw) * 1.28 + 31px + 4.5px - (100% + var(--bleed)) * tan(var(--rt))) calc(var(--bleed) * -1) 0 0;
  }
  #custom-lp-wrapper .info-mh { grid-column: 1 / 5; grid-row: 2; align-self: end; margin: 24px 0 0; } /* 写真が3:2で高くなったぶん、案内の列が店舗の写真の下辺を越えないよう上の間を詰める（家族の足もとは写真の下辺から30px前後） */
  #custom-lp-wrapper .info-il {
    grid-column: 5 / 10; grid-row: 2; align-self: end; justify-self: start; width: 100%; max-width: min(360px, 30vw); /* 1024〜1200pxで絵が店舗の写真を覆う割合を20%前後に（360pxは1200pxから） */
    margin: 0 0 -30px 16px;
  }
  #custom-lp-wrapper .info-mh .pic { aspect-ratio: 3 / 2; } /* モデルハウスの写真を主に（列は1/5のまま。元画像 1024×768 に近い比） */

  /* 最終CTA */
  #custom-lp-wrapper .last { padding-top: 0; }
  #custom-lp-wrapper .last-photo { aspect-ratio: auto; height: clamp(480px, 48vw, 720px); --ry: calc(tan(var(--rt)) * 100vw); } /* 広い画面で写真が縦に伸びすぎないように */
  #custom-lp-wrapper .last-photo img { object-position: 50% 60%; } /* 玄関の明かりを、予約の紙の上に出す */
  #custom-lp-wrapper .last-over { top: calc(tan(4deg) * 100vw + 56px); }
  #custom-lp-wrapper .last-h { font-size: 60px; }
  #custom-lp-wrapper .last-cheer { left: max(24px, calc((100vw - var(--maxw)) / 2 + var(--gut) - 4px)); width: clamp(156px, 16vw, 236px); max-width: none; }
  #custom-lp-wrapper .last-body { grid-template-columns: minmax(0, 1fr) 520px; column-gap: 64px; }
  #custom-lp-wrapper .last-p { padding-top: 88px; }
  #custom-lp-wrapper .last-p-k { font-size: 26px; line-height: 1.6; }
  #custom-lp-wrapper .last-p-d { margin-top: 12px; }
  #custom-lp-wrapper .last-card { margin-top: calc(-1 * clamp(200px, 21vw, 268px)); padding: 40px 44px 34px; } /* 見出しの下線にかぶらない重なり */

  #custom-lp-wrapper .stick { right: 28px; bottom: 28px; animation-range: 0px 640px, entry 0% entry 40%; }
  #custom-lp-wrapper .stick-s, #custom-lp-wrapper .stick-p { min-height: 52px; padding: 4px 26px; font-size: 15px; }
  #custom-lp-wrapper .stick-p { padding-right: 16px; }
}

/* 1280px〜：見積書のイラストを少し大きく、紙の外へ／約束の写真を7列に */
@media (min-width: 1280px) {
  #custom-lp-wrapper .fv-note { left: -40px; } /* 紙面との間が広がるので、継ぎ目に深くかける */
  #custom-lp-wrapper .fv-il { right: 28px; width: 280px; }
  /* 約束：写真7列＋文字5列 */
  #custom-lp-wrapper .pr-photo { --pr-n: 7; grid-column: 1 / 8; margin-bottom: 72px; }
  #custom-lp-wrapper .pr-head { grid-column: 8 / 13; }
  #custom-lp-wrapper .pr-list { grid-column: 7 / 13; }
  #custom-lp-wrapper .pr-photo img { object-position: 40% 100%; }
  #custom-lp-wrapper .pr-i { padding: 24px 0 24px 44px; }
  #custom-lp-wrapper .pr-i:before { top: 26px; }
  #custom-lp-wrapper .pr-d { margin-top: 6px; font-size: 16px; }
  /* 最後の写真は1281px以上でも1280pxまで（元画像 1024px の1.25倍）。左右は紙の地が見える */
  #custom-lp-wrapper .last-photo { max-width: 1280px; margin-left: auto; margin-right: auto; --ry: calc(tan(var(--rt)) * min(100vw, 1280px)); }
  #custom-lp-wrapper .last-over { top: calc(tan(4deg) * min(100vw, 1280px) + 56px); }
  #custom-lp-wrapper .vc:not(.vc--main) .vc-t { letter-spacing: 0; width: calc(19em + 1px); } /* 列304pxに19字をベタ組み。+1pxは端数の丸めで18字に折れないための余裕（段間64pxの中に収まる） */
}

/* 〜359px */
@media (max-width: 359px) {
  #custom-lp-wrapper .who-k { font-size: 17px; }
  #custom-lp-wrapper .who-i { padding-left: 26px; }
  #custom-lp-wrapper .step .h3 { font-size: 17px; letter-spacing: .04em; }
  #custom-lp-wrapper { --fs-h2-l: 26px; --fs-h2: 24px; --gut: 16px; }
  #custom-lp-wrapper .cta { padding-left: 16px; padding-right: 16px; letter-spacing: .04em; } /* 320px幅でも「家づくりの資料を受け取る」を1行に */

  #custom-lp-wrapper .bubble { padding: 7px 12px 8px; font-size: 14px; }
  #custom-lp-wrapper .gk-point { font-size: 20px; } /* 22pxだと320pxで「A社は、」が1行に残る */
  #custom-lp-wrapper .mx-n { font-size: 21px; }
  #custom-lp-wrapper .mx-k { padding: 8px 12px 7px; font-size: 13px; }
  #custom-lp-wrapper .mx-c { padding: 12px 2px 13px; font-size: 14px; letter-spacing: 0; }
  #custom-lp-wrapper .mx-m { padding: 3px 4px; font-size: 13px; letter-spacing: 0; }
  #custom-lp-wrapper .mx-tag { padding: 1px 6px 2px; letter-spacing: 0; }
  #custom-lp-wrapper .mx-cap { padding-left: 12px; padding-right: 12px; font-size: 13px; }
  #custom-lp-wrapper .mx-legend { padding-left: 12px; padding-right: 12px; }
  #custom-lp-wrapper .proof-i:last-child .pic { aspect-ratio: 16 / 11; } /* CS-2：320pxでも窓の図を約180px以上に */
  #custom-lp-wrapper .stat-v { font-size: 80px; }
  #custom-lp-wrapper .fq-q { padding-right: 48px; font-size: 15px; }
  #custom-lp-wrapper .last-h { font-size: 30px; }
  #custom-lp-wrapper .last-p-k { font-size: 20px; }
  #custom-lp-wrapper .info-h-sub { letter-spacing: .24em; }
  #custom-lp-wrapper .stick { padding-left: 10px; padding-right: 10px; }
  #custom-lp-wrapper .stick-s, #custom-lp-wrapper .stick-p { padding: 4px 6px; font-size: 14px; letter-spacing: .02em; }
  #custom-lp-wrapper .stick-p { gap: 6px; }
  #custom-lp-wrapper .stick-p:after { width: 18px; height: 18px; }
  #custom-lp-wrapper .band-body { padding: 72px 20px 28px; }
  #custom-lp-wrapper .band-h { font-size: 22px; letter-spacing: .04em; } /* 2行目（10字）を1行に */
  #custom-lp-wrapper .fv-s--k { font-size: 20px; } /* 「比べるなら、同じ内容で。」（12字）を320pxでも1行に */
  #custom-lp-wrapper .vo .p .nw { text-spacing-trim: trim-start; } /* 320〜340pxでは「「営業担当の人柄」でした。」が行頭に来る（350〜359pxは行中で半字詰まるが、320pxを優先） */
}

/* ペンを描く（スクロールで。対応ブラウザだけ） */
@supports (animation-timeline: view()) {
  #custom-lp-wrapper .gk-fig { view-timeline-name: --am-pen-t; }
  #custom-lp-wrapper .gk-text { view-timeline-name: --am-pen-h; }
  #custom-lp-wrapper .steps-wrap { view-timeline-name: --am-pen-s; }
  #custom-lp-wrapper .last-stage { view-timeline-name: --am-pen-l; }
  #custom-lp-wrapper .pen-o path, #custom-lp-wrapper .pen-line path, #custom-lp-wrapper .steps-path path {
    stroke-dasharray: 1; animation: am-draw linear both;
  }
  #custom-lp-wrapper .pen-o path { animation-timeline: --am-pen-t; animation-range: entry 55% cover 42%; }
  #custom-lp-wrapper .mx-r:nth-child(3) .pen-o path { animation-range: entry 65% cover 45%; }
  #custom-lp-wrapper .mx-r:nth-child(4) .pen-o path { animation-range: entry 75% cover 48%; }
  #custom-lp-wrapper .mx-r:nth-child(5) .pen-o path { animation-range: entry 85% cover 51%; }
  #custom-lp-wrapper .mx-r:nth-child(6) .pen-o path { animation-range: entry 95% cover 54%; }
  #custom-lp-wrapper .mx-r:nth-child(7) .pen-o path { animation-range: contain 0% cover 57%; }
  #custom-lp-wrapper .pen-line path { animation-timeline: --am-pen-h; animation-range: entry 70% cover 45%; }
  #custom-lp-wrapper .steps-path path { animation-timeline: --am-pen-s; animation-range: entry 40% cover 55%; }
  #custom-lp-wrapper .pen-line--last path { animation-timeline: --am-pen-l; animation-range: entry 60% cover 45%; }
}

@media (prefers-reduced-motion: reduce) {
  #custom-lp-wrapper .an, #custom-lp-wrapper .fv-note { animation: none !important; }
  #custom-lp-wrapper .pen-svg path { animation: none !important; stroke-dasharray: none !important; }
  #custom-lp-wrapper .stick { animation: none !important; translate: none; visibility: visible; }
  #custom-lp-wrapper .last { padding-bottom: calc(64px + 76px); } /* バーは出たままになるので、最後のボタンの下にバーの分をあける */
  #custom-lp-wrapper .stick-s, #custom-lp-wrapper .stick-p, #custom-lp-wrapper .last-gift { transition: none !important; }
  #custom-lp-wrapper .cta, #custom-lp-wrapper .cta-a { transition: none !important; }
  #custom-lp-wrapper .fq-q:after { transition: none !important; }
  #custom-lp-wrapper .fq::details-content { transition: none !important; }
}

/* 配色「生成りと朱」の調整（v19）：申込の帯は朱の面にせず藍のまま。藍の上の白ボタンは、朱の丸に白の＞ */
#custom-lp-wrapper .band { background: var(--noise), var(--navy); }

/* =========================================================
   v35（2026-10-05）支給ロゴに合わせた調整：細い角ゴシックの見出し・Jostの数字・1pxの線・弱い影
   色はロゴの3色だけ：紺（見出し・ボタン・屋根・チェック）／グレー（小見出し・注記）／金（表の丸・下線・A社）。
   切り絵のイラストは元の色のまま（依頼）。
   ========================================================= */
#custom-lp-wrapper {
  --shadow: 0 0 0 1px rgba(15, 36, 67, .07), 0 12px 28px -16px rgba(15, 36, 67, .16);
  --shadow-float: 0 8px 20px -10px rgba(15, 36, 67, .2);
  --lift: drop-shadow(0 3px 4px rgba(15, 36, 67, .12));
  --roof-th: 3px; --roof-oh: 8px;
}
/* 見出し：500・字間 .06em。小見出しはグレーで字間を広く（ロゴの「相談会開催！」の声） */
#custom-lp-wrapper .h2 { font-weight: 500; letter-spacing: .06em; }
#custom-lp-wrapper .eyebrow { font-weight: 500; letter-spacing: .22em; }
#custom-lp-wrapper .gk-point, #custom-lp-wrapper .last-h, #custom-lp-wrapper .band-h { font-weight: 500; }
#custom-lp-wrapper .last-h { letter-spacing: .1em; }
#custom-lp-wrapper .fv-lead { font-weight: 400; }
#custom-lp-wrapper .fv-s--k { font-family: var(--f-maru); letter-spacing: .08em; }
/* 数字：Jost 500（大きい数字ほど軽く）。単位の和文は見出しの書体 */
#custom-lp-wrapper .fv-num-v, #custom-lp-wrapper .mx-n, #custom-lp-wrapper .stat-v, #custom-lp-wrapper .step-n-v { font-weight: 500; }
#custom-lp-wrapper .fv-num-u, #custom-lp-wrapper .stat-u { font-weight: 500; }
#custom-lp-wrapper .fq-q:before { font-weight: 500; }
/* 金は「線」にだけ。文字は紺（金の文字は白の上で 2.8:1 しかない） */
#custom-lp-wrapper .mx-m { color: var(--navy); }
#custom-lp-wrapper .step-n-v { color: var(--navy); }
#custom-lp-wrapper .gk-point-m { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
#custom-lp-wrapper .pen-line path { stroke: var(--orange); stroke-width: 3.2; }
#custom-lp-wrapper .pen-line--last path { stroke-width: 4; }
#custom-lp-wrapper .steps-path path { stroke: var(--navy); stroke-width: 1.4; }
/* 部品：枠は1pxの紺 */
#custom-lp-wrapper .fv-note { border: 1px solid rgba(15, 36, 67, .12); }