@charset "utf-8";
/* ハワイ コンドミニアム特集　PCSP共通（レスポンシブ） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

/* リセット */
h1, h2, h3, h4, h5, h6, p, ul {
  font-weight: inherit;
  font-size: inherit;
}
ol {
  margin: 0;
}
li {
  list-style: none;
}

/* 基本設定 */
.main {
  --fs-default: 16px;
  --fs-mainTit: 35px;
  --fs-title: 28px;
  --fs-subTit1: 25px;
  --fs-subTit2: 23px;
  --fs-head: 20px;
  --fs-head2: 18px;
  --fs-detail: 16px;
  --fs-point: 14px;
  --fs-sp-40: calc(80vw / 7.5);
  --fs-sp-35: calc(70vw / 7.5);
  --fs-sp-30: calc(60vw / 7.5);
  --fs-sp-25: calc(50vw / 7.5);
  --fs-sp-20: calc(40vw / 7.5);
  --fs-sp-18: calc(36vw / 7.5);
  --fs-sp-15: calc(30vw / 7.5);
  --fs-sp-14: calc(28vw / 7.5);
  --fs-sp-13: calc(26vw / 7.5);
  --fs-sp-12: calc(24vw / 7.5);
  --color-blue: #3da6bd;
  --color-darkblue: #007994;
  --color-lightblue: #9cd7e4;
  --color-paleblue: #d8f0ed;
  /*--color-paleblue: #d8f0ea;*/
  --color-lightgray: #ecf2f0;
  --color-sand: #f2ecdb;
  --color-yellow: #ffde00;
  /*--color-yellow: #ffed54;*/
  --color-green: #00ce6b;
  /*--color-green: #43ec72;*/
  --color-pink: #ffa1b9;
  --color-red: #e90000;
  --color-orange: #ff6c00;
  --color-opacity333: rgba(51,51,51,0.6);
}
@media screen and (min-width: 751px) {
#mainContents {
  font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  color: #000;
}
}

#mainContents a {
  text-decoration: none;
}
#mainContents a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 750px) {
#mainContents {
  font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: var(--fs-sp-14);
  font-weight: 500;
  line-height: 1.6;
  color: #000;
}
#mainContents a:hover {
  opacity: 1;
}
}

/* MVエリア */
@media screen and (min-width: 751px) {
#breadcrumbArea, .breadcrumb__contents {
  position: absolute;
  width: 100%;
}
.breadcrumb {
  position: absolute;
  z-index: 3000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.mvArea {
  width: 100%;
  height: 910px;
  position: relative;
  overflow-x: hidden;
}
.title_sp {
  display: none;
}
.title_pc {
  width: 992px;
  margin: 0 auto;
  position: relative;
}
.title_pc h1 {
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 500;
}
.mv_wave {
  position: absolute;
  z-index: 1000;
  background: url(../images/mv_wave.png) no-repeat;
  width: 863px;
  height: 60px;
  top: 328px;
  right: 0;
}
.mv_bg {
  width: 1850px;
  height: 480px;
  position: absolute;
  top: 240px;
  left: 0;
  z-index: 10;
  background-image: linear-gradient( -45deg, #fff 25%, var(--color-paleblue) 25%, var(--color-paleblue) 50%, #fff 50%, #fff 75%, var(--color-paleblue) 75%, var(--color-paleblue));
  background-size: 8px 8px;
  background-attachment: fixed;  
}
.mv_bgImage {
  width: 990px;
  height: 600px;
  position: absolute;
  top: -28px;
  left: calc(50% - 168px);
  z-index: 100;
  background: url(../images/mv_bg_pc.jpg) no-repeat;
}
.slider-mv1 {
  width: 816px;
  height: 550px;
  position: absolute;
  top: 273px;
  right: calc(50% - 220px);
  z-index: 200;
  background-color: var(--color-lightblue);
}
.slider-mv1 .swiper-wrapper {
  width: 796px;
  height: 520px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
}
.slider-mv1 .swiper-wrapper .slide_mv1_01 {
  background: url(../images/mv1_01_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
.slider-mv1 .swiper-wrapper .slide_mv1_02 {
  background: url(../images/mv1_02_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
.slider-mv1 .swiper-wrapper .slide_mv1_03 {
  background: url(../images/mv1_03_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
.slider-mv2 {
  width: 315px;
  height: 232px;
  position: absolute;
  top: 510px;
  left: calc(50% + 295px);
  z-index: 300;
}
.slider-mv2 .swiper-wrapper .slide_mv2_01 {
  background: url(../images/mv2_01_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
.slider-mv2 .swiper-wrapper .slide_mv2_02 {
  background: url(../images/mv2_02_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
.slider-mv2 .swiper-wrapper .slide_mv2_03 {
  background: url(../images/mv2_03_pc.jpg) no-repeat;
  width: 100%;
  height: auto;
}
}
@media screen and (max-width: 750px) {
.mvArea {
  width: 100%;
  height: calc(1000vw / 7.5);
  position: relative;
  overflow-x: hidden;
}
.title_pc {
  display: none;
}
.title_sp h1 {
  margin-top: calc(50vw / 7.5);
  margin-left: calc(30vw / 7.5);
}
.title_sp h1 img {
  width:  calc(640vw / 7.5);
}
.mv_wave {
  position: absolute;
  z-index: 1000;
  background: url(../images/mv_wave.png) no-repeat;
  background-size: calc(1070vw / 7.5);
  width: 100%;
  height: calc(75vw / 7.5);
  top: calc(910vw / 7.5);
  right: calc(-420vw / 7.5);
  overflow: hidden;
}
.mv_imageArea {
  position: relative;
  width: 100%;
  margin-top: calc(22vw / 7.5);
}
.mv_bg {
  width: 100%;
  height: calc(585vw / 7.5);
  background-image: linear-gradient( -45deg, #fff 25%, var(--color-paleblue) 25%, var(--color-paleblue) 50%, #fff 50%, #fff 75%, var(--color-paleblue) 75%, var(--color-paleblue));
  background-size: 8px 8px;
  background-attachment: fixed;  
}
.mv_bgImage {
  display: none;
}
.slider-mv1 {
  width: calc(660vw / 7.5);
  height: calc(508vw / 7.5);
  position: absolute;
  top: calc(20vw / 7.5);
  right: 0;
  z-index: 200;
  background-color: var(--color-lightblue);
}
.slider-mv1 .swiper-wrapper {
  width: calc(640vw / 7.5);
  height: calc(475vw / 7.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
}
.slider-mv1 .swiper-wrapper .slide_mv1_01 {
  background: url(../images/mv1_01_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
.slider-mv1 .swiper-wrapper .slide_mv1_02 {
  background: url(../images/mv1_02_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
.slider-mv1 .swiper-wrapper .slide_mv1_03 {
  background: url(../images/mv1_03_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
.slider-mv2 {
  width: calc(315vw / 7.5);
  height: calc(232vw / 7.5);
  position: absolute;
  top: calc(468vw / 7.5);
  left: 0;
  z-index: 310;
}
.slider-mv2 .swiper-wrapper .slide_mv2_01 {
  background: url(../images/mv2_01_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
.slider-mv2 .swiper-wrapper .slide_mv2_02 {
  background: url(../images/mv2_02_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
.slider-mv2 .swiper-wrapper .slide_mv2_03 {
  background: url(../images/mv2_03_sp.jpg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: auto;
}
}

/* ナビ */
@media screen and (min-width: 751px) {
.navArea {
  width: 100%;
  margin-bottom: 80px;
}
.nav {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.nav a {
  text-align: center;
  padding: 24px 25px 27px 43px;
  font-size: var(--fs-head2);
  font-weight: 700;
  color: #fff;
  background-color: var(--color-blue);
  position: relative;
  margin-right: 20px;
  line-height: 1.5;
}
.nav a:last-child {
  margin-right: 0;
}
.nav a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 7px);
  left: 25px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
}
@media screen and (max-width: 750px) {
.navArea {
  width: 100%;
  height: calc(197vw / 7.5);
  position: relative;
}
.nav {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: absolute;
  top: calc(-66vw / 7.5);
  left: 0;
  z-index: 3000;
}
.nav a {
  font-size: var(--fs-sp-13);
  font-weight: 700;
  color: #fff;
  background-color: var(--color-blue);
  padding: 12px 12px 12px 20px;
  position: relative;
  margin-left: 3vw;
  margin-top: 3vw;
  line-height: 1.5;
}
.nav a:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: calc(50% - 4px);
  left: 11px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
}

/* コンテンツエリア */
@media screen and (min-width: 751px) {
.contentBox {
  width: 992px;
  padding-top: 90px;
  margin: 0 auto;
}
.contentBox_wide {
  width: 100%;
  padding-top: 90px;
}
.contentBox_bg {
  width: 100%;
  padding: 90px 0;
}
h2 {
  text-align: center;
  font-size: var(--fs-mainTit)!important;
  font-weight: 800!important;
}
}
@media screen and (max-width: 750px) {
.contentBox {
  width: 100%;
  padding: 12vw 5vw 0;
}
.contentBox_wide {
  width: 100%;
  padding-top: 12vw;
}
.contentBox_bg {
  width: 100%;
  padding: 10vw 5vw;
}
h2 {
  text-align: center;
  font-size: var(--fs-sp-25)!important;
  font-weight: 800!important;
  line-height: 1.4;
}
}

/*  コンドミニアムとは？ */
@media screen and (min-width: 751px) {
#intro {
  border-top: solid 50px var(--color-sand);
  background: url(../images/lead_bg.jpg) repeat center top;
  position: relative;
}
.introTxt {
  width: 992px;
  margin: 70px auto 0;
  font-weight: 500;
}
.basic_infoBox {
  width: 992px;
  margin: 70px auto 0;
  padding: 60px;
  background-color: var(--color-lightgray);
}
.basic_infoBox h3 {
  text-align: center;
  font-size: var(--fs-subTit1);
  font-weight: 800;
  margin-bottom: 50px;
}
.basic_infoTxt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.basic_infoTxt li {
  width: 100%;
  margin-bottom: 50px;
  font-size: var(--fs-detail);
}
.basic_infoTxt li:last-child {
  margin-bottom: 0;
}
.basic_infoTxt li .basic_infoHead {
  font-weight: 700;
  border-bottom: solid 4px var(--color-blue);
  margin-bottom: 15px;
  font-size: var(--fs-head2);
  display: inline-block;
}
}
@media screen and (max-width: 750px) {
#intro {
  border-top: solid 7vw var(--color-sand);
  background: url(../images/lead_bg.jpg) repeat center top;
  background-size: 100%;
  position: relative;
  padding-top: 7vw;
}
.introTxt {
  width: 100%;
  margin: 7vw auto 0;
  font-weight: 700;
}
.basic_infoBox {
  width: 100%;
  margin: 10vw auto 0;
  padding: 8vw 6vw;
  background-color: var(--color-lightgray);
}
.basic_infoBox h3 {
  text-align: center;
  font-size: var(--fs-sp-20);
  font-weight: 800;
  margin-bottom: 5vw;
}
.basic_infoTxt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.basic_infoTxt li {
  width: 100%;
  margin-bottom: 5vw;
}
.basic_infoTxt li:last-child {
  margin-bottom: 0;
}
.basic_infoTxt li .basic_infoHead {
  font-weight: 700;
  border-left: solid 8px var(--color-blue);
  margin-bottom: 3vw;
  font-size: var(--fs-sp-15);
  display: inline-block;
  position: relative;
  line-height: 1.2;
  padding-left: 5px;
}
}

/*  楽しみ方 */
@media screen and (min-width: 751px) {
.enjoyBox {
  display: flex;
  flex-wrap: wrap;
  width: 992px;
  margin: 70px auto 0;
}
.enjoyBox li {
  width: 100%;
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.enjoyBox li:last-child {
  margin-bottom: 0;
}
.enjoyBox li:nth-child(even) {
  flex-direction: row-reverse;
}
.enjoyImg {
  width: 420px;
  height: 275px;
}
.enjoyTxt {
  width: calc(100% - 460px);
  font-size: var(--fs-detail);
}
.enjoyTxt p {
  font-size: var(--fs-head2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}
}
@media screen and (max-width: 750px) {
.enjoyBox {
  display: flex;
  flex-wrap: wrap;
  margin: 10vw auto 0;
  width: 100%;
}
.enjoyBox li {
  width: 100%;
  margin-bottom: 7vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.enjoyBox li:last-child {
  margin-bottom: 0;
}
.enjoyImg {
  width: 100%;
  height: auto;
}
.enjoyTxt {
  width: 100%;
  font-size: var(--fs-sp-14);
  margin-top: 4vw;
}
.enjoyTxt p {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(5vw / 2);
  font-size: var(--fs-sp-18);
}
/*.enjoyBox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2vw;
  margin: 10vw auto 0;
  width: 100%;
}
.enjoyBox li {
  width: 100%;
  margin-bottom: 6vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.enjoyBox li:last-child {
  margin-bottom: 0;
}
.enjoyImg {
  width: 38%;
  height: auto;
}
.enjoyTxt {
  width: 58%;
  font-size: var(--fs-sp-15);
}
.enjoyTxt p {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2vw;
  font-size: var(--fs-sp-15);
}*/
}

/* おすすめコンドミニアム -都市ナビ- */
@media screen and (min-width: 751px) {
.areaNav_box {
  width: 100%;
  height: 60px;
  position: relative;
  background: url(../images/wave.png) repeat center;
  background-size: 474px 60px;
  margin: 30px 0 150px;
}
.areaNav {
  position: absolute;
  width: 992px;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.areaNav a {
  width: 250px;
  padding: 15px 0 35px;
  background-color: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-subTit2);
  margin-right: 40px;
  text-align: center;
  position: relative;
}
.areaNav a:last-child {
  margin-right: 0;
}
.areaNav a:after {
  margin-right: 0;
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 22px;
  left: calc(50% - 7px);
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
}
@media screen and (max-width: 750px) {
#condo {
  margin-top: 5vw;
}
.areaNav_box {
  width: 100%;
  height: 42px;
  position: relative;
  background: url(../images/wave.png) repeat center;
  background-size: 328px 42px;
  margin: 15px 0 18vw;
}
.areaNav {
  position: absolute;
  width: 92%;
  top: 57px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.areaNav a {
  width: calc(100% / 2.5);
  padding: 12px 0 25px;
  background-color: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sp-15);
  margin-right: 3vw;
  text-align: center;
  position: relative;
}
.areaNav a:last-child {
  margin-right: 0;
}
.areaNav a:after {
  margin-right: 0;
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 17px;
  left: calc(50% - 5px);
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
}

/* おすすめコンドミニアム -共通- */
@media screen and (min-width: 751px) {
.map {
  width: 992px;
  margin: 0 auto;
  padding-top: 220px;
}
#gMap_HNL,
#gMap_KOA,
#gMap_OGG {
  width: 100%;
  height: 600px;
  display: block;
}

#HNL,#KOA,#OGG {
  position: relative;
}
.cityHead1 {
  font-size: var(--fs-subTit1);
  font-weight: 800;
  width: 100%;
  padding-bottom: 10px;
}
.cityHead2 {
  font-size: var(--fs-subTit2);
  font-weight: 700;
  width: 100%;
  padding-bottom: 6px;
}
}
@media screen and (max-width: 750px) {
.map {
  width: 100%;
  margin: 0 auto;
  padding-top: 35vw;
}
#gMap_HNL,
#gMap_KOA,
#gMap_OGG {
  width: 100%;
  height: calc(510vw / 7.5);
  display: block;
}

#HNL,#KOA,#OGG {
  position: relative;
}
.cityHead1 {
  font-size: var(--fs-sp-15);
  font-weight: 800;
  width: 100%;
  padding-bottom: 5px;
}
.cityHead2 {
  font-size: var(--fs-sp-13);
  font-weight: 700;
  width: 100%;
}
}

/* HNL追従 */
@media screen and (min-width: 751px) {
#followBtn_HNL {
  background-color: var(--color-yellow);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 90px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_HNL.is-fixed{
  position: fixed;
  top: -90px; /* offsetY */
  left: calc(50% - 90px);
}
#followBtn_HNL.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}
@media screen and (max-width: 750px) {
#followBtn_HNL {
  background-color: var(--color-yellow);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 55px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_HNL.is-fixed{
  position: fixed;
  top: -55px; /* offsetY */
  left: calc(50% - 55px);
}
#followBtn_HNL.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}

/* KOA追従 */
@media screen and (min-width: 751px) {
#followBtn_KOA {
  background-color: var(--color-pink);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 90px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_KOA.is-fixed{
  position: fixed;
  top: -90px; /* offsetY */
  left: calc(50% - 90px);
}
#followBtn_KOA.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}
@media screen and (max-width: 750px) {
#followBtn_KOA {
  background-color: var(--color-pink);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 55px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_KOA.is-fixed{
  position: fixed;
  top: -55px; /* offsetY */
  left: calc(50% - 55px);
}
#followBtn_KOA.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}

/*  OGG追従 */
@media screen and (min-width: 751px) {
#followBtn_OGG {
  background-color: var(--color-green);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 90px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_OGG.is-fixed{
  position: fixed;
  top: -90px; /* offsetY */
  left: calc(50% - 90px);
}
#followBtn_OGG.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}
@media screen and (max-width: 750px) {
#followBtn_OGG {
  background-color: var(--color-green);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 55px);
  z-index: 1100;
  max-height: calc(100vh - 0px); /* offsetY分をマイナス */
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#followBtn_OGG.is-fixed{
  position: fixed;
  top: -55px; /* offsetY */
  left: calc(50% - 55px);
}
#followBtn_OGG.is-fixed.is-end{
  position: absolute;
  top: auto;
  bottom: 0;
}
}

@media screen and (min-width: 751px) {
.stayStyle_box {
  width: 992px;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-detail);
  font-weight: 700;
  line-height: 1;
}
.style_top {
  width: 134px;
  text-align: center;
  background-color: var(--color-paleblue);
  padding: 15px 0;
  color: var(--color-blue);
}
.style_item {
  width: calc(100% - 134px);
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  background-image: linear-gradient( -45deg, #fff 25%, var(--color-paleblue) 25%, var(--color-paleblue) 50%, #fff 50%, #fff 75%, var(--color-paleblue) 75%, var(--color-paleblue));
  background-size: 8px 8px;
  background-attachment: fixed;  
}
.style_item a {
  color: #000;
  padding-left: 20px;
  margin-right: 30px;
  position: relative;
}
.style_item a:last-child {
  margin-right: 0;
}
.style_item a:before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: calc(50% - 5px);
  left: 6px;
  border-bottom: 2px solid var(--color-blue);
  border-left: 2px solid var(--color-blue);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}

.wave {
  width: 100%;
  height: 60px;
  position: relative;
  background: url(../images/wave.png) repeat center;
  background-size: 474px 60px;
  margin: 60px 0;  
}
.wave:last-child {
  display: none;
}
}
@media screen and (max-width: 750px) {
.stayStyle_box {
  width: 100%;
  margin: 5vw auto 0;
  padding: 0 5vw;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-sp-12);
  font-weight: 700;
  line-height: 1.1;
}
.style_top {
  width: 25vw;
  background-color: var(--color-paleblue);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.style_item {
  width: calc(100% - 25vw);
  padding: 3vw 2vw 0 2vw;
  display: flex;
  flex-wrap: wrap;
  background-image: linear-gradient( -45deg, #fff 25%, var(--color-paleblue) 25%, var(--color-paleblue) 50%, #fff 50%, #fff 75%, var(--color-paleblue) 75%, var(--color-paleblue));
  background-size: 8px 8px;
  background-attachment: fixed;
  font-weight: 500;
}
.style_item a {
  width: 100%;
  color: #000;
  padding-left: 20px;
  margin-bottom: 3vw;
  position: relative;
}
.style_item a:last-child {
  margin-right: 0;
}
.style_item a:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: calc(50% - 4px);
  left: 8px;
  border-bottom: 2px solid var(--color-blue);
  border-left: 2px solid var(--color-blue);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}

.wave {
  width: 100%;
  height: 42px;
  position: relative;
  background: url(../images/wave.png) repeat center;
  background-size: 328px 42px;
  margin: 10vw 0;  
}
}

/* おすすめコンドミニアム -ホテル- */
@media screen and (min-width: 751px) {
.hotelBox {
  width: 992px;
  margin: 100px auto 0;
  text-align: center;
}
.hotelBox h3 {
  font-size: var(--fs-title);
  font-weight: 800;
  border-bottom: solid 7px var(--color-blue);
  display: inline-block;
}
.hotelBox_lead {
  padding: 20px 0 60px;
  font-size: var(--fs-head2);
  font-weight: 500;
}
.hotelLineup {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.hotelLineup li {
  width: 100%;
  margin-bottom: 110px;
}
.hotelLineup li:last-child {
  margin-bottom: 0;
}
.hotel_detailBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px 0 0;
}
.detail_L {
  width: 620px;
  text-align: left;
}
.detail_R {
  width: 320px;
  text-align: right;
}
.caption {
  position: absolute;
  width: 100%;
  background-color: var(--color-opacity333);
  bottom: 0;
  text-align: right;
  color: #fff;
  padding: 0 8px;
  font-size: var(--fs-point);
}
.hotelName {
  font-size: var(--fs-subTit1);
  font-weight: 800;
}
.hotelRank {
  text-align: right;
}
.hotelRank img {
  width: 130px;
}
.hotelTxt {
  margin-top: 30px;
}
.hotelLocation {
  margin-top: 30px;
  font-size: var(--fs-detail);
}
.hotelLocation p {
  border-left: solid 8px var(--color-blue);
  line-height: 1;
  font-weight: 800;
  margin-bottom: 10px;
  padding: 3px 0 4px 6px;
}
.hotelIcon {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  font-weight: 500;
}
.hotelIcon p {
  padding: 10px 12px 11px 12px;
  line-height: 1;
  margin-top: 10px;
  margin-right: 10px;
  font-size: var(--fs-detail);
  background-color: var(--color-paleblue);
}
.hotelIcon p:last-child {
  margin-right: 0;
}
.price {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--color-red);
  line-height: 1.4;
}
.price span {
  font-size: var(--fs-mainTit);
}
.priceInfo {
  font-size: var(--fs-point);
  margin-top: 15px;
}
.number {
  margin-top: 10px;
}
.searchBtn {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.searchBtn a {
  width: 100%;
  padding: 23px 0;
  margin-bottom: 20px;
  font-size: var(--fs-head);
  font-weight: 700;
  line-height: 1;
  position: relative;
  background-color: var(--color-orange);
  color: #fff;
  border-radius: 10px;
  text-align: center;
}
.searchBtn a:last-child {
  margin-bottom: 0;
}
.searchBtn a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_white.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 25px;
  position: absolute;
  z-index: 100;
}
}
@media screen and (max-width: 750px) {
.hotelBox {
  width: 100%;
  margin: 15vw auto 0;
  text-align: center;
}
.hotelBox h3 {
  font-size: var(--fs-sp-20);
  font-weight: 800;
  border-bottom: solid 5px var(--color-blue);
  display: inline-block;
  line-height: 1.9;
}
.hotelBox_lead {
  padding: 4vw 0 7vw;
  font-size: var(--fs-sp-14);
  font-weight: 500;
}
.hotelLineup {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.hotelLineup li {
  width: 100%;
  margin-bottom: 15vw;
}
.hotelLineup li:last-child {
  margin-bottom: 0;
}
.hotel_detailBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5vw auto 0;
  text-align: left;
  width: 100%;
}
.detail_L {
  width: 100%;
  padding: 0 5vw;
}
.detail_R {
  width: 100%;
  padding: 0 5vw;
  margin-top: 6vw;
}
.caption {
  position: absolute;
  width: 100%;
  background-color: var(--color-opacity333);
  bottom: 0;
  text-align: right;
  color: #fff;
  padding: 2px 5px 3px;
  font-size: var(--fs-sp-12);
}
.hotelName {
  font-size: var(--fs-sp-18);
  font-weight: 800;
}
.hotelRank {
  text-align: right;
  line-height: 1;
  margin-top: calc(3vw / 2);
}
.hotelRank img {
  width: calc(200vw / 7.5);
}
.hotelTxt {
  margin-top: 5vw;
  font-size: var(--fs-sp-14);
}
.hotelLocation {
  margin-top: 4vw;
  font-size: var(--fs-sp-14);
}
.hotelLocation p {
  border-left: solid 8px var(--color-blue);
  line-height: 1;
  font-weight: 800;
  margin-bottom: 2vw;
  padding: 3px 0 4px 6px;
  font-size: var(--fs-sp-15);
}
.hotelIcon {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2vw;
}
.hotelIcon p {
  padding: 6px 7px 7px;
  line-height: 1;
  font-size: var(--fs-sp-13);
  font-weight: 500;
  background-color: var(--color-paleblue);
  margin-right: 3vw;
  margin-top: 3vw;
}
.hotelIcon p:last-child {
  margin-right: 0;
}
.price {
  font-size: var(--fs-sp-20);
  font-weight: 800;
  color: var(--color-red);
  line-height: 1.4;
  text-align: right;
}
.price span {
  font-size: var(--fs-sp-25);
}
.priceInfo {
  font-size: var(--fs-sp-12);
  margin-top: 3vw;
  text-align: right;
}
.number {
  margin-top: 1vw;
  font-size: var(--fs-sp-14);
  text-align: right;
}
.searchBtn {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.searchBtn a {
  width: 100%;
  padding: 15px 60px 15px 50px;
  margin-bottom: 5vw;
  font-size: var(--fs-sp-15);
  font-weight: 700;
  position: relative;
  background-color: var(--color-orange);
  color: #fff;
  border-radius: 50px;
  text-align: center;
}
.searchBtn a:last-child {
  margin-bottom: 0;
}
.searchBtn a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_white.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 30px;
  position: absolute;
  z-index: 100;
}
}

/* おすすめコンドミニアム - swiper - */
@media screen and (min-width: 751px) {
.slider-hotel .swiper-wrapper {
    width: 100%;
}
.slider-hotel .swiper-slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}
.slider-hotel .swiper-button-prev,.swiper-button-next {
    position: absolute;
    top: calc(50% - 10px);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    margin-left: 10px;
    margin-right: 10px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.slider-hotel .swiper-pagination {
  position: static;
  text-align: center;
}
}
@media screen and (max-width: 750px) {
.slider-hotel .swiper-wrapper {
    width: 100%;
}
.slider-hotel .swiper-slide img {
  width: 100%;
  height: auto;
}
.slider-hotel .swiper-button-prev,.swiper-button-next {
    position: absolute;
    top: 49%;
    width: calc(40vw / 7.5);
    height: calc(40vw / 7.5);
    /*margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);*/
    margin-left: 0;
    margin-right: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.7;
}
.slider-hotel .swiper-button-prev:after,
.slider-hotel .swiper-button-next:after {
  font-size: calc(70vw / 7.5);
}
.slider-hotel .swiper-pagination {
  position: static;
  text-align: center;
}
}


/* よくある質問 */
@media screen and (min-width: 751px) {
#faq {
  background-color: var(--color-lightgray);
  margin: 100px 0 0;
}
.faqBox {
  width: 992px;
  margin: 70px auto 0;
}
.faqBox li {
  margin-bottom: 30px;
}
.faq_Q {
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}
.faq_Q:before {
  content: "Q.";
  position: absolute;
  left: 0;
  bottom: 1px;
}
.faq_A {
  font-size: var(--fs-detail);
  margin-top: 10px;
}
}
@media screen and (max-width: 750px) {
#faq {
  background-color: var(--color-lightgray);
  margin: 15vw 0 0;
}
.faqBox {
  width: 100%;
  margin: 10vw auto 0;
  font-size: var(--fs-sp-15);
}
.faqBox li {
  margin-bottom: 7vw;
}
.faqBox li:last-child {
  margin-bottom: 0;
}
.faq_Q {
  font-weight: 700;
  padding-left: var(--fs-sp-20);
  position: relative;
}
.faq_Q:before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
}
.faq_A {
  margin-top: 2vw;
}
}


/* おすすめスポット */
@media screen and (min-width: 751px) {
.spotBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 992px;
  margin: 70px auto 0;
}
.spotBox2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 992px;
  margin: 40px auto 0;
}
.spotBox li {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.spotBox li:last-child {
  margin-bottom: 0;
}
.spotBox2 li {
  width: calc(50% - 20px);
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.spotBox .spotImg {
  width: 340px;
  height: 225px;
}
.spotBox2 .spotImg {
  width: 200px;
  height: 200px;
}
.spotImg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.spotBox .spotTxt {
  width: calc(100% - 380px);
}
.spotBox2 .spotTxt {
  width: calc(100% - 240px);
}
.spotTxt {
  width: calc(100% - 380px);
  font-size: var(--fs-detail);
}
.spotTxt p {
  font-size: var(--fs-head2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}
}
@media screen and (max-width: 750px) {
.spotBox {
  display: flex;
  flex-wrap: wrap;
  margin: 10vw auto 0;
  width: 100%;
}
.spotBox2 {
  display: flex;
  flex-wrap: wrap;
  margin: 7vw auto 0;
  width: 100%;
}
.spotBox li,
.spotBox2 li {
  width: 100%;
  margin-bottom: 7vw;
  display: flex;
  flex-wrap: wrap;
}
.spotBox li:last-child,
.spotBox2 li:last-child {
  margin-bottom: 0;
}
.spotBox .spotImg,
.spotBox2 .spotImg {
  width: 100%;
  height: auto;
}
.spotImg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.spotBox .spotTxt,
.spotBox2 .spotTxt {
  width: 100%;
  font-size: var(--fs-sp-15);
  margin-top: 4vw;
}
.spotTxt {
  width: 100%;
  font-size: var(--fs-sp-15);
}
.spotTxt p {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(5vw / 2);
  font-size: var(--fs-sp-18);
}
}


/* リンクボタン */
@media screen and (min-width: 751px) {
.linkBtn_box {
  width: 100%;
  margin: 0 auto;
  padding: 90px 0 0;
}
.linkBtn {
  width: 992px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.linkBtn a {
  text-align: center;
  padding: 15px 0;
  background-color: var(--color-darkblue);
  color: #fff;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
  width: calc((100% / 2) - 30px);
}
.linkBtn a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_white.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 30px;
  position: absolute;
  z-index: 100;
}
.linkBtn_jump,
.linkBtn_jump_up {
  width: 992px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.linkBtn_blank {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.linkBtn_jump a,
.linkBtn_jump_up a {
  text-align: center;
  margin-right: 30px;
  padding: 15px 30px 15px 50px;
  border: solid 2px var(--color-darkblue);
  background-color: #fff;
  color: #000;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
}
.linkBtn_blank a {
  text-align: center;
  margin-right: 30px;
  padding: 15px 50px 15px 30px;
  border: solid 2px var(--color-darkblue);
  background-color: #fff;
  color: #000;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
}
.linkBtn_jump a:last-child,
.linkBtn_jump_up a:last-child,
.linkBtn_blank a:last-child {
  margin-right: 0;
}
.linkBtn_jump a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 6px);
  left: 30px;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}
.linkBtn_jump_up a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: calc(50% - 8px);
  left: 30px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}
.linkBtn_blank a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_black.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 25px;
  position: absolute;
  z-index: 100;
}
}
@media screen and (max-width: 750px) {
.linkBtn_box {
  width: 100%;
  padding: 10vw 0 0;
  display: flex;
  flex-wrap: wrap;
}
.linkBtn {
  width: 100%;
  margin: 0 5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.linkBtn a {
  width: 100%;
  text-align: center;
  padding: 15px 60px 15px 50px;
  background-color: var(--color-darkblue);
  color: #fff;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
}
.linkBtn a:last-child {
  margin-top: 5vw;
}
.linkBtn a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_white.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 30px;
  position: absolute;
  z-index: 100;
}
.linkBtn_jump,
.linkBtn_jump_up {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.linkBtn_blank {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.linkBtn_jump a,
.linkBtn_jump_up a {
  width: 100%;
  text-align: center;
  margin-right: 30px;
  padding: 15px 30px 15px 50px;
  border: solid 2px var(--color-darkblue);
  background-color: #fff;
  color: #000;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
}
.linkBtn_blank a {
  width: 100%;
  text-align: center;
  margin-right: 30px;
  padding: 15px 50px 15px 30px;
  border: solid 2px var(--color-darkblue);
  background-color: #fff;
  color: #000;
  position: relative;
  border-radius: 50px;
  font-weight: 700;
}
.linkBtn_jump a:last-child,
.linkBtn_jump_up a:last-child,
.linkBtn_blank a:last-child {
  margin-right: 0;
}
.linkBtn_jump a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 6px);
  left: 30px;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}
.linkBtn_jump_up a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: calc(50% - 8px);
  left: 30px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 100;
}
.linkBtn_blank a:after {
  content: "";
  background: url(/cmn/icon/icon_launch_black.svg) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
  right: 25px;
  position: absolute;
  z-index: 100;
}
}

/* コンテンツフッター */
@media screen and (min-width: 751px) {
.footerArea {
  width: 100%;
  /*margin: 100px auto 0;*/
  padding: 90px 0;
  text-align: center;
  background-image: url(../images/footer_bg.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.footerArea:before {
  content: "";
  position: absolute;
  background-image: linear-gradient( -45deg, rgba(255,255,255,0.6) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
  background-size: 6px 6px;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.footerBox {
  width: 992px;
  margin: 0 auto;
  z-index: 3;
  position: relative;
}
.bnrArea {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bnrArea li {
  width: calc((100% / 3) - 10px);
  background-color: #fff;
}
.footer_recommend {
  width: 100%;
  margin: 0 auto;
  /*margin: 40px auto 0;*/
  padding: 40px 50px 50px 50px;
  background-color: #fff;
}
.footer_recommend p {
  font-size: var(--fs-subTit1);
  font-weight: 800;
}
.recommendBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px 0 -40px;
}
.recommendBox a {
  width: calc((100% / 3) - 17px);
}
.recommendImg {
  width: 100%;
}
.recommendImg img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.recommendTxt {
  color: #000;
  font-size: var(--fs-detail);
  text-align: left;
  margin-top: 10px;
}
}
@media screen and (max-width: 750px) {
.footerArea {
  width: 100%;
  /*margin: 15vw auto 0;*/
  padding: 10vw 5vw;
  text-align: center;
  background-image: url(../images/footer_bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.footerArea:before {
  content: "";
  position: absolute;
  background-image: linear-gradient( -45deg, rgba(255,255,255,0.6) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.6) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
  background-size: 3px 3px;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.footerBox {
  width: 100%;
  z-index: 3;
  position: relative;
}
.bnrArea {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.bnrArea li {
  width: 100%;
  background-color: #fff;
  margin-bottom: 4vw;
  /*border: 4px solid var(--color-paleblue);*/
}
.bnrArea li:last-child {
  margin-bottom: 0;
}
.footer_recommend {
  width: 100%;
  margin: 0 auto;
  /*margin: 10vw auto 0;*/
  padding: 7vw 5vw 10vw;
  background-color: #fff;
}
.footer_recommend p {
  font-size: var(--fs-sp-20);
  font-weight: 800;
}
.recommendBox {
  display: flex;
  flex-wrap: wrap;
  margin: 7vw 0 0;
}
.recommendBox a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 7vw;
}
.recommendBox a:last-child {
  margin-bottom: 0;
}
.recommendImg {
  width: 26%;
}
.recommendImg img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.recommendTxt {
  width: 70%;
  color: #000;
  font-size: var(--fs-sp-13);
  text-align: left
}
}


/*PC/SP出し分け*/
@media screen and (max-width: 750px) {
  .PC_on {
    display: none!important;
  }
}
@media screen and (min-width: 751px) {
  .SP_on {
    display: none!important;
  }
}

/*  SP - ホテルTOPに戻るボタン */
.his-top__link {
  display: none;
}

/* SP - パンくず */
@media screen and (max-width: 750px) {
#breadcrumbArea, .breadcrumb__contents {
    overflow-x: scroll;
}
}

/* トップに戻るボタン */
@media screen and (min-width: 751px) {
.goTop {
    z-index: 1000;
}
}
@media screen and (max-width: 750px) {
.goTop {
    z-index: 5000;
}
}