@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main {
        margin: 0 auto;
        padding: calc( 80px + 8.0vw ) 0 12.0vw;
        width: 100%;
    }

    #notes {
        margin: 0 auto;
        padding: 8.0vw 0 0;
        width: 100%;
    }
    #notes .notes-box {
        position: relative;
        margin: 0 auto 12.0vw;
        padding: 8.0vw 5.0vw;
        width: 90%;
        background: #fff;
        border: 1.0vw solid #c47900;
        container-type: inline-size;
    }
    #notes .notes-box h1 {
        margin: 0;
        padding: 0;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: left;
    }
    #notes .notes-box h2 {
        margin: 2.0em 0 0;
        padding: 0;
        font-size: 4.8vw;
        font-weight: 500;
        text-align: left;
    }
    #notes .notes-box p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main {
        margin: 0 auto;
        padding: 180px 0 80px;
        width: 100%;
    }

    #notes {
        margin: 0 auto;
        padding: 80px 0 0;
        width: 100%;
    }
    #notes .notes-box {
        position: relative;
        margin: 0 auto 120px;
        padding: 120px min( 10vw, 150px );
        width: 90%;
        max-width: 1200px;
        background: #fff;
        border: 4px solid #c47900;
        container-type: inline-size;
    }
    #notes .notes-box h1 {
        margin: 0;
        padding: 0;
        font-size: 32px;
        font-weight: 700;
        text-align: left;
    }
    #notes .notes-box h2 {
        margin: 2.0em 0 0;
        padding: 0;
        font-size: 24px;
        font-weight: 500;
        text-align: left;
    }
    #notes .notes-box p {
        margin: 1.0em 0 0;
        padding: 0;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
    }

}