@charset "utf-8";

/*
************************************************************************
* レンタルメニュー用
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

.rental-menu .tit {
    font-size: 2em;
    text-align: center;
    margin-bottom: 0.5em;
}
.tit-belt .main {
    display: inline-block;
    width: auto;
    padding: 0 0.1em;
    line-height: 1.25;
}
.tit-belt .main:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0.5em;
    z-index: -1;
}
.tit-belt .belt-pink:before {
    background-image: url(../../img/rental/common/belt-pink.png);
    background-repeat: repeat;
}
.tit-belt .belt-blue:before {
    background-image: url(../../img/rental/common/belt-blue.png);
    background-repeat: repeat;
}

.block-border {
    border: 3px solid;
    border-radius: 0.5em;
}
.block-border.block-border-blue {
    border-color: #17CAFF;
}
.block-border .block-border-contents {
    padding: 0 1em 2em 1em;
}
.rental-menu .tit-en {
    text-align: center;
    margin-top: -2em;
    margin-bottom: 1em;
}
.cloud {
    background-image: url(../../img/rental/common/cloud.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.cloud.cloud-02 {
    border-radius: 0.5em;
    background-color: rgba(198,242,255,0.4);
    background-image: url(../../img/rental/common/cloud-02.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.cloud.cloud-03 {
    border-radius: 0.5em;
    background-color: rgba(198,242,255,0.4);
    background-image: url(../../img/rental/common/cloud-03.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.cloud.cloud-02 .tit-en {
    position: absolute;
    left: 0;
    right: 0;
}
.cloud.cloud-03 .tit-en {
    position: absolute;
    left: 0;
    right: 0;
}


.year-contents {
    padding-top: 3em;
}
.set-year {
    margin-top: -6em;
    padding: 0 40px 20px 40px;
}
.block-set-year {
    text-align: center;
}
.set-7year {

}
.set-5year {
    width: 50%;
    float: left;
}
.set-3year {
    width: 50%;
    float: right;
}

.otoku {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: -1em;
    margin-bottom: 1em;
}
.otoku-item {
    width: calc(50% - 2em);
    margin: 1em;
    text-align: center;
}
.otoku .tit {
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
    margin-bottom: 0.5em;
}
.icon.icon-otoku:before {
    width: 5em;
    height: 3em;
    margin-right: 0.3em;
    background-image: url(../../img/rental/common/ic-otoku.svg);
}

.otoku-img {
    border-radius: 1em;
}
.costume-block {
    padding: 0 40px 40px 40px;
    margin-top: -40px;
    text-align: center;
}
.costume-left {
    width: 60%;
    float: left;
}
.costume-right {
    width: 40%;
    float: right;
}


.bnr-rental {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: -1em;
    margin-bottom: 1em;
    margin-top: 2em;
}
.bnr-rental-item {
    width: calc(50% - 2em);
    margin: 1em;
    text-align: center;
}

.block-flow {
    padding: 0 1em 50px 1em;
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
   .block-border {
        margin-top: 2em;
    }
    .block-border.block-border-blue {
    }
    .block-border .block-border-contents {
        padding: 1em;
        font-size: 0.9em;
    }
    .rental-menu .tit-en {
        text-align: center;
        margin: -2em auto 0 auto;
        width: 80vw;
    }
    .cloud {
        background-image: url(../../img/rental/common/cloud-sp.png);
        background-position: 50%;
        background-size: cover;
    }
    .cloud.cloud-02 {
        background-image: url(../../img/rental/common/cloud-02-sp.png);
        background-size: cover;
    }
    .cloud.cloud-03 {
        background-image: url(../../img/rental/common/cloud-03-sp.png);
        background-size: cover;
    }
    .rental-menu .tit {
        margin-bottom: 0.8em;
    }
    .set-contents {
        margin: 0 -6.25vw;
    }
    .cloud.cloud-02 {
        padding-bottom: 15.625vw;
    }
    .tit-en.tit-en-rental-price {
        margin-top: -20vw;
        margin-bottom: 2em;
    }
    .set-year {
        margin-top: -1em;
        padding: 3.125vw;
    }
    .block-set-year {
        text-align: center;
    }
    .set-7year {
        margin-bottom: 3.125vw;
    }
    .set-5year {
        width: 100%;
        float: none;
    }
    .set-3year {
        margin-top: -3.125vw;
        width: 100%;
        float: none;
    }
    .otoku-item {
        width: calc(100% - 0em);
        margin: 1em;
        font-size: 0.9em;
    }
    .icon.icon-otoku:before {
        width: 4em;
        height: 3em;
        margin-right: 0.5em;
    }
    .costume-block {
        padding: 3.125vw;
        padding-bottom: 15.625vw;
        margin-top: -40px;
        text-align: center;
    }
    .costume-left {
        margin-top: 6.25vw;
        width: 100%;
        float: none;
    }
    .costume-right {
        margin-top: -12.5vw;
        width: 100%;
        float: none;
    }
    .bnr-rental {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: -1em;
        margin-bottom: 1em;
        margin-top: 1em;
    }
    .bnr-rental-item {
        width: calc(100% - 0em);
        margin: 1em;
        text-align: center;
    }

}