@charset "UTF-8"; /* ========================================================= reform_bath_v2.css お風呂リフォームページ（/c/re-bath）固有スタイル ----------------------------------------------------------- 読み込み順： reform_common_v2.css → このファイル共通スタイルはすべて reform_common_v2.css 側にあります。このファイルには「お風呂ページだけの指定」を書いてください。 ■ ページ別の配色セクション側の色は --color-key 経由で参照しているため、下記の --color-theme 1行を変えるだけで配色が切り替わります。 ■ お風呂固有の上書きを追加する場合 .rs-p-bath-xxx { ... } のように、ページ識別子入りのクラスで記述してください。（他ページのクラスと衝突しません） ========================================================= */ /* --- ページテーマカラー --- */ /* futureshop はにクラスを付けられないため body で指定する。このファイルはお風呂ページのレイアウトでしか読み込まれないため、他ページには影響しない。 */ body { --color-theme: #0092bf; /* お風呂：ブルー（カンプ実測。トイレと同色） */ /* --- メインビジュアルの写真 --- */ /* 共通CSS側は var() で受け取るだけなので、ページ固有画像への参照が reform_common_v2.css に混ざらない。 */ --mv-image-sp: url("https://fudosan2103.itembox.cloud/item/img/v2/bath/mv_main_sp_2x.webp"); --mv-image-pc: url("https://fudosan2103.itembox.cloud/item/img/v2/bath/mv_main_pc_2x.webp"); } /* --- お風呂固有の上書き（現時点では無し） --- */ /* ========================================================= 共通CSS側の「トイレ実測値」を、お風呂の素材寸法へ上書き --------------------------------------------------------- 下記3つは reform_common_v2.css にページ固有の実測値が書かれているため、このファイルで上書きする。（共通CSSより後に読み込まれるので、同じ詳細度でも勝つ） ========================================================= */ /* --- MV：背景写真の原寸（お風呂は 2100×700px） --- */ .rs-s-mv__media { --mv-image-pc-size: 2100px 700px; } /* --- MV：価格画像の表示幅（素材原寸 696×96px） --- */ .rs-s-mv { --mv-price-w: 35.3rem; /* カンプSP実測 353px */ } @media (min-width: 768px) { .rs-s-mv__price img { --mv-price-w: 69.6rem; /* PCは原寸696px */ } } /* --- お悩み提起：イラストの表示幅（素材原寸 391×373px） --- */ .rs-s-troubles { --troubles-illust-width: 230px; /* カンプSP実測 */ } @media (min-width: 768px) { .rs-s-troubles { --troubles-illust-width: calc(391 * var(--troubles-u)); /* PCは原寸391px */ } } /* --- MV：ピンク帯 --- */ /* 共通CSS側はトイレ基準（半透明ブルー）のため、お風呂の色で上書きする。 Illustrator の指定は #e1a091／不透明度70%／描画モード「乗算」。これを CSS でそのまま再現している（白地の上では #eabcb2 になる）。 ※mix-blend-mode の合成範囲を MV 内に閉じるため、親の .rs-s-mv に isolation: isolate を付けている。 */ .rs-s-mv { isolation: isolate; } .rs-s-mv__rect { background-color: rgba(225, 160, 145, 0.7); mix-blend-mode: multiply; } /* ========================================================= さらに解決（Q&Aカード）：お風呂カンプに合わせた調整 --------------------------------------------------------- 共通CSSはトイレのカンプ実測値のため、差分をここで上書きする。 ========================================================= */ /* --- セクション下余白（PC）--- お風呂は次が給湯器バナーのため、トイレ（次が費用相場）より広い。カンプ実測：最後のカード下端〜帯の上端 = 77px ※SPはカンプ 36.5px ／共通CSS 40px で誤差範囲のため据え置き。 */ @media (min-width: 768px) { .rs-s-solutions { padding-block: 0 7.7rem; } } /* --- 5枚目のカード幅（768px以上）--- 5枚目だけ本文が長いため、カンプではカード幅が 331px に広げられている。イラストはどのカードもカード右端からの距離が共通（103px）のため、幅を広げたぶんだけ配置基準も右へずらす（197 + 31 = 228px）。 ※SP（〜767px）はカンプでも5枚とも300pxのため対象外。 */ @media (min-width: 768px) { .rs-s-solutions__card:nth-child(5) { --solutions-illust-left: 22.8rem; width: 331px; } } /* --- PC 3カラム時（1160px以上）の2段目の位置 --- カンプ実測（1366px） 4枚目：左 314.0px ／幅 300px 5枚目：左 698.5px ／幅 331px ／右 1029.5px grid ではなく flex の中央揃えのため、左マージンで実測位置へ寄せる。（行の合計幅が増えると、行全体はその「半分」だけ右へ動く） 4枚目 ml17 + 300 ＋ gap70 ＋ 5枚目 ml15 + 331 = 733 (1040 − 733) ÷ 2 ＝ 153.5 → 行頭 297 → 4枚目の左端 314 ✓ 1段目（300×3＋70×2＝1040）はマージンを持たないため影響しない。 2カラム以下では5枚目が単独行になるため、位置調整は行わない。 */ @media (min-width: 1160px) { .rs-s-solutions__card:nth-child(4) { margin-left: 17px; } .rs-s-solutions__card:nth-child(5) { margin-left: 15px; /* カード間 70 + 15 = 85px */ } } /* --- 4・5枚目の改行位置（カンプ再現）--- カンプでは4・5枚目だけ本文の改行位置が手で調整されているため、 PC（768px以上）のみ
で固定する。 SPは共通CSSどおり自然な折り返しに任せる。 */ .rs-s-solutions__br--pc { display: none; } @media (min-width: 768px) { .rs-s-solutions__br--pc { display: inline; } /* 最終行の句点「。」がボックスをわずかに超えて折り返してしまうため、右へ逃がす。1・2行目は上記
で固定済みなので影響しない。はみ出し量（24px）は .rs-s-solutions__a の右パディング 32.5px の範囲内で、カード外へ出ることはない。 */ .rs-s-solutions__card:nth-child(4) .rs-s-solutions__a-text, .rs-s-solutions__card:nth-child(5) .rs-s-solutions__a-text { margin-right: -2.4rem; } } /* ========================================================= 費用相場：3枚目（こだわり）のカードの調整 --------------------------------------------------------- お風呂は3枚目の商品名・説明文がトイレより長く、PCで意図しない位置に折り返してしまうため、カンプの表示に合わせて調整する。 ========================================================= */ /* --- 商品名「在来浴室からフルリフォーム」--- */ /* 22px×13文字＝286px に対し、見出しエリアの内寸が283pxしかなく最後の「ム」だけが2行目に落ちるため、わずかに外へ広げる。 */ .rs-s-price-card--premium .rs-s-price-card__title { margin-inline: -0.6rem; } /* --- 説明文の改行位置（PC）--- */ /* カンプは 16 / 16 / 17 文字の3行。最終行は 272px で内寸 265px を 7px 超えるため、句点「。」を右へ逃がして3行に収める。 1・2行目は
で固定済みなので、余白を広げても繰り上がらない。 */ .rs-s-price__br--pc { display: none; } @media (min-width: 768px) { .rs-s-price__br--pc { display: inline; } .rs-s-price-card--premium .rs-s-price-card__text { margin-right: -1.6rem; } } /* ========================================================= 厳選プラン：SPのキャッチコピーの折り返し対策 --------------------------------------------------------- お風呂のキャッチコピーはトイレより長く、鉤括弧を含むため、 SPのロゴ側カラム（111px）では意図しない位置で折り返す。 1枚目「「ほっカラリ床」」 8文字 3枚目「「高品位ホーロー」」9文字カンプでは約物半角（palt）が効いており、かつ文字列がカードの左右パディングの外側まで使われている（実測：カード左端20.5px に対し文字の左端28px、写真の左端154.5px に対し文字の右端147px）。同じ条件を再現して、カンプどおり2行に収める。 ========================================================= */ @media (max-width: 767px) { .rs-s-plans-card__title { /* カードの左右パディング（1.4rem）を打ち消して使える幅を広げる。文字は中央揃えなので、写真との間隔は約4px残る。 */ margin-inline: calc(var(--plans-card-pad) * -1); /* Illustrator の「約物半角」に相当。鉤括弧が半角幅になる */ font-feature-settings: "palt"; } } /* ========================================================= ライフスタイルや機能で選ぶ：2枚目のラベルの文字サイズ --------------------------------------------------------- 「ヒヤッとしない・やわらか床」（13文字）だけが青いラベルに収まらず2行になっていた。 Illustrator を確認したところ、このラベルのみ 19px（他は 22px）で組まれていた。カンプ実測の文字幅とも一致する。カンプ実測 … 文字幅 243px ÷ 13文字＝ 1文字あたり 18.7px ラベル内寸 … PC 252px ／ SP 219.5px 基準サイズに対する比率（19 / 22 ＝ 0.864）を SP にも同じ比率で適用し、どの画面幅でも他のラベルとの大小関係が変わらないようにする。並び順が変わっても影響しないよう、位置指定ではなく修飾クラスで指定する。 ========================================================= */ .rs-s-features-card__title--tight { font-size: 1.6rem; /* 基準 1.85rem × 0.864 */ } @media (min-width: 768px) { .rs-s-features-card__title--tight { /* 基準 clamp(1.7rem, 1.61vw, 2.2rem) × 0.864。1366px で 19px */ font-size: clamp(1.47rem, 1.39vw, 1.9rem); } } /* --- 1枚目・6枚目の説明文の改行位置 --- カンプはどちらも 16 / 16 / 16 / 17 文字の4行。最終行は 272px でテキスト内寸 266px を6px超えるため、句点「。」だけが5行目へ落ちる。 1〜3行目を
で固定したうえで、最終行を右へ逃がして4行に収める。はみ出し量（16px）はボックスの右パディング（14.5px＋3px）の範囲内なので、クリーム色のボックスから文字が出ることはない。 ※SPはカンプどおり自然な折り返しのため、PCのみ有効にする。 */ .rs-s-features__br--pc { display: none; } @media (min-width: 768px) { .rs-s-features__br--pc { display: inline; } .rs-s-features-card:nth-child(1) .rs-s-features-card__text, .rs-s-features-card:nth-child(6) .rs-s-features-card__text { margin-right: -1.6rem; } } /* ========================================================= 施工実績：お風呂固有の調整 ========================================================= */ /* --- 商品名の折り返し --- 共通CSSはトイレの短い商品名を前提に nowrap にしているが、「タカラスタンダードグランスパ」は左カラムに収まらず before 写真の下へ潜り込んでしまう。カンプは PC・SP とも半角スペースの位置で2行に折り返しているため、折り返しを許可したうえで、word-break: keep-all で「タカラスタンダード」「グランスパ」の語中では切れないようにする。カンプ … タカラスタンダード／グランスパ ※他の4件（TOTO サザナ・LIXIL リデア）は短いため1行のまま。 */ .rs-s-works-card__product { white-space: normal; word-break: keep-all; } /* --- スペックの並び（SP）--- 共通CSSは「付帯工事／費用／工期」の3項目を前提に、 1行目＝付帯工事、2行目＝費用・工期の横並び、という配置になっている。お風呂は「費用／工期」の2項目のため、そのままだと縦積みになる。カンプ実測（SP375px）費用ラベル 48.5px〜／値 114px〜／工期ラベル 174px〜／値 240px〜 1行に並ぶよう列を割り当て直す。列幅の定義は共通CSSのまま使える。 */ @media (max-width: 899px) { .rs-s-works-card__spec-label:nth-of-type(1) { grid-column: 1; grid-row: 1; } .rs-s-works-card__spec-value:nth-of-type(1) { grid-column: 2; grid-row: 1; } .rs-s-works-card__spec-label:nth-of-type(2) { grid-column: 3; grid-row: 1; } .rs-s-works-card__spec-value:nth-of-type(2) { grid-column: 4; grid-row: 1; } } /* ========================================================= 給湯器バナーの非表示（2026/09/05） --------------------------------------------------------- 「給湯器のトラブル・交換もお任せください！」セクションは、遷移先ページの準備が整うまで非公開とする（依頼者指示）。 ■ 公開したくなったら下の .rs-s-heater { display: none; } のブロックを削除して、このファイルをアップロードし直すだけでよい。 HTML・パーツの編集は不要。 ■ あわせて必要な作業（公開時） PG_bath_本文◯_v2 内のの href を、給湯器ページのURLに差し替えること。 ========================================================= */ .rs-s-heater { display: none; }