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

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

#widewrapper { width: 100%; background: url(../images/bg.jpg) top center no-repeat; clear: both; background-size: cover; background-attachment: fixed; }

#keyVisual { width: 1160px; margin: 0 auto; }

#keyVisual h1 { text-indent: 0px; padding-top: 20px; }

#contents.column1 { width: 1160px; padding: 0; background: none; margin: 0 auto; }

h2.theme { color: #000; font-weight: bold; font-size: 1.3em; }

h2.areattl { color: #000; font-weight: bold; font-size: 1.3em; }

#theme { overflow: hidden; padding: 5px 0 40px; }

#theme li { float: left;}

#theme li a { display: block; margin: 10px 3px; line-height: 130%; font-size: 1.2em; width: 380px; border-radius: 5px; overflow: hidden;}

#theme li a:hover { background: #e6edf5;opacity: 0.8; }
#theme li a img{ border-radius: 5px; overflow: hidden;}
#theme li a b{padding-right: 8px;display: block;margin-top: -32px;}
#theme li a span { display: inline-block; background: #01367c; color: #fff; text-align: center; min-width: 90px; width: auto;font-size: 0.8em; padding: 0 5px;margin-bottom: 7px;height: 24px; border-radius: 0 0 0 5px;}

#area { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding-bottom: 60px; }

#area li { padding: 10px 1px; }

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

#area li a:hover { opacity: 0.8; }

#area li a img { display: block; }

#area li a span { display: block; position: absolute; bottom: 0; text-align: center; background: rgba(0, 0, 0, 0.8); width: 100%; color: #fff; padding: 4px 0; font-size: 1em; }

.jdsShowFix1 { position: fixed; bottom: 50px; right: 0; text-align: right; z-index: 999; }

.jdsShowFix1 li a { display: block; }

.jdsShowFix1 li a:hover { opacity: 0.8; }

.jdsShowFix1 li:last-child { padding-top: 20px; }

.searhwrap .sltBox:after { bottom: -20px; transform: rotate(180deg); }

.searhwrap .sltBox:before { bottom: -29px; transform: rotate(180deg); }

.searhwrap { position: fixed; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.8); left: 0; display: none; z-index: 999; }

.thisClose { position: relative; }

.thisClose span { display: inline-block; position: absolute; font-size: 32px; text-align: center; padding: 10px; border-radius: 50px; background: #fff; width: 30px; height: 30px; right: calc(50% - 580px); z-index: 999; top: -30px; border: 1px solid #000; vertical-align: middle; }

.none { display: none !important; }

.switch, #search-box-title { display: none; }

.column1 #search-box { width: 1160px; margin: 20px auto; }

.column1 #search-box .searchCategory { width: 1100px; }

.pickup { overflow: hidden; background: rgba(255,255,255,0.8); margin-bottom: 15px; padding: 10px;}

.pickup img { float: left; width: 236px; margin-right: 10px; }

.pickup p { font-size: 1em; line-height: 135%;float: left;  width: 894px;}

.pickup dl { float: left; width: 894px; padding-bottom: 5px;}

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

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

.column1 .hotels { width: 1160px; margin-bottom: 20px; }

.column1 .htlBox4 { width: 282px; }

.column1 .htlBox4:nth-child(4n) { margin-right: 0; }

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

.htlBox .area { background: none; color: #000; margin-bottom: 0px; font-size: 0.9em; line-height: 1.2;}

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

.htlBox .explain { font-size: 0.9em; line-height: 1.3;}

.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); }

.htlBox .btn li a:hover { opacity: 0.8; }

#opensearch:hover{opacity: 0.8;cursor: pointer;}

.ui-datepicker.ui-widget, .ui-datepicker.ui-widget th, .ui-datepicker.ui-widget td{z-index: 999 !important;}

.hints {
	font-size: 0.9em; line-height: 135%; margin:0 0 15px 10px;
}
.notice { font-size: 0.9em; line-height: 135%; color: #CC0000;}

.htlBox .btn {display: flex;flex-wrap: wrap;justify-content: space-between;}
.htlBox .btn li {width: 49%;
	margin-bottom: 7px;
	list-style-type: none;
}