@charset "utf-8";

/* common
------------------------------------------------------*/
div#contents{
	background:fixed url(../../label/img/bk_map.webp) no-repeat left center / 90% auto;
}
div#contents div#label{
	max-width:1024px;
	margin:0 auto 120px;
	padding:30px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
}
	

/* ttl
------------------------------------------------------*/
div.label h1#cttl span{
	background-image:url(../img/ttl/label.webp),url(../img/bk_gray.png);
}
div.label h2.pttl{
	position:relative;
	margin:0 0;
	padding:15px;
	color:#fff;
	font-size:32px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:right 60px center,center center;
	background-image:url(../../label/img/mush_ttl.webp);
	background-size:200px auto,auto;
}
div.label h2.pttl::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	background:linear-gradient(135deg, #0073e6, #00c3ff);
	z-index:-1;
}

/* list
------------------------------------------------------*/
ul.topics_list li{
	width:calc(25% - 22.5px);
}
ul.topics_list li:nth-child(3n){
	margin-right:30px;
}
ul.topics_list li:nth-child(4n){
	margin-right:0;
}
ul.topics_list li span.pic{
	width:100%;
	padding-top:100%;
	border-radius:100%;
	background-size:cover;
}
ul.topics_list li a:hover span.pic{
	background-size:cover;
}
ul.topics_list li p.place,
ul.topics_list li p.name{
	text-align:center;
}

ul.topics_list li p.place{
	color:#646464;
	text-decoration:none;
}

/* for_buyer
------------------------------------------------------*/
div#for_buyer{
	max-width:calc(1024px - 180px);
	position:relative;
	margin:0 auto;
	padding:45px 90px 35px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background-color:rgba(235,235,235,0.7);
}
div#for_buyer:before{
	width:270px;
	content:"";
	position:absolute;
	top:-30px;
	right:75px;
	display:block;
	padding-top:202px;
	background:url(../../label/img/mush_buyer.webp) no-repeat center center / 100% auto;
}
div#for_buyer h1.ttl{
	margin-bottom:15px;
	font-size:24px;
	font-weight:bold;
}
div#for_buyer p{
	margin-bottom:30px;
}
div#for_buyer a.btn{
	display:inline-block;
	margin-right:15px;
}

/* detail
------------------------------------------------------*/


/* Responsive Design
------------------------------------------------------*/

/* 1060px以下 */
@media screen and (max-width:1060px){
	div#contents div#label{
		max-width:100%;
	}
	ul.topics_list li{
		width:calc(33.33% - 20px);
	}
	ul.topics_list li:nth-child(4n){
		margin-right:30px;
	}
	ul.topics_list li:nth-child(3n){
		margin-right:0;
	}
	div#for_buyer{
		max-width:calc(100% - 120px);
		padding:45px 60px 35px;
	}
	div#for_buyer:before{
		width:220px;
		padding-top:165px;
		right:60px;
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div#contents{
		background-size:70% auto;
	}
	div.label h2.pttl{
		margin:0 0;
		font-size:28px;
		background-position:right 40px center,center center;
		background-size:150px auto,auto;
	}
	div#for_buyer{
		max-width:calc(100% - 80px);
		padding:45px 40px 35px;
	}
	div#for_buyer:before{
		width:180px;
		padding-top:135px;
		top:-25px;
		right:40px;
	}
	div#for_buyer h1.ttl{
		font-size:22px;
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div#contents div#label{
		padding:30px 20px;
	}
	div#contents{
		background-size:80% auto;
	}
	div.label h2.pttl{
		margin:0 0;
	}
	ul.topics_list li{
		width:calc(50% - 15px);
		margin-right:30px;
	}
	ul.topics_list li:nth-child(3n){
		margin-right:30px;
	}
	ul.topics_list li:nth-child(2n){
		margin-right:0;
	}
	div.label h2.pttl{
		font-size:26px;
		background-position:right 30px center,center center;
		background-size:130px auto,auto;
	}
	div#for_buyer{
		max-width:calc(100% - 60px);
		padding:35px 30px 30px;
	}
	div#for_buyer:before{
		width:160px;
		padding-top:120px;
		top:-20px;
		right:30px;
	}
	div#for_buyer h1.ttl{
		font-size:20px;
	}
	div#for_buyer a.btn{
		display:block;
		margin:0 auto 15px;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div#contents div#label{
		padding:20px 15px;
		border-radius:20px;
	}
	div#contents{
		background-size:100% auto;
		background-position:left bottom;
	}
	ul.topics_list li{
		width:100%;
		margin-right:0;
	}
	ul.topics_list li:nth-child(2n){
		margin-right:0;
	}
	div.label h2.pttl{
		margin:0 0;
		padding:12px;
		font-size:24px;
		background-position:right 20px center,center center;
		background-size:110px auto,auto;
	}
	div#for_buyer{
		max-width:calc(100% - 40px);
		padding:30px 20px 25px;
	}
	div#for_buyer:before{
		width:140px;
		padding-top:105px;
		top:-18px;
		right:20px;
	}
	div#for_buyer h1.ttl{
		font-size:18px;
		margin-bottom:10px;
	}
	div#for_buyer p{
		margin-bottom:20px;
		font-size:14px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div#contents div#label{
		padding:15px 10px;
		border-radius:15px;
	}
	div.label h2.pttl{
		padding:10px;
		font-size:22px;
		line-height:1.4;
		background-position:right 15px center,center center;
		background-size:90px auto,auto;
	}
	div#for_buyer{
		max-width:calc(100% - 30px);
		padding:25px 15px 20px;
		border-radius:20px;
	}
	div#for_buyer:before{
		width:110px;
		padding-top:82px;
		top:-15px;
		right:15px;
	}
	div#for_buyer h1.ttl{
		font-size:16px;
	}
	div#for_buyer p{
		font-size:13px;
	}
}