@charset "UTF-8";

/*
 * aroma main.css
 *
 * 他サイト（seihonet・senmon・ouyou・syogaku）とは方針が異なり、赤基調の新デザインには
 * せず、現行 aromatherapie.jp の見た目（灰色見出し・青リンク）を再現する。実装方式のみ
 * 新方式（1ファイル・外部依存ゼロ・レスポンシブ）に従う。指示書8章の値をそのまま使う。
 *
 * 旧CSS6本（common / layout / design / mobile / advanced / custom）のうち4本
 * （common / design / mobile / advanced）は sonnpo と同一（MD5一致）のため、
 * sonnpo design.md 8章の抽出値をそのまま踏襲する。差異がある custom / layout の
 * 2本のみ、aroma の実物を読んで値を採用した。旧CSSファイル自体は参照しない。
 * 外部フレームワーク・Webフォント・アイコンフォント・JavaScriptを使わない。
 *
 * 注意: このファイルのコメント内にパスやワイルドカードを書かない。CSSのコメントは
 * 入れ子にできないため、コメント内にコメント終端記号が現れるとそこで構文が終わり、
 * 以降のブロック（:root など）が無効になる不具合が他サイトで実際に発生した。
 */

:root {
    --text: #222;
    --muted: #666;
    --line: #cccccc;
    --line-strong: #999999;
    --h2-border: #000000;
    --h2-bg: #eaeaea;
    --h3-border: #414141;
    --h4-border: #8e8e8e;
    --box-border: #666666;
    --link: #3399ff;
    --link-hover: #ff6600;
    --footer-bg: #959595;
    --btn-bg: #efefef;
    --btn-border: #aaaaaa;
    --emphasis: #ff0000;
    --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);
}

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

/* ------- 見出し ------- */
/*
 * h1 はヘッダのロゴ（サイト名。.site-title でリセット）。
 * <h2> には2種類ある:
 *   - ページを識別する見出し → h2.page-title（上罫線3px・灰背景）。mondai / mondai_top /
 *     静的 / 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);
}

/* h4（sitemap.php の章・回の見出し、静的ページ目次の見出し。h3 より階層が下） */
h4 {
    margin: 20px 0 6px;
    padding: 0.8em;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    border: 1px solid var(--h4-border);
}

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

p {
    margin: 0 0 14px;
}

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

li {
    margin: 4px 0;
}

/* ------- 本文中の強調（旧 custom.css を実測して採用。aroma固有の色が多い） ------- */

/* 旧 custom.css: .red,.fw-6{font-weight:600;} 色は common/design.css 側（sonnpoと同一）。 */
.red {
    color: var(--emphasis);
    font-weight: 600;
}

.fw-6 {
    font-weight: 600;
}

/* 旧 custom.css: .blue{color:#0000FF;font-weight:600;}（sonnpoの#0000ddとは異なる値） */
.blue {
    color: #0000ff;
    font-weight: 600;
}

/* 旧 custom.css: .blueblack{font-size:16px;color:#000000;background-color:#FFFF00;font-weight:600;} */
.blueblack {
    color: #000000;
    background-color: #ffff00;
    font-weight: 600;
}

/* 旧 custom.css: .teal{font-weight:600;color:#008080;}（アロマ精油名などの強調に多用） */
.teal {
    color: #008080;
    font-weight: 600;
}

/* 旧 custom.css: .green{font-weight:600;color:#008000;} */
.green {
    color: #008000;
    font-weight: 600;
}

/* 旧 advanced.css: .m10-t{margin-top:10px!important;}（index.phpの紹介文1行目） */
.m10-t {
    margin-top: 10px;
}

/* 囲みボックス（index / 静的ページの「使い方」「コンテンツ」欄。破線1px。指示書8.2の.waku） */
.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;
}

/* ------- 解答（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);
}

/* ------- ナビゲーション（前へ / 次へ） ------- */
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);
}

/* ------- ランダム出題（mondai.php。前へ／次への下に1本。指示書7.2） ------- */
p.random {
    margin-top: 12px;
    text-align: center;
}

/* ------- パンくずリスト（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;
}

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

.splink {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: var(--muted);
}