@charset "UTF-8";

p, ul li, table, a{color: #666;}
#teacher .teacherbox{width: 96%; margin: 0 1% 15px 0; border: 1px solid #ccc; padding: 10px;}
#teacher .tleft{text-align: center;}
#teacher .tleft .name{background: #ea8071; text-align: center; font-weight: 600; color: #fff; padding: 7px 0; width: 250px; margin: 0 auto; margin-top: 10px; }
#teacher .tleft .name a{color: #fff;}
#teacher .tleft .name a:hover{color: #fff297;}

#teacher .tright h5{text-align: center; font-weight: 600; font-size: 16px; font-size: 1.6rem; margin-top: 10px; background: #eee;}
#teacher .tright ul{font-size:14px; font-size:1.4rem; margin: 4px 0 1px 0; text-align: left;}
#teacher .tright ul li{list-style: disc; margin-left: 15px; line-height: 1.2em;}
#teacher .tright p{margin: 0; text-align: left;}
#teacher .tright p a{text-decoration: underline; font-size: 1.3rem; font-size: 13px; font-weight: 600; }
#teacher .tright p.red{color: #d00000; font-weight: 600;}

    @media screen and (min-width : 450px) {
#teacher .tleft{width: 200px; float: left;}
#teacher .tleft .name{width: 200px;}
#teacher .tright{float: left; margin-left: 10px;}
#teacher .tright h5{text-align: left; margin-top: 0; background: #fff;}
#teacher .tright ul{line-height: 1.2;}
}

    @media screen and (min-width : 850px) {
#teacher .teacherbox{width: 47%; float: left; padding: 7px 7px 2px 7px; margin:0 5px 10px 0; height: 310px;}
#teacher .tleft{width: 160px;}
#teacher .tleft .name{width: 160px; margin-top: 7px;}
#teacher .tright{float: left; margin-left: 10px;}
#teacher .tright h5{font-weight: 600; margin: 0 0 2px 0;}
#teacher .tright ul{font-size: 1.3rem; font-size: 13px;}
}

    @media screen and (min-width : 980px) {
#teacher .teacherbox{margin-right: 10px;}
#teacher{width: 980px; margin: 0 auto;}
#teacher .tleft{text-align: center; width: 225px;}
#teacher .tleft .name{width: 225px;}
}

/*下層*/
h3{line-height: 1.2;}
h3 .small{font-size:14px; font-size:1.4rem;}
h3 .red{font-size:14px; font-size:1.4rem; background: #a70b1e; color: #fff; padding: 2px 5px;}
h4 .pc{display: none;}
#prof #facephoto{text-align: center;}
#prof h5.en{font-family: 'Lora', serif; font-weight: 600; text-align: center; margin: 10px 0 0 0;font-size: 2rem; font-size: 20px;}
.grayback ul.course{text-align: left; width: 100%; list-style-image:url("../img/teacher/circle.gif"); font-size:14px; font-size:1.4rem; margin-left: 20px;}
.grayback ul.course li{float: left; margin: 0; width: 100%; padding: 0; line-height: 2rem; font-size:16px; font-size:1.6rem;}
.grayback{background: #eee; padding: 10px 0 20px 0; margin: 15px 0; }
.comment p{text-align: left;}
.comment p .pc{display: none;}
h4.red{color: #a70b1e; font-weight: 600; font-size: 1.8rem; font-size: 18px; margin: 10px 0 20px 0; text-align: left;}
#prof #profile{text-align: left;}
.grayback{background: #eee; padding: 10px 0; margin-bottom: 15px; text-align: center;}
.yellback{background: #fff297; padding: 10px 0 20px 0; margin: 30px 0;}
#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; margin: 10px; font-weight: 600;}
.movie {position: relative; width: 100%; padding-top: 75%;}
.movie iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.clearfix .movie{margin-bottom: 5px;}
.clearfix .mbox img{max-width: 98%; height: auto; width /***/:auto; margin-bottom: 5px;}
p.sasaki{text-align: left;}
span.keisen{letter-spacing: -1px;}
#profile a{text-decoration: none;}
#intbutton{display: block; background: #0066cc; padding: 10px; color: #fff; font-weight: 600; text-align: center; margin: 10px 0;}
#intbutton a{text-decoration: none;}
#interviewbox{ box-shadow: 0 0 0 10px #eee, 0 0 0 11px #999; width: 92%; margin: 0 2%;}
#interviewbox #int{padding: 15px 0 0 0; font-size: 2.2rem; font-weight: 600;}
#interviewbox .interview{text-align: left; padding: 2% 2% 4% 2%;}
#interviewbox .interview .que{margin: 10px 0 25px 0; color: #fff; font-weight: 600; }
#interviewbox .interview .ans{border-bottom: 1px dotted #333; padding-bottom: 15px; margin-bottom: 10px;}
#interviewbox #teacherform{display: block; text-align: center; font-weight: 600; background: #cc0033; color: #fff; padding: 10px; margin: 25px;}
#interviewbox a{text-decoration: none;　}

/* balloon */
#interviewbox .interview .que {
	position: relative;
	display: inline-block;
	padding: 7px 15px;
	width: auto;
	min-width: 115px;
	line-height: 2.5rem;
	background: #0066cc;
	z-index: 0;
}
#interviewbox .interview .que:after {
	content: "";
	position: absolute;
	bottom: -15px; left: 0;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 20px 15px 0;
	border-color: transparent #0066cc transparent transparent;
	z-index: -1;
}

    @media screen and (min-width : 600px) {
h3 .sp{display: none;}
#prof #facephoto{float: left; width: 250px;}
#prof #profile{float: left; text-align: left; margin-left: 10px; width: 56%; margin-left: 15px;}
#prof h5.en{text-align: left; margin-top: 0px;}

.grayback ul.course li{width: 48%; padding: 0;}
#member{background: #eee; padding: 10px 15px; color: #666; text-align: center; width: 370px; margin: 10px 0 ; font-weight: 600;}
.movie {max-width: 48%; padding-top: 7%; height: 320px;}
.movie iframe{height:  320px;}
.clearfix .movie{float: left; margin-right: 1%;}
.clearfix .mbox img{max-width: 49%; float: left; height: auto; width /***/:auto; margin-right: 5px;}
#intbutton {width: 350px;}
}


    @media screen and (min-width : 850px) {
h4.red{text-align: left;}
}

   @media screen and (min-width : 980px) {
#interviewbox{width: 960px; margin: 0 auto;}

#prof #facephoto{float: left; width: 250px;}
#prof #profile{float: left; text-align: left; margin-left: 10px; width: 700px; padding-left: 15px;}
.grayback ul.course li{width: 33%; }
h4 .pc{display: inherit;}
.comment p .pc{display: inherit;}
}