@charset "utf-8";
/*
* ★★CSS for SP
*
* @date 2014.4.15
* @author HeChengHao
* @taiwan
*/


/* -- Reset -- */
#contentsArea {background:#fff; position: relative;}
#contentsArea #contents{ padding:0; background:none; color:#333; position:relative; z-index: 1; font-family: 'Noto Sans JP', sans-serif;}
#contentsArea .pc,.grpLocationTABI,.gotop{display:none !important;}
.photo img{ width:100%;}
#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; line-height: 0;}
#keyVisual h1{width: 94%; position: absolute; top: 10%; left:3%; z-index: 999;}
#keyVisual img{ width: 100%;}
#keyVisual .jdsSlides{ width: 100%; overflow: hidden; margin: 0; height: 140px;}
#keyVisual .jdsSlides li{ width: 100%;}
#keyVisual .rslides_tabs{ display: none; justify-content: center; margin:0; width: 100%;position: static;}
#keyVisual .rslides_tabs li{ width: 25%; margin:0;position: static;}
#keyVisual .rslides_tabs li a{position: static; display: block; width: auto; height: 8px; text-indent: -9999px; padding: 0; line-height: 0; background: #ccc; border: none; border-right:1px solid #fff;}
#keyVisual .rslides_tabs li a:hover,#keyVisual .rslides_tabs li.rslides_here a{ background: #cc0000;}
#keyVisual p.tip { position: absolute; bottom: 24px;  width: 100%; text-align: center; font-size:16px; font-weight: bold; color: #FEDC00; text-shadow: 0 0 8px #000; z-index: 999;}
#keyVisual p.tip span { display: block; color: #fff; font-size: 12px; padding-top: 16px; line-height: 14px;}

/* nav */
#contentsArea nav{ overflow: hidden; margin: 30px auto 0;}
#contentsArea nav ul{ overflow: hidden; display: flex; justify-content: center;}
#contentsArea nav ul li{ margin: 0 5px; text-align: center;}
#contentsArea nav ul li img{ width: 100%; max-width: 120px;}
#contentsArea nav ul li span{ display: block; font-size: 14px; margin: 10px 0 0; text-align: center;}

/* -- Contents -- */
/* .wideBox{width:100%; padding-bottom: 50px; background: url(../images/bg2.jpg) center bottom no-repeat; background-size: 100%;} */
.sBox{margin:30px 10px 0;clear:both; position: relative; border:1px solid #ccc; background: #fff;overflow: hidden;}
.sBox:after{ position: absolute; left: 10%; top: 0; display: block; content: ""; width: 80%; border-top: 4px solid #cc0000;}
.ttl{ font-size: 20px; margin: 15px 10px 0; padding: 0 0 0 60px; line-height: 30px;}
.photo{ text-align: center;}
.atn{ clear: both; overflow: hidden; padding:0 10px;}
.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: 60px;}
#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: 40%; 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 .ttl{ background: url(../images/btnNav2.png) left center no-repeat; background-size: 60px;}
.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: 20px 10px;}
.cp .txt{ font-size: 16px; line-height: 1.8;}
.cp .img{ margin-top: 10px;}
.cp img{ width: 100%;}

.plane{ margin-left: 30%;}
.plane img{ width: 70%;}

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

#part5 { margin-bottom: 30px;}
#part5 .photo{ margin: 20px 10px 0; text-align: center;}
#part5 .btn{ text-align: center; margin: 20px 20px 0; text-align: center;}
#part5 .btn img{ width: 100%;}
#part5 .link{ text-align: center; margin: 20px auto; font-size: 16px;}
#part5 .link a{ color: #1876d2 !important; text-decoration: underline !important;}

.info{ border: 1px solid #cc0000; margin-bottom: 20px;}
.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: 10px; overflow: hidden;}
.info dl dt{ font-size: 14px; font-weight: bold; color: #cc0000; padding-bottom: 10px;}
.info dl dd{ font-size: 12px; line-height: 1.6; padding-bottom: 15px;}


.htlbox{ margin:0 10px 20px; overflow: hidden; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.htl{ margin: 20px 1% 0;/*  width: calc( 48% - 2px); */ background: #fff; border: 1px solid #cc0000; overflow: hidden;}
.htl a{ display: block;}
.htl h3{ font-size:16px; padding: 10px 10px 0; line-height: 1.3; font-weight: normal;}
.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; text-align: center;}
.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 .area{ background: #cc0000; font-size:14px; color: #fff; padding: 10px 20px;}
.htl3 .area img{ vertical-align: -3px; padding: 0 5px;}

.htl2 .area{ font-size: 14px; width: 66%; margin: 5px 2% 0; float: right; font-weight: bold;}
.htl2 .area ruby{ vertical-align: -23px;}
.htl2 .area rt{ font-size: 16px; padding: 0 10px;}
.htl2 .area span{ display: block; margin: 8px 10px 0;}
.htl2 .price{ margin: 0;}
.htl2 .photo{ width: 28%; margin: 5px 0 5px 2%; float: left;}
.htl2 .plan{ width: 66%; margin: 5px 2% ; float: right;}

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

/* search */
#contentsArea #search-box{ margin:10px; padding: 40px 0 0; border: 1px solid #ccc; border-radius: 10px ; background: url(../images/logoJAL.png) center 10px no-repeat #fff; background-size: 70%;}
#contentsArea #search-box h1{ height: 28px; color: #c01920;}
#contentsArea #search-box h1:after{ border: 1px solid #c01920;}
#contentsArea #search-box #search-box-body{display: block !important;}
#contentsArea #search-box #overseas-search-box{ padding: 0;}
#contentsArea #search-box .searchCategory{ width: auto; margin:10px 20px 0; padding: 0; border: none; background: none; display: flex; justify-content: flex-end;}
#contentsArea #search-box .searchCategory li{ border: none; width: 100%; margin:0; background: #d02d2d; border-radius: 8px 8px 0 0; padding: 8px; text-align: center; color: #fff; font-size: 20px; font-weight: bold;}
#contentsArea #search-box .searchCategory li span{ font-weight: normal; font-size: 16px; padding: 0 8px;}
#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: 14px; margin:5px 10px; background: url(../images/iconSearch.png) left bottom no-repeat; padding:20px 0 0 80px; width: 100%;}
#contentsArea #search-box .structure3{ margin:0 10px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
#contentsArea #search-box .structure3 dt{ color: #fff; font-size: 16px; width: 20%; font-weight: normal; padding: 10px 0 0; float: none;}
#contentsArea #search-box .structure3 dt .note{ display: block; font-size: 12px;}
#contentsArea #search-box .structure3 dd{ width: 80%; float: none; font-size: 100%; padding: 0; margin: 0; line-height: 1; display: flex; justify-content: flex-start;}
#contentsArea #search-box .structure3 dd.number ul{ display: flex; justify-content: flex-start; width: 98%;}
#contentsArea #search-box .structure3 .selectArea{ width: 100%;}
#contentsArea #search-box .structure3 .selectArea li{ margin-bottom: 0;}
#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: 48%; margin-right: 2%; box-sizing: border-box;}
#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: 14px; color: #000000; width: 48%; margin-right: 2%; box-sizing: border-box; margin-bottom: 10px;}
#contentsArea #search-box select.selectWidth{ width: 98%;}
#contentsArea #search-box .number ul li.adult{ margin-right: 5px;}
#contentsArea #search-box .number ul li.child{ color: #fff; font-size: 16px; display: flex; align-items: center; margin-top: 0}
#contentsArea #search-box .number ul li.child a{text-align: left; line-height: 40px; display: inline-block; margin:0 0 10px 10px; 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{ margin: 10px auto; width: 96%; background: #fff; border-radius: 5px;}
#contentsArea #search-box p.searchSubmit a{ text-indent: 0; line-height: 1; 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; padding: 10px; background: #d02d2d; line-height: 1.8;}
.airPlane{ display: none !important;}
.sltBox{ margin-left: 40px;}
.jdsBnr {
	margin: 30px 0 10px;
    padding: 0;
    text-align: center;
    overflow: hidden;
}
.jdsBnr a { display: block; width: calc(50% - 10px); float: left; margin: 0 5px 10px;}
.jdsBnr a img { width: 100%;}
.bnrbox img {
    width: 100%;
}

.black {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999998;
}
.popUpplan {width:80%;position:fixed;top:15%;left:10%;background:#fff;z-index:99999999;border-radius:12px}
.popUpplan>p {padding:20px;color:#000;font-size:14px;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: 12px; margin: 8px 0; text-align: left;}
.jdsBnr a.btn { display: block; margin: 0 auto; text-align: center;}
.jdsBnr a.btn img { width: 80%; max-width: 460px;}

p.pdf { padding: 0 16px 24px; text-align: center; text-align: left; font-size: 14px; line-height: 21px;}
a.pdfbtn  { display: block; position: relative; max-width: 640px; margin: 24px auto; background: #cc0000;color: #fff !important; text-align: center; font-weight: bold; border-radius: 40px; padding: 8px 20px 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: 3px solid #fff;
    border-right: 3px solid #fff;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


dl.prevent { display: block;  margin: 80px 16px; 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%; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 24px;  margin-bottom: 24px;}
.flightbox dl { width: 62%; background: #ccc; text-align: center; border: 1px solid #b5b5b5; border-right: 0;}
.flightbox dl:first-child,.flightbox dl:nth-child(3){ width: 28%;}
.flightbox dl:nth-child(2),.flightbox dl:nth-child(4) { border-right: 1px solid #b5b5b5;}
.flightbox dl dt { padding: 8px 0;}
.flightbox dl dd { padding: 8px 0; background: #fff; border-top: 1px solid #b5b5b5; height: 135px;}
.flightbox.noh dl { width: 17%;}
.flightbox.noh dl:first-child { width: 39%;}
.flightbox.noh dl:nth-child(2){ border-right: 0;}
.flightbox.noh dl dd { height: auto;}

#part2 h2.ttl {padding-left: 60px; 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: 70px;}
#part2 .htl3 .area { text-align: center;}
#part2 p.tip { width: calc(100% - 32px); margin: 16px 16px 0;}
#part2 img.cal { display: block; width: calc(100% - 32px); margin: 24px 16px 40px;}
#part2 p.time { width: 80%; margin: 16px 16px 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: auto !important; margin:0 auto !important; border: none !important;}
#COUPON .cpnholder .ov .couponimg 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-left: 60px; 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: 70px;}
#part4 .flightbox { width: 46%; margin: 20px 2% 5%; float: left;}
#part4 .flightbox dl { width: 30%;}
#part4 .flightbox.noh dl dd.yellow { background: #FDFF00;}
#part4 .flightbox dl:nth-child(3) {border-right: 1px solid #b5b5b5;}
#part4 .explain {  clear: both; background: #bf0000; padding: 16px; margin: 16px; color: #fff; font-size: 14px; line-height: 150%; font-weight: bold;}
#part4 .explain em { font-style: normal; color: #FDFF00;}

.ttl.fz21 { font-size: 12px; line-height: 14px; padding: 0;}
p.photo.img { margin: 0 10px 10px; overflow: hidden; text-align: center;}
#part3 h2.ttl {padding-left: 60px; font-size: 24px; margin-top: 30px; color: #cc0000; clear: both;}