@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');

@font-face {
  font-family: 'utsukushi';
  font-style: normal;
  src: url("../font/utsukushi.woff") format('woff')
}

a:hover{
    text-decoration: underline;
}

.utsukushi{
    font-family: 'utsukushi';
    font-weight: normal!important;
}
.kosugi{
    font-family: 'Kosugi Maru', sans-serif;
}
.fc{
    clear: both;
}


/***
*
Flexible
*
***/

@media (max-width: 767px) {
    /*xs*/
    #signUpArea{
        display:block;
        padding:0.8em;
    }
    #pagetop{
        font-size: 2.0em;
        right:0.5em;
    }
	
.banner{
    width:100%;
    max-width: 100%;
    height: auto;
    margin:0px auto;
    text-align: center;
    margin-bottom: 20px;
}

	
}
@media (min-width: 768px){
    /*sm*/
    #signUpArea{
        display:inline-block;
        padding:0.8em 5.0em;
    }
    #pagetop{
        font-size: 3.0em;
        right:2.0em;
    }
}

/*
#APPLICATION
*/
#application .container{
    width:100%;
    padding:0;
}
#application .container,
#application .row,
#application .col{
    margin:0;
}
#application .profile img{
    width:100%;
}

.signUpArea_wrap{
    height: 9em;
    margin:0.8em 0;
    overflow: hidden;
    text-align: center;
}
.signUpArea {
    text-decoration: none;
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    display: block;
    margin: 0.2em auto;
    padding: 0.5em;
    text-align: center;
    border-radius: 0.5em;
    color: #000;
    text-shadow: 0 -1px 0 rgba(255,255,255,0.5);
    border-bottom: 7px solid #FF9800;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    position: relative;
    background-color: #FFC107;
}
.signUpArea:hover {
    margin-top: 0.65em;
    border-bottom: 2px solid #FF9800;
    box-shadow: 0 0 0 rgba(0,0,0,0.8);
    text-decoration: none;
    color:#000;
}
.signUpArea .main {
    font-size: 1.3em;
    padding-bottom:0.2em;
}
.signUpArea span {
    display: block;
}
.signUpArea .detail {
    font-size: 1.0em;
    padding-top: 10px;
    border-top: 1px solid #fff;
}
.signUpArea span {
    display: block;
}
#signUpArea_wrap{
    /*background-image:url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/gplaypattern.png');*/
    height:250px;
    width:100%;
    overflow: hidden;
    background-color:#fff;
    box-shadow: inset 0 0 150px #ccc;
}

#signUpArea{
    -moz-transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    background-color: #d6252f;
    margin:0 auto;
    text-align: center;
    border-radius:10px;
    font-weight:bold;
    color:#fff;
    text-decoration: none;
    font-size:2.0em;  
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    border-bottom: 7px solid #419e73;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    position:relative;
    background-color:#43b781;
}

#signUpArea:hover{
    background-color: #51c58f;
    margin-top:5px;
    border-bottom: 2px solid #419e73;
    box-shadow: 0 0 0 rgba(0,0,0,0.8);
}

#signUpArea span{
    display:block;
}

#signUpArea .detail{
    padding-top:10px;
    border-top:3px solid #fff;
}


.banner{
    width:100%;
    max-width: 100%;
    height: auto;
    margin:0px auto;
    text-align: center;
    margin-bottom: 20px;
}



/*
#CONTENTS
*/
.contents{
    padding:5.0em 0;
    background-color:#ffeea4;
    background-image:url("../img/stripe.png");
}
.contents .series_title{
    padding:1.0em;
    border-radius:5px;
    font-size:1.4em;
}
.contents .series_title{
    color:#fff;
    font-weight:bold;
}
.contents .series_title_1{
    background-color:#ff5951;
}
.contents .series_title_2{
    background-color:#3cbf6a;
}
.contents h3{
    font-size:1.8em;
    padding:0.5em 1.0em;
    background-color:#ddd;
    background-image:url("../img/overlays_inv/02.png");
}
.contents .series_exp{
    font-size:1.2em;
}
.video_list .video{
    position:relative;
    background-color:#fff;
    border-radius:5px;
    border:2px solid #00913a;
    margin:2.0em 0;
}

.contents .series_1 .video_list .video{
    border:2px solid #ff5951;
}

.video_list .detail{
    background-color:#fff;
    color:#333;
}

.video_list .detail p,
.video_list .detail ul{
    padding:1em;
    margin:0;
}
.video_list .video .title{
    text-align: center;
    color:#00913a;
    margin-bottom:0;
    height:4.0em;
    font-size:1.4em;
    padding:0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contents .series_1 .video_list .video .title{
    color:#ff6860;
}

.video_list .video .title a{
    color:inherit;
    text-decoration: none;
}
.video_list .video .lecturer{
    margin:0 5px;
    color:#333;
    text-align: center;
}
.video_list .video .thumb{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:5px;
}
.video_list .video .thumb img{
    width:100%;
    position: relative;
    z-index: 1;
}
.video_list .video.unavailable .thumb img{
    opacity:0.8;
}
.video_list .video .thumb .play,
.video_list .video .thumb .release_date{
    position:absolute;
    display:none;
}
.video_list .video .thumb .play{
    display: inline-block;
    font-size:2.9em;
    color: rgba(0, 145, 58, 0.62);
    z-index: 5;
    padding:0.5em;
}
.video_list .video .thumb .release_date{
    margin:0;
    z-index: 5;
    color:#fff;
    background:rgba(0,0,0,0.5);
}
.video_list .video .length{
    position:absolute;
    display: inline-block;
    padding:0.5em 1.0em;
    font-size:0.8em;
    background-color: #041e41;
    color: #fff;
    z-index: 10;
    bottom:0;
    left:0;
    margin:5px;
}

.video_list .video .link{
    text-align: center;
}
.video_list .video .link a{
    display: block;
    padding:0.5em 1.0em;
    background-color:#00a743;
    color:#fff;
}

.contents .series_1 .video_list .video .link a{
    background-color:#ff6860;
}

/*
SNS
*/
.navigation-bottom{
    width:100%;
    background-color:#fff;
    position:relative;
    z-index: 100;
}
.navigation-bottom .col{
    text-align: center;
    font-size:3.0em;
}
.navigation-bottom .col .side-line{
    color:#19bc03;
}
.navigation-bottom .col .side-facebook{
    color:#315096;
}
.navigation-bottom .col .side-twitter{
    color:#55acee;
}

/*
FOOTER
*/
.scrl2{
    cursor: pointer;
}
#pagetop{
    display: inline-block;
    z-index: 5;
    color:#ffc107;
    border-radius: 5px;
    background:rgba(255,255,255,0.8);
    padding:0.2em 0.5em;
    position:fixed;
}

#scroller {
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: 5;
  opacity: 0.8;
  filter: Alpha(opacity=70);
}

#scroller span {
  color: #fff;
  border-radius: 5px;
  background: rgba(255, 0, 0, 0.8);
  padding: 1.0em 1.5em;
  display: inline-block;
}

footer {
    background-color: #43b781;
    color: #fff;
    padding: 20px;
    text-align: right;
    line-height: 2.5em;
}
footer a{
    color:#111711;
    text-decoration: none;
}
footer a:hover{
    color:#111711;
    text-decoration: none;
}