@charset "UTF-8";
/* ============================================================
   ゲームLP 共通テンプレート（全ゲームのトップページで使う）
   デザインベース：https://www.hi3d.ai/ja の実測値
   クラスはすべて gl_ 名前空間。アクセント色は .gl_theme_* で切り替える。
   SCSS が正本。CSS は次で生成する:
     npx sass --no-source-map --style=expanded game_lp.scss game_lp.css
   ============================================================ */
/* ---------- トークン（hi3d.ai の実測値） ---------- */
.gl_root {
  --gl_bg: #101010;
  --gl_bg_head: rgba(15, 16, 16, 0.8);
  --gl_card: #181818;
  --gl_card_2: #1f1f1f;
  --gl_line: rgba(255, 255, 255, 0.12);
  --gl_line_2: rgba(255, 255, 255, 0.24);
  --gl_white: #ffffff;
  --gl_gray: #9a9a9a;
  --gl_gray_2: #6a6a6a;
  --gl_green: #6bff46;
  --gl_mint: #32ffcc;
  --gl_cyan: #2fbce2;
  --gl_ink_green: #085047;
  --gl_gold: #ffb020;
  --gl_light: #f2f2f2;
  --gl_light_2: #eeeeee;
  --gl_ink: #101010;
  --gl_ink_2: #5a5a5a;
  --gl_ink_3: #8a8a8a;
  --gl_green_ink: #4f8f00;
  --gl_grad_cta: linear-gradient(115deg, #b6ff3d 0%, #6bff46 46%, #32ffcc 100%);
  --gl_grad_ver: linear-gradient(90deg, #2fbce2 0%, #0fffb3 100%);
  --gl_header_h: 69px;
  --gl_ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------
   ゲームごとのアクセント色
   背景（--gl_bg）と基本の文字色（--gl_white）は全ゲーム共通のまま、
   アクセント系の4変数だけをテーマクラスで差し替える。
   ------------------------------------------------------------ */
.gl_theme_evolution {
  --gl_green: #ffb020;
  --gl_mint: #ffd98a;
  --gl_ink_green: #4a3208;
  --gl_green_ink: #8a5a00;
  --gl_grad_cta: linear-gradient(115deg, #ffd23d 0%, #ffb020 46%, #ff8a3d 100%);
  --gl_grad_ver: linear-gradient(90deg, #e2962f 0%, #ffd98a 100%);
}

.gl_theme_election {
  --gl_green: #6bff46;
  --gl_mint: #32ffcc;
  --gl_ink_green: #085047;
  --gl_green_ink: #4f8f00;
  --gl_grad_cta: linear-gradient(115deg, #b6ff3d 0%, #6bff46 46%, #32ffcc 100%);
  --gl_grad_ver: linear-gradient(90deg, #2fbce2 0%, #0fffb3 100%);
}

.gl_theme_takehome {
  --gl_green: #ffe04d;
  --gl_mint: #fff3a8;
  --gl_ink_green: #4a3f00;
  --gl_green_ink: #7d6a00;
  --gl_grad_cta: linear-gradient(115deg, #fff06b 0%, #ffe04d 46%, #ffc93d 100%);
  --gl_grad_ver: linear-gradient(90deg, #e2b82f 0%, #fff3a8 100%);
}

.gl_theme_keizai {
  --gl_green: #32d6ff;
  --gl_mint: #7fe8ff;
  --gl_ink_green: #04384a;
  --gl_green_ink: #0a6f92;
  --gl_grad_cta: linear-gradient(115deg, #6be8ff 0%, #32d6ff 46%, #4d8dff 100%);
  --gl_grad_ver: linear-gradient(90deg, #2f7fe2 0%, #7fe8ff 100%);
}

.gl_theme_nenkin {
  --gl_green: #35e0a1;
  --gl_mint: #9bf0d0;
  --gl_ink_green: #053b2a;
  --gl_green_ink: #0b7a56;
  --gl_grad_cta: linear-gradient(115deg, #7bf0c2 0%, #35e0a1 46%, #2fc7d6 100%);
  --gl_grad_ver: linear-gradient(90deg, #2f9fe2 0%, #9bf0d0 100%);
}

.gl_theme_mayor {
  --gl_green: #ff8a3d;
  --gl_mint: #ffc59b;
  --gl_ink_green: #4a2405;
  --gl_green_ink: #a34b00;
  --gl_grad_cta: linear-gradient(115deg, #ffb06b 0%, #ff8a3d 46%, #ff6b3d 100%);
  --gl_grad_ver: linear-gradient(90deg, #e2652f 0%, #ffc59b 100%);
}

.gl_theme_iryohi {
  --gl_green: #ff6b8a;
  --gl_mint: #ffb3c4;
  --gl_ink_green: #4a0d1c;
  --gl_green_ink: #b01438;
  --gl_grad_cta: linear-gradient(115deg, #ff97ac 0%, #ff6b8a 46%, #ff5a5a 100%);
  --gl_grad_ver: linear-gradient(90deg, #e22f6b 0%, #ffb3c4 100%);
}

.gl_theme_shogaku {
  --gl_green: #9b8cff;
  --gl_mint: #c7bfff;
  --gl_ink_green: #1c1250;
  --gl_green_ink: #5a45cc;
  --gl_grad_cta: linear-gradient(115deg, #b9adff 0%, #9b8cff 46%, #6ba8ff 100%);
  --gl_grad_ver: linear-gradient(90deg, #6b5ae2 0%, #c7bfff 100%);
}

.gl_theme_inflation {
  --gl_green: #ff5a3c;
  --gl_mint: #ffa98f;
  --gl_ink_green: #4a1205;
  --gl_green_ink: #b33517;
  --gl_grad_cta: linear-gradient(115deg, #ff8a5c 0%, #ff5a3c 46%, #ff3d6b 100%);
  --gl_grad_ver: linear-gradient(90deg, #e2402f 0%, #ffa98f 100%);
}

.gl_theme_camp {
  --gl_green: #2fe3c2;
  --gl_mint: #9bf2e4;
  --gl_ink_green: #04382f;
  --gl_green_ink: #0a7a67;
  --gl_grad_cta: linear-gradient(115deg, #6bf0d8 0%, #2fe3c2 46%, #35c2e0 100%);
  --gl_grad_ver: linear-gradient(90deg, #2f9fe2 0%, #9bf2e4 100%);
}

.gl_theme_campcost {
  --gl_green: #f2b544;
  --gl_mint: #ffe0a3;
  --gl_ink_green: #4a3205;
  --gl_green_ink: #8a5f00;
  --gl_grad_cta: linear-gradient(115deg, #ffd36b 0%, #f2b544 46%, #ff8f3d 100%);
  --gl_grad_ver: linear-gradient(90deg, #e2962f 0%, #ffe0a3 100%);
}

.gl_theme_hub {
  --gl_green: #d8e4ff;
  --gl_mint: #ffffff;
  --gl_ink_green: #17223d;
  --gl_green_ink: #3a4a70;
  --gl_grad_cta: linear-gradient(115deg, #ffffff 0%, #d8e4ff 46%, #a8c2ff 100%);
  --gl_grad_ver: linear-gradient(90deg, #6b86c2 0%, #ffffff 100%);
}

/* ---------- リセット ---------- */
.gl_root,
.gl_root *,
.gl_root *::before,
.gl_root *::after {
  box-sizing: border-box;
}

.gl_root {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gl_white);
  background-color: var(--gl_bg);
  overflow-x: clip;
}

.gl_root :where(h1, h2, h3, h4, p, figure, dl, dd) {
  margin: 0;
}

.gl_root :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl_root :where(a) {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--gl_ease), opacity 0.25s var(--gl_ease);
}

.gl_root :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.gl_root :where(svg) {
  display: block;
}

.gl_root :focus-visible {
  outline: 3px solid var(--gl_green);
  outline-offset: 3px;
}

/* ---------- 共通レイアウト ---------- */
.gl_l_inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.gl_l_inner_narrow {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- ボタン ---------- */
.gl_btn_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 68px;
  padding: 0 34px;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--gl_ink);
  background-image: var(--gl_grad_cta);
  border-radius: 20px;
  transition: transform 0.25s var(--gl_ease), filter 0.25s var(--gl_ease);
}
.gl_btn_cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.gl_btn_line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gl_white);
  border: 1px solid var(--gl_line_2);
  border-radius: 12px;
  transition: background-color 0.25s var(--gl_ease);
}
.gl_btn_line:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.gl_btn_gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gl_ink);
  background-color: var(--gl_gold);
  border-radius: 12px;
  transition: filter 0.25s var(--gl_ease);
}
.gl_btn_gold:hover {
  filter: brightness(1.08);
}

.gl_btn_arrow {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform 0.25s var(--gl_ease);
}

.gl_btn_cta:hover .gl_btn_arrow,
.gl_btn_line:hover .gl_btn_arrow,
.gl_btn_gold:hover .gl_btn_arrow {
  transform: translateX(4px);
}

/* ---------- ヘッダー ---------- */
.gl_bar {
  /* CMS 共通ヘッダー（.pd_header・sticky・高さ69px）の直下に貼り付ける */
  position: sticky;
  top: var(--gl_header_h);
  z-index: 19;
  width: 100%;
  background-color: var(--gl_bg_head);
}

.gl_bar_inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 72px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

.gl_bar_title {
  position: relative;
  flex-shrink: 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.gl_bar_title_mark {
  position: absolute;
  top: -6px;
  left: -11px;
  font-size: 12px;
  color: var(--gl_white);
}

.gl_bar_nav {
  margin-right: auto;
}

.gl_bar_list {
  display: flex;
  align-items: center;
  gap: 26px;
}

.gl_bar_link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gl_white);
}
.gl_bar_link:hover {
  color: var(--gl_green);
}

.gl_bar_link_accent {
  color: var(--gl_green);
}

.gl_bar_caret {
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: 0.7;
}

.gl_bar_actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gl_bar_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
}
.gl_bar_icon svg {
  width: 17px;
  height: 17px;
  fill: var(--gl_white);
}
.gl_bar_icon:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

.gl_bar_ghost {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gl_white);
  border: 1px solid var(--gl_white);
  border-radius: 8px;
}
.gl_bar_ghost:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.gl_bar_solid {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gl_ink);
  background-color: var(--gl_green);
  border-radius: 8px;
}
.gl_bar_solid:hover {
  filter: brightness(1.08);
}

.gl_bar_toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gl_line_2);
  border-radius: 8px;
}

.gl_bar_toggle_line {
  display: block;
  width: 17px;
  height: 2px;
  margin: 4px auto;
  background-color: var(--gl_white);
}

/* ---------- ヒーロー ---------- */
.gl_hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 760px;
  padding: 150px 0 120px;
  overflow: hidden;
}

.gl_hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(46% 62% at 50% 46%, rgba(120, 140, 130, 0.3) 0%, rgba(16, 16, 16, 0) 100%), radial-gradient(70% 50% at 50% 100%, rgba(107, 255, 70, 0.1) 0%, rgba(16, 16, 16, 0) 100%), linear-gradient(180deg, #0c0c0c 0%, #141414 55%, #101010 100%);
}

.gl_hero_art {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(1100px, 96vw);
  height: 100%;
  transform: translateX(-50%);
  opacity: 0.34;
}

.gl_hero_inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gl_hero_release_row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gl_white);
}

.gl_hero_release_tag {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  color: var(--gl_ink_green);
  background-image: var(--gl_grad_ver);
  border-radius: 9990px;
}

.gl_hero_title {
  font-size: clamp(27px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.gl_hero_spec {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 30px;
  padding: 9px 26px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 9990px;
}

.gl_spec_item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}

.gl_spec_key {
  color: #c9c9c9;
}

.gl_spec_val {
  font-weight: 700;
  color: var(--gl_green);
}

.gl_spec_sep {
  color: #3d3d3d;
}

.gl_hero_cta_zone {
  margin-top: 46px;
}

.gl_hero_more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 34px;
  font-size: 12px;
  color: var(--gl_green);
}

.gl_hero_more_icon {
  width: 22px;
  height: 14px;
  fill: none;
  stroke: var(--gl_green);
  stroke-width: 2;
}

/* ---------- 制度バー（ロゴ帯） ---------- */
.gl_basis {
  padding: 26px 0 54px;
}

.gl_basis_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
}

.gl_basis_item {
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  opacity: 0.8;
}

/* ---------- 再現度セクション ---------- */
.gl_fidelity {
  position: relative;
  padding: 0 0 90px;
}

.gl_fid_frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 620px;
  padding: 56px;
  overflow: hidden;
  background-image: radial-gradient(80% 90% at 78% 50%, rgba(86, 104, 94, 0.45) 0%, rgba(20, 22, 21, 0) 100%), linear-gradient(135deg, #1a1c1b 0%, #111211 100%);
  border-radius: 28px;
}

.gl_fid_title {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.gl_fid_text {
  margin-top: 18px;
  font-size: 14px;
  color: #cfcfcf;
}

.gl_fid_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.gl_fid_sub {
  margin: 44px 0 14px;
  font-size: 13px;
  color: #cfcfcf;
}

.gl_thumb_list {
  display: flex;
  gap: 12px;
}

.gl_thumb_item {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  background-color: #1d1f1e;
  border: 1px solid var(--gl_line);
  border-radius: 12px;
}

.gl_thumb_item_current {
  border-color: var(--gl_white);
}

.gl_thumb_label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px 0 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 65%);
}

.gl_thumb_bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 100%;
  padding: 18px 12px 26px;
}

.gl_thumb_bar {
  width: 9px;
  background-color: var(--gl_green);
  border-radius: 2px;
  opacity: 0.85;
}

.gl_fid_visual {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  border-radius: 20px;
}

.gl_fid_map {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
}

.gl_fid_lens {
  position: absolute;
  top: 12%;
  left: 6%;
  width: 190px;
  height: 190px;
  border: 2px solid var(--gl_white);
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(107, 255, 70, 0.16) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.gl_fid_note {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-size: 12px;
  color: #b9b9b9;
}

/* ---------- 流れ（sticky 見出し＋ドット） ---------- */
.gl_flow {
  position: relative;
  padding-bottom: 90px;
}

.gl_flow_head {
  position: sticky;
  top: calc(var(--gl_header_h) + 72px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 26px 0 30px;
  background-color: var(--gl_bg);
}

.gl_flow_head_title {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.25;
}

.gl_flow_head_sub {
  display: block;
  color: var(--gl_gray_2);
}

.gl_flow_head_text {
  font-size: 14px;
  color: #cfcfcf;
}

.gl_flow_body {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 24px;
}

.gl_flow_dots {
  position: sticky;
  top: calc(var(--gl_header_h) + 210px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-self: start;
  padding-top: 40px;
}

.gl_flow_dot {
  width: 9px;
  height: 9px;
  margin: 0 auto;
  background-color: #4a4a4a;
  border-radius: 50%;
  transition: transform 0.3s var(--gl_ease), background-color 0.3s var(--gl_ease);
}

.gl_flow_dot_current {
  background-color: var(--gl_white);
  transform: scale(1.6);
}

.gl_flow_card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 20px;
  padding: 40px;
  background-color: var(--gl_card);
  border-radius: 24px;
}

.gl_flow_visual {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background-image: linear-gradient(145deg, #2a2c2b 0%, #141514 100%);
  border-radius: 16px;
}

.gl_flow_badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #dcdcdc;
}

.gl_flow_badge_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.gl_flow_badge_icon svg {
  width: 15px;
  height: 15px;
  fill: var(--gl_ink);
}

.gl_flow_badge_1 {
  background-color: var(--gl_gold);
}

.gl_flow_badge_2 {
  background-color: var(--gl_green);
}

.gl_flow_badge_3 {
  background-color: #b58cff;
}

.gl_flow_badge_4 {
  background-color: var(--gl_mint);
}

.gl_flow_badge_5 {
  background-color: var(--gl_cyan);
}

.gl_flow_badge_6 {
  background-color: #ff8a5c;
}

.gl_flow_title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.4;
}

.gl_flow_text {
  margin-top: 16px;
  font-size: 14px;
  color: #bdbdbd;
}

.gl_flow_points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.gl_flow_point {
  padding: 7px 15px;
  font-size: 13px;
  color: #dcdcdc;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 9990px;
}

.gl_flow_actions {
  margin-top: 26px;
}

/* 開票バー（カード内ビジュアル） */
.gl_mini_board {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 28px;
}

.gl_mini_row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.gl_mini_track {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.09);
  border-radius: 9990px;
  overflow: hidden;
}

.gl_mini_fill {
  display: block;
  height: 100%;
  background-color: var(--gl_green);
  border-radius: 9990px;
}

.gl_mini_fill_2 {
  background-color: var(--gl_mint);
}

.gl_mini_fill_3 {
  background-color: var(--gl_gold);
}

.gl_mini_fill_4 {
  background-color: #b58cff;
}

.gl_mini_fill_5 {
  background-color: #8a8a8a;
}

.gl_mini_num {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* カレンダー風ビジュアル */
.gl_mini_cal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 30px 28px;
}

.gl_mini_day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 12px;
  font-weight: 700;
  color: #cfcfcf;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.gl_mini_day_on {
  color: var(--gl_ink);
  background-color: var(--gl_green);
}

/* 出来事ビジュアル */
.gl_mini_feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px;
}

.gl_mini_msg {
  padding: 12px 16px;
  font-size: 12px;
  color: #dcdcdc;
  background-color: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--gl_green);
  border-radius: 0 10px 10px 0;
}

.gl_mini_msg_bad {
  border-left-color: #ff5a4d;
}

/* 議事堂ビジュアル */
.gl_mini_seat {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  padding: 34px 28px;
}

.gl_seat_dot {
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.gl_seat_dot_a {
  background-color: var(--gl_green);
}

.gl_seat_dot_b {
  background-color: var(--gl_mint);
}

.gl_seat_dot_c {
  background-color: var(--gl_gold);
}

/* ---------- 白エリア ---------- */
.gl_white_area {
  padding: clamp(60px, 7vw, 96px) 0 clamp(60px, 7vw, 100px);
  color: var(--gl_ink);
  background-color: var(--gl_light);
  border-radius: 40px;
}

.gl_wa_head {
  max-width: 900px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  text-align: center;
}

.gl_wa_title {
  font-size: clamp(23px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gl_ink);
  text-wrap: balance;
}

.gl_wa_title_accent {
  color: var(--gl_green_ink);
}

.gl_wa_text {
  margin-top: 16px;
  font-size: 14px;
  color: var(--gl_ink_2);
}

.gl_wa_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.gl_wa_chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gl_ink_2);
  background-color: #ffffff;
  border-radius: 12px;
}

.gl_wa_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gl_wa_card {
  padding: 32px 26px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 18px;
}

.gl_wa_card_icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  fill: none;
  stroke: var(--gl_ink);
  stroke-width: 1.6;
}

.gl_wa_card_title {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
}

.gl_wa_card_text {
  font-size: 13px;
  color: var(--gl_ink_2);
}

/* ギャラリー */
.gl_gal_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.gl_gal_item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background-color: #ffffff;
  border-radius: 16px;
}

.gl_gal_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--gl_ink_3);
}

.gl_gal_title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gl_ink);
}

.gl_gal_bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.gl_gal_bar {
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 9990px;
  overflow: hidden;
}

.gl_gal_bar_fill {
  display: block;
  height: 100%;
  background-color: var(--gl_green_ink);
  border-radius: 9990px;
}

.gl_gal_bar_fill_2 {
  background-color: #7fb8d8;
}

.gl_gal_bar_fill_3 {
  background-color: #d8b35f;
}

.gl_gal_foot {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gl_ink_3);
}

/* コミュニティ見出し */
.gl_wa_center_head {
  padding: clamp(50px, 6vw, 80px) 0 clamp(26px, 3vw, 40px);
  text-align: center;
}

.gl_wa_big_title {
  font-size: clamp(26px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.3;
}

/* FAQ */
.gl_faq_wrap {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px;
  padding-top: clamp(50px, 6vw, 86px);
}

.gl_faq_title {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.3;
}

.gl_faq_text {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gl_ink_2);
}

.gl_faq_item {
  margin-bottom: 12px;
  background-color: #ffffff;
  border-radius: 12px;
}

.gl_faq_q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gl_ink);
  cursor: pointer;
  list-style: none;
}

.gl_faq_q::-webkit-details-marker {
  display: none;
}

.gl_faq_icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gl_ink_2);
  stroke-width: 2;
  transition: transform 0.3s var(--gl_ease);
}

.gl_faq_item[open] .gl_faq_icon {
  transform: rotate(180deg);
}

.gl_faq_a {
  padding: 0 22px 20px;
  font-size: 14px;
  color: var(--gl_ink_2);
}

/* ---------- 最終CTA ---------- */
.gl_cta_last {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 8vw, 110px);
  overflow: hidden;
  text-align: center;
}

.gl_cta_glow {
  position: absolute;
  top: -120px;
  left: 50%;
  z-index: 0;
  width: min(900px, 100%);
  height: 420px;
  transform: translateX(-50%);
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(107, 255, 70, 0.3) 0%, rgba(16, 16, 16, 0) 100%);
}

.gl_cta_inner {
  position: relative;
  z-index: 1;
}

.gl_cta_title {
  font-size: clamp(28px, 4.8vw, 54px);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.gl_cta_text {
  max-width: 600px;
  margin: 20px auto 0;
  font-size: 14px;
  color: #bdbdbd;
}

.gl_cta_actions {
  margin-top: 36px;
}

/* ---------- 固定CTA ---------- */
.gl_float_cta {
  position: fixed;
  bottom: 22px;
  left: 50%;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gl_ink);
  background-color: var(--gl_light);
  border-radius: 9990px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  transition: filter 0.25s var(--gl_ease);
}
.gl_float_cta:hover {
  filter: brightness(1.05);
}

.gl_float_cta_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--gl_green);
  border-radius: 50%;
}
.gl_float_cta_icon svg {
  width: 16px;
  height: 16px;
  fill: var(--gl_ink);
}

/* ============================================================
   メディアクエリ（1024 / 900 / 640 の3段・max-width で上書き）
   ============================================================ */
/* ---------- 1024px以下（iPad横） ---------- */
@media screen and (max-width: 1024px) {
  .gl_l_inner,
  .gl_l_inner_narrow {
    padding: 0 28px;
  }
  .gl_fid_frame {
    grid-template-columns: 1fr;
    padding: 36px;
  }
  .gl_fid_visual {
    min-height: 300px;
  }
  .gl_wa_cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .gl_gal_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ---------- 900px以下（タブレット） ---------- */
@media screen and (max-width: 900px) {
  .gl_bar_nav {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 72px);
    margin-right: 0;
    padding: 6px 28px 24px;
    overflow-y: auto;
    background-color: rgba(15, 16, 16, 0.98);
    border-bottom: 1px solid var(--gl_line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s var(--gl_ease), transform 0.25s var(--gl_ease), visibility 0.25s var(--gl_ease);
  }
  .gl_bar_nav.gl_is_open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .gl_bar_list {
    display: block;
  }
  .gl_bar_item {
    border-bottom: 1px solid var(--gl_line);
  }
  .gl_bar_link {
    padding: 15px 2px;
    font-size: 15px;
  }
  .gl_bar_ghost {
    display: none;
  }
  .gl_bar_icon {
    display: none;
  }
  .gl_bar_actions {
    margin-left: auto;
  }
  .gl_bar_toggle {
    display: block;
  }
  .gl_flow_body {
    grid-template-columns: 1fr;
  }
  .gl_flow_dots {
    display: none;
  }
  .gl_flow_card {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px;
  }
  .gl_flow_visual {
    min-height: 240px;
    order: 2;
  }
  .gl_faq_wrap {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .gl_gal_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---------- 640px以下（スマホ） ---------- */
@media screen and (max-width: 640px) {
  .gl_l_inner,
  .gl_l_inner_narrow {
    padding: 0 20px;
  }
  .gl_bar_inner {
    gap: 14px;
    padding: 0 20px;
  }
  .gl_bar_title {
    font-size: 21px;
  }
  .gl_hero {
    min-height: 0;
    padding: 118px 0 50px;
  }
  .gl_hero_release_row {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
  }
  .gl_hero_spec {
    flex-direction: column;
    gap: 6px;
    padding: 14px 22px;
    border-radius: 18px;
  }
  .gl_spec_sep {
    display: none;
  }
  .gl_btn_cta {
    width: 100%;
    height: 60px;
  }
  .gl_basis_list {
    justify-content: flex-start;
    gap: 12px 18px;
  }
  .gl_fid_frame {
    padding: 26px 20px;
    border-radius: 20px;
  }
  .gl_fid_actions .gl_btn_line,
  .gl_fid_actions .gl_btn_gold {
    flex: 1 1 100%;
  }
  .gl_thumb_item {
    width: 80px;
    height: 80px;
  }
  .gl_fid_lens {
    width: 130px;
    height: 130px;
  }
  .gl_white_area {
    border-radius: 24px;
  }
  .gl_wa_cards {
    grid-template-columns: 1fr;
  }
  .gl_gal_grid {
    grid-template-columns: 1fr;
  }
  .gl_mini_seat {
    grid-template-columns: repeat(10, 1fr);
  }
  .gl_float_cta {
    font-size: 13px;
    padding-left: 18px;
  }
  /* iOS の自動ズーム防止（フォーム追加時に効かせる） */
  .gl_root input,
  .gl_root select,
  .gl_root textarea {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl_root * {
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================
   CMS 出力部品の上書き
   page_head / breadcrumb / post_list(news_top) / bbs_latest は
   CMS 側が明るい配色で出すので、gl_root の中だけダークに寄せる。
   ============================================================ */
/* ---------- ページ見出し ---------- */
.gl_root .page_head {
  padding: 30px 0 0;
  color: var(--gl_white);
  background: none;
  border: 0;
}

.gl_root .page_head_inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.gl_root .breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--gl_gray);
  list-style: none;
}

.gl_root .breadcrumb_item {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.gl_root .breadcrumb_item::after {
  color: #4a4a4a;
  content: "/";
}

.gl_root .breadcrumb_item:last-child::after {
  content: none;
}

.gl_root .breadcrumb_link {
  color: var(--gl_gray);
}

.gl_root a.breadcrumb_link:hover {
  color: var(--gl_green);
}

.gl_root .page_head_eyebrow {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gl_green);
}

.gl_root .page_head_eyebrow::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: 4px;
  background-color: var(--gl_green);
  content: "";
}

.gl_root .page_head_title {
  position: relative;
  margin: 12px 0 0;
  padding-bottom: 16px;
  font-family: inherit;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gl_white);
  border-bottom: 1px solid var(--gl_line);
}

.gl_root .page_head_title::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--gl_green);
  content: "";
}

.gl_root .page_head_lead {
  max-width: 760px;
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px) 0 0;
  font-size: 14px;
  line-height: 2;
  color: var(--gl_gray);
}

/* ---------- 更新情報・お知らせ ---------- */
.gl_news {
  padding: clamp(56px, 7vw, 90px) 0 clamp(18px, 2.6vw, 28px);
}

.gl_news_title {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.gl_root .news_list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gl_line);
}

.gl_root .news_item {
  list-style: none;
  border-bottom: 1px solid var(--gl_line);
}

.gl_root .news_item_link {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 17px 4px;
  color: var(--gl_white);
}

.gl_root .news_item_link:hover {
  color: var(--gl_green);
}

.gl_root .news_date {
  font-size: 13px;
  font-weight: 700;
  color: var(--gl_gray);
  font-variant-numeric: tabular-nums;
}

.gl_root .news_text {
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- 掲示板の最新書き込み ---------- */
.gl_bbs {
  padding: clamp(18px, 2.6vw, 28px) 0 clamp(64px, 8vw, 100px);
}

.gl_root .bbs_latest {
  padding: clamp(24px, 3vw, 34px);
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: 20px;
}

.gl_root .bbs_latest .section_inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.gl_root .bbs_latest_title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--gl_white);
}

.gl_root .bbs_latest_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl_root .bbs_latest_list > li {
  padding: 12px 0;
  font-size: 14px;
  color: var(--gl_gray);
  border-bottom: 1px solid var(--gl_line);
  list-style: none;
}

.gl_root .bbs_latest_list > li:last-child {
  border-bottom: 0;
}

.gl_root .bbs_latest_list a {
  color: var(--gl_white);
}

.gl_root .bbs_latest_list a:hover {
  color: var(--gl_green);
}

.gl_root .bbs_latest_more {
  margin: 16px 0 0;
  font-size: 13px;
}

.gl_root .bbs_latest_more a {
  color: var(--gl_green);
}

/* ---------- ページ見出しが上に乗るぶん、ヒーローの天地を詰める ---------- */
.gl_hero {
  padding-top: clamp(64px, 7vw, 96px);
}

@media screen and (max-width: 1024px) {
  .gl_root .page_head_inner {
    padding: 0 28px;
  }
}
@media screen and (max-width: 640px) {
  .gl_root .page_head_inner {
    padding: 0 20px;
  }
  .gl_root .news_item_link {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 15px 2px;
  }
  .gl_root .news_text {
    font-size: 14px;
  }
}
/* ============================================================
   ゲーム関連ページ（遊び方ガイド・開発記・掲示板・統計）
   既存の本文HTMLはそのままに、.gl_root.gl_doc で包んでダークに寄せる。
   ============================================================ */
.gl_root.gl_doc {
  padding-bottom: clamp(64px, 8vw, 110px);
  color: #c8c8c8;
}

/* 明るい地色・濃い罫線・濃い文字色をいったん外す（gl_ 名前空間の部品は除く） */
.gl_root.gl_doc *:not([class*=gl_]) {
  color: inherit;
  background-color: transparent;
  border-color: var(--gl_line);
}

.gl_root.gl_doc .section_inner,
.gl_root.gl_doc .pd_wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- 本文タイポグラフィ ---------- */
.gl_root.gl_doc h2:not([class*=gl_]) {
  margin: clamp(44px, 5.5vw, 72px) 0 18px;
  font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--gl_white);
}

.gl_root.gl_doc h3:not([class*=gl_]) {
  margin: clamp(28px, 3.4vw, 40px) 0 14px;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--gl_white);
}

.gl_root.gl_doc h4:not([class*=gl_]) {
  margin: 22px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gl_white);
}

.gl_root.gl_doc p:not([class*=gl_]) {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 2;
  color: #c8c8c8;
}

.gl_root.gl_doc ul:not([class*=gl_]),
.gl_root.gl_doc ol:not([class*=gl_]) {
  margin: 0 0 20px;
  padding-left: 1.3em;
}

.gl_root.gl_doc li:not([class*=gl_]) {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.95;
  color: #c8c8c8;
}

/* マーカーを出すのは素の ul / ol だけ。
   クラス付きのリストは独自に番号や記号を描いていることがあるので触らない
   （例：.cg_guide_steps は list-style: none ＋ ::before のカウンター）。 */
.gl_root.gl_doc ul:not([class]) > li {
  list-style: disc;
}

.gl_root.gl_doc ol:not([class]) > li {
  list-style: decimal;
}

.gl_root.gl_doc a:not([class*=gl_]) {
  color: var(--gl_green);
}

/* 下線を引くのは本文中の素のリンクだけ。
   クラスの付いたリンクはボタンなど装飾済みなので触らない。 */
.gl_root.gl_doc a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gl_root.gl_doc a:not([class*=gl_]):hover {
  opacity: 0.75;
}

.gl_root.gl_doc strong:not([class*=gl_]),
.gl_root.gl_doc b:not([class*=gl_]) {
  color: var(--gl_white);
}

.gl_root.gl_doc code:not([class*=gl_]) {
  padding: 2px 6px;
  font-size: 13px;
  color: var(--gl_mint);
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
}

.gl_root.gl_doc hr:not([class*=gl_]) {
  height: 1px;
  margin: clamp(34px, 4vw, 52px) 0;
  background-color: var(--gl_line);
  border: 0;
}

.gl_root.gl_doc img:not([class*=gl_]) {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- 表 ---------- */
.gl_root.gl_doc table:not([class*=gl_]) {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
}

.gl_root.gl_doc th:not([class*=gl_]),
.gl_root.gl_doc td:not([class*=gl_]) {
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.8;
  color: #c8c8c8;
  text-align: left;
  border: 1px solid var(--gl_line);
}

.gl_root.gl_doc th:not([class*=gl_]) {
  font-weight: 700;
  color: var(--gl_white);
  background-color: rgba(255, 255, 255, 0.05);
}

/* ---------- 遊び方ガイド（cg_guide 系） ---------- */
.gl_root.gl_doc .cg_guide_toc {
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: clamp(34px, 4vw, 50px);
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: 18px;
}

.gl_root.gl_doc .cg_guide_toc_title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--gl_white);
}

.gl_root.gl_doc .cg_guide_toc_list {
  margin: 0;
  padding-left: 1.2em;
}

.gl_root.gl_doc .cg_guide_sec {
  padding-top: clamp(14px, 2vw, 22px);
}

.gl_root.gl_doc .cg_guide_h {
  position: relative;
  margin: clamp(40px, 5vw, 64px) 0 18px;
  padding-left: 16px;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--gl_white);
}

.gl_root.gl_doc .cg_guide_h::before {
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 4px;
  height: 1.1em;
  background: var(--gl_green);
  border-radius: 2px;
  content: "";
}

.gl_root.gl_doc .cg_guide_note {
  padding: 16px 18px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.95;
  color: #b9b9b9;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gl_line);
  border-left: 3px solid var(--gl_green);
  border-radius: 0 12px 12px 0;
}

.gl_root.gl_doc .cg_guide_back {
  margin-top: clamp(40px, 5vw, 60px);
  font-size: 14px;
}

/* ---------- ステップ・特徴カード（camp_ / election_ など各ゲーム固有） ---------- */
.gl_root.gl_doc .camp_step,
.gl_root.gl_doc .guide_faq_item,
.gl_root.gl_doc .camp_features {
  padding: clamp(20px, 2.6vw, 28px);
  margin-bottom: 14px;
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: 16px;
}

.gl_root.gl_doc .camp_step_no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 800;
  color: var(--gl_ink);
  background: var(--gl_grad_cta);
  border-radius: 50%;
}

.gl_root.gl_doc .camp_sec_eyebrow,
.gl_root.gl_doc .election_sec_eyebrow {
  margin: clamp(40px, 5vw, 64px) 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gl_green);
}

.gl_root.gl_doc .camp_sec_title,
.gl_root.gl_doc .election_sec_title {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--gl_white);
}

.gl_root.gl_doc .guide_faq_q {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gl_white);
}

.gl_root.gl_doc .guide_faq_a {
  margin: 0;
  font-size: 14px;
  color: #b9b9b9;
}

/* ---------- FAQ の回答（A バッジ＋本文）---------- */
/* 元は 26px + 1fr の grid。本文はテキストノードなので 2 カラム目に入るが、
   その中のリンクは独立したグリッドアイテムになり、26px の列に落ちて
   一文字ずつ縦に折れてしまう。ブロックに戻して、バッジは重ねて置く。 */
.gl_root.gl_doc [class*=_faq_a] {
  position: relative;
  display: block;
  padding-left: 38px;
}

.gl_root.gl_doc [class*=_faq_a]::before {
  position: absolute;
  top: 0;
  left: 0;
}

/* ---------- 記事末尾の締め（読むより動かしたほうが早い、等）---------- */
.gl_root.gl_doc [class$=_outro] {
  margin: clamp(48px, 6vw, 76px) 0;
  padding: clamp(32px, 4.5vw, 52px) clamp(24px, 3vw, 40px);
  text-align: center;
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: 20px;
}

/* 中身が詰まって見えないよう、要素のあいだに一律の余白を入れる。
   本文用の p:not([class*="gl_"]) のほうが詳細度が高いので、
   要素名を含む形も並べて書いて確実に勝たせる。 */
.gl_root.gl_doc [class$=_outro] > * + *,
.gl_root.gl_doc [class$=_outro] > * + p,
.gl_root.gl_doc [class$=_outro] > * + div,
.gl_root.gl_doc [class$=_outro] > * + ul,
.gl_root.gl_doc [class$=_outro] > * + ol {
  margin-top: clamp(16px, 2.2vw, 24px);
  margin-bottom: 0;
}

/* 締めのボタンは、大きさと字の大きさを揃える
   （元は主ボタン15px・副ボタン11.5pxで、並ぶと不揃いに見える） */
.gl_root.gl_doc [class$=_outro] a[class*=_cta],
.gl_root.gl_doc [class$=_outro] button[class*=_cta] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

/* 最後の行（ガイドや開発記へのリンク）は、線の上に置いて締める */
.gl_root.gl_doc [class$=_outro] > [class*=_link] {
  padding-top: clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--gl_line);
}

/* 本文の節の終わりにも同じリンク行が置かれている。
   こちらは囲みが無いぶん下が詰まって見えるので、余白を足す。 */
.gl_root.gl_doc [class$=_guide_link],
.gl_root.gl_doc p[class$=_guide_link] {
  margin-top: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(26px, 3.4vw, 38px);
  padding-bottom: 0;
}

/* 締めブロックの中は枠の余白があるので、足さない */
.gl_root.gl_doc [class$=_outro] > [class$=_guide_link] {
  margin-bottom: 0;
}

.gl_root.gl_doc [class*=_cta_row],
.gl_root.gl_doc [class*=_cta_wrap] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- グリッドの中に見出しを直接入れている組み方の手当て ---------- */
/* .takehome_steps などは 4 カラムの grid で、その直下に見出しと本文カードが
   並んでいる。見出しが 1 カラム目を占めるとカードが細く潰れるので、
   見出しにあたる要素は一行ぶん使わせる。 */
.gl_root.gl_doc [class*=_steps] > :where(p, h2, h3, h4),
.gl_root.gl_doc [class*=_modes] > :where(p, h2, h3, h4),
.gl_root.gl_doc [class*=_cards] > :where(p, h2, h3, h4),
.gl_root.gl_doc [class*=_features] > :where(p, h2, h3, h4),
.gl_root.gl_doc [class*=_grid] > :where(p, h2, h3, h4),
.gl_root.gl_doc [class*=_list] > :where(h2, h3, h4) {
  grid-column: 1/-1;
}

/* ---------- 開発記の目次（series_index） ---------- */
.gl_root.gl_doc .series_index_list,
.gl_root.gl_doc .series_list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gl_line);
}

.gl_root.gl_doc .series_index_list > li,
.gl_root.gl_doc .series_list > li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gl_line);
}

.gl_root.gl_doc .series_index_list a,
.gl_root.gl_doc .series_list a {
  display: block;
  padding: 16px 4px;
  color: var(--gl_white);
  text-decoration: none;
}

.gl_root.gl_doc .series_index_list a:hover,
.gl_root.gl_doc .series_list a:hover {
  color: var(--gl_green);
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .gl_root.gl_doc .section_inner,
  .gl_root.gl_doc .pd_wrap {
    padding: 0 28px;
  }
}
@media screen and (max-width: 640px) {
  .gl_root.gl_doc .section_inner,
  .gl_root.gl_doc .pd_wrap {
    padding: 0 20px;
  }
  .gl_root.gl_doc p,
  .gl_root.gl_doc li {
    font-size: 14px;
  }
}
/* ---------- ゲーム一覧（ハブ）のカード ---------- */
.gl_hub_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.gl_hub_card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: var(--gl_radius_l, 24px);
  transition: transform 0.3s var(--gl_ease), border-color 0.3s var(--gl_ease);
}

.gl_hub_card:hover {
  transform: translateY(-4px);
  border-color: var(--gl_line_2);
}

.gl_hub_tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gl_green);
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 9990px;
}

.gl_hub_title {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.45;
}

.gl_hub_text {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--gl_gray);
}

.gl_hub_figures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gl_line);
}

.gl_hub_fig_num {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gl_green);
  font-variant-numeric: tabular-nums;
}

.gl_hub_fig_label {
  margin-top: 2px;
  font-size: 12px;
  color: var(--gl_gray);
}

.gl_hub_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

@media screen and (max-width: 900px) {
  .gl_hub_grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- 再現度セクションの地図 ---------- */
/* 日本列島は縦長なので、枠の高さに引っ張られて伸びすぎないよう上限を置く */
.gl_fid_map {
  max-height: 520px;
  margin: 0 auto;
}

.gl_fid_lens {
  top: 28%;
  left: 32%;
}

@media screen and (max-width: 900px) {
  .gl_fid_map {
    max-height: 380px;
  }
  .gl_fid_lens {
    top: 24%;
    left: 28%;
  }
}
/* ---------- 補助クラス ---------- */
.gl_hero_note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gl_gray);
}

.gl_sec_label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gl_green);
}

.gl_faq_lead,
.gl_fid_body,
.gl_flow_body_text,
.gl_news_body {
  min-width: 0;
}

/* ---------- クラウドセーブ（ログイン）の節 ---------- */
.gl_login {
  padding: clamp(50px, 6vw, 80px) 0 clamp(10px, 2vw, 20px);
}

.gl_login_text {
  max-width: 760px;
  margin: 0 0 clamp(22px, 3vw, 32px);
  font-size: 14px;
  line-height: 2;
  color: var(--gl_gray);
}

.gl_login_panel {
  max-width: 560px;
  padding: clamp(22px, 3vw, 32px);
  background-color: var(--gl_card);
  border: 1px solid var(--gl_line);
  border-radius: 20px;
}

/* ---------- 共通ヘッダーの出し入れ ---------- */
/* 下へスクロールしている間は隠し、上へ戻したら出す（game_lp.js が付け外しする）。
   サブナビの貼り付き位置（--gl_header_h）も合わせて動くので、
   ヘッダーが消えたぶんだけ上へ詰まる。 */
.pd_header.gl_headroom {
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.pd_header.gl_headroom.is_hidden {
  transform: translateY(-100%);
}

.gl_bar {
  transition: top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pd_header.gl_headroom,
  .gl_bar {
    transition: none;
  }
}
/* ---------- 共通フッターとの継ぎ目 ---------- */
/* フッターは通常ページ向けに margin-top: 90px を持っている。
   ゲーム配下はダークの地がフッターまで続くので、その余白を殺す。 */
body:has(.gl_root) .pd_footer,
main:has(.gl_root) + .pd_footer {
  margin-top: 0;
}

/* ---------- ページ内リンクの着地位置 ---------- */
/* CMS 共通ヘッダー（69px）＋ゲーム内サブナビ（72px）のぶんだけ手前で止める */
.gl_root [id],
.gl_root :target {
  scroll-margin-top: calc(var(--gl_header_h) + 88px);
}

/* ---------- 既存ページの配色変数をダーク用に差し替える ---------- */
/* citygame.css は色を変数で持ち、箱ごとに定義し直している。
   同じセレクタを .gl_root 配下で上書きし、値の出どころごと入れ替える。
   このブロックは _ops/game_lp/make_vars_block.py が生成する。 */
.gl_root,
.gl_root.gl_doc {
  --el_gold: #e6c06b;
  --el_gold_soft: #e6c06b;
  --el_live: #ee6363;
  --if_forecast: #d8ba79;
  --if_official: #9ca6b4;
  --if_you: #dc9575;
  --iy_current: #73ccdd;
  --iy_legacy: #a0aeb1;
  --kz_amber: #ffd052;
  --kz_blue: #52a0ff;
  --kz_green: #73dda7;
  --kz_orange: #ffa352;
  --kz_red: #f85b59;
  --my_disaster: #a1a9b0;
  --my_gold: #dab577;
  --my_industry: #bdac94;
  --my_infra: #dab577;
  --nk_gold: #f2b95f;
  --nk_rose: #e36d8a;
  --nk_teal: #76dbc1;
  --nk_violet: #a76fe2;
  --sg_flat: #6978e7;
  --sg_rising: #e2856e;
  --th_itax: #d97b78;
  --th_rtax: #76a2db;
  --th_social: #f0ac61;
  --th_take: #6fe1ba;
  --th_take_dk: #65ebc0;
}

.gl_root .election_stage,
.gl_root.gl_doc .election_stage {
  --el_gold: #e6c16b;
  --el_live: #ee6363;
}

.gl_root .takehome_stage,
.gl_root.gl_doc .takehome_stage {
  --th_itax: #d87c78;
  --th_rtax: #76a2db;
  --th_social: #f0ac61;
  --th_take: #6fe2ba;
  --th_take_dk: #66ebbf;
}

.gl_root .keizai_stage,
.gl_root.gl_doc .keizai_stage {
  --kz_amber: #ffd152;
  --kz_blue: #52a0ff;
  --kz_green: #73dda7;
  --kz_orange: #ffa352;
  --kz_red: #f85c58;
}

.gl_root .nenkin_stage,
.gl_root.gl_doc .nenkin_stage {
  --nk_gold: #f2ba5e;
  --nk_rose: #e36d8a;
  --nk_teal: #76dac1;
  --nk_violet: #a66fe2;
}

.gl_root .mayor_stage,
.gl_root.gl_doc .mayor_stage {
  --my_disaster: #a1a9b0;
  --my_gold: #dab676;
  --my_industry: #bcac94;
  --my_infra: #dab676;
}

.gl_root .iryohi_stage,
.gl_root.gl_doc .iryohi_stage {
  --iy_current: #73cadd;
  --iy_legacy: #9faeb1;
}

.gl_root .shogaku_stage,
.gl_root.gl_doc .shogaku_stage {
  --sg_flat: #6a78e7;
  --sg_rising: #e2846e;
}

.gl_root .inflation_stage,
.gl_root.gl_doc .inflation_stage {
  --if_forecast: #d8bb79;
  --if_official: #9ca6b4;
  --if_you: #dc9574;
}

.gl_root,
.gl_root.gl_doc {
  --cp_accent: var(--gl_green);
  --cp_faint: #9a9a9a;
  --cp_fg: #eaeaea;
  --cp_line: rgba(255, 255, 255, 0.14);
  --cp_muted: #b9b9b9;
  --el_fg: #eaeaea;
  --el_muted: #b9b9b9;
  --if_accent: var(--gl_green);
  --if_faint: #9a9a9a;
  --if_fg: #eaeaea;
  --if_line: rgba(255, 255, 255, 0.14);
  --if_muted: #b9b9b9;
  --iy_accent: var(--gl_green);
  --iy_faint: #9a9a9a;
  --iy_fg: #eaeaea;
  --iy_line: rgba(255, 255, 255, 0.14);
  --iy_muted: #b9b9b9;
  --kz_faint: #9a9a9a;
  --kz_fg: #eaeaea;
  --kz_line: rgba(255, 255, 255, 0.14);
  --kz_muted: #b9b9b9;
  --my_accent: var(--gl_green);
  --my_faint: #9a9a9a;
  --my_fg: #eaeaea;
  --my_line: rgba(255, 255, 255, 0.14);
  --my_muted: #b9b9b9;
  --nk_faint: #9a9a9a;
  --nk_fg: #eaeaea;
  --nk_line: rgba(255, 255, 255, 0.14);
  --nk_muted: #b9b9b9;
  --sg_accent: var(--gl_green);
  --sg_faint: #9a9a9a;
  --sg_fg: #eaeaea;
  --sg_line: rgba(255, 255, 255, 0.14);
  --sg_muted: #b9b9b9;
  --th_fg: #eaeaea;
  --th_line: rgba(255, 255, 255, 0.14);
  --th_muted: #b9b9b9;
}

.gl_root .election_stage,
.gl_root.gl_doc .election_stage {
  --el_fg: #eaeaea;
  --el_muted: #b9b9b9;
}

.gl_root .takehome_stage,
.gl_root.gl_doc .takehome_stage {
  --th_fg: #eaeaea;
  --th_muted: #b9b9b9;
  --th_line: rgba(255, 255, 255, 0.14);
}

.gl_root .keizai_stage,
.gl_root.gl_doc .keizai_stage {
  --kz_fg: #eaeaea;
  --kz_muted: #b9b9b9;
  --kz_faint: #9a9a9a;
  --kz_line: rgba(255, 255, 255, 0.14);
}

.gl_root .nenkin_stage,
.gl_root.gl_doc .nenkin_stage {
  --nk_fg: #eaeaea;
  --nk_muted: #b9b9b9;
  --nk_faint: #9a9a9a;
  --nk_line: rgba(255, 255, 255, 0.14);
}

.gl_root .mayor_stage,
.gl_root.gl_doc .mayor_stage {
  --my_fg: #eaeaea;
  --my_muted: #b9b9b9;
  --my_faint: #9a9a9a;
  --my_line: rgba(255, 255, 255, 0.14);
  --my_accent: var(--gl_green);
}

.gl_root .iryohi_stage,
.gl_root.gl_doc .iryohi_stage {
  --iy_fg: #eaeaea;
  --iy_muted: #b9b9b9;
  --iy_faint: #9a9a9a;
  --iy_line: rgba(255, 255, 255, 0.14);
  --iy_accent: var(--gl_green);
}

.gl_root .shogaku_stage,
.gl_root.gl_doc .shogaku_stage {
  --sg_fg: #eaeaea;
  --sg_muted: #b9b9b9;
  --sg_faint: #9a9a9a;
  --sg_line: rgba(255, 255, 255, 0.14);
  --sg_accent: var(--gl_green);
}

.gl_root .inflation_stage,
.gl_root.gl_doc .inflation_stage {
  --if_fg: #eaeaea;
  --if_muted: #b9b9b9;
  --if_faint: #9a9a9a;
  --if_line: rgba(255, 255, 255, 0.14);
  --if_accent: var(--gl_green);
}

.gl_root .camp_stage,
.gl_root.gl_doc .camp_stage {
  --cp_fg: #eaeaea;
  --cp_muted: #b9b9b9;
  --cp_faint: #9a9a9a;
  --cp_line: rgba(255, 255, 255, 0.14);
  --cp_accent: var(--gl_green);
}

.gl_root,
.gl_root.gl_doc {
  --cg_fg: #eaeaea;
  --cg_muted: #b9b9b9;
  --cg_line: rgba(255, 255, 255, 0.14);
  --cg_accent: var(--gl_green);
  --cg_accent_dk: var(--gl_mint);
}

.gl_root .citygame_stage,
.gl_root.gl_doc .citygame_stage,
.gl_root .takehome_stage,
.gl_root.gl_doc .takehome_stage,
.gl_root .election_stage,
.gl_root.gl_doc .election_stage,
.gl_root .keizai_stage,
.gl_root.gl_doc .keizai_stage,
.gl_root .nenkin_stage,
.gl_root.gl_doc .nenkin_stage,
.gl_root .mayor_stage,
.gl_root.gl_doc .mayor_stage,
.gl_root .iryohi_stage,
.gl_root.gl_doc .iryohi_stage,
.gl_root .shogaku_stage,
.gl_root.gl_doc .shogaku_stage,
.gl_root .inflation_stage,
.gl_root.gl_doc .inflation_stage,
.gl_root .camp_stage,
.gl_root.gl_doc .camp_stage {
  --cg_fg: #eaeaea;
  --cg_muted: #b9b9b9;
  --cg_line: rgba(255, 255, 255, 0.14);
  --cg_accent: var(--gl_green);
  --cg_accent_dk: var(--gl_mint);
}

.gl_root .game_hub_item,
.gl_root.gl_doc .game_hub_item {
  --game_accent: var(--gl_green);
}

.gl_root .game_hub_item_japan_evolution,
.gl_root.gl_doc .game_hub_item_japan_evolution {
  --game_accent: var(--gl_green);
}

.gl_root .game_hub_item_election,
.gl_root.gl_doc .game_hub_item_election {
  --game_accent: var(--gl_green);
}

.gl_root .camp_chart,
.gl_root.gl_doc .camp_chart,
.gl_root .camp_cta,
.gl_root.gl_doc .camp_cta,
.gl_root .camp_outro,
.gl_root.gl_doc .camp_outro,
.gl_root .cg_guide_note,
.gl_root.gl_doc .cg_guide_note,
.gl_root .cg_guide_toc,
.gl_root.gl_doc .cg_guide_toc,
.gl_root .citygame_auth,
.gl_root.gl_doc .citygame_auth,
.gl_root .citygame_cta,
.gl_root.gl_doc .citygame_cta,
.gl_root .citygame_feature,
.gl_root.gl_doc .citygame_feature,
.gl_root .citygame_oauth_or,
.gl_root.gl_doc .citygame_oauth_or,
.gl_root .citygame_step,
.gl_root.gl_doc .citygame_step,
.gl_root .election_cta,
.gl_root.gl_doc .election_cta,
.gl_root .game_hub_payslip,
.gl_root.gl_doc .game_hub_payslip,
.gl_root .game_hub_seats,
.gl_root.gl_doc .game_hub_seats,
.gl_root .inflation_chart,
.gl_root.gl_doc .inflation_chart,
.gl_root .inflation_cta,
.gl_root.gl_doc .inflation_cta,
.gl_root .inflation_outro,
.gl_root.gl_doc .inflation_outro,
.gl_root .iryohi_chart,
.gl_root.gl_doc .iryohi_chart,
.gl_root .iryohi_cta,
.gl_root.gl_doc .iryohi_cta,
.gl_root .keizai_chain_box,
.gl_root.gl_doc .keizai_chain_box,
.gl_root .keizai_cta,
.gl_root.gl_doc .keizai_cta,
.gl_root .keizai_fork,
.gl_root.gl_doc .keizai_fork,
.gl_root .mayor_budgetbar,
.gl_root.gl_doc .mayor_budgetbar,
.gl_root .mayor_cta,
.gl_root.gl_doc .mayor_cta,
.gl_root .nenkin_cta,
.gl_root.gl_doc .nenkin_cta,
.gl_root .nenkin_timeline,
.gl_root.gl_doc .nenkin_timeline,
.gl_root .shogaku_chart,
.gl_root.gl_doc .shogaku_chart,
.gl_root .shogaku_cta,
.gl_root.gl_doc .shogaku_cta,
.gl_root .shogaku_outro,
.gl_root.gl_doc .shogaku_outro,
.gl_root .takehome_cta,
.gl_root.gl_doc .takehome_cta,
.gl_root .takehome_target,
.gl_root.gl_doc .takehome_target {
  --cg_accent: var(--gl_green);
  --cg_accent_dk: var(--gl_mint);
  --cg_fg: #eaeaea;
  --cg_line: rgba(255, 255, 255, 0.14);
  --cg_muted: #b9b9b9;
  --cp_accent: var(--gl_green);
  --cp_faint: #9a9a9a;
  --cp_fg: #eaeaea;
  --cp_line: rgba(255, 255, 255, 0.14);
  --cp_muted: #b9b9b9;
  --el_fg: #eaeaea;
  --el_gold: #e6c06b;
  --el_gold_soft: #e6c06b;
  --el_live: #ee6363;
  --el_muted: #b9b9b9;
  --if_accent: var(--gl_green);
  --if_faint: #9a9a9a;
  --if_fg: #eaeaea;
  --if_forecast: #d8ba79;
  --if_line: rgba(255, 255, 255, 0.14);
  --if_muted: #b9b9b9;
  --if_official: #9ca6b4;
  --if_you: #dc9575;
  --iy_accent: var(--gl_green);
  --iy_current: #73ccdd;
  --iy_faint: #9a9a9a;
  --iy_fg: #eaeaea;
  --iy_legacy: #a0aeb1;
  --iy_line: rgba(255, 255, 255, 0.14);
  --iy_muted: #b9b9b9;
  --kz_amber: #ffd052;
  --kz_blue: #52a0ff;
  --kz_faint: #9a9a9a;
  --kz_fg: #eaeaea;
  --kz_green: #73dda7;
  --kz_line: rgba(255, 255, 255, 0.14);
  --kz_muted: #b9b9b9;
  --kz_orange: #ffa352;
  --kz_red: #f85b59;
  --my_accent: var(--gl_green);
  --my_disaster: #a1a9b0;
  --my_faint: #9a9a9a;
  --my_fg: #eaeaea;
  --my_gold: #dab577;
  --my_industry: #bdac94;
  --my_infra: #dab577;
  --my_line: rgba(255, 255, 255, 0.14);
  --my_muted: #b9b9b9;
  --nk_faint: #9a9a9a;
  --nk_fg: #eaeaea;
  --nk_gold: #f2b95f;
  --nk_line: rgba(255, 255, 255, 0.14);
  --nk_muted: #b9b9b9;
  --nk_rose: #e36d8a;
  --nk_teal: #76dbc1;
  --nk_violet: #a76fe2;
  --sg_accent: var(--gl_green);
  --sg_faint: #9a9a9a;
  --sg_fg: #eaeaea;
  --sg_flat: #6978e7;
  --sg_line: rgba(255, 255, 255, 0.14);
  --sg_muted: #b9b9b9;
  --sg_rising: #e2856e;
  --th_fg: #eaeaea;
  --th_itax: #d97b78;
  --th_line: rgba(255, 255, 255, 0.14);
  --th_muted: #b9b9b9;
  --th_rtax: #76a2db;
  --th_social: #f0ac61;
  --th_take: #6fe1ba;
  --th_take_dk: #65ebc0;
}