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

.common_layout .common_main_block.highclass{
    text-align: center;
    max-width: 720px;
    margin: auto;
    font-size: 12px;
}
.highclass > #main_image_area {
    position: relative;
    background: url("/static/images/highclass/visual.png") top center no-repeat;
    height: 400px;
}

/************共通***********/
.highclass #episode_area,
.highclass #ask_area,
.highclass #job_area{
	padding-top: 20px;
}
.highclass #episode_area h2,
.highclass #ask_area h2,
.highclass #job_area h2{
	background: url("/static/images/highclass/title.png") repeat center center;
	border-radius: 7px;
	padding: 10px;
	margin-top: 10px;
	font-size: 200%;
	line-height: 2.5rem;
	color: #fff;
}


/************episode_area***********/
.highclass #episode_area section{
	border: 1px #b2b2b2 solid;
	background: #fff;
	border-radius: 7px;
	padding: 20px 10px 25px;
	margin-top: 10px;
	position: relative;
}
.highclass #episode_area section:before{
	display: block;
	content: "";
	width: 147px;
	height: 147px;
	position: absolute;
	left:30px;
	top:15px;
}
.highclass #episode_area section:after{
	display: block;
	content: "";
	width: 153px;
	height: 123px;
	position: absolute;
	right:30px;
	top:30px;
}

.highclass #episode_area section:first-of-type:before{
	background: url("/static/images/highclass/sensei01.png") no-repeat center center;
}
.highclass #episode_area section:first-of-type:after{
	background: url("/static/images/highclass/kuma01.png") no-repeat center center;
}
.highclass #episode_area section:nth-of-type(2):before{
	background: url("/static/images/highclass/sensei02.png") no-repeat center center;
}
.highclass #episode_area section:nth-of-type(2):after{
	background: url("/static/images/highclass/kuma01.png") no-repeat center center;
}
.highclass #episode_area section:last-of-type:before{
	background: url("/static/images/highclass/sensei03.png") no-repeat center center;
}
.highclass #episode_area section:last-of-type:after{
	background: url("/static/images/highclass/kuma01.png") no-repeat center center;
}


.highclass #episode_area section > div.text_area{
	width: 320px;
	margin: 0 auto;
	text-align: left;
}
.highclass #episode_area section > div.text_area h3{
	font-size: 150%;
	padding-bottom: 15px;
}
.highclass #episode_area section > div.text_area p{
	line-height: 2;
}
.highclass #episode_area section > div.text_area p:first-of-type{
	font-size: 130%;
	font-weight:bold;
	padding-bottom: 15px;
}
.highclass #episode_area section > div.text_area p:nth-of-type(2){
	font-size: 120%;
	padding-bottom: 20px;
}


/************button***********/
.highclass section.high_class div.button a{
	display: block;
	width: 470px;
	margin: 0 auto;
	border-radius: 7px;
	padding: 8px;
	font-size: 140%;
	font-weight: bold;
	line-height: 2.5rem;
	color: #fff;
    filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.3));
    text-decoration: none;
}
.highclass section.high_class div.button a:hover{
	text-decoration: none;
}
.highclass section.high_class div.pink a{
	background: #f65076;
}
.highclass section.high_class div.pink a:hover{
	background: #f46485;
}
.highclass section.high_class div.orange a{
	background: #f4890b;
	margin-top: 15px;
}
.highclass section.high_class div.orange a:hover{
	background: #f09b38;
}


/************ask_area***********/
.highclass #ask_area section{
	border: 1px #b2b2b2 solid;
	background: #fff;
	border-radius: 7px;
	padding: 20px 10px 25px;
	margin-top: 10px;
	position: relative;
}
.highclass #ask_area section:before{
	display: block;
	content: "";
	width: 147px;
	height: 147px;
	position: absolute;
	left:30px;
	top:15px;
}
.highclass #ask_area section:after{
	display: block;
	content: "";
	width: 153px;
	height: 123px;
	position: absolute;
	right:30px;
	top:30px;
}
.highclass #ask_area section:first-of-type:before{
	background: url("/static/images/highclass/sensei01.png") no-repeat center center;
}
.highclass #ask_area section:first-of-type:after{
	background: url("/static/images/highclass/kuma02.png") no-repeat center center;
}
.highclass #ask_area section:nth-of-type(2):before{
	background: url("/static/images/highclass/sensei02.png") no-repeat center center;
}
.highclass #ask_area section:nth-of-type(2):after{
	background: url("/static/images/highclass/kuma02.png") no-repeat center center;
}
.highclass #ask_area section:last-of-type:before{
	background: url("/static/images/highclass/sensei03.png") no-repeat center center;
}
.highclass #ask_area section:last-of-type:after{
	background: url("/static/images/highclass/kuma02.png") no-repeat center center;
}

.highclass #ask_area section > div.text_area{
	width: 320px;
	margin: 0 auto;
	text-align: left;
}
.highclass #ask_area section > div.text_area p{
	line-height: 2;
}
.highclass #ask_area section > div.text_area p:first-of-type{
	font-size: 130%;
	font-weight:bold;
	padding-bottom: 15px;
}
.highclass #ask_area section > div.text_area p:nth-of-type(2){
	font-size: 120%;
	padding-bottom: 20px;
}
.highclass #ask_area section > div.text_area02 dl{
	width: 600px;
	margin: 70px auto 0;
	text-align: left;
	line-height: 2;
}
.highclass #ask_area section > div.text_area02 dl dt{
	font-weight: bold;
	font-size: 130%;
	color: #F55174;
}
.highclass #ask_area section > div.text_area02 dl dd{
	padding-bottom: 20px;
	font-size: 120%;
}
.highclass #ask_area section > div.text_area02 > div.graph{
	padding:20px 0;
}


/************job_area***********/
.highclass #job_area section{
	border: 1px #b2b2b2 solid;
	background: #fff;
	border-radius: 7px;
	padding: 25px 10px 25px;
	margin-top: 10px;
	position: relative;
}
.highclass #job_area section > div.text_area02{
	width: 600px;
	margin: 0 auto;
	text-align: left;
}
.highclass #job_area section > div.text_area02 h3{
	font-size: 130%;
	color: #F55174;
}
.highclass #job_area section > div.text_area02 p{
	padding-bottom: 20px;
	font-size: 120%;
	line-height: 2;
}
.highclass #job_area section:nth-of-type(2) > div.text_area02 p:first-of-type{
	padding-bottom: 0;
}
.highclass #job_area section > div.text_area02 dl dt,
.highclass #job_area section > div.text_area02 dl dd{
	font-size: 120%;
	line-height: 2;
}
.highclass #job_area section > div.text_area02 dl dd{
	padding-bottom: 20px;
}
.highclass #job_area section:nth-of-type(2) > div.text_area02 ul{
	font-size: 120%;
	padding-bottom: 20px;
	line-height: 2;
}
.highclass #job_area section > div.text_area02 h4{
	font-size: 120%;
}
.highclass #job_area section:last-of-type > div.text_area02 p:last-of-type{
	padding-bottom: 0;
}
.highclass #job_area section:last-of-type > div.text_area02 ul{
	font-size: 120%;
	padding-bottom: 20px;
}