@charset "utf-8";

.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.12%;
	background-image: url("../img/prof/main.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* 共通 */
#about h3, #summary h3, #business h3, #chart h3, #history h3{
	position: relative;
	margin: 0 auto;
	color:#4187c7;
	font-weight: bold;
	font-size: .24rem;
	text-align: left;
	padding-bottom: 6%;
}
#summary h3, #chart h3.white, #history h3{color:#ffffff;}

/* about */
#about{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #ffffff;
}
#about h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 10%;
	background-image: url("../img/prof/ttl_prof.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#about h4{
	position: relative;
	margin: 4% 0;
	width: 100%;
	height:0;
	padding-top: 25%;
	background-image: url("../img/prof/ttl_greeting.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#about p{ position: relative; width: 96%; margin: 6% auto 0 auto; text-align: left;}
#about .rightBox{
	position: relative;
	margin: 6% auto;
}
#about .rightBox img{width: 80%;}
#about .rightBox p{
	position: relative;
	margin: 4% 0;
	width: 96%;
	height:0;
	padding-top: 7%;
	background-image: url("../img/prof/chief.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

/* summary */
#summary{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-color: #4187c7;
	color: #ffffff;
}
#summary .leftBox h4{
	position: relative;
	margin: 0 auto 5% auto;
	display: block;
	width: 100%;
	height:0;
	padding-top:27%;
	background-image: url("../img/prof/ttl_gaiyou.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#summary dl {
	position: relative;
	width:100%;
	margin-bottom: 4%;
	border-top: dotted 1px #ffffff;
}
#summary dt {
	float:left;
	width:24%;
	padding: 0 2%;
	height: 100%;
}
#summary dd{
	padding: 0 2% 0 30%;
	text-align: left;
	border-bottom: dotted 1px #ffffff;
}
#summary dt p, #summary dd p{ padding: 2% 0 2% 2%;}
#summary dd p, #summary dd a{ border-left: dotted 1px #ffffff;}
#summary dd a{padding: 2% 0 2% 2%; color: #ffffff;}
#summary iframe {
	position: relative;
	margin: 4% auto;
	width: 100%;
	height: 300px;
}
#summary .rightBox h3{margin: 6% 0 2% 0;}
#summary .rightBox p{text-align: left;}

/* business */
#business{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#business ul{
	position: relative;
	margin: auto;
	text-align: left;
	background-color: #ffffff;
}
#business ul li{
	position: relative;
	margin: auto;
	padding: 2%;
	border-bottom: dotted 1px #434344;
}
#business ul li:before{
	position: relative;
	content: '・ ';
}

/* chart */
#chart{
	position: relative;
	margin: -24% auto 0 auto;
	z-index: -2;
	background-color: rgba(65,135,199,.03);
}
#chart .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	padding-top: 79%;
	background-color: #4187c7;
	z-index: -1;
}
#chart .bg1{
	position: relative;
	margin: 4% auto;
	padding: 3%;
	background-color: #ffffff;
}
#chart .contents-inner{padding: 26% 0 0 0;}
#chart .bg1 h3{margin: 12% 0 0 0;}

/* history */
#history{
	position: relative;
	margin: 0 auto 8% auto;
	padding-top: 20%;
	background-image: url("../img/prof/prof_bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 45%;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#history .bg{
	position: absolute;
	top:4%;
	left: 0;
	width: 40%;
	padding-top: 140%;
	background-color: #4187c7;
	z-index: -1;
}
#history h3{padding: 22% 0 0 0;}
#history ul{
	position: relative;
	margin: -20% 0 0 auto;
	width: 78%;
	text-align: left;
	background-color: #ffffff;
}
#history ul li{
	position: relative;
	margin: auto;
	padding: 2%;
	border-bottom: dotted 1px #434344;
}
#history ul li:before{
	position: relative;
	content: '・ ';
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	
	/* 共通 */
	#about h3, #summary h3, #business h3, #chart h3, #history h3{padding-bottom: 50px;margin: 0 0 0 20px;}
	.leftBox, .rightBox{
		position: relative;
		margin: 0 ;
		display: inline-block;
		width: 480px;
		vertical-align: top;
	}
	.rightBox{margin: 0 0 0 25px;}
	
	/* about */
	#about{padding-top: 0;margin: 0 auto 120px auto;background-image: none;}
	#about .contents-inner{
		margin: 0 auto;
		padding-top: 60px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#about h2{
		margin: 0 0 30px 20px;
		width: 198px;
		padding-top: 33px;
		background-size: contain;
	}
	#about h4{
		margin: 0 0 55px 20px;
		width: 389px;
		padding-top: 87px;
		background-size: contain;
	}
	#about p{ width: 454px; margin: 0 0 0 20px; line-height: 1.857em;}
	#about .rightBox{margin: 0 auto; text-align: right;}
	#about .rightBox img{width: 415px;}
	#about .rightBox p{
		margin: 20px 0 0 auto;
		width: 147px;
		padding-top: 20px;
		background-size: contain;
	}

	/* summary */
	#summary{padding-top: 60px;margin: 0 auto;}
	#summary .leftBox h4{
		margin: 0 auto 70px auto;
		width: 274px;
		padding-top:145px;
	}
	#summary dl {width:458px;margin-bottom: 0;margin-left: 20px;}
	#summary dt {width:100px;padding: 0 0;}
	#summary dd{
		padding: 0 20px 0 120px;
		border-bottom: dotted 1px #ffffff;
	}
	#summary dt p, #summary dd p{ padding: 20px 0 20px 10px;}
	#summary dd a{padding: 20px 0 20px 10px;}
	#summary iframe {
		margin: 50px 0 120px 0;
		width: 457px;
	}
	#summary img {width: 480px;}
	#summary .rightBox {padding-top: 90px;}
	#summary .rightBox h3{margin: 50px 0 30px 0; padding-bottom: 0;}
	#summary .rightBox p{width: 457px; line-height: 1.857em;}

	/* business */
	#business{padding-top: 120px;}
	#business ul{letter-spacing: -.4em;margin-left: 20px;}
	#business ul li{
		width: 29%;
		letter-spacing: normal;
		display: inline-block;
	}

	/* chart */
	#chart{	margin: -100px auto 0 auto; padding-bottom: 120px;}
	#chart .bg{padding-top: 688px;}
	#chart .bg1{
		margin: 0 0 0 20px;
		padding: 50px 50px 150px 120px;
	}
	#chart .contents-inner{padding: 228px 0 0 0;text-align: left;}
	#chart .bg1 h3{margin: 160px 0 0 0;}
	img.chart01{width: 766px;}
	img.chart02, img.chart03{width: 726px;}

	/* history */
	#history{
		margin: 0 auto 220px auto;
		padding-top: 0;
		background-position: 50% 890px;
	}
	#history .bg{
		top:110px;
		width: 40%;
		padding-top: 882px;
	}
	#history h3{padding: 240px 0 0 40px;}
	#history ul{
		margin: -90px 0 0 auto;
		width: 720px;
	}
	
}