/* matomete ログイン画面
   レトロフューチャー。ロゴの「3本が1本に合流する」形を画面の意匠に展開する。
   左は常に濃紺（ブランド面として意図的に単一の見え方）、右のフォーム面だけが明暗に追従する。 */
:root {
  --navy:#132A42; --navy-2:#0D1D2E;
  --orange:#E84A20; --mustard:#F7AF12; --teal:#187C86; --cream:#F7EFE0;
  --form-bg:#FBF7EE; --form-card:#FFFFFF; --ink:#132A42; --ink-2:#55697E; --ink-3:#8A9AAB;
  --line:#E2D7C3; --field:#FFFFFF;
  --bad:#B3202F; --bad-bg:#FBE9EA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --form-bg:#12171D; --form-card:#1A2129; --ink:#E9EDF2; --ink-2:#A3B0BD; --ink-3:#74828F;
    --line:#2B343E; --field:#141B22;
    --bad:#F08A94; --bad-bg:#2A1417;
  }
}
:root[data-theme="dark"] {
  --form-bg:#12171D; --form-card:#1A2129; --ink:#E9EDF2; --ink-2:#A3B0BD; --ink-3:#74828F;
  --line:#2B343E; --field:#141B22;
  --bad:#F08A94; --bad-bg:#2A1417;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--form-bg); color:var(--ink);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.page { min-height:100%; display:grid; grid-template-columns:1.05fr .95fr; }

/* ── 左：ブランド面 ───────────────────────── */
.brandside {
  position:relative; overflow:hidden; background:var(--navy); color:var(--cream);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:3rem 3rem 2.4rem;
}
/* 網点（レトロ印刷の質感） */
.brandside::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(247,239,224,.10) 1.1px, transparent 1.1px);
  background-size:6px 6px; opacity:.9; pointer-events:none;
}
/* 同心の軌道 */
.orbits { position:absolute; right:-140px; top:50%; transform:translateY(-50%); pointer-events:none; }
.orbits i {
  position:absolute; border-radius:50%; border:2px solid rgba(247,239,224,.13);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.orbits i:nth-child(1){ width:300px; height:300px; }
.orbits i:nth-child(2){ width:440px; height:440px; border-color:rgba(24,124,134,.4); }
.orbits i:nth-child(3){ width:590px; height:590px; }

.bs__top { position:relative; z-index:1; display:flex; align-items:center; gap:.8rem; }
.bs__top img { display:block; }
.bs__word { font-family:"Dela Gothic One", system-ui, sans-serif; font-size:1.45rem; letter-spacing:.01em; }

.bs__mid { position:relative; z-index:1; }
.bs__lead {
  font-family:"Dela Gothic One", system-ui, sans-serif;
  font-size:clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem); line-height:1.45; margin:0 0 1.1rem;
  text-wrap:balance;
}
.bs__lead em { font-style:normal; color:var(--mustard); }
.bs__body { max-width:34ch; color:rgba(247,239,224,.72); font-size:.92rem; margin:0; }

/* ロゴと同じ「3本が1本に合流する」意匠（SVGで滑らかに描く） */
.merge { position:relative; z-index:1; margin-top:2.4rem; max-width:430px; }
.merge svg { display:block; width:100%; height:auto; }

.bs__foot { position:relative; z-index:1; font-size:.76rem; color:rgba(247,239,224,.55); }
.bs__foot a { color:rgba(247,239,224,.8); }

/* ── 右：フォーム面 ───────────────────────── */
.formside { display:flex; align-items:center; justify-content:center; padding:2.5rem 1.6rem; }
.card { width:min(380px, 100%); }
.card h1 { font-size:1.3rem; margin:0 0 .3rem; }
.card__sub { color:var(--ink-3); font-size:.85rem; margin:0 0 2rem; }

.err {
  background:var(--bad-bg); border:2px solid var(--bad); color:var(--bad);
  padding:.75rem .9rem; border-radius:8px; font-size:.86rem; margin-bottom:1.4rem;
}
label {
  display:block; font:600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing:.12em;
  color:var(--ink-2); margin:1.3rem 0 .45rem;
}
/* type を並べると、あとで type="email" のような欄を足したときに
   ここから漏れて、その欄だけ既定の見た目（幅153px）で出てしまう。
   チェックボックス等だけを除く書き方にしておく。 */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  width:100%; padding:.8rem .9rem; font:inherit; font-size:.95rem;
  color:var(--ink); background:var(--field);
  border:2px solid var(--line); border-radius:8px;
}
input:focus { outline:none; border-color:var(--teal); }
input:focus-visible { outline:3px solid rgba(24,124,134,.28); outline-offset:1px; }

.go {
  width:100%; margin-top:2rem; padding:.85rem 1rem; cursor:pointer;
  font:700 .95rem/1 "Zen Kaku Gothic New", sans-serif;
  color:var(--cream); background:var(--orange);
  border:3px solid var(--navy); border-radius:10px;
  box-shadow:4px 4px 0 var(--navy); transition:transform .07s, box-shadow .07s;
}
.go:hover { background:#F2572C; }
.go:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--navy); }
.go:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .go { transition:none; } }

.legal { margin-top:2rem; font-size:.76rem; color:var(--ink-3); text-align:center; }
.legal a { color:var(--teal); }

@media (max-width: 860px) {
  .page { grid-template-columns:1fr; }
  .brandside { padding:2rem 1.6rem 1.8rem; }
  .bs__mid { margin:1.8rem 0; }
  .merge { display:none; }
  .orbits { right:-220px; }
  .bs__foot { display:none; }
}

/* ── 登録・確認・2段階認証で足したもの ───────────────── */

/* 入力の下に置く小さな補足 */
/* 入力欄のすぐ下に置く補足。
   負のマージンで詰めると、実際に入力欄の枠に重なってしまう
   （login.css の input は下マージンを持たないため）。素直に正の値にする。 */
.hint{
  margin:6px 0 0; font-size:12.5px; line-height:1.7; color:var(--ink-3);
  word-break:auto-phrase; line-break:strict;
}

/* うまくいったことの知らせ。.err と対になる */
.ok{
  margin:0 0 16px; padding:11px 14px; border-radius:10px;
  background:color-mix(in srgb, #187C86 12%, transparent);
  border:1px solid color-mix(in srgb, #187C86 38%, transparent);
  color:var(--ink); font-size:14px; line-height:1.7;
}

/* 同意のチェック。文章が長いので、印と文を上端で揃える */
.check{
  display:flex; align-items:flex-start; gap:10px;
  margin:22px 0 4px; font-size:13.5px; line-height:1.75; color:var(--ink-2);
  word-break:auto-phrase; line-break:strict; cursor:pointer;
}
.check input{ width:auto; margin:3px 0 0; flex:none; }
.check a{ color:var(--ink); }

/* 6桁の入力。数字を大きく、間隔をあけて読みやすく */
.code{
  font-family:"IBM Plex Mono", monospace; font-size:26px; letter-spacing:.32em;
  text-align:center; padding:14px 10px;
}
.code::placeholder{ letter-spacing:.2em; opacity:.35; }

/* バックアップコードの一覧。書き写す前提なので等幅で大きく */
.codes{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 14px;
  margin:0 0 18px; padding:16px; list-style:none;
  background:var(--field); border:1px dashed var(--line); border-radius:12px;
  font-family:"IBM Plex Mono", monospace; font-size:15px; letter-spacing:.06em;
}
.codes li{ text-align:center; }

/* 認証アプリに手で打ち込む種。折り返しても読めるように */
.secret{
  display:block; margin:0 0 16px; padding:14px; border-radius:10px;
  background:var(--field); border:1px solid var(--line);
  font-family:"IBM Plex Mono", monospace; font-size:16px; letter-spacing:.12em;
  text-align:center; word-break:break-all;
}

/* 自動登録よけの欄。人には見せず、機械には見える形で置く。
   display:none だと埋めない機械が多いので、位置で隠す。
   幅と高さを持たせないので、まわりの配置には影響しない。 */
.trap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ── 登録の進みぐあい（3段） ─────────────────────── */
.wiz{
  display:flex; align-items:center; gap:6px;
  margin:0 0 26px; padding:0; list-style:none;
  font-size:11.5px; color:var(--ink-3);
}
.wiz li{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.wiz li span{
  display:grid; place-items:center; flex:none;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--form-card);
  font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-3);
}
/* 段どうしをつなぐ線。最後の段には引かない。 */
.wiz li:not(:last-child)::after{
  content:""; flex:1; height:1.5px; background:var(--line); min-width:8px;
}
.wiz .is-now{ color:var(--ink); font-weight:700; }
.wiz .is-now span{ border-color:var(--orange); background:var(--orange); color:#fff; }
.wiz .is-done span{ border-color:var(--teal); background:var(--teal); color:#fff; }
.wiz .is-done + li::before{ content:none; }
@media (max-width:380px){ .wiz li:not(.is-now){ font-size:0; } .wiz li span{ font-size:11px; } }

/* 任意の欄であることの印 */
.opt{
  display:inline-block; margin-left:.5em; padding:1px 7px; border-radius:999px;
  background:var(--line); color:var(--ink-3);
  font:600 10px/1.6 "IBM Plex Mono", monospace; letter-spacing:.06em;
  vertical-align:1px;
}

/* 文中に置く送信ボタン。見た目はリンク。 */
.linkish{
  border:0; background:none; padding:0; margin:0; cursor:pointer;
  color:var(--ink); font:inherit; text-decoration:underline;
}
.linkish:hover{ opacity:.75; }

/* ロゴを押すと商品ページへ */
.bs__home{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }

/* ── 区分の選択（個人／法人） ───────────────────────── */
.seg{
  border:0; padding:0; margin:1.3rem 0 0; min-width:0;
}
.seg legend{
  padding:0; margin:0 0 .45rem;
  font:600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing:.12em; color:var(--ink-2);
}
.seg__i{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; margin-bottom:8px;
  border:2px solid var(--line); border-radius:8px;
  background:var(--field); cursor:pointer;
  font-size:14.5px; color:var(--ink);
}
.seg__i input{ width:auto; margin:0; flex:none; accent-color:var(--teal); }
/* 選ばれているものを、枠だけで分かるようにする。色は足さない。 */
.seg__i:has(input:checked){ border-color:var(--teal); }
.seg__i:has(input:focus-visible){ outline:3px solid rgba(24,124,134,.28); outline-offset:1px; }
@media (min-width:520px){
  .seg{ display:flex; flex-wrap:wrap; gap:8px; }
  .seg legend{ width:100%; }
  .seg__i{ flex:1 1 12rem; margin-bottom:0; }
}

/* 選択欄。入力欄と同じ見た目に揃える。 */
select{
  width:100%; padding:.8rem .9rem; font:inherit; font-size:.95rem;
  color:var(--ink); background:var(--field);
  border:2px solid var(--line); border-radius:8px;
  appearance:none;
  /* 右端の三角。画像を足さずに済むよう、線で描く。 */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
select:focus{ outline:none; border-color:var(--teal); }
select:focus-visible{ outline:3px solid rgba(24,124,134,.28); outline-offset:1px; }

/* ── 任意のアンケート ───────────────────────────────── */
.ask{
  margin:1.6rem 0 0; padding:0;
  border:1px dashed var(--line); border-radius:10px;
}
.ask summary{
  padding:12px 14px; cursor:pointer; list-style:none;
  font-size:13.5px; color:var(--ink-2);
  word-break:auto-phrase; line-break:strict;
}
.ask summary::-webkit-details-marker{ display:none; }
.ask summary::before{
  content:"＋"; display:inline-block; width:1.2em;
  font-family:"IBM Plex Mono", monospace; color:var(--ink-3);
}
.ask[open] summary::before{ content:"－"; }
.ask[open] summary{ border-bottom:1px dashed var(--line); }
.ask > :not(summary){ margin-left:14px; margin-right:14px; }
.ask > :last-child{ margin-bottom:14px; }
.ask label:first-of-type{ margin-top:14px; }