@charset "utf-8";
/*
* ★★CSS for PC
*
* @date 2013.06.17
* @author HeChengHao
*/

/* -- Reset -- */
ul,li,dl,dt,dd{ list-style:none;}
#widewrapper{ width:100%; position:relative; overflow:hidden;}
#contentsArea {word-wrap:break-word;background:#fff; margin: 0 auto; position: relative;}
#contentsArea #contents{ width:100%; margin:40px auto;padding:0;background:none; color:#333; position:relative; z-index: 1; font-family: 'Noto Sans JP', sans-serif;}
#contentsArea a:hover{ text-decoration: none !important;}
.sp{display:none !important;}
#contents a{
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
#contents a:hover{ opacity:.7; text-decoration:none !important;}

/* -- Top -- */
#keyVisual{ margin:0 auto; width: 100%; text-align: center; position: relative; overflow: visible;}
#keyVisual h1{text-indent:0; width: 100%; text-align: center; z-index: 9; position: relative; padding: 120px 0 140px;}
.jdsSlides{ width: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.jdsSlides li{ width: 100%; height: 800px; text-indent: -9999px;}
.jdsSlides li:nth-child(1){ background: url(../images/slide1.jpg) center center no-repeat; background-size: cover;}
.jdsSlides li:nth-child(2){ background: url(../images/slide2.jpg) center center no-repeat; background-size: cover;}
.jdsSlides li:nth-child(3){ background: url(../images/slide3.jpg) center center no-repeat; background-size: cover;}
.jdsSlides li:nth-child(4){ background: url(../images/slide4.jpg) center center no-repeat; background-size: cover;}
#keyVisual .rslides_tabs{ display: flex; justify-content: center; z-index: 9;bottom: 0; right: 0; width: 100%;}
#keyVisual .rslides_tabs li{ width: 80px; margin: 0 5px; float: none;}
#keyVisual .rslides_tabs li a{ display: block; width: auto; height: 8px; text-indent: -9999px; padding: 0; line-height: 0; background: #ccc; border: none;}
#keyVisual .rslides_tabs li a:hover,#keyVisual .rslides_tabs li.rslides_here a{ background: #cc0000;}
#keyVisual p.tip { position: absolute; bottom: 40px;  width: 100%; text-align: center; font-size:36px; font-weight: bold; color: #FEDC00; text-shadow: 0 0 8px #000; z-index: 999;}
#keyVisual p.tip span { display: block; color: #fff; font-size: 21px;}

/* nav */
#contentsArea nav { overflow: hidden; margin: 60px auto;}
#contentsArea nav ul{ overflow: hidden; display: flex; justify-content: center;}
#contentsArea nav ul li{ margin: 0 50px; text-align: center;}
#contentsArea nav ul li span{ display: block; font-size: 16px; margin: 10px 0 0; text-align: center;}

/* -- Contents -- */
.wideBox{width:100%; padding-bottom: 90px; center bottom no-repeat; background-size: 100%;}
.sBox{width:950px;margin:60px auto 0;clear:both; position: relative; border:1px solid #ccc;background: #fff;overflow: hidden;}
.sBox:after{ position: absolute; left: 40px; top: 0; display: block; content: ""; width: 870px; border-top: 4px solid #cc0000;}
.ttl{ font-size: 28px; margin: 25px 10px 0; padding: 0 0 0 80px; line-height: 43px;}
.photo{ text-align: center;}
.atn{ clear: both; overflow: hidden; padding: 20px 0 0; margin: 0 auto; width: 950px;}
.atn dt{ font-size: 16px; font-weight: bold; margin-bottom: 10px;}
.atn dd{ font-size: 14px; line-height: 1.6;}

#part1 .ttl{ background: url(../images/btnNav1.png) left center no-repeat; background-size: 85px;}
#part1 .jdsSwiper{ margin: 30px 15px; padding: 0 15px;}
.swiper-slide{ font-size: 14px; line-height: 1.5; overflow: hidden; width: 250px;}
.swiper-slide img{ padding-bottom: 5px; width: 100%;}
.jdsSwiper .swiper-button-next,.jdsSwiper .swiper-button-prev{ top: 100px; width: 38px; height: 38px;}
.jdsSwiper .swiper-button-prev.swiper-button-white{ left: 0; background-image: url(../images/iconPrev.png); background-size: 100% 100%;}
.jdsSwiper .swiper-button-next.swiper-button-white{ right: 0; background-image: url(../images/iconNext.png); background-size: 100% 100%;}

#part2{ margin-bottom: 80px;}
#part2 .ttl{ background: url(../images/btnNav2.png) left center no-repeat; background-size: 85px;}
.ttls{ background: #66ba1a; position: relative; color: #fff; text-align: center; padding: 5px 0 8px; line-height: 1; margin-bottom: 20px;}
.ttls::after{ position: absolute; left: 50%; bottom: -30px; margin-left: -4px; content: ''; border: transparent dashed; border-width: 15px 8px; border-top-color:#66ba1a;}
.cp{ margin: 30px 30px 40px; display: flex; justify-content: center; align-items: center;}
.cp .txt{ font-size: 16px; line-height: 1.8; width: 315px;}

.plane{ margin-left: 50%;}

#part3 .ttl{ background: url(../images/btnNav3.png) left center no-repeat; background-size: 85px; padding-left: 95px;clear: both;}
#part4 .ttl{ background: url(../images/btnNav4.png) left center no-repeat; background-size: 85px;}
#part5 .ttl{ background: url(../images/btnNav5.png) left center no-repeat; background-size: 85px;}

#part5 { margin-bottom: 60px;}
#part5 .photo{ margin: 35px auto; text-align: center;}
#part5 .btn{ text-align: center; margin: 35px auto 0; text-align: center;}
#part5 .link{ text-align: center; margin:0 0 40px; font-size: 16px;}
#part5 .link a{ color: #1876d2 !important; text-decoration: underline !important;}
p.photo.img  { width: 100%; max-width: 890px; margin:0 auto 16px;}

.info{ border: 1px solid #cc0000; margin-bottom: 100px;}
.info .ttl{ margin: 0; padding: 10px 0; text-align: center; font-size: 20px; color: #fff; font-weight: normal; line-height: 1; background: #cc0000;}
.info dl{ margin: 30px; overflow: hidden;}
.info dl dt{ font-size: 14px; font-weight: bold; color: #cc0000; padding-bottom: 15px;}
.info dl dd{ font-size: 12px; line-height: 1.6; padding-bottom: 20px;}

.htlbox{ margin: 30px 0 0 30px; overflow: hidden;}
.htl{ margin: 0 30px 30px 0; background: #fff; border: 1px solid #cc0000; float: left; overflow: hidden;}
.htl a{ display: block;}
.htl h3{ font-size:16px;  padding: 10px 18px 0; line-height: 1.3;}
.htl .photo{ line-height: 0; margin: 10px 10px 0;}
.htl .photo img{ width: 100%;}
.htl .cb{ overflow: hidden; margin: 5px 10px; display: flex; justify-content: center;}
.htl .cb span{ width: 25%; margin: 0 0.5%;}
.htl .cb span img{ width: 100%;}
.htl .plan{ margin: 10px; padding: 10px; background: #fefde7; border-radius: 10px;}
.htl .rank{ width: 120px; height: 20px; text-indent: -9999px;}
.htl .rank30{ background: url(../images/star30.png);}
.htl .rank35{ background: url(../images/star35.png);}
.htl .rank40{ background: url(../images/star40.png);}
.htl .rank45{ background: url(../images/star45.png);}
.htl .rank50{ background: url(../images/star50.png);}
.htl .price{ font-size: 14px; margin-top: 5px;}
.htl .price span{ color: #cc0000;}
.htl .price b{ font-size: 21px;}
.htl .price small{ display: block; margin-top: 5px; line-height: 1.5; font-size: 12px;}
.htl .btn{ margin: 10px 0}
.htl .btn a{ display: block; background:#66ba1a; border-radius: 5px; color: #fff !important; font-size: 18px; text-align: center; padding: 10px 0;}
.htl3{ width: 270px;}
.htl3:nth-child(3n){ margin-right: 0;}
.htl3 .area{ background: #cc0000; font-size:14px; color: #fff; padding: 10px 18px;}
.htl3 .area img{ vertical-align: -3px; padding: 0 5px;}
.htl2{ width: 420px;}
.htl2:nth-child(2n){ margin-right: 0;}
.htl2 .area{ font-size: 14px; width: 250px; margin: 10px 10px 0 0; float: right; font-weight: bold;}
.htl2 .area ruby{ vertical-align: -23px;}
.htl2 .area rt{ font-size: 20px; padding: 0 10px;}
.htl2 .area span{ display: block; margin: 8px 10px 0;}
.htl2 .price{ margin: 0;}
.htl2 .photo{ width: 140px; margin: 10px; float: left;}
.htl2 .plan{ width: 240px; margin: 5px 10px 10px 0; float: right;}

.pagebtm{ text-align: center; background: url(../images/bg.png) center bottom no-repeat #e5e5e5; background-size: 100%; padding: 100px 0;}

/* -- gotop -- */
.jdsShowFix{bottom:0;position:fixed;right:10px;z-index:9; display:block; cursor:pointer;}
.jdsShowFix a{ display:block; margin-bottom:10px;}
.jdsShowFix a:hover{opacity:0.7;filter:alpha(opacity=70);}


/* search */
#contentsArea #search-box{ width: 950px; margin: 0 auto; padding: 0; border: 1px solid #ccc; border-radius: 10px 10px 0 0; background: url(../images/logoJAL.png) 40px 40px no-repeat #fff;}
#contentsArea #search-box h1{ display: none;}
#contentsArea #search-box #search-box-body{ position: relative;}
#contentsArea #search-box #overseas-search-box{ padding: 0;}
#contentsArea #search-box .searchCategory{ width: auto; margin:30px 40px 0; padding: 0; border: none; background: none; display: flex; justify-content: flex-end;}
#contentsArea #search-box .searchCategory li{ width: 310px; margin:0; background: #d02d2d; border-radius: 8px 8px 0 0; padding: 25px 0 5px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; }
#contentsArea #search-box .searchCategory li span{ display: block; font-weight: normal; font-size: 16px;}
#contentsArea #search-box .searchCategory li input{ display: none;}
#contentsArea #search-box .searchSwitchArea{ background: #d02d2d; overflow: hidden; display: flex; justify-content: center; align-items: self-start; flex-wrap: wrap;}
#contentsArea #search-box .iconSearch{ color: #fff; font-size: 20px; margin:20px; background: url(../images/iconSearch.png) left bottom no-repeat; padding:20px 0 0 80px; width: 100%;}
#contentsArea #search-box .structure3{ width: 400px; margin:0 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#contentsArea #search-box .structure3 dt{ color: #fff; font-size: 16px; width: 85px; font-weight: normal; padding: 0; float: none;}
#contentsArea #search-box .structure3 dt .note{ display: block; font-size: 12px;}
#contentsArea #search-box .structure3 dd{ width: 315px; float: none; font-size: 100%; padding: 0; margin: 0; line-height: 1;}
#contentsArea #search-box .inputDate{ background: url(../images/iconCalendar.png) 95% center no-repeat #fff; border: none; height: 40px; padding: 0 3px 0 10px; font-size: 14px; color: #b5b5b5; width: 140px; margin-right: 5px;}
#contentsArea #search-box select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background: url(../images/iconArrowDR.png) 95% center no-repeat #fff; border: none; border-radius: 5px; height: 40px; padding: 0 3px 0 10px; font-size: 13px; color: #000000; width: 140px; margin-right: 5px; margin-bottom: 10px;}
select::-ms-expand { display: none; }
#contentsArea #search-box select.selectWidth{ width: 315px;}
#contentsArea #search-box .number ul li.adult{ margin-right: 7px;}
#contentsArea #search-box .number ul li.child{ color: #fff; font-size: 16px; display: flex; align-items: center;}
#contentsArea #search-box .number ul li.child a{ line-height: 40px; display: inline-block; width: 70px; font-size: 14px; color: #b5b5b5 !important; height: 40px; background: url(../images/iconArrowDR.png) 95% center no-repeat #fff; padding: 0 10px; border: none; border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: none; -moz-box-shadow:none;-webkit-box-shadow:none; }
#contentsArea #search-box .number ul li.child a:before{ content: "子供";}
#contentsArea #search-box p.searchSubmit{ width: 100%; margin: 30px auto; border-radius: 5px;}
#contentsArea #search-box p.searchSubmit a{ text-indent: 0; line-height: 1; width: 290px; height: auto; border: 1px solid #fff; border-radius: 5px; background: #444; color: #fff !important; font-size: 18px; padding: 13px 0;}
#contentsArea #search-box p.searchSubmit a:hover{ text-decoration: none !important;}
.aat{ color: #fff; font-size: 14px; position: absolute; right: 30px; bottom: 30px; line-height: 1.8;}
.airPlane{ display: none;}
.sltBox{ margin-left: 40px;}

.checkEntryMulti__enteredButton{ height: auto !important;}

.chara {
    display: block;
    margin-bottom: 10px;
    clear: both;
}
.chara .icon-reverse {
    background-color:
#fff;
color:
    #eb6100;
    line-height: 1.3;
}

.chara li {
    margin-right: 5px;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10.5px;
    border: 1px solid
    #eb6100;
    display: inline-block;
    float: left;
    margin-bottom: 4px;
}

.jdsBnr {
    margin: 30px 15px;
    padding: 0;
    text-align: center;
}
.bnrbox img {
    padding-bottom: 5px;
    width: 100%;
}

.black {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999998;
}
.popUpplan {width:50%;position:fixed;top:15%;left:25%;background:#fff;z-index:99999999;border-radius:12px}
.popUpplan>p {padding:50px;color:#000;font-size:16px;line-height:24px;line-height: 1.6;}
.popUpplan p a {font-weight:700;font-size:16px;display:block;margin-bottom:5px;color:#333}
.popUpplan span {display:block;position:absolute;cursor:pointer;right:-10px;top:-10px;width:30px;height:30px;text-indent:-999px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAkFBMVEUAAAAhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyEhyyElyyUqzCo4zjg8zzw/zz9H0EdS0lJl1mV22naG3YaU4ZSi5KK867zI7sjM78zU8tTf9d/q+Or1/PX////nbGJkAAAAG3RSTlMAAQIDIScoPj9ARkdJYomLwsTFyszc6Ovy8/k6EkGvAAABDUlEQVR42o2TAwLEQAwAz7WF1Bb+/7sKOWkqzArJ4V+OBC/ptq1LPHF8kSdOgx2NOz3aiwIPKJd7SxnwhEGgpW14wWY2ezXhDdZ1see5Xzd0NuGE7tz/edYcTHh1tVqvqj2Y4Ob5rjPK+gJmij5b5zfNn4SVYvT4mCBHzQP6HCBHC/yoJbjzad6X+C2OWsdPv+m6xsdvfdQ2IHnf54DYjzrumqaLH7V+Z1s/6u68fj80v53MVAaHhhPzmj6ZnmnfePvEcFmqPt/GV23Lgosa1Nk+/jpYFvWEW+IGsBO4uCWHswpvUc+HmZv1zlq3wwr7LpjYUWzeeqk7WuSmPvV7+ysNkBMhyFMSyQKB8gcDBHlFUJsvWlUAAAAASUVORK5CYII=) no-repeat}
.close.jss_close_plan {font-size: 0;}

.jdsBnr p { font-size: 13px; margin: 8px 0; text-align: left;}
.jdsBnr a.btn { display: block; margin: 0 auto; text-align: center;}
.jdsBnr a.btn img { width: 460px;}

p.pdf { padding: 0 0 24px; text-align: center; font-size: 14px; line-height: 21px;}
a.pdfbtn  { display: block; position: relative; width: 640px; margin: 24px auto; background: #cc0000;color: #fff !important; text-align: center; font-weight: bold; border-radius: 40px; padding: 8px 16px 12px; font-size: 18px;}
a.pdfbtn::before {
    display: block;
    position: absolute;
    content: "";
    top: 50%;
    right:5%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

dl.prevent { display: block; width: 800px; margin: 80px auto; overflow: hidden;}
dl.prevent dt { font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 16px; text-decoration: underline;}
dl.prevent dd p { font-size: 12px; line-height: 18px; margin-bottom: 24px;}
dl.prevent dd span{ display: block;font-size: 14px ;font-weight: bold; padding: 8px 0;}
dl.prevent dd a { background: cornsilk;}

.flightbox { display: flex; width: 100%; justify-content: center; align-items: center; margin-top: 24px; margin-bottom: 40px;}
.flightbox dl { width: 20%; background: #ccc; text-align: center; border: 1px solid #b5b5b5; border-right: 0;}
.flightbox dl:last-child { border: 1px solid #b5b5b5 !important;}
.flightbox dl dt { padding: 8px 0;}
.flightbox dl dd { padding: 8px 0; background: #fff; border-top: 1px solid #b5b5b5; height: 110px;}
.flightbox.noh dl dd { height:auto;}


#part2 h2.ttl { padding-right: 80px; font-size: 24px; margin-top: 30px; color: #cc0000;}
#part2 h2.ttl.coupon {background-image: url(../images/btnNav2.png);}
#part2 h2.ttl.flight {background-image: url(../images/btnNav4.png);}
#part2 h2.ttl.calander {background-image: url(../images/btnNav6.png);}
#part2 h2.ttl.calander span { font-size: 12px !important; color: #000 !important; font-weight: normal;}
#part2 h2.ttl.tour {background-image: url(../images/btnNav3.png);padding-left: 100px;}
#part2 .htl3 .area { text-align: center;}
#part2 p.tip { width: 80%; margin: 16px auto 0;}
#part2 img.cal { display: block; width: 80%; margin: 24px auto 80px;}
#part2 p.time { width: 80%; margin: 16px auto 0;}
#part2 p.time span { display: inline-block; padding: 3px 6px 5px; text-align: center; font-size: 21px; line-height: 21px; font-weight: bold; border-radius: 4px; color: #fff;}
#part2 p.time span.g { background: #93BF36;}
#part2 p.time span.r { background: #bf0000;}
#part2 p.time span.o { background: #FF6C02;}
#part2 p.time span.y { background: #FDD100;}

#COUPON { margin-top: 40px;}
#COUPON .cpnholder { width: auto !important; background: none !important; padding-bottom: 0 !important;}
#COUPON .cpnholder li.jss { width: 450px !important; margin:0 auto !important;min-height: auto !important;}
#COUPON .cpnholder .ov .couponimg a p::after {
    background-image: url(https://img.travel.rakuten.co.jp/special/sales/template/new_template/images/dhCP.svg) !important;
  }
#COUPON .cpnholder .char  { margin-top: 16px;}
#COUPON .cpnholder .char a{ display: inline-block;}

#part4 h2.ttl { padding-right: 80px; font-size: 24px; margin-top: 30px; color: #cc0000; clear: both;}
#part4 h2.ttl.flight {background-image: url(../images/btnNav4.png);}
#part4 h2.ttl.tour {background-image: url(../images/btnNav3.png);padding-left: 100px;}
#part4 .flightbox { width: 50%; float: left; }
#part4 .flightbox dl { width: 30%;}
#part4 .flightbox.noh dl dd.yellow { background: #FDFF00;}
#part4 .explain {  clear: both; background: #bf0000; padding: 16px 8px; margin: 20px 20px 40px; color: #fff; font-size: 18px; line-height: 150%; font-weight: bold;}
#part4 .explain em { font-style: normal; color: #FDFF00;}

.ttl.fz21 { font-size: 21px;}

#part3 h2.ttl { padding-right: 80px; font-size: 24px; margin-top: 30px; color: #cc0000;}