@charset "utf-8";

/*---------------------------------*/
.campaign {
    font-family: "Noto Serif JP", serif;
}

.campaign img {
    max-width: 100%;
}

.campaign .page-image {
    text-align: center;
}

.page-body {
    margin-top: 50px;
}

.section {
    margin-bottom: 30px;
}

.section p {
    margin-bottom: 0;
}

.attention {
    color: #ff0000;
    margin-bottom: 60px;
}

.about-campaign p {
    margin-bottom: 10px;
}

.btn-submit {
    padding: 20px;
    font-size: 1.5em;
}

.more-small {
    font-size: 0.8em;
}

.small {
    font-size: 0.6em;
}

/*---------------------------------*/
.top-block {
    padding: 20px 0;
    color: #fffddd;
    font-size: 2.0em;
}

.top-block img {
    padding: 0 30px;
}

.top-block h1 {
    background: #ed9c72;
    font-size: 1.5em;
    line-height: 1.5em;
}

.top-block h2 {
    color: #ed9c72;
    background: url("../images/campaign/design1.png") 10% 50% no-repeat;
    font-size: 1.0em;
    line-height: 80px;
}

/*---------------------------------*/
.middle-block {
    background: #fffddd;
}

.middle-header {
    background: url("../images/campaign/middle-header.png") top center no-repeat;
    background-size: 100%;
    color: #028760;
    font-size: 2.2em;
    padding: 30px 0;
}

.middle-body div {
    color: #fffddd;
    padding: 90px 0 30px 0;
    font-size: 2.0em;
    text-align: center;
}

.middle-body sup {
    font-size: 0.7em;
    margin-right: 10px;
}

.middle-body-left {
    background: url("../images/campaign/middle-item1.png") top center no-repeat;
}

.middle-body-left .through {
    text-decoration: line-through double #E22146;
}

.middle-body-right {
    background: url("../images/campaign/middle-item2.png") top center no-repeat;
}

.middle-footer {
    width: 100%;
}

/*---------------------------------*/
.bottom-block {
    background: url("../images/campaign/bottom-back.png") top center no-repeat;
    background-size: contain;
    padding: 30px;
    color: #fffddd;
}

.bottom-body {
    margin: 30px 0 0;
}

.bottom-body-left, .bottom-body-right {
    padding: 0 30px;
}

.bottom-body-left h3 {
    color: #ed9c72;
    font-size: 1.5em;
    padding: 5px;
    border: double 5px #ed9c72;
    margin-bottom: 20px;
}

.bottom-body p {
    text-align: left;
    margin-bottom: 20px;
}

/*---------------------------------*/
.bottom-tail-block {
    padding: 30px 0;
}

.bottom-tail-block h2 {
    color: #fffddd;
    font-size: 2.0em;
}

.bottom-tail-block h1 {
    color: #ed9c72;
    font-size: 2.0em;
    font-family: "Noto Serif JP", sans-serif;
    line-height: 2.5em;
}

/*---------------------------------*/
@media (max-width: 992px) {
    .about {
        padding: 0;
    }

    .page-body {
        margin-top: 30px;
        padding: 30px;
    }

    .middle-body div {
        margin-bottom: 30px;
    }

    .bottom-block {
        background: none;
    }

    .top-block, .middle-header, .middle-body div {
        font-size: 1.5em;
    }

    .bottom-block {
        padding: 20px;
    }

    .bottom-tail-block h2, .bottom-tail-block h1 {
        font-size: 1.6em;
    }

    .bottom-body-left h3 {
        font-size: 1.2em;
    }
}

/*---------------------------------*/
@media (max-width: 768px) {
    .container-fluid {
        width: 100%;
        padding: 0;
    }

    .top-block h2 {
        background: none;
        line-height: 1.5em;
    }

    .top-block, .middle-header, .middle-body div, .bottom-tail-block h2 {
        font-size: 1.2em;
    }

    .bottom-block {
        padding: 10px;
    }

    .bottom-tail-block h2, .bottom-tail-block h1  {
        font-size: 1.5em;
    }

    .middle-body-left, .middle-body-right {
        background-size: cover;
    }
}