@import url('https://fonts.googleapis.com/css?family=Roboto');

/*common*/
body{
  font-family: Avenir, "Helvetica Neue" , Helvetica , Arial , Verdana , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic", "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif ;
  color: #ffffff ;
  font-size: 14px ;
  background-color: #000 ;
  margin: 0 ;
}

a{
  display: block;
  color: #888 ;
}

a[href^="tel:"]{
  cursor: default ;
  color:#fff;
  text-decoration:none;
}

a[href^="tel:"]:hover,
a[href^="tel:"]:focus{
  cursor: default ;
  color:#fff;
  text-decoration:none;
}

img{
  display: block;
  margin:auto;
  max-width: 100%;
  height: auto ;
}

.section{
  margin: 0 ;
  padding: 60px 0 ;
}

[class*="article-"]{
  text-align: center;
  margin:0;
  padding:54px 0 0 0;
}

[class*="article-"] h2{
  margin: 0 auto 50px auto;
  padding:0;
}

[class*="article-"] h2 img,
[class*="article-"] h3 img,
[class*="article-"] h4 img {
  display:inline-block;
}

[class*="article-"] h3{
  margin: 0 auto 20px auto;
  padding: 0;
}

[class*="article-"] h4{
  margin: 0 auto 96px auto;
  padding: 0;
}

[class*="article-"] .box-text,
.modal-flavor .box-text{
  padding-bottom:calc(68px - 1.0rem);
}

[class*="article-"] .box-text p,
.modal-flavor .box-text p,
[class*="article-"] .box-text dt,
[class*="article-"] .box-text dd{
  font-size:1.0rem;
  line-height:2.2rem;
  margin-bottom:1rem;
}

.container{
  max-width:1280px;
  position:relative;
}

[class*="divider-bricks-"]{
  height: 48px ;
  margin: 0 ;
  padding: 0 ;
  background-size: auto 100% ;
  background-repeat: repeat-x ;
}

.divider-bricks-01{
  background-image: url("../images/bg_bricks_01.png");
}
.divider-bricks-02{
  background-image: url("../images/bg_bricks_02.png");
}
.divider-bricks-03{
  background-image: url("../images/bg_bricks_03.png");
}

.divider-chain{
  height: 14px ;
  margin: 0 ;
  padding: 0 ;
  background-image: url("../images/divider.png");
  background-size: auto 100% ;
  background-repeat: repeat-x ;
}

article + .divider-chain{
  margin-top:-7px;
  margin-bottom:-7px;
  position:relative;
  z-index:2000;
}
.row.no-gutter{
  margin-left:0;
  margin-right:0;
}

.row.no-gutter [class*="col-"]{
  padding-left:0;
  padding-right:0;
}

/* Header */
header{
  margin: 0 ;
}

header h1{
  margin: 0 ;
  font-size: .8rem ;
  font-weight:100;
  color: #ffffff ;
  font-size: 1.0rem ;
}

.site-description {
  padding-top: 6px ;
  padding-bottom: 4px ;
  border-bottom: solid 1px #0088d2 ;
}

/* Nav Global */
.nav-global {
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  justify-content: space-around ;
  margin:30px 0 0 0;
  padding: 0;
  text-align:center;
  transition:.6s;
}

.nav-global li {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none ;
}

.nav-global li a{
  display: inline-block;
  padding: 10px 0;
}

.nav-global li a img{
  margin: auto;
}

.nav-global-fixed{
  background-color:#000;
  position:fixed;
  width:100%;
  top:-100px;
  left:0;
  transition:.6s;
  z-index: 5000;
  margin: 0;
  padding: 10px 0;
}

.nav-global-fixed.slide-in{
  position:fixed;
  width:100%;
  top:0px;
  left:0;
  transition:.6s;
}

#following {
  position: fixed ;
  top: 60px ;
  right: 0 ;
  z-index:4000;
}

#following ul {
  display: flex ;
  flex-direction: column ;
  margin: 0;
  padding: 0;
}

#following li {
  list-style: none ;
}

#following li + li{
  margin-top:6px;
}

#following ul li a {
  display: block;
  background-color: #1E2C5C ;
  padding: 8px 20px;
}

/*Main Visual*/
.hero {
  background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_01.jpg") ;
  animation:main_transition 15s linear 0s infinite;
  background-repeat: no-repeat,no-repeat;
  background-position: center bottom, center bottom;
  background-size: 100%,cover ;
  height: 860px ;
  transition:.3s;
}

@keyframes main_transition {
  0%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_01.jpg"),url("../images/main/bg_main_02.jpg"),url("../images/main/bg_main_03.jpg") ;
    transition:.3s;
  }
  31%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_01.jpg"),url("../images/main/bg_main_02.jpg"),url("../images/main/bg_main_03.jpg") ;
    transition:.3s;
  }
  33%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_02.jpg"),url("../images/main/bg_main_03.jpg"),url("../images/main/bg_main_01.jpg") ;
    transition:.3s;
  }
  64%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_02.jpg"),url("../images/main/bg_main_03.jpg"),url("../images/main/bg_main_01.jpg") ;
    transition:.3s;
  }
  66%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_03.jpg"),url("../images/main/bg_main_01.jpg"),url("../images/main/bg_main_02.jpg") ;
    transition:.3s;
  }
  98%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_03.jpg"),url("../images/main/bg_main_01.jpg"),url("../images/main/bg_main_02.jpg") ;
    transition:.3s;
  }
  100%{
    background-image: url("../images/bg_bricks_main.png"),url("../images/main/bg_main_01.jpg"),url("../images/main/bg_main_02.jpg"),url("../images/main/bg_main_03.jpg") ;
    transition:.3s;
  }
}

.hero .container{
  height:100%;
}

.hero .container > div{
  display: flex ;
  height: 100%;
  width: 100% ;
  flex-direction: column;
  justify-content: center ;
  align-items: center ;
  align-content: center ;
  position: relative;
}

.scroll-down{
  position:absolute;
  bottom:90px;
  left:calc(50% - 120px);
  cursor: pointer;
}

.shisha {
  position: absolute;
  right: 0;
  bottom: 0px ;
}

.main-logo{
  width:540px;
}

/* Concept Resort */
.article-concept .box-resort{
  margin:0;
  padding:38px 0 0 0;
}

.article-concept .box-resort h3{
  margin-bottom:36px;
}

/* System */
.article-system .content-system{
  padding-bottom:40px;
}

.article-system .content-system img{
  margin:auto;
}

/* Menu */
.article-menu{
  padding-top:74px;
}

.article-menu h2{
  margin-bottom:80px;
}

.article-menu h3{
  margin-bottom:40px;
}

.article-menu h4{
  margin-bottom:40px;
}

.article-menu [class*="area-"]{
  padding:70px 0 0 0;
  margin:0;
}

.article-menu .area-drink{
  background-color: #2C1323 ;
}

.article-menu .area-food{
}

.article-menu .btn-food,
.article-menu .btn-party{
  margin:0;
  text-align:right;
}

.article-menu .btn-food{
  padding:56px 0 68px 0;
}

.iziModal.modal-food{
  background-color:transparent;
  box-shadow:none;
  outline:0;
  border:0;
}

.article-menu .btn-party{
  padding:42px 0 54px 0;
}

.iziModal.modal-party{
  background-color:transparent;
  box-shadow:none;
  outline:0;
  border:0;
}

.article-menu .btn-food img,
.article-menu .btn-party img{
  display:inline-block;
  cursor:pointer;
}

.article-menu .area-party{
  background-color: #002702 ;
}

.article-menu .area-party .row [class*="col-"]{
  padding-left:30px;
  padding-right:30px;
}

[class*="bg-icon-"]{
  position:absolute;
}

.bg-icon-menu-01{
  top:10px;
  right: 100px;
  width: 250px;
}

.bg-icon-menu-02{
  top:54px;
  right:112px;
}

.bg-icon-menu-03{
  top:32px;
  right:192px;
}

.bg-icon-menu-04{
  top:-38px;
  right:158px;
}

.bg-icon-menu-05{
  top:204px;
  right:98px;
}

.bg-icon-menu-06{
  bottom:18px;
  left:54px;
}

/* Flavor */
.article-flavor {
  padding: 80px 0 54px 0;
  background-color: #111B39 ;
  background-image: url("../images/flavor/flavor_bg.png");
  background-repeat:no-repeat;
  background-position:center 70px;
}
.content-flavor{
  margin:0;
  padding:0;
}
.content-flavor-shisha{
  position:absolute;
  top:72px;
  left:0px;
}
.content-flavor-shisha img{
  height:700px;
}
.box-flavor{
  background-image:url("../images/flavor/flavor_divider.png");
  background-size:1144px 178px;
  background-repeat:no-repeat;
  background-position:center center;
}
.box-flavor > div{
  display:flex;
  justify-content:center;
}
.box-flavor > div > div{
  margin:18px 28px;
  padding:0;
  width:262px;
  height:42px;
  cursor:pointer;
}

/* Gallery */
.article-gallery{
  padding:112px 0 80px 0;
}

.article-gallery h3{
  margin-bottom:78px;
}

.article-gallery .box-gallery .row{
  margin-bottom:28px;
}

.article-gallery .box-gallery .row [class*="col-"]{
  padding-left:5px;
  padding-right:5px;
}

/* Access */
.article-access{
  padding:82px 0 0 0;
}
.article-access .box-text .text-tel{
  font-size: 1.8rem;
  line-height:3.7rem;
}

/* Map */
.article-map h2{
  margin:0 auto 20px auto;
}

.article-map .btn-map{
  margin:0;
  padding:56px 0 46px 0;
}

.article-map .btn-map a{
  display:inline-block;
}

#map-canvas{
  width:980px;
  height:540px;
  margin:auto;
}

.box-twitter{
  width:500px;
  height:750px;
  overflow-y:scroll;
  margin:auto;
}

.box-facebook{
  width:500px;
  height:750px;
  overflow-y:scroll;
  margin:auto;
}

.nav-info{
  text-align:center;
  padding:0;
  margin:32px auto 44px auto;
}

.nav-info li{
  list-style:none;
  display:inline-block;
}

.nav-info li + li:before{
  content:'|';
  font-size:1.4rem;
  padding:0 22px;
}

.nav-info li a{
  font-size:1.2rem;
  color:#fff;
  display:inline-block;
}

/* Footer */
footer{
  position: relative;
  margin: 0 auto ;
  padding:54px 0 0 0;
  background-color: #171717 ;
}

footer .nav-sns{
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  justify-content:center;
  margin-bottom:92px;
}

footer .nav-sns li{
  list-style:none;
  padding:0 54px;
  position:relative;
}

footer .nav-sns li > img{
  position:absolute;
  top:-20px;
  left:-128px;
}

.nav-footer{
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  justify-content: center ;
  margin:30px 0 70px 0;
  padding: 0;
}

.nav-footer li {
  list-style: none ;
  margin: 0;
  padding: 0 40px;
}

.nav-footer li a{
  display: inline-block;
  padding: 10px 0;
}

.nav-footer li a img{
  margin: auto;
}

.copyright{
  font-size:1.1rem;
  line-height:2.2rem;
  text-align:center;
  padding-bottom:40px;
  margin:0;
}

.scroll-top{
  position:absolute;
  right:28px;
  bottom:56px;
}

 .lb-outerContainer {
  border-radius:0!important;
  background-color: #000!important;
}
 .lightbox .lb-image {
  border-radius:0!important;
  border: 4px solid #000!important;
}

.no-js .owl-carousel, .owl-carousel.owl-loaded{
  position:relative;
}

.owl-nav{
  position:absolute;
  top:300px;
  width:100%;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot{
  font-size:5rem;
}

.owl-carousel .owl-nav button.owl-prev{
  position:absolute;
  left:calc(50% - 600px);
  font-size:5rem!important;
}

.owl-carousel .owl-nav button.owl-next{
  position:absolute;
  right:calc(50% - 600px);
  font-size:5rem!important;
}

.owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-next:focus{
  outline:none;
  box-shadow:none;
}

.owl-carousel .owl-item .box-resort{
  opacity:0;
  transform:translateY(50px);
  transition:.3s;
}

.owl-carousel .owl-item.active .box-resort{
  opacity:1;
  transform:translateY(0px);
  transition:.3s 1s;
}

#modal-flavor-al.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_al.jpg');}
#modal-flavor-fu.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_fu.jpg');}
#modal-flavor-tr.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_tr.jpg');}
#modal-flavor-so.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_so.jpg');}
#modal-flavor-fa.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_fa.jpg');}
#modal-flavor-de.iziModal.modal-flavor{background-image:url('../images/flavor/flavor_modal_divider.png'),url('../images/flavor/flavor_modal_bg_de.jpg');}

.iziModal.modal-flavor{
  background-repeat:no-repeat,repeat-x;
  background-size:auto auto,auto 100%;
  background-position:center calc(100% - 20px),left top;
  text-align:center;
}

.iziModal-content{
  padding:16px 0 0px 0 !important;
}

.iziModal.modal-flavor h3{
  opacity:1;
  transform:translateY(0px);
  transition:.3s;
}

.iziModal.modal-flavor .box-text{
  opacity:1;
  transform:translateY(0px);
  transition:.3s;
  margin-top:25px;
}

.iziModal.modal-flavor .box-text p{
  font-size:1.0rem;
  line-height:1.6rem;
}

.iziModal.modal-flavor .box-text img{
  margin-top:-25px;
}

.iziModal-navigate{
  z-index:3500!important;
}

.iziModal-navigate-prev{
  margin-left:-456px!important;
}

.iziModal-navigate-next{
  margin-right:-456px!important;
}

.iziModal.modal-flavor h3.modal-transition,
.iziModal.modal-flavor .box-text.modal-transition{
  opacity:0;
  transform:translateY(10px);
}

.scroll-down {
	position: absolute;
	z-index: 2;
  bottom:150px;
  left:calc(50% - 90px);
	width: 180px;
	height: 180px;
  cursor: pointer;
}
.scroll-down a{
	display: table;
	width: 180px;
	height: 180px;
	position: relative;
}
.scroll-down a:hover,
.scroll-down a:focus{
  text-decoration: none;
}
.scroll-down a::before,
.scroll-down a::after{
	content: '';
	display: block;
	width: 180px;
	height: 180px;
	top: 0;
	left: 0;
	border-radius: 100%;
	position: absolute;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
.scroll-down a::before{
	z-index: 1;
	border: 1px solid #fff;
	-webkit-animation: pulsate 2s ease-out infinite;
	-moz-animation: pulsate 2s ease-out infinite;
	-o-animation: pulsate 2s ease-out infinite;
	animation: pulsate 2s ease-out infinite;
}
.scroll-down a::after{
	z-index: 2;
	border: 2px solid #fff;
	border-color: #fff rgba(255,255,255,.5) rgba(255,255,255,.5) #fff;
	background-color: rgba(0,0,0,.3);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.scroll-down a span{
	z-index: 3;
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.1;
	padding-bottom: 20px;
  font-family: 'Roboto', sans-serif;
}
.scroll-down a span::before,
.scroll-down a span::after{
	content: '';
	display: block;
	width: 2px;
	height: 30px;
	background-color: #fff;
	position: absolute;
	bottom: 20px;
	left: 50%;
}
.scroll-down a span::before{
	-webkit-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.scroll-down a span::after{
	-webkit-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}
.scroll-down:hover a::after{
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
@keyframes pulsate {
	0% {transform: scale(1,1);}
	50% {opacity: .7;}
	100% {transform: scale(1.5, 1.5); opacity: 0.0;}
}
@keyframes btnRotate {
	0% {transform-origin: center center;transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.owl-prev,
.iziModal-navigate-prev,
.lb-prev{
  animation:pulseLeft 1.5s linear 0s infinite;
}
.owl-next,
.iziModal-navigate-next,
.lb-next{
  animation:pulseRight 1.5s linear 0s infinite;
}


@keyframes pulseLeft {
  0%{
    transform:translateX(0px);
    transition:.3s;
  }
  100%{
    transform:translateX(-10px);
    transition:.3s;
  }
}
@keyframes pulseRight {
  0%{
    transform:translateX(0px);
    transition:.3s;
  }
  100%{
    transform:translateX(10px);
    transition:.3s;
  }
}

.area-lower{
  background-color:#d9d9da;
}

.article-company,
.article-privacy,
.article-contact,
.article-recruit{
  color:#111;
  padding-bottom:60px;
}

.article-company .container,
.article-privacy .container,
.article-contact .container,
.article-recruit .container{
  max-width:800px;
}

.article-company h2,
.article-privacy h2,
.article-contact h2,
.article-recruit h2{
  text-align:left;
  margin:0 auto;
  font-family:Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

.article-company h3,
.article-privacy h3,
.article-contact h3,
.article-recruit h3{
  font-size:1.0rem;
  margin:1em auto;
  padding:10px 10px;
  border-top:solid 3px #111;
  border-bottom:dashed 2px #111;
}

.article-company .box-text,
.article-privacy .box-text,
.article-contact .box-text,
.article-recruit .box-text{
  max-width:440px;
  padding-bottom:0;
  margin:0 auto;
  text-align:left;
}

.article-company .box-text.box-text-lg,
.article-privacy .box-text.box-text-lg,
.article-contact .box-text.box-text-lg,
.article-recruit .box-text.box-text-lg{
  max-width:800px;
}

.line-double{
  width:100%;
  height:10px;
  margin:10px auto 20px auto;
  border:0;
  background-image:url(../images/line-double.png);
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}
