/*legal page(プライバシーポリシー / 利用規約 共通)*/
/* 2枚で1つのファイルを共有している。別々に書くと片方だけ直して食い違うため。
   base.html には書かず、各ページの head_extra から読み込む(error.css と同じ)。 */

/* ★上だけ余白が大きいのは、ヘッダーが position: fixed でページの高さを取らないため。 */
#legal {
    background-color: var(--bg-color);

    padding: 140px 10% 100px;

    transition: background-color var(--theme-fade);
}

/* 1行が長すぎると目が次の行の頭に戻れないので、800px で止めて中央に置く。 */
#legal .container {
    max-width: 800px;
    margin: 0 auto;
}

/* --fade-delay = 上から順に出すときの待ち時間(仕掛けは base.css の font-fade)。
   ★本文は条ごとに分けず1つで出す。条の数だけずらすと最後まで何秒も待つことになる。 */
#legal h1 {
    margin: 0;

    font-size: 2.5rem;
    letter-spacing: 0.03em;

    --fade-delay: 0.1s;
}

.legal-lead {
    margin: 1.5rem 0 0;

    line-height: 1.9;

    --fade-delay: 0.3s;
}

.legal-body {
    margin-top: 3rem;

    counter-reset: legal-section;

    --fade-delay: 0.45s;
}

/* ★条番号は手で書かず counter で振る。
     手で書くと、条を足したり順番を入れ替えたときに以降を全部書き直すことになる。 */
.legal-body h2 {
    counter-increment: legal-section;

    margin: 2.5rem 0 0.8rem;

    font-size: 1.3rem;

    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--field-border);

    transition: border-color var(--theme-fade);
}

.legal-body h2::before {
    content: counter(legal-section) ". ";
}

/* 条の中に置く小見出し(番号は振らない)。 */
.legal-body h3 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.05rem;
}

.legal-body p {
    margin: 0 0 1rem;
    line-height: 1.9;
}

.legal-body ul {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.legal-body li {
    margin-bottom: 0.5rem;
    line-height: 1.9;
}

.legal-body a,
.legal-body a:visited {
    color: #2997ff;

    text-decoration: underline;

    transition: color 0.15s ease;
}

.legal-body a:hover {
    color: var(--hover-color);
}

.legal-body .external-link-icon {
    font-size: 0.7rem;
    margin-left: 3px;
}

/* 制定日。★opacity ではなく色の透明度で薄くする。
   opacity は font-fade が使っているので、指定すると打ち消し合う。 */
.legal-date {
    margin: 3rem 0 0;

    font-size: 0.85rem;
    text-align: right;

    color: color-mix(in srgb, var(--text-color) 65%, transparent);
}

/* 見た目はエラーページの .error-home とそろえてある。
   ★inline-block にすること。font-fade のずらす動きは inline の要素に効かない。 */
.legal-home,
.legal-home:visited {
    display: inline-block;

    margin: 3rem 0 0;

    color: #2997ff;

    transition: color 0.15s ease;

    --fade-delay: 0.6s;
}

.legal-home:hover {
    color: var(--hover-color);
}

/* ---------- スマホ用 ---------- */
/* ★★画面幅の調整もここに書く。legal.css は head_extra から読み込まれるので
     mediaqueries.css より後になり、あちらに書いても打ち消される。 */
@media (max-width: 768px) {
    #legal {
        padding: 110px 6% 80px;
    }

    #legal h1 {
        font-size: 1.8rem;
    }

    .legal-lead {
        font-size: 0.95rem;
    }

    .legal-body h2 {
        font-size: 1.15rem;
    }

    .legal-body p,
    .legal-body li {
        font-size: 0.95rem;
    }
}