/* ============================================================
   Meluva LP - Custom styles (v2-rebooted, 3-block split)
   ============================================================ */

/* ------------------------------------------------------------
   フォントスタック
   ------------------------------------------------------------ */
:root {
  --font-noto-sans-jp:
    "Noto Sans JP", "yu-gothic-pr6n", "Yu Gothic", YuGothic,
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;

  --font-noto-serif-jp:
    "Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
    "YuMincho", "游明朝", serif;

  --font-yu-gothic-pr6n:
    "yu-gothic-pr6n", "Yu Gothic", YuGothic,
    "Hiragino Kaku Gothic ProN", sans-serif;

  --font-din:    "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-futura: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-minion: "minion-pro", "Times New Roman", Times, serif;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
  font-family: var(--font-noto-sans-jp);
  line-height: 1.4;
  background: #fff;
  color: #333;
  margin: 0;
}

.lp-container {
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
}

@media (min-width: 768px) {
  .lp-container {
    max-width: 640px;
    box-shadow:
      16px 0 15px -15px rgba(0, 0, 0, 0.5),
      -16px 0 15px -15px rgba(0, 0, 0, 0.5);
  }
}

.section img { display: block; }

/* ============================================================
   Block 共通 (各セクション独立した container)
   ============================================================ */
.block-wrap {
  position: relative;
  container-type: inline-size;
}
.block-bg {
  width: 100%;
  height: auto;
  display: block;
}
.block-overlay {
  position: absolute;
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}

/* ============================================================
   AI extract driven overlays
   ============================================================ */
.ai-section .block-wrap {
  overflow: hidden;
}

.ai-text {
  position: absolute;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0;
  pointer-events: none;
}

.ai-point {
  white-space: pre;
}

.ai-area {
  white-space: pre-line;
}

.ai-gradient-blue {
  background: linear-gradient(180deg, #8bd4ea 0%, #2b9dc4 46%, #146b91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ai-gradient-aqua {
  background: linear-gradient(90deg, #ff91a9 0%, #ffbe76 34%, #85d8c9 72%, #8be582 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ai-gradient-gold {
  background: linear-gradient(90deg, #ffb753 0%, #d9c28b 50%, #68c7c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ai-fill-none {
  color: rgb(53, 91, 112);
}

.ai-text sup {
  font-size: 0.45em;
  vertical-align: super;
}

.cv-cta {
  position: absolute;
  left: 50%;
  bottom: 20.5%;
  width: 82%;
  transform: translateX(-50%);
  display: block;
}

.cv-cta img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .cv-cta {
    width: 85%;
    bottom: 20%;
  }
}

/* ============================================================
   Section 1A: MV Top Block
   ============================================================
   画像: 01a_mv_top.jpg (750×1400)
   AI内 y範囲: 2062.13 〜 662.13 (height 1400)
   座標換算:
     left% = x_ai / 750 * 100
     top%  = (2062.13 - text.y - fontSize) / 1400 * 100   [POINTTEXT]
*/

/* ---- タイトル ----
   AI: x=221, y=2038, w=309, fs=32.65, NotoSansJP-Medium, rgb(128,164,187) */
.mv-a-title {
  left:  calc(221 / 750 * 100%);
  top:   calc((2062.13 - 2038 - 32) / 1400 * 100%);
  width: calc(309 / 750 * 100%);
  font-family: var(--font-noto-sans-jp);
  font-weight: 500;
  font-size: 4.35cqw;
  color: rgb(128, 164, 187);
  text-align: center;
  white-space: nowrap;
}
.mv-a-title-mark { font-size: 0.4em; vertical-align: super; }

/* ---- 成分タグ (枠は画像内、HTMLは中身のみ) ---- */
.mv-a-tag {
  text-align: center;
  font-family: var(--font-yu-gothic-pr6n);
  color: rgb(109, 161, 205);
  background: transparent;
  pointer-events: none;
}
.mv-a-tag-label { display: block; font-weight: 600; line-height: 1.2; }
.mv-a-tag-name {
  display: block;
  font-family: var(--font-noto-serif-jp);
  font-weight: 700;
  color: rgb(53, 91, 112);
  line-height: 1.05;
  margin: 0.2em 0;
}
.mv-a-tag-sub { display: block; line-height: 1; }
.mv-a-tag-sub sup { font-size: 0.5em; vertical-align: super; }

/* タグ1: トラネキサム酸 (AI: x=47, y=1660 top, w=190) */
.mv-a-tag-1 {
  left:  calc(47 / 750 * 100%);
  top:   calc((2062.13 - 1660) / 1400 * 100%);
  width: calc(190 / 750 * 100%);
}
.mv-a-tag-1 .mv-a-tag-label { font-size: 3.17cqw; }
.mv-a-tag-1 .mv-a-tag-name  { font-size: 5.33cqw; }
.mv-a-tag-1 .mv-a-tag-sub   { font-size: 2.36cqw; }

/* タグ2: アルブチン (AI: x=47, y=1410 top, w=190) */
.mv-a-tag-2 {
  left:  calc(47 / 750 * 100%);
  top:   calc((2062.13 - 1410) / 1400 * 100%);
  width: calc(190 / 750 * 100%);
}
.mv-a-tag-2 .mv-a-tag-label { font-size: 3.17cqw; }
.mv-a-tag-2 .mv-a-tag-name  { font-size: 5.33cqw; }
.mv-a-tag-2 .mv-a-tag-sub   { font-size: 2.36cqw; }

/* ---- メインキャッチ「触れたくなる水光肌へ」 ---- */
.mv-a-catch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
}
.mv-a-catch span {
  position: absolute;
  line-height: 1;
  font-family: var(--font-noto-serif-jp);
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(180deg, #5cb1d0 0%, #2d8db4 50%, #146b91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0.15cqw 0.3cqw rgba(255, 255, 255, 0.7));
}
.mv-a-catch-row1 {
  left: calc(204 / 750 * 100%);
  top:  calc((2062.13 - 1019 - 71) / 1400 * 100%);
  font-size: 9.5cqw;
}
.mv-a-catch-letter {
  font-size: 18.6cqw;
  letter-spacing: 0;
}
.mv-a-catch-water {
  left: calc(198 / 750 * 100%);
  top:  calc(1054 / 1400 * 100%);
}
.mv-a-catch-light {
  left: calc(321 / 750 * 100%);
  top:  calc(1054 / 1400 * 100%);
}
.mv-a-catch-skin {
  left: calc(458 / 750 * 100%);
  top:  calc(1054 / 1400 * 100%);
}
.mv-a-catch-to {
  left: calc(617 / 750 * 100%);
  top:  calc(1086 / 1400 * 100%);
  font-size: 12.2cqw;
}
.mv-a-catch-mark {
  position: absolute;
  left: calc(592 / 750 * 100%);
  top:  calc(1078 / 1400 * 100%);
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 600;
  font-size: 1.6cqw;
  line-height: 1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: rgb(109, 161, 205);
  color: rgb(109, 161, 205);
}

/* ---- 医薬部外品 (枠は画像内、HTMLは文字のみ)
   AI: x=47, y=739, w=116, fs=21.11 */
.mv-a-quasi {
  left:  calc(47 / 750 * 100%);
  top:   calc(1314 / 1400 * 100%);
  width: calc(116 / 750 * 100%);
  font-family: var(--font-noto-sans-jp);
  font-weight: 400;
  font-size: 2.81cqw;
  color: rgb(128, 164, 187);
  text-align: center;
  white-space: nowrap;
}

/* ---- 注釈
   AI: x=413, y=746, w=310, fs=14 (YuGoPr6N-Demi, rgb(128,164,187)) */
.mv-a-notes {
  left:  calc(413 / 750 * 100%);
  top:   calc((2062.13 - 746) / 1400 * 100%);
  width: calc(310 / 750 * 100%);
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 600;
  font-size: 1.87cqw;
  color: rgb(128, 164, 187);
  line-height: 1.5;
}
.mv-a-notes p { margin: 0; }

/* ============================================================
   Section 1B / 1C は画像のみ (HTMLテキストオーバーレイは Block A 確認後)
   ============================================================ */

/* ============================================================
   Section 2: Trouble
   ============================================================
   元画像: 02_trouble.jpg (750×2072)
   分割:
     02a_trouble_top.jpg    750×1000
     02b_trouble_bottom.jpg 750×1072
*/
.section-trouble .block-wrap {
  overflow: hidden;
}

.section-trouble {
  color: rgb(46, 69, 78);
}

/* ------------------------------------------------------------
   Section 2A: Trouble Top Block
   ------------------------------------------------------------ */
.trouble-ghost {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-futura);
  font-weight: 600;
  font-size: 12.91cqw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.trouble-ghost span {
  position: absolute;
  white-space: nowrap;
}
.trouble-ghost-e-1 {
  left: calc(118.9 / 750 * 100%);
  top: calc(-2.9 / 1000 * 100%);
}
.trouble-ghost-word-1 {
  left: calc(214.5 / 750 * 100%);
  top: calc(-7.4 / 1000 * 100%);
}
.trouble-ghost-e-2 {
  left: calc(454.9 / 750 * 100%);
  top: calc(-2.9 / 1000 * 100%);
}
.trouble-ghost-word-2 {
  left: calc(550.5 / 750 * 100%);
  top: calc(-7.4 / 1000 * 100%);
}
.trouble-ghost-e-3 {
  left: calc(790.9 / 750 * 100%);
  top: calc(-2.9 / 1000 * 100%);
}

.trouble-title {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-noto-serif-jp);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0.12cqw 0.5cqw rgba(0, 0, 0, 0.18);
}
.trouble-title span {
  position: absolute;
  white-space: nowrap;
}
.trouble-title-small {
  left: calc(201.8 / 750 * 100%);
  top: calc(128.9 / 1000 * 100%);
  font-size: 7.52cqw;
}
.trouble-title-nanka {
  left: calc(40.6 / 750 * 100%);
  top: calc(220.1 / 1000 * 100%);
  font-size: 10.33cqw;
}
.trouble-title-kininaru {
  left: calc(274.4 / 750 * 100%);
  top: calc(203.7 / 1000 * 100%);
  font-size: 12.64cqw;
}
.trouble-title-dots {
  left: calc(639.9 / 750 * 100%);
  top: calc(212.7 / 1000 * 100%);
  font-size: 9.87cqw;
}

.trouble-concern,
.trouble-marker,
.trouble-footnotes {
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-shadow: 0 0.1cqw 0.45cqw rgba(0, 0, 0, 0.22);
}
.trouble-concern {
  white-space: nowrap;
}
.trouble-marker {
  font-size: 2cqw;
  line-height: 1;
  white-space: nowrap;
}

.trouble-concern-blemish {
  left: calc(69.6 / 750 * 100%);
  top: calc(411.1 / 1000 * 100%);
  width: calc(273.7 / 750 * 100%);
  font-size: 5cqw;
  line-height: 1.17;
}
.trouble-concern-dull {
  left: calc(485 / 750 * 100%);
  top: calc(373.7 / 1000 * 100%);
  width: calc(182.6 / 750 * 100%);
  font-size: 4.43cqw;
  line-height: 1.23;
}
.trouble-marker-1 {
  left: calc(589.1 / 750 * 100%);
  top: calc(357 / 1000 * 100%);
}
.trouble-concern-sun {
  left: calc(87.2 / 750 * 100%);
  top: calc(619.7 / 1000 * 100%);
  width: calc(238.6 / 750 * 100%);
  font-size: 4.36cqw;
  line-height: 1.23;
}
.trouble-marker-2 {
  left: calc(110.1 / 750 * 100%);
  top: calc(660.6 / 1000 * 100%);
}
.trouble-concern-clear {
  left: calc(442.9 / 750 * 100%);
  top: calc(562.3 / 1000 * 100%);
  width: calc(179.4 / 750 * 100%);
  font-size: 4.29cqw;
  line-height: 1.23;
}
.trouble-marker-3 {
  left: calc(517.6 / 750 * 100%);
  top: calc(545.7 / 1000 * 100%);
}
.trouble-concern-foundation {
  left: calc(423.4 / 750 * 100%);
  top: calc(734.3 / 1000 * 100%);
  width: calc(222.8 / 750 * 100%);
  font-size: 4.64cqw;
  line-height: 1.17;
}
.trouble-footnotes {
  left: calc(35 / 750 * 100%);
  top: calc(883.7 / 1000 * 100%);
  width: calc(526 / 750 * 100%);
  font-size: 1.87cqw;
  line-height: 1.75;
  color: rgb(204, 204, 204);
  text-align: left;
  text-shadow: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Section 2B: Trouble Bottom Block
   ------------------------------------------------------------ */
.trouble-benefit {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-noto-serif-jp);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
.trouble-benefit span {
  position: absolute;
  white-space: nowrap;
}
.trouble-active {
  left: calc(217.7 / 750 * 100%);
  top: calc(149.3 / 1072 * 100%);
  font-weight: 800;
  font-size: 14.41cqw;
  background: linear-gradient(90deg, #d9bd92 0%, #bed3bd 48%, #58c7c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.trouble-benefit-ga {
  left: calc(649 / 750 * 100%);
  top: calc(188.5 / 1072 * 100%);
  font-size: 8.63cqw;
  color: rgb(46, 69, 78);
}
.trouble-melanin,
.trouble-approach {
  font-size: 8.91cqw;
  color: rgb(46, 69, 78);
}
.trouble-melanin {
  left: calc(61 / 750 * 100%);
  top: calc(278.8 / 1072 * 100%);
}
.trouble-ni {
  left: calc(316 / 750 * 100%);
  top: calc(290.5 / 1072 * 100%);
  font-size: 7.26cqw;
  color: rgb(46, 69, 78);
}
.trouble-approach {
  left: calc(368.1 / 750 * 100%);
  top: calc(278.8 / 1072 * 100%);
}

.trouble-count {
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgb(53, 91, 112);
  text-align: left;
}
.trouble-count span {
  position: absolute;
  white-space: nowrap;
}
.trouble-count-num {
  left: calc(329 / 750 * 100%);
  top: calc(470.2 / 1072 * 100%);
  font-family: var(--font-futura);
  font-weight: 400;
  font-size: 7.9cqw;
  line-height: 1;
}
.trouble-count-text {
  left: calc(362.3 / 750 * 100%);
  top: calc(484.1 / 1072 * 100%);
  font-family: var(--font-noto-sans-jp);
  font-weight: 400;
  font-size: 5.23cqw;
  line-height: 1;
}
.trouble-count-mark {
  left: calc(503.3 / 750 * 100%);
  top: calc(472.7 / 1072 * 100%);
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 600;
  font-size: 1.87cqw;
  line-height: 1;
}

.trouble-focus {
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 500;
  font-size: 4.47cqw;
  line-height: 1;
  color: rgb(53, 91, 112);
  text-align: center;
  white-space: nowrap;
}
.trouble-focus-skin {
  left: calc(376.9 / 750 * 100%);
  top: calc(580.8 / 1072 * 100%);
  width: calc(248.5 / 750 * 100%);
}
.trouble-focus-melanin {
  left: calc(314.3 / 750 * 100%);
  top: calc(797.1 / 1072 * 100%);
  width: calc(373.8 / 750 * 100%);
}
.trouble-ingredient {
  font-family: var(--font-noto-serif-jp);
  font-weight: 600;
  font-size: 7.33cqw;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.trouble-ingredient-tranexamic {
  left: calc(302.6 / 750 * 100%);
  top: calc(648.1 / 1072 * 100%);
  width: calc(379.5 / 750 * 100%);
}
.trouble-ingredient-arbutin {
  left: calc(353.6 / 750 * 100%);
  top: calc(864.4 / 1072 * 100%);
  width: calc(292.6 / 750 * 100%);
}
.trouble-quasi {
  left: calc(92.9 / 750 * 100%);
  top: calc(948.6 / 1072 * 100%);
  width: calc(117.7 / 750 * 100%);
  font-family: var(--font-noto-sans-jp);
  font-weight: 400;
  font-size: 2.82cqw;
  line-height: 1;
  color: rgb(128, 164, 187);
  text-align: center;
  white-space: nowrap;
}
.trouble-bottom-note {
  left: calc(426.8 / 750 * 100%);
  top: calc(958.8 / 1072 * 100%);
  width: calc(293.7 / 750 * 100%);
  font-family: var(--font-yu-gothic-pr6n);
  font-weight: 500;
  font-size: 1.87cqw;
  line-height: 1.75;
  color: rgb(128, 128, 128);
  white-space: nowrap;
}

/* Section 3 has several vertical Japanese headlines in the Illustrator file. */
.section-threepoint .ai-text[style*="left:5.2600%"],
.section-threepoint .ai-text[style*="left:6.6898%"],
.section-threepoint .ai-text[style*="left:5.9347%"],
.section-threepoint .ai-text[style*="left:79.6648%"],
.section-threepoint .ai-text[style*="left:82.1404%"],
.section-threepoint .ai-text[style*="left:17.9314%"],
.section-threepoint .ai-text[style*="left:68.4712%"],
.section-threepoint .ai-text[style*="left:83.4789%"],
.section-threepoint .ai-text[style*="left:69.1384%"],
.section-threepoint .ai-text[style*="left:5.9481%"],
.section-threepoint .ai-text[style*="left:6.2204%"],
.section-threepoint .ai-text[style*="left:46.7204%"],
.section-threepoint .ai-text[style*="left:19.4079%"] {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: auto !important;
  max-height: 48cqw;
  white-space: nowrap;
  line-height: 1.05 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgb(53, 91, 112) !important;
  color: rgb(53, 91, 112) !important;
}