/* ATAWI数学 共通CSS（統合憲法 第21〜23・26条、AM-DD-001 §5）
   ・上段ヘッダー g-、単元バー u-、フッター f-、共通ページ c- の接頭辞だけを使う
   ・単元ページにも読み込まれるので、要素セレクタ（body・h1・a など）は .c-page の中だけに効かせる */
:root{
  --unit-color:#1f4e79;
  --unit-tint:color-mix(in srgb,var(--unit-color) 12%,#fff);
  --m-ink:#161616;
  --m-yellow:#ffe14d;
  --m-yellow-l:#fff4b8;
  --m-link:#1f4e79;
  --m-accent:#d08000;
  --m-accent-text:#9c5e00;
  --m-warn:#c0504d;
  --m-muted:#555;
  --m-font:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
  --m-font-pop:"Mochiy Pop One","BIZ UDPGothic","Hiragino Sans","Meiryo",sans-serif;
  --m-font-round:"Zen Maru Gothic","BIZ UDPGothic","Hiragino Sans","Meiryo",sans-serif;
  --m-shadow:4px 4px 0 var(--m-ink);
  /* 旧サイトのブログ一覧が使っていた変数（未定義だったものを定義する。AM-DD-001 §5.5） */
  --brand-lavender:#ffe14d;
  --brand-pink:#ffb7d8;
}

/* ---- 上段ヘッダー（全ページ） */
.g-head{position:relative;z-index:30;background:var(--m-yellow);border-bottom:4px solid var(--m-ink);font-family:var(--m-font);color:var(--m-ink)}
.g-head-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:6px 12px;min-height:56px;box-sizing:border-box}
.g-head a{color:var(--m-ink);text-decoration:none}
.g-logo{display:flex;align-items:center;gap:8px;min-height:44px;flex:0 0 auto;margin-right:auto}
.g-logo img{display:block;width:36px;height:36px}
.g-logo-text{font-family:var(--m-font-pop);font-size:20px;line-height:1.2;white-space:nowrap}
.g-nav{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.g-nav>a,.g-nav summary{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;box-sizing:border-box;font-family:var(--m-font-pop);font-size:16px;line-height:1.2;white-space:nowrap;border:3px solid transparent;border-radius:10px;cursor:pointer;background:none;color:var(--m-ink)}
.g-nav summary{list-style:none}
.g-nav summary::-webkit-details-marker{display:none}
.g-nav summary::after{content:"▾";margin-left:4px;font-size:14px}
.g-nav details[open]>summary{background:#fff;border-color:var(--m-ink)}
.g-nav>a:hover,.g-nav summary:hover{background:var(--m-yellow-l)}
.g-nav>a[aria-current],.g-nav summary[data-current]{border-color:var(--m-ink);background:#fff}
.g-nav .g-rec{border-color:var(--m-ink);background:#fff;border-radius:999px}
.g-nav .g-rec[aria-current]{background:var(--m-link);color:#fff}
.g-menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:4px solid var(--m-ink);box-shadow:0 6px 0 rgba(0,0,0,.08)}
.g-menu-in{max-width:1080px;margin:0 auto;padding:10px 12px 14px;box-sizing:border-box}
.g-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.g-menu a{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:3px solid var(--m-ink);border-radius:10px;background:#fff;font-family:var(--m-font);font-size:16px;font-weight:700;color:var(--m-ink)}
.g-menu a:hover{background:var(--m-yellow-l)}
.g-menu a[aria-current]{background:var(--m-yellow-l)}
.g-dot{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--fc,#1f4e79) 70%,#000);color:#fff;font-size:16px;font-family:var(--m-font);font-weight:700}
.g-menu-sub{font-size:16px;font-weight:400;color:var(--m-muted)}
@media (max-width:759px){.g-nav{gap:2px}.g-nav>a,.g-nav summary{padding:0 7px}}
@media (max-width:619px){
  .g-logo-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .g-head-in{padding:4px 8px}
}
@media (max-width:360px){.g-nav>a,.g-nav summary{font-size:14px;padding:0 5px}.g-nav summary::after{margin-left:2px}}

/* ---- 単元バー（単元の中のページだけ） */
.u-bar{background:var(--unit-tint);border-bottom:3px solid var(--m-ink);border-left:10px solid var(--unit-color);font-family:var(--m-font);color:#161616}
.u-bar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:6px 14px;padding:4px 12px;box-sizing:border-box;flex-wrap:wrap}
.u-bar a{color:#161616;text-decoration:none}
.u-name{display:flex;align-items:center;min-height:44px;font-weight:700;font-size:16px;white-space:nowrap}
.u-name .u-field{color:#161616}
.u-menu{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;max-width:100%;-webkit-overflow-scrolling:touch}
.u-menu li{flex:0 0 auto}
.u-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--m-ink);border-radius:999px;background:#fff;font-size:16px;font-weight:700;white-space:nowrap}
.u-menu a:hover{background:var(--m-yellow-l)}
.u-menu a[aria-current]{background:color-mix(in srgb,var(--unit-color) 65%,#000);color:#fff;border-color:var(--m-ink)}
@media (max-width:619px){.u-name .u-field{display:none}.u-bar-in{flex-wrap:nowrap}.u-menu{flex:1 1 auto}}

/* ---- 共通フッター */
.f-foot{margin-top:40px;background:var(--m-ink);color:#fff;font-family:var(--m-font);font-size:16px;line-height:1.7}
.f-foot-in{max-width:1080px;margin:0 auto;padding:24px 16px 32px;box-sizing:border-box}
.f-foot a,.c-page .f-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.f-foot a:hover,.c-page .f-foot a:hover{color:var(--m-yellow)}
.f-row{margin:0 0 14px}
/* 単元のCSSの h2（背景・枠・影）が効かないように打ち消す */
.f-foot .f-row h2{all:unset;display:block;font-family:var(--m-font);font-size:16px;font-weight:700;line-height:1.7;color:var(--m-yellow);margin:0 0 4px}
.f-foot .f-row h2::before,.f-foot .f-row h2::after{content:none}
.f-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.f-row li a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.f-row li a.f-rec{border:2px solid var(--m-yellow);border-radius:999px;text-decoration:none;min-height:40px;margin:2px 0}
.f-copy{margin:16px 0 0;color:#ddd}

/* ---- パンくず・スキップ（共通ページ。単元ページは単元の CSS の .breadcrumb を使う） */
.c-page .skip-link,.skip-link.c-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#161616;padding:10px 14px;border:3px solid #161616}
.c-page .skip-link:focus,.skip-link.c-skip:focus{left:8px;top:8px}
.c-page .breadcrumb{max-width:1000px;margin:10px auto 0;padding:0 16px;box-sizing:border-box;font-size:16px}
.c-page .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.c-page .breadcrumb li{display:flex;align-items:center}
.c-page .breadcrumb li+li::before{content:"＞";margin:0 6px;color:var(--m-muted)}
.c-page .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--m-link)}

/* ---- 共通ページの本文 */
body.c-page{margin:0;background:#fffdf3;color:#161616;font-family:var(--m-font);font-size:17px;line-height:1.8;-webkit-text-size-adjust:100%}
.c-page main{display:block;max-width:1000px;margin:0 auto;padding:12px 16px 24px;box-sizing:border-box}
.c-page main:focus{outline:none}
.c-page h1{font-family:var(--m-font-pop);font-weight:400;font-size:clamp(24px,5vw,34px);line-height:1.4;margin:18px 0 12px}
.c-page h2{font-family:var(--m-font-pop);font-weight:400;font-size:clamp(20px,4vw,26px);line-height:1.45;margin:32px 0 10px}
.c-page h3{font-size:19px;line-height:1.5;margin:22px 0 8px}
.c-page h4,.c-page h5{font-size:17px;margin:18px 0 6px}
.c-page a{color:var(--m-link);overflow-wrap:anywhere}
.c-page img,.c-page svg{max-width:100%;height:auto}
.c-page table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}
.c-page th,.c-page td{border:1px solid #bbb;padding:6px 8px;vertical-align:top;text-align:left}
.c-page .small,.c-small{font-size:16px;color:var(--m-muted)}
.c-page :focus-visible{outline:3px solid #161616;outline-offset:3px}
.c-lead{font-size:18px}
.c-notice{background:var(--m-yellow-l);border:3px solid var(--m-ink);border-radius:12px;padding:10px 14px;margin:14px 0}
.c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:6px 18px;border:3px solid var(--m-ink);border-radius:999px;background:var(--m-yellow);color:#161616 !important;font-family:var(--m-font-pop);font-size:17px;text-decoration:none;box-shadow:3px 3px 0 var(--m-ink)}
.c-btn:hover{background:var(--m-yellow-l)}
.c-btn.c-sub{background:#fff}
.c-mascot{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
.c-mascot img{flex:0 0 auto;width:72px;height:72px}
.c-bubble{position:relative;flex:1 1 auto;background:#fff;border:3px solid var(--m-ink);border-radius:16px;padding:10px 14px;font-family:var(--m-font-round);font-weight:700;font-size:17px;line-height:1.7;box-shadow:3px 3px 0 var(--m-ink)}
.c-bubble p{margin:0}

/* 分野・学年・単元のカード */
.c-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.c-card{border:3px solid var(--m-ink);border-top:10px solid var(--fc,#1f4e79);border-radius:14px;background:#fff;padding:12px 14px;box-shadow:var(--m-shadow)}
.c-card h3{margin:0 0 6px;font-family:var(--m-font-pop);font-weight:400;font-size:20px}
.c-card h3 a{color:#161616;text-decoration:none}
.c-card h3 a:hover{text-decoration:underline}
.c-units{list-style:none;margin:0;padding:0}
.c-units li{display:flex;align-items:center;gap:8px;min-height:44px;border-top:1px dashed #ccc;flex-wrap:wrap}
.c-units li:first-child{border-top:0}
.c-units a{font-weight:700}
.c-tag{display:inline-block;font-size:16px;line-height:1.3;padding:1px 8px;border-radius:999px;border:2px solid var(--m-ink);background:#fff;white-space:nowrap}
.c-tag.c-ready{background:var(--m-yellow)}
.c-tag.c-wait{border-color:#888;color:#555;background:#f2f2f2}
.c-tag.c-focus{border-color:var(--fc,var(--m-ink));border-style:dashed;background:#fff}
.c-tag.c-badge{background:#b03a2e;text-decoration:none;border-color:var(--m-ink);color:#fff;font-weight:700;box-shadow:2px 2px 0 var(--m-ink);animation:c-badge-pop 1.6s ease-in-out infinite}
.c-tag.c-badge::after{content:" →"}
@keyframes c-badge-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.c-tag.c-badge{animation:none}}
.c-unit-note{display:inline-block;margin-top:4px;color:var(--m-muted)}
.c-prep{color:#555}
.c-grades{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.c-grades .c-btn{min-width:110px;font-size:20px}
.c-list{list-style:none;margin:0;padding:0}
.c-list>li{border:3px solid var(--m-ink);border-left:12px solid var(--fc,#1f4e79);border-radius:12px;background:#fff;padding:10px 14px;margin:0 0 10px}
.c-list .c-unit-name{font-weight:700;font-size:18px}
.c-flow{list-style:none;margin:10px 0;padding:0;display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.c-flow>li{flex:1 1 180px;border:3px solid var(--m-ink);border-top:8px solid var(--fc,#1f4e79);border-radius:12px;background:#fff;padding:10px 12px;position:relative}
.c-flow .c-grade{font-weight:700;color:var(--m-muted)}
.c-arrow{font-size:16px;color:var(--m-accent-text)}
@media (max-width:619px){.c-flow{flex-direction:column}}

/* 単元トップに足す節・前後と関連する単元（単元ページにも出る） */
.c-extra{max-width:1000px;margin:24px auto 0;padding:0 16px;box-sizing:border-box;font-family:var(--m-font);color:#161616;font-size:17px;line-height:1.8}
.c-extra a{color:var(--m-link)}
.c-extra h2{font-family:var(--m-font-pop);font-weight:400;font-size:22px;line-height:1.45;margin:28px 0 10px}
.c-extra h3{font-size:19px;margin:20px 0 6px}
.c-box{border:3px solid var(--m-ink);border-radius:14px;background:#fff;padding:12px 16px;margin:12px 0;box-shadow:var(--m-shadow)}
.c-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.c-steps>li{flex:1 1 200px;border:2px solid var(--m-ink);border-radius:10px;padding:8px 12px;background:#fff}
.c-steps .c-here{background:var(--unit-tint);border-width:3px}
.c-steps .c-k{display:block;font-size:16px;color:var(--m-muted)}
.c-related{list-style:none;margin:0;padding:0}
.c-related li{margin:4px 0}
.c-about-body h2{font-size:20px}
.c-about-body h3{font-size:18px}

.c-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* トップの今日の1問 */
.c-today{border:4px solid var(--m-ink);border-top:12px solid var(--fc,#1f4e79);border-radius:16px;background:#fff;padding:12px 18px 14px;margin:18px 0 8px;box-shadow:6px 6px 0 var(--m-ink)}
.c-today h2{margin:4px 0 8px}
.c-today-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 6px}
.c-today-stars{color:var(--m-accent-text)}
.c-today-text{font-size:18px;line-height:1.9;margin:0 0 12px;min-height:3.8em}

/* 記録・復習・コース */
.c-panel-body{min-height:420px}
.c-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;padding:0;list-style:none}
.c-tabs a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:3px solid var(--m-ink);border-radius:999px;background:#fff;color:#161616;text-decoration:none;font-weight:700}
.c-tabs a[aria-selected="true"]{background:var(--fc,#1f4e79);color:#fff}
.c-panel{border:3px solid var(--m-ink);border-top:10px solid var(--fc,#1f4e79);border-radius:14px;background:#fff;padding:12px 16px;margin:0 0 16px;box-shadow:var(--m-shadow)}
.c-pct{font-family:var(--m-font-pop);font-size:40px;line-height:1.2;margin:6px 0}
.c-pct small{font-size:20px}
.c-bar{display:flex;height:22px;border:2px solid var(--m-ink);border-radius:999px;overflow:hidden;background:#f3f3f3;margin:8px 0}
.c-bar span{display:block;height:100%}
.st-solo.c-seg{background:#2e7d32}.st-hint.c-seg,.st-retry.c-seg{background:#7cb342}.st-ng.c-seg{background:#e57373}.st-seen.c-seg{background:#ffd54f}.st-none.c-seg{background:#f3f3f3}
.c-counts{list-style:none;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.c-counts b{font-size:18px}
.c-review{list-style:none;margin:0;padding:0}
.c-review li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px dashed #ccc;min-height:44px;padding:4px 0}
.c-review li:first-child{border-top:0}
.c-mark{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border:2px solid var(--m-ink);border-radius:8px;background:#fff;font-weight:700}
.c-detail{margin-top:10px}
.c-detail summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--m-link)}
.c-cells{list-style:none;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.c-cells a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:2px solid var(--m-ink);border-radius:6px;text-decoration:none;color:#161616;font-size:16px;background:#fff}
.c-cells a.st-solo{background:#c8e6c9}.c-cells a.st-hint,.c-cells a.st-retry{background:#dcedc8}.c-cells a.st-ng{background:#ffcdd2}.c-cells a.st-seen{background:#fff3c4}
.c-group{margin:10px 0 4px;font-weight:700}

/* 共通ページの単元ごとの節（指導要領・理論・PDF） */
.c-section{border-top:6px solid var(--fc,#1f4e79);margin:28px 0 0;padding-top:4px}
.c-section>h2{margin-top:10px}
.c-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0;padding:0}
.c-toc a{display:flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--m-ink);border-radius:999px;background:#fff;text-decoration:none;color:#161616;font-weight:700}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.g-head,.u-bar,.f-foot,.c-extra{display:none}}