/*--------------------------------------*/
/* 1. Helper Classes -------------------*/
/*--------------------------------------*/

.align-center {text-align:center}
.aligh-left {text-align:left}
.align-right {text-align:right}
.float-left {float:left}
.img_responsive {max-width: 100%}
.img-circle {border-radius: 50%}


/*--------------------------------------*/
/* 2. Preloader ------------------------*/
/*--------------------------------------*/

.preloader_header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
	background: #000;
}

.preloader_loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.preloader_loader {
    bottom:20%;
}

.preloader_header .preloader_inner {
    display: block;
    margin: 0 auto;
}

.preloader_header .preloader_loader svg path {
    fill: none;
    stroke-width: 6;
}

.preloader_header .preloader_loader svg path.preloader_loader_circlebg {
stroke: rgba(255, 255, 255, .1);
}
.preloader_header .preloader_loader svg path.preloader_loader_circle {
transition: stroke-dashoffset 0.2s;
stroke: rgba(255, 255, 255, .95);
}

/* Animations */
/* Initial animation of header elements */

.loading .preloader_loader {
	opacity: 1;
	-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .preloader_loader {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}

@keyframes animInitialHeader {
	from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
}


/* Header elements when loading finishes */

.loaded .preloader_loader {
	opacity: 1;
}

.loaded .preloader_loader {
	-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}


/* Header animation when loading finishes */

.loaded .preloader_header {
	-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}


/* Content animations */

.loaded .home_anim1,
.loaded .home_anim2,
.loaded .home_anim3,
.loaded .home_anim4,
.loaded .home_anim5,
.loaded .home_anim6,
.loaded .home_anim7,
.loaded .home_anim8,
.loaded .home_anim9,
.loaded .home_anim10
{
	animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
    -webkit-animation: animLoadedContent 0.8s cubic-bezier(0.7,0,0.3,1) both;
}

.loaded .home_anim1 {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

.loaded .home_anim2 {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

.loaded .home_anim3 {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

.loaded .home_anim4{
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

.loaded .home_anim5 {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.loaded .home_anim6 {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.loaded .home_anim7 {
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

.loaded .home_anim8 {
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

.loaded .home_anim9 {
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}

.loaded .home_anim10 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}


@keyframes animLoadedContent {
    from {
        opacity: 0;
        transform: translate3d(0,200px,0);
    }
}

@-webkit-keyframes animLoadedContent {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,200px,0);
    }
}

.layout-switch .ip-header {
    position: absolute;
}

.header-none {
	display:none;
}




/*--------------------------------------*/
/* 3. Icons ----------------------------*/
/*--------------------------------------*/

.icon_big {
	font-size: 1.72rem;
	margin:1rem;
}

.icon_normal {
	width: 2rem;
    font-size: 1.72rem;
}

.icon_small {
	margin:1rem;
	font-size:1.4rem;
	line-height:1.2rem;
	opacity:0.54;
	margin-right:2rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.icon_list {
	margin-bottom:1.72rem;
}

.icon_list li{
	vertical-align: middle;
    display: table;
}

.icon_list li div,
.icon_list li h6 {
	vertical-align: middle;
    display: table-cell;
}

/*--------------------------------------*/
/* 4. Homepage Content -----------------*/
/*--------------------------------------*/

html {
	overflow-x:hidden;
}

.hero_fullscreen {
	padding-top:3.428rem;
}


/*-- Main Content --*/

.home_content {
	margin-top:2rem;
	margin-bottom:2rem;
	z-index: 10;
}

#main_content
#main_content h1,
#main_content h6,
.cta_button_area,
.logo,
.form_area {
	position:relative;
	z-index:10;
}

.content_container {
	display:table-cell;
	vertical-align: middle;
	z-index: 10;
}


/*-- Form Area --*/
.form_area {
	background:white;
	padding:2rem;
	margin:0 auto;
	z-index:2;
	position:relative;
	color:black;
	margin-top:3rem;
	margin-bottom: 1rem;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.form_area h4 {
	margin-top:0;
	padding-bottom:1rem;
}



.mobile_novideo {
	top: 0;
	left: 0;
	position: absolute;
	width:100%;
	height:100%;
}



/*--------------------------------------*/
/* 5. Icon Box -------------------------*/
/*--------------------------------------*/

.iconbox {
	overflow: auto;
	margin-bottom:1rem;
}

.iconbox_icon {
	float:left;
	width:4rem;
	height:4rem;
	padding:0.2rem;
	font-size:1.8rem;
}

.iconbox_content {
	overflow: hidden;
}

.iconbox_content h5 {
	margin-top:0;
}

/*--------------------------------------*/
/* 6. Intro ----------------------------*/
/*--------------------------------------*/

.intro {
	padding-bottom:3rem;
}

.intro h3 {
	margin-top:0;
}



/*--------------------------------------*/
/* 8. Subsections ----------------------*/
/*--------------------------------------*/

.subsection {
	padding-top:4rem;
	padding-bottom:4rem;
	position:relative;
	z-index:1;
}


/*-- fixes --*/

.more_info_intro,
.reviews_intro {
	padding-right:2rem;
}

.more_info_intro h3,
.reviews_intro h3{
	margin-top:0;
}

.single_review img {
	height:8rem;
	margin-bottom:2rem;
}




/*--------------------------------------*/
/* 9. Contact Form --------------------*/
/*--------------------------------------*/

.contact_form .input-field {
	margin-bottom: 1.72rem;
}

/*-- CONTACT FORM MESSAGE STYLING --*/

#message {
    display:none;
    position: fixed;
    z-index:3000;
    width:40rem;
    top:50%;
    left:50%;
    margin-top:-8.5rem;
    margin-left:-20rem;
    text-align:center;
}

#alert {
	display:table-cell;
	vertical-align: middle;
    padding-bottom:2rem;
    padding-top:2rem;
    padding-left:2rem;
    padding-right:2rem;
}

.alert_icon {
	font-size:2rem;
	color:white;
}

.unordered li {
    margin:0 !important;
}

.contact_icon {
	font-size:2rem;
	margin-top:4rem;
	margin-bottom:1rem;
}

#message.warning {
	background:#F44336;
}

#message.success {
	background:#4CAF50;
}


/*--------------------------------------*/
/* 10. Inputs ---------------------------*/
/*--------------------------------------*/

.input-field {
	position: relative;
}

.input-field label {
    opacity:0.7;
    position: absolute;
    top: 0.8rem;
    left: 0rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}

.input-field label.active {
    font-size: 0.8rem;
    opacity:0.7;
    -webkit-transform: translateY(-130%);
    -moz-transform: translateY(-130%);
    -ms-transform: translateY(-130%);
    -o-transform: translateY(-130%);
    transform: translateY(-130%);
}

.input-field input[type=text].valid,
.input-field input[type=password].valid,
.input-field input[type=email].valid,
.input-field input[type=date].valid,
.input-field input[type=tel].valid,
.input-field textarea.valid {
    border-bottom: 1px solid #4CAF50;
    -webkit-box-shadow: 0 1px 0 0 #4CAF50;
    -moz-box-shadow: 0 1px 0 0 #4CAF50;
    box-shadow: 0 1px 0 0 #4CAF50;
}

.input-field input[type=text].invalid,
.input-field input[type=password].invalid,
.input-field input[type=email].invalid,
.input-field input[type=date].invalid,
.input-field input[type=tel].invalid,
.input-field textarea.invalid {
    border-bottom: 1px solid #F44336;
    -webkit-box-shadow: 0 1px 0 0 #F44336;
    -moz-box-shadow: 0 1px 0 0 #F44336;
    box-shadow: 0 1px 0 0 #F44336;
}

.input-field .prefix {
    position: absolute;
    width: 2rem;
    top:1rem;
    font-size: 1.72rem;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -o-transition: color 0.2s;
    -ms-transition: color 0.2s;
    transition: color 0.2s;
}

.input-field .prefix ~ input,
.input-field .prefix ~ textarea {
    margin-left:3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

.input-field .prefix ~ textarea {
    padding-top: 0.8rem;
}

.input-field .prefix ~ label {
    margin-left: 3rem;
}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=tel],
textarea {
	background-color: transparent;
	border: none;
	outline: none;
	height: 3rem;
	width: 100%;
	font-size: 1rem;
	margin: 0 0 15px 0;
	padding: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

textarea {
	overflow-y: hidden;
	/* prevents scroll bar flash */
	padding: 1.6rem 0;
	/* prevents text jump on Enter keypress */
	resize: none;
}

.hiddendiv {
	display: none;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* future version of deprecated 'word-wrap' */
	padding-top: 1.2rem;
	/* prevents text jump on Enter keypress */
}


/*--------------------------------------*/
/* 13. Buttons --------------------------*/
/*--------------------------------------*/

.btn,
.btn-large,
.btn-flat {
	display: inline-block;
	height: 2.57rem;
	margin-bottom: 15px;
	padding: 0 1.5rem;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-clip: padding-box;
	line-height: 2.57rem;
	text-transform: uppercase;
	border: none;
	-webkit-tap-highlight-color: transparent;
}

.btn.disabled,
.disabled.btn-large,
.btn-floating.disabled,
.btn-large.disabled,
.btn:disabled,
.btn-large:disabled,
.btn-large:disabled,
.btn-floating:disabled {
	background-color: #DFDFDF;
	box-shadow: none;
	color: #9F9F9F;
}

.btn.disabled:hover,
.disabled.btn-large:hover,
.btn-floating.disabled:hover,
.btn-large.disabled:hover,
.btn:disabled:hover,
.btn-large:disabled:hover,
.btn-large:disabled:hover,
.btn-floating:disabled:hover {
	background-color: #DFDFDF;
	color: #9F9F9F;
}

.btn i,
.btn-large i,
.btn-floating i,
.btn-large i,
.btn-flat i {
	font-size: 1rem;
	line-height: inherit;
}

.btn,
.btn-large {
	text-decoration: none;
	color: #FFF;
	text-align: center;
	letter-spacing: 0.8px;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
	cursor: pointer;
}

.btn-flat {
	box-shadow: none;
	background-color:rgba(255, 255, 255, .1);
	color: white;
	cursor: pointer;
}

.btn-flat.disabled {
	color: white;
}

.btn-large {
	height: 54px;
	line-height: 56px;
}
.btn-large i {
	font-size: 1.6rem;
}


.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, ul.side-nav.full, ul.side-nav.fixed, .form_area {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover, .modal {
	-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.z-depth-2, .shadow:hover {
	-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
	-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
	-webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	-moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
	-webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
	box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}


 /* Remove Focus Boxes */
select:focus {
    outline: 1px solid #f8c1c3;
}

button:focus {
    outline: none;
}

label {
	font-size: 0.8rem;
	color: #9e9e9e;
}




body{
	background-color:#000;
	color:#333h2;
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.background_color1 {
	background: #fff;
}

.background_color2 {
	background: #e1eaf7;
}

.mainv{
	background-color:#e1eaf7;
}

.mainvisual {
	position:relative;
}
.mainvisual .main_img{
	width:100%;
}
.mainvisual video{
	width:100vw;
}
.mainvisual .logo_box{
	position:absolute;
	top:8px;
	left:0;
	right:0;
	margin:auto;
	width:6%;
}
.mainvisual .sound_swich{
	position:absolute;
	top:10px;
	left:4%;
	width:10vw;
}
.mainvisual .logo_box img,
.mainvisual .sound_swich img,
.img_box img{
	width:100%;
}

.sound_swich img{
	cursor:pointer;
	opacity:0.8;
}
.sound_swich img:hover{
	opacity:0.5;
}
.sound_swich #sound_off{
	display:none;
}

h1,h2,h3,h4,h5{
	font-weight:normal;
	margin:0;
}

h2,h3,.red{
	color:#333;
  font-weight: bold;
}

h2{
	margin-bottom:2rem;
	font-size:2rem;
}
h3{
	margin:1rem 0;
	font-size:1.4rem;
}
h4{
	font-size:0.9rem;
	margin-bottom:1rem;
}

p{
	font-size:1.1rem;
	line-height:1.4rem;
}

.mida{
	font-size:1.3rem;
}

.pad-top-40{
	padding-top:40px;
}
.pad-bot-40{
	padding-bottom:40px;
}


.header{
	height:8vw;
}
.header .container{
	position:relative;
}
.header .logo_box{
	position:absolute;
	top:1.6vw;
	left:0;
	width:20%;
}
.nav-unshown {
	display:none;
}
.header .login{
	position:absolute;
	top:2vw;
	right:0;
	display:block;
	background-color:#f80;
	text-decoration:none;
	font-weight:bold;
	padding:0.4rem 3.6rem;
	border-radius:1.5vw;
}


a{
	color:#333;
	text-decoration:underline;
}
a:hover{
	opacity:0.6;
}

#howto img,
#system img{
	border:2px solid #fff;
}
#howto img.no_border,
#system img.no_border{
	border:0;
}
#system .row{
	margin-bottom:10px;
}

#howto .image_container{
	position:relative;
}
#howto .image_container:after{
	content:">>";
	position:absolute;
	color:#fff;
	top:35%;
	right:-0.5rem;
}
#howto .image_container:last-child:after{
	content:none;
}

#footer{
	padding:3vw;
	background-color:#fff;
	font-size:0.75rem;
}
#footer .footer_logo{
	width:13vw;
}
#footer .footer_navi{
	padding-top:2em;
}
#footer .footer_navi a{
	display:block;
	color:#000;
	text-decoration:none;
}

.footer_copy{
	padding:1rem 0;
	font-size:0.7rem;
}


.btn_box{
	padding-top:2vw;
	font-size:1.4rem;
}
.btn_box a{
	text-decoration:none;
}
.btn_box a div:first-child{
	font-size:0.8rem;
}

a.owner{
	display:block;
	width:70%;
	margin:10px 0 40px 26%;
	color:#fff;
	text-align:center;
	padding:8px;
	border:2px solid #fff;
	border-radius:10px;
	background-color:#ba60dd;
}

a.student{
	display:block;
	width:70%;
	margin:10px 0 40px 10%;
	color:#fff;
	text-align:center;
	padding:8px;
	border:2px solid #fff;
	border-radius:10px;
	background-color:#7cb169;
}

a:hover{
	opacity:0.7;
}

.login_box{
	text-align:center;
}
.login_box a{
	display:block;
	width:30%;
	background-color:#f80;
	margin:0 auto;
	padding:8px;
	border-radius:30px;
	color:#fff;
}


#privacy,
#privacy p{
	font-size:0.8rem;
	line-height:1.4rem;
}
#privacy .container{
	padding:0 10vw;
}
#privacy dt{
	margin-top:1rem;
	color:#333;
  font-weight: bold;
}
#privacy dd{
	margin:0;
}

#contact{
	font-size:1.1rem;
	width:70%;
	margin:0 auto;
}
#contact .input_text{
	/*display: block;
	width: 100%;*/
	height: calc(2.25rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	/*font-weight: 400;*/
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem;
}
#contact .btn{
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	background-color: #f8f9fa;
	border-radius: 12px!important;
	padding: 5px 30px!important;
	font-size: 1rem;
	line-height: 1.5;
}
#contact .btn:hover{
	background-color: #e2e6ea;
}


#concept .merit_box{
	text-align:center;
	background-color:#35e;
	padding:20px 15px;
}
#concept .merit_box img{
	width:40%;
}
#concept .merit_box h2{
	color:#fff;
	margin-bottom:0;
}
#concept .row .merit_box{
	height:340px;
	margin-bottom:40px;
}
#concept .merit_box h3{
	color:#f93;
	margin-top:0;
	font-weight:bold;
}
#concept .merit_box p{
	text-align:left;
	margin-bottom:0;
	font-size:1.1rem;
	line-height:1.4rem;
}
#concept .sankaku{
	width:4%;
	margin:0 auto;
  border-top: 30px solid #35e;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid transparent;
}
.text1{
  color: #000;
  font-weight: bold;
}
.border1{
  border-color: #3281BC;
}
.mess_tit_name{
 background-color: dimgrey;
}
.text-center{
 background-color: dimgrey;
}




@media screen and (min-width: 768px) {
	nav{
		margin:3vw 0 0 26vw;
		/*text-align:right;*/
	}
	nav a{
		display:inline-block;
		text-decoration:none;
		margin-right:2rem;
	}

	.blog{
		padding:0 70px;
	}
}


/*max Width 768px */
@media screen and (max-width: 767px) {
	.mainvisual .sound_swich{
		width:20vw;
	}

	#about_us .info{
		width:90%;
	}

	#screenshots {
		background-image:none;
	}

	#nav-open{
		position:fixed;
		z-index: 98;
		top: 4vw;
		right: 4vw;
		display:block;
		width:7vw;
		height:10vw;
		vertical-align: middle;
	}
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;
		width: 100%;
		border-radius: 3px;
		background: #fff;
		display: block;
		content: '';
		cursor: pointer;
		opacity:0.9;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}
	#nav-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	nav {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		/*max-width: 330px;*/
		/*height: 60%;*/
		background: #999;
		transition: .3s ease-in-out;
		-webkit-transform: translateY(-105%);
		transform: translateY(-105%);
	}
	nav a{
		display:block;
		text-align:center;
		padding:10px;
		font-size:1.2rem;
		border-top:1px solid #fff;
	}

	#nav-input:checked ~ #nav-close {
		display: block;
		opacity: 0.6;
	}

	#nav-input:checked ~ nav {
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
		/*box-shadow: 6px 0 25px rgba(0,0,0,.15);*/
	}

	.header{
		height:12vw;
	}
	.header .logo_box{
		position:absolute;
		top:2vw;
		left:0;
		width:20vw;
	}
	.header .login{
		right:10px;
		padding:0.1vw 5vw;
		border-radius:5vw;
	}
	a.owner,
	a.student{
		margin:10px auto 40px;
	}
	.login_box a{
		width:70%;
	}

	#footer .footer_navi{
		text-align:center;
	}

	#privacy .container{
		padding:10px;
	}

	#contact{
		width:90%;
		margin:0 auto;
	}

	#concept .row .merit_box{
		height:auto;
		margin-bottom:20px;
	}
	#concept .row{
		/*margin-bottom:40px;*/
	}
	#concept .merit_box h3{
		font-size:6vw;
	}
	#concept .merit_box p{
		font-size:4vw;
		line-height:5vw;
	}

}