@charset "UTF-8";

/* ==================================================
   製品画像の分割レイアウト：商品01～04 共通
   page.css の後に読み込んでください。
   ================================================== */

.product-split {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 6.7%;
}

/* 商品ごとの背景色：PC / スマホ共通 */

/* 01：ベビー全身泡ソープ */
.product-split--01 {
  --product-panel-color: #edf8fd;
}

/* 02：ベビーせっけん */
.product-split--02 {
  --product-panel-color: #ffeff2;
}

/* 03：ベビー泡シャンプー */
.product-split--03 {
  --product-panel-color: #fdeee8;
}

/* 04：ベビースキンミルク */
.product-split--04 {
  --product-panel-color: #fff2cd;
}

/* 背景を含む商品パネル */
.product-split__panel {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 2.2%;
}

/* 背景：タイトル画像の高さの半分から開始 */
.product-split__panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  margin-top: calc(47.5% * 173 / 1423 / 2);
  background-color: var(--product-panel-color);
  pointer-events: none;
}

/* PC：01・03は左端まで背景、右上・右下が角丸 */
.product-split--01 .product-split__panel::before,
.product-split--03 .product-split__panel::before {
  left: 0;
  right: 13.333333%;
  border-radius: 0 clamp(20px, 3.333333vw, 64px) clamp(20px, 3.333333vw, 64px) 0;
}

/* PC：02・04は右端まで背景、左上・左下が角丸 */
.product-split--02 .product-split__panel::before,
.product-split--04 .product-split__panel::before {
  left: 13.333333%;
  right: 0;
  border-radius: clamp(20px, 3.333333vw, 64px) 0 0 clamp(20px, 3.333333vw, 64px);
}

/* PC：タイトル・商品情報・全成分・ボタンを同じ幅で中央配置 */
.product-split .product-split__piece,
.product-split .product-split__button {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: 47.5%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  line-height: 0;
}

.product-split picture {
  display: block;
  line-height: 0;
}

.product-split picture>img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ボタン：設置した商品のみに適用（現在は02） */
.product-split .product-split__button {
  margin-top: 1.666667%;
  margin-bottom: 1.666667%;
  text-decoration: none;
}

.product-split .product-split__button>picture {
  width: 100%;
  margin: 0;
  padding: 0;
}

.product-split .product-split__button:focus-visible {
  outline: 3px solid #e95098;
  outline-offset: 4px;
}

/* ==================================================
   スマホ：640px以下
   ================================================== */

@media screen and (max-width: 640px) {
  .product-split {
    padding-bottom: 9%;
  }

  .product-split__panel {
    padding-bottom: 3%;
  }

  /* 全商品：背景は左右いっぱい、角丸なし */
  .product-split--01 .product-split__panel::before,
  .product-split--02 .product-split__panel::before,
  .product-split--03 .product-split__panel::before,
  .product-split--04 .product-split__panel::before {
    left: 0;
    right: 0;
    margin-top: calc(89.351852% * 118 / 965 / 2);
    border-radius: 0;
  }

  /* タイトル・商品情報・全成分：965px / 全体1080pxの比率 */
  .product-split .product-split__piece {
    width: 89.351852%;
  }

  /* ボタン：1080px幅の画像内余白を含め、全幅で表示 */
  .product-split .product-split__button {
    width: 100%;
    margin-top: 3.5%;
    margin-bottom: 3.5%;
  }
}