@charset "utf-8";

body {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    background-color: #eeeeee;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
    font-size: 15px;
    line-height: 1.8;
}

p {
    margin: 30px 0px;
}


img {
    vertical-align: bottom;
}


ul {
    margin: 0;
    padding: 0;
    list-style: none;
}



a {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


header {
    width: 600px;
    background-color: #cccccc;
    color: white;
    margin: 0;
    padding: 10px;
}

footer {
    width: 600px;
    background-color: #cccccc;
    color: white;
    margin: 0;
    padding: 10px;
}

h1 {
    margin-top: 40px;
    font-size: 20px;
    line-height: 1.5;
}

h2 {
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.5;
    border-bottom: 1px solid #666666;
}

h3 {
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.5;
    border-bottom: 1px solid #666666;
}



/* Responsive */
@media screen and (max-width : 560px) {
    /* 画面サイズが560px以下の場合に適用 */

    body {
        width: 100%;
        font-size: 4vw;
    }

    p {
        margin: 7vw 4vw;
    }

    header {
        width: auto;
        height: auto;
        margin: 0;
    }

    img {
        width: 100%;
    }


    h1 {
        font-size: 5vw;
        margin: 0 4vw;
    }

    h2 {
        font-size: 4.5vw;
        margin: 0 4vw;
    }

    h3 {
        font-size: 4.5vw;
        margin: 0 4vw;
    }


    .iframe-responsive {
        position: relative;
        width: 100%;
        padding: calc(315 / 560 * 100%) 0 0;
    }

    .iframe-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

}