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


body {
	background:url("../img/bg.jpg")#fff;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	width: 100%;
	min-width: 320px;
	margin:0 auto;
}

main img{vertical-align: bottom;}

.midashi{color: #fff;
    text-align: center;
        padding: 12px 0;
    background: #21679e;
    line-height: 1;}

.midashi img{max-width: 412px;margin: 0 auto;}


li {
list-style-type: none;
}
	.PConly {display: block;}
	.SPonly {display: none;}

html{word-break: break-all;}
img{width: 100%; height:auto;}

.active{
transition: 0.3s;
  opacity: 1!important;
  visibility: visible;
}
/* --------------------------------------- */

/*ナビゲーション--------------------------------- */
#header {
	height:50px;
	background-color:#FFFFFF;
	-moz-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-webkit-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
-ms-box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
box-shadow: 0px 2px 11px -4px rgba(0, 7, 64, 0.67);
	position: relative;
	z-index: 30;
}

#obi {
	height:50px;
	margin:0 auto;
	overflow: hidden;
}

#obi h1{float:left; padding-left: 1%;}

.snsBox{
	float: right;
    width: auto;height: 52px;
    vertical-align: top;}
.snsBox a{width: 52px; height: 52px; display: inline-block;}


.movie{position: relative;
    width: 100%;
    padding-top: 50.6%;}

.movie iframe{position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;}

.story{max-width: 1298px; margin: 0 auto;}

#books{overflow: hidden;}
.books{width: 94%; max-width: 950px; margin:0 auto;position: relative;padding: 6rem 0;}
.books:before{content: "";
    position: absolute;
    z-index: -1;
    background-image: url(../img/bookBg.png);
    background-repeat: no-repeat;
    width: 53%;
    padding-top: 88%;
    top: 1%;
    right: -10%;
    background-size: contain;}

.books-cont{display: flex;align-items: flex-end;padding: 0 4%; margin-bottom: 4rem;}
.books-cont:last-child{margin-bottom: 0;}

.bookImg{width: 47%;margin-right: 3%; box-sizing: border-box;border: 2px solid #a68045;}
.bookBtn{width: 50%;}
.bookBtn li{margin-top: 1rem;}

#pv{background-image: url("../img/pcbg_pc.jpg"); background-repeat: no-repeat;background-size: cover; background-position: top center;padding:0 0 9% 0;}
.pvImg{max-width: 847px; width: 85%; margin: 0 auto; padding-top: 9%;}

.LinkBtn{max-width: 800px; width: 86%; margin: 0 auto;padding: 4% 0 3% 0;}
.LinkBtn a{margin-bottom: 20px;display: block;}

#top_btn{max-width: 302px;margin: 0 auto; padding-bottom: 3%;cursor: pointer;}

.slide{overflow: hidden;position: relative; max-width: 900px; width: 96%; margin: 0 auto; padding: 1% 0;}
.slide-arrow{position: absolute;}

.thumbnail{max-width: 950px; margin: 0 auto; display: flex;}
.thumbnail-img{padding: 3%; cursor: pointer;}
.thumbnail-img img{box-sizing: border-box; border: 2px solid #a58046;}

.bt-border{height: 15px; background:#a58046; max-width: 1100px; width: 86%; margin: 0 auto 10px auto;}

#chara{padding-bottom: 3%;background-image: url("../img/charaBg.png");background-size: 1500px;
    background-position:top center;background-repeat: no-repeat;}

.slick_thumb .slick-track {
transform:unset!important;
}

.slick-track{transform: none!important;}

.movie {
    position: relative;
    width: 100%;
    padding-top: 50.6%;
}

.movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

@media screen and (min-width:1024px) {
}

@media screen and (max-width:769px) {
    
    #chara{background-image:unset;}
    
    .thumbnail{width: 84%; padding: 4%;}
    .thumbnail-img{width:25%!important;padding: 4%;}
    
    .bt-border{height: 10px;}
    
    .books {
    padding: 10% 0 3rem 0;
}
    
       .books:before {
        content: "";
        position: absolute;
        z-index: -1;
        background-image: url(../img/bookBg.png);
        background-repeat: no-repeat;
        width: 50%;
        padding-top: 85%;
        top: 0.8%;
        right: -1%;
        background-size: contain;
    }
    
    .midashi {
    text-align: center;
    padding: 12px 0;
    width: 44%;
        background: unset;
    margin: 0 auto;
        line-height: 1;}
    
    #books {padding: 8% 0;}
    #chara {padding: 8% 0;}
    
    #pv{background-image: url("../img/pcbg_sp.jpg");background-size: contain;background-size: cover;
        padding: 6% 0 10% 0;}
    .pvImg{width: 70%;}
    
    .story {width: 90%;padding: 4%;}
    
    #link {padding: 8% 0;}
    .LinkBtn {
    padding-top: 4%;
}
	
.PConly {display: none;}
.SPonly {display: block;}
	
/*ナビゲーション--------------------------------- */
#header {
	height:50px;
}

#obi {
	margin:0 auto;
	position: relative;
	display: block;
}

#obi h1{float:left; padding-left: 2%;
    padding-top: 6px;
    max-width: 190px;}

.snsBox{
	float: right;
    width: auto;height: 52px;
    vertical-align: top;}
.snsBox a{width: 52px; height: 52px; display: inline-block;}
	
/*ページトップへボタン--------------------------- */
#top_btn {
    width: 40%;
    padding-bottom: 10%;
    }
	
}