/* CSS Document */
@import url(//use.fontawesome.com/releases/v5.0.11/css/all.css);

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  font-size: 15px;
  line-height: 1.8;
  word-break: normal;
	overflow-x:hidden;
}

a {
  color: #7db9e7;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:hover img {
  text-decoration: none;
  opacity: 0.8;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

img, video, object {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
  display: block;
}

#backToTop {
  position: fixed;
  z-index: 9998;
  bottom: 25px;
  right: 25px;
}

#backToTop a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 4px 15px;
	font-size:22px;
  background-color: #000;
}

.clear{
	clear:both;
}
.right{
	display:block;
	text-align:right;
}
.unohana{
	background:#FBFBF6;
}
.shu{
	background:#D72500;
}
.shu_txt{
	color:#D72500;
}
.shu_txtBG{
	background: linear-gradient(transparent 75%, #D72500 0%); 
}
.ul{
	text-decoration:underline;
}
.bold{
	font-weight:bold;
}
.txt_big{
	font-size::120%;
}
#booking h3{
	text-decoration:underline;
	font-weight:bold;
	font-size:110%;
	color:#888;
}

#booking li{
	padding:0 0 0.8em 1em;	
	line-height:140%;
	text-indent: -1em;
	list-style:none;
}
#booking li:before{
	content: "-";
	margin:0 0.7em 0 0;
}
#booking li a{
	color:#D72500;
	text-decoration:underline;
}

.button01 {
	padding: 12px 0 8px 0;
	text-align:center;
	font-weight:600;
	background:#D72500;
	width:25%;
	margin:0 auto;
  font-family: 'Poppins', sans-serif;
  -webkit-transition: background-color .8s, -webkit-transform .8s;
  transition: background-color .8s, transform .8s;
	border:solid 1px #D72500;
}
.button01 a,.button01 a:link {
	text-decoration:none;
	font-size:120%;
	color: #FFF;
}
.button01 a:hover{
	color:#D72500;
}
.button01:hover{
	color:#D72500;
	background-color:#FBFBF6;
}



/*--------------------------------
　全体
---------------------------------*/

.inner {
  max-width: 86%;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}


 .text.delighter {
      transition: all .5s ease-out;
      transform: translateY(50px);
      opacity: 0;
   }

   /* the .started class is set when the top
      of [data-delighter] is at 0.75 of the viewport 
      (where 0 is top and 1 is bottom) */

   .text.delighter.started {
      transform: none;
      opacity: 0.8;
   }
   .text.delighter.started.ended {
      opacity: 1;
   }
@media screen and (max-width: 959px){
.inner {
  max-width: 95%;
}
}

.button {
		border: none;
		padding: 2px;
		cursor: pointer;
		display: block;
		position: relative;
		overflow: hidden;
		transition: all .35s ease-in-out .35s;
	  width: 150px;
	  text-align: center;
		font-family: 'Poppins', sans-serif;
		font-weight:600;
	}
.button-wrapper {
	display: inline-block;
}
.button span {
		display: block;
		padding: 15px 30px;
		z-index: 99;
		position: relative;
		transition: all .35s ease-in-out .35s;
	}
.button:hover span {
		transition: all .35s ease-in-out .35s;
	}
.button:after {
		bottom: -100%;
		right: -100%;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		transition: all .35s ease-in-out .5s;
}
.button:hover:after {
		right: 0;
		bottom: 0;
		transition: all ease-in-out .35s;
	}
.button:before {
		top: -100%;
		left: -100%;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		transition: all .35s ease-in-out .5s;
	}
.button:hover:before {
		left: 0;
		top: 0;
		transition: all ease-in-out .35s;
	}
.button a {
  color: #000;
}
.button a:hover {
  text-decoration: none;
}

/*--------------------------------
　header
---------------------------------*/
#header{
	text-align:center;
	height:662px;
	background:linear-gradient(90deg,#FBFBF6 0%,#FBFBF6 88%,#fff 88%,#fff 100%);
}
#header .logo{
	width:266px;
	margin:0 auto;
	padding:130px 0;
}

#header .text{
	font-family:"sitka banner", 'Lora', serif;
	font-size:24px;
	letter-spacing:2px;
}

@media screen and (max-width: 959px){
#header .text{
	font-size:18px;
}	
}
/*--------------------------------
　globalnavi
---------------------------------*/
#g-nav .header_button, #g-nav .header_button2 {
  position: fixed;
	height:50px;
	line-height:40px;
  z-index: 100;
  font-family: 'Poppins', sans-serif;
	font-weight:600;
	padding:0.3em;
	width:142px;
	top:10px; right:70px;
	color:#333;
	background-color:#fff;
	border:solid 1px #FBFBF6;
	text-align:center;
  -webkit-transition: background-color .8s, -webkit-transform .8s;
  transition: background-color .8s, transform .8s;
}
#g-nav .header_button2{
	top:10px; right:222px;
}


  /*#g-nav .header_button:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0e0";
    font-weight: 900;
		margin-right:0.4em;
   }*/
#g-nav .header_button:hover, #g-nav .header_button2:hover {
	color:#fff;
	background:#D72500;
	text-decoration:none;
}
@charset "UTF-8";
/* トグルボタン */
#togglenav {
  display: none; }
  #togglenav:checked + .togglenav-btn {
    background-color: #495057; }
  #togglenav:checked + .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00d";
    font-weight: 900;
    font-size: 2em; }
  #togglenav:checked ~ .togglenav-bg {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.3); }

.togglenav-btn {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 102;
  width: 50px;
  height: 50px;
  color: #333;
  background-color: #fff;
	border:solid 1px #FBFBF6;
  line-height: 50px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s; }
  .togglenav-btn:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0c9";
    font-weight: 900;
    font-size: 2em; }
.togglenav-btn:hover {
	background:#efefef;
}

/* トグルを押した際の背景 */
.togglenav-bg {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  pointer-events: none;
  z-index: 101;
  width: 100%;
  height: 100%;
  transition: background-color .6s; }

/* ドロワーメニュー */
.drawer {
  z-index: 101;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s; }
  .drawer .drawer-menu {
    padding: 0;
    list-style-type: none; }
    .drawer .drawer-menu .drawer-menu-item {
      font-size: 14px; }
      .drawer .drawer-menu .drawer-menu-item a {
        display: block;
        padding: 1em 2em;
        text-decoration: none;
        transition: background-color 0.4s;
        cursor: pointer;
        color: #333; }
        .drawer .drawer-menu .drawer-menu-item a:hover {
          background-color: #eee;
          color: #666; }
        .drawer .drawer-menu .drawer-menu-item a:before {
          font-family: 'Font Awesome 5 Free';
          content: "\f105";
          font-weight: 900;
          font-size: 1em;
          margin: 0 0.5em 0 0; }

#togglenav:checked ~ .drawer {
  -webkit-transform: translateX(0);
  transform: translateX(0); }



/*--------------------------------
　section
---------------------------------*/

.section {
  background-color: #FFF;
  padding: 80px 0;
}
.section h2{
	font-family:"sitka banner", 'Lora', serif;
}
.section .text{
	font-family: 'Poppins', sans-serif;
	font-weight:300;
}
.section:after, .section:before{
    content: "";
    clear: both;
    display: block;
}
/*--------------------------------
　intro
---------------------------------*/
#intro{
	position:relative;
}
#intro .img_intro{
	margin:-220px 0 2em auto;
}
#intro .title{
	font-size: 28px;
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	letter-spacing:1px;
}
#intro .text{
	width:80%;
}
#intro .rotate{
	position: absolute;
	right:-50px; bottom:-50px;
}
@media screen and (max-width: 764px){
	#header{
	height:600px;
	background:#FBFBF6;
	}
	.section {
  padding:0;
	}
	#intro{
	overflow:hidden;
	padding-bottom:2em;
	}
	#intro .img_intro{
	margin:0 0 1em 0;
	width:100%;
	}
	#intro .text{
	width:100%;
	}
	#intro .rotate{
	right:-80px; bottom:-50px;
	width:200px;
	}
}
/*--------------------------------
　menu
---------------------------------*/
#menu{
	background:#FBFBF6;
	padding-bottom:200px;
}
#menu .menuBox{
	width:50%;
	float:left;
}

#menu .title{
	font-size: 120px;
	color:#F8EAE3;
	margin:0 0 0 -0.3em;
}
#menu .inner {
  /*padding-left:14%;*/
}
.comment{
	margin-top:0.5em;
	font-size:90%;
}
.menuImg02,.menuImg04,.menuImg06,.menuImg08{
	width:30%;
	max-width:300px;
	float:left;
}
.menuImg03,.menuImg05,.menuImg07,.menuImg09{
	width:40%;
	max-width:300px;
	float:left;
}


 .menuImg02.delighter,.menuImg06.delighter {
      transition: all .5s ease-out;
      transform: translateY(50px);
      opacity: 0;
   }
   .menuImg02.delighter.started ,.menuImg03.delighter.started,.menuImg04.delighter.started ,.menuImg05.delighter.started,.menuImg06.delighter.started ,.menuImg07.delighter.started,.menuImg08.delighter.started ,.menuImg09.delighter.started  {
      transform: none;
      opacity: 0.8;
   }
   .menuImg02.delighter.started.ended,.menuImg03.delighter.started.ended,.menuImg04.delighter.started.ended,.menuImg05.delighter.started.ended,.menuImg06.delighter.started.ended,.menuImg07.delighter.started.ended,.menuImg08.delighter.started.ended,.menuImg09.delighter.started.ended {
      opacity: 1;
   }

 .menuImg03.delighter,.menuImg07.delighter {
      transition: all .9s ease-out;
      transform: translateY(80px);
      opacity: 0;
   }

 .menuImg04.delighter,.menuImg09.delighter {
      transition: all .3s ease-out;
      transform: translateY(40px);
      opacity: 0;
   }


@media screen and (max-width: 764px){
#menu{
	padding-bottom:70px;
	overflow:hidden;
}
#menu .menuBox{
	width:100%;
	float:none;
}
#menu .menuImg01{
	width:100%;
}
#menu .title{
	font-size: 80px;
	margin:0;
}
#menu .button-wrapper{
	width:48%;
	margin-right:1%;
}
#menu .button{
	width:100%;
}
}

/*--------------------------------
　drink
---------------------------------*/

#drink{
	position:relative;
}
#drink .drink_bg{
	position: absolute;
	top:-10%;left:18%;
	z-index:1;
}
#drink .drink_img{
	position:relative;
	margin-top:-5%;margin-left:35%;
	z-index:2;
}
#drink .title{
	position:relative;
	z-index:3;
	margin-top:-0.8em;
	font-size: 80px;
	color:#CCC;
	text-shadow: 1px 1px 0 #fff,
							 -1px 1px 0 #fff,
							 1px -1px 0 #fff,
							 -1px -1px 0 #fff;
}
#menu .button, #drink .button {
		background: #000;
}
#menu .button span, #drink .button span {
		background: #fff;
}
#menu .button:before, #drink .button:before {
		background: #fff;
}
#menu .button:after, #drink .button:after {
		background: #fff;
}
#menu .button:hover span, #drink .button:hover span {
		background: #000;
		color: #fff;
}
#menu .button a, #drink .button a{
		color: #000;
}
#menu .button a:hover, #drink .button a:hover{
		color: #fff;
}
#drink .button02{
	width:200px;
}
#drink .button03{
	width:340px;
}
@media screen and (max-width: 764px){
	#drink{
	padding:0 0 70px 0;
	}
	#drink .drink_bg{
		display:none;
	}
	#drink .drink_img{
		position:relative;
		margin-top:0%;margin-left:0%;
	}
#drink .buttonW01{
	width:15%;
	margin-right:0.5%;
}
#drink .buttonW02{
	width:25%;
	margin-right:0.5%;
}
#drink .buttonW03{
	width:55%;
}
#drink .button{
	width:100%;
}
#drink .button span {
		padding: 15px 0;
}
}
/*#drink h3{
  font-family: 'Poppins', sans-serif;
	font-weight:100;
	font-size: 28px;
}*/

/*.box {
  position: relative;
  width: 50%; height: 30vh;
  background: #ec484d; margin: 10px; box-shadow: 0 0 10px rgba(0,0,0,.3);
  text-align: center;
  color: #fff;
  font-size: 0.8em;
  padding: 10px;
}
.box:nth-child(2) { background: #f8c82d; }
.box:nth-child(3) { background: #0aba58; }
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }*/

/*--------------------------------
　about
---------------------------------*/
#about{
	position:relative;
	background:linear-gradient(90deg,#fff 0%,#fff 5%,#FBFBF6 5%,#FBFBF6 33%,#fff 33%,#fff 100%);
	margin-bottom:2em;
}
#about .about_img{
	position:relative;
}
#about .about_img01{
	position:relative;
	top:0;left:10%;
	width:75%;
	z-index:1;
}
#about .rotate{

}
#about .kaz01{
	position: absolute;
	right:6%; top:108%;
	z-index:2;
}
#about .kaz02{
	position: absolute;
	right:4%; top:35%;
	z-index:2;
}
#about .kaz03{
	position: absolute;
	right:2%; top:20%;
	z-index:2;
}
#about .title{
	text-align:center;
	margin:1em 0 0.8em 0;
	font-size:42px;
}
#about .about_text01{
	text-align:center;
}
#about .about02:after, #about .about02:before, #about .about03:after, #about .about03:before {
    content: "";
    clear: both;
    display: block;
}
#about .about02, #about .about03{
	margin-top:5em;
	font-size:18px;
}
#about .about_img02{
	float:left;
	width:35%;
	margin-right:2%;
}
#about .about_text02{
	float:left;
	width:63%;
}

#about .about_img03{
	float:left;
	width:40%;
	margin-right:2%;
	margin-left:5%;
}
#about .about_text03{
	float:left;
	width:53%;
}
@media screen and (max-width: 764px){
#about .kaz01, .kaz02, .kaz03{
	display:none;
}
#about .about02, #about .about03{
	margin-top:3em;
}
#about .about_img01{
	top:0;left:0;
	width:100%;
	z-index:1;
}

#about .about_img02{
	float:none;
	width:100%;
	margin-right:0%;
	margin-bottom:0.5em;
}
#about .about_text02{
	float:none;
	width:100%;
}

#about .about_img03{
	float:none;
	width:100%;
	margin-right:0%;
	margin-left:0%;
	margin-bottom:0.5em;
}
#about .about_text03{
	float:none;
	width:100%;
}

}

/*--------------------------------
　contact
---------------------------------*/
#contact{
	background:#D72500;
	color:#FFF;
	position:relative;
}
#contact a{
	color:#FFF;
}
#contact h2{
	letter-spacing:1.5px;
	margin-bottom:1em;
}
#contact .text{
	width:30%;
	float:left;
}
#contact i{
	font-size:18px;
	margin-right:0.5em;
}
#contact .address, .tel, .mail{
	margin-bottom:1em;
}
#contact .address{
padding-left:2em;
text-indent:-1em;

}

#contact .sns i{
	font-size:28px;
	margin-top:1em;
	margin-bottom:2em;
}

#contact h3{
	clear:both;
	margin-top:2em;
	font-size:22px;
	letter-spacing:0.5px;
}

#contact .grouplink{
	float:left;
	margin-right:20px;
	margin-bottom:2em;
}

/*#contact .googlemap{
	position:absolute;
	top:50%; right:-10%;
	width:60%;
	height:600px;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}*/

#contact .outer_gm {
	position:absolute;
	top:50%; right:0;
	width:40%;
	height:90%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);}
#contact .googlemap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	height:100%;
}
@media screen and (max-width: 1000px){
	#contact .text{
		width:100%;
		float:none;
	}
	#contact .outer_gm {
		position:relative;
		width:100%;
		height:280px;
		transform: translateY(0%);
		-webkit- transform: translateY(0%);
		clear:both;
	}
	#contact .outer_gm:before {
		clear:both;
	}

}

#contact .googlemap iframe,
#contact .googlemap object,
#contact .googlemap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#contact .button {
		background: #fff;
}
#contact .button span {
		background: #D72500;
}
#contact .button:before {
		background: #D72500;
}
#contact .button:after {
		background: #D72500;
}
#contact .button:hover span {
		background: #fff;
		color: #D72500;
}
@media screen and (max-width: 767px) {
	#contact address{
	padding-bottom:1em;
	}
	#contact h2{
		padding:40px 0 0 0;
	}
	#contact .grouplink{
	width:32%;
	margin-right:1%;
	}
}


/*--------------------------------
  Footer
---------------------------------*/

#footer {
  background-color: #FFF;
	clear:both;
}

#footer .inner {
  padding: 0.5em 0 0 0;
}

#footer .copyright {
  font-size: 14px;
}

#footer .copyright a {
  color: #000;
}
/*--------------------------------
  モーダルウインドウ
---------------------------------*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
		background:#FBFBF6;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: calc(50% - 1.5em);
    transform: translate(-50%,-50%);
    width: 60%;
		margin:1.5em auto;
		max-height: calc(100vh - 1.5em);
		overflow: auto;
	  z-index: 9999;
}
.modal__content .button{
	color:#FFF;
	background:#D72500;
  -webkit-transition: background-color .8s, -webkit-transform .8s;
  transition: background-color .8s, transform .8s;
}
.modal__content .button a{
	color:#FFF;
}
.modal__content .button:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0e0";
    font-weight: 900;
		margin-right:0.4em;
}
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

/*media Queries 767
----------------------------------------------------*/

@media screen and (max-width: 767px) {
.modal__content{
    padding: 30px 10px;
    width: 80%;
		-webkit-overflow-scrolling: touch ;
}
	}

/*--------------------------------
　booking
---------------------------------*/
.logo_svg{
	padding:10px 0 0 10px;
}

#booking{
	position:relative;
	background:linear-gradient(90deg,#fff 0%,#fff 5%,#FBFBF6 5%,#FBFBF6 33%,#fff 33%,#fff 100%);
}
#booking .title{
	text-align:center;
	margin:0 0 0.8em 0;
	font-size:42px;
}
#booking p{
	margin-top:3em;
	font-size:18px;
}
#booking .button{
	color:#FFF;
	background:#D72500; 
  -webkit-transition: background-color .8s, -webkit-transform .8s;
  transition: background-color .8s, transform .8s;
}
#booking .button a{
	color:#FFF;
}
#booking .button:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f0e0";
    font-weight: 900;
		margin-right:0.4em;
}
.list li{
	padding-left: 1em;
	position: relative;
	list-style-type: none;
}

.list li:before {
    content: '-';
    position: absolute;
    left: 0;
}
.caution{
	margin:1em;
}
.caution li{
	padding:0 0 0.8em 1em;	
	line-height:140%;
	text-indent: -1em;
	list-style-type: none;
}
.caution li:before{
    font-family: 'Font Awesome 5 Free';
    content: "\f12a";
    font-weight: 900;
	margin:0 0.7em 0 0;
	color:#D72500;
}
#booking  .border{
	border:solid 0.5px #666;
	padding:1em;
	margin:1em 0;
}

/*--------------------------------
　message
---------------------------------*/
#message {
	position:relative;
	float:none;
	width:100%;
	margin:-200px auto 100px auto;
	padding:1em 40px;
}
#message:after {
	clear:both;
}
#message iframe{
	scroll:none;
	height:auto;	
}
#news{
	padding:1em 40px;
	margin:0 auto;
	width:100%
	text-align:center;
	/*border:solid 2px #D72500;*/
}
#news h2{
	font-size:115%;
	color:#D72500;
	text-align:center;
}
#news p{
	margin-bottom;:-2em;
	text-align:center;
}

@media screen and (max-width: 767px) {
	#message{
			margin:-150px 0 1.5em 0;
	}
}