@charset "UTF-8";
/* ========================================================================== 
[Table of contents]
01. Color set
02. Fonts settings
03. Basic settings
05. Header styles
06. Page styles
07. Footer styles
08. Module set
09. Responsive

========================================================================== */
/*** 01. Color set
========================================================================== */
/*-- Variable declaration --*/
/*-- text color --*/
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:500,600&display=swap");
.text-red {
  color: #c9171e; }

.text-gold {
  color: #9f7912; }

.text-basic {
  color: #56412e; }

.text-light-basic {
  color: #7b5c40; }

.text-dark-basic {
  color: #39322c; }

.text-green {
  color: #4f705a; }

.text-light-green {
  color: #215e34; }

.text-dark-green {
  color: #223829; }

.text-blue {
  color: #3187a6; }

.text-light-blue {
  color: #67a2b7; }

.text-dark-blue {
  color: #024861; }

/*-- background color --*/
.bg-dark-gray {
  background-color: #222; }

/* ======================================================================= */
/*** 02. Fonts settings
========================================================================== */
body {
  font-family: 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; }

p, span, ul, ol, dl, li {
  font-family: 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; }

.gothic {
  font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif; }

a {
  font-family: 'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; }

h1, .h1 {
  font-size: 1.5rem !important; }

h2, .h2 {
  font-size: 1.4rem !important; }

h3, .h3 {
  font-size: 1.3rem !important; }

h4, .h4 {
  font-size: 1.2rem !important; }

h5, .h5 {
  font-size: 1.1rem !important; }

h6, .h6 {
  font-size: 1rem !important; }

/* ======================================================================= */
/*** 03. Basic settings
========================================================================== */
html {
  background: none #FFF;
  line-height: 1.5;
  font-size: 16px;
  color: #010101; }

body {
  margin: 0;
  padding: 0;
  color: #010101;
  /*min-width: 1280px;*//*★*/
  background-image: url("../images/background-01.png"); }

h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  line-height: 1.5;
  font-weight: 600; }

p, ul, li, a {
  font-size: 1rem;
  font-weight: 500; }

.main p, .main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
  text-shadow: 0 0 2px #FFF, 0 0 10px #FFF; }

::selection {
  background: #555;
  color: #FFF; }

::-moz-selection {
  background: #555;
  color: #FFF; }

a {
  color: #56412e;
  text-decoration: underline;
  transition: all .5s; }

a:hover {
  color: #555;
  text-decoration: transparent; }

a img {
  opacity: 1;
  transition: opacity .8s; }

a:hover img {
  opacity: 0.8; }

/* ======================================================================= */
/*** 05. Header styles
========================================================================== */
.header {
  position: relative;
  height: 900px; }

.header::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background-image: url("../images/leaf-01.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 230px;
  height: 220px;
  z-index: 500; }

.header::after {
  position: absolute;
  right: 0;
  bottom: 50px;
  content: "";
  background-image: url("../images/leaf-02.png");
  background-repeat: no-repeat;
  background-position: top left;
  width: 230px;
  height: 220px;
  z-index: 2000; }

.header .site-navigation {
  position: absolute;
  width: 384px;
  height: 650px;
  top: 40px;/*★*/
  left: 60px;
  text-align: center;
  background-image: url("../images/bg-header-nav.png");
  background-repeat: no-repeat;
  z-index: 1000; }

.header .site-navigation .logo {
  padding-top: 70px;
  padding-bottom: 20px; }

.header .site-navigation .main-menu {
  overflow: hidden;
  display: inline;
  max-height: 280px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; }

.header .site-navigation .main-menu ul {
  margin: 0;
  padding: 0; }

.header .site-navigation .main-menu ul li a.nav-link {
  display: block;
  padding: .25rem .4rem; }

.header .site-navigation .tel {
  padding: 5px 0; }

.header .site-navigation .booking {
  padding: 5px 0; }

.header .site-navigation .booking a {
  display: block; }

.header .page-headline {
  position: absolute;
  overflow: hidden;
  width: 100%;
  text-align: center;
  line-height: 840px;
  height: 840px;
  z-index: 400; }

.header .page-headline h1 {
  margin: 0;
  padding: 0.5rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.1); }

/* movie
-------------------------------------------------------------------- */
.home .movie {
  position: relative;
  width: 100%;
  height: 900px;
}

.home .movie video{/*★*/
	position: absolute;
	bottom: 0;
	left: 0;
	object-fit: cover;
	width: 100%;height: 100%;
}

/*.header .movie {
  overflow: hidden;
  height: 840px; }

.video-js .vjs-tech {
  position: fixed;
  background-attachment: fixed;
  background-position: center center; }*/

/* search
-------------------------------------------------------------------- */
.search {
  position: absolute;
  bottom: -100px;
  height: 200px;
  width: 100%;
  background-image: url("../images/bg-search.png");
  z-index: 3000; }

.search .search-box {
  padding-top: 60px; }

.search .caption {
  margin: 1rem;
  text-align: center; }

/* ======================================================================= */
/*** 06. Page styles
========================================================================== */
.site {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: auto; }

.container {
  min-width: 1200px; }

.home .photo{
	height: 186px;
}

/* message
-------------------------------------------------------------------- */
.message {
  position: relative;
  overflow: hidden;
  background-image: url("../images/bg-message.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  max-height: 860px; }

.message::after {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  background-image: url("../images/leaf-04.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 230px;
  height: 220px; }

.message::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/leaf-03.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 230px;
  height: 220px; }

.message .text-box {
  max-height: 38rem;
  line-height: 2.25rem; }

/* megumi
-------------------------------------------------------------------- */
.megumi {
  position: relative;
  margin: 60px 0; }

.megumi::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/leaf-05.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 160px;
  height: 320px; }

.megumi .text-box {
  max-height: 20rem;
  line-height: 2.25rem; }

.megumi .text-right{text-align: center !important;}
.megumi .mr-5{margin-right: 0 !important;}

/* plan
-------------------------------------------------------------------- */
.plan {
  padding: 60px 0;
  background-image: url("../images/background-02.png"); }

.plan .card {
  font-size: 1.25rem;
  border-radius: 1rem;
  background-image: url("../images/background-01.png"); }

.plan .card p {
  overflow: hidden;
  max-height: 10rem;
  font-size: 0.9rem;
  line-height: 1.25rem; }

/* banner
-------------------------------------------------------------------- */
.banner {
  margin: 60px 0; }

/* ryouri
-------------------------------------------------------------------- */
.ryouri .card {
  font-size: 1.25rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.4); }

.ryouri-summary {
  position: relative;
  margin-top: 150px; }

.ryouri-summary::after {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  background-image: url("../images/leaf-06.png");
  background-repeat: no-repeat;
  background-position: top left;
  width: 160px;
  height: 400px; }

.ryouri-summary .text-box {
  max-height: 24rem;
  line-height: 2.25rem; }

.ryouri-yusyoku {
  position: relative; }

.ryouri-yusyoku::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background-image: url("../images/leaf-05.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 160px;
  height: 320px; }

.ryouri-yusyoku::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/leaf-09.png");
  background-repeat: no-repeat;
  background-position: top left;
  width: 120px;
  height: 320px; }

.ryouri-yusyoku .text-box {
  max-height: 32rem;
  line-height: 2.25rem; }

.one-dish {
  position: relative; }

.one-dish::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background-image: url("../images/leaf-07.png");
  background-repeat: no-repeat;
  background-position: top right;
  width: 160px;
  height: 400px; }

.one-dish .text-box {
  max-height: 32rem;
  line-height: 2.25rem; }

.ryouri-zibie {
  position: relative; }

.ryouri-zibie .text-box {
  max-height: 30rem;
  line-height: 2.25rem; }

.ryouri-choshoku {
  position: relative; }

.ryouri-choshoku::before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/leaf-10.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100px;
  height: 320px; }

.ryouri-saien {
  position: relative; }

.ryouri-saien::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  background-image: url("../images/leaf-08.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 120px;
  height: 400px; }

.ryouri-saien .text-box {
  max-height: 20rem;
  line-height: 2.25rem; }

.adjust01{
	width: 820px;
}

.ryouri .modal-dialog{
	flex-basis: 682px !important;
	margin: 0 !important;
}

.ryouri header{
	background: url(../images/ryouri/header-img.jpg) no-repeat center;
	background-size: cover;
}

/* sesso
-------------------------------------------------------------------- */
.sesso header{
	background: url(../images/sesso/header-img.jpg) no-repeat center;
	background-size: cover;
}

.onsen .text-box {
  max-height: 34rem;
  line-height: 2.25rem; }

/* okuooi
-------------------------------------------------------------------- */
.okuooi header{
	background: url(../images/okuooi/header-img.jpg) no-repeat center;
	background-size: cover;
}

/* access
-------------------------------------------------------------------- */
.access-map {
  margin-top: 150px; }
.access header{
	background: url(../images/access/header-img.jpg) no-repeat center;
	background-size: cover;
}

.access h2 {
  padding-bottom: 0.25rem;
  border-bottom: 3px solid #2a231f; }

/* ryoukin
-------------------------------------------------------------------- */
.ryoukin-info {
  margin-top: 150px;
  margin-bottom: 50px; }
.ryoukin header{
	background: url(../images/ryoukin/header-img.jpg) no-repeat center;
	background-size: cover;
}

.ryoukin h2 {
  padding-bottom: 0.25rem;
  border-bottom: 3px solid #2a231f; }

/* spot
-------------------------------------------------------------------- */
.spot {
  margin-top: 150px;
  margin-bottom: 50px; }

.spot h2 {
  padding-bottom: 0.25rem;
  border-bottom: 3px solid #2a231f; }

/* movie
-------------------------------------------------------------------- */
.page-video {
  min-width: 100%;
  height: auto; }

/* ======================================================================= */
/*** 07. Footer styles
========================================================================== */
.footer-menu {
  margin: 15px 0; }

.footer-menu li {
  padding: 0 10px;
  background-image: url("../images/footer-menu-line.png");
  background-repeat: no-repeat;
  background-position: right center; }

.footer-menu li:last-of-type {
  background-image: none; }

.footer-menu li a {
  display: block;
  padding: 10px;
  font-weight: bold;
  text-decoration: none; }

.footer {
  min-height: 240px;
  background-image: url("../images/bg-footer.png");
  background-repeat: repeat-x;
  background-position: bottom center; }

.footer a{color: #fff;text-decoration: none;}

.footer p {
  margin: 0.5rem 0;
  color: #FFF; }

.footer .logo,
.footer .information {
  margin-top: 80px; }

.footer .copyright {
  margin-top: 50px;
  margin-bottom: 10px;
  text-align: center;
  color: #FFF;
  font-size: 0.8rem; }

/* page-to-top
-------------------------------------------------------------------- */
.page-to-top {
  position: fixed;
  text-align: center;
  bottom: 120px;
  right: 0;
  z-index: 1500;
  color: #FFF;
  font-size: 0.75rem; }

.page-to-top a {
  display: block;
  padding-top: 0.5rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.8);
  width: 60px;
  height: 60px;
  line-height: 1;
  text-decoration: none;
  font-size: 0.75rem; }

.page-to-top a span {
  display: block; }

.page-to-top a:hover {
  background-color: rgba(0, 0, 0, 0.7); }

/* ======================================================================= */
/*** 08. Module set
========================================================================== */
.rl {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  text-align: left; }

.mt-50 {
  margin-top: 50px; }

.mt-100 {
  margin-top: 100px; }

.mt-150 {
  margin-top: 150px; }

.mb-50 {
  margin-bottom: 50px; }

.mb-100 {
  margin-bottom: 100px; }

.mb-150 {
  margin-bottom: 150px; }

.my-50 {
  margin-top: 50px;
  margin-bottom: 50px; }

.my-100 {
  margin-top: 100px;
  margin-bottom: 100px; }

.pt-50 {
  padding-top: 50px; }

.pt-100 {
  padding-top: 100px; }

.pt-150 {
  padding-top: 150px; }

.pb-50 {
  padding-bottom: 50px; }

.pb-100 {
  padding-bottom: 100px; }

.pb-150 {
  padding-bottom: 150px; }

.py-50 {
  padding-top: 50px;
  padding-bottom: 50px; }

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px; }

.justify {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center; }

.font-size-0 {
  font-size: 0; }

/* button
---------------------------------------------*/
.button {
  display: inline-block;
  margin: 0 auto;
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  background-color: #222; }

.button:hover {
  color: #FFF;
  background-color: #555; }

.button::before {
  content: '\f35a';
  margin-right: 0.5rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900; }

/* Google map
---------------------------------------------*/
.google-map {
  position: relative;
  max-width: 100%;
  /*min-width: 1024px;*//*★*/
  padding: 56.25% 0 0; }

.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 640px; }

/* table
---------------------------------------------*/
table.normal {
  margin: 0 auto 1rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 1rem; }

table.normal tr {
  background-color: rgba(255, 255, 255, 0.5); }

table.normal tr:nth-child(odd) {
  background-color: rgba(210, 210, 210, 0.5); }

table.normal th {
  color: #FFF;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  background-color: #2a231f;
  font-weight: normal; }

table.normal td {
  padding: 0.5rem 0.75rem;
  text-align: left; }

table.normal .required {
  float: right;
  padding: 0.25rem 0.5rem;
  color: #FFF;
  font-size: 0.75rem;
  background-color: #c9171e;
  border-radius: 0.25rem; }

/* gallery
-------------------------------------------------------------------- */
.gallery .gallery-item {
  padding: 4px; }