@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* =========================================================
   ベース
   ========================================================= */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: #3a2b30;
  background: radial-gradient(120% 60% at 50% 0%, #fff 0%, #fdeef4 55%, #f8dbe8 100%) fixed;
  min-height: 100vh;
}
img { max-width: 100%; }

/* =========================================================
   ポータル ヘッダー
   ========================================================= */
.portal-header {
  text-align: center;
  padding: 40px 20px 8px;
  max-width: 900px;
  margin: 0 auto;
}
.portal-header .logo { width: 150px; height: auto; margin: 0 auto 18px; display: block; }
.portal-header .eyebrow {
  font-family: "Noto Serif JP", serif;
  font-size: 14px; letter-spacing: .18em; color: #d70067; margin: 0 0 10px;
}
.portal-header h1 {
  font-family: "Noto Serif JP", serif; font-weight: 700;
  font-size: clamp(26px, 6vw, 38px); line-height: 1.35; color: #3a2b30; margin: 0 0 14px;
}
.portal-header h1 .accent { color: #d70067; }
.portal-header p.lead {
  font-size: 15px; line-height: 1.9; color: #6a565c; margin: 0 auto; max-width: 560px;
}
.portal-header .divider {
  width: 60px; height: 3px; border: 0; border-radius: 3px;
  background: linear-gradient(90deg, #e7c873, #d70067); margin: 22px auto 0;
}

/* =========================================================
   カードグリッド（PC：横並び / SP：縦1列）
   ========================================================= */
.lp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 28px 16px 64px;
  max-width: 1480px;
  margin: 0 auto;
}
.lp-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(170, 30, 90, 0.12);
  display: flex;
  flex-direction: column;
}
.lp-card .card-label {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(90deg, #e7588f, #d70067);
  padding: 11px 14px;
}

/* FV：430px設計のまま枠幅にスケールさせる（SP崩れ防止）
   .fv-frame が実レイアウト枠。中の .fv は常に430px固定で transform:scale。 */
.fv-frame { width: 100%; overflow: hidden; }
.fv { width: 430px; transform-origin: top left; position: relative; }
.fv img { display: block; }
.fv h1, .fv h2, .fv h3, .fv p { margin: 0; padding: 0; }

/* =========================================================
   詳細はこちら ボタン
   ========================================================= */
.detail-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 18px 22px;
  padding: 16px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d70067, #b8004f);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(183, 0, 79, 0.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.detail-link:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(183, 0, 79, 0.34); }
.detail-link .arrow {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
}

.portal-footer { text-align: center; padding: 24px 16px 40px; color: #fff; font-size: 12px; background: #d70067; }

/* =========================================================
   FV内で使う最小ユーティリティ（元LPのTailwind相当を自前定義）
   ========================================================= */
.fv .relative { position: relative; }
.fv .absolute { position: absolute; }
.fv .z-20 { z-index: 20; }
.fv .overflow-hidden { overflow: hidden; }
.fv .aspect-\[43\/52\] { aspect-ratio: 860 / 1431; }
.fv .max-h-\[520px\] { max-height: auto; }
.fv .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.fv .w-full { width: 100%; }
.fv .h-full { height: 100%; }
.fv .object-cover { object-fit: cover; }
.fv .w-40 { width: 10rem; }
.fv .h-auto { height: auto; }
.fv .block { display: block; }
.fv .rounded { border-radius: .25rem; }

/* =========================================================
   各LPのFV用スタイル（クラス衝突回避のため #lpN で名前空間化）
   画像パスはこのCSSの位置（ルート）基準＝ images/N/...
   ========================================================= */

/* ---- LP1: 水玉リフティングLDM ---- */
#lp1 .right { right: 10px; top: 0; max-width: 110px; }
#lp1 .cta-new { background: #d70067; text-align: center; padding: 0 0 20px; }
#lp1 .cta-new a { display: block; width: 90%; max-width: 500px; margin: 20px auto; transition: all 0.3s ease; }
#lp1 .cta-new a:hover { filter: brightness(1.1); }

/* ---- LP2: XERFアイ + LDM ---- */
#lp2 .right { right: 10px; top: 0; max-width: 110px; }
#lp2 .midashi { background: url(images/2/cta_01.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 262; position: relative; }
#lp2 .midashi h2 { color: #fff; font-weight: 500; position: absolute; font-size: 30px; text-align: center; top: 38px; width: 100%; line-height: 1.4; letter-spacing: 1px; margin: 0; }
#lp2 .midashi h2 span { font-size: 24px; font-weight: 500; }
#lp2 .midashi2 { background: url(images/2/cta_02.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 681; position: relative; text-align: center; }
#lp2 .midashi2 .t01 { width: 100%; text-align: center; position: absolute; top: 30px; color: #d70067; font-family: "Noto Serif JP", serif; font-size: 26px; margin: 0; }
#lp2 .midashi2 .t02 { width: 100%; text-align: center; position: absolute; top: 73px; color: #fff; font-size: 18px; margin: 0; }
#lp2 .midashi2 .t03 { width: 100%; text-align: center; position: absolute; top: 144px; color: #d70067; font-family: "Noto Serif JP", serif; font-size: 26px; margin: 0; }
#lp2 .midashi2 .t04 { width: 100%; text-align: center; position: absolute; top: 189px; color: #fff; font-size: 18px; margin: 0; }
#lp2 .midashi2 .t05 { width: 100%; padding: 0 30px; text-align: center; position: absolute; top: 270px; font-size: 16px; font-weight: 500; margin: 0; }
#lp2 .button { background: url(images/2/cta_03.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 1049; position: relative; }
#lp2 .button > div { position: absolute; width: 100%; top: 295px; }
#lp2 .cta-new { background: #f6efa9; text-align: center; padding: 0; }
#lp2 .cta-new a { display: block; width: 90%; max-width: 500px; margin: 20px auto; transition: all 0.3s ease; }
#lp2 .cta-new a:hover { filter: brightness(1.1); }
/* mobile */
@media screen and (max-width: 420px) {
  #lp2 .midashi h2 {
    top: calc(34 / 420 * 100vw);
  }
  #lp2 .midashi h2 span {
      font-size: calc(21 / 420 * 100vw);
  }
  #lp2 .midashi2 .t01 {
      top: calc(31 / 420 * 100vw);
      font-size: calc(24 / 420 * 100vw);
  }
  #lp2 .midashi2 .t02 {
      top: calc(73 / 420 * 100vw);
      font-size: calc(16 / 420 * 100vw);
  }
  #lp2 .midashi2 .t03 {
      top: calc(142 / 420 * 100vw);
      font-size: calc(24 / 420 * 100vw);
  }
  #lp2 .midashi2 .t04 {
      top: calc(184 / 420 * 100vw);
      font-size: calc(16 / 420 * 100vw);
  }
  #lp2 .midashi2 .t05 {
      top: calc(270 / 420 * 100vw);
      font-size: calc(14 / 420 * 100vw);
  }
  #lp2 .button > div {
      top: calc(290 / 420 * 100vw);
  }
}

/* ---- LP3: ブライトピール + XERFアイ + LDM ---- */
#lp3 .right { right: 10px; top: 0; max-width: 110px; }
#lp3 .midashi { background: url(images/3/cta_01.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 262; position: relative; }
#lp3 .midashi h2 { color: #fff; font-weight: 500; position: absolute; font-size: 30px; text-align: center; top: 38px; width: 100%; line-height: 1.4; letter-spacing: 1px; margin: 0; }
#lp3 .midashi h2 span { font-size: 24px; font-weight: 500; }
#lp3 .midashi2 { background: url(images/3/cta_02.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 867; position: relative; text-align: center; }
#lp3 .midashi2 .t01 { width: 100%; text-align: center; position: absolute; top: 29px; color: #d70067; font-family: "Noto Serif JP", serif; font-size: 26px; margin: 0; }
#lp3 .midashi2 .t02 { width: 100%; text-align: center; position: absolute; top: 73px; color: #fff; font-size: 18px; margin: 0; }
#lp3 .midashi2 .t03 { width: 100%; text-align: center; position: absolute; top: 144px; color: #d70067; font-family: "Noto Serif JP", serif; font-size: 26px; margin: 0; }
#lp3 .midashi2 .t04 { width: 100%; text-align: center; position: absolute; top: 188px; color: #fff; font-size: 18px; margin: 0; }
#lp3 .midashi2 .t05 { width: 100%; text-align: center; position: absolute; top: 258px; color: #d70067; font-family: "Noto Serif JP", serif; font-size: 26px; margin: 0; }
#lp3 .midashi2 .t06 { width: 100%; text-align: center; position: absolute; top: 302px; color: #fff; font-size: 18px; margin: 0; }
#lp3 .midashi2 .t07 { width: 100%; padding: 0 60px; text-align: left; position: absolute; top: 350px; font-size: 16px; font-weight: 500; margin: 0; }
#lp3 .button { background: url(images/3/cta_03.jpg) no-repeat top center; background-size: 100% 100%; width: 100%; aspect-ratio: 860 / 1047; position: relative; }
#lp3 .button > div { position: absolute; width: 100%; top: 295px; }
#lp3 .cta-new { background: #f6efa9; text-align: center; padding: 0; }
#lp3 .cta-new a { display: block; width: 90%; max-width: 500px; margin: 20px auto; transition: all 0.3s ease; }
#lp3 .cta-new a:hover { filter: brightness(1.1); }
#lp3 .pc {display: block;}

@media (max-width: 1279px) { body { background-attachment: scroll; } }


/* mobile */
@media screen and (max-width: 420px) {
  #lp3　.midashi h2 {
      top: calc(34 / 420 * 100vw);
  }
  #lp3　.midashi h2 span {
      font-size: calc(21 / 420 * 100vw);
  }
  #lp3　.midashi2 .t01 {
      top: calc(31 / 420 * 100vw);
      font-size: calc(24 / 420 * 100vw);
  }
  #lp3　.midashi2 .t02 {
      top: calc(73 / 420 * 100vw);
      font-size: calc(16 / 420 * 100vw);
  }
  #lp3　.midashi2 .t03 {
      top: calc(142 / 420 * 100vw);
      font-size: calc(24 / 420 * 100vw);
  }
  #lp3　.midashi2 .t04 {
      top: calc(184 / 420 * 100vw);
      font-size: calc(16 / 420 * 100vw);
  }
  #lp3　.midashi2 .t05 {
      top: calc(254 / 420 * 100vw);
      font-size: calc(24 / 420 * 100vw);
  }
  #lp3　.midashi2 .t06 {
      top: calc(296 / 420 * 100vw);
      font-size: calc(16 / 420 * 100vw);
  }
  #lp3　.midashi2 .t07 {
      padding: 0 calc(60 / 420 * 100vw);
      top: calc(340 / 420 * 100vw);
      font-size: calc(14 / 420 * 100vw);
  }
  #lp3　.button > div {
      top: calc(290 / 420 * 100vw);
  }
  #lp3 .pc {display: none;}
}