@charset "utf-8";
/* CSS Document */

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*style*/
* { 
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing:border-box;
}
a{
	text-decoration:none;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 1s linear;
	
}
a,a:link,a:visited{
	color: #666;
	}
#mainRight h2{
	padding-left:35px;
	margin:15px 0 8px;
	clear:both;
	border-bottom:none!important;
	font-weight:bold!important;
	font-size: 1.4em!important;
	background:url(../../img/topics/hokkaido_yakei/icon.png) no-repeat;
	background-size: 25px;
}

.crumb{
	width: auto;
	margin-bottom:8px;
	padding:8px 0;
}
.ttl{
	font-family: YuGothic, 游ゴシック, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, verdana, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
}
.ttl span.eng{
	font-family:'Open Sans', sans-serif;
	font-size:1.5em;
}
.ttl span.eng:after{
	content:"│";
	padding:0 8px;
	font-size:0.8em;
	font-weight:normal;
}
.ttl-detail03 {
    font-size: 100%!important;
}
.reserveBtn{
	width: 60%;
    float: right;
}
.reserveBtn a{
	background:#f90;
	color:#fff;
	display:block;
	padding:10px 0;
	text-align: center;
	font-weight:bold;
	font-size:1.1em;
}
article,
.crumb-list{
	max-width:1024px;
	margin:0 auto;
}
@media only screen and (max-width: 767px){
article{
	width:100%;
}
}

/*メイン画像*/
#mainPhoto{
	position:relative;
	display:none;
}
#mainPhoto h1{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index:1;
}

#mainPhoto ul li img{
	width:100%;
	height:389px;
}
.slick-dotted.slick-slider{
	margin-bottom:0;
	}
.slick-dots{
	bottom: 10px;
}
.slick-dots li button:before{
	color:#fff;
}
.slick-dots li.slick-active button:before
{
    color:#001A43;
}
/*検索*/
.searchBox{
	margin:15px 0;
	border: #001A43 1px solid;
}
.searchBox .tourTtl{
	text-align:center;
	font-size:1.1em;
	background:#001A43;
	color:#fff;
	padding:5px 0;
}

.searchBox .tourTtl i{
	margin-right:3px;
}
.searchBox .tourTtl span.eng:after{
	content:"│";
	padding:0 2px;
	font-size:0.8em;
	font-weight:normal;
}
.searchBoxInner {
	padding:15px 0;
	font-size:0.9em;
}
.searchBox img.ui-datepicker-trigger {
    width: 25px;
    height: auto;
    vertical-align: bottom;
}
.searchBox dt{padding:2px 0;float:left;margin-left: 15px;padding: 5px 0;}
.searchBox dd{float:left;margin-left: 8px;}
.searchBox p.searchBtn{clear:both; width:60%;margin:5px auto;padding-top: 15px;}
.searchBox p.searchBtn button{width:100%;background-color:#f90;border:none;padding:5px 0; color:#FFFFFF;cursor:pointer;border-radius:5px;margin:5px auto;font-size:1.2em;}
.searchBox p.searchBtn button i{margin-right:5px;}
.searchBox p.searchBtn button:hover{background-color:#CCC;}
.searchBox .search_keyword{border-top:#FFF 1px solid;padding-top:5px;}
.searchBox .search_keyword ul li{float:left;margin-right:8px;line-height:1.5em;margin-bottom: 3px;}
.searchBox .search_keyword ul li a{text-decoration:underline;}
.searchBox select,.searchBox input{padding:3px;max-width: 200px;}
.searchBox dd.selectDate input{width:22px;padding:3px 0;}
.searchBox dd.selectDate input.year1{width:60px;}
.searchBox dd.selectDate span{float:left;margin-right:5px;font-size: 0.9em;}
.searchBox dd.selectDate img{vertical-align:middle;cursor:pointer;width:29px;height:29px;}
.searchBox dd.selectDate img:hover{opacity:0.8;}
.searchBox dd.inputKeyword input.txt{width:100%;}


/*リード文*/
#leadBox{
	border-top:#001A43 5px solid;
	border-bottom:#001A43 5px solid;
	position:relative;
	margin:30px 0 20px;
	padding:15px 8px 8px 8px;
}
#mainRight #leadBox h2{
	position:absolute;
	top:-15px;
	left:0;
	padding-right:8px;
	padding-left:5px!important;
	margin: 0 0 15px 0;
	font-size:1.5em;
	display:block;
	background:#fff;
	color:#001A43;
}

/*メニュー*/
nav.pageLink{
	margin:10px 0;
}
nav.pageLink ul li{
	float:left;
	margin:5px;
	width:calc(100% / 3 - 10px);
	text-align:center;
	padding:5px 0;
	font-size:1em;
	border-right:1px solid #001A43;
}

nav.pageLink ul li:last-of-type{
	border-right:none;
}
nav.pageLink ul li a{
	text-decoration:none;
	color:#666666;
	padding: 10px 0;
    display: block;
	background:#fff;
}

nav.pageLink ul li i{
	margin-left:5px;
}

/*夜景スポット*/
.spotCont{
	padding:8px;
	background: #F4F3EA;
	margin-bottom:12px;
}
.spotImg{
	width:40%;
	float:left;
	margin-right:15px;
	position:relative;
}
.spotImg:before{
    content: '';
    display: block;
    position: absolute;
    right: -6px;
    bottom: 2px;
    width: 100%;
    height: 95%;
    border-right: 1px solid #001A43;
    border-bottom: 1px solid #001A43;
}
.spotImg img{
	width:100%;
}
.spotText{
	width:58%;
	float:left;
}
.spotText h3{
	color:#001A43;
	font-size:1.5em;
	font-family: YuGothic, 游ゴシック, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, verdana, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 5px 0px 8px;
}
.spotText p {
    font-size: 1.1em;
    line-height: 1.5em;
}
.spot_access{
	font-size:0.9em;
	border-top:1px dotted #666;
	margin:8px 0;
	padding:5px;
}

/*ランキング*/
.ranking h2.ttl{
	background:url(../../img/topics/busTop/iconTtlHkdRank.png) no-repeat;
	font-size:1.2em!important;
	font-weight:bold!important;
}
.ranking .ranking-review{
	display:none;
}
.label-chugoku{
	background:#666;
	font-size:0.9em;
}
.ranking-txt{
	margin:0;
}
.price span{
	font-size:150%;
}
.col-1of3 .price,.col-1of4 .price{
	margin:0;
	border:none;
}
.col-1of3 .ranking-img img{
	height:180px;
}
.col-1of4 .ranking-img img{
	height:130px;
}
.col-1of4 .price span{
	font-size:130%;
}
/*新着ツアー*/
.new{
	margin-top:40px;
}
.new h2.ttl{
	background:url(../../img/topics/busTop/iconTtlHkdNew.png) no-repeat;
	font-size:1.2em!important;
	font-weight:bold!important;
	padding: 5px 0px 5px 45px;
}

/*おすすめ*/
#recommendBox h2{
	background:url(../../img/topics/busTop/iconTtlHkdRecommend.png) no-repeat;
	padding-left:45px;
	margin-bottom:10px;
}
#recommendBox .recommendDetail li{
	border:1px solid #d4d4d4;
	margin-right:8px;
	width:191px;
	float:left;
	font-size:0.9em;
	height:215px;
}
#recommendBox .recommendDetail li a{
	color:#666;
}
#recommendBox .recommendDetail li:last-of-type{
	margin-right:0;
}
#recommendBox .recommendDetail img{
	width:100%;
	height:124px;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
#recommendBox .recommendDetail .categoryImg{
	margin-bottom:5px;
	overflow:hidden;
	height:124px;
}
#recommendBox .recommendDetail a:hover img{
	text-decoration:none;
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	 -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    filter: grayscale(80%);
}
#recommendBox .recommendDetail .categoryArea{
	background:#333;
	color:#fff;
	padding:1px 3px;
	margin-left:5px;
	font-size:0.9em;
}
#recommendBox .recommendDetail .categoryName{
	margin-left:5px;
}
/*レポート*/
#reportBox{
	margin-top:20px;
}
#reportBox h2{
	background:url(../../img/topics/busTop/iconTtlReport.png) no-repeat;
	padding-left:45px;
	margin-bottom:10px;
}
#reportBox .reportDetail{
	border:1px solid #d4d4d4;
	margin:0px 5px;
	position:relative;
	    border-radius: 4px;
}

#reportBox .reportDetail img{
	width:100%;
	height:128px;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
#reportBox .reportDetail .categoryImg{
	margin-bottom:5px;
	overflow:hidden;
}
#reportBox .reportDetail .categoryArea{
	position:absolute;
	left:0;
	top:0;
	background:#fff;
	padding: 3px 15px 1px;
    border-bottom-right-radius: 5px;
	border-top-left-radius: 4px;
}
#reportBox .reportDetail a:hover img{
	text-decoration:none;
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	 -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    filter: grayscale(80%);
}
#reportBox .reportDetail .categoryName{
	padding:5px;
}
#reportBox .slick-list{
	padding-bottom:6px;
}
@media only screen and (max-width: 767px){
#mainRight #leadBox h2{
	position: static;
}
#mainPhoto ul li img{
	height:auto;
}
.spotImg{
	width:100%;
	margin-right:0;
}
.spotImg:before{
    right: -2px;
    bottom: -2px;
}
.spotText {
    width: 100%;
    padding: 5px;
}
.reserveBtn {
    width: 100%;
}
}