@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : previously.css
Description :
===================================================================== */

/* =====================================================================
*    previously
* =================================================================== */
.previously {
    padding: calc(100 / 750 * 100%) 0 calc(110 / 750 * 100%);
    background-color: #ffe822;
}

.previously::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(235 / 750 * 100%);
    background: url(../images/common/line_tate_white.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

.previously .inner {
    z-index: 2;
}

.previously_box {
}

.previously_box .sec_ttl {
    margin: 0 auto calc(40 / 750 * 100%);
    letter-spacing: -0.1em;
}

.previously_lead {
    margin: 0 0 calc(60 / 750 * 100%);
}

.previously .sec_subttl {
    margin: 0 0 calc(50 / 750 * 100%);
    padding: 0;
}

.previously .sec_subttl::before, .previously .sec_subttl::after {
    background: url(../images/common/bg_subttl_red.png) no-repeat left top;
    background-size: 100% auto;
    margin: 0 calc(60 / 750 * 100%) 0 0;
}

.previously .sec_subttl::after {
    margin: 0 0 0 calc(60 / 750 * 100%);
}

.previously_txt {
    width: calc(710 / 750 * 100%);
    margin: 0 auto;
    padding: calc(75 / 750 * 100%) calc(70 / 750 * 100%);
    background-color: #fff;
    font-size: 3.5rem;
    line-height: 1.7;
    border-radius: 2em;
    -webkit-box-shadow: 0 calc(10 / 750 * 100vw) 0 #e5004f;
    box-shadow: 0 calc(10 / 750 * 100vw) 0 #e5004f;
}

.previously_txt p:not(:last-child) {
    margin: 0 0 calc(45 / 570 * 100%);
}

.previously_account {
    width: calc(710 / 750 * 100%);
    margin: calc(60 / 750 * 100%) auto 0;
    padding: calc(50 / 750 * 100%) 0;
    background-color: #fffdee;
    border-radius: 2em;
}

.previously_account h3 {
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin: 0 0 calc(25 / 710 * 100%);
}

.previously_account h3::after {
    content: "";
    display: block;
    width: calc(45 / 710 * 100%);
    padding-top: calc(5 / 710 * 100%);
    margin: calc(30 / 710 * 100%) auto 0;
    background-color: #e5004f;
}

.previously_account_list li {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.625;
    text-align: center;
    margin: 0 0 calc(10 / 710 * 100%);
}

.previously_account_list li:last-child {
    margin: 0;
}

@media screen and (min-width: 768px) {
    .previously {
        padding: calc(100 / 1100 * 100%) 0 calc(110 / 1100 * 100%);
    }

    .previously::after {
        padding-top: calc(200 / 1100 * 100%);
        background-size: calc(10 / 1100 * 100%) auto;
    }

    .previously_box {
    }

    .previously .sec_ttl {
        margin: 0 auto calc(30 / 1100 * 100%);
    }

    .previously_lead {
        width: calc(800 / 1100 * 100%);
        margin: 0 auto calc(20 / 1100 * 100%);
    }

    .previously .sec_subttl::before, .previously .sec_subttl::after {
        width: calc(40 / 1100 * 100%);
        padding-top: calc(34 / 1100 * 100%);
        margin: 0 calc(40 / 1100 * 100%) 0 0;
    }

    .previously .sec_subttl::after {
        margin: 0 0 0 calc(40 / 1100 * 100%);
    }

    .previously .sec_subttl {
        font-size: 4.5rem;
        margin: 0 0 calc(50 / 1100 * 100%);
    }

    .previously .sec_subttl span {
        font-size: 2.5rem;
    }

    .previously_txt {
        width: calc(1000 / 1100 * 100%);
        margin: 0 auto;
        padding: calc(60 / 1100 * 100%) calc(100 / 1100 * 100%);
        font-size: 2rem;
        -webkit-box-shadow: 0 calc(10 / 750 * 100vw) 0 #e5004f;
        box-shadow: 0 calc(10 / 1100 * 100vw) 0 #e5004f;
        border-radius: 3em;
    }

    .previously_txt p:not(:last-child) {
        margin: 0 0 calc(25 / 800 * 100%);
    }

    .previously_account {
        width: calc(600 / 1100 * 100%);
        margin: calc(60 / 1100 * 100%) auto 0;
        padding: calc(50 / 1100 * 100%) 0;
        border-radius: 3em;
    }

    .previously_account h3 {
        font-size: 1.8rem;
        margin: 0 0 calc(15 / 600 * 100%);
    }

    .previously_account h3::after {
        width: calc(30 / 600 * 100%);
        padding-top: calc(4 / 600 * 100%);
        margin: calc(20 / 600 * 100%) auto 0;
    }

    .previously_account_list li {
        font-size: 1.6rem;
        line-height: 1.1;
    }
}

@media screen and (min-width: 1100px) {
    .previously {
        padding: 100px 0 110px;
    }

    .previously::after {
        padding-top: 200px;
        background-size: 10px auto;
    }

    .previously_txt {
        -webkit-box-shadow: 0 10px 0 #e5004f;
        box-shadow: 0 10px 0 #e5004f;
    }
}


/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber {
    padding: calc(100 / 750 * 100%) 0 calc(70 / 750 * 100%);
    background: url(../images/common/line_tate_yellow.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
}

.backnumber .sec_subttl {
    margin: 0 0 calc(80 / 750 * 100%);
}

.back_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(630 / 750 * 100%);
    margin: 0 auto;
}

.back_list li {
    width: calc(300 / 630 * 100%);
    margin: 0 calc(30 / 630 * 100%) calc(30 / 630 * 100%) 0;
    padding: 1.24em 0 1.5em;
    background-color: #000;
    color: #39d7fc;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.back_list li:nth-child(even) {
    margin-right: 0;
}

.back_list li:last-child {
    margin-right: 0;
}

.back_list li span {
    display: inline-block;
    margin: 0 1px;
    font-size: 150%;
    font-weight: 700;
    top: 0.05em;
}

@media screen and (min-width: 768px) {
    .backnumber {
        padding: calc(100 / 1100 * 100%) 0 calc(70 / 1100 * 100%);
        background-size: calc(10 / 1100 * 100%) auto;
    }

    .backnumber .sec_subttl {
        margin: 0 0 calc(50 / 1100 * 100%);
        padding: 0 0 calc(30 / 1100 * 100%);
    }

    .backnumber .sec_subttl::before, .backnumber .sec_subttl::after {
        width: calc(30 / 1100 * 100%);
        padding-top: calc(26 / 1100 * 100%);
        margin: 0 calc(29 / 1100 * 100%) 0 0;
    }

    .backnumber .sec_subttl::after {
        margin: 0 0 0 calc(29 / 1100 * 100%);
    }

    .back_list {
        width: calc(1000 / 1100 * 100%);
    }

    .back_list li {
        width: calc(176 / 1000 * 100%);
        margin: 0 calc(30 / 1000 * 100%) calc(30 / 1000 * 100%) 0;
        padding: 0.8em 0 1.05em;
        font-size: 1.53rem;
        cursor: pointer;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .back_list li:nth-child(2n) {
        margin-right: calc(30 / 1000 * 100%);
    }

    .back_list li:nth-child(5n),
    .back_list li:last-child {
        margin-right: 0;
    }

    .back_list li:hover {
        background-color: #38d0f2;
        color: #000;
    }
}

@media screen and (min-width: 1100px) {
    .backnumber {
        padding: 100px 0 70px;
        background-size: 10px auto;
    }
}

/*19.05.14*/
span.bold {
    font-weight: bold;
}

span.red {
    color: red;
}

span.purple {
    color: purple;
}

span.orange {
    color: orange;
}

span.green {
    color: green;
}

span.yellow {
    color: #f8b500;
}

span.pink {
    color: #ff7a7a;
}

 @media screen and (min-width: 1100px) {
    .previously_txt {
        text-align: center;
    }
}