@charset "UTF-8";
@property --fy {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
:root {
  color-scheme: dark;
  --fire: 0.8;
  --bg: #040817;
  --ink: #efe6d2;
  --ink_soft: #d6cdb9;
  --muted: #aba393;
  --line: rgba(255, 236, 200, 0.16);
  --olive: #cdd6a0;
  --khaki: #dcc293;
  --ember: #e8742f;
  --ember_hi: #ffa25f;
  --ember_glow: rgba(255, 130, 50, 0.45);
  --paper: #f3e9d2;
  --paper_2: #eadcbf;
  --paper_ink: #2a2217;
  --paper_soft: #4b3f2d;
  --paper_muted: #6c5f48;
  --paper_line: #d9c9a6;
  --paper_ember: #b54a14;
  --paper_olive: #4b5a2e;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ember_hi);
  text-underline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ember_hi);
  outline-offset: 3px;
}

.gb_inner {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}
@media (max-width: 640px) {
  .gb_inner {
    width: calc(100% - 32px);
  }
}

/* ---------- 背景：星空と焚き火の写真（canvas）＋一晩の色 ---------- */
.gb_scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.03);
  pointer-events: none;
}

.gb_night {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 170, 120, calc(var(--dawn, 0) * 0.32)) 0%, rgba(160, 110, 190, calc(var(--dawn, 0) * 0.22)) 30%, transparent 62%), linear-gradient(to bottom, rgba(255, 120, 60, calc(var(--dusk, 1) * 0.1)), transparent 50%), linear-gradient(to bottom, rgba(3, 6, 16, calc(var(--dim, 0) * 0.82)), rgba(3, 6, 16, calc(var(--dim, 0) * 0.6)));
}

main,
.gb_footer {
  position: relative;
  z-index: 1;
}

/* ---------- ボタン ---------- */
.gb_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1.5px solid var(--ember);
  border-radius: 999px;
  background: var(--ember);
  color: #fff8ee;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px var(--ember_glow), 0 0 calc(var(--fire) * 24px) rgba(255, 130, 50, calc(var(--fire) * 0.35));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, box-shadow 0.3s;
}
.gb_btn:hover {
  background: #f0843f;
  transform: translateY(-2px);
}

.gb_btn_ghost {
  background: rgba(4, 8, 23, 0.4);
  color: var(--ink);
  border-color: rgba(255, 236, 200, 0.5);
  box-shadow: none;
}
.gb_btn_ghost:hover {
  background: rgba(255, 236, 200, 0.12);
}

.gb_btn_small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

/* ---------- ヘッダー ---------- */
.gb_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(3, 6, 16, 0.85), rgba(3, 6, 16, 0.55));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.gb_header_inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.gb_logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.gb_logo span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb_logo_mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, #ffd08a 0, var(--ember) 45%, rgba(232, 116, 47, 0) 72%);
  box-shadow: 0 0 calc(var(--fire) * 16px) rgba(255, 140, 60, 0.7);
}

.gb_clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .gb_clock {
    display: none;
  }
}

.gb_clock_label {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.2em;
}

.gb_clock_time {
  min-width: 3.2em;
  color: var(--ember_hi);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 140, 60, 0.6);
}

@media (max-width: 640px) {
  .gb_header .gb_btn {
    margin-left: auto;
  }
}

.gb_progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff6a1f, #ffd08a);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  box-shadow: 0 0 10px rgba(255, 140, 60, 0.8);
}

/* ---------- ヒーロー ---------- */
.gb_hero {
  position: relative;
  min-height: 100svh;
  padding: 120px 0 120px;
}
@media (max-width: 900px) {
  .gb_hero {
    padding: 104px 0 96px;
  }
}

.gb_hero_inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .gb_hero_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

.gb_eyebrow {
  color: var(--khaki);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 15px;
  letter-spacing: 0.24em;
}

.gb_brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.gb_brand_mark {
  width: 64px;
  height: auto;
  aspect-ratio: 512/440;
  object-fit: contain;
  filter: drop-shadow(0 0 calc(var(--fire) * 14px) rgba(255, 150, 70, 0.45));
}

.gb_brand_sub {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.gb_brand_sub span:first-child {
  color: var(--ink);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.gb_brand_sub span:last-child {
  color: var(--muted);
  font-size: 13px;
}

.gb_title {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.gb_title_en {
  display: block;
  background: linear-gradient(to top, #ffb070 0%, #ffe2b8 calc(18% + var(--fire) * 14%), #f6efe0 62%, #c9c4d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: clamp(64px, 10vw, 136px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.03em;
  filter: drop-shadow(0 calc(var(--fire) * 6px) calc(var(--fire) * 28px) rgba(255, 120, 40, 0.42));
}

.gb_title_sub {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.55;
  word-break: auto-phrase;
  text-wrap: balance;
}

.gb_lead {
  margin-top: 22px;
  max-width: 34em;
  color: var(--ink_soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

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

.gb_hero_note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.gb_hang {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

.gb_hang_cord {
  width: 2px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(220, 194, 147, 0), #b9ab82);
}
@media (max-width: 900px) {
  .gb_hang_cord {
    height: 32px;
  }
}

.gb_ticket {
  position: relative;
  isolation: isolate;
  color: var(--paper_ink);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 calc(var(--fire) * 26px) rgba(255, 130, 50, calc(var(--fire) * 0.16)));
}
.gb_ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image: radial-gradient(130% 70% at 50% 118%, rgba(255, 150, 70, calc(var(--fire) * 0.34)), transparent 68%), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(120, 80, 30, 0.22) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(calc(0%) 3px, calc(5%) 4px, calc(10%) 1px, calc(15%) 3px, calc(20%) 3px, calc(25%) 1px, calc(30%) 4px, calc(35%) 4px, calc(40%) 4px, calc(45%) 1px, calc(50%) 1px, calc(55%) 4px, calc(60%) 1px, calc(65%) 1px, calc(70%) 4px, calc(75%) 1px, calc(80%) 1px, calc(85%) 4px, calc(90%) 4px, calc(95%) 1px, calc(100%) 1px, calc(100% - 1px) 5%, calc(100% - 1px) 10%, calc(100% - 2px) 15%, calc(100% - 2px) 20%, calc(100% - 2px) 25%, calc(100% - 1px) 30%, calc(100% - 2px) 35%, calc(100% - 2px) 40%, calc(100% - 2px) 45%, calc(100% - 4px) 50%, calc(100% - 1px) 55%, calc(100% - 4px) 60%, calc(100% - 3px) 65%, calc(100% - 3px) 70%, calc(100% - 4px) 75%, calc(100% - 1px) 80%, calc(100% - 2px) 85%, calc(100% - 4px) 90%, calc(100% - 4px) 95%, calc(100% - 3px) 100%, 100% calc(100% - 3px), 95% calc(100% - 2px), 90% calc(100% - 4px), 85% calc(100% - 2px), 80% calc(100% - 1px), 75% calc(100% - 2px), 70% calc(100% - 3px), 65% calc(100% - 4px), 60% calc(100% - 1px), 55% calc(100% - 2px), 50% calc(100% - 1px), 45% calc(100% - 2px), 40% calc(100% - 2px), 35% calc(100% - 2px), 30% calc(100% - 3px), 25% calc(100% - 4px), 20% calc(100% - 4px), 15% calc(100% - 2px), 10% calc(100% - 1px), 5% calc(100% - 2px), 0% calc(100% - 2px), 1px 100%, 4px 95%, 4px 90%, 4px 85%, 1px 80%, 2px 75%, 1px 70%, 1px 65%, 4px 60%, 3px 55%, 4px 50%, 2px 45%, 2px 40%, 3px 35%, 1px 30%, 3px 25%, 4px 20%, 3px 15%, 3px 10%, 4px 5%);
}
.gb_ticket {
  width: min(380px, 100%);
  margin-top: -18px;
  padding: 44px 30px 30px;
  transform: rotate(var(--sw, 0deg));
  transform-origin: 50% 0;
  will-change: transform;
}
@media (max-width: 640px) {
  .gb_ticket {
    padding: 40px 20px 24px;
  }
}

.gb_ticket_hole,
.gb_tag_hole {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: #1a140c;
  box-shadow: 0 0 0 4px #c8b588, inset 0 2px 3px rgba(0, 0, 0, 0.7);
}

.gb_ticket_head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper_muted);
  font-size: 13px;
  white-space: nowrap;
}

.gb_ticket_no {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--paper_ink);
  color: #f3e3bd;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.gb_ticket_sample {
  margin-left: auto;
  padding: 0 8px;
  border: 1px solid var(--paper_line);
  border-radius: 4px;
  font-size: 12px;
}

.gb_ticket_name {
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--paper_line);
  font-size: 22px;
  font-weight: 700;
}

.gb_ticket_rows {
  margin-top: 6px;
}

.gb_ticket_row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(120, 90, 40, 0.18);
}
.gb_ticket_row dt {
  display: flex;
  flex-direction: column;
  color: var(--paper_soft);
  font-size: 14px;
  line-height: 1.5;
}
.gb_ticket_row dt small {
  color: var(--paper_muted);
  font-size: 12px;
}
.gb_ticket_row dd {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}

.gb_ticket_total dd {
  color: var(--paper_ember);
}

.gb_tally {
  width: 104px;
  height: 22px;
  margin-right: 6px;
}
.gb_tally path {
  fill: none;
  stroke: var(--paper_ember);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.16s ease-out;
}
.gb_tally path.is_on {
  stroke-dashoffset: 0;
}

.gb_ticket_per {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  font-weight: 700;
}
.gb_ticket_per b {
  color: var(--paper_ember);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(var(--fire) * 18px) rgba(255, 120, 40, 0.35);
}

.js_on ._gbInk {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js_on ._gbInk.is_inked {
  clip-path: inset(-6px -6px -6px -6px);
}

.gb_scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink_soft);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
@media (max-width: 900px) {
  .gb_scroll {
    display: none;
  }
}

.gb_scroll_line {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(255, 236, 200, 0.25);
}
.gb_scroll_line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 1px;
  height: 50%;
  background: var(--ember_hi);
  animation: gb_drop 1.8s ease-in-out infinite;
}

@keyframes gb_drop {
  to {
    top: 100%;
  }
}
/* ---------- 節の共通 ---------- */
.gb_sec {
  position: relative;
  padding: 120px 0;
}
@media (max-width: 900px) {
  .gb_sec {
    padding: 88px 0;
  }
}
@media (max-width: 640px) {
  .gb_sec {
    padding: 72px 0;
  }
}

.gb_sec_no {
  color: var(--ember_hi);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.gb_sec_no::before {
  content: "No.";
  margin-right: 4px;
  color: var(--muted);
  font-size: 14px;
}

.gb_sec_title {
  margin-top: 8px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 calc(var(--fire) * 30px) rgba(255, 120, 40, 0.18);
}

.gb_sec_lead {
  max-width: 44em;
  margin-top: 20px;
  color: var(--ink_soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.gb_sheet {
  position: relative;
  isolation: isolate;
  color: var(--paper_ink);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 calc(var(--fire) * 26px) rgba(255, 130, 50, calc(var(--fire) * 0.16)));
}
.gb_sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image: radial-gradient(130% 70% at 50% 118%, rgba(255, 150, 70, calc(var(--fire) * 0.34)), transparent 68%), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(120, 80, 30, 0.22) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(calc(0%) 3px, calc(4.1666666667%) 2px, calc(8.3333333333%) 4px, calc(12.5%) 2px, calc(16.6666666667%) 3px, calc(20.8333333333%) 2px, calc(25%) 1px, calc(29.1666666667%) 4px, calc(33.3333333333%) 1px, calc(37.5%) 2px, calc(41.6666666667%) 3px, calc(45.8333333333%) 2px, calc(50%) 4px, calc(54.1666666667%) 3px, calc(58.3333333333%) 2px, calc(62.5%) 2px, calc(66.6666666667%) 2px, calc(70.8333333333%) 4px, calc(75%) 1px, calc(79.1666666667%) 3px, calc(83.3333333333%) 2px, calc(87.5%) 1px, calc(91.6666666667%) 3px, calc(95.8333333333%) 2px, calc(100%) 4px, calc(100% - 2px) 4.1666666667%, calc(100% - 3px) 8.3333333333%, calc(100% - 3px) 12.5%, calc(100% - 2px) 16.6666666667%, calc(100% - 1px) 20.8333333333%, calc(100% - 2px) 25%, calc(100% - 1px) 29.1666666667%, calc(100% - 1px) 33.3333333333%, calc(100% - 4px) 37.5%, calc(100% - 3px) 41.6666666667%, calc(100% - 2px) 45.8333333333%, calc(100% - 4px) 50%, calc(100% - 3px) 54.1666666667%, calc(100% - 1px) 58.3333333333%, calc(100% - 4px) 62.5%, calc(100% - 1px) 66.6666666667%, calc(100% - 1px) 70.8333333333%, calc(100% - 1px) 75%, calc(100% - 3px) 79.1666666667%, calc(100% - 1px) 83.3333333333%, calc(100% - 2px) 87.5%, calc(100% - 4px) 91.6666666667%, calc(100% - 3px) 95.8333333333%, calc(100% - 2px) 100%, 100% calc(100% - 4px), 95.8333333333% calc(100% - 1px), 91.6666666667% calc(100% - 3px), 87.5% calc(100% - 1px), 83.3333333333% calc(100% - 3px), 79.1666666667% calc(100% - 1px), 75% calc(100% - 4px), 70.8333333333% calc(100% - 2px), 66.6666666667% calc(100% - 1px), 62.5% calc(100% - 1px), 58.3333333333% calc(100% - 1px), 54.1666666667% calc(100% - 1px), 50% calc(100% - 3px), 45.8333333333% calc(100% - 4px), 41.6666666667% calc(100% - 2px), 37.5% calc(100% - 4px), 33.3333333333% calc(100% - 1px), 29.1666666667% calc(100% - 4px), 25% calc(100% - 3px), 20.8333333333% calc(100% - 4px), 16.6666666667% calc(100% - 2px), 12.5% calc(100% - 4px), 8.3333333333% calc(100% - 4px), 4.1666666667% calc(100% - 4px), 0% calc(100% - 2px), 2px 100%, 4px 95.8333333333%, 3px 91.6666666667%, 2px 87.5%, 4px 83.3333333333%, 2px 79.1666666667%, 4px 75%, 2px 70.8333333333%, 3px 66.6666666667%, 2px 62.5%, 3px 58.3333333333%, 3px 54.1666666667%, 4px 50%, 2px 45.8333333333%, 1px 41.6666666667%, 3px 37.5%, 1px 33.3333333333%, 3px 29.1666666667%, 1px 25%, 4px 20.8333333333%, 4px 16.6666666667%, 4px 12.5%, 3px 8.3333333333%, 3px 4.1666666667%);
}
.gb_sheet {
  padding: 32px;
  color-scheme: light;
}
@media (max-width: 640px) {
  .gb_sheet {
    padding: 24px 20px;
  }
}

.gb_sub_title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.5;
}

.gb_sub_text {
  margin-top: 14px;
  color: var(--paper_soft);
}

.gb_sample_note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.gb_sheet .gb_sample_note {
  color: var(--paper_muted);
}

.gb_caution {
  max-width: 50em;
  margin-top: 20px;
  padding-left: 14px;
  border-left: 2px solid var(--ember);
  color: var(--ink_soft);
  font-size: 14px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---------- 01 荷札のカタログ ---------- */
.gb_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.gb_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 236, 200, 0.35);
  border-radius: 999px;
  background: rgba(4, 8, 23, 0.55);
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gb_chip span {
  color: var(--muted);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
}
.gb_chip[aria-pressed=true] {
  border-color: var(--ember);
  background: rgba(232, 116, 47, 0.24);
  box-shadow: 0 0 18px rgba(255, 130, 50, 0.35);
}
.gb_chip[aria-pressed=true] span {
  color: var(--ember_hi);
}

.gb_line {
  --row_h: 286px;
  margin-top: 28px;
}
@media (max-width: 640px) {
  .gb_line {
    --row_h: 250px;
  }
}

.gb_tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--row_h);
  column-gap: 20px;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(220, 194, 147, 0.75) 6px 8px, transparent 8px var(--row_h));
}
@media (max-width: 900px) {
  .gb_tags {
    column-gap: 12px;
  }
}
@media (max-width: 640px) {
  .gb_tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gb_tag {
  position: relative;
  isolation: isolate;
  color: var(--paper_ink);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 calc(var(--fire) * 26px) rgba(255, 130, 50, calc(var(--fire) * 0.16)));
}
.gb_tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image: radial-gradient(130% 70% at 50% 118%, rgba(255, 150, 70, calc(var(--fire) * 0.34)), transparent 68%), radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(120, 80, 30, 0.22) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(calc(0%) 3px, calc(7.1428571429%) 3px, calc(14.2857142857%) 2px, calc(21.4285714286%) 2px, calc(28.5714285714%) 3px, calc(35.7142857143%) 3px, calc(42.8571428571%) 1px, calc(50%) 3px, calc(57.1428571429%) 3px, calc(64.2857142857%) 1px, calc(71.4285714286%) 3px, calc(78.5714285714%) 2px, calc(85.7142857143%) 1px, calc(92.8571428571%) 3px, calc(100%) 3px, calc(100% - 2px) 7.1428571429%, calc(100% - 2px) 14.2857142857%, calc(100% - 3px) 21.4285714286%, calc(100% - 1px) 28.5714285714%, calc(100% - 3px) 35.7142857143%, calc(100% - 3px) 42.8571428571%, calc(100% - 2px) 50%, calc(100% - 1px) 57.1428571429%, calc(100% - 2px) 64.2857142857%, calc(100% - 1px) 71.4285714286%, calc(100% - 1px) 78.5714285714%, calc(100% - 2px) 85.7142857143%, calc(100% - 3px) 92.8571428571%, calc(100% - 2px) 100%, 100% calc(100% - 1px), 92.8571428571% calc(100% - 3px), 85.7142857143% calc(100% - 2px), 78.5714285714% calc(100% - 3px), 71.4285714286% calc(100% - 1px), 64.2857142857% calc(100% - 3px), 57.1428571429% calc(100% - 1px), 50% calc(100% - 3px), 42.8571428571% calc(100% - 1px), 35.7142857143% calc(100% - 1px), 28.5714285714% calc(100% - 1px), 21.4285714286% calc(100% - 2px), 14.2857142857% calc(100% - 2px), 7.1428571429% calc(100% - 2px), 0% calc(100% - 3px), 1px 100%, 2px 92.8571428571%, 1px 85.7142857143%, 3px 78.5714285714%, 3px 71.4285714286%, 1px 64.2857142857%, 1px 57.1428571429%, 1px 50%, 1px 42.8571428571%, 3px 35.7142857143%, 1px 28.5714285714%, 1px 21.4285714286%, 3px 14.2857142857%, 2px 7.1428571429%);
}
.gb_tag {
  display: flex;
  flex-direction: column;
  align-self: start;
  margin-top: 36px;
  padding: 40px 18px 18px;
  min-height: 220px;
  transform: rotate(var(--sw, 0deg)) rotateY(var(--fy));
  transform-origin: 50% -30px;
  transition: --fy 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s, filter 0.6s;
  will-change: transform;
}
@media (max-width: 640px) {
  .gb_tag {
    min-height: 190px;
    padding: 36px 12px 14px;
  }
}
.gb_tag::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 2px;
  height: 44px;
  margin-left: -1px;
  background: #b9ab82;
}
.gb_tag.is_off {
  --fy: 180deg;
  opacity: 0.28;
}

.gb_tag_no {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper_ember);
}
@media (max-width: 640px) {
  .gb_tag_no {
    font-size: 24px;
  }
}

.gb_tag_cat {
  margin-top: 8px;
  color: var(--paper_muted);
  font-size: 12px;
}

.gb_tag_name {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .gb_tag_name {
    font-size: 15px;
  }
}

.gb_tag_spec {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 2px dashed var(--paper_line);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gb_tag_spec {
    font-size: 16px;
  }
}

.gb_fields {
  margin-top: 40px;
}

.gb_field_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.gb_field_list li {
  padding: 4px 14px;
  border: 1px solid var(--paper_line);
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.55);
  color: var(--paper_soft);
  font-size: 14px;
}

/* ---------- 02 楽天で探す ---------- */
.gb_rk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .gb_rk {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gb_rk_label {
  color: var(--paper_muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gb_rk_box {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 16px;
  border: 2px solid var(--paper_ink);
  border-radius: 10px;
  background: #fbf5e7;
  font-size: 16px;
}

.gb_caret {
  width: 2px;
  height: 22px;
  margin-left: 2px;
  background: var(--paper_ember);
  animation: gb_blink 1s steps(2) infinite;
}

@keyframes gb_blink {
  50% {
    opacity: 0;
  }
}
.gb_rk_results {
  margin-top: 12px;
}

.gb_rk_item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, box-shadow 0.3s;
}
.gb_rk_item b {
  font-weight: 500;
}
.gb_rk_item span {
  color: var(--paper_muted);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 18px;
  white-space: nowrap;
}
.js_on .gb_rk_item:not(.is_show) {
  opacity: 0;
  transform: translateY(8px);
}
.gb_rk_item.is_pick {
  background: rgba(232, 116, 47, 0.16);
  box-shadow: inset 0 0 0 2px var(--paper_ember);
}

.gb_rk_fields {
  margin-top: 10px;
}
.gb_rk_fields div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid rgba(120, 90, 40, 0.18);
}
.gb_rk_fields dt {
  color: var(--paper_muted);
  font-size: 14px;
}
.gb_rk_fields dd {
  position: relative;
  min-height: 1.6em;
  font-weight: 700;
  transition: color 0.6s;
}
.gb_rk_fields dd.is_lit {
  animation: gb_ignite 1.2s ease-out;
}

@keyframes gb_ignite {
  0% {
    color: #ff7a2a;
    text-shadow: 0 0 14px rgba(255, 140, 60, 0.9);
  }
  100% {
    color: var(--paper_ink);
    text-shadow: none;
  }
}
.gb_rk_form .gb_btn {
  margin-top: 18px;
  color: var(--paper_ink);
  border-color: var(--paper_ink);
  background: transparent;
}

/* ---------- 03 手数料と手取り ---------- */
.gb_fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .gb_fee {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.gb_fee_field + .gb_fee_field {
  margin-top: 20px;
}

.gb_fee_label {
  display: block;
  padding: 0;
  color: var(--paper_muted);
  font-size: 14px;
  font-weight: 700;
}

.gb_fee_value {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.gb_fee_value small {
  margin-left: 4px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 14px;
}

.gb_range {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gb_range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--paper_ember) var(--v, 50%), var(--paper_line) var(--v, 50%));
}
.gb_range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--paper_ember) var(--v, 50%), var(--paper_line) var(--v, 50%));
}
.gb_range::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid #fff3dd;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #ffd08a, #e8742f 60%, #9a3a0c);
  box-shadow: 0 0 14px rgba(255, 130, 50, 0.8);
  -webkit-appearance: none;
  appearance: none;
}
.gb_range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff3dd;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #ffd08a, #e8742f 60%, #9a3a0c);
  box-shadow: 0 0 14px rgba(255, 130, 50, 0.8);
}

.gb_fee_where {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.gb_fee_where legend {
  width: 100%;
  margin-bottom: 8px;
}

.gb_where {
  position: relative;
  cursor: pointer;
}
.gb_where input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.gb_where span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1.5px solid var(--paper_line);
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.6);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.3s, background-color 0.3s;
}
.gb_where small {
  color: var(--paper_muted);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 15px;
}
.gb_where input:checked + span {
  border-color: var(--paper_ember);
  background: rgba(232, 116, 47, 0.16);
  color: var(--paper_ember);
}
.gb_where input:focus-visible + span {
  outline: 3px solid var(--paper_ember);
  outline-offset: 2px;
}

.gb_fee_bar {
  position: relative;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: repeating-linear-gradient(115deg, rgba(255, 120, 40, 0.12) 0 6px, transparent 6px 14px), radial-gradient(120% 140% at 100% 50%, #3a1a0a, #120a06 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.gb_fee_net {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--net, 82%);
  background: linear-gradient(90deg, #f7ecd2, #efdcb4);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 40, 0.25);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.gb_fee_edge {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: var(--net, 82%);
  width: 18px;
  margin-left: -9px;
  background: radial-gradient(50% 50% at 50% 50%, #fff2c6 0, #ff9a3c 35%, rgba(232, 80, 20, 0) 75%);
  filter: blur(1px);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  animation: gb_flicker 0.18s steps(2) infinite alternate;
}

@keyframes gb_flicker {
  to {
    opacity: 0.7;
    transform: scaleY(0.9);
  }
}
.gb_fee_rows {
  margin-top: 16px;
}
.gb_fee_rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(120, 90, 40, 0.18);
}
.gb_fee_rows dt {
  color: var(--paper_soft);
  font-size: 14px;
}
.gb_fee_rows dd {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gb_fee_total dd {
  color: var(--paper_olive);
  font-size: 36px;
}

.gb_fee_cost dd {
  color: var(--paper_ember);
}

.gb_fee_sr,
.gb_trip_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gb_fee_more {
  max-width: 44em;
  color: var(--ink_soft);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---------- 04 キャンプの記録と1回あたり ---------- */
.gb_trip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .gb_trip {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gb_trip_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
@media (max-width: 640px) {
  .gb_trip_table {
    font-size: 13px;
  }
}
.gb_trip_table th,
.gb_trip_table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(120, 90, 40, 0.2);
  text-align: left;
}
@media (max-width: 640px) {
  .gb_trip_table th,
  .gb_trip_table td {
    padding: 10px 4px;
  }
}
.gb_trip_table thead th,
.gb_trip_table thead .gb_num {
  color: var(--paper_muted);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gb_trip_table thead th,
  .gb_trip_table thead .gb_num {
    font-size: 11px;
    white-space: normal;
  }
}
@media (max-width: 640px) {
  .gb_trip_table .gb_trip_cost {
    display: none;
  }
}
.gb_trip_table tbody th {
  font-weight: 700;
}
.gb_trip_table tbody th small {
  display: block;
  color: var(--paper_muted);
  font-size: 12px;
  font-weight: 400;
}
.gb_trip_table .gb_num {
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .gb_trip_table .gb_num {
    font-size: 16px;
  }
}

.gb_trip_cap {
  margin-bottom: 8px;
  color: var(--paper_soft);
  font-size: 14px;
  text-align: left;
}

.gb_trip_per {
  color: var(--paper_ember);
  transition: text-shadow 0.4s;
}
.gb_trip_per.is_drop {
  animation: gb_ignite 1.1s ease-out;
}

.gb_trip_sold {
  color: var(--paper_muted);
}

.gb_badge {
  display: inline-block;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--paper_olive);
  color: #f5f2e8;
  font-size: 12px;
  white-space: nowrap;
}

.gb_check {
  width: 22px;
  height: 22px;
  accent-color: var(--paper_ember);
  cursor: pointer;
}

.gb_trip_ops {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
}
.gb_trip_ops .gb_btn_ghost {
  color: var(--paper_ink);
  border-color: var(--paper_ink);
  background: transparent;
}

.gb_trip_count {
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
@media (max-width: 1024px) {
  .gb_trip_count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
}

.gb_trip_count_label {
  color: var(--ink_soft);
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gb_trip_tally {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-top: 8px;
}
@media (max-width: 1024px) {
  .gb_trip_tally {
    width: 180px;
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .gb_trip_tally {
    width: 132px;
  }
}
.gb_trip_tally path {
  fill: none;
  stroke: var(--ember_hi);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(255, 130, 50, 0.8));
  transition: stroke-dashoffset 0.35s ease-out;
}
.gb_trip_tally path.is_on {
  stroke-dashoffset: 0;
}

.gb_trip_count_num {
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gb_trip_count_num b {
  margin-right: 4px;
  color: var(--ember_hi);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.gb_money_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .gb_money_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .gb_money_list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gb_money_item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px;
}
.gb_money_item b {
  font-size: 17px;
}
.gb_money_item span {
  color: var(--paper_soft);
  font-size: 14px;
}

/* ---------- 05 手放す候補（灰に火が戻る） ---------- */
.gb_ash_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .gb_ash_list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gb_ash {
  position: relative;
  padding: 28px 26px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #2b2a29;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .68 0 0 0 0 .64 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #3a3836, #232220);
  color: #b9b4ab;
  outline-offset: 4px;
  transition: color 0.8s, box-shadow 0.8s;
  cursor: default;
}
.gb_ash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 50% 115%, rgba(255, 150, 60, 0.95), rgba(232, 90, 20, 0.55) 35%, rgba(60, 20, 5, 0) 70%), linear-gradient(to bottom, #3b2618, #1d120b);
  opacity: 0;
  transition: opacity 0.9s;
}
.gb_ash::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffb15a, #fff0c0, #ffb15a, transparent);
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 16px #ff8a3c;
}
.gb_ash > * {
  position: relative;
}
.gb_ash.is_lit {
  color: #fff1dc;
  box-shadow: 0 20px 50px -20px rgba(255, 120, 40, 0.7);
}
.gb_ash.is_lit::before {
  opacity: 1;
}
.gb_ash.is_lit::after {
  transform: scaleX(1);
}
.gb_ash.is_lit .gb_ash_en {
  color: #ffd08a;
}

.gb_ash_en {
  color: #8d877e;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  transition: color 0.8s;
}

.gb_ash_title {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
}

.gb_ash_text {
  margin-top: 10px;
  font-size: 15px;
}

.gb_ash_row {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed currentColor;
  font-size: 14px;
}
.gb_ash_row b {
  font-size: 16px;
}

.gb_market {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label chips" "text text";
  gap: 8px 16px;
  align-items: center;
  margin-top: 36px;
}
.gb_market .gb_sub_text {
  grid-area: text;
  max-width: 44em;
  color: var(--ink_soft);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
@media (max-width: 640px) {
  .gb_market {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "chips" "text";
  }
}

.gb_market_label {
  grid-area: label;
  font-weight: 700;
  white-space: nowrap;
}

.gb_market_chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gb_market_chips span {
  padding: 4px 16px;
  border: 1px solid rgba(255, 236, 200, 0.4);
  border-radius: 999px;
  background: rgba(4, 8, 23, 0.55);
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- 06 始め方（マッチを擦るように番号が灯る） ---------- */
.gb_steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .gb_steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gb_step {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(4, 8, 23, 0.6);
  backdrop-filter: blur(4px);
}

.gb_step_no {
  position: relative;
  display: inline-block;
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}
.gb_step_no span {
  display: inline-block;
  color: #3b332b;
  transition: color 0.3s;
}
.gb_step_no::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 10px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 220, 160, 0), #fff0c0);
  box-shadow: 0 0 10px #ffb15a;
  opacity: 0;
}
.is_struck .gb_step_no span {
  color: #ffb15a;
  animation: gb_match 2.6s ease-out forwards, gb_burn 1.6s 2.6s ease-in-out infinite alternate;
}
.is_struck .gb_step_no::after {
  animation: gb_strike 0.45s ease-out;
}

@keyframes gb_strike {
  0% {
    width: 0;
    opacity: 1;
  }
  70% {
    width: 70px;
    opacity: 1;
  }
  100% {
    width: 90px;
    opacity: 0;
  }
}
@keyframes gb_match {
  0% {
    color: #fff8e0;
    text-shadow: 0 0 30px #fff0c0, 0 0 60px #ff8a3c;
  }
  100% {
    color: #ffb15a;
    text-shadow: 0 0 calc(var(--fire) * 18px) rgba(255, 130, 50, 0.7);
  }
}
@keyframes gb_burn {
  to {
    text-shadow: 0 0 26px rgba(255, 140, 60, 0.85);
  }
}
.gb_step_name {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
}

.gb_step_text {
  margin-top: 10px;
  color: var(--ink_soft);
  font-size: 15px;
}

.gb_next {
  margin-top: 48px;
}

.gb_next_list {
  margin-top: 14px;
}
.gb_next_list li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px dashed var(--paper_line);
  color: var(--paper_soft);
}
.gb_next_list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid var(--paper_muted);
  border-radius: 50%;
}

/* ---------- 07 預かる情報（ランタンの明かりで読む） ---------- */
.gb_data {
  --lx: 50%;
  --ly: 40%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  padding: 48px;
  border-radius: 8px;
  background: radial-gradient(360px 300px at var(--lx) var(--ly), rgba(255, 200, 130, 0.2), rgba(255, 160, 80, 0.06) 45%, transparent 70%), rgba(4, 8, 23, 0.7);
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .gb_data {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 32px 24px;
  }
}
@media (max-width: 640px) {
  .gb_data {
    padding: 28px 18px;
  }
}

.gb_data_list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--ink_soft);
}
.gb_data_list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 calc(var(--fire) * 12px) rgba(255, 130, 50, 0.9);
}

/* ---------- 最後のボタン ---------- */
.gb_cta {
  position: relative;
  padding: 140px 0 100px;
  text-align: center;
}
@media (max-width: 640px) {
  .gb_cta {
    padding: 96px 0 72px;
  }
}

.gb_cta_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gb_cta_text {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 900;
  line-height: 1.45;
  word-break: auto-phrase;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

.gb_fire_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  min-width: 260px;
  min-height: 76px;
  padding: 0 40px;
  border-radius: 999px;
  background: linear-gradient(to top, #c4531b, #e8742f 55%, #f39a52);
  color: #fff8ee;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 18px 40px -14px rgba(255, 110, 30, 0.9), 0 0 calc(30px + var(--heat, 0) * 50px) rgba(255, 130, 50, calc(0.35 + var(--heat, 0) * 0.5));
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.gb_fire_btn:hover {
  transform: scale(1.05);
}

.gb_fire_btn_glow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 50%;
  height: calc(20px + var(--heat, 0) * 70px);
  border-radius: 50% 50% 20% 20%;
  background: radial-gradient(60% 100% at 50% 100%, #fff1c4 0, #ffb04a 30%, rgba(255, 100, 20, 0.6) 55%, rgba(255, 80, 10, 0) 80%);
  filter: blur(6px);
  opacity: calc(0.25 + var(--heat, 0) * 0.75);
  transform-origin: 50% 100%;
  animation: gb_flame 0.3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes gb_flame {
  to {
    transform: scaleY(1.12) scaleX(0.94) skewX(2deg);
  }
}
.gb_fire_btn_text {
  position: relative;
}

.gb_free {
  margin-top: 20px;
  color: var(--ink_soft);
}

.gb_guide {
  margin-top: 12px;
}
.gb_guide a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ember_hi);
  font-weight: 700;
  text-underline-offset: 4px;
}

.gb_ai_note {
  margin-top: 28px;
  color: var(--muted);
  font-size: 14px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---------- 受託への入口 ---------- */
.gb_order {
  position: relative;
  z-index: 1;
  padding: 0 0 100px;
}

.gb_order_body {
  max-width: 820px;
  margin-inline: auto;
  padding: 44px 48px;
}
@media (max-width: 640px) {
  .gb_order_body {
    padding: 32px 22px;
  }
}

.gb_order_label {
  color: var(--paper_ember);
  font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.gb_order_title {
  margin-top: 8px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.5;
  word-break: auto-phrase;
  text-wrap: balance;
}

.gb_order_text {
  margin-top: 14px;
  color: var(--paper_soft);
}

.gb_order_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.gb_order_btns .gb_btn_ghost {
  color: var(--paper_ink);
  border-color: var(--paper_ink);
  background: transparent;
}

/* ---------- フッター ---------- */
.gb_footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  background: rgba(3, 6, 16, 0.75);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.gb_footer_credit {
  margin-top: 4px;
  font-size: 12px;
}