@charset "shift_jis";

@media screen and (min-width: 641px) {

/* -----------------------------------------------------------------------------

mechanism

----------------------------------------------------------------------------- */
.mechanism {
	background: url(/brand/aroe_n/img/pc_bg_contents01.jpg) no-repeat center top #d6f6c0;
	padding-bottom: 110px;
}
.mechanism h2 {
	background-image:url(/brand/aroe_n/img/pc_mechanism_bg_ttl.png);
}

.mechanism .contentsBox h3 + section > div {
	left:50%;
	overflow:hidden;
}
.mechanism .contentsBox h3 + section > div ul{
	float: left;
	position: relative;
	left: 50%;
}
.mechanism .contentsBox h3 + section > div li{
	float: left;
	position: relative;
	left: -50%;
	width: 210px;
	margin-left:30px;
}
.mechanism .contentsBox h3 + section > div li:first-child {
	margin-left:0;
}
.mechanism .contentsBox h3 + section > div li span {
	font-size:128%;
	display:block;
	margin-bottom:40px;
	line-height: 25px;
	text-align: center;
}
.mechanism .contentsBox h3 + section > div li span:before {
	content:"";
	width:20px;
	height:24px;
	position: relative;
	background: url(/brand/aroe_n/img/pc_icon_point.png) no-repeat 0 0;
	display: inline-block;
	top: 4px;
	margin-right: 5px;
}
.mechanism .contentsBox h3 + section > div li img {
	width:200px;
	height: auto;
}


/* cause
-----------------------------------------------*/
.mechanism .cause .copy {
	text-align:center;
	margin-bottom:40px;
}
.mechanism .cause .method {
	text-align:center;
	margin-bottom:40px;
}
.mechanism .cause > div div dl {
	width: 320px;
	float:left;
	margin-left:20px;
}
.mechanism .cause > div div dl dt {
	font-weight:bold;
	font-size:128%;
	margin-bottom: 10px;
	text-align: center;
}
.mechanism .cause > div div dl dd p {
	text-align:center;
}
.mechanism .cause > div div dl dd figure img {
	width:300px;
	height: auto;
}
.mechanism .cause > div div > figure {
	width: 330px;
	float:right;
	margin-right:20px;
}
.mechanism .cause > div div > figure img {
	width: 330px;
	height:auto;
}

/* point
-----------------------------------------------*/
.mechanism .point > div div ul {
	width:432px;
	float:left;
	margin-top: 45px;
}
.mechanism .point > div div li {
	position:relative;
	margin-bottom:20px;
}
.mechanism .point > div div li .ttl {
	position:absolute;
	top: -3px;
	left: -3px;
}
.mechanism .point > div div li .txt {
	position:absolute;
	top:60px;
	left:40px;
	margin:0;
	width: 370px;
}
.mechanism .point > div div li.point01 {
	width:432px;
	height:125px;
	background:url(/brand/aroe_n/img/pc_mechanism_bg_point01.png) no-repeat;
}
.mechanism .point > div div li.point02 {
	width:432px;
	height:154px;
	background:url(/brand/aroe_n/img/pc_mechanism_bg_point02.png) no-repeat;
}
.mechanism .point > div div dl {
	width:270px;
	float:right;
}
.mechanism .point > div div dl dt {
	font-weight:bold;
	font-size:128%;
	margin-bottom:20px;
	text-align: center;
}
.mechanism .point > div div dl dd p {
	margin-bottom: 10px!important;
}
.mechanism .point > div div dl dd figure img {
	width: 270px;
	height:auto;
}
.mechanism .point > div p.btn {
	margin-top:60px;
	text-align:center;
	width: 351px;
	margin: 60px auto 0;
}
.mechanism .point > div p.btn a {
	display:block;
}

}