@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=EB+Garamond);

/* --------------------------------------------------------------


pre


-----------------------------------------------------------------*/
html {
   background: url(../img/pre/bg1.jpg);
}
body {
   color: #231815;
   /*background: url(../img/pre/bg2.jpg) no-repeat center top;*/
}

#container{
   position: relative;
   overflow: hidden;
   min-width: 960px;
}

.contents{
   position: relative;
   width: 960px;
   margin: 70px auto 0;
   overflow: hidden;
   zoom: 1;
}

#main{
   height: 830px;
   background: #fff url(../img/pre/main2.png) no-repeat center top;
   margin-top: 0;
}
#main .contents{
   width: 1000px;
   height: 830px;
   margin-top: 0;
   overflow: visible;
}
#main h1{display: none;}

#main .topics-box{
   position: absolute;
   width: 300px;
   height: 200px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   overflow: hidden;
   zoom: 1;
}
#main .topics-box h1{
   display: block !important;
   height: 27px;
   line-height: 27px;
   color: #fff;
   /*font-family: serif;*/
   text-align: center;
   letter-spacing: 1px;
}
#main .topics-box .contents{
   width: 286px;
   height: 166px;
   background: #fff;
   margin-top: 0px;
}
#main .topics-box .topics{
   width: 286px;
   height: 162px;
   overflow: scroll;
}
#main .topics-box .topics .item{
   line-height: 1.5;
   font-size: 10px;
   margin-left: 7px;
   padding: 10px 0;
   border-bottom: solid 1px #ddd;
}


#twitter-topics{
   top: 600px;
   left: 440px;
   background: #aacd06;
}
#twitter-topics .icon{
   float: left;
   width: 63px;
   padding-top: 1px;
}
#twitter-topics .icon img{
   display: block;
   width: 62px;
   height: auto;
   border: solid 1px #ddd;
   margin-left: 1px;
}
#twitter-topics .topics{
   float: right;
   width: 223px !important;
   height: 162px !important;
}
#twitter-topics .topics .item{
   width: 200px;
   line-height: 1.2;
   padding: 5px 0 !important;
}
#twitter-topics .topics .item a{
   color: #247575;
}
#twitter-topics .topics .item p{
   color: #777;
}

#news-topics{
   top: 600px;
   left: 750px;
   background: #f08200;
}
#news-topics .topics .item{
   width: 272px;
}
#news-topics .topics .item .date{
   color: #f08200;
}
#news-topics .topics .item .text{
   color: #777;
   margin-top: 3px;
}

/*===================
TYPE2
===================*/
.type2 #main{
   background-image: url(../img/pre/main-type2.png);
}
.type2 #main .topics-box{
   height: 150px;
}
.type2 #main .topics-box .contents{
   height: 116px;
}
.type2 #twitter-topics,
.type2 #news-topics{
   top: 650px;
}
.type2 #twitter-topics .topics,
.type2 #news-topics .topics{
   height: 117px !important;
}

/*===================
TYPE3
===================*/
.type3 #main{
   background-image: url(../img/pre/main-type3.png);
}
.type3 #main .topics-box{
   width: 410px;
   height: 150px;
}
.type3 #main .topics-box .contents{
   width: 396px;
   height: 116px;
}
.type3 #main .topics-box .topics{
   height: 116px !important;
}
.type3 #twitter-topics,
.type3 #news-topics{
   left: 590px;
}
.type3 #twitter-topics{
   top: 494px;
}
.type3 #news-topics{
   top: 655px;
}
.type3 #twitter-topics .topics{
   width: 333px !important;
}
.type3 #twitter-topics .topics .item{
   width: 310px;
}
.type3 #main #news-topics .topics{
   width: 396px;
}
.type3 #main #news-topics .topics .item{
   width: 382px;
}

/*===================
TYPE4
===================*/
.type4 #main{
   background-image: url(../img/pre/main-type4.png);
}
.type4 #main .topics-box{
   height: 150px;
}
.type4 #main .topics-box .contents{
   height: 116px;
}
.type4 #main .topics-box .topics{
   height: 116px !important;
}
.type4 #twitter-topics,
.type4 #news-topics{
   left: 655px;
}
.type4 #twitter-topics{
   top: 494px;
}
.type4 #news-topics{
   top: 655px;
}

/*===================
TYPE5
===================*/
.type5 #main{
   background-image: url(../img/pre/main-type5.png);
}
.type5 #main .topics-box{
   width: 410px;
   height: 150px;
}
.type5 #main .topics-box .contents{
   width: 396px;
   height: 116px;
}
.type5 #main .topics-box .topics{
   height: 116px !important;
}
.type5 #twitter-topics,
.type5 #news-topics{
   top: 650px;
}
.type5 #twitter-topics{
   left: 50%;
   margin-left: -420px;
}
.type5 #news-topics{
   left: 50%;
   margin-left: 10px;
}
.type5 #twitter-topics .topics{
   width: 333px !important;
}
.type5 #twitter-topics .topics .item{
   width: 310px;
}
.type5 #main #news-topics .topics{
   width: 396px;
}
.type5 #main #news-topics .topics .item{
   width: 382px;
}


#banner{
   text-align: center;
}


#staff{
   width: 800px;
   height: 535px;
   background: url(../img/pre/staff2.png) no-repeat center top;
   margin-top: 75px;
}
#staff *{display: none;}

#intro{
   height: 205px;
   background: url(../img/pre/intro.png) no-repeat center top;
}
#intro *{display: none;}

#charactor{
   width: 100%;
   text-align: center;
}
#charactor .chara{
   display: inline-block;
   width: 345px;
   overflow: hidden;
   zoom: 1;
   margin-right: 20px;
   margin-top: 20px;
   text-align: left;
}
#charactor .chara .image{
   float: left;
   width: 125px;
}
#charactor .chara .exp{
   float: right;
   width: 205px;
   margin-top: 120px;
}
#charactor .chara .exp .name{
   /*font-family: serif;*/
   font-size: 16px;
   color: #498888;
   letter-spacing: 2px;
}
#charactor .chara .exp .name span{
   font-size: 10px;
   letter-spacing: 0px;
}
#charactor .chara .exp .cv{
   color: #777;
   font-size: 12px;
   margin-bottom: 5px;
}
#charactor .chara .exp .btn{
   position: relative;
   margin-top: 14px
}
#charactor .chara .exp .btn a{
   position: relative;
   display: inline-block;
   text-decoration: none;
   color: #fff;
   font-size: 12px;
   padding: 3px 9px;
   background: #91babf;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}
#charactor .chara .exp .btn a:hover{
   background: #231815;
}
#charactor .chara .exp .btn span{
   position: absolute;
   left: 43px;
   top: -15px;
   display: block;
   color: #fff;
   font-size: 9px;
   line-height: 1;
   padding: 10px 3px 8px;
   background: #eb6d9a;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}
#charactor .caution{
   clear: both;
   padding-top: 25px;
   text-align: center;
   font-size: 11px;
}
/*#charactor #haruta{float: left;}
#charactor #chika{float: right;}*/
#charactor .main-charactor{
   width: 900px;
   margin: auto;
}
#charactor #haruta,
#charactor #chika{
   width: 400px;
}
#charactor #haruta .exp,
#charactor #chika .exp{
   width: 260px;
}

#charactor #haruta    .exp{margin-top: 80px;}
#charactor #chika     .exp{margin-top: 65px;}
#charactor #kusakabe  .exp{margin-top: 90px;}
#charactor #katagiri  .exp{margin-top: 100px;}
#charactor #narushima .exp{margin-top: 100px;}
#charactor #malen     .exp{margin-top: 90px;}
#charactor #serizawa  .exp{margin-top: 100px;}
#charactor #kaiyu     .exp{margin-top: 100px;}
#charactor #goto      .exp{margin-top: 90px;}


#comment{
   height: 218px;
   background: url(../img/pre/comment.png) no-repeat center top;
}
#comment *{display: none;}

#books .title{
   height: 85px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/pre/books-title.png) no-repeat center top;
}
#books .items .book .title{
   height: auto;
   text-indent: 0;
   background: none;
}
#books .sub-title{
   text-align: center;
   font-family: serif;
   font-size: 18px;
   margin-top: 25px;
}
#books .items{
   text-align: center;
   overflow: hidden;
   zoom: 1;
   margin-top: 25px;
   padding-bottom: 20px;
   border-bottom: dotted 3px #dce4e6;
}
#books .items .book{
   display: inline-block;
   width: 150px;
   margin: 0 10px 0;
}
#books .items .book .exp{
   text-align: center;
   line-height: 1;
}
#books .items .book .exp .sub-title{
   font-size: 10px;
   color: #777777;
   margin-top: 4px;
}
#books .items .book .exp .title{
   font-size: 14px;
   color: #000000;
   margin-top: 7px;
}
#books .push{
   height: 60px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/pre/books-push.png) no-repeat center top;
   margin-top: 25px;
}
#books .push2{
   height: 216px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/pre/books-push-comic.png) no-repeat center top;
   margin-top: 15px;
}
#books .push3{
   height: 230px;
   background: url(../img/pre/books-push-nobel.png) no-repeat center top;
   margin-top: 25px;
}
#books .push3 a{
   display: block;
   width: 610px;
   height: 230px;
   text-indent: -9999px;
   overflow: hidden;
   margin: auto;
}

#movie{}
#movie .title{
   height: 59px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/pre/movie-title.png) no-repeat center top;
}
#movie .container{
   overflow: hidden;
   zoom: 1;
   text-align: center;
}
#movie .container .item{
   display: inline-block;
   width: 350px;
   margin: 30px 0px 0 0;
}
#movie .container .item a:hover{
   background: #fff;
}
#movie .container .item a:hover img{
   filter: alpha(opacity=830px0);
   -khtml-opacity: 0.8;
   -moz-opacity: 0.8;
   opacity:0.8;
}
#movie .container .item .name{
   font-size: 14px;
   margin-top: 10px;
}

#foot{
   text-align: center;
   padding-top: 65px;
   background: url(../img/pre/dot.png) no-repeat center top;
}
#foot .sns-twitter a:hover img{
   filter: alpha(opacity=90);
   -khtml-opacity: 0.9;
   -moz-opacity: 0.9;
   opacity:0.9;
}
#foot .copyright{
   /*font-family: serif;*/
   color: #498888;
   letter-spacing: 2px;
   padding: 30px 0;
}

#gnavi{
   position: absolute;
   top: 830px;
   left: 0;
   width: 100%;
   background-color: #231815;
}
#gnavi.fixed{
   position: fixed;
   top: 0;
}
#gnavi .contents{
   margin-top: 0;
   height: auto;
   overflow: visible;
}
#gnavi ul{
   text-align: center;
   padding: 7px 0 6px;
}
#gnavi ul li{
   position: relative;
   display: inline-block;
   margin-right: 30px;
}
#gnavi ul li a{
   font-size: 14px;
   font-family: "EB Garamond" !important;
   font-style: normal;
   font-weight: 400;
   color: #fff;
   letter-spacing: 2px;
   text-decoration: none;
}
#gnavi ul li a:visited,
#gnavi ul li a:active{
   color: #fff;
}

#gnavi ul li .new{
   position: absolute;
   left: 53px;
   top: -15px;
   display: block;
   color: #fff;
   font-size: 9px;
   line-height: 1;
   padding: 10px 3px 8px;
   background: #eb6d9a;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}

#movie-box{display: none;}