@charset "UTF-8";
/* 店舗経営者向けMeta広告実践講座｜無料説明会LP
   全ページ共通のスタイル。文言を直すときはHTML側だけを触れば済むようにしている。 */

/* ===== 最小リセット ===== */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul,ol{list-style:none;margin:0;padding:0}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}

/* ===== 色・寸法 ===== */
:root{
  --bg:#F3F4F6;
  --soft:#F4F7FC;
  --soft2:#F5FAFF;
  --ink:#07152F;
  --blue:#0054C8;
  --blue-strong:#0B46D6;
  --blue-pale:#B8C6E4;
  --yellow:#FADD6D;
  --white:#FFFFFF;
  --muted:#5B6472;   /* 補足文字。以前の#8B8B8Bは薄すぎてスマホで読めなかった（2026-09-14） */
  --shadow:0 6px 24px rgba(11,70,214,.08);
  --radius:20px;
  /* 本文は端末標準フォント。日本語WebフォントはLCPを大きく遅らせるため本文には使わない
     ★"Noto Sans JP" をここに入れないこと。見出し用に太さ900だけ読み込んでいるので、
       ここにあるとWindows・Androidで本文まで全部極太になる（2026-10-13 外した） */
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
}

body{
  font-family:var(--sans);
  font-size:19px;   /* 2026-09-14 スマホの読みやすさ優先で17→19 */
  line-height:1.85;
  color:var(--ink);
  background:var(--bg);
  font-feature-settings:"palt";
}

/* ===== レイアウト ===== */
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
@media (min-width:768px){ section{padding:88px 0} }
.sec-soft{background:var(--soft)}
.sec-soft2{background:var(--soft2)}
.sec-white{background:var(--white)}
.sec-ink{background:var(--ink);color:var(--white)}

/* ===== 見出し ===== */
.label{
  display:inline-block;font-size:15px;font-weight:700;letter-spacing:.08em;
  color:var(--blue);background:var(--white);border:1px solid var(--blue-pale);
  border-radius:999px;padding:5px 16px;margin-bottom:20px;line-height:1.6;
}
.sec-ink .label{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff}
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.55;letter-spacing:.01em}
h1{font-size:29px}
h2{font-size:24px}
@media (min-width:768px){ h1{font-size:38px} h2{font-size:29px} }
h3{font-weight:700;font-size:19px;line-height:1.6}
.lead{margin-top:20px}
.small{font-size:17px;color:var(--muted);line-height:1.85}
.sec-ink .small{color:var(--blue-pale)}
.center{text-align:center}

/* 黄色マーカーはアクセント限定。CTA全面には使わない */
.mk{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 2px}
.hr-dot{border:0;border-top:2px dotted var(--blue-pale);margin:40px 0}

/* ===== カード ===== */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px}
@media (min-width:768px){ .card{padding:32px 28px} }
.cards{display:grid;gap:16px;margin-top:28px}
@media (min-width:768px){ .cards.two{grid-template-columns:1fr 1fr} }

/* 青い丸番号 */
.num{
  flex:0 0 auto;width:32px;height:32px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.row{display:flex;gap:14px;align-items:flex-start}
.row + .row{margin-top:18px}

/* チェック／バツのリスト */
.list li{position:relative;padding-left:30px;margin-top:12px}
.list li::before{position:absolute;left:0;top:0;font-weight:700}
.list.ok li::before{content:"○";color:var(--blue)}
.list.ng li::before{content:"×";color:var(--muted)}
.list.dot li::before{content:"";left:8px;top:.75em;width:7px;height:7px;border-radius:999px;background:var(--blue-pale)}

/* ===== CTA ===== */
.cta{
  display:block;width:100%;border:0;cursor:pointer;
  text-align:center;background:var(--blue);color:#fff;
  font-weight:700;font-size:20px;border-radius:999px;padding:18px 24px;
  box-shadow:0 8px 20px rgba(0,84,200,.28);transition:transform .15s,background .15s;
}
.cta:hover{background:var(--blue-strong);transform:translateY(-1px)}
.cta-note{margin-top:12px;font-size:16px;color:var(--muted);text-align:center}

/* ===== フォーム ===== */
.field{margin-top:22px}
.field > label{display:block;font-weight:700;font-size:17px;margin-bottom:8px}
.req{font-size:14px;color:#fff;background:var(--blue);border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:2px}
input[type=text],input[type=email]{
  width:100%;border:1px solid var(--blue-pale);border-radius:10px;
  padding:14px;background:#fff;font-size:18px;
}
input[type=text]:focus,input[type=email]:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.slot{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--blue-pale);border-radius:12px;padding:14px;background:#fff;margin-top:10px;cursor:pointer}
.slot input{margin-top:6px;width:18px;height:18px;accent-color:var(--blue)}
.slot:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,84,200,.15)}
.slot.closed{background:#f2f3f5;color:var(--muted);cursor:not-allowed}
.slot-time{font-weight:700}
.badge-closed{font-size:14px;font-weight:700;color:#fff;background:var(--muted);border-radius:4px;padding:2px 8px;margin-left:8px}
.err{color:#C0392B;font-size:16px;margin-top:8px;display:none}
.err.show{display:block}
.cta[disabled]{background:var(--blue-pale);box-shadow:none;cursor:not-allowed;transform:none}
.todo{
  background:#FFF8DC;border:1px dashed #C9A227;border-radius:10px;
  padding:12px 14px;font-size:14px;line-height:1.7;color:#6B5400;margin-top:16px;
}

/* ===== フッター ===== */
footer{background:var(--ink);color:var(--blue-pale);padding:40px 0;font-size:17px}
footer a{text-decoration:underline}
footer ul{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px}

/* ===== 法務ページ ===== */
.doc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 20px;margin:40px 0}
.doc h2{font-size:22px;margin-top:32px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{margin-top:12px;font-size:18px}
.doc .list.dot li{margin-top:8px}
.doc table{width:100%;border-collapse:collapse;margin-top:16px;font-size:17px}
.doc th,.doc td{border:1px solid var(--blue-pale);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--soft)}
/* スマホでは表を縦に積む。横に並べると項目名が長くて画面からはみ出すため */
@media (max-width:600px){
  .doc table,.doc tbody,.doc tr,.doc th,.doc td{display:block;width:auto}
  .doc tr{margin-top:12px}
  .doc th{border-bottom:0;font-size:16px}
  .doc td{border-top:0}
}
@media (min-width:601px){ .doc th{width:34%} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==================================================================
   ファーストビュー（2026-09-06 差し替え）
   見出しは太いゴシック。ここだけWebフォントを使う
   ================================================================== */
.fv{
  position:relative;overflow:hidden;
  padding:36px 0 56px;
  background:linear-gradient(180deg,#F7FBFF 0%,#EFF5FE 100%);
}
.fv-inner{position:relative;z-index:1;text-align:center}

/* 背景の飾り。読み上げ対象にはしない */
.fv-deco{position:absolute;z-index:0;pointer-events:none}
.fv-dots{
  background-image:radial-gradient(circle,#BBD0F2 2px,transparent 2px);
  background-size:13px 13px;
}
.fv-d1{top:18px;left:-4px;width:78px;height:65px}
.fv-d2{top:300px;right:6px;width:52px;height:78px}
.fv-blob{border-radius:50%;background:#E3EEFD}
.fv-b1{top:-70px;right:-70px;width:210px;height:210px}
.fv-b2{top:250px;left:-58px;width:104px;height:104px;background:none;border:14px solid #E3EEFD}
.fv-b3{bottom:-40px;left:-30px;width:130px;height:130px}
.fv-b4{bottom:60px;right:-46px;width:96px;height:96px}

/* バッジ */
.fv-badges{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:22px}
.pill{
  display:inline-block;border-radius:999px;line-height:1.5;
  font-weight:700;font-size:17px;letter-spacing:.02em;padding:7px 22px;
}
.pill-outline{background:#fff;border:2px solid var(--blue);color:var(--blue)}
.pill-solid{background:var(--blue);color:#fff;border:2px solid var(--blue)}

/* 見出し */
.fv-h1{
  font-family:"Noto Sans JP",var(--sans);
  font-weight:900;color:var(--blue-strong);
  line-height:1.28;letter-spacing:-.01em;
}
/* 「>」が要る。子孫すべてに効かせると、行の中の <span> まで改行してしまう */
.fv-h1 > span{display:block}
.fv-l1{font-size:clamp(34px,12.2vw,54px)}
.fv-l1 .x{font-size:.78em;padding:0 .04em}
.fv-l1 .sm{font-size:.66em}
.fv-l2{font-size:clamp(22px,7.9vw,35px);margin-top:.1em}
.fv-l3{font-size:clamp(26px,8.4vw,44px);margin-top:.12em}
.fv-l3 .sm{font-size:.82em}
/* 黄色は文字の下に敷く。文字の背面を全部塗らない */
.mk2{background:linear-gradient(to top,var(--yellow) .13em,transparent .13em);padding-bottom:.05em}

/* 悩みの引用ボックス */
.fv-quote{
  display:flex;gap:14px;text-align:left;
  background:#E6F0FD;border-radius:12px;
  padding:18px 20px;margin-top:26px;
  font-weight:700;font-size:19px;line-height:1.7;
}
.fv-quote::before{content:"";flex:0 0 auto;width:4px;border-radius:2px;background:var(--blue)}

/* わかることカード */
.fv-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:22px 18px;margin-top:22px}
.fv-card-title{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px}
.fv-card-title::before,.fv-card-title::after{content:"";flex:1;height:1px;background:#DCE6F5}
.fv-list{margin-top:6px}
.fv-list li{display:flex;align-items:center;gap:14px;text-align:left;padding:15px 2px;border-top:1px solid #ECF1F8}
.fv-list li:first-child{border-top:0}
.fv-list p{font-weight:700;font-size:18px;line-height:1.55}
.fv-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:#E6F0FD;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.fv-ico svg{width:24px;height:24px}

/* 数字の対比（月45名 → 月5名）。文字だけのページに"見る場所"を作るためのパーツ */
.nums{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px}
.num-box{
  flex:1 1 0;max-width:170px;text-align:center;
  background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 10px;
}
.num-box .cap{font-size:16px;font-weight:700;color:var(--muted);line-height:1.5}
.num-box .big{
  font-family:"Noto Sans JP",var(--sans);font-weight:900;
  font-size:30px;line-height:1.15;margin-top:6px;color:var(--blue-strong);
}
.num-box .big .u{font-size:.5em;margin-left:.1em}
.num-box.down .big{color:#6B7482}
.nums .arrow{flex:0 0 auto;width:22px;color:var(--blue-pale)}

/* 自院の実績。数字を大きく、内訳を小さく */
.res{margin-top:24px}
.res li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin-top:12px;
}
.res .p{font-weight:700;font-size:17px;line-height:1.5}
.res .v{
  font-family:"Noto Sans JP",var(--sans);font-weight:900;
  font-size:27px;line-height:1.15;color:var(--blue-strong);white-space:nowrap;
}
.res .v .u{font-size:.52em;margin-left:.08em}
.res .d{flex-basis:100%;font-size:16px;color:var(--muted);line-height:1.7;border-top:1px solid #ECF1F8;padding-top:10px}
/* 広告マネージャの画面。読ませるためではなく「実物である」ことを示すために置く */
.res .shot{flex-basis:100%;margin-top:4px;border:1px solid #E3EAF4;border-radius:8px;overflow:hidden}
.res .shot img{width:100%;height:auto}

/* 実際に配信している広告。3本を横に並べて「セット」として見せる */
.ads{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.ads img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);background:#E6F0FD}
@media (min-width:768px){ .ads{gap:16px} }

/* 次を読ませる案内 */
.fv-next{margin-top:22px;font-size:16px;font-weight:700;color:#3A5378}
.fv-next svg{width:26px;height:14px;margin:0 auto 6px;color:var(--blue)}

/* FV 画像版（2026-09-15）。文字も画像に入っているので lazy にしない */
.fv-img{background:#EEF4FD;padding:0}
@media (min-width:768px){ .fv-img{padding:0} }
.fv-img img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}

/* ==================================================================
   推薦の声（2026-10-13 追加）。写真｜肩書きの帯＋名前 → 吹き出しの推薦文 → 注記
   主役は講師なので、写真・名前は講師セクション（写真200×205px・名前19px）より控えめにする（2026-10-13 院長指摘）
   ================================================================== */
.rec-head{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;margin-top:28px}
.rec-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:14px;box-shadow:var(--shadow);background:var(--soft)}
.rec-band{
  display:inline-block;background:var(--blue);color:var(--white);font-weight:700;
  font-size:15px;line-height:1.5;letter-spacing:.04em;
  border-radius:999px;padding:4px 14px;
}
.rec-org{margin-top:8px;font-size:16px;font-weight:700;color:var(--muted);line-height:1.5;letter-spacing:.04em}
.rec-org .nw{display:inline-block}
.rec-name{
  margin-top:6px;padding-top:6px;border-top:2px dotted var(--blue-pale);
  font-family:var(--serif);font-weight:700;
  font-size:21px;line-height:1.5;letter-spacing:.05em;white-space:nowrap;
}
.rec-name small{font-size:15px;letter-spacing:0;margin-left:.3em}

/* 吹き出し。しっぽは写真の方へ向ける */
.rec-voice{
  position:relative;margin-top:24px;
  background:var(--white);border:2px solid var(--blue-pale);border-radius:var(--radius);
  padding:24px 20px 20px;box-shadow:var(--shadow);
}
.rec-voice::before,.rec-voice::after{content:"";position:absolute;left:42px;width:0;height:0;border-style:solid}
.rec-voice::before{top:-16px;border-width:0 14px 16px 14px;border-color:transparent transparent var(--blue-pale) transparent}
.rec-voice::after{top:-12px;margin-left:2px;border-width:0 12px 14px 12px;border-color:transparent transparent var(--white) transparent}
.rec-text{font-size:20px;font-weight:700;line-height:1.85;word-break:auto-phrase}
.rec-text .mk{color:var(--blue-strong)}
.rec-note{word-break:auto-phrase;margin-top:14px;padding-top:12px;border-top:1px solid #ECF1F8}
/* 推薦者が2人以上のとき、人と人の間に区切りを入れる（2026-10-30） */
.rec-item + .rec-item{margin-top:44px;padding-top:12px;border-top:1px dashed var(--blue-pale)}

@media (min-width:768px){
  .rec-head{grid-template-columns:150px 1fr;gap:24px}
  .rec-band{font-size:16px;padding:5px 16px}
  .rec-org{font-size:17px;margin-top:10px}
  .rec-name{font-size:24px;margin-top:8px;padding-top:8px}
  .rec-name small{font-size:16px}
  .rec-voice{margin-top:28px;padding:30px 32px 24px}
  .rec-voice::before,.rec-voice::after{left:62px}
  .rec-text{font-size:21px}
  .rec-note{text-align:right}
}