@charset "utf-8";





/* =========================================================

responsive

=========================================================== */


@media only screen and (max-width: 1024px) {

.inner {width:96%;margin: 0 auto;}

.overlay ul {width:75%;}
.overlay ul li {width:46.5%;}

.swiper-container {width:96%;padding-bottom:50px;background:url(images/slider_bg.svg) no-repeat center bottom;background-size:110% auto;}
.swiper-container .swiper-slide {padding:0 40px;}

}






@media screen and (max-width: 840px) {


	
.pc_only {display:none;}
.sp_only {display:block;}	


#header {width: 100%;height:70px;}
#header .inner {padding:0 0 5px;}

#global-nav {margin:25px 0 0;}
#header .logo {width:240px;left:3%;}

.button_container {height:18px;width:40px;}
.button_container.active .top {-webkit-transform: translateY(7px) translateX(0) rotate(45deg);transform: translateY(8px) translateX(0) rotate(45deg);}
.button_container.active .middle {opacity: 0;background: #FFF;}
.button_container.active .bottom {-webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);transform: translateY(-8px) translateX(0) rotate(-45deg);}

.button_container span:nth-of-type(2) {top: 8px;}
.button_container span:nth-of-type(3) {top: 16px;}
.button_container span.menutxt {font-size:11px;margin-top:20px;letter-spacing:0;}

.overlay nav {position: relative;height:98%;top:60%;-webkit-transform: translateY(-50%); transform: translateY(-50%);text-align: center; }
.overlay ul {list-style:none;padding:30px 0 200px;margin: 0 auto;overflow-y: scroll;position: relative;height:100%;width:80%;}
.overlay ul li {display:block;float:none;width:90%;position:relative;opacity:0;margin:8px auto;}
.overlay ul li a {display:block;padding:10px;position: relative;text-decoration: none;overflow: hidden;font-size:16px;}

.is-animation {height:60px;background-color:rgba(256,256,256,0.9) !important;}





#main {margin-top:80px;}

*::-ms-backdrop, :root #main {margin-top:70px;}
_:-ms-lang(x)::backdrop, #main { margin-top:70px; }

.swiper-container {width:96%;padding-bottom:30px;background:url(images/slider_bg.svg) no-repeat center bottom;background-size:110% auto;}


table.vertical {width:100%;}
table.vertical thead {display:none;}
table.vertical tr,
table.vertical td,
table.vertical th {display:block;width:100% !important;}
table.vertical td,
table.vertical th {padding: 0.6em 0.6em;border-top-width: 0;}
table.vertical th {text-align: center;font-weight: bold;font-size:15px;}
table.vertical th span {display:inline-block;}
table.vertical td:before {
font-weight: bold;
display:block;
margin-bottom:0.25em;
padding-bottom:0.25em;
text-align:left;
border-bottom: dotted 1px #c9c9c9;
}
table.vertical td input[type='text'] {width: 100%;margin:0 0 10px;}
table.vertical td input[type='radio'] {
display:inline-block !important;
}


#top-movie iframe {width:94%;height:420px;margin:0 auto;}
#top-profile .h-name {font-size:48px;margin:40px 0 60px;}

#top-school {margin:70px 0 0;}
#top-school .inner {padding:0;background:url(images/schoolifo_bg.svg) no-repeat left bottom;background-size:120px auto;}
#top-school p.school-txt {margin-left:420px;font-family: 'Caveat', cursive;font-size:48px;}

}




@media only screen and (max-width: 480px) {
	
.inner {width:92%;margin: 0 auto;}

.cont1of2 {width:calc(100% - 20px);margin:10px;}
.cont1of3 {width:calc(100% - 20px);margin:10px;}
.cont1of4 {width:calc(50% - 20px);margin:10px;}

.section {padding:25px 0 0;}
.spsm-only {display:block;}


.pagination li {position: absolute;top: -9999px;left: -9999px;}

*::-ms-backdrop, :root .pagination li {position:relative;top:auto;left:auto;}
*::-ms-backdrop, :root .pagination a {height:44px;line-height:44px;}

.pagination li.current,
.pagination li:first-of-type,
.pagination li:last-of-type,
.pagination li:nth-of-type(2),
.pagination li:nth-last-of-type(2){position: initial;top: initial;left: initial;}


*::-ms-backdrop, :root #main {margin-top:70px;}

input[type='text'],
input[type='number'],
input[type='tel'],
input[type='url'],
input[type='email'],
input[type='password'],
input[type='date'],
textarea,
select {
font-size: 16px;font-size: 1.6rem;vertical-align:middle;height:auto;border:solid 1px #CCC;border-radius:3px; background: #FFF;padding:8px 5px;}

select {  -moz-appearance: none;  -webkit-appearance: none;  appearance: none;background: url(images/select_arrow.svg) right 50% no-repeat #FFF;background-size:20px auto;padding:8px 20px 8px 10px;}

#header .logo {width:220px;left:3%;}
#global-nav {margin:18px 0 0;}
footer {padding:50px 0 40px;text-align:center !important;}


/* ----------------------- */

.swiper-container {width:96%;padding-bottom:15px;background:url(images/slider_bg.svg) no-repeat center bottom;background-size:110% auto;}
.swiper-container .swiper-slide {padding:0 20px;}

#top-information {margin:0 auto 20px;}
#top-information.inner {padding:0;}
#top-information .cont1of2 {width:calc(100% - 10px);margin:20px 10px 0;}

#top-movie {text-align:center;padding-bottom:0;}
#top-movie iframe {height:220px;}

#top-profile {background:linear-gradient(#FFF 8%, #efefef 8%, #efefef);}
#top-profile .row {padding:0 1px;}
#top-profile .cont1of2 {width:calc(100% - 10px);margin:20px 20px 0;}

#top-school {margin:40px 0 0;}
#top-school .inner {padding:0;background:none;}
#top-school p.school-txt {margin-left:0;}
#top-school p.school-txt img {width:100%;float:none;}
#top-school .school-img {padding:30px 15px 0;}
#top-school .school-img img {float:none;width:100%;}
#top-school .school-img p {float:none;width:100%;padding:20px 0 0;}
#top-school .school-img a {display:block;margin:20px 0 0;}
#top-school .school-img a img {width:100%;margin:0;}

#top-sponsored .inner {padding:40px 0 0;text-align:center;}
#top-sponsored h2 {line-height:1em;margin-bottom:30px;}
#top-sponsored .cont1of4 {width:calc(50% - 20px);margin:10px 10px;}

#top-qa .inner {padding:60px 0 0;text-align:center;}
#top-qa h2 {margin-bottom:30px;}
#top-qa .cont1of3 {width:calc(100% - 20px);margin:10px 10px;}

#top-profile .h-name,
#top-school p.school-txt,
#top-sponsored h2,
#top-qa h2 {font-size:40px;}

}



@media only screen and (max-width: 380px) {

#main {margin-top:73px;}

}



@media only screen and (max-width: 320px) {

#top-profile .h-name,#top-school p.school-txt,#top-sponsored h2,#top-qa h2 {font-size:36px;}

}