/* ============================================================
   Step Skills Academy — 共通デザイントークン & 共通コンポーネント
   v2: オレンジ×白 / フラット / 余白コンパクト / ふりがな対応
   全ページで <link rel="stylesheet" href="assets/common.css"> で読み込む
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- ブランドカラー(オレンジ = 明るい・親しみやすい) ---- */
  --brand-800: #C24A05;
  --brand-700: #E8590C;
  --brand-600: #F76707;
  --brand-100: #FFE8CC;
  --brand-050: #FFF4E6;

  /* ---- アクセント / セマンティック ---- */
  --accent-700: #2B8A3E;
  --accent-600: #2F9E44;
  --accent-100: #E6F7EA;
  --success-700: #2B8A3E;
  --success-600: #2F9E44;
  --success-100: #E6F7EA;
  --warn-700: #B54708;
  --warn-600: #F08C00;
  --warn-100: #FFF7E0;
  --danger-700: #C92A2A;
  --danger-600: #E03131;
  --danger-100: #FFEBEB;
  --info-700: #1864AB;
  --info-600: #1971C2;
  --info-100: #E7F2FD;

  /* ---- テキスト・背景・線 ---- */
  --ink-900: #212529;
  --ink-700: #495057;
  --ink-500: #6B7280;
  --bg: #FFFFFF;
  --bg-alt: #FFF9F3;
  --surface: #FFFFFF;
  --line: #DEE2E6;
  --line-strong: #CED4DA;

  /* ---- 角丸(小さめ・シンプルに) ---- */
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;

  /* ---- 影(ほぼ使わない。フラット重視) ---- */
  --shadow-card: none;
  --shadow-pop: 0 2px 8px rgba(33, 37, 41, .10);

  /* ---- 余白スケール(コンパクト) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;

  /* ---- フォント ---- */
  --font-body: "Noto Sans JP", "Noto Sans", "Noto Sans Myanmar", system-ui, sans-serif;
}

/* ---- ベース ---- */
* { box-sizing: border-box; }
/* hidden属性が display:grid/flex に負けないようにする */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
:lang(my), [lang="my"] { line-height: 1.85; }

img { max-width: 100%; display: block; }
a { color: var(--brand-800); }

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 var(--sp-2); }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.2rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25em; }
li { margin-bottom: var(--sp-1); }

/* ---- フォーカス可視化 ---- */
:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- スキップリンク ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-700);
  color: #fff;
  padding: 8px 14px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- ふりがな(ruby) ---- */
ruby {
  ruby-position: over;
  /* 読みが親文字より長いとき、親文字が「外 食 業」のように
     引き伸ばされるのを防ぐ。親文字はそのまま、読みだけ上に載せる */
  ruby-align: center;
}
rt {
  font-size: .5em;
  font-weight: 400;
  color: var(--ink-500);
  line-height: 1.1;
  letter-spacing: -0.05em;
  user-select: none;
  /* nowrap を付けると、読みの長さぶんカードが縮めなくなり、
     4列表示で右端の列が押し出されて切れる。付けないこと */
}

/* 読みが長くても、カードやボタンが最低幅を主張して
   レイアウトを壊さないようにする */
.fields-grid > * { min-width: 0; }
/* ふりがなOFF時 */
html:not(.furigana-on) rt { display: none; }
/* 問題文の中に最初から書かれている「漢字（かな）」のカッコ部分。
   ふりがなONのときはルビに置きかえるのでカッコを隠し、
   OFFのときは元の文章のまま見せる（表示の統一） */
html.furigana-on .ssa-yomi { display: none; }
/* ふりがなON時は行間を確保 */
html.furigana-on body { line-height: 2.0; }
html.furigana-on h1,
html.furigana-on h2,
html.furigana-on h3 { line-height: 1.9; }
html.furigana-on .btn { line-height: 1.8; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ico { font-size: 1.15em; line-height: 1; }

.btn-primary { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.btn-primary:hover:not(:disabled) { background: var(--brand-800); border-color: var(--brand-800); }
.btn-secondary { background: #fff; color: var(--brand-800); border-color: var(--brand-700); }
.btn-secondary:hover:not(:disabled) { background: var(--brand-050); }
.btn-success { background: var(--success-600); color: #fff; border-color: var(--success-600); }
.btn-success:hover:not(:disabled) { background: var(--success-700); border-color: var(--success-700); }
.btn-danger { background: var(--danger-600); color: #fff; border-color: var(--danger-600); }
.btn-danger:hover:not(:disabled) { background: var(--danger-700); border-color: var(--danger-700); }
.btn-ghost { background: #fff; color: var(--ink-700); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-alt); }
.btn-lg { min-height: 56px; font-size: 1.1rem; padding: 12px 22px; }
.btn-block { display: flex; width: 100%; }

/* ---- カード(枠線ベースのフラット) ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.card + .card { margin-top: var(--sp-3); }
.card > :last-child { margin-bottom: 0; }

/* ---- セクション見出し(左に太いオレンジ線) ---- */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.15rem;
  font-weight: 800;
  padding-left: 10px;
  border-left: 5px solid var(--brand-700);
  margin: 0 0 var(--sp-3);
}

/* ---- 言語切替 ---- */
.lang-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-btn {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line-strong);
  background: #fff;
  color: var(--ink-700);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.lang-btn:hover { border-color: var(--brand-600); }
.lang-btn[aria-pressed="true"], .lang-btn.active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* ---- ログイン状態表示 / ログアウトボタン ---- */
.auth-status { display: flex; align-items: center; gap: 6px; }
.auth-status:empty { display: none; }
.auth-who {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 130px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  color: var(--brand-800);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line-strong);
  background: #fff;
  color: var(--ink-700);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.auth-btn-in { border-color: var(--brand-700); color: var(--brand-800); }
.auth-btn-in:hover { background: var(--brand-050); }
.auth-btn-out { border-color: var(--danger-600); color: var(--danger-700); }
.auth-btn-out:hover { background: var(--danger-100); }

/* ---- ふりがなトグルボタン ---- */
.furigana-btn {
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line-strong);
  background: #fff;
  color: var(--ink-700);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.furigana-btn[aria-pressed="true"] {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: #fff;
}

/* ---- 共通ヘッダー(コンパクト) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 3px solid var(--brand-700);
}
.site-header .header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-900);
  font-weight: 800;
  min-height: 44px;
}
.site-header .brand img { width: 34px; height: 34px; object-fit: contain; }
.site-header .brand .brand-name { font-size: .95rem; line-height: 1.25; }
.site-header .brand .brand-sub {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-500);
}
.site-header nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-header .toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
/* 5言語+ナビ+ツールを1行に収める(721px以上) */
@media (min-width: 721px) {
  .site-header .lang-switch { flex-wrap: nowrap; }
  .site-header .lang-btn { padding: 6px 11px; font-size: .85rem; }
  .site-header nav a { padding: 6px 9px; font-size: .85rem; }
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-700);
  font-size: .9rem;
  font-weight: 700;
}
.site-header nav a:hover { background: var(--brand-050); color: var(--brand-800); }
.site-header nav a[aria-current="page"] {
  color: #fff;
  background: var(--brand-700);
}

/* ============================================================
   スマホ用ヘッダー: 1段(48px)に畳み、残りはメニューの中へ
   以前は ①ロゴ ②ナビ ③ログイン/ふりがな ④言語 の4段=185pxあり、
   画面の2割をヘッダーが占めていた。
   パソコンでは .header-panel を display:contents にするので
   これまでとまったく同じ並びになる。
   ============================================================ */
.menu-btn { display: none; }
.header-panel { display: contents; }

@media (max-width: 720px) {
  .site-header { position: sticky; top: 0; }

  .site-header .header-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    min-height: 48px;
  }

  /* ---- 1段目: ロゴ + メニューボタン ---- */
  .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    gap: 7px;
  }
  .site-header .brand img { width: 30px; height: 30px; }
  .site-header .brand .brand-name {
    min-width: 0;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* サブタイトルは飾りなので、狭い画面では出さない */
  .site-header .brand .brand-sub { display: none; }

  .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 46px;
    height: 44px;
    padding: 0 11px;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-700);
    transition: transform .18s ease, opacity .18s ease;
  }
  .site-header.menu-open .menu-btn {
    background: var(--brand-700);
    border-color: var(--brand-700);
  }
  .site-header.menu-open .menu-btn span { background: #fff; }
  /* 開いたら × に変える */
  .site-header.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .site-header.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---- メニューの中身(ふだんは隠す) ---- */
  .header-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 120;
    background: #fff;
    border-bottom: 3px solid var(--brand-700);
    box-shadow: 0 10px 24px rgba(33, 37, 41, .16);
    padding: var(--sp-3);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.menu-open .header-panel { display: block; }

  /* ナビは2列の大きめボタン(指で押しやすく) */
  .site-header nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 var(--sp-3);
  }
  .site-header nav a {
    min-height: 48px;
    padding: 6px 10px;
    font-size: .88rem;
    justify-content: flex-start;
    border: 1px solid var(--line);
    background: var(--bg-alt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header nav a[aria-current="page"] { border-color: var(--brand-700); }

  /* ログイン状態 / ふりがな */
  .site-header .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--sp-3);
  }
  .site-header .toolbar .auth-status { flex: 1 1 auto; }
  .auth-who { max-width: none; flex: 1 1 auto; font-size: .82rem; }
  .auth-btn, .furigana-btn { min-height: 46px; font-size: .85rem; }
  .site-header .toolbar .furigana-btn { flex: 1 1 auto; justify-content: center; }

  /* 言語は5つを均等に並べる(横スクロール不要) */
  .site-header .lang-switch {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin: 0;
  }
  .site-header .lang-btn {
    min-height: 46px;
    padding: 4px 2px;
    font-size: .8rem;
    text-align: center;
  }

  /* メニューを開いている間、後ろをうっすら暗くする */
  .menu-scrim {
    position: fixed;
    inset: 0;
    /* ヘッダー(z-index:100)より下に置く。上に載せると
       メニューボタンをもう一度押しても閉じられなくなる */
    z-index: 90;
    background: rgba(33, 37, 41, .35);
    border: 0;
    padding: 0;
  }
}

/* iPhone の下端(ホームバー)に本文が潜り込まないようにする */
@supports (padding: max(0px)) {
  .site-footer { padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom)); }
}

/* ---- 共通フッター(コンパクト) ---- */
.site-footer {
  margin-top: var(--sp-6);
  background: var(--ink-900);
  color: #E9ECEF;
  padding: var(--sp-4) var(--sp-3);
}
.site-footer .footer-inner { max-width: 960px; margin: 0 auto; }
.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
}
.site-footer .footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  color: #F1F3F5;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.site-footer .footer-nav a:hover { color: #fff; text-decoration: underline; }
.site-footer .copyright { font-size: .75rem; color: #ADB5BD; margin: 0; }

/* ---- メッセージ ---- */
.msg {
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .92rem;
  font-weight: 600;
  border: 2px solid transparent;
}
.msg-error { background: var(--danger-100); color: var(--danger-700); border-color: #FFC9C9; }
.msg-success { background: var(--success-100); color: var(--success-700); border-color: #B2F2BB; }
.msg-warn { background: var(--warn-100); color: var(--warn-700); border-color: #FFE8A3; }
.msg-info { background: var(--info-100); color: var(--info-700); border-color: #C5DDF7; }

/* ---- フォーム ---- */
.field { margin-bottom: var(--sp-3); }
.field label, .field-label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: #fff;
}
textarea { min-height: 100px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-700);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-100);
}
.required-mark {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--danger-100);
  color: var(--danger-700);
  font-size: .7rem;
  font-weight: 700;
}
.optional-mark {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line);
  color: var(--ink-700);
  font-size: .7rem;
  font-weight: 700;
}

/* ---- ユーティリティ ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.container { max-width: 960px; margin: 0 auto; padding: var(--sp-3) var(--sp-3); }
.container-narrow { max-width: 520px; margin: 0 auto; padding: var(--sp-3); }
.stack > * + * { margin-top: var(--sp-3); }
.ico { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}