@charset "utf-8";

#me{
	width:230px;
	box-sizing:border-box;
	border-left:1px solid #e5e5e5;
}

#ma{
	flex:1;
}

/**/

#me>div{
	margin:30px;
}

#me h3{
	font-size:18px;
	color:#6e6e6e;
}

#me li{
	position:relative;
	padding-left:20px;
	margin-top:20px;
	cursor:pointer;
}

#me li::after{
	content:url(../img/common/ar-1.png);
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}

/**/

#ma>article{
	margin:30px;
}

#ma h2{
    font-size: 20px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100pc;
    clear: right;
    margin-top: 20px;
}

#ma h2::before{
	content:"";
	background: #6e6e6e;
	position: absolute;
	width: 5px;
	height: 100%;
	left: 0;
	border-radius: 11px;
}

/**/

#iso div{
    display: flex;
    align-items: center;
    clear: right;
    width: 80pc;
}

#ma figure,
#ma ul{
	margin:30px 0;
}

#iso a{
	background: #1a509d;
	color: #fff;
	padding: 10px 20px;
	line-height: 1em;
	border-radius: 2px;
	margin-bottom: 30px;
}

/**/

#ma li{
    border-bottom: 1px dotted #e5e5e5;
    padding-bottom: 10px;
    margin: 10px 0;
    padding-left: 50px;
}

#ma .mr li::before{
	color:#6e6e6e;
}

#ma .nm li{
    counter-increment: sample;
    padding-left: 50px;
}

#ma .nm li::before{
	content:counter(sample);
	color:#fff;
	background:#6e6e6e;
	line-height:20px;
	border-radius:50%;
	width:20px;
	text-align:center;
	height:20px;
	display:block;
}

/**/

@media(max-width:600px){

#bx{
	flex-wrap:wrap;
}

#bx>div{
	width:100%;
}

/**/

#me{
	order:-1;
	border:0;
}

#me>div{
	margin:0;
}

#me h3{
	padding:15px 0;
	border-bottom:1px solid #e5e5e5;
}

#me li{
	padding:15px;
	padding-left:20px;
	margin:0;
}

#me li+li{
	border-top:1px solid #e5e5e5;
}

/**/

#ma{
	flex:auto;
}

#ma>article{
	margin:20px 0
}

/**/

#iso a{
	display:table;
	margin:auto;
}

#ma h3,
#ma h2{
	font-size:17px;
}

}

/**/