/* ==========================================================================
   ひなたワークス 共通スタイル
   - 色は CSS 変数（R G B）で定義し、Tailwind の設定から参照しています
   - 文字と背景のコントラスト比は WCAG 2.1 AA（4.5:1 以上）を確認済みです
   ========================================================================== */

/* ---------- 配色（ライト） ---------- */
:root {
  --c-bg: 255 252 243;          /* 生成り */
  --c-surface: 255 255 255;
  --c-cream: 255 244 204;       /* やわらかいイエロー */
  --c-mint: 230 242 232;        /* ペールグリーン */
  --c-badge: 247 231 166;
  --c-ink: 38 51 43;            /* 本文 13.2:1 */
  --c-muted: 74 90 80;          /* 補足文 6.3:1 以上 */
  --c-primary: 46 106 78;       /* リンク・ボタン 5.1:1 以上 */
  --c-primary-strong: 34 84 61;
  --c-on-primary: 255 255 255;
  --c-sun: 242 201 76;          /* 装飾専用（文字には使わない） */
  --c-line: 228 220 197;        /* 装飾的な区切り線 */
  --c-field: 118 123 106;       /* 入力欄の枠 3:1 以上 */
  --c-focus: 27 79 156;         /* フォーカスリング */
  --c-danger: 163 38 27;
  --header-shadow: 0 1px 0 rgb(var(--c-line));
}

/* ---------- 配色（ダーク：目に優しいダークグレー） ----------
   真っ黒・真っ白を避け、コントラストが強くなりすぎないようにしています */
:root.dark {
  --c-bg: 38 40 43;
  --c-surface: 48 51 55;
  --c-cream: 58 55 44;
  --c-mint: 45 56 50;
  --c-badge: 74 69 50;
  --c-ink: 227 224 216;
  --c-muted: 185 181 170;
  --c-primary: 156 207 176;
  --c-primary-strong: 181 222 197;
  --c-on-primary: 23 34 28;
  --c-sun: 201 169 74;
  --c-line: 68 72 77;
  --c-field: 140 144 150;
  --c-focus: 245 212 110;
  --c-danger: 242 166 156;
}

/* ---------- 文字サイズ切り替え ----------
   ルートの font-size を変えると、rem 指定の文字・余白・ボタンがすべて連動して拡大します。
   パーセント指定なので、ブラウザ側の文字サイズ設定も尊重されます。 */
html[data-font-size="standard"] { font-size: 100%; }    /* 16px 相当 */
html[data-font-size="large"]    { font-size: 118.75%; } /* 19px 相当 */
html[data-font-size="xlarge"]   { font-size: 137.5%; }  /* 22px 相当 */

/* ---------- ベース ---------- */
html body {
  margin: 0;
  background-color: rgb(var(--c-bg));
  color: rgb(var(--c-ink));
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.85;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html body { transition: background-color 0.3s ease, color 0.3s ease; }
}

[hidden] { display: none !important; }

/* 見出しへのページ内リンクで、見出しが画面上端に貼り付かないように */
:target, [id] { scroll-margin-top: 1.5rem; }

/* ダークモードでは写真・イラストの明るさを少し抑え、まぶしさを軽減 */
.dark img { filter: brightness(0.86) saturate(0.95); }

/* ---------- フォーカスリング ----------
   キーボード操作時だけ、太く・余白付きのリングをはっきり表示します。
   outline を使うことで、Windows のハイコントラストモードでも表示が保たれます。 */
:focus-visible {
  outline: 3px solid rgb(var(--c-focus));
  outline-offset: 3px;
  border-radius: 0.375rem;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- スキップリンク ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- リンク ---------- */
.link {
  color: rgb(var(--c-primary));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  font-weight: 700;
}
.link:hover { text-decoration-thickness: 3px; }

/* ---------- ボタン（最小 44×44px） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  min-width: 2.75rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
}
.btn-primary:hover { background-color: rgb(var(--c-primary-strong)); }
.btn-secondary {
  background-color: rgb(var(--c-surface));
  border-color: rgb(var(--c-primary));
  color: rgb(var(--c-primary));
}
.btn-secondary:hover { background-color: rgb(var(--c-mint)); }
.btn[aria-current="page"] {
  box-shadow: 0 0 0 3px rgb(var(--c-bg)), 0 0 0 6px rgb(var(--c-primary));
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-link, .fs-btn, .theme-switch, .choice {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
}

/* ---------- ヘッダー：文字サイズボタン ---------- */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 2px solid rgb(var(--c-field));
  border-radius: 0.75rem;
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.fs-btn:hover { background-color: rgb(var(--c-mint)); }
.fs-btn[aria-pressed="true"] {
  border-color: rgb(var(--c-primary));
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
}

/* ---------- ヘッダー：ダークモード切り替えスイッチ ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 0.75rem;
  border: 2px solid rgb(var(--c-field));
  border-radius: 9999px;
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.theme-switch:hover { background-color: rgb(var(--c-mint)); }
.switch-track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: rgb(var(--c-field));
}
.switch-thumb {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background-color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .switch-thumb { transition: transform 0.2s ease; }
}
.theme-switch[aria-checked="true"] .switch-track { background-color: rgb(var(--c-primary)); }
.theme-switch[aria-checked="true"] .switch-thumb {
  transform: translateX(1.25rem);
  background-color: rgb(var(--c-on-primary));
}
.switch-state {
  min-width: 2em;
  font-size: 0.875rem;
  color: rgb(var(--c-muted));
}

/* ---------- グローバルナビゲーション ---------- */
.nav-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  color: rgb(var(--c-ink));
  font-weight: 700;
  text-decoration: none;
}
.nav-link:hover { background-color: rgb(var(--c-mint)); }
/* 現在のページは色だけに頼らず、下線バーでも示す */
.nav-link[aria-current="page"] {
  background-color: rgb(var(--c-mint));
  color: rgb(var(--c-primary));
  box-shadow: inset 0 -3px 0 rgb(var(--c-primary));
}

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 1rem;
  border: 2px solid rgb(var(--c-field));
  border-radius: 0.75rem;
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-weight: 700;
  cursor: pointer;
}
.menu-btn { white-space: nowrap; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

/* スマートフォン・タブレット：JavaScript が有効なときだけ開閉式にする
   （無効な環境ではメニューを常に表示し、どのページにも移動できるようにする） */
@media (max-width: 1023.98px) {
  .js .menu-btn { display: inline-flex; }
  .js .site-nav:not([data-open="true"]) { display: none; }
}

/* ---------- カード ---------- */
.card {
  background-color: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 1.5rem;
}

/* ---------- 一日の流れ（タイムライン） ---------- */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(5.4375rem - 1px); /* 時刻欄 4.5rem + 間隔 1rem − 0.5rem + 丸の半径 */
  top: 0.9rem;
  bottom: -0.5rem;
  width: 2px;
  background-color: rgb(var(--c-line));
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::before { display: none; }
.timeline-time {
  font-weight: 700;
  color: rgb(var(--c-primary));
  font-variant-numeric: tabular-nums;
}
.timeline-body { position: relative; padding-left: 1.25rem; }
.timeline-body::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.45rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  background-color: rgb(var(--c-sun));
  border: 3px solid rgb(var(--c-surface));
  box-shadow: 0 0 0 2px rgb(var(--c-primary));
}

/* ---------- 表 ---------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th,
.data-table td {
  padding: 0.875rem 1rem;
  border: 1px solid rgb(var(--c-line));
  text-align: left;
  vertical-align: top;
}
.data-table thead th,
.data-table tbody th { background-color: rgb(var(--c-mint)); font-weight: 700; }
.data-table tbody th { white-space: nowrap; }
.data-table caption {
  caption-side: top;
  padding-bottom: 0.75rem;
  text-align: left;
  font-weight: 700;
}

/* ---------- よくある質問（details / summary） ---------- */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "＋";
  content: "＋" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgb(var(--c-mint));
  color: rgb(var(--c-primary));
}
.faq-item[open] summary::after { content: "－"; content: "－" / ""; }

/* ---------- フォーム ---------- */
.field {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 2px solid rgb(var(--c-field));
  border-radius: 0.75rem;
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  line-height: 1.6;
}
textarea.field { min-height: 9rem; resize: vertical; }
select.field { cursor: pointer; }
.field::placeholder { color: rgb(var(--c-muted)); opacity: 1; }
.field[aria-invalid="true"] {
  border-color: rgb(var(--c-danger));
  border-width: 3px;
}
.dark .field { color-scheme: dark; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid rgb(var(--c-line));
  border-radius: 0.75rem;
  background-color: rgb(var(--c-surface));
  cursor: pointer;
}
.choice:hover { border-color: rgb(var(--c-field)); }
.choice:has(input:checked) {
  border-color: rgb(var(--c-primary));
  background-color: rgb(var(--c-mint));
}
.choice input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: rgb(var(--c-primary));
  cursor: pointer;
}
fieldset[aria-invalid="true"] .choice,
.choice:has(input[aria-invalid="true"]) { border-color: rgb(var(--c-danger)); border-width: 3px; }

.badge-required,
.badge-optional {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 0.1em;
}
.badge-required { background-color: rgb(var(--c-danger)); color: rgb(var(--c-bg)); }
.badge-optional { background-color: rgb(var(--c-mint)); color: rgb(var(--c-muted)); }

.field-error {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
  color: rgb(var(--c-danger));
  font-weight: 700;
}
.field-error::before { content: "⚠"; content: "⚠" / ""; flex: none; }

/* ---------- 動きを減らす設定への対応 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 強制カラーモード（Windows ハイコントラスト）への対応 ---------- */
@media (forced-colors: active) {
  .fs-btn[aria-pressed="true"],
  .theme-switch[aria-checked="true"] .switch-track { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .nav-link[aria-current="page"] { text-decoration: underline; }
}

/* ---------- 印刷 ---------- */
@media print {
  .a11y-tools, .menu-btn, .skip-link { display: none !important; }
  .js .site-nav { display: block !important; }
}

/* 2列（見出し／内容）の表は、スマートフォンでは縦に積んで横スクロールをなくす */
@media (max-width: 639.98px) {
  .data-table-stack th,
  .data-table-stack td { display: block; width: auto; border-width: 0 0 1px; }
  .data-table-stack th { padding-bottom: 0.5rem; }
  .data-table-stack tr:last-child td { border-bottom: 0; }
}

/* 狭い画面ではボタンの左右余白を少し詰め、拡大表示でもはみ出さないようにする */
@media (max-width: 639.98px) {
  .btn { padding-left: 1.25rem; padding-right: 1.25rem; }
}