/* ============================================================
   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.json driven overlay system
   ------------------------------------------------------------
   generate_overlay.py が出力する <p class="ai-text ai-point|area"> 用の
   共通基盤。座標・サイズ・色は個別 inline style で指定する設計。
   ============================================================ */
.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-fill-none {
  color: rgb(53, 91, 112);
}
.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-text sup {
  font-size: 0.45em;
  vertical-align: super;
}

/* CV ボタン (お得にMeluvaを試す) */
.cv-cta {
  position: absolute;
  left: 50%;
  bottom: 20.5%;
  width: 82%;
  transform: translateX(-50%);
  display: block;
  z-index: 30;
}
.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; }

/* メインキャッチ「触れたくなる水光肌へ」は 01a_mv_top.jpg に画像で合成済み (CSS不要) */

/* ---- 医薬部外品 (枠は画像内、HTMLは文字のみ)
   AI: x=47, y=739, w=116, fs=21.11 */
.mv-a-quasi {
  left:  calc(47 / 750 * 100%);
  top:   calc((2062.13 - 739 - 21) / 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;
}

/* ---- 注釈
   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 確認後)
   ============================================================ */