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

#role{
	border:solid 1px #f17700;
	text-align:center;
	padding:4rem 4rem;
	margin-bottom:4.5rem;
}
#role h2{
	font-size:4.5rem;
	color:#f17700;
	margin-bottom:0.5em;
}
#role h2 + p{
	font-size:1.85rem;
	margin-bottom:1.5em;
	color: #f17700;
}

#role ul{
	display:inline-block;
	text-align:left;
}
#role ul li{
	font-size:1.8rem;
	padding-left:2.5em;
	position:relative;
	margin-bottom:1em;
}
#role ul li span{
	position:absolute;
	left:0px;
	top:-0.1em;
	display:flex;
	justify-content:center;
	background-color:#f17700;
	color:#FFF;
	border-radius:0.3em;
	font-size:2.4rem;
	width:1.3em;
	height:1.3em;
	line-height:1;
	padding-top:0.1em;
}

main h3{
	font-size:3rem;
	padding-left:1.3em;
	position:relative;
	margin-bottom:0.7em;
}
main h3:before {
    position: absolute;
    width: 1.13335em;
    height: 1.4334em;
    content: "";
    background: url(../img/icon_activity.png) 0 0 /contain no-repeat;
    left: 0em;
    top: 50%;
    margin-top: -0.71666em;
}

main .box {
	border-top:1px solid #d6d4d4;
	padding:3rem 0;
}
main .box h4{
	font-size:2.6rem;
	margin-bottom:1em;
}
main .box .left{
	width:58.26%;
}
main .box .left dd{
	margin-bottom:1.5em;
}
main .box .left dd p{
	margin-bottom:1.5em;
	padding-left:1em;
	text-indent:-1em;
}
main .box .left .caption{
	padding-left:1em;
	font-size:1.4rem;
	text-indent:-1em;
	margin-top:2em;
}



main .box .img{
	width:34.783%;
	margin-top:1rem;
}
main .box .img img{
	width:100%;
}
main .flow{
	text-align:center;
}
main .flow div{
	display:inline-block;
	text-align:left;
}
main .flow + p{
	margin-top:2.5em;
	margin-bottom:1.5em;
}

main h5{
	font-size:1.8rem;
	color:#f17700;
	padding:0.3em 0.7em;
	border:solid 1px;
	margin-bottom:1em;
	display:inline-block;
	white-space:nowrap;
}

main .box.evaluation .caption{
	font-size:1.4rem;
	text-align:right;
}
main .box.evaluation .flex{
	justify-content:flex-start;
	flex-wrap:nowrap;
}
main .box.evaluation .flex div{
	margin-right:5.8rem;
}
main .box.evaluation .flex div:last-child{
	margin-right:0rem;
}
main .box.evaluation .percent{
	justify-content:flex-start;
	align-items:center;
	font-size:1.8rem;
	margin-top:0.7em;
	margin-bottom:3em;
}
main .box.evaluation .percent span{
	font-size:8rem;
	color:#f17700;
	line-height:0.5;
}
main .box.evaluation .percent span span{
	font-size:2.6rem;
	margin-right:1em;
}
main .box.evaluation .text{
	margin:3em 0 2em 0;
}



/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
	
}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
h1 {
    font-size: 3.2rem;
}
#role {
    padding: 2rem 2rem;
}
#role h2 {
    font-size: 2.5rem;
}
main .box .left {
    width: 100%;
}
main .box .img {
    width: 100%;
    margin-top: 2rem;
}
main .box.evaluation .flex {
    flex-wrap:wrap;
}
main .box.evaluation .flex div {
    margin-right: 0rem;
	margin-bottom:3rem;
}
main .box.evaluation .flex div img{
	max-width:100%;
	width:auto;
}
main .box.evaluation .percent {
	flex-wrap:nowrap;
}
main .box.evaluation .percent span {
    font-size: 6rem;
}
main .box.evaluation .flex div:last-child {
    margin-bottom: 0rem;
}
main .box.evaluation .text {
    margin: 0em 0 2em 0;
}


	
}