@charset "utf-8";

/*common
----------------------------------------------------------------------------------*/



/*sponsorship_list
----------------------------------------------------------------------------------*/
div.sponsor_list p.outline{
	margin:-15px auto 30px;
	font-size:14px;
}

/*#search*/

div#search{
	min-height: calc(30px + 1.2em + 5px + 1px + 15px + 360px + 2.16em + 30px - 45px);
	position:relative;
	margin-bottom:60px;
	letter-spacing: -0.4em;
}
div#search *{
	letter-spacing: normal;
}
div#search div.inner{
	width:calc(70% - 60px);
	display:inline-block;
	vertical-align:top;
}
div#search div#search_keyword{
	margin-bottom:30px;
}
div#search div#search_genre{
	margin-bottom:30px;
}
div#search div#search_city{
	width:30%;
	position:absolute;
	right:0;
	display:inline-block;
	vertical-align:top;
}
div#search div#search_city object{
	width:100%;
}
div#search div#search_city #map-tooltip {
	position: absolute;
	pointer-events: none;
	background: rgba(0,0,0,0.75);
	color: #fff;
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	left: 0;
	transform: translate(-50%, -120%);
	transition: opacity 0.2s ease;
	z-index: 1000;
}
div#search h3.ttl{
	margin:0 0 15px;
	padding:5px 30px;
	color:#fff;
	font-size:20px;
	text-align:left;
	border-radius:10px;
	background-color:#5fbeb4;
}
div#search div#search_genre span.check{
	width:calc(30px + 7em);
	display:inline-block;
	vertical-align:top;
}
div#search div#search_type{
	margin-bottom:30px;
}
div#search div#search_type span.check{
	width:calc(30px + 13em);
	display:inline-block;
	vertical-align:top;
}
div#search a.btn{
	color:#fff;
	border:none;
	background-color:#1968b7;
}
div#search a.btn:hover{
	background-color:orange;
}


/* sorting */
dl#sorting{}
dl#sorting dt,
dl#sorting dd{
	margin-right:10px;
}
dl#sorting dt.ttl{
	position:relative;
	margin:-5px 30px 0 0;
	padding:10px 30px 10px 15px;
	color:#fff;
	line-height:1;
	background-color:#62af00;
}
dl#sorting dt.ttl:after{
	width:calc(1em/1.414 + 20px/1.414);
	height:calc(1em/1.414 + 20px/1.414);
	content:"";
	position:absolute;
	top:calc(-1em/1.414/2 - 20px/1.414/2 + 1em/2 + 20px/2);
	right:calc(-1em/1.414/2 - 20px/1.414/2);
	display:block;
	transform:rotate(45deg);
	background-color:#62af00;
}
dl#sorting dd a{
	width:40px;
	height:40px;
	display:inline-block;
	margin: calc(-13px + 0.5em) 5px 0 0;
	padding:calc(18px - 0.5em) 0;
	color:#005661;
	text-align:center;
	line-height:1;
	border:1px #62af00 solid;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	transition:all 0.3s linear;
}
dl#sorting dd a:hover{
	color:#fff;
	background-color:#62af00;
}



/* topics_list*/
div#topics ul li{
	position:relative;
	padding:15px;
}
div#topics ul li p a{
	margin-bottom:5px;
	font-weight:bold;
	overflow:visible;
}
div#topics ul li p.genre{
	width:6em;
	position:absolute;
	top:15px;
	left:15px;
	color:#fff;
	font-size:16px;
	text-align:center;
	border-radius:15px;
	background-color:#ff6464;
}
div#topics ul li p.add{
	margin-bottom:15px;
	font-size:14px;
}
div#topics ul li p.benefit{
	width:100%;
	padding:5px 20px;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	border-radius:15px;
	background-color:#6b3d11;
	background-image:url(../img/ill4.png),url(../img/ill5.png);
	background-repeat:no-repeat;
	background-position:left top,right top;
}



/*sponsorship
----------------------------------------------------------------------------------*/
div#sponsorship div.inner{
	width:auto;
}
div#sponsorship strong{
	color:#ff4646;
	font-weight:bold;
}
div#sponsorship h3#name {
	margin-top:90px;
	margin-bottom:15px;
	font-size:26px;
	font-weight:bold;
	text-align:center;
}
div#sponsorship h3.ttl {
	margin-bottom:15px;
	padding:0 0 0 10px;
	color:#5fbeb4;
	font-size:24px;
	font-weight:bold;
	text-align:left;
	border-left:5px #5fbeb4 solid;
	border-bottom:1px #ccc solid;
}

div#sponsorship p.note{
	font-size:14px;
}
div#sponsorship h3.ttl + p,
div#sponsorship h3.ttl#area + p + p.note{
	margin-bottom:30px;
	padding-left:30px;
}
div#sponsorship h3#name + ul.category{
	margin-bottom:45px;
	text-align:center;
}
div#sponsorship h3#name + ul.category li{
	margin:0 5px;
}
div#sponsorship h3#name + ul.category li a{
	display:block;
	padding:5px 10px;
	line-height:1;
	border:1px #6a3906 solid;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	trangision:all 0.3s linear;
}
div#sponsorship h3#name + ul.category li a:hover{
	color:#fff;
	background-color:#6a3906;
}
div#sponsorship h3#benefit + p strong,
div#sponsorship h3#gold + p strong{
	font-size:20px;
}
div#sponsorship h3.ttl#gold + p{
	margin-bottom:0;
}
div#sponsorship h3.ttl#gold + p + p.note{
	margin-bottom:30px;
}
div#sponsorship h3#info + dl{
	margin-left:30px;
	margin-bottom:30px;
}
div#sponsorship h3#info + dl dt,
div#sponsorship h3#info + dl dd{}
div#sponsorship h3#info + dl dt{
	width:7em;
}
div#sponsorship h3#info + dl dd{
	width:calc(100% - 7em);
}
div#sponsorship div.link_btn{
	width:100%;
	clear:both;
	margin-top:30px;
	padding-top:30px;
	text-align:center;
	border-top:1px #ccc solid;
}
div#sponsorship div.link_btn a{
	display:block;
	margin:5px auto;
}


/* pic */
div#sponsorship ul#pic{
	width:100%;
	max-width:300px;
	float:right;
	margin-left:30px;
	margin-bottom:15px;
}
div#sponsorship ul#pic li{
	margin-bottom:15px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	transition:all 0.3s linear;
}
div#sponsorship ul#pic li:nth-child(1){
	width:100%;
}
div#sponsorship ul#pic li:nth-child(n+2){
	width:calc(33.33% - 10px);
	margin-right:15px;
}
div#sponsorship ul#pic li:nth-child(3n+1){
	margin-right:0;
}
div#sponsorship ul#pic li:hover{
	opacity:0.5;
}
div#sponsorship ul#pic li a{
	display:block;
	width:100%;
	padding:0;
	padding-top:100%;
	line-height:1;
}
div#sponsorship a.googlemap{
	margin-left:5px;
	padding:2px 10px;
	text-align:center;
	border:1px #6a3906 solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	transition:all 0.3s linear;
}
div#sponsorship a.googlemap:hover{
	color:#fff;
	background-color:#6a3906;
}

@media screen and (max-width:1080px){
	div#sponsorship {
		width:calc(100% - 120px);
		margin:0 auto;
	}
}