@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  color: #333; /* RGB */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.8rem;
  text-align: center;
  background-color: #fcfcfc;
  letter-spacing: 0.05em;
	display: none;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
/* スマホの場合は改行を消す */
@media screen and (max-width:768px){
br.smart-wrap{
  display: none;
}
}
/* スマホの場合は改行を入れる */
@media screen and (min-width: 769px) { /*横幅が761px以上になったら適用*/
	.brSmt{ display: none; }
}
/*見出し*/

/*ナビゲーション*/
.header{width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
background-color: #868686;}

/*予約ボタン*/
.reservation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 10px;
  width: 150px;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
	  font-family: 'Sawarabi Mincho', serif;
	font-weight: 300;
  background-color: #Dd7342;
  transition: 0.3s;
	text-decoration: none;
}
.reservation::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 1px solid #fff;
  transition: 0.2s;
}
.reservation:hover::before {
  top: 0;
  left: 0;
}

.reservation:hover {
  text-decoration: none;
  background-color: rgba(255,255,255,0.3) ;
}

.header-title{position: absolute;top:10px;left: 20px;}
.reservation-button{position: absolute;top:10px;right: 20px;}
.nav-items{display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}
.nav-items__item a {
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 16px;
	  font-family: 'Sawarabi Mincho', serif;
	font-weight: 300;
padding: 0px 30px;
}
.nav-items__item a:hover{
  color:#Dd7342;
}
.nav-items__item {border-right: solid 1px #fff;}
.nav-items__item:last-of-type{border-right:none!important;}
.logo-inner{display: none;}
.reservation-inner{display: none;}

@media(max-width:1040px){.header__inner {
  padding: 0 20px; /*左右の余白確保*/
  display: flex; /*ロゴとハンバーガーメニューを横に並べる*/
  align-items: center;
  justify-content: space-between;
  height: inherit; /*親要素の高さを継承*/
  position: relative;
	
}
	.reservation{
		font-size: 1.4rem;
	padding: 5px 10px;
	width: 130px;}
	
	.reservation::before{width: calc(100% - 1px);
    height: calc(100% - 1px);}
	.reservation-button{position: absolute;top:15px;right: 50px;}
.reservation-inner{display: block;
	position: absolute;
	top:55%;
	left: 50%;
	transform: translate(-50%,-50%);}
/* ヘッダーのロゴ部分 */
.header__title {
  width: 100px;
	top:15px;
}

.header__title img {
  display: block;
  width: 100%;
  height: 100%;
	
}
/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
	z-index: 1000;
  width: 100%;
  height: 100vh;
  transform: translateX(100%); 
  background-image:url("../images/hamburger.png");
	background-size: cover;/*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
  transition: ease .4s; /*ハンバーガーメニュークリック時のナビゲーションメニュー出現を遅延*/
}
/* ハンバーガーメニュー */
.header__hamburger {
  width: 28px;
  height: 100%;
	position: absolute;
	top: 10px;
	right: 10px;
}

.hamburger {
  background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
  z-index: 9999;
	position: absolute;
	top: 5px;
	right: 10px;
}
	
	.hamburger span {
  width: 100%;
  height: 1px;
		border-radius: 50px;
  background-color: #fff;
  position: relative;
  transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
  display: block;
}
	.hamburger span:nth-child(1)::after{content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
		 font-family: 'Marcellus', serif;
	position: absolute;
	top:-23px;
	left:0px;
	color: #fff;
	font-size: 6px;
	text-transform: uppercase!important;}
.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}
/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
	
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
	.hamburger.active span:nth-child(1)::after{
		content: "Close";
		top:2px;
	left:14px;
		 transform: translateY(0) rotate(-45deg);
		text-transform: uppercase!important;
	
	}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}
.nav-items {
	display: block;
  padding: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
}
	.logo-inner{display: block;
	margin:40px auto 0;}/*ハンバーガー内のボタンの記述*/

/* ナビのリンク */
.nav-items__item a {
  color: #fff;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 16px;
	  font-family: 'Sawarabi Mincho', serif;
	font-weight: 300;
  margin-bottom: 24px;
	
	padding: 0;
}
	.nav-items__item{border: none;}

.nav-items__item:last-child a {
  margin-bottom: 0;
}
}

footer {
	width:100%;
  padding-top: 80px;
  padding-bottom: 10px;
  background-image: url("../images/footer-bg.jpg");
  background-size: cover;
  margin: 0;
}
.footer-content__wrapper {
  display: flex;
  max-width: 1040px;
  justify-content: center;
  margin: 0 auto 60px;
  width: 70%;
}
@media(max-width:768px){
	.footer-content__wrapper{display: block;
	margin: 0 auto;}
	footer{padding-top: 30px!important;}
}
/*アクセス*/
.access {
  color: #fff;
  padding-right: 100px;
}

.access h3 {
  margin-top: 0;
  text-align: left;
  font-family: 'Marcellus', serif;
  font-size: 60px;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
  font-weight: 300;
  position: relative;
}
@media(max-width:768px){
	.access{padding-right: 0;
	margin-bottom: 40px;}
	.access h3{font-size: 4.0rem!important;
	margin-bottom: 30px;
	text-align: center;}
}
.access p {
  text-align: left;
  margin-bottom: 30px;
}
.big-size {
  font-size: 2.4rem;
}


/*コンタクト*/
.contact h3 {
  margin-top: 0;
  text-align: left;
  font-family: 'Marcellus', serif;
  font-size: 60px;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
  font-weight: 300;
  position: relative;
}
.contact p {
  text-align: left;
  margin-bottom: 20px;
}
.contact {
  color: #fff;
  padding-left: 100px;
}


@media(max-width:768px){
	.contact{padding-left: 0;
	margin-bottom: 40px;
	}
	.contact h3{font-size: 40px;
	margin-bottom: 30px;
	text-align: center;}
}
.instagram{display: flex;align-items: center;}
@media(max-width:768px){
	.instagram{display: block;}
}
.instagram img{padding-right: 20px;}
.copyright {
  color: #fff;
  margin: 0;
}

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime2;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime2{
  from {
    opacity: 0;
  transform: translateY(10px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}