/* /assets/site.css — ANSWER＋ (answer.esse-sense.com) 共通部品。LP・説明会・フォーム・データ系が同じものを読む。
   読み込み順: /assets/fonts/fonts.css → /assets/site.css → ページ固有の CSS。
   変えるときはここだけを直す（各ページに同じ値を写さない）。マークアップは /partials/header.html と footer.html。
   色の値は ds/tokens.css の [data-preset="answer-warm-dark"] の写し（ds/verify-preset-copy.mjs で照合。食い違えば正本が勝つ）。 */

/* ---- 1. トークン（preset answer-warm-dark の写し） ---- */
:root,[data-preset="answer-warm-dark"]{
  --paper:#0E0D0C;
  --surface:#171513;
  --surface-warm:#1F1C19;
  --surface-2:#272320;
  --surface-3:#2F2B27;
  --surface-4:#37322D;
  --ink-strong:#F2EFE9;
  --ink:#F2EFE9;
  --ink-soft:#CBC6BD;
  --ink-mute:#9A948A;
  --ink-faint:#736E66;
  --ink-4:#524D46;
  --ink-5:#3A3633;
  --rule:#2A2724;
  --rule-2:#3A3633;
  --rule-strong:#F2EFE9;
  --ui-border:#807870;
  --ui-border-hover:#9A948A;
  --accent:#FF5A47;
  --accent-fill:#CC1400;
  --accent-fill-hover:#9A0F00;
  --on-accent:#FFFFFF;
  --accent-muted:rgba(204,20,0,.12);
  --accent-fog:#2A1512;
  --state-danger:#FF5A47;
  --state-danger-bg:#2A1512;
  --state-warn:#E0B040;
  --state-warn-bg:#2E2818;
  --state-good:#4CAF82;
  --state-good-bg:#1F2E27;
  --state-info:#B8B8B4;
  --state-info-bg:#2A2A2A;
  --focus-ring:0 0 0 3px #FF5A47;
  --scrim:rgba(14,13,12,.72);
  --brass:#B08D57;
  --brass-soft:#C9AC79;
  --brass-deep:#8A6D3E;
  --brass-muted:rgba(176,141,87,.1);
}
/* verify-preset-copy.mjs が読む暗面ブロック（上と同じ値） */
[data-theme="dark"]{
  --paper:#0E0D0C;
  --surface:#171513;
  --surface-warm:#1F1C19;
  --surface-2:#272320;
  --surface-3:#2F2B27;
  --surface-4:#37322D;
  --ink-strong:#F2EFE9;
  --ink:#F2EFE9;
  --ink-soft:#CBC6BD;
  --ink-mute:#9A948A;
  --ink-faint:#736E66;
  --ink-4:#524D46;
  --ink-5:#3A3633;
  --rule:#2A2724;
  --rule-2:#3A3633;
  --rule-strong:#F2EFE9;
  --ui-border:#807870;
  --ui-border-hover:#9A948A;
  --accent:#FF5A47;
  --accent-fill:#CC1400;
  --accent-fill-hover:#9A0F00;
  --on-accent:#FFFFFF;
  --accent-muted:rgba(204,20,0,.12);
  --accent-fog:#2A1512;
  --state-danger:#FF5A47;
  --state-danger-bg:#2A1512;
  --state-warn:#E0B040;
  --state-warn-bg:#2E2818;
  --state-good:#4CAF82;
  --state-good-bg:#1F2E27;
  --state-info:#B8B8B4;
  --state-info-bg:#2A2A2A;
  --focus-ring:0 0 0 3px #FF5A47;
  --scrim:rgba(14,13,12,.72);
  --brass:#B08D57;
  --brass-soft:#C9AC79;
  --brass-deep:#8A6D3E;
  --brass-muted:rgba(176,141,87,.1);
}
:root{
  --white:#FFFFFF; --paper-light:#FAF8F4; --ink-dark:#0E0E0E; /* 白い図版パネルに限って使う */
  --font-sans:"Noto Sans JP","Noto Sans JP Fallback","Hiragino Sans",-apple-system,sans-serif;
  --font-display:"Anton","Anton Fallback","Archivo",sans-serif;
  --font-en:"Archivo",sans-serif;
  --font-mono:"Archivo","SF Mono",Menlo,monospace; /* 数字は Archivo（tabular-nums）。Fira Code は配信しない */
  /* 本文の基本設定（R3）: 15.5px・300・行間 1.95・字間 .02em */
  --fs-body:15.5px; --lh-body:1.95; --ls-body:.02em;
  --fs-micro:10px; --fs-label:12px; --fs-caption:13px;
  /* 英字ラベル（R7）: 12px・600・.22em */
  --ls-label:.22em;
  --measure:62ch; --measure-wide:74ch;
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-6:48px; --space-8:80px;
  --gap:clamp(20px,2.4vw,36px);
  --side:clamp(24px,5vw,64px);            /* 左右の余白。375px では 24px（R17） */
  --section-gap:clamp(96px,12vw,144px);   /* 節の上下（r1: 144 = 8pt 格子） */
  --maxw:1240px; --container:min(var(--maxw), 100% - 2*var(--side));
  /* 角丸の4段（R14）: 0（表）／4（カード・入力・道具ボタン）／8（パネル）／丸（主ボタン） */
  --radius-0:0; --radius-4:4px; --radius-8:8px; --pill:48px;
  --radius-sm:4px; --radius:4px; /* 旧名の互換。値は 4 に寄せる */
  --hair:1px solid var(--rule-2);
  --ease:cubic-bezier(.16,1,.3,1); --dur-fast:.2s; --dur-base:.5s; --dur-slow:.7s;
  --top-h:80px; --lp-top-h:80px; --lp-bar-h:52px;  /* ヘッダーの高さ 80（モバイル 64） */
}
@media (max-width:640px){ :root{ --top-h:64px; --lp-top-h:64px; --side:24px; } }

/* ---- 2. 基本 ---- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);letter-spacing:var(--ls-body);font-feature-settings:"palt";word-break:auto-phrase;text-wrap:pretty;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img,svg{display:inline-block;vertical-align:middle;}
.nw{white-space:nowrap;}  /* ANSWER＋ など語の途中で折らない */
.wrap{width:var(--container);margin:0 auto;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:fixed;left:-9999px;top:12px;background:var(--accent-fill);color:var(--white);padding:10px 16px;border-radius:var(--radius-4);font-weight:700;font-size:14px;z-index:100;} .skip:focus,.skip:focus-visible{left:var(--side);outline:2px solid var(--white);outline-offset:2px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* 英字ラベル（R7） */
.eyebrow,.en-label{font-family:var(--font-en);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-3);display:block;}
.eyebrow .n{color:var(--ink-mute);margin-right:14px;}
/* 見出し */
.sec-title{margin:0;font-size:clamp(28px,4.6vw,52px);font-weight:900;line-height:1.3;letter-spacing:-.01em;color:var(--ink-strong);}  /* R4 */
.sec-title .hl{color:var(--accent);}
.sec-head{margin-bottom:56px;max-width:820px;}
.sec-head .sec-title::after{content:"";display:block;width:40px;height:2px;background:var(--accent);margin-top:24px;opacity:.85;}
.sec-sub{margin:24px 0 0;max-width:var(--measure);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);font-weight:300;} /* r1: 24 */
.sec-sub strong{color:var(--ink);font-weight:700;}
.page-title{margin:0;font-size:44px;font-weight:900;letter-spacing:-.01em;line-height:1.3;color:var(--ink-strong);} /* R5: 「第1回 ANSWER＋説明会」 */
/* h3 の3段（R6） */
h3,.h3-m{font-size:17px;font-weight:700;line-height:1.5;letter-spacing:.02em;color:var(--ink-strong);margin:0 0 8px;}
.h3-l{font-size:22px;font-weight:700;line-height:1.45;letter-spacing:.02em;color:var(--ink-strong);margin:0 0 10px;}
.h3-s{font-size:15.5px;font-weight:700;line-height:1.55;letter-spacing:.02em;color:var(--ink-strong);margin:0 0 8px;}
@media (max-width:640px){ .page-title{font-size:28px;} .sec-title{font-size:clamp(22px,6.6vw,26px);} .sec-head{margin-bottom:36px;} }
/* ボタン: 主ボタンは丸、道具ボタンは 4 */
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:var(--pill);border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--white);font-family:var(--font-sans);font-weight:700;font-size:14.5px;letter-spacing:.06em;line-height:1;cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap;}
.btn:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);transform:translateY(-1px);}
.btn .ar{font-family:var(--font-en);transition:transform var(--dur-fast);} .btn:hover .ar{transform:translateX(4px);}
.btn-ghost{background:transparent;border-color:var(--ui-border);color:var(--ink);}
.btn-ghost:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--white);box-shadow:none;}
.btn-tool{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-4);border:1px solid var(--ui-border);background:transparent;color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;}
.btn-tool:hover{border-color:var(--ui-border-hover);background:var(--surface-2);}

/* ---- 3. ヘッダー（R1・B1）: 高さ 80（モバイル 64）。既定は透明でヒーローに重ねる。.solid で不透明 ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--top-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--side);border-bottom:1px solid transparent;transition:background var(--dur-base),border-color var(--dur-base);}
.top.solid{background:rgba(14,13,12,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--rule);}
.brand{display:flex;align-items:center;gap:14px;min-width:0;}
.brand .wm{display:inline-flex;align-items:center;color:var(--ink-strong);transition:opacity .4s var(--ease);}
.brand .wm svg{height:16px;width:auto;}
body.in-hero .brand .wm{opacity:.35;}
.brand .by{display:inline-flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--rule-2);}
.brand .by img{height:18px;width:auto;opacity:.9;}
.nav{display:flex;gap:28px;align-items:center;}
.nav a{font-size:12.5px;font-weight:300;letter-spacing:.1em;color:var(--ink-soft);transition:color var(--dur-fast);}  /* ナビ 300・12.5px */
.nav a:hover{color:var(--ink);}
.nav .pill{border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--white);padding:10px 20px;border-radius:var(--pill);font-size:12.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap;}
.nav .pill:hover{background:var(--accent-fill-hover);}
body.has-bar .nav .pill{background:transparent;color:var(--ink);border-color:var(--ui-border);}  /* R11: 固定帯が出ている間は枠線だけ */
.menu-toggle{display:none;background:none;border:1px solid var(--rule-2);border-radius:var(--radius-4);width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto;}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform var(--dur-fast),top var(--dur-fast);}
.menu-toggle span::before{top:-6px;} .menu-toggle span::after{top:6px;}
@media (max-width:980px){
  .nav a:not(.pill){display:none;}
  .menu-toggle{display:flex;}
  .top.menu-open .nav a:not(.pill){display:block;font-size:18px;font-weight:700;color:var(--ink);}
  .top.menu-open{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--rule);} /* backdrop-filter は fixed の基準を作るので、開いている間は外す */
  .top.menu-open .nav{position:fixed;top:var(--top-h);left:0;right:0;bottom:0;flex-direction:column;align-items:flex-start;background:var(--surface);border-top:var(--hair);padding:28px var(--side) 32px;gap:22px;overflow:auto;z-index:60;}
  .top.menu-open .menu-toggle{position:fixed;top:calc((var(--top-h) - 42px)/2);right:var(--side);z-index:61;}
  .top.menu-open .menu-toggle span{background:transparent;} .top.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg);} .top.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg);}
  body.menu-lock{overflow:hidden;}
}
@media (max-width:640px){ .nav{gap:12px;} .brand{gap:10px;} .brand .by{padding-left:10px;} .brand .by img{height:16px;} }
@media (max-width:420px){ .nav .pill .lng{display:none;} .nav .pill{padding:9px 14px;} }  /* B1: 「申し込む」に縮め、折り返さない */

/* ---- 4. フッター（R2） ---- */
.foot{background:var(--paper);border-top:var(--hair);padding:54px 0 40px;}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:flex-end;}
.foot .wm{display:inline-flex;color:var(--ink-strong);} .foot .wm svg{height:18px;width:auto;}
.foot .ff{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--font-en);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-mute);}
.foot .ff img{height:16px;width:auto;opacity:.85;}
.foot .org-note{font-size:12.5px;color:var(--ink-soft);line-height:1.95;font-weight:300;}
.foot .org-note b{color:var(--ink);font-weight:500;}
.foot .org-note a{color:var(--ink-mute);} .foot .org-note a:hover{color:var(--ink);}  /* メールは淡色 */
.foot .links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--ink-soft);}
.foot .links a:hover{color:var(--accent);}
.foot .copy{width:100%;margin-top:38px;padding-top:24px;border-top:var(--hair);font-family:var(--font-en);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-mute);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;}
@media (max-width:640px){ .foot{padding:40px 0 32px;} .foot-grid{gap:22px;} }

/* ---- 5. 共通の部品: 開催日のカードと OPEN の印（R14）。日付・時刻は seminar-config.js から描画する ---- */
.sessions{display:grid;gap:10px;}
.sess{display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;align-items:center;padding:16px 18px;border:1px solid var(--rule-2);border-radius:var(--radius-4);background:var(--surface);}
.sess .id{font-family:var(--font-en);font-size:20px;font-weight:600;line-height:1;color:var(--ink-mute);font-variant-numeric:tabular-nums;width:22px;text-align:center;}
.sess .dt{font-size:15px;font-weight:700;color:var(--ink-strong);letter-spacing:.04em;line-height:1.5;}
.sess .dt small{display:block;font-size:var(--fs-label);font-weight:300;color:var(--ink-soft);letter-spacing:.04em;margin-top:2px;}
.sess .st{font-family:var(--font-en);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:700;padding:4px 9px;border:1px solid var(--rule-2);border-radius:var(--radius-4);color:var(--ink-soft);}
.sess.open{border-color:var(--ui-border);} .sess.open .st{color:var(--accent);border-color:rgba(255,90,71,.5);}
.sess.closed{opacity:.55;}
.ended{border-left:3px solid var(--accent);padding:12px 16px;background:var(--accent-fog);font-size:14.5px;line-height:1.9;margin:0 0 20px;color:var(--ink);}
@media (max-width:640px){ .sess{grid-template-columns:auto 1fr;} .sess .st{grid-column:2;justify-self:start;margin-top:6px;} }

/* ---- 6. 図の仕様（R15）: 線 1px var(--rule-2)、強調 1.5px、文字 12px 以上、数字は Archivo 600、赤は ANSWER＋／選択中だけ ---- */
.fig-num{font-family:var(--font-en);font-weight:600;font-variant-numeric:tabular-nums;}
.fig-line{stroke:var(--rule-2);stroke-width:1;} .fig-line--em{stroke:var(--accent);stroke-width:1.5;}