@charset "utf-8";
/* ============================================================================
   リフォームトップ ヒーロー部（大津/栗東/京都桂 〜 水廻りリフォームバナー3枚）
   対象ページ : /c/reform
   対象パーツ : フリーパーツ「トップ_バナー_メイン_リフォーム」
                置換文字 {% parts[t-bnr_w100_01_reform] %}
   デザイン基準: PC 1366px（コンテンツ幅1200px）/ SP 375px
   追加日     : 2026-09-24

   ---------------------------------------------------------------------------
   【重要／セレクタの接頭辞について】
   reform-layout.css の 18行目に、以下の非常に強いリセットが存在します。

     main.fs-l-main .fs-l-pageMain.reformWrap section * { … }   詳細度 (0,3,2)
       margin / padding / border / font-size / line-height /
       font-weight / font-family をすべて上書き

   通常のクラス指定（詳細度 0,1,0）ではこのリセットに負けて
   余白・文字サイズ・枠線がすべて打ち消されてしまいます。

   そのため本ファイルでは、すべての指定に

     .fs-l-pageMain.reformWrap .contents01 .rfs-hero   詳細度 (0,4,0)

   を接頭辞として付与し、確実に上書きしています。
   ★この接頭辞を外すとレイアウトが崩れますので、削らないでください。
   ---------------------------------------------------------------------------
   【メンテナンスの入口】
   ・色      → 「1. 変数定義」の --rfs-* を変更
   ・余白    → 「1. 変数定義」の --rfs-block-* / --rfs-banner-* を変更
   ・寸法    → 各指定の calc(◯◯ * var(--u)) の ◯◯ がデザイン上のpx値
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ============================================================
   0. 既存リセットの無効化
   詳細度 (0,4,0) で reform-layout.css のリセット (0,3,2) を打ち消す。
   個別指定は (0,5,0) になるため、常にこの指定より優先される。
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero * {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ============================================================
   1. ルート：変数定義
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero {
  /* --- 基準単位 ---
     --u = デザイン1px分の実寸。コンテンツ幅1200pxのとき 1u = 1px。
     コンテナ幅が変わっても比率を保つよう cqi で追従する。 */
  --u: 1px;

  /* --- 配色 --- */
  --rfs-blue:  #0092bf;                 /* アクセント青（枠線・リード文） */
  --rfs-badge: rgba(0, 146, 191, .83);  /* エリアバッジ（#0092bf 83%） */
  --rfs-navy:  #13489d;                 /* 見出し一部・フッター文 */
  --rfs-red:   #e7364a;                 /* 見出し「体感型ショールーム」 */
  --rfs-ink:   #231815;                 /* キャッチコピー */
  --rfs-black: #000000;                 /* 見出しの「で」「の」 */
  --rfs-band:  #d4ecea;                 /* グラデーション帯 */
  --rfs-bg:    #ffffff;                 /* 背景（枠線の抜きに使用） */

  /* --- リード文の囲み枠：線の途切れ位置（上辺は右寄り／下辺は左寄り） --- */
  --rfs-gap-w:     61%;
  --rfs-gap-top-x: 33%;
  --rfs-gap-bot-x:  6%;

  /* --- 余白（調整はこの5つだけ） --- */
  --rfs-block-top:      0px;  /* ヘッダー下の余白 */
  --rfs-block-bottom:  20px;  /* 動画上の余白 */
  --rfs-banner-top:    20px;  /* バナー上 */
  --rfs-banner-bottom: 50px;  /* バナー下 */
  --rfs-banner-side:    0px;  /* バナー左右 */

  /* --- 既存レイアウトが作る下余白の打ち消し量（通常は変更不要） ---
     section.contents の margin-bottom: min(7vw,50px) を相殺する。
     ※上側は「10. ヘッダー下の余白」で別途処理（下のコメント参照） */
  --rfs-offset-bottom: min(7vw, 50px);

  width: 100%;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  text-align: center;
  color: var(--rfs-ink);
  margin-bottom: calc(var(--rfs-block-bottom) - var(--rfs-offset-bottom));
}

.fs-l-pageMain.reformWrap .contents01 .rfs-hero img {
  display: block;
  width: 100%;
  height: auto;
}

@supports (width: 1cqi) {
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero { container-type: inline-size; }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__inner { --u: 0.0833333cqi; } /* 100 / 1200 */
}

/* ============================================================
   2. 上部グラデーション帯 ＋ エリアバッジ
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(50 * var(--u));
  background: linear-gradient(to right,
    var(--rfs-bg) 0%, var(--rfs-band) 30%, var(--rfs-band) 70%, var(--rfs-bg) 100%);
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__areas {
  display: flex;
  gap: calc(14 * var(--u));
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__area {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(91 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(17 * var(--u));
  background: var(--rfs-badge);
  color: #fff;
  font-size: calc(21 * var(--u));
  line-height: 1;
}

/* ============================================================
   3. キャッチコピー
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__tagline {
  margin-top: calc(5 * var(--u));
  color: var(--rfs-ink);
  font-size: calc(20 * var(--u));
  line-height: 1.4;
}

/* ============================================================
   4. 罫線（細／太）
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__rule {
  background: linear-gradient(to right,
    var(--rfs-bg) 0%, var(--rfs-c) 30%, var(--rfs-c) 70%, var(--rfs-bg) 100%);
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__rule--thin {
  --rfs-c: var(--rfs-band);
  height: calc(3 * var(--u));
  margin-top: calc(3 * var(--u));
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__rule--thick {
  --rfs-c: var(--rfs-blue);
  height: calc(8 * var(--u));
  margin-top: calc(2 * var(--u));
}

/* ============================================================
   5. メイン見出し（Black = 900）
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title {
  font-size: calc(41 * var(--u));
  font-weight: 900;
  line-height: 1.3;
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title-red  { color: var(--rfs-red); }
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title-navy { color: var(--rfs-navy); }
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title-sm {
  color: var(--rfs-black);
  font-size: calc(33 * var(--u));
}

/* ============================================================
   6. リード文（上下で途切れる囲み枠）
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(792 * var(--u));
  max-width: 100%;
  height: calc(48 * var(--u));
  margin: calc(29 * var(--u)) auto 0;
  border: 1px solid var(--rfs-blue);
  border-radius: calc(24 * var(--u));
}
/* 枠線の途切れ（背景色で上書き） */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead::before,
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead::after {
  content: "";
  position: absolute;
  width: var(--rfs-gap-w);
  height: 3px;
  background: var(--rfs-bg);
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead::before { top: -2px;    left: var(--rfs-gap-top-x); }
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead::after  { bottom: -2px; left: var(--rfs-gap-bot-x); }

.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead-text {
  position: relative;
  color: var(--rfs-blue);
  font-size: calc(22 * var(--u));
  line-height: 1.4;
}

/* ============================================================
   7. バナー3枚
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--u));
  margin-top: var(--rfs-banner-top);
  padding-left:  var(--rfs-banner-side);
  padding-right: var(--rfs-banner-side);
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link {
  display: block;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  transition: opacity .25s ease;
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link:hover,
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link:focus-visible {
  opacity: .82;
}
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link:focus-visible {
  outline: 3px solid var(--rfs-blue);
  outline-offset: 3px;
}

/* ============================================================
   8. 下部グラデーション帯 ＋ フッター文
   ============================================================ */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(45 * var(--u));
  margin-top: var(--rfs-banner-bottom);
  background: linear-gradient(to right,
    var(--rfs-bg) 0%, var(--rfs-band) 30%, var(--rfs-band) 70%, var(--rfs-bg) 100%);
  color: var(--rfs-navy);
  font-size: calc(22 * var(--u));
  line-height: 1.4;
}

/* SP専用の改行（PCでは非表示） */
.fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__br-sp { display: none; }

/* ============================================================
   9. スマートフォン（375px基準）
   ブレイクポイントは既存サイトの .pc / .sp 切替に合わせて 1000px
   ============================================================ */
@media only screen and (max-width: 1000px) {

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero {
    --u: 0.26667vw; /* コンテナクエリ非対応時のフォールバック */

    --rfs-gap-w:     49%;
    --rfs-gap-top-x: 37%;
    --rfs-gap-bot-x: 14%;

    --rfs-block-top:      0px;  /* ヘッダー下の余白 */
    --rfs-block-bottom:  10px;  /* 動画上の余白 */
    --rfs-banner-top:    15px;
    --rfs-banner-bottom: 30px;
    --rfs-banner-side:    8px;
  }
  @supports (width: 1cqi) {
    .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__inner { --u: 0.2666667cqi; } /* 100 / 375 */
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__br-sp { display: inline; }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__band  { height: calc(28 * var(--u)); }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__areas { gap: calc(7 * var(--u)); }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__area {
    width:  calc(49 * var(--u));
    height: calc(18 * var(--u));
    border-radius: calc(9 * var(--u));
    font-size: calc(12 * var(--u));
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__tagline {
    margin-top: calc(3 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.36;
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__rule--thin {
    height: calc(3 * var(--u));
    margin-top: calc(2 * var(--u));
  }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__rule--thick {
    height: calc(5 * var(--u));
    margin-top: calc(3 * var(--u));
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title    { font-size: calc(20 * var(--u)); }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__title-sm { font-size: calc(16 * var(--u)); }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead {
    width:  calc(325 * var(--u));
    height: calc(50 * var(--u));
    margin-top: calc(14 * var(--u));
    border-radius: calc(25 * var(--u));
  }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__lead-text {
    font-size: calc(14 * var(--u));
    line-height: 1.5;
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banners {
    grid-template-columns: 1fr;
    gap: calc(14 * var(--u));
  }
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link {
    border-radius: calc(8 * var(--u));
  }

  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__footer {
    height: calc(30 * var(--u));
    font-size: calc(14 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-l-pageMain.reformWrap .contents01 .rfs-hero .rfs-hero__banner-link { transition: none; }
}
/* =================== ヒーロー部ここまで =================== */

/* ============================================================
   10. ヘッダー下の余白（/c/reform のみ）
   ------------------------------------------------------------
   【なぜ .rfs-hero ではなくページ側を調整するのか】
   .fs-l-pageMain.reformWrap に overflow-x: hidden が指定されている。
   CSS仕様上、片方の軸が hidden だと もう片方の visible は auto に
   計算されるため、縦方向もクリップされる。
   その結果 .rfs-hero にマイナスマージンを与えると、上にはみ出した
   部分（グラデーション帯とエリアバッジ）が切り取られて消える。
   そのためクリップの外側にある以下2要素で余白を詰める。

   【余白の内訳】
   .fs-l-page  padding-top : min(25vw, 170px)  ← 固定ヘッダーの回避用
   main.fs-l-main margin-top:24px + padding-top:8px = 32px
   ヘッダー実測高さ: PC 150px / SP 90px

   body.fs-body-category-reform は /c/reform 専用クラス
   （既存CSSでも同様の用途で使用されている）。他ページには影響しない。
   ============================================================ */
body.fs-body-category-reform main.fs-l-main {
  margin-top: 0;
  padding-top: 0;
}
/* 固定ヘッダー回避用の余白を、ヘッダー実測高さまで詰める */
body.fs-body-category-reform .fs-l-page {
  padding-top: min(25vw, 150px);
}

/* ------------------------------------------------------------
   10-2. ヘッダーが2段に折り返す幅での余白（1001〜1165px）
   ------------------------------------------------------------
   この幅ではヘッダー内のアイコン列が2段目に折り返し、
   ヘッダーの指定高さ150pxを超えて 実測220px まで伸びる。

   折り返しの境界は実測で 1165px / 1166px の間。
   1166px以上では1段に収まるため通常どおり150pxでよい。

   確保する値 ＝ ヘッダー実測220px ＋ 下に空けたい余白

   ※これはヘッダー側の既存仕様によるもので、
     改修前から同様の重なりが発生していた箇所。
     ヘッダーのCSSは共有のため触らず、余白の確保のみで対応する。
   ※将来ヘッダーのメニュー項目を増減すると折り返し位置が変わるため、
     その際はこのブロックの境界値も見直すこと。
   ------------------------------------------------------------ */

/* 1001〜1165px : ヘッダー下の余白 30px（220 + 30） */
@media screen and (min-width: 1001px) and (max-width: 1165px) {
  body.fs-body-category-reform .fs-l-page {
    padding-top: 250px;
  }
}