/* SWAPS 2026-09-23 版（絵文字なし） */
/* ============================================================================
   SWAPS 認証・規約・管理ページ用スタイル
   （login.html / admin.html / admin-terms.html が読み込みます）
   ========================================================================= */
:root{
  --green:#2563eb;--green-dark:#1d4ed8;--green-soft:#eff6ff;--mint:#eff6ff;--orange:#f59e0b;
  --ink:#0f172a;--ink-2:#334155;--muted:#475569;
  --line:#e2e8f0;--line-strong:#cbd5e1;--bg:#f8fafc;--white:#fff;--placeholder:#f1f5f9;
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --radius:14px;--radius-sm:10px;--radius-lg:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px 48px;
  font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* --------------------------------------------------------- 上部の戻るバー */
.auth-back{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:#fff;border-bottom:1px solid var(--line);
}
.auth-back-inner{
  width:min(960px,100%);margin:auto;display:flex;align-items:center;gap:12px;
  min-height:52px;padding:0 16px;
}
.auth-back a,.auth-back button{
  border:0;background:transparent;color:var(--ink);text-decoration:none;
  font-weight:700;font-size:15px;display:inline-flex;align-items:center;
  min-height:44px;padding:10px 4px 10px 0;
}
.auth-back a:hover,.auth-back button:hover{color:var(--green)}
.auth-back .spacer{flex:1}
body.has-back{padding-top:72px}

/* -------------------------------------------------------------- 認証カード */
.auth-shell{width:min(460px,100%)}
.auth-brand{text-align:center;margin-bottom:20px}
.auth-brand img{height:56px}
.auth-brand p{color:var(--muted);font-size:14px;margin:10px 0 0;line-height:1.8}

.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px 24px 30px}

.auth-tabs{display:flex;background:var(--bg);border-radius:var(--radius);padding:5px;margin-bottom:22px}
.auth-tabs button{flex:1;border:0;background:transparent;padding:13px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;color:var(--muted);transition:.15s;min-height:48px}
.auth-tabs button.active{background:#fff;color:var(--green);box-shadow:0 1px 3px rgba(15,23,42,.12)}

.auth-form{display:none;flex-direction:column;gap:16px}
.auth-form.active{display:flex}

.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px;outline:none;background:#fff;font-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.7}

.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-grid label{display:flex;align-items:center;gap:9px;font-size:14px;min-width:0;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 12px;
  cursor:pointer;transition:.15s;min-height:46px}
.lang-grid label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-grid label:has(input:checked){border-color:var(--green);background:var(--green-soft);color:var(--green-dark);font-weight:700}
/* .field input の装飾がチェックボックスに効いて巨大化するのを打ち消す */
.field .lang-grid input[type="checkbox"],
.lang-grid input[type="checkbox"]{
  width:18px;height:18px;min-width:18px;border:0;padding:0;margin:0;
  border-radius:4px;box-shadow:none;accent-color:var(--green);flex-shrink:0;
}

.primary-button{border:0;background:var(--green);color:#fff;font-weight:700;
  border-radius:var(--radius-sm);padding:15px;transition:.15s;font-size:16px;min-height:50px}
.primary-button:hover{background:var(--green-dark)}
.primary-button:disabled{opacity:.55;cursor:not-allowed}
.full{width:100%}

.mini{font-size:14px;padding:9px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:#fff;font-weight:700;color:var(--green);
  cursor:pointer;min-height:40px}
.mini:hover{border-color:var(--green)}

.agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.8}
.agree a{color:var(--green);font-weight:700}
.agree input{accent-color:var(--green);margin-top:3px;width:18px;height:18px;flex-shrink:0}

.auth-msg{font-size:14px;border-radius:var(--radius-sm);padding:13px 14px;display:none;line-height:1.7}
.auth-msg.show{display:block}
.auth-msg.err{background:#fdeceb;color:#b23b32}
.auth-msg.ok{background:var(--green-soft);color:var(--green-dark)}

.auth-foot{text-align:center;font-size:14px;color:var(--muted);margin-top:18px}
.auth-foot a{color:var(--green);font-weight:700;text-decoration:none;display:inline-block;padding:8px}

.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:4px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ------------------------------------------------------------ スマートフォン */
@media(max-width:680px){
  body{padding:18px 14px 40px}
  body.has-back{padding-top:66px}
  .auth-card{padding:20px 16px 24px;border-radius:var(--radius)}
  .auth-brand img{height:48px}
  .lang-grid{grid-template-columns:1fr}
}

/* 管理画面の一覧に出る小さなアイコン */
.row .thumb.thumb-user,.row .thumb.thumb-id{
  background-repeat:no-repeat;background-position:center;background-size:26px 26px;
}
.row .thumb.thumb-user{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.6%22%20r%3D%223.7%22%2F%3E%3Cpath%20d%3D%22M4.9%2020.2a7.1%207.1%200%200%201%2014.2%200%22%2F%3E%3C%2Fsvg%3E")}
.row .thumb.thumb-id{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%225%22%20width%3D%2218.8%22%20height%3D%2214%22%20rx%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%228.6%22%20cy%3D%2211%22%20r%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M5%2016.4a4%204%200%200%201%207.2%200%22%2F%3E%3Cpath%20d%3D%22M14.6%2010h4M14.6%2013.4h3%22%2F%3E%3C%2Fsvg%3E")}

/* 青テーマのボタン（トップページと同じ質感にそろえる）2026-09-23 */
.primary-button{box-shadow:0 6px 16px rgba(37,99,235,.20);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.primary-button:hover{box-shadow:0 9px 22px rgba(37,99,235,.26);transform:translateY(-1px)}
.auth-tabs button.active{color:#2563eb}
.mini{color:#2563eb}

/* ---- ロゴの余白を切り取って大きく見せる（トップページと同じ方法）2026-09-23 ---- */
.logo-crop{--s:1;position:relative;display:inline-block;overflow:hidden;flex-shrink:0;
  vertical-align:middle;width:calc(184px * var(--s));height:calc(64px * var(--s))}
.logo-crop img{position:absolute !important;width:calc(248px * var(--s)) !important;
  max-width:none !important;height:auto !important;
  left:calc(-30px * var(--s)) !important;top:calc(-44px * var(--s)) !important}
.auth-brand .logo-crop{--s:1.15}
.admin-head .logo-crop{--s:1.05}
@media(max-width:680px){
  .auth-brand .logo-crop{--s:.95}
  .admin-head .logo-crop{--s:.8}
}

/* ============================================================================
   SNSログイン（Google / Apple / LINE）2026-09-23
   ロゴ画像は images/btn-google.svg などを置くと自動で表示されます。
   無くてもボタンは文字だけで正しく動きます。
   ========================================================================= */
.sns-block{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.sns-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:52px;padding:13px 18px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:700;cursor:pointer;
  border:1px solid transparent;transition:filter .15s,box-shadow .15s,transform .15s;
}
.sns-btn:hover{box-shadow:0 6px 16px rgba(15,23,42,.12);transform:translateY(-1px)}
.sns-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.sns-logo{width:20px;height:20px;flex-shrink:0;display:block}
/* ロゴ画像が無いときは、文字だけで中央ぞろえにする */
.sns-btn.no-logo{gap:0}

/* 各社のブランドカラー（公式のガイドラインに沿った配色） */
.sns-google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.sns-google:hover{background:#f7f8f8}
.sns-apple{background:#000;color:#fff;border-color:#000}
.sns-apple:hover{background:#1a1a1a}
.sns-line{background:#06c755;color:#fff;border-color:#06c755}
.sns-line:hover{background:#05b34c}

.sns-note{margin:2px 0 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
.sns-divider{margin:4px 0 18px}

@media(max-width:680px){
  .sns-btn{min-height:50px;font-size:15px;padding:12px 14px}
}

/* パスワードの表示／非表示 2026-09-23 */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:76px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--green);font-size:13px;font-weight:700;
  padding:10px 10px;min-height:40px;border-radius:8px;cursor:pointer;
}
.pw-toggle:hover{background:var(--green-soft)}

/* キーボード操作時の選択枠 2026-09-23 */
:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:4px}
.sns-apple:focus-visible{outline-color:#0f172a}
.sns-line:focus-visible{outline-color:#04863c}