@charset "UTF-8";

/* -- top -- */

.top .illust {
    padding-top: 10rem;
}

.top .cap {
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 50px;
}

.top .capp {
    padding-left: 10rem;
}

video {
    width: 700px;
    padding: 10px;
}

.story {
    font-size: 19px;
    background-image: url(../images/common/back_04.png);
    /* padding-bottom: 7rem; */
}

h1 span {
    font-size: 170%;
}

h1 {
    padding-top: 5rem;
    font-weight: normal;
    font-size: 38px;
    text-align: center;
    line-height: 3.7rem;
}

h2 {
    padding-top: 6rem;
    padding-bottom: 5rem;
}

.il {
    text-align: center;
}

.il img {
    text-align: center;
    margin-top: -3rem;
    padding-bottom: 10rem;
    width: 223px;
}

.textbox {
    padding: 3rem;
}

.ill img {
    position: relative;
    z-index: 50;
    width: 230px;
}

.story .ill img {
    left: 4rem;
    top: 2rem;
}

.ptt img {
    margin-top: -3rem;
    position: relative;
    z-index: 40;
    padding-bottom: 10rem;
}

.une img {
    background-image: url(../images/common/back_04.png);
    width: 100%;
}

.unee img {
    width: 100%;
    padding-bottom: 3rem;
    margin-top: -2rem;
}

.l_vi {
    padding: 80px 30px 10px 30px;
}

.l_vv {
    padding-left: 430px;
    padding-bottom: 90px;
    margin-top: -14rem;
    font-size: 18px;
}


/* -- instagram --*/

.insta {
    background-image: url(../images/common/back_06.png);
    text-align: center;
    margin-top: -9rem;
}

.insta h2 {
    padding-top: 12rem;
}

.insta .id {
    font-size: 26px;
    padding-bottom: 0.5rem;
}

.insta .btn {
    margin-top: 1rem;
}

.insta .ill img {
    padding-right: 5rem;
    margin-top: -3rem;
    width: 20%;
}

.insta .ill {
    text-align: right;
}


/* -- access -- */

.access {
    background-image: url(../images/common/back_07.png);
    text-align: center;
    margin-top: -9rem;
}

.access h2 {
    padding-top: 12rem;
}

.access .btn {
    margin-top: 3rem;
}

.access .ill {
    text-align: left;
}

.access .ill img {
    padding-right: 5rem;
    /* margin-top: -3rem; */
    width: 26%;
}


/* -- reserve -- */

.reserve {
    background-image: url(../images/common/back_04.png);
    text-align: center;
    margin-top: -9rem;
    padding-bottom: 10rem;
}

.reserve h2 {
    padding-top: 12rem;
}

.reserve li a {
    color: #ffff;
    background-color: #705C73;
    padding: 1.3rem;
    border-radius: 1rem;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 -4px 5px -2px #a4a6a8 inset;
    transition: .3s;
}

.reserve li a:hover {
    box-shadow: -5px -5px 10px #fff9fe inset;
    opacity: 70%;
}

.reserve ul {
    margin: 2rem 6rem 9rem 6rem;
}


/* .btn a {
     color: #ffff;
     background-color: #705C73;
     padding: 1.3rem;
     border-radius: 1rem;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 -4px 5px -2px #a4a6a8 inset;
     transition: .3s;
     text-align: center;
     padding: 3rem;
     font-size: 28px;
     margin-top: -6rem;
     position: relative;
 } */

.btn {
    background-image: url(../images/top/btn_01.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
    text-align: center;
    padding: 3rem;
    font-size: 20px;
    position: relative;
}

.btn a {
    color: #705C73;
}

.btn a:hover {
    opacity: 50%;
}

.yado {
    font-size: 25px;
    padding-top: 7rem;
    text-align: center;
}

.reserve .ill img {
    left: 20rem;
    top: -5rem;
}

.kanren {
    background-image: url(../images/common/fotter012.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: -10rem;
    padding-bottom: 3rem;
}


/* ===================================
responsive
=================================== */

@media screen and (max-width: 640px) {
    h1 {
        margin: 0;
        padding: 0;
        font-size: 25px;
        text-align: center;
        padding-bottom: 33px;
        line-height: 2.5rem;
    }
    video {
        width: 100%;
        padding: 0;
        padding-top: 20px;
    }
    .l_vi {
        padding: 30px 10px 10px 10px;
    }
    .l_vv {
        padding-left: 0px;
        padding-bottom: 0px;
        margin-top: 1rem;
        font-size: 12px;
    }
    .top .illust {
        text-align: center;
        padding-top: 0;
    }
    .top .cap {
        text-align: center;
        font-size: 12px;
        padding-top: 0px;
        padding-bottom: 50px;
    }
    .top .illustt {
        text-align: center;
    }
    .top .capp {
        padding-left: 0rem;
    }
    .il img {
        padding: 0;
    }
    .ill img {
        padding: 0;
    }
    .ptt img {
        padding-bottom: 0;
    }
    .btn {
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        padding: 3rem;
        font-size: 28px;
        margin-top: 0;
    }
    .story h2 {
        padding-top: 5rem;
    }
    .unee img {
        padding-bottom: 3rem;
        margin-top: -0.6rem;
    }
    .story {
        margin-top: -2rem;
    }
    .insta {
        margin-top: -5rem;
    }
    .access {
        margin-top: -5rem;
    }
    .reserve {
        margin-top: -5rem;
    }
    .insta h2 {
        padding-top: 5rem;
    }
    .insta .btn {
        margin-top: 0rem;
    }
    /* h2 {
            padding-top: 2rem;
            padding-bottom: 2rem;
            width: 98%;
        } */
    .insta .ill img {
        padding-right: 1rem;
        margin-top: 1rem;
        width: 30%;
        position: relative;
        z-index: 2;
    }
    .insta .id {
        font-size: 23px;
        padding-bottom: 0.5rem;
    }
    .story .ill img {
        padding-right: 0rem;
        margin-top: 0rem;
        width: 40%;
        position: relative;
        z-index: 2;
        left: 14rem;
    }
    .insta .ill {
        text-align: right;
    }
    .access h2 {
        padding-top: 4rem;
    }
    .access br {
        display: block;
    }
    .access .ill img {
        padding-right: 1rem;
        padding-top: 2rem;
        /* margin-top: -3rem; */
        width: 40%;
    }
    .access .sp {
        font-size: 14px;
    }
    .reserve h2 {
        padding-top: 4rem;
    }
    .reserve ul {
        margin: 1rem;
    }
    .reserve li {
        margin-top: 1rem;
        width: 100%;
    }
    .reserve li a {
        box-sizing: content-box;
    }
    .aaas {
        font-size: 14px;
    }
    .reserve li a {
        color: #ffff;
        background-color: none;
        padding: 0;
        border-radius: none;
        box-shadow: none;
        transition: none;
    }
    .reserve li a:hover {
        box-shadow: none;
        opacity: 70%;
    }
    .reserve li {
        color: #ffff;
        background-color: #705C73;
        border-radius: 1rem;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 -4px 5px -2px #a4a6a8 inset;
        transition: .3s;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .reserve li:hover {
        opacity: 70%;
    }
    .reserve .ill img {
        padding-right: 1rem;
        margin-top: 1rem;
        width: 40%;
        position: relative;
        z-index: 2;
        left: 6rem;
        top: 0rem;
    }
    .yado {
        padding-top: 3rem;
    }
    h2 img {
        width: 70%;
    }
    .textbox {
        padding: 1rem;
    }
    .ptt img {
        width: 100%;
    }
    .pt img {
        width: 100%;
    }
    .textbox br {
        display: block;
    }
    .back img {
        margin-top: -1rem;
    }
    .access .story {
        text-align: left;
    }
    .access .btn {
        margin-top: 0;
    }
    .story {
        font-size: 16px;
    }
    .ill img {
        z-index: 60;
    }
    .btn {
        background-size: 80%;
    }
    .btn a {
        font-size: 20px;
    }
    .reserve .sp {
        width: 350px;
        height: auto;
        overflow: hidden;
    }
    .kanren {
        background-image: url(../images/common/fotter013.png);
        background-size: 100%;
        background-repeat: x;
        margin-top: -10rem;
        padding-bottom: 3rem;
    }
    .yado {
        font-size: 23px;
        text-align: center;
    }
    h2 {
        padding-bottom: 1rem;
    }
}