@charset "utf-8";

/*
************************************************************************
* TOPページ
* @copyright Revolme Inc.
************************************************************************
*/

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

#btn {
    position: fixed;
    right: 1%;
    top: 10%;
    z-index: 100;
}
#btn:hover {
    opacity: 0.8;
}
#wrap-mv {
    background-color: #FF9E36
}
#mv {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.grid {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -0.5em;
    justify-content: center;
}
.grid .col-02 {
    width: calc(20% - 1em);
    margin: 0 0.5em;
}
#sec-calendar {
    background-color: #fff;
    padding-bottom: 30px;

}

#sec-calendar::before{
    content: "";
    display: block;

    position: absolute;
    top: -100px;

    width: 100%;
    height: 100px;

    background-image: url(../../img/common/wave-white.svg);
    background-position: 50% 0;
    background-repeat: repeat-x;

    visibility: visible;
}
#sec-calendar::after {
    content: "";
    display: block;

    position: absolute;
    bottom: -30px;

    width: 100%;
    height: 100px;

    background-image: url(../../img/common/wave-white.svg);
    background-position: 50% 100%;
    background-repeat: repeat-x;

    visibility: visible;
}



#sec-calendar .title-lv1 {
    color: #603A1D;
    text-align: center;
}
#sec-calendar .title-lv1 .main {
    display: inline-block;
    width: auto;
}
.type-onion {
    margin-top: 3em;
}
.type-onion img {
    border-radius: 5px;
}
#sec-calendar .calendar {
}
@media screen and (max-width:640px) {
    #sec-calendar {
        padding-top: 10vw;
    }
    .grid {
        flex-wrap: wrap;
        margin: 0 -0.25em;
    }
    .grid .col-02 {
        width: calc(33.3333% - 0.5em);
        margin: 0 0.25em;
        margin-bottom: 0.5em;
    }
    #sec-calendar .title-lv1 {
        margin-top: 0;
    }#sec-calendar .title-lv2 {
        text-align: left;
    }
    #sec-calendar::before {
        top: -5vw;
        background-size: 200vw auto;
    }
    #sec-calendar::after {
        bottom: -3vw;
        background-size: 200vw auto;
    }
}


@media screen and (max-width:1320px) {
    #btn {
        display: none;
    }
}

#sec-01 {
    background-image: url(../../img/sec-01/bg.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
}
#sec-02 {
    background-color: #CEDDA7;
    background-image: url(../../img/sec-02/bg_202308.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
}
#sec-03 {
    background-color: #FAF5ED;
    background-image: url(../../img/sec-03/bg.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
}
#sec-04 {
    background-color: #CEDDA7;
    background-image: url(../../img/sec-04/bg_202308.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 200px;
}
#sec-05 {
    background-color: #FAF5ED;
    background-image: url(../../img/sec-05/bg.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

#sec-01 .bg-01 {
    background-image: url(../../img/sec-01/bg-01_202308.png);
    background-position: left 0;
    background-repeat: no-repeat;
}

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


.block-left {
    float: left;
}
.block-right {
    float: right;
}
#sec-01 .block-left {
    max-width: 320px;
    width: 39%;
}
#sec-01 .block-right {
    max-width: 635px;
    width: 61%;
}
#sec-01 .block-fukidashi {
    padding-bottom: 2em;
}

#sec-01 .fukidashi {
    padding: 4em 3em 10em 5em;
    width: 575px;
    float: right;
    background-image: url(../../img/sec-01/fukidashi.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
}
#sec-01 .fukidashi .tit {
    text-align: center;
    margin-bottom: 1em;
}
#sec-01 .fukidashi .tit img {
    width: 364px;
}

#sec-02 .ossan {
    background-image: url(../../img/sec-02/bg-01_202308.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
}
#sec-02 .fukidashi {
    padding: 3em 17em 5em 5em;
    width: 609px;
    float: left;
    background-image: url(../../img/sec-02/fukidashi_202308.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
}

#sec-03 .block-left {
    max-width: 485px;
    width: 46%;
}
#sec-03 .block-left .text {
    padding-right: 1em;
}
#sec-03 .block-right {
    max-width: 555px;
    width: 54%;
}

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


#sec-04 {

}
#sec-04 .tit {
    color: #603A1D;
    font-size: 1.375em;
    font-weight: bold;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}
#sec-04 .tit .text {
    padding-left: 1em;
}
#sec-04 .block-01 {
    background-image: url(../../img/sec-04/bg-01.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
#sec-04 .block-02 {
    width: 50%;
    float: left;
    padding-right: 2.5%;
}
#sec-04 .block-03 {
    width: 50%;
    float: right;
    padding-left: 2.5%;
}
#sec-04 .number {
    position: absolute;
    top: 0;
    left: 0;
}

#sec-04 .block-04 .left {
    max-width: 770px;
    width: 30%;
    float: left;
}
#sec-04 .block-04 .right {
    max-width: 770px;
    width: 70%;
    float: right;
}
#sec-04 .kangyo {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.2em;
}
#sec-04 .kangyo .source {
    font-size: 0.5em;
}

#sec-05 .title-lv1 img {
    max-width: 645px;
}
#sec-05 .block {
    margin-bottom: 1em;
}

#sec-05 .block .block-left {
    float: left;
    width: 50%;
}
#sec-05 .block .block-right {
    float: right;
    width: 50%;
}
#sec-05 .bg {
    background-image: url(../../img/sec-05/bg.jpg);
    background-repeat: repeat-x;
    background-position: 50%;
}

#sec-05 .block.block-01,
#sec-05 .block.block-03 {
    padding-top: 2em;
    margin-bottom: 2em;
    background-image: url(../../img/sec-05/comment-right.png);
    background-repeat: no-repeat;
    background-position: right 0em;
}
#sec-05 .block.block-02 {
    padding-top: 2em;
    margin-bottom: 2em;
    background-image: url(../../img/sec-05/comment-left.png);
    background-repeat: no-repeat;
    background-position: left 0em;
}
#sec-05 .block.block-01 .block-left {
    width: 47%;
}
#sec-05 .block.block-01 .block-right {
    width: 53%;
}
#sec-05 .block.block-02 .block-left {
    width: 53%;
}
#sec-05 .block.block-02 .block-right {
    width: 47%;
}

#sec-05 .block .block-right.comment-right {
    padding: 6em 5em 7em 3em;
    text-align: justify;
}
#sec-05 .block .block-left.comment-left {
    padding: 6em 3em 7em 5em;
    text-align: justify;
}
#sec-05 .block.block-03 .block-right.comment-right {
    padding: 8em 5em 9em 3em;
    text-align: justify;
}

#sec-05 .block-highway .text {
    padding: 1em;
}
#sec-05 .block-highway .text .name {
    font-weight: bold;
    font-size: 1.2em;
    color: #2F1908;
}
#sec-05 .block-highway a.link-text {
    color: #FF9E36;
    text-decoration: underline;
    margin-bottom: 1em;
}
#sec-05 .block-highway a.link-text:hover {
    text-decoration: none;
}



#btn-shop:hover {
    opacity: 0.8;
}

#footer {
    background-color: #9F663C;
}
#footer-logo {
    float: left;
    width: 326px;
}
.footer-link {
    width: 55%;
    float: right;
    color: #ffffff;
}
.footer-link li {
    display: inline-block;
    color: #ffffff;
    padding: 0 1em;
    margin: 0;
}
.footer-link li a {
    color: #ffffff;
}



.gmap {
    width: 100%;
    height: 440px;
}

.inputArea .inputArea-label {
    width: 20%;
    float: left;
    font-size: 1.0em;
    padding-top: 0.8em;
}
.inputArea .inputArea-controll {
    width: 80%;
    float: left;
}

input {
    padding: 0.8em;
    background-color: #fff;
}
textarea {
    background-color: #fff;
}



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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    .block-left {
        float: none;
    }
    .block-right {
        float: none;
    }
    #sec-01 {
        background-size: contain;
    }
    #sec-01 .block-left {
        max-width: 640px;
        width: 100%;
    }
    #sec-01 .block-right {
        max-width: 640px;
        width: 100%;
    }
    #sec-01 .block-fukidashi {
        padding-top: 60vw;
        background-size: contain;
        background-position: 50% 0;
    }
    #sec-02 {
        background-image: url(../../img/sec-02/bg-sp.png);
        background-repeat: repeat-x;
    }
    #sec-01 .fukidashi {
        max-width: 640px;
        width: 100%;
        float: none;
        background-image: url(../../img/sec-01/fukidashi-sp.png);
        background-size: contain;
        padding: 5em 3em 4em 3em;
    }
    .flow-item {
        width: calc(50% - 2em);
    }
    #sec-03 .block-left {
        max-width: 640px;
        width: 100%;
    }
    #sec-03 .block-left .text {
        padding-right: 0em;
        margin-bottom: 1em;
    }
    #sec-03 .block-right {
        max-width: 640px;
        width: 100%;
    }
    .why {
        justify-content: center;
    }
    .why-item {
        width: calc(50% - 2em);
        margin: 1em;
        text-align: center;
    }

    #sec-04 {
        padding-bottom: 40vw;
        background-image: url(../../img/sec-04/bg-sp_202308.png);
    }
    #sec-04 .block {
        margin-bottom: 2em;
    }
    #sec-04 .block.block-01 {
        margin-top: 1em;
        background: none;
    }
    #sec-04 .block-02 {
        width: 100%;
        float: none;
        padding-right: 0%;
    }
    #sec-04 .block-03 {
        width: 100%;
        float: none;
        padding-left: 0%;
    }
    #sec-04 .block-04 .left {
        max-width: 640px;
        width: 100%;
        float: none;
        margin-bottom: 1em;
    }
    #sec-04 .block-04 .right {
        max-width: 640px;
        width: 100%;
        float: none;
    }
    #sec-04 .tit-number {
        width: 15vw;
    }
    #sec-04 .number {
        top: -2vw;
        left: -2vw;
        width: 15vw;
    }
    #sec-05 .block.block-01, #sec-05 .block.block-02, #sec-05 .block.block-03 {
        background-position: right bottom;
        background-size: contain;
        padding-top: 0;
    }

    #sec-05 .block.block-01 .block-left,
    #sec-05 .block.block-01 .block-right,
    #sec-05 .block.block-02 .block-left,
    #sec-05 .block.block-02 .block-right,
    #sec-05 .block.block-03 .block-left,
    #sec-05 .block.block-03 .block-right {
        width: 100%;
    }
    #sec-05 .block .block-right.comment-right,
    #sec-05 .block.block-03 .block-right.comment-right {
        padding: 1em 4em;
    }
    #sec-05 .block .block-left.comment-left {
        padding: 2em 4em 3em 4em;
    }

    #footer-logo {
        max-width: 640px;
        width: 100%;
        margin: 0 auto 6.25vw auto;
        float: none;
    }
    .footer-link {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
        float: none;
    }
    .footer-link li {
        padding: 0.5em;
    }


    .inputArea .inputArea-label {
        width: 100%;
        float: none;
        font-size: 1.0em;
        padding-top: 0.8em;
    }
    .inputArea .inputArea-controll {
        width: 100%;
        float: none;
    }
}