@charset "UTF-8"; /* ========================================================= reform_kitchen_v2.css キッチンリフォームページ（/c/re-kitchen）固有スタイル ----------------------------------------------------------- 読み込み順： reform_common_v2.css → このファイル共通スタイルはすべて reform_common_v2.css 側にあります。このファイルには「キッチンページだけの指定」を書いてください。 ■ ページ別の配色セクション側の色は --color-key 経由で参照しているため、下記の --color-theme 1行を変えるだけで配色が切り替わります。 ■ キッチン固有の上書きを追加する場合 .rs-p-kitchen-xxx { ... } のように、ページ識別子入りのクラスで記述してください。（他ページのクラスと衝突しません） ========================================================= */ /* --- ページテーマカラー --- */ /* futureshop はにクラスを付けられないため body で指定する。このファイルはキッチンページのレイアウトでしか読み込まれないため、他ページには影響しない。 */ body { --color-theme: #0092bf; /* キッチン：ブルー（カンプ実測。トイレ・お風呂と同色） */ /* --- メインビジュアルの写真 --- */ /* 共通CSS側は var() で受け取るだけなので、ページ固有画像への参照が reform_common_v2.css に混ざらない。 */ --mv-image-sp: url("https://fudosan2103.itembox.cloud/item/img/v2/kitchen/mv_main_sp_2x.webp"); --mv-image-pc: url("https://fudosan2103.itembox.cloud/item/img/v2/kitchen/mv_main_pc_2x.webp"); } /* ========================================================= MV：共通CSS側の「トイレ実測値」をキッチンの素材寸法へ上書き --------------------------------------------------------- 共通CSSにページ固有の実測値が書かれているため、このファイルで上書きする。（共通CSSより後に読み込まれるので同じ詳細度でも勝つ） ========================================================= */ /* --- MV：背景写真の原寸 --- */ /* 素材は 5464×1401px（2x）＝ 1x 2732×700.5px。高さは MV の表示高さ（700px）に合わせて丸める。縦横比のズレは 0.07% で、目視できる歪みは生じない。 */ .rs-s-mv__media { --mv-image-pc-size: 2732px 700px; } /* --- MV：価格画像の表示幅（素材原寸 696×96px） --- */ /* カンプ実測：SP 355px ／ PC 696px（＝原寸） SPは素材内の赤い図形の幅から逆算した値。カンプ実測 348px ÷ 素材 682px ＝ 0.5103 → 696 × 0.5103 ＝ 355.2px */ .rs-s-mv { --mv-price-w: 35.5rem; } @media (min-width: 768px) { .rs-s-mv__price img { --mv-price-w: 69.6rem; /* PCは原寸696px */ } } /* --- MV：ベージュ帯 --- */ /* 共通CSS側はトイレ基準（半透明ブルー）のため、キッチンの色で上書きする。 Illustrator の指定は #dcac6f／不透明度50%／描画モード「乗算」。これを CSS でそのまま再現している（白地の上では #edd5b7 になる。カンプ実測 rgb(237,213,183) と一致）。 ※mix-blend-mode の合成範囲を MV 内に閉じるため、親の .rs-s-mv に isolation: isolate を付けている。 */ .rs-s-mv { isolation: isolate; } .rs-s-mv__rect { background-color: rgba(220, 172, 111, 0.5); mix-blend-mode: multiply; } /* ========================================================= 費用相場：カード4枚への対応 --------------------------------------------------------- 共通CSSは3枚（お手軽／標準／こだわり）前提で組まれているが、キッチンは「お手軽」が2枚あり計4枚になる。カード内部（リボン・価格ピル・二重ライン）の寸法はカンプ実測でもほぼ同じため、ここでは「並べ方」だけを上書きする。カンプ実測（PC 1366px）カード幅約297px ／カード間隔約30px 行全体約1278px（左端 42.5px ／右端 1318.5px）画面幅ごとの並び〜767px … 1列×4段（共通CSSの flex がそのまま機能する） 768〜1339px … 2列×2段 1340px以上 … 4列×1段（297×4 ＋ 30×3 ＋左右余白24×2 ＝ 1338px が成立する最小幅） ========================================================= */ /* --- 行全体の幅 --- */ /* 共通CSSは3枚ぶん（1080px）のため、4枚ぶんへ広げる。 */ .rs-s-price__inner { max-width: 1280px; } /* --- 2列×2段（768〜1339px）--- */ /* 共通CSSは 768〜1179px で「標準を上段中央、下段に残り2枚」を grid-area で明示している。4枚では成立しないため打ち消し、 DOM順（＝カンプの左からの順序）のまま2列で折り返す。 */ @media (min-width: 768px) and (max-width: 1339px) { .rs-s-price__grid { display: grid; grid-template-columns: repeat(2, var(--price-card-w)); justify-content: center; gap: 3rem; } .rs-s-price-card--light, .rs-s-price-card--standard, .rs-s-price-card--premium { grid-area: auto; justify-self: auto; } } /* --- 4列×1段（1340px以上）--- */ @media (min-width: 1340px) { .rs-s-price__grid { display: grid; /* カンプ実測：カード297px（共通CSSの既定は300px） */ --price-card-w: 29.7rem; grid-template-columns: repeat(4, var(--price-card-w)); justify-content: center; gap: 3rem; /* カンプ実測：カード間隔30px */ } } /* ========================================================= 補助金バナー：キッチンカンプに合わせた調整 ========================================================= */ /* --- 本文の約物半角 --- カンプの本文は Illustrator の「約物半角」が掛かっており、読点「、」句点「。」括弧「（）」が半角幅になっている。共通CSS（トイレ・お風呂基準）は全角のままのため、キッチンの長い本文では1行に収まる文字数が足りなくなる。カンプ実測（PC 1366px／テキスト幅 599px） 1行目「…国や自治体の補助金（節湯水」 37文字（うち約物1） → 36.5字分 ÷ 599px ＝ 1字 16.41px 2行目「栓や…場合があります。」 38文字（うち約物3） → 36.5字分 ÷ 597.5px ＝ 1字 16.37px いずれも約物を半角として数えると 16.4px で一致する。実装のフォントサイズは 1366px で 15.98px、テキスト幅は 598px とカンプ（599px）にほぼ一致しているため、約物を半角にすればカンプと同じ「2行」に収まる計算になる。全角のまま … 38字 × 15.98 ＝ 607px（598pxを超え3行になる）約物半角 … 36.5字 × 15.98 ＝ 583px ✓ SPでもカンプは同じく約物半角のため、画面幅を問わず適用する。カンプSP … 4行目「（節湯水栓やビルトイン食」が12文字入る（全角のままだと11文字で折り返してしまう） */ .rs-s-subsidy__text { font-feature-settings: "palt"; } /* --- ボタンの文字組み（SP）--- 「キッチンリフォームの補助金はこちら」は17文字あり、トイレ「トイレリフォーム…」16文字・お風呂「お風呂リフォーム…」16文字より 1文字長い。共通CSSは左右対称パディング（2.2rem）＋中央揃えのため、ボタン内寸 250 − 44 ＝ 206px に収まらず、末尾の「ら」が右端の矢印と重なってしまう。カンプ実測（SP 375px）ボタン … 左 62.5px ／右 312.5px（幅 250px）文字 … 左 76.0px ／右 286.5px（幅 210.5px）→ 左パディング 13.5px 矢印 … 左 292.5px ／右 300.0px カンプは中央揃えではなく、左パディング 13.5px の左寄せに近い組み方。文字幅 210.5px ÷ 17文字＝ 12.4px で、指定の 12.8px より詰まっている（Illustrator のトラッキング。−0.03em 相当）。カンプと同じ配置・字送りを再現し、矢印との重なりを解消する。 */ @media (max-width: 767px) { .rs-s-subsidy__btn { place-content: center start; /* 内寸 250 − 13.5 − 26 ＝ 210.5px（カンプの文字幅と一致） */ padding-inline: 1.35rem 2.6rem; letter-spacing: -0.03em; } } /* --- 写真・本文カラムの配置（SP）--- 改行位置はブラウザの自然な折り返しに任せ、両端揃え（justify）で右端をそろえる。あわせて、写真と本文の位置をカンプ実測値に合わせる。カンプ実測（SP 375px）写真 … 左 12px ／右 199.5px（幅 187.5px）間隔 … 7.5px 文字 … 左 207px ／右 354px（右余白約9px）実装のコンテンツ幅は 360px（futureshop の .fs-l-main が左右に 8px のパディングを持つため、375px 表示でも 375px にはならない）。そのぶん帯の内側パディングを 1.2rem → 0.4rem に詰めると、写真の左端が画面端から 8 ＋ 4 ＝ 12px となりカンプと一致する。写真 12〜199.5px ／本文 199px〜 … カンプとほぼ同じ位置本文の内寸 … 360 − 4 − 187.5 − 7.5 − 9 ＝ 148px（カンプ 147px）見出しバーは内側パディングを打ち消して帯の端まで伸ばしているため、パディングの変更に合わせて負のマージンも同じ値にそろえる。 */ @media (max-width: 599px) { .rs-s-subsidy__inner { grid-template-columns: 18.75rem 1fr; column-gap: 0.75rem; padding-inline: 0.4rem; } .rs-s-subsidy__title { margin-left: -0.4rem; } } /* --- 本文の行揃え（〜767px）--- カンプは行末がそろった組み方のため、両端揃えにする。最終行は自然に左揃えのまま残る。右余白はカンプ実測（約9px）に合わせる。 */ @media (max-width: 767px) { .rs-s-subsidy__text { padding-right: 0.9rem; text-align: justify; text-justify: inter-character; /* 和文でも字間で調整させる */ } } /* ========================================================= 厳選プラン：SPのキャッチコピーの折り返し --------------------------------------------------------- カンプSPの組み方 1枚目 LIXIL … デザイン性と／直感的な収納力（2行） 2枚目クリナップ … 家具のように／空間に馴染む／デザイン（3行） 3枚目タカラ … お手入れ簡単／「高品位ホーロー」（2行） 3枚目の「「高品位ホーロー」」は9文字あり、SPのロゴ側カラム（111px）には収まらず「ー」だけが3行目へ落ちてしまう。カンプでは約物半角（palt）が効いており、かつ文字列がカードの左右パディングの外側まで使われている（お風呂ページと同じ状況）。同じ条件を再現して、カンプどおりの行数に収める。 2枚目は幅が広がると「空間に馴染むデザイン」が1行に入ってしまうため、 HTML側の
で3行に固定している。 ========================================================= */ @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"; } } /* ========================================================= 施工実績：キッチン固有の調整 --------------------------------------------------------- いずれもお風呂ページと同じ対処。お風呂の完成ファイルに手を入れないため、同じ記述をこのファイルにも持たせている。（共通化する場合は共通CSS側に修飾クラスを新設し、お風呂ページのHTMLにもクラス追加が必要になる） ========================================================= */ /* --- 商品名の折り返し --- 共通CSSはトイレの短い商品名を前提に nowrap にしているが、「タカラスタンダードトレーシア」は左カラムに収まらず before 写真の下へ潜り込んでしまう。カンプは PC・SP とも半角スペースの位置で2行に折り返しているため、折り返しを許可したうえで、word-break: keep-all で「タカラスタンダード」「トレーシア」の語中では切れないようにする。 ※他の4件（クリナップ・パナソニック）は短いため1行のまま。 */ .rs-s-works-card__product { white-space: normal; word-break: keep-all; } /* --- スペック値の折り返し防止 --- 「124.5 万円」だけが他より長く、SPの狭い列では「万」と「円」の間で改行されてしまう。カンプは1行のため、値は折り返さないようにする。（値の列は他の値が短く余裕があるため、はみ出すことはない） */ .rs-s-works-card__spec-value { white-space: nowrap; } /* --- スペックの並び（SP）--- 共通CSSは「付帯工事／費用／工期」の3項目を前提に、 1行目＝付帯工事、2行目＝費用・工期の横並び、という配置になっている。キッチンは「費用／工期」の2項目のため、そのままだと縦積みになる。 1行に並ぶよう列を割り当て直す。列幅の定義は共通CSSのまま使える。 */ @media (max-width: 899px) { /* 値の列幅。共通CSSは3項目時の 50px だが、キッチンは「124.5 万円」が 52.5px（カンプ実測）あり収まらない。カンプでは工期ラベルが 174.5px から始まっており、そこから逆算すると値の列は 57.5px となる。費用ラベル 48.5〜104.5 ＋間隔6.5 ＋値 57.5 ＋間隔6.5 → 174.5 ✓ */ .rs-s-works-card__spec { --works-spec-price-w: 5.75rem; } .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; } } /* ========================================================= お悩み提起：イラストの表示幅 --------------------------------------------------------- 共通CSSにはトイレの実測値が入っているため上書きする。素材は 793×745px（2x）＝ 1x 396.5×372.5px。透明部分を除いた絵柄の幅は 371px（左に26pxの余白がある）。カンプ実測（絵柄の幅） SP … 213.5px → 213.5 ÷ 371 ＝ 0.5755 → 画像の表示幅 396.5 × 0.5755 ＝ 228.2px ≒ 230px PC … 原寸（396.5px） ========================================================= */ .rs-s-troubles { --troubles-illust-width: 230px; /* カンプSP実測からの換算 */ } @media (min-width: 768px) { .rs-s-troubles { --troubles-illust-width: calc(396.5 * var(--troubles-u)); /* PCは原寸 */ } } /* --- お悩みboxへのオーバーハング位置（1100px以上）--- 共通CSS（top -92 / right -138）はトイレのイラストを前提にした値で、キッチンの絵柄は上端の余白の取り方が異なるため、そのままではカンプより 69.5px 高い位置に出てしまう。カンプ実測値で上書きする。カンプ実測（PC 1366px） box … 左 140.5px ／幅 1005px → 右 1145.5px ／上 1132.5px 絵柄 … 右端 1282.5px ／上端 1131.5px 素材の不透明範囲は x 26〜396px ／ y 0〜372.5px（原寸 396.5×372.5px）。うち x≧263.5px の右半分（写真の吹き出し）は y 21.5〜311.0px で、カンプの同じ部分は y 1131.5〜1421.0px。高さが 289.5px で一致するため、カンプでも原寸（等倍）で配置されていることが確認できる。画像の上端 … 1131.5 − 21.5 ＝ 1110.0px → box上辺から −22.5px 画像の右端 … 1282.5 ＋ (396.5 − 396) ＝ 1283.0px → box右辺から −137.5px ※縦位置は、上記の計算値（−22.5px）から目視確認のうえ −7px に調整。 */ @media (min-width: 1100px) { .rs-s-troubles__illust { top: calc(-7 * var(--troubles-u)); right: calc(-137.5 * var(--troubles-u)); } } /* ========================================================= さらに解決（Q&Aカード）：キッチンカンプに合わせた調整 --------------------------------------------------------- 共通CSSはトイレのカンプ実測値のため、差分をここで上書きする。 ========================================================= */ /* --- 1160〜1179px の隙間を埋める --- 共通CSSは 1160px から、右端カードのイラストのはみ出し分としてグリッドに右パディング 4rem を確保する。ところがグリッドの外形が 1080px に達するのは 1180px 以上のため、この 20px の区間だけ内寸が 1040px を下回り、3カラムから2カラムへ一時的に落ちてしまう。 1160px … グリッド 1065 − 40 ＝ 1025px（3枚に必要な 1040px に不足）この区間だけ右パディングを 2rem に緩め、3カラムを維持する。 1160px … グリッド 1065 − 20 ＝ 1045px ✓ */ @media (min-width: 1160px) and (max-width: 1179px) { .rs-s-solutions { --solutions-overhang: 2rem; } } /* --- 4・5枚目のカード幅（1180px以上）--- カンプ実測（PC 1366px） 1段目 … 3枚とも 300px ／カード間隔 70px ／行頭 163px 2段目 … 2枚とも 331px ／カード間隔 70px ／行頭 316px 2段目は本文が長いため、カンプでカード幅が広げられている。行の合計幅 331×2 ＋ 70 ＝ 732 に対し (1366 − 732) ÷ 2 ＝ 317 で、 flex の中央揃えのまま実測位置と一致する（お風呂と違い位置調整は不要）。イラストはどのカードもカード右端からの距離が共通のため、幅を広げたぶんだけ配置基準も右へずらす（197 + 31 = 228px）。 ■ 適用範囲を 1180px 以上に限定している理由カンプの「3枚＋2枚」の組み方が成立するのは、グリッドの内寸が 1040px（300×3 ＋ 70×2）を確保できる 1180px 以上のみ。それ未満では2カラムになり、300px と 331px が横に並んで不揃いに見えるうえ、768px 付近では 300 ＋ 70 ＋ 331 ＝ 701px が内寸（692px）に収まらず、3〜5枚目が1枚ずつ縦積みになってしまう。 2カラム以下では5枚とも 300px に揃え、(1,2)(3,4)(5) と素直に折り返させる。 */ @media (min-width: 1180px) { .rs-s-solutions__card:nth-child(4), .rs-s-solutions__card:nth-child(5) { --solutions-illust-left: 22.8rem; width: 331px; } } /* --- 4・5枚目の改行位置（カンプ再現）--- カンプでは4・5枚目だけ本文の改行位置が手で調整されているため、カード幅を広げる 1180px 以上でのみ
で固定する。それ未満はカード幅が 300px に揃うため、共通CSSどおり自然な折り返しに任せる。 */ .rs-s-solutions__br--pc { display: none; } @media (min-width: 1180px) { .rs-s-solutions__br--pc { display: inline; } /* 各行がテキスト内寸をわずかに超えて折り返してしまうため、右へ逃がす。 1・2行目は上記
で固定済みなので、余白を広げても繰り上がらない。テキスト内寸 … カード331 − 左パディング34 − 右パディング32.5 ＝ 264.5px カンプ実測 … 4枚目 267.5 / 269.0 / 269.0px（3行ともほぼ内寸いっぱい） 5枚目 264.5 / 259.5 / 260.0px あわせて、カンプは Illustrator の「約物半角」で読点「、」句点「。」が半角幅になっている。4枚目の3行目「で、お手入れが劇的にラクになります。」は 18文字あり、約物が全角のままだと 16px ぶん超過して「す。」が 4行目へ落ちるため、CSS でも同じ状態を再現する。はみ出し量（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; font-feature-settings: "palt"; } } /* ========================================================= ライフスタイルや機能で選ぶ：6枚目のラベルの文字サイズ --------------------------------------------------------- 「対面式・アイランド型へ変更」（13文字）だけが青いラベルに収まらず2行になっていた。カンプ実測でも、このラベルのみ 1文字あたりの幅が小さく組まれている。カンプ実測（PC 1366px／ラベル幅 272px） 1枚目ビルトイン食洗機 172.5px ÷ 8文字＝ 21.6px 3枚目お掃除簡単レンジフード 238.5px ÷ 11文字＝ 21.7px 6枚目対面式・アイランド型へ変更 241.0px ÷ 13文字＝ 18.5px 基準 22px に対して 19px 相当。お風呂ページと同じ比率（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); } } /* --- 5枚目のラベルの約物半角 --- 「安心・快適な IH ヒーター」はカンプでも他と同じ 22px で組まれているが（文字高の実測：このラベルのみ 21px ＝他と同じ。6枚目だけ 18px）、そのままではラベルに収まらず「ー」が2行目に落ちる。カンプ実測の文字幅 … 241px ブラウザでの描画 … 約261px（20px 超過）ラベル内寸 … 272 − 左右パディング1rem×2 ＝ 252px 差の主因は中黒「・」で、Illustrator の「約物半角」が効いている。 CSS の font-feature-settings: "palt" で同じ状態を再現し、あわせて左右パディングを詰めて内寸を確保する。（ラベルの外形幅はカード幅で決まるため、パディングを詰めても青いラベル自体の見た目の大きさは変わらない）並び順が変わっても影響しないよう、位置指定ではなく修飾クラスで指定する。 */ .rs-s-features-card__title--palt { font-feature-settings: "palt"; } @media (min-width: 768px) { .rs-s-features-card__title--palt { padding-inline: 0.2rem; /* 内寸 252px → 268px */ } }