@charset "utf-8";

/*

【CSS表記ルール】
CSSの表記につきましては以下のルールに則って記述をお願いいたします。

1.bodyタグにid等を付けない
フレームワークの仕様により、bodyタグの出し分けが困難なためbodyにディレクトリ毎のidを振るのは禁止とさせて頂きます。
その代わりbody直下のwrapperに対してはディレクトリ毎のidを振って頂いて大丈夫です。

2.class名、id名の表記
フレームワークの仕様により、公開時は全てのCSSが1つのファイルに統合されます。
そのためclass,idの名前が被らないよう以下のルールに則って記述をお願いいたします。

#(wrapperのid名) .(wrapperのid名)_(個別のクラス名)
例:
#about .about_box{
	margin:10px auto;
}

3.!important は使わないようお願いたします。（どうしても必要な場合はご連絡ください。）

4.@importでのcssの読み込みはしないようお願いいたします。

*/

#student{
	color: #606060;
}

#student #key_wrap{
	position: relative;
}

#student #key_wrap h3{
	position: absolute;
	top: 50px;
	left: 50%;
	margin: 0 0 0 -288px;
	z-index: 9;
    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}
}

#student #key_wrap nav{
	position: absolute;
	z-index: 9;
	left: 50%;
	bottom: 20px;
	top:470px;
	margin: 0 0 0 -445px;
}

#student #key_wrap nav ul li{
	display: inline;
	padding-left: 20px;
}

#student #key_wrap #slidebox{
	width: 100%;
	height: 600px;
	overflow: hidden !important;
	position: relative;
}


#student #key_wrap .slide_area{
	width: 100%;
	height: 600px;
	overflow: hidden;
}

#student #key_wrap .slide_area li{
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.overlays{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background: url(/images/student2017/pattern_w.png);
}

/*
#student #key_wrap .slide_area li.zoom{
    -webkit-transition-duration: 4s;
    transition-duration: 4s;
    width: 110%;
    height: 110%;
}
*/

#student #key_wrap .slide_area li img{
	width: 100%;
	min-height: 600px;
	height: auto;
}

#student .contents_wrap{
	width: 100%;
	background: #fff;
}

#student .contents_wrap.even{
	background: #f1f1f1;
}


#student .contents_wrap div{
	width: 940px;
	margin: auto;
	text-align: left;
	padding: 60px 0 40px 0;
}


#student .contents_wrap h4{
	color: #606060;
	font-size: 22px;
	margin: 0 0 35px 0;
	text-align: center;
	font-weight: normal;
}

#student .contents_wrap h4 strong{
	color: #e4007f;
	font-size: 50px;
	font-weight: normal;
}

#student .contents_wrap h4 img{
	display: inline-block;
	height: 100px;
	margin: 0 auto 30px auto;
    }

#student .contents_wrap h5{
	font-size: 22px;
	margin-bottom: 10px;
}

#student .contents_wrap p{
	text-align: center;
}

#student .contents_wrap iframe{
	margin-bottom: 10px;
}

#student .contents_wrap #maplink a{
	background: #e7e6e6;
	padding: 10px 15px;
	float: right;
	font-size: 18px;
	text-decoration: none;
	margin: 0 0 40px 0;
}

#student .contents_wrap p.txt{
	margin-bottom: 40px;
	text-align: left;
	clear: both;
}

#student .nav_btn{
	width: 940px;
	clear:both;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}
#student .nav_btn li{
	display:inline-block;
	margin-top:40px;
	margin-left:2px;
}
#student .nav_btn li.cabin_btn{
	background: url(/images/student2017/nav_btn_01_on.png) no-repeat;
	width: 230px;
	height: 160px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}
#student .nav_btn li.fuji_btn{
	background: url(/images/student2017/nav_btn_02_on.png) no-repeat;
	width: 230px;
	height: 160px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}
#student .nav_btn li.edo_btn{
	background: url(/images/student2017/nav_btn_03_on.png) no-repeat;
	width: 230px;
	height: 160px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}
#student .nav_btn li.zen_btn{
	background: url(/images/student2017/nav_btn_04_on.png) no-repeat;
	width: 230px;
	height: 160px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}
/*#student .nav_btn li a:hover img{
	opacity:0.7;
	filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    transition: all 0.1s;
}*/

#student .hostel_nav_btn{
	width: 940px;
	height:85px;
	clear:both;
	margin:20px auto 80px;
}
#student .hostel_nav_btn .hostel_nav_btn_hover{
	background: url(/images/student2017/hostel_nav_btn_01_on.png) no-repeat;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}


/*#student .hostel_nav_btn a:hover img{
	opacity:0.7;
	filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    transition: all 0.1s;
}*/

/*#student .btn_nav{
	width: 940px;
	clear: both;
}

#student .btn_nav li{
	display: inline-block;
	margin-top: 60px;
	margin-left: 20px;
}

#student .btn_nav li.rakuten_btn{
	background: url(/images/student/btn_01_on.png) no-repeat;
	width: 406px;
	height: 113px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
            }

#student .btn_nav li.rakuten_btn img:hover{
	opacity: 0;
}

#student .btn_nav li:last-child{
	margin-left: 80px;
}*/

#student .contents_wrap .saport_box li{
	margin: 20px 0 0 0;
	width: 429px;
	float: left;
}

#student .contents_wrap .saport_box li:nth-child(even){
	float: right;
}

#student .contents_wrap .saport_box li h5{
	margin: 7px 0 0 0;
	font-size: 18px;
}

#student .contents_wrap .saport_box li p{
	text-align: left;
	margin: 7px 0 10px 0;
}

.mB40{
	margin-bottom: 40px;
}

#student .contents_wrap .lightbox_wrap li{
	float: left;
	margin: 20px 20px 0px 0;
	width: 210px !important;
}

#student .contents_wrap .lightbox_wrap li:nth-child(4n){
	float: left;
	width: 208px;
	margin: 20px 0px 0 0px;
}


#student .contents_wrap .foot_box{
	width: 450px;
	height: 200px;
	background: #fff;
	margin: 0 0 40px 0;
	padding: 0;
	color: #221815;
}

#student .contents_wrap .foot_box p{
	text-align: left;
	padding: 10px;
}

#student .contents_wrap .foot_box h5{
	background: #d9d9d9;
	font-size: 16px;
	margin: 0;
	padding: 10px;
}

#student .contents_wrap .left{
	float: left;
}

#student .contents_wrap .right{
	float: right;
}

#student .contents_wrap p.train_txt{
	background: url(/images/student/train_01.png) 10px 15px no-repeat;
	padding: 10px 10px 10px 50px;
}

#student .contents_wrap p.train_txt2{
	background: url(/images/student/train_02.png) 10px 15px no-repeat;
	padding: 10px 10px 10px 50px;
}

    
      .fade2 {  
        -webkit-transition: 0.3s ease-in-out;  
           -moz-transition: 0.3s ease-in-out;  
             -o-transition: 0.3s ease-in-out;  
                transition: 0.3s ease-in-out;  
    }  
    .fade2:hover {  
        opacity: 0;  
        filter: alpha(opacity=0);  
    }   
  
    

/*light box*/
/* Preload images */

body:after {
  content: url(/images/lightbox/close.png) url(/images/lightbox/loading.gif) url(/images/lightbox/prev.png) url(/images/lightbox/next.png);
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
.lightbox_box{
  position:relative;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  padding:30px 30px 10px 30px;
  border-top:2px solid #eeeeee;
  border-left:2px solid #eeeeee;
  border-right:2px solid #eeeeee;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(/images/lightbox/loading.gif) no-repeat;
}

.lb-nav {
  height: 17px;
  max-width: 131px;
  min-width: 97px;
  z-index: 10;
  margin: 49px auto 0px auto;
}

@-moz-document url-prefix() {
  .lb-nav {
  height: 17px;
width: 131px;
z-index: 10;
margin: 49px auto 0 auto;
position: absolute;
left: 0px;
right: 0px;
}
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 17px;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 17px;
  left: 0;
  float: left;
  background: url(/images/bukken/arrow_left.png) left 48% no-repeat;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 17px;
  right: 0;
  float: right;
  background: url(/images/bukken/arrow_right.png) right 48% no-repeat;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  padding:0 30px;
  background:#fff;
  border-left:2px solid #eeeeee;
  border-right:2px solid #eeeeee;
  border-bottom:2px solid #eeeeee;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #000;
}

.lb-data .lb-details {
  text-align: left;
  line-height: 1.1em;
  margin-bottom: 30px;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
clear: left;
padding: 5px 0;
font-size: 12px;
color: #000;
text-align: center;
margin-top: 15px;
max-width: 140px;
min-width:97px;
margin: 15px auto 0 auto;
border: 1px solid #eeeeee;
border-radius: 16px;
}

.lb-close {
  display: block;
float: right;
width: 51px;
height: 52px;
background: url(/images/lightbox/close.png) top right no-repeat;
text-align: right;
outline: none;
position: absolute;
top: -52px;
right: -4px;
cursor: pointer;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}