@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

/* === assets/css/reset.css === */
/* reset.css */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 固定ヘッダー分のスクロールオフセット（ヘッダー高さ52px + 余白20px）*/
[id] {
  scroll-margin-top: 72px;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

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

ul, ol {
  list-style: none;
}

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

/* === assets/css/variables.css === */
/* variables.css */
:root {
  /* === Colors === */
  --color-primary:       #E6001B; /* UI・アクティブ・送信 */
  --color-secondary:     #0035AD; /* サブ動線 */
  --color-dark:          #222222; /* 決定・フォーカス・本文 */
  --color-link:          #0088BF; /* テキストリンク */
  --color-error:         #E6001B; /* エラー */

  --color-white:         #FFFFFF;
  --color-bg:            #F8F8F8; /* ページ背景 / disable背景 */
  --color-border:        #DDDDDD; /* 入力枠・区切り線 */
  --color-placeholder:   #AAAAAA; /* プレースホルダー */
  --color-footer-bg:     #222222;
  --color-footer-text:   #FFFFFF;
  --color-footer-copy:   #AAAAAA;
  --color-selected:      #666666; /* 言語メニュー選択状態 */

  --color-error-bg:      rgba(230, 0, 27, 0.1); /* エラー入力背景 */
  --color-bg-blue:       #E4EBF9; /* テーブルヘッダー背景 */
  --color-bg-disable:    #999999; /* disable時の背景 */

  --color-gnav-item:        #444444; /* SP モバイルメニュー項目背景 */
  --color-gnav-item-border: #333333; /* SP モバイルメニュー区切り線 */
  --color-gnav-item-hover:  #555555; /* SP モバイルメニューホバー・アクティブ */

  /* === Typography === */
  --font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Meiryo", sans-serif;

  --font-size-h1:      40px;
  --font-size-h2:      30px;
  --font-size-h3:      24px;
  --font-size-h4:      20px;
  --font-size-h5:      18px;
  --font-size-h6:      18px;
  --font-size-body:    16px;
  --font-size-small:   14px;
  --font-size-note:    13px;
  --font-size-xs:      12px;
  --font-size-required: 10px;

  --line-height-base:  1.5;
  --line-height-body:  1.75;

  /* === Spacing === */
  --space-0:    0px;
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-48:   48px;
  --space-56:   56px;
  --space-64:   64px;
  --space-80:   80px;
  --space-96:   96px;
  --space-120:  120px;

  /* === Layout === */
  --content-width:      1260px;
  --side-padding-pc:    32px;
  --side-padding-sp:    16px;

  /* === Border === */
  --radius-base:   4px;
  --radius-small:  2px;

  /* === Transition === */
  --transition: 0.3s ease;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1:   24px;
    --font-size-h2:   22px;
    --font-size-h3:   20px;
    --font-size-h4:   18px;
    --font-size-h5:   16px;
    --font-size-h6:   16px;
    --font-size-body: 14px;
    --font-size-small: 13px;
    --font-size-note: 12px;
  }
}

/* === assets/css/components/heading.css === */
/* heading.css
   見出しコンポーネント：.h1〜.h6 および修飾クラス
*/

.h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.h2--section {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-24);
}

.h3 {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.h4 {
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.h4--section {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.h5 {
  font-size: var(--font-size-h5);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.h6 {
  font-size: var(--font-size-h6);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

@media (max-width: 768px) {
  .h2--section {
    padding-left: var(--space-16);
  }
}
/* === assets/css/components/text.css === */
/* text.css
   テキストコンポーネント：本文・注釈・エラー文字・リンクなど
*/

a.text-link {
  color: var(--color-link);
  text-decoration: underline;
  transition: opacity var(--transition);
}

a.text-link:hover {
  opacity: 0.7;
}

.text-body {
  font-size: var(--font-size-body);
  color: var(--color-dark);
  line-height: var(--line-height-body);
}

.text-small {
  font-size: var(--font-size-small);
  color: var(--color-dark);
  line-height: var(--line-height-body);
}

.text-note {
  font-size: var(--font-size-note);
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

/* text-note のカラー修飾子 */
.text-note--primary {
  color: var(--color-primary);
}


/* === assets/css/components/list.css === */
/* list.css */

/* === 箇条書きリスト === */
.list-bullet {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
}

.list-bullet__item {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  font-size: var(--font-size-body);
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.list-bullet__item::before {
  content: "・";
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: var(--line-height-base);
}

/* === 箇条書きリスト（小） === */
.list-bullet--small .list-bullet__item {
  font-size: var(--font-size-small);
}

/* === 番号付きリスト（小） === */
.list-ordered--small .list-ordered__item {
  font-size: var(--font-size-small);
}

/* === 番号付きリスト === */
.list-ordered {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  counter-reset: ordered-list;
}

.list-ordered__item {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  font-size: var(--font-size-body);
  color: var(--color-dark);
  line-height: var(--line-height-base);
  counter-increment: ordered-list;
}

.list-ordered__item::before {
  content: counter(ordered-list) ".";
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
  width: 1.5em;
  text-align: right;
  line-height: var(--line-height-base);
}

/* === assets/css/components/table.css === */
/* table.css */

/* === Data Table（1列目がヘッダー：デフォルト） === */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.data-table th,
.data-table td {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.data-table th {
  background-color: var(--color-bg-blue);
  font-weight: 500;
  text-align: left;
  width: 1%;
  white-space: nowrap;
}

.data-table td {
  background-color: var(--color-white);
}

/* === 1行目ヘッダー（data-table--row-header） ===
   HTML 構造：各 <tr> が「列」を表す。<th> が列ヘッダー、<td> がデータセル。
   PC：tbody を flex にして tr を横並びにすることで th が先頭行に見える。
   SP：flex レイアウトを維持したまま横スクロールで表示。
================================================= */
.data-table--row-header {
  display: block;
  border: 1px solid var(--color-border);
}

.data-table--row-header tbody {
  display: flex;
  align-items: stretch;
}

.data-table--row-header tr {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.data-table--row-header th,
.data-table--row-header td {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.data-table--row-header th {
  text-align: center;
  width: auto;
  white-space: normal;
}

/* 先頭列は左ボーダーなし */
.data-table--row-header tr:first-child th,
.data-table--row-header tr:first-child td {
  border-left: none;
}

/* 各列の最終セルは下ボーダーなし（外枠が担う） */
.data-table--row-header tr td:last-child {
  border-bottom: none;
}

/* === Responsive (SP) === */
@media (max-width: 768px) {
  /* 1列目ヘッダー（デフォルト）: 縦積み */
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .data-table {
    border: 1px solid var(--color-border);
  }

  .data-table th,
  .data-table td {
    border: none;
    border-bottom: 1px solid var(--color-border);
  }

  .data-table tr:last-child td:last-child {
    border-bottom: none;
  }

  /* 1行目ヘッダー: 縦積みをやめて横スクロールに */
  .data-table--row-header {
    overflow-x: auto;
  }

  /* tbody の flex を維持（.data-table の block 上書きを解除） */
  .data-table--row-header tbody {
    display: flex;
  }

  /* tr の flex を維持。min-width でスクロールを発生させる */
  .data-table--row-header tr {
    display: flex;
    flex-direction: column;
    flex: none;
    min-width: 8rem;
    width: auto;
  }

  /* th・td の width: 100% を解除し、PC の border-left を復元 */
  .data-table--row-header th,
  .data-table--row-header td {
    width: auto;
    border-left: 1px solid var(--color-border);
  }

  /* 先頭列は左ボーダーなし */
  .data-table--row-header tr:first-child th,
  .data-table--row-header tr:first-child td {
    border-left: none;
  }

  /* 各列の最終セルは下ボーダーなし（外枠が担う） */
  .data-table--row-header tr td:last-child {
    border-bottom: none;
  }
}

/* === assets/css/components/card.css === */
/* card.css */

/* === Card === */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  min-width: 240px;
  padding: var(--space-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);
  width: 100%;
}

.card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  gap: var(--space-8);
}

.card__head img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.card__title {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
  text-align: center;
}

.card--w300 {
  width: 300px;
}

/* === assets/css/components/button.css === */
/* button.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-base);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-base);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition);
  text-decoration: none;
}

/* アイコン付きボタン用アイコン */
.btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn:hover {
  opacity: 0.7;
}

/* Primary（ログイン・送信系）*/
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Secondary（新規登録系）*/
.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Cancel（キャンセル・戻る）*/
.btn--cancel {
  background-color: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

/* Small（アイコン付き小サイズ）*/
.btn--small {
  height: auto;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-small);
  font-weight: 700;
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  gap: var(--space-16);
  justify-content: space-between;
}

/* Disabled（共通）*/
.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-bg-disable);
  color: var(--color-white);
  cursor: not-allowed;
  opacity: 1;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  opacity: 1;
}

/* Cancel Disabled（キャンセルボタン専用）*/
.btn--cancel:disabled,
.btn--cancel[aria-disabled="true"] {
  background-color: var(--color-bg);
  color: var(--color-placeholder);
  border-color: var(--color-border);
}

/* Small Disabled（Smallボタン専用）*/
.btn--small:disabled,
.btn--small[aria-disabled="true"] {
  background-color: var(--color-bg);
  color: var(--color-placeholder);
  border-color: var(--color-border);
}

/* Full width */
.btn--full {
  width: 100%;
}

/* === Responsive (SP) ===
   font-size は 16px 固定（デザイン統一のため）
======================================== */
@media (max-width: 768px) {
  .btn {
    font-size: 16px;
    width: 100%;
  }
}

/* === assets/css/components/input.css === */
/* input.css */

/* === Input Field Wrapper ===
   入力フォーム・注釈・エラーメッセージをひとまとまりにするラッパー
=================================================== */
.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

/* === Text Input === */
.input {
  width: 100%;
  max-width: 480px;
  height: auto;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--line-height-base);
  transition: border-color var(--transition), background-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder {
  color: var(--color-placeholder);
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset;
  box-shadow: 0 0 0 1000px var(--color-white) inset;
}

.input:focus {
  outline: none;
  border-color: var(--color-dark);
}

.input:disabled {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-placeholder);
  cursor: not-allowed;
}

.input--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

/* === Textarea === */
.textarea {
  width: 100%;
  max-width: 480px;
  min-height: 120px;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--line-height-base);
  resize: vertical;
  transition: border-color var(--transition);
}

.textarea::placeholder {
  color: var(--color-placeholder);
}

.textarea:focus {
  outline: none;
  border-color: var(--color-dark);
}

.textarea:disabled {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-placeholder);
  cursor: not-allowed;
}

.textarea--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

/* === Password Input Wrapper ===
   ラッパーがborder・背景色を持つ「フィールド本体」として機能する。
   内側のinputはborder/backgroundを持たず、ラッパーを満たす形にする。
   - 通常時  : border #DDDDDD / bg white
   - フォーカス: :focus-within でborder #222222
   - エラー  : .input-password--error でborder/bg をエラー色
   - disabled : :has(:disabled) でborder/bg をdisable色
=================================================== */
.input-password {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--transition), background-color var(--transition);
}

/* ラッパー内のinputからborder・背景を除去 */
.input-password .input {
  border: none;
  background: transparent;
  border-radius: var(--radius-base);
  padding-right: 44px; /* トグルボタン分の余白 */
  height: 48px;
  flex: 1;
  min-width: 0;
}

/* inputのfocusアウトラインはラッパーが代わりに表現するため非表示 */
.input-password .input:focus {
  outline: none;
  box-shadow: none;
}

/* フォーカス状態：子要素がフォーカスを持つとき */
.input-password:focus-within {
  border-color: var(--color-dark);
}

/* エラー状態 */
.input-password--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

/* disabled状態 */
.input-password:has(.input:disabled) {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

.input-password__toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.input-password__toggle img {
  width: 18px;
  height: 16px;
  display: block;
}

/* === Auth Code Input (6-box) === */
.input-auth {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.input-auth__box {
  width: 48px;
  height: 56px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: var(--color-dark);
  background-color: var(--color-white);
}

.input-auth__box:focus {
  outline: none;
  border-color: var(--color-dark);
}

.input-auth__box:disabled {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-placeholder);
  cursor: not-allowed;
}

.input-auth__box--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

/* === Select Box === */
.select {
  width: 100%;
  max-width: 480px;
  height: auto;
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--line-height-base);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23222222' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  transition: border-color var(--transition);
}

.select:focus {
  outline: none;
  border-color: var(--color-dark);
}

.select:disabled {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-placeholder);
  cursor: not-allowed;
}

.select--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.select--placeholder {
  color: var(--color-placeholder);
}

/* --- プルダウンを開いた時の選択肢（option）を常に黒色にする --- */
.select option {
  color: var(--color-dark, #333333); /* 選択肢リスト内の文字色（黒） */
  background-color: #ffffff;
}


/* === Phone / FAX split input === */
.input-split {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.input-split__sep {
  width: 10px;
  height: 1px;
  background-color: var(--color-dark);
  flex-shrink: 0;
}

.input-split .input {
  width: 72px;
}

/* === 幅の例外指定 ===
   標準入力は max-width: 480px（.input デフォルト）。
   以下は意図的に短くする入力のみ個別指定する。
=================================================== */

/* セレクトボックス：国・都道府県 */
.input--w240 { max-width: 240px; }

/* 郵便番号 */
.input--w120 { max-width: 120px; }

/* === Responsive (SP) ===
   input / textarea / select の font-size は 16px 固定。
   16px 未満だと iOS Safari がフォーカス時に自動ズームする。
======================================== */
@media (max-width: 768px) {
  .input,
  .textarea,
  .select {
    font-size: 16px;
  }

  .input, .input-password, .textarea {
    max-width: 100%;
  }

  .input-auth__box {
    width: 36px;
    height: 48px;
  }
}

/* === Error message === */
.input-error-msg {
  display: block;
  font-size: var(--font-size-note);
  color: var(--color-error);
  line-height: var(--line-height-base);
}

.input-error-msg[hidden] {
  display: none;
}

/* === Helper text === */
.input-note {
  display: block;
  font-size: var(--font-size-note);
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

/* === assets/css/components/checkbox.css === */
/* checkbox.css */

/* === Checkbox === */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  line-height: var(--line-height-base);
}

.checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
  position: relative;
}

.checkbox__input:focus {
  outline: 1px solid var(--color-dark);
  /* outline-offset: 2px; */
}

.checkbox__input:checked {
  border-color: var(--color-dark);
  background-color: var(--color-white);
}

.checkbox__input:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--color-link);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox__input:disabled {
  border-color: var(--color-border);
  background-color: var(--color-bg);
  cursor: not-allowed;
}

.checkbox__input--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.checkbox__input--error:checked {
  border-color: var(--color-dark);
  background-color: var(--color-white);
}

.checkbox__label {
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.checkbox__label a {
  color: var(--color-link);
  text-decoration: underline;
  transition: opacity var(--transition);
}

.checkbox__label a:hover {
  opacity: 0.7;
}

.checkbox--disabled .checkbox__label {
  color: var(--color-placeholder);
}


/* === assets/css/components/radio.css === */
/* radio.css */

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  line-height: var(--line-height-base);
}

.radio__input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
  position: relative;
}

.radio__input:focus {
  outline: 1px solid var(--color-dark);
  /* outline-offset: 2px; */
}

.radio__input:checked {
  border-color: var(--color-dark);
}

.radio__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-link);
}

.radio__input:disabled {
  border-color: var(--color-border);
  background-color: var(--color-bg);
  cursor: not-allowed;
}

.radio__input--error {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.radio__input--error:checked {
  border-color: var(--color-dark);
  background-color: var(--color-white);
}

.radio__label {
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

.radio--disabled .radio__label {
  color: var(--color-placeholder);
}

/* === assets/css/components/modal.css === */
/* modal.css */

/* === Modal Overlay === */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}

.modal-overlay--active {
  display: flex;
}

/* === Modal Box === */
.modal {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* === Modal Header === */
.modal__header {
  background-color: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--space-24);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--line-height-base);
  text-align: center;
}

/* === Modal Body === */
.modal__body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: center;
}

.modal__text {
  text-align: center;
  width: 100%;
}

/* === Modal Actions === */
.modal__actions {
  display: flex;
  gap: var(--space-16);
  width: 100%;
}

.modal__actions .btn {
  flex: 1;
}

/* === Responsive === */
@media (max-width: 768px) {
  .modal {
    max-width: 100%;
  }

  .modal__actions {
    flex-direction: column-reverse;
  }
}

/* === assets/css/components/banner.css === */
/* banner.css */

/* === Banner Item === */
.banner-item {
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: opacity var(--transition);
}

.banner-item:hover {
  opacity: 0.7;
}

.banner-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* === assets/css/components/notice-box.css === */
/* notice-box.css */
.notice-box {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.notice-box__header {
  background-color: var(--color-dark);
  padding: var(--space-12) var(--space-24);
}

.notice-box__title {
  font-size: var(--font-size-h5);
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--line-height-base);
}

.notice-box__body {
  background-color: var(--color-white);
  padding: var(--space-16) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.notice-box__list-item {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.notice-box__bullet {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-base);
}

.notice-box__text {
  font-size: var(--font-size-small);
  color: var(--color-dark);
  line-height: var(--line-height-base);
}

@media (max-width: 768px) {
  .notice-box__body {
    padding: var(--space-16);
  }

  .notice-box__header {
    padding: var(--space-12) var(--space-16);
  }
}