/* =========================================
   初期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; }
/* フルブリード（width:100vw）はスクロールバー幅ぶん横にはみ出すため、横スクロールを閉じる */
html, body { overflow-x: hidden; }
/* ---- [ここまで] --------------------------------------------------------- */


/* =========================================================
   1. トークン
   ========================================================= */
#custom-lp-wrapper {
  --shiro: #FFFFFF;          /* 図面用紙：FV・PRICE・ARCH・CONTACT の地、仕様書・図面シート */
  --kami: #F4F1E9;           /* 人の言葉の紙：WHY・VOICE の面（粒子はこの2面だけ）、PLANS の方眼の地 */
  --kaya: #DED9CA;           /* 台帳「変わらないもの」の凡例□の塗りのみ */
  --seiji: #457A83;          /* 構造の青磁：CTA塗り・白面の製図ラベル・キー・方眼 */
  --seiji-d: #386870;        /* hover／紙面（WHY・PLANS・VOICE）上のラベル・キー */
  --seiji-deep: #2E5C64;     /* 性能の面（唯一インクが紙全体を覆う） */
  --seiji-l: #A6C3C7;        /* 二次の線：引用符・動詞アウトライン */
  --seiji-line: rgba(69,122,131,.45);   /* 青磁のヘアライン：引用の左罫 */
  --sumi: #232220;           /* 文字と墨線 */
  --sumi-2: #5E5C55;         /* 鉛筆：単位・キャプション・二次テキスト */
  --note: #6F6D66;           /* 注記 */
  --rule: #D3CFC2;           /* 補助罫 */
  --rule-w: rgba(255,255,255,.28);      /* 青磁面の白罫 */
  --shu: #C0512F;            /* 朱肉＝検印のみ。他には一切使わない */
  --shu-line: rgba(192,81,47,.55);
  --wash: #EAF0F1;           /* 線ピルの hover 地 */
  --focus: #2F6F9F;
  --grid: rgba(69,122,131,.16);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .18 0 0 0 0 .17 0 0 0 0 .14 0 0 0 .045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");

  --f-display: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;   /* 見出し・人の言葉・検印 */
  --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;            /* 本文・事実 */
  --f-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;              /* ボタン・キー */
  --f-en: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;                            /* 数字・製図ラベル */
  --f-script: "Allison", "Brush Script MT", cursive;                                         /* FVの署名1箇所のみ */

  --gut: 22px;
  --maxw: 1120px;            /* 既定の舞台幅 */
  --maxw-n: 792px;           /* 読み幅：ARCH の見出し＋リード */
  --sh-sheet: 0 6px 18px rgba(35,34,32,.09);     /* 図面シートだけ（机の上の紙）。ページで唯一の影 */
  --sh-stick: 0 -10px 28px rgba(35,34,32,.07);   /* SP追従バーの上辺 */

  position: relative;
  overflow-x: clip;
  box-sizing: border-box;
  color: var(--sumi);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.95;
  letter-spacing: .03em;
  background: var(--shiro);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
  padding-bottom: 92px; /* 追従バー分 */
}
#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; line-height: inherit; }
/* テーマ（.lout-contents）は p の行間・h3 の文字サイズ・sup の位置を独自に指定している。LP 内では親の値を継承させる */
#custom-lp-wrapper h3, #custom-lp-wrapper h4 { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
#custom-lp-wrapper p:not([class]):not(:has(*)) { display: none !important; }
#custom-lp-wrapper .awrap { display: contents; }
#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 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; vertical-align: bottom; display: block; border: 0; }
#custom-lp-wrapper a { color: inherit; text-decoration: none; }
#custom-lp-wrapper dl, #custom-lp-wrapper dd, #custom-lp-wrapper blockquote, #custom-lp-wrapper figure { margin: 0; padding: 0; }
#custom-lp-wrapper small { font-size: inherit; }
#custom-lp-wrapper .sup { position: static; font-size: 10px; vertical-align: super; line-height: 0; margin-left: 2px; color: inherit; opacity: .8; }

/* =========================================================
   2. 共通部品
   ========================================================= */
#custom-lp-wrapper .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
#custom-lp-wrapper .sec, #custom-lp-wrapper .top { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
#custom-lp-wrapper .sec .wrap { position: relative; }

/* 製図ラベル（Jost・大文字・トラッキング）＋短い罫。中央は結び（CONTACT）だけ、他は左揃え */
#custom-lp-wrapper .lab {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-en); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--seiji); line-height: 1; margin-bottom: 16px; text-align: center;
}
#custom-lp-wrapper .lab:after { content: ""; width: 24px; height: 1px; background: var(--seiji); }
#custom-lp-wrapper .lab--l { flex-direction: row; align-items: center; text-align: left; }
#custom-lp-wrapper .lab--l:after { order: -1; width: 14px; }
#custom-lp-wrapper .lab--w { color: rgba(255,255,255,.85); }
#custom-lp-wrapper .lab--w:after { background: rgba(255,255,255,.6); }
#custom-lp-wrapper .why .lab, #custom-lp-wrapper .plans .lab, #custom-lp-wrapper .vo .lab { color: var(--seiji-d); }
#custom-lp-wrapper .why .lab:after, #custom-lp-wrapper .plans .lab:after, #custom-lp-wrapper .vo .lab:after { background: var(--seiji-d); }

/* 見出し4段：h1 34/clamp(30..52)／h2 28/32/40／h3 20/22/24／本文 15.5 */
#custom-lp-wrapper .h2 {
  font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1.5;
  letter-spacing: .06em; font-feature-settings: "palt" 1; color: var(--sumi);
}
#custom-lp-wrapper .h2--c { text-align: center; text-wrap: balance; }
#custom-lp-wrapper .h2--w { color: #fff; }
#custom-lp-wrapper .perf-txt .h2, #custom-lp-wrapper .plans-txt .h2 { margin-bottom: 24px; }
#custom-lp-wrapper .h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt" 1; }
#custom-lp-wrapper .p { font-size: 15.5px; line-height: 1.95; margin-bottom: 1em; text-wrap: pretty; }
#custom-lp-wrapper .p:last-child { margin-bottom: 0; }
#custom-lp-wrapper .p--w { color: rgba(255,255,255,.92); }
#custom-lp-wrapper .lead-p { margin-top: 24px; max-width: 40em; }
#custom-lp-wrapper .note { font-size: 12px; line-height: 1.75; color: var(--note); letter-spacing: .02em; margin-top: 16px; text-wrap: pretty; }
#custom-lp-wrapper .note--c { max-width: 40em; }
#custom-lp-wrapper .br-sp { display: inline; }
#custom-lp-wrapper .nb { white-space: nowrap; }

/* 写真：紙に刷った写真＝角丸0・枠なし・影なし・フィルタなし */
#custom-lp-wrapper .fr { position: relative; overflow: hidden; background: #E9E5DA; }
#custom-lp-wrapper .fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#custom-lp-wrapper .fr-32 { aspect-ratio: 3 / 2; }
#custom-lp-wrapper .fr-43 { aspect-ratio: 4 / 3; }
#custom-lp-wrapper .fr-45 { aspect-ratio: 4 / 5; }
#custom-lp-wrapper .fr-54 { aspect-ratio: 5 / 4; }
#custom-lp-wrapper .fr-plan { aspect-ratio: 4 / 5; background: var(--shiro); }
#custom-lp-wrapper .fr-plan-w { aspect-ratio: 10 / 9; }
#custom-lp-wrapper .fr-plan img { object-fit: contain; padding: 3%; }

/* 検印（朱・線描）：押すものだけが丸い。ヘッダー／仕様書の表題欄／結びの落款 */
#custom-lp-wrapper .stamp {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 96px; height: 96px; border-radius: 50%; border: 1.25px solid var(--shu); color: var(--shu);
  transform: rotate(-6deg); text-align: center; flex: 0 0 auto; padding: 0 10px;
}
#custom-lp-wrapper .stamp:before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--shu-line); }
#custom-lp-wrapper .stamp-a { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; line-height: 1.15; white-space: nowrap; font-feature-settings: "palt" 1; }
#custom-lp-wrapper .stamp-b { font-family: var(--f-display); font-weight: 700; font-size: 8.5px; letter-spacing: .04em; line-height: 1.15; white-space: nowrap; font-feature-settings: "palt" 1; }
/* 文字を入れない小さい検印（ヘッダー64・SPの表題欄64）は、文字の代わりに弦2本 */
#custom-lp-wrapper .stamp--line,#custom-lp-wrapper .stamp--line .stamp-a, #custom-lp-wrapper .stamp--line .stamp-b { display: none; }
#custom-lp-wrapper .stamp--line:after { content: ""; position: absolute; left: 16%; right: 16%; top: 35%; bottom: 35%; border-top: 1px solid var(--shu); border-bottom: 1px solid var(--shu); }

/* CTA（ピル）：塗り＝資料請求（第一CV）／線＝来場予約（第二CV）。hover は色だけで応える */
#custom-lp-wrapper .cta-set { display: grid; gap: 10px; margin-top: 48px; }
#custom-lp-wrapper .cta-set--c { max-width: 640px; margin-left: auto; margin-right: auto; }
#custom-lp-wrapper .cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; padding: 11px 20px; border-radius: 999px; text-align: center; line-height: 1.4;
  transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
#custom-lp-wrapper .cta--p { background: var(--seiji); color: #fff; }
#custom-lp-wrapper .cta--p:hover { background: var(--seiji-d); }
#custom-lp-wrapper .cta--s { background: var(--shiro); color: var(--seiji); box-shadow: inset 0 0 0 1.5px var(--seiji); }
#custom-lp-wrapper .cta--s:hover { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--seiji-d); }
#custom-lp-wrapper .cta-t { font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 10px; }
#custom-lp-wrapper .cta-t:after { content: "→"; font-family: var(--f-en); font-weight: 300; font-size: 16px; transition: transform .2s ease-out; }
#custom-lp-wrapper .cta:hover .cta-t:after { transform: translateX(3px); }
#custom-lp-wrapper .cta-s { font-size: 12px; letter-spacing: .04em; margin-top: 4px; white-space: nowrap; }
#custom-lp-wrapper .cta--p .cta-s { color: rgba(255,255,255,.92); }
#custom-lp-wrapper .cta--s .cta-s { color: var(--seiji-d); }

/* フォーカス */
#custom-lp-wrapper a:focus-visible, #custom-lp-wrapper label:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 施主の声（共通・カードにしない）：青磁のヘアライン1本 */
#custom-lp-wrapper .voice { border-left: 1px solid var(--seiji-line); padding: 4px 0 4px 18px; margin-top: 16px; }
#custom-lp-wrapper .voice-t { font-family: var(--f-display); font-weight: 500; font-size: 15.5px; line-height: 2; letter-spacing: .05em; font-feature-settings: "palt" 1; text-wrap: pretty; }
#custom-lp-wrapper .voice-n { font-size: 13px; color: var(--sumi-2); margin-top: 8px; letter-spacing: .04em; line-height: 1.6; }
#custom-lp-wrapper .voice--w { border-left-color: rgba(255,255,255,.4); }
#custom-lp-wrapper .voice--w .voice-t { color: #fff; }
#custom-lp-wrapper .voice--w .voice-n { color: rgba(255,255,255,.72); }

/* 製図ラベル列（延床・階数・玄関）：枠なし。区切りは補助罫 */
#custom-lp-wrapper .tags { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 16px; }
#custom-lp-wrapper .tag { display: inline-flex; align-items: baseline; gap: 8px; padding: 2px 12px 2px 0; font-size: 13px; line-height: 1.4; }
#custom-lp-wrapper .tag:not(:first-child) { border-left: 1px solid var(--rule); padding-left: 12px; }
#custom-lp-wrapper .tag-k { font-family: var(--f-en); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--seiji-d); }
#custom-lp-wrapper .tag-v { color: var(--sumi); }


/* =========================================================
   3. SEC-00 ヘッダー行 — SPは「小さい家／YAMATO JUKEN」の2段、PCは朱の検印が罫線を跨ぐ
   ========================================================= */
#custom-lp-wrapper .top { border-bottom: 1px solid var(--rule); background: var(--shiro); z-index: 5; }
#custom-lp-wrapper .top-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 60px; overflow: visible; }
#custom-lp-wrapper .top-brand { display: grid; gap: 4px; white-space: nowrap; min-width: 0; }
#custom-lp-wrapper .stamp--top { display: none; }
#custom-lp-wrapper .top-jp { order: 1; font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--sumi); line-height: 1; }
#custom-lp-wrapper .top-en { order: 2; font-family: var(--f-en); font-weight: 500; font-size: 10px; letter-spacing: .24em; color: var(--sumi-2); line-height: 1; }
#custom-lp-wrapper .top-nav { display: none; gap: 26px; }
#custom-lp-wrapper .top-a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; letter-spacing: .1em; color: var(--sumi-2); transition: color .2s ease-out; }
#custom-lp-wrapper .top-a:hover { color: var(--seiji); }
#custom-lp-wrapper .top-cta { display: inline-flex; align-items: center; white-space: nowrap; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--shiro); color: var(--seiji); box-shadow: inset 0 0 0 1.5px var(--seiji); font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em; transition: background-color .2s ease-out, box-shadow .2s ease-out; }
#custom-lp-wrapper .top-cta:hover { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--seiji-d); }

/* =========================================================
   4. SEC-01 FV — 白パネル×夕景。3枚をラジオ＋:has()で切替（transitionは付けない）
   SP: 写真先行（110vw・左下に白の楔）→空に引用→白面にH1。ページャは写真右下の白い切り欠き
   ========================================================= */
#custom-lp-wrapper .fv { background: var(--shiro); overflow: hidden; padding: 0; }
#custom-lp-wrapper .fv-in { position: relative; display: grid; grid-template-columns: 100%; padding: 0 var(--gut) 36px; background: var(--shiro); }
#custom-lp-wrapper .fv-in:before { content: ""; display: block; height: 110vw; width: 100%; order: 0; }
#custom-lp-wrapper .fv-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#custom-lp-wrapper .fv-ph { position: absolute; left: 0; right: 0; top: 0; height: 110vw; display: none; background: #E9E5DA; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 14vw)); }
#custom-lp-wrapper .fv-ph img { width: 100%; height: 100%; object-fit: cover; }
#custom-lp-wrapper .fv-in:has(#fvr1:checked) .fv-ph--1, #custom-lp-wrapper .fv-in:has(#fvr2:checked) .fv-ph--2, #custom-lp-wrapper .fv-in:has(#fvr3:checked) .fv-ph--3 { display: block; }
#custom-lp-wrapper .fv-arc, #custom-lp-wrapper .fv-vl--r { display: none; }
#custom-lp-wrapper .fv-vl { position: absolute; z-index: 3; right: 14px; top: 20px; writing-mode: vertical-rl; font-family: var(--f-en); font-weight: 500; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
#custom-lp-wrapper .fv-quote { position: absolute; z-index: 3; left: 22px; top: 28px; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: .22em; line-height: 1.7; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.4); }
#custom-lp-wrapper .fv-quote-l { display: block; }
#custom-lp-wrapper .fv-left, #custom-lp-wrapper .fv-right { display: contents; }
#custom-lp-wrapper .fv-h1 { order: 1; position: relative; z-index: 2; margin-top: -2px; font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1.4; letter-spacing: .06em; font-feature-settings: "palt" 1; color: var(--sumi); }
#custom-lp-wrapper .fv-script { order: 2; font-family: var(--f-script); font-weight: 400; font-size: 38px; line-height: .9; color: var(--sumi-2); margin-top: 8px; }
#custom-lp-wrapper .fv-tag { order: 5; font-family: var(--f-display); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--sumi); margin-top: 24px; }
#custom-lp-wrapper .fv-pg { position: absolute; z-index: 3; right: 0; top: calc(110vw - 52px); height: 52px; margin: 0; display: flex; align-items: center; gap: 12px; padding: 4px 22px 4px 30px; background: var(--shiro); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); font-family: var(--f-en); font-weight: 300; font-size: 12px; letter-spacing: .16em; color: var(--note); }
#custom-lp-wrapper .fv-pg-l { cursor: pointer; padding: 0 2px; min-height: 44px; display: inline-flex; align-items: center; }
/* ページャの線＝寸法線の初出（両端に5pxのタブ） */
#custom-lp-wrapper .fv-pg-line { display: block; width: 28px; height: 5px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat; }
#custom-lp-wrapper .fv-in:has(#fvr1:checked) .fv-pg-l--1, #custom-lp-wrapper .fv-in:has(#fvr2:checked) .fv-pg-l--2, #custom-lp-wrapper .fv-in:has(#fvr3:checked) .fv-pg-l--3 { color: var(--sumi); font-weight: 500; }
#custom-lp-wrapper .fv-in:has(#fvr1:focus-visible) .fv-pg-l--1, #custom-lp-wrapper .fv-in:has(#fvr2:focus-visible) .fv-pg-l--2, #custom-lp-wrapper .fv-in:has(#fvr3:focus-visible) .fv-pg-l--3 { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- 768px〜：白パネルは本文の左端から、写真は紙の右端まで。斜辺は8°固定 ---- */
@media (min-width: 768px) {
  #custom-lp-wrapper .top-in { height: 72px; }
  #custom-lp-wrapper .top-brand { display: flex; align-items: center; gap: 10px; }
  #custom-lp-wrapper .stamp--top { display: flex; width: 64px; height: 64px; padding: 0; top: 12px; }
  #custom-lp-wrapper .top-en { order: 0; font-size: 11px; letter-spacing: .22em; color: var(--sumi); }
  #custom-lp-wrapper .top-jp { order: 0; font-size: 12px; letter-spacing: .16em; color: var(--sumi-2); padding-left: 10px; border-left: 1px solid var(--rule); line-height: 1.2; }
  #custom-lp-wrapper .top-nav { display: flex; }

  #custom-lp-wrapper .fv { padding: 24px var(--gut) 0; }
  #custom-lp-wrapper .fv-in { --fv-h: clamp(520px, 54vw, 700px); display: block; padding: 0; max-width: var(--maxw); margin: 0 auto; height: var(--fv-h); overflow: hidden; }
  #custom-lp-wrapper .fv-in:before { display: none; }
  #custom-lp-wrapper .fv-ph { inset: 0; left: 26%; height: auto; clip-path: none; }
  #custom-lp-wrapper .fv-ph img { object-position: 38% 50%; }
  #custom-lp-wrapper .fv-vl { right: auto; left: 0; top: 8px; color: var(--sumi); text-shadow: none; }
  #custom-lp-wrapper .fv-quote { left: calc(42% + 36px); top: 34px; font-size: 18px; }
  #custom-lp-wrapper .fv-left { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 42%; padding: 0 0 clamp(96px, 19%, 140px) 0; background: var(--shiro); clip-path: polygon(0 0, 100% 0, calc(100% - var(--fv-h) * .1405) 100%, 0 100%); }
  #custom-lp-wrapper .fv-h1 { margin-top: 0; font-size: clamp(30px, 3.9vw, 52px); }
  #custom-lp-wrapper .fv-script { font-size: clamp(36px, 4.2vw, 52px); margin-top: 8px; }
  #custom-lp-wrapper .fv-tag { position: absolute; left: 0; bottom: 26px; margin: 0; z-index: 2; font-size: 15px; line-height: 1.9; max-width: 11em; }
  #custom-lp-wrapper .fv-right { display: block; position: absolute; right: 0; bottom: 0; z-index: 2; background: var(--shiro); padding: 4px 28px 4px 56px; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); }
  #custom-lp-wrapper .fv-pg { position: static; height: auto; padding: 0; background: none; clip-path: none; justify-content: flex-end; }
}
@media (min-width: 1024px) {
  #custom-lp-wrapper .fv-ph { left: 28%; }
  #custom-lp-wrapper .fv-ph img { object-position: 50% 50%; }
  #custom-lp-wrapper .fv-left { width: 38%; }
  #custom-lp-wrapper .fv-quote { left: calc(38% + 48px); top: 40px; font-size: 20px; }
}
@media (min-width: 1320px) {
  #custom-lp-wrapper .fv-tag { max-width: none; }
}
/* ビューポートが低いノートPCでも足元（タグライン・ページャ）がフォールド内に入る */
@supports (height: 1svh) {
  @media (min-width: 768px) {
    #custom-lp-wrapper .fv-in { --fv-h: clamp(520px, min(54vw, 100svh - 136px), 700px); }
  }
}


/* =========================================================
   5. SEC-02 WHY SMALL（紙・人の言葉）— SPは 見出し→独白→写真→本文。写真は左の紙端まで、スケッチは紙に描く
   ========================================================= */
#custom-lp-wrapper .why { padding: 64px 0 32px; background-color: var(--kami); background-image: var(--grain); overflow: hidden; }
#custom-lp-wrapper .why-grid { display: grid; gap: 0; }
#custom-lp-wrapper .why-txt { display: contents; }
#custom-lp-wrapper .why-txt .lab { order: 0; }
#custom-lp-wrapper .why-txt .h2 { order: 1; }
#custom-lp-wrapper .mono { order: 2; margin: 24px 0 0; }
#custom-lp-wrapper .why-vis { order: 3; position: relative; margin: 32px 0 0; padding: 0 0 40px 0; }
#custom-lp-wrapper .why-txt .p { order: 4; max-width: 38em; }
#custom-lp-wrapper .why-ph { width: 100%; }
#custom-lp-wrapper .why-ph2 { position: absolute; right: 0; bottom: 0; width: 46%; transform: rotate(-3deg); background: var(--shiro); border: 1px solid var(--rule); padding: 6px; }
#custom-lp-wrapper .why-ph2 .fr { background: var(--shiro); }
#custom-lp-wrapper .mono-l { font-family: var(--f-display); font-weight: 500; font-size: 17px; line-height: 1.8; letter-spacing: .08em; color: var(--sumi); font-feature-settings: "palt" 1; }
#custom-lp-wrapper .mono-2 { padding-left: .9em; }
#custom-lp-wrapper .mono-3 { padding-left: 1.8em; }

/* =========================================================
   6. SEC-03 PRICE（白・事実）— 台帳／墨で大きく書く価格／図面の表題欄つき仕様書（検印は表題欄に押す）
   ========================================================= */
#custom-lp-wrapper .price { padding: 96px 0 48px; background: var(--shiro); overflow: hidden; }
#custom-lp-wrapper .price-grid { display: grid; gap: 32px; margin-top: 24px; }
#custom-lp-wrapper .price-txt .p { max-width: 38em; }

/* 安くなるもの／変わらないもの（台帳）：上罫は墨、凡例は四角 */
#custom-lp-wrapper .cost { display: grid; gap: 0; border-top: 1px solid var(--sumi); }
#custom-lp-wrapper .cost-col { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
#custom-lp-wrapper .cost-k { display: flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--seiji); }
#custom-lp-wrapper .cost-k:before { content: ""; width: 8px; height: 8px; background: var(--seiji); flex: 0 0 auto; }
#custom-lp-wrapper .cost-col--eq .cost-k:before { background: var(--kaya); }
#custom-lp-wrapper .cost-col--eq .cost-k { color: var(--sumi-2); }
#custom-lp-wrapper .cost-i { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; color: var(--sumi); margin-top: 8px; }
#custom-lp-wrapper .cost-s { font-size: 13px; line-height: 1.8; color: var(--sumi-2); margin-top: 4px; }

/* 本体価格：額縁で飾らず、墨線の下に大きく書く。数字の直下に寸法線 */
#custom-lp-wrapper .card-d { border-top: 1px solid var(--sumi); padding: 28px 0 0; margin-top: 48px; }
#custom-lp-wrapper .pr-grid { display: grid; gap: 0; }
#custom-lp-wrapper .pr-box { display: grid; gap: 0; }
#custom-lp-wrapper .pr { display: flex; flex-direction: column; align-items: flex-start; }
#custom-lp-wrapper .pr-k { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--seiji); }
#custom-lp-wrapper .pr-v { display: flex; align-items: baseline; gap: 0 .15em; margin-top: 4px; position: relative; padding-bottom: 19px; }
#custom-lp-wrapper .pr-v:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 9px; border-left: 1px solid var(--sumi); border-right: 1px solid var(--sumi); background: linear-gradient(var(--sumi), var(--sumi)) center / 100% 1px no-repeat; }
#custom-lp-wrapper .pr-n { font-family: var(--f-en); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: proportional-nums lining-nums; color: var(--sumi); }
#custom-lp-wrapper .pr-u { font-family: var(--f-ui); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--sumi-2); white-space: nowrap; }
#custom-lp-wrapper .pr-meta { display: grid; grid-template-columns: 4em 1fr; gap: 6px 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.8; }
#custom-lp-wrapper .pr-mk { color: var(--sumi-2); letter-spacing: .1em; }
#custom-lp-wrapper .pr-mv { color: var(--sumi); }
#custom-lp-wrapper .pr-mv--tax { font-weight: 700; }
#custom-lp-wrapper .pr-note { margin-top: 14px; max-width: 44em; }
#custom-lp-wrapper .pr-side { margin: 32px 0 0; }
#custom-lp-wrapper .pr-ph { width: 100%; }
#custom-lp-wrapper .pr-ph .fr { aspect-ratio: 16 / 9; }

/* 仕様書（図面の表題欄の型）：墨の外枠、表題欄の下だけ墨、内側は補助罫。検印は表題欄の右に押す */
#custom-lp-wrapper .spec { margin-top: 40px; border: 1px solid var(--sumi); overflow: visible; }
#custom-lp-wrapper .spec-tb { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--sumi); }
#custom-lp-wrapper .spec-tb-c { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
#custom-lp-wrapper .spec-tb-c--1 { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); padding-right: 96px; }
#custom-lp-wrapper .spec-tb-c--2 { border-right: 1px solid var(--rule); }
#custom-lp-wrapper .spec-tb-k { font-family: var(--f-en); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--seiji); line-height: 1; }
#custom-lp-wrapper .spec-tb-v { font-size: 13px; line-height: 1.5; color: var(--sumi); }
#custom-lp-wrapper .spec-tb-c--1 .spec-tb-v { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .06em; font-feature-settings: "palt" 1; }
#custom-lp-wrapper .stamp--pr { position: absolute; right: 12px; top: 10px; width: 64px; height: 64px; padding: 0; margin: 0; z-index: 2; }
#custom-lp-wrapper .spec-l { display: grid; grid-template-columns: 1fr; }
#custom-lp-wrapper .spec-k { font-family: var(--f-ui); font-weight: 700; font-size: 15.5px; letter-spacing: .05em; line-height: 1.6; padding: 12px 14px 0; color: var(--sumi); }
#custom-lp-wrapper .spec-v { font-size: 13px; line-height: 1.8; color: var(--sumi-2); padding: 2px 14px 12px; border-bottom: 1px solid var(--rule); max-width: 46em; text-wrap: pretty; }
#custom-lp-wrapper .spec-k:last-of-type, #custom-lp-wrapper .spec-v:last-of-type { border-bottom: none; }
#custom-lp-wrapper .spec .note { margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--rule); background: var(--kami); }

/* ---- 768px〜（WHY・PRICE）---- */
@media (min-width: 768px) {
  #custom-lp-wrapper .why { padding: 80px 0 40px; }
  #custom-lp-wrapper .why-vis { width: 78%; margin-left: 0; padding: 0 0 40px 0; }
  #custom-lp-wrapper .why-ph2 { right: -10%; width: 44%; }
  #custom-lp-wrapper .mono-l { font-size: 18px; letter-spacing: .1em; }
  #custom-lp-wrapper .mono-2 { padding-left: 1.2em; }
  #custom-lp-wrapper .mono-3 { padding-left: 2.4em; }

  #custom-lp-wrapper .price { padding: 120px 0 56px; }
  #custom-lp-wrapper .price-grid { gap: 40px; }
  #custom-lp-wrapper .cost-col { padding: 22px 0 24px; }
  #custom-lp-wrapper .cost-i { font-size: 22px; }
  #custom-lp-wrapper .card-d { margin-top: 64px; padding-top: 32px; }
  #custom-lp-wrapper .pr-n { font-size: 96px; }
  #custom-lp-wrapper .pr-u { font-size: 20px; }
  #custom-lp-wrapper .pr-side { margin: 24px 0 0 auto; width: 60%; }
  #custom-lp-wrapper .pr-ph .fr { aspect-ratio: 3 / 2; }
  #custom-lp-wrapper .spec { margin-top: 48px; }
  #custom-lp-wrapper .spec-tb-c { padding: 12px 16px; }
  #custom-lp-wrapper .stamp--pr { width: 72px; height: 72px; right: 16px; top: 8px; }
  #custom-lp-wrapper .spec-l { grid-template-columns: 14em 1fr; }
  #custom-lp-wrapper .spec-k { padding: 14px 16px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  #custom-lp-wrapper .spec-v { padding: 14px 18px; }
  #custom-lp-wrapper .price .cta-set--c { margin-left: 0; max-width: 640px; }
}
/* ---- 1024px〜：2カラム ---- */
@media (min-width: 1024px) {
  #custom-lp-wrapper .why { padding: 96px 0 48px; }
  #custom-lp-wrapper .why-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
  #custom-lp-wrapper .why-txt { display: block; }
  #custom-lp-wrapper .why-vis { order: 0; width: auto; margin: 8px 0 0 0; padding: 0; }
  #custom-lp-wrapper .why-ph2 { right: -40px; bottom: -16px; width: 42%; }
  #custom-lp-wrapper .mono { margin: 24px 0 24px; }
  #custom-lp-wrapper .mono-l { font-size: 18px; }
  #custom-lp-wrapper .mono-3 { padding-left: 2em; }

  #custom-lp-wrapper .price { padding: 144px 0 72px; }
  #custom-lp-wrapper .price-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  #custom-lp-wrapper .cost-i { font-size: 24px; white-space: nowrap; }
  #custom-lp-wrapper .card-d { margin-top: 72px; padding-top: 36px; }
  #custom-lp-wrapper .pr-grid { grid-template-columns: minmax(0, 1fr) min(24vw, 340px); gap: 56px; align-items: start; }
  #custom-lp-wrapper .pr-box { grid-template-columns: auto 1fr; gap: 0 56px; align-items: center; }
  #custom-lp-wrapper .pr-n { font-size: clamp(96px, 11vw, 120px); }
  #custom-lp-wrapper .pr-u { font-size: 22px; }
  #custom-lp-wrapper .pr-meta { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px solid var(--sumi); padding-left: 32px; min-width: 16em; max-width: 22em; }
  #custom-lp-wrapper .pr-note { grid-column: 1 / -1; margin-top: 16px; }
  #custom-lp-wrapper .pr-side { margin: -36px 0 0 0; width: auto; }
  #custom-lp-wrapper .pr-ph img { object-position: 60% 50%; }
  #custom-lp-wrapper .spec { margin-top: 56px; }
  #custom-lp-wrapper .spec-tb { grid-template-columns: 1.4fr 1fr .6fr; }
  #custom-lp-wrapper .spec-tb-c--1 { grid-column: auto; border-bottom: none; border-right: 1px solid var(--rule); padding-right: 16px; }
  #custom-lp-wrapper .stamp--pr { width: 96px; height: 96px; right: 16px; top: auto; bottom: -16px; padding: 0 10px; }
  #custom-lp-wrapper .stamp--pr .stamp-a, #custom-lp-wrapper .stamp--pr .stamp-b { display: block; }
  #custom-lp-wrapper .stamp--pr:after { content: none; }
  #custom-lp-wrapper .spec-l { grid-template-columns: 17.5em 1fr; }
}
@media (min-width: 1320px) {
  #custom-lp-wrapper .mono-l { font-size: 20px; }
  #custom-lp-wrapper .mono-3 { padding-left: 2.4em; }
}


/* =========================================================
   7. SEC-04 PLANS（方眼紙）— 図面を紙として机に置く。SPは図面が方眼の上を横に滑る帯
   ========================================================= */
#custom-lp-wrapper .plans {
  padding: 48px 0 80px; overflow: hidden;
  background-color: var(--kami);
  background-image: repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px);
}
#custom-lp-wrapper .plans-intro { display: grid; gap: 0; margin-bottom: 48px; }
#custom-lp-wrapper .plans-txt { display: contents; }
#custom-lp-wrapper .plans-txt .lab { order: 0; }
#custom-lp-wrapper .plans-txt .h2 { order: 1; margin-bottom: 0; }
#custom-lp-wrapper .plans-ph { order: 2; width: 100%; margin: 24px 0; }
#custom-lp-wrapper .plans-txt .p { order: 3; max-width: 36em; }

#custom-lp-wrapper .pl { display: grid; grid-template-columns: 100%; gap: 0; margin-top: 48px; }
#custom-lp-wrapper .pl-txt { display: contents; }
#custom-lp-wrapper .pl-no { order: 1; font-family: var(--f-en); font-weight: 300; font-size: 28px; line-height: 1; color: var(--seiji-d); letter-spacing: .04em; }
/* 坪数の見出し＋坪数に比例する寸法線（24坪=77%／27坪=87%／31坪=100%） */
#custom-lp-wrapper .pl-h { order: 2; display: flex; align-items: baseline; gap: 0 .15em; width: fit-content; max-width: 100%; justify-self: start; margin-top: 6px; position: relative; padding-bottom: 19px; }
#custom-lp-wrapper .pl-h:after { content: ""; position: absolute; left: 0; bottom: 0; width: 77%; height: 9px; border-left: 1px solid var(--sumi); border-right: 1px solid var(--sumi); background: linear-gradient(var(--sumi), var(--sumi)) center / 100% 1px no-repeat; }
#custom-lp-wrapper .pl--27 .pl-h:after { width: 87%; }
#custom-lp-wrapper .pl--31 .pl-h:after { width: 100%; }
#custom-lp-wrapper .pl-n { font-family: var(--f-en); font-weight: 300; font-size: 52px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: proportional-nums lining-nums; color: var(--sumi); }
#custom-lp-wrapper .pl-u { font-family: var(--f-ui); font-weight: 400; font-size: 14px; letter-spacing: .06em; color: var(--sumi-2); }
#custom-lp-wrapper .pl-ldk { font-family: var(--f-en); font-weight: 300; font-size: 18px; letter-spacing: .1em; color: var(--sumi); margin-left: 10px; }
#custom-lp-wrapper .pl-fig { order: 3; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px var(--gut) 20px; margin: 16px calc(-1 * var(--gut)) 0; scroll-padding: 0 var(--gut); scrollbar-width: none; }
#custom-lp-wrapper .pl-fig::-webkit-scrollbar { display: none; }
#custom-lp-wrapper .sheet { flex: 0 0 78%; background: var(--shiro); border-radius: 1px; padding: 10px 10px 12px; box-shadow: var(--sh-sheet); scroll-snap-align: start; backface-visibility: hidden; transition: transform .3s ease-out; }
#custom-lp-wrapper .sheet-fl { font-family: var(--f-en); font-weight: 500; font-size: 11px; letter-spacing: .26em; color: var(--seiji-d); margin-bottom: 4px; }
#custom-lp-wrapper .pl-p { order: 4; margin-top: 8px; max-width: 30em; }
#custom-lp-wrapper .tags { order: 5; }
#custom-lp-wrapper .plans .note--c { margin-top: 40px; }

/* =========================================================
   8. SEC-05 ARCHITECT（白）— 左右交互＋動詞のアウトライン。実話は紙1枚と罫の対
   SP: 写真→動詞（写真の下端に噛ませる）→見出し。PCは動詞をテキスト列の内側に固定
   ========================================================= */
#custom-lp-wrapper .arch { padding: 80px 0 64px; background: var(--shiro); overflow: hidden; }
#custom-lp-wrapper .arch-head { max-width: var(--maxw-n); }
#custom-lp-wrapper .arch-lead { margin-top: 24px; }
#custom-lp-wrapper .way { position: relative; display: grid; grid-template-columns: 100%; gap: 0; margin-top: 48px; }
#custom-lp-wrapper .way-ph { grid-row: 1; position: relative; z-index: 1; }
#custom-lp-wrapper .way:before {
  grid-row: 2; position: relative; z-index: 2; justify-self: end; white-space: nowrap; pointer-events: none;
  font-family: var(--f-display); font-weight: 700; font-size: 84px; line-height: 1; letter-spacing: .08em;
  color: transparent; -webkit-text-stroke: 1px var(--seiji-l); margin: -.46em -.04em -.3em 0;
}
#custom-lp-wrapper .way--a:before { content: "なくす"; }
#custom-lp-wrapper .way--b:before { content: "まとめる"; justify-self: start; margin-right: 0; margin-left: -.04em; }
#custom-lp-wrapper .way--c:before { content: "寄せる"; }
#custom-lp-wrapper .way-txt { grid-row: 3; position: relative; z-index: 1; }
#custom-lp-wrapper .way-txt:before { content: none; }
#custom-lp-wrapper .way-p { margin-top: 8px; max-width: 34em; }
#custom-lp-wrapper .way .voice { margin-top: 16px; }

#custom-lp-wrapper .tales { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
#custom-lp-wrapper .tales-k { display: block; font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.6; letter-spacing: .08em; color: var(--sumi); font-feature-settings: "palt" 1; }
#custom-lp-wrapper .tales-k:before { content: ""; display: block; width: 24px; height: 1px; background: var(--seiji); flex: 0 0 auto; margin-bottom: 12px; }
#custom-lp-wrapper .tales-grid { display: grid; gap: 0; margin-top: 8px; }
#custom-lp-wrapper .tale { border-left: 1px solid var(--seiji-line); padding: 4px 0 4px 18px; margin-top: 24px; }
#custom-lp-wrapper .tale-t { font-family: var(--f-display); font-weight: 500; font-size: 15.5px; line-height: 2; letter-spacing: .05em; font-feature-settings: "palt" 1; text-wrap: pretty; }
#custom-lp-wrapper .tale-n { font-size: 13px; color: var(--sumi-2); margin-top: 8px; line-height: 1.6; }
#custom-lp-wrapper .tales .note { max-width: 62em; margin-top: 24px; }

/* ---- 768px〜（PLANS・ARCH）---- */
@media (min-width: 768px) {
  #custom-lp-wrapper .plans { padding: 56px 0 96px; }
  #custom-lp-wrapper .plans-intro { margin-bottom: 72px; }
  #custom-lp-wrapper .plans-ph { width: 78%; margin: 24px 0 32px; }
  #custom-lp-wrapper .pl { grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 72px; align-items: center; }
  #custom-lp-wrapper .pl-txt { display: block; }
  #custom-lp-wrapper .pl-fig { order: 0; }
  #custom-lp-wrapper .pl--b .pl-fig { order: 2; }
  #custom-lp-wrapper .pl--b .pl-txt { order: 1; }
  #custom-lp-wrapper .pl-fig { display: block; overflow: visible; position: relative; padding: 0 18% 34px 0; margin: 0; }
  #custom-lp-wrapper .sheet { flex: none; }
  #custom-lp-wrapper .sheet--1 { width: 82%; transform: rotate(1.5deg); position: relative; z-index: 1; }
  #custom-lp-wrapper .sheet--2 { width: 46%; position: absolute; right: 0; bottom: 0; transform: rotate(-2deg); z-index: 2; }
  #custom-lp-wrapper .pl--b .sheet--1 { transform: rotate(-1.5deg); }
  #custom-lp-wrapper .pl--b .sheet--2 { transform: rotate(2deg); }
  #custom-lp-wrapper .sheet:hover { transform: translateY(-2px) rotate(0deg); }
  #custom-lp-wrapper .fr-plan img { padding: 5%; }
  #custom-lp-wrapper .pl-no { font-size: 30px; }
  #custom-lp-wrapper .pl-h { margin-top: 4px; }
  #custom-lp-wrapper .pl-n { font-size: 56px; }
  #custom-lp-wrapper .pl-u { font-size: 15px; }
  #custom-lp-wrapper .pl-ldk { font-size: 20px; }
  #custom-lp-wrapper .plans .note--c { margin: 48px 0 0 auto; max-width: 420px; }
  #custom-lp-wrapper .plans .cta-set--c { margin-left: auto; margin-right: 0; max-width: 420px; grid-template-columns: 1fr; }

  #custom-lp-wrapper .arch { padding: 96px 0 56px; }
  #custom-lp-wrapper .way { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; align-items: start; }
  #custom-lp-wrapper .way:before { content: none; }
  #custom-lp-wrapper .way-ph, #custom-lp-wrapper .way-txt { grid-row: auto; }
  #custom-lp-wrapper .way--a .way-ph, #custom-lp-wrapper .way--b .way-ph { margin: 0; width: 100%; }
  #custom-lp-wrapper .way--b .way-ph { order: 2; }
  #custom-lp-wrapper .way--b .way-txt { order: 1; }
  #custom-lp-wrapper .way--c .way-ph { width: 88%; }
  #custom-lp-wrapper .way-txt { padding-top: 12px; }
  #custom-lp-wrapper .way-txt:before {
    content: ""; position: absolute; left: -.04em; top: 100%; margin-top: -.1em; z-index: 0; white-space: nowrap; pointer-events: none;
    font-family: var(--f-display); font-weight: 700; font-size: clamp(96px, 10.5vw, 150px); line-height: 1; letter-spacing: .08em;
    color: transparent; -webkit-text-stroke: 1px var(--seiji-l);
  }
  #custom-lp-wrapper .way--a .way-txt:before { content: "なくす"; }
  #custom-lp-wrapper .way--b .way-txt:before { content: "まとめる"; }
  #custom-lp-wrapper .way--c .way-txt:before { content: "寄せる"; }
  #custom-lp-wrapper .way-h, #custom-lp-wrapper .way-p, #custom-lp-wrapper .way .voice { position: relative; z-index: 1; }

  #custom-lp-wrapper .tales { margin-top: 96px; padding-top: 48px; }
  #custom-lp-wrapper .tales-k { font-size: 24px; display: flex; align-items: center; gap: 12px; }
  #custom-lp-wrapper .tales-k:before { margin-bottom: 0; }
  #custom-lp-wrapper .tales-grid { grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 24px; align-items: start; }
  #custom-lp-wrapper .tale { border-left: 0; padding: 0; margin-top: 0; }
  #custom-lp-wrapper .tale--1 { background: var(--kami); padding: 32px; }
  #custom-lp-wrapper .tale--2, #custom-lp-wrapper .tale--3 { border-top: 1px solid var(--rule); padding-top: 24px; }
  #custom-lp-wrapper .tale--3 { grid-column: 1 / -1; max-width: 62%; margin: 24px 0 0 auto; }
}
/* ---- 1024px〜 ---- */
@media (min-width: 1024px) {
  #custom-lp-wrapper .plans { padding: 72px 0 120px; }
  #custom-lp-wrapper .plans-intro { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 96px; }
  #custom-lp-wrapper .plans-txt { display: block; }
  #custom-lp-wrapper .plans-txt .h2 { margin-bottom: 24px; }
  #custom-lp-wrapper .plans-ph { order: 0; width: 100%; margin: 0; }
  #custom-lp-wrapper .pl { grid-template-columns: 1.15fr 1fr; gap: 56px; margin-top: 72px; }
  #custom-lp-wrapper .pl--24 { margin-top: 0; }
  #custom-lp-wrapper .pl--31 { margin-top: 96px; }
  #custom-lp-wrapper .pl-fig { padding: 0 22% 44px 0; }
  #custom-lp-wrapper .pl--a .pl-fig { margin-right: -6%; }
  #custom-lp-wrapper .pl-no { font-size: 36px; }
  #custom-lp-wrapper .pl-n { font-size: 64px; }
  #custom-lp-wrapper .pl-u { font-size: 17px; }
  #custom-lp-wrapper .plans .note--c { margin: 48px 0 0 calc(50% + 28px); max-width: 40em; }
  #custom-lp-wrapper .plans .cta-set--c { margin-left: calc(50% + 28px); max-width: 440px; }

  #custom-lp-wrapper .arch { padding: 120px 0 72px; }
  #custom-lp-wrapper .way { gap: 56px; }
  #custom-lp-wrapper .way--a { grid-template-columns: 1.25fr 1fr; margin-top: 120px; }
  #custom-lp-wrapper .way--b { grid-template-columns: 1fr 1.15fr; align-items: center; margin-top: 72px; }
  #custom-lp-wrapper .way--c { grid-template-columns: 1fr 1fr; align-items: end; margin-top: 168px; }
  #custom-lp-wrapper .way--c .way-txt { padding-bottom: 8px; }
  #custom-lp-wrapper .way--c .way-txt:before { top: auto; bottom: 100%; margin: 0 0 -.1em 0; }
  #custom-lp-wrapper .tales-grid { grid-template-columns: 5fr 7fr; gap: 0 64px; }
  #custom-lp-wrapper .tale--1 { grid-column: 1; grid-row: 1 / 3; }
  #custom-lp-wrapper .tale--2 { grid-column: 2; grid-row: 1; }
  #custom-lp-wrapper .tale--3 { grid-column: 2; grid-row: 2; max-width: none; margin: 24px 0 0 0; }
}


/* =========================================================
   9. SEC-06 PERFORMANCE（深い青磁・実測の面）— SPは写真から始まる。数値は白罫の台帳
   ========================================================= */
#custom-lp-wrapper .perf { background: var(--seiji-deep); color: #fff; padding: 64px 0 80px; overflow: visible; }
#custom-lp-wrapper .perf-grid { display: grid; gap: 0; }
#custom-lp-wrapper .perf-vis { order: -1; }
#custom-lp-wrapper .perf-vis .fr { width: 100%; margin-left: 0; }
#custom-lp-wrapper .perf-vis .voice--w { margin: 24px 0 40px; }
#custom-lp-wrapper .pf { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--rule-w); }
#custom-lp-wrapper .pf-i { display: flex; flex-direction: column; padding: 20px 0 24px; border-bottom: 1px solid var(--rule-w); color: #fff; }
#custom-lp-wrapper .pf-k { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: var(--seiji-l); }
#custom-lp-wrapper .pf-v { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; gap: 0 .15em; margin-top: 6px; }
#custom-lp-wrapper .pf-n { font-family: var(--f-en); font-weight: 300; font-size: 64px; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: proportional-nums lining-nums; }
#custom-lp-wrapper .pf-i--3 .pf-n { font-size: 48px; }
#custom-lp-wrapper .pf-n--jp { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: .08em; line-height: 1.1; padding: 0; white-space: nowrap; font-feature-settings: "palt" 1; }
#custom-lp-wrapper .pf-u { font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.72); }
#custom-lp-wrapper .pf-s { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.72); margin-top: 8px; }

/* =========================================================
   10. SEC-08 VOICE（紙・住んだ人）— SPは写真から始まる。PCは写真が青磁の面に食い込む
   ========================================================= */
#custom-lp-wrapper .vo { padding: 48px 0 48px; overflow: visible; background-color: var(--kami); background-image: var(--grain); }
#custom-lp-wrapper .vo-grid { display: grid; gap: 0; }
#custom-lp-wrapper .vo-vis { width: 100%; margin: 0 0 40px; }
#custom-lp-wrapper .vo-vis .fr { aspect-ratio: 4 / 3; }
#custom-lp-wrapper .vg { display: grid; gap: 24px; margin-top: 24px; }
#custom-lp-wrapper .v { position: relative; border-top: 1px solid var(--rule); padding: 30px 0 0; }
#custom-lp-wrapper .v:before { content: "“"; position: absolute; left: -4px; top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--seiji-l); pointer-events: none; }
#custom-lp-wrapper .v-t { font-family: var(--f-display); font-weight: 500; font-size: 15.5px; line-height: 2.05; letter-spacing: .06em; font-feature-settings: "palt" 1; color: var(--sumi); text-wrap: pretty; }
#custom-lp-wrapper .v--big .v-t { font-size: 20px; line-height: 1.75; font-weight: 700; }
#custom-lp-wrapper .v-c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; color: var(--sumi-2); margin-top: 12px; line-height: 1.6; }
#custom-lp-wrapper .v-n { font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--seiji-d); }

/* =========================================================
   11. SEC-10 CONTACT（白・結び）— 資料／来場を同じ型・同じ写真サイズ（960×450）で左右対称に。落款は最後に一度だけ
   ========================================================= */
#custom-lp-wrapper .last { background: var(--shiro); padding: 64px 0 32px; }
#custom-lp-wrapper .last-in { display: flex; flex-direction: column; align-items: center; position: relative; }
#custom-lp-wrapper .stamp--last { display: none; }
#custom-lp-wrapper .last-p { max-width: 36em; margin-top: 24px; text-align: left; }
#custom-lp-wrapper .dual { display: grid; gap: 0; width: 100%; margin-top: 40px; }
#custom-lp-wrapper .dual-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
#custom-lp-wrapper .dual-lab { font-size: 12px; letter-spacing: .12em; color: var(--seiji); }
#custom-lp-wrapper .dual-ttl { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: .08em; line-height: 1.5; margin-top: 4px; font-feature-settings: "palt" 1; }
#custom-lp-wrapper .dual-ph { width: 100%; margin: 16px 0 20px; overflow: hidden; background: #E9E5DA; aspect-ratio: 960 / 450; }
#custom-lp-wrapper .dual-ph a { display: block; width: 100%; height: 100%; }
#custom-lp-wrapper .dual-ph img { width: 100%; height: 100%; object-fit: cover; }
#custom-lp-wrapper .dual-card .cta { width: 100%; }
#custom-lp-wrapper .dual-micro { font-size: 13px; line-height: 1.7; color: var(--sumi-2); margin-top: 10px; }
#custom-lp-wrapper .dual-card--s { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
#custom-lp-wrapper .notes { width: 100%; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); }
#custom-lp-wrapper .notes .note { margin-top: 6px; max-width: 62em; }

/* =========================================================
   12. 追従バー — SPは全幅、PCは右下のカプセル。FVを過ぎたら現れ、結びで退く（§13）
   ========================================================= */
#custom-lp-wrapper .stick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px var(--gut) max(12px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--rule); box-shadow: var(--sh-stick);
}
#custom-lp-wrapper .stick-a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 12px; border-radius: 999px; text-align: center; line-height: 1.3; transition: background-color .2s ease-out, box-shadow .2s ease-out; }
#custom-lp-wrapper .stick-a--p { background: var(--seiji); color: #fff; }
#custom-lp-wrapper .stick-a--p:hover { background: var(--seiji-d); }
#custom-lp-wrapper .stick-a--s { background: var(--shiro); color: var(--seiji); box-shadow: inset 0 0 0 1.5px var(--seiji); }
#custom-lp-wrapper .stick-a--s:hover { background: var(--wash); box-shadow: inset 0 0 0 1.5px var(--seiji-d); }
#custom-lp-wrapper .stick-t { font-family: var(--f-ui); font-weight: 700; font-size: 14px; letter-spacing: .06em; }
#custom-lp-wrapper .stick-s { font-size: 11px; letter-spacing: .04em; margin-top: 2px; }
#custom-lp-wrapper .stick-a--p .stick-s { color: rgba(255,255,255,.92); }
#custom-lp-wrapper .stick-a--s .stick-s { color: var(--seiji-d); }

/* ---- 768px〜（PERF・VOICE・CONTACT・追従）---- */
@media (min-width: 768px) {
  #custom-lp-wrapper .perf { padding: 72px 0 80px; }
  #custom-lp-wrapper .pf { grid-template-columns: 1.4fr 1fr 1fr; margin-top: 72px; }
  #custom-lp-wrapper .pf-i { padding: 28px 24px 0 0; border-bottom: 0; border-left: 1px solid var(--rule-w); }
  #custom-lp-wrapper .pf-i--1 { border-left: 0; }
  #custom-lp-wrapper .pf-i--2, #custom-lp-wrapper .pf-i--3 { padding-left: 24px; }
  #custom-lp-wrapper .pf-v { min-height: 72px; }
  #custom-lp-wrapper .pf-n { font-size: 72px; }
  #custom-lp-wrapper .pf-i--3 .pf-n { font-size: 56px; }
  #custom-lp-wrapper .pf-n--jp { font-size: 28px; }

  #custom-lp-wrapper .vo { padding: 64px 0 56px; }
  #custom-lp-wrapper .v--big .v-t { font-size: 22px; }

  #custom-lp-wrapper .last { padding: 80px 0 40px; }
  #custom-lp-wrapper .stamp--last { display: flex; position: absolute; right: max(8px, calc(50% - 520px)); top: 8px; width: 112px; height: 112px; margin: 0; order: 0; }
  #custom-lp-wrapper .stamp--last .stamp-a { font-size: 13px; }
  #custom-lp-wrapper .stamp--last .stamp-b { font-size: 9px; }
  #custom-lp-wrapper .dual { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; }
  #custom-lp-wrapper .dual-ttl { font-size: 22px; }
  #custom-lp-wrapper .dual-card--s { margin-top: 0; padding-top: 0; border-top: 0; }
  #custom-lp-wrapper .notes { margin-top: 72px; }

  #custom-lp-wrapper .stick { width: min(520px, calc(100% - 48px)); left: auto; right: 24px; bottom: 20px; border: 1px solid var(--rule); border-radius: 999px; padding: 8px; box-shadow: none; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
  #custom-lp-wrapper .stick-a { min-height: 54px; padding: 8px 22px; }
  #custom-lp-wrapper .stick-t { font-size: 15px; }
}
/* ---- 1024px〜 ---- */
@media (min-width: 1024px) {
  #custom-lp-wrapper .perf { padding: 96px 0 120px; }
  #custom-lp-wrapper .perf-grid { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; }
  #custom-lp-wrapper .perf-txt .h2 { letter-spacing: .05em; }
  #custom-lp-wrapper .perf-vis { order: 0; }
  #custom-lp-wrapper .perf-vis .fr { width: 100%; margin-left: 0; }
  #custom-lp-wrapper .perf-vis .voice--w { margin: 24px 0 0; }
  #custom-lp-wrapper .perf-vis img { object-position: 30% 50%; }
  #custom-lp-wrapper .pf-v { min-height: 88px; }
  #custom-lp-wrapper .pf-n { font-size: 88px; }
  #custom-lp-wrapper .pf-i--3 .pf-n { font-size: 64px; }
  #custom-lp-wrapper .pf-n--jp { font-size: 34px; }

  #custom-lp-wrapper .vo { padding: 120px 0 72px; }
  #custom-lp-wrapper .vo-grid { grid-template-columns: .9fr 1.3fr; gap: 56px; align-items: start; }
  #custom-lp-wrapper .vo-vis { position: relative; z-index: 2; align-self: stretch; width: 100%; margin: -216px 0 0 0; }
  #custom-lp-wrapper .vo-vis .fr { position: sticky; top: 24px; aspect-ratio: 4 / 5; }
  #custom-lp-wrapper .v--big .v-t { font-size: 24px; }

  #custom-lp-wrapper .last { padding: 96px 0 48px; }
  #custom-lp-wrapper .stamp--last { width: 128px; height: 128px; }
  #custom-lp-wrapper .stamp--last .stamp-a { font-size: 14px; }
  #custom-lp-wrapper .dual-ttl { font-size: 24px; }
}


/* =========================================================
   13. 共通レスポンシブ（見出し階層・ガター・CTA対）
   ========================================================= */
@media (min-width: 768px) {
  #custom-lp-wrapper { --gut: 32px; }
  #custom-lp-wrapper .h2 { font-size: 32px; }
  #custom-lp-wrapper .h3 { font-size: 22px; }
  #custom-lp-wrapper .cta-set { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (min-width: 1024px) {
  #custom-lp-wrapper .br-sp { display: none; }
  #custom-lp-wrapper .h2 { font-size: 36px; }
  #custom-lp-wrapper .h3 { font-size: 24px; }
}
@media (min-width: 1320px) {
  #custom-lp-wrapper .h2 { font-size: 40px; }
}

/* =========================================================
   14. モーション — ロード時のFVだけ順に現れ、最後にヘッダーの検印を押す。hoverは色だけ
   追従バーはスクロール連動（対応ブラウザのみ・非対応は常時表示）
   ========================================================= */
@keyframes lp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lp-press { from { opacity: 0; transform: rotate(-6deg) scale(1.12); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
#custom-lp-wrapper .an { animation: lp-rise .55s ease-out both; }
#custom-lp-wrapper .an-1 { animation-delay: .02s; }
#custom-lp-wrapper .an-2 { animation-delay: .14s; }
#custom-lp-wrapper .an-3 { animation-delay: .22s; }
#custom-lp-wrapper .an-4 { animation-delay: .3s; }
@media (min-width: 768px) {
  #custom-lp-wrapper .stamp--top { animation: lp-press .4s cubic-bezier(.2,.8,.2,1) .55s both; }
}
@keyframes lp-stick-in { from { transform: translateY(calc(100% + 24px)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lp-stick-out { to { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } }
/* 追従バー：FVを過ぎたら現れ（90〜110vh）、結びのCTAが見える手前で退く（ページ末尾からの距離で指定。view-timeline は body の overflow-x:hidden でスクロールコンテナが変わるため使わない） */
@supports (animation-timeline: scroll()) {
  #custom-lp-wrapper .stick { animation: lp-stick-in linear both, lp-stick-out linear both; animation-timeline: scroll(root), scroll(root); animation-range: 90vh 110vh, calc(100% - 1100px) calc(100% - 900px); }
}
@media (min-width: 768px) {
  @supports (animation-timeline: scroll()) {
    #custom-lp-wrapper .stick { animation-range: 90vh 110vh, calc(100% - 600px) calc(100% - 400px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  #custom-lp-wrapper .an, #custom-lp-wrapper .stamp--top, #custom-lp-wrapper .stick { animation: none; }
  #custom-lp-wrapper .cta, #custom-lp-wrapper .top-cta, #custom-lp-wrapper .stick-a, #custom-lp-wrapper .sheet, #custom-lp-wrapper .top-a, #custom-lp-wrapper .cta-t:after { transition: none; }
}

/* =========================================================
   16. PRICE「この価格の理由」（カタログ CONCEPT の3点・v4.5）— 台帳と同じ罫の語彙で、カードにしない
   ========================================================= */
#custom-lp-wrapper .reason { margin-top: 48px; }
#custom-lp-wrapper .reason-h { margin-bottom: 16px; }
#custom-lp-wrapper .reason-l { display: grid; border-top: 1px solid var(--sumi); }
#custom-lp-wrapper .reason-i { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
#custom-lp-wrapper .reason-k { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.5; letter-spacing: .06em; font-feature-settings: "palt" 1; color: var(--sumi); }
#custom-lp-wrapper .reason-t { font-size: 14px; line-height: 1.85; color: var(--sumi-2); margin-top: 6px; text-wrap: pretty; }
@media (min-width: 768px) {
  #custom-lp-wrapper .reason { margin-top: 64px; }
  #custom-lp-wrapper .reason-l { grid-template-columns: repeat(3, 1fr); }
  #custom-lp-wrapper .reason-i { padding: 22px 24px 4px 0; border-bottom: 0; }
  #custom-lp-wrapper .reason-i--2, #custom-lp-wrapper .reason-i--3 { padding-left: 24px; border-left: 1px solid var(--rule); }
}
@media (min-width: 1024px) {
  #custom-lp-wrapper .reason { margin-top: 72px; }
  #custom-lp-wrapper .reason-k { font-size: 20px; }
}
/* 資料カードの写真＝送付するカタログの表紙（v4.6）。表紙のロゴと家が960×450の枠に収まる位置 */
#custom-lp-wrapper .dual-ph--cat img { object-position: 50% 24%; }

/* =========================================================
   17. SEC-04b CATALOG（茅の机・v4.7）— 送付するカタログの実物ページを机に置いて見せ、資料請求へ
   SP: 見出し→リード→表紙→ページの横スクロール帯→目次→ボタン。PC(≥1024): 左に言葉と目次、右に表紙と3ページ
   ========================================================= */
#custom-lp-wrapper .cat { padding: 72px 0 80px; background-color: #E6E1D3; background-image: var(--grain); }
#custom-lp-wrapper .cat-grid { display: grid; grid-template-columns: 100%; }
#custom-lp-wrapper .cat-txt { display: contents; }
#custom-lp-wrapper .cat .lab { order: 0; }
#custom-lp-wrapper .cat .h2 { order: 1; }
#custom-lp-wrapper .cat-lead { order: 2; margin-top: 20px; max-width: 34em; }
#custom-lp-wrapper .cat-vis { order: 3; margin-top: 36px; }
#custom-lp-wrapper .cat-toc { order: 4; margin-top: 36px; }
#custom-lp-wrapper .cat-cta { order: 5; margin-top: 32px; }
#custom-lp-wrapper .cat-note { order: 6; color: var(--sumi-2); }

/* 表紙とページ：白い紙に、机に置いた影。回転は図面シートと同じ語彙（±2°以内） */
#custom-lp-wrapper .cat-cover, #custom-lp-wrapper .cat-page { background: var(--shiro); box-shadow: 0 14px 32px rgba(35,34,32,.16), 0 2px 4px rgba(35,34,32,.08); }
#custom-lp-wrapper .cat-cover img, #custom-lp-wrapper .cat-page img { width: 100%; height: auto; aspect-ratio: 1000 / 706; object-fit: cover; }
#custom-lp-wrapper .cat-cover { position: relative; z-index: 1; transform: rotate(-1.2deg); }
#custom-lp-wrapper .cat-pages { position: relative; z-index: 2; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 20px calc(-1 * var(--gut)) 0; padding: 8px var(--gut) 22px; scroll-padding: 0 var(--gut); }
#custom-lp-wrapper .cat-pages::-webkit-scrollbar { display: none; }
#custom-lp-wrapper .cat-page { flex: 0 0 74%; scroll-snap-align: start; }

/* 目次：カタログの実際のページ番号を台帳の罫で */
#custom-lp-wrapper .cat-toc-k { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--seiji-d); margin-bottom: 10px; }
#custom-lp-wrapper .cat-toc-l { display: grid; grid-template-columns: 4.6em 1fr; border-top: 1px solid var(--sumi); }
#custom-lp-wrapper .cat-toc-n, #custom-lp-wrapper .cat-toc-v { padding: 11px 0; border-bottom: 1px solid rgba(35,34,32,.16); }
#custom-lp-wrapper .cat-toc-n { font-family: var(--f-en); font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--seiji-d); line-height: 1.9; }
#custom-lp-wrapper .cat-toc-v { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; line-height: 1.6; font-feature-settings: "palt" 1; color: var(--sumi); }
#custom-lp-wrapper .cat .cta--s { background: transparent; }
#custom-lp-wrapper .cat .cta--s:hover { background: rgba(255,255,255,.55); }

@media (min-width: 768px) {
  #custom-lp-wrapper .cat { padding: 96px 0 104px; }
  #custom-lp-wrapper .cat-vis { padding: 0 4%; }
  #custom-lp-wrapper .cat-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: visible; margin: -14px 0 0; padding: 0 3%; }
  #custom-lp-wrapper .cat-page { transition: transform .3s ease-out; }
  #custom-lp-wrapper .cat-page--1 { transform: rotate(1.6deg); }
  #custom-lp-wrapper .cat-page--2 { transform: translateY(14px) rotate(-1deg); }
  #custom-lp-wrapper .cat-page--3 { transform: rotate(2deg); }
  #custom-lp-wrapper .cat-page:hover { transform: translateY(-4px) rotate(0deg); }
  #custom-lp-wrapper .cat-toc-l { grid-template-columns: 5em 1fr; }
}
@media (min-width: 1024px) {
  #custom-lp-wrapper .cat { padding: 112px 0 120px; }
  #custom-lp-wrapper .cat-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  #custom-lp-wrapper .cat-txt { display: block; order: 0; }
  #custom-lp-wrapper .cat-vis { order: 1; margin-top: 0; padding: 0; }
  #custom-lp-wrapper .cat-pages { margin-top: -18px; padding: 0 2%; gap: 16px; }
  #custom-lp-wrapper .cat-cta { grid-template-columns: 1fr; max-width: 400px; }
  #custom-lp-wrapper .cat-toc-v { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #custom-lp-wrapper .cat-page { transition: none; }
}

/* =========================================================
   18. テーマとの共存（v4.8・公開テーマ ymt_juken_orgtheme で実測）
   - SP はテーマのヘッダー（75px）が上に固定されるため、ページ内リンクの着地点を下げる
   - PC はテーマの追従メニュー（下端59px）と「ページトップへ」（右下）があるため、LPの追従カプセルをその上・左に置く
   ========================================================= */
#custom-lp-wrapper .sec { scroll-margin-top: 88px; }
@media (min-width: 768px) {
  #custom-lp-wrapper .sec { scroll-margin-top: 24px; }
  #custom-lp-wrapper .stick { bottom: 30px; right: 112px; }
}