@charset "utf-8";

#test {width:940px; margin:0 auto; padding:0 0 10px;}
#test::before {
	display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:10;
	border:3px solid #cc0e19; pointer-events:none;}

.images-loop {width:7382px; margin:0 0 0 -2500px;}
.images-loop > ul {animation-duration:100s;}
.images-loop > ul > li {}
.images-loop > ul > li > img {display:block;}
html.fac-js-enabled .images-loop > ul {margin-left:0;}

#test > header {padding:60px 0 0; text-align:center;}
#test > header > em {
	display:block; font-size:2.8rem; font-weight:normal; line-height:1;}
#test > header > strong {
	display:block; color:#cc0e19; margin:0.5em 0 0; font-size:6.2rem; font-weight:bold; line-height:1.3;}
#test > header > h1 {
	width:225px; height:0; margin:30px auto 0; padding:71px 0 0;
	background:url(../images/header_title.png) no-repeat; overflow:hidden;}
#test > header > .images-loop {margin-top:60px;}
#test > header > p {margin:0.5em 0 -0.6em; font-size:3rem;}
#test > header > .note {display:block; margin:2em auto 0; font-size:1.2rem; margin-bottom:40px;}

#now {
	min-height:578px; margin:0 calc(50% - 50vw); padding:60px 0; box-sizing:border-box; 
	background:#f8f8f8 url(../images/now_background.gif) center 0 no-repeat; background-size:auto 100%; text-align:center;}
#now > h1 {font-size:3.6rem; font-weight:bold; line-height:1;}
#now > ul {
	display:-webkit-flex; display:flex; 
	-webkit-justify-content:center; justify-content:center; 
	margin:-20px -10px 0; padding:50px 0 0; color:#cc0e19; font-size:2rem; font-weight:bold; line-height:1.6;}
#now > ul > li {
	display:-webkit-flex; display:flex; 
	-webkit-justify-content:center; justify-content:center; 
	-webkit-align-items:center; align-items:center; 
	min-width:300px; min-height:200px; margin:20px 10px 0; padding:10px; box-sizing:border-box; background:#fff;}
#now > p {margin:1em 0 0; font-size:2.4rem;}

#about {padding:80px 0 0;}
#about > h1 {font-size: 3.6rem; font-weight:normal;}
#about > ol {counter-reset:about; margin:-20px 0 0; font-size:2.4rem;}
#about > ol > li {
	display:flex; justify-content:center; align-items:center; 
	width:630px; min-height:240px; position:relative; margin:340px auto 0; padding:20px; box-sizing:border-box; 
	background:#cc0e19; color:#fff; text-align:left;}
#about > ol > li::before {
	display:block; counter-increment:about; content:counter(about); 
	width:130px; height:0; position:absolute; left:15px; top:-60px; padding:110px 0 0; 
	background:no-repeat; overflow:hidden;}
#about > ol > li:after {display:block; content:""; position:absolute; z-index:-2; background:#f2f2f2;}
#about > ol > li:nth-child(1) {margin-left:-90px;}
#about > ol > li:nth-child(1)::before {background-image:url(../images/about_01_num.png);}
#about > ol > li:nth-child(1)::after {left:calc(50% - 50vw); right:-60px; top:-210px; bottom:20px;}
#about > ol > li:nth-child(1) > .image {left:280px; top:-250px;}
#about > ol > li:nth-child(2) {margin-right:-60px;}
#about > ol > li:nth-child(2)::before {background-image:url(../images/about_02_num.png);}
#about > ol > li:nth-child(2)::after {left:-50px; right:calc(50% - 50vw); top:-260px; bottom:-55px;}
#about > ol > li:nth-child(2) > .image {left:-370px; top:-220px;}
#about > ol > li:nth-child(3) {margin-left:-130px;}
#about > ol > li:nth-child(3)::before {background-image:url(../images/about_03_num.png);}
#about > ol > li:nth-child(3)::after {left:calc(50% - 50vw); right:-200px; top:-90px; bottom:-40px;}
#about > ol > li:nth-child(3) > .image {left:320px; top:-220px;}
#about > ol > li > h2 {font-weight:normal;}
#about > ol > li > .image {position:absolute; z-index:-1;}
#about > ol > li > .image > img {display:block;}
#about > .details {margin:80px 0 0; padding:90px; background:#fcf3f3; font-size:1.6rem; text-align:left;}
#about > .details > strong {display:block; margin:-10px 0 0; font-size:1.8rem; font-weight:bold; line-height:1; text-align:center;}
#about > .details > h1 {margin:0.8em 0 0; font-size:3.6rem; font-weight:bold; line-height:1.4; text-align:center;}
#about > .details > h1 strong {color:#cc0e19;}
#about > .details > p {margin:2em 0 0;}
#about > .details > ol {counter-reset:details; margin:2em 0 0; padding:45px; background:#fff; font-size:1.4rem;}
#about > .details > ol > li {position:relative; margin:40px 0 0;}
#about > .details > ol > li:first-child {margin-top:0;}
#about > .details > ol > li > h2 {padding:0 0 0 55px; position:relative; font-size:1.8rem;}
#about > .details > ol > li > h2::before {
	display:block; counter-increment:details; content:counter(details); width:50px; height:0; 
	position:absolute; left:-5px; top:-15px; 
	padding:50px 0 0; background:no-repeat; overflow:hidden;}
#about > .details > ol > li > p {margin:1em 0 0;}
#about > .details > ol > li:nth-child(1) > h2::before {background-image:url(../images/about_details_01_num.png);}
#about > .details > ol > li:nth-child(2) {padding-right:200px;}
#about > .details > ol > li:nth-child(2) > h2::before {background-image:url(../images/about_details_02_num.png);}
#about > .details > ol > li:nth-child(2) > .image {position:absolute; left:470px; top:0;}
#about > .details > ol > li:nth-child(2) > .image > img {display:block;}
#about > .details > ol > li:nth-child(2) > .image > figcaption {position:absolute; left:0; top:220px; font-size:1.2rem;}

#contents {padding:60px 0 0; overflow:hidden;}
#contents > h1 {font-size:3.6rem; font-weight:bold; line-height:1;}
#contents > small {display:block; margin:1em 0 0; font-size:1.6rem;}
#contents > small strong {color:#cc0e19; font-weight:bold;}
#contents > table {width:100%; margin:2em 0 0; font-size:1.4rem; text-align:left;}
#contents > table caption {margin:0 0 0.5em; font-size:1.8rem; font-weight:bold; text-align:left;}
#contents > table th, 
#contents > table td {padding:1em; border:1px solid #e8e8e8; box-sizing:border-box;}
#contents > table th {font-size:1.6rem; font-weight:bold;}
#contents > table th:first-child , 
#contents > table td:first-child {border-left-width:0;}
#contents > table th:last-child, 
#contents > table td:last-child {border-right-width:0;}
#contents > table th small {display:block; font-size:1.4rem; font-weight:normal;}
#contents > table td {}
#contents > table thead {}
#contents > table thead th {width:25%; border-color:#8d8d8d; background:#676767; color:#fff; line-height:1;}
#contents > table tbody {}
#contents > table tbody th {}
#contents > table tbody td {vertical-align:middle;}
#contents > footer {margin:1em 0 0; font-size:1.2rem; text-align:left;}
#contents > footer > p {}
#contents > footer > small {display:block; color:#a1a1a1;}
#contents > .aim {position:relative; margin:50px 0 0; padding:0 40px 40px; font-size:1.4rem; text-align:left;}
#contents > .aim::before {
	display:block; content:""; position:absolute; left:0; right:0; top:40px; bottom:0; 
	border:1px solid #e5e5e5; pointer-events:none;}
#contents > .aim::after {display:block; clear:both; height:0; overflow:hidden;}
#contents > .aim > h1 {margin:0 0 55px -40px; color:#cc0e19; font-size:1.8rem; font-weight:bold;}
#contents > .aim > .image {float:left;}
#contents > .aim > .image > img {display:block;}
#contents > .aim > .image ~ * {margin-left:170px;}
#contents > .aim > strong {display:block; font-size:1.6rem; font-weight:bold;}
#contents > .aim > strong::before {display:block; content:""; height:0; margin-top:-0.5em;}
#contents > .aim > p {margin:1em 0 0;}
#contents > .aim > p strong {color:#cc0e19; font-weight:bold;}

#voices {position:relative; margin:60px 0 0; padding:60px; font-size:1.4rem;}
#voices::before {
	display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; 
	border:6px solid #cc0e19; pointer-events:none;}
#voices > h1 {font-size:3.6rem;}
#voices > section {margin:30px 0 0;}
#voices > section > h1 {color:#cc0e19; font-size:1.8rem; font-weight:bold;}
#voices > section .list {
	display:-webkit-flex; display:flex; 
	margin:-80px -40px 0; padding:30px 0 0; text-align:left;}
#voices > section .list > li {
	width:380px; position:relative; margin:80px 40px 0; padding:20px 20px 20px 90px; box-sizing:border-box; 
	background:#f2f2f2; border-radius:5px;}
#voices > section .list > li::before {
	display:block; content:""; width:60px; height:0; position:absolute; left:20px; top:20px; padding:60px 0 0; border-radius:60px;
	background:center center no-repeat; overflow:hidden;}
#voices > section .list > li::after {
	display:block; content:""; width:30px; height:20px; position:absolute; left:-30px; bottom:25px; 
	background:url(../images/voices_balloon.png) no-repeat; overflow:hidden;}
#voices > section.students .list > li.male::before   {background-image:url(../images/voices_students_male.png);}
#voices > section.students .list > li.female::before {background-image:url(../images/voices_students_female.png);}
#voices > section.teachers .list > li.male::before   {background-image:url(../images/voices_teachers_male.png);}
#voices > section.teachers .list > li.female::before {background-image:url(../images/voices_teachers_female.png);}
#voices > section .list > li > p {}
#voices > section .list > li > p b {font-weight:bold;}
#voices > section > .list {flex-wrap:wrap; margin:-40px -20px 0;}
#voices > section > .list > li {width:calc(50% - 40px); margin:40px 20px 0;}
#voices > section > .fac-gallery {width:460px; margin:0 auto;}
#voices > section > .fac-gallery .list {align-items:flex-start; margin:30px 0 0; padding:0;}
#voices > section > .fac-gallery .list >li {margin-top:0;}
#voices > section > .fac-gallery .fac-gallery-nav > ol {display:none;}

#score {margin:80px 0 0; font-size:1.6rem; text-align:left;}
#score > header {width:770px; margin:0 auto;}
#score > header > .image {margin:0 calc(50% - 50vw);}
#score > header > .image > img {display:block; width:100%; height:auto;}
#score > header > h1 {margin:1.5em 0 0; font-size:3.6rem; text-align:center; line-height:1;}
#score > header > p {margin:2em auto 0;}
#score > header > small {display:block; color:#a1a1a1; font-size:1.2rem;}
#score > section {margin:60px 0 0;}
#score > section > h1 {position:relative; padding:0 0 0 55px; font-size:2.8rem; line-height:1.5;}
#score > section > h1::before {
	display:block; content:""; width:54px; height:0; position:absolute; left:-10px; top:-10px; padding:50px 0 0; 
	background:no-repeat; overflow:hidden;}
#score > section > h1 small {font-size:1.6rem;}
#score > section > .note {display:block; margin:2em auto 0; font-size:1.2rem;}
#score > section > .note a {font-weight:bold;}

#score > .level {}
#score > .level > h1 {}
#score > .level > h1::before {background-image:url(../images/score_01_num.png);}
#score > .level > table {width:100%; margin:30px 0 0;}
#score > .level > table th, 
#score > .level > table td {padding:1em; border:1px solid #c6c6c6; box-sizing:border-box;}
#score > .level > table th {}
#score > .level > table td {}
#score > .level > table thead {}
#score > .level > table thead th {background:#676767; color:#fff; font-weight:bold; white-space:nowrap; line-height:1.5;}
#score > .level > table thead th.score   {}
#score > .level > table thead th.level   {}
#score > .level > table thead th.cefr    {}
#score > .level > table thead th.comment {width:395px;}
#score > .level > table td:nth-child(3) {font-weight:bold;}
#score > .level > table td strong {display:block; font-weight:bold;}
#score > .level > table td em {color:#cc0e19;}
#score > .level > table td .stars {color:#cc0e19;}
#score > .level > table td ul {font-size:1.4rem;}
#score > .level > table td ul > li {}
#score > .level > table td .hint {
	position:relative; margin:35px 0 0; padding:2em 1.5em 1em; background:#fbeeef; font-size:1.4rem;}
#score > .level > table td .hint > h1 {
	position:absolute; left:0; top:0; padding:1em; transform:translateY(-50%); 
	background:#cc0e19; color:#fff; font-weight:bold; line-height:1;}

#score > .expected {}
#score > .expected > h1 {}
#score > .expected > h1::before {background-image:url(../images/score_02_num.png);}
#score > .expected > table {width:630px; margin:30px auto 0;}
#score > .expected > table th, 
#score > .expected > table td {padding:1em; border:1px solid #c6c6c6; box-sizing:border-box;}
#score > .expected > table th {}
#score > .expected > table td {}
#score > .expected > table thead {}
#score > .expected > table thead th {color:#cc0e19; font-weight:bold; white-space:nowrap; line-height:1.5;}
#score > .expected > table th:nth-child(1) {background:#cc0e19; color:#fff;}
#score > .expected > .note {width:630px;}

#prepare {width: 760px;position: relative;margin: 50px auto;padding: 40px;border: 3px solid #676767;
		box-sizing: border-box;font-size: 1.4rem;text-align: left;}
#prepare > .image {position:absolute; right:-60px; bottom:-40px;}
#prepare > .image > img {display:block;}
#prepare > strong {
	display:block; margin:-40px -40px 40px; padding:1em; 
	background:#676767; color:#fff; font-size:1.6rem; line-height:1; text-align:center;}
#prepare > em {display:block; font-size:1.6rem; font-weight:bold; line-height:1.5;}
#prepare > h1 {margin:0.3em 0 0; color:#cc0e19; font-size:2.4rem; font-weight:bold;}
#prepare > small {display:block; margin:0.5em 0 0;}
#prepare > ul {margin:1em 0 0; padding-right:200px;}
#prepare > ul > li {}
#prepare > .more {margin:1.5em 0 0; font-size:1.4rem;}

#test > footer {margin:80px 0 0; padding: ;}
#test > footer > .apply, 
#test > footer > .guide {
	display:-webkit-flex; display:flex; 
	min-height:100px; font-size:2rem;}
#test > footer > .apply {}
#test > footer > .guide {margin:40px 0 0;}
#test > footer > .images-loop {margin-top:80px;}


@media screen and (max-width:1040px) {
#now {margin-left:-50px; margin-right:-50px;}
#about > ol > li:nth-child(1)::after {left:-50px;}
#about > ol > li:nth-child(2)::after {right:-50px;}
#about > ol > li:nth-child(3)::after {left:-50px;}
#score > header > .image {margin-left:-135px; margin-right:-135px;}
}

/* font */
#test > header > em, 
#about > h1, 
#about > ol, 
#contents > h1, 
#voices > h1, 
#score > header > h1 
	{font-family:YakuHanMP,"Yu Mincho Medium","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro","HG明朝B","MS Mincho",serif;}