@charset "UTF-8";
/* ==========================================================================
   FVプレビュー（案A準拠）v2
   すべての寸法は SPEC_案A採寸.md の実測値に従う。目分量の値は置かない。

   【設計の要点】
   1) FVは画面幅に比例して拡縮する。コンテナクエリ（cqw = FV幅の1%）を単位に使い、
      pxで高さやフォントを固定しない。これで1280でも1920でもカンプと同じ比率になる。
   2) 斜めは「平行な帯」ではない。3本の直線 A/B/C が1点(51.39%, 47.39%)で交わり、
      淡いブルーが上下2つの三角形になる（SPEC §2）。
   3) 写真は object-fit ではなく、実寸指定で置く。顔幅・顔中心・頭頂余白を
      カンプ実測値に一致させるため、拡大率と位置を計算して固定する（SPEC §3）。

   アイコンは lucide (ISC License) の正規パスをインラインSVGで使用。
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- 色（SPEC §6・画素実測） --- */
  --c-navy-deep: #011D42;
  --c-blue:      #0151A7;
  --c-blue-ink:  #0250A4;
  --c-red:       #D51B1D;
  --c-red-cta:   #EC3D29;
  --c-ink:       #151921;
  --c-muted:     #5B6675;
  --c-pale:      #EBF2FD;
  --c-line:      #D6E0EE;

  /* --- 斜めの幾何（SPEC §2）--- */
  --lineA-top:    59.34%;   /* 白い面の右辺・上端 */
  --lineA-bottom: 42.57%;   /* 同・下端 */
  --lineB-top:    66.50%;   /* 写真の左辺・上端 */
  --lineC-bottom: 58.30%;   /* 写真の左辺・下端 */
  --vertex-x:     51.39%;   /* A・B・C が交わる点 */
  --vertex-y:     47.39%;

  /* --- 写真の配置（SPEC §3 から逆算。cand-3 の実測値に基づく）---
     顔幅=画面幅の16.0% / 顔中心x=76.04% / 頭頂=ヒーロー高の2.5% を満たす値 */
  --photo-w:    74.2%;
  --photo-left: 48.59%;
  --photo-top: -63.42%;

  --shadow-sm: 0 1px 2px rgba(1,29,66,.06);
  --shadow-md: 0 6px 18px rgba(1,29,66,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--c-ink);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
.fvico{ width:1em; height:1em; flex:none; }

/* ==========================================================================
   FV全体：画面幅を基準に比例拡縮させるためのコンテナ
   ========================================================================== */
.fv{
  container-type: inline-size;
  container-name: fv;
  /* 基準幅。すべての寸法をここから計算する。上限は3つの条件の最小値：
       ① 100cqw          … 画面幅を超えない
       ② 1240px          … 広い画面で肥大化させない
       ③ (画面高-12px)×1.585 … CTAが画面内に収まる高さに抑える
     ③の係数：FV高＝--w/1.5、CTA下端はFV高の94.7% → CTA下端＝--w×0.631。
     これを画面高以内にするので --w ≦ 画面高÷0.631 ＝ 画面高×1.585。 */
  --w: min(100cqw, 1240px, calc((100vh - 12px) * 1.585));
  --radius: calc(var(--w) * 0.78 / 100);
}

/* SPEC §1：FV縦横比1.500 → 各段の高さは「FV幅」に対する比で決まる
   告知 5.57%/1.5 = calc(var(--w) * 3.713 / 100) ／ ヘッダー 10.94%/1.5 = calc(var(--w) * 7.293 / 100) ／ ヒーロー 83.50%/1.5 = calc(var(--w) * 55.67 / 100) */

.fv-inner{
  width:100%;
  max-width:var(--w);
  margin-inline:auto;
  padding-inline:calc(var(--w) * 3.19 / 100);   /* SPEC §4。実レンダリングとカンプの突き合わせで +calc(var(--w) * 0.39 / 100) 補正 */
}

/* ==========================================================================
   (1) 告知バー
   ========================================================================== */
.fvnotice{
  height:calc(var(--w) * 3.713 / 100);
  min-height:34px;
  display:flex;
  align-items:center;
  background:var(--c-navy-deep);
  color:#DCE7F5;
}
.fvnotice .fv-inner{
  text-align:center;
  font-size:calc(var(--w) * 1.016 / 100);
  font-weight:500;
}


/* 告知バー：スマホ幅だけ「運営する」の後で改行する。
   改行位置に読点が残ると行末に句読点がぶら下がるので、そのときは読点を隠す。
   PC・タブレットは1行に収まるため、従来どおり読点あり・改行なし。 */
.fvnotice__br{ display:none; }
@media (max-width:520px){
  .fvnotice__br{ display:inline; }
  .fvnotice__comma{ display:none; }
}

/* ==========================================================================
   (2) ヘッダー
   ========================================================================== */
.fvh{
  height:calc(var(--w) * 7.293 / 100);
  min-height:64px;
  display:flex;
  align-items:center;
  background:#fff;
  border-bottom:1px solid var(--c-line);
}
.fvh__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--w) * 1.6 / 100);
}
.fvh__brand{ display:flex; align-items:center; gap:calc(var(--w) * 1.10 / 100); min-width:0; }
.fvh__logo{ width:calc(var(--w) * 3.39 / 100); height:calc(var(--w) * 3.39 / 100); min-width:30px; min-height:30px; object-fit:contain; flex:none; }
.fvh__title{ font-size:calc(var(--w) * 2.344 / 100); font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.fvh__sep{ width:1px; height:calc(var(--w) * 2.21 / 100); background:var(--c-line); flex:none; }
.fvh__area{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .47 / 100);
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700; color:var(--c-blue); white-space:nowrap;
}
.fvh__area .fvico{ font-size:calc(var(--w) * 1.56 / 100); }

.fvh__tel{ display:inline-flex; align-items:center; gap:calc(var(--w) * 1.02 / 100); flex:none; }
.fvh__tel-ico{
  width:calc(var(--w) * 2.60 / 100); height:calc(var(--w) * 2.60 / 100); min-width:26px; min-height:26px;
  display:grid; place-items:center;
  border-radius:calc(var(--w) * .59 / 100); background:var(--c-red-cta); color:#fff; flex:none;
}
.fvh__tel-ico svg{ width:56%; height:56%; }
.fvh__tel-body{ display:flex; flex-direction:column; line-height:1.25; }
.fvh__tel-num{ font-size:calc(var(--w) * 2.813 / 100); font-weight:900; letter-spacing:.01em; color:var(--c-ink); }
.fvh__tel-time{ font-size:calc(var(--w) * 1.016 / 100); font-weight:500; color:var(--c-muted); }

/* ==========================================================================
   (3) ヒーロー ― 3本の斜め線で3つの面に分ける
   ========================================================================== */
.fvhero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:calc(var(--w) * 55.67 / 100);          /* SPEC §1 */
  background:#fff;
}

/* 淡いブルーの三角形（上）：A上端 — B上端 — 交点 */
.fvhero::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:var(--w); translate:-50% 0; z-index:-2;
  background:var(--c-pale);
  clip-path:polygon(var(--lineA-top) 0, var(--lineB-top) 0, var(--vertex-x) var(--vertex-y));
}
/* 淡いブルーの三角形（下）：交点 — C下端 — A下端 */
.fvhero::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:50%; width:var(--w); translate:-50% 0; z-index:-2;
  background:var(--c-pale);
  clip-path:polygon(var(--vertex-x) var(--vertex-y), var(--lineC-bottom) 100%, var(--lineA-bottom) 100%);
}

/* 写真：左辺が「くの字」の5点ポリゴン */
/* 写真は「ステージ左端 → 画面右端」まで伸ばし、元のLPと同じく右へ抜けさせる。
   ボックスが画面幅で変わるので、切り位置は % ではなく --w からの実寸(calc)で指定する。
   こうすると斜めの座標は基準幅に固定されたまま、写真だけ右端まで届く。 */
.fvhero__media{
  position:absolute; top:0; bottom:0;
  left:calc(50% - var(--w) / 2);
  right:0;
  z-index:-1;
  clip-path:polygon(
    calc(var(--w) * 0.6650) 0,
    100% 0,
    100% 100%,
    calc(var(--w) * 0.5830) 100%,
    calc(var(--w) * 0.5139) var(--vertex-y));
}
.fvhero__media img{
  position:absolute;
  width:calc(var(--w) * 0.742);
  left:calc(var(--w) * 0.4859);
  top:var(--photo-top);
  height:auto;
  max-width:none;
}

.fvhero__inner{ height:100%; display:flex; align-items:flex-start; }
.fvhero__copy{
  padding-top:calc(var(--w) * 3.51 / 100);      /* SPEC §4：バッジ上端＝ヒーロー高の6.3% */
  width:min(calc(var(--w) * 70 / 100), 100%);   /* CTA帯（calc(var(--w) * 67.2 / 100)）が入りきる幅。狭いとボタンが痩せる */
}

/* --- バッジ（SPEC §5：1280換算 180x43） --- */
.fvhero__badge{
  display:inline-block;
  background:var(--c-blue); color:#fff;
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700; letter-spacing:.02em;
  padding:calc(var(--w) * .55 / 100) calc(var(--w) * 1.95 / 100);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
}

/* --- 見出し（SPEC §5：字高66.7／上端15.3%） --- */
.fvhero__title{
  margin:calc(var(--w) * .50 / 100) 0 0;        /* カンプとの実測差分で補正 */
  font-size:calc(var(--w) * 5.39 / 100);
  font-weight:900;
  line-height:1.24;         /* カンプの行送り（字送り102.6px÷字面82.8px）に一致 */
  letter-spacing:.005em;
}
.fvhero__em-blue{ color:var(--c-blue-ink); }
.fvhero__em-red{ color:var(--c-red); }

/* --- サブコピー（SPEC §4：上端41.1%） --- */
.fvhero__sub{
  margin:calc(var(--w) * 1.37 / 100) 0 0;
  font-size:calc(var(--w) * 1.797 / 100);
  font-weight:700;
  color:#26313F;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* --- チップ3つ（SPEC §5：帯幅554／1280換算） --- */
.fvhero__chips{ display:flex; flex-wrap:wrap; gap:calc(var(--w) * 1.09 / 100); margin:calc(var(--w) * 1.90 / 100) 0 0; }
.fvchip{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .86 / 100);
  background:#fff; border:calc(var(--w) * .12 / 100) solid #B9CDE6; border-radius:var(--radius);
  padding:calc(var(--w) * 1.17 / 100) calc(var(--w) * 1.88 / 100);
  font-size:calc(var(--w) * 1.406 / 100); font-weight:700;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.fvchip .fvico{ font-size:calc(var(--w) * 2.03 / 100); color:var(--c-blue); }

.fvhero__note{ margin:calc(var(--w) * .83 / 100) 0 0; font-size:calc(var(--w) * 1.094 / 100); color:var(--c-muted); }

/* --- 実績バー（SPEC §4：上端66.3%） --- */
.fvhero__achv{
  display:inline-flex; align-items:center; gap:calc(var(--w) * .94 / 100);
  margin:calc(var(--w) * 1.39 / 100) 0 0;   /* 枠の上端をカンプの64.0%に合わせる（SPECの66.4%は文字基準だった） */
  background:rgba(235,242,253,.92);
  border:1px solid #CBDCF3; border-radius:var(--radius);
  padding:calc(var(--w) * 1.17 / 100) calc(var(--w) * 2.34 / 100);
  font-size:calc(var(--w) * 1.641 / 100); font-weight:700;
  white-space:nowrap;
}
.fvhero__achv .fvico{ font-size:calc(var(--w) * 2.34 / 100); color:var(--c-blue); }
.fvhero__achv strong{ font-size:calc(var(--w) * 2.344 / 100); font-weight:900; color:var(--c-blue-ink); }

/* --- CTA（SPEC §5：電話420x98／WEB455x99／間隔20・1280換算） --- */
.fvhero__cta{
  display:flex; flex-wrap:wrap;
  gap:calc(var(--w) * 1.56 / 100);
  margin:calc(var(--w) * 1.50 / 100) 0 0;
  width:min(calc(var(--w) * 67.2 / 100), 100%);  /* カンプ実測：420+420+間隔20（1280換算）＝67.2% */
}
.fvbtn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--w) * 1.25 / 100);
  min-height:calc(var(--w) * 7.66 / 100);
  padding:calc(var(--w) * 1.09 / 100) calc(var(--w) * 2.0 / 100);
  border-radius:var(--radius);
  color:#fff; font-weight:800;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, filter .15s ease;
}
.fvbtn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.fvbtn .fvico{ font-size:calc(var(--w) * 2.34 / 100); }
.fvbtn__body{ display:flex; flex-direction:column; line-height:1.3; font-size:calc(var(--w) * 1.641 / 100); word-break:keep-all; }
.fvbtn__body small{ font-size:calc(var(--w) * 1.094 / 100); font-weight:500; opacity:.92; }
.fvbtn--tel{ background:var(--c-red-cta); }
.fvbtn--web{ background:var(--c-blue); }

/* 確認用の注記（デザインの一部ではない） */
.preview-note{
  margin:0; padding:22px 20px;
  background:#F4F6F9; border-top:1px dashed #C3CBD6;
  color:#7A8496; font-size:12.5px; text-align:center;
  word-break:keep-all; overflow-wrap:break-word;
}

/* ==========================================================================
   スマホ・タブレット（縦積み）
   比例拡縮はPC専用。狭い画面ではcqw基準だと文字が小さくなりすぎるため、
   ここから下は固定値＋clampに切り替える。
   ========================================================================== */
@media (max-width:900px){
  :root{ --radius:10px; }

  .fv-inner{ padding-inline:20px; }

  .fvnotice{ height:auto; min-height:0; }
  .fvnotice .fv-inner{ padding-block:10px; font-size:12.5px; }

  .fvh{ height:auto; min-height:0; }
  .fvh__inner{ flex-wrap:wrap; gap:10px; padding-block:12px; }
  .fvh__logo{ width:38px; height:38px; }
  .fvh__title{ font-size:clamp(15px,4.2vw,20px); }
  .fvh__sep{ display:none; }
  .fvh__area{ font-size:clamp(12px,3.4vw,15px); gap:4px; }
  .fvh__area .fvico{ font-size:15px; }
  /* スマホ・タブレットではヘッダーの電話番号と受付時間を出さない
     （ヘッダーを1行に収めるため。電話への導線はFVのCTAボタンが担う） */
  .fvh__tel{ display:none; }

  /* ヒーロー：写真を上部のバナー、コピーを下に */
  .fvhero{ height:auto; display:block; background:linear-gradient(180deg,#fff 0%,var(--c-pale) 100%); }
  .fvhero::before,.fvhero::after{ display:none; }
  /* 横長バナー。写真の配置はデスクトップと同じ採寸方式（顔幅・顔中心・頭頂を実測から逆算）。
     ★縦位置は top(%) ではなく margin-top(%) で指定する。
       top の % は「親の高さ」基準なので max-height を効かせると位置がズレる。
       margin-top の % は「親の幅」基準なので、バナーの高さが変わっても崩れない
       （768pxで max-height:470px を付けたら人物が下にズレる事故が起きたため）。 */
  /* 女性を右側に寄せる。元画像では女性が左から37%の位置にいるため、
     画像を拡大して左へずらすことで、バナー上では右側に来るようにする。
     ★縦位置は top(%) ではなく margin-top(%)。top の % は親の高さ基準なので
       バナーの高さを変えるとズレるが、margin-top の % は親の幅基準で崩れない。 */
  .fvhero__media{
    position:relative; inset:auto; z-index:0;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:12px;
    clip-path:none;
    /* 左側はチップを置く帯。写真を右に寄せるぶん、左は淡い青で埋める */
    background:linear-gradient(120deg,#F2F7FF 0%,var(--c-pale) 100%);
  }
  /* 元画像では女性が左から37%の位置にいる。バナー上で右(約67%)へ寄せるには
     画像を右へずらす必要があり、左に隙間ができるので上の背景で埋めている。
     顔中心 = left + 0.3744 × width（実測係数）。27% + 0.3744×132% ＝ 約76%。 */
  .fvhero__media img{
    position:absolute;
    top:0;
    left:27%;
    width:132%;         /* 顔幅＝バナー幅の約31% */
    margin-top:-58.7%;  /* 頭頂＝バナー上端から約25px（幅基準で算出） */
    height:auto;
    max-width:none;
    /* 左端を淡くぼかして、背景の水色との継ぎ目を消す */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14%);
  }
}

/* タブレット幅：バナーを浅くし、人物も少し引く */
/* ★タブレット専用はこの2行だけ。ここに他の指定を入れないこと。
   以前ここへコピーの文字サイズまで入れてしまい、521px未満（スマホ）で
   PC用の計算値のまま極小表示になる不具合を出した。 */
@media (min-width:521px) and (max-width:900px){
  .fvhero__media{ aspect-ratio:16 / 9; }
  .fvhero__media img{
    width:95%;
    left:14.4%;
    margin-top:-41.32%;
  }
}

/* スマホ・タブレット共通のコピー指定（900px以下すべてに効かせる） */
@media (max-width:900px){
  .fvhero__inner{ height:auto; display:block; }

  /* 並び順：バッジ → 見出し → サブ → 写真(チップを重ねる) → ボタン → 注記 → 実績
     HTMLの順序はPC版のまま（PCでは写真が絶対配置で流れから外れる）なので、
     スマホだけグリッドのエリア指定で並べ替える。
     写真とチップを同じエリアに置くことで重ね合わせを実現する。 */
  .fvhero__copy{
    width:auto; padding-top:22px; padding-bottom:28px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"fv-badge" "fv-title" "fv-sub" "fv-photo" "fv-cta" "fv-note";
  }
  .fvhero__badge{ grid-area:fv-badge; justify-self:start; }
  .fvhero__title{ grid-area:fv-title; }
  .fvhero__sub  { grid-area:fv-sub; }
  .fvhero__media{ grid-area:fv-photo; }
  .fvhero__chips{ grid-area:fv-photo; }   /* 写真に重ねる */
  .fvhero__cta  { grid-area:fv-cta; }
  .fvhero__note { grid-area:fv-note; }

  /* チップは写真の左側に縦積み */
  .fvhero__chips{
    position:relative; z-index:2;
    flex-direction:column;
    align-items:flex-start;
    align-self:center;
    justify-self:start;
    gap:8px;
    margin:0 0 0 12px;
    pointer-events:none;
  }
  .fvchip{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(2px);
    box-shadow:0 2px 8px rgba(1,29,66,.10);
  }

  /* スマホ・タブレットでは「関西エリアなら」バッジを出さない */
  .fvhero__badge{ display:none; }
  .fvhero__title{ margin:0; font-size:clamp(27px,7.5vw,40px); }
  .fvhero__sub{ margin:12px 0 0; font-size:clamp(14px,3.9vw,17px); }
  .fvhero__chips{ gap:10px; margin:18px 0 0; }
  .fvchip{ padding:11px 15px; font-size:clamp(13px,3.6vw,16px); gap:8px; border-width:1.5px; }
  .fvchip .fvico{ font-size:20px; }
  .fvhero__note{ margin:12px 0 0; font-size:12px; }
  .fvhero__achv{ margin:14px 0 0; padding:11px 16px; font-size:clamp(13px,3.6vw,16px); gap:8px; }
  .fvhero__achv .fvico{ font-size:21px; }
  .fvhero__achv strong{ font-size:clamp(18px,5vw,22px); }
  /* CTAは100%幅の縦積み（PC版と同じ体裁） */
  .fvhero__cta{ width:auto; flex-direction:column; gap:11px; margin:18px 0 0; }
  .fvbtn{ flex:none; width:100%; min-height:70px; padding:12px; gap:10px; }
  .fvbtn .fvico{ font-size:22px; }
  .fvbtn__body{ font-size:clamp(15px,4.2vw,18px); word-break:auto-phrase; }
  .fvbtn__body small{ display:block; font-size:12px; }
  .fvbtn .fvico{ font-size:22px; }
}

@media (prefers-reduced-motion:reduce){
  .fvbtn{ transition:none; }
  .fvbtn:hover{ transform:none; }
}