@charset "UTF-8";

/********************************************


SYSTEM


**********************************************/

#s01,#s02,#s03,#s04,#s05,#s06,#s07{
	margin-top: -125px;
	padding-top: 125px;
}



.system__container{
	display: flex;
	margin-top: 40px;
	margin-bottom: 40px;
}
.system__box{
}
.system__text{
	width: 60%;
	margin-right: 5%;
}
.system__text02{
	width: 37%;
	margin-right: 2%;
}
.system__text03{
	width: 37%;
	margin-left: 2%;
}
.system__text.ml{
	width: 60%;
	margin-right: 0;
	margin-left: 5%;
}
.system__img{
	width: 35%;
}
.system__img02{
	width: 34%;
	margin-left: 1%;
}
.system__img03{
	width: 34%;
	margin-right: 1%;
}
.system__img img{
	width: 100%;
}
.system__img iframe{
	width: 100%;
	height: 17vw;
}
.system__img02 img{
	width: 100%;
}

.system__img03 img{
	width: 100%;
}

.mb50{
	margin-bottom: 50px;
}
.system__box dt{
background: #003894; /* Old browsers */
background: -moz-linear-gradient(left,  #003894 0%, #00b9ef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #003894 0%,#00b9ef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #003894 0%,#00b9ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003894', endColorstr='#00b9ef',GradientType=1 ); /* IE6-9 */
	padding: 5px;
	font-size: 2rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	margin-bottom: 20px;
}
.system__box dd>span{
color: #003894;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 20px;
	display: block;
}
.system-column{
	border: 1px solid #003894;
	padding: 10px;
	margin-top: 20px;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.18);
	background: rgba(255,255,255,.3);
}
.system-column__name{
	color: #003894;
	margin-bottom: 10px;
	font-weight: bold;
}
.system-column__name span{
	font-size: 1.2rem;
	margin-left: 1em;
}
.system-column__years{
	background: #003894;
	color: #FFF;
	padding: 5px 10px;
	display: inline-block;
	margin-bottom: 10px;
}
.system-column__career li span{
	color: #003894;
	font-weight: bold;
}
.system-column__career li{
	position: relative;
	margin-bottom: 20px;
}
.system-column__career li:last-child{
	position: relative;
	margin-bottom: 0;
}
.system-column__career li::after{
	position: absolute;
	content: '▼';
	width: 10px;
	height: 10px;
	top:22px;
	left: 15px;
	color: #003894;
}
.system-column__career li:last-child::after{
	position: absolute;
	content: none;
	width: 10px;
	height: 10px;
	top:20px;
	left: 15px;
	color: #003894;
}
/* -- Media query	767px以下の場合 スマートフォン設定------------*/

@media screen and (max-width: 768px ) {

.system__container{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
	margin-bottom: 0;
}
.system__container:last-of-type{
	margin-bottom: 50px;
}
.system__text{
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
	margin-top: 80px;
}
.system__container:nth-of-type(1) .system__text{
	margin-top: 0;
}
.system__text.ml{
	width: 100%;
	margin-right: 0;
	margin-left: 0;

}
.system__img{
	width: 100%;
	order: 1;
}

.system__text02{
	width: 100%;
	margin-right: 0;
}
.system__text03{
	width: 100%;
	margin-left: 0;
}

.system__img02{
	width: 100%;
	margin-left: 0;
	margin-top: 20px;
}
.system__img03{
	width: 100%;
	margin-right: 0;
	margin-top: 20px;
	order: 1;
}
.system__img iframe{
	width: 100%;
	height: 300px;
}

}