@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-orange: #ff8c00;
  --content-color-solo: #478180;
  --content-color-friend: #aa7430;
  --content-color-couple: #004a93;
  --content-color-woman: #ef454a;
  --content-color-married: #583000;
  --content-color-family: #007995;
  --bg-img-setting: no-repeat center center / cover;
  --bg-width-pc: max(100%, 1920px);
  --content-width: min((710vw / 7.5), 992px);
  --font-size-pc: 14px;
  --font-size-sp: calc(24vw / 7.5);
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --content-hover-speed: 0.3s;
  --content-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
  --content-border_s: 1px solid;
  --content-border_m: 3px solid;
  --content-border_l: 4px solid;
}

.pc .nopc,
.sp .nosp{
  display: none
}
.main{
  font-family: var(--font-serif);
  font-size: var(--content-font-size);
  color: #000;
  font-weight: 500;
  position: relative;
}
.main *{
  box-sizing: border-box;
}
.inner{
  width: var(--content-width);
  margin: auto;
}
a{
  transition: var(--content-hover-speed);
}

/***** MV・ナビ *****/
.pc .title__wrapper {
  width: 100%;
  height: 500px;
  background: url(../img/bg_mvpc.jpg) no-repeat center top / auto;
}
.sp .title__wrapper{
  width: 100%;
  height: calc(500vw / 7.5);
}
.main-title{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.nav__wrapper {
  width: 100%;
  padding: min((24vw / 7.5), 24px) 0;
}
.nav__list {
  width: var(--content-width);
  display: flex;
  margin: auto;
}
.pc .nav__list{
  border-left: var(--content-border_s) #f6e1c7;
}
.pc .nav__list>li{
  width: calc(100% / 6);
  border-right: var(--content-border_s) #f6e1c7;
}
.sp .nav__list{
  flex-wrap: wrap
}
.sp .nav__list>li{
  width: calc(100% / 3);
  border-right: var(--content-border_s) #f6e1c7;
}
.sp .nav__list>li:nth-child(-n+3){
  margin-bottom: calc(24vw / 7.5);
}
.sp .nav__list>li:nth-child(3n){
  border-right: none
}
.nav__list>li>a {
  display: block;
  font-size: min((26vw / 7.5), 16px);
  text-align: center;
  padding: min((4vw / 7.5), 16px) 0 min((32vw / 7.5), 24px);
  position: relative
}
.nav__list>li>a::after{
  content: "";
  background: var(--bg-img-setting) url("../img/arrow_down.svg");
  width: min((25vw / 7.5), 19px);
  height: min((13vw / 7.5), 10px);
  position: absolute;
  right: 0;
  bottom: min((13vw / 7.5), 10px);
  left: 0;
  margin: auto;
}
@media (hover: hover){
  .nav__list>li>a:hover{
    color: var(--content-color-orange);
  }
}

.main__content{
  padding-bottom: min((80vw / 7.5), 80px);
}
.bodycopy{
  font-size: min((26vw / 7.5), 18px);
  line-height: min((40 / 26), (32 / 18));
}
.bodycopy.is-margin{
  margin-bottom: min((40vw / 7.5), 40px)
}
.info__bnr{
  margin: min((40vw / 7.5), 40px) auto min((70vw / 7.5), 70px);
  text-align: center;
}
@media (hover: hover){
  .info__bnr>a:hover{
    opacity: .8;
  }
}
.content__wrapper+.content__wrapper{
  margin-top: min((160vw / 7.5), 160px);
}
.item__content,
.hotel__content{
  display: flex;
  gap: min((30vw / 7.5), 10px);
}
.sp .item__content,
.sp .hotel__content{
  flex-wrap: wrap;
}
.item__content{
  margin-bottom: min((48vw / 7.5), 20px)
}
.main__img{
  width: min(100%, 496px);
  height: min((516vw / 7.5), 361px);
}
.sp .main__img{
  order: 2;
}
.main__img>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.pc .main__items{
  flex: 1;
}
.sp .main__items{
  display: contents;
}
.title__weapper{
  margin-bottom: min((4vw / 7.5), 16px)
}
.sp .title__weapper{
  order: 1;
  width: 100%;
}
.head-title{
  font-size: min((44vw / 7.5), 26px);
  display: flex;
  gap: min((20vw / 7.5), 16px);
  justify-content: center;
  align-items: flex-end;
  line-height: 1.0;
  margin-bottom: min((32vw / 7.5), 16px);
}
.cluster__txt{
  font-size: min((70vw / 7.5), 50px);
}
.main__copy{
  display: flex;
  gap: min((16vw / 7.5), 10px);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.main__copy::before,
.main__copy::after{
  content: "";
  width: min((60vw / 7.5), 20px);
  height: 1px;
  display: inline-block;
  background: #000;
  flex-grow: 1;
  max-width: 50px;
}
.main__copy>span{
  font-size: min((40vw / 7.5), 22px);
}
#solo.head-title .area__txt,
.solo .main__copy>span{
  color: var(--content-color-solo)
}
#friend.head-title .area__txt,
.friend .main__copy>span{
  color: var(--content-color-friend)
}
#couple.head-title .area__txt,
.couple .main__copy>span{
  color: var(--content-color-couple)
}
#woman.head-title .area__txt,
.woman .main__copy>span{
  color: var(--content-color-woman)
}
#married.head-title .area__txt,
.married .main__copy>span{
  color: var(--content-color-married)
}
#family.head-title .area__txt,
.family .main__copy>span{
  color: var(--content-color-family)
}
.main__txt,
.hotel__txt{
  font-size: min((26vw / 7.5), 14px);
  line-height: calc(24 / 14);
  margin-bottom: 16px
}
.sp .main__txt{
  order: 3;
  margin-bottom: 0
}
.product__items{
  width: 100%;
  display: flex;
  gap: min((24vw / 7.5), 10px);
  justify-content: space-between;
  align-items: flex-start
}
.sp .product__items{
  order: 4
}
.product__name{
  font-size: min((36vw / 7.5), 22px);
  position: relative;
  line-height: 1.0
}
.product__name.air{
  padding-left: min((62vw / 7.5), 44px);
}
.product__name.hotel{
  padding-left: min((50vw / 7.5), 38px);
  margin-bottom: 16px;
}
.sp .product__name.air{
  width: calc((52vw / 7.5) + 3.5em);
  flex-shrink: 0;
  font-size: calc(30vw / 7.5)
}
.sp .product__name.hotel{
  order: 1;
  width: 100%;
  margin-bottom: 0
}
.product__name::after{
  content: "";
  background: var(--bg-img-setting);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.product__name.air::after{
  width: min((52vw / 7.5), 32px);
  height: min((36vw / 7.5), 24px);
}
.solo .product__name.air::after{
  background-image: url("../img/ico_air_amami.svg")
}
.friend .product__name.air::after{
  background-image: url("../img/ico_air_izumo.svg")
}
.couple .product__name.air::after{
  background-image: url("../img/ico_air_yokohama.svg")
}
.woman .product__name.air::after{
  background-image: url("../img/ico_air_miyajima.svg")
}
.married .product__name.air::after{
  background-image: url("../img/ico_air_jozankei.svg")
}
.family .product__name.air::after{
  background-image: url("../img/ico_air_okinawa.svg")
}
.product__name.hotel::after{
  width: min((40vw / 7.5), 28px);
  height: min((45vw / 7.5), 31px);
}
.solo .product__name.hotel::after{
  background-image: url("../img/ico_hotel_amami.svg")
}
.friend .product__name.hotel::after{
  background-image: url("../img/ico_hotel_izumo.svg")
}
.couple .product__name.hotel::after{
  background-image: url("../img/ico_hotel_yokohama.svg")
}
.woman .product__name.hotel::after{
  background-image: url("../img/ico_hotel_miyajima.svg")
}
.married .product__name.hotel::after{
  background-image: url("../img/ico_hotel_jozankei.svg")
}
.family .product__name.hotel::after{
  background-image: url("../img/ico_hotel_okinawa.svg")
}

.product__link{
  display: block;
  font-family: var(--font-sans);
  position: relative;
  padding-right: min((16vw / 7.5), 10px);
  line-height: 1.0
}
.product__link::after{
  content: "";
  background: var(--bg-img-setting);
  width: min((12vw / 7.5), 8px);
  height: min((23vw / 7.5), 15px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.solo .product__link::after{
  background-image: url("../img/arrow_right_amami.svg")
}
.friend .product__link::after{
  background-image: url("../img/arrow_right_izumo.svg")
}
.couple .product__link::after{
  background-image: url("../img/arrow_right_yokohama.svg")
}
.woman .product__link::after{
  background-image: url("../img/arrow_right_miyajima.svg")
}
.married .product__link::after{
  background-image: url("../img/arrow_right_jozankei.svg")
}
.family .product__link::after{
  background-image: url("../img/arrow_right_okinawa.svg")
}
@media (hover: hover){
  .product__link:hover{
    text-decoration: underline
  }
  .solo .product__link:hover{
    color: var(--content-color-solo);
  }
  .friend .product__link:hover{
    color: var(--content-color-friend);
  }
  .couple .product__link:hover{
    color: var(--content-color-couple);
  }
  .woman .product__link:hover{
    color: var(--content-color-woman);
  }
  .married .product__link:hover{
    color: var(--content-color-married);
  }
  .family .product__link:hover{
    color: var(--content-color-family);
  }
}

.air__product>li+li{
  margin-top: min((30vw / 7.5), 20px);
}
.air__route{
  margin-right: min((24vw / 7.5), 8px);
  font-size: min((20vw / 7.5), 14px)
}
.port__name{
  font-size: min((24vw / 7.5), 16px)
}
.air__time{
  font-size: min((20vw / 7.5), 14px)
}
.air__time>em{
  font-size: min((24vw / 7.5), 16px)
}

.pc .hotel__items{
  flex: 1;
  display: flex;
  flex-direction: column
}
.sp .hotel__items{
  display: contents
}
.sp .hotel__txt{
  order: 3;
  margin-bottom: 0
}
.hotel__link{
  margin-top: auto;
  margin-bottom: 4px;
  text-align: right;
}
.sp .hotel__link{
  width: 100%;
  order: 4;
}
.hotel__link>a{
  font-size: min((26vw / 7.5), 16px);
}
.hotel__img{
  width: min(100%, 496px);
  display: flex
}
.hotel__img>li{
  width: 50%;
}
.sp .hotel__img{
  order: 2;
}

.more__link{
  width: min(90vw, 640px);
  margin: min((64vw / 7.5), 64px) auto 0;
}
.more__link>a{
  display: block;
  background: var(--content-color-orange);
  border-radius: min((48vw / 7.5), 36px);
  font-family: var(--font-sans);
  font-size: min((26vw / 7.5), 16px);
  color: #FFF;
  font-weight: bold;
  text-align: center;
  padding: min((24vw / 7.5), 16px);
  position: relative
}
.more__link>a::after{
  content: "";
  background: var(--bg-img-setting) url(/cmn/icon/icon_arrow_right_white.svg);
  width: min((48vw / 7.5), 24px);
  height: min((48vw / 7.5), 24px);
  position: absolute;
  top: 0;
  right: min((8vw / 7.5), 8px);
  bottom: 0;
  margin: auto
}
@media (hover: hover){
  .more__link>a:hover{
    opacity: 0.8
  }
}