@charset "utf-8";

.sp {display: none !important;}
.ss-center{line-height: 1.5;font-family: 'Noto Sans JP', sans-serif;}
#topBnr {width: 100%;background: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/kv_slider.jpg) 0 100% / 2400px 123px; animation: slide 100s linear infinite; padding-bottom: 120px;}
#topBnr h1 img{width: 100%; display: block;}

#topBnr {
  position: relative;
  text-align: center;
  width: 100%; 

}

.with-background {
  position: relative;
  display: inline-block;
  width: 100%; 
  height: auto; 
}

.with-background::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/kv2_text.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}

.with-background img {
  position: relative;
  z-index: 1;
}



@keyframes slide {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: -2400px 100%;
  }
}
.bgY{background: #FFFBDD; padding: 80px 0; }
.bgB{background: #F0FAFF; padding: 80px 0;}
.bgR{background: #FFF7F5; padding: 80px 0; margin-bottom: 80px;}
.mainTitle{color: #175AA1; font-size: 32px; text-align: center; position: relative;padding-bottom: 23px; margin-bottom: 42px;}
.mainTitle span{font-size: 24px; display: block;}
.mainTitle:before{position: absolute; content: ''; height: 7px; width: 352px; background: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/line.png) repeat-x left center; bottom: 0; left: 50%; transform: translateX(-50%);}

/* undate */
.searchBlock{width: 100%;}
#Searchbox{border: none; margin-bottom: 0;}
.searchBlock .mainTitle:before{width: 172px;}

#COUPONbox{border: none; margin-bottom: 0;}
#service{padding-top: 80px;}
/* guide */
/* #guide{ margin-top: 80px;} */
.guideBox{display: flex; justify-content: space-between; margin-bottom: 80px; padding: 0 8px;}
.guideBox > li {width: 620px; border-radius: 8px; box-sizing: border-box; border: 1px solid #ccc; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15); display: flex; justify-content: space-between; overflow: hidden; color: #333;}
.guideBox > li > a{display: inline-block; margin-right: 16px; width: 250px;}
.guideBox > li a:hover{opacity: .8;}
.guideBox > li img{width: 100%; height: 100%;}
.guideBox > li div{padding: 12px 16px 12px 0; width: 338px;}
.guideBox > li h3{font-size: 15px; margin-bottom: 10px;}
.guideBox > li p{font-size: 13px;}
.guideBox > li a{color: #333;}
.guideBox .location{display: flex; margin-bottom: 10px;}
.guideBox .location li a{background: #eaeaea url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/location.png) no-repeat 4px center; font-size: 12px; color: #666; padding: 5px 8px 5px 22px; margin-right: 8px;}
/* ranking */
.rankSubTtl{text-align: center; font-size: 24px; margin-bottom: 40px;}
.ranking .jdsTabNav{margin: 0 auto 24px; display: flex; justify-content: center; transform: none !important; position: relative;}
.ranking .jdsTabNav li{width: auto; background: #eaeaea; border-radius: 4px; text-align: center; padding: 8px 20px; margin: 0 12px; font-size: 20px;}
.ranking .jdsTabNav li.active, .ranking .jdsTabNav li:hover{cursor: pointer; background: #C97664; color: #fff;}
.swiper-scrollbar{background: #D9D9D9 !important;}
.swiper-scrollbar-drag{background: #646262 !important;}
.ranking .photo .photo-in-in{height:124px;}
.ranking .photo{height:124px;}
.ranking .hotel-box{padding-bottom: 24px; margin-bottom: 40px;}
.ranking .hotel-box a:hover{opacity:1;}
.ranking .hotel-box .hotel{background:#ffffff;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);border-radius:4px; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box;}
.ranking .hotel-box .hotel .main{position:relative;}
.ranking .hotel-box .hotel .main a{padding:0px 8px 2px;display:block;color:#333;}
.ranking .hotel-box .hotel .main a:hover .photo-in-in{transform:scale(1.2);}
.ranking .hotel-box .hotel .photo{overflow:hidden;margin:0 -8px;border-radius:4px 4px 0 0;height:100px;}
.ranking .hotel-box .hotel .photo .photo-in-in{background-position:center;background-size:cover;height:100px;border-radius:4px 4px 0 0;transform:scale(1);transition:0.3s ease-in-out;}
.ranking .hotel-box .hotel .photo .photo-in-in:hover{transform:scale(1.2);}
.ranking .hotel-box .hotel .area{min-height:18px;font-size:12px;}
.ranking .hotel-box .hotel .name{font-size:14px;font-weight:600;padding-top:40px;padding-bottom:6px;position:relative;}
.ranking .hotel-box .hotel .name.crown:after{content:"";display:block;position:absolute;top:3px;left:0;width:36px;height:30px;background:url(https://img.travel.rakuten.co.jp/share/pctop/images/icon_rank.svg) no-repeat;background-size:auto 28px;}
.ranking .hotel-box .hotel:nth-of-type(1) .name:after {background-position: -2px 0px;}
.ranking .hotel-box .hotel:nth-of-type(2) .name:after {background-position: -38px 0px;}
.ranking .hotel-box .hotel:nth-of-type(3) .name:after {background-position: -74px 0px;}
.ranking .hotel-box .hotel:nth-of-type(4) .name:after {background-position: -112px 0px;}
.ranking .hotel-box .hotel:nth-of-type(5) .name:after {background-position: -148px 0px;}
.ranking .hotel-box .hotel:nth-of-type(6) .name:after {background-position: -186px 0px;}
.ranking .hotel-box .hotel:nth-of-type(7) .name:after {background-position: -223px 0px;}
.ranking .hotel-box .hotel:nth-of-type(8) .name:after {background-position: -259px 0px;}
.ranking .hotel-box .hotel:nth-of-type(9) .name:after {background-position: -295px 0px;}
.ranking .hotel-box .hotel:nth-of-type(10) .name:after {background-position: -333px 0px;}
#ranking .hotel-box .hotel:nth-of-type(n+11){display: none;}
#ranking2.ranking .hotel-box .hotel .name{ padding-top: 16px;}
#ranking2.ranking .hotel-box .hotel .name.crown:after{ content: normal;}
.ranking .hotel-box .hotel .rvw-score{padding-top:2px;padding-bottom:4px;padding-left:10px;}
.ranking .hotel-box .hotel .rvw-score a .review-score{color:#bf0000;font-size:14px;font-weight:bold;}
.ranking .hotel-box .hotel .rvw-score a .review-score:hover{opacity:0.8;}
.ranking .hotel-box .hotel .rvw-score .stars{font-size:14px;letter-spacing:1px;margin-right:2px;width:80px;display:inline-block;position:relative;}
.ranking .hotel-box .hotel .rvw-score .stars .review-base{color:#eaeaea;width:100%;box-sizing:border-box;}
.ranking .hotel-box .hotel .rvw-score .stars .review-rst{color:#ffba00;position:absolute;overflow:hidden;top:0;left:0;z-index:1;width:0;box-sizing:border-box;}
.ranking .hotel-box .hotel .links{padding:2px 0 4px;text-align:center;}
.ranking .hotel-box .hotel .links a{font-size:14px;background:#fff;display:block;margin:8px;border:1px solid #ccc;border-radius:3px;padding:8px 0;color:#333;}
.ranking .hotel-box .hotel .links a:hover{border:1px solid #eaeaea;background-color:#f3f3f3;}
#ranking .plan,#ranking2 .plan{ display: none;}
.rankNote{font-size: 14px; margin: 0 auto ; color: #666;}

#service ul{display: flex; justify-content: space-between; flex-wrap: wrap; width: 1016px; margin: 0 auto 80px; padding-bottom: 80px; position: relative;}
#service ul:after{position: absolute; content: ''; width: 640px; height: 1px; background: #ccc; bottom: 0; left: 50%; transform: translateX(-50%);}
#service ul li{margin: 0 0 40px;}
#service ul li a:hover{opacity: .8;}
#service .noto p{text-align: center; font-size: 17px; margin-bottom: 8px;}
#service .noto a:hover{opacity: .8;}
#service .noto img{display: block; margin: 0 auto 80px;}
.pagetop a{background: #175AA1;}

.topBtn{ margin: 80px auto 0; width: 600px;padding-bottom: 80px;}
.topBtn a{ display: block; border: 2px solid #da3333; color: #da3333; font-weight: bold; font-size: 26px; text-align: center; padding: 16px 0; background: #FFF7F5; border-radius: 50px; position: relative;}
.topBtn a:after{ display: block; content: ""; width: 18px; height: 18px; border: solid #da3333; border-width: 2px 2px 0 0; transform: rotate(45deg); position: absolute; right: 40px; top: 50%; margin-top: -8px;}
.topBtn a:hover{ opacity: .7;}

#guide .swiper-container{padding-bottom: 20px;margin-bottom: 80px;}
#guide .swiper-wrapper{display: flex;margin: 0 auto;width: 98%; justify-content: space-between;}
#guide .swiper-wrapper li{width:32.5%;}
#guide .swiper-wrapper li a{display: block;border-radius: 3px; border: 1px solid #CED5DB;}
#guide .swiper-wrapper li a img{width: 100%;}
#guide .swiper-wrapper li a p{padding: 15px;font-size: 13px;color: #333;}
#guide .swiper-wrapper li a p.btn{text-align: center;background-color: #175AA1;color: #fff;font-weight: bold;font-size: 16px;margin: 0 15px 15px;}
#guide .swiper-button-next{background-image: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/arrow.png);transform: rotate(180deg);}
#guide .swiper-button-prev{background-image: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/arrow.png);left: 0px;}
#guide .swiper-button-next, #guide .swiper-button-prev{width: 38px;height: 38px;background-size: 38px 38px;}

#topnav{ padding: 16px 0;font-family: 'Noto Sans JP', sans-serif; box-shadow: 1px 2px 7px #838282;position: relative;z-index: 10;}
#topnav ul{display: flex; width: 1280px;margin: 0 auto; 
  justify-content:center;
}
#topnav ul li a{display: block;font-size: 24px; color: #333;font-weight: 500;text-align: center;padding: 16px 0;}
#topnav ul li{width: 20%;border-right: 1px solid #ccc;}
#topnav ul li:first-child {
  border-left: 1px solid #ccc !important; 
}
#topnav ul li:last-child{border-right: none;}

.bgcpn{padding: 48px 0; background-color: #C6C19C;font-family: 'Noto Sans JP', sans-serif; }
.bgcpn .ss-center{background-color: #fff;padding: 32px 0;}
.bgcpn h2{text-align: center;margin-bottom: 20px;}
.bgcpn dl{width: 800px;margin: 0 auto;border-radius: 10px; border: 1px solid #999;}
.bgcpn dl dt{text-align: center;font-weight: bold;position: relative;padding: 18px 0;cursor: pointer;font-size: 20px;}
.bgcpn dl dt:after{display: block;content: "";position: absolute;width: 10px;height: 10px;border-right:1px solid #333 ;border-bottom: 1px solid #333;top: 25px;right: 200px;transform: rotate(45deg);}
.bgcpn dl dt.active-submenu:after{display: block;content: "";position: absolute;width: 10px;height: 10px;border-right:1px solid #333 ;border-bottom: 1px solid #333;top: 30px;right: 200px;transform: rotate(-135deg);}
.bgcpn dl dd{margin: 0 32px 18px 32px;font-size: 16px;border-top: 1px dotted #ccc;padding-top: 16px;}

.cpLinkwindow a.arr-green-windowA {
  background-color: #fff;
  position: relative;
  border-radius: 4px;
  font-weight: normal;
  margin-left: 10px;
  padding: 8px 12px;
  /* top: -5px; */
  color: #333333;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid #ddd;
}
.cpLinkwindow {
  margin: 0 auto 24px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
}
.cpLinkwindow a.arr-green-windowB:after {
  background: url(https://img.travel.rakuten.co.jp/special/sales/template/html/images/Linkwindow.svg) center center no-repeat;
  background-size: auto;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  right: -30px;
  top: 50%;
  margin-top: -8px;
  background-size: 16px;
}

.couponwrap{background-color: #fff;padding: 48px 64px;}
.couponwrap h3{border-bottom: 1px solid #000;font-size: 20px;background: url(https://img.travel.rakuten.co.jp/package/jr/special/hokuriku-shinkansen/202412/images/couponicon.png) no-repeat;padding-left: 40px;padding-bottom: 10px;}

.couponwrap h4{text-align: center;font-size: 18px;color: #333;font-weight: normal;padding: 24px 0;}
.couponwrap .yokoku{display: flex; justify-content: space-between;}
.couponwrap .yokoku li{width: 32%;}
.couponwrap .yokoku li table{width: 100%;border-radius: 6px;border: 1px solid #ccc;font-size: 14px;border-style: hidden;border-collapse: collapse; box-shadow: 0 0 0 1px #ccc;overflow: hidden;}
.couponwrap .yokoku li table tr td:first-child{background-color: #FFE8C6;text-align: center;font-weight: bold;}
.couponwrap .yokoku li table tr td{border-bottom: 1px solid #ccc;padding: 10px ;}
.couponwrap p.tips{text-align: center;font-size: 12px;padding: 20px 0;}