@charset "UTF-8";
/* --------------------
product 商品詳細
---------------------*/

/* モーダル内のみテキスト表示 */
.cmn-c-modal-txt {
display: none;
}
.c-modal .cmn-c-modal-txt {
display: block;
}

/* 他の商品を見ている方はこちら */
#productRelated .c-heading-seco h2 {
font-size: 18px;
}
@media (min-width: 768px) {
#productRelated .c-heading-seco h2 {
font-size: 24px;
}
}

.productStepList {
  display: flex; flex-wrap: wrap;
  padding: 18px 0 24px;
  border-bottom: 1px solid #d9a35e;
  text-align: center;
  font-feature-settings: "palt"; letter-spacing: 0.06em;
}
.productStepList dt {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 80px;
  color: #d9a35e;
  font-size: 1.8rem; font-weight: bold;
}
.productStepList dt img { width: 50px; margin: 0 auto 8px;}
.productStepList dd {
  position: relative;
  width: calc((100% - 108px)/6);
  font-size: 1.6rem;
}
.productStepList dd:after {
  content: "";
  display: block;
  position: absolute;
  right: 0; top: 45%;
  transform: translate(50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 16px;
  border-color: transparent transparent transparent #d9a35e;
}
.productStepList dd:last-child:after { content: none;}
.productStepList dd .img { margin-bottom: 15px;}
.productStepList dd .img img { width: auto; height: 123px;}
.productStepList dd a { color: #00a6cb; }
.productStepList dd .name p { position: relative; left: 50%; transform: translate(-50%, 0);}
.productStepList dd .num { display: none; color:#d9a35e;}
.productStepList.night { border-color: #5d648e;}
.productStepList.night dt { color: #5d648e;}
.productStepList.night dd:after { border-color: transparent transparent transparent #5d648e;}
.productStepList.night dd .num { color:#5d648e;}
@media (max-width: 767px) {
  .productStepList { padding: 30px 0; margin-right: 0;}
  .productStepList dt {width: 100%; margin-bottom: 5px;}
  .productStepList dd {width: calc(100%/3); font-size: 1.4rem; padding-bottom: 1.8em;}
  .productStepList dd:nth-child(4):after { content: none;}
  .productStepList dd .name p {white-space: normal; line-height: 1.4; margin-top: 3px;}
  .productStepList dd .num {
    display: block; width: 100%;
    font-size: 1.4rem; text-align: center;
    position: absolute; left: 0; bottom: 0;
  }
}

/* ==========================================
   ACNAL 表示崩れ補正用追加スタイル
   ========================================== */

/* 1. 余白用汎用クラス */
.u-mt-l {
	margin-top: 40px !important;
}
.u-mb-l {
	margin-bottom: 40px !important;
}

/* 2. s-product-checklist__02（チェックリスト枠） */
.s-product-checklist__02 {
	max-width: 468px;
	margin: 0 auto;
	padding: 32px 20px;
	background-color: #F3F3F3;
	box-sizing: border-box;
}
.s-product-checklist__02 * {
	box-sizing: border-box;
}
.s-product-checklist__02 > dl > dt {
	text-align: center;
}
/* ▼ 画像サイズ修正部分 ▼ */
.s-product-checklist__02 > dl > dt > img {
	width: auto !important;
	max-width: 220px !important; /* タイトル画像の拡大を防止 */
	height: auto;
	margin: 0 auto;
}
.s-product-checklist__02 > dl > dd {
	margin-top: 24px;
}
.s-product-checklist__02 > dl > dd > ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.s-product-checklist__02 > dl > dd > ul > li {
	position: relative;
	padding-left: 1.2em;
	line-height: 1.6;
	list-style: none !important;
}
.s-product-checklist__02 > dl > dd > ul > li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
.s-product-checklist__02 > dl > dd .note {
	position: relative;
	margin-top: 1em;
	padding-left: 1.2em;
	color: #666;
	font-size: 12px;
	line-height: 1.5;
}
.s-product-checklist__02 > dl > dd .note::before {
	content: "＊";
	position: absolute;
	left: 0;
	top: 0;
}

/* 3. s-product-point--type2（POINT見出し） */
.s-product-point--type2 {
	color: #707070;
}
.s-product-point--type2 .s-product-point--type2__no {
	display: flex;
	align-items: flex-end;
	line-height: 1;
	font-size: 24px;
	font-weight: bold;
}
.s-product-point--type2 .s-product-point--type2__no > .s-product-point--type2__no__set {
	text-align: center;
}
.s-product-point--type2 .s-product-point--type2__no > .s-product-point--type2__no__set > span {
	display: block;
	font-size: 11px;
	font-weight: bold;
}
.s-product-point--type2 .s-product-point--type2__no > .s-product-point--type2__no__set.s-product-point--type2__no__set--unique {
	position: relative;
	width: auto;
}
.s-product-point--type2 .s-product-point--type2__no > .s-product-point--type2__no__set.s-product-point--type2__no__set--unique .s-product-point--type2__no__text {
	position: absolute;
	left: 45px;
	bottom: 0;
	width: max-content;
	font-size: 15px;
	text-align: left;
}
.s-product-point--type2 > h3 {
	margin-top: 5px;
}
.s-product-point--type2 > h3 > span {
	font-size: 22px;
	font-weight: bold;
	background: linear-gradient(transparent 70%, #F8ECE7 30%);
}
/* ==========================================================
   使用方法セクション STEP レイアウト調整（#productHowtoスコープ）
   ========================================================== */

/* STEP2・STEP3：テキスト＋写真を横並びに */
#productHowto .s-product-step--type2:not(.s-product-step--type2--diagram) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
}
#productHowto .s-product-step--type2:not(.s-product-step--type2--diagram) .s-product-step--type2__head {
    flex: 1 1 260px;
    min-width: 0;
}
#productHowto .s-product-step--type2:not(.s-product-step--type2--diagram) .s-product-step--type2__detail {
    flex: 0 0 220px;
    max-width: 220px;
}
#productHowto .s-product-step--type2__detail img,
#productHowto .s-product-step--type2__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

/* STEP1：図解イラストなので全幅表示のまま */
#productHowto .s-product-step--type2--diagram {
    margin-bottom: 32px;
}
#productHowto .s-product-step--type2--diagram .c-media__content {
    max-width: 100%;
    margin-top: 12px;
}
#productHowto .s-product-step--type2--diagram .c-media__content img {
    display: block;
    width: 100%;
    height: auto;
}

/* 見出し（朝・夜／日中） */
#productHowto .s-product-step--type3__title {
    font-weight: bold;
    font-size: 16px;
    padding-left: 12px;
    border-left: 4px solid #D70146;
    margin: 8px 0 16px;
}
/* ==========================================================
   使用ステップ：リンクテキストと非リンクテキストのフォントサイズを統一
   ========================================================== */
#productStep .name a {
    font-size: 12px !important;   /* ← 確認した数値に置き換えてください */
    line-height: inherit;
    font-weight: inherit;
}