@charset "UTF-8"; /* ============================================================ part.css — 部位別ページ（キッチン／浴室／洗面／トイレ／給湯器）共通読み込み順：common.css → category.css → part.css（必ずこの順）方針：新規CSSは「既存部品で足りない分だけ」。・見出し / ボタン / 事例カード（.cards3 .workcard）/ 関連4枚（.cards4） / 流れ（.flow__scroller .flowstep）/ 替えどき（.perf-grid .perf-card） / リード（.concept__overlap）/ CTA / ヘッダー・フッターは既存部品を流用。・このファイルで足すのは 5つだけ：困りごと（.pt-troubles）／囲みパネル（.pt-panel）／価格リスト（.pt-prices）／よくある質問（.pt-faq）／小物（チップ・注記・年数・3列本文）・クラス名は他ページと衝突しないようすべて pt- 接頭辞。 ============================================================ */ /* ---- FVのパンくず（コンセプトの .concept-crumb と同じ扱い） ---- */ .pt-crumb{margin-bottom:clamp(18px,2.2vw,30px)} /* ---- FVの見出し（/ ）-------------------- .phead__title / .phead__tag は reform・renovation・concept と共有の部品。部位別ページだけに効かせるためでスコープする（コンセプトの .cpt と同じ作法）。clamp の上限だけ下げ、狭幅での縮み方は従来どおり保つ。 */ .pt .phead__title{font-size:clamp(30px,5.2vw,44px)} /* 68 → 44 */ .pt .phead__tag{font-size:clamp(15px,1.9vw,18px)} /* 24 → 18 */ /* ---- 小物 -------------------------------------------------- */ /* チップ（共有部品 .tag を並べる器。新規ページは最小12pxを守る） */ .pt-chips{display:flex;flex-wrap:wrap;gap:9px 10px} .pt-chips .tag{font-size:12px;padding:6px 14px;color:var(--ink)} /* ※注記（セクション末尾の小さな但し書き） */ .pt-note{font-size:15px;line-height:2;color:var(--sub);letter-spacing:.05em; text-align:center;margin-top:clamp(20px,2.4vw,30px)} .pt-note--left{text-align:left} /* #price の注記だけ右揃え（2026-08-27・コメント） */ .pt-note--right{text-align:right} /* 3カラムのカード本文（web-font-sizing：3列＝14px） */ .pt-desc{font-size:15px;line-height:1.95;letter-spacing:.05em;margin-top:11px} /* できること＝リンクではない紹介カード。見出しは事例カードより少し大きく */ .plan .workcard__title{font-size:clamp(17px,1.6vw,20px)} /* 替えどきの年数（.perf-card の中で使う大きな数字） ⚠ 特異度：category.css の `.perf-card p`(0,1,1) に勝たせるため必ず `.perf-card .pt-yrs`(0,2,0) で書く（.pt-yrs 単独では負ける）。 */ .perf-card .pt-yrs{font-family:var(--num);font-weight:300;color:var(--ink); font-size:clamp(30px,3.4vw,42px);line-height:1.1;letter-spacing:.04em;margin:14px 0 12px} .perf-card .pt-yrs small{font-size:14px;letter-spacing:.08em;margin-left:3px} /* 年数で言い切れないもの（キッチン本体など）は数字を置かず、和文で同じ位置に */ .perf-card .pt-yrs--txt{font-family:var(--sans);font-weight:500; font-size:clamp(18px,2vw,23px);letter-spacing:.08em;line-height:1.6} .perf-card .pt-yrs + p{margin-top:0} /* 替えどきカードは「数字」と「和文」が混ざる。和文のほうが行の高さが低いので、そのカードだけ本文の頭が上にずれる（トイレで実測10px）。数字1行ぶんの高さを最低限として確保し、上下中央に置いて頭をそろえる。 ⚠ 数字側は clamp(30px,3.4vw,42px) × line-height 1.1。同じ式をここで再掲する。 */ .pt-timing-box .pt-yrs--txt{min-height:calc(clamp(30px,3.4vw,42px) * 1.1); display:flex;align-items:center;justify-content:center} /* お風呂の「寒さ」3枚は3つとも和文（数字ではない）。1枚だけ2行に折り返すとその下の本文の開始位置がずれるので、2行ぶんの高さを先に確保して頭をそろえる。 ⚠ キッチンは数字2枚＋和文1枚なので当てない（body.bt にだけ効かせる）。 */ .bt .pt-timing-box .pt-yrs--txt{min-height:calc(1.6em * 2); display:flex;align-items:center;justify-content:center} /* リード（.concept__box）の中に置くチップ列の下余白 */ .intro .pt-chips{margin-bottom:clamp(24px,2.6vw,32px)} /* ---- 1 困りごと（TROUBLES） -------------------------------- 面＋角丸のカード。文頭にアクセントの短い線（アイコンは使わない）。 */ .pt-trouble{background:var(--white);border-radius:var(--radius); padding:clamp(24px,2.6vw,34px)} .section-white .pt-trouble{background:var(--bg)} .pt-trouble::before{content:"";display:block;width:26px;height:1px; background:var(--accent2);margin-bottom:16px} .pt-trouble p{font-size:15px;line-height:2;letter-spacing:.05em} /* ---- 2 囲みパネル（補足の1枚・chips入りも） ------------------ */ .pt-panel{background:var(--white);border-radius:var(--radius); padding:clamp(26px,3vw,42px);margin-top:clamp(20px,2.4vw,30px); display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px)} .section-white .pt-panel{background:var(--bg)} /* 写真つき（左に写真・右に本文） */ .pt-panel--media{grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(24px,3vw,44px);align-items:center} .pt-panel__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)} .pt-panel__media img{width:100%;height:100%;object-fit:cover} .pt-panel__title{font-size:clamp(17px,1.9vw,21px);font-weight:500; letter-spacing:.08em;line-height:1.7} /* 背景を敷かず、見出しを上下の罫で挟む形（2026-08-29・warranty の「他社で工事された設備でも」）。 ⚠ `.section-white .pt-panel{background:var(--bg)}`(0,2,0) に勝つ必要があるので、打ち消しも**同じ詳細度で・この下に**書く。`.pt-panel--plain{background:none}` だけでは負ける。 */ .pt-panel--plain{background:none;padding:0;border-radius:0} .section-white .pt-panel--plain, .section-paper .pt-panel--plain{background:none} .pt-panel--plain .pt-panel__title{text-align:center; padding:clamp(14px,1.6vw,20px) 0;margin-bottom:clamp(4px,0.8vw,10px); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* 見出しが中央なので本文も中央に寄せる（1文なので読みにくくならない）。 */ .pt-panel--plain .pt-panel__body{text-align:center} .pt-panel__body{font-size:15px;line-height:2.05;letter-spacing:.05em} .pt-panel__body + .pt-chips{margin-top:2px} /* ---- 3 費用の目安（価格リスト） ----------------------------- 表組みにせず「1行＝1商品」。上段に商品名と金額、下段に仕様。 */ .pt-prices{border-top:1px solid var(--line)} .pt-price{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:baseline;gap:6px clamp(16px,2vw,28px); padding:clamp(20px,2.2vw,26px) 2px;border-bottom:1px solid var(--line)} .pt-price__name{font-size:16px;font-weight:500;letter-spacing:.08em;line-height:1.6} .pt-price__fig{display:flex;align-items:baseline;gap:10px;white-space:nowrap} .pt-price__amount{font-family:var(--num);font-size:clamp(20px,2.2vw,26px); font-weight:400;letter-spacing:.02em;line-height:1.2} .pt-price__unit{font-size:12.5px;color:var(--sub);letter-spacing:.06em} .pt-price__term{font-size:12.5px;color:var(--sub);letter-spacing:.06em} .pt-price__spec{grid-column:1 / -1;font-size:12.5px;line-height:1.9; color:var(--sub);letter-spacing:.05em} /* ---- 4 よくある質問（details＝JSなしの開閉） ----------------- */ .pt-faq{max-width:960px;margin-inline:auto;border-top:1px solid var(--line)} .pt-faq__item{border-bottom:1px solid var(--line)} .pt-faq__q{list-style:none;cursor:pointer;position:relative; display:block;padding:clamp(20px,2.2vw,26px) 46px clamp(20px,2.2vw,26px) 0; font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.07em; transition:color .3s ease} .pt-faq__q::-webkit-details-marker{display:none} .pt-faq__q:hover{color:var(--accent)} /* ＋ / －は疑似要素の2本線で描く（アイコン画像は使わない） */ .pt-faq__q::before, .pt-faq__q::after{content:"";position:absolute;right:6px;top:50%; width:15px;height:1px;background:var(--ink);transition:transform .3s ease,background .3s ease} .pt-faq__q::after{rotate:90deg} .pt-faq__item[open] .pt-faq__q{color:var(--accent)} .pt-faq__item[open] .pt-faq__q::before, .pt-faq__item[open] .pt-faq__q::after{background:var(--accent)} .pt-faq__item[open] .pt-faq__q::after{rotate:0deg} .pt-faq__a{padding:0 46px clamp(24px,2.6vw,30px) 0} .pt-faq__a p{font-size:15px;line-height:2.1;letter-spacing:.05em;color:var(--ink)} .pt-faq__a p + p{margin-top:14px} /* ---- 5 ショールーム（.cards4 の中の展示台数） ---------------- */ .pt-count{font-family:var(--num);color:var(--accent);font-size:15px; letter-spacing:.04em;margin-right:4px} /* カード群の下に置くボタン列（.center-more と同じ間隔にそろえる） */ /* ⚠ **`.cards3` にはこの規則が無く、ボタンがカードにくっついていた**（2026-08-31）。実測＝1440px / 375px とも余白 **28px**。`.cards4` と同じ値をあてて 88px / 68px に。 ⚠ 効くのは `.cards3` の**直後**に `.btn-row` がある並びだけ＝**realestate と loan の2ページ** （全ページを数えて確認した。ほかは `.cards3` の後ろに別の要素が入る）。 */ .cards3 + .btn-row, .cards4 + .btn-row{margin-top:clamp(40px,5vw,60px)} /* ---- 6 FVのリード（本文が長いページの導入・2026-08-26） -------- */ .pt-phead__lead{margin-top:clamp(18px,2vw,28px);display:grid;gap:clamp(10px,1.1vw,15px)} .pt-phead__lead p{font-size:clamp(15px,1.5vw,16px);line-height:2.1;letter-spacing:.07em; color:var(--sub);font-weight:300} /* 旧「リードの重ね組版（.pt-intro）」は 2026-08-27 に廃止。1カラム中央寄せ（.pt-lead）に置き換えた */ /* ---- 8 強調 --------------------------------------------------- 2026-08-27：本文の太字はやめた（AIっぽく見えるため）。本文はすべて同じウエイトで置く。は使わない前提だが、万一入っても太らないように inherit で押さえておく。 */ .pt strong{font-weight:inherit;color:inherit} /* ---- 9 困りごとカードの見出し ---------------------------------- */ .pt-trouble__title{font-size:clamp(15px,1.5vw,17px);font-weight:500; letter-spacing:.07em;line-height:1.75;margin-bottom:10px} .pt-trouble__title + p{font-size:15px;color:var(--sub)} /* ---- 10 目安の式（身長÷2＋5cm） -------------------------------- */ .pt-formula{display:grid;justify-items:center;gap:9px;text-align:center; padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--radius)} .pt-formula__label{font-size:12px;letter-spacing:.16em;color:var(--sub);line-height:1.6} .pt-formula__exp{font-family:var(--num);font-weight:300;color:var(--ink); font-size:clamp(26px,3.2vw,38px);letter-spacing:.06em;line-height:1.25} .pt-formula__exp small{font-size:.48em;letter-spacing:.06em;margin-left:3px} .pt-formula__note{font-size:15px;letter-spacing:.06em;color:var(--sub);line-height:1.8} /* ---- 11 商品ラインナップ（費用の目安）------------------------ カード型。割引率（○%OFF）は出さない。出すのは「メーカー／サイズ／工期／商品名／工事費込の税込価格／仕様」だけ。 */ .pt-included{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:12px clamp(16px,2vw,26px);max-width:1120px; margin:0 auto clamp(30px,3.4vw,48px); padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,32px); border:1px solid var(--line);border-radius:var(--radius)} .pt-included__title{font-size:15px;font-weight:500;letter-spacing:.1em;color:var(--ink)} .pt-included .pt-chips{justify-content:center} /* 1段の横スライド（2026-08-26）。「4件＋前後半分」＝画面に 5枚ぶんの幅が入るようにカード幅を決める。 pad + f枚 + f個のgap + 半分 = 100vw、pad=(card+gap)/2 を解いて card = (100vw − (f+0.5)×gap) ÷ (f+1) ※f＝完全に見える枚数送り・進捗バーは既存の [data-scroller]（main.js）を流用＝新規JSなし。枠は .flow__scroller を共用（100vw全幅・右端フェード・丸ボタン）。 ⚠ 右端フェードは白固定なので、この節は必ず section-white に置くこと。 */ /* 2026-08-27：1枚ずつの送り（カクカク）をやめ、右から左へゆったり連続で流す（リピート）。TOPの .works-marquee と同じ作り。 ⚠ 継ぎ目を出さないため、カードの間隔は gap ではなく margin-right で取る。 gap だと「1組＋間隔」と「全体の50%」がずれて、1周ごとに継ぎ目が動く。 ⚠ 器の overflow:hidden は天地も切る。「工事費込」の円が上へ11px出るので padding-top を確保しておく。 */ .pt-lineup-marquee{width:100vw;margin-inline:calc(50% - 50vw); overflow:hidden;padding-top:18px} .pt-lineup{--gap:clamp(14px,1.6vw,26px); --card:calc((100vw - 4.5 * var(--gap)) / 5); /* f=4 */ --zig:60px; display:flex;align-items:stretch;width:max-content; animation:pt-lineup-flow 70s linear infinite;will-change:transform} .pt-lineup-marquee:hover .pt-lineup{animation-play-state:paused} .pt-item{margin-right:var(--gap)} @keyframes pt-lineup-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.pt-lineup{animation:none}} /* 流れる枠の中のカードに .reveal を残すと、画面外のカードが opacity:0 のまま居座る。マークアップから外してあるが、念のため無効化しておく。 */ .pt-lineup .pt-item.reveal{opacity:1;transform:none;transition:none} /* ⚠ カードは overflow:visible。「工事費込」の円がサムネイル左上から外へはみ出すため（2026-08-27）。角丸のクリップは .pt-item__media 側に移してある。 */ /* 2026-08-27：カードはジグザグ（偶数を60px下げる）。 translate ではなく上下マージンで段差をつける。align-items:stretch のまま「行の高さ − マージン」が各カードの高さになるので、段違いにしても高さは揃い、枠の外へはみ出して切れることもない。 */ .pt-lineup .pt-item:nth-child(odd){margin-bottom:var(--zig)} .pt-lineup .pt-item:nth-child(even){margin-top:var(--zig)} /* ⚠ 2026-09-26：管理画面から入れる帯（parts/feature-block-lineup.php）は、上下を nth-child ではなく **入力の順番** から決めて、この2つのクラスで指定する。同じ並びを2組置く作りなので、1組が奇数枚だと nth-child は継ぎ目で上下が入れ替わる。詳細度を上げる（クラス3つ）＋ソース順で、上の nth-child に確実に勝たせる。 */ .pt-lineup .pt-item.pt-item--down{margin-bottom:var(--zig);margin-top:0} .pt-lineup .pt-item.pt-item--up{margin-top:var(--zig);margin-bottom:0} .pt-item{position:relative;flex:0 0 var(--card);display:flex;flex-direction:column; background:var(--white);border-radius:var(--radius-lg);overflow:visible; padding-bottom:clamp(18px,1.8vw,24px); --pad:clamp(14px,1.4vw,20px)} .section-white .pt-item{background:var(--bg)} .pt-item__media{aspect-ratio:4/3;overflow:hidden;background:#fff; border-radius:var(--radius-lg) var(--radius-lg) 0 0} .pt-item__media img{width:100%;height:100%;object-fit:cover} /* メーカー名の長短（TOTO／クリナップ）で行数が変わると、カードごとに価格の高さがズレる。メーカーは必ず1行目、サイズ・工期は2行目に固定する。 */ .pt-item__head{display:grid;justify-items:start;gap:9px; padding:clamp(14px,1.6vw,20px) var(--pad) 0} .pt-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px} .pt-item__maker{font-size:12px;letter-spacing:.08em;line-height:1;color:#fff; background:var(--ink);border-radius:999px;padding:6px 11px;white-space:nowrap} .pt-item__data{display:flex;align-items:center;gap:6px;white-space:nowrap; font-size:12px;letter-spacing:.05em;color:var(--ink)} .pt-item__data dt{font-size:12px;color:var(--sub);letter-spacing:.06em; border:1px solid var(--line);border-radius:3px;padding:3px 6px;line-height:1} .pt-item__name{font-size:clamp(16px,1.45vw,21px);font-weight:500;letter-spacing:.06em; line-height:1.6;padding:11px var(--pad) 0} .pt-item__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px; padding:7px var(--pad) 0} .pt-item__amount{font-family:var(--num);font-weight:400;color:var(--accent); font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:0} .pt-item__unit{font-size:12px;color:var(--ink);letter-spacing:.04em;white-space:nowrap} /* 「工事費込」＝オレンジの円。サムネイルの左上に少しはみ出して載せる。 ⚠ .pt-item__media は overflow:hidden（写真の角丸クリップ）なので、バッジはその中に入れると欠ける。必ず .pt-item 直下に置く。 */ .pt-item__incl{position:absolute;z-index:2;top:-11px;left:-11px; width:clamp(54px,4.6vw,62px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center; background:var(--accent);color:var(--white); font-size:clamp(12px,.82vw,11px);font-weight:500;line-height:1; letter-spacing:.01em;white-space:nowrap;} .pt-item__spec{font-size:12px;line-height:1.9;color:var(--sub);letter-spacing:.03em; padding:10px var(--pad) 0;margin-top:auto} /* できることカードは本文が2段落になった */ .pt-desc + .pt-desc{margin-top:12px} /* ---- 12 長いリードの幅（部位別ページ）------------------------ common の .sec-head.center .sec-lead は max-width:680px。リライト後の本文は1文が長く、行末に1〜2文字だけ残る折り返しが出るため部位別ページだけ広げる（.pt スコープ）。 */ .pt .sec-head.center .sec-lead{max-width:clamp(680px,64vw,920px)} /* 注記をカード群とボタン行のあいだに挟んだとき、 .cards4 + .btn-row の間隔指定が効かなくなるので同じ値を持たせる */ .pt-note + .btn-row{margin-top:clamp(28px,3.2vw,42px)} /* ---- 13 短縮版（2026-08-26 第2稿）で足した分 ------------------ */ /* 替えどきが4枚→3枚になった。 ⚠ .perf-grid--3(0,1,0) は category.css の @768/@560 の .perf-grid(0,1,0) にソース順（part.css が後）で勝ってしまう＝SPまで3列になる。下のレスポンシブ節で必ず打ち消すこと。 */ .perf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} /* 節の締めの1行（困りごとカードの下） */ .pt-close{text-align:center;color:var(--sub);letter-spacing:.05em; font-size:clamp(15px,1.6vw,16px);line-height:2.1; margin-top:clamp(30px,3.4vw,44px)} .pt-close strong{color:inherit;font-weight:inherit} /* 事例カードの「暮らしがどう変わったか」の1行（見出しと市区町村のあいだ） */ .pt-voice{font-size:15px;line-height:1.95;letter-spacing:.05em; color:var(--sub);margin:9px 0 2px} /* ============================================================ レスポンシブ（※上書きは必ずベース定義より後＝ここ） ============================================================ */ /* ⚠ 重ね組版は 1201px 以上でだけ使う。 1200px 以下は写真の列が細くなり、写真が縦長に潰れて見出しも3行に割れるため、 common.css の縦積み（@880）と同じ形をここで前倒しして当てる。 */ @media (max-width:1200px){ .pt-intro .concept__overlap{display:flex;flex-direction:column;align-items:stretch;min-height:0} .pt-intro .concept__photo{grid-area:auto;width:100%;aspect-ratio:16/10; min-height:0;align-self:auto} .pt-intro .concept__box{grid-area:auto;position:relative;top:auto;bottom:auto;left:auto; height:auto;transform:none;width:88%;max-width:none;margin:-56px auto 0;z-index:2} } @media (max-width:900px){ .pt-panel--media{grid-template-columns:1fr} .pt-panel--media .pt-panel__media{aspect-ratio:16/9} } /* 商品ラインナップ：狭くなるほど「完全に見える枚数(f)」を減らす。 4件のまま狭めると1枚70px前後になり、写真も価格も読めなくなるため。 */ @media (max-width:1180px){ .pt-lineup{--card:calc((100vw - 3.5 * var(--gap)) / 4)} } /* f=3 */ @media (max-width:860px){ .pt-lineup{--card:calc((100vw - 2.5 * var(--gap)) / 3)} } /* f=2 */ @media (max-width:600px){ .pt-lineup{--card:calc((100vw - 1.5 * var(--gap)) / 2)} } /* f=1 */ @media (max-width:768px){ .perf-grid--3{grid-template-columns:1fr 1fr} /* ← category.css @768 と同じ値を再掲 */ .pt-price{grid-template-columns:1fr;gap:8px} .pt-price__fig{justify-content:flex-start} .pt-included{flex-direction:column;align-items:flex-start;gap:12px} .pt-included .pt-chips{justify-content:flex-start} } @media (max-width:560px){ .perf-grid--3{grid-template-columns:1fr} /* ← category.css @560 と同じ値を再掲 */ } @media (max-width:600px){ /* ⚠ 上の `.pt .phead__title`(0,2,0) は category.css の @600(0,1,0) にベースで勝ってしまう＝SPまで44pxになる。SPの値もここで指定し直す（コンセプト concept.css のと同じ対処）。 */ .pt .phead__title{font-size:23px;line-height:40px} .pt .phead__tag{font-size:15px} .pt-trouble{padding:22px 24px} .pt-trouble p{font-size:15px;line-height:1.95} .pt-desc{font-size:15px} .pt-price__name{font-size:15px} .pt-faq__q{font-size:15px;padding-right:36px} .pt-faq__a{padding-right:0} .pt-faq__a p{font-size:15px;line-height:2} .pt-note{text-align:left} /* ⚠ 修飾クラスは同特異度＝ソース順で負ける。SPでも右揃えを保つため再掲する（part.css の @600 に再掲する罠はこれで4度目） */ .pt-note--right{text-align:right} /* 3列カードは1列に（.cards3 は common 側で対応済みだが、 .pt-desc を持つ非リンクカードでも同じ間隔にそろえる） */ .plan .cards3{gap:34px} .pt-phead__lead p{font-size:15px;line-height:2} /* ⚠ 上の .pt-intro .concept__title(0,2,0) は category.css @600 の .intro .concept__title(0,2,0) にソース順で勝つ。の値をここで再掲する。 */ .pt-intro .concept__title{font-size:26px;line-height:44px} .pt-quotes li{font-size:15px} .pt-trouble__title{font-size:15px} .pt-trouble__title + p{font-size:15px} .pt-voice{font-size:15px} .pt-item__name{font-size:18px} .pt-item__amount{font-size:26px} .pt-item__spec{font-size:12px} .pt-formula__exp{font-size:26px} } /* ---- 15 半円に沿う英字ラベル（#troubles）-------------------------- 2026-08-27：Troubles → "Do you have these concerns?" を半円に沿わせる。.eyebrow の text-transform:uppercase は当てない（指定された大小をそのまま出す）。SVG の textPath で描く。 */ .eyebrow--arc{display:block;width:min(320px,84vw);margin-inline:auto; text-transform:none;line-height:0} .eyebrow--arc svg{width:100%;height:auto;overflow:visible} .eyebrow--arc text{fill:var(--accent);font-family:var(--en); font-size:15px;font-weight:500;letter-spacing:.12em} /* ---- 16 リードのボタン（楕円・中央寄せ）--------------------------- 2026-08-27（コメント）。.intro__btn は既定が justify-content:space-between（矢印を右端に置くため）なので、矢印を外したこの形では中央寄せに戻す。 */ .intro__btn--pill{justify-content:center;text-align:center;border-radius:999px} /* ---- 17 「できること」をTOPのナビカード意匠に --------------------- 2026-08-27（コメント）。.navcard 系は common.css に移設済み。 ⚠ ここのカードはリンクではないので View More は付けない。 ⚠ TOPは4列・和文4〜5字だが、ここは3列・和文10〜13字。そのままの28pxだと縦組みが写真から溢れるので、この節だけ字を落として字間を詰める。 */ .pt-navcards .navcard__ja{font-size:clamp(17px,1.45vw,21px);letter-spacing:.14em} .pt-navcards .navcard__cap{font-size:15px} @media (max-width:880px){ .pt-navcards{grid-template-columns:1fr 1fr} .pt-navcards .navcard__ja{font-size:18px;letter-spacing:.12em} } @media (max-width:560px){ .pt-navcards{grid-template-columns:1fr} /* ⚠ ここを 4/3 にすると写真が低くなり、10〜13字の縦組みが2列に折れる。縦長(3/4)のまま置くこと。 */ .pt-navcards .navcard__ja{font-size:17px;letter-spacing:.1em} } /* ---- 18 こんなお悩み＝家型カードを右から左へ流す -------------------- 2026-08-27：コンセプトの「想いを、かたちにするために」と同じ家型カード（.vhouse）にして、ゆったり連続で流す（リピート）。 ⚠ .vhouse の flex-basis は 100% を含む式なので、ここで必ず上書きする。 ⚠ 間隔は gap ではなく margin-right（-50%の継ぎ目をぴたりと合わせるため）。 */ .pt-troubles-marquee{--zig:60px;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden; /* イラストは 2026-08-27 に廃止。足元用に取っていた地の余白も畳んだ。 ⚠ 器は overflow:hidden。将来また要素をはみ出させるなら、はみ出し量より大きい余白をここで確保する。 */ padding-block:clamp(10px,1.2vw,16px)} .pt-troubles-track{display:flex;align-items:stretch;width:max-content; animation:pt-troubles-flow 40s linear infinite;will-change:transform} .pt-troubles-marquee:hover .pt-troubles-track{animation-play-state:paused} .pt-troubles-track .vhouse{flex:0 0 clamp(236px,21vw,300px); margin-right:clamp(14px,1.6vw,24px)} /* 2026-08-27：カードはジグザグ（偶数を60px下げる）。費用の目安（.pt-lineup）と同じ作法。 ⚠ translate ではなく上下マージンでつける。align-items:stretch のまま「行の高さ − マージン」が各カードの高さになるので、段違いにしても**高さは揃う**。 ⚠ 1組6枚＝偶数なので、2組目（7枚目〜）も奇数始まりのまま。-50%の継ぎ目はずれない。 */ .pt-troubles-track .vhouse:nth-child(odd){margin-bottom:var(--zig)} .pt-troubles-track .vhouse:nth-child(even){margin-top:var(--zig)} .pt-troubles-track .vhouse h3{margin-top:0} /* ⚠ .vhouse の面は既定が var(--bg)。この節は section-paper（＝同じ --bg）なのでそのままだと家の形が地に溶けて見えない。既存カードと同じく地色で反転させる。 */ .pt-troubles-track .vhouse::before{background:var(--white)} .section-white .pt-troubles-track .vhouse::before{background:var(--bg)} @keyframes pt-troubles-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.pt-troubles-track{animation:none}} /* ---- 19 FV：全面写真＋中央寄せの見出し --------------------------- 2026-08-27：回転バッジを廃止し、写真を全面に敷く型に。実測＝写真は全面(object-fit:cover)・高さは幅の約39%・見出しは上下中央・英字36px/和文14pxの中央寄せ・白文字。 ⚠ このページの
からは `solid` を外すこと（写真の上に透過で乗せる）。 ⚠ 写真の明るさに左右されるので暗幕は必須。上下を濃く、中央を薄くしている。 */ .page-hero--cover{position:relative;display:grid;place-items:center;overflow:hidden; height:clamp(440px,39vw,640px);background:var(--ink)} /* 2026-08-28：中心から広がる黒い楕円は削除し、写真全体に均一のグレーを1枚かける。 ⚠ 暗幕は「写真を見て決める」のではなく実測して決める。 ⚠ ここは16ページ共通。素の写真は 16ページ中5ページで文字の裏に真っ白(255,255,255)の画素があり、白文字のコントラストは 1.0:1 まで落ちる。均一の1枚でこれを 4.5:1 まで持ち上げるには「濃さ」が要る。実測（16ページ×4要素＝64点、文字を消して地の最悪画素で測定）: #3C3C3C α.50 → 最悪2.70:1（4.5以上は6/64） #3C3C3C α.60 → 最悪3.45:1（11/64） #3C3C3C α.65 → 最悪3.94:1（23/64） #3C3C3C α.70 → 最悪4.51:1（**64/64**） ← 採用これより薄いグレーにすると必要なαは上がる（#5A5A5A では α.83 でようやく届く＝写真が残らない）。 ⚠ 局所のグラデーション（中央の楕円・左下の角・上下の帯）は全部やめた。1枚に統一している。 */ .page-hero--cover::after{display:block;content:"";position:absolute;inset:0;z-index:1; pointer-events:none; background:rgba(60,60,60,.70)} .phero__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .phero__center{position:relative;z-index:2;text-align:center;color:#fff; padding-inline:var(--gut);max-width:960px} .page-hero--cover .phead__cat{display:block;color:rgba(255,255,255,.86); font-size:clamp(12px,1.3vw,14px);letter-spacing:.22em;line-height:1.6} /* ⚠ /の「太さ 300」は全ページ共通なのでここも合わせる。文字サイズ（48px / 18px）は写真の上に載せる別設計としてこのまま残す。 */ .page-hero--cover .phead__title{color:#fff;font-size:clamp(28px,3.8vw,48px); font-weight:300;line-height:1.4;letter-spacing:.08em;margin-top:clamp(12px,1.4vw,18px)} .page-hero--cover .phead__tag{color:rgba(255,255,255,.94); font-size:clamp(15px,1.5vw,18px);line-height:1.9;letter-spacing:.08em; margin-top:clamp(12px,1.4vw,18px);font-weight:300} /* パンくずは写真の左下に白で置く（中央の見出しとぶつけない） */ .crumb--onphoto{position:absolute;z-index:2;left:var(--gut);bottom:clamp(18px,2vw,28px); margin:0;color:rgba(255,255,255,.8)} .crumb--onphoto a{color:rgba(255,255,255,.8)} .crumb--onphoto a:hover{color:#fff} .crumb--onphoto .cur{color:#fff} @media (max-width:600px){ .page-hero--cover{height:clamp(380px,86vw,460px)} .crumb--onphoto{font-size:12px} } /* ---- 20 リード：1カラム・中央寄せ（旧2カラムの置き換え）----------- 2026-08-27。参考サイトと同じく「静かな中央寄せの一段落」。イラストは英字ラベルの上に置く。写真は本文の下に全幅で敷く。 */ .pt-lead{text-align:center} .pt-lead__body{max-width:780px;margin-inline:auto} /* 2026-08-27：少し左右に動かす。振れ幅は絵の幅の約5%（76px時で±4px）。 ⚠ ゆっくり・小さく。速い/大きいと「バグっている」ように見える。 ⚠ 動きを減らす設定の人には止める。 */ .pt-lead__illust{width:clamp(56px,5.4vw,76px);height:auto;margin:0 auto clamp(18px,2vw,26px); display:block;opacity:.9; animation:pt-illust-sway 5.2s ease-in-out infinite;will-change:transform} @keyframes pt-illust-sway{ 0%,100%{transform:translateX(-4px)} 50% {transform:translateX(4px)} } @media (prefers-reduced-motion:reduce){.pt-lead__illust{animation:none}} .pt-lead .concept__title{font-size:clamp(23px,2.4vw,34px);line-height:1.66;margin:14px 0 26px} .pt-lead .pt-quotes{justify-items:center;margin-bottom:clamp(20px,2.2vw,26px)} .pt-lead .concept__lead + .concept__lead{margin-top:-14px} .pt-lead .intro__links{max-width:360px;margin-inline:auto;margin-top:clamp(24px,3vw,38px)} /* 両サイド5%の余白・角丸・下の節に80px重ねる。 ⚠ 重ねるぶんは負の margin-bottom で作る（transform だと下の節の余白が動かない）。 ⚠ さらに .pt-lead の padding-bottom を 0 にする。150px の下余白が残ったままだと負の margin を食い切って、写真は節の境界より 70px 上で終わる＝1px も重ならない。下の節側に z-index が無いので、写真が上に乗る。 */ .pt-lead{--pt-overlap:clamp(40px,5.5vw,80px);padding-bottom:0} .pt-lead__photo{margin-top:clamp(48px,6vw,84px); width:90%;margin-inline:auto;position:relative;z-index:2; margin-bottom:calc(-1 * var(--pt-overlap)); aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius-lg)} /* ⚠ 要素セレクタなので、中身を img から video に替えると枠の指定が黙って外れる。 2026-08-28、資金計画のリードを動画にしたら 1280×720 が素のまま出て、 21:9 の枠（overflow:hidden）からはみ出して切れた。video も必ず並べて書く。（.phero__media と .concept__photo は最初から video を併記してある） */ .pt-lead__photo img, .pt-lead__photo video{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:600px){ .pt-lead__photo{aspect-ratio:16/10} } /* ---- 21 「お悩み」と「替えどき」を1つの節に ----------------------- 2026-08-27。お悩みの締めから縦線で「そろそろ替えどき？」へつなぎ、その下の3枚は白いボックスに入れる。地はクリームのまま（白ボックスを立たせるため）。 */ .pt-connect{display:block;width:1px;height:clamp(56px,7vw,96px); margin:clamp(30px,3.6vw,46px) auto clamp(30px,3.6vw,46px); background:linear-gradient(180deg,var(--line) 0%,var(--accent2) 100%)} /* 円がカードの上辺から半分はみ出すので、そのぶん見出しとの間を空ける（2026-08-27） */ .troubles #timing{margin-bottom:calc(clamp(28px,3.4vw,44px) + clamp(37px,3.5vw,48px))} /* 2026-08-27（2回目）：外側の白いボックスはやめ、カード1枚ずつを白にする。 ⚠ 器の背景を消したので、カード側で白を明示する（.section-paper .perf-card 頼みにしない）。 --tic ＝円アイコンの直径。カードの上余白の計算にも使うので器に置いて継承させる。 */ .pt-timing-box{--tic:clamp(74px,7vw,96px);background:none;border-radius:0;padding:0} /* カードの枠線をなくす。地はクリーム、カードは白なので線が無くても面で読める。 ⚠ コメントの対象は1枚目だが、同じ並びの3枚は同じ姿にする（1枚だけ線が残ると壊れて見える）。ただし .perf-card 全体には当てない＝この器の中だけに閉じる。 */ .pt-timing-box .perf-card{background:var(--white);border:0} /* 写真が重なるぶん、次の節の上を空ける。重なり量は .pt-lead と同じ値を使う。 */ .pt-lead + .section{padding-top:calc(var(--sec-pad) + clamp(40px,5.5vw,80px))} /* ⚠ 上の2行は「写真が下の節に重なる」前提。写真だけ外すと下余白0のまま次の節が 80px余分に空き、本文が節の底に張りつく。リードから写真を外すときは、通常の余白リズムに戻す修飾クラスを「この2行より下に」足すこと（詳細度が同じ）。 → （staff.html の集合写真を削除）で実際に必要になったので復活させた。 ⚠ 詳細度は `.pt-lead + .section` と同じ（クラス2つ）。**必ずこの下に置く**（後勝ち）。 */ .pt-lead--nophoto{padding-bottom:var(--sec-pad)} .pt-lead--nophoto + .section{padding-top:var(--sec-pad)} /* ---- 22 お悩みカードのイラスト（.vhouse--illust / .vhouse__illust）は 2026-08-27 に**廃止**（「やはりイラスト外して」）。屋根の上に載せる型 → stagelab.inkdom.jp の「右下の角に立たせて下へこぼす」型と 2案とも作ったうえで取りやめ。復活させるときの実測値は `記録/2026-08-27_桶庄_キッチンページ_写真の重なり再修正とお悩みイラスト配置_替えどきカード改修.md` に残してある。素材（img/tr-kanki.png・tr-kata.png）は透過余白を裁った状態で置いてある。 */ /* ---- 23 替えどきカードの円イラスト（/ ）---------------- 2026-08-27（2回目）：円はカードの上辺に重ねる＝上へ半分出す。：円は**白・枠線なし**。カードも白・枠線なしなので、下半分はカードと溶けて一体になり、上半分だけが紙の地に白いドームとして出る。 ⚠ 円は必ず不透明にすること（半透明だと後ろが透ける）。 */ .perf-card__icon{display:grid;place-items:center; --tic:clamp(74px,7vw,96px); width:var(--tic);aspect-ratio:1;border-radius:50%; background:var(--white);border:0; margin:0 auto clamp(12px,1.5vw,18px)} .pt-timing-box .perf-card{position:relative; padding-top:calc(var(--tic) * .5 + clamp(24px,2.6vw,34px))} .pt-timing-box .perf-card__icon{position:absolute;top:0;left:50%; transform:translate(-50%,-50%);margin:0} /* ⚠ 円はカードの上へ「直径の半分」出る。段が縦に積まれる幅では、既定の行間(14〜24px)だと円が上のカードに食い込む（SP390 で実測）。積まれる幅では行間を円の半分＋余白まで広げる。 */ @media (max-width:768px){ .pt-timing-box .perf-grid--3{row-gap:calc(var(--tic) * .5 + clamp(18px,3vw,26px))} } /* ⚠ 同じ width を当てても「同じ大きさ」には見えない。素材の縦横比がばらばらで、水栓 147×186（縦長）／コンロ 196×146（横長）／キッチン 1074×1024（ほぼ正方）。幅を揃えると縦長は大きく、横長は小さく見える（実測 √面積 62.6 / 48.1 / 54.4）。 → √(幅×高さ) が揃うように、比率ごとに幅を出し分ける。円に収まる上限は直径の60%。 */ /* 出し分けの式：幅% ＝ 51.8 × √(横÷縦)。これで √(幅×高さ) が全点そろう。（円に収まる上限は直径の60%。素材を足したらこの式で幅を出してクラスを1行足す） */ .perf-card__icon img{width:53%;height:auto;display:block} /* 既定＝ほぼ正方（比 1.05） */ .perf-card__icon--tall img{width:46%} /* 比 0.79：水栓・シャワー */ .perf-card__icon--wide img{width:60%} /* 比 1.34：コンロ */ .perf-card__icon--w37 img{width:37%} /* 比 0.50：ソープ（かなり縦長） */ .perf-card__icon--w44 img{width:44%} /* 比 0.71〜0.76：鏡・スツール */ .perf-card__icon--w58 img{width:58%} /* 比 1.24〜1.30：窓・ティッシュ */ /* ---- 24 部位別ページ（お風呂／トイレ／洗面）で足したもの ------------- 2026-08-27。キッチンの型を使い回すにあたり、キッチンには無かった「部分的な取り替えも承っています」の小見出し＋タグ列のためだけの3クラス。 */ /* 節の中の小見出し（sec-title より一段小さい） */ .sec-title--sm{font-size:clamp(18px,1.9vw,23px)} /* できることカードの下に置く小見出し。上に大きめの間を取る */ .pt-subhead{margin-top:clamp(48px,5vw,72px)} /* タグ列を中央寄せにする（既定は左寄せ） */ .pt-chips--center{justify-content:center} /* ---- 25 替えどき／選び方を2カラムにする（2026-08-28）-------- 実績を示す帯。headless で実測（1440/1920）：器 max1260 ／右カラムの文字幅は 364px 固定／写真は残り全部（872→1112px）各項目は下に 1px の罫（6）・上下 padding 40/30 ／写真は 1.6:1 桶庄は器が広い（--maxw 1680）ので、右カラムは clamp で追従させる。 ⚠ 見出し（#timing）は中央のまま＝お悩みから伸びる縦線が刺さる先を変えない。 ⚠ すべて .pt-timing2 の中に閉じる。.perf-card は他ページ（性能向上リノベ等）でも使っているので、素の .perf-card には一切触らない。 */ /* ⚠ 右カラムは「短い数字」ではなく説明文を持つので、参考サイト(364px固定)より広く取る。狭いほど文が折り返して背が伸び、写真との丈の差＝写真の下の空きになる。 */ /* 2026-08-28（2回目）：左の写真は「画面中央くらいまで」。右はそのぶん広げる。 → 器を半分ずつに割る。器は --maxw 1680 で中央寄せなので、半分＝ほぼ画面の中央になる（1920で写真の右端 960px＝画面のちょうど中央。1440で695px／中央720px）。 */ .pt-timing2{--tic:clamp(56px,4.4vw,72px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,3.4vw,64px);align-items:stretch} /* 円がカードの上辺からはみ出さなくなるので、見出しの下余白を通常に戻す。（既存の .troubles #timing は円の食い込みぶんを足していた） */ .troubles #timing:has(+ .pt-timing2){margin-bottom:clamp(28px,3.4vw,44px)} /* ※ 写真スライド（.pslide / __track / __item / __dots / __dot）は TOPのヒーローでも使うため common.css に移設した（2026-09-05）。ここには .pt-timing2 の中での見え方の調整だけを残す。 */ /* 右：いまの3項目を縦に積む ------------------------------------- */ /* 積むので grid をやめる。カードの箱をほどき、下に細い罫を1本引くだけにする。 */ .pt-timing2 .perf-grid--stack{display:block} /* --cpt＝カードの上余白。丸を絶対配置で置くとき top に同じ値が要るので変数にしてある。 */ .pt-timing2 .perf-card{--cpt:clamp(20px,2.1vw,28px); background:none;border:0;border-bottom:1px solid var(--line); border-radius:0;text-align:left;position:relative; padding:var(--cpt) 0 clamp(16px,1.7vw,24px); min-height:calc(var(--tic) + var(--cpt)); display:grid;grid-template-columns:var(--tic) minmax(0,1fr); column-gap:clamp(13px,1.3vw,18px);align-items:start} .pt-timing2 .perf-card:first-child{--cpt:0px} .pt-timing2 .perf-card > *{grid-column:2} /* 円アイコンは上に載せず、左の列に置く（積む形では上に出せない） */ /* ⚠⚠ .perf-card__icon は自分自身で --tic:clamp(74px,7vw,96px) を宣言している。そのため width:var(--tic) は「カード側の --tic（56〜72px）」ではなく自分の値で解決し、丸だけが列からはみ出して本文に食い込んでいた。実測（字面＝Range.getClientRects で測定・2026-08-28）：キッチン／お風呂／トイレ／洗面とも 1680で -6px・1280で -16.7px・390で -10px の重なり。横あふれ検査は「画面の端」しか見ないので、この内側の重なりは素通りしていた。 → .pt-timing2 の中では丸もカードの --tic を継ぐ（＝列の確保幅と実寸が一致する）。 */ /* ⚠⚠ `grid-row:1 / -1` は「全行にまたがる」つもりで書いたが、**またげていなかった**。 grid-template-rows を宣言していない＝明示グリッドが0行なので、-1 は1本目の線に解決し、実質 `1 / 2`＝1行目だけを占める。その結果 1行目が丸の高さ(72px)まで膨らみ、英字ラベル(22px)の下に **50pxの死に空間** ができていた（実測 rows: 72px 46px 54px）。 2026-08-28（2回目）「アイコンの英語のすぐ下に p.pt-yrs を持ってきて」。 → 丸を絶対配置にして行送りから外す（#advise と同じ作法）。列の幅は grid 側で確保したまま。 ⚠ 本文が短いカードで丸がはみ出さないよう、カードに min-height を持たせてある。 */ /* ⚠⚠ grid-column:1 は絶対配置でも必須。`.perf-card > *{grid-column:2}` が丸にも当たっており、これを消すと **絶対配置の基準（包含ブロック）が2列目のグリッド領域になる**。 left:0 が2列目の左端に解決して、丸が英字ラベルの真上に重なった（実測：丸も英字も left:959）。グリッドの子は、絶対配置でも grid-column を持つとその領域が基準になる。 */ .pt-timing2 .perf-card__icon{grid-column:1;position:absolute;left:0;top:var(--cpt); transform:none;margin:0;width:var(--tic);--tic:inherit} /* 積んだぶん1行が細くなるので、数字は少し落とす（横3列のときの42pxは効きすぎる） */ .pt-timing2 .perf-card .pt-yrs{font-size:clamp(26px,2.4vw,34px);margin:6px 0 8px} .pt-timing2 .perf-card .pt-yrs--txt{font-size:clamp(17px,1.6vw,20px); min-height:0;display:block;text-align:left} .pt-timing2 .perf-card h3{margin-top:6px} /* ⚠ 注記も「文として読ませるもの」なので 15px を割らない（本文の最小15px・）。 */ .pt-timing2 .pt-note{text-align:left;margin-top:clamp(16px,1.8vw,22px);line-height:1.95} /* 1280px 未満は1カラムへ。写真が上、項目が下。 ⚠ 900px まで2カラムを引っぱると、右カラムが細くなって文が折り返し、写真の器が縦長になって左右が切れる。丈が合う幅でだけ2カラムにする。 */ @media (max-width:1279px){ .pt-timing2{grid-template-columns:1fr;gap:clamp(24px,3.4vw,36px);align-items:start} .pt-timing2 .pslide__track{height:auto;aspect-ratio:4/3} /* ⚠ padding-top を直接戻すと --cpt と食い違い、丸だけが本文より20px上にずれる（実測）。丸の top は --cpt を見ているので、必ず変数のほうを戻す。 */ .pt-timing2 .perf-card:first-child{--cpt:clamp(20px,2.1vw,28px)} } /* スマホは円を少し小さく。左列が太いと本文が2〜3文字で折り返す。 */ @media (max-width:560px){ .pt-timing2{--tic:52px} .pt-timing2 .perf-card{column-gap:12px} }