は自前で に入れ、箱だけ消す */
#custom-lp-wrapper .awrap { display: contents; }
/* ---------- 3. レイアウト基盤 ---------- */
#custom-lp-wrapper .wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--pad-x);
}
#custom-lp-wrapper .bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
}
/* ---------- 4. 見出しの型 ---------- */
#custom-lp-wrapper .sec-head { margin-bottom: 34px; }
#custom-lp-wrapper .sub-head { margin: 62px 0 6px; }
#custom-lp-wrapper .sec-title {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(21px, 3.5vw, 36px);
line-height: 1.5;
letter-spacing: 0.06em;
font-feature-settings: "palt" 1;
position: relative;
padding-bottom: 20px;
}
#custom-lp-wrapper .sec-title:before {
content: ""; position: absolute; left: 0; bottom: 0;
width: 96px; height: 2px;
background: linear-gradient(90deg, var(--cold), var(--envelope) 50%, var(--warm));
}
#custom-lp-wrapper .sec-title.is-center { text-align: center; }
#custom-lp-wrapper .sec-title.is-center:before { left: 50%; transform: translateX(-50%); }
#custom-lp-wrapper .sub-title {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(18px, 2.5vw, 25px);
line-height: 1.6; letter-spacing: 0.05em;
font-feature-settings: "palt" 1;
margin-bottom: 16px;
}
#custom-lp-wrapper .lead {
font-size: 15.5px; line-height: 2.05; color: var(--gray-1);
}
#custom-lp-wrapper .note {
font-size: 11.5px; line-height: 1.75; color: var(--gray-web);
letter-spacing: 0.02em;
}
/* =========================================================
5. HERO
========================================================= */
#custom-lp-wrapper .hero {
position: relative;
background: var(--white);
color: var(--ink);
padding: 48px 0 64px;
/* ページの開きを告げる一本。冷→外皮→暖のサーモライン */
border-top: 3px solid transparent;
/* border-image: linear-gradient(90deg, var(--cold) 0%, var(--cold) 26%, var(--envelope) 50%, var(--warm) 74%, var(--warm) 100%) 1;*/
}
#custom-lp-wrapper .hero-inner { position: relative; }
#custom-lp-wrapper .hero-eyebrow {
display: inline-block;
font-family: var(--f-en);
font-size: 11px; letter-spacing: 0.3em; font-weight: 500;
color: var(--yamato-blue);
padding-left: 16px; position: relative; margin-bottom: 26px;
}
#custom-lp-wrapper .hero-eyebrow:before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 2px; height: 26px;
background: linear-gradient(180deg, var(--cold), var(--warm));
}
#custom-lp-wrapper .hero-eyebrow-jp {
display: block;
font-family: var(--f-body); font-weight: 500;
font-size: 12.5px; letter-spacing: 0.22em; margin-top: 4px;
color: var(--gray-1);
}
#custom-lp-wrapper .hero-title {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(26px, 6.6vw, 68px);
line-height: 1.5;
letter-spacing: 0.05em;
font-feature-settings: "palt" 1;
color: var(--ink);
margin: 0 0 30px;
}
#custom-lp-wrapper .hero-title .l2 { display: block; }
#custom-lp-wrapper .hero-lead {
max-width: 34em;
font-size: 15px; line-height: 2.15;
color: var(--gray-1);
letter-spacing: 0.05em;
margin: 0;
}
/* シグネチャー：外気 ─ 断熱・気密 ─ 室内 */
#custom-lp-wrapper .hero-axis { margin-top: 46px; max-width: 620px; }
#custom-lp-wrapper .hero-axis-line {
position: relative; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--cold) 0%, var(--cold) 26%, var(--envelope) 50%, var(--warm) 74%, var(--warm) 100%);
}
#custom-lp-wrapper .hero-axis-line:before {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 13px; height: 13px; border-radius: 50%;
background: var(--envelope);
box-shadow: 0 0 0 4px var(--white), 0 0 0 6px rgba(227,203,168,0.55);
}
#custom-lp-wrapper .hero-axis-labels {
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 16px;
font-size: 12px; letter-spacing: 0.16em;
color: var(--gray-1);
}
#custom-lp-wrapper .hero-axis-mid {
font-family: var(--f-body); font-weight: 700;
color: var(--yamato-blue); letter-spacing: 0.14em; font-size: 12.5px;
}
/* 導入（ヒーロー内・罫線で区切る。カードにしない） */
#custom-lp-wrapper .intro {
margin-top: 52px; padding-top: 40px;
border-top: 1px solid var(--gray-line);
}
/* 写真3枠。枠の比は支給写真（1080x660 = 18:11）に合わせてあり、トリミングは発生しない。
別比率の写真に替えても object-fit: cover で中央トリミングされて収まる */
#custom-lp-wrapper .intro-shots {
margin-top: 32px;
display: grid; grid-template-columns: 1fr; gap: 14px;
align-items: start;
}
#custom-lp-wrapper .intro-shot { overflow: hidden; }
#custom-lp-wrapper .intro-shot img {
width: 100%; aspect-ratio: 18 / 11; object-fit: cover;
}
#custom-lp-wrapper .intro-title {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(19px, 3vw, 27px); letter-spacing: 0.07em; line-height: 1.55;
font-feature-settings: "palt" 1;
margin-bottom: 12px;
}
#custom-lp-wrapper .intro-copy { max-width: 32em; }
#custom-lp-wrapper .intro-text { font-size: 14.5px; line-height: 2.05; color: var(--gray-1); }
/* ヒーローの staggered reveal（ロード時の1回だけ） */
#custom-lp-wrapper .hero-eyebrow,
#custom-lp-wrapper .hero-title,
#custom-lp-wrapper .hero-lead,
#custom-lp-wrapper .hero-axis,
#custom-lp-wrapper .intro {
animation: lpHeroIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#custom-lp-wrapper .hero-eyebrow { animation-delay: 0.05s; }
#custom-lp-wrapper .hero-title { animation-delay: 0.18s; }
#custom-lp-wrapper .hero-lead { animation-delay: 0.34s; }
#custom-lp-wrapper .hero-axis { animation-delay: 0.50s; }
#custom-lp-wrapper .intro { animation-delay: 0.64s; }
@keyframes lpHeroIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
#custom-lp-wrapper .hero-eyebrow,
#custom-lp-wrapper .hero-title,
#custom-lp-wrapper .hero-lead,
#custom-lp-wrapper .hero-axis,
#custom-lp-wrapper .intro { animation: none; opacity: 1; transform: none; }
#custom-lp-wrapper .btn, #custom-lp-wrapper .btn-line,
#custom-lp-wrapper .cta-card, #custom-lp-wrapper .proof-fig { transition: none; }
}
/* =========================================================
6. セクション共通の面
========================================================= */
#custom-lp-wrapper .s-paper { background: var(--paper); }
#custom-lp-wrapper .s-white { background: var(--white); }
#custom-lp-wrapper .s-dark { background: var(--deep-blue); color: var(--white); }
#custom-lp-wrapper .s-env { background: var(--envelope-tint); }
#custom-lp-wrapper .pad-l { padding-block: 88px; }
#custom-lp-wrapper .pad-m { padding-block: 68px; }
#custom-lp-wrapper .pad-s { padding-block: 52px; }
/* =========================================================
7. 健康セクション
========================================================= */
#custom-lp-wrapper .hl-row {
display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start;
}
#custom-lp-wrapper .callout {
margin-top: 26px;
background: var(--white);
border-left: 4px solid var(--warm);
padding: 20px 22px;
font-size: 15px; line-height: 1.95; font-weight: 500;
color: var(--warm-text);
letter-spacing: 0.04em;
box-shadow: 0 10px 30px -22px rgba(34,24,21,0.4);
}
#custom-lp-wrapper .fig {
background: var(--white);
padding: 18px;
box-shadow: 0 14px 36px -26px rgba(34,24,21,0.45);
}
#custom-lp-wrapper .fig img { margin-inline: auto; }
#custom-lp-wrapper .fig-cap {
margin-top: 12px; font-size: 11.5px; color: var(--gray-web); line-height: 1.7;
}
#custom-lp-wrapper .fig-head {
font-family: var(--f-body); font-weight: 700;
font-size: 14px; letter-spacing: 0.08em;
color: var(--yamato-blue);
padding-bottom: 12px; margin-bottom: 16px;
border-bottom: 1px solid var(--gray-line);
}
#custom-lp-wrapper .voice-box { background: var(--white); padding: 26px 22px; }
#custom-lp-wrapper .voice-head {
font-family: var(--f-body); font-weight: 700; font-size: 14.5px;
letter-spacing: 0.06em; color: var(--ink);
margin-bottom: 18px;
}
#custom-lp-wrapper .voice-body { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
#custom-lp-wrapper .voice-fig { max-width: 240px; margin-inline: auto; }
#custom-lp-wrapper .voice-list { display: grid; gap: 9px; }
#custom-lp-wrapper .voice-list li {
position: relative; padding-left: 20px;
font-size: 14.5px; line-height: 1.8; font-weight: 500;
}
#custom-lp-wrapper .voice-list li:before {
content: ""; position: absolute; left: 0; top: 0.72em;
width: 9px; height: 9px; background: var(--warm);
}
#custom-lp-wrapper .voice-src { margin-top: 16px; }
/* =========================================================
7.5 グラフ（画像ではなくHTML/CSSで描画）
※ 数値は原図（img01.jpg / img03.png）を画素実測して起こしたもの。
値を触るときは 実装メモ §3-2 を読むこと
========================================================= */
/* --- A. 4要素の内訳（100%積み上げ・横棒） --- */
#custom-lp-wrapper .sb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
#custom-lp-wrapper .sb-key {
display: inline-flex; align-items: center;
font-size: 11.5px; letter-spacing: 0.05em; color: var(--gray-1);
}
#custom-lp-wrapper .sb-key:before {
content: ""; width: 11px; height: 11px; margin-right: 6px; border-radius: 2px;
background: var(--k); flex: 0 0 auto;
}
#custom-lp-wrapper .sb-key--d { --k: var(--warm); color: var(--warm-text); font-weight: 700; }
#custom-lp-wrapper .sb-key--s { --k: #8C8B8B; }
#custom-lp-wrapper .sb-key--u { --k: #B5B6B6; }
#custom-lp-wrapper .sb-key--a { --k: #D2D2D2; }
#custom-lp-wrapper .sb-rows { display: grid; gap: 9px; }
#custom-lp-wrapper .sb-row {
display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center;
}
#custom-lp-wrapper .sb-name {
font-size: 10.5px; line-height: 1.35; letter-spacing: -0.02em;
color: var(--ink); text-align: right;
}
#custom-lp-wrapper .sb-track {
display: flex; height: 15px; border-radius: 2px; overflow: hidden; background: #ECECEC;
}
#custom-lp-wrapper .sb-seg { display: block; height: 100%; width: calc(var(--v) * 1%); }
#custom-lp-wrapper .sb-seg--d { background: var(--warm); }
#custom-lp-wrapper .sb-seg--s { background: #8C8B8B; }
#custom-lp-wrapper .sb-seg--u { background: #B5B6B6; }
#custom-lp-wrapper .sb-seg--a { background: #D2D2D2; }
#custom-lp-wrapper .sb-scale {
display: grid; grid-template-columns: 96px 1fr; gap: 10px; margin-top: 9px;
}
#custom-lp-wrapper .sb-scale-bar {
display: flex; justify-content: space-between;
border-top: 1px solid var(--gray-line); padding-top: 5px;
}
#custom-lp-wrapper .sb-tick {
font-family: var(--f-en); font-size: 10px; color: var(--gray-web);
}
/* --- B. UA値と改善率（折れ線） --- */
#custom-lp-wrapper .lc {
display: grid;
grid-template-columns: 30px 1fr;
grid-template-rows: auto 244px auto auto auto;
column-gap: 6px;
}
#custom-lp-wrapper .lc-ytitle {
grid-column: 1 / -1; grid-row: 1;
font-size: 11px; letter-spacing: 0.06em; color: var(--gray-web); margin-bottom: 10px;
}
#custom-lp-wrapper .lc-y { grid-column: 1; grid-row: 2; position: relative; }
#custom-lp-wrapper .lc-yt {
position: absolute; right: 0; top: calc(var(--y) * 1%); transform: translateY(-50%);
font-family: var(--f-en); font-size: 11px; color: var(--gray-web); white-space: nowrap;
}
#custom-lp-wrapper .lc-plot {
grid-column: 2; grid-row: 2; position: relative;
background: repeating-linear-gradient(to bottom, var(--gray-line) 0 1px, transparent 1px 25%);
border-bottom: 1px solid var(--gray-line);
}
#custom-lp-wrapper .lc-svg {
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
#custom-lp-wrapper .lc-svg polyline {
fill: none; stroke-width: 2;
vector-effect: non-scaling-stroke;
stroke-linejoin: round; stroke-linecap: round;
}
#custom-lp-wrapper .lc-dot {
position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
border-radius: 50%; background: var(--c);
}
#custom-lp-wrapper .lc-keys {
grid-column: 1 / -1; grid-row: 5;
display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 18px;
}
#custom-lp-wrapper .lc-key {
display: flex; align-items: center; gap: 6px;
font-size: 10.5px; line-height: 1.2; letter-spacing: -0.02em;
color: var(--ink); white-space: nowrap;
}
#custom-lp-wrapper .lc-key:before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--c); flex: 0 0 auto;
}
#custom-lp-wrapper .lc-x { grid-column: 2; grid-row: 3; position: relative; height: 26px; }
#custom-lp-wrapper .lc-xt {
position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%);
top: 8px;
font-family: var(--f-en); font-size: 12px; color: var(--gray-1); white-space: nowrap;
}
#custom-lp-wrapper .lc-xtitle {
grid-column: 2; grid-row: 4; text-align: right; margin-top: 2px;
font-size: 11px; letter-spacing: 0.02em; color: var(--gray-1); white-space: nowrap;
}
#custom-lp-wrapper .lc-sub { font-size: 0.82em; vertical-align: -0.15em; }
#custom-lp-wrapper .lc-note {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
margin-top: 16px;
}
#custom-lp-wrapper .lc-url { color: var(--gray-web); word-break: break-all; }
#custom-lp-wrapper .lc-url:hover { color: var(--yamato-blue); text-decoration: underline; }
#custom-lp-wrapper .lc-zeh { white-space: nowrap; }
#custom-lp-wrapper .lc-block {
margin-top: 60px;
background: var(--white);
padding: 28px 16px 24px;
box-shadow: 0 14px 36px -26px rgba(34,24,21,0.45);
}
#custom-lp-wrapper .lc-block .sub-title { margin: 0 0 26px; }
/* =========================================================
8. ヒートショック（反転面）
========================================================= */
#custom-lp-wrapper .s-dark .sec-title { color: var(--white); }
#custom-lp-wrapper .s-dark .lead { color: rgba(255,255,255,0.82); }
#custom-lp-wrapper .s-dark .note { color: rgba(255,255,255,0.55); }
#custom-lp-wrapper .hs-grid {
display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 52px;
}
#custom-lp-wrapper .chart-head {
font-family: var(--f-body); font-weight: 700; font-size: 14px;
letter-spacing: 0.09em; color: var(--white);
padding-bottom: 12px; margin-bottom: 22px;
border-bottom: 1px solid rgba(255,255,255,0.22);
}
/* 月別棒グラフ（CSSのみ・値は原図と同一） */
#custom-lp-wrapper .hs-unit {
font-family: var(--f-en); font-size: 10.5px; letter-spacing: 0.1em;
color: rgba(255,255,255,0.5); margin-bottom: 6px;
}
#custom-lp-wrapper .hs-bars {
display: flex; align-items: flex-end; gap: 4px;
height: 232px; margin-bottom: 30px;
border-bottom: 1px solid rgba(255,255,255,0.22);
position: relative;
}
#custom-lp-wrapper .hs-bar {
flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
height: 100%; position: relative; min-width: 0;
}
#custom-lp-wrapper .hs-col {
display: block; width: 100%;
height: calc(var(--v) * 0.17%);
background: linear-gradient(180deg, var(--cold), rgba(94,183,232,0.40));
border-radius: 2px 2px 0 0;
}
#custom-lp-wrapper .hs-bar.is-m1 { --v: 422; }
#custom-lp-wrapper .hs-bar.is-m2 { --v: 327; }
#custom-lp-wrapper .hs-bar.is-m3 { --v: 329; }
#custom-lp-wrapper .hs-bar.is-m4 { --v: 204; }
#custom-lp-wrapper .hs-bar.is-m5 { --v: 176; }
#custom-lp-wrapper .hs-bar.is-m6 { --v: 105; }
#custom-lp-wrapper .hs-bar.is-m7 { --v: 85; }
#custom-lp-wrapper .hs-bar.is-m8 { --v: 63; }
#custom-lp-wrapper .hs-bar.is-m9 { --v: 102; }
#custom-lp-wrapper .hs-bar.is-m10 { --v: 176; }
#custom-lp-wrapper .hs-bar.is-m11 { --v: 280; }
#custom-lp-wrapper .hs-bar.is-m12 { --v: 467; }
#custom-lp-wrapper .hs-bar.is-peak .hs-col {
background: linear-gradient(180deg, #8FD2F4, var(--cold));
box-shadow: 0 0 22px rgba(94,183,232,0.5);
}
#custom-lp-wrapper .hs-val {
font-family: var(--f-en); font-weight: 500;
font-size: clamp(9px, 1.5vw, 12px);
color: rgba(255,255,255,0.9);
text-align: center; margin-bottom: 6px; line-height: 1;
}
#custom-lp-wrapper .hs-bar.is-peak .hs-val { color: #A8DDF7; }
#custom-lp-wrapper .hs-mon {
position: absolute; left: 0; right: 0; bottom: -25px;
text-align: center; font-size: 10.5px; letter-spacing: -0.03em;
color: rgba(255,255,255,0.62);
}
/* 比較バー */
#custom-lp-wrapper .cmp-row { margin-bottom: 26px; }
#custom-lp-wrapper .cmp-label {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
#custom-lp-wrapper .cmp-name {
font-size: 12.5px; letter-spacing: 0.06em;
color: rgba(255,255,255,0.78);
}
#custom-lp-wrapper .cmp-track { display: block; }
#custom-lp-wrapper .cmp-fill { display: block; height: 26px; border-radius: 0 3px 3px 0; }
#custom-lp-wrapper .cmp-fill.is-traffic { width: 27%; background: var(--gray-3); }
#custom-lp-wrapper .cmp-fill.is-shock {
width: 100%; background: linear-gradient(90deg, rgba(238,121,89,0.45), var(--warm));
}
#custom-lp-wrapper .cmp-val {
font-family: var(--f-en); font-weight: 500; font-size: 20px;
color: rgba(255,255,255,0.9); white-space: nowrap; line-height: 1;
}
#custom-lp-wrapper .cmp-val .u { font-family: var(--f-body); font-size: 12px; margin-left: 3px; letter-spacing: 0.04em; }
#custom-lp-wrapper .cmp-val .jp { font-family: var(--f-body); font-size: 13px; margin-right: 2px; }
#custom-lp-wrapper .cmp-val.is-big { font-size: 30px; color: #FFC9B6; }
#custom-lp-wrapper .cmp-val.is-big .u,
#custom-lp-wrapper .cmp-val.is-big .jp { font-size: 14px; }
#custom-lp-wrapper .cmp-badge {
display: inline-block; margin: 6px 0 22px;
background: var(--warm); color: var(--white);
font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
padding: 7px 20px; border-radius: 999px;
}
#custom-lp-wrapper .hs-close {
margin-top: 52px;
border: 1px solid rgba(238,121,89,0.55);
background: rgba(238,121,89,0.1);
padding: 26px 24px;
text-align: center;
font-size: 15px; line-height: 2; font-weight: 500;
letter-spacing: 0.045em;
color: #FFD9CB;
}
/* =========================================================
9. ブリッジ（ヤマト住建の断熱性能）
========================================================= */
#custom-lp-wrapper .bridge { text-align: center; }
#custom-lp-wrapper .bridge-title {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(24px, 5.4vw, 46px);
letter-spacing: 0.16em; line-height: 1.5;
font-feature-settings: "palt" 1;
color: var(--ink);
}
#custom-lp-wrapper .bridge-terms {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 10px 12px; margin-top: 28px;
}
#custom-lp-wrapper .bridge-term {
font-family: var(--f-body); font-weight: 700;
font-size: clamp(13px, 2.4vw, 17px); letter-spacing: 0.07em;
color: var(--warm-text);
background: var(--white);
border: 1px solid rgba(238,121,89,0.42);
padding: 9px 18px;
}
#custom-lp-wrapper .bridge-x {
font-family: var(--f-en); font-weight: 300; font-size: 17px; color: var(--envelope);
}
/* =========================================================
10. 工法比較
========================================================= */
#custom-lp-wrapper .method-grid {
display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 38px;
}
#custom-lp-wrapper .method {
background: var(--white);
border: 1px solid var(--gray-line);
padding: 0 0 24px;
display: flex; flex-direction: column;
}
#custom-lp-wrapper .method.is-ours {
border-color: rgba(238,121,89,0.5);
background: linear-gradient(180deg, #FFFDF9, var(--white) 42%);
box-shadow: 0 26px 54px -34px rgba(192,81,47,0.55);
}
#custom-lp-wrapper .method-tag {
font-family: var(--f-body); font-weight: 700;
font-size: 14.5px; letter-spacing: 0.09em; text-align: center;
color: var(--white); background: var(--gray-1);
padding: 13px 12px;
}
#custom-lp-wrapper .method.is-ours .method-tag {
background: linear-gradient(100deg, var(--warm-text), var(--warm));
}
#custom-lp-wrapper .method-body { padding: 22px 22px 0; }
#custom-lp-wrapper .method-text { font-size: 14.5px; line-height: 2; color: var(--gray-1); }
#custom-lp-wrapper .method-fig { margin-top: auto; padding: 22px 22px 0; }
#custom-lp-wrapper .method-fig img { margin-inline: auto; }
#custom-lp-wrapper .method-verdict {
margin-top: 18px; padding: 0 22px;
font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-align: center;
color: var(--gray-1);
}
#custom-lp-wrapper .method.is-ours .method-verdict { color: var(--warm-text); }
/* =========================================================
11. 気密
========================================================= */
#custom-lp-wrapper .km-row { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
#custom-lp-wrapper .km-point {
font-family: var(--f-body); font-weight: 700;
font-size: clamp(15px, 2.2vw, 18px); line-height: 1.75; letter-spacing: 0.05em;
color: var(--yamato-blue);
margin: 30px 0 12px; padding-left: 15px;
border-left: 3px solid var(--cold);
}
#custom-lp-wrapper .km-fig { background: var(--white); padding: 18px; box-shadow: 0 14px 36px -28px rgba(34,24,21,0.5); }
#custom-lp-wrapper .km-fig img { margin-inline: auto; }
#custom-lp-wrapper .km-note { margin-top: 12px; }
/* 実績パネル */
#custom-lp-wrapper .report {
margin-top: 56px;
background: linear-gradient(158deg, var(--deep-blue), var(--yamato-blue) 70%, var(--blue-mid));
color: var(--white);
padding: 40px 26px 42px;
position: relative; overflow: hidden;
}
#custom-lp-wrapper .report-inner { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
#custom-lp-wrapper .report-head {
font-size: 13px; letter-spacing: 0.14em; font-weight: 500;
color: rgba(255,255,255,0.8); margin-bottom: 10px;
}
#custom-lp-wrapper .report-num { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#custom-lp-wrapper .report-num-label {
font-family: var(--f-body); font-weight: 700; font-size: 15px; letter-spacing: 0.1em;
color: var(--envelope);
}
#custom-lp-wrapper .report-num-val {
font-family: var(--f-en); font-weight: 300;
font-size: clamp(62px, 15vw, 122px); line-height: 0.92;
letter-spacing: -0.02em; color: var(--white);
}
#custom-lp-wrapper .report-side { border-top: 1px solid rgba(255,255,255,0.24); padding-top: 22px; }
#custom-lp-wrapper .report-sub {
font-weight: 700; font-size: clamp(16px, 2.6vw, 21px); letter-spacing: 0.06em;
color: var(--white); line-height: 1.6;
}
#custom-lp-wrapper .report-sub .n { font-family: var(--f-en); font-weight: 500; font-size: 1.5em; color: #A8DDF7; letter-spacing: 0; }
#custom-lp-wrapper .report-note { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,0.62); }
/* 証拠の4点 */
#custom-lp-wrapper .proof {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px;
margin-top: 30px;
}
#custom-lp-wrapper .proof-item { min-width: 0; }
#custom-lp-wrapper .proof-fig { position: relative; overflow: hidden; background: var(--gray-bg); }
#custom-lp-wrapper .proof-fig img { width: 100%; }
#custom-lp-wrapper .proof-cap {
margin-top: 9px; font-size: 11.5px; line-height: 1.65; color: var(--gray-1);
}
#custom-lp-wrapper .is-movie .proof-fig:after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px; border-radius: 50%;
background-color: rgba(2,35,85,0.72);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l8-4.5z' fill='%23ffffff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 26px 26px;
transition: background-color 0.25s ease, transform 0.25s ease;
}
#custom-lp-wrapper .is-movie a:hover .proof-fig:after { background-color: var(--warm-text); transform: translate(-50%, -50%) scale(1.08); }
/* =========================================================
12. サッシ
========================================================= */
#custom-lp-wrapper .sash-row { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
#custom-lp-wrapper .sash-fig { background: var(--white); padding: 20px; }
#custom-lp-wrapper .sash-fig img { margin-inline: auto; }
#custom-lp-wrapper .sash-text { font-size: 14.5px; line-height: 2.05; color: var(--gray-1); }
#custom-lp-wrapper .sash-text .em {
font-family: var(--f-en); font-weight: 500;
font-size: 1.45em; line-height: 1; letter-spacing: 0; color: var(--warm-text);
vertical-align: -0.03em; padding-inline: 2px;
}
#custom-lp-wrapper .badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
#custom-lp-wrapper .badge {
font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em;
color: #6B5334; background: var(--envelope-tint);
border: 1px solid var(--envelope);
padding: 8px 15px;
}
/* 冬・夏パネル */
#custom-lp-wrapper .season-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
/* 見出し（冬期／夏期・◯％）は画像側に入っているため、帯は置かない。
文言は img の alt に持たせてある */
#custom-lp-wrapper .season { border: 1px solid var(--gray-line); overflow: hidden; }
#custom-lp-wrapper .season.is-winter { border-color: rgba(94,183,232,0.55); }
#custom-lp-wrapper .season.is-summer { border-color: rgba(238,121,89,0.5); }
#custom-lp-wrapper .season-fig img { width: 100%; }
/* =========================================================
13. アンケート
========================================================= */
#custom-lp-wrapper .enq {
background: var(--white);
display: grid; grid-template-columns: 1fr;
box-shadow: 0 24px 56px -34px rgba(2,35,85,0.5);
overflow: hidden;
}
#custom-lp-wrapper .enq-body { padding: 34px 26px 36px; }
#custom-lp-wrapper .enq-title {
font-family: var(--f-display); font-weight: 700;
font-size: clamp(19px, 3vw, 27px); letter-spacing: 0.06em; line-height: 1.55;
font-feature-settings: "palt" 1; margin-bottom: 16px;
}
#custom-lp-wrapper .enq-fig img { width: 100%; height: 100%; object-fit: cover; }
/* ボタン */
#custom-lp-wrapper .btn {
display: inline-flex; align-items: center; gap: 12px;
min-height: 52px; padding: 13px 26px; margin-top: 24px;
background: var(--yamato-blue); color: var(--white);
font-weight: 700; font-size: 14.5px; letter-spacing: 0.08em;
transition: background-color 0.25s ease, transform 0.25s ease;
}
#custom-lp-wrapper .btn:hover { background: var(--blue-mid); transform: translateY(-2px); }
#custom-lp-wrapper .btn .arw { font-family: var(--f-en); font-weight: 300; font-size: 17px; line-height: 1; }
#custom-lp-wrapper .btn-line {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; min-height: 46px; padding: 11px 16px;
border: 1px solid var(--gray-line); background: var(--white);
font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--yamato-blue);
transition: border-color 0.25s ease, background-color 0.25s ease;
}
#custom-lp-wrapper .btn-line:hover { border-color: var(--yamato-blue); background: var(--blue-50); }
#custom-lp-wrapper .btn-line .arw { font-family: var(--f-en); font-weight: 300; }
/* =========================================================
14. セミナー
========================================================= */
#custom-lp-wrapper .rp-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
#custom-lp-wrapper .rp-card {
background: var(--white); border: 1px solid var(--gray-line);
padding: 24px 20px 22px; display: flex; flex-direction: column;
}
#custom-lp-wrapper .rp-title {
font-family: var(--f-body); font-weight: 700;
font-size: 15px; line-height: 1.75; letter-spacing: 0.04em;
color: var(--ink); margin-bottom: 10px;
}
#custom-lp-wrapper .rp-prof { font-size: 12.5px; color: var(--gray-1); line-height: 1.75; }
#custom-lp-wrapper .rp-photo { margin: 18px 0 20px; }
#custom-lp-wrapper .rp-photo img { width: 128px; margin-inline: auto; }
#custom-lp-wrapper .rp-links { margin-top: auto; display: grid; gap: 8px; }
#custom-lp-wrapper .rp-more { margin-top: 34px; text-align: center; }
#custom-lp-wrapper .rp-more .btn { margin-top: 0; }
/* =========================================================
15. 受賞バナー / CTA
========================================================= */
#custom-lp-wrapper .award { text-align: center; margin-bottom: 44px; }
#custom-lp-wrapper .award img { margin-inline: auto; }
#custom-lp-wrapper .cta-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
#custom-lp-wrapper .cta-card {
display: block; background: var(--white);
border: 1px solid var(--gray-line);
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
#custom-lp-wrapper .cta-card:hover {
transform: translateY(-4px);
border-color: var(--yamato-blue);
box-shadow: 0 26px 50px -30px rgba(2,35,85,0.55);
}
#custom-lp-wrapper .cta-img { display: block; }
#custom-lp-wrapper .cta-img img { width: 100%; }
#custom-lp-wrapper .cta-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; min-height: 56px;
font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--yamato-blue);
}
#custom-lp-wrapper .cta-card .arw { font-family: var(--f-en); font-weight: 300; font-size: 18px; }
#custom-lp-wrapper .cta-rows p { margin: 0; }
#custom-lp-wrapper .cta-rows br { display: none; }
/* =========================================================
15.5 画像の場所を先に確保する（CLS対策 / 読込前でもリンクが潰れない）
※ 値は各画像の実寸。差し替え時はここも直すこと
========================================================= */
#custom-lp-wrapper .hl-fig img { width: 100%; }
#custom-lp-wrapper .fig-01 img { aspect-ratio: 454 / 295; }
#custom-lp-wrapper .fig-03 img { aspect-ratio: 1065 / 821; }
#custom-lp-wrapper .voice-fig img { width: 100%; aspect-ratio: 291 / 210; }
#custom-lp-wrapper .fig-inner img { width: 100%; aspect-ratio: 1060 / 490; }
#custom-lp-wrapper .fig-outer img { width: 100%; aspect-ratio: 1060 / 490; }
#custom-lp-wrapper .km-fig img { width: 100%; aspect-ratio: 880 / 572; }
#custom-lp-wrapper .sash-fig img { width: 100%; max-width: 380px; aspect-ratio: 380 / 396; }
#custom-lp-wrapper .fig-winter img { width: 100%; aspect-ratio: 970 / 730; }
#custom-lp-wrapper .fig-summer img { width: 100%; aspect-ratio: 970 / 730; }
#custom-lp-wrapper .proof-fig img { width: 100%; aspect-ratio: 640 / 370; }
#custom-lp-wrapper .enq-fig img { aspect-ratio: 898 / 574; }
#custom-lp-wrapper .rp-photo img { aspect-ratio: 90 / 108; }
#custom-lp-wrapper .award img { width: 100%; max-width: 900px; aspect-ratio: 900 / 260; }
#custom-lp-wrapper .cta-img img { width: 100%; aspect-ratio: 460 / 280; }
/* =========================================================
16. ブレークポイント
========================================================= */
@media (min-width: 768px) {
#custom-lp-wrapper { --pad-x: 32px; font-size: 16px; }
#custom-lp-wrapper .hero { padding: 66px 0 78px; }
#custom-lp-wrapper .hero-title { letter-spacing: 0.11em; }
#custom-lp-wrapper .intro { margin-top: 56px; padding-top: 46px; }
#custom-lp-wrapper .intro-shots { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.2vw, 44px); margin-top: 48px; }
#custom-lp-wrapper .intro-shot--2 { margin-top: 44px; }
#custom-lp-wrapper .intro-shot--3 { margin-top: 18px; }
#custom-lp-wrapper .hl-row { grid-template-columns: 1.15fr 1fr; gap: 46px; }
#custom-lp-wrapper .hl-row.is-reverse { grid-template-columns: 1fr 1.05fr; }
#custom-lp-wrapper .hl-row.is-offset { margin-top: 74px; }
#custom-lp-wrapper .hl-row.is-offset .hl-late { padding-top: 42px; }
#custom-lp-wrapper .sb-row { grid-template-columns: 104px 1fr; }
#custom-lp-wrapper .sb-scale { grid-template-columns: 104px 1fr; }
#custom-lp-wrapper .sb-name { font-size: 11px; }
#custom-lp-wrapper .lc { grid-template-columns: 44px 1fr 172px; grid-template-rows: auto 380px auto; column-gap: 14px; }
#custom-lp-wrapper .lc-keys { grid-column: 3; grid-row: 2; display: block; position: relative; margin-top: 0; }
#custom-lp-wrapper .lc-key { position: absolute; left: 0; top: calc(var(--y) * 1%); transform: translateY(-50%); }
#custom-lp-wrapper .lc-xtitle { grid-column: 3; grid-row: 3; text-align: left; align-self: end; padding: 0 0 4px 16px; margin-top: 0; }
#custom-lp-wrapper .lc-key { font-size: 12px; letter-spacing: 0; gap: 8px; }
#custom-lp-wrapper .lc-key:before { width: 9px; height: 9px; }
#custom-lp-wrapper .lc-yt { font-size: 12px; }
#custom-lp-wrapper .lc-xt { font-size: 13.5px; }
#custom-lp-wrapper .lc-block { padding: 40px 40px 34px; margin-top: 74px; }
#custom-lp-wrapper .voice-body { grid-template-columns: 132px 1fr; gap: 20px; }
#custom-lp-wrapper .hs-grid { grid-template-columns: 1.35fr 1fr; gap: 54px; }
#custom-lp-wrapper .hs-bars { height: 268px; gap: 7px; }
#custom-lp-wrapper .method-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
#custom-lp-wrapper .km-row { grid-template-columns: 1fr 1fr; gap: 48px; }
#custom-lp-wrapper .report { padding: 52px 48px 54px; }
#custom-lp-wrapper .report-inner { grid-template-columns: auto 1fr; gap: 48px; }
#custom-lp-wrapper .report-side { border-top: 0; border-left: 1px solid rgba(255,255,255,0.24); padding-top: 0; padding-left: 26px; }
#custom-lp-wrapper .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#custom-lp-wrapper .sash-row { grid-template-columns: 0.92fr 1.08fr; gap: 46px; }
#custom-lp-wrapper .season-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
#custom-lp-wrapper .enq { grid-template-columns: 1.1fr 0.9fr; }
#custom-lp-wrapper .enq-body { padding: 44px 42px 46px; }
#custom-lp-wrapper .rp-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
#custom-lp-wrapper .cta-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
#custom-lp-wrapper .pad-l { padding-block: 116px; }
#custom-lp-wrapper .pad-m { padding-block: 88px; }
#custom-lp-wrapper .pad-s { padding-block: 64px; }
}
@media (min-width: 1024px) {
#custom-lp-wrapper .hero { padding: 78px 0 88px; }
#custom-lp-wrapper .hl-row { gap: 60px; }
#custom-lp-wrapper .voice-body { grid-template-columns: 168px 1fr; gap: 24px; }
#custom-lp-wrapper .pad-l { padding-block: 132px; }
}