@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- products_babychair :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- products_babychair_head :ページタイトルの余白／リード文（h1本体は common.scss の .page_ttl）
- products_babychair_btn :ページ内共通ボタン（ベースは common.scss の .products-btn）
- products_babychair_banner :すくすく特集バナー（PC 1062×260 ／ SP 335×210）
- products_babychair_series :シリーズ紹介（sukusuku / sukusuku slim / affel / materna /
                             sukusuku low chair / arch / kitoco）
- product_compare :製品比較（asset/js/compare.js と対で使う）
  ※比較のスタイルは products_babybed.scss と同じ設計を、このページ用に複製している。
    ベッド用CSS全体を読み込ませないため、また片方の調整がもう片方へ波及しないための分離。
-------------------------*/
/* ---- products_babychairページ用 変数 ---- */
/* 見出し */
/* 本文 */
/* 比較表の値 */
/* シリーズ紹介の地 */
/* 製品比較の地 */
/* すくすくバナーの地（PC / Figma sukusuku_banner 1） */
/* すくすくバナーの地（SP / Figma sukusuku_banner2 2） */
/* ボタン地 */
/* 比較表の見出しピル／横罫線 */
/* シリーズ間の区切り線 */
/* 色玉の輪郭 */
/* コンテンツ幅（Figma 1440 − 左右80） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* ボックスの角丸 */
/* ボックス内側の逃げ。Figma PC は 1280 の中に 1062 なので左右109px＝8.5156% */
/* バナーは枠を持たず 1280 の中に 1062 が直接置かれる（1062 / 1280） */
/* 既存PCヘッダー高さ（common.scss $hd_pc_h） */
/* 既存SPヘッダー高さ（common.scss $hd_sp_h） */
/* Figma実寸から起こしたアスペクト比。
   Sassのバージョン差で「/」が除算評価されないよう文字列で保持する */
/* シリーズ写真（PC 517×400） */
/* 比較表の商品画像（PC 299×200 ／ SP 160×107.02 とも同比） */
/* すくすくバナー（PC） */
/* すくすくバナー（SP / Frame 807 内の見本） */
/* 比較表の列間。PC 1062 の中に 299×3＝82.5px間隔／SP 335 の中に 157.5×2＝20px間隔 */
/* 769〜1320px では1列の幅がFigma（299px）より狭くなる。
   文字と余白をビューポート比で縮め、折返し・重なりが起きないようにする */
/* 比較表の値・商品選択 */
/* ピル内側の左右 */
/* オンラインショップの文字 */
/* 色玉1つ分の幅 */
/* 色名 */
/*=======================================
　products_babychair
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.products-chair {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .products-chair {
    padding-top: 60px;
  }
}
.products-chair .products-chair__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御（本文側のブレークポイントは768/769px） */
.products-chair-br--pc {
  display: inline;
}
@media screen and (max-width: 768px) {
  .products-chair-br--pc {
    display: none;
  }
}

.products-chair-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .products-chair-br--sp {
    display: inline;
  }
}

/* 視覚的に隠して読み上げには残す（このページ専用） */
.products-chair-vh {
  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;
}

/*=======================================
　products_babychair_head
=======================================*/
/* Figma PC : ttl(y158 / 42) → Frame 568 padding 60 0（リード 18px / 行送り28px の3行）
   SPはベビーベッドページと同じ規則で組み立てている（SP全体のデザインは未支給） */
/* FigmaのY座標は文字のグリフ枠基準のため、CSSの行ボックス（行送りの上下の余白）ぶんを
   各余白から差し引いて、画面上の見た目の間隔をデザインへ合わせている */
.products-chair__head {
  padding-bottom: 52px;
}
@media screen and (max-width: 768px) {
  .products-chair__head {
    padding-bottom: 54px;
  }
}
@media screen and (max-width: 768px) {
  .products-chair__head .page_ttl {
    margin-top: 30px;
  }
}
.products-chair__head .products-chair__lead {
  margin-top: 52px;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products-chair__head .products-chair__lead {
    margin-top: 40px;
    font-size: 16px;
    line-height: 24px;
    /* Figmaのリード文は字間0。SP 335px に3行そのまま収めるため字間は足さない */
    letter-spacing: 0;
  }
}

/*=======================================
　products_babychair_btn
=======================================*/
/* Figma btn : #CFAD75 / radius 999 / 白文字。右端にリンクアイコン。
   ベースの色・高さ・角丸は common.scss の .products-btn を利用する */
.products-chair-btn {
  display: flex;
  gap: 14px;
  width: 299px;
  padding: 0 25px;
  text-align: center;
}
.products-chair-btn .products-btn__blank {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
}
.products-chair-btn[disabled] {
  cursor: default;
  opacity: 0.45;
}
.products-chair-btn[disabled]:hover {
  opacity: 0.45;
}

/*=======================================
　products_babychair_banner
=======================================*/
/* Figma PC : Frame 805 padding 0 0 60 0 → sukusuku_banner 1（1062×260 / radius 20 / #E9EEF2）
   Figma SP : Frame 807 内の見本 sukusuku_banner2 2（335×210 / radius 20）
   写真・ロゴ・文字・ボタンは別要素で組み、バナー全体の画像は使わない */
.products-chair-banner {
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .products-chair-banner {
    padding-bottom: 50px;
  }
}
.products-chair-banner .products-chair-banner__link {
  display: block;
  position: relative;
  width: 82.9688%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: #E9EEF2;
  aspect-ratio: 1062 / 260;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__link {
    width: 100%;
    background: #E9EFF1;
    aspect-ratio: 335 / 210;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .products-chair-banner .products-chair-banner__link:hover {
    opacity: 0.85;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .products-chair-banner .products-chair-banner__link:hover {
    opacity: 0.85;
  }
}
.products-chair-banner {
  /* Figma の Image Transform（CROP）をそのまま比率で再現する */
}
.products-chair-banner .products-chair-banner__media {
  display: block;
  position: absolute;
  inset: 0;
}
.products-chair-banner .products-chair-banner__photo {
  position: absolute;
  max-width: none;
  /* PC : 1062×260 の中に 808.83×715.44 を x295 / y-144 で置く */
  left: 27.7778%;
  top: -55.3846%;
  width: 76.161%;
  height: 275.1692%;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__photo {
    /* SP : 335×210 の中に 676.9×410.47 を x-247.88 / y-32.13 で置く */
    left: -73.9928%;
    top: -15.2984%;
    width: 202.0597%;
    height: 195.4626%;
  }
}
.products-chair-banner {
  /* ---- ロゴ・見出し・説明 ---- */
}
.products-chair-banner .products-chair-banner__body {
  display: block;
  position: static;
}
.products-chair-banner {
  /* PC : x60 / y45.25 / 幅299。SP : x30 / y24 / 幅274（中央寄せ） */
}
.products-chair-banner .products-chair-banner__logo {
  display: block;
  position: absolute;
  left: 5.6497%;
  top: 17.4038%;
  width: 28.1544%;
  line-height: 0;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__logo {
    left: 8.9552%;
    top: 11.4286%;
    width: 81.791%;
  }
}
.products-chair-banner .products-chair-banner__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.products-chair-banner {
  /* PC : 14px / x59.29 / y94.99。SP : 12px / 中央 / y53.69 */
}
.products-chair-banner .products-chair-banner__about {
  display: block;
  position: absolute;
  left: 5.5829%;
  top: 36.5346%;
  font-weight: 500;
  font-size: clamp(11px, 1.09vw, 14px);
  line-height: 1.4286;
  letter-spacing: 0;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__about {
    left: 0;
    right: 0;
    top: 25.5667%;
    font-size: 12px;
    line-height: 1.4167;
    text-align: center;
  }
}
.products-chair-banner {
  /* PC : 18px / 行送り29px / 字間6% / 3行。SP : 14px / 行送り20px / 中央 / 2行
     改行位置は <br> が正本。ブラウザとFigmaの字幅差で勝手に折り返さないよう nowrap にする */
}
.products-chair-banner .products-chair-banner__txt {
  display: block;
  position: absolute;
  left: 5.6497%;
  top: 52.0308%;
  white-space: nowrap;
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: 1.6111;
  letter-spacing: 0.06em;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__txt {
    left: 0;
    right: 0;
    top: 36.9952%;
    font-size: 14px;
    line-height: 1.4286;
    letter-spacing: 0;
    text-align: center;
  }
}
.products-chair-banner {
  /* 指定文言の読点だけ、後ろの空きを半角分詰める。他の文字の字間は維持する。 */
}
.products-chair-banner .products-chair-banner__txt--pc .products-chair-banner__comma {
  margin-right: -0.5em;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__txt--pc {
    display: none;
  }
}
.products-chair-banner .products-chair-banner__txt--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__txt--sp {
    display: block;
  }
}
.products-chair-banner {
  /* ---- PC：特集ページはこちら（197×40 / radius 999 / #CFAD75） ---- */
}
.products-chair-banner .products-chair-banner__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 79.5669%;
  top: 75.7692%;
  width: 18.5499%;
  height: 15.3846%;
  padding: 0 1.789%;
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 400;
  font-size: clamp(11px, 1.25vw, 16px);
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__cta {
    display: none;
  }
}
.products-chair-banner .products-chair-banner__cta {
  /* Figma の Vector（白 1px の山形）をCSSで再現する */
}
.products-chair-banner .products-chair-banner__cta::after {
  content: "";
  flex: none;
  width: 0.46em;
  height: 0.46em;
  margin-left: 0.5em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}
.products-chair-banner {
  /* ---- SP：右下の丸い矢印（支給SVG btn.svg / 30×30） ---- */
}
.products-chair-banner .products-chair-banner__arrow {
  display: none;
}
@media screen and (max-width: 768px) {
  .products-chair-banner .products-chair-banner__arrow {
    display: block;
    position: absolute;
    left: 86.2687%;
    top: 78.9762%;
    width: 8.9552%;
    height: auto;
  }
}

/*=======================================
　products_babychair_series
=======================================*/
/* Figma PC : Frame 572 padding 60 0 / radius 20 → Frame 571 幅1062 gap 60（区切り線あり）
   Figma SP : ベビーベッドページと同じ規則。全幅の帯・角丸なし／padding 60 20 */
.products-chair-series .products-chair-series__box {
  padding: 60px 8.5156%;
  border-radius: 20px;
  background: #F6F6F8;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__box {
    /* SPは左右いっぱいの帯になるため、inner の逃げを打ち消す */
    margin: 0 -20px;
    padding: 60px 20px;
    border-radius: 0;
  }
}
.products-chair-series {
  /* Figma : 製品情報インスタンス間の 製品情報_line（#D9D9DC 1px）＋ 前後 gap 60 */
}
.products-chair-series .products-chair-series__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__item {
    flex-direction: column;
    gap: 35px;
  }
}
.products-chair-series .products-chair-series__item + .products-chair-series__item {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #D9D9DC;
}
.products-chair-series .products-chair-series__body {
  flex: 0 0 48.3051%; /* 1062 中の 513 */
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__body {
    flex: none;
    width: 100%;
  }
}
.products-chair-series {
  /* SPは「写真 → ロゴ・商品名 → 説明 → ボタン」の順（ベビーベッドページと同じ） */
}
.products-chair-series .products-chair-series__media {
  flex: 0 0 48.6817%; /* 1062 中の 517 */
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 517 / 400;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__media {
    order: -1;
    flex: none;
    width: 100%;
    border-radius: 10px;
  }
}
.products-chair-series {
  /* Figma の Image Transform（CROP）をそのまま比率で再現する。
     縦方向の % は margin では幅基準になってしまうため top / left で指定する */
}
.products-chair-series .products-chair-series__img {
  position: absolute;
  max-width: none;
}
.products-chair-series .products-chair-series__media--gl .products-chair-series__img {
  width: 150.6719%;
  height: 144.5361%;
  left: -34.3005%;
  top: -24.2485%;
}
.products-chair-series .products-chair-series__media--slimj .products-chair-series__img {
  width: 149.1296%;
  height: 145.792%;
  left: -30.9493%;
  top: -22.9761%;
}
.products-chair-series .products-chair-series__media--affel .products-chair-series__img {
  width: 167.3087%;
  height: 144.1862%;
  left: -25.6395%;
  top: -42.2384%;
}
.products-chair-series .products-chair-series__media--materna .products-chair-series__img {
  width: 142.9996%;
  height: 123.3228%;
  left: -24.9643%;
  top: -14.8268%;
}
.products-chair-series .products-chair-series__media--lowchair .products-chair-series__img {
  width: 182.3909%;
  height: 159.0292%;
  left: -46.9883%;
  top: -31.3665%;
}
.products-chair-series .products-chair-series__media--arch .products-chair-series__img {
  width: 234.9983%;
  height: 202.5149%;
  left: -75.927%;
  top: -83.2751%;
}
.products-chair-series .products-chair-series__media--kitoco .products-chair-series__img {
  width: 203.0111%;
  height: 174.9279%;
  left: -31.6348%;
  top: -67.4525%;
}
.products-chair-series {
  /* ロゴ（支給SVG）。PCはSVGの実寸、SPは収まらない分だけ縮める
     （SP専用のロゴSVGは支給パッケージに無いため、実寸を上限に縮小するだけに留める） */
}
.products-chair-series .products-chair-series__ttl {
  line-height: 0;
}
.products-chair-series .products-chair-series__ttl .products-chair-series__logo {
  width: auto;
  max-width: 100%;
  height: auto;
}
.products-chair-series {
  /* シリーズ商品名：Figma 16px（ロゴとの間隔 20px） */
}
.products-chair-series .products-chair-series__names {
  margin-top: 16.5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0em;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__names {
    margin-top: 21px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0em;
  }
}
.products-chair-series {
  /* Figma : Frame 570 gap 40 */
}
.products-chair-series .products-chair-series__txt {
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__txt {
    margin-top: 18px;
  }
}
.products-chair-series {
  /* Figma Frame 569 : gap 20。SPは 335 の中央へ 299 幅で置く */
}
.products-chair-series .products-chair-series__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .products-chair-series .products-chair-series__actions {
    align-items: center;
    margin-top: 22px;
  }
}

/*=======================================
　product_compare
=======================================*/
/* Figma PC : Frame 581 padding 60 0 100 0 → Frame 45 padding 60 109 / radius 20 / #F8F3EA
   Figma SP : ベビーベッドページと同じ規則。全幅・角丸なし／padding 60 20 */
.product-compare {
  padding: 60px 0 100px;
}
@media screen and (max-width: 768px) {
  .product-compare {
    padding: 0 0 0;
  }
}
.product-compare .product-compare__box {
  padding: 50px 8.5156% 60px;
  border-radius: 20px;
  background: #F8F3EA;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__box {
    margin: 0 -20px;
    padding: 50px 20px 60px;
    border-radius: 0;
  }
}
.product-compare {
  /* Figma Frame 539 : 見出し→説明→商品選択 の間隔がいずれも46px */
}
.product-compare .product-compare__head {
  margin-bottom: 38px;
  text-align: center;
}
.product-compare .product-compare__ttl {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  color: #1D1D1F;
}
.product-compare .product-compare__lead {
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
}
.product-compare .product-compare__status {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
}
.product-compare {
  /* ---- 列 ---- */
  /* Figma PC : 1062 の中に 299×3（間隔82.5）／SP : 335 の中に 157.5×2（間隔20） */
}
.product-compare .product-compare__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 7.7683%;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__row {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
  }
}
.product-compare .product-compare__cell {
  min-width: 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__cell[data-col="2"] {
    display: none;
  }
}
.product-compare {
  /* grid item の display 指定が hidden 属性を上書きしないようにする */
}
.product-compare .product-compare__cell[hidden] {
  display: none !important;
}
.product-compare {
  /* ---- 商品選択 ---- */
  /* Figma PC : 299×50 / SP : 160×30。標準selectを重ねて装飾する */
}
.product-compare .product-compare__select {
  position: relative;
  width: 100%;
  max-width: 299px;
  height: 50px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__select {
    max-width: 160px;
    height: 30px;
  }
}
.product-compare .product-compare__select-native {
  position: absolute;
  inset: 0;
  z-index: 1; /* 表示層より前面に置き、ピル全面でクリックを受け取る */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  opacity: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__select-native {
    font-size: 12px;
  }
}
.product-compare .product-compare__select-native[disabled] {
  cursor: default;
}
.product-compare .product-compare__select-native option:disabled {
  color: #bfbfbf;
}
.product-compare {
  /* 表示層。selectの値と同じ内容をJSが textContent で書き換える */
}
.product-compare .product-compare__select-face {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
  width: 100%;
  height: 100%;
  padding: 0 clamp(14px, 1.8vw, 25px);
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 400;
  font-size: clamp(12px, 1.16vw, 16px);
  line-height: 1.3;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__select-face {
    padding: 0 13px;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
  }
}
.product-compare .product-compare__select-face {
  /* 右端のプルダウンキャレット（支給SVG）。
     position:absolute でselectの上に載るため、ここでもクリックを通す指定を明示する */
}
.product-compare .product-compare__select-face::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: clamp(14px, 1.8vw, 25px);
  width: 15px;
  height: 8px;
  margin-top: -4px;
  background: url("../img/products_babychair/icon_select-caret.svg") no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__select-face::after {
    right: 13px;
    width: 8px;
    height: 5px;
    margin-top: -2.5px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .product-compare .product-compare__select-native:not([disabled]):hover + .product-compare__select-face {
    opacity: 0.75;
  }
}
.product-compare .product-compare__select-native[disabled] + .product-compare__select-face {
  opacity: 0.45;
}
.product-compare {
  /* キーボード操作時のフォーカス表示。
     native selectは opacity:0 のため、そこに出るoutlineは見えない。
     表示層（face）側へ、ヘッダー／フッターと同じ 2px・offset 2px のリングを出す。
     色は見出しと同じ $ch_black。比較の地（$ch_compare_bg）とピル（$ch_gold）の
     どちらに重なっても判別できる。寸法・ホバー・disabled表示は変えない。 */
}
.product-compare .product-compare__select-native:focus-visible + .product-compare__select-face {
  outline: 2px solid #1D1D1F;
  outline-offset: 2px;
}
.product-compare {
  /* 商品名はPC／SPで表示層を出し分ける（チェアはいずれも1行） */
}
.product-compare .product-compare__select-txt {
  display: block;
  white-space: pre-line;
}
.product-compare .product-compare__select-txt--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__select-txt--pc {
    display: none;
  }
  .product-compare .product-compare__select-txt--sp {
    display: block;
  }
}
.product-compare {
  /* ---- 商品画像 ---- */
  /* Figma : PC 299×200 ／ SP 160×107.02（同比）。商品全体が収まる切り抜き */
}
.product-compare .product-compare__row--image {
  margin-top: 10px;
}
.product-compare .product-compare__figure {
  display: block;
  position: relative;
  width: 100%;
  max-width: 299px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 299 / 200;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__figure {
    max-width: 160px;
  }
}
.product-compare .product-compare__img {
  position: absolute;
  max-width: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.product-compare {
  /* ---- 項目見出し（横罫線の中央にピルが載る） ---- */
  /* Figma : Line 7（#EADBC2 1px）の上に Rectangle 40（150×25 / radius 20）＋見出し文字 */
}
.product-compare .product-compare__label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 25px;
  margin-top: 10px;
}
.product-compare .product-compare__label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: #EADBC2;
}
.product-compare .product-compare__label-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: clamp(110px, 10.4vw, 150px);
  height: 25px;
  padding: 0 15px;
  border-radius: 20px;
  background: #EADBC2;
  font-weight: 700;
  font-size: clamp(13px, 1.16vw, 16px);
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__label-txt {
    min-width: 125px;
    height: 22px;
    padding: 0 12px;
    font-size: 14px;
  }
}
.product-compare {
  /* ---- 値 ---- */
  /* Figma : 比較表テキスト padding 20 0 30 0 ／ 見出しとの間隔 10 */
}
.product-compare .product-compare__spec .product-compare__row {
  margin-top: 10px;
  padding: 15px 0 25px;
}
.product-compare .product-compare__row--color {
  padding: 20px 0 26px;
}
.product-compare .product-compare__row--age,
.product-compare .product-compare__row--remarks {
  align-items: center;
}
.product-compare .product-compare__value {
  display: block;
  font-weight: 400;
  font-size: clamp(12px, 1.16vw, 16px);
  line-height: 1.4;
  color: #000000;
  /* 1列が狭くなるPC幅では2行に割れるため、行長を均等にして端数の1文字が残らないようにする。
     SPはFigmaと同じ位置で折り返させたいので既定のまま */
}
@media (min-width: 769px) {
  .product-compare .product-compare__value {
    text-wrap: balance;
  }
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__value {
    font-size: 14px;
  }
}
.product-compare {
  /* 備考はFigmaの改行位置をそのまま出す（JSONの改行を活かす） */
}
.product-compare .product-compare__row--remarks .product-compare__value {
  white-space: pre-line;
  text-wrap: initial;
}
.product-compare {
  /* Figma : 対象年齢の注記は値の下（12px）。他製品へ切り替えたら非表示にする */
}
.product-compare .product-compare__note {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #000000;
}
.product-compare .product-compare__note[hidden] {
  display: none;
}
.product-compare {
  /* ---- カラー ---- */
  /* Figma PC : 色玉 60幅 / 丸30 / ラベル12px 行間16 / gap 5。
     チェアは1商品6色あり、297幅の中で4＋2に折り返す */
}
.product-compare .product-compare__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}
.product-compare .product-compare__color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.5px; /* Figma gap 10 − 色名の行ボックス上余白 */
  width: clamp(50px, 4.2vw, 60px);
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__color {
    /* チェアは「ブルー／ホワイト ウォッシュ」が隣り合うため、
       ベッドのようにラベルをはみ出させず1枠に収める（SP 1列 157.5px に3個＋gap5） */
    width: 48px;
  }
}
.product-compare .product-compare__color-dot {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #909090;
  border-radius: 50%;
  background: var(--cmp-dot, transparent);
}
.product-compare .product-compare__color-name {
  display: block;
  width: clamp(50px, 4.2vw, 60px);
  font-weight: 400;
  font-size: clamp(9px, 0.84vw, 12px);
  line-height: 16px;
  color: #000000;
  /* 色名の改行位置はFigmaの characters（U+2028）どおりに出す */
  white-space: pre-line;
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__color-name {
    width: 48px;
    font-size: 9px;
    line-height: 12px;
  }
}
.product-compare {
  /* ---- オンラインショップ ---- */
  /* Figma PC : 250×50 ／ SP : 150×30（文言は2行） */
}
.product-compare .product-compare__row--shop {
  margin-top: 10px;
}
.product-compare .product-compare__shop {
  width: 250px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(14px, 1.8vw, 25px);
  font-size: clamp(12px, 1.3vw, 18px);
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__shop {
    gap: 6px;
    width: 150px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 13px;
  }
}
.product-compare .product-compare__shop .products-btn__blank {
  right: clamp(14px, 1.8vw, 25px);
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__shop .products-btn__blank {
    right: 20px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
}