/* =========================
   top-common.css v1
   Design Tokens + Shared Rules
   ========================= */

/* ---------------------------------
   1. Design Tokens
--------------------------------- */
:root {
  /* Typography */
  --font-h1: 56px;
  --font-h2: 40px;
  --font-h3: 24px;
  --font-lead: 20px;
  --font-body: 16px;
  --font-small: 15px;

  --lh-h1: 1.12;
  --lh-h2: 1.2;
  --lh-h3: 1.35;
  --lh-lead: 1.9;
  --lh-body: 1.9;
  --lh-small: 1.8;

  /* Section spacing: L / M / S */
  --section-lg: 96px;
  --section-md: 72px;
  --section-sm: 40px;

  /* Inner spacing */
  --space-heading-bottom: 20px;
  --space-lead-bottom: 28px;
  --space-body-bottom: 18px;
  --space-card-gap: 16px;
  --space-card-padding: 24px;

  /* Containers */
  --container-wide: 1200px;
  --container-main: 1100px;
  --container-narrow: 820px;

  --container-pad-pc: 40px;
  --container-pad-tab: 32px;
  --container-pad-sp: 20px;

  /* Colors */
  --bg-white: #ffffff;
  --bg-muted: #f7f7f7;
  --bg-soft: #fafafa;

  --text-main: #111111;
  --text-sub: #333333;
  --text-soft: #555555;

  --border-soft: #e7e7e7;

  /* Card */
  --card-radius: 16px;

  /* Button */
  --btn-radius: 16px;
  --btn-primary-bg: #0b1220;
  --btn-primary-text: #ffffff;
  --btn-secondary-border: #0b1220;
  --btn-secondary-text: #0b1220;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(11, 18, 32, 0.18);
}

/* ---------------------------------
   2. Shared Container Rules
--------------------------------- */
.gb-inner.inner-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-pc);
  padding-right: var(--container-pad-pc);
  box-sizing: border-box;
}

.gb-inner.inner-main {
  max-width: var(--container-main);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-pc);
  padding-right: var(--container-pad-pc);
  box-sizing: border-box;
}

.gb-inner.inner-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-pc);
  padding-right: var(--container-pad-pc);
  box-sizing: border-box;
}

/* ---------------------------------
   3. Shared Typography Rules
   セクションクラス中心で適用
--------------------------------- */
.hero-title,
.sec-hero h1,
.sec-service-hero h1 {
  font-size: var(--font-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0.01em;
  margin-top: 0;
  margin-bottom: 28px;
  color: var(--text-main);
}

.sec-service-main h2,
.sec-works h2,
.sec-subservices h2,
.sec-service-flow h2,
.sec-service-fit h2,
.sec-cta h2,
.sec-service-hero h2 {
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  margin-top: 0;
  margin-bottom: var(--space-heading-bottom);
  color: var(--text-main);
}

.card h3,
.work-card h3,
.subservice-card h3,
.service-item__title,
.flow-step h3 {
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--text-main);
}

.lead {
  font-size: var(--font-lead);
  line-height: var(--lh-lead);
  margin-top: 0;
  margin-bottom: var(--space-lead-bottom);
  color: var(--text-sub);
}

.sec-hero p,
.sec-service-hero p,
.sec-service-main p,
.sec-works p,
.sec-subservices p,
.sec-service-flow p,
.sec-service-fit p,
.sec-cta p,
.sec-service-main li,
.sec-service-fit li,
.sec-cta li {
  font-size: var(--font-body);
  line-height: var(--lh-body);
  color: var(--text-sub);
  margin-top: 0;
  margin-bottom: var(--space-body-bottom);
}

.small-text,
.hero-sub,
.works-note,
.service-item__desc {
  font-size: var(--font-small);
  line-height: var(--lh-small);
  color: var(--text-soft);
}

/* ---------------------------------
   4. Shared Section Rules
--------------------------------- */
.sec-hero,
.sec-service-hero,
.sec-service-main,
.sec-works,
.sec-subservices,
.sec-service-flow,
.sec-service-fit,
.sec-cta {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.section-lg {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.section-md {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.section-sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

/* 背景リズム */
.sec-service-main,
.sec-cta {
  background: var(--bg-muted);
}

.sec-works,
.sec-subservices,
.sec-service-flow,
.sec-service-fit,
.sec-service-hero {
  background: var(--bg-white);
}

/* Hero / CTA は個別上書き許容 */
.sec-hero {
  background: var(--bg-white);
}

.sec-service-hero {
  border-bottom: 1px solid var(--border-soft);
}

/* ---------------------------------
   5. Shared Card Rules
--------------------------------- */
.card,
.work-card,
.subservice-card,
.service-right-card {
  background: var(--bg-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: var(--space-card-padding);
  box-sizing: border-box;
}

.service-right-card {
  background: var(--bg-soft);
}

.work-card,
.subservice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap);
}

.service-item + .service-item {
  margin-top: 18px;
}

.work-card img,
.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ---------------------------------
   6. Shared Button Rules
--------------------------------- */
.btn--primary,
.btn--secondary {
  display: inline-block;
  text-align: center;
  padding: 14px 28px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg);
}

.btn--primary:hover,
.btn--primary:focus {
  background: #1a2233;
  color: var(--btn-primary-text) !important;
  border-color: #1a2233;
}

.btn--secondary {
  background: var(--bg-white);
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background: #f5f5f5;
  color: var(--btn-secondary-text) !important;
  border-color: #bdbdbd;
}

.btn--quiet {
  color: var(--text-main);
  text-decoration: underline;
}

.btn--primary:focus,
.btn--secondary:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------
   7. Shared Flow Rules
--------------------------------- */
.flow-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.flow-step-number {
  min-width: 40px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--btn-primary-bg);
}

/* ---------------------------------
   8. Utility Adjustments
--------------------------------- */
.works-note {
  margin-bottom: 0;
}

.sec-cta .inner-narrow {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.04);
  box-sizing: border-box;
}

.sec-cta ul {
  margin: 0 0 24px 1.2em;
  padding: 0;
}

.sec-cta li {
  margin-bottom: 8px;
}

/* ---------------------------------
   9. Responsive Rules
--------------------------------- */
@media (max-width: 1024px) {
  :root {
    --font-h1: 42px;
    --font-h2: 34px;
    --font-h3: 22px;
    --font-lead: 18px;

    --section-lg: 72px;
    --section-md: 56px;
    --section-sm: 32px;
  }

  .gb-inner.inner-wide,
  .gb-inner.inner-main,
  .gb-inner.inner-narrow {
    padding-left: var(--container-pad-tab);
    padding-right: var(--container-pad-tab);
  }
}

@media (max-width: 768px) {
  :root {
    --font-h1: 30px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-lead: 17px;
    --font-body: 16px;
    --font-small: 15px;

    --section-lg: 64px;
    --section-md: 48px;
    --section-sm: 32px;

    --space-card-padding: 20px;
  }

  .gb-inner.inner-wide,
  .gb-inner.inner-main,
  .gb-inner.inner-narrow {
    padding-left: var(--container-pad-sp);
    padding-right: var(--container-pad-sp);
  }

  .btn--primary,
  .btn--secondary {
    width: 100%;
    min-width: 0;
  }

  .sec-cta .inner-narrow {
    padding: 24px 20px;
  }
}

/* ===== Service page tone adjustment ===== */

/* 全体の空気感 */
.sec-service-hero,
.sec-service-main,
.sec-subservices,
.sec-service-flow,
.sec-service-fit,
.sec-cta {
  background: #ffffff;
}

/* 主軸サービスだけごく薄い面を作る */
.sec-service-main {
  background: #f8f8f6;
}

/* CTAも軽い面にする */
.sec-cta {
  background: #f7f7f5;
}

/* 見出しの強さを少し下げる */
.sec-service-hero h1,
.sec-service-main h2,
.sec-subservices h2,
.sec-service-flow h2,
.sec-service-fit h2,
.sec-cta h2 {
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #111111;
}

/* Heroを少し広く、静かに */
.sec-service-hero .inner-wide,
.sec-service-main .inner-wide,
.sec-subservices .inner-wide,
.sec-service-flow .inner-wide,
.sec-service-fit .inner-wide {
  max-width: 1240px;
}

/* Hero本文の空気 */
.sec-service-hero {
  padding-top: 104px;
  padding-bottom: 80px;
}

.sec-service-hero h1 {
  max-width: 900px;
  margin-bottom: 24px;
}

.sec-service-hero .lead {
  max-width: 760px;
  margin-bottom: 18px;
  color: #2c2c2c !important;
}

.sec-service-hero .hero-sub,
.sec-service-hero p:last-child {
  max-width: 720px;
  color: #666666 !important;
}

/* 本文カラムを少し広く */
.sec-service-main .gb-grid-wrapper,
.sec-subservices .gb-grid-wrapper,
.sec-service-flow .gb-grid-wrapper {
  gap: 56px;
}

/* カードの“箱感”を弱める */
.card,
.work-card,
.subservice-card,
.service-right-card {
  border: 1px solid #ecebe8;
  border-radius: 16px;
  box-shadow: none;
}

.subservice-card,
.work-card {
  background: #ffffff;
}

.service-right-card {
  background: #fcfcfb;
}

/* カード見出しを静かに */
.subservice-card h3,
.work-card h3,
.service-item__title {
  font-weight: 500;
  color: #151515;
}

/* CTAの箱をもう少し上品に */
.sec-cta .inner-narrow {
  max-width: 960px;
  background: #ffffff;
  border: 1px solid #ecebe8;
  border-radius: 20px;
  box-shadow: none;
  padding: 44px;
}

/* ボタンを少し軽く */
.btn--primary,
.btn--secondary {
  border-radius: 16px;
  font-weight: 600;
  min-width: 220px;
}

.btn--primary {
  background: #171717;
  border-color: #171717;
}

.btn--secondary {
  background: #ffffff;
  border-color: #d8d6d2;
  color: #171717 !important;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a74;
  font-weight: 500;
}

.sec-service-hero h1,
.sec-service-main h2,
.sec-subservices h2,
.sec-service-flow h2,
.sec-service-fit h2,
.sec-cta h2 {
  font-weight: 500;
  letter-spacing: 0.005em;
}

.sec-service-main h2,
.sec-subservices h2,
.sec-service-flow h2,
.sec-service-fit h2,
.sec-cta h2 {
  font-size: 36px;
}

:root {
  --bg-muted: #f8f7f4;
  --bg-soft: #fcfbf8;
}

.sec-service-main {
  background: #f8f7f4;
}

.sec-service-main .service-right-card {
  background: #fcfbf8;
  border-color: #ece9e3;
}

.sec-cta {
  background: #f7f6f2;
}

.sec-cta .inner-narrow {
  background: #fffdfb;
  border-color: #ece9e3;
}
.btn--primary {
  background: #2a2a28;
  border-color: #2a2a28;
  color: #ffffff !important;
}

.btn--primary:hover,
.btn--primary:focus {
  background: #3a3a37;
  border-color: #3a3a37;
}

.btn--secondary {
  background: #fffdfb;
  border-color: #cfc9bf;
  color: #2a2a28 !important;
}

.btn--primary {
  background: #2a2a28;
  border-color: #2a2a28;
  color: #ffffff !important;
}

.btn--primary:hover,
.btn--primary:focus {
  background: #3a3a37;
  border-color: #3a3a37;
}

.btn--secondary {
  background: #fffdfb;
  border-color: #cfc9bf;
  color: #2a2a28 !important;
}

.btn--secondary:hover,
.btn--secondary:focus {
  background: #f5f2ec;
  border-color: #bfb7aa;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a74;
  font-weight: 500;
}

/* ===== Button debug / force apply ===== */
.sec-cta .btn--primary,
.sec-cta .btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sec-cta .btn--primary {
  background: #2b2a27;
  color: #ffffff !important;
  border: 1px solid #2b2a27;
}

.sec-cta .btn--primary:hover,
.sec-cta .btn--primary:focus {
  background: #3a3935;
  border-color: #3a3935;
  color: #ffffff !important;
}

.sec-cta .btn--secondary {
  background: #fffdf9;
  color: #2b2a27 !important;
  border: 1px solid #cfc8bd;
}

.sec-cta .btn--secondary:hover,
.sec-cta .btn--secondary:focus {
  background: #f5f1ea;
  border-color: #bfb6aa;
  color: #2b2a27 !important;
}

.sec-service-flow .flow-step-number {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: #8a867f;
  font-weight: 500;
}
.sec-service-flow h3 {
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}
.sec-service-flow p {
  margin: 0;
  color: #444444;
  line-height: 1.9;
}

/* Eyebrow: 完全固定 */
.eyebrow,
.gb-text.eyebrow,
p.eyebrow {
  display: inline-block !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #7b7469 !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

.eyebrow,
.gb-text.eyebrow,
p.eyebrow {
  margin: 0 0 6px 0 !important;
}

.sec-cta .eyebrow,
.sec-cta .gb-text.eyebrow,
.sec-cta p.eyebrow {
  margin-bottom: 10px !important;
}