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

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

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

/* 視覚的に隠して読み上げには残す（このページ専用） */
.products-bed-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_babybed_head
=======================================*/
/* Figma PC : ttl(42) → Frame 568 padding 60 0
   Figma SP : Breadcrumb → h1 が 30px ／ リードは Frame 43 padding-top 10 */
/* FigmaのY座標は文字のグリフ枠基準のため、CSSの行ボックス（行送りの上下の余白）ぶんを
   各余白から差し引いて、画面上の見た目の間隔をデザインへ合わせている */
.products-bed__head {
  padding-bottom: 52px;
}
@media screen and (max-width: 768px) {
  .products-bed__head {
    padding-bottom: 54px;
  }
}
@media screen and (max-width: 768px) {
  .products-bed__head .page_ttl {
    margin-top: 30px;
  }
}
.products-bed__head .products-bed__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-bed__head .products-bed__lead {
    margin-top: 40px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
}

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

/*=======================================
　products_babybed_series
=======================================*/
/* Figma PC : Frame 572 padding 60 0 / radius 20 → Frame 571 幅1062 gap 60
   Figma SP : Frame 572 は全幅・角丸なし／padding 60 20 → gap 60 */
.products-bed-series .products-bed-series__box {
  padding: 60px 8.5156%;
  border-radius: 20px;
  background: #F6F6F8;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__box {
    /* SPは左右いっぱいの帯になるため、inner の逃げを打ち消す */
    margin: 0 -20px;
    padding: 60px 20px;
    border-radius: 0;
  }
}
.products-bed-series {
  /* Figma : 製品情報インスタンス間の 製品情報_line（#D9D9DC 1px）＋ gap 60 */
}
.products-bed-series .products-bed-series__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__item {
    flex-direction: column;
    gap: 35px;
  }
}
.products-bed-series .products-bed-series__item + .products-bed-series__item {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #D9D9DC;
}
.products-bed-series .products-bed-series__body {
  flex: 0 0 48.3051%; /* 1062 中の 513 */
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__body {
    flex: none;
    width: 100%;
  }
}
.products-bed-series {
  /* SPは「写真 → ロゴ → 説明 → ボタン」の順 */
}
.products-bed-series .products-bed-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-bed-series .products-bed-series__media {
    order: -1;
    flex: none;
    width: 100%;
    border-radius: 10px;
  }
}
.products-bed-series {
  /* Figma の Image Transform（CROP）をそのまま比率で再現する。
     縦方向の % は margin では幅基準になってしまうため top / left で指定する */
}
.products-bed-series .products-bed-series__img {
  position: absolute;
  max-width: none;
}
.products-bed-series .products-bed-series__media--soinel .products-bed-series__img {
  width: 116.355%;
  height: 216.56%;
  left: -8.3709%;
  top: -29.81%;
}
.products-bed-series .products-bed-series__media--nommoc .products-bed-series__img {
  width: 136.3636%;
  height: 255.375%;
  left: -24.1779%;
  top: -92.75%;
}
.products-bed-series .products-bed-series__media--livingcot .products-bed-series__img {
  width: 233.2055%;
  height: 101.2576%;
  left: -49.1296%;
  top: -0.6288%;
}
.products-bed-series {
  /* ロゴ（支給SVG）。Figma PC は実寸、SP は 335px 幅のアートボード */
}
.products-bed-series .products-bed-series__ttl {
  line-height: 0;
}
.products-bed-series .products-bed-series__ttl .products-bed-series__logo {
  width: auto;
  height: 40px;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__ttl .products-bed-series__logo {
    width: 100%;
    height: auto;
  }
}
.products-bed-series .products-bed-series__ttl .products-bed-series__logo--nommoc {
  height: 31px;
}
.products-bed-series .products-bed-series__ttl .products-bed-series__logo--livingcot {
  height: 52px;
}
.products-bed-series {
  /* シリーズ商品名：PC・SPとも行間1.5・文字間0em（2026-09-18指定） */
}
.products-bed-series .products-bed-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-bed-series .products-bed-series__names {
    margin-top: 21px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0em;
  }
}
.products-bed-series {
  /* Figma : Frame 570 gap 40（SP 30） */
}
.products-bed-series .products-bed-series__txt {
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__txt {
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__txt--pc {
    display: none;
  }
}
.products-bed-series .products-bed-series__txt--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-series__txt--sp {
    display: block;
  }
}
.products-bed-series {
  /* Figma Frame 569 : gap 20。SPは 335 の中央へ 299 幅で置く */
}
.products-bed-series .products-bed-series__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .products-bed-series .products-bed-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 : Frame 45 は全幅・角丸なし／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_babybed/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 {
  /* SPは商品名が2行になるため表示層を出し分ける（Figma products_bed_sp 準拠） */
}
.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 {
  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 : 対象年齢の注記は値の下（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
     Figma SP : 色玉 45幅 / 丸30 / ラベル10px 行間12 / gap 5 */
}
.product-compare .product-compare__colors {
  display: flex;
  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 {
    width: 45px;
  }
}
.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と同じ位置で折り返すため、小書き仮名・長音が行頭へ来ないようにする */
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}
@media screen and (max-width: 768px) {
  .product-compare .product-compare__color-name {
    /* SPは色玉の幅（45px）より広いラベルを中央ではみ出させる */
    margin: 0 -7.5px;
    font-size: 10px;
    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;
  }
}