/* =================================================================
TONE BRANDING — 広告用LP（page-lp.php）専用CSS v2
構成の組み立ては sawamura-architect.jp/thearthouse/ を参考にしている
（スクロールで背景色が変わる／各特徴を1画面で見せる／写真は非対称配置）。
ただし書体は源ノ角ゴシックのまま（7/7のゴシック統一を維持）。
写真・コピー・アセットはすべて自社のもの。
================================================================= */
/* ---------- トークン ---------- */
body.page-template-page-lp{
--lp-mist:#e7e9ea; /* 淡グレー */
--lp-slate:#4d565e; /* スレート（濃いグレー） */
--lp-charcoal:#2f3336; /* ダークグレー（旧ネイビー #245061 から変更） */
--lp-on-dark:#f4f5f5; /* 暗い面の文字 */
--lp-on-dark-2:rgba(244,245,245,.80);
/* 費用セクションの吹き出し。三角（border三角）は地の上に重ならないので、
半透明だと合成結果がズレる。charcoal に白を重ねた値を**不透明**で持つ。 */
--lp-bub:#3d4143; /* 吹き出しとレールの地 */
--lp-bub-bd:#565a5c; /* 吹き出しの枠・目盛りの縦線 */
}
/* ---------- スクロールで背景色が変わる ---------- */
body.page-template-page-lp{ transition:background-color 1.1s var(--ease); }
body.lp-bg-ink{ background-color:#141414; }
body.lp-bg-paper{ background-color:var(--paper); }
body.lp-bg-mist{ background-color:var(--lp-mist); }
body.lp-bg-slate{ background-color:var(--lp-slate); }
body.lp-bg-charcoal{ background-color:var(--lp-charcoal); }
/* 節そのものは透過（色は body が持つ） */
.lp-v2 .lp-sec{ position:relative; background:transparent;
padding-block:clamp(96px,12vw,168px); }
body.page-template-page-lp .side-rail{ display:none; }
/* LPではヘッダーごと追従させない＝ヒーローと一緒に流れていく。
スクロール後に残るのは .lp-stickycta（無料相談ボタン）だけ。 */
body.page-template-page-lp .site-header{ position:absolute; }
/* ヘッダーはヒーローの上にしか現れないので、is-scrolled が付いても透過・白ロゴのまま固定する */
body.page-template-page-lp .site-header.is-scrolled{ background:transparent; backdrop-filter:none; }
body.page-template-page-lp .site-header.is-scrolled .logo img{
filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.35)); }
body.page-template-page-lp .site-header.is-scrolled .header-actions .btn--solid{
--bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
/* LPはナビを出さないので、そのままだとCTAがロゴの隣に残る。右端へ寄せる */
body.page-template-page-lp .header-actions{ margin-left:auto; }
/* CTAは「ボタン」として見えるように、丸ピル＋影＋矢印。ヘッダーはfixedなのでスクロールに追従する */
body.page-template-page-lp .header-actions .btn--sm{
padding:14px 26px; border-radius:999px; font-size:12.5px; letter-spacing:.16em;
box-shadow:0 8px 22px -12px rgba(20,20,20,.55); }
body.page-template-page-lp .header-actions .btn--sm .arw{ margin-left:2px; }
/* ヒーロー上（透過ヘッダー）でも白ピルで浮かせる */
body.page-template-page-lp .site-header:not(.is-scrolled) .header-actions .btn--solid{
--bg:var(--paper); --fg:var(--ink); --bd:var(--paper);
box-shadow:0 10px 26px -12px rgba(0,0,0,.7); }
body.page-template-page-lp .site-header:not(.is-scrolled) .header-actions .btn--solid:hover{
--bg:transparent; background:transparent; color:var(--paper); --bd:var(--paper); }
/* 暗い面の文字色 */
.lp-sec.is-dark, .lp-sec.is-dark h2, .lp-sec.is-dark h3{ color:var(--lp-on-dark); }
.lp-sec.is-dark p, .lp-sec.is-dark dd, .lp-sec.is-dark li{ color:var(--lp-on-dark-2); }
/* ---------- ローディング（参考サイトの c-loading 相当）
JSに頼らずCSSアニメだけで必ず消える＝スクリプトが落ちても画面を塞がない。
広告LPなので拘束はごく短く（0.45秒保持 → 0.6秒でフェード）。 ---------- */
.lp-loading{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
background:var(--ink); animation:lpLoadOut .6s .45s forwards; }
.lp-loading img{ width:min(230px,52vw); height:auto;
filter:brightness(0) invert(1); opacity:0; animation:lpLogoIn .5s .05s forwards; }
@keyframes lpLoadOut{ to{ opacity:0; visibility:hidden; } }
@keyframes lpLogoIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .lp-loading{ display:none; } }
/* ---------- 01 KV ---------- */
.lp-hero{ position:relative; min-height:min(100svh,900px); display:flex; align-items:center;
overflow:hidden; background:var(--ink); }
.lp-hero__media{ position:absolute; inset:0; z-index:0; }
.lp-hero__media img{ width:100%; height:100%; object-fit:cover; }
/* スクリム：文字を画面中央に置くので、横方向ではなく「中央の帯」を濃くする。
値は実測（文字を消して背景の下位5%を測る）で決めた＝最悪部でもコントラスト4.5以上。 */
.lp-hero::after{ content:""; position:absolute; inset:0; z-index:1;
background:
linear-gradient(180deg,
rgba(10,10,10,.46) 0%,
rgba(10,10,10,.40) 14%,
rgba(10,10,10,.62) 40%,
rgba(10,10,10,.66) 66%,
rgba(10,10,10,.56) 86%,
rgba(10,10,10,.48) 100%),
linear-gradient(90deg,
rgba(10,10,10,.10) 0%,
rgba(10,10,10,0) 30%,
rgba(10,10,10,0) 58%,
rgba(10,10,10,.14) 80%,
rgba(10,10,10,.24) 100%); }
.lp-hero__inner{ position:relative; z-index:2; width:100%; color:var(--paper); text-align:center;
padding-block:clamp(110px,13vw,150px) clamp(70px,8vw,110px); }
.lp-hero__eyebrow{ display:inline-block; font-size:13px; font-weight:500;
letter-spacing:.22em; color:color-mix(in srgb,var(--paper) 92%,transparent);
text-shadow:0 2px 14px rgba(0,0,0,.5); }
.lp-hero__title{ margin:clamp(22px,3vw,34px) 0 0; }
/* 見出しは手書きの画像。素材は濃色インク＋透過なので、ロゴと同じ要領で白へ反転する */
.lp-hero__title img{ display:block; margin-inline:auto; width:min(760px,80vw); height:auto;
filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.lp-hero__lead{ margin:clamp(18px,2.2vw,26px) auto 0; max-width:none;
color:color-mix(in srgb,var(--paper) 92%,transparent);
font-size:16px; line-height:2.1; letter-spacing:.06em; text-shadow:0 2px 16px rgba(0,0,0,.42); }
.lp-hero__act{ margin-top:clamp(28px,3.4vw,44px); justify-content:center; }
/* 広告LPの主役なので、共通の .btn（12px / 16px 26px）より一段大きくする */
.lp-hero__act .btn{ padding:clamp(19px,2.1vw,24px) clamp(32px,3.6vw,48px);
font-size:clamp(13px,1.3vw,15px); gap:16px; }
.lp-hero__act .btn{ --bd:var(--paper); --fg:var(--paper); }
.lp-hero__act .btn:hover{ background:var(--paper); color:var(--ink); }
.lp-hero__act .btn--solid{ --bg:var(--paper); --fg:var(--ink); }
.lp-hero__act .btn--solid:hover{ --bg:transparent; background:transparent; color:var(--paper); }
.lp-scroll{ position:absolute; right:clamp(20px,3vw,48px); bottom:0; z-index:3;
writing-mode:vertical-rl; font-family:var(--en); font-size:12px; letter-spacing:.28em;
color:color-mix(in srgb,var(--paper) 80%,transparent);
display:flex; align-items:center; gap:14px; padding-bottom:96px; }
.lp-scroll i{ display:block; width:1px; height:70px; background:currentColor; opacity:.5; }
/* ---------- 02 イントロ ---------- */
.lp-intro{ text-align:center; }
.lp-intro__ttl{ font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.2vw,27px);
letter-spacing:.16em; margin:0 auto; display:inline-flex; flex-direction:row; align-items:center; gap:26px;
writing-mode:vertical-rl; text-orientation:mixed; height:auto; }
/* 縦書きの中では罫も縦。writing-mode で軸が入れ替わるので width/height を入れ替えて書く */
.lp-rule{ display:block; width:1px; height:clamp(44px,6vw,84px); background:var(--ink-3); }
.lp-intro__lead{ margin-top:clamp(34px,4vw,52px); }
.lp-intro__lead p{ font-size:16px; line-height:2.3; letter-spacing:.08em; color:var(--ink-2); margin:0; }
.lp-issues{ list-style:none; margin:clamp(46px,5.4vw,76px) auto 0; padding:0; max-width:920px;
display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,60px); text-align:left; }
.lp-issues li{ position:relative; padding:18px 0 18px 30px; border-bottom:1px solid var(--line);
font-size:15px; line-height:1.95; color:var(--ink-2); }
.lp-issues li::before{ content:"✓"; position:absolute; left:2px; top:19px;
font-size:12px; color:var(--accent); }
@media(max-width:820px){ .lp-issues{ grid-template-columns:1fr; } }
/* ---------- 03-05 特徴（各1画面・写真は非対称） ---------- */
.lp-feat{ min-height:min(100svh,940px); display:flex; align-items:center; }
.lp-feat .container{ width:100%; }
.lp-feat__grid{ display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);
gap:clamp(40px,6vw,110px); align-items:center; }
.lp-feat--rev .lp-feat__grid{ grid-template-columns:minmax(0,1fr) minmax(0,0.86fr); }
.lp-feat--rev .lp-feat__body{ order:2; }
.lp-feat--rev .lp-collage{ order:1; }
.lp-feat__body{ position:relative; }
/* 大きな薄い番号を見出しの背後に敷く（参考サイトの章番号） */
.lp-ghost{ position:absolute; left:-.06em; top:-.44em; z-index:0; pointer-events:none;
font-family:var(--display); font-style:italic; font-weight:400;
font-size:clamp(120px,17vw,240px); line-height:1; color:var(--ink);
opacity:.07; }
.is-dark .lp-ghost{ color:var(--lp-on-dark); opacity:.12; }
.lp-feat__en{ position:relative; z-index:1; display:block; font-family:var(--en); font-size:16px;
font-weight:500; letter-spacing:.26em; color:var(--ink-3); }
.is-dark .lp-feat__en{ color:var(--lp-on-dark-2); }
.lp-feat__ttl{ position:relative; z-index:1; margin:18px 0 0; font-family:var(--serif); font-weight:500;
font-size:clamp(26px,3.4vw,46px); line-height:1.55; letter-spacing:.05em; }
.lp-feat__lead{ position:relative; z-index:1; margin:clamp(24px,2.8vw,36px) 0 0;
font-size:16px; line-height:2.15; letter-spacing:.04em; color:var(--ink-2); max-width:42ch; }
.lp-feat__desc{ position:relative; z-index:1; margin:20px 0 0;
font-size:16px; line-height:2.125; letter-spacing:.04em; color:var(--ink-2); max-width:44ch; }
/* 写真コラージュ（3枚を大小ちがう比率でずらして置く） */
.lp-collage{ position:relative; aspect-ratio:1/1.02; }
.lp-ph{ position:absolute; margin:0; overflow:hidden; background:var(--fill);
opacity:0; transition:opacity 1.2s var(--ease); box-shadow:var(--shadow); }
.lp-ph.is-in{ opacity:1; }
/* 横に流すぶん枠より 12% 大きく持たせる。style.css の img{max-width:100%} に効き目を消されるので解除する */
.lp-ph img, .lp-ph video{ width:112%; max-width:none; height:100%; object-fit:cover; display:block;
margin-left:-6%; will-change:transform; }
/* 2カラムのレール写真は横に流さないので等倍のまま */
.lp-split__ph img{ width:100%; max-width:100%; margin-left:0; }
.lp-ph--a{ left:16%; top:0; width:84%; aspect-ratio:4/3; }
.lp-ph--b{ left:0; top:46%; width:47%; aspect-ratio:3/4; }
.lp-ph--c{ right:2%; bottom:0; width:36%; aspect-ratio:1/1; }
@media(max-width:900px){
.lp-feat{ min-height:0; }
.lp-feat__grid, .lp-feat--rev .lp-feat__grid{ grid-template-columns:1fr; gap:clamp(34px,6vw,54px); }
.lp-feat--rev .lp-feat__body{ order:1; }
.lp-feat--rev .lp-collage{ order:2; }
.lp-feat__lead, .lp-feat__desc{ max-width:none; }
.lp-collage{ aspect-ratio:1/0.92; }
.lp-ph--a{ left:12%; width:88%; }
.lp-ph--b{ top:52%; width:52%; }
.lp-ph--c{ width:38%; }
}
/* ---------- 06 思想（ネイビー・縦書き見出し） ---------- */
.lp-statement__grid{ display:grid; grid-template-columns:auto minmax(0,1fr);
gap:clamp(40px,6vw,100px); align-items:start; }
/* 縦書きは writing-mode で軸が入れ替わる＝height が「1列の長さ」になる。
いちばん長い行（18文字）が1列に収まる高さを取らないと3列に割れる。 */
.lp-vert{ writing-mode:vertical-rl; text-orientation:mixed; margin:0;
font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.2vw,29px);
line-height:2.2; letter-spacing:.12em; height:clamp(520px,54vw,720px); }
.lp-statement__head{ display:flex; align-items:flex-start; gap:clamp(20px,2.4vw,36px); }
.lp-statement__rule{ display:block; width:1px; height:clamp(120px,16vw,220px); margin-top:8px;
background:linear-gradient(180deg,color-mix(in srgb,var(--lp-on-dark) 55%,transparent),transparent); }
/* 強弱：導入の1文を大きく、続く文を小さく落とす */
.lp-statement__lead{ font-family:var(--serif); font-weight:500;
font-size:clamp(18px,2vw,25px) !important; line-height:1.95 !important; letter-spacing:.06em;
color:var(--lp-on-dark) !important; margin:0 0 26px; }
.lp-statement__sub{ font-size:15px; line-height:2.2; letter-spacing:.05em; margin:0 0 22px; }
.lp-statement__note{ font-size:14px !important; line-height:2.1; margin:0; }
@media(max-width:900px){
.lp-statement__grid{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); }
.lp-vert{ writing-mode:horizontal-tb; height:auto; letter-spacing:.06em; line-height:1.75;
font-size:clamp(20px,5.4vw,26px); }
}
/* 順番の比較：同じ強さで2つ並べると「線と文字が並んでいるだけ」に見えるので、
上（一般的なやり方）は枠を外して弱く、下（私たちのやり方）は白ベタ＋番号で強く出す。 */
.lp-compare{ margin:clamp(30px,3.6vw,46px) 0; display:grid; gap:0; }
.lp-compare__label{ display:block; font-family:var(--en); font-size:11.5px; letter-spacing:.24em; }
.lp-compare ol{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; }
.lp-compare li{ display:inline-flex; align-items:baseline; font-family:var(--serif); font-weight:500;
letter-spacing:.04em; }
/* 上：弱く（枠なし・小さく・薄く） */
.lp-compare__row--plain{ padding:0 0 clamp(22px,2.6vw,32px); }
.lp-compare__row--plain .lp-compare__label{ color:color-mix(in srgb,var(--lp-on-dark) 52%,transparent);
width:fit-content; padding-bottom:9px;
border-bottom:1px solid color-mix(in srgb,var(--lp-on-dark) 34%,transparent); }
.lp-compare__row--plain li{ font-size:14px; color:color-mix(in srgb,var(--lp-on-dark) 62%,transparent) !important; }
.lp-compare__row--plain li:not(:last-child)::after{ content:"→"; display:inline-block;
margin:0 clamp(9px,1.2vw,15px); font-family:var(--en); font-size:11px;
color:color-mix(in srgb,var(--lp-on-dark) 40%,transparent); }
/* あいだ：転換を示す下向きの矢印（線＋先端） */
.lp-compare__turn{ display:block; position:relative; width:1px; height:clamp(34px,3.8vw,52px);
margin:0 0 clamp(22px,2.6vw,32px) 14px;
background:linear-gradient(180deg,color-mix(in srgb,var(--lp-on-dark) 10%,transparent),color-mix(in srgb,var(--lp-on-dark) 70%,transparent)); }
.lp-compare__turn::after{ content:""; position:absolute; left:50%; bottom:0;
width:8px; height:8px; transform:translate(-50%,1px) rotate(45deg);
border-right:1px solid color-mix(in srgb,var(--lp-on-dark) 70%,transparent);
border-bottom:1px solid color-mix(in srgb,var(--lp-on-dark) 70%,transparent); }
/* 下：強く（白ベタ＋番号＋大きめ） */
.lp-compare__row--ours{ background:var(--paper); color:var(--ink);
padding:clamp(26px,3vw,38px) clamp(22px,2.8vw,38px);
box-shadow:0 22px 44px -30px rgba(0,0,0,.75); }
.lp-compare__row--ours .lp-compare__label{ color:var(--ink-3); }
.lp-compare__row--ours ol{ margin-top:18px; gap:clamp(10px,1.4vw,18px) 0; }
.lp-compare__row--ours li{ font-size:clamp(15px,1.55vw,19px); color:var(--ink) !important; font-weight:600; }
.lp-compare__row--ours li i{ font-family:var(--display); font-style:italic; font-weight:400;
font-size:.82em; color:var(--accent); margin-right:8px; }
.lp-compare__row--ours li:not(:last-child)::after{ content:"→"; display:inline-block;
margin:0 clamp(12px,1.5vw,20px); font-family:var(--en); font-size:12px; color:var(--ink-3); }
@media(max-width:640px){
.lp-compare ol{ display:grid; grid-template-columns:1fr; gap:10px; }
.lp-compare li:not(:last-child)::after{ display:none; }
.lp-compare__row--ours li{ font-size:16px; }
}
/* ---------- 共通の節見出し ---------- */
.lp-head{ text-align:center; }
.lp-head--sub{ margin-top:clamp(96px,11vw,160px); }
.lp-head__en{ display:block; font-family:var(--en); font-size:12px; font-weight:500;
letter-spacing:.28em; color:var(--ink-3); }
.is-dark .lp-head__en{ color:var(--lp-on-dark-2); }
.lp-head__ttl{ margin:14px 0 0; font-family:var(--serif); font-weight:500;
font-size:clamp(23px,2.8vw,36px); line-height:1.6; letter-spacing:.08em; }
.lp-head__lead{ max-width:720px; margin:20px auto 0; font-size:15px; line-height:2.1; color:var(--ink-2); }
/* Results / Works の見出しだけ、英語を主役にして日本語を小さく添える */
/* 9018 / 9022：進め方とFAQのレール見出しの英字だけ 16px（他の .lp-head__en は12pxのまま） */
#flow .lp-split__rail .lp-head__en,
#faq .lp-split__rail .lp-head__en{ font-size:16px; }
.lp-head--enbig .lp-head__en{ font-size:clamp(30px,4.4vw,54px); font-weight:500;
letter-spacing:.1em; line-height:1.1; color:var(--lp-on-dark); }
.lp-head--enbig .lp-head__ttl{ margin:12px 0 0; font-size:clamp(15px,1.5vw,18px);
line-height:1.8; letter-spacing:.18em; color:var(--lp-on-dark-2); }
/* 9029：成果カードは上下に動かさない（フェードだけ残す）。
共通の .reveal が translateY(26px) を持っているので、このカードだけ打ち消す。 */
.lp-rescase.reveal{ transform:none; }
/* ---------- 07 成果（6件・写真なし）
ネイビーの面に白いカードを6枚（3列×2段）。写真を置かないぶん、
「何が変わったか」＝数字と一行が主役になるので、カードの下端でそこを揃える。 ---------- */
.lp-rescol{ margin-top:clamp(40px,4.6vw,64px);
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px);
grid-auto-rows:1fr; } /* 1fr＝2段目も1段目と同じ高さ。6枚すべて高さがそろう */
.lp-rescase{ display:flex; }
.lp-rescase__box{ display:flex; flex-direction:column; width:100%;
background:rgba(255,255,255,.96);
padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px) clamp(24px,2.4vw,32px); }
.lp-sec.is-dark .lp-rescase__no{ display:block; font-family:var(--display); font-style:italic;
font-weight:400; font-size:22px; line-height:1; color:var(--ink-3); }
.lp-sec.is-dark .lp-rescase__who{ margin:10px 0 0; font-family:var(--serif); font-weight:600;
font-size:20px; line-height:34px; letter-spacing:.04em; color:var(--ink); } /* 9008：PC/SP とも 20px / 34px */
.lp-sec.is-dark .lp-rescase__act{ margin:14px 0 clamp(20px,2.2vw,28px); font-size:14px; line-height:2;
letter-spacing:.02em; color:var(--ink-2); }
/* 結果ブロックはカードの下端に寄せて、3枚並んだときに横一線でそろえる */
.lp-rescase__res{ margin-top:auto; padding-top:clamp(16px,1.8vw,22px);
border-top:1px solid var(--line); }
.lp-sec.is-dark .lp-rescase__lbl{ display:block; font-family:var(--en); font-size:12px;
letter-spacing:.16em; line-height:1; color:var(--ink-3); }
/* 数値のある3件。大きく自慢はしないので、行を分けて静かに置く */
.lp-rescase__num{ margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; }
.lp-sec.is-dark .lp-rescase__num b{ font-family:var(--serif); font-weight:600;
font-size:clamp(18px,1.9vw,23px); line-height:1.5; letter-spacing:.03em; color:var(--ink-3); }
.lp-sec.is-dark .lp-rescase__num b.is-after{ color:var(--ink); }
.lp-rescase__num i{ display:inline-block; width:26px; height:1px; background:var(--ink-3);
position:relative; top:-6px; }
.lp-rescase__num i::after{ content:""; position:absolute; right:0; top:-2.5px;
width:6px; height:6px; border-top:1px solid var(--ink-3); border-right:1px solid var(--ink-3);
transform:rotate(45deg); }
/* 数値のない3件は、変わったことを文で置く */
.lp-sec.is-dark .lp-rescase__chg{ margin:12px 0 0; font-size:14px; line-height:1.95;
letter-spacing:.02em; color:var(--ink); }
@media(max-width:1000px){
.lp-rescol{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
/* スマホは縦に6枚積むと長いので、横スクロールで見せる。
scroll-padding-inline が無いと読み込み直後に scrollLeft が動いて1枚目が端に張り付く */
.lp-rescol{ display:flex; grid-template-columns:none; gap:14px;
overflow-x:auto; -webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory; scroll-padding-inline:30px;
padding-bottom:14px; scrollbar-width:thin; }
.lp-rescase{ flex:0 0 82%; scroll-snap-align:start; }
.lp-rescase__box{ padding:26px 22px 24px; }
/* 高さはそろえる（9013）が、SPは結果ブロックを下端まで送らない。
1枚ずつ見るスマホでは、本文と結果のあいだに大きな空白ができて壊れて見えるため、
余りはカード下端の余白に回す。 */
.lp-rescase__res{ margin-top:clamp(18px,5vw,24px); }
/* 端まで流れて見えるように、コンテナの左右padding（SPは pages.css で30px固定）ぶん外へ出す */
.lp-rescol{ margin-inline:-30px; padding-inline:30px; }
}
/* 実績カード（3列×2段）
組み立ては unnohouse.co.jp の施工事例カードを参考にした
＝写真 → 見出し → 短い説明 → 角丸のタグピル、の縦積み。写真は角丸なし。
※ 参考にしたのは並びと構造だけで、写真・文言はすべて自社のもの。
※ hover での画像拡大は使わない（全クライアント共通の方針）。リンクの反応は見出しの下線で示す。 */
.lp-workgrid{ margin-top:clamp(30px,3.4vw,48px);
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,52px) clamp(20px,2.6vw,40px); }
.lp-wcard{ display:block; }
.lp-wcard__media{ aspect-ratio:16/9; overflow:hidden; background:var(--fill); }
.lp-wcard__media img{ width:100%; height:100%; object-fit:cover; }
.lp-wcard__name{ margin:clamp(16px,1.8vw,22px) 0 0; font-family:var(--serif); font-weight:600;
font-size:clamp(16px,1.6vw,19px); line-height:1.7; letter-spacing:.04em;
color:var(--lp-on-dark); }
.lp-wcard:hover .lp-wcard__name{ text-decoration:underline; text-underline-offset:.32em;
text-decoration-thickness:1px; }
.lp-wcard__why{ margin:12px 0 0; font-size:14px; line-height:2; letter-spacing:.02em;
color:var(--lp-on-dark-2); }
.lp-wcard__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lp-wcard__tag{ font-style:normal; font-size:12px; letter-spacing:.08em; line-height:1;
padding:8px 13px; border-radius:999px;
border:1px solid color-mix(in srgb,var(--lp-on-dark) 34%,transparent);
color:color-mix(in srgb,var(--lp-on-dark) 82%,transparent); }
@media(max-width:1000px){ .lp-workgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .lp-workgrid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto;
gap:clamp(30px,7vw,44px); } }
/* ---------- スマホは本文の改行を効かせない
PCの読みやすさで入れた
は、幅が狭いと変な位置で切れる。
見出し（.lp-vert / .lp-feat__ttl / .lp-split__ttl）と、SP専用の .br-sp は残す。 ---------- */
@media(max-width:640px){
.lp-head__lead br:not(.br-sp),
.lp-intro__lead p br:not(.br-sp),
.lp-feat__lead br:not(.br-sp), .lp-feat__desc br:not(.br-sp),
.lp-statement__lead br:not(.br-sp), .lp-statement__sub br:not(.br-sp), .lp-statement__note br:not(.br-sp),
.lp-split__lead br:not(.br-sp),
.lp-step__desc br:not(.br-sp),
.lp-reason__body p br:not(.br-sp),
.lp-rescase__act br:not(.br-sp), .lp-rescase__chg br:not(.br-sp),
.lp-wcard__why br:not(.br-sp),
.lp-faq__a br:not(.br-sp){ display:none; }
}
/* 9014：スマホは #soudan の下余白を 150px（下部固定CTAとフォーム末尾が近すぎるため）
.lp-v2 .lp-sec（0,2,0）に勝つ必要があるので id で指定する */
@media(max-width:640px){
body.page-template-page-lp #soudan{ padding-bottom:150px; }
}
/* 9015：hoverで文字が消える問題。
共通の .btn:hover は background を直接 var(--ink) にするため、.btn--solid:hover の
--bg:transparent が効かず、文字色(ink)と背景(ink)が同色になって消える。
ヒーローのボタンだけは既に background:transparent を明示して回避していたので、同じ手当てをLP内にも入れる。 */
/* ※ .lp を頭に付けると .lp-hero__act .btn--solid:hover と同じ特異度(0,3,0)になり、
後に書いたこちらが勝ってヒーロー（暗い写真の上）の文字まで ink にしてしまう。
だから対象はフォームのボタンだけに限定する。 */
.lp-form .btn--solid:hover{
background:transparent; color:var(--ink); border-color:var(--ink); }
/* ---------- 08以降：テキストが続くので、左レール（見出し＋写真）＋右本体の2カラムにして
高さを詰め、あいだに全幅の写真帯を挟む ---------- */
.lp-split{ display:grid; grid-template-columns:minmax(240px,340px) minmax(0,1fr);
gap:clamp(40px,6vw,110px); align-items:start; }
.lp-split--rev{ grid-template-columns:minmax(0,1fr) minmax(240px,340px); }
.lp-split--rev .lp-split__rail{ order:2; }
.lp-split--narrow{ grid-template-columns:minmax(220px,300px) minmax(0,1fr); }
.lp-split__rail{ position:sticky; top:132px; }
.lp-split__ttl{ margin:14px 0 0; font-family:var(--serif); font-weight:500;
font-size:clamp(23px,2.8vw,36px); line-height:1.55; letter-spacing:.1em; }
.lp-split__lead{ margin:20px 0 0; font-size:14px; line-height:2.1; color:var(--ink-2); }
.lp-split__ph{ position:relative; margin:clamp(26px,3vw,40px) 0 0; aspect-ratio:4/5; }
.lp-split__ph--tall{ aspect-ratio:3/4.4; }
@media(max-width:900px){
.lp-split, .lp-split--rev, .lp-split--narrow{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); }
/* 既定の order は 0。1 だと本体より“後ろ”に回ってしまうので -1（＝見出しと写真をカードの上へ） */
.lp-split--rev .lp-split__rail{ order:-1; }
.lp-split__rail{ position:static; }
.lp-split__ph{ aspect-ratio:16/10; max-width:520px; }
.lp-split__ph--tall{ aspect-ratio:16/10; }
}
/* 後半3節は写真が入って情報量が上がるぶん、節の上下余白を詰めて間伸びさせない。
※ .lp-v2 .lp-sec（特異度0,2,0）に負けるので、同じ形で書く */
.lp-v2 .lp-flow, .lp-v2 .lp-reasons-sec, .lp-v2 .lp-faqsec{ padding-block:clamp(74px,8vw,112px); }
/* 全幅の写真帯（節と節のあいだの息継ぎ） */
.lp-band{ position:relative; height:clamp(300px,44vh,460px); overflow:hidden;
display:flex; align-items:center; background:var(--ink); }
.lp-band__media{ position:absolute; inset:0; }
.lp-band__media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.52); }
.lp-band__inner{ position:relative; z-index:1; width:100%; }
.lp-band__copy{ font-family:var(--serif); font-weight:500; color:var(--paper);
font-size:clamp(19px,2.6vw,32px); line-height:1.85; letter-spacing:.08em;
text-shadow:0 2px 18px rgba(0,0,0,.45); margin:0; }
/* ---------- 08 進め方 ---------- */
.lp-steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.lp-step{ display:grid; grid-template-columns:76px 1fr; gap:clamp(14px,2vw,32px);
padding:clamp(20px,2.2vw,30px) 0; border-bottom:1px solid var(--line); }
.lp-step--note{ border-bottom:0; }
.lp-step--note .lp-step__no{ color:var(--ink-3); }
.lp-step__no{ font-family:var(--display); font-style:italic; font-weight:400; font-size:28px;
line-height:1.3; color:var(--accent); }
.lp-step__en{ display:block; font-family:var(--en); font-size:16px; letter-spacing:.22em; color:var(--ink-3); }
.lp-step__ttl{ margin:8px 0 0; font-family:var(--serif); font-weight:600;
font-size:clamp(17px,1.9vw,22px); line-height:1.7; letter-spacing:.04em; }
.lp-step__desc{ margin:12px 0 0; font-size:14.5px; line-height:2.05; color:var(--ink-2); }
/* 未確定値のマーカー（現在は使用箇所なし。新しい仮値を置くときに使う） */
.tbd{ background:var(--accent-soft); border-bottom:1px dashed var(--accent);
padding:0 4px; color:var(--accent); }
@media(max-width:640px){ .lp-step{ grid-template-columns:56px 1fr; } .lp-step__no{ font-size:22px; } }
.lp-reasons{ border-top:1px solid var(--ink); }
.lp-reason{ display:grid; grid-template-columns:64px 1fr; gap:clamp(14px,2vw,30px);
padding:clamp(24px,2.8vw,38px) 0; border-bottom:1px solid var(--line); }
.lp-reason:last-child{ border-bottom:0; }
.lp-reason__no{ font-family:var(--display); font-style:italic; font-weight:400;
font-size:26px; line-height:1.3; color:var(--accent); }
.lp-reason__en{ display:block; font-family:var(--en); font-size:16px;
letter-spacing:.24em; color:var(--ink-3); }
.lp-reason h3{ margin:8px 0 0; font-family:var(--serif); font-weight:600;
font-size:22px; line-height:1.75; letter-spacing:.03em; } /* 9020：PC/SPとも22px */
.lp-reason p{ margin:12px 0 0; font-size:14px; line-height:2.05; color:var(--ink-2); }
@media(max-width:640px){ .lp-reason{ grid-template-columns:44px 1fr; } .lp-reason__no{ font-size:21px; } }
/* ---------- 09 FAQ ---------- */
.lp-faq{ margin:0; border-top:1px solid var(--line); }
.lp-faq__item{ border-bottom:1px solid var(--line); }
.lp-faq__q{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:16px;
padding:clamp(19px,2vw,25px) 44px clamp(19px,2vw,25px) 0; cursor:pointer; list-style:none;
font-family:var(--serif); font-weight:500; font-size:clamp(15px,1.6vw,18px); line-height:1.8;
position:relative; }
.lp-faq__q::-webkit-details-marker{ display:none; }
.lp-faq__mark{ font-family:var(--en); font-weight:500; color:var(--accent); font-size:15px;
letter-spacing:.1em; line-height:1.9; }
.lp-faq__q::after{ content:""; position:absolute; right:6px; top:50%; width:13px; height:13px;
border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease); }
.lp-faq__item[open] .lp-faq__q::after{ transform:translateY(-30%) rotate(-135deg); }
.lp-faq__a{ padding:0 44px clamp(24px,2.6vw,32px) 34px; }
.lp-faq__a p{ color:var(--ink-2); font-size:15px; line-height:2.1; margin:0; }
@media(max-width:640px){ .lp-faq__q{ padding-right:34px; } .lp-faq__a{ padding-inline:0; } }
/* ---------- 10 フォーム ---------- */
.lp-promise{ list-style:none; max-width:760px; margin:clamp(32px,4vw,48px) auto 0; padding:0; display:grid; gap:14px; }
.lp-promise li{ position:relative; padding-left:30px; font-size:15px; line-height:2; color:var(--ink-2); }
.lp-promise li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-size:13px; }
.lp-form{ max-width:760px; margin:clamp(40px,4.4vw,64px) auto 0;
background:var(--paper); border:1px solid var(--line);
padding:clamp(30px,3.6vw,56px) clamp(24px,3.4vw,56px); }
.lp-form .field input,.lp-form .field textarea,.lp-form .field select{ background:var(--paper); }
.lp-form .field textarea{ min-height:150px; }
.lp-form__note{ margin-top:22px; text-align:center; color:var(--ink-3); font-size:12px; line-height:1.9; }
.lp-form .form-status{ margin-top:18px; text-align:center; font-size:14px; }
/* ---------- スクロール後に追従するCTA（PC） ---------- */
.lp-stickycta{ position:fixed; top:22px; right:clamp(20px,3vw,44px); z-index:120;
display:inline-flex; align-items:center; gap:12px;
background:var(--ink); color:var(--paper);
font-family:var(--en); font-size:12.5px; font-weight:500; letter-spacing:.16em;
padding:14px 26px; border-radius:999px;
box-shadow:0 12px 30px -14px rgba(0,0,0,.65);
opacity:0; transform:translateY(-14px); pointer-events:none;
transition:opacity .45s var(--ease), transform .45s var(--ease),
background .3s var(--ease), color .3s var(--ease); }
.lp-stickycta.is-on{ opacity:1; transform:none; pointer-events:auto; }
.lp-stickycta:hover{ background:var(--paper); color:var(--ink); }
/* ---------- SP固定CTAバー ---------- */
.lp-fixcta{ display:none; }
@media(max-width:820px){
/* SPは下部の固定バーがあるので、右上の追従ボタンは出さない */
.lp-stickycta{ display:none; }
.lp-hero{ min-height:100svh; }
.lp-hero__inner{ padding-block:clamp(132px,32vw,180px) clamp(56px,14vw,80px); }
.lp-hero__title img{ width:100%; }
.lp-hero__lead{ font-size:15px; line-height:2.05; }
/* SPは文字が全幅に広がるので、横グラデより縦全体を効かせる */
.lp-hero::after{ background:linear-gradient(180deg,rgba(10,10,10,.60) 0%,rgba(10,10,10,.58) 34%,rgba(10,10,10,.78) 100%); }
.lp-scroll{ display:none; }
.lp-intro__ttl{ font-size:20px; letter-spacing:.14em; gap:20px; }
/* 帯の白背景は出さない（ボタンだけ浮かせる）。
背景を消しても帯そのものは残るので、そのままだと全幅でタップを吸ってしまう。
帯は pointer-events:none にして、ボタンにだけ auto を戻す。 */
.lp-fixcta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:90;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:transparent; border-top:0; pointer-events:none;
transition:transform .35s var(--ease); }
.lp-fixcta.is-hidden{ transform:translateY(120%); }
.lp-fixcta__btn{ display:flex; align-items:center; justify-content:center; gap:12px;
background:var(--ink); color:var(--paper); font-family:var(--en); font-size:13px;
letter-spacing:.14em; padding:16px 20px; border-radius:999px;
pointer-events:auto;
/* 背景の帯が無くなったぶん、写真や本文の上でも輪郭が残るように影を足す */
box-shadow:0 10px 30px -12px rgba(20,20,20,.55); }
body.page-template-page-lp .site-footer{ padding-bottom:84px; }
}
/* 動きを減らす設定では、写真のドリフトを止める */
@media(prefers-reduced-motion:reduce){
.lp-ph{ transition:none; opacity:1; transform:none !important; }
.lp-ph img, .lp-ph video{ width:100%; margin-left:0; transform:none !important; }
body.page-template-page-lp{ transition:none; }
}
/* =====================================================================
スマホの文字まわり調整（websupport 9028〜9039・2026-08-13）
※ ベース定義より後ろに置く。同じ特異度なら後に書いたほうが勝つため。
===================================================================== */
@media(max-width:640px){
/* 9035 / 9038 / 9039：節見出しの英字。字間は全部2pxへ。
サイズは12px→14px。ただし #flow・#faq のレール（16px指定）と
Results/Works の巨大表示（.lp-head--enbig）は特異度で勝つのでそのまま残る */
.lp-head__en{ font-size:14px; letter-spacing:2px; }
#flow .lp-split__rail .lp-head__en,
#faq .lp-split__rail .lp-head__en{ letter-spacing:2px; }
/* 9030：制作実績カードの社名 16px → 18px */
.lp-wcard__name{ font-size:18px; }
/* 9031：制作実績カードの間隔 30px → 40px */
.lp-workgrid{ gap:40px; }
/* 9032 / 9033：進め方 */
.lp-step__ttl{ font-size:18px; }
.lp-step__en{ font-size:14px; letter-spacing:2px; }
/* スマホは左レールの写真を視差で動かさない。
8994でリード文の改行を外して3行になったぶん写真との間が詰まり、
スクロール位置によって最大20px、文字の上に写真が乗っていた（実測）。
JSがインラインで transform を書くので !important で打ち消す。 */
.lp-split__ph{ transform:none !important; }
/* 9036 / 9037 / 9052：選んでいただく理由 */
.lp-reason__en{ font-size:14px; letter-spacing:2px; }
.lp-reason h3{ font-size:18px; line-height:31px; }
/* 9044：特徴3節のリード */
.lp-feat__lead{ font-size:15px; line-height:30px; }
/* 9051：進め方の説明文 */
.lp-step__desc{ font-size:14px; line-height:28px; }
}
/* ---------- 11 費用の目安（ダークグレー・横棒グラフ）
社長指示（2026-08-19）＝100万〜250万をざっくり伝える。
帯の左端・幅は PHP から --from / --w（%）で入る＝数字を変えれば図も追随する。 ---------- */
/* 大きな「100万円—250万円」は削除（社長指示 2026-08-19）。
金額はグラフの帯と目盛りが持つ＝同じ数字を2度出さない。 */
.lp-price__chart{ margin-top:clamp(40px,4.6vw,64px);
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
column-gap:clamp(16px,2vw,30px); row-gap:clamp(26px,3vw,40px); align-items:center; }
.lp-price__scale{ grid-column:1; position:relative; height:20px; }
.lp-price__scale span{ position:absolute; left:var(--at); transform:translateX(-50%);
font-family:var(--en); font-size:12px; letter-spacing:.1em; color:var(--lp-on-dark-2); }
.lp-price__scale span:first-child{ transform:none; }
.lp-price__scale span:last-child{ transform:translateX(-100%); }
.lp-price__track{ grid-column:1; position:relative; height:clamp(46px,4.8vw,58px); }
.lp-price__track::before{ content:""; position:absolute; inset:0;
background-color:var(--lp-bub);
background-image:linear-gradient(90deg,var(--lp-bub-bd) 1px,transparent 1px);
background-size:calc(100% / 3) 100%;
border-right:1px solid var(--lp-bub-bd); }
.lp-price__bar{ position:absolute; top:0; bottom:0; left:var(--from); width:var(--w);
background:var(--paper); display:flex; align-items:center; justify-content:center;
clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease) var(--d,0s); }
.lp-price__chart.is-in .lp-price__bar{ clip-path:inset(0 0 0 0); }
.lp-sec.is-dark .lp-price__bar b{ font-family:var(--serif); font-weight:600;
font-size:clamp(14px,1.5vw,18px); letter-spacing:.02em; color:var(--ink); white-space:nowrap; }
.lp-price__bar b i{ font-style:normal; font-size:.72em; margin-left:.15em; letter-spacing:.04em; }
.lp-price__note{ grid-column:2; position:relative;
background:var(--lp-bub); border:1px solid var(--lp-bub-bd);
padding:clamp(18px,1.9vw,24px) clamp(20px,2.2vw,28px); }
/* 吹き出しの先＝45°回した正方形の、外に出る2辺だけに枠を出す。
・枠の太さが辺のどこでも 1px になる（先端にもちゃんと枠が乗る）
・内側に入る残り半分が吹き出し自身の枠を隠す＝先が本体とつながって見える
border で三角を描く方式はこの2つがどちらも成立しない
（先端は地の三角に覆われて枠が消え、本体の枠が先の根元を縦に横切って別部品に見える）。
地は body の上に載るので必ず不透明トークン（--lp-bub / --lp-bub-bd）を使う。 */
.lp-price__note::after{ content:""; position:absolute;
width:16px; height:16px; background:var(--lp-bub); transform:rotate(45deg); }
@media(min-width:901px){
/* PC＝左向き（グラフのその行を指す）。左端の1px枠の上に中心を置く＝left:-9px */
.lp-price__note::after{ top:calc(50% - 8px); left:-9px;
border-left:1px solid var(--lp-bub-bd); border-bottom:1px solid var(--lp-bub-bd); }
}
@media(max-width:900px){
/* SP＝上向き（すぐ上の帯の中央を指す。--from/--w は帯と同じ値をPHPから受けている） */
.lp-price__note::after{ top:-9px; left:calc(var(--from) + var(--w) / 2 - 8px);
border-left:1px solid var(--lp-bub-bd); border-top:1px solid var(--lp-bub-bd); }
}
.lp-sec.is-dark .lp-price__note h3{ margin:0; font-family:var(--serif); font-weight:600;
font-size:clamp(15px,1.6vw,18px); line-height:1.8; letter-spacing:.04em; }
.lp-sec.is-dark .lp-price__note p{ margin:10px 0 0; font-size:14px; line-height:2;
letter-spacing:.02em; }
.lp-price__caveats{ list-style:none; margin:clamp(36px,4.2vw,58px) 0 0; padding:0;
display:grid; gap:10px; max-width:820px; }
.lp-sec.is-dark .lp-price__caveats li{ position:relative; padding-left:22px;
font-size:13px; line-height:1.95;
color:color-mix(in srgb,var(--lp-on-dark) 62%,transparent); }
.lp-price__caveats li::before{ content:"※"; position:absolute; left:0; top:0; }
.lp-price__act{ margin-top:clamp(34px,4vw,52px); justify-content:center; }
.lp-price__act .btn--solid{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper);
padding:clamp(17px,2vw,22px) clamp(30px,3.4vw,44px); }
.lp-price__act .btn--solid:hover{ --bg:transparent; background:transparent; color:var(--paper); }
@media(max-width:900px){
.lp-price__chart{ grid-template-columns:1fr; row-gap:0; }
.lp-price__scale,.lp-price__track,.lp-price__note{ grid-column:1; }
.lp-price__track{ margin-top:clamp(18px,3vw,24px); }
.lp-price__note{ margin:20px 0 clamp(26px,4vw,34px); }
.lp-price__note:last-of-type{ margin-bottom:0; }
}
@media(max-width:640px){
.lp-price__track{ height:44px; }
.lp-sec.is-dark .lp-price__bar b{ font-size:11.5px; letter-spacing:0; }
}
@media(prefers-reduced-motion:reduce){
.lp-price__bar{ clip-path:none; transition:none; }
}
/* =================================================================
実績カードのポップアップ（2026-08-21）
カードは （各社サイトへ）から