@charset "UTF-8"; 
.clearfix:after {
    clear: both;
    display: block;
    content: "";
}
html,
body {
    height: 100%;
}
body {
    font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'メイリオ',Meiryo,Osaka,"ＭＳ Ｐゴシック","MS P Gothic",Arial,Helvetica,sans-serif;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fffdf9+0,d7e079+100 */
    background: #fffdf9; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fffdf9 0%, #d7e079 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #fffdf9 0%,#d7e079 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #fffdf9 0%,#d7e079 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffdf9', endColorstr='#d7e079',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    overflow: hidden;
}
#mybook {
    border: 1px solid #ccc;
    cursor: move;
    z-index: 10;
    position: absolute;
    margin: 0 auto;
}
.page img {
    width: 100%;
}
#footer {
    position: fixed;
    box-sizing: border-box;
    z-index: 20;
    bottom: 0px;
    display: table;
    height: 115px;
    padding-top: 10px;
    width: 100%;
    background-color: #d8d85b;
}
#footer div.controls {
    margin: 0 auto;
    display: table;
    padding:5px 0;
}
#footer div.controls img {
    cursor: pointer;
}
#footer div.controls div.left,
#footer div.controls div.right {
    display: table-cell;
    vertical-align: middle;
}
#footer div.controls table {
    margin: 0 auto;
}
#footer div.controls table td {
    vertical-align: middle;
    padding: 2px 3px;
}
#sidebar {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(92, 154, 133, 0.65);
}
#sidebar .panel1,
#sidebar .panel2 {
    width: 215px;
    height: 100%;
    background-color: #ccffcc;
    overflow-y: auto;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    font-size:14px;
    overflow-y:scroll;
}
#sidebar .panel1 ul li.active {
    background-color: #e06371;
}
#sidebar .panel1 ul li.active a {
    color:#fff;
}
#sidebar .panel2 ul li {
    width: 46%;
    float: left;
    padding: 5px 2% 5px;
}
#sidebar .panel2 ul li.active {
    background-color: #e06371;
}
#sidebar .panel2 ul li img {
    width: 100%;
}
#sidebar .panel1 ul li {
    line-height: 1.2;
}
#sidebar .panel1 ul li a,
#sidebar .panel1 ul li span {
    color: #555;
    display: block;
    text-decoration: none;
    padding:12px 5px;
    border-bottom:3px solid #fff;
    cursor: pointer;
}
#sidebar .panel1 ul li a:hover{
    background-color: #FFCC99;
}
#sidebar .panel1 .btn  {
    background-image: url(../parts/list_title.png);
    background-position: right 5px top 12px;
    background-repeat: no-repeat;
}
#sidebar .panel1 .btn:hover {
    background-color: #FFCC99;
}
#sidebar .panel1 .btn.open  {
    background-image:url(../parts/list_title2.png);
    background-position: right 5px top 16px;
}
#sidebar .panel1 .second {
    background-color: #66FF99;
}
#sidebar .panel1 .second ul li a:hover {
    background-color: #92E4FA;
}
#slider {
    width: 940px;
    margin: 0 auto;
}
#preview img {
    position: absolute;
    z-index: 200;
    top: -106px;
    left: -60px;
    width: 120px;
    height: auto;
    border: #666 solid 5px;
    box-shadow: 3px 3px 6px #333;
    display: none;
}
.loading {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    color: #000;
    font-size: 50px;
}
.loading p {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -42px;
    text-align: center;
}
.loading p * {
    vertical-align: middle;
}