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

.shadow{
  -webkit-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1); /* Safari, Chrome用 */
  -moz-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1); /* Firefox用 */
  box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1); /* CSS3 */
}

/* ----------------------------------------------------------

mv

---------------------------------------------------------- */
#mv{
	background: url(../img/people/key.jpg) no-repeat center 0;
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 235px;
}

/* ----------------------------------------------------------

box01

---------------------------------------------------------- */
#box01 h4{
	font-size: 48px;
	font-weight: 100;
	font-family: serif;
	text-align: center;
	margin-top: 40px;
}

#box01 p{
	font-size: 16px;
	font-weight: 100;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 50px;
}

/* ----------------------------------------------------------

box02

---------------------------------------------------------- */
#box02 .back_img01{
	padding-top: 309px;
	background: url(../img/people/p_img01.png) no-repeat center 50px;
}

#box02 .back_img01 .p_y{
	font-size: 14px;
	font-weight: 100;
	text-align: center;
	padding: 5px 20px;
	background-color: #fff799;
	margin-bottom: 30px;
}

#box02 .back_img01 .g_line{
	font-size: 14px;
	font-weight: 100;
	text-align: left;
	padding: 15px 10px;
	margin-bottom: 50px;
	border: 2px solid #d2d2d2;
}

/* ----------------------------------------------------------

box03

---------------------------------------------------------- */

#box03 ul {
	margin-top: 20px;
	margin-bottom: 50px;
}

#box03 ul li {
	margin-top: 10px;
	padding: 20px 10px;
	background-color: #e4fcfb;
	border: 4px solid #a5e7fb;
}

#box03 ul li h5{
	font-size: 18px;
	color: #2684ca;
	width: 200px;
	float: left;
	font-weight: normal;
	text-align: center;
}

#box03 ul li h5 span{
	font-size: 14px;
	color: #fff;
	width: 200px;
	float: left;
	display: block;
	border-radius: 10px;
	padding: 5px 10px;
	background-color: #2684ca;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 15px;
}

#box03 ul li b{
	font-size: 14px;
	font-weight: 100;
	margin-top: 10px;
	margin-left: 30px;
	width: 400px;
	float: left;
}

#box03 ul li:last-child b {
	margin-top: 0px;
}

/* ----------------------------------------------------------

box04

---------------------------------------------------------- */
#box04 .back_img01{
	padding-top: 309px;
	background: url(../img/people/p_img02.png) no-repeat center 20px;
	margin-bottom: 50px;
}

#box04 p{
	font-size: 14px;
	margin-top: 20px;
	font-weight: 100;
}

#box04 .p_g{
	font-size: 16px;
	font-weight: bold;;
	text-align: center;
	padding: 5px 20px;
	background-color: #eee;
	margin-bottom: 30px;
	width: 300px;
	margin: 30px auto 0;
}

#box04 .back_img01 .g_line{
	font-size: 14px;
	font-weight: 100;
	text-align: left;
	padding: 15px 10px;
	border: 2px solid #d2d2d2;
}

/* ----------------------------------------------------------

box05

---------------------------------------------------------- */
#box05 .back_img01{
	padding-top: 159px;
	background: url(../img/people/p_img03.png) no-repeat center 20px;
	background-size: 100%;
}

#box05 p{
	font-size: 14px;
	margin-top: 20px;
	font-weight: 100;
}

#box05 .back_img01 .p_y{
	font-size: 14px;
	font-weight: 100;
	text-align: center;
	padding: 5px 20px;
	background-color: #fff799;
	margin-bottom: 30px;
}

#box05 .back_img01 .g_line{
	font-size: 14px;
	font-weight: 100;
	text-align: left;
	padding: 15px 10px;
	margin-bottom: 50px;
	border: 2px solid #d2d2d2;
}

/* ----------------------------------------------------------

box06

---------------------------------------------------------- */

#box06 ul {
	margin-top: 20px;
	margin-bottom: 20px;
}

#box06 ul li {
	margin-top: 10px;
	padding: 20px 10px;
	background-color: #e4fcfb;
	/* background-color: #ffffff; */
	border: 4px solid #a5e7fb;
}

#box06 ul li h5{
	font-size: 18px;
	color: #2684ca;
	width: 200px;
	float: left;
	font-weight: normal;
	text-align: center;
}

#box06 ul li h5 span{
	font-size: 14px;
	color: #fff;
	width: 200px;
	float: left;
	display: block;
	border-radius: 10px;
	padding: 5px 10px;
	background-color: #2684ca;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 15px;
}

#box06 ul li b{
	font-size: 14px;
	font-weight: 100;
	margin-top: 10px;
	margin-left: 30px;
	width: 400px;
	float: left;
}

#box06 ul li:first-child b {
	margin-top: 5px;
}

#box06 ul li:nth-child(2) b {
	margin-top: 0px;
}

/* ----------------------------------------------------------

box07

---------------------------------------------------------- */
#box07 h3{
	margin-top: 40px;
}

/* ----------------------------------------------------------

#info

---------------------------------------------------------- */

#info{
	border-collapse: collapse;
	text-align: center;
	margin-top: 30px;
	font-weight: 100;
}

#info li{
	list-style-type: none;
	}

#info th{
	background: #2684ca;
	border: 1px solid #fff;
	width: 200px;
	padding: 10px 0;
	color: #fff;
	font-weight: 100;
	font-family: sans-serif;
}

#info td{
	width: 500px;
	background: #fff;
	border: 1px solid #ccc;
}

/* ----------------------------------------------------------

 Responsive (People)

---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#mv{
		height: auto;
		padding-top: 28%;
	}

	#box02 .back_img01,
	#box04 .back_img01,
	#box05 .back_img01{
		background-size: 80% auto;
		background-position: center 20px;
	}
}

@media screen and (max-width: 768px) {
	#mv{
		width: 100%;
		padding-top: 36%;
	}

	#box02 .back_img01,
	#box04 .back_img01,
	#box05 .back_img01{
		padding-top: 55%;
		background-size: contain;
		background-position: center 12px;
	}

	#box03 ul li h5,
	#box03 ul li b,
	#box06 ul li h5,
	#box06 ul li b{
		float: none;
		width: 100%;
		margin: 0 0 10px;
		text-align: left;
	}

	#box01 h4,
	#box02 h4,
	#box03 h4,
	#box04 h4,
	#box05 h4,
	#box06 h4{
		font-size: 26px;
	}
	/* li 全体を中央寄せにしておくと安全 */
	#box03 li {
		text-align: center !important;
	}

	/* 念のため h5 自体にも強めに指定 */
	#box03 li h5 {
		text-align: center !important;
		margin-left: auto;
		margin-right: auto;
	}

	/* span が変なブロック幅を持ってた場合に備えて */
	#box03 li h5 span {
		display: inline-block;
	}

	#box01 p,
	#box02 p,
	#box03 p,
	#box04 p,
	#box05 p,
	#box06 p{
		font-size: 13px;
	}

	#box03 ul li h5 span,
	#box06 ul li h5 span{
		width: 100%;
	}

	#box03 ul li,
	#box06 ul li{
		text-align: left;
	}

	#info th,
	#info td{
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 480px) {
	#mv{
		padding-top: 42%;
	}

	#box02 .back_img01,
	#box04 .back_img01{
		padding-top: 50%;
	}
	#box05 .back_img01{
		padding-top: 20%;
	}
}