@import url("https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

/* =========================================================
   NIKKE UNION MATCH
   NIKKE UI REBUILD v3
   - cyan unified borders/accent
   - square / hard-edged UI
   - angular typography
   - charcoal buttons -> cyan on hover/active
   ========================================================= */

:root {
  --bg: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #eceff1;
  --surface-3: #e3e7e9;

  --ink: #222428;
  --ink-2: #34363a;
  --ink-3: #44464a;
  --ink-soft: #62666a;

  --text: #222428;
  --muted: #7b8085;

  --line: #c8cdd0;
  --line-strong: #9da4a9;

  --cyan: #1ab0f1;
  --cyan-2: #28b8f4;
  --cyan-dark: #0b8fc8;

  --gold: #d89f20;
  --gold: #F2A124;
  --yellow: #F2A124;
  --yellow-deep: #D98912;

  --purple: #a828f0;
  --purple-2: #c875ff;

  --green: #35d78c;
  --red: #ff5364;

  --charcoal: #3d3e42;
  --charcoal-2: #303135;
  --charcoal-3: #27282b;

  --shadow:
    0 6px 18px rgba(26, 31, 36, .14);

  --shadow-soft:
    0 3px 10px rgba(26, 31, 36, .10);
}


/* =========================================================
   RESET / BASE
   ========================================================= */

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 76px;

  color: var(--text);

  background:
    linear-gradient(
      180deg,
      #f8fafb 0%,
      #f1f4f6 42%,
      #edf1f3 100%
    );

  font-family:
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  font-weight: 700;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";

  position: fixed;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      transparent 0 67%,
      rgba(34, 36, 40, .024) 67% 68%,
      transparent 68% 100%
    );
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}


/* =========================================================
   NIKKE ANGULAR GEOMETRY
   丸角ではなく「切り欠き / 面取り」の形
   ========================================================= */

:root {
  --cut-sm: 6px;
  --cut-md: 9px;
  --cut-lg: 12px;
}

.btn,
.creator-link-btn,
.search-tab,
.register-back-btn,
.manage-back-btn,
.copy-btn,
.x-btn,
.close-reason-btn,
.nav-btn {
  border-radius: 0 !important;

  clip-path:
    polygon(
      var(--cut-sm) 0,
      100% 0,
      100% calc(100% - var(--cut-sm)),
      calc(100% - var(--cut-sm)) 100%,
      0 100%,
      0 var(--cut-sm)
    );
}

.hero-stats,
.card,
.filters,
.panel,
.notice,
.easy-register-box,
.commander-close-reason,
.modal-card,
.pass-box,
.empty,
.graduated-commander-counter {
  border-radius: 0 !important;

  clip-path:
    polygon(
      var(--cut-md) 0,
      100% 0,
      100% calc(100% - var(--cut-md)),
      calc(100% - var(--cut-md)) 100%,
      var(--cut-md) 100%,
      0 calc(100% - var(--cut-md)),
      0 var(--cut-md)
    );
}

/* 入力欄は操作性優先で四角 */
input,
select,
textarea {
  border-radius: 0 !important;
  clip-path: none;
}

/* ボタンの角をよりNIKKEらしく強調 */
.main-register-btn,
.btn.primary {
  --cut-sm: 8px;
}

.search-tab.active,
.btn:active,
.btn.active,
.nav-btn.active {
  clip-path:
    polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    );
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;

  height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border-bottom: 2px solid var(--cyan);

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #252629 0%,
      #17181b 100%
    );

  box-shadow:
    0 4px 14px rgba(0, 0, 0, .22);
}

.brand {
  display: flex;
  flex-direction: column;

  font-family:
    "Industry",
    "Azonix",
    "Futura PT Condensed",
    "Teko",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  line-height: .82;
}

.brand-small {
  color: var(--cyan);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 4px;
}

.brand-main {
  color: #fff;

  font-size: 28px;
  font-weight: 700;

  letter-spacing: 1.4px;
}

.status-dot {
  color: #d7dadd;

  font:
    700 11px "Teko",
    sans-serif;

  letter-spacing: 1.4px;
}

.status-dot span {
  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 7px;

  background: var(--green);

  box-shadow:
    0 0 10px rgba(53, 215, 140, .85);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: 100%;
  max-width: 1380px;

  margin: 0 auto;
  padding: 0 18px;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
.hero-stat-title,
.hero-graduate-title,
.btn,
.search-tab,
.nav-btn,
.recruitment-type,
.state {
  font-family:
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  font-weight: 900;
}

h1,
h2,
h3 {
  margin: 0;

  color: var(--ink);

  letter-spacing: -.06em;
}

.eyebrow {
  margin-bottom: 8px;

  color: var(--ink-soft);

  font:
    800 11px "Teko",
    sans-serif;

  letter-spacing: 2.2px;
  text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  display: grid;

  grid-template-columns:
    minmax(320px, .82fr)
    minmax(560px, 1.18fr);

  gap: 28px;
  align-items: center;

  margin-bottom: 24px;
  padding: 34px 0 28px;

  border-bottom: 1px solid var(--line);
}

.hero-left {
  min-width: 0;
}

.hero h1 {
  font-size:
    clamp(42px, 5vw, 68px);

  line-height: .94;

  letter-spacing: -.075em;
}

.hero-title-line1,
.hero-title-line2 {
  display: block;
}

.hero h1 em {
  color: var(--cyan);

  font-style: normal;
}

.hero p {
  margin: 18px 0 20px;

  color: var(--ink-soft);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.8;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-actions,
.creator-action-row {
  display: flex;
  align-items: center;

  gap: 9px;

  flex-wrap: wrap;
}

.btn,
.creator-link-btn,
.search-tab,
.register-back-btn,
.manage-back-btn,
.copy-btn,
.text-btn {
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.btn {
  min-height: 48px;

  padding: 12px 20px;

  border: 1px solid #55575b;

  color: #f7f8f9;

  background:
    linear-gradient(
      180deg,
      #48494d 0%,
      #35363a 100%
    );

  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 3px 8px rgba(0, 0, 0, .15);
}

.btn:hover,
.btn:active,
.btn.active {
  border-color: var(--cyan);

  color: #fff;

  background:
    linear-gradient(
      180deg,
      var(--cyan-2),
      var(--cyan)
    );

  box-shadow:
    0 4px 12px rgba(26, 176, 241, .28);

  transform: translateY(-1px);
}

.btn.primary {
  position: relative;

  border-color: #56585c;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #48494d,
      #34363a
    );
}

.btn.primary::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background: var(--cyan);
}

.btn.primary:hover,
.btn.primary:active {
  background:
    linear-gradient(
      180deg,
      var(--cyan-2),
      var(--cyan)
    );
}

.btn.primary:hover::before,
.btn.primary:active::before {
  background: #fff;
}

.btn.danger {
  border-color: #56585c;

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      #48494d,
      #35363a
    );
}

.btn.danger:hover,
.btn.danger:active {
  border-color: var(--cyan);

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      var(--cyan-2),
      var(--cyan)
    );

  box-shadow:
    0 4px 12px rgba(26, 176, 241, .28);
}

.btn.ghost {
  border-color: var(--line-strong);

  color: var(--ink);

  background: #fff;
}

.wide {
  width: 100%;
}

.main-register-btn {
  flex: 1.45;

  min-height: 56px;

  font-size: 16px;
  font-weight: 900;
}

.creator-link-btn {
  flex: .8;

  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 14px;

  border: 1px solid #5b5d61;

  color: #f6f7f8;

  background:
    linear-gradient(
      180deg,
      #48494d,
      #35363a
    );

  font-size: 12px;
  font-weight: 900;

  text-decoration: none;
  white-space: nowrap;

  box-shadow: var(--shadow-soft);
}

.creator-link-btn:hover,
.creator-link-btn:active {
  border-color: var(--cyan);

  color: #fff;

  background:
    linear-gradient(
      180deg,
      var(--cyan-2),
      var(--cyan)
    );
}


/* =========================================================
   HERO STATS
   ========================================================= */

.hero-stats {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 224px;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, 1fr)
    1px
    minmax(0, 1fr) !important;

  align-items: stretch;

  gap: 0 !important;

  padding: 16px 14px 34px;

  border: 1px solid var(--cyan);

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4f6f7 100%
    );

  box-shadow: var(--shadow);
}

.hero-stats::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 92px;
  height: 4px;

  background: var(--cyan);
}

.hero-stat,
.hero-graduate-stat {
  min-width: 0;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 6px 8px;

  text-align: center;
}

.hero-graduate-stat {
  grid-column: 5 !important;
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 6px 8px !important;

  border: 0 !important;

  background: transparent !important;
}

.hero-stat-divider {
  width: 1px !important;
  height: 72% !important;
  min-height: 118px;

  align-self: center;

  background: #9aa2aa !important;
  opacity: 1 !important;
}

.hero-stat-title,
.hero-graduate-title {
  min-height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 7px;

  color: var(--ink);

  font-size: 13px;
  font-weight: 900;

  line-height: 1.2;
}

.hero-stat-number,
.hero-graduate-number {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 5px;
}

.hero-stat-number strong,
.hero-graduate-number strong {
  margin: 0;

  font-family:
    "Industry",
    "Azonix",
    "Futura PT Condensed",
    "Teko",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  font-size:
    clamp(54px, 6vw, 78px);

  font-weight: 800;

  line-height: .82;
}

.hero-stat-number span,
.hero-graduate-number span {
  padding-bottom: 5px;

  font-size: 17px;
  font-weight: 900;

  line-height: 1;
}

.hero-stat-sub,
.hero-graduate-sub {
  margin-top: 9px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.3;
}

/* commander */
.commander-stat .hero-stat-title,
.commander-stat .hero-stat-number strong,
.commander-stat .hero-stat-number span {
  color: var(--gold);
}

/* union */
.union-stat .hero-stat-title,
.union-stat .hero-stat-number strong,
.union-stat .hero-stat-number span {
  color: var(--cyan);
}

/* graduate */
.graduate-stat .hero-stat-title,
.graduate-stat .hero-stat-number strong,
.graduate-stat .hero-stat-number span,
.hero-graduate-title,
.hero-graduate-number strong,
.hero-graduate-number span {
  color: var(--purple);
}

.hero-stat-update {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 9px !important;

  color: var(--muted);

  font:
    700 10px "Teko",
    sans-serif;

  text-align: center;
}


/* =========================================================
   PAGE / HEADERS
   ========================================================= */

.page {
  display: none;
}

.page.active {
  display: block;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 16px;
}

.section-head h2 {
  font-size:
    clamp(26px, 3vw, 34px);

  line-height: 1.05;
}

.section-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;
}

.text-btn {
  padding: 7px 10px;

  border: 1px solid transparent;

  color: var(--ink-soft);

  background: transparent;

  font-weight: 900;

  cursor: pointer;
}

.text-btn:hover,
.text-btn:active {
  border-color: var(--cyan);

  color: var(--cyan);
}


/* =========================================================
   SEARCH TABS
   ========================================================= */

.search-tabs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;

  margin-bottom: 12px;
}

.search-tab {
  min-height: 50px;

  border: 1px solid #56585c;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #494a4e,
      #37383c
    );

  font-size: 14px;
  font-weight: 900;

  cursor: pointer;

  box-shadow: var(--shadow-soft);
}

.search-tab:hover,
.search-tab.active,
.commander-tab.active,
.union-tab.active {
  border-color: var(--cyan);

  color: #fff;

  background:
    linear-gradient(
      180deg,
      var(--cyan-2),
      var(--cyan)
    );

  box-shadow:
    0 4px 12px rgba(26, 176, 241, .28);
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters {
  margin-bottom: 14px;
  padding: 12px;

  border: 1px solid var(--cyan);

  background: var(--surface);

  box-shadow: var(--shadow-soft);
}

.filters label,
.panel label {
  display: block;

  color: var(--ink-soft);

  font-size: 11px;
  font-weight: 900;
}

.filters select,
.panel input,
.panel select,
.panel textarea,
#unionRank,
#registrationType,
#slvFilter,
#unionRankFilter {
  width: 100%;
  min-height: 46px;

  margin-top: 6px;
  padding: 11px 12px;

  border: 1px solid #b7bcc0;

  color: var(--ink);

  background: #fff;

  outline: none;
}

.filters select:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
#unionRank:focus,
#registrationType:focus,
#slvFilter:focus,
#unionRankFilter:focus {
  border-color: var(--cyan);

  box-shadow:
    inset
    0 0 0 1px var(--cyan);
}


/* =========================================================
   LIST HEADER COUNTS
   ========================================================= */

.registration-count {
  display: flex;
  align-items: baseline;

  gap: 14px;

  margin-top: 8px;
}

.registration-count > div {
  display: flex;
  align-items: baseline;

  gap: 4px;
}

.registration-count strong {
  font-family:
    "Industry",
    "Azonix",
    "Futura PT Condensed",
    "Teko",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  font-size: 24px;
  font-weight: 800;

  line-height: 1;
}

.registration-count span,
.registration-count small {
  font-size: 11px;
  font-weight: 900;
}

.registration-count > div:first-child strong,
.registration-count > div:first-child span,
.registration-count > div:first-child small {
  color: var(--gold);
}

.registration-count > div:nth-child(2) strong,
.registration-count > div:nth-child(2) span,
.registration-count > div:nth-child(2) small {
  color: var(--cyan);
}


/* =========================================================
   GRADUATED COUNTER
   ========================================================= */

.graduated-commander-counter {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 190px;

  padding: 8px 11px;

  border: 1px solid var(--cyan);

  background:
    linear-gradient(
      180deg,
      #fff,
      #f5f8fa
    );

  box-shadow: var(--shadow-soft);
}

.graduated-commander-number {
  display: flex;
  align-items: baseline;

  gap: 3px;
}

.graduated-commander-number strong {
  color: var(--purple);

  font:
    800 46px/.84 "Teko",
    sans-serif;
}

.graduated-commander-number span {
  color: var(--purple);

  font-size: 13px;
  font-weight: 900;
}

.graduated-commander-label {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.graduated-commander-label strong {
  color: var(--ink);

  font-size: 12px;
  font-weight: 900;
}

.graduated-commander-label small {
  color: var(--purple);

  font-size: 9px;
  font-weight: 900;
}


/* =========================================================
   CARDS
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );

  gap: 12px;
}

.card {
  position: relative;

  overflow: hidden;

  padding: 16px;

  border: 1px solid var(--cyan);

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #fff,
      #f4f6f7
    );

  box-shadow: var(--shadow-soft);
}

.card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: var(--cyan);
}

.card::after {
  content: "";

  position: absolute;
  right: -28px;
  top: -28px;

  width: 76px;
  height: 76px;

  border: 1px solid rgba(26, 176, 241, .16);

  transform: rotate(45deg);

  pointer-events: none;
}

.card.commander-card,
.card.union-card {
  border-color: var(--cyan);
}

.card.commander-card::before,
.card.union-card::before {
  background: var(--cyan);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;
}

.type-with-new {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}

.recruitment-type {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  padding: 4px 8px;

  border: 1px solid var(--cyan);

  color: var(--cyan-dark);

  background: #f4fbfe;

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;
}

.commander-card .recruitment-type,
.union-card .recruitment-type {
  border-color: var(--cyan);

  color: var(--cyan-dark);
}

.state {
  padding: 4px 7px;

  border: 1px solid var(--cyan);

  color: var(--cyan-dark);

  background: rgba(26, 176, 241, .08);

  font-size: 10px;
  font-weight: 900;
}

.name {
  margin: 10px 0 3px;

  color: var(--ink);

  font-size: 20px;
  font-weight: 900;
}

.slv {
  color: var(--gold);

  font:
    800 34px "Teko",
    sans-serif;
}

.slv small {
  margin-left: 4px;

  color: var(--muted);

  font-size: 11px;
}

.date {
  margin-top: 8px;

  color: var(--muted);

  font-size: 10px;
}

.countdown {
  margin-top: 12px;
  padding-top: 10px;

  border-top: 1px solid #dfe4e7;

  color: var(--ink-soft);

  font-size: 11px;
}

.countdown.warning {
  color: #9b7300;
}

.countdown.danger {
  color: #d73b4d;
}


/* =========================================================
   NEW BADGE
   ========================================================= */

.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 3px 6px;

  border: 1px solid #ff5364;

  color: #ffffff;

  background: #ff5364;

  box-shadow: 0 2px 6px rgba(255, 83, 100, .22);

  font-size: 9px;
  font-weight: 900;

  white-space: nowrap;
}


/* =========================================================
   X COLLECTED CARD / VISUAL TEST
   指揮官=orange、ユニオン=blue と分離する紫 #8B5CF6
   ========================================================= */

/* X cards share the same plain white surface as regular cards. */
body .card.x-collected-card {
  border-color: #e2e2e2 !important;
  background: #fff !important;
}

/* No colored left stripe or decorative corner motif. */
body .card.x-collected-card::before,
body .card.x-collected-card::after {
  content: none !important;
  display: none !important;
}

body .x-collected-card-head {
  justify-content: flex-start;
}

body .x-listed-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid #8B5CF6;
  color: #7C3AED;
  background: rgba(139, 92, 246, .09);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

body .card.x-collected-card .x-post-area {
  margin-top: 12px;
}


/* =========================================================
   X
   ========================================================= */

.x-post-area {
  margin-top: 10px;
}

.x-embed {
  min-height: 0;
}

.x-embed-error {
  padding: 18px 10px;

  border: 1px dashed var(--cyan);

  color: var(--muted);

  background: #f3f6f8;

  text-align: center;
}

.x-btn {
  display: block;

  margin-top: 12px;
  padding: 10px;

  border: 1px solid #56585c;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #494a4e,
      #35363a
    );

  font-size: 12px;
  font-weight: 900;

  text-align: center;
  text-decoration: none;
}

.x-btn:hover,
.x-btn:active {
  border-color: var(--cyan);

  background: var(--cyan);
}


/* =========================================================
   UNION RANK
   ランクラベルだけ塗りつぶし + 白文字
   ========================================================= */

.union-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  margin-top: 7px;
  padding: 5px 12px;

  border: 1px solid transparent;
  border-radius: 999px;

  color: #ffffff;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: .02em;
  line-height: 1.2;
}

.rank-challenger {
  color: #ffffff;
  border-color: #e14949;
  background: #e14949;
}

.rank-diamond {
  color: #ffffff;
  border-color: #9d46d8;
  background: #9d46d8;
}

.rank-platinum {
  color: #ffffff;
  border-color: #159dcf;
  background: #159dcf;
}

.rank-gold {
  color: #ffffff;
  border-color: #d89f20;
  background: #d89f20;
}

.rank-silver {
  color: #ffffff;
  border-color: #9ca3a9;
  background: #9ca3a9;
}

.rank-rookie {
  color: #ffffff;
  border-color: #83b641;
  background: #83b641;
}

.rank-default {
  color: var(--ink-soft);
  border-color: #999;
  background: #f3f4f5;
}


/* =========================================================
   PANEL / FORM / NOTICE
   ========================================================= */

.panel {
  display: grid;

  gap: 14px;

  padding: 16px;

  border: 1px solid var(--cyan);

  color: var(--ink);

  background: #fff;

  box-shadow: var(--shadow-soft);
}

.notice {
  display: grid;

  gap: 3px;

  padding: 11px 13px;

  border-left: 4px solid var(--cyan);

  color: var(--ink-soft);

  background: #edf8fd;

  font-size: 11px;

  line-height: 1.6;
}

.notice strong {
  color: var(--ink);
}

.easy-register-box {
  margin: 0 0 18px;
  padding: 16px;

  border: 1px solid var(--cyan);
  border-left: 5px solid var(--cyan);

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #fff,
      #f3f6f8
    );

  box-shadow: var(--shadow-soft);
}

.easy-register-title {
  margin-bottom: 10px;

  color: var(--ink);

  font-size: 17px;
  font-weight: 900;
}

.easy-register-list {
  display: grid;

  gap: 5px;

  color: var(--ink-soft);

  font-size: 13px;

  line-height: 1.55;
}

.easy-register-copy {
  margin-top: 10px;

  color: var(--cyan-dark);

  font-size: 13px;
  font-weight: 900;
}

.easy-register-privacy {
  margin-top: 12px;
  padding: 9px 11px;

  border: 1px solid var(--cyan);

  color: var(--cyan-dark);

  background: rgba(26, 176, 241, .06);

  font-size: 11px;
  font-weight: 900;
}


/* =========================================================
   INLINE REGISTER / MANAGE
   ========================================================= */

#heroRegisterArea,
#heroManageArea {
  display: none;
}

body.register-mode #heroRegisterArea,
body.manage-mode #heroManageArea {
  display: block;

  margin-top: 20px;
}

body.register-mode .hero-stats,
body.manage-mode .hero-stats {
  display: none !important;
}

body.register-mode .hero,
body.manage-mode .hero {
  grid-template-columns:
    minmax(0, 760px) !important;

  justify-content: center !important;
}

body.register-mode .hero-left,
body.manage-mode .hero-left {
  width: 100% !important;
  max-width: 760px !important;
}

body.register-mode #registerPage,
body.manage-mode #managePage {
  display: block !important;

  width: 100%;

  margin: 0;
  padding: 0 0 22px;
}

.register-inline-top,
.manage-inline-top {
  display: block !important;

  width: 100% !important;

  margin: 0 0 14px !important;
}

.register-back-btn,
.manage-back-btn {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 !important;

  border: 1px solid #56585c !important;

  color: #fff !important;

  background:
    linear-gradient(
      180deg,
      #494a4e,
      #35363a
    ) !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  cursor: pointer;
}

.register-back-btn:hover,
.manage-back-btn:hover,
.register-back-btn:active,
.manage-back-btn:active {
  border-color: var(--cyan) !important;

  background: var(--cyan) !important;
}


/* =========================================================
   v41 REGISTER / MANAGE CLEANUP
   2026-09-10
   - register/manage centered
   - compact square back buttons
   - registration help moved beside labels
   - no logic/data changes
   ========================================================= */

#registerPage .form-label-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

#registerPage .form-label-help {
  color: var(--cyan-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

#registerPage .register-period-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 10px;
}

#registerPage .register-period-note > span {
  color: var(--cyan-dark);
  font-weight: 900;
}

@media screen and (max-width: 600px) {
  #registerPage .form-label-line,
  #registerPage .register-period-note {
    align-items: flex-start;
  }
}


/* =========================================================
   COMMANDER CLOSE REASON
   ========================================================= */

.commander-close-reason {
  margin-top: 14px;
  padding: 14px;

  border: 1px solid var(--cyan);

  background: #f6f8f9;
}

.commander-close-reason[hidden] {
  display: none !important;
}

.commander-close-reason-title {
  margin-bottom: 10px;

  color: var(--ink);

  font-size: 13px;
  font-weight: 900;
}

.close-reason-btn {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin-bottom: 8px;
  padding: 12px 13px;

  border: 1px solid #56585c;

  color: #fff;

  background:
    linear-gradient(
      180deg,
      #494a4e,
      #35363a
    );

  text-align: left;

  cursor: pointer;

  transition: .15s;
}

.close-reason-btn:hover,
.close-reason-btn:active {
  border-color: var(--cyan);

  background: var(--cyan);
}

.close-reason-btn strong {
  font-size: 13px;
  font-weight: 900;
}

.close-reason-btn small {
  margin-top: 4px;

  color: rgba(255, 255, 255, .80);

  font-size: 10px;

  line-height: 1.45;
}

.close-reason-btn.graduated {
  border-left: 5px solid var(--purple);
}

.close-reason-btn.close-only {
  border-left: 5px solid var(--red);
}


/* =========================================================
   MESSAGE / EMPTY
   ========================================================= */

.message {
  margin-bottom: 12px;
  padding: 11px;

  border: 1px solid var(--cyan);

  background: #fff;
}

.message.ok {
  color: #13794d;
}

.message.error {
  color: #c93748;
}

.hidden {
  display: none !important;
}

.empty {
  padding: 48px 18px;

  border: 1px dashed var(--cyan);

  color: var(--muted);

  background: #f8fafb;

  text-align: center;
}

.empty-icon {
  margin-bottom: 7px;

  color: var(--cyan);

  font-size: 36px;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;

  display: grid;
  place-items: center;

  padding: 16px;

  background:
    rgba(17, 18, 20, .78);
}

.modal-card {
  position: relative;

  width:
    min(480px, 100%);

  padding: 22px;

  border: 1px solid var(--cyan);

  color: var(--ink);

  background: #fff;

  box-shadow:
    0 22px 70px rgba(0, 0, 0, .35);
}

.modal-close {
  position: absolute;

  top: 6px;
  right: 9px;

  padding: 0;

  border: 0;

  color: var(--ink-soft);

  background: none;

  font-size: 26px;

  cursor: pointer;
}

.pass-box {
  margin: 16px 0;
  padding: 18px;

  border: 1px solid var(--cyan);

  background: #f3f6f8;

  text-align: center;
}

.pass-box span {
  display: block;

  color: var(--muted);

  font:
    700 10px "Teko",
    sans-serif;

  letter-spacing: 2px;
}

.pass-box strong {
  display: block;

  margin: 4px 0 10px;

  color: var(--cyan);

  font:
    800 40px "Teko",
    sans-serif;

  letter-spacing: 6px;
}

.copy-btn {
  padding: 7px 11px;

  border: 1px solid #56585c;

  color: #fff;

  background: var(--charcoal);

  cursor: pointer;
}

.copy-btn:hover,
.copy-btn:active {
  border-color: var(--cyan);

  background: var(--cyan);
}

.result-row {
  display: flex;
  justify-content: space-between;

  padding: 9px 0;

  border-bottom: 1px solid #e1e4e6;

  font-size: 12px;
}

.result-row span {
  color: var(--muted);
}

.warning {
  color: #c93748;

  font-size: 11px;

  line-height: 1.6;
}

.registration-pass-warning {
  margin-top: 12px;
  color: #c93748;
}

.registration-pass-warning strong {
  display: block;
  color: #c82f40;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.registration-pass-warning span {
  display: block;
  margin-top: 3px;
  color: #c93748;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

.bottom-nav {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;

  height: 68px;

  display: flex;
  justify-content: center;

  border-top: 2px solid var(--cyan);

  background:
    linear-gradient(
      180deg,
      #2d2e31,
      #1d1e21
    );

  box-shadow:
    0 -4px 14px rgba(0, 0, 0, .16);
}

.nav-btn {
  flex: 1;

  max-width: 300px;

  border: 0;

  color: #d0d2d4;

  background: transparent;

  font-size: 10px;
  font-weight: 900;

  cursor: pointer;

  transition: .15s;
}

.nav-btn span {
  display: block;

  margin-bottom: 3px;

  font-size: 20px;

  line-height: 19px;
}

.nav-btn:hover { color: #20b8f4; }
.nav-btn.active { color:#fff; background:transparent; box-shadow: inset 0 -2px 0 #20b8f4; }




/* =========================================================
   INDUSTRIAL / SCI-FI LATIN
   Spaceeland / Industry 系の「細長く硬い」方向
   ========================================================= */

.brand,
.status-dot,
.eyebrow,
.hero-stat-number strong,
.hero-graduate-number strong,
.registration-count strong,
.graduated-commander-number strong,
.pass-box strong,
.pass-box span,
.slv,
.hero-stat-update {
  font-family:
    "Industry",
    "Azonix",
    "Futura PT Condensed",
    "Teko",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;
}

.brand-main {
  font-stretch: condensed;
  text-transform: uppercase;
}

.eyebrow,
.status-dot,
.hero-stat-update {
  letter-spacing: .08em;
}

.hero-stat-number strong,
.hero-graduate-number strong,
.registration-count strong,
.graduated-commander-number strong,
.pass-box strong,
.slv {
  letter-spacing: .01em;
}

/* 日本語見出しは角ゴシックを強く・少し詰める */
.hero h1,
.section-head h2,
.name,
.easy-register-title,
.commander-close-reason-title {
  font-family:
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif;

  font-weight: 900;
  letter-spacing: -.07em;
}



/* =========================================================
   v5 COUNTER / INDUSTRIAL FONT SYSTEM
   ========================================================= */

.hero-stat-number strong,
.hero-graduate-number strong,
.registration-count strong,
.graduated-commander-number strong,
.pass-box strong,
.slv {
  font-family:
    "Spaceeland Eight",
    "Industry",
    "Futura PT Condensed",
    "Teko",
    sans-serif !important;

  font-weight: 700;
  letter-spacing: .015em;
}

/* NIKKE logo / English UI */
.brand-main,
.brand-small,
.status-dot,
.eyebrow,
.hero-stat-update {
  font-family:
    "Futura PT Condensed",
    "Industry",
    "Azonix",
    "Teko",
    sans-serif !important;
}

/* Japanese headings: MB101 direction with free fallback */
.hero h1,
.section-head h2,
.name,
.easy-register-title,
.commander-close-reason-title,
.hero-stat-title,
.hero-graduate-title,
.btn,
.search-tab,
.nav-btn {
  font-family:
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif !important;

  font-weight: 900;
  letter-spacing: -.065em;
}



/* =========================================================
   v6 COMMANDER ORANGE
   NIKKE UI orange / no text outline
   ========================================================= */

.commander-stat .hero-stat-title,
.commander-stat .hero-stat-number strong,
.commander-stat .hero-stat-number span,
.registration-count > div:first-child strong,
.registration-count > div:first-child span,
.registration-count > div:first-child small,
.slv {
  color: var(--yellow) !important;
}





/* =========================================================
   v6 NIKKE BUTTON SHAPE
   ========================================================= */

.btn,
.creator-link-btn,
.search-tab,
.register-back-btn,
.manage-back-btn,
.copy-btn,
.x-btn,
.close-reason-btn {
  clip-path:
    polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      0 calc(100% - 8px),
      0 8px
    ) !important;

  border-radius: 0 !important;
}

.btn,
.creator-link-btn,
.search-tab,
.register-back-btn,
.manage-back-btn,
.copy-btn,
.x-btn,
.close-reason-btn {
  border-color: #5a5d62 !important;

  background:
    linear-gradient(
      180deg,
      #45474c 0%,
      #323439 100%
    );
}

.btn:hover,
.btn:active,
.btn.active,
.creator-link-btn:hover,
.creator-link-btn:active,
.search-tab:hover,
.search-tab:active,
.search-tab.active,
.register-back-btn:hover,
.register-back-btn:active,
.manage-back-btn:hover,
.manage-back-btn:active,
.copy-btn:hover,
.copy-btn:active,
.x-btn:hover,
.x-btn:active,
.close-reason-btn:hover,
.close-reason-btn:active {
  border-color: var(--cyan) !important;

  color: #fff !important;

  background:
    linear-gradient(
      180deg,
      #2cc5ff 0%,
      var(--cyan) 100%
    ) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 4px 12px rgba(26,176,241,.26);
}



/* =========================================================
   v6 NIKKE PANEL ACCENT
   ========================================================= */

.hero-stats,
.card,
.filters,
.panel,
.easy-register-box,
.commander-close-reason,
.modal-card,
.pass-box,
.graduated-commander-counter {
  border-color: var(--cyan) !important;
}

.hero-stats,
.card,
.filters,
.panel,
.easy-register-box,
.commander-close-reason,
.modal-card,
.pass-box,
.graduated-commander-counter {
  clip-path:
    polygon(
      10px 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 10px
    ) !important;

  border-radius: 0 !important;
}



/* =========================================================
   v6 FINAL VISUAL TUNING
   NIKKE-like hierarchy / cleaner readability
   ========================================================= */

/* Commander = orange, Union = cyan, Result = purple */
.commander-stat .hero-stat-title,
.commander-stat .hero-stat-number strong,
.commander-stat .hero-stat-number span {
  color: #F2A124 !important;
}

.union-stat .hero-stat-title,
.union-stat .hero-stat-number strong,
.union-stat .hero-stat-number span {
  color: #18ABF4 !important;
}

.hero-graduate-title,
.hero-graduate-number strong,
.hero-graduate-number span {
  color: #A928F2 !important;
}

/* No outline/glow around text */
.hero h1 em,
.commander-stat *,
.union-stat *,
.hero-graduate-stat *,
.slv,
.brand,
.section-head,
.card,
.btn,
.search-tab {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Make the two vertical dividers clearly visible */
.hero-stats > .hero-stat-divider {
  display: block !important;
  width: 1px !important;
  height: 72% !important;
  min-height: 118px !important;
  align-self: center !important;
  background: #9AA2AA !important;
  opacity: 1 !important;
}

/* PC readability: the previous version was slightly too small */
@media screen and (min-width: 1025px) {
  .topbar {
    min-height: 74px;
  }

  .brand-small {
    font-size: 12px;
  }

  .brand-main {
    font-size: 28px;
  }

  .status-dot {
    font-size: 12px;
  }

  .hero {
    grid-template-columns:
      minmax(390px, .78fr)
      minmax(620px, 1.22fr);
    gap: 38px;
  }

  .hero p {
    font-size: 15px;
  }

  .hero-stats {
    min-height: 238px;
    padding: 18px 18px 38px;
  }

  .hero-stat-title,
  .hero-graduate-title {
    font-size: 14px;
  }

  .hero-stat-number strong,
  .hero-graduate-number strong {
    font-size: 76px;
  }

  .hero-stat-number span,
  .hero-graduate-number span {
    font-size: 20px;
  }

  .hero-stat-sub,
  .hero-graduate-sub {
    font-size: 11px;
  }

  .section-head h2 {
    font-size: 34px;
  }
}

/* Recruitment cards: keep accent line cyan; SLV uses commander orange */
.card {
  border-color: #28B8F2 !important;
}

.card .slv {
  color: #F2A124 !important;
  text-shadow: none !important;
}

/* Buttons: charcoal at rest, cyan only for active/hover */
.btn,
.creator-link-btn,
.search-tab,
.register-back-btn,
.manage-back-btn,
.copy-btn,
.x-btn,
.close-reason-btn {
  text-shadow: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 1024px) {

  .hero {
    grid-template-columns:
      minmax(260px, .75fr)
      minmax(440px, 1.25fr);

    gap: 18px;
  }

  .hero h1 {
    font-size:
      clamp(38px, 5.3vw, 54px);
  }

  .hero p {
    font-size: 12px;
  }

  .hero-stats {
    min-height: 196px;

    padding:
      14px 8px 31px;
  }

  .hero-stat-title,
  .hero-graduate-title {
    font-size: 11px;
  }

  .hero-stat-number strong,
  .hero-graduate-number strong {
    font-size:
      clamp(46px, 6vw, 62px);
  }

  .hero-stat-number span,
  .hero-graduate-number span {
    font-size: 13px;
  }

  .hero-stat-sub,
  .hero-graduate-sub {
    font-size: 8px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

  .hero-stats > .hero-stat-divider {
    width: 1px !important;
    height: 76px !important;
    min-height: 76px !important;
    background: #8F979F !important;
    opacity: 1 !important;
  }


  body {
    padding-bottom: 68px;
  }

  .topbar {
    height: 62px;

    padding: 0 14px;
  }

  .brand-small {
    font-size: 9px;
  }

  .brand-main {
    font-size: 21px;
  }

  .container {
    padding-left: 9px;
    padding-right: 9px;
  }

  .hero {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 9px !important;

    margin: 0 0 12px;
    padding: 16px 0 12px;

    border-bottom: 1px solid var(--cyan);
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    font-size:
      clamp(34px, 10.4vw, 46px);

    line-height: .93;
  }

  .hero p {
    margin: 10px 0 11px;

    font-size: 10.5px;

    line-height: 1.5;
  }

  .hero-actions,
  .creator-action-row {
    display: grid;

    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(0, 1fr);

    gap: 6px;

    width: 100%;
  }

  .main-register-btn,
  .hero-actions .btn.primary {
    width: 100%;

    min-height: 42px;

    padding: 0 8px;

    font-size: 11px;
  }

  .creator-link-btn {
    width: 100%;

    min-height: 42px;

    padding: 0 6px;

    font-size: 9.5px;
  }

  .hero-stats {
    width: 100% !important;
    max-width: none !important;
    min-height: 142px !important;

    grid-template-columns:
      minmax(0, 1fr)
      1px
      minmax(0, 1fr)
      1px
      minmax(0, 1fr) !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 8px 3px 24px !important;

    border: 1px solid var(--cyan);
  }

  .hero-stat,
  .hero-graduate-stat {
    min-width: 0;

    padding: 3px !important;
  }

  .hero-graduate-stat {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  .hero-stat-divider {
    min-height: 72px;

    height: 72px !important;
  }

  .hero-stat-title,
  .hero-graduate-title {
    min-height: 18px;

    margin-bottom: 2px;

    font-size: 8.5px !important;

    line-height: 1.1;

    white-space: nowrap !important;
  }

  .hero-stat-number,
  .hero-graduate-number {
    gap: 2px !important;
  }

  .hero-stat-number strong,
  .hero-graduate-number strong {
    font-size:
      clamp(31px, 9.7vw, 39px) !important;

    line-height: .82;
  }

  .hero-stat-number span,
  .hero-graduate-number span {
    padding-bottom: 2px !important;

    font-size: 9px !important;
  }

  .hero-stat-sub,
  .hero-graduate-sub {
    margin-top: 3px !important;

    font-size: 6.7px !important;

    line-height: 1.15;
  }

  .hero-stat-update {
    bottom: 5px !important;

    font-size: 7.5px !important;
  }

  .section-head {
    gap: 8px;

    margin-bottom: 12px;
  }

  .section-head h2 {
    font-size:
      clamp(20px, 6vw, 26px);
  }

  .cards {
    grid-template-columns:
      1fr;

    gap: 9px;
  }

  .card {
    padding: 13px;
  }

  .name {
    font-size: 18px;
  }

  .slv {
    font-size: 30px;
  }

  input,
  select,
  textarea,
  #registerPage input,
  #registerPage select,
  #registerPage textarea,
  #managePage input,
  #managePage select,
  #managePage textarea {
    font-size: 16px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 360px) {

  .hero h1 {
    font-size: 33px;
  }

  .hero-stat-title,
  .hero-graduate-title {
    font-size: 7.5px !important;
  }

  .hero-stat-number strong,
  .hero-graduate-number strong {
    font-size: 29px !important;
  }

  .hero-stat-sub,
  .hero-graduate-sub {
    font-size: 6px !important;
  }

}
/* =========================================================
   v9 BRAND SWAP / RESPONSIVE HERO LOGO
   HTML想定:
   topbar:
     .brand-small = 指揮官とユニオンを
     .brand-main  = つなぐ。
   hero h1:
     .hero-title-line1 = NIKKE
     .hero-title-line2 = UNION MATCH
   ========================================================= */

/* ---------- HEADER: 日本語キャッチは小さく固定 ---------- */

.topbar .brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 5px !important;

  line-height: 1 !important;
  white-space: nowrap !important;
}

.topbar .brand-small,
.topbar .brand-main {
  font-family:
    "JTCウインZ10",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif !important;

  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.06em !important;
  white-space: nowrap !important;
  text-transform: none !important;
}

/* 指揮官とユニオンを */
.topbar .brand-small {
  color: #ffffff !important;
  font-size: 15px !important;
}

/* つなぐ。 */
.topbar .brand-main {
  color: var(--cyan) !important;
  font-size: 15px !important;
}


/* ---------- HERO: NIKKE / UNION MATCH ---------- */

.hero h1 {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  font-family:
    "Futura PT Condensed",
    "Industry",
    "Azonix",
    "Teko",
    sans-serif !important;

  font-weight: 800 !important;
  line-height: .82 !important;

  white-space: nowrap !important;
}

.hero-title-line1,
.hero-title-line2 {
  display: block !important;
  white-space: nowrap !important;
}

/* NIKKE */
.hero-title-line1 {
  color: var(--cyan) !important;

  font-size: .34em !important;
  line-height: .9 !important;

  letter-spacing: .34em !important;

  margin: 0 0 .18em .04em !important;
}

/* UNION MATCH */
.hero-title-line2 {
  color: var(--ink) !important;

  font-size: 1em !important;
  line-height: .82 !important;

  letter-spacing: -.035em !important;

  margin: 0 !important;
}

/* 旧 em 指定が残っていても無効化 */
.hero-title-line2 em,
.hero h1 em {
  color: inherit !important;
  font: inherit !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
}


/* =========================================================
   v9 DESKTOP
   PCはデザインを安定させる固定寄り
   ========================================================= */

@media screen and (min-width: 1025px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 14px !important;
  }

  .hero h1 {
    font-size: 68px !important;
  }

  .hero-title-line1 {
    font-size: .30em !important;
  }

  .hero {
    grid-template-columns:
      minmax(370px, .80fr)
      minmax(590px, 1.20fr) !important;

    gap: 30px !important;
  }
}


/* =========================================================
   v9 TABLET
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 1024px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 13px !important;
  }

  .hero h1 {
    font-size:
      clamp(52px, 7vw, 64px) !important;
  }

  .hero-title-line1 {
    font-size: .31em !important;
  }
}


/* =========================================================
   v9 MOBILE
   NIKKE / UNION MATCHだけ端末幅に合わせて自動伸縮
   ========================================================= */

@media screen and (max-width: 600px) {

  .topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar .brand {
    max-width: calc(100vw - 125px) !important;
    overflow: hidden !important;
  }

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 12px !important;
  }

  .hero-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero h1 {
    width: 100% !important;

    font-size:
      clamp(44px, 13.1vw, 62px) !important;

    line-height: .80 !important;
  }

  .hero-title-line1 {
    font-size: .31em !important;

    letter-spacing: .31em !important;

    margin-bottom: .16em !important;
  }

  .hero-title-line2 {
    font-size: 1em !important;
    letter-spacing: -.042em !important;
  }

  .hero {
    padding-top: 10px !important;
  }
}


/* 小型スマホ */
@media screen and (max-width: 360px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 11px !important;
  }

  .hero h1 {
    font-size:
      clamp(40px, 12.7vw, 47px) !important;
  }
}
/* =========================================================
   v10 CORRECT BRAND SWAP
   HEADER = 指揮官とユニオンを つなぐ。
   HERO   = NIKKE / UNION MATCH
   ========================================================= */

/* ---------- HEADER ---------- */

.topbar .brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 5px !important;

  white-space: nowrap !important;
  line-height: 1 !important;
}

.topbar .brand-small,
.topbar .brand-main {
  font-family:
    "JTCウインZ10",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif !important;

  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;

  white-space: nowrap !important;
  text-transform: none !important;
}

/* 指揮官とユニオンを */
.topbar .brand-small {
  color: #ffffff !important;
  font-size: 14px !important;
}

/* つなぐ。 */
.topbar .brand-main {
  color: var(--cyan) !important;
  font-size: 14px !important;
}


/* ---------- HERO LOGO ---------- */

.hero h1 {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  font-family:
    "Futura PT Condensed",
    "Industry",
    "Azonix",
    "Teko",
    sans-serif !important;

  font-weight: 800 !important;
  line-height: .82 !important;

  white-space: nowrap !important;
}

.hero-title-line1,
.hero-title-line2 {
  display: block !important;
  white-space: nowrap !important;
}

/* NIKKE */
.hero-title-line1 {
  color: var(--cyan) !important;

  font-size: .31em !important;
  line-height: .9 !important;

  letter-spacing: .34em !important;

  margin: 0 0 .18em .04em !important;
}

/* UNION MATCH */
.hero-title-line2 {
  color: var(--ink) !important;

  font-size: 1em !important;
  line-height: .82 !important;

  letter-spacing: -.035em !important;

  margin: 0 !important;
}

/* Old em rules should not affect UNION MATCH */
.hero-title-line2 em,
.hero h1 em {
  color: inherit !important;
  font: inherit !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
}


/* =========================================================
   v10 DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 14px !important;
  }

  .hero h1 {
    font-size: 70px !important;
  }

  .hero {
    grid-template-columns:
      minmax(370px, .80fr)
      minmax(590px, 1.20fr) !important;

    gap: 30px !important;
  }
}


/* =========================================================
   v10 TABLET
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 1024px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 13px !important;
  }

  .hero h1 {
    font-size:
      clamp(52px, 7vw, 64px) !important;
  }
}


/* =========================================================
   v10 MOBILE
   Only NIKKE / UNION MATCH auto-scales with device width
   ========================================================= */

@media screen and (max-width: 600px) {

  .topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar .brand {
    max-width: calc(100vw - 125px) !important;
    overflow: hidden !important;
  }

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 12px !important;
  }

  .hero-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero h1 {
    width: 100% !important;

    font-size:
      clamp(46px, 13.4vw, 64px) !important;

    line-height: .80 !important;
  }

  .hero-title-line1 {
    font-size: .31em !important;
    letter-spacing: .31em !important;
    margin-bottom: .16em !important;
  }

  .hero-title-line2 {
    font-size: 1em !important;
    letter-spacing: -.045em !important;
  }

  .hero {
    padding-top: 10px !important;
  }
}


@media screen and (max-width: 360px) {

  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 11px !important;
  }

  .hero h1 {
    font-size:
      clamp(41px, 12.8vw, 48px) !important;
  }
}

/* =========================================================
   v11 FINAL OVERRIDES
   HEADER: 指揮官とユニオンをつなぐ。 / no visual gap
   HERO  : NIKKE GODDESS OF VICTORY / UNION MATCH
   PC    : larger hero balance
   MOBILE: near edge-to-edge layout
   ========================================================= */

/* ---------- HEADER ---------- */
.topbar .brand {
  display: block !important;
  max-width: none !important;
  overflow: visible !important;
  gap: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* New one-piece header markup */
.topbar .brand-copy {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;

  font-family:
    "JTCウインZ10",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;

  white-space: nowrap !important;
}

.topbar .brand-accent {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--cyan) !important;

  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;

  white-space: nowrap !important;
}

/* Compatibility with the older two-span header markup */
.topbar .brand-small,
.topbar .brand-main {
  margin: 0 !important;
  padding: 0 !important;

  font-family:
    "JTCウインZ10",
    "Gothic MB101",
    "Zen Kaku Gothic New",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;

  white-space: nowrap !important;
}

.topbar .brand-small {
  color: #fff !important;
}

.topbar .brand-main {
  color: var(--cyan) !important;
}


/* ---------- HERO LOGO ---------- */
.hero h1 {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  font-family:
    "Futura PT Condensed",
    "Industry",
    "Azonix",
    "Teko",
    sans-serif !important;

  font-weight: 800 !important;
  line-height: .80 !important;

  white-space: nowrap !important;
}

.hero h1 .hero-title-line1 {
  display: block !important;

  margin: 0 0 .18em .04em !important;

  color: var(--cyan) !important;

  font-size: clamp(14px, 1.25vw, 20px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .22em !important;

  white-space: nowrap !important;
}

.hero h1 .hero-title-line2 {
  display: block !important;

  margin: 0 !important;

  color: var(--ink) !important;

  font-size: clamp(60px, 7vw, 104px) !important;
  font-weight: 900 !important;
  line-height: .82 !important;
  letter-spacing: -.045em !important;

  white-space: nowrap !important;
}

.hero-title-line2 em,
.hero h1 em {
  color: inherit !important;
  font: inherit !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
}


/* ---------- DESKTOP ---------- */
@media screen and (min-width: 1025px) {
  .container {
    max-width: 1540px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .hero {
    grid-template-columns:
      minmax(520px, 1.16fr)
      minmax(460px, .84fr) !important;

    gap: 38px !important;
    align-items: start !important;
  }

  .hero h1 .hero-title-line1 {
    font-size: clamp(16px, 1.05vw, 22px) !important;
    letter-spacing: .24em !important;
  }

  .hero h1 .hero-title-line2 {
    font-size: clamp(78px, 5.8vw, 112px) !important;
  }

  .hero-stats {
    min-height: 240px !important;
  }
}


/* ---------- TABLET ---------- */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .topbar .brand-copy,
  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 13px !important;
  }

  .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .hero h1 .hero-title-line1 {
    font-size: clamp(14px, 2vw, 18px) !important;
    letter-spacing: .18em !important;
  }

  .hero h1 .hero-title-line2 {
    font-size: clamp(60px, 10vw, 86px) !important;
  }
}


/* ---------- MOBILE ---------- */
@media screen and (max-width: 600px) {
  .topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar .brand {
    max-width: calc(100vw - 112px) !important;
    overflow: visible !important;
  }

  .topbar .brand-copy,
  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 12px !important;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 20px !important;
  }

  .hero-left {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .hero h1 {
    width: 100% !important;
  }

  .hero h1 .hero-title-line1 {
    margin: 0 0 .14em .02em !important;

    font-size: clamp(12px, 3.6vw, 16px) !important;
    letter-spacing: .16em !important;
  }

  .hero h1 .hero-title-line2 {
    font-size: clamp(58px, 15.5vw, 74px) !important;
    letter-spacing: -.055em !important;
  }

  .hero-stats,
  .filters,
  .card,
  .panel,
  .notice,
  .easy-register-box,
  .search-tabs {
    width: 100% !important;
  }
}


/* ---------- SMALL MOBILE ---------- */
@media screen and (max-width: 360px) {
  .topbar .brand-copy,
  .topbar .brand-small,
  .topbar .brand-main {
    font-size: 11px !important;
  }

  .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .hero-left {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .hero h1 .hero-title-line1 {
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  .hero h1 .hero-title-line2 {
    font-size: clamp(50px, 15.2vw, 64px) !important;
  }
}


/* =========================================================
   v11.1 COMMANDER COLOR RESTORE
   指揮官 = orange / ユニオン = blue
   ========================================================= */

/* 指揮官カードのアクセント */
.card.commander-card {
  border-color: #ff7a18 !important;
}

.card.commander-card::before {
  background: #ff7a18 !important;
}

/* ● 指揮官 */
.card.commander-card .recruitment-type {
  border-color: #ff7a18 !important;
  color: #ff9b32 !important;
  background: rgba(255, 122, 24, .08) !important;
}

/* SLV */
.card.commander-card .slv,
.card.commander-card .slv small {
  color: #7b8085 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* ユニオンはブルーを維持 */
.card.union-card {
  border-color: #3696ff !important;
}

.card.union-card::before {
  background: #3696ff !important;
}

.card.union-card .recruitment-type {
  border-color: #3696ff !important;
  color: #3696ff !important;
  background: rgba(54, 150, 255, .08) !important;
}


/* =========================================================
   v11.2 CACHE-SAFE COMMANDER COLOR FIX
   ========================================================= */

/* 指揮官カード：ラベルをオレンジで固定 */
body .card.commander-card .recruitment-type,
body article.card.commander-card .recruitment-type,
body .commander-card .type-with-new .recruitment-type {
  color: #F2A124 !important;
  border-color: #F2A124 !important;
  background: rgba(242, 161, 36, .08) !important;
}

/* 指揮官カード：SLV数字はオレンジ */
body .card.commander-card .slv,
body article.card.commander-card .slv {
  color: #F2A124 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* 数字横の小さいSLV文字は元のグレー */
body .card.commander-card .slv small,
body article.card.commander-card .slv small,
body .card .slv small {
  color: #7b8085 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* 指揮官カード枠・左アクセント */
body .card.commander-card {
  border-color: #ff7a18 !important;
}

body .card.commander-card::before {
  background: #ff7a18 !important;
}

/* ユニオン側は青を維持 */
body .card.union-card .recruitment-type,
body article.card.union-card .recruitment-type {
  color: #18ABF4 !important;
  border-color: #18ABF4 !important;
  background: rgba(24, 171, 244, .08) !important;
}


/* =========================================================
   v11.3 COMMANDER SLV LABEL COLOR FIX
   指揮官ラベル = orange
   SLV数値       = orange
   small "SLV"   = cyan
   ========================================================= */

/* SLVの数字はオレンジ */
body .card.commander-card .slv,
body article.card.commander-card .slv {
  color: #F2A124 !important;
}

/* 数字横の小さい「SLV」だけ水色 */
body .card.commander-card .slv small,
body article.card.commander-card .slv small,
body .card .slv small {
  color: #7b8085 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* =========================================================
   v11.4 MOBILE HERO TITLE CENTER
   スマホ版のみメインロゴ2段を中央揃え
   ========================================================= */
@media screen and (max-width: 600px) {
  .hero h1 {
    text-align: center !important;
  }

  .hero h1 .hero-title-line1,
  .hero h1 .hero-title-line2 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}


/* =========================================================
   v11.5 MOBILE HERO TRUE CENTER
   文字列そのものを中央配置（100%幅spanではなくmax-content）
   ========================================================= */
@media screen and (max-width: 600px) {
  body .hero-left {
    width: 100% !important;
    max-width: none !important;
  }

  body .hero h1 {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body .hero h1 .hero-title-line1,
  body .hero h1 .hero-title-line2 {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* letter-spacingの末尾分で右に寄って見えるのを補正 */
  body .hero h1 .hero-title-line1 {
    padding-left: .16em !important;
  }
}


/* =========================================================
   v11.6 HERO TITLE COLOR
   UNION MATCH をボタンと同系統のグレーに変更
   ========================================================= */
body .hero h1 .hero-title-line2 {
  color: var(--charcoal) !important;
}


/* =========================================================
   v11.7 SLV LABEL COLOR
   数字横の小さい「SLV」を元のグレーに戻す
   ========================================================= */
body .card.commander-card .slv small,
body article.card.commander-card .slv small,
body .card .slv small {
  color: var(--muted) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}


/* =========================================================
   v11.8 FINAL SLV LABEL FIX
   小さい「SLV」は元のグレー #7b8085 に完全固定
   ========================================================= */
html body .card .slv > small,
html body .card.commander-card .slv > small,
html body article.card.commander-card .slv > small,
html body .slv small {
  color: #7b8085 !important;
  -webkit-text-fill-color: #7b8085 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}


/* =========================================================
   v11.9 SLV LABEL — app.js generated element
   ========================================================= */
html body .card.commander-card .slv .slv-label,
html body article.card.commander-card .slv .slv-label,
html body .slv .slv-label {
  color: #7b8085 !important;
  -webkit-text-fill-color: #7b8085 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
}


/* =========================================================
   v12 BOTTOM NAV FIX
   - PCでも横幅いっぱいを3等分
   - 青点灯はactiveの1個だけ
   - PC hoverでは青点灯させない
   ========================================================= */

body .bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
}

body .bottom-nav .nav-btn {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  color: #d0d2d4 !important;
  background: transparent !important;
}

/* 現在ページは白文字＋細い水色ラインのみ */
body .bottom-nav .nav-btn.active,
body .bottom-nav .nav-btn.active:hover {
  color:#fff !important;
  background:transparent !important;
  box-shadow:inset 0 -2px 0 #20b8f4 !important;
}

/* PCのマウスオーバーは薄く反応するだけ */
@media (hover: hover) and (pointer: fine) {
  body .bottom-nav .nav-btn:not(.active):hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
  }
}

/* スマホはhover残りを完全無効化 */
@media (hover: none), (pointer: coarse) {
  body .bottom-nav .nav-btn:not(.active):hover {
    color: #d0d2d4 !important;
    background: transparent !important;
  }
}

/* =========================================================
   v12.4 DEADLINE NEAR
   残り24時間以内：NEW風の赤バッジ + 大きめ赤カウント
   ========================================================= */
.deadline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 4px 7px;

  border: 1px solid #e13b4f;

  color: #d9273f;
  background: rgba(225, 59, 79, .10);

  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;

  white-space: nowrap;
}

.countdown.deadline-near {
  color: #d9273f !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

@media (max-width: 600px) {
  .deadline-badge {
    padding: 4px 6px;
    font-size: 10px;
  }

  .countdown.deadline-near {
    font-size: 15px !important;
  }
}

/* =========================================================
   v12.7 NEW FIRE VISIBILITY
   炎アイコンを独立表示して見やすくする
   ========================================================= */
.new-badge {
  gap: 4px;
  padding: 3px 7px;
  font-size: 0 !important;
  line-height: 1;
}

.new-badge::before {
  content: "🔥";
  display: inline-block;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.new-badge::after {
  content: "NEW";
  display: inline-block;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
}

@media (max-width: 600px) {
  .new-badge::before {
    font-size: 14px;
  }

  .new-badge::after {
    font-size: 10px;
  }
}

/* =========================================================
   v13.3 登録前プレビュー + 任意募集画像
   既存デザインは変更せず追加のみ
   ========================================================= */

.preview-image-field {
  margin-top: 14px;
}

.optional-label {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid rgba(123, 128, 133, .34);
  color: #7b8085;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  vertical-align: middle;
}

.preview-file-help {
  display: block;
  margin-top: 8px;
  color: #7b8085;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
}

.registration-preview-modal-card {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.registration-preview-note {
  margin: 10px 0 18px;
  color: #7b8085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

#registrationPreviewCard .card {
  width: 100%;
  margin: 0;
}

.registration-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

/* 登録確認：「修正する」を完全な四角にして切り欠きの隙間をなくす */
#registrationPreviewBack {
  clip-path: none !important;
  border: 1px solid #686b70 !important;
  background: #ffffff !important;
  color: #222428 !important;
  box-shadow: none !important;
}

/* PASS編集：「編集をやめる」を他の境界線ボタンと同じ四角形に統一 */
#cancelManageEditBtn {
  clip-path: none !important;
  border: 1px solid #686b70 !important;
  background: #ffffff !important;
  color: #222428 !important;
  box-shadow: none !important;
}

.registration-preview-platform {
  margin-bottom: 9px;
  color: #7b8085;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.recruitment-preview-link {
  display: block;
  text-decoration: none;
}

.recruitment-preview-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid rgba(21, 174, 235, .24);
  background: #0d1014;
}

.recruitment-preview-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 18px;
  border: 1px dashed rgba(123, 128, 133, .36);
  color: #7b8085;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 600px) {
  .registration-preview-actions {
    grid-template-columns: 1fr;
  }

  .registration-preview-modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* =========================================================
   v13.8 BlablaLink preview side-gap fix
   ========================================================= */

.recruitment-preview-link {
  display: block;
  width: 100%;
  overflow: hidden;
}

.recruitment-preview-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: initial !important;

  background: transparent !important;
}


/* Index header height is shared by the hero, scroll viewport and drawer. */
:root { --index-header-height: 64px; }
@media screen and (max-width: 600px) {
  :root { --index-header-height: 58px; }
}

/* =========================================================
   v15 VIDEO TOP / HEADER / MOBILE+TABLET NAV
   2026-09-09
   ========================================================= */

/* Header: uploaded UNION MATCH logo is the hidden TOP switch */
body .video-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  height: var(--index-header-height) !important;
  padding: 0 14px !important;
  border-bottom: 0 !important;
  background: rgba(9, 10, 13, .92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body .video-logo-switch {
  width: auto !important;
  max-width: none !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

body .video-logo-switch img {
  display: block !important;
  width: clamp(154px, 18vw, 238px) !important;
  max-width: 46vw !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: left center !important;
  pointer-events: none;
}

body .video-logo-switch:hover,
body .video-logo-switch:focus,
body .video-logo-switch:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body .site-menu-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

body .site-menu-button span {
  display: block;
  width: 25px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
  transition: transform .22s ease, opacity .22s ease;
}

body.menu-open .site-menu-button span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .site-menu-button span:nth-child(2) {
  opacity: 0;
}

body.menu-open .site-menu-button span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body .site-menu-backdrop {
  position: fixed;
  inset: var(--index-header-height) 0 0;
  z-index: 108;
  background: rgba(0, 0, 0, .48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body .site-menu-drawer {
  position: fixed;
  top: var(--index-header-height);
  right: 0;
  z-index: 110;
  width: min(86vw, 340px);
  height: calc(100dvh - var(--index-header-height));
  padding: 12px;
  transform: translateX(105%);
  overflow-y: auto;
  background: rgba(17, 19, 24, .98);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .32);
  transition: transform .24s ease;
}

body.menu-open .site-menu-drawer {
  transform: translateX(0);
}

body .site-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 6px 10px;
  color: rgba(255,255,255,.7);
  font: 800 12px "Teko", sans-serif;
  letter-spacing: .24em;
}

body .site-menu-head button {
  width: 38px;
  height: 38px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

body .site-menu-drawer > button,
body .site-menu-drawer > a {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body .site-menu-drawer > button:hover,
body .site-menu-drawer > a:hover {
  background: rgba(255,255,255,.06);
}

/* Video hero */
body .video-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  background: #000;
  scroll-margin-top: var(--index-header-height);
  isolation: isolate;
}

body .hero-background-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
}

body .video-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.02) 42%,
      rgba(0,0,0,.38) 100%
    );
  pointer-events: none;
}

body .video-hero-stats {
  position: absolute;
  left: 50%;
  bottom: clamp(62px, 9vw, 108px);
  z-index: 3;
  transform: translateX(-50%);
  width: min(92%, 860px);
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 22px rgba(0,0,0,.52);
}

body .video-current-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(46px, 11vw, 150px);
}

/* X LISTED はabsoluteで中央に重ねるため、
   COMMANDERS / UNIONS の既存位置・サイズを一切動かさない。 */
body .video-x-listed-stat {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translate(-50%, -7px);
  min-width: 92px;
  text-align: center;
  pointer-events: none;
}

body .video-x-listed-stat.hidden {
  display: none !important;
}

body .video-x-listed-stat strong {
  display: block;
  color: #fff !important;
  font-family: "Teko", "Arial Narrow", sans-serif;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.02em;
  text-shadow: 0 3px 18px rgba(0,0,0,.62);
}

body .video-x-listed-stat span {
  display: block;
  margin-top: 6px;
  color: #fff !important;
  font-family: "Teko", "Arial Narrow", sans-serif;
  font-size: clamp(9px, 1.15vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-shadow: 0 3px 18px rgba(0,0,0,.62);
  white-space: nowrap;
}

body .video-current-stat {
  min-width: 110px;
}

body .video-current-stat strong {
  display: block;
  color: #fff !important;
  font-family: "Teko", "Arial Narrow", sans-serif;
  font-size: clamp(50px, 7vw, 92px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.025em;
}

body .video-current-stat span {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.96);
  font-family: "Teko", "Arial Narrow", sans-serif;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .19em;
}

body .video-history-row {
  margin-top: clamp(22px, 3vw, 36px);
  color: rgba(255,255,255,.68);
  font-family: "Teko", "Arial Narrow", sans-serif;
  font-size: clamp(11px, 1.25vw, 14px);
  font-weight: 600;
  letter-spacing: .13em;
  white-space: nowrap;
}

body .video-history-row strong {
  color: rgba(255,255,255,.82) !important;
  font: inherit;
}

body .video-history-slash {
  display: inline-block;
  margin: 0 12px;
  color: rgba(255,255,255,.42);
}

body .video-scroll-button {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  transform: translateX(-50%);
  min-width: 74px;
  padding: 4px 10px 2px;
  border: 0;
  color: rgba(255,255,255,.66);
  background: transparent;
  cursor: pointer;
  text-align: center;
}

body .video-scroll-button span {
  display: block;
  font-family: "Teko", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
}

body .video-scroll-button b {
  display: block;
  margin-top: -1px;
  font-size: 20px;
  font-weight: 400;
  animation: videoScrollFloat 1.8s ease-in-out infinite;
}

@keyframes videoScrollFloat {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* In list mode the old hero copy/buttons disappear.
   Register/manage forms themselves remain untouched and use existing logic. */
body:not(.register-mode):not(.manage-mode) main.container > .hero {
  display: none !important;
}

body.register-mode .video-hero,
body.manage-mode .video-hero {
  display: none !important;
}

body.register-mode main.container > .hero,
body.manage-mode main.container > .hero {
  display: grid !important;
  margin-top: 18px !important;
}

/* Current hero copy/action buttons are no longer used */
body main.container > .hero .hero-left > h1,
body main.container > .hero .hero-left > p,
body main.container > .hero .hero-actions {
  display: none !important;
}

/* White content sheet */
body #listPage {
  position: relative;
  z-index: 8;
  background: #fff;
}

/* Bottom nav: smartphone/tablet only.
   Hidden on video; fades in when list area enters the viewport. */
body .bottom-nav {
  opacity: 0 !important;
  transform: translateY(calc(100% + 18px)) !important;
  pointer-events: none !important;
  transition:
    opacity .24s ease,
    transform .24s ease !important;
}

body .bottom-nav.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

body .bottom-nav .nav-link-btn {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none !important;
}

@media screen and (max-width: 1024px) {
  body .video-hero {
    aspect-ratio: 1 / 1;
  }

  body .video-current-stat strong {
    font-size: clamp(42px, 8.8vw, 68px);
  }

  body .video-current-stat span {
    font-size: clamp(10px, 2vw, 14px);
  }

  body .video-history-row {
    font-size: clamp(9px, 1.7vw, 12px);
  }

  body .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body #listPage {
    margin-top: -24px !important;
    padding: 28px 16px 96px !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -15px 42px rgba(0,0,0,.16);
  }

  body.register-mode main.container,
  body.manage-mode main.container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.register-mode #listPage,
  body.manage-mode #listPage {
    display: none !important;
  }

  body .bottom-nav {
    display: flex !important;
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(68px + env(safe-area-inset-bottom)) !important;
  }

  body .bottom-nav .nav-btn {
    min-width: 0;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

@media screen and (max-width: 600px) {
  body .video-logo-switch img {
    width: clamp(148px, 43vw, 196px) !important;
  }

  body .video-hero-stats {
    bottom: 48px;
  }

  body .video-current-row {
    gap: clamp(34px, 12vw, 60px);
  }

  body .video-current-stat {
    min-width: 102px;
  }

  body .video-history-row {
    margin-top: 19px;
  }

  body #listPage {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  body .video-logo-switch img {
    width: clamp(178px, 26vw, 236px) !important;
  }

  body .video-hero-stats {
    bottom: 72px;
  }

  /* keep the existing tablet card grid; only the top is replaced */
  body #listPage {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (min-width: 1025px) {
  body .video-hero {
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - var(--index-header-height));
    min-height: 560px;
  }

  body #listPage {
    margin-top: 0 !important;
    padding: 36px 26px 42px !important;
    border-radius: 34px 34px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.16);
  }

  body .bottom-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .video-scroll-button b {
    animation: none;
  }

  body .site-menu-drawer,
  body .bottom-nav {
    transition: none !important;
  }
}


/* =========================================================
   v18 MOBILE HOTFIX
   ========================================================= */

/* MATCHED / TOTAL UNIONS: labels stay small, numbers only larger */
@media screen and (max-width: 1024px) {
  html body .video-history-row {
    font-size: clamp(12px, 3vw, 15px) !important;
  }

  html body .video-history-row strong {
    display: inline-block !important;
    font-size: 1.55em !important;
    font-weight: 800 !important;
    line-height: .8 !important;
    vertical-align: -0.04em !important;
    letter-spacing: .04em !important;
    margin-left: 3px !important;
    margin-right: 2px !important;
  }
}

/* Mobile/tablet footer: force all 3 buttons to exist side-by-side */
@media screen and (max-width: 1024px) {
  html body #bottomNav.bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }

  html body #bottomNav.bottom-nav > .nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 7px 2px 10px !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body #bottomNav.bottom-nav > .nav-btn span {
    display: block !important;
    margin: 0 0 4px !important;
  }
}


/* =========================================================
   v19 MOBILE TOP ONLY FIX
   2026-09-09
   - smartphone logo smaller
   - main COMMANDERS / UNIONS larger
   - MATCHED / TOTAL UNIONS numbers only larger
   - hamburger drawer glass/translucent
   - video fills first viewport; white list stays below fold
   - bottom navigation forced to three equal buttons
   ========================================================= */

@media screen and (max-width: 600px) {
  /* Left logo: about two steps smaller than the previous mobile size */
  html body .video-logo-switch img {
    width: clamp(90px, 27vw, 116px) !important;
    max-width: 29vw !important;
    max-height: 40px !important;
  }

  /* Hero occupies the viewport below the var(--index-header-height) sticky header.
     The white recruitment sheet starts only after scrolling. */
  html body .video-hero {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: calc(100svh - var(--index-header-height)) !important;
    min-height: calc(100svh - var(--index-header-height)) !important;
    max-height: none !important;
  }

  html body .hero-background-video {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Put the stats lower in the frame, while leaving room for SCROLL */
  html body .video-hero-stats {
    bottom: 92px !important;
    width: min(94%, 420px) !important;
  }

  html body .video-current-row {
    gap: clamp(46px, 15vw, 82px) !important;
  }

  html body .video-current-stat {
    min-width: 118px !important;
  }

  html body .video-current-stat strong {
    font-size: clamp(76px, 19vw, 94px) !important;
    line-height: .80 !important;
  }

  html body .video-current-stat span {
    margin-top: 12px !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1 !important;
    letter-spacing: .17em !important;
  }

  html body .video-history-row {
    margin-top: 24px !important;
    font-size: clamp(12px, 3.1vw, 14px) !important;
    line-height: 1.15 !important;
  }

  /* Only the 12 / 16 etc. are enlarged */
  html body .video-history-row strong {
    display: inline-block !important;
    font-size: 1.72em !important;
    font-weight: 800 !important;
    line-height: .74 !important;
    vertical-align: -0.08em !important;
    letter-spacing: .02em !important;
    margin: 0 2px 0 3px !important;
  }

  html body .video-history-slash {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* SCROLL gets its own safe zone and no longer overlaps stats */
  html body .video-scroll-button {
    bottom: 22px !important;
    min-width: 84px !important;
    padding: 3px 10px 0 !important;
  }

  html body .video-scroll-button span {
    font-size: 10px !important;
    letter-spacing: .28em !important;
  }

  html body .video-scroll-button b {
    margin-top: 0 !important;
    font-size: 18px !important;
  }

  /* No negative overlap into the first screen */
  html body #listPage {
    margin-top: 0 !important;
  }
}

/* Hamburger drawer: lighter transparent black / glass */
@media screen and (max-width: 1024px) {
  html body .site-menu-backdrop {
    background: rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  html body .site-menu-drawer {
    background: rgba(13, 16, 22, .62) !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: -12px 0 34px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(14px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  }

  html body .site-menu-drawer > button,
  html body .site-menu-drawer > a {
    border-bottom-color: rgba(255,255,255,.12) !important;
  }

  /* Bottom nav: exactly three equal buttons, never a single stretched item */
  html body #bottomNav.bottom-nav {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-flow: initial !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }

  html body #bottomNav.bottom-nav > .nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    flex: 1 1 33.333333% !important;
    width: 33.333333% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 7px 2px 10px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body #bottomNav.bottom-nav > .nav-btn span {
    display: block !important;
    margin: 0 0 4px !important;
  }
}


/* =========================================================
   v20 VIDEO STICKY UNDERLAY
   2026-09-09
   - Keep the current video / counts in place while scrolling
   - Let the white recruitment sheet rise over the video
   - Registration / manage modes remain unchanged
   ========================================================= */

body:not(.register-mode):not(.manage-mode) .video-hero {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: var(--index-header-height) !important;
  z-index: 1 !important;
}

/* The normal page content becomes the foreground layer.
   Existing spacing, card sizes, colors and functions are untouched. */
body:not(.register-mode):not(.manage-mode) main.container {
  position: relative;
  z-index: 8;
}

body:not(.register-mode):not(.manage-mode) #listPage {
  position: relative !important;
  z-index: 10 !important;
}

/* Keep the header and hamburger menu above both layers. */
body .video-topbar {
  z-index: 120 !important;
}


/* =========================================================
   v27 SMARTPHONE CHROME SCROLL STABILITY
   2026-09-10
   - smartphone only (<=600px)
   - tablet / PC are untouched
   - keep video as an underlay while cards scroll over it
   - avoid mobile Chrome sticky + viewport runaway scrolling
   - no JS / Supabase / card logic changes
   ========================================================= */

@media screen and (max-width: 600px) {

  /* In list/TOP mode only:
     use a fixed video underlay instead of sticky on smartphones. */
  html body:not(.register-mode):not(.manage-mode) .video-hero {
    position: fixed !important;
    top: var(--index-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: calc(100svh - var(--index-header-height)) !important;
    min-height: calc(100svh - var(--index-header-height)) !important;
    max-height: calc(100svh - var(--index-header-height)) !important;

    z-index: 1 !important;
  }

  /* The fixed hero is removed from normal flow,
     so reserve exactly one smartphone hero-height before the list.
     This makes the document end at the real end of the cards. */
  html body:not(.register-mode):not(.manage-mode) main.container {
    margin-top: calc(100svh - var(--index-header-height)) !important;
    min-height: 0 !important;
  }

  html body:not(.register-mode):not(.manage-mode) #listPage {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }
}


/* =========================================================
   v29 MOBILE INDEPENDENT SCROLL SHELL
   2026-09-10
   - smartphone Chrome: finite independent scroll area
   - white recruitment sheet moves over the video inside that area
   - footer fades in only after the white sheet begins to appear
   - TOP footer hidden / register-manage footer visible
   - tablet 601-1024 unchanged
   - PC gray bottom gap removed
   ========================================================= */

.mobile-scroll-shell {
  display: contents;
}

@media screen and (max-width: 600px) {

  /* Smartphone root page itself never becomes the long scroller. */
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden !important;
  }

  html body {
    padding-bottom: 0 !important;
  }

  /* This is the only vertical scroller on smartphone. */
  html body .mobile-scroll-shell {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: calc(100dvh - var(--index-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--index-header-height)) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
    Cancel v27 fixed mode.
    Sticky now belongs to the finite shell instead of Chrome's root viewport.
  */
  html body:not(.register-mode):not(.manage-mode) .video-hero {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: calc(100dvh - var(--index-header-height)) !important;
    min-height: calc(100dvh - var(--index-header-height)) !important;
    max-height: calc(100dvh - var(--index-header-height)) !important;

    z-index: 1 !important;
  }

  /* Remove v27's artificial flow spacer. */
  html body:not(.register-mode):not(.manage-mode) main.container {
    position: relative !important;
    z-index: 8 !important;

    margin-top: 0 !important;
    min-height: 0 !important;
  }

  html body:not(.register-mode):not(.manage-mode) #listPage {
    position: relative !important;
    z-index: 10 !important;

    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  /*
    Footer does not slide anymore on smartphone.
    Only opacity changes, so Chrome cannot repeatedly animate its position.
  */
  html body #bottomNav.bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: none !important;
    translate: none !important;

    transition: opacity .18s ease !important;
    animation: none !important;
  }

  html body #bottomNav.bottom-nav.is-visible,
  html body.register-mode #bottomNav.bottom-nav,
  html body.manage-mode #bottomNav.bottom-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
    translate: none !important;
  }

  /* Forms need room above the fixed footer. */
  html body.register-mode .mobile-scroll-shell,
  html body.manage-mode .mobile-scroll-shell {
    padding-bottom:
      calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* PC only: hidden mobile footer must not leave a gray strip/card. */
@media screen and (min-width: 1025px) {
  html body:not(.register-mode):not(.manage-mode) {
    padding-bottom: 0 !important;
  }
}


/* =========================================================
   v30 FOOTER EARLY FADE + PC VIDEO POSITION
   2026-09-10
   - smartphone footer: presentation remains opacity-only
   - PC video: shift visible video content slightly downward
     so the upper/head area is less cropped
   - tablet unchanged
   ========================================================= */

/* PC only: move the video picture downward inside the existing hero frame.
   Smaller Y percentage = rendered video content sits lower when cover-cropped. */
@media screen and (min-width: 1025px) {
  html body .hero-background-video {
    object-position: center 42% !important;
  }
}


/* =========================================================
   v32 SMARTPHONE VIDEO HARD LOCK
   2026-09-10
   - smartphone INDEX only
   - video is completely fixed under the var(--index-header-height) header
   - dragging/overscroll cannot pull the video downward
   - the white recruitment sheet remains the only moving layer
   - white sheet starts 28px later than the video viewport
   - footer early-fade timing from v30 is unchanged
   - tablet / PC / register / manage unchanged
   ========================================================= */

@media screen and (max-width: 600px) {

  /*
    Keep the app shell itself fixed below the header.
    Only the contents inside this shell scroll.
  */
  html body .mobile-scroll-shell {
    position: fixed !important;
    top: var(--index-header-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch;
  }

  /*
    Hard-lock the TOP video to the viewport.
    It is no longer sticky and is not part of the scrolling flow.
  */
  html body:not(.register-mode):not(.manage-mode) .video-hero {
    position: fixed !important;

    top: var(--index-header-height) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: calc(100dvh - var(--index-header-height)) !important;
    min-height: calc(100dvh - var(--index-header-height)) !important;
    max-height: calc(100dvh - var(--index-header-height)) !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 1 !important;
  }

  /*
    Because the video is fixed, reserve one full video viewport in the
    scroll flow, plus 28px so the white sheet arrives slightly later.
  */
  html body:not(.register-mode):not(.manage-mode) main.container {
    position: relative !important;
    z-index: 8 !important;

    margin-top: calc(100dvh - var(--index-header-height) + 28px) !important;
    min-height: 0 !important;
  }

  html body:not(.register-mode):not(.manage-mode) #listPage {
    position: relative !important;
    z-index: 10 !important;

    margin-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}


/* =========================================================
   v37 SMARTPHONE FOOTER STABLE OPAQUE + X BROWSER BOTTOM MASK
   2026-09-10
   - exact v32 layout/scroll shell retained
   - footer background never opacity-fades
   - only button contents fade
   - footer extends 24px below viewport without moving its top edge
   - tablet / PC / register / manage unchanged
   ========================================================= */

@media screen and (max-width: 600px) {

  html body:not(.register-mode):not(.manage-mode)
  #bottomNav.bottom-nav {
    bottom: -24px !important;
    height: calc(68px + env(safe-area-inset-bottom) + 24px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;

    z-index: 220 !important;

    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;

    background: linear-gradient(180deg, #2d2e31, #1d1e21) !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0) !important;
  }

  html body:not(.register-mode):not(.manage-mode)
  #bottomNav.bottom-nav.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body:not(.register-mode):not(.manage-mode)
  #bottomNav.bottom-nav > .nav-btn {
    opacity: 0 !important;
    transition: opacity .18s ease !important;
  }

  html body:not(.register-mode):not(.manage-mode)
  #bottomNav.bottom-nav.is-visible > .nav-btn {
    opacity: 1 !important;
  }
}


/* =========================================================
   v39 PC HEADER + VIDEO HARD LOCK
   2026-09-10
   - PC INDEX only
   - header is fixed and fully opaque
   - video is fixed directly below the var(--index-header-height) header
   - only the white recruitment content scrolls over the video
   - smartphone / tablet / register / manage untouched
   ========================================================= */

@media screen and (min-width: 1025px) {

  html:not(.tablet-device) body:not(.register-mode):not(.manage-mode) {
    --pc-video-height: calc(100dvh - var(--index-header-height));
  }

  /* Header: no sticky repaint / no card shadow showing through. */
  html:not(.tablet-device) body:not(.register-mode):not(.manage-mode) .video-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: var(--index-header-height) !important;

    z-index: 120 !important;

    background: #090a0d !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* Video: hard lock below the header. */
  html:not(.tablet-device) body:not(.register-mode):not(.manage-mode) .video-hero {
    position: fixed !important;
    top: var(--index-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: var(--pc-video-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 !important;

    z-index: 1 !important;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform;
  }

  /* Reserve exactly the space removed by the fixed header + video. */
  html:not(.tablet-device) body:not(.register-mode):not(.manage-mode) main.container {
    position: relative !important;
    z-index: 8 !important;

    margin-top:
      calc(
        var(--index-header-height)
        + var(--pc-video-height)
      ) !important;
  }

  /* White recruitment sheet stays in normal flow and is the moving layer. */
  html:not(.tablet-device) body:not(.register-mode):not(.manage-mode) #listPage {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important;
  }
}


/* =========================================================
   v40 TABLET ONLY: VIDEO HARD LOCK + FOOTER STABILITY
   2026-09-10
   - physical iPad / Android tablet only
   - portrait and landscape keep tablet behavior
   - TOP: white recruitment sheet and its shadow stay off-screen
   - video is fixed below the existing var(--index-header-height) tablet top bar
   - footer uses the same internal scroll shell from every menu route
   - smartphone / PC / Supabase / card rendering untouched
   ========================================================= */

html.tablet-device,
html.tablet-device body {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.tablet-device body {
  padding-bottom: 0 !important;
}

/* Keep the tablet top bar itself in its existing sticky form. */
html.tablet-device body .video-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  height: var(--index-header-height) !important;
  background: rgba(9, 10, 13, .92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* The shell becomes the tablet's only vertical scroller. */
html.tablet-device body .mobile-scroll-shell {
  display: block !important;
  position: fixed !important;
  top: var(--index-header-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Tablet TOP video: hard-locked to the viewport below the top bar. */
html.tablet-device body:not(.register-mode):not(.manage-mode) .video-hero {
  position: fixed !important;
  top: var(--index-header-height) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;

  width: 100% !important;
  height: calc(100dvh - var(--index-header-height)) !important;
  min-height: calc(100dvh - var(--index-header-height)) !important;
  max-height: calc(100dvh - var(--index-header-height)) !important;
  aspect-ratio: auto !important;

  margin: 0 !important;
  transform: none !important;

  z-index: 1 !important;
}

/* Do not inherit the PC crop position when a wide iPad is landscape. */
html.tablet-device body .hero-background-video {
  object-position: center center !important;
}

/* Reserve a full tablet viewport plus 28px so TOP shows no white sheet/shadow. */
html.tablet-device body:not(.register-mode):not(.manage-mode) main.container {
  position: relative !important;
  z-index: 8 !important;
  margin-top: calc(100dvh - var(--index-header-height) + 28px) !important;
  min-height: 0 !important;
}

html.tablet-device body:not(.register-mode):not(.manage-mode) #listPage {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Wide iPad landscape may exceed 1024px; keep the tablet footer available. */
html.tablet-device body #bottomNav.bottom-nav {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 220 !important;

  width: 100% !important;
  height: calc(68px + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  translate: none !important;
}

html.tablet-device body #bottomNav.bottom-nav.is-visible,
html.tablet-device body.register-mode #bottomNav.bottom-nav,
html.tablet-device body.manage-mode #bottomNav.bottom-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.tablet-device body #bottomNav.bottom-nav > .nav-btn {
  display: flex !important;
  flex: 1 1 33.333333% !important;
  width: 33.333333% !important;
  min-width: 0 !important;
  max-width: none !important;
}

html.tablet-device body.register-mode .mobile-scroll-shell,
html.tablet-device body.manage-mode .mobile-scroll-shell {
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

/* =========================================================
   v42 TABLET REGISTER / MANAGE FRAME LOCK
   2026-09-30
   - tablet register/manage pages only
   - top bar and bottom navigation are hard-fixed
   - only the center content shell scrolls
   - INDEX / smartphone / PC / app logic untouched
   - physical tablet class + 601-1024px tablet viewport fallback
   ========================================================= */

/* Physical tablet: hard-lock the top bar to the viewport. */
html.tablet-device body.register-mode .video-topbar,
html.tablet-device body.manage-mode .video-topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--index-header-height) !important;
  z-index: 240 !important;
  transform: none !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

/* Physical tablet: only the center area scrolls. */
html.tablet-device body.register-mode .mobile-scroll-shell,
html.tablet-device body.manage-mode .mobile-scroll-shell {
  position: fixed !important;
  top: var(--index-header-height) !important;
  right: 0 !important;
  bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Physical tablet: hard-lock the footer. */
html.tablet-device body.register-mode #bottomNav.bottom-nav,
html.tablet-device body.manage-mode #bottomNav.bottom-nav {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(68px + env(safe-area-inset-bottom)) !important;
  z-index: 240 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  translate: none !important;
  transition: none !important;
  animation: none !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

/* Fallback for tablet viewport when browser UA does not receive tablet-device. */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  html body.register-mode .video-topbar,
  html body.manage-mode .video-topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--index-header-height) !important;
    z-index: 240 !important;
    transform: none !important;
    will-change: auto !important;
  }

  html body.register-mode .mobile-scroll-shell,
  html body.manage-mode .mobile-scroll-shell {
    position: fixed !important;
    top: var(--index-header-height) !important;
    right: 0 !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.register-mode #bottomNav.bottom-nav,
  html body.manage-mode #bottomNav.bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    z-index: 240 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   v47 REGISTER MODE CLEANUP / UNION REGISTER-ONLY
   2026-09-11
   - register page visual cleanup only
   - union usage switch: recruit / register-only
   - descriptions below fields
   - register-page bottom nav top line removed
   ========================================================= */

body.register-mode .register-inline-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.register-mode .register-inline-title {
  min-width: 0;
}

body.register-mode .register-inline-title .eyebrow {
  margin-bottom: 2px;
  color: var(--cyan) !important;
}

body.register-mode .register-inline-title h2 {
  margin: 0;
}

#registerPage .form-label-help {
  display: none !important;
}

#registerPage .register-field-help {
  display: block;
  margin-top: 7px;
  color: #727980;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

#registerPage .register-usage-block {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(26, 176, 241, .24);
  background: rgba(26, 176, 241, .035);
}

#registerPage .register-usage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#registerPage .register-usage-title {
  flex: 0 0 auto;
  margin: 0;
  color: #222428;
  font-size: 13px;
  font-weight: 900;
}

#registerPage .register-usage-bot-note {
  min-width: 0;
  color: #6e7379;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

#registerPage .register-usage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#registerPage .register-usage-option {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #c8ccd0;
  background: #fff;
  color: #33373b;
  cursor: pointer;
}

#registerPage .register-usage-option strong,
#registerPage .register-usage-option small {
  display: block;
}

#registerPage .register-usage-option strong {
  font-size: 13px;
  font-weight: 900;
}

#registerPage .register-usage-option small {
  margin-top: 3px;
  color: #7b8187;
  font-size: 10px;
  font-weight: 800;
}

#registerPage .register-usage-option.active {
  border-color: var(--cyan);
  background: rgba(26, 176, 241, .10);
  color: #078fc7;
  box-shadow: inset 0 0 0 1px rgba(26, 176, 241, .10);
}

#registerPage .register-usage-option.active small {
  color: #337c9c;
}

#registerPage .register-usage-note {
  margin: 9px 0 0;
  color: #555c63;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.55;
}

#registerPage #recruitmentInputFields.hidden {
  display: none !important;
}

#registerPage .register-period-note {
  display: block !important;
}

#registerPage .register-period-note > span {
  display: block;
  margin-top: 4px;
  color: #6e7379 !important;
  font-size: 10.5px;
  font-weight: 700 !important;
  line-height: 1.55;
}

.registration-result-mode-note {
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(26, 176, 241, .28);
  background: rgba(26, 176, 241, .06);
  color: #147ca8;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.6;
}

/* Register page: remove only the HERO separator line.
   Bottom navigation border is intentionally preserved. */
body.register-mode .hero {
  border-bottom-color: transparent !important;
}

@media screen and (max-width: 600px) {
  #registerPage .register-usage-block {
    padding: 12px;
  }

  #registerPage .register-usage-head {
    gap: 8px;
  }

  #registerPage .register-usage-bot-note {
    font-size: 9.5px;
  }

  #registerPage .register-usage-options {
    gap: 6px;
  }
}


/* =========================================================
   v51.9 SITE MENU LAYER UNIFY
   - 三本線メニューを下部固定ナビより前面に統一
   - 表示順だけを変更。レイアウト / 機能 / データ処理は変更しない
   ========================================================= */
.site-menu-backdrop {
  z-index: 1190 !important;
}

.site-menu-drawer {
  z-index: 1200 !important;
}


/* =========================================================
   v51.10 X LISTED TOP white + responsive
   ========================================================= */
@media screen and (max-width: 600px) {
  html body .video-x-listed-stat {
    transform: translate(-50%, -5px);
    min-width: 78px;
  }

  html body .video-x-listed-stat strong {
    font-size: clamp(40px, 11vw, 52px) !important;
  }

  html body .video-x-listed-stat span {
    margin-top: 7px !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    letter-spacing: .13em !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  html body .video-x-listed-stat {
    transform: translate(-50%, -6px);
  }

  html body .video-x-listed-stat strong {
    font-size: clamp(42px, 6vw, 56px) !important;
  }
}

/* =========================================================
   UNION MATCH manage note
   Button colors are controlled in app.js to avoid CSS conflicts.
   ========================================================= */

#closeLoadedRecruitmentNote {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
  text-align: left;
}

#closeLoadedRecruitmentNote strong {
  color: var(--ink);
  font-weight: 900;
}



/* Live recruitment listing cards: white editorial edition. */
.cards article.card.commander-card,
.cards article.card.union-card {
  clip-path:none !important;
  border:1px solid #e5e5e5 !important;
  background:#fff !important;
  box-shadow:none !important;
  padding:24px !important;
  font-family:"Noto Sans JP",sans-serif;
}
.cards article.card.commander-card::before,
.cards article.card.union-card::before,
.cards article.card.commander-card::after,
.cards article.card.union-card::after {display:none !important;}
.cards article.card .card-head-minimal {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.cards article.card .card-head-minimal .countdown {margin:0 !important;padding:0 !important;background:none !important;border:0 !important;color:#777 !important;font-size:11px;font-weight:500;}
.cards article.card .card-head-minimal .type-with-new {display:flex;justify-content:flex-end;align-items:center;gap:6px;}
.cards article.card .card-head-minimal .recruitment-type {border:0 !important;background:none !important;padding:0 !important;color:#6e6e6e !important;font-size:11px;font-weight:600;}
.cards article.card .name {margin:26px 0 13px !important;font-family:"Noto Sans JP",sans-serif !important;font-size:clamp(21px,2vw,28px) !important;font-weight:700 !important;letter-spacing:-.02em;}
.cards article.card .union-rank {clip-path:none !important;padding:6px 16px !important;}
.cards article.card .slv {font-family:"Noto Sans JP",sans-serif !important;}
/* Commander listing only: keep SLV label size, align number row with union rank. */
#listPage .cards article.card.commander-card .slv {font-size:20px !important;line-height:20px !important;padding:6px 0 !important;}
.cards article.card .x-post-area {margin-top:20px !important;}
@media(max-width:600px){.cards article.card.commander-card,.cards article.card.union-card{padding:19px !important;}.cards article.card .card-head-minimal .countdown{font-size:10px;}.cards article.card .name{font-size:22px !important;}}


/* RECRUITMENTS list-area refinement: scoped to #listPage only. */
#listPage .section-head { margin-bottom:18px; align-items:center; }
#listPage .section-head .eyebrow { color:#85898c; font-size:11px; font-weight:600; letter-spacing:.13em; }
#listPage .section-head h2 { font-family:"Noto Sans JP",sans-serif; font-size:clamp(19px,2.05vw,26px); line-height:1.38; letter-spacing:-.025em; font-weight:700; }
#listPage .section-head-actions .text-btn { color:#777; font-size:12px; font-weight:600; }
#listPage .search-tabs { gap:8px; margin-bottom:13px; }
#listPage .search-tab { clip-path:none!important; min-height:44px; padding:9px 10px; border:1px solid #dedede!important; background:#f6f6f6!important; color:#444!important; font-size:12px; font-weight:600; box-shadow:none!important; transform:none!important; }
#listPage .search-tab:hover { border-color:#8acfe9!important; }
#listPage .search-tab.active,#listPage .commander-tab.active,#listPage .union-tab.active { border-color:#16aeeb!important; background:#eaf8ff!important; color:#078fc8!important; box-shadow:none!important; }
#listPage #commanderFilterBox,#listPage #unionFilterBox { width:100%; display:flex; align-items:center; gap:15px; margin:0 0 13px; padding:0; border:0!important; clip-path:none!important; background:transparent!important; box-shadow:none!important; }
#listPage #commanderFilterBox.hidden,#listPage #unionFilterBox.hidden { display:none!important; }
#listPage #commanderFilterBox label,#listPage #unionFilterBox label { display:flex; flex-direction:row; align-items:center; gap:12px; flex:0 1 360px; width:360px; max-width:calc(100% - 80px); height:40px; min-height:40px; box-sizing:border-box; padding:0 12px; margin:0; border:1px solid #cfd4d8; background:#fff; color:#83888d; white-space:nowrap; font:600 11px/1.4 "Noto Sans JP",sans-serif; }
#listPage #commanderFilterBox select,#listPage #unionFilterBox select { display:block; flex:1; min-width:0; width:100%; min-height:36px; height:36px; margin:0; padding:0 20px 0 0; border:0!important; background-color:transparent!important; box-shadow:none!important; color:#222; font:600 13px "Noto Sans JP",sans-serif; outline-offset:2px; }
#listPage .recruitment-filter-count { flex:none; color:#777; white-space:nowrap; font:500 12px "Noto Sans JP",sans-serif; }
#listPage .recruitment-filter-count-value { color:#079fd5; font-weight:700; }
#listPage #recruitmentList.cards article.card.commander-card,#listPage #recruitmentList.cards article.card.union-card { border:1px solid #e2e2e2!important; transition:border-color .25s ease!important; }
@media (hover:hover) and (pointer:fine) {
 #listPage #recruitmentList.cards article.card.commander-card:hover,#listPage #recruitmentList.cards article.card.union-card:hover { border-color:#20b8f4!important; }
}
@media (hover:none), (pointer:coarse) {
 #listPage #recruitmentList.cards article.card.commander-card.is-scroll-highlight,#listPage #recruitmentList.cards article.card.union-card.is-scroll-highlight { border-color:#20b8f4!important; }
}
@media(max-width:600px){
 #listPage .section-head h2{font-size:20px;}
 #listPage .search-tab{font-size:11px;min-height:42px;padding:8px 5px;}
 #listPage #commanderFilterBox label,#listPage #unionFilterBox label{flex:1 1 auto;width:auto;max-width:calc(100% - 80px);gap:8px;padding:0 10px;}
}

/* REGISTER / PASS MANAGE: white editorial UI shared by ordinary and BOT deep links.
   Deliberately visual-only: existing IDs, events and navigation are untouched. */
body.register-mode #registerPage,
body.manage-mode #managePage { font-family:"Noto Sans JP",sans-serif; color:#23272b; }
body.register-mode .register-inline-top,
body.manage-mode .manage-inline-top { display:flex!important; align-items:center!important; gap:14px!important; margin-bottom:22px!important; }
body.register-mode .register-inline-title .eyebrow,
body.manage-mode .manage-inline-title .eyebrow { color:#888d91!important; font-size:10px!important; letter-spacing:.12em!important; font-weight:600!important; }
body.register-mode .register-inline-title h2,
body.manage-mode .manage-inline-title h2 { margin:2px 0 0!important; color:#222428!important; font:700 clamp(22px,2.2vw,28px)/1.3 "Noto Sans JP",sans-serif!important; letter-spacing:-.03em!important; }
body.register-mode #registerPage .register-back-btn,
body.manage-mode #managePage .manage-back-btn { width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; clip-path:none!important; border:1px solid #d5d9dc!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; color:#24282c!important; font-size:23px!important; transition:border-color .2s,color .2s!important; }
@media(hover:hover) and (pointer:fine) {
 body.register-mode #registerPage .register-back-btn:hover,
 body.manage-mode #managePage .manage-back-btn:hover {border-color:#20b8f4!important;color:#079fd5!important;background:#fff!important;}
}
body.register-mode #registerPage #registerForm,
body.manage-mode #managePage #closeForm,
body.manage-mode #managePage .manage-loaded-panel { border:1px solid #e1e5e8!important; border-radius:0!important; clip-path:none!important; background:#fff!important; box-shadow:none!important; padding:clamp(16px,3vw,26px)!important; }
body.register-mode #registerForm label,
body.manage-mode #closeForm label { color:#5e646a!important; font-size:12px!important; font-weight:600!important; }
body.register-mode #registerForm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.register-mode #registerForm select,
body.register-mode #registerForm textarea,
body.manage-mode #closeForm input { border:1px solid #cdd3d8!important; background:#fff!important; color:#222428!important; border-radius:0!important; box-shadow:none!important; }
body.register-mode #registerForm input:focus-visible,
body.register-mode #registerForm select:focus-visible,
body.register-mode #registerForm textarea:focus-visible,
body.manage-mode #closeForm input:focus-visible { outline:1px solid #20b8f4!important; outline-offset:0!important; border-color:#20b8f4!important; }
body.register-mode #registerPage .register-period-note,
body.manage-mode #managePage .manage-pass-notice { border:0!important; border-left:3px solid #20b8f4!important; border-radius:0!important; clip-path:none!important; background:#f0f9fd!important; box-shadow:none!important; padding:14px 16px!important; color:#4e5962!important; }
body.register-mode #registerPage .register-period-note strong,
body.manage-mode #managePage .manage-pass-notice strong { color:#222428!important; }
@media(max-width:600px) {
 body.register-mode .register-inline-top,
 body.manage-mode .manage-inline-top { margin-bottom:16px!important; }
 body.register-mode #registerPage #registerForm,
 body.manage-mode #managePage #closeForm,
 body.manage-mode #managePage .manage-loaded-panel { padding:16px!important; }
 body.register-mode .register-inline-title h2,
 body.manage-mode .manage-inline-title h2 { font-size:22px!important; }
}


/* ================================================================
   REGISTER / MANAGE / BOT EDIT — CONSOLIDATED VISUAL RULES
   Scope: management content + 4 confirmation/result modals only.
   Keep workflow, visibility, preview scrolling and destructive actions.
   ================================================================ */
#managePage #manageLoadedPanel,
#managePage #manageEditPanel,
#managePage #manageEditActionChoices {
  color:#23272b; background:#fff!important; border:1px solid #e1e5e8!important;
  border-radius:0!important; clip-path:none!important; box-shadow:none!important;
  font-family:"Noto Sans JP",sans-serif;
}
#managePage #manageLoadedPanel,
#managePage #manageEditPanel,
#managePage #manageEditActionChoices {padding:clamp(16px,2.3vw,24px)!important;}
#managePage .manage-loaded-head {margin-bottom:15px!important;}
#managePage .manage-loaded-head h3,
#managePage #manageEditTitle {font:700 clamp(20px,2.2vw,26px)/1.35 "Noto Sans JP",sans-serif!important;letter-spacing:-.025em!important;color:#23272b!important;}
#managePage .manage-loaded-panel .eyebrow,
#managePage .manage-edit-panel .eyebrow,
#registrationPreviewModal .eyebrow,
#managePreviewModal .eyebrow,
#resultModal .eyebrow,
#manageResultModal .eyebrow {font:600 10px/1.4 "Noto Sans JP",sans-serif!important;letter-spacing:.12em!important;color:#85898c!important;}
#registrationPreviewModal h2,
#managePreviewModal h2,
#resultModal h2,
#manageResultModal h2 {font:700 clamp(20px,2.2vw,26px)/1.35 "Noto Sans JP",sans-serif!important;letter-spacing:-.025em!important;color:#23272b!important;}
/* Compact informational rows; no towering boxes on phones. */
#managePage .manage-current-grid {gap:10px!important;}
#managePage .manage-current-grid>div,
#managePage .manage-current-url,
#managePage .manage-fixed-name,
#managePage .manage-edit-choice-panel,
#managePage .manage-current-image-box {border:1px solid #e2e6e9!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding:13px 15px!important;}
#managePage .manage-current-grid span,
#managePage .manage-fixed-name span {color:#788089!important;font-size:11px!important;}
#managePage #manageEditPanel input:not([type=checkbox]):not([type=file]),
#managePage #manageEditPanel select,
#managePage #manageEditPanel textarea {border:1px solid #cdd3d8!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#24282c!important;min-height:42px!important;font-family:"Noto Sans JP",sans-serif!important;}
#managePage #manageEditPanel input:focus-visible,
#managePage #manageEditPanel select:focus-visible,
#managePage #manageEditPanel textarea:focus-visible {outline:1px solid #20b8f4!important;border-color:#20b8f4!important;}
#registrationPreviewModal .registration-preview-modal-card,
#managePreviewModal .registration-preview-modal-card,
#resultModal .modal-card,
#manageResultModal .modal-card {background:#fff!important;color:#24282c!important;border:1px solid #e1e5e8!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;font-family:"Noto Sans JP",sans-serif!important;}
#resultModal .pass-box,
#manageResultModal .pass-box,
#managePage .manage-renew-note,
#managePage .manage-result-new-note,
#managePage .manage-result-summary {background:#edf8fe!important;border:0!important;border-left:3px solid #20b8f4!important;border-radius:0!important;clip-path:none!important;box-shadow:none!important;color:#4e5962!important;padding:12px 14px!important;}
/* Register / PASS / BOT edit: unified clean primary and secondary buttons. */
body.register-mode #registerPage #registerPreviewBtn,
body.manage-mode #managePage #loadManageRecruitmentBtn,
#managePage #openManageActionBtn,
#managePage #closeLoadedRecruitmentBtn,
#managePage #openManageEditBtn,
#managePage #backManageActionBtn,
#managePage #manageEditPreviewBtn,
#managePage #cancelManageEditBtn,
#registrationPreviewModal .registration-preview-actions .btn,
#managePreviewModal .registration-preview-actions .btn,
#resultModal .copy-btn,
#manageResultModal .copy-btn,
#manageResultModal #manageResultDone {
  appearance:none!important;
  clip-path:none!important;
  border-radius:0!important;
  border:1px solid #18a9e0!important;
  background:#fff!important;
  background-image:none!important;
  color:#168dbc!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-family:"Noto Sans JP",sans-serif!important;
  font-weight:700!important;
  min-height:44px!important;
  transition:background-color .2s,color .2s,border-color .2s!important;
}
#managePage #cancelManageEditBtn,
#managePage #backManageActionBtn,
#registrationPreviewModal #registrationPreviewBack,
#managePreviewModal #managePreviewBack {
  border-color:#a8afb5!important;
  background:#fff!important;
  color:#333!important;
}
/* Deletion remains RED. Do not alter delete confirmation workflows. */
/* Destructive action only: refined ruby red, no filled gray or clipped corners. */
#managePage #deleteUnionMembershipBtn,
#managePage #deleteUnionMembershipBtn.manage-delete-btn,
#managePage #deleteUnionMembershipBtn:active,
#managePage #deleteUnionMembershipBtn:focus {
  background: #fff !important;
  background-image: none !important;
  color: #c43246 !important;
  border: 1px solid #c43246 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  #managePage #deleteUnionMembershipBtn:hover,
  #managePage #deleteUnionMembershipBtn.manage-delete-btn:hover {
    background: #c43246 !important;
    background-image: none !important;
    border-color: #c43246 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}
@media(hover:hover) and (pointer:fine){
  body.register-mode #registerPage #registerPreviewBtn:hover,
  body.manage-mode #managePage #loadManageRecruitmentBtn:hover,
  #managePage #openManageActionBtn:hover,
  #managePage #closeLoadedRecruitmentBtn:hover,
  #managePage #openManageEditBtn:hover,
  #managePage #manageEditPreviewBtn:hover,
  #registrationPreviewModal #registrationPreviewConfirm:hover,
  #managePreviewModal #managePreviewConfirm:hover,
  #resultModal .copy-btn:hover,
  #manageResultModal .copy-btn:hover,
  #manageResultModal #manageResultDone:hover {
    background:#18a9e0!important;
    border-color:#18a9e0!important;
    color:#fff!important;
    transform:none!important;
    box-shadow:none!important;
  }
  #managePage #cancelManageEditBtn:hover,
  #managePage #backManageActionBtn:hover,
  #registrationPreviewModal #registrationPreviewBack:hover,
  #managePreviewModal #managePreviewBack:hover {
    background:#fff!important;
    border-color:#18a9e0!important;
    color:#168dbc!important;
    transform:none!important;
    box-shadow:none!important;
  }
}
@media(max-width:600px){
  body.manage-mode #managePage .manage-inline-top {gap:10px!important;margin-bottom:14px!important;}
  body.manage-mode #managePage .manage-back-btn {width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;}
  body.manage-mode #managePage .manage-inline-title h2 {font-size:21px!important;}
  #managePage #manageLoadedPanel,
  #managePage #manageEditPanel,
  #managePage #manageEditActionChoices {padding:16px 14px!important;}
  #managePage .manage-current-grid>div,
  #managePage .manage-current-url,
  #managePage .manage-fixed-name {padding:11px 12px!important;}
  #managePage .manage-action-stack {gap:10px!important;}
  #managePage .manage-action-stack .btn {min-height:44px!important;}
  #registrationPreviewModal .registration-preview-modal-card,
  #managePreviewModal .registration-preview-modal-card,
  #resultModal .modal-card,
  #manageResultModal .modal-card {max-width:100%;box-sizing:border-box;}
}

/* 2026-10-09: Shared header/nav dimensions and single-line listing count. */
@media (min-width:601px) {
  html body .topbar, html body .video-topbar {height:64px !important;}
}
@media (max-width:600px) {
  html body .topbar, html body .video-topbar {height:58px !important;}
}
#listPage .recruitment-filter-count {white-space:nowrap !important;flex-shrink:0 !important;display:inline-flex;align-items:center;gap:3px;}
#listPage .recruitment-filter-count-value {white-space:nowrap !important;}

/* INDEX recruitment cards: X source, compact status tags, responsive hover. */
#listPage #recruitmentList.cards article.card { min-width:0; transition:border-color .22s ease, transform .22s ease !important; }
#listPage #recruitmentList.cards article.card .card-head-minimal,
#listPage #recruitmentList.cards article.card .x-collected-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:8px; min-width:0; }
#listPage #recruitmentList.cards article.card .card-head-status { display:flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
#listPage #recruitmentList.cards article.card .card-head-status .countdown { flex:0 0 auto; white-space:nowrap; }
#listPage #recruitmentList.cards article.card .card-head-minimal .type-with-new { flex:0 0 auto; justify-content:flex-end; margin-left:auto; }
#listPage #recruitmentList.cards article.card .new-badge,
#listPage #recruitmentList.cards article.card .deadline-badge { display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box; height:21px; min-height:21px; padding:0 6px !important; border:1px solid; background:#fff !important; font:600 10px/1 "Noto Sans JP",sans-serif !important; white-space:nowrap; letter-spacing:0; flex:0 0 auto; box-shadow:none !important; }
#listPage #recruitmentList.cards article.card .new-badge { color:#C43246 !important; border-color:#C43246 !important; }
#listPage #recruitmentList.cards article.card .deadline-badge { color:#AD7938 !important; border-color:#C58B43 !important; }
#listPage #recruitmentList.cards article.card .new-badge::before,
#listPage #recruitmentList.cards article.card .new-badge::after { content:none !important; display:none !important; }
#listPage #recruitmentList.cards article.card.x-collected-card { border:1px solid #e2e2e2 !important; clip-path:none !important; background:#fff !important; background-image:none !important; box-shadow:none !important; }
#listPage #recruitmentList.cards article.card.x-collected-card::before,
#listPage #recruitmentList.cards article.card.x-collected-card::after { content:none !important; display:none !important; }
#listPage #recruitmentList.cards article.card.x-collected-card .x-collected-card-head .type-with-new { margin:0; justify-content:flex-start; }
#listPage #recruitmentList.cards article.card.x-collected-card .x-listed-badge { margin-left:auto; padding:0 !important; border:0 !important; background:none !important; color:#7C3AED !important; font:600 11px/1.4 "Noto Sans JP",sans-serif !important; }
@media (hover:hover) and (pointer:fine) {
 #listPage #recruitmentList.cards article.card.commander-card:hover,
 #listPage #recruitmentList.cards article.card.union-card:hover { border-color:#20b8f4 !important; transform:scale(1.01) !important; }
 #listPage #recruitmentList.cards article.card.x-collected-card:hover { border-color:#7C3AED !important; transform:scale(1.01) !important; }
}
@media (hover:none), (pointer:coarse) {
 #listPage #recruitmentList.cards article.card { transform:none !important; }
 #listPage #recruitmentList.cards article.card.commander-card.is-scroll-highlight,
 #listPage #recruitmentList.cards article.card.union-card.is-scroll-highlight { border-color:#20b8f4 !important; }
 #listPage #recruitmentList.cards article.card.x-collected-card.is-scroll-highlight { border-color:#7C3AED !important; }
}
@media (max-width:600px) {
 #listPage #recruitmentList.cards article.card .card-head-status { gap:4px; }
 #listPage #recruitmentList.cards article.card .new-badge,
 #listPage #recruitmentList.cards article.card .deadline-badge { height:20px; min-height:20px; padding:0 5px !important; font-size:9px !important; }
}


/* ================================================================
   NEW UNION REGISTRATION — BOT GUIDE AFTER SUCCESSFUL PASS COPY
   Only #resultModal; never affects manage/preview/Discord republish.
   ================================================================ */
#resultModal .registration-bot-guide {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0 13px;
  border: 0 solid #dce5e9;
  background: #f8fafb;
  transform: translateY(-8px);
  transition:
    max-height .32s ease,
    opacity .25s ease,
    transform .32s ease,
    padding .32s ease,
    margin .32s ease;
}
#resultModal .registration-bot-guide.is-open {
  visibility: visible;
  pointer-events: auto;
  max-height: 440px;
  opacity: 1;
  margin: 12px 0;
  padding: 13px;
  border-width: 1px;
  transform: translateY(0);
}
#resultModal .registration-bot-guide h3 {
  color: #1ab0f1;
  font: 700 15px/1.5 "Noto Sans JP", sans-serif;
  letter-spacing: -.025em;
  margin: 0 0 9px;
}
#resultModal .registration-bot-guide p {
  color: #4e5962;
  font: 500 12px/1.75 "Noto Sans JP", sans-serif;
  margin: 0 0 10px;
}
#resultModal .registration-bot-guide-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 12px;
  padding: 10px 12px;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #1ab0f1 !important;
  color: #1ab0f1 !important;
  background: #fff !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  transform: none !important;
}
@media (hover: hover) {
  #resultModal .registration-bot-guide-link:hover {
    border-color: #079bdc !important;
    color: #fff !important;
    background: #079bdc !important;
  }
}
#resultModal .registration-bot-guide-link:focus-visible,
#resultModal .registration-bot-guide-link:active {
  border-color: #079bdc !important;
  color: #fff !important;
  background: #079bdc !important;
}
/* Restrict modal scrolling to the moment the new guide opens. */
#resultModal.bot-guide-expanded .modal-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  #resultModal .registration-bot-guide.is-open { padding: 12px; }
  #resultModal .registration-bot-guide h3 { font-size: 14px; }
  #resultModal .registration-bot-guide p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #resultModal .registration-bot-guide { transition: none; }
}