@import url(header.css);
@import url(footer.css);

/* top.css */
/*--------------------------------------*/

section p {
    margin-bottom: 1em;
    font-size: 16px;
}
section h2.vertical {
    position: absolute;
    top: -0.75em;
    left: 0.5em;
    line-height: 1.4;
    font-family: 'Lucida', serif;
    font-size: 84px;
    font-weight: 500;
    letter-spacing: 0.075em;
    writing-mode: vertical-rl;
}
@media only screen and (max-width: 750px) {
    section p {
        font-size: 3.0vw;
    }
    section h2.vertical {
        top: -0.65em;
        left: 0.5em;
        font-size: 12.8vw;
        writing-mode: inherit;
    }
}

/* KV */
#kv .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    transform: translateX(-30px);
}
@media only screen and (max-width: 1310px) {
    #kv .inner {
        transform: none;
    }
}
#kv figure {
    width: 93.75%;
}
#kv ul {
    width: 2.43%;
    margin-left: 1.953%;
}
#kv ul li:not(:last-child) {
    margin-bottom: 50px;
}
@media only screen and (max-width: 750px) {
    #kv .inner {
        flex-direction: column;
    }
    #kv figure {
        width: 100%;
    }
    #kv ul {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-left: inherit;
        padding: 6vw 0;
    }
    #kv ul li {
        width: 8.4vw;
    }
    #kv ul li img {
        width: 100%;
    }
    #kv ul li:not(:last-child) {
        margin-bottom: 0;
    }
    #kv ul li:nth-child(2) {
        margin: 0 10vw;
    }
}


/* reservation */
#reservation {
    padding-top: 130px;
}
#reservation .reservation-contents {
    background-color: #b7d3df;
}
#reservation .reservation-contents .circle {
    background-color: #68adcf;
}
@media only screen and (max-width: 750px) {
    #reservation {
        padding-top: 14vw;
    }
}


/* about us */
#about {
    padding-top: 130px;
    padding-bottom: 130px;
}
#about .inner {
    width: 100%;
    max-width: 1200px;
    min-height: 500px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    background-image: url(../images/top/about_bg.jpg);
}
#about .box {
    position: absolute;
    right: 5%;
    bottom: 0;
    background-color: rgba(255,255,255,0.2);
    padding: 3%;
}
@media only screen and (max-width: 860px) {
    #about h2.vertical {
        left: 0;
    }
    #about .box {
        right: 2%;
    }
}
#about .box p {
    line-height: 2.0;
    font-weight: 500;
}
#about .box p.copy {
    width: 11.25em;
    margin-bottom: 0.5em;
    text-align: right;
    line-height: 1.2;
    font-family: 'Lucida', serif;
    font-size: 40px;
    letter-spacing: 0.1em;
    color: #ffffff;
}
@media only screen and (max-width: 750px) {
    #about {
        padding-top: 18vw;
        padding-bottom: 18vw;
    }
    #about .inner {
        min-height: inherit;
        padding-top: 14vw;
    }
    #about .box {
        position: relative;
        right: inherit;
        width: 90%;
        margin-left: auto;
    }
    #about .box p.copy {
        font-size: 6.4vw;
    }
}


/* owner */
#owner {
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-image: url(../images/top/owner_bg.jpg);
    padding-top: 130px;
    padding-bottom: 70px;
    border-top-left-radius: 50% 200px;
    border-top-right-radius: 50% 200px;
}
#owner .inner {
    max-width: 1100px;
}
#owner h2 {
    margin-bottom: 0.25em;
    text-align: center;
    line-height: 1.2;
    font-family: 'Lucida', serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #ffffff;
}
#owner p.position {
    margin-bottom: 3em;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}
#owner .flex-wrap {
    align-items: center;
}
#owner .flex-wrap figure {
    width: 39%;
}
#owner .flex-wrap .text {
    width: 52%;
}
#owner .flex-wrap .text h3 {
    margin-bottom: 1.5em;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}
#owner .flex-wrap .text p {
    line-height: 2.0;
    font-weight: 500;
}
@media only screen and (max-width: 750px) {
    #owner {
        padding-top: 20vw;
        padding-bottom: 14vw;
        border-top-left-radius: 50% 20vw;
        border-top-right-radius: 50% 20vw;
    }
    #owner h2 {
        font-size: 8.4vw;
    }
    #owner p.position {
        font-size: 3.6vw;
    }
    #owner .flex-wrap figure {
        width: 74%;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
    }
    #owner .flex-wrap .text {
        width: 100%;
        margin-bottom: 8vw;
    }
    #owner .flex-wrap .text h3 {
        font-size: 4.0vw;
    }
    #owner .flex-wrap .text p {
        font-size: 3.2vw;
    }
}


/* menu */
#menu {
    background-color: #ffffff;
    padding-top: 200px;
    padding-bottom: 200px;
}
#menu .inner {
    width: 100%;
    max-width: 1200px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 91.666% 100%;
    background-image: url(../images/top/menu_bg.png);
    padding-top: 120px;
    padding-bottom: 120px;
}
#menu .menu-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-left: 130px;
}
#menu .menu-wrap article {
    width: 305px;
    height: 480px;
    margin-right: 46px;
    margin-bottom: 46px;
    border: 1px solid #5d6e80;
}
#menu .menu-wrap article:nth-child(1) {
    transform: translateX(46px);
}
#menu .menu-wrap article:nth-child(2) {
    transform: translate(46px,60px);
}
#menu .menu-wrap article:nth-child(3) {
    margin-right: 0;
    transform: translate(46px,120px);
}
#menu .menu-wrap article:nth-child(5) {
    margin-right: 0;
    transform: translateY(60px);
}
#menu .menu-wrap article h3 {
    margin-bottom: 1em;
    text-align: center;
    font-family: 'Lucida', serif;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
#menu .menu-wrap article a {
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 1240px) {
    #menu .menu-wrap {
        margin-left: 130px;
    }
    #menu .menu-wrap article {
        width: 29%;
        height: 40vw;
        margin-right: 4%;
        margin-bottom: 4%;
    }
    #menu .menu-wrap article:nth-child(1) {
        transform: translateX(10%);
    }
    #menu .menu-wrap article:nth-child(2) {
        transform: translate(10%,6%);
    }
    #menu .menu-wrap article:nth-child(3) {
        margin-right: 0;
        transform: translate(10%,12%);
    }
    #menu .menu-wrap article:nth-child(5) {
        transform: translateY(6%);
    }
    #menu .menu-wrap article h3 {
        font-size: 3.4vw;
    }
}
@media only screen and (max-width: 880px) {
    #menu .menu-wrap article {
        width: 42%;
        height: 50vw;
    }
    #menu .menu-wrap article:nth-child(1) {
        transform: translateX(20%);
    }
    #menu .menu-wrap article:nth-child(2) {
        margin-right: 0;
        transform: translate(20%,6%);
    }
    #menu .menu-wrap article:nth-child(3) {
        margin-right: 4%;
        transform: translateX(10%);
    }
    #menu .menu-wrap article:nth-child(4) {
        transform: translate(10%,6%);
    }
    #menu .menu-wrap article:nth-child(5) {
        transform: none;
    }
    #menu .menu-wrap article h3 {
        font-size: 4.2vw;
    }
}
@media only screen and (max-width: 750px) {
    #menu {
        padding-top: 16vw;
        padding-bottom: 16vw;
    }
    #menu .inner {
        width: 100%;
        background-size: 88% 100%;
        padding-top: 12vw;
        padding-bottom: 12vw;
    }
    #menu .menu-wrap {
        justify-content: space-between;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    #menu .menu-wrap article {
        width: 45%;
        height: 60vw;
    }
    #menu .menu-wrap article:nth-child(1) {
        transform: translateX(12%);
    }
    #menu .menu-wrap article:nth-child(2) {
        margin-right: 0;
        transform: translate(0,6%);
    }
    #menu .menu-wrap article:nth-child(3) {
        margin-right: 4%;
        transform: translateX(6%);
    }
    #menu .menu-wrap article:nth-child(4) {
        transform: translate(2%,6%);
    }
    #menu .menu-wrap article h3 {
        font-size: 5.4vw;
    }
}

/* menu modal */
.modal-content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 90;
}
.modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    background-color: rgba(0,0,0,0.7);
    cursor: pointer;
}
.modal-inner {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    width: 50%;
    max-width: 475px;
    background-color: #ffffff;
    margin: auto;
    padding: 3% 1%;
    border-radius: 8px;
}
.modal-inner h4 {
    margin-bottom: 0.5em;
    background-color: #b7d3df;
    padding: 0.25em;
    border-radius: 4px;
    text-align: center;
    font-family: 'Lucida', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.modal-inner ul {
    margin-bottom: 1em;
    text-align: center;
    font-size: 16px;
}
.modal-inner ul li {
    margin-bottom: 0.5em;
}
.modal-inner p {
    margin-bottom: 1.5em;
    font-size: 16px;
}
.modal-inner a {
    margin-top: 1.5em;
    margin-left: auto;
    margin-right: auto;
}
.modal-inner .btn-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background-color: #68adcf;
    border-radius: 100%;
    transition: all .3s ease;
    cursor: pointer;
}
.modal-inner .btn-close:before,
.modal-inner .btn-close:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    height: 3px;
    background-color: #ffffff;
    margin: auto;
    border-radius: 9999px;
    content: "";
}
.modal-inner .btn-close:hover {
    background-color: #b7d3df;
}
.modal-inner .btn-close:before {
    transform: rotate(45deg);
}
.modal-inner .btn-close:after {
    transform: rotate(-45deg);
}
@media only screen and (max-width: 750px) {
    .modal-inner {
        top: 34vw;
        width: 90%;
        max-width: inherit;
        padding: 6% 3%;
    }
    .modal-inner h4 {
        font-size: 6.4vw;
    }
    .modal-inner p,
    .modal-inner ul {
        font-size: 3.4vw;
    }
    .modal-inner .btn-close {
        top: -4.2vw;
        right: -4.2vw;
        width: 8.4vw;
        height: 8.4vw;
    }
}


/* story */
#story {
    overflow-x: hidden;
    background-color: #ffffff;
    padding-top: 160px;
    padding-bottom: 100px;
}
#story:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-image: url(../images/top/owner_bg.jpg);
    border-top-left-radius: 50% 200px;
    border-top-right-radius: 50% 200px;
    content: "";
}

#story h2.vertical {
    top: -1.85em;
}
#story .img-main {
    width: 64%;
    max-width: 590px;
    margin-left: 180px;
}
#story .story-contents {
    display: flex;
    justify-content: space-between;
    padding-top: 200px;
}
#story .story-contents .text {
    width: 56%;
    padding-left: 30px;
    border-left: 1px solid #333d4c;
}
#story .story-contents .text h3 {
    margin-bottom: 1em;
    font-size: 24px;
    color: #68adcf
}
#story .story-contents .text h3 span {
    margin-right: 0.5em;
    font-family: 'Lucida', serif;
    font-size: 78px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
#story .story-contents .text p {
    margin-bottom: 1.5em;
    line-height: 2.0;
}
#story .story-contents .images {
    width: 40%;
}
#story .story-contents .images .img-a {
    position: relative;
    width: 80%;
    z-index: 1;
}
#story .story-contents .images .img-b {
    width: 60%;
    margin-top: -24%;
    margin-left: auto;
    margin-bottom: 100px;
}
#story .story-contents .images a {
    margin-left: auto;
    margin-right: auto;
} 
@media only screen and (max-width: 750px) {
    #story {
        padding-top: 12vw;
        padding-bottom: 16vw;
    }
    #story:after {
        height: 75vw;
        border-top-left-radius: 50% 20vw;
        border-top-right-radius: 50% 20vw;
    }
    #story h2.vertical {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0.25em;
        font-size: 12vw;
    }
    #story .img-main {
        width: 74%;
        margin-left: 20%;
    }
    #story .story-contents {
        display: block;
        padding-top: 12vw;
    }
    #story .story-contents .text {
        width: 100%;
        margin-bottom: 6vw;
        padding-left: 5%;
    }
    #story .story-contents .text h3 {
        font-size: 4.8vw;
    }
    #story .story-contents .text h3 span {
        display: block;
        font-size: 14vw;
    }
    #story .story-contents .images {
        width: 100%;
    }
    #story .story-contents .images .img-a {
        width: 68%;
    }
    #story .story-contents .images .img-b {
        width: 56%;
        margin-top: -28vw;
        margin-bottom: 12vw;
    }
}


/* store/program */
#store-program {
    background-color: #B7D3DF;
    padding-top: 130px;
    padding-bottom: 130px;
}
#store-program .flex-wrap {
    align-items: flex-start;
}
#store-program .flex-wrap .text {
    width: 56%;
    padding-bottom: 100px;
}
#store-program .flex-wrap .images {
    width: 40%;
}
#store-program .flex-wrap .text h2 {
    margin-bottom: 0.5em;
    font-family: 'Lucida', serif;
    font-size: 78px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
#store-program .flex-wrap .text p {
    line-height: 2.0;
}
#store-program .flex-wrap .text a {
    margin-top: 3em;
    margin-left: auto;
}
#store-program .flex-wrap .images .img-a {
    position: relative;
    width: 80%;
}
#store-program .flex-wrap .images .img-b {
    position: relative;
    width: 60%;
    margin-top: -24%;
}
#store-program .store {
    margin-bottom: 130px;
}
#store-program .store .text {
    padding-left: 30px;
    border-left: 1px solid #333d4c;
}
#store-program .store .images .img-a {
    z-index: 1;
}
#store-program .store .images .img-b {
    margin-left: auto;
}
#store-program .program .text {
    order: 1;
    padding-right: 30px;
    border-right: 1px solid #333d4c;
}
#store-program .program .images .img-a {
    margin-left: auto;
}
#store-program .program .images .img-b {
    z-index: 1;
}
@media only screen and (max-width: 750px) {
    #store-program {
        padding-top: 16vw;
        padding-bottom: 16vw;
    }
    #store-program .flex-wrap .text {
        width: 100%;
        margin-bottom: 8vw;
        padding-bottom: 8vw;
    }
    #store-program .flex-wrap .images {
        width: 100%;
    }
    #store-program .flex-wrap .text h2 {
        font-size: 10vw;
    }
    #store-program .store {
        margin-bottom: 12vw;
    }
    #store-program .store .text {
        padding-left: 5%;
    }
    #store-program .program .text {
        padding-right: 5%;
    }
}


/* GoogleReview */
#review {
    background-color: #ffffff;
    padding-top: 68px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 750px) {
    #review {
        padding-top: 9.0vw;
        padding-bottom: 4.0vw;
    }
}


/* Map (only title) */
#map {
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 130px;
}
#map h2 {
    text-align: center;
    font-family: 'Lucida', serif;
    font-size: 78px;
    font-weight: 500;
    color: #68adcf;
    letter-spacing: 0.05em;
}
@media only screen and (max-width: 750px) {
    #map {
        padding-top: 4vw;
        padding-bottom: 16vw;
    }
    #map h2 {
        font-size: 12.4vw;
    }
}




@media only screen and (max-width: 750px) {
}


@media only screen and (max-width: 750px) {
}