/*=================================================
 * CSS for PC
 * ================================================= */

body{
	background: url(./img/bg.jpg) no-repeat top center fixed #000;
	-webkit-background-size: cover;
	background-size: cover;
}

main{
	padding-bottom: 50px;
}


/** concept **/

#concept{
	width: 1200px;
	margin: 0 auto;
	text-align: center;
}

#toptxt{
	margin: 0 0 50px 0;
}

#toptxt h3{
	height: 210px;
	font-size: 0;
	line-height: 0;
	background: url(img/toptxt.png) no-repeat top center;
}

#toptxt .t1{
	font-family: "Sawarabi Mincho";
	font-size: 20px;
	line-height: 30px;
	color: #d81212;
}

#toptxt .t2{
	font-size: 14px;
	line-height: 24px;
	margin: 0 0 20px 0;
}
#toptxt .t2 span{	color: #ff0000;}

#toptxt .t3{
	font-family: "Sawarabi Mincho";
	font-size: 25px;
	line-height: 34px;
}
#toptxt .t3 span{	color: #d81212;}

.concept{
	margin: 0 0 30px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#c1{	background: url(img/c1.jpg) no-repeat;}
#c2{	background: url(img/c2.jpg) no-repeat;}
#c3{	background: url(img/c3.jpg) no-repeat; margin-bottom: 0;}
#c1,
#c3{
	text-align: left;
}
#c2{
	text-align: right;
}

.concept_in{
	height: 420px;
	padding: 30px 40px;
	background:
	url(./img/i1.png) no-repeat top left,
	url(./img/i2.png) no-repeat top right,
	url(./img/i3.png) no-repeat bottom left,
	url(./img/i4.png) no-repeat bottom right;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.concept_in h3{
	font-size: 0;
	line-height: 0;
	margin: 0 0 20px 0;
}

.concept_in div{
	font-family: "Sawarabi Mincho";
	font-size: 25px;
	line-height: 30px;
	color: #d81212;
	margin: 0 0 25px 0;
}

.concept_in p{
	font-size: 16px;
	line-height: 30px;
}

.concept_in p em{	font-size: 20px;}


/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {
	body::before{
		background: url(./img/sp_bg.jpg) top center #000;
		-webkit-background-size: cover;
		background-size: cover;
	}
	main{	padding-bottom: 20px;}

	/** concept **/
	#concept{
		width: auto;
		margin: 0;
		text-align: center;
	}
	#toptxt{
		text-align: left;
		margin: 0 0 10px 0;
		padding: 0 0;
		text-shadow:
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9);
	}
	#toptxt div{
		background: rgba(0,0,0,0.7);
		padding: 10px;
	}
	#toptxt h3{
		height: auto;
		position: relative;
		margin: 0 0 10px 0;
		padding-top: calc(265 / 640 * 100%);
		background: url(./img/sp_toptxt.png) top center / cover no-repeat;
		-webkit-background-size: contain;
		background-size: contain;
	}
	#toptxt .t1{
		font-size: 14px;
		line-height: 18px;
		margin: 0 0 5px 0;
	}
	#toptxt .t2{
		font-size: 11px;
		line-height: 18px;
		margin: 0 0 20px 0;
	}
	#toptxt .t3{
		font-size: 14px;
		line-height: 18px;
	}

	.concept{
		margin: 0 10px 10px 10px;
		border: solid 1px #222222;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#c1{	background: url(img/sp_c1.jpg) no-repeat right bottom; -webkit-background-size: cover; background-size: cover;}
	#c2{	background: url(img/sp_c2.jpg) no-repeat left bottom; -webkit-background-size: cover; background-size: cover;}
	#c3{	background: url(img/sp_c3.jpg) no-repeat right bottom; -webkit-background-size: cover; background-size: cover; margin-bottom: 0;}
	#c1,
	#c3{
		text-align: left;
	}
	#c2{
		text-align: right;
	}

	.concept_in{
		height: auto;
		padding: 15px;
		background:
		url(./img/i1.png) no-repeat top left,
		url(./img/i2.png) no-repeat top right,
		url(./img/i3.png) no-repeat bottom left,
		url(./img/i4.png) no-repeat bottom right;
		-webkit-background-size: 30px auto;
		background-size: 30px auto;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}

	.concept_in h3{
		font-size: 0;
		line-height: 0;
		margin: 0 0 10px 0;
	}
	.concept_in h3 img{
		width: 100%;
		height: auto;
	}
	.concept_in div{
		font-family: "Sawarabi Mincho";
		font-size: 15px;
		line-height: 20px;
		margin: 0 0 10px 0;
		text-shadow:
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9);
	}
	.concept_in p{
		font-size: 12px;
		line-height: 18px;
		text-shadow:
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(0, 0, 0, 0.9);
	}

	.concept_in p em{	font-size: 14px;}

}