@charset "utf-8";

.contents{
	clear: both;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding: 30px 0;
}

.contents_cnt {
	margin: 0 auto;
	text-align: left;
	position: relative;
	width: 980px;
	padding: 0px;
}

.cate_box  {
	margin-bottom: 35px;
}
.cate_box li  {
	float: left;
	padding-right: 19px;
	padding-bottom: 19px;
}
.cate_box li:nth-child(4n),
.cate_box .li_end  {
	padding-right: 0px;
}

.contents .cate_lineup{
	margin: 0 auto;
	text-align: left;
	position: relative;
}
.contents .cate_lineup .cate_big{
	margin: 0 auto;
	text-align: center;
	position: relative;
	background-image: url(../img/area_cate2/cate_big_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 80px;
	padding-bottom: 50px;
}
.contents .cate_lineup .cate_big .h3 {
	padding-bottom: 50px;
}
.contents .cate_lineup .cate_big .cate_sml{
  
  text-align: center;
}

.category-lineup {
	min-width: 680px;
	width: 90%;
	margin: 0 auto;
}

.contents .cate_lineup .cate_big .cate_sml .ul1 {
  display: inline-block;
}
.contents .cate_lineup .cate_big .cate_sml .ul1 li {
  display: inline-block;
    padding: 0 10px 20px;
}

.contents .cate_lineup_box{
	margin: 0 auto;
	text-align: left;
	position: relative;
	width: 76%;
}

.bl_list_box1 {
	margin-bottom: 50px;
}
.bl_list_box1 h3 {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #CCCCCC;
}

.bl_list_box1_cnt {
	margin: 0 auto;
	position: relative;
	width: 100%;
	background-image: url(../img/common/dot.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	text-align: center;
	padding-bottom: 50px;
	padding-left: 20px;
}

.bl_list_box1_cnt > div {
	float: left;
	margin-bottom: 30px;
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
}

.bl_list_box1_cnt .ph {
	text-align: center;
	padding-bottom: 3px;
}
.bl_list_box1_cnt dl {
	width: 200px;
}
.bl_list_box1_cnt dl dt {
	text-align: center;
	margin-bottom: 2px;
	padding-bottom: 2px;
	border-bottom: 1px dotted #333333;
}
.bl_list_box1_cnt dl dt a {
	text-align: left;
	color: #003F7F;
	font-size: 110%;
	letter-spacing: 2px;
}
.bl_list_box1_cnt dl dd {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.bl_list_box1_cnt > div:nth-child(6n) {
}

.bl_list_box1 > a{ display: block; padding-top: 10px; }

ul.category-lineup > li:nth-child(n+2){ display: none; }

.contents .cate_lineup .cate_big._en{  
	background-image: url(../img/area_cate2_en/cate_big_bg.png);
}


@media screen and (max-width:980px) { 

	.contents{
		clear: both;
		overflow: hidden;
		margin: 0 0 20px 0;
		padding: 30px 0;
		width:100%;
	}
	.contents_cnt {
		margin: 0 auto;
		text-align: left;
		position: relative;
		width: 90%;
		padding: 0px;
	}
	.cate_box  {
		margin-bottom: 35px;
	}
	.cate_box li  {
		float: left;
		padding-right: 0px;
		padding-bottom: 19px;
		width: 48%;
	}
	.cate_box li img {
		width: 100%;
		padding-right: 5px;
	}
	.cate_box li:nth-child(2n),
	.cate_box .li_end  {
		text-align:right;
	}
	.cate_box li:nth-child(2n) {
		float: right;
	}
	.contents .cate_lineup{
		margin: 0 auto;
		text-align: left;
		position: relative;
	}
	.contents .cate_lineup .cate_big{
		margin: 0 auto;
		text-align: center;
		position: relative;
		background-image: url(../img/area_cate2/cate_big_bg.png);
		background-repeat: no-repeat;
		background-position: center top;
		padding-top: 80px;
		padding-bottom: 50px;
	}
	.contents .cate_lineup .cate_big .h3 {
		padding-bottom: 50px;
	}
	.contents .cate_lineup .cate_big .cate_sml{
	text-align: center;
	}
	.category-lineup {
		min-width: inherit;
		width: 90%;
		margin: 0 auto;
	}
	.contents .cate_lineup .cate_big .cate_sml .ul1 {
		display: inline-block;
	}
	.contents .cate_lineup .cate_big .cate_sml .ul1 li {
		display: inline-block;
	    padding: 0 10px 20px;
	}

	.contents .cate_lineup_box{
		margin: 0 auto;
		text-align: left;
		position: relative;
		width: 100%;
	}
	.bl_list_box1 {
		margin-bottom: 50px;
	}
	.bl_list_box1 h3 {
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 1px dotted #CCCCCC;
	}
	.bl_list_box1_cnt {
		margin: 0 auto;
		position: relative;
		width: 100%;
		background-image: url(../img/common/dot.png);
		background-position: center bottom;
		background-repeat: no-repeat;
		text-align: center;
		padding-bottom: 50px;
		padding-left: 0px;
	}
	.bl_list_box1_cnt > div {
		float: left;
		margin-bottom: 30px;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
		width: 50%;
	}
	.bl_list_box1_cnt .ph {
		text-align: center;
		padding-bottom: 3px;
	}
	.bl_list_box1_cnt .ph img{
		width: 150px;
		height:100px;
	}
	.bl_list_box1_cnt dl {
		width: 150px;
		margin-right: auto;
		margin-left: auto;
	}
	.bl_list_box1_cnt dl dt {
		text-align: left;
		margin-bottom: 2px;
		padding-bottom: 2px;
		border-bottom: 1px dotted #333333;
	}
	.bl_list_box1_cnt dl dt a {
		text-align: left;
		color: #003F7F;
		letter-spacing: 0px;
		font-size:100%
	}
	.bl_list_box1_cnt dl dd {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}
	.bl_list_box1_cnt > div:nth-child(6n) {
	}
	.bl_list_box1 > a{ display: block; padding-top: 10px; }

	ul.category-lineup > li:nth-child(n+2){ display: none; }
	.contents .cate_lineup .cate_big._en{  
		background-image: url(../img/area_cate2_en/cate_big_bg.png);
}

}





section.spots h2 { margin: 46px auto; }
section.spots h2 { max-width: 202px; }
section.spots .filter-wrap { box-sizing: border-box; max-width: 920px; padding: 0 10px; margin: 0 auto; }
section.spots .filter-wrap * {box-sizing: border-box;}
section.spots .filter { width: 100%; border: 1px solid #BCBCBC; border-radius: 4px; background-color: #FAF9F8; padding: 20px 10px; }
section.spots .filter h3 { font-size: 20px; padding: 1px; }
section.spots .filter-content { max-width: 820px; margin: 20px auto;}
    @media screen and (max-width:980px) {
        section.spots .filter-content {margin-bottom: 0px;}
    }
section.spots .filter-content dl { display: flex; align-items: flex-start; border-top: 1px dotted #BBB; padding: 20px 0; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl { display: block;align-items: flex-start; border-top: 1px dotted #BBB; padding: 20px 0; }
    }
section.spots .filter-content dl dt { font-size: 14px; line-height: 30px; width: 160px; margin: 5px; padding: 0 5px; text-align: left; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl dt { font-size: 14px; line-height: 30px; width: 100%; margin: 5px; padding: 0 5px; text-align: center; }
    }
section.spots .filter-content dl dd { width: 100%; max-width: 650px; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl dd { width: 100%; max-width: 100%; }
    }
section.spots .filter-content dl dd ul { display: flex; flex-wrap: wrap; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl dd ul { display: flex; justify-content: space-between;flex-wrap: wrap; }
    }
section.spots .filter-content dl dd ul li { border: 1px solid #BBB; border-radius: 4px; background-color: #FFF; font-size:14px; line-height: 30px; margin: 5px; width: 96px; text-align: center; cursor: pointer; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl dd ul li { border: 1px solid #BBB; border-radius: 4px; background-color: #FFF; font-size:14px; line-height: 30px; margin: 5px 0; width: 96px; text-align: center; cursor: pointer; }
    }
section.spots .filter-content dl dd ul li.active { background-color: #EEE; }
section.spots .filter-content dl.areas dd div { display: flex; }
section.spots .filter-content dl.areas dd div ul { width: 60%; align-items: flex-start; align-content: flex-start; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl.areas dd div { display: flex;justify-content: space-between;width: 100%; }
        section.spots .filter-content dl.areas dd div ul { width: 100%; align-items: flex-start; align-content: flex-start; }
        section.spots .filter-content dl.areas dd div figure { width: 100%;margin-left: 10px;  }
    }
section.spots .filter-content dl.areas dd div ul li { margin: 10px; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl.areas dd div ul li { width: 48%;  margin: 5px 0; }
    }
section.spots .filter-content dl.categories dd ul li { width: 200px; line-height: 1.4; padding: 10px 16px; }
section.spots.ja .filter-content dl.categories dd ul li:nth-child(1),
section.spots.ja .filter-content dl.categories dd ul li:nth-child(3) { background-color:transparent; border: none;cursor: default;pointer-events: none;}
    @media screen and (max-width:980px) {
        section.spots .filter-content dl.categories dd ul li { width: 100%; line-height: 1.4; padding: 10px 16px; }
        section.spots .filter-content dl.categories dd ul li br { display: none;}
        section.spots.ja .filter-content dl.categories dd ul li:nth-child(1),
        section.spots.ja .filter-content dl.categories dd ul li:nth-child(3) {display: none;}
    }
section.spots .filter-content dl.keyword { border-top-style: solid; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl.keyword { padding-bottom: 0px; }
    }
section.spots .filter-content dl.keyword dd { text-align: left; }
    @media screen and (max-width:980px) {
        section.spots .filter-content dl.keyword dd { text-align: center; }
    }
section.spots .filter-content dl.keyword input[type="text"] { border: 1px solid #BBB; border-radius: 4px; background-color: #FFF; padding: 4px; margin: 5px; width: 100%; max-width: 512px; }
section.spots .filter-content dl.keyword button { border: 1px solid #BBB; color: #FFF; background-color: #777; border-radius: 4px; margin: 5px; padding: 4px; width: 96px; cursor: pointer; }
section.spots .filter-condition { border-top: 1px dotted #BBB; border-bottom: 1px dotted #BBB; display: flex; justify-content: space-between; align-items: center; margin: 50px auto; padding: 20px; }
section.spots .filter-condition p { font-size: 14px; }
section.spots .filter-condition p .count { font-size: 24px; }
