@charset "utf-8";
@import"base.css";
@import"contents.css";

#catchy{ padding-top: 10px; }
.note  { padding: 0; font-size: 12px; }

/*------------ W教育とは　-------------*/

#about { text-align:center; }
.about_ttl { background:#FFEF00; font-size: 20px; margin-bottom:15px; padding: 15px 0; text-align:center; }
#about .youtube { border:0; position:relative; width:100%; padding:56.25% 0 0 0; }
#about .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



#manga { text-align:center; }
/*#manga div { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dotted #ccc; }*/
#slide_16 {
	margin-bottom: 20px;
	box-sizing:border-box;
	width: 100%; padding:20px;
	background:#FEF920;
	}
	#slide_16 ul { display:flex; justify-content: center; width:100%; margin:auto; }
	#slide_16 li { width:244px; }
	#slide_16 li:first-child { margin-right: 20px; }
@media (max-width: 500px) {
	#slide_16 ul { display:block; }
	#slide_16 li { width:100%; }
	#slide_16 li:first-child { margin-right: 0; margin-bottom: 10px; }
}


/* マンガ　スライダー */
#manga #slider {
	margin-bottom: 30px;
}
#manga #slider .swiper-wrapper {
	padding-bottom: 30px;
}
#manga #slider .swiper-slide .manga_img {
	margin-bottom: 1em;
	text-align: center;
}
#manga #slider .swiper-slide p {
	margin: 0 auto 1em;
	width: 560px;
	text-align: left;
}
#manga #slider .swiper-slide p .txt_class {
	font-weight: bold;
	color: #008231;
}
#manga #slider .swiper-slide p .label_class {
	margin: 0 5px;
	padding: 4px 10px;
	font-weight: bold;
	color: #fff;
	background-color: #008231;
	border-radius: 20px;
}
#manga #slider .swiper-slide p .txt_55 {
	font-weight: bold;
	color: #d30006;
}
#manga #slider .swiper-slide p .label_55 {
	margin: 0 5px;
	padding: 4px 10px;
	font-weight: bold;
	color: #fff;
	background-color: #d30006;
	border-radius: 20px;
}



#manga #slider .swiper-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	margin: 0 6px !important;
}
#manga #slider .swiper-pagination .swiper-pagination-bullet-active {
	background: #ffed00;
}

#manga #slider .swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%230e357f'%2F%3E%3C%2Fsvg%3E");
}
#manga #slider .swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%230e357f'%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 560px) {
	#manga #slider .swiper-wrapper {
		padding-bottom: 20px;
	}
	#manga #slider .swiper-slide p {
		width: 100%;
	}
	
	#manga #slider .swiper-button-prev,
	#manga #slider .swiper-button-next {
		width: 20px;
		height: 30px;
		margin-top: -18vw;
		background-size: 20px 30px;
	}
	#manga #slider .swiper-button-prev {
		left: 0;
	}
	#manga #slider .swiper-button-next {
		right: 0;
	}
}







#w1  { border: 2px solid #178b36; display: flex; }
#w2  { border: 2px solid #de190a; display: flex; }
#w_koushiryoku { border: 2px solid #528cce; display: flex; }

#w1 dt, #w2 dt, #w_koushiryoku dt { width:274px; /*float:left;*/ background-color: #e7e7e7; }
#w1 dd, #w2 dd, #w_koushiryoku dd { box-sizing: border-box; width: 466px; font-size: 14px; padding: 15px; }



#w_text { padding: 15px; font-size: 90%; border: 3px solid #6666CC; }



@media (max-width: 600px) {
	#w1, #w2, #w_koushiryoku { display: block; }
	#w1 dt, #w2 dt, #w_koushiryoku dt  { width:100%; text-align:center; background:#E7E7E7; }
	#w1 dt img, #w2 dt img, #w_koushiryoku dt img { max-width:100%; height:auto; }
	#w1 dd, #w2 dd, #w_koushiryoku dd { width: 100%; padding-left:10px; }
}
@media (max-width: 480px) {
	#w_text { border-color: #0e357f; }
}


/*55段階・科目別能力別授業*/

#w_teachers .c_btn_cursor{
  vertical-align: text-top;
}

#w_teachers .section ul.float_left li { float: left; }


#w_teachers .note_55 { display:inline-block; font-size: 12px; line-height: 1.3em; }



#w_teachers .class { width:582px; margin:auto; }

@media (max-width: 840px) and (min-width: 769px) {
	#w_teachers .class { width:100%; }
	#w_teachers .class li:first-child { width:44%; margin-right:2%; float:left; }
	#w_teachers .class li:last-child { width:54%; }
}
@media (max-width: 640px) {
	#w_teachers .w_c_video_txt { margin:0; padding-top:5px; }
	.youtube4_3 { border:0; position:relative; width:100%; padding:75% 0 0 0; }
	.youtube4_3 iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
}
@media (max-width: 611px) {
	#w_teachers .class { width:100%; }
	#w_teachers .class li { width:100%; margin-bottom:10px; float:none; text-align:center; }
}
@media (max-width: 480px) {
	#w_teachers .w_c_video { text-align: center;}
}

#main #intro {
	margin-bottom: 50px;
}

#main .img_intro {
	width: 280px;
	margin-bottom: 10px;
}
@media screen and (max-width:767px) {
	#main #intro {
		margin-bottom: 30px;
	}
}
@media screen and (max-width:480px) {
	#main .img_intro {
		margin-bottom: 15px;
		width: 100%;
	}
}






/*55ナビシステム*/
#system h4{
	font-size:105%;
	padding:0 0 2px;
	color:#ff6600;
}

/* オリジナル教材 */
.title_smp { height:auto; margin-bottom:10px; border-top:4px solid #FF3366; text-align:center; }
#smp_feature {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}
#smp_feature li {
	box-sizing:border-box;
	width:49%;
	margin-bottom:2%;
	padding: 20px 15px 5px;
	border:1px solid #ff99cc;
	background: url("../../w_teachers/images/text_smp_point_bg.jpg") top left repeat-x;
}
/* #smp_feature li:nth-child(2n+1) { margin-right:2%; }*/
#smp_feature li.wide { width:100%;}
#smp_feature li .smp_feature_ttl {
	margin: 0 0 15px;
	padding-left:25px;
	line-height:20px;
	font-size:105%;
	background:url("../../w_teachers/images/icon_smp.png") 0 0 no-repeat;
}

@media (max-width: 480px) {
	#system h4{
		font-size: 1.8rem;
	}
	#smp_feature li .smp_feature_ttl {
		font-size: 1.8rem;
	}
}

.text { margin-bottom:30px; }
.text li { box-sizing:border-box; width:50%; padding:0 10px 10px; text-align:center; }
.text li:first-child { border-right:1px solid #999; border-bottom:1px solid #999; }
.text li h3 { margin-bottom:15px; }
.text li h3 span { display:inline-block; padding:2px 20px; color:#fff; font-weight:normal; font-size:14px; border-radius:20px; }
	.text li:first-child h3 span { background:#97CF96; }
	.text li:last-child h3 span  { background:#F8A598; }

#w_teachers .con_h4 span.smp {
	display:inline-block; width:40px; height:20px; text-indent:100%; white-space:nowrap; overflow:hidden; font-size:0;
	background:url("../../w_teachers/images/icon_smp_text.png") 0 0 no-repeat; }

.text_photo { margin-bottom: 30px; }
.text_photo .photo { float:left; width:250px; z-index:100; position:relative; }
.text_exp { width:100%; margin-left:-270px; float:right; font-size: 80%; }
.text_exp_con { margin-left:270px; }
.text_exp dl { padding: 15px; background-color: #FFFFCC; }
.text_exp dd { padding-top:10px; }
.text_exp  em {
	padding-left: 15px; color: #cc3467;
	background: url("../../course/images/g_main_icn_megaphone.gif") left 50% no-repeat; }
	
	#text_social .text_exp, #text_social .text_exp_con { margin:0; }

.text_body { font-size: 90%; }

.text_photo2 { margin:20px 0; }
.text_photo2 li { width:49%; }
.text_photo2 li:first-child { margin-right:2%; }

.text_kaihatsu { margin-top: 20px; padding: 20px; background-color: #DFFFEF; border: 1px solid #00CCCC; font-size: 90%; }
#main .text_kaihatsu p { margin-bottom:0; }

@media (max-width: 880px) and (min-width: 769px) {
	.text_photo2#text_social li { width:100%; float:none; }
}
@media (max-width: 640px) {
	#smp_feature li { width:100%; padding-top: 15px; }
}
@media (max-width: 540px) {
	.text li h3 span { padding:2px 10px; }
	
	.text_photo .photo { width:100%; float:none; text-align:center; }
	.text_photo .photo .pht_left,
	.text_body.photo .pht_left { display:block; margin:0 auto 10px!important; float:none!important; }
	
	.text_exp { float:none; margin:10px 0 0 0; }
	.text_exp_con { margin:0; }

	.text_photo2 li { width:100%; }
	
	.text_photo2#japanese li:first-child p { text-align:center; margin-bottom:20px; }
}

@media (max-width: 480px) {
	.text li h3 span {
		font-size:1.5rem;
	}

	.text_exp {
		font-size: 1.5rem;
		line-height: 1.7;
	}
	.text_exp em {
		font-size: 1.4rem;
	}
	.text_body,
	.text_kaihatsu {
		font-size: 100%;
	}

}


.PanelTab {
	margin: 0px;
	padding: 5px 2px 5px 30px;
	background-image: url(../../common/images/faqQ_pink.gif);
	background-repeat: no-repeat;
	background-position: 5px center;
	font-size: 95%;
	background-color: #FFF;
}
.PanelContent {
	margin: 0px;
	padding: 5px 5px 5px 30px;
	background-image: url(../../common/images/faqA.gif);
	background-repeat: no-repeat;
	background-position: 5px 6px;
	font-size: 95%;
	background-color: #FFFFCC;
}
.PanelContent #box {
	margin: 10px 5px;
	border: 1px solid #999999;
	padding: 10px 13px;
	margin-bottom: 25px;
}
.faq_exp {
	background: #fff2f8;
	padding: 15px;
	margin-top: 10px;
	font-size: 85%;
	}
.faq_exp  em {
	background: url(../../course/images/g_main_icn_megaphone.gif) left 50% no-repeat;
	padding-left: 15px;
	color: #cc3467;
	}
.faq_exp  dt {
	padding-bottom: 10px;
}
.faq_exp  dd {
	clear: both;
	}
.faq_box {
	border: #FF9900 2px solid;
	margin-bottom: 10px;
	padding: 5px;
}


#w_teachers #w_voice {
	margin-top: 50px;
}


/*w_education */
/*
#main #w_education{
	padding: 0;
}
#w_education div.section {
    padding: 0;
    margin: 0;
}

#w_education {
    border: 5px solid #fff104;
    border-top-width: 10px;
	  margin-bottom: 25px;
}
#w_education p{
	margin-bottom: 0;
}

 #w_education .inner02{
	margin-top:33px;
	 padding: 0;
}
 #w_education .inner02 .box01{
	padding: 20px 250px 0 20px;
	background:#fff url(../../course/common/images/w_education_bg04.jpg) no-repeat 100% 100%;
	background-size: 300px auto;
}
 #w_education .inner02 .box02{
	min-height: 420px;
	padding: 0 20px 0 250px;
	background:#fff url(../../course/common/images/w_education_bg05.jpg) no-repeat 0 100%;
	background-size: 360px auto;
}
 .inner02 .box02 dt{
	padding-top:43px;
}
 #w_education .inner02 dl dd:nth-of-type(1){
	margin:16px 0 22px;
}
#w_education  .inner02 .box03{
	background:#009844;
	padding: 30px 20px;
	overflow:hidden;
}
 #w_education .inner02 .box03 dl{
	float:left;
	width: 362px;
}
 #w_education .inner02 .box03 p{
	float: right;
	width: 290px;
	padding-top: 20px;
}
 #w_education .inner02 .box03 dl dd:nth-of-type(1){
	color:#fff;
	padding:0 5px;
}

#w_education .inner03 .box00{
	background: #fff url(../../course/common/images/w_education_bg06.jpg) no-repeat 100% 0;
	background-size: 280px auto;
}
#w_education .inner03 .box00 .inBox{
	background: url(../../course/common/images//w_education_bg07.jpg) no-repeat 0 100%;
	background-size: 280px auto;
}
#w_education .inner03 .box01{
	min-height: 380px;
	padding: 27px 250px 0 30px;
}
#w_education .inner03 .box02{
	padding: 0 30px 0 250px;
}
#w_education .inner03 .box02 dt{
	margin-top:20px;
}
#w_education .inner03 .box02 dd{
	padding-bottom:31px;
}
#w_education .inner03 dl dd:nth-of-type(1){
	margin: 16px 0 22px;
}
#w_education .inner03 .box03{
	background: #e50012;
	padding: 30px 15px 30px 20px;
	overflow:hidden;
	border-bottom-left-radius: 6px;  
-moz-border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;  
-moz-border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
#w_education .inner03 .box03 dl{
	float:left;
	position: relative;
}
#w_education .inner03 .box03 dl dt {
	position: absolute;
	top: 0;
	left: 0;
	width: 568px;
}
#w_education .inner03 .box03 dl dd {
	width: 405px;
}

#w_education .inner03 .box03 p{
	float:right;
	width: 250px;
	padding-top: 40px;
}
#w_education .inner03 .box03 dl dd:nth-of-type(1){
	color:#fff;
	padding: 30px 10px 0 5px;
}
.w_education_support{
	margin-bottom: -20px;
}*/