/* =========================================================
 * /opt/hosecraft.jp/static/css/login.css-Hosecraft – Login Page Stylesheet (2025-06-12)
 * ---------------------------------------------------------
 * 共通 → PC(≥992px) → Tablet(768–991.98px) → Smartphone(≤767.98px)
 * =======================================================*/

/* === 0. 共通（リセット・変数など） ======================== */
:root{
  --accent:#0176d3;          /* アクセントカラー */
  --bg-page:#f4f6f9;
  --border-card:#dddbda;
  --text-muted:#6b6c72;
  --line-green:#06c755;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;font-family:"Inter","Noto Sans JP",sans-serif;
  background:var(--bg-page);display:flex;align-items:flex-start;justify-content:center;color:#1b1b1d;
}

/* --- 共通コンポーネント ----------------------------------- */
.login-card{width:100%;max-width:420px;background:transparent;border:none;padding:0;}
h2{font-weight:700;margin:1.5rem 0 1.25rem;text-align:center;letter-spacing:.02em;font-size:1.6rem;}

.nav-pills .nav-link{border-radius:.5rem;font-weight:600;}
.nav-pills .nav-link.active{background:var(--accent);color:#fff;}
.nav-pills .nav-link.line-tab.active{background:var(--line-green);}

.form-control{height:48px;border:1px solid #c9c7c5;border-radius:.25rem;font-size:.95rem;}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 .12rem rgba(1,118,211,.25);}
.btn-accent{background:var(--accent);border:1px solid var(--accent);font-weight:600;letter-spacing:.02em;color:#fff;}
.btn-accent:hover{background:#0164b4;color:#fff;}
.btn-line{background:var(--line-green);border:none;font-weight:600;color:#fff;}
.btn-line:hover{background:#04b34b;color:#fff;}
.login-footer{margin-top:2rem;text-align:center;font-size:.75rem;color:var(--text-muted);}
.alert{font-size:.85rem;padding:.55rem 1rem;}

/* === 1. PC  (992px 以上) =================================== */
@media (min-width:992px){
  body{padding-top:4rem;}
}

/* === 2. Tablet  (768～991.98px) ============================ */
@media (max-width:991.98px){
  body{padding-top:3rem;}
  .login-card{max-width:380px;}
  h2{font-size:1.5rem;}
  .form-control{height:46px;font-size:.93rem;}
  .btn-accent{font-size:.95rem;}
}

/* === 3. Smartphone  (～767.98px) =========================== */
@media (max-width:767.98px){
  body{padding:2.5rem 1rem 0;}
  h2{font-size:1.4rem;margin:1.25rem 0 1rem;}
  .form-control{
    height:44px;
    font-size:1rem;           /* ← 16px 相当に修正：iOS の自動ズーム防止 */
  }
  .btn-accent{padding:.65rem 1rem;font-size:.9rem;}
  .login-footer{font-size:.7rem;margin-top:2rem;}
}

.btn-line {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
  transition: background-color 0.25s ease;
}
.btn-line:hover {
  background: #05b150;
  border-color: #05b150;
  color: #fff;
}

.btn-outline-line {
  border: 1px solid #06c755;
  color: #06c755;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* 「LINEで会員登録」ボタンだけ個別に適用 */
.btn-outline-line-register:hover {
  background: #eafff2;
  border-color: #06c755;
  color: #06c755;
  font-weight: 700;
}