@charset "utf-8";

body {
 display: flex;
 /* justify-content: center;
 align-items: center; */
 flex-direction: column;
 width: 100%;
 min-height: 100vh;
}

.kome2 {
 margin-left: 1.2em;
 text-indent: -1em;
}

.bg-wrapper {
 background: rgb(0, 180, 210);
 background: linear-gradient(180deg, rgba(0, 180, 210, 1) 0%, rgba(0, 180, 210, 1) 54%, rgba(255, 222, 155, 1) 100%);
 flex: 1;
 width: 100%;
}

header {
 display: block;
 width: 100%;
 height: 100px;
 margin-inline: auto;
 position: relative;
}

header .head-wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100px;
 background-color: transparent;
 z-index: 5;
 display: flex;
 align-items: center;
 padding-inline: 40px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

header .head-wrap a.logo {
 width: 140px;
 height: 53px;
}

header .cover-wrap {
 position: absolute;
 inset: 0;
}

header .cover-wrap img.mainImg {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

.slide-wrapper .slide-top {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

.slide-wrapper .slide-top img {
 max-width: 100%;
 width: 100%;
 height: 100%;
 position: absolute;
 object-fit: cover;
}

header .cover-wrap h1 {
 /* z-index: 10; */
 width: 100%;
 position: absolute;
 top: 52%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: 500;
 font-size: 48px;
 line-height: 1.3;
 text-align: center;
 color: #fff;
 font-family: var(--sanserif-ff-ja);
}


header .cover-wrap h1 span {
 font-size: 18px;
 display: block;
 margin-bottom: 1em;
 font-weight: 600;
 letter-spacing: 0.06em;
}


.contentsWrapper {
 width: 100%;
 /* min-width: initial; */
 width: min(100% - 50px, 960px);
 margin-inline: auto;
 padding-top: 130px;
 padding-bottom: 200px;
}


h2 {
 font-size: 40px;
 font-family: var(--sanserif-ff-ja);
 font-weight: 500;
 color: #fff;
 text-align: center;
 letter-spacing: 0.04em;
}

body#news h2 {
 font-family: var(--sanserif-ff);
}

.news-wrapper {
 width: 100%;
 margin-top: 70px;
}

.news-wrapper dl {
 padding-block: 30px;
 border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.news-wrapper {
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.news-wrapper dl dt {
 font-size: 14px;
 font-family: var(--sanserif-ff);
 font-weight: 400;
 color: #fff;
 opacity: 0.6;
 margin-bottom: 1em;
}

.news-wrapper dl dd {
 font-size: 18px;
 font-family: var(--sanserif-ff-ja);
 font-weight: 400;
 color: #fff;
 line-height: 1.8;
}

.wp-pagenavi {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 60px;
 width: 80%;
 margin-inline: auto;
}

.wp-pagenavi .pages {
 display: none;
}

.wp-pagenavi a,
.current {
 font-size: 18px;
 font-family: var(--sanserif-ff);
 font-weight: 400;
 color: #fff;
 display: flex;
 align-items: center;
 padding-inline: 20px;
}

.wp-pagenavi a.page {
 color: rgba(255, 255, 255, 0.3) !important;
}

.wp-pagenavi .btpage img {
 width: 10px;
}

.wp-pagenavi .bt-prev img {
 margin-right: 10px;
}


.wp-pagenavi .nextpostslink img {
 margin-left: 10px;
 rotate: 180deg;
}



.wp-pagenavi .previouspostslink img {
 margin-right: 10px;
}

.pagenavi .nav-num {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 2em;
}



.wp-pagenavi .nav-num a {
 font-size: 18px;
 font-family: var(--sanserif-ff);
 font-weight: 400;
 color: #fff;
 opacity: 0.3;
}


.contentWrap {
 width: min(100%, 720px);
 margin-inline: auto;
 margin-top: 100px;
 margin-bottom: 40px;
}

.relatedLinks {
 width: min(100%, 720px);
 margin-inline: auto;
 margin-top: 40px;
 margin-bottom: 120;
}

.relatedLinks a {
 color: #00B4D2;
}

.contentWrap p.date {
 font-size: 14px;
 font-weight: 400;
 font-family: var(--sanserif-ff);
 margin-bottom: 1em;
}

.contentWrap p.ttl {
 font-size: var(--news-ttl-font-size);
 font-weight: 600;
 line-height: 1.6;
 font-family: var(--sanserif-ff-ja);
 margin-bottom: 2em;
}

.contentWrap p {
 font-size: var(--primary-font-size);
 font-weight: 400;
 font-family: var(--sanserif-ff-ja);
 line-height: 1.8;

}

.contentWrap img {
 margin-bottom: 2em;
}

.closed {
 width: 30px;
 height: 30px;
 display: block;
 margin-bottom: 0;
 position: absolute;
 right: 60px;
 top: 60px;
 transition: 0.5s;
}

.closed img {
 max-width: 100%;
 margin-bottom: 0;
}

@media (max-width:767px) {
 header {
  width: 100%;
  height: 70px;
  position: relative;
 }

 header .head-wrap {
  height: 70px;
  padding-inline: 25px;
 }

 header .head-wrap a.logo {
  width: 92px;
  height: 35px;
 }

 h2 {
  font-size: 28px;
 }

 .contentsWrapper {
  padding-top: 80px;
  padding-bottom: 80px;
 }

 .news-wrapper {
  width: 100%;
  margin-top: 30px;
 }

 .news-wrapper dl {
  padding-block: 20px;
 }

 .news-wrapper dl dd {
  font-size: 16px;
 }

 .wp-pagenavi a,
 .current {
  font-size: 12px;
  padding-inline: 5px;
 }

 .wp-pagenavi .nextpostslink img {
  margin-left: 5px;
  width: 5px;
 }

 .wp-pagenavi .previouspostslink img {
  margin-right: 5px;
  width: 5px;
 }
}

/* モーダルウィンドウ */
#newsModalWrap {
 position: fixed;
 top: 0;
 right: 0;
 width: 100vw;
 height: 100vh;
 z-index: 99999;
 background-color: #fff;
 pointer-events: none;
 overflow-y: auto;
 display: none;
 opacity: 0;
 overscroll-behavior-y: contain;
 overflow-y: auto;
}

#newsModalWrap.active {
 pointer-events: all;
 display: block;
 opacity: 1;
 animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

@media (max-width:767px) {
 .contentWrap {
  margin-block: 50px;
 }

 #newsModalWrap {
  max-width: 1000px;
  width: 100vw;
  height: 100vh;
 }

 .closed {
  width: 25px;
  height: 25px;
  right: 25px;
  top: 25px;
 }
}

/* VILLA */
.rental-villa header {
 display: block;
 width: 100%;
 margin-inline: auto;
 /* aspect-ratio: 1440 / 600; */
 min-height: 600px;
 max-height: 600px;
 position: relative;
}

.rental-villa header .head-wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100px;
 background-color: transparent;
 z-index: 5;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-inline: 40px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

#faq.rental-villa header .head-wrap,
.news_content header .head-wrap {
 border-bottom: 1px solid rgba(100, 100, 100, 0.3) !important;
}

.rental-villa header .cover-wrap {
 position: absolute;
 inset: 0;
 overflow: hidden;
}

.rental-villa header .crumb {
 position: absolute;
 top: 154px;
 left: 60px;
 display: flex;
 align-items: center;
 font-size: 15px;
 color: #fff;
 font-weight: 600;
}

.rental-villa .rental-nav-wrap {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.rental-villa .rental-nav-wrap ul.rental-nav {
 width: 490px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 40px;
 margin-right: 40px;
}



.rental-villa .rental-nav-wrap ul.rental-nav li {
 /* width: calc(100% / 5); */
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

.rental-villa .rental-nav-wrap ul.rental-nav li:nth-child(5) {
 margin-right: 40px;
}

.rental-villa .rental-nav-wrap ul.rental-nav li:nth-child(5)::after {
 content: "";
 width: 1px;
 height: 60%;
 background-color: #E6ECEF;
 position: absolute;
 right: -40px;
}

.rental-villa .rental-nav-wrap ul.rental-nav li a {
 width: 100%;
 height: 100%;
 display: block;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 0.3s;
 font-size: 17px;
 font-weight: 400;
}

.rental-villa .rental-nav-wrap ul.rental-nav li a:hover {
 opacity: 0.6;
}

.bt-reservation {
 display: flex;
 width: 120px;
 height: 40px;
 margin-inline: auto;
 background-color: rgba(255, 255, 255, 0.3);
 /* padding: 7px 22px; */
 justify-content: center;
 align-items: center;
 border-radius: 5px;
 color: #fff;
 text-align: center;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.8px;
 white-space: nowrap;
 transition: 0.3s;
}

.bt-reservation:hover {
 background-color: rgba(255, 255, 255, 1);
 color: var(--black);
}



.rental-villa .contentsWrapper {
 width: 100%;
 /* min-width: initial; */
 width: min(100% - 50px, 1200px);
 margin-inline: auto;
 padding-top: 130px;
 padding-bottom: min(calc(100 / 1200 * 100vw), 100px);
}

.content-catch {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-column-gap: 15px;
 justify-content: space-between;

}

.content-catch-left P {
 font-size: clamp(1rem, 0.7727rem + 0.9697vw, 1.5rem);
 font-weight: 600;
 line-height: 2;
 letter-spacing: 0.06em;
 margin-bottom: 1.6em;
}

.content-catch-right P {
 font-size: clamp(0.8125rem, 0.6705rem + 0.6061vw, 1.125rem);
 font-weight: 500;
 line-height: 2;
 letter-spacing: 0.06em;
 margin-bottom: 1.6em;
}

.rental-villa .contentsWrapper {
 width: 100%;
 min-width: initial;
 margin-inline: auto;
 padding-top: 100px;
 width: min(100% - 25px, 1200px);

}

.news_top .contentsWrapper {
 width: 100%;
 /* min-width: initial; */
 width: min(100% - 50px, 960px);
 margin-inline: auto;
 padding-top: 130px;
 padding-bottom: 200px;
}

.content-main-wrap {
 width: 100%;
 padding-top: min(calc(90 / 1200 * 100vw), 90px);
 padding-bottom: min(calc(100 / 1200 * 100vw), 100px);
}

.rental-villa section:not(:last-child) {
 margin-bottom: 80px;
}

.lead-wrap h2 {
 color: var(--black, #646464);
 font-size: 46px;
 font-weight: 500;
 margin-bottom: 35px;
 display: flex;
 align-items: center;
}

.lead-wrap h2 span {
 font-size: clamp(0.75rem, 0.6364rem + 0.4848vw, 1rem);
 font-weight: 600;
 margin-left: 1em;
}

.lead-wrap p {
 color: var(--black, #646464);
 font-size: 16px;
 font-style: normal;
 font-weight: 400;
 line-height: 36px;
 letter-spacing: 0.64px;
 max-width: 775px;
 margin-bottom: 1em;

}

a.inquiry {
 display: flex;
 width: 210px;
 height: 50px;
 justify-content: center;
 align-items: center;
 border-radius: 5px;
 color: #fff;
 text-align: center;
 font-size: clamp(0.9rem, 0.7409rem + 0.6788vw, 1.25rem);
 font-weight: 600;
 letter-spacing: 0.8px;
 white-space: nowrap;
 transition: 0.3s;
 background-color: #00B4D2;
 border: 2px solid transparent;
}

a.inquiry:hover {
 color: #00B4D2;
 border: 2px solid #00B4D2;
 background-color: #fff;
}



.access-time h3 {
 padding-bottom: 55px !important;
}

.rental-villa h3 {
 color: var(--black, #646464);
 font-size: 22px;
 font-weight: 600;

 font-family: var(--sanserif-ff);
 letter-spacing: 0.04em;
 /* padding-bottom: 10px; */
 margin-bottom: 30px;
}

/* Room Information */
.amenities-wrap h3 {
 border-bottom: 1px solid #E6ECEF;
 padding-top: 10px;
 padding-bottom: 30px;
}

.info-wrap {
 position: relative;
}



.info-wrap .info-wrap-inner {
 position: sticky;
 top: 50px;
 padding-block: 10px;
}

.info-wrap h3 {
 margin-bottom: 30px;
 /* padding-block: 10px; */
}


.rental-villa h4 {
 color: var(--black, #646464);
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 35px;
 font-family: var(--sanserif-ff);
 letter-spacing: 0.04em;
}

.information {
 width: 100%;
 display: grid;
 grid-template-columns: calc(420 / 1200 * 100%) 1fr;
 /* grid-column-gap: 15px; */

}

.information .info-wrap {
 border-right: 1px solid #E6ECEF;
}

.information .amenities-wrap {
 width: min(calc(100% - 20px), 720px);
 margin-left: auto;
}

.information .detail_info {
 width: min(calc(100% - 20px), 360px);
 padding-bottom: 60px;
}

.information .detail_info dl:first-child {
 border-top: 1px solid #E6ECEF;
}

.information .detail_info dl {
 display: flex;
 gap: 20px;
 padding-block: 10px;
 border-bottom: 1px solid #E6ECEF;
}


.information .detail_info dl dt {
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
}


.information .detail_info dl dd {
 padding-top: 8px;
 font-size: var(--primary-font-size);
 font-weight: 400;
 line-height: 1.8;
 flex: 1;
 letter-spacing: 0.04em;
}

.information .detail_info dl dd a {
 color: #00B4D2;
}

.information .detail_info dl dd span {
 color: #00B4D2;
 display: block;
 font-weight: 600;
}

.information .amenities-wrap .inner3-wrap {
 display: grid;
 grid-template-columns: min(calc(200 / 720 * 100%), 200px) min(calc(200 / 720 * 100%), 200px) min(calc(320 / 720 * 100%), 320px);

 padding-bottom: 40px;
 margin-bottom: 40px;
 border-bottom: 1px solid #E6ECEF;
}



/* アクセス */
.rental-access .contentsWrapper {
 width: 100%;
 min-width: initial;
 margin-inline: auto;
 padding-top: 80px;
 padding-bottom: 190px;
 width: min(100% - 25px, 1080px);
}

.access-wrapper {
 width: 100%;
 display: grid;
 grid-template-columns: calc(578 / 1080 * 100%) calc(405 / 1080 * 100%);
 grid-column-gap: min(calc(96 / 1080 * 100%), 96px);
 padding-bottom: min(calc(100 / 1080 * 100vw), 100px);
 border-bottom: 1px solid #e8e8e8;
}

.rental-access h3 {
 color: var(--black, #646464);
 font-size: 25px;
 font-weight: 600;
 margin-bottom: 20px !important;
 font-family: var(--sanserif-ff--ja);
 margin-bottom: min(calc(25 / 1080 * 100vw), 25px);
}

.content-access-wrap-left h3,
.content-access-wrap-right h3 {
 font-size: 22px;
}

.rental-access h3 img {
 max-height: 35px;
}

.rental-access .content-main-full {
 width: 100%;
 padding-top: min(calc(103 / 1080 * 100vw), 103px);
}

.rental-access .content-main-full .googlemap-wrap {
 display: block;
 overflow: hidden;
 width: 100%;
 aspect-ratio: 1000 / 474;
 position: relative;
}

.content-access-wrap-right p {
 margin-bottom: 2em;
}

p.attention {
 color: #FF7557 !important;
 margin-bottom: 0;
}

.content-access-wrap-right p a {
 color: #00B4D2;
}

.content-access-wrap-right p span.blue {
 color: #00B4D2;
 font-weight: 600;
}

.rental-access .content-main-wrap {
 width: 100%;
 display: grid;
 grid-template-columns: calc(360 / 1080 * 100%) 1fr;
 grid-column-gap: min(calc(60 / 1080 * 100vw), 80px);
 padding-top: min(calc(60 / 1080 * 100vw), 103px);
 padding-bottom: min(calc(103 / 1080 * 100vw), 103px);
 border-bottom: 1px solid #E6ECEF;

}

.rental-access .content-main-wrap .content-access-wrap-left {
 border-right: 1px solid #E6ECEF;
 position: relative;

}

.rental-access .content-main-wrap .content-access-wrap-left .content-access-wrap-left-inner {
 position: sticky;
 top: 50px;
 padding-bottom: 0px;
}

.rental-access .content-main-wrap .content-access-wrap-left .inner {
 width: calc(300 / 360 * 100%);
 padding-block: 17px;
 border-bottom: 1px solid #E6ECEF;
}

.rental-access .content-main-wrap .content-access-wrap-left .inner:first-of-type {
 border-top: 1px solid #E6ECEF;
}

.rental-access .content-main-wrap .content-access-wrap-left .inner p span {
 font-weight: 600;
 display: block;
}

.rental-access .content-main-wrap:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.rental-access .content-main-wrap .googlemap-wrap {
 display: block;
 overflow: hidden;
 width: 100%;
 aspect-ratio: 643 / 400;
 position: relative;
}

.rental-access .content-main-wrap p {
 color: var(--black, #646464);
 font-size: var(--primary-font-size);
 font-style: normal;
 font-weight: 400;
 line-height: 36px;
 letter-spacing: 0.04em;
}

.rental-access p a {
 font-weight: 600;
 text-decoration: underline;
 transition: 0.3s;
}

.rental-access p a:hover {
 opacity: 0.6;
}

.rental-access p a.ico {
 text-decoration: underline;
 text-underline-offset: 5px;
 width: fit-content;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.rental-access p a.ico::after {
 display: inline-block;
 content: "";
 width: 18px;
 height: 18px;
 background: url(../images/ico_link_blank_blue.svg) 0 0 no-repeat;
 background-size: contain;
 margin-left: 0.5em;
}

.googlemap-wrap iframe {
 width: calc(100% + 580px);
 margin-left: -580px;
 aspect-ratio: 643 / 400;
 height: calc(100% + 150px);
 margin-top: -150px;
}

.mymap iframe {
 width: 100%;
 margin-left: initial;
 height: calc(100% + 150px);
 margin-top: -150px;
}

.googlemap-wrap .maplink {
 width: 200px;
 height: 50px;
 background-color: transparent;
 display: block;
 position: absolute;
 left: 0px;
 bottom: 0px;
 z-index: 10;
}

a.bt-maplink {
 display: flex;
 width: 210px;
 height: 50px;
 margin-top: 3em;
 justify-content: center;
 align-items: center;
 border-radius: 5px;
 color: #fff;
 text-align: center;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.8px;
 white-space: nowrap;
 transition: 0.3s;
 background-color: #00B4D2;
}

a.bt-maplink::after {
 content: "";
 width: 1.5em;
 height: 1.5em;
 background: url(../images/ico_link_blank.svg) 0 0 no-repeat;
 background-size: contain;
 margin-left: 0.1em;
}

a.bt-maplink:hover {
 color: #00B4D2;
 border: 2px solid #00B4D2;
 background-color: #fff;
}

a.bt-maplink:hover::after {
 background: url(../images/ico_link_blank_blue_s.svg) 0 0 no-repeat;
}

@media (min-width:768px) and (max-width:1000px) {
 .information .amenities-wrap .inner3-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 }

 .information .amenities-wrap .inner3-wrap .inner3:nth-child(3) {
  grid-area: 2 / 1 / 3 / 3;
 }

 .information .amenities-wrap p.ex {
  margin-top: 0.5em !important;
 }
}

.information .amenities-wrap ul {
 list-style: disc;
 margin-left: 1em;
}

.information .amenities-wrap p {
 font-size: var(--primary-font-size);
 font-weight: 600;
 line-height: 1.8;
 letter-spacing: 0.04em;
 margin-bottom: 0.3em;
 color: var(--primary-font-clr);
}

.information .amenities-wrap ul li {
 font-size: var(--primary-font-size);
 font-weight: 400;
 line-height: 1.8;
 letter-spacing: 0.04em;
 list-style: none;
 position: relative;
}

.information .amenities-wrap ul li::before {
 content: "・";
 position: absolute;
 left: -0.8em;
 top: 3px;
 font-size: 14px;
}

.information .amenities-wrap p.ex {
 font-size: 12px;
 font-weight: 400;
 line-height: 1.8;
 margin-top: 1em;
 letter-spacing: 0.04em;
}

.information .amenities-wrap .inner2-wrap {
 display: grid;
 grid-template-columns: min(calc(400 / 720 * 100%), 400px) 1fr;
 gap: 10px;
 padding-bottom: 40px;
 margin-bottom: 40px;
 border-bottom: 1px solid #E6ECEF;
}

.information .amenities-wrap .inner2-wrap:last-of-type {
 padding-bottom: 0;
 margin-bottom: 0;
}

.information .amenities-wrap .inner2-wrap p {
 width: min(calc(343 / 384 * 100%), 343px);
 letter-spacing: 0.04em;
}

.information .amenities-wrap ul.rental-w {
 width: min(calc(343 / 384 * 100%), 343px);
}

.information .amenities-wrap span.small {
 display: block;
 font-size: 80%;
 font-feature-settings: "palt";
 margin-bottom: 0.3em;
}

p.remarks {
 font-size: 14px !important;
 color: #00B4D2 !important;
 font-weight: 400 !important;
 width: 100% !important;
 letter-spacing: 0.04em;
 margin-bottom: 1em !important;
}

p.remarks::first-letter {
 font-family: sans-serif;
}

p.kome {
 margin-left: 1.2em;
 text-indent: -1.2em;
 max-width: 98%;
}

.information .amenities-wrap .inner2-wrap.full {
 width: 100%;
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
}

.information .amenities-wrap .inner2-wrap.full p,
.information .amenities-wrap .inner2-wrap.full ul.rental-w {
 width: 100%;
 font-weight: 400;
}

#toggleIcon {
 display: none;
}

@media (max-width:767px) {
 .rental-villa header {

  aspect-ratio: 375 / 442;
  min-height: 445px;
  position: relative;
  overflow: hidden;
 }

 .rental-villa header .head-wrap {
  height: 70px;
  padding-inline: 25px;
 }

 .rental-villa header .crumb {
  position: absolute;
  top: 105px;
  left: 35px;
 }

 .rental-villa header .cover-wrap img.mainImg {
  min-height: 445px;
  object-position: 53% bottom;
 }

 #toggleIcon {
  display: block;
  width: 35px;
  height: 35px;
  z-index: 999;
  cursor: pointer;
 }

 #toggleIcon span:nth-child(1),
 #toggleIcon.active span:nth-child(2) {
  display: block;
  opacity: 0.6;
 }

 #toggleIcon.active span:nth-child(2) {
  opacity: 1 !important;
 }

 #toggleIcon.active span:nth-child(1),
 #toggleIcon span:nth-child(2) {
  display: none;
 }

 .content-access-wrap-right {
  padding-top: 3em;
 }

 .rental-access .content-main-wrap .content-access-wrap-left .inner {
  width: 100%;
  padding-block: 17px;
  border-bottom: 1px solid #E6ECEF;
 }

 .rental-access .content-main-wrap .content-access-wrap-left {
  border-right: none;
 }

 .rental-villa .rental-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00B4D2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  transform: scale(0);
  transition: 0.3s ease-in-out;
  z-index: 100;
 }

 #menu-overlay.active {
  transform: scale(1);
 }

 .rental-villa .rental-nav-wrap ul.rental-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  margin-right: 0;
  margin-bottom: 30px;
 }

 .rental-villa .rental-nav-wrap ul.rental-nav li {
  width: 100%;
  height: initial;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .rental-villa .rental-nav-wrap ul.rental-nav li:nth-child(5)::after {
  border-right: none;
 }

 .rental-villa .rental-nav-wrap ul.rental-nav li:nth-child(5) {
  margin-right: 0;
 }

 .rental-villa .rental-nav-wrap ul.rental-nav li a {
  width: 100%;
  height: 100%;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.05em;
 }

 .sponly-menu {
  margin-bottom: 2em;
 }

 .rental-villa .rental-nav-wrap ul.rental-nav li a img {
  width: 40px;
 }

 .bt-reservation {
  display: flex;
  width: fit-content;
  height: initial;
  padding: 0.2em 2em;
  font-size: 21px;
  transition: 0.3s;
 }

 .rental-villa .contentsWrapper {
  width: 100%;
  max-width: 960px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 50px;
  margin-bottom: 80px;
  padding-inline: 25px;
  padding-bottom: 0;
 }

 .content-catch {
  width: 100%;
  display: block;
  justify-content: space-between;
  align-items: center;
 }

 .content-catch-left {
  margin-bottom: 2em;
 }

 .content-catch-right P {
  margin-bottom: 0.6em;
 }



 a.inquiry {
  height: initial;
  width: fit-content;
  padding: 7px 18px;
  border-radius: 3.6px;
  text-align: center;
  font-size: 14.4px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: 0.3s;
 }

 /* Room Information */
 .info-wrap h3 {
  margin-bottom: 0 !important;
 }

 .access-time h3 {
  padding-bottom: 20px !important;
 }

 .rental-villa h3 {
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 20px;
 }

 .rental-villa h4 {
  font-size: 16px;
  margin-bottom: 20px;
 }

 .lead-wrap h2 {
  font-size: clamp(3rem, 2.5455rem + 1.9394vw, 4rem);
 }

 .content-main-wrap {
  padding-bottom: 0;
 }

 .information {
  width: 100%;
  display: block;
 }

 .information .info-wrap {
  border-right: none;
  padding-bottom: 3em;
 }

 .information .detail_info {
  width: 100%;
  padding-bottom: 3em;
 }


 .information .detail_info dl {
  gap: 20px;
  padding-block: 8px;
 }

 .information .amenities-wrap {
  width: 100%;
  margin-left: initial;
 }

 .information .amenities-wrap .inner3-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
 }

 .information .amenities-wrap .inner3-wrap .inner3:nth-child(3) {
  grid-area: 2 / 1 / 3 / 3;
 }

 .information .amenities-wrap .inner2-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
 }

 p.remarks {
  margin-top: 1em;
  width: 100%;
  font-size: 12px !important;
 }

 .information .amenities-wrap .inner2-wrap p {
  width: 100%;
  letter-spacing: 0.04em;
 }

 /* アクセス */
 .rental-access h3 {
  font-size: 21px;
 }

 .access-wrapper {
  width: 100%;
  display: block;
 }

 .access-wrapper .access-time {
  margin-bottom: 3em;
 }


 .rental-access .content-main-wrap {
  width: 100%;
  display: block;
 }

 .content-main-wrap-left {
  margin-bottom: 3em;
 }
}


.start .bt-prev,
.end .bt-next {
 opacity: 0;
 pointer-events: none;
}

.news-wrapper a.rental-place {
 display: block;
}

.news-wrapper a.ajax-popup {
 display: flex;
 align-items: flex-start;
}

.news-wrapper a.ajax-popup::after {
 content: "";
 width: 20px;
 height: 20px;
 background: url(../images/sticky-note-line.svg) 0 0 no-repeat;
 background-size: contain;
 margin-left: 0.1em;
 opacity: 0.8;
}

.news_content .contentsWrapper,
.faq_content .contentsWrapper {
 padding-top: 30px;
 padding-bottom: 160px;
}



.faq_content h2 {
 font-size: 28px;
 font-family: var(--sanserif-ff-ja);
 font-weight: 600;
 color: var(--black);
 text-align: left;
 letter-spacing: 0.04em;
 padding-bottom: 30px;
 border-bottom: 1px solid #E6ECEF;
}

.faq-wrap {
 margin-top: 40px;
 padding-bottom: 30px;
 border-bottom: 1px solid #E6ECEF;
}

.faq-wrap:last-child {
 padding-bottom: 0;
}

.faq-wrap h3 {
 font-size: 18px;
 font-family: var(--sanserif-ff-ja);
 font-weight: 600;
 color: var(--black);
 text-align: left;
 letter-spacing: 0.04em;
 padding-bottom: 0;
}

.faq-wrap dl:not(:last-child) {
 margin-bottom: 2em;
}

.faq-wrap dt {
 font-size: var(--primary-font-size);
 color: #00B4D2;
 font-family: var(--yuGothic-ff-ja);
 font-weight: 600;
 letter-spacing: 0.04em;
 margin-bottom: 0.6em;
 line-height: 2;
 margin-left: 1.5em;
 text-indent: -1.5em;
}

.faq-wrap dd {
 font-size: var(--primary-font-size);
 color: var(--primary-font-clr);
 font-family: var(--yuGothic-ff-ja);
 font-weight: 400;
 line-height: 2.25;
 letter-spacing: 0.04em;
 margin-bottom: 40px;
}

.faq-wrap span {
 color: #00B4D2;
 display: block;
 font-size: 14px;
 line-height: 1.8 !important;
 margin-top: 0.8em;
}

@media (max-width:767px) {

 .news_content .contentsWrapper,
 .faq_content .contentsWrapper {
  padding-top: 30px;
  padding-bottom: initial;
 }

 .news_top .contentsWrapper {
  padding-top: 80px;
  padding-bottom: 80px;
 }

 .faq_content h2 {
  font-size: 18px;

 }
}




.slide-image {
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 animation: slider-1 18s linear infinite;
 z-index: -1;
}

.slide-image:nth-child(1) {
 animation-delay: -2s;
}

.slide-image:nth-child(2) {
 animation-delay: 4s;
}

.slide-image:nth-child(3) {
 animation-delay: 10s;
}

@keyframes slider-1 {
 0% {
  opacity: 0;
  transform: scale(1);
 }

 4.16% {
  opacity: 1;
 }

 33.33% {
  opacity: 1;
 }

 41.66% {
  opacity: 0;
  transform: scale(1.1);
 }

 100% {
  opacity: 0;
 }
}

.modal-wrap {
 display: none;
}

.modal .background-base {
 position: fixed;
 inset: 0;
 background-color: rgba(0, 0, 0, 0.3);
 z-index: 10;
}

.modal .modal-wrap {
 display: grid;
 place-items: center;
 position: fixed;
 inset: 0;
 z-index: 300;
}




.modal-inner-wrap {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 width: 80%;
 width: 960px;
 height: 600px;
 border-radius: 15px;
 z-index: 100;
 padding: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 pointer-events: all;
 animation: fadeIn 1s ease 0s 1 normal forwards;
}


.modal-inner-wrap .main {
 width: 80%;
}

.modal-inner-wrap .closed {
 position: absolute;
}

.modala-content,
.modalb-content,
.bt_next,
.bt_back {
 display: none;
}

.bt_next,
.bt_back {
 z-index: 200;
}

.modala .modala-content {

 display: grid;
 place-items: center;
 z-index: 20;
}

.modalb .modalb-content {
 display: grid;
 place-items: center;
 z-index: 20;
}


.modalClosed {
 position: absolute;
 top: 50px;
 right: 50px;
}

.modala .bt_next {
 display: block;
 position: absolute;
 right: 50px;
 top: 50%;
 transform: translateY(-50%);
}

.modalb .bt_back {
 display: block;
 position: absolute;
 left: 50px;
 top: 50%;
 transform: translateY(50%);
 rotate: 180deg;
 opacity: 0.5;
}

.bt_next,
.bt_back {
 opacity: 1;
 transition: 0.5s;
}

.bt_next:hover,
.bt_back:hover {
 opacity: 0.7;
}

@keyframes fadeIn {
 0% {
  opacity: 0
 }

 100% {
  opacity: 1
 }
}

@media (max-width:767px) {
 .modal-inner-wrap {
  width: calc(100% - 30px);
  padding: 20px;
  height: auto;
 }

 .modalClosed {
  position: absolute;
  top: 20px;
  right: 20px;
 }

 .modala .bt_next {
  right: 20px;
 }

 .modalb .bt_back {
  left: 20px;
 }

 .floatImg-wrap {
  width: calc(100% + 50px);
  margin: 0 -25px;
 }
}



.floatImg-wrap {
 width: 100vw;
 margin-top: 80px;
 margin-bottom: 50px;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
}

.floatImg-wrap li {
 margin-inline: 2.5vw;
}

.floatImg-wrap li img {
 max-width: 360px;
}

@media (max-width:767px) {
 .floatImg-wrap {
  margin-top: 40px;
  margin-bottom: 40px;
 }

 .floatImg-wrap li img {
  max-width: 240px;
 }
}

.slick-slider div {
 transition: none;
}