@charset "utf-8";
/* CSS Document */


#mainwrap {
	width: 100%;
	max-width:1400px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	display:block !important;
	margin-bottom: 20px;
}
#mainwrap img, #mainwrap_mp img {
	width: 100%;
	height: auto;
}
#mainwrap_mp {
	display: none !important;
}


@media only screen and (max-width: 700px) {
#mainwrap_mp {
	width: 100%;
	max-width:500px;
	height:auto;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	display:block !important;
}
#mainwrap {
	display: none !important;
}

}


/************************************************************
 * 役割
************************************************************/
#yakuwariwrap {
	width:100%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:auto;
}
.yakuwariph {
	width:100%;
	height:auto;
	max-width:652px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
}
.yakuwariph img {
	width:100%;
	height:auto;
}
#yakuwariwrap .exp {
	text-align:left;
	width:100%;
}

/************************************************************
 * プロセス
************************************************************/
.flowwrap {
	max-width:1000px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:100px;
}
.flowmidashi {
	width:100%;
	max-width:538px;
	height:auto;
	margin-left:0;
	margin-bottom:20px;
	text-align:left;
}
.flowmidashi img {
	width:100%;
	height:auto;
}
.flow1ph {
	width:100%;
	height:auto;
	max-width:481px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	border:#CCC 1px solid;
	padding:7px;
}
.flow1ph img {
	width:100%;
	height:auto;
}
.flowphwrap {
	width:100%;
	margin-bottom:30px;
	text-align:center;
}
.flowph {
	border:#CCC 1px solid;
	padding:7px;
	max-width:382px;
	width:calc(42% - 16px);
	margin-left:3%;
	margin-right:3%;
	display:inline-block;
	vertical-align:top;
	height:auto;
}
.flowph img {
	width:100%;
	height:auto;
}


.flowexp {
	text-align:left;
	width:90%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

.markupexp {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:8px;
	text-align:center;
	font-size:1.1em;
	background-color:#AF744F;
	color:#FFFFFF;
	margin-top:20px;
}


@media only screen and (max-width: 700px) {
.flowphwrap {
	width:100%;
	margin-bottom:15px;
	text-align:center;
}
.flowph {
	padding:5px;
	width:calc(44% - 16px);
	margin-left:2%;
	margin-right:2%;
}
}


@media only screen and (max-width: 550px) {

.markupexp {
	text-align:left;
	font-size:1.1em;
	font-weight:bold;
}
}