/* =========================================
   TinyParade Privacy
   ========================================= */
:root {
    --accent: #f1c2b8;
    --accent-back: #fdfbfa;
}

/* =========================================
   TinyParade - reset / base
   ========================================= */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--black);
    background: linear-gradient(to top,
            var(--main),
            color-mix(in oklab, var(--main), white 20%));
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.75;
    font-size: 16px;
}

/* =========================================
   TinyParade - container
   ========================================= */
.page-privacy #main,
#main {
    max-width: 880px;
    margin-inline: auto;
    padding: 32px 16px;
}

.page-privacy article,
article {
    padding: 32px;
}

/* =========================================
   TinyParade - typography
   ========================================= */
h1,
h2 {
    line-height: 1.3;
    margin: 0 0 16px;
}

h1 {
    font-size: 26px;
    letter-spacing: 0.02em;
    margin: 20px auto 0;
}

h2 {
    font-size: 16px;
    margin-top: 32px;
    border-left: 6px solid var(--accent);
    padding: 7px 0 7px 12px;
    background: var(--accent-back);
    border-radius: 6px;
}

p {
    margin: 0 0 24px;
    font-size: 13px;
}

li {
    margin: 0 0 8px;
    font-size: 13px;
}

@media (min-width: 641px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 20px;
    }

    li,
    p {
        font-size: 14px;
    }
}

ul,
ol {
    margin: 0 0 24px 24px;
    padding: 0 0 0 24px;
}

section {
    margin-top: 32px;
}

article>header p {
    color: var(--black2);
    margin-top: 12px;
}

/* =========================================
   TinyParade - links & interactions
   ========================================= */
a {
    color: var(--black2);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* =========================================
   TinyParade - responsive
   ========================================= */
@media (max-width: 640px) {

    .page-privacy #main,
    #main {
        padding: 32px 16px 0 16px;
    }

    .page-privacy article,
    article {
        padding: 24px 24px 0 24px;
        border-radius: 12px;
    }
}

/* =========================================
   TinyParade - print
   ========================================= */
@media print {
    body {
        background: #fff;
    }

    .page-privacy article,
    article {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}