/* 基本設定のリセットとレスポンシブなフォントサイズ */
/* ブラウザによるデフォルトのスタイルをリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* bodyの基本スタイル */
body {
    /* フォントサイズをビューポート幅に合わせて調整（例: 100vwの1.5%） */
    font-size: 1.5vw;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f9;
    color: #333;
    /* 全体の配置を中央揃えにするためのFlexbox設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2vw; /* 全体のパディングも相対的に指定 */
    min-height: 100vh; /* 画面全体の高さを確保 */
}

/*  コンテンツの幅を制限するコンテナ */
/* 内容が広がりすぎないように最大幅を設定（例: 600px） */
h1, ol {
    width: 100%;
    max-width: 600px; 
    padding: 1vw 2vw; /* 左右に相対的なパディング */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2vw;
}

/* 見出しのスタイル */
h1 {
    /* フォントサイズをbodyより少し大きく（例: 2.5vw） */
    font-size: 2.5vw; 
    text-align: center;
    color: #1a237e;
    padding: 2vw;
    margin-bottom: 3vw;
}

/* リストアイテムのスタイル */
ol {
    list-style-position: inside;
    counter-reset: item; /* カウンターのリセット */
    padding-left: 0; /* ol自体のデフォルトのpaddingをリセット */
}

ol li {
    /* リスト内のフォントサイズも相対的に調整 */
    font-size: 1.8vw;
    padding: 1.5vw 0;
    border-bottom: 1px solid #eee;
    margin-left: 4vw; /* 番号が見えるように左マージンを設定 */
}

ol li:last-child {
    border-bottom: none;
}

/*  リンクのスタイル */
a {
    /* リンクのフォントサイズも相対的に調整 */
    font-size: 2vw; 
    color: #007bff;
    text-decoration: none;
    display: inline-block; /* リンクをブロック要素のように扱い、上下の余白も確保 */
    margin-top: 0.5vw;
}

a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* スマートフォンなど */
@media (max-width: 768px) {
    /* 画面幅が768px以下の場合、フォントサイズが小さくなりすぎないように調整 */
    body {
        font-size: 4.5vw; /* モバイルビューでは大きめの相対サイズ */
    }

    h1 {
        font-size: 6vw;
        margin-bottom: 6vw;
    }

    ol li {
        font-size: 4vw;
        margin-left: 6vw;
    }
    
    a {
        font-size: 4.5vw;
    }
}