@charset "utf-8";
@import url('destyle.css');
*:focus {
  outline: none;
}

* {
  font-size: 10px;
}

body {
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, p, a, ul, li, span, dl, dt, dd, dd, dt {
	font-family: 'Zen Old Mincho','Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1;
  color: #fff;
}

.goth, span.goth, .goth * {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", メイリオ, Meiryo, "游ゴシック Medium", YuGothic, YuGothicM, sans-serif;
  font-weight: 400;
}

.zen,nav.gnav ul li a.zen {
	font-family: 'Zen Old Mincho', serif;
}

p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.fl {
  display: flex;
  flex-flow: row wrap;
  justify-content:space-between;
  align-items: center;
}

.fl2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

a[href]:hover {
  opacity: 0.7;
  transition: opacity .3s ease;
}

a.nohover:hover {
  opacity: 1.0;
}


/* fade */

.fi {
  opacity: 0;
  transition: opacity 1s ease-in;
  ;
}

.fi.show {
  opacity: 1;
}

.fu {
  opacity: 0;
  transform: translate(0, 20px);
  transition: 1s;
}

.fu.show {
  transform: translate(0, 0);
  opacity: 1;
}


.rl {
  opacity: 1;
  transform: translate(314px, 0px);
  transition: 1.5s;
}

.rl.show {
  transform: translate(0, 0);
  opacity: 1;
}

.sc_sm {
	transform: scale(1.1, 1.1);
	transition: 1.5s;
	opacity: 0;
}
.sc_sm.show {
	transform: scale(1, 1);
	opacity: 1;
}

.td {
  transition-delay: 1s;
}

.td_02 {
  transition-delay: 2s;
}

.td_03 {
  transition-delay: 3s;
}

.td_top {
  transition-delay: 3.5s;
}
img {
  max-width: 100%;
  height: auto;
}

.tx_c {
  text-align: center;
}


/* ---------------------
	header 
-----------------------*/

#header {
  height: 110px;
  /*background: #393332 url(../img/common/bg_main.svg);*/
  
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 15;
/*
  -webkit-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.15));
  -moz-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.15));
  -ms-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.15));
*/
  opacity: 1;
  transition: 0.3s ease;
}

.header_container {
	justify-content: space-between;
	align-items: flex-end;
	height:100%;
	padding: 55px 30px 25px;
}

.header_container a {
	display:inline-block;
	}

#header.view {
  opacity: 1;
}


.h_logo {
  height: auto;
  position: relative;
  z-index: 1;
  align-items: center;
}

.h_logo img {
  width: 288px;
}

.head_nav {
	    padding-right: 300px;
}
.head_nav ul {
	padding-left: 90px;
}

.head_nav ul li:not(:last-child) {
	margin-right: 40px
}



.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 100; /* 他の要素の下に隠れないように全面配置させます */
top: 60px; /* 上から150pxのところにバナーを配置します */
right: 130px; /* 右から40pxのところにバナーを配置します */
}

.fixed_banner_pc {
width: 60px; /* バナーの横幅を指定してあげます */
}

.floating-banner:hover {
opacity: .8; /* マウスが重なった時に少し透過させます */
}

.fixed_banner_sp {
display: none; /* PCではスマホ用のバナーは非表示にします */
}


.entry_bt {
	color: #fff;
	position: absolute;
	right:0;
	top:0;
}

.entry_bt a {
	display: flex;
	justify-content: center;
	align-items: center;
	height:120px;
	width: 320px;
	color: #fff;
	background: #000;
}

.entry_bt_pages {
	text-align: center;
	padding-top: 100px;
}

.entry_bt_pages a {
	font-size: 1.6rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	padding: 2em 6em;
	
}


.bottom_area.business {
	padding-top: 180px;
}

.bottom_area.business h3 span,.bottom_area.business p {
	color: #fff;
}
.bottom_area.business h3 {
	display: flex;
	flex-direction: column;
	
}

.bottom_area.business h3 span:first-child {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	padding-bottom: 0.6em;
}
.bottom_area.business h3 span:last-child {
	font-size: 3.3rem;
	letter-spacing: 0.1em;
}
.bottom_area.business p {
	font-size: 1.4rem;
	padding-top: 1.8em;
	line-height: 2.3;
}


.text_area {
	position: absolute;
	left: 100px;
	max-width: 438px;
	width: 90%;
}



/* ---------------------
	common 
-----------------------*/

#wrapper {
  margin: auto;
  width: 100%;
  position: relative;
      padding-top: 110px;
  z-index:0;
}

.main_container {
  margin: auto;
  width: 100%;
  position: relative;
  background: #393332;
  background-blend-mode: overlay;
  z-index:3;
  padding-bottom: 230px;
}

.main_inner {
	max-width: 1300px;
	width: 100%;
	margin: auto;
	padding-bottom:145px;

}

.main_inner.pd_0 {
	padding-bottom: 0;
}

h3.min {
	padding: 50px 0;
	font-size: 2.7rem;
	line-height: 2.5;
}


.bggr {
  background: #efefef;
}
.bgbl {
	background:#a7c2d1;
}

h2 {
  font-size: 2.3rem;
  padding-bottom: 50px;
}

#season,#menu,#kobiki,#info,#reserve,#policy {
  margin-top: -120px;
  padding-top: 150px;
  
}

/* ---------------------
	TOP 
-----------------------*/

.opening {
	background: #393332;;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
	display: flex;
}
.opening p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	max-width: 237px;
	width: 50%;
}


.reservation {
position: fixed;
bottom: 80px;
right: 0px;
	z-index: 8999;
}



.top_intro {
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100%;
	
}

.top_intro img {
  width: 100%;
}

.intro {
	position: relative;
	height: auto;
	overflow: hidden;
	text-align: right;
	width: 100%;
	height:calc(100vh - 110px);
	
}

.slide_logo {
	position: absolute;
	width: 237px;
	top: 29%;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.swiper.top .swiper-slide-active .swiper-img,
.swiper.top .swiper-slide-duplicate-active .swiper-img,
.swiper.top .swiper-slide-prev .swiper-img {
  animation: zoomUp 7s linear 0s normal both;
}
.swiper-slide img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

.swiper.top {
	position: fixed;
	top:0;
	width: 100%;
	z-index: -2;
  height: 100vh;
    overflow: hidden;
}


.swiper.top .swiper-wrapper {
	height: calc(100vh + 700px);
}

.swiper.top .swiper-img img {
	height: calc(100vh + 700px);
}


@media only screen and (max-width: 768px) {
.swiper.top .swiper-wrapper {
	height:100vh;
}

.swiper.top .swiper-img img {
	height:100vh;
}


}



.content {
  width: 450px;
  height: auto;
  display: inline-block;
}
.slideshow {
  display: flex;
}
.slideshow,.slideshow li {
	font-size: 0;
}

.slideshow li {
	margin-right: 20px;
}

.wrap ,.loop_slider {
  display: flex;
  align-items: center;
  height: auto;
	overflow: hidden;
width: 100%;
max-width:1300px;
margin:auto;
position: relative;
    top: -45px;
    z-index: 1;
    padding-bottom:265px ;
}

.slideshow {
  display: flex;
  animation: loop-slide 50s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}





.about_box {
	width: 100%;
	padding : 100px 150px;
    text-align: center;
  align-items: flex-start;
}
.about_box p{
  line-height: 2.5;
}


.map {
	max-width: 480px;
	width: 40%;
	position: relative;
	z-index: 2;
}
.map_red,.map_tx {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
} 




.about_tx {
	width:80%;
	max-width:800px;
}


.season_tx {
	max-width: 565px;
	width: 50%;

}
.season_img {
	max-width: 460px;
	width: 40%;

}

.season_img figure:not(:first-child) {
  padding-top:45px;
}

.season_inner {
  max-width: 1100px;
  margin: auto;
  align-items: flex-start;
  padding-bottom: 230px;
}

.season_inner p {
  line-height: 2.5;
  padding-bottom: 90px;
}


.menu_mv {
  max-width: 1300px;
  margin: auto;
}

.menu_mv figure {
	width: 50%;
  display: inline-block;
}
.menu_img figure:first-child {
  padding-bottom: 35px;
}

.menu_box {
  max-width: 1100px;
  margin: auto;
  align-items: flex-start;
  padding: 65px 0 240px 0;
}
.menu_tx {
  max-width: 510px;
  width: 48%;
  padding-top:2.5em ;
}
.menu_tx h3 {
  font-size: 2.2rem;
  padding-bottom: 2em;
	line-height: 2;
}
.menu_tx p {
  letter-spacing: 0.05em;
  line-height: 2.2;
}

.menu_img {
  flex-direction: column;
  width: 50%;
  max-width: 410px;
}

.menu_img figure {
  
}

.kobiki_mv {
  max-width: 1200px;
  margin: auto;
}

.kobiki_box {
  max-width: 1100px;
  margin: auto;
  padding: 65px 0 290px;
  align-items: flex-start;
}

.kobiki_tx {
  width: 50%;
  max-width: 540px;
  
}

.kobiki_tx p {
  line-height: 2;
  letter-spacing: 0.1em;
}

.kobiki_img {
  width: 40%;
  max-width: 420px;
  padding-top: 2em;
}

.info_box {
  
  max-width: 1100px;
  margin: auto;
  align-items: flex-start;

}
.info_tx {
  width: 50%;
  max-width: 440px;
}

.info_tx h2 {
  padding-bottom: 1.5em;
}

.info_tx figure {
  padding-bottom: 5em;
}

.info_tx p {
  line-height: 2.5;
}

.info_map {
  width: 48%;
  max-width: 485px;
}

.google-map iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  width: 100%;
  height: 345px;
}
.reserve_box {
  align-items: center;
  flex-direction: column;
  padding-top: 160px;
}

.reserve_box h2 {
  font-size: 1.6rem;
  padding-bottom: 3em;
}

.reserve_link {
  padding-top: 50px;
}

.reserve_link a {
  padding: 0 15px;
}


.reserve_box p {
  text-align: center;
  padding-top: 50px;
  line-height: 2.5;
}



.policy_box {
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
	padding-bottom: 100px;
	
}

.policy_box h2 {
  font-size: 2rem;
  padding-bottom: 0em;
}



.policy_box p {
  text-align: center;
  padding-top: 50px;
  line-height: 2.5;

}
/* ---------------------
	PC FOOTER 
-----------------------*/

.bottom_sp {
  height: 180px;
  position: relative;
}



.pagetop {
  width: 25px;
  opacity: 0;
  transition: opacity 0.3s ease; /* フェード効果を追加 */
  position: fixed;
  right: 15px;
  bottom: 30px;
  z-index: 999;
}




/* footer */

.footer_box {
  background: #000000;
  position: relative;
  opacity: 1;
  height: 100px;
  justify-content: center;
}



.copyright {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 300;
  color: #fff;
  display: inline-block;
}

.r1 {
	position: absolute;
	left: 50px;
	display: inline-block;
}


.r1 img {
		height: 46px;
}


@media only screen and (max-width: 1100px) {
.main_inner {
  width: 90%;
  margin: auto;
}
.loop_slider {
  top: 40px;
}

}





@media only screen and (min-width: 769px) {
  br.spbr, .spview, a.spview,.expand.spview{
    display: none;
  }
  
     .intro_tx {
      position: absolute;
      bottom: -100%; /* 初期位置を画面外に設定 */
      animation: slideUp 4.0s cubic-bezier(.25,.46,.45,.94) 12s both;
    }

    @keyframes slideUp {
      to {
        bottom: 80px; /* 最終位置を80pxに設定 */
      }
    }
  
}

@media only screen and (max-width: 768px) {
  br.pcbr, .pcview {
    display: none;
  }
  p {
    font-size: 1.4rem;
  }
  #header {
    height: 60px;
  }

.header_container {
	padding: 23px 10px 10px 20px;
}

.head_nav {
	display: none;
}

  .h_logo img {
    width: auto;
    height: 22px;
	  
}

.reservation {
	display: none;
}
	
.kobiki_tx p {
  line-height: 2;
  letter-spacing: 0.1em;
	margin-bottom: 10vw;
}	

  #wrapper {
    padding-top: 60px;
    overflow-x: hidden;
  }
  .main_container {
    padding-bottom: 25vw;
  }

.main_inner {
    padding-bottom: 12vw;
    overflow-x: visible;
}

h2 {
  font-size: 2rem;
  padding-bottom: 1.2em;
}


  /* ---------------------
	top sp 
-----------------------*/

.slide_logo {
  width: 50vw;
	top:30%;
}

.intro {
    height: calc(100vh - 60px);
}

.business.top {
    padding-top: 7vw;
}

.top_info_wrap {
	width: 90%;
	margin: auto;
}

.about_box {
  flex-direction: column;
  padding: 0;
}

.map {
  width: 95%;
  left: -5%;
  margin-top: 15vw;
  max-width: 100%;
}
.about_tx {
  width: 100%;
  padding-top: 10vw;
}

.content {
  width: 110vw;
}

.loop_slider {
  width: 100vw;
  position: relative;
  left: -5%;
  top: 10vw;
  padding-bottom: 25vw;
}

.slideshow li {
  margin-right: 7vw;
}

.season_inner {
  flex-direction: column;
  padding-bottom: 20vw;
}

.season_tx {
  max-width: 100%;
  width: 100%;
}

.swiper_sp_01,.swiper_sp_02 {
  width: 100%;
  overflow-x: hidden;
}

p.season_tx_01 {
  padding: 10vw 0;
}

p.season_tx_01.tx_02{
  padding: 10vw 0;
}

.menu_box {
  flex-direction: column;
  padding:15vw 0 15vw 0;
}

.menu_tx,.menu_img {
  width: 100%;
  max-width: 100%;
}

.menu_tx h3 {
  font-size: 1.7rem;
  padding-bottom: 1.2em;
  line-height: 2;
}

.menu_tx h2 {
  padding-bottom: 1.5em;
}
.menu_sp_tx span{
  text-indent: -1.5em;
  padding-left: 1.5em;
  display: inline-block;
  font-size: 1.4rem;
}
.menu_img {
  padding-top: 2vw;
  transition-delay: 0s;
}
.menu_img figure:first-child {
  padding-bottom: 3vw;
}
p.menu_sp_tx {
  padding-top: 2em;
}

.kobiki_mv {
  max-width: 1200px;
  margin: auto;
  width: 100vw;
  position: relative;
  left: -5vw;
}

.kobiki_box {
  max-width: 100%;
  width: 100%;
  flex-direction: column;
  padding: 20vw 0 20vw;

}
.kobiki_tx,.kobiki_img {
  width: 100%;
  max-width: 100%;
  transition-delay: 0s;
}

.kobiki_img {
  padding-top: 5vw;
}

.info_box {
  max-width: 100%;
  width: 100%;
  flex-direction: column;
}
.info_tx figure img,.ttl_sub img {
  height: 3.5vw;
}
.info_tx {
  width: 100%;
  max-width: 100%;
}
.info_tx h2 {
  padding-bottom: 1em;
}
.info_tx figure {
  padding-bottom: 5vw;
}

.info_tx p {
  line-height: 2;
}


.info_map {
  width: 100%;
  max-width: 100%;margin-top: 10vw;
}

.google-map iframe {
  height: 60vw;
}

.reserve_box h2 {
  font-size: 2rem;
  padding-bottom: 1.5em;
}

.reserve_link a {
  padding: 0 0 3vw;
}


.policy_box h2 {
  font-size: 2rem;
  padding-bottom: 0em;
}
  /* ---------------------
	footer sp
-----------------------*/
 
  .footer_box {
    padding: 4vw 0 4vw 0 ;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 
  .copyright {
    font-size: 1.4rem;
    padding: 0 0;
  }

  a.pagetop {
    width: 30px;
    bottom: 80vw;
    position: fixed;
    right: 4.5vw;
  }
  
	
  
  .r1 {
	  position: relative;
	  padding-top: 3vw;
	  right: initial;
	    }
 .r1 img {
	 height: 10vw;
	 }
}


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

h2 {
  font-size: 1.8rem;
  padding-bottom: 1.5em;
}

#season,#menu,#kobiki,#info,#reserve,#policy {
  margin-top: -120px;
  padding-top: 250px;
  
}

/*  sp top */
.opening {
	background: #393332;;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
	display: flex;
}
.opening p {
	position: fixed;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	max-width: 237px;
	width: 50%;
}
.slide_logo {
	position: absolute;
	width: 220px;
	top: 18%;
}

.h_logo img {
  width: auto;
  height: 20px;
	
}

  a.pagetop {
    bottom: 25vw;
  }

  .loop_slider {
    padding-bottom: 35vw;
  }

  .season_inner p {
    line-height: 2;
  }
  
.reserve_box p {
	text-align: left;
  }

.policy_box p {
	text-align: left;
  }
	
  .info_tx figure img, .ttl_sub img {
    height: 5vw;
}


  .copyright {
    font-size: 3vw;
    padding: 0 0 0;
  }
  
.r1 {
	left: 0px;
}


.r1 img {
		height: 46px;
}

	.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 9; /* 他の要素の下に隠れないように全面配置させます */
		
right: 9px; /* 右から40pxのところにバナーを配置します */
}
	.fixed_banner_sp {
display: inline-block; /* 消していたスマホ用のバナーを表示させます */
width: 13vw; /* スマホの画面幅いっぱいにバナーを表示させます */	
}
	.fixed_banner_pc {
display: none; /* PCではスマホ用のバナーは非表示にします */
}
	

}