/*
  ツールページ共通のナビゲーション（上部バー・下部フッター）
  - 色・フォントは assets/base.css の変数（--akp-*）を使う。base.css を先に読み込むこと
  - ダークモードは base.css の変数で自動的に切り替わる
  - 各ツールのスタイルとぶつからないよう、クラス名はすべて akp- で始める
  - 各ページの CSS が header{} / footer{} を要素セレクタで指定しているため、
    共通部分では <header> / <footer> 要素を使わない
*/
.akp-bar,
.akp-foot{
  font-family:var(--akp-font);
  line-height:1.7;
  text-align:left;
  box-sizing:border-box;
}
.akp-bar *,
.akp-foot *{box-sizing:border-box}
/* 画面には出さず、読み上げだけに使う文字 */
.akp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 上部バー ---------- */
.akp-bar{background:var(--akp-navy);color:#fff;position:relative;z-index:20}
.akp-bar-inner{max-width:960px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.akp-bar a{color:#fff;text-decoration:none}
.akp-bar-brand{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:700;font-size:15px;letter-spacing:.03em}
.akp-bar-brand img{width:28px;height:28px;border-radius:7px;display:block;flex:none}
.akp-bar-brand .akp-aka{color:var(--akp-akapen-on-navy)}
.akp-bar-links{display:flex;align-items:center;gap:4px;font-size:13.5px}
.akp-bar-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;border-radius:8px;color:#dbe7ed}
.akp-bar-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.akp-bar a:focus-visible,
.akp-foot a:focus-visible{outline:3px solid var(--akp-focus);outline-offset:2px}

/* ---------- 下部フッター ---------- */
.akp-foot{background:var(--akp-bg);color:var(--akp-ink);border-top:1px solid var(--akp-line);margin-top:48px;font-size:14px}
.akp-foot-inner{max-width:960px;margin:0 auto;padding:32px 16px 40px}

/* 次の一手 */
.akp-next{background:var(--akp-surface);border:1.5px solid var(--akp-akapen);border-radius:14px;padding:22px 20px;margin:0 0 32px}
.akp-next-title{font-size:17px;font-weight:800;margin:0 0 6px;color:var(--akp-ink);line-height:1.5}
.akp-next p{margin:0 0 14px;color:var(--akp-ink-2);font-size:14px}
.akp-next-related{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.akp-next-related li{margin:0;padding:0}
.akp-next-related a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--akp-line);border-radius:10px;background:var(--akp-bg);color:var(--akp-ink);font-weight:700;font-size:14px;text-decoration:none}
.akp-next-related a:hover{border-color:var(--akp-link);color:var(--akp-link)}
.akp-next-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:10px;background:var(--akp-akapen);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.akp-next-cta:hover{background:var(--akp-akapen-hover);color:#fff}
.akp-next-note{display:block;margin-top:10px;font-size:12.5px;color:var(--akp-ink-2)}

/* リンク集 */
.akp-foot-nav{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:720px){.akp-foot-nav{grid-template-columns:1.6fr 1fr 1fr}}
.akp-foot-heading{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--akp-ink-2);margin:0 0 8px}
.akp-foot-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
@media (min-width:480px){.akp-foot-list.akp-cols{grid-template-columns:1fr 1fr}}
.akp-foot-list li{margin:0;padding:0}
.akp-foot-list a{display:inline-flex;align-items:center;min-height:36px;color:var(--akp-link);text-decoration:none;font-size:14px}
.akp-foot-list a:hover{text-decoration:underline}
.akp-foot-list a[aria-current="page"]{color:var(--akp-ink);font-weight:700;text-decoration:none;cursor:default}
.akp-foot-copy{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--akp-line);font-size:12.5px;color:var(--akp-ink-2)}

/* ---------- 学習アプリの最下部（会社バーの下：コピーライト＋プライバシーポリシー） ---------- */
/* 本体の背景色の上に載るため、背景は付けず、文字色は本体から受け継ぐ */
.akp-foot-mini{max-width:1080px;margin:0 auto;padding:0 20px 28px;font-family:var(--akp-font);line-height:1.7;text-align:left}
.akp-foot-mini .akp-foot-copy{color:inherit;opacity:.85}
.akp-foot-mini a{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.akp-foot-mini a:focus-visible{outline:3px solid var(--akp-focus);outline-offset:2px}

/* 印刷時は出さない（総合診断の印刷モード含む） */
@media print{.akp-bar,.akp-foot{display:none!important}}
body.print-mode .akp-bar,
body.print-mode .akp-foot{display:none!important}