@charset "utf-8";


/*-------------------------------------------------------------------------------------------------------------------------------Start PC TABLET Style768px*/
@media screen and (min-width:768px){
/*START*/


/*---------------------------------------------------------------Common*/

html{
	overflow-y: scroll;
}

.sp{
	display:none;
}

a:link{
	color: #00ffff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a:visited{
	color: #00ffff;
	text-decoration: none;
}
a:hover{
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Link Fade*/
a img.over{
	opacity:1;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
a:hover img.over{
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}


/*---------------------------------------------------------------for Fade*/

/*
#contentBg, #navigation, #headerBlock, #infoBlock{
	opacity: 0;
}
*/
#contentBg, #navigation, #headerBlock, #infoBlock, #trackBlock, #goodsBlock, #footerBlock{
	opacity: 0;
}


/*---------------------------------------------------------------Layout Format*/

/*Navigation*/
#navigation{
	position: fixed;
	width: 100%;
	z-index: 1000;
}

/*Content*/
#content{
	width: 100%;
	z-index: 100;
}

/*Each Block*/
#infoBlock, #trackBlock, #goodsBlock, #footerBlock{
	margin-bottom: 250px;
	width: 100%;
	border-top: 1px solid #00ffff;
	border-bottom: 1px solid #00ffff;
}

.inner{
	margin: 0 auto;
	padding: 0 40px;
	max-width: 1200px;
}

/*Pagetop*/
#footerBlock .pagetop{
	display: none;
	position: fixed;
	right: 40px;
	bottom: 20px;
	z-index: 500;
}
#footerBlock .pagetop img{
	width: 59px;
	height: 59px;
	cursor: pointer;
	opacity: 1;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#footerBlock .pagetop:hover img{
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}


/*---------------------------------------------------------------Navigation*/

#navigation .naviArea{
	position: relative;
}

/*Menu Open Button*/
#navigation p.naviBtn{
	position: absolute;
	right: 0;
	top: 0;
	width: 58px;
	height: 58px;
	border-left: 1px solid #00ffff;
	border-bottom: 1px solid #00ffff;
	background: url(../img/pc/btn_navi.png) no-repeat rgba(0, 51, 143, 0.95);
	text-indent: -9999px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#navigation p.naviBtn.close{
	background: url(../img/pc/btn_naviClose.png) no-repeat rgba(0, 51, 143, 0.95);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Menu Open Button Hover*/
#navigation p.naviBtn:hover{
	background: url(../img/pc/btn_navi_ov.png) no-repeat rgba(0, 255, 255, 0.9);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#navigation p.naviBtn.close:hover{
	background: url(../img/pc/btn_naviClose_ov.png) no-repeat rgba(0, 255, 255, 0.9);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Menu*/
#navigation ul.naviMenu{
	display: none;
	position: absolute;
	top: 58px;
	width: 100%;
	border-bottom: 1px solid #00ffff;
}
#navigation ul.naviMenu li{
	border-top: 1px solid #00ffff;
}
#navigation ul.naviMenu li a{
	display: block;
	width: 100%;
	height: 59px;
	background: rgba(0, 51, 143, 0.95);
	color: #00ffff;
	text-align: center;
	font-size: 28px;
	line-height: 59px;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Menu Hover*/
#navigation ul.naviMenu li a:hover{
	background: rgba(0, 255, 255, 0.9);
	color: #00338f;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

/*Sns Set*/
#navigation ul.snsSet{
	margin: 20px 85px 0 0;
	float: right;
}
#navigation ul.snsSet li{
	float: left;
}
#navigation ul.snsSet .twitterBtn{
	padding-right: 25px;
}
#navigation ul.snsSet .facebookBtn{
	width: 120px;
}


/*---------------------------------------------------------------Header Block*/

#headerBlock{
	padding-bottom: 109px;
}
#headerBlock h1{
	margin-bottom: 657px;
}
#headerBlock h1 img{
	width: 160px;
	height: auto;
}
#headerBlock p.down{
	text-align: center;
}
#headerBlock p.down img{
	width: 74px;
	height: auto;
}


/*---------------------------------------------------------------Infomation Block*/

#infoBlock{
	padding: 99px 0;
	background: url(../img/bg_info.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
/*for IE11*/
*::-ms-backdrop, #infoBlock{
	background-attachment: scroll;
}
/*for Edge*/
@supports (-ms-ime-align:auto) {
	#infoBlock{
		background-attachment: scroll;
	}
}

#infoBlock .img,
#infoBlock .article{
	float: left;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#infoBlock .img{
	padding-right: 18px;
}
#infoBlock .article{
	padding-left: 32px;
}

/*Infomation Img*/
#infoBlock .img img{
	width: 100%;
	height: auto;
}

/*Infomation Article list01*/
#infoBlock .article .list01{
	margin-bottom: 60px;
}
#infoBlock .article .list01 h2{
	display: block;
	padding: 0 15px;
	height: 60px;
	background: #00ffff;
	color: #000;
	font-size: 28px;
	line-height: 61px;
}
#infoBlock .article .list01 h3{
	display: block;
	margin-bottom: 23px;
	padding: 10px 15px;
	background: #000;
	color: #fff;
	font-size: 13px;
}
#infoBlock .article .list01 .lead{
	font-size: 15px;
	line-height: 1.7;
}

/*Infomation Article list02*/
#infoBlock .article .list02 h2{
	display: block;
	margin-bottom: 23px;
	padding: 10px 15px;
	background: #00ffff;
	color: #000;
	font-size: 20px;
	line-height: 1.1;
}
#infoBlock .article .list02 .lead{
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.7;
}
#infoBlock .article .list02 .links{
	margin-bottom: 20px;
	line-height: 1.5;
}
#infoBlock .article .list02 .price{
	color: #00ffff;
	font-size: 20px;
	line-height: 1.2;
}
#infoBlock .article .list02 .price span{
	color: #fff;
}


/*---------------------------------------------------------------Track Block*/

#trackBlock{
	padding: 99px 0;
	background: url(../img/bg_track.jpg) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
/*for IE11*/
*::-ms-backdrop, #trackBlock{
	background-attachment: scroll;
}
/*for Edge*/
@supports (-ms-ime-align:auto) {
	#trackBlock{
		background-attachment: scroll;
	}
}

/*Track List*/
#trackBlock .trackList{
	float: left;
	padding-right: 18px;
	width: 55.2%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#trackBlock .trackList h2{
	margin-bottom: 38px;
}
#trackBlock .trackList h2 img{
	width: 312px;
	height: auto;
}
#trackBlock .trackList dl{
	display: tablel;
	font-size: 30px;
	line-height: 0.8;
	padding-bottom: 22px;
}
#trackBlock .trackList dl dt,
#trackBlock .trackList dl dd{
	display: table-cell;
}
#trackBlock .trackList dl dt{
	width: 80px;
	color: #ff00ff;
}
#trackBlock .trackList dl dt span{
	color: #fff;
}
#trackBlock .trackList dl dd span.sub{
	font-size: 22px;
}
#trackBlock .trackList dl dd span.credit{
	padding-top: 4px;
	display: block;
	font-size: 14px;
	line-height: 1.3;
}
#trackBlock .trackList dl dd span a{
	color: #ff00ff;
	/*FontRendering None
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	*/
}
#trackBlock .trackList dl dd span a:hover{
	color: #fff;
}
#trackBlock .trackList p.bonus{
	padding : 10px 0 5px 0;
	color: #ff00ff;
	font-size: 20px;
}
#trackBlock .trackList p.freedl{
    padding : 70px 0 5px 0;
    color: #ff00ff;
    font-size: 20px;
}

/*Img*/
#trackBlock .img{
	float: right;
	width: 44.8%;
}
#trackBlock .img img{
	width: 100%;
	height: auto;
}

/*Soundcloud*/
#trackBlock .soundcloud{
	clear:both;
	padding-top : 25px;
	height: 166px;
	overflow: hidden;
}
#trackBlock .soundcloud2{
    clear:both;
    padding-top : 0px;
    height: 166px;
    overflow: hidden;
}


/*---------------------------------------------------------------Goods Block*/

#goodsBlock{
	padding: 99px 0;
	background: rgba(0, 51, 143, 0.9);
}

#goodsBlock .article,
#goodsBlock .img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#goodsBlock .article{
	float: left;
	width: 48.5%;
}
#goodsBlock .img{
	float: right;
	width: 43.0%;
}

/*Goods Article*/
#goodsBlock .article h2{
	margin-bottom: 30px;
	padding: 15px 20px 13px 20px;
	background: #00ffff;
	color: #000;
	font-size: 30px;
}
#goodsBlock .article p.cap{
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 1.7;
}
#goodsBlock .article p.cap span{
	display:inline-block;
	margin-bottom: 10px;
}
#goodsBlock .article p.price{
	color: #00ffff;
	font-size: 30px;
}
#goodsBlock .article p.price span{
	color: #fff;
}

/*Goods Img*/
#goodsBlock .img p{
	width: 100%;
}
#goodsBlock .img p img{
	width: 87.2%;
	height: auto;
}


/*---------------------------------------------------------------Footer Block*/

#footerBlock{
	margin-bottom: 580px;
	padding: 99px 0;
	background: rgba(0, 51, 143, 0.9);
}

/*Footer Cradit*/
#footerBlock .credit{
	float: left;
	padding-right: 40px;
	width: 34.4%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#footerBlock .credit p{
	padding-bottom: 15px;
	font-size: 14px;
	line-height: 1.2;
}
#footerBlock .credit p a{
	/*FontRendering None
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	*/
}
#footerBlock .credit ul{
	margin-top: 35px;
}
#footerBlock .credit ul li{
	float: left;
}
#footerBlock .credit ul li.logo img{
	padding-right: 20px;
	width: 102px;
	height: auto;
}
#footerBlock .credit ul li.copyright{
	padding-top: 8px;
	font-size: 11px;
}
#footerBlock .credit ul li.copyright span{
	padding-left: 5px;
}

/*Shop*/
#footerBlock .shop{
	float: right;
	width: 65.6%;
}
#footerBlock .shop h3{
	color: #02f9fb;
	font-size: 22px;
}
#footerBlock .shop h3.title02{
	margin-top: 45px;
}

/*Shop Banner*/
#footerBlock .shop ul{
	width: 100%;
}
#footerBlock .shop ul li{
	float: left;
	margin-top: 20px;
	width: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#footerBlock .shop ul li.areaL{
	padding-right: 18px;
}
#footerBlock .shop ul li.areaR{
	padding-left: 18px;
}
#footerBlock .shop ul li a{
	display: table;
	padding: 0 10px;
	width: 100%;
	height: 60px;
	background: #02f9fb;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#footerBlock .shop ul li a span.box{
	display: table-cell;
	padding-top: 2px;
	vertical-align: middle;
	text-align: center;
}
#footerBlock .shop ul li a span.text{
	padding-right: 23px;
	font-size: 20px;
	background: url(../img/pc/icon_link.png) right center no-repeat;
	color: #000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#footerBlock .shop ul li a span.box span.jp{
	font-size: 17px;
}

/*Shop Banner Hover*/
#footerBlock .shop ul li a:hover{
	background: #000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#footerBlock .shop ul li a:hover span.text{
	background: url(../img/pc/icon_link_ov.png) right center no-repeat;
	color: #02f9fb;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}


/*END*/
}
/*-------------------------------------------------------------------------------------------------------------------------------End PC TABLET Style768px*/


/*-------------------------------------------------------------------------------------------------------------------------------Start Comp Style*/

/*Main Block*/
@media screen and (min-width: 768px) and (max-width: 820px){
	#footerBlock .shop ul li a span.text{
		font-size: 16px;
	}
	#footerBlock .shop ul li a span.box span.jp{
		font-size: 14px;
	}
}

/*-------------------------------------------------------------------------------------------------------------------------------End Comp Style*/