@charset "utf-8";
html {font-size:62.5%;}
body{
	background:url(../images/bg.jpg) center top repeat-x #f3f3f3 fixed;
	font-size:1.2rem;
	line-height:1.6;
}
a{
	color:#f3060a;
	font-weight:bold;
	letter-spacing:0.1em;
}
.w200{
	width:100%;
	max-width:200px;
	border:1px solid #000;
}
.w400{
	width:100%;
	max-width:400px;
	border:1px solid #000;
}


/* アニメーション */
#illBox p {animation-fill-mode:forwards;}
#illBox #p01 {animation:a01 1.2s linear 0.1s forwards;}
@keyframes a01{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p02 {animation:a02 1.2s linear 0.2s forwards;}
@keyframes a02{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p03 {animation:a03 1.2s linear 0.3s forwards;}
@keyframes a03{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p04 {animation:a04 1.2s linear 0.4s forwards;}
@keyframes a04{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p05 {animation:a05 1.2s linear 0.5s forwards;}
@keyframes a05{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p06 {animation:a06 1.2s linear 0.6s forwards;}
@keyframes a06{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p07 {animation:a07 1.2s linear 0.7s forwards;}
@keyframes a07{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p08 {animation:a08 1.2s linear 0.8s forwards;}
@keyframes a08{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p09 {animation:a09 1.2s linear 0.9s forwards;}
@keyframes a09{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p10 {animation:a10 1.2s linear 1.0s forwards;}
@keyframes a10{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p11 {animation:a11 1.2s linear 1.1s forwards;}
@keyframes a11{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p12 {animation:a12 1.2s linear 1.2s forwards;}
@keyframes a12{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p13 {animation:a13 1.2s linear 1.3s forwards;}
@keyframes a13{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p14 {animation:a14 1.2s linear 1.4s forwards;}
@keyframes a14{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p15 {animation:a15 1.2s linear 1.5s forwards;}
@keyframes a15{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}
#illBox #p16 {animation:a16 1.2s linear 1.6s forwards;}
@keyframes a16{
	0% {opacity:0;}
	20% {opacity:1;}
	100% {opacity:1;}
}

#catchCopy {animation:cc 1s linear 1.8s 1 forwards;}
@keyframes cc{
	0% {margin-top:-81px;}
	100% {margin-top:0;}
}
#releaseBox {animation:release 1s linear 2.8s 1 forwards;}
@keyframes release{
	0% {opacity:0;}
	100% {opacity:1;}
}
#illustration {animation:illustration 2.8s linear 1.6s forwards;}
@keyframes illustration{
	0% {opacity:0;}
	100% {opacity:1;}
}
#h1BG {animation:h1bg 1s ease-out 3s forwards;}
@keyframes h1bg{
	0% {margin-left:-1055px; opacity:0;}
	1% {opacity:1;}
	100% {margin-left:0; opacity:1;}
}
h1 {animation:rogo 1.4s linear 4.4s 1 forwards;}
@keyframes rogo{
	0% {margin-top:1000px; opacity:0;}
	40% {margin-top:-214px; opacity:1;}
	50% {margin-top:-120px; opacity:1;}
	60% {margin-top:-194px; opacity:1;}
	75% {margin-top:-120px; opacity:1;}
	90% {margin-top:-164px; opacity:1;}
	100% {margin-top:-154px; opacity:1;}
}


@media screen and (min-width:641px) {
.smOnly {display:none;}

#contents{
	background:url(../images/contents_bg.png) center top repeat-y;
	width:1035px;
	margin:0 auto;
	padding:0 10px;
}

/* 共通項目 */
main {
	position:relative;
	z-index:10;
}

.w1035{
	width:1035px;
	margin:0 auto;
}
h2{
	width:1015px;
	height:70px;
	margin:0 auto 20px;
}
.w1015{
	background:#000;
	width:1015px;
	margin:0 auto 40px;
	padding:10px 0;
}
.w995{
	background:#fff;
	width:995px;
	margin:0 auto;
	padding:30px 20px;
	border-radius:20px;
	box-sizing:border-box;
}



/* header */
header{
	position:relative;
	width:1035px;
	height:650px;
	text-indent:-9999px;
}


/* イラスト */
#illBox{
	position:relative;
	width:1035px;
	height:650px;
	margin:0 auto;
	text-indent:0;
}
#illBox p{
	position:absolute;
	opacity:0;
}
 
#illBox #p01 {top:-17px; left:-19px;}
#illBox #p02 {top:7px; left:154px;}
#illBox #p03 {top:79px; left:10px;}
#illBox #p04 {top:-60px; right:107px;}
#illBox #p05 {top:11px; right:-50px;}
#illBox #p06 {top:92px; right:47px;}
#illBox #p07 {top:342px; left:-56px;}
#illBox #p08 {top:438px; left:22px;}
#illBox #p09 {top:334px; left:132px;}
#illBox #p10 {top:461px; left:249px;}
#illBox #p11 {top:330px; left:343px;}
#illBox #p12 {top:507px; left:452px;}
#illBox #p13 {top:330px; right:349px;}
#illBox #p14 {top:404px; right:112px;}
#illBox #p15 {top:330px; right:52px;}
#illBox #p16 {top:416px; right:-37px;}

#catchCopy{
	position:absolute;
	background:url(../images/img_cacth.png) no-repeat;
	width:580px;
	height:70px;
	margin-top:-81px;
	top:11px;
	left:247px;
}
#releaseBox{
	position:absolute;
	background:url(../images/img_release.png) no-repeat;
	width:473px;
	height:53px;
	top:101px;
	left:281px;
	opacity:0;
}
#illustration{
	position:absolute;
	background:url(../images/img_illustrator.png) no-repeat;
	width:220px;
	height:31px;
	top:601px;
	left:408px;
	opacity:0;
}
#h1Wrap{
	overflow:hidden;
	position:absolute;
	width:1055px;
	height:154px;
	top:188px;
	left:-10px;
}
#h1Wrap #h1BG{
	background:url(../images/rogo_bg.jpg) no-repeat;
	width:1055px;
	height:154px;
	opacity:0;
}
#h1Wrap h1{
	position:absolute;
	background:url(../images/rogo.png) no-repeat;
	width:1037px;
	height:154px;
	opacity:0;
}


/* nav */
nav {margin-bottom:30px;}
nav ul{
	position:relative;
	display:table;
	border-collapse:separate;
	border-spacing:20px 0;
	background:#000;
	width:1021px;
	padding:20px 0;
	z-index:10;
}
nav li{
	display:table-cell;
	height:20px;
	text-indent:-9999px;
}
nav ul:first-child {padding-left:14px;}
nav a{
	display:block;
	height:20px;
}

nav #n_product a {background:url(../images/nav/product.jpg) center center no-repeat; width:133px;}
nav #n_item a {background:url(../images/nav/item.jpg) center center no-repeat; width:88px;}
nav #n_track a {background:url(../images/nav/track.jpg) center center no-repeat; width:111px;}
nav #n_seriese a {background:url(../images/nav/series.jpg) center center no-repeat; width:135px;}
nav #n_twitter a {background:url(../images/nav/twitter.jpg) center center no-repeat; width:83px;}
nav #n_attention a {background:url(../images/nav/attention.jpg) center center no-repeat; width:88px;}
nav #n_product a:hover {background:url(../images/nav/product_on.jpg) center center no-repeat;}
nav #n_item a:hover {background:url(../images/nav/item_on.jpg) center center no-repeat;}
nav #n_track a:hover {background:url(../images/nav/track_on.jpg) center center no-repeat;}
nav #n_seriese a:hover {background:url(../images/nav/series_on.jpg) center center no-repeat;}
nav #n_twitter a:hover {background:url(../images/nav/twitter_on.jpg) center center no-repeat;}
nav #n_attention a:hover {background:url(../images/nav/attention_on.jpg) center center no-repeat;}


/* PRODUCT */
#product .w1015 {text-align:center;}


/* 商品情報 */
#item .w1015 h3{
	width:910px;
	margin:0 auto 20px;
}
.sectionWrap{
	overflow:hidden;
	width:910px;
	margin:0 auto;
}
.sectionWrap .Img{
	float:left;
	width:300px;
	margin-right:20px;
}
.sectionWrap .Txt{
	float:left;
	background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background : -webkit-linear-gradient(top, #fff, #eee);
	background : linear-gradient(to bottom, #fff, #eee);
	width:590px;
	padding:10px;
	border:1px solid #eee;
	box-sizing:border-box;
}
.sectionWrap .Txt p {margin-bottom:1em;}
.sectionWrap .Txt .senkou{
	display:inline-block;
	background:#f3060a;
	padding:4px 15px;
	font-size:1.5rem;
	font-weight:bold;
	color:#fff;
	border-radius:6px;
}
		
.BtnBuy a{
	display:block;
	background:url(../images/btn_buy_off.png) no-repeat;
	width:240px;
	height:52px;
	margin-top:10px;
	text-indent:-9999px;
}
.BtnBuy a:hover {background:url(../images/btn_buy_on.png) no-repeat;}


/* 収録曲紹介 */
.trackBox{
	float:left;
	width:430px;
	margin-bottom:20px;
}
.discNo{
	display:inline-block;
	background:#000;
	padding:4px 1em;
	font-size:2rem;
	font-weight:bold;
	color:#fff;
	border-radius:20px;
}
.trackBox ul{
	width:100%;
	margin:1em 0;
	font-size:1.4rem;
	list-style:none;
}
.trackBox li{
	margin-bottom:4px;
	padding-bottom:2px;
	border-bottom:1px dotted #000;
}
.trackBox:first-child {margin-right:40px;}


/* シリーズ紹介 */
#series h3{
	background:#fff100;
	margin-bottom:16px;
}
#series p {margin-bottom:0;}
.marB20 {margin-bottom:20px !important;}
.ColorRedB{
	padding:14px 0;
	color:red;
	font-weight:bold;
}
#series .BtnBuy a{
	display:block;
	background:url(../images/btn_buy2.png) no-repeat;
	width:240px;
	height:52px;
	text-indent:-9999px;
}
#series .BtnBuy a:hover {background:url(../images/btn_buy2_on.png) no-repeat;}


/* Twitter */
#twitter h2 {background:url(../images/tit_twitter.jpg) no-repeat;}
#twitter .Wrap {text-align:left;}
#twitter .Wrap > div{
	width:1000px;
	margin:0 auto;
	font-size:1.4rem;
}
#twitter .Wrap #twImg {margin:10px 0;}
#twitter .Wrap #twImg img {width:100%;}



#twitter #TwiBox {overflow:hidden;
	text-align: center;}
#twitter #tlbTwi,
#twitter #tpb3Twi{
	overflow:hidden;
	float:left;
	width:48%;
	height:620px;
	border:2px solid #000;
}
#twitter #tlbTwi{margin:0 5px 0 7px;}
#twitter #tpb3Twi{margin:0 5px 0 10px;}
	
#twitter #tlbTwi > p,
#twitter #tpb3Twi > p{
	background:#000;
	padding:2px 0;
	text-align:center;
}
#twitter #tlbTwi > p a,
#twitter #tpb3Twi > p a{
	font-size:1.6rem;
	color:#fff;
	text-decoration:none;
}
#twitter #tlbTwi > p a:before,
#twitter #tlbTwi > p a:after,
#twitter #tpb3Twi > p a:before,
#twitter #tpb3Twi > p a:after {content:"▼";}


/* 注意事項 */
#attention .w1015 {}


/* Footer */
footer{
	padding:20px 0 40px;
	color:#000;
	text-align:center;
}
footer p {margin-bottom:1em;}


/* PageTop */
#page_top{
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:200;
}
#page_top a{
	display:block;
	background:url(../images/btn_pagetop.png) no-repeat;
	width:95px;
	height:95px;
	text-indent:-9999px;
	transition:all 1s ease 2ms;
}
#page_top a:hover {transform:rotate(720deg);}


}











@media screen and (max-width:640px) {
.pcOnly {display:none;}

#contents{
	width:100%;
	margin:0 auto;
	padding:0;
}
section{
	background:#fff;
	width:98%;
	margin:0 auto 40px;
	padding-bottom:10px;
}
h2{
	width:100%;
	height:auto;
	margin:0 auto 1em;
	padding:10px 0 2px;
	text-align:center;
	box-sizing:border-box;
}
h2 img,
h3 img {width:98%;}
h3 {text-align:center;}
a {letter-spacing:0;}


/*** header ***/
header img {width:100%;}


/*** nav ***/
nav ul{
	background:#000;
	overflow:hidden;
	width:96%;
	margin:10px auto 20px;
	padding:20px 6px 0;
	box-sizing:border-box;
}
nav li{
	float:left;
	margin:0 10px 20px;
	font-size:2rem;
}
nav li a{
	color:#ffff00;
	text-decoration:none;
}


/*** PRODUCT ***/
#product img {width:100%;}


/*** 商品情報 ***/
#item h3{
	background:#fff100;
	width:96%;
	margin:0 auto 1em;
	text-indent:0;
	box-sizing:border-box;
}
#item .sectionWrap, #seriesItem .itemWrap{
	background:#fff;
	padding-bottom:20px;
}
#item .Img, #series .Img{
	width:100%;
	margin-bottom:10px;
	text-align:center;
}
#item .Img img, #series .Img img{
	width:100%;
	max-width:200px;
}
#item .Txt, #series .Txt{
	background:linear-gradient(to bottom, #fff, #fff 60%, #eee);
	width:96%;
	margin:10px auto;
	padding:1em;
	border:1px solid #ccc;
	border-radius:10px;
	box-sizing:border-box;
}
/*#item .Txt > p:first-child, #series .Txt > p:first-child {font-size:1.4rem;}*/
#item .Txt > p:first-child span, #series .Txt > p:first-child span{
	background:#f00;
	padding:2px 1em;
	color:#fff;
	border-radius:16px;
}
/*#item .Txt p, #series .Txt p {margin-bottom:14px;}*/
#item .Txt p:last-child, #series .Txt p:last-child {margin-bottom:0;}
.sectionWrap .Txt .senkou{
	display:inline-block;
	background:#e61711;
	margin-bottom:24px;
	padding:2px 1em;
	font-size:1.4rem;
	font-weight:bold;
	color:#fff;
	border-radius:16px;
}
.ColorRedB{
	padding:14px 0;
	color:red;
	font-weight:bold;
}


/*** 収録曲紹介 ***/
#track a {color:#e61711;}
#track .trackWrap{
	overflow:hidden;
	width:100%;
	margin:10px auto;
	text-align:left;
}
#track .trackBox{
	width:98%;
	margin:0 auto 20px;
}
#track .discNo{
	display:inline;
	background:#000;
	padding:4px 1em;
	color:#fff;
	font-size:1.4rem;
	font-weight:bold;
	border-radius:20px;
}
#track .trackBox ul{
	margin:8px 0 0 14px;
	list-style:none;
}
#track .trackBox li{
	margin-bottom:2px;
	border-bottom:1px dotted #000;
}

.ColorRed {color:#e61711;}


/*** シリーズ紹介 ***/
#series h3{
	background:#fff100;
	width:96%;
	margin:0 auto 1em;
	text-indent:0;
	box-sizing:border-box;
}


/*** Twitter ***/
#twImg{
	width:100%;
	margin-bottom:20px;
}
#twImg img {width:100%;}
#twitter #tlbTwi,
#twitter #tpb3Twi{
	overflow:hidden;
	width:100%;
	height:420px;
	margin:0 auto;
	border:2px solid #000;
	box-sizing:border-box;
}
#twitter #tlbTwi {margin-bottom:20px;}
#twitter #tlbTwi > p,
#twitter #tpb3Twi >p{
	background:#000;
	padding:2px 0;
	text-align:center;
}
#twitter #tlbTwi > p a,
#twitter #tpb3Twi > p a{
	font-size:1.4rem;
	color:#fff;
	text-decoration:none;
}
#twitter #tlbTwi > p a:before,
#twitter #tlbTwi > p a:after,
#twitter #tpb3Twi > p a:before,
#twitter #tpb3Twi > p a:after {content:"▼";}


/*** 注意事項 ***/
#attention .sectionWrap{
	width:96%;
	margin:10px auto 0;
	padding-bottom:10px;
}


/*** フッタ ***/
footer{
	background:#fff;
	width:98%;
	margin:30px auto 10px;
	padding:10px 0;
	text-align:center;
}
footer a {color:#096;}
footer .copyright {margin-top:10px;}

#page_top{
	position:relative;
	width:64px;
	height:64px;
	margin:0 auto 20px;
}



}