@charset "UTF-8";
/* =====================================================
   フレスカ製品ページ（業務用 / 家庭用 共通）
   Figma: PC-水素の杜-業務用フレスカ (205:2) / 家庭用フレスカ (205:646) / 1280 幅基準
   ページごとの差分は末尾の「ページ別の差分」にまとめている
   ===================================================== */

/* デザインの見出しは FOT-DNP 秀英角ゴ銀 L（細ゴシック）。
   Web フォントとして配れないため Noto Sans JP 300 で置き換えている。
   ※ margin はここで指定しないこと（.fresca h2 は各見出しクラスより詳細度が高く、
     見出しごとの margin-bottom を打ち消してしまう）。リセットは common.css 側。 */
.fresca h2,
.fresca h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
}

/* ----- コンテンツ幅 -----
   共通の .l-container は 85%（1280px 時に 1088px）だが、このページの
   デザインは特徴カード 3 列 = 1199px を筆頭に 1118〜1199px を使うため、
   ページ内だけ 1200px まで広げる（1280px 時に 93.75% = 1200px）。 */
.fresca .l-container {
  width: 93.75%;
  max-width: 1200px;
}

/* ----- 共通：※ 注記 ----- */
.fresca-note {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
}
.fresca-note__mark { flex-shrink: 0; }

/* ----- 共通：外部リンクアイコン（カード右下） ----- */
.fresca-external {
  position: absolute;
  width: 16px;
  height: 16px;
}

/* =====================================================
   ヒーロー
   ===================================================== */
/* デザインでは写真がヘッダーの下まで回り込んでいる（フレーム上端 y=0）。
   common.css の body { padding-top: 129px } を打ち消して最上部から敷く。 */
.fresca-hero {
  display: grid;
  min-height: 680px;
  margin-top: -129px;
  overflow: hidden;
}
.fresca-hero > * { grid-area: 1 / 1; }
.fresca-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右へいくほど濃くなる褐色のベール。文字が写真に負けないようにする。 */
.fresca-hero__veil {
  background: linear-gradient(270deg, #5d4d3d 0%, rgba(93, 77, 61, 0) 100%);
}
/* 旧: コピー群を left: 676px / top: 198px に絶対配置していた。
   right 側 117px を空けた 487px 幅のカラムとして右寄せする。 */
.fresca-hero__copy {
  position: relative;
  justify-self: end;
  align-self: start;
  width: 487px;
  max-width: 100%;
  margin: 198px 117px 0 0;
  color: #fff;
}
.fresca-hero__eyebrow {
  margin-left: 16px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 3.9px;
  line-height: 1.7;
}
.fresca-hero__logo {
  margin: 9px 0 0;
  font-size: 0;
}
.fresca-hero__logo img {
  width: 100%;
  height: auto;
}
.fresca-hero__label {
  margin-left: 20px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 3.6px;
  line-height: 1.7;
}
.fresca-hero__badges {
  display: flex;
  gap: 20px;
  margin: 30px 0 0 20px;
}
/* 白 20% 塗り＋白 1px 枠の円。中の 2 行を縦に詰めて中央に置く。 */
.fresca-badge {
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.fresca-badge__sm {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.5;
}
.fresca-badge__num {
  font-family: 'Forum', serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 1px;
}
.fresca-badge__unit { font-size: 20px; }
.fresca-badge__lg {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 1.5;
}
/* 「水素ガス生成量 300~600㎖/min」は 2 行 × 2 段で詰めて組む。 */
.fresca-badge__xs {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  line-height: 1.3;
}
.fresca-badge__flow {
  margin-top: 3px;
  font-family: 'Forum', serif;
  font-size: 19px;
  line-height: 0.9;
}
.fresca-badge__flow-unit { font-size: 12px; }

/* =====================================================
   リード
   ===================================================== */
.fresca-intro {
  padding: 110px 0 0;
  text-align: center;
  color: #fff;
}
.fresca-intro__title {
  font-size: 38px;
  letter-spacing: 5.7px;
  line-height: 1.5;
  margin-bottom: 40px;
}
.fresca-intro__body {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  letter-spacing: 2.4px;
  line-height: 2.3;
}

/* =====================================================
   製品カード
   ===================================================== */
.fresca-products {
  padding-top: 103px;
  text-align: center;
}
.fresca-products__lead {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 4.2px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 42px;
}
/* 2 列固定で折り返す。カードは最大 540px、狭い画面では列幅に合わせて縮む。 */
.fresca-products__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 540px));
  justify-content: center;
  gap: 40px;
}
@media (max-width: 767px) {
  .fresca-products__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 旧: 540 × 260 の箱に要素を絶対配置。画像とテキスト列の 2 カラムに直し、
   丸バッジと外部リンクアイコンだけ絶対配置のまま残している。 */
.fresca-product {
  position: relative;
  display: flex;
  gap: 24px;
  height: 100%;
  min-height: 260px;
  padding: 32px 24px;
  background: #f5f3eb;
  color: #3c3c3c;
  text-align: left;
}
/* 白い背景シェイプ（fresca-blob.svg）の上に透過の製品画像を重ねる。 */
.fresca-product__image {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.fresca-product__blob {
  position: absolute;
  left: 14.5px;
  top: 16.4px;
  width: 170px;
  height: 173.6px;
}
.fresca-product__photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fresca-product__body {
  padding-top: 33px; /* 画像上端 32px に対し「家庭向け」は 65px */
}
.fresca-product__target {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.5;
}
.fresca-product__name {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 2.6px;
  line-height: 1.5;
}
/* 金額と「円(税込み)」はベースライン揃え。 */
.fresca-product__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 1px;
}
.fresca-product__price-num {
  font-family: 'Arsenal', 'Forum', serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 1.4px;
}
.fresca-product__price-unit {
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.8;
}
.fresca-product .fresca-note {
  margin-top: 5px;
  max-width: 247px;
}
/* 毎分◯ml の緑丸バッジ（右上）。 */
.fresca-product__flow {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #0f6a18;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.1;
}
.fresca-product__flow span { font-size: 12px; }
.fresca-product__flow strong { font-size: 14px; font-weight: 700; }
.fresca-product .fresca-external {
  right: 19px;
  bottom: 15px;
}

/* =====================================================
   6 つの特徴
   ===================================================== */
.fresca-features { padding-top: 180px; }
/* ロゴ画像 ＋「6つの特徴」を横並びで中央寄せ。 */
.fresca-features__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
}
.fresca-features__logo {
  width: 379px;
  height: auto;
}
/* 373px 幅 × 3 列。行の高さは中身で決まるので align-items: start にして
   カードごとの説明文の長さ違いを吸収する。 */
.fresca-features__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 373px));
  justify-content: center;
  align-items: start;
  column-gap: 40px;
  row-gap: 80px;
  margin-top: 50px;
}
.fresca-feature { color: #fff; }
.fresca-feature__no {
  font-family: 'Forum', serif;
  font-size: 26px;
  line-height: 1.1;
  margin-bottom: 11px;
}
/* 帯付き見出しは画像の下端から 17px 上に重ねる。 */
.fresca-feature__image {
  position: relative;
  height: 440px;
  background: #d9d9d9;
  overflow: hidden;
}
.fresca-feature__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像下部に黒のグラデーション。デザインでは上端 222px から高さ 350px の
   矩形（上 透明 → 下 #000）が 440px の枠で切られているため、下端は約 62% の黒。
   ::before は絶対配置なので img より上、後に続くバッジより下に重なる。 */
.fresca-feature__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 222px, #000 572px);
  pointer-events: none;
}
.fresca-feature__badge {
  position: absolute;
  left: 17px;
  bottom: 17px;
  right: 17px;
}
/* inline ＋ box-decoration-break: clone で、行ごとに文字幅ぴったりの
   帯が付く（デザインの 147 / 227 / 176px の 3 本と同じ見え方）。 */
.fresca-feature__badge span {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.5;
  padding: 0 4px;
}
.fresca-feature__desc {
  margin-top: 20px;
  text-align: justify;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.8;
}
.fresca-feature .fresca-note { margin-top: 8px; }

/* =====================================================
   安心・安全な 5 つの理由
   ===================================================== */
/* 左に縦見出し、右にカード列。見出し幅 326px ＋ 余白 63px でカードが 733px。 */
.fresca-reasons {
  display: flex;
  gap: 63px;
  /* デザインは x=80〜1200（1120px 幅）。1200px のコンテナから左右 40px 内側に寄せる。 */
  padding: 205px 40px 0;
  color: #fff;
}
.fresca-reasons__title {
  flex-shrink: 0;
  width: 326px;
  /* 1 行 = 「フレスカが安心・」。字送り込みで 326px をわずかに超えるため
     途中で折り返させない（右隣のカードまで 63px 空いている）。 */
  white-space: nowrap;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.8;
}
.fresca-reasons__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 27px;
  min-width: 0;
}
.fresca-reason {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  padding: 26px 40px 30px;
}
/* 図解付き（04）は本文カラム 380px ＋ 右に図 249px の 2 カラム。 */
.fresca-reason--figure {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.fresca-reason__main {
  flex: 1;
  min-width: 0;
}
.fresca-reason__figure {
  flex-shrink: 0;
  width: 249px;
  height: auto;
  margin-top: 7px;
}
/* マーク（PSE / JHyPA）は本文の左に 16px 空けて並べ、本文より 5px 下げる。 */
.fresca-reason__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.fresca-reason__mark {
  flex-shrink: 0;
  margin-top: 5px;
  height: auto;
}
.fresca-reason__mark.is-pse { width: 57px; }
.fresca-reason__mark.is-jhypa { width: 100px; }
.fresca-reason__head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
}
/* 連番は Forum。見出しより 7px 下げるとデザインの見た目に揃う。 */
.fresca-reason__no {
  flex-shrink: 0;
  margin-top: 7px;
  font-family: 'Forum', serif;
  font-size: 24px;
  letter-spacing: 2.4px;
  line-height: 1;
}
.fresca-reason__name {
  font-size: 26px;
  letter-spacing: 3.9px;
  line-height: 1.5;
}
.fresca-reason .fresca-note { margin: -14px 0 15px; }
.fresca-reason__body {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.6;
}

/* =====================================================
   各社製品比較
   ===================================================== */
.fresca-compare {
  padding-top: 160px;
  text-align: center;
}
.fresca-compare__title {
  color: #fff;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
  margin-bottom: 50px;
}
/* 表は 1120px 相当。画面が狭いときは表だけ横スクロールさせ、
   ページ全体が横に伸びないようにする。 */
.fresca-compare__scroll {
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: auto;
}
/* セル同士の 2px の隙間は border-spacing で作る。
   外周にも 2px 付くぶんは負マージンで相殺する。 */
.fresca-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 2px;
  margin: -2px;
  table-layout: fixed;
  color: #fff;
}
/* 見出し列 120px / 自社 180px × 2 / 他社 157px × 4（計 1108px ＋ 隙間）。 */
.fresca-table__col-label { width: 10.83%; }
.fresca-table__col-own { width: 16.25%; }
.fresca-table th,
.fresca-table td {
  padding: 15px 8px;
  text-align: center;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.6;
}
/* 見出し行・見出し列は少し濃く、自社列（フレスカ 2 機種）は茶色で強調する。 */
.fresca-table thead th { background: rgba(255, 255, 255, 0.3); }
.fresca-table thead th.is-own { background: rgba(169, 132, 94, 0.5); }
.fresca-table thead td { background: rgba(255, 255, 255, 0.3); }
.fresca-table tbody th {
  background: rgba(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.5;
}
.fresca-table tbody td.is-own { background: rgba(169, 132, 94, 0.4); }
.fresca-table thead th {
  padding: 6px 4px;
  font-weight: 700;
  letter-spacing: 2.1px;
}
/* 自社列の見出しは 38px の製品サムネイル＋製品名。 */
.fresca-table__product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fresca-table__product img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.fresca-table tr.is-large td { font-size: 20px; }
.fresca-table tr.is-bold td {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

/* =====================================================
   活用シーン
   ===================================================== */
.fresca-scenes {
  padding-top: 189px;
  text-align: center;
  color: #fff;
}
.fresca-scenes__title {
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
  margin-bottom: 50px;
}
/* 250px × 4 列、間隔 40px。 */
.fresca-scenes__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 250px));
  justify-content: center;
  align-items: start;
  gap: 40px;
}
.fresca-scene__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 25px;
}
.fresca-scene__name {
  font-size: 22px;
  letter-spacing: 3.3px;
  line-height: 1.5;
  margin-bottom: 10px;
}
/* 250px 幅に収まらない行だけ字送りを詰める（デザインの「リラクゼーションサロン」）。 */
.fresca-scene__name .is-tight {
  letter-spacing: 0.48px;
  white-space: nowrap;
}
.fresca-scene__desc {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.6;
}

/* =====================================================
   アクセサリ
   ===================================================== */
.fresca-accessories {
  padding: 150px 0 140px;
  text-align: center;
}
.fresca-accessories__title {
  color: #fff;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
  margin-bottom: 50px;
}
.fresca-accessories__title-sm {
  font-size: 24px;
  letter-spacing: 3.6px;
}
/* 3 列ずつ配置。カードは最大 347px、狭い画面では列幅に合わせて縮む。
   画像枠が 206px 固定なので、タブレット幅では 2 列、スマホでは 1 列に落とす。 */
.fresca-accessories__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 347px));
  justify-content: center;
  gap: 40px;
}
@media (max-width: 1023px) {
  .fresca-accessories__list {
    grid-template-columns: repeat(2, minmax(0, 347px));
  }
}
@media (max-width: 767px) {
  .fresca-accessories__list {
    grid-template-columns: minmax(0, 347px);
  }
}
.fresca-accessory {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 347px;
  padding: 39px 20px 0;
  background: #f5f3eb;
  color: #3c3c3c;
}
/* 白い背景シェイプの中央に商品画像を重ねる（画像サイズは width/height 属性）。 */
.fresca-accessory__image {
  display: grid;
  place-items: center;
  width: 206px;
  height: 174px;
}
.fresca-accessory__image > img { grid-area: 1 / 1; }
.fresca-accessory__blob {
  width: 170px;
  height: 173.6px;
}
.fresca-accessory__photo { object-fit: contain; }
/* 対象機種は左上の緑ラベル。 */
.fresca-accessory__target {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background: #0f6a18;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
}
.fresca-accessory__name {
  margin-top: 29px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1.5;
}
.fresca-accessory .fresca-note {
  width: 191px;
  margin-top: 7px;
  text-align: left;
}
.fresca-accessory .fresca-external {
  right: 20px;
  bottom: 17px;
}

/* =====================================================
   ヘッダーの見え方（このページのみ）
   ===================================================== */
/* デザインではグローバルヘッダーがヒーロー写真の上に重なり、
   帯の地色を持たない（テクスチャ opacity 0.4 のみ）。
   common.css の不透明な地色をこのページだけ透明にする。
   スクロール後は共通の .is-scrolled（すりガラス）に切り替わる。 */
.page-products-business .site-header,
.page-products-home .site-header { background-color: transparent; }

/* =====================================================
   ページ別の差分：家庭用（page-products-home）
   ===================================================== */
/* 地色が明るいベージュ。森のテクスチャ（common.css の body::before、multiply）は共通。 */
body.page-products-home { background-color: #c7ab8b; }
/* 比較表の自社列はこげ茶で強調する（業務用は明るい茶）。 */
.page-products-home .fresca-table thead th.is-own { background: rgba(78, 57, 35, 0.5); }
.page-products-home .fresca-table tbody td.is-own { background: rgba(78, 57, 35, 0.4); }
/* 活用シーンが無いぶん、前後の余白がデザイン上わずかに異なる。 */
.page-products-home .fresca-reasons { padding-top: 180px; }
.page-products-home .fresca-accessories { padding-bottom: 180px; }

/* 直後の Support（common.css）は、アクセサリ欄の下余白をそのまま間隔にする。 */
.fresca + .support { padding-top: 0; }


/* =====================================================
   レスポンシブ
   - max-width: 1023px … タブレット。Figma に該当デザインが無いため PC からの補間値。
   - max-width: 767px  … Figma「SP-水素の杜-業務用フレスカ」(238:2125 / 375px) の実寸。
   ※ このファイルは家庭用ページ（page-products-home）と共用。
     家庭用の SP デザインは未確認のため、共通クラスの指定がそのまま効く。
   ===================================================== */

/* ----- タブレット（〜1023px） ----- */
@media (max-width: 1023px) {
  .fresca-hero { min-height: 560px; }
  .fresca-hero__copy { margin: 160px 40px 0 0; width: 440px; }
  .fresca-hero__eyebrow { font-size: 22px; letter-spacing: 3.3px; }

  .fresca-intro { padding-top: 90px; }
  .fresca-intro__title { font-size: 30px; letter-spacing: 4px; }

  .fresca-products { padding-top: 80px; }
  .fresca-products__lead { font-size: 24px; letter-spacing: 3px; }

  .fresca-features { padding-top: 120px; }
  .fresca-features__title { font-size: 30px; letter-spacing: 4px; }
  .fresca-features__logo { width: 300px; }
  /* 3 列だと 1 枚あたりが潰れるので 2 列に落とす。 */
  .fresca-features__list { grid-template-columns: repeat(2, minmax(0, 373px)); row-gap: 60px; }
  .fresca-feature__image { height: 380px; }

  /* 左の縦見出しを上に出して 1 カラムにする。 */
  .fresca-reasons { flex-direction: column; gap: 32px; padding: 120px 30px 0; }
  .fresca-reasons__title { width: auto; white-space: normal; font-size: 30px; letter-spacing: 4px; }
  .fresca-reason { padding: 24px 28px 28px; }

  .fresca-compare { padding-top: 120px; }
  .fresca-compare__title { font-size: 30px; letter-spacing: 4px; }

  .fresca-scenes { padding-top: 120px; }
  .fresca-scenes__title { font-size: 30px; letter-spacing: 4px; }
  .fresca-scenes__list { grid-template-columns: repeat(2, minmax(0, 250px)); }

  .fresca-accessories { padding: 120px 0; }
  .fresca-accessories__title { font-size: 30px; letter-spacing: 4px; }
}

/* ----- スマートフォン（〜767px）: Figma SP デザイン準拠 ----- */
@media (max-width: 767px) {

  /* 本文幅はセクション側の padding: 0 20px（＝ 375 - 40 = 335px）で作る。 */
  .fresca .l-container {
    width: 100%;
    max-width: none;
  }

  /* --- ヒーロー --- */
  /* SP はコピーを写真に重ねず、写真の下に置く（写真の下端に 34px だけかぶせる）。
     ヘッダーの帯は common.css の SP 指定で 94px なので、潜り込ませる量も合わせる。 */
  .fresca-hero {
    display: block;
    min-height: 0;
    margin-top: -94px;
    overflow: visible;
  }
  .fresca-hero__bg {
    height: 542px;
    object-fit: cover;
    /* 横長の写真を 375px で切り出すときの基準（デザインの切り取り位置に合わせる）。 */
    object-position: 19% bottom;
  }
  /* SP は写真に横グラデーションを敷かない。 */
  .fresca-hero__veil { display: none; }
  .fresca-hero__copy {
    /* grid → block に戻したので、grid 用の配置指定も解除する。 */
    justify-self: stretch;
    align-self: auto;
    width: auto;
    max-width: none;
    margin: -34px 0 0;
  }
  .fresca-hero__eyebrow {
    margin-left: 18px;
    font-size: 19.8px;
    letter-spacing: 2.96px;
  }
  .fresca-hero__logo { margin: 7px 0 0 6px; }
  .fresca-hero__logo img { width: 365px; max-width: 100%; }
  .fresca-hero__label {
    margin: -3px 0 0 19px;
    font-size: 18.2px;
    letter-spacing: 2.74px;
  }
  /* 3 つの丸バッジは 107px × 3 ＋ 隙間 7px × 2 = 335px でちょうど本文幅に収まる。 */
  .fresca-hero__badges { gap: 7px; margin: 30px 0 0 20px; }
  .fresca-badge { width: 107px; height: 107px; }
  .fresca-badge__sm { font-size: 15px; letter-spacing: 2.25px; }
  .fresca-badge__num { font-size: 32px; letter-spacing: 2.25px; }
  .fresca-badge__unit { font-size: 21.4px; }
  .fresca-badge__lg { font-size: 23.5px; letter-spacing: 3.5px; }
  .fresca-badge__xs { font-size: 12.8px; letter-spacing: 1.93px; }
  .fresca-badge__flow { font-size: 20.3px; }
  .fresca-badge__flow-unit { font-size: 12.8px; }

  /* --- リード --- */
  .fresca-intro { padding: 114px 20px 0; }
  .fresca-intro__title {
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 1.5;
    margin-bottom: 36px;
  }
  /* 見出しは中央、本文は左揃え。 */
  .fresca-intro__body {
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 2.2;
    text-align: left;
  }

  /* --- 製品カード --- */
  .fresca-products { padding: 100px 20px 0; }
  .fresca-products__lead {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 36px;
  }
  .fresca-products__list { gap: 20px; }
  /* SP は写真を上、テキストを下に積む（PC は横 2 カラム）。 */
  .fresca-product {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 370px;
    padding: 14px 21px 0;
  }
  .fresca-product__image { width: 220px; height: 220px; }
  .fresca-product__blob { left: 16px; top: 18px; width: 187px; height: 191px; }
  .fresca-product__body {
    width: 100%;
    padding-top: 0;
    margin-top: -4px;
  }
  .fresca-product__target { font-size: 12px; letter-spacing: 1.2px; }
  .fresca-product__name { font-size: 22px; letter-spacing: 2.2px; }
  .fresca-product__price { margin-top: 0; }
  .fresca-product__price-num { font-size: 26px; letter-spacing: 1.3px; }
  .fresca-product__price-unit { font-size: 12px; letter-spacing: 1.2px; }
  .fresca-product .fresca-note {
    margin-top: 10px;
    max-width: none;
    font-size: 8px;
    letter-spacing: 0.8px;
  }
  .fresca-product .fresca-external { right: 17px; bottom: 20px; }

  /* --- 6 つの特徴 --- */
  .fresca-features { padding: 100px 20px 0; }
  /* ロゴと「6つの特徴」を横並び → 縦積みに。 */
  .fresca-features__title {
    flex-direction: column;
    gap: 0;
    font-size: 26px;
    letter-spacing: 2.6px;
  }
  .fresca-features__logo { width: 260px; }
  .fresca-features__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 34px;
    margin-top: 36px;
  }
  .fresca-feature__no { font-size: 24px; margin-bottom: 10px; }
  .fresca-feature__image { height: 395px; }
  /* 画像が 440px → 395px に縮むので、黒グラデーションの開始位置も合わせる。 */
  .fresca-feature__image::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 199px, #000 514px);
  }
  .fresca-feature__badge { left: 19px; right: 19px; bottom: 15px; }
  .fresca-feature__badge span { font-size: 18px; letter-spacing: 2.7px; }
  .fresca-feature__desc {
    margin-top: 18px;
    font-size: 12.6px;
    letter-spacing: 1.89px;
  }

  /* --- 安心・安全な 5 つの理由 --- */
  .fresca-reasons {
    flex-direction: column;
    gap: 36px;
    padding: 100px 20px 0;
  }
  .fresca-reasons__title {
    width: auto;
    white-space: normal;
    text-align: center;
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 1.5;
  }
  .fresca-reasons__list { gap: 20px; }
  .fresca-reason { padding: 30px 18px; }
  /* 見出しが 2 行になるカード（03 / 04）でも連番が 1 行目の高さに揃うよう上寄せにする。 */
  .fresca-reason__head {
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
  }
  .fresca-reason__no { margin-top: 5px; font-size: 20px; letter-spacing: 2px; }
  .fresca-reason__name { font-size: 20px; letter-spacing: 3px; }
  .fresca-reason .fresca-note { margin: -8px 0 15px; }
  .fresca-reason__content { gap: 15px; }
  .fresca-reason__mark.is-pse { width: 59px; }
  .fresca-reason__mark.is-jhypa { width: 78px; }
  .fresca-reason__body { font-size: 12px; letter-spacing: 1.8px; }

  /* 図解付き（04）は SP だと「見出し → 図 → 本文」の順。
     図は __main の兄弟なので、__main を display: contents にして
     中の要素を直接グリッドに並べ、order で図を間に差し込む。 */
  .fresca-reason--figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
  .fresca-reason--figure .fresca-reason__main { display: contents; }
  .fresca-reason--figure .fresca-reason__head { order: 1; margin-bottom: 0; }
  .fresca-reason--figure .fresca-reason__figure {
    order: 2;
    width: 100%;
    margin-top: 0;
    padding: 3px 39px;
    background: #fff;
  }
  .fresca-reason--figure .fresca-reason__content { order: 3; }

  /* --- 各社製品比較 --- */
  .fresca-compare { padding: 100px 20px 0; }
  .fresca-compare__title {
    font-size: 26px;
    letter-spacing: 2.6px;
    margin-bottom: 36px;
  }
  /* 表は 1118px のまま横スクロール。スクロールできると分かるよう
     バーを常に見せておく（デザインにも表の下にバーがある）。 */
  .fresca-compare__scroll {
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }
  .fresca-compare__scroll::-webkit-scrollbar { height: 10px; }
  .fresca-compare__scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
  }
  .fresca-compare__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
  }

  /* --- 活用シーン --- */
  .fresca-scenes { padding: 100px 20px 0; }
  .fresca-scenes__title {
    font-size: 26px;
    letter-spacing: 2.6px;
    margin-bottom: 36px;
  }
  .fresca-scenes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 35px;
  }
  .fresca-scene__image { margin-bottom: 15px; }
  .fresca-scene__name {
    font-size: 14px;
    letter-spacing: 2.1px;
    margin-bottom: 6px;
  }
  /* 14px なら 158px の枠に収まるので、PC 用の字詰めは戻す。 */
  .fresca-scene__name .is-tight { letter-spacing: 0; }
  .fresca-scene__desc { font-size: 10px; letter-spacing: 1.5px; }

  /* --- アクセサリ --- */
  .fresca-accessories { padding: 100px 20px 140px; }
  .fresca-accessories__title {
    font-size: 26px;
    letter-spacing: 2.6px;
    margin-bottom: 36px;
  }
  .fresca-accessories__title-sm { font-size: 20px; letter-spacing: 2px; }
  .fresca-accessories__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .fresca-accessory .fresca-external { right: 17px; bottom: 20px; }

  /* 家庭用ページ向けの PC 用上書きも、SP では共通の余白に戻す。 */
  .page-products-home .fresca-reasons { padding-top: 100px; }
  .page-products-home .fresca-accessories { padding-bottom: 140px; }
}