@charset "utf-8";

body {
    color: #3d496b;
    background-color: #f3f0ee;
}

a {
    color: #3d496b;
    text-decoration: none;
}

a:link {
    color: #3d496b;
}

a:visited {
    color: #3d496b;
}

a:hover {
    color: #5D698B;
    text-decoration: underline;
}

a:active {
    color: #5D698B;
}

/* --- 1. グローバル（モバイルファーストの基本）--- */
/* 600px未満のモバイルにも適用される */
.container {
    width: 100%; /* スマホでは画面いっぱいに広げる */
    padding: 0 15px; /* 画面の端に余白を作る */
}

p {
    font-size: 16px; /* スマホでの標準フォントサイズ */
    line-height: 1.5;
}

/* --- 2. 600px以上の画面用スタイル（ご提示のコード）--- */
@media screen and (min-width: 600px) {
    /* メインコンテンツエリアの最大幅を設定し、中央に配置 */
    .container {
        max-width: 1200px; /* 大画面では幅を制限 */
        margin: 0 auto;    /* 中央寄せ */
        padding: 0;        /* ここで左右の余白は不要になるためリセット */
    }

    /* 段落のフォントサイズを大きくし、行間を広げて読みやすくする */
    p {
        font-size: 18px; /* 大画面ではフォントを大きく */
        line-height: 1.6;
    }
}

img {
    max-width: 100%;
    /* これが最も重要な設定です */
    height: auto;
    /* 縦横比を維持します */
}

h1 {
    font-size: 1rem;
}

h2 {
    font-size: 1rem;
}

/* 1. リストの見た目をリセット */
nav ol {
    list-style: none; /* リストの点（・）を非表示にする */
    padding: 0;      /* 左側のパディング（余白）を削除 */
    margin: 0;       /* マージン（余白）を削除 */
    display: flex;   /* 子要素（<li>）を横並びにする */
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
}

/* 2. 各リストアイテム（項目）の設定 */
nav ol li {
    display: inline; /* インライン要素として扱う（flex-wrapを活かすため） */
    font-size: 0.9em; /* 文字を少し小さくして見やすくする */
}

/* 3. 区切り文字（ > ）の追加 */
/* 最後の項目以外の後ろに「>」を挿入する */
nav ol li:not(:last-child)::after {
    content: " > "; /* 挿入する文字 */
    padding: 0 5px; /* 区切り文字の左右に少しスペースを開ける */
}