html{
	background:#decc84;
}

body{
	line-height:1.4;
	color:#000000;
	font-family: "メイリオ",Meiryo,"MS Gothic","ＭＳ ゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",monospace;
	padding:0;
	margin:0;
}

p{
	margin:0;
	padding:0;
}
img{
	border:0px;
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
li{  
	list-style-type:none;  
}  
.clear{  
	clear:both;  
}

ul,li{
	margin:0;
	padding:0;
}

.cred{
color:red;
}

.rsize{
	font-weight:bold;
}

.op-fadeup{
	transition: .8s;
	transition-delay:.8s;
	opacity: 0;
	transform: translate(0,20px); 
	-webkit-transform: translate(0,20px); 
}

.fadeup{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.op-fadeleft{
	transition: .8s;
	transition-delay:.8s;
	opacity: 0;
	transform: translate(-50px,0); 
	-webkit-transform: translate(-50px,0); 
}

.fadeleft{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.op-faderight{
	transition-delay:.8s;
	transition: .8s;
	opacity: 0;
	transform: translate(50px,0); 
	-webkit-transform: translate(50px,0); 
}

.faderight{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


.op-fadein{
	opacity: 0;
	transition: .8s;
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}

.fadein{
	opacity: 1.0;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

.op-turn{
	transition: 1.2s;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);}

.turn{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
.br_sp{
	display:none;
}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
#container{
	width:100%;
}
#base{
	width:100%;
	max-width:1020px;
	margin:0 auto;
	background: url(../images/bg_washi.png);
}

#header{
	position:relative;
	z-index: 2;
}
#header a.title{
	cursor:pointer;
	position:absolute;
	width:20%;
	top:5%;
	left:4%;
	z-index: 2;
}

#logo{
	display:block;
}

#toggle {
	display: none;
}

#header_box{
	width:56.86%;
	height:0;
	padding-top:10%;
	position:relative;
}

#headerlinks{
	width:100%;
	height:178%;
	position:absolute;
	top:10%;
	left: 70%;
	text-align:left;
	list-style-type:none;
	list-style-position:outside;
}

#headerlinks_sp{
	display:none;
}

#header ul#headerlinks li{
	width:100%;
	display:inline-block;
	height:22%;
	margin:0;
	padding:0px;
	/* ie7 hack */
	/display:inline;
	/zoom:1;
	float:left;
}

#header ul#headerlinks li#hlbtn1{
	width:18.96%;
}
#header ul#headerlinks li#hlbtn2{
	width:20%;
}
#header ul#headerlinks li#hlbtn3{
	width:22.08%;
}
#header ul#headerlinks li#hlbtn4{
	width:20%;
}
#header ul#headerlinks li#hlbtn5{
	width:18.96%;
}


#header ul#headerlinks li a{
	display:block;
	height:100%;
	text-indent:-10000px;
	text-align:left;
	overflow:hidden;
	background-position:0px 0px;
	background-repeat:no-repeat;
	font-size:0;
}

#header ul#headerlinks li#hlbtn1 a{
	background-position:0px 0px;
	background-image:url("../images/nav_bangumi.png");
	background-size:cover;
}

#header ul#headerlinks li#hlbtn2 a{
	background-position:0px 0px;
	background-image:url("../images/nav_zukan.png");
	background-size:cover;
}

#header ul#headerlinks li#hlbtn3 a{
	background-position:0px 0px;
	background-image:url("../images/nav_koremade2.png");
	background-size:cover;
}

#header ul#headerlinks li#hlbtn4 a{
	background-position:0px 0px;
	background-image:url("../images/nav_sanka.png");
	background-size:cover;
}

#header ul#headerlinks li#hlbtn5 a{
	background-position:0px 0px;
	background-image:url("../images/nav_toko.png");
	background-size:cover;
}
#header ul#headerlinks li#hlbtn1 a:hover,
#header ul#headerlinks li#hlbtn2 a:hover,
#header ul#headerlinks li#hlbtn3 a:hover,
#header ul#headerlinks li#hlbtn4 a:hover,
#header ul#headerlinks li#hlbtn5 a:hover{
	background-position:0px 50%;
}
#header ul#headerlinks li#hlbtn1 a.now,
#header ul#headerlinks li#hlbtn2 a.now,
#header ul#headerlinks li#hlbtn3 a.now,
#header ul#headerlinks li#hlbtn4 a.now,
#header ul#headerlinks li#hlbtn5 a.now{
	background-position:0px 100%;
}


#footer{
	width:100%;
	background-color:#797979;
	position:relative;
	padding:3% 0 3% 0;
	text-align:center;
	font-size:0;
}

#footer img{
	width:16%;
	padding:0.4%;
}


}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
.br_pc{
	display:none;
}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
#container{
	width:100%;
}
#header{
	width:100%:
	height:0;
	padding-top:30%;
	position:relative;
	background-size:contain;
}
#base{
	width:100%;
	margin:0 auto;
	background: url(../images/bg_washi.png);
}

.title img{
	position:absolute;
	width:45%;
	top:5%;
	left:5%;
}

#header_box{
	width:100%;
	position:fixed;
	top:0%;
	left:0%;
	z-index:6;
}

#headerlinks{
	display:none;
}

#headerlinks_sp{
	width: 100%;
	height: 80vh;
	margin: 0 auto;
	padding: 10% 0 10% 0;
	background-color:#000;
	display: none;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	position:relative;

}
#headerlinks_sp li{
	position:relative;
	display: block;
	float: left;
	width: 100%;
	height:12.5%;
	min-height:49px;
	margin: 0;
	padding: 0;
}
#headerlinks_sp li a {
	position:relative;
	display: block;
	padding: 0;
	margin:auto 0;
	background-color: #000;
	height:100%;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}
#headerlinks_sp li a img{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height:49px;
}
#headerlinks_sp li:last-child a{
	border: none;
}
#headerlinks li a:hover{
	background: #4baacb;
}

#toggle {
	display: block;
	position: absolute;
	width: 23%;
	left: 78%;
	top:2.5em;
	z-index:2;
}
#toggle a{
	position: absolute;
}

#toggle a img{
	width:100%;
}

#toggle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 60%;
	background: #FFF;
}
#toggle a:before, #toggle a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 60%;
}
#toggle a:before {
	margin-top:0;
}
#toggle a:after {
	margin-top:0;
}


#footer{
	width:84%;
	background-color:#797979;
	position:relative;
	padding:3% 8% 3% 8%;
	font-size:0;
	text-align:left;
}

#footer img{
	width:48%;
	padding:1%;
}


}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
#container{
	width:100%;
}

#countdown_bg{
	width:50%;
	padding-top:50%;
	top:5%;
	left:47%;
}

}