@charset "utf=8";

/* ==========================================
space01
========================================== */

.space01 {
    position: relative;
    padding: 15.5rem 0 12rem;
}

.space01-bg-img01 {
    max-width: 84.6rem;
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
}

.space01-bg-img02 {
    position: absolute;
    width: 42.81%;
    top: 33rem;
    left: 0;
}

.space01-frame {
    max-width: 131rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.space01-text-block {
    max-width: 86.5rem;
    width: 100%;
    margin: 0 auto;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.space01-title-box .title01 {
    letter-spacing: 0.3em;
    line-height: 2em;
}

.space01-text-box {
    margin: 4rem 0 0;
}


.space01-text-box:last-child {
    margin: 8rem 0 0;
}

.space01-text-box .text02 {
    font-weight: 700;
    letter-spacing: 0.4em;
    line-height: 2.2em;
}


.space01-img-box01 {
    max-width: 71.2rem;
    width: 54.35%;
    margin: 17.5rem 0 0;
    background: url(../../../../uploads/menu_textBox01.png) no-repeat center;
    background-size: cover;
    padding: 2.8rem;
}

.space01-img01 {
    max-width: 65.5rem;
    width: 100%;
    margin: 0 auto;
}

/* ==========================================
space02
========================================== */

.space02 {
    position: relative;   
}

.space02:before {
    content: "";
    position: absolute;
    top: -100%;
    right: 6%;
    margin: auto;
    max-width: 49.2rem;
    width: 40%;
    height: 48.3rem;
    background: url(../../../../uploads/menu_textBox01.png) no-repeat center;
    background-size: cover;
    z-index: 2;
}

.space02:after {
    content: "";
    position: absolute;
    top: -100%;
    right: 6%;
    margin: auto;
    max-width: 49.2rem;
    width: 40%;
    height: 48.3rem;
    background: rgba(255, 255, 255, .55);
    z-index: 1;
}


.space02-frame {
    max-width: 135rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

.space02-left {
    max-width: 57rem;
    width: 42.22%;
    margin: 0 0 0 3rem;
}

.space02-title-deco {
    max-width: 14.3rem;
    width: 100%;
    margin: 3rem 0 0;
}

.space02-text-box {
    margin: 5rem 0 0;
}

.space02-img01 {
    max-width: 63.5rem;
    width: 47.04%; 
}


/* ==========================================
space03
========================================== */

.space03 {
    padding: 13rem 0 0;
}

.space03-frame {
    max-width: 158rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.space03-img01 {
    max-width: 96rem;
    width: 60.76%;
}

.space03-right {
    max-width: 52rem;
    width: 32.91%;
}

.space03-text-box {
    margin: 5rem 0 0;
}

/* ==========================================
space04
========================================== */

.space04-frame {
    max-width: 151rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.space04-frame:before {
    content: "";
    position: absolute;
    top: 15rem;
    left: 0;
    margin: auto;
    max-width: 60.8rem;
    width: 40%;
    height: 38.5rem;
    background: url(../../../../uploads/menu_textBox04.png) no-repeat center;
    background-size: cover;
    z-index: 2;
}

.space04-frame:after {
    content: "";
    position: absolute;
    top: 15rem;
    left: 0;
    margin: auto;
    max-width: 60.8rem;
    width: 40%;
    height: 38.5rem;
    background: var(--primary);
    z-index: 1;
}

.space04-img01 {
    max-width: 47.5rem;
    width: 50%;
    margin: 0 0 0 auto;
}

.space04-text-box {
    max-width: 82.4rem;
    width: 100%;
    margin: 9rem auto 0;
    position: relative;
    padding: 0 0 3rem 0;
    z-index: 3;
}

.space04-text-box:after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 1.9rem;
    background: url(../../../../uploads/deco_line03.png) no-repeat center;
    background-size: contain;
    z-index: 1;
}


.space04-text {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.98em;
    text-align: center;
}

/* ==========================================
space05
========================================== */

.space05 {
    padding: 15rem 0;
}

.space05 .text02 {
    margin: 3.6rem 0 0;
}

.frame02-common-text-box .title01 {
    text-align: center;
}

/* ==========================================
space06
========================================== */

.space06 {
    padding: 0 0 15rem;
}

.space06-img01 {
    width: 100%;
    position: relative;
}

.space06-img01:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: var(--mask-primary);
    z-index: 1;
}

.space06-title-block {
    position: absolute;
    top: 17rem;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 30rem;
    width: 100%;
    height: 13.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.space06-title-box01 {
    text-align: center;
}

.space06-img02 {
    margin: 2.5rem auto 0;
}

.space06-frame {
    max-width: 114.8rem;
    width: 100%;
    margin: -20rem auto 0;
    padding: 7rem 1.5rem;
    background: var(--primary);
    position: relative;
    z-index: 15;
}

.space06-frame::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url(../../../../uploads/menu_textBox03.png) no-repeat center;
    background-size: cover;
    z-index: 18;
}

.space06-text-block {
    max-width: 82.4rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

.space06-title-box02 {
    padding: 0 0 2rem 0;
    position: relative;
    z-index: 20;
}

.space06-title-box02 .title01 {
    text-align: center;
}

.space06-title-box02 .title01 br{
    display: none;
}

.space06-title-box02:after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 1.9rem;
    background: url(../../../../uploads/deco_line03.png) no-repeat center;
    background-size: contain;
    z-index: 25;
}

.space06-text-box {
    margin: 4rem auto 0;
}

.space06-text-box .text02 {
    font-weight: 600;
    text-align: center;
}

.reserve-btn {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 61.8rem;
    width: 100%;
    margin: 4rem auto 0;
    z-index: 30;
}

.space06-img03 {
    max-width: 30.9rem;
    width: 50%;
    transition: all .3s;
}

.reserve-btn-title-box {
    max-width: 30.9rem;
    width: 50%; 
    background: var(--white);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.space06-img04 {
    position: absolute;
    top: -1rem;
    left: -1rem ;
    width: 27%;
    z-index: 40;
}

.reserve-btn-title-box-in {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0.1rem solid #E3484E;
}

.reserve-btn:hover .space06-img03 {
    filter: brightness(1.25);
}

/* .reserve-btn:hover .space04-text {
    text-decoration: underline;
} */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

    .space02:before {
        right: 1.5rem;
    }

    .space02:after {
        right: 1.5rem;
    }

    .space03-right {
        padding: 0 1.5rem;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

    .space01 {
        padding: 10rem 1.5rem;
    }

    .space02:before {
        top: -50%;
        max-width: 30rem;
        width: 40%;
        height: 30rem;
    }

    .space02:after {
        top: -50%;
        max-width: 30rem;
        width: 40%;
        height: 30rem;
    }

    .space02-img01 img {
        width: 90%;
    }

    .space03 {
        padding: 10rem 0 0;
    }

    .space03-img01 {
        width: 55%;
    }

    .space03-right {
        width: 40%;
    }

    .space04 {
        padding: 6rem 0 0;
    }

    .space04-frame:before {
        top: 30rem;
        width: 30%;
        height: 20rem;
    }

    .space04-frame:after {
        top: 30rem;
        width: 30%;
        height: 20rem;
    }

    .space05 {
        padding: 10rem 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

    .space01 {
        position: relative;
        padding: 15rem 0;
    }

    .space01-bg-img01 {
        width: 100%;
    }

    .space01-bg-img02 {
        width: 100%;
        height: 32rem;
        top: auto;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    .space01-img-box01 {
        width: 100%;
        margin: 8rem 0 0;
    }

    .space01-text-block {
        display: block;
        writing-mode: unset;
    }

    .space01-title-box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .space01-title-box .title01 {
        writing-mode: vertical-rl;
    }

    .space01-text-box {
        margin: 4rem auto 0;
        width: 100%;
    }

    .space01-text-box:last-child {
        margin: 4rem auto 0;
    }

    .space01-text-box .text02 {
        letter-spacing: 0.1em;
    }

    .space01-text-box .text02 br {
        display: none;
    }

    .space02:before, .space02:after {
        content: none;
    }

    .space02-frame {
        flex-direction: column-reverse;
    }

    .space02-left {
        width: 100%;
        margin: 3rem 0 0;
    }

    .space02-img01 {
        width: 100%;
    }

    .space02-img01 img {
        width: 100%;
    }

    .space03 {
        padding: 8rem 0 0;
    }

    .space03-frame {
        flex-direction: column;
    }

    .space03-img01 {
        max-width: 63.5rem;
        width: 100%;
        padding: 0 1.5rem;
    }

    .space03-right {
        max-width: 57rem;
        width: 100%;
        padding: 0 1.5rem;
        margin: 3rem 0 0;
    }


    .space04-frame:before {
        top: 25rem;
        width: 35%;
        height: 20rem;
    }

    .space04-frame:after {
        top: 25rem;
        width: 35%;
        height: 20rem;
    }

    .space05 {
        padding: 8rem 0;
    }

    .space06-title-box02 .title01 br{
        display: block;
    }


    .space06 {
        padding: 0 0 8rem;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

    .space01 {
        padding: 12rem 0;
    }

    .space04-text {
        font-size: 1.6rem;
    }

    .space04-img01 {
        width: 75%;
    }
    
    .space04-frame:before {
        top: 20rem;
        width: 20%;
        height: 9rem;
    }

    .space04-frame:after {
        top: 20rem;
        width: 20%;
        height: 9rem;
    }

    .reserve-btn {
        flex-direction: column;
        align-items: center;
    }

    .space06-img03, .reserve-btn-title-box {
        width: 100%;
    }

    .space06-title-box02 .title01 {
        font-size: 2.3rem;
    }

    .space06-text-box .text02 {
        text-align: left;
    }
    

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */