@charset "UTF-8";
/* loading */
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
body{
  position: relative;
}
#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 3000;
}

#loader-bg #loader {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}

#loader img {
  display: inline-block;
  animation: loading 0.5s linear 0s infinite alternate;
  width: 80%;
  max-width: 384px;
  height: auto;
}

.index .top{
  height: 100vh;
  position: relative;
}
.index .top .mainVisual li{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
}
.index .top .mainVisual li img{
  width: auto;
  height: 100vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/*
.index .top .mainVisual li:nth-child(1){
  background: url(../images/top/topSlider01.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.index .top .mainVisual li:nth-child(2){
  background: url(../images/top/topSlider02.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.index .top .mainVisual li:nth-child(3){
  background: url(../images/top/topSlider03.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
.index .top .mainVisual li:nth-child(4){
  background: url(../images/top/topSlider04.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
}
*/
.index .top_logo{
  width: 90%;
  max-width: 639px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
}
.index .top_image{
  width: 100%;
  height: calc(100vh);
  text-align: center;
}
.index .top_image .top_text{
  top: 45%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: left;
}
.index .top .scroll{
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}
.index .top .scroll .img{
  display: inline-block;
  width: 10px;
  margin: 5px 0 10px;
}

.section{
  padding: 50px 0 0;
}
.section .ttl{
  text-align: center;
  letter-spacing: 4px;
}
.section .subttl{
  text-align: center;
  margin-bottom: 30px;
}
.section .sec_txt{
  line-height: 1.8;
}
.section .title{
  line-height: 2.2;
}

/* concept */
.concept {
  padding-top: 0;
}
.concept .bg{
  position: relative;
  /* top: calc(100vh); */
  padding: 50px 0 60px;
}

.concept .bg:before{
  content: "";
  background: url(../images/top/concept_bg2.png), #1e160b;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* background-size: auto 100%; */
  /* background-attachment: fixed; */
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.concept .ttl,
.concept .subttl{
  position: relative;
  z-index: 4
}
.concept .box1{
  /* width: 100%; */
  align-items: flex-end;
  position: relative;
}
.concept .box1 .left{
  width: 57%;
  max-width: 500px;
}
.concept .box1 .left .sec_txt{
  margin-top: 33px;
}

.concept .box1 .img_box{
  margin-top: 2%;
  display: flex;
}
.concept .box1 .img_box .img{
  width: 49.5%;
}

.concept .box1 .right{
  width: 43%;
}
.concept .box1 .right .big_img{
  max-width: 256px;
  margin: 0 auto;
}

.concept .box2 .flex{
  align-items: center;
}
.concept .box2 .left{
  width: 50%;
  /* margin-right: auto; */
}
.concept .box2 .left img{
  text-align: center;
  object-fit: cover;
  min-height: 314px;
}
.concept .box2 .right{
  width: 47%;
  max-width: 340px;
  margin-left: 3%;
  order: 2;
}

.concept .box2 .right_outer{
  position: relative;
}
.concept .box2 .right_outer:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -2%;
  top: -44%;
  background: url(../images/top/concept04.png) no-repeat;
  background-size: 18% auto;
  background-position: right top;
}

.concept .box2 .right_outer:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -.5%;
  top: 24%;
  background: url(../images/top/concept05.png) no-repeat;
  background-size: 13.75% auto;
  background-position: right top;
}

.concept .box2 .left .sec_txt{
  margin-top: 30px;
}
.concept .box2 .title{
  margin: -10px 0 20px 0;
}

/* about */
.about{
  background: #fff;
}
.about .box1 .right{
  width: 50%;
  max-width: 593px;
  margin-left: auto;
}
.about .box1 .right img{
  text-align: center;
  object-fit: cover;
  min-height: 385px;

}
.about .box1 .left_outer{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.about .box1 .left{
  width: 48%;
  max-width: 495px;
  height: 100%;
  margin-right: auto;
  padding-top: 15px;
  left: 0;
  top: 0;
}
.about .box1 .left .sec_txt{
  margin-top: 30px;
  line-height: 2;
}
.about .box2{
  margin-top: 60px;
  /*background: url(../images/top/about_bg2.png) no-repeat;*/
  background-repeat: no-repeat;
  background-position: top center;
  padding: 35px 0 60px;
  overflow: hidden;
}
.about .box2 .black{
  text-align: center;
}

.about .box2 .black_inner{
  position: relative;
  display: inline-block;
}
.about .box2 .black_inner:after{
  content: "";
  display: block;
  width: 100px;
  height: 80%;
  background: url(../images/top/about03.png) no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  right: -2em;
  bottom: 0;
  top: 0;
  margin: auto;
}
.about .box2 .black_inner:before{
  content: "";
  display: block;
  width: 100px;
  height: 80%;
  background: url(../images/top/about02.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: -2em;
  bottom: 0;
  top: 0;
  margin: auto;
}

.about .box2 .big_img{
  margin-top: 13px;
  position: relative;
}

.question {
	position: absolute;
	background: rgba(0, 0, 0, 0.2);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color ease 0.3s;
}
.question_contenter {
	position: absolute;
	cursor: pointer;
}
.question_contenter.q01 {
  left: 13%;
  bottom: 45%;
}
.question_contenter.q02 {
  left: 27%;
  bottom: 42%;
}
.question_contenter.q03 {
  left: 39%;
  bottom: 65%;
}
.question_contenter.q04 {
  left: 56%;
  bottom: 37%;
}
.question_contenter.q05 {
  left: 71%;
  bottom: 62%;
}
.question_contenter.q06 {
  left: 90%;
  bottom: 36%;
}
.question_point {
	display: block;
	background: #FFF;
	width: 15px;
	height: 15px;
	border-radius: 8px;
}
.question_line {
	position: absolute;
	height: 100px;
	transition: height ease 0.3s;
	width: 0;
	border-right: 1px dashed #FFF;
	bottom: 8px;
	left: 7px;
}
.question_contenter:hover .question_line {
	height: 54px;
}
.question_image {
	position: absolute;
	border: 1px solid #FFF;
	width: 50px;
	height: 50px;
	background-color: #FFF;
	background-image: url("../images/top/question_image.png");
	background-position: center;
	background-repeat: no-repeat;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 25px;
	transition: all ease 0.3s;
	box-sizing: border-box;
}
.q01 .question_image {
	background-image: url("../images/top/question_image_01.png");
}
.q02 .question_image {
	background-image: url("../images/top/question_image_02.png");
}
.q03 .question_image {
	background-image: url("../images/top/question_image_03.png");
}
.q04 .question_image {
	background-image: url("../images/top/question_image_04.png");
}
.q05 .question_image {
	background-image: url("../images/top/question_image_05.png");
}
.q06 .question_image {
	background-image: url("../images/top/question_image_06.png");
}
.question_contenter:hover .question_image {
	background-color: transparent;
	background-image: none;
	width: 142px;
	height: 142px;
	border-radius: 71px;
	top: -142px;
	padding: 5px;
}
.question_image img {
	border-radius: 66px;
	width: 100%;
	opacity: 0;
}
.question_contenter:hover .question_image img {
	opacity: 1;
}
.question_txt {
	position: absolute;
	top: 100%;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity ease 0.3s;
	height: 0;
  width: auto;
}
.question_contenter:hover .question_txt {
	opacity: 1;
	height: auto;
}
.question:hover {
	background: rgba(0, 0, 0, 0.5);
}

/* about sp */
.about_sp{
  margin: 20px 0 0;
  padding: 0 10px;
}
.about_sp li{
  display: flex;
  border-top: 1px solid #9FA0A0;
  padding: 20px 0;
}
.about_sp li:first-child{
  border-top: none;
}
.about_sp .fig{
  margin: auto 4% auto 0;
  flex-shrink: 0;
  width: 40%;
}
.about_sp .fig img{
  width: 100%;
}
.about_sp .txt{
  margin: auto 0;
}
.about_sp .txt img{
  width: 18vw;
  display: block;
  margin-bottom: 12px;
}
.about_sp .txt p{
  line-height: 1.3;
  font-size: 4vw;
}

/* menu */
.menu{
  /*background: url(../images/top/menu_bg.png);*/
  background-repeat: repeat;
  padding-bottom: 55px;
}
.menu .slider_outer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 25px auto 28px
}
.slider_menu_img{
  position: relative;
  width: 71%;
}
.slider_menu_img:after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: url(../images/top/menu_slider_waku3.png) no-repeat;
  background-size: 100% 100%;
}

.slider_menu_txt{
  width: 27%;
}

#sliderMenuImage{
  padding: 2.5%;
}
#sliderMenuImage .slick-arrow {
    position: absolute;
    top: calc(50% - 25px);
    /* transform: translateY(-50%); */
    z-index: 10;
    width: 50px;
    height: 50px;
    color: rgba(255,255,255,0);
    border: none;
}
#sliderMenuImage .slick-arrow:focus {
  outline: 0;
}
#sliderMenuImage .slick-prev {
  background: url(../images/top/slider_prev.svg) no-repeat;
  background-size: cover;
  left: 0;
}
#sliderMenuImage .slick-next {
  background: url(../images/top/slider_next.svg) no-repeat;
  right: 0;
}
#sliderMenuImage img[src$="dummy.png"]{
  width: auto;
}
#sliderMenuDots .slick-list{
  display: none;
}
#sliderMenuDots .menu_dots{
  text-align: center;
}
#sliderMenuDots .menu_dots li{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #fff;
  padding: 5px 10px;
  margin: 0 5px;
}
#sliderMenuDots .menu_dots li.slick-active{
  color: #1e160b;
  background: #fff;

}
#sliderMenuDots .menu_dots:before{
  content: '蒸篭蒸しMenu';
  display: inline-block;
  border-radius: 5px;
  /* border: 1px solid #fff; */
  border-right: none;
  padding: 6px 20px 6px 10px;
  margin: 0 5px;
  background: url(../images/top/menu_dots2.png) no-repeat;
  background-size: 100% 100%;

}

.slider_menu_txt .txt .ttl{
  text-align: left;
  line-height: 1.8;
}
.slider_menu_txt .txt .ttl .block{
  display: block;
}
.slider_menu_txt .txt .price{
  text-align: center;
  margin: 8% auto 10%;
}
.slider_menu_txt .txt .desc{
  line-height: 1.8;
}
.slider_menu_txt .txt .desc span{
  display: block;
}

.slider_menu_dots{
  margin: 10px auto 5px
}
.menu .btns{
  margin-bottom: 20px;
}
.menu .btn{
  max-width: 420px;
  background: url(../images/top/btn_menu.png) no-repeat;
  background-size: cover;
  margin: 0 1%;
}
.menu .btn .icon_pdf{
  display: inline-block;
  width: 22px;
  vertical-align: middle;
  margin-right: 2px;
}
.menu .btn span{
  vertical-align: middle;
}

/* access */
.access{
  padding: 45px 0 40px;
}
.access .box{
  align-items: flex-end;
}
.access .img{
  width: 50%;
}
.access .txt{
  width: 50%;
  max-width: 495px;
}
.access .txt .txt_ttl{
  line-height: 2;
}
.access .txt .desc{
  margin: 15px 0 20px;
  line-height: 1.8;
}
.access .txt .images{
  display: flex;
}
.access .txt .images .img{
  width: 33%;
  max-width: 155px;
}
.access .parking{
  border: 1px dotted #fff;
  padding: 18px 20px;
  margin-top: 30px;
}
.access .parking .parking_ttl .icon_car{
  display: inline-block;
  width: 23px;
  vertical-align: middle;
  margin-right: 10px;
}
.access .parking .parking_ttl span{
  vertical-align: middle;
}
.access .parking .desc{
  line-height: 1.8;
  margin: 10px 0 2px;
}

/* map */
.section_map{
  padding-bottom: 60px;

}
.section_map .map{
  height: 450px;
  /* text-align: center;
  object-fit: cover;
  object-position: center; */
  /* background: gray; */
}
.section_map .btn{
  margin: 30px auto 0;
}

/* info */
.info{
  width: 100%;
  padding: 50px 0 60px;
  /*background: url(../images/top/about_bg.png);*/
  background-repeat: repeat;
}
.info .inner{
  display: flex;
}
.info .left{
  width: 50%;
}
.info .left img{
  text-align: center;
  object-fit: cover;
  min-height: 600px;
}
.info .right{
  width: 50%;
  padding-top: 40px;
}
.info .right .inner{
  max-width: 520px;
}
.info .right .floor{
  margin-left: 5%;
  margin-bottom: 10px;
}
.info .right .floor span{
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  padding: 10px 8px;
  margin-right: 5px;
}
.info .right .desc{
  margin-left: 5%;
  line-height: 1.8;
  margin-bottom: 25px;
}
.info .right .desc .block{
  display: block;
}

.info .right .img .info_dots{
  display: flex;
  margin-left: 5%;

}
.info .right .img .info_dots img{
  display: inline-block;
  width: 52px;
  margin-right: 5px;
  opacity: .5;
}
.info .right .img .info_dots .slick-active img{
  opacity: 1;
}

#sliderInfo{
  position: relative;
}
#sliderInfo .slick-arrow{
  position: absolute;
  top: 0;
  z-index: 1;
  width: 30px;
  height: 100%;
  color: rgba(0,0,0,0);
  border: none;
}
#sliderInfo .slick-arrow:focus{
  outline: 0
}

#sliderInfo .slick-prev{
  left: 1%;
  background: url(../images/top/slider_about_prev.png) no-repeat;
  background-position: center left;
  background-size: contain;
}
#sliderInfo .slick-next{
  right: 1%;
  background: url(../images/top/slider_about_next.png) no-repeat;
  background-position: center right;
  background-size: contain;
}

.info .youtube{
  width: 100%;
  max-width: 724px;
  margin: 30px auto 0;
}


@media screen and (max-width: 1250px){
  .concept .box2 .left:before {
    left: -5px;
    top: -60px;
    background-size: 33% auto;
  }
  .concept .box2 .left:after {
    left: 26px;
    top: 18%;
    background-size: 23% auto;
  }

}
@media screen and (max-width: 1080px){
  .concept .box2 .right_outer:before{
    right: 0;
    top: -27%;
    background-size: 16% auto;
  }
  .concept .box2 .right_outer:after{
    right: 0;
    top: 23%;
    background-size: 10.75% auto;
  }
  .about .box1 .left{
    padding-top: 0;
  }
  .about .box1 .left .sec_txt {
    margin-top: 20px;
  }
  .about .box2 {
    margin-top: 110px;
  }

  .menu .slider_menu_img{
    position: relative;
    width: 61%;
  }
  .menu .slider_menu_txt{
    width: 37%;
  }

  .access .txt {
    width: 48%;
  }

  .info .right{
    padding-top: 0;
  }
  .info .right .desc .block{
    display: inline;
  }

}

@media screen and (max-width: 868px){
  .menu .slider_outer{
    align-items: flex-start;
  }

}
@media screen and (max-width: 768px){
  .index .top{
    height: 80vh;
  }
  /* concept */
  .concept{
    /* margin-top: 120px; */
  }
  .concept .bg{
    background-position: right 22% top;
  }
  .concept .box1 .right{
    width: 100%;
  }
  .concept .box1 .left{
    width: 96%;
    margin: 0 auto 30px;
  }
  .concept .box1 .right .big_img{
    min-height: auto;
  }

  .concept .box2 .right{
    width: 96%;
    max-width: 500px;
    margin: 0 auto 30px;
    padding-top: 30px;
  }

  .concept .box2 .left{
    width: 100%;
  }
  .concept .box2 .left img{
    min-height: auto;
  }
  .concept .box2 .right_outer{
    position: relative;
  }
  .concept .box2 .right_outer:before {
    right: 0;
    top: -5%;
  }
  .concept .box2 .right_outer:after {
    top: 13%;
    right: 2%;
  }


  /* about */
  .about .box1 .right{
    width: 100%;
    margin: 0 auto;
  }
  .about .box1 .right img{
    min-height: auto;
  }
  .about .box1 .left{
    width: 96%;
    max-width: 500px;
    margin: 20px auto;
    position: static;
  }
  .about .box2 {
    margin-top: 40px;
  }
  .about .box2 .black_inner {
    padding: 0 40px;
  }
  .about .box2 .black_inner:before {
    left: 5px;
  }
  .about .box2 .black_inner:after {
    right: 5px;
  }

  /* menu */
  .menu p.ta_center{
    margin: 0 2%;
  }

  .menu .btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .menu .btn {
    max-width: 320px;
    background-size: 100% 100%;
    margin: 0 auto 10px;
    padding-right: 5%;
  }
  .about .box2 .tate .black:after {
    width: 294px;
    right: -240px;
    top: -40px;
  }

  #sliderMenuImage .slick-arrow {
      top: calc(50% - 20px);
      width: 40px;
      height: 40px;
  }

  .menu .slider_outer{
    display: block;
  }
  .menu .slider_menu_img {
    width: 100%;
  }
  .menu .slider_menu_txt {
    width: 96%;
    margin: 0 auto;
  }
  .slider_menu_txt .txt .ttl {
    line-height: 1.6;
    margin-top: 20px;
  }
  .slider_menu_txt .txt .price {
    margin: 10px auto 20px;
    text-align: right;
  }

  #sliderMenuDots .menu_dots li{
    margin: 0 5px 10px;
  }


  /* access */
  .access .txt {
    width: 96%;
    max-width: 500px;
    margin: 0 auto 20px;
  }

  .access .img,
  .access .parking {
    width: 96%;
    margin: 20px auto;
  }
  .access .img .pinchout{
    margin-top: 5px;
  }

  .section_map .map {
    height: 300px;
  }

  /* info */
  .info{
    flex-direction: column;
  }
  .info .inner{
    display: block;
  }
  .info .left{
    width: 100%;
    /* order: 2;
    min-height: 0%; */
  }
  .info .left img{
    min-height: 0%;
  }
  .info .right{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
  }
  .info .right > div:first-child{
    order: 2;
  }
  .info .right > div:nth-child(2){
    order: 3;
  }
  .info .right .info_dots{
    margin-left: 0;
    margin-bottom: 30px;
    justify-content: center;
  }
  .info .right .floor{
    margin-left: 7%;
  }

  .info .right .desc {
    margin-left: 7%;
  }


  .info .youtube{
    width: 85%;
  }

  #sb_instagram.sbi_col_3 #sbi_images .sbi_item{
    width: 33.33% !important;
  }
  #sb_instagram .sbi_photo{
    height: 0 !important;
    padding-top: 100%;
  }

}

@media screen and (max-width: 500px){
  .top_fix{
    align-items: flex-start;
    background: rgba(0,0,0,.3);
  }
  .top_fix a{
    width: 57%;
    opacity: 1;
    line-height: 1.2;
    text-align: right;
  }
  .top_fix a .fs15{
    margin-right: 30px;
  }

  .index .top {
    /* height: 540px; */
  }

  .concept .box2 .right_outer:before {
    top: -4%;
  }
  .concept .box2 .right_outer:after {
    top: 10%;
  }
  .about .title .inline-block{
    display: inline;
    margin-left: -1em;
  }
  .about .box2 .list li {
    width: 32%;
  }
  .about .box2 .tate .black:before {
    width: 119px;
    left: -110px;
    bottom: -40px;
  }

  #sliderMenu .slick-arrow {
    top: 18%;
    width: 35px;
    height: 35px;
  }
  .slider_menu_txt .txt .ttl .inline-block {
    display: inline;
  }

  .info .right .floor,
  .info .right .img .info_dots{
    margin-left: 2%;
  }
  .info .right .desc {
    margin: 0 2% 25px;
  }
  .info .youtube{
    width: 96%;
  }

}