@charset "UTF-8";
body {font-family: 'メイリオ','Hidagino Kaku Gothic Pro', sans-serif;}
body {background-color:black;
    text-align: center;
    margin:0;
    }
a{text-decoration: none;}



header {text-align: center;
    background-image: url(images/background_pattern2.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    margin-bottom: 70px;
    position: relative;
    margin-left:auto;margin-right:auto;

}


header p {color:white;font-weight: bold;position:relative;}

header #banner{margin-top:15px;
    height:500px;

}

header #banner img{width:auto;height:470px;
}
div #cover{position:relative;width:330px;margin:0 auto;}
div #cover #newicon{width:70px;height:auto;position:absolute;right:-35px;top:-5px;}

header #line{font-family: serif;
    position:absolute;
    top:110px;
    left:67%;
    width:370px;
    text-align: left;
    line-height: 2.5em;
}

header button{background-color:black;border:none;margin:5px;
    }

#subbanner{
    width:100%;
    border-top:1px #660000 solid;
    border-bottom:1px #660000 solid;
    margin-bottom:10px;
    background-color:black;
    position:relative;
}

header dl#info
    {border-left:dotted 1px #aaa;
        border-right:dotted 1px #aaa;
        padding-left:3px;
        padding-right:5px;
        position:absolute;
        top:-2px;
        left:20px;
        text-align:left;
        color:#999;}
header dl#info dt{}
header dl#info dt span{position:absolute;left:5em;display:none;width:15em;}
header dl#info dt:hover{border-bottom:dotted 1px #aaa;}
header dl#info dt:hover span{display:inline;color:white;background-color:#aaa;padding:5px;border-radius:5px;}
header dl#info dt:active{border-bottom:dotted 1px #aaa;}
header dl#info dt:active span{display:inline;color:white;background-color:#aaa;padding:5px;border-radius:5px;}

/*2冊用のヘッダー*/
#nextbook{
    height:250px;
    width:auto;
}
#nextbook a img{
max-height: 100%;

}



/*小さいヘッダー*/

header.small #banner{visibility: hidden;}
header.small button{visibility: hidden;}
header.small #subbanner{height:64px;position:fixed;top:0;left:0;}
#subbanner img:hover{opacity:0.6;}


header#fix{position:relative;}
header#fix #subbanner{position:fixed;top:0;}


menu{
    margin:150px auto 50px auto;
    padding-right:35px;
    position:relative;}
menu button{width:100px;outline:none;text-decoration:none;font-size:16px;}
menu button#long{
    background-color:#D3D3E3;
    border:#D3D3E3;
    border-right:2px solid white;
    border-radius:16px 0 0 16px;
}
menu button#short{
    background-color:#8486A4;
    border:#D3D3E3;
    border-left:2px solid white;
    border-radius:0 16px 16px 0;
}
menu button#sslong{
    background-color:#8486A4;
    border:#D3D3E3;
    border-right:2px solid white;
    border-radius:16px 0 0 16px;
}
menu button#ssshort{
    background-color:#D3D3E3;
    border:#D3D3E3;
    border-left:2px solid white;
    border-radius:0 16px 16px 0;
}
menu button:hover{
    opacity:0.8;
}
menu button:active{
    -webkit-transform:translate(0,2px);
    -moz-transform:translate(0,2px);
    transform:translate(0,2px);
    border-bottom:none;
    opacity:1;
}
menu button.buttonoff{
    pointer-events: none;
}



div #sort{
        position:static;
        text-align: center;
        margin:20px auto 50px auto;}

#sort button{height:36px;
    font-size:16px;
    padding:2px 10px;
    box-shadow:inset 0px 0px 14px -3px #1c1b18;
	background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color:#eae0c2;
	border-radius:29px;
	border:1px solid #333029;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-weight:bold;
	text-decoration:none;
    outline:none;}

#sort button.selected{
    height:36px;
    padding:2px 10px;
	background:linear-gradient(to bottom, #dec3b9 5%, #94633e 100%);
	background-color:#dec3b9;
	border:2px solid #333029;
    border-radius:29px;
}


#sort button:hover {
	background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color:#ccc2a6;
}
#sort button:active {
	position:relative;
	top:1px;
}
#sort button.selected:hover{
	background:linear-gradient(to bottom, #dec3b9 5%, #94633e 100%);
	background-color:#dec3b9;
	border:2px solid #333029;
}

article.bookshelf{border-top:3px solid #B0A481;
    border-bottom:3px solid #B0A481;
    width:700px;
    margin:15px auto 40px auto;
    padding:8px 25px;
    background-color:white;
    position:relative;
    display:flex;
}




aside.end {
 position:absolute;top:17px;right:15px;
    font-size:small;
  border-radius: 50%;
 background-color:#D1D1FF;
    height:60px;
    width:60px;
  -webkit-box-shadow: 0 3px 0 #ADADFF;
  box-shadow: 0 3px 0 #ADADFF;
    color:#717199;
    line-height: 1.4em;
    
}

aside.newbook
 {
 position:absolute;top:17px;right:15px;
    font-size:18px;
     font-weight:600;
  border-radius: 50%;
 background-color:#ECD670;
     
    height:60px;
    width:60px;
  -webkit-box-shadow: 0 3px 0 #9A9065;
  box-shadow: 0 3px 0 #9A9065;
    color:#AA9E6F;
    line-height: 1.2em;
    
}


article.bookshelf img{width:220px;height:auto;}
ul{list-style: none;text-align: left;}
article.bookshelf ul li.title{
        font-size:x-large;font-weight:700;
        margin-top:0px;
        color:#777;
}
article.bookshelf ul li.title span{font-weight:300;font-size:small;color:#888;margin-left:15px;}

img.maincover{
    border-right:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    }

article.bookshelf li.author{
        color:#777;
        font-size:larger;
        font-weight:600;
        border-bottom:1px solid #B0A481;
        margin-bottom:5px;}
article.bookshelf li.info{
        margin-bottom:10px;
    
        }
article.bookshelf li.summary{
    border-bottom:3px solid #ddd;
        }
article.bookshelf li.sequel{padding:5px;
    overflow: visible;
width: 100%;
}
article.bookshelf li.sequel img{height:150px;width:auto;transition-duration: 0.5s;outline:solid 1px #ddd;}

article.bookshelf li.sequel img:hover {
transform: scale(1.8,1.8);
transition-duration: 0.5s;
outline:solid 1px #fff;
}

.deep{background-image:url("images/log_deepedge2.png");
background-position: right top;
background-repeat: no-repeat;
background-color:#BBB;
}



article.shortpage{
display:flex;
    flex-wrap: wrap;
}
div.shortinfo{color:white;width:80%;margin:5px auto;}
div.ss{
 margin:20px auto;
    background-color:white;
    display:flex;
    height:auto;
    border:2px solid #B0A481;
}
div.ss img{width:150px;height:auto;margin:5px;border:1px solid #ccc;}
div.ss ul{padding:10px;width:400px;}
div.ss ul li:first-child{font-size:larger;font-weight:600;border-bottom:1px solid #B0A481;margin-bottom:10px;color:#776534;}
div.ss#nextss{width:70%}

/*一覧表示（画像のみ）*/
article#contents.list{

}
article#contents.list article.bookshelf{background-color:black;border:none;width:auto;display:inline-flex;margin:0;}
article#contents.list ul{margin:0;padding:0;}
article#contents.list aside{display:none;}
article#contents.list li.title{display:none;}
article#contents.list li.author{display:none;}
article#contents.list li.info{display:none;}
article#contents.list li.summary{display:none;}
article#contents.list img{width:auto;height:200px;margin:0;outline:solid 1px #666;}
article#contents.list li.sequel{margin:0;position:relative;top:-4px;}
article#contents.list li.sequel img:hover{transform: scale(1,1);}
article#contents.list img:hover{}


footer{height:60px;margin-top:100px;}
footer img{height:50px;}

.mini_icon{
    border-radius: 5px;width:40px;height:auto;

}

@media(max-width:1024px){
 header #banner{width:90%;height:600px;padding:0 15px;text-align: center}
    div #cover{width:89%;}
    header #banner img#coverimg{width:90%;height:auto;} header div #cover #newicon{height:60px;width:auto;right:10px;top:-5px;}
    header #line{position:static;margin:5px auto;text-align: center;width:auto;padding:3px 18px;line-height: normal;}
    #subbanner{height:60px;max-width: 900px;}
    #subbanner img{width:400px;}
    header dl#info{width:4em;top:-10px;left:15px;position:flex;top:3px left:5px;}

    header dl#info dt span{top:50px;left:2em;width:15em;}
    article.bookshelf{max-width:90%;width:70%;display:block;}
    article #contents{width:100%;}
    article.shoortpage{position:static;width:100%;}
    
    div.ss{display:flex;flex-wrap:wrap;width:95%;}
    div.ss ul{margin-left:5px;width:95%;}
    div.ss ul li{padding:3px;}
    div.ss#nextss{width:100%;display:block;}
    div.ss#nextss ul li{width:90%;}

    
}

@media(min-width:1600px){
            header #line{left:62%;}
}
    

#boxset{
    display:flex;
    justify-content: center;
    color:white;
}
#boxset img{
}