/*
 * FAC design tokens — stage 1 of the design unification (2026-10-01 proposal, 提案 1・2).
 * One place for the type scale and the spacing scale. Loaded after assets/css/main.css
 * (functions/module/fac-design-tokens.php) and overrides the existing classes only;
 * page HTML is untouched. Colours, fonts, URLs and content are unchanged by design.
 *
 * Out of scope here (stage 2+): TOP hero (.main_visual), the TOP definition block
 * ([data-fac="014-entity"]), the 2-column consult block, header/footer, CTA wording.
 */

:root {
  /* type scale (PC) */
  --fac-h1: 32px;        /* page title, Japanese */
  --fac-h1-en: 64px;     /* page title, English line */
  --fac-h2: 30px;        /* section heading, Japanese */
  --fac-h2-label: 16px;  /* red English label above an H2 */
  --fac-h2-en: 64px;     /* English display H2 (h2_03) */
  --fac-h3: 22px;
  --fac-h4: 18px;
  --fac-lead: 18px;      /* first paragraph under an H2 */
  --fac-body: 16px;
  --fac-small: 14px;
  --fac-btn: 16px;
  --fac-btn-h: 52px;

  /* spacing scale (PC, 8px grid) */
  --fac-section: 96px;   /* between blocks; also inside a background band */
  --fac-h2-gap: 32px;    /* H2 -> body */
  --fac-label-gap: 8px;  /* English label -> Japanese heading */
  --fac-h3-top: 48px;
  --fac-h3-bottom: 16px;
  --fac-h3-bar: 8px;     /* space between an H3 and its underline bar */
  --fac-para: 16px;
  --fac-card-pad: 32px;
  --fac-box-pad: 64px;   /* inside the large rounded cards (.sec_creative1 .container) */
  --fac-consult-pad: 48px;
  --fac-title-top: 48px;
  --fac-title-bottom: 16px;
  --fac-text-max: 880px;
}

@media (max-width: 767px) {
  :root {
    --fac-h1: 24px;
    --fac-h1-en: 40px;
    --fac-h2: 22px;
    --fac-h2-label: 13px;
    --fac-h2-en: 40px;
    --fac-h3: 18px;
    --fac-h4: 16px;
    --fac-lead: 16px;
    --fac-body: 15px;
    --fac-small: 13px;
    --fac-btn: 15px;
    --fac-btn-h: 48px;

    --fac-section: 64px;
    --fac-h2-gap: 24px;
    --fac-h3-top: 32px;
    --fac-h3-bottom: 12px;
    --fac-h3-bar: 6px;
    --fac-card-pad: 24px;
    --fac-box-pad: 40px;
    --fac-consult-pad: 32px;
    --fac-title-top: 36px;
    --fac-title-bottom: 8px;
  }
  /* body copy 15px on phones — main content only (header/footer untouched), form fields stay 16px so iOS does not zoom */
  main {
    font-size: var(--fac-body);
  }
  main input,
  main select,
  main textarea {
    font-size: 16px;
  }
}

/* ---------- page title band ---------- */
main .h1_wrap,
main .h1_content2 .h1_wrap,
main .h1_content6 .h1_wrap {
  padding-top: var(--fac-title-top);
  padding-bottom: var(--fac-title-bottom);
}
main .h1_wrap h1:not(.title):not(.txt2) {
  font-size: var(--fac-h1);
  line-height: 1.5;
  margin: 0;
}
main .h1_wrap h1:not(.title):not(.txt2) span {
  font-size: var(--fac-h1-en);
  line-height: 1;
  margin-bottom: 0;
}
main .h1_content6 .h1_wrap h1 span {
  margin-top: 0;
}
/* breadcrumb -> first block: one block gap; the first block then starts flush */
main .bread_wrap {
  margin-bottom: var(--fac-section);
}
main .h1_content2 .bread_wrap {
  margin-bottom: 0;
}
main .bread_wrap + section > .container > .row > .col > section:first-child {
  padding-top: 0;
  margin-top: 0;
}

/* ---------- H2 ---------- */
main h2.h2_01,
main h2.h2_02,
main h2.h2_04,
main .sec_service3 h2,
main .sec_features3 h2,
main h2:not([class]) {
  font-size: var(--fac-h2);
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: var(--fac-h2-gap);
}
main h2.h2_01 span,
main h2.h2_02 span {
  font-size: var(--fac-h2-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin-bottom: var(--fac-label-gap);
}
main .sec_service3 h2 span {
  font-size: var(--fac-h2-label);
  line-height: 1.4;
}
main .sec_features1 .title {
  font-size: var(--fac-h2);
  line-height: 1.5;
}
main h2.h2_03 {
  font-size: var(--fac-h2-en);
  line-height: 1;
  margin-bottom: var(--fac-h2-gap);
}
main h2.h2_03 span {
  font-size: var(--fac-lead);
  line-height: 1.5;
  margin-top: var(--fac-label-gap);
}

/* ---------- H3 / H4 ---------- */
main h3,
main .sec_creative3 h3,
main .sec_creative2_b h3,
main .sec_features2 h3,
main .heading3,
main .sec_creative5 .heading3 {
  font-size: var(--fac-h3);
  line-height: 1.5;
  margin-bottom: var(--fac-h3-bottom);
}
/* the plain H3 keeps its underline bar; only the gap to the bar is tokenised (variants with padding:0 keep it) */
main h3 {
  padding-bottom: var(--fac-h3-bar);
}
main p + h3,
main ul + h3,
main ol + h3,
main dl + h3,
main table + h3,
main .row + h3 {
  margin-top: var(--fac-h3-top);
}
main h4 {
  font-size: var(--fac-h4);
  line-height: 1.5;
}

/* ---------- lead / body / small ---------- */
main h2.h2_01 + .row > .col:first-child > p.txt1:first-child,
main h2.h2_02 + .row > .col:first-child > p.txt1:first-child,
main h2.h2_02 + .row > .col:first-child > p.pc-text-center:first-child,
main h2.h2_01 + p.txt1,
main h2.h2_02 + p.txt1,
main h2.h2_01 + p.sub,
main h2.h2_02 + p.sub,
main .sec_creative5 .reason,
main .sec_features2 .txt2 {
  font-size: var(--fac-lead);
  line-height: 1.8;
}
main p.txt1.pc-text-center:not([data-fac="014-entity"] *) {
  max-width: var(--fac-text-max);
  margin-left: auto;
  margin-right: auto;
}
main .sec_creative3 .txt1,
main .sec_features1 .txt1,
main .sec_features2 .txt1,
main .sec_features3 .txt1,
main .sec_features3 .txt2,
main .sec_features4 .txt1,
main .sec_service3 .txt1 {
  font-size: var(--fac-body);
  line-height: 1.8;
}
main .sec_creative4 .title {
  font-size: var(--fac-h4);
  line-height: 1.5;
  font-weight: 700;
}
main .sec_creative2 .txt2,
main .sec_interview2 .company {
  font-size: var(--fac-small);
}
main p {
  margin-top: 0;
  margin-bottom: var(--fac-para);
}
main p:last-child {
  margin-bottom: 0;
}

/* ---------- buttons ---------- */
main .more:not(.btn02) a {
  font-size: var(--fac-btn);
  line-height: 1.5;
  padding-top: calc((var(--fac-btn-h) - var(--fac-btn) * 1.5 - 2px) / 2);
  padding-bottom: calc((var(--fac-btn-h) - var(--fac-btn) * 1.5 - 2px) / 2);
}

/* ---------- vertical rhythm between blocks ---------- */
/* blocks without their own background: 96 above, 0 below (the next block brings its own 96) */
main section.sec_creative1,
main section.sec_creative2,
main section.sec_creative2_b,
main section.sec_creative4,
main section.sec_creative5,
main section.sec_features2,
main section.sec_features3,
main section.sec_features4,
main section.sec_service1,
main section.sec_service2,
main section.sec_service3,
main section.sec_business1,
main section.sec_business2,
main section.sec_slide01,
main section.sec_slide04,
main section.sec_interview2,
main section.sec_newslist1,
main section.sec05,
main section.sec06_b,
main section.sec09,
main section.sec10 {
  padding-top: var(--fac-section);
  padding-bottom: 0;
  margin-bottom: 0;
}
/* bands with a full-width background: 96 outside above, 96 inside top and bottom */
main section.sec_creative3,
main section.sec_features1 {
  margin-top: var(--fac-section);
  padding-top: var(--fac-section);
  padding-bottom: var(--fac-section);
}
/* the page's un-classed outer wrapper, and the last block of the TOP: 96 to the footer */
main > section:not([class]),
main > section:not(.mb0):last-child {
  margin-bottom: var(--fac-section);
}
/* un-classed inner sections (e.g. /company): 96 between them, nothing extra before the footer */
main section section:not([class]) {
  margin-bottom: var(--fac-section);
}
main section section:not([class]):last-child {
  margin-bottom: 0;
}
/* large rounded cards */
main .sec_creative1 > .container,
main .sec_features3 > .container {
  padding-top: var(--fac-box-pad);
  padding-bottom: var(--fac-box-pad);
}
main .sec_creative1[data-fac="034-consult-cta"] > .container {
  padding-top: var(--fac-consult-pad);
  padding-bottom: var(--fac-consult-pad);
}
/* small cards (the slider cards keep main.css's narrower padding between 768 and 1200px) */
main .sec_slide04 .link {
  padding: var(--fac-card-pad);
}
@media (min-width: 768px) and (max-width: 1200px) {
  main .sec_slide04 .link {
    padding: 16px;
  }
}
main .sec_business2 .list1 {
  padding: var(--fac-card-pad);
}
/* two of our own content blocks that previously carried a fixed 40px gap (fac-content-styles) */
main section[data-fac="012-seo-strategy-link"],
main section[data-fac="037-svc-faq"] + section[data-fac="034-consult-cta"] {
  padding-top: var(--fac-section);
}