@charset "utf-8";
/* CSS Document */

:root{
  --content-color-base: #008EF9;
}

/*** 本島MV ***/
.mv__list .mv__img.slide01{
  background-image: url("../../../images/mv/mv_okinawa_01.jpg")
}
.mv__list .mv__img.slide02{
  background-image: url("../../../images/mv/mv_okinawa_02.jpg")
}
.mv__list .mv__img.slide03{
  background-image: url("../../../images/mv/mv_okinawa_03.jpg")
}
.mv__list .mv__img.slide04{
  background-image: url("../../../images/mv/mv_okinawa_04.jpg")
}
.mv__list .mv__img.slide05{
  background-image: url("../../../images/mv/mv_okinawa_05.jpg")
}
.content-wrapper.search{
  background-image: url("../../../images/search_photo.jpg")
}

/*** 離島MV ***/
.mv__list.islands .mv__img.slide01{
  background-image: url("../../../islands/images/mv/mv_okinawa-islands_01.jpg")
}
.mv__list.islands  .mv__img.slide02{
  background-image: url("../../../islands/images/mv/mv_okinawa-islands_02.jpg")
}
.mv__list.islands  .mv__img.slide03{
  background-image: url("../../../islands/images/mv/mv_okinawa-islands_03.jpg")
}
.mv__list.islands  .mv__img.slide04{
  background-image: url("../../../islands/images/mv/mv_okinawa-islands_04.jpg")
}
.mv__list.islands  .mv__img.slide05{
  background-image: url("../../../islands/images/mv/mv_okinawa-islands_05.jpg")
}
.content-wrapper.search.islands{
  background-image: url("../../../islands/images/search_photo.jpg")
}

/*** 石垣MV ***/
.mv__wrapper.is-lower.ishigaki{
  background-image: url("../../../islands/ishigaki/images/mv_ishigaki.jpg")
}
.content-wrapper.search.ishigaki{
  background-image: url("../../../islands/ishigaki/images/search_photo.jpg")
}
.intro__container.ishigaki{
  background-image: url("../../../islands/ishigaki/images/bg_ishigaki.jpg")
}

/*** 宮古MV ***/
.mv__wrapper.is-lower.miyako{
  background-image: url("../../../islands/miyako/images/mv_miyako.jpg")
}
.content-wrapper.search.miyako{
  background-image: url("../../../islands/miyako/images/search_photo.jpg")
}
.intro__container.miyako{
  background-image: url("../../../islands/miyako/images/bg_miyako.jpg")
}

/*** 竹富MV ***/
.mv__wrapper.is-lower.taketomi{
  background-image: url("../../../islands/taketomi/images/mv_taketomi.jpg")
}
.content-wrapper.search.taketomi{
  background-image: url("../../../islands/taketomi/images/search_photo.jpg")
}
.intro__container.taketomi{
  background-image: url("../../../islands/taketomi/images/bg_taketomi.jpg")
}

/*** 西表MV ***/
.mv__wrapper.is-lower.iriomote{
  background-image: url("../../../islands/iriomote/images/mv_iriomote.jpg")
}
.content-wrapper.search.iriomote{
  background-image: url("../../../islands/iriomote/images/search_photo.jpg")
}
.intro__container.iriomote{
  background-image: url("../../../islands/iriomote/images/bg_iriomote.jpg")
}

/*** 小浜MV ***/
.mv__wrapper.is-lower.kohama{
  background-image: url("../../../islands/kohama/images/mv_kohama.jpg")
}
.content-wrapper.search.kohama{
  background-image: url("../../../islands/kohama/images/search_photo.jpg")
}
.intro__container.kohama{
  background-image: url("../../../islands/kohama/images/bg_kohama.jpg")
}

/*** 久米MV ***/
.mv__wrapper.is-lower.kume{
  background-image: url("../../../islands/kume/images/mv_kume.jpg")
}
.content-wrapper.search.kume{
  background-image: url("../../../islands/kume/images/search_photo.jpg")
}
.intro__container.kume{
  background-image: url("../../../islands/kume/images/bg_kume.jpg")
}

/*** 与那国・波照間MV ***/
.mv__wrapper.is-lower.yonaguni{
  background-image: url("../../../islands/yonaguni-hateruma/images/mv_yonaguni.jpg")
}
.content-wrapper.search.yonaguni{
  background-image: url("../../../islands/yonaguni-hateruma/images/search_photo.jpg")
}
.intro__container.yonaguni{
  background-image: url("../../../islands/yonaguni-hateruma/images/bg_yonaguni.jpg")
}

/*** 慶良間MV ***/
.mv__wrapper.is-lower.kerama{
  background-image: url("../../../islands/kerama/images/mv_kerama.jpg")
}
.content-wrapper.search.kerama{
  background-image: url("../../../islands/kerama/images/search_photo.jpg")
}
.intro__container.kerama{
  background-image: url("../../../islands/kerama/images/bg_kerama.jpg")
}

/*** HISオリジナル ***/
.tokuten__wrapper{
  margin-bottom: min((40vw / 7.5), 48px)
}
.tokuten-title{
  margin-bottom: min((20vw/ 7.5), 20px);
  text-align: center;
}
.pc .tokuten-title>span{
  display: inline-block;
  font-size: 40px;
  font-weight: 900;
  text-align: center;
  color: #333;
  position: relative
}
.pc .tokuten-title>span::before,
.pc .tokuten-title>span::after{
  content: "／";
  display: inline-block;
}
.pc .tokuten-title>span::before{
  transform: scaleX(-1);
  margin-right: min((16vw/ 7.5), 10px);
}
.sp .tokuten-title>span{
  display: inline-block;
  font-size: calc(52vw / 7.5);
  font-weight: 900;
  text-align: center;
  color: #333;
  padding: 0 calc(80vw / 7.5);
  position: relative;
}
.sp .tokuten-title>span::before,
.sp .tokuten-title>span::after{
  content: "／";
  font-size: calc(60vw / 7.5);
  position: absolute;
  bottom: 0;
}
.sp .tokuten-title>span::before{
  transform: scaleX(-1); 
  left: 0;
}
.sp .tokuten-title>span::after{
  right: 0;
}
.tokuten__list{
  display: flex;
  gap: min((40vw / 7.5), 20px);
  flex-wrap: wrap
}
.pc .tokuten__list>li{
  width: calc((100% - 20px) / 2);
  display: flex;
  flex-direction: column;
}
.sp .tokuten__list>li{
  width: 100%
}
.midashi__box{
  background: var(--content-color-bg_gray);
  border-radius: min((20vw / 7.5), 10px);
  padding: min((32vw / 7.5), 16px) min((8vw / 7.5), 8px);
  margin-bottom: min((16vw / 7.5), 16px);
  text-align: center;
}
.tokuten__midashi{
  font-size: min((44vw / 7.5), 30px);
  font-weight: 900;
  color: var(--content-color-base);
  line-height: calc(64 / 52);
}
.tokuten__midashi>span{
  display: block;
  font-size: min((24vw / 7.5), 18px);
  color: #333;
}
.tokuten__txt{
  font-size: min((28vw / 7.5), 16px);
  color: #333;
  flex-grow: 1
}
.tokuten__txt .txt__highlight{
  color: var(--content-color-base);
  font-weight: 700;
}
.note__txt{
  display: block;
  font-size: min((22vw / 7.5), 12px);
  padding-left: 1.0em;
  text-indent: -1.0em;
}
.tokuten__link{
  display: block;
  width: 100%;
  border: 1px solid #888;
  border-radius: min((48vw / 7.5), 50px);
  background: #FFF;
  margin-top: min((16vw / 7.5), 16px);
  padding: min((24vw / 7.5), 16px);
  text-align: center;
  position: relative;
}
.tokuten__link::after{
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-right);
  width: min((48vw / 7.5), 24px);
  height: min((48vw / 7.5), 24px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto
}
.pc .tokuten__link:hover{
  background: var(--content-color-gray)
}

/*** 海開き情報 ***/
.beach__info{
  margin: min((60vw / 7.5), 60px) auto;
}
.beach__info .head-title__mid{
  color: var(--content-color-base);
}
.sp .beach__info .bodycopy{
  text-align: left
}
.sp .beach__info__wrapper{
  overflow: scroll;
}
.beach__list{
  margin-bottom: min((10vw / 7.5), 10px)
}
.sp .beach__list{
  width: 992px;
}
.beach__list>li{
  display: grid;
  grid-template-columns: 170px 142px 290px 390px;
  line-height: 2.4;
  border-bottom: var(--content-border_s) var(--content-color-gray)
}
.beach__list>li.midashi{
  text-align: center;
  color: var(--content-color-base)
}
.beach__list>li:nth-child(odd){
  background: var(--content-color-bg_gray);
}
.beach__list>li>span:not(:last-child){
  border-right: var(--content-border_s) #FFF;
}
.beach__list>li:not(.midashi)>span{
  padding-left: min((48vw / 7.5), 24px);
}
.beach__list>li>span.info__area{
  padding-left: 0;
  text-align: center
}
.pre .info__date{
  color: var(--content-color-d_gray)
}
.info__beach>small{
  font-size: min((20vw / 7.5), 12px);
  display: block;
}
.info__link{
  display: flex;
  gap: min((30vw / 7.5), 36px);
  margin-top: min((16vw / 7.5), 16px)
}
.info__link>li{
  width: calc(100% - (36px * 2) / 3);
}
.sp .info__link{
  flex-wrap: wrap;
}
.sp .info__link>li{
  width: var(--content-width);
}
.info__link>li>a{
  display: block;
  border: var(--content-border_s) var(--content-color-d_gray);
  border-radius: 50px;
  background: #FFF;
  padding: min((24vw / 7.5), 16px);
  text-align: center;
  position: relative;
}
.info__link>li>a::after {
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-right);
  width: min((48vw / 7.5), 24px);
  height: min((48vw / 7.5), 24px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.info__link>li>a:hover {
  background: var(--content-color-gray);
}

/*** エリアから選ぶ 大東島ホテルボタン ***/
.content-wrapper.area .content__flex .grid-item:last-child .grid-item__button{
  display: none
}

/*** エリア別観光スポット ***/
.js-season__select>li{
  padding: min((10vw / 7.5), 16px) min((10vw / 7.5), 8px);
}
.season__recommend .season__inbox{
  display: none
}
.season__recommend .season__inbox.is-view{
  display: block;
}
.season__recommend .season__inbox>.content__flex.season__list{
  display: flex!important
}
.sp .season__recommend .season__inbox>.content__flex.season__list{
  flex-wrap: nowrap;
  overflow: scroll
}
.sp .season__recommend .season__inbox>.content__flex.season__list>li {
  flex: 0 0 85%;
}

/*** 石垣島 八重山諸島マップ ***/
.map-wrapper.ishigaki{
  margin-bottom: 24px;
}

/*** 宮古島奈良ではの風景 ***/
.content__flex.miyako .grid-item__data{
  flex-grow: 0!important;
  margin-top: auto
}

/*** 離島アクセス 石垣島フェリーターミナルの案内 ***/
.island__note{
  margin-top: min((16vw / 7.5), 8px);
  font-size: min((22vw / 7.5), 12px);
  padding: min((8vw / 7.5), 4px) min((16vw / 7.5), 8px);
  background: var(--content-color-bg_gray)
}

/*** 与那国・波照間ページメインタイトル***/
.sp .yonaguni .title__main{
  font-size: calc(72vw / 7.5);
}