/* =============================================================================
   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);
  }

  /* モバイルメニュー切替ボタン（既定＝非表示。JS有効かつ狭幅でのみ出す） */
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-7);
    min-inline-size: var(--size-7);
    padding-inline: var(--space-2xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text-strong);
    cursor: pointer;
  }

  .nav-toggle svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  /* JS有効時（html.js）かつ狭幅: グローバルナビをアコーディオン化。
     JSが無い場合はこのブロックが効かず、ナビは通常どおり全項目表示される
     （プログレッシブエンハンスメント＝主要動線をJS非依存に保つ。html.md §6）。 */
  @media (width < 48rem) {
    html.js .nav-toggle {
      display: inline-flex;
    }

    /* ナビ本体は独立した行（全幅）に落として、開いたとき下に展開する */
    html.js nav[aria-label="グローバルナビゲーション"] {
      order: 4;
      flex-basis: 100%;
    }

    html.js .nav-list {
      display: none;
    }

    html.js .nav-list.is-open {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-3xs);
      padding-block: var(--space-2xs);
      border-block-start: 1px solid var(--color-border);
    }

    /* is-open は JS でのみ付与されるため、この規則は JS 有効時のみ効く */
    .nav-list.is-open .nav-list__link {
      min-block-size: var(--size-7);
      padding-block: var(--space-xs);
    }

    /* 狭幅では電話番号の文字を隠し、アイコンのみのタップ発信に（省スペース）。
       aria-label は残るのでスクリーンリーダーには番号が読み上げられる。 */
    html.js .header-tel__num {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* アイコンだけになってもタップ領域は 48px 角を確保（WCAG 2.2 ターゲットサイズ） */
    html.js .header-tel {
      justify-content: center;
      min-inline-size: var(--size-7);
      min-block-size: var(--size-7);
      padding-inline: var(--space-2xs);
    }

    html.js .header-tel .icon-inline {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }

  /* ロゴ（リンク） */
  .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);
  }

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

  /* カードの並び（既定は1カラム）。
     注: 以前は container-type: inline-size を付けていたが、@container クエリを
     使っていないため不要。加えて一部モバイル(iOS Safari)で size containment により
     グリッドが min-content 幅へ潰れ、日本語が1文字ずつ縦に折り返す不具合を誘発したため除去した。 */
  .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);
  }

  /* フッターの3カラム（施設情報／サイトマップ／情報公開） */
  .footer-grid {
    display: grid;
    gap: var(--space-lg);
    margin-block-end: var(--space-lg);
  }

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

  .footer-grid h2 {
    font-size: var(--text-base);
    color: var(--color-text-strong);
    margin-block-end: var(--space-2xs);
  }

  .footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3xs);
  }

  .footer-grid address {
    font-style: normal;
  }

  /* フッター内リンクのタップ領域確保（24px 以上。accessibility.md §2.3） */
  .footer-grid a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-6);
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  /* ====================== 補助テキスト ====================== */
  .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);
  }

  /* ====================== CTA（見学予約）ボタン ====================== */

  /* 差し色は「見学予約」導線専用（design-base.md §2）。丸ピル型。 */
  .button--accent {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-pill);
  }

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

  .button--pill {
    border-radius: var(--radius-pill);
  }

  /* ヘッダ右側の連絡ゾーン（電話＋予約ボタン） */
  .header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }

  .header-tel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    min-block-size: var(--size-7);
    color: var(--color-text-strong);
    font-weight: 700;
    text-decoration: none;
  }

  .header-tel:hover {
    color: var(--color-link);
  }

  /* ====================== ヒーロー（トップ） ====================== */
  .hero--home {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
    padding-block: var(--space-xl);
  }

  @media (width >= 48rem) {
    .hero--home {
      grid-template-columns: 1.1fr 0.9fr;
      padding-block: var(--space-2xl);
    }
  }

  .hero__illustration {
    inline-size: 100%;
    border-radius: var(--radius-card);
  }

  /* ====================== 面（背景色つきセクション） ====================== */
  .section--tint {
    background-color: var(--color-primary-weak);
  }

  .section--surface {
    background-color: var(--color-surface);
  }

  /* ====================== 2カラム（画像＋文章） ====================== */
  .split {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
    margin-block: var(--space-lg);
  }

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

    .split--media-end > .split__media {
      order: 2;
    }
  }

  .split__media img {
    inline-size: 100%;
    border-radius: var(--radius-card);
  }

  /* ====================== 写真・図版 ====================== */
  .figure-rounded {
    margin-inline: 0;
  }

  .figure-rounded img {
    inline-size: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
  }

  .figure-rounded figcaption {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .photo-grid {
    display: grid;
    gap: var(--space-md);
    margin-block: var(--space-lg);
    padding: 0;
    list-style: none;
  }

  @media (width >= 36rem) {
    .photo-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ====================== 情報テーブル（施設概要など） ====================== */
  .info-table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
  }

  .info-table caption {
    text-align: start;
    font-weight: 700;
    color: var(--color-text-strong);
    margin-block-end: var(--space-2xs);
  }

  .info-table th,
  .info-table td {
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .info-table th {
    inline-size: 30%;
    min-inline-size: 7em;
    background-color: var(--color-surface);
    color: var(--color-text-strong);
    font-weight: 700;
  }

  /* ====================== ステップ（利用開始までの流れ） ====================== */
  .steps {
    display: grid;
    gap: var(--space-md);
    margin-block: var(--space-lg);
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    inline-size: var(--size-6);
    block-size: var(--size-6);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: 700;
  }

  .steps__title {
    margin: 0;
    font-size: var(--text-md);
  }

  .steps p {
    margin-block-end: 0;
  }

  /* ====================== よくある質問（details/summary） ====================== */
  .faq-item {
    margin-block-end: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .faq-item summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text-strong);
    border-radius: var(--radius-card);
  }

  .faq-item summary::before {
    content: "Q.";
    color: var(--color-primary);
    font-weight: 700;
  }

  .faq-item[open] summary {
    border-block-end: 1px solid var(--color-border);
  }

  .faq-item .faq-item__answer {
    padding: var(--space-sm) var(--space-md);
  }

  .faq-item .faq-item__answer > :last-child {
    margin-block-end: 0;
  }

  /* ====================== 保護者の声 ====================== */
  .voice-card {
    padding: var(--space-lg);
    margin-block: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .voice-card blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-sm);
    border-inline-start: 4px solid var(--color-primary);
    color: var(--color-text-strong);
    font-size: var(--text-md);
  }

  .voice-card footer {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* ====================== バッジ・ラベル ====================== */
  .badge {
    display: inline-block;
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-weak);
    color: var(--color-link);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .badge--accent {
    background-color: var(--color-accent-weak);
    color: var(--color-accent-strong);
  }

  /* ====================== ページ下部の予約CTAバナー ====================== */
  .cta-banner {
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin-block-start: var(--space-2xl);
    background-color: var(--color-primary-weak);
    border-radius: var(--radius-card);
  }

  .cta-banner h2,
  .cta-banner p {
    margin-block-end: 0;
  }

  .cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

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

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

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

  .form-field input,
  .form-field select,
  .form-field textarea {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    min-block-size: var(--size-7);
  }

  .form-field textarea {
    min-block-size: 8rem;
  }

  .form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-sm) var(--space-md);
  }

  .form-fieldset label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 400;
    min-block-size: var(--size-6);
  }

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

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

  .form-consent input[type="checkbox"] {
    flex: none;
    inline-size: var(--size-5);
    block-size: var(--size-5);
    accent-color: var(--color-primary);
  }

  .required-mark {
    color: var(--color-danger);
    font-size: var(--text-sm);
  }

  /* スパム対策のわな欄（人間には見せない・入力させない） */
  .form-field--trap {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }

  /* ====================== 飾り（丸ドット） ====================== */

  /* 見出し横の元気なドット3つ（文字を載せない飾り。design-base.md §2） */
  .dots {
    display: inline-flex;
    gap: var(--space-3xs);
    margin-inline-end: var(--space-2xs);
    vertical-align: middle;
  }

  .dots i {
    inline-size: 0.6em;
    block-size: 0.6em;
    border-radius: var(--radius-pill);
  }

  .dots i:nth-child(1) {
    background-color: var(--color-decor-leaf);
  }

  .dots i:nth-child(2) {
    background-color: var(--color-decor-sun);
  }

  .dots i:nth-child(3) {
    background-color: var(--color-accent);
  }
}

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

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

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

  .mbs-md {
    margin-block-start: var(--space-md);
  }

  /* min(...) で最小トラック幅を容器幅以下に抑え、狭幅画面での横はみ出しを防ぐ。 */
  .card-grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .card-grid--fit-wide {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }

  .icon-inline {
    inline-size: 1em;
    block-size: 1em;
  }

  /* 段落単独リンクのタップ領域確保（24px 以上。文中リンクには使わない） */
  .link-standalone {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-6);
  }
}

@layer components {
  /* ====================== 見学説明会カレンダー ======================
     PageCalendarServlet が Google カレンダーの予定を注入し、
     calendar-fill.js が日程クリックで希望日時欄へ入力する。 */
  .cal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
  }

  .cal-event {
    margin: 0;
  }

  /* 日程1件＝1つの押せるボタン（カード見た目・左に色帯） */
  .cal-pick {
    inline-size: 100%;
    display: block;
    text-align: start;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
  }

  .cal-pick:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-weak);
  }

  .cal-pick:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* 選択中（クリック済み）: 塗り＋「選択中」表示 */
  .cal-pick[aria-pressed="true"] {
    background-color: var(--color-primary-weak);
    border-color: var(--color-primary);
  }

  .cal-pick[aria-pressed="true"] .when::after {
    content: " ✓ 選択中";
    color: var(--color-primary-strong);
    font-weight: 700;
  }

  .cal-pick .when {
    display: block;
    color: var(--color-primary-strong);
    font-weight: 700;
  }

  .cal-pick .title {
    display: block;
    font-weight: 700;
    margin-block: var(--space-3xs);
  }

  .cal-pick .location {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.9em;
  }

  .cal-pick .location:not(:empty)::before {
    content: "📍 ";
  }

  .cal-empty {
    color: var(--color-text-muted);
    padding-block: var(--space-sm);
  }

  /* ====================== トップ：見学説明会のご案内 ======================
     PageCalendarServlet が id="events" のひな形を複製して日程を差し込む（サーバー側描画）。
     予定なし・取得失敗のときはコアが .cal-empty の案内文を入れる（上のカレンダー節と共通）。 */
  .home-seminar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
  }

  .home-seminar__item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
  }

  .home-seminar__item:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-weak);
  }

  .home-seminar__item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .home-seminar__item .when {
    display: block;
    color: var(--color-primary-strong);
    font-weight: 700;
  }

  .home-seminar__item .title {
    display: block;
    font-weight: 700;
    margin-block: var(--space-3xs);
  }

  .home-seminar__item .go {
    display: block;
    color: var(--color-accent-strong);
    font-weight: 700;
  }
}