@charset "UTF-8";

/* RESET */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after{ box-sizing: inherit; }
article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }
body, h1, figure { margin: 0; }
a { text-decoration: none; color: inherit; }
img { border: none; vertical-align: top; }

/* INIT */
body {
  background: #00293f;
  color: #fff;
  font-size: 16px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 2px;
  line-height: 160%;
  overflow-x: hidden;
}
article > section, article > aside, article > div { overflow-x: auto; overflow-y: hidden; }
aside { margin: 2em 0; padding: 1em 0; }

h2 img { display: block; margin: auto; }
h2 { font-size: 2.8em; font-weight: normal; margin: 0 0 20px 0; }
h3 { font-size: 2.4em; font-weight: normal; }
h2 small, h3 small { font-size: .5em; }
h3, h4, h5 { line-height: 1.2em; }
h4 { margin: 1em 0; font-size: 1.4em; font-weight: normal; }
h5, h6 { margin: 1em 0; font-size: 1.2em; font-weight: normal; }

p { margin: 1em 0; }
dl { padding: 0 .5em; line-height: 1.7em; }
dt { font-weight: bold; line-height: 1.2em; }
dd { margin: .5em 0 1.5em 0; }
pre { padding: .5em; font-size: .85em; }
ul { list-style: none; padding-left: 0; }
nav > ul { margin: 0; padding: 0; }

strong { font-style: inherit; font-size: 1.4em; word-break: keep-all; line-height: 1.1em; }
em { font-style: normal; color: #c00; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 100px; }
table, th, td { border: 1px solid #4c5868; }
th,td { padding: 1em; line-height: 1.7em; }
th { width: 20%; text-align: left; vertical-align: center; white-space: nowrap; font-weight: normal; }
th.half { width: 10%; }
table.scrolling {
  max-width: 90vw;
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
section { position: relative; }
button, input[type="submit"], .pointer { cursor: pointer; }

/* function class */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.center {
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.small { font-size: 0.9em; line-height: 1.2em; }
.big { font-size: 1.2em; }
strong.big { font-size: 1.8em; }
.f-bold { font-weight: bold; }
.fadein { animation: fadein 6s ease forwards; animation-delay: 1s; opacity: 0; }
@keyframes fadein { 100% {  opacity: 1;} }

a:hover { opacity: 0.8; }

@media screen and (max-width:959px) {
  .big { font-size: 1em; }
  h2 { font-size: 2.2em; margin: 20px 0 20px 0; }
}

/* function flex */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.flex.wrap { flex-wrap: wrap; }
.jus-sta { justify-content: flex-start; }

/* layout */

@media screen and (max-width:959px) { /* SP */
}


/* color */
.text { color: #00293f; }
.news-text-box { color: #00293f; }
.concept-text { color: #fff; }
.onsen-info-box { color: #4c5868; }
h4 { color: #4c5868; }
.calendar th:first-child { color: #c00; }
.calendar th:last-child { color: #0005c0; }
#foot { background: #00293f; }


/* HEADER */
h1 {
  width: 150px;
}
.head-pic-box {
  position: relative;
  overflow: hidden;
}
.head-main-pic {
  display: flex;
  justify-content: center;
}
.reservation {
  position: absolute; bottom: -40px; right: -20px;
}
.head-pic-box .reservation {
  position: absolute; bottom: 40px; right: 10px;
}
.head-menu {
  position: absolute; top: 140px; right: 40px;
  z-index: 200;
  text-align: right;
}
.head-button {
  width: 90px;
}
.head-button ul {
  padding: 0;
}
.head-button ul li {
  margin-bottom: 6px;
}
details {
  position: relative;
  font-size: 16px;
}
summary {
  list-style-type: none;
}
ul.language {
  position: absolute; top: 30px; right: 0;
  width: 100px;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #00293f;
  text-align: center;
}
ul.language li {
  margin: 0;
  padding: 4px;
  border-bottom: dashed 1px #00293f;
}
ul.language li:last-child {
  border-bottom: none;
}
ul.language li a:hover {
  text-decoration: underline;
}

@media screen and (max-width:1023px) { /* Tablet */
  .reservation {
    position: absolute; bottom: -24px; right: 0;
    width: 200px;
  }
  .reservation img {
    width: 100%;
  }
  .head-menu {
    position: absolute; top: 70px; right: 20px;
  }
}

@media screen and (max-width:959px) { /* SP */
  .reservation {
    position: absolute; bottom: 40px; right: 0;
  }
  .head-button {
    margin-top: 100px;
  }
}

/* menu */
#nav-check, #nav-open, #nav-close, #nav-out { display: none; }

#menu-open { display: block; }
#menu-check, #menu-close, #menu-out { display: none; }

#menu, #menu-open, #menu-close, #menu-out {
  position: fixed;
  top: 0; right: 0;
  transition: .3s ease-in-out;
  z-index: 2;
}
#menu-open, #menu-close {
  top: 60px; right: 60px;
}
#menu-close { z-index: 3; }
#menu { right: -100%; }
#menu-out { width: 100%; height: 100%; background: #000; opacity: 0; }

#menu-check:checked ~ #menu { right: 0; }
#menu-check:checked ~ #menu-close { display: block; }
#menu-check:checked ~ #menu-out { display: block; opacity: .5; }

#menu {
  overflow: auto;
  height: 100vh;
  width: 90%;
  background: #00293f; background-color: rgba(0, 41, 63, 0.9);
  margin: 0 auto 0 auto;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.menu-logo {
  width: 50%;
  text-align: center;
}
.menu-logo img {
  width: 200px;
}
.nav {
  width: 44%;
  text-align: left;
}
.nav ul li {
  width: 44%;
  margin-bottom: 2em;
  border-bottom: dashed 1px #fff;
}
.nav ul li a {
  display: block;
  padding-left: 10px;
  padding-bottom: 0.5em;
}

@media screen and (max-width:1023px) { /* Tablet */
  #menu-open, #menu-close {
    top: 20px; right: 40px;
  }
}

@media screen and (max-width:959px) { /* SP */
  #menu {
    width: 100%;
    padding: 20px;
  }
  .menu-logo {
    width: 100%;
  }
  .menu-logo img {
    width: 120px;
  }
  .nav {
    width: 100%;
  }
  .nav ul li {
    width: 48%;
  }
}


/* scroll */
.scroll-area {
  width: 100%;
  height: auto;
  overflow: auto;
  overflow-x: hidden;
}
.scroll-area::-webkit-scrollbar { display: none; }
.scroll-box {
  width: 100vw;
  height: auto;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-snap-type: y mandatory;
}
.scroll-logo-sticky + .scroll-area {
  margin-top: -100vh;
}
.scroll-detail {
  position: relative;
}

@media screen and (max-width:1600px) {
  .scroll-box {
    width: 100%;
  }
}

/* main */
.info-text {
  width: 40%;
  background-image: url(../images/wave-s.png);
  background-repeat: no-repeat;
  background-size: 160px;
  background-position: 130px 50px;
  line-height: 2em;
}
h3::after {
  content: '';
  width: 40px;
  height: 1px;
  display: block;
  margin-top: 20px;
  background-color: #fff;
}
h4::before {
  content: '';
  width: 2px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
  background-color: #4c5868;
}
.link a {
  padding: 6px 40px;
  border: solid 1px #fff;
  border-radius: 18px;
}

@media screen and (max-width:959px) { /* SP */
  .info-text {
    width: 100%;
    margin-bottom: 40px;
  }
}


/* FOOTER */
.foot-box {
  width: 1600px;
  margin: 0 auto;
  padding: 6% 1%;
}
.foot-logo {
  width: 8%;
}
.foot-logo img {
  width: 100%;
}
.foot-info-box {
  width: 86%;
}
.foot-address-box {
  width: 80%;
}
.foot-underline {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px #fff;
}
.foot-address {
  margin-top: 20px;
  margin-bottom: 20px;
}
.foot-button-box {
  width: 16%;
  text-align: right;
}
.foot-button-ul {
  margin-top: 60px;
}
.foot-nav {
  justify-content: flex-end;
}
.foot-nav li {
  position: relative;
  margin-right: 30px;
  padding-right: 30px;
}
.foot-nav li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 14px;
  display: inline-block;
  background-color: #fff;
  position: absolute; top: calc(50% - 7px); right: 0;
}
.foot-nav li:last-child {
  margin-right: 0;
  border-right: none;
}


@media screen and (max-width:1600px) {
  .foot-box {
    width: 100%;
  }
}


@media screen and (max-width:959px) { /* SP */
  .foot-logo {
    width: 100%;
    margin-bottom: 80px;
    text-align: center;
  }
  .foot-logo img {
    width: 120px;
  }
  .foot-info-box {
    width: 96%;
    margin: 0 auto;
  }
  .foot-address-box {
    width: 100%;
    margin-bottom: 40px;
  }
  .foot-button-box {
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  .foot-button-ul {
    margin-top: 40px;
    justify-content: center;
  }
  .foot-nav li {
    line-height: 4em;
  }
}


/* bxslider */
.bx-wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  box-shadow: none;
}
.bx-wrapper .bx-controls-direction a {
  z-index: 100;

}
.bx-wrapper .bx-controls-direction a:hover { opacity: 100; }

.picture .bx-wrapper { border: 0; }
.picture .bx-wrapper .bx-caption { background: none; }
.picture .bx-wrapper .bx-caption span { font-size: 1em; font-family: inherit; line-height: 1.2em; }
.picture .bx-wrapper .bx-controls-direction a {
  top: 100%;
  width: 68px; height: 68px;
  margin: -96px 0 0 0;
}
.picture .bx-wrapper .bx-prev { left: 40px; background: url(../images/icon-slider-prev.png) no-repeat 0 0; }
.picture .bx-wrapper .bx-next { right: 40px; background: url(../images/icon-slider-next.png) no-repeat 0 0 !important; }
.picture .bx-wrapper .bx-has-pager { margin-bottom: 60px; }
.picture .bx-wrapper .bx-pager { text-align: right; }
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 12px; height: 12px; border-radius: 6px;
  background: #c88;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #c33;
}

.picture .slider { margin-bottom: 1em; background: #fff; }
.picture .slider img { display: block; width: 100%; }
.picture .slider img:not(:first-child) { display: none; }

.slider-image-box {
  width: 100%;
  margin: 0 auto 100px auto;
  padding: 0 2%;
  overflow: hidden;
}
#image-carousel {
  margin: .5em auto 5em auto;
  max-width: 1000px;
}
#image-carousel span[aria-hidden="true"] img {
  filter: blur(4px);
}

@media screen and (max-width:1600px) {
  .slider-image-box {
    width: 96%;
  }
}

@media (min-width:1120px), print {
  #image-carousel {
    /*margin-left: 21.5%;*/
  }
  #image-carousel .bx-viewport {
    overflow: visible !important;
  }
  #image-carousel .bx-wrapper .bx-controls-direction a {
    opacity: 100;
  }
  #image-carousel .bx-wrapper .bx-prev { left: -32px; background: url(../images/icon-sliderb-prev.png) no-repeat 0 0; }
  #image-carousel .bx-wrapper .bx-next { right: -32px; background: url(../images/icon-sliderb-next.png) no-repeat 0 0 !important; }
}

/*アニメーション*/
@media not print {
  .scrIn.js {
    opacity: 0;
  }
}
.scrIn.js.active {
  transition: all ease-in 2s; /* 動きの秒数指定 */
  opacity: 1 !important;
  transform: none !important;
}
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slidein {
  from { margin-left: -300px; }
  to { margin-left: 0; }
}
.fadeIn {
  animation-name: fadein;
  animation-duration: 5s;
}
#catch #catch-image {
  animation-name: fadein;
  animation-duration: 2s;
}
#catch h2 {
  animation-name: slidein;
  animation-duration: 1s;
}

/* IE hack */
.flex > * {
  display: inline-block\9;
  vertical-align: top\9;
}

@media all and (-ms-high-contrast:none) {
  #layout > header.compact {
    position: fixed;
    max-width: 1120px;
    margin: 0; padding: 0;
  }

  .compact #head-top {
    margin-top: 0;
  }
}