@charset "utf-8";

/*
Theme Name: SAUNATIGER
Author: OFFICE NAKANO INDIVIDUAL LLC
Version: 1.0.1
*/

html, body, main, div, section, article,
header, footer, nav, h1, h2, h3, h4, h5, h6,
ul, li, ol, table, tbody, tr, th, td,
a, button, p, span, b, strong, small, blockquote,
canvas, figure, picture, img, audio, video,
form, label, input, select, textarea {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
vertical-align: baseline;
user-select: none;
}

html {
line-height: 1;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
font-family: "fot-tsukuaoldmin-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-weight: 300;
font-style: normal;
}


/* loading */

.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #F5F4F0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
animation: loading 5s ease-in-out 1.6s forwards;
}
@keyframes loading {
0% {
opacity: 1;
}
94% {
z-index: 100;
}
96% {
z-index: 0;
}
100% {
z-index: -1;
}
}
.loading .content {
margin: auto;
width: 18rem;
height: fit-content;
animation: blur 4.4s ease-in-out 1.6s forwards;
}
@keyframes blur {
94% {
filter: blur(0);
}
100% {
filter: blur(4px);
}
}
.loading .content .images {
width: 100%;
height: 18rem;
overflow: hidden;
}
.loading .content .images img {
width: 100%;
height: 18rem;
}
.loading .content .images .upper {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: nowrap;
flex-direction: row-reverse;
opacity: 0;
filter: blur(4px);
animation: upper 4.4s ease-in-out 1.6s forwards;
}
@keyframes upper {
0% {
transform: translateX(0%);
filter: blur(4px);
}
6% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
22% {
transform: translateX(0%);
}
26% {
transform: translateX(100%);
}
46% {
transform: translateX(100%);
}
50% {
transform: translateX(200%);
}
70% {
transform: translateX(200%);
}
74% {
transform: translateX(300%);
}
84% {
opacity: 1;
}
100% {
transform: translateX(300%);
filter: blur(0);
}
}
.loading .content .images .lower {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: nowrap;
opacity: 0;
filter: blur(4px);
animation: lower 4.4s ease-in-out 1.6s forwards;
}
@keyframes lower {
0% {
transform: translateX(0%);
filter: blur(4px);
}
6% {
transform: translateX(0%);
opacity: 1;
filter: blur(0);
}
22% {
transform: translateX(0%);
}
26% {
transform: translateX(-100%);
}
46% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
74% {
transform: translateX(-300%);
}
84% {
opacity: 1;
}
100% {
transform: translateX(-300%);
filter: blur(0);
}
}
.loading .content .percentage {
margin: 6rem auto 0;
margin: 0 auto;
width: fit-content;
opacity: 0;
will-change: filter;
animation: percentage 4.4s ease-in-out 1.6s forwards;
}
@keyframes percentage {
0% {
opacity: 1;
}
84% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loading .content .percentage span {
display: inline-block;
font-size: 1.6rem;
line-height: 1;
}

/* header */
header.header {
width: 100%;
display: block;
position: relative;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}

.head-inner {
width: 100%;
padding: 24px 4%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.head-inner .logo {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
position: relative;
}

.header .logo h1 {
width: 120px;
display: block;
position: relative;
}
.header .logo span {
width: 120px;
display: block;
position: relative;
}

/* nav */
span.menu {
width: 50px;
height: 50px;
position: fixed;
display: none;
top: 2%;
right: 4%;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.menu .menu-line {
width: 100%;
height: 100%;
position: relative;
display: none;
cursor: pointer;
transition:transform .3s;
}
.menu__line--top {
position: absolute;
top: 33%;
left: 0%;
right: 0%;
margin: auto;
width: 50px;
height: 2px;
background-color: #fff;
display: block;
transition:transform .3s;
}
.menu__line--bottom {
position: absolute;
bottom: 33%;
left: 0%;
right: 0%;
margin: auto;
width: 50px;
height: 2px;
background-color: #fff;
display: block;
transition:transform .3s;
}
.menu-line.active .menu__line--top {
top: 0%;
bottom: 0%;
margin: auto;
transform: rotate(30deg);
}

.menu-line.active .menu__line--bottom {
top: 0%;
bottom: 0%;
margin: auto;
transform: rotate(-30deg);
}

.sp-nav {
display: none;
}

/* scroll */
.scroll-infinity {
width: 100%;
display: flex;
position: absolute;
top: 0;
height: 96px;
align-items: center;
}

@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0
}
.scroll-infinity__list--left {
animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.scroll-infinity__item {
width: calc(100vw / 3);
padding: 0 1.4%;
font-size: 3rem;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.scroll-infinity__item>img {
width: 100%;
}

/* fade */
.fade {
opacity: 0;
transform: translateY(48px);
transition: opacity 3s, transform 1s;
}.fade.active {
opacity: 1;
transform: translateY(0px);
}

/* mv */

.mv {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 0;
position: relative;
overflow: hidden;
}
.mv:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: url(/assets/img/pattern-05.png);
background-size:initial;
background-repeat: repeat;
position: absolute;
top: 0;
left: 0;
opacity: 1;
z-index: 2;
}


/* slide */
.wapper_img {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.slider {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.slider__text {
position: absolute;
bottom: calc(2rem + 3vw);
left: calc(2rem + 3vw);
z-index: 10;
font-size: calc(1rem + 4vw);
text-transform: uppercase;
transform-origin: top;
line-height: 1.075;
color: #fff;
font-weight: 500;
}
.slider__text-line {
overflow: hidden;
}
.slider__inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.slider__nav {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 10;
}
.slider-bullet {
display: flex;
align-items: center;
padding: 1rem 0;
}
.slider-bullet__text {
color: #fff;
font-size: 0.65rem;
margin-right: 1rem;
}
.slider-bullet__line {
background-color: #fff;
height: 1px;
width: 1rem;
}
.slider canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%!important;
height: 100%!important;
display: block;
overflow: hidden;
}
.slider canvas img {
width: 100%;
height: auto;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.slide {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: 100%;
display: block;
}
.slide img {
width: 100%;
height: auto;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.slide__content {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/*.slide__img {
position: relative;
padding: 0;
margin: 0;
transform-origin: top;
background-size: cover;
overflow: hidden;
}
.slide__img:first-child {
top: -1.5rem;
}
.slide__img:last-child {
bottom: -1.5rem;
}
.slide__img img {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
transform:  translate(-50%,-50%);
width: 100%;
height: auto;
object-fit: cover;
}*/
.wrapper_img .slider {
width: 100%;
height: 100vh;
display: block;
position: relative;
}
.slider__nav.js-slider__nav,
.scroll {
display: none;
}



.mv > video.pc {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
z-index: 1;
display: block;
}
.mv > video.sp {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: 100%;
z-index: 1;
display: none;
}
.mv-title {
max-width: 260px;
width: 100%;
display: block;
z-index: 3;
position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
margin: auto;
padding-top: 100px;
}
.side-title-left {
width: 90px;
height: 100vh;
padding: 0 0 0 4%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
z-index: 4;
}
.side-title-left p {
width: 16%;
font-size: .76rem;
letter-spacing: .5em;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
}
.side-title-right {
width: 90px;
height: 100vh;
padding: 0 4% 0 0;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
z-index: 4;
}
.side-title-right p {
width: 16%;
font-size: .76rem;
letter-spacing: .5em;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
}

.scroll-circle {
width: 64px;
height: 64px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
position: absolute;
bottom: 4%;
right: 4%;
z-index: 4;
}
.scroll-circle p {
font-size: .76rem;
text-align: center;
font-weight: 100;
}
span.scroll {
position: absolute;
left: 0;
top: 0%;
bottom: -62px;
margin: auto;
display: inline-block;
overflow: hidden;
z-index: 3;
height: 24px;
width: 1px;
background-color: #fff;
right: 0;
}
span.scroll:after {
content: "";
position: relative;
left: 0;
right: 0;
bottom: 6%;
width: 2px;
height: 100%;
display: inline-block;
background-color: #000;
z-index: -1;
animation: marquee 1.5s ease infinite;
animation-delay: 0s;
}

@keyframes marquee {
0% {
transform: translate3d(0, -101%, 0);
-webkit-transform: translate3d(0, -101%, 0);
}
100% {
transform: translate3d(0, 103%, 0);
-webkit-transform: translate3d(0, 103%, 0);
}
}

@-webkit-keyframes marquee {
0% {
transform: translate3d(0, 103%, 0);
-webkit-transform: translate3d(0, -101%, 0);
}
100% {
transform: translate3d(0, 103%, 0);
-webkit-transform: translate3d(0, 103%, 0);
}
}

/* nav */
nav.nav {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
nav figure.insta {
width: 40px;
height: 40px;
display: inline-block;
margin-left: 32px;
}
nav a.reserve {
font-size: .9rem;
display: inline-block;
text-align: center;
border: 1px solid #fff;
padding: 12px 32px;
letter-spacing: .25em;
margin-left: 32px;
position: relative;
transition: all .3s ease-in-out;
}
nav a.reserve:before {
content: "";
width: 16px;
height: 1px;
display: block;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
z-index: 1;
transition: all .3s ease-in-out;
}
nav a.reserve:hover:before {
left: 0px;
}

/* text animation */
.text-animation {
opacity: 0;

&.show {
opacity: 1;

.text-animation-span {
display: inline-block;
overflow: hidden;

}
span {
display: inline-block;
letter-spacing: 0.1em;
animation: showText .5s backwards;
}
}
}

@keyframes showText {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* section */
section .inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 128px 4% 0;
position: relative;
}
section .law-inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 128px 4% 96px;
position: relative;
}
.title-area {
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: block;
padding: 0 4%;
position: relative;
}

/* concept */
.concept-flex {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.concept-info {
width: 40%;
display: block;
}
.concept-info h2 {
font-size: 1.96rem;
line-height: 1.96;
display: block;
margin-bottom: 24px;
}
.concept-info p {
line-height: 3.2;
}

.concept-image {
width: 55%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.concept-image .image01 {
width: 40%;
display: block;
position: relative;
overflow: hidden;
z-index: 1;
margin-top: 16%;
}
.concept-image .image02 {
width: 65%;
display: block;
position: relative;
overflow: hidden;
margin-left: -5%;
}
.concept-image h3 {
display: inline-block;
position: absolute;
color: rgba(199,165,105,0.4);
font-size: 4.6rem;
top: 8%;
left: 4%;
z-index: 2;
}

/* facility */
.facility {
width: 100%;
min-height: 100vh;
background-image: url(/assets/img/facility/fc-bg.jpg);
background-size: cover;
background-position: left bottom;
overflow: hidden;
}
.facility h2 {
display: inline-block;
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
}
.scroll-wrapper {
position: relative;
width: 100%;
display: block;
}
.scroll-wrapper ul {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
position: absolute;
top: 0;
left: 0;
}
.scroll-wrapper ul li {
width: 100vw;
height: calc(100vh - 431px);
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 4%;
position: relative;
margin-bottom: 48px;
}
.scroll-wrapper ul li:last-child {
margin-right: 0;
}
.fc-info {
width: 30%;
position: relative;
}
.fc-info span.number {
color: rgba(199, 165, 105, 0.2);
font-size: 9.6rem;
position: absolute;
top: -8%;
right: 0;
z-index: 0;
}
.scroll-wrapper ul li h3 {
font-size: 1.6rem;
line-height: 1.96;
display: block;
padding-bottom: 32px;
}
.scroll-wrapper ul li p {
font-size: 1rem;
line-height: 3.2;
}
.image-area {
width: 65%;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.scroll-wrapper ul li figure.first {
width: 60%;
display: block;
position: relative;
padding-top: 50%;
overflow: hidden;
z-index: 1;
}
.scroll-wrapper ul li figure.second {
width: 34%;
display: block;
position: relative;
padding-top: 40%;
overflow: hidden;
z-index: 2;
}

.scroll-wrapper ul li figure img {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
}

/* scene */
.scene {
width: 100%;
display: block;
background-image: url(/assets/img/scene/scene-bg.jpg);
background-size: cover;
background-position: left bottom;
position: relative;
}
.scene h2 {
display: inline-block;
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 256px;
}
.scene-area {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.sc-image01 {
width: 50%;
height: 580px;
display: block;
position: relative;
overflow: hidden;
margin-top: -256px;
}
.sc-image01 figure {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
}
.scene figure.sub {
max-width: 320px;
width: 100%;
max-height: 320px;
display: block;
position: absolute;
bottom: 0px;
left: 4%;
z-index: 1;
transform: translate(0px,0px);
}
.sc-info {
width: 50%;
display: flex;
flex-flow: column;
align-items: flex-end;
justify-content: center;
}
.sc-image02 {
width: 80%;
height: 240px;
display: block;
position: relative;
overflow: hidden;
margin-bottom: 64px;
}
.sc-image02 figure {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
}
.sc-txt {
width: 100%;
padding: 4% 8%;
display: block;
}
.sc-txt h3 {
font-size: 1.6rem;
line-height: 1.6;
display: block;
padding-bottom: 32px;
}
.sc-txt p {
font-size: 1rem;
line-height: 3.2;
display: block;
}

/* menu */
.menu-list h2 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
display: block;
text-align: center;
}
.menu-list h3 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 2.4rem;
padding-bottom: 32px;
display: block;
}
.menu-wrap {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
margin-bottom: 24px;
}
.menu-wrap .menu-bloc {
width: calc(100% / 4.2);
display: block;
margin-bottom: 48px;
}
.menu-wrap .menu-bloc figure {
width: 100%;
display: block;
position: relative;
margin-bottom: 24px;
}
.menu-wrap .menu-bloc h4 {
font-size: 1.36rem;
display: block;
padding-bottom: 16px;
line-height: 1.4;
}
.menu-wrap .menu-bloc p {
font-size: .9rem;
display: block;
line-height: 1.6;
}
.house-notice {
width: 100%;
padding: 24px;
display: flex;
justify-content: center;
align-items: center;
background-color: #131313;
}
.house-notice p {
font-size: 1.16rem;
line-height: 1.6;
}

/* fee */
.fee h2 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
display: block;
text-align: center;
}

.fee-wrap {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 8%;
background-color: #131313;
}

.fee-wrap ul {
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
position: relative;
margin-bottom: 24px;
}

.fee-wrap ul li:first-child {
width: 50%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-color: rgb(124, 110, 85);
border: 1px solid rgb(124, 110, 85);;
padding: 24px 4%;
}
.fee-wrap ul li:nth-child(2) {
width: 50%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background-color: #131313;
border: 1px solid rgb(124, 110, 85);
padding: 24px 4%;
}
.fee-wrap ul li:first-child h3 {
font-size: 1.36rem;
line-height: 1.6;
color: #fff;
}
.fee-wrap ul li:nth-child(2) p {
font-size: 1.36rem;
line-height: 1.6;
}
.fee-wrap ul li:nth-child(2) p span {
font-size: 1.16rem;
line-height: 1.6;
color: coral;
}
.fee-wrap h4 {
font-size: 1.36rem;
color: rgb(203, 178, 135);
display: block;
padding-bottom: 16px;
}
.fee-wrap p {
font-size: 1.16rem;
line-height: 1.6;
display: block;
padding-bottom: 8px;
}
.fee-wrap p.benefit {
font-size: 1.16rem;
line-height: 1.6;
display: block;
padding-bottom: 48px;
}

.ticket-area {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
background-color: #000;
margin-top: 32px;
}
.ticket-area figure {
width: 50%;
display: block;
position: relative;
overflow: hidden;
}
.ticket-area figure img {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
}
.ticket-info {
width: 50%;
padding: 32px 48px;
}
.ticket-info h3 {
font-size: 1.96rem;
color: rgb(203, 178, 135);
display: block;
padding-bottom: 32px;
}
.ticket-info ul {
width: 100%;
display: block;
margin-bottom: 32px;
}
.ticket-info ul li {
font-size: 1.16rem!important;
padding: 8px 16px!important;
background-color: rgb(124, 110, 85)!important;
color: #fff!important;
display: block!important;
margin-bottom: 16px!important;
width: 100%!important;
}
.ticket-info p.notice {
font-size: .9rem;
}
.ticket-info a {
font-size: .9rem;
display: inline-block;
text-align: center;
border: 1px solid #fff;
padding: 12px 32px;
letter-spacing: .25em;
margin: 24px auto 0 16px;
transform: translate(25%,0%);
position: relative;
transition: all .3s ease-in-out;
}
.ticket-info a:before {
content: "";
width: 16px;
height: 1px;
display: block;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
z-index: 1;
transition: all .3s ease-in-out;
}
.ticket-info a:hover:before {
left: 0px;
}
.payment {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 64px 0 0;
}
.payment p {
font-size: 16px;
line-height: 1.6;
display: inline-block;
border: 1px solid #fff;
padding: 8px 16px;
}

.terms {
  width: 100%;
  display: block;
  padding: 32px 0 0;
  margin-top: 64px;
  border-top: 1px solid #fff;
  }
  .terms h3 {
    font-size: 18px;
    line-height: 1.6;
    display: block;
    padding-bottom: 16px;
    }
.terms p {
  font-size: 16px;
  line-height: 1.6;
  display: block;
  }

/* access */
.access {
width: 100%;
display: block;
padding-top: 128px;
}
.access-img {
width: 100%;
height: 360px;
display: block;
position: relative;
}
.access-img figure {
width: 100%;
height: 100%;
display: block;
position: relative;
overflow: hidden;
}
.access-img figure:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
.access-img figure img {
width: 100%;
height: 100%;
position: absolute;
bottom: 0%;
left: 0%;
right: 0;
object-fit: cover;
}
.access-ttile {
width: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
}
.access-ttile h2 {
position: relative;
color: rgba(255, 255, 255, 0.6);
font-size: 4.6rem;
display: block;
}

.access-info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.access-info .info-txt {
width: 48%;
display: block;
position: relative;
}
.access p {
font-size: 1rem;
line-height: 1.96;
display: block;
margin-bottom: 48px;
}
.access-info .info-txt dl {
width: 100%;
display: block;
position: relative;
}
.access-info .info-txt dl dt {
width: 100%;
display: block;
position: relative;
margin-bottom: 12px;
line-height: 1.6;
}
.access-info .info-txt dl dd {
width: 100%;
display: block;
position: relative;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 0.75px solid #fff;
line-height: 1.6;
}
.access-info .info-txt dl dd:last-child {
margin-bottom: 0;
}
.access-info .info-txt dl dd a {
color: rgb(203, 178, 135);
text-decoration: underline;
}

.access-map {
width: 48%;
display: block;
position: relative;
}
.map {
width: 100%;
height: 100%;
position: relative;
display: block;
overflow: hidden;
}
.map iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

/* online store */
.store {
width: 100%;
display: block;
position: relative;
}
.store .inner {
padding: 128px 4% 0;
}
.store h2 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
display: block;
}
.store-wrap {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.store-info {
width: 35%;
display: block;
position: relative;
}
.store-info p {
line-height: 3.2;
display: block;
margin-bottom: 48px;
}
.store-info a {
font-size: .9rem;
display: inline-block;
text-align: center;
border: 1px solid #fff;
padding: 12px 32px;
letter-spacing: .25em;
margin-left: 16px;
position: relative;
transition: all .3s ease-in-out;
}
.store-info a:before {
content: "";
width: 16px;
height: 1px;
display: block;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
z-index: 1;
transition: all .3s ease-in-out;
}
.store-info a:hover:before {
left: 0px;
}
.store-image {
width: 57%;
display: block;
}
.store-image ul {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.store-image ul li {
width: 50%;
z-index: 1;
position: relative;
}
.store-image ul li:first-child {
width: 60%;
margin-right: -10%;
z-index: 0;
position: relative;
}

/* insta */
.insta-inner {
width: 100%;
max-width: 1600px;
display: block;
margin: 0 auto;
padding: 128px 4%;
}

.insta h2 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
display: block;
}

/* GM */
.gm .inner {
width: 100%;
padding: 128px 4%;
}
.gm h2 {
position: relative;
color: rgba(199, 165, 105, 0.4);
font-size: 4.6rem;
padding-bottom: 96px;
display: block;
}
.gm-wrap {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
}
.gm-info {
width: 30%;
display: block;
}
.gm-image {
width: 64%;
display: block;
}
.gm-info h3 {
font-size: 1.6rem;
display: block;
margin-bottom: 32px;
}
.gm-info span {
font-size: .96rem;
display: block;
margin-bottom: 16px;
}
.gm-info p {
line-height: 3.2;
}

/* footer */
.footer {
width: 100%;
display: block;
position: relative;
background-color: #121212;
}
.footer .foot-inner {
width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
position: relative;
padding: 96px 4%;
margin: 0 auto;
}
.footer .foot-inner h2 {
width: 100%;
max-width: 180px;
display: block;
margin-bottom: 24px;
}
.footer p.adress {
font-size: .9rem;
line-height: 1.6;
text-align: center;
display: block;
}
.footer ul.law-bloc {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
padding-top: 32px;
}
.footer ul.law-bloc li {
display: inline-block;
padding: 0 16px;
}
.footer ul.law-bloc li a {
font-size: .9rem;
display: inline-block;
}
.copy {
width: 100%;
display: block;
padding: 48px 0 0;
text-align: center;
}
.copy p.copy {
font-size: .86rem;
color: #fff;
}

/* law */
.law h2 {
font-size: 2.6rem;
color: rgba(199, 165, 105, .8);
display: block;
text-align: center;
padding-bottom: 64px;
}
.law h3 {
font-size: 1.16rem;
line-height: 1.6;
display: block;
padding-bottom: 24px;
}
.law p {
line-height: 1.96;
display: block;
padding-bottom: 32px;
}

/* loading */
#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 1002;
text-align:center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
color: #fff;
width: 100%;
}

#splash_text svg{
height: 2px;
}

.loader_cover {
width: 100%;
height: 50%;
background-color: #121212;
transition: all .5s cubic-bezier(.04, .435, .315, .9);
transform: scaleY(1);
}
.loader_cover-up {
transform-origin: center top;
}
.loader_cover-down {
position: absolute;
bottom: 0;
transform-origin: center bottom;
}
.coveranime {
transform: scaleY(0);
}


@media screen and (max-width:480px) {
.header .logo h1 {
width: 96px;
}
nav.nav {
display: none;
}

video.pc {
display: none!important;
}
video.sp {
display: block!important;
}
.mv-title {
max-width: 240px;
padding-top: 40px;
}
.concept-flex {
flex-flow: column-reverse;
}
.concept-info {
width: 100%;
}
.concept-image {
width: 100%;
margin-bottom: 48px;
}
.concept-image h3 {
font-size: 3.2rem;
top: 4%;
left: 0%;
}
.facility {
width: 100%;
min-height: auto;
overflow: visible;
position: relative;
display: block;
}
.concept-info h2 {
font-size: 1.6rem;
}
.facility h2 {
font-size: 3.2rem;
padding-bottom: 64px;
}
.scroll-wrapper ul {
position: relative;
flex-flow: column;
}
.scroll-wrapper ul li {
height: auto;
flex-flow: column;
margin: 0 0 48px;
width: 100%;
}
.scroll-wrapper ul li:last-child {
margin-right: 0;
margin-bottom: 128px;
}
.image-area {
width: 100%;
margin-bottom: 48px;
}
.scroll-wrapper ul li figure.first {
width: 55%;
}
.scroll-wrapper ul li figure.second {
width: 40%;
}
.fc-info {
width: 100%;
}
.fc-info span.number {
right: 4%;
}
.scene {
width: 100%;
display: block;
background-image: url(../img/scene/scene-bg.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
}
.scene h2 {
font-size: 3.2rem;
padding-bottom: 64px;
}
.scene-area {
width: 100%;
flex-flow: column;
}
.scene-area {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.sc-image01 {
width: 100%;
height: 390px;
margin-top: 0;
}
.sc-info {
width: 100%;
align-items: flex-end;
justify-content: flex-start;
flex-flow: column-reverse;
padding-top: 128px;
}
.scene figure.sub {
max-width: 200px;
width: 100%;
max-height: 200px;
display: block;
position: absolute;
top: 420px;
right: 4%;
left: auto;
z-index: 1;
transform: translate(0px, 0px);
}
.sc-txt {
width: 100%;
padding: 0 4% 48px;
display: block;
}
.sc-image02 {
width: 96%;
height: 240px;
margin-bottom: 0px;
}
.sc-image02 figure {
top: 0%;
}
.fee h2 {
font-size: 3.2rem;
padding-bottom: 64px;
}
.fee-wrap {
padding: 4%;
}
.fee-wrap ul li:first-child {
width: 100%;
padding: 16px 4%;
}
.fee-wrap ul li:nth-child(2) {
width: 100%;
padding: 16px 4%;
}
.fee-wrap ul li:nth-child(2) p {
text-align: center;
}
.fee-wrap p.benefit {
font-size: 1rem;
}
.fee-wrap ul li:nth-child(2) p span {
display: block;
}
.ticket-area figure {
width: 100%;
height: 250px;
}
.ticket-info {
width: 100%;
padding: 24px;
}
.ticket-info ul li {
font-size: 1rem !important;
}
.fee-wrap p {
font-size: 1rem;
}
.ticket-info h3 {
padding-bottom: 24px;
line-height: 1.36;
}
.ticket-info a {
font-size: .9rem;
display: inline-block;
text-align: center;
border: 1px solid #fff;
padding: 12px 32px;
letter-spacing: .25em;
margin: 24px auto 0;
transform: translate(0%, 0%);
}
.access {
padding-top: 96px;
}
.access-ttile h2 {
font-size: 3.2rem;
}
.access-img {
width: 100%;
height: 240px;
margin-bottom: -48px;
}
.access-info .info-txt {
width: 100%;
}
.access-map {
width: 100%;
height: 240px;
margin-top: 48px;
}
.access p br {
display: none;
}
.store h2 {
font-size: 3.2rem;
padding-bottom: 64px;
}
.store-wrap {
flex-flow: column-reverse;
}
.store-image {
width: 100%;
margin-bottom: 48px;
}
.store-info {
width: 100%;
}
.gm h2 {
font-size: 3.6rem;
padding-bottom: 64px;
}
.gm-image {
width: 100%;
margin-bottom: 48px;
}
.gm-info {
width: 100%;
}
.gm .inner {
width: 100%;
padding: 96px 4% 32px;
}
.footer .foot-inner h2 {
width: 100%;
max-width: 140px;
}
span.menu {
display: block;
z-index: 1001;
}
.menu .menu-line {
display: block;
}
.sp-nav {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 998;
background-image: url(/assets/img/sp-nav-bg.jpg);
background-size: cover;
background-position: center;
}
.sp-nav:before {
content: "";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
z-index: 999;
}
.nav-menu {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-flow: column;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-menu ul {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: column;
padding: 12% 8% 0;
}
.nav-menu ul li {
width: 100%;
display: block;
}
.nav-menu ul li a {
font-size: 1.16rem;
display: inline-block;
padding: 0 0 32px 0;
}
.cv-nav {
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
position: relative;
border-top: 1px solid #fff;
}
.cv-nav a {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
padding: 24px 16px;
}
.nav-menu ul li figure {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 8px;
}
.cv-nav a:first-child,
.cv-nav a:nth-child(2) {
border-bottom: 1px solid #fff;
}
.cv-nav a:first-child,
.cv-nav a:nth-child(3) {
border-right: 1px solid #fff;
}

.law h2 {
font-size: 2rem;
}

.menu-list h2 {
font-size: 3.2rem;
padding-bottom: 64px;
}
.menu-wrap .menu-bloc {
width: calc(100% / 2.1);
margin-bottom: 32px;
}
.menu-wrap .menu-bloc h4 {
font-size: 1.16rem;
}
.menu-wrap {
margin-bottom: 0px;
}
}