@charset "utf-8";

/*
* Base
* Header
* Footer
* ページ遷移のアニメーション
*/

/* ==================================================

	Base

================================================== */
html {
  scroll-behavior: auto !important; /* cssのスムーススクロールをオフ */
}
body {
  background-color: #DBDBDB;
  color: #202020;
}
/* NEWS一覧・個別ページの背景色 */
body.blog,
body.single {
  background-color: #E8E8E8;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400; /* Bootstrap reset */
  line-height: 1.6; /* Bootstrap reset */
}

a, a:hover {
  color: #202020;
  text-decoration: none;
  cursor: pointer;
	transition-property: opacity;
	transition: 0.3s;
}
a:hover {
  opacity: 0.5;
}



/* ==================================================

  Header

================================================== */
header {
  position: absolute;
  top: 0;
  left: 0;
}

/* ハンバーガーメニューボタン
-------------------------------------------------- */
.nav-button {
  position: fixed;
  left: 0;
  top: 0;
  width: 110px;
  height: 74px;
  z-index: 199;
  padding: 30px 30px;
}
@media (max-width: 768px) {
  .nav-button {
    padding: 50px 20px;
  }
}
.nav-button-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start; /* 左寄せ */
  height: 12px;
  cursor: pointer;
  padding: 0;
}
.nav-button-line {
  display: block;
  height: 2px;
  background-color: #fff;
}
/* NEWS一覧・個別ページのlineの色 */
body.blog .nav-button-line,
body.single .nav-button-line {
  background-color: #202020;
}
/* lineの長さ */
.nav-button-line-top {
  width: 50px;
}
.nav-button-line-bottom {
  width: 30px;
}

/* クリックすると×に変形 */
.nav-button.active .nav-button-line-top,
.nav-button.active .nav-button-line-bottom {
  background-color: #fff !important; /* js-changecolorと競合するため */
  width: 50px;
  transition:
    transform 0.3s ease,
    width 0.3s ease;
}
.nav-button.active .nav-button-line-top {
  transform: rotate(30deg) translate(0, 6px);
}
.nav-button.active .nav-button-line-bottom {
  transform: rotate(-30deg) translate(0, -6px);
}

/* js-changecolor：色を背景に応じて切り替える
-------------------------------------------------- */
/* 暗い背景の時（初期値） */
.js-changecolor-navline .nav-button-line {
  background-color: #fff;
  transition: background-color 0.5s ease;
}
/* 明るい背景の時（classを追加） */
.js-changecolor-navline.is-lightbg .nav-button-line,
/* NEWS一覧・個別ページでは最初から黒に */
body.blog .js-changecolor-navline .nav-button-line,
body.single .js-changecolor-navline .nav-button-line {
  background-color: #202020;
}

/* フルスクリーンナビゲーション
-------------------------------------------------- */
/* 背景 */
.nav {
  background: #C1C0C0;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 198;
  /* 非表示にする */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* cssで表示 */
.nav.active {
  opacity: 1;
  visibility: visible;
}
.nav-inner {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  padding-left: 300px;
  align-items:center;
}
@media (max-width: 992px) {
  .nav-inner {
    padding-left: 200px;
  }
}
@media (max-width: 768px) {
  .nav-inner {
    padding-left: 30px;
  }
}

/* メニュー文字 */
.nav-list ul {
 list-style:none;
 margin:0;
 padding:0;
}
.nav-list li {
  display: block;
}
.nav-list a {
  display: inline-block;
  margin-top: 6px; /* メニュー文字の上下マージン */
  margin-bottom: 6px;
  padding: 0;
}
.nav-link {
 display: inline-block;
 color: rgba(255, 255, 255, 1.0);
 font-size: 6.5vh; /* 画面の高さに合わせて可変 */
 font-weight: 200 !important;
 line-height: 1;
}
.nav-link:hover,
.nav-link:focus {
 color: rgba(255, 255, 255, .5);
}
@media (max-width: 768px) {
  .nav-link {
    font-size: 10vw; /* 画面の横幅に合わせて可変 */
  }
}

/* RESERVATIONボタン
-------------------------------------------------- */
.nav-reservation-position {
 position: fixed;
 top: 0;
 right: 0;
 z-index: 199;
}
.nav-reservation {
 display: inline-block;
 float: right;
 margin: 0;
 padding: 0;
 color: #fff;
 font-size: 16px;
 line-height: 1;
 text-align: center;
}
.nav-reservation-button {
 width: 60px;
 height: 280px;
 /* 中央寄せ */
 display: flex;
 justify-content: center;
 align-items: center;
}
@media (max-width: 768px) {
 .nav-reservation-position {
   top: 0;
   right: 0;
   z-index: 197;
 }
}

/* js-changecolor：色を背景に応じて切り替える
-------------------------------------------------- */
/* 暗い背景の時（初期値） */
.js-changecolor-reservation {
  color: #fff;
  border: 1px solid #fff;
  transition: color 0.5s ease, border-color 0.5s ease;
}
/* 明るい背景の時（classを追加） */
.js-changecolor-reservation.is-lightbg,
/* NEWS一覧・個別ページでは最初から黒に */
body.blog .js-changecolor-reservation,
body.single .js-changecolor-reservation {
  color: #202020;
  border: 1px solid #202020;
}

/* navボタンをクリックしてメニューが開いた時 .is-navopen クラスを付与
-------------------------------------------------- */
.js-changecolor-reservation.is-navopen {
  color: #fff !important;
  border: 1px solid #fff !important;
}


/* ==================================================

	Footer

================================================== */

/* footerの上の画像
-------------------------------------------------- */
.footer-image {
  width: 100%;
  height: 768px;
  overflow: hidden; /* 画像のはみ出しを隠す */
}
.footer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 横幅100%、高さに合わせて画像をトリミング */
  display: block;
}
@media (max-width: 768px) {
  .footer-image {
    height: 100vh;
  }
}

/* footer
-------------------------------------------------- */
footer {
  background: #E8E8E8;
  padding: 180px 0 100px;
  margin: 0 auto;
  color: #202020;
}
footer .container {
  width: 760px;
}

/* footer-logo */
.footer-logo {
  margin-bottom: 135px;
  text-align: center;
}
.container .footer-logo img { /* 優先度のために.containerから記述 */
  width: 157px
}

/* footer-information */
.footer-information {
  font-size: 12px;
  line-height: 1.17;
}

/* footer-nav */
.footer-nav {
  margin-bottom: 55px;
}
.footer-nav .nav-link {
  margin-bottom: 25px;
  padding: 0;
  color: #202020;
  font-size: 20px;
  font-weight: 200;
  line-height: 1;
}

/* footer-copyright */
.footer-copyright {
  font-size: 10px;
}

@media (max-width: 992px) {
  footer {
    padding: 160px 0 100px;
  }
  footer .container {
    width: auto;
  }
  .footer-logo {
    margin-bottom: 96px;
  }
  .footer-information {
    margin-bottom: 80px;
  }
  .footer-copyright {
    text-align: center;
  }
}



/* ==================================================

	ページ遷移のアニメーション

================================================== */
.fade {
	animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}