/* ログインする前に読める画面の、共通のスタイルシート（2026-09-16 USER）。

   読むのは `static/*.html` の全部——トップページ（`index.html`）と、そこから増やす
   1 枚ずつの画面（`faq.html` ほか）。**ここに置くのは、どの画面にも出るもの**——
   色と字の変数・土台・ヘッダ・フッタ・ボタン・見出しの型・
   画面に入る動き・画面幅で変わる並び。

   1 枚にしか出ない見た目は、その画面のスタイルシートへ置く
   （トップページは `landing.css`・よくある質問は `faq.css`）。

   **配るのは Worker ではない**——`static/assets/` は `app/wrangler.jsonc` の `assets` が
   そのまま配る（`/assets/site.css`）。HTML の側は相対で `assets/site.css` と書く。 */

:root {
  --pink: #e62486;
  --pink-dark: #bd176a;
  --pink-pale: #fff0f7;
  --green: #88be35;
  --ink: #15171a;
  --muted: #646a73;
  --line: #e8eaed;
  --soft: #f6f7f9;
  --blue-soft: #eef4ff;
  --max: 1180px;
  --shadow: 0 24px 70px rgba(30, 36, 45, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* **本文が短い画面でも、フッタを画面のいちばん下に置く**（2026-09-16 USER）——
     ヘッダ・本文・フッタを縦に積み、余った高さを本文が受け取る。本文が画面より
     長いときは、いつもどおりフッタが本文の後ろに続く。
     `svh` は browser の上下の道具立てを引いた高さ（携帯で `vh` を使うと、
     隠れている道具立てのぶんだけフッタが画面の外へ押し出される） */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* 余った高さを受け取るのは本文だけ。`0 auto` は「縮めない・中身より小さくしない」 */
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

/* **文の中のリンク**（2026-09-16 USER）——地の文から見分けがつく色と下線を付ける。
   `a { color: inherit }` のままだと、文と同じ色で押せることが分からない。
   ヘッダ・フッタ・ボタン・パンくずは自分で色を持つので、
   当てるのは本文の段落・箇条書き・表・図の説明だけ */
main p a:not(.btn), main li:not(.breadcrumb li) a:not(.btn),
main td a:not(.btn), main figcaption a:not(.btn) {
  color: var(--pink-dark); font-weight: 800;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
main p a:not(.btn):hover, main li:not(.breadcrumb li) a:not(.btn):hover,
main td a:not(.btn):hover, main figcaption a:not(.btn):hover { color: var(--pink); }

/* 文の中で色だけ変える小さな部品（HTML に `style` を書かないための置き場） */
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 14px; }

/* ヘッダ（画面の上に貼り付く案内） */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(232,234,237,.85);
  backdrop-filter: blur(14px);
}
.header-inner { height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 220px; }
.brand img { width: 138px; height: auto; }
.brand-divider { width: 1px; height: 28px; background: var(--line); }
.brand-service { font-size: 12px; line-height: 1.25; color: var(--muted); font-weight: 700; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; }
.nav a { text-decoration: none; transition: color .2s ease; }
.nav a:hover { color: var(--pink); }
.nav a[aria-current="page"] { color: var(--pink); }

/* ボタン */
.header-cta, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; text-decoration: none; font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-cta { padding: 12px 20px; color: #fff; background: var(--pink); }
.header-cta:hover, .btn-primary:hover { transform: translateY(-2px); }
.header-login { flex-shrink:0; display:inline-flex; align-items:center; padding:11px 18px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:14px; font-weight:800; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.header-login:hover { background:var(--soft); transform:translateY(-2px); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); cursor: pointer; }
.menu-btn span { display: block; width: 19px; height: 2px; background: var(--ink); margin: 4px auto; }
.btn { min-height:56px; padding: 0 25px; }
.btn-primary { color:#fff; background:var(--pink); }
.btn-secondary { border:1px solid var(--line); background:#fff; }
.btn-secondary:hover { background:var(--soft); transform:translateY(-2px); }
.btn-accent { color:var(--pink-dark); background:var(--pink-pale); }
.btn-accent:hover { background:#ffe1ee; transform:translateY(-2px); }

/* 節と見出し */
section { padding: 96px 0; }
.section-soft { background:var(--soft); }
.section-title { margin:0; font-size:clamp(34px,4.6vw,56px); line-height:1.2; letter-spacing:-.035em; }
.section-title .pink { color:var(--pink); }
.section-intro { margin:20px 0 0; color:var(--muted); font-size:18px; max-width:770px; }
.section-head { margin-bottom:44px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:900; letter-spacing:.08em; color:var(--pink-dark); }
.eyebrow::before { content:""; width:34px; height:3px; border-radius:3px; background:var(--pink); }

/* 1 枚ずつの画面の先頭（トップページ以外の入口。見出しと 1 行の説明だけ） */
.page-head { padding:62px 0 54px; background:var(--soft); }
.page-head h1 { margin:18px 0 0; font-size:clamp(32px,4.4vw,52px); line-height:1.2; letter-spacing:-.035em; }
.page-head p { margin:16px 0 0; color:var(--muted); font-size:17px; max-width:720px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 22px; padding:0; list-style:none; font-size:13px; color:var(--muted); }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { color:var(--pink); }
.breadcrumb li + li::before { content:"›"; margin-right:8px; color:var(--line); }

/* フッタ（画面のいちばん下） */
footer { padding:42px 0 28px; background:#15171a; color:#fff; }
.footer-top { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; }
.footer-brand { display:inline-block; }
.footer-brand img { width:150px; height:auto; }
.footer-note { color:rgba(255,255,255,.55); font-size:13px; margin-top:8px; }
.footer-links { display:flex; flex-wrap:wrap; gap:22px; font-size:13px; }
.footer-links a { color:rgba(255,255,255,.72); text-decoration:none; }
.copyright { margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.45); font-size:12px; }

/* 画面の下に貼り付く申し込みのボタン（幅の狭い画面だけ出る） */
.floating-cta { display:none; }

/* 画面に入ってきたところで現れる動き（`assets/site.js`） */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav, .header-cta { display:none; }
  .menu-btn { display:block; }
  .site-header.open .nav { display:flex; position:absolute; left:0; right:0; top:76px; flex-direction:column; align-items:flex-start; gap:0; padding:16px 20px 25px; background:#fff; border-bottom:1px solid var(--line); }
  .site-header.open .nav a { width:100%; padding:13px 0; border-bottom:1px solid var(--line); }
}
@media (max-width: 680px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .header-inner { height:66px; gap:12px; }
  .brand { min-width:0; }
  .header-login { padding:8px 14px; font-size:13px; }
  .brand img { width:115px; }
  .brand-divider, .brand-service { display:none; }
  .site-header.open .nav { top:66px; }
  .btn { width:100%; }
  section { padding:68px 0; }
  .page-head { padding:34px 0 40px; }
  .page-head p { font-size:15px; }
  .footer-top { flex-direction:column; }
  .floating-cta { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; min-height:54px; align-items:center; justify-content:center; border-radius:999px; background:var(--pink); color:#fff; text-decoration:none; font-weight:900; }
  body { padding-bottom:76px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
  [data-reveal] { opacity:1; transform:none; }
}