/* ============================================================
   SPD SYSTEM — Design v3 "Pop Bento"
   クリーム地 × コーラル / ラベンダー / ミント / ネイビー
   デカい数字・ピル型ボタン・大きめ角丸のbentoグリッド風
   モーション規範は v2 (Emil design-eng) を継承
   ============================================================ */
:root {
  --cream: #f1ede4;          /* page background */
  --paper: #fbf9f3;          /* light card */
  --white: #ffffff;
  --navy: #14161f;           /* dark card / primary */
  --navy-2: #23263a;
  --coral: #ee6244;          /* accent 1 */
  --coral-soft: #f8846a;
  --lavender: #c6b5f2;       /* accent 2 */
  --mint: #b8e3bb;           /* accent 3 */
  --sun: #f4c542;            /* live dot */
  --ink: #191b26;
  --ink-2: #565a6b;
  --muted: #9a9daa;
  --line: rgba(20, 22, 31, .1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI",
          Roboto, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --r-card: 24px; --r-md: 16px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --magenta: var(--coral); /* v1由来のインラインstyle互換（選択中枠のハイライト） */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--cream); color: var(--ink); font-size: 15.5px; line-height: 1.7; }
a { color: var(--ink); }
main { max-width: 1040px; margin: 0 auto; padding: 40px 40px 140px; }

/* ---------- shell: サイドバーレイアウト ---------- */
.shell { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar { width: 248px; flex-shrink: 0; color: var(--paper);
  /* TechGALAブランドのグラデーション背景＋可読性のための薄い暗幕 */
  background:
    linear-gradient(rgba(20,22,31,.30), rgba(20,22,31,.42)),
    url('/sidebar-bg.jpg') center / cover no-repeat,
    var(--navy);
  display: flex; flex-direction: column; gap: 20px; padding: 28px 18px 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.content { flex: 1; min-width: 0; }
.side-brand { padding: 0 10px; }
.side-logo { width: 118px; height: auto; display: block; }
.side-brand span { display: block; font-size: 11px; font-weight: 700; color: rgba(251,249,243,.7); margin-top: 8px; letter-spacing: 0; }
.side-user { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.07);
  border-radius: 18px; padding: 12px 14px; }
.side-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.side-user-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.side-user-role { font-size: 11px; color: rgba(251,249,243,.5); font-weight: 600; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.side-nav a { text-decoration: none; color: rgba(251,249,243,.72); font-size: 14.5px; font-weight: 700;
  padding: 12px 16px; border-radius: 14px; letter-spacing: -0.01em;
  transition: background-color 130ms ease, color 130ms ease, transform 130ms var(--ease-out); }
.side-nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.side-nav a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .side-nav a:not(.active):hover { background: rgba(255,255,255,.06); color: #fff; }
}
/* OIPのセットアップ未完了時、サイドバーの「セットアップ」項目を矢印付きで強調する */
.side-nav a.needs-setup { background: var(--coral); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .side-nav a.needs-setup:hover { background: var(--coral-soft); color: #fff; }
}
.setup-arrow { display: inline-block; animation: setup-arrow-bounce 1s ease-in-out infinite; font-size: 16px; }
@keyframes setup-arrow-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .setup-arrow { animation: none; }
}
.side-ext { display: flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 4px;
  color: rgba(251,249,243,.72); font-size: 14.5px; font-weight: 700; padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18); letter-spacing: -0.01em;
  transition: background-color 130ms ease, color 130ms ease; }
.side-ext svg { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .side-ext:hover { background: rgba(255,255,255,.08); color: #fff; }
}
.side-lang { display: flex; gap: 4px; background: rgba(255,255,255,.07); border-radius: 999px; padding: 3px; }
/* L-01: 非選択側（EN）が読めない不具合。コントラスト比を確保する */
.side-lang a { flex: 1; text-align: center; text-decoration: none; color: rgba(251,249,243,.92); font-size: 12px;
  font-weight: 700; padding: 6px 10px; border-radius: 999px; transition: background-color 130ms ease, color 130ms ease; }
.side-lang a.on { background: var(--paper); color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .side-lang a:not(.on):hover { color: #fff; } }
/* L-01: 明るい背景（ログイン画面など）に置く場合の配色。共通パーツなので修飾子で切り替える */
.side-lang.on-light { background: rgba(20,22,31,.06); }
.side-lang.on-light a { color: var(--ink-2); }
.side-lang.on-light a.on { background: var(--navy); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .side-lang.on-light a:not(.on):hover { color: var(--ink); } }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding: 0 6px; }
.side-foot .badge { text-align: center; }
.side-foot .badge.outline { background: transparent; color: rgba(251,249,243,.5); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.side-foot .badge.gray { background: rgba(255,255,255,.1); color: rgba(251,249,243,.8); }
.side-logout { display: block; text-align: center; text-decoration: none; color: rgba(251,249,243,.65);
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 11px; font-size: 13.5px; font-weight: 700;
  transition: background-color 130ms ease, color 130ms ease; }
@media (hover: hover) and (pointer: fine) { .side-logout:hover { background: rgba(255,255,255,.13); color: #fff; } }
@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap;
    align-items: center; padding: 14px 16px; gap: 10px; }
  .side-user { display: none; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-nav a { padding: 8px 13px; font-size: 13px; }
  .side-foot { margin-top: 0; flex-direction: row; margin-left: auto; }
  .side-logout { padding: 8px 13px; }
  main { padding: 24px 20px 100px; }
}

/* ---------- type: コントラスト強く ---------- */
h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.035em; margin: 8px 0 14px; text-wrap: balance; }
h2 { font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 16px; }
h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
p.lead { color: var(--ink-2); font-size: 16.5px; margin-bottom: 28px; max-width: 60ch; line-height: 1.75; }
.muted { color: var(--ink-2); font-size: 13.5px; }
hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(241, 237, 228, .82);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 24px; }
.brand { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; }
.brand small { font-weight: 500; color: var(--muted); margin-left: 8px; font-size: 12px; }
@media (max-width: 940px) { .brand small { display: none; } }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; padding: 7px 14px; border-radius: var(--r-pill); color: var(--ink-2);
  font-size: 13.5px; font-weight: 600; transition: background-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out); }
.topbar nav a.active { background: var(--navy); color: var(--paper); }
.topbar nav a:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .topbar nav a:not(.active):hover { background: rgba(20,22,31,.07); color: var(--ink); }
}
.spacer { flex: 1; }
.who { font-size: 11px; color: var(--ink-2); text-align: right; line-height: 1.4; white-space: nowrap; font-weight: 600; }
.topbar .badge, .topbar .btn { white-space: nowrap; }
.proxy-banner { background: var(--coral); color: #fff; text-align: center; padding: 7px; font-size: 13px; font-weight: 600; }
.proxy-banner a { color: #fff; }

/* ---------- bento cards: 余白多め ---------- */
.card { background: var(--paper); border-radius: var(--r-card); padding: 34px; margin-bottom: 24px;
  border: 1px solid rgba(20,22,31,.07); }
.card.white { background: var(--white); }
/* サブカードは黒背景・白文字で目立たせる（旧パープル/グリーンを廃止） */
.card.sub { border: none; background: var(--navy); color: var(--paper); }
.card.sub h2, .card.sub h3 { color: var(--paper); }
.card.sub .muted { color: rgba(251,249,243,.55); }
.card.sub hr { border-top-color: rgba(255,255,255,.14); }
.card.sub a:not(.btn) { color: #fff; }
.grid > .card.sub .stat .item .v { color: var(--paper); }
.grid > .card.sub .stat .item .k { color: rgba(251,249,243,.6); }
.grid { display: grid; gap: 24px; }
.grid.cols2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* OIP一覧だけは auto-fill にする。auto-fitは空トラックを潰すため、その部に1社しかいないと
   カードが全幅に伸びて他の部と大きさが揃わない。auto-fillなら2列ぶんのトラックが残る */
.oip-session > .grid.cols2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* entrance: fade+rise stagger（v2規範を継承） */
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
main > .card, main > .grid > .card {
  opacity: 0; transform: translateY(8px);
  animation: rise 280ms var(--ease-out) forwards;
}
main > .card:nth-of-type(2), main > .grid > .card:nth-of-type(2) { animation-delay: 45ms; }
main > .card:nth-of-type(3), main > .grid > .card:nth-of-type(3) { animation-delay: 90ms; }
main > .card:nth-of-type(4), main > .grid > .card:nth-of-type(4) { animation-delay: 135ms; }
main > .card:nth-of-type(n+5), main > .grid > .card:nth-of-type(n+5) { animation-delay: 170ms; }

/* 2-O-06: モーダル内部の要素は entrance アニメーション対象から除外する。
   .modal-bg > .card 等がtransformを持つと、position:fixedの子要素の基準がずれて画面外にはみ出すため */
.modal-bg .card, .modal-bg .modal { opacity: 1; transform: none; animation: none; }

/* ---------- buttons: ピル型・デカめ ---------- */
.btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; font-family: var(--font);
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; border-radius: var(--r-pill); padding: 11px 22px;
  transition: transform 130ms var(--ease-out), background-color 130ms ease, box-shadow 130ms ease; }
.btn:active { transform: scale(0.96); }
/* 重要CTA: button.jpg のパステルグラデを背景に、黒文字で視認性を確保 */
.btn.primary { color: var(--ink); background: #cfe4ec url('/button.jpg') center / cover;
  box-shadow: 0 2px 10px rgba(20,22,31,.18), inset 0 0 0 1px rgba(255,255,255,.35); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn.ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--navy); padding: 9.5px 20.5px; }
.btn.quiet { background: transparent; color: var(--ink-2); padding: 6px 12px; }
.btn.danger { background: var(--coral); color: #fff; box-shadow: 0 2px 8px rgba(238,98,68,.3); }
.btn.sm { font-size: 12.5px; padding: 7px 14px; }
.btn.ghost.sm { padding: 5.5px 12.5px; }
/* 特大CTA: button.jpg のグラデを背景に、過剰なぐらい目立たせる */
.btn.xl { display: block; width: 100%; text-align: center; font-size: 19px; font-weight: 800;
  padding: 22px 36px; color: var(--ink); background: #cfe4ec url('/button.jpg') center / cover; border-radius: 22px;
  letter-spacing: -0.02em; box-shadow: 0 10px 28px rgba(20,22,31,.18), inset 0 0 0 1.5px rgba(255,255,255,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transition: transform 140ms var(--ease-out), box-shadow 140ms ease, filter 140ms ease; }
.btn.xl::after { content: ' →'; }
.btn.xl:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn.xl:hover { filter: brightness(1.05) saturate(1.1); box-shadow: 0 14px 36px rgba(20,22,31,.24), inset 0 0 0 1.5px rgba(255,255,255,.5); }
}
.btn[disabled] { background: rgba(20,22,31,.08); color: var(--muted); cursor: not-allowed; box-shadow: none; border: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { filter: brightness(1.05) saturate(1.1); }
  .btn.ghost:hover { background: var(--cream); }
  .btn.quiet:hover { color: var(--ink); background: rgba(20,22,31,.06); }
  .btn.danger:hover { background: var(--coral-soft); }
}

/* ---------- badges: ピル ---------- */
.badge { display: inline-block; border-radius: var(--r-pill); padding: 4px 11px; font-size: 12px; font-weight: 700; }
.badge.gray { background: rgba(20,22,31,.08); color: var(--ink-2); }
.badge.dark { background: var(--navy); color: var(--paper); }
.badge.ember { background: var(--coral); color: #fff; }
.badge.magenta { background: var(--lavender); color: var(--navy); }
.badge.outline { background: var(--white); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- forms ---------- */
/* パスワード・URL・日付も text/email と同じ見た目に揃える（未指定だとブラウザ既定の角丸になり浮く） */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], textarea, select { width: 100%; background: var(--white);
  border: 1.5px solid rgba(20,22,31,.14); border-radius: var(--r-md); padding: 12px 16px; font-family: var(--font);
  font-size: 15px; color: var(--ink); transition: border-color 130ms ease, box-shadow 130ms ease; }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 6px; letter-spacing: -0.01em; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(238,98,68,.16); }
::placeholder { color: var(--muted); }

/* ---------- phase map: ポップなステップ ---------- */
.phase-map { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.phase-step { flex: 1; min-width: 122px; background: var(--white); border-radius: 18px; padding: 13px 14px;
  position: relative; border: 1px solid rgba(20,22,31,.08); transition: transform 150ms var(--ease-out); }
.phase-step .no { font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.08em; font-weight: 700; }
.phase-step .nm { font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em; }
.phase-step .pd { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; font-weight: 600; }
.phase-step.now { background: var(--coral); border-color: var(--coral); box-shadow: 0 6px 16px rgba(238,98,68,.35); }
.phase-step.now .nm { color: #fff; }
.phase-step.now .no, .phase-step.now .pd { color: rgba(255,255,255,.75); }
/* E-12: 終了したフェーズはグレーアウト（未来フェーズは通常表示のまま） */
.phase-step.past { background: rgba(20,22,31,.045); border-color: transparent; box-shadow: none; }
.phase-step.past .nm { color: var(--muted); }
.phase-step.past .no, .phase-step.past .pd { color: var(--muted); opacity: .8; }

/* ---------- timetable ---------- */
.tt-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.tt-status { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid rgba(20,22,31,.1);
  border-radius: 14px; padding: 10px 16px; }
.tt-status-pill { font-size: 9px; }
.tt-status-pill.done { color: var(--ink-2); }
.tt-status-pill.active { color: var(--coral); }
.tt-status-pill.idle { color: var(--muted); }
.tt-status-title { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.tt-status-note { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.tt { width: 100%; border-collapse: separate; border-spacing: 6px; }
.tt th { font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 4px; }
.tt td { background: var(--white); border-radius: 14px; padding: 12px 8px; text-align: center;
  font-size: 13px; font-weight: 600; min-width: 88px; border: 1px solid rgba(20,22,31,.08);
  transition: box-shadow 130ms ease, transform 130ms var(--ease-out), border-color 130ms ease; }
.tt td.head { background: transparent; border: none; text-align: left; font-weight: 800; font-size: 14.5px;
  min-width: 145px; letter-spacing: -0.02em; }
.tt td .cell-name { display: block; line-height: 1.2; }
.tt td .cell-status { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.16); }
.tt td.draft .cell-status { background: rgba(238,98,68,.14); color: var(--coral); }
.tt td.offer .cell-status { background: rgba(255,255,255,.16); }
.tt td.open { color: var(--muted); font-weight: 600; }
.tt td.confirmed { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.tt td.draft { background: var(--white); color: var(--coral); border: 2px dashed var(--coral); }
.tt td.offer { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.tt td.blocked { background: transparent; color: rgba(20,22,31,.2); border-style: dashed; }
.tt td.sameday { background: var(--coral); color: #fff; border-color: var(--coral); }
.tt td.selected { outline: 3px solid var(--coral); outline-offset: 1px; }
.tt td.clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .tt td.clickable:hover { border-color: var(--navy); box-shadow: 0 3px 10px rgba(20,22,31,.14); }
}
.tt td.clickable:active { transform: scale(0.96); }
.tt-wrap { overflow-x: auto; }

/* ---------- oip list ---------- */
/* OIP一覧は公開OIPが1社・3社などのときも2カラムを保ち、余った側は空けておく。
   共通の .grid.cols2 は auto-fit なので空トラックが潰れて1社だと横幅いっぱいに
   伸びてしまう。ここだけ auto-fill で空トラックを残す（狭い画面では従来どおり1列） */
.oip-session > .grid.cols2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.oip-filter input[type=text] { max-width: 480px; }
/* 絞り込みチップ（領域タグ／部／逆オファーのタグ／当日受付の部）は同じ挙動 */
.tagchip, .partchip, .rotag, .sdpart { cursor: pointer; border: none; font-family: var(--font);
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.tagchip.on, .partchip.on, .rotag.on, .sdpart.on { background: var(--navy); color: var(--paper); }
.tagchip.on .chip-sub, .partchip.on .chip-sub, .sdpart.on .chip-sub { color: var(--paper); opacity: .75; }
@media (hover: hover) and (pointer: fine) {
  .tagchip:not(.on):hover, .partchip:not(.on):hover, .rotag:not(.on):hover, .sdpart:not(.on):hover {
    background: rgba(20,22,31,.15); color: var(--ink); }
}
.oip-card { position: relative; background: var(--white); border: 1px solid rgba(20,22,31,.08); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease, border-color 160ms ease; }
.oip-applied { position: absolute; top: 14px; right: 14px; }
@media (hover: hover) and (pointer: fine) {
  a:hover > .oip-card { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,22,31,.12); border-color: var(--navy); }
}
a:active > .oip-card { transform: scale(0.98); }
.logo { border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(20,22,31,.1); padding: 6px; overflow: hidden; }
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-empty { color: var(--ink-2); font-weight: 700; letter-spacing: -0.01em; background: #f4f2ec; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
/* E-32/E-33: 一覧の絞り込み（部・領域・申込済みの表示切替） */
.filter-label { font-size: 11.5px; font-weight: 800; color: var(--ink-2); align-self: center;
  min-width: 34px; letter-spacing: .04em; }
/* 絞り込みチップの副題（「1部」＋「Day1 前半」） */
.partchip, .sdpart { display: inline-flex; align-items: baseline; gap: 6px; }
.chip-sub { font-size: 10.5px; font-weight: 700; opacity: .7; }
.filter-check { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.filter-check input { width: auto; margin: 0; }

/* E-72: 一覧／時間割の切替タブ */
.tabs { display: inline-flex; gap: 4px; background: rgba(20,22,31,.06); border-radius: var(--r-pill);
  padding: 4px; margin-bottom: 14px; }
.tabs .tab { border: none; background: transparent; color: var(--ink-2); font-weight: 800; font-size: 13.5px;
  padding: 8px 20px; border-radius: var(--r-pill); cursor: pointer; transition: background-color 130ms ease, color 130ms ease; }
.tabs .tab.on { background: var(--navy); color: var(--paper); }

/* E-15: 確定した商談のカード */
.meet-card { background: var(--white); border: 1px solid rgba(20,22,31,.08); border-radius: 20px; padding: 20px; }
.meet-card .logo { margin-bottom: 12px; }
.meet-name { font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em; }
.meet-dept { font-size: 12.5px; }
.meet-when { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-top: 12px; line-height: 1.1; }
.meet-when span { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-left: 2px; }
.meet-meta { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-top: 6px; line-height: 1.7; }

/* E-61〜E-64: 申込完了ページ */
.apply-done { text-align: center; padding: 56px 28px; }
.apply-done .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.apply-done .done-mark { width: 60px; height: 60px; border-radius: 50%; background: var(--navy); color: var(--paper);
  font-size: 30px; font-weight: 800; line-height: 60px; margin: 0 auto 18px; }
.apply-done .done-detail { max-width: 520px; margin: 24px auto; text-align: left; }
.apply-done .done-note { max-width: 560px; margin: 0 auto 22px; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,22,31,.45);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-bg.show { display: flex; animation: fadeIn 180ms ease forwards; }
.modal { background: var(--paper); border-radius: 28px; padding: 30px; max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(20,22,31,.3); }
.modal-bg.show .modal { animation: pop 210ms var(--ease-out); transform-origin: center; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ---------- ボタングループ（余白確保） ---------- */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.btn-col .btn { width: 100%; }

/* ---------- tables ---------- */
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 8px 12px;
  border-bottom: 1.5px solid var(--line); letter-spacing: 0.03em; white-space: nowrap; }
table.list td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  table.list tr:hover td { background: rgba(20,22,31,.03); }
}

/* ---------- notices / flash ---------- */
.notice { background: var(--white); border: 1px solid rgba(20,22,31,.08); border-radius: var(--r-md);
  padding: 13px 17px; margin-bottom: 9px; font-size: 14px; }
.notice .at { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.flash { background: var(--navy); color: var(--paper); padding: 13px 22px; border-radius: var(--r-pill);
  margin: 16px 0 6px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(20,22,31,.22);
  opacity: 1; transform: translateY(0);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
@starting-style { .flash { opacity: 0; transform: translateY(-8px); } }
.flash::before { content: '●  '; color: var(--sun); font-size: 10px; vertical-align: 2px; }
.flash.err { background: var(--coral); }
.flash.err::before { color: #fff; }

/* ---------- stats: 数字をデカく ---------- */
.stat { display: flex; gap: 36px; flex-wrap: wrap; }
.stat .item .v { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; }
.stat .item .k { font-size: 14px; color: var(--ink-2); margin-top: 6px; font-weight: 700; }

/* ---------- 参加不可時間テーブル（タップで✕・グレーアウト） ---------- */
.unav-legend { display: flex; gap: 20px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); flex-wrap: wrap; }
.unav-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.unav-demo { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 32px;
  border-radius: 10px; font-size: 12px; font-weight: 700; }
.unav-demo.ok { background: var(--white); border: 1px solid rgba(20,22,31,.12); color: var(--ink); }
.unav-demo.ng { background: rgba(20,22,31,.08); color: var(--ink-2); border: 1px dashed rgba(20,22,31,.2); }
.unav-table { width: 100%; border-collapse: separate; border-spacing: 5px; }
.unav-table th { font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 4px; }
.unav-table th.row-head { text-align: left; font-size: 13px; color: var(--ink); min-width: 118px; line-height: 1.4; }
.unav-cell { position: relative; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
  min-width: 82px; height: 58px; background: var(--white); border: 1px solid rgba(20,22,31,.12);
  border-radius: 12px; cursor: pointer; user-select: none; font-weight: 700; font-size: 13px;
  transition: background-color 130ms ease, border-color 130ms ease, transform 130ms var(--ease-out); }
.unav-cell:active { transform: scale(0.95); }
.unav-cell input { position: absolute; opacity: 0; pointer-events: none; }
.unav-cell .tnum { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.unav-cell .cross { display: none; font-size: 20px; font-weight: 800; color: var(--ink-2); }
/* ✕（参加不可）状態: グレーアウト＋時刻に取り消し線 */
.unav-cell:has(input:checked) { background: rgba(20,22,31,.08); border: 1px dashed rgba(20,22,31,.22); }
.unav-cell:has(input:checked) .time { display: none; }
.unav-cell:has(input:checked) .cross { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .unav-cell:hover { border-color: var(--navy); }
}

/* ---------- checkbox grid ---------- */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 7px; }
.checkbox-grid label { display: flex; align-items: center; gap: 7px; font-weight: 600; margin: 0;
  background: var(--white); border: 1.5px solid rgba(20,22,31,.1); border-radius: var(--r-pill);
  padding: 9px 14px; font-size: 12.5px; cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, transform 130ms var(--ease-out); }
.checkbox-grid label:has(input:checked) { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.checkbox-grid label:active { transform: scale(0.97); }
.checkbox-grid input { accent-color: var(--coral); }

/* ---------- mail (demo) ---------- */
.mail { background: var(--white); border: 1px solid rgba(20,22,31,.08); border-radius: 20px; padding: 20px; margin-bottom: 12px; }
.mail pre { white-space: pre-wrap; font-family: var(--font); font-size: 14px; color: var(--ink-2); margin-top: 10px; }

/* ---------- signage ---------- */
.signage { background: var(--navy); min-height: 100vh; color: var(--paper); padding: 40px; }
.signage h1 { color: var(--paper); font-size: clamp(36px, 5vw, 56px); margin-top: 0; }
.signage h2 { color: var(--paper); font-size: 20px; }
.signage .tt td { background: #23263a; border-color: #2e3148; color: #5d6178; }
.signage .tt td.open { background: var(--paper); color: var(--navy); font-weight: 800; }
.signage .tt td.head { background: transparent; border: none; color: var(--paper); }
.signage .tt td.confirmed { background: #2e3148; color: #6a6f8a; }
.signage .tt td.sameday { background: var(--coral); color: #fff; }
/* A-41: 当日受付NGのOIPも社名は出し、枠だけ「受付不可」と表現する */
.signage .tt td.closed { background: #1c1f2c; color: #4a4e63; }
.signage .sg-ng { font-size: 12px; font-weight: 700; color: #6a6f8a; }

/* ---------- misc ---------- */
@media (max-width: 640px) { .card { padding: 20px; border-radius: 20px; } main { padding-top: 16px; }
  .stat .item .v { font-size: 42px; } }

/* ============================================================
   Onboarding（react-bits風アニメーション・バニラ実装）
   ============================================================ */
.ob-body { background: var(--navy); color: var(--paper); min-height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; }
/* Aurora背景: ぼかした色ブロブがゆっくり動く */
/* OB-14: 背景動画（TechGALA公式サイトと同じ素材）＋可読性のための暗幕 */
.ob-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  pointer-events: none; filter: brightness(.42) saturate(.85); }
/* 明るいカットでも本文が読めるよう、中央をさらに落とす二重の暗幕 */
.ob-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(9,10,16,.72), rgba(9,10,16,.42) 70%),
    linear-gradient(rgba(9,10,16,.62), rgba(9,10,16,.72)); }
.ob-aurora { position: fixed; inset: 0; overflow: hidden; z-index: 1; filter: blur(60px); opacity: .34;
  mix-blend-mode: screen; pointer-events: none; }
.ob-aurora span { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; mix-blend-mode: screen; }
.ob-aurora span:nth-child(1) { background: #ee6244; top: -10%; left: -8%; animation: ob-float1 14s ease-in-out infinite; }
.ob-aurora span:nth-child(2) { background: #7b8cff; bottom: -12%; right: -6%; animation: ob-float2 18s ease-in-out infinite; }
.ob-aurora span:nth-child(3) { background: #46c39a; top: 30%; right: 20%; animation: ob-float3 16s ease-in-out infinite; }
@keyframes ob-float1 { 50% { transform: translate(18vw, 12vh) scale(1.15); } }
@keyframes ob-float2 { 50% { transform: translate(-14vw, -10vh) scale(1.1); } }
@keyframes ob-float3 { 50% { transform: translate(-10vw, 14vh) scale(1.2); } }

.ob-logo { position: fixed; top: 26px; left: 28px; width: 108px; z-index: 3; }
.ob-skip { position: fixed; top: 30px; right: 28px; z-index: 3; text-decoration: none; color: rgba(251,249,243,.6);
  font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  transition: color 130ms ease, background-color 130ms ease; }
@media (hover: hover) and (pointer: fine) { .ob-skip:hover { color: #fff; background: rgba(255,255,255,.08); } }

.ob-main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 90px 24px 30px; }
.ob-step { display: none; max-width: 760px; text-align: center; }
.ob-step.active { display: block; }
.ob-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 18px; }
.ob-title { word-break: auto-phrase; font-size: clamp(30px, 5vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; color: var(--paper); margin: 0 0 18px; }
.ob-sub { font-size: clamp(15px, 2vw, 18px); line-height: 1.75; color: rgba(251,249,243,.72); max-width: 620px; margin: 0 auto; }

/* Shiny Text: グラデが左右に流れる */
.shiny { background: linear-gradient(110deg, #fff 20%, #ee6244 40%, #c6b5f2 55%, #fff 80%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shiny 3.2s linear infinite; }
@keyframes shiny { to { background-position: -220% 0; } }

/* Stagger reveal */
.reveal { opacity: 0; transform: translateY(14px); }
.ob-step.active .reveal { animation: ob-rise 620ms var(--ease-out) forwards; }
.ob-step.active .reveal.d1 { animation-delay: 110ms; }
.ob-step.active .reveal.d2 { animation-delay: 220ms; }
.ob-step.active .reveal.d3 { animation-delay: 330ms; }
.ob-step.active .reveal.d4 { animation-delay: 440ms; }
@keyframes ob-rise { to { opacity: 1; transform: translateY(0); } }

/* Flow */
.ob-flow { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ob-flow-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 26px 22px; width: 210px; }
.ob-arrow { display: flex; align-items: center; color: rgba(251,249,243,.4); font-size: 26px; font-weight: 700; }
.ob-ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(238,98,68,.9), rgba(198,181,242,.9)); color: #fff; }
.ob-ic svg { width: 26px; height: 26px; }
.ob-ic-lg { width: 76px; height: 76px; border-radius: 22px; margin-bottom: 22px; }
.ob-ic-lg svg { width: 38px; height: 38px; }
.ob-flow-t { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.ob-flow-d { font-size: 12.5px; color: rgba(251,249,243,.6); margin-top: 6px; line-height: 1.5; }

/* About（スピード商談会とは？） */
.ob-about { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 26px auto 0; text-align: left; }
.ob-about-row { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 18px 20px; }
.ob-about-row .ob-ic { margin: 0; width: 48px; height: 48px; flex-shrink: 0; }
.ob-about-row .ob-ic svg { width: 23px; height: 23px; }
.ob-about-t { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.ob-about-d { font-size: 13px; color: rgba(251,249,243,.62); margin-top: 3px; line-height: 1.5; }

/* Phases（5フェーズのタイムライン） */
.ob-phases { display: flex; align-items: stretch; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; position: relative; }
.ob-phase { flex: 1; min-width: 132px; max-width: 180px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px 14px; text-align: center; position: relative; }
/* フェーズ間の矢印（横並び時のみ） */
.ob-phase:not(:last-child)::after { content: '→'; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: rgba(251,249,243,.35); font-weight: 700; font-size: 15px; z-index: 1; }
.ob-phase-no { width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(140deg, rgba(238,98,68,.95), rgba(198,181,242,.95)); }
.ob-phase-t { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.ob-phase-d { font-size: 11.5px; color: rgba(251,249,243,.6); margin-top: 5px; line-height: 1.45; }
@media (max-width: 720px) {
  .ob-phases { flex-direction: column; align-items: stretch; max-width: 420px; margin-left: auto; margin-right: auto; }
  .ob-phase { max-width: none; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; }
  .ob-phase-no { margin: 0; flex-shrink: 0; }
  .ob-phase:not(:last-child)::after { content: '↓'; right: auto; left: 33px; top: auto; bottom: -13px; transform: none; }
}

/* OB-12: 1ページ目のTechGALAロゴ */
.ob-hero-logo { width: min(230px, 62vw); height: auto; margin: 0 auto 22px; display: block;
  filter: invert(1) brightness(1.6); }

/* OB-23: 開催日時・会場 */
.ob-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.ob-meta span { font-size: 12.5px; font-weight: 700; color: rgba(251,249,243,.82);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 7px 16px; }

/* OB-24: OIP・エントリー企業・事務局の関係図 */
.ob-rel { max-width: 620px; margin: 26px auto 0; }
.ob-rel-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.ob-rel-node { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 16px 14px; text-align: center; }
.ob-rel-node.oip { background: rgba(198,181,242,.16); border-color: rgba(198,181,242,.4); }
.ob-rel-node.admin { background: rgba(238,98,68,.14); border-color: rgba(238,98,68,.38); }
.ob-rel-t { font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; }
.ob-rel-d { font-size: 11.5px; color: rgba(251,249,243,.62); margin-top: 4px; line-height: 1.5; }
.ob-rel-link { display: flex; flex-direction: column; gap: 6px; min-width: 122px; }
.ob-rel-arrow { font-size: 11px; font-weight: 700; color: rgba(251,249,243,.66); white-space: nowrap; }
.ob-rel-arrow.up { color: var(--lavender); }
.ob-rel-admin { margin-top: 12px; }
.ob-rel-brace { height: 16px; margin: 0 22%; border-left: 1px solid rgba(255,255,255,.2);
  border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 0 0 10px 10px; }
@media (max-width: 620px) {
  .ob-rel-main { grid-template-columns: 1fr; }
  .ob-rel-link { min-width: 0; align-items: center; }
}

/* OB-25 / OB-26: エントリー企業・OIPの説明
   上の関係図（.ob-rel-main）と左右の列が揃うよう、同じ幅・同じグリッド定義にする */
.ob-who { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; max-width: 620px;
  margin: 22px auto 0; text-align: left; }
.ob-who-gap { min-width: 122px; }
.ob-who-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 18px 18px; }
.ob-who-t { font-weight: 800; font-size: 14px; letter-spacing: -0.01em; }
.ob-who-d { font-size: 12.5px; color: rgba(251,249,243,.66); margin-top: 7px; line-height: 1.75; }
@media (max-width: 620px) { .ob-who { grid-template-columns: 1fr; } .ob-who-gap { display: none; } }
@media (max-width: 620px) { .ob-flow-item { width: 100%; } .ob-arrow { display: none; } }

/* Nav / dots */
.ob-nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 28px 30px; max-width: 760px; margin: 0 auto; width: 100%; }
.ob-nav .btn.ghost { background: transparent; color: rgba(251,249,243,.85); border-color: rgba(255,255,255,.28); }
.ob-dots { display: flex; gap: 8px; }
.ob-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); transition: all 220ms var(--ease-out); }
.ob-dot.on { width: 26px; background: var(--coral); }
.ob-dot.done { background: rgba(255,255,255,.5); }

/* Click spark */
.spark { position: absolute; width: 5px; height: 5px; border-radius: 999px; background: #fff; pointer-events: none;
  animation: spark 500ms var(--ease-out) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ob-video { display: none; }
  .ob-aurora { opacity: .5; }
  .ob-aurora span { animation: none; }
  .shiny { animation: none; }
  .ob-step.active .reveal { animation: none; opacity: 1; transform: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  main > .card, main > .grid > .card { animation: fadeIn 150ms ease forwards; transform: none; }
  .modal-bg.show .modal { animation: fadeIn 150ms ease; }
  .btn:active, .tt td.clickable:active, a:active > .oip-card, .checkbox-grid label:active { transform: none; }
  .flash { transition: opacity 150ms ease; transform: none; }
  a:hover > .oip-card, .phase-step { transform: none; }
}

/* ---------- A-22: OIP管理の行内フォーム ---------- */
.inline-form { display: inline-block; margin-right: 6px; }
.inline-form select { width: auto; min-width: 92px; padding: 7px 10px; font-size: 12.5px; margin: 0; }

/* ---------- A-34: 当日受付カード（別タブ・印刷用） ---------- */
.sd-card { max-width: 560px; margin: 40px auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--navy); color: var(--paper); padding: 20px 28px; }
.sd-card-head img { width: 118px; height: auto; filter: invert(1) brightness(1.6); }
.sd-id { font-size: 26px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sd-card-body { padding: 28px; }
.sd-k { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.sd-oip { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; }
.sd-dept { font-size: 13.5px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.sd-time { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-top: 2px; }
.sd-v { font-size: 14.5px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.sd-company { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.sd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line); padding: 16px 28px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
@media print {
  body { background: #fff; }
  .sd-card { border: none; margin: 0; max-width: none; }
  .sd-noprint { display: none; }
}

/* ---------- O-21〜O-23: セットアップ入力 ---------- */
.setup-field { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.setup-field:first-of-type { border-top: none; }
.setup-field .sub-label { display: flex; align-items: center; gap: 7px; font-size: 12px;
  font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.setup-field .req { background: var(--navy); color: var(--paper); border-radius: var(--r-pill);
  padding: 2px 8px; font-size: 10px; }
.setup-field .opt { background: rgba(20,22,31,.08); color: var(--ink-2); border-radius: var(--r-pill);
  padding: 2px 8px; font-size: 10px; }
.setup-eg { margin: 8px 0 12px; }
.setup-eg summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.setup-eg pre { background: rgba(20,22,31,.045); border-radius: var(--r-md); padding: 14px 16px;
  margin-top: 8px; font-size: 12.5px; line-height: 1.8; white-space: pre-wrap; font-family: var(--font); }
.ref-list { padding-left: 20px; line-height: 2; }

/* ---------- O-54 / O-38: 画面内の注意書き ---------- */
.notice-inline { border-left: 4px solid var(--coral); }

/* 事業部ごとに枠を分けているOIPが「持たない枠」のセル（時間割の列を揃えるための空欄） */
.tt td.none { background: transparent; border: 1px dashed rgba(20,22,31,.12); box-shadow: none; }
.signage .tt td.none { background: transparent; border: 1px dashed #2e3148; }

/* ---------- 逆オファーの Coming soon / 枠なし表示 ---------- */
.coming-soon { text-align: center; padding: 52px 28px; }
.coming-soon p { max-width: 560px; margin: 0 auto 12px; }
.coming-soon .btn { margin-top: 18px; }
.cs-badge { display: inline-block; background: var(--coral); color: #fff; border-radius: var(--r-pill);
  padding: 5px 18px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; margin-bottom: 16px; }

/* ---------- OIPオンボーディング: 「空き」を選んで申込企業を選ぶ ---------- */
.ob-pick { max-width: 720px; margin: 26px auto 0; }
.ob-pick-tt { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ob-pick-slot { position: relative; border-radius: 12px; padding: 10px 4px; text-align: center;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.ob-pick-no { display: block; font-size: 9.5px; font-weight: 700; color: rgba(251,249,243,.5); }
.ob-pick-time { display: block; font-size: 12px; font-weight: 800; margin-top: 1px; }
.ob-pick-state { display: block; font-size: 10px; font-weight: 700; color: rgba(251,249,243,.55); margin-top: 3px; }
.ob-pick-slot.confirmed { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); }
.ob-pick-slot.offer { background: rgba(198,181,242,.16); border-color: rgba(198,181,242,.35); }
/* 選択される枠: 少し待ってからハイライト（クリックされた表現） */
.ob-pick-slot.pick { animation: ob-pick-on 6s var(--ease-out) infinite; }
.ob-pick-slot.pick .ob-pick-state { animation: ob-pick-label 6s step-end infinite; }
@keyframes ob-pick-on {
  0%, 12% { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); transform: scale(1); }
  20%, 88% { background: var(--coral); border-color: var(--coral); transform: scale(1.06); }
  100% { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); transform: scale(1); }
}
@keyframes ob-pick-label { 0%, 12% { opacity: .55; } 20%, 88% { opacity: 1; color: #fff; } 100% { opacity: .55; } }
/* クリックを示すカーソル＋波紋 */
.ob-pick-cursor { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #fff; opacity: 0; animation: ob-pick-tap 6s ease-out infinite; }
@keyframes ob-pick-tap {
  0%, 8% { opacity: 0; transform: scale(.4); }
  14% { opacity: .9; transform: scale(1); }
  24% { opacity: 0; transform: scale(3.4); }
  100% { opacity: 0; transform: scale(3.4); }
}
.ob-pick-sel { margin-top: 14px; font-size: 12px; font-weight: 800; color: var(--coral);
  opacity: 0; animation: ob-pick-fade 6s ease-out infinite; animation-delay: .1s; }
.ob-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.ob-pick-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  opacity: 0; animation: ob-pick-in 6s var(--ease-out) infinite; }
.ob-pick-c { font-weight: 800; font-size: 14px; }
.ob-pick-d { font-size: 11.5px; color: rgba(251,249,243,.6); margin-left: auto; white-space: nowrap; }
.ob-pick-btn { background: var(--coral); color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; }
@keyframes ob-pick-fade { 0%, 20% { opacity: 0; } 28%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ob-pick-in {
  0%, 22% { opacity: 0; transform: translateY(10px); }
  32%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}
.ob-pick-note { font-size: 13px; font-weight: 700; color: rgba(251,249,243,.9); margin-top: 18px; }
.ob-pick-note.sub { font-size: 11.5px; font-weight: 600; color: rgba(251,249,243,.55); margin-top: 6px; line-height: 1.7; }
@media (max-width: 620px) {
  .ob-pick-tt { grid-template-columns: repeat(4, 1fr); }
  .ob-pick-d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-pick-slot.pick, .ob-pick-slot.pick .ob-pick-state, .ob-pick-cursor,
  .ob-pick-sel, .ob-pick-row { animation: none; opacity: 1; transform: none; }
  .ob-pick-slot.pick { background: var(--coral); border-color: var(--coral); }
  .ob-pick-cursor { display: none; }
}

/* デモ用メールボックス: サンプル文面は控えめに区別する */
.mail.sample { border-style: dashed; background: transparent; }
.mail.sample h3 { margin-top: 6px; }

/* デモ用クイックログイン: マジックリンク検証用のアドレス一覧 */
.demo-mails { list-style: none; padding: 0; margin: 8px 0 0; text-align: left; }
.demo-mails li { font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.6; }
.demo-mails li:first-child { border-top: none; }
.demo-mails code { font-size: 12px; color: var(--ink-2); }

/* ============================================================
   公開LP（ログイン不要のOIP一覧・詳細ページ）
   ============================================================ */

/* ---------- OIPカードのコラボレーションテーマ抜粋（一覧カード共通） ---------- */
.oip-theme { display: flex; flex-direction: column; gap: 3px; }
.oip-theme-label { font-size: 10.5px; font-weight: 800; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.oip-theme p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- LPの土台（サイドバーを使わない独立ページ） ---------- */
.lp-body { background: var(--cream); color: var(--ink); font-family: var(--font); }
.lp-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 28px; background: rgba(241,237,228,.9);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line); }
.lp-brand img { height: 34px; width: auto; display: block; }
.lp-header-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-header-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2);
  font-size: 13.5px; font-weight: 700; }
.lp-header-link svg { opacity: .7; }
/* 言語トグルはサイドバー幅前提（a に flex:1）のため、横並びヘッダーでは折り返さないよう上書きする */
.lp-header .side-lang { flex: 0 0 auto; }
.lp-header .side-lang a { flex: 0 0 auto; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .lp-header-link:hover { color: var(--ink); } }
.lp-main { max-width: 1040px; margin: 0 auto; padding: 40px 40px 120px; }
.lp-hero { padding: 8px 0 32px; }
.lp-hero h1 { margin-top: 0; }
.lp-notice { background: rgba(198,181,242,.22); border: 1px solid rgba(198,181,242,.55); border-radius: var(--r-md);
  padding: 16px 20px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.7; }
.lp-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1040px; margin: 0 auto; padding: 28px 40px 48px; border-top: 1px solid var(--line); }
.lp-footer a.btn { white-space: nowrap; }
@media (max-width: 640px) {
  .lp-header { padding: 12px 18px; }
  .lp-main { padding: 24px 18px 90px; }
  .lp-footer { padding: 20px 18px 36px; flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- 詳細モーダル（一覧LP上でOIP詳細を開く） ---------- */
.oipmodal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(20,22,31,.55);
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.oipmodal.show { display: flex; animation: fadeIn 180ms ease forwards; }
.oipmodal-box { position: relative; background: var(--cream); border-radius: var(--r-card); padding: 36px;
  max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(20,22,31,.35); }
.oipmodal.show .oipmodal-box { animation: pop 210ms var(--ease-out); }
.oipmodal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink);
  font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color 130ms ease, transform 130ms var(--ease-out); }
.oipmodal-close:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .oipmodal-close:hover { background: var(--paper); } }
@media (max-width: 640px) {
  .oipmodal { padding: 0; }
  .oipmodal-box { max-width: 100%; width: 100%; min-height: 100%; max-height: none; border-radius: 0; padding: 24px 18px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .oipmodal.show { animation: fadeIn 150ms ease forwards; }
  .oipmodal.show .oipmodal-box { animation: fadeIn 150ms ease; }
}