@charset "utf-8";

/* ==================================================================
	maker.css
=================================================================== */
#wrap{
	background:url(../../images/maker/background.jpg) no-repeat top center;
	background-size:contain;
}

#contents{

}
#contents section, #contents .section {
    margin-bottom: 0;
}

#contents h2{
	margin:2em 0;
	color:#fff;
	text-align:center;
}
#contents h2 dfn{
	margin-top:1.5em;
	letter-spacing:0.1em;
}


.body h3{
	display:flex;
	position:relative;
	margin-bottom:2em;
	color:#023692;
	align-items: baseline;
	box-sizing:border-box;
	border-bottom:2px solid #cecece;
}
.body h3 span{
	margin-bottom:-2px;
	padding-right:0.3em;
	padding-bottom:20px;
	font-family: 'Oswald', sans-serif;
	border-bottom:2px solid #023692;
}

.body h3 dfn{
	font-style:normal;
	font-size:48%;
}

/*-------------------------------------------------------------------
	introduction
-------------------------------------------------------------------*/
#introduction{
	padding-top:3em;
}

#introduction p{
	margin-bottom:2em;
	text-align:center;
	font-size:135%;
	font-weight:bold;
}

#introduction ul{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
}

#introduction ul li,
#contents #introduction ul li:last-child{
	margin-bottom:0.6em;
	padding:1em;
	width:29%;
	color:#023692;
	background:#e4eeff;
	box-sizing:border-box;
	text-align:center;
}


/*-------------------------------------------------------------------
	smart phone
-------------------------------------------------------------------*/
@media only screen and (max-width : 640px) {
#contents .body {
	padding-bottom: 0;
}

#contents .body .area {
    margin-bottom: 0;
}

#wrap{
	background-size:200%;
}

#contents h2{
	margin:1.5em 0;
	font-size:200%;
}

#introduction p{
	font-size:120%;
	margin-bottom: 1em;
}



#introduction ul li,
#contents #introduction ul li:last-child{
	width:49%;
	font-size:83%;
}

}