@charset "utf-8";

/* ------------------------------------------------------------ common */
.gradation_btn {
    text-align: center;
    margin: 100px auto;
}

/* ------------------------------------------------------------ main */
#main {
    position: relative;
    z-index: 1;
}

#main::before {
    content: '';
    position: absolute;
    background: #DAEEFE;
    height: 285px;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
}

#main::after {
    content: '';
    position: absolute;
    background: url('../images/common/fv_deco.png') repeat-x;
    background-size: 1609px;
    height: 87px;
    inset: 216px 0 auto;
    z-index: -2;
}

/* ------------------------------------------------------------ detail */
.contents {
    padding: 53px 0;
}

.contents .titlebox {
    border-bottom: solid 1px #e5e5e5;
    padding: 0 0 35px;
    margin: 0 auto 60px;
}

.contents .titlebox img {
    width: 100%;
    height: auto;
    margin: 0 auto 50px;
}

.contents .titlebox h2 {
    font-size: 34px;
    line-height: 48px;
    font-family: 'Noto-Sans-JP-Medium';
    margin: 0 auto 15px;
}

.contents .titlebox p {
    line-height: 28px;
    margin: 0 auto 30px;
}

.contents .titlebox small {
    font-size: 14px;
    color: #595959;
}

.contents>h3 {
    font-size: 20px;
    font-family: 'Noto-Sans-JP-Medium';
    line-height: 34px;
    background: #004ea2;
    padding: 20px 25px;
    color: #fff;
    margin: 0 auto 35px;
}

.contents>p {
    font-family: 'Noto-Sans-JP-Medium';
    line-height: 30px;
    margin: 0 auto 70px;
}

.contents>p span {
    font-family: 'Noto-Sans-JP-Bold';
}

.contents>img {
    margin: 0 auto 40px;
}

.contents .html_editer p,
.contents .html_editer div,
.contents .html_editer font {
    line-height: 180%;
}

.contents .html_editer a {
    text-decoration: underline;
    color: #008acf;
}

/* ------------------------------------------------------------ PC */
@media only screen and (min-width:641px) {
    /* ------------------------------------------------------------ bread */
    #bread {
        padding: 71px 42px 26px;
    }
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px) {

    /* ------------------------------------------------------------ common */
    .gradation_btn {
        width: 90%;
        margin: 50px auto 70px;
    }

    /* ------------------------------------------------------------ main */
    #main::before {
        height: 30vw;
    }

    #main::after {
        top: 11vw;
    }

    /* ------------------------------------------------------------ detail */
    .contents {
        padding: 40px 0;
    }

    .contents .titlebox {
        padding: 0 0 30px;
        margin: 0 auto 30px;
    }

    .contents .titlebox img {
        width: 100%;
        height: auto;
        margin: 0 auto 20px;
    }

    .contents .titlebox h2 {
        font-size: 20px;
        line-height: 30px;
        margin: 0 auto 10px;
    }

    .contents .titlebox p {
        line-height: 28px;
        margin: 0 auto 20px;
    }

    .contents .titlebox small {
        font-size: 12px;
    }

    .contents>h3 {
        font-size: 16px;
        line-height: 24px;
        padding: 15px 20px;
        margin: 0 auto 25px;
    }

    .contents>p {
        font-size: 14px;
        line-height: 24px;
        margin: 0 auto 40px;
    }

    .contents>img,
    .contents div img {
        max-width: 100%;
        height: auto;
        margin: 0 auto 40px;
    }

    .contents .html_editer p,
    .contents .html_editer div,
    .contents .html_editer font {
        font-size: 14px;
        line-height: 24px;
    }
}