@charset "utf-8";

.base02{ margin: 0; }

.system_catch{
	color: #18284e;
	font-size: 18px;
	font-weight: bold;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝";
	text-align: center;
	line-height: 38px;
}
.catch_innar{
	padding: 20px;
	max-width: 700px;
	margin: auto;
	background: url(../img/point01.gif) no-repeat left top , url(../img/point02.gif) no-repeat right bottom;
	background-size: 18px auto;
}

.environment{ background: url(/common/img/bg04.gif) repeat; border-top: solid 4px #b59a72; }
.environment .list{ margin-top: 60px; }
.environment .list li{
	display: inline-block;
	width: 30%;
	float: left;
	background: #fff;
	margin-right: 5%;
	margin-bottom: 5%;
}
.environment .list li:nth-child(3n){ margin-right: 0; }
.environment .list figure img{ width: 100%;}
.environment .list figcaption{ padding: 20px; }

.process{ background: url(/common/img/bg02.gif) repeat; border-top: solid 4px #b59a72; }
.process .box{ background: url(../img/num_bg.png) no-repeat left 67px top 143px;  }
.article:after{ content: ""; display: block; clear: both; }
.article{ display: inline-block; } 
.article{ 
	position: relative;
	display: table; 
	padding-top: 68px;
	padding-left: 100px;
	padding-bottom: 50px;
	
} 
.article figure{ display: table-cell; width: 50%; }
.article figure img{ width: 100%; }
.article figcaption{ 
	display: table-cell; 
	vertical-align: middle;
	padding: 50px;
	background: #fff;
	 width: 50%;
}

.num_box{
	position: absolute;
	display: inline-block;
	border: solid 4px #fff;
	padding: 15px;
	width: 106px;
	height: 106px;
	color: #fff;
	font-size: 50px;
	line-height: 43px;
	font-family: 'Italianno', cursive;
	z-index: 1;
}
.num_box span{
	font-size: 60%;
}
.process .num5{ background: none; }

.process .catch_innar2{
	padding: 20px;
	background: url(../img/point03.png) no-repeat left top , url(../img/point04.png) no-repeat right bottom;
	background-size: 18px auto;
	margin-bottom: 60px;
}
.process .catch{
	margin: auto;
	color: #b59a72;
	font-size: 18px;
	text-align: center;
	line-height: 38px;
}


footer{ margin-top: 0; }

/* ■02.横幅1300px以上（PC用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:1120px) {
/* ▼PC用================================================================== */


	
/* ▲PC用================================================================== */
}


/* ■03.横幅768px以上、1299px以下（Tab用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1119px) {
/* ▼Tab用================================================================= */

.article figcaption{ padding: 30px; }
	
/* ▲Tab用================================================================= */
}

/* ■04.横幅480px以上、767px以下（SP横用）
--------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:767px) {
/* ▼SP横用================================================================ */
	
	
.system_catch{ font-size: 14px; line-height: 28px; }

	
.environment .list li{
	display: block;
	width: auto;
	float: none;
	background: #fff;
	margin-right: 0;
	margin-bottom: 30px;
}
.environment .list li:nth-child(3n){ margin-right: 0; }	
		
.environment .main_tit{ font-size: 35px; }	
.process .main_tit{ font-size: 35px; }	
.num_box{
	display: inline-block;
	padding: 10px;
	width: 56px;
	height: 56px;
	font-size: 30px;
	line-height: 13px;
}	
.process .box{ background: url(../img/num_bg.png) no-repeat left 40px top 83px; }	
.article{ 
	display: block; 
	padding-top: 48px;
	padding-left: 60px;
	padding-bottom: 50px;
} 	
	
.article figure{ display: block; width: auto; }
.article figure img{ width: 100%; }
.article figcaption{ 
	display:  block; 
	padding: 20px;
	 width: auto;
}	
.process .catch{ font-size: 14px; line-height: 28px }	
		
/* ▲SP横用================================================================ */
}


/* ■05.横幅479px以下（SP縦用）
--------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:479px) {
/* ▼SP縦用用================================================================ */
	
.system_catch{ font-size: 14px; line-height: 28px; }
	
.environment .list li{
	display: block;
	width: auto;
	float: none;
	background: #fff;
	margin-right: 0;
	margin-bottom: 30px;
}
.environment .list li:nth-child(3n){ margin-right: 0; }	
	
.environment .main_tit{ font-size: 35px; }	
.process .main_tit{ font-size: 35px; }	
.num_box{
	display: inline-block;
	padding: 10px;
	width: 56px;
	height: 56px;
	font-size: 30px;
	line-height: 13px;
}	
.process .box{ background: url(../img/num_bg.png) no-repeat left 40px top 83px; }		
.article{ 
	display: block; 
	padding-top: 48px;
	padding-left: 60px;
	padding-bottom: 50px;
} 	
.article figure{ display: block; width: auto; }
.article figure img{ width: 100%; }
.article figcaption{ 
	display:  block; 
	padding: 20px;
	width: auto;
	font-size: 13px;
	line-height: 24px;
}		
.process .catch_innar2{ margin-bottom: 30px; }	
.process .catch{ font-size: 14px; line-height: 28px }	
	
/* ▲SP縦用用================================================================ */
}

/* ■03.link 
--------------------------------------------------- */