/* 理科ラボ 高校の教材（2026-10-21 試作）。中学校の教材（lesson-v2.css・quiz.css）の上に重ねる */
body[data-highschool] .eyebrow { color: #2563a6; }
body[data-highschool="chemistry-basic"] .eyebrow { color: #c0453a; }
body[data-highschool="chemistry-basic"] .hs-formula { border-left-color: #c0453a; }
body[data-highschool="biology-basic"] .eyebrow { color: #2e9a55; }
body[data-highschool="biology-basic"] .hs-formula { border-left-color: #2e9a55; }

/* 公式カード */
.hs-formula { border-left: 6px solid #2563a6; }
.hs-formula h2 { margin-top: 0; }
.hs-formula table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: .98rem; }
.hs-formula th, .hs-formula td { padding: 8px 10px; border-bottom: 1px solid #d8e3e7; text-align: left; vertical-align: top; }
.hs-formula tr:first-child th { background: #eef5f8; color: #2a4a60; font-size: .86rem; }
.hs-formula tbody th, .hs-formula tr th:first-child { white-space: nowrap; color: #173b52; }
.hs-eq { font-family: "Times New Roman", "Yu Mincho", serif; font-size: 1.15rem; white-space: nowrap; color: #12364b; }
.hs-eq i { font-style: italic; }
.hs-eq sup, .hs-eq sub { font-size: .7em; }
@media (max-width: 520px) { .hs-formula th, .hs-formula td { padding: 6px 6px; } .hs-formula tr th:first-child { white-space: normal; } .hs-eq { white-space: normal; } }

.hs-say { display: block; color: #12364b; margin-bottom: 2px; }
.hs-formula td { font-size: .95rem; color: #496373; }

/* ことばの準備 */
.hs-prep { border-left: 6px solid #2e9a55; }
.hs-prep h2 { margin-top: 0; }
.hs-prep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.hs-prep-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; background: #f3fbf5; border-radius: 10px; line-height: 1.6; }
.hs-prep-list b { color: #1f7a42; white-space: nowrap; }
.hs-prep-list span { font-size: .95rem; color: #315461; }

/* ===== 高校のホーム（2026-10-23 作り直し：図の画像つきの一覧） ===== */
body[data-highschool-home] .page-shell { max-width: 1120px; }
body[data-highschool-home] .card-kicker { margin: 0 0 8px; color: #2563a6; font-size: .8rem; font-weight: 900; letter-spacing: .12em; }
.hs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr); gap: 32px; align-items: center; max-width: none; padding: 14px 0 30px; }
.hs-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.2; letter-spacing: -.02em; margin: 6px 0 14px; }
.hs-hero h1 > .hs-nw:last-child > span { color: #2563a6; }
.hs-nw { display: inline-block; }
.hs-hero p { font-size: 1.05rem; line-height: 1.85; color: #315461; }
.hs-stats { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; }
.hs-stats div { flex: 1; max-width: 130px; padding: 10px 12px; border: 1px solid #d3e3e8; border-radius: 12px; background: #fff; }
.hs-stats dt { font-size: .78rem; font-weight: 800; color: #71848d; }
.hs-stats dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 900; color: #12364b; font-variant-numeric: tabular-nums; }
.hs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 22px; border: 2px solid #12364b; border-radius: 999px; background: #fff; color: #12364b; font-weight: 900; text-decoration: none; }
.hs-btn-primary { background: #12364b; }
body[data-highschool-home] .hs-btn-primary { color: #fff; }
.hs-btn:hover { filter: brightness(1.15); }
/* ヒーローの絵（ChatGPT で作成・2026-10-23） */
.hs-hero-fig { width: 100%; height: auto; max-width: 640px; justify-self: end; border-radius: 20px; box-shadow: 0 14px 34px rgba(18, 54, 75, .16); }
/* 科目でえらぶ */
.hs-subjects { margin: 6px 0 22px; }
.hs-subject-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hs-subject-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 120px; padding: 16px 18px; border-radius: 16px; background: var(--c); text-decoration: none; overflow: hidden; box-shadow: 0 10px 24px rgba(18, 54, 75, .14); transition: transform .15s; }
.hs-subject-tile::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.hs-subject-tile:hover { transform: translateY(-3px); }
body[data-highschool-home] .hs-subject-tile, body[data-highschool-home] .hs-subject-tile * { color: #fff; }
.hs-subject-tile b { font-size: 1.45rem; }
.hs-tile-count { font-size: 1rem; font-weight: 800; }
.hs-tile-fields { font-size: .84rem; opacity: .92; line-height: 1.6; }
/* 1単元の流れ */
.hs-how { margin: 0 0 26px; padding: 20px 22px; background: #fff; border: 1px solid #d3e3e8; border-radius: 16px; }
.hs-how h2 { margin: 0 0 14px; font-size: 1.35rem; }
.hs-how-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hs-how-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 14px 0 0; }
.hs-how-steps li:not(:last-child)::after { content: ""; position: absolute; left: 40px; right: 6px; top: 17px; border-top: 2px dashed #b9d0d8; }
.hs-how-no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #12364b; color: #fff; font-weight: 900; }
.hs-how-steps li:nth-child(3) .hs-how-no { background: #2563a6; }
.hs-how-steps li:nth-child(4) .hs-how-no { background: #c0453a; }
.hs-how-steps li:nth-child(5) .hs-how-no { background: #2e9a55; }
.hs-how-steps b { margin-top: 6px; font-size: 1rem; color: #12364b; }
.hs-how-steps span:not(.hs-how-no) { font-size: .88rem; line-height: 1.6; color: #496373; }
/* 科目ごとの単元カード */
.hs-subject { margin: 0 0 34px; scroll-margin-top: 16px; }
.hs-subject-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--c); }
.hs-subject h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 1.3rem; }
.hs-subject-badge { display: inline-block; padding: 5px 16px; border-radius: 999px; background: var(--c); color: #fff; font-size: 1.1rem; }
.hs-subject-blurb { font-size: .9rem; font-weight: 600; color: #496373; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chips button { min-height: 38px; padding: 4px 14px; border: 2px solid var(--c); border-radius: 999px; background: #fff; color: var(--c); font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; }
.hs-chips button.is-on { background: var(--c); }
body[data-highschool-home] .hs-chips button.is-on { color: #fff; }
.hs-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hs-unit { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; border: 1px solid #c7dddf; border-top: 5px solid var(--c); border-radius: 12px; background: #fff; color: #173b52; text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.hs-unit[hidden] { display: none; }
.hs-unit:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(29, 63, 78, .14); }
.hs-unit-thumb { display: block; width: calc(100% + 32px); height: auto; margin: 0 -16px 6px; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid #e3eef0; background: #f7fbfc; }
.hs-unit-field { color: var(--c); font-size: .78rem; font-weight: 900; letter-spacing: .06em; }
.hs-unit strong { font-size: 1.08rem; color: #12364b; }
.hs-unit-q { font-size: .92rem; color: #496373; line-height: 1.6; }
.hs-unit-meta { margin-top: auto; padding-top: 4px; font-size: .8rem; color: #71848d; }
/* 最初は科目ごとに PC 6枚（3列×2行）・スマホ 4枚だけ見せる（残りは「すべて見る」） */
@media (min-width: 861px) { body[data-highschool-home] .hs-unit-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.hs-subject.is-preview .hs-unit:nth-child(n+7) { display: none; }
@media (max-width: 620px) { .hs-subject.is-preview .hs-unit:nth-child(n+5) { display: none; } }
.hs-more { margin: 16px 0 0; text-align: center; }
.hs-more[hidden] { display: none; }
.hs-more-button { min-height: 48px; padding: 10px 26px; border: 2px solid var(--c); border-radius: 999px; background: #fff; color: var(--c); font: inherit; font-weight: 900; cursor: pointer; }
.hs-more-button:hover { background: var(--c); color: #fff; }
.hs-about h2 { margin-top: 0; }
@media (max-width: 860px) {
  .hs-hero { grid-template-columns: 1fr; }
  .hs-hero-fig { max-width: 100%; justify-self: center; }
  .hs-how-steps { grid-template-columns: 1fr; gap: 12px; }
  .hs-how-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 0; }
  .hs-how-steps li::after { display: none; }
  .hs-how-no { grid-row: 1 / 3; }
  .hs-how-steps b { margin-top: 0; }
}
@media (max-width: 620px) {
  .hs-subject-tiles { grid-template-columns: 1fr; }
  .hs-subject-tile { min-height: 0; }
  .hs-stats dd { font-size: 1.3rem; }
}