/* =========================================
   設備・仕様（バスルーム）ページ
========================================= */

/* ==========
ページタイトル
========== */

.section__content--quality-title {
  padding: min(6.4vw, 24px) 0 min(5.3333vw, 20px);
  border-bottom: 4px solid var(--accent-color);
}

.quality-title__en {
  width: min(28vw, 105px);
  margin: 0 auto min(1.0667vw, 4px);
}

.quality-title__ja {
  display: block;
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  text-align: center;
  color: var(--text-color);
}

/* ==========
ヒーロー画像
========== */

.section__content--quality-hero {
  position: relative;
}

/* Figmaでは画像の上に #1b120e 25% の暗幕が重なる */
.section__content--quality-hero::after {
  position: absolute;
  inset: 0;
  background-color: var(--hero-overlay-color);
  content: "";
  pointer-events: none;
  opacity: 0.25;
}

.quality-hero__img img {
  height: min(48vw, 180px);
  object-fit: cover;
}

/* ==========
セクション共通
========== */

.section__content--quality-tab,
.section__content--bathroom {
  background-color: var(--quality-bg-color);
}
.section__content--bathroom {
  border-bottom: 4px solid var(--accent-color);
}
/* ==========
設備カテゴリータブ
========== */

.section__content--quality-tab {
  padding: min(13.3333vw, 50px) 0 0;
}

.quality-tab__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(5.3333vw, 20px) min(5.0667vw, 19px);
}

.quality-tab__link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(10.6667vw, 40px);
  border: 1px solid var(--tab-color);
  background-color: var(--tab-color);
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  transition: opacity 0.3s ease;
}

.quality-tab__link:hover {
  opacity: 0.7;
}

/* 現在表示中のカテゴリー */
.quality-tab__link--current {
  background-color: var(--tab-current-color);
  color: var(--text-color);
  pointer-events: none;
}

/* ==========
バスルーム
========== */

.section__content--bathroom {
  padding: min(14.4vw, 54px) 0 min(16vw, 60px);
}

/* リード（見出し＋キャッチコピー） */
.bathroom-lead {
  margin-bottom: min(10.6667vw, 40px);
  text-align: center;
}

.bathroom-lead__en {
  width: min(56.5333vw, 212px);
  margin: 0 auto;
}

.bathroom-lead__ja {
  display: block;
  margin-top: min(1.3333vw, 5px);
  margin-bottom: min(5.3333vw, 20px);
  font-family: var(--mincho);
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 500;
  line-height: 1.8;
  color: var(--text-color);
}

/* 見出し下の区切り線 */
.bathroom-lead__ja::after {
  display: block;
  width: min(26.6667vw, 100px);
  margin: min(5.0667vw, 19px) auto 0;
  border-top: 1px solid var(--text-color);
  content: "";
}

.bathroom-lead__text {
  font-size: min(3.7333vw, 0.875rem);
  line-height: 2;
  letter-spacing: 0.4em;
  color: var(--text-color);
}

.bathroom-lead__gothic,
.bathroom-ufb__gothic {
  font-family: var(--gothic);
  font-weight: 400;
}

.bathroom-lead__mincho,
.bathroom-ufb__mincho {
  font-family: var(--mincho);
  font-weight: 500;
}

/* ----------
設備カード（共通コンポーネント）
---------- */

/* 設備名の見出しバー。
   1行時の高さはSP・PCで使い回すため変数に持たせる（--sp-2line のPC戻しでも参照する） */
.c-spec-heading {
  --spec-heading-min-height: min(9.0667vw, 34px);

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--spec-heading-min-height);
  margin-bottom: min(4vw, 15px);
  padding: min(1.0667vw, 4px) min(2.6667vw, 10px);
  background-color: var(--spec-heading-color);
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
}

/* SP・PCとも2行になる見出し／SPのみ2行になる見出し（Figma実値 57px） */
.c-spec-heading--2line,
.c-spec-heading--sp-2line {
  min-height: min(15.2vw, 57px);
  line-height: 1.5;
}

.c-spec__figure {
  position: relative;
  margin-bottom: min(2.6667vw, 10px);
}

/* SP・PCで画像を出し分けている箇所。picture はデフォルト inline のため下に行間の隙間が出る */
.c-spec__figure picture,
.bathroom-photo picture {
  display: block;
}

.c-spec__figure img {
  aspect-ratio: 158 / 109;
  object-fit: cover;
}

/* 「参考写真」ラベル（画像左下に重ねる） */
.c-spec__note {
  position: absolute;
  bottom: min(0.5333vw, 2px);
  left: min(1.3333vw, 5px);
  font-size: min(2.6667vw, 0.625rem);
  font-weight: 400;
  line-height: 1.8;
  white-space: nowrap;
  color: var(--text-color);
}

/* 画像右下に置くパターン（SP・PC共通／SPのみ右） */
.c-spec__note--right,
.c-spec__note--sp-right {
  right: min(1.3333vw, 5px);
  left: auto;
}

/* 明るい写真に重ねる白文字 */
.c-spec__note--light {
  color: #fff;
}

/* 設備名の小見出し（ナチュラルケアミスト等） */
.c-spec__label {
  margin-bottom: min(1.3333vw, 5px);
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--spec-heading-color);
}

.c-spec__text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
}

/* 写真左上に重ねる英字ラベル（WASH STAND / TOILET） */
.c-photo-en {
  position: absolute;
  top: min(1.3333vw, 5px);
  left: min(2.6667vw, 10px);
  font-family: var(--serif-en-font);
  font-size: min(8vw, 1.875rem);
  font-weight: 300;
  line-height: 1.5;
  color: #000;
}

/* 写真上に重ねる吹き出し（「便利」）。
   SP・PCで画像を出し分けるため picture でラップしており、重ね位置は picture 側に持たせる */
.c-balloon {
  position: absolute;
  top: max(-1.3333vw, -5px);
  left: 67%;
  width: 20%;
}

/* 同じ figure 内の写真を対象にした img 指定（PCは .bathroom-toilet__cols から
   書かれており詳細度0-2-1）に、記述順に関わらず勝たせるため figure から書く。
   幅は親の picture（.c-balloon）に持たせているため、img はそれいっぱいに広げる */
.c-spec__figure .c-balloon img.c-balloon__img {
  width: 100%;
  aspect-ratio: 65 / 76;
  object-fit: contain;
}

/* ----------
メイン写真＋コンフォートウエーブシャワー
---------- */

.bathroom-photo {
  margin-bottom: min(10.6667vw, 40px);
}

.bathroom-photo img {
  aspect-ratio: 335 / 340;
  object-fit: cover;
}

/* 設備を2列に並べる。
   minmax(0, 1fr) にしないと、画像の実寸が列幅を押し広げて左右が不均等になる */
.bathroom-shower__cols,
.bathroom-toilet__cols {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(5.3333vw, 20px);
}

/* シャワーの縦長写真のみ比率が異なる。下に本文が続かないため画像下の余白も不要 */
.bathroom-shower__photo {
  margin-bottom: 0;
}

.bathroom-shower__photo img {
  aspect-ratio: 157 / 220;
}

/* ----------
浴室暖房乾燥機／ガス衣類乾燥機／ほっカラリ床／洗面台
---------- */

.bathroom-cards {
  display: grid;
  gap: min(8vw, 30px);
  margin-top: min(8vw, 30px);
}

/* SPは 見出し → 写真 → 本文 の縦積み */
.bathroom-card {
  position: relative;
  display: grid;
  grid-template-areas:
    "head"
    "fig"
    "txt";
}

.bathroom-card .c-spec-heading {
  grid-area: head;
}

.bathroom-card .c-spec__figure {
  grid-area: fig;
}

.bathroom-card .c-spec__text {
  grid-area: txt;
}

.bathroom-card .c-spec__figure img {
  aspect-ratio: 335 / 210;
}

.bathroom-card--washstand .c-spec__figure img {
  aspect-ratio: 335 / 359;
}

/* ガス衣類乾燥機は白背景の製品写真のため、切り抜かず原寸比のまま中央に置く */
.bathroom-card--dryer .c-spec__figure img {
  width: min(55.7333vw, 209px);
  aspect-ratio: auto;
  margin: 0 auto;
}

.bathroom-card--dryer .c-spec__note {
  right: min(8vw, 30px);
  bottom: 0;
  left: auto;
}

/* ----------
トイレ
---------- */

.bathroom-toilet {
  margin-top: min(8vw, 30px);
}

.bathroom-toilet__photo {
  margin-bottom: min(5.3333vw, 20px);
}

.bathroom-toilet__photo img {
  aspect-ratio: 335 / 210;
}

/* トイレ内の見出しバーだけ下の余白が広い（Figma実値 20px） */
.bathroom-toilet__body > .c-spec-heading {
  margin-bottom: min(5.3333vw, 20px);
}

/* ----------
ウルトラファインバブル搭載給湯器
---------- */

.bathroom-ufb {
  margin-top: min(8vw, 30px);
}

.bathroom-ufb__photo .c-spec__figure img {
  aspect-ratio: 335 / 210;
}

/* SPは 写真 → 説明文 の順（PCは説明文が先） */
.bathroom-ufb__intro {
  display: flex;
  flex-direction: column;
  margin-bottom: min(5.3333vw, 20px);
}

.bathroom-ufb__lead {
  order: 1;
}

/* 上段（ロゴ＋キャッチ）／下段（給湯器＋配管図）の2段構成 */
.bathroom-ufb__diagram {
  margin-bottom: min(5.3333vw, 20px);
}

/* 上段：ロゴとキャッチを横並び */
.bathroom-ufb__diagram-head {
  display: flex;
  align-items: center;
  gap: min(8vw, 30px);
  margin-bottom: min(5.3333vw, 20px);
}

.bathroom-ufb__logo {
  flex-shrink: 0;
  width: 13%;
}

.bathroom-ufb__catch {
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

/* 下段：給湯器と配管図が左右で少し重なるため、配管図を負のマージンで食い込ませる */
.bathroom-ufb__diagram-body {
  display: flex;
  align-items: flex-end;
}

.bathroom-ufb__heater {
  flex-shrink: 0;
  width: 24%;
}

.bathroom-ufb__pipes {
  width: 80%;
  margin-left: -4%;
}

.bathroom-ufb__badges {
  display: flex;
  justify-content: center;
  gap: min(2.6667vw, 10px);
}

.bathroom-ufb__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(26.6667vw, 100px);
  height: min(26.6667vw, 100px);
  border-radius: 50%;
  background-color: var(--circle-badge-color);
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

/* ==========
注釈（このページは実テキストを入れるため色・書式を上書き）
========== */

.section__content--annotation {
  padding: min(10.6667vw, 40px) 0;
}

.section__content--annotation .annotation__text {
  font-family: var(--main-font);
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--text-color);
}

/* ==========
第1期1次販売・先着順申込受付（sale）
========== */

.section__content--sale {
  padding: min(16vw, 60px) 0;
}

.sale__title {
  margin-bottom: min(5.3333vw, 20px);
  font-size: min(6.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

.sale__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(6.4vw, 24px);
}

.sale__btn {
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  color: #fff;
}

.sale__btn::after {
  background: url("../images/common/arrow-right.svg") center / contain no-repeat;
}

.sale__btn:hover {
  opacity: 0.7;
}

.sale__btn--gold {
  background: linear-gradient(
    0deg,
    var(--gold-btn-from) 0%,
    var(--gold-btn-to) 100%
  );
}

.sale__btn--red {
  background: linear-gradient(
    0deg,
    var(--red-btn-from) 0%,
    var(--red-btn-to) 100%
  );
}

.sale__btn--navy {
  background: linear-gradient(
    180deg,
    var(--navy-btn-from) 0%,
    var(--navy-btn-to) 100%
  );
}

/* サブページ用：問合せ先電話番号 */
.sale__contact {
  margin-top: min(9.3333vw, 35px);
  text-align: center;
}

.sale__contact-lead {
  margin-bottom: min(2.6667vw, 10px);
  font-size: min(4.2667vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-color);
}

.sale__tel {
  margin-bottom: min(2.6667vw, 10px);
}

.sale__tel-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: min(2.1333vw, 8px);
}

.sale__tel-icon {
  width: min(10.4vw, 39px);
}

.sale__tel-num {
  font-size: min(10.6667vw, 2.5rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-color);
}

.sale__hours {
  font-size: min(3.7333vw, 0.875rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

/* 第1期1次販売・先着順申込受付（フッター内・上下にボーダー付与） */
.section__content--sale-bottom {
  /* border-top: 4px solid var(--accent-color);
  border-bottom: 4px solid var(--accent-color);
  background-color: var(--sale-bottom-bg); */
}
@media (min-width: 768px) {
  /* ==========
  ページタイトル
  ========== */

  .section__content--quality-title {
    padding: min(2.489vw, 34px) 0 min(2.0498vw, 28px);
    border-top: 4px solid var(--accent-color);
  }

  .quality-title__en {
    width: min(9.9026vw, 135px);
    margin-bottom: min(0.7321vw, 10px);
  }

  .quality-title__ja {
    font-size: clamp(0.5625rem, 0.8785vw, 0.75rem);
  }

  /* ==========
  ヒーロー画像
  ========== */

  .quality-hero__img img {
    height: min(25.6223vw, 350px);
  }

  /* ==========
  設備カテゴリータブ
  ========== */

  .section__content--quality-tab {
    padding: min(4.3924vw, 60px) 0 0;
  }

  .section__content--quality-tab .section-space {
    width: min(70.2782vw, 960px);
    max-width: calc(100% - 40px);
  }

  .quality-tab__list {
    grid-template-columns: repeat(4, 1fr);
    gap: min(1.4641vw, 20px);
  }

  .quality-tab__link {
    height: min(3.8067vw, 52px);
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }

  /* PCのホバーは現在地と同じ配色になる（Figma実値：背景 #d0cdc8 / 枠線 #827653 / 文字 #3d3a39）。
     枠線は通常時から --tab-color で引いてあるため、背景と文字色の変化で現れる */
  .quality-tab__link:hover {
    background-color: var(--tab-current-color);
    color: var(--text-color);
    opacity: 1;
  }

  /* ==========
  バスルーム
  ========== */

  .section__content--bathroom {
    padding: min(5.9297vw, 81px) 0 min(7.3206vw, 100px);
  }

  .section__content--bathroom .section-space {
    width: min(71.8887vw, 982px);
    max-width: calc(100% - 40px);
  }

  /* リード */
  .bathroom-lead {
    margin-bottom: min(5.8565vw, 80px);
  }

  .bathroom-lead__en {
    width: min(21.3763vw, 292px);
  }

  .bathroom-lead__ja {
    margin-top: min(0.366vw, 5px);
    margin-bottom: min(1.8302vw, 25px);
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  .bathroom-lead__ja::after {
    width: min(7.3206vw, 100px);
    margin-top: min(1.6105vw, 22px);
  }

  .bathroom-lead__text {
    font-size: clamp(1.125rem, 1.757vw, 1.5rem);
    line-height: 1.8;
  }

  /* ----------
  設備カード
  ---------- */

  .c-spec-heading {
    --spec-heading-min-height: min(2.4158vw, 33px);

    margin-bottom: min(1.098vw, 15px);
    padding: 0 min(0.7321vw, 10px);
    font-size: clamp(0.875rem, 1.3177vw, 1.125rem);
  }

  /* PCで2行になる見出し */
  .c-spec-heading--2line,
  .c-spec-heading--pc-2line {
    min-height: min(4.246vw, 58px);
    line-height: 1.25;
  }

  /* SPのみ2行だった見出しはPCで1行に戻す。
     高さもSPの2行分（57px）から1行分に戻すため、変数を参照して再指定する */
  .c-spec-heading--sp-2line {
    min-height: var(--spec-heading-min-height);
    line-height: 1.8;
  }

  .c-spec__figure {
    margin-bottom: min(0.7321vw, 10px);
  }

  .c-spec__note {
    bottom: min(0.366vw, 5px);
    left: min(0.7321vw, 10px);
    font-size: clamp(0.625rem, 0.8785vw, 0.75rem);
  }

  .c-spec__note--right,
  .c-spec__note--pc-right {
    right: min(0.7321vw, 10px);
    left: auto;
  }

  /* SPのみ右下だったラベルはPCで左下に戻す */
  .c-spec__note--sp-right {
    right: auto;
    left: min(0.7321vw, 10px);
  }

  .c-spec__label {
    margin-bottom: min(0.366vw, 5px);
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  .c-spec__text {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
    line-height: 1.5;
  }

  .c-photo-en {
    top: min(0.7321vw, 10px);
    left: min(0.7321vw, 10px);
    font-size: clamp(1.25rem, 2.0498vw, 1.75rem);
  }

  /* TOILET はPCのみ他より大きい（Figma実値 30px） */
  .c-photo-en--lg {
    font-size: clamp(1.375rem, 2.1962vw, 1.875rem);
  }

  .c-balloon {
    top: 5.7018%;
    left: 64.4951%;
    width: 15.635%;
  }

  .c-spec__figure .c-balloon img.c-balloon__img {
    aspect-ratio: 96 / 110;
  }

  /* ----------
  メインブロック：左に大きな写真、右にシャワーの設備を2列
  ---------- */

  .bathroom-block--main {
    display: grid;
    align-items: start;
    grid-template-columns: min(34.8462vw, 476px) 1fr;
    column-gap: min(2.1962vw, 30px);
  }

  .bathroom-photo {
    margin-bottom: 0;
  }

  .bathroom-photo img {
    aspect-ratio: 476 / 641;
  }

  .bathroom-shower__cols {
    gap: min(1.9034vw, 26px) min(2.1962vw, 30px);
  }

  .bathroom-shower__cols .c-spec__figure img {
    aspect-ratio: 223 / 170;
  }

  /* 上の指定と同じ詳細度で勝たせるため親クラスから書く */
  .bathroom-shower__cols .bathroom-shower__photo img {
    aspect-ratio: 223 / 257;
  }

  /* PCの .c-spec__figure が margin-bottom を再定義するため、ここでも打ち消す */
  .bathroom-shower__photo {
    margin-bottom: 0;
  }

  /* ----------
  4設備：左に写真、右に見出しと本文
  ---------- */

  .bathroom-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(2.1962vw, 30px) min(2.0498vw, 28px);
    margin-top: 30px;
  }

  .bathroom-card {
    align-items: start;
    grid-template-columns: min(17.6428vw, 241px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "fig head"
      "fig txt";
    column-gap: min(1.1713vw, 16px);
  }

  .bathroom-card .c-spec__figure {
    margin-bottom: 0;
  }

  .bathroom-card .c-spec__figure img {
    aspect-ratio: 241 / 216;
  }

  .bathroom-card--dryer .c-spec__figure img {
    width: min(17.0571vw, 233.05px);
    aspect-ratio: auto;
    margin-left: 0;
  }

  /* 乾燥機の「参考写真」だけは写真の右外（本文側）に置かれる（Figma実値 x=256） */
  .bathroom-card--dryer .c-spec__note {
    right: auto;
    bottom: min(0.7321vw, 10px);
    left: min(18.7408vw, 256px);
  }

  /* ----------
  トイレ：左に縦長写真、右に見出しと4設備
  ---------- */

  .bathroom-toilet {
    display: grid;
    align-items: start;
    grid-template-columns: min(22.4744vw, 307px) 1fr;
    column-gap: min(2.2694vw, 31px);
    margin-top: min(2.1962vw, 30px);
  }

  .bathroom-toilet__photo {
    margin-bottom: 0;
  }

  .bathroom-toilet__photo img {
    aspect-ratio: 307 / 481;
  }

  .bathroom-toilet__body > .c-spec-heading {
    margin-bottom: min(1.098vw, 15px);
  }

  .bathroom-toilet__cols {
    gap: min(2.1962vw, 30px);
  }

  .bathroom-toilet__cols .c-spec__figure img {
    aspect-ratio: 307 / 228;
  }

  /* ----------
  ウルトラファインバブル搭載給湯器
  ---------- */

  .bathroom-ufb {
    margin-top: min(2.9283vw, 40px);
  }

  /* 左：写真＋説明文／右：配管図＋バッジ。
     右側は 1024px を境に、配管図の右にバッジを縦並び（1024px以上）／
     配管図の下にバッジを横並び（1024px未満）で切り替える */
  .bathroom-ufb__body {
    display: grid;
    align-items: start;
    grid-template-columns: min(18.1552vw, 248px) 1fr;
    column-gap: min(1.9766vw, 27px);
  }

  .bathroom-ufb__intro {
    margin-bottom: 0;
  }

  /* 1024px未満：配管図とバッジを縦積みにする */
  .bathroom-ufb__main {
    display: flex;
    flex-direction: column;
    row-gap: min(1.098vw, 15px);
  }

  .bathroom-ufb__photo .c-spec__figure img {
    aspect-ratio: 248 / 170;
  }

  /* PCは説明文が写真より前。文字幅は列幅より狭い（Figma実値 220px） */
  .bathroom-ufb__lead {
    order: -1;
    width: min(16.105vw, 220px);
    margin-bottom: min(1.098vw, 15px);
  }

  /* 配管図は残り幅いっぱいに伸縮する */
  .bathroom-ufb__diagram {
    flex: 1 1 auto;
    margin-top: min(0.8053vw, 11px);
    margin-bottom: 0;
  }

  .bathroom-ufb__diagram-head {
    gap: min(2.1962vw, 30px);
    margin-bottom: 0;
    margin-left: 3.7%;
  }

  .bathroom-ufb__logo {
    width: 10%;
  }

  .bathroom-ufb__catch {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
    line-height: 1.8;
    letter-spacing: normal;
    white-space: nowrap;
  }

  .bathroom-ufb__heater {
    width: 22%;
  }

  .bathroom-ufb__pipes {
    width: 80%;
    margin-left: -4%;
  }

  /* 1024px未満：配管図の下に横並び（SPと同じ並び方） */
  .bathroom-ufb__badges {
    justify-content: center;
    flex: 0 0 auto;
    gap: min(1.4641vw, 20px);
    margin-top: 0;
  }

  .bathroom-ufb__badge {
    width: clamp(5rem, 3.3946rem + 3.3445vw, 6.25rem);
    height: clamp(5rem, 3.3946rem + 3.3445vw, 6.25rem);
    font-size: clamp(0.6875rem, 1.0249vw, 0.875rem);
  }

  /* ==========
  注釈
  ========== */

  .section__content--annotation {
    padding: min(5.8565vw, 80px) 0;
  }

  .section__content--annotation .section-space {
    width: min(71.8887vw, 982px);
    max-width: calc(100% - 40px);
  }

  .section__content--annotation .annotation__text {
    font-size: clamp(0.875rem, 1.1713vw, 1rem);
  }

  /* ==========
  第1期1次販売・先着順申込受付
  ========== */

  .section__content--sale {
    padding: min(7.3206vw, 100px) 0;
  }

  .section__content--sale .section-space {
    width: min(65.9vw, 900px);
    max-width: calc(100% - 40px);
  }

  .sale__title {
    margin-bottom: min(2.9283vw, 40px);
    font-size: clamp(2.1563rem, 3.3675vw, 2.875rem);
  }

  .sale__list {
    flex-direction: row;
    justify-content: center;
    gap: min(2.1972vw, 30px);
  }

  .sale__btn {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  .sale__contact {
    margin-top: min(2.9283vw, 40px);
  }

  .sale__contact-lead {
    margin-bottom: min(0.7321vw, 10px);
    font-size: clamp(1rem, 1.7607vw, 1.5rem);
  }

  .sale__tel {
    margin-bottom: min(0.7321vw, 10px);
  }

  .sale__tel-link {
    gap: min(0.5857vw, 8px);
  }

  .sale__tel-icon {
    width: min(2.8551vw, 39px);
  }

  .sale__tel-num {
    font-size: clamp(2.25rem, 3.5139vw, 3rem);
  }

  .sale__hours {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }

  /* 第1期1次販売・先着順申込受付（フッター内） */
  .section__content--sale-bottom {
    padding: min(4.3924vw, 60px) 0;
  }
}

/* =========================================
   PC広幅（1024px以上）
   ウルトラファインバブル：配管図の右にバッジを縦並びで置く（Figmaデザインの配置）。
   1024px未満では配管図の下に横並びで逃がす（上の 768px ブロック）
========================================= */

@media (min-width: 1024px) {
  .bathroom-ufb__main {
    flex-direction: row;
    align-items: flex-start;
    column-gap: min(1.4641vw, 20px);
  }

  .bathroom-ufb__badges {
    flex-direction: column;
    align-items: center;
    gap: min(0.7321vw, 10px);
    margin-top: min(0.366vw, 5px);
  }
}