@charset "UTF-8";

/*
 * hisyo3 main.css
 *
 * 他サイト（seihonet・senmon・ouyou・syogaku）とは方針が異なり、赤基調の新デザインには
 * せず、現行 hisyo3.com の見た目（灰色見出し・青リンク・破線の囲み）を再現する。
 * 実装方式のみ新方式（1ファイル・外部依存ゼロ・レスポンシブ）に従う。指示書8章の値を
 * そのまま使う。sonnpo の main.css を下敷きにしている（値が全項目一致しているため）。
 *
 * sonnpo との差分: .goku（語群選択用。hisyo3に無いため削除）・.blue（同上）を持たず、
 * 代わりに .teal（第2強調）・.blueblack（黄色背景の見出し風。index.php専用）を持つ。
 * フッターは「フッター帯」と「コピーライト帯」の2帯構成（旧CSSの #footer と .copyright が
 * 別ルールだったため。design.md参照）。
 *
 * 旧サイトのCSS6本（common / layout / design / mobile / advanced / custom）は
 * 参照しない。外部フレームワーク・Webフォント・アイコンフォント・JavaScriptを使わない。
 *
 * 注意: このファイルのコメント内にパスやワイルドカードを書かない。CSSのコメントは
 * 入れ子にできないため、コメント内にコメント終端記号が現れるとそこで構文が終わり、
 * 以降のブロック（root設定など）が無効になる不具合が他サイトで実際に発生した。
 */

:root {
    --text: #222;
    --muted: #666;
    --line: #cccccc;
    --line-strong: #999999;
    --h2-border: #000000;
    --h2-bg: #eaeaea;
    --h3-border: #414141;
    --box-border: #666666;
    --link: #3399ff;
    --link-hover: #ff6600;
    --footer-bg: #959595;
    --copyright-bg: #eaeaea;
    --btn-bg: #efefef;
    --btn-border: #aaaaaa;
    --emphasis: #ff0000;
    --emphasis2: #008080;
    --highlight-bg: #ffff00;
    --bg: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0 auto;
    padding: 16px;
    max-width: 700px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--link);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--link-hover);
}

/* ------- 見出し ------- */
/*
 * h1 はヘッダのロゴ（サイト名。.site-title でリセット）。
 * <h2> には2種類ある:
 *   - ページを識別する見出し → h2.page-title（上罫線3px・灰背景）。mondai / mondai_top /
 *     text / sitemap
 *   - 本文中の見出し → bare h2。index.php の「秘書検定３級に短期合格！」
 */
h2 {
    margin: 0 0 16px;
    font-size: 1.3rem;
    line-height: 1.4;
}

h2.page-title {
    margin: 0 0 24px;
    padding: 0.9em;
    font-size: 1.25rem;
    font-weight: 700;
    border-top: 3px solid var(--h2-border);
    background: var(--h2-bg);
}

h3 {
    margin: 28px 0 8px;
    padding: 0.8em;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    border: 2px solid var(--h3-border);
}

h3 a {
    color: inherit;
    text-decoration: none;
}

/* リード文（sitemap.php の見出し直後の概要など） */
.lead {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
}

p {
    margin: 0 0 14px;
}

ul {
    margin: 0 0 16px;
    padding-left: 1.4em;
}

li {
    margin: 4px 0;
}

/* ------- 本文中の強調（指示書8.2の4クラス） ------- */

/* 第1強調（太字＋赤。旧advanced.cssの!important上書き後の値を採用。design.md参照） */
.red {
    color: var(--emphasis);
    font-weight: 600;
}

/* 第2強調（太字＋青緑） */
.teal {
    color: var(--emphasis2);
    font-weight: 600;
}

/* index.php専用。黄色背景の見出し風（太字・黒文字・16px） */
.blueblack {
    color: #000000;
    background-color: var(--highlight-bg);
    font-weight: 600;
    font-size: 16px;
}

/* 囲みボックス（index / text。破線1px） */
.waku {
    margin: 10px 0;
    padding: 20px 10px 0 10px;
    border: 1px dashed var(--box-border);
}

.waku > :last-child {
    margin-bottom: 0;
}

/* ------- 枝（section。mondai.php） ------- */
section {
    margin: 0 0 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

section:last-of-type {
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: none;
}

section p {
    margin: 0 0 12px;
}

/* ------- 区分（控えめ・小さめ。mondai.php） ------- */
p.meta {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--muted);
}

p.meta + :not(p.meta) {
    margin-top: 16px;
}

/* ------- 解答・解説（details / summary） ------- */
details {
    margin-top: 16px;
}

summary {
    display: inline-block;
    padding: 10px 20px;
    min-height: 44px;
    line-height: 24px;
    background: var(--btn-bg);
    color: #000;
    font-weight: 700;
    border: 1px solid var(--btn-border);
    border-radius: 3px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::marker {
    content: "";
}

summary:hover,
summary:focus {
    border-color: var(--muted);
}

details[open] summary {
    margin-bottom: 12px;
}

details p {
    margin: 0 0 12px;
}

details p:last-child {
    margin-bottom: 0;
}

/* 正誤の判定（色分けしない・濃いグレーの太字。共通design.md方針） */
p.verdict {
    font-weight: 700;
    color: var(--text);
}

/* 総合解説（mondai.php。解答の details とスタイルは共通でよい。
   枝の区切り（section の border-bottom）と同じ色・太さで、上に区切り線を入れる） */
details.kaisetsu {
    margin-top: 32px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

/* ------- ナビゲーション（前へ / 次へ） ------- */
nav:not(.breadcrumb) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

nav:not(.breadcrumb) a {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 14px 16px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    text-align: center;
    text-decoration: none;
}

nav:not(.breadcrumb) a.next {
    margin-left: auto;
}

nav:not(.breadcrumb) a:hover,
nav:not(.breadcrumb) a:focus {
    border-color: var(--line-strong);
}

/* ------- パンくずリスト（header.php の直後・h2 の前） ------- */
.breadcrumb {
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb-sep {
    margin: 0 0.4em;
    color: var(--line-strong);
}

/* ------- サイトヘッダ（ロゴ = h1） ------- */
.site-header {
    margin-bottom: 20px;
}

.site-title {
    margin: 0;
    font: inherit;
    color: inherit;
}

.site-header img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ------- サイトフッタ（濃い灰の帯） ------- */
.site-footer {
    margin-top: 40px;
    padding: 16px;
    background: var(--footer-bg);
    color: #fff;
    font-size: 0.85rem;
}

.site-footer p {
    margin: 0 0 8px;
}

.site-footer p:last-child {
    margin-bottom: 0;
}

.site-footer a {
    color: #fff;
}

/* ------- コピーライト（フッターの下。薄い灰・中央寄せ） ------- */
.copyright {
    padding: 15px 0;
    background: var(--copyright-bg);
    text-align: center;
    font-size: 0.85rem;
}

.copyright p {
    margin: 0;
}

/* ------- 広告（AdSense） ------- */
.ad-block {
    margin: 28px 0;
}

.splink {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: #404040;
}