/* -----------------ポップアップ追加-------------------- */

.pop_contents{position: relative;}

.popbtn1{ position: absolute; max-width:639px; width: 47% !important;
top: 45.3%; left: 5.6%;}
.popbtn2{ position: absolute; max-width:576px; width: 45% !important;
top: 55.2%; left: 5.6%;}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 95%;
  max-width: 1000px;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: -60px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

#popup{background: rgba(0,0,0,0.30);
width: 100%; height: 2000px; position: fixed; z-index: 1001; margin: 0 auto;}

.popup_contents{width:60%; height:700px; background: #FFF; margin: 0 auto; vertical-align: middle;  margin-top: 11%;}

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

.clear {
	clear : both;
}

.centering {
	background-position : 50% 0;
	background-repeat : no-repeat;
}

.cover {
	background-size : cover;
}

.contain {
	background-size : contain;
}

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

html,
body {
	width: 100%;
	min-width : 1280px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

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

nav#menu {
	display: block;
	position: fixed;
	width: 100%;
	min-width: 1024px;
	height : 66px;
	text-align : center;
	background-image: url(../img/menu_pattern_bg.png) ;
	background-repeat: repeat-x;
	overflow: hidden;
	z-index : 1000;
}

heder{}
heder h1,heder p{height:1px;text-indent:-999em;}
heder p{height:0;text-indent:-99999em;}

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

#container > section {
	width: 100%;
	margin : 0 auto;
}


    /**
     * -------------------------------------------- *
     * container
     * -------------------------------------------- *
     */
     
    #top {
    	padding-top :0px; /* menu-height:66px */
    	background: url(../img/top_pattern_bg.jpg);
    }
    #story,
    #chara,
    #news {	margin: 0 auto;	padding-top: 50px; min-height: 1050px; }
    
    #story { background: url(../img/story_bg.jpg) center top; }
    #chara { background: url(../img/chara_bg.jpg) center top; }
    #news  { background: url(../img/news_bg.jpg)  center top; }
    
    .footer {
    	margin: 0 auto;
    	position: relative;
    }
    
    /**
     * -------------------------------------------- *
     * top
     * -------------------------------------------- *
     */
    
    #top > .wrapper {
    	width: 100%;
    	height: 1186px;
    }
		
		#top .books {
	margin : 15px 0;
	position : absolute;
	top : 95px;
	right : 846px;
	width: 311px;
	z-index: 100;
	background: url(../img/pv_twitter_bg.png) no-repeat;
        }
        #top .items {
        	margin: 15px 0;
    position: absolute;
    top: 45px;
    height: 620px;
    right: 10px;
    width: 311px;
    z-index: 100;
    background: url(../img/pv_twitter_bg.png) no-repeat;
    background-position-y: 0px;
        }
        	#youtube {
            	margin-top: 50px;
            	margin-left: 19px;
        	}
        	.twitter {
            	height: 350px;
            	margin-top: 56px;
            	margin-left: 18px;
        	}
        	#twitter-widget-0 {
            	height: 350px;
        	}
        	#shop {
            	margin-top: 35px;
            	height: 132px;
            	z-index: 200;
            	background: url(../img/top_book_bg.png) no-repeat;
        	}
            	#shop > a {
                	position: absolute;
                	bottom: 0;
                	right: 0;
            	}
				#apDiv1 {
					position: absolute;
					left: 322px;
					top: 70px;
					width: 482px;
					height: 100px;
					z-index: 1;
				}
		#banner_list{
	width: 298px;
	height: 455px;
	position: absolute;
	left: 969px;
    top: 689px;
	padding: 0;
}
		#banner_list img{margin-bottom:-4px;}
    
    /**
     * -------------------------------------------- *
     * story
     * -------------------------------------------- *
     */
    
    #story > header {
    	margin-left: 0;
		width:1070px;margin:0 auto;
    }
	#story div.bg{width:1024px;margin:0 auto;height:840px;}
    #story > p {
    	margin-top: 28px;
    	min-height: 684px;
		
    	
    }
	#story p{width:1024px;margin:0 auto;font-size:20px;line-height:1.9em;color:#525252;padding:25px 0 0 40px;}
    #story > p > img {
    	margin-left: 76px;
    }
    #story > .footer {
    	width: 974px;
    	height: 80px;
    }
    #story > .footer > a {
	display: block;
	position: absolute;
	right: 30px;
	bottom: -3px;
    }
	#kyou{color:#39871a;}
	#mao{color:#ff7e00;}
	#shion{color:#9603cd;}
	#megumi{color:#ed13bc;}
	#kirara{color:#d5b502;}
    
    /**
     * -------------------------------------------- *
     * chara
     * -------------------------------------------- *
     */
	#chara{position:relative;}
    #chara > header {
		height:0px;
		text-indent:-999em;
    }
    #chara > .relationship {
		margin-top:80px;
    	text-align: center;
    }
	#chara > .relationship img{
		margin-bottom:-4px;
	}

    #chara > .footer {
    	width: 974px;
    	height: 76px;
    }
    #chara > .footer > a {
	display: block;
	position: absolute;
	right: 40px;
	bottom: -6px;
    }
    
    /**
     * -------------------------------------------- *
     * news
     * -------------------------------------------- *
     */


    #news > header {
    	width:1080px;margin:10px auto 0;
    }
    #news > .items {
    	margin: 24px auto 0;
    width: 923px;
    height: 732px;
    background-color: #FFF;
    overflow-y: scroll;
    }
    #news dl {
    	color: #646464;
    	padding: 0 20px;
    }
    #news dt {
    	font-weight: bold;
    	padding: 15px 0 5px;
		color:#679007;
    }
    
    #news dd {
    	padding: 10px 0 10px 20px;
    	font-size: 90%;
    	line-height: 1.3em;
    }
    #news dt + dt,
    #news dd + dt {
    	border-top: dotted #646464 1px;
    }
    #news > .footer {
    	width: 974px;
    	height: 180px;
    }
    #news > .footer > a {
	display: block;
	position: absolute;
	right: 35px;
	bottom: -5px;
    }

@media screen and (max-width:420px) {
}