/* ============================================================
   Japan Inbound Boost — Main Stylesheet
   ============================================================ */


/* ===== CSS Variables ===== */

:root {
  --black:    #1a2744;
  --off-white:#f5f3ef;
  --warm:     #faf9f6;
  --gold:     #c8a96e;
  --gold-dark:#9a7a42;
  --gray:     #6b6b6b;
  --light:    #e8e5df;
  --border:   #d4cfc6;
  --text:     #1a1a1a;
}


/* ===== Reset ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--warm);
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--warm);
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
}


/* ===== Navigation ===== */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(250, 249, 246, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 32px;
}

.nav-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--black);
  white-space: nowrap;
  cursor: pointer;
}

.nav-logo span {
  color: var(--gold);
}

.nav-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.tab-btn {
  background: none;
  border: none;
  padding: 8px 18px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--gray);
  cursor: pointer;
  letter-spacing: .04em;
  border-radius: 2px;
  transition: all .2s;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--black);
}

.tab-btn.active {
  background: var(--black);
  color: #fff;
}

.nav-cta-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  margin-left: auto;
}

.nav-cta-btn:hover {
  background: var(--gold-dark);
}


/* ===== Hamburger Menu ===== */

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  transition: all .3s;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(250, 249, 246, .98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 199;
  flex-direction: column;
  padding: 12px 0;
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile .tab-btn {
  width: 100%;
  text-align: left;
  padding: 14px 24px;
  font-size: 14px;
  border-radius: 0;
}

.nav-mobile .nav-cta-btn {
  margin: 12px 24px 4px;
  width: calc(100% - 48px);
  text-align: center;
  padding: 14px;
}


/* ===== Pages ===== */

.page {
  display: none;
  padding-top: 64px;
  background: var(--warm);
}

.page.active {
  display: block;
}


/* ===== Shared / Utilities ===== */

.section {
  padding: 80px 48px;
}

.inner {
  max-width: 1080px;
  margin: 0 auto;
}

.label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--black);
  letter-spacing: .04em;
  margin-bottom: 16px;
}

.lead {
  font-size: 14px;
  color: var(--gray);
  line-height: 2;
  max-width: 600px;
  margin-bottom: 48px;
}

.divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 16px 0 32px;
}

.btn-dark {
  background: var(--black);
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s;
}

.btn-dark:hover {
  background: var(--gold);
}

.btn-ghost {
  font-size: 13px;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  border-top: none;
  border-left: none;
  border-right: none;
  padding-bottom: 2px;
  background: none;
  cursor: pointer;
  transition: color .2s;
}

.btn-ghost:hover {
  color: var(--black);
}


/* ===== Hero ===== */

#p-top {
  background: var(--warm);
}

.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding: 60px 48px;
  background: var(--warm);
}

.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

.hero-kw {
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-kw::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.hero-h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
  margin-bottom: 24px;
  letter-spacing: .04em;
}

.hero-h1 em {
  font-style: normal;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
}

.hero-sub {
  font-size: 14px;
  color: var(--gray);
  line-height: 2.1;
  margin-bottom: 36px;
  max-width: 460px;
}

.hero-btns {
  display: flex;
  gap: 14px;
  align-items: center;
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-box {
  background: var(--off-white);
  border: 1px solid var(--border);
  padding: 24px 28px;
}

.stat-n {
  font-family: 'DM Serif Display', serif;
  font-size: 38px;
  color: var(--black);
  line-height: 1;
}

.stat-u {
  color: var(--gold);
  font-size: 16px;
}

.stat-d {
  font-size: 11px;
  color: var(--gray);
  margin-top: 4px;
  letter-spacing: .04em;
}


/* ===== Concept Cards ===== */

.con-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.con-card {
  background: var(--black);
  padding: 36px 28px;
}

.con-n {
  font-family: 'DM Serif Display', serif;
  font-size: 52px;
  color: var(--light);
  line-height: 1;
  margin-bottom: 16px;
}

.con-card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 600;
}

.con-card p {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  line-height: 2;
}


/* ===== Steps ===== */

.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: 48px;
}

.steps::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--light);
  align-items: start;
}

.step:last-child {
  border-bottom: none;
}

.step-n {
  width: 52px;
  height: 52px;
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.step.hl .step-n {
  background: var(--gold);
}

.step-tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 8px;
}

.step-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 2;
}

.step-kpi {
  background: var(--off-white);
  border: 1px solid var(--border);
  padding: 16px 20px;
  min-width: 180px;
  font-size: 11px;
  color: var(--gray);
  line-height: 2;
}

.step-kpi strong {
  color: var(--black);
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}


/* ===== Service Page ===== */

.srv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.srv-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  padding: 36px 32px;
  transition: border-color .2s;
}

.srv-card:hover {
  border-color: var(--gold);
}

.srv-ico {
  font-size: 26px;
  margin-bottom: 16px;
}

.srv-card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 10px;
}

.srv-card p {
  font-size: 12px;
  color: var(--gray);
  line-height: 2;
  margin-bottom: 16px;
}

.srv-pts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.srv-pts li {
  font-size: 11px;
  color: var(--gray);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.srv-pts li::before {
  content: '—';
  color: var(--gold);
}

.srv-core-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}


/* ===== Platform Grid ===== */

.plat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
}

.plat {
  background: var(--black);
  padding: 36px 32px;
}

.plat-name {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: #fff;
  margin-bottom: 6px;
}

.plat-sub {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .08em;
  margin-bottom: 20px;
}

.plat-nums {
  display: flex;
  gap: 28px;
  margin-bottom: 20px;
}

.plat-num {
  font-family: 'DM Serif Display', serif;
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}

.plat-nl {
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  margin-top: 3px;
}

.plat p {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  line-height: 2;
}


/* ===== Flow (Customer Journey) ===== */

.flow-row {
  display: flex;
  align-items: stretch;
  margin: 20px 0;
  gap: 0;
  overflow-x: auto;
}

.flow-step {
  flex: 1;
  min-width: 120px;
  background: var(--off-white);
  border: 1px solid var(--border);
  padding: 18px 12px;
  text-align: center;
  position: relative;
}

.flow-step + .flow-step {
  border-left: none;
}

.flow-step::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--border);
  z-index: 3;
}

.flow-step:last-child::after {
  display: none;
}

.flow-step.flow-hl {
  background: var(--black);
}

.flow-step.flow-hl h4 {
  color: #fff;
}

.flow-step.flow-hl p {
  color: rgba(255, 255, 255, .82);
}

.flow-step.flow-hl::after {
  border-left-color: var(--gold);
}

.flow-ico {
  font-size: 20px;
  margin-bottom: 6px;
}

.flow-step-icon-badge {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 8px;
}

.flow-step-badge {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  color: #fff;
}

.flow-step h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
  line-height: 1.5;
}

.flow-step p {
  font-size: 10px;
  color: var(--gray);
  line-height: 1.6;
}

.flow-step-num {
  display: none;
}

/* 縦フロー（サービスページ）内では番号ボックスを表示 */
.svc-flow .flow-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--black);
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.flow-arr {
  display: none;
}


/* ===== Vertical Flow Steps (Service Page) ===== */

.flow-step-v {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--light);
  align-items: start;
  position: relative;
  z-index: 1;
}

.flow-step-body {
  padding-top: 4px;
}

.flow-step-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}

.flow-step-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.9;
}


/* ===== Case Studies ===== */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 48px;
}

.case-card {
  border: 1px solid var(--border);
  background: var(--off-white);
  padding: 28px 24px;
}

.case-tag {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.case-card h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}

.case-measure {
  font-size: 11px;
  color: var(--gray);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.case-big {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: var(--black);
  line-height: 1;
  margin-bottom: 2px;
}

.case-big span {
  color: var(--gold);
}

.case-s {
  font-size: 11px;
  color: var(--gray);
}

.graph-wrap {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.graph-box {
  border: 1px solid var(--border);
  background: var(--off-white);
  padding: 36px 32px;
}

.g-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}

.g-sub {
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 28px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bar-lbl {
  font-size: 11px;
  color: var(--gray);
  width: 130px;
  flex-shrink: 0;
  text-align: right;
}

.bar-track {
  flex: 1;
  height: 22px;
  background: var(--light);
  position: relative;
  overflow: visible;
}

.bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}

.bar-val {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
}

.chart-note {
  font-size: 11px;
  color: var(--gray);
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--warm);
  border-left: 3px solid var(--gold);
}


/* ===== About Page ===== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.abt-tbl {
  width: 100%;
  border-collapse: collapse;
}

.abt-tbl tr {
  border-bottom: 1px solid var(--border);
}

.abt-tbl td {
  padding: 16px 0;
  font-size: 13px;
  vertical-align: top;
}

.abt-tbl td:first-child {
  color: var(--gray);
  width: 120px;
  font-size: 11px;
  letter-spacing: .04em;
  padding-right: 16px;
}

.abt-tbl td:last-child {
  color: var(--black);
}

.ba-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 28px;
}

.ba-col {
  padding: 20px;
}

.ba-col.bef {
  background: var(--light);
}

.ba-col.aft {
  background: var(--black);
}

.ba-lb {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--gray);
  margin-bottom: 12px;
}

.ba-col.aft .ba-lb {
  color: var(--gold);
}

.ba-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ba-list li {
  font-size: 12px;
  color: var(--gray);
  display: flex;
  gap: 7px;
}

.ba-col.aft .ba-list li {
  color: rgba(255, 255, 255, .9);
}

.ba-list li::before {
  content: '·';
  color: var(--gold);
}


/* ===== Contact Page ===== */

.contact-wrap {
  background: var(--black);
  min-height: calc(100vh - 64px);
  padding: 80px 48px;
}

.c-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.c-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.c-ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.5;
}

.c-divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 0 28px;
}

.c-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  line-height: 2.1;
  margin-bottom: 32px;
}

.c-note {
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  line-height: 2;
}

.c-note strong {
  color: rgba(255, 255, 255, .88);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.f-grp {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f-grp label {
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
  text-transform: uppercase;
}

.f-grp label span {
  color: var(--gold);
}

.f-grp input,
.f-grp select,
.f-grp textarea {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  padding: 11px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}

.f-grp input:focus,
.f-grp select:focus,
.f-grp textarea:focus {
  border-color: var(--gold);
}

.f-grp select option {
  background: #1a1a1a;
}

.f-grp textarea {
  resize: vertical;
  min-height: 90px;
}

.chk-grp {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chk-item {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.chk-item input {
  accent-color: var(--gold);
  width: 13px;
  height: 13px;
}

.chk-item span {
  font-size: 12px;
  color: rgba(255, 255, 255, .88);
}

.f-submit {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 16px 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .2s;
  align-self: flex-start;
}

.f-submit:hover {
  background: var(--gold-dark);
}


/* ===== Ticker ===== */

.ticker-w {
  background: var(--gold);
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
}

.ticker {
  display: flex;
  gap: 56px;
  animation: tick 28s linear infinite;
  white-space: nowrap;
}

.ticker-i {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--black);
  text-transform: uppercase;
  flex-shrink: 0;
}

@keyframes tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ===== Footer ===== */

footer {
  background: #0d1b3e;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.f-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  color: rgba(255, 255, 255, .7);
}

.f-logo span {
  color: var(--gold);
}

.f-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, .88);
  letter-spacing: .06em;
}


/* ===== SVG Charts ===== */

svg text {
  font-family: 'Noto Sans JP', sans-serif;
}


/* ============================================================
   Responsive — Mobile ( max-width: 860px )
   ============================================================ */

@media (max-width: 860px) {

  /* NAV */
  nav {
    padding: 0 16px;
    gap: 8px;
  }

  .nav-tabs {
    display: none;
  }

  .nav-cta-btn {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* LAYOUT */
  .section {
    padding: 48px 20px;
  }

  .hero {
    padding: 40px 20px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .hero-stats {
    gap: 2px;
  }

  .stat-box {
    padding: 16px 18px !important;
  }

  /* GRIDS */
  .con-grid,
  .srv-grid,
  .plat-grid,
  .case-grid,
  .about-grid,
  .c-inner,
  .ba-wrap,
  .f-row {
    grid-template-columns: 1fr !important;
  }

  .step {
    grid-template-columns: 52px 1fr;
  }

  .step-kpi {
    grid-column: 1 / -1;
  }

  /* PLATFORM SECTION */
  .inner > div[style*="grid-template-columns:1fr 1px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }

  div[style*="grid-template-columns:1fr 1px 1fr"] > div:nth-child(2) {
    display: none !important;
  }

  div[style*="padding:0 32px 0 0"] {
    padding: 0 0 32px 0 !important;
  }

  div[style*="padding:0 0 0 32px"] {
    padding: 32px 0 0 0 !important;
    border-top: 1px solid var(--border);
  }

  /* SERVICE CORE CARD */
  .srv-core-grid {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1fr 1fr;gap:40px"] {
    grid-template-columns: 1fr !important;
  }

  /* FLOW */
  .flow {
    flex-direction: column;
  }

  .flow-row {
    flex-direction: column;
    overflow-x: visible;
  }

  .flow-step {
    min-width: unset;
  }

  .flow-step + .flow-step {
    border-left: 1px solid var(--border);
    border-top: none;
  }

  .flow-step::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -10px;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--border);
    border-bottom: none;
  }

  .flow-step.flow-hl::after {
    border-top-color: var(--gold);
    border-left-color: transparent;
  }

  .flow-step:last-child::after {
    display: none;
  }

  .flow-arr {
    transform: rotate(90deg);
    padding: 4px 0;
  }

  /* CASES */
  .case-grid {
    grid-template-columns: 1fr !important;
  }

  .graph-box {
    padding: 24px 16px !important;
  }

  /* GROWTH / ABOUT */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .c-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* CONTACT */
  .contact-wrap {
    padding: 48px 20px !important;
  }

  .f-row {
    grid-template-columns: 1fr !important;
  }

  /* AD COST CHART */
  div[style*="grid-template-columns:1fr 1fr;gap:32px"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="display:grid;grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* TICKER */
  .ticker-i {
    font-size: 9px;
  }

  /* FOOTER */
  footer {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 32px 20px;
  }

  /* STEP TIMELINE */
  div[style*="display:flex;justify-content:space-between;position:relative"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px;
  }

  div[style*="width:16.6%"] {
    width: 80% !important;
  }

  div[style*="position:absolute;left:50%"] {
    display: none !important;
  }

  /* SVG CHARTS */
  svg {
    overflow-x: auto;
  }

}


/* ============================================================
   Utility Classes (extracted from inline styles)
   ============================================================ */

/* ===== Hero ===== */
.hero-btns--mb    { margin-bottom: 28px; }

.stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.stat-label__line {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--gold);
}

.stat-box--row    { display: flex; align-items: center; gap: 20px; padding: 20px 24px; }
.stat-num         { font-family: 'DM Serif Display', serif; font-size: 56px; color: var(--black); line-height: 1; flex-shrink: 0; }
.stat-num__unit   { font-size: 24px; color: var(--gold); }
.stat-ttl         { font-size: 13px; font-weight: 500; color: var(--black); margin-bottom: 2px; }
.stat-sub         { font-size: 11px; color: var(--gold); }

/* ===== Platform section ===== */
.section--platform {
  padding: 48px;
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
}
.platform-hd      { text-align: center; margin-bottom: 32px; }
.label--center    { justify-content: center; }
.platform-hd__sub { font-size: 13px; color: var(--gray); }

.platform-grid    { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: start; }
.platform-col     { padding: 0 32px 0 0; text-align: center; }
.platform-col--domestic { padding: 0 0 0 32px; text-align: center; }
.platform-col__ttl{
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 20px;
  font-family: 'Space Mono', monospace;
}
.platform-col--domestic .platform-col__ttl { color: var(--black); }
.platform-divider { background: var(--border); align-self: stretch; }
.platform-icons   { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.app-icon         { text-align: center; }
.app-icon__img    {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
}
.app-icon__lbl    { font-size: 12px; color: var(--gray); }

/* specific app icon bg colours */
.app-icon__img--red       { background: #FF2442; font-size: 24px; font-weight: 900; color: #fff; font-family: serif; }
.app-icon__img--dianping  { background: #F7941D; font-size: 11px; font-weight: 700; color: #fff; line-height: 1.3; }
.app-icon__img--bili      { background: #00A1D6; font-size: 12px; font-weight: 700; color: #fff; }
.app-icon__img--ig        { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.app-icon__img--yt        { background: #FF0000; }
.app-icon__img--tiktok    { background: linear-gradient(135deg,#010101 40%,#69C9D0 100%); font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; }
.app-icon__img--naver     { background: #03C75A; }
.app-icon__img--x         { background: #000; border: 1px solid #333; }

.domestic-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--warm);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--gray);
  text-align: left;
}
.domestic-note__em { color: var(--gold); font-weight: 600; }

/* ===== Concept section ===== */
.section--dark    { background: var(--black); }
.label--gold      { color: var(--gold); }
.ttl--white       { color: #fff; }

/* ===== Before / After ===== */
.ba-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-col--before   { background: var(--light); padding: 32px; }
.ba-col--after    { background: var(--black); padding: 32px; }
.ba-label         { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .14em; margin-bottom: 14px; }
.ba-label--before { color: var(--gray); }
.ba-label--after  { color: var(--gold); }
.ba-list--after li{ color: rgba(255,255,255,.9); }

/* ===== Service page core card ===== */
.core-card        { background: var(--black); padding: 40px; margin-bottom: 2px; }
.core-card__kw    { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .16em; color: var(--gold); margin-bottom: 12px; }
.core-card__ttl   { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1.6; }
.core-card__sub   { font-size: 15px; color: rgba(255,255,255,.82); }
.core-card__body  { font-size: 13px; color: rgba(255,255,255,.82); line-height: 2; margin-bottom: 24px; }
.core-card__list  { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.core-card__item  { font-size: 12px; color: rgba(255,255,255,.88); display: flex; gap: 10px; align-items: flex-start; }
.core-card__dash  { color: var(--gold); flex-shrink: 0; }
.core-card__plat-hd { font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 16px; letter-spacing: .06em; }

.plat-group       { margin-bottom: 20px; }
.plat-group__ttl  { font-size: 12px; letter-spacing: .12em; color: var(--gold); margin-bottom: 10px; font-family: 'Space Mono', monospace; }
.plat-group__icons{ display: flex; gap: 8px; flex-wrap: wrap; }

.plat-chip        { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); padding: 8px 12px; display: flex; align-items: center; gap: 7px; }
.plat-chip__icon  { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.plat-chip__lbl   { font-size: 11px; color: rgba(255,255,255,.92); }
.plat-chip__icon--red     { background: #FF2442; font-size: 11px; font-weight: 900; color: #fff; font-family: serif; }
.plat-chip__icon--dianping{ background: #F7941D; font-size: 7px; font-weight: 700; color: #fff; line-height: 1.1; text-align: center; }
.plat-chip__icon--bili    { background: #00A1D6; font-size: 8px; font-weight: 700; color: #fff; }
.plat-chip__icon--naver   { background: #03C75A; }
.plat-chip__icon--ig      { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.plat-chip__icon--x       { background: #000; border: 1px solid rgba(255,255,255,.25); }
.plat-chip__icon--tiktok  { background: linear-gradient(135deg,#010101,#69C9D0); font-size: 7px; font-weight: 700; color: #fff; }

/* ===== Service flow steps (vertical) ===== */
.svc-flow         { display: flex; flex-direction: column; gap: 0; margin-top: 32px; position: relative; }
.svc-flow__line   { position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--border); z-index: 0; }
.svc-flow__num--gold  { background: var(--gold); }
.svc-flow__ttl--gold  { color: var(--gold); }
.flow-step-v--last{ border-bottom: none; }

/* ===== Section headings ===== */
.ttl--sm          { font-size: 22px; }
.section--mt64    { margin-top: 64px; }
.section--mt48    { margin-top: 48px; }
.section--mt32    { margin-top: 32px; }
.text-center      { text-align: center; }

/* ===== Flow label ===== */
.flow-label       { font-size: 14px; color: var(--gray); margin-bottom: 12px; letter-spacing: .06em; }
.flow-label--mt   { margin-top: 40px; margin-bottom: 12px; }

/* ===== Ebica box ===== */
.ebica-box        { margin-top: 32px; background: var(--off-white); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 24px 28px; }
.ebica-box__inner { display: flex; align-items: flex-start; gap: 16px; }
.ebica-box__ico   { font-size: 24px; flex-shrink: 0; }
.ebica-box__kw    { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--gold); margin-bottom: 6px; }
.ebica-box__ttl   { font-family: 'Noto Serif JP', serif; font-size: 15px; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.ebica-box__body  { font-size: 12px; color: var(--gray); line-height: 2; }

/* ===== Case detail boxes ===== */
.case-wrap        { margin-top: 48px; border: 1px solid var(--border); overflow: hidden; }
.case-wrap--mt32  { margin-top: 32px; border: 1px solid var(--border); overflow: hidden; }
.case-card--hd    { border: none; border-bottom: 1px solid var(--border); background: var(--off-white); }
.case-body        { padding: 32px; }
.svg--full        { width: 100%; }

/* ===== Ad cost chart ===== */
.adcost-defs      { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-bottom: 28px; }
.adcost-def       { background: var(--warm); border: 1px solid var(--border); padding: 14px 16px; }
.adcost-def__num  { font-size: 12px; letter-spacing: .1em; color: var(--gold); font-family: 'Space Mono', monospace; margin-bottom: 6px; }
.adcost-def__ttl  { font-size: 14px; color: var(--black); font-weight: 500; margin-bottom: 4px; }
.adcost-def__desc { font-size: 11px; color: var(--gray); line-height: 1.7; }
.adcost-note      { font-size: 12px; color: var(--gray); margin-bottom: 20px; padding: 8px 12px; background: var(--warm); border-left: 3px solid var(--gold); }
.adcost-chart     { position: relative; overflow: hidden; }
.adcost-legend    { display: flex; gap: 24px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.adcost-legend__item     { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--gray); }
.adcost-legend__swatch   { width: 16px; height: 12px; }
.adcost-legend__swatch--grey { background: #cccccc; }
.adcost-legend__swatch--pink { background: #c0516a; }
.adcost-legend__line     { width: 24px; height: 2px; background: #c8a96e; }

/* ===== Growth model steps ===== */
.growth-steps     { display: flex; flex-direction: column; gap: 0; margin-top: 48px; position: relative; }
.growth-steps__line { position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--border); z-index: 0; }
.growth-step      { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--light); align-items: start; position: relative; }
.growth-step--last{ border-bottom: none; }
.growth-step__num {
  width: 54px; height: 54px;
  background: var(--black);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 20px; font-weight: 700;
  z-index: 1; flex-shrink: 0;
}
.growth-step__num--gold { background: var(--gold); }
.growth-step__tag {
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .1em;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 8px;
}
.growth-step__ttl { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.growth-step__body{ font-size: 12px; color: var(--gray); line-height: 2; margin-bottom: 12px; }
.growth-step__box { background: var(--off-white); border: 1px solid var(--border); padding: 12px 16px; font-size: 11px; color: var(--gray); line-height: 2; display: inline-block; }
.growth-step__box--gold { border-color: var(--gold); }
.growth-step__box strong { color: var(--black); display: block; margin-bottom: 2px; }
.gold-text        { color: var(--gold); }

/* ===== About page ===== */
.about-copy__ttl  { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 600; color: var(--black); margin-bottom: 18px; line-height: 1.6; }
.about-copy__body { font-size: 13px; color: var(--gray); line-height: 2.1; margin-bottom: 24px; }

/* ===== Flow badge brand colours ===== */
.flow-step-badge--red      { background: #FF2442; }
.flow-step-badge--dianping { background: #F7941D; font-size: 6px; line-height: 1.1; text-align: center; }
.flow-step-badge--ig       { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.flow-step-badge--x        { background: #000; font-size: 7px; font-weight: 700; }

/* ===== SVG display ===== */
.svg--block { display: block; }

/* ===== Multi-page nav overrides ===== */
/* <a>タグをボタンと同じ見た目に */
.nav-logo a {
  text-decoration: none;
  color: inherit;
}
.nav-logo a:hover {
  color: inherit;
}
a.tab-btn {
  display: inline-block;
  text-decoration: none;
}
a.nav-cta-btn {
  display: inline-block;
  text-decoration: none;
}
.nav-mobile a.tab-btn {
  display: block;
}
a.btn-dark {
  display: inline-block;
  text-decoration: none;
}
a.btn-ghost {
  display: inline-block;
  text-decoration: none;
}