@charset "UTF-8";

/* =============================================
  CSS変数の定義
  config.phpのcolor_primary / color_accentと合わせて手動で更新すること（静的CSSのためPHP変数は使用不可）
============================================= */
:root {
  --color-primary: #0a2a5e;
  --color-navy:    #0a1f3d;
  --color-red:     #cc060c;
  --color-white:   #ffffff;
  --content-width: 750px;
  --footer-cta-height: 100px; /* CTAバーの高さをここで一元管理 */
}

/* =============================================
  ベーススタイル
============================================= */
html {
  scroll-behavior: smooth;
  background-color: var(--color-navy);
}

body {
  background-color: var(--color-white);
  color: #333333;
  font-family: "Noto Sans JP", "M PLUS Rounded 1c", sans-serif;
  line-height: 1.6;
}

@media (min-width: 750px) {
  body {
    background-color: var(--color-navy);
  }
}

#wrapper {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.75;
}

/* =============================================
  アクセシビリティ：視覚的に隠しつつ、検索エンジン・スクリーンリーダー
  向けにはテキストとして残す（見出し／補足コピー用）
============================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 最終セクション（#company）は固定CTAバーに隠れないよう下端に余白を確保 */
#company {
  padding-bottom: var(--footer-cta-height);
  background-color: #040d19;
}

/* =============================================
  画像に重ねるCTAボタン（FV／トライアル等）
============================================= */
.img-cta-wrap {
  position: relative; /* 内部の .cta-btn.is-overlay の基準位置 */
}

.img-cta-wrap .cta-btn.is-overlay {
  position: absolute;
  bottom: var(--cta-bottom, 5%);
  left: var(--cta-left, 50%);
  transform: translateX(-50%);
  width: var(--cta-width, 90%);
}

.cta-btn img,
#footer-cta a img {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.cta-btn:hover img,
#footer-cta a:hover img {
  transform: translateY(-2px);
}

/* =============================================
  動画オーバーレイ（.mov / .mov-frame）
  既存plapendual-lpのmov-wrapパターンを踏襲。
  クラス名は画像番号ではなく意味（どの動画か）で命名する。
  位置(top/bottom)は元画像内の空白域に合わせた概算値のため、
  実際の動画尺・構図が決まり次第、微調整すること。
============================================= */
.mov {
  position: relative;
}

.mov-frame {
  position: absolute;
  overflow: hidden;
  /* border-radius: clamp(1px, calc(6 / 750 * 100vw), 6px); */
}

.mov-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* POINT01（04_point01-02.webp）内：ペンハンドピース紹介。
   「口元もケア」テキストとハンドピース本体写真の下、左下に残る余白（縦: 約71〜89%）に、
   left+transformで確実に中央揃えして配置する。 */
.mov-frame--pen-handpiece {
  top: 73%;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  aspect-ratio: 16 / 9;
}

/* POINT01（04_point01-03.webp）内：マルチハンドピース紹介。
   チップ紹介の手前にある余白帯（縦: 約24〜45%）に全幅で1本配置する。
   object-fit: coverはベースの.mov-frame videoにも指定済みだが、
   縦横比が無視される事象への対策として明示的に再指定する。 */
.mov-frame--multi-handpiece {
  top: 21%;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  aspect-ratio: 16 / 9;
}

.mov-frame--multi-handpiece video {
  object-fit: cover;
}

/* トライアル（15_trial.webp）内：メイン無料体験訴求。
   画像下半分の空白部分に配置し、下端はCTAボタン（.cta-btn.is-overlay）とぶつからないよう余白を残す。
   aspect-ratio: 16/9で高さを決め、上下の黒帯が出ないようobject-fit: coverで枠いっぱいに表示する */
.mov-frame--trial-main {
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.mov-frame--trial-main video {
  object-fit: cover;
}

/* =============================================
  固定CTAバー（#footer-cta）
  ページの「フッター」ではなく、スクロール中も常設する導線用の独立UI。
  scroll-cta.js が is-visible クラスを制御する
============================================= */
#footer-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* heightは指定しない。padding+画像で決まる自然な高さをJS(syncFooterCtaHeight)が
     実測し、--footer-cta-height に書き戻す（#companyのpadding-bottomが参照する）。
     ここでheightを固定すると実測が自己参照ループになり無意味になるため注意 */
  max-width: 750px;
  z-index: 100;
  padding-block: clamp(1px, calc(16 / 750 * 100vw), 16px);
  /* backdrop-filter: blur()は動画の上に重なるとスクロール時の描画負荷が高いため、
     半透明の単色背景に置き換えている */
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#footer-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#footer-cta img {
  width: 92%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #footer-cta img {
    width: 65%;
  }
}

.is-sp-only {
  display: inline;
}

@media (min-width: 750px) {
  .is-sp-only {
    display: none;
  }
}

/* =============================================
  アクセシビリティ：アニメーション低減設定
============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}