@charset "UTF-8";

/* ==========================================================
   01 FV（ファーストビュー）
   Figma node 4412:1487 / 440 x 1811.9px
   ヘッダー(79) + ヒーロー(〜447) + 紺コンテンツ(447〜1811.9)
   ========================================================== */

.fv {
  position: relative;
  width: 100%;
  height: 188.75rem;
  background: #183768;
  overflow: hidden;
}

/* ---------- ヘッダー（440x79 白バー + ロゴ + 2ボタン） ---------- */

.fv-header {
  /* スクロール追従（固定ヘッダー）。カラム幅44rem内で中央配置 */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44rem;
  max-width: 100%;
  height: 7.9rem;
  background: #fff;
  box-shadow: 0 0.34rem 0.56rem rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.fv-logo {
  position: absolute;
  left: 2.26rem;
  top: 0.68rem;
  width: 4.29rem;
  height: 6.54rem;
  object-fit: cover;
}

.fv-header-btn {
  position: absolute;
  top: 0;
  width: 14.67rem;
  height: 7.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.56rem;
  padding: 0.79rem 0.56rem;
}

.fv-header-btn--annual {
  left: 14.67rem;
  background: #b4882a;
}

.fv-header-btn--monthly {
  right: 0;
  background: #9b2338;
}

.fv-header-btn-info {
  display: flex;
  align-items: center;
  gap: 0.56rem;
}

.fv-header-gift {
  width: 2.71rem;
  height: 2.71rem;
}

.fv-header-btn-note {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 1.13rem;
  line-height: 1.2;
  letter-spacing: 0.023rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.fv-header-yen {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.fv-header-btn-label {
  width: 13.54rem;
  height: 3.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.34rem;
  box-shadow: inset 0 0 0.23rem rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}

.fv-header-btn-label--annual {
  background: #8e6b1f;
}

.fv-header-btn-label--monthly {
  background: #7c1c2d;
}

/* ---------- ヒーロー（写真コラージュ 440x587 の上に人物・コピー） ---------- */

/* 背景（コラージュ＋紺オーバーレイ＋ファセット＋人物）はFigma書き出しの合成画像。
   CSSでの再現をやめ画像実装に切替（node 4385:1183 collage + 4385:1195 light + 4385:1243 person を合成） */
.fv-hero {
  position: absolute;
  top: 7.9rem; /* 固定ヘッダー(7.9rem)の下から。ヘッダーは別途HTMLで追従表示 */
  left: 0;
  width: 44rem;
  height: 50.77rem; /* 元520 - ヘッダー70 = 450design ×440/390 */
  background-image: url("../../assets/fv/hero-full.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* キャッチコピー（2行、影付き、一部ゴールドグラデ） */
.fv-copy {
  position: absolute;
  left: 2.26rem;
  top: 11.28rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  color: #fff;
  /* text-shadowだと背景クリップ文字(ゴールド)の上に影が乗るためdrop-shadowで再現 */
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.85));
  white-space: nowrap;
}

.fv-copy-line {
  display: block;
  font-size: 1.92rem;
  line-height: 1.2;
}

.fv-copy-lg {
  font-size: 2.14rem;
}

.fv-copy-xl {
  font-size: 2.26rem;
}

.fv-copy-tight {
  letter-spacing: -0.1rem;
}

.fv-copy-gold {
  font-size: 2.26rem;
  letter-spacing: -0.08rem;
  background: linear-gradient(
    25.5deg,
    #e5b94a 36.7%,
    #f0d475 52.4%,
    #f9e895 64.1%,
    #9d6124 95.4%,
    #e5a14e 124.1%,
    #e5b94a 167.2%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* タイトルロゴ（テキスト） */
.fv-title {
  position: absolute;
  left: 2.26rem;
  top: 18.28rem;
  z-index: 2;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 1.13rem #000;
  white-space: nowrap;
}

.fv-title-en {
  font-size: 2.93rem;
}

.fv-title-ja {
  font-size: 5.08rem;
}

/* 累計指導人数バッジ（Figmaエクスポート画像・固定 167x126） */
.fv-badge {
  position: absolute;
  left: 2.26rem;
  top: 29.78rem;
  width: 16.7rem;
  height: 12.64rem;
  z-index: 2;
}

/* 白ネームプレート（固定 159x56.4） */
.fv-nameplate {
  position: absolute;
  left: 28.09rem;
  top: 34.86rem;
  width: 15.91rem;
  height: 5.64rem;
  background: #fff;
  padding: 0.79rem 1.35rem;
  z-index: 2;
}

.fv-nameplate-school {
  width: 13.2rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 1.13rem;
  line-height: 1.4;
  color: #183768;
}

.fv-nameplate-name {
  width: 13.2rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2.03rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #183768;
}

/* ---------- 紺背景コンテンツ（440x1365.1 @y446.8） ---------- */

.fv-main {
  position: absolute;
  top: 44.68rem;
  left: 0;
  width: 44rem;
  height: 144.07rem;
  background-color: #183768;
  /* 背景（紺＋対角ファセット装飾）はFigma書き出し画像（node 4385:18） */
  background-image: url("../../assets/fv/campaign-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 3;
}

/* --- ブロック1：サービスリニューアルキャンペーン --- */

.fv-cp1 {
  position: absolute;
  left: 1.58rem;
  top: 5.64rem;
  width: 40.84rem;
  height: 82.41rem;
}

.fv-cp1-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 4.06rem;
  line-height: 1.1;
  letter-spacing: -0.45rem;
  color: #fff;
  white-space: nowrap;
}

.fv-cp1-title-big {
  font-size: 4.29rem;
  letter-spacing: -0.5rem;
}

/* 見出し飾りユニット（王冠 + campaign + ゴールド見出し + バー） */
.fv-cp-lead {
  position: absolute;
  left: 0.68rem;
  width: 39.49rem;
}

.fv-cp1-lead {
  top: 10.43rem;
  height: 12.18rem;
}

.fv-cp-crown {
  position: absolute;
  top: 0;
  left: 50%;
  /* Figmaではrotate180+scaleX(-1)（=上下反転）で配置されている */
  transform: translateX(-50%) scaleY(-1);
  width: 6.2rem;
  height: 2.14rem;
}

.fv-cp-en {
  position: absolute;
  top: 3.16rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Gideon Roman", serif;
  font-weight: 400;
  font-size: 1.81rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.fv-cp1-month {
  position: absolute;
  top: 5.6rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 4.51rem;
  line-height: 1.2;
  letter-spacing: -0.6rem;
  white-space: nowrap;
  transform: skewX(-10deg) rotate(-1deg);
  /* Figma金グラデ(2.7deg)。元stopは非昇順+範囲外(27.986%..304.13%)でCSSがクランプ
     し暗橙一色になっていた。position昇順に並べ替え、可視域を0-100%へ正規化して
     Figmaの明るい黄金(中央ハイライト#edd373)を再現。 */
  background: linear-gradient(
    2.7deg,
    #cf9528 0%,
    #e2bc58 12.1%,
    #c88616 15.4%,
    #edd373 29.1%,
    #e1c25c 44.5%,
    #c8a12c 81.5%,
    #bf941a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-cp1-month-no {
  font-size: 2.82rem;
  font-weight: 700;
}

.fv-cp-sparkle {
  position: absolute;
  top: 2.82rem;
  width: 3.16rem;
  height: 9.36rem;
}

.fv-cp-sparkle--left {
  left: 0;
}

.fv-cp-sparkle--right {
  right: 0;
  transform: scaleX(-1);
}

.fv-cp-bar {
  position: absolute;
  top: 10.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.38rem;
  height: 0.23rem;
  background: #d9ab43;
}

/* 特典パネル（金飾り枠 408.4x408.4 固定） */
.fv-benefits {
  position: absolute;
  top: 24.87rem;
  left: 0;
  width: 40.84rem;
  height: 48.4rem;
}

.fv-benefits-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fv-benefits-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 特典行プレート（361x64.3 固定・SVGは周囲2.26pxのにじみ込み） */
.fv-benefit-plate {
  position: absolute;
  left: 2.14rem;
  width: 36.55rem;
  height: 6.88rem;
}

.fv-benefit-plate--1 { top: 2.03rem; }
.fv-benefit-plate--2 { top: 9.48rem; }
.fv-benefit-plate--3 { top: 16.92rem; }
.fv-benefit-plate--4 { top: 24.37rem; }
.fv-benefit-plate--5 { top: 31.81rem; }

/* 特典テキスト行（プレートと同じ固定高で重ねる） */
.fv-benefit {
  position: absolute;
  left: 3.72rem;
  width: 33.39rem;
  height: 3.72rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fv-benefit--1 { top: 3.61rem; }
.fv-benefit--2 { top: 11.06rem; }
.fv-benefit--3 { top: 18.5rem; }
.fv-benefit--4 { top: 25.95rem; }
.fv-benefit--5 { top: 34.52rem; }

.fv-benefit-main {
  display: flex;
  align-items: center;
  gap: 1.13rem;
}

.fv-benefit-label {
  width: 3.61rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #e0c475;
}

.fv-benefit-name {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2.03rem;
  line-height: 1.1;
  letter-spacing: -0.1rem;
  color: #fff;
  white-space: nowrap;
}

.fv-benefit-name--4 {
  font-weight: 700;
}

.fv-benefit-name-sub {
  font-size: 1.92rem;
  letter-spacing: -0.19rem;
}

.fv-benefit-value {
  width: 8.24rem;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.58rem;
  line-height: 1.2;
  background: linear-gradient(180deg, #d79d28 0%, #e5c774 46%, #d79d28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTAボタン（金縁ピル・SVG背景） */
.fv-cta {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 0.85rem rgba(0, 0, 0, 0.7));
}

.fv-cta--annual {
  left: 2.93rem;
  top: 76.09rem;
  width: 34.97rem;
  height: 6.32rem;
}

.fv-cta-bg {
  position: absolute;
  left: -0.34rem;
  top: -0.34rem;
  max-width: none;
}

.fv-cta-bg--annual {
  width: 35.65rem;
  height: 6.99rem;
}

.fv-cta-text {
  position: absolute;
  left: 3.16rem;
  top: 2.06rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.81rem;
  line-height: 1.2;
  letter-spacing: 0.036rem;
  color: #fff;
  text-shadow: 0 0 0.56rem #102545;
  white-space: nowrap;
}

.fv-cta-arrow {
  position: absolute;
  right: 2.26rem;
  top: 1.81rem;
  width: 2.71rem;
  height: 2.71rem;
}

/* --- ブロック2：月間プラン --- */

.fv-cp2 {
  position: absolute;
  left: 1.58rem;
  top: 93.75rem;
  width: 40.84rem;
  height: 44.68rem;
}

.fv-cp2-lead {
  top: 0;
  height: 8.01rem;
}

.fv-cp2-catch {
  position: absolute;
  top: 3.3rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 3.27rem;
  line-height: 1.2;
  letter-spacing: -0.2rem;
  white-space: nowrap;
  transform: skewX(-10deg) rotate(-0.6deg);
  /* 今月のキャンペーンと同一の金グラデ(Figma 1.77deg)を昇順・正規化で再現 */
  background: linear-gradient(
    1.77deg,
    #cf9528 0%,
    #e2bc58 12.1%,
    #c88616 15.4%,
    #edd373 29.1%,
    #e1c25c 44.5%,
    #c8a12c 81.5%,
    #bf941a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-cp-bar--2 {
  top: 7.78rem;
}

/* プランパネル（金飾り枠 408.4x259.5 固定） */
.fv-plan {
  position: absolute;
  top: 10.27rem;
  left: 0;
  width: 40.84rem;
  height: 25.95rem;
}

.fv-plan-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fv-plan-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 内側カード（361x214.4 固定・紺地 + 金縁） */
.fv-plan-card {
  position: absolute;
  left: 2.37rem;
  top: 2.26rem;
  width: 36.1rem;
  height: 21.44rem;
  background: #10274a;
  border: 0.23rem solid #bb8300;
  border-radius: 0.56rem;
  overflow: hidden;
}

.fv-plan-card-top {
  position: absolute;
  left: -0.23rem;
  top: -0.23rem;
  width: 36.1rem;
  height: 12.38rem;
  max-width: none;
}

.fv-plan-name {
  position: absolute;
  top: 1.8rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2.03rem;
  line-height: 1.1;
  color: #fff;
}

/* 月額 11,000円 */
.fv-plan-price {
  position: absolute;
  left: 9.7rem;
  top: 6.54rem;
  width: 21.42rem;
  height: 5.77rem;
}

.fv-plan-badge {
  position: absolute;
  left: 0;
  top: 0.23rem;
  width: 4.06rem;
  height: 4.06rem;
  border: 0.11rem solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.58rem;
  line-height: 1;
  color: #fff;
}

.fv-plan-amount {
  position: absolute;
  left: 4.29rem;
  top: 1.27rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 4.51rem;
  line-height: 1;
  letter-spacing: -0.08rem;
  color: #fff;
}

.fv-plan-unit {
  position: absolute;
  left: 16.91rem;
  top: 0;
  width: 4.51rem;
  text-align: center;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  line-height: 1.2;
}

.fv-plan-tax {
  display: block;
  font-size: 1.13rem;
  margin-bottom: -0.23rem;
}

.fv-plan-yen {
  display: block;
  font-size: 2.71rem;
}

/* 下向き矢印 */
.fv-plan-arrow {
  position: absolute;
  left: 22.45rem;
  top: 12.97rem;
  width: 4.06rem;
  height: 1.02rem;
  transform: rotate(180deg);
}

/* 初月のみ 110円 */
.fv-plan-first {
  position: absolute;
  left: 6.21rem;
  top: 11.96rem;
  width: 28.42rem;
  height: 10.2rem;
}

.fv-plan-first-badge {
  position: absolute;
  left: 0;
  top: 2.71rem;
  width: 6.77rem;
  height: 6.77rem;
  border: 0.23rem solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-size: 2.03rem;
  line-height: 1;
  color: #fff;
}

.fv-plan-first-amount {
  position: absolute;
  left: 6.88rem;
  top: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 10.15rem;
  line-height: 1;
  letter-spacing: -1.02rem;
  background: linear-gradient(180deg, #fff 58.6%, #eee 58.6%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-plan-first-unit {
  position: absolute;
  left: 23rem;
  top: 1.79rem;
  width: 5.42rem;
  text-align: center;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  line-height: 1.2;
}

.fv-plan-first-tax {
  display: block;
  font-weight: 800;
  font-size: 1.81rem;
  margin-bottom: -0.79rem;
  white-space: nowrap;
  margin-left: -0.94rem;
}

.fv-plan-first-yen {
  display: block;
  font-weight: 700;
  font-size: 5.87rem;
}

/* 月間CTA */
.fv-cta--monthly {
  left: 6.32rem;
  top: 39.04rem;
  width: 28.21rem;
  height: 5.64rem;
}

.fv-cta-bg--monthly {
  width: 28.88rem;
  height: 6.32rem;
}

.fv-cta--monthly .fv-cta-text {
  /* 文字が下に落ちていたため、矢印(中央=2.82rem)と同じ縦中央に補正（クライアント修正#3） */
  top: 1.74rem;
}

.fv-cta-arrow--monthly {
  top: 1.47rem;
}

/* キャンペーン/試して見出しをFigma書き出し画像化（月桂樹・星・金文字込み・ピクセル一致） */
.fv-lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* h1（ロゴ）ラッパー: 絶対配置のロゴを包むだけでレイアウトに影響させない */
.fv-logo-h1 { margin: 0; padding: 0; line-height: 0; }