@charset "UTF-8";
main{
	background-image: url(../img/bg_repeat.jpg);
}
main h2{
	background-image: url(../img/bg_line.png);
}
main h3{
	color: #347e6a;
}
main h4{
	margin: 100px 0 60px;
	padding: 15px;
	border: 14px solid transparent;
	-webkit-border-image: url(../img/sub_title_bg.png) 14 repeat;
	-moz-border-image: url(../img/sub_title_bg.png) 14 repeat;
	-o-border-image: url(../img/sub_title_bg.png) 14 repeat;
	border-image: url(../img/sub_title_bg.png) 14 fill repeat;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #347e69;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 1.2;
	text-align: center;
}
main .anchors + h4{
	margin-top: 50px;
}

#side ul li.current{
	background-color: rgba(52, 126, 106, 0.2);
}

div.profile{
	display: none;
	position: absolute;
	z-index: 1;
	height: 0;
	max-width: 50%;
	overflow: hidden;
	background: /*rgba(255, 255, 255, 0.7)*/ #fff;
	border: 0 solid #ccc;
	font-size: 1.4rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
div.profile strong{
	display: block;
	margin-bottom: 5px;
}
@media screen and (min-width: 1024px) {
	a:hover + div.profile{
		display: block;
		padding: 10px;
		height: auto;
		border-width: 1px;
	}
}

.anchors{
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-webkit-flex-pack: justify;
	-moz-flex-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	line-height: 0;
}
.anchors li{
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-flex-pack: center;
	-moz-flex-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	margin: 20px 0 0;
	width: 31%;
	max-width: 280px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	background: #fce0dc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.anchors li:nth-child(3n+2):last-child{
	margin-right: 282px;
}
.anchors li a{
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-flex-pack: center;
	-moz-flex-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	-webkit-flex-basis: 100%;
	-moz-flex-basis: 100%;
	-ms-flex-basis: 100%;
	-o-flex-basis: 100%;
	flex-basis: 100%;
	padding: 20px 5px;
	color: #000;
	text-decoration: none;
}
.anchors li a:hover{
	text-decoration: underline;
}

.talk{
	position: relative;
	text-align: left;
}
#contents .talk p{
	position: relative;
	overflow: visible;
	margin: 50px 0 0;
	padding-left: 200px;
	min-height: 50px;
}
#contents .talk .face{
	min-height: 180px;
}
.talk .face:before{
	content: "";
	display: block;
	position: absolute;
	left: 0; top: 5px;
	overflow: hidden;
	margin: 0 auto 15px 0;
	width: 110px;
	height: 110px;
	border: 5px solid transparent;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #fff;
	-webkit-background-size: 100px;
	background-size: 100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.talk span{
	display: block;
	position: absolute;
	left: 0; top: 5px;
	margin: 0 auto 0 0;
	padding: 12px 5px;
	min-width: 100px;
	max-width: 180px;
	color: #fff;
	font: bold 2rem/1 "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", sans-serif;
	white-space: nowrap;
	text-align: center;
}
.talk .face span{
	top: 135px;
}
.talk .face span:before{
	content: "";
	display: block;
	position: absolute;
	left: 50%; top: -12px;
	margin: 0 auto 0 -12px;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-top: 0;
}

/* 吉岡先生 */
.talk .yoshioka.face:before{
	border-color: #71ab69;
	background-image: url(../img/teacher_yoshioka_face.png);
}
.talk .yoshioka span{background-color: #71ab69;}
.talk .yoshioka span:before{border-bottom-color: #71ab69;}
/* 齊藤先生 */
.talk .saito.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_saito_face.png);
}
.talk .saito span{background-color: #f4a347;}
.talk .saito span:before{border-bottom-color: #f4a347;}
/* 稲葉先生 */
.talk .inaba.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_inaba_face.png);
}
.talk .inaba span{background-color: #f4a347;}
.talk .inaba span:before{border-bottom-color: #f4a347;}
/* 鈴木先生 */
.talk .suzuki.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_suzuki_face.png);
}
.talk .suzuki span{background-color: #f4a347;}
.talk .suzuki span:before{border-bottom-color: #f4a347;}
/* 小島先生 */
.talk .kojima.face:before{
	border-color: #5fc2c7;
	background-image: url(../img/teacher_kojima_face.png);
}
.talk .kojima span{background-color: #5fc2c7;}
.talk .kojima span:before{border-bottom-color: #5fc2c7;}
/* 竹谷先生 */
.talk .takeya.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_takeya_face.png);
}
.talk .takeya span{background-color: #f4a347;}
.talk .takeya span:before{border-bottom-color: #f4a347;}
/* 佐道先生 */
.talk .sadou.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_sadou_face.png);
}
.talk .sadou span{background-color: #f4a347;}
.talk .sadou span:before{border-bottom-color: #f4a347;}
/* 武山先生 */
.talk .takeyama.face:before{
	border-color: #5fc2c7;
	background-image: url(../img/teacher_takeyama_face.png);
}
.talk .takeyama span{background-color: #5fc2c7;}
.talk .takeyama span:before{border-bottom-color: #5fc2c7;}



/* 長江先生 */
.talk .nagae.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_nagae_face.png);
}
.talk .nagae span{background-color: #f4a347;}
.talk .nagae span:before{border-bottom-color: #f4a347;}
/* 吉川師長 */
.talk .yoshikawa.face:before{
	border-color: #5fc2c7;
	background-image: url(../img/yoshikawasan_face.png);
}
.talk .yoshikawa span{background-color: #5fc2c7;}
.talk .yoshikawa span:before{border-bottom-color: #5fc2c7;}


/* 白幡先生 */
.talk .shirahata.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_shirahata_face.png);
}
.talk .shirahata span{background-color: #f4a347;}
.talk .shirahata span:before{border-bottom-color: #f4a347;}

/* 日笠先生 */
.talk .higasa.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_higasa_face.png);
}
.talk .higasa span{background-color: #f4a347;}
.talk .higasa span:before{border-bottom-color: #f4a347;}


.talk .nishibatake.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_nishibatake_face.png);
}
.talk .nishibatake span{background-color: #f4a347;}
.talk .nishibatake span:before{border-bottom-color: #f4a347;}

/* 天野先生 */
.talk .amano.face:before{
	border-color: #f4a347;
	background-image: url(../img/teacher_amano_face.png);
}
.talk .amano span{background-color: #f4a347;}
.talk .amano span:before{border-bottom-color: #f4a347;}



/* 吉村さん */
.talk .yoshimura.face:before{
	border-color: #f4a347;
	background-image: url(../img/yoshimura_face.png);
}
.talk .yoshimura span{background-color: #f4a347;}
.talk .yoshimura span:before{border-bottom-color: #f4a347;}

/* 根井さん */
.talk .nei.face:before{
	border-color: #5fc1c7;
	background-image: url(../img/nei_face.png);
}
.talk .nei span{background-color: #5fc1c7;}
.talk .nei span:before{border-bottom-color: #5fc1c7;}

/* 前田さん */
.talk .maeda.face:before{
	border-color: #f19c97;
	background-image: url(../img/maeda_face.png);
}
.talk .maeda span{background-color: #f19c97;}
.talk .maeda span:before{border-bottom-color: #f19c97;}

/* 家子先生 */
.talk .ieko.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_ieko_face.png");
}
.talk .ieko span{background-color: #f4a347;}
.talk .ieko span:before{border-bottom-color: #f4a347;}


/* 松下先生 */
.talk .matsushita.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_matsushita_face.png");
}
.talk .matsushita span{background-color: #f4a347;}
.talk .matsushita span:before{border-bottom-color: #f4a347;}

/* 小倉先生 */
.talk .ogura.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_ogura_face.png");
}
.talk .ogura span{background-color: #f4a347;}
.talk .ogura span:before{border-bottom-color: #f4a347;}


/* 松本先生 */
.talk .matsumoto.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_matsumoto_face.png");
}
.talk .matsumoto span{background-color: #f4a347;}
.talk .matsumoto span:before{border-bottom-color: #f4a347;}

/* 羽藤先生 */
.talk .hatou.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_hatou_face.png");
}
.talk .hatou span{background-color: #f4a347;}
.talk .hatou span:before{border-bottom-color: #f4a347;}


/* 野上先生 */
.talk .nogami.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_nogami_face.png");
}
.talk .nogami span{background-color: #f4a347;}
.talk .nogami span:before{border-bottom-color: #f4a347;}

/* 西田先生 */
.talk .nishida.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_nishida_face.png");
}
.talk .nishida span{background-color: #f4a347;}
.talk .nishida span:before{border-bottom-color: #f4a347;}

/* 藤井先生 */
.talk .fujii.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_fujii_face.png");
}
.talk .fujii span{background-color: #f4a347;}
.talk .fujii span:before{border-bottom-color: #f4a347;}

/* 溝口先生 */
.talk .mizoguchi.face:before{
	border-color: #5fc1c7;
	background-image: url("../img/teacher_mizoguchi_face.png");
}
.talk .mizoguchi span{background-color: #5fc1c7;}
.talk .mizoguchi span:before{border-bottom-color: #5fc1c7;}


/* 近澤先生 */
.talk .chikazawa.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_chikazawa.png");
}
.talk .chikazawa span{background-color: #f4a347;}
.talk .chikazawa span:before{border-bottom-color: #f4a347;}


/* 大森先生 */
.talk .oomori.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_oomori_face.png");
}
.talk .oomori span{background-color: #f4a347;}
.talk .oomori span:before{border-bottom-color: #f4a347;}

/* 篠澤先生 */
.talk .shinozawa.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_shinozawa_face.png");
}
.talk .shinozawa span{background-color: #f4a347;}
.talk .shinozawa span:before{border-bottom-color: #f4a347;}

/* 山崎先生 */
.talk .yamazaki.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_yamazaki_face.png");
}
.talk .yamazaki span{background-color: #f4a347;}
.talk .yamazaki span:before{border-bottom-color: #f4a347;}

/* 鈴木圭先生 */
.talk .suzukikei.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_suzukikei_face.png");
}
.talk .suzukikei span{background-color: #f4a347;}
.talk .suzukikei span:before{border-bottom-color: #f4a347;}

/* 富田先生 */
.talk .tomita.face:before{
	border-color: #5fc2c7;
	background-image: url("../img/teacher_tomita_face.png");
}
.talk .tomita span{background-color: #5fc2c7;}
.talk .tomita span:before{border-bottom-color: #5fc2c7;}

/* 朝倉英策先生 */
.talk .asakura.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_asakura_face.png");
}
.talk .asakura span{background-color: #f4a347;}
.talk .asakura span:before{border-bottom-color: #f4a347;}



/* 金地佐千子先生 */
.talk .kanazi.face:before{
	border-color: #f4a347;
	background-image: url("../img/teacher_kanazi_face.png");
}
.talk .kanazi span{background-color: #f4a347;}
.talk .kanazi span:before{border-bottom-color: #f4a347;}


.talk figure{
	margin: 30px 0;
	text-align: center;
}

div.frame{
	-webkit-border-image: url(../img/frame.png) 16 repeat;
	-moz-border-image: url(../img/frame.png) 16 repeat;
	-o-border-image: url(../img/frame.png) 16 repeat;
	border-image: url(../img/frame.png) 16 fill repeat;
}

div.relation{
	position: relative;
	margin-top: 150px;
}
.relation h5{
	margin-top: -18%;
	margin-bottom: 40px;
	text-align: center;
}
.relation > div{
	overflow: hidden;
}
.relation > div a{
	display: inline-block;
	margin: 30px 4% 30px 0;
	width: 231px;
	max-width: 42%;
	color: #347e69;
	text-decoration: none;
	vertical-align: top;
}
.relation > div span{
	display: block;
	margin: 0 0 10px;
	font-weight: bold;
	line-height: 1.4;
}
.relation > div span:after{
	content: "";
	display: inline-block;
	margin-left: 10px;
	width: 14px;
	height: 14px;
	background: url(../../img/icon_external.png) no-repeat center center;
	vertical-align: baseline;
}

#author{
	background-image: url(../img/author_ph.jpg);
}
#author strong{
	color: #347e6a;
}


@media screen and (max-width: 1023px) {
	main h4{
		margin: 50px 0 30px;
		padding: 10px;
		border-width: 10px;
		font-size: 1.6rem;
	}
	main .anchors + h4{
		margin-top: 30px;
	}

	div.profile{
		left: 5%;
		max-width: 90%;
		cursor: pointer;
	}
	div.profile.open{
		display: block;
		padding: 10px;
		height: auto;
		border-width: 1px;
	}
	div.profile:before{
		content: "";
		display: inline-block;
		position: absolute;
		right: 5px; top: 5px;
		width: 15px;
		height: 15px;
		background: url(../img/profile_close.png) no-repeat center center #000;
		-webkit-background-size: 15px;
		background-size: 15px;
	}
	div.profile strong{
		margin-right: 15px;
	}

	.anchors li{
		margin-top: 10px;
		width: 49%;
		max-width: none;
		font-size: 1.3rem;
	}
	.anchors li:nth-child(3n+2):last-child{margin-right: 0;}
	.anchors li a{
		padding: 15px 5px;
	}

	#contents .talk p{
		float: none;
		clear: both;
		overflow: hidden;
		margin-top: 25px;
		padding-left: 0;
		min-height: 35px;
	}
	#contents .talk .face{
		min-height: 120px;
	}
	.talk .face:before{
		margin-bottom: 10px;
		width: 74px;
		height: 74px;
		border-width: 3px;
		-webkit-background-size: 64px;
		background-size: 64px;
	}
	.talk span{
		position: relative;
		float: left;
		margin: 0 10px 10px 0;
		padding: 8px 2px;
		min-width: 70px;
		max-width: 95px;
		font-size: 1.4rem;
	}
	.talk .face span{
		top: 0;
		margin-top: 90px;
	}
	.talk .face span:before{
		top: -8px;
		margin: 0 auto 0 -8px;
		border-width: 8px;
		border-top: 0;
	}

	div.relation{
		margin-top: 80px;
	}
	.relation h5{
		margin: -12vw auto 20px;
		max-width: 90%;
	}
	.relation > div{
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flexbox;
		display: -moz-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: -moz-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-webkit-flex-pack: justify;
		-moz-flex-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		justify-content: space-between;
	}
	.relation > div a{
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flexbox;
		display: -moz-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: -moz-flex;
		display: flex;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
		-ms-align-self: flex-end;
		align-self: flex-end;
		margin: 15px 0;
		width: 48%;
		max-width: none;
	}
	.relation > div span{
		margin-bottom: 5px;
		font-size: 1.1rem;
	}
	.relation > div span:after{
		margin-left: 5px;
		width: 10px;
		height: 10px;
		-webkit-background-size: 10px;
		background-size: 10px;
	}
}