/* === 共通ベース === */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
body {
  font-family: var(--font-family-sans);
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
  font-size: var(--font-size-16);
  font-weight: 400;
  line-height: var(--line-height-170);
}

/* === フォーカスリング === */
:focus-visible {
  outline: 4px solid var(--color-neutral-black);
  outline-offset: 2px;
  border-radius: var(--border-radius-4);
}

/* === ヘッダー === */
.header { background: var(--color-neutral-white); padding: var(--space-8) var(--space-16) var(--space-4); text-align: center; border-bottom: 3px solid var(--color-brand-accent); }
.header h1 { color: var(--color-neutral-solid-gray-800); letter-spacing: 0.05em; margin: 0; }
.header img.logo { height: 40px; width: auto; vertical-align: middle; }

/* === コンテナ === */
.container { max-width: 960px; margin: var(--space-8) auto; padding: 0 var(--space-16); }

/* === コンテンツ === */
.content { padding: var(--space-24) 0; }
.content h2 { text-align: center; font-size: var(--font-size-20); margin-bottom: var(--space-16); color: var(--color-neutral-solid-gray-900); font-weight: var(--font-weight-700); }
.content .text-left { text-align: left; }

fieldset { border: none; }

/* === フォーム共通 === */
.form-w480 { max-width: 480px; margin-left: auto; margin-right: auto; }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.text-left { text-align: left; }
.description { text-align: center; font-size: var(--font-size-18); color: var(--color-neutral-solid-gray-900); margin-bottom: var(--space-24); line-height: var(--line-height-170); max-width: 530px; margin-left: auto; margin-right: auto; }
.description--wide { max-width: none; }
.description.w-510 { max-width: 510px; }
.description.w-480 { max-width: 480px; }
label { display: block; font-size: var(--font-size-18); font-weight: var(--font-weight-700); margin-bottom: var(--space-8); color: var(--color-neutral-solid-gray-900); }
/* input[type="email"] は使用しない（ブラウザ自動バリデーションのエラーメッセージがカスタマイズ不可のため、
   type="text" + サーバーバリデーションで対応）。将来使う場合は type="text" と同じスタイルを適用すること */
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  margin-bottom: var(--space-16);
  border: 2px solid var(--color-neutral-solid-gray-300);
  border-radius: var(--border-radius-8);
  font-size: var(--font-size-18);
  font-family: var(--font-family-sans);
  line-height: normal;
  background: var(--color-neutral-white);
}
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--color-neutral-black);
  outline: 4px solid var(--color-neutral-black);
  outline-offset: 0;
  box-shadow: none;
  border-radius: var(--border-radius-8);
}
input.input-error {
  border-color: var(--color-semantic-error-1);
}


/* === ボタン === */
.btn-primary {
  display: block;
  width: fit-content;
  min-width: 200px;
  padding: var(--space-8) var(--space-24);
  background: var(--color-brand-primary);
  color: var(--color-neutral-white);
  border: 2px solid var(--color-brand-primary);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-sans);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  line-height: normal;
  margin: var(--space-24) auto 0;
}
.btn-primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
.btn-primary:focus-visible { background-color: var(--color-brand-primary); outline-offset: 0; }

.btn-secondary,
.btn-secondary:visited,
.btn-secondary:link {
  display: inline-block;
  min-width: 200px;
  padding: var(--space-8) var(--space-24);
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-sans);
  letter-spacing: 0.05em;
  line-height: normal;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--color-brand-primary); color: var(--color-neutral-white); }
.btn-secondary:focus-visible { background: var(--color-brand-primary); color: var(--color-neutral-white); outline-offset: 0; }

.btn-utility,
.btn-utility:visited,
.btn-utility:link {
  display: inline-block;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-neutral-solid-gray-300);
  color: var(--color-neutral-solid-gray-800);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  font-family: var(--font-family-sans);
  line-height: normal;
  text-decoration: none;
  background: var(--color-neutral-solid-gray-50);
  cursor: pointer;
}
.btn-utility:hover { background: var(--color-neutral-solid-gray-100); border-color: var(--color-neutral-solid-gray-800); }
.btn-utility:focus-visible { outline-offset: 0; }

/* === 郵便番号検索メッセージ === */
.postal-message { margin-top: var(--space-8); font-size: var(--font-size-16); color: var(--color-text-notice); }

/* === フォーム行区切り（dl/dt/dd テーブル風） === */
.table-form { width: 100%; border: 1px solid var(--color-neutral-solid-gray-200); }
.table-form dt { padding: var(--space-12); background: var(--color-neutral-solid-gray-50); font-size: var(--font-size-18); font-weight: var(--font-weight-700); border-bottom: 1px solid var(--color-neutral-solid-gray-200); }
.table-form dd { padding: var(--space-12); margin: 0; border-bottom: 1px solid var(--color-neutral-solid-gray-200); letter-spacing: 0.02em; font-size: var(--font-size-18); }
.table-form dd:last-child { border-bottom: none; }
.badge-required { background: var(--color-brand-primary); color: var(--color-neutral-white); font-size: 0.6875rem; padding: 2px 6px; border-radius: var(--border-radius-4); font-weight: var(--font-weight-400); }
.table-form .badge-required { margin-left: var(--space-8); }
@media (min-width: 576px) {
  .table-form { display: grid; grid-template-columns: 11em 1fr; }
  .table-form dt { border-bottom: 1px solid var(--color-neutral-solid-gray-200); border-right: 1px solid var(--color-neutral-solid-gray-200); display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
  .table-form dd { border-bottom: 1px solid var(--color-neutral-solid-gray-200); }
}
/* === 通知ボックス（エラー・ワーニング共通） === */
.notice-box:focus,
.notice-box:focus-visible { outline: none; }
.notice-box {
  border-left: 4px solid;
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
  border-radius: var(--border-radius-4);
  text-align: left;
  font-size: var(--font-size-18);
  color: var(--color-neutral-solid-gray-900);
  line-height: var(--line-height-170);
}
.error {
  border-color: var(--color-semantic-error-1);
  background: var(--color-bg-error);
}
.error__title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-18);
  color: var(--color-semantic-error-1);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.error__title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.error__action {
  margin-top: var(--space-4);
}
.error-code {
  margin-top: var(--space-16);
  font-size: var(--font-size-14);
  color: var(--color-neutral-solid-gray-600);
}
.error__list {
  margin-top: var(--space-4);
  padding-left: 0;
  list-style: none;
}
.error__list li {
  margin-top: 2px;
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-18);
  color: var(--color-semantic-error-1);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.error__list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.warning {
  border-color: var(--color-primitive-orange-600);
  background: var(--color-primitive-orange-50);
}
.warning__title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-18);
  color: var(--color-primitive-orange-600);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.warning__title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 9v4M12 17v0' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 9v4M12 17v0' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.info {
  border-color: var(--color-semantic-info-1);
  background: var(--color-primitive-blue-50);
}
.info__title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-18);
  color: var(--color-semantic-info-1);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.info__title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7v1' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7v1' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.warning__list {
  margin-top: var(--space-4);
  padding-left: 1.5em;
  list-style: disc;
}
.warning__list li {
  margin-top: 2px;
}
.warning__action {
  margin-top: var(--space-4);
}

/* === リンク === */
.links { text-align: center; margin-top: var(--space-48); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); max-width: 480px; margin-left: auto; margin-right: auto; }
.links a { color: var(--color-brand-primary); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links a.btn-secondary,
.links a.btn-secondary:hover { text-decoration: none; }
.links p { margin-bottom: var(--space-8); }

/* === フッター === */
.footer {
  display: block;
  max-width: 1020px;
  margin: var(--space-64) auto var(--space-24);
  padding: 0 var(--space-16);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  color: var(--color-neutral-solid-gray-800);
  letter-spacing: 0.34px;
  line-height: var(--line-height-170);
  overflow-wrap: anywhere;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-32);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-16);
}
.footer-links a {
  display: block;
  width: fit-content;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-130);
  letter-spacing: 0;
  color: var(--color-neutral-solid-gray-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer-links a:visited { color: var(--color-neutral-solid-gray-800); }
@media (hover: hover) {
  .footer-links a:hover { text-decoration-thickness: 3px; }
}
.footer-links a:active { text-decoration-thickness: 1px; }
.footer-copyright { font-size: var(--font-size-16); color: var(--color-neutral-solid-gray-800); margin: 0; }

/* === 確認コード入力 === */
.content .code-input { text-align: center; letter-spacing: 0.2em; font-size: var(--font-size-22); font-variant-numeric: tabular-nums; width: 7em; padding: var(--space-8); margin: 0 auto var(--space-24); display: block; }

/* === 視覚的に非表示（スクリーンリーダー用） === */
.visually-hidden,
.password-input__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* パスワード入力 */
.password-input {
  position: relative;
  margin-bottom: var(--space-16);
  font-size: var(--font-size-18);
  max-width: 26em;
}
.password-input input {
  width: 100%;
  margin-bottom: 0;
  padding-right: 4em;
}
.password-input__visibility-btn {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-neutral-solid-gray-50);
  border: 1px solid var(--color-neutral-solid-gray-300);
  border-radius: var(--border-radius-full);
  padding: 8px 0;
  width: 3.5em;
  text-align: center;
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  color: var(--color-neutral-solid-gray-800);
  cursor: pointer;
  font-family: var(--font-family-sans);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.password-input__visibility-btn:hover {
  background: var(--color-neutral-solid-gray-100);
  border-color: var(--color-neutral-solid-gray-800);
}
.password-input__visibility-btn.is-showing {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-neutral-white);
}
.password-input__visibility-btn.is-showing:hover {
  background: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === ボタングループ（プライマリー＋セカンダリー） === */
.btn-group {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-24);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 410px) {
  .btn-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: clamp(var(--space-16), 8vw, 48px);
  }
}
.btn-group .btn-primary { margin: 0; width: 100%; min-width: 0; }
.btn-group .btn-secondary { margin: 0; width: 100%; min-width: 0; text-align: center; }
@media (min-width: 410px) {
  .btn-group .btn-primary { width: auto; flex: 1; max-width: 220px; display: flex; align-items: center; justify-content: center; }
  .btn-group .btn-secondary { width: auto; flex: 1; max-width: 220px; display: flex; align-items: center; justify-content: center; }
}

/* === 同意エリア === */
.agree-links { list-style: none; padding: 0; margin: 0; font-size: var(--font-size-18); text-align: center; }
.agree-links li { margin-bottom: var(--space-8); }
.agree-links a { color: var(--color-neutral-solid-gray-900); text-decoration: underline; }
@media (hover: hover) {
  .agree-links a:hover { text-decoration-thickness: 3px; }
}

.agree-label { font-weight: var(--font-weight-400); display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-16); margin-top: var(--space-8); margin-bottom: var(--space-16); color: var(--color-neutral-solid-gray-600); cursor: pointer; }
div.agree-label { display: flex; justify-content: center; margin-top: var(--space-24); margin-bottom: var(--space-24); }
.agree-label label { display: inline; font-weight: var(--font-weight-400); font-size: var(--font-size-18); margin-bottom: 0; cursor: pointer; color: var(--color-neutral-solid-gray-900); }
.agree-label .badge-required { margin-right: var(--space-16); }
.agree-label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.5em; height: 1.5em; border: 2px solid var(--color-neutral-solid-gray-400); border-radius: 4px; background: var(--color-neutral-white); cursor: pointer; position: relative; flex-shrink: 0; }
/* チェックマーク色 %23c41e24 = --color-brand-primary（SVG data URI内ではCSS変数不可） */
.agree-label input[type="checkbox"]:checked { background: var(--color-neutral-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c41e24' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/110% no-repeat; }
.agree-label input[type="checkbox"]:focus-visible { outline: 4px solid var(--color-neutral-black); outline-offset: 2px; }

/* === 外部リンクアイコン === */
.icon-external { display: inline-block; width: 16px; height: 16px; vertical-align: -0.15em; margin-left: 2px; }

/* === フォーム横並び === */
.form-row { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.form-row > div { flex: 1; }
@media (max-width: 576px) {
  .form-row > div { flex-basis: 100%; }
}
.form-row--tight { gap: var(--space-8); flex-wrap: nowrap; }
.form-row label { font-weight: var(--font-weight-400); font-size: var(--font-size-18); margin-bottom: 0; }
.form-row input { flex: 1; }
.form-row input[type="text"] { margin-bottom: 0; }

/* === インラインラベル（ラジオ・チェック） === */
.label-inline { font-weight: var(--font-weight-400); display: inline-flex; align-items: baseline; gap: var(--space-4); margin-right: var(--space-16); font-size: var(--font-size-18); cursor: pointer; }
.label-inline input[type="radio"] { appearance: none; -webkit-appearance: none; width: 1.5em; height: 1.5em; border: 2px solid var(--color-neutral-solid-gray-400); border-radius: 50%; background: var(--color-neutral-white); cursor: pointer; flex-shrink: 0; position: relative; top: 0.2em; }
.label-inline input[type="radio"]:checked { border-color: var(--color-neutral-solid-gray-400); background: radial-gradient(circle, var(--color-neutral-solid-gray-900) 40%, var(--color-neutral-white) 41%); }
.label-inline input[type="radio"]:focus-visible { outline: 4px solid var(--color-neutral-black); outline-offset: 2px; }

/* === 幅指定input === */
.input-w4 { max-width: 4em; letter-spacing: 0.02em; }
.input-w5 { max-width: 5em; letter-spacing: 0.02em; }
.input-w8 { max-width: 8em; letter-spacing: 0.02em; }
.input-w26 { max-width: 26em; letter-spacing: 0.02em; }

/* === select === */
.form-select { -webkit-appearance: none; appearance: none; padding: var(--space-8) 2em var(--space-8) var(--space-8); border: 1px solid var(--color-neutral-solid-gray-300); border-radius: var(--border-radius-4); font-size: var(--font-size-18); font-family: var(--font-family-sans); background: var(--color-neutral-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.5em center/1em no-repeat; }
.form-select:focus-visible { outline: 4px solid var(--color-neutral-black); outline-offset: 0; border-radius: var(--border-radius-4); }

/* === 補足テキスト === */
.hint { color: var(--color-neutral-solid-gray-900); font-size: var(--font-size-18); letter-spacing: 0.02em; }
.hint a { color: var(--color-neutral-solid-gray-900); text-decoration: underline; }
.hint a:hover, .hint a:focus { text-decoration-thickness: 3px; }

/* === 戻るナビ（native WebView用） === */
.back-nav { text-align: center; margin: var(--space-32) 0; }

/* === ヘルプテキスト === */
.help-text { font-size: var(--font-size-18); color: var(--color-neutral-solid-gray-900); line-height: var(--line-height-170); max-width: 30em; }

/* === ディスクロージャー（折りたたみ） === */
.disclosure { text-align: left; width: 100%; max-width: 480px; }
.disclosure summary { font-size: var(--font-size-18); font-weight: var(--font-weight-700); cursor: pointer; padding: var(--space-8) 0; }
.disclosure .help-text { margin-top: var(--space-8); }

/* === ドキュメントページ（規約・ポリシー） === */
.doc { text-align: left; max-width: 1020px; margin: 0 auto; }

/* コンテナ幅をドキュメントページでは広げる */
.container-wide { max-width: 1020px; padding: 0 var(--space-24); }
.doc h3 { font-size: var(--font-size-20); margin-top: var(--space-32); font-weight: var(--font-weight-700); }
.doc h4 { font-size: var(--font-size-18); margin-top: var(--space-24); font-weight: var(--font-weight-700); }
.doc h5 { font-size: var(--font-size-18); margin-top: var(--space-16); font-weight: var(--font-weight-700); }
.doc p { font-size: var(--font-size-18); line-height: var(--line-height-175); margin-top: var(--space-12); }
.doc hr { margin: var(--space-32) 0; border: none; border-top: 1px solid var(--color-neutral-solid-gray-200); }
.doc .doc-note { font-size: var(--font-size-14); color: var(--color-neutral-solid-gray-900); text-align: center; margin-top: var(--space-24); }
.doc .doc-footer { text-align: left; margin-top: var(--space-32); font-size: var(--font-size-18); color: var(--color-neutral-solid-gray-900); }
.doc ul { list-style: none; padding-left: 1.5em; margin-top: var(--space-8); }
.doc ul > li { margin-top: var(--space-4); }
.doc nav[aria-label] { margin-top: var(--space-16); margin-bottom: var(--space-32); padding: var(--space-16) var(--space-24); border: 1px solid var(--color-neutral-solid-gray-300); border-radius: var(--border-radius-8); }
.doc nav[aria-label] h3 { margin-top: 0; }
.doc nav[aria-label] ul { list-style: disc; padding-left: var(--space-24); }
.doc nav[aria-label] li { margin-top: var(--space-8); }
.doc nav[aria-label] button { font-size: var(--font-size-18); color: var(--color-neutral-solid-gray-900); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-align: left; font-weight: var(--font-weight-400); font-family: inherit; }
.doc nav[aria-label] button:hover { text-decoration-thickness: 3px; }

/* === ページトップボタン === */
.back-to-top { position: fixed; bottom: var(--space-24); right: var(--space-24); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-8) var(--space-12); border: 1px solid var(--color-neutral-solid-gray-300); border-radius: var(--border-radius-full); background: var(--color-neutral-solid-gray-50); color: var(--color-neutral-solid-gray-800); font-size: var(--font-size-14); font-weight: var(--font-weight-700); font-family: var(--font-family-sans); line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 100; }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-neutral-solid-gray-100); border-color: var(--color-neutral-solid-gray-800); }

/* === 確認ダイアログ === */
.confirm-dialog { border: none; border-radius: var(--border-radius-8); padding: var(--space-32); max-width: 400px; width: calc(100% - var(--space-32)); font-family: var(--font-family-sans); margin: auto; }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.confirm-dialog__message { font-size: var(--font-size-18); line-height: var(--line-height-170); color: var(--color-neutral-solid-gray-900); margin-bottom: var(--space-24); }
.confirm-dialog__actions { display: flex; flex-direction: column; gap: var(--space-24); }
.confirm-dialog__actions .btn-primary { width: 100%; }
.confirm-dialog__actions .btn-secondary { width: 100%; }