/*
 * SyncotBase LP スタイル
 * 見本モック（03_デザイン/SyncotBase_LP_モック_2026-07-08.html）の <style> を忠実移植。
 * 変更点のみ:
 *   - body → .lp-root にスコープ（他ルートへ漏らさない）
 *   - html のグラデ背景は #bgvideo のフォールバック背景へ
 *   - Gilroy は /lp/Gilroy-Medium.ttf を @font-face
 *   - Zen Kaku Gothic New / Noto Sans JP は page.tsx の Google Fonts <link> で読み込み
 *   - 比較用の動画スイッチャー（"本番には入れない"注記）は除外
 */
@font-face{font-family:'Gilroy';src:url('assets/Gilroy-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}

/* static-reset (Next のTailwind preflight相当をこの静的版で補う) */
html,body{margin:0;padding:0;}
body{min-height:100%;background:#EAF6F5;}

.lp-root{
  --bg:#F9FAFB; --surface:#FFFFFF; --surface-alt:#F3F4F6;
  --text:#111827; --text-muted:#4E545E; --border:#E9ECF1;
  /* SyncotBase ブランドティールに統一 */
  --primary:#5BBAC4; --primary-strong:#237A7E; --primary-soft:#E3F3F5;
  --accent:#10B981; --accent-soft:#D1FAE5; --cta:#5BBAC4; --cta-hover:#4AA7B1; --error:#EF4444;
  --cta-grad:linear-gradient(to right bottom,#91D2D9,#5BBAC4); --cta-grad-hover:linear-gradient(to right bottom,#7FC7CE,#4AA7B1); --cta-text:#fff;
  --font-sans:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --radius:12px; --radius-lg:16px; --radius-2xl:24px; --radius-3xl:32px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.04),0 1px 3px rgba(17,24,39,.06);
  --shadow-md:0 6px 20px rgba(17,24,39,.07),0 2px 6px rgba(17,24,39,.05);
  --shadow-lg:0 24px 60px rgba(47,110,107,.22);
  --focus:0 0 0 3px rgba(91,186,196,.45);
  --col:520px;
  font-family:var(--font-sans);font-size:16px;line-height:1.85;color:var(--text);
  -webkit-font-smoothing:antialiased;background:transparent;min-height:100vh;position:relative;
}
.lp-root *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* 背景動画（全面・固定・無音ループ）。読み込み中はグラデをフォールバック表示 */
#bgvideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none;background:linear-gradient(160deg,#EAF6F5 0%,#CFE9E7 46%,#AAD7D3 100%);background-size:cover;}
/* 背景動画の上の薄い白の膜（可読性UP・透け感は残す） */
#bg-scrim{position:fixed;inset:0;background:rgba(255,255,255,.28);z-index:-1;pointer-events:none;}
.lp-root h1,.lp-root h2,.lp-root h3,.lp-root p{margin:0;}
.lp-root a{color:inherit;text-decoration:none;}
.lp-root button,.lp-root input,.lp-root select,.lp-root textarea{font-family:inherit;font-size:inherit;}
.lp-root button{cursor:pointer;}
.lp-root :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius);}
.skip{position:absolute;left:-999px;top:0;}
.skip:focus{left:16px;top:16px;background:#fff;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-md);z-index:100;}

/* モバイル専用の改行（PC=1024px以上では無効化＝改行しない） */
.br-sp{display:inline;}
@media(min-width:1024px){.br-sp{display:none;}}

/* ===== レイアウト：左＝固定ステージ／右＝コンテンツ列（スクロール） ===== */
.layout{display:block;}
.stage-left{display:none;}
.content{padding:28px 20px 150px;}
.app{width:100%;max-width:var(--col);margin-inline:auto;}

@media(min-width:1024px){
  .layout{display:grid;grid-template-columns:46% 54%;}
  .stage-left{
    display:flex;position:sticky;top:0;height:100vh;flex-direction:column;justify-content:space-between;
    padding:44px 48px;
    background:transparent;
  }
  .content{padding:64px 184px 160px 0;display:flex;justify-content:flex-start;}
  .app{margin-inline:0 auto;padding-left:56px;padding-right:24px;max-width:calc(var(--col) + 80px);}
}
.panel{background:rgba(255,255,255,.72);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border:1px solid rgba(255,255,255,.65);border-radius:var(--radius-3xl);box-shadow:0 6px 18px rgba(31,126,130,.12),0 24px 60px rgba(20,52,56,.20);padding:32px 28px;margin-bottom:20px;}
.panel--hero{background:linear-gradient(180deg,#FFFFFF,#FBFDFF);}
.panel--tint{background:linear-gradient(180deg,var(--primary-soft),#FBFDFF);}
.panel--glass{background:rgba(255,255,255,.72);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border:1px solid rgba(255,255,255,.65);box-shadow:0 6px 18px rgba(31,126,130,.12),0 24px 60px rgba(20,52,56,.20);}
/* セクションの出現（スクロール連動の傾き・上昇） */
.reveal{transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;transition:transform .12s linear,opacity .12s linear;}
@media(prefers-reduced-motion:reduce){.reveal{transform:none!important;opacity:1!important;transition:none;}}
/* 見出しの出現：左から右へワイプ（セクション見出しのみ。H1は下記のとおり即時表示） */
.hx-wipeLR .sec-title{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.22,.61,.36,1);}
.hx-wipeLR.hv .sec-title{clip-path:inset(0 0 0 0);}
@media(prefers-reduced-motion:reduce){.hx-wipeLR .sec-title{clip-path:none!important;}}
/* A-1: H1はSSGのHTMLに全文を含めて即時表示。演出は0.4秒フェードイン1回のみ（JSでの組み立て・ワイプは廃止） */
@keyframes heroFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
h1.hero-title{animation:heroFadeIn .4s ease-out both;}
@media(prefers-reduced-motion:reduce){h1.hero-title{animation:none;}}

/* --- 左ステージ --- */
.stage-head{flex:0 0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.125rem;letter-spacing:.01em;}
.stage-note{font-size:.68rem;color:var(--primary-strong);opacity:.72;margin-top:8px;}

.stage-canvas{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0;padding:14px 0;}
.stage-caption{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--primary-strong);transition:.3s;}
.sv-wrap{position:relative;height:430px;}
.sv{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;display:flex;flex-direction:column;justify-content:center;}
.sv.is-active{opacity:1;transform:none;}
.sv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:20px;}
.sv-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:14px;}
.sv-head span{font-size:11px;font-weight:500;color:var(--text-muted);background:var(--surface-alt);padding:3px 10px;border-radius:var(--pill);}

/* 予約カレンダー（ステージ用） */
.sv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.sv-cal .d{font-size:10px;color:var(--text-muted);text-align:center;}
.sv-cal .c{aspect-ratio:1;border-radius:8px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted);}
.sv-cal .c.has{background:var(--primary-soft);color:var(--primary-strong);font-weight:700;}
.sv-cal .c.today{background:var(--primary);color:#fff;font-weight:700;}
.sv-line{margin-top:14px;display:flex;gap:10px;background:var(--accent-soft);border:1px solid #A7F3D0;border-radius:var(--radius-lg);padding:11px 13px;align-items:flex-start;}
.sv-line .a{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.sv-line .l{font-size:11px;color:#065F46;font-weight:700;}
.sv-line .b{font-size:.8rem;line-height:1.5;}

/* カルテ・患者管理 */
.krow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border);}
.krow:last-child{border-bottom:none;}
.kav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex:0 0 auto;}
.kmeta{flex:1;display:flex;flex-direction:column;}
.kmeta b{font-size:.9rem;}.kmeta small{font-size:.72rem;color:var(--text-muted);}
.kbadge{font-size:11px;font-weight:700;color:#065F46;background:var(--accent-soft);border:1px solid #A7F3D0;padding:3px 10px;border-radius:var(--pill);white-space:nowrap;}

/* 予約分析 */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.kc{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;}
.kc small{font-size:.7rem;color:var(--text-muted);display:block;margin-bottom:2px;}
.kc b{font-size:1.15rem;}
.kc b i{font-size:.7rem;color:var(--text-muted);font-weight:500;font-style:normal;margin-left:3px;}
.spark{width:100%;height:74px;display:block;}

/* Excel取込プレビュー */
.xrow{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:8px;padding:9px 10px;font-size:.75rem;border-bottom:1px solid var(--border);align-items:center;}
.xrow.head{background:var(--surface-alt);font-weight:700;color:var(--text-muted);border-radius:8px 8px 0 0;}
.xconfirm{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--primary-soft);color:var(--primary-strong);font-weight:700;font-size:.85rem;padding:11px;border-radius:var(--radius-lg);}

/* ブランド静止画 */
.sv-brand{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;gap:12px;width:min(496px,100%);height:190px;padding:22px 28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-2xl);box-shadow:0 6px 18px rgba(31,126,130,.1),0 24px 60px rgba(20,52,56,.16);}
.sv-brand .biglogo{display:flex;align-items:center;gap:12px;font-family:'Gilroy',var(--font-sans);font-weight:500;font-size:1.7rem;letter-spacing:.01em;background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:0;}
.sv-brand .biglogo .dot{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow-md);}
.sv-brand p{font-size:1.02rem;color:var(--text-muted);line-height:1.7;max-width:320px;}
/* 左ステージの切り替えコピー（英単語＋日本語） */
.stage-copy{width:100%;text-align:center;transition:opacity .25s ease;}
.stage-copy.fading{opacity:0;}
.sv-brand .stage-en{text-align:center;max-width:none;font-size:.74rem;font-weight:700;letter-spacing:.16em;margin:0 0 12px;text-indent:.16em;background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.sv-brand .stage-jp{font-size:1.02rem;color:var(--text-muted);line-height:1.75;max-width:440px;margin:0 auto;}
/* 最後のパターン：ロゴ（SyncotBase）だけをSから一文字ずつ出す */
.sv-brand.brand-only .biglogo{display:none;}
.sv-brand.brand-only .stage-jp{display:none;}
.sv-brand.brand-only .stage-en{font-family:'Gilroy',var(--font-sans);font-size:1.7rem;font-weight:500;letter-spacing:.01em;color:var(--text);text-indent:0;margin:0;}
.stage-en .ltr{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.stage-en.lit .ltr{opacity:1;transform:none;}

.stage-cta{max-width:360px;flex:0 0 auto;}
.stage-cta .btn-cta{width:100%;white-space:nowrap;}
.stage-cta .micro{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--text-muted);margin-top:10px;}
.stage-cta .micro svg{color:var(--cta);flex:0 0 auto;}

/* --- 浮遊CTA --- */
.float-cta{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:20;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(92vw,460px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.float-cta.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 28px;border:none;border-radius:var(--radius-lg);background:var(--cta-grad);color:var(--cta-text)!important;font-size:1.0625rem;font-weight:700;white-space:nowrap;box-shadow:0 10px 30px rgba(91,186,196,.4);transition:.15s;}
/* A-2: 狭幅（〜390px/320px）でも「まずは2ヶ月、試してみる」を1行に収める（文言は変更しない） */
@media(max-width:430px){.btn-cta{font-size:1rem;padding:0 18px;}}
@media(max-width:360px){.btn-cta{font-size:.9rem;padding:0 14px;gap:6px;letter-spacing:-.01em;}}
.btn-cta:hover{background:var(--cta-grad-hover);}
.btn-cta:active{transform:translateY(1px);}
.float-cta .micro{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted);background:rgba(255,255,255,.82);backdrop-filter:blur(4px);padding:4px 12px;border-radius:var(--pill);}
.float-cta .micro svg{color:var(--cta);}
.float-cta .micro-lead-pill{font-weight:500;color:var(--primary-strong);text-align:center;line-height:1.45;}
@media(min-width:1024px){ .float-cta{display:none;} }

/* --- E-1: PC(960px〜)の薄い追従ヘッダー（モバイルは出さない） --- */
.pc-subheader{display:none;}
@media(min-width:960px){
  .pc-subheader{display:block;position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(249,250,251,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transform:translateY(-100%);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none;}
  .pc-subheader.show{transform:translateY(0);opacity:1;pointer-events:auto;}
  .pc-subheader-inner{max-width:1200px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;}
  .pc-subheader-brand{font-family:'Gilroy',var(--font-sans);font-weight:500;font-size:1.15rem;letter-spacing:.01em;color:#237A7E;}
  .pc-subheader-cta{display:flex;align-items:center;gap:12px;}
}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--primary);border-radius:var(--radius);background:transparent;color:var(--primary-strong)!important;font-size:.9rem;font-weight:700;white-space:nowrap;transition:.15s;}
.btn-ghost:hover{background:var(--primary-soft);}
.btn-cta.btn-cta-sm{width:auto;min-height:40px;padding:0 18px;font-size:.9rem;box-shadow:0 6px 18px rgba(91,186,196,.35);}
/* E-2: 中間挿入の低ハードルCTA */
.mid-subcta{margin-top:24px;padding-top:20px;border-top:1px dashed var(--border);}
.mid-subcta .subcta{margin-top:0;}

/* --- スマホ用スリム上部バー --- */
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(249,250,251,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.topbar .brand{font-family:'Gilroy',var(--font-sans);font-weight:500;font-size:1.15rem;letter-spacing:.01em;color:#237A7E;}
/* ロゴ＝トップへ戻るリンク（aの既定下線をリセット・色は各ロゴのルールを継承） */
a.brand,a.pc-subheader-brand{text-decoration:none;cursor:pointer;}
a.brand:hover,a.pc-subheader-brand:hover{opacity:.75;}

/* ハンバーガーボタン（3本線 → 開くと×） */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:10px;border:none;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nav-toggle-bar{display:block;width:24px;height:2px;border-radius:2px;background:var(--text);transition:transform .28s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* モバイルメニュー（背景を暗転＋上部からドロップ） */
.mobile-menu{position:fixed;inset:0;z-index:14;display:none;background:rgba(17,24,39,.32);backdrop-filter:blur(2px);}
.mobile-menu.open{display:block;}
.mobile-menu-panel{position:absolute;left:0;right:0;top:60px;display:flex;flex-direction:column;padding:8px 16px 18px;background:rgba(249,250,251,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translateY(-8px);opacity:0;transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .2s ease;}
.mobile-menu.open .mobile-menu-panel{transform:translateY(0);opacity:1;}
.mobile-menu-panel a{display:flex;align-items:center;min-height:52px;padding:0 6px;font-size:1.02rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);}
.mobile-menu-panel a:last-child{border-bottom:none;}
.mobile-menu-cta{justify-content:center;margin-top:12px;background:var(--cta-grad);color:var(--cta-text)!important;font-weight:700;border-radius:var(--radius);box-shadow:var(--shadow-md);}

@media(max-width:1023px){.app section{scroll-margin-top:72px;}}
@media(min-width:1024px){.topbar,.nav-toggle,.mobile-menu{display:none;}}

/* ===== セクション中身 ===== */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--primary-soft);color:var(--primary-strong);font-size:.8125rem;font-weight:500;padding:7px 13px;border-radius:var(--pill);margin-bottom:18px;}
h1.hero-title{font-size:clamp(1.7rem,6.2vw,2.2rem);font-weight:700;line-height:1.35;letter-spacing:.01em;margin-top:16px;margin-bottom:16px;text-align:center;}
.lead{font-size:1.0625rem;margin-bottom:8px;}
.lead .muted{color:var(--text-muted);}
.inpanel-cta{margin:22px 0 8px;}
.inpanel-cta .micro,.inline-cta .micro{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--text-muted);margin-top:10px;}
.inpanel-cta .micro svg,.inline-cta .micro svg{color:var(--cta);flex:0 0 auto;}
/* A-3: CTA直下マイクロコピー（新規1行）＋「お試しのしくみを見る」リンク */
.micro-lead{font-size:.8125rem;font-weight:700;color:var(--primary-strong);margin-top:12px;line-height:1.6;}
.micro-lead + .micro{margin-top:4px;}
/* お試しのしくみへの二次リンク: ゴーストpillボタン（主CTAより軽く・ブランド枠線） */
.trial-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 18px;font-size:.8125rem;font-weight:700;color:var(--primary-strong)!important;background:transparent;border:1px solid var(--primary);border-radius:var(--pill);text-decoration:none;transition:background .18s,border-color .18s,box-shadow .18s;}
.trial-link svg{transition:transform .18s;}
.trial-link:hover{background:var(--primary-soft);border-color:var(--primary-strong);box-shadow:0 4px 12px rgba(91,186,196,.22);}
.trial-link:hover svg{transform:translateX(3px);}
.trial-link:active{transform:translateY(1px);}
.inline-cta .micro-lead,.inline-cta .trial-link{text-align:center;}
.inline-cta .micro-lead{display:block;}
.stage-cta .micro-lead{margin-top:10px;}
/* A-4: 信頼チップ（事実ベースの既存訴求の再掲） */
.trust-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.trust-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary-strong);border-radius:var(--pill);padding:6px 12px;font-size:.78rem;font-weight:700;line-height:1;}
.trust-chip svg{flex:0 0 auto;}
.subcta{margin-top:16px;display:flex;flex-wrap:wrap;gap:14px;font-size:.9rem;}
.subcta a{display:inline-flex;align-items:center;gap:6px;color:var(--primary-strong);font-weight:500;}
.subcta a:hover{text-decoration:underline;text-underline-offset:3px;}
.subcta .sep{color:var(--border);}
.trust{margin-top:20px;display:flex;gap:8px;align-items:flex-start;font-size:.8125rem;color:var(--text-muted);}
.trust svg{color:var(--accent);flex:0 0 auto;margin-top:2px;}

/* ヒーロー内の予約ビジュアル（スマホで表示） */
.mock{margin-top:24px;border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--surface-alt);padding:18px;}
.mock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mock-head .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;}
.mock-head .t svg{color:var(--primary);}
.mock-head .p{font-size:11px;color:var(--text-muted);background:#fff;padding:3px 10px;border-radius:var(--pill);}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal .d{font-size:10px;color:var(--text-muted);text-align:center;}
.cal .c{aspect-ratio:1;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted);}
.cal .c.has{background:var(--primary-soft);color:var(--primary-strong);font-weight:700;}
.cal .c.today{background:var(--primary);color:#fff;font-weight:700;}
.line-note{margin-top:14px;display:flex;gap:10px;background:var(--accent-soft);border:1px solid #A7F3D0;border-radius:var(--radius-lg);padding:11px 13px;}
.line-note .a{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.line-note .l{font-size:11px;color:#065F46;font-weight:700;}
.line-note .b{font-size:.8rem;line-height:1.5;}
.cap{margin-top:10px;text-align:center;font-size:11px;color:var(--text-muted);}
/* 製品スクショの枠（幅はCTAボタンと同じ＝本文100%幅） */
.shot{margin:24px 0 0;}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-md);background:var(--surface-alt);}

.sec-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--cta);}
h2.sec-title{font-size:1.4rem;font-weight:700;line-height:1.42;margin:6px 0 10px;}
/* 見出しのティール塗り＋読みやすさ用の縁取り・薄い影 */
h1.hero-title, h2.sec-title, .closing h2{background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:.2px rgba(28,96,100,.65);text-shadow:0 1px 1px rgba(20,52,56,.14);}
/* 太字テキストも同じティール＋縁取り（影なし） */
strong, .pillar h3, .feature h3, .tl-item h3, .trial h3, .faq summary, .pcard .nm, .pcard .am, .foot-brand{background:var(--cta-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:.2px rgba(28,96,100,.65);}
.foot-brand{-webkit-text-stroke:0;}
.sec-lead{color:var(--text-muted);font-size:.95rem;margin-bottom:22px;}
.body-p{font-size:.95rem;margin-bottom:14px;}
.body-p:last-child{margin-bottom:0;}
.check{display:flex;flex-direction:column;gap:12px;}
.check .i{display:flex;gap:12px;align-items:flex-start;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;}
.check .i .k{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);display:flex;align-items:center;justify-content:center;}
.check .i p{font-size:.95rem;}
.insert{text-align:center;}
.insert .ic{width:52px;height:52px;border-radius:50%;margin:0 auto 16px;background:var(--surface);border:1px solid var(--border);color:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.pillars{display:flex;flex-direction:column;gap:14px;}
.pillar{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:16px 18px;text-align:left;position:relative;overflow:hidden;}
.pillar .num{position:absolute;top:6px;right:16px;font-size:2.6rem;line-height:1;font-weight:700;font-style:italic;color:var(--primary);opacity:.85;letter-spacing:.02em;}
.pillar-head{display:flex;align-items:center;gap:12px;padding-right:52px;}
.pillar .ic{width:42px;height:42px;border-radius:12px;margin:0;flex:0 0 auto;background:var(--primary-soft);color:var(--primary-strong);display:flex;align-items:center;justify-content:center;}
.pillar h3{font-size:1.0625rem;font-weight:700;margin:0;}
.pillar p{color:var(--text-muted);font-size:.92rem;margin-top:10px;}
.pillar-img{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.pillar-img img{display:block;width:100%;height:auto;border:1px solid var(--border);}
/* 本文中に差し込む画像（機能セクション等） */
.inl-img{margin:16px 0;display:flex;flex-direction:column;gap:10px;}
.inl-img img{display:block;width:100%;height:auto;border:1px solid var(--border);}

/* --- 画像クリックで拡大（ライトボックス） --- */
.app img{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(17,24,39,.82);backdrop-filter:blur(3px);cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox-img{max-width:min(1200px,94vw);max-height:92vh;width:auto;height:auto;border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.5);background:var(--surface);}
.lightbox-close{position:fixed;top:16px;right:16px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--pill);background:rgba(255,255,255,.92);color:var(--text);cursor:pointer;box-shadow:var(--shadow-md);}
.lightbox-close:hover{background:#fff;}
.feature+.feature{margin-top:28px;padding-top:28px;border-top:1px dashed var(--border);}
.feature h3{font-size:1.0625rem;font-weight:700;margin-bottom:12px;}
/* ===== FEATURES ④ 新機能カード（042口コミ依頼/043再来フォロー/044GCal同期）===== */
.f4-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0 0;}
.f4-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 16px;display:flex;flex-direction:column;}
.f4-badge{align-self:flex-start;font-size:11px;font-weight:700;border-radius:var(--pill);padding:2px 12px;margin-bottom:10px;}
.f4-badge-all{background:#ECFDF5;color:#059669;}
.f4-badge-std{background:#EFF4FD;color:#2563EB;}
.f4-card h4{font-size:.9375rem;font-weight:700;color:var(--text);margin:0 0 8px;}
.f4-card p{font-size:.8125rem;line-height:1.8;color:var(--text-muted);margin:0;}
.f4-card img{display:block;width:100%;height:auto;margin-top:12px;border:1px solid var(--border);border-radius:var(--radius);}
.f4-notes{margin-top:16px;font-size:.8125rem;line-height:1.75;color:var(--text-muted);}
.mini-list{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:10px;}
.mini-list li{display:flex;gap:10px;font-size:.9rem;}
.mini-list .dot{color:var(--accent);flex:0 0 auto;margin-top:3px;}
.note{margin-top:14px;font-size:.8125rem;color:var(--text-muted);background:var(--surface-alt);border-radius:var(--radius);padding:11px 14px;}
/* 連続する注記カードの間隔（.lp-root p{margin:0} のリセットに勝たせる。連続する .note はこの1箇所のみ） */
.note+.note{margin-top:14px;}
.steps{display:flex;flex-direction:column;gap:12px;margin:16px 0;}
.step{display:flex;gap:12px;align-items:flex-start;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;}
.step .n{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.step p{font-size:.92rem;}
.mk-o,.mk-d{color:#047857;font-weight:700;}.mk-t{color:#B45309;font-weight:700;}.mk-x{color:var(--text-muted);font-weight:700;}
/* 比較ポイントごとのカード積み上げ（PC・モバイル共通） */
.compare-cards{display:flex;flex-direction:column;gap:12px;}
.cmp-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);}
.cmp-card-k{font-weight:700;font-size:.9rem;padding:11px 14px;background:var(--surface-alt);border-bottom:1px solid var(--border);}
.cmp-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 14px;font-size:.85rem;border-bottom:1px solid var(--border);}
.cmp-row:last-child{border-bottom:none;}
.cmp-row.is-self{background:var(--primary-soft);}
.cmp-row .cmp-col{flex:0 0 auto;color:var(--text-muted);font-size:.8rem;display:inline-flex;align-items:center;gap:5px;}
.cmp-row.is-self .cmp-col{color:var(--primary);font-weight:700;}
.cmp-check{display:inline-flex;color:var(--primary);}
.cmp-val{text-align:right;font-weight:500;line-height:1.5;}
.table-note{font-size:.8rem;color:var(--text-muted);margin-top:12px;}
/* D: 開発パートナーの声（プレースホルダ） */
.partner-cards{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.partner-card{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:18px 20px;margin:0;}
.partner-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.partner-ava{width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:var(--primary-soft);color:var(--primary-strong);display:flex;align-items:center;justify-content:center;}
.partner-ava img{width:100%;height:100%;object-fit:cover;}
.partner-label{font-size:.92rem;font-weight:700;color:var(--text);}
.partner-body{margin:0;font-size:.9rem;line-height:1.75;color:var(--text-muted);}
.partner-note{margin-top:14px;font-size:.8125rem;color:var(--text-muted);}
/* ===== お客様の声（VOICE） ===== */
.vstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 18px;}
.vstat{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;}
.vstat-label{display:block;font-size:.72rem;color:var(--text-muted);margin-bottom:2px;}
.vstat-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;line-height:1.5;}
.vstat-before{font-size:.8rem;color:var(--text-muted);text-decoration:line-through;text-decoration-color:rgba(78,84,94,.5);}
.vstat-arrow{color:var(--primary);font-weight:700;}
.vstat-after{font-size:1.05rem;font-weight:700;color:var(--primary-strong);}
.vstat-badge{font-size:11px;font-weight:700;color:#065F46;background:var(--accent-soft);border:1px solid #A7F3D0;padding:2px 8px;border-radius:var(--pill);white-space:nowrap;}
/* スクリーンリーダー専用（視覚的には非表示） */
.vsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.voice-figure{margin:0 0 18px;}
.voice-figure img{width:80%;height:auto;aspect-ratio:1/1;display:block;margin:0 auto;border-radius:var(--radius-2xl);border:1px solid var(--border);cursor:default;}
.voice-figcaption{margin-top:8px;font-size:.8125rem;color:var(--text-muted);text-align:right;}
.voice-qa{display:flex;flex-direction:column;gap:16px;}
.vq{font-size:.9rem;font-weight:700;color:var(--primary-strong);margin-bottom:4px;}
.va{font-size:.9rem;line-height:1.85;color:var(--text-muted);}
.voice-pull{margin:18px 0 0;background:var(--primary-soft);border:1px solid rgba(91,186,196,.35);border-radius:var(--radius-2xl);padding:18px 20px;}
.voice-quote{margin:0;font-size:.95rem;line-height:1.85;font-weight:500;color:var(--text);}
.voice-name{margin-top:12px;font-size:.85rem;font-weight:700;color:var(--primary-strong);text-align:right;}
.voice-note{margin-top:14px;font-size:.8125rem;color:var(--text-muted);}
/* 開発パートナーの声：PC/タブレットでも縦積み（旧 @media(min-width:560px) の横並びを撤去・2026-07-19） */
.price{display:flex;flex-direction:column;gap:14px;}
.pcard{border:1px solid var(--border);border-radius:var(--radius-2xl);padding:22px;position:relative;}
.pcard.feat{border:2px solid var(--accent);}
.pcard .flag{position:absolute;top:-12px;right:20px;background:var(--cta);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--pill);}
.pcard .nm{font-size:1.125rem;font-weight:700;}.pcard .nm span{font-size:.8rem;color:var(--text-muted);font-weight:500;margin-left:6px;}
.pcard .am{margin:8px 0 16px;font-size:1.75rem;font-weight:700;line-height:1.2;}.pcard .am small{font-size:.8rem;color:var(--text-muted);font-weight:500;}
.pcard ul{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.pcard li{display:flex;gap:10px;font-size:.9rem;}.pcard li .k{color:var(--text-muted);min-width:84px;flex:0 0 auto;}
.price-extra{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;background:var(--surface-alt);}
.price-extra p{font-size:.88rem;margin-bottom:8px;}.price-extra p:last-child{margin-bottom:0;}
.trial{margin-top:16px;background:var(--primary-soft);border-radius:var(--radius-lg);padding:20px;}
.trial#trial-flow{scroll-margin-top:80px;}
.trial h3{font-size:1rem;font-weight:700;margin-bottom:10px;}
/* C: お試しのしくみ（タイムライン図。既定=縦型。横型はビューポートではなく“本文列の実幅”で判定＝container query） */
.trial-flow{margin-bottom:18px;container-type:inline-size;}
.tf-steps{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
/* 既定（縦型・フォールバック）では横向きの1本線は完全非表示。横型のときだけ @container で有効化する */
.tf-steps::before{content:none;}
.tf-step{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic n" "ic t" "ic b";column-gap:12px;align-items:start;}
/* 縦型：隣接ステップ間の縦つなぎ線 */
.tf-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:-16px;width:2px;background:#9FD5D2;z-index:0;}
.tf-ic{grid-area:ic;position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #9FD5D2;color:var(--primary-strong);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.tf-n{grid-area:n;font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--primary-strong);opacity:.85;}
.tf-t{grid-area:t;font-size:.92rem;font-weight:700;color:var(--text);line-height:1.4;margin-top:1px;}
.tf-b{grid-area:b;font-size:.78rem;color:var(--text-muted);line-height:1.5;margin-top:2px;}
.tf-note{font-size:.78rem;color:var(--text-muted);margin-top:2px;}
/* 横型：本文列（コンテナ）が4ステップを収められる幅のときだけ切替。
   本レイアウトの本文列内寸は ~424px（.app の max-width で頭打ち）のため、閾値を 480px に置き
   ~424px では確実に縦型へフォールバックさせる（横線もここでしか有効化されない）。 */
@container (min-width:480px){
  .tf-steps{flex-direction:row;gap:0;}
  /* つなぎ線は第1〜第4アイコン中心を結ぶ“1本”のみ（4等分＝中心は12.5/37.5/62.5/87.5%）。
     両端を12.5%内側に収めるためコンテナからはみ出さず、最後のステップの後にも飛び出さない。
     アイコン（白丸・z-index:1）が線を覆い、隣接ステップ間だけ線が見える。 */
  .tf-steps::before{content:"";position:absolute;top:19px;left:12.5%;right:12.5%;height:2px;background:#9FD5D2;z-index:0;}
  .tf-step{flex:1;min-width:0;grid-template-columns:1fr;grid-template-areas:"ic" "n" "t" "b";justify-items:center;text-align:center;padding:0 4px;}
  /* 縦型用の個別つなぎ線は横型では無効化（はみ出し防止） */
  .tf-step:not(:last-child)::before{content:none;}
  .tf-t{margin-top:6px;}
  .tf-n{margin-top:8px;}
}
.trial ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:.9rem;}
.trial .tnote{margin-top:12px;font-size:.8125rem;color:var(--text-muted);}
.inline-cta{margin-top:22px;text-align:center;}
.inline-cta .micro{justify-content:center;}
.timeline{position:relative;}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:22px;position:relative;}
.tl-item:last-child{padding-bottom:0;}
.tl-num{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;font-size:.9rem;}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:17px;top:40px;bottom:0;width:2px;background:var(--border);}
.tl-item h3{font-size:1rem;font-weight:700;margin-bottom:4px;}.tl-item p{font-size:.9rem;color:var(--text-muted);}
.safe-note{margin-top:20px;background:var(--primary-soft);border:1px solid #B4E0DE;border-radius:var(--radius-lg);padding:13px 16px;font-size:.9rem;color:var(--primary-strong);display:flex;gap:10px;}
.safe-note svg{flex:0 0 auto;margin-top:2px;}
.faq{display:flex;flex-direction:column;gap:10px;}
.faq details{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{flex:0 0 auto;color:var(--text-muted);transition:transform .2s;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq .ans{padding:0 18px 16px;color:var(--text-muted);font-size:.9rem;}
.closing{text-align:center;}
.closing h2{font-size:1.4rem;font-weight:700;line-height:1.42;margin-bottom:14px;}
.form-grid{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px;}
.field label .req{color:var(--error);font-size:.72rem;margin-left:6px;font-weight:500;}
.field label .opt{color:var(--text-muted);font-size:.72rem;margin-left:6px;font-weight:500;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:12px 14px;font-size:1rem;color:var(--text);}
.field input::placeholder,.field textarea::placeholder{color:#C7CCD4;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:transparent;box-shadow:var(--focus);outline:none;}
.hp{position:absolute;left:-9999px;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;}
.consent input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--cta);}
.consent a{color:var(--primary-strong);text-decoration:underline;text-underline-offset:2px;}
/* F: 送信ボタンは長文のため狭幅で折返し可（ヒーローCTAの1行制約とは別扱い） */
.btn-cta.btn-cta-form{white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px;text-align:center;}
.form-note{margin-top:12px;font-size:.8rem;color:var(--text-muted);}
.foot-notes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.foot-notes li{font-size:.8125rem;color:var(--text-muted);line-height:1.75;display:flex;gap:8px;}
.foot-notes li::before{content:"※";flex:0 0 auto;}
.foot-brand{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;font-family:'Gilroy',var(--font-sans);font-weight:500;font-size:1.15rem;}
/* G: OSの「視差効果を減らす」設定時は、LP内の全アニメ・スムーススクロールを無効化し即時表示にフォールバック */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .lp-root *,.lp-root *::before,.lp-root *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}
/* 右側の固定メニュー（PCのみ・スクロール連動でハイライト） */
.sidenav{display:none;}
@media(min-width:1024px){
  .sidenav{display:flex;flex-direction:column;gap:9px;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;}
  .sidenav .navlabel{font-size:.62rem;letter-spacing:.16em;color:var(--primary-strong);font-weight:700;padding-left:8px;margin-bottom:2px;opacity:.85;}
  .sidenav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:152px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.4);border-radius:var(--pill);padding:9px 15px;font-size:.83rem;font-weight:500;color:var(--text);box-shadow:var(--shadow-sm);transition:.15s;}
  .sidenav a:hover{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-strong);}
  .sidenav a svg{color:var(--text-muted);flex:0 0 auto;transition:.15s;}
  .sidenav a.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-md);}
  .sidenav a.active svg{color:#fff;}
}
/* ティールのグラデ文字をすべて単色#237A7E・縁取りなし・影なしに（最終状態） */
h1.hero-title, h2.sec-title, .closing h2, strong, .pillar h3, .feature h3, .tl-item h3, .trial h3, .faq summary, .pcard .nm, .pcard .am, .foot-brand, .sv-brand .biglogo, .stage-en .ltr{background:none;-webkit-text-fill-color:#237A7E;color:#237A7E;-webkit-text-stroke:0;text-shadow:none;}

/* ── LP指示書006：共通フッターの法務リンク／コピーライト・フォームのインラインエラー ── */
.foot-legal{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 4px;font-size:.8rem;line-height:1.8;color:#9CA3AF;-webkit-text-fill-color:#9CA3AF;}
.foot-legal a{color:#6B7280;-webkit-text-fill-color:#6B7280;text-decoration:none;padding:0 2px;}
.foot-legal a:hover{color:#237A7E;-webkit-text-fill-color:#237A7E;text-decoration:underline;}
.foot-copy{margin:8px 0 0;text-align:center;font-size:.72rem;color:#9CA3AF;-webkit-text-fill-color:#9CA3AF;}
.form-grid .fe{color:#DC2626;-webkit-text-fill-color:#DC2626;font-size:.78rem;margin:6px 0 0;font-weight:500;}
.form-grid input.invalid,.form-grid textarea.invalid,.form-grid select.invalid{border-color:#FCA5A5!important;background:#FEF7F7;}