@charset "UTF-8";
#primary{
    position: relative;
}
@media screen and (max-width: 980px) {
  article {
    padding: 0 30px;
  }
  .inner {
    width: 100%;
  }
}

/* ================================================
--- ナビゲーション
=================================================*/
/* header */
#top-head{
  font-size: 14px;
  z-index: 999;
  position: absolute;
  z-index: 100;
  width: 100%;
}
#top-head.clone-nav {
  position: fixed;
  top: -40px;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
#top-head.clone-nav.is-show {
  transform: translateY(0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
#top-head .inner {
  position: relative;
  z-index: 1;
  background: #FFF;
  margin: 0 auto;
}
#top-head a,
#top-head {
  text-decoration: none;
}
#mobile-head {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
}
#mobile-head .right-menu{
  margin-right: 15px;
}
#top-head h1.logo {
  margin: 20px 0 0 30px;
  padding: 0;
  width: 180px;
  font-size: 0;
}
#global-nav {
  text-align: center;
  overflow: hidden;
}
#global-nav ul {
  list-style: none;
  padding: 0px;
  margin: 16px 0 0;
}
#global-nav ul li {
  width: 170px;
  display: inline-block;
  position: relative;
}
#global-nav ul li a {
  background: #222;
  text-shadow: #000 1px 0 20px;
  font-family: 'Cinzel', serif, "Noto Serif JP";
  font-size: 15px;
  line-height: 1.4;
  position: relative;
  padding: 10px 30px 10px;
  display: flex;
  flex-direction: column;
  color: #FFF;
  align-items: center;
  transition: all 0.3s;
}
#global-nav ul li.accomo a {
  background: #0076b7;
}
#global-nav ul li a span{
  font-size: 11px;
  display: block;
  line-height: 1.2;
  margin-top: 6px;
}
#global-nav ul li:before {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #FFF;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: ease 0.3s;
}
#global-nav ul li:hover:before {
  width: 60px;
  transition: ease 0.3s;
}
/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 32px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #FFF;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}
/*　---Gナビ　プルダウン(PC版ランゲージ用)---　*/
.navi li {
  list-style: none;
}
.navi li ul {
  width: 150px;
  display: none;
  margin-left: 0px;
  position: absolute;
  background:#87745d;
}
.navi > li li {/*layer-2*/
  width: 100%;
}
.navi > li li a {
  text-align: center;
  padding: 0;
}
.navi > li li:hover > a {
  color: olive;
  background: #afc6e2;
  padding: 0;
}
.navi li ul li a {
  border-bottom: 1px solid #eee;
}
.navi li ul li:last-child a {
  border-bottom: none;
}
.navi li ul li:last-child a {
  border-bottom: none;
}

@media screen and (max-width: 767px) {
  .section-header {
    margin-bottom: 5%;
  }
  #top-head, .inner {
    width: 100%;
    padding: 0;
  }
  #top-head {
    top: 0;
    height: 92px;
    position: fixed;
    margin-top: 0;
  }
  #top-head.clone-nav{
    display: none;
  }
  #top-head.fixed {
    padding-top: 0;
    background: transparent;
  }    
  #top-head:after{
    height: 0;
  }
  #top-head .logo{
    padding-top: 10px;
    width: 270px;
  }
  #top-head.fixed .logo,
  #top-head .logo {
    color: #333;
    font-size: 26px;
  }
  #mobile-head {
    width: 100%;
    z-index: 999;
    position: relative;
  }
  .left-menu{
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }      
  #global-nav {
    position: absolute;
    top: -566px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(0,0,0, 0.9);
    width: 100%;
    height: 100vh;
    text-align: center;
    padding: 6%;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
  }
  #global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 11px;
    margin-top: 0;
  }
  #global-nav ul li {
    width: 100%;
    float: none;
    position: static;
    display: inherit;
  }
  #global-nav ul li:before{
    display: none !important;
  }
  #top-head #global-nav ul li a,
  #top-head.fixed #global-nav ul li a {
    color: #fff;
    padding: 18px 20px;
    font-size: 1.4em;
    width: 100%;
  }
  #global-nav ul li.menu_lang{
    display: none;
  }
  #nav-toggle {
    display: block;
  }
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(566px);
    -webkit-transform: translateY(566px);
    transform: translateY(566px);
    opacity: 1;
  }
}

@media screen and (max-width: 980px) {
  #global-nav ul li a{
    padding: 0 10px;
  }
}


/* ================================================
--- メインビジュアル
=================================================*/
#mainvisual{ 
  position: relative;
  padding: 0; 
}
#mainvisual #main-catch{
  text-align: center;
  color: #FFF;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
  transform: translate(0, -50%);
  z-index: 1;
  text-shadow: #000 1px 0 20px;
}
#mainvisual .catch-txt1{
  font-family: 'Cinzel', serif, "Noto Serif JP";
  font-size: 26px;letter-spacing: 6px;
  margin-bottom: 40px;
}
#mainvisual .main-logo{
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 0 10px #000);
}
#mainvisual #main-catch .catch-txt2{
  font-weight: 500;
  margin-top: 40px;
  text-align: center;
  font-family: 'Cinzel', serif, "Noto Serif JP";
  line-height: 1.8;
  color: #FFF;
  font-size: 64px;
}
#mainvisual .catch-txt2 span{
  font-size: 38px;
}
.main-vis .slide-img01,
.main-vis .slide-img02,
.main-vis .slide-img03,
.main-vis .slide-img04,
.main-vis .slide-img05{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.main-vis .slide-img01{ background-image: url(../images/main-slider01.jpg); }
.main-vis .slide-img02{ background-image: url(../images/main-slider02.jpg); }
.main-vis .slide-img03{ background-image: url(../images/main-slider03.jpg); }
.main-vis .slide-img04{ background-image: url(../images/main-slider04.jpg); }
.main-vis .slide-img05{ background-image: url(../images/main-slider05.jpg); }
.main-vis .slick-dots {
  bottom: 4%;
  z-index: 1;
}
#concept{
  padding: 0 6%;
}
.ttl-concept{
  margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
  #mainvisual #main-catch .catch-txt2{
    font-size: 44px;
  }
  #mainvisual #main-catch .catch-txt2 span{
    font-size: 28px;
  }
}

@media screen and (max-width: 767px) {
  #main-visual {
    height: 300px;
  }
}
@media screen and (max-width: 677px) {
  #mainvisual .catch-txt1 {
    line-height: 1.6;
    font-size: 20px;
    margin-bottom: 6%;
  }  
  #mainvisual .main-logo {
    max-width: 300px !important;
  }
  #mainvisual #main-catch .catch-txt2 {
    margin-top: 10%;
    line-height: 1.3;
    font-size: 34px;
  }
  #mainvisual .catch-txt2 span {
    font-size: 20px;
  }
}


/* ================================================
--- トップ　ゲストルーム
=================================================*/
#guestroom{
  padding: 80px 0;
  margin-top: 100px;
  background: #111;
}
.rm-inner{
  display: flex;
  flex-direction: row-reverse;
}
.rm-inner .rm-right{
  width: 40%;
  color: #FFF;
  padding: 0 5%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.rm-inner .rm-left{
  width: 60%;
  color: #FFF;
}
.rm-left .guestroom-slider.slider .slick-slide{
  margin: 0 10px;
}
.rm-left .guestroom-slider.slider .slick-dots li button:before{
  color: #FFF;
  opacity: 7.5;
  font-size: 28px;
}
.rm-left .guestroom-slider.slider .slick-dots li.slick-active button:before{
  color: #0076b7;
}
.rm-left .guestroom-slider.slider .slick-prev {
  left: 28px;
  z-index: 1;
}
.rm-left .guestroom-slider.slider .slick-next {
  right: 15px;
  z-index: 1;
}
.rm-left .guestroom-slider.slider .slick-prev:before{
  font-family: FontAwesome;
  content: "\f104";
  font-size: 40px;
}
.rm-left .guestroom-slider.slider .slick-next:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 40px;
}
.room-type{
  position: relative;
}
.room-type dl{
  position: absolute;
  line-height: 1.8;
  left: 30px;
  bottom: 40px;
  font-family: "Noto Serif JP";    
}
.room-type dl dt{
  font-weight: normal;
  font-size: 15px;
}
.room-type dl dd{
  font-size: 13px;
}

@media screen and (max-width: 1024px) {
  .rm-inner{
    display: block;
  }
  .rm-inner .rm-right{
    width: 100%;
  }
  .rm-inner .rm-left{
    width: 90%;
    margin: 6% 5% 0;
  }
}

@media screen and (max-width: 766px) {
  #guestroom{
    padding: 8% 0;
  }
  .rm-inner .rm-right {
    width: 100%;
  }
  .rm-inner .rm-left {
    width: 90%;
    margin: 0 auto;
  }
  .rm-inner{
    display: block;
  }
}



/* ================================================
--- 下層　共通
=================================================*/
.page-vis{
  height: 350px;
}
.page-vis .page-ttl-bg{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 100%;
}
.page-vis .page-ttl-bg.inqury{ background-image: url(../images/main-slider01.jpg); }