/* Standard 共通ヘッダー(NOCSと同じ形)
   左:STANDARD ＋ 画面名 ＋ 小さな英語 / 右:← 管理者ボードへ
   色は BSO BLUE(#0B5FE0)と WHITE だけ */
:root{--std-blue:#0B5FE0}

body.std-has-header{padding-top:0 !important}

.std-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 20px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  color:#fff;
  background:var(--std-blue);
  /* 本文の余白に関係なく、帯を画面の端から端まで広げる */
  box-shadow:0 0 0 100vmax var(--std-blue);
  clip-path:inset(0 -100vmax);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  box-sizing:border-box;
}

.std-header .std-header__title{
  display:flex;
  padding:0;
  border:0;
  color:inherit;
  background:none;
  text-align:left;
  letter-spacing:normal;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  min-width:0;
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:1.3;
}

.std-header__product{
  padding:2px 8px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:6px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}

.std-header__name{
  font-size:20px;
  font-weight:800;
}

.std-header__en{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  opacity:.82;
}

.std-header .std-header__back{
  flex:none;
  position:static;
  width:auto !important;
  margin:0;
  font-family:inherit;
  line-height:1.2;
  box-shadow:none !important;
  text-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  display:inline-flex;
  align-items:center;
  min-height:44px !important;
  padding:8px 14px !important;
  border:2px solid #fff !important;
  border-radius:12px !important;
  color:var(--std-blue) !important;
  background:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
  cursor:pointer;
  height:auto !important;
}

.std-header .std-header__back:hover,
.std-header .std-header__back:focus-visible{
  color:#fff !important;
  background:var(--std-blue) !important;
  outline:none !important;
}

/* 右側に戻る以外のボタンを並べるとき */
.std-header__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.std-header .std-header__sub{
  color:#fff !important;
  background:transparent !important;
}
.std-header .std-header__sub:hover,
.std-header .std-header__sub:focus-visible{
  color:var(--std-blue) !important;
  background:#fff !important;
}

/* ヘッダーのすぐ下の説明文 */
.std-header-lead{
  margin:0 0 12px;
  color:#5f6f86;
  font-size:14px;
  line-height:1.6;
}

/* 未読数などの小さな数字 */
.std-header-lead .total-badge{
  display:inline-block;
  min-width:0;
  margin:0 0 0 6px;
  height:auto;
  padding:2px 10px;
  border-radius:999px;
  line-height:1.4;
  vertical-align:middle;
  color:#fff;
  background:var(--std-blue);
  font-size:13px;
  font-weight:800;
  box-shadow:none;
}

@media(max-width:600px){
  .std-header{padding:calc(10px + env(safe-area-inset-top)) 12px 10px;gap:8px}
  .std-header .std-header__name{font-size:17px}
  .std-header__en{display:none}
  .std-header .std-header__back{min-height:40px !important;padding:6px 10px !important;font-size:13px !important}
}

@media print{
  .std-header{display:none}
}