@charset "UTF-8";
/* =========================
Reset
========================= */

/* LP内だけにbox-sizingを適用 */
#container,
#container *,
#container *::before,
#container *::after {
  box-sizing: border-box;
}

/* ブラウザ標準の外側余白だけ消す */
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ブラウザ標準marginの影響を受ける要素だけリセット */
#container p,
#container h1,
#container h2,
#container h3,
#container h4,
#container h5,
#container h6,
#container ul,
#container ol,
#container dl,
#container dd {
  margin: 0;
}

/* メディア要素のリセットもLP内だけ */
#container img,
#container picture,
#container video,
#container canvas,
#container svg {
  display: block;
  max-width: 100%;
}

/* フォーム部品のリセットもLP内だけ */
#container input,
#container button,
#container textarea,
#container select {
  font: inherit;
}

#container p,
#container h1,
#container h2,
#container h3,
#container h4,
#container h5,
#container h6 {
  overflow-wrap: break-word;
}

/* =========================
ベース
========================= */
#container ul {
  padding: 0;
}

#container ul,
#container li {
  list-style: none;
}

#container img,
#container video {
  height: auto;
  margin: 0 auto;
}

#container a {
  text-decoration: none;
}

body {
  background: #fff;
}

#container {
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

#container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  position: relative;
}
#container > p { line-height: 0; }

/* =========================
セクション
========================= */
#container .sec {
  position: relative;
  line-height: 0;
}

#container .sec__bg {
  width: 100%;
}

#container .ov {
  position: absolute;
  margin: 0;
}

/* =========================
スクロール出現アニメーション
========================= */
#container .reveal,
#container .reveal-left,
#container .reveal-right,
#container .reveal-scale,
#container .reveal-down,
#container .reveal-up,
#container .pop-out,
#container .spin-in { opacity: 0; will-change: opacity, transform; }

#container .reveal        { transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
#container .reveal-left   { transform: translateX(-40px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
#container .reveal-right  { transform: translateX(40px);  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
#container .reveal-scale  { transform: scale(.85);        transition: opacity .8s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
#container .reveal-down   { transform: translateY(-60px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
#container .reveal-up     { transform: translateY(60px);  transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1); }

#container .reveal.is-visible,
#container .reveal-left.is-visible,
#container .reveal-right.is-visible,
#container .reveal-scale.is-visible,
#container .reveal-down.is-visible,
#container .reveal-up.is-visible { opacity: 1; transform: none; }

#container .pop-out { transform: translateY(90px) scale(.72); transition: opacity .5s ease, transform 1s cubic-bezier(.2,1.5,.4,1); }
#container .pop-out.is-visible { opacity: 1; transform: translateY(0) scale(1); }

#container .spin-in { transform: translateX(25%) rotate(90deg); transition: opacity .6s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
#container .spin-in.is-visible { opacity: 1; transform: translateX(0) rotate(0deg); }

#container .reveal-delay1 { transition-delay: .12s; }
#container .reveal-delay2 { transition-delay: .24s; }
#container .reveal-delay3 { transition-delay: .36s; }
#container .reveal-delay4 { transition-delay: .48s; }

#container .float { animation: hmexFloatY 2.0s ease-in-out infinite; }
@keyframes hmexFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* =========================
マーキー（自動横スクロール）
========================= */
#container .marquee { overflow: hidden; width: 100%; }
#container .marquee__track { display: flex; width: max-content; animation: hmexMarquee 30s linear infinite; }
#container .marquee__track img { max-width: none; flex: 0 0 auto; margin: 0; }
@keyframes hmexMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================
カルーセル
========================= */
#container .carousel { width: 100%; }
#container .carousel__viewport { overflow: hidden; width: 100%; }
#container .carousel__track { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
#container .carousel__slide { flex: 0 0 100%; min-width: 0; }
#container .carousel__slide img { width: auto; }

#container .carousel--peek .carousel__viewport { overflow: visible; }
#container .carousel--peek .carousel__slide {
  transition: filter .5s ease, opacity .5s ease, transform .5s ease;
  filter: blur(2px);
  opacity: .8;
  transform: scale(.93);
}
#container .carousel--peek .carousel__slide.is-current {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

#container .carousel-arrow {
  padding: 0; border: none; background: none; cursor: pointer;
  line-height: 0; z-index: 6;
}
#container .carousel-arrow img { width: 100%; }

/* =========================
CTA
========================= */
#container .discount { position: relative; line-height: 0; }
#container .discount-button { position: absolute; bottom: 4%; left: 0; right: 0; width: 92%; margin: auto; }
#container .discount-button.small { width: 100%; margin: 0 auto; display: block; }

#container .poyopoyo { animation: hmexPoyopoyo 1.8s ease-in-out infinite; }
@keyframes hmexPoyopoyo {
  0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70%          { transform: scale(.95); }
}

/* =========================================================
アセット
========================================================= */

#container .ov--fvBadges {
  top: 2%; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center;
}
#container .ov--fvBadges img { width: 43%; margin: 0; }
#container .ov--fvBadges img + img { margin-left: 3%; }

#container .fv-slider {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
}
#container .fv-slide {
  position: absolute;
  margin: 0;
  transition: left 1s cubic-bezier(.65,0,.35,1), top 1s cubic-bezier(.65,0,.35,1), width 1s cubic-bezier(.65,0,.35,1);
}
#container .fv-slide--no-transition { transition: none !important; }
#container .fv-slide--left        { top: 5%;   left: -28%; width: 51%;   z-index: 2; }
#container .fv-slide--center      { top: 2.5%; left: 21.5%; width: 60.5%; z-index: 3; }
#container .fv-slide--right       { top: 5%;   left: 81%;   width: 50%;   z-index: 2; }
#container .fv-slide--exit-left   { top: 5%;   left: -90%;  width: 51%;   z-index: 1; }
#container .fv-slide--enter-right { top: 5%;   left: 140%;  width: 50%;   z-index: 1; }

#container .ov--fvBottle { top: 30.5%; left: 25%; width: 39%; z-index: 4; }

#container .ov--evoCarousel { top: 24%; left: 2.5%; width: 99.5%; z-index: 2; }
#container .ov--evoPrev { top: 57.4%; left: 0;  width: 7.7%; height: 6.9%; display: flex; align-items: center; justify-content: center; }
#container .ov--evoNext { top: 57.4%; right: 0; width: 7.7%; height: 6.9%; display: flex; align-items: center; justify-content: center; }
#container .ov--evoPrev img, #container .ov--evoNext img { width: 100%; }

#container .ov--useBottle { top: 5%; right: -55%; width: 100%; }

#container .ov--stepPhotos { top: 77%; left: 0; width: 170%; }
#container .marquee__track--stepPhotos { animation-duration: 16s; }
#container .marquee__track--stepPhotos img { width: 1312.5px; }

#container .ov--usersGrid { top: 38%; left: 0; width: 100%; }
#container .marquee__track--users { animation-duration: 15s; }
#container .marquee__track--users img { width: 975px; }

#container .ov--no1 { top: 14%; left: 6%; width: 90%; }

#container .ov--100man { top: 1%;  left: 5.5%; width: 90%; }
#container .ov--strip { top: 80%; left: 7.3%;  width: 85.4%; }
#container .marquee__track--strip { animation-duration: 10s; }
#container .marquee__track--strip img { width: 750px; }

#container .ov--mondeBottle { top: 53%; left: 35%; width: 26%; }
#container .ov--mondeRow1 { top: 81.5%; left: 6%;  width: 30%; }
#container .ov--mondeRow2 { top: 81.5%; left: 25%; width: 30%; }
#container .ov--mondeRow3 { top: 81.5%; left: 45%; width: 30%; }
#container .ov--mondeRow4 { top: 81.5%; left: 64%; width: 30%; }

#container .ov--satBall   { top: 20%; left: 4%;  width: 95%; z-index: 2; }
#container .ov--satPhoto1 { top: 19%; left: -2%; width: 35%; z-index: 3; }
#container .ov--satBottle { top: 62%; left: 2%; width: 25%; z-index: 4; }
#container .ov--satPhoto2 { top: 72%; left: 57%; width: 40%; z-index: 4; }

#container .ov--expertCarousel { top: 35%; left: 8%;  width: 84%; z-index: 2; }
#container .ov--expertPrev, #container .ov--expertNext {
  top: 61%; width: 8%; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
#container .ov--expertPrev { left: -1%; }
#container .ov--expertNext { right: -2.2%; }
#container .ov--scissors       { top: 85%; right: -5%; width: 30%; z-index: 6; }

#container .ov--mediaLogos { top: 40%; left: 0; width: 100%; }
#container .marquee__track--media { animation-duration: 24s; }
#container .marquee__track--media img { width: 1125px; }

#container .ov--voice1 { top: 11%; left: 6%; width: 88%; }
#container .ov--voice2 { top: 40%; left: 6%; width: 88%; }
#container .ov--voice3 { top: 69%; left: 6%; width: 88%; }

#container .ov--bottleTopRight { top: 2%; right: 4%; width: 12%; }

#container .ov--worry1 { top: 40%; left: -4%;  width: 35%; }
#container .ov--worry2 { top: 35%; right: -4%; width: 36%; }
#container .ov--worry3 { top: 65%; left: 4%;  width: 37%; }
#container .ov--worry4 { top: 65%; right: 0%; width: 36%; }

#container .ov--hematinLabel { top: 26%; left: 15%; width: 70%; }

#container .ov--hematinBall { top: 4%; left: 8%; width: 30%; }

#container .ov--repairVideo { top: 47%; left: 5%; width: 90%; height: 45%; object-fit: cover; }

#container .ov--evo1TextA  { top: 26%; left: 10%;  width: 78%; z-index: 3; }
#container .ov--evo1TextB  { top: 35%; left: 13%; width: 75%; z-index: 3; }
#container .ov--evo1Ball   { top: 44%;   left: 0%;  width: 100%; z-index: 3; }
#container .ov--evo1Video  { top: 83%;   left: 2%;  width: 68%; object-fit: cover; z-index: 2; }
#container .ov--evo1Bottle1{ top: 80%;   left: 62%; width: 24%; z-index: 4; }
#container .ov--evo1Bottle2{ top: 82%;   left: 73%; width: 32%; z-index: 5; }

#container .ov--evo2TextA { top: 15%; left: 19%; width: 60%; }
#container .ov--evo2TextB { top: 21%;   left: 8%;  width: 82%; }
#container .ov--evo2TextC { top: 30%;   left: 13%; width: 74%; }

#container .ov--evo3TextA { top: 4%; left: 18%; width: 67%; }
#container .ov--evo3TextB { top: 9%; left: 7%; width: 90%; }

#container .ov--peakBottle { top: 36%; left: 28%;  width: 40%; z-index: 4; }
#container .ov--peakBall1  { top: 42%; left: 3%;   width: 40%; z-index: 3; }
#container .ov--peakBall2  { top: 68%; left: 5%;  width: 45%; z-index: 3; }
#container .ov--peakBall3  { top: 60%; right: 0%;  width: 43%; z-index: 3; }

#container .ov--wCard1 { top: 19%; left: 6%; width: 88%; }
#container .ov--wCard2 { top: 62%; left: 6%; width: 88%; }

#container .ov--wSalonText { top: 65%; left: 0%; width: 100%; }

#container .ov--freeBottle { top: 36%; left: -13%; width: 45%; }

#container .ov--stepCarousel { top: 33%; left: 10%; width: 80%; }
#container .ov--stepPrev, #container .ov--stepNext {
  top: 56%; width: 10%; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
#container .ov--stepPrev { left: 0; }
#container .ov--stepNext { right: 0; }

/* =========================
Q&A
========================= */
#container .question { background: #f4f2ec; padding: 50px 0 60px; text-align: left; }
#container .question h2 { margin: 0 auto 34px; text-align: center; }
#container .question h2 img { width: 30%; max-width: 220px; margin: 0 auto; }
#container .question dl { width: 88%; max-width: 660px; margin: 0 auto; }
#container .qa_list { background: #fff; border-radius: 8px; padding: 24px 26px 26px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
#container .qa_list:last-child { margin-bottom: 0; }
#container .qa_list dt { font-size: 19px; font-weight: bold; line-height: 1.6; color: #1e3b28; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed #c8c3b4; }
#container .qa_list dt .q_bg { display: inline-block; background: #1e3b28; color: #fff; font-size: 13px; font-weight: bold; letter-spacing: .08em; line-height: 1; padding: 7px 14px; margin-bottom: 12px; border-radius: 3px; }
#container .qa_list dd { font-size: 16px; line-height: 1.85; color: #4a4a4a; }
@media screen and (max-width: 750px) {
  #container .marquee__track--stepPhotos img { width: 175vw; }
  #container .marquee__track--users img { width: 130vw; }
  #container .marquee__track--strip img { width: 100vw; }
  #container .marquee__track--media img { width: 150vw; }

  #container .question { padding: 8vw 0 10vw; }
  #container .question h2 { margin-bottom: 5vw; }
  #container .qa_list { padding: 4.5vw 5vw 5vw; margin-bottom: 3vw; }
  #container .qa_list dt { font-size: 4.1vw; padding-bottom: 3.2vw; margin-bottom: 3.2vw; }
  #container .qa_list dt .q_bg { font-size: 2.9vw; padding: 1.6vw 3vw; margin-bottom: 2.4vw; }
  #container .qa_list dd { font-size: 3.5vw; }
}

/* =========================
LP内フッター
========================= */
#container #lp-footer {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 0 40px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #666;
}

#container #lp-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#container #lp-footer li {
  display: inline-block;
  margin: 0 10px;
}

#container #lp-footer a {
  color: #000;
  font-size: 11px;
}

#container #lp-footer a:hover {
  opacity: 0.7;
}

/* =========================
追従バナー
========================= */
#container .sticky-cta {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100%;
  max-width: 750px;
  margin: 0;
  z-index: 999;
  transform: translate(-50%, 100%);
  transition: transform .4s ease;
}
#container .sticky-cta.is-shown { transform: translate(-50%, 0); }
#container .sticky-cta a { display: block; line-height: 0; }
#container .sticky-cta img { width: 100%; }

/* =========================
全額返金保証モーダル
========================= */
#container .guarantee-trigger {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: none; line-height: 0; cursor: pointer;
}
#container .guarantee-trigger img { width: 100%; }

#container .guarantee-modal {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
}
#container .guarantee-modal.is-open { display: block; }
#container .guarantee-modal__overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, .6);
}
#container .guarantee-modal__panel {
  position: fixed; z-index: 1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 40px); max-width: 700px;
  margin: 0;
  max-height: calc(100vh - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
#container .guarantee-modal__close-wrap {
  position: sticky; top: 0; height: 0; z-index: 2;
}
#container .guarantee-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; padding: 0; border: none; border-radius: 4px;
  background: #1e3b28; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
}
#container .guarantee-modal__body { padding: 40px 32px; text-align: left; }
#container .guarantee-modal__title {
  font-size: 20px; font-weight: bold; color: #1e3b28;
  text-align: center; margin: 0 0 28px;
}
#container .guarantee-modal__heading {
  font-size: 16px; font-weight: bold; color: #1e3b28;
  margin: 24px 0 8px;
}
#container .guarantee-modal__heading:first-of-type { margin-top: 0; }
#container .guarantee-modal__text { font-size: 14px; line-height: 1.85; color: #4a4a4a; }

/* =========================
PC
========================= */
@media screen and (min-width: 751px) {
  #container { width: 750px; box-shadow: 0 0 20px rgba(0,0,0,.2); }
}

/* =========================
TV紹介
========================= */

/* TV紹介：添付画像の元サイズ 750 × 1300px */
#container .hmex-tv {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

/* 透過部分より少し広く動画を配置し、隙間を防ぐ */
#container .hmex-tv__screen {
    position: absolute;
    z-index: 1;
    left: 6.533333%;   /* 49 / 750 */
    top: 23.153846%;   /* 301 / 1300 */
    width: 87.066667%; /* 653 / 750 */
    height: 28.384615%; /* 369 / 1300 */
    overflow: hidden;
    background: #000;
}

#container .hmex-tv__video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

/* PNGを動画より手前に重ねる */
#container .hmex-tv__frame {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    pointer-events: none;
}