/* --- 1. 土台：クレイ（このしっとり感は守ります） --- */
* { margin: 0; padding: 0; box-sizing: border-box; } /* スパゲッティの元を遮断 */

body {
    background-color: #d8d2c2; 
    color: #3e3a36;
    font-family: "Hiragino Mincho ProN", serif;
    line-height: 1.4; /* さらに詰めて一覧性を確保 */
}

/* --- 2. ヘッダー：濃い葉の緑。上下を極限まで絞る --- */
header {
    background-color: #3a532d; 
    padding: 15px 20px; /* 30pxから15pxへ半減 */
    text-align: center;
    border-bottom: 2px solid #632626; 
}

header h1 {
    font-size: 1.4rem; /* 1.6から1.4へ。画面を占領させない */
    color: #f5f5f0; 
    font-weight: bold;
}

header h1 span {
    display: block;
    font-size: 0.75rem;
    margin-top: 2px; /* 10pxから2pxへ。隙間ゼロの精神 */
    color: #b8c4b1;
}

/* --- 3. メイン：垂直に、そして最短距離で --- */
main {
    max-width: 720px;
    margin: 10px auto; /* 30pxから10pxへ。ヘッダー直後に内容を */
    padding: 0 20px;
}

/* 左端 0 統一、かつ上下余白を最小化 */
h2, p, ul, ol, li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

h2 {
    color: #632626; 
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 15px;    /* 40pxから15pxへ */
    margin-bottom: 5px;  /* 15pxから5pxへ */
}

p, li {
    font-size: 0.95rem;
    margin-bottom: 3px;  /* 12pxから3pxへ。これが一覧性の鍵 */
}

/* ここにライト光を */
.light {
    color: #3a532d;    /* ヘッダーと同じ「濃い葉の緑」 */
    font-weight: bold; /* 力強い太字 */
    font-size: 1rem;   /* 大きさは周りと同じ */
}

/* --- 4. リンク：知的なボルドー --- */
a {
    color: #632626;
    text-decoration: none;
}

/* --- 5. フッター：IVから最短距離で締める --- */
footer {
    margin-top: 25px;    /* 80pxから25pxへ */
    padding: 15px 20px;  /* 30pxから15pxへ */
    text-align: center;
    border-top: 2px solid #632626;
}

.footer-links, .copyright {
    font-size: 0.8rem;
    line-height: 1.2;
}

.copyright {
    color: #7a7369;
    margin-top: 5px; /* 15pxから5pxへ */
}