@charset "UTF-8";
/* ============================================================================
   HART社労士事務所 — IBM Carbon Design System 準拠
   ----------------------------------------------------------------------------
   トークンは Carbon リポジトリの一次ソースから取得した値をそのまま使用。
     色     packages/colors/src/dtcg/colors.json
            packages/themes/src/dtcg/themes.json（White テーマ）
            packages/themes/src/dtcg/components/button.json
     字     packages/type/src/{scale,styles}.ts
     間隔   packages/layout/src/dtcg/layout.json
     動き   packages/motion/src/dtcg/motion.json
   ----------------------------------------------------------------------------
   Carbon は Apache-2.0、IBM Plex は SIL OFL 1.1。いずれも利用可。
   2026-09-27 配色変更：ネイビーと白を主体に、ゴールドを差し色に。
   白地の上のゴールドの文字は、読みやすさのため濃いめの --gold-text を使う。
   ============================================================================ */

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* --- グレースケール（colors.json） --- */
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;

  /* --- ブルー（colors.json） --- */
  /* 旧 Carbon Blue の変数名のまま、ネイビー系の値に置き換え */
  --blue-20: #e3e9f2;
  --blue-40: #8fa6c4;
  --blue-60: #1f3f6b;
  --blue-70: #16335a;
  --blue-80: #0c2340;

  /* --- ゴールド（差し色。濃紺の上の細い罫だけに使う） --- */
  --gold: #b99a5b;
  --gold-soft: rgba(185, 154, 91, 0.55);
  --gold-hover: #cbb07a;
  --gold-text: #86692f;   /* 白地で読める濃さ（コントラスト 4.5:1 以上） */

  /* --- White テーマのトークン（themes.json） --- */
  --background: #ffffff;
  --background-inverse: #393939;
  --layer-01: #f5f7fa;
  --layer-02: #ffffff;
  --layer-hover-01: #eaeef4;
  --layer-accent-01: #e0e0e0;
  --field-01: #f3f5f9;
  --field-hover-01: #e8edf4;
  --border-subtle-00: #dfe4ec;
  --border-subtle-01: #c6c6c6;
  --border-strong-01: #8d8d8d;
  --border-inverse: #161616;
  --border-interactive: #1f3f6b;
  --text-primary: #14213d;
  --text-secondary: #4a5568;
  --text-helper: #667085;
  --text-on-color: #ffffff;
  --text-error: #da1e28;
  --link-primary: #1f3f6b;
  --link-primary-hover: #0c2340;
  --icon-primary: #161616;
  --icon-secondary: #525252;
  --focus: #1f3f6b;
  --focus-inset: #ffffff;
  --support-error: #da1e28;
  --support-success: #24a148;
  --highlight: #e3e9f2;
  --interactive: #1f3f6b;

  /* --- ボタン（button.json） --- */
  --button-primary: #0c2340;
  --button-primary-hover: #1f3f6b;
  --button-primary-active: #081a30;
  --button-secondary: #393939;
  --button-secondary-hover: #474747;
  --button-tertiary: #0c2340;
  --button-tertiary-hover: #1f3f6b;
  --button-separator: #e0e0e0;

  /* --- HART のブランド色（非インタラクティブな面にだけ使う） --- */
  --brand-navy: #0c2340;
  --brand-navy-deep: #081a30;
  --brand-navy-hover: #16335a;

  /* --- 間隔（layout.json の値 ×8px） --- */
  --spacing-01: 0.125rem;  /*   2px */
  --spacing-02: 0.25rem;   /*   4px */
  --spacing-03: 0.5rem;    /*   8px */
  --spacing-04: 0.75rem;   /*  12px */
  --spacing-05: 1rem;      /*  16px */
  --spacing-06: 1.5rem;    /*  24px */
  --spacing-07: 2rem;      /*  32px */
  --spacing-08: 2.5rem;    /*  40px */
  --spacing-09: 3rem;      /*  48px */
  --spacing-10: 4rem;      /*  64px */
  --spacing-11: 5rem;      /*  80px */
  --spacing-12: 6rem;      /*  96px */
  --spacing-13: 10rem;     /* 160px */

  /* --- 動き（motion.json） --- */
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;
  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);

  /* --- 2x グリッド --- */
  --grid-gutter: 2rem;      /* 32px */
  --grid-margin: 1rem;      /* 16px */
  --grid-max: 99rem;        /* 1584px */
  --header-height: 3rem;    /* 48px */

  --font-sans: "IBM Plex Sans", "IBM Plex Sans JP", -apple-system,
    BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------ Base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul,
ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Carbon のフォーカスは 2px のソリッドアウトライン。角丸は付けない。 */
:where(a, button, summary, input, select, textarea, details):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pc-only {
  display: none;
}
@media (min-width: 42rem) {
  .pc-only {
    display: inline;
  }
}

/* ------------------------------------------------------------------ Type -- */
/* Carbon type scale（styles.ts の値をそのまま） */

.label-01 {
  font-size: 0.75rem;   /* 12px */
  line-height: 1.33333;
  letter-spacing: 0.32px;
  font-weight: 400;
}
.helper-text-01 {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}
.body-01 {
  font-size: 0.875rem;  /* 14px */
  line-height: 1.42857;
  letter-spacing: 0.16px;
}
.body-02 {
  font-size: 1rem;      /* 16px */
  line-height: 1.5;
  letter-spacing: 0;
}
.heading-01 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.42857;
  letter-spacing: 0.16px;
}
.heading-02 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* expressiveHeading03: 20px（max で 24px） */
.expressive-03 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}
@media (min-width: 99rem) {
  .expressive-03 {
    font-size: 1.5rem;
    line-height: 1.334;
  }
}

/* expressiveHeading04: 28px（xlg で 32px） */
.expressive-04 {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.28572;
}
@media (min-width: 82rem) {
  .expressive-04 {
    font-size: 2rem;
    line-height: 1.25;
  }
}

/* expressiveHeading05: 32 → 36(light) → 42 → 48 → 60px */
.expressive-05 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25;
}
@media (min-width: 42rem) {
  .expressive-05 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.22;
  }
}
@media (min-width: 66rem) {
  .expressive-05 {
    font-size: 2.625rem;
    line-height: 1.19;
  }
}
@media (min-width: 82rem) {
  .expressive-05 {
    font-size: 3rem;
    line-height: 1.17;
  }
}

/* expressiveParagraph01: 24px light（lg で 28px） */
.expressive-paragraph {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.334;
}
@media (min-width: 66rem) {
  .expressive-paragraph {
    font-size: 1.75rem;
  }
}

/* ------------------------------------------------------------- 2x Grid --- */
/* Carbon の 2x グリッド: sm 4列 / md 8列 / lg 以上 16列、ガター 32px */
.cds-grid {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
@media (min-width: 42rem) {
  .cds-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 66rem) {
  .cds-grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
}

/* 列スパン。sm/md/lg の3段階だけ用意する */
.col-full {
  grid-column: 1 / -1;
}
@media (min-width: 42rem) {
  .md-4 { grid-column: span 4; }
  .md-5 { grid-column: span 5; }
  .md-6 { grid-column: span 6; }
  .md-8 { grid-column: span 8; }
}
@media (min-width: 66rem) {
  .lg-4 { grid-column: span 4; }
  .lg-5 { grid-column: span 5; }
  .lg-6 { grid-column: span 6; }
  .lg-7 { grid-column: span 7; }
  .lg-8 { grid-column: span 8; }
  .lg-9 { grid-column: span 9; }
  .lg-10 { grid-column: span 10; }
  .lg-12 { grid-column: span 12; }
  .lg-16 { grid-column: span 16; }
  .lg-start-3 { grid-column-start: 3; }
  .lg-start-5 { grid-column-start: 5; }
}

/* セクションの縦リズム */
.section {
  padding-block: var(--spacing-10);
}
@media (min-width: 66rem) {
  .section {
    padding-block: var(--spacing-12);
  }
}
.section--layer {
  background: var(--layer-01);
}
.section--tight {
  padding-block: var(--spacing-09);
}

/* 見出しの上に置く小さなラベル（Carbon の eyebrow） */
.eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
  padding-bottom: var(--spacing-05);
  margin-bottom: var(--spacing-06);
  border-bottom: 1px solid var(--border-subtle-00);
}
/* ブランド面：紺の短い罫を頭に付ける */
.eyebrow--brand {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--spacing-05);
  padding-top: var(--spacing-04);
  border-top: 2px solid var(--brand-navy);
  display: inline-block;
  color: var(--brand-navy);
}

.section-title {
  margin-bottom: var(--spacing-06);
}
.section-lead {
  color: var(--text-secondary);
  max-width: 40em;
  margin-bottom: var(--spacing-08);
}

/* --------------------------------------------------------------- Header -- */
/* Carbon UI Shell: 高さ 48px、gray-100、下に 1px の境界 */
.cds-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 8000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--brand-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-color);
}

.cds-header__name {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  height: 100%;
  padding: 0 var(--spacing-05);
  font-size: 0.875rem;
  line-height: 3rem;
  letter-spacing: 0.16px;
  color: var(--text-on-color);
  border: 2px solid transparent;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-header__name:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cds-header__name:focus-visible {
  border-color: var(--focus-inset);
  outline: none;
}
.cds-header__name b {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cds-header__name span {
  font-weight: 400;
  color: var(--gray-30);
  font-size: 0.75rem;
}

.cds-header__nav {
  display: none;
  height: 100%;
  margin-left: var(--spacing-03);
}
.cds-header__nav ul {
  display: flex;
  height: 100%;
}
.cds-header__nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-05);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--gray-30);
  border: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive),
    color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-header__nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-color);
}
.cds-header__nav a:focus-visible {
  border-color: var(--focus-inset);
  outline: none;
}
.cds-header__nav a[aria-current="page"] {
  color: var(--text-on-color);
  border-bottom-color: var(--gold);
}

/* ヘッダー右端のアクション（Carbon の header global action） */
.cds-header__actions {
  display: flex;
  margin-left: auto;
  height: 100%;
}
.cds-header__cta {
  display: none;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-05);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--brand-navy);
  background: var(--background);
  border: 2px solid transparent;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-header__cta:hover {
  background: var(--blue-20);
}
.cds-header__cta:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.cds-header__menu {
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-color);
  border: 2px solid transparent;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-header__menu:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cds-header__menu:focus-visible {
  border-color: var(--focus-inset);
  outline: none;
}
.cds-header__menu .icon-close {
  display: none;
}
.cds-header__menu[aria-expanded="true"] .icon-menu {
  display: none;
}
.cds-header__menu[aria-expanded="true"] .icon-close {
  display: block;
}

@media (min-width: 66rem) {
  .cds-header__nav,
  .cds-header__cta {
    display: flex;
  }
  .cds-header__menu {
    display: none;
  }
}

/* モバイル: Carbon の side nav（左から出るパネル） */
.cds-sidenav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: min(16rem, 100%);
  z-index: 7000;
  background: var(--brand-navy);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--duration-moderate-02) var(--ease-standard-productive),
    visibility var(--duration-moderate-02);
}
.cds-sidenav.is-open {
  transform: none;
  visibility: visible;
}
.cds-sidenav a {
  display: block;
  padding: 0 var(--spacing-05);
  height: 2rem;
  line-height: 2rem;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--gray-30);
  border-left: 3px solid transparent;
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-sidenav li {
  margin-bottom: var(--spacing-02);
}
.cds-sidenav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-color);
}
.cds-sidenav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-color);
  border-left-color: var(--gold);
  font-weight: 600;
}
.cds-sidenav__list {
  padding-top: var(--spacing-05);
}
.cds-sidenav__overlay {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 6000;
  background: rgba(8, 26, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-moderate-02) var(--ease-standard-productive),
    visibility var(--duration-moderate-02);
}
.cds-sidenav__overlay.is-open {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 66rem) {
  .cds-sidenav,
  .cds-sidenav__overlay {
    display: none;
  }
}

main {
  padding-top: var(--header-height);
}

/* -------------------------------------------------------------- Buttons -- */
/* Carbon のボタン: 角丸なし、高さ 48px(lg)、ラベル左・アイコン右の非対称余白 */
.cds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  min-height: 3rem;
  max-width: 20rem;
  padding: var(--spacing-04) var(--spacing-05);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--duration-fast-01) var(--ease-standard-productive),
    border-color var(--duration-fast-01) var(--ease-standard-productive),
    color var(--duration-fast-01) var(--ease-standard-productive);
}
.cds-btn svg {
  flex-shrink: 0;
}
.cds-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-color: var(--focus);
}

.cds-btn--primary {
  background: var(--button-primary);
  color: var(--text-on-color);
}
.cds-btn--primary:hover {
  background: var(--button-primary-hover);
}
.cds-btn--primary:active {
  background: var(--button-primary-active);
}

.cds-btn--secondary {
  background: var(--button-secondary);
  color: var(--text-on-color);
}
.cds-btn--secondary:hover {
  background: var(--button-secondary-hover);
}

.cds-btn--tertiary {
  background: transparent;
  color: var(--button-tertiary);
  border-color: var(--button-tertiary);
}
.cds-btn--tertiary:hover {
  background: var(--button-tertiary-hover);
  border-color: var(--button-tertiary-hover);
  color: var(--text-on-color);
}

/* 濃い面の上に置くボタン */
.cds-btn--ghost-inverse {
  background: transparent;
  color: var(--text-on-color);
  border-color: var(--text-on-color);
}
.cds-btn--ghost-inverse:hover {
  background: rgba(255, 255, 255, 0.12);
}
.cds-btn--ghost-inverse:focus-visible {
  outline-color: var(--focus-inset);
  border-color: var(--focus-inset);
}
.cds-btn--on-brand {
  background: var(--background);
  color: var(--brand-navy);
}
.cds-btn--on-brand:hover {
  background: var(--blue-20);
}

.cds-btn--full {
  max-width: none;
  width: 100%;
}

/* ---------------------------------------------------------------- Links -- */
.cds-link {
  color: var(--link-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast-01) var(--ease-standard-productive),
    border-color var(--duration-fast-01) var(--ease-standard-productive);
}
.cds-link:hover {
  color: var(--link-primary-hover);
  border-bottom-color: currentColor;
}
.cds-link--inline {
  border-bottom-color: currentColor;
}

/* 矢印つきのリンク（Carbon のカードリンク） */
.cds-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--link-primary);
}
.cds-link-arrow svg {
  transition: transform var(--duration-moderate-01) var(--ease-standard-productive);
}
.cds-link-arrow:hover {
  color: var(--link-primary-hover);
}
.cds-link-arrow:hover svg {
  transform: translateX(0.25rem);
}

/* ----------------------------------------------------------------- Tags -- */
/* Carbon のタグは唯一の角丸要素（border-radius-max） */
.cds-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: var(--spacing-01) var(--spacing-03);
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  white-space: nowrap;
}
/* 最小幅の端末では、長いタグが画面からはみ出すので折り返す */
@media (max-width: 26rem) {
  .cds-tag {
    white-space: normal;
    text-align: left;
  }
}
.cds-tag--blue {
  background: var(--blue-20);
  color: var(--blue-80);
}
.cds-tag--gray {
  background: var(--gray-20);
  color: var(--gray-100);
}
.cds-tag-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-03);
}

/* ---------------------------------------------------------------- Tiles -- */
/* 1px の隙間で罫線を作る Carbon のタイル並べ */
.cds-tile-grid {
  display: grid;
  gap: 1px;
  background: var(--border-subtle-00);
  border: 1px solid var(--border-subtle-00);
  grid-template-columns: 1fr;
}
@media (min-width: 42rem) {
  .cds-tile-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cds-tile-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 66rem) {
  .cds-tile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cds-tile {
  background: var(--background);
  padding: var(--spacing-06);
  min-height: 11rem;
  display: flex;
  flex-direction: column;
}
.section--layer .cds-tile {
  background: var(--layer-02);
}
.cds-tile__label {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
  margin-bottom: var(--spacing-03);
}
.cds-tile h3 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: var(--spacing-04);
}
.cds-tile p {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
}
.cds-tile__foot {
  margin-top: auto;
  padding-top: var(--spacing-06);
}

/* 押せるタイル */
a.cds-tile {
  transition: background-color var(--duration-moderate-01) var(--ease-standard-productive);
}
a.cds-tile:hover {
  background: var(--layer-hover-01);
}
a.cds-tile:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* 数字を頭に置くタイル（順序のあるものだけ） */
.cds-tile__num {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--brand-navy);
  padding-bottom: var(--spacing-04);
  margin-bottom: var(--spacing-04);
  border-bottom: 1px solid var(--border-subtle-00);
}

/* ----------------------------------------------------------- Data table -- */
/* Carbon のデータテーブル: 見出し行 layer-accent、行高 48px、罫線は下辺のみ */
.cds-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--layer-02);
}
.cds-table {
  min-width: 46rem;
  font-variant-numeric: tabular-nums;
}
.cds-table thead th {
  background: var(--layer-accent-01);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  text-align: left;
  vertical-align: middle;
  height: 3rem;
  padding: var(--spacing-04) var(--spacing-05);
  white-space: nowrap;
}
.cds-table tbody tr {
  border-bottom: 1px solid var(--border-subtle-00);
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-table tbody tr:hover {
  background: var(--layer-hover-01);
}
.cds-table tbody th,
.cds-table tbody td {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  text-align: left;
  vertical-align: top;
  padding: var(--spacing-04) var(--spacing-05);
  color: var(--text-secondary);
}
.cds-table tbody th {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.cds-table .cell-topic {
  color: var(--text-primary);
  font-weight: 600;
}
.cds-table .cell-topic small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}
/* 現状の列は控えめに、クラウドの列は本文色＋青の識別線 */
.cds-table .cell-now {
  color: var(--text-helper);
}
.cds-table .cell-cloud {
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--border-interactive);
}
.cds-table__caption {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
  margin-top: var(--spacing-05);
  max-width: 44em;
}

/* 小さい画面ではカード状に積む */
@media (max-width: 65.98rem) {
  .cds-table-wrap {
    overflow: visible;
  }
  .cds-table {
    min-width: 0;
  }
  .cds-table thead {
    display: none;
  }
  .cds-table tbody tr,
  .cds-table tbody th,
  .cds-table tbody td {
    display: block;
  }
  .cds-table tbody tr {
    padding: var(--spacing-05) 0;
    border-bottom: 1px solid var(--border-subtle-00);
  }
  .cds-table tbody tr:hover {
    background: none;
  }
  .cds-table tbody th {
    padding: 0 var(--spacing-05) var(--spacing-02);
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: var(--text-helper);
  }
  .cds-table tbody td {
    padding: var(--spacing-02) var(--spacing-05);
  }
  .cds-table tbody td.cell-topic {
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: var(--spacing-04);
  }
  .cds-table tbody td.cell-now,
  .cds-table tbody td.cell-cloud {
    margin-left: var(--spacing-05);
    padding-left: var(--spacing-04);
    box-shadow: inset 2px 0 0 var(--border-subtle-01);
  }
  .cds-table tbody td.cell-cloud {
    box-shadow: inset 2px 0 0 var(--border-interactive);
  }
  .cds-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.32px;
    color: var(--text-helper);
    margin-bottom: var(--spacing-01);
  }
  .cds-table tbody td.cell-cloud[data-label]::before {
    color: var(--link-primary);
  }
}

/* ------------------------------------------------------------ Structured -- */
/* Carbon の structured list（事務所概要などの定義リスト） */
.cds-list {
  border-top: 1px solid var(--border-subtle-00);
}
.cds-list__row {
  display: grid;
  gap: var(--spacing-02) var(--spacing-06);
  padding: var(--spacing-05) 0;
  border-bottom: 1px solid var(--border-subtle-00);
}
@media (min-width: 42rem) {
  .cds-list__row {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}
.cds-list__row dt {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}
.cds-list__row dd {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
}

/* ------------------------------------------------------------- Accordion -- */
/* Carbon のアコーディオン: 上下 1px 罫、シェブロンは右、開くと 180° */
.cds-accordion {
  border-top: 1px solid var(--border-subtle-00);
}
.cds-accordion__item {
  border-bottom: 1px solid var(--border-subtle-00);
}
.cds-accordion__item > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  min-height: 2.5rem;
  padding: var(--spacing-04) 0;
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive),
    padding-inline var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-accordion__item > summary::-webkit-details-marker {
  display: none;
}
.cds-accordion__item > summary:hover {
  background: var(--layer-hover-01);
  padding-inline: var(--spacing-04);
}
.cds-accordion__item > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.cds-accordion__chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--icon-primary);
  transition: transform var(--duration-moderate-01) var(--ease-standard-productive);
}
.cds-accordion__item[open] .cds-accordion__chevron {
  transform: rotate(180deg);
}
.cds-accordion__panel {
  overflow: hidden;
  padding-bottom: var(--spacing-06);
  padding-right: var(--spacing-10);
  max-width: 48em;
}
.cds-accordion__panel p {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ Form -- */
/* Carbon のフィールド: 薄い塗り＋下辺 1px のみ。角丸なし */
.cds-form {
  display: grid;
  gap: var(--spacing-06);
}
.cds-form__row {
  display: grid;
  gap: var(--spacing-06);
}
@media (min-width: 42rem) {
  .cds-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.cds-field {
  display: grid;
  gap: var(--spacing-02);
  min-width: 0;
}
.cds-field__label {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-secondary);
}
.cds-field__label em {
  font-style: normal;
  color: var(--text-error);
  margin-left: var(--spacing-02);
}
.cds-field input,
.cds-field select,
.cds-field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--spacing-05);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-primary);
  background: var(--field-01);
  border: none;
  border-bottom: 1px solid var(--border-strong-01);
  border-radius: 0;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: background-color var(--duration-fast-01) var(--ease-standard-productive),
    outline-color var(--duration-fast-01) var(--ease-standard-productive);
}
.cds-field textarea {
  padding: var(--spacing-04) var(--spacing-05);
  min-height: 7.5rem;
  resize: vertical;
}
.cds-field input::placeholder,
.cds-field textarea::placeholder {
  color: var(--gray-50);
}
.cds-field input:hover,
.cds-field select:hover,
.cds-field textarea:hover {
  background: var(--field-hover-01);
}
.cds-field input:focus,
.cds-field select:focus,
.cds-field textarea:focus {
  outline-color: var(--focus);
}
.cds-field select {
  appearance: none;
  padding-right: var(--spacing-09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2314213d'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-05) center;
  background-size: 1rem;
}
.cds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-04);
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cds-checkbox input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.22rem;
  flex-shrink: 0;
  accent-color: var(--brand-navy);
}
.cds-form__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-04);
  padding: var(--spacing-05);
  background: var(--layer-01);
  border-left: 3px solid var(--support-info, var(--blue-70));
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-secondary);
}
.cds-form__error {
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: var(--text-error);
}
.cds-form__success {
  display: grid;
  gap: var(--spacing-05);
  padding: var(--spacing-07);
  background: var(--layer-01);
  border-left: 3px solid var(--support-success);
}
.cds-form__success h3 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}
.cds-form__success p {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-secondary);
}
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------ Brand band -- */
/* 紺を使う唯一の大きな面。ここだけブランド色にする */
.brand-band {
  background: var(--brand-navy);
  color: var(--text-on-color);
  padding-block: var(--spacing-10);
}
@media (min-width: 66rem) {
  .brand-band {
    padding-block: var(--spacing-12);
  }
}
.brand-band .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}
/* お問い合わせ帯の見出しラベルだけ、下罫をゴールドにする */
.brand-band .eyebrow--accent {
  border-bottom-color: var(--gold-soft);
}
.brand-band p {
  color: rgba(255, 255, 255, 0.9);
}
.brand-band .cds-link {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.brand-band .cds-link:hover {
  border-bottom-color: #fff;
}

/* 紺の帯の中に置く白い面。帯の文字色が漏れてくるのを打ち消す */
.brand-band .surface-light {
  background: var(--background);
  color: var(--text-primary);
  padding: var(--spacing-07);
}
.brand-band .surface-light p,
.brand-band .surface-light span,
.brand-band .surface-light label {
  color: var(--text-secondary);
}
.brand-band .surface-light h2,
.brand-band .surface-light h3,
.brand-band .surface-light input,
.brand-band .surface-light select,
.brand-band .surface-light textarea {
  color: var(--text-primary);
}
.brand-band .surface-light .cds-link {
  color: var(--link-primary);
  border-bottom-color: currentColor;
}
.brand-band .surface-light .cds-link:hover {
  color: var(--link-primary-hover);
}
.brand-band .surface-light .cds-field__label em {
  color: var(--text-error);
}
.brand-band .surface-light .cds-form__error {
  color: var(--text-error);
}
.brand-band .surface-light .cds-btn--primary {
  color: var(--text-on-color);
}

/* 相談セクションの担当者 */
.person {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  padding-top: var(--spacing-06);
  margin-top: var(--spacing-07);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.person img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  flex-shrink: 0;
}
.person__role {
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: rgba(255, 255, 255, 0.7);
}
.person__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16px;
}
.person__note {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--spacing-02);
}

/* 連絡先の並び */
.contact-rail {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: var(--spacing-07);
}
@media (min-width: 42rem) {
  .contact-rail {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 幅の狭い列に置くときは縦に積む */
  .contact-rail--stack {
    grid-template-columns: 1fr;
  }
}

.contact-rail__item {
  background: var(--brand-navy);
  padding: var(--spacing-05);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
a.contact-rail__item:hover {
  background: var(--brand-navy-deep);
}
.contact-rail__label {
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: rgba(255, 255, 255, 0.7);
}
.contact-rail__value {
  font-size: 1rem;
  letter-spacing: 0.16px;
  overflow-wrap: anywhere;
}
.contact-rail__qr {
  width: 5.5rem;
  height: 5.5rem;
  margin-top: var(--spacing-03);
  padding: var(--spacing-02);
  background: #fff;
}

/* ---------------------------------------------------------------- Footer -- */
.cds-footer {
  background: var(--brand-navy-deep);
  color: var(--gray-30);
  border-top: 2px solid var(--gold);
  padding-block: var(--spacing-10) var(--spacing-07);
}
.cds-footer__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-on-color);
  margin-bottom: var(--spacing-04);
  display: block;
}
.cds-footer__name span {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--gray-30);
  margin-left: var(--spacing-03);
}
.cds-footer p {
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
}
.cds-footer__nav {
  display: grid;
  gap: var(--spacing-03);
}
.cds-footer__nav a {
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--gray-30);
  border-bottom: 1px solid transparent;
  justify-self: start;
  transition: color var(--duration-fast-01) var(--ease-standard-productive);
}
.cds-footer__nav a:hover {
  color: var(--text-on-color);
  border-bottom-color: currentColor;
}
.cds-footer__nav a[aria-current="page"] {
  color: var(--text-on-color);
}
.cds-footer__bottom {
  margin-top: var(--spacing-09);
  padding-top: var(--spacing-05);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: var(--gray-50);
}

/* --------------------------------------------------------------- Motion -- */
/* Carbon の expressive entrance で、下から一段だけ持ち上げる */
.progress {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 7500;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  html.js [data-anim],
  html.js [data-anim-item] {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--duration-slow-01) var(--ease-entrance-expressive) var(--d, 0s),
      transform var(--duration-slow-01) var(--ease-entrance-expressive) var(--d, 0s);
  }
  html.js [data-anim].is-in,
  html.js [data-anim-item].is-in {
    opacity: 1;
    transform: none;
  }

  /* 罫線は左から引く */
  html.js [data-anim="rule"] {
    opacity: 1;
    transform: none;
    position: relative;
    border-top-color: transparent;
  }
  html.js [data-anim="rule"]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-subtle-00);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slow-01) var(--ease-entrance-expressive);
  }
  html.js [data-anim="rule"].is-in::before {
    transform: none;
  }

  /* データテーブルは見出し行から順に埋める */
  html.js [data-anim="table"] {
    opacity: 1;
    transform: none;
  }
  html.js [data-anim="table"] thead th {
    opacity: 0;
    transition: opacity var(--duration-moderate-02) var(--ease-entrance-productive);
  }
  html.js [data-anim="table"].is-in thead th {
    opacity: 1;
  }
  html.js [data-anim="table"] tbody tr {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--duration-moderate-02) var(--ease-entrance-productive) var(--d, 0s),
      transform var(--duration-moderate-02) var(--ease-entrance-productive) var(--d, 0s);
  }
  html.js [data-anim="table"] tbody tr.is-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   追記 — ヒーロー（p5.js の背景／写真の再配置）
   背景の紺は CSS にも敷いてある。p5 が読めなくても、色は必ず出る。
   ============================================================================ */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--brand-navy);
  color: var(--text-on-color);
  padding-block: var(--spacing-10) 0;
  overflow: hidden;
}
@media (min-width: 66rem) {
  .hero {
    padding-block: var(--spacing-12) 0;
  }
}

/* p5 のキャンバスを敷く面 */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* 左側は文字が乗るので、紺を重ねて可読性を確保する */
.hero__canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 35, 64, 0.95) 0%,
    rgba(12, 35, 64, 0.88) 38%,
    rgba(12, 35, 64, 0.6) 64%,
    rgba(8, 26, 48, 0.55) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  align-items: start;
}
.hero__lead {
  max-width: 34em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-06);
}

/* 紺の上のラベル */
.eyebrow--onbrand {
  display: inline-block;
  padding-top: var(--spacing-04);
  padding-bottom: 0;
  margin-bottom: var(--spacing-05);
  border-top: 2px solid var(--gold);
  border-bottom: none;
  color: var(--text-on-color);
}

/* 紺の上のタグ */
.cds-tag--onbrand {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-on-color);
}
.cds-tag--onbrand-accent {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-on-color);
}

/* 写真：右端まで抜いて、下の白いセクションに掛ける */
.hero__figure {
  margin: var(--spacing-09) 0 0;
  position: relative;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 42%;
}
@media (min-width: 42rem) {
  .hero__figure img {
    aspect-ratio: 21 / 9;
  }
}
@media (min-width: 66rem) {
  .hero__figure {
    grid-column: 11 / -1;
    grid-row: 1;
    margin-top: var(--spacing-02);
    /* グリッドの外側の余白ぶんだけ、右に抜く */
    margin-right: calc(-1 * var(--grid-margin));
  }
  .hero__figure img {
    aspect-ratio: 4 / 5;
    object-position: 46% 50%;
  }
}
@media (min-width: 99rem) {
  .hero__figure {
    margin-right: calc((var(--grid-max) - 100vw) / 2);
  }
}

/* ============================================================================
   労務クラウドページのヒーロー — 写真を全面に敷く
   写真（1280×720）は明るいので、紺の重ね幕で文字の可読性を確保する。
   左：閉じた台帳／右：クラウドの画面、という構図を活かして
   文字は左、写真の見せ場（ノートPC）は右に残す。
   ============================================================================ */
.cloud-hero {
  position: relative;
  isolation: isolate;
  min-height: 34rem;
  display: flex;
  align-items: center;
  padding-block: var(--spacing-10);
  background: var(--brand-navy);   /* 画像が出ない場合の下地 */
  color: var(--text-on-color);
  overflow: hidden;
}
@media (min-width: 42rem) {
  .cloud-hero { min-height: 38rem; }
}
@media (min-width: 66rem) {
  .cloud-hero {
    min-height: 40rem;
    padding-block: var(--spacing-12);
  }
}

.cloud-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 小さい画面では台帳とノートPCの両方が入る位置、
     広い画面では右のノートPCが見えるよう寄せる */
  object-position: 58% 52%;
}
@media (min-width: 66rem) {
  .cloud-hero__img { object-position: 62% 50%; }
}

/* 文字が乗る左側を濃く、写真を見せる右側を薄く */
.cloud-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(8, 26, 48, 0.97) 0%,
      rgba(12, 35, 64, 0.95) 32%,
      rgba(12, 35, 64, 0.88) 48%,
      rgba(12, 35, 64, 0.58) 68%,
      rgba(8, 26, 48, 0.34) 100%
    ),
    /* 下端をわずかに沈ませて、次のセクションへつなぐ */
    linear-gradient(to top, rgba(8, 20, 36, 0.45) 0%, transparent 38%);
}
/* lg 未満は文字が横いっぱいに伸びるため、斜めではなく全体を濃くする */
@media (max-width: 65.98rem) {
  .cloud-hero__scrim {
    background:
      linear-gradient(
        170deg,
        rgba(8, 26, 48, 0.95) 0%,
        rgba(12, 35, 64, 0.92) 50%,
        rgba(12, 35, 64, 0.86) 100%
      ),
      linear-gradient(to top, rgba(8, 20, 36, 0.35) 0%, transparent 40%);
  }
}

.cloud-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.cloud-hero__lead {
  max-width: 34em;
  color: rgba(255, 255, 255, 0.88);
}

/* ---- 年間の行事の帯 ---- */
.yearband {
  display: grid;
  gap: 1px;
  background: var(--border-subtle-00);
  border: 1px solid var(--border-subtle-00);
  grid-template-columns: 1fr;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 42rem) {
  .yearband { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 66rem) {
  .yearband { grid-template-columns: repeat(4, 1fr); }
}
.yearband > div {
  background: var(--layer-02);
  padding: var(--spacing-05);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.yearband > div:hover { background: var(--layer-hover-01); }
.yearband dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32px;
  color: var(--brand-navy);
}
.yearband dd {
  font-size: 0.875rem;
  line-height: 1.42857;
  letter-spacing: 0.16px;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------- Media -- */
/* Carbon の写真の扱い：角丸なし、グリッドに揃える、説明は helper-text-01 */
.cds-media {
  margin: var(--spacing-08) 0 0;
}
.cds-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.cds-media figcaption {
  margin-top: var(--spacing-04);
  font-size: 0.75rem;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  color: var(--text-helper);
}
.cds-media--pair {
  display: grid;
  gap: 1px;
  background: var(--border-subtle-00);
  grid-template-columns: 1fr;
}
@media (min-width: 42rem) {
  .cds-media--pair {
    grid-template-columns: 1fr 1fr;
  }
}
.cds-media--pair figure {
  margin: 0;
  background: var(--background);
}
.section--layer .cds-media--pair figure {
  background: var(--layer-01);
}
.cds-media--pair img {
  aspect-ratio: 16 / 10;
}
.cds-media--pair figcaption {
  margin: 0;
  padding: var(--spacing-04) var(--spacing-05) var(--spacing-05);
}
/* 本文の横に置く写真 */
.cds-media--side {
  margin: 0;
}
.cds-media--side img {
  aspect-ratio: 4 / 3;
}

/* ============================================================================
   追記 2026-09-27 — 公式LINE・労務クラウドへの導線／プロフィール
   ============================================================================ */
/* ヘッダーの「公式LINEで相談する」。スマホでは短い表記で常に見せる */
.cds-header__line {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);
  height: 100%;
  padding: 0 var(--spacing-05);
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--text-on-color);
  border: 2px solid transparent;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color var(--duration-fast-02) var(--ease-standard-productive);
}
.cds-header__line:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cds-header__line:focus-visible {
  border-color: var(--gold);
  outline: none;
}
.cds-header__line-full {
  display: none;
}
@media (min-width: 66rem) {
  .cds-header__line-full { display: inline; }
  .cds-header__line-short { display: none; }
}

/* ヒーローのボタン列（無料相談／公式LINE／労務クラウド） */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-04);
  margin-bottom: var(--spacing-07);
}
.hero__actions .cds-btn {
  gap: var(--spacing-07);
}
@media (max-width: 41.98rem) {
  .hero__actions .cds-btn {
    width: 100%;
    max-width: none;
  }
}

/* 代表プロフィール */
.profile-photo {
  width: 12rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: var(--spacing-06);
}
.profile-name {
  margin-bottom: var(--spacing-05);
  padding-bottom: var(--spacing-04);
  border-bottom: 1px solid var(--border-subtle-00);
}

/* ============================================================================
   追記 2026-09-27(2) — ゴールドを増やす
   ============================================================================ */
.text-gold { color: var(--gold); }
/* 紺の上のラベルは明るいゴールド（白地用の濃いゴールドは紺の上では沈むため） */
.eyebrow.eyebrow--onbrand { color: var(--gold); }

/* 見出しラベル：ゴールドの文字＋ゴールドの下罫 */
.eyebrow {
  color: var(--gold-text);
  border-bottom-color: var(--gold-soft);
}
/* 見出しの下に短いゴールドの線 */
.section-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: var(--spacing-05);
  background: var(--gold);
}
/* 番号・ステップ */
.cds-tile__num {
  color: var(--gold-text);
  border-bottom-color: var(--gold-soft);
}

/* ヘッダーの無料相談・ヒーローの主ボタンはゴールド */
.cds-header__cta,
.cds-btn--on-brand {
  background: var(--gold);
  color: var(--brand-navy);
}
.cds-header__cta:hover,
.cds-btn--on-brand:hover {
  background: var(--gold-hover);
}
.cds-btn--on-brand:focus-visible {
  outline-color: var(--text-on-color);
  border-color: var(--text-on-color);
}
/* ヒーローの副ボタンとタグはゴールドの線 */
.hero .cds-btn--ghost-inverse,
.cloud-hero .cds-btn--ghost-inverse {
  border-color: var(--gold-soft);
}
.hero .cds-btn--ghost-inverse:hover,
.cloud-hero .cds-btn--ghost-inverse:hover {
  border-color: var(--gold);
}
.cds-tag--onbrand {
  background: transparent;
  border: 1px solid var(--gold-soft);
}

/* ヒーロー背景：右上にごく薄いゴールドの光 */
.hero__canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 70% at 88% 12%, rgba(185, 154, 91, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
/* 写真の左端にゴールドの縦線 */
@media (min-width: 66rem) {
  .hero__figure::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    width: 2px;
    height: 40%;
    background: var(--gold);
  }
}

/* お問い合わせの帯 */
.brand-band .eyebrow {
  color: var(--gold);
  border-bottom-color: var(--gold-soft);
}
.contact-rail {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}
.person {
  border-top-color: var(--gold-soft);
}

/* プロフィール */
.profile-photo {
  box-shadow: 0.5rem 0.5rem 0 0 var(--gold-soft);
}
.profile-name {
  border-bottom: 2px solid var(--gold);
}