@charset "UTF-8";

#key-visual{
	background-image: url(../images/about-key-visual.jpg);
}
main{
	padding-left: 0;
	padding-bottom: 8rem;
}
#sec01,
#sec02,
#sec03,
#sec05{
	padding-left: 5rem;
}
#sec01,
#sec02,
#sec03{
	position: relative;
	padding-bottom: 12rem;
}
#sec01 .sec-ttl01{
	margin-bottom: 4rem;
}
#sec01 p{
	padding-right: 18.055vw;
}
#sec01 .vertical-txt{
	position: absolute;
	right: 8.5vw;
	top: 0;
	white-space: nowrap;
	z-index: 99;
}
#sec01 .pics-area{
	position: relative;
}
#sec01 .pics-area:after{
	content: "";
	display: block;
	clear: both;
}
#sec01 .pic{
	height: auto !important;
}
#sec01 .pic01{
	width: 41.284%;
	margin-left: -5rem;
	margin-top: 5.55vw;
	float: left;
}
#sec01 .pic02{
	width: 41.284%;
	margin-left: -5.55vw;
	margin-top: 11.1vw;
	float: left;
}
#sec01 .pic03{
	width: 27.522%;
	position: absolute;
	right: -5rem;
	top: 0;
}
#sec02 .sec-ttl01{
	margin-bottom: 1.6rem;
}
#sec02 .narrow{
	display: flex;
	align-items: center;
}
#sec02 .pic{
	width: 28.5rem;
	margin-left: 7.219vw;
}
#sec02 .parag{
	width: 49.2rem;
}
#sec03 .sec-ttl01,
#sec05 .sec-ttl01{
	margin-bottom: 8rem;
}
#sec03 h3{
	font-size: 1.8rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: .1rem dotted #ccc;
	line-height: 1.5;
}
#sec03 li{
	padding-left: 5rem;
	position: relative;
	display: flex;
	align-items: flex-start;
}
#sec03 li:not(:last-of-type){
	padding-bottom: 8rem;
}
#sec03 li:before{
	content: "1";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.8rem;
	height: 3.8rem;
	color: #fff;
	background: #033490;
	border-radius: 100%;
	position: absolute;
	left: 0;
	top: -1.9rem;
	font-weight: 600;
	z-index: 9;
}
#sec03 li:nth-of-type(2):before{
	content: "2";
}
#sec03 li:nth-of-type(3):before{
	content: "3";
}
#sec03 li:after{
	content: "";
	display: block;
	width: .1rem;
	height: 100%;
	background: #033490;
	position: absolute;
	left: 1.9rem;
	top: 0;
}
#sec03 .pic{
	position: relative;
	width: 45rem;
	margin-right: 4.5rem;
	flex-shrink: 0;
}
#sec03 figcaption{
	width: 18rem;
	height: 5rem;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #033490;
	font-size: 3rem;
	position: absolute;
	left: 0;
	bottom: 4rem;
}
#sec04{
	background: #f6f6f6;
	padding-bottom: 10rem;
}
#sec04 .pics-area{
	display: flex;
}
#sec04 .pic{
	width: 50%;
}
#sec04 .txt{
	padding: 5rem;
	display: flex;
	align-items: center;
}
#sec04 .sec-ttl01{
	margin-right: 15rem;
	flex-shrink: 0;
}
#sec04 .narrow{
	padding-left: 10rem;
	padding-right: 5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 114rem;
	margin-left: 0;
}
#sec04 li{
	width: calc(50% - 1.5em);
	min-height: 2rem;
	padding-left: 4.5rem;
	background: url(../images/about-icon01.png) no-repeat;
	background-position: left top .25em;
	padding-bottom: .5em;
}
#sec05{
	padding-top: 12rem;
}
#sec05 .sec-ttl01 span.sub{
	display: inline;
	color: #333;
	font-size: 1.8rem;
	margin-left: .4em;
}
#sec05 h3{
	line-height: 1.6;
	font-size: 2rem;
	color: #ff9900;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: .1rem dotted #ccc;
}
#sec05 .txt-green{
	font-size: 1.2rem;
	margin-bottom: 2.5rem;
}
#sec05 .narrow{
	padding-right: 0;
	display: flex;
	align-items: flex-start;
	margin-bottom: 7rem;
}
#sec05 .pic{
	width: 32rem;
	flex-shrink: 0;
	margin-right: 5rem;
}
@media screen and (max-width: 1440px){
	#sec04 .sec-ttl01{
		margin-right: 10.416vw;
	}
	#sec05 .pic{
		width: 30.7%;
		margin-right: 0;
	}
	#sec05 .txt{
		width: 64.4%;
	}
	#sec05 .narrow{
		justify-content: space-between;
	}
}
@media screen and (max-width: 1200px){
	#sec03 li{
		justify-content: space-between;
	}
	#sec03 .pic{
		width: 43%;
		margin: 0;
	}
	#sec03 .txt{
		width: 52.4%;
	}
	#sec03 figcaption{
		width: 17.3vw;
		height: 4.8vw;
		font-size: 2.884vw;
		bottom: 3.846vw;
	}

}

@media screen and (max-width: 1000px){
	#sec01 .vertical-txt{
		right: 1.5vw;
	}
	#sec01 p{
		padding-right: 9vw;
	}
}

@media screen and (max-width: 768px){
	main{
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 2rem;
	}
	#sec01,
	#sec02,
	#sec03,
	#sec05{
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	#sec01,
	#sec02,
	#sec03{
		padding-bottom: 7rem;
	}

	#sec01 .sec-ttl01{
		margin-bottom: 2.5rem;
	}
	#sec01 p{
		padding-right: 0;
	}
	#sec01 .vertical-txt{
		position: relative;
		right: auto;
		top: auto;
		white-space: normal;
		writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		font-size: 1.7rem;
		line-height: 1.6;
		margin-bottom: 2rem;
	}
	#sec01 .pics-area{
		margin-top: 2rem;
	}
	#sec01 .pic01{
		width: 54.8%;
		margin-left: 0;
		margin-top: 13vw;
	}
	#sec01 .pic02{
		width: 54.8%;
		margin-left: 0;
		margin-top: -14vw;
		float: right;
	}
	#sec01 .pic03{
		width: 36.5%;
		right: 0;
		top: 0;
	}
	#sec02 .sec-ttl01{
		margin-bottom: 3.5rem;
	}
	#sec02 .narrow{
		flex-direction: column-reverse;
	}
	#sec02 .pic{
		width: 70%;
		margin: 0 auto;
		max-width: 28.5rem;
	}
	#sec02 .parag{
		width: 100%;
		padding-top: 2rem;
	}
	#sec03 .sec-ttl01,
	#sec05 .sec-ttl01{
		margin-bottom: 3.5rem;
	}
	#sec03 h3{
		font-size: 1.6rem;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		margin-top: 1.5rem;
	}
	#sec03 li{
		padding-left: 2.5rem;
		position: relative;
		display: block;
	}
	#sec03 li:not(:last-of-type){
		padding-bottom: 4rem;
	}
	#sec03 li:before{
		width: 2.8rem;
		height: 2.8rem;
		top: -1.4rem;
		left: -1rem;
	}
	#sec03 li:after{
		left: .3rem;
		top: 0;
	}
	#sec03 .pic{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1.5rem;
	}
	#sec03 figcaption{
		width: 10rem;
		height: 3rem;
		font-size: 1.6rem;
		bottom: 2rem;
	}
	#sec03 .txt{
		width: 100%;
	}
	#sec04{
		padding-bottom: 3.5rem;
	}
	#sec04 .pics-area{
		display: flex;
	}
	#sec04 .pic{
		width: 50%;
	}
	#sec04 .txt{
		padding: 2.5rem 2.5rem 3.5rem;
		flex-direction: column;
		align-items: flex-start;
	}
	#sec04 .sec-ttl01{
		margin-right: 0;
		margin-bottom: 2.5rem;
	}
	#sec04 .narrow{
		padding-left: 2.5rem;
		padding-right: 2.5rem;
		flex-direction: column;
		max-width: 100%
	}
	#sec04 li{
		width: 100%;
		padding-left: 3.5rem;
		padding-bottom: 2rem;
	}
	#sec05{
		padding-top: 6rem;
	}
	#sec05 .sec-ttl01 span.sub{
		font-size: 1.2rem;
		margin-left: 0;
		letter-spacing: 0;
	}
	#sec05 h3{
		font-size: 1.6rem;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
	}
	#sec05 .txt-green{
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}
	#sec05 .narrow{
		padding-right: 0;
		display: block;
		margin-bottom: 4rem;
	}
	#sec05 .pic{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1.5rem;
	}
	#sec05 .txt{
		width: 100%;
	}

}