@charset "UTF-8";

/* ==========================================================
   商品詳細ページ（ecforce：クレンジング・トリートメント共通）
   すべてのセレクタを .page-product の中に限定し、ecforce のテーマと干渉しないようにする
   トリートメントは .tr を付け、デザインが異なる箇所のみ上書き
   サイズはデザイン幅750px基準：min(750px時の値, vw換算値)
   画像は width:%（親要素に対する割合）＋ max-width:画像の実寸px
========================================================== */

/* ==========================================================
   変数
========================================================== */
.page-product {
  --c-text: #473d2e;
  --c-white: #fff;
  --c-cr-bg: #f6e8df;
  --c-cr-line: #74655a;
  --c-cr-rose: #b18288;

  /* フォントサイズ：最小値 / vw / 最大値（750px時） */
  --fz-lead: clamp(14px, 3.733vw, 28px);
  --fz-body: clamp(13px, 3.467vw, 26px);
}

/* ==========================================================
   ベース・リセット（.page-product 内のみ）
   :where() で詳細度を0にし、各パーツの指定を上書きしない
========================================================== */
.page-product {
  display: block;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--c-white);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fz-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

:where(.page-product) *,
:where(.page-product) *::before,
:where(.page-product) *::after {
  box-sizing: border-box;
}

:where(.page-product) :where(h1, h2, h3, p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ecforce テーマの見出し指定（h1〜h6 { font-family: "游ゴシック", serif; }）を打ち消し、ページのフォントを継承する
   詳細度はクラス1つ分なので、各パーツの font-family 指定（Josefin Sans など）は上書きしない */
.page-product :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

:where(.page-product) :where(img) {
  display: block;
}

:where(.page-product) :where(a) {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

:where(.page-product) :where(a:hover) {
  opacity: 0.7;
}

:where(.page-product) :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ==========================================================
   商品情報・購入
========================================================== */
.page-product .cr-item {
  padding: min(125px, 16.667vw) 0 min(152px, 20.267vw);
  background: var(--c-cr-bg);
}

.page-product .cr-item__slider {
  position: relative;
}

.page-product .cr-item__slides {
  position: relative;
  width: 65.067%;
  max-width: 488px;
  margin: 0 auto;
  aspect-ratio: 488 / 700;
}

.page-product .cr-item__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.page-product .cr-item__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.page-product .cr-item__slide img {
  width: 100%;
  max-width: 488px;
}

.page-product .cr-item__arrow {
  position: absolute;
  top: min(350px, 46.667vw);
  transform: translateY(-50%);
  width: min(60px, 8vw);
  height: min(60px, 8vw);
  font-size: var(--fz-lead);
  line-height: 1;
  transition: opacity 0.3s;
}

.page-product .cr-item__arrow:hover {
  opacity: 0.6;
}

.page-product .cr-item__arrow--prev {
  left: min(58px, 7.733vw);
}

.page-product .cr-item__arrow--next {
  right: min(70px, 9.333vw);
}

/* サムネイル：150px × 3、間隔19px（489px基準） */
.page-product .cr-item__thumbs {
  display: flex;
  justify-content: space-between;
  width: 65.2%;
  max-width: 489px;
  margin: min(56px, 7.467vw) auto 0;
}

.page-product .cr-item__thumbs li {
  flex: 0 0 30.675%;
}

.page-product .cr-item__thumb {
  display: block;
  width: 100%;
  transition: opacity 0.3s;
}

.page-product .cr-item__thumb:hover {
  opacity: 0.7;
}

.page-product .cr-item__thumb img {
  width: 100%;
  max-width: 150px;
}

.page-product .cr-item__info {
  margin-top: min(112px, 14.933vw);
  padding: 0 min(136px, 18.133vw) 0 min(124px, 16.533vw);
}

.page-product .cr-item__name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(17px, 4.533vw, 34px);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: 0.02em;
}

.page-product .cr-item__ja {
  margin-top: min(17px, 2.267vw);
  padding-bottom: min(18px, 2.4vw);
  border-bottom: 1px solid var(--c-text);
  font-size: var(--fz-body);
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.page-product .cr-item__price {
  display: flex;
  align-items: center;
  margin-top: min(30px, 4vw);
  white-space: nowrap;
}

.page-product .cr-item__yen,
.page-product .cr-item__slash,
.page-product .cr-item__vol {
  font-family: 'Josefin Sans', sans-serif;
  padding-top: 0.2em;
}

.page-product .cr-item__yen {
  font-size: clamp(18px, 4.8vw, 36px);
  line-height: 1.4;
}

.page-product .cr-item__tax {
  margin-left: min(13px, 1.733vw);
  font-size: clamp(11px, 2.933vw, 22px);
}

.page-product .cr-item__slash,
.page-product .cr-item__vol {
  margin-left: min(14px, 1.867vw);
  font-size: var(--fz-body);
}

/* 親幅490px に対する割合 */
.page-product .cr-item__price img {
  flex-shrink: 0;
  width: 15.918%;
  max-width: 78px;
  margin-left: min(22px, 2.933vw);
}

.page-product .cr-item__teiki {
  display: block;
  width: 89.333%;
  max-width: 670px;
  margin: min(110px, 14.667vw) auto 0;
}

.page-product .cr-item__teiki img {
  width: 100%;
  max-width: 670px;
}

.page-product .cr-item__form {
  width: 68.267%;
  max-width: 512px;
  margin: min(100px, 13.333vw) auto 0;
}

.page-product .cr-item__label {
  display: block;
  padding-left: min(6px, 0.8vw);
  font-size: clamp(11px, 2.933vw, 22px);
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.page-product .cr-item__select + .cr-item__label {
  margin-top: min(34px, 4.533vw);
}

.page-product .cr-item__select {
  position: relative;
  margin-top: min(8px, 1.067vw);
}

.page-product .cr-item__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: min(42px, 5.6vw);
  width: min(12px, 1.6vw);
  height: min(12px, 1.6vw);
  border-right: 1px solid var(--c-text);
  border-bottom: 1px solid var(--c-text);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.page-product .cr-item__select select {
  display: block;
  width: 100%;
  height: min(104px, 13.867vw);
  padding: 0 min(80px, 10.667vw) 0 min(33px, 4.4vw);
  border: 1px solid var(--c-cr-line);
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: var(--fz-body);
  color: var(--c-text);
  letter-spacing: 0.05em;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-product .cr-item__cart {
  display: block;
  width: 100%;
  margin-top: min(66px, 8.8vw);
  transition: opacity 0.3s;
}

.page-product .cr-item__cart:hover {
  opacity: 0.7;
}

.page-product .cr-item__cart img {
  width: 100%;
  max-width: 512px;
}

.page-product .cr-item__link {
  margin-top: min(52px, 6.933vw);
  font-size: clamp(12px, 3.2vw, 24px);
  line-height: 1.6;
  text-align: center;
}

.page-product .cr-item__link::before {
  content: ">";
  margin-right: 0.9em;
}

.page-product .cr-item__link a,
.page-product .cr-item__link .button-open {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.3s;
}

.page-product .cr-item__link .button-open:hover {
  opacity: 0.7;
}

/* ==========================================================
   商品説明・香り・関連商品
========================================================== */
.page-product .cr-about {
  padding: min(179px, 23.867vw) min(105px, 14vw) min(172px, 22.933vw) min(103px, 13.733vw);
  background: var(--c-white);
}

/* 親幅542px に対する割合 */
.page-product .cr-about__ttl img {
  width: 98.155%;
  max-width: 532px;
}

.page-product .cr-about__txt {
  margin-top: min(70px, 9.333vw);
  font-size: var(--fz-body);
  line-height: 2.23;
  letter-spacing: 0.09em;
}

.page-product .cr-about__en {
  margin-top: min(207px, 27.6vw);
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(17px, 4.533vw, 34px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.page-product .cr-about__fragrance {
  margin-top: min(65px, 8.667vw);
  font-size: var(--fz-body);
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* 左余白を打ち消して画像の位置をデザインに合わせる */
.page-product .cr-about__img {
  margin-left: max(-63px, -8.4vw);
}

.page-product .cr-about__img img {
  width: 123.985%;
  max-width: 672px;
}

.page-product .cr-about__note {
  margin-top: min(28px, 3.733vw);
  font-size: clamp(9px, 2.4vw, 18px);
  line-height: 1.6;
}

.page-product .cr-about__related {
  margin-top: min(153px, 20.4vw);
  font-size: clamp(15px, 4vw, 30px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.page-product .cr-about__list {
  margin-top: min(43px, 5.733vw);
}

.page-product .cr-about__item {
  width: 27.675%;
  max-width: 150px;
}

.page-product .cr-about__item a {
  display: block;
}

.page-product .cr-about__item img {
  width: 100%;
  max-width: 150px;
}

.page-product .cr-about__item-name {
  margin-top: min(40px, 5.333vw);
  font-size: clamp(11px, 2.933vw, 22px);
  font-weight: bold;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.page-product .cr-about__item-price {
  margin-top: min(24px, 3.2vw);
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(12px, 3.2vw, 24px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ==========================================================
   HOW TO USE（クレンジング）
========================================================== */
.page-product .cr-howto {
  padding: min(159px, 21.2vw) 0 min(166px, 22.133vw);
  background: var(--c-cr-bg);
}

.page-product .cr-howto__ttl img {
  width: 66.533%;
  max-width: 499px;
  margin: 0 auto;
}

.page-product .cr-howto__sub {
  margin-top: min(157px, 20.933vw);
}

.page-product .cr-howto__sub--usage {
  margin-top: min(45px, 6vw);
}

.page-product .cr-howto__sub img,
.page-product .cr-howto__movie img {
  width: 77.867%;
  max-width: 584px;
  margin: 0 auto;
}

.page-product .cr-howto__order {
  margin-top: min(35px, 4.667vw);
}

.page-product .cr-howto__order img {
  width: 89.6%;
  max-width: 672px;
  margin: 0 auto;
}

.page-product .cr-howto__check {
  margin-top: min(62px, 8.267vw);
}

.page-product .cr-howto__check img {
  width: 65.867%;
  max-width: 494px;
  margin: 0 auto;
}

.page-product .cr-howto__movie {
  margin-top: min(17px, 2.267vw);
}

.page-product .cr-howto__amount {
  margin-top: min(103px, 13.733vw);
}

.page-product .cr-howto__amount img {
  width: 78%;
  max-width: 585px;
  margin: 0 auto;
}

/* ステップのスライダー：中央のカードの左右に前後のカードを覗かせる */
.page-product .cr-step {
  position: relative;
  margin-top: min(86px, 11.467vw);
}

.page-product .cr-step__list {
  position: relative;
  aspect-ratio: 750 / 704;
  touch-action: pan-y;
}

/* カード幅439px・間隔22px（439px基準で 5.011%） */
.page-product .cr-step__item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 58.533%;
  max-width: 439px;
  transform: translateX(calc(-50% + var(--offset, 0) * 105.011%));
  transition: transform 0.5s ease;
}

.page-product .cr-step__item.is-jump {
  transition: none;
}

.page-product .cr-step__item img {
  width: 100%;
  max-width: 439px;
  -webkit-user-drag: none;
  user-select: none;
}

/* 矢印：.cr-item__arrow を流用し、中央カード（左端 20.733%）の両端に重ねて配置 */
/* 「<」「>」の字形は文字枠の中心より約0.19em下にあるため、下余白で白丸の中央に合わせる */
.page-product .cr-step__arrow {
  z-index: 1;
  top: min(352px, 46.933vw);
  padding-bottom: 0.38em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.page-product .cr-step__arrow--prev {
  left: calc(20.733% - min(30px, 4vw));
}

.page-product .cr-step__arrow--next {
  right: calc(20.733% - min(30px, 4vw));
}

.page-product .cr-step__dots {
  display: flex;
  justify-content: center;
  gap: min(25px, 3.333vw);
  margin-top: min(55px, 7.333vw);
}

.page-product .cr-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(60px, 8vw);
  aspect-ratio: 1;
  padding-top: 0.15em;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-cr-rose);
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(19px, 5.067vw, 38px);
  font-weight: 300;
  line-height: 1;
  transition: background 0.3s, color 0.3s;
}

.page-product .cr-step__dot.is-active {
  background: var(--c-cr-rose);
  color: var(--c-white);
}

/* ==========================================================
   商品詳細
========================================================== */
.page-product .cr-spec {
  padding: min(162px, 21.6vw) min(106px, 14.133vw) min(386px, 51.467vw);
  background: var(--c-white);
}

.page-product .cr-spec__inner {
  padding: min(58px, 7.733vw) 0 min(57px, 7.6vw);
  border-top: 1px solid var(--c-text);
  border-bottom: 1px solid var(--c-text);
}

.page-product .cr-spec__ttl {
  font-size: clamp(12px, 3.2vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.page-product .cr-spec__txt {
  margin-top: min(34px, 4.533vw);
  font-size: clamp(10px, 2.667vw, 20px);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.page-product .cr-spec__txt + .cr-spec__txt {
  margin-top: min(50px, 6.667vw);
}


/* ##########################################################
   トリートメント（商品詳細ページ：treatment.html）
   クレンジングと同じクラスを使用し、デザインが異なる箇所のみ上書き
########################################################## */

/* ==========================================================
   商品情報・購入（トリートメント）
========================================================== */
.page-product.tr .cr-item {
  padding-bottom: min(86px, 11.467vw);
}

.page-product.tr .cr-item__thumbs {
  margin-top: min(26px, 3.467vw);
}

.page-product.tr .cr-item__info {
  margin-top: min(82px, 10.933vw);
}

.page-product.tr .cr-item__teiki {
  margin-top: min(67px, 8.933vw);
}

.page-product.tr .cr-item__form {
  margin-top: min(44px, 5.867vw);
}

.page-product.tr .cr-item__select + .cr-item__label {
  margin-top: min(13px, 1.733vw);
}

.page-product.tr .cr-item__cart {
  margin-top: min(46px, 6.133vw);
}

.page-product.tr .cr-item__link {
  margin-top: min(55px, 7.333vw);
}

/* ==========================================================
   商品説明・香り・関連商品（トリートメント）
========================================================== */
.page-product.tr .cr-about {
  padding-top: min(110px, 14.667vw);
  padding-bottom: min(52px, 6.933vw);
}

/* 親幅542px に対する割合 */
.page-product.tr .cr-about__ttl img {
  width: 100.369%;
  max-width: 544px;
}

.page-product.tr .cr-about__txt sup {
  font-size: 0.6em;
  line-height: 0;
}

.page-product.tr .cr-about__en {
  margin-top: min(166px, 22.133vw);
}

.page-product.tr .cr-about__related {
  margin-top: min(104px, 13.867vw);
}

/* ==========================================================
   HOW TO USE（トリートメント）
========================================================== */
.page-product.tr .cr-howto {
  padding: min(159px, 21.2vw) 0 min(166px, 22.133vw);
}

.page-product.tr .cr-howto__sub {
  margin-top: min(87px, 11.6vw);
}

.page-product.tr .cr-howto__sub--usage {
  margin-top: min(40px, 5.333vw);
}

.page-product.tr .cr-howto__order {
  margin-top: min(32px, 4.267vw);
}

.page-product.tr .cr-howto__order img {
  width: 85.867%;
  max-width: 644px;
  margin: 0 0 0 min(42px, 5.6vw);
}

.page-product.tr .cr-howto__check {
  margin-top: min(52px, 6.933vw);
}

.page-product.tr .cr-howto__movie {
  margin-top: min(30px, 4vw);
}

.page-product.tr .cr-howto__amount {
  margin-top: min(133px, 17.733vw);
}

/* カード幅430px・間隔30px（430px基準で 6.977%） */
.page-product.tr .cr-step {
  margin-top: min(62px, 8.267vw);
}

.page-product.tr .cr-step__list {
  aspect-ratio: 750 / 689;
}

.page-product.tr .cr-step__item {
  width: 57.333%;
  max-width: 430px;
  transform: translateX(calc(-50% + var(--offset, 0) * 106.977%));
}

.page-product.tr .cr-step__item img {
  max-width: 430px;
}

/* 中央カード（高さ689px・左端 21.333%）に合わせて矢印を配置 */
.page-product.tr .cr-step__arrow {
  top: min(345px, 46vw);
}

.page-product.tr .cr-step__arrow--prev {
  left: calc(21.333% - min(30px, 4vw));
}

.page-product.tr .cr-step__arrow--next {
  right: calc(21.333% - min(30px, 4vw));
}

.page-product.tr .cr-step__dots {
  gap: min(18px, 2.4vw);
  margin-top: min(36px, 4.8vw);
}

.page-product.tr .cr-step__dot {
  width: min(52px, 6.933vw);
  font-size: clamp(17px, 4.533vw, 34px);
}

/* ==========================================================
   商品詳細（トリートメント）
========================================================== */
.page-product.tr .cr-spec {
  padding-top: min(235px, 31.333vw);
  padding-bottom: min(236px, 31.467vw);
}


/* ##########################################################
   ecforce の購入パーツ（規格・数量・カートボタン）
   id や構造は ecforce の JS が使うため変更しない
########################################################## */

/* ecforce テーマのパンくず（PC）に最初から付いている上下の余白を打ち消す */
body .p-product_content__breadcrumbs--pc {
  padding: 0;
}

/* ecforce テーマが購入パーツのクラスに付けている指定（高さ・余白・背景など）を打ち消し、静的ページと同じ高さにする */
.page-product .cr-item__form,
.page-product .cr-item__form .c-product_info__form__variant,
.page-product .cr-item__form .c-product_info__form__buttons {
  position: static;
  float: none;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.page-product .cr-item__form {
  width: 68.267%;
}

.page-product .cr-item__form .c-product_info__form__variant {
  margin: 0;
}

.page-product #btn-add {
  position: static;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
}

/* ecforce が規格の箱（#option_types）内に出力するラベルは非表示（独自ラベルを使用） */
.page-product .control-label {
  display: none !important;
}

/* 香料選択（ecforce が #option_types 内に生成する select） */
.page-product #option_types {
  margin-top: min(8px, 1.067vw);
}

.page-product #option_types select,
.page-product .input_option_type {
  display: block;
  width: 100%;
  height: min(104px, 13.867vw);
  padding: 0 min(80px, 10.667vw) 0 min(33px, 4.4vw);
  border: 1px solid var(--c-cr-line);
  border-radius: 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23473d2e'/%3E%3C/svg%3E") no-repeat right min(38px, 5.067vw) center / min(17px, 2.267vw) auto;
  font: inherit;
  font-size: var(--fz-body);
  color: var(--c-text);
  letter-spacing: 0.05em;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.page-product #option_types ~ .cr-item__label {
  margin-top: min(34px, 4.533vw);
}

.page-product.tr #option_types ~ .cr-item__label {
  margin-top: min(13px, 1.733vw);
}

/* 香りが1種類のみの商品は ecforce が #option_types に何も出力しないため、
   空のときは #option_types を消し、代わりに表示用プルダウン（静的ページと同じ見た目）を出す */
.page-product #option_types:empty {
  display: none;
}

.page-product .cr-item__select--fragrance {
  display: none;
}

.page-product #option_types:empty + .cr-item__select--fragrance {
  display: block;
}

/* カートに入れるボタン（画像ボタン）・再入荷待ちボタン */
.page-product .cr-item__form .c-product_info__form__buttons {
  margin-top: min(66px, 8.8vw);
}

.page-product.tr .cr-item__form .c-product_info__form__buttons {
  margin-top: min(46px, 6.133vw);
}

.page-product #btn-add {
  display: block;
  width: 100%;
  transition: opacity 0.3s;
}

.page-product #btn-add:hover {
  opacity: 0.7;
}

.page-product #btn-add img {
  width: 100%;
  max-width: 512px;
}

.page-product #btn-stock-waiting-list {
  display: block;
  margin-top: min(20px, 2.667vw);
  padding: min(30px, 4vw) 0;
  border-radius: 4px;
  background: #8e8e8e;
  color: var(--c-white);
  font-size: var(--fz-body);
  text-align: center;
}

.page-product .c-product_info__notice {
  display: block;
  margin-top: min(16px, 2.133vw);
  font-size: clamp(11px, 2.933vw, 22px);
  line-height: 1.6;
}