/* tablet-repair.com 店舗管理システム
   サイト本体と同じ配色にする（紺#12395B／青#1273B8／黄#F5B321／赤#F04E37／クリーム#FDF8E9）。
   使うのは店舗のスタッフなので、文字は大きめ・入力欄は16px以上（iOSで勝手にズームされない）。
   ★薄いグレーの文字は使わない。補足文も本文と同じ濃さにする（読みにくいと指摘を受けた）。 */
:root{
  --navy:#12395B; --blue:#1273B8; --blue-d:#0E5A8F; --yellow:#F5B321;
  --red:#F04E37; --green:#2E7D22; --cream:#FDF8E9; --cream-d:#F6EAC8;
  --line:#DCE3EA; --ink:#16202A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.8; font-size:16px;
}
a{color:var(--blue-d)}

/* ヘッダー */
.hd{background:var(--navy);color:#fff}
.hd-in{max-width:960px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-weight:900;font-size:18px}
.logo span{font-weight:700;font-size:13.5px;margin-left:6px}
.hd-nav{display:flex;align-items:center;gap:16px;font-size:14.5px}
.hd-nav a{color:#fff}
.hd-nav .out{border:2px solid rgba(255,255,255,.6);border-radius:999px;padding:4px 14px;text-decoration:none}

.wrap{max-width:960px;margin:0 auto;padding:24px 16px 60px}
.ft{text-align:center;font-size:13.5px;color:var(--ink);padding:20px}

/* カード */
.card{background:#fff;border:2px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px}
.card h1{font-size:22px;margin:0 0 12px;color:var(--navy)}
.card h2{font-size:17px;margin:24px 0 10px;color:var(--navy);border-left:5px solid var(--yellow);padding-left:10px}
.card p{margin:0 0 12px}
.note{font-size:15.5px;color:var(--ink);font-weight:500}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:14.5px;color:var(--ink);font-weight:600}
.break{word-break:break-all}

/* 入力 */
label{display:block;margin:0 0 16px;font-weight:700;font-size:15.5px;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],textarea,select{
  display:block;width:100%;margin-top:5px;padding:11px 13px;font-size:16px;font-family:inherit;
  border:2px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue)}
textarea{min-height:150px;line-height:1.8;resize:vertical}
.hint{display:block;font-weight:600;font-size:14.5px;color:var(--ink);margin-top:5px;line-height:1.75}

.btn{
  display:inline-block;background:var(--blue);color:#fff !important;text-decoration:none;
  border:none;border-radius:999px;font-family:inherit;font-weight:900;font-size:16.5px;
  padding:13px 30px;cursor:pointer;box-shadow:0 4px 0 var(--blue-d);
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--blue-d)}
.btn-sub{background:#fff;color:var(--blue-d) !important;border:2px solid var(--blue);box-shadow:none;padding:10px 22px;font-size:15px}
.btn-danger{background:var(--red);box-shadow:0 4px 0 #BF3722}

/* お知らせ */
.flash{border-radius:10px;padding:12px 16px;margin:0 0 18px;font-weight:700;font-size:15.5px}
.flash-ok{background:#E9F5EC;border:2px solid var(--green);color:#1F6117}
.flash-err{background:#FDEAEA;border:2px solid var(--red);color:#A5281C}
.flash-info{background:#EAF1F8;border:2px solid var(--blue);color:var(--blue-d)}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 16px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--ink)}
th{background:var(--cream-d);white-space:nowrap;font-weight:700}

/* ログイン画面 */
.login{max-width:440px;margin:40px auto}
.login .card{padding:30px}
.login h1{text-align:center;font-size:20px}
.login .btn{width:100%;text-align:center}
.login .sub{text-align:center;font-size:15px;margin-top:16px}

/* 入力済みの文字はしっかり濃く太く、まだ入れていない見本の文字ははっきり薄く。
   ぱっと見て「入っている／入っていない」が分かるようにする。 */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],textarea,select{font-weight:700;color:#0F1720}
input::placeholder,textarea::placeholder{color:#A9B4BF;font-weight:400;opacity:1}
input:placeholder-shown,textarea:placeholder-shown{background:#FAFBFC;border-color:#E4E9EE}
input:not(:placeholder-shown),textarea:not(:placeholder-shown){background:#fff;border-color:var(--blue)}