/* 全体のリセットと基本設定 */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    line-height: 1.8;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

/* コンテンツを中央に寄せて幅を制限 */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 大見出し（タイトル）の設定 */
h1 {
    font-size: 26px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 50px;
    text-align: left;
}

/* 各条文の見出しの設定（画像のデザインを反映） */
h2 {
    font-size: 18px;
    font-weight: bold;
    color: #64b5f6; /* テキストを水色に */
    border-left: 5px solid #64b5f6; /* 左側の水色の線 */
    padding-left: 12px; /* 線とテキストの間の余白 */
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* 本文段落の設定 */
p {
    font-size: 15px;
    margin-bottom: 25px;
}

/* レスポンシブ対応（スマートフォン向けの微調整） */
@media (max-width: 600px) {
    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 16px;
    }
    
    p {
        font-size: 14px;
    }
}

/* リンク（「個人情報保護の取り組み」等）の設定 */
.container a {
    color: #1e88e5; /* 見出しの水色にマッチする視認性の高い青 */
    text-decoration: underline; /* リンクと分かるよう下線を表示 */
    word-break: break-all;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* ホバー時の設定 */
.container a:hover {
    color: #64b5f6; /* 見出しと同じ明るい水色に変化 */
    opacity: 0.8;
    text-decoration: none;
}

/* 訪問済みリンクの設定 */
.container a:visited {
    color: #1565c0;
}

/* ===================================================
   条文・箇条書きのぶら下げインデント（追加設定）
=================================================== */

/* 1行ごとのレイアウト */
.rule-item {
    display: grid;
    grid-template-columns: auto 1fr; /* 左列：番号幅ジャスト / 右列：残りすべて */
    column-gap: 0.6em;               /* 番号と本文の隙間 */
    margin-bottom: 10px;             /* 項目同士の間隔 */
    font-size: 15px;                 /* 既存の p と同じサイズに設定 */
    line-height: 1.8;
}

/* 番号部分（改行を防ぐ） */
.rule-num {
    white-space: nowrap;
}

/* 本文部分 */
.rule-text {
    min-width: 0;
}

/* 階層別の字下げ（インデント） */
.rule-item--level1 {
    margin-left: 0;     /* 第1階層：1. や (ア) など */
}

.rule-item--level2 {
    margin-left: 1.5em; /* 第2階層：(ア) や (1) など */
}

.rule-item--level3 {
    margin-left: 3.0em; /* 第3階層：① など */
}

/* スマホ表示時の微調整 */
@media (max-width: 600px) {
    .rule-item {
        font-size: 14px; /* 既存のスマホ用 p と同じサイズに設定 */
        margin-bottom: 8px;
    }

    .rule-item--level2 {
        margin-left: 0.8em; /* 画面が狭いため余白を少し詰める */
    }

    .rule-item--level3 {
        margin-left: 1.6em;
    }
}