@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の読み込みはしないようお願いいたします。

*/


#key_wrap{
    position: relative;
    color: #ffbc00;
    font-weight: bold;
    overflow: hidden;
}

#key_wrap .sorcial_lower{
    position: absolute;
    width: 500px;
    left: 50%;
    z-index: 9;
    bottom: 10px;
    margin: 0 0 0 -100px;
}

#key_wrap .sorcial_lower li{
    float: left;
    padding: 0 5px;
}

#key_wrap h4{
    position: absolute;
    display: inline-table !important;
    top:0px !important;
    left: 50%;
    margin: 120px 0 auto 0;
    right: 0;
    bottom: 0;
    width: auto !important;
    height: 20px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding: 30px 20px ;
    z-index: 9;
    border: 4px solid #ffbc00;
    color:  #ffbc00;
    /*
    background: #ffbc00;
    color: #fff;
    */
    /*
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    */
}

#key_wrap p{
    position: absolute;
    top: 240px;
    width: 100%;
    margin: auto;
    height: 400px;
    font-size: 16px;
    line-height: 1.9em;
    font-weight: bold;
    text-align: center;
    z-index: 9;
}

#key_wrap h4.reds{
    position: absolute;
    top:140px;
    display: inline !important;
    width: 700px !important;
    margin-left:-350px !important;;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding: 30px 20px;
    z-index: 9;
    background: transparent;
    border: 5px solid #FFF;
    color: #FFF;
    /*
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    */
}

#key_wrap p.reds{
    position: absolute;
    top: 225px;
    width: 100%;
    margin: auto;
    height: 400px;
    font-size: 16px;
    line-height: 1.9em;
    font-weight: bold;
    text-align: center;
    z-index: 9;
    color: #FFF;
}


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

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

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

#key_wrap nav ul li{
    display: inline;
}

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


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

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

.overlays{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 400px;
    overflow: hidden;
    /*
    background-image: url(/images/student/pattern_w.png);
    background-color: rgb(255,188,0,0.5);
    */
    background: rgba(0,0,0,0.6)
}

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

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