@charset "utf-8";

#approach #mv{
	position: relative;
	padding-top: 27.3%;
	background: url("../img/approach/approach_mv.png") no-repeat center center / cover;
	overflow-x: hidden;
}
#approach #mv h1{
	top: 12%;
}

#approach .approach_wrap{
	background-image: url("../common/img/kasou_bg-l.png"), url("../common/img/kasou_bg-r.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
	margin-top: -100px;
    padding-top: 100px;
}

#approach .approach_wrap > .inner > p{
	max-width: 1000px;
	font-size: 2rem;
	line-height: 2.425;
	color: #036eb7;
	margin-bottom: 85px;
}

#approach #approach_list{
	background-image: url("../img/approach/bg_01.png");
	background-repeat: no-repeat;
	background-position: calc(50% + 230px) 130px;
	padding-bottom: 185px;
}
#approach #approach_list h2{
	font-size: 4rem;
	color: #036eb7;
	margin-bottom: 15px;
}
#approach #approach_list h2 + p{
	font-size: 1.8rem;
	margin-bottom: 75px;
}
#approach #approach_list ul.list{
	width: 880px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 80px;
}
#approach #approach_list ul.list li{
	min-width: 260px;
	margin-bottom: 45px;
	text-align: center;
}
#approach #approach_list ul.list li p{
	font-size: 2rem;
	line-height: 1.6;
	font-weight: bold;
	color: #036eb7;
}

#approach #approach_list .foot_exercise h3{
	line-height: 0;
	margin-bottom: 40px;
}
#approach #approach_list .foot_exercise ul{
	width: 940px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
#approach #approach_list .foot_exercise ul li{
	width: 440px;
}
#approach #approach_list .foot_exercise dl{
	max-width: 940px;
}
#approach #approach_list .foot_exercise dl dt{
	font-size: 2rem;
	color: #036eb7;
	font-weight: bold;
	margin-bottom: 10px;
}
#approach #approach_list .foot_exercise dl dt::before{
	display: inline-block;
	content: "";
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 14px solid #036eb7;
	margin-right: 10px;
}
#approach #approach_list .foot_exercise dl dd{
	font-size: 1.8rem;
	line-height: 2;
}


@media screen and (max-width: 1320px){
	#approach .inner{
		width: 90%;
	}
	
	#approach #mv h1{
		top: 50%;
		font-size: 3.8rem;
		margin-left: 0;
		transform: translateY(-100%);
	}	
	#approach #mv h1 .inner{
		width: calc(67vw + 96px);
	}
	
	#approach .approach_wrap > .inner > p{
		margin-left: 0;
	}
	
	#approach #approach_list{
		background-position: 5vw 16%;
		background-size: 110% auto;
	}
	#approach #approach_list h2{
		font-size: 3rem;
		line-height: 1.4;
	}
	#approach #approach_list ul.list{
		width: 100%;
		max-width: 1000px;
	}
	#approach #approach_list ul.list li{
		min-width: auto;
		width: 32%;
		margin-bottom: 15px;
	}
	#approach #approach_list ul.list li img{
		width: 60%;
		height: auto;
	}
	#approach #approach_list ul.list li p{
		font-size: 1.6rem;
	}
	
	#approach #approach_list .foot_exercise ul{
		width: 100%;
		max-width: 940px;
	}
	#approach #approach_list .foot_exercise ul li{
		width: 46%;
	}
}

@media screen and (max-width: 767px){
	#approach .inner{
		width: 90%;
		margin: auto;
	}
	
	#approach #mv{
		margin-top: 50px;
		padding-top: 44.4%;
    	background: url(../img/approach/sp/approach_mv.png) no-repeat center top / cover;
	}
	#approach #mv h1{
		font-size: 7.47vw;
		top: 15%;
		margin-left: 0;
		transform: translateY(0);
	}
	#approach #mv h1 .inner{
		width: 90%;
	}
	#approach .approach_wrap > .inner > p{
		font-size: 4vw;
		line-height: 2.17;
		margin-bottom: 30px;
		margin-left: 0;
	}
	
	#approach .approach_wrap{
		background: none;
		margin-top: 0;
		padding-top: 0;
	}
	
	#approach #approach_list{
		background-image: url(../img/approach/sp/bg_01.png);
		background-position: center top;
		background-size: 100% auto;
		padding: 25px 0 55px;
	}
	#approach #approach_list h2{
		font-size: 6vw;
		line-height: 1.52;
		margin-bottom: 10px;
	}
	#approach #approach_list h2 + p{
		font-size: 3.73vw;
		margin-bottom: 20px;
	}
	#approach #approach_list ul.list{
		width: 100%;
	}
	#approach #approach_list ul.list li{
		width: 40vw;
		min-width: auto;
		margin-bottom: 25px;
	}
	#approach #approach_list ul.list li img{
		width: 100%;
	}
	#approach #approach_list ul.list li p{
		font-size: 3.3vw;
	}
	
	#approach #approach_list .foot_exercise h3{
		margin-bottom: 20px;
	}
	#approach #approach_list .foot_exercise ul{
		width: 100%;
		display: block;
		margin-bottom: 30px;
	}
	#approach #approach_list .foot_exercise ul li{
		width: 100%;
	}
	#approach #approach_list .foot_exercise ul li:first-child{
		margin-bottom: 15px;
	}
	#approach #approach_list .foot_exercise dl dt{
		font-size: 4.27vw;
	}
	#approach #approach_list .foot_exercise dl dt::before{
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 12px solid #036eb7;
		margin-right: 10px;
	}
	#approach #approach_list .foot_exercise dl dd{
		font-size: 3.73vw;
	}
}