@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*--共通----------------------------------------------------------------*/

#outer_frame{
    width: 100%;
    margin-top: 150px;
    text-align: center;
 }

#subtitle-h2{
    letter-spacing: 0.5em;
    margin-bottom: 60px;
 }

#access-frame{
    width: 92%;
    margin-top: 80px;
    text-align: left;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}


/*--here-there----------------------------------------------------------------*/

.texthere{
    width: 92%;
    margin-top: 20px;
    text-align: left;
    line-height: 2;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 120px;
    max-width: 580px;
    letter-spacing: 0.1em;
    font-size: 92%;
}

.texthere p{
    margin-bottom: 40px;    
}

.texthere ul{
    margin-bottom: 40px;    
}

.texthere li{
    letter-spacing: 0.1em;   
	line-height: 1.6;
	margin-bottom: 20px; 
}

 
/*--システム----------------------------------------------------------------*/

#system_area1{
	background-image: url(../img/system/nav-back.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 494px;
	text-align: center;
 }
 
#system_area2{
	width: 100%;
	height: 494px;
	text-align: center;
	max-width: 1000px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: table;
 }
 
 #system_navimg2{
	width:420px;
	position: absolute;
	z-index: 100;
	left: 42%;
	padding-top: 40px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
 }
 
#system_textarea2{
	font-size: 14px;
	letter-spacing: 0.3em;	
	color: #33EFEE;
	text-align: left;
	width: 500px;
	position: absolute;
	top: 120px;
	z-index: 110;
	left: 20px;
 }
 
  #system_area3{
	width: 100%;
	height: 494px;
	text-align: center;
	max-width: 1000px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: table;
 }
 
 #system_navimg3{
	width:420px;
	position: absolute;
	z-index: 100;
	left: 20px;
 }
 
#system_textarea3{
	font-size: 14px;
	letter-spacing: 0.3em;	
	color: #ff9bb5;
	text-align: left;
	width: 500px;
	position: absolute;
	top: 40px;
	z-index: 110;
	left: 40%;
	padding-top: 40px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
 }

#system_area4{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: table;
	text-align: center;
 }
 
 #system_area4-sec1{
	max-width: 1543px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/system/training1.png);
	background-repeat: no-repeat;
	background-size: 1543px auto;
	background-position: center center;
	height: 338px;
	margin-top: 30px;
	margin-bottom: 30px;
 }
 
  #system_area4-sec2{
	max-width: 1543px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/system/training2.png);
	background-repeat: no-repeat;
	background-size: 1543px auto;
	background-position: center center;
	height: 321px;
	margin-top: 30px;
	margin-bottom: 30px;
 }
 
  #system_area4-sec3{
	max-width: 1543px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/system/training3.png);
	background-repeat: no-repeat;
	background-size: 1543px auto;
	background-position: center center;
	height: 313px;
	margin-top: 30px;
	margin-bottom: 30px;
 }
 
 /*--ABOUT US----------------------------------------------------------------*/
 
 #main_image-about{
  height: 100%;
  width: 100%;
  margin: auto;
  position: relative;
  background-image: url(../img/about/main-v_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



#main_catimg-about {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  max-width: 732px;
  height: auto;
}

.t-lef{
	text-align: left;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
}

.center_box{
	text-align: center;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#about_area1{
	width: 100%;
	height: 600px;
	text-align: center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: table;
	max-width: 1800px;
}
 
 #about_navimg1{
	width: 60%;
	position: absolute;
	z-index: 100;
	max-width: 1000px;
}
 
#about_textarea1{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #fff;
	width: 500px;
	position: absolute;
	top: 160px;
	z-index: 110;
	left: 50%;
	padding-top: 60px;
	padding-right: 60px;
	padding-bottom: 60px;
	padding-left: 60px;
	background-color: #9ff4af;
}


#about_area2{
	width: 100%;
	height: 600px;
	text-align: center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: table;
	max-width: 1800px;
}
 
 #about_navimg2{
	width: 60%;
	position: absolute;
	z-index: 100;
	max-width: 1000px;
	left: 40%;
}
 
#about_textarea2{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #393939;
	width: 500px;
	position: absolute;
	top: 160px;
	z-index: 110;
	left: 10%;
	padding-top: 60px;
	padding-right: 60px;
	padding-bottom: 60px;
	padding-left: 60px;
	background-color: rgba(252,246,154,0.90);
}

#about_area3{
	width: 100%;
	height: 600px;
	text-align: center;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: table;
	max-width: 1800px;
}
 
 #about_navimg3{
	width: 60%;
	max-width: 1000px;
	position: absolute;
	z-index: 100;
}
 
#about_textarea3{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #fff;
	width: 600px;
	position: absolute;
	top: 160px;
	z-index: 110;
	left: 40%;
	padding-top: 60px;
	padding-right: 60px;
	padding-bottom: 60px;
	padding-left: 60px;
	background-color: rgba(255,188,221,0.90);
}

/*--スマホサイズ時の設定------------------------------------------------------*/

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

 #main_image-about{
    background-image: url(../img/about/main-v_bg_sp.jpg);;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:100vh;
  }
  

 
#about_sp-textarea1{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #fff;
	width: 92%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: rgba(159,244,175,0.90);
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

#about_sp-textarea2{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #666;
	width: 92%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: rgba(252,246,154,0.90);
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

#about_sp-textarea3{
	font-size: 16px;
	letter-spacing: 0.3em;
	color: #fff;
	width: 92%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: rgba(255,188,221,0.90);
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 30px;
}


 #main_image{
    background-image: url(../img/system/main-v_bg_sp.png);;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:100vh;
  }

}