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

@import "flex.css";

main{
	margin-top: 100px;
	margin-bottom: 120px;
}

/*--------------------  iso  --------------------*/
@media screen and (max-width: 639px) {
	section#iso-01 { padding-top: 40px; padding-bottom:10px;}
	section#iso-02 { padding-top: 0; padding-bottom:10px; }
	section#iso-03 { padding-top: 0; padding-bottom:20px; }
	section#iso-04 { padding-top: 0; padding-bottom:10px; }
	.catch3{
	color: #333;
	font-weight: 300;
	font-size: 13px;
	border:1px solid #1e90ff;
	padding:30px;
	padding-tpp:20px;
	margin-bottom:60px;
	}
}
@media screen and (min-width: 640px) {
	section#iso-01 { padding-top: 70px; padding-bottom:0px; }
	section#iso-02 { padding-top: 70px; padding-bottom:0; margin: 0 10% }
	section#iso-03 { padding-top: 0; padding-bottom:20px; }
	section#iso-04 { padding-top: 0; padding-bottom:20px; }
	.catch3{
	color: #333;
	font-weight: 300;
	font-size: 18px;
	border:1px solid #1e90ff;
	padding:30px;
	padding-tpp:20px;
	margin-bottom:60px;
	}
}

@media screen and (min-width: 640px) {
	section#iso-01 ul { display: flex; }
	section#iso-01 ul li { margin: 50px 10px 5px 5px; }
	section#iso-01 ul li img{ width: 100%;height: auto;}
}
@media screen and (max-width: 639px) {
	li{
		text-align: center;
		margin-bottom: 10px;
	}
	img{ 
		width: 80% ;
		height: auto ;
	}
}
/*--------------------  iso  --------------------*/
@media screen and (max-width: 639px) {
	section#iso {
		color: #fff;
		background-color: #0070b8;
	}
	#iso-inner {
		padding-left: 0;
		padding-right: 0;
	}
	section#iso h3 {
		padding: 40px 15px;
		background-image: url("../img/front/bg_iso.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		text-shadow: 0px 0px 5px black;
	}
	section#iso .inner p {
		font-size: 15px;
		text-align: center;
		padding-top: 20px;
	}
}
@media screen and (min-width: 640px) {
	section#iso {
		height: 420px;
		background: url(../img/front/bg_iso.jpg) center no-repeat;
		background-size: cover;
	}
	#iso-inner {
		position: relative;
	}
	section#iso .box-title-co {
		left: 20px !important;
	}
	section#iso .inner {
		height: 420px;
		padding-right: calc(7% + 420px);
		padding-left: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	section#iso .inner p {
		color: #fff;
		padding-left: 100px;
		font-size: 35px;
		text-shadow: 0px 0px 5px black;
	}
}
/*--------------------  iso-2  --------------------*/
@media screen and (max-width: 639px) {
	section#iso-2 {
		color: #fff;
		background-color: #0070b8;
	}
	#iso-2-inner {
		padding-left: 0;
		padding-right: 0;
	}
	section#iso-2 h3 {
		padding: 40px 15px;
		background-image: url("../img/company/iso/bg_iso.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		text-shadow: 0px 0px 5px black;
	}
	section#iso-2 .inner p {
		font-size: 15px;
		text-align: center;
		padding-top: 20px;
	}
}
@media screen and (min-width:640px) and  (max-width: 1239px) {
section#iso-2 {
		height: 300px;
		background: url("../img/company/iso/bg_iso.jpg")center no-repeat;
		background-size: cover;
	}
	#iso-2-inner {
		position: relative;
	}
	section#iso-2 .box-title-co {
		left: 20px !important;
	}
	section#iso-2 .inner {
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	section#iso-2 .inner p {
		color: #fff;
		font-size: 35px;
		text-shadow: 0px 0px 5px black;
	}
}

@media screen and (min-width: 1240px) {
section#iso-2 {
		height: 700px;
		background: url("../img/company/iso/bg_iso.jpg")center no-repeat;
		background-size: cover;
	}
	#iso-2-inner {
		position: relative;
	}
	section#iso-2 .box-title-co {
		left: 20px !important;
	}
	section#iso-2 .inner {
		height: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	section#iso-2 .inner p {
		color: #fff;
		font-size: 35px;
		text-shadow: 0px 0px 5px black;
	}
}

section#iso-2 ul{
	display: flex;
	margin: 0 auto;
}
section#iso-2 li{ margin: 50px 10px 5px 5px;}
/*--------------------  iso.html  --------------------*/
@media screen and (min-width: 640px) {
	.catch3{
        width: 80%;
		color: #333;
		font-size: 15px;
		border:1px solid #1e90ff;
		padding:20px;
        margin-right: auto;
        margin-left:auto; 
	}
}
@media screen and (max-width: 639px) {
	.catch3{
		color: #333;
		font-weight: 300;
		font-size: 10px;
		border:1px solid #1e90ff;
		padding:30px;
		padding-top:20px;
		margin-bottom:60px;
	}
}
/** outline
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#outline-01 { padding-top: 40px; padding-bottom:10px; }
	section#outline-02 { padding-top: 0; padding-bottom:10px;}
	section#outline-03 { padding-top: 0; padding-bottom:20px; }
	section#outline-04 { padding-top: 0; padding-bottom:10px; }
}
@media screen and (min-width: 640px) {
	section#outline-01 { padding-top: 70px; padding-bottom:0px; }
	section#outline-02 { padding-top: 0; padding-bottom:0; margin-bottom: 10px; }
	section#outline-03 { padding-top: 0; padding-bottom:20px; }
	section#outline-04 { padding-top: 0; padding-bottom:20px; }
}

@media screen and (max-width: 639px) {
	section#outline-02 li{
		margin: 0 10px 5px 5px;
	}
}