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

:root{
  --content-color-base: #2C2A29;
}

.nosp{
  display: none
}

/* ------------------------------------------------
template:ツアーカセット
------------------------------------------------ */
.product-list.card-style {
  width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: calc(24vw / 7.5);
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.product-list.card-style *{
  box-sizing: border-box
}
.product-list.card-style >li {
  flex: 0 0 80%;
  /*margin: 0 calc(10vw / (750 / 100)) calc(20vw / (750 / 100));*/
  background: #FFF;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
  position: relative;
  overflow: hidden;
}
/*.product-list>li:first-child{
  margin-left: calc(50vw / 7.5)
}*/
.product-list>li:empty{
    display: none;
  }
.product-list>li:hover {
  box-shadow: 0 2px 20px rgb(0 0 0 / 25%);
}
.product-list>li a {
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  text-decoration: none
}
.item-photo__wrapper {
  position: relative;
}
.item-photo__wrapper img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 3 / 2;
}
.item-txt__wrapper {
  padding: calc(14vw / (750 / 100))
}

/***** PC/SP共カード型の場合　.card-style 追加　*****/
.product-list.card-style>li,
.product-list.card-style .item-photo__wrapper,
.product-list.card-style .item-photo__wrapper img{
  border-radius: 0;
}
.product-list.card-style>li a{
  width: auto;
  height: auto;
}
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port{
  display: block;
  width: 100%;
  background: rgba(0 0 0 / 80%);
  padding: calc(6vw / (750 / 100));
  position: absolute;
  bottom: 0;
  left: 0  
}
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port .port-type,
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port .dp-port,
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port .op-port{
  font-size: calc(22vw / (750 / 100));
  color: #FFF;
}
.product-list.card-style>li .product-list__item .item-txt__port{
  display: block;
  width: 100%;
  background: rgba(0 0 0 / 80%);
  padding: calc(6vw / (750 / 100));
}
.product-list.card-style>li .product-list__item .item-txt__port .port-type,
.product-list.card-style>li .product-list__item .item-txt__port .dp-port,
.product-list.card-style>li .product-list__item .item-txt__port .op-port{
  font-size: calc(22vw / (750 / 100));
  color: #FFF;
}


/***** 縦積みの場合　.row-style 追加　*****/
.product-list.row-style {
  margin: auto;
  padding: 0;
  display: block;
  overflow-x: auto;
}
.product-list.row-style>li {
  width: 100%;
  border-radius: 0;
  margin: 0 auto calc(16vw / (750 / 100));
  padding: calc(16vw / (750 / 100));
  background: #FFF;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
  position: relative;
}

.product-list.row-style .product-list__item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start
}
.product-list.row-style .item-photo__wrapper {
  border-radius: calc(10vw / (750 / 100));
  width: 34%;
  margin-right: calc(16vw / (750 / 100));
  overflow: hidden;
  position: relative;
}
.product-list.row-style .item-photo__wrapper img{
  aspect-ratio: 3 / 2;
}

.product-list.row-style .item-txt__wrapper {
  flex: 1;
  padding: 0
}

.item-txt__icon {
  line-height: 1.0;
}
.item-txt__icon .icon-type {
  line-height: 1.0;
}
.item-txt__icon .icon-type::after {
  display: none;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
  margin-bottom: calc(6vw / (750 / 100))
}
.item-txt__icon .icon-type.ana::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/ana.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.ado::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/ado.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.apj::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/apj.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.fda::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/fda.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.jal::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/jal.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.jet::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/jet.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.sfj::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/sfj.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.sjo::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/sjo.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-typesnj::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/snj.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.sky::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/sky.png");
  width: 58px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.jr::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_jr.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.odakyu::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_odakyu.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.tobu::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_tobu.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.bus1::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_daybus.png");
  width: 80px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.bus2::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_staybus.png");
  width: 80px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.bus3::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_nightbus.png");
  width: 80px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.hotel::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_hotel.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.imp1::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_localguide.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.imp2::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_imp.png");
  width: 70px;
  height: 17px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.eco::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_ecotour.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.ship::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_ship.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.air::after,
.item-txt__icon .icon-type.air2::after{
  display: inline-block;
  background-image: url("../../dst/common/img/icon_air.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.train::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_train.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.car::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_car.png");
  width: 80px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.rentcar1::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_rentacar.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.rentcar2::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_gas.png");
  width: 110px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.web::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_webcc.png");
  width: 160px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.web2::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_web.png");
  width: 110px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}
.item-txt__icon .icon-type.line::after {
  display: inline-block;
  background-image: url("../../dst/common/img/icon_line.png");
  width: 70px;
  height: 15px;
  margin-right: calc(6vw / (750 / 100));
}

.item-txt__port {
  font-size: calc(24vw / (750 / 100));
  font-weight: bold;
  color: #333;
}
.port-type::before,
.dp-port::before,
.op-port::before{
  content: "【";
  display: inline-block
}
.port-type::after,
.dp-port::after{
  content: "発着】";
  display: inline-block;
}
.port-type.train::after,
.port-type.air2::after{
  content: "発】";
  display: inline-block;
}
a[href^="https://hotel.his-j.com/search/hotel-plan"] .product-list__item .port-type::after,
a[href^="https://wow-plus.his-j.com/"] .product-list__item .port-type::after,
.product-list>li.stay .port-type::after,
.item-txt__port .op-port::after{
  content: "】";
  display: inline-block;
}
a[href*="/?cc=D"] .port-type::after{
  content: "発】";
  display: inline-block;
}
.port-type:last-child,
.port-type:empty{
  display: none;
}
.port-type:empty + .port-type:last-child{
  display: block!important;
}
.label__wrapper{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
}
.item-label.best,
.item-label.good{
  display: block
}
.item-label::after{
  display: inline-block;
  background: var(--bg-img-setting);
  width: 90px;
  height: 25px;
  font-size: calc(24vw / 7.5);
  font-weight: bold;
  color: #FFF;
  text-align: center;
  line-height: 25px
}
.item-label.best::after{
  content: "";
  background-image: url("../../dst/common/img/product_label_award_best.png");
}
.item-label.good::after{
  content: "";
  background-image: url("../../dst/common/img/product_label_award_good.png");
}
.item-label.most::after{
  content: "";
  background-image: url("../../dst/common/img/product_label_award_most.png");
}
.item-label.bus1::after{
  content: "日帰りバス";
  background-color: #EC7F00;
}
.item-label.bus2::after{
  content: "宿泊バス";
  background-color: #0063B0;
}
.item-label.bus3::after{
  content: "夜行バス";
  background-color: #140D77;
}
.item-label.train::after{
  content: "鉄道利用";
  background-color: #2EA307;
}
.item-label.air::after{
  content: "飛行機利用";
  background-color: #3064D5;
}
.item-label.imp2::after{
  content: "添乗員同行";
  background-color: #4F269E;
}
.item-label.imp1::after{
  content: "現地添乗員";
  background-color: #83083F;
}
.item-label.line::after{
  content: "LINE掲載";
  background-color: #00B900;
}
.item-label.car::after{
  content: "レンタカー";
  background-color: #352FB2;
}

.item-txt__title {
  font-size: calc(30vw / (750 / 100))!important;
  font-weight: bold;
  line-height: 1.4em;
}
.item-txt__title.dp-title{
  font-size: calc(36vw / (750 / 100))!important;
  text-align: center;
}
.item-txt__title.dp__title{
  font-size: calc(40vw / (750 / 100))!important;
  text-align: center;
}
.item-txt__point{
  margin-top: calc(10vw / 7.5);
  font-size: calc(24vw / (750 / 100))!important;
}
.item-txt__price{
  font-size: calc(36vw / (750 / 100));
  color: #DF0D00!important;
  font-weight: bold;
}
.item-txt__price .air_tour_code {
  display: block;
  font-size: calc(36vw / (750 / 100));
  color: #DF0D00!important;
  font-weight: bold;
}

.item-txt__price .air_tour_code .card__priceSmall,
.item-txt__price .air_tour_code .card__priceTilde{
  color: #DF0D00!important;
}
.item-txt__price .air_tour_code:nth-child(2){
  display: none;
}
.item-txt__price .air_tour_code:first-child:empty + .air_tour_code:nth-child(2){
  display: block;
}
.item-txt__price.dp-price,
.item-txt__price.dp__price{
  text-align: center
}
.item-txt__price.dp-price>span{
  font-size: calc(40vw / (750 / 100));
  color: #DF0D00!important;
  font-weight: bold;
}
.item-txt__price.dp-price>span::after,
.item-txt__price.dp__price>span::after{
  display: inline-block;
  content: "円"
}
.item-txt__price.dp-price>small{
  font-size: calc(22vw / (750 / 100));
  display: inline-block;
}
.item-txt__price.dp__price small{
  display: block;
  font-size: calc(22vw / 7.5);
  font-weight: normal;
  color: #333;
}
.item-txt__price.op__price>span>small{
  font-size: calc(22vw / 7.5)!important;
  font-weight: normal!important;
  color: #333!important;
}
.item-txt__room .room-type{
  color: #333;
  font-size: calc(22vw / (750 / 100));
  font-weight: normal;
}
.room-type:before {
  content: "（";
  display: inline-block;
}
.room-type:after {
  content: "）";
  display: inline-block;
}
.room-type.js-split-room:empty,
.room-type:nth-child(2){
  display: none;
}
.room-type.js-split-room:empty + .room-type:nth-child(2){
  display: block;
}
.item-txt__dep,
.item-txt__note{
  color: #333;
  font-size: calc(20vw / (750 / 100));
  font-weight: normal;
}

span[id*="dep_"].dep-date::after{
  content: none
}
.js-split-departure.dep-date::after,
#dep_.dep-date::after,
.dep-date.departure::after{
  content: "出発"
}
#dep_.dep-date:empty::after,
.dep-date.departure:empty::after{
  content: none
}
.dep-date:first-child:empty,
span[id*="dep_"]{
  display: none;
}
.dep-date:first-child:empty + span[id*="dep_"]{
  display: block
}

.item-carrier{
  margin-top: calc(10vw / (750 / 100));
  font-size: calc(24vw / (750 / 100));
  font-weight: 500;
}
.item-carrier::before{
  content: "【利用航空会社】";
  display: inline-block;  
}
.item-carrier::after{
  display: inline-block;
}
.item-carrier.none::before,
.item-carrier.none::after{
  content: none
}
.item-carrier.jal::after{
  content: "JAL";
}
.item-carrier.ana::after{
  content: "ANA";
}
.item-carrier.sky::after{
  content: "スカイマーク";
}
.item-carrier.jetstar::after{
  content: "ジェットスター・ジャパン";
}
.item-carrier.peach::after{
  content: "Peach";
}
.item-carrier.fda::after{
  content: "フジドリームエアラインズ";
}
.price-note{
  font-size: calc(22vw / (750 / 100));
  display: block;
  position: relative;
  padding-left: 1.0em;
  text-indent: -1.0em;
  color: #333
}
.price-note.true::before{
  content: "※基本代金にスタジオ・パス代は含まれていません。";
}
.price-note.false::before{
  content: "※基本代金に1デイ・スタジオ・パス代は含まれています。";
}
.hotel-notice{
  display: none;
}

/* 宿泊プランカセット用 */
a[href^="https://hotel.his-j.com/"] .product-list__item .item-photo__wrapper .item-txt__port .port-type::after{
  content: "】"
}
a[href^="https://hotel.his-j.com/"] .hotel-notice,
a[href^="https://wow-plus.his-j.com/"] .hotel-notice{
  display: block;
  font-size: calc(20vw / (750 / 100));
}

/***** 縦積みの場合　.row-style 追加　*****/
.product-list.row-style .item-txt__title {
  font-size: calc(28vw / (750 / 100));
}
.product-list.row-style .item-txt__price .air_tour_code {
  font-size: calc(34vw / (750 / 100));
}

/***** DP条件部分 *****/
.dp-list{
  margin-top: calc(20vw / (750 / 100));
}
.dp-list>li{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: calc(10vw / (750 / 100));
}
.dp-list>li span{
  display: block;
  font-size: calc(22vw / (750 / 100));
}
.dp-list__item{
  background: #7d7d7d;
  color: #FFF;
  text-align: center;
  width: 72px;
  padding-top: calc(3vw / (750 / 100));
  flex-shrink: 0;
  margin-right: calc(10vw / (750 / 100));
}
.dp-list>li .item__midashi{
  background: #7d7d7d;
  font-size: calc(20vw / 7.5);
  color: #FFF;
  text-align: center;
  width: 60px;
  flex-shrink: 0;
  margin-right: calc(10vw / 7.5);
  padding: calc(4vw / 7.5) 0
}

/***** 遷移ボタン *****/
.tour-link-button{
  width: 90vw;
  margin: auto;
  text-align: center
}
.tour-link-button>a{
  display: block;
  width: 100%;
  border: 1px solid;
  padding: calc(20vw / 7.5);
  font-size: calc(26vw / 7.5);
  font-weight: bold;
  position: relative;
  text-decoration: none;
}
.tour-link-button>a:hover{
  opacity: 0.8
}
.tour-link-button>a::after{
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 3%;
  bottom: 0;
  margin: auto;
}

/***** 販売商品なし *****/
.outsales-txt,
.close-txt{
  text-align: center;
  font-size: calc(24vw / 7.5);
  margin: calc(30vw / 7.5) auto;
}
.outsales-txt:empty,
.close-txt:empty{
  display: none
}

/***** 終了文言 *****/
.end .close-txt{
  font-size: calc(24vw / 7.5);
  color: var(--content-color-base);
  padding: calc(16vw / 7.5);
  margin-bottom: calc(24vw / 7.5);
  border: 1px solid;
  background: #FFF
}

.close-box{
  display: grid;
  gap: calc(16vw / 7.5);
  width: var(--content-width);
  margin: auto;
  padding: calc(40vw / 7.5) 0;
  text-align: center;
}
.close-box .close-txt{
  font-size: calc(26vw / 7.5);
  font-weight: bold;
  margin: 0!important
}
.close-box .close-link>a{
  color: #3064D5;
  text-decoration: underline
}


/***** 特集バナー *****/
.bnr-list{
  margin: calc(20vw / (750 / 100)) auto;
  display: flex;
  flex-wrap: wrap
}
.bnr-list>li{
  width: calc(99% / 2);
  margin-right: 1%
}
.bnr-list>li:nth-child(even){
  margin-right: 0
}
.bnr-list>li:nth-child(n+3){
  margin-top: 1%;
}
.bnr-list>li>a{
  display: block;
}
.bnr-list.sgl>li{
  width: 100%;
  margin-right: 0;
  text-align: center;
}

.bnr__list{
  display: flex;
  gap: calc(16vw / 7.5);
  flex-wrap: wrap;
}
.bnr__list>li{
  width: calc((100% - (16vw / 7.5)) / 2)
}
.bnr__list>li>a{
  display: block
}



/***** 差し込みタイマーJS用 *****/
.bnr-area{
  margin: calc(40vw / 7.5) auto;
  text-align: center;
}
.bnr-area>a{
  display: block;
}
.bnr-area>a:hover{
  opacity: 0.8
}

/***** 鉄道ツアー年末年始注意文（train_msg.js用）*****/
.train_mgsbox{
  width: 94vw;
  margin: calc(30vw / 7.5) auto;
  background: #FFF;
  padding: calc(20vw / 7.5);
  border: calc(2vw / 7.5) solid #ff8181;
  box-sizing: border-box
}
.train_mgs_title{
  font-weight: bold;
  margin-bottom: calc(6vw / 7.5);
}