@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* CSS Document */
:root{
  --content-color-pink: #f9354c;
  --content-color-green: #036c87;
  --content-color-beige: #e9d8c6;
  --content-color-base: #000;
  --bg-img-setting: no-repeat center center / cover;
  --bg-mv-setting: no-repeat center top / 1920px;
  --bg-width-pc: max(100%, 1920px);
  --content-width: min((710vw / 7.5), 992px);
  --font-size-pc: 14px;
  --font-size-sp: calc(24vw / 7.5);
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --content-hover-speed: 0.3s;
  --content-shadow: 0 0 18px 2px rgba(0 0 0 / 20%);
  --content-shadow_bottom: 0 2px 10px rgb(0 0 0 / 40%);
  --content-arrow-down: url(../images/arrow01.png);
  --content-arrow-right: url(../images/arrow02.png);
  --content-border_s: 1px solid;
  --content-border_m: 2px solid;
  --content-border_l: 4px solid;
}

.nopc{
  display: none
}
.main{
  font-family: var(--font-serif);
  font-size: var(--content-font-size);
  font-weight: 500;
  color: var(--content-color-base);
  position: relative;
  line-height: 1.0;
}
.main *{
  box-sizing: border-box;
}
.inner{
  width: var(--content-width);
  margin: auto;
}
a{
  transition: var(--content-hover-speed);
}

.bg__wrapper{
  background: url("../images/bg_mv.png") no-repeat center top, linear-gradient(to bottom, #009bd9, #9ae0fc);
}

.title-logo {
  width: var(--content-width);
  margin: auto;
  padding-top: 70px;
  padding-bottom: 335px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav__wrapper{
  width: 100%;
  display: flex;
  box-shadow: 0 0 6px 2px rgba(0 0 0 / 35%);
}
.nav__wrapper::before,
.nav__wrapper::after{
  content: "";
  display: block;
  background: rgba(249 53 76 / 80%);
  flex-grow: 1
}
.nav__wrapper .inner{
  display: flex;
  justify-content: space-between
}
.nav__list{
  width: calc((100% - 124px));
  display: flex;
  border-left: var(--content-border_s) #FFF;
}
.nav__list>li{
  width: calc(100% / 3);
  border-right: var(--content-border_s) #FFF;
  background: rgba(249 53 76 / 80%);
  display: flex;
}
.nav__list>li>a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  padding: 24px 0 32px;
  position: relative;
}
.nav__list>li>a::after {
  content: "";
  background: var(--content-arrow-down) var(--bg-img-setting);
  width: 17px;
  height: 10px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 8px;
  margin: auto;
}
.nav__list>li:hover {
  background: rgba(249 53 76 / 50%);
}
.display_selected {
  width: 124px;
  height: 100%;
  background: var(--content-color-pink);
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  line-height: 60px;
  position: relative;
  cursor: pointer;
  z-index: 20
}
.display_selected::after {
  content: "";
  background: var(--content-arrow-down) var(--bg-img-setting);
  width: 17px;
  height: 10px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 8px;
  margin: auto;
}
.dep-select-zone {
  display: none;
  width: 124px;
  background: #FFF;
  position: absolute;
  z-index: 30;
  border: 1px solid var(--content-color-pink);
  border-top: none;
}
.dep-select li {
  cursor: default;
  padding: 2px 8px;
  font-size: 16px;
  text-align: center;
  line-height: 1.5
}
.dep-select li:hover, .dep-select li.selected {
  color: #FFF;
  background: var(--content-color-pink);
}
.close-button{
  display: none
}

.content__wrapper{
  padding: 80px 0;
}

/*** 久米アイランド紹介 ***/
.hotel__content{
  position: relative
}
.hotel__content::before{
  content: "";
  background: url("../images/img_htl.png") no-repeat left top / cover;
  width: min(50%, 939px);
  height: 637px;
  position: absolute;
  top: 0;
  right: 0;
}
.hotel__content .inner{
  position: relative
}
.hotel__content .inner::before{
  content: "";
  background: url("../images/bg_htl_txt.png") no-repeat left top / contain;
  width: 236px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;  
}
.hotel__info{
  height: 637px;
  padding-top: 114px;
  padding-left: 40px;
  margin-bottom: 60px;
}
.head-title#hotel{
  font-size: 34px;
  font-style: italic;
  color: #FFF;
  line-height: calc(42 / 34);
  margin-bottom: 40px;
  position: relative
}
.head-title>small{
  display: block;
  font-size: 70%;
}
.hotel__info .bodycopy{
  width: 392px;
  font-size: 16px;
  color: #FFF;
  line-height: calc(32 / 16);
}
.hotel__box{
  position: relative;
}
.hotel__box::before,
.hotel__box::after{
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  width: min(960px, 50%);
  height: 278px;
  position: absolute;
  z-index: 10;
}
.is-upper.hotel__box::before{
  background-image: url("../images/img_htl_pool.png");
  background-position: right top;
  top: 65px;
  left: 0;
}
.is-upper.hotel__box::after{
  background-image: url("../images/img_htl_akabana.png");
  background-position: left top;
  top: 125px;
  right: 0;
}
.is-lower.hotel__box::before{
  background-image: url("../images/img_htl_room.png");
  background-position: right top;
  top: 65px;
  left: 0;
}
.is-lower.hotel__box::after{
  background-image: url("../images/img_htl_coms.png");
  background-position: left top;
  top: 150px;
  right: 0;
}
.hotel__items{
  width: var(--content-width);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hotel__items>li{
  width: calc((100% - 20px) / 2);
}
.hotel__items>li:last-child{
  margin-top: 60px;
}
.hotel__items>li:nth-child(even) .item__title{
  text-align: right
}
.item__title>img{
  height: 38px;
}
.is-lower.hotel__box .hotel__items>li:last-child .item__title>img{
  height: 70px;
}
.item__txtbox{
  margin-top: 325px;
}
.item__name{
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 16px;
}
.item__name>small{
  font-size: 60%;
}
.item__txt{
  width: 425px;
  line-height: calc(24 / 14)
}
.note__txt{
  display: block;
  font-size: 12px;
  padding-left: 1.0em;
  text-indent: -1.0em;
}

/*** ツアー商品 ***/
.content__wrapper.tour {
  background: url("../images/bg_tour.png") repeat-y center top;
  position: relative;
}
.head-title#tour{
  display: flex;
  justify-content: center;
  gap: 32px;
}
.head-title#tour::before,
.head-title#tour::after {
  content: "";
  background: var(--bg-img-setting);
  width: 56px;
  height: 41px;
  display: block;
}
.head-title#tour::before {
  background-image: url("../images/ico_tour_lft.png");
}
.head-title#tour::after {
  background-image: url("../images/ico_tour_ryt.png");
}
.title__txt{
  text-align: center;
  font-size: 34px;
  color: var(--content-color-green);
  margin-bottom: 32px;
}
.title__txt .is-pink{
  color: var(--content-color-pink);
}
.area00{
  display: none;
}

.product-list{
  font-family: var(--font-sans);
  line-height: 1.4
}
.more__link {
  width: 600px;
  margin: 32px auto 0;
}
.more__link>a {
  display: block;
  background: var(--content-color-green);
  font-size: 18px;
  color: #FFF;
  text-align: center;
  padding: 16px;
  position: relative;
  box-shadow: var(--content_shadow);
}
.more__link>a::after {
  content: "";
  background: var(--content-arrow-right) var(--bg-img-setting);
  width: 10px;
  height: 17px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  margin: auto
}
.more__link>a:hover {
  opacity: 0.8
}

/*** スポット紹介 ***/
.content__wrapper.spot {
  background: url("../images/bg_spot.png") no-repeat center top, var(--content-color-beige);
}
.head-title#spot {
  text-align: center;
  margin-bottom: 24px;
}
.content__wrapper.spot .bodycopy {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: calc(32 / 16);  
  margin-bottom: 60px;
}
.spot__list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.spot__list>li {
  width: calc((100% - 40px) / 2)
}
.spot__list>li:first-child {
  width: 100%;
}
.spot__img {
  width: 100%;
  height: 334px;
  margin-bottom: 24px;
  border: var(--content-border_s) var(--content-color-green);
}
.spot__img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.spot__name {
  font-size: 24px;
  font-weight: bold;
  color: var(--content-color-green);
  margin-bottom: 16px;
}
.spot__txt{
  line-height: calc(24 / 14)
}
.copyright{
  margin-top: 16px;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 12px;
}

/* 動画 */
#movie__wrapper{
  width: var(--content-width);
  margin: 64px auto 0;
  position: relative;
  text-align: center;
  height: calc((var(--content-width) * 9) / 16);
  min-height: 100%;
}
#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}
#youtube {
  position: absolute;
  top: 0;
  left: 0;
  height: calc((var(--content-width) * 9) / 16);
  min-height: 100%;
  min-width: 100%;
}
#youtube-mask{
  position: absolute;
  z-index: 2;
  top:0;
  width:100%;
  height: 100%;
}

/*** 検索モジュール ***/
.content__wrapper.search {
  font-family: var(--font-sans);
  background: url("../images/search_photo.jpg") no-repeat center center
}