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


/*クラス紹介ページ共通CSS*/
/*--------------------------------------------*/
/*モバイル*/
/*--------------------------------------------*/

.container {
	padding-left: 15px;
	padding-right: 15px;
}

article,
article .class {
	margin-bottom: 50px;
}

h3 {
	border-radius: 40px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
}

#class1 h3 {
	background-color: #00a0e9;
}

#class2 h3 {
	background-color: #FD462C;
}

#class3 h3 {
	background-color: #F8893E;
}

#class4 h3 {
	background-color: #FBA3C3;
}

article .photo {
	border: 1px solid #ddd;
	padding: 10px;
	margin-bottom: 10px;
	width: 100%;
	height: auto;
}

section article:nth-of-type(odd) .icon {
	text-align: right;
}

section article:nth-of-type(even) .icon {
	text-align: left;
}

section article .icon img{
	display: inline-block;
	width: 25%;
}







/*--------------------------------------------*/
/*スマホ横/タブレット横/PC/(768px～)*/
/*--------------------------------------------*/
@media only screen and (min-width: 768px) {
	
	article {
		margin: 0 50px 50px;
		/*position: relative;*/
	}
	
	article:nth-of-type(odd) .photo  {
		float: left;
		/*position: absolute;
		left: 0;
		top: 0;*/
		width: 50%;
	}
	
	article:nth-of-type(odd) h3,
	article:nth-of-type(odd) p {
		float: right;
		/*margin-left: 47%;*/
		width: 48%;
	}
	
	article:nth-of-type(even) .photo  {
		float: right;
		/*right: 0;
		top: 0;
		position: absolute;*/
		width: 50%;
	}
	
	article:nth-of-type(even) h3,
	article:nth-of-type(even) p {
		float: left;
		/*margin-right: 47%;*/
		width: 48%;
	}
	
	article::after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}
	
		
	
	

}









/*--------------------------------------------*/
/*タブレット横/PC/(992px～)*/
/*--------------------------------------------*/
@media only screen and (min-width: 992px) {
	
	
	article {
		margin: 0 100px 100px;
	}
	
	section article .icon img{
        display: inline-block;
        width: 30%;
    }

	
	
	

}








/*--------------------------------------------*/
/*PC(1200px～)*/
/*--------------------------------------------*/
@media only screen and (min-width: 1200px) {
	
	article {
		margin: 0 200px 100px;
	}
	
	


}