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

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

.nopc{
  display: none
}

/* ------------------------------------------------
template:ツアーカセット
------------------------------------------------ */

.product-list {
  width: 100%;
  margin: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.product-list *{
  box-sizing: border-box
}
/*.product-list>li {
  width: calc((100% - 20px) / 2);
  padding: 10px;
  background: #FFF;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
  position: relative;
}*/
.product-list>li:empty{
    display: none;
  }


.product-list>li a {
  display: block;
  color: #333;
  text-decoration: none
}

.product-list__item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-photo__wrapper {
  border-radius: 10px;
  width: 40%;
  margin-right: 2%;
  overflow: hidden;
  position: relative;
}
.item-photo__wrapper img{
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 3 / 2;
}

.item-txt__wrapper {
  flex: 1;
}

.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: 3px
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.item-txt__icon .icon-type.snj::after {
  display: inline-block;
  background-image: url("../../dst/common/img/carrier/snj.png");
  width: 58px;
  height: 17px;
  margin-right: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}
.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: 3px;
}

.item-txt__port {
  font-size: 13px;
  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;
}
.label__wrapper{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
}
.item-label::after{
  display: inline-block;
  background: no-repeat center center / contain;
  width: 90px;
  height: 25px;
  font-size: 13px;
  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: 15px;
  font-weight: bold;
  line-height: 1.4em;
}
.item-txt__title.dp-title{
  font-size: 24px;
  text-align: center;
}
.item-txt__title.dp__title{
  font-size: 20px;
  text-align: center;
}
.item-txt__point{
  margin-top: 5px;
  font-size: 12px;
}
.item-txt__price{
  font-size: 20px;
  font-weight: bold;
  color: #DF0D00!important;
}
.item-txt__price .air_tour_code {
  display: block;
  font-size: 20px;
  color: #DF0D00!important;
  font-weight: bold;
}
.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 .air_tour_code .card__priceSmall,
.item-txt__price .air_tour_code .card__priceTilde{
  color: #DF0D00!important;
}
.item-txt__price.dp-price,
.item-txt__price.dp__price{
  text-align: center;
  line-height: 1.2
}
.item-txt__price.dp-price>span{
  font-size: 20px;
  color: #DF0D00!important;
  font-weight: bold;
}
.item-txt__price.dp-dp__price>span{
  font-size: 18px;
  color: #DF0D00!important;
  font-weight: bold;
}
.item-txt__title.dp__title>span{
  font-size: 18px;
  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: 12px;
  display: inline-block;
}
.item-txt__price.dp__price small{
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #333;
}
.item-txt__price.op__price>span>small{
  font-size: 12px!important;
  font-weight: normal!important;
  color: #333!important;
}

.item-txt__room .room-type{
  color: #333;
  font-size: 11px;
  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: 11px;
  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: 6px;
  font-size: 12px;
  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: 11px;
  color: #333;
  display: block;
  position: relative;
  padding-left: 1.0em;
  text-indent: -1.0em
}
.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: 11px;
}

/***** カード型の場合　.card-style 追加　*****/
.product-list.card-style{
}
.product-list.card-style>li{
  width: calc((100% - (10px * 3)) / 4);
  padding: 0;
  background: #FFF;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
  position: relative;
}
.product-list.card-style>li:hover {
  box-shadow: 0 2px 20px rgb(0 0 0 / 25%);
}

/*** 3カラム  ***/
.product-list.card-style.type3>li{
  width: calc((100% - (10px * 2)) / 3);
}


.product-list.card-style>li .product-list__item{
  display: block;
}
.product-list.card-style>li .product-list__item .item-photo__wrapper{
  width: 100%;
  border-radius: 0;
  margin: 0;
  position: relative
}
.product-list.card-style>li .product-list__item .item-photo__wrapper img{
  border-radius: 0;
  aspect-ratio: 3 / 2;
  width: 100%;
}
.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: 3px;
  position: absolute;
  bottom: 0;
  left: 0  
}
.product-list.card-style>li .product-list__item .item-txt__port{
  display: block;
  width: 100%;
  background: rgba(0 0 0 / 80%);
  padding: 3px;
}
.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: 12px;
  color: #FFF;
}
.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: 12px;
  color: #FFF;
}
.product-list.card-style>li .product-list__item .item-txt__wrapper{
  padding: 10px
}

.product-list.card-style>li .item-txt__price .air_tour_code{
  font-size: 18px;
}

/***** DP条件部分 *****/
.dp-list{
  margin-top: 10px;
}
.dp-list>li{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 5px;
}
.dp-list>li span{
  display: block;
  font-size: 12px;
  line-height: 1.2
}
.dp-list__item{
  background: #7d7d7d;
  color: #FFF;
  text-align: center;
  width: 72px;
  padding-top: 2px;
  flex-shrink: 0;
  margin-right: 5px;
}
.dp-list>li .item__midashi{
  background: #7d7d7d;
  font-size: 10px;
  color: #FFF;
  text-align: center;
  width: 60px;
  flex-shrink: 0;
  margin-right: 5px;
  padding: 2px 0
}

/***** 遷移ボタン *****/
.tour-link-button{
  width: 800px;
  margin: auto;
  text-align: center
}
.tour-link-button>a{
  display: block;
  width: 100%;
  border: 1px solid;
  padding: 10px;
  font-size: 16px;
  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;
  margin: 30px auto;
  font-size: 14px;
}
.outsales-txt:empty,
.close-txt:empty{
  display: none
}

/***** 終了文言 *****/
.end .close-txt{
  font-size: 16px;
  color: var(--content-color-base);
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid;
  background: #FFF
}
.close-box{
  display: grid;
  gap: 8px;
  width: var(--content-width);
  margin: auto;
  padding: 40px 0;
  text-align: center;
}
.close-box .close-txt{
  font-size: 16px;
  font-weight: bold;
  margin: 0!important
}
.close-box .close-link>a{
  color: #3064D5;
  text-decoration: underline
}


/***** 特集バナー *****/
.bnr-list{
  margin: 20px auto;
  display: flex;
  gap: 16px;
  justify-content: center;
}
.bnr-list>li{
  width: calc((100% - (16px * 4)) / 5);
}

.bnr-list>li>a{
  display: block;
}
.bnr-list>li>a:hover{
  opacity: 0.8
}
.bnr-list.sgl>li{
  width: 100%;
  margin-right: 0;
  text-align: center;
}

.bnr__list{
  display: flex;
  gap: 16px;
  justify-content: center
}
.bnr__list>li{
  width: calc((100% - (16px * 4)) / 5);
}
.bnr__list>li>a{
  display: block
}
.bnr__list>li>a:hover{
  opacity: .8
}

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

/***** 鉄道ツアー年末年始注意文（train_msg.js用）*****/
.train_mgsbox{
  width: 992px;
  margin: 20px auto;
  background: #FFF;
  padding: 16px;
  border: 1px solid #ff8181;
  box-sizing: border-box
}
.train_mgs_title{
  font-weight: bold;
  margin-bottom: 5px;
}