@charset "utf-8";
/* ==========================================================================
   フレグランスヘア＆ボディミスト 商品ページ（/product/hairmist/）
   Figma: LN6qxVsqS6jPvM86mgNLNL  PC=187:11（正） / SP=187:450（レイアウト参考・FVのみ正）
   共通スタイルは style-top.css を流用し、Figma との差分をこのファイルで上書きする。
   PC の数値は Figma 1440px フレームの実測値。ブレークポイントは既存ルールに合わせ 820px。
   ========================================================================== */

:root {
  --hm-gold: #eea929;
  --hm-text: #1a1a1a;
  --hm-gray: #6c6c6c;
  --hm-navy: #0c2143;
  --hm-floral: #f6b4b3;
  --hm-sweet: #83ced4;
  --hm-white: #b9a4cd;
  --hm-card-bg: #f9f9f9;
}

.hairmist {
  color: var(--hm-text);
  letter-spacing: 0;
}
.hairmist h2,
.hairmist h3,
.hairmist p,
.hairmist ul,
.hairmist li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hairmist img {
  max-width: 100%;
  height: auto;
}
.hairmist .gold {
  color: var(--hm-gold);
}
.hairmist .eng {
  font-family: "MyFontVar", "Snell Roundhand", cursive; /* font/SnellRoundhand.woff */
  font-weight: 400;
}
.hairmist .main-ttl,
.hairmist .main-ttl span {
  font-weight: 700;
}
br.pc {
  display: block;
}

/* 中央寄せ見出し（Attraction / PRODUCT / SHOP LINK） */
.hairmist .hm-ttl-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   FV（PC: 1440×808 画像 + ロゴ/商品名を重ねる / SP: 390×390 画像）
   ヘッダー(45px)は固定配置のため、その分だけ余白を取り FV を下げる（Figma: FV top = 45）
   -------------------------------------------------------------------------- */
.hairmist.mincho .section-product-header.hm-fv {
  margin-top: 45px;
  color: var(--hm-navy);
}
.hm-fv__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 808;
  overflow: hidden;
}
.hm-fv__visual picture,
.hm-fv__visual picture img {
  display: block;
  width: 100%;
  height: 100%;
}
.hm-fv__visual picture img {
  object-fit: cover;
  object-position: center;
}
.hm-fv__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 9.9%; /* 80 / 808 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.hm-fv__logo {
  width: 30.42%; /* 438 / 1440 */
  max-width: 438px;
  height: auto;
}
.hm-fv__line {
  display: block;
  width: 110px;
  height: 1px;
  background: #000; /* Figma Line 23: stroke black */
  margin-top: 16px;
  margin-bottom: 10px;
}
.hm-fv__name {
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 6px;
  text-indent: 6px; /* 字間分のセンター補正 */
  color: var(--hm-navy);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   イントロ（星空背景・キャッチコピー・3本ボトル・ボタン）  Figma 187:14 / 187:25 / 187:387 / 187:27
   -------------------------------------------------------------------------- */
.hairmist .section-product-intro.hm-intro {
  background-image: url(../img/hairmist/bg-sky.webp);
  background-size: cover;
  background-position: center 40%;
  color: #fff;
}
.hairmist .hm-intro .section-product-intro__inner {
  padding-top: 115px;
  padding-bottom: 115px;
  text-align: center;
}
.hairmist .hm-intro__copy {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.hairmist .hm-intro__copy-line {
  display: block;
}
.hairmist .hm-intro__copy .lg {
  font-size: 32px;
}
.hairmist .hm-intro__copy-line--main {
  font-size: 40px;
}

/* ボトル3本（PC: 134×336、両端は±6°回転） */
.hairmist .hm-bottles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 47px;
  margin-top: 40px;
}
.hm-bottles__item {
  width: 239px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hm-bottles__item img {
  display: block;
  width: 134px;
  height: auto;
}
.hm-bottles__item--floral img {
  transform: rotate(-6deg);
}
.hm-bottles__item--white img {
  transform: rotate(6deg);
}
.hm-bottles__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 21px;
  white-space: nowrap;
  line-height: 1;
}
.hm-bottles__jp {
  font-size: 24px;
  font-weight: 800;
}
.hm-bottles__en {
  font-size: 40px;
  margin-top: 14px;
}

/* 発売日ラベル
   Figma には存在しないが、ライティングシート D列に記載のある確定コンテンツのため追加。
   配色はページ共通のゴールド（--hm-gold）に合わせる。 */
.hairmist .hm-intro__release {
  margin-top: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
}
.hairmist .hm-intro__release::before,
.hairmist .hm-intro__release::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 20px;
  vertical-align: middle;
  background: #fff;
}
.hairmist .hm-intro__release + .hm-btns {
  margin-top: 28px;
}

/* 丸ボタン（イントロ / SHOP LINK 共通）Figma: 400×62, radius 60/80 */
.hairmist .hm-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 41px;
}
.hairmist .hm-btns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  height: 62px;
  padding: 0 16px;
  border-radius: 80px;
  background-color: var(--hm-gold);
  color: #4d4114;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Attraction 3つの魅力  Figma 195:966 / 194:965 / 187:36
   -------------------------------------------------------------------------- */
.hairmist .section-product-feature.hm-attraction {
  padding-top: 80px;
  padding-bottom: 80px;
}
.hairmist .hm-attraction .main-ttl {
  margin-bottom: 32px;
}
.hairmist .hm-attraction__lead {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.6px;
  text-align: center;
  margin: 0 0 32px;
}
.hairmist .hm-attraction__list {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.hairmist .hm-attraction__list li {
  width: calc((100% - 80px) / 3);
  text-align: center;
}
.hairmist .hm-attraction__list h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  line-height: 1;
}
.hairmist .hm-attraction__list h3 .num {
  font-size: 24px;
  font-weight: 700;
  color: var(--hm-gold);
}
.hairmist .hm-attraction__list h3 .ttl {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--hm-text);
}
.hairmist .hm-attraction__list img {
  display: block;
  width: 247px;
  height: 247px;
  margin: 0 auto;
  border-radius: 50%;
}
.hairmist .hm-attraction__list p {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  color: var(--hm-gray);
}

/* --------------------------------------------------------------------------
   Three Aromas 3つの香り  Figma 187:59 / 187:63 / 187:156 / 187:224 / 187:190
   -------------------------------------------------------------------------- */
.hairmist section.section-product-product.hm-aromas {
  background-image: url(../img/hairmist/bg-sky.webp);
  background-size: 224% auto; /* Figma: 3221px 幅の画像を 1440px 枠で表示 */
  background-position: 46% 45%;
  padding-top: 120px;
  padding-bottom: 120px;
}
.hairmist .hm-aromas .main-ttl {
  margin-bottom: 40px;
  color: var(--hm-gold);
}
.hairmist .hm-aromas .main-ttl span::before {
  background-color: var(--hm-gold);
}
/* Figma: 1・3枚目は画像が左、2枚目は画像が右 */
.hairmist ul.hm-aromas__list > li .images-wrap {
  order: 1;
}
.hairmist ul.hm-aromas__list > li .product-list__content {
  order: 2;
}
.hairmist ul.hm-aromas__list > li:nth-of-type(2) .images-wrap {
  order: 2;
}
.hairmist ul.hm-aromas__list > li:nth-of-type(2) div.product-list__content {
  order: 1;
}
.hairmist ul.hm-aromas__list {
  gap: 20px;
}
.hairmist ul.hm-aromas__list > li {
  padding: 40px 20px;
  align-items: stretch;
  border-radius: 10px;
}
.hairmist ul.hm-aromas__list > li .product-list__content {
  width: 460px;
  flex: 0 0 460px;
}
.hairmist ul.hm-aromas__list > li .images-wrap {
  width: 480px;
  flex: 0 0 480px;
  gap: 18px;
  justify-content: stretch;
}
.hairmist ul.hm-aromas__list > li .product-list__content h3 {
  gap: 6px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.hairmist ul.hm-aromas__list > li .product-list__content h3 span {
  font-size: 22px;
  line-height: 1;
}
.hairmist ul.hm-aromas__list > li .product-list__content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 14px;
}
.hairmist .hm-aromas ul.notes-ul {
  gap: 12px;
  margin-bottom: 20px;
}
.hairmist .hm-aromas ul.notes-ul li {
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--hm-gray);
}
.hairmist .hm-aromas ul.notes-ul li .notes-ul-text {
  font-size: 16.8px;
  font-weight: 800;
}
.hairmist ul.hm-aromas__list > li ul.price-ul {
  gap: 20px;
}
.hairmist ul.hm-aromas__list > li ul.price-ul li {
  gap: 14px;
  font-size: 18px;
  font-weight: 400;
  color: var(--hm-gray);
}
.hairmist ul.hm-aromas__list > li ul.price-ul li span {
  width: 88px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  border-radius: 50px;
}
/* ボトル画像枠（色付き背景30% + ボトル130×326をセンター） */
.hm-bottle-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 379px;
  background-color: rgba(246, 180, 179, 0.3);
}
.hm-bottle-box img,
.hairmist ul.product-list > li .images-wrap .hm-bottle-box img {
  display: block;
  width: 130px;
  height: auto;
}
.hm-aromas__item--sweet .hm-bottle-box {
  background-color: rgba(131, 206, 212, 0.3);
}
.hm-aromas__item--white .hm-bottle-box {
  background-color: rgba(185, 164, 205, 0.3);
}
.hairmist ul.hm-aromas__list > li .images-wrap a {
  height: 50px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 60px;
}

/* --------------------------------------------------------------------------
   Three Charms 3つの魅力（スライダー）  Figma 187:67 / 195:1184 / 195:1262 / 195:1223
   -------------------------------------------------------------------------- */
.hairmist section.section-slider-content.hm-charms {
  padding-top: 120px;
  padding-bottom: 39px; /* ドット(-35px)の下に 80px 空くよう調整 */
  overflow: hidden;
}
.hairmist .hm-charms .main-ttl {
  margin-bottom: 0;
}
.hairmist .hm-charms .section-slider-content__inner {
  margin-top: 40px;
}
.hairmist ul.hm-charms__list li.slick-slide {
  min-height: 528px;
  overflow: hidden;
  border-radius: 10px;
}
@media screen and (min-width: 841px) {
  .hairmist ul.hm-charms__list li.slick-slide {
    width: min(840px, calc(100vw - 40px));
    max-width: 840px;
    padding-right: 0;
    padding-left: 0;
  }
  .hairmist .hm-charms ul.product-list-slide .slick-list {
    margin: 0;
  }
}
.hairmist ul.hm-charms__list li.pink {
  border: 3px solid #fce9e8;
}
.hairmist ul.hm-charms__list li.green {
  border: 3px solid #daf0f2;
}
.hairmist ul.hm-charms__list li.purpl {
  border: 3px solid #eae4f0;
}
.hairmist ul.hm-charms__list .product-list__content {
  width: 470px;
  padding: 40px 30px 40px 37px; /* 枠線3px分を差し引き 40px */
  box-sizing: border-box;
}
.hairmist ul.hm-charms__list li .product-list__content h3 {
  gap: 4px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.hairmist ul.hm-charms__list li.slick-slide .product-list__content h3 span {
  font-size: 24px;
  line-height: 1;
}
.hairmist ul.hm-charms__list ul.hm-rating {
  gap: 8px;
  margin-bottom: 24px;
}
.hairmist ul.hm-charms__list li.slick-slide ul.hm-rating li {
  gap: 14px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3.2px;
  line-height: 1;
}
.hairmist ul.hm-charms__list li.slick-slide ul.hm-rating li span {
  width: 100px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 50px;
}
.hairmist ul.hm-charms__list ul.notes-ul {
  gap: 16px;
  margin-bottom: 0;
}
.hairmist ul.hm-charms__list ul.notes-ul li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hm-gray);
}
.hairmist ul.hm-charms__list ul.notes-ul li > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
.hairmist ul.hm-charms__list .images-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 370px;
  height: 100%;
  display: flex;
}
.hairmist ul.hm-charms__list .images-wrap .hm-bottle-box {
  min-height: 0;
  height: 100%;
}
.hairmist ul.hm-charms__list .images-wrap .hm-bottle-box img {
  width: 130px;
  height: auto;
  object-fit: contain;
  position: static;
}
.hairmist ul.hm-charms__list li.green .hm-bottle-box {
  background-color: rgba(131, 206, 212, 0.3);
}
.hairmist ul.hm-charms__list li.purpl .hm-bottle-box {
  background-color: rgba(185, 164, 205, 0.3);
}
/* スライダードット（Figma 187:372: 8px 円・active #EEA929 / 他 #D9D9D9） */
.hairmist .hm-charms .slick-dots {
  bottom: -39px !important;
  display: flex !important;
  justify-content: center;
  gap: 8px;
}
.hairmist .hm-charms .slick-dots li {
  margin: 0 !important;
  width: 8px !important;
  height: 8px !important;
}
.hairmist .hm-charms .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #d9d9d9;
}
.hairmist .hm-charms .slick-dots li button:before {
  content: none;
}
.hairmist .hm-charms .slick-dots li.slick-active button {
  background: var(--hm-gold);
}
/* --------------------------------------------------------------------------
   How to use ご使用方法  Figma 187:77 / 187:73〜 / 196:1347
   -------------------------------------------------------------------------- */
.hairmist section.section-product-howto.hm-howto {
  padding-top: 80px;
  padding-bottom: 120px;
}
.hairmist .hm-howto .main-ttl {
  margin-bottom: 40px;
}
.hairmist .hm-howto__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 10px;
  row-gap: 24px;
}
.hairmist .hm-howto__list > li {
  width: calc((100% - 20px) / 3);
  padding: 30px 20px;
  background-color: var(--hm-card-bg);
}
.hairmist .hm-howto__list > li h3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-text);
}
.hairmist .hm-howto__list > li h3 span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hm-gold);
}
/* ラベル（POINT 01）の右 10px から枠右端までの線。ラベル幅に追従 */
.hairmist .hm-howto__list > li h3 span::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hm-gold);
}
.hairmist .hm-howto__list > li img {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 206;
  object-fit: cover;
}
.hairmist .hm-howto__list > li p {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: var(--hm-gray);
}
/* 本文中の注釈記号（※1 等）は本文の約7割サイズ（例：本文10px→注釈7px） */
.hairmist .hm-kome,
.hairmist .section-product-feature__list li .hm-kome {
  display: inline;
  margin: 0;
  font-size: 0.7em;
}
.hairmist .section-product-feature__list li .hm-nowrap {
  display: inline;
  margin: 0;
  font-size: inherit;
}
.hairmist .hm-nowrap {
  white-space: nowrap;
}
.hairmist .hm-howto__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 2;
  color: var(--hm-gray);
}

/* --------------------------------------------------------------------------
   Features 3つのこだわり（黄色背景）  Figma 187:105 / 187:106 / 187:110
   -------------------------------------------------------------------------- */
.hairmist .section-product-feature.yellow.hm-features {
  padding-top: 80px;
  padding-bottom: 52px;
}
.hairmist .hm-features .main-ttl {
  margin-bottom: 32px;
}
.hairmist .hm-features__list {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.hairmist .hm-features__list li {
  width: calc((100% - 80px) / 3);
  text-align: center;
}
.hairmist .hm-features__list h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  line-height: 1;
  color: #fff;
}
.hairmist .hm-features__list h3 .num {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.hairmist .hm-features__list h3 .ttl {
  font-size: 32px;
  font-weight: 700;
}
.hairmist .hm-features__list img {
  display: block;
  width: 247px;
  height: 247px;
  margin: 0 auto;
  border-radius: 50%;
}
.hairmist .hm-features__list p {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  color: #fff;
}
/* 注釈は Point と同じく一覧の下に1行でまとめる */
.hairmist .hm-features__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 2;
  color: #fff;
}

/* --------------------------------------------------------------------------
   FAQ  Figma 187:135（行高 58px / Q 30px / 質問 18px / + アイコン 13px SVG）
   -------------------------------------------------------------------------- */
.hairmist section.section-product-faq.hm-faq {
  padding-top: 80px;
  padding-bottom: 80px;
}
.hairmist .hm-faq .main-ttl {
  margin-bottom: 40px;
}
.hairmist .hm-faq ul.section-product-faq__list {
  margin-top: 0;
}
.hairmist .hm-faq ul.section-product-faq__list li {
  padding: 14px 14px 14px 15px;
}
.hairmist .hm-faq ul.section-product-faq__list li .acordion-ttl {
  font-size: 18px;
  font-weight: 500;
  gap: 14px;
}
.hairmist .hm-faq ul.section-product-faq__list li .acordion-ttl .num {
  font-size: 30px;
  font-weight: 500;
  top: 0;
}
.hairmist .hm-faq ul.section-product-faq__list li .acordion-ttl::after {
  width: 13px;
  height: 13px;
  background: url(../img/hairmist/faq-plus.svg) center / 13px 13px no-repeat;
}
.hairmist .hm-faq ul.section-product-faq__list li.is-open .acordion-ttl::after {
  background: linear-gradient(currentColor, currentColor) center / 13px 1.1px no-repeat;
}
.hairmist .hm-faq ul.section-product-faq__list li > p {
  font-size: 16px;
  color: var(--hm-gray);
  padding-left: 39px;
}

/* --------------------------------------------------------------------------
   PRODUCT 商品詳細  Figma 187:376 / 187:383 / 187:380
   -------------------------------------------------------------------------- */
.hairmist section.section-product-product-cont.hm-product {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--hm-card-bg);
}
.hairmist .hm-product .main-ttl {
  margin-bottom: 32px;
}
.hairmist .hm-product .content-box {
  margin-top: 0;
}
.hairmist .hm-product .content-box ul {
  padding: 32px 40px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: var(--hm-gray);
}
.hairmist .hm-product .content-box ul a,
.hairmist .hm-product .content-box ul .popup-btn {
  font-size: 18px;
  font-weight: 700;
  color: var(--hm-gray);
  text-decoration: underline;
}
.hairmist .hm-product .content-box ul .popup-btn {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit; /* button 既定のゴシックではなく本文の明朝を継承 */
  line-height: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   SHOP LINK 商品購入  Figma 187:401 / 187:407 / 187:411
   背景：FV(PC)画像 + 白→透明グラデ + rgba(109,107,107,.5) オーバーレイ
   -------------------------------------------------------------------------- */
.hairmist section.section-link-group-area.hm-shop {
  padding-top: 80px;
  padding-bottom: 80px;
  background-image: linear-gradient(rgba(109, 107, 107, 0.5), rgba(109, 107, 107, 0.5)),
    linear-gradient(#fff, rgba(255, 255, 255, 0)),
    url(../img/hairmist/fv-pc.webp);
  background-size: 114% auto; /* Figma 187:404: 1638px 幅の画像を 1440px 枠で表示 */
  background-position: 51% 42%;
}
.hairmist .hm-shop .main-ttl {
  margin-bottom: 32px;
}
.hairmist .hm-btns--shop {
  margin-top: 0;
}
/* Coming soon（発売前）：クリック不可 */
.hairmist a.is-soon {
  pointer-events: none;
  cursor: default;
}

/* 使用上の注意リスト（商品詳細ボックス / モーダル共通）: ● を行頭に付け 1 項目 1 行 */
.hairmist .hm-caution-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hairmist .hm-caution-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--hm-gray);
}
.hairmist .hm-caution-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.85em;
  color: var(--hm-gold);
}
.hairmist .hm-product__caution {
  display: block;
  margin-top: 2px;
}
.hairmist .hm-product__caution > .gold {
  display: block;
}
/* ボックス内は文章として折り返す（●区切りのインライン表示） */
.hairmist .hm-product .content-box ul.hm-caution-list,
.hairmist section.section-product-product-cont .content-box ul.hm-caution-list {
  margin-top: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  text-align: justify;
}
.hairmist .hm-product .content-box ul.hm-caution-list li {
  display: inline;
  padding-left: 0;
  line-height: inherit;
}
.hairmist .hm-product .content-box ul.hm-caution-list li::before {
  position: static;
  margin-right: 2px;
}

/* --------------------------------------------------------------------------
   全成分・使用上の注意 モーダル（section.popup）
   -------------------------------------------------------------------------- */
.hairmist .popup .popup-cont {
  width: min(840px, calc(100% - 40px));
}
.hairmist .popup .popup-cont .hm-modal {
  padding: 40px 48px 48px;
  max-height: calc(100vh - 100px);
  color: var(--hm-text);
}
.hairmist .hm-modal__ttl {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-gold);
  border-bottom: 1px solid var(--hm-gold);
}
.hairmist .hm-modal__ttl + .hm-modal__ttl,
.hairmist .hm-modal__spec + .hm-modal__ttl,
.hairmist .hm-modal__ingredients + .hm-modal__ttl {
  margin-top: 36px;
}
.hairmist .hm-modal__spec {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hairmist .hm-modal__spec > div {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.8;
}
.hairmist .hm-modal__spec dt {
  flex: 0 0 5em;
  font-weight: 700;
  color: var(--hm-gold);
}
.hairmist .hm-modal__spec dd {
  margin: 0;
  color: var(--hm-gray);
}
.hairmist .hm-modal__ingredients {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hairmist .hm-modal__item h3 {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--hm-floral);
}
.hairmist .hm-modal__item--sweet h3 {
  background: var(--hm-sweet);
}
.hairmist .hm-modal__item--white h3 {
  background: var(--hm-white);
}
.hairmist .hm-modal__item p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--hm-gray);
  word-break: break-all;
}
.hairmist .hm-modal__caution li {
  font-size: 14px;
}
@media screen and (min-width: 821px) {
  .hairmist .hm-modal__ingredients {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .hairmist .hm-modal__item p {
    font-size: 13px;
  }
  .hairmist .hm-modal__caution {
    columns: 2;
    column-gap: 32px;
  }
  .hairmist .hm-modal__caution li {
    break-inside: avoid;
    font-size: 13px;
  }
}

/* ==========================================================================
   中間幅（821〜1140px）: 固定幅を可変にして崩れを防ぐ
   ========================================================================== */
@media screen and (max-width: 1140px) {
  .hairmist ul.hm-aromas__list > li .product-list__content {
    width: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
  }
  .hairmist ul.hm-aromas__list > li .images-wrap {
    width: calc(50% - 10px);
    flex-basis: calc(50% - 10px);
  }
  .hairmist ul.hm-charms__list .product-list__content {
    width: 58%;
  }
  .hairmist ul.hm-charms__list .images-wrap {
    width: 42%;
  }
  .hairmist ul.hm-charms__list ul.notes-ul li {
    flex-wrap: wrap;
  }
  .hairmist ul.hm-charms__list .product-list__content {
    padding-left: 27px;
    padding-right: 20px;
  }
  .hairmist ul.hm-charms__list li .product-list__content h3 {
    font-size: 28px;
  }
  .hairmist .hm-btns a {
    width: 50%;
  }
  .hm-bottles {
    gap: 24px;
  }
  .hm-bottles__item {
    width: 30%;
  }
  .hm-bottles__en {
    font-size: 34px;
  }
}
@media screen and (min-width: 821px) and (max-width: 1000px) {
  .hairmist .hm-attraction__lead br.pc,
  .hairmist .hm-attraction__list p br.pc {
    display: none;
  }
  .hairmist .hm-howto__list > li h3 {
    font-size: 20px;
  }
}

/* ==========================================================================
   SP（〜820px）: SPデザイン（187:450）をレイアウト参考にした調整。FVのみSPデザインが正。
   ========================================================================== */
@media screen and (max-width: 820px) {
  br.pc {
    display: none;
  }

  /* FV（SP: 390×390 画像 / ロゴ 286×40 / 商品名 16px） */
  .hm-fv__visual {
    aspect-ratio: 1 / 1;
  }
  .hm-fv__copy {
    top: 6.15%; /* 24 / 390 */
  }
  .hm-fv__logo {
    width: 73.3%; /* 286 / 390 */
  }
  .hm-fv__line {
    margin-top: 14px;
    margin-bottom: 6px;
  }
  .hm-fv__name {
    margin-top: 0;
    font-size: 16px;
    letter-spacing: 3.2px;
    text-indent: 3.2px;
  }

  /* イントロ */
  .hairmist .hm-intro .section-product-intro__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hairmist .hm-intro__copy {
    font-size: 24px;
    font-weight: 800;
  }
  .hairmist .hm-intro__copy .lg,
  .hairmist .hm-intro__copy-line--main {
    font-size: 24px;
  }
  .hairmist .hm-bottles {
    gap: 0;
    margin-top: 32px;
    padding: 0 10px;
  }
  .hm-bottles__item {
    width: 33.333%;
  }
  .hm-bottles__item img {
    width: 109px;
    max-width: 100%;
  }
  .hm-bottles__item--floral img,
  .hm-bottles__item--white img {
    margin-top: 10px;
  }
  /* 名称は SP デザイン同様に 2 段（中央が上段） */
  .hm-bottles__name {
    margin-top: 94px;
    margin-left: -30px;
    margin-right: -30px;
  }
  .hm-bottles__item--sweet .hm-bottles__name {
    margin-top: 59px;
  }
  .hm-bottles__jp {
    font-size: 16px;
  }
  .hm-bottles__en {
    font-size: 28px;
    margin-top: 11px;
  }
  .hairmist .hm-intro__release {
    margin-top: 32px;
    font-size: 16px;
  }
  .hairmist .hm-intro__release::before,
  .hairmist .hm-intro__release::after {
    width: 24px;
    margin: 0 20px;
  }
  .hairmist .hm-intro__release + .hm-btns {
    margin-top: 20px;
  }
  .hairmist .hm-btns {
    flex-direction: column;
    gap: 8px;
    margin-top: 33px;
  }
  .hairmist .hm-btns a {
    width: 100%;
    max-width: 320px;
    height: 42px;
    font-size: 16px;
  }

  /* Attraction */
  .hairmist .hm-attraction .main-ttl.hm-ttl-center {
    margin-left: 0;
    text-align: left;
  }
  .hairmist .hm-attraction .main-ttl {
    margin-bottom: 24px;
  }
  .hairmist .hm-attraction__lead {
    font-size: 14px;
    letter-spacing: 1.4px;
    text-align: left;
    margin-bottom: 40px;
  }
  .hairmist .hm-attraction__list {
    flex-direction: column;
    gap: 32px;
  }
  .hairmist .hm-attraction__list li {
    width: 100%;
  }
  .hairmist .hm-attraction__list p {
    text-align: left;
  }
  .hairmist .hm-attraction__list h3 {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    text-align: left;
  }
  .hairmist .hm-attraction__list h3 .num {
    font-size: 40px;
  }

  /* Three Aromas */
  .hairmist section.section-product-product.hm-aromas {
    background-size: cover;
    background-position: center;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hairmist .hm-aromas .main-ttl {
    margin-bottom: 32px;
  }
  .hairmist ul.hm-aromas__list {
    gap: 18px;
  }
  .hairmist ul.hm-aromas__list > li {
    flex-direction: column;
    gap: 24px;
    padding: 32px 20px;
  }
  .hairmist ul.hm-aromas__list > li .product-list__content,
  .hairmist ul.hm-aromas__list > li .images-wrap {
    width: 100%;
    flex: 0 0 auto;
  }
  .hairmist ul.hm-aromas__list > li .product-list__content h3 {
    gap: 4px;
    font-size: 24px;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  .hairmist ul.hm-aromas__list > li .product-list__content h3 span {
    font-size: 18px;
  }
  .hairmist ul.hm-aromas__list > li .product-list__content p {
    font-size: 14px;
    margin-bottom: 14px;
  }
  .hairmist .hm-aromas ul.notes-ul {
    gap: 8px;
    margin-bottom: 16px;
  }
  .hairmist .hm-aromas ul.notes-ul li {
    gap: 2px;
    font-size: 14px;
  }
  .hairmist .hm-aromas ul.notes-ul li .notes-ul-text {
    font-size: 14px;
  }
  .hairmist ul.hm-aromas__list > li ul.price-ul {
    gap: 10px;
  }
  .hairmist ul.hm-aromas__list > li ul.price-ul li {
    font-size: 14px;
  }
  .hairmist ul.hm-aromas__list > li ul.price-ul li span {
    height: 23px;
    font-size: 14px;
  }
  .hm-bottle-box {
    min-height: 0;
    aspect-ratio: 310 / 263;
  }
  .hm-bottle-box img,
  .hairmist ul.product-list > li .images-wrap .hm-bottle-box img {
    width: 27%; /* 84 / 310 */
  }
  .hairmist ul.hm-aromas__list > li .images-wrap a {
    height: 40px;
    font-size: 16px;
    max-width: 298px;
  }
  /* SPは「テキスト → 画像 → ボタン」の順（2枚目もPCの左右入替を解除） */
  .hairmist ul.hm-aromas__list > li div.product-list__content,
  .hairmist ul.hm-aromas__list > li:nth-of-type(2) div.product-list__content {
    order: 1;
  }
  .hairmist ul.hm-aromas__list > li .images-wrap,
  .hairmist ul.hm-aromas__list > li:nth-of-type(2) .images-wrap {
    order: 2;
  }

  /* Three Charms（SP: 画像上 350×238 → テキスト） */
  .hairmist section.section-slider-content.hm-charms {
    padding-top: 80px;
    padding-bottom: 39px;
  }
  .hairmist .hm-charms .section-slider-content__inner {
    margin-top: 42px;
  }
  .hairmist ul.hm-charms__list li.slick-slide {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
  }
  /* SP は 1 枚表示（Figma SP: カード幅 350 = 画面幅 - 20px×2）。隣カードのチラ見えを出さない */
  .hairmist .hm-charms ul.product-list-slide .slick-list {
    overflow: hidden;
  }
  .hairmist ul.hm-charms__list .images-wrap {
    position: relative;
    width: 100%;
    height: auto;
    order: 1;
  }
  .hairmist ul.hm-charms__list .images-wrap .hm-bottle-box {
    aspect-ratio: 350 / 238;
    height: auto;
  }
  .hairmist ul.hm-charms__list .images-wrap .hm-bottle-box img {
    width: 22%; /* 77 / 350 */
  }
  .hairmist ul.hm-charms__list .product-list__content {
    width: 100%;
    order: 2;
    padding: 32px 20px 28px;
  }
  .hairmist ul.hm-charms__list li .product-list__content h3 {
    gap: 4px;
    font-size: 24px;
    padding-bottom: 14px;
    margin-bottom: 20px;
  }
  .hairmist ul.hm-charms__list li.slick-slide .product-list__content h3 span {
    font-size: 24px;
  }
  .hairmist ul.hm-charms__list ul.hm-rating {
    margin-bottom: 24px;
  }
  .hairmist ul.hm-charms__list ul.notes-ul {
    gap: 6px;
  }
  .hairmist ul.hm-charms__list ul.notes-ul li {
    flex-direction: column;
    gap: 0;
    font-size: 16px;
  }
  .hairmist ul.hm-charms__list ul.notes-ul li .notes-ul-text {
    font-size: 14px;
    font-weight: 800;
  }

  /* How to use */
  .hairmist section.section-product-howto.hm-howto {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hairmist .hm-howto .main-ttl {
    margin-bottom: 32px;
  }
  .hairmist .hm-howto__list {
    flex-direction: column;
    row-gap: 24px;
  }
  .hairmist .hm-howto__list > li {
    width: 100%;
    padding: 30px 15px;
  }
  .hairmist .hm-howto__list > li h3 {
    font-size: 24px;
  }
  .hairmist .hm-howto__note {
    margin-top: 20px;
  }

  /* Features */
  .hairmist .section-product-feature.yellow.hm-features {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hairmist .hm-features__list {
    flex-direction: column;
    gap: 24px;
  }
  .hairmist .hm-features__list li {
    width: 100%;
  }
  .hairmist .hm-features__list h3 {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  .hairmist .hm-features__list h3 .num {
    font-size: 40px;
  }
  .hairmist .hm-features__list h3 .ttl {
    font-size: 24px;
  }
  .hairmist .hm-features__note {
    margin-top: 20px;
  }

  /* FAQ */
  .hairmist .hm-faq .main-ttl {
    margin-bottom: 32px;
  }
  .hairmist .hm-faq ul.section-product-faq__list li .acordion-ttl {
    font-size: 16px;
    line-height: 1.8;
  }
  .hairmist .hm-faq ul.section-product-faq__list li > p {
    font-size: 14px;
    line-height: 1.8;
    padding-left: 0;
  }

  /* PRODUCT */
  .hairmist .hm-product .content-box ul {
    padding: 32px 20px;
    font-size: 14px;
  }
  .hairmist .hm-product .content-box ul a,
  .hairmist .hm-product .content-box ul .popup-btn {
    font-size: 14px;
  }
  .hairmist .hm-caution-list li {
    font-size: 12px;
  }
  .hairmist .popup .popup-cont {
    width: calc(100% - 24px);
  }
  .hairmist .popup .popup-cont .hm-modal {
    padding: 28px 20px 32px;
    max-height: calc(100vh - 90px);
  }
  .hairmist .hm-modal__ttl {
    font-size: 18px;
  }
  .hairmist .hm-modal__spec > div {
    font-size: 14px;
  }
  .hairmist .hm-modal__item p,
  .hairmist .hm-modal__caution li {
    font-size: 13px;
  }

  /* SHOP LINK（SPも PC の FV 画像を背景に使用） */
  .hairmist section.section-link-group-area.hm-shop {
    background-size: cover;
    background-position: center;
  }
  .hairmist .hm-shop .main-ttl {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 400px) {
  .hm-bottles__en {
    font-size: 24px;
  }
  .hm-bottles__jp {
    font-size: 14px;
  }
  .hairmist .hm-intro__copy {
    font-size: 22px;
  }
  .hairmist .hm-intro__copy .lg,
  .hairmist .hm-intro__copy-line--main {
    font-size: 22px;
  }
  .hairmist .hm-howto__list > li h3 {
    font-size: 21px;
  }
}

/* ナビ：PRODUCTS アコーディオン（ヘアミルク／ヘア＆ボディミスト） */
.hm-navProducts {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: opacity .5s;
}
.hm-navProducts:hover { opacity: .7; }
.hm-navProducts span {
	display: block;
	font-size: 12px;
	font-weight: 400;
}
.hm-navProducts i {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	vertical-align: .1em;
}
.hm-navProducts i::before,
.hm-navProducts i::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform .25s;
}
.hm-navProducts i::after { transform: rotate(90deg); }
.hm-navProducts[aria-expanded="true"] i::after { transform: rotate(0); }
.navList li .hm-navSub {
	height: 0;
	padding: 0 0 0 2px;
	overflow: hidden;
	opacity: 0;
	transition: height .35s ease, opacity .35s ease;
}
.navList li .hm-navSub.is-open { opacity: 1; }
.navList li .hm-navSub li:first-child { padding-top: 20px; }
.navList li .hm-navSub li {
	margin: 0;
	padding: 6px 0;
}
.navList li .hm-navSub li a {
	font-size: 18px;
	font-weight: 500;
}
.navList li .hm-navSub li a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	background: currentColor;
	vertical-align: .25em;
}