@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap");
/*
@mixin cormorant{
	font-family: 'Cormorant Upright', serif;
}
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* Slider */
/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

html * {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
  font-feature-settings: "palt" 1;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

body.sp-nav--open {
  overflow: hidden;
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: inline-block;
  }
}

.pc {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

img {
  max-width: 100%;
}

p {
  line-height: 1.5;
}

.pwrap {
  display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

.page-lead-container .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.page-lead-container .page-lead-titleEn {
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  margin-bottom: 1em;
}
.page-lead-container h3 {
  font-size: 2.8rem;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}

.page-lead-container .page-lead--main {
  font-size: 1em;
  margin-bottom: 1em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
@media screen and (max-width: 1199px) {
  .page-lead-container .page-lead--main {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .page-lead-container .page-lead--main {
    font-size: 5.4vw;
  }
}
.page-lead-container .page-lead {
  text-align: left;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .page-lead-container .page-lead {
    font-size: 1.4rem;
    text-align: justify;
  }
  .page-lead-container .page-lead br {
    display: none;
  }
}
.page-lead-container .page-lead--copy {
  font-size: 0.7em;
  margin-bottom: 3em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
@media screen and (max-width: 1199px) {
  .page-lead-container .page-lead--copy {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .page-lead-container .page-lead--copy {
    font-size: 3.6vw;
  }
}

.nav-fixed {
  position: fixed;
  display: none;
  z-index: 10000;
  right: 1rem;
  top: 1rem;
}
@media screen and (max-width: 767px) {
  .nav-fixed {
    display: inline-flex;
  }
}

.fixed-nav {
  display: none;
}
@media screen and (max-width: 767px) {
  .fixed-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    height: 50px;
  }
}
.fixed-nav ul.fixed-nav-list-hotel {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-hotel li {
  font-size: 1.6rem;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-hotel li a {
  text-decoration: none;
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-nav ul.fixed-nav-list-hotel li a, .fixed-nav ul.fixed-nav-list-hotel li a:link, .fixed-nav ul.fixed-nav-list-hotel li a:visited {
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-hotel li a:hover, .fixed-nav ul.fixed-nav-list-hotel li a:active {
  text-decoration: none;
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(1) {
  width: calc((100% - 50px) * 0.6);
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(2) {
  width: calc((100% - 50px) * 0.4);
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(3) {
  width: 50px;
  background-color: #00336e;
  position: relative;
}
.fixed-nav ul.fixed-nav-list-hotel li.instagram {
  order: -1;
  width: 50px;
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li.instagram a {
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fixed-nav ul.fixed-nav-list-hotel.light li a {
  color: #000;
}
.fixed-nav ul.fixed-nav-list-portal {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-portal li {
  font-size: 1.6rem;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-portal li a {
  text-decoration: none;
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-nav ul.fixed-nav-list-portal li a, .fixed-nav ul.fixed-nav-list-portal li a:link, .fixed-nav ul.fixed-nav-list-portal li a:visited {
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-portal li a:hover, .fixed-nav ul.fixed-nav-list-portal li a:active {
  text-decoration: none;
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-portal li:nth-of-type(1) {
  width: 50%;
  background-color: #333;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-portal li:nth-of-type(2) {
  width: 50%;
  background-color: #333;
}

.fixed-nav ul:not(.nav-sp-content-list) li {
  background: #2a2f31 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.fixed-nav ul:not(.nav-sp-content-list) li:nth-of-type(3) {
  border-right: none !important;
}
.fixed-nav ul.nav-sp-content-list li {
  background: none !important;
}
.fixed-nav ul.nav-sp-content-list li a {
  text-decoration: none;
}
.fixed-nav ul.nav-sp-content-list li a, .fixed-nav ul.nav-sp-content-list li a:link, .fixed-nav ul.nav-sp-content-list li a:visited {
  color: #333;
}
.fixed-nav ul.nav-sp-content-list li a:hover, .fixed-nav ul.nav-sp-content-list li a:active {
  text-decoration: none;
  color: #333;
}

.hamburger-c {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .hamburger-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    right: 0;
    top: 0;
    z-index: 999;
  }
}
.hamburger-c .menu-trigger,
.hamburger-c .menu-trigger span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}
.hamburger-c .menu-trigger {
  position: relative;
  width: 40px !important;
  height: 19px !important;
  z-index: 110;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .hamburger-c .menu-trigger {
    width: 30px !important;
  }
}
.hamburger-c .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.hamburger-c .menu-trigger span:nth-of-type(1) {
  top: 0;
}
.hamburger-c .menu-trigger span:nth-of-type(2) {
  top: 9px;
}
.hamburger-c .menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.hamburger-c .menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-c .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.hamburger-c .menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

.morelink a {
  display: inline-block;
  padding: 0.8em 2em;
  font-size: 1.8rem;
  text-decoration: none;
  line-height: 1;
  position: relative;
  text-decoration: none;
}
.morelink a, .morelink a:link, .morelink a:visited {
  color: #000;
}
.morelink a:hover, .morelink a:active {
  text-decoration: none;
  color: #000;
}
.morelink a::after {
  display: inline-block;
  content: "";
  width: 100%;
  background-color: #000;
  height: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  opacity: 0.2;
}
.morelink a::before {
  display: inline-block;
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(-45deg) translateY(-52%);
  position: absolute;
  right: 0.5em;
  top: 50%;
}

@keyframes fadeIn {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: rotate(0.0001deg);
  }
  100% {
    visibility: visible;
    opacity: 1;
    transform: rotate(0deg);
  }
}
.gnav {
  position: fixed;
  top: 0;
  padding-top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background-color: #fefefe;
  overflow-y: auto;
  z-index: 1;
  /*&-contact{
  	width: 100%;

  	a{
  		color: #fff;
  		text-decoration: none;
  		display: flex;
  		flex-wrap: wrap;
  		justify-content: center;
  		align-items: flex-end;
  		font-size: 1.6rem;
  		span{
  			display: inline-block;
  			&.nav-sp-content-contact-02{
  				font-size: 1.3em;
  				margin: 0 .1em 0 .3em;
  			}
  			&.nav-sp-content-contact-03{
  				font-size: .8em;
  			}
  		}
  	}
  }*/
}
@media screen and (max-width: 767px) {
  .gnav {
    padding-top: 60px;
  }
}
.gnav::before {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .gnav::before {
    content: none;
    display: none;
  }
}
.gnav.active {
  visibility: visible;
  animation-duration: 0.5s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}
.gnav.active.bg-1::before {
  background: url(../img/hotels/botan/02.jpg) no-repeat center center/cover;
}
.gnav.active.bg-2::before {
  background: url(../img/hotels/furin2/01.jpg) no-repeat center center/cover;
}
.gnav.active.bg-3::before {
  background: url(../img/hotels/gekko/04.jpg) no-repeat center center/cover;
}
.gnav.active.bg-4::before {
  background: url(../img/hotels/l/01.jpg) no-repeat center center/cover;
}
.gnav.active.bg-5::before {
  background: url(../img/hotels/shirara2/06.jpg) no-repeat center center/cover;
}
.gnav-logo {
  width: 70%;
  max-width: 270px;
  margin-bottom: 3%;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .gnav-logo {
    font-size: 1.6rem;
  }
}
.gnav-logo a {
  display: inline-block;
  text-decoration: none;
}
.gnav-logo img {
  width: 5em;
}
.gnav-logo span {
  display: block;
  font-size: 0.5em;
  margin-top: 0.5em;
  color: #003f87;
}
.gnav-inner {
  padding: 5% 10% 120px 10%;
  width: 100%;
  max-width: 900px;
}
.gnav ul.gnav-list {
  margin-bottom: 1rem;
  list-style: none;
  font-size: 1.8rem;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .gnav ul.gnav-list {
    padding: 2em 0 0 0;
    width: 100%;
  }
}
.gnav ul.gnav-list li {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .gnav ul.gnav-list li {
    width: 100%;
  }
}
.gnav ul.gnav-list li a {
  display: inline-block;
  width: 100%;
  padding: 1em 0 1em 0;
  position: relative;
  text-transform: uppercase;
  font-size: 1.6rem;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .gnav ul.gnav-list li a {
    padding: 0.6em 0 0.6em 0;
  }
}
.gnav ul.gnav-list li a::before {
  display: block;
  width: 1.5em;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 50%;
}
.gnav ul.gnav-list li a, .gnav ul.gnav-list li a:link, .gnav ul.gnav-list li a:visited {
  color: #333;
}
.gnav ul.gnav-list li a:hover, .gnav ul.gnav-list li a:active {
  text-decoration: none;
  color: #333;
}
.gnav ul.gnav-list li a .en {
  font-size: 0.6em;
  margin-left: 1em;
}
.gnav ul.subnav-list {
  margin-top: 3rem;
  list-style: none;
  width: 50%;
  font-size: 1.5rem;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .gnav ul.subnav-list {
    width: 100%;
  }
}
.gnav ul.subnav-list li {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .gnav ul.subnav-list li {
    width: 100%;
  }
}
.gnav ul.subnav-list li a {
  display: inline-block;
  width: 100%;
  padding: 1em 0 1em 0;
  position: relative;
  text-decoration: none;
}
.gnav ul.subnav-list li a, .gnav ul.subnav-list li a:link, .gnav ul.subnav-list li a:visited {
  color: #333;
}
.gnav ul.subnav-list li a:hover, .gnav ul.subnav-list li a:active {
  text-decoration: none;
  color: #333;
}
.gnav ul.subnav-list .nav-sns {
  display: flex;
  align-content: center;
  align-items: center;
}
.gnav ul.subnav-list .nav-sns a {
  display: inline-block;
  font-size: 0;
}
.gnav ul.subnav-list .nav-sns .instagram {
  width: 2rem;
  height: 2rem;
  background: url(../../../src/img/common/i-instagram-dark.svg) no-repeat center center/cover;
}
.gnav ul.subnav-list .nav-sns .youtube {
  width: 2.6rem;
  height: 1.86rem;
  margin-left: 1rem;
  background: url(../../../src/img/common/i-youtube-dark.svg) no-repeat center center/cover;
}
.gnav .gnav-contact {
  margin-top: 2rem;
  font-size: 1.4em;
}
.gnav .gnav-contact > *:nth-child(1) {
  transition-delay: calc(300ms + (200ms * 1));
}
.gnav .gnav-contact > *:nth-child(2) {
  transition-delay: calc(300ms + (200ms * 2));
}
.gnav .gnav-contact > *:nth-child(3) {
  transition-delay: calc(300ms + (200ms * 3));
}
.gnav .gnav-contact > *:nth-child(4) {
  transition-delay: calc(300ms + (200ms * 4));
}
.gnav .gnav-contact > *:nth-child(5) {
  transition-delay: calc(300ms + (200ms * 5));
}
.gnav .gnav-contact > *:nth-child(6) {
  transition-delay: calc(300ms + (200ms * 6));
}
.gnav .gnav-contact > *:nth-child(7) {
  transition-delay: calc(300ms + (200ms * 7));
}
.gnav .gnav-contact > *:nth-child(8) {
  transition-delay: calc(300ms + (200ms * 8));
}
.gnav .gnav-contact > *:nth-child(9) {
  transition-delay: calc(300ms + (200ms * 9));
}
.gnav .gnav-contact > *:nth-child(10) {
  transition-delay: calc(300ms + (200ms * 10));
}
.gnav .gnav-contact > *:nth-child(11) {
  transition-delay: calc(300ms + (200ms * 11));
}
.gnav .gnav-contact > *:nth-child(12) {
  transition-delay: calc(300ms + (200ms * 12));
}
.gnav .gnav-contact > *:nth-child(13) {
  transition-delay: calc(300ms + (200ms * 13));
}
.gnav .gnav-contact > *:nth-child(14) {
  transition-delay: calc(300ms + (200ms * 14));
}
.gnav .gnav-contact > *:nth-child(15) {
  transition-delay: calc(300ms + (200ms * 15));
}
.gnav .gnav-contact a {
  display: inline-block;
}
.gnav .gnav-contact--reserve {
  width: 100%;
  padding: 0.5em 0;
  border-radius: 10rem;
  border: 1px solid rgba(51, 51, 51, 0.3);
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
}
.gnav .gnav-contact--reserve, .gnav .gnav-contact--reserve:link, .gnav .gnav-contact--reserve:visited {
  color: #333;
}
.gnav .gnav-contact--reserve:hover, .gnav .gnav-contact--reserve:active {
  text-decoration: none;
  color: #333;
}
.gnav .gnav-contact--tel {
  text-decoration: none;
  margin-top: 3em;
  font-size: 1em;
}
.gnav .gnav-contact--tel, .gnav .gnav-contact--tel:link, .gnav .gnav-contact--tel:visited {
  color: #333;
}
.gnav .gnav-contact--tel:hover, .gnav .gnav-contact--tel:active {
  text-decoration: none;
  color: #333;
}
.gnav .gnav-contact--tel b {
  font-weight: normal;
  font-size: 1.5em;
}
.gnav .gnav-contact--address {
  margin-top: 1.5em;
  font-size: 0.8em;
}
.gnav div.links {
  display: inline-flex;
  align-items: center;
  padding: 2rem 0;
  justify-content: center;
  width: 100%;
}
.gnav div.links a {
  display: inline-block;
  font-size: 0;
  margin-left: 1.5rem;
}
.gnav div.links a:first-of-type {
  margin-left: 0;
}
.gnav div.links a.instagram {
  width: 3rem;
  height: 3rem;
  background: url(../../../src/img/common/i-instagram-light.svg) no-repeat center center/cover;
}
.gnav div.links a.youtube {
  width: 4rem;
  height: 2.8rem;
  background: url(../../../src/img/common/i-youtube-light.svg) no-repeat center center/cover;
}
.gnav-bnr {
  width: 100%;
  padding-top: 10%;
}
.gnav-bnr h3 {
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  padding: 0.5em 0 0.5em 0;
}
.gnav .subnav-list {
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 1.5s;
  opacity: 0;
  transform: translateY(1em);
}
.gnav .gnav-list li {
  transition-property: all;
  transition-duration: 1s;
  opacity: 0;
  transform: translateY(1em);
}
.gnav .gnav-contact > * {
  transition-property: all;
  transition-duration: 1s;
  opacity: 0;
  transform: translateY(1em);
}
.gnav.active .subnav-list {
  opacity: 1;
  transform: translateY(0);
}
.gnav.active .gnav-list li {
  opacity: 1;
  transform: translateY(0);
}
.gnav.active .gnav-contact > * {
  opacity: 1;
  transform: translateY(0);
}

.nav-reserve-content {
  position: fixed;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5;
  background-color: #333;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  .nav-reserve-content {
    bottom: 50px;
  }
}
.nav-reserve-content.active {
  opacity: 1;
  top: 0;
  z-index: 3;
}
.nav-reserve-content-inner {
  padding: 2%;
  width: 100%;
  position: relative;
}
.nav-reserve-content ul.nav-sp-content-list {
  margin-bottom: 10%;
  list-style: none;
  width: 100%;
  font-size: 1.8rem;
}
.nav-reserve-content ul.nav-sp-content-list li {
  width: 100%;
}
.nav-reserve-content ul.nav-sp-content-list li a {
  display: inline-block;
  width: 100%;
  padding: 1em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
.nav-reserve-content ul.nav-sp-content-list li a, .nav-reserve-content ul.nav-sp-content-list li a:link, .nav-reserve-content ul.nav-sp-content-list li a:visited {
  color: #fff;
}
.nav-reserve-content ul.nav-sp-content-list li a:hover, .nav-reserve-content ul.nav-sp-content-list li a:active {
  text-decoration: none;
  color: #fff;
}
.nav-reserve-content ul.nav-sp-content-list li a:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-reserve-content-contact {
  width: 100%;
}
.nav-reserve-content-contact a {
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.6rem;
}
.nav-reserve-content-contact a span {
  display: inline-block;
}
.nav-reserve-content-contact a span.nav-sp-content-contact-02 {
  font-size: 1.3em;
  margin: 0 0.1em 0 0.3em;
}
.nav-reserve-content-contact a span.nav-sp-content-contact-03 {
  font-size: 0.8em;
}
.nav-reserve-content-bnr {
  width: 100%;
  padding-top: 5%;
}
.nav-reserve-content-bnr h3 {
  color: #fff;
}
.nav-reserve-content .close-bo {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 3%;
  top: 3%;
}
@media screen and (max-width: 767px) {
  .nav-reserve-content .close-bo {
    position: fixed;
    padding: 15px;
    background-color: #333;
    right: 0;
    top: 0;
  }
}
.nav-reserve-content .close-bo::before, .nav-reserve-content .close-bo::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  position: absolute;
  background-color: #fff;
}
.nav-reserve-content .close-bo::before {
  transform: rotate(45deg);
}
.nav-reserve-content .close-bo::after {
  transform: rotate(-45deg);
}

.area-bnr {
  width: 100%;
  padding: 0 0 4% 0;
}
@media screen and (max-width: 767px) {
  .area-bnr {
    padding: 0px 0 50px;
  }
}
.area-bnr .inner {
  width: 100%;
}
.area-bnr .title {
  font-size: 2rem;
}
.area-bnr .bnr-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-bnr .bnr {
  width: 32.6666666667%;
  font-size: 1.8rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .area-bnr .bnr {
    width: 100%;
    margin-bottom: 3%;
  }
}
.area-bnr .bnr:last-child {
  /*
  a{
  	pointer-events: none;
  }
  position: relative;
  &::after{
  	content: "";
  	display: inline-block;
  	width: 100%;
  	height: 100%;
  	top:0;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	position: absolute;
  	background: rgba(#000,.7);
  	z-index: 1;

  }
  &::before{
  	content: "coming soon";
  	z-index: 2;
  	position: absolute;
  	color: #fff;
  	font-size: 14px;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);						
  }
  */
}
@media screen and (max-width: 767px) {
  .area-bnr .bnr:last-child {
    margin-bottom: 0;
  }
}
.area-bnr .bnr a {
  display: inline-block;
  text-decoration: none;
  padding: 2em 0;
  width: 100%;
  color: #fff;
  transition: opacity 0.5s;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.area-bnr .bnr a:hover {
  opacity: 0.8;
}
.area-bnr .bnr a span {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-shadow: #000 0 0 0.5em;
}
.area-bnr .bnr a span:nth-of-type(2) {
  font-size: 0.7em;
}
/*
.hotel-info{
 background-color: #f2f3f5;
 padding: 8em 0;
 .inner{
	 @include c.ca();

 }
 h1{
	 width: 90%;
	 margin: 0 auto 1em;
	 max-width: 260px;

	 img{
		 width: 100%;
	 }
 }
 &-content{
	 width: 100%;
	 @include c.baseText(18);
	 @include c.shipporiR();

	 letter-spacing: 0;

	 &-contact{
		 width: 100%;
		 a{
			 line-height: 1;
			 @include c.aset(#000,#000);
				 text-decoration: none;
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: center;
				 align-items: flex-end;
				 font-size: 1.6rem;
				 span{
					 display: inline-block;
					 &.hotel-info-content-contact-02{
						 font-size: 1.3em;
						 margin: 0 .1em 0 .3em;
					 }
					 &.hotel-info-content-contact-03{
						 font-size: .8em;
					 }
				 }
			 }
			 &-address{
					  width: 100%;
					  text-align: center;
					  margin-bottom:.5em;
					  p{
						  width: 100%;
						   text-align: center;
					  }
				  }
	 }
 }
}
*/
.breadcrumbs {
  display: none;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  font-size: 1.3rem;
  padding: 1em 0;
}
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}
.breadcrumbs ul li:nth-of-type(n+2) {
  margin-left: 0.5em;
}
.breadcrumbs ul li:nth-of-type(n+2)::before {
  content: ">";
  margin-right: 0.5em;
  color: #888;
}
.breadcrumbs ul li a {
  text-decoration: none;
}
.breadcrumbs ul li a, .breadcrumbs ul li a:link, .breadcrumbs ul li a:visited {
  color: #333;
}
.breadcrumbs ul li a:hover, .breadcrumbs ul li a:active {
  text-decoration: none;
  color: #333;
}
.breadcrumbs ul li span {
  color: #888;
}
.breadcrumbs ul li a, .breadcrumbs ul li span {
  display: inline-block;
}

.caption {
  font-size: 12px;
}

.comingsoon {
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
.comingsoon p {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  padding: 5% 0;
}
@media screen and (max-width: 1199px) {
  .comingsoon p {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .comingsoon p {
    font-size: 5.4vw;
  }
}
@media screen and (max-width: 767px) {
  .comingsoon p {
    padding: 15% 0;
  }
}
.comingsoon p:after {
  content: "ただいま準備中です、しばらくお待ちください";
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 0.8em;
  margin-top: 1em;
}

.campaign-bnr {
  width: 100%;
}
.campaign-bnr .inner {
  width: 90%;
  max-width: 1200px;
  margin: 5% auto;
}
@media screen and (max-width: 767px) {
  .campaign-bnr .inner {
    margin: 10% auto;
  }
}
.campaign-bnr figure {
  width: 100%;
}
.campaign-bnr figure img {
  width: 100%;
}

.page-title {
  width: 100%;
}
.page-title .inner {
  display: flex;
  flex-wrap: wrap;
  padding: 10% 0;
  position: relative;
  z-index: 0;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .page-title .inner {
    padding: 20% 0;
  }
}
.page-title .inner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.page-title .inner h2 {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #fff;
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 1em;
  padding-top: 1em;
}
@media screen and (max-width: 1199px) {
  .page-title .inner h2 {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .page-title .inner h2 {
    font-size: 4.95vw;
  }
}
.page-title .inner h2 span {
  display: inline-block;
}
.page-title .inner h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.page-title .inner h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.page-title .inner p {
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: 0.5em;
  margin-top: 1.5em;
}
@media screen and (max-width: 1199px) {
  .page-title .inner p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .page-title .inner p {
    font-size: 3.15vw;
  }
}

.about .page-title {
  background: url(../img/top/sec-about-img.jpg) no-repeat center center/cover;
}

.training .page-title {
  background: url(../img/top/sec-training-img.jpg) no-repeat center center/cover;
}

.access .page-title {
  background: url(../img/cmn/shirarahama01.jpg) no-repeat center bottom 30%/cover;
}

.fluid-bnr {
  width: 100%;
  padding: 10% 0 0;
}
.fluid-bnr .inner {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .fluid-bnr .inner {
    margin: 10% auto;
  }
}
.fluid-bnr a {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  width: 33.3333333333%;
  margin-bottom: 1rem;
  z-index: 0;
  position: relative;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 5em 0;
}
@media screen and (max-width: 1199px) {
  .fluid-bnr a {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .fluid-bnr a {
    font-size: 4.95vw;
  }
}
.fluid-bnr a, .fluid-bnr a:link, .fluid-bnr a:visited {
  color: #fff;
}
.fluid-bnr a:hover, .fluid-bnr a:active {
  text-decoration: none;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .fluid-bnr a {
    padding: 2em 0;
    width: 100%;
  }
}
.fluid-bnr a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.fluid-bnr-title {
  text-align: center;
  width: 100%;
  padding-bottom: 2em;
  position: relative;
  margin-bottom: 0.5em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
@media screen and (max-width: 1199px) {
  .fluid-bnr-title {
    font-size: 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .fluid-bnr-title {
    font-size: 9vw;
  }
}
.fluid-bnr-title::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.5em;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.fluid-bnr-about {
  background: url(../img/top/sec-about-img.jpg) no-repeat center center/cover;
}
.fluid-bnr-hotels {
  background: url(../img/top/hotels-main.jpg) no-repeat center center/cover;
}
.fluid-bnr-bystay {
  background: url(../img/top/stay/p947.jpg) no-repeat center center/cover;
}
.fluid-bnr-access {
  background: url(../img/cmn/shirarahama01.jpg) no-repeat center center/cover;
}

.reservation-panel .tgl-btn {
  position: fixed;
  right: 0;
  bottom: 0;
  display: inline-flex;
  padding: 1.5em 5em;
  background: #3a9791;
  color: #fff;
  font-size: 1.8rem;
  z-index: 1000;
  align-content: center;
  justify-content: center;
  align-items: center;
  line-height: 1;
  /*&::before{
  	content: '';
  	display: inline-block;
  	width: 1.3em;
  	height: 1px;
  	background: rgba(#fff,.2);
  	margin-right: .5em;
  }*/
}
@media screen and (max-width: 767px) {
  .reservation-panel .tgl-btn {
    width: 100%;
    padding: 1.5em 0;
  }
}

.cancel {
  margin-bottom: 5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.6rem;
  padding: 5rem 1rem;
  background: #fff;
  margin-top: 5rem;
}
.cancel .cancel-policy {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2rem;
}
.cancel .cancel-policy-title {
  margin-bottom: 1em;
  font-size: 1.1em;
  width: 100%;
  text-align: center;
}
.cancel table {
  width: 100%;
  font-size: 14px;
}
.cancel table td,
.cancel table th {
  border-bottom: solid 1px #c0c0c0;
  border-right: solid 1px #c0c0c0;
  text-align: center;
  padding: 0.5em 0.5em;
}
.cancel table .b_none {
  border-right: none;
}
.cancel table td {
  border-right: solid 1px #c0c0c0;
  border-bottom: none;
}

.area-bnr {
  width: 100%;
  padding: 0 0 4% 0;
}
@media screen and (max-width: 767px) {
  .area-bnr {
    padding: 0px 0 50px;
  }
}
.area-bnr .inner {
  width: 100%;
}
.area-bnr .title {
  font-size: 2rem;
}
.area-bnr .bnr-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-bnr .bnr {
  width: 32.6666666667%;
  font-size: 1.8rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .area-bnr .bnr {
    width: 100%;
    margin-bottom: 3%;
  }
}
.area-bnr .bnr:last-child {
  /*
  a{
  	pointer-events: none;
  }
  position: relative;
  &::after{
  	content: "";
  	display: inline-block;
  	width: 100%;
  	height: 100%;
  	top:0;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	position: absolute;
  	background: rgba(#000,.7);
  	z-index: 1;

  }
  &::before{
  	content: "coming soon";
  	z-index: 2;
  	position: absolute;
  	color: #fff;
  	font-size: 14px;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);						
  }
  */
}
@media screen and (max-width: 767px) {
  .area-bnr .bnr:last-child {
    margin-bottom: 0;
  }
}
.area-bnr .bnr a {
  display: inline-block;
  text-decoration: none;
  padding: 2em 0;
  width: 100%;
  color: #fff;
  transition: opacity 0.5s;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.area-bnr .bnr a:hover {
  opacity: 0.8;
}
.area-bnr .bnr a span {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-shadow: #000 0 0 0.5em;
}
.area-bnr .bnr a span:nth-of-type(2) {
  font-size: 0.7em;
}
.area-bnr .bnr.bnr-crystalgroup {
  position: relative;
  z-index: 0;
  width: 100%;
  margin-top: 3%;
}
@media screen and (max-width: 767px) {
  .area-bnr .bnr.bnr-crystalgroup {
    margin-top: 0;
  }
}
.area-bnr .bnr.bnr-crystalgroup p {
  text-align: center;
  z-index: 1;
  position: relative;
}
.area-bnr .bnr.bnr-crystalgroup a {
  padding: 1.5em 0;
}
.area-bnr .bnr.bnr-crystalgroup a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background: #000;
  opacity: 0.4;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.5s;
}
.area-bnr .bnr.bnr-crystalgroup img {
  width: 60%;
  max-width: 280px;
}
.area-bnr .bnr.bnr-crystalgroup .bnr-crystalgroup-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}
.area-bnr .bnr.bnr-crystalgroup .bnr-crystalgroup-bg > div {
  width: 25%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.groups .basic-title {
  padding: 0 !important;
}
.groups .basic-title h3 {
  color: #fff !important;
}

.max-1000 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.max-1400 {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.ml-1 {
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .ml-1 {
    margin-left: calc( 1rem * .7);
  }
}

.mr-1 {
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .mr-1 {
    margin-right: calc( 1rem * .7);
  }
}

.mt-1 {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .mt-1 {
    margin-top: calc( 1rem * .7);
  }
}

.mb-1 {
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .mb-1 {
    margin-bottom: calc( 1rem * .7);
  }
}

.my-1 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .my-1 {
    margin-bottom: calc( 1rem * .7);
    margin-top: calc( 1rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-1 {
    margin-top: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-1 {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-1 {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
}

.pl-1 {
  padding-left: 1rem;
}
@media screen and (max-width: 767px) {
  .pl-1 {
    padding-left: calc( 1rem * .7);
  }
}

.pr-1 {
  padding-right: 1rem;
}
@media screen and (max-width: 767px) {
  .pr-1 {
    padding-right: calc( 1rem * .7);
  }
}

.pt-1 {
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .pt-1 {
    padding-top: calc( 1rem * .7);
  }
}

.pb-1 {
  padding-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .pb-1 {
    padding-bottom: calc( 1rem * .7);
  }
}

.py-1 {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .py-1 {
    padding-bottom: calc( 1rem * .7);
    padding-top: calc( 1rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-1 {
    padding-top: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-1 {
    padding-bottom: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-1 {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
}

.ml-2 {
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  .ml-2 {
    margin-left: calc( 2rem * .7);
  }
}

.mr-2 {
  margin-right: 2rem;
}
@media screen and (max-width: 767px) {
  .mr-2 {
    margin-right: calc( 2rem * .7);
  }
}

.mt-2 {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .mt-2 {
    margin-top: calc( 2rem * .7);
  }
}

.mb-2 {
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .mb-2 {
    margin-bottom: calc( 2rem * .7);
  }
}

.my-2 {
  margin-bottom: 2rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .my-2 {
    margin-bottom: calc( 2rem * .7);
    margin-top: calc( 2rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-2 {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-2 {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-2 {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
}

.pl-2 {
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .pl-2 {
    padding-left: calc( 2rem * .7);
  }
}

.pr-2 {
  padding-right: 2rem;
}
@media screen and (max-width: 767px) {
  .pr-2 {
    padding-right: calc( 2rem * .7);
  }
}

.pt-2 {
  padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  .pt-2 {
    padding-top: calc( 2rem * .7);
  }
}

.pb-2 {
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .pb-2 {
    padding-bottom: calc( 2rem * .7);
  }
}

.py-2 {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  .py-2 {
    padding-bottom: calc( 2rem * .7);
    padding-top: calc( 2rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-2 {
    padding-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-2 {
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-2 {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
}

.ml-3 {
  margin-left: 3rem;
}
@media screen and (max-width: 767px) {
  .ml-3 {
    margin-left: calc( 3rem * .7);
  }
}

.mr-3 {
  margin-right: 3rem;
}
@media screen and (max-width: 767px) {
  .mr-3 {
    margin-right: calc( 3rem * .7);
  }
}

.mt-3 {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .mt-3 {
    margin-top: calc( 3rem * .7);
  }
}

.mb-3 {
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .mb-3 {
    margin-bottom: calc( 3rem * .7);
  }
}

.my-3 {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .my-3 {
    margin-bottom: calc( 3rem * .7);
    margin-top: calc( 3rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-3 {
    margin-top: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-3 {
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-3 {
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
}

.pl-3 {
  padding-left: 3rem;
}
@media screen and (max-width: 767px) {
  .pl-3 {
    padding-left: calc( 3rem * .7);
  }
}

.pr-3 {
  padding-right: 3rem;
}
@media screen and (max-width: 767px) {
  .pr-3 {
    padding-right: calc( 3rem * .7);
  }
}

.pt-3 {
  padding-top: 3rem;
}
@media screen and (max-width: 767px) {
  .pt-3 {
    padding-top: calc( 3rem * .7);
  }
}

.pb-3 {
  padding-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .pb-3 {
    padding-bottom: calc( 3rem * .7);
  }
}

.py-3 {
  padding-bottom: 3rem;
  padding-top: 3rem;
}
@media screen and (max-width: 767px) {
  .py-3 {
    padding-bottom: calc( 3rem * .7);
    padding-top: calc( 3rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-3 {
    padding-top: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-3 {
    padding-bottom: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-3 {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }
}

.ml-4 {
  margin-left: 4rem;
}
@media screen and (max-width: 767px) {
  .ml-4 {
    margin-left: calc( 4rem * .7);
  }
}

.mr-4 {
  margin-right: 4rem;
}
@media screen and (max-width: 767px) {
  .mr-4 {
    margin-right: calc( 4rem * .7);
  }
}

.mt-4 {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .mt-4 {
    margin-top: calc( 4rem * .7);
  }
}

.mb-4 {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .mb-4 {
    margin-bottom: calc( 4rem * .7);
  }
}

.my-4 {
  margin-bottom: 4rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .my-4 {
    margin-bottom: calc( 4rem * .7);
    margin-top: calc( 4rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-4 {
    margin-top: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-4 {
    margin-bottom: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-4 {
    margin-bottom: 4rem;
    margin-top: 4rem;
  }
}

.pl-4 {
  padding-left: 4rem;
}
@media screen and (max-width: 767px) {
  .pl-4 {
    padding-left: calc( 4rem * .7);
  }
}

.pr-4 {
  padding-right: 4rem;
}
@media screen and (max-width: 767px) {
  .pr-4 {
    padding-right: calc( 4rem * .7);
  }
}

.pt-4 {
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .pt-4 {
    padding-top: calc( 4rem * .7);
  }
}

.pb-4 {
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .pb-4 {
    padding-bottom: calc( 4rem * .7);
  }
}

.py-4 {
  padding-bottom: 4rem;
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .py-4 {
    padding-bottom: calc( 4rem * .7);
    padding-top: calc( 4rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-4 {
    padding-top: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-4 {
    padding-bottom: 4rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-4 {
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
}

.ml-5 {
  margin-left: 5rem;
}
@media screen and (max-width: 767px) {
  .ml-5 {
    margin-left: calc( 5rem * .7);
  }
}

.mr-5 {
  margin-right: 5rem;
}
@media screen and (max-width: 767px) {
  .mr-5 {
    margin-right: calc( 5rem * .7);
  }
}

.mt-5 {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .mt-5 {
    margin-top: calc( 5rem * .7);
  }
}

.mb-5 {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .mb-5 {
    margin-bottom: calc( 5rem * .7);
  }
}

.my-5 {
  margin-bottom: 5rem;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .my-5 {
    margin-bottom: calc( 5rem * .7);
    margin-top: calc( 5rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-5 {
    margin-top: 5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-5 {
    margin-bottom: 5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-5 {
    margin-bottom: 5rem;
    margin-top: 5rem;
  }
}

.pl-5 {
  padding-left: 5rem;
}
@media screen and (max-width: 767px) {
  .pl-5 {
    padding-left: calc( 5rem * .7);
  }
}

.pr-5 {
  padding-right: 5rem;
}
@media screen and (max-width: 767px) {
  .pr-5 {
    padding-right: calc( 5rem * .7);
  }
}

.pt-5 {
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .pt-5 {
    padding-top: calc( 5rem * .7);
  }
}

.pb-5 {
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .pb-5 {
    padding-bottom: calc( 5rem * .7);
  }
}

.py-5 {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .py-5 {
    padding-bottom: calc( 5rem * .7);
    padding-top: calc( 5rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-5 {
    padding-top: 5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-5 {
    padding-bottom: 5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-5 {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
}

.ml-6 {
  margin-left: 6rem;
}
@media screen and (max-width: 767px) {
  .ml-6 {
    margin-left: calc( 6rem * .7);
  }
}

.mr-6 {
  margin-right: 6rem;
}
@media screen and (max-width: 767px) {
  .mr-6 {
    margin-right: calc( 6rem * .7);
  }
}

.mt-6 {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .mt-6 {
    margin-top: calc( 6rem * .7);
  }
}

.mb-6 {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .mb-6 {
    margin-bottom: calc( 6rem * .7);
  }
}

.my-6 {
  margin-bottom: 6rem;
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .my-6 {
    margin-bottom: calc( 6rem * .7);
    margin-top: calc( 6rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-6 {
    margin-top: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-6 {
    margin-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-6 {
    margin-bottom: 6rem;
    margin-top: 6rem;
  }
}

.pl-6 {
  padding-left: 6rem;
}
@media screen and (max-width: 767px) {
  .pl-6 {
    padding-left: calc( 6rem * .7);
  }
}

.pr-6 {
  padding-right: 6rem;
}
@media screen and (max-width: 767px) {
  .pr-6 {
    padding-right: calc( 6rem * .7);
  }
}

.pt-6 {
  padding-top: 6rem;
}
@media screen and (max-width: 767px) {
  .pt-6 {
    padding-top: calc( 6rem * .7);
  }
}

.pb-6 {
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .pb-6 {
    padding-bottom: calc( 6rem * .7);
  }
}

.py-6 {
  padding-bottom: 6rem;
  padding-top: 6rem;
}
@media screen and (max-width: 767px) {
  .py-6 {
    padding-bottom: calc( 6rem * .7);
    padding-top: calc( 6rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-6 {
    padding-top: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-6 {
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-6 {
    padding-bottom: 6rem;
    padding-top: 6rem;
  }
}

.ml-7 {
  margin-left: 7rem;
}
@media screen and (max-width: 767px) {
  .ml-7 {
    margin-left: calc( 7rem * .7);
  }
}

.mr-7 {
  margin-right: 7rem;
}
@media screen and (max-width: 767px) {
  .mr-7 {
    margin-right: calc( 7rem * .7);
  }
}

.mt-7 {
  margin-top: 7rem;
}
@media screen and (max-width: 767px) {
  .mt-7 {
    margin-top: calc( 7rem * .7);
  }
}

.mb-7 {
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .mb-7 {
    margin-bottom: calc( 7rem * .7);
  }
}

.my-7 {
  margin-bottom: 7rem;
  margin-top: 7rem;
}
@media screen and (max-width: 767px) {
  .my-7 {
    margin-bottom: calc( 7rem * .7);
    margin-top: calc( 7rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-7 {
    margin-top: 7rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-7 {
    margin-bottom: 7rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-7 {
    margin-bottom: 7rem;
    margin-top: 7rem;
  }
}

.pl-7 {
  padding-left: 7rem;
}
@media screen and (max-width: 767px) {
  .pl-7 {
    padding-left: calc( 7rem * .7);
  }
}

.pr-7 {
  padding-right: 7rem;
}
@media screen and (max-width: 767px) {
  .pr-7 {
    padding-right: calc( 7rem * .7);
  }
}

.pt-7 {
  padding-top: 7rem;
}
@media screen and (max-width: 767px) {
  .pt-7 {
    padding-top: calc( 7rem * .7);
  }
}

.pb-7 {
  padding-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .pb-7 {
    padding-bottom: calc( 7rem * .7);
  }
}

.py-7 {
  padding-bottom: 7rem;
  padding-top: 7rem;
}
@media screen and (max-width: 767px) {
  .py-7 {
    padding-bottom: calc( 7rem * .7);
    padding-top: calc( 7rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-7 {
    padding-top: 7rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-7 {
    padding-bottom: 7rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-7 {
    padding-bottom: 7rem;
    padding-top: 7rem;
  }
}

.ml-8 {
  margin-left: 8rem;
}
@media screen and (max-width: 767px) {
  .ml-8 {
    margin-left: calc( 8rem * .7);
  }
}

.mr-8 {
  margin-right: 8rem;
}
@media screen and (max-width: 767px) {
  .mr-8 {
    margin-right: calc( 8rem * .7);
  }
}

.mt-8 {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .mt-8 {
    margin-top: calc( 8rem * .7);
  }
}

.mb-8 {
  margin-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .mb-8 {
    margin-bottom: calc( 8rem * .7);
  }
}

.my-8 {
  margin-bottom: 8rem;
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .my-8 {
    margin-bottom: calc( 8rem * .7);
    margin-top: calc( 8rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-8 {
    margin-top: 8rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-8 {
    margin-bottom: 8rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-8 {
    margin-bottom: 8rem;
    margin-top: 8rem;
  }
}

.pl-8 {
  padding-left: 8rem;
}
@media screen and (max-width: 767px) {
  .pl-8 {
    padding-left: calc( 8rem * .7);
  }
}

.pr-8 {
  padding-right: 8rem;
}
@media screen and (max-width: 767px) {
  .pr-8 {
    padding-right: calc( 8rem * .7);
  }
}

.pt-8 {
  padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .pt-8 {
    padding-top: calc( 8rem * .7);
  }
}

.pb-8 {
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .pb-8 {
    padding-bottom: calc( 8rem * .7);
  }
}

.py-8 {
  padding-bottom: 8rem;
  padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .py-8 {
    padding-bottom: calc( 8rem * .7);
    padding-top: calc( 8rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-8 {
    padding-top: 8rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-8 {
    padding-bottom: 8rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-8 {
    padding-bottom: 8rem;
    padding-top: 8rem;
  }
}

.ml-9 {
  margin-left: 9rem;
}
@media screen and (max-width: 767px) {
  .ml-9 {
    margin-left: calc( 9rem * .7);
  }
}

.mr-9 {
  margin-right: 9rem;
}
@media screen and (max-width: 767px) {
  .mr-9 {
    margin-right: calc( 9rem * .7);
  }
}

.mt-9 {
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .mt-9 {
    margin-top: calc( 9rem * .7);
  }
}

.mb-9 {
  margin-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .mb-9 {
    margin-bottom: calc( 9rem * .7);
  }
}

.my-9 {
  margin-bottom: 9rem;
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .my-9 {
    margin-bottom: calc( 9rem * .7);
    margin-top: calc( 9rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-9 {
    margin-top: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-9 {
    margin-bottom: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-9 {
    margin-bottom: 9rem;
    margin-top: 9rem;
  }
}

.pl-9 {
  padding-left: 9rem;
}
@media screen and (max-width: 767px) {
  .pl-9 {
    padding-left: calc( 9rem * .7);
  }
}

.pr-9 {
  padding-right: 9rem;
}
@media screen and (max-width: 767px) {
  .pr-9 {
    padding-right: calc( 9rem * .7);
  }
}

.pt-9 {
  padding-top: 9rem;
}
@media screen and (max-width: 767px) {
  .pt-9 {
    padding-top: calc( 9rem * .7);
  }
}

.pb-9 {
  padding-bottom: 9rem;
}
@media screen and (max-width: 767px) {
  .pb-9 {
    padding-bottom: calc( 9rem * .7);
  }
}

.py-9 {
  padding-bottom: 9rem;
  padding-top: 9rem;
}
@media screen and (max-width: 767px) {
  .py-9 {
    padding-bottom: calc( 9rem * .7);
    padding-top: calc( 9rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-9 {
    padding-top: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-9 {
    padding-bottom: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-9 {
    padding-bottom: 9rem;
    padding-top: 9rem;
  }
}

.ml-10 {
  margin-left: 10rem;
}
@media screen and (max-width: 767px) {
  .ml-10 {
    margin-left: calc( 10rem * .7);
  }
}

.mr-10 {
  margin-right: 10rem;
}
@media screen and (max-width: 767px) {
  .mr-10 {
    margin-right: calc( 10rem * .7);
  }
}

.mt-10 {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .mt-10 {
    margin-top: calc( 10rem * .7);
  }
}

.mb-10 {
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .mb-10 {
    margin-bottom: calc( 10rem * .7);
  }
}

.my-10 {
  margin-bottom: 10rem;
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .my-10 {
    margin-bottom: calc( 10rem * .7);
    margin-top: calc( 10rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-10 {
    margin-top: 10rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-10 {
    margin-bottom: 10rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-10 {
    margin-bottom: 10rem;
    margin-top: 10rem;
  }
}

.pl-10 {
  padding-left: 10rem;
}
@media screen and (max-width: 767px) {
  .pl-10 {
    padding-left: calc( 10rem * .7);
  }
}

.pr-10 {
  padding-right: 10rem;
}
@media screen and (max-width: 767px) {
  .pr-10 {
    padding-right: calc( 10rem * .7);
  }
}

.pt-10 {
  padding-top: 10rem;
}
@media screen and (max-width: 767px) {
  .pt-10 {
    padding-top: calc( 10rem * .7);
  }
}

.pb-10 {
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  .pb-10 {
    padding-bottom: calc( 10rem * .7);
  }
}

.py-10 {
  padding-bottom: 10rem;
  padding-top: 10rem;
}
@media screen and (max-width: 767px) {
  .py-10 {
    padding-bottom: calc( 10rem * .7);
    padding-top: calc( 10rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-10 {
    padding-top: 10rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-10 {
    padding-bottom: 10rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-10 {
    padding-bottom: 10rem;
    padding-top: 10rem;
  }
}

.ml-11 {
  margin-left: 11rem;
}
@media screen and (max-width: 767px) {
  .ml-11 {
    margin-left: calc( 11rem * .7);
  }
}

.mr-11 {
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  .mr-11 {
    margin-right: calc( 11rem * .7);
  }
}

.mt-11 {
  margin-top: 11rem;
}
@media screen and (max-width: 767px) {
  .mt-11 {
    margin-top: calc( 11rem * .7);
  }
}

.mb-11 {
  margin-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .mb-11 {
    margin-bottom: calc( 11rem * .7);
  }
}

.my-11 {
  margin-bottom: 11rem;
  margin-top: 11rem;
}
@media screen and (max-width: 767px) {
  .my-11 {
    margin-bottom: calc( 11rem * .7);
    margin-top: calc( 11rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-11 {
    margin-top: 11rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-11 {
    margin-bottom: 11rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-11 {
    margin-bottom: 11rem;
    margin-top: 11rem;
  }
}

.pl-11 {
  padding-left: 11rem;
}
@media screen and (max-width: 767px) {
  .pl-11 {
    padding-left: calc( 11rem * .7);
  }
}

.pr-11 {
  padding-right: 11rem;
}
@media screen and (max-width: 767px) {
  .pr-11 {
    padding-right: calc( 11rem * .7);
  }
}

.pt-11 {
  padding-top: 11rem;
}
@media screen and (max-width: 767px) {
  .pt-11 {
    padding-top: calc( 11rem * .7);
  }
}

.pb-11 {
  padding-bottom: 11rem;
}
@media screen and (max-width: 767px) {
  .pb-11 {
    padding-bottom: calc( 11rem * .7);
  }
}

.py-11 {
  padding-bottom: 11rem;
  padding-top: 11rem;
}
@media screen and (max-width: 767px) {
  .py-11 {
    padding-bottom: calc( 11rem * .7);
    padding-top: calc( 11rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-11 {
    padding-top: 11rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-11 {
    padding-bottom: 11rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-11 {
    padding-bottom: 11rem;
    padding-top: 11rem;
  }
}

.ml-12 {
  margin-left: 12rem;
}
@media screen and (max-width: 767px) {
  .ml-12 {
    margin-left: calc( 12rem * .7);
  }
}

.mr-12 {
  margin-right: 12rem;
}
@media screen and (max-width: 767px) {
  .mr-12 {
    margin-right: calc( 12rem * .7);
  }
}

.mt-12 {
  margin-top: 12rem;
}
@media screen and (max-width: 767px) {
  .mt-12 {
    margin-top: calc( 12rem * .7);
  }
}

.mb-12 {
  margin-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .mb-12 {
    margin-bottom: calc( 12rem * .7);
  }
}

.my-12 {
  margin-bottom: 12rem;
  margin-top: 12rem;
}
@media screen and (max-width: 767px) {
  .my-12 {
    margin-bottom: calc( 12rem * .7);
    margin-top: calc( 12rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-12 {
    margin-top: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-12 {
    margin-bottom: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-12 {
    margin-bottom: 12rem;
    margin-top: 12rem;
  }
}

.pl-12 {
  padding-left: 12rem;
}
@media screen and (max-width: 767px) {
  .pl-12 {
    padding-left: calc( 12rem * .7);
  }
}

.pr-12 {
  padding-right: 12rem;
}
@media screen and (max-width: 767px) {
  .pr-12 {
    padding-right: calc( 12rem * .7);
  }
}

.pt-12 {
  padding-top: 12rem;
}
@media screen and (max-width: 767px) {
  .pt-12 {
    padding-top: calc( 12rem * .7);
  }
}

.pb-12 {
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .pb-12 {
    padding-bottom: calc( 12rem * .7);
  }
}

.py-12 {
  padding-bottom: 12rem;
  padding-top: 12rem;
}
@media screen and (max-width: 767px) {
  .py-12 {
    padding-bottom: calc( 12rem * .7);
    padding-top: calc( 12rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-12 {
    padding-top: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-12 {
    padding-bottom: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-12 {
    padding-bottom: 12rem;
    padding-top: 12rem;
  }
}

.ml-13 {
  margin-left: 13rem;
}
@media screen and (max-width: 767px) {
  .ml-13 {
    margin-left: calc( 13rem * .7);
  }
}

.mr-13 {
  margin-right: 13rem;
}
@media screen and (max-width: 767px) {
  .mr-13 {
    margin-right: calc( 13rem * .7);
  }
}

.mt-13 {
  margin-top: 13rem;
}
@media screen and (max-width: 767px) {
  .mt-13 {
    margin-top: calc( 13rem * .7);
  }
}

.mb-13 {
  margin-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .mb-13 {
    margin-bottom: calc( 13rem * .7);
  }
}

.my-13 {
  margin-bottom: 13rem;
  margin-top: 13rem;
}
@media screen and (max-width: 767px) {
  .my-13 {
    margin-bottom: calc( 13rem * .7);
    margin-top: calc( 13rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-13 {
    margin-top: 13rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-13 {
    margin-bottom: 13rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-13 {
    margin-bottom: 13rem;
    margin-top: 13rem;
  }
}

.pl-13 {
  padding-left: 13rem;
}
@media screen and (max-width: 767px) {
  .pl-13 {
    padding-left: calc( 13rem * .7);
  }
}

.pr-13 {
  padding-right: 13rem;
}
@media screen and (max-width: 767px) {
  .pr-13 {
    padding-right: calc( 13rem * .7);
  }
}

.pt-13 {
  padding-top: 13rem;
}
@media screen and (max-width: 767px) {
  .pt-13 {
    padding-top: calc( 13rem * .7);
  }
}

.pb-13 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 767px) {
  .pb-13 {
    padding-bottom: calc( 13rem * .7);
  }
}

.py-13 {
  padding-bottom: 13rem;
  padding-top: 13rem;
}
@media screen and (max-width: 767px) {
  .py-13 {
    padding-bottom: calc( 13rem * .7);
    padding-top: calc( 13rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-13 {
    padding-top: 13rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-13 {
    padding-bottom: 13rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-13 {
    padding-bottom: 13rem;
    padding-top: 13rem;
  }
}

.ml-14 {
  margin-left: 14rem;
}
@media screen and (max-width: 767px) {
  .ml-14 {
    margin-left: calc( 14rem * .7);
  }
}

.mr-14 {
  margin-right: 14rem;
}
@media screen and (max-width: 767px) {
  .mr-14 {
    margin-right: calc( 14rem * .7);
  }
}

.mt-14 {
  margin-top: 14rem;
}
@media screen and (max-width: 767px) {
  .mt-14 {
    margin-top: calc( 14rem * .7);
  }
}

.mb-14 {
  margin-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .mb-14 {
    margin-bottom: calc( 14rem * .7);
  }
}

.my-14 {
  margin-bottom: 14rem;
  margin-top: 14rem;
}
@media screen and (max-width: 767px) {
  .my-14 {
    margin-bottom: calc( 14rem * .7);
    margin-top: calc( 14rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-14 {
    margin-top: 14rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-14 {
    margin-bottom: 14rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-14 {
    margin-bottom: 14rem;
    margin-top: 14rem;
  }
}

.pl-14 {
  padding-left: 14rem;
}
@media screen and (max-width: 767px) {
  .pl-14 {
    padding-left: calc( 14rem * .7);
  }
}

.pr-14 {
  padding-right: 14rem;
}
@media screen and (max-width: 767px) {
  .pr-14 {
    padding-right: calc( 14rem * .7);
  }
}

.pt-14 {
  padding-top: 14rem;
}
@media screen and (max-width: 767px) {
  .pt-14 {
    padding-top: calc( 14rem * .7);
  }
}

.pb-14 {
  padding-bottom: 14rem;
}
@media screen and (max-width: 767px) {
  .pb-14 {
    padding-bottom: calc( 14rem * .7);
  }
}

.py-14 {
  padding-bottom: 14rem;
  padding-top: 14rem;
}
@media screen and (max-width: 767px) {
  .py-14 {
    padding-bottom: calc( 14rem * .7);
    padding-top: calc( 14rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-14 {
    padding-top: 14rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-14 {
    padding-bottom: 14rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-14 {
    padding-bottom: 14rem;
    padding-top: 14rem;
  }
}

.ml-15 {
  margin-left: 15rem;
}
@media screen and (max-width: 767px) {
  .ml-15 {
    margin-left: calc( 15rem * .7);
  }
}

.mr-15 {
  margin-right: 15rem;
}
@media screen and (max-width: 767px) {
  .mr-15 {
    margin-right: calc( 15rem * .7);
  }
}

.mt-15 {
  margin-top: 15rem;
}
@media screen and (max-width: 767px) {
  .mt-15 {
    margin-top: calc( 15rem * .7);
  }
}

.mb-15 {
  margin-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .mb-15 {
    margin-bottom: calc( 15rem * .7);
  }
}

.my-15 {
  margin-bottom: 15rem;
  margin-top: 15rem;
}
@media screen and (max-width: 767px) {
  .my-15 {
    margin-bottom: calc( 15rem * .7);
    margin-top: calc( 15rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-15 {
    margin-top: 15rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-15 {
    margin-bottom: 15rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-15 {
    margin-bottom: 15rem;
    margin-top: 15rem;
  }
}

.pl-15 {
  padding-left: 15rem;
}
@media screen and (max-width: 767px) {
  .pl-15 {
    padding-left: calc( 15rem * .7);
  }
}

.pr-15 {
  padding-right: 15rem;
}
@media screen and (max-width: 767px) {
  .pr-15 {
    padding-right: calc( 15rem * .7);
  }
}

.pt-15 {
  padding-top: 15rem;
}
@media screen and (max-width: 767px) {
  .pt-15 {
    padding-top: calc( 15rem * .7);
  }
}

.pb-15 {
  padding-bottom: 15rem;
}
@media screen and (max-width: 767px) {
  .pb-15 {
    padding-bottom: calc( 15rem * .7);
  }
}

.py-15 {
  padding-bottom: 15rem;
  padding-top: 15rem;
}
@media screen and (max-width: 767px) {
  .py-15 {
    padding-bottom: calc( 15rem * .7);
    padding-top: calc( 15rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-15 {
    padding-top: 15rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-15 {
    padding-bottom: 15rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-15 {
    padding-bottom: 15rem;
    padding-top: 15rem;
  }
}

.ml-16 {
  margin-left: 16rem;
}
@media screen and (max-width: 767px) {
  .ml-16 {
    margin-left: calc( 16rem * .7);
  }
}

.mr-16 {
  margin-right: 16rem;
}
@media screen and (max-width: 767px) {
  .mr-16 {
    margin-right: calc( 16rem * .7);
  }
}

.mt-16 {
  margin-top: 16rem;
}
@media screen and (max-width: 767px) {
  .mt-16 {
    margin-top: calc( 16rem * .7);
  }
}

.mb-16 {
  margin-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .mb-16 {
    margin-bottom: calc( 16rem * .7);
  }
}

.my-16 {
  margin-bottom: 16rem;
  margin-top: 16rem;
}
@media screen and (max-width: 767px) {
  .my-16 {
    margin-bottom: calc( 16rem * .7);
    margin-top: calc( 16rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-16 {
    margin-top: 16rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-16 {
    margin-bottom: 16rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-16 {
    margin-bottom: 16rem;
    margin-top: 16rem;
  }
}

.pl-16 {
  padding-left: 16rem;
}
@media screen and (max-width: 767px) {
  .pl-16 {
    padding-left: calc( 16rem * .7);
  }
}

.pr-16 {
  padding-right: 16rem;
}
@media screen and (max-width: 767px) {
  .pr-16 {
    padding-right: calc( 16rem * .7);
  }
}

.pt-16 {
  padding-top: 16rem;
}
@media screen and (max-width: 767px) {
  .pt-16 {
    padding-top: calc( 16rem * .7);
  }
}

.pb-16 {
  padding-bottom: 16rem;
}
@media screen and (max-width: 767px) {
  .pb-16 {
    padding-bottom: calc( 16rem * .7);
  }
}

.py-16 {
  padding-bottom: 16rem;
  padding-top: 16rem;
}
@media screen and (max-width: 767px) {
  .py-16 {
    padding-bottom: calc( 16rem * .7);
    padding-top: calc( 16rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-16 {
    padding-top: 16rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-16 {
    padding-bottom: 16rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-16 {
    padding-bottom: 16rem;
    padding-top: 16rem;
  }
}

.ml-17 {
  margin-left: 17rem;
}
@media screen and (max-width: 767px) {
  .ml-17 {
    margin-left: calc( 17rem * .7);
  }
}

.mr-17 {
  margin-right: 17rem;
}
@media screen and (max-width: 767px) {
  .mr-17 {
    margin-right: calc( 17rem * .7);
  }
}

.mt-17 {
  margin-top: 17rem;
}
@media screen and (max-width: 767px) {
  .mt-17 {
    margin-top: calc( 17rem * .7);
  }
}

.mb-17 {
  margin-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .mb-17 {
    margin-bottom: calc( 17rem * .7);
  }
}

.my-17 {
  margin-bottom: 17rem;
  margin-top: 17rem;
}
@media screen and (max-width: 767px) {
  .my-17 {
    margin-bottom: calc( 17rem * .7);
    margin-top: calc( 17rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-17 {
    margin-top: 17rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-17 {
    margin-bottom: 17rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-17 {
    margin-bottom: 17rem;
    margin-top: 17rem;
  }
}

.pl-17 {
  padding-left: 17rem;
}
@media screen and (max-width: 767px) {
  .pl-17 {
    padding-left: calc( 17rem * .7);
  }
}

.pr-17 {
  padding-right: 17rem;
}
@media screen and (max-width: 767px) {
  .pr-17 {
    padding-right: calc( 17rem * .7);
  }
}

.pt-17 {
  padding-top: 17rem;
}
@media screen and (max-width: 767px) {
  .pt-17 {
    padding-top: calc( 17rem * .7);
  }
}

.pb-17 {
  padding-bottom: 17rem;
}
@media screen and (max-width: 767px) {
  .pb-17 {
    padding-bottom: calc( 17rem * .7);
  }
}

.py-17 {
  padding-bottom: 17rem;
  padding-top: 17rem;
}
@media screen and (max-width: 767px) {
  .py-17 {
    padding-bottom: calc( 17rem * .7);
    padding-top: calc( 17rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-17 {
    padding-top: 17rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-17 {
    padding-bottom: 17rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-17 {
    padding-bottom: 17rem;
    padding-top: 17rem;
  }
}

.ml-18 {
  margin-left: 18rem;
}
@media screen and (max-width: 767px) {
  .ml-18 {
    margin-left: calc( 18rem * .7);
  }
}

.mr-18 {
  margin-right: 18rem;
}
@media screen and (max-width: 767px) {
  .mr-18 {
    margin-right: calc( 18rem * .7);
  }
}

.mt-18 {
  margin-top: 18rem;
}
@media screen and (max-width: 767px) {
  .mt-18 {
    margin-top: calc( 18rem * .7);
  }
}

.mb-18 {
  margin-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .mb-18 {
    margin-bottom: calc( 18rem * .7);
  }
}

.my-18 {
  margin-bottom: 18rem;
  margin-top: 18rem;
}
@media screen and (max-width: 767px) {
  .my-18 {
    margin-bottom: calc( 18rem * .7);
    margin-top: calc( 18rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-18 {
    margin-top: 18rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-18 {
    margin-bottom: 18rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-18 {
    margin-bottom: 18rem;
    margin-top: 18rem;
  }
}

.pl-18 {
  padding-left: 18rem;
}
@media screen and (max-width: 767px) {
  .pl-18 {
    padding-left: calc( 18rem * .7);
  }
}

.pr-18 {
  padding-right: 18rem;
}
@media screen and (max-width: 767px) {
  .pr-18 {
    padding-right: calc( 18rem * .7);
  }
}

.pt-18 {
  padding-top: 18rem;
}
@media screen and (max-width: 767px) {
  .pt-18 {
    padding-top: calc( 18rem * .7);
  }
}

.pb-18 {
  padding-bottom: 18rem;
}
@media screen and (max-width: 767px) {
  .pb-18 {
    padding-bottom: calc( 18rem * .7);
  }
}

.py-18 {
  padding-bottom: 18rem;
  padding-top: 18rem;
}
@media screen and (max-width: 767px) {
  .py-18 {
    padding-bottom: calc( 18rem * .7);
    padding-top: calc( 18rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-18 {
    padding-top: 18rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-18 {
    padding-bottom: 18rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-18 {
    padding-bottom: 18rem;
    padding-top: 18rem;
  }
}

.ml-19 {
  margin-left: 19rem;
}
@media screen and (max-width: 767px) {
  .ml-19 {
    margin-left: calc( 19rem * .7);
  }
}

.mr-19 {
  margin-right: 19rem;
}
@media screen and (max-width: 767px) {
  .mr-19 {
    margin-right: calc( 19rem * .7);
  }
}

.mt-19 {
  margin-top: 19rem;
}
@media screen and (max-width: 767px) {
  .mt-19 {
    margin-top: calc( 19rem * .7);
  }
}

.mb-19 {
  margin-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .mb-19 {
    margin-bottom: calc( 19rem * .7);
  }
}

.my-19 {
  margin-bottom: 19rem;
  margin-top: 19rem;
}
@media screen and (max-width: 767px) {
  .my-19 {
    margin-bottom: calc( 19rem * .7);
    margin-top: calc( 19rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-19 {
    margin-top: 19rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-19 {
    margin-bottom: 19rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-19 {
    margin-bottom: 19rem;
    margin-top: 19rem;
  }
}

.pl-19 {
  padding-left: 19rem;
}
@media screen and (max-width: 767px) {
  .pl-19 {
    padding-left: calc( 19rem * .7);
  }
}

.pr-19 {
  padding-right: 19rem;
}
@media screen and (max-width: 767px) {
  .pr-19 {
    padding-right: calc( 19rem * .7);
  }
}

.pt-19 {
  padding-top: 19rem;
}
@media screen and (max-width: 767px) {
  .pt-19 {
    padding-top: calc( 19rem * .7);
  }
}

.pb-19 {
  padding-bottom: 19rem;
}
@media screen and (max-width: 767px) {
  .pb-19 {
    padding-bottom: calc( 19rem * .7);
  }
}

.py-19 {
  padding-bottom: 19rem;
  padding-top: 19rem;
}
@media screen and (max-width: 767px) {
  .py-19 {
    padding-bottom: calc( 19rem * .7);
    padding-top: calc( 19rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-19 {
    padding-top: 19rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-19 {
    padding-bottom: 19rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-19 {
    padding-bottom: 19rem;
    padding-top: 19rem;
  }
}

.ml-20 {
  margin-left: 20rem;
}
@media screen and (max-width: 767px) {
  .ml-20 {
    margin-left: calc( 20rem * .7);
  }
}

.mr-20 {
  margin-right: 20rem;
}
@media screen and (max-width: 767px) {
  .mr-20 {
    margin-right: calc( 20rem * .7);
  }
}

.mt-20 {
  margin-top: 20rem;
}
@media screen and (max-width: 767px) {
  .mt-20 {
    margin-top: calc( 20rem * .7);
  }
}

.mb-20 {
  margin-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .mb-20 {
    margin-bottom: calc( 20rem * .7);
  }
}

.my-20 {
  margin-bottom: 20rem;
  margin-top: 20rem;
}
@media screen and (max-width: 767px) {
  .my-20 {
    margin-bottom: calc( 20rem * .7);
    margin-top: calc( 20rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-20 {
    margin-top: 20rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-20 {
    margin-bottom: 20rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-20 {
    margin-bottom: 20rem;
    margin-top: 20rem;
  }
}

.pl-20 {
  padding-left: 20rem;
}
@media screen and (max-width: 767px) {
  .pl-20 {
    padding-left: calc( 20rem * .7);
  }
}

.pr-20 {
  padding-right: 20rem;
}
@media screen and (max-width: 767px) {
  .pr-20 {
    padding-right: calc( 20rem * .7);
  }
}

.pt-20 {
  padding-top: 20rem;
}
@media screen and (max-width: 767px) {
  .pt-20 {
    padding-top: calc( 20rem * .7);
  }
}

.pb-20 {
  padding-bottom: 20rem;
}
@media screen and (max-width: 767px) {
  .pb-20 {
    padding-bottom: calc( 20rem * .7);
  }
}

.py-20 {
  padding-bottom: 20rem;
  padding-top: 20rem;
}
@media screen and (max-width: 767px) {
  .py-20 {
    padding-bottom: calc( 20rem * .7);
    padding-top: calc( 20rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-20 {
    padding-top: 20rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-20 {
    padding-bottom: 20rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-20 {
    padding-bottom: 20rem;
    padding-top: 20rem;
  }
}

.ml-21 {
  margin-left: 21rem;
}
@media screen and (max-width: 767px) {
  .ml-21 {
    margin-left: calc( 21rem * .7);
  }
}

.mr-21 {
  margin-right: 21rem;
}
@media screen and (max-width: 767px) {
  .mr-21 {
    margin-right: calc( 21rem * .7);
  }
}

.mt-21 {
  margin-top: 21rem;
}
@media screen and (max-width: 767px) {
  .mt-21 {
    margin-top: calc( 21rem * .7);
  }
}

.mb-21 {
  margin-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .mb-21 {
    margin-bottom: calc( 21rem * .7);
  }
}

.my-21 {
  margin-bottom: 21rem;
  margin-top: 21rem;
}
@media screen and (max-width: 767px) {
  .my-21 {
    margin-bottom: calc( 21rem * .7);
    margin-top: calc( 21rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-21 {
    margin-top: 21rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-21 {
    margin-bottom: 21rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-21 {
    margin-bottom: 21rem;
    margin-top: 21rem;
  }
}

.pl-21 {
  padding-left: 21rem;
}
@media screen and (max-width: 767px) {
  .pl-21 {
    padding-left: calc( 21rem * .7);
  }
}

.pr-21 {
  padding-right: 21rem;
}
@media screen and (max-width: 767px) {
  .pr-21 {
    padding-right: calc( 21rem * .7);
  }
}

.pt-21 {
  padding-top: 21rem;
}
@media screen and (max-width: 767px) {
  .pt-21 {
    padding-top: calc( 21rem * .7);
  }
}

.pb-21 {
  padding-bottom: 21rem;
}
@media screen and (max-width: 767px) {
  .pb-21 {
    padding-bottom: calc( 21rem * .7);
  }
}

.py-21 {
  padding-bottom: 21rem;
  padding-top: 21rem;
}
@media screen and (max-width: 767px) {
  .py-21 {
    padding-bottom: calc( 21rem * .7);
    padding-top: calc( 21rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-21 {
    padding-top: 21rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-21 {
    padding-bottom: 21rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-21 {
    padding-bottom: 21rem;
    padding-top: 21rem;
  }
}

.ml-22 {
  margin-left: 22rem;
}
@media screen and (max-width: 767px) {
  .ml-22 {
    margin-left: calc( 22rem * .7);
  }
}

.mr-22 {
  margin-right: 22rem;
}
@media screen and (max-width: 767px) {
  .mr-22 {
    margin-right: calc( 22rem * .7);
  }
}

.mt-22 {
  margin-top: 22rem;
}
@media screen and (max-width: 767px) {
  .mt-22 {
    margin-top: calc( 22rem * .7);
  }
}

.mb-22 {
  margin-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .mb-22 {
    margin-bottom: calc( 22rem * .7);
  }
}

.my-22 {
  margin-bottom: 22rem;
  margin-top: 22rem;
}
@media screen and (max-width: 767px) {
  .my-22 {
    margin-bottom: calc( 22rem * .7);
    margin-top: calc( 22rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-22 {
    margin-top: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-22 {
    margin-bottom: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-22 {
    margin-bottom: 22rem;
    margin-top: 22rem;
  }
}

.pl-22 {
  padding-left: 22rem;
}
@media screen and (max-width: 767px) {
  .pl-22 {
    padding-left: calc( 22rem * .7);
  }
}

.pr-22 {
  padding-right: 22rem;
}
@media screen and (max-width: 767px) {
  .pr-22 {
    padding-right: calc( 22rem * .7);
  }
}

.pt-22 {
  padding-top: 22rem;
}
@media screen and (max-width: 767px) {
  .pt-22 {
    padding-top: calc( 22rem * .7);
  }
}

.pb-22 {
  padding-bottom: 22rem;
}
@media screen and (max-width: 767px) {
  .pb-22 {
    padding-bottom: calc( 22rem * .7);
  }
}

.py-22 {
  padding-bottom: 22rem;
  padding-top: 22rem;
}
@media screen and (max-width: 767px) {
  .py-22 {
    padding-bottom: calc( 22rem * .7);
    padding-top: calc( 22rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-22 {
    padding-top: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-22 {
    padding-bottom: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-22 {
    padding-bottom: 22rem;
    padding-top: 22rem;
  }
}

.ml-23 {
  margin-left: 23rem;
}
@media screen and (max-width: 767px) {
  .ml-23 {
    margin-left: calc( 23rem * .7);
  }
}

.mr-23 {
  margin-right: 23rem;
}
@media screen and (max-width: 767px) {
  .mr-23 {
    margin-right: calc( 23rem * .7);
  }
}

.mt-23 {
  margin-top: 23rem;
}
@media screen and (max-width: 767px) {
  .mt-23 {
    margin-top: calc( 23rem * .7);
  }
}

.mb-23 {
  margin-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .mb-23 {
    margin-bottom: calc( 23rem * .7);
  }
}

.my-23 {
  margin-bottom: 23rem;
  margin-top: 23rem;
}
@media screen and (max-width: 767px) {
  .my-23 {
    margin-bottom: calc( 23rem * .7);
    margin-top: calc( 23rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-23 {
    margin-top: 23rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-23 {
    margin-bottom: 23rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-23 {
    margin-bottom: 23rem;
    margin-top: 23rem;
  }
}

.pl-23 {
  padding-left: 23rem;
}
@media screen and (max-width: 767px) {
  .pl-23 {
    padding-left: calc( 23rem * .7);
  }
}

.pr-23 {
  padding-right: 23rem;
}
@media screen and (max-width: 767px) {
  .pr-23 {
    padding-right: calc( 23rem * .7);
  }
}

.pt-23 {
  padding-top: 23rem;
}
@media screen and (max-width: 767px) {
  .pt-23 {
    padding-top: calc( 23rem * .7);
  }
}

.pb-23 {
  padding-bottom: 23rem;
}
@media screen and (max-width: 767px) {
  .pb-23 {
    padding-bottom: calc( 23rem * .7);
  }
}

.py-23 {
  padding-bottom: 23rem;
  padding-top: 23rem;
}
@media screen and (max-width: 767px) {
  .py-23 {
    padding-bottom: calc( 23rem * .7);
    padding-top: calc( 23rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-23 {
    padding-top: 23rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-23 {
    padding-bottom: 23rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-23 {
    padding-bottom: 23rem;
    padding-top: 23rem;
  }
}

.ml-24 {
  margin-left: 24rem;
}
@media screen and (max-width: 767px) {
  .ml-24 {
    margin-left: calc( 24rem * .7);
  }
}

.mr-24 {
  margin-right: 24rem;
}
@media screen and (max-width: 767px) {
  .mr-24 {
    margin-right: calc( 24rem * .7);
  }
}

.mt-24 {
  margin-top: 24rem;
}
@media screen and (max-width: 767px) {
  .mt-24 {
    margin-top: calc( 24rem * .7);
  }
}

.mb-24 {
  margin-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .mb-24 {
    margin-bottom: calc( 24rem * .7);
  }
}

.my-24 {
  margin-bottom: 24rem;
  margin-top: 24rem;
}
@media screen and (max-width: 767px) {
  .my-24 {
    margin-bottom: calc( 24rem * .7);
    margin-top: calc( 24rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-24 {
    margin-top: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-24 {
    margin-bottom: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-24 {
    margin-bottom: 24rem;
    margin-top: 24rem;
  }
}

.pl-24 {
  padding-left: 24rem;
}
@media screen and (max-width: 767px) {
  .pl-24 {
    padding-left: calc( 24rem * .7);
  }
}

.pr-24 {
  padding-right: 24rem;
}
@media screen and (max-width: 767px) {
  .pr-24 {
    padding-right: calc( 24rem * .7);
  }
}

.pt-24 {
  padding-top: 24rem;
}
@media screen and (max-width: 767px) {
  .pt-24 {
    padding-top: calc( 24rem * .7);
  }
}

.pb-24 {
  padding-bottom: 24rem;
}
@media screen and (max-width: 767px) {
  .pb-24 {
    padding-bottom: calc( 24rem * .7);
  }
}

.py-24 {
  padding-bottom: 24rem;
  padding-top: 24rem;
}
@media screen and (max-width: 767px) {
  .py-24 {
    padding-bottom: calc( 24rem * .7);
    padding-top: calc( 24rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-24 {
    padding-top: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-24 {
    padding-bottom: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-24 {
    padding-bottom: 24rem;
    padding-top: 24rem;
  }
}

.ml-25 {
  margin-left: 25rem;
}
@media screen and (max-width: 767px) {
  .ml-25 {
    margin-left: calc( 25rem * .7);
  }
}

.mr-25 {
  margin-right: 25rem;
}
@media screen and (max-width: 767px) {
  .mr-25 {
    margin-right: calc( 25rem * .7);
  }
}

.mt-25 {
  margin-top: 25rem;
}
@media screen and (max-width: 767px) {
  .mt-25 {
    margin-top: calc( 25rem * .7);
  }
}

.mb-25 {
  margin-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .mb-25 {
    margin-bottom: calc( 25rem * .7);
  }
}

.my-25 {
  margin-bottom: 25rem;
  margin-top: 25rem;
}
@media screen and (max-width: 767px) {
  .my-25 {
    margin-bottom: calc( 25rem * .7);
    margin-top: calc( 25rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-25 {
    margin-top: 25rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-25 {
    margin-bottom: 25rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-25 {
    margin-bottom: 25rem;
    margin-top: 25rem;
  }
}

.pl-25 {
  padding-left: 25rem;
}
@media screen and (max-width: 767px) {
  .pl-25 {
    padding-left: calc( 25rem * .7);
  }
}

.pr-25 {
  padding-right: 25rem;
}
@media screen and (max-width: 767px) {
  .pr-25 {
    padding-right: calc( 25rem * .7);
  }
}

.pt-25 {
  padding-top: 25rem;
}
@media screen and (max-width: 767px) {
  .pt-25 {
    padding-top: calc( 25rem * .7);
  }
}

.pb-25 {
  padding-bottom: 25rem;
}
@media screen and (max-width: 767px) {
  .pb-25 {
    padding-bottom: calc( 25rem * .7);
  }
}

.py-25 {
  padding-bottom: 25rem;
  padding-top: 25rem;
}
@media screen and (max-width: 767px) {
  .py-25 {
    padding-bottom: calc( 25rem * .7);
    padding-top: calc( 25rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-25 {
    padding-top: 25rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-25 {
    padding-bottom: 25rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-25 {
    padding-bottom: 25rem;
    padding-top: 25rem;
  }
}

.ml-26 {
  margin-left: 26rem;
}
@media screen and (max-width: 767px) {
  .ml-26 {
    margin-left: calc( 26rem * .7);
  }
}

.mr-26 {
  margin-right: 26rem;
}
@media screen and (max-width: 767px) {
  .mr-26 {
    margin-right: calc( 26rem * .7);
  }
}

.mt-26 {
  margin-top: 26rem;
}
@media screen and (max-width: 767px) {
  .mt-26 {
    margin-top: calc( 26rem * .7);
  }
}

.mb-26 {
  margin-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .mb-26 {
    margin-bottom: calc( 26rem * .7);
  }
}

.my-26 {
  margin-bottom: 26rem;
  margin-top: 26rem;
}
@media screen and (max-width: 767px) {
  .my-26 {
    margin-bottom: calc( 26rem * .7);
    margin-top: calc( 26rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-26 {
    margin-top: 26rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-26 {
    margin-bottom: 26rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-26 {
    margin-bottom: 26rem;
    margin-top: 26rem;
  }
}

.pl-26 {
  padding-left: 26rem;
}
@media screen and (max-width: 767px) {
  .pl-26 {
    padding-left: calc( 26rem * .7);
  }
}

.pr-26 {
  padding-right: 26rem;
}
@media screen and (max-width: 767px) {
  .pr-26 {
    padding-right: calc( 26rem * .7);
  }
}

.pt-26 {
  padding-top: 26rem;
}
@media screen and (max-width: 767px) {
  .pt-26 {
    padding-top: calc( 26rem * .7);
  }
}

.pb-26 {
  padding-bottom: 26rem;
}
@media screen and (max-width: 767px) {
  .pb-26 {
    padding-bottom: calc( 26rem * .7);
  }
}

.py-26 {
  padding-bottom: 26rem;
  padding-top: 26rem;
}
@media screen and (max-width: 767px) {
  .py-26 {
    padding-bottom: calc( 26rem * .7);
    padding-top: calc( 26rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-26 {
    padding-top: 26rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-26 {
    padding-bottom: 26rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-26 {
    padding-bottom: 26rem;
    padding-top: 26rem;
  }
}

.ml-27 {
  margin-left: 27rem;
}
@media screen and (max-width: 767px) {
  .ml-27 {
    margin-left: calc( 27rem * .7);
  }
}

.mr-27 {
  margin-right: 27rem;
}
@media screen and (max-width: 767px) {
  .mr-27 {
    margin-right: calc( 27rem * .7);
  }
}

.mt-27 {
  margin-top: 27rem;
}
@media screen and (max-width: 767px) {
  .mt-27 {
    margin-top: calc( 27rem * .7);
  }
}

.mb-27 {
  margin-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .mb-27 {
    margin-bottom: calc( 27rem * .7);
  }
}

.my-27 {
  margin-bottom: 27rem;
  margin-top: 27rem;
}
@media screen and (max-width: 767px) {
  .my-27 {
    margin-bottom: calc( 27rem * .7);
    margin-top: calc( 27rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-27 {
    margin-top: 27rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-27 {
    margin-bottom: 27rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-27 {
    margin-bottom: 27rem;
    margin-top: 27rem;
  }
}

.pl-27 {
  padding-left: 27rem;
}
@media screen and (max-width: 767px) {
  .pl-27 {
    padding-left: calc( 27rem * .7);
  }
}

.pr-27 {
  padding-right: 27rem;
}
@media screen and (max-width: 767px) {
  .pr-27 {
    padding-right: calc( 27rem * .7);
  }
}

.pt-27 {
  padding-top: 27rem;
}
@media screen and (max-width: 767px) {
  .pt-27 {
    padding-top: calc( 27rem * .7);
  }
}

.pb-27 {
  padding-bottom: 27rem;
}
@media screen and (max-width: 767px) {
  .pb-27 {
    padding-bottom: calc( 27rem * .7);
  }
}

.py-27 {
  padding-bottom: 27rem;
  padding-top: 27rem;
}
@media screen and (max-width: 767px) {
  .py-27 {
    padding-bottom: calc( 27rem * .7);
    padding-top: calc( 27rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-27 {
    padding-top: 27rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-27 {
    padding-bottom: 27rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-27 {
    padding-bottom: 27rem;
    padding-top: 27rem;
  }
}

.ml-28 {
  margin-left: 28rem;
}
@media screen and (max-width: 767px) {
  .ml-28 {
    margin-left: calc( 28rem * .7);
  }
}

.mr-28 {
  margin-right: 28rem;
}
@media screen and (max-width: 767px) {
  .mr-28 {
    margin-right: calc( 28rem * .7);
  }
}

.mt-28 {
  margin-top: 28rem;
}
@media screen and (max-width: 767px) {
  .mt-28 {
    margin-top: calc( 28rem * .7);
  }
}

.mb-28 {
  margin-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .mb-28 {
    margin-bottom: calc( 28rem * .7);
  }
}

.my-28 {
  margin-bottom: 28rem;
  margin-top: 28rem;
}
@media screen and (max-width: 767px) {
  .my-28 {
    margin-bottom: calc( 28rem * .7);
    margin-top: calc( 28rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-28 {
    margin-top: 28rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-28 {
    margin-bottom: 28rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-28 {
    margin-bottom: 28rem;
    margin-top: 28rem;
  }
}

.pl-28 {
  padding-left: 28rem;
}
@media screen and (max-width: 767px) {
  .pl-28 {
    padding-left: calc( 28rem * .7);
  }
}

.pr-28 {
  padding-right: 28rem;
}
@media screen and (max-width: 767px) {
  .pr-28 {
    padding-right: calc( 28rem * .7);
  }
}

.pt-28 {
  padding-top: 28rem;
}
@media screen and (max-width: 767px) {
  .pt-28 {
    padding-top: calc( 28rem * .7);
  }
}

.pb-28 {
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  .pb-28 {
    padding-bottom: calc( 28rem * .7);
  }
}

.py-28 {
  padding-bottom: 28rem;
  padding-top: 28rem;
}
@media screen and (max-width: 767px) {
  .py-28 {
    padding-bottom: calc( 28rem * .7);
    padding-top: calc( 28rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-28 {
    padding-top: 28rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-28 {
    padding-bottom: 28rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-28 {
    padding-bottom: 28rem;
    padding-top: 28rem;
  }
}

.ml-29 {
  margin-left: 29rem;
}
@media screen and (max-width: 767px) {
  .ml-29 {
    margin-left: calc( 29rem * .7);
  }
}

.mr-29 {
  margin-right: 29rem;
}
@media screen and (max-width: 767px) {
  .mr-29 {
    margin-right: calc( 29rem * .7);
  }
}

.mt-29 {
  margin-top: 29rem;
}
@media screen and (max-width: 767px) {
  .mt-29 {
    margin-top: calc( 29rem * .7);
  }
}

.mb-29 {
  margin-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .mb-29 {
    margin-bottom: calc( 29rem * .7);
  }
}

.my-29 {
  margin-bottom: 29rem;
  margin-top: 29rem;
}
@media screen and (max-width: 767px) {
  .my-29 {
    margin-bottom: calc( 29rem * .7);
    margin-top: calc( 29rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-29 {
    margin-top: 29rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-29 {
    margin-bottom: 29rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-29 {
    margin-bottom: 29rem;
    margin-top: 29rem;
  }
}

.pl-29 {
  padding-left: 29rem;
}
@media screen and (max-width: 767px) {
  .pl-29 {
    padding-left: calc( 29rem * .7);
  }
}

.pr-29 {
  padding-right: 29rem;
}
@media screen and (max-width: 767px) {
  .pr-29 {
    padding-right: calc( 29rem * .7);
  }
}

.pt-29 {
  padding-top: 29rem;
}
@media screen and (max-width: 767px) {
  .pt-29 {
    padding-top: calc( 29rem * .7);
  }
}

.pb-29 {
  padding-bottom: 29rem;
}
@media screen and (max-width: 767px) {
  .pb-29 {
    padding-bottom: calc( 29rem * .7);
  }
}

.py-29 {
  padding-bottom: 29rem;
  padding-top: 29rem;
}
@media screen and (max-width: 767px) {
  .py-29 {
    padding-bottom: calc( 29rem * .7);
    padding-top: calc( 29rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-29 {
    padding-top: 29rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-29 {
    padding-bottom: 29rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-29 {
    padding-bottom: 29rem;
    padding-top: 29rem;
  }
}

.ml-30 {
  margin-left: 30rem;
}
@media screen and (max-width: 767px) {
  .ml-30 {
    margin-left: calc( 30rem * .7);
  }
}

.mr-30 {
  margin-right: 30rem;
}
@media screen and (max-width: 767px) {
  .mr-30 {
    margin-right: calc( 30rem * .7);
  }
}

.mt-30 {
  margin-top: 30rem;
}
@media screen and (max-width: 767px) {
  .mt-30 {
    margin-top: calc( 30rem * .7);
  }
}

.mb-30 {
  margin-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .mb-30 {
    margin-bottom: calc( 30rem * .7);
  }
}

.my-30 {
  margin-bottom: 30rem;
  margin-top: 30rem;
}
@media screen and (max-width: 767px) {
  .my-30 {
    margin-bottom: calc( 30rem * .7);
    margin-top: calc( 30rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-mt-30 {
    margin-top: 30rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-mb-30 {
    margin-bottom: 30rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-my-30 {
    margin-bottom: 30rem;
    margin-top: 30rem;
  }
}

.pl-30 {
  padding-left: 30rem;
}
@media screen and (max-width: 767px) {
  .pl-30 {
    padding-left: calc( 30rem * .7);
  }
}

.pr-30 {
  padding-right: 30rem;
}
@media screen and (max-width: 767px) {
  .pr-30 {
    padding-right: calc( 30rem * .7);
  }
}

.pt-30 {
  padding-top: 30rem;
}
@media screen and (max-width: 767px) {
  .pt-30 {
    padding-top: calc( 30rem * .7);
  }
}

.pb-30 {
  padding-bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .pb-30 {
    padding-bottom: calc( 30rem * .7);
  }
}

.py-30 {
  padding-bottom: 30rem;
  padding-top: 30rem;
}
@media screen and (max-width: 767px) {
  .py-30 {
    padding-bottom: calc( 30rem * .7);
    padding-top: calc( 30rem * .7);
  }
}

@media screen and (max-width: 767px) {
  .sp-pt-30 {
    padding-top: 30rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-pb-30 {
    padding-bottom: 30rem;
  }
}

@media screen and (max-width: 767px) {
  .sp-py-30 {
    padding-bottom: 30rem;
    padding-top: 30rem;
  }
}

.text-xxxxl {
  font-size: 4.2rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxxxl {
    font-size: 3.4rem;
  }
}

.text-xxxl {
  font-size: 3.2rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxxl {
    font-size: 2.4rem;
  }
}

.text-xxl {
  font-size: 2.8rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xxl {
    font-size: 2.6rem;
  }
}

.text-xl {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-xl {
    font-size: 2rem;
  }
}

.text-l {
  font-size: 1.7rem;
  font-weight: normal;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .text-l {
    font-size: 1.5rem;
  }
}

.text-r {
  font-size: 1.6rem;
  color: #333;
  font-weight: normal;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .text-r {
    font-size: 1.4rem;
  }
}

.text-s {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .text-s {
    font-size: 1.2rem;
  }
}

.text-xs {
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .text-xs {
    font-size: 1rem;
  }
}

.flex {
  display: flex;
}

.text-center {
  text-align: center;
}

.underline {
  text-decoration: underline !important;
}

.border-b {
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
}

.border-t {
  border-top: 1px solid rgba(51, 51, 51, 0.2);
}

.color-lblue {
  color: #003f87;
}

.delay-wrap > *:nth-child(1) {
  transition-delay: calc(200ms + (200ms * 1));
}
.delay-wrap > *:nth-child(2) {
  transition-delay: calc(200ms + (200ms * 2));
}
.delay-wrap > *:nth-child(3) {
  transition-delay: calc(200ms + (200ms * 3));
}
.delay-wrap > *:nth-child(4) {
  transition-delay: calc(200ms + (200ms * 4));
}
.delay-wrap > *:nth-child(5) {
  transition-delay: calc(200ms + (200ms * 5));
}
.delay-wrap > *:nth-child(6) {
  transition-delay: calc(200ms + (200ms * 6));
}
.delay-wrap > *:nth-child(7) {
  transition-delay: calc(200ms + (200ms * 7));
}
.delay-wrap > *:nth-child(8) {
  transition-delay: calc(200ms + (200ms * 8));
}
.delay-wrap > *:nth-child(9) {
  transition-delay: calc(200ms + (200ms * 9));
}
.delay-wrap > *:nth-child(10) {
  transition-delay: calc(200ms + (200ms * 10));
}
.delay-wrap > *:nth-child(11) {
  transition-delay: calc(200ms + (200ms * 11));
}
.delay-wrap > *:nth-child(12) {
  transition-delay: calc(200ms + (200ms * 12));
}
.delay-wrap > *:nth-child(13) {
  transition-delay: calc(200ms + (200ms * 13));
}
.delay-wrap > *:nth-child(14) {
  transition-delay: calc(200ms + (200ms * 14));
}
.delay-wrap > *:nth-child(15) {
  transition-delay: calc(200ms + (200ms * 15));
}

.cmnCv {
  width: 100%;
  position: relative;
  z-index: 0;
  margin-top: 5rem;
}
.cmnCv::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}
.cmnCv::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  background: url(../img/hotels/a/01.jpg) no-repeat center center/cover;
}
.cmnCv .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 16rem 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .cmnCv .inner {
    display: block;
    padding: 10rem 0;
  }
}
.cmnCv-reserve, .cmnCv-contact {
  text-align: center;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .cmnCv-reserve, .cmnCv-contact {
    font-size: 1.8rem;
  }
}
.cmnCv-reserve span, .cmnCv-reserve a, .cmnCv-reserve b, .cmnCv-reserve small, .cmnCv-contact span, .cmnCv-contact a, .cmnCv-contact b, .cmnCv-contact small {
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  display: block;
  text-align: center;
}
.cmnCv-reserve b, .cmnCv-reserve a, .cmnCv-contact b, .cmnCv-contact a {
  font-weight: normal;
}
.cmnCv-reserve a {
  text-decoration: none;
  font-size: 0.6em;
  background: #fff;
  letter-spacing: 0.1em;
  margin-top: 2rem;
  border-radius: 10rem;
  padding: 0.8em 3rem;
  line_height: 1;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.cmnCv-reserve a, .cmnCv-reserve a:link, .cmnCv-reserve a:visited {
  color: #003E87;
}
.cmnCv-reserve a:hover, .cmnCv-reserve a:active {
  text-decoration: none;
  color: #003E87;
}
.cmnCv-contact b {
  font-size: 1.6em;
  margin-top: 1.8rem;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.cmnCv-contact small {
  font-size: 0.7em;
  margin-top: 1.2rem;
}

.text-en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
}

.text-ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}

.bgcolor::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(235, 230, 227, 0.9) 0%, rgba(235, 230, 227, 0) 100%);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  mix-blend-mode: darken;
}
#tripla-chat-circle-icon, #tripla-icon-message, #tripla-minimized-chat {
  display: none !important;
}

.topRooms {
  width: 100%;
}
.topRooms .slick-dots {
  display: flex;
  gap: 1em;
  justify-content: center;
}
.topRooms .slick-dots li {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}
.topRooms .slick-dots li button {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}
.topRooms .slick-dots li button:before {
  display: block;
  position: static;
  font-size: 0;
  width: 4rem;
  background: #333;
  height: 2px;
}
@media screen and (max-width: 767px) {
  .topRooms .slick-dots li button:before {
    width: 3rem;
  }
}
.topRooms .slick-dots li:not(.slick-active) button:before {
  opacity: 0.1;
}
.topRooms > h4 {
  font-weight: normal;
  color: var(--bystay-color);
  margin: 0 auto 5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .topRooms > h4 {
    font-size: 2.4rem;
  }
}
.topRooms .section-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .topRooms .section-inner {
    gap: 4rem 2rem;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 3rem;
  }
}
.topRooms-block a {
  display: inline-block;
}
.topRooms-block .text {
  transition: all 0.5s;
}
.topRooms-block a {
  text-decoration: none;
  transition: opacity 0.5s;
  text-decoration: none;
}
.topRooms-block a, .topRooms-block a:link, .topRooms-block a:visited {
  color: #333;
}
.topRooms-block a:hover, .topRooms-block a:active {
  text-decoration: none;
  color: #333;
}
.topRooms-block a:hover {
  opacity: 0.5;
}
.topRooms-block .inner {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .topRooms-block .inner {
    margin-bottom: 0;
    height: 100%;
    position: relative;
  }
}
.topRooms-block figure {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .topRooms-block figure {
    width: 100%;
  }
}
.topRooms-block figure img {
  aspect-ratio: 1.1;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .topRooms-block figure img {
    aspect-ratio: 1.4;
  }
}
.topRooms-block .feat-pet figure img {
  object-position: left bottom;
}
.topRooms-block .feat-couple figure img {
  object-position: left bottom;
}
.topRooms-block .text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 2.2rem;
  padding: 2em 0 1.5em 0;
  z-index: 1;
  color: #fff;
  min-height: 13rem;
  position: absolute;
  top: 0;
  left: 0;
}
.topRooms-block .text::before {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
}
.topRooms-block .text h5 {
  font-size: 1.4rem;
  text-align: left;
  font-weight: normal;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .topRooms-block .text h5 {
    font-size: 1.2rem;
  }
}
.topRooms-block .text h5 span {
  display: block;
  text-align: center;
}
.topRooms-block .text h5 span.en {
  font-size: 2em;
  margin-bottom: 0.5em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .topRooms-block .text h5 span.en {
    font-size: 1.5em;
  }
}
.topRooms-block .text p {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .topRooms-block .text p {
    font-size: 1.2rem;
  }
}
.topRooms-block .text .more {
  width: 100%;
  text-align: right;
  position: absolute;
  font-size: 1.2rem;
  right: 1em;
  bottom: 1em;
}
.topRooms-block .text .more span {
  padding-left: 3.5em;
  display: inline-block;
  position: relative;
}
.topRooms-block .text .more span::before {
  position: absolute;
  content: "";
  display: block;
  width: 3em;
  height: 1px;
  opacity: 0.5;
  top: 50%;
  left: 0;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .topRooms-block .text .more {
    position: absolute;
    right: 1em;
    bottom: 1em;
  }
}
.topRooms-block .text a {
  display: inline-block;
  margin-top: 2rem;
  text-decoration: none;
  font-size: 1.2rem;
  margin-left: auto;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .topRooms-block .text a {
    font-size: 1rem;
  }
}

.rooms-detail-dsc .access-checkin p {
  text-align: center;
}
.rooms-detail-dsc .access-checkin dl {
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc .access-checkin dl {
    justify-content: flex-start;
  }
}
.rooms-detail-dsc .access-checkin dl dd {
  flex-basis: auto;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc .access-checkin dl dd {
    margin-bottom: 1em;
  }
}

.rooms {
  margin: 30px 0;
}

@media screen and (max-width: 767px) {
  .rooms, .rooms-detail {
    margin: 0 0 80px;
  }
}
.rooms-container, .rooms-detail-container {
  padding-top: 5%;
  width: 100%;
}
.rooms--container > div, .rooms-detail--container > div {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.rooms--container > div > p, .rooms-detail--container > div > p {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1em;
  letter-spacing: 0.1em;
}
.rooms--container ul.hotel-list, .rooms-detail--container ul.hotel-list {
  margin: 0 auto;
  list-style: none;
  display: grid;
  gap: 8rem 3rem;
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list, .rooms-detail--container ul.hotel-list {
    grid-template-columns: 1fr;
    gap: 5rem 2rem;
  }
}
.rooms--container ul.hotel-list > li, .rooms-detail--container ul.hotel-list > li {
  position: relative;
  display: none;
}
.rooms--container ul.hotel-list > li.active, .rooms-detail--container ul.hotel-list > li.active {
  display: block;
}
.rooms--container ul.hotel-list > li a, .rooms-detail--container ul.hotel-list > li a {
  position: relative;
  z-index: 0;
}
.rooms--container ul.hotel-list > li a::before, .rooms-detail--container ul.hotel-list > li a::before {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  font-size: 1.4rem;
  padding: 0.3em 1em;
  z-index: 1;
  white-space: nowrap;
}
.rooms--container ul.hotel-list > li a, .rooms-detail--container ul.hotel-list > li a {
  width: 100%;
  font-size: 1.4rem;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  transition: all 0.5s;
  align-items: flex-start;
}
.rooms--container ul.hotel-list > li a, .rooms--container ul.hotel-list > li a:link, .rooms--container ul.hotel-list > li a:visited, .rooms-detail--container ul.hotel-list > li a, .rooms-detail--container ul.hotel-list > li a:link, .rooms-detail--container ul.hotel-list > li a:visited {
  color: black;
}
.rooms--container ul.hotel-list > li a:hover, .rooms--container ul.hotel-list > li a:active, .rooms-detail--container ul.hotel-list > li a:hover, .rooms-detail--container ul.hotel-list > li a:active {
  text-decoration: none;
  color: black;
}
.rooms--container ul.hotel-list > li a .recom, .rooms-detail--container ul.hotel-list > li a .recom {
  position: absolute;
  left: -0.5em;
  top: -2em;
  color: #cdb63f;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 2.3em;
  letter-spacing: 0;
  /*
  position: absolute;
  left: -.5em;
  top: -1em;
  color: #cdb63f;
  @include c.ooohBaby();
  font-size: 2.3em;
  transform: skewY(-10deg);*/
}
.rooms--container ul.hotel-list > li a .recom img, .rooms-detail--container ul.hotel-list > li a .recom img {
  width: 3.5em;
}
.rooms--container ul.hotel-list > li a .pet, .rooms-detail--container ul.hotel-list > li a .pet {
  position: absolute;
  left: 3px;
  line-height: 1;
  top: 3px;
  font-size: 1rem;
  padding: 0.3em 0.5em;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  background: #eee;
  color: #333;
}
.rooms--container ul.hotel-list > li a .pet img, .rooms-detail--container ul.hotel-list > li a .pet img {
  margin-right: 3px;
  width: 2.6rem;
}
.rooms--container ul.hotel-list > li a .wifi, .rooms--container ul.hotel-list > li a .wifirental, .rooms-detail--container ul.hotel-list > li a .wifi, .rooms-detail--container ul.hotel-list > li a .wifirental {
  position: absolute;
  line-height: 1;
  right: 3px;
  top: 3px;
  font-size: 1rem;
  padding: 0.3em 0.5em;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
.rooms--container ul.hotel-list > li a .wifi img, .rooms--container ul.hotel-list > li a .wifirental img, .rooms-detail--container ul.hotel-list > li a .wifi img, .rooms-detail--container ul.hotel-list > li a .wifirental img {
  margin-right: 3px;
  width: 2rem;
}
.rooms--container ul.hotel-list > li a .wifi, .rooms-detail--container ul.hotel-list > li a .wifi {
  background: #222;
  color: #fff;
}
.rooms--container ul.hotel-list > li a .wifirental, .rooms-detail--container ul.hotel-list > li a .wifirental {
  background: #eee;
  color: #333;
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list > li a, .rooms-detail--container ul.hotel-list > li a {
    padding: 0 0 0.5em 0;
  }
}
.rooms--container ul.hotel-list > li a:hover, .rooms-detail--container ul.hotel-list > li a:hover {
  opacity: 0.5;
}
.rooms--container ul.hotel-list > li a .hotel-list-points, .rooms-detail--container ul.hotel-list > li a .hotel-list-points {
  list-style: none;
  margin: 0;
  display: grid;
  row-gap: 0.5em;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  z-index: 1;
  padding: 1rem 0 0;
}
.rooms--container ul.hotel-list > li a .hotel-list-points li, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li {
  margin-bottom: 0.2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.3em 0.1em 0.3em;
  color: #333;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list > li a .hotel-list-points li, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li {
    width: 100%;
    padding: 0;
  }
}
.rooms--container ul.hotel-list > li a .hotel-list-points li span, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span {
  display: inline-block;
}
.rooms--container ul.hotel-list > li a .hotel-list-points li span.icon, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span.icon {
  width: 3em;
  padding: 5px;
  margin-right: 0.5em;
  border-radius: 6px;
  background: #eee;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list > li a .hotel-list-points li span.icon, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span.icon {
    width: 1.8em;
    padding: 2px;
  }
}
.rooms--container ul.hotel-list > li a .hotel-list-points li span.text, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span.text {
  width: calc(100% - 3em);
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list > li a .hotel-list-points li span.text, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span.text {
    width: calc(100% - 2em);
    font-size: 10px;
  }
}
.rooms--container ul.hotel-list > li a .hotel-list-points li span.text small, .rooms-detail--container ul.hotel-list > li a .hotel-list-points li span.text small {
  font-size: 10px;
}
.rooms--container ul.hotel-list > li a .hotel-list-points-text, .rooms-detail--container ul.hotel-list > li a .hotel-list-points-text {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 0.5rem 0;
  align-items: flex-start;
}
.rooms--container ul.hotel-list > li a .hotel-list-points-text li, .rooms-detail--container ul.hotel-list > li a .hotel-list-points-text li {
  width: auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.3em 0.1em 0.3em;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  font-size: 1.3rem;
}
.rooms--container ul.hotel-list > li a .hotel-list-points-text li::before, .rooms-detail--container ul.hotel-list > li a .hotel-list-points-text li::before {
  content: "・";
}
.rooms--container ul.hotel-list > li a .hotel-list-points-text li span, .rooms-detail--container ul.hotel-list > li a .hotel-list-points-text li span {
  display: inline-block;
}
.rooms--container ul.hotel-list > li a .hotel-list-points-text li span.text-fluid, .rooms-detail--container ul.hotel-list > li a .hotel-list-points-text li span.text-fluid {
  width: auto;
}
.rooms--container ul.hotel-list > li a .hotel-list-info, .rooms-detail--container ul.hotel-list > li a .hotel-list-info {
  width: 100%;
}
.rooms--container ul.hotel-list > li a .hotel-more, .rooms-detail--container ul.hotel-list > li a .hotel-more {
  line-height: 1;
  display: none;
}
.rooms--container ul.hotel-list > li a .hotel-name-wrap, .rooms-detail--container ul.hotel-list > li a .hotel-name-wrap {
  display: inline-block;
  font-size: 1.6rem;
  width: 100%;
  line-height: 1.2;
}
.rooms--container ul.hotel-list > li a .hotel-name-wrap > span, .rooms-detail--container ul.hotel-list > li a .hotel-name-wrap > span {
  display: inline-block;
}
.rooms--container ul.hotel-list > li a .hotel-name-wrap, .rooms-detail--container ul.hotel-list > li a .hotel-name-wrap {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.rooms--container ul.hotel-list > li a .hotel-name, .rooms-detail--container ul.hotel-list > li a .hotel-name {
  font-size: 1.2em;
  margin-bottom: 1em;
}
.rooms--container ul.hotel-list > li a .hotel-name b, .rooms-detail--container ul.hotel-list > li a .hotel-name b {
  font-weight: normal;
  text-transform: uppercase;
}
.rooms--container ul.hotel-list > li a .hotel-nameSub, .rooms-detail--container ul.hotel-list > li a .hotel-nameSub {
  color: #555;
  margin-bottom: 0.5em;
}
.rooms--container ul.hotel-list > li a .hotel-nameSub b, .rooms-detail--container ul.hotel-list > li a .hotel-nameSub b {
  font-weight: normal;
}
.rooms--container ul.hotel-list > li a .hotel-nameSub small, .rooms-detail--container ul.hotel-list > li a .hotel-nameSub small {
  margin-left: 0.5em;
  font-size: 0.7em;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .rooms--container ul.hotel-list > li a .hotel-nameSub, .rooms-detail--container ul.hotel-list > li a .hotel-nameSub {
    font-size: 1em;
  }
}
.rooms--container ul.hotel-list > li a .capa, .rooms-detail--container ul.hotel-list > li a .capa {
  font-size: 0.6em;
  display: inline-block;
  line-height: 1;
}
.rooms--container ul.hotel-list > li a .capa span, .rooms-detail--container ul.hotel-list > li a .capa span {
  font-size: 1.2em;
}
.rooms--container ul.hotel-list > li a figure img, .rooms-detail--container ul.hotel-list > li a figure img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
}
.rooms--container ul.hotel-list > li .hotel-list-img, .rooms-detail--container ul.hotel-list > li .hotel-list-img {
  position: relative;
  z-index: -1;
}
.rooms--container ul.hotel-list > li .hotel-list-img .addinfo, .rooms-detail--container ul.hotel-list > li .hotel-list-img .addinfo {
  position: absolute;
  right: 0.3em;
  bottom: -5.5em;
  background: #eaebc6;
  border-radius: 20rem;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  aspect-ratio: 1;
  width: 7em;
}
.rooms--container ul.hotel-list > li .hotel-list-info-wrap, .rooms-detail--container ul.hotel-list > li .hotel-list-info-wrap {
  display: inline-flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 3% 0 4rem;
  width: 100%;
}

.rooms-map {
  width: 90%;
  max-width: 600px;
  margin: 2rem auto 3rem;
  mix-blend-mode: multiply;
}

.rooms-detail-content {
  margin-top: 3rem;
  margin-bottom: 15rem;
}
.rooms-detail-title {
  padding-bottom: 3%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-title {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-title {
    font-size: 6.75vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-title {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-detail-title {
    font-size: 2.34vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-detail-title {
    font-size: 5.85vw;
  }
}
.rooms-detail-title h4 {
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
  font-size: 1em;
  width: auto;
  text-align: left;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-title h4 {
    width: 100%;
  }
}
.rooms-detail-title h4 b {
  font-weight: normal;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.rooms-detail-title h4 span {
  margin: 0.3em 0;
  display: inline-block;
  width: 100%;
}
.rooms-detail-title h4 span.en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.rooms-detail-title h4 span.ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.rooms-detail-title h4 span:nth-of-type(1) {
  font-size: 1.5em;
  text-transform: uppercase;
}
.rooms-detail-title h4 span:nth-of-type(1) small {
  font-size: 0.7em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.rooms-detail-title h4 span:nth-of-type(2) {
  font-size: 0.8em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.rooms-detail-title h4 span:nth-of-type(2) b {
  font-weight: normal;
}
.rooms-detail-title h4 span:nth-of-type(2) small {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rooms-detail-title p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  width: 50%;
  text-align: justify;
  line-height: 1.8;
  margin: 2em 0 0 0;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-title p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-title p {
    font-size: 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-title p {
    width: 100%;
  }
}
.rooms-detail-main {
  width: 100%;
  margin-top: 2%;
  margin-bottom: 6%;
}
.rooms-detail-main figure, .rooms-detail-main img {
  width: 100%;
}
.rooms-detail-main img {
  aspect-ratio: 2;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .rooms-detail-main img {
    aspect-ratio: 1;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-main {
    margin-bottom: 4rem;
  }
}
.rooms-detail-mv {
  width: 100%;
  margin-top: 2%;
  margin-bottom: 10%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-mv {
    margin-bottom: 10rem;
  }
}
.rooms-detail-mv-slide .slide-block .slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-mv-slide .slide-block .slide {
    padding-bottom: 90%;
  }
}
.rooms-detail .caption {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  margin-top: 1rem;
}
.rooms-detail-info {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  margin-top: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .rooms-detail-info {
    margin-top: 10%;
  }
}
.rooms-detail-info p, .rooms-detail-info dt, .rooms-detail-info dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.rooms-detail-info--text {
  width: 57%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-info--text {
    width: 100%;
    margin-bottom: 3em;
  }
}
.rooms-detail-info--text p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-info--text p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-info--text p {
    font-size: 3.15vw;
  }
}
.rooms-detail-info--spc {
  width: 38%;
}
.notext .rooms-detail-info--spc {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}
.notext .rooms-detail-info--spc dl {
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .notext .rooms-detail-info--spc dl {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-info--spc {
    width: 100%;
  }
  .rooms-detail-info--spc::before {
    width: 100%;
    display: inline-block;
    content: "Room Information";
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-family: "EB Garamond", serif;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0.5em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-detail-info--spc::before {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-detail-info--spc::before {
    font-size: 4.5vw;
  }
}
.rooms-detail-info--spc p, .rooms-detail-info--spc dt, .rooms-detail-info--spc dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-info--spc p, .rooms-detail-info--spc dt, .rooms-detail-info--spc dd {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-info--spc p, .rooms-detail-info--spc dt, .rooms-detail-info--spc dd {
    font-size: 3.6vw;
  }
}
.rooms-detail-info--spc dl {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.rooms-detail-info--spc dl dt, .rooms-detail-info--spc dl dd {
  padding: 2em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.rooms-detail-info--spc dl dt {
  width: 20%;
  opacity: 0.6;
}
.rooms-detail-info--spc dl dd {
  width: 80%;
}
.rooms-detail-dsc {
  padding: 4% 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc dt {
    font-size: 0.9em;
  }
}
.rooms-detail-dsc dt, .rooms-detail-dsc dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.rooms-detail-dsc-eq, .rooms-detail-dsc-atn {
  width: 48%;
  margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-eq, .rooms-detail-dsc-atn {
    width: 100%;
  }
}
.rooms-detail-dsc-eq dl dt {
  opacity: 0.6;
  margin-bottom: 0.5em;
  padding: 0.2em;
  background: #d7d7d7;
}
.rooms-detail-dsc-eq dl dd {
  margin-bottom: 1em;
}
.rooms-detail-dsc-eq dl dd small {
  font-size: 0.6em;
}
.rooms-detail-dsc-atn dl {
  display: flex;
  flex-wrap: wrap;
}
.rooms-detail-dsc-atn dl dt, .rooms-detail-dsc-atn dl dd {
  margin-bottom: 0.8em;
}
.rooms-detail-dsc-atn dl dt {
  width: 20%;
  opacity: 0.6;
}
.rooms-detail-dsc-atn dl dd {
  width: 80%;
}
.rooms-detail-dsc .rooms-detail-dsc-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-dsc .rooms-detail-dsc-title {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc .rooms-detail-dsc-title {
    font-size: 3.6vw;
  }
}
.rooms-detail-dsc-ann {
  width: 100%;
  border-top: 1px solid #aaa;
  padding-top: 1em;
}
.rooms-detail-reserve-bo {
  padding: 3% 0;
  text-align: center;
  width: 96%;
  margin: 0 auto;
  max-width: 500px;
}
@media screen and (max-width: 767px) {
  .rooms-detail-reserve-bo {
    padding: 3em 0;
  }
}
.rooms-detail-reserve-bo a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  padding: 0.5em;
  display: inline-block;
  width: 100%;
  background: #333;
  transition: opacity 0.5s;
  margin-bottom: 10px;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-reserve-bo a {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-reserve-bo a {
    font-size: 4.05vw;
  }
}
.rooms-detail-reserve-bo a, .rooms-detail-reserve-bo a:link, .rooms-detail-reserve-bo a:visited {
  color: #fff;
}
.rooms-detail-reserve-bo a:hover, .rooms-detail-reserve-bo a:active {
  text-decoration: none;
  color: #fff;
}
.rooms-detail-reserve-bo a:hover {
  opacity: 0.6;
}
.rooms-detail-spec-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.rooms-detail-spec-plan {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-spec-plan {
    width: 90%;
    margin: 2rem 0 auto 0;
  }
}
.rooms-detail-spec {
  width: 60%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .rooms-detail-spec {
    width: 100%;
  }
}
@media screen and (max-width: 1199px) {
  .rooms-detail-spec {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-spec {
    font-size: 3.15vw;
  }
}
.rooms-detail-spec dl {
  display: flex;
}
.rooms-detail-spec dl dt {
  width: 5em;
}
.rooms-detail-spec dl dt::after {
  content: "／";
}
.rooms-detail-spec dl dd {
  width: calc(100% - 5em);
}
.rooms-detail-spec-petseyakusho {
  margin-top: 1rem;
}
.rooms-detail-spec-petseyakusho a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.4em 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-spec-petseyakusho a {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-spec-petseyakusho a {
    font-size: 3.15vw;
  }
}
.rooms-detail-spec-petseyakusho a, .rooms-detail-spec-petseyakusho a:link, .rooms-detail-spec-petseyakusho a:visited {
  color: #333;
}
.rooms-detail-spec-petseyakusho a:hover, .rooms-detail-spec-petseyakusho a:active {
  text-decoration: none;
  color: #333;
}

.pet-file {
  padding: 2rem;
  background: #efefef;
  text-align: center;
  width: 96%;
  margin: 0 auto;
  max-width: 800px;
}
@media screen and (max-width: 767px) {
  .pet-file {
    padding: 2rem;
  }
}
.pet-file > P {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .pet-file > P {
    text-align: justify;
  }
}
.pet-file > P b {
  color: red;
}
.pet-file > P small {
  font-size: 0.8em;
}
.pet-file a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 1em 0.5em;
  background: #fff;
  width: 100%;
  border: 1px solid rgba(51, 51, 51, 0.5);
  transition: opacity 0.5s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1199px) {
  .pet-file a {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .pet-file a {
    font-size: 4.05vw;
  }
}
.pet-file a, .pet-file a:link, .pet-file a:visited {
  color: #333;
}
.pet-file a:hover, .pet-file a:active {
  text-decoration: none;
  color: #333;
}
.pet-file a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 0.3em solid #333;
  border-bottom: 0.3em solid transparent;
  border-top: 0.3em solid transparent;
  margin-right: 0.5em;
}
.pet-file a .guide-icon {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-right: 0.5em;
}
.pet-file a .guide-icon::before, .pet-file a .guide-icon::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 3rem;
  border: 1px solid #333;
  background: #edf1f1;
}
.pet-file a .guide-icon::after {
  margin-left: -0.7em;
  margin-bottom: -0.3em;
}
.pet-file a:hover {
  opacity: 0.6;
}

.guide-file {
  padding: 2% 0 5%;
  text-align: center;
  width: 96%;
  margin: 0 auto;
  max-width: 500px;
}
@media screen and (max-width: 767px) {
  .guide-file {
    padding: 5em 0;
  }
}
.guide-file a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 1em 0.5em;
  width: 100%;
  border-top: 1px solid rgba(51, 51, 51, 0.5);
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  transition: opacity 0.5s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1199px) {
  .guide-file a {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .guide-file a {
    font-size: 4.05vw;
  }
}
.guide-file a, .guide-file a:link, .guide-file a:visited {
  color: #333;
}
.guide-file a:hover, .guide-file a:active {
  text-decoration: none;
  color: #333;
}
.guide-file a .guide-icon {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-right: 0.5em;
}
.guide-file a .guide-icon::before, .guide-file a .guide-icon::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 3rem;
  border: 1px solid #333;
  background: #edf1f1;
}
.guide-file a .guide-icon::after {
  margin-left: -0.7em;
  margin-bottom: -0.3em;
}
.guide-file a:hover {
  opacity: 0.6;
}

.rooms-equipment {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5rem;
}
@media screen and (max-width: 767px) {
  .rooms-equipment {
    display: block;
    gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment > div {
    /*width: 100%;
    gap: 1rem;
    display: flex;
    justify-content: space-between;

    &:not(:last-of-type){
    	margin-bottom: 2rem;
    }*/
  }
}
.rooms-equipment .rooms-equipment-block-img {
  aspect-ratio: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
@media screen and (max-width: 767px) {
  .rooms-equipment .rooms-equipment-block-img {
    width: 30%;
  }
}
.rooms-equipment .rooms-equipment-block-img figure {
  width: 100%;
  text-align: center;
}
.rooms-equipment .rooms-equipment-block-img figure img {
  max-width: 100%;
}
.rooms-equipment .rooms-equipment-block-img figure.cassina img {
  aspect-ratio: 2;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .rooms-equipment .rooms-equipment-block-img figure.cassina img {
    aspect-ratio: 1.4;
  }
}
.rooms-equipment .rooms-equipment-block-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .rooms-equipment .rooms-equipment-block-text {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment .rooms-equipment-block-text {
    font-size: 3.15vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment .rooms-equipment-block-text {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    width: 68%;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-equipment .rooms-equipment-block-text {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-equipment .rooms-equipment-block-text {
    font-size: 2.7vw;
  }
}
.rooms-equipment .rooms-equipment-block-text .rooms-equipment-text-title {
  font-size: 1.6em;
}
.rooms-equipment figure {
  display: inline-block;
  width: 20%;
}
@media screen and (max-width: 767px) {
  .rooms-equipment figure {
    width: 100%;
    text-align: center;
  }
}
.rooms-equipment p {
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .rooms-equipment p {
    width: 100%;
  }
}

.rooms-equipment02 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding: 1em;
  margin: 2em auto 1em auto;
}
.rooms-equipment02 > div {
  width: 48%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .rooms-equipment02 > div {
    width: 100%;
  }
}
.rooms-equipment02 figure {
  display: inline-block;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .rooms-equipment02 figure {
    width: 100%;
    text-align: center;
  }
}
.rooms-equipment02 p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  letter-spacing: 0.15em;
  text-align: left;
}
@media screen and (max-width: 1199px) {
  .rooms-equipment02 p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment02 p {
    font-size: 3.15vw;
  }
}
.rooms-equipment02 .rooms-equipment-text {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .rooms-equipment02 .rooms-equipment-text {
    width: 100%;
  }
}
.rooms-equipment02 .rooms-equipment-text-title {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 2.2em;
}
.rooms-list {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.rooms-list > p {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (max-width: 1199px) {
  .rooms-list > p {
    font-size: 2.34vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-list > p {
    font-size: 5.85vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-list > p {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-list > p {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-list > p {
    font-size: 4.95vw;
  }
}

/*$color01:rgb(132, 27, 49);
$color02:rgb(15, 128, 34);
$color03:rgb(15, 79, 134);
$color04:rgb(146, 120, 18);
$color05:rgb(50, 10, 121);
$color06:rgb(33, 165, 136);
$color07:rgb(50, 10, 121);*/
.rooms-list-title-wrap {
  font-size: 2rem;
  width: auto;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .rooms-list-title-wrap {
    font-size: 1.6rem;
  }
}
.rooms-list-title-wrap .rooms-list-title {
  display: none;
  padding: 9rem 0;
  width: 60%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .rooms-list-title-wrap .rooms-list-title {
    width: 100%;
  }
}
.rooms-list-title-wrap .rooms-list-title.active {
  display: inline-block;
}
.rooms-list-title-wrap .rooms-list-title-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
}
.rooms-list-title-wrap h4 {
  font-weight: normal;
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rooms-list-title-wrap h4 figuer {
  margin-right: 0.5em;
}
.rooms-list-title-wrap h4 img {
  width: 2em;
}
.rooms-list-title-wrap h4 span {
  display: inline-block;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .rooms-list-title-wrap h4 {
    text-align: center;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .rooms-list-title-wrap p {
    text-align: center;
    width: 100%;
  }
}

.rooms-list-wrap {
  margin: 0 auto 0 auto;
}
.rooms-list-wrap figure {
  width: 100%;
}
.rooms-list-wrap figure img {
  width: 100%;
}
.rooms-list-wrap a {
  display: inline-block;
}
.rooms-list-wrap > p {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (max-width: 1199px) {
  .rooms-list-wrap > p {
    font-size: 2.34vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-list-wrap > p {
    font-size: 5.85vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-list-wrap > p {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-list-wrap > p {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-list-wrap > p {
    font-size: 4.95vw;
  }
}
.rooms-list-wrap .hotel-more {
  display: block !important;
  text-align: right;
  font-size: 1.2rem;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rooms-list-wrap .hotel-more span {
  display: inline-block;
  padding: 0.3em 0.8em 0.3em 3.8em;
  position: relative;
}
.rooms-list-wrap .hotel-more span::before {
  content: "";
  display: block;
  width: 3rem;
  position: absolute;
  top: 50%;
  left: 0;
  background: #000;
  height: 1px;
  opacity: 0.2;
}

.rooms-list-pnav {
  flex-wrap: wrap;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2em 8em;
}
@media screen and (max-width: 767px) {
  .rooms-list-pnav {
    grid-template-columns: 1fr 1fr;
    gap: 1em 1em;
  }
}
.rooms-list-pnav-block p {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  font-size: 1.4rem;
  padding: 0.5em 0;
  transition: opacity 0.5s;
  /*
  &:hover{
  	opacity: .5;
  	&::before{
  		content: '';
  		display: block;
  		width: .5em;
  		height: .5em;
  		margin-right: .5em;
  		border-radius: 20rem;
  		background: rgba(#000,.8);
  	}
  }*/
}
@media screen and (max-width: 767px) {
  .rooms-list-pnav-block p {
    font-size: 1.2rem;
    padding: 0.3em 0;
  }
}
.rooms-list-pnav-block p::before {
  content: "";
  display: block;
  width: 0.2em;
  transition: all 0.5s;
  height: 0.2em;
  margin-right: 0.8em;
  border-radius: 20rem;
  background: rgba(0, 0, 0, 0.3);
}
.rooms-list-pnav-block.active p {
  opacity: 1;
}
.rooms-list-pnav-block.active p::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 20rem;
  background: rgba(0, 0, 0, 0.8);
}

.add-info {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}
.add-info > p {
  padding: 0.5em 1em;
  font-size: 14px;
  line-height: 1;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.5);
}
.add-info-smoke {
  color: #333;
}
.add-info-oceanview {
  color: #0B2560;
}

.checktime {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 1em;
  font-size: 1.8rem;
}
.checktime p {
  margin: 0 0.5em;
}
@media screen and (max-width: 767px) {
  .checktime p {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
  }
}
.checktime .mini {
  display: inline-block;
  font-size: 0.7em;
}

.check-loc {
  width: 100%;
  padding: 1em;
  text-align: center;
  border: 1px solid #888;
  margin-bottom: 2em;
}
.check-loc dl {
  text-align: center;
}
.check-loc dl dt {
  margin-bottom: 0.7em;
  width: 100%;
}

.pet-contract {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 5% 0;
}
.pet-contract a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background-color: #466e84;
  padding: 1em 0;
  font-size: 2rem;
  width: 100%;
  transition: opacity 0.5s;
}
.pet-contract a, .pet-contract a:link, .pet-contract a:visited {
  color: #fff;
}
.pet-contract a:hover, .pet-contract a:active {
  text-decoration: none;
  color: #fff;
}
.pet-contract a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .pet-contract a {
    font-size: 1.6rem;
  }
}
.pet-contract a small {
  font-size: 0.7em;
}

.rooms-detail-c {
  margin-bottom: 5%;
}
.rooms-detail-c-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.rooms-detail-c-wrap.fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.rooms-detail-c-wrap.col2 {
  justify-content: flex-start;
}
.rooms-detail-c-wrap.col2 > div {
  width: 47.5%;
  margin-right: 5%;
}
.rooms-detail-c-wrap.col2 > div:nth-of-type(2n) {
  margin-right: 0;
}
.rooms-detail-c-wrap.col2 > div img {
  object-fit: cover;
  aspect-ratio: 1.7;
}
.rooms-detail-c-wrap.col3 {
  justify-content: flex-start;
}
.rooms-detail-c-wrap.col3 > div {
  width: 30%;
  margin-right: 5%;
}
.rooms-detail-c-wrap.col3 > div:nth-of-type(3n) {
  margin-right: 0;
}
.rooms-detail-c-wrap.col3 > div img {
  object-fit: cover;
  aspect-ratio: 1.7;
}
.rooms-detail-c-wrap.col4 {
  justify-content: flex-start;
}
.rooms-detail-c-wrap.col4 > div {
  width: 21.25%;
  margin-right: 5%;
}
.rooms-detail-c-wrap.col4 > div:nth-of-type(4n) {
  margin-right: 0;
}
.rooms-detail-c-wrap.col4 > div img {
  object-fit: cover;
  aspect-ratio: 1.7;
}
.rooms-detail-c-wrap-wide {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.rooms-detail-c-wrap-wide-text {
  width: 40%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 5%;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-wrap-wide-text {
    justify-content: flex-start;
    width: 100%;
    padding: 5% 10%;
  }
}
.rooms-detail-c-wrap-wide-text .title {
  font-size: 1.4em;
  margin-bottom: 1em;
  margin-left: -1.5em;
  display: flex;
  align-content: center;
  align-items: center;
}
.rooms-detail-c-wrap-wide-text .title::before {
  content: "";
  display: block;
  width: 1em;
  height: 1px;
  margin-right: 0.5em;
  background: rgba(0, 0, 0, 0.3);
}
.rooms-detail-c-wrap-wide-text .lead {
  font-size: 1em;
  margin-bottom: 1em;
}
.rooms-detail-c-wrap-wide-text .specinfo {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.875em;
  padding-top: 1em;
  margin-top: 2em;
}
.rooms-detail-c-wrap-wide-img {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-wrap-wide-img {
    width: 100%;
  }
}
.rooms-detail-c-wrap-wide-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.rooms-detail-c-wrap-wide .pc-order-1 {
  order: -1;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-wrap-wide .pc-order-1 {
    order: 2;
  }
}
.rooms-detail-c p {
  text-align: left;
  line-height: 1.5;
}
.rooms-detail-c p.lead {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c p.lead {
    font-size: 1.2rem;
  }
}
.rooms-detail-c p.text {
  font-size: 1.2rem;
}
.rooms-detail-c .rooms-detail-slide {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c .rooms-detail-slide {
    width: 100%;
  }
}
.rooms-detail-c-l01 {
  display: flex;
  flex-wrap: wrap;
}
.rooms-detail-c-l01 > figure {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-l01 > figure {
    width: 100%;
  }
}
.rooms-detail-c-l01 > figure img {
  width: 100%;
}
.rooms-detail-c-l01 .text-wrap {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 3em;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-l01 .text-wrap {
    width: 100%;
  }
}
.rooms-detail-c-l02 > figure {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-l02 > figure {
    width: 100%;
  }
}
.rooms-detail-c-l02 > figure img {
  width: 100%;
}
.rooms-detail-c-l02 .text-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 0.5em 0 0 0;
}
.rooms-detail-c-l03 {
  display: flex;
  flex-wrap: wrap;
}
.rooms-detail-c-l03 > figure {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-l03 > figure {
    width: 100%;
  }
}
.rooms-detail-c-l03 > figure img {
  width: 100%;
}
.rooms-detail-c-l03 .text-wrap {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 3em;
  order: -1;
}
@media screen and (max-width: 767px) {
  .rooms-detail-c-l03 .text-wrap {
    width: 100%;
    order: 2;
  }
}

.rooms-detail-mirable {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 3rem 0;
}
.rooms-detail-mirable > p {
  text-align: center;
  width: 100%;
  font-size: 2rem;
  margin-bottom: 1em;
}
.rooms-detail-mirable.col2 {
  justify-content: flex-start;
}
.rooms-detail-mirable.col2 > div {
  width: calc((100% - 5px) / 2);
  margin-right: 5px;
  margin-bottom: 5px;
}
.rooms-detail-mirable.col2 > div:nth-of-type(2n) {
  margin-right: 0;
}
.rooms-detail-mirable.col2 > div img {
  width: 100%;
}

.rooms-detail-fac {
  width: 100%;
  padding: 3rem 0;
  position: relative;
}
.rooms-detail-fac::before {
  content: "";
  display: block;
  width: 80%;
  top: 0;
  bottom: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  background: rgba(179, 98, 137, 0.1);
}
.rooms-detail-fac > p {
  /* z-index: -1; */
  position: relative;
  display: inline-block;
  width: auto;
  margin-bottom: -1em;
  font-size: 6vw;
  /* margin: 0 0 0.5em 0; */
  padding: 0 13rem;
  color: #333;
  transform: rotate(-11deg);
  opacity: 1;
  font-family: "Oooh Baby", cursive;
}
@media screen and (max-width: 767px) {
  .rooms-detail-fac > p {
    font-size: 6rem;
    text-align: center;
    padding: 0;
  }
}
.rooms-detail-fac-list {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  justify-content: center;
  margin: 0 auto;
}
.rooms-detail-fac-list--block {
  width: 33%;
  padding: 0 2%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-fac-list--block {
    width: 100%;
  }
}
.rooms-detail-fac-list--block figure {
  margin: 0 auto;
  width: 70%;
}
.rooms-detail-fac-list--block figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50rem;
}
.rooms-detail-fac-list--block-text {
  font-size: 1.6rem;
  text-align: center;
  padding: 1em 0;
}
.rooms-detail-fac-list--block-text .lead {
  font-size: 1.6em;
  margin-bottom: 0.5em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .rooms-detail-fac-list--block-text .lead {
    font-size: 1.2em;
  }
}
.rooms-detail-fac-list--block-text .text {
  text-align: center;
}

#room-map {
  width: 100%;
  padding: 5rem 0 3rem;
  /*iframe{
  	width: 100%;
  	height: 400px;
  	@include c.mq{
  		height: 300px;
  	}
  }*/
  min-height: 500px;
}
@media screen and (max-width: 767px) {
  #room-map {
    min-height: 300px;
  }
}

.btn-room-reserve {
  width: 90%;
  font-size: 1.6rem;
  max-width: 15em;
  margin: 10rem auto 5rem;
  text-align: center;
}
.btn-room-reserve a {
  display: inline-block;
  width: 100%;
  padding: 0.8em 2em;
  background: #202933;
  text-decoration: none;
}
.btn-room-reserve a, .btn-room-reserve a:link, .btn-room-reserve a:visited {
  color: #fff;
}
.btn-room-reserve a:hover, .btn-room-reserve a:active {
  text-decoration: none;
  color: #fff;
}

.rinsetsu-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rinsetsu-group > ul {
  width: 48.5%;
  padding: 1rem;
  background: #bdc8c8;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .rinsetsu-group > ul {
    width: 100%;
  }
}
.rinsetsu-group > ul > li {
  width: calc((100% - 10px) / 2) !important;
  margin-bottom: 0 !important;
}
.rinsetsu-group > ul > li:nth-of-type(2) {
  margin-right: 0 !important;
}
.rinsetsu-group > ul > li:not(:nth-of-type(2)) {
  margin-right: 10px !important;
}
@media screen and (max-width: 767px) {
  .rinsetsu-group > ul > li {
    width: 49%;
  }
}

/*
.bbq-season{
	padding: 1rem;

	>p{
		font-size: 3rem;
		margin-bottom: .5em;
		color: $color08;
	}
	&:not(:last-of-type){
		margin-bottom: 3rem;
		border-bottom: 1px solid rgba(#000,.1);
	}
}*/
.hotel-list-wrap {
  margin-bottom: 2rem;
}
.hotel-list-wrap > p {
  margin-bottom: 1.5rem;
  font-size: 2.2em;
  padding-left: 0.5em;
  color: #5696b3;
  border-left: 2px solid #5696b3;
}
/* 20230626 ペット写真 */
.pet-gallery {
  margin-top: 3rem;
  padding: 2.5rem;
  background: #f7f7eb;
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
}
@media screen and (max-width: 767px) {
  .pet-gallery {
    padding: 1.5rem;
  }
}

.pet-gallery-lead {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  /* margin-top: 1rem;  */
}

.pet-gallery-text {
  font-size: 1.8rem;
  text-align: center;
  margin-top: 0.2rem;
  margin-bottom: 2rem;
}

.pet-gallery-list {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pet-gallery-list li {
  width: 24%;
  margin-bottom: 0.8rem;
}
@media screen and (max-width: 767px) {
  .pet-gallery-list li {
    width: 33%;
  }
}

.pet-gallery-list li img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

.rooms-detail-list-img-slide {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.rooms-detail-list-img-slide img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
}

.hotel-list-text-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 3rem 0;
  margin-top: 8rem;
}
.hotel-list-text-container > p {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 4rem;
}

ul.hotel-list-text {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  ul.hotel-list-text {
    grid-template-columns: 1fr;
  }
}
ul.hotel-list-text a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  transition: all 0.5s;
}
ul.hotel-list-text a, ul.hotel-list-text a:link, ul.hotel-list-text a:visited {
  color: #000;
}
ul.hotel-list-text a:hover, ul.hotel-list-text a:active {
  text-decoration: none;
  color: #000;
}
ul.hotel-list-text a:hover {
  background: #eaeaea;
}
ul.hotel-list-text .hotel-list-info {
  display: flex;
}
ul.hotel-list-text .hotel-list-img {
  width: 30%;
  height: 100%;
}
ul.hotel-list-text .hotel-list-img figure {
  height: 100%;
  width: 100%;
}
ul.hotel-list-text .hotel-list-img figure img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
ul.hotel-list-text .hotel-name-wrap {
  padding: 0 1rem;
  display: inline-block;
  font-size: 1.2rem;
  width: 70%;
  line-height: 1.2;
}
ul.hotel-list-text .hotel-name-wrap > span {
  display: inline-block;
  width: 100%;
}
ul.hotel-list-text .hotel-name {
  font-size: 1.8em;
}
ul.hotel-list-text .hotel-name b {
  font-weight: normal;
  text-transform: uppercase;
}
ul.hotel-list-text .hotel-name small {
  font-size: 0.8em;
}
ul.hotel-list-text .hotel-nameSub {
  font-size: 0.9em;
  margin-top: 0.3em;
}
@media screen and (max-width: 767px) {
  ul.hotel-list-text .hotel-nameSub {
    font-size: 12px;
  }
}
ul.hotel-list-text .capa {
  font-size: 0.8em;
  display: inline-block;
  line-height: 1;
  margin-top: 0.5em;
}
ul.hotel-list-text .capa span {
  font-size: 1.2em;
}

.refa {
  margin: 0 0 4rem 0;
  padding: 2rem 3rem;
  background: #e5e8ea;
}
@media screen and (max-width: 767px) {
  .refa {
    padding: 1rem 1.5rem;
  }
}
.refa > p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 0.8em;
}
@media screen and (max-width: 1199px) {
  .refa > p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .refa > p {
    font-size: 3.15vw;
  }
}
.refa .items-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .refa .items-list {
    grid-template-columns: 1fr 1fr;
  }
}
.refa .items-list figure img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}
.refa .items-list figure figcaption {
  text-align: left;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 0.1em;
}
@media screen and (max-width: 1199px) {
  .refa .items-list figure figcaption {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) {
  .refa .items-list figure figcaption {
    font-size: 2.7vw;
  }
}
.rooms-detail-dsc {
  font-size: 1.2rem;
}
.rooms-detail-dsc-eq, .rooms-detail-dsc-atn {
  width: 100%;
  margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-eq, .rooms-detail-dsc-atn {
    width: 100%;
  }
}
.rooms-detail-dsc-subtitle {
  width: 100%;
  color: #2a2f31;
  margin-bottom: 2rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
@media screen and (max-width: 1199px) {
  .rooms-detail-dsc-subtitle {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-subtitle {
    font-size: 6.75vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-subtitle {
    margin-bottom: 2rem;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-detail-dsc-subtitle {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-detail-dsc-subtitle {
    font-size: 6.75vw;
  }
}
.rooms-detail-dsc-eq {
  width: 100%;
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-eq {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-eq {
    grid-template-columns: 1fr;
  }
}
.rooms-detail-dsc-eq.other {
  width: 100%;
}
.rooms-detail-dsc-eq.other p {
  width: 100%;
}
.rooms-detail-dsc-eq.other .rooms-detail-dsc-eq--content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .rooms-detail-dsc-eq.other .rooms-detail-dsc-eq--content {
    width: 100%;
  }
}
.rooms-detail-dsc-eq.amenity .rooms-detail-dsc-eq-pic figure {
  width: 100%;
}
.rooms-detail-dsc-eq.amenity .rooms-detail-dsc-eq-pic figure img {
  aspect-ratio: 2;
  width: 100%;
  object-fit: cover;
}
.rooms-detail-dsc-eq dl dt {
  margin-bottom: 0.5em;
  padding: 0.2em;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  color: #333;
}
.rooms-detail-dsc-eq dl dd {
  margin-bottom: 2em;
}
.rooms-detail-dsc-eq dl dd small {
  font-size: 0.6em;
}
.rooms-detail-dsc-atn dl {
  display: flex;
  flex-wrap: wrap;
}
.rooms-detail-dsc-atn dl dt, .rooms-detail-dsc-atn dl dd {
  margin-bottom: 0.8em;
}
.rooms-detail-dsc-atn dl dt {
  width: 20%;
  opacity: 0.6;
}
.rooms-detail-dsc-atn dl dd {
  width: 80%;
}
.rooms-detail-dsc .rooms-detail-dsc-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 1.4em !important;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
.rooms-detail-dsc .rooms-detail-dsc-title small {
  font-size: 0.8em;
  margin-left: 1em;
}
.rooms-detail-dsc-ann {
  width: 100%;
  border-top: 1px solid #aaa;
  padding-top: 1em;
}

.rooms-equipment {
  width: 100%;
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .rooms-equipment {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.rooms-equipment figure {
  display: inline-block;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .rooms-equipment figure {
    width: 100%;
    text-align: center;
  }
}
.rooms-equipment figure img {
  aspect-ratio: 1.3;
  object-fit: cover;
  width: 100%;
}
.rooms-equipment .imgCol2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rooms-equipment .imgCol2 figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 0.8;
}
.rooms-equipment .imgCol3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rooms-equipment .imgCol3 figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.3;
}
.rooms-equipment p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  width: 100%;
  padding: 0.5rem 0 0;
  text-align: justify;
}
@media screen and (max-width: 1199px) {
  .rooms-equipment p {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment p {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-equipment p {
    width: 100%;
  }
}

.rooms-detail-mv-slide {
  overflow: hidden;
  position: relative;
}
.rooms-detail-mv-slide:nth-of-type(1) img {
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 100%;
}
.rooms-detail-mv-slide:nth-of-type(2) {
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .rooms-detail-mv-slide:nth-of-type(2) {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1rem;
  }
}
.rooms-detail-mv-slide:nth-of-type(2) .slide-block {
  cursor: pointer;
  transition: opacity 0.5s;
  visibility: hidden;
  opacity: 0.5;
}
@media screen and (max-width: 767px) {
  .rooms-detail-mv-slide:nth-of-type(2) .slide-block {
    opacity: 0.5;
    visibility: visible;
  }
}
.rooms-detail-mv-slide:nth-of-type(2) .slide-block.swiper-slide-thumb-active {
  opacity: 1;
}
.rooms-detail-mv-slide:nth-of-type(2) .swiper-slide-visible {
  visibility: visible;
  opacity: 0.5;
}
.rooms-detail-mv-slide:nth-of-type(2) .swiper-slide-visible.swiper-slide-thumb-active {
  opacity: 1;
}
.rooms-detail-mv-slide:nth-of-type(2) img {
  aspect-ratio: 2;
  object-fit: cover;
  width: 100%;
}
.rooms-detail-mv-slide .swiper-button-next, .rooms-detail-mv-slide .swiper-button-prev {
  color: #fff;
}
.rooms-detail-mv-slide .swiper-button-next::after, .rooms-detail-mv-slide .swiper-button-prev::after {
  font-size: 2rem;
}

.basic-title h3,
.basic-title p {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 1rem);
}
.basic-title h3 {
  transition-delay: 0.4s;
}
.basic-title p.en {
  transition-delay: 0.2s;
}
.basic-title p.title-area {
  transition-delay: 0.1s;
}
.basic-title.is-anm h3,
.basic-title.is-anm p, .is-anm .basic-title h3,
.is-anm .basic-title p {
  opacity: 1;
  transform: translate(0, 0);
}

.top-contents .top-contents-img, .top-contents h3, .top-contents .sec-text, .top-contents .title-en {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 30px);
}
.top-contents .top-contents-img {
  transition-delay: 0.1s;
}
.top-contents h3 {
  transition-delay: 0.2s;
}
.top-contents .title-en {
  transition-delay: 0.3s;
}
.top-contents .sec-text {
  transition-delay: 0.5s;
}
.top-contents.is-anm .top-contents-img {
  opacity: 1;
  transform: translate(0, 0);
}
.top-contents.is-anm h3, .top-contents.is-anm .sec-text, .top-contents.is-anm .title-en {
  opacity: 1;
  transform: translate(0, 0);
}

.page-title h2 > span, .page-title h2::before, .page-title h2::after, .page-title .page-title-en {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 30px);
}
.page-title h2 > span {
  transition-delay: 0.3s;
}
.page-title h2::before {
  transition-delay: 0.1s;
}
.page-title h2::after {
  transition-delay: 0.1s;
}
.page-title .page-title-en {
  transition-delay: 0.5s;
}
.page-title.is-anm h2 > span {
  opacity: 1;
  transform: translate(0, 0);
}
.page-title.is-anm h2::before, .page-title.is-anm h2::after {
  opacity: 0.3;
  transform: translate(0, 0) skewY(-15deg);
}
.page-title.is-anm .page-title-en {
  opacity: 1;
  transform: translate(0, 0);
}

.contents.pics figure {
  display: inline-block;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 2s;
}
.contents.pics figure:nth-of-type(1) {
  transition-delay: calc(500ms + (100ms * 1));
}
.contents.pics figure:nth-of-type(2) {
  transition-delay: calc(500ms + (100ms * 2));
}
.contents.pics figure:nth-of-type(3) {
  transition-delay: calc(500ms + (100ms * 3));
}
.contents.pics figure:nth-of-type(4) {
  transition-delay: calc(500ms + (100ms * 4));
}
.contents.pics.is-anm figure {
  opacity: 1;
}

.hotels-list-block h4,
.hotels-list-block .text-block--lead,
.hotels-list-block .text-block--text,
.hotels-list-block .text-block--link,
.hotels-list-block .text-block--detail,
.hotels-list-block .text-block--area,
.hotels-list-block .img-block,
.restaurant-list-block h4,
.restaurant-list-block .text-block--lead,
.restaurant-list-block .text-block--text,
.restaurant-list-block .text-block--link,
.restaurant-list-block .text-block--detail,
.restaurant-list-block .text-block--area,
.restaurant-list-block .img-block {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 1em);
}
.hotels-list-block h4,
.restaurant-list-block h4 {
  transition-delay: 0.2s;
}
.hotels-list-block .text-block--lead,
.restaurant-list-block .text-block--lead {
  transition-delay: 0.3s;
}
.hotels-list-block .text-block--text,
.restaurant-list-block .text-block--text {
  transition-delay: 0.4s;
}
.hotels-list-block .text-block--link,
.restaurant-list-block .text-block--link {
  transition-delay: 0.6s;
}
.hotels-list-block .text-block--detail,
.restaurant-list-block .text-block--detail {
  transition-delay: 0.5s;
}
.hotels-list-block .text-block--area,
.restaurant-list-block .text-block--area {
  transition-delay: 0.5s;
}
.hotels-list-block .img-block,
.restaurant-list-block .img-block {
  transition-delay: 0.4s;
  transform: translate(0, -1em);
}
@media screen and (max-width: 767px) {
  .hotels-list-block .img-block,
.restaurant-list-block .img-block {
    transform: translate(0, 1em);
  }
}
.hotels-list-block.is-anm h4,
.hotels-list-block.is-anm .text-block--lead,
.hotels-list-block.is-anm .text-block--text,
.hotels-list-block.is-anm .text-block--link,
.hotels-list-block.is-anm .text-block--detail,
.hotels-list-block.is-anm .text-block--area,
.hotels-list-block.is-anm .img-block,
.restaurant-list-block.is-anm h4,
.restaurant-list-block.is-anm .text-block--lead,
.restaurant-list-block.is-anm .text-block--text,
.restaurant-list-block.is-anm .text-block--link,
.restaurant-list-block.is-anm .text-block--detail,
.restaurant-list-block.is-anm .text-block--area,
.restaurant-list-block.is-anm .img-block {
  opacity: 1;
  transform: translate(0, 0);
}

.map .pin {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 1em);
}
.map .pin:nth-of-type(1) {
  transition-delay: calc(500ms + (100ms * 1));
}
.map .pin:nth-of-type(2) {
  transition-delay: calc(500ms + (100ms * 2));
}
.map .pin:nth-of-type(3) {
  transition-delay: calc(500ms + (100ms * 3));
}
.map .pin:nth-of-type(4) {
  transition-delay: calc(500ms + (100ms * 4));
}
.map .pin:nth-of-type(5) {
  transition-delay: calc(500ms + (100ms * 5));
}
.map .pin:nth-of-type(6) {
  transition-delay: calc(500ms + (100ms * 6));
}
.map .pin:nth-of-type(7) {
  transition-delay: calc(500ms + (100ms * 7));
}
.map .pin:nth-of-type(8) {
  transition-delay: calc(500ms + (100ms * 8));
}
.map .pin:nth-of-type(9) {
  transition-delay: calc(500ms + (100ms * 9));
}
.map .pin:nth-of-type(10) {
  transition-delay: calc(500ms + (100ms * 10));
}
.map .pin:nth-of-type(11) {
  transition-delay: calc(500ms + (100ms * 11));
}
.map .pin:nth-of-type(12) {
  transition-delay: calc(500ms + (100ms * 12));
}
.map .pin:nth-of-type(13) {
  transition-delay: calc(500ms + (100ms * 13));
}
.map .pin:nth-of-type(14) {
  transition-delay: calc(500ms + (100ms * 14));
}
.map .pin:nth-of-type(15) {
  transition-delay: calc(500ms + (100ms * 15));
}
.map.is-anm .pin {
  opacity: 1;
  transform: translate(0, 0);
}

.mv-copy {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 0s;
  transform: translate(0, 0.5em);
}
.is-anm .mv-copy, .mv-copy.is-anm {
  opacity: 1;
  transform: translate(0, 0);
}

.letterAnm span {
  opacity: 0;
  display: inline-block;
  transition-property: all;
  transition-duration: 0.5s;
  transform: translate(-0.2em, 0.2em);
}
.letterAnm span:nth-of-type(1) {
  transition-delay: 0.07s;
}
.letterAnm span:nth-of-type(2) {
  transition-delay: 0.14s;
}
.letterAnm span:nth-of-type(3) {
  transition-delay: 0.21s;
}
.letterAnm span:nth-of-type(4) {
  transition-delay: 0.28s;
}
.letterAnm span:nth-of-type(5) {
  transition-delay: 0.35s;
}
.letterAnm span:nth-of-type(6) {
  transition-delay: 0.42s;
}
.letterAnm span:nth-of-type(7) {
  transition-delay: 0.49s;
}
.letterAnm span:nth-of-type(8) {
  transition-delay: 0.56s;
}
.letterAnm span:nth-of-type(9) {
  transition-delay: 0.63s;
}
.letterAnm span:nth-of-type(10) {
  transition-delay: 0.7s;
}
.letterAnm span:nth-of-type(11) {
  transition-delay: 0.77s;
}
.letterAnm span:nth-of-type(12) {
  transition-delay: 0.84s;
}
.letterAnm span:nth-of-type(13) {
  transition-delay: 0.91s;
}
.letterAnm span:nth-of-type(14) {
  transition-delay: 0.98s;
}
.letterAnm span:nth-of-type(15) {
  transition-delay: 1.05s;
}
.letterAnm span:nth-of-type(16) {
  transition-delay: 1.12s;
}
.letterAnm span:nth-of-type(17) {
  transition-delay: 1.19s;
}
.letterAnm span:nth-of-type(18) {
  transition-delay: 1.26s;
}
.letterAnm span:nth-of-type(19) {
  transition-delay: 1.33s;
}
.letterAnm span:nth-of-type(20) {
  transition-delay: 1.4s;
}
.letterAnm span:nth-of-type(21) {
  transition-delay: 1.47s;
}
.letterAnm span:nth-of-type(22) {
  transition-delay: 1.54s;
}
.letterAnm span:nth-of-type(23) {
  transition-delay: 1.61s;
}
.letterAnm span:nth-of-type(24) {
  transition-delay: 1.68s;
}
.letterAnm span:nth-of-type(25) {
  transition-delay: 1.75s;
}
.letterAnm span:nth-of-type(26) {
  transition-delay: 1.82s;
}
.letterAnm span:nth-of-type(27) {
  transition-delay: 1.89s;
}
.letterAnm span:nth-of-type(28) {
  transition-delay: 1.96s;
}
.letterAnm span:nth-of-type(29) {
  transition-delay: 2.03s;
}
.letterAnm span:nth-of-type(30) {
  transition-delay: 2.1s;
}
.is-anm .letterAnm span {
  opacity: 1;
  transform: translate(0, 0);
}

.orderFadein > * {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transform: translate(0, 1em);
}
.orderFadein > *:nth-of-type(1) {
  transition-delay: 0.1s;
}
.orderFadein > *:nth-of-type(2) {
  transition-delay: 0.2s;
}
.orderFadein > *:nth-of-type(3) {
  transition-delay: 0.3s;
}
.orderFadein > *:nth-of-type(4) {
  transition-delay: 0.4s;
}
.orderFadein > *:nth-of-type(5) {
  transition-delay: 0.5s;
}
.orderFadein > *:nth-of-type(6) {
  transition-delay: 0.6s;
}
.orderFadein > *:nth-of-type(7) {
  transition-delay: 0.7s;
}
.orderFadein > *:nth-of-type(8) {
  transition-delay: 0.8s;
}
.orderFadein > *:nth-of-type(9) {
  transition-delay: 0.9s;
}
.orderFadein > *:nth-of-type(10) {
  transition-delay: 1s;
}
.orderFadein > *:nth-of-type(11) {
  transition-delay: 1.1s;
}
.orderFadein > *:nth-of-type(12) {
  transition-delay: 1.2s;
}
.orderFadein > *:nth-of-type(13) {
  transition-delay: 1.3s;
}
.orderFadein > *:nth-of-type(14) {
  transition-delay: 1.4s;
}
.orderFadein > *:nth-of-type(15) {
  transition-delay: 1.5s;
}
.orderFadein > *:nth-of-type(16) {
  transition-delay: 1.6s;
}
.orderFadein > *:nth-of-type(17) {
  transition-delay: 1.7s;
}
.orderFadein > *:nth-of-type(18) {
  transition-delay: 1.8s;
}
.orderFadein > *:nth-of-type(19) {
  transition-delay: 1.9s;
}
.orderFadein > *:nth-of-type(20) {
  transition-delay: 2s;
}
.orderFadein > *:nth-of-type(21) {
  transition-delay: 2.1s;
}
.orderFadein > *:nth-of-type(22) {
  transition-delay: 2.2s;
}
.orderFadein > *:nth-of-type(23) {
  transition-delay: 2.3s;
}
.orderFadein > *:nth-of-type(24) {
  transition-delay: 2.4s;
}
.orderFadein > *:nth-of-type(25) {
  transition-delay: 2.5s;
}
.orderFadein > *:nth-of-type(26) {
  transition-delay: 2.6s;
}
.orderFadein > *:nth-of-type(27) {
  transition-delay: 2.7s;
}
.orderFadein > *:nth-of-type(28) {
  transition-delay: 2.8s;
}
.orderFadein > *:nth-of-type(29) {
  transition-delay: 2.9s;
}
.orderFadein > *:nth-of-type(30) {
  transition-delay: 3s;
}
.is-anm .orderFadein > * {
  opacity: 1;
  transform: translate(0, 0);
}

.fadeIn {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 0s;
  transform: translate(0, 0.5em);
}
.is-anm .fadeIn, .fadeIn.is-anm {
  opacity: 1;
  transform: translate(0, 0);
}

.fadeInS {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 0s;
  transform: translate(0, 0);
}
.is-anm .fadeInS, .fadeInS.is-anm {
  opacity: 1;
  transform: translate(0, 0);
}

.fadeInDown {
  opacity: 0;
  transition-property: all;
  transition-duration: 1s;
  transition-delay: 0s;
  transform: translate(0, -1em);
}
.is-anm .fadeInDown, .fadeInDown.is-anm {
  opacity: 1;
  transform: translate(0, 0);
}

.bnr-list .bnr:nth-of-type(1) {
  transition-delay: 0.1s;
}
.bnr-list .bnr:nth-of-type(2) {
  transition-delay: 0.2s;
}
.bnr-list .bnr:nth-of-type(3) {
  transition-delay: 0.3s;
}

.t-d-1 {
  transition-delay: 0.2s;
}

.t-d-2 {
  transition-delay: 0.4s;
}

.t-d-3 {
  transition-delay: 0.6s;
}

.t-d-4 {
  transition-delay: 0.8s;
}

.t-d-5 {
  transition-delay: 1s;
}

.t-d-6 {
  transition-delay: 1.2s;
}

.t-d-7 {
  transition-delay: 1.4s;
}

.t-d-8 {
  transition-delay: 1.6s;
}

.t-d-9 {
  transition-delay: 1.8s;
}

.t-d-10 {
  transition-delay: 2s;
}

.t-d-11 {
  transition-delay: 2.2s;
}

.t-d-12 {
  transition-delay: 2.4s;
}

.t-d-13 {
  transition-delay: 2.6s;
}

.t-d-14 {
  transition-delay: 2.8s;
}

.t-d-15 {
  transition-delay: 3s;
}

.t-d-16 {
  transition-delay: 3.2s;
}

.t-d-17 {
  transition-delay: 3.4s;
}

.t-d-18 {
  transition-delay: 3.6s;
}

.t-d-19 {
  transition-delay: 3.8s;
}

.t-d-20 {
  transition-delay: 4s;
}

.access-block .gmap {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .access-block .gmap {
    width: 100%;
  }
}
.access-block .access-info-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}
.access-block .access-info-container .title-set {
  width: 100%;
}
.access-block .access-info-container .title-set h3, .access-block .access-info-container .title-set p {
  text-align: left;
}
@media screen and (max-width: 767px) {
  .access-block .access-info-container {
    grid-template-columns: 1fr;
  }
}
.access-block #googlemaps {
  aspect-ratio: 1.6;
  filter: saturate(0%);
}
@media screen and (max-width: 767px) {
  .access-block #googlemaps {
    width: 100%;
    aspect-ratio: 1;
  }
}
@media screen and (max-width: 767px) {
  .access-block .access-info {
    width: 100%;
  }
}
.access-block .access-info .title {
  margin-bottom: 1em;
}

.access-info {
  width: 100%;
  text-align: left;
  padding: 5% 0;
}
.access-info h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .access-info h3 {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .access-info h3 {
    font-size: 5.4vw;
  }
}
.access-info p {
  width: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .access-info p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .access-info p {
    font-size: 3.15vw;
  }
}

.access-detail .lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
  width: 100%;
  padding: 3em 0;
}
@media screen and (max-width: 1199px) {
  .access-detail .lead {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .access-detail .lead {
    font-size: 4.05vw;
  }
}
.access-detail .title {
  padding: 13% 0;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .access-detail .title {
    padding: 30% 0;
  }
}
.access-detail .title h3, .access-detail .title p {
  color: #fff;
  text-align: center;
  width: 100%;
}
.access-detail.ce2 .title {
  position: relative;
}
.access-detail.ce2 .title::before, .access-detail.ce2 .title::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.access-detail.ce2 .title::before {
  z-index: -2;
  background: url(../img/access/access-title-bg.jpg) no-repeat center bottom 30%/cover;
}
.access-detail.ce2 .title::after {
  z-index: -1;
}
.access-detail-block {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5%;
  margin-bottom: 5%;
}
.access-detail-block--text {
  width: 40%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  padding: 0 5%;
}
@media screen and (max-width: 767px) {
  .access-detail-block--text {
    width: 100%;
  }
}
.access-detail-block--text h4 {
  width: 100%;
  display: flex;
  align-items: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .access-detail-block--text h4 {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .access-detail-block--text h4 {
    font-size: 5.4vw;
  }
}
.access-detail-block--text .access-route ul {
  list-style: none;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  letter-spacing: 0;
  padding-left: 1em;
  padding-top: 0.5em;
}
@media screen and (max-width: 1199px) {
  .access-detail-block--text .access-route ul {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .access-detail-block--text .access-route ul {
    font-size: 3.6vw;
  }
}
.access-detail-block--text .access-route ul li {
  text-indent: -1em;
  line-height: 1.5em;
  margin-bottom: 0.7em;
}
.access-detail-block--text .access-route ul li::before {
  content: "・";
}
.access-detail-block--map {
  width: 60%;
}
@media screen and (max-width: 767px) {
  .access-detail-block--map {
    width: 100%;
  }
}

.access-detail-gmap #googlemaps {
  width: 100%;
  height: 300px;
}
.access-detail-gmap .access-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .access-detail-gmap .access-info {
    width: 100%;
  }
}
.access-detail-gmap .access-info .title {
  margin-bottom: 1em;
}

.access-checkin {
  font-size: 1.4rem;
}
.access-checkin > * {
  width: 100%;
}
.access-checkin-contents {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.access-checkin .checkin-img {
  width: 100%;
  margin-top: 1rem;
}
.access-checkin .checkin-img img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 2.5;
  display: none;
}
.access-checkin .access-checkin-place-title {
  font-size: 1.2em;
}
@media screen and (max-width: 767px) {
  .access-checkin .access-checkin-place-title {
    font-size: 1em;
  }
}
.access-checkin .access-checkin-place-tel b {
  margin-left: 0.5em;
  font-size: 1.1em;
  font-weight: normal;
}
.access-checkin .nowrap {
  display: inline-block;
}
.access-checkin .t-center {
  text-align: center;
}
.access-checkin dl {
  display: inline-flex;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1rem;
  width: auto;
}
.access-checkin dl dt, .access-checkin dl dd {
  text-align: left;
  line-height: 1.3;
}
.access-checkin dl dt small, .access-checkin dl dd small {
  font-size: 0.7em;
  display: block;
}
.access-checkin dl dt span, .access-checkin dl dd span {
  display: inline-block;
}
.access-checkin dl dt {
  flex-basis: 8em;
}
@media screen and (max-width: 767px) {
  .access-checkin dl dt {
    flex-basis: 8em;
  }
}
.access-checkin dl dd {
  flex-basis: calc(100% - 8em);
  font-size: 1em;
}
@media screen and (max-width: 767px) {
  .access-checkin dl dd {
    flex-basis: calc(100% - 8em);
  }
}
.home .access-checkin {
  margin-top: 5rem;
  padding: 2rem 0;
}
@media screen and (max-width: 767px) {
  .home .access-checkin {
    margin-top: 0;
  }
}

.access-address {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.information-center {
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

@media screen and (max-width: 767px) {
  .sp-1 {
    order: -1;
    margin-bottom: 1rem;
  }
}

body.access .access-desc,
body.access .access-contents {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
body.access .access-desc.col2,
body.access .access-contents.col2 {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}
body.access .access-desc.col2 > div,
body.access .access-contents.col2 > div {
  width: 48%;
}
@media screen and (max-width: 767px) {
  body.access .access-desc.col2 > div,
body.access .access-contents.col2 > div {
    width: 100%;
  }
}
body.access .access-desc > div {
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  body.access .access-desc > div {
    justify-content: center;
  }
  body.access .access-desc > div:not(:last-of-type) {
    margin-bottom: 2rem;
  }
}
body.access .access-desc > div figure {
  width: 80px;
  margin: 0 auto 1em;
}
@media screen and (max-width: 767px) {
  body.access .access-desc > div figure {
    margin-bottom: 0.5rem;
  }
}
body.access .access-desc > div p {
  width: 100%;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  body.access .access-desc > div p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  body.access .access-desc > div p {
    font-size: 3.6vw;
  }
}
body.access .access-contents p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  body.access .access-contents p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  body.access .access-contents p {
    font-size: 3.6vw;
  }
}
body.access .checkin-img {
  display: none;
}
body.access .accessPage-checkin {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
body.access .accessPage-checkin > div:nth-of-type(1) {
  width: 35%;
}
@media screen and (max-width: 767px) {
  body.access .accessPage-checkin > div:nth-of-type(1) {
    width: 100%;
  }
}
body.access .accessPage-checkin > div:nth-of-type(2) {
  width: 60%;
}
@media screen and (max-width: 767px) {
  body.access .accessPage-checkin > div:nth-of-type(2) {
    width: 100%;
  }
}
.baggage-info {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 2rem;
  margin-top: 2rem;
}

.baggage {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3rem;
}
@media screen and (max-width: 767px) {
  .baggage {
    padding: 1.5rem;
  }
}

.ss {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding-bottom: 60px;
}
.ss ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5rem;
}
.ss ul li {
  padding: 0 3rem;
  position: relative;
}
.ss ul li .thumb {
  width: 100%;
  margin-bottom: 0.5rem;
}
.ss ul li .thumb img {
  width: 100%;
  aspect-ratio: 0.9;
  object-fit: cover;
}
.ss ul li .text {
  text-align: center;
}
.ss ul li .text .ss-spot-title {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
@media screen and (max-width: 1199px) {
  .ss ul li .text .ss-spot-title {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .ss ul li .text .ss-spot-title {
    font-size: 3.6vw;
  }
}
.ss ul li .text .time {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: auto;
  padding: 0.3em 2em;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1;
  /*font-size: 12px;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  left: 3rem;
  top: 5px;
  width: 6rem;
  height: 6rem;
  border-radius: 20rem;
  padding: 10px;
  line-height: 1;*/
}
@media screen and (max-width: 1199px) {
  .ss ul li .text .time {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .ss ul li .text .time {
    font-size: 3.15vw;
  }
}
.ss ul li .text .time br {
  display: none;
}
.ss ul li .text .ss-spot-text {
  text-align: justify;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
@media screen and (max-width: 1199px) {
  .ss ul li .text .ss-spot-text {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) {
  .ss ul li .text .ss-spot-text {
    font-size: 2.7vw;
  }
}
.ss .slick-dots {
  bottom: -40px;
}
.ss .slick-dots li {
  padding: 0;
}

.accsess-contents-mv img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 2.8;
  object-position: top 70% right 0;
}
@media screen and (max-width: 767px) {
  .accsess-contents-mv img {
    aspect-ratio: 1.4;
  }
}

.access-detail {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}
.access-detail-info {
  display: flex;
  align-items: center;
}
.access-detail-info:not(:last-of-type) {
  margin-bottom: 1em;
}
.access-detail-info figure {
  width: 50px;
  margin-right: 1em;
}
@media screen and (max-width: 767px) {
  .access-detail-info figure {
    margin-bottom: 0.5rem;
  }
}
.access-detail-info p {
  width: 100%;
}
.googlemaps-wrap {
  width: 100%;
}
.googlemaps-wrap #googlemaps {
  width: 100%;
  height: 500px;
  filter: saturate(0%);
}
@media screen and (max-width: 767px) {
  .googlemaps-wrap #googlemaps {
    width: 100%;
    aspect-ratio: 1;
  }
}

.ss-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.ss-group .ss-block-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block-wrap {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block {
    margin-bottom: 2rem;
  }
}
.ss-group .ss-block-text {
  padding: 1rem 0 0 0;
}
.ss-group .ss-block-text-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .ss-group .ss-block-text-title {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block-text-title {
    font-size: 4.05vw;
  }
}
.ss-group .ss-block-text-titleEn {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
@media screen and (max-width: 1199px) {
  .ss-group .ss-block-text-titleEn {
    font-size: 0.99vw;
  }
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block-text-titleEn {
    font-size: 2.475vw;
  }
}
.ss-group .ss-block-text-maplink {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  margin-top: 1.5rem;
  border-radius: 10rem;
  display: inline-block;
}
@media screen and (max-width: 1199px) {
  .ss-group .ss-block-text-maplink {
    font-size: 0.99vw;
  }
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block-text-maplink {
    font-size: 2.475vw;
  }
}
.ss-group .ss-block-text-maplink, .ss-group .ss-block-text-maplink:link, .ss-group .ss-block-text-maplink:visited {
  color: #000;
}
.ss-group .ss-block-text-maplink:hover, .ss-group .ss-block-text-maplink:active {
  text-decoration: none;
  color: #000;
}
.ss-group .ss-block-text-maplink span {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  text-decoration: underline;
}
.ss-group .ss-block-text-maplink span::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.8rem;
  background: url(../img/cmn/map_pin.svg) no-repeat center center/contain;
}
.ss-group .ss-block-text-description {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .ss-group .ss-block-text-description {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .ss-group .ss-block-text-description {
    font-size: 3.15vw;
  }
}
.ss-group .ss-block-img img {
  aspect-ratio: 1.6;
  object-fit: cover;
  width: 100%;
}

.faq .qa-list {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  color: #333;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-top: 8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media screen and (max-width: 1199px) {
  .faq .qa-list {
    justify-content: space-between;
  }
}
.faq .qa-list dl {
  font-size: 1.8rem;
  border-bottom: 1px solid rgba(0, 63, 135, 0.2);
  margin-bottom: 1.2em;
  line-height: 1.5;
  width: 100%;
  margin-right: 10px;
}
.faq .qa-list dl:nth-of-type(3n) {
  margin-right: 0;
}
@media screen and (max-width: 1199px) {
  .faq .qa-list dl {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .faq .qa-list dl {
    width: 100%;
  }
}
.faq .qa-list dl:nth-of-type(1) dt::before {
  content: "Q1";
}
.faq .qa-list dl:nth-of-type(2) dt::before {
  content: "Q2";
}
.faq .qa-list dl:nth-of-type(3) dt::before {
  content: "Q3";
}
.faq .qa-list dl:nth-of-type(4) dt::before {
  content: "Q4";
}
.faq .qa-list dl:nth-of-type(5) dt::before {
  content: "Q5";
}
.faq .qa-list dl:nth-of-type(6) dt::before {
  content: "Q6";
}
.faq .qa-list dl:nth-of-type(7) dt::before {
  content: "Q7";
}
.faq .qa-list dl:nth-of-type(8) dt::before {
  content: "Q8";
}
.faq .qa-list dl:nth-of-type(9) dt::before {
  content: "Q9";
}
.faq .qa-list dl:nth-of-type(10) dt::before {
  content: "Q10";
}
.faq .qa-list dl:nth-of-type(11) dt::before {
  content: "Q11";
}
.faq .qa-list dl:nth-of-type(12) dt::before {
  content: "Q12";
}
.faq .qa-list dl:nth-of-type(13) dt::before {
  content: "Q13";
}
.faq .qa-list dl:nth-of-type(14) dt::before {
  content: "Q14";
}
.faq .qa-list dl:nth-of-type(15) dt::before {
  content: "Q15";
}
.faq .qa-list dl:nth-of-type(16) dt::before {
  content: "Q16";
}
.faq .qa-list dl:nth-of-type(17) dt::before {
  content: "Q17";
}
.faq .qa-list dl:nth-of-type(18) dt::before {
  content: "Q18";
}
.faq .qa-list dl:nth-of-type(19) dt::before {
  content: "Q19";
}
.faq .qa-list dl:nth-of-type(20) dt::before {
  content: "Q20";
}
.faq .qa-list dl:nth-of-type(21) dt::before {
  content: "Q21";
}
.faq .qa-list dl:nth-of-type(22) dt::before {
  content: "Q22";
}
.faq .qa-list dl:nth-of-type(23) dt::before {
  content: "Q23";
}
.faq .qa-list dl:nth-of-type(24) dt::before {
  content: "Q24";
}
.faq .qa-list dl:nth-of-type(25) dt::before {
  content: "Q25";
}
.faq .qa-list dl:nth-of-type(26) dt::before {
  content: "Q26";
}
.faq .qa-list dl:nth-of-type(27) dt::before {
  content: "Q27";
}
.faq .qa-list dl:nth-of-type(28) dt::before {
  content: "Q28";
}
.faq .qa-list dl:nth-of-type(29) dt::before {
  content: "Q29";
}
.faq .qa-list dl:nth-of-type(30) dt::before {
  content: "Q30";
}
.faq .qa-list dl:nth-of-type(31) dt::before {
  content: "Q31";
}
.faq .qa-list dl:nth-of-type(32) dt::before {
  content: "Q32";
}
.faq .qa-list dl:nth-of-type(33) dt::before {
  content: "Q33";
}
.faq .qa-list dl:nth-of-type(34) dt::before {
  content: "Q34";
}
.faq .qa-list dl:nth-of-type(35) dt::before {
  content: "Q35";
}
.faq .qa-list dl:nth-of-type(36) dt::before {
  content: "Q36";
}
.faq .qa-list dl:nth-of-type(37) dt::before {
  content: "Q37";
}
.faq .qa-list dl:nth-of-type(38) dt::before {
  content: "Q38";
}
.faq .qa-list dl:nth-of-type(39) dt::before {
  content: "Q39";
}
.faq .qa-list dl:nth-of-type(40) dt::before {
  content: "Q40";
}
.faq .qa-list dl:nth-of-type(41) dt::before {
  content: "Q41";
}
.faq .qa-list dl:nth-of-type(42) dt::before {
  content: "Q42";
}
.faq .qa-list dl:nth-of-type(43) dt::before {
  content: "Q43";
}
.faq .qa-list dl:nth-of-type(44) dt::before {
  content: "Q44";
}
.faq .qa-list dl:nth-of-type(45) dt::before {
  content: "Q45";
}
.faq .qa-list dl:nth-of-type(46) dt::before {
  content: "Q46";
}
.faq .qa-list dl:nth-of-type(47) dt::before {
  content: "Q47";
}
.faq .qa-list dl:nth-of-type(48) dt::before {
  content: "Q48";
}
.faq .qa-list dl:nth-of-type(49) dt::before {
  content: "Q49";
}
.faq .qa-list dl:nth-of-type(50) dt::before {
  content: "Q50";
}
.faq .qa-list dl dt {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding: 1em;
  font-size: 2.3rem;
}
@media screen and (max-width: 767px) {
  .faq .qa-list dl dt {
    font-size: 2rem;
  }
}
.faq .qa-list dl dt::before {
  color: #001b3b;
  margin-right: 0.5em;
  font-size: 1.2em;
}
.faq .qa-list dl dt span {
  display: inline-block;
}
.faq .qa-list dl dd {
  display: none;
  opacity: 0.8;
  font-size: 0.8em;
  padding: 0 2em 2em 2em;
}

.food-detail {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-detail {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .food-detail {
    font-size: 3.6vw;
  }
}
.food-detail .inner {
  padding-bottom: 3rem;
}
.food-detail .lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
  width: 100%;
  padding: 3em 0;
}
@media screen and (max-width: 1199px) {
  .food-detail .lead {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .food-detail .lead {
    font-size: 4.05vw;
  }
}

.food-detail-contents .food-detail-nav {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.food-detail-contents .food-detail-nav a {
  display: block;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1199px) {
  .food-detail-contents .food-detail-nav a {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .food-detail-contents .food-detail-nav a {
    font-size: 3.6vw;
  }
}
.food-detail-contents .food-detail-nav a, .food-detail-contents .food-detail-nav a:link, .food-detail-contents .food-detail-nav a:visited {
  color: #333;
}
.food-detail-contents .food-detail-nav a:hover, .food-detail-contents .food-detail-nav a:active {
  text-decoration: none;
  color: #333;
}
@media screen and (max-width: 767px) {
  .food-detail-contents .food-detail-nav a {
    text-align: left;
  }
}
.food-detail-contents .food-detail-nav a::before {
  content: "";
  display: block;
  width: 2em;
  height: 1px;
  margin-right: 0.5em;
  background: rgba(0, 0, 0, 0.1);
}
.food-detail-contents .food-detail-nav a span {
  align-items: center;
}
.food-detail-contents .food-detail-nav a span .arrw {
  display: none;
  width: 0.8em;
  height: 0.8em;
  position: relative;
  margin-right: 1.5em;
}
.food-detail-contents .food-detail-nav a span .arrw::before, .food-detail-contents .food-detail-nav a span .arrw::after {
  display: inline-block;
}
.food-detail-contents .food-detail-nav a span .arrw::before {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border: 1px solid rgba(0, 63, 135, 0.5);
  border-radius: 10rem;
}
.food-detail-contents .food-detail-nav a span .arrw::after {
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg) scale(0.3);
  border-left: 2px solid #003f87;
  border-bottom: 2px solid #003f87;
}

.food-group-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  position: relative;
}
.food-group-head {
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
}
.food-group-info {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  .food-group-info {
    /*width: 90%;
    margin: 0 auto;
    position: static;
    transform: translateY(0);
    border-bottom: 1px solid rgba(#000,.2);
    background: none;*/
  }
}
.food-group-info h4 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-weight: normal;
}
@media screen and (max-width: 1199px) {
  .food-group-info h4 {
    font-size: 2.88vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-info h4 {
    font-size: 7.2vw;
  }
}
.food-group-info-disc {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  background: rgba(0, 63, 135, 0.1);
  border-radius: 5px;
  padding: 0.3em 1em;
  display: inline-block;
}
@media screen and (max-width: 1199px) {
  .food-group-info-disc {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-info-disc {
    font-size: 3.15vw;
  }
}
.food-group-info-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-group-info-text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-info-text {
    font-size: 3.6vw;
  }
}
.food-group-img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .food-group-img {
    width: 100%;
  }
}
.food-group-img img {
  aspect-ratio: 2.8;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .food-group-img img {
    aspect-ratio: 2;
  }
}
.food-group-lead {
  padding: 2rem 0 5rem;
}
.food-group-lead h4 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1199px) {
  .food-group-lead h4 {
    font-size: 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-lead h4 {
    font-size: 9vw;
  }
}
.food-group-lead p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-group-lead p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-lead p {
    font-size: 3.6vw;
  }
}
.food-group-lead .caption {
  font-size: 1.6rem;
}
.food-group-lead .caption span {
  display: inline-block;
}
.food-group-lead .caption span:not(:first-of-type)::before {
  content: "　|　";
}
@media screen and (max-width: 767px) {
  .food-group-lead .caption span:not(:first-of-type)::before {
    content: none;
  }
}
.food-group-menu-col3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.food-group-menu-col3 .food-group-menu-title {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.4rem;
  text-align: center;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .food-group-menu-col3 .food-group-menu-title {
    font-size: 2.2rem;
  }
}
.food-group-menu-col3 .food-group-menu-title::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  background: rgba(0, 0, 0, 0.1);
}
.food-group-menu-col3 .food-group-menu-title span {
  display: inline-block;
  padding: 0 1em;
  background: #fff;
}
.food-group-menu-col3 > div {
  width: 32%;
}
@media screen and (max-width: 767px) {
  .food-group-menu-col3 > div {
    width: 100%;
  }
}
.food-group-menu-col3 img {
  aspect-ratio: 1.2;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .food-group-menu-col3 img {
    aspect-ratio: 1.8;
  }
}
.food-group .caption-block {
  display: inline-block;
}
.food-group .border {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.food-group-menu-block-info {
  font-size: 1.8rem;
  padding: 0.7em 0;
  /*ul{
  	margin: 1em 0 0 0;
  	list-style: none;
  	font-size: .9em;
  	li{
  		&::before{
  			content: '・';
  		}
  		&:not(:first-of-type){
  			margin-top: .6em;
  		}
  	}
  }*/
}
.food-group-menu-block-info-title {
  font-size: 1.3em;
  margin-bottom: 0.3em;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .food-group-menu-block-info-title {
    font-size: 1.1em;
  }
}
.food-group-menu-block-info-title span {
  display: inline-block;
  margin-left: 0.3em;
}
.food-group-menu-block-info-price {
  font-size: 1.1em;
}
.food-group-menu-block-info-price small {
  font-size: 0.8em;
}
.food-group-menu-block-info-price span {
  font-size: 1em;
}
.food-group-menu-block-info-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
@media screen and (max-width: 1199px) {
  .food-group-menu-block-info-text {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-menu-block-info-text {
    font-size: 3.15vw;
  }
}
.food-group-menu-block-info-text span {
  display: inline-block;
}
.food-group-menu-block-info-list {
  font-size: 0.7em;
  margin-top: 1.5rem;
  list-style: none;
}
.food-group-menu-block-info-list li {
  display: block;
  line-height: 1.1;
  margin-bottom: 0.3em;
}
.food-group-menu-block-info-list li::before {
  content: "・";
}
.food-group-menu-block-info-list2 {
  font-size: 0.7em;
  margin: 1.5em 0;
  padding: 1.5em 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.food-group-menu-block-info-list2 dt {
  width: 7.5rem;
  display: inline-block;
  padding: 0.15em 0;
  line-height: 1.1;
}
.food-group-menu-block-info-list2 dd {
  display: inline-block;
  width: calc(100% - 11rem);
  padding: 0.15em 0;
  line-height: 1.1;
}
.food-group-menu-block-info-list3 {
  font-size: 0.7em;
  margin: 1.5em 0;
  padding: 1.5em 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.food-group-menu-block-info-list3 dt {
  width: 20rem;
  display: inline-block;
  padding: 0.15em 0;
  line-height: 1.1;
}
.food-group-menu-block-info-list3 dd {
  display: inline-block;
  width: calc(100% - 20rem);
  padding: 0.15em 0;
  line-height: 1.1;
}
.food-group-menu-block-info-menulist {
  font-size: 0.9em;
  margin-top: 1.5rem;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .food-group-menu-block-info-menulist {
    font-size: 0.8em;
  }
}
.food-group-menu-block-info-menulist li {
  width: 100%;
  line-height: 1.1;
  margin-bottom: 0.5em;
}
.food-group-menu-block-info-menulist li small {
  font-size: 0.8em;
}
.food-group-menu-block-info-menulist li span:nth-of-type(2) {
  margin-left: 0.8em;
}

.food-group-sub .food-group-sub-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  color: #003f87;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-weight: normal;
}
@media screen and (max-width: 1199px) {
  .food-group-sub .food-group-sub-title {
    font-size: 3.24vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-group-sub-title {
    font-size: 8.1vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-group-sub-title {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-family: "EB Garamond", serif;
    font-weight: 400;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .food-group-sub .food-group-sub-title {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .food-group-sub .food-group-sub-title {
    font-size: 6.75vw;
  }
}
.food-group-sub .food-group-sub-title-sub {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #555;
  text-align: center;
}
@media screen and (max-width: 1199px) {
  .food-group-sub .food-group-sub-title-sub {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-group-sub-title-sub {
    font-size: 4.5vw;
  }
}
.food-group-sub .food-group-sub-title-sub small {
  font-size: 0.9em;
}
.food-group-sub .food-menu-col1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.food-group-sub .food-menu-col1 .food-menu-col1-block {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col1 .food-menu-col1-block {
    width: 100%;
  }
  .food-group-sub .food-menu-col1 .food-menu-col1-block:not(:last-of-type) {
    margin-bottom: 2rem;
  }
}
.food-group-sub .food-menu-col1 h5 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-group-sub .food-menu-col1 h5 {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col1 h5 {
    font-size: 4.5vw;
  }
}
.food-group-sub .food-menu-col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9rem;
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col2 {
    gap: 2rem;
    grid-template-columns: 1fr;
  }
}
.food-group-sub .food-menu-col2 h5 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-group-sub .food-menu-col2 h5 {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col2 h5 {
    font-size: 4.5vw;
  }
}
.food-group-sub .food-menu-col3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.food-group-sub .food-menu-col3 .food-menu-col3-block {
  width: 32%;
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col3 .food-menu-col3-block {
    width: 100%;
  }
  .food-group-sub .food-menu-col3 .food-menu-col3-block:not(:last-of-type) {
    margin-bottom: 2rem;
  }
  .food-group-sub .food-menu-col3 .food-menu-col3-block:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 2rem;
  }
}
.food-group-sub .food-menu-col3 h5 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .food-group-sub .food-menu-col3 h5 {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .food-group-sub .food-menu-col3 h5 {
    font-size: 4.5vw;
  }
}

.menuImg01 {
  width: 100%;
}
.menuImg01 img {
  aspect-ratio: 2.4;
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .menuImg01 img {
    aspect-ratio: 2;
  }
}

.menuImg02 {
  width: 100%;
  line-height: 1;
  position: relative;
}
.menuImg02 img {
  aspect-ratio: 1.7;
  width: 100%;
  object-fit: cover;
}
.menuImg02 figcaption {
  position: absolute;
  right: 1em;
  bottom: 1em;
  color: #fff;
  font-size: 14px;
}

.menuImg03 {
  width: 100%;
  position: relative;
}
.menuImg03 img {
  aspect-ratio: 0.9;
  width: 100%;
  object-fit: cover;
}
.menuImg03 figcaption {
  position: absolute;
  right: 1em;
  bottom: 1em;
  color: #fff;
  font-size: 14px;
}

.food-reserve {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  margin-bottom: 5rem;
  margin-top: 3rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .food-reserve {
    font-size: 1.2rem;
  }
}
.food-reserve > p {
  text-align: center;
  font-size: 1.6em;
  margin-bottom: 2em;
}
.food-reserve-container {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .food-reserve-container {
    flex-wrap: wrap;
  }
}
.food-reserve-container .food-reserve-block {
  display: inline-block;
  padding: 0 1rem;
}
@media screen and (max-width: 767px) {
  .food-reserve-container .food-reserve-block {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .food-reserve-container .food-reserve-block:first-of-type {
    border-right: none;
  }
}
.food-reserve-container .food-reserve-block > p {
  text-align: center;
  font-size: 1.4em;
  padding: 0.2em 0;
}
.food-reserve-container .food-reserve-block a {
  text-align: center;
  font-size: 1.8em;
  text-decoration: none;
  color: #fff;
  padding: 0.6em;
  background: #003f87;
  display: inline-flex;
  position: relative;
  justify-content: center;
  width: 100%;
  align-items: center;
  transition: opacity 0.5s;
  border-radius: 5px;
}
.food-reserve-container .food-reserve-block a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-right: 0.5em;
  border-left: 0.3em solid #fff;
  border-top: 0.2em solid transparent;
  border-bottom: 0.2em solid transparent;
}
.food-reserve-container .food-reserve-block a:hover {
  opacity: 0.6;
}
.food-reserve-container .food-reserve-block small {
  font-size: 0.7em;
}

.cake-bnr {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.cake-bnr a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 1em;
  background: #eee;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.5s;
  border: 1px solid #eee;
}
@media screen and (max-width: 1199px) {
  .cake-bnr a {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .cake-bnr a {
    font-size: 3.6vw;
  }
}
.cake-bnr a, .cake-bnr a:link, .cake-bnr a:visited {
  color: #000;
}
.cake-bnr a:hover, .cake-bnr a:active {
  text-decoration: none;
  color: #000;
}
.cake-bnr a:hover {
  border: 1px solid #003f87;
}
.cake-bnr a figure {
  display: inline-block;
  width: 48%;
}
@media screen and (max-width: 767px) {
  .cake-bnr a figure {
    width: 100%;
  }
}
.cake-bnr a figure img {
  width: 100%;
  aspect-ratio: 2;
  object-fit: cover;
}
.cake-bnr a div {
  width: 48%;
  padding: 1em;
}
@media screen and (max-width: 767px) {
  .cake-bnr a div {
    width: 100%;
  }
}
.cake-bnr a div .cake-bnr-titleEn {
  color: #003f87;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}
.cake-bnr a div .cake-bnr-lead {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}
.cake-bnr a div .cake-bnr-link {
  margin-top: 2em;
  font-size: 0.8em;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em 1em;
  display: inline-block;
}

.na figure {
  position: relative;
  z-index: 0;
}
.na figure img {
  z-index: -1;
}
.na figure::before {
  z-index: 0;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.na figcaption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  text-align: center;
  right: auto;
  bottom: auto;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .na figcaption {
    font-size: 20px;
  }
}

.voice {
  background: #DEDEDE;
  padding: 3rem 0;
}
.voice-title {
  width: 100%;
  text-align: center;
  font-size: 2.6rem;
  color: #003E87;
  margin-bottom: 2rem;
}
.voice-content {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding: 6rem;
  background: #fff;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .voice-content {
    padding: 2rem;
  }
}
.voice-content-block {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5rem;
  justify-content: space-between;
}
.voice-content-block-text {
  width: 58%;
}
@media screen and (max-width: 767px) {
  .voice-content-block-text {
    width: 100%;
  }
}
.voice-content-block-text-title {
  margin-bottom: 1rem;
  border-left: 5px solid #003E87;
  padding-left: 1rem;
  font-size: 1.6rem;
}
.voice-content-block-text-title-lead {
  margin-bottom: 0.5rem;
  font-size: 1.4em;
}
.voice-content-block-text-title-info {
  font-size: 0.7em;
}
.voice-content-block-text-p {
  font-size: 1.4rem;
}
.voice-content-block-text-p span {
  color: #003E87;
}
.voice-content-block-pic {
  width: 38%;
}
@media screen and (max-width: 767px) {
  .voice-content-block-pic {
    width: 100%;
    margin-top: 1rem;
  }
}
.voice-content-block-pic figure {
  width: 90%;
}

.chef-detail-contents .chef-list {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.chef-detail-contents .chef-list .chef-list--block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 6rem;
  background: #f0f0f0;
}
.chef-detail-contents .chef-list .chef-list--block > div {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block > div {
    width: 100%;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain {
    width: 100%;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain-01 {
  height: 60%;
  width: 100%;
  width: 100%;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain-01 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain-02 {
  display: flex;
  height: 40%;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain-02 figure {
  width: 50%;
  height: 100%;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-imgMain-02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-img {
  display: flex;
  display: none;
  gap: 1rem;
  margin-top: 3em;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-img figure {
  width: 32%;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-img figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.5;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info {
  width: 50%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  padding: 5%;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info {
    width: 100%;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  align-content: center;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead figure {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead figure {
    width: 40%;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 0.8;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead > div {
  width: 80%;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info .chef-list--block-info-lead > div {
    width: 60%;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-genre {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0.3em;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 1199px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-genre {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-genre {
    font-size: 3.6vw;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-name {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-name {
    font-size: 2.34vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-name {
    font-size: 5.85vw;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-name small {
  font-size: 0.8em;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-text {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-text {
    font-size: 3.15vw;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-text .chef-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em 1em;
  display: inline-block;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-text .chef-menu {
    width: 100%;
    text-align: center;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 3em;
}
@media screen and (max-width: 1199px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link {
    font-size: 3.15vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link {
    text-align: center;
    margin-bottom: 1rem;
  }
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a {
  text-decoration: none;
  border-radius: 10rem;
  padding: 0.5em 2em;
  border: 1px solid rgba(0, 0, 0, 0.6);
  transition: all 0.5s;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a, .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a:link, .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a:visited {
  color: #333;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a:hover, .chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a:active {
  text-decoration: none;
  color: #333;
}
.chef-detail-contents .chef-list .chef-list--block .chef-list--block-info-link a:hover {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.chef-detail-contents .chef-list .chef-list--block:nth-of-type(even) .chef-list--block-img {
  order: -1;
}
@media screen and (max-width: 767px) {
  .chef-detail-contents .chef-list .chef-list--block:nth-of-type(even) .chef-list--block-img {
    order: 2;
  }
}

.chef-guide-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 3%;
  border: 9px solid rgba(0, 0, 0, 0.03);
}
.chef-guide-inner > p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 1199px) {
  .chef-guide-inner > p {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-guide-inner > p {
    font-size: 4.95vw;
  }
}
.chef-guide-inner p {
  letter-spacing: 0;
}
.chef-guide-flow-block:not(:last-of-type) {
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 2rem;
}
.chef-guide-flow-block-title {
  display: flex;
  align-items: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 0.8em;
}
@media screen and (max-width: 1199px) {
  .chef-guide-flow-block-title {
    font-size: 1.53vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-guide-flow-block-title {
    font-size: 3.825vw;
  }
}
.chef-guide-flow-block-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .chef-guide-flow-block-text {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .chef-guide-flow-block-text {
    font-size: 3.15vw;
  }
}
.chef-guide-flow-block-text p {
  line-height: 2;
}
.chef-guide-flow-block-text .ristorante-info {
  display: inline-block;
  margin-top: 1em;
  padding: 0.8em;
  background: #fff;
}
.chef-guide-flow-block-text .ristorante-info b {
  font-weight: normal;
}
.chef-guide-flow-block-text .ristorante-info span {
  font-size: 0.9em;
  line-height: 1.6;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .chef-guide-flow-block-text .ristorante-info span {
    font-size: 1em;
  }
}
.chef-guide-flow-block:nth-of-type(1) .chef-guide-flow-block-title::before {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em;
  line-height: 1;
  font-size: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  content: "1";
  color: #333;
  margin-right: 0.5em;
}
.chef-guide-flow-block:nth-of-type(2) .chef-guide-flow-block-title::before {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em;
  line-height: 1;
  font-size: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  content: "2";
  color: #333;
  margin-right: 0.5em;
}
.chef-guide-flow-block:nth-of-type(3) .chef-guide-flow-block-title::before {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em;
  line-height: 1;
  font-size: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  content: "3";
  color: #333;
  margin-right: 0.5em;
}
.chef-guide-flow-block:nth-of-type(4) .chef-guide-flow-block-title::before {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em;
  line-height: 1;
  font-size: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  content: "4";
  color: #333;
  margin-right: 0.5em;
}

.modelcourse-mv {
  width: 100%;
  background: rgba(150, 173, 215, 0.2);
}
.modelcourse-mv > div {
  display: flex;
  justify-content: space-between;
}
.modelcourse-mv > div > div {
  padding-bottom: min(30%, 400px);
}
.modelcourse-mv > div:nth-of-type(1) > div:nth-of-type(1) {
  width: 33%;
  transition-delay: 0.5s;
}
.modelcourse-mv > div:nth-of-type(1) > div:nth-of-type(2) {
  width: 33%;
  transition-delay: 0.2s;
}
.modelcourse-mv > div:nth-of-type(1) > div:nth-of-type(3) {
  width: 33%;
  transition-delay: 0;
}
.modelcourse-mv > div:nth-of-type(2) {
  margin-top: 0.5%;
}
.modelcourse-mv > div:nth-of-type(2) > div:nth-of-type(1) {
  width: 22%;
  transition-delay: 0.3s;
}
.modelcourse-mv > div:nth-of-type(2) > div:nth-of-type(2) {
  width: 38%;
  transition-delay: 0.1s;
}
.modelcourse-mv > div:nth-of-type(2) > div:nth-of-type(3) {
  width: 39%;
  transition-delay: 0.4s;
}

.modelcourse-container {
  color: #333;
}

.modelcourse-contents-container {
  position: relative;
}
.modelcourse-contents-container .modelcourse-contents-left {
  /*	position: absolute;
  	left: 5%;
  	top: 0;
  	height: 100%;
  	*/
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-container .modelcourse-contents-left {
    position: static;
    height: auto;
  }
}
.modelcourse-contents-container .modelcourse-nav-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-container .modelcourse-nav-wrap {
    position: static;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    display: block;
    margin-top: 3rem;
  }
}
.modelcourse-contents-container .modelcourse-nav-wrap.sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-container .modelcourse-nav-wrap.sp {
    display: block !important;
  }
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav {
  display: flex;
  width: 100%;
  justify-content: center;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block {
  display: flex;
  width: auto;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block {
    width: 30%;
  }
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a {
  width: 18em;
  height: 3em;
  border-right: 1px solid #2b59af;
  text-decoration: none;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  background: #2b59af;
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a {
    width: 100%;
    width: 12rem;
  }
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a p {
  display: inline-block;
  line-height: 1;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span {
  text-align: center;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span:nth-of-type(1) {
  font-size: 1.1em;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span:nth-of-type(2) {
  font-size: 2.2em;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:first-of-type {
  border-left: 1px solid #2b59af;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(:last-of-type) {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(:last-of-type)::after {
  display: block;
  background: rgba(51, 51, 51, 0.1);
  bottom: 1rem;
  left: 50%;
  width: 3rem;
  height: 1px;
  position: static;
  margin: 0 0.5em;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(.active) a {
  background: #fff;
  color: #2b59af;
}
.modelcourse-contents-container .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(.active) a:hover {
  background: rgba(43, 89, 175, 0.1);
}
.modelcourse-contents-navMain {
  padding: 3rem 0 0 0;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-navMain .modelcourse-nav-wrap {
    position: static;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    display: block;
    margin-top: 3rem;
  }
}
.modelcourse-contents-navMain .modelcourse-nav-wrap.sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-navMain .modelcourse-nav-wrap.sp {
    display: block !important;
  }
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav {
  display: flex;
  width: 100%;
  justify-content: center;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block {
  display: flex;
  width: auto;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block {
    width: 30%;
  }
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a {
  width: 18em;
  height: 3em;
  border-right: 1px solid #2b59af;
  text-decoration: none;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  background: #2b59af;
  color: #fff;
  font-size: 1.1rem;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a {
    width: 100%;
    width: 12rem;
  }
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a p {
  display: inline-block;
  line-height: 1;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span {
  text-align: center;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span:nth-of-type(1) {
  font-size: 1.1em;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block a span:nth-of-type(2) {
  font-size: 2.2em;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:first-of-type {
  border-left: 1px solid #2b59af;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(:last-of-type) {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(:last-of-type)::after {
  display: block;
  background: rgba(51, 51, 51, 0.1);
  bottom: 1rem;
  left: 50%;
  width: 3rem;
  height: 1px;
  position: static;
  margin: 0 0.5em;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(.active) a {
  background: transparent;
  color: #2b59af;
}
.modelcourse-contents-navMain .modelcourse-nav-wrap .modelcourse-nav .modelcourse-nav-block:not(.active) a:hover {
  background: rgba(43, 89, 175, 0.1);
}

.modelcourse-lead-container {
  position: relative;
  z-index: 0;
}
.modelcourse-lead-container::before {
  content: "";
  display: block;
  width: 100%;
  height: 8rem;
  position: absolute;
  left: 0;
  bottom: -10px;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 89%, white 100%);
}

.modelcourse-title {
  margin-top: 5rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

.modelcourse-lead {
  margin-top: 3rem;
  text-align: center;
}
.modelcourse-lead p {
  display: inline-block;
  text-align: center;
  font-size: 2rem;
  line-height: 1.8;
  /*
  & {
    position: relative;
    text-align: center;
    padding: 1em;
  }
  &::before, &::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 100%;
    border-top: $color-key2 solid 1px;
    border-bottom: $color-key2 solid 1px;
  }
  &::before {
    left: 0;
    top: 0;
    border-left: $color-key2 solid 1px;
  }
  &::after {
    right: 0;
    bottom: 0;
    border-right: $color-key2 solid 1px;
  }
  */
}
@media screen and (max-width: 767px) {
  .modelcourse-lead p {
    font-size: 1.7rem;
  }
}

.modelcourse-full {
  width: 100%;
  position: relative;
  z-index: 0;
}
.modelcourse-full-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 15% 0;
}
.modelcourse-full-inner.text-right {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 767px) {
  .modelcourse-full-inner {
    padding: 0;
  }
}
.modelcourse-full p {
  width: 40%;
  font-size: 1.6em;
  line-height: 1.8 !important;
}
@media screen and (max-width: 767px) {
  .modelcourse-full p {
    width: 100%;
    margin-top: 3rem;
  }
}
.modelcourse-full p.text-light {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .modelcourse-full p.text-light {
    color: #333;
  }
}
.modelcourse-full-bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .modelcourse-full-bg {
    height: auto;
    aspect-ratio: 1.5;
    position: static;
  }
}

.modelcourse-block {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 1rem;
  color: #333;
}
.modelcourse-block.text-right {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .modelcourse-block.text-right {
    flex-direction: row;
  }
}
.modelcourse-block:not(:last-of-type) {
  margin-bottom: 10%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block:not(:last-of-type) {
    margin-bottom: 20%;
  }
}
.modelcourse-block .modelcourse-block-wave {
  width: 160px;
}
@media screen and (max-width: 767px) {
  .modelcourse-block .modelcourse-block-wave {
    width: 130px;
  }
}
.modelcourse-block-text {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-text {
    width: 100%;
  }
}
.modelcourse-block-text p {
  line-height: 1.5;
}
.modelcourse-block-text-no {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 3.6em;
  color: #2b59af;
}
.modelcourse-block-text-name {
  font-size: 2.2em;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 0 0.6em;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-text-name {
    width: 100%;
    font-size: 2em;
  }
}
.modelcourse-block-text-name .spotNum {
  position: relative;
  display: inline-block;
  margin-right: 0.5em;
}
.modelcourse-block-text-name .mdlPin {
  width: 2.8em;
  height: auto;
}
.modelcourse-block-text-name .num {
  line-height: 1;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  left: 50%;
  top: 18%;
  color: #2b59af;
}
.modelcourse-block-text-name .num::before {
  content: "SPOT";
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.4em;
}
.modelcourse-block-text-name b {
  font-weight: normal;
  display: inline-block;
  position: relative;
}
.modelcourse-block-text-name b::after {
  background: radial-gradient(circle farthest-side, #000, #000 30%, transparent 30%, transparent);
  background-size: 5px;
  content: "";
  display: inline-block;
  height: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -15px;
  /*content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #aaa;
  left: 0;
  bottom: -5px;*/
}
.modelcourse-block-text-title {
  font-size: 2.8em;
  margin-top: 0.8em;
  line-height: 1.5;
  color: #2b59af;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-text-title {
    font-size: 2em;
  }
}
.modelcourse-block-text-titleEn {
  font-size: 1.4em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  margin-top: 0.3em;
}
.modelcourse-block-text-description {
  margin-top: 2em;
  font-size: 1.5em;
  text-align: justify;
  line-height: 2.2 !important;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-text-description {
    margin-top: 1em;
    text-align: justify;
    font-size: 1.4em;
  }
}
.modelcourse-block-text-info {
  margin-top: 5em;
  background: #fff;
  border-right: 1px solid rgba(43, 89, 175, 0.2);
  border-top: 1px solid rgba(43, 89, 175, 0.2);
  padding: 2.5em;
  position: relative;
  z-index: 0;
}
.modelcourse-block-text-info::before {
  display: block;
  width: 10rem;
  height: 10rem;
  background: #2b59af;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  border-radius: 20rem;
  filter: blur(5rem);
  /*width: 5rem;
  height: 5rem;
  border-bottom: 1px solid rgba($color-key2,.2);
  border-left: 1px solid rgba($color-key2,.2);
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;*/
}
@media screen and (max-width: 767px) {
  .modelcourse-block-text-info {
    padding: 1.5em;
  }
}
.modelcourse-block-text-info-title {
  color: #2b59af;
  font-size: 1.8em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  margin-bottom: 0.7em;
}
.modelcourse-block-text-info-contents {
  font-size: 1.6em;
}
.modelcourse-block-text-info-contents.teikei {
  display: flex;
  align-items: center;
  align-content: center;
  text-decoration: none;
}
.modelcourse-block-text-info-contents.teikei, .modelcourse-block-text-info-contents.teikei:link, .modelcourse-block-text-info-contents.teikei:visited {
  color: #333;
}
.modelcourse-block-text-info-contents.teikei:hover, .modelcourse-block-text-info-contents.teikei:active {
  text-decoration: none;
  color: #333;
}
.modelcourse-block-text-info-contents.teikei span {
  display: inline-block;
}
.modelcourse-block-text-info-contents.teikei::before {
  display: block;
  width: 2em;
  height: 2em;
  background: url(../img/modelcourse/icon-service.svg) no-repeat center center/contain;
}
.modelcourse-block-text-info-link {
  font-size: 1.4em;
  margin-top: 0.5em;
}
.modelcourse-block-text-info-link a {
  text-decoration: underline;
  text-decoration: none;
}
.modelcourse-block-text-info-link a, .modelcourse-block-text-info-link a:link, .modelcourse-block-text-info-link a:visited {
  color: #333;
}
.modelcourse-block-text-info-link a:hover, .modelcourse-block-text-info-link a:active {
  text-decoration: none;
  color: #333;
}
.modelcourse-block-text-info-houhou {
  display: flex;
  margin-top: 1.5em;
  align-items: center;
  align-content: center;
}
.modelcourse-block-text-info-houhou span {
  display: inline-block;
}
.modelcourse-block-text-info-houhou span:nth-of-type(1) {
  font-size: 1.2em;
  width: 4.5em;
  line-height: 1.1;
  height: 4.5em;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border-radius: 20rem;
}
.modelcourse-block-text-info-houhou span:nth-of-type(2) {
  padding-left: 1em;
  font-size: 1.6em;
  width: calc(100% - 4.5em);
}
.modelcourse-block-text-info-maplink {
  display: inline-block;
  padding: 0.6em 1.5em 0.4em;
  border: 1px solid #2b59af;
  border-radius: 10rem;
  background: #fff;
}
.modelcourse-block-text-info-maplink a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  align-content: center;
  text-decoration: none;
}
.modelcourse-block-text-info-maplink a, .modelcourse-block-text-info-maplink a:link, .modelcourse-block-text-info-maplink a:visited {
  color: #333;
}
.modelcourse-block-text-info-maplink a:hover, .modelcourse-block-text-info-maplink a:active {
  text-decoration: none;
  color: #333;
}
.modelcourse-block-text-info-maplink a::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background: url(../img/modelcourse/map_pin.svg) no-repeat center center/contain;
}
.modelcourse-block-text-info-maplink span {
  margin-left: 0.5em;
  font-size: 1.4em;
  display: inline-block;
}
.modelcourse-block-text-info-sitelink {
  display: block;
  padding: 0.6em 1.5em 0.4em;
  border-radius: 10rem;
  background: #fff;
}
.modelcourse-block-text-info-sitelink a {
  display: inline-flex;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #2b59af;
  align-items: center;
  line-height: 1;
  align-content: center;
  text-decoration: none;
}
.modelcourse-block-text-info-sitelink a, .modelcourse-block-text-info-sitelink a:link, .modelcourse-block-text-info-sitelink a:visited {
  color: #333;
}
.modelcourse-block-text-info-sitelink a:hover, .modelcourse-block-text-info-sitelink a:active {
  text-decoration: none;
  color: #333;
}
.modelcourse-block-text-info-sitelink a::before {
  content: "";
  display: block;
  width: 1.7em;
  height: 1.7em;
  background: url(../img/modelcourse/launch.svg) no-repeat center center/contain;
}
.modelcourse-block-text-info-sitelink span {
  margin-left: 0.5em;
  font-size: 1.4em;
  display: inline-block;
}
.modelcourse-block-img {
  width: 55%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img {
    width: 100%;
    order: -1;
    margin-bottom: 0;
  }
}
.modelcourse-block-img-hor img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 417/285;
}
.modelcourse-block-img-ver img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 226/280;
}
.modelcourse-block-img-ver2 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 266/280;
}
.modelcourse-block-img-sq img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1;
}
.modelcourse-block-img-01 {
  width: 100%;
  margin-bottom: 5%;
}
.modelcourse-block-img-02 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.modelcourse-block-img-02 .modelcourse-block-img-hor {
  width: 61%;
}
.modelcourse-block-img-02 .modelcourse-block-img-ver {
  width: 39%;
}
.modelcourse-block-img-02 figure:nth-of-type(2) {
  margin-top: 4em;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-02 figure:nth-of-type(2) {
    margin-top: 2em;
  }
}
.modelcourse-block-img-02 figure {
  margin-right: 5%;
  margin-top: -10%;
}
.modelcourse-block-img-03 {
  width: 100%;
  display: flex;
  justify-content: center;
}
.modelcourse-block-img-03 .modelcourse-block-img-ver {
  width: 35%;
}
.modelcourse-block-img-03 figure:nth-of-type(2) {
  margin-top: 4em;
  margin-left: -3%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-03 figure:nth-of-type(2) {
    margin-top: 3em;
  }
}
.modelcourse-block-img-03 figure {
  margin-right: 5%;
  margin-top: -10%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-03 figure {
    margin-right: 0;
    margin-top: 0;
  }
}
.modelcourse-block-img-04 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-left: -30%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-04 {
    margin-left: 0;
    justify-content: space-between;
    margin-top: 1%;
  }
}
.modelcourse-block-img-04 .modelcourse-block-img-ver {
  width: 35%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-04 .modelcourse-block-img-ver {
    width: 49%;
  }
}
.modelcourse-block-img-04 figure:nth-of-type(2) {
  margin-top: 4em;
  margin-left: -3%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-04 figure:nth-of-type(2) {
    margin-top: 0;
  }
}
.modelcourse-block-img-04 figure {
  margin-right: 5%;
  margin-top: -10%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-04 figure {
    margin-right: 0;
    margin-top: 0;
    width: 50%;
  }
}
.modelcourse-block-img-05 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-right: -30%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-05 {
    margin-right: 0;
    justify-content: space-between;
    margin-top: 1%;
  }
}
.modelcourse-block-img-05 .modelcourse-block-img-ver {
  width: 35%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-05 .modelcourse-block-img-ver {
    width: 49%;
  }
}
.modelcourse-block-img-05 figure {
  margin-right: -5%;
  margin-top: -5%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-05 figure {
    margin-right: 0;
    margin-top: 0;
    width: 50%;
  }
}
.modelcourse-block-img-05 figure:nth-of-type(2) {
  margin-top: 4em;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-05 figure:nth-of-type(2) {
    margin-top: 0;
  }
}
.modelcourse-block-img-06 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-06 {
    margin-left: 0;
    justify-content: space-between;
    margin-top: 1%;
  }
}
.modelcourse-block-img-06 figure {
  width: 48%;
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-06 figure {
    margin-right: 0;
    margin-top: 0;
    width: 48%;
  }
}
@media screen and (max-width: 767px) {
  .modelcourse-block-img-06 figure:nth-of-type(2) {
    margin-top: 0;
  }
}
.modelcourse-block-img .right {
  margin-left: auto;
}
.modelcourse-block-img .nmt-2 {
  margin-top: -2em;
}

.bg-light {
  background-color: #e7eff9;
  background-image: linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);
}

:root {
  --color-dark: 8,4,39;
}

.bg-dark {
  z-index: 0;
  position: relative;
  width: 100%;
}
.bg-dark::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #09041c;
}

.gradBlob {
  position: relative;
  z-index: 0;
}
.gradBlob::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 30%;
  height: 30%;
  border-radius: 17rem;
  background: linear-gradient(180deg, #341D65 0%, rgba(52, 29, 101, 0) 100%), radial-gradient(94.51% 124.88% at 94.32% 94.43%, rgba(65, 244, 255, 0.78) 0%, rgba(128, 217, 255, 0.78) 46.52%, rgba(65, 198, 255, 0) 100%), linear-gradient(41deg, #FFFCE6 4.33%, rgba(255, 252, 230, 0) 73.7%);
  background-blend-mode: normal, normal, normal, normal, normal, normal;
  filter: blur(100px);
}

.bg-dark2 {
  background: #06142a;
}

.bg-dark .modelcourse-block-text-description, .bg-dark .modelcourse-block-text-title, .bg-dark .modelcourse-full p, .bg-dark .modelcourse-block-text-name, .bg-dark .modelcourse-block-text-name span, .bg-dark .modelcourse-block-text-no, .bg-dark2 .modelcourse-block-text-description, .bg-dark2 .modelcourse-block-text-title, .bg-dark2 .modelcourse-full p, .bg-dark2 .modelcourse-block-text-name, .bg-dark2 .modelcourse-block-text-name span, .bg-dark2 .modelcourse-block-text-no {
  color: #fff !important;
}
.bg-dark .modelcourse-block-text-description a, .bg-dark2 .modelcourse-block-text-description a {
  color: #fff !important;
}

.modelcourseSubTitleEn {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media screen and (max-width: 1199px) {
  .modelcourseSubTitleEn {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) {
  .modelcourseSubTitleEn {
    font-size: 2.7vw;
  }
}

h2.modelcourseSubTitle {
  font-size: 2rem;
  display: inline-block;
  text-align: center;
  font-weight: normal;
  /*& {
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 1px rgba(#000,.3);
    border-bottom: solid 1px rgba(#000,.3);
  }
  &:before, &:after {
   // content: '';
    position: absolute;
    top: -7px;
    width: 1px;
    height: -webkit-calc(100% + 14px);
    height: calc(100% + 14px);
    background-color: #333;
  }
  &:before {
    left: 7px;
  }
  &:after {
    right: 7px;
  }*/
}
h2.modelcourseSubTitle {
  border-bottom: 1px solid #2b59af;
  padding: 0.3em 0.3em 0.8em 0.3em;
  margin-bottom: 10px;
  position: relative;
}
h2.modelcourseSubTitle::before {
  content: "";
  background-color: #eaeef7;
  width: 20px;
  height: 3px;
  position: absolute;
  left: 30px;
  bottom: -3px;
}
h2.modelcourseSubTitle::after {
  content: "";
  background-color: #2b59af;
  width: 20px;
  height: 1px;
  transform: rotate(50deg);
  position: absolute;
  left: 26px;
  bottom: -10px;
}

.dayTitle {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 1199px) {
  .dayTitle {
    font-size: 6.12vw;
  }
}
@media screen and (max-width: 767px) {
  .dayTitle {
    font-size: 15.3vw;
  }
}
.dayTitle span {
  font-size: 0.8em;
  color: rgba(43, 89, 175, 0.6);
}
.dayTitle b {
  color: rgba(43, 89, 175, 0.8);
}

.accessTime {
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  /*&::before,&::after{
  	content: '';
  	display: block;
  	width: calc(50% - 9rem);
  	height: 1px;
  	background: rgba($color-key2,.2);
  }*/
}
.accessTime p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  padding: 0.7em 0 1em;
  line-height: 1.1;
  position: relative;
}
@media screen and (max-width: 1199px) {
  .accessTime p {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .accessTime p {
    font-size: 4.5vw;
  }
}
.accessTime p br {
  display: none;
}
.accessTime p b {
  font-weight: normal;
}
.accessTime p::before {
  display: block;
  width: 9rem;
  aspect-ratio: 1;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 30rem;
}
.accessTime .accessTime-sideline {
  width: calc(50% - 9rem);
  position: relative;
  /*
  &:first-of-type{
  &::after{
  		content: '';
  		display: block;
  		height: 1em;
  		width: 1em;
  		border-left: 1px solid rgba($color-key2,.2);
  		border-bottom: 1px solid rgba($color-key2,.2);
  		transform: rotate(45deg) translateY(-50%);
  		position: absolute;
  		right: 0;
  		top: 50%;	
  	}
  }
  &:last-of-type{
  &::after{
  		content: '';
  		display: block;
  		height: 1em;
  		width: 1em;
  		border-left: 1px solid rgba($color-key2,.2);
  		border-bottom: 1px solid rgba($color-key2,.2);
  		transform: rotate(-135deg) translateY(-50%);
  		position: absolute;
  		left: 0;
  		top: 50%;	
  	}
  }*/
}
.accessTime .accessTime-sideline::before {
  content: "";
  display: block;
  height: 1px;
  width: calc(100% - 1em);
  background: rgba(43, 89, 175, 0.2);
}
.accessTime .accessTime-line {
  display: none;
  height: 5rem;
  position: relative;
}
.accessTime .accessTime-line::after {
  background: radial-gradient(ellipse at center, black 0%, black 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%) center 0 repeat-y;
  background-size: 8px 8px;
  width: 8px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -3px;
  content: "";
}
.pttn {
  --color-pttn: #aaa;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.pttn > div {
  width: 100%;
  height: 8px;
  display: block;
  background-size: auto auto;
  background-color: white;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, #e8e8e8 5px, #e8e8e8 7px);
}

.feat {
  width: 100%;
}
.feat > h4 {
  font-weight: normal;
  color: var(--bystay-color);
  margin: 0 auto 5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .feat > h4 {
    font-size: 2.4rem;
  }
}
.feat .section-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .feat .section-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.feat-block {
  /*
  &:nth-of-type(2){
  	padding-top: 6rem;
  	@include c.mq(){
  		padding-top: 0;
  	}
  }
  &:nth-of-type(3){
  	padding-top: 12rem;
  	@include c.mq(){
  		padding-top: 0;
  	}
  }
  &:nth-of-type(4){
  	margin-top: -12rem;
  	@include c.mq(){
  		margin-top: 0;
  	}
  }
  &:nth-of-type(5){
  	margin-top: -6rem;
  	@include c.mq(){
  		margin-top: 0;
  	}
  }*/
  /*&:nth-of-type(n+5){
  	width: 100%;
  }*/
}
@media screen and (max-width: 767px) {
  .feat-block {
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .feat-block .inner {
    background-color: #25807d;
  }
}
.feat-block .text {
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
}
.feat-block a {
  text-decoration: none;
  transition: opacity 0.5s;
}
.feat-block a:hover .text {
  background-color: rgba(0, 0, 0, 0);
}
.feat-block .inner {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .feat-block .inner {
    margin-bottom: 0;
    height: 100%;
    position: relative;
  }
}
.feat-block figure {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .feat-block figure {
    width: 100%;
  }
}
.feat-block figure img {
  aspect-ratio: 0.9;
  object-fit: cover;
  width: 100%;
}
.feat-block .feat-pet figure img {
  object-position: left bottom;
}
.feat-block .feat-couple figure img {
  object-position: left bottom;
}
.feat-block .text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 2.2rem;
  z-index: 1;
  color: #fff;
  min-height: 13rem;
  position: absolute;
  top: 0;
  left: 0;
}
.feat-block .text h5 {
  font-size: 2.4rem;
  font-weight: normal;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .feat-block .text h5 {
    font-size: 1.6rem;
  }
}
.feat-block .text p {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .feat-block .text p {
    font-size: 1.2rem;
  }
}
.feat-block .text .more {
  width: 100%;
  text-align: right;
  position: absolute;
  font-size: 1.2rem;
  right: 1em;
  bottom: 1em;
}
.feat-block .text .more span {
  padding-left: 3.5em;
  display: inline-block;
  position: relative;
}
.feat-block .text .more span::before {
  position: absolute;
  content: "";
  display: block;
  width: 3em;
  height: 1px;
  opacity: 0.5;
  top: 50%;
  left: 0;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .feat-block .text .more {
    position: absolute;
    right: 1em;
    bottom: 1em;
  }
}
.feat-block .text a {
  display: inline-block;
  margin-top: 2rem;
  text-decoration: none;
  font-size: 1.2rem;
  margin-left: auto;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .feat-block .text a {
    font-size: 1rem;
  }
}

.feat-single-mv {
  position: relative;
  z-index: 0;
}
.feat-single-mv::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000;
  opacity: 0.3;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.feat-single-mv > div {
  width: 100%;
}
.feat-single-mv figure {
  width: 100%;
}
.feat-single-mv figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3.5;
}
@media screen and (max-width: 767px) {
  .feat-single-mv figure img {
    aspect-ratio: 1.5;
  }
}
.feat-single-mv-text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: #fff;
  filter: drop-shadow(0 0 1mm rgba(0, 0, 0, 0.8));
}
.feat-single-mv-text h2, .feat-single-mv-text p {
  width: 100%;
  text-align: left;
}
.feat-single-mv-text p {
  line-height: 1.5;
  text-align: center;
  text-align: center;
}
.feat-single-mv-text p small {
  font-size: 10px;
}
.feat-single-mv-text h2 {
  font-size: 2em;
  font-weight: normal;
  margin-bottom: 0.8rem;
  text-align: center;
  line-height: 1.5;
  font-size: 2.5em;
  margin-bottom: 2rem;
  width: auto;
  font-size: 1.8em;
}
@media screen and (max-width: 767px) {
  .feat-single-mv-text h2 {
    font-size: 1.3em;
  }
}
.feat-single-mv-text h2 span {
  color: var(--bystay-color02);
}
.feat-single-mv-text h2 small {
  color: var(--bystay-color);
  font-size: 0.6em;
}
.feat-single-mv-text h2 b {
  font-size: 1.6em;
}
.feat-single-mv-text p.caption {
  font-size: 1.2rem !important;
}

.feat-single-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  padding: 5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.feat-single-container h3 {
  text-align: center;
  font-size: 2.6rem;
  margin-bottom: 1.5em;
  line-height: 1.5;
}
.feat-single-container .feat-single-blocks {
  display: flex;
  justify-content: space-between;
}
.feat-single-container .feat-single-blocks .feat-single-block {
  width: 48%;
  background-color: #fff;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.07);
}
.feat-single-container .feat-single-blocks figure img {
  aspect-ratio: 1.6;
  object-fit: cover;
}
.feat-single-container .feat-single-blocks .feat-single-block-info {
  text-align: center;
  padding: 2rem 0 2.5rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .feat-single-container .feat-single-blocks .feat-single-block-info {
    font-size: 1.4rem;
  }
}
.feat-single-container .feat-single-blocks .feat-single-block-info-are {
  font-size: 1em;
  margin-bottom: 0.5rem;
}
.feat-single-container .feat-single-blocks .feat-single-block-info-name {
  font-size: 1.8em;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
  .feat-single-container .feat-single-blocks .feat-single-block-info-name {
    font-size: 1.6em;
  }
}
.feat-single-container .feat-single-blocks .feat-single-block-info-capa {
  display: inline-block;
  padding: 0.3em 1.5em;
  font-size: 0.8em;
  background: #eee;
}
.feat-single-container .feat-single-blocks .feat-single-block-info-more {
  width: 100%;
  display: inline-block;
  margin-top: 2em;
  font-size: 0.7em;
}
.feat-single-container .feat-single-blocks .feat-single-block-info-more a {
  text-decoration: none;
  color: #333;
}
.feat-single-container .feat-single-blocks .feat-single-block-info-more a span {
  font-size: 2em;
}
.feat-single-container .reserve-info {
  padding: 2rem 0 0;
  text-align: center;
  font-size: 1.6rem;
}
.feat-single-container .reserve-info a {
  text-decoration: none;
  color: #333;
}
.feat-single-container .reserve-info a span {
  font-size: 2em;
}
.feat-single-container .max-capa {
  text-align: center;
  margin-top: 4rem;
}
.feat-single-container .max-capa p {
  display: inline-block;
  padding: 0.3em 1.5em;
  font-size: 2rem;
  background: #eee;
}

.bggray {
  background: #dce3e3;
}

.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10rem;
}

[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.slideF {
  overflow: hidden;
}

.slideF .swiper {
  overflow: visible;
}

.slideF .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
}

.slideF .slide {
  padding-right: 3.5em;
}
@media screen and (max-width: 767px) {
  .slideF .slide {
    padding-right: 0.5em;
  }
}
.slideF .slide .featSlideImg, .slideF .slide .featSlideImgs {
  aspect-ratio: 1.2;
}
@media screen and (max-width: 767px) {
  .slideF .slide .featSlideImg, .slideF .slide .featSlideImgs {
    aspect-ratio: 0.9;
  }
}
.slideF .slide .featSlideImg img, .slideF .slide .featSlideImgs img {
  display: inline-block;
  object-fit: cover;
}
.slideF .slide .featSlideImg img {
  width: 100%;
  height: 100%;
}
.slideF .slide .featSlideImgs img {
  width: 100%;
  height: 100%;
}
.slideF .slide .featSlideImgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.slideF .slide .villaname {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
  writing-mode: vertical-rl;
  padding: 0.5em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  letter-spacing: 0.1em;
  color: #333;
}
@media screen and (max-width: 1099px) {
  .slideF .slide .villaname {
    font-size: 0.9vw;
  }
}
@media screen and (max-width: 767px) {
  .slideF .slide .villaname {
    font-size: 2.25vw;
  }
}
@media screen and (max-width: 767px) {
  .slideF .slide .villaname {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1099px) {
  .slideF .slide .villaname {
    font-size: 0.9vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .slideF .slide .villaname {
    font-size: 2.25vw;
  }
}
.slideF .slide .villaname span {
  font-size: 1.5em;
  margin-left: 0.5em;
}

.slideF img {
  /*aspect-ratio:1.2;
  object-fit: cover;
  width: 100%;
  @include c.mq(){
    aspect-ratio:1;
  }*/
}

.slideF .slide-content {
  padding: 3.2rem;
}

.slideF .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
}

.slideS .slide-media {
  padding-top: 60%;
}
@media screen and (max-width: 767px) {
  .slideS .slide-media {
    padding-top: 90%;
  }
}
.slideS img {
  aspect-ratio: 2.4;
  object-fit: cover;
  width: 100%;
}

.slideF .swiper-slide {
  width: 34vw !important;
}
@media screen and (max-width: 767px) {
  .slideF .swiper-slide {
    width: 60vw !important;
  }
}
.slideF .swiper-wrapper {
  transition-timing-function: linear;
}

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
.swiper-container {
  overflow: hidden;
  position: relative;
}
.d-demo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 60px;
}
.d-demo__heading {
  width: 20%;
  position: relative;
}
.d-demo__ttl {
  width: 20%;
  max-width: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.d-demo__slider {
  width: 100%;
}
.d-demo__slide {
  width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.swiper-container-main {
  height: calc(100vh - 10rem);
  min-height: 500px;
  transition: opacity 0.6s ease, transform 0.3s ease;
}
.d-demo__slide-heading {
  position: absolute;
  top: 32%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}
.d-demo__slide-ttl {
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  margin-bottom: 30px;
}
.d-demo__slide-txt {
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  transform: translateX(50px);
}
.swiper-container-nav {
  width: 50%;
  height: 13%;
  position: absolute;
  right: 0;
  bottom: 3.5%;
  z-index: 10;
}
.d-demo__nav {
  cursor: pointer;
}
.d-demo__nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__nav:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.55);
  transition: background-color 0.3s ease;
  content: '';
  z-index: 1;
  transform:translateZ(1px); //safari対策
}
.swiper-slide-active.d-demo__nav:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav:hover:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav-heading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 15px;
}
 .swiper-button-prev,
  .swiper-button-next {
	--swiper-navigation-size: 12px;
	background-color: transparent;
	border-radius: 50%;
	width: 25px !important;
	height: 25px !important;
	&::after{
		color: #fff;
	}
}*/
.blob1, .blob2, .blob3, .blob4, .blob5 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1em;
}

.feature {
  background: #ebe6e3;
}
.feature .section-inner {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.feature-block:not(:last-of-type) {
  margin-bottom: 15%;
}
.feature-block-title-wrap {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .feature-block-title-wrap {
    align-items: flex-start;
  }
}
.feature-block-title {
  display: inline-block;
  margin-left: 0.5em;
  margin-top: 3.4em;
}
@media screen and (max-width: 767px) {
  .feature-block-title {
    margin-top: 1.8em;
  }
}
.feature-block-subtitle {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
@media screen and (max-width: 1199px) {
  .feature-block-subtitle {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block-subtitle {
    font-size: 3.15vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block-subtitle {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .feature-block-subtitle {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .feature-block-subtitle {
    font-size: 2.7vw;
  }
}
.feature-block-subtitle::before {
  content: "";
  display: block;
  width: 1px;
  height: 8em;
  background: #000;
}
@media screen and (max-width: 767px) {
  .feature-block-subtitle::before {
    height: 5em;
  }
}
.feature-block .inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .feature-block .inner {
    grid-template-columns: 1fr;
  }
}
.feature-block:nth-of-type(even) .inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}
@media screen and (max-width: 767px) {
  .feature-block:nth-of-type(even) .inner {
    grid-template-columns: 1fr;
  }
}
.feature-block:nth-of-type(even) .inner .text {
  order: 2;
}
.feature-block figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.1;
}
@media screen and (max-width: 767px) {
  .feature-block figure img {
    aspect-ratio: 1.7;
  }
}
@media screen and (max-width: 767px) {
  .feature-block figure {
    order: 1;
  }
}
.feature-block .text {
  padding: 10%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 767px) {
  .feature-block .text {
    padding: 2%;
    margin-top: -6%;
  }
}
.feature-block .text h5 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1.5em;
  line-height: 1.5;
}
@media screen and (max-width: 1199px) {
  .feature-block .text h5 {
    font-size: 3.06vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block .text h5 {
    font-size: 7.65vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block .text h5 {
    margin-bottom: 0.5em;
  }
}
.feature-block .text h5 .en {
  font-size: 1.5em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.feature-block .text h5 .ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .feature-block .text {
    order: 2;
  }
}
.feature-block p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  .feature-block p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block p {
    font-size: 3.15vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block p {
    text-align: justify;
  }
}
.feature-block .more {
  text-align: right;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.feature-block .more a {
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding-left: 3em;
  color: #333;
}
@media screen and (max-width: 1199px) {
  .feature-block .more a {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .feature-block .more a {
    font-size: 3.6vw;
  }
}
.feature-block .more a::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.6em;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}
.feature-block .blob {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-10%);
  z-index: -1;
}

html {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}

body {
  -webkit-print-color-adjust: exact;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
body.single {
  position: relative;
  /*&::before{
  	content: '';
  	display: block;
  	width: 100%;
  	height: 100%;
  	background: url(../img/bg/texture.png) no-repeat top center/100%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	z-index: -1;
  	@include c.mq(){
  		background: url(../img/bg/texture.png) no-repeat top left/200%;
  	}
  }*/
}

.offMv .logo_color {
  display: inline-block;
}
.offMv .logo_white {
  display: none;
}
.offMv .header-nav-g a {
  text-decoration: none;
}
.offMv .header-nav-g a, .offMv .header-nav-g a:link, .offMv .header-nav-g a:visited {
  color: #333;
}
.offMv .header-nav-g a:hover, .offMv .header-nav-g a:active {
  text-decoration: none;
  color: #333;
}
@media screen and (max-width: 767px) {
  .offMv .header-nav-g a {
    text-decoration: none;
  }
  .offMv .header-nav-g a, .offMv .header-nav-g a:link, .offMv .header-nav-g a:visited {
    color: #fff;
  }
  .offMv .header-nav-g a:hover, .offMv .header-nav-g a:active {
    text-decoration: none;
    color: #fff;
  }
}

.onMv .header-nav-g a {
  text-decoration: none;
}
.onMv .header-nav-g a, .onMv .header-nav-g a:link, .onMv .header-nav-g a:visited {
  color: #333;
}
.onMv .header-nav-g a:hover, .onMv .header-nav-g a:active {
  text-decoration: none;
  color: #333;
}
@media screen and (max-width: 767px) {
  .onMv .header-nav-g a {
    text-decoration: none;
  }
  .onMv .header-nav-g a, .onMv .header-nav-g a:link, .onMv .header-nav-g a:visited {
    color: #fff;
  }
  .onMv .header-nav-g a:hover, .onMv .header-nav-g a:active {
    text-decoration: none;
    color: #fff;
  }
}

.home .header-logo a {
  background: url(../img/cmn/logo_cb-nanjo_white.svg) no-repeat center center/contain;
  transition: opacity 0.5s;
}
.home .header-logo img {
  transition: opacity 0.5s;
  opacity: 0;
}
.home .header-nav-g a {
  text-decoration: none;
}
.home .header-nav-g a, .home .header-nav-g a:link, .home .header-nav-g a:visited {
  color: #fff;
}
.home .header-nav-g a:hover, .home .header-nav-g a:active {
  text-decoration: none;
  color: #fff;
}
.home.scrolled .header-logo a, .home.sp-nav--open .header-logo a {
  background: none;
}
.home.scrolled .header-logo img, .home.sp-nav--open .header-logo img {
  opacity: 1;
}
.home.scrolled .header-nav-g a, .home.sp-nav--open .header-nav-g a {
  text-decoration: none;
}
.home.scrolled .header-nav-g a, .home.scrolled .header-nav-g a:link, .home.scrolled .header-nav-g a:visited, .home.sp-nav--open .header-nav-g a, .home.sp-nav--open .header-nav-g a:link, .home.sp-nav--open .header-nav-g a:visited {
  color: #333;
}
.home.scrolled .header-nav-g a:hover, .home.scrolled .header-nav-g a:active, .home.sp-nav--open .header-nav-g a:hover, .home.sp-nav--open .header-nav-g a:active {
  text-decoration: none;
  color: #333;
}

.fixed-nav {
  display: none;
}
@media screen and (max-width: 767px) {
  .fixed-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    height: 60px;
  }
}
.fixed-nav ul.fixed-nav-list-hotel {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-hotel li {
  font-size: 1.6rem;
  height: 100%;
  /*
   AIコンシェルジュあり
   &:nth-of-type(1){
    width: calc( (100% - 50px ) *.4 );
  background-color: c.$color-cv;
   border-right: 1px solid #888;
   }
   &:nth-of-type(2){
   width: calc( (100% - 50px ) *.4 );
  background-color: c.$color-cv;
   border-right: 1px solid #888;
   }
   &:nth-of-type(3){
     width: calc( (100% - 50px ) *.2 );
    background-color: c.$color-cv;
     border-right: 1px solid #888;
     img{
  	  width: 1.4em;
  	  border-radius: 10rem;
  	  margin-right: .3em;
  	}
  }
  &:nth-of-type(4){
  	  width: 50px;
  	  //background-color: #333;
  	  background-color: darken(c.$color-cv,5%);

  	  position: relative;
     }
  */
}
.fixed-nav ul.fixed-nav-list-hotel li a {
  text-decoration: none;
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-nav ul.fixed-nav-list-hotel li a, .fixed-nav ul.fixed-nav-list-hotel li a:link, .fixed-nav ul.fixed-nav-list-hotel li a:visited {
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-hotel li a:hover, .fixed-nav ul.fixed-nav-list-hotel li a:active {
  text-decoration: none;
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(1) {
  width: calc((100% - 50px) * 0.3);
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(2) {
  width: calc((100% - 50px) * 0.7);
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li:nth-of-type(3) {
  width: 50px;
  background-color: #00336e;
  position: relative;
}
.fixed-nav ul.fixed-nav-list-hotel li.instagram {
  order: -1;
  width: 50px;
  background-color: #003f87;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-hotel li.instagram a {
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fixed-nav ul.fixed-nav-list-hotel.light li a {
  color: #000;
}
.fixed-nav ul.fixed-nav-list-portal {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-portal li {
  font-size: 1.6rem;
  height: 100%;
}
.fixed-nav ul.fixed-nav-list-portal li a {
  text-decoration: none;
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-nav ul.fixed-nav-list-portal li a, .fixed-nav ul.fixed-nav-list-portal li a:link, .fixed-nav ul.fixed-nav-list-portal li a:visited {
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-portal li a:hover, .fixed-nav ul.fixed-nav-list-portal li a:active {
  text-decoration: none;
  color: #fff;
}
.fixed-nav ul.fixed-nav-list-portal li:nth-of-type(1) {
  width: 50%;
  background-color: #333;
  border-right: 1px solid #888;
}
.fixed-nav ul.fixed-nav-list-portal li:nth-of-type(2) {
  width: 50%;
  background-color: #333;
}
.fixed-nav .aiBtn a {
  width: 100%;
  background: #2a2f31 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff;
  font-size: 1.4rem;
  transition: opacity 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  padding: 0.5em 0;
  transition: all 0.5s;
}
.fixed-nav .aiBtn img {
  width: 1.4em;
  border-radius: 10rem;
  margin-right: 0.3em;
}
.fixed-nav-g {
  position: fixed;
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 5rem;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g {
    display: flex;
    transform: translateY(0);
    margin-left: auto;
    gap: 0;
  }
}
.fixed-nav-g .sub {
  text-align: right;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.scrolled .fixed-nav-g .sub {
  border-top: 1px solid #aaa;
}
.fixed-nav-g .sub a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  display: inline-block;
  margin-left: 2em;
}
@media screen and (max-width: 1199px) {
  .fixed-nav-g .sub a {
    font-size: 1.17vw;
  }
}
@media screen and (max-width: 767px) {
  .fixed-nav-g .sub a {
    font-size: 2.925vw;
  }
}
.fixed-nav-g .sub a:hover {
  opacity: 0.5;
}
.fixed-nav-g .sub a span {
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g .sub a {
    width: 100%;
    text-align: center;
  }
}
.fixed-nav-g .sub a small {
  font-size: 0.8em;
  margin-right: 0.1em;
}
.fixed-nav-g .sub a:first-child {
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g nav {
    height: 100%;
    display: flex;
    align-content: center;
  }
}
.fixed-nav-g ul {
  display: flex;
  align-content: center;
  align-items: center;
}
.fixed-nav-g ul li {
  margin-right: 1.8em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g ul li {
    width: 100%;
    margin-right: 0;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .fixed-nav-g ul li:not(.nav-reserve) {
    display: none;
  }
}
.fixed-nav-g ul li:last-of-type {
  margin-right: 0;
}
.fixed-nav-g ul li.nav-to-portal {
  padding-left: 1em;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 767px) {
  .fixed-nav-g ul li.nav-to-portal {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
}
@media screen and (max-width: 1199px) {
  .fixed-nav-g ul li {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .fixed-nav-g ul li {
    font-size: 3.15vw;
  }
}
.fixed-nav-g ul li a {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  gap: 2rem;
}
.fixed-nav-g ul li a:hover {
  opacity: 0.5;
}
.fixed-nav-g ul li a span {
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g ul li a {
    width: 100%;
    text-align: center;
    padding: 0 2em;
    background: #333;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.fixed-nav-g ul li.links {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
.fixed-nav-g ul li.links a {
  display: inline-block;
  font-size: 0;
  margin-left: 1rem;
}
.fixed-nav-g ul li.links a:first-of-type {
  margin-left: 0;
}
.fixed-nav-g a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.fixed-nav-g .ai-btn {
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
}
@media screen and (max-width: 767px) {
  .fixed-nav-g .ai-btn {
    display: block;
  }
}
.fixed-nav-g .ai-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 5rem;
  background: #333;
}
.fixed-nav-g .ai-btn img {
  width: 5rem;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  transition: all 1s;
}
.scrolled header {
  top: 0;
  background-color: white;
}
header .header-inner {
  width: 100%;
  text-align: center;
  display: flex;
  align-content: center;
  align-items: stretch;
  position: relative;
  z-index: 0;
  padding: 0 5%;
  height: 80px;
}
@media screen and (max-width: 767px) {
  header .header-inner {
    height: 60px;
    padding: 0;
    justify-content: center;
  }
}
header .header-logo {
  transition: all 0.5s;
  max-width: 180px;
  padding: 1rem 0;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  header .header-logo {
    max-width: 200px;
    opacity: 1;
    padding: 0.5rem 1rem;
    opacity: 1 !important;
  }
}
header .header-logo h1 {
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  header .header-logo h1 {
    font-size: 1.4rem;
  }
}
header .header-logo h1 a {
  text-decoration: none;
  text-decoration: none;
  display: inline-block;
}
header .header-logo h1 a, header .header-logo h1 a:link, header .header-logo h1 a:visited {
  color: #000;
}
header .header-logo h1 a:hover, header .header-logo h1 a:active {
  text-decoration: none;
  color: #000;
}
header .header-logo h1 .en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #196fa9;
  font-size: 1em;
}
header .header-logo h1 .jp {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  color: #333;
  font-size: 0.6em;
  margin-left: 0.3em;
}
header .header-logo h1 img {
  width: 100%;
}
header .header-logo h1 span {
  display: block;
  font-size: 0.5em;
  margin-top: 0.5em;
  color: #003f87;
}
@media screen and (max-width: 767px) {
  header .header-logo h1 span {
    margin-top: 0.2em;
  }
}
.scrolled header .header-logo {
  opacity: 1;
}
header .header-nav-g {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5rem;
}
@media screen and (max-width: 767px) {
  header .header-nav-g {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-g {
    transform: translateY(0);
    margin-left: auto;
    gap: 0;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-g {
    /*position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 999;*/
  }
}
header .header-nav-g .sub {
  text-align: right;
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.scrolled header .header-nav-g .sub {
  border-top: 1px solid #aaa;
}
header .header-nav-g .sub a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  display: inline-block;
  margin-left: 2em;
}
@media screen and (max-width: 1199px) {
  header .header-nav-g .sub a {
    font-size: 1.17vw;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-g .sub a {
    font-size: 2.925vw;
  }
}
header .header-nav-g .sub a:hover {
  opacity: 0.5;
}
header .header-nav-g .sub a span {
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  header .header-nav-g .sub a {
    width: 100%;
    text-align: center;
  }
}
header .header-nav-g .sub a small {
  font-size: 0.8em;
  margin-right: 0.1em;
}
header .header-nav-g .sub a:first-child {
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  header .header-nav-g nav {
    height: 100%;
    display: flex;
    align-content: center;
  }
}
header .header-nav-g ul {
  display: flex;
  align-content: center;
  align-items: center;
}
header .header-nav-g ul li {
  margin-right: 1.8em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  /*&.nav-reserve,&.nav-tel{
   a{
    font-size: .9em;
    padding: .5em 1em;
    background: c.$color-cv;
    color: #fff !important;
   }
  }*/
}
@media screen and (max-width: 767px) {
  header .header-nav-g ul li {
    width: 100%;
    margin-right: 0;
    height: 100%;
  }
}
header .header-nav-g ul li.nav-reserve a {
  padding: 0.5em 3em;
  background: #003f87;
  border-radius: 10rem;
  color: #fff !important;
}
@media screen and (max-width: 767px) {
  header .header-nav-g ul li:not(.nav-reserve) {
    display: none;
  }
}
header .header-nav-g ul li:last-of-type {
  margin-right: 0;
}
header .header-nav-g ul li.nav-to-portal {
  padding-left: 1em;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 767px) {
  header .header-nav-g ul li.nav-to-portal {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
}
@media screen and (max-width: 1199px) {
  header .header-nav-g ul li {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-g ul li {
    font-size: 3.15vw;
  }
}
header .header-nav-g ul li a {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  gap: 2rem;
}
header .header-nav-g ul li a:hover {
  opacity: 0.5;
}
header .header-nav-g ul li a span {
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  header .header-nav-g ul li a {
    width: 100%;
    text-align: center;
    padding: 0 2em;
    background: #333;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
header .header-nav-g ul li.links {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
header .header-nav-g ul li.links a {
  display: inline-block;
  font-size: 0;
  margin-left: 1rem;
}
header .header-nav-g ul li.links a:first-of-type {
  margin-left: 0;
}
header .header-nav-g ul li.instagram {
  display: inline-flex;
  align-items: center;
}
header .header-nav-g ul li.instagram a {
  display: inline-flex;
  align-items: center;
}
header .header-nav-g ul li.instagram img {
  width: 1.3em;
}
header .header-nav-g a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
header .header-nav-g .ai-btn {
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
}
@media screen and (max-width: 767px) {
  header .header-nav-g .ai-btn {
    display: block;
  }
}
header .header-nav-g .ai-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 5rem;
  background: #333;
}
header .header-nav-g .ai-btn img {
  width: 5rem;
}
header .header-nav-cta {
  margin-left: 3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  header .header-nav-cta {
    transform: translateY(0);
    display: none;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-cta {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 999;
  }
}
header .header-nav-cta nav {
  height: 100%;
}
header .header-nav-cta ul {
  display: flex;
  align-content: center;
  align-items: center;
  height: 100%;
}
header .header-nav-cta ul li {
  height: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  header .header-nav-cta ul li {
    width: 100%;
    margin-right: 0;
  }
}
header .header-nav-cta ul li:last-of-type {
  margin-right: 0;
}
@media screen and (max-width: 1199px) {
  header .header-nav-cta ul li {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav-cta ul li {
    font-size: 3.15vw;
  }
}
header .header-nav-cta ul li a {
  height: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  display: inline-block;
  line-height: 1;
}
header .header-nav-cta ul li a:hover {
  opacity: 0.5;
}
header .header-nav-cta ul li a span {
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  header .header-nav-cta ul li a {
    width: 100%;
    text-align: center;
  }
}
header .header-nav-cta ul li.links {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
header .header-nav-cta ul li.links a {
  display: inline-block;
  font-size: 0;
  margin-left: 1rem;
}
header .header-nav-cta ul li.links a:first-of-type {
  margin-left: 0;
}
header .header-nav-cta ul li.nav-reserve {
  position: relative;
}
header .header-nav-cta ul li.nav-reserve::after {
  display: block;
  width: 1px;
  height: 1em;
  right: 0;
  top: calc(50% - 0.5em);
  background: #fff;
  opacity: 0.2;
  position: absolute;
}
header .header-nav-cta ul li.nav-reserve a, header .header-nav-cta ul li.nav-tel a {
  font-size: 1.2em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.3em 1.5em;
  color: #fff !important;
  display: inline-flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
  background: #202933;
}
header .header-nav-cta a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
body:not(.home) header .nav-crystalvilla {
  padding-left: 1.3em;
  position: relative;
}
body:not(.home) header .nav-crystalvilla::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/cmn/icon_newtab.svg) no-repeat center center/contain;
}
body.home header .nav-crystalvilla {
  padding-left: 1.3em;
  position: relative;
}
body.home header .nav-crystalvilla::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/cmn/icon_newtab_white.svg) no-repeat center center/contain;
}
body.home.scrolled header .nav-crystalvilla::before {
  background: url(../img/cmn/icon_newtab.svg) no-repeat center center/contain !important;
}
@media screen and (max-width: 767px) {
  header .header-nav {
    display: none;
  }
}
header .header-nav nav {
  height: 100%;
}
header .header-nav ul {
  display: flex;
  align-items: center;
  height: 100%;
}
header .header-nav ul li {
  background: #fff;
  height: 100%;
}
@media screen and (max-width: 767px) {
  header .header-nav ul li {
    width: 100%;
    margin-right: 0;
  }
}
header .header-nav ul li:last-of-type {
  margin-right: 0;
}
header .header-nav ul li a {
  background: #061332;
  display: flex;
  align-items: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: 0;
  height: 100%;
  padding: 2em 1.5em;
  transition: opacity 0.5s;
}
@media screen and (max-width: 1199px) {
  header .header-nav ul li a {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  header .header-nav ul li a {
    font-size: 3.15vw;
  }
}
header .header-nav ul li a:hover {
  opacity: 0.7;
}
header .header-nav ul li a span {
  padding-left: 0.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  header .header-nav ul li a {
    width: 100%;
    text-align: center;
  }
}
header .header-nav ul li:nth-of-type(2) a {
  background: #092052;
}
header .header-nav a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  text-decoration: none;
}
header .header-nav a, header .header-nav a:link, header .header-nav a:visited {
  color: #fff;
}
header .header-nav a:hover, header .header-nav a:active {
  text-decoration: none;
  color: #fff;
}
.header .links .instagram {
  width: 1.5rem;
  height: 1.5rem;
  background: url(../../../src/img/common/i-instagram-light.svg) no-repeat center center/cover;
}
.header .links .youtube {
  width: 2rem;
  height: 1.4rem;
  background: url(../../../src/img/common/i-youtube-light.svg) no-repeat center center/cover;
}
.scrolled .header .links .instagram {
  background: url(../../../src/img/common/i-instagram-dark.svg) no-repeat center center/cover;
}
.scrolled .header .links .youtube {
  background: url(../../../src/img/common/i-youtube-dark.svg) no-repeat center center/cover;
}

@media screen and (max-width: 767px) {
  footer {
    padding-bottom: 10rem;
  }
}
footer .footer-logo-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10%;
}
footer .footer-logo-wrap .footer-logo {
  text-align: center;
  font-size: 1.3rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
footer .footer-logo-wrap .footer-logo img {
  max-width: 250px;
  margin-bottom: 0.5em;
}
footer .footer-logo-wrap .footer-logo .address {
  margin-top: 0.5em;
}
footer .footer-logo-wrap .footer-logo .sns a {
  display: inline-block;
  font-size: 0;
}
footer .footer-logo-wrap .footer-logo .sns .instagram {
  width: 2rem;
  height: 2rem;
  background: url(../../../src/img/common/i-instagram-dark.svg) no-repeat center center/cover;
}
footer .footer-logo-wrap .footer-logo .sns .youtube {
  width: 2.6rem;
  height: 1.86rem;
  margin-left: 1rem;
  background: url(../../../src/img/common/i-youtube-dark.svg) no-repeat center center/cover;
}
footer .copyright-container {
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding: 0.5em 0;
  margin-top: 30px;
}

.basic-title {
  font-size: 3.4rem;
  padding: 10rem 0;
}
@media screen and (max-width: 767px) {
  .basic-title {
    font-size: 3.4rem;
    padding: 6rem 0 3rem 0;
    margin-top: 60px !important;
  }
}
.basic-title h3 {
  font-size: 1em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.basic-title p.ja {
  font-size: 0.6em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.basic-title p.en {
  font-size: 0.6em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.basic-title p, .basic-title h3 {
  text-align: left;
}

.slide-animation {
  animation: fadezoom 8s 0s forwards;
}

@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.07);
  }
}
.mv {
  width: 100%;
}
.mv .mv-slide .slide-block {
  width: 100%;
  height: 90vh;
  min-height: 700px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .mv .mv-slide .slide-block {
    height: calc(95vh - env(safe-area-inset-bottom) - 140px);
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .mv .mv-slide .slide-block.slide02 {
    background-position: center right;
  }
}
.mv .mv-slide .slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.mv-inner {
  position: relative;
  width: 100%;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .mv-inner {
    padding-bottom: 0;
  }
}
.mv-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.mv-copy-logo {
  position: absolute;
  left: 50%;
  width: 80%;
  max-width: 400px;
  top: 8%;
  z-index: 1;
  transform: translateX(-50%);
}
.mv-copy-logo img {
  width: 100%;
}
.mv-lead {
  position: absolute;
  writing-mode: vertical-rl;
  right: 10%;
  top: 35%;
  transform: translateY(-50%);
  z-index: 1;
  color: #fff;
  letter-spacing: 0.2em;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9);
}
@media screen and (max-width: 767px) {
  .mv-lead {
    align-items: center;
  }
}
.mv-lead h2 {
  font-size: 3.4rem;
}
@media screen and (max-width: 767px) {
  .mv-lead h2 {
    font-size: 2.72rem;
  }
}
.mv-lead h2 span:nth-of-type(1) {
  transition-delay: 0;
}
.mv-lead h2 span:nth-of-type(2) {
  transition-delay: 0.8s;
}
.mv-lead p {
  font-size: 2rem;
  margin-right: 0.7em;
}
@media screen and (max-width: 767px) {
  .mv-lead p {
    font-size: 1.6rem;
  }
}
.mv-lead p span:nth-of-type(1) {
  transition-delay: 1.7s;
}
.mv-lead p span:nth-of-type(2) {
  transition-delay: 2.2s;
}
.mv-lead p span:nth-of-type(3) {
  transition-delay: 2.7s;
}
.mv-lead p span:nth-of-type(4) {
  transition-delay: 3.2s;
}
.mv-lead p span:nth-of-type(5) {
  transition-delay: 3.7s;
}
.mv-lead span {
  transition: all 1.8s;
  display: inline-block;
  transform: rotate(0.005deg) translate(0, 0.5em);
  opacity: 0;
}
.mv h2 {
  font-weight: normal;
}

.mv-lead.is-anm span {
  transform: rotate(0deg) translate(0, 0);
  opacity: 1;
}

.mv-copy-wrap p {
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  color: #fff;
  font-size: 2.6rem;
  z-index: 1;
  line-height: 1.6;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 767px) {
  .mv-copy-wrap p {
    font-size: 2.2rem;
    left: 9%;
    bottom: auto;
    top: 18%;
  }
}
.mv-copy-wrap p span {
  white-space: nowrap;
  color: #fff;
  line-height: 1;
}
.mv-copy-wrap p span:nth-of-type(2) {
  font-size: 0.5em;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
    /* 拡大率 */
  }
}
@keyframes slideV {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-10%, 0);
  }
}
.add-animation .slide {
  animation: slideV 10s linear 0s normal both;
}

.mv_slide {
  width: 100%;
}
.mv_slide .mv-slide_v .slide-block {
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .mv_slide .mv-slide_v .slide-block {
    height: calc(100dvh - 50px);
    min-height: auto;
  }
}
@media screen and (max-width: 767px) {
  .mv_slide .mv-slide_v .slide-block.slide02 {
    background-position: center right;
  }
}
.mv_slide .mv-slide_v .slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 110%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
.mv_slide-inner {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .mv_slide-inner {
    padding-bottom: 0;
  }
}
.mv_slide-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.mv_slide-copy-logo {
  position: absolute;
  left: 50%;
  width: 80%;
  max-width: 400px;
  top: 8%;
  z-index: 1;
  transform: translateX(-50%);
}
.mv_slide-copy-logo img {
  width: 100%;
}
.mv_slide-lead {
  position: absolute;
  writing-mode: vertical-rl;
  right: 10%;
  top: 35%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 3.6rem;
  color: #fff;
  letter-spacing: 0.2em;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
@media screen and (max-width: 767px) {
  .mv_slide-lead {
    font-size: 2rem;
    right: 5%;
    bottom: auto;
    top: 10%;
    display: inline-flex;
    align-items: center;
  }
}
.mv_slide h2 {
  font-weight: normal;
}

.is-anm .mv-copy-logo span, .is-anm .mv-copy {
  opacity: 1;
  transform: translate(0, 0);
}
.is-anm .mv-copy-logo::after {
  opacity: 0.7;
  width: 100%;
}

.mv-copy-logo span {
  transition-delay: 0.8s;
}

.mv-copy {
  transition-delay: 1s;
}

.mv-copy-logo::after {
  transition-delay: 0s;
}

.bg > div {
  position: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.bg:nth-of-type(1) > div::before {
  z-index: 1;
}
.bg:nth-of-type(2) > div::before {
  z-index: 2;
}
.bg:nth-of-type(3) > div::before {
  z-index: 3;
}
.bg:nth-of-type(4) > div::before {
  z-index: 4;
}
.bg:nth-of-type(5) > div::before {
  z-index: 5;
}
.bg:nth-of-type(6) > div::before {
  z-index: 6;
}
.bg:nth-of-type(7) > div::before {
  z-index: 7;
}
.bg:nth-of-type(8) > div::before {
  z-index: 8;
}
.bg:nth-of-type(9) > div::before {
  z-index: 9;
}
.bg:nth-of-type(10) > div::before {
  z-index: 10;
}

.bg-mv {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bg-mv .bg-mv-slide {
    margin-top: 40px;
  }
}
.bg-mv .bg-mv-slide .bg-slide-block {
  width: 100%;
  height: calc(95vh - env(safe-area-inset-bottom));
  min-height: 800px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bg-mv .bg-mv-slide .bg-slide-block {
    height: calc(95vh - env(safe-area-inset-bottom) - 80px);
    min-height: 667px;
  }
}
@media screen and (max-width: 767px) {
  .bg-mv .bg-mv-slide .bg-slide-block.slide02 {
    background-position: center right;
  }
}
.bg-mv .bg-mv-slide .slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.bg-mv-inner {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bg-mv-inner {
    padding-bottom: 0;
  }
}
.bg-mv-logo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.bg-mv-copy-logo {
  position: absolute;
  left: 50%;
  width: 80%;
  max-width: 400px;
  top: 8%;
  z-index: 1;
  transform: translateX(-50%);
}
.bg-mv-copy-logo img {
  width: 100%;
}
.bg-mv-lead {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
  color: #fff;
  letter-spacing: 0.2em;
  line-height: 2.3;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .bg-mv-lead {
    font-size: 2rem;
    right: 5%;
    bottom: auto;
    top: 10%;
    display: inline-flex;
    align-items: center;
  }
}
.bg-mv h2 {
  font-weight: normal;
}

.is-anm .bg-mv-copy-logo span, .is-anm .bg-mv-copy {
  opacity: 1;
  transform: translate(0, 0);
}
.is-anm .bg-mv-copy-logo::after {
  opacity: 0.7;
  width: 100%;
}

.bg-mv-copy-logo span {
  transition-delay: 0.8s;
}

.bg-mv-copy {
  transition-delay: 1s;
}

.bg-mv-copy-logo::after {
  transition-delay: 0s;
}

.section-title-en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #4abab3;
  font-size: 70px;
  opacity: 0.5;
  overflow: hidden;
}
@media screen and (max-width: 1199px) {
  .section-title-en {
    font-size: 5vw;
  }
}
@media screen and (max-width: 767px) {
  .section-title-en {
    font-size: 9vw;
  }
}
.section-title-en span {
  letter-spacing: 0;
}

.section-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 3rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1199px) {
  .section-title {
    font-size: 2vw;
  }
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 5vw;
  }
}
.text-block .section-title {
  margin-bottom: 0.5em;
}

.section-lead-wrap {
  padding: 5em 0;
  width: 100%;
  text-align: center;
}
.section-lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .section-lead {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .section-lead {
    font-size: 3.6vw;
  }
}

section.movie, section.shirahama, section.fireworks, section.aws, section.cafe, section.nav-banner, section.floor-plan {
  margin-bottom: 5%;
}

.title-set {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  text-align: center;
}
.title-set .en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.title-set .ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.title-set h1, .title-set h2, .title-set h3, .title-set h4, .title-set h5, .title-set h6 {
  text-align: center;
  font-weight: normal;
  opacity: 0.9;
  color: #333;
}
@media screen and (max-width: 767px) {
  .title-set h1, .title-set h2, .title-set h3, .title-set h4, .title-set h5, .title-set h6 {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .title-set h1, .title-set h2, .title-set h3, .title-set h4, .title-set h5, .title-set h6 {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .title-set h1, .title-set h2, .title-set h3, .title-set h4, .title-set h5, .title-set h6 {
    font-size: 6.75vw;
  }
}
.title-set p {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
}
@media screen and (max-width: 1199px) {
  .title-set p {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .title-set p {
    font-size: 4.5vw;
  }
}
@media screen and (max-width: 767px) {
  .title-set p {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .title-set p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .title-set p {
    font-size: 3.6vw;
  }
}
.title-set.text-left {
  text-align: left;
}
.title-set.text-left h1, .title-set.text-left h2, .title-set.text-left h3, .title-set.text-left h4, .title-set.text-left h5, .title-set.text-left h6, .title-set.text-left p {
  text-align: left;
}

.nav-banner .inner {
  width: 100%;
  text-align: center;
}
.nav-banner a {
  display: inline-block;
  background: url(../img/cmn/nav-banner-bg.jpg) no-repeat center center/cover;
  padding: 5% 0;
  margin: 0 auto;
  width: 90%;
  max-width: 1000px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s;
}
.nav-banner a, .nav-banner a:link, .nav-banner a:visited {
  color: #000;
}
.nav-banner a:hover, .nav-banner a:active {
  text-decoration: none;
  color: #000;
}
.nav-banner a:hover {
  opacity: 0.7;
}
.nav-banner a .nav-banner-title-en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #4abab3;
  line-height: 1;
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
@media screen and (max-width: 1199px) {
  .nav-banner a .nav-banner-title-en {
    font-size: 3.42vw;
  }
}
@media screen and (max-width: 767px) {
  .nav-banner a .nav-banner-title-en {
    font-size: 8.55vw;
  }
}
.nav-banner a .nav-banner-title-ja {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  background-color: #4abab3;
  color: #fff;
  padding: 0.25em 2em;
  margin-top: 1em;
}
@media screen and (max-width: 1199px) {
  .nav-banner a .nav-banner-title-ja {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .nav-banner a .nav-banner-title-ja {
    font-size: 5.4vw;
  }
}

.banner {
  width: 100%;
  padding: 3% 0;
}
.banner .inner {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto;
}

.privacy {
  margin-top: 1em;
}
.privacy a {
  text-decoration: none;
}
.privacy a, .privacy a:link, .privacy a:visited {
  color: #000;
}
.privacy a:hover, .privacy a:active {
  text-decoration: none;
  color: #000;
}

.page-mv {
  width: 100%;
}
.page-mv figure {
  width: 100%;
}
.page-mv figure img {
  width: 100%;
  aspect-ratio: 2.4;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .page-mv figure img {
    aspect-ratio: 1;
  }
}
.page-mv.grad {
  position: relative;
  z-index: 0;
}
.page-mv.grad::before {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

/*
.page-lead{

 position: relative;
 @include c.mq{
	 padding: 3% 0 15%;
	  margin-top: 0;
 }
 &--main,&--copy{
	 text-align: center;

 }
 &.page-lead-home{
	 margin-top: 0;
 }
}
.page-lead-textblock{
 width: 96%;

 padding: 2em 0 0 0;
 margin: 0 auto;
}
.page-lead--img{
 display: flex;
 justify-content: center;
 padding: 2em 0;
 margin: 0 auto;
 width: 80%;
 max-width: 800px;
 figure{
	 margin: 0 3px;
 }
}*/
.rooms-floor-list--block--title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.3em;
}
@media screen and (max-width: 1199px) {
  .rooms-floor-list--block--title {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-floor-list--block--title {
    font-size: 5.4vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-floor-list--block--title {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-floor-list--block--title {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-floor-list--block--title {
    font-size: 4.95vw;
  }
}
.rooms-floor-list--block--lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media screen and (max-width: 1199px) {
  .rooms-floor-list--block--lead {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-floor-list--block--lead {
    font-size: 3.15vw;
  }
}
@media screen and (max-width: 767px) {
  .rooms-floor-list--block--lead {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .rooms-floor-list--block--lead {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .rooms-floor-list--block--lead {
    font-size: 2.7vw;
  }
}

.plans {
  background-color: rgba(11, 37, 96, 0.1);
  margin-top: 5%;
  margin-bottom: 5%;
}

.contents-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1 !important;
  text-align: center;
  margin: 0 0 1em 0;
}
@media screen and (max-width: 1199px) {
  .contents-title {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) {
  .contents-title {
    font-size: 6.75vw;
  }
}
@media screen and (max-width: 767px) {
  .contents-title {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .contents-title {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .contents-title {
    font-size: 4.95vw;
  }
}
.contents-title span {
  display: inline-block;
  width: 100%;
}
.contents-title span.en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.contents-title span.ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.contents-title span:nth-of-type(1) {
  font-size: 1.3em;
}
.contents-title span:nth-of-type(2) {
  font-size: 0.5em;
}

.page-lead .page-lead-01 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
  width: 100%;
  margin-bottom: 1em;
}
@media screen and (max-width: 1199px) {
  .page-lead .page-lead-01 {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .page-lead .page-lead-01 {
    font-size: 5.4vw;
  }
}
.page-lead .page-lead-02 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  .page-lead .page-lead-02 {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) {
  .page-lead .page-lead-02 {
    font-size: 4.05vw;
  }
}

.bg-ill-wrap {
  position: relative;
  overflow: hidden;
}
.bg-ill-wrap .intro-img-wrap {
  position: absolute;
  width: 100%;
  height: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.bg-ill-wrap .intro-img-wrap figure {
  width: 8%;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-wrap figure {
    width: 16%;
  }
}
.bg-ill-wrap .intro-img-wrap figure img {
  border-radius: 1rem;
  width: 100%;
}
.bg-ill-wrap .intro-img-wrap figure[class^=intro-img] {
  object-fit: cover;
  aspect-ratio: 1.2;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-wrap figure[class^=intro-img] {
    aspect-ratio: 0.65;
  }
}
.bg-ill-wrap .intro-img-c-01 {
  left: -15%;
  top: 75%;
  width: 12% !important;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-c-01 {
    width: 15% !important;
    left: -1%;
    top: 88%;
  }
}
.bg-ill-wrap .intro-img-c-01 img {
  opacity: 1 !important;
  width: 100%;
}
.bg-ill-wrap .intro-img-c-01-2 {
  left: -6%;
  top: 82%;
  width: 6% !important;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-c-01-2 {
    width: 9% !important;
    left: 9%;
    top: 94%;
  }
}
.bg-ill-wrap .intro-img-c-01-2 img {
  opacity: 1 !important;
  width: 100%;
}
.bg-ill-wrap .intro-img-c-02 {
  right: -15%;
  top: 43%;
  width: 10% !important;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-c-02 {
    width: 13% !important;
    right: 4%;
    top: 21%;
  }
}
.bg-ill-wrap .intro-img-c-02 img {
  opacity: 1 !important;
  width: 100%;
}
.bg-ill-wrap .intro-img-b-01 {
  left: -20%;
  top: -5%;
  width: 39% !important;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-b-01 {
    width: 39% !important;
    left: -5%;
    top: -2%;
  }
}
.bg-ill-wrap .intro-img-b-01 img {
  opacity: 1 !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100rem !important;
  width: 100%;
}
.bg-ill-wrap .intro-img-b-02 {
  right: -20%;
  bottom: 0%;
  width: 30% !important;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img-b-02 {
    width: 30% !important;
    right: -3%;
    top: 39%;
  }
}
.bg-ill-wrap .intro-img-b-02 img {
  opacity: 1 !important;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100rem !important;
  width: 100%;
}
.bg-ill-wrap .intro-img01 {
  left: 12%;
  top: 48%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img01 {
    left: 1%;
    top: 39%;
  }
}
.bg-ill-wrap .intro-img02 {
  right: -2%;
  top: 24%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img02 {
    right: -2%;
    top: 7%;
    width: 18% !important;
  }
}
.bg-ill-wrap .intro-img03 {
  right: -2%;
  top: 60%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img03 {
    right: -2%;
    width: 18% !important;
    top: 95%;
  }
}
.bg-ill-wrap .intro-img04 {
  left: -8%;
  top: 77%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-img04 {
    left: 4%;
    top: 96%;
  }
}
.bg-ill-wrap .intro-ill01 {
  left: -19%;
  top: 49%;
}
.bg-ill-wrap .intro-ill02 {
  left: 14%;
  top: 26%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill02 {
    left: 25%;
    top: 2%;
  }
}
.bg-ill-wrap .intro-ill03 {
  left: 8%;
  top: 59%;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill03 {
    left: 78%;
    top: 88%;
    width: 10% !important;
  }
}
.bg-ill-wrap .intro-ill04 {
  left: 76%;
  top: 42%;
  width: 8% !important;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill04 {
    width: 12% !important;
    left: 83%;
    top: 39%;
  }
}
.bg-ill-wrap .intro-ill05 {
  left: 83%;
  top: 74%;
  width: 7% !important;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill05 {
    left: 57%;
    top: 92%;
    width: 8% !important;
  }
}
.bg-ill-wrap .intro-ill06 {
  left: 74%;
  top: 16%;
  width: 6% !important;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill06 {
    width: 9% !important;
    left: 58%;
    top: 3%;
  }
}
.bg-ill-wrap .intro-ill07 {
  width: 9% !important;
  left: 93%;
  top: 4%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill07 {
    width: 10% !important;
    left: 81%;
    top: 8%;
  }
}
.bg-ill-wrap .intro-ill08 {
  left: 3%;
  top: 1%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill08 {
    left: 3%;
    top: 8%;
  }
}
.bg-ill-wrap .intro-ill09 {
  width: 8% !important;
  left: -12%;
  top: 13%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill09 {
    width: 13% !important;
    left: 5%;
    top: 25%;
  }
}
.bg-ill-wrap .intro-ill10 {
  width: 6% !important;
  left: 95%;
  top: 21%;
}
@media screen and (max-width: 767px) {
  .bg-ill-wrap .intro-ill10 {
    left: 88%;
    top: 65%;
  }
}

.top-contents .inner .block {
  position: relative;
}
.top-contents .inner .block:nth-of-type(1) {
  width: 45%;
  padding-left: 10%;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  .top-contents .inner .block:nth-of-type(1) {
    width: 100%;
    padding-left: 0;
    padding-bottom: 2em;
  }
}
.top-contents .inner .block:nth-of-type(2) {
  width: 55%;
}
@media screen and (max-width: 767px) {
  .top-contents .inner .block:nth-of-type(2) {
    width: 100%;
  }
}
.top-contents p.title-en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .top-contents p.title-en {
    position: static;
    writing-mode: inherit;
  }
}
.top-contents-img img {
  width: 100%;
  aspect-ratio: 2;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .top-contents-img img {
    aspect-ratio: 1.2;
  }
}
.top-contents.intro {
  position: relative;
}
.top-contents.intro .inner {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.top-contents.intro .logo_script {
  text-align: center;
}
.top-contents.intro .mapJapan {
  position: absolute;
  width: 80%;
  max-width: 840px;
  right: 50%;
  top: 13rem;
  transform: translateX(80%);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .mapJapan {
    max-width: none;
    width: 96%;
    position: static;
    right: 0;
    top: 0;
    transform: translateX(0%);
  }
}
.top-contents.intro .mapJapan img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container figure {
    order: -1;
  }
}
.top-contents.intro:nth-of-type(even) .intro-text-container figure {
  order: -1;
}
.top-contents.intro .intro-text-container {
  display: flex;
  width: 100%;
  justify-content: center;
  z-index: 0;
  position: relative;
  flex-wrap: wrap;
}
.top-contents.intro .intro-text-container .intro-title {
  width: 40%;
  padding: 5% 2%;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title {
    width: 100%;
    padding: 2% 2%;
  }
}
.top-contents.intro .intro-text-container .intro-title-inner {
  padding: 5rem 0;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title-inner {
    padding: 2rem 0;
  }
}
.top-contents.intro .intro-text-container .intro-title h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .top-contents.intro .intro-text-container .intro-title h3 {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title h3 {
    font-size: 4.5vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title h3 {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .top-contents.intro .intro-text-container .intro-title h3 {
    font-size: 1.62vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title h3 {
    font-size: 4.05vw;
  }
}
.top-contents.intro .intro-text-container .intro-title p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 2;
}
@media screen and (max-width: 1199px) {
  .top-contents.intro .intro-text-container .intro-title p {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title p {
    font-size: 3.15vw;
  }
}
.top-contents.intro .intro-text-container .intro-title-imgs2 {
  display: flex;
  gap: 3rem;
  width: 90%;
  margin: 0 0 8% 0;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title-imgs2 {
    justify-content: center;
  }
}
.top-contents.intro .intro-text-container .intro-title-imgs2 figure {
  width: 40%;
}
.top-contents.intro .intro-text-container .intro-title-imgs2 figure:nth-of-type(2) {
  margin-top: 5%;
}
.top-contents.intro .intro-text-container .intro-title-imgs {
  display: flex;
  gap: 3rem;
  width: 90%;
  margin: 8% 0 0 0;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container .intro-title-imgs {
    justify-content: center;
  }
}
.top-contents.intro .intro-text-container .intro-title-imgs figure {
  width: 40%;
}
.top-contents.intro .intro-text-container .intro-title-imgs figure:nth-of-type(2) {
  margin-top: 5%;
}
.top-contents.intro .intro-text-container figure {
  width: 60%;
  /*position:absolute;
  z-index:-1;
  left:0;
  top:0;
  width:100%;
  height:100%;*/
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-text-container figure {
    width: 100%;
  }
}
.top-contents.intro .intro-text-container figure img {
  width: 100%;
}
.top-contents.intro .intro-img-container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-width: 470px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  transform: translateX(-60%);
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-img-container {
    transform: translateX(0);
  }
}
.top-contents.intro figure.intro-img img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.4;
}
@media screen and (max-width: 767px) {
  .top-contents.intro figure.intro-img img {
    aspect-ratio: 1.4;
  }
}
.top-contents.intro figure.intro-img:nth-of-type(1) {
  width: 55%;
}
.top-contents.intro figure.intro-img:nth-of-type(2) {
  margin-top: 18%;
  width: 37%;
}
.top-contents.intro::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.top-contents.intro::before {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../img/hotels/haku/09.jpg) no-repeat center center/cover;
  z-index: -2;
}
.top-contents.intro .intro-title {
  /*figure{
  	&:nth-of-type(1){
  		order: 1;
  		width: 25%;
  		margin-top: 15rem;
  		@include c.mq(){
  			margin-top: 2rem;	
  			width: 45%;
  		}
  		img{
  			aspect-ratio: .7;
  			object-fit: cover;
  			@include c.mq(){
  				aspect-ratio: .9;
  			}
  		}
  	}
  	&:nth-of-type(2){
  		order: 3;
  		width: 25%;

  		img{
  			aspect-ratio: 1.6;
  			object-fit: cover;
  			@include c.mq(){
  				aspect-ratio: 1.2;
  			}
  		}
  		@include c.mq(){
  			order: 2;
  			margin-top: 0;	
  			width: 50%;
  		}
  	}
  }*/
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-title {
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
  }
}
.top-contents.intro .intro-title p {
  order: 2;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-title p {
    text-align: justify;
  }
}
.top-contents.intro .intro-title span {
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 5em;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-title span {
    margin-bottom: 0;
    font-size: 2rem;
    padding-top: 2em;
  }
}
.top-contents.intro .sec-text {
  line-height: 2;
  margin: 0 3em 0 0;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .sec-text {
    margin-right: 0;
    writing-mode: inherit;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.intro .sec-text br {
    display: none;
  }
}
.top-contents.intro .intro-sideimg-wrap {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*figure{
  	width: 5%;
  	height: 90%;
  	top: 10%;
  	position: absolute;
  	@include c.mq(){
  		width: 5%;
  	}
  	img{
  		width: 100%;
  		object-fit: cover;
  	}
  }*/
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-sideimg-wrap {
    position: relative;
    display: flex;
  }
}
.top-contents.intro .intro-sideimg-wrap > div {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-sideimg-wrap > div {
    position: static;
    width: 50%;
    height: 10rem;
  }
}
.top-contents.intro .intro-sideimg-wrap .intro-sideimg01 {
  left: 0;
  z-index: -1;
  width: 18%;
  height: 50%;
  top: 5%;
  border-radius: 0 2rem 2rem 0;
  background: url(../img/top/intro/shirarahama.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-sideimg-wrap .intro-sideimg01 {
    border-radius: 0;
    width: 50%;
    height: 10rem;
  }
}
.top-contents.intro .intro-sideimg-wrap .intro-sideimg02 {
  right: 0;
  width: 15%;
  height: 60%;
  top: 30%;
  border-radius: 2rem 0 0 2rem;
  background: url(../img/top/intro/engetsu.jpg) no-repeat center center/cover;
}
@media screen and (max-width: 767px) {
  .top-contents.intro .intro-sideimg-wrap .intro-sideimg02 {
    border-radius: 0;
    width: 50%;
    height: 10rem;
  }
}
.top-contents.hotelmap {
  border-top: 1px solid #eee;
  padding-top: 5rem;
}
.top-contents.hotelmap .hotelmap-main {
  width: 100%;
  position: relative;
}
.top-contents.hotelmap .hotelmap-main .section-title {
  margin-bottom: 0.5em;
}
.top-contents.hotelmap .hotelmap-main p {
  /*position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;*/
  padding: 0 10%;
  width: 100%;
  font-size: 4rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-main p {
    padding-bottom: 1rem;
    font-size: 2.5rem;
    align-items: flex-end;
    justify-content: center;
    padding-top: 1em;
  }
}
.top-contents.hotelmap .hotelmap-main figure, .top-contents.hotelmap .hotelmap-main img {
  width: 100%;
}
.top-contents.hotelmap .hotelmap-main img {
  aspect-ratio: 4;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-main img {
    aspect-ratio: 2.3;
  }
}
.top-contents.hotelmap .inner {
  max-width: 1400px;
  padding-top: 0;
}
.top-contents.hotelmap .hotelmap-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-nav {
    margin-bottom: 0;
    justify-content: center;
  }
}
.top-contents.hotelmap .hotelmap-nav-wrap {
  display: inline-flex;
  justify-content: center;
  padding: 1rem 3em;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-nav-wrap {
    margin-top: 0;
    padding: 1.5em;
  }
}
.top-contents.hotelmap .hotelmap-nav button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  padding: 0.3em 2em;
  font-size: 2rem;
  color: #333333;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  opacity: 0.3;
}
.top-contents.hotelmap .hotelmap-nav button:first-of-type {
  border-right: 1px solid #eee;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-nav button {
    padding: 0.5em 1em;
    font-size: 1.6rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
.top-contents.hotelmap .hotelmap-nav button.active {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-nav button span {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}
.top-contents.hotelmap .hotelmap-nav button span:nth-of-type(2) {
  font-size: 0.7em;
  margin-left: 1em;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-nav button span:nth-of-type(2) {
    margin-left: 0;
  }
}
.top-contents.hotelmap .hotelmap-contents {
  width: 100%;
}
.top-contents.hotelmap .hotelmap-contents > div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.top-contents.hotelmap .hotelmap-contents-text-wrap {
  text-align: center;
  width: 100%;
}
.top-contents.hotelmap .hotelmap-contents-text {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-text {
    width: 90%;
    margin: 0 auto;
  }
}
.top-contents.hotelmap .hotelmap-contents-text-wrap .area {
  margin-bottom: 1em;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-text-wrap .area {
    font-size: 1.6rem;
  }
}
.top-contents.hotelmap .hotelmap-contents-text-wrap .area span:nth-of-type(2) {
  font-size: 0.6em;
  margin-left: 1em;
}
.top-contents.hotelmap .hotelmap-contents-text-wrap h4 {
  font-size: 2.2rem;
  font-weight: normal;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-text-wrap h4 {
    font-size: 1.8rem;
    text-align: center;
  }
}
.top-contents.hotelmap .hotelmap-contents-text-wrap .text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 3em;
}
@media screen and (max-width: 1199px) {
  .top-contents.hotelmap .hotelmap-contents-text-wrap .text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-text-wrap .text {
    font-size: 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-text-wrap .text {
    text-align: center;
    margin-bottom: 1em;
  }
}
.top-contents.hotelmap .hotelmap-contents-text .area-map {
  width: 100%;
  position: relative;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-hills, .top-contents.hotelmap .hotelmap-contents-text .area-map-sea {
  position: absolute;
  font-size: 1.8rem;
  z-index: 1;
  mix-blend-mode: darken;
  transition: all 0.3s;
  opacity: 0.5;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-hills::before, .top-contents.hotelmap .hotelmap-contents-text .area-map-sea::before {
  transition: all 0.3s;
  content: "";
  display: block;
  width: 3em;
  height: 3em;
  filter: blur(1.2em);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-hills {
  top: 45%;
  left: 51%;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-hills::before {
  background: #91b79a;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-sea {
  top: 29%;
  left: 38%;
}
.top-contents.hotelmap .hotelmap-contents-text .area-map-sea::before {
  background: #85a9ba;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .hotelmap-contents-text-wrap-hills {
  display: block;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .hotelmap-contents-text-wrap-sea {
  display: none;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .area-map-hills {
  font-size: 2rem;
  opacity: 1;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .area-map-hills::before {
  background: #76d28c;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .hotelmap-contents-list li.area-hills a::after {
  opacity: 1;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .hotelmap-contents-list li.area-sea {
  opacity: 0.3;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-hills .hotelmap-contents-list li.area-sea a::after {
  opacity: 0.7;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .hotelmap-contents-text-wrap-hills {
  display: none;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .hotelmap-contents-text-wrap-sea {
  display: block;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .area-map-sea {
  font-size: 1.8rem;
  opacity: 1;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .area-map-sea::before {
  background: #68b3d7;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .hotelmap-contents-list li.area-hills {
  opacity: 0.3;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .hotelmap-contents-list li.area-hills a::after {
  opacity: 0.7;
}
.top-contents.hotelmap .hotelmap-contents-inner.tab-sea .hotelmap-contents-list li.area-sea a::after {
  opacity: 1;
}
.top-contents.hotelmap .hotelmap-contents-list {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-list {
    width: 100%;
  }
}
.top-contents.hotelmap .hotelmap-contents-list ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.top-contents.hotelmap .hotelmap-contents-list ul li {
  padding: 5px;
  width: 20%;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .top-contents.hotelmap .hotelmap-contents-list ul li {
    width: 25%;
    padding: 2px;
  }
}
.top-contents.hotelmap .hotelmap-contents-list ul li a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  background-color: #eee;
  font-size: 1.2rem;
  aspect-ratio: 1.3;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  transition: opacity 0.5s;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a, .top-contents.hotelmap .hotelmap-contents-list ul li a:link, .top-contents.hotelmap .hotelmap-contents-list ul li a:visited {
  color: #fff;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a:hover, .top-contents.hotelmap .hotelmap-contents-list ul li a:active {
  text-decoration: none;
  color: #fff;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a span {
  padding-bottom: 0.5em;
  letter-spacing: 0.1em;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a:hover {
  opacity: 0.7;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
  opacity: 0.7;
  z-index: -2;
}
.top-contents.hotelmap .hotelmap-contents-list ul li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  box-sizing: border-box;
  transition: all 0.5s;
}
.top-contents.about {
  position: relative;
  z-index: 0;
}
.top-contents.about::before {
  content: "";
  display: block;
  background: #fff;
  width: 100%;
  height: 6em;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
.top-contents.about::after {
  content: "";
  display: block;
  background: #fff;
  width: 100%;
  height: 6em;
  z-index: -1;
  bottom: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 100%);
}
.top-contents.about .inner {
  padding: 10em 0;
  min-height: 70em;
  background-color: #fff;
  width: 100%;
  max-width: none;
}
@media screen and (max-width: 767px) {
  .top-contents.about .inner {
    padding: 0;
  }
}
.top-contents.about .about-lead h4 {
  font-weight: normal;
  font-size: 2.3rem;
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-lead h4 {
    font-size: 1.8rem;
  }
}
.top-contents.about .about-point-lead h4 {
  font-weight: normal;
  font-size: 3.4rem;
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-point-lead h4 {
    font-size: 2.6rem;
  }
}
.top-contents.about .about-section-let {
  width: 90%;
  max-width: 1000px;
  font-size: 5vw;
  color: #333333;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  margin: -0.5em auto 0;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-section-let {
    font-size: 16vw;
  }
}
.top-contents.about .about-section-let span {
  display: inline-block;
}
.top-contents.about .about-lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: normal;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 2em;
}
@media screen and (max-width: 1199px) {
  .top-contents.about .about-lead {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-lead {
    font-size: 5.4vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-lead {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin: 0 auto 2em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .top-contents.about .about-lead {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .top-contents.about .about-lead {
    font-size: 4.5vw;
  }
}
.top-contents.about .pointslide ul {
  margin: 0;
  list-style: none;
}
.top-contents.about .pointslide ul li img {
  width: 300px;
}
@media screen and (max-width: 767px) {
  .top-contents.about .pointslide ul li img {
    width: 150px;
  }
}
.top-contents.about .about-slide {
  overflow-x: hidden;
}
.top-contents.about .about-slide ul {
  list-style: none;
  display: flex;
  width: 200%;
}
.top-contents.about .about-slide ul li {
  margin-right: 2%;
  width: 30%;
}
.top-contents.about .about-slide ul li figure, .top-contents.about .about-slide ul li img {
  width: 100%;
}
.top-contents.about .about-point {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding-top: 8em;
}
.top-contents.about .about-point-lead {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 2em;
}
.top-contents.about .about-point-list ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.top-contents.about .about-point-list ul li {
  width: 50%;
  text-align: center;
  margin-bottom: 0.5em;
  padding-bottom: 1em;
  position: relative;
}
.top-contents.about .about-point-list ul li:nth-of-type(1)::before, .top-contents.about .about-point-list ul li:nth-of-type(2)::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.1);
  width: 70%;
  height: 1px;
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-point-list ul li:nth-of-type(1)::before, .top-contents.about .about-point-list ul li:nth-of-type(2)::before {
    content: none;
  }
}
.top-contents.about .about-point-list ul li:nth-of-type(1)::after, .top-contents.about .about-point-list ul li:nth-of-type(3)::after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
  height: 70%;
  width: 1px;
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-point-list ul li:nth-of-type(1)::after, .top-contents.about .about-point-list ul li:nth-of-type(3)::after {
    content: none;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-point-list ul li {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .top-contents.about .about-point-list ul li:last-of-type {
    border-bottom: none;
  }
}
.top-contents.about .about-point-list ul li p.num {
  color: #333;
  font-size: 3rem;
  margin-bottom: 0.2em;
}
.top-contents.about .about-point-list ul li h5 {
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.top-contents.about .about-point-list ul li p.text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .top-contents.about .about-point-list ul li p.text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.about .about-point-list ul li p.text {
    font-size: 3.6vw;
  }
}
.top-contents.bnr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  z-index: 0;
}
.top-contents.bnr > div {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-contents.bnr > div {
    width: 100%;
  }
}
.top-contents.bnr > div a {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
  z-index: 0;
  overflow: hidden;
  aspect-ratio: 1.3;
  text-decoration: none;
  letter-spacing: 0.1em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .top-contents.bnr > div a {
    aspect-ratio: 2;
  }
}
.top-contents.bnr > div a, .top-contents.bnr > div a:link, .top-contents.bnr > div a:visited {
  color: #fff;
}
.top-contents.bnr > div a:hover, .top-contents.bnr > div a:active {
  text-decoration: none;
  color: #fff;
}
.top-contents.bnr > div a::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.top-contents.bnr > div a::before {
  transition: all 1s;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: -2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.top-contents.bnr > div a:hover::before {
  transform: scale(1.05);
}
.top-contents.bnr > div a .title, .top-contents.bnr > div a .text {
  width: 100%;
  text-align: center;
}
.top-contents.bnr > div a .title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .top-contents.bnr > div a .title {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.bnr > div a .title {
    font-size: 4.95vw;
  }
}
.top-contents.bnr > div a .text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .top-contents.bnr > div a .text {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.bnr > div a .text {
    font-size: 3.15vw;
  }
}
.top-contents.bnr .bnr-about a::before {
  background: url(../img/top/sec-about-img.jpg) no-repeat center center/cover;
}
.top-contents.bnr .bnr-training a::before {
  background: url(../img/top/sec-training-img.jpg) no-repeat center center/cover;
}

.reservation {
  background: #f1f1f1;
}
@media screen and (max-width: 767px) {
  .reservation {
    display: none;
  }
}
.reservation .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 5% 0;
  text-align: center;
}
.reservation #booking {
  width: 100%;
  text-align: center;
}
.reservation #booking form {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  /*background: none;
  border: 1px solid rgba(c.$color-base,.5);
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  */
}
.reservation .title {
  text-align: center;
  margin: 0 auto;
  position: relative;
  padding-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reservation .title::before {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url(../img/cmn/panda1.svg) no-repeat center center/contain;
  left: -170px;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  .reservation .title::before {
    width: 80px;
    height: 80px;
    left: -20px;
    top: -20%;
  }
}
.reservation .title::after {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url(../img/cmn/panda2.svg) no-repeat center center/contain;
  right: -200px;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  .reservation .title::after {
    width: 80px;
    height: 80px;
    right: -20px;
    top: -20%;
  }
}
@media screen and (max-width: 767px) {
  .reservation .title {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
  }
}
.reservation .title h3 {
  font-size: 2.8rem;
  margin-bottom: 0.5em;
  text-align: center;
  padding: 0 1EM;
}
.reservation .title p {
  font-size: 2.6vw;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: -0.5em auto 0.2em;
}
@media screen and (max-width: 767px) {
  .reservation .title p {
    font-size: 7vw;
  }
}
.reservation .booking-account-panel {
  text-align: center;
  padding: 1em 0 0 0;
  font-size: 1.6rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}
.reservation .booking-account-panel a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.reservation .booking-account-panel a, .reservation .booking-account-panel a:link, .reservation .booking-account-panel a:visited {
  color: #fff;
}
.reservation .booking-account-panel a:hover, .reservation .booking-account-panel a:active {
  text-decoration: none;
  color: #fff;
}
.reservation .booking-account-panel a::before {
  content: "";
  display: block;
  width: 3em;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.contents .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  padding: 10% 0;
}
.contents .inner.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contents .inner .block {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .contents .inner .block {
    width: 100%;
  }
}
.contents h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .contents h3 {
    font-size: 2.52vw;
  }
}
@media screen and (max-width: 767px) {
  .contents h3 {
    font-size: 6.3vw;
  }
}
.contents p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 1199px) {
  .contents p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .contents p {
    font-size: 3.6vw;
  }
}
.contents p.title-en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .contents p.title-en {
    position: static;
    writing-mode: inherit;
  }
}

.topics {
  width: 100%;
}
.topics .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.topics-title {
  width: 25%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1199px) {
  .topics-title {
    font-size: 2.52vw;
  }
}
@media screen and (max-width: 767px) {
  .topics-title {
    font-size: 6.3vw;
  }
}
@media screen and (max-width: 767px) {
  .topics-title {
    width: 100%;
    border-right: none;
    margin-bottom: 1em;
  }
}
.topics .title-set {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .topics .title-set {
    width: 100%;
  }
}
.topics .title-set p, .topics .title-set h3 {
  text-align: left;
}
@media screen and (max-width: 767px) {
  .topics .title-set p, .topics .title-set h3 {
    text-align: center;
  }
}
.topics-list {
  width: 70%;
  list-style: none;
  max-height: 50rem;
  overflow-y: auto;
  padding-left: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  .topics-list {
    width: 100%;
    border-left: none;
  }
}
.topics-list li {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4rem 0;
  line-height: 1.5;
}
@media screen and (max-width: 1199px) {
  .topics-list li {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .topics-list li {
    font-size: 3.6vw;
  }
}
.topics-list li span {
  display: block;
}
.topics-list li .topic-date {
  margin-right: 1em;
  font-size: 0.8em;
}
.topics-list li small {
  font-size: 0.8em;
  line-height: 1.5;
}

.about .contents.intro {
  position: relative;
}
.about .contents.intro::before {
  display: inline-block;
  width: 50%;
  aspect-ratio: 1;
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.5;
  background: url(../img/top/sec-ichikara-img.jpg) no-repeat center center/cover;
}
.about .contents.intro .page-contents-img01 {
  margin-bottom: 3%;
}
.about .contents.pics {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.about .contents.pics figure {
  width: 50%;
}
.about .contents.pics figure img {
  aspect-ratio: 1.8;
  object-fit: cover;
}
.about .contents.outline h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}
@media screen and (max-width: 1199px) {
  .about .contents.outline h3 {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .about .contents.outline h3 {
    font-size: 4.95vw;
  }
}
.about .contents.outline dl {
  display: flex;
  flex-wrap: wrap;
}
.about .contents.outline dt {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .about .contents.outline dt {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.2em;
  }
}
.about .contents.outline dd {
  width: 80%;
  padding-left: 2em;
}
@media screen and (max-width: 767px) {
  .about .contents.outline dd {
    width: 100%;
    padding-left: 0;
  }
}
.about .contents.outline dt, .about .contents.outline dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}
@media screen and (max-width: 1199px) {
  .about .contents.outline dt, .about .contents.outline dd {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .about .contents.outline dt, .about .contents.outline dd {
    font-size: 3.6vw;
  }
}

.access .contents.access-info .inner {
  padding-top: 0;
}
.access .contents.access-info dl {
  display: flex;
  flex-wrap: wrap;
}
.access .contents.access-info dt {
  width: 25%;
}
@media screen and (max-width: 767px) {
  .access .contents.access-info dt {
    width: 25%;
  }
}
.access .contents.access-info dt span::before {
  content: "○";
}
.access .contents.access-info dd {
  width: 75%;
  padding-left: 2em;
}
@media screen and (max-width: 767px) {
  .access .contents.access-info dd {
    width: 74%;
  }
}
.access .contents.access-info dt, .access .contents.access-info dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 2em 0;
}
@media screen and (max-width: 1199px) {
  .access .contents.access-info dt, .access .contents.access-info dd {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .access .contents.access-info dt, .access .contents.access-info dd {
    font-size: 3.6vw;
  }
}
.access .contents.access-info dt:first-of-type, .access .contents.access-info dd:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.training-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.training-hotel-img img {
  object-fit: cover;
  aspect-ratio: 2.3;
}
.training-hotel-img figcaption {
  font-size: 14px;
  padding-top: 0.3em;
}
.training .contents.workation {
  background: url(../img/cmn/extra_clean_paper.jpg) repeat center top;
}
.training .contents .text-container {
  padding: 2em 0 1em 0;
}
.training .contents .text-container h3 {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding-bottom: 1em;
  margin-block: 1em;
  position: relative;
}
@media screen and (max-width: 1199px) {
  .training .contents .text-container h3 {
    font-size: 1.98vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .text-container h3 {
    font-size: 4.95vw;
  }
}
.training .contents .text-container h3::before {
  content: "";
  display: block;
  width: 3em;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.training .contents .text-container p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .training .contents .text-container p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .text-container p {
    font-size: 3.6vw;
  }
}
.training .contents .training-plan {
  padding: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: relative;
  max-width: 800px;
  margin: 3% auto;
  background: rgba(0, 0, 0, 0.02);
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan {
    margin: 13% 0 5% auto;
  }
}
.training .contents .training-plan::after {
  content: "";
  display: block;
  width: 7em;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 2%;
  right: 2%;
  transform: translateX(50%) rotate(-45deg);
}
.training .contents .training-plan::before {
  content: "";
  display: block;
  width: 7em;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 2%;
  left: 2%;
  transform: translateX(-50%) rotate(-45deg);
}
.training .contents .training-plan p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding: 0.5em 0;
}
@media screen and (max-width: 1199px) {
  .training .contents .training-plan p {
    font-size: 2.52vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan p {
    font-size: 6.3vw;
  }
}
.training .contents .training-plan dl {
  display: flex;
  flex-wrap: wrap;
}
.training .contents .training-plan dt, .training .contents .training-plan dd {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 1em 0 0.3em 0;
}
@media screen and (max-width: 1199px) {
  .training .contents .training-plan dt, .training .contents .training-plan dd {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan dt, .training .contents .training-plan dd {
    font-size: 3.6vw;
  }
}
.training .contents .training-plan dt {
  width: 20%;
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan dt {
    width: 100%;
    padding-bottom: 0;
    padding: 0.3em;
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.training .contents .training-plan dd {
  width: 80%;
  padding-left: 2em;
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan dd {
    width: 100%;
    padding: 0.3em;
    margin-bottom: 0.3em;
  }
}
.training .contents .training-plan dd a {
  text-decoration: none;
  text-decoration: underline;
}
.training .contents .training-plan dd a, .training .contents .training-plan dd a:link, .training .contents .training-plan dd a:visited {
  color: #333;
}
.training .contents .training-plan dd a:hover, .training .contents .training-plan dd a:active {
  text-decoration: none;
  color: #333;
}
.training .contents .training-plan-list {
  width: 100%;
  padding: 5em 0;
}
.training .contents .training-plan-list-block {
  margin-bottom: 2em;
}
.training .contents .training-plan-list-block p {
  padding: 0;
}
.training .contents .training-plan-list-block .title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .training .contents .training-plan-list-block .title {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan-list-block .title {
    font-size: 5.4vw;
  }
}
.training .contents .training-plan-list-block .text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .training .contents .training-plan-list-block .text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .training .contents .training-plan-list-block .text {
    font-size: 3.6vw;
  }
}
.training .page-contents-headImg {
  width: 100%;
}
.training .page-contents-headImg img {
  width: 100%;
  aspect-ratio: 3;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .training .page-contents-headImg img {
    aspect-ratio: 2;
  }
}

.workation-concept {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 1em 0;
}
.workation-concept p {
  padding: 1.5em;
  width: 33.3333333333%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: justify;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1199px) {
  .workation-concept p {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .workation-concept p {
    font-size: 3.6vw;
  }
}
.workation-concept p:last-of-type {
  border-right: none;
}
@media screen and (max-width: 767px) {
  .workation-concept p {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .workation-concept p:last-of-type {
    border-bottom: none;
  }
}
.workation-plan {
  padding: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: relative;
  max-width: 800px;
  margin: 3% auto;
  background: rgba(0, 0, 0, 0.02);
}
@media screen and (max-width: 767px) {
  .workation-plan {
    margin: 13% 0 5% auto;
  }
}
.workation-plan::after {
  content: "";
  display: block;
  width: 7em;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 2%;
  right: 2%;
  transform: translateX(50%) rotate(-45deg);
}
.workation-plan::before {
  content: "";
  display: block;
  width: 7em;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 2%;
  left: 2%;
  transform: translateX(-50%) rotate(-45deg);
}
.workation-plan-list {
  width: 100%;
  padding: 5em 0;
}
.workation-plan-list-block {
  margin-bottom: 2em;
}
.workation-plan-list-block p {
  padding: 0;
}
.workation-plan-list-block .title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .workation-plan-list-block .title {
    font-size: 2.16vw;
  }
}
@media screen and (max-width: 767px) {
  .workation-plan-list-block .title {
    font-size: 5.4vw;
  }
}
.workation-plan-list-block .text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .workation-plan-list-block .text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .workation-plan-list-block .text {
    font-size: 3.6vw;
  }
}
.workation-plan-info {
  margin-top: 2em;
  padding-top: 1.5em;
}
.workation-plan-info p.workation-plan-info-title {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding: 0.3em 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1199px) {
  .workation-plan-info p.workation-plan-info-title {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .workation-plan-info p.workation-plan-info-title {
    font-size: 3.6vw;
  }
}
.workation-plan-info p.workation-plan-info-text {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .workation-plan-info p.workation-plan-info-text {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .workation-plan-info p.workation-plan-info-text {
    font-size: 3.6vw;
  }
}

.cta {
  width: 100%;
  margin-top: 5em;
  text-align: center;
}
.cta span {
  font-size: 22px;
  line-height: 1.5;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .cta span {
    font-size: 14px;
  }
}
.cta span b {
  font-size: 1.5em;
}

.outline {
  width: 100%;
  background: url(../img/cmn/extra_clean_paper.jpg) repeat center top;
}

.page-contents-img01 img {
  aspect-ratio: 2.5;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .page-contents-img01 img {
    aspect-ratio: 2;
  }
}

.stay {
  padding: 5rem 0;
  margin-top: 5rem;
}
.stay-lead {
  text-align: center;
  padding: 3rem 0 5rem;
}
.stay-lead h4 {
  font-weight: normal;
  font-size: 3.4rem;
}
@media screen and (max-width: 767px) {
  .stay-lead h4 {
    font-size: 2.4rem;
  }
}
.stay-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 13rem;
}
.stay-block-img {
  width: 55%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .stay-block-img {
    width: 100%;
  }
}
.stay-block-img figure img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  border-radius: 0 3rem 3rem 0;
}
@media screen and (max-width: 767px) {
  .stay-block-img figure img {
    border-radius: 0;
  }
}
.stay-block-text {
  width: 50%;
  font-size: 2rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: #008085;
  margin-left: -5%;
  margin-bottom: -5rem;
  margin-top: 5rem;
  border-radius: 2rem 0 0 2rem;
  padding: 8%;
}
@media screen and (max-width: 767px) {
  .stay-block-text {
    width: 90%;
    margin-left: 10%;
    margin-top: -2.5em;
    font-size: 1.1rem;
    border-radius: 1rem 0 0 1rem;
    padding: 5%;
    z-index: 2;
  }
}
.stay-block-text h5, .stay-block-text p {
  width: 100%;
  color: #fff;
  text-align: center;
}
.stay-block-text h5 {
  font-size: 1.8em;
  font-weight: normal;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.stay-block-text p.en {
  font-size: 1em;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.stay-block-text p.caption {
  font-size: 1.4rem !important;
}
.stay-block-text p:not(.en) {
  font-size: 1em;
}

:root {
  --bystay-color: #333;
  --bystay-color02: #b36289;
}

.bystay, .bystay-other {
  padding: 5rem 0 15rem;
  width: 100%;
  padding: 5% 10%;
}
@media screen and (max-width: 767px) {
  .bystay, .bystay-other {
    padding: 5% 5%;
  }
}
.bystay-lead, .bystay-other-lead {
  text-align: left;
  padding: 5rem 0 5rem;
  text-align: center;
}
.bystay-lead h4, .bystay-other-lead h4 {
  font-weight: normal;
  font-size: 3rem;
  color: var(--bystay-color);
}
@media screen and (max-width: 767px) {
  .bystay-lead h4, .bystay-other-lead h4 {
    font-size: 2.4rem;
  }
}
.bystay-block, .bystay-other-block {
  /*&-text::before{
   @include c.fontEn();
   font-size: 9rem;
   display: inline-flex;
   padding: 0.1em;
   margin-bottom: 0.8rem;
   justify-content: center;
   position: absolute;
   line-height: 1;
   align-items: center;
   color: var(--bystay-color);
   right: 0;
   top: -0.5em;
   @include c.mq(){
  	font-size: 3rem;
  	margin-bottom: 0.2rem;
  	top: 0;
  	position: relative;

  }

  }*/
}
@media screen and (max-width: 767px) {
  .bystay-block, .bystay-other-block {
    padding: 0.5rem;
  }
}
.bystay-block a, .bystay-other-block a {
  text-decoration: none;
}
.bystay-block-text .bystay-id, .bystay-other-block-text .bystay-id {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 4rem !important;
  display: inline-flex;
  padding: 0.1em;
  margin-bottom: 0.8rem;
  justify-content: center;
  position: absolute;
  line-height: 1;
  /* opacity: .3; */
  align-items: center;
  color: var(--bystay-color);
  right: 0;
  top: -0.5em;
  width: 1.1em;
  height: 1.1em;
  background: #f6f8f7;
}
@media screen and (max-width: 767px) {
  .bystay-block-text .bystay-id, .bystay-other-block-text .bystay-id {
    font-size: 4.5rem !important;
    margin-bottom: 0.2rem;
    top: 0;
    margin-left: auto;
    position: relative;
  }
}
.bystay-block-text, .bystay-other-block-text {
  font-size: 1.4rem;
  text-align: left;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  background: #f6f8f7;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bystay-block-text, .bystay-other-block-text {
    margin-top: -2rem;
    width: auto;
    bottom: 0;
    padding: 0.3em;
    background: transparent;
  }
}
.bystay-block-text h5, .bystay-block-text p, .bystay-other-block-text h5, .bystay-other-block-text p {
  width: 100%;
  text-align: left;
}
.bystay-block-text p, .bystay-other-block-text p {
  line-height: 1.5;
  color: #525252;
}
@media screen and (max-width: 767px) {
  .bystay-block-text p, .bystay-other-block-text p {
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  .bystay-block-text p br, .bystay-other-block-text p br {
    display: none;
  }
}
.bystay-block-text p small, .bystay-other-block-text p small {
  font-size: 10px;
}
.bystay-block-text h5, .bystay-other-block-text h5 {
  font-size: 2.5em;
  font-weight: normal;
  margin-bottom: 0.8rem;
  line-height: 1.5;
  color: var(--bystay-color);
}
@media screen and (max-width: 767px) {
  .bystay-block-text h5, .bystay-other-block-text h5 {
    font-size: 1.3em;
  }
}
.bystay-block-text h5 span, .bystay-other-block-text h5 span {
  color: var(--bystay-color02);
}
.bystay-block-text p.caption, .bystay-other-block-text p.caption {
  font-size: 1.2rem !important;
}
.bystay-block-text p:not(.en), .bystay-other-block-text p:not(.en) {
  font-size: 1em;
}
.bystay-block .list-tgl-btn, .bystay-other-block .list-tgl-btn {
  margin-top: 2em;
  font-size: 1.2rem !important;
  border-radius: 3rem;
  display: inline-block;
  width: auto;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--bystay-color);
  white-space: nowrap;
  margin-top: auto;
  padding: 1em;
}
.bystay-block .list-tgl-btn::before, .bystay-other-block .list-tgl-btn::before {
  content: "- ";
}
.bystay-block ul.list, .bystay-other-block ul.list {
  list-style: none;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem;
  margin: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
}
.bystay-block ul.list.show, .bystay-other-block ul.list.show {
  display: inline-flex !important;
}
.bystay-block ul.list li, .bystay-other-block ul.list li {
  font-size: 1.4rem;
  width: 100%;
}
.bystay-block ul.list li a, .bystay-other-block ul.list li a {
  text-decoration: none;
  padding: 0.2em 0.5em;
  display: inline-block;
  margin: 0.3em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: opacity 0.5s;
}
.bystay-block ul.list li a, .bystay-block ul.list li a:link, .bystay-block ul.list li a:visited, .bystay-other-block ul.list li a, .bystay-other-block ul.list li a:link, .bystay-other-block ul.list li a:visited {
  color: #333;
}
.bystay-block ul.list li a:hover, .bystay-block ul.list li a:active, .bystay-other-block ul.list li a:hover, .bystay-other-block ul.list li a:active {
  text-decoration: none;
  color: #333;
}
.bystay-block ul.list li a:hover, .bystay-other-block ul.list li a:hover {
  opacity: 0.5;
}
.bystay-block ul.list li a::before, .bystay-other-block ul.list li a::before {
  content: "-";
}
.bystay .block-wrapper, .bystay-other .block-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper, .bystay-other .block-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}
.bystay .block-wrapper .bystay-block, .bystay-other .block-wrapper .bystay-block {
  margin-bottom: 20px;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper .bystay-block, .bystay-other .block-wrapper .bystay-block {
    aspect-ratio: auto;
    margin-bottom: 10px;
    background: transparent;
  }
}
.bystay .block-wrapper .bystay-block .comminsoon, .bystay-other .block-wrapper .bystay-block .comminsoon {
  position: relative;
}
.bystay .block-wrapper .bystay-block .comminsoon::before, .bystay-other .block-wrapper .bystay-block .comminsoon::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.bystay .block-wrapper .bystay-block .comminsoon h5, .bystay-other .block-wrapper .bystay-block .comminsoon h5 {
  opacity: 0.7;
}
.bystay .block-wrapper .bystay-block .comminsoon h5::after, .bystay-other .block-wrapper .bystay-block .comminsoon h5::after {
  display: block;
  font-size: 0.6em;
  text-align: center;
  content: "comming soon";
}
.bystay .block-wrapper .bystay-block a, .bystay .block-wrapper .bystay-block .comminsoon, .bystay-other .block-wrapper .bystay-block a, .bystay-other .block-wrapper .bystay-block .comminsoon {
  display: inline-block;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper .bystay-block a, .bystay .block-wrapper .bystay-block .comminsoon, .bystay-other .block-wrapper .bystay-block a, .bystay-other .block-wrapper .bystay-block .comminsoon {
    display: flex;
    flex-direction: column;
  }
}
.bystay .block-wrapper .bystay-block a > figure, .bystay .block-wrapper .bystay-block .comminsoon > figure, .bystay-other .block-wrapper .bystay-block a > figure, .bystay-other .block-wrapper .bystay-block .comminsoon > figure {
  transition: all 0.5s;
  content: "";
  display: block;
  width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper .bystay-block a > figure, .bystay .block-wrapper .bystay-block .comminsoon > figure, .bystay-other .block-wrapper .bystay-block a > figure, .bystay-other .block-wrapper .bystay-block .comminsoon > figure {
    height: auto;
    position: relative;
  }
}
.bystay .block-wrapper .bystay-block a > figure img, .bystay .block-wrapper .bystay-block .comminsoon > figure img, .bystay-other .block-wrapper .bystay-block a > figure img, .bystay-other .block-wrapper .bystay-block .comminsoon > figure img {
  object-fit: cover;
  aspect-ratio: 1.3;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper .bystay-block a > figure img, .bystay .block-wrapper .bystay-block .comminsoon > figure img, .bystay-other .block-wrapper .bystay-block a > figure img, .bystay-other .block-wrapper .bystay-block .comminsoon > figure img {
    height: auto;
    aspect-ratio: 1.5;
    position: relative;
  }
}
.bystay .block-wrapper .bystay-block a > h5, .bystay .block-wrapper .bystay-block .comminsoon > h5, .bystay-other .block-wrapper .bystay-block a > h5, .bystay-other .block-wrapper .bystay-block .comminsoon > h5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.1em 0.5em;
  background: #fff;
  font-size: 1.43rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: 2em;
  font-weight: normal;
  transition: all 0.5s;
  margin-bottom: 0.8rem;
  line-height: 1.5;
  color: var(--bystay-color);
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .bystay .block-wrapper .bystay-block a > h5, .bystay .block-wrapper .bystay-block .comminsoon > h5, .bystay-other .block-wrapper .bystay-block a > h5, .bystay-other .block-wrapper .bystay-block .comminsoon > h5 {
    font-size: 1.3em;
  }
}
.bystay .block-wrapper .bystay-block a > h5 span, .bystay .block-wrapper .bystay-block .comminsoon > h5 span, .bystay-other .block-wrapper .bystay-block a > h5 span, .bystay-other .block-wrapper .bystay-block .comminsoon > h5 span {
  transition: all 0.5s;
  color: var(--bystay-color02);
}
.bystay .block-wrapper .bystay-block a > h5 small, .bystay .block-wrapper .bystay-block .comminsoon > h5 small, .bystay-other .block-wrapper .bystay-block a > h5 small, .bystay-other .block-wrapper .bystay-block .comminsoon > h5 small {
  color: var(--bystay-color);
  font-size: 0.6em;
}
.bystay .block-wrapper .bystay-block a:hover figure, .bystay-other .block-wrapper .bystay-block a:hover figure {
  transform: scale(1.05);
}
.bystay .block-wrapper .bystay-block a:hover h5, .bystay-other .block-wrapper .bystay-block a:hover h5 {
  background: var(--bystay-color02);
  color: #fff;
}
.bystay .block-wrapper .bystay-block a:hover h5 span, .bystay-other .block-wrapper .bystay-block a:hover h5 span {
  color: #fff;
}

.bystay .bystay-block {
  width: calc((100% - 40px) / 3);
}
.bystay .bystay-block:not(:nth-of-type(3n)) {
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  .bystay .bystay-block {
    width: calc((100% - 10px) / 2);
  }
  .bystay .bystay-block:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .bystay .bystay-block:not(:nth-of-type(2n)) {
    margin-right: 10px;
  }
}

.bystay-other .bystay-block {
  width: calc((100% - 10px) / 3);
}
.bystay-other .bystay-block:not(:nth-of-type(3n)) {
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .bystay-other .bystay-block {
    width: calc((100% - 5px) / 2);
  }
  .bystay-other .bystay-block:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .bystay-other .bystay-block:not(:nth-of-type(2n)) {
    margin-right: 5px;
  }
}
.bystay-other .bystay-block-text h5 {
  font-size: 1.6rem;
}
.bystay-other .bystay-block-text .bystay-id {
  font-size: 6rem !important;
}
.bystay-other .bystay-block .bystay-id {
  display: none;
}

.bystay-content .bystay-list .bystay-mv > div {
  width: 100%;
}
.bystay-content .bystay-list .bystay-mv figure {
  width: 100%;
}
.bystay-content .bystay-list .bystay-mv figure img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4;
}
@media screen and (max-width: 767px) {
  .bystay-content .bystay-list .bystay-mv figure img {
    aspect-ratio: 1.5;
  }
}
.bystay-content .bystay-list .bystay-mv-text {
  margin-top: 10rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .bystay-content .bystay-list .bystay-mv-text {
    margin-top: 5rem;
  }
}
.bystay-content .bystay-list .bystay-mv-text h2, .bystay-content .bystay-list .bystay-mv-text p {
  width: 100%;
  text-align: left;
}
.bystay-content .bystay-list .bystay-mv-text p {
  line-height: 1.5;
  text-align: center;
  text-align: center;
}
.bystay-content .bystay-list .bystay-mv-text p small {
  font-size: 10px;
}
.bystay-content .bystay-list .bystay-mv-text h2 {
  font-weight: normal;
  margin-bottom: 0.8rem;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 2rem;
  width: auto;
  font-size: 1.6em;
  /*
  margin-top: -8em;
  font-size: 2.2em;
  writing-mode: tb-rl;
  color: #fff;
  width: auto;*/
}
@media screen and (max-width: 767px) {
  .bystay-content .bystay-list .bystay-mv-text h2 {
    font-size: 1.3em;
  }
}
.bystay-content .bystay-list .bystay-mv-text h2 span {
  color: var(--bystay-color02);
}
.bystay-content .bystay-list .bystay-mv-text h2 small {
  color: var(--bystay-color);
  font-size: 0.6em;
}
.bystay-content .bystay-list .bystay-mv-text p.caption {
  font-size: 1.2rem !important;
}

.bystay-list {
  padding-top: 3rem;
  margin: 0 auto;
  width: 100%;
}
.bystay-list > div .list-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5rem 0;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}
@media screen and (max-width: 767px) {
  .bystay-list > div .list-inner {
    height: auto;
    width: 100%;
    padding-top: 2rem;
  }
}
.bystay-list > div ul {
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
@media screen and (max-width: 767px) {
  .bystay-list > div ul {
    width: 100%;
    padding: 1rem;
  }
}
.bystay-list > div ul li a {
  position: relative;
  z-index: 0;
}
.bystay-list > div ul li a::before {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  font-size: 1.4rem;
  padding: 0.3em 1em;
  z-index: 1;
  white-space: nowrap;
}
.bystay-list > div ul li.bath-zou a::before {
  content: "造作風呂";
  background: #b1ae77;
  color: #fff;
}
.bystay-list > div ul li.bath-normal a::before {
  content: "ユニットバス";
  background: #87abae;
  color: #fff;
}
.bystay-list > div ul li a {
  width: 100%;
  font-size: 1.4rem;
  display: inline-block;
  text-decoration: none;
  transition: all 0.5s;
  align-items: center;
}
.bystay-list > div ul li a, .bystay-list > div ul li a:link, .bystay-list > div ul li a:visited {
  color: black;
}
.bystay-list > div ul li a:hover, .bystay-list > div ul li a:active {
  text-decoration: none;
  color: black;
}
@media screen and (max-width: 767px) {
  .bystay-list > div ul li a {
    padding: 0 0 0.5em 0;
  }
}
.bystay-list > div ul li a:hover {
  opacity: 0.5;
}
.bystay-list > div ul li a p {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  padding: 0.3em 0 0.5em;
}
.bystay-list > div ul li a figure img {
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
}
.bystay-list > div ul:not(.bath-unit) li {
  width: calc((100% - 10px) / 3);
}
.bystay-list > div ul:not(.bath-unit) li:not(:nth-of-type(3n)) {
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .bystay-list > div ul:not(.bath-unit) li {
    width: calc((100% - 5px) / 2);
  }
  .bystay-list > div ul:not(.bath-unit) li:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .bystay-list > div ul:not(.bath-unit) li:not(:nth-of-type(2n)) {
    margin-right: 5px;
  }
}
.bystay-list > div ul.bath-unit {
  margin-top: 5rem;
}
.bystay-list > div ul.bath-unit li {
  width: calc((100% - 15px) / 4);
}
.bystay-list > div ul.bath-unit li:not(:nth-of-type(4n)) {
  margin-right: 5px;
}
@media screen and (max-width: 767px) {
  .bystay-list > div ul.bath-unit li {
    width: calc((100% - 10px) / 3);
  }
  .bystay-list > div ul.bath-unit li:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .bystay-list > div ul.bath-unit li:not(:nth-of-type(3n)) {
    margin-right: 5px;
  }
}

.bystay-onsen-lead {
  font-size: 3rem;
  text-align: center;
  width: 100%;
  margin-bottom: 0.5em;
}

.single .basic-title .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  display: flex;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .single .basic-title .inner {
    flex-wrap: wrap;
  }
}
.single .basic-title h3 {
  font-size: 2.4rem;
  margin-top: 0.6em;
}
@media screen and (max-width: 767px) {
  .single .basic-title h3 {
    font-size: 1.8rem;
  }
}
.single .basic-title p {
  font-size: 5.4rem;
  margin-right: 1.5rem;
}
@media screen and (max-width: 767px) {
  .single .basic-title p {
    font-size: 3.4rem;
  }
}
.single .basic-title .ja {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
}
.single .basic-title .en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
.single .basic-title h3, .single .basic-title p {
  line-height: 1;
  color: #333;
}
.single .title-bg {
  background: #333;
  color: #fff;
  width: 100% !important;
  max-width: none;
  padding: 6% 0 6% 0;
}
.single .title-bg h3 {
  color: #fff;
}

.top-contents.top-food {
  background: #fff;
  width: 100%;
  padding: 5% 0;
  margin: 0 auto;
  overflow: hidden;
}
.top-contents.top-food .section-title {
  margin-bottom: 1em;
}
.top-contents.top-food .top-food-inner {
  display: flex;
  flex-wrap: wrap;
}
.top-contents.top-food .top-food-inner .more a {
  display: inline-block;
  border: 1px solid #ddd;
}
.top-contents.top-food .top-food-inner a {
  text-decoration: none;
}
.top-contents.top-food .top-food-inner > div {
  width: 50%;
  padding: 1rem;
  transition: all 1.8s;
  opacity: 0;
}
.top-contents.top-food .top-food-inner > div:nth-of-type(1) {
  transition-delay: calc(500ms + (100ms * 1));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(2) {
  transition-delay: calc(500ms + (100ms * 2));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(3) {
  transition-delay: calc(500ms + (100ms * 3));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(4) {
  transition-delay: calc(500ms + (100ms * 4));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(5) {
  transition-delay: calc(500ms + (100ms * 5));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(6) {
  transition-delay: calc(500ms + (100ms * 6));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(7) {
  transition-delay: calc(500ms + (100ms * 7));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(8) {
  transition-delay: calc(500ms + (100ms * 8));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(9) {
  transition-delay: calc(500ms + (100ms * 9));
}
.top-contents.top-food .top-food-inner > div:nth-of-type(10) {
  transition-delay: calc(500ms + (100ms * 10));
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-inner > div {
    width: 100%;
  }
}
.top-contents.top-food .top-food-inner > div > a {
  display: flex;
  align-items: stretch;
}
.top-contents.top-food .top-food-inner > div p {
  width: 40%;
  font-size: 3rem;
  line-height: 1.1;
  padding: 1em;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: #333;
  color: #fff;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-inner > div p {
    font-size: 2rem;
    width: 50%;
    padding: 0.5em;
  }
}
.top-contents.top-food .top-food-inner > div figure {
  display: inline-block;
  width: 60%;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-inner > div figure {
    width: 50%;
  }
}
.top-contents.top-food .top-food-inner > div img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-inner > div img {
    aspect-ratio: 1.4;
  }
}
.top-contents.top-food .top-food-inner > div:nth-of-type(odd) {
  transform: translateX(-70%);
}
.top-contents.top-food .top-food-inner > div:nth-of-type(even) {
  transform: translateX(70%) translateY(5rem);
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-inner > div:nth-of-type(even) {
    transform: translateX(70%) translateY(0);
  }
}
.top-contents.top-food .top-food-inner > div:nth-of-type(even) figure {
  order: -1;
}
.top-contents.top-food .top-food-bbq {
  margin-top: 7rem;
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 1s;
  opacity: 0;
  transform: translateY(5rem);
  transition-delay: 1000ms;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-bbq {
    margin-top: 0;
    padding: 1rem;
  }
}
.top-contents.top-food .top-food-bbq a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-decoration: none;
  color: #333;
}
.top-contents.top-food .top-food-bbq figure {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-bbq figure {
    width: 50%;
  }
}
.top-contents.top-food .top-food-bbq figure img {
  object-fit: cover;
  aspect-ratio: 2.5;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-bbq figure img {
    aspect-ratio: 2;
  }
}
.top-contents.top-food .top-food-bbq .top-food-bbq-title-text {
  font-size: 3.6rem;
  padding: 2rem;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .top-food-bbq .top-food-bbq-title-text {
    width: 50%;
    font-size: 2.8rem;
  }
}
.top-contents.top-food .more {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 8rem auto 3rem;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .more {
    margin: 3rem auto 3rem;
  }
}
.top-contents.top-food .more a {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #333;
  padding: 0.8em 2rem;
  text-align: center;
  font-size: 2rem;
  color: #333;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .top-contents.top-food .more a {
    font-size: 1.8rem;
  }
}
.top-contents.top-food .more a:hover {
  background: #333;
  color: #fff;
}
.top-contents.top-food .more a .limited {
  font-size: 0.7em;
}
.top-contents.top-food .more a b {
  font-size: 1.2em;
}

.is-anm .top-food-bbq {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.is-anm .top-food-inner > div {
  opacity: 1 !important;
}
.is-anm .top-food-inner > div:nth-of-type(odd) {
  transform: translateX(0) !important;
}
.is-anm .top-food-inner > div:nth-of-type(even) {
  transform: translateX(0) translateY(5rem) !important;
}
@media screen and (max-width: 767px) {
  .is-anm .top-food-inner > div:nth-of-type(even) {
    transform: translateX(0) translateY(0) !important;
  }
}

.top-contents.top-bnr {
  width: 86%;
  padding: 5% 0;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top-contents.top-bnr .section-title {
  margin-bottom: 1em;
}
.top-contents.top-bnr > div {
  margin-bottom: 20px;
  width: 49%;
}
@media screen and (max-width: 767px) {
  .top-contents.top-bnr > div {
    width: 100%;
  }
}
.top-contents.top-bnr > div a {
  display: inline-block;
}

.top-contents.hotels-bnr {
  width: 86%;
  padding: 0 0 5%;
  max-width: 1400px;
  margin: 0 auto;
}
.top-contents.hotels-bnr h3 {
  margin-bottom: 1em;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.top-contents.hotels-bnr .hotels-bnr-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div {
  margin-bottom: 20px;
  width: 49%;
}
@media screen and (max-width: 767px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div {
    width: 100%;
  }
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  transition: all 0.8s;
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div a {
  width: 100%;
  display: flex;
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 1em;
  aspect-ratio: 2250/620;
  justify-content: flex-start;
  align-content: flex-end;
  align-items: flex-end;
  text-decoration: none;
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div a, .top-contents.hotels-bnr .hotels-bnr-wrap > div a:link, .top-contents.hotels-bnr .hotels-bnr-wrap > div a:visited {
  color: #fff;
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div a:hover, .top-contents.hotels-bnr .hotels-bnr-wrap > div a:active {
  text-decoration: none;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a {
    aspect-ratio: 2250/820;
  }
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 39px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 15px #000;
}
@media screen and (max-width: 1199px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
    font-size: 3.51vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
    font-size: 8.775vw;
  }
}
@media screen and (max-width: 767px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    line-height: 1;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .top-contents.hotels-bnr .hotels-bnr-wrap > div a p {
    font-size: 6.75vw;
  }
}
.top-contents.hotels-bnr .hotels-bnr-wrap > div a:hover img {
  transform: translateY(-50%) scale(1.08);
}

/*
.bg-dots{
	background-image: radial-gradient(c.$color-cb 4px, transparent 0px), radial-gradient(c.$color-cb-pink 4px, transparent 0px);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
}*/
.bg-dots {
  position: relative;
  z-index: 0;
  background: transparent !important;
  overflow: hidden;
}
.bg-dots::before {
  z-index: -1;
  content: "";
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.5s;
  display: block;
  width: 100%;
  height: 130%;
  position: absolute;
  top: 5%;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(145px 150px, #b36289 20%, transparent 20%), radial-gradient(400px 390px, #4abab3 20%, transparent 20%), radial-gradient(500px 495px, #b36289 20%, transparent 20%), radial-gradient(200px 190px, #b36289 20%, transparent 20%), radial-gradient(375px 375px, #4abab3 20%, transparent 20%), radial-gradient(50px 50px, #b36289 20%, transparent 20%);
  background-size: 1130px 1180px, 810px 910px, 1470px 990px, 1200px 1700px, 1520px 1200px, 1100px 1300px;
  background-position: -300px -550px, -200px 100px, 50px 510px, -200px -550px, -180px -250px, 130px -150px;
}
@media screen and (max-width: 767px) {
  .bg-dots::before {
    background-image: radial-gradient(115px 120px, #b36289 20%, transparent 20%), radial-gradient(300px 300px, #4abab3 20%, transparent 20%), radial-gradient(400px 395px, #b36289 20%, transparent 20%), radial-gradient(100px 100px, #b36289 20%, transparent 20%), radial-gradient(275px 275px, #4abab3 20%, transparent 20%), radial-gradient(20px 20px, #b36289 20%, transparent 20%);
    background-size: 630px 680px, 510px 610px, 1170px 690px, 900px 1400px, 1120px 800px, 800px 1000px;
    background-position: -300px -550px, -200px 100px, 50px 510px, -200px -550px, -180px -250px, 130px -150px;
  }
}
.bg-dots.is-anm::before {
  opacity: 0.2;
  top: 0;
}

:root {
  --contents-margin: 5rem;
}

.bystay-lay01 {
  font-size: 1.6rem;
}
.bystay-lay01-main {
  width: 100%;
  margin-bottom: 8rem;
}
.bystay-lay01-main figure {
  width: 100%;
}
.bystay-lay01-main figure img {
  object-fit: cover;
  aspect-ratio: 2;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay-lay01-main figure img {
    aspect-ratio: 1.2;
  }
}
.bystay-lay01-mainfull {
  width: 100%;
  margin-bottom: 8rem;
}
.bystay-lay01-mainfull figure {
  width: 100%;
}
.bystay-lay01-mainfull figure img {
  object-fit: cover;
  aspect-ratio: auto;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay-lay01-mainfull figure img {
    aspect-ratio: auto;
  }
}
.bystay-lay01-lead {
  text-align: center;
  margin-bottom: 8rem;
}
.bystay-lay01-lead-titlesub {
  font-size: 1.2em;
  margin-bottom: 0.5rem;
}
.bystay-lay01-lead-title {
  font-size: 2em;
  margin-bottom: 1.5rem;
}
.bystay-lay01-lead-text {
  font-size: 1.4em;
}
.bystay-lay01-content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.bystay-lay01-content > div {
  margin-bottom: var(--contents-margin);
}
.bystay-lay01-content-pic-col2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.bystay-lay01-content-pic-col2 figure {
  margin-bottom: 0.5rem;
}
.bystay-lay01-content-pic-col2--block {
  width: 49%;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .bystay-lay01-content-pic-col2--block {
    width: 100%;
  }
}
.bystay-lay01-content .block-title {
  font-size: 1.2em;
  text-align: center;
}
.bystay-lay01-content .block-text {
  font-size: 1.2em;
}
.bystay-lay01-content .pic-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.bystay-lay01-content .pic-2 figure {
  width: 100%;
}
.bystay-lay01-content .pic-2 figure img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay-lay01-content .pic-2 figure img {
    aspect-ratio: 1;
  }
}
.bystay-lay01-content .pic-2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.bystay-lay01-content .pic-2 figure {
  width: calc((100% - 5px) / 2);
}
.bystay-lay01-content .pic-2 figure img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .bystay-lay01-content .pic-2 figure img {
    aspect-ratio: 1;
  }
}
.bystay-lay01 img {
  aspect-ratio: 2;
  object-fit: cover;
  width: 100%;
}
.bystay-lay01 img.ar-2 {
  aspect-ratio: 2;
}
@media screen and (max-width: 767px) {
  .bystay-lay01 img.ar-2 {
    aspect-ratio: 2;
  }
}
.bystay-lay01 img.ar-3 {
  aspect-ratio: 3;
}
.bystay-lay01 img.ar-15 {
  aspect-ratio: 1.5;
}
.bystay-lay01 .icon img {
  aspect-ratio: auto;
}
.bystay-lay01 .cta {
  width: 100%;
  text-align: center;
}
.bystay-lay01 .cta a {
  display: inline-block;
  padding: 0.5em 3em;
  background: #000;
  text-decoration: none;
  color: #fff;
  font-size: 2.2rem;
  transition: all 0.5s;
}
.bystay-lay01 .cta a:hover {
  opacity: 0.7;
}
.bystay-lay01 .caption {
  margin-top: 5rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.bystay-lay01 .caption ul {
  list-style: none;
}

.manga-list-title {
  font-size: 1.8em;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.manga-list {
  padding: 1rem;
}
.manga-list ul {
  list-style: none;
  column-count: 3;
}
@media screen and (max-width: 767px) {
  .manga-list ul {
    column-count: 2;
  }
}
.manga-list ul li {
  padding: 0.3em 0;
  font-size: 1em;
}
@media screen and (max-width: 767px) {
  .manga-list ul li {
    font-size: 1rem;
  }
}

.access-flow {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.access-flow-block {
  margin-bottom: 5rem;
}
.access-flow-block > p {
  background: #98a8a8;
  padding: 0.7em;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 3rem;
}
.access-flow-block img {
  width: 100%;
}

.map-all {
  width: 100%;
  background: #fff;
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.map-all figure {
  width: 100%;
  max-width: 1000px;
}
.map-all p {
  width: 100%;
  text-align: center;
  font-size: 3rem;
  padding: 1em 0 0.5em;
}
@media screen and (max-width: 767px) {
  .map-all p {
    font-size: 2rem;
  }
}

#section-top-slideimg .section-inner,
.infiniteslide_wrap {
  opacity: 0;
  transition: opacity 0.5s;
}

.loaded#section-top-slideimg .section-inner,
.loaded .infiniteslide_wrap {
  opacity: 1;
}

.slideimg-row-block {
  width: 200px;
}
@media screen and (max-width: 767px) {
  .slideimg-row-block {
    width: 140px;
  }
}
.slideimg-row-block figure img {
  aspect-ratio: 1.5;
  object-fit: cover;
}
.slideimg-row-block figure, .slideimg-row-block img {
  width: 100%;
}

.camp-bnr-fixed p {
  display: inline-block;
  width: 40%;
  min-width: 300px;
  position: fixed;
  right: 3%;
  bottom: 5%;
  z-index: 80;
}
@media screen and (max-width: 767px) {
  .camp-bnr-fixed p {
    bottom: 105px;
    right: 5%;
    left: 5%;
    width: 90%;
    margin: 0 auto;
  }
}
.camp-bnr-fixed-closebo {
  cursor: pointer;
  width: 10%;
  position: absolute;
  display: inline-block;
  right: -5%;
  z-index: 2;
  top: -3%;
}
@media screen and (max-width: 767px) {
  .camp-bnr-fixed-closebo {
    top: -23%;
  }
}
.camp-bnr-fixed-closebo img {
  width: 100%;
}

.reserve-section {
  width: 100%;
  background: #333;
  padding-top: 4rem;
  margin-top: -4rem;
}
.reserve-section .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 5rem 0;
}
.reserve-section .reserve-title {
  text-align: center;
  font-size: 2.6rem;
  color: #fff;
}
.reserve-section .reserve-c {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 3rem;
  text-align: center;
  font-size: 2rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .reserve-section .reserve-c {
    padding: 3rem 1rem;
  }
}
.reserve-section .reserve-c > div {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .reserve-section .reserve-c > div {
    width: 100%;
  }
}
.reserve-section .reserve-c > div a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.reserve-section .reserve-c .reserve-c-web {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 767px) {
  .reserve-section .reserve-c .reserve-c-web {
    border-right: none;
  }
}
.reserve-section .reserve-c .reserve-c-web a {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10rem;
  padding: 0.8em 4em;
  transition: all 0.5s;
}
@media screen and (max-width: 767px) {
  .reserve-section .reserve-c .reserve-c-web a {
    padding: 0.8em 1em;
    width: 100%;
    text-align: center;
  }
}
.reserve-section .reserve-c .reserve-c-web a:hover {
  background: #fff;
  color: #333;
}
.reserve-section .reserve-c .reserve-c-tel a {
  padding: 0.8em 4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .reserve-section .reserve-c .reserve-c-tel a {
    padding: 0.8em 0;
    width: 100%;
    text-align: center;
  }
}
.reserve-section .reserve-c .reserve-c-tel a b {
  font-size: 1.3em;
}

.reserve-navs {
  position: fixed;
  display: flex;
  align-items: stretch;
  z-index: 10;
  left: 0;
  bottom: 1rem;
  background: #fff;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
@media screen and (max-width: 767px) {
  .reserve-navs {
    left: 50%;
    width: 96%;
    transform: translateX(-50%);
  }
}
.reserve-navs .reserve-navs-title {
  width: 6rem;
  font-size: 1.6rem;
  padding: 0 0.5em;
  display: flex;
  background: #eee;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .reserve-navs .reserve-navs-title {
    width: 9rem;
    font-size: 1.2rem;
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .reserve-navs .reserve-navs-title br {
    display: none;
  }
}
.reserve-navs .reserve-navs-tel {
  width: 30%;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .reserve-navs .reserve-navs-tel {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.reserve-navs .reserve-navs-tel a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1;
  font-size: 1.6rem;
  background: #363636;
}
.reserve-navs .reserve-navs-tel a figure {
  margin-right: 0.3em;
  width: 1em;
}
@media screen and (max-width: 767px) {
  .reserve-navs .reserve-navs-btn {
    width: 70%;
    display: flex;
  }
}
@media screen and (max-width: 767px) {
  .reserve-navs .reserve-navs-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
  }
  .reserve-navs .reserve-navs-btn a span {
    width: 100%;
  }
  .reserve-navs .reserve-navs-btn a span:last-of-type {
    font-size: 0.8em;
    margin-top: 0.2em;
  }
}
.reserve-navs a {
  width: 100%;
  display: block;
  text-align: center;
  padding: 1em 1em;
  background: #464646;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  transition: opacity 0.5s;
}
.reserve-navs a:nth-of-type(1) {
  border-bottom: 1px solid #333;
}
@media screen and (max-width: 767px) {
  .reserve-navs a:nth-of-type(1) {
    border-bottom: none;
    border-right: 1px solid #333;
  }
}
@media screen and (max-width: 767px) {
  .reserve-navs a:nth-of-type(2) {
    border-right: 1px solid #333;
  }
}
@media screen and (max-width: 767px) {
  .reserve-navs a {
    width: 50%;
    padding: 1em 0;
    font-size: 1.4rem;
  }
}
.reserve-navs a:hover {
  opacity: 0.8;
}
.reserve-navs a span {
  white-space: nowrap;
  display: inline-block;
  padding: 0 0.1em;
}
.reserve-navs a span:last-of-type {
  font-size: 0.8em;
}

section.renpaku {
  padding-bottom: 5rem;
}

.renpaku-list-title {
  width: 100%;
  text-align: center;
  padding: 0.3em 0;
  font-size: 3rem;
  max-width: 1000px;
  margin: 8rem auto 3rem;
}
@media screen and (max-width: 767px) {
  .renpaku-list-title {
    margin: 8rem auto 3rem;
  }
}

.renpaku-cta {
  width: 90%;
  text-align: center;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  font-size: 2.2rem;
  padding: 1rem 0;
  background: #0368b7;
  color: #fff;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .renpaku-cta {
    border-bottom: none;
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .renpaku-cta span {
    width: 100%;
    text-align: center;
  }
}
.renpaku-cta a {
  display: inline-block;
  padding: 0 0.5em;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  transition: all 0.5s;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .renpaku-cta a {
    margin-top: 0.8rem;
    width: 100%;
    text-align: center;
    background: #333;
    color: #fff;
    font-size: 2.8rem;
    padding: 1rem 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .renpaku-cta a::before {
    content: "予約";
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 1rem;
    margin-right: 1rem;
    font-size: 0.8em;
  }
}
.renpaku-cta a:hover {
  opacity: 0.7;
}

.renpaku .reserve-navs, .renpaku .fixed-bnr {
  display: none !important;
}
.renpaku .bystay-lay01-lead .bystay-lay01-lead-text {
  width: 90%;
  margin: 0 auto;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .renpaku .bystay-lay01-lead .bystay-lay01-lead-text {
    text-align: justify;
  }
}
.renpaku .renpaku-cta-fixed {
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  position: fixed;
  display: flex;
  align-items: stretch;
  z-index: 10;
  bottom: 1rem;
  display: none;
  padding: 0 0.5em;
  text-decoration: none;
  color: #000;
  font-size: 5rem;
  transition: all 0.5s;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .renpaku .renpaku-cta-fixed {
    display: inline-block;
  }
}
.renpaku .renpaku-cta-fixed a {
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .renpaku .renpaku-cta-fixed a {
    margin-top: 0.8rem;
    width: 100%;
    text-align: center;
    background: #0368b7;
    color: #fff;
    font-size: 2rem;
    padding: 1.5rem 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .renpaku .renpaku-cta-fixed a::before {
    content: "連泊のご予約は";
    margin-right: 1rem;
    font-size: 0.8em;
  }
}
.renpaku .renpaku-cta-fixed-num {
  font-size: 1.4em;
}

.fixed-bnr {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 70%;
  max-width: 400px;
  z-index: 10;
}
.fixed-bnr .close {
  position: absolute;
  right: -0.5rem;
  top: -0.5rem;
  width: 10%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fixed-bnr {
    bottom: 8rem;
  }
}

.top-premium {
  position: relative;
  z-index: 1;
  background: url(../img/cmn/dark-bg.jpg) no-repeat center center/cover;
  padding: 5rem 0;
}
.top-premium-inner {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.top-premium-title {
  text-align: center;
  margin-bottom: 3rem;
}
.top-premium-title p {
  color: #DAD2BA;
  letter-spacing: 0.2em;
}
.top-premium-title p:nth-of-type(1) {
  font-size: 2rem;
}
.top-premium-title p:nth-of-type(1) {
  font-size: 1.4rem;
}
.top-premium-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top-premium-list > a {
  display: block;
  width: 47%;
  text-decoration: none;
  transition: opacity 0.5s;
  display: inline-block;
}
.top-premium-list > a:hover {
  opacity: 0.6;
}
@media screen and (max-width: 767px) {
  .top-premium-list > a {
    width: 100%;
    margin-bottom: 1rem;
  }
}
.top-premium-list > a figure {
  position: relative;
  display: inline-block;
}
.top-premium-list > a figure figcaption {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1.5rem;
  background: #DAD2BA;
  color: #070f21;
}
.top-premium img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 3;
}
.top-premium p {
  font-size: 2rem;
  letter-spacing: 0.2em;
  color: #DAD2BA;
}
.top-premium p small {
  font-size: 0.7em;
  margin-left: 0.5em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}

.linkbnr-area {
  position: relative;
}
.linkbnr-area--hills {
  left: 5px;
}
.linkbnr-area--sea {
  right: 5px;
}
.linkbnr-area a {
  display: inline-flex;
  position: absolute;
  bottom: 5px;
  width: calc(50% - 10px);
  border: none !important;
  text-align: center;
  font-size: 1.6rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 0.5em 0;
  transition: opacity 0.5s;
  border-radius: 10rem;
}
@media screen and (max-width: 767px) {
  .linkbnr-area a {
    font-size: 1.2rem;
    padding: 0.3em 0;
  }
}
.linkbnr-area a:hover {
  opacity: 0.8;
}
.linkbnr-area a.pink {
  background: #E758A1;
  color: #fff;
}
.linkbnr-area a.orange {
  background: #d16145;
  color: #fff;
}
.linkbnr-area a.darkgreen {
  background: #3f680d;
  color: #fff;
}
.linkbnr-area a.red {
  background: #be0544;
  color: #fff;
}

.top-fix-topic {
  width: 100%;
  background: #ffe0ff;
  position: relative;
  border-bottom: 1px solid #eee;
}
@media screen and (max-width: 767px) {
  .top-fix-topic {
    width: 85%;
    padding-left: 30px;
  }
}
.top-fix-topic-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.top-fix-topic-inner p {
  text-align: center;
  font-size: 14px;
  padding: 0.5em 0;
}
@media screen and (max-width: 767px) {
  .top-fix-topic-inner p {
    padding: 0.5em 0.5em;
    font-size: 12px;
    text-align: left;
  }
}
.top-fix-topic-close {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .top-fix-topic-close {
    left: 5px;
    right: auto;
  }
}
.top-fix-topic-close::before, .top-fix-topic-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  /* 棒の幅（太さ） */
  height: 20px;
  /* 棒の高さ */
  background: #333;
}
.top-fix-topic-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.top-fix-topic-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#video-container {
  position: relative;
  z-index: 0;
  width: 100%;
  /* height: 100%; */
  /* min-height: 100vh; */
  margin: 0 auto 3rem;
}
@media screen and (max-width: 767px) {
  #video-container {
    margin-bottom: 3rem;
  }
}

video {
  outline: none;
  border: none;
  filter: drop-shadow(0px 0px #000);
}
#video-sea, #video-hills {
  width: 100%;
}

#video-container video {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  /* height: 100%; */
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

#video-container .fade-out {
  opacity: 0;
}

#video1 {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#introMov {
  position: fixed;
  top: 0;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  z-index: 100;
}

#introMovCloud, #introMovCloudSp {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .mv .slick-dots {
    display: none !important;
  }
}

.present {
  text-align: center;
  margin: 5rem 0 0;
  font-size: 1.8rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.present p {
  padding: 0.5em 1em;
  text-align: center;
  background: #fff0f5;
  color: #be0543;
}
@media screen and (max-width: 767px) {
  .present {
    font-size: 1.4rem;
  }
}

.groupHotels .areaBnr {
  background: #101620 !important;
}

.hotel-footer {
  background: #101620;
  color: #fff;
}
.hotel-footer .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  text-align: center;
  padding: 8rem 0;
}
@media screen and (max-width: 767px) {
  .hotel-footer {
    flex-wrap: wrap;
    justify-content: center;
    background: none;
  }
}
.hotel-footer > div:not(:first-of-type) {
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  .hotel-footer > div:not(:first-of-type) {
    margin-left: 0;
  }
}
.hotel-footer a {
  text-decoration: none;
}
.hotel-footer a, .hotel-footer a:link, .hotel-footer a:visited {
  color: #fff;
}
.hotel-footer a:hover, .hotel-footer a:active {
  text-decoration: none;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .hotel-footer-info {
    display: none;
  }
}
.hotel-footer-info .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.hotel-footer-info h1 {
  width: 90%;
  margin: 0 auto 0;
  font-size: 2.2rem;
}
.hotel-footer-info h1 a {
  display: inline-block;
  text-align: center;
}
.hotel-footer-info h1 a img {
  width: 8em;
}
.hotel-footer-info h1 a span {
  display: block;
  font-size: 0.5em;
  margin-top: 0.5em;
  white-space: nowrap;
  color: #fff;
}
.hotel-footer-info-content {
  width: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  letter-spacing: 0;
}
@media screen and (max-width: 1199px) {
  .hotel-footer-info-content {
    font-size: 1.44vw;
  }
}
@media screen and (max-width: 767px) {
  .hotel-footer-info-content {
    font-size: 3.6vw;
  }
}
.hotel-footer-info-content-contact {
  width: 100%;
}
.hotel-footer-info-content-contact a {
  line-height: 1;
  text-decoration: none;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.6rem;
}
.hotel-footer-info-content-contact a, .hotel-footer-info-content-contact a:link, .hotel-footer-info-content-contact a:visited {
  color: #000;
}
.hotel-footer-info-content-contact a:hover, .hotel-footer-info-content-contact a:active {
  text-decoration: none;
  color: #000;
}
.hotel-footer-info-content-contact a span {
  display: inline-block;
}
.hotel-footer-info-content-contact a span.hotel-info-content-contact-02 {
  font-size: 1.3em;
  margin: 0 0.1em 0 0.3em;
}
.hotel-footer-info-content-contact a span.hotel-info-content-contact-03 {
  font-size: 0.8em;
}
.hotel-footer-info-content-contact-address {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5em;
}
.hotel-footer-info-content-contact-address p {
  width: 100%;
  text-align: center;
}
.hotel-footer-info-content-contact-sns {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.hotel-footer-info-content-contact-sns > a {
  margin: 0 10px;
  display: inline-block;
  width: 30px;
}

.hotel-footer-nav {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .hotel-footer-nav {
    display: none;
  }
}
.hotel-footer-nav ul {
  list-style: none;
  margin-bottom: 0.5em;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .hotel-footer-nav ul li {
    width: 100%;
    margin-right: 0;
  }
}
.hotel-footer-nav ul li:last-of-type {
  margin-right: 0;
}
.hotel-footer-nav ul li.nav-to-portal {
  padding-left: 1em;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 767px) {
  .hotel-footer-nav ul li.nav-to-portal {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
}
.hotel-footer-nav ul li a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
@media screen and (max-width: 1199px) {
  .hotel-footer-nav ul li a {
    font-size: 1.26vw;
  }
}
@media screen and (max-width: 767px) {
  .hotel-footer-nav ul li a {
    font-size: 3.15vw;
  }
}
.hotel-footer-nav ul li a, .hotel-footer-nav ul li a:link, .hotel-footer-nav ul li a:visited {
  color: #fff;
}
.hotel-footer-nav ul li a:hover, .hotel-footer-nav ul li a:active {
  text-decoration: none;
  color: #fff;
}
.hotel-footer-nav ul li a:hover {
  opacity: 0.5;
}
.hotel-footer-nav ul li a span {
  padding-left: 0.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .hotel-footer-nav ul li a {
    width: 100%;
    text-align: center;
  }
}
.hotel-footer-nav ul li.instagram a {
  display: inline-flex;
  align-items: center;
}
.hotel-footer-nav ul li.instagram img {
  width: 1.6em;
}
.hotel-footer-nav ul li:not(.instagram) a::before {
  content: "";
  display: block;
  height: 3px;
  width: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-135deg);
  margin-right: 0.5em;
}
.hotel-footer-nav a {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  text-decoration: none;
}
.hotel-footer-nav a, .hotel-footer-nav a:link, .hotel-footer-nav a:visited {
  color: #fff;
}
.hotel-footer-nav a:hover, .hotel-footer-nav a:active {
  text-decoration: none;
  color: #fff;
}

.plan-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}
.plan h4 {
  text-align: center;
  color: #2a2f31;
  margin-bottom: 1rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  letter-spacing: 0.1em;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}
@media screen and (max-width: 1199px) {
  .plan h4 {
    font-size: 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .plan h4 {
    font-size: 4.5vw;
  }
}
.plan .plan-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}
@media screen and (max-width: 767px) {
  .plan .plan-list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.plan .plan-block a {
  display: inline-block;
  width: 100%;
  transition: opacity 0.5s;
  text-decoration: none;
  color: #333;
}
.plan .plan-block a:hover {
  opacity: 0.8;
}
.plan .plan-block a p {
  margin-top: 0.5em;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  line-height: 1.3;
  letter-spacing: 0;
}
@media screen and (max-width: 1199px) {
  .plan .plan-block a p {
    font-size: 1.17vw;
  }
}
@media screen and (max-width: 767px) {
  .plan .plan-block a p {
    font-size: 2.925vw;
  }
}
@media screen and (max-width: 767px) {
  .plan .plan-block a p {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
  .plan .plan-block a p {
    font-size: 1.08vw;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .plan .plan-block a p {
    font-size: 2.7vw;
  }
}
.plan .plan-block img {
  width: 100%;
}

.bessou-list-wrap {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .bessou-list-wrap {
    display: block;
  }
}
.bessou-list-wrap .bessou-list-inner a {
  text-decoration: none;
  transition: opacity 0.5s;
}
.bessou-list-wrap .bessou-list-inner a, .bessou-list-wrap .bessou-list-inner a:link, .bessou-list-wrap .bessou-list-inner a:visited {
  color: #000;
}
.bessou-list-wrap .bessou-list-inner a:hover, .bessou-list-wrap .bessou-list-inner a:active {
  text-decoration: none;
  color: #000;
}
.bessou-list-wrap .bessou-list-inner a:hover {
  opacity: 0.7;
}
.bessou-list-wrap .bessou-list-text-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.bessou-list-wrap .bessou-list-text-inner .hotel-more span {
  padding: 0.5em 2em;
  background: #eee;
  border-radius: 10rem;
  display: inline-block;
  line-height: 1;
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1199px) {
  .bessou-list-wrap .bessou-list-text-inner .bessou-list-lead {
    font-size: 2.34vw;
  }
}
@media screen and (max-width: 767px) {
  .bessou-list-wrap .bessou-list-text-inner .bessou-list-lead {
    font-size: 5.85vw;
  }
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead h4 b {
  font-weight: normal;
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead h4 .main small {
  font-size: 0.7em;
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead h4 .sub {
  padding-left: 1em;
  font-size: 0.6em;
  letter-spacing: 0.1em;
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead h4 .sub small {
  padding-left: 0.5em;
  text-transform: uppercase;
}
.bessou-list-wrap .bessou-list-text-inner .bessou-list-lead .bessou-list-spec {
  font-size: 0.6em;
}
.bessou-list-wrap .bessou-list-img figure img {
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .bessou-list-wrap .bessou-list-img figure img {
    aspect-ratio: 1.4;
  }
}

.group-bnr .inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  text-align: center;
}
.group-bnr .inner a {
  max-width: 800px;
  display: inline-block;
  transition: opacity 0.5s;
}
.group-bnr .inner a:hover {
  opacity: 0.7;
}
.group-bnr .inner a figure {
  width: 100%;
}
.group-bnr .inner a figure img {
  width: 100%;
}
/*# sourceMappingURL=style.css.map */