/* アオミチ 図解の部品（図1〜9）
   調べた根拠：docs/design/diagram-research/notes/analysis.md・hig-reread.md
   決まり：図に番号と名前／上に結論の1文（大きく）／色はブランド青＋注意の橙＋灰だけ／比べる物は同じ位置・同じ大きさ／凡例を減らしラベルは物の横に */
:root { --mk: #fff0b3; --c-doc: #2a47c9; --c-talk: #0b7a6c; --c-pen: #b93c00; --t-doc: #e8edfb; --t-talk: #e3f4f1; --t-pen: #fff3e6; }

/* 図の名前と結論 */
.ill:is(.d1, .d2, .d3, .d5, .d6, .d7, .d8, .d9) .ill__lead, .tl .ill__lead { margin-bottom: 20px; font-size: 20px; line-height: 1.5; letter-spacing: .01em; text-wrap: balance; }
@media (max-width: 359px) { .ill:is(.d1, .d2, .d3, .d5, .d6, .d7, .d8, .d9) .ill__lead, .tl .ill__lead { font-size: 18px; } }
.ill:is(.d1, .d2, .d3, .d5, .d6, .d7, .d8, .d9) > *:not(.mo__lines) { position: relative; z-index: 1; }
.d-lock { width: 20px; height: 20px; flex: none; overflow: visible; }

/* 図1 大学までの道のり：3本の縦の道。段（出す人・推薦・選ぶ材料・合格）は横にそろえる */


/* 図2 「出願資格」の見本：紙の上の3行に蛍光ペン、すぐ下に読み方 */

/* 図3 選考の組み合わせ：列＝種類、行＝例。学力の列はどの行にもある */

/* 図5 合格したあと：鍵が閉まる（約束）／道が分かれる（キープ） */

/* 図6 不合格だったあと：11月〜3月の帯 */

/* 図7 最初の3ステップ：道具の画面の見本 */
.d7__s { position: relative; display: grid; gap: 20px; }
.d7__s > li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; }
.d7__s > li > *:not(.d7__n) { grid-column: 2; }
.d7__n { grid-row: span 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; position: relative; z-index: 1; }
.d7__ui { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: var(--sh1); color: var(--ink); font-size: 15px; font-weight: 700; }
.d7__ui .ic { width: 20px; height: 20px; color: var(--sub); }
.d7__ui.is-q { min-width: 180px; }
.d7__cu { width: 2px; height: 20px; background: var(--brand); }
.d7__ui.is-r i { padding: 0 8px; border-radius: 8px; background: var(--brand-50); color: var(--brand-d); font-size: 14px; font-style: normal; line-height: 1.7; }
.d7__ui.is-r i.is-due { background: var(--t-pen); color: #8a3b00; }
.d7__ui.is-s .ic { color: var(--brand); }
.d7__c > b { color: var(--ink); font-size: 16px; line-height: 1.5; }
.d7__c > span { color: var(--sub); font-size: 14px; line-height: 1.6; }

/* 図8 100マス（1マス＝1%） */

/* 図9 新旧対照 */
.d9__t { width: 100%; border-collapse: separate; border-spacing: 0 8px; table-layout: fixed; }
.d9__t thead td { width: 56px; }
.d9__t th, .d9__t td { padding: 12px 8px; font-size: 15px; line-height: 1.5; text-align: left; vertical-align: middle; }
.d9__t thead th { padding-bottom: 4px; color: var(--sub); font-size: 14px; }
.d9__t thead th.is-me { color: var(--brand-d); }
.d9__t tbody th { color: var(--sub); font-size: 14px; }
.d9__t tbody td { background: #fff; color: #5f6672; }
.d9__t tbody td:nth-child(2) { border-radius: 12px 0 0 12px; }
.d9__t tbody td.is-me { border-radius: 0 12px 12px 0; background: var(--brand-50); color: var(--ink); font-weight: 700; }
.d9__t td.is-chg span { background: linear-gradient(var(--hl), var(--hl)) 0 88% / 100% .42em no-repeat; }
.mo__lines path.is-pen { stroke: var(--c-pen); stroke-width: 2.5; }
.kp { word-break: keep-all; }

/* 図4 3つの入試の日程：図6と同じ作り（月の格子・帯・印の下にラベル） */