@charset "UTF-8";

/* 640px */
@media only screen and (max-width:640px) {
	body {font-size: 4vw;}
	.pc {display: none;}
	.smp {display: block;}
	#menuBtn {z-index: 1001; display: block; width: 50px; height: 50px; background: #ab0d00; position: fixed; right: 10px; bottom: 40px;}
	#menu-icon {
	  display: block;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 30px;
	  height: 2px;
	  margin: -1px 0 0 -15px;
	  background: #FFFFFF;
	  transition: .2s;
	}
	#menu-icon:before, 
	#menu-icon:after {
	  display: block;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 30px;
	  height: 2px;
	  background: #FFFFFF;
	  transition: .3s;
	}
	#menu-icon:before {
	  margin-top: -12px;
	}
	#menu-icon:after {
	  margin-top: 10px;
	}
	#menuBtn:hover #menu-icon:before {
	  margin-top: -14px;
	}
	#menuBtn:hover #menu-icon:after {
	  margin-top: 12px;
	}
	#menuBtn #menu-icon.close {
	  background: transparent;
	}
	#menuBtn #menu-icon.close:before, 
	#menuBtn #menu-icon.close:after {
	  margin-top: 0;
	}
	#menuBtn #menu-icon.close:before {
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}
	#menuBtn #menu-icon.close:after {
	  transform: rotate(-135deg);
	  -webkit-transform: rotate(-135deg);
	}
	.btn.btnL,.btn.btnM {width: 100%; font-size: 18px; line-height: 38px; height: 38px;}
	.btn.btnL:after,.btn.btnM:after {width: 8px; height: 8px; margin-top: -6px;}
	img {max-width: 100%; height: auto;}
	header {position: relative;}
	header .header .content {padding: 5px 0;}
	header .header .content h1 {height: auto; font-size: 4.4vw; line-height: 1.2em; padding-left: 78px; padding-top: 10px; padding-bottom: 10px; background-position: 10px 50%; background-size: 50px;}
	header .header .content h1 span {font-size: 3.8vw; line-height: 1.2em;}
	header .btn { position: fixed; width: 100%; bottom:0; left:0; border-radius: 4px 4px 0px 0px; padding:0; text-align: center; z-index: 100; }
	header .linkBox a {margin-left:auto;}
	header .header .content .linkBox .mail {display: none;}
	header nav {transition: 0.4s ease-in-out; position: fixed; left:-100%; top:0; width: 100%; height: 100vh; z-index: 1000; }
	header nav.open {left:0;}
	header nav .navi {display: block;}
	header nav .navi li {border-bottom: 1px solid #e56569;}
	header nav .navi li.sp {display: block;}
	header nav .navi li a {padding: 10px 20px; font-size: 16px;}
	main { margin-top: 0px;}
	.content { box-sizing: border-box; }
	#wrap .content { padding:40px 15px;}

	#wrap .content .left ,
	#wrap .content .right {float: none; width: 100%;}

	footer .content {padding: 40px 15px; }
	footer .content .left {float: none; display: block;}
	footer .content .right {float: none; display: block; width: 100%; text-align: center;}
	footer .content .right h2 {font-size: 16px;}
	footer .content .right .font_min {font-size: 30px;}
	footer .copy {margin-top: 30px;}
	footer .content .right .font_min img {height: 26px;}

	#wrap #sec00 {min-height: 400px;}
	#wrap #sec00 h1 .titlepop {width: 90px; left: 0px; top: -30px;}
	#wrap #sec00 h1 .pc {display: none;}

	#wrap .content h1 {font-size: 7vw; font-weight: bold; margin-bottom: 30px;}
	#wrap .content h1 br {display: none;}
	#wrap .content .campaign {padding: 20px 15px 15px; margin-bottom: 20px;}
	#wrap .content .campaign h1 {font-size: 4.8vw;}
	#wrap .content .campaign h1 span {padding: 8px 6px 6px; margin-left: 10px; vertical-align: middle;}
	#wrap .content .campaign .sub {font-size: 3vw; margin-bottom: 10px;}
	#wrap .content .priceBox {font-size:5vw;}
	#wrap .content .campaign .earlyReservation {margin-top: 40px; padding: 15px;}
	#wrap .content .campaign .earlyReservation::before, #wrap .content .campaign .earlyReservation::after{ width: 20px; top: -20px; }
	#wrap .content .campaign .earlyReservation h2 {font-size: 5vw; line-height: 1.4em; padding: 15px 0 10px;}
	#wrap .content .campaign .earlyReservation h2 span {width: 50px; height: 50px; line-height: 50px; font-size: 4vw; left: 0px; bottom: auto; top: -40px;}
	#wrap .content .campaign .earlyReservation h2 span::after {bottom: -4px; right: -4px; border: 8px solid transparent; border-left: 8px solid #fff;}
	#wrap .content .campaign .earlyReservation h3 {font-size: 3vw;}
	#wrap .content .campaign .earlyReservation h3 b {font-size: 4.7vw; line-height: 1.5em;}
	#wrap .content .campaign .caption { text-align: left; font-size: 11px; line-height: 1.5em;}

	#wrap .btnBox .btnL {margin:20px auto; font-size: 3.5vw; line-height:35px;}
	#wrap .btnBox .btnL:after,#wrap .btnBox .btnM:after {right: 18px;}
	#wrap .btnBox .btnM {margin:20px auto; font-size: 4vw; width: 100%; line-height: 27px; box-sizing: border-box;}

	#wrap .content .point h2 { font-size: 5vw; padding-left: 45px; background-position: 0% 0% ; padding-top: 0px; margin-top: 30px; line-height: 1.5em; margin-bottom: 20px; background-size: 34px;}
	#wrap .content .point .pointBox,
	#wrap .content .text_box,
	#wrap .content .couse .text_box { font-size: 4vw; line-height: 1.8em; margin: 20px auto;}
	#wrap .content .point .pointBox .prof {padding: 15px;font-size: 3vw; line-height: 1.5em;}
	#wrap .content .point .pointBox .prof .left {width: 100%;}
	#wrap .content .point .pointBox .prof .right {width: 50%; margin:10px auto auto;}
	#wrap .content .point .pointBox .auxiliary li {width: 50%; padding: 10px;}
	#wrap .content .point .pointBox .auxiliary li h3 {font-size: 1em;}

	#wrap .content .couse {display: block; margin: auto;}
	#wrap .content .couse li {width: 100%; padding:0; margin-top: 20px;}
	#wrap .content .couse h2 {font-size: 5vw; text-align: center;}
	#wrap .content #strategicInfo .strategicBox h3 {overflow-x: hidden;}
	#wrap .content #strategicInfo .strategicBox .h5_box .left {width: 50%; float: none; margin: auto;}
	#wrap .content #strategicInfo .strategicBox .h5_box .right {width: 100%; float: none;}
	#wrap .btnList {display: block; margin: auto;}
	#wrap .btnList li {width: 100%; padding:0;}

	#wrap .content h2 {font-size: 5vw; margin: 30px auto; line-height: 1.4em;}
	#wrap .content #strategicInfo .strategicBox h3 { margin: 30px auto 10px; }
	#wrap .content #strategicInfo .strategicBox h3 span {font-size: 5vw; }
	#wrap .content #strategicInfo .strategicBox h3 span:before {width: 96px;right: -100px; background-size: 100%;}
	#wrap .content #strategicInfo .strategicBox h3 span:after {width: 96px;left: -100px; background-size: 100%;}
	#wrap .content #strategicInfo .strategicBox h4 {margin: 30px auto;}
	#wrap .content #strategicInfo .strategicBox h4 img { width:60px; height: auto;}
	#wrap .content #strategicInfo .strategicBox .h5_box {margin: 30px auto;}
	#wrap .content #strategicInfo .strategicBox h5 { font-size: 6vw; text-align: center; }
	#wrap .content #strategicInfo .strategicBox .h5_box .right h5 span {font-size: 0.8em;}
	#wrap .content #strategicInfo .strategicBox .h5_box .right p {font-size:3.5vw; line-height: 1.5em; }
	#wrap .content #strategicInfo .strategicBox .h5_box .right p span {font-size: 4vw;}

	#wrap .content #strategicInfo .strategicBox .qa dt {padding: 10px 0 10px 10px; font-size:5vw;}
	#wrap .content #strategicInfo .strategicBox .qa dt:after {top: 10px;}
	#wrap .content #strategicInfo .strategicBox table th, #wrap .content #strategicInfo .strategicBox table td {font-size: 12px; line-height: 1.5em; padding: 10px 6px;}

	#wrap .content #auxiliary .left {width: 100%;}
	#wrap .content #auxiliary .right {width: 100%; margin-top: 10px;}
	#wrap .content #auxiliary h3 {font-size: 5vw; margin-bottom: 10px;}

	#wrap .content .program {margin: 30px auto; width: 100%; overflow-x: scroll;}
	#wrap .content .program p {width: 800px;}
	#wrap .content .program span {font-size: 4vw; display: inline-block; padding-right: 20px; font-weight: bold; position: relative; margin: 10px auto;}
	#wrap .content .program span:after {display: block; content: ''; position: absolute; top:4px; right: 0; border: 6px solid transparent; border-left: 6px solid #ab0d00;} 

	#wrap .content .cpBox { margin: 30px auto; }
	#wrap .content .cpBox tr th {font-size: 4vw; line-height: 1.5em; padding:15px 10px; width: 26%;}
	#wrap .content .cpBox tr td {font-size: 4vw; line-height: 1.5em; padding:15px 10px; width: auto;}

}/* 640px */