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;
}

.op-fadeup{
	transition: .8s;
	transition-delay:.2s;
	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;
	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: .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){
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
#container{
	width:100%;
}
#top_content{
	width:100%;
	max-width:1020px;
	margin:0 auto;
}

#header{
	position:relative;
	min-height:510px;
	background: url(../images/main_top.png) center top /auto no-repeat;
	z-index: 2;
}

#logo{
	position:absolute;
	width:25%;
	top:5%;
	left:4%;
}

#toggle {
	display: none;
}

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

#headerlinks{
	width:100%;
	height:60%;
	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%;
}

#countdown_bg{
	width:120px;
	height:120px;
	top:15%;
	left:85%;
	position:absolute;
	background: url(../images/countdown_bg.png);
	background-size:cover;
}

#countdown_bg p{
	color:#FFF;
	font-size:1.2rem;
	position:relative;
	top:115px;
	left:45%;
}

a#countdown_btn,
a#countdown_btn2{
	display:block;
	width:180px;
	height:44px;
	top:75%;
	left:-26%;
	right:0;
	margin:0 auto 0 auto;
	position:absolute;
	background: url(../images/countdown_btn.png);
	background-size:cover;
}

a#countdown_btn:hover,
a#countdown_btn2:hover{
	background-position:0px -44px;
}

#oji{
	z-index:100;
	position:absolute;
	width:100%;
	background-color:rgba(0,0,0,0.8);
	display:none;
	text-align:center;
}
#close_btn{
	width:64px;
	margin:20px;
	right:5%;
	position:absolute;
}
img.count_ten{
	width:10%;
	left:44.5%;
	padding-top:36%;
	position:absolute;
}

img.count_one{
	width:10%;
	left:59.5%;
	padding-top:36%;
	position:absolute;
}

#oji_bg{
	width:90%;
	margin-top:5%;
}
#oji_bg_sp{
	display:none;
}

a#zukan_btn{
	display:block;
	width:180px;
	height:180px;
	top:420px;
	left:40%;
	position:absolute;
	background: url(../images/zukan_btn.png);
	background-size:cover;
}

a#zukan_btn:hover{
	background-position:0px -180px;
}

#top_main_bg{
	width:100%;
	max-width:1020px;
	background:url(../images/brush_corner.png) left top /100% no-repeat;
	background-color:#ffcd1a;
	padding:100px 0 0px 0;
	position:relative;
}
#top_main_bg2{
	margin-top:-100px;
	width:100%;
	max-width:1020px;
	height:800px;
	background-color:#fff;
	background:url(../images/jikai_bg.png) left top /100% no-repeat;
/*	transform:skew(0deg, -10deg);
*/
	position:relative;
	z-index:2;

}

#jikai_title{
	width:33%;
	top:100px;
	position:absolute;
}

#top_main_bg2 .moyu{
	position:absolute;
	top:40px;
	left:4px;
	width:28%;
}

#top_main_bg2 .moyu img{
	width:50%;
}

#wrapper{
	width:50%;
	position:relative;
	border:1px solid gray;
}


#jikai_movie{
	width:50%;
	top:25%;
	right:3%;
	background:url(../images/jikai_frame.png) center /100% no-repeat;
	position:absolute;
}
#jikai_movie:before {
	content:"";
	display: block;
	padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

#jikai_movie iframe#mov{
	position: absolute;
	top: 5%;
	left: 5%;
	width:90%;
	height:90%;
}

#jikai_movie img#mov{
	position: absolute;
	top: 5%;
	left: 5%;
	width:90%;
	height:90%;
}



#jikai_yokoku{
	width:18em;
	top:32%;
	left:6%;
	position:absolute;
}

#jikai_yokoku h1.title{
	text-align:center;
	font-size:1.4em;
	padding:0 0 4% 0;
	margin:0;
}
#jikai_yokoku p.main{
	font-size:0.9em;
	padding:0 0 4% 0;
}

a#koremade_btn{
	display:block;
	width:290px;
	height:70px;
	top:100%;
	left:0%;
	position:absolute;
	background: url(../images/koremade_btn.png);
	background-size:cover;
}

a#koremade_btn:hover{
	background-position:0px -70px;
}

#top_main_bg3{
	margin-top:-450px;
	width:100%;
	max-width:1020px;
	height:0;
	padding-top:90%;
	padding-bottom:130px;
	background-color:#0099b8;
/*	transform:skew(0deg, -10deg);
*/
	position:relative;
	z-index:1;

}

#top_main_moji{
	width:100%;
	height:100%;
	position:relative;
	z-index:2;
}

#top_main_moji_sp{
	display:none;
}

.pc01{
	top:-280px;
	left:2%;
	width:45%;
	position:absolute;
}

.pc02{
	top:-220px;
	right:2%;
	width:45%;
	position:absolute;
}

.pc03{
	top:190px;
	left:2%;
	width:50%;
	position:absolute;
}

.pc04{
	top:150px;
	right:2%;
	width:40%;
	position:absolute;
}

#bg_en{
	width:90%;
	height:0;
	padding-top:85.6%;
	top:10%;
	left:5%;
	background:url(../images/en.png) center top/100% no-repeat;
	position:absolute;
}
a.bangumi_btn{
	display:block;
	width:290px;
	height:70px;
	top:70%;
	left:0;
	right:0;
	margin:0 auto 0 auto;
	position:absolute;
	background: url(../images/bangumi_btn.png);
	background-size:cover;
}

a#bangumi_btn:hover{
	background-position:0px -70px;
}

#oshirase_bg{
	width:70%;
	min-width:600px;
	margin:10px auto 0 auto;
	padding:70px 0 20px 0;
	z-index:5;
	background:url(../images/oshirase_title.png) center 0% /100% no-repeat;
	position:relative;
	background-color:#ff5766;
}

#moji_movie{
	width:570px;
	padding:30px;
	background:url(../images/jikai_frame.png) center /100% 104% no-repeat;
	margin:-15px auto 13px auto;
}

p#kanji_title{
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	color:#FFF;
	font-size:1.1em;
	margin:0.2em 0 0.2em 0;
	text-align:center;
}

#oshirase{
	width:90%;
	margin:0px auto 0 auto;
	top:180px;
	left:5%;
	z-index:4;
	background-color:#fff;
}

#oshirase li{
	height:auto;
	padding:0.2% 3%;
	line-height:160%;
	border-bottom:2px #ff5766 solid;
	font-size:0.9em;
	color:#000;
	transition: .8s;
}


#oshirase .kihu{
	position:absolute;
	top:-10%;
	right:-20px;
	width:18%;
}


#oshirase li a{
	display:block;
	width:100%;
	height:100%;
	cursor:pointer;
	text-decoration:none;
	color:#000;
}

li.boxtype01{
	background:url(../images/icon01.png) 5% 5% /auto no-repeat;
}

li.boxtype02{
	background:url(../images/icon02.png) 5% 5% /auto no-repeat;
}

#oshirase p.day{
	padding:0 0 0 8%;
}
#oshirase p.text{
	padding:0 0 0 2%;
}
#oshirase span.new{
	background:url(../images/new_ico.png) 5% 25% /auto no-repeat;
}
#jikai_bg{
	height:500px;
	width:70%;
	margin:0px auto 0 auto;
	position:absolute;
	top:100px;
	left:15%;
	z-index:2;
	background:url(../images/oshirase_title.png) center 2% /50% no-repeat;
	background-color:#e8e7e3;
}


#top_bottom_link{
	width:100%;
	background-color:#e8e7e3;
	position:relative;
	padding:7% 0 3% 0;
	text-align:center;
}

#top_bottom_link img.bottom_link{
	width:20%;
	margin:0 1%;
}

#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%;
}
.br_sp{
	display:none;
}


}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 768px){
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
#container{
	width:100%;
}
#header{
	width:100%:
	height:0;
	padding-top:141.66%;
	position:relative;
	background: url(../images/main_top_sp.png) no-repeat;
	background-size:contain;
	z-index:6;
}

#logo{
	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_sp 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;
}


a#zukan_btn{
	display:block;
	width:30%;
	height:20%;
	top:90%;
	left:35%;
	position:absolute;
	background: url(../images/zukan_btn.png);
	background-size:cover;
}



#top_main_bg{
	width:100%;
	background:url(../images/brush_corner.png) left top /100% no-repeat;
	background-color:#ffcd1a;
	padding:100px 0 0px 0;
	position:relative;
}
#top_main_bg2{
	margin-top:-5%;
	width:100%;
	height:0px;
	padding-top:177%;
	background-color:#fff;
	background:url(../images/jikai_bg_sp.png) left top /100% no-repeat;
/*	transform:skew(0deg, -10deg);
*/
	position:relative;
	z-index:2;

}

#top_main_bg2 .moyu{
	position:absolute;
	top:10%;
	left:2%;
	width:35%;
}

#top_main_bg2 .moyu img{
	width:50%;
}


#jikai_title{
	width:70%;
	top:4%;
	position:absolute;
}

#jikai_movie{
	width:80%;
	top:25%;
	right:10%;
	background:url(../images/jikai_frame.png) center /100% no-repeat;
	position:absolute;
}
#jikai_movie:before {
	content:"";
	display: block;
	padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

#jikai_movie iframe#mov{
	position: absolute;
	top: 5%;
	left: 5%;
	width:90%;
	height:90%;
}

#jikai_movie img#mov{
	position: absolute;
	top: 5%;
	left: 5%;
	width:90%;
	height:90%;
}

#jikai_yokoku{
	width:18em;
	top:60%;
	left:0;
	right:0;
	margin:0 auto;
	position:absolute;
}

#jikai_yokoku h1.title{
	text-align:center;
	font-size:1.4em;
	padding:0 0 4% 0;
	margin:0;
}
#jikai_yokoku p.main{
	font-size:0.9em;
	padding:0 0 4% 0;
}

a#koremade_btn{
	display:block;
	width:290px;
	height:70px;
	top:100%;
	left:0%;
	position:absolute;
	background: url(../images/koremade_btn.png);
	background-size:cover;
}

a#koremade_btn:hover{
	background-position:0px -70px;
}

#top_main_bg3{
	margin-top:-40%;
	width:100%;
	max-width:1020px;
	height:0;
	padding-top:250%;
	background-color:#0099b8;
/*	transform:skew(0deg, -10deg);
*/
	position:relative;
	z-index:1;
}

#top_main_bg3 .pc01{
	wdidth:0;
	position:absolute;
}

#top_main_moji{
	display:none;
}

#top_main_moji_sp{
	width:100%;
	position:absolute;
	z-index:3;

}

.sp01{
	top:-30vw;
	left:0;
	width:100%;
	position:absolute;
}
.sp02{
	top:110vw;
	left:0;
	width:100%;
	position:absolute;
}

#bg_en{
	width:100%;
	height:0;
	padding-top:300%;
	top:-5%;
	background:url(../images/en_sp.png) center top/100% no-repeat;
	position:absolute;
}
a.bangumi_btn{
	display:block;
	width:290px;
	height:70px;
	top:125vw;
	left:0;
	right:0;
	margin:0 auto 0 auto;
	position:absolute;
	background: url(../images/bangumi_btn.png);
	background-size:cover;
	z-index:1;
}

a.passed{
	display:none;
}

#moji_movie{
	width:100%;
	padding:6% 0;
	background:url(../images/jikai_frame.png) center /138% no-repeat;
	margin:-15px auto 10px auto;
}

p#kanji_title{
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	color:#FFF;
	font-size:1.1em;
	margin:0.2em 0 0.4em 0;
	text-align:center;
}



#oshirase_bg{
	width:90%;
	margin:10px auto 0 auto;
	padding:20% 0 20px 0;
	z-index:5;
	background:url(../images/oshirase_title_sp.png) center 0 /100% no-repeat;
	position:relative;
	background-color:#ff5766;
}

#oshirase{
	width:96%;
	margin:0px auto 0 auto;
	top:10%;
	left:5%;
	z-index:4;
	background-color:#fff;
}

#oshirase .kihu{
	position:absolute;
	top:-30px;
	right:7%;
	width:20%;
}

#oshirase li{
	height:auto;
	padding:0.8em;
	line-height:160%;
	border-bottom:2px #e8e7e3 solid;
	font-size:0.9em;
	font-weight:bold;
	color:#000;
}
#oshirase li a{
	text-decoration:none;
	color:#000;
}

li.boxtype01{
	background:url(../images/icon01.png) 1em 0.8em /auto no-repeat;
}

li.boxtype02{
	background:url(../images/icon02.png) 1em 0.8em /auto no-repeat;
}

#oshirase p.day{
	padding:0 0 0 2.4rem;
}
#oshirase p.text{
	padding:0.5em 0 0 0.5em;
}
#oshirase span.new{
	background:url(../images/new_ico.png) 5% 25% /auto no-repeat;
}
#jikai_bg{
	height:500px;
	width:70%;
	margin:0px auto 0 auto;
	position:absolute;
	top:100px;
	left:15%;
	z-index:2;
	background:url(../images/oshirase_title.png) center 2% /50% no-repeat;
	background-color:#e8e7e3;
}


#top_bottom_link{
	width:100%;
	background-color:#e8e7e3;
	position:relative;
	padding:7% 0 3% 0;
	text-align:center;
	font-size:0;
	z-index:1;
}

#top_bottom_link img.bottom_link{
	width:40%;
	margin:2% 2%;
}

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

#footer img{
	width:48%;
	padding:1%;
}
.br_pc{
	display:none;
}
#countdown_bg{
	width:28%;
	height:0%;
	padding-top:28%;
	top:10%;
	left:65%;
	position:absolute;
	background: url(../images/countdown_bg.png);
	background-size:cover;
}

#countdown_bg p{
	color:#FFF;
	font-size:1.6rem;
	height;100%;
	position:absolute;
	top:60%;
	right:45%;
}
a#countdown_btn,
a#countdown_btn2{
	display:block;
	width:120%;
	height:29%;
	top:80%;
	left:-10%;
	right:0;
	margin:0 auto 0 auto;
	position:absolute;
	background: url(../images/countdown_btn.png);
	background-size:cover;
}

a#countdown_btn:hover,
a#countdown_btn2:hover{
	background-position:0px -99%;
}
#oji{
	z-index:100;
	position:absolute;
	width:100%;
	background-color:rgba(0,0,0,0.8);
	display:none;
	text-align:center;
}
#close_btn{
	width:64px;
	margin:20px;
	right:2%;
	position:absolute;
}
img.count_ten{
	width:11%;
	top:0;
	padding-top:59.5%;
	left:44%;
	position:absolute;
}

img.count_one{
	width:11%;
	top:0;
	padding-top:59.5%;
	left:60.5%;
	position:absolute;
}

#oji_bg_sp{
	width:100%;
	margin-top:25%;
}
#oji_bg{
	display:none;
}



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

#countdown_bg{
	width:25%;
	padding-top:25%;
	top:15%;
	left:70%;
}

#countdown_bg p{
	color:#FFF;
	font-size:1.4rem;
	height;110%;
	position:absolute;
	top:58%;
	right:42%;
}
}

@media screen and (max-width:440px){
#countdown_bg p{
	color:#FFF;
	font-size:1rem;
	height;100%;
	position:absolute;
	top:58%;
	right:42%;
}
}