@charset "UTF-8";
/* 基本的なリセットとフォント設定 */


/* コンテンツを中央に寄せて幅を制限（A4用紙のようなイメージ） */
.container {
    max-width: 80%;
    margin: 0 auto;
    padding: 50px;
    margin-top: 50px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 影をつけて紙のような効果 */
}

@media (max-width: 768px) {
    .container {
        max-width: 90%;
    }
}

/* メインタイトル */
.main-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

/* 冒頭のテキスト */
.intro-text {
    text-indent: 1em; /* 最初の行を字下げ */
    margin-bottom: 50px;
    font-size: 15px;
}

/* 各条文セクション */
.article {
    margin-bottom: 40px;
}

/* 条文の見出し (第N条 (〇〇)) */
.article-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 20px;
    /* 画像のようにセクションタイトルの下に線を入れる */
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    letter-spacing: 0.1em; /* 少し文字間隔を空ける */
}

/* 冒頭の定義や短い段落 */
p {
    margin-bottom: 15px;
    font-size: 15px;
}

.definition {
    text-indent: 1em; /* 字下げ */
}

/* -------------------- */
/* 1. 2. 3. のリストスタイル */
/* -------------------- */
.rule-list {
    list-style: none; /* デフォルトの番号を非表示 */
    padding-left: 0;
    counter-reset: rule-counter; /* カウンターをリセット */
}

.rule-list li {
    counter-increment: rule-counter; /* 番号をインクリメント */
    margin-bottom: 15px;
    padding-left: 2em; /* 字下げのための余白 */
    text-indent: -1.5em; /* 番号を左に突き出す */
    font-size: 15px;
}

.rule-list li::before {
    content: counter(rule-counter) "."; /* カスタム番号（1. 2. 3.）を挿入 */
    font-weight: bold;
    margin-right: 0.5em;
}

/* -------------------- */
/* (1) (2) (3) のカスタムリストスタイルに修正 */
/* -------------------- */
.alpha-list {
    list-style: none; /* デフォルトの記号を非表示 */
    padding-left: 2em;
    margin-top: 10px;
    counter-reset: alpha-counter; /* カウンターをリセット */
}

.alpha-list li {
    counter-increment: alpha-counter; /* カウンターをインクリメント */
    font-size: 15px;
    margin-bottom: 5px;
    padding-left: 1.5em; /* (1) の表示スペースを確保 */
    text-indent: -1.5em; /* (1) を左に突き出す */
}

.alpha-list li::before {
    /* CSSカウンターの値を数字（decimal）に変換し、括弧で囲んで挿入 */
    content: "(" counter(alpha-counter, decimal) ")"; 
    margin-right: 0.5em;
    font-weight: normal; /* アルファベット表示の時の bold をリセット */
}

/* -------------------- */
/* ・ のカスタムリストスタイル */
/* -------------------- */
.bullet-list {
    list-style: none; /* デフォルトを非表示 */
    padding-left: 0;
}

.bullet-list li {
    font-size: 15px;
    margin-bottom: 15px;
    padding-left: 1.5em; /* 字下げのための余白 */
    text-indent: -1.5em; /* 記号を左に突き出す */
}

.bullet-list li::before {
    content: "・"; /* カスタムの大きな黒丸を挿入 */
    font-weight: bold;
    margin-right: 0.5em;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
}

/* -------------------- */
/* o テキスト のリストスタイル（第2条のサブリスト） */
/* -------------------- */
.sub-sub-list {
    /* 画像では li のコンテンツとして 'o ' が直接入力されているため、ここでは基本的なスタイルのみ */
    list-style: none;
    padding-left: 2em;
    margin-top: 10px;
}

.sub-sub-list li {
    font-size: 15px;
    margin-bottom: 5px;
}


/* セクション区切り線 */
.section-separator {
    border: none;
    border-top: 1px solid #000;
    margin: 40px 0;
}

/* 会社情報 (フッター) */
.company-info {
    text-align: right;
    margin-top: 60px;
    font-size: 14px;
}


/* テーブルのスタイル（クーリングオフのお知らせ部分）を追加 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    line-height: 1.5;
}

th {
    background-color: #f7f7f7;
    width: 30%;
}

/* -------------------------------------- */
/* ナビゲーション (l-footer__nav) */
/* -------------------------------------- */

.l-footer__list {
    display: flex; /* リスト項目を横並びにする */
    justify-content: center; /* 中央に配置 */
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .l-footer__list {
        display: flex; /* リスト項目を横並びにする */
        justify-content: center; /* 中央に配置 */
        flex-direction: column;
    }
}


.l-footer__item {
    padding: 0 10px; /* リンク間のスペース */
    /* リンク間に区切り線を入れる場合 */
    /* border-right: 1px solid #ccc; */
}
/* 最後の項目から区切り線を削除する場合 */
/* .l-footer__item:last-child {
    border-right: none;
} */

.l-footer__link {
    color: #a7a7a7 !important; /* リンクの色 */
    font-size: 12px;
    text-decoration: none; /* 下線を非表示 */
    transition: opacity 0.3s;
}

.l-footer__link:hover {
    opacity: 0.7; /* ホバー時の透明度変更 */
}

/* -------------------------------------- */
/* コピーライト */
/* -------------------------------------- */
.l-footer__copyright {
    font-weight: 700;
    font-size: 11px;
    line-height: 19.25px;
}