:root {
    /* 色 */
    --primary-bland-color: #02a2f7;
    --secondary-bland-color: #fffb26;
    --primary-background-color: #fffcf6;
    --secondary-background-color: #edf9ff;
    --primary-dashed-line-color: #919191;
    --primary-solid-line-color: #ccc;
    --white: white;
    --black: #1b1b1b;
    --grey: #949593;
    --light-grey: #ccc;
    --red: red;
    --green-of-line: #06c755;
    --green-of-line-banner: #00b900;

    /* グリッドデザイン */
    --inner-l: 1240px;
    --inner-m: 1000px;
    --inner-s: 816px;
    --col-12: 1000px;
    --col-11: 915px;
    --col-10: 830px;
    --col-9: 745px;
    --col-8: 660px;
    --col-7: 575px;
    --col-6: 490px;
    --col-5: 405px;
    --col-4: 320px;
    --col-3: 235px;
    --col-2: 150px;
    --col-1: 65px;
    --margin-horizontal: 20px;

    /* 縦横比（規格） */
    --aspect-ratio-16-9: 16/9;
    --aspect-ratio-4-3: 4/3;
    --aspect-ratio-3-2: 3/2;

    /* 縦横比（本HP独自） */
    --aspect-ratio-2d67-1: 2.67/1;
    --aspect-ratio-1d33-1: 1.33/1;
    --aspect-ratio-1-1: 1/1;

    
    --height-header-pc: 78.4px;
    --height-header-tablet: 64px;
    --height-element-in-header-tablet: 40px;
    --height-header-sp: 56px;
    --height-element-in-header-sp: 32px;
}

html {
    scroll-padding-top: 98px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    html {
        scroll-padding-top: 64px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    html {
        scroll-padding-top: 56px;
    }
}

section {
    padding: 64px 5%;
    display: grid;
    place-items: center;
}

summary {
    font-size: 1.6rem;
    cursor: pointer;
}

p {
    line-height: 1;
}