@charset "UTF-8";
/* 門の外にあるログイン画面。base.css を読まず、この1枚で完結させる。 */

:root {
  --c-bg: #f3f8ff;
  --c-panel: #fff;
  --c-line: #d8e4f1;
  --c-text: #10223b;
  --c-sub: #607087;
  --c-key: #246fd2;
  --c-key-bg: #eaf3ff;
  --c-warn: #a65d1f;
  --c-warn-bg: #fff4e8;
  --font: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
}

body { min-width: 320px; background: #f7f9fc; color: var(--c-text); font-family: var(--font); }

.login_header {
  padding: 0 40px;
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-line);

  @media (width < 600px) { padding: 0 24px; }
  @media (width < 375px) { padding: 0 16px; }

  > .wrap { margin: 0 auto; padding: 18px 0; max-width: 1376px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: flex; flex-direction: column; gap: 5px; }
  .main { font-size: 20px; font-weight: 800; line-height: 1.2em; }
  .sub { color: #7a8798; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; line-height: 1.2em; }
  .company { display: flex; align-items: center; gap: 9px; color: var(--c-sub); font-size: 11px; font-weight: 700; text-decoration: none; }
  .mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #102c50; color: #fff; font-size: 9px; font-weight: 800; }

  @media (width < 500px) { .company > span:last-child { display: none; } }
}

.sec_login {
  padding: 48px 40px;
  min-height: calc(100svh - 127px);
  display: grid;
  align-items: center;
  background: linear-gradient(135deg, #f4f8fd 0%, #edf5ff 52%, #f8fbff 100%);

  @media (width < 900px) { padding: 40px; }
  @media (width < 600px) { padding: 32px 24px; }
  @media (width < 375px) { padding: 28px 16px; }

  > .wrap { margin: 0 auto; max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr); align-items: center; gap: 72px;
    @media (width < 1100px) { gap: 40px; }
    @media (width < 900px) { grid-template-columns: 1fr; }
  }
}

.intro {
  min-width: 0;
  .eyebrow { color: var(--c-key); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.4em; }
  .ttl { margin: 16px 0 0; color: #0d2c52; font-size: 40px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.4em;
    @media (width < 1100px) { font-size: 32px; }
    @media (width < 600px) { font-size: 24px; }
  }
  .lead { margin: 18px 0 0; max-width: 620px; color: #50647e; font-size: 15px; line-height: 1.9em; }
  .points { margin: 28px 0 0; max-width: 590px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    @media (width < 600px) { grid-template-columns: 1fr; }
    li { padding: 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; border: 1px solid #dce9f7; border-radius: 10px; background: rgb(255 255 255 / 78%); }
    .icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--c-key-bg); color: var(--c-key); font-size: 12px; font-weight: 800; }
    .text { display: flex; flex-direction: column; gap: 5px; }
    strong { font-size: 11px; line-height: 1.4em; }
    small { color: #74839a; font-size: 9px; line-height: 1.6em; }
  }
  .flow { margin: 26px 0 0; max-width: 590px; display: grid; grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto; align-items: center; gap: 12px;
    @media (width < 500px) { display: none; }
    > span { display: flex; align-items: center; gap: 7px; }
    small { color: var(--c-key); font-size: 9px; font-weight: 800; }
    strong { color: #53677f; font-size: 10px; }
    i { height: 1px; background: #bdd2ea; }
  }
}

.login_panel { min-width: 0;
  @media (width < 900px) { margin: 0 auto; width: 100%; max-width: 520px; }
  .card { padding: 34px 36px 28px; background: var(--c-panel); border: 1px solid #d9e5f2; border-radius: 16px; box-shadow: 0 22px 50px rgb(32 73 119 / 12%);
    @media (width < 500px) { padding: 28px 24px 24px; }
  }
  .card_head {
    .badge { padding: 7px 10px; width: fit-content; display: flex; align-items: center; gap: 7px; border-radius: 999px; background: #eef8f3; color: #2c7d59; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.2em; }
    .badge i { width: 6px; height: 6px; border-radius: 50%; background: #32b978; box-shadow: 0 0 0 4px #d9f3e6; }
    .ttl { margin: 20px 0 0; font-size: 28px; font-weight: 800; line-height: 1.35em; }
    p { margin: 8px 0 0; color: var(--c-sub); font-size: 12px; line-height: 1.7em; }
  }
  .panel_note { margin: 14px 0 0; color: #78869a; font-size: 10px; line-height: 1.6em; text-align: center; }
  .panel_note a { color: var(--c-key); }
}

.box { margin: 24px 0 0; display: flex; flex-direction: column; gap: 17px; }
.field { display: flex; flex-direction: column; gap: 7px;
  > .label { color: #33465f; font-size: 11px; font-weight: 700; }
}
.input_group { padding: 0 13px; min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #d7e2ee; border-radius: 8px; background: #f8fafc;
  &:focus-within { border-color: var(--c-key); outline: 2px solid rgb(36 111 210 / 16%); }
  .icon { color: #7790ad; font-size: 10px; font-weight: 700; }
  button { padding: 6px; border: 0; background: transparent; color: var(--c-key); font-size: 10px; font-weight: 700; cursor: pointer; }
}
.input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #33465f; font-family: var(--font); font-size: 16px; }
.options { margin: -2px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  @media (width < 400px) { align-items: flex-start; flex-direction: column; }
  .remember { display: flex; align-items: center; gap: 7px; color: #637289; font-size: 10px; }
  input { width: 14px; height: 14px; accent-color: var(--c-key); }
  a { color: var(--c-key); font-size: 10px; font-weight: 700; }
}
.go { padding: 15px 20px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid var(--c-key); border-radius: 8px; background: var(--c-key); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgb(36 111 210 / 22%);
  &:disabled { opacity: 0.5; cursor: default; }
}
.msg { margin: 16px 0 0; padding: 11px 13px; border: 1px solid var(--c-warn); border-radius: 6px; background: var(--c-warn-bg); color: var(--c-warn); font-size: 12px; line-height: 1.7em;
  &.is_hide { display: none; }
}
.secure { margin: 22px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; border-top: 1px solid #e7edf4;
  > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c-key-bg); color: var(--c-key); font-size: 9px; font-weight: 800; }
  p { color: #7d8999; font-size: 9px; line-height: 1.6em; }
}

.login_footer { padding: 0 40px; border-top: 1px solid #e1e8f0; background: #f7f9fc;
  @media (width < 600px) { padding: 0 24px; }
  > .wrap { margin: 0 auto; padding: 15px 0; max-width: 1376px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #8a96a7; font-size: 9px; line-height: 1.4em; }
}