/* このファイルは自動生成です。`npm run build:css` で再生成してください。 */

/* ===== style.reset.css ===== */
/* Reset: ブラウザ差分を吸収する最小セット */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}


/* ===== style.variables.css ===== */
:root {
  /* Color */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-line: #ead8ca;
  --color-border: #dfc6b2;
  --color-text: #33363b;
  --color-heading: #2f3943;
  --color-muted: #6d7278;
  --color-black: #000000;
  --color-ink: #111111;
  --color-white: #ffffff;
  --color-accent: #eb681f;
  --color-accent-hover: #d85814;
  --color-accent-pale: #fff4eb;
  --color-accent-mark: #f8cab1;
  --color-accent-panel: #fce8de;
  --color-accent-grad-strong: #f7d8c6;
  --color-accent-grad-mid: #fae8dd;
  --color-accent-grad-light: #fdf6f1;
  --color-control-bg: #f4f4f4;
  --color-control-bg-desktop: #f7f7f7;
  --color-control-border: #dfdfdf;
  --color-note-surface: #fef6f2;
  --color-case-surface: #fceee5;
  --color-shadow-inset: rgba(0, 0, 0, 0.08);
  --color-footer-text: #fff9f4;
  --color-focus: #0e467d;
  --color-link: #0b57d0;

  /* Font */
  --ff-gothic-b: "ゴシックMB101 B", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  --ff-tbud-r: "TBUDゴシック R", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  --ff-tbud-e: "TBUDゴシック E", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-3xl: 1.5rem;
  --fs-4xl: 1.75rem;
  --fs-5xl: 2rem;
  --fs-6xl: 2.25rem;
  --lh-heading: 1.5;
  --lh-heading-tight: 1.4;
  --lh-heading-snug: 1.45;
  --lh-body-relaxed: 1.8;
  --lh-body-loose: 1.9;
  --lh-body-tight: 1.7;
  --lh-copy-wide: 1.7778;
  --lh-ui: 2;
  --lh-nav: 1.2;
  --lh-footer-meta: 1.5;
  --lh-footer-meta-mobile: 1.5;

  /* Layout */
  --header-wide: 60rem;
  --content-wide: 50rem;
  --content-narrow: 50rem;
  --content-compact: 40rem;
  --note-box-max-w: 40rem;
  --gutter: 1rem;
  --gutter-sp: 1rem;
  --bleed-full-width: 100vw;
  --bleed-full-offset: calc(50% - 50vw);

  /* Responsive base */

  /* Header */
  --header-inner-min-h: 13.625rem;
  --nav-pc-pr: 5.5rem;
  --menu-top-off: 2.75rem;
  --menu-sz: 3rem;
  --menu-icon-sz: 3rem;

  /* Site logo */
  --site-logo-size: 27.5rem;
  --site-logo-img-w: 15.125rem;
  --site-logo-pt: 15.25rem;

  /* Site logo adjustment */
  --site-logo-offset-x: -1.25rem;
  --site-logo-offset-y: -13.75rem;
  --site-logo-w-sp: 80vw;
  --site-logo-max-sp: 27.5rem;

  /* Site logo ratio */
  --site-logo-mobile-overflow: 0.10;
  --site-logo-img-ratio: 0.5568;
  --site-logo-pt-ratio: 0.5545;
  --site-logo-off-y-ratio: -0.5;

  /* Shared spacing scale */
  --space-xxs: 0.25rem;
  --space-md: 1.5rem;
  --space-3xl: 3.625rem;
  --space-section-block: 3.75rem;

  /* Shared section heading */
  --sec-heading-gap: 1.625rem;
  --sp-sec-heading-b: 2.625rem;
  --section-rule-height: 1.3125rem;
  --sec-rule-ruler-w: 37.5rem;
  --sec-rule-ruler-h: 1.3125rem;
  --sec-rule-pencil-w: 2.875rem;

  /* Section heading decoration adjustment */
  --sec-rule-pencil-r: calc(50% - 29.0625rem);
  --sec-rule-pencil-t: calc(-3.5rem - ((2.5rem - var(--section-rule-height)) / 2));

  /* Hero */
  --hero-gap-after-head: 1.5rem;
  --hero-block-gap: 1.5rem;
  --hero-btn-min-h: 3rem;
  --hero-copy-max-width: 40rem;
  --hero-visual-center-w: 60rem;
  --hero-highlight-size: 1.75rem;
  --hero-hl-mb: 0.25rem;
  --hero-hl-lh: 1.2;

  /* Hero decoration adjustment */
  --hero-hl-bracket-overlap: -0.375rem;
  --hero-hl-r-off-y: -0.375rem;
  --hero-em-pt: 0.1em;
  --hero-em-dot-off-t: calc(-0.36em - 0.125rem);
  --hero-em-dot-sz: 0.8em;
  --sp-hero-eye-b: 2.4375rem;
  --sp-hero-lead-trim: -0.625rem;

  /* Rich text */
  --rt-strong-mark-off-b: 0.75rem;
  --rt-strong-mark-h: 0.4375rem;
  --rt-strong-mark-off-b-sp: 0.5rem;
  --rt-strong-mark-h-sp: 0.375rem;

  /* Intro and note */
  --intro-gap: 1.5em;
  --key-icon-w: 2.125rem;
  --key-icon-h: 4.75rem;
  --banner-w: 18.75rem;
  --banner-w-sp: 18.75rem;
  --banner-gap: 1rem;
  --banner-gap-sp: 1.5625rem;
  --note-memo-w: 5.1875rem;
  --note-memo-h: 1.5rem;
  --note-memo-h-sp: 1.375rem;
  --note-title-fs: var(--fs-lg);
  --note-title-offset-y: 0.1875rem;
  --note-box-fs: var(--fs-md);
  --note-box-py: 1.25em;
  --note-box-px: 1.875em;
  --note-box-py-sp: 1rem;
  --note-box-px-sp: 1.25rem;
  --note-box-head-gap: 1rem;
  --note-box-head-gap-sp: 0.75rem;

  /* Service */
  --sp-service-btn-top: 1.5rem;

  /* Points */
  --point-number-size: 3.4375rem;
  --point-num-fs: var(--fs-4xl);
  --point-num-mr: 0.667em;
  --point-num-ring: 0.125rem;

  /* Point decoration adjustment */
  --point-num-off-x: -0.125rem;
  --point-num-off-y: 0;
  --point-num-shadow-inset: -0.1875rem;
  --point-head-h: calc(var(--point-number-size) + (var(--point-num-ring) * 2));
  --point-head-rule-w: 0.125rem;
  --point-card-gap: 1rem;
  --point-card-px: 1.125rem;
  --point-card-pt: 1rem;
  --point-card-pb: 1.2rem;
  --point-head-pr: 1rem;
  --point-head-pl: 0.25rem;
  --point-body-indent: 4rem;
  --subsec-em-pt: 0.08em;
  --subsec-em-dot-off-t: calc(-0.51em - 0.0625rem);
  --subsec-em-dot-sz: 1.16em;
  --space-points-top: 4rem;

  /* Flow */
  --sp-flow-title-b: 2.8125rem;
  --space-flow-grid-gap: 1.25rem;
  --sp-flow-card-gap: 1rem;
  --sp-flow-card-gap-xs: 0.5rem;
  --sp-flow-card-gap-pc: 1.6875rem;
  --sp-flow-card-py: 1rem;
  --sp-flow-card-px: 1rem;
  --sp-flow-body-gap: 0.5rem;
  --flow-head-py: 0.375rem;
  --flow-head-px: 1.5rem;
  --flow-text-min-lines: 2;

  /* Form */
  --form-max-width: 50rem;
  --form-label-width: 14rem;
  --confirm-label-w: 12rem;
  --form-gap-row: 0.875rem;
  --form-gap-column: 0.875rem;
  --form-control-py: 0;
  --form-control-px: 0.85rem;
  --form-control-height: 2.125rem;
  --form-control-radius: 0.25rem;
  --form-textarea-min-h: 11rem;

  /* Main and footer */
  --dot-strip-h: 13.625rem;
  --dot-tile-w: 2rem;
  --main-pb: 10rem;
  --footer-top-padding: 1.75rem;
  --footer-body-pt: 1.5rem;
  --footer-body-pb: 2rem;
  --footer-max-w: var(--header-wide);
  --footer-info-gap: 1.5rem;
  --footer-info-mt: 1.25rem;
  --footer-info-min-h: 0;
  --footer-nav-gap-row: 0.375rem;
  --footer-nav-gap-col: 0.875rem;
  --footer-logo-width: clamp(8.75rem, 11vw, 10rem);
  --footer-logo-max-w: 180px;
  --footer-logo-top: 0;
  --footer-logo-right: 0;
  --footer-info-text-max-w: none;
  /* Footer decoration adjustment */
  --footer-orn-r-off-b-pc: -1.625rem;
  --footer-orn-l-off-b-pc: -7.25rem;
  --sp-footer-copy-top: 1.25rem;

  /* Navigation current marker */

  /* Navigation marker adjustment */
  --nav-cur-mark-off-b: calc(0.18em - 0.0625rem);
  --nav-cur-mark-h: 0.35em;
  --nav-cur-main-mark-off-b: calc(var(--nav-cur-mark-off-b) + 0.0625rem);
  --nav-cur-main-mark-h: 0.2625em;

  /* 文字組みトークン */
  --ty-body-ff: var(--ff-tbud-r);
  --ty-body-fs: var(--fs-lg);
  --ty-body-lh: var(--lh-ui);
  --ty-hero-eye-ff: var(--ff-gothic-b);
  --ty-hero-eye-fs: var(--fs-6xl);
  --ty-hero-eye-lh: var(--lh-heading);
  --ty-hero-copy-ff: var(--ff-tbud-r);
  --ty-hero-copy-fs: var(--fs-xl);
  --ty-hero-copy-lh: 2.2;
  --ty-hero-copy-lh-sp: var(--lh-body-loose);
  --ty-hero-hl-ff: var(--ff-gothic-b);
  --ty-hero-hl-fs: var(--fs-5xl);
  --ty-hero-hl-lh: var(--lh-heading);
  --ty-hero-hl-lh-pc: 1.375;
  --ty-hero-hl-lh-sp: var(--lh-heading-tight);
  --ty-sec-title-ff: var(--ff-gothic-b);
  --ty-sec-title-sub-fs: var(--fs-4xl);
  /* subsection-title は points 見出しとして独立調整する */
  --ty-subsec-title-fs: var(--fs-4xl);
  --ty-sec-title-sub-lh: var(--lh-heading);
  --ty-sec-title-main-fs: var(--fs-5xl);
  --ty-sec-title-main-lh: var(--lh-heading);
  --ty-sec-title-main-lh-sp: 1.55;
  --ty-subsec-num-fs: 2.5rem;
  --ty-point-title-ff: var(--ff-tbud-e);
  --ty-point-title-fs: var(--fs-3xl);
  --ty-point-title-lh: var(--lh-heading);
  --ty-point-title-lh-sp: var(--lh-heading-snug);
  --ty-point-num-ff: var(--ff-gothic-b);
  --ty-point-num-fs: var(--fs-4xl);
  --ty-point-num-fs-pc: var(--fs-6xl);
  --ty-point-sub-ff: var(--ff-tbud-e);
  --ty-point-sub-fs: var(--fs-xl);
  --ty-point-sub-lh: var(--lh-heading);
  --ty-point-body-ff: var(--ff-tbud-r);
  --ty-point-body-fs: var(--fs-lg);
  --ty-point-body-lh: var(--lh-ui);
  --ty-flow-title-ff: var(--ff-tbud-e);
  --ty-flow-title-fs: var(--fs-3xl);
  --ty-flow-title-lh: var(--lh-heading);
  --ty-flow-body-ff: var(--ff-tbud-r);
  --ty-flow-body-fs: var(--fs-lg);
  --ty-flow-body-lh: var(--lh-copy-wide);
  --ty-flow-body-lh-sp: var(--lh-body-tight);
  --ty-nav-main-ff: var(--ff-gothic-b);
  --ty-nav-main-fs: var(--fs-xl);
  --ty-nav-main-fs-featured: var(--fs-3xl);
  --ty-nav-main-lh: var(--lh-nav);
  --ty-nav-main-lh-pc-1: 1.1667;
  --ty-nav-main-lh-pc-2: var(--lh-heading-tight);
  --ty-nav-main-lh-sp: var(--lh-footer-meta);
  --ty-nav-sub-ff: var(--ff-gothic-b);
  --ty-nav-sub-fs: 1.125rem;
  --ty-nav-sub-lh: var(--lh-nav);
  --ty-nav-sub-lh-pc: 1.25;
  --ty-nav-sub-lh-sp: var(--lh-heading-snug);
  --ty-nav-sub-ff-sp: var(--ff-tbud-r);
  --ty-cert-lead-ff: var(--ff-tbud-r);
  --ty-cert-lead-fs: var(--fs-lg);
  --ty-cert-lead-lh: var(--lh-ui);
  --ty-cert-intro-ff: var(--ff-tbud-r);
  --ty-cert-intro-fs: var(--fs-lg);
  --ty-cert-intro-lh: 1.5556;
  --ty-form-label-ff: var(--ff-tbud-r);
  --ty-form-label-fs: var(--fs-md);
  --ty-form-label-lh: var(--lh-ui);
  --ty-contact-note-ff: var(--ff-tbud-e);
  --ty-contact-note-fs: var(--fs-lg);
  --ty-contact-note-lh: var(--lh-ui);
  --ty-confirm-term-ff: var(--ff-tbud-e);
  --ty-confirm-body-ff: var(--ff-tbud-r);
  --ty-confirm-body-fs: var(--fs-md);
  --ty-confirm-body-lh: var(--lh-body-relaxed);
  --ty-confirm-body-lh-sp: var(--lh-body-tight);
  --ty-submit-ff: var(--ff-tbud-e);
  --ty-submit-fs: var(--fs-xl);
  --ty-submit-lh: var(--lh-heading);
  --ty-note-title-lh: var(--lh-heading);
  --ty-note-body-fs-pc: var(--fs-lg);
  --ty-note-body-lh-pc: var(--lh-ui);
  --ty-thanks-title-ff: var(--ff-gothic-b);
  --ty-thanks-title-fs: clamp(2rem, 4vw, 3rem);
  --ty-thanks-title-lh: 1.5;
  --ty-thanks-lead-ff: var(--ff-tbud-r);
  --ty-thanks-lead-fs: clamp(1rem, 1.9vw, 1.125rem);
  --ty-thanks-lead-lh: 2;
  --ty-thanks-note-ff: var(--ff-tbud-r);
  --ty-thanks-note-fs: var(--fs-md);
  --ty-thanks-note-lh: 1.75;
  --ty-footer-nav-ff: var(--ff-tbud-r);
  --ty-footer-nav-fs: 1.125rem;
  --ty-footer-nav-lh: var(--lh-ui);
  --ty-footer-nav-lh-tab: var(--lh-body-tight);
  --ty-footer-nav-lh-sp: 1.65;
  --ty-footer-company-ff: var(--ff-gothic-b);
  --ty-footer-company-fs: 1.25rem;
  --ty-footer-company-lh: var(--lh-heading);
  --ty-footer-company-lh-tab: 1.5;
  --ty-footer-company-lh-sp: 1.5;
  --ty-footer-company-type-ff: var(--ff-tbud-r);
  --ty-footer-company-type-fs: 0.875rem;
  --ty-footer-company-type-lh-tab: var(--lh-footer-meta);
  --ty-footer-company-type-lh-sp: var(--lh-footer-meta-mobile);
  --ty-footer-meta-ff: var(--ff-tbud-r);
  --ty-footer-meta-fs: 1rem;
  --ty-footer-meta-lh: var(--lh-heading);
  --ty-footer-meta-lh-tab: var(--lh-heading);
  --ty-footer-meta-lh-sp: var(--lh-footer-meta-mobile);
  --ty-footer-address-lh-sp: var(--lh-footer-meta-mobile);
  --ty-cert-panel-title-ff: var(--ff-tbud-e);
  --ty-cert-panel-title-fs: var(--fs-4xl);
  --ty-cert-panel-title-lh: var(--lh-heading);
  --ty-cert-desc-ff: var(--ff-tbud-r);
  --ty-cert-desc-fs: var(--fs-md);
  --ty-cert-desc-lh: 1.75;
  --ty-cert-note-ff: var(--ff-tbud-r);
  --ty-cert-note-fs: 1rem;
  --ty-cert-note-lh: 1.75;
  --ty-sdgs-label-ff: var(--ff-gothic-b);
  --ty-sdgs-label-fs: var(--fs-xl);
  --ty-sdgs-label-lh: var(--lh-heading-tight);
  --ty-sdgs-title-ff: var(--ff-gothic-b);
  --ty-sdgs-title-fs: var(--fs-4xl);
  --ty-sdgs-title-lh: var(--lh-heading);
  --ty-sdgs-body-ff: var(--ff-tbud-r);
  --ty-sdgs-body-fs: var(--fs-lg);
  --ty-sdgs-body-lh: var(--lh-copy-wide);
  --ty-sdgs-list-title-ff: var(--ff-tbud-e);
  --ty-sdgs-list-title-fs: var(--fs-lg);
  --ty-sdgs-list-title-lh: var(--lh-copy-wide);
  --ty-work-page-title-ff: var(--ff-tbud-e);
  --ty-work-page-title-fs: 2.25rem;
  --ty-work-page-title-lh: 1.5;
  --ty-work-lead-ff: var(--ff-tbud-r);
  --ty-work-lead-fs: 1.125rem;
  --ty-work-lead-lh: 2;
  --ty-work-case-title-ff: var(--ff-tbud-e);
  --ty-work-case-title-fs: 1.25rem;
  --ty-work-case-title-lh: 1.5;
  --ty-work-catch-ff: var(--ff-gothic-b);
  --ty-work-catch-fs: 1.5rem;
  --ty-work-catch-lh: 1.4167;
  --ty-work-detail-heading-ff: var(--ff-tbud-e);
  --ty-work-detail-heading-fs: 1.125rem;
  --ty-work-detail-heading-lh: 1.5;
  --ty-work-detail-body-ff: var(--ff-tbud-r);
  --ty-work-detail-body-fs: 1.125rem;
  --ty-work-detail-body-lh: 1.7778;
  --ty-work-voice-heading-ff: var(--ff-tbud-e);
  --ty-work-voice-heading-fs: 1.125rem;
  --ty-work-voice-heading-lh: 1.5;
  --ty-work-voice-body-ff: var(--ff-tbud-r);
  --ty-work-voice-body-fs: 1.125rem;
  --ty-work-voice-body-lh: 1.7778;

  /* Layer */
  --z-skip-link: 30;
  --z-header: 20;
  --z-mobile-menu-button: 40;
  --z-mobile-header: 200;
  --z-mobile-menu-panel: 210;
  --z-decoration-behind: -1;
  --z-decoration-base: 0;
  --z-decoration-content: 1;
  --z-decoration-front: 2;
  --z-floating-button: 25;

  /* Certification */
  --sp-cert-top-pc: 1.5rem;
  --sp-cert-intro-mb-pc: 3.1875rem;
  --sp-cert-list-gap-pc: 3.75rem;
  --sp-cert-panel-pt-pc: 1.4375rem;
  --sp-cert-panel-px-pc: 1.375rem;
  --sp-cert-panel-pb-pc: 1.875rem;
  --sp-cert-panel-py-sp: 1rem;
  --sp-cert-panel-px-sp: 0.75rem;
  --sz-cert-panel-title-h: 2.5625rem;
  --sp-cert-panel-lead-gap: 0.5rem;
  --sp-cert-panel-lead-gap-desktop: 1.0625rem;
  --sp-cert-panel-body-gap-top: 1rem;
  --sp-cert-sdgs-body-pt: 0.6875rem;
  --sp-cert-divider-gap-b: 0.875rem;
  --sp-cert-body-px: 1rem;
  --sp-cert-body-px-mobile: 0.75rem;
  --sp-cert-body-pb: 1rem;
  --sp-cert-body-pb-mobile: 1rem;
  --sp-cert-theme-py: 1.875rem;
  --sp-cert-theme-px: 1.375rem;
  --sp-cert-theme-title-gap: 0.125rem;
  --sp-cert-theme-copy-gap: 2.0625rem;
  --sp-cert-theme-first-gap: 1.5rem;
  --sp-cert-theme-list-title-gap: 0.75rem;
  --sp-cert-theme-list-gap: 0.375rem;
  --sp-cert-theme-divider-inset: 1.375rem;
  --sp-cert-theme-divider-overlap: -0.25rem;
  --sp-cert-hl-off-y: 0.4375rem;
  --sp-cert-logo-gap-pc: 0.75rem;
  --sp-cert-logo-py-pc: 2rem;
  --sp-cert-logo-px-pc: 2rem;
  --sp-cert-simple-head-h-pc: 5.6875rem;
  --sz-cert-divider-h: 0.1875rem;
  --sz-cert-divider-dot-gap: 0.4375rem;
  --sdgs-icon-gap: 0.4375rem;
  --sdgs-icon-size: 4.5rem;
  --sdgs-icon-size-mobile: 2.75rem;

  /* Thankyou */
  --thanks-card-max-w: 50rem;
  --thanks-card-radius: 28px;
  --thanks-card-pad: clamp(1.5rem, 4vw, 3rem);
  --thanks-actions-gap: 1rem;
}


/* ===== style.base.css ===== */
/* Base */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--color-text);
  font-family: var(--ty-body-ff);
  font-size: var(--ty-body-fs);
  line-height: var(--ty-body-lh);
  background: var(--color-bg);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.25rem;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip-link);
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--color-focus);
  border-radius: 999px;
  transform: translateY(-180%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.u-visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}


/* ===== style.layout.css ===== */
/* Layout */

/* 共通コンテナ */

.inner {
  --inner-max-width: var(--content-wide);
  width: min(calc(100% - (var(--gutter) * 2)), var(--inner-max-width));
  margin-inline: auto;
}

.header__inner,
.footer__top,
.footer__inner {
  --container-max-width: var(--header-wide);
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max-width));
  margin-inline: auto;
}

/* セクション外側余白 */

.hero,
.intro,
.note,
.service,
.flow,
.certification,
.contact {
  padding-block: var(--space-section-block);
}

/* セクション内レイアウト */

.hero__inner {
  display: grid;
  gap: var(--hero-block-gap);
  justify-items: center;
}

.intro__statements,
.service__lead,
.points {
  max-width: var(--content-narrow);
  margin-inline: auto;
}

.note-box {
  max-width: var(--note-box-max-w);
  margin-inline: auto;
}

/* 見出しレイアウト:
   見出し自体の装飾は style.components.css 側で定義し、
   ここではセクション内の配置だけを持つ */
.sec-head {
  text-align: center;
  margin-bottom: var(--sp-sec-heading-b);
}

.u-bleed-full {
  width: var(--bleed-full-width);
  margin-left: var(--bleed-full-offset);
  margin-right: var(--bleed-full-offset);
}

/* リスト・グリッド骨格 */

.points__list {
  display: flex;
  flex-direction: column;
}

.flow__list {
  display: flex;
  flex-wrap: wrap;
}

.certification__list {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
}

/* メインエリア下端の装飾 */

main {
  position: relative;
  padding-bottom: var(--main-pb);
  isolation: isolate;
}

main::after {
  content: "";

  /* 下端のドット帯は背景化すると再現が崩れるため独立配置を維持 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dot-strip-h);
  background-color: var(--color-bg);
  background-image: url("../img/bottom_background.svg");
  background-repeat: repeat-x;
  background-position: left bottom;
  pointer-events: none;
  z-index: var(--z-decoration-base);
}

main > * {
  position: relative;
  z-index: var(--z-decoration-content);
}

/* フォームレイアウト */

.form-grid {
  display: grid;
  gap: var(--form-gap-row);
}

.contact-form {
  max-width: var(--form-max-width);
  margin: 0 auto;
}

/* フッターの骨格 */

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
  padding-top: var(--footer-top-padding);
}

.footer__inner {
  --inner-max-width: var(--footer-max-w);
  --container-max-width: var(--footer-max-w);
  position: relative;
  z-index: var(--z-decoration-content);
  padding: var(--footer-body-pt) 0 var(--footer-body-pb);
}

.footer__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--footer-info-gap);
  align-items: start;
  margin-top: var(--footer-info-mt);
  min-height: var(--footer-info-min-h);
}

.footer-nav[hidden] + .footer__info {
  margin-top: 0;
}

/* レスポンシブ */

@media (max-width: 767px) {
  .inner,
  .header__inner,
  .footer__top,
  .footer__inner {
    width: min(calc(100% - (var(--gutter-sp) * 2)), var(--inner-max-width, var(--container-max-width, var(--content-wide))));
  }

  .form-grid {
    gap: var(--form-gap-row);
  }

  .contact-form {
    max-width: 100%;
  }

  .footer__inner {
    padding-top: 1.75rem;
    padding-bottom: 1.15rem;
  }
}

@media (min-width: 768px) {
  .intro .inner,
  .note .inner {
    --inner-max-width: var(--content-compact);
  }
}

@media (max-width: 959px) {
  .footer__inner {
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
  }

  .footer__info {
    display: block;
  }

  .footer-nav[hidden] + .footer__info {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  .form-grid {
    gap: var(--form-gap-row) var(--form-gap-column);
  }
}


/* ===== style.components.css ===== */
/* Components */

/* PC/SPで有効な改行を切り替える共通ユーティリティ */

br.u-br-pc {
  display: inline;
}

br.u-br-sp {
  display: none;
}

@media (max-width: 767px) {
  br.u-br-pc {
    display: none;
  }

  br.u-br-sp {
    display: inline;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-btn-min-h);
  padding: 0.85rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button--primary {
  color: var(--color-white);
  background: var(--color-accent);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-accent-hover);
}

.button--secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: transparent;
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: rgba(235, 104, 31, 0.08);
}

/* 汎用サーフェス */
.surface-box {
  background: var(--color-surface);
}

.surface-box--accent {
  background: var(--color-accent-panel);
}

/* 共通のリッチテキスト装飾 */

:where(.rich-text) em,
:where(.rich-text) strong {
  font-family: var(--ff-tbud-e);
  font-style: normal;
}

:where(.rich-text) strong {
  position: relative;
  display: inline-block;
  z-index: var(--z-decoration-base);
  font-weight: inherit;
  padding-inline: 0.08em;
}

:where(.rich-text) strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--rt-strong-mark-off-b);
  height: var(--rt-strong-mark-h);
  background: var(--color-accent-mark);
  z-index: var(--z-decoration-behind);
}

:where(.rich-text) a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.highlight-bracket {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: var(--hero-hl-mb) 0;
  line-height: var(--hero-hl-lh);
}

.highlight-bracket::before,
.highlight-bracket::after {
  content: "";
  width: var(--hero-highlight-size);
  height: var(--hero-highlight-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.highlight-bracket::before {
  background-image: url("../img/corner_bracket_left.svg");
  margin-right: var(--hero-hl-bracket-overlap);
}

.highlight-bracket::after {
  background-image: url("../img/corner_bracket_right.svg");
  align-self: flex-end;
  margin-left: var(--hero-hl-bracket-overlap);
  transform: translateY(var(--hero-hl-r-off-y));
}

.highlight-bracket > span {
  display: inline-block;
}

.divider-dots-x {
  height: 0.25rem;
  background-size: 0.5rem 0.25rem;
  background-repeat: repeat-x;
  background-position: left top;
}

.divider-dots-x--ink {
  background-image: radial-gradient(circle, #33363b 0 0.125rem, transparent 0.125rem);
}

.divider-dots-x--accent {
  background-image: radial-gradient(circle, var(--color-accent) 0 0.125rem, transparent 0.125rem);
}

.cert-panel__divider {
  height: var(--sz-cert-divider-h);
  background-size: var(--sz-cert-divider-dot-gap) var(--sz-cert-divider-h);
  background-image: radial-gradient(
    circle,
    #33363b 0 calc(var(--sz-cert-divider-h) / 2),
    transparent calc(var(--sz-cert-divider-h) / 2)
  );
}

/* 見出し部品:
   レイアウト差分は style.layout.css / style.sections.css 側で持ち、
   ここでは見出し自体の共通見た目とルーラー部品だけを定義する */
.section-title,
:where(.sec-head) h2,
.subsection-title,
.hero h1 {
  margin: 0;
  color: var(--color-heading);
}

.section-title {
  text-align: center;
}

.subsection-title {
  margin-bottom: 1.5rem;
  text-align: center;
}

.sec-head__rule {
  position: relative;
  min-height: var(--section-rule-height);
  margin-bottom: var(--sec-heading-gap);
  background-image: url("../img/rule_ruler.svg");
  background-repeat: repeat-x;
  background-position: center center;
  background-size: var(--sec-rule-ruler-w) var(--sec-rule-ruler-h);
}

.sec-head__rule::before {
  content: none;
}

.sec-head__rule::after {
  content: "";
  position: absolute;
  top: var(--sec-rule-pencil-t);
  right: var(--sec-rule-pencil-r);
  width: var(--sec-rule-pencil-w);
  aspect-ratio: 46 / 66;
  background-image: url("../img/rule_mechanical_pencil.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

@media (max-width: 959px) {
  .sec-head__rule::after {
    display: none;
  }
}

/* バナー */

.banner {
  display: block;
  flex: 0 0 auto;
  width: min(100%, var(--banner-w));
}

.banner img {
  width: 100%;
  height: auto;
}

/* メモボックス */

.note-box {
  font-size: var(--note-box-fs);
  padding: var(--note-box-py) var(--note-box-px);
  background: var(--color-note-surface);
  border: 1px solid var(--color-line);
}

.note-box__header {
  display: flex;
  align-items: flex-end;
  gap: var(--note-box-head-gap);
  margin-bottom: 0.85rem;
}

.note-box__header > * {
  min-width: 0;
}

.note-box__header::before {
  content: "";
  width: var(--note-memo-w);
  height: var(--note-memo-h);
  flex: 0 0 auto;
  background-image: url("../img/memo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--note-memo-w) var(--note-memo-h);
}

.note-box h2 {
  margin: 0;
  font-family: var(--ff-tbud-e);
  font-size: var(--note-title-fs);
  line-height: 1.35;
  transform: translateY(var(--note-title-offset-y));
}

.note-box p {
  margin: 0;
}

.point-card {
  padding: var(--point-card-pt) var(--point-card-px) var(--point-card-pb);
  background: var(--color-white);
}

.point-card__heading {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--point-head-h);
  margin: 0;
  padding: 0 var(--point-head-pr) 0 var(--point-head-pl);
  background: linear-gradient(
    90deg,
    var(--color-accent-grad-strong) 0%,
    var(--color-accent-grad-mid) 45%,
    var(--color-accent-grad-light) 100%
  );
  border-top-left-radius: calc(var(--point-head-h) / 2);
  border-bottom-left-radius: calc(var(--point-head-h) / 2);
  border-top: var(--point-head-rule-w) solid transparent;
  border-bottom: var(--point-head-rule-w) solid var(--color-accent);
  margin-bottom: calc(var(--point-card-gap) + var(--space-xxs));
  overflow: visible;
}

.point-card__label {
  flex: 1 1 auto;
  min-width: 0;
}

.point-card h4 {
  color: var(--color-heading);
  letter-spacing: 0.01em;
}

/* ポイントカード本文は部品側で余白を持ち、配置は sections 側で調整する */
.point-card__number {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  margin-right: var(--point-num-mr);
  width: var(--point-number-size);
  height: var(--point-number-size);
  color: var(--color-white);
  font-size: var(--point-num-fs);
  font-weight: 800;
  line-height: 1;
  background: var(--color-accent);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-shadow:
    inset 0 var(--point-num-shadow-inset) 0 var(--color-shadow-inset),
    0 0 0 var(--point-num-ring) var(--color-accent);
  transform: translate(var(--point-num-off-x), var(--point-num-off-y));
}

.flow-card p,
.point-card p {
  margin: 0 0 0.75rem;
}

/* フォーム */

.contact__note--edit {
  margin: 0 0 0.75rem;
}

.contact__note--confirm {
  margin: 0.6rem 0 0;
}

.contact-form__error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  color: #9f1f1f;
  background: #fff2f2;
  border: 1px solid #efc6c6;
  border-radius: var(--form-control-radius);
}

.form-field,
.form-field--full {
  display: grid;
  grid-template-columns: var(--form-label-width) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--form-gap-column);
}

.form-field--full label,
.form-field--full textarea {
  align-self: start;
}

.form-field label {
  color: var(--color-heading);
  font-weight: 400;
  white-space: nowrap;
}

.form-field span {
  display: inline-block;
  color: var(--color-heading);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.1em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: var(--form-control-py) var(--form-control-px);
  color: var(--color-text);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--form-control-radius);
}

.form-field input {
  height: var(--form-control-height);
}

.form-field textarea {
  min-height: var(--form-textarea-min-h);
  resize: vertical;
}

.contact-form__recaptcha {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-form__confirm {
  padding: 1.25rem 1.5rem;
  background: var(--color-accent-pale);
  border: 1px solid var(--color-line);
}

.confirm-list {
  display: grid;
  grid-template-columns: var(--confirm-label-w) minmax(0, 1fr);
  column-gap: 1.5rem;
  margin: 0;
}

.confirm-list__term {
  grid-column: 1;
}

.confirm-list__value {
  grid-column: 2;
}

.confirm-list__term,
.confirm-list__value {
  border-bottom: 1px solid var(--color-line);
}

.confirm-list dt,
.confirm-list dd {
  margin: 0;
  padding: 0.9rem 0;
}

.confirm-list dd {
  white-space: pre-wrap;
  word-break: break-word;
}

.confirm-list__value--empty {
  color: var(--color-muted);
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.contact-form__submit {
  display: block;
  min-width: 15rem;
}

/* サンクスカード */

.thanks-card {
  position: relative;
  max-width: var(--thanks-card-max-w);
  margin: 0 auto;
  padding: var(--thanks-card-pad);
  background: var(--color-note-surface);
  border: 1px solid rgba(235, 104, 31, 0.2);
  border-radius: var(--thanks-card-radius);
  overflow: hidden;
}

.thanks-card__title,
.thanks-card__lead,
.thanks-card__note {
  margin: 0;
  text-align: center;
}

.thanks-card__title {
  margin-bottom: 1rem;
}

.thanks-card__lead {
  margin-bottom: 0.85rem;
  color: var(--color-heading);
}

.thanks-card__note {
  color: var(--color-muted);
}

.thanks-card__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--thanks-actions-gap);
  margin-top: 2rem;
}

.thanks-card__button {
  min-width: min(100%, 17rem);
}

/* 共通ナビゲーション部品とロゴ */

.footer-nav ul,
.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--footer-nav-gap-row) var(--footer-nav-gap-col);
}

.footer__logo {
  display: block;
  width: min(var(--footer-logo-width), var(--footer-logo-max-w));
}

.footer__logo img {
  width: 100%;
  max-width: var(--footer-logo-max-w);
}

.site-logo {
  display: inline-flex;
  position: absolute;
  top: 0;
  left: 0;

  /* 円形ロゴをヘッダー枠からはみ出させるため通常フローから切り離す */
  align-items: flex-start;
  justify-content: center;
  width: var(--site-logo-size);
  height: var(--site-logo-size);
  padding: var(--site-logo-pt) 0 0;
  background: var(--color-accent);
  border-radius: 50%;
  overflow: hidden;

  /* ロゴ円形背景をヘッダー左上からはみ出させる前提の補正 */
  transform: translate(var(--site-logo-offset-x), var(--site-logo-offset-y));
}

.site-logo img {
  width: auto;
  max-width: var(--site-logo-img-w);
  transform: none;
}

/* 戻るボタン部品 */

.back-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: var(--z-floating-button);
  display: block;
  margin: 1rem 0;
  background: rgba(236, 104, 31, 0.8);
  border-radius: 0.9375rem 0 0 0.9375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.24s ease;
  padding: 0;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top a {
  display: block;
  padding: 0.75rem 0.5rem 0.5rem;
  text-align: center;
  text-decoration: none;
}

.back-to-top__icon {
  display: block;
  width: 0.6875rem;
  height: 0.6875rem;
  margin: 0 auto 0.03125rem;
  border-top: 0.1875rem solid #fff;
  border-right: 0.1875rem solid #fff;
  transform: rotate(-45deg);
}

.back-to-top__label {
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  tab-size: 4;
  font-family: "TBUDGothic R", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
  line-height: 2;
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  background-repeat: no-repeat;
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  display: block;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media (max-width: 767px) {
  /* メモボックス */
  .note-box {
    padding: var(--note-box-py-sp) var(--note-box-px-sp);
  }

  .note-box__header {
    align-items: center;
    gap: var(--note-box-head-gap-sp);
  }

  .note-box__header::before {
    width: calc(var(--note-memo-h-sp) * var(--note-memo-w) / var(--note-memo-h));
    height: var(--note-memo-h-sp);
    background-size: 100% 100%;
  }

  /* フォーム */
  .form-field,
  .form-field--full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  /* サンクスカード */
  .thanks-card {
    border-radius: 1.375rem;
  }

  /* 戻るボタン */
  .back-to-top {
    border-radius: 0.9375rem 0 0 0.9375rem;
  }
}

@media (max-width: 959px) {
  /* フッターロゴ */
  .footer__logo {
    float: right;
    margin: 0;
    transform: translate(var(--footer-logo-right), var(--footer-logo-top));
    width: var(--footer-logo-width);
  }
}


/* ===== style.sections.css ===== */
/* Header */

.header {
  position: relative;
  z-index: var(--z-header);
  overflow: visible;
  background-color: var(--color-bg);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--dot-strip-h);

  /* ヘッダー上端のドット帯は装飾レイヤーとして独立配置 */
  background-image: url("../img/top_background.svg");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: var(--dot-tile-w) var(--dot-strip-h);
  pointer-events: none;
}

.header__inner {
  position: relative;
  z-index: var(--z-decoration-content);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-inner-min-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* ヘッダーナビゲーション */

.nav--pc {
  margin-left: auto;
  padding-right: var(--nav-pc-pr);
  padding-top: 2.75rem;
}

.nav--pc .nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nav--pc a {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--color-black);
  font-family: var(--ff-gothic-b);
  font-weight: 700;
  line-height: 1.4;
}

/* ナビゲーションの先頭マーカー */

.nav--pc a::before {
  content: "arrow_forward_ios";
  flex: 0 0 auto;
  margin-top: 0.4375rem;
  color: var(--color-accent);
  font-family: "Material Icons";
  font-size: 0.875rem;
  font-feature-settings: "liga";
  line-height: 1;
}

/* 現在地表示 */

.nav--pc a[aria-current="page"] .menu-main,
.nav--pc a[aria-current="page"] .menu-sub {
  position: relative;
  display: inline-block;
  z-index: var(--z-decoration-base);
  width: fit-content;
}

.nav--pc a[aria-current="page"] .menu-main::after,
.nav--pc a[aria-current="page"] .menu-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-cur-mark-off-b);
  height: var(--nav-cur-mark-h);
  background: var(--color-accent-mark);
  z-index: var(--z-decoration-behind);
}

.nav--pc a[aria-current="page"] .menu-main::after {
  bottom: var(--nav-cur-main-mark-off-b);
  height: var(--nav-cur-main-mark-h);
}

/* モバイルメニュー */

.mobile-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 0;

  /* ヘッダーレイアウトから切り離して右上に固定 */
  /* ヘッダー右上のロゴ円と干渉しない位置に固定 */
  padding-top: var(--menu-top-off);
  z-index: var(--z-mobile-menu-button);
}

.mobile-menu__summary {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 0.5rem;
  width: var(--menu-sz);
  height: var(--menu-sz);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
  flex: 0 0 var(--menu-sz);
}

.mobile-menu__summary::marker {
  display: none;
}

.mobile-menu__summary::-webkit-details-marker {
  display: none;
}

.mobile-menu__icon {
  width: var(--menu-icon-sz);
  height: var(--menu-icon-sz);
}

/* 開閉状態 */

.mobile-menu__icon--close,
.mobile-menu[open] .mobile-menu__icon--open {
  display: none;
}

.mobile-menu[open] .mobile-menu__icon--close {
  display: block;
}

/* Hero */

.hero {
  position: relative;
  padding-top: 2.75rem;
  padding-bottom: var(--space-md);
}

.hero__copy {
  max-width: var(--hero-copy-max-width);
}

.eyebrow {
  margin: 0 0 var(--sp-hero-eye-b);
  color: var(--color-heading);
  font-weight: 700;
  text-align: center;
}

.hero h1 {
  margin: 0;
  text-align: center;
}

.hero__lead {
  margin: 0 auto var(--sp-hero-lead-trim);
  color: var(--color-heading);
  text-align: center;
}

/* ヒーロー見出し内の装飾 */

.hero__emphasis {
  display: inline-flex;
  gap: 0;
  padding-top: var(--hero-em-pt);
}

.hero__emphasis > span {
  position: relative;
  display: inline-block;
}

.hero__emphasis > span::before {
  content: "•";
  position: absolute;
  left: 50%;
  top: var(--hero-em-dot-off-t);
  color: var(--color-accent);
  font-size: var(--hero-em-dot-sz);
  line-height: 1;
  transform: translateX(-50%);
}

/* ヒーロー画像 */

.hero__visual {
  min-width: 0;
}

.hero__visual-mobile {
  display: block;
}

.hero__visual-mobile img {
  width: 100%;
}

.hero__visual-desktop {
  display: none;
  grid-template-columns: minmax(0, 1fr) min(100vw, var(--hero-visual-center-w)) minmax(0, 1fr);
  align-items: stretch;
}

.hero__desktop-visual {
  width: 100%;
  max-width: var(--hero-visual-center-w);
}

.hero__visual-side {
  width: 100%;
  background-image: url("../img/top_image_left_right.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.hero__visual-side--left {
  background-position: right center;
}

.hero__visual-side--right {
  background-position: left center;
}

@media (max-width: 767px) {
  .nav--pc {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu__summary {
    width: var(--menu-sz);
    height: var(--menu-sz);
    flex-basis: var(--menu-sz);
  }

  .mobile-menu[open] + .nav--pc {
    display: block;
    position: absolute;

    /* オーバーレイ表示のため通常フローには戻さない */
    /* ボタン直下にメニューを展開 */
    top: calc(var(--menu-top-off) + var(--menu-sz) + 0.75rem);
    right: var(--gutter-sp);
    width: min(calc(100% - (var(--gutter-sp) * 2)), 22rem);
    margin: 0;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    z-index: var(--z-mobile-menu-panel);
  }

  .mobile-menu[open] + .nav--pc .nav__list {
    gap: 0.5rem;
  }

  .mobile-menu[open] + .nav--pc a {
    padding: 0.2rem 0;
  }

  .header {
    z-index: var(--z-mobile-header);
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
  }

  .hero {
    padding-top: var(--hero-gap-after-head);
    padding-bottom: 2rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__copy {
    max-width: 100%;
  }

  .eyebrow {
    margin: 1.75rem 0 1.35rem;
  }

  .hero__lead {
    margin-bottom: 0;
  }

  .hero__visual-mobile img {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 960px) {
  .hero {
    padding-bottom: 1.25rem;
  }

  .banner-group {
    gap: 2.25rem;
    justify-content: center;
    margin-top: 3.25rem;
  }
}

@media (min-width: 768px) {
  .hero {
    padding-top: 0;
  }

  .hero__inner {
    display: block;
  }

  .hero__visual {
    margin-top: var(--hero-gap-after-head);
  }

  .hero__visual-mobile {
    display: none;
  }

  .hero__visual-desktop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-visual-center-w)) minmax(0, 1fr);
    align-items: stretch;
  }

  .hero__desktop-visual {
    max-width: var(--hero-visual-center-w);
    width: 100%;
  }

  .hero__copy {
    display: block;
    max-width: var(--hero-copy-max-width);
    margin: 2.75rem auto 0;
  }

  .hero__visual-side {
    display: block;
    min-width: 0;
    background-image: url("../img/top_image_left_right.svg");
    background-repeat: repeat-x;
    background-size: auto 100%;
  }

  .hero__visual-side--left {
    background-position: right center;
  }

  .hero__visual-side--right {
    background-position: left center;
  }
}

/* Intro */

.intro {
  padding-top: 0;
}

/* Information */

#information {
  max-width: 50rem;
  margin: 1.75rem auto 0;
  padding: 0 1rem;
}

#information h2 {
  font-family: var(--ff-tbud-e);
  font-size: 1.75rem;
  font-weight: 400;
  text-align: center;
}

#information .container {
  padding: 1rem 2rem;
  background: rgba(253, 232, 224, 0.8);
  border-radius: 0.9375rem;
}

@media (max-width: 767px) {
  #information .container {
    padding: 1rem;
  }
}

/* セクション見出し */

.sec-head > .section-title--primary {
  margin: 0;
}

/* 導入文 */

.intro__statements {
  display: block;
}

.intro__statements > * + * {
  margin-top: var(--intro-gap);
}

/* キーステートメント */

.key-statement {
  text-align: center;
  font-family: var(--ff-tbud-r);
}

.key-statement::before {
  content: "";
  display: block;
  width: var(--key-icon-w);
  height: var(--key-icon-h);
  margin: 0 auto 1.125em;
  background-image: url("../img/key_top.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--key-icon-w) var(--key-icon-h);
}

.key-statement p {
  margin: 0;
  color: var(--color-heading);
  font-family: inherit;
}

/* バナー群 */

.banner-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--banner-gap);
  margin-top: var(--space-3xl);
}

/* Note */

.note {
  padding-top: 0;
}

/* Note tablet and desktop */

@media (min-width: 768px) {
  .note {
    padding-bottom: 0;
  }
}

/* Note desktop */

@media (min-width: 960px) {
  .note-box {
    padding-top: 1.1rem;
    padding-bottom: 1.35rem;
  }
}

/* Service */

.service__lead {
  margin-top: 0;
  text-align: left;
}

.service__lead p {
  margin: 0;
}

.service__lead .button {
  margin-top: var(--sp-service-btn-top);
}

/* Points */

.points {
  margin-top: var(--space-points-top);
}

/* 小見出し本体 */

.subsection-title {
  position: relative;
  z-index: var(--z-decoration-base);
  width: fit-content;
  margin-inline: auto;
  padding-inline: 0.2em;
  text-align: center;
}

/* 小見出しの下線と強調 */

.subsection-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.357em;
  height: 0.393em;
  background: var(--color-accent-mark);
  z-index: var(--z-decoration-behind);
}

.subsection-title__number {
  display: inline-block;
  margin-right: 0.214em;
  color: var(--color-accent);
  font-weight: 700;
}

.subsection-title__emphasis {
  display: inline-flex;
  gap: 0;
  padding-top: var(--subsec-em-pt);
}

.subsection-title__emphasis > span {
  position: relative;
  display: inline-block;
}

.subsection-title__emphasis > span::before {
  content: "•";
  position: absolute;
  left: 50%;
  top: var(--subsec-em-dot-off-t);
  color: var(--color-accent);
  font-size: var(--subsec-em-dot-sz);
  line-height: 1;
  transform: translateX(-50%);
}

/* ポイントカード本文 */

.point-card > p {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-bottom: 0.95rem;
}

/* Points mobile */

@media (max-width: 767px) {
  .points .subsection-title {
    max-width: 100%;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  .point-card > p {
    padding-left: var(--point-body-indent);
    padding-bottom: 0;
  }
}

/* Points tablet and desktop */

@media (min-width: 768px) {
  .point-card {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
  }

  .point-card > p {
    padding-bottom: 0;
  }
}

/* Points desktop */

@media (min-width: 960px) {
  .point-card__heading {
    margin-bottom: calc(var(--point-card-gap) + 0.1rem);
    padding-right: 1.1rem;
  }
}

/* Flow */

.flow {
  padding-top: 0.5rem;

  /* Flow component values */
  --flow-card-width: 16.3125rem;
  --flow-visual-width: 16.3125rem;
  --flow-visual-height: 15rem;
  --flow-heading-width: 9em;
  --flow-body-width: 13.5rem;

  /* Flow layout adjustment */
  --flow-gap-x: 1.5rem;
  --flow-gap-y: 2rem;
}

.flow__list {
  justify-content: flex-start;
  align-items: start;
  gap: var(--space-flow-grid-gap);
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

/* フローカードの骨格 */

.flow-card {
  box-sizing: border-box;
  flex: 0 1 calc((100% - (var(--space-flow-grid-gap) * 2)) / 3);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-content: start;
  align-self: start;
  align-items: center;
  gap: calc(var(--sp-flow-card-gap) + var(--sp-flow-card-gap-xs));
  padding: var(--sp-flow-card-py) var(--sp-flow-card-px);
  text-align: center;
}

/* フローカード内の要素 */

.flow-card__visual {
  display: block;
  width: var(--flow-visual-width, 100%);
  height: var(--flow-visual-height, auto);
  max-width: none;
  margin-inline: auto;
}

.flow-card__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-card__body {
  display: block;
}

.flow-card h3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin: 0 0 var(--sp-flow-body-gap);
  padding: var(--flow-head-py) var(--flow-head-px);
  color: var(--color-heading);
  background: var(--color-accent-panel);
  border-radius: 999px;
}

.flow-card p {
  margin-top: 0;
  min-height: calc(1.7em * var(--flow-text-min-lines));
}

/* Flow mobile */

@media (max-width: 767px) {
  .flow {
    /* スマホは別画像を使用 */
    --flow-visual-width: 15rem;
    --flow-visual-height: auto;
  }

  .flow__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .flow-card {
    width: 100%;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
    grid-template-rows: auto;
    align-items: center;

    /* スマホ横並びの見た目調整 */
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .flow-card__visual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 15rem;
    justify-self: center;
  }

  .flow-card__visual img {
    width: 100%;
  }

  .flow-card__body {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: center;
  }

  .flow-card h3 {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-bottom: 0.5rem;

    /* オレンジ背景の上下バランス補正 */
    padding-top: calc(var(--flow-head-py) + 0.08rem);
    padding-bottom: calc(var(--flow-head-py) - 0.08rem);
  }

  .flow-card p {
    width: 100%;
    min-height: 0;
  }
}

/* Flow tablet and desktop */

@media (min-width: 768px) {
  .flow__list {
    margin-top: var(--sp-flow-title-b);
  }

  .flow-card {
    flex: 0 0 var(--flow-card-width);
    align-self: start;
    width: var(--flow-card-width);
    padding-top: 0;
    padding-bottom: 0;
  }

  .flow-card__visual img {
    height: 100%;
  }

  .flow-card__body {
    width: var(--flow-body-width);
    margin-inline: auto;
  }

  .flow-card h3 {
    box-sizing: border-box;
    width: var(--flow-heading-width);
    max-width: var(--flow-heading-width);
  }

  .flow-card p {
    width: var(--flow-body-width);
  }
}

/* Flow desktop */

@media (min-width: 960px) {
  .flow__list {
    gap: var(--flow-gap-y) 0;

    /* PCカンプ合わせの左余白 */
    padding-left: 1rem;
  }

  .flow-card {
    gap: var(--sp-flow-card-gap-pc);

    /* PCでは画像位置を優先して上余白のみ個別調整 */
    padding-top: 0.85rem;
    padding-left: 0;
    padding-right: 0;
  }

  .flow-card__body {
    /* 見出しと本文の詰まりをPCのみ微調整 */
  }

  .flow-card p {
    min-height: calc(1.7em * 2.4);
  }

  .flow-card h3 {
    margin-bottom: 0.3rem;
  }
}

/* Flow tablet */

@media (min-width: 768px) and (max-width: 959px) {
  .flow__list {
    /* 固定幅カードが自然に折り返す上限 */
    max-width: 42rem;
    gap: var(--flow-gap-y) var(--flow-gap-x);
    margin-inline: auto;
  }
}

/* Certification */

.certification__intro {
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* パネル外側のオレンジ面 */
.cert-panel {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: 1.2rem 1rem;
  background: var(--color-accent-panel);
}

.cert-panel__title {
  margin: 0;

  /* 2種類の見出し高さを揃えるため41px固定で縦中央配置 */
  min-height: var(--sz-cert-panel-title-h);
}

.cert-panel__lead {
  margin: 0;
  text-align: center;
}

.cert-panel__body {
  margin-top: 0;
}

.cert-panel__title + .cert-panel__lead {
  margin-top: var(--sp-cert-panel-lead-gap);
}

.cert-panel__title + .cert-panel__body,
.cert-panel__lead + .cert-panel__body {
  margin-top: var(--sp-cert-panel-body-gap-top);
}

.cert-panel__body--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
}

.cert-panel__s-logo {
  display: block;
  width: min(100%, 35.4375rem);
  height: auto;
}

/* SDGs宣言書の本文側レイアウト */
.cert-panel__body--sdgs {
  padding-top: 0;
  padding-inline: var(--sp-cert-body-px);
  padding-bottom: var(--sp-cert-body-pb);
}

.cert-panel__desc {
  margin: 0;
}

.cert-panel__divider {
  margin-bottom: var(--sp-cert-divider-gap-b);
}

.sdgs-theme {
  padding: var(--sp-cert-theme-py) var(--sp-cert-theme-px);
  margin-top: 0;
}

.cert-panel__desc + .sdgs-theme {
  margin-top: var(--sp-cert-theme-first-gap);
}

.sdgs-theme__divider {
  position: relative;
  z-index: var(--z-decoration-content);
  margin-inline: var(--sp-cert-theme-divider-inset);
  margin-bottom: var(--sp-cert-theme-divider-overlap);
}

.sdgs-theme__label {
  margin: 0;
}

.sdgs-theme__title {
  margin: 0;
}

.sdgs-theme__label + .sdgs-theme__title {
  margin-top: var(--sp-cert-theme-title-gap);
}

.sdgs-theme__highlight {
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
  line-height: inherit;
  margin-block: 0;
}

.sdgs-theme__highlight::before {
  align-self: flex-start;
  transform: translateY(var(--sp-cert-hl-off-y));
}

.sdgs-theme__title-copy {
  display: inline;
}

.sdgs-theme__icons-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-cert-theme-copy-gap);
}

.sdgs-theme__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sdgs-icon-gap);
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
}

.sdgs-theme__icons img {
  display: block;
  width: var(--sdgs-icon-size);
  height: var(--sdgs-icon-size);
  max-width: none;
}

.sdgs-theme__description {
  margin: 0;
}

.sdgs-theme__list-title {
  margin: 0;
}

.sdgs-theme__list {
  margin: 0;
  padding-left: 1.2em;
}

.sdgs-theme__icons-wrap + .sdgs-theme__description {
  margin-top: var(--sp-cert-theme-copy-gap);
}

.sdgs-theme__description + .sdgs-theme__list-title {
  margin-top: var(--sp-cert-theme-list-title-gap);
}

.sdgs-theme__list-title + .sdgs-theme__list {
  margin-top: var(--sp-cert-theme-list-gap);
}

.sdgs-theme__list li::marker {
  color: var(--color-accent);
}

@media (min-width: 960px) {
  .certification {
    padding-top: var(--sp-cert-top-pc);
  }

  .certification__intro {
    margin-bottom: var(--sp-cert-intro-mb-pc);
  }

  .certification__list {
    gap: var(--sp-cert-list-gap-pc);
  }

  .cert-panel {
    padding-top: var(--sp-cert-panel-pt-pc);
    padding-inline: var(--sp-cert-panel-px-pc);
    padding-bottom: var(--sp-cert-panel-pb-pc);
  }

  .cert-panel--sdgs .cert-panel__title + .cert-panel__lead {
    margin-top: var(--sp-cert-panel-lead-gap-desktop);
  }

  .cert-panel--sdgs .cert-panel__lead + .cert-panel__body {
    margin-top: 0;
  }

  .cert-panel--simple {
    padding-top: 0;
  }

  .cert-panel--simple .cert-panel__title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sp-cert-simple-head-h-pc);
  }

  .cert-panel__body--centered {
    margin-top: var(--sp-cert-logo-gap-pc);
    padding-block: var(--sp-cert-logo-py-pc);
    padding-inline: var(--sp-cert-logo-px-pc);
  }

  .cert-panel--simple .cert-panel__body--centered {
    margin-top: 0;
  }

  .cert-panel__body--sdgs {
    padding-top: var(--sp-cert-sdgs-body-pt);
    padding-inline: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .certification__list {
    max-width: 100%;
  }

  .cert-panel {
    padding-block: var(--sp-cert-panel-py-sp);
    padding-inline: var(--sp-cert-panel-px-sp);
  }

  .cert-panel__body--centered {
    padding: 1rem 0.75rem;
  }

  .cert-panel__body--sdgs {
    padding-top: var(--sp-cert-sdgs-body-pt);
    padding-inline: var(--sp-cert-body-px-mobile);
    padding-bottom: var(--sp-cert-body-pb-mobile);
  }

  .sdgs-theme__icons img {
    width: var(--sdgs-icon-size-mobile);
    height: var(--sdgs-icon-size-mobile);
  }
}

/* Contact */

/* 注記 */

.contact__note {
  text-align: center;
  color: var(--color-muted);
}

.contact-form > .contact__note {
  text-align: left;
}

/* セクション本体 */

.contact {
  padding-bottom: 0;
}

/* Contact desktop */

@media (min-width: 960px) {
  .contact {
    padding-top: 2.7rem;
  }

  .form-field input,
  .form-field textarea {
    background: var(--color-control-bg-desktop);
  }

  .contact-form__submit {
    margin-top: 1.3rem;
  }
}

/* Thankyou */

.thanks {
  padding-top: 2.25rem;
}

.thanks__inner {
  display: block;
}

.thanks__inner > * + * {
  margin-top: 1.5rem;
}

.thanks__heading {
  padding-top: 1.125rem;
}

/* Thankyou desktop */

@media (min-width: 960px) {
  .thanks {
    padding-top: 3rem;
  }

  .thanks__heading {
    padding-top: 1.375rem;
  }
}

/* Thankyou mobile */

@media (max-width: 767px) {
  .thanks {
    padding-top: 1.5rem;
  }
}

/* Footer */

.footer {
  color: var(--color-footer-text);
  background: var(--color-accent);
  position: relative;
}

/* 装飾 */

.footer__top::before,
.footer__top::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.footer__top::before {
  width: 2rem;
  aspect-ratio: 32 / 218;
  background-image: url("../img/bottom_background.svg");
}

.footer__top::after {
  width: min(20rem, 34vw);
  aspect-ratio: 293 / 181;
  background-image: url("../img/desktop.svg");
}

/* テキスト */

.footer__info address {
  font-style: normal;
  line-height: 1.75;
}

.footer-company-line,
.footer-address-line,
.footer-contact-block {
  display: block;
  margin: 0;
}

.footer-address-line,
.footer-contact-block,
.footer-contact-line,
.footer-mail-line,
.footer-street-address {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.footer-address-line {
  padding-top: 0.45rem;
}

.footer-contact-block {
  margin-top: 0.1rem;
}

.footer__copy {
  margin: var(--sp-footer-copy-top) 0 0;
  text-align: center;
}

.footer__top {
  position: relative;
  z-index: var(--z-decoration-front);
}

/* Header responsive */

/* Header tablet and desktop */

/* Header tablet */

@media (min-width: 768px) and (max-width: 959px) {
  .header__inner {
    gap: 1rem;
  }

  .nav--pc {
    padding-top: 2rem;
  }

  .nav--pc a {
    gap: 0.55rem;
  }

  .nav--pc a::before {
    width: 0.75rem;
    margin-top: 0.25rem;
  }

}

/* Header desktop */

@media (min-width: 960px) {
  .header__inner {
    gap: 2.5rem;
    min-height: 14.25rem;
  }
}

/* Shared responsive adjustments:
   コンポーネント自体の定義は style.components.css に置き、
   ここでは各セクション文脈で必要な表示切替だけを持つ */

/* Shared mobile overrides */

@media (max-width: 767px) {
  .site-logo {
    /* スマホでは円形ロゴを左にはみ出させる量を比率で制御 */
    left: calc(var(--site-logo-size) * -1 * var(--site-logo-mobile-overflow));
    transform: translate(0, var(--site-logo-offset-y));
  }

  .banner-group {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--banner-w-sp);
    gap: var(--banner-gap-sp);
    margin-inline: auto;
  }

  .intro .sec-head,
  .thanks .sec-head {
    margin-bottom: 1.5rem;
  }

  .sec-head__rule::after {
    display: none;
  }
}

/* Footer tablet and mobile */

@media (max-width: 959px) {
  .footer__info .company-type {
    display: block;
  }

  .footer-address-line {
    display: block;
  }

  .footer-contact-block {
    display: block;
  }

  .footer-postal-code,
  .footer-street-address {
    display: block;
  }

  .footer__top {
    display: none;
  }

  .footer__top::before,
  .footer__top::after {
    display: none;
  }

  .footer-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.25rem;
  }

  .footer-nav {
    max-width: 32rem;
  }

  .footer__info address {
    padding-right: 0;
  }

  .footer__copy {
    margin-top: 1.2rem;
    text-align: center;
  }

  .footer-mail-line {
    display: block;
  }

  .footer-nav li:not(:last-child)::after {
    content: "|";
    margin-left: 0.25rem;
  }
}

/* Footer mobile */

@media (max-width: 767px) {
  .footer-nav ul {
    gap: 0 0.2rem;
  }

  .footer__info address {
    padding-top: 0.1rem;
  }

  .footer__copy {
    margin-top: 1.35rem;
  }
}

/* Footer desktop */

@media (min-width: 960px) {
  .footer__top::after {
    /* フッター外側にはみ出す装飾のため独立配置 */
    position: absolute;
    left: calc(100% - 15.625rem);
    bottom: var(--footer-orn-r-off-b-pc);
    width: 19rem;
    z-index: var(--z-decoration-front);
  }

  .footer__top::before {
    /* フッター外側にはみ出す装飾のため独立配置 */
    position: absolute;
    left: clamp(15rem, 18vw, 17rem);
    bottom: var(--footer-orn-l-off-b-pc);
    z-index: 1;
  }

  .footer__inner {
    padding-top: 1.35rem;
  }
}


/* ===== style.typography.css ===== */
/* Typography Spec */

/* Shared headings */

:where(.sec-head) h2,
.hero h1 {
  line-height: var(--ty-sec-title-main-lh);
}

.thanks__heading h1 {
  font-family: var(--ff-tbud-e);
  font-size: var(--ty-work-page-title-fs);
  line-height: var(--ty-work-page-title-lh);
}

/* Hero */

.eyebrow {
  font-family: var(--ty-hero-eye-ff);
  font-size: var(--ty-hero-eye-fs);
  line-height: var(--ty-hero-eye-lh);
}

.hero h1,
.hero__lead,
.key-statement p {
  font-family: var(--ty-hero-copy-ff);
  font-size: var(--ty-hero-copy-fs);
  line-height: var(--ty-hero-copy-lh);
}

.hero__highlight {
  font-family: var(--ty-hero-hl-ff);
  font-weight: 700;
  font-size: var(--ty-hero-hl-fs);
  line-height: var(--ty-hero-hl-lh);
}

/* Section headings */

.section-title {
  font-family: var(--ty-sec-title-ff);
  line-height: var(--ty-sec-title-main-lh);
}

.section-title--secondary,
.subsection-title {
  font-family: var(--ty-sec-title-ff);
  line-height: var(--ty-sec-title-sub-lh);
}

.section-title--secondary {
  font-size: var(--ty-sec-title-sub-fs);
}

/* points 見出しは副見出しと分けてサイズ調整する */
.subsection-title {
  font-size: var(--ty-subsec-title-fs);
}

.section-title--primary {
  font-family: var(--ty-sec-title-ff);
  font-size: var(--ty-sec-title-main-fs);
  line-height: var(--ty-sec-title-main-lh);
  text-align: center;
}

.subsection-title__number {
  font-size: var(--ty-subsec-num-fs);
}

/* Points */

.point-card h4 {
  font-family: var(--ty-point-title-ff);
  font-size: var(--ty-point-title-fs);
  line-height: var(--ty-point-title-lh);
}

.point-card__number {
  font-family: var(--ty-point-num-ff);
  font-size: var(--ty-point-num-fs);
}

.point-card__sub {
  font-family: var(--ty-point-sub-ff);
  font-size: var(--ty-point-sub-fs);
  display: inline-block;
  line-height: var(--ty-point-sub-lh);
  margin-left: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.point-card > p {
  font-family: var(--ty-point-body-ff);
  font-size: var(--ty-point-body-fs);
  line-height: var(--ty-point-body-lh);
}

/* Header navigation */

.nav--pc .menu-main {
  display: block;
  font-family: var(--ty-nav-main-ff);
  font-size: var(--ty-nav-main-fs);
  line-height: var(--ty-nav-main-lh-pc-2);
}

.nav--pc .nav__list > li:first-child .menu-main {
  font-size: var(--ty-nav-main-fs-featured);
}

.nav--pc .menu-label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.02rem;
}

.nav--pc .menu-sub {
  display: block;
  font-family: var(--ty-body-ff);
  font-size: var(--ty-nav-sub-fs);
  line-height: var(--ty-nav-sub-lh-pc);
}

/* Flow */

.flow-card h3 {
  font-family: var(--ty-flow-title-ff);
  font-size: var(--ty-flow-title-fs);
  line-height: var(--ty-flow-title-lh);
}

.flow-card p {
  font-family: var(--ty-flow-body-ff);
  font-size: var(--ty-flow-body-fs);
  line-height: var(--ty-flow-body-lh);
}

/* Certification */

.cert-panel__lead {
  font-family: var(--ty-cert-lead-ff);
  font-size: var(--ty-cert-lead-fs);
  line-height: var(--ty-cert-lead-lh);
}

.certification__intro {
  font-family: var(--ty-cert-intro-ff);
  font-size: var(--ty-cert-intro-fs);
  line-height: var(--ty-cert-intro-lh);
}

.cert-panel__title {
  font-family: var(--ty-cert-panel-title-ff);
  font-size: var(--ty-cert-panel-title-fs);
  line-height: var(--ty-cert-panel-title-lh);
  text-align: center;
}

.cert-panel__nowrap {
  white-space: nowrap;
}

.cert-panel__desc {
  font-family: var(--ty-cert-desc-ff);
  font-size: var(--ty-cert-desc-fs);
  line-height: var(--ty-cert-desc-lh);
}

.cert-panel__desc--note {
  font-family: var(--ty-cert-note-ff);
  font-size: var(--ty-cert-note-fs);
  line-height: var(--ty-cert-note-lh);
}

.sdgs-theme__label {
  font-family: var(--ty-sdgs-label-ff);
  font-size: var(--ty-sdgs-label-fs);
  line-height: var(--ty-sdgs-label-lh);
  text-align: center;
}

.sdgs-theme__title {
  font-family: var(--ty-sdgs-title-ff);
  font-size: var(--ty-sdgs-title-fs);
  line-height: var(--ty-sdgs-title-lh);
  text-align: center;
}

.sdgs-theme__description {
  font-family: var(--ty-sdgs-body-ff);
  font-size: var(--ty-sdgs-body-fs);
  line-height: var(--ty-sdgs-body-lh);
  color: var(--color-text);
}

.sdgs-theme__list-title {
  font-family: var(--ty-sdgs-list-title-ff);
  font-size: var(--ty-sdgs-list-title-fs);
  line-height: var(--ty-sdgs-list-title-lh);
  font-weight: 400;
  color: var(--color-text);
}

.sdgs-theme__list {
  font-family: var(--ty-sdgs-body-ff);
  font-size: var(--ty-sdgs-body-fs);
  line-height: var(--ty-sdgs-body-lh);
  color: var(--color-text);
}

/* Contact */

.form-field label {
  font-family: var(--ty-form-label-ff);
  font-size: var(--ty-form-label-fs);
  line-height: var(--ty-form-label-lh);
}

.contact__note {
  font-family: var(--ty-contact-note-ff);
  font-size: var(--ty-contact-note-fs);
  line-height: var(--ty-contact-note-lh);
}

.contact-form__error,
.confirm-list dt,
.confirm-list dd {
  font-family: var(--ty-confirm-body-ff);
  font-size: var(--ty-confirm-body-fs);
  line-height: var(--ty-confirm-body-lh);
}

.confirm-list dt {
  font-family: var(--ty-confirm-term-ff);
}

.contact-form__submit {
  font-family: var(--ty-submit-ff);
  font-size: var(--ty-submit-fs);
  line-height: var(--ty-submit-lh);
}

/* Thankyou */

.thanks-card__title {
  font-family: var(--ty-thanks-title-ff);
  font-size: var(--ty-thanks-title-fs);
  line-height: var(--ty-thanks-title-lh);
}

.thanks-card__lead {
  font-family: var(--ty-thanks-lead-ff);
  font-size: var(--ty-thanks-lead-fs);
  line-height: var(--ty-thanks-lead-lh);
}

.thanks-card__note {
  font-family: var(--ty-thanks-note-ff);
  font-size: var(--ty-thanks-note-fs);
  line-height: var(--ty-thanks-note-lh);
}

/* Thankyou desktop */

@media (min-width: 960px) {
  .thanks-card__title {
    font-size: var(--ty-sec-title-main-fs);
    line-height: var(--ty-sec-title-main-lh);
  }

  .thanks-card__lead {
    font-size: var(--ty-cert-intro-fs);
    line-height: 2;
  }

  .thanks-card__note {
    font-size: var(--ty-thanks-note-fs);
    line-height: 1.75;
  }
}

/* Footer */

.footer-nav a {
  font-family: var(--ty-footer-nav-ff);
  font-size: var(--ty-footer-nav-fs);
  line-height: var(--ty-footer-nav-lh);
}

.footer__info strong {
  font-family: var(--ty-footer-company-ff);
  font-size: var(--ty-footer-company-fs);
  line-height: var(--ty-footer-company-lh);
}

.footer__info .company-type {
  font-family: var(--ty-footer-company-type-ff);
  font-size: var(--ty-footer-company-type-fs);
}

.footer__info address,
.footer__copy,
.footer__copy small {
  font-family: var(--ty-footer-meta-ff);
  font-size: var(--ty-footer-meta-fs);
  line-height: var(--ty-footer-meta-lh);
}

.footer-mail-line {
  white-space: nowrap;
}

.footer-address-building {
  display: inline-block;
  white-space: nowrap;
}

/* Shared tablet and desktop typography */

@media (min-width: 768px) {
  .hero__highlight {
    line-height: var(--ty-hero-hl-lh-pc);
  }

  .note-box p {
    font-size: var(--ty-note-body-fs-pc);
    line-height: var(--ty-note-body-lh-pc);
  }

  .note-box h2 {
    line-height: var(--ty-note-title-lh);
  }

  .point-card__number {
    font-family: var(--ty-point-num-ff);
    font-size: var(--ty-point-num-fs-pc);
  }
}

/* Shared mobile typography */

@media (max-width: 767px) {
  .hero h1,
  .hero__lead,
  .key-statement p {
    line-height: var(--ty-hero-copy-lh-sp);
  }

  .hero__highlight {
    line-height: var(--ty-hero-hl-lh-sp);
  }

  .section-title--secondary,
  .subsection-title {
    line-height: var(--ty-sec-title-sub-lh);
  }

  .section-title--primary {
    line-height: var(--ty-sec-title-main-lh-sp);
  }

  .sec-head > .section-title--primary {
    display: flex;
    min-height: calc(var(--ty-sec-title-main-lh-sp) * 2em);
    justify-content: center;
    align-items: center;
  }

  .point-card h4 {
    line-height: var(--ty-point-title-lh-sp);
  }

  .flow-card h3 {
    line-height: var(--ty-flow-title-lh);
  }

  .contact-form__error,
  .confirm-list dt,
  .confirm-list dd {
    line-height: var(--ty-confirm-body-lh-sp);
  }

  .flow-card p {
    line-height: var(--ty-flow-body-lh-sp);
  }

  .nav--pc .menu-sub {
    font-family: var(--ty-nav-sub-ff-sp);
  }

  .footer__info address,
  .footer__copy,
  .footer__copy small {
    line-height: var(--ty-footer-meta-lh-sp);
  }
}

/* Shared mobile-wide typography */

@media (min-width: 480px) and (max-width: 767px) {
  .sec-head > .section-title--primary {
    min-height: calc(var(--ty-sec-title-main-lh) * 2em);
  }
}

/* Shared desktop section title alignment */

@media (min-width: 960px) {
  .sec-head > .section-title--primary {
    display: flex;
    min-height: calc(var(--ty-sec-title-main-lh) * 2em);
    justify-content: center;
    align-items: center;
  }
}

/* Footer compact typography */

@media (min-width: 480px) and (max-width: 767px) {
  .footer-nav a {
    line-height: var(--ty-footer-nav-lh-tab);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    white-space: nowrap;
  }

  .footer__info strong {
    display: block;
    max-width: var(--footer-info-text-max-w);
    line-height: var(--ty-footer-company-lh-tab);
  }

  .footer__info .company-type {
    display: block;
    max-width: var(--footer-info-text-max-w);
    line-height: var(--ty-footer-company-type-lh-tab);
    white-space: nowrap;
  }

  .footer__info address {
    line-height: var(--ty-footer-meta-lh-tab);
  }

  .footer__copy,
  .footer__copy small {
    line-height: var(--ty-footer-meta-lh-tab);
    text-align: center;
  }
}

/* Footer narrow mobile typography */

@media (max-width: 479px) {
  .footer-nav a {
    line-height: var(--ty-footer-nav-lh-sp);
  }

  .footer__info strong {
    max-width: var(--footer-info-text-max-w);
    line-height: var(--ty-footer-company-lh-sp);
    letter-spacing: -0.02em;
  }

  .footer__info .company-type {
    display: block;
    max-width: var(--footer-info-text-max-w);
    line-height: var(--ty-footer-company-type-lh-sp);
    white-space: nowrap;
  }

  .footer__info address {
    line-height: var(--ty-footer-address-lh-sp);
  }

  .footer-mail-line {
    display: block;
  }

  .footer__copy,
  .footer__copy small {
  }
}


/* ===== style.responsive.css ===== */
/* Smartphone */

@media (max-width: 767px) {
  :root {
    --space-section-block: 2.75rem;
    --header-inner-min-h: calc(var(--site-logo-size) * 0.5);
    --hero-gap-after-head: 0;
    --rt-strong-mark-off-b: var(--rt-strong-mark-off-b-sp);
    --rt-strong-mark-h: var(--rt-strong-mark-h-sp);
    --site-logo-w-sp: 72vw;
    --site-logo-max-sp: 20rem;
    --site-logo-size: min(var(--site-logo-w-sp), var(--site-logo-max-sp));
    --site-logo-img-w: calc(var(--site-logo-size) * var(--site-logo-img-ratio));
    --site-logo-pt: calc(var(--site-logo-size) * var(--site-logo-pt-ratio));
    --site-logo-offset-y: calc(var(--site-logo-size) * var(--site-logo-off-y-ratio));
    --hero-highlight-size: 1.3125rem;
    --menu-sz: 3rem;
    --menu-icon-sz: 3rem;
    --point-number-size: 2.75rem;
    --point-num-ring: 0.125rem;
    --point-card-gap: 0.55rem;
    --point-card-px: 0.35rem;
    --point-head-pr: 0;
    --point-head-pl: 0;
    --point-body-indent: 0;
    --form-gap-row: 0.875rem;
    --form-gap-column: 0.875rem;
    --form-control-py: 0;
    --form-control-px: 0.8rem;
    --main-pb: 4.5rem;
    --footer-top-padding: 1.5rem;
    --footer-body-pt: 1.25rem;
    --footer-body-pb: 1.75rem;
    --footer-max-w: 40rem;
    --footer-info-gap: 1.25rem;
    --footer-info-mt: 1.4rem;
    --footer-info-min-h: 7.4rem;
    --footer-logo-width: 7rem;
    --footer-logo-top: 0.3rem;
    --footer-logo-right: 0;
    --footer-info-text-max-w: calc(100% - 7.3rem);
    --form-label-width: 14rem;
    --menu-top-off: 1.4rem;
  }

  .contact-form__confirm {
    padding: 0.85rem 0.9rem;
  }

  .confirm-list {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .confirm-list__term,
  .confirm-list__value {
    grid-column: 1;
  }

  .confirm-list dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .confirm-list dd {
    padding-bottom: 0.75rem;
  }

  .contact-form__actions {
    flex-direction: column;
    align-items: center;
  }

  .contact-form__submit {
    width: min(100%, 18rem);
    min-width: 15rem;
  }
}

/* Tablet */

@media (min-width: 768px) and (max-width: 959px) {
  :root {
    --space-section-block: 3rem;
    --header-inner-min-h: 12.25rem;
    --hero-gap-after-head: 1.125rem;
    --site-logo-size: 22.5rem;
    --site-logo-img-w: 12.5rem;
    --site-logo-pt: 12.5rem;
    --site-logo-offset-x: -1rem;
    --site-logo-offset-y: -11.25rem;
    --nav-pc-pr: 1rem;
    --main-pb: 5rem;
    --footer-max-w: 40rem;
    --footer-info-gap: 1.25rem;
    --footer-info-mt: 1.5rem;
    --footer-info-min-h: 7rem;
    --footer-logo-width: clamp(9.5rem, 33vw, 11.5rem);
    --footer-logo-top: 0.25rem;
    --footer-logo-right: 0.5rem;
    --footer-info-text-max-w: calc(100% - clamp(9.5rem, 33vw, 11.5rem) - 0.75rem);
    --form-label-width: 14rem;
    --confirm-label-w: 10rem;
    --sec-rule-pencil-w: 2.875rem;
    --sec-rule-pencil-r: calc(50% - 29.0625rem);
    --ty-form-label-fs: 1rem;
    --ty-confirm-body-fs: 0.9375rem;
    --ty-work-page-title-fs: 2rem;
    --ty-thanks-title-fs: 1.8125rem;
    --ty-thanks-lead-fs: 1rem;
    --ty-footer-company-type-fs: 0.875rem;
  }

  .confirm-list {
    gap: 0;
  }

}

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    /* Large SP typography */
    --ty-body-fs: 1rem;
    --ty-hero-eye-fs: 1.9375rem;
    --ty-hero-copy-fs: 1.0625rem;
    --ty-hero-hl-fs: 1.6875rem;
    --ty-sec-title-main-fs: 1.6875rem;
    --ty-sec-title-sub-fs: 1.5rem;
    --ty-subsec-title-fs: 1.5rem;
    --ty-subsec-num-fs: 2.125rem;
    --ty-point-title-fs: 1.25rem;
    --ty-point-sub-fs: 1.0625rem;
    --ty-point-body-fs: var(--ty-body-fs);
    --ty-flow-title-fs: 1.25rem;
    --ty-flow-body-fs: 0.9375rem;
    --ty-form-label-fs: 1rem;
    --ty-confirm-body-fs: 0.9375rem;
    --ty-cert-lead-fs: 1.0625rem;
    --ty-cert-panel-title-fs: 1.5rem;
    --ty-sdgs-label-fs: 1rem;
    --ty-sdgs-title-fs: 1.5rem;
    --ty-sdgs-body-fs: var(--ty-body-fs);
    --ty-sdgs-list-title-fs: var(--ty-body-fs);
    --ty-work-page-title-fs: 1.9375rem;
    --ty-thanks-title-fs: 1.6875rem;
    --ty-thanks-lead-fs: 0.9375rem;
    --sp-cert-theme-px: 1rem;
    --sp-cert-theme-divider-inset: 2rem;

    /* Large SP points */
    --point-num-mr: 0.75rem;

    /* Large SP footer */
    --ty-footer-company-fs: 1.125rem;
    --ty-footer-company-type-fs: 0.875rem;
    --ty-footer-meta-fs: 0.875rem;
    --footer-max-w: 40rem;
    --footer-info-mt: 1.5rem;
    --footer-info-min-h: 7rem;
    --footer-logo-width: 11.5rem;
    --footer-info-text-max-w: calc(100% - 11.8rem);
  }
}

@media (max-width: 479px) {
  :root {
    /* Small SP typography */
    --ty-body-fs: 1rem;
    --ty-hero-eye-fs: 1.6875rem;
    --ty-hero-copy-fs: 1.0625rem;
    --ty-hero-hl-fs: 1.5rem;
    --ty-sec-title-main-fs: 1.5rem;
    --ty-sec-title-sub-fs: 1.3125rem;
    --ty-subsec-title-fs: 1.125rem;
    --ty-subsec-num-fs: 1.75rem;
    --ty-point-title-fs: 1.125rem;
    --ty-point-sub-fs: 0.9375rem;
    --ty-point-body-fs: var(--ty-body-fs);
    --ty-flow-title-fs: 1.125rem;
    --ty-flow-body-fs: 0.9375rem;
    --ty-form-label-fs: var(--ty-body-fs);
    --ty-confirm-body-fs: 0.9375rem;
    --ty-cert-lead-fs: 1.0625rem;
    --ty-cert-panel-title-fs: 1.25rem;
    --ty-sdgs-label-fs: 1rem;
    --ty-sdgs-title-fs: 1.25rem;
    --ty-sdgs-body-fs: var(--ty-body-fs);
    --ty-sdgs-list-title-fs: var(--ty-body-fs);
    --ty-work-page-title-fs: 1.6875rem;
    --ty-thanks-title-fs: 1.5rem;
    --ty-thanks-lead-fs: 1rem;
    --sp-cert-theme-px: 1rem;
    --sp-cert-theme-divider-inset: 2rem;

    /* Small SP points */
    --point-num-mr: 0.75rem;

    /* Small SP footer */
    --ty-footer-company-fs: 1.125rem;
    --ty-footer-company-type-fs: 0.875rem;
    --ty-footer-meta-fs: 0.875rem;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== work.css ===== */
body.work-page {
  background: var(--color-white);
  --work-hero-offset: 3.75rem;
  --work-hero-band-height: 8.125rem;
  --work-hero-padding-bottom: 2.9rem;
  --work-hero-title-font-size: var(--ty-work-page-title-fs);
  --work-hero-title-line-height: var(--ty-work-page-title-lh);
  --work-hero-lead-padding-top: 1.25rem;
  --work-hero-lead-max-width: var(--content-wide);
  --work-hero-lead-font-size: var(--ty-work-lead-fs);
  --work-hero-lead-line-height: var(--ty-work-lead-lh);
  --work-voice-gap: 1.5rem;
  --work-voice-columns: 6.6rem minmax(0, 1fr);
  --work-voice-icon-max-width: 6.35rem;
  --work-voice-bubble-padding-top: 0.95rem;
  --work-voice-bubble-padding-x: 1.45rem;
  --work-voice-bubble-padding-bottom: 0.9rem;
  --work-voice-bubble-radius: 1.1rem;
  --work-voice-body-margin-top: 0.15rem;
  --work-voice-tail-offset: -1rem;
  --work-voice-tail-width: 1.75rem;
  --work-voice-tail-height: var(--work-voice-tail-width);

  /* Case card */
  --work-case-list-width: var(--content-wide);
  --work-case-list-gap: 3.75rem;
  --work-case-list-padding-bottom: 4rem;
  --work-case-card-margin-inline: 0;
  --work-case-card-padding-top: 1.65rem;
  --work-case-card-padding-x: 1.3rem;
  --work-case-card-padding-bottom: 1.45rem;
  --work-case-heading-padding-left: 5.9rem;
  --work-case-heading-icon-top: 0.4rem;
  --work-case-heading-icon-left: 0.55rem;
  --work-case-heading-icon-width: 3rem;
  --work-case-heading-icon-height: 6.375rem;
  --work-case-heading-main-gap: 0.45rem;
  --work-case-title-row-gap: 1.05rem;
  --work-case-label-max-width: 6.375rem;
  --work-case-title-font-size: var(--ty-work-case-title-fs);
  --work-case-title-line-height: var(--ty-work-case-title-lh);
  --work-case-catch-font-size: var(--ty-work-catch-fs);
  --work-case-catch-line-height: var(--ty-work-catch-lh);
  --work-case-catch-frame-width: 38.5rem;
  --work-case-catch-frame-min-width: 29rem;
  --work-case-catch-side-width: 2.25rem;
  --work-case-catch-text-padding-top: 0.1rem;
  --work-case-catch-text-padding-x: 0.35rem;
  --work-case-catch-text-padding-bottom: 0.25rem;
  --work-case-catch-corner-size: 2.55rem;
  --work-case-catch-corner-top: -0.12rem;
  --work-case-catch-corner-bottom: 0.08rem;
  --work-case-body-gap: 1rem;
  --work-case-body-margin-top: 1.15rem;
  --work-case-panel-padding-bottom: 0.15rem;
  --work-case-visual-padding-y: 1rem;
  --work-case-panel-padding-x: 1.55rem;
  --work-case-detail-gap: 0.75rem;
  --work-case-detail-padding-top: 0.8rem;
  --work-case-detail-padding-x: var(--work-case-panel-padding-x);
  --work-case-detail-padding-bottom: 1.25rem;
  --work-case-detail-heading-font-size: var(--ty-work-detail-heading-fs);
  --work-case-detail-heading-line-height: var(--ty-work-detail-heading-lh);
  --work-case-detail-body-font-size: var(--ty-work-detail-body-fs);
  --work-case-detail-body-line-height: var(--ty-work-detail-body-lh);
  --work-case-voice-heading-font-size: var(--ty-work-voice-heading-fs);
  --work-case-voice-heading-line-height: var(--ty-work-voice-heading-lh);
  --work-case-voice-body-font-size: var(--ty-work-voice-body-fs);
  --work-case-voice-body-line-height: var(--ty-work-voice-body-lh);
  --work-mobile-body-font-size: initial;
  --work-mobile-body-line-height: initial;
}

@media (min-width: 768px) and (max-width: 959px) {
  body.work-page {
    --work-hero-title-font-size: 2rem;
    --work-hero-lead-font-size: 1rem;
    --work-case-title-font-size: 1.125rem;
    --work-case-catch-font-size: 1.375rem;
    --work-case-detail-heading-font-size: 1rem;
    --work-case-detail-body-font-size: 1rem;
    --work-case-voice-heading-font-size: 1rem;
    --work-case-voice-body-font-size: 1rem;
  }
}

/* ヒーロー */
.work-hero {
  padding: var(--work-hero-offset) 0 var(--work-hero-padding-bottom);
}

.work-hero__title {
  background: var(--color-accent);
}

.work-hero__title .inner {
  display: grid;
  place-items: center;
  min-height: var(--work-hero-band-height);
}

.work-hero__title h1 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--ty-work-page-title-ff);
  font-size: var(--work-hero-title-font-size);
  line-height: var(--work-hero-title-line-height);
  font-weight: 700;
}

.work-hero__lead {
  padding-top: var(--work-hero-lead-padding-top);
}

.work-hero__lead p {
  max-width: var(--work-hero-lead-max-width);
  margin: 0 auto;
  color: var(--color-ink);
  font-family: var(--ty-work-lead-ff);
  font-size: var(--work-hero-lead-font-size);
  line-height: var(--work-hero-lead-line-height);
  text-align: left;
}

.work-hero__lead a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* 事例カード一覧 */
.case-list {
  padding-bottom: var(--work-case-list-padding-bottom);
}

.case-list__inner {
  display: grid;
  width: min(100%, var(--work-case-list-width));
  margin-inline: auto;
  gap: var(--work-case-list-gap);
}

/* 事例カード共通 */
.case-card {
  display: grid;
  gap: 0;
  margin-inline: var(--work-case-card-margin-inline);
  padding: var(--work-case-card-padding-top) var(--work-case-card-padding-x) var(--work-case-card-padding-bottom);
  background: var(--color-case-surface);
}

/* カード見出し */
.case-card__heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0 0 0 var(--work-case-heading-padding-left);
  background: transparent;
}

.case-card__heading::before {
  content: "";
  position: absolute;
  top: var(--work-case-heading-icon-top);
  left: var(--work-case-heading-icon-left);
  width: var(--work-case-heading-icon-width);
  height: var(--work-case-heading-icon-height);
  background: url("../img/key_our_work.svg") center / auto no-repeat;
}

.case-card__heading-main {
  display: grid;
  gap: var(--work-case-heading-main-gap);
}

.case-card__title-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--work-case-title-row-gap);
}

.case-card__label {
  width: var(--work-case-label-max-width);
  max-width: 100%;
  height: auto;
  display: block;
}

.case-card__title {
  margin: 0;
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--ty-work-case-title-ff);
  font-size: var(--work-case-title-font-size);
  font-weight: 700;
  line-height: var(--work-case-title-line-height);
}

/* キャッチコピー */
.case-card__catch {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--ty-work-catch-ff);
  font-size: var(--work-case-catch-font-size);
  font-weight: 700;
  line-height: var(--work-case-catch-line-height);
  text-align: center;
}

.case-card__catch-frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--work-case-catch-side-width) minmax(0, 1fr) var(--work-case-catch-side-width);
  width: min(100%, var(--work-case-catch-frame-width));
  min-width: var(--work-case-catch-frame-min-width);
}

.case-card__catch-text {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--work-case-catch-text-padding-top) var(--work-case-catch-text-padding-x) var(--work-case-catch-text-padding-bottom);
  min-height: calc(1.45em * 2);
}

.case-card__catch-frame::before,
.case-card__catch-frame::after {
  content: "";
  position: absolute;
  width: var(--work-case-catch-corner-size);
  height: var(--work-case-catch-corner-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.case-card__catch-frame::before {
  top: var(--work-case-catch-corner-top);
  left: 0;
  background-image: url("../img/corner_bracket_left.svg");
}

.case-card__catch-frame::after {
  right: 0;
  bottom: var(--work-case-catch-corner-bottom);
  background-image: url("../img/corner_bracket_right.svg");
}

/* カード本文 */
.case-card__body {
  display: grid;
  gap: var(--work-case-body-gap);
  margin-top: var(--work-case-body-margin-top);
}

.case-card__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 0 var(--work-case-panel-padding-bottom);
  background: var(--color-white);
}

.case-card__visual {
  display: grid;
  place-items: center;
  align-self: start;
  padding: var(--work-case-visual-padding-y) var(--work-case-panel-padding-x);
  background: var(--color-white);
  border: 0;
}

.case-card__visual source,
.case-card__visual img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.case-card__details {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  column-gap: var(--work-case-detail-gap);
  row-gap: var(--work-case-detail-padding-top);
  margin: 0;
  padding: var(--work-case-detail-padding-top) var(--work-case-detail-padding-x) var(--work-case-detail-padding-bottom);
  background: var(--color-white);
  border: 0;
}

.case-card__details dt {
  grid-column: 1;
  color: var(--color-ink);
  font-family: var(--ty-work-detail-heading-ff);
  font-size: var(--work-case-detail-heading-font-size);
  line-height: var(--work-case-detail-heading-line-height);
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  width: 8.5em;
}

.case-card__details dt > span {
  display: inline-block;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

.case-card__details dt::after {
  content: "：";
  flex: 0 0 auto;
}

.case-card__details dd {
  grid-column: 2;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--ty-work-detail-body-ff);
  font-size: var(--work-case-detail-body-font-size);
  line-height: var(--work-case-detail-body-line-height);
}

/* 吹き出し
   gap はアイコン端から吹き出し先端までの見え方基準で管理する */
.case-card__voice {
  display: grid;
  grid-template-columns: var(--work-voice-columns);
  gap: var(--work-voice-gap);
  align-items: center;
}

.case-card__voice-icon {
  width: auto;
  max-width: var(--work-voice-icon-max-width);
  margin-top: 0;
}

.case-card__voice-bubble {
  position: relative;
  padding: var(--work-voice-bubble-padding-top) var(--work-voice-bubble-padding-x) var(--work-voice-bubble-padding-bottom);
  background: var(--color-white);
  border: 0;
  border-radius: var(--work-voice-bubble-radius);
}

.case-card__voice-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--work-voice-tail-offset);
  width: var(--work-voice-tail-width);
  height: var(--work-voice-tail-height);
  background: var(--color-white);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: translateY(-50%);
}

.case-card__voice-bubble h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--ty-work-voice-heading-ff);
  font-size: var(--work-case-voice-heading-font-size);
  line-height: var(--work-case-voice-heading-line-height);
  font-weight: 700;
}

.case-card__voice-bubble p {
  margin: var(--work-voice-body-margin-top) 0 0;
  color: var(--color-ink);
  font-family: var(--ty-work-voice-body-ff);
  font-size: var(--work-case-voice-body-font-size);
  line-height: var(--work-case-voice-body-line-height);
}

/* スマホ */
@media (min-width: 480px) and (max-width: 767px) {
  body.work-page {
    --work-hero-offset: 1.5rem;
    --work-hero-band-height: 4.0625rem;
    --work-hero-padding-bottom: 2rem;
    --work-hero-title-font-size: 1.9375rem;
    --work-hero-title-line-height: 1.5;
    --work-hero-lead-padding-top: 1rem;
    --work-hero-lead-max-width: 100%;
    --work-hero-lead-font-size: 0.9375rem;
    --work-hero-lead-line-height: 2;
    --work-voice-columns: 3.35rem minmax(0, 1fr);
    --work-voice-gap: 0.55rem;
    --work-voice-icon-max-width: 3.25rem;
    --work-voice-bubble-padding-top: 0.55rem;
    --work-voice-bubble-padding-x: 0.7rem;
    --work-voice-bubble-padding-bottom: 0.6rem;
    --work-voice-bubble-radius: 0.8rem;
    --work-case-card-padding-top: 0.7rem;
    --work-case-card-padding-x: 0.75rem;
    --work-case-card-padding-bottom: 0.75rem;
    --work-case-heading-padding-left: 2.55rem;
    --work-voice-body-margin-top: 0.15rem;
    --work-case-heading-icon-top: 50%;
    --work-case-heading-icon-left: 0.1rem;
    --work-case-heading-icon-width: 2.55rem;
    --work-case-heading-icon-height: 4.5rem;
    --work-case-title-row-gap: 0.55rem;
    --work-case-label-max-width: 3.9375rem;
    --work-case-title-font-size: 1.0625rem;
    --work-case-catch-font-size: 1.25rem;
    --work-case-catch-frame-width: 100%;
    --work-case-catch-frame-min-width: 0;
    --work-case-catch-side-width: 1.2rem;
    --work-case-catch-text-padding-x: 0.2rem;
    --work-case-catch-text-padding-bottom: 0.15rem;
    --work-case-catch-corner-size: 1.425rem;
    --work-case-catch-corner-top: -0.04rem;
    --work-case-catch-corner-bottom: 0.02rem;
    --work-case-body-gap: 0.75rem;
    --work-case-body-margin-top: 0.55rem;
    --work-case-list-padding-bottom: 3rem;
    --work-case-card-margin-inline: 0.5rem;
    --work-case-panel-padding-x: 0;
    --work-case-detail-gap: 0.1rem;
    --work-case-detail-padding-top: 0.55rem;
    --work-case-detail-padding-x: 0.5rem;
    --work-case-detail-padding-bottom: 0.7rem;
    --work-mobile-body-font-size: 0.9375rem;
    --work-mobile-body-line-height: 1.8;
    --work-case-detail-heading-font-size: var(--work-mobile-body-font-size);
    --work-case-detail-body-font-size: var(--work-mobile-body-font-size);
    --work-case-detail-body-line-height: var(--work-mobile-body-line-height);
    --work-case-voice-heading-font-size: var(--work-mobile-body-font-size);
    --work-case-voice-body-font-size: var(--work-mobile-body-font-size);
    --work-case-voice-body-line-height: var(--work-mobile-body-line-height);
    --work-voice-tail-offset: -0.45rem;
    --work-voice-tail-width: 0.72rem;
    --work-voice-tail-height: 0.82rem;
  }
}

@media (max-width: 479px) {
  body.work-page {
    --work-hero-offset: 1.5rem;
    --work-hero-band-height: 4.0625rem;
    --work-hero-padding-bottom: 2rem;
    --work-hero-title-font-size: 1.6875rem;
    --work-hero-title-line-height: 1.5;
    --work-hero-lead-padding-top: 1rem;
    --work-hero-lead-max-width: 100%;
    --work-hero-lead-font-size: 1rem;
    --work-hero-lead-line-height: 2;
    --work-voice-columns: 3.35rem minmax(0, 1fr);
    --work-voice-gap: 0.55rem;
    --work-voice-icon-max-width: 3.25rem;
    --work-voice-bubble-padding-top: 0.55rem;
    --work-voice-bubble-padding-x: 0.7rem;
    --work-voice-bubble-padding-bottom: 0.6rem;
    --work-voice-bubble-radius: 0.8rem;
    --work-case-card-padding-top: 0.7rem;
    --work-case-card-padding-x: 0.75rem;
    --work-case-card-padding-bottom: 0.75rem;
    --work-case-heading-padding-left: 2.55rem;
    --work-voice-body-margin-top: 0.15rem;
    --work-case-heading-icon-top: 50%;
    --work-case-heading-icon-left: 0.1rem;
    --work-case-heading-icon-width: 2.55rem;
    --work-case-heading-icon-height: 4.5rem;
    --work-case-title-row-gap: 0.55rem;
    --work-case-label-max-width: 3.9375rem;
    --work-case-title-font-size: 1rem;
    --work-case-catch-font-size: 1.125rem;
    --work-case-catch-frame-width: 100%;
    --work-case-catch-frame-min-width: 0;
    --work-case-catch-side-width: 1.2rem;
    --work-case-catch-text-padding-x: 0.2rem;
    --work-case-catch-text-padding-bottom: 0.15rem;
    --work-case-catch-corner-size: 1.425rem;
    --work-case-catch-corner-top: -0.04rem;
    --work-case-catch-corner-bottom: 0.02rem;
    --work-case-body-gap: 0.75rem;
    --work-case-body-margin-top: 0.55rem;
    --work-case-list-padding-bottom: 3rem;
    --work-case-card-margin-inline: 0.5rem;
    --work-case-panel-padding-x: 0;
    --work-case-detail-gap: 0.1rem;
    --work-case-detail-padding-top: 0.55rem;
    --work-case-detail-padding-x: 0.5rem;
    --work-case-detail-padding-bottom: 0.7rem;
    --work-mobile-body-font-size: 1rem;
    --work-mobile-body-line-height: 1.8;
    --work-case-detail-heading-font-size: var(--work-mobile-body-font-size);
    --work-case-detail-body-font-size: var(--work-mobile-body-font-size);
    --work-case-detail-body-line-height: var(--work-mobile-body-line-height);
    --work-case-voice-heading-font-size: var(--work-mobile-body-font-size);
    --work-case-voice-body-font-size: var(--work-mobile-body-font-size);
    --work-case-voice-body-line-height: var(--work-mobile-body-line-height);
    --work-voice-tail-offset: -0.45rem;
    --work-voice-tail-width: 0.72rem;
    --work-voice-tail-height: 0.82rem;
  }
}

@media (max-width: 767px) {
  .case-card__heading {
    align-items: center;
  }

  .case-card__heading::before {
    transform: translateY(-50%);
  }

  .case-card__visual img {
    width: 100%;
  }

  .case-card__details {
    grid-template-columns: 1fr;
    row-gap: var(--work-case-detail-gap);
  }

  .case-card__details dt,
  .case-card__details dd {
    grid-column: 1;
  }

  .case-card__details dt {
    width: auto;
  }

  .case-card__details dd:not(:last-child) {
    margin-bottom: calc(var(--work-case-detail-padding-top) - var(--work-case-detail-gap));
  }

  .case-card__details dt > span {
    width: auto;
    text-align: left;
    text-align-last: auto;
  }
}