/* =============================================================================
   components.css — 最小コンポーネント（@layer components）
   -----------------------------------------------------------------------------
   ヘッダ／ナビ／ボタン／カード／フッター等の見た目。すべて tokens.css の
   意味トークンを参照します（生のマジックナンバーは書きません）。
   設計方式は「素直な単一クラス中心」（過剰な抽象化をしない）。
   02_conventions/css.md / accessibility.md 準拠。
   ============================================================================= */

@layer components {
  /* ====================== レイアウト共通 ====================== */

  /* 中央寄せコンテナ（左右ガター付き・論理プロパティ） */
  .container {
    inline-size: 100%;
    max-inline-size: var(--layout-max-inline);
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
  }

  /* セクションの上下余白 */
  .section {
    padding-block: var(--space-2xl);
  }

  .section-narrow {
    padding-block: var(--space-xl);
  }

  /* ====================== スキップリンク ====================== */

  /* 通常は画面外に隠し、キーボードでフォーカスされたら左上に出現させる。
     accessibility.md §2.4（2.4.1）。 */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: var(--z-toast);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

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

  /* ====================== サイトヘッダ／ナビ ====================== */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
  }

  /* ロゴ（リンク） */
  .site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;

    /* タップ領域確保（24px 以上） */
    min-block-size: var(--size-7);
  }

  .site-logo__mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--color-primary); /* ロゴ SVG は currentColor で追従 */
  }

  /* グローバルナビ */
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-list__link {
    display: inline-flex;
    align-items: center;

    /* タップ領域: 高さ 24px 以上を確保（accessibility.md §2.3） */
    min-block-size: var(--size-7);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
  }

  .nav-list__link:hover {
    background-color: var(--color-surface-2);
    color: var(--color-text-strong);
  }

  /* 現在地（aria-current="page"）を色だけでなく下線でも示す */
  .nav-list__link[aria-current="page"] {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
  }

  /* ====================== ボタン ====================== */

  /* a でも button でも同じ見た目にできる汎用クラス。
     タップ領域は最小 24px、主要操作は 44px 目安（accessibility.md §2.3）。 */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: var(--size-7); /* 48px */
    min-inline-size: var(--size-7);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);
  }

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

  /* 副ボタン（枠線） */
  .button--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-link);
  }

  .button--secondary:hover {
    background-color: var(--color-surface-2);
    color: var(--color-link-hover);
  }

  /* ====================== ヒーロー ====================== */
  .hero {
    padding-block: var(--space-3xl);
    background-color: var(--color-primary-weak);
    border-block-end: 1px solid var(--color-border);
  }

  .hero__title {
    margin-block-end: var(--space-sm);
    max-inline-size: 24ch;
  }

  .hero__lead {
    max-inline-size: 60ch;
    font-size: var(--text-md);
    color: var(--color-text);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }

  /* ====================== カード ====================== */

  /* 列の適応はメディアクエリ（またはコンテナクエリ）で行う。
     注意: container-type は @container を実際に使うときだけ付けること。
     投機的な containment は iOS Safari(WebKit) でグリッドを min-content 幅に潰し、
     日本語が1文字ずつ縦に折り返す重大なモバイル崩れを起こす（実案件で実測・
     Chromium系の機械監査では検出できない）。auto-fit を使う場合は
     minmax(min(Xrem, 100%), 1fr) で最小幅が親を超えないよう保護する。 */
  .card-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    margin-block-start: var(--space-lg);
    list-style: none;
    padding: 0;
  }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    block-size: 100%;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .card__icon {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    color: var(--color-primary); /* アイコン SVG は currentColor で追従 */
  }

  .card__title {
    margin-block: var(--space-2xs) 0;
  }

  .card__text {
    margin: 0;
    color: var(--color-text);
  }

  /* ====================== 連絡先・問い合わせ導線 ====================== */
  .contact {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .contact__list {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
  }

  .contact__list div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .contact__list dt {
    min-inline-size: 6rem;
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .contact__list dd {
    margin: 0;
  }

  /* ====================== サイトフッタ ====================== */
  .site-footer {
    margin-block-start: var(--space-3xl);
    padding-block: var(--space-xl);
    background-color: var(--color-surface-2);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .site-footer a {
    color: var(--color-link);
  }

  /* ====================== 補助テキスト ====================== */
  .lead {
    font-size: var(--text-md);
    color: var(--color-text);
  }

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

  /* ====================== 404 など中央寄せの単純ページ ====================== */
  .center-prose {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding-block: var(--space-3xl);
  }
}

/* =============================================================================
   lecaldo.co.jp 専用部品（lecaldo.link 準拠。design-base.md / tokens.css 参照）
   ============================================================================= */
@layer components {
  /* ====================== 拠点リスト ====================== */
  .station-list {
    display: grid;
    gap: var(--space-3xs) var(--space-sm);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (width >= 48rem) {
    .station-list {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .station-list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-6);
    padding-block: var(--space-3xs);
  }

  /* ====================== フッタ（緑地・白ロゴ）リンク配色 ====================== */
  .site-footer--brand {
    background-color: var(--color-surface-footer);
    border-block-start: 0;
    color: var(--color-text-on-footer);
  }

  .site-footer--brand a {
    color: var(--color-text-on-footer);
  }

  /* ====================== ヘッダ拡張（ロゴ画像・CVボタン・メニュー） ====================== */
  .site-logo__img {
    inline-size: clamp(8.5rem, 24vw, 12rem);
    block-size: auto;
  }

  .header-cv {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .header-cv__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-6);
    border-radius: var(--radius-md);
  }

  .header-cv__img {
    block-size: clamp(2.25rem, 5vw, 2.625rem);
    inline-size: auto;
  }

  /* 全体メニュー: details/summary で JS 無しでも開閉できる */
  .global-menu {
    position: relative;
  }

  .global-menu__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    inline-size: var(--size-7);
    block-size: var(--size-7);
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    color: var(--color-primary);
  }

  .global-menu__toggle::-webkit-details-marker {
    display: none;
  }

  .global-menu__toggle:hover {
    background-color: var(--color-surface-2);
  }

  .global-menu__bar {
    display: block;
    inline-size: 1.5rem;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background-color: currentcolor;
    transition: transform var(--motion-base) var(--ease-standard);
  }

  .global-menu[open] .global-menu__bar:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .global-menu[open] .global-menu__bar:nth-child(2) {
    transform: scaleX(0);
  }

  .global-menu[open] .global-menu__bar:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  .global-menu__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--space-2xs));
    z-index: var(--z-dropdown);
    inline-size: min(92vw, 64rem);
    max-block-size: calc(100svb - var(--layout-header-block) - var(--space-md));
    overflow: auto;
    padding: var(--space-md);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2);
  }

  .menu-groups {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }

  @media (width >= 48rem) {
    .menu-groups {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .menu-group__title {
    margin-block-end: var(--space-2xs);
    padding-block-end: var(--space-3xs);
    border-block-end: 2px solid var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: var(--tracking-heading);
  }

  .menu-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-group__list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-6);
    padding-block: var(--space-3xs);
    color: var(--color-text);
    text-decoration: none;
  }

  .menu-group__list a:hover {
    color: var(--color-link);
    text-decoration: underline;
  }

  /* ====================== セクション見出し（lecaldo 標準） ====================== */

  /* 全幅罫線＋ティール部分下線（トップ標準の tc-sec-head 相当） */
  .sec-head {
    margin-block-end: var(--space-lg);
  }

  .sec-head__title {
    position: relative;
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--tracking-heading);
    color: var(--color-text-strong);
  }

  .sec-head__title span {
    position: relative;
    display: inline-block;
    padding-block-end: var(--space-2xs);
  }

  .sec-head__title span::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    background-color: var(--color-secondary);
  }

  .sec-head__sub {
    margin-block: var(--space-xs) 0;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
  }

  /* 装飾見出し（明朝・情緒コピー用） */
  .deco-copy {
    font-family: var(--font-serif-deco);
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-text-strong);
  }

  /* ====================== ボタン拡張 ====================== */

  /* ピル型CVボタン（フォーム送信・面談・申込系の主ボタン） */
  .button--pill {
    border-radius: var(--radius-pill);
    padding-inline: var(--space-lg);
    font-weight: 700;
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      transform var(--motion-fast) var(--ease-standard);
  }

  .button--pill:hover {
    transform: translateY(-2px);
  }

  /* アウトライン（電話番号など。白地＋ティール枠→ホバーで反転） */
  .button--outline {
    background-color: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-link);
  }

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

  /* ====================== ヒーロー（写真＋パネル） ====================== */
  .hero-photo {
    position: relative;
    display: grid;
    align-items: end;
    min-block-size: clamp(24rem, 60vw, 34rem);
    overflow: hidden;
  }

  .hero-photo__bg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .hero-photo__panel {
    position: relative;
    z-index: var(--z-base);
    margin-block-end: var(--space-xl);
    padding: var(--space-lg);
    max-inline-size: 36rem;
    background-color: oklch(from var(--color-bg) l c h / 88%);
    border-radius: var(--radius-card);
  }

  .hero-photo__title {
    margin-block-end: var(--space-xs);
    font-size: var(--text-2xl);
  }

  .hero-photo__lead {
    margin-block-end: var(--space-sm);
    font-size: var(--text-md);
  }

  .hero-photo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* ====================== カードグリッド列数（768pxで分岐） ====================== */
  @media (width >= 48rem) {
    .card-grid--2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .card-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* リンクカード（対象者別入口など。カード全体がリンク） */
  .card--link {
    position: relative;
    transition: transform var(--motion-base) var(--ease-standard);
  }

  .card--link:hover {
    transform: translateY(-3px);
  }

  .card--link .card__title a {
    color: inherit;
    text-decoration: none;
  }

  .card--link .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* ====================== お知らせリスト ====================== */
  .news-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .news-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-xs);
    border-block-end: 1px dotted var(--color-border-deco);
  }

  .news-list__date {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    font-weight: 700;
  }

  .news-list__tag {
    display: inline-block;
    padding-block: 0;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--text-xs);
  }

  /* ====================== フォーム ====================== */
  .form {
    display: grid;
    gap: var(--space-md);
    max-inline-size: 44rem;
  }

  .form-field {
    display: grid;
    gap: var(--space-3xs);
  }

  .form-field > label {
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .form-field__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .form-note {
    padding: var(--space-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-weak);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .form-consent {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 700;
  }

  .form-consent input {
    inline-size: var(--size-5);
    block-size: var(--size-5);
    accent-color: var(--color-primary);
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .form-actions button[disabled],
  .form-actions button[aria-busy="true"] {
    opacity: 60%;
    cursor: progress;
  }

  /* ラジオ・チェックボックスのタップ領域（24px以上） */
  .form input[type="radio"],
  .form input[type="checkbox"] {
    inline-size: var(--size-5);
    block-size: var(--size-5);
    accent-color: var(--color-primary);
  }

  /* ====================== 表の横スクロールラッパ ====================== */
  .table-scroll {
    overflow-x: auto;
    margin-block-end: var(--space-sm);
  }

  .table-scroll table {
    margin-block-end: 0;
    min-inline-size: 36rem;
  }

  /* ====================== CTAバンド ====================== */
  .cta-band {
    padding-block: var(--space-2xl);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
  }

  .cta-band h2,
  .cta-band p {
    color: var(--color-text-on-primary);
  }

  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  .cta-band .button--pill {
    background-color: var(--color-bg);
    color: var(--color-link);
  }

  .cta-band .button--pill:hover {
    background-color: var(--color-surface-2);
  }

  /* ====================== フローティングCVバナー ====================== */
  .float-cv {
    position: fixed;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: var(--z-float);
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
  }

  @media (width >= 48rem) {
    .float-cv {
      flex-direction: column;
      inset-block-end: var(--space-md);
      inset-inline-end: var(--space-2xs);
    }
  }

  .float-cv__link {
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
  }

  .float-cv__img {
    inline-size: clamp(8rem, 40vw, 11.25rem);
    block-size: auto;
    border-radius: var(--radius-md);
  }

  /* ====================== パンくず ====================== */
  .breadcrumb {
    padding-block: var(--space-xs);
    font-size: var(--text-xs);
  }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb li + li::before {
    content: ">";
    margin-inline-end: var(--space-2xs);
    color: var(--color-text-muted);
  }

  /* ====================== フッタ（緑地・白ロゴ）レイアウト ====================== */
  .site-footer--brand .nav-list__link:hover {
    background-color: oklch(from var(--color-text-on-footer) l c h / 12%);
    color: var(--color-text-on-footer);
  }

  .footer-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
    align-items: start;
  }

  @media (width >= 48rem) {
    .footer-grid {
      grid-template-columns: auto 1fr;
    }
  }

  .footer-logo__img {
    inline-size: clamp(10rem, 30vw, 15rem);
    block-size: auto;
  }

  .footer-note {
    margin-block-start: var(--space-md);
    font-size: var(--text-xs);
  }
}

/* ============================== utilities レイヤー ============================== */

/* 最後段。意図的にちょっとした上書きをしたいとき用（最小限）。 */
@layer utilities {
  .flow > * + * {
    margin-block-start: var(--space-sm);
  }

  .mbe-0 {
    margin-block-end: 0;
  }
}

/* ====================== 年収シミュレーター（バロウズ #sim-root 差し込み分。@layer は同名で統合される） ====================== */
@layer components {
  .sim-form {
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-weak);
    border-radius: var(--radius-card);
  }

  .sim-day {
    display: grid;
    grid-template-columns: 4em 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xs);
    max-inline-size: 28rem;
  }

  .sim-day__name {
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .sim-day select {
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-size: var(--text-base);
  }

  .sim-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .sim-radios label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
  }

  .sim-result {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-weak);
    border-radius: var(--radius-card);
    margin-block-end: var(--space-md);
  }

  .sim-result__lead {
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0;
  }

  .sim-result__range {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary-strong);
    margin: 0;
  }

  .sim-result__center {
    color: var(--color-text-muted);
    margin: 0;
  }

  .sim-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: 0;
  }

  .sim-result__meta-item dt {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .sim-result__meta-item dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .sim-advice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--color-surface-2);
    border-radius: var(--radius-md);
  }

  .sim-advice__img {
    inline-size: clamp(4.5rem, 18vw, 7.5rem);
    block-size: auto;
  }

  .sim-advice__title {
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0;
  }

  .sim-advice__text {
    margin: 0;
  }
}