/*------------
全体設定
------------*/
html {
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
}

* {
    box-sizing: border-box;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
}

body {
    color: #333333;
    margin: 0 auto;
}

ul {
    padding: 0;
    margin: 0;
}

p,
li,
td {
    font-size: 1rem;
    line-height: 1.7;
}

a {
    transition: 0.3s;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

section {
    position: relative;
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
    padding: 40px 0;
}

h2 {
    font-size: 28px;
}

/* text-blue */
.blue {
    color: #7dbee0
}

/* quoat */
.quoat-left {
    text-align: left;
    padding: 20px;
}

.quoat-right {
    text-align: right;
    padding: 0 20px;
}

.shadow {
    max-width: 550px;
    margin: 0 auto;
    box-shadow: 2px 1px 10px #ccc;
}

/* header */
header {
    max-width: 550px;
    padding: 20px;
    margin: 0 auto;
}

/* fv */
.fv {

    h1 {
        display: inline-block;
        writing-mode: vertical-rl;
        font-size: 34px;
        text-align: left;
        margin-bottom: 50px;
    }

    .img02 {
        margin-bottom: 15px;
    }
}

/* section01 */
.section01 {
    div {
        margin-bottom: 30px;
    }

    .bg-blue {
        margin-bottom: -30px;

        img {
            width: 120%;
        }
    }

    .img03 {
        p {
            font-size: 22px;
            font-weight: 900;

            span.small {
                font-size: 19px !important;
            }
        }
    }


    .img05 {
        background: #7dbee0;
    }


}

/* section01-5 */
.section01-5 {
    h2 {
        margin-top: -30px;
        margin-bottom: 65px;
    }
    div {
        margin-bottom: 30px;
    }

    .img01 {
        margin-bottom: -30px;

        img {
            width: 120%;
        }
    }

    .text01 {
        p {
            font-size: 15px;
            padding: 20px 30px;
            text-align: left;
            line-height: 2;
            letter-spacing: 0.04rem;
        }
    }

    @media screen and (min-width: 400px) {
        .text01 {
        p {
            padding: 20px 60px;
        }
    }
    }

}

/* section02 */
.section02 {
    h2 {
        font-size: 34px;
    }

    .img01 {
        img {
            width: 100%;
        }
    }

    .img03 {
        p {
            font-size: 18px;

            &.blue {
                font-size: 28px;
            }

            &.small {
                font-size: 16px;
            }
        }

        .dotted {
            border-bottom: 2px dotted #333;
            margin: 0 40px;
        }
    }

    .img03,
    .img04,
    .img05 {
        margin-bottom: 30px;
    }
}

/* section03 */
.section03 {
    background: #b8b8b8;
    padding: 30px 20px;

    .section-inner {
        background: #fff;
        padding: 30px 20px;
        border-radius: 20px;
    }

    h2 {
        margin-bottom: 40px;
    }

    .baloon {
        div {
            margin-bottom: 15px;
        }

        .img01,
        .img03 {
            text-align: left;
        }

        .img02,
        .img04 {
            text-align: right;
        }
    }

    .img06 {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translate(-50%);
    }
}

/* section04 */
.section04 {
    h2 {
        margin-top: -70px;
    }

    div {
        margin-bottom: 30px;
    }
}

/* section05 */
.section05 {
    background: #7dbee0;

    h2 {
        color: #fff;
    }

    div {
        margin-bottom: 30px;
    }
}

/* section06 */
.section06 {

    .flow {
        position: relative;
        left: -10px;
    }
}

.separate-img {
    max-width: 550px;
    margin: 0 auto;

    img {
        width: 100%;
    }
}

/* section07 */
.section07 {
    .bg-blue {
        margin-bottom: -70px;

        img {
            width: 120%;
        }
    }

    .flow {
        background: #7dbee0;
        padding-bottom: 40px;

        div {
            margin-bottom: 30px;
        }
    }
}

/* section08 */
.section08 {
    padding-top: 0;

    h2 {
        font-size: 34px;
        margin: 0 0 40px;
    }
}

/* footer */
footer p {
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: #333;
    padding: 20px 0;
    margin: 0;
}