@charset "UTF-8";

/*============================================================
  初期化 / 共通
============================================================*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.lp_main {
  max-width: 750px;
  margin: 0 auto;
  overflow-x: hidden;
}

.lp_main img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.lp_main p,
.lp_main h1,
.lp_main h2,
.lp_main h3,
.lp_main dt,
.lp_main dd {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

.lp_main a {
  display: block;
  text-decoration: none;
  transition: all ease .3s;
}

.lp_main a:hover {
  filter: brightness(1.1);
}

.lp_main .p-box {
  position: relative;
}

.lp_main .anime {
  position: absolute;
}

.lp_main .front {
  z-index: 10;
}

.lp_main .mt {
  margin-top: -4px;
}
/*============================================================
  共通アニメーション定義
============================================================*/
/* 縦に伸びる棒（下端基準） */
.io_growUp {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.io_growUp.is_active {
  -webkit-animation: growUp .9s ease-out forwards;
  animation: growUp .9s ease-out forwards;
}
@-webkit-keyframes growUp {
  from { -webkit-transform: scaleY(0); }
  to   { -webkit-transform: scaleY(1); }
}
@keyframes growUp {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* 横に伸びる棒（左端基準） */
.io_growRight {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.io_growRight.is_active {
  -webkit-animation: growRight .9s ease-out forwards;
  animation: growRight .9s ease-out forwards;
}
@-webkit-keyframes growRight {
  from { -webkit-transform: scaleX(0); }
  to   { -webkit-transform: scaleX(1); }
}
@keyframes growRight {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 上からドロップイン（No.10「実は」など） */
.io_dropIn {
  opacity: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}
.io_dropIn.is_active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* 下からスライドアップ（No.10 三角パーツ など） */
.io_slideUp {
  opacity: 0;
  -webkit-transform: translateY(80px);
  transform: translateY(80px);
}
.io_slideUp.is_active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* バウンスイン：規定より大きくなってから戻る（No.15） */
.io_bounceIn {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.io_bounceIn.is_active {
  -webkit-animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation: bounceIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@-webkit-keyframes bounceIn {
  0%   { opacity: 0; -webkit-transform: scale(0); }
  60%  { opacity: 1; -webkit-transform: scale(1.12); }
  100% { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* 上下フロート：常時ループ（No.6 / 各要素 animation-delay でずらす） */
.floatY {
  -webkit-animation: floatY 3s ease-in-out infinite;
  animation: floatY 3s ease-in-out infinite;
}
@-webkit-keyframes floatY {
  0%, 100% { -webkit-transform: translateY(0); }
  50%      { -webkit-transform: translateY(-8px); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/*============================================================
  コンテンツ（ページ順）
  ※ width は画像実寸 / 750。top・left は仮置き（要調整）
============================================================*/


/* ===== fv（縦書きテキスト2列・1列ずつ表示） ===== */
.lp_main .fv-anime01 {
  width: calc(72/750*100%);
  top: 6.8%;
  left: 79%;
}
.lp_main .fv-anime02 {
  width: calc(78/750*100%);
    top: 7.3%;
    left: 68.65%;
}
.lp_main .fv-offer {
  position:  absolute;
  width: calc(714/750*100%);
  top: 13%;
  left: 50%;
  transform: translateX(-50%);

}

/* ===== approach ===== */
.lp_main .approach-front01 {
  width: calc(277/750*100%);
  top: 66.8%;
  left: 7.5%;
}
.lp_main .approach-front02 {
  width: calc(280/750*100%);
  top: 30.5%;
  left: 57%;
}
/* 縦書き右列 */
.lp_main .approach-anime01 {
  width: calc(126/750*100%);
  top: 11.3%;
  left: 74.3%;
}
/* 縦書き左列 */
.lp_main .approach-anime02 {
  width: calc(119/750*100%);
  top: 29.6%;
  left: 59.7%;
}
/* ×マーク（approach-04 の動画2本の境目・中央／要微調整） */
.lp_main .approach-front03 {
  width: calc(60/750*100%);
  top: 46.5%;
  left: 46%;
}
/* AI動画2本（approach-04 内）：同じ枠に重ねて clip-path で半分ずつ表示。×(front03)を上に重ねる */
.lp_main .approach-mov {
  position: absolute;
  top: 32%;
  bottom: 14%;
  left: calc(60/750*100%);
  z-index: 1;
  overflow: hidden;
  width: calc(630/750*100%);
  height: min(calc(360/750*100vw),360px);
}
.lp_main .approach-mov video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 斜め分割（ほぼ垂直の「＼」斜線）：左=mov01（ラメラ・下に広がる）/ 右=mov02（ナイアシン・上に広がる）
   境目は 上42% → 下58% を結ぶ斜線で、中央(50%)に×が重なる。
   角度調整：2値の差を大きく＝寝かせる／小さく＝立てる（垂直に戻すなら 50/50） */
.lp_main .approach-mov01 {
  -webkit-clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
}
.lp_main .approach-mov02 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 60% 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 60% 100%);
}
/* YouTube動画（approach-01 内・16:9） */
.lp_main .approach-movie {
  position: absolute;
  width: calc(620/750*100%);
  top: 54%;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 16 / 9;
}
.lp_main .approach-movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== review（SNS投稿のハッシュタグ／上下フロート・遅延ずらし No.6） ===== */
.lp_main .sns-anime01 {
  width: calc(238/750*100%);
  top: 38.3%;
  left: 3.9%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.lp_main .sns-anime02 {
  width: calc(355/750*100%);
  top: 38.3%;
  left: 49.7%;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
}
.lp_main .sns-anime03 {
  width: calc(332/750*100%);
  top: 86%;
  left: 2.9%;
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}
.lp_main .sns-anime04 {
  width: calc(286/750*100%);
  top: 86%;
  left: 58.6%;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

/* ===== offer（CVボタンは中央寄せの通常ブロック） ===== */
.lp_main .offer .btn-offer {
  width: calc(655/750*100%);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

}

/* ===== onayami ===== */
/* 上部 お悩み吹き出し3点（onayami-02 内） */
.lp_main .onayami-anime01 {
  width: calc(429/750*100%);
    top: 2.8%;
    left: 40%;
}
.lp_main .onayami-anime02 {
  width: calc(431/750*100%);
  top: 30%;
  left: 3.6%;
}
.lp_main .onayami-anime03 {
  width: calc(312/750*100%);
    top: 56.9%;
    left: 45%;
}
/* 三角パーツ（下からスライドアップ） */
.lp_main .onayami-anime05 {
  width: calc(660/750*100%);
  left: calc(50/750*100%);
  bottom: 0;
  z-index: 0;
}
/* 「実は」（三角の上） */
.lp_main .onayami-anime04 {
  width: calc(125/750*100%);
  top: 90.6%;
  left: 42.4%;
  z-index: 1;
}
/* グラフ（onayami-04 内：棒が伸びる→ラベル後出し） */
/* 約2倍 */
.lp_main .onayami-anime06 {
  width: calc(127/750*100%);
  top: 54.9%;
  left: 21.7%;
}
/* 約3倍 */
.lp_main .onayami-anime08 {
  width: calc(127/750*100%);
  top: 56.4%;
  left: 51.3%;
}
/* 棒（男性・蒸散水分量）：下端=軸にピン留め、growUpで上へ伸びる */
.lp_main .onayami-anime07 {
  width: calc(65/750*100%);
  bottom: 10.2%;
  left: 37.9%;
}
/* 男性ラベル */
.lp_main .onayami-anime07-front {
  width: calc(45/750*100%);
  top: 84.5%;
  left: 39.2%;
}
/* 棒（男性・皮脂量）：下端=軸にピン留め、growUpで上へ伸びる */
.lp_main .onayami-anime09 {
  width: calc(65/750*100%);
  bottom: 10.4%;
  left: 67.1%;
}
/* 男性ラベル */
.lp_main .onayami-anime09-front {
  width: calc(45/750*100%);
  top: 84.5%;
  left: 68.4%;
}
/* しかも！（onayami-06 上端／バウンスイン） */
.lp_main .onayami-anime10 {
  width: calc(214/750*100%);
  top: -6%;
  left: 35.8%;
}
/* 言い訳吹き出し2点（onayami-07 内へ移動） */
.lp_main .onayami-anime11 {
  width: calc(367/750*100%);
  top: 11.4%;
  left: 0%;
}
.lp_main .onayami-anime12 {
  width: calc(389/750*100%);
    top: 20.3%;
    left: 48.3%;
}
/* カウントアップ 87%（onayami-06 内・Noto Serif・2桁幅を事前確保） */
.lp_main .onayami-count {
  position: absolute;
  top: 46.5%;
  left: 49%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: #000;
  line-height: 1;
  white-space: nowrap;
}
.lp_main .onayami-count .count-num {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  font-size: min(calc(163/750*100vw), 163px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.lp_main .onayami-count .count-unit {
  font-size: min(calc(75/750*100vw), 75px);
  letter-spacing: -0.1em;
    margin-left: -0.4em;
}
.lp_main .barony {
  background-color: #123B67;
}
.lp_main .barony  video{
  width: 100%;
  height: auto;
  font-size: 0;
  line-height: 0;
  display: block;
}

.lp_main .news .news-mov {
  position: absolute;
  width: calc(547/750*100%);
  height: auto;
  top:28%;
  left:4.2%;
}

/* ===== point系オーバーレイ（クラス名=スライス名・所属はPSD座標で補正済み） ===== */
/* 「本格派 × 手軽さ」→ news-04 内 */
.lp_main .point-anime01 {
  width: calc(301/750*100%);
top: 16.2%;
    left: 7.2%;
}
.lp_main .point-anime02 {
  width: calc(268/750*100%);
top: 25.4%;
    left: 53.2%;
}
/* 「本格派 × 手軽さ」：キラッと光が横切る（yuntu風スイープ・時間差ループ） */
.lp_main .point-anime01,
.lp_main .point-anime02 {
  overflow: hidden;
}
.lp_main .point-anime01::before,
.lp_main .point-anime02::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
}
.lp_main .point-anime01.is_active::before {
  -webkit-animation: shineSweep 4s ease-in-out infinite;
  animation: shineSweep 4s ease-in-out infinite;
}
.lp_main .point-anime02.is_active::before {
  -webkit-animation: shineSweep 4s ease-in-out 2s infinite;
  animation: shineSweep 4s ease-in-out 2s infinite;
}
/* 横切る→次まで待つ（先頭22%でスイープ、残りは画面外で待機） */
@-webkit-keyframes shineSweep {
  0%   { left: -75%; }
  22%  { left: 125%; }
  100% { left: 125%; }
}
@keyframes shineSweep {
  0%   { left: -75%; }
  22%  { left: 125%; }
  100% { left: 125%; }
}
/* 「10倍配合」黄バー（growRight）＋前面 → point-01 内 */
.lp_main .point-anime03 {
  width: calc(245/750*100%);
    top: 88%;
    left: 22%;
}
.lp_main .point-anime03-front {
  width: calc(411/750*100%);
  top: 72.5%;
  left: 23.2%;
}
/* 縦書き「5つのケアがこれ1つで完了」3列 → point-12 内 */
.lp_main .point-anime04 {
  width: calc(46/750*100%);
  top: 37.6%;
  left: 87.7%;
}
.lp_main .point-anime05 {
  width: calc(46/750*100%);
  top: 41.6%;
  left: 80.2%;
}
.lp_main .point-anime06 {
width: calc(149 / 750 * 100%);
    top: 53%;
    left: 60.2%;
}

/* ===== faq（アコーディオン） ===== */
.lp_main .faq .accordion {
  width: calc(690/750*100%);
  margin: 0 auto 6%;
}
.lp_main .faq .accordion dt {
  position: relative;
  cursor: pointer;
}
.lp_main .faq .accordion dt:after {
  content: '';
  display: block;
  width: calc(23/690*100%);
  padding-top: calc(13/690*100%);
  background: url(../img/faq-acc-icon.png) center/cover no-repeat;
  position: absolute;
  top: 50%;
  right: 4%;
  z-index: 2;
  transform: translateY(-50%) rotate(0deg);
  transition: transform ease .3s;
  transform: rotate(180deg);
}
.lp_main .faq .accordion dt.selected:after {
  transform: translateY(-50%) rotate(0deg);
}
.lp_main .faq .accordion dd {
  display: none;
  padding-bottom: 5%;
}

.lp_main .component {
  margin-top: 10%;
}
/*============================================================
  追従ボタン
============================================================*/
.bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
.bl_floatArea_inner {
  max-width: 714px;
  margin: auto;
  box-sizing: border-box;
  padding-bottom: 1%;
}


/*============================================================
  フッター
  ・黒ボックスは画面幅に追従（width:100%）
  ・内側は max-width:750px のボックス
  ・フォントは比較関数 min(calc(設計px/750*100vw), 設計px) で可変
  ・遷移先は未定（href="#" 仮）／フォント=游ゴシックMedium・色#fff・18px（PSD準拠）
============================================================*/
.lp-footer {
  width: 100%;
  background: #000;
  color: #fff;
}
.lp-footer .footer_inner {
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: min(calc(44/750*100vw), 44px) min(calc(45/750*100vw), 45px);
  font-family: "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.lp-footer .footer_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: min(calc(16/750*100vw), 16px);
}
.lp-footer .footer_nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: min(calc(18/750*100vw), 18px);
  letter-spacing: 0.075em;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.lp-footer .footer_nav a:hover {
  opacity: .65;
}
.lp-footer .footer_copy {
  margin: min(calc(15/750*100vw), 15px) 0 0;
  text-align: center;
  font-size: min(calc(18/750*100vw), 18px);
  line-height: 1;
}