@charset "UTF-8";

/* =========================================================
   reform_common_v2.css
   リフォームせいわ サイトリニューアル 共通スタイル
   -----------------------------------------------------------
   このファイルは「全リニューアルページ共通」です。
   トイレ・お風呂・キッチン等、すべてのページが読み込みます。

   ■ 編集時の注意
     ここを変更すると全ページに影響します。
     1ページだけ変えたい場合は reform_[識別子]_v2.css 側に
     .rs-p-[識別子]-xxx で上書きを書いてください。

   ■ クラス接頭辞
     .rs-l-    レイアウト（ヘッダー / フッター / コンテナ）
     .rs-c-    部品（ボタン / ドロワー / ハンバーガー等）
     .rs-s-    セクション（MV / 費用 / 施工実績 / 流れ 等）
     .rs-is-   状態（JSが付け外し）
     .rs-js-   JSフック（スタイルは持たない）
     .rs-u-    ユーティリティ

   ■ ページ別の配色
     body { --color-theme: ...; } を
     各ページの reform_[識別子]_v2.css に記述します。
   ========================================================= */


/* =========================================================
   1. Foundation / Reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px, 1.6rem = 16px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* スクロールロック時に横幅が変わらないようスクロールバー領域を常時確保 */
  scrollbar-gutter: stable;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
button,
select,
textarea {
  font: inherit;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}


/* =========================================================
   1. Foundation / Design Tokens
   ========================================================= */
:root {
  /* --- Color : Brand --- */
  --color-blue:        #0092bf; /* カンプ実測のキーカラー */
  --color-blue-dark:   #1580b0;
  --color-blue-light:  #e8f6fc;

  /* --- Color : CTA / Accent --- */
  --color-cta:         #ec5a72;
  --color-cta-dark:    #d94560;
  --color-accent-gold: #c9a24b;

  /* --- Color : Text --- */
  --color-text:        #333333;
  --color-text-weak:   #777777;
  --color-text-invert: #ffffff;

  /* --- Color : Base --- */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f5fafd;
  --color-border:      #e0e0e0;
  --color-overlay:     rgba(0, 0, 0, .5);

  /* --- Theme（ページで上書き） --- */
  /* --- Semantic color（意味ベースの中間トークン）---
     ページごとに切り替わるのは --color-theme ただ1つ。
     各セクションは生の16進値を持たず、下記のトークンを参照する。
     お風呂／キッチンを追加する際は「6. Page theme」に
     各ページの reform_[識別子]_v2.css で body { --color-theme: ...; } を指定する。
     ※.rs-s-flow-step の矢印は SVG を mask として使い、色は
       background-color: var(--color-key) で与えている。SVG 内の
       stroke='%23000' は形状定義用のため、配色切替に影響しない。 */
  --color-key:          var(--color-theme); /* 見出し・バッジ・アクセント */
  --color-ink:          #231815;            /* 濃色の本文 */
  --color-em:           #e94752;            /* 強調（赤） */
  --color-surface-warm: #fff6e2;            /* クリーム背景 */

  --color-theme:       var(--color-blue);
  --color-theme-dark:  var(--color-blue-dark);
  --color-theme-light: var(--color-blue-light);

  /* --- Typography --- */
  --font-base: "noto-sans-cjk-jp", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --fw-light:     300; /* Noto Sans CJK JP Light */
  --fw-demilight: 350; /* Noto Sans CJK JP DemiLight */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --fs-xs:   1.2rem;
  --fs-sm:   1.4rem;
  --fs-base: 1.6rem;
  --fs-lg:   2.0rem;
  --fs-xl:   2.8rem;
  --fs-2xl:  4.0rem;

  --lh-base:  1.7;
  --lh-tight: 1.3;

  /* --- Spacing --- */
  --space-xs:  0.8rem;
  --space-sm:  1.6rem;
  --space-md:  2.4rem;
  --space-lg:  4.0rem;
  --space-xl:  6.4rem;
  --space-2xl: 9.6rem;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* --- Effect --- */
  --shadow-card:   0 2px 12px rgba(0, 0, 0, .08);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, .06);

  /* --- Icon：ボタン内の山括弧（chevron） ---
     カンプ実測 SP 6.79×13.65px ／ PC 13.58×27.31px。
     45°回転ボックス方式は「描画高さ ＝ 一辺 × √2」となるため、
     カンプの高さから逆算した一辺をトークンとして持つ。
     （SVGで描く .rs-s-works__btn は実寸をそのまま指定するため対象外） */
  --arrow-box:    0.97rem;  /* SP：一辺9.7px → 6.9×13.7px */
  --arrow-box-pc: 1.91rem;  /* PC：一辺19.1px → 13.5×27.0px */

  /* --- Layout --- */
  --content-width: 1120px;
  --content-pad:   clamp(1.6rem, 4vw, 4rem);

  /* --- z-index --- */
  --z-header:       100;
  --z-floating-cta: 90;
  --z-overlay:      150;
  --z-drawer:       200;
}


/* =========================================================
   1. Foundation / Base
   ========================================================= */
body {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* 追従する店舗バー（.rs-c-floating-cta）の高さぶん下部に余白を確保 */
  padding-bottom: 4.5rem;
}

/* 追従バーが2段（高さ90px）になる 768px 以上で余白も切り替える */
@media (min-width: 768px) {
  body {
    padding-bottom: 9rem;
  }
}


/* =========================================================
   2. Layout / Container
   ========================================================= */
.rs-c-section__inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}


/* =========================================================
   2. Layout / Footer
   基準：SP 375px / PC 1366px
   背景 白 ／ 採用バナー（SVG）＋コピーライト＋TOPボタン
   SP … バナーの右にTOPボタン、その下にコピーライト
   PC … バナーとコピーライトを中央に縦積み（TOPは右端に固定表示）
   ========================================================= */
.rs-l-footer {
  padding-block: 1rem 1.6rem;
  padding-inline: clamp(1.2rem, 3vw, 4rem);
  background-color: #fff;
  color: #878585;
}

.rs-l-footer__inner {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 1080px;
  margin-inline: auto;
}

/* --- 採用情報バナー（イラストSVG＋テキストの重ね合わせ） --- */
.rs-l-footer__recruit {
  position: relative;
  display: block;
  width: 100%;
  max-width: 17.55rem;
  transition: opacity .2s ease;
}

.rs-l-footer__recruit:hover {
  opacity: .8;
}

.rs-l-footer__recruit-illust {
  display: block;
  width: 100%;
  height: auto;
}

/* イラスト内の枠に重ねる見出しテキスト */
.rs-l-footer__recruit-text {
  position: absolute;
  top: 66%;
  left: 68%;
  transform: translate(-50%, -50%);
  color: #198bb4;
  font-size: 1.2rem;
  font-weight: var(--fw-demilight);
  line-height: 1;
  white-space: nowrap;
}

/* --- コピーライト --- */
.rs-l-footer__copyright {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: var(--fw-light);
  line-height: 1.5;
  text-align: center;
}

.rs-l-footer__copyright small {
  font-size: inherit;
}

/* --- TOPへ戻る --- */
.rs-l-footer__pagetop {
  position: absolute;
  top: 2.25rem;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--color-key);
  font-size: 1.8rem;
  font-weight: var(--fw-demilight);
  line-height: 1;
  text-decoration: none;
  transition: opacity .2s ease;
}

.rs-l-footer__pagetop:hover {
  opacity: .7;
}

/* 上向きの山型（幅31px・高さ16px・線幅3px） */
.rs-l-footer__pagetop-arrow {
  display: block;
  width: 3.1rem;
  height: auto;
}


/* =========================================================
   Footer / PC（768px以上）
   ========================================================= */
@media (min-width: 768px) {
  .rs-l-footer {
    padding-block: 0.75rem 1rem;
  }

  .rs-l-footer__recruit {
    max-width: 25rem;
  }

  .rs-l-footer__recruit-text {
    font-size: 1.7rem;
  }

  .rs-l-footer__copyright {
    margin-top: 1.9rem;
    font-size: 1.5rem;
  }

  /* PCカンプにはTOPボタンが無いため非表示（SPのみ表示） */
  .rs-l-footer__pagetop {
    display: none;
  }
}


/* =========================================================
   2. Layout / Header
   基準デザイン：SP 375px（高さ50px）/ PC 1366px（高さ80px）
   ブランド青 var(--color-key) / アイコン・ラベル #918b8a / ハンバーガー var(--color-ink)

   カンプ実測（CSS px）
     SP 375  … ロゴ 158×40（左端・上端に密着）／検索 146.5×25（x=173）
               ハンバーガー枠 50×50（右端に密着）
     PC 1366 … ロゴ 507.5×36（左端に密着・上下中央）／検索 252.5×38（x=691）
               ユーティリティ アイコン36・ラベル12px・項目ピッチ67.5（x=1006.5〜1276.5）
               ハンバーガー枠 80×80（右端に密着）

   可変の考え方
     ・PC側は拡縮率 --hd-u（1366px で 1）を用意し、カンプ実測値に掛けて算出する。
       基準幅以上ではカンプ実寸で固定、狭い側は 0.75 で下げ止まる。
     ・SP側はロゴを 375px でカンプ実寸に到達させ、以降は固定。
       検索フォームのみタブレット幅まで追従して伸びる。
     ・ロゴと検索フォームの間だけを可変余白（margin-left: auto）とし、
       検索〜ハンバーガーの右グループはカンプ通りの間隔を保つ。
   ========================================================= */
.rs-l-header {
  /* --- Header scope tokens（ヘッダー内でのみ使用する値） --- */
  --hd-brand:            var(--color-key);
  --hd-icon:             #918b8a;
  --hd-placeholder:      #9fa0a0;

  --hd-height:           50px;
  --hd-logo-w:           min(15.8rem, 42.1vw);   /* 375px で 158px */
  --hd-search-w:         clamp(12rem, 39vw, 26rem); /* 375px で 146.5px */
  --hd-search-h:         25px;
  --hd-search-border:    1px;
  --hd-search-icon:      15.5px;
  --hd-search-icon-x:    8.5px;
  --hd-search-indent:    3.1rem;                 /* 枠左からテキスト開始まで 32px */
  --hd-search-pad-r:     1.2rem;
  --hd-search-optical-y: 4px;                    /* ↓の「光学中央補正」参照 */
  --hd-search-fs:        1.6rem;                 /* 入力文字：iOSの自動ズーム回避のため16px */
  --hd-search-ph-fs:     min(1.2rem, 3.2vw);     /* プレースホルダ：375pxでカンプ準拠の12px */
  --hd-gap-after-search: 0.55rem;                /* 検索フォームの右隣までの間隔 */

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-header);
  transition: transform .3s ease;
}

/* 下方向スクロール時に隠す（JSで付与） */
.rs-l-header.rs-is-hidden {
  transform: translateY(-100%);
}

.rs-l-header__inner {
  display: flex;
  align-items: center;
  min-height: var(--hd-height);
  /* カンプ：ロゴは左端／ハンバーガーは右端に密着するため左右の余白は持たせない */
  padding-inline: 0;
}

/* --- ロゴ（バッジ内包の一体型SVG。SP=縦組 / PC=横組を picture で切替） --- */
.rs-l-header__logo {
  flex: 0 0 auto;
  align-self: flex-start; /* SPカンプ：ロゴ上端はヘッダー上端に密着 */
  line-height: 0;
}

.rs-l-header__logo img {
  width: var(--hd-logo-w);
  height: auto;
}

/* --- 検索フォーム --- */
.rs-l-header__search {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  width: var(--hd-search-w);
  /* ロゴとの間だけを可変余白にして、右グループの間隔をカンプ通りに保つ */
  margin-left: auto;
  margin-right: var(--hd-gap-after-search);
}

.rs-l-header__search-input {
  display: block;
  width: 100%;
  height: var(--hd-search-h);
  /* 光学中央補正：和文フォントはベースラインの都合で入力欄の中央より
     下寄りに描画されるため、下パディングで文字ブロックを引き上げて中央に揃える。
     （SPはプレースホルダのみ文字サイズが小さいぶん、補正量を大きくしている） */
  padding-block: 0 var(--hd-search-optical-y);
  padding-inline: var(--hd-search-indent) var(--hd-search-pad-r);
  border: var(--hd-search-border) solid var(--hd-brand);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  font-size: var(--hd-search-fs);
  line-height: 1;
  color: var(--color-text);
}

.rs-l-header__search-input::placeholder {
  /* 入力文字は16pxのまま、見た目だけカンプ通りの文字サイズにする */
  font-size: var(--hd-search-ph-fs);
  color: var(--hd-placeholder);
}

.rs-l-header__search-input:focus-visible {
  outline: 2px solid var(--hd-brand);
  outline-offset: 1px;
}

.rs-l-header__search-btn {
  position: absolute;
  top: 50%;
  left: var(--hd-search-icon-x);
  width: var(--hd-search-icon);
  height: var(--hd-search-icon);
  transform: translateY(-50%);
  background: url("https://fudosan2103.itembox.cloud/item/img/v2/common/icon_header_search_2x.webp") no-repeat center / contain;
}

/* --- ユーティリティナビ（アイコン＋ラベル。PC幅で表示 / SPはドロワー内） --- */
.rs-l-header__utility {
  display: none;
}

.rs-c-utility-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.rs-c-utility-nav__item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-weak);
}

.rs-c-utility-nav__item > a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* アイコン画像（ヘッダー・ドロワー共通） */
.rs-c-utility-nav__item:nth-child(1) > a::before { background-image: url("https://fudosan2103.itembox.cloud/item/img/v2/common/icon_header_mypage_2x.webp"); }
.rs-c-utility-nav__item:nth-child(2) > a::before { background-image: url("https://fudosan2103.itembox.cloud/item/img/v2/common/icon_header_login_2x.webp"); }
.rs-c-utility-nav__item:nth-child(3) > a::before { background-image: url("https://fudosan2103.itembox.cloud/item/img/v2/common/icon_header_wishlist_2x.webp"); }
.rs-c-utility-nav__item:nth-child(4) > a::before { background-image: url("https://fudosan2103.itembox.cloud/item/img/v2/common/icon_header_cart_2x.webp"); }

/* ヘッダー内ユーティリティの見た目（デザイン：灰 #918b8a） */
.rs-l-header__utility .rs-c-utility-nav {
  /* ラベル幅が項目ごとに異なるため、項目幅を固定してアイコン間隔を一定に保つ */
  gap: 0;
}

.rs-l-header__utility .rs-c-utility-nav__item {
  flex: 0 0 auto;
  width: 6.75rem; /* カンプ：アイコン中心のピッチ 67.5px */
}

.rs-l-header__utility .rs-c-utility-nav__item > a {
  gap: 2px;
  color: var(--hd-icon);
  line-height: 1.2;
  white-space: nowrap;
}

.rs-l-header__utility .rs-c-utility-nav__item > a::before {
  width: 36px;
  height: 36px;
  opacity: .5; /* Illustrator上の透明度50%に準拠（濃色SVG→デザインの灰トーン） */
}

/* --- ブレイクポイント：768px以上＝PC横組ロゴ・ヘッダー拡大 --- */
@media (min-width: 768px) {
  .rs-l-header {
    /* PC基準幅 1366px を 1 とした拡縮率。カンプ実測値に掛けて使う。
       1366px以上＝1（カンプ実寸）／狭い側は 0.75 で下げ止まりさせ、
       検索フォームの文字が窮屈になりすぎないようにする。 */
    --hd-u: clamp(0.75px, 0.0732vw, 1px);

    --hd-height:           80px;
    --hd-logo-w:           calc(507.5 * var(--hd-u));
    --hd-search-w:         calc(252.5 * var(--hd-u));
    --hd-search-h:         38px;   /* 操作性を優先し高さは固定 */
    --hd-search-border:    2px;
    --hd-search-icon:      calc(23 * var(--hd-u));
    --hd-search-icon-x:    calc(13 * var(--hd-u));
    --hd-search-indent:    calc(46 * var(--hd-u)); /* 枠左からテキスト開始まで 48px */
    --hd-search-pad-r:     calc(16 * var(--hd-u));
    --hd-search-optical-y: calc(3 * var(--hd-u));
    --hd-search-fs:        calc(18 * var(--hd-u));
    --hd-search-ph-fs:     var(--hd-search-fs);
    --hd-gap-after-search: 0.95rem;
  }

  .rs-l-header__logo {
    align-self: center; /* PCカンプ：ロゴは上下中央 */
  }
}

/* --- 1024px以上：ユーティリティナビを表示 --- */
@media (min-width: 1024px) {
  .rs-l-header {
    /* 検索フォーム → ユーティリティナビの間隔（1366px で 63px） */
    --hd-gap-after-search: calc(63 * var(--hd-u));
  }

  .rs-l-header__utility {
    display: block;
    /* カンプではアイコン群の中心が上下中央よりわずかに下（+2.5px） */
    margin-top: 0.5rem;
    margin-right: 0.95rem; /* ユーティリティナビ → ハンバーガー枠 */
  }
}


/* =========================================================
   2. Layout / Main & Footer
   ========================================================= */
.rs-l-main {
  display: block;
}

/* =========================================================
   3. Component / Button
   ========================================================= */
.rs-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1.2rem 2.4rem;
  border-radius: var(--radius-md);
  background-color: var(--color-theme);
  color: var(--color-text-invert);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  transition: opacity .2s ease, background-color .2s ease;
}

.rs-c-btn:hover {
  opacity: .9;
}

.rs-c-btn--cta {
  background-color: var(--color-cta);
}

.rs-c-btn--cta:hover {
  background-color: var(--color-cta-dark);
  opacity: 1;
}

.rs-c-btn--pill {
  border-radius: var(--radius-pill);
}


/* =========================================================
   3. Component / Hamburger
   サイズ：SP 50×50 / PC 80×80（各ヘッダー高と同じ・右端ぴったり）
   線（閉）：幅 SP 19px / PC 20px・間隔8px（カンプ準拠）
            太さはカンプ実測1pxだが、非Retina環境で半端な描画になり
            細く弱く見えるため2pxとし、位置も整数pxに載せている。
   背景：白
   ========================================================= */
.rs-c-hamburger {
  --hamburger-bar-w:   19px;
  --hamburger-bar-h:   2px;
  --hamburger-bar-gap: 8px;

  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  background-color: var(--color-bg); /* 白 */
}

.rs-c-hamburger__bar,
.rs-c-hamburger__bar::before,
.rs-c-hamburger__bar::after {
  position: absolute;
  left: 50%;
  width: var(--hamburger-bar-w);
  height: var(--hamburger-bar-h);
  background-color: var(--color-ink);
  transition: transform .3s ease, opacity .2s ease;
}

.rs-c-hamburger__bar {
  /* 線がぼやけないよう、中央合わせは translateY ではなく整数px計算で行う
     （SP：25-1=24px ／ PC：40-1=39px と必ず整数になる） */
  top: calc(50% - var(--hamburger-bar-h) / 2);
  transform: translateX(-50%);
}

.rs-c-hamburger__bar::before,
.rs-c-hamburger__bar::after {
  content: "";
  left: 0;
}

.rs-c-hamburger__bar::before { top: calc(var(--hamburger-bar-gap) * -1); }
.rs-c-hamburger__bar::after  { top: var(--hamburger-bar-gap); }

/* ハンバーガー線（閉）：PC 20px幅／箱 80×80 */
@media (min-width: 768px) {
  .rs-c-hamburger {
    --hamburger-bar-w: 20px;

    width: 80px;
    height: 80px;
  }
}

/* 開いている間は × 形に（body に is-drawer-open を付与） */
.rs-is-drawer-open .rs-c-hamburger__bar {
  background-color: transparent;
}

.rs-is-drawer-open .rs-c-hamburger__bar::before {
  top: 0;
  transform: rotate(45deg);
}

.rs-is-drawer-open .rs-c-hamburger__bar::after {
  top: 0;
  transform: rotate(-45deg);
}


/* =========================================================
   3. Component / Scroll Lock（Drawer 展開中の背面スクロール抑止）
   JS が html 要素に .rs-is-scroll-locked を付与する。
   html 側の scrollbar-gutter: stable によりレイアウトシフトは発生しない。
   ========================================================= */
.rs-is-scroll-locked,
.rs-is-scroll-locked body {
  overflow: hidden;
}


/* =========================================================
   3. Component / Overlay
   ========================================================= */
.rs-c-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-overlay);
  opacity: 0;
  transition: opacity .3s ease;
}

.rs-c-overlay.rs-is-active {
  opacity: 1;
}


/* =========================================================
   3. Component / Drawer
   基準：SP 375px（全幅）/ PC 1366px（右パネル 幅400px）

   カンプ実測（CSS px）
     SP 375  … リスト左右余白 37.5／1行 38／文字 14.5／区切り #dddede
               ヘッド：アイコン29・ラベル9.5・項目ピッチ63・×枠50×50（右上）
               サブリスト：2列・中央寄せ・1行32
     PC 1366 … パネル幅400／リスト余白 左44.5・右49.5／1行37／文字16
               背景は白の透過95%（カンプ実測は98%だが指定値を優先）
               ヘッド：アイコン36・ラベル12・項目ピッチ67.5・×枠80×80（右上）
               　→ヘッダーのユーティリティナビ／ハンバーガーと同位置に重なる
               サブリスト：1列・左寄せ（リスト左端から114px字下げ）
     ※区切り線は各項目の下側のみ（先頭項目の上には線を引かない）
   ========================================================= */
.rs-c-drawer {
  /* --- Drawer scope tokens --- */
  --drawer-bg:           rgba(255, 255, 255, .95); /* 透過率95%（SP/PC共通） */
  --drawer-line:         #dddede;
  --drawer-text:         #575554;
  --drawer-icon:         #8e8887;
  --drawer-mark:         #727171;  /* アコーディオンの ＋／− */
  --drawer-close:        var(--color-ink);

  --drawer-pad-start:    3.75rem;
  --drawer-pad-end:      3.75rem;
  --drawer-item-h:       3.8rem;
  --drawer-item-fs:      1.45rem;  /* カンプ実測 14.5px */
  --drawer-col2:         12rem;    /* 2カラム時の2列目の開始位置 */
  --drawer-sub-h:        3.2rem;
  --drawer-sub-gap:      3.45rem; /* 2列時の列間（--wide のみ使用） */
  --drawer-sub-indent:   6rem;    /* サブリスト1列目の字下げ（カンプ：37.5+60=97.5） */
  --drawer-mark-size:    15px;

  --drawer-head-pt:      1.35rem;
  --drawer-head-icon:    29px;
  --drawer-head-fs:      0.95rem;  /* カンプ実測 9.5px */
  --drawer-head-item:    6.3rem;   /* アイコン中心のピッチ 63px */
  --drawer-head-gap:     1.2rem;   /* ユーティリティ → ×ボタン */
  --drawer-head-icon-gap: 0px;

  --drawer-close-box:    50px;     /* ヘッダーのハンバーガー枠と同寸 */
  --drawer-close-bar:    27.5px;

  --drawer-foot-fs:      1.05rem;
  --drawer-foot-gap:     3.2rem;

  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-drawer);
  width: 100%;
  height: 100dvh;
  padding-bottom: var(--space-lg);
  background-color: var(--drawer-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  transform: translateX(100%);
  transition: transform .3s ease;
}

.rs-c-drawer.rs-is-open {
  transform: translateX(0);
}

/* PCは右側パネル（幅400px・背景は下のページが薄く透ける） */
@media (min-width: 768px) {
  .rs-c-drawer {
    --drawer-pad-start:    4.45rem;
    --drawer-pad-end:      4.95rem;
    --drawer-item-h:       3.7rem;
    --drawer-item-fs:      1.6rem;
    --drawer-col2:         11.4rem;
    --drawer-sub-h:        3.6rem;
    --drawer-sub-indent:   0;

    --drawer-head-pt:      1.65rem;
    --drawer-head-icon:    36px;
    --drawer-head-fs:      1.2rem;
    --drawer-head-item:    6.75rem;
    --drawer-head-gap:     0.95rem;
    --drawer-head-icon-gap: 2px;

    --drawer-close-box:    80px;
    --drawer-close-bar:    29px;

    --drawer-foot-fs:      1.2rem;
    --drawer-foot-gap:     3.6rem;

    width: 400px;
  }
}

/* --- Drawer head（ユーティリティナビ＋閉じるボタン） --- */
.rs-c-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: var(--drawer-close-box);
}

/* ドロワー内ユーティリティ（PCではヘッダーのユーティリティナビに重なる） */
.rs-c-utility-nav--drawer {
  gap: 0;
  margin-right: var(--drawer-head-gap);
  padding-top: var(--drawer-head-pt);
}

.rs-c-utility-nav--drawer .rs-c-utility-nav__item {
  flex: 0 0 auto;
  width: var(--drawer-head-item);
}

.rs-c-utility-nav--drawer .rs-c-utility-nav__item > a {
  gap: var(--drawer-head-icon-gap);
  font-size: var(--drawer-head-fs);
  line-height: 1.2;
  color: var(--drawer-icon);
  white-space: nowrap;
}

.rs-c-utility-nav--drawer .rs-c-utility-nav__item > a::before {
  width: var(--drawer-head-icon);
  height: var(--drawer-head-icon);
  opacity: .5;
}

.rs-c-drawer__close {
  position: relative;
  width: var(--drawer-close-box);
  height: var(--drawer-close-box);
  flex-shrink: 0;
}

.rs-c-drawer__close::before,
.rs-c-drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--drawer-close-bar);
  height: 2px;
  background-color: var(--drawer-close);
}

.rs-c-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.rs-c-drawer__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Drawer list --- */
.rs-c-drawer__list {
  padding-inline: var(--drawer-pad-start) var(--drawer-pad-end);
}

/* カンプ：区切り線は各項目の下側のみ */
.rs-c-drawer__item {
  border-bottom: 1px solid var(--drawer-line);
}

.rs-c-drawer__link,
.rs-c-drawer__accordion {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--drawer-item-h);
  padding: 0;
  font-size: var(--drawer-item-fs);
  font-weight: var(--fw-medium);
  color: var(--drawer-text);
  text-align: left;
}

/* 2列インライン（会員登録｜メルマガ登録 / 会社概要｜採用情報） */
.rs-c-drawer__item--inline {
  display: flex;
}

.rs-c-drawer__item--inline .rs-c-drawer__link {
  min-width: 0;
}

.rs-c-drawer__item--inline .rs-c-drawer__link:first-child {
  flex: 0 0 auto;
  width: var(--drawer-col2);
}

.rs-c-drawer__item--inline .rs-c-drawer__link + .rs-c-drawer__link {
  flex: 1 1 auto;
}

/* --- Accordion --- */
.rs-c-drawer__accordion {
  justify-content: space-between;
}

.rs-c-drawer__accordion-icon {
  position: relative;
  width: var(--drawer-mark-size);
  height: var(--drawer-mark-size);
  flex-shrink: 0;
}

.rs-c-drawer__accordion-icon::before,
.rs-c-drawer__accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--drawer-mark);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.rs-c-drawer__accordion-icon::before { width: var(--drawer-mark-size); height: 2px; } /* 横棒 */
.rs-c-drawer__accordion-icon::after  { width: 2px; height: var(--drawer-mark-size); } /* 縦棒 */

/* 展開中は「−」に（縦棒を消す） */
.rs-c-drawer__accordion[aria-expanded="true"] .rs-c-drawer__accordion-icon::after {
  opacity: 0;
}

/* --- Sublist（アコーディオン中身 / JSで開閉） --- */
.rs-c-drawer__sublist {
  display: grid;
  grid-template-columns: 1fr 1fr; /* SP：2列 */
  padding-inline-start: var(--drawer-sub-indent);
  padding-bottom: 0.5rem;
  overflow: hidden;
  max-height: 0;
  /* 閉じている間はキーボードフォーカスが入らないようにする */
  visibility: hidden;
  transition: max-height .3s ease, visibility 0s linear .3s;
}

/* 展開中（max-height は JS が付与） */
.rs-c-drawer__accordion[aria-expanded="true"] + .rs-c-drawer__sublist {
  visibility: visible;
  transition: max-height .3s ease, visibility 0s linear 0s;
}

.rs-c-drawer__sublist > li > a {
  display: flex;
  align-items: center;
  /* カンプ：サブリストは列ごとに左端を揃える（行によって文字数が違っても
     左位置が動かないよう、中央寄せではなく列の開始位置で揃える） */
  justify-content: flex-start;
  min-height: var(--drawer-sub-h);
  padding: 0;
  font-size: var(--drawer-item-fs);
  color: var(--drawer-text);
}

/* SP：ラベルが長い店舗ショールームだけは字下げなしで、
   親項目「店舗のご案内」と左端が揃う（カンプ準拠）。
   1列目＝「大津店ショールーム」の文字幅、列間34.5pxで2列目もカンプ位置に一致。 */
.rs-c-drawer__sublist--wide {
  --drawer-sub-indent: 0;

  grid-template-columns: max-content 1fr;
  column-gap: var(--drawer-sub-gap);
}

/* PCは submenu を1列・左寄せ（カンプ：リスト左端から114px字下げ） */
@media (min-width: 768px) {
  .rs-c-drawer__sublist {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .rs-c-drawer__sublist > li > a {
    justify-content: flex-start;
    padding-inline: var(--drawer-col2) 0;
  }
}

/* --- 会員登録｜メルマガ登録：SP=2列 / PC=別行（区切り付き） --- */
@media (min-width: 768px) {
  .rs-c-drawer__item--stack-pc {
    display: block;
  }

  /* .rs-c-drawer__item--inline の :first-child 指定（詳細度0,3,0）を上書きするため
     同じ詳細度で再指定する */
  .rs-c-drawer__item--stack-pc .rs-c-drawer__link,
  .rs-c-drawer__item--stack-pc .rs-c-drawer__link:first-child {
    width: 100%;
  }

  .rs-c-drawer__item--stack-pc .rs-c-drawer__link + .rs-c-drawer__link {
    border-top: 1px solid var(--drawer-line);
  }
}

/* --- Drawer foot links --- */
.rs-c-drawer__foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem var(--drawer-foot-gap);
  padding: 1.4rem var(--drawer-pad-end) 0 var(--drawer-pad-start);
}

.rs-c-drawer__foot-links a {
  font-size: var(--drawer-foot-fs);
  color: var(--drawer-text);
}


/* =========================================================
   3. Component / Section Title（セクション見出し ＋ 下部装飾）
   troubles / price / features / showroom / flow / faq / area で共通。
     ① ベースライン（--deco-w × --deco-line）
     ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
     ③ 45°の斜線（--deco-gap 角・線幅 --deco-line）
   ②は「背景色の矩形」ではなくグラデーションの透明区間で表現しており、
   背景色に依存せず、要素も増やさない。

   各セクションでは原則 --deco-w と color のみを上書きする。
   ※ .rs-s-showroom__title は section__title を持たないため個別に併記する
   ========================================================= */
.rs-c-section__title,
.rs-s-showroom__title {
  --deco-w:    24.8rem; /* ①の長さ。カンプSP 248px */
  --deco-gap:  0.8rem;  /* ②の幅 ＝ ③の一辺 */
  --deco-line: 1px;     /* ①③の線幅（ヘアラインは非伸縮） */

  position: relative;
  padding-bottom: 1.4rem; /* カンプ実測：文字下端→装飾ライン 8px */
  color: var(--color-theme);
  font-size: 2rem;        /* カンプSP：20pt */
  font-weight: var(--fw-black);
  line-height: 1.3;
  text-align: center;
}

/* ①＋② */
.rs-c-section__title::after,
.rs-s-showroom__title::after {
  content: "";
  position: absolute;
  left: 50%;
  /* 線の「中心」が ③ の上端と一致するよう、線幅の半分だけ持ち上げる */
  bottom: calc(var(--deco-gap) - var(--deco-line) / 2);
  translate: -50% 0;
  width: min(var(--deco-w), 100%);
  height: var(--deco-line);
  background: linear-gradient(to right,
      currentColor 0 50%,
      transparent  50% calc(50% + var(--deco-gap)),
      currentColor calc(50% + var(--deco-gap)) 100%);
}

/* ③ */
.rs-c-section__title::before,
.rs-s-showroom__title::before {
  content: "";
  position: absolute;
  left: calc(50% + var(--deco-gap));
  bottom: 0;
  translate: -100% 0;
  width: var(--deco-gap);
  height: var(--deco-gap);
  background: linear-gradient(to bottom right,
      transparent  calc(50% - var(--deco-line) / 2),
      currentColor calc(50% - var(--deco-line) / 2) calc(50% + var(--deco-line) / 2),
      transparent  calc(50% + var(--deco-line) / 2));
}

/* PC：カンプ実測で全セクション共通（線 2px／切り欠き 16px／見出し 40px、
   文字下端→装飾ラインは 17〜18px） */
@media (min-width: 768px) {
  .rs-c-section__title,
  .rs-s-showroom__title {
    --deco-gap:  clamp(1rem, 1.17vw, 1.6rem); /* 1366 = 16px */
    --deco-line: 2px;

    padding-bottom: 2.85rem;
    font-size: clamp(2.4rem, 2.93vw, 4rem);   /* 1366 = 40px */
  }
}


/* =========================================================
   3. Component / CTA Box（MV下部の主CTAボタン・静的）
   デザイン：赤ピル（h80）＋左の白丸「無料」＋右chevron
   文字：Noto Medium（SP 1.5rem／PC 2.2rem=22pt）
   ========================================================= */
.rs-c-cta-box {
  width: 100%;
  max-width: 300px;          /* 仕様：SP 300×60 */
  margin-inline: auto;
}

.rs-c-cta-box__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;          /* 仕様：SP 高さ60px */
  /* SPカンプ：ラベル中心はピル中心と一致（アイコンは左に重ねる） */
  padding: 0.4rem 4.5rem 0.4rem 4.4rem;
  background-color: var(--color-em); /* 仕様：CTA背景色 */
  font-size: 1.4rem;         /* 仕様：14pt Medium */
  font-weight: var(--fw-medium);
  line-height: 1.45;
}

.rs-c-cta-box__main:hover {
  background-color: #d83d4c;
}

/* ラベル：SPはbrで2行 / PCは1行
   カンプは和文の字詰め（palt）が効いた状態で、特に「・」が半角相当まで詰まる。
   ベタ組みのままだと約6%横に伸び、左の「無料」アイコンに文字が接触するため、
   MVコピー（.rs-s-mv__title 等）と同じく palt を適用して字面を揃える。 */
.rs-c-cta-box__label {
  font-feature-settings: "palt";
  white-space: nowrap;
}

/* 「無料」アイコン（mv_free_2x.webp・左） */
.rs-c-cta-box__free {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4.8rem;             /* 仕様：SP 48×48 */
  height: 4.8rem;
}

/* chevron（右） */
.rs-c-cta-box__main::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 768px) {
  .rs-c-cta-box {
    max-width: 500px;        /* カンプ実測：499.5×100 */
  }

  .rs-c-cta-box__main {
    min-height: 10rem;       /* 仕様：PC 高さ100px */
    /* PCカンプ：ラベル中心は「アイコン右端(90px)〜矢印左端(463.5px)」の中央。
       左右paddingでその中心を作り、アイコンとの間に約12pxの余白を確保する。 */
    padding: 0.8rem 4.4rem 0.8rem 9.7rem;
    font-size: 2.2rem;       /* 仕様：22pt Medium */
  }

  .rs-c-cta-box__br {
    display: none;           /* PCは1行 */
  }

  .rs-c-cta-box__free {
    left: 1rem;
    width: 8rem;             /* 仕様：PC 80×80 */
    height: 8rem;
  }


  .rs-c-cta-box__main::after {
    right: 2.6rem;
    width: 1.8rem;           /* カンプ矢印 高さ約26px相当 */
    height: 1.8rem;
    border-width: 3px;
  }
}


/* =========================================================
   3. Component / Floating CTA（下部追従）
   基準：SP 375px / PC 1366px
   お見積り（赤）＋各店舗の来店予約（白）を横並び。
   SP … 画面幅いっぱいの4分割
   PC … 中央に幅454pxのバー＋右端にTOPボタン
   ========================================================= */
.rs-c-floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-floating-cta);
  transform: translateY(100%);
  transition: transform .3s ease;
}

/* JSで一定量スクロール後に表示 */
.rs-c-floating-cta.rs-is-visible {
  transform: translateY(0);
}

.rs-c-floating-cta__inner {
  position: relative;
}

.rs-c-floating-cta__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, .16);
}

.rs-c-floating-cta__item {
  flex: 1 1 0;
  min-width: 0;
}

.rs-c-floating-cta__item + .rs-c-floating-cta__item {
  border-left: 1px solid #e0e0e0;
}

.rs-c-floating-cta__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  height: 100%;
  min-height: 4.5rem;
  padding: 0.4rem 0.4rem;
  color: var(--color-ink);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s ease;
}

.rs-c-floating-cta__link:hover {
  opacity: .8;
}

.rs-c-floating-cta__shop {
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
}

.rs-c-floating-cta__sub {
  font-size: 1.1rem;
}

/* お見積り（赤・アイコン付き） */
.rs-c-floating-cta__item--quote {
  border-left: 0;
}

.rs-c-floating-cta__item--quote .rs-c-floating-cta__link {
  flex-direction: row;
  gap: 0.4rem;
  background-color: var(--color-em);
  color: #fff;
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
}

.rs-c-floating-cta__icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: auto;
}

/* TOPへ戻る（PCのみ表示） */
.rs-c-floating-cta__pagetop {
  display: none;
}


/* =========================================================
   Floating CTA / PC（768px以上）
   背景はブラウザ幅いっぱいの白。その上に中央のバーと右端のTOPボタン。
   ========================================================= */
@media (min-width: 768px) {
  .rs-c-floating-cta {
    padding-block: 1.8rem;
    background-color: #fff;
  }

  .rs-c-floating-cta__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1366px;
    margin-inline: auto;
    padding-inline: clamp(1.6rem, 3vw, 4rem);
  }

  .rs-c-floating-cta__list {
    width: 45.4rem;
    border-radius: 0.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    overflow: hidden;
  }

  .rs-c-floating-cta__link {
    min-height: 5.4rem;
    gap: 0;
    font-size: 1.3rem;
  }

  .rs-c-floating-cta__shop {
    font-size: 1.8rem;
  }

  .rs-c-floating-cta__sub {
    font-size: 1.3rem;
  }

  .rs-c-floating-cta__item--quote .rs-c-floating-cta__link {
    gap: 0.5rem;
    font-size: 1.7rem;
  }

  .rs-c-floating-cta__icon {
    width: 2.8rem;
  }

  /* TOPボタン */
  .rs-c-floating-cta__pagetop {
    position: absolute;
    right: calc(clamp(1.6rem, 3vw, 4rem) + 4.5rem);
    bottom: 0;
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    width: 3.7rem;
    color: var(--color-key);
    font-size: 2.2rem;
    font-weight: var(--fw-demilight);
    line-height: 1;
    text-decoration: none;
    transition: opacity .2s ease;
  }

  .rs-c-floating-cta__pagetop:hover {
    opacity: .7;
  }

  .rs-c-floating-cta__pagetop-arrow {
    display: block;
    width: 3.7rem;
    height: auto;
  }
}


/* =========================================================
   4. Project / MV（メインビジュアル）
   基準：SP 375px / PC 1366px
   背景：SP＝メイン画像のみ / PC＝メイン画像(1920×700)＋グラデ
   下部：var(--color-key) 40% の帯（SP130 / PC220、画像に重ねる）
   ========================================================= */
.rs-s-mv {
  /* 価格画像の表示幅（カンプ実測：SP 335px / PC 657px＝原寸） */
  --mv-price-w: 33.5rem;

  position: relative;
  overflow-x: clip;   /* 帯の左はみ出しをクリップ（縦は保持） */
}

/* 背景メディア（メイン画像＋PCグラデ）。sectionは各ヘッダー下から始まる想定 */
.rs-s-mv__media {
  position: absolute;
  left: 0;
  top: 0;                 /* SP：ヘッダー(50px)直下から画像 */
  width: 100%;
  height: 450px;          /* SP：画像450px */
  z-index: 0;
  /* MVの写真はページごとに異なるため、変数で受け取る。
     実体は reform_[識別子]_v2.css の body で定義する。 */
  background: var(--mv-image-sp, none) bottom center / cover no-repeat;
}

/* 下部の青半透明帯 */
.rs-s-mv__rect {
  position: absolute;
  left: 0;
  top: 430px;             /* SP：画像下端(450) − 重なり(20) */
  width: 100%;
  height: 130px;          /* SP：130px */
  z-index: 1;
  /* TODO(他ページ展開時): テーマ色の直書き。--color-theme に追従しない */
  background-color: rgba(0, 146, 191, 0.4);
}

/* コンテンツ層 */
.rs-s-mv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 560px;      /* SP：ヘッダー下〜帯下端まで(610−50) */
  max-width: 1218px;
  margin-inline: auto;
  padding: 1.6rem 1.6rem 2.6rem;
}

/* --- バッジ --- */
.rs-s-mv__badges {
  display: flex;
  gap: 0.55rem;
  /* カンプSP：バッジ列だけコンテンツ左右余白より外側（左右11.5px）まで広がる */
  margin-inline: -0.45rem;
  margin-bottom: 0.9rem;
}

.rs-s-mv__badge img {
  height: 64px;           /* カンプSP実測：64px */
  width: auto;
}

/* --- コピー --- */
.rs-s-mv__copy {
  margin-bottom: 1.2rem;
}

.rs-s-mv__area {
  /* 帯はコンテンツ左端より外側へ（SP:6px＝左端0 / PC:57px＝左端33px）起点・固定幅 */
  display: flex;
  align-items: center;          /* テキストを帯の上下中央へ */
  width: fit-content;
  margin-left: -1.6rem;
  padding: 0.2rem 1.2rem 0.2rem 2.3rem;  /* 帯高22px。左padでカンプの字下げへ */
  min-width: 270px;                      /* 「大津市・栗東市」化に合わせて延長 */
  background: url("https://fudosan2103.itembox.cloud/item/img/v2/common/mv_GR_area_2x.webp") left center / 270px 100% no-repeat;
  font-feature-settings: "palt";
  font-size: 1.5rem;                     /* 仕様：15.19pt */
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: #3e3a39;
}

/* 帯内テキスト：単一の子として中央揃え。内部はinlineでベースライン維持 */
.rs-s-mv__band-text {
  display: block;
}

/* （大津・栗東）・「の」：28pt中の22pt相当。大文字と縦中央で揃える */
.rs-s-mv__area-sub {
  font-size: 0.786em;
  vertical-align: middle;
}

/* h1 は「エリア帯（.rs-s-mv__area）」「タイトル帯（.rs-s-mv__band-text）」
   「ブランド帯（.rs-s-mv__brand）」をまとめる素の入れ物。
   帯そのものの装飾と帯間隔は、各帯の要素側で持つ。 */
.rs-s-mv__title {
  font-feature-settings: "palt";
  font-size: 2.5rem;                     /* カンプ実測：字面幅173.5px相当 */
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: #3e3a39;
}

/* タイトル帯本体。内部は inline のまま（title-sub の vertical-align を維持）。 */
.rs-s-mv__title > .rs-s-mv__band-text {
  display: block;
  width: fit-content;
  margin-top: 0.6rem;                    /* 仕様：帯間隔 area→title SP 6px */
  margin-left: -1.6rem;
  /* カンプは「滋賀…」の字面左端と視覚的に揃うため、カナの左サイドベアリング分を引く */
  padding: 0 1.2rem 0 1.9rem;
  min-width: 375px;
  background: url("https://fudosan2103.itembox.cloud/item/img/v2/common/mv_GR_title_2x.webp") left center / 375px 100% no-repeat;
}

/* 「なら」：45pt中の35pt相当。大文字と縦中央で揃える */
.rs-s-mv__title-sub {
  font-size: 0.78em;
  vertical-align: middle;
  position: relative;
  top: -0.11em;              /* 中央位置の微調整（かな字形の下寄りを補正） */
}

.rs-s-mv__title-main {
  color: var(--color-em);
}

.rs-s-mv__brand {
  display: flex;
  align-items: center;
  gap: 0.15em;                           /* カンプ実測：タグ→社名の字面間隔 */
  width: fit-content;
  margin-left: -1.6rem;
  padding: 0 1.2rem 0 1.25rem;
  margin-top: 1.2rem;                    /* 仕様：帯間隔 title→brand SP 12px */
  min-width: 375px;
  background: url("https://fudosan2103.itembox.cloud/item/img/v2/common/mv_GR_brand_2x.webp") left center / 375px 100% no-repeat;
  font-feature-settings: "palt";
  font-size: 2.6rem;                     /* 仕様：26.59pt */
  font-weight: var(--fw-black);
  line-height: 1.2;
  color: var(--color-key);
}

.rs-s-mv__brand-tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 0.4rem;
  background-color: var(--color-key);
  color: #fff;
  font-size: 0.72em;   /* 比率 35/49・19/26.6 */
  line-height: 1.2;
  transform: rotate(-10deg);   /* 仕様：傾き10°（背景含む） */
}

.rs-s-mv__lead {
  margin-top: 1.45rem;                   /* カンプ実測：1行目の字面上端 211.5px */
  transform: translateX(3.5px);          /* カンプ実測：字面左端 21.5px */
  font-size: 1.3rem;                     /* 仕様：13pt Medium */
  font-weight: var(--fw-medium);
  line-height: 1.92;                     /* カンプ実測：行送り25px（13px×1.92） */
  color: #3e3a39;
  /* 白い縁取り（text-shadowはstrokeと干渉するためstroke＋paint-order） */
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
}

/* --- 価格（下部・帯の上）：mv_price_2x.webp（画像実装） --- */
.rs-s-mv__price {
  margin-top: auto;
}

.rs-s-mv__price img {
  display: block;
  width: 100%;
  max-width: var(--mv-price-w);
  height: auto;
  margin-inline: auto;
}

/* --- CTA（下部・中央） --- */
.rs-s-mv__cta {
  margin-top: 1rem;
}

/* =========================================================
   PC（768px以上）：画像はヘッダー(80px)背面へ、グラデ＋帯を拡大
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-mv__media {
    top: -80px;           /* ヘッダー背面(ページ最上部)まで引き上げ */
    height: 700px;
    background:
      /* 画像の原寸はページごとに異なるため変数で受け取る。
         既定値 1920×700 は従来ページ用のフォールバック。 */
      var(--mv-image-pc, none) top center / var(--mv-image-pc-size, 1920px 700px) no-repeat,
      linear-gradient(to right, #e0ddcf 30%, #ecede8 70%);
  }

  .rs-s-mv__rect {
    top: 580px;           /* 画像下端(700) − 重なり(40) − ヘッダ相当(80) */
    height: 220px;
  }

  .rs-s-mv__inner {
    min-height: 800px;    /* ページ上端〜帯下端(880) − ヘッダ(80) */
    padding: 3.4rem 1.6rem 3rem;

    /* 帯（.rs-s-mv__area / __title>__band-text / __brand）は margin-left: -5.7rem で
       コンテンツ左端より外側へ張り出す。センタリングによる外側余白が
       5.7rem に満たない幅（〜1320px）では画面外へ切れてしまうため、
       不足ぶんだけ左パディングで逃げを確保する。
         5.7rem（張り出し）＋ 1.6rem（最小余白） = 7.3rem
       外側余白が足りている 1366px 以上では 1.6rem のまま変化しない。 */
    padding-left: max(1.6rem, calc(7.3rem - max(0px, (100% - 121.8rem) / 2)));
  }

  .rs-s-mv__badge img {
    height: 134px;        /* PC：約134px */
  }

  .rs-s-mv__badges {
    gap: 1.6rem;
    margin-inline: 0;        /* SPの張り出しを解除（PCはコンテンツ幅に揃える） */
    margin-bottom: 3.8rem;
  }

  .rs-s-mv__area {
    min-width: 510px;                    /* 「大津市・栗東市」化に合わせて延長 */
    margin-left: -5.7rem;                /* 左端33px（コンテンツ左90−57） */
    padding: 0.3rem 1.2rem 0.3rem 5.3rem;/* 帯高40px */
    background-size: 510px 100%;         /* 元仕様441.7px＋約68px */
    font-size: 2.8rem;                   /* 仕様：28pt */
  }

  .rs-s-mv__title {
    font-size: 4.65rem;                  /* カンプ実測：字面幅711px相当 */
  }

  .rs-s-mv__title > .rs-s-mv__band-text {
    min-width: 700px;
    margin-top: 1.2rem;                  /* 仕様：帯間隔 area→title PC 12px */
    margin-left: -5.7rem;

    /* カナの左サイドベアリング分を引き、「滋賀…」と字面左端を揃える */
    padding: 0 1.2rem 0 4.45rem;
    background-size: 700px 100%;         /* 仕様：700×52.8 */
  }

  .rs-s-mv__brand {
    min-width: 699px;
    margin-left: -5.7rem;
    padding: 0 1.2rem 0 5.3rem;
    margin-top: 2.2rem;                  /* 仕様：帯間隔 title→brand PC 22px */
    background-size: 699px 100%;         /* 仕様：698.9×58.5 */
    font-size: 4.9rem;                   /* 仕様：49pt */
  }

  .rs-s-mv__lead {
    font-size: 2rem;                     /* 仕様：20pt Medium */
    line-height: 1.85;                   /* カンプ実測：行送り37px（20px×1.85） */
    margin-top: 3.1rem;                  /* カンプ実測：1行目の字面上端 436px */
    transform: translateX(-4px);         /* カンプ実測：字面左端 88.5px */
    -webkit-text-stroke-width: 4px;
  }

  .rs-s-mv__cta {
    margin-top: 2rem;
  }

  .rs-s-mv__price img {
    --mv-price-w: 65.7rem;               /* PCは原寸657px */
  }

  .rs-c-cta-box__main::after {
    width: 2rem;
    height: 2rem;
    right: 2.6rem;
  }
}

/* 1300px以上：タグ部分のみを本文より外側へ出す（カンプ指定）
   コンテンツ左端に十分な余白ができるこの帯でのみ適用し、
   それ未満で画面外へ切れるのを防ぐ。transform なので後続テキストは動かない。 */
@media (min-width: 1300px) {
  .rs-s-mv__brand-tag {
    transform: translateX(-2rem) rotate(-10deg);
    /* 見た目だけ左へ出すと社名との間隔が広がるため、レイアウト幅も同じだけ詰める */
    margin-right: -2rem;
  }
}

/* 768〜1023px：メイン画像を右寄り表示にしてトイレの見切れを防ぐ */
@media (min-width: 768px) and (max-width: 1023px) {
  .rs-s-mv__media {
    background-position: 55% top, center;
  }
}


/* =========================================================
   4. Project / Troubles（お悩み提起）
   基準デザイン：SP 375px / PC 1366px
   背景 var(--color-surface-warm) ／ 見出し青 var(--color-key) ／ 枠・チェック・項目文字 オリーブ #5b5100
   強調赤 var(--color-em)

   ■ 寸法の指定方式（--troubles-u）
     PC帯は area / contact と同様、「カンプ実寸(px) × --troubles-u」で指定する。
     box が 1005px と大きく、768px ではコンテンツ幅が約 700px しか無いため、
     項目文（最長41文字を1行）を折り返させないには一括縮小が必要となる。
       PC … コンテンツ幅が最大 1085px に達する 1165px 以上で 1px 固定。
             下限 0.72px（＝約839px以下）は SP の文字サイズを下回らせないための床。
     SP帯はカンプに明示的な改行（--sp）があり幅依存が小さいため rem 固定とする。

   ■ 約物について
     カンプでは見出し・項目・帯文に「約物半角（palt）」が掛かっているが、
     リード文には掛かっていないため、リード文のみ palt を解除する。

   ブレークポイント：
     base             … SP（375px）。イラストは box 上・中央
     min-width 768px  … タイポ／box内部を PC 基準へ（等倍縮小）
     min-width 1100px … イラストを box 右上へオーバーハング（1366px で一致）
   ========================================================= */
.rs-s-troubles {
  /* --- セクションスコープのデザイントークン --- */
  --troubles-bg:          var(--color-surface-warm);
  --troubles-text:        var(--color-ink);
  --troubles-accent:      var(--color-key); /* 見出し・下線 */
  --troubles-frame:       #5b5100; /* 枠・チェック・項目文字・矢印 */
  --troubles-em:          var(--color-em); /* 強調 */

  /* カンプ 1px 相当の可変単位（SP帯は等倍のまま） */
  --troubles-u: 1px;

  --troubles-box-width:      100%;
  --troubles-box-border:     2px;
  --troubles-box-radius:     1.5rem;
  --troubles-box-deco:       url("https://fudosan2103.itembox.cloud/item/img/v2/common/troubles_back_sp_2x.webp");
  --troubles-box-deco-size:  16.3%; /* box幅比（カンプSP：337 に対し 55px） */
  --troubles-check-size:     2rem;
  --troubles-illust-width:   227px;

  padding-block: 3.2rem 1.25rem;
  background-color: var(--troubles-bg);
  color: var(--troubles-text);
  /* palt：Illustrator の「約物半角」に相当 */
  font-feature-settings: "palt";
  overflow: clip; /* PC時に右上へはみ出すイラストの横スクロール防止 */
}

/* カンプSP：box 337px（＝375px から左右19px） */
.rs-s-troubles__inner {
  padding-inline: 1.9rem;
}

/* ---------------------------------------------------------
   見出し ＋ 下部装飾
   装飾は area セクションと同一仕様（①下線／②中央の切り欠き／③45°の斜線）
   ① ベースライン（--deco-w × --deco-line）
   ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
   ③ 45°の斜線（--deco-gap 角・線幅 --deco-line）
   --------------------------------------------------------- */
.rs-s-troubles__title {
  --deco-w: 263px; /* ①の長さ。カンプSP：下線 263px */

  color: var(--troubles-accent);
}

/* 改行制御（既存セクションと同一の命名規則） */
.rs-s-troubles__br--pc { display: none; }
.rs-s-troubles__br--sp { display: inline; }

/* --- リード --- */
.rs-s-troubles__lead {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 1.3rem; /* カンプ：13pt */
  font-weight: var(--fw-regular);
  line-height: 1.73;
  /* カンプのリード文は約物が全角のままのため palt を解除する */
  font-feature-settings: normal;
}

/* --- 本体（チェックリストbox＋イラスト） --- */
.rs-s-troubles__body {
  position: relative;
  margin-top: 1.1rem;
}

/* イラスト：SPはboxの上側・中央に配置（カンプではboxとほぼ接する） */
.rs-s-troubles__illust {
  display: block;
  width: var(--troubles-illust-width);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* チェックリストbox */
.rs-s-troubles__list {
  position: relative;
  max-width: var(--troubles-box-width);
  margin-inline: auto;
  border: var(--troubles-box-border) solid var(--troubles-frame);
  border-radius: var(--troubles-box-radius);
  padding: 0.9rem 1.2rem 0.8rem;

  background-color: #fff;
  background-image: var(--troubles-box-deco);
  background-repeat: no-repeat;
  background-position: right bottom;
  /* 装飾の基準を「枠の外角」にする。padding-box 基準だと角丸に沿って
     装飾と枠のあいだに白い隙間が出るため、枠の下へ潜り込ませて線を繋げる */
  background-origin: border-box;
  background-size: var(--troubles-box-deco-size) auto;
}

.rs-s-troubles__item {
  padding-left: 2.2rem;
  color: var(--troubles-frame);
  font-size: 1.3rem; /* カンプ：13pt */
  font-weight: var(--fw-bold);
  line-height: 1.5;
  background-image: url("https://fudosan2103.itembox.cloud/item/img/v2/common/troubles_list_2x.webp");
  background-repeat: no-repeat;
  background-position: left 0.35em;
  background-size: var(--troubles-check-size) auto;
}

.rs-s-troubles__item + .rs-s-troubles__item {
  margin-top: 1.25rem;
}

.rs-s-troubles__hl {
  color: var(--troubles-em);
}

/* --- 下向きchevron（二重） --- */
.rs-s-troubles__arrow {
  margin-top: 1.35rem;
  color: var(--troubles-frame);
  text-align: center;
}

.rs-s-troubles__arrow svg {
  display: block;
  width: 3.5rem;
  height: auto;
  margin-inline: auto;
}

/* --- 下部の帯文 --- */
.rs-s-troubles__more {
  margin-top: 1.15rem;
  text-align: center;
  color: var(--troubles-frame); /* カンプ実測：#5b5100 */
  font-size: 1.9rem; /* カンプ：19pt */
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

.rs-s-troubles__more-tag {
  display: inline-block;
  margin-inline: 0.3em;
  padding: 0.13em 0.32em;
  border-radius: 0.4rem;
  background-color: var(--troubles-frame);
  color: var(--color-text-invert);
  line-height: 1;
  vertical-align: 0.02em;
}

.rs-s-troubles__more-em {
  color: var(--troubles-em);
}


/* =========================================================
   Troubles / タブレット〜PC（768px以上）
   カンプ実測（1366px）：
     コンテンツ 1085 ／ box 1005×234.5（枠5・角丸30・内側 上20/右34/下21/左24）
     見出し 40px（装飾線 525／段差16）／ リード 18px・行送り31
     項目 19px・行送り28.5・項目間23・チェック38・字下げ43
     矢印 57×40 ／ 帯文 33px（タグ 265.5×48.5）
     イラスト 360×322（box右端 +138 ／ box上端 -92）
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-troubles {
    /* 1165px 以上でコンテンツ幅が 1085px に達するため、そこで 1px 固定。
       下限 0.72px は SP の文字サイズを下回らせないための床 */
    --troubles-u: clamp(0.72px, 0.0858vw, 1px);

    --troubles-box-width:     calc(1005 * var(--troubles-u));
    --troubles-box-border:    calc(5 * var(--troubles-u));
    --troubles-box-radius:    calc(30 * var(--troubles-u));
    --troubles-box-deco:      url("https://fudosan2103.itembox.cloud/item/img/v2/common/troubles_back_pc_2x.webp");
    --troubles-box-deco-size: 15.9%; /* box幅比（カンプPC：1005 に対し 160px） */
    --troubles-check-size:    calc(38 * var(--troubles-u));
    --troubles-illust-width:  calc(360 * var(--troubles-u));

    padding-block: calc(43.5 * var(--troubles-u)) 2.4rem;
  }

  .rs-s-troubles__inner {
    padding-inline: clamp(1.6rem, 4vw, 4rem);
  }

  .rs-s-troubles__br--pc { display: inline; }
  .rs-s-troubles__br--sp { display: none; }

  .rs-s-troubles__title {
    --deco-w:    calc(525 * var(--troubles-u));
    --deco-gap:  calc(16 * var(--troubles-u));
    --deco-line: 2px;

    padding-bottom: calc(28 * var(--troubles-u));
    font-size: calc(40 * var(--troubles-u)); /* カンプ：40pt */
  }

  .rs-s-troubles__lead {
    margin-top: calc(13 * var(--troubles-u));
    font-size: calc(18 * var(--troubles-u)); /* カンプ：18pt */
    line-height: 1.72;
  }

  .rs-s-troubles__body {
    margin-top: calc(23 * var(--troubles-u));
  }

  .rs-s-troubles__list {
    padding: calc(20 * var(--troubles-u))
             calc(34 * var(--troubles-u))
             calc(21 * var(--troubles-u))
             calc(24 * var(--troubles-u));
  }

  .rs-s-troubles__item {
    padding-left: calc(43 * var(--troubles-u));
    font-size: calc(19 * var(--troubles-u)); /* カンプ：19pt */
    background-position: left 0;
  }

  .rs-s-troubles__item + .rs-s-troubles__item {
    margin-top: calc(23 * var(--troubles-u));
  }

  .rs-s-troubles__arrow {
    margin-top: calc(26.5 * var(--troubles-u));
  }

  .rs-s-troubles__arrow svg {
    width: calc(57 * var(--troubles-u));
  }

  .rs-s-troubles__more {
    margin-top: calc(30.5 * var(--troubles-u));
    font-size: calc(33 * var(--troubles-u)); /* カンプ：33pt */
    line-height: 1.5;
  }

  .rs-s-troubles__more-tag {
    margin-inline: 0.35em;
    padding: 0.235em 0.53em;
    border-radius: calc(6 * var(--troubles-u));
  }
}

/* =========================================================
   Troubles / PC オーバーハング（1100px以上）
   イラストをboxの右上へ絶対配置し、boxは左寄せ。
   body の footprint を box と一致させることで、
   画面幅が変わってもイラストとboxの間隔を一定に保つ。
   ========================================================= */
@media (min-width: 1100px) {
  .rs-s-troubles__inner {
    max-width: 1085px;
    padding-inline: 0;
    /* セクション左右の最小余白はここで確保する */
    margin-inline: auto;
  }

  .rs-s-troubles {
    padding-inline: clamp(1.6rem, 4vw, 4rem);
  }

  /* body を box と同じ幅・左寄せにして位置基準とする */
  .rs-s-troubles__body {
    max-width: var(--troubles-box-width);
    margin-inline: 0 auto;
  }

  .rs-s-troubles__list {
    margin-inline: 0;
  }

  /* イラスト：boxの右上へオーバーハング（box基準の一定オフセット） */
  .rs-s-troubles__illust {
    position: absolute;
    top: calc(-92 * var(--troubles-u));
    right: calc(-138 * var(--troubles-u));
    margin: 0;
    z-index: 2;
  }
}


/* =========================================================
   4. Project / Solutions（日常のお困り事 Q&A）
   基準：SP 375px / PC 1366px
   背景 var(--color-surface-warm) ／ Q吹き出し #4cb2d2 ／ Qバッジ var(--color-key)
   Aバッジ・小見出し・区切り線 var(--color-em) ／ 本文 var(--color-ink)

   カンプ実寸：
     カード … SP / PC とも 300px（角丸 SP 12px / PC 20px）
     Q吹き出し … 高さ SP 78px / PC 135px（テキストは上下中央）
     テール   … SP 30×12px / PC 48×20px（カード左端から SP 26px / PC 41px）
     カード間 … 横 70px ／ 縦 SP 16px / PC 32px

   ブレークポイント：
     base             … SP（375px）1カラム
     min-width 768px  … タイポ・内部余白を PC 基準へ（2カラム）
     min-width 1160px … イラストのはみ出し分を広く確保（1366px で 3+2 段組）

   ※カード幅は SP / PC とも 300px 固定。イラストはカード右上へ
     オーバーハングさせるため、カード幅を基準に絶対配置している。
   ========================================================= */
.rs-s-solutions {
  /* --- セクションスコープのデザイントークン ---
     ブレークポイントごとに変わる値はここで再定義するだけで済むようにする */
  --solutions-bg:           var(--color-surface-warm);
  --solutions-text:         var(--color-ink);
  --solutions-card-bg:      #ffffff;
  --solutions-card-shadow:  0 0 0.9rem rgba(206, 160, 66, .3);
  --solutions-q-bg:         #4cb2d2;
  --solutions-q-badge-bg:   var(--color-key);
  --solutions-a-accent:     var(--color-em);

  --solutions-card-width:   300px;
  --solutions-card-radius:  1.2rem;
  --solutions-badge-size:   1.5rem;
  --solutions-badge-radius: 0.3rem;
  --solutions-q-min-height: 7.8rem;
  --solutions-illust-left:  22.4rem;
  --solutions-illust-scale: .658;
  --solutions-gap-x:        7rem;
  --solutions-gap-y:        1.6rem;
  /* 右端カードのイラストはみ出し分。PC 3カラム時にカンプと同じ位置へ寄せる */
  --solutions-overhang:     0rem;

  /* 上余白は前セクション（troubles）の下余白と合わせて
     カンプの「見出し〜カード間」を再現するため 0 にしている */
  padding-block: 0 4rem;
  padding-inline: clamp(1.6rem, 4vw, 4rem);
  background-color: var(--solutions-bg);
  color: var(--solutions-text);
  overflow-x: clip; /* カード右上にはみ出すイラストの横スクロール防止 */
}

.rs-s-solutions__inner {
  max-width: 1080px;
  padding-inline: 0;
}

/* SPのみ有効な改行（カンプの改行位置を再現。他セクションと同一の命名） */
.rs-s-solutions__br--sp { display: inline; }

/* --- カード並び ---
   カード幅が固定のため、利用可能幅に応じて 1 → 2 → 3 カラムへ
   自動的に折り返す（1366px で 3+2 段組になる） --- */
.rs-s-solutions__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--solutions-gap-x);
  row-gap: var(--solutions-gap-y);
  padding-right: var(--solutions-overhang);
  padding-left: 0;
}

/* --- カード --- */
.rs-s-solutions__card {
  position: relative;
  width: var(--solutions-card-width);
  max-width: 100%;
  border-radius: var(--solutions-card-radius);
  background-color: var(--solutions-card-bg);
  box-shadow: var(--solutions-card-shadow);
}

/* --- Q/A 共通バッジ（文字サイズのみ Q / A で異なる） --- */
.rs-s-solutions__badge {
  position: absolute;
  display: grid;
  place-content: center;
  width: var(--solutions-badge-size);
  height: var(--solutions-badge-size);
  border-radius: var(--solutions-badge-radius);
  color: var(--color-text-invert);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.rs-s-solutions__badge--q {
  top: 0.6rem;
  left: 0.55rem;
  background-color: var(--solutions-q-badge-bg);
  font-size: 1.2rem;  /* カンプ：12.1pt */
}

.rs-s-solutions__badge--a {
  top: 0.5rem;
  left: 0.55rem;
  background-color: var(--solutions-a-accent);
  font-size: 1.25rem; /* カンプ：12.6pt */
}

/* --- Q（お困り事）吹き出し ---
   カンプでは行数（SPは2行／3行が混在）に関わらず高さが一定で、
   テキストは上下中央に置かれるため grid + align-content で再現する --- */
.rs-s-solutions__q {
  position: relative;
  display: grid;
  align-content: center;
  min-height: var(--solutions-q-min-height);
  padding: 0.6rem 8.6rem 0.6rem 2.6rem;
  border-radius: var(--solutions-card-radius) var(--solutions-card-radius) 0 0;
  background-color: var(--solutions-q-bg);
  color: var(--color-text-invert);
}

/* 吹き出しの下向きテール */
.rs-s-solutions__q::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 2.6rem;
  border-style: solid;
  border-width: 1.2rem 1.5rem 0;
  border-color: var(--solutions-q-bg) transparent transparent;
}

.rs-s-solutions__q-text {
  font-size: 1.3rem; /* カンプ：13pt */
  font-weight: var(--fw-regular);
  line-height: 1.58;
}

/* --- A（解決策） --- */
.rs-s-solutions__a {
  position: relative;
  padding: 1.9rem 2.6rem 1.4rem;
}

.rs-s-solutions__a-title {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--solutions-a-accent);
  color: var(--solutions-a-accent);
  font-size: 1.5rem; /* カンプ：15pt */
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.rs-s-solutions__a-text {
  margin-top: 0.4rem;
  font-size: 1.3rem; /* カンプ：13pt */
  font-weight: var(--fw-regular);
  line-height: 1.56;
}

/* --- イラスト（カード右上にオーバーハング） ---
   カンプではカード左端からの距離が全カード共通で、画像ごとの
   幅の違いがそのままはみ出し量の差になっているため left で配置する --- */
.rs-s-solutions__illust {
  position: absolute;
  top: 1.45rem;
  left: var(--solutions-illust-left);
  transform: scale(var(--solutions-illust-scale));
  transform-origin: top left;
  pointer-events: none;
}

/* =========================================================
   Solutions / タブレット〜PC（768px以上）
   タイポ・カード内部をPC基準（1366px）へ
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-solutions {
    --solutions-card-radius:  2rem;
    --solutions-badge-size:   2.4rem;
    --solutions-badge-radius: 0.4rem;
    --solutions-q-min-height: 13.5rem;
    --solutions-illust-left:  19.7rem;
    --solutions-illust-scale: 1;
    --solutions-gap-y:        3.2rem;
    --solutions-overhang:     2rem;

    padding-block: 0 5rem;
  }

  .rs-s-solutions__br--sp { display: none; }

  .rs-s-solutions__badge--q {
    top: 0.95rem;
    left: 0.85rem;
    font-size: 1.9rem; /* カンプ：19.2pt */
  }

  .rs-s-solutions__badge--a {
    top: 0.75rem;
    left: 0.85rem;
    font-size: 2rem;   /* カンプ：20pt */
  }

  .rs-s-solutions__q {
    padding: 3.2rem 10.4rem 2.75rem 3.25rem;
  }

  .rs-s-solutions__q::after {
    left: 4.1rem;
    border-width: 2rem 2.4rem 0;
  }

  .rs-s-solutions__q-text {
    font-size: 1.6rem; /* カンプ：16pt */
  }

  .rs-s-solutions__a {
    padding: 3.55rem 3.25rem 1.55rem 3.4rem;
  }

  .rs-s-solutions__a-title {
    font-size: 1.8rem; /* カンプ：18pt */
  }

  .rs-s-solutions__a-text {
    margin-top: 0.8rem;
    font-size: 1.6rem; /* カンプ：16pt */
  }

  .rs-s-solutions__illust {
    top: 3rem;
  }
}

/* =========================================================
   Solutions / PC 3カラム（1160px以上）
   右側にイラストのはみ出し分（40px）を確保して
   1366px 時にカンプと同じ 3+2 の配置になるようにする
   ========================================================= */
@media (min-width: 1160px) {
  .rs-s-solutions {
    --solutions-overhang: 4rem;
  }
}

/* =========================================================
   4. Project / Price（トイレリフォームの費用相場）
   基準：SP 375px / PC 1366px
   背景 白 ／ 見出し var(--color-key) ／ 本文 var(--color-ink)
   プラン色：お手軽 #4fb3a1 ／ 標準 var(--color-key) ／ こだわり #888574
   ブレークポイント：
     base            … SP（375px）1カラム
     min-width 768px … タイポ・カード内部をPC基準へ
   カードは 323px 固定幅。flex-wrap により 1 → 2 → 3 カラムへ
   自動的に折り返す（1366px で 3 カラム＝グリッド全幅1080px）。
   ========================================================= */
.rs-s-price {
  /* --- コンポーネント内トークン（SP基準値。PCで上書き） --- */
  --price-key-light:    #4fb3a1;
  --price-key-standard: var(--color-key);
  --price-key-premium:  #888574;
  /* リボン：カンプは「直角三角形」。SP 96×45 / PC 135×62.5px */
  --price-ribbon-w:     9.6rem;
  --price-ribbon-h:     4.5rem;
  --price-ribbon-pad:   1.7rem;  /* ラベルの字下げ */
  --price-ribbon-pt:    0.55rem; /* ラベルの上余白 */
  --price-card-w:       30rem;   /* カンプSP：カード幅 300px */
  --price-pill-w:       18.5rem; /* カンプSP：価格ピル 185px（PCは全幅） */
  --price-pill-h:       2.6rem;  /* カンプSP：ピル実寸 26px */
  --price-pill-pb:      0.6rem;  /* 価格のベースライン位置調整 */
  /* 標準カードの二重ライン（AI仕様の線幅・いずれも輪郭の中央揃え） */
  --price-title-bg-w:   15rem;   /* カンプSP：黄色帯 150.5px */
  --price-frame-white:  7.5px;
  --price-frame-red:    3.5px;
  /* 白文字の背面に敷く背景色の縁取り（AI仕様の線幅）。
     三角形の内側では背景と同化し、はみ出した部分だけ輪郭として残る。 */
  --price-ribbon-stroke: 5.9px;  /* AI仕様 5.9184pt */
  --price-num-stroke:    6.3px;  /* AI仕様 6.3175pt */
  --price-card-radius:  2rem;

  padding-block: 3.65rem 2.7rem;
  padding-inline: clamp(2.4rem, 4vw, 4rem);  /* カンプSP：左右 24px */
  background-color: #fff;
  color: var(--color-ink);
}

.rs-s-price__inner {
  max-width: 1080px;
  padding-inline: 0;
}

/* --- 見出し ＋ 下部装飾（area / features と同一仕様）
   ① ベースライン（--deco-w × --deco-line）
   ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
   ③ 45°の斜線 … 右端を②の右端に、上端を①の中心に合わせる
   --------------------------------------------------------- */
.rs-s-price__title {
  --deco-w: 24.8rem; /* ①の長さ。カンプSP 248px */

  color: var(--price-key-standard);
  letter-spacing: -0.05em; /* カンプのツメを再現 */
}

/* 改行制御（既存セクションと同一の命名規則） */
.rs-s-price__br--sp { display: inline; }

.rs-s-price__lead {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.3rem;  /* AI仕様 13pt */
  font-weight: var(--fw-regular);
  line-height: 1.77;
}

/* --- カード並び --- */
.rs-s-price__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.35rem 5.5rem;
  margin-top: 1.9rem;
  list-style: none;
  padding: 0;
}

/* --- カード --- */
.rs-s-price-card {
  position: relative;
  width: min(100%, var(--price-card-w));
  /* SPではカードの高さを揃える（説明文の行数差は下余白で吸収） */
  min-height: 34.95rem;
  border-radius: var(--price-card-radius);
  background-color: #fff;
  /* TODO(他ページ展開時): テーマ色の直書き。--color-theme に追従しない */
  box-shadow: 0 3px 12px rgba(0, 146, 191, 0.20);
  /* プラン別のキーカラー（リボン・価格ピルで参照） */
  --price-key: var(--price-key-light);
}

.rs-s-price-card--standard { --price-key: var(--price-key-standard); }
.rs-s-price-card--premium  { --price-key: var(--price-key-premium); }

/* 標準プランのみ二重ラインで強調。
   カンプは「白ライン（PC12pt / SP7.5pt）の前面に赤ライン（PC5pt / SP3.5pt）」を
   重ねた構成で、どちらもカード輪郭の中央揃え。結果として外側から
   白3.5pt → 赤5pt → 白3.5pt（PC）の三層に見える。
   リボンの三角形より前面、「一番人気！」バナー（z-index:2）より背面に置く。 */
.rs-s-price-card--standard::before,
.rs-s-price-card--standard::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* 白ライン（背面） */
.rs-s-price-card--standard::before {
  inset: calc(var(--price-frame-white) / -2);
  border: var(--price-frame-white) solid var(--color-text-invert);
  border-radius: calc(var(--price-card-radius) + var(--price-frame-white) / 2);
}

/* 赤ライン（前面） */
.rs-s-price-card--standard::after {
  inset: calc(var(--price-frame-red) / -2);
  border: var(--price-frame-red) solid var(--color-em);
  border-radius: calc(var(--price-card-radius) + var(--price-frame-red) / 2);
}

/* --- 見出しエリア（リボン＋プラン名） --- */
.rs-s-price-card__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.25rem;
  padding: 2.6rem 1.4rem 0;
  overflow: hidden;
  border-radius: var(--price-card-radius) var(--price-card-radius) 0 0;
  text-align: center;
  /* プラン名の背後に敷く黄色のグラデーション帯 */
  background-image: linear-gradient(90deg, rgba(255, 232, 147, 0) 0%, #ffe893 50%, rgba(255, 232, 147, 0) 100%);
  background-repeat: no-repeat;
  background-size: var(--price-title-bg-w) 1.4rem;
  background-position: center bottom 1.65rem;
}

/* 左上のコーナーリボン（直角三角形）
   ラベルは白文字＋キーカラーの縁取り（AI仕様の線幅）。三角形の内側では
   背景と同色の縁取りが溶け込み、はみ出した部分では縁取りだけが残るため、
   カンプどおり白地の上でも文字が視認できる。 */
.rs-s-price-card__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  isolation: isolate;  /* 背面の三角形をこの要素内に閉じ込める */
  display: grid;
  align-content: start;
  justify-items: start;
  text-align: left;  /* head の text-align: center を打ち消す */
  width: var(--price-ribbon-w);
  height: var(--price-ribbon-h);
  padding: var(--price-ribbon-pt) 0 0 var(--price-ribbon-pad);
  color: var(--color-text-invert);
  -webkit-text-stroke: var(--price-ribbon-stroke) var(--price-key);
  paint-order: stroke fill;  /* 縁取りは塗りの背面に */
  font-size: 1.65rem;  /* AI仕様 16.5pt */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 三角形本体（文字の背面） */
.rs-s-price-card__ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--price-key);
  border-top-left-radius: var(--price-card-radius);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.rs-s-price-card__title {
  font-size: 1.65rem;  /* AI仕様 16.5pt */
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.rs-s-price-card__title-sub {
  display: block;
  font-size: 1.35rem;  /* AI仕様 13.5pt */
}

/* --- 写真 --- */
.rs-s-price-card__pict {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

/* --- 本文 --- */
.rs-s-price-card__body {
  padding: 1.7rem 1.8rem 0.7rem;
}

/* 「5」（span）と「万円〜」（テキストノード）は別々のグリッドアイテムに
   なるため、grid-auto-flow: column で1行に固定する。
   数字と単位はカンプどおりベースラインで揃え、ベースラインの位置は
   下端揃え＋下パディングで合わせる（カンプは中央よりやや上）。 */
.rs-s-price-card__price {
  display: grid;
  grid-auto-flow: column;
  align-content: end;
  justify-content: center;
  align-items: baseline;
  width: var(--price-pill-w);
  max-width: 100%;
  margin-inline: auto;
  height: var(--price-pill-h);
  padding-bottom: var(--price-pill-pb);
  border-radius: var(--radius-pill);
  background-color: var(--price-key);
  color: var(--color-text-invert);
  -webkit-text-stroke: var(--price-num-stroke) var(--price-key);
  paint-order: stroke fill;  /* 縁取りは塗りの背面に */
  font-size: 1.75rem;  /* AI仕様 17.5pt */
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;  /* カンプ仕様：価格は折り返さない */
}

.rs-s-price-card__num {
  margin-right: 0.18em;
  font-size: 3.08rem;  /* AI仕様 30.8pt */
  font-weight: var(--fw-black);
}

.rs-s-price-card__text {
  margin-top: 0.7rem;
  font-size: 1.3rem;
  line-height: 1.54;
}

/* --- 「一番人気！」バナー --- */
/* 「一番人気！」バナー
   right はカード輪郭（赤ラインの中心）からのはみ出し量。
   カンプ実測：SP 9.25px / PC 13.75px */
.rs-s-price-card__best {
  position: absolute;
  top: -1.6rem;
  right: -0.95rem;
  z-index: 2;
  width: 13rem;
  height: auto;
}

/* --- 注釈 --- */
.rs-s-price__note {
  max-width: 27rem;
  margin: 1.55rem auto 0;
  text-align: center;
  font-size: 0.9rem;  /* AI仕様 9pt */
  line-height: 1.75;
}


/* =========================================================
   4. Project / Subsidy（補助金バナー）
   全幅の帯（横グラデーション #fff8ef → #fce2ba）。
   SP … 見出しバー（全幅）→ 写真＋本文 → ボタン
   PC … 左に写真、右に 見出しバー／本文／ボタン
   ========================================================= */
.rs-s-subsidy {
  --subsidy-key:        #f39800;
  --subsidy-bar-h:      3.2rem;   /* カンプSP：見出しバー 32px */
  --subsidy-bar-pad-l:  5.95rem;  /* カンプSP：バー左端から文字まで 59.5px */
  --subsidy-icon-w:     2.8rem;
  --subsidy-arrow:      var(--arrow-box); /* ボタンの矢印（回転前の一辺） */
  --subsidy-arrow-r:    1.4rem;   /* ボタン右端からの位置 */

  background-image: linear-gradient(90deg, #fff8ef 0%, #fce2ba 32%, #fce2ba 68%, #fff8ef 100%);
  color: var(--color-ink);
}

.rs-s-subsidy__inner {
  display: grid;
  grid-template-columns: 17.3rem 1fr;
  grid-template-areas:
    "title title"
    "pict  text"
    "btn   btn";
  align-items: start;
  column-gap: 1.9rem;
  padding: 0 1.2rem 1.6rem;
}

/* SPでは body を透過させ、見出し／本文／ボタンを直接グリッドに配置 */
.rs-s-subsidy__body { display: contents; }

.rs-s-subsidy__pict { grid-area: pict; }
.rs-s-subsidy__text { grid-area: text; }
.rs-s-subsidy__btn  { grid-area: btn;  }

/* カンプSPでは素材の縦横比より縦長にトリミングされているため、
   高さを指定して object-fit: cover で合わせる */
/* 見出しバーの直下に写真が接してしまわないよう、上に余白を取る。
   カンプSP実測：バー下端 → 写真上端 10.5px */
.rs-s-subsidy__pict {
  height: 14.6rem;
  margin-top: 1rem;
}

.rs-s-subsidy__pict img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 見出し（オレンジのバー＋集中線アイコン） --- */
.rs-s-subsidy__title {
  grid-area: title;
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--subsidy-bar-h);
  /* 帯の左端まで届かせる（カンプ：バー上端＝帯上端） */
  margin: 0 -1.2rem;
  margin-right: 0;
  padding: 0.4rem 1.6rem 0.4rem var(--subsidy-bar-pad-l);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background-color: var(--subsidy-key);
  color: #fff;
  font-size: 1.8rem;  /* AI仕様 18pt */
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -0.05em;  /* カンプのツメを再現 */
}

/* 集中線アイコン。Illustrator同様「乗算」で重ねる */
.rs-s-subsidy__icon {
  position: absolute;
  top: -0.9rem;
  left: calc(var(--subsidy-bar-pad-l) - var(--subsidy-icon-w) - 0.55rem);
  width: var(--subsidy-icon-w);
  height: auto;
  mix-blend-mode: multiply;
}

.rs-s-subsidy__text {
  align-self: start;
  /* 右余白はカンプの改行位置に合わせた調整（PCでは解除） */
  padding: 2.15rem 1rem 0 0;
  font-size: 1.3rem;  /* AI仕様 13pt */
  font-weight: var(--fw-medium);
  line-height: 1.74;
}

.rs-s-subsidy__btn {
  position: relative;
  display: grid;
  place-content: center;
  width: 25rem;
  max-width: 100%;
  min-height: 5rem;
  margin: 0.95rem auto 0;
  /* 左右対称の余白にすることで、文言が矢印を避けつつ中央に収まる */
  padding: 0.6rem 2.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--subsidy-key);
  color: #fff;
  font-size: 1.3rem;  /* カンプ実測 12.8px */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;  /* カンプ仕様：ボタン文言は折り返さない */
  transition: background-color .2s ease;
}

.rs-s-subsidy__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--subsidy-arrow-r);
  width: var(--subsidy-arrow);
  height: var(--subsidy-arrow);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.rs-s-subsidy__btn:hover {
  background-color: #d98700;
}


/* =========================================================
   Price / Subsidy ： タブレット〜PC（768px以上）
   タイポ・カード内部をPC基準（1366px）へ
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-price {
    /* リボン：カンプPC 135×62.5px */
    --price-ribbon-w:   clamp(11rem, 9.89vw, 13.5rem);
    --price-ribbon-h:   clamp(5.1rem, 4.58vw, 6.25rem);
    --price-ribbon-pad: 2.2rem;
    --price-ribbon-pt:  1.4rem;
    --price-card-w:     32.3rem;  /* カンプPC：カード幅 323px */
    --price-pill-w:     100%;     /* PCは本文幅いっぱい */
    --price-pill-h:     3.7rem;  /* カンプPC：ピル実寸 37px */
    --price-pill-pb:    0.8rem;
    --price-title-bg-w:  20.1rem;  /* カンプPC：黄色帯 201px */
    --price-frame-white: 12px;
    --price-frame-red:   5px;
    --price-ribbon-stroke: 8px;    /* AI仕様 8pt */
    --price-num-stroke:    9px;    /* AI仕様 9.025pt */

    padding-block: 4.8rem 4.55rem;
  }

  .rs-s-price__br--sp { display: none; }

  .rs-s-price__title {
    --deco-w:    clamp(32rem, 37.6vw, 51.4rem); /* 1366 = 514px */
    --deco-gap:  clamp(1rem, 1.17vw, 1.6rem);   /* 1366 = 16px */
    --deco-line: 2px;

    padding-bottom: 2.9rem;
    font-size: clamp(2.4rem, 2.93vw, 4rem);  /* AI仕様 40pt */
  }

  .rs-s-price__lead {
    margin-top: 1.2rem;
    font-size: clamp(1.5rem, 1.32vw, 1.8rem);  /* AI仕様 18pt */
    line-height: 1.72;
  }

  .rs-s-price__grid {
    /* 1366px でカンプ実寸 55.5px。中間幅では2カラムが収まるよう可変にする */
    gap: 3rem clamp(3rem, 4.06vw, 5.55rem);
    margin-top: 4.6rem;
  }

  .rs-s-price-card {
    min-height: 0;
  }

  .rs-s-price-card__head {
    min-height: 11.6rem;
    padding: 3.8rem 2rem 0;
    background-size: var(--price-title-bg-w) 2rem;
    background-position: center bottom 2.4rem;
  }

  .rs-s-price-card__ribbon {
    font-size: clamp(1.9rem, 1.68vw, 2.3rem);  /* AI仕様 23pt */
  }

  .rs-s-price-card__title {
    font-size: clamp(1.9rem, 1.61vw, 2.2rem);  /* AI仕様 22pt */
  }

  .rs-s-price-card__title-sub {
    font-size: clamp(1.55rem, 1.32vw, 1.8rem);  /* AI仕様 18pt */
  }

  .rs-s-price-card__pict {
    height: 19rem;
  }

  .rs-s-price-card__body {
    padding: 2.85rem 2.9rem 2rem;
  }

  .rs-s-price-card__price {
    font-size: clamp(2.1rem, 1.83vw, 2.5rem);  /* AI仕様 25pt */
  }

  .rs-s-price-card__num {
    font-size: clamp(3.6rem, 3.22vw, 4.4rem);  /* AI仕様 44pt */
  }

  .rs-s-price-card__text {
    margin-top: 1.05rem;
    font-size: clamp(1.4rem, 1.17vw, 1.6rem);  /* AI仕様 16pt */
    line-height: 1.5625;
  }

  .rs-s-price-card__best {
    top: -2.15rem;
    right: -1.4rem;
    width: 18rem;
  }

  .rs-s-price__note {
    max-width: none;
    margin-top: 2.6rem;
    font-size: clamp(1.2rem, 1.02vw, 1.4rem);  /* AI仕様 14pt */
    line-height: 1.6;
  }
}


/* =========================================================
   Price / 2カラム帯（768〜1149px）
   カンプ指定の並び：上段＝標準（中央）／下段＝お手軽・こだわり。
   flex の折り返し順ではこの配置にできないため、この帯だけ grid に
   切り替え、各カードの位置を明示する（DOM順は変更しない）。
   ========================================================= */
@media (min-width: 768px) and (max-width: 1179px) {
  .rs-s-price__grid {
    display: grid;
    grid-template-columns: repeat(2, var(--price-card-w));
    justify-content: center;
  }

  .rs-s-price-card--standard {
    grid-area: 1 / 1 / 2 / -1;
    justify-self: center;
  }

  .rs-s-price-card--light   { grid-area: 2 / 1; }
  .rs-s-price-card--premium { grid-area: 2 / 2; }
}


/* =========================================================
   Price / 3カラム（1180px以上）
   1366px でカンプ実寸（カード323px・間隔55.5px・全幅1080px）に一致する。
   ========================================================= */
@media (min-width: 1180px) {
  .rs-s-price__grid {
    display: grid;
    grid-template-columns: repeat(3, var(--price-card-w));
    justify-content: center;
    gap: 3rem 5.55rem;
  }
}


/* =========================================================
   Subsidy / タブレット調整（600〜767px）
   横並びに切り替わる 768px までは縦積みのままだが、
   写真・ボタンがSPサイズのままだと間延びするため中間サイズへ引き上げる。
   ========================================================= */
@media (min-width: 600px) and (max-width: 767px) {
  .rs-s-subsidy__inner {
    grid-template-columns: 30rem 1fr;
    column-gap: 3rem;
    padding: 0 3rem 2.4rem 1.2rem;
  }

  .rs-s-subsidy__title {
    min-height: 5.4rem;
    padding-left: 6rem;
    font-size: 2.4rem;
  }

  .rs-s-subsidy__icon {
    top: -1rem;
    left: 2rem;
    width: 3.6rem;
  }

  .rs-s-subsidy__text {
    padding: 2rem 0 0;
    font-size: 1.5rem;
  }

  .rs-s-subsidy__btn {
    width: 32rem;
    min-height: 6.4rem;
    font-size: 1.7rem;
  }
}


/* =========================================================
   Subsidy / 横並びレイアウト（768px以上）
   左に写真、右に見出しバー・本文・CTA を配置。
   写真幅・見出し・CTA は 768〜1024px で可変にし、
   1024px 以上でカンプ（1366px）の実寸に到達させる。
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-subsidy__inner {
    display: flex;
    align-items: center;
    column-gap: 0;
    max-width: 1080px;
    min-height: clamp(24rem, 29.3vw, 30rem);
    margin-inline: auto;
    /* 右 40px は写真〜見出しバーの実測幅（約1040px）に合わせた調整 */
    padding: 0 4rem 0 0;
  }

  /* 本文・CTA の左右余白は body 側で持たせ、両者の中心を揃える
     （カンプでは CTA が本文カラムの中央に置かれている） */
  /* 上下の余白は body 側で持たせる。写真は align-self: stretch で
     帯の上下いっぱいに伸びるため、inner ではなく body に付けることで
     「写真は帯の端まで、見出しバーとボタンには余白」を両立できる。
       カンプ実測（1366px）… 帯上端→バー上端 41px ／ ボタン下端→帯下端 31px
     画面幅が狭いほど中身が縮むぶん帯も縮むが、上下の余白は一定に保たれる。 */
  .rs-s-subsidy__body {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 4.1rem 2.6rem 3.1rem 3.65rem;
  }

  .rs-s-subsidy__pict {
    flex: 0 0 clamp(26rem, 37.11vw, 38rem);  /* 1024px以上で 380px */
    align-self: stretch;
    height: auto;
    /* 横並びでは写真が帯の上下いっぱいに入るため、SPの上余白は解除 */
    margin-top: 0;
  }

  .rs-s-subsidy__title {
    --subsidy-bar-h:     clamp(4.4rem, 6.25vw, 6.4rem);  /* 1024px以上で 64px */
    --subsidy-bar-pad-l: clamp(4.5rem, 7.91vw, 8.1rem);  /* 同 81px */
    --subsidy-icon-w:    clamp(2.8rem, 3.9vw, 4rem);

    /* 見出しバーは body の余白を打ち消して帯の端まで伸ばす */
    margin: 0 -2.6rem 1.6rem -3.65rem;
    padding: 0.5rem clamp(2rem, 3.9vw, 4rem) 1.2rem var(--subsidy-bar-pad-l);
    font-size: clamp(2.2rem, 2.64vw, 3.6rem);  /* AI仕様 36pt */
  }

  .rs-s-subsidy__icon {
    top: -1.9rem;
  }

  .rs-s-subsidy__text {
    margin: 0;
    padding: 0;
    font-size: clamp(1.4rem, 1.17vw, 1.6rem);  /* AI仕様 16pt */
    line-height: 1.5625;
  }

  .rs-s-subsidy__btn {
    --subsidy-arrow:   clamp(1.4rem, 1.86vw, var(--arrow-box-pc));
    --subsidy-arrow-r: clamp(1.6rem, 2.25vw, 2.3rem);

    width: clamp(30rem, 39.06vw, 40rem);   /* 1024px以上で 400px */
    min-height: clamp(6rem, 7.81vw, 8rem);
    margin: 1.95rem auto 0;
    padding: 0.8rem clamp(2.4rem, 4.3vw, 4.4rem) 0.8rem clamp(2rem, 3.71vw, 3.8rem);
    font-size: clamp(1.5rem, 1.95vw, 2rem);  /* カンプ実測 20px */
  }

  .rs-s-subsidy__btn::after {
    border-width: 3px;
  }
}


/* =========================================================
   4. Project / Heater（給湯器バナー）
   ※お風呂ページ専用。他ページのHTMLには出現しません。
   基準：SP 375px / PC 1366px
   全幅の帯（横グラデーション #fff6e2 → #d8deda）。
   SP … 見出し（全幅）→ イラスト＋本文 → ボタン
   PC … 左にイラスト、右に 見出し／本文／ボタン
   Illustrator実測
     見出し … Noto Sans CJK JP Bold  PC 34px / SP 17px
     本文   … Noto Sans CJK JP Regular PC 16px / SP 13px
     イラスト … PC 325.67×328.50px（帯の上へ10px・下へ18.5pxはみ出す）
                SP 162.83×164.25px（はみ出しなし）
   ========================================================= */
.rs-s-heater {
  --heater-key:       var(--color-key);
  --heater-band:      #d8deda;   /* カンプ実測：帯の中央色 */
  --heater-icon-w:    0.9rem;    /* 見出し左右の飾り。カンプSP実測 9px */
  --heater-icon-gap:  0.6rem;
  --heater-wave-h:    0.6rem;    /* 波線の描画領域。山谷差はこの 1/2 */
  --heater-wave-w:    5rem;      /* 波線タイル幅。SVG1枚＝2周期なので周期25px */
  --heater-arrow:     var(--arrow-box);
  --heater-arrow-r:   1.4rem;

  /* 波線のSVG（2周期ぶん）。data URI 内では # を %23 にエスケープする
     必要があるため、色は指定せずマスク用のシルエットとしてのみ使う。
     stroke-width 1.6 は描画高に対する線の太さの比（カンプ実測に合わせた）。 */
  --heater-wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 12.5 0 25 5 T 50 5 T 75 5 T 100 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");

  background-image: linear-gradient(90deg,
      var(--color-surface-warm) 0%,
      var(--heater-band)       21%,
      var(--heater-band)       79%,
      var(--color-surface-warm) 100%);
  color: var(--color-ink);
  /* カンプでは帯の下にクリーム色の帯（SP41px / PC50px）が続く。
     border で確保し、background-clip: padding-box でグラデーションを
     帯の範囲だけに限定する。
     ※PCではイラストが帯の上下（上10px／下18.5px）へはみ出して
       クリーム色の上に重なるため、ここで overflow を切らないこと。 */
  border-bottom: 4.1rem solid var(--color-surface-warm);
  background-clip: padding-box;
}

.rs-s-heater__inner {
  display: grid;
  /* カンプSP実測：イラスト 162.83px ／ 本文の左端 196px ／ 右端 355px */
  grid-template-columns: 16.3rem 1fr;
  grid-template-areas:
    "title title"
    "pict  text"
    "btn   btn";
  align-items: start;
  column-gap: 1.3rem;
  padding: 1.35rem 2rem 1.6rem;
}

/* SPでは body を透過させ、見出し／本文／ボタンを直接グリッドに配置 */
.rs-s-heater__body { display: contents; }

.rs-s-heater__pict { grid-area: pict; }
.rs-s-heater__text { grid-area: text; }
.rs-s-heater__btn  { grid-area: btn;  }

.rs-s-heater__pict {
  margin-top: 1.9rem;  /* カンプSP実測：帯上端から 63.75px */
}

.rs-s-heater__pict img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 見出し（飾り＋波線） --- */
.rs-s-heater__title {
  grid-area: title;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--heater-icon-gap);
  /* 飾りを含めた見出しの幅は本文カラムよりわずかに広い（カンプSP実測：
     本文 20〜355px に対し見出し 19.5〜357.5px）。折り返しを防ぐため
     左右へ少しはみ出させる。 */
  margin-inline: -0.5rem;
  padding-bottom: 0.9rem;  /* 波線の描画スペース */
  color: var(--heater-key);
  font-size: 1.7rem;       /* Illustrator：17px */
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: center;
  /* palt：Illustrator の「約物半角」に相当 */
  font-feature-settings: "palt";
}

/* 見出し左右の飾り（斜線）。カンプPCでは原寸 17×40px */
.rs-s-heater__title-icon {
  flex: none;
  width: var(--heater-icon-w);
  height: auto;
}

/* 波線。SVGをマスクにすることで currentColor で着色する */
.rs-s-heater__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--heater-wave-h);
  background-color: currentColor;
  -webkit-mask-image: var(--heater-wave-img);
          mask-image: var(--heater-wave-img);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: var(--heater-wave-w) 100%;
          mask-size: var(--heater-wave-w) 100%;
}

.rs-s-heater__text {
  align-self: start;
  margin-top: 1.25rem;
  font-size: 1.3rem;    /* Illustrator：13px */
  font-weight: var(--fw-regular);
  line-height: 1.723;   /* カンプ実測：行送り 22.4px */
  /* Illustrator の「約物半角」に相当。これがないと1行の文字数が減る */
  font-feature-settings: "palt";
}

/* PC専用の改行（カンプの改行位置を固定するため） */
.rs-s-heater__br--pc { display: none; }

.rs-s-heater__btn {
  position: relative;
  display: grid;
  place-content: center;
  width: 25rem;
  max-width: 100%;
  min-height: 5rem;
  margin: 1.35rem auto 0;
  /* 左右対称の余白にすることで、文言が矢印を避けつつ中央に収まる */
  padding: 0.6rem 2.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--heater-key);
  color: #fff;
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;  /* カンプ仕様：ボタン文言は折り返さない */
  transition: background-color .2s ease;
}

.rs-s-heater__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--heater-arrow-r);
  width: var(--heater-arrow);
  height: var(--heater-arrow);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.rs-s-heater__btn:hover {
  background-color: var(--color-theme-dark);
}


/* =========================================================
   Heater / タブレット調整（600〜767px）
   768px から横並びに切り替わるまでは縦積みのまま、
   イラスト・文字サイズだけ中間値へ引き上げる。
   ========================================================= */
@media (min-width: 600px) and (max-width: 767px) {
  .rs-s-heater__inner {
    grid-template-columns: clamp(22rem, 30vw, 32rem) 1fr;
    column-gap: clamp(2rem, 3vw, 3.2rem);
    padding: 2rem clamp(3rem, 4vw, 4rem) 2.4rem;
  }

  .rs-s-heater__title {
    font-size: clamp(2.2rem, 3.2vw, 3rem);
  }

  .rs-s-heater__text {
    font-size: clamp(1.4rem, 1.7vw, 1.6rem);
    line-height: 1.7;
  }

  .rs-s-heater__btn {
    width: clamp(30rem, 38vw, 36rem);
    min-height: clamp(6rem, 7vw, 7rem);
    font-size: clamp(1.6rem, 1.9vw, 1.9rem);
  }
}


/* =========================================================
   Heater / 横並びレイアウト（768px以上）
   左にイラスト、右に見出し・本文・CTA を配置。
   1366px でのカンプ実測値
     帯 300px ／ 内容幅 1000px（1080 の内側に左右40px）
     イラスト  183〜508.7px（原寸325.67px・上へ10pxはみ出す）
     本文      508.7〜1183px
     波線      493.5〜1182.5px（本文カラムより15px外側）
     ボタン    400×80px・本文の中心より13px右
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-heater {
    /* イラストの表示幅。帯の高さ・切り取り量はすべてこの値から算出するため、
       画面幅が変わっても3者の比率がカンプどおりに保たれる。
         帯の高さ   = 幅 × 300 / 325.67  = 幅 × 0.9212
         上の切り取り = 幅 ×  10 / 325.67 = 幅 × 0.0307 */
    --heater-pict-w:   clamp(24rem, 23.84vw, 32.57rem);  /* 1366px で 325.67px */
    --heater-band-h:   calc(var(--heater-pict-w) * 0.9212);
    --heater-icon-w:   clamp(1.2rem, 1.24vw, 1.7rem);    /* 1366px で原寸 17px */
    --heater-icon-gap: clamp(1rem, 1.02vw, 1.4rem);
    --heater-wave-h:   1.2rem;
    --heater-wave-w:   10rem;  /* 周期 50px */

    border-bottom-width: 5rem;
  }

  .rs-s-heater__inner {
    display: flex;
    align-items: flex-start;
    /* イラストと本文の間隔。カンプ実測 16.3px */
    column-gap: clamp(1rem, 1.2vw, 1.64rem);
    max-width: 1080px;
    min-height: var(--heater-band-h);
    margin-inline: auto;
    padding: 0 clamp(2rem, 2.93vw, 4rem);
  }

  .rs-s-heater__body {
    display: block;
    flex: 1;
    min-width: 0;
    /* 下余白はカンプ実測（1366px でボタン下端〜帯下端 30.5px）。
       画面幅が狭く本文が伸びて帯の高さが内容依存に変わっても、
       ボタンの下に常に同じ余白が残るよう padding で確保する。 */
    padding: 2rem 0 3rem;
  }

  .rs-s-heater__pict {
    flex: 0 0 var(--heater-pict-w);
    align-self: start;
    height: var(--heater-band-h);
    margin-top: 0;
  }

  .rs-s-heater__pict img {
    /* カンプ：イラストは切り取らず、帯の上端より10px上・下端より18.5px下へ
       はみ出して表示される（枠の高さは帯と同じなので、画像だけが溢れる）。 */
    margin-top: calc(var(--heater-pict-w) * -0.0307);
  }

  .rs-s-heater__title {
    /* 波線の左端がイラストの右端に接する位置まで、本文カラムの外へ張り出す
       （カンプ実測：波線 490px 〜 ／ 本文 525px 〜） */
    margin-left: -3.5rem;
    margin-right: 0;
    padding-bottom: 1.85rem;
    font-size: 3.4rem;  /* Illustrator：34px */
  }

  .rs-s-heater__text {
    margin-top: 1.28rem;
    font-size: 1.6rem;  /* Illustrator：16px */
    line-height: 1.5625;
  }

  .rs-s-heater__btn {
    --heater-arrow:   clamp(1.4rem, 1.86vw, var(--arrow-box-pc));
    --heater-arrow-r: clamp(1.6rem, 2.25vw, 2.3rem);

    width: clamp(30rem, 29.28vw, 40rem);   /* 1366px で 400px */
    min-height: clamp(6rem, 5.86vw, 8rem);
    margin: 1.9rem auto 0;
    padding: 0.8rem clamp(2.4rem, 4.3vw, 4.4rem) 0.8rem clamp(2rem, 3.71vw, 3.8rem);
    font-size: clamp(1.5rem, 1.46vw, 2rem);
  }

  .rs-s-heater__btn::after {
    border-width: 3px;
  }
}


/* =========================================================
   Heater / 横並びの狭い帯（768〜1023px）
   カンプ（1366px）の文字サイズのままでは、見出しが本文カラムに
   収まらず折り返してしまうため、この範囲だけ文字サイズを落とす。
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .rs-s-heater__title {
    font-size: clamp(2.2rem, 2.49vw, 2.6rem);
  }

  .rs-s-heater__text {
    font-size: 1.5rem;
    line-height: 1.7;
  }

  .rs-s-heater__btn {
    width: clamp(30rem, 34vw, 34rem);
    min-height: clamp(6rem, 6.5vw, 6.6rem);
    font-size: clamp(1.5rem, 1.7vw, 1.7rem);
  }
}


/* =========================================================
   Heater / 本文の改行位置の固定（1024px以上）
   カンプどおりの改行にするには本文カラムに約640px必要なため、
   それを確保できる 1024px 以上でのみ <br> を有効にする。
   ========================================================= */
@media (min-width: 1024px) {
  .rs-s-heater__br--pc { display: inline; }
}


/* =========================================================
   4. Project / Plans（メーカー別 厳選プラン）
   基準：SP 375px / PC 1366px
   背景 #4cb2d2 ／ 文字 #fff ／ タグ var(--color-key) ／ 強調 #ffeb00
   ブレークポイント：
     base            … SP（375px）1カラム。ロゴ＋見出しと写真を横並び
     min-width 768px … PC基準。カード内はロゴ→見出し→写真の縦積み
   カードは最大334px。グリッドの auto-fit により 1 → 2 → 3 カラムへ。
   ========================================================= */
.rs-s-plans {
  /* --- コンポーネント内トークン（SP基準値。PCブレークポイントで上書き） --- */
  --plans-bg:        #4cb2d2;
  --plans-tag-bg:    var(--color-key);
  --plans-em:        #ffeb00;
  --plans-frame-w:   30.1rem;  /* 見出し枠SVGの幅（AI仕様 301.0032px） */
  --plans-card-w:    33.45rem; /* カンプSP：カード幅 334.5px */
  --plans-card-pad:  1.4rem;
  --plans-card-gap:  1.6rem;   /* カード間（縦・横共通） */

  padding-block: 4rem 4.05rem;
  padding-inline: clamp(2rem, 3vw, 4rem);  /* カンプ：SP 20px / PC 40px */
  background-color: var(--plans-bg);
  color: #fff;
}

.rs-s-plans__inner {
  max-width: 108rem;  /* カンプPC：コンテンツ幅 1080px */
  padding-inline: 0;
}

/* リード文の改行制御（表示サイズ別）
   .rs-s-plans__br--sp … SP のみ改行 */
.rs-s-plans__br--sp { display: inline; }

/* --- 見出し ---------------------------------------------
   右上と左下が開いた枠の装飾は画像（plans_h2_sp_2x / plans_h2_pc_2x）。
   文言は SEO/AIO のためテキストのまま枠に重ねる。
   AI仕様：SP 301.0032×71px ／ PC 801.999×72px
   ------------------------------------------------------- */
.rs-s-plans__title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.7rem, 5.33vw, 2rem);  /* AI仕様 20pt */
  font-weight: var(--fw-black);
  line-height: 1.675;
  /* カンプ同様、和文の字詰め（プロポーショナルメトリクス）を有効化 */
  font-feature-settings: "palt";
}

/* 枠の装飾（SVG）。この画像が見出しの寸法を決める */
.rs-s-plans__title-frame {
  display: block;
  width: var(--plans-frame-w);
  max-width: 100%;
}

.rs-s-plans__title-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* 枠に重ねる文言
   中身は「滋賀」＋<span>（大津・栗東）</span>＋「・京都で…」というインラインの
   連なりのため、grid/flex にすると各要素が別アイテムに分割されてしまう。
   ブロックのまま上下中央へ寄せる。

   和文の em ボックスは字面より下方向の余白が大きく、行ボックスを
   枠の中央に置くと字面が下がって見える。カンプでも字面の中心は
   枠の中心より約1.75px 上にあるため、その差を光学調整で吸収する。 */
.rs-s-plans__title-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  translate: 0 calc(-50% - 0.25rem);
}

.rs-s-plans__title-sub {
  font-size: 0.75em;  /* カンプ：主文字に対して 15/20・30/40 */
}

.rs-s-plans__lead {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 1.3rem;  /* AI仕様 13pt */
  font-weight: var(--fw-regular);
  line-height: 1.54;
}

.rs-s-plans__lead-em {
  color: var(--plans-em);
  font-style: normal;
  font-weight: var(--fw-bold);
}

/* --- カード並び ---
   auto-fit により幅に応じて 1 → 2 → 3 カラムへ。
   1枚あたりの上限はカンプ実寸（334px）で止める。 */
.rs-s-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  justify-items: center;
  gap: var(--plans-card-gap);
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

/* --- カード --- */
.rs-s-plans-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.05rem;
  width: 100%;
  max-width: var(--plans-card-w);
  /* SPはカードの高さを揃える（本文の行数差は下余白で吸収） */
  min-height: 28.4rem;
  padding: 1.45rem var(--plans-card-pad) 0.9rem;
  border-radius: 2rem;
  background-color: #fff;
  color: var(--color-ink);
}

/* ロゴ＋見出し（SPは写真と横並び） */
.rs-s-plans-card__head {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.05rem;
  min-width: 0;
  min-height: 16.4rem;  /* 写真の高さに合わせる */
}

.rs-s-plans-card__logo {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

/* ロゴはメーカーごとに原寸が異なるため個別に幅を指定 */
.rs-s-plans-card--toto      .rs-s-plans-card__logo { width: 8.55rem; }
.rs-s-plans-card--lixil     .rs-s-plans-card__logo { width: 8.6rem;  }
.rs-s-plans-card--panasonic .rs-s-plans-card__logo { width: 10.6rem; }
.rs-s-plans-card--cleanup   .rs-s-plans-card__logo { width: 9.3rem;  }  /* カンプ実測 93px */

.rs-s-plans-card__title {
  font-size: 1.55rem;  /* AI仕様 15.5pt */
  font-weight: var(--fw-bold);
  line-height: 1.45;
  text-align: center;
}

.rs-s-plans-card__pict {
  flex: 0 1 18.5rem;
  width: 18.5rem;
  height: auto;
  border-radius: 0.6rem;
}

.rs-s-plans-card__body {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 0.3rem;
}

/* --- タグ --- */
.rs-s-plans-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
}

.rs-s-plans-card__tag {
  flex: 1 1 14.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--plans-tag-bg);
  color: #fff;
  font-size: 1rem;  /* AI仕様 10pt */
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
}

.rs-s-plans-card__text {
  margin-top: 0.75rem;
  font-size: 1.3rem;  /* AI仕様 13pt */
  line-height: 1.58;
}

/* --- 50代リフォームのバナー --- */
.rs-s-plans__banner {
  display: block;
  width: 100%;
  max-width: 32rem;  /* カンプSP：320×267px */
  margin: 2.55rem auto 0;
  transition: opacity .2s ease;
}

.rs-s-plans__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.rs-s-plans__banner:hover {
  opacity: .85;
}


/* =========================================================
   Plans / タブレット〜PC（768px以上）
   カード内をロゴ→見出し→写真→タグ→本文の縦積みへ
   カンプPC（1366px）：コンテンツ1080px・カード334px（間隔39.5px）
   写真294×261px・タグ233.5×28px
   各値は clamp(下限, 1366px基準のvw, カンプ実寸) で連続的に追従させる。
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-plans {
    --plans-frame-w:  80.2rem;  /* 見出し枠SVGの幅（AI仕様 801.999px） */
    --plans-card-w:   33.4rem;
    --plans-card-pad: clamp(1.4rem, 1.46vw, 2rem);

    padding-block: 6.95rem 7.05rem;
  }

  .rs-s-plans__br--sp { display: none; }

  .rs-s-plans__title {
    /* 狭いPC幅でも1行に収まるよう可変にする */
    font-size: clamp(2.6rem, 4.5vw, 4rem);  /* AI仕様 40pt */
    line-height: 1.3;
  }

  .rs-s-plans__lead {
    margin-top: 2.25rem;
    font-size: clamp(1.5rem, 1.32vw, 1.8rem);  /* AI仕様 18pt */
    line-height: 1.72;
  }

  .rs-s-plans__grid {
    gap: 3rem 3.95rem;
    margin-top: 2.3rem;
  }

  .rs-s-plans-card {
    display: block;

    min-height: 0;
    padding: 1.8rem var(--plans-card-pad) 1.75rem;
  }

  .rs-s-plans-card__head {
    display: grid;
    /* ロゴ列の高さは最も背の高い LIXIL ロゴ（57px）に合わせる */
    grid-template-rows: clamp(4.4rem, 4.17vw, 5.7rem) auto;
    align-items: center;
    justify-items: center;
    row-gap: clamp(1.2rem, 1.23vw, 1.68rem);
    min-height: 0;
  }

  .rs-s-plans-card--toto      .rs-s-plans-card__logo { width: clamp(13rem, 12.6vw, 17.2rem); }
  .rs-s-plans-card--lixil     .rs-s-plans-card__logo { width: clamp(11rem, 10.7vw, 14.6rem); }
  .rs-s-plans-card--panasonic .rs-s-plans-card__logo { width: clamp(19rem, 18.3vw, 25rem);   }
  .rs-s-plans-card--cleanup   .rs-s-plans-card__logo { width: clamp(14.1rem, 13.62vw, 18.6rem); }  /* 1366px で原寸186px */

  .rs-s-plans-card__title {
    font-size: clamp(1.6rem, 1.32vw, 1.8rem);  /* AI仕様 18pt */
    line-height: 1.3;
  }

  .rs-s-plans-card__body {
    padding-inline: 0;
  }

  .rs-s-plans-card__pict {
    width: 100%;
    margin-top: clamp(1.6rem, 1.65vw, 2.25rem);
    border-radius: 0.8rem;
  }

  .rs-s-plans-card__tags {
    flex-direction: column;
    gap: clamp(1rem, 1.06vw, 1.45rem);
    margin-top: clamp(1.5rem, 1.5vw, 2.05rem);
    padding-inline: clamp(1.5rem, 2.2vw, 3rem);
  }

  .rs-s-plans-card__tag {
    flex: 0 0 auto;
    padding: 0.28rem 0.6rem;
    font-size: clamp(1.35rem, 1.17vw, 1.6rem);  /* AI仕様 16pt */
    line-height: 1.4;
  }

  .rs-s-plans-card__text {
    margin-top: clamp(1.3rem, 1.28vw, 1.75rem);
    font-size: clamp(1.4rem, 1.17vw, 1.6rem);  /* AI仕様 16pt */
    line-height: 1.5625;
  }

  .rs-s-plans__banner {
    max-width: 108rem;  /* カンプPC：1080×270px */
    margin-top: 5.05rem;
  }
}


/* =========================================================
   Plans / 2カラム帯の3枚目（768〜929px）
   この帯では上段に TOTO・LIXIL、下段に Panasonic が並ぶが、
   auto-fit は3枚目を2行目の1列目に置くため左寄せになる。
   2列ぶんに跨がらせ、グリッドの justify-items: center で中央へ寄せる。
   （並び順・DOM順は変更しない。930px 以上は3カラム1行のため対象外）
   ========================================================= */
@media (min-width: 768px) and (max-width: 929px) {
  .rs-s-plans-card--panasonic {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   Plans / 機種名ラベル・タカラスタンダード（お風呂ページで使用）
   ---------------------------------------------------------
   写真の左上に機種名（サザナ／リデア／グランスパ）を重ねるため、
   写真を .rs-s-plans-card__figure で包む構成に対応させる。
   囲み要素を持たないページ（トイレ等）には影響しない。
   ========================================================= */
.rs-s-plans-card__figure {
  position: relative;
  display: block;
  flex: 0 1 18.5rem;
  width: 18.5rem;
  border-radius: 0.6rem;
  overflow: hidden;  /* ラベルの角を写真の角丸に合わせる */
}

.rs-s-plans-card__figure .rs-s-plans-card__pict {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.rs-s-plans-card__model {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  min-width: 7.2rem;  /* カンプSP実測 72px */
  padding: 0.1rem 0.9rem;
  background-color: #6d6e72;  /* カンプ実測 */
  color: #fff;
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: center;
  /* 「グランスパ」のように文字数が多いものが折り返さないようにする */
  white-space: nowrap;
}

/* ロゴはメーカーごとに原寸が異なるため個別に幅を指定 */
.rs-s-plans-card--takara .rs-s-plans-card__logo { width: 11.45rem; }

@media (min-width: 768px) {
  .rs-s-plans-card__figure {
    flex: none;
    width: 100%;
    margin-top: clamp(1.6rem, 1.65vw, 2.25rem);
    border-radius: 0.8rem;
  }

  .rs-s-plans-card__model {
    min-width: clamp(8.6rem, 8.49vw, 11.6rem);  /* カンプPC実測 116px */
    padding: 0.3rem 1.4rem;
    font-size: clamp(1.2rem, 1.1vw, 1.5rem);
  }

  .rs-s-plans-card--takara .rs-s-plans-card__logo { width: clamp(19.8rem, 19.11vw, 26.1rem); }
}

/* 2カラム帯（768〜929px）では3枚目を2列ぶんに跨がらせて中央へ寄せる
   （--panasonic と同じ扱い。詳細は上記コメントを参照） */
@media (min-width: 768px) and (max-width: 929px) {
  .rs-s-plans-card--takara {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   4. Project / Features（ライフスタイルや機能で選ぶ）
   基準：SP 375px / PC 1366px
   背景 白 ／ 見出し var(--color-key) ／ 本文 var(--color-ink)
   カード＝写真の右下にクリーム色（#fef2da）のテキストボックスを
   重ね、その上端に青いラベル（var(--color-key)）を乗せた構成。
   写真とテキストボックスはカード幅の 86.83%、重なり量は 10.4% で、
   SP／PC どちらも同じ比率のまま伸縮する。
   ブレークポイント：
     base             … SP（375px）1カラム
     min-width 768px  … 2カラム＋PCのタイポグラフィ
     min-width 1024px … PC基準の3カラム
   ========================================================= */
.rs-s-features {
  /* --- コンポーネント内トークン（SP基準値。PCブレークポイントで上書き） --- */
  --features-blue:      var(--color-key);  /* 見出し・ラベル */
  --features-cream:     #fef2da;  /* テキストボックス */
  --features-radius:    2.6rem;   /* AI仕様 26.0311px（写真／ボックス共通） */
  --features-media:     86.83%;   /* 写真・ボックスの幅（カード幅比 260/299.5） */
  --features-overlap:   10.4%;    /* 写真とボックスの重なり（同上） */
  --features-box-pad-x: 1.25rem;
  --features-box-pad-y: 1.1rem;
  --features-box-pad-b: 0.9rem;

  padding-block: 3.15rem 3.2rem;
  padding-inline: clamp(1.6rem, 10vw, 4rem);  /* カンプSP：左右 37.5px */
  background-color: #fff;
  color: var(--color-ink);
}

.rs-s-features__inner {
  max-width: 108rem;  /* カンプPC：コンテンツ幅 1080px */
  padding-inline: 0;
}

/* リード文の改行制御（表示サイズ別）
   .rs-s-features__br--sp … SP のみ改行 */
.rs-s-features__br--sp { display: inline; }

/* ---------------------------------------------------------
   見出し ＋ 下部装飾（area セクションと同一仕様）
   ① ベースライン（--deco-w × --deco-line）
   ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
   ③ 45°の斜線（--deco-gap 角・線幅 --deco-line）… 右端を②の右端に、上端を①の中心に合わせる
   --------------------------------------------------------- */
.rs-s-features__title {
  --deco-w: 24.8rem; /* ①の長さ。カンプSP 248px */

  color: var(--features-blue);
}

.rs-s-features__lead {
  margin-top: 0.55rem;
  text-align: center;
  font-size: 1.3rem;  /* AI仕様 13pt */
  font-weight: var(--fw-regular);
  line-height: 1.72;
}

/* --- カード並び --- */
.rs-s-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

/* --- カード --- */
.rs-s-features-card {
  width: min(100%, 34.55rem);  /* カンプPC：カード幅 345.5px */
  /* 乗算の合成範囲をカード内（＝写真の上）に限定する */
  isolation: isolate;
}

/* 写真（カード左上） */
.rs-s-features-card__pict {
  display: block;
  width: var(--features-media);
  height: auto;
  aspect-ratio: 300 / 178;
  object-fit: cover;
  border-radius: var(--features-radius);
}

/* 写真の右下に重ねるテキストボックス（写真より前面）
   AI仕様では地のクリーム色のみ乗算。ラベルと本文は乗算の影響を受けないため、
   背景を ::before に切り出して、そこだけに mix-blend-mode を適用する。 */
.rs-s-features-card__body {
  position: relative;
  width: var(--features-media);
  /* 重なり量はカード幅に対する比率。写真の高さと一緒に伸縮する */
  margin: calc(var(--features-overlap) * -1) 0 0 auto;
  padding: var(--features-box-pad-y) var(--features-box-pad-x) var(--features-box-pad-b);
  border-radius: var(--features-radius);
}

/* 地のクリーム色（乗算）。写真と重なる部分だけ写真が透ける */
.rs-s-features-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--features-cream);
  mix-blend-mode: multiply;
}

/* ::before より前面へ（乗算の対象にしない） */
.rs-s-features-card__title,
.rs-s-features-card__text {
  position: relative;
}

/* 上端に重なる青いラベル */
.rs-s-features-card__title {
  display: grid;
  place-content: center;
  min-height: 3.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--features-blue);
  color: #fff;
  font-size: 1.85rem;  /* AI仕様 18.5pt */
  font-weight: var(--fw-black);
  line-height: 1.3;
  text-align: center;
}

.rs-s-features-card__text {
  margin-top: 0.75rem;
  padding-inline: 0.25rem;
  font-size: 1.3rem;  /* AI仕様 13pt */
  font-weight: var(--fw-regular);
  line-height: 1.54;
}

.rs-s-features__note {
  margin-top: 0.4rem;
  text-align: right;
  font-size: 0.9rem;  /* AI仕様 9pt */
  font-weight: var(--fw-regular);
  line-height: 1.6;
}


/* =========================================================
   Features / タブレット〜PC（768px以上）
   カンプPC（1366px）：コンテンツ1080px・カード345.5px（間隔21.5px）
   写真300×178px・角丸30px・ボックス300px
   各値は clamp(下限, 1366px基準のvw, カンプ実寸) で連続的に追従させる。
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-features {
    --features-radius:    clamp(2rem, 2.2vw, 3rem);        /* AI仕様 30px */
    --features-box-pad-x: clamp(1.1rem, 1.06vw, 1.45rem);
    --features-box-pad-y: clamp(1rem, 0.92vw, 1.25rem);
    --features-box-pad-b: clamp(1rem, 0.95vw, 1.3rem);

    padding-block: 4.25rem 5.25rem;
    /* 前後のセクションと左右の基準線を揃える */
    padding-inline: clamp(1.6rem, 3vw, 4rem);
  }

  .rs-s-features__br--sp { display: none; }

  .rs-s-features__title {
    --deco-w:    clamp(32rem, 37.6vw, 51.4rem); /* 1366 = 514px */
    --deco-gap:  clamp(1rem, 1.17vw, 1.6rem);   /* 1366 = 16px */
    --deco-line: 2px;

    padding-bottom: 2.85rem;
    font-size: clamp(2.4rem, 2.93vw, 4rem);     /* AI仕様 40pt */
  }

  .rs-s-features__lead {
    margin-top: 1.25rem;
    font-size: clamp(1.5rem, 1.32vw, 1.8rem);   /* AI仕様 18pt */
  }

  .rs-s-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.9rem 2.15rem;
    margin-top: 2.35rem;
  }

  .rs-s-features-card {
    width: 100%;
  }

  .rs-s-features-card__title {
    min-height: clamp(3.4rem, 3.04vw, 4.15rem);
    padding-inline: 1rem;
    font-size: clamp(1.7rem, 1.61vw, 2.2rem);   /* AI仕様 22pt */
  }

  .rs-s-features-card__text {
    margin-top: 0.75rem;
    padding-inline: 0.3rem;
    font-size: clamp(1.4rem, 1.17vw, 1.6rem);   /* AI仕様 16pt */
    line-height: 1.5625;
  }

  .rs-s-features__note {
    margin-top: 0.8rem;
    font-size: clamp(1.2rem, 1.02vw, 1.4rem);   /* AI仕様 14pt */
  }
}


/* =========================================================
   Features / PC 3カラム（1024px以上）
   ========================================================= */
@media (min-width: 1024px) {
  .rs-s-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   4. Project / Works（滋賀・京都の施工実績）
   基準：SP 375px / PC 1366px
   背景 … 上下を白へフェードさせた var(--color-surface-warm) のグラデーション
   カード 白 ／ ラベル var(--color-key) ／ before #5b5100 ／ after var(--color-em)
   ブレークポイント：
     base            … SP（375px）。見出し→写真→スペック→本文の縦積み
     min-width 900px … PC基準。左に情報、右に before/after を横並び
   ========================================================= */
.rs-s-works {
  /* --- コンポーネント内トークン（SP基準値。PCブレークポイントで上書き） --- */
  /* Color */
  --works-label-bg:        var(--color-key);  /* 顧客名・スペックのラベル */
  --works-before:          #5b5100;  /* before バッジ */
  --works-after:           var(--color-em);  /* after バッジ */

  /* Card：カンプSP 325×407.5px・角丸17.3px・カード間16px */
  --works-card-radius:     1.73rem;
  --works-card-pad-x:      2.35rem;
  --works-card-pad-top:    1.9rem;
  --works-card-pad-bottom: 1.4rem;
  --works-card-min-h:      40.75rem;
  --works-card-gap:        1.6rem;
  --works-card-shadow:     0 0.1rem 1.1rem rgba(216, 150, 55, .3);

  /* 顧客名ラベル：カンプSP 120.5×29px */
  --works-customer-w:      12.05rem;
  --works-customer-h:      2.9rem;

  /* before / after：カンプSP 写真127.5×179px・写真間23px・バッジ40.6px */
  --works-photo-w:         12.75rem;
  --works-photo-gap:       2.3rem;   /* 写真の間隔＝矢印の占有幅 */
  --works-arrow-w:         1.35rem;  /* カンプSP 13.5×20px */
  --works-badge-size:      4.06rem;   /* AI仕様 40.6203px */
  --works-badge-font:      1.03rem;   /* AI仕様 10.2804pt */
  --works-badge-top:      -1.5rem;
  --works-badge-left:     -0.45rem;

  /* スペック：カンプSP ラベル56×17.5px・行ピッチ35px */
  --works-spec-label-w:    5.6rem;
  --works-spec-label-h:    1.75rem;
  --works-spec-label-r:    0.89rem;
  --works-spec-price-w:    5rem;     /* 「費用」の値列を固定し「工期」の開始位置を揃える */
  --works-spec-gap-x:      0.65rem;
  --works-spec-gap-y:      1.75rem;
  --works-spec-value-lh:   1.6rem;

  padding-block: 2.55rem 4.1rem;
  padding-inline: clamp(2.5rem, 3vw, 4rem);  /* カンプ：SP 25px / PC 40px */
  background-image: linear-gradient(180deg, #fff 0%, var(--color-surface-warm) 20%, var(--color-surface-warm) 79%, #fff 100%);
  color: var(--color-ink);
}

/* works テキストの改行制御（表示サイズ別）
   .rs-s-works__br--pc … PC のみ改行 ／ .rs-s-works__br--sp … SP のみ改行 */
.rs-s-works__br--pc { display: none; }
.rs-s-works__br--sp { display: inline; }

.rs-s-works__inner {
  max-width: 108rem;  /* カンプPC：カード幅 1080px */
  padding-inline: 0;
}

/* --- 見出し（画像＋重ねテキスト） --- */
.rs-s-works__title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.2rem;  /* カンプSP：見出し下余白 約12px */
  color: var(--works-label-bg);
  text-align: center;
}

.rs-s-works__title-bg {
  display: block;
  width: 40rem;   /* カンプSP：バブル群 303×76px（画像の透明余白ぶんを含む） */
  max-width: 100%;
  height: auto;
}

.rs-s-works__title-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.1rem;
  line-height: 1.15;
  font-weight: var(--fw-bold);
}

.rs-s-works__title-lead { font-size: 1.75rem; }  /* SP375 = 17.5px */
.rs-s-works__title-main { font-size: 2.75rem; }  /* SP375 = 27.5px */

/* --- カード並び --- */
.rs-s-works__list {
  display: flex;
  flex-direction: column;
  gap: var(--works-card-gap);
  margin-top: 0.9rem;
  padding: 0;
  list-style: none;
}

/* --- カード --- */
.rs-s-works-card {
  min-height: var(--works-card-min-h);  /* カンプ：カード高さを揃える */
  padding: var(--works-card-pad-top) var(--works-card-pad-x) var(--works-card-pad-bottom);
  border-radius: var(--works-card-radius);
  background-color: #fff;
  box-shadow: var(--works-card-shadow);
}

/* --- 顧客名ラベル＋商品名 --- */
.rs-s-works-card__head {
  display: flex;
  flex-wrap: nowrap;   /* 顧客名と商品名を1行に保つ */
  align-items: center;
  gap: 0.6rem 1.8rem;  /* カンプSP：ラベルと商品名の間隔 18px */
  /* ラベルをカードの左端まで伸ばす */
  margin-left: calc(var(--works-card-pad-x) * -1);
}

.rs-s-works-card__customer {
  display: grid;
  place-content: center;
  min-width: var(--works-customer-w);
  min-height: var(--works-customer-h);
  padding-inline: 1.9rem 1.5rem;
  /* 右上・右下のみ角丸 */
  border-radius: 0 calc(var(--works-customer-h) / 2) calc(var(--works-customer-h) / 2) 0;
  background-color: var(--works-label-bg);
  color: #fff;
  font-size: 1.35rem;  /* SP375 = 13.5px */
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.rs-s-works-card__product {
  font-size: 1.65rem;  /* SP375 = 16.5px */
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

/* --- before / after ---
   矢印は写真に重ねず、写真間（--works-photo-gap）を専有トラックとして確保する。 */
.rs-s-works-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 2.6rem;  /* カンプSP：顧客名ラベル下端→写真上端 26px */
}

.rs-s-works-card__figure {
  position: relative;
  flex: 1 1 var(--works-photo-w);
  min-width: 0;  /* 画像の実寸（2x）が最小幅にならないようにする */
  margin: 0;
}

.rs-s-works-card__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* before / after のラベル（円） */
.rs-s-works-card__figure::before {
  content: "before";
  position: absolute;
  top: var(--works-badge-top);
  left: var(--works-badge-left);
  z-index: 1;
  display: grid;
  place-content: center;
  width: var(--works-badge-size);
  height: var(--works-badge-size);
  border-radius: 50%;
  background-color: var(--works-before);
  color: #fff;
  font-size: var(--works-badge-font);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0;
}

.rs-s-works-card__figure--after::before {
  content: "after";
  background-color: var(--works-after);
}

/* 矢印（flow セクションと同形状の二重シェブロン） */
.rs-s-works-card__arrow {
  flex: 0 0 var(--works-photo-gap);
  display: grid;
  place-items: center;
  color: var(--works-label-bg);
}

.rs-s-works-card__arrow svg {
  display: block;
  width: var(--works-arrow-w);
  height: auto;
}

/* --- スペック --- */
.rs-s-works-card__body {
  margin-top: 1.85rem;  /* カンプSP：写真下端→ラベル上端 18.5px */
}

/* SP：付帯工事は全幅、費用・工期は下段で横並び。
   費用の値列を固定幅にして「工期」ラベルの開始位置をカード間で揃える。 */
.rs-s-works-card__spec {
  display: grid;
  grid-template-columns: auto var(--works-spec-price-w) auto minmax(0, 1fr);
  grid-auto-rows: minmax(var(--works-spec-label-h), auto);
  align-items: start;
  column-gap: var(--works-spec-gap-x);
  row-gap: var(--works-spec-gap-y);
  margin: 0;
}
.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 / -1; grid-row: 1; }
.rs-s-works-card__spec-label:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.rs-s-works-card__spec-value:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.rs-s-works-card__spec-label:nth-of-type(3) { grid-column: 3; grid-row: 2; }
.rs-s-works-card__spec-value:nth-of-type(3) { grid-column: 4; grid-row: 2; }

.rs-s-works-card__spec-label {
  display: grid;
  place-content: center;
  min-width: var(--works-spec-label-w);
  min-height: var(--works-spec-label-h);
  /* ラベル幅は min-width で固定。長い語（付帯工事）でも幅が揺れないよう余白は控えめに */
  padding-inline: 0.6rem;
  border-radius: var(--works-spec-label-r);
  background-color: var(--works-label-bg);
  color: #fff;
  font-size: 1.05rem;  /* SP375 = 10.5px */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

.rs-s-works-card__spec-value {
  min-width: 0;
  margin: 0;
  font-size: 1.15rem;  /* SP375 = 11.5px */
  /* 1行目がラベルと横並びで揃い、折り返した行は下へ伸びる */
  line-height: var(--works-spec-value-lh);
  overflow-wrap: anywhere;
}

.rs-s-works-card__text {
  margin-top: 1.65rem;
  font-size: 1.1rem;  /* SP375 = 11px */
  line-height: 1.6;
}

/* --- ボタン --- */
.rs-s-works__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.05rem;
  margin-top: 3.6rem;
}

.rs-s-works__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 25rem;   /* カンプSP：250×50px */
  min-height: 5rem;
  padding-inline: 1.4rem 2.6rem;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 1.4rem;  /* SP375 = 14px */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  /* カンプ同様、和文の字詰め（プロポーショナルメトリクス）を有効化 */
  font-feature-settings: "palt";
  transition: opacity .2s ease;
}

/* 矢印（縦長シェブロン）。カンプSP：6.79×13.65px */
.rs-s-works__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.68rem;
  height: 1.37rem;
  translate: 0 -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.79 13.65'%3E%3Cpath d='M1 1 L5.79 6.83 L1 12.65' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rs-s-works__btn:hover {
  opacity: .85;
}

.rs-s-works__btn--more {
  background-color: var(--works-label-bg);
  white-space: nowrap;  /* 「トイレリフォーム事例をもっと見る」を改行させない */
}

.rs-s-works__btn--voice {
  background-color: #4d9074;
}

/* アイコンは絶対配置。ラベルはボタン中央に置く（カンプ準拠） */
.rs-s-works__btn-icon {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  width: 3.73rem;  /* カンプSP：37.26px */
  height: auto;
  translate: 0 -50%;
}


/* =========================================================
   Works / PC 横並び（900px以上）
   左に顧客情報・スペック・本文、右に before / after を配置
   カンプPC（1366px）：カード 1080×461.5px・写真 255×358px・カード間31px

   カードは最大1080pxで、ビューポート幅 1160px 以上でカンプ実寸になる。
   それ未満の帯（900〜1159px）はカード幅が縮むため、各値を
   clamp(下限, 1160px基準のvw, カンプ実寸) で連続的に追従させる。
   ========================================================= */
@media (min-width: 900px) {
  .rs-s-works {
    /* Card */
    --works-card-radius:     3rem;
    --works-card-pad-x:      clamp(2.4rem, 3.45vw, 4rem);
    --works-card-pad-top:    clamp(2.4rem, 2.89vw, 3.35rem);
    --works-card-pad-bottom: clamp(2.4rem, 3.45vw, 4rem);
    --works-card-min-h:      0;
    --works-card-gap:        3.1rem;

    /* 顧客名ラベル：カンプPC 188.3×50px */
    --works-customer-w:      clamp(15rem, 16.2vw, 18.83rem);
    --works-customer-h:      clamp(4rem, 4.3vw, 5rem);

    /* before / after：カンプPC 写真255×358px・写真間46.5px・バッジ81.2px */
    --works-photo-w:         clamp(17.5rem, 22vw, 25.5rem);
    --works-photo-gap:       clamp(3rem, 4vw, 4.65rem);
    --works-arrow-w:         clamp(2.1rem, 2.46vw, 2.85rem);  /* カンプPC 28.5×42px */
    --works-badge-size:      clamp(6rem, 7vw, 8.12rem);     /* AI仕様 81.2407px */
    --works-badge-font:      clamp(1.5rem, 1.78vw, 2.06rem); /* AI仕様 20.5608pt */
    --works-badge-top:      -3rem;
    --works-badge-left:     -0.95rem;

    /* スペック：カンプPC ラベル105.9×32.9px・行ピッチ61.5px */
    --works-spec-label-w:    clamp(8.6rem, 9.13vw, 10.59rem);
    --works-spec-label-h:    clamp(2.7rem, 2.84vw, 3.29rem);
    --works-spec-label-r:    1.64rem;
    --works-spec-gap-x:      1.1rem;
    --works-spec-gap-y:      1.55rem;
    --works-spec-value-lh:   clamp(2.4rem, 2.54vw, 2.95rem);
    /* 単一行のスペック行に与える最小高さ。折り返した行は自然高さで詰まる */
    --works-spec-row-h:      clamp(3.8rem, 3.97vw, 4.6rem);

    padding-block: 2.55rem 7.05rem;
  }

  .rs-s-works__br--pc { display: inline; }
  .rs-s-works__br--sp { display: none; }

  .rs-s-works__title {
    margin-bottom: 4rem;
  }

  .rs-s-works__title-bg {
    width: 71rem;  /* カンプPC：バブル群 649×122.5px（画像の透明余白ぶんを含む） */
  }

  .rs-s-works__title-lead { font-size: 3.5rem; }  /* PC = 35px */
  .rs-s-works__title-main { font-size: 5.5rem; }  /* PC = 55px */

  .rs-s-works__list {
    /* 見出し画像の透明余白ぶんを詰める */
    margin-top: -2.35rem;
  }

  .rs-s-works-card {
    display: grid;
    /* 右カラムは before/after 2枚＋矢印トラックぶんを確保する */
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--works-photo-w) * 2 + var(--works-photo-gap));
    column-gap: var(--works-card-pad-x);
    padding-left: 0;  /* 顧客名ラベルをカード左端に接地させる */
  }

  .rs-s-works-card__head {
    grid-column: 1;
    gap: 0.8rem clamp(1.6rem, 2.07vw, 2.4rem);  /* カンプPC：ラベルと商品名 24px */
    margin-left: 0;
  }

  .rs-s-works-card__customer {
    padding-inline: clamp(1.6rem, 2.07vw, 2.4rem);
    font-size: clamp(1.8rem, 1.9vw, 2.2rem);  /* PC = 22px */
  }

  .rs-s-works-card__product {
    /* 「TOTO ピュアレスト」など長い商品名を途中で折り返させない。
       左カラムをわずかに超える分はカラム間の余白（column-gap）に収まる。 */
    white-space: nowrap;
    font-size: clamp(2.1rem, 2.33vw, 2.7rem);  /* PC = 27px */
  }

  .rs-s-works-card__media {
    grid-column: 2;
    /* 暗黙のグリッド行では -1 が使えないため span で指定する */
    grid-row: 1 / span 2;
    align-self: start;   /* 全カードで写真の上端位置を揃える */
    margin-top: clamp(2.2rem, 2.59vw, 3rem);  /* カード上端→写真上端 63.5px */
  }

  .rs-s-works-card__body {
    grid-column: 1;
    margin-top: clamp(2.6rem, 3.23vw, 3.75rem);
    padding-left: var(--works-card-pad-x);
  }

  /* PC は3行すべてを縦積み（SPの横並び配置を解除） */
  .rs-s-works-card__spec {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: minmax(var(--works-spec-row-h), auto);
  }
  .rs-s-works-card__spec-label:nth-of-type(1),
  .rs-s-works-card__spec-label:nth-of-type(2),
  .rs-s-works-card__spec-label:nth-of-type(3) { grid-column: 1; grid-row: auto; }
  .rs-s-works-card__spec-value:nth-of-type(1),
  .rs-s-works-card__spec-value:nth-of-type(2),
  .rs-s-works-card__spec-value:nth-of-type(3) { grid-column: 2; grid-row: auto; }

  .rs-s-works-card__spec-label {
    font-size: clamp(1.55rem, 1.64vw, 1.9rem);  /* PC = 19px */
  }

  .rs-s-works-card__spec-value {
    font-size: clamp(1.8rem, 1.9vw, 2.2rem);  /* PC = 22px */
  }

  .rs-s-works-card__text {
    /* スペック行の最小高さ（--works-spec-row-h）とラベル高の差ぶんを差し引いた値 */
    margin-top: clamp(1.4rem, 1.6vw, 1.85rem);
    font-size: clamp(1.6rem, 1.68vw, 1.95rem);  /* PC = 19.5px */
    line-height: 1.53;
  }

  .rs-s-works__actions {
    gap: 5.05rem;
    margin-top: 5.05rem;
  }

  .rs-s-works__btn {
    max-width: 50rem;   /* カンプPC：500×100px */
    min-height: 10rem;
    padding-inline: 2.4rem 4rem;
    font-size: 2.2rem;  /* PC = 22px */
  }

  .rs-s-works__btn::after {
    right: 2.35rem;
    width: 1.3rem;   /* カンプPC：13×27px */
    height: 2.7rem;
  }

  .rs-s-works__btn--voice {
    max-width: 40rem;   /* カンプPC：400×80px */
    min-height: 8rem;
  }

  .rs-s-works__btn-icon {
    left: 1.1rem;
    width: 6rem;   /* カンプPC：60px */
  }
}


/* =========================================================
   4. Project / Reasons（せいわが選ばれる理由）
   基準デザイン：SP 375px / PC 1366px
   背景：var(--color-key) を不透明度25%で白に重ねた色（=#bfe4ef）から、
         showroom 手前で白へ抜けるグラデーション。showroom へ連続する。
   ブレークポイント：
     base            … SP（375px）1カラム
     min-width 900px … PC基準の3カラム
   ========================================================= */
.rs-s-reasons {
  /* TODO(他ページ展開時): テーマ色の直書き。--color-theme に追従しない */
  --reasons-circle: rgba(0, 146, 191, .15); /* アイコン左下の円 */

  position: relative;
  z-index: 0; /* ::before(-1) を配置する基準。overflow は切らない */
  padding-block: 3rem 4rem;
  padding-inline: clamp(1.6rem, 3vw, 4rem);
  /* 青みは reasons 上端を原点に、showroom 上部へまたいで白へ抜ける。
     reasons と showroom を1枚のグラデーションで覆うため、背景本体は
     祖先（body）に置き、両セクションは透明にして透かす。 */
  color: var(--color-ink);
  font-feature-settings: "palt";
}

/* reasons 上端から showroom 上部まで届く1枚のグラデーション帯。
   高さを reasons の実高より大きく取り、はみ出し分を showroom 上部へ
   重ねることで、セクションをまたいで途切れなくつなぐ。 */
.rs-s-reasons::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 1000px; /* SP：カンプ実測の背景高さ（showroom 上部へのかぶりぶんを含む） */
  background-image: linear-gradient(180deg, #bfe4ef 0%, #fff 100%);
}

.rs-s-reasons__inner {
  max-width: 108rem;
  padding-inline: 0;
}

/* --- 見出し（SVGリボンの上にテキストを重ねる） --- */
.rs-s-reasons__title {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 32rem;   /* カンプSP：300×65.19px */
  margin-inline: auto;
  aspect-ratio: 300 / 65.19;
  color: var(--color-key);
  text-align: center;
}

.rs-s-reasons__title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rs-s-reasons__title-text {
  position: relative;
  display: grid;
  gap: 0.2rem;
  line-height: 1.15;
  font-weight: var(--fw-bold);
}

.rs-s-reasons__title-lead { font-size: 1.65rem; } /* SP375 = 16.5pt */
.rs-s-reasons__title-main { font-size: 2.6rem; }  /* SP375 = 26pt */

/* --- 3つの理由 --- */
.rs-s-reasons__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 1.9rem;
  margin-top: 2.4rem;
  padding: 0;
  list-style: none;
}

.rs-s-reasons-item {
  width: 34rem;
  max-width: 100%;
  text-align: center;
}

/* アイコン＋左下の円装飾 */
.rs-s-reasons-item__figure {
  position: relative;
  display: block;    /* span 要素のため block 化しないと width が効かない */
  width: 13rem;      /* カンプSP：130×130px */
  aspect-ratio: 1;   /* 正方形に固定 */
  line-height: 0;
  margin-inline: auto;
}

.rs-s-reasons-item__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 左下の円（乗算）。アイコン中心の下を基準に左下へずらす。
   直径117px、左へ68.25px・下へ52px（いずれもSP基準、%で保持）。 */
.rs-s-reasons-item__figure::before {
  content: "";
  position: absolute;
  /* 基準＝アイコンの中心下（水平中央・垂直下端）。そこから
     左 68.25px（=幅130の52.5%）、下 52px（=幅130の40%）へ円の中心を移動。 */
  left: calc(50% - 55%);
  top: calc(100% - 5%);
  z-index: 0;
  width: 90%;      /* 直径117 / 130 */
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--reasons-circle);
  mix-blend-mode: multiply;
}

.rs-s-reasons-item__title {
  position: relative;
  margin-top: 0.8rem;
  padding-bottom: 1rem;
  color: var(--color-key);
  font-size: 1.45rem; /* SP375 = 14.5pt */
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

/* タイトル下の短い青ライン */
.rs-s-reasons-item__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.6rem;   /* SP375 = 26.24px */
  height: 1.3px;
  translate: -50% 0;
  background-color: var(--color-key);
}

.rs-s-reasons-item__text {
  margin-top: 1.2rem;
  text-align: left;
  font-size: 1.3rem; /* SP375 = 13pt */
  font-weight: var(--fw-regular);
  line-height: 1.75;
}

/* --- ボタン --- */
.rs-s-reasons__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 25rem;  /* カンプSP：250×50px */
  min-height: 5rem;
  margin: 3rem auto 0;
  padding: 0.6rem 3rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-key);
  color: #fff;
  font-size: 1.4rem;  /* SP375 = 14pt */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s ease;
}

.rs-s-reasons__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  width: var(--arrow-box);   /* カンプSP：6.79×13.65px（山括弧） */
  height: var(--arrow-box);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.rs-s-reasons__btn:hover {
  opacity: .85;
}


/* =========================================================
   Reasons / PC（900px以上）
   カンプ実寸（1366px）：
     見出しリボン 640.5×139.2 ／ アイコン 200×200
     円 180×180（左105・下85）／ タイトル下ライン 40.4×2px
     ボタン 400×80 ／ 内容 1080px・3カラム
   ========================================================= */
@media (min-width: 900px) {
  .rs-s-reasons {
    /* カンプPC：見出し上端 49.5px ／ ボタン下端から 34px */
    padding-block: 4.95rem 3.4rem;
  }

  .rs-s-reasons::before {
    height: 1012px; /* PC：カンプ実測の背景高さ */
  }

  .rs-s-reasons__title {
    max-width: clamp(48rem, 46.9vw, 64rem); /* 1366 = 640.5px */
    aspect-ratio: 640.5 / 139.2;
  }

  .rs-s-reasons__title-lead { font-size: clamp(2.6rem, 2.7vw, 3.5rem); }  /* 35pt */
  .rs-s-reasons__title-main { font-size: clamp(4rem, 4.24vw, 5.5rem); }   /* 55pt */

  .rs-s-reasons__list {
    flex-wrap: nowrap;
    /* カンプPC：カラム幅315px・間隔67px（3カラムで内側1080px） */
    gap: 6.7rem;
    margin-top: 4.5rem;  /* カンプPC：見出し下端→アイコン上端 45px */
  }

  .rs-s-reasons-item {
    width: auto;
    flex: 0 1 31.5rem;
  }

  .rs-s-reasons-item__figure {
    width: clamp(16rem, 14.6vw, 20rem); /* 1366 = 200px */
  }

  /* PCは下方向 85px（=幅200の42.5%） */
  .rs-s-reasons-item__figure::before {
    top: calc(100% + 0%);
  }

  .rs-s-reasons-item__title {
    margin-top: 2rem;
    padding-bottom: 1.6rem;
    font-size: clamp(1.7rem, 1.46vw, 2rem); /* 20pt */
  }

  .rs-s-reasons-item__title::after {
    width: 4rem;   /* 1366 = 40.4px */
    height: 2px;
  }

  .rs-s-reasons-item__text {
    margin-top: 2rem;
    font-size: clamp(1.4rem, 1.17vw, 1.6rem); /* 16pt */
    line-height: 1.5625;  /* カンプPC：行送り25px */
  }

  .rs-s-reasons__btn {
    max-width: 40rem;  /* カンプPC：400×80px */
    min-height: 8rem;
    margin-top: 4rem;
    font-size: clamp(1.8rem, 1.61vw, 2.2rem); /* 22pt */
  }

  .rs-s-reasons__btn::after {
    right: 3rem;
    width: var(--arrow-box-pc);   /* カンプPC：13.58×27.31px */
    height: var(--arrow-box-pc);
    border-width: 3px;
  }
}


/* =========================================================
   4. Project / Showroom（体験型ショールームのご案内）
   基準デザイン：SP 375px / PC 1366px
   ブレークポイント：
     base            … SP（375px）縦積み
     min-width 900px … PC基準。メイン画像2枚横並び／店舗カードは
                       左に店名・写真・情報、右に地図
   ========================================================= */
.rs-s-showroom {
  /* --- コンポーネント内トークン --- */
  --sr-blue:  var(--color-key); /* 見出し・店名・装飾 */
  --sr-ink:   var(--color-ink); /* 本文 */
  --sr-panel: #f5f4e6; /* 店舗パネルの背景 */
  --sr-red:   var(--color-em); /* CTA */

  position: relative; /* reasons の背景帯（はみ出し分）より前面に */
  padding-block: 3rem 3.5rem;
  padding-inline: 2.5rem;
  /* 背景は reasons の ::before グラデーション帯が上部に透けて続く。 */
  color: var(--sr-ink);
  /* palt：Illustrator の「約物半角」に相当 */
  font-feature-settings: "palt";
}

/* 縦積み時は最大 440px（広い画面で間延びさせない）。PCで解除 */
.rs-s-showroom__inner {
  max-width: 44rem;
  padding-inline: 0;
}

/* ---------------------------------------------------------
   見出し ＋ 下部装飾（area セクションと同一仕様）
   --------------------------------------------------------- */
.rs-s-showroom__title {
  --deco-w: 250px;

  color: var(--sr-blue);
  /* 2行構成（小見出し＋大見出し）のため、字送り・ウェイトのみ固有 */
  font-size: clamp(2rem, 5.33vw, 2.6rem); /* SP375 = 20px */
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.rs-s-showroom__title-sub {
  display: block;
  font-size: 0.75em; /* 大見出し比 15/20（SP）・35/50（PC） */
  font-weight: var(--fw-bold);
}

/* --- メイン画像2枚 --- */
.rs-s-showroom__pics {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.rs-s-showroom__pics img {
  width: 100%;
  /* カンプSP：本文幅325pxに対し画像300px＝約92.5% */
  width: 92.5%;
  height: auto;
  margin-inline: auto;
  border-radius: 0.3rem;
}

/* --- リード文 --- */
.rs-s-showroom__lead {
  margin-top: 2rem;
  font-size: clamp(1.3rem, 3.47vw, 1.6rem); /* SP375 = 13px */
  font-weight: var(--fw-regular);
  line-height: 1.72;
  text-align: center;
}

/* --- 店舗パネル（3店舗を1枚のパネルに収め、区切り線で分割） --- */
.rs-s-showroom__list {
  margin: 2.5rem 0 0;
  padding: 0;
  border-radius: 1rem;
  background-color: var(--sr-panel);
  list-style: none;
}

.rs-s-showroom-shop {
  position: relative;
  padding: 2rem 1.5rem;
}

/* 区切り線。下に白1本を重ねて立体感（彫り込み）を出す。
   線幅は SP 1px / PC 2px（PCの半分） */
.rs-s-showroom-shop + .rs-s-showroom-shop {
  border-top: 1px solid #5b5100;
  box-shadow: inset 0 1px 0 #fff;
}

/* カード全体をリンク化（マップ部分は除く）。
   テキストは text-indent で視覚的に隠し、支援技術には残す。 */
.rs-s-showroom-shop__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;

  border-radius: inherit;
  white-space: nowrap;
  text-indent: 101%;
  transition: background-color .2s ease;
}

.rs-s-showroom-shop__link:hover {
  /* TODO(他ページ展開時): テーマ色の直書き。--color-theme に追従しない */
  background-color: rgba(0, 146, 191, .06);
}

/* 店名（ロゴ＋店舗名） */
.rs-s-showroom-shop__name {
  display: flex;
  /* 375px以上で「◯◯店ショールーム」を1行に保つ */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  position: relative;
  padding-bottom: 1.2rem;
  color: var(--sr-blue);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

/* 店名下のライン（右端はマップの下に潜り込む）
   グラデーション＋乗算で、地の色を活かしたまま右へフェードさせる */
.rs-s-showroom-shop__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32rem;   /* カンプSP：320×5px */
  height: 0.5rem;
  border-radius: 0.25rem;
  background: linear-gradient(to right, var(--sr-blue) 0%, #fff 90%);
  mix-blend-mode: multiply;
}

.rs-s-showroom-shop__logo {
  width: clamp(11.87rem, 31.65vw, 15rem); /* SP375 = 118.7px */
  height: auto;
  align-self: center;
}

.rs-s-showroom-shop__branch,
.rs-s-showroom-shop__suffix {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rs-s-showroom-shop__branch { font-size: clamp(2.31rem, 6.16vw, 2.9rem); }
.rs-s-showroom-shop__suffix { font-size: clamp(1.73rem, 4.62vw, 2.2rem); }

.rs-s-showroom-shop__body {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.rs-s-showroom-shop__pict {
  /* カンプSP：150×110px。タブレット幅まで緩やかに拡大 */
  width: clamp(15rem, 40vw, 21rem);
  height: auto;
  border-radius: 0.4rem;
}

/* 写真と情報はSPでは横並び */
.rs-s-showroom-shop__body {
  grid-template-areas:
    "pict info"
    "map  map";
  grid-template-columns: auto 1fr;
  align-items: start;
}

.rs-s-showroom-shop__pict { grid-area: pict; }
.rs-s-showroom-shop__map  { grid-area: map; }

/* 住所・営業時間・駐車場は1セットとして、店舗写真に対し縦中央で揃える */
.rs-s-showroom-shop__info {
  grid-area: info;
  align-self: center;
}

.rs-s-showroom-shop__address {
  font-size: clamp(1.05rem, 2.8vw, 1.35rem); /* SP375 = 10.5px */
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.rs-s-showroom-shop__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0.8rem 0 0;
}

.rs-s-showroom-shop__meta-label {
  padding: 0.3rem 0.8rem;
  border-radius: 0.9rem;
  background-color: var(--sr-blue);
  color: var(--color-text-invert);
  font-size: clamp(0.9rem, 2.4vw, 1.15rem); /* SP375 = 9px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.rs-s-showroom-shop__meta-value {
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem); /* SP375 = 10.5px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.rs-s-showroom-shop__map {
  position: relative;
  width: 100%;
  z-index: 2; /* カードリンクより前面に出し、マップを操作可能にする */
  aspect-ratio: 300 / 257.14; /* カンプSP：300×257.14px */
  overflow: hidden;
  border-radius: 0.4rem;
}

.rs-s-showroom-shop__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   Showroom / PC（768px以上）
   カンプ実寸（1366px）：
     内容 1000px ／ メイン画像 490×350・間隔 20px
     店舗パネル 1000px ／ カード内余白 30px
     店舗写真 300×220 ／ 地図 360×308.57 ／ CTA 500×100
   ■ 文字サイズは 1300px 基準の clamp で 900〜1300px を追従させる
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-showroom {
    /* カンプPC：セクション上端→見出し字面 50px */
    padding-block: 5.1rem 6rem;
    padding-inline: clamp(1.6rem, 3vw, 4rem);
  }

  .rs-s-showroom__inner {
    max-width: 100rem;
  }

  .rs-s-showroom__title {
    --deco-w:    clamp(40rem, 47.4vw, 61.6rem); /* 1366 = 616px */
    --deco-gap:  clamp(1rem, 1.23vw, 1.6rem);
    --deco-line: 2px;

    padding-bottom: 1.05rem;  /* カンプPC：装飾下端が見出し字面下端＋35px */
    font-size: clamp(3.2rem, 3.85vw, 5rem); /* 1366 = 50px */
  }

  .rs-s-showroom__title-sub { font-size: 0.7em; } /* 35/50 */

  .rs-s-showroom__pics {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.85rem;  /* カンプPC：見出し装飾下端→写真上端 28.5px */
  }

  .rs-s-showroom__pics img {
    width: 100%;
    border-radius: 0.5rem;

  }

  /* PCは幅に余裕があるためSP用の改行は無効化 */
  .rs-s-showroom__lead-br {
    display: none;
  }

  .rs-s-showroom__lead {
    margin-top: 4.85rem;  /* カンプPC：写真下端→リード字面 50.5px */
    font-size: clamp(1.5rem, 1.38vw, 1.8rem); /* 1366 = 18px */
  }

  .rs-s-showroom__list {
    margin-top: 3.75rem;  /* カンプPC：リード下端→パネル上端 50px */
    border-radius: 2rem;
  }

  /* 左に店名・写真・情報、右に地図（地図は店名の高さから配置） */
  .rs-s-showroom-shop {
    display: grid;
    grid-template-areas:
      "name name map"
      "pict info map";
    grid-template-columns: auto minmax(0, 1fr) 36rem;
    align-items: start;
    column-gap: 2rem;
    row-gap: 2.5rem;
    padding: 3rem;
  }

  .rs-s-showroom-shop + .rs-s-showroom-shop {
    border-top-width: 2px;
    box-shadow: inset 0 2px 0 #fff;
  }

  .rs-s-showroom-shop__name { grid-area: name; }
  .rs-s-showroom-shop__body { display: contents; }

  .rs-s-showroom-shop__name {
    gap: 1.2rem;

    padding-bottom: 2rem;
  }

  .rs-s-showroom-shop__logo { flex: 0 0 auto; }

  .rs-s-showroom-shop__name::after {
    width: 80rem; /* カンプPC：800×10px */
    height: 1rem;
    border-radius: 0.5rem;
  }

  .rs-s-showroom-shop__logo { width: clamp(15rem, 15.8vw, 20.53rem); }
  .rs-s-showroom-shop__branch { font-size: clamp(3rem, 3.08vw, 4rem); }
  .rs-s-showroom-shop__suffix { font-size: clamp(2.2rem, 2.31vw, 3rem); }

  .rs-s-showroom-shop__pict { width: 30rem; }

  .rs-s-showroom-shop__address {
    font-size: clamp(1.5rem, 1.46vw, 1.9rem); /* 1366 = 19px */
    line-height: 1.6;
  }

  .rs-s-showroom-shop__meta {
    gap: 1.5rem 1rem;
    margin-top: 2rem;
  }

  .rs-s-showroom-shop__meta-label {
    padding: 0.6rem 1.4rem;
    border-radius: 1.5rem;
    font-size: clamp(1.2rem, 1.15vw, 1.5rem); /* 1366 = 15px */
  }

  .rs-s-showroom-shop__meta-value {
    font-size: clamp(1.5rem, 1.38vw, 1.8rem); /* 1366 = 18px */
  }

  .rs-s-showroom-shop__map {
    aspect-ratio: 360 / 308.57; /* カンプPC：360×308.57px */
  }
}


/* =========================================================
   4. Project / Flow（施工の流れ）
   基準デザイン：SP 375px / PC 1366px
   ブレークポイント：
     base            … SP（375px）1カラム（アイコン左・テキスト右／カード間に下向き矢印）
     min-width 900px … PC基準の4カラム（カード間に右向き矢印）
   ========================================================= */
.rs-s-flow,
.rs-s-faq {
  /* --- コンポーネント内トークン（flow / faq 共通） --- */
  --sec-bg:    var(--color-surface-warm); /* セクション背景 */
  --sec-blue:  var(--color-key); /* 見出し・装飾・Qバッジ */
  --sec-red:   var(--color-em); /* STEP4・Aバッジ */
  --sec-ink:   var(--color-ink); /* 本文 */

  padding-inline: 3.75rem;
  background-color: var(--sec-bg);
  color: var(--sec-ink);
  /* palt：Illustrator の「約物半角」に相当 */
  font-feature-settings: "palt";
}

/* カンプSP：セクション上端→見出し字面 35px */
.rs-s-flow { padding-block: 3.7rem 1.5rem; }
.rs-s-faq  { padding-block: 1.5rem 2rem; padding-inline: 2.5rem; }

/* 縦積み時は最大 440px（広い画面で間延びさせない）。PCで解除 */
.rs-s-flow__inner,

.rs-s-faq__inner { max-width: 44rem; padding-inline: 0; }


/* ---------------------------------------------------------
   見出し ＋ 下部装飾（area セクションと同一仕様）
   ① ベースライン（--deco-w × --deco-line）
   ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
   ③ 45°の斜線（--deco-gap 角・線幅 --deco-line）
   ※①の長さは見出しの文字数に合わせて --deco-w で調整する
   --------------------------------------------------------- */
.rs-s-flow__title,
.rs-s-faq__title {
  color: var(--sec-blue);
}

.rs-s-flow__title { --deco-w: 103px; } /* 「施工の流れ」5文字 */
.rs-s-faq__title  { --deco-w: 140px; } /* 「よくあるご質問」7文字 */

/* --- ステップ --- */
.rs-s-flow__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0.7rem 0 0;  /* カンプSP：装飾下端→カード上端 13.5px */
  padding: 0;
  list-style: none;
}

.rs-s-flow-step {
  --step-color: #7ac6de; /* STEP1。以降は個別に上書き */

  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 10rem;
  padding: 0.5rem 0.4rem 0.5rem 0.8rem;
  border-radius: 1.5rem;
  background-color: #fff;
  /* カンプの淡い暖色グロー（カード外周に約9px） */
  box-shadow: 0 0 9px rgba(236, 185, 90, .45);
}

.rs-s-flow-step--02 { --step-color: #44afd0; }
.rs-s-flow-step--03 { --step-color: var(--color-key); }
.rs-s-flow-step--04 { --step-color: var(--sec-red); }

/* 左上のリボン（直角三角形） */
.rs-s-flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8.1rem;   /* カンプ 81.1px */
  height: 3.65rem; /* カンプ 36.5px */
  background-color: var(--step-color);
  /* カード左上の角丸に合わせる（カード側の overflow に頼らない） */
  border-top-left-radius: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* STEPラベル。リボンからはみ出す分は文字の縁取りで背景をつなぐ */
.rs-s-flow-step__num {
  position: absolute;
  top: 0.7rem;
  left: 0.8rem;
  z-index: 1;
  color: var(--color-text-invert);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  -webkit-text-stroke: 6.4px var(--step-color); /* カンプ 4.8pt */
  paint-order: stroke fill;
}

/* アイコンは4点共通の枠（最大サイズ）に object-fit: contain で収める。
   各アイコンは原寸のまま枠の中央に配置されるため、

   幅・高さが異なっても中心が揃う。 */
.rs-s-flow-step__icon {
  /* 幅が足りない場合は縮小してテキストとの重なりを防ぐ
     （object-fit: contain のため縮んでも比率は崩れない） */
  flex: 0 1 auto;
  min-width: 0;
  /* 画像はイラスト周囲に透明の余白を含むため、余白ぶんを負マージンで
     打ち消してレイアウト上の占有量をイラスト実寸に合わせる。

     ■ SPでのイラスト位置の調整
       上下（高さ位置）… margin の第1値。マイナスを大きくすると上へ動く
       左右（横位置）  … 下の margin-right を調整する（第2値は下の指定で上書きされる）
                        マイナスを大きくするとイラストが右へ動く */
  width: 13.4rem;
  height: 10.5rem;
  margin: -1.4rem -1.55rem -0.8rem;
  object-fit: contain;
  /* 余った幅はすべて左へ寄せ、アイコンをテキスト側（右）へ配置する。
     テキストとの間隔は .rs-s-flow-step の gap（14px）で確保される。
     横位置の微調整はこの margin-right で行う（負の値で右へ移動）。 */
  margin-left: auto;
  margin-right: -1.8rem;
}

.rs-s-flow-step__title {
  /* 幅を固定し、4カード間でアイコンの位置が揃うようにする
     （余った分はアイコン側の auto マージンへ渡る）

     ■ SPでタイトルを左右に動かしたい場合
       ・イラストごと動かす … ここに margin-right を足す（正の値で左へ）
       ・タイトルだけ動かす … 上記に加え、.rs-s-flow-step__icon の margin-right に
                              同じ値のマイナスを入れてイラストを元の位置に戻す
                              例：title margin-right: 1rem ／ icon margin-right: -1rem
       ※イラスト右端との余裕は約46px */
  flex: 0 0 11.8rem;
  margin-right: 1rem;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}

/* カード間の矢印（二重シェブロン。SPは90°回転で下向き）
   カンプ実寸：PC 25.5×36px ／ 線幅4px・先端と角は丸め */
.rs-s-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.7rem;
  z-index: 1;
  width: 1.25rem;  /* 回転前。SPの見た目は 18.09×12.5px */
  height: 1.81rem;
  translate: -50% 0;
  rotate: 90deg;
  /* データURI内には var() を書けないため、背景画像ではなくマスクで描く。
     形状のみをマスクで与え、色は --color-key（テーマ色）から取る。
     これによりページごとの配色切り替えが矢印にも反映される。 */
  background-color: var(--color-key);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 36.171'%3E%3Cpath d='M2 2 L12 18.085 L2 34.171 M13 2 L23 18.085 L13 34.171' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 36.171'%3E%3Cpath d='M2 2 L12 18.085 L2 34.171 M13 2 L23 18.085 L13 34.171' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* =========================================================
   4. Project / FAQ（よくあるご質問）
   ========================================================= */
.rs-s-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0.85rem 0 0;  /* カンプSP：装飾下端→1枚目上端 */
  padding: 0;
  list-style: none;
}

.rs-s-faq-item {
  padding: 1.2rem 1.4rem 1.4rem;
  border-radius: 0.5rem;
  background-color: #fff;
}

.rs-s-faq-item__q,
.rs-s-faq-item__a {
  position: relative;
  padding-left: 2.8rem;
}

.rs-s-faq-item__q {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.rs-s-faq-item__a {
  margin-top: 0.6rem;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  line-height: 1.73;  /* カンプSP：行送り22.5px */
}

/* Q / A のバッジ */
.rs-s-faq-item__q::before,
.rs-s-faq-item__a::before {
  position: absolute;
  top: 0.2em;
  left: 0;
  display: grid;
  place-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.3rem;
  color: var(--color-text-invert);
  font-size: 1.27rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.rs-s-faq-item__q::before { content: "Q"; background-color: var(--sec-blue); }
.rs-s-faq-item__a::before { content: "A"; background-color: var(--sec-red); }


/* =========================================================
   Flow / FAQ ： PC（900px以上）
   カンプ実寸（1366px）：
     flow 内容 1080px ／ カード 251×250・間隔 25.5px・角丸 30px
     リボン 135×61 ／ STEPラベル 23px ／ カード見出し 20px
     faq 内容 1000px ／ 項目角丸 10px・項目間 20px
   ■ 文字サイズは 1300px 基準の clamp で 900〜1300px を追従させる
   ========================================================= */
@media (min-width: 900px) {
  .rs-s-flow,
  .rs-s-faq {
    padding-inline: clamp(1.6rem, 3vw, 4rem);
  }

  /* カンプPC：セクション上端→見出し字面 flow 50.5px / faq 50.5px */
  .rs-s-flow { padding-block: 5.35rem 3rem; }
  .rs-s-faq  { padding-block: 4.15rem 5rem; }

  .rs-s-flow__inner { max-width: 108rem; }
  .rs-s-faq__inner  { max-width: 100rem; }

  .rs-s-flow__title { --deco-w: clamp(14rem, 15.8vw, 20.6rem); }
  .rs-s-faq__title  { --deco-w: clamp(17rem, 19.5vw, 25.3rem); }

  /* --- 4カラム --- */
  .rs-s-flow__list {
    flex-direction: row;
    gap: 2.55rem;
    margin-top: 2.35rem;  /* カンプPC：装飾下端→カード上端 23.5px */
  }

  .rs-s-flow-step {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-height: 25rem;
    /* 上＝STEPラベルの領域を確保、下＝カンプのタイトル下余白 21.5px */
    padding: 3.55rem 1rem 2.15rem;
    border-radius: 3rem;
  }

  .rs-s-flow-step::before {
    width: 13.5rem; /* カンプ 135.2px */
    height: 6.1rem; /* カンプ 60.8px */
  }

  .rs-s-flow-step__num {
    top: 1.2rem;
    left: 1.2rem;
    font-size: clamp(1.6rem, 1.77vw, 2.3rem); /* 1366 = 23px */
    -webkit-text-stroke: 10.7px var(--step-color); /* カンプ 8pt */
  }

  /* アイコン画像はイラストの周囲に透明の余白を含む（画像 461×362px に対し
     イラストは STEP1=286×215px など）。等倍＝1x の 230.5×181px で表示すると
     カンプのイラスト実寸と一致するため、サイズは固定のまま扱う。

     ■ イラストの高さ位置の調整はこの margin で行う
       第1値（上マージン）… 小さくすると下へ、大きく（マイナス方向へ）すると上へ動く
       第3値（下マージン）… 第1値と逆方向に同量だけ動かすとカード高さ(250px)が変わらない
       例：イラストを 2px 下げる → 第1値を +0.2rem／第3値を -0.2rem */
  .rs-s-flow-step__icon {
    width: 23.05rem;   /* 画像の等倍幅（461px ÷ 2） */
    height: 18.1rem;   /* 画像の等倍高（362px ÷ 2） */
    margin: -2.65rem auto -2rem;
    object-fit: contain;
  }

  .rs-s-flow-step__title {
    flex: 0 0 auto;
    margin-top: auto;
    margin-right: 0rem;
    font-size: clamp(1.5rem, 1.54vw, 2rem); /* 1366 = 20px */
    line-height: 1.4;  /* カンプPC：行送り28px */
  }

  /* カード間の矢印（PCは回転なしで右向き） */
  .rs-s-flow-step:not(:last-child)::after {
    top: 50%;
    left: auto;
    right: -2.55rem;
    bottom: auto;
    width: 2.5rem;    /* カンプ実寸 25×36.171px */
    height: 3.62rem;
    translate: 0 -50%;
    rotate: none;
  }

  /* --- FAQ --- */
  .rs-s-faq__list {
    gap: 2rem;
    margin-top: 2.55rem;  /* カンプPC：装飾下端→1枚目上端 25.5px */
  }

  .rs-s-faq-item {
    padding: 1.9rem 2rem 2.35rem;
    border-radius: 1rem;
  }

  .rs-s-faq-item__q,
  .rs-s-faq-item__a {
    /* カンプPC：カード左端から本文まで 67.5px（カード内側20px＋47.5px） */
    padding-left: 4.75rem;
  }

  .rs-s-faq-item__q {
    font-size: clamp(1.6rem, 1.54vw, 2rem); /* 1366 = 20px */
    line-height: 1.5;
  }

  .rs-s-faq-item__a {
    margin-top: 2.2rem;
    font-size: clamp(1.5rem, 1.46vw, 1.9rem); /* 1366 = 19px */
    line-height: 1.85;
  }

  .rs-s-faq-item__q::before,
  .rs-s-faq-item__a::before {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.4rem;
    font-size: clamp(1.5rem, 1.48vw, 1.92rem); /* 1366 = 19.2px */
  }
}


/* =========================================================
   4. Project / Area（施工・配送エリア）
   基準デザイン：SP 375px / PC 1366px

   ■ 寸法の指定方式（--area-u）
     contact セクションと同様、「カンプ実寸(px) × --area-u」で
     寸法・文字サイズを指定する。--area-u は "カンプ 1px 相当の長さ"。

       SP … 375px で 1px。以降ビューポート追従、1.2px で頭打ち。
       PC … コンテンツ幅が最大 1205px に達する 1283px 以上で 1px 固定、
             それ未満は同じ比率のまま縮小。

     ※ PC は 768px から地図とカードの2カラムに切り替わる。
        768px 時点でコンテンツ幅は 1205px の約 60% しかないため、
        カード本文（最長で21文字の1行）を折り返させずカンプの体裁を保つには
        各寸法を一括で縮小する必要があり、この方式が前提となる。
   ========================================================= */
.rs-s-area {
  /* --- コンポーネント内トークン --- */
  --area-blue:   var(--color-key); /* 見出し・装飾・カードヘッダー */
  --area-ink:    var(--color-ink); /* 本文 */
  /* TODO(他ページ展開時): テーマ色の直書き。--color-theme に追従しない */
  --area-glow:   rgba(0, 146, 191, .5); /* カード外周のグロー */

  /* --- カンプ 1px 相当の可変単位（SP：375px で等倍） --- */
  --area-u: clamp(1px, 0.2667vw, 1.2px);

  overflow-x: clip; /* 地図背後のグローによる横スクロール防止 */
  padding-block: calc(31 * var(--area-u)) calc(22 * var(--area-u));
  padding-inline: 3.8rem;
  background-color: #fff;
  color: var(--area-ink);
  /* palt：Illustrator の「約物半角」に相当。カンプの字送りに合わせる */
  font-feature-settings: "palt";
}

.rs-s-area__inner {
  max-width: 120.5rem; /* カンプPC：コンテンツ 1205px */
  padding-inline: 0;
}

/* ---------------------------------------------------------
   見出し ＋ 下部装飾
   ① ベースライン（--deco-w × --deco-line）
   ② マスク（幅 --deco-gap）… ①の中心から右へ、線を分断する
   ③ 45°の斜線（--deco-gap 角・線幅 --deco-line）… 右端を②の右端に、上端を①の中心に合わせる
   ※②は「背景色の矩形」ではなくグラデーションの透明区間で表現しており、
     背景色に依存せず、要素も増やさない。
   --------------------------------------------------------- */
.rs-s-area__title {
  /* --area-u（カンプ1px相当の可変単位）でスケールするため寸法は独自指定 */
  --deco-w:   calc(140 * var(--area-u));
  --deco-gap: calc(8 * var(--area-u));

  padding-bottom: calc(14 * var(--area-u));
  color: var(--area-blue);
  font-size: calc(20 * var(--area-u));
}

/* --- 地図＋カード --- */
.rs-s-area__body {
  /* 縦積み時：地図とカードの幅を揃え、広い画面で間延びさせない（PCで解除） */
  max-width: calc(300 * var(--area-u));
  margin-top: calc(24 * var(--area-u));
  margin-inline: auto;
}

/* 地図（背後に淡い青のグロー）※カンプSP：300×255 */
.rs-s-area__map {
  position: relative;
  text-align: center;
}

.rs-s-area__map::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(160, 215, 236, 0.55), rgba(160, 215, 236, 0) 72%);
}

.rs-s-area__map img {
  position: relative;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* --- エリアカード（カンプSP：299.5×68.5・角丸12・カード間21） --- */
.rs-s-area__list {
  display: flex;
  flex-direction: column;
  gap: calc(21 * var(--area-u));
  margin: calc(25 * var(--area-u)) 0 0;
  padding: 0;
  list-style: none;
}

.rs-s-area-card {
  padding: calc(3 * var(--area-u)); /* 青ヘッダーの外側に見える白の余白 */
  border-radius: calc(12 * var(--area-u));
  background-color: #fff;
  box-shadow: 0 0 6px var(--area-glow);
}

/* カンプSP：高さ31px・上部角丸11px・文字17px */
.rs-s-area-card__title {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(31 * var(--area-u));
  /* 左はピンの領域 */
  padding: 0 calc(12 * var(--area-u)) 0 calc(50.5 * var(--area-u));
  /* カンプ指定：左上・右上のみ角丸 */
  border-radius: calc(11 * var(--area-u)) calc(11 * var(--area-u)) 0 0;
  background-color: var(--area-blue);
  color: var(--color-text-invert);
  font-size: calc(17 * var(--area-u));
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* ヘッダー上端からはみ出して重なるピン（画像は上下左右に余白を含む） */
.rs-s-area-card__pin {
  position: absolute;
  left: calc(14 * var(--area-u));
  top: calc(-11 * var(--area-u));
  width: calc(25 * var(--area-u));
  height: auto;
}

.rs-s-area-card__text {
  padding: calc(8.5 * var(--area-u))
           calc(12 * var(--area-u))
           calc(6 * var(--area-u))
           calc(19.5 * var(--area-u));
  font-size: calc(11.5 * var(--area-u));
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

.rs-s-area__note {
  margin-top: calc(13.5 * var(--area-u));
  font-size: calc(9 * var(--area-u));
  font-weight: var(--fw-regular);
  line-height: 1.55;
  text-align: center;
}

/* 改行位置はカンプに合わせて出し分ける */
.rs-s-area__note-br--pc { display: none; }


/* =========================================================
   Area / PC 横並び（768px以上）
   カンプ実寸（1366px）：
     コンテンツ 1205 ／ 地図 636×540 ／ 列間 69.5 ／ カード列 499.5
     見出し 40px（装飾線 296／段差16）
     カード 角丸20・内側余白5 ／ 青ヘッダー 高さ52・上部角丸18・文字28px
     カード間 40.5 ／ ピン 42px（ヘッダー上端から20px上）
     カード本文 19px／行送り1.5 ／ 注釈 14px
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-area {
    /* コンテンツ幅が 1205px に達する 1283px 以上で 1px 固定。
       768px では約 0.60px まで縮小し、カンプの比率を保ったまま収める */
    --area-u: clamp(0.55px, 0.0779vw, 1px);

    /* 下余白は最も背の高い地図カラムの下端基準（カンプ 744 - 694.5 ≒ 50） */
    padding-block: calc(43.5 * var(--area-u)) calc(50 * var(--area-u));
    padding-inline: clamp(1.6rem, 3vw, 4rem);
  }

  .rs-s-area__title {
    --deco-w:    calc(296 * var(--area-u));
    --deco-gap:  calc(16 * var(--area-u));
    --deco-line: 2px;

    padding-bottom: calc(28 * var(--area-u));
    font-size: calc(40 * var(--area-u));
  }

  .rs-s-area__body {
    display: grid;
    max-width: none;
    /* カンプ比率（地図 636 : カード 499.5）を保ったまま伸縮させる */
    grid-template-columns: 636fr 499.5fr;
    align-items: start;
    column-gap: 5.768%; /* カンプ 69.5px ÷ 1205px */
    margin-top: calc(30 * var(--area-u));
  }

  .rs-s-area__map::before {
    inset: -14% -6%;
  }

  .rs-s-area__map img {
    max-width: calc(636 * var(--area-u));
  }

  .rs-s-area__list {
    gap: calc(40.5 * var(--area-u));
    margin-top: 0;
  }

  .rs-s-area-card {
    padding: calc(5 * var(--area-u));
    border-radius: calc(20 * var(--area-u));
  }

  .rs-s-area-card__title {
    min-height: calc(52 * var(--area-u));
    padding-inline: calc(84 * var(--area-u)) calc(20 * var(--area-u));
    border-radius: calc(18 * var(--area-u)) calc(18 * var(--area-u)) 0 0;
    font-size: calc(28 * var(--area-u));
  }

  .rs-s-area-card__pin {
    left: calc(23 * var(--area-u));
    top: calc(-20 * var(--area-u));
    width: calc(42 * var(--area-u));
  }

  .rs-s-area-card__text {
    padding: calc(14 * var(--area-u)) calc(33 * var(--area-u)) calc(11 * var(--area-u));
    font-size: calc(19 * var(--area-u));
  }

  .rs-s-area__note {
    margin-top: calc(27.5 * var(--area-u));
    font-size: calc(14 * var(--area-u));
    line-height: 1.57;
    text-align: left;
  }

  /* PCは「…ございます。」の後で改行する */
  .rs-s-area__note-br--sp { display: none; }
  .rs-s-area__note-br--pc { display: inline; }
}



/* =========================================================
   4. Project / Contact（最終CTA・お問い合わせ）
   基準デザイン：SP 375px / PC 1366px

   ■ 寸法の指定方式（--contact-u）
     本セクションはカンプの寸法比がそのまま印象を決めるため、
     「カンプ実寸(px) × --contact-u」で全ての寸法・文字サイズを指定する。
     --contact-u は "カンプ 1px 相当の長さ" を表す可変単位で、
     これ 1 つを差し替えるだけでセクション全体が等倍で伸縮する。

       SP … 375px で 1px（＝カンプ実寸）。以降ビューポート追従、1.2px で頭打ち。
       PC … 1366px で 1px（＝カンプ実寸）。パネルが最大幅 1080px に達する
             1163px 以上は 1px 固定、それ未満は等倍で縮小。

     ※ 個々の値を clamp() で持たせると寸法どうしの比率が崩れ、
        電話番号行のような「横幅がぎりぎりの並び」が破綻するため、
        比率を保てるこの方式を採る。
   ========================================================= */
.rs-s-contact {
  /* --- 配色（このセクション内の色をここに集約） --- */
  --contact-bg:     var(--color-key); /* 背景・見出し・電話ラベル */
  --contact-panel:  #d9e8f0; /* パネル背景 */
  --contact-accent: var(--color-em); /* CTA・強調テキスト */
  --contact-ink:    var(--color-ink); /* 本文・電話番号・区切り線 */

  /* --- カンプ 1px 相当の可変単位（SP：375px で等倍） --- */
  --contact-u: clamp(1px, 0.2667vw, 1.2px);

  /* --- リード文の行送り（em 側で行箱を揃えるため変数で共有） --- */
  --contact-lead-lh: 1.6;

  padding-block: calc(25.5 * var(--contact-u));
  padding-inline: clamp(2.5rem, 3vw, 4rem);
  background-color: var(--contact-bg);
  color: var(--contact-ink);
  /* palt：Illustrator の「約物半角」に相当。カンプの字送りに合わせる */
  font-feature-settings: "palt";
}

.rs-s-contact__inner {
  max-width: 108rem; /* カンプPC：パネル 1080px */
  padding-inline: 0;
}

/* --- パネル（カンプSP：325×414.5 / 角丸 10px） --- */
.rs-s-contact__panel {
  max-width: calc(325 * var(--contact-u));
  margin-inline: auto;
  padding: calc(13 * var(--contact-u))
           calc(12.5 * var(--contact-u))
           calc(17.5 * var(--contact-u));
  border-radius: calc(10 * var(--contact-u));
  background-color: var(--contact-panel);
}

/* --- 見出し（左右に斜めのアクセント）
       カンプSP：文字 19px ／ アイコン 16×25px ---------------- */
.rs-s-contact__title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* カンプSPでは見出しが本文幅ちょうどに収まるため、字間は詰め気味に取る */
  gap: calc(8 * var(--contact-u));
  color: var(--contact-bg);
  font-size: calc(19 * var(--contact-u));
  font-weight: var(--fw-black);
  line-height: 1.3;
  text-align: center;
}

.rs-s-contact__title-icon {
  flex: 0 0 auto;
  width: calc(16 * var(--contact-u));
  height: auto;
}

/* --- 本体 --- */
.rs-s-contact__body {
  margin-top: calc(11 * var(--contact-u));
}

/* 写真：カンプSP＝本文幅 300px に対し 250.5px（＝83.5%）。角は落とさない */
.rs-s-contact__visual img {
  width: 83.5%;
  margin-inline: auto;
}

.rs-s-contact__actions {
  margin-top: calc(6 * var(--contact-u));
}

/* --- リード文（カンプSP：15px / 強調 18px = 1.2em） --- */
.rs-s-contact__lead {
  font-size: calc(15 * var(--contact-u));
  font-weight: var(--fw-medium);
  line-height: var(--contact-lead-lh);
  text-align: center;
}

.rs-s-contact__lead-em {
  font-size: 1.2em;
  /* 1.2em 拡大分を行送りで相殺し、2行の行箱の高さを親と揃える */
  line-height: calc(var(--contact-lead-lh) / 1.2);
  font-weight: var(--fw-bold);
  font-style: normal;
  color: var(--contact-accent);
}

/* --- 電話（上の区切り線はこのブロックの border-top） --- */
.rs-s-contact__tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--contact-u));
  margin-top: calc(7.5 * var(--contact-u));
  padding-top: calc(9 * var(--contact-u));
  border-top: 1px solid var(--contact-ink);
}

/* カンプSP：100.5×44.5px。右上・右下は角丸なし（左半円のみ） */
.rs-s-contact__tel-label {
  flex: 0 1 auto;
  padding-block: calc(8.25 * var(--contact-u));
  padding-inline: calc(16 * var(--contact-u)) calc(9.5 * var(--contact-u));
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background-color: var(--contact-bg);
  color: var(--color-text-invert);
  font-size: calc(10 * var(--contact-u));
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

.rs-s-contact__tel-list {
  display: grid;
  grid-template-columns: auto auto; /* 地域ラベル｜番号 の2列 × 2行 */
  align-items: center;
  column-gap: calc(6 * var(--contact-u));
  margin: 0;
}

/* カンプSP：38×17px */
.rs-s-contact__tel-area {
  display: grid;
  place-content: center;
  min-width: calc(38 * var(--contact-u));
  padding-block: calc(2.4 * var(--contact-u));
  border-radius: var(--radius-pill);
  background-color: var(--contact-bg);
  color: var(--color-text-invert);
  font-size: calc(8.7 * var(--contact-u));
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

.rs-s-contact__tel-num {
  margin: 0;
  white-space: nowrap;
  font-size: calc(22.5 * var(--contact-u));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em; /* カンプの字詰めに合わせる */
  /* 行送りで2行の間隔を作る（row-gap は持たせない） */
  line-height: 1.22;
}

.rs-s-contact__tel-num a {
  color: inherit;
  text-decoration: none;
}

.rs-s-contact__tel-num a:hover {
  text-decoration: underline;
}

/* --- Web問い合わせボタン（カンプSP：299.5×56px） ---
       padding-right はバッジと山括弧の間にラベルを置くための余白。
       ラベルは flex:1 で「バッジ右端〜山括弧」の中央に来る。 */
.rs-s-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--contact-u));
  width: 100%;
  min-height: calc(56 * var(--contact-u));
  margin-top: calc(10 * var(--contact-u));
  padding-inline: calc(5.5 * var(--contact-u)) calc(31 * var(--contact-u));
  border-radius: var(--radius-pill);
  background-color: var(--contact-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
  color: var(--color-text-invert);
  transition: opacity .2s ease;
}

.rs-s-contact__btn:hover {
  opacity: .85;
}

/* 右端の山括弧。45°回転させた正方形の2辺なので
   見た目の高さ＝辺長×1.414／幅＝辺長×0.707 になる */
.rs-s-contact__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(11.5 * var(--contact-u));
  width: calc(11 * var(--contact-u));
  height: calc(11 * var(--contact-u));
  border-top: calc(2 * var(--contact-u)) solid currentColor;
  border-right: calc(2 * var(--contact-u)) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* カンプSP：95.5×43.5px。円弧アイコンは「24」を囲む位置に重ねる */
.rs-s-contact__btn-badge {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: calc(43.5 * var(--contact-u));
  padding-inline: calc(11.5 * var(--contact-u)) calc(5 * var(--contact-u));
  /* 円弧アイコンは余白（白い円）込みの画像。白円の径がバッジ高さとほぼ同じで
     端数によっては数px はみ出すため、ピル形状でクリップしておく
     （白×白なので見た目には影響しない） */
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  color: var(--contact-accent);
  font-size: calc(12.8 * var(--contact-u));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.rs-s-contact__btn-icon {
  position: absolute;
  top: 50%;
  /* 画像 161×161 のうち赤い円弧の実体は 122×151（左18 / 上6 の余白込み）。
     カンプの円弧実寸 41px に合わせるため画像高は 41 × 161/151 ≒ 43.7px、
     左余白 18/161 分を差し引いた位置に置き、円弧の左端をカンプ通り
     バッジ左端 +5.5px に合わせる */
  left: calc(0.6 * var(--contact-u));
  width: auto;
  height: calc(43.7 * var(--contact-u));
  transform: translateY(-50%);
}

.rs-s-contact__btn-text {
  flex: 1 1 auto;
  font-size: calc(13.7 * var(--contact-u));
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}


/* =========================================================
   Contact / PC 横並び（768px以上）
   カンプ実寸（1366px）：
     セクション上下余白 50 ／ パネル 1080×400・角丸 20・内側余白 23.5/30/26
     見出し 40px・アイコン 34×53・字間 26
     写真 441×271 ／ 列間 39 ／ 右カラム 540
     リード 22px ／ 区切り線 1px
     電話ラベル 182×66（17px）／ 地域ラベル 67×30（15px）／ 番号 39px
     CTA 540×100 ／ バッジ 172×80（23px）／ 円弧アイコン h75 ／ ラベル 23px
   ========================================================= */
@media (min-width: 768px) {
  .rs-s-contact {
    /* 1163px 以上でパネルが最大幅 1080px に達するため、そこで 1px 固定。
       それ未満は同じ比率のまま縮小する（0.66px＝768px 相当が下限） */
    --contact-u: clamp(0.66px, 0.086vw, 1px);
    --contact-lead-lh: 1.5;

    padding-block: calc(50 * var(--contact-u));
  }

  .rs-s-contact__panel {
    max-width: none;
    padding: calc(23.5 * var(--contact-u))
             calc(30 * var(--contact-u))
             calc(29 * var(--contact-u));
    border-radius: calc(20 * var(--contact-u));
  }

  .rs-s-contact__title {
    gap: calc(26 * var(--contact-u));
    font-size: calc(40 * var(--contact-u));
  }

  .rs-s-contact__title-icon {
    width: calc(34 * var(--contact-u));
  }

  /* 写真 441 ： 右カラム 540 の比率で分配（列間 39） */
  .rs-s-contact__body {
    display: grid;
    grid-template-columns: 441fr 540fr;
    align-items: center;
    column-gap: calc(39 * var(--contact-u));
    margin-top: calc(22.5 * var(--contact-u));
  }

  .rs-s-contact__visual img {
    width: 100%;
  }

  .rs-s-contact__actions {
    margin-top: 0;
  }

  .rs-s-contact__lead {
    font-size: calc(22 * var(--contact-u));
  }

  /* PCは1行で収まるため SP用の改行は無効化 */
  .rs-s-contact__lead-br {
    display: none;
  }

  .rs-s-contact__tel {
    /* PCはカンプ通り左詰め（右端に余白が残る並び） */
    justify-content: flex-start;
    gap: calc(22.5 * var(--contact-u));
    margin-top: calc(4.5 * var(--contact-u));
    padding-top: calc(17.5 * var(--contact-u));
  }

  .rs-s-contact__tel-label {
    padding-block: calc(9.2 * var(--contact-u));
    padding-inline: calc(30 * var(--contact-u)) calc(20.5 * var(--contact-u));
    font-size: calc(17 * var(--contact-u));
  }

  .rs-s-contact__tel-list {
    column-gap: calc(9.5 * var(--contact-u));
  }

  .rs-s-contact__tel-area {
    min-width: calc(67 * var(--contact-u));
    padding-block: calc(4.5 * var(--contact-u));
    font-size: calc(15 * var(--contact-u));
  }

  .rs-s-contact__tel-num {
    font-size: calc(39 * var(--contact-u));
  }

  .rs-s-contact__btn {
    gap: calc(16 * var(--contact-u));
    min-height: calc(100 * var(--contact-u));
    margin-top: calc(18 * var(--contact-u));
    padding-inline: calc(10 * var(--contact-u)) calc(60 * var(--contact-u));
  }

  .rs-s-contact__btn::after {
    right: calc(20.5 * var(--contact-u));
    width: calc(19.5 * var(--contact-u));
    height: calc(19.5 * var(--contact-u));
    border-top-width: calc(3 * var(--contact-u));
    border-right-width: calc(3 * var(--contact-u));
  }

  .rs-s-contact__btn-badge {
    min-height: calc(80 * var(--contact-u));
    padding-inline: calc(20 * var(--contact-u)) calc(12 * var(--contact-u));
    font-size: calc(23 * var(--contact-u));
  }

  .rs-s-contact__btn-icon {
    /* 円弧実寸 75px → 画像高 75 × 161/151 = 80px。
       円弧の左端はバッジ左端 +10px（カンプ実測） */
    left: calc(1 * var(--contact-u));
    height: calc(80 * var(--contact-u));
  }

  .rs-s-contact__btn-text {
    font-size: calc(23 * var(--contact-u));
  }
}


/* =========================================================
   6. Page theme（ページ識別クラスで上書き）
   ページごとに切り替わるのは --color-theme ただ1つ。
   セクション側の色はすべて --color-key 等の意味ベーストークン
   経由で参照しているため、下記1行を足すだけで配色が切り替わる。

   ■ 新しいリフォームページを追加する手順
     1. <body class="page page--bath"> にする
     2. reform_bath_v2.css に body { --color-theme: <キーカラー>; } を追加
     3. 必要なら --color-surface-warm など他のトークンも同様に上書き

   ※ 配色に関する個別対応は不要（.rs-s-flow-step の矢印も mask 方式のため
     var(--color-key) が効く）。ただし rgba() で直書きされた半透明色が
     5箇所あり、これらはテーマ色に追従しない（下記コメント参照）。
   ========================================================= */
/* --color-key は --color-theme を参照するため、テーマを切り替える要素と
   同じ位置（= <body>）で宣言する必要がある。:root で宣言すると html 上で
   値が確定してしまい、body での --color-theme の上書きが伝わらない。
   （:root 側の宣言はフォールバックとして残す） */
/* futureshop は <body> を自動生成し、任意のクラスを付けられないため
   .rs-page ではなく body に対して指定する。このCSSは v2 レイアウトの
   ページでしか読み込まれないため、他ページには影響しない。 */
body { --color-key: var(--color-theme); }



/* =========================================================
   4. Project / タブレット調整（600〜899px）
   カンプは PC(1366) / SP(375) の2種のみのため、その中間帯は
   「375pxの見せ方を保ったまま、余った横幅を段組みと余白に変換する」
   方針で補う。375px・900px以上の表示には一切影響しない。
   ========================================================= */
@media (min-width: 600px) and (max-width: 899px) {
  /* --- 縦積み時のコンテンツ上限を 440px → 680px へ --- */
  .rs-s-faq__inner {
    max-width: 68rem;
  }
}



/* =========================================================
   4. Project / タブレット調整・Area + Showroom（600〜767px）
   768px 以上は PC と同じ段組みに切り替わるため、
   縦積みで残るのはこの帯のみ。
   ========================================================= */
@media (min-width: 600px) and (max-width: 767px) {
  /* --- area：縦積み時のコンテンツ上限を広げ、カードを2列に。
         3枚目（桂店）は本文が2行のため2カラム分の幅を使う --- */
  .rs-s-area__body {
    max-width: 68rem;
  }

  .rs-s-area__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(21 * var(--area-u));
  }

  .rs-s-area__list > :last-child {
    grid-column: 1 / -1;
  }

  .rs-s-showroom__inner {
    max-width: 68rem;
  }

  /* メイン画像2枚を横並びに */
  .rs-s-showroom__pics {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .rs-s-showroom__pics img {
    width: 100%;
  }

  /* footer：採用バナーを中間サイズに（768px以上はPCの250px） */
  .rs-l-footer__recruit {
    max-width: 21rem;
  }
}


/* =========================================================
   4. Project / タブレット調整・Flow（700〜899px）
   STEPカードを2列2段に。1カード最小約295pxが必要なため、
   確保できる 700px 以上で切り替える。
   ========================================================= */
@media (min-width: 700px) and (max-width: 899px) {
  /* 2列化できるこの帯でのみ上限を広げる
     （600〜699pxで1列のまま広げると、カード内が間延びするため） */
  .rs-s-flow__inner {
    max-width: 68rem;
  }

  .rs-s-flow__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3.4rem;
  }

  /* 矢印は行内（1→2、3→4）のみ右向きで表示し、行末は非表示 */
  .rs-s-flow-step:not(:last-child)::after {
    top: 50%;
    left: auto;
    right: -2.7rem;
    bottom: auto;
    width: 1.25rem;
    height: 1.81rem;
    translate: 0 -50%;
    rotate: none;
  }

  .rs-s-flow-step:nth-child(even)::after {
    content: none;
  }
}


/* =========================================================
   4. Project / 狭いPCレイアウトの調整（768〜899px）
   showroom は 768px から PC と同じ段組みに切り替わる。
   この帯は横幅が足りないため、固定幅の列を比率指定へ置き換えて
   段組みを維持したまま収める。
   ========================================================= */
@media (min-width: 768px) and (max-width: 899px) {
  /* --- showroom：写真・情報・地図の3列を比率で分配 --- */
  .rs-s-showroom-shop {
    grid-template-columns: 32% minmax(0, 1fr) 38%;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    padding: 2rem;
  }

  .rs-s-showroom-shop__pict {
    width: 100%;
  }

  .rs-s-showroom-shop__name { padding-bottom: 1.4rem; }
  .rs-s-showroom-shop__name::after { width: 60rem; height: 0.7rem; border-radius: 0.35rem; }

  .rs-s-showroom-shop__meta { margin-top: 1.2rem; gap: 0.8rem; }
}




/* =========================================================
   Y. futureshop システムCSS の打ち消し
   ---------------------------------------------------------
   fs_style.css / fs_theme.css / fs_original.css は
   headタグ共通 パーツから読み込まれ、外すことができない。
   既存ファイルは変更せず、後から読み込む本CSSで上書きする。

   ※既存サイト側のCSSは一切書き換えないこと。
     fs_original.css（テーマのオリジナルCSS欄）を編集すると、
     全ページおよびWordPress側にも影響する。
   ========================================================= */

/* --- 1. ページ上部の余白 ---
   fs_original.css が .fs-l-page に padding-top: min(25vw,170px) を
   指定している（既存サイトの固定ヘッダー用）。
   新ヘッダーは自前で高さを確保するため、この余白を打ち消す。 */
.fs-l-page {
  padding-top: 0;
}

/* --- 2. リンクの色 ---
   fs_theme.css の a:visited { color:#728496 } は a より詳細度が高く、
   Foundation の a { color: inherit } では打ち消せない。 */
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
}

/* --- 3. リンクの下線 ---
   システムCSS が a:hover に text-decoration: underline を指定するため、
   同じ詳細度で打ち消す。個別に下線を出したい箇所は各コンポーネント側で
   text-decoration を指定すること。 */
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}


/* --- 4. リンクを兼ねるコンポーネントの文字色 ---
   上記 2. の打ち消しは fs_theme.css の a:visited (0,1,1) を上回るため
   詳細度 (0,1,1) が必要だが、そのままではコンポーネントのクラス指定
   (0,1,0) まで打ち消してしまう。
   そこで、色を持つコンポーネントには :link 等を併記して詳細度を上げ、
   打ち消しより強くする。

   このブロックは、<a> に色を指定しているセレクタを CSS 全体から
   機械的に抽出して生成している（子孫セレクタ・メディアクエリ内も含む）。

   ※<a> に色を指定するコンポーネントを新設した場合は、ここにも追記すること。
     追記を忘れると、その要素の文字色が本文色になってしまう。 */
.rs-c-drawer__link:link,
.rs-c-drawer__link:visited,
.rs-c-drawer__link:hover,
.rs-c-drawer__link:active {
  color: var(--drawer-text);
}

.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:link,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:visited,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:hover,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:active {
  color: #fff;
}

.rs-c-floating-cta__link:link,
.rs-c-floating-cta__link:visited,
.rs-c-floating-cta__link:hover,
.rs-c-floating-cta__link:active {
  color: var(--color-ink);
}

.rs-s-subsidy__btn:link,
.rs-s-subsidy__btn:visited,
.rs-s-subsidy__btn:hover,
.rs-s-subsidy__btn:active {
  color: #fff;
}

.rs-s-heater__btn:link,
.rs-s-heater__btn:visited,
.rs-s-heater__btn:hover,
.rs-s-heater__btn:active {
  color: #fff;
}

.rs-s-works__btn:link,
.rs-s-works__btn:visited,
.rs-s-works__btn:hover,
.rs-s-works__btn:active {
  color: #fff;
}

/* --- 4. リンクを兼ねるコンポーネントの文字色 ---
   上記 2. の打ち消しは fs_theme.css の a:visited (0,1,1) を上回るため
   詳細度 (0,1,1) が必要だが、そのままではコンポーネントのクラス指定
   (0,1,0) まで打ち消してしまう。
   そこで、色を持つコンポーネントには :link 等を併記して詳細度を上げ、
   打ち消しより強くする。

   このブロックは、<a> に色を指定しているセレクタを CSS 全体から
   機械的に抽出して生成している（子孫セレクタ・メディアクエリ内も含む）。

   ※<a> に色を指定するコンポーネントを新設した場合は、ここにも追記すること。
     追記を忘れると、その要素の文字色が本文色になってしまう。 */
.rs-c-btn:link,
.rs-c-btn:visited,
.rs-c-btn:hover,
.rs-c-btn:active {
  color: var(--color-text-invert);
}

.rs-c-drawer__link:link,
.rs-c-drawer__link:visited,
.rs-c-drawer__link:hover,
.rs-c-drawer__link:active {
  color: var(--drawer-text);
}

.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:link,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:visited,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:hover,
.rs-c-floating-cta__item--quote .rs-c-floating-cta__link:active {
  color: #fff;
}

.rs-c-floating-cta__link:link,
.rs-c-floating-cta__link:visited,
.rs-c-floating-cta__link:hover,
.rs-c-floating-cta__link:active {
  color: var(--color-ink);
}

.rs-c-floating-cta__pagetop:link,
.rs-c-floating-cta__pagetop:visited,
.rs-c-floating-cta__pagetop:hover,
.rs-c-floating-cta__pagetop:active {
  color: var(--color-key);
}

.rs-l-footer__pagetop:link,
.rs-l-footer__pagetop:visited,
.rs-l-footer__pagetop:hover,
.rs-l-footer__pagetop:active {
  color: var(--color-key);
}

.rs-s-contact__btn:link,
.rs-s-contact__btn:visited,
.rs-s-contact__btn:hover,
.rs-s-contact__btn:active {
  color: var(--color-text-invert);
}

.rs-s-reasons__btn:link,
.rs-s-reasons__btn:visited,
.rs-s-reasons__btn:hover,
.rs-s-reasons__btn:active {
  color: #fff;
}

.rs-s-subsidy__btn:link,
.rs-s-subsidy__btn:visited,
.rs-s-subsidy__btn:hover,
.rs-s-subsidy__btn:active {
  color: #fff;
}

.rs-s-heater__btn:link,
.rs-s-heater__btn:visited,
.rs-s-heater__btn:hover,
.rs-s-heater__btn:active {
  color: #fff;
}

.rs-s-works__btn:link,
.rs-s-works__btn:visited,
.rs-s-works__btn:hover,
.rs-s-works__btn:active {
  color: #fff;
}

/* --- 5. ページ下部の余白 ---
   fs_theme.css が .fs-l-main に margin:24px auto / padding:8px を
   指定しているため、中身（.fs-l-pageMain）を隠してもフッター下に
   隙間が残る。余白ごと打ち消す。 */
.fs-l-main {
  margin: 0;
  padding: 0;
}

/* =========================================================
   X. futureshop システムパーツの表示抑止
   ---------------------------------------------------------
   商品グループページのレイアウトからは「メインエリア」を外せない
   （必須システムパーツを含むため保存時にエラーになる）。
   また「表示しない」も選択できない。
   そこで配置は残したまま、CSS で表示だけを抑止する。

   ・.fs-l-pageMain   … 旧ページ本文＋商品一覧。隠す
   ・#fs-page-error-container … エラー表示。隠さない

   ※商品一覧を表示したいページを作る場合は、そのページの
     reform_[識別子]_v2.css で下記を打ち消すこと。
       .fs-l-main > .fs-l-pageMain { display: block; }
   ========================================================= */
.fs-l-main > .fs-l-pageMain {
  display: none;
}

/* =========================================================
   5. Utility（最小限）
   ========================================================= */
.rs-u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =========================================================
   Accessibility / Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================
   PC表示時、電話番号のリンクを無効化
   （番号は表示したまま、クリックのみ不可）
   2026/08/20 追加（稼働中ファイルから復元 2026/09/05）
   ============================================ */
@media (min-width: 768px) {
  .rs-s-contact__tel-num a {
    pointer-events: none;
    cursor: default;
  }

  .rs-s-contact__tel-num a:hover {
    text-decoration: none;
  }
}