@charset "utf-8";

body{
    padding-top: 40px ;
}
@media (max-width: 991px){
    body{
        padding-top: 20px ;
    }
}

/* eyecatch============================================= */

#eyecatch{
    width: auto ;
    height: auto ;
}
#eyecatch img{
    margin: 0 auto ;
    display: block ;
	text-align: center ;
}
#eyecatch img.pc{
    width: 93% ;
    max-width: 1600px ;
    border-radius: 15px ;
}
h1{
    margin: 0 ;
}
#eyecatch img.sp{
	display: none ;
}
@media (max-width: 991px){
    #eyecatch img.pc{
        border-radius: 10px ;
        width: 95% ;
    }
}
@media (max-width: 767px){
    #eyecatch img.pc{
		display: none ;
    }
	#eyecatch img.sp{
		display: block ;
		max-width: 750px ;
		width: 100% ;
		padding: 0 20px ;
	}
}


/* login & user information============================= */

#top_transformbox{
    margin: -40px auto 20px auto ;
    max-width: 100% ;
    position: relative ;
}

/* before============================ */

.login_before{
    width: 650px ;
    margin: 0 auto ;
}
.login_before_left{
    float: left ;
    text-align: center ;
}
.login_before_left button,
.login_before_left button:hover,
.login_before_left button:visited,
.login_before_left button:active,
.login_before_left button:focus{
    background-color: rgba(255, 255, 255, 0) !important ;
    padding: 0 ;
    line-height: 1em ;
    border-radius: 0 ;
    border: none ;
    display: inline-block ;
}
.login_before_left button img{
    transition: all 0.2s ;
}
.login_before_left button img:hover{
    opacity: 0.7 ;
}
.login_before_right{
    float: right ;
    text-align: center ;
}
.login_before_right ul{
    text-align: center ;
	margin-bottom: 0 ;
	padding-top: 5px ;
}
.login_before_right ul li{
    list-style-type: none ;
    padding: 0 2px ;
    display: inline-block ;
    transition: all 0.2s ;
}
.login_before_right ul li:hover{
    opacity: 0.8 ;
}
.login_before_right p{
    margin-bottom: 0 ;
    font-size: 13px ;
}
.login_before_left img.sp,
.login_before_right img.sp{
	display: none ;
}
@media (max-width: 991px){
    #top_transformbox{
        margin: -20px auto 10px auto ;
    }
}
@media (max-width: 767px){
    .login_before{
        width: 400px ;
		max-width: 100% ;
		padding-right: 30px ;
		padding-left: 30px ;
    }
    .login_before_left{
        float: none ;
        max-width: 100% ;
        margin-bottom: 5px ;
    }
    .login_before_right{
        float: none ;
        max-width: 100% ;
    }
	.login_before_left img.pc,
	.login_before_right img.pc{
		display: none ;
	}
	.login_before_left img.sp,
	.login_before_right img.sp{
		display: block ;
		max-width: 100% ;
	}
	.login_before_left img.sp{
		width: 400px ;
	}
	.login_before_right ul{
		max-width: 100% ;
		margin-left: auto ;
		margin-right: auto ;
	}
	.login_before_right ul li{
		width: 50% ;
		float: left ;
	}
}

/* after=================== */

.login_after{
    width: 800px ;
    margin: 0 auto ;
}
.login_after_left{
    float: left;
    padding: 10px ;
    width: 50% ;
    height: 90px ;
    position: relative ;
}
.login_after_left .ico_usericon{
    position: absolute ;
    left: -20px ;
    top: 15px ;
    box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.3) ;
    border-radius: 50% ;
}
.login_after_left .username{
    float: left ;
    padding-left: 40px ;
    padding-top: 20px ;
    padding-right: 10px ;
    background-color: rgba(53, 130, 202, 0.2) ;
    width: 55% ;
    height: 100% ;
    font-size: 20px ;
    color: #555 ;
    border-radius: 3px 0 0 3px ;
}
.login_after_left .limit{
/*    padding-top: 10px ;*/
    float: left ;
    text-align: center ;
    background-color: rgba(255, 255, 255, 0.5) ;
    width: 45% ;
    height: 100% ;
    border-radius: 0 3px 3px 0 ;
    position: relative ;
}
.login_after_left .limit .centering{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
}
.login_after_left .limit p{
    line-height: 1em !important ;
    margin-bottom: 5px !important ;
}
.login_after_left .limit .head{
    color: #dd7d30 ;
/*    margin-bottom: 5px ;*/
}
.login_after_left .limit p.day-basic{
    color: #1763aa ;
    margin-bottom: 0 !important ;
}
.login_after_right{
    width: 50% ;
    float: left ;
    padding-top: 20px ;
}
.login_after_right ul{
    list-style-type: none ;
}
.login_after_right ul li{
    width: 33% ;
    float: left ;
    text-align: center ;
}
.login_after_right ul li input,
.login_after_right ul li a{
    display: block ;
    width: 95% ;
    padding: 7px 0 ;
    height: 35px ;
    border-radius: 17px ;
    background-color: #3582ca ;
    color: #fff ;
    box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.3) ;
    transition: all 0.2s ;
    border: 0 ;
}
.login_after_right ul li:last-child a{
    background-color: #fff ;
    color: #3582ca ;
}
.login_after_right ul li input:hover,
.login_after_right ul li a:hover{
    opacity: 0.7 ;
}
@media (max-width: 991px){
    .login_after{
        width: 100% ;
    }
    .login_after_left{
        padding: 10px ;
        width: 100% ;
        max-width: 400px ;
        float: none ;
        margin: 0 auto 10px auto ;
    }
    .login_after_right{
        width: 90% ;
        max-width: 350px ;
        float: none ;
        margin: 0 auto ;
        padding-top: 0 ;
        margin-bottom: 10px ;
    }
}
@media (max-width: 767px){
    .login_after_left{
        height: 60px ;
        width: 100% ;
        max-width: 400px ;
    }
    .login_after_left .ico_usericon{
        left: 10px ;
        height: 40px ;
        top: 10px ;
    }
    .login_after_left .username{
        border-radius: 30px 0 0 30px ;
        padding-top: 10px ;
        padding-right: 5px ;
        padding-left: 50px ;
        font-size: 12px ;
        width: 50% ;
    }
    .login_after_left .limit{
        width: 50% ;
    }
    .login_after_left .limit p{
        display: inline-block;
    }
    .login_after_left .limit .head{
/*
        float: left ;
        text-align: right ;
        width: 50% ;
*/
    }
    .login_after_left .limit .day{
/*
        float: left ;
        width: 50% ;
*/
    }
}

/* login modal======================================= */

.modal-dialog{
    width: 90% ;
    max-width: 400px ;
    margin: 70px auto 0 auto ;
}
.modal-content{
    padding: 20px 10px ;
    border: none ;
    border-radius: 10px ;
}
.modal-header{
    padding: 20px ;
    border: none ;
    text-align: center ;
}
.modal-header .close{
    position: absolute ;
    top: -15px ;
    right: -15px ;
    background-color: #3582ca ;
    width: 40px ;
    height: 40px ;
    border-radius: 50% ;
    color: #fff ;
    font-weight: bold ;
    opacity: 1 ;
    text-shadow: none ;
    font-size: 18px ;
    transition: all 0.2s ;
}
.modal-header .close:hover{
    opacity: 0.7 ;
}
.modal-body{
    padding: 10px ;
}
.modal-body form{
    width: 100% ;
    max-width: 250px ;
    margin: 0 auto ;
    text-align: center ;
}
.modal-body form .input input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.btn_login,
.btn_login:active,
.btn_login:focus{
    display: block ;
    background-color: #3582ca ;
    width: 150px ;
    margin: 0 auto ;
    border: 0 !important ;
    color: #fff ;
    padding: 10px ;
    transition: all 0.2s ;
	font-weight: bold ;
}
.btn_login:hover{
    opacity: 0.8 ;
    color: #fff ;
}
.loginmodal_under{
    text-align: center ;
    padding: 15px 0 ;
    line-height: 1.3em ;
}
.p_loginmodal_attention{
    color: #dd1515 ;
    font-size: 13px ;
    padding: 15px 0 ;
}
.p_loginmodal_attention a{
    color: #dd1515 ;
    text-decoration: underline ;
}
.ul_loginmodal_regist{
    list-style-type: none ;
    display: block ;
    max-width: 250px ;
    margin: 0 auto 10px auto ;
}
.ul_loginmodal_regist li{
    width: 50% ;
    float: left ;
    text-align: center ;
}
.ul_loginmodal_regist li a{
    width: 90% ;
    display: inline-block ;
    background-color: #dd7d30 ;
    border-radius: 3px ;
    padding: 10px 0 ;
    color: #fff ;
    transition: all 0.2s ;
}
.ul_loginmodal_regist li a:hover{
    opacity: 0.7;
}
.ul_loginmodal_nav{
    list-style-type: none ;
    text-align: center ;
    padding: 10px 0 ;
    clear: both ;
    margin-bottom: 0 ;
}
.ul_loginmodal_nav li{
    display: inline-block ;
    padding: 0 5px ;
}
.ul_loginmodal_nav li a{
    color: #555 ;
    text-decoration: underline ;
}
.ul_loginmodal_nav li a:hover{
    text-decoration: none ;
}
/* main navigation=================================== */

#mainnav{
    padding: 10px 0 ;
    margin-bottom: 10px ;
}
#mainnav .container{
    max-width: 1150px ;
}
.ul_mainnav{
    list-style-type: none ;
}
.ul_mainnav li{
    width: 16.6% ;
    float: left ;
    border-right: 1px solid #ddd ;
    text-align: center ;
}
.ul_mainnav li:last-child{
    border-right: none ;
}
.ul_mainnav li a{
    width: 80% ;
    padding: 10px 0 ;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
}
.ul_mainnav li a::before {
    content: "" ;
    position: absolute ;
    z-index: -1 ;
    left: 50% ;
    right: 50% ;
    bottom: 0px ;
    height: 4px ;
    border-radius: 2px ;
    -webkit-transition-property: left, right ;
    transition-property: left, right ;
    -webkit-transition-duration: 0.3s ;
    transition-duration: 0.3s ;
    -webkit-transition-timing-function: ease-out ;
    transition-timing-function: ease-out ;
}
.ul_mainnav li:nth-child(1) a::before{
    background-color: #0c874a ;
}
.ul_mainnav li:nth-child(2) a::before{
    background-color: #f9c900 ;
}
.ul_mainnav li:nth-child(3) a::before{
    background-color: #946134 ;
}
.ul_mainnav li:nth-child(4) a::before{
    background-color: #ce4256 ;
}
.ul_mainnav li:nth-child(5) a::before{
    background-color: #036eb7 ;
}
.ul_mainnav li:nth-child(6) a::before{
    background-color: #ff9422 ;
}

.ul_mainnav li a:hover::before, .ul_mainnav li a:focus::before, .ul_mainnav li a:active::before {
  left: 15% ;
  right: 15% ;
}
.ul_mainnav li a img{
    width: 100% ;
    max-width: 100px ;
}

/* sp===============================
.ul_mainnav.sp li{
	width: 33% ;
}
.ul_mainnav.sp li:nth-child(3){
	border-right: 0 ;
}
.ul_mainnav.sp li:nth-child(4),
.ul_mainnav.sp li:nth-child(5),
.ul_mainnav.sp li:nth-child(6){
	border-top: 1px solid #ddd ;
}
.ul_mainnav.sp li a{
    padding: 10px 13px ;
}
.ul_mainnav.sp li a img{
	max-width: 90px ;
	width: 100% ;
} */

@media (max-width: 991px){
    #mainnav{
        padding: 5px 0 ;
        margin-bottom: 5px ;
    }
    .ul_mainnav li a{
        padding: 5px 0 ;
		width: 100% ;
    }
	.ul_mainnav li a img{
		width: 60% ;
	}
    .ul_mainnav li{
	width: 33% ;
    }
    .ul_mainnav li:nth-child(3){
    	border-right: 0 ;
    }
    .ul_mainnav li:nth-child(4),
    .ul_mainnav li:nth-child(5),
    .ul_mainnav li:nth-child(6){
    	border-top: 1px solid #ddd ;
    }
    .ul_mainnav li a{
        padding: 10px 13px ;
    }
    .ul_mainnav li a img{
    	max-width: 90px ;
    	width: 100% ;
    }
}
/* information========================================= */

#information{
    padding: 15px 0 ;
    margin-bottom: 20px ;
}
.information{
    padding: 15px ;
    max-width: 1050px ;
    background-color: #eee ;
    border-radius: 5px ;
    margin: 0 auto ;
}
.information p{
    margin-bottom: 5px ;
    line-height: 1.3em ;
}
.information p .glyphicon-exclamation-sign{
    color: #ce4256 ;
}
.information a{
    text-decoration: underline ;
}
.information a:hover{
    text-decoration: none ;
}

@media (max-width: 991px){
    #information{
        padding: 5px 0 ;
        margin-bottom: 15px ;
    }
    .information{
        padding: 10px ;
    }
}

/* slider top ============================================== */

#campaign{
    padding: 0 ;
    margin-bottom: 30px ;
}
#slider-campaign,
#slider-campaign-sp{
    max-width: 1060px ;
    margin: 0 auto ;
    padding: 5px ;
    border-radius: 5px ;
    background-color: #fff ;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) ;
	position: relative ;
}
#campaign .sp-image{
    width: 100% !important ;
}
#slider-campaign a img{
    transition: all 0.2s ;
}
#slider-campaign a img:hover{
    opacity: 0.8 ;
}
#slider-campaign .sp-arrow{
    width: 40px ;
    height: 40px ;
}
#campaign .sp-horizontal .sp-previous-arrow,
#campaign .sp-horizontal .sp-previous-arrow:before{
    content: " " !important;
    display: block ;
    background: url(../images/btn_slidearrow.png) no-repeat left top ;
    left: -25px ;
}
#campaign .sp-horizontal .sp-next-arrow,
#campaign .sp-horizontal .sp-next-arrow::before{
    content: " " !important;
    display: block ;
    background: url(../images/btn_slidearrow.png) no-repeat left top ;
    right: -25px ;
}
#campaign .sp-buttons{
    position: absolute ;
    padding: 1px 3px ;
    width: auto ;
	height: 20px ;
    left: 50%;
	bottom: -10px ;
    transform: translateX(-50%);
	background-color: #fff ;
	border-radius: 15px ;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) ;
}
#campaign .sp-button{
    border: 0 ;
    background-color: rgba(53, 130, 202, 0.3) ;
}
#campaign .sp-button:hover,
#campaign .sp-selected-button{
    background-color: #3582ca ;
}
#slider-campaign-sp{
	display: none ;
}
@media (max-width: 991px){
    #campaign{
        margin-bottom: 5px ;
    }
	#slider-campaign{
		display: none ;
	}
	#slider-campaign-sp{
		display: block ;
		padding: 5px ;
        border-radius: 5px ;
	}
	#slider-campaign-sp .sp-arrow{
		height: 30px ;
		width: 30px ;
	}
	#campaign .sp-horizontal .sp-previous-arrow,
	#campaign .sp-horizontal .sp-previous-arrow::before,
	#campaign .sp-horizontal .sp-next-arrow,
	#campaign .sp-horizontal .sp-next-arrow::before{
		background-size: 100% ;
	}
	#campaign .sp-horizontal .sp-previous-arrow,
	#campaign .sp-horizontal .sp-previous-arrow:before{
		left: -17px ;
	}
	#campaign .sp-horizontal .sp-next-arrow,
	#campaign .sp-horizontal .sp-next-arrow::before{
		right: -17px ;
	}
}

/* contents list================================= */

#contentslist{
    padding: 20px 0 ;
}
@media (max-width: 767px){
    #contentslist .container{
        padding-left: 0 ;
        padding-right: 0 ;
    }
}

/* main tab============================ */

.nav-tabs{
    border-bottom: none ;
}
.nav-tabs li{
    width: 50% ;
    padding: 0 5px ;
    text-align: center ;
    margin-bottom: 0 ;
}
.nav-tabs li:first-child{
    text-align: right ;
}
.nav-tabs li:last-child{
    text-align: left ;
}
.nav-tabs li a.active,
.nav-tabs li a.active:focus,
.nav-tabs li a,
.nav-tabs li a:focus{
    text-align: center ;
    width: 95% ;
    display: inline-block ;
    color: #fff ;
    background-color: #3582ca ;
    font-size: 20px ;
    padding: 17px 0 12px 0 ;
    border: none ;
    border-radius: 8px 8px 0 0 ;
    transition: all 0.2s ;
	letter-spacing: 0.1em ;
	line-height: 1em ;
	margin-right: 0 ;
}
.nav-tabs li:last-child a.active,
.nav-tabs li:last-child a.active:focus,
.nav-tabs li:last-child a,
.nav-tabs li:last-child a:focus{
    background-color: #1763aa ;
}
.nav-tabs li a.active:hover,
.nav-tabs li a:hover{
    border: none ;
    color: #fff ;
    background-color: #4898e3 ;
}
.nav-tabs li a span.s{
	font-size: 0.7em ;
}

@media (max-width: 991px){
    .nav-tabs li a.active,
    .nav-tabs li a.active:focus,
    .nav-tabs li a,
    .nav-tabs li a:focus{
        width: 100% ;
        font-size: 15px ;
        padding: 15px 0 12px 0 ;
    }
    .nav-tabs li small{
        display: none ;
    }
}
@media (max-width: 767px){
    .nav-tabs li{
        padding: 0 ;
    }
    .nav-tabs li a.active,
    .nav-tabs li a.active:focus,
    .nav-tabs li a,
    .nav-tabs li a:focus{
        border-radius: 0 ;
    }
}

/* main tab-content =========================== */

#contentslist-book{
    width: 100% ;
    padding: 30px 0 ;
}
#contentslist-book{
    border-top: #3582ca solid 5px ;
}
@media (max-width: 991px){
    #contentslist-book{
        padding: 20px 0 ;
    }
}
@media (max-width: 767px){
    #contentslist-book{
        padding-top: 15px ;
    }
}

/* sub tub (scholol) ====================================== */

#contentslist-list{
    border-top: #1763aa solid 5px ;
}
#contentslist-list .nav-tabs{
    border-bottom: none ;
    width: auto ;
    max-width: 600px ;
    margin: 0 auto ;
    /*display: block ;*/
}
#contentslist-list .nav-tabs li{
    width: 33% ;
    padding: 0 1px ;
    text-align: center ;
}
#contentslist-list .nav-tabs li a,
#contentslist-list .nav-tabs li a:focus{
    text-align: center ;
    width: 100% ;
    display: inline-block ;
    color: #888 ;
    background-color: #f1f1f1 ;
    font-size: 15px ;
    padding: 10px 0 ;
    box-shadow: none ;
	border-radius: 0 ;
	letter-spacing: 0.2em ;
	position: relative ;
    border-bottom: #ddd solid 4px ;
}
#contentslist-list .nav-tabs li.new a::before{
	position: absolute ;
    content: "NEW" ;
    left: 0 ;
    top: -7px ;
    height: 20px ;
    width: 40px ;
    color: #fff ;
    background-color: #fa1e2f ;
    border-radius: 10px ;
    font-size: 10px ;
    font-weight: bold ;
    text-align: center ;
    padding-top: 3px ;
    z-index: 102 ;
	letter-spacing: 0 ;
}
#contentslist-list .nav-tabs li:first-child a{
	border-radius: 3px 0 0 3px ;
}
#contentslist-list .nav-tabs li:last-child a{
	border-radius: 0 3px 3px 0 ;
}
#contentslist-list .nav-tabs li a.active,
#contentslist-list .nav-tabs li a.active:focus,
#contentslist-list .nav-tabs li a.active:hover,
#contentslist-list .nav-tabs li a:hover{
    border-bottom: #333 solid 4px ;
    color: #fff ;
    background-color: #666 ;
}
#contentslist-list .nav-tabs li a.active::after{
	position: absolute ;
	content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #444 ;
}
@media (max-width: 991px){
    #contentslist-list .nav-tabs li a,
    #contentslist-list .nav-tabs li a:focus{
        font-size: 12px ;
        padding: 10px 0 ;
    }
	#contentslist-list .nav-tabs li.new a:before{
		height: 18px ;
		width: 35px ;
		font-size: 9px ;
	}
}
@media (max-width: 767px){
    #contentslist-list .nav-tabs{
        margin-left: -2px ;
        margin-right: -2px ;
    }
    #contentslist-list .nav-tabs li a.active::after{
        content: none ;
    }
}

/* sub tub-content=========================== */

#contentslist-list{
    padding: 30px 0 ;
}
#contentslist-list .tab-content .tab-pane{
    width: 100% ;
    max-width: 900px ;
    margin: 0 auto ;
    margin-top: 30px ;
	border-top: #ddd dotted 1px ;
}
@media (max-width: 991px){
    #contentslist-list{
        padding: 15px ;
    }
}
@media (max-width: 767px){
    #contentslist-list .tab-content .tab-pane{
        margin-top: 15px ;
    }
}

/* contents list book ========================== */

.icongroup{
    background-color: #f1f1f1 ;
    border-radius: 8px ;
    padding: 15px 25px ;
    margin: 0 10px 20px 10px ;
    font-size: 13px ;
}
.icongroup table{
    width: 100% ;
}
.icongroup table th,
.icongroup table td{
    padding: 8px 3px ;
	color: #555 ;
}
.icongroup table th{
    text-align: center ;
}
.icongroup table td{
    padding-left: 20px ;
    position: relative ;
}
.icongroup table td::before{
    position: absolute ;
    content: " " ;
    left: 5px ;
	top: 50% ;
	transform: translateY(-50%) ;
	width: 10px ;
	height: 2px ;
	border-top: #aaa 2px dotted ;
    display: block ;
}
@media (max-width: 991px){
    .icongroup{
        padding: 10px ;
        font-size: 12px ;
        margin-bottom: 10px ;
    }
    .icongroup table th.ico-hidden,
    .icongroup table td.ico-hidden{
        display: none !important;
    }
}
@media (max-width: 767px){
    .icongroup{
        border-radius: 5px ;
        margin-left: 15px ;
        margin-right: 15px ;
    }
    .icongroup table th,
    .icongroup table td{
        padding: 3px 5px ;
    }
    .icongroup table td{
        padding-left: 20px ;
    }
}

#contentslist-book .row{
    margin: 0 ;
}
#contentslist-book .btn_book{
    padding: 10px ;
}
#contentslist-book .btn_book a{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15) ;
    border-radius: 5px ;
    display: flex ;
    position: relative ;
}
/*
#contentslist-book .btn_book a::after{
	height: 100% ;
	width: 100% ;
	border-radius: 5px ;
	border: #2379c9 2px solid ;
	position: absolute ;
	display: block ;
	transition: all 0.3s ;
	content: " " ;
	left: 0 ;
	top: 0 ;
	opacity: 0 ;
}
*/
#contentslist-book .btn_book a .icon{
	height: 100% ;
	width: 100% ;
	border-radius: 5px ;
	border: #2379c9 2px solid ;
	position: absolute ;
	display: block ;
	transition: all 0.3s ;
	/* content: " " ; */
	left: 0 ;
	top: 0 ;
	opacity: 0 ;
}
#contentslist-book .btn_book a:hover::after{
	opacity: 1 ;
}
#contentslist-book .btn_book.new a:before{
    position: absolute ;
    content: "NEW" ;
    left: -5px ;
    top: -7px ;
    height: 20px ;
    width: 40px ;
    color: #fff ;
    background-color: #fa1e2f ;
    border-radius: 10px ;
    font-size: 10px ;
    font-weight: bold ;
    text-align: center ;
    padding-top: 3px ;
    z-index: 102 ;
}
#contentslist-book .btn_book a p{
    margin: 0 ;
}
#contentslist-book .btn_book a .img_book{
    float: left ;
    width: 40% ;
}
#contentslist-book .btn_book a .img_book img{
    border-radius: 5px 0 0 5px ;
    max-width: 100% ;
}
#contentslist-book .btn_book a .btn_book_right{
    float: left ;
    padding: 10px 10px 0 10px ;
    width: 60% ;
}
#contentslist-book .btn_book h3{
    margin: 0 ;
    font-size: 15px ;
    color: #333 ;
	padding-top: 5px ;
    /* height: 45px ; */
    line-height: 1.2em ;
	font-weight: bold ;
	transition: all 0.3s ;
}
#contentslist-book .btn_book h3 small{
    font-size: 13px ;
    color: #555 ;
	font-weight: bold ;
	transition: all 0.3s ;
}
#contentslist-book .btn_book a:hover h3,
#contentslist-book .btn_book a:hover h3 small{
	color: #2379c9 ;
}
#contentslist-book .btn_book .ul_bookcategory{
    list-style-type: none ;
	margin-bottom: 0 ;
    clear: both ;
}
#contentslist-book .btn_book .ul_bookcategory li{
    float: left ;
    padding: 2px ;
}

/* 団体専用============================================ */

#contentslist-book .row .h3{
	margin: 0 ;
}
#contentslist-book .row .h3 h3{
	text-align: center ;
	padding-top: 5px ;
}
#contentslist-book .row.group{
	border-top: #e0e0e0 1px solid ;
	margin-top: 25px ;
	padding-top: 20px ;
}

/* 202004============================================= */
.flexbox-202004{
    padding-top: 30px ;
    display: flex ;
    /*margin: 0 auto ;*/
}
.flexbox-202004 .img{
    width: 33% ;
    text-align: center ;
    padding: 0 5px ;
}
.flexbox-202004 .img a img{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    max-width: 100% ;
}

@media (max-width: 1199px){
    #contentslist-book .btn_book a .img_book{
        width: 23% ;
    }
    #contentslist-book .btn_book a .btn_book_right{
        width: 77% ;
    }
}
@media (max-width: 991px){
    #contentslist-book .btn_book a .img_book{
        width: 30% ;
    }
    #contentslist-book .btn_book a .btn_book_right{
        width: 70% ;
    }
}
@media (max-width: 767px){
    #contentslist-book .btn_book{
        margin-bottom: 0 ;
        padding: 0 15px ;
    }
    #contentslist-book .btn_book a{
        border-radius: 0 ;
        box-shadow: none ;
        padding: 10px ;
        border-bottom: #ddd 1px solid ;
    }
    /*
	#contentslist-book .btn_book a::after{
		position: absolute ;
	    content: "\e080" ;
		font-family: "Glyphicons Halflings";
		background: #2379c9 ;
		color: #fff ;
		height: 18px ;
		width: 18px ;
		border-radius: 50% ;
		border: 0 ;
		right: 10px ;
		left: inherit ;
		top: 50% ;
		transform: translateY(-50%) ;
		padding-top: 3px ;
		text-align: center ;
		font-size: 0.8em ;
		opacity: 1 ;
	}
    */
	#contentslist-book .btn_book a .icon{
		position: absolute ;
		background: #2379c9 ;
		color: #fff ;
		height: 18px ;
		width: 18px ;
		border-radius: 50% ;
		border: 0 ;
		right: 10px ;
		left: inherit ;
		top: 50% ;
		transform: translateY(-50%) ;
		padding-top: 2px ;
		text-align: center ;
		/* font-size: 0.8em ; */
		font-size: 1.2em ;
		opacity: 1 ;
	}
	#contentslist-book .btn_book.new a:before{
		height: 18px ;
		width: 35px ;
        top: 5px ;
        left: 5px ;
	}
    #contentslist-book .btn_book a .btn_book_right{
        width: 78% ;
        padding-top: 15px ;
    }
    #contentslist-book .btn_book a .img_book{
        width: 22% ;
        max-width: 100px ;
        display: block ;
    }
    #contentslist-book .btn_book a .img_book img{
        max-width: 100% ;
        border-radius: 5px ;
    }
    #contentslist-book .btn_book h3{
        font-size: 15px ;
        height: auto ;
		padding-top: 0 ;
		margin-bottom: 5px ;
    }
    #contentslist-book .btn_book .ul_bookcategory{
        float: left ;
        clear: none ;
    }
    #contentslist-book .btn_book .caption{
        padding-top: 30px ;
    }
	#contentslist-book .row .h3 h3 img{
		width: 150px ;
	}
    #contentslist-book .row.group{
        border-top: 0 ;
        margin-top: 0 ;
        padding-top: 0 ;
    }
    /* 202004公開 
    .flexbox-202004{
        display: block ;
    }*/
    .flexbox-202004 .img{
        width: 100% ;
        padding: 10px ;
    }
    .flexbox-202004 .img a img{
        max-width: 280px ;
    }
}

/* contents list - list========================================= */

.contentslist_subject h3{
	display: none ;
}
.contentslist_subject{
    margin-top: 0 ;
}
.table_contentslist{
    width: 100% ;
}
.table_contentslist tr{
    border-bottom: #ddd dotted 1px ;
	position: relative ;
}
.table_contentslist tr:hover{
	cursor: pointer ;
}
.table_contentslist td.new:before{
    margin-right: 5px ;
    padding: 2px 7px ;
    content: "NEW" ;
    color: #fff ;
    background-color: #fa1e2f ;
    border-radius: 10px ;
    font-size: 10px ;
    text-align: center ;
	line-height: 1em ;
}
.table_contentslist th,
.table_contentslist td{
    padding: 15px 10px ;
    font-size: 13px ;
    color: #333 ;
    line-height: 1.3 ;
	transition: all 0.2s ;
}
.table_contentslist th{
    padding-left: 20px ;
    position: relative ;
    width: 13% ;
}
.table_contentslist th:after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    border-right: 14px solid transparent;
}
.table_contentslist td small{
    padding: 0 5px ;
}
.table_contentslist td:last-child{
    width: 8% ;
}
.table_contentslist .td_charge,
.table_contentslist .td_free,
.table_contentslist .td_nouser,
.table_contentslist .td_dantai{
    position: relative ;
}
.table_contentslist .td_charge:before{
    position: absolute ;
    content: url(../images/ico_bookcategory_charge.png);
    left: 5px ;
    top: 50% ;
    transform: translateY(-50%);
}
.table_contentslist .td_charge:after{
    content: "有料" ;
    color: #dd1515 ;
    font-size: 13px ;
    position: absolute ;
    left: 22px ;
    top: 50% ;
    transform: translateY(-50%);
}
.table_contentslist .td_free:before{
    position: absolute ;
    content: url(../images/ico_bookcategory_free.png);
    left: 5px ;
    top: 50% ;
    transform: translateY(-50%);
}
.table_contentslist .td_free:after{
    content: "無料" ;
    color: #167bd0 ;
    font-size: 13px ;
    position: absolute ;
    left: 22px ;
    top: 50% ;
    transform: translateY(-50%);
}
.table_contentslist .td_nouser:before{
    position: absolute ;
    content: url(../images/ico_bookcategory_nouser.png);
    left: 50% ;
    top: 15px ;
    transform: translate(-50%);
}
.table_contentslist .td_dantai:before{
    position: absolute ;
    content: url(../images/ico_bookcategory_dantai.png);
    left: 50% ;
    top: 15px ;
    transform: translate(-50%);
}

/* math====================== */

.contentslist_math .table_contentslist th:after{
    border-top: 14px solid #3ea2ea ;
}
.contentslist_math .table_contentslist tr th{
	color: #3ea2ea ;
}
.contentslist_math .table_contentslist tr:hover th,
.contentslist_math .table_contentslist tr:hover td{
    color: #3ea2ea ;
}

/* eng======================== */

.contentslist_eng .table_contentslist th:after{
    border-top: 14px solid #9c56c1 ;
}
.contentslist_eng .table_contentslist tr th{
	color: #9c56c1 ;
}
.contentslist_eng .table_contentslist tr:hover th,
.contentslist_eng .table_contentslist tr:hover td{
    color: #9c56c1 ;
}

/* sci========================== */

.contentslist_sci .table_contentslist th:after{
    border-top: 14px solid #5fc730 ;
}
.contentslist_sci .table_contentslist tr th{
    color: #5fc730 ;
}
.contentslist_sci .table_contentslist tr:hover th,
.contentslist_sci .table_contentslist tr:hover td{
    color: #5fc730 ;
}

/* so========================== */

.contentslist_so .table_contentslist th:after{
    border-top: 14px solid #f0ad1f ;
}
.contentslist_so .table_contentslist tr th{
    color: #f0ad1f ;
}
.contentslist_so .table_contentslist tr:hover th,
.contentslist_so .table_contentslist tr:hover td{
    color: #f0ad1f ;
}

/* jpn========================== */

.contentslist_jpn .table_contentslist th:after{
    border-top: 14px solid #f08aa9 ;
}
.contentslist_jpn .table_contentslist tr th{
    color: #f08aa9 ;
}
.contentslist_jpn .table_contentslist tr:hover th,
.contentslist_jpn .table_contentslist tr:hover td{
    color: #f08aa9 ;
}

@media (max-width: 991px){
    .contentslist_subject h3{
        clear: both ;
        width: 100% ;
        padding: 5px 0 ;
        font-size: 15px ;
        margin: 0 ;
        text-align: center ;
    }
    .table_contentslist{
        width: 100% ;
    }
    .table_contentslist th{
        display: none ;
    }
    .table_contentslist td{
        position: relative ;
		padding: 15px 0 ;
		line-height: 1.5em ;
		font-size: 12px ;
    }
	.table_contentslist td.new:before{
		padding: 1px 5px ;
		font-size: 9px ;
	}
    .table_contentslist .td_charge:after,
    .table_contentslist .td_free:after,
    .table_contentslist .td_nouser:after{
        display: none ;
    }
    .contentslist_subject{
        border-left: none ;
        margin-top: 5px ;
    }
}

/* sample-movie================================================ */

#sample-movie{
    background-color: #3e6dc4 ;
    padding: 50px 0 ;
}
h2.top{
    font-size: 27px ;
    text-align: center ;
    margin: 0 0 10px 0 ;
    font-weight: bold ;
}
h2.samplemovie{
    color: #fff ;
}
.p_h2under{
    font-size: 14px ;
    text-align: center ;
    margin: 0 0 25px 0 ;
}
.p_h2under_samplemovie{
    color: #fff ;
}
.ul_samplemovie{
    list-style-type: none ;
    width: 100% ;
    border-radius: 3px ;
}
.ul_samplemovie li{
    padding: 3px ;
	width: 11% ;
	float: left ;
}
.ul_samplemovie li:last-child{
	width: 12% ;
}
.ul_samplemovie li a{
    padding: 30px 0 ;
    display: block ;
	width: 100% ;
    text-align: center ;
    color: #fff ;
    font-size: 17px ;
    position: relative ;
    transition: all 0.2s ;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) ;
	border-radius: 5px ;
}
.ul_samplemovie li a::before{
	position: absolute ;
	left: 0 ;
	top: 0 ;
	content: " " ;
	width: 100% ;
	height: 100% ;
	border-radius: 5px ;
	border: rgba(255, 255, 255, 0) 2px solid ;
	transition: all 0.2s ;
}
.ul_samplemovie li a:hover::before{
    border-color:  rgba(255, 255, 255, 0.6) ;
}
/*
.ul_samplemovie li a:after{
    content: "\e072" ;
    font-family: "Glyphicons Halflings";
    position: absolute;
    right: 18px ;
    top: 50% ;
	transform: translateY(-50%);
	font-size: 0.6em ;
}
*/
.ul_samplemovie li a .icon {
    position: absolute;
    right: 18px ;
    top: 50% ;
	transform: translateY(-50%);
	/* font-size: 0.6em; */
}
.ul_samplemovie li:nth-child(1) a{
    background: url(../images/img_samplebtn_01.png) no-repeat left top ;
    background-color: #a270bd ;
}
.ul_samplemovie li:nth-child(2) a{
    background: url(../images/img_samplebtn_02.png) no-repeat left top ;
    background-color: #5ea7db ;
}
.ul_samplemovie li:nth-child(3) a{
    background: url(../images/img_samplebtn_03.png) no-repeat left top ;
    background-color: #38a76c ;
}
.ul_samplemovie li:nth-child(4) a{
    background: url(../images/img_samplebtn_04.png) no-repeat left top ;
    background-color: #4cae61 ;
}
.ul_samplemovie li:nth-child(5) a{
    background: url(../images/img_samplebtn_05.png) no-repeat left top ;
    background-color: #6fb94e ;
}
.ul_samplemovie li:nth-child(6) a{
    background: url(../images/img_samplebtn_06.png) no-repeat left top ;
    background-color: #83bf43 ;
}
.ul_samplemovie li:nth-child(7) a{
    background: url(../images/img_samplebtn_07.png) no-repeat left top ;
    background-color: #db993b ;
}
.ul_samplemovie li:nth-child(8) a{
    background: url(../images/img_samplebtn_08.png) no-repeat left top ;
    background-color: #e8af36 ;
}
.ul_samplemovie li:nth-child(9) a{
    background: url(../images/img_samplebtn_09.png) no-repeat left top ;
    background-color: #e38ea8 ;
}

@media (max-width: 991px){
    h2.top{
        font-size: 20px ;
    }
    .p_h2under{
        font-size: 12px ;
    }
    .ul_samplemovie li a{
        font-size: 14px ;
    }
    .ul_samplemovie li a:after{
        right: 5px ;
    }
}
@media (max-width: 767px){
    .ul_samplemovie{
        box-shadow: none ;
    }
    .ul_samplemovie li,
    .ul_samplemovie li:last-child{
        float: left ;
        width: 50% ;
        padding: 3px ;
    }
    .ul_samplemovie li a{
        border-radius: 3px ;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) ;
    }
    .ul_samplemovie li a{
        padding: 25px 0 ;
    }
}

/* qanda============================================================ */

#qanda{
    padding: 50px 0 ;
    background-color: #f9dd59 ;
}
#qanda .container{
    left: 0 ;
    bottom: -30px ;
}
h2.qanda{
    color: #555 ;
}
h2.qanda:before,
h2.qanda:after{
    content: "";
}
.qanda_block{
    text-align: center ;
}
.img_qanda{
    width: 100% ;
    margin-bottom: 20px ;
    height: 170px ;
}
.img_qanda img{
    max-width: 100% ;
}
.img_qanda_center{
    padding: 50px 0 20px 0 ;
    text-align: center ;
}
.p_qanda{
    margin: 0 -80px 20px -80px ;
    height: 50px ;
}
.btn_qanda a{
    width: 80% ;
    max-width: 280px ;
    padding: 20px 0 ;
    margin: 0 auto ;
    display: block ;
    border-radius: 3px ;
    color: #fff ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    background: linear-gradient(135deg, #1ab4b6, #0a96b9);
    position: relative ;
    transition: all 0.2s ;
}
.btn_qanda a:hover{
    opacity: 0.7 ;
}
.btn_qanda a img{
    position: absolute ;
    top: -15px ;
    left: -15px ;
}
@media (max-width: 991px){
    .img_qanda{
        margin-bottom: 10px ;
        height: auto ;
    }
    .img_qanda img{
        width: 70% ;
        max-width: 280px ;
    }
    .p_qanda{
        margin: 0 0 20px 0 ;
    }
}
@media (max-width: 767px){
    .img_qanda_center{
        padding: 30px 0 ;
    }
    .img_qanda_center img{
        transform: rotate(90deg);
    }
    .p_qanda{
        height: auto ;
    }
}

/* thinkboard player================================================ */

#tbpl{
    padding: 100px 0 50px 0 ;
    background-color: #fff ;
    margin-top: -80px ;
    z-index: 1 ;
}
.tbpl{
    background-color: #eee ;
    padding: 40px 10px ;
}
#tbpl .container .row{
    max-width: 1000px ;
    margin: 0 auto ;
}
h2.top_small{
    font-size: 20px ;
    font-weight: bold ;
    text-align: center ;
    margin-bottom: 5px ;
	margin-top: 0 ;
    color: #333 ;
}
h2.top_small img{
    padding: 0 5px ;
}
.btn_tbpl{
    width: 100% ;
    height: 60px ;
    display: block ;
    margin: 0 auto ;
    padding-top: 23px ;
    background-color: #fff ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    border-radius: 3px ;
    text-align: center ;
    position: relative ;
    font-weight: bold ;
    transition: all 0.2s ;
    margin-bottom: 10px ;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    overflow: hidden;
}
.btn_tbpl:before{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn_tbpl:hover:before,
.btn_tbpl:focus:before,
.btn_tbpl:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 2px;
}
/*
.btn_tbpl:after{
    content: "\e095" ;
    font-family: "Glyphicons Halflings";
    color: rgba(0, 0, 0, 0.2) ;
    position: absolute;
    right: 15px ;
    top: 50% ;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 20px ;
}
*/
.btn_tbpl .icon{
    color: rgba(0, 0, 0, 0.2) ;
    opacity: 0.4;
    position: absolute;
    right: 15px ;
    top: 50% ;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 20px ;
}
.btn_tbpl.windows{
    color: #4898e3 ;
    background-image: url(../images/btn_tbp_windows.png);
    background-repeat: no-repeat ;
    background-position: top left ;
}
.btn_tbpl.windows:before {
    border-color: #4898e3;
}
.btn_tbpl.android{
    color: #6fb94e ;
    background-image: url(../images/btn_tbp_android.png);
    background-repeat: no-repeat ;
    background-position: top left ;
}
.btn_tbpl.android:before {
    border-color: #6fb94e ;
}
.btn_tbpl.ios{
    color: #e38ea8 ;
    background-image: url(../images/btn_tbp_ios.png) ;
    background-repeat: no-repeat ;
    background-position: top left ;
}
.btn_tbpl.ios:before{
    border-color: #e38ea8 ;
}
.btn_tbpl.windows span,
.btn_tbpl.android span,
.btn_tbpl.ios span{
    color: #888 ;
}
@media (max-width: 991px){
    h2.top_small{
        font-size: 15px ;
    }
    h2.top_small img{
        max-height: 20px ;
    }
}

/* news=============================== */

#news{
    padding: 20px 0 80px 0 ;
}
h2.news{
    color: #4898e3 ;
    margin: 0 0 15px 0 ;
}
.ico_news{
    text-align: center ;
    margin-top: 20px ;
}
.news_scrollerea{
    height: 400px ;
    overflow-y: scroll ;
	padding: 0 ;
}
.news_block{
    padding: 20px 10px ;
    line-height: 1.3em ;
	transition: all 0.3s ;
}
.news_block:hover{
	background-color: #f1f1f1 ;
}
.news_block a{
    text-decoration: underline ;
    color: #3e6dc4 ;
}
.news_block a:hover{
    text-decoration: none ;
}
.news_block dl{
    margin-bottom: 0 ;
	font-size: 1.6rem ;
}
.news_block dl dt{
    display: inline ;
    color: #fff ;
    background-color: #4898e3 ;
    padding: 3px 5px ;
    margin-right: 5px ;
    border-radius: 2px ;
	font-size: 0.9em ;
}
.news_block dl dd{
    display: inline ;
    font-weight: bold ;
    color: #333 ;
}
.news_block.new dl dd::before{
    content: "NEW" ;
    height: 17px ;
    width: 37px ;
    color: #fff ;
    background-color: #fa1e2f ;
    border-radius: 10px ;
    font-size: 9px ;
    text-align: center ;
    padding-top: 3px ;
    z-index: 102 ;
	display: inline-block ;
	margin-right: 5px ;
}
.news_block p{
    font-size: 1.3rem ;
    padding-top: 10px ;
    margin-bottom: 0 ;
    color: #777 ;
	line-height: 1.5em ;
}
@media (max-width: 991px){
	.news_block dl{
		font-size: 1.4rem ;
	}
	.news_block p{
		font-size: 1.2rem ;
	}
}

/* 202004 臨時========================= */

.table_contentslist td:last-child{
    display: none ;
}