/* CSS for PC @date     2018 @author   sarahchan */
/* ------------------------------------------

------------------------------------------ */
.pc { display: none !important; }

.none { display: none !important; }

.swiper-button-next { background-image: url(https://img.travel.rakuten.co.jp/package/ana/special/gokuraku/images_colle/rightarrow.png) !important; }

.swiper-button-prev { background-image: url(https://img.travel.rakuten.co.jp/package/ana/special/gokuraku/images_colle/leftarrow.png) !important; }

.swiper-button-next, .swiper-button-prev { width: 35px !important; height: 35px !important; background-size: cover !important; top: 48% !important; }

img { max-width: 100%; }

.swiper-container { width: 100%; }

.swiper-slide { width: 80% !important; }

.swiper-slide img { position: relative; width: 100%; }

.swiper-slide span { position: absolute; display: block; bottom: 5px; color: #fff; font-weight: bold; padding: 5px 10px; text-shadow: 0px 0px 6px #000,1px 1px 1px #000,1px 1px 1px #000,1px 1px 1px #000;}
.swiper-slide span b{text-shadow: none; padding: 5px; background: #01367c;margin-bottom: 5px;display: inline-block; font-size: 88%;}
#contents { background: none; }

#widewrapper { background: url(https://img.travel.rakuten.co.jp/package/ana/special/gokuraku/images_colle/bg_sp.jpg) no-repeat top center; background-size: 100%; }

#keyVisual { padding: 2% 2% 0 2%; }

#theme {display: flex;flex-wrap: wrap;justify-content: space-around;}

#theme li { overflow: hidden; width: 49%;position: relative;}
h2.theme {padding-top: 20px;padding-left: 1%;}
#theme li a { display: block; padding: 2%; overflow: hidden; border-radius: 5px; overflow: hidden; }

#theme li a:hover { background: #e6edf5; }

#theme li a img { z-index: -1; border-radius: 5px; overflow: hidden; }

#theme li a span { display: inline-block; background: #01367c; color: #fff; min-width: 100px;width: auto;text-align: center; font-size: 88%; padding: 1px 0 4px; font-weight: bold; height: 20px;
overflow: hidden; border-radius: 0 0 0 5px;}
#theme li a span:after {display: block;content: " ";width: 100%;height: 20px;margin-left: 50px;margin-top: -26px;}

#theme li a b { font-size: 98%;margin-top: -24px; display: block;z-index: 1;}
#theme li a br {display: block;}
h2.areattl { font-size: 98%; font-weight: bold; padding: 2%; }

ul#area { overflow: hidden; }

ul#area li { float: left; width: 33.33%;margin-bottom: 5px; }

ul#area li a { display: block; position: relative; }

ul#area li a img { display: block; }

ul#area li a span { position: absolute; bottom: 0; right: 0; width: 100%; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 78%; padding: 2% 0; text-align: center; }

.switch { display: none; }

.jdsShowFix2 { position: fixed; right: 0; bottom: 30%; text-align: right; width: 13%; z-index: 999; }

.jdsShowFix2 li { padding-bottom: 5px; }

.jdsShowFix2 li:first-child img { width: 85%; }

.sidemenu { position: fixed; right: 0; bottom: 30%;  width: 40%; z-index: 999; }

.sidemenu li { width: 100%; text-align: right; margin-bottom: 10px; }

.sidemenu li a { display: block; border-radius: 15px 0 0 15px; background: rgba(0, 0, 0, 0.7); color: #fff !important; font-size: 98%; padding: 4%; text-align: center; }

.sidemenu li a:hover { text-decoration: none !important; }

.gotop { position: fixed; bottom: 0; right: 0; width: 15%; z-index: 999;right: 5%; }

.gotop a { display: block; }

.searhwrap { padding: 5% 0; }

.breadcrumb { padding: 2%; font-size: 1em; }

.pickup { overflow: hidden; padding: 2%; }

.pickup img { float: left; width: 30%; margin-right: 2%; }

.pickup p { font-size: 1em; line-height: 1.4; clear: both;padding-top: 10px; }

.pickup dl { float: left; width: 68%; }

.pickup dl dt { font-size: 0.9em; font-weight: bold; background: #01367c; padding: 5px 20px 3px; color: #fff; float: left; margin-bottom: 8px; }

.pickup dl dd { clear: both; display: block; font-size: 1.1em; font-weight: bold; }

#search-box { border: 1px solid #000; }

#search-box h1 { color: #000; font-size: 118%; }

#search-box h1.open:after, #search-box h1.close:after { border: 1px solid #000; }

.htlBox { border-radius: 5px; border: 1px solid #83c7e9; }

.htlBox .basic { padding-bottom: 0; border-bottom: none; }

.htlBox .basic a { display: block; overflow: hidden; padding-bottom: 10px; }

.htlBox .basic a:hover { background: #e6edf5; }

.htlBox .basic:before { border-color: #ff3333; }

.htlBox .area { background: none; color: #000; font-size: 1em; }

.htlBox h1 { margin: 5px 7px; color: #01367c; }

.htlBox .explain { font-size: 1em; line-height:1.4; /*margin-right: 10px;*/ }


body {font-size: 14px !important;}
input,select {font-size: 16px !important;}
#contents{padding: 0;}

.pt0{padding-top: 0;}

@media screen and (min-width: 415px) and (max-width: 820px){
    .htlBox .explain{font-size: 1em !important;}
    .pickup p{font-size: 98%;}
    .htlBox3 .explain, .htlBox4 .explain{width: 66%;}
    
}

.hints {
	font-size: 0.9em; line-height:1.4; padding: 0px 10px 0px 8px;
}

.notice { font-size: 0.9em; line-height: 135%; color: #CC0000;}

.htlBox .btn li a { background: #54b7e8; font-weight: bold; position: relative; background: -moz-linear-gradient(top, #72c4ec, #54b7e8); background: -webkit-gradient(linear, left top, left bottom, from(#72c4ec), to(#54b7e8)); }

.htlBox .btn li a:after { display: block; position: absolute; content: ""; border-right: 2px solid #fff; border-bottom: 2px solid #fff; top: 40%; right: 10px; width: 5px; height: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }