@charset "utf-8";

/* common====================================================================== */

body {
    background-color: #fff ;
    background-image: url(../images/bg_topborder.png) ;
    background-repeat: repeat-x ;
    background-position: top ;
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-size: 14px ;
    line-height: 1em ;
    color: #333 ;
}

.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}  

.container{
    width: 980px ;
    padding: 0 10px ;
    margin: 0 auto ;
}

*:hover{
    transition: all 0.2s ;
}

/* haed============================================================================ */

#head{
    background-image: url(../images/bg_menu.png) ;
    background-position: bottom ; 
    background-repeat: repeat-x ;
    padding: 0 0 10px 0 ;
    min-width: 1000px ;
}

.head{
    padding: 30px 0 0 0 ;
    background-image: url(../images/img_eyecatch.jpg) ;
    background-position: right 100px ;
    background-repeat: no-repeat ;
}

.head_left{
    float: left ;
    width: 400px ;
}

h1{
    margin: 0 0 20px 0 ;
}

.head_right{
    width: 500px ;
    float: right ;
    position: relative ;
}

.topnav{
    position: absolute ;
    top: 0 ;
    right: 60px ;
}

.topnav a li{
    float: left ;
    padding: 5px 15px 0px 15px ;
    height: 25px ;
    border-radius: 15px ;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2) ;
    background-color: #2babb0 ;
    color: #fff ;
    margin: 0 0 0 10px ;
}

.topnav a li:hover{
    background-color: #4a8ff7 ;
}

.head_right h2{
    position: absolute ;
    top: 470px ;
    right: 130px ;
}

/* loginbox================================================================== */

.loginbox{
    width: 260px ;
    height: 70px ;
    padding: 20px ;
    margin: 0 0 10px 30px ;
    border: 3px solid #2370e3 ;
    color: #2370e3 ;
    background-color: #fffec4 ;
    border-radius: 10px ;
}
.loginbox img:hover{
    opacity: 0.8 ;
}

.login{
    background-image: url(../images/bg_login.png) ;
    background-repeat: no-repeat ;
    background-position: 20px center ;
    text-align: right ;
}

.login p{
    margin: 0 0 10px 0 ;
}

.logout_left {
    width: 140px ;
    float: left ;
}
.logout p{
    margin: 0 0 10px 0 ;
}

.logout ul li{
    float: right ;
    margin-bottom: 10px ;
}

.logintext{
    color: #2370e3 ;
    text-align: center ;
    margin: 0 0 10px 0 ; 
}

/* topmanu=================================================================== */

.menu_common{
    border-radius: 10px ;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2) ;
    padding: 10px ;
    margin: 0 0 10px 0 ;
    position: relative ;
}

.menu_common h3{
    position: absolute ;
    top: 45% ;
    left: 20px ;
    width: 50px ;
    color: #fff ;
    font-size: 23px ;
    font-weight: bold ;
    text-align: center ;
}

.menu_common dl{
    float: left ;
    padding: 0 20px ;
    width: 240px ;
}

.menu_common dl:last-child{
    border: none ;
}

.menu_common dt{
    float: left ;
    padding-top: 10px ;
    font-size: 18px ;
    font-weight: bold ;
}

.menu_common dd a{
    color: #555 ;
    float:  right ;
    display: block ;
    padding: 7px 0 ;
    margin: 0 0 10px 0 ;
    box-shadow: 2px 2px 4px #aaa ;
    width: 190px ;
    border-radius: 5px ;
    text-align: center ;
    font-size: 15px ;
}
.menu_common dd.n a::before{
	content: "無料公開中" ;
	color: #e02f2f ;
	margin-right: 5px ;
	font-size: 12px ;
	font-weight: bold ;
}

.menu_whiteerea{
    float: right ;
    background-color: #fff ;
    padding: 15px ;
}

/* eng */

.menu_eng{
    background-color: #9b44a0 ;
}
.menu_eng dl{
    border-right: dotted 3px #d2add0 ;
}
.menu_eng dt{
    color: #9b44a0 ;
}
.menu_eng dd a{
    background-color: #fbe5fc ;
}
.menu_eng dd a:hover{
    background-color: #9b44a0 ;
    color: #fff ;
}

/* math */

.menu_math{
    background-color: #4985c3 ;
}
.menu_math dl{
    border-right: dotted 3px #9ec3e7 ;
}
.menu_math dt{
    color: #4985c3 ;
}
.menu_math dd a{
    background-color: #ecf5ff ;
}
.menu_math dd a:hover{
    background-color: #4985c3 ;
    color: #fff ;
}

/* sci */

.menu_sci{
    background-color: #10a59d ;
}
.menu_sci dl{
    border-right: dotted 3px #ade8e5 ;
}
.menu_sci dt{
    color: #10a59d ;
}
.menu_sci dd a{
    background-color: #e4fffe ;
}
.menu_sci dd a:hover{
    background-color: #10a59d ;
    color: #fff ;
}

/* so */

.menu_so{
    background-color: #d87329 ;
}
.menu_so dl{
    border-right: dotted 3px #f4b98f ;
}
.menu_so dt{
    color: #d87329 ;
}
.menu_so dd a{
    background-color: #fff6de ;
}
.menu_so dd a:hover{
    background-color: #d87329 ;
    color: #fff ;
}


/* sample========================================================================= */

#sample{
    padding: 30px 0 50px 0 ;
}

#sample h2{
    text-align: center ;
    vertical-align: bottom ;
    font-size: 15px ;
    font-weight: normal ;
    margin: 20px 0 ;
}

.btn_sample{
    display: inline-block ;
    position: relative ;
    color: #fff ;
    width: 220px ;
    height: 140px ;
    float: left ;
    margin-right: 30px ;
    text-align: center ;
}

.btn_sample:last-child{
    margin: 0 ;
}

.btn_sample p{
    position: absolute ;
    bottom: 0px ;
    text-align: left ;
    padding: 20px 0 0 20px ;
    width: 210px ;
    height: 30px ;
    border-radius: 5px ;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2) ;
    z-index: 1 ;
}

.btn_sample p:after{
    position: absolute ;
    content: url(../images/point_arrow_r.png) ;
    right: 10px ;
    top: auto ;
}

.btn_sample img{
    transition: all 0.1s ;
}

.btn_sample:hover img{
    -webkit-transform: translate(0px,-15px) ; 
    -moz-transform: translate(0px,-15px) ; 
    transform: translate(0px,-15px) ; 
    z-index: 2 ;
}

.btn_sample p span{
    font-weight: bold ;
    font-size: 20px ;
}

.btn_sampleeng p{
    background-color: #9b44a0 ;
}

.btn_samplemath p{
    background-color: #4985c3 ;
}

.btn_samplesci p{
    background-color: #10a59d ;
}

.btn_sampleso p{
    background-color: #d87329 ;
}

/* howto========================================================================= */

#howto{
    padding: 70px 0 10px 0 ;
}

.howtobox{
    background-color: #2babb0 ;
    background-image: url(../images/bg_border_op10.png) ;
    background-repeat: repeat ; 
    padding: 30px 30px 10px 30px ;
    border-radius: 20px ; 
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2) ;
    position: relative
}

.howtobox h2{
    text-align: center ;
    top: -40px ;
    left: 120px ;
    position: absolute;
}

.howtobox_common{
    background-color: #fff ;
    border-radius: 10px ;
    padding: 20px ;
    line-height: 1.5em ;
    margin-bottom: 20px ;
}

.howtobox_common a{
    transition: all 0.1s ;
}

.howtobox_common a:hover{
    opacity: 0.8 ;
}

.howtobox_common img{
    float: left ;
    margin-right: 10px ;
}

.howtobox_common h3{
    color: #2370e3 ;
    font-size: 20px ;
    margin: 15px 0 ;
}

.howtobox_common h3 img{
    vertical-align: bottom ;
    margin-top: -20px ;
}

.howtobox_common p{
    margin-bottom: 10px ;
    font-size: 13px ;
}

.btn_howto_user a{
    display: inline-block ;
    background-color: #e6922f ;
    padding: 10px 75px ;
    border-radius: 5px ;
    color: #fff ;
    box-shadow: 2px 2px 4px #aaa ;
    margin: 0 5px 0 0 ;
}

.btn_howto_tb a{
    display: inline-block ;
    background-color: #1e88ba ;
    padding: 10px 80px ;
    border-radius: 5px ;
    color: #fff ;
    box-shadow: 2px 2px 4px #aaa ;
}

.btn_howto_qanda a{
    display: inline-block ;
    background-color: #e0578e ;
    padding: 10px 20px ;
    border-radius: 5px ;
    color: #fff ;
    box-shadow: 2px 2px 4px #aaa ;
    margin: 0 5px 0 0 ;
}

.howtobox_w50{
    width: 410px ;
    float: left ;
    margin-right: 20px ;
}

.howtobox_w50:last-child{
    margin-right: 0 ;
}

/* banner==================================================================== */

#banner{
    /* background-color: #eee ; */
    padding: 40px 0 ;
}

.bannererea h2{
    text-align: center ;
    margin: 0 0 10px 0 ;
}

.bannererea ul{
    display: inline-block ;
    padding: 0 40px ;
}

.bannererea ul a{
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2) ;
    float: left ;
    margin: 0 20px 0 0 ;
    transition: all 0.1s ;
}

.bannererea ul a:hover{
    -webkit-transform: translate(-3px,-3px);  
    -moz-transform: translate(-3px,-3px);
    transform: translate(-3px,-3px);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2) ;
}

.bannererea ul a:last-child{
    margin: 0 ;
}