/* =========================================================
   Hero Section — C案（KVスライドショー + 縦書き + 英字ディスプレイ主役 + 和文サブ）
   ※ SEOの実h1＝和文ブランドコピー（文言・3行は不変／視覚は小サブ）。英字 .p-front-mv__display が視覚の主役。
========================================================= */
.p-front-mv{
  position:relative;
  /* カンプ準拠の下寄せ：ヘッダー(reg-bar+sticky nav≈103px)の下で、compと同様にビューポートを
     わずかに超える高さにし、下端アンカーの見出しを下方へ・CTAをフォールド内へ収める。
     ※comp実測 見出しtop≈48%/CTA bottom≈97%。100vhそのままだと全ヘッダー分(103px)はみ出てCTAが見切れる。 */
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--base);
  background:var(--ink);
}

/* --- KVスライドショー（フィールド実写3枚・GSAP非依存の素のJSで切替） --- */
.p-front-mv__kv{ position:absolute; inset:0; z-index:0; }
.p-front-mv__slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.6s ease;
}
.p-front-mv__slide.is-active{ opacity:1; }
.p-front-mv__slide picture,
.p-front-mv__slide img{ width:100%; height:100%; display:block; }
.p-front-mv__slide img{ object-fit:cover; transform:scale(1); transition:transform 9s linear; }
.p-front-mv__slide.is-active img{ transform:scale(1.08); }
/* 墨グラデで写真上の白文字を可読に（z-index:2＝背景動画より上に必須） */
.p-front-mv__kv::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to top,
    rgba(35,33,30,.74) 0%, rgba(35,33,30,.40) 48%, rgba(35,33,30,.22) 100%);
}

/* --- 背景動画（PC/タブレット。JSがsrc注入→再生開始後にフェードイン。スライドの上・スクリム(z-index:2)の下） --- */
.p-front-mv__video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.p-front-mv__video.is-playing{ opacity:1; }
/* 読込直後：video直下のインラインscriptがパース時に付与（PCのみ）。ポスター＝動画1フレーム目を最初から表示し「動画スタート」に見せる */
.p-front-mv__video.is-armed{ opacity:1; }
/* 動画再生中はスライド切替ドット不要（タイマーもJS側で停止） */
.p-front-mv.is-video-active .p-front-mv__dots{ display:none; }
/* SPバックストップ：JS側ガード（601px判定）の二重防御。<picture>の画像境界600pxに合わせる（レイアウト用599pxとは意図的に別） */
@media (max-width:600px){
  .p-front-mv__video{ display:none; }
}

/* --- 縦書きクレジット（右上・縦罫線付き） --- */
.p-front-mv__vert{
  position:absolute; top:clamp(84px,12vh,120px); right:clamp(18px,3vw,42px); z-index:3;
  margin:0;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:16px; letter-spacing:.36em; white-space:nowrap;
  color:rgba(247,245,241,.92);
  border-right:1px solid rgba(247,245,241,.5);
  padding-right:14px; height:auto;
}

/* --- コンテンツ（左下） --- */
.p-front-mv__content{
  position:relative; z-index:2;
  width:100%;
  margin:0;                                                  /* カンプ準拠：中央寄せ(margin auto)解除＝左端揃え。max-width段組も外す */
  padding:0 clamp(1.25rem,3vw,2.4rem) clamp(3rem,7vh,5rem);  /* 左パディングを comp(≈34px) 相当に */
}

/* --- 英語ディスプレイ見出し（カンプ主役＝Cormorant Garamond特大／"New Horizons."斜体） --- */
.p-front-mv__display{
  font-family:var(--en);
  font-weight:400;
  font-size:clamp(40px,6.8vw,96px);
  line-height:1.04;
  letter-spacing:.01em;
  color:var(--base);
  margin:0 0 22px;
  text-shadow:0 2px 22px rgba(35,33,30,.45);   /* KV写真上で可読 */
}
.p-front-mv__display em{ font-style:italic; }

/* --- h1（和文ブランドコピー＝SEOの実h1。視覚的には小サブタイトル／文言・3行は不変） --- */
.p-front-mv__title{
  margin:0 0 1.6rem;
  max-width:620px;
  font-family:var(--serif);
  font-weight:500;
}
.p-front-mv__title__line{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(15px,1.7vw,21px);
  line-height:1.9;
  letter-spacing:.16em;
  color:var(--base);
  text-shadow:0 1px 10px rgba(35,33,30,.5);
}

/* --- CTA（主＝計測フック維持の空色ベタ／ゴースト＝料金へのプレーンアンカー・非計測） --- */
.p-front-mv__cta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:0; }
.p-front-mv__cta-button{
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 52px;
  font-family:var(--sans); font-weight:700;
  font-size:15px; letter-spacing:.06em;
  color:var(--base);
  background:var(--sky);
  border:1px solid var(--sky);
  box-shadow:0 8px 30px rgba(35,33,30,.25);
  text-decoration:none;
  transition:background .3s, transform .25s;
}
.p-front-mv__cta-button:hover{
  background:var(--sky-deep);
  transform:translateY(-2px);
  text-decoration:none;
}
.p-front-mv__cta-button:focus-visible{
  outline:3px solid rgba(247,245,241,.7);
  outline-offset:3px;
}
/* ゴースト「講習料金を見る」：カンプ .hero .btn-ghost 相当。計測クラスは付けない */
.p-front-mv__cta-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 36px;
  font-family:var(--sans); font-weight:500;
  font-size:14px; letter-spacing:.06em;
  color:var(--base);
  background:transparent;
  border:1px solid color-mix(in srgb, var(--base) 70%, transparent);
  text-decoration:none;
  transition:background .3s, border-color .3s;
}
.p-front-mv__cta-ghost:hover{
  background:color-mix(in srgb, var(--base) 12%, transparent);
  border-color:var(--base);
  text-decoration:none;
}
.p-front-mv__cta-ghost:focus-visible{
  outline:3px solid color-mix(in srgb, var(--base) 70%, transparent);
  outline-offset:3px;
}

/* --- スクロールキュー（右下・縦書き） --- */
.p-front-mv__scroll{
  position:absolute; right:clamp(18px,3vw,40px); bottom:clamp(3rem,8vh,5rem); z-index:3;
  margin:0;
  font-family:var(--en); font-size:12px; letter-spacing:.2em;
  color:var(--base);
  writing-mode:vertical-rl;
  display:flex; align-items:center; gap:12px;
  opacity:.85;
}
.p-front-mv__scroll::after{
  content:""; width:1px; height:56px; background:var(--base);
  animation:hero-scroll 2.2s ease-in-out infinite; transform-origin:top;
}
@keyframes hero-scroll{ 0%{transform:scaleY(0)} 55%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }

/* --- KVドット（手動切替） --- */
.p-front-mv__dots{
  position:absolute; right:clamp(18px,3vw,36px); bottom:clamp(1.2rem,4vh,2.4rem); z-index:3;
  display:flex; gap:10px;
}
.p-front-mv__dots button{
  width:30px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(247,245,241,.4); transition:background .3s;
}
.p-front-mv__dots button.is-active{ background:var(--base); }

/* =========================================================
   Fact Bar（ヒーロー直下・信頼の前出し）
========================================================= */
.p-factbar{ background:var(--base); padding:clamp(2.4rem,5vw,3.6rem) 0 0; }
.p-factbar__inner{ max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,2rem); }
.p-factbar__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.p-factbar__item{ padding:clamp(1.6rem,3vw,2rem) 1.4rem; text-align:center; }
.p-factbar__item + .p-factbar__item{ border-left:1px solid var(--line); }
.p-factbar__item .label{ display:block; margin-bottom:.7rem; }
.p-factbar__big{
  font-family:var(--serif); font-weight:600; font-size:1.35rem;
  letter-spacing:.04em; line-height:1.4; margin:0;
}
.p-factbar__big em{ font-style:normal; font-family:var(--en); color:var(--accent); font-size:1.7rem; }
.p-factbar__sub{ font-size:var(--ts-meta); color:var(--ink-soft); margin:.3rem 0 0; }
.p-factbar__sub a{ color:var(--accent); }
.p-factbar__sub a:hover{ text-decoration:underline; }
.p-factbar__note{
  max-width:var(--container); margin:1.2rem auto 0;
  padding:0 clamp(1.25rem,4vw,2rem);
  font-size:var(--ts-meta); line-height:1.7; color:var(--ink-soft); letter-spacing:.02em;
}

/* =========================================================
   Flight Divider（ファクトバー直下・左→右へ流れる航跡の破線）
========================================================= */
.p-flight-div{ position:relative; height:96px; overflow:hidden; margin-top:1.2rem; background:var(--base); }
.p-flight-div svg{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(920px,92vw); height:96px; }
.p-flight-div path{
  fill:none; stroke:var(--accent); stroke-width:1.4;
  stroke-dasharray:7 9; opacity:.55;
  animation:flight-flow 14s linear infinite;
}
@keyframes flight-flow{ to{ stroke-dashoffset:-320; } }
/* 航跡ドローン：SVGと同寸の箱(track)を作り、その中を left%/top% で波線に沿わせる。
   preserveAspectRatio="none" のため left%=x/920・top%=y/96 が全幅/全高で線が一致する。 */
.p-flight-div__track{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(920px,92vw); height:100%; pointer-events:none;
}
.p-flight-div__drone{
  position:absolute; z-index:1; height:56px; width:auto;
  left:97.8%; top:45.8%;                           /* 波線の終着点(viewBox 900,44)に静止 */
  transform:translate(-50%,-50%) rotate(-10deg);   /* 中心合わせ＋機首を右上へ */
  transform-origin:center;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width:959px){
  .p-front-mv{ min-height:clamp(520px,80vh,760px); }
  .p-front-mv__vert{ top:84px; height:auto; font-size:14px; right:20px; }
  .p-front-mv__dots{ right:18px; }
  /* 固定CTA（.c-fixed-cv）と被らないよう下余白を確保 */
  .p-front-mv__content{ padding-bottom:calc(2.4rem + 6rem + env(safe-area-inset-bottom,0px)); }
  .p-factbar__grid{ grid-template-columns:1fr; }
  .p-factbar__item + .p-factbar__item{ border-left:none; border-top:1px solid var(--line); }
  .p-flight-div{ height:64px; }
  .p-flight-div svg{ height:64px; }
  .p-flight-div__drone{ height:40px; }
}

@media (max-width:599px){
  /* 固定CTA（.c-fixed-cv）があるためヒーロー内CTAは非表示（既存方針を維持） */
  .p-front-mv__cta{ display:none; }
  .p-front-mv{ min-height:clamp(460px,72vh,640px); }
  .p-front-mv__content{ padding-bottom:calc(1.8rem + 5.6rem + env(safe-area-inset-bottom,0px)); }
  .p-front-mv__display{ font-size:clamp(38px,11vw,52px); margin-bottom:16px; }
  .p-front-mv__vert{ display:none; }   /* 狭幅では縦書きクレジット非表示 */
  .p-flight-div__drone{ display:none; }   /* SPは航跡ドローン非表示 */
  .p-front-mv__scroll{ display:none; }
  .p-factbar__big{ font-size:1.2rem; }
  .p-factbar__big em{ font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .p-front-mv__slide{ transition:none; }
  .p-front-mv__slide img,
  .p-front-mv__slide.is-active img{ transition:none; transform:none; }
  .p-front-mv__scroll::after{ animation:none; }
  .p-flight-div path{ animation:none; }
  .p-front-mv__video{ display:none; }   /* 背景動画も停止（JS側ガードの二重防御） */
}