/* =====================================================================
   bso-entrance.css  ― NurseNoteDX 入口画面の共通デザイン
   ---------------------------------------------------------------------
   このファイルは 4 つのリポジトリ(STANDARD・NOCS・SOLO・NSPC)で
   共通に使います。4 つとも「まったく同じ中身」にしてください。
   直すときは 1 か所で直し、残り 3 つへそのまま上書きコピーします。
   (このファイルは、ほかのファイルや画像に頼りません)

   製品ごとに変えてよいのは、次の 2 つだけです。
     1. 背景の写真 … <main class="bso-entry" style="--bso-photo:url(...)">
                      (各製品の今の写真ファイルをそのまま使う。加工しない)
     2. 製品名     … ロゴの下の「— STANDARD —」などの文字
   色は BSO BLUE と WHITE だけ(黄緑・オレンジ・金色は使わない)。
   ===================================================================== */

/* ---------- 色・文字 ---------- */
.bso-page {
  --bso-blue: #0647db;
  --bso-blue-2: #053fbd;
  --bso-blue-3: #064ed9;
  --bso-link: #0870e8;
  --bso-navy: #072a70;
  --bso-text: #10233f;
  --bso-muted: #3a4f6e;
  --bso-line: rgba(4, 49, 137, .16);
  --bso-page-bg: #07162b;      /* パソコンで写真の左右にできる余白 */
  --bso-mobile-bg: #edf5ff;    /* スマホの写真の下 */
  --bso-error: #b42318;        /* まちがい・失敗のお知らせだけに使う */
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
.bso-page,
.bso-page * { box-sizing: border-box; }
html:has(> body.bso-page),
body.bso-page {
  width: 100%;
  min-height: 100%;
  margin: 0;
}
body.bso-page {
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bso-page-bg);
  color: var(--bso-text);
  -webkit-text-size-adjust: 100%;
}
.bso-page button,
.bso-page input { font: inherit; }
.bso-page button,
.bso-page a,
.bso-page input[type="checkbox"] { cursor: pointer; }
.bso-entry [hidden] { display: none !important; }

/* 画面には出さず、読み上げだけに残す */
.bso-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 画面(写真の舞台) ----------
   写真は 3:2 のまま全体を見せる(写真の中の文字が切れないように)。 */
.bso-entry {
  position: relative;
  width: min(100vw, calc(100vh * var(--bso-photo-ratio, 1.5)));
  max-width: 1536px;
  aspect-ratio: var(--bso-photo-ratio, 1.5);
  overflow: hidden;
  isolation: isolate;
  background: var(--bso-page-bg);
}

/* 背景の写真:--bso-photo に指定した画像を、そのまま(暗くせず・ぼかさず)出す */
.bso-entry__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bso-photo, none) center / cover no-repeat;
  pointer-events: none;
}
/* 時間帯などで写真を切り替えるときは、中に <img class="bso-entry__scene"> を並べる */
.bso-entry__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .75s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.bso-entry__scene.active,
.bso-entry__scene.is-active { opacity: 1; }

/* ---------- ロゴ(左上) ---------- */
.bso-brand {
  position: absolute;
  z-index: 3;
  left: 4.2%;
  top: 4%;
  display: grid;
  justify-items: center;
  gap: .1em;
  margin: 0;
  color: var(--bso-blue);
  font-size: clamp(12px, 1.25vw, 22px);
  line-height: 1.1;
  text-decoration: none;
}
.bso-brand__logo {
  display: flex;
  align-items: center;
  gap: .35em;
  font-size: 2.1em;
  font-weight: 800;
  letter-spacing: -.02em;
}
.bso-brand__logo svg { width: 1.25em; height: 1.25em; flex: none; }
.bso-brand__country {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .38em;
  margin-right: -.38em;
}
.bso-brand__product {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: .22em;
  white-space: nowrap;
}
.bso-brand__product::before,
.bso-brand__product::after {
  content: "";
  width: 1.4em;
  height: 2px;
  background: currentColor;
}

/* ---------- 見出し(左) ---------- */
.bso-hero {
  position: absolute;
  z-index: 3;
  left: 4.6%;
  top: 24%;
  width: 30%;
  margin: 0;
  color: var(--bso-navy);
  font-size: clamp(12px, 1.25vw, 22px);
  text-shadow: 0 0 .6em rgba(255,255,255,.85);
}
.bso-hero__title {
  margin: 0 0 .7em;
  font-size: 2.3em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
}
.bso-hero__text {
  margin: 0;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.8;
}

/* ---------- 写真の中にロゴ・見出し・© がすでに入っているとき ----------
   <main class="bso-entry bso-entry--photo-brand">
   (重ならないよう、文字の版は読み上げ用にだけ残す) */
.bso-entry--photo-brand .bso-brand,
.bso-entry--photo-brand .bso-hero {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 白いカード(右) ---------- */
.bso-card {
  position: absolute;
  z-index: 5;
  left: 69.7%;
  top: 4.8%;
  bottom: 4.8%;
  width: 27.8%;
  height: -webkit-fit-content;
  height: fit-content;      /* 中身の高さ。上下のまん中に置く */
  max-height: 90.4%;        /* 入りきらないときは、カードの中で動かす */
  margin: auto 0;
  padding: 2.4em 1.7em 1.3em;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 2vw;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 20px 55px rgba(5,44,94,.18);
  color: var(--bso-navy);
  font-size: clamp(13px, min(.98vw, 1.56vh), 17px);
  overflow-y: auto;
  scrollbar-width: thin;
  animation: bsoCardRise 950ms cubic-bezier(.22, 1, .36, 1) .15s both;
}
/* ログイン画面:写真を先に見せてから、カードが下から上がる。
   高さは写真の 77%(上端がロゴの下あたり)で、下にそろえる */
.bso-card--intro {
  min-height: 77%;
  margin: auto 0 0;
  animation-delay: 1.2s;
}
/* 入力が多い画面(登録など):行の間をつめる */
.bso-card--compact { padding-top: 1.6em; }
.bso-card--compact .bso-card__head { margin-bottom: 1em; }
.bso-card--compact .bso-card__title { font-size: 1.5em; margin-bottom: .2em; }
.bso-card--compact .bso-field { margin-bottom: .7em; }
.bso-card--compact .bso-field > label { margin-bottom: .35em; }
.bso-card--compact .bso-input { min-height: 3.2em; }
.bso-card--compact .bso-input input { padding-top: .6em; padding-bottom: .6em; }
.bso-card--compact .bso-check--block { margin-bottom: .6em; }
.bso-card--compact .bso-divider { margin: .8em 0; }
.bso-card--compact .bso-btn-primary { min-height: 3.6em; margin-top: .3em; }

@keyframes bsoCardRise {
  from { opacity: 0; transform: translateY(120px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bso-card__head { margin: 0 0 2em; text-align: center; }
.bso-card__eyebrow {
  margin: 0 0 .5em;
  color: var(--bso-blue);
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
}
.bso-card__title {
  margin: 0 0 .45em;
  font-size: 1.75em;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--bso-navy);
}
.bso-card__subtitle {
  margin: 0;
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.5;
}
/* 長めの説明文(左よせ) */
.bso-card__desc {
  margin: .7em 0 0;
  color: var(--bso-muted);
  font-size: .86em;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}
/* カードの中の区切り(下にもう 1 つのまとまりがあるとき) */
.bso-card__section:not([hidden]) ~ .bso-card__section:not([hidden]) {
  margin-top: 1.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--bso-line);
}
.bso-card__section-title {
  margin: 0 0 .3em;
  font-size: 1.2em;
  color: var(--bso-navy);
}

/* ---------- 入力欄 ---------- */
.bso-field { margin-bottom: 1.35em; }
.bso-field > label,
.bso-label {
  display: block;
  margin-bottom: .55em;
  font-size: .96em;
  font-weight: 700;
}
.bso-label small,
.bso-field > label small { font-weight: 600; color: var(--bso-muted); }
.bso-input {
  display: flex;
  align-items: center;
  min-height: 4.2em;
  padding: 0 .85em;
  border: 1px solid var(--bso-line);
  border-radius: .78em;
  background: rgba(255,255,255,.92);
  box-shadow: 0 .18em .6em rgba(0,25,75,.05);
  color: var(--bso-navy);
  transition: border-color .2s, box-shadow .2s;
}
.bso-input:focus-within {
  border-color: var(--bso-blue);
  box-shadow: 0 0 0 .22em rgba(6,71,219,.12);
}
.bso-input > svg { width: 1.45em; height: 1.45em; flex: none; }
.bso-input input {
  width: 100%;
  min-width: 0;
  padding: 1em .75em;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bso-text);
  font-size: 1em;
}
.bso-input > input:first-child { padding-left: .15em; }
.bso-input input::placeholder { color: #8b94a3; }
/* パスワードの表示切りかえ */
.bso-eye {
  display: grid;
  place-items: center;
  flex: none;
  margin: 0;
  padding: .35em;
  border: 0;
  background: transparent;
  color: #111;
  box-shadow: none;
}
.bso-eye svg { width: 1.45em; height: 1.45em; }

/* ---------- 「保存する」と「お忘れの方」の行 ---------- */
.bso-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5em 1em;
  margin: .2em 0 1.35em;
  font-size: .82em;
  font-weight: 600;
}
.bso-check {
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  font-weight: 600;
}
.bso-check input {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  margin: 0;
  accent-color: var(--bso-blue);
}
/* 2 行以上になるチェック(同意など) */
.bso-check--block {
  align-items: flex-start;
  margin: 0 0 1em;
  font-size: .86em;
  line-height: 1.6;
}
.bso-check--block input { margin-top: .2em; }
.bso-link,
.bso-check a,
.bso-note a {
  color: var(--bso-link);
  font-weight: 700;
}
.bso-link { text-decoration: none; }
.bso-link:hover { text-decoration: underline; }

/* ---------- ボタン ---------- */
.bso-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.3em;
  margin: 0;
  padding: .6em 1em;
  border: 0;
  border-radius: .75em;
  background: linear-gradient(135deg, var(--bso-blue-2), var(--bso-blue-3));
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 .5em 1.2em rgba(4,65,190,.18);
}
.bso-btn-primary:hover { filter: brightness(1.06); }
.bso-btn-primary:disabled { opacity: .65; cursor: progress; }

.bso-divider {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 1.15em 0;
  font-size: .8em;
  font-weight: 700;
}
.bso-divider::before,
.bso-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--bso-line);
}

/* 白いカード型のボタン(「はじめての方」など)。<strong> と <span> で 2 行 */
.bso-btn-secondary {
  display: block;
  width: 100%;
  min-height: 3.6em;
  margin: 0;
  padding: .9em .5em;
  border: 1px solid rgba(5,62,165,.22);
  border-radius: .75em;
  background: rgba(255,255,255,.38);
  color: var(--bso-navy);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
.bso-btn-secondary:hover { background: rgba(255,255,255,.7); border-color: rgba(5,62,165,.4); }
.bso-btn-secondary:disabled { opacity: .6; cursor: default; }
.bso-btn-secondary strong { display: block; font-size: 1.15em; }
.bso-btn-secondary span { display: block; margin-top: .3em; font-size: .88em; }
.bso-field + .bso-btn-secondary,
.bso-field + .bso-btn-primary { margin-top: .2em; }

/* ---------- タブ(SOLO の「ログイン」「はじめての方」など) ---------- */
.bso-tabs {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: .3em;
  margin: 0 0 1.6em;
  padding: .3em;
  border: 1px solid var(--bso-line);
  border-radius: .9em;
  background: rgba(255,255,255,.55);
}
.bso-tabs > button,
.bso-tabs > a {
  min-height: 2.9em;
  margin: 0;
  padding: .4em .6em;
  border: 0;
  border-radius: .65em;
  background: transparent;
  color: var(--bso-navy);
  font-size: .95em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  display: grid;
  place-items: center;
}
.bso-tabs > [aria-selected="true"],
.bso-tabs > .is-active {
  background: linear-gradient(135deg, var(--bso-blue-2), var(--bso-blue-3));
  color: #fff;
  box-shadow: 0 .3em .8em rgba(4,65,190,.2);
}

/* ---------- お知らせ ----------
   .bso-msg に is-info / is-error / is-success をつける。
   (JS が子の要素に error / ok / info をつける画面は、外側に .bso-msg を置く) */
.bso-msg {
  min-height: 1.35em;
  margin: .65em 0 -.3em;
  color: var(--bso-blue);
  font-size: .8em;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.bso-msg:empty { margin-bottom: -.3em; }
.bso-msg.is-error,
.bso-msg .error { color: var(--bso-error); }
.bso-msg.is-success,
.bso-msg.is-info,
.bso-msg .ok,
.bso-msg .info { color: var(--bso-blue); }

/* ---------- 小さな注意書き(規約など) ---------- */
.bso-note {
  margin: 1em 0 0;
  padding-bottom: .4em;
  text-align: center;
  font-size: .72em;
  line-height: 1.65;
}
.bso-note a { font-weight: 600; }
.bso-note--left { text-align: left; }

/* ---------- 下の © ---------- */
.bso-footer {
  position: absolute;
  z-index: 3;
  left: 2%;
  bottom: 2.4%;
  margin: 0;
  color: #fff;
  font-size: clamp(10px, .75vw, 13px);
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,20,60,.6);
}
.bso-entry--photo-brand .bso-footer { display: none; }

/* ---------- 役割を選ぶカード(ログイン後の入口) ---------- */
.bso-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
  gap: .8em;
  margin: 0;
}
.bso-role-card {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) 1.2em;
  align-items: center;
  gap: .9em;
  width: 100%;
  min-height: 5.2em;
  margin: 0;
  padding: .8em 1em;
  border: 1px solid rgba(5,62,165,.16);
  border-radius: 1em;
  background: rgba(255,255,255,.92);
  color: var(--bso-navy);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 .5em 1.4em rgba(18,61,108,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bso-role-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6,71,219,.42);
  box-shadow: 0 .9em 1.8em rgba(18,61,108,.14);
}
.bso-role-card:focus-visible,
.bso-btn-primary:focus-visible,
.bso-btn-secondary:focus-visible {
  outline: 3px solid rgba(6,71,219,.35);
  outline-offset: 3px;
}
.bso-role-card__icon {
  width: 3.2em;
  height: 3.2em;
  display: grid;
  place-items: center;
  border-radius: .9em;
  background: #e8f1ff;
  color: var(--bso-blue);
}
.bso-role-card__icon svg { width: 1.7em; height: 1.7em; }
.bso-role-card__text strong {
  display: block;
  font-size: 1.15em;
  line-height: 1.3;
}
.bso-role-card__text small {
  display: block;
  margin-top: .25em;
  color: var(--bso-muted);
  font-size: .8em;
  font-weight: 600;
  line-height: 1.45;
}
.bso-role-card__arrow {
  color: var(--bso-blue);
  font-size: 1.6em;
  font-weight: 800;
  line-height: 1;
}
/* いちばん目立たせる 1 枚(青) */
.bso-role-card--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--bso-blue-2), var(--bso-blue-3));
  color: #fff;
  box-shadow: 0 .6em 1.4em rgba(4,65,190,.25);
}
.bso-role-card--primary .bso-role-card__icon { background: rgba(255,255,255,.18); color: #fff; }
.bso-role-card--primary .bso-role-card__text small { color: rgba(255,255,255,.9); }
.bso-role-card--primary .bso-role-card__arrow { color: #fff; }
.bso-role-card--primary + .bso-role-grid,
.bso-role-grid + .bso-role-grid { margin-top: .8em; }
.bso-who {
  margin: 0 0 1em;
  color: var(--bso-navy);
  text-align: center;
  font-size: .9em;
  font-weight: 700;
  line-height: 1.5;
}
.bso-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5em 1.3em;
  margin: 1.2em 0 0;
  font-size: .88em;
  font-weight: 700;
}
.bso-links a { color: var(--bso-link); text-decoration: none; }
.bso-links a:hover { text-decoration: underline; }

/* =====================================================================
   スマホ(760px 以下):上に写真の帯、その下に横いっぱいのカード
   ===================================================================== */
@media (max-width: 760px) {
  html:has(> body.bso-page),
  body.bso-page {
    height: auto;
    background: var(--bso-mobile-bg);
  }
  body.bso-page {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .bso-entry {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    aspect-ratio: auto;
    padding: var(--bso-mobile-photo-h, 360px) 0 20px;
    overflow: visible;
    background: var(--bso-mobile-bg);
  }
  .bso-entry__bg {
    inset: 0 0 auto;
    height: var(--bso-mobile-photo-h, 360px);
    background-position: var(--bso-mobile-photo-pos, left center);
  }
  .bso-entry__scene { object-position: var(--bso-mobile-photo-pos, left center); }
  /* 写真の下端だけ、ほんの少し白へなじませる(写真そのものは暗くしない) */
  .bso-entry__bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(237,245,255,0), var(--bso-mobile-bg));
    z-index: 1;
  }

  .bso-brand {
    left: 16px;
    top: max(16px, env(safe-area-inset-top));
    font-size: 11px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .bso-hero {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: calc(100% - var(--bso-mobile-photo-h, 360px) + 40px);
    width: auto;
    font-size: 11px;
  }
  .bso-entry:not(.bso-entry--photo-brand) .bso-hero { top: calc(max(16px, env(safe-area-inset-top)) + 96px); bottom: auto; }

  .bso-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 24px);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 12px auto 0;
    padding: 20px 16px 16px;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.96);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 44px rgba(5,44,94,.20);
    font-size: 14px;
  }
  .bso-card__head { margin-bottom: 14px; }
  .bso-card__title { font-size: 22px; }
  .bso-field { margin-bottom: 10px; }
  .bso-field > label, .bso-label { margin-bottom: 4px; }
  .bso-input { min-height: 46px; }
  .bso-input input { padding: 11px 8px; font-size: 16px; } /* 16px 未満だと iPhone で拡大される */
  .bso-card--compact .bso-input { min-height: 46px; }
  .bso-card--compact .bso-input input { padding: 11px 8px; }
  .bso-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 2px 0 12px;
    font-size: 13px;
  }
  .bso-row > * { width: max-content; max-width: 100%; }
  .bso-btn-primary { min-height: 48px; font-size: 16px; }
  .bso-divider { margin: 10px 0; }
  .bso-btn-secondary { min-height: 52px; }
  .bso-btn-secondary strong { font-size: 16px; }
  .bso-btn-secondary span { font-size: 12px; }
  .bso-msg { margin-top: 6px; }
  .bso-note { margin-top: 8px; padding-bottom: 0; font-size: 11px; line-height: 1.5; }
  .bso-role-card { min-height: 64px; padding: 10px 12px; }

  .bso-footer,
  .bso-entry--photo-brand .bso-footer {
    display: block;
    position: static;
    margin: 14px 12px 0;
    color: var(--bso-muted);
    text-align: center;
    font-size: 11px;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bso-card { animation: none; }
  .bso-entry__scene,
  .bso-role-card { transition: none; }
}