@charset "UTF-8";
/*
Theme Name: SHIJIN-minamiaso
Theme URL: https://shijin-minamiaso.jp/
Description: 【公式】SHIJIN南阿蘇|熊本・阿蘇山麓のヴィラ・隠れ宿の公式ウェブサイトです。
Author: SHIJIN-minamiaso
Version: 1.0
Tags: 宿、ホテル、ヴィラ
License: SHIJIN-minamiaso
License URI: https://shijin-minamiaso.jp/
*/
/*70*/
.align-center {
  margin-left: auto;
  margin-right: auto;
}

/*hamburger menu--------------*/
.english-menu {
  position: fixed;
  color: white;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 7px;
  top: 110px;
  width: 56px;
  right: 65px;
  z-index: 1001;
  -webkit-box-pack: justify;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.english-menu:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  .english-menu {
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 5px;
    top: 98px;
    width: 55px;
    right: 7px;
  }
}

.hamburger-btn {
  position: fixed;
  top: 50px;
  right: 70px;
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}
@media (max-width: 768px) {
  .hamburger-btn {
    width: 36px;
    height: 36px;
    top: 44px;
    right: 26px;
  }
}
.hamburger-btn .line {
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: white;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}
.hamburger-btn .line:nth-child(1) {
  top: 6px;
}
.hamburger-btn .line:nth-child(2) {
  top: 20px;
}
.hamburger-btn .line:nth-child(3) {
  top: 34px;
}
.hamburger-btn.active .line:nth-child(1) {
  top: 22px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  background-color: black;
}
.hamburger-btn.active .line:nth-child(2) {
  display: none;
}
.hamburger-btn.active .line:nth-child(3) {
  top: 22px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  background-color: black;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.menu-overlay.show {
  opacity: 1;
  visibility: visible;
}

.menu-content {
  color: black;
  text-align: left;
  font-size: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 40px 80px;
  max-width: 600px;
  font-family: serif;
}
@media (max-width: 768px) {
  .menu-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .menu-item:nth-child(1) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .menu-item:nth-child(3) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .menu-item:nth-child(5) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .menu-item:nth-child(7) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .menu-item:nth-child(2) {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .menu-item:nth-child(4) {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  .menu-item:nth-child(6) {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
}
.menu-item {
  margin: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.menu-item:hover {
  opacity: 0.7;
}
.menu-item .main-text {
  font-size: 33px;
  font-family: serif;
  letter-spacing: 5px;
}
@media (max-width: 768px) {
  .menu-item .main-text {
    font-size: 24px;
    letter-spacing: 3px;
    text-align: center;
  }
}
.menu-item .sub-text {
  font-size: 14px;
  color: #666;
  font-family: serif;
  letter-spacing: 4px;
}
@media (max-width: 768px) {
  .menu-item .sub-text {
    font-size: 12px;
    letter-spacing: 3px;
    text-align: center;
  }
}

.menu-item-instagram {
  padding-top: 10px;
}
.menu-item-instagram img {
  width: 30px;
}
@media (max-width: 768px) {
  .menu-item-instagram {
    margin: 0 auto;
    width: 20px;
  }
}

.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.hero-section.title-section {
  height: 480px;
}
@media (max-width: 768px) {
  .hero-section.title-section {
    height: 200px;
  }
}
.hero-section.title-section .overlay .content img {
  width: 300px;
}
@media (max-width: 768px) {
  .hero-section.title-section .overlay .content img {
    width: 140px;
    display: block;
    margin: 0 auto;
  }
}
.hero-section .wrapper {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  height: 100vh;
  width: 100%;
}
.hero-section > .wrapper > .hero-slideshow > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 768px) {
  .hero-section > .wrapper > .hero-slideshow > img {
    -o-object-position: center;
       object-position: center;
  }
}
.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 10;
}
.hero-section .overlay .content img {
  width: 370px;
}
@media (max-width: 768px) {
  .hero-section .overlay .content img {
    width: 200px;
    display: block;
    margin: 0 auto;
  }
}

.hero-slideshow {
  width: 100%;
  height: 100%;
}
.hero-slideshow .slick-track {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.hero-slideshow .slick-slide {
  height: 100%;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero-slideshow .slick-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  display: block;
}

.slick-list {
  width: 100%;
  height: 100%;
}

.catch-section {
  width: 100vw;
  height: 100vh;
}

.pics3-section {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .pics3-section {
    height: 300px;
    margin-bottom: 25px;
  }
}
.pics3-section .col-4 {
  padding: 0;
}
.pics3-section .col-4 img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}
@media (max-width: 768px) {
  .pics3-section .col-4 img {
    height: 300px;
  }
}

.room-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 70px;
  padding-left: 100px;
  padding-top: 100px;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .room-section__title {
    padding-left: 0;
    padding-top: 0;
    margin-bottom: 70px;
    gap: 50px;
  }
  .room-section__title .hotel-list {
    margin-top: 0;
  }
  .room-section__title .hotel-list li {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 16px 0;
  }
  .room-section__title .hotel-list li span {
    padding-right: 20px;
  }
}

.room-section__content, .image-section__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.room-section__content div, .image-section__content div {
  /*margin-left: calc(50% - 50vw);*/
  margin-left: calc(41% - 30vw);
  overflow: hidden;
  border-radius: 0 20px 20px 0;
}
@media (max-width: 768px) {
  .room-section__content div, .image-section__content div {
    height: 300px;
    margin-left: calc(50% - 50vw);
  }
}
.room-section__content div img, .image-section__content div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .room-section__content div, .image-section__content div {
    max-height: 460px;
  }
}

@media (max-width: 768px) {
  .room-section .wrapper.wrapper--limited {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .room-section a {
    margin-left: auto;
    margin-right: auto;
  }
}

/*linkセクション*/
.link-section {
  text-align: center;
}
.link-section ul li {
  text-align: left;
}
@media (max-width: 768px) {
  .link-section h3 {
    margin-bottom: 10px;
  }
}

/* gradientセクション */
.gradient {
  background-color: hsl(182, 39%, 75%);
  background-image: radial-gradient(at 92% 10%, hsl(228, 37%, 81%) 0px, transparent 50%), radial-gradient(at 6% 94%, hsl(93, 50%, 45%) 0px, transparent 50%), radial-gradient(at 5% 5%, hsl(57, 78%, 67%) 0px, transparent 50%), radial-gradient(at 94% 94%, hsl(52, 70%, 77%) 0px, transparent 50%), radial-gradient(at 51% 56%, hsl(182, 40%, 75%) 0px, transparent 50%);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 100%;
}
@media (max-width: 768px) {
  .gradient {
    background-color: hsl(210, 60%, 82%);
    background-image: radial-gradient(at 4% 82%, hsl(128, 34%, 65%) 0px, transparent 50%), radial-gradient(at 12% 15%, hsl(92, 41%, 80%) 0px, transparent 50%), radial-gradient(at 65% 33%, hsl(210, 61%, 82%) 0px, transparent 50%), radial-gradient(at 93% 86%, hsl(107, 32%, 79%) 0px, transparent 50%);
    height: auto;
  }
}

.faqcontact-section .row .col-md-6 {
  padding: 0;
}
.faqcontact-section .button-white {
  width: 261.8px;
  height: 52px;
}
@media (max-width: 768px) {
  .faqcontact-section .button-white {
    height: 42px;
    border-radius: 10px;
  }
}
.faqcontact-section__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  text-align: center;
  text-decoration: none;
  color: white;
  background-size: cover;
  background-position: center;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.faqcontact-section__block:hover {
  opacity: 0.8;
}
.faqcontact-section__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  .faqcontact-section__inner {
    gap: 10px;
  }
}

.faqcontact-section_faq {
  background-image: url("../public/img/faq.jpg");
}
@media (max-width: 768px) {
  .faqcontact-section_faq {
    height: 260px;
    padding: 10vw;
  }
}

.faqcontact-section_contact {
  background-image: url("../public/img/contact.jpg");
}
@media (max-width: 768px) {
  .faqcontact-section_contact {
    height: 300px;
    padding: 10vw;
  }
}

.faqcontact-section_faq,
.faqcontact-section_contact {
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .faqcontact-section_faq h2,
  .faqcontact-section_contact h2 {
    font-size: 29px;
    letter-spacing: 4px;
    margin-bottom: 0;
  }
  .faqcontact-section_faq .subtitle,
  .faqcontact-section_contact .subtitle {
    color: #eee;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
  }
}

.faqcontact-section_faq {
  background: url("img/faq.jpg") center center/cover no-repeat;
}

.faqcontact-section_contact {
  background: url("img/contact.jpg") center center/cover no-repeat;
}

.faqcontact-section__block {
  position: relative;
  overflow: hidden;
}
.faqcontact-section__block::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.faqcontact-section__block .faqcontact-section__inner {
  position: relative;
  z-index: 2;
}

.stay-section {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
.stay-section .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media (max-width: 768px) {
  .stay-section .wrapper {
    gap: 50px;
  }
}
@media (max-width: 768px) {
  .stay-section .wrapper.wrapper--limited {
    padding: 50px 5vw 0 5vw;
  }
}
.stay-section h2, .stay-section .subtitle {
  text-align: center;
}

.plan-section--home {
  text-align: center;
  padding-top: 0;
}
.plan-section--home a {
  margin: 0 auto;
}

.list-4 {
  display: grid;
  grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  gap: 20px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .list-4 {
    display: block;
  }
  .list-4 .list-4-inner {
    margin-bottom: 20px;
  }
  .list-4 .list-4-inner:last-child {
    margin-bottom: 0;
  }
}
.list-4 .list-4-inner {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  border-radius: 10px;
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  color: #fff;
  font-size: 1.4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.list-4 .list-4-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  border-radius: inherit;
}
.list-4 .list-4-inner:hover::before {
  background: rgba(0, 0, 0, 0);
}
.list-4 .list-4-inner a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  padding: 10px 20px;
  z-index: 1;
}

.list-4-01 {
  background: url("img/plan-01.jpg") center center/cover no-repeat;
}

.list-4-02 {
  background: url("img/plan-02.jpg") center center/cover no-repeat;
}

.list-4-03 {
  background: url("img/plan-03.jpg") center center/cover no-repeat;
}

.list-4-04 {
  background: url("img/plan-04.jpg") center center/cover no-repeat;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.link-list p {
  text-align: justify;
  max-width: 800px;
}
.link-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 25px;
  position: relative;
}
.link-list li p:first-child {
  /*padding-left: 2em; */
  font-size: 24px;
  font-family: serif;
  margin-bottom: 10px;
  text-align: center;
}
@media (max-width: 768px) {
  .link-list li p:first-child {
    font-size: 18px;
    /*padding-left: 20px; */
    margin-bottom: 5px;
  }
}
.link-list li p:first-child a {
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.link-list li p:first-child a:hover {
  opacity: 0.7;
}
.link-list li p:first-child::before {
  content: "◯";
  position: relative;
  left: -2px;
  font-size: 1em;
  font-family: "Hiragino Sans", "Helvetica Neue", "Arial", sans-serif;
  font-weight: 100;
  color: #333;
}
@media (max-width: 768px) {
  .link-list li p:first-child::before {
    font-size: 16px;
    top: 0;
  }
}

.instagram-section {
  background: #F6F5E9;
  text-align: center;
}
.instagram-section a.button-black {
  margin: 0 auto;
}

.instagram-section .btn {
  margin-left: auto;
  margin-right: auto;
}

.information-section__content .row {
  margin-top: -20px;
}
.information-section__content div {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 70px;
  padding: 0 50px;
}
@media (max-width: 768px) {
  .information-section__content div {
    gap: 40px;
    padding: 5vw;
  }
  .information-section__content div .button-black {
    height: 46px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}
.information-section__content div a {
  margin: 0 auto;
}
.information-section__content div .instagram {
  margin-top: -30px;
}
.information-section__content div table {
  text-align: left;
  line-height: 1.8;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.information-section__content div table th {
  width: 8em;
  vertical-align: top;
  padding: 5px 0;
}
.information-section__content div table td {
  vertical-align: top;
  padding: 5px 0;
}
.information-section__content div table span {
  font-size: 12px;
}
@media (max-width: 768px) {
  .information-section__content div table {
    margin-bottom: 0;
  }
}
.information-section__content img {
  display: block;
  max-width: 274px;
  width: 100%;
  margin: 0 auto;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
@media (max-width: 768px) {
  .information-section__content img {
    max-width: 200px;
  }
}
.information-section__content img:hover {
  opacity: 0.7;
}

.information-section__images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media (max-width: 768px) {
  .information-section__images {
    margin-top: 70px;
    gap: 10px;
  }
}
.information-section__images div {
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
}
@media (max-width: 768px) {
  .information-section__images div {
    height: 300px;
    border-radius: 10px 0 0 10px;
  }
}
.information-section__images div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.information-section__images div iframe {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .information-section__images div {
    max-height: 460px;
  }
}

.about-section {
  text-align: center;
}
.about-section .button-black {
  margin-top: 50px;
  height: 42px;
  width: 210px;
  border-radius: 13px;
  font-size: 13px;
}

.about-section__content {
  position: relative;
}
.about-section__content .image-wrapper {
  margin-left: calc(100% - 50vw);
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}
.about-section__content .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-position: 50% center;
     object-position: 50% center;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 768px) {
  .about-section__content .image-wrapper {
    margin-left: calc(50% - 50vw);
    margin-bottom: 50px;
    border-radius: 13px;
    border-radius: 0 20px 20px 0;
  }
}

.about-section__text {
  text-align: left;
  font-size: 14px;
  padding-left: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 768px) {
  .about-section__text {
    padding-left: 0;
  }
}

/* wrapper */
.wrapper {
  max-width: 1080px;
  margin: 0 auto;
}

/* ROOM */
.room-section--room .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 70px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.room-section--room .wrapper .subtitle {
  text-align: center;
}
@media (max-width: 768px) {
  .room-section--room .wrapper {
    gap: 50px;
  }
}

.room-buttons {
  text-align: center;
}
.room-buttons a {
  display: inline-block;
  width: 350px;
  padding: 16px 16px;
  background: #F6F5E9;
  letter-spacing: 4px;
  border-radius: 10px;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.room-buttons a:hover {
  opacity: 0.7;
}
.room-buttons a:first-child {
  margin-right: 20px;
}
@media (max-width: 860px) {
  .room-buttons a:first-child {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
@media (max-width: 860px) {
  .room-buttons a {
    width: auto;
    margin-bottom: 10px;
    display: block;
  }
}

body.en .room-buttons a {
  letter-spacing: 2px;
}

/*#yusui--room h3 {
  border-color: #A1D6DC !important;
}
#moegi--room h3 {
  border-color: #E4E656 !important;
}
#rikka--room h3 { 
  border-color: #B9C3E4 !important;
}
#sokyu--room h3 {
  border-color: #61AA30 !important;
}
#kasui--room h3 {
  border-color: #E2DEB6 !important;
}*/
/* 各部屋の詳細セクション */
.roomdetail-section .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.roomdetail-section .inview-fadeup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 768px) {
  .roomdetail-section .inview-fadeup {
    gap: 30px;
  }
}
.roomdetail-section h3 {
  margin-bottom: 0;
  border-bottom: 2px solid #6fdcff;
  width: 100%;
  padding-bottom: 35px;
}
@media (max-width: 768px) {
  .roomdetail-section h3 {
    padding-bottom: 15px;
  }
}

.room_images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.roomdetail-section .room_text {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 50px;
}
@media (max-width: 768px) {
  .roomdetail-section .room_text {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 30px;
  }
  .roomdetail-section .room_text p {
    width: 100%;
  }
}
.roomdetail-section .room_text p.size-limit {
  width: 50%;
}
@media (max-width: 768px) {
  .roomdetail-section .room_text p.size-limit {
    width: 100%;
  }
}

.room_detail {
  width: 100%;
}

.room_images img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/10;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .room_images {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
}
/*.roomdetail-section p {
  max-width: 800px;
  text-align: justify;
}*/
/* FACILITYセクション */
.facility-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.facility-section .button-whiteblack {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .facility-section {
    padding: 0 5vw;
  }
  .facility-section button {
    text-align: center;
  }
  .facility-section button:first-child {
    margin-bottom: 20px;
  }
  .roomdetail-section {
    padding: 5vw;
  }
  .room_images {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
  .room_images img {
    width: 100%;
  }
  .sp {
    display: block;
  }
}
/* チェックイン/アウト リスト */
.room-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  border-top: 2px solid #A1D6DC;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .room-list {
    border-top: none;
  }
}

.room-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 26px 20px;
  border-bottom: 2px solid #A1D6DC;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  .room-list li {
    text-align: left;
    min-width: 200px;
  }
  .room-list li:first-child {
    border-top: 2px solid #A1D6DC;
  }
}

.room-list li:first-child {
  padding-right: 20px;
}
@media (max-width: 768px) {
  .room-list li:first-child {
    padding-right: 0;
  }
}

.room-date {
  font-weight: bold;
  width: 7em;
}

@media (max-width: 768px) {
  .room-list li {
    padding: 14px 0;
  }
  .room-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/* FACILITY リスト */
.facility-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 50px;
  border-top: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
  text-align: justify;
}
.facility-list span {
  display: inline-block;
  width: 8em;
}

.facility-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 70px 0;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
}
@media (max-width: 768px) {
  .facility-list li {
    padding: 30px 0;
  }
}
.facility-list li p {
  letter-spacing: 2px;
}
@media (max-width: 768px) {
  .facility-list li p {
    line-height: 2;
  }
}
.facility-list li:last-child {
  margin-bottom: 70px;
}
@media (max-width: 768px) {
  .facility-list li:last-child {
    margin-bottom: 30px;
  }
}

.facility-list li div p:first-child {
  font-size: 1.6em;
  font-family: serif;
  letter-spacing: 7px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .facility-list li div p:first-child {
    margin-bottom: 10px;
  }
}

body.en .facility-list li div p:first-child {
  letter-spacing: 4px;
}

.facility-list li div:nth-child(2), .facility-list li div:nth-child(3), .facility-list li div:nth-child(4) {
  margin-top: 50px;
}

/* spクラス */
.sp {
  display: none;
}

.stay-day-section {
  text-align: center;
}
.stay-day-section .wrapper.wrapper--limited {
  padding-bottom: 0;
  margin-bottom: 0;
}

.stay-section__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.stay-section__content div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 16px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-radius: 0 20px 20px 0;
}
@media (max-width: 768px) {
  .stay-section__content div {
    height: 200px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .stay-section__content div img {
    width: 50%;
  }
}
.stay-section__content div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .stay-section__content div img {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .stay-section__content div {
    max-height: 300px;
  }
}

.stay-top-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 100px;
}
@media (max-width: 768px) {
  .stay-top-text {
    gap: 0;
  }
}

.stay-detail-section--stay .stay-section__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 50px;
  text-align: left;
  font-size: 14px;
}
@media (max-width: 768px) {
  .stay-detail-section--stay .stay-section__text {
    margin-bottom: 50px;
    text-align: justify;
    padding-left: 0;
  }
}

.stay-grid-container {
  display: grid;
  /*width:50%;*/
  margin-left: calc(87% - 50dvw);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 10px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .stay-grid-container {
    margin-left: -20px;
    grid-auto-rows: auto;
    margin-bottom: 50px;
  }
}

.stay-grid-container1 {
  border-radius: 0 20px 0 0;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .stay-grid-container1 {
    margin-bottom: 50px;
  }
}

.stay-grid-container2 {
  border-radius: 0 0 20px 0;
}
@media (max-width: 768px) {
  .stay-grid-container2 {
    border-radius: 0 20px 0 0;
  }
}

.stay-grid-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* ここでトリミングして比率を崩さず収める */
}

/* 各画像のサイズ調整 */
.item1 {
  grid-column: span 2;
  grid-row: span 3;
} /* 木の道 */
.item2 {
  grid-column: span 1;
  grid-row: span 1;
} /* 屋根 */
.item3 {
  grid-column: span 1;
  grid-row: span 2;
} /* 2人の女性 */
.item4 {
  grid-column: span 1;
  grid-row: span 1.5;
} /* BBQ */
.item5 {
  grid-column: span 2;
  grid-row: span 1.5;
} /* 犬と女性 */
.item6 {
  grid-column: span 3;
  grid-row: span 1.5;
} /* コーヒー */
.plan-section--stay {
  text-align: center;
}
.plan-section--stay .button-whiteblack {
  height: 42px;
  width: 210px;
  border-radius: 13px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .plan-section--stay .button-whiteblack {
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.plan-section--stay .plan-section-text {
  padding-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 768px) {
  .plan-section--stay .plan-section-text {
    padding-left: 0;
  }
}
.plan-section--stay .plan-section-text p:first-child {
  font-size: 24px;
  font-family: "Noto Serif JP", serif;
  text-align: left;
  line-height: 1.6;
  margin: 10px 0;
}
@media (max-width: 768px) {
  .plan-section--stay .plan-section-text p:first-child {
    font-size: 20px;
  }
}
.plan-section--stay .plan-section-text p:nth-child(2) {
  text-align: justify;
  margin-bottom: 20px;
  font-size: 14px;
}

.plan-section .plan-section-images {
  aspect-ratio: 16/10;
  width: 50%;
  height: auto;
  background-size: cover;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .plan-section .plan-section-images {
    margin-bottom: 20px;
    width: 100%;
  }
}

.plan-section .row {
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .plan-section .row {
    margin-bottom: 40px;
  }
}
.plan-section .row:last-child {
  margin-bottom: 0;
}

.moreinfo-section {
  text-align: center;
}
@media (max-width: 768px) {
  .moreinfo-section h3 {
    margin-bottom: 0;
  }
}

.recommend-section {
  text-align: center;
}
.recommend-section .recommend-maintext {
  margin-bottom: 50px;
  max-width: 800px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .recommend-section .wrapper.wrapper--limited {
    padding-bottom: 0;
  }
  .recommend-section p {
    line-height: 2;
  }
}
.recommend-section .image-section__content {
  padding: 0;
}
.recommend-section .image-section__content div {
  height: auto;
  border-radius: 0 0 0 0;
  margin-left: calc(50% - 50vw);
}
@media (min-width: 768px) and (max-width: 1008px) {
  .recommend-section .image-section__content div {
    height: 600px;
  }
}
@media (max-width: 768px) {
  .recommend-section .image-section__content div {
    border-radius: 0 20px 0 0;
    margin-bottom: 20px;
    margin-top: 30px;
    height: 280px;
  }
}
.recommend-section .image-section__content div:first-child {
  margin-top: 0;
  max-height: none;
}
@media (min-width: 768px) and (max-width: 1008px) {
  .recommend-section .image-section__content div img {
    max-height: none;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 600px;
  }
}
@media (min-width: 1008px) {
  .recommend-section .image-section__content div img {
    max-height: 460px;
  }
}
.recommend-section .recommend-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: justify;
  font-size: 14px;
  padding-right: 0;
}
@media (max-width: 768px) {
  .recommend-section .recommend-text {
    margin-bottom: 50px;
    padding-left: 0;
  }
}
@media (max-width: 768px) {
  .recommend-section .recommend-text:last-child {
    margin-bottom: 0;
  }
}
.recommend-section .recommend-text p {
  text-align: justify;
}
.recommend-section .recommend-text p:nth-child(1) {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  margin-bottom: 20px;
  margin-top: -5px;
}
@media (max-width: 768px) {
  .recommend-section .recommend-text p:nth-child(1) {
    margin-bottom: 10px;
    text-align: justify;
  }
}
@media (min-width: 768px) and (max-width: 868px) {
  .recommend-section .recommend-text p:nth-child(1) {
    line-height: 2;
  }
}
@media (max-width: 768px) {
  .recommend-section .recommend-text p:nth-child(2) {
    margin-bottom: 50px;
  }
}

.recommend-text-en p {
  line-height: 1.7;
}
@media (max-width: 768px) {
  .recommend-text-en p {
    line-height: 2.2;
  }
}

.radius-topright {
  border-radius: 0 10px 0 0;
}

.radius-bottomright {
  border-radius: 0 0 10px 0;
}

.stay-map {
  margin-top: 50px;
}

/*.mouseover-fadeout // ホバーでフェードアウト*/
/* Base settings */
[class*=fade], [class*=slide], [class*=fadeup] {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

/* Fade In */
.fadein {
  opacity: 0;
  -webkit-animation: fadein 0.6s ease-out forwards;
          animation: fadein 0.6s ease-out forwards;
}

@-webkit-keyframes fadein {
  to {
    opacity: 1;
  }
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}
/* Slide Up */
.slideup {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-animation: slideup 0.8s ease-out forwards;
          animation: slideup 0.8s ease-out forwards;
}

@-webkit-keyframes slideup {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideup {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* Fade Up (Slide Up + Fade In) */
.fadeup {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-animation: fadeup 0.8s ease-out forwards;
          animation: fadeup 0.8s ease-out forwards;
}

@-webkit-keyframes fadeup {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeup {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* Slide Right to Left */
.sliderighttoleft {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
  -webkit-animation: sliderighttoleft 0.8s ease-out forwards;
          animation: sliderighttoleft 0.8s ease-out forwards;
}

@-webkit-keyframes sliderighttoleft {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes sliderighttoleft {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.mouseover-box {
  background: #48bb78;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}

/* Mouseover Slow Fade Out */
.mouseover-fadeout {
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.mouseover-fadeout:hover {
  opacity: 0.3;
}

/* ========== Animation Delays ========== */
.delay-100 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.delay-200 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.delay-400 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.delay-600 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.delay-800 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.delay-1000 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

/* ========== Animation Durations ========== */
.duration-fast {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
}

.duration-normal {
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.duration-slow {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.duration-slower {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

.inview-fadeup,
.inview-fadein {
  opacity: 0;
  -webkit-transition: opacity 1.5s cubic-bezier(0.5, 0, 0, 1) 0.1s;
  transition: opacity 1.5s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}

.inview-fadeup.show,
.inview-fadein.show {
  opacity: 1;
}

.inview-fadeup.delay,
.inview-fadein.delay {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.inview-fadeup-hero {
  opacity: 0;
  -webkit-transition: opacity 3s cubic-bezier(0.5, 0, 0, 1) 0.1s;
  transition: opacity 3s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}

.inview-fadeup-hero.show {
  opacity: 1;
}

.inview-fadeup-logo {
  opacity: 0.3;
  -webkit-transition: opacity 3s cubic-bezier(0.5, 0, 0, 1) 0.1s;
  transition: opacity 3s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}

.inview-fadeup-logo.show {
  opacity: 1;
}

/*.inview-fadeup{
    opacity: 0;
    transform: translateY(20px);
    transition: 0.8s;
    transition-delay: 0.1s;
}

.inview-fadeup.show{
    opacity: 1;
    transform: translateY(0px); 
}
.inview-fadeup.delay{
    transition-delay: 0.3s; 
}

.inview-fadein{
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.1s;

.inview-fadein.show{
    opacity: 1;
    transform: translateY(0px); 
}
.inview-fadein.delay{
    transition-delay: 0.3s; 
}*/
.wrapper {
  width: 100%;
}
.wrapper.wrapper--limited {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 100px 70px;
}
@media (max-width: 768px) {
  .wrapper.wrapper--limited {
    padding: 50px 5vw;
  }
  .wrapper.wrapper--limited .news-date, .wrapper.wrapper--limited .hotel-date {
    margin-right: 0;
    margin-bottom: 4px;
    min-width: unset;
  }
  .wrapper.wrapper--limited .news-date {
    margin-bottom: 10px;
  }
  .wrapper.wrapper--limited .news-title, .wrapper.wrapper--limited hotel-title {
    line-height: 1.6;
  }
  .wrapper.wrapper--limited .button-white, .wrapper.wrapper--limited .button-black {
    margin-left: auto;
    margin-right: auto;
  }
}
.wrapper.wrapper--full {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.footer-section {
  color: #F3F5F6;
  padding: 0 10vw;
}
.footer-section a {
  color: #F3F5F6;
}
.footer-section a.button-2line {
  color: #333;
}
@media (max-width: 768px) {
  .footer-section .address {
    display: none;
  }
}
.footer-section .button-2line {
  display: none;
}
@media (max-width: 768px) {
  .footer-section .button-2line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.footer-section .flex-grid {
  display: grid;
  grid-template-columns: 43% 32% 25%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media (max-width: 768px) {
  .footer-section .flex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 12px;
  }
}
.footer-section .flex-grid-en {
  grid-template-columns: 60% 15% 15%;
}
.footer-section #copyright {
  font-size: 12px;
  font-family: serif;
}
@media (max-width: 768px) {
  .footer-section #copyright {
    margin-top: 60px;
    text-align: center;
  }
}
.footer-section nav ul {
  font-size: 15px;
  text-align: left;
  margin-bottom: 0;
  margin-top: -3px;
}
.footer-section nav ul li {
  position: relative;
  padding: 0;
  margin: 0;
  letter-spacing: 2px;
  list-style: none;
  position: relative;
  padding-left: 1em;
  padding: 5px 0 5px 20px;
  list-style-type: none;
}
@media (max-width: 768px) {
  .footer-section nav ul li {
    font-size: 16px;
    padding: 4px 0 4px 20px;
  }
}
.footer-section nav ul li::before {
  content: "ー ";
  position: absolute;
  left: 0;
}
.footer-section nav ul li a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 2px;
}
.footer-section nav ul li a:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
@media (max-width: 768px) {
  .footer-section .wrapper.wrapper--limited {
    padding-left: 0;
    padding-right: 0;
  }
}

body.en .footer-item--1 {
  text-align: left;
}

.footer-logo {
  max-width: 420px;
  margin-bottom: 50px;
}
.footer-logo img {
  height: auto;
  width: 100%;
}
@media (max-width: 768px) {
  .footer-logo img {
    display: block;
  }
}
@media (max-width: 768px) {
  .footer-logo {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

.footer_gradient {
  background-color: hsl(180, 16%, 58%);
  background-image: radial-gradient(at 92% 10%, hsl(169, 15%, 58%) 0px, transparent 50%), radial-gradient(at 6% 94%, hsl(89, 36%, 41%) 0px, transparent 50%), radial-gradient(at 5% 5%, hsl(64, 32%, 50%) 0px, transparent 50%), radial-gradient(at 94% 94%, hsl(56, 16%, 61%) 0px, transparent 50%), radial-gradient(at 51% 56%, hsl(176, 16%, 58%) 0px, transparent 50%);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 768px) {
  .footer_gradient {
    background-color: hsl(189, 19%, 60%);
    background-image: radial-gradient(at 4% 82%, hsl(112, 19%, 48%) 0px, transparent 50%), radial-gradient(at 12% 15%, hsl(71, 23%, 59%) 0px, transparent 50%), radial-gradient(at 65% 33%, hsl(189, 19%, 60%) 0px, transparent 50%), radial-gradient(at 93% 86%, hsl(79, 15%, 61%) 0px, transparent 50%);
  }
}

.instagram img {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  display: block;
}
@media (max-width: 768px) {
  .instagram img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 768px) {
  .flex-grid--main, .flex-grid--bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer-item--1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .footer-item--2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .footer-item--3 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .footer-item--5 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  .footer-item--5 {
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .footer-item--6 {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .footer-item--7 {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    position: relative;
    left: 50%;
    top: 70px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .footer-item--4 {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
}
.flex-grid--main {
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .flex-grid--main {
    margin-bottom: 30px;
  }
}

.page-section .page-section-title {
  margin-bottom: 50px;
  line-height: 1.6;
  text-align: center;
}
.page-section .page-section-title .subtitle {
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .page-section .page-section-title .subtitle {
    margin-top: 5px;
  }
}
.page-section .page-section-title h2, .page-section .page-section-title h3 {
  text-align: center;
}
@media (max-width: 768px) {
  .page-section .page-section-title h2, .page-section .page-section-title h3 {
    margin-bottom: 0;
  }
}
.page-section .page-section-content {
  text-align: left;
}
.page-section .page-section-content p {
  margin-bottom: 1em;
}
.page-section a {
  text-decoration: underline;
}
.page-section a.button-whiteblack {
  margin-top: 70px;
  text-decoration: none;
}

.page-header-section {
  position: relative;
  width: 100vw;
  max-height: 540px;
  height: 100%;
  overflow: hidden;
}

.qa-section {
  font-family: "Noto Serif JP", serif;
  padding: 0 20px 20px 20px;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
  font-size: 24px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 140px;
}
@media (max-width: 768px) {
  .qa-section {
    font-size: 20px;
    padding: 0 20px 10px 20px;
    margin-top: 0;
  }
}

.qa {
  width: 100%;
  margin: 0 auto;
}
.qa button {
  border: 1px black solid;
  margin: 0 auto;
  display: block;
}
.qa a {
  margin: 0 auto;
}

.question {
  font-size: 24px;
  text-align: justify;
  font-family: serif;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .question {
    font-size: 20px;
    line-height: 1.8;
  }
}

.answer {
  font-size: 15px;
  margin-bottom: 70px;
}
.answer a {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .answer {
    font-size: 14px;
    margin-bottom: 50px;
  }
}

.answer:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .answer {
    margin-bottom: 70px;
  }
}
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
html p, body p {
  line-height: 2.4;
  margin-bottom: 0;
  letter-spacing: 1px;
  /*font-feature-settings: "palt";*/
}

.container, .wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

[class*=col-] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 768px) {
  [class*=col-] {
    padding-left: 0;
    padding-right: 0;
  }
}

html {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}
html p {
  line-height: 2.2;
}
html a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-family: "Hiragino Mincho ProN", "YuMincho", serif;
  font-style: normal;
  font-size: 50px;
  letter-spacing: 13px;
  line-height: 1.7;
  margin-top: -15px;
}
@media (max-width: 768px) {
  h1 {
    font-size: 32px;
    margin-bottom: 50px;
    letter-spacing: 9px;
    width: 100%;
    line-height: 1.5;
  }
}
h1 span {
  letter-spacing: -1em;
}

body.en h1 {
  font-size: 46px;
  letter-spacing: 10px;
  text-align: left;
}

body.en .catch-section__content p {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 2px;
}

h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 49px;
  letter-spacing: 10px;
  margin-top: -10px;
}
@media (max-width: 768px) {
  h2 {
    font-size: 34px;
    letter-spacing: 8px;
  }
}

.subtitle {
  font-family: "Noto Serif JP", serif;
  color: var(--main-gray);
  font-size: 19px;
  margin-top: -6px;
  letter-spacing: 6px;
}
@media (max-width: 768px) {
  .subtitle {
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: -10px;
  }
}

body.en .subtitle {
  letter-spacing: 4px;
  font-size: 16px;
}

h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 6px;
  margin-bottom: 50px;
  padding: 0 20px 20px 20px;
  /*border-bottom: 1px solid #6fdcff;*/
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
  text-align: center;
  margin: 0 auto 50px auto;
}
@media (max-width: 768px) {
  h3 {
    letter-spacing: 5px;
    padding: 0 5px 5px 5px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    font-size: clamp(15px, 5vw, 20px);
  }
}

.plan-section h3, .about-section h3 {
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
}

body.en h3 {
  letter-spacing: 4px;
}

#yusui--room h3 {
  border-color: #A1D6DC;
  -o-border-image: none;
     border-image: none;
}

#moegi--room h3 {
  border-color: #E4E656;
  -o-border-image: none;
     border-image: none;
}

#rikka--room h3 {
  border-color: #B9C3E4;
  -o-border-image: none;
     border-image: none;
}

#sokyu--room h3 {
  border-color: #61AA30;
  -o-border-image: none;
     border-image: none;
}

#kasui--room h3 {
  border-color: #E2DEB6;
  -o-border-image: none;
     border-image: none;
}

.news-list, .hotel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  border-top: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
  letter-spacing: 2px;
}
@media (max-width: 768px) {
  .news-list, .hotel-list {
    margin-top: 50px;
  }
}
.news-list li, .hotel-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 0;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
     border-image: -webkit-gradient(linear, left top, right top, from(#DDE14B), color-stop(#59A12C), color-stop(#CDCEBF), color-stop(#B0BBDE), to(#98CFD7)) 1;
     border-image: linear-gradient(to right, #DDE14B, #59A12C, #CDCEBF, #B0BBDE, #98CFD7) 1;
  border-image-slice: 1;
}
@media (max-width: 768px) {
  .news-list li, .hotel-list li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 16px 0;
  }
}

.news-date, .hotel-date {
  margin-right: 40px;
  min-width: 110px;
  display: inline-block;
  letter-spacing: 1px;
}

.news-date {
  color: #b7b7b7;
}

.hotel-date {
  color: #333;
  font-weight: bold;
}

.catch-section__content p {
  width: 100%;
  font-family: serif;
  /*font-feature-settings: "palt";*/
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 4.4px;
  margin-bottom: 50px;
  text-align: left;
}
@media (max-width: 768px) {
  .catch-section__content p {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 3.4px;
    margin-bottom: 30px;
  }
}
@media (max-width: 768px) {
  .catch-section__content a {
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
    height: 46px;
  }
}

@media (max-width: 768px) {
  .pc-only--common {
    display: none;
  }
}
.mobile-only--common {
  display: none;
}
@media (max-width: 768px) {
  .mobile-only--common {
    display: block;
  }
}

.button-white {
  background: #fff;
  color: #333;
}

.button-black {
  color: white;
  background: #333;
}

.button-2line {
  height: 70px;
  border-radius: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #fff;
  color: #333;
}
.button-2line span {
  font-size: 12px;
}

.button-whiteblack {
  background: #fff;
  color: #333;
}

.button-white {
  width: 261.8px;
  height: 56px;
  border-radius: 16px;
  border: none;
  letter-spacing: 3px;
  --bs-btn-font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
@media (max-width: 768px) {
  .button-white {
    max-width: 100%;
  }
}
.button-white:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .button-white {
    margin: 0 auto;
  }
}

.button-black {
  width: 261.8px;
  height: 56px;
  border-radius: 16px;
  border: none;
  letter-spacing: 3px;
  --bs-btn-font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
@media (max-width: 768px) {
  .button-black {
    max-width: 100%;
  }
}
.button-black:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .button-black {
    margin: 0 auto;
    height: 48px;
    border-radius: 10px;
  }
}

.button-2line {
  width: 261.8px;
  height: 56px;
  border-radius: 16px;
  border: none;
  letter-spacing: 3px;
  --bs-btn-font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
@media (max-width: 768px) {
  .button-2line {
    max-width: 100%;
  }
}
.button-2line:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .button-2line {
    border-radius: 8px;
    height: 62px;
  }
  .button-2line span {
    font-size: 10px;
    margin-top: 2px;
  }
}

.button-whiteblack {
  width: 261.8px;
  height: 56px;
  border-radius: 16px;
  border: none;
  letter-spacing: 3px;
  --bs-btn-font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  border: 1px solid black;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
@media (max-width: 768px) {
  .button-whiteblack {
    max-width: 100%;
  }
}
.button-whiteblack:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .button-whiteblack {
    height: 46px;
    border-radius: 10px;
  }
}

.pc-only {
  display: block;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
.floating-booking-button {
  position: fixed;
  right: 22px;
  bottom: 95px;
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  z-index: 999;
}

.floating-booking-button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  letter-spacing: 4px;
}

/* a 内の小文字（例：説明など） */
.floating-booking-button a span {
  margin-top: 15px;
  font-size: 14px;
  letter-spacing: 0;
  display: block;
  text-align: center;
}

/* スクロール後に出現 */
.floating-booking-button.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (max-width: 768px) {
  .floating-booking-button.visible {
    display: none;
  }
}
.floating-booking-button.visible:hover {
  opacity: 0.7;
}

.btn-line {
  position: relative;
  padding-bottom: 5px;
}
.btn-line::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.btn-line:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.form-contact {
  width: 100%;
  margin: 70px auto;
  padding: 50px 50px 20px 50px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .form-contact {
    padding: 30px 30px 0 30px;
  }
}
.form-contact table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.form-contact th, .form-contact td {
  padding: 15px;
  text-align: left;
  vertical-align: top;
}
.form-contact td:last-child {
  padding-bottom: 0;
}
.form-contact th {
  font-weight: normal;
  width: 30%;
  color: #333;
  padding-top: 26px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .form-contact th {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.form-contact th.required p::after {
  content: " *";
  color: #000;
  font-weight: bold;
}
.form-contact input[type=text],
.form-contact input[type=email],
.form-contact input[type=tel],
.form-contact textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #8E8E8E;
  border-radius: 15px;
  font-size: 14px;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.form-contact input[type=text]:focus,
.form-contact input[type=email]:focus,
.form-contact input[type=tel]:focus,
.form-contact textarea:focus {
  outline: none;
  border-color: #3498db;
}
.form-contact textarea {
  resize: vertical;
  min-height: 100px;
}
@media screen and (max-width: 768px) {
  .form-contact .form-contact {
    padding: 20px;
  }
  .form-contact table, .form-contact thead, .form-contact tbody, .form-contact th, .form-contact td, .form-contact tr {
    display: block;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .form-contact tr {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .form-contact th, .form-contact td {
    padding: 8px 0;
    width: 100%;
  }
  .form-contact th {
    font-weight: normal;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }
  .form-contact td {
    padding-top: 0;
  }
}

.submit-container p {
  text-align: center;
}
.submit-container span {
  width: 0;
  margin: 0;
}

.submit-container input {
  text-align: center;
  width: 261.8px;
  height: 52px;
  border-radius: 10px;
  border: none;
  background: #333;
  letter-spacing: 3px;
  --bs-btn-font-size: 1rem;
  height: 46px;
  color: white;
  border-radius: 13px;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.submit-container input a {
  text-decoration: none;
  color: #fff;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.submit-container input a:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  .submit-container input {
    max-width: 100%;
  }
}
.submit-container input:hover {
  opacity: 0.7;
}

.privacy-notice {
  margin-top: 50px;
  padding: 15px;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .privacy-notice {
    font-size: 14px;
    margin-top: 20px;
  }
}

.page-section .page-section-content th p {
  margin-bottom: 0;
}

.add-space {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .add-space {
    margin-top: 50px;
  }
}