/************************************************************************************

RESET

************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}


/************************************************************************************

WEB FONT

************************************************************************************/

/*BOLD*/
@font-face {
    font-family: "mplus-bold";
    src:url('font-mplus-2p-bold.eot');
	src:url('font-mplus-2p-bold.eot?#iefix') format('eot'),
		url('font-mplus-2p-bold.ttf') format('truetype');
}

/*###################################################################################

COMMON

###################################################################################*/
body{
	background:url(../images/bg-body.png) repeat;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#444;
	text-align:center;
	min-width: 1010px;
}
a {
	color:#09C;
	text-decoration: none;
}
a:hover {
	color:#036;
	text-decoration:underline;
}
a img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

div{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/************************* CLEARFIX */
.clearfix:after{
content: url(../images/spacer.gif);
display: block;
height: 0;
 clear: both;
visibility: hidden;
font-size: 0.1em;
line-height: 0;
}
.clear{ clear:both;}

/*float*/
.left{ float:left !important;}
.right{ float:right !important;}

p{ margin:0 0 1em 0; line-height:1.6em;}
.bold{ font-weight:bold;}

.margin0{margin:0 !important;}
.margin1em{margin:0 0 1em 0 !important;}
.margin2em{margin:15px 0 2em 0 !important;}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w45{width:45% !important;}
.w50{width:50% !important;}
.w60{width:60% !important;}
.bold{font-weight:bold;}
.aligncenter{ text-align:center !important;}

/*###################################################################################

Wrapper & HEADER

###################################################################################*/

#wrapper{
	width:1000px;
	padding:0;
	margin:0 auto;
	overflow:hidden;
}
#header{
	width:100%;
	background:#000;
	padding:10px 0;
	line-height:1em;
	border: 1px solid #000;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	-o-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	position: relative;
	behavior: url(css/PIE.htc);

}

#rmlogo{
	margin:5px 0 0 10px;
	padding:0;
	float:left;
}
/*SOCIAL-NAVIGATION*/
.social-wrapper {
	margin:0 0 0 10px;
	padding:0;
	width: 600px;
	text-align:right;
	float:right;
}
ul.socialbtn{
	list-style:none;
	margin: 0;
	padding:0;
}
ul.socialbtn li{
	padding:0 4px 0 0;
	display: -moz-inline-box; /*for Firefox 2*/
	display: inline-block; /*for modern*/
	/display: inline; /*for ie5-7*/
	/zoom: 1; /*for ie5-7*/
	vertical-align:top;
	background : none;
	margin:0;
}



/* TITLE */
#title{
	width:100%;
	padding:0;
	margin:0 0 1em 0;
	/*text-align:left;*/
}
h1{
	padding:0;
	margin:2em 0 0 0;
	border:0;
	font-size:10px;
	color:#999;
	text-align:center;
}
h2{
	padding:0;
	margin:2em 0 2em 0;
	font-size:16px;
	line-height:1.7em;
	text-align:left;
	/*width:650px;*/
}
h2 span{
	font-size:14px;
	font-weight:normal;
}
.sample{
	width:277px;
	height:auto;
	padding:0;
	margin:15px 15px 0 0;
	/*float:right;*/
}
.cd{
	padding:0;
	margin:0 15px 10px 15px;
}

#seminar-link{
	padding: 10px;
	margin: 0 0 1em 0;
	background: #f2f2f2;
	font-size: 12px;
	font-weight: bold;
	line-height: 1em;
	border: 1px solid #ddd;
}


/*###################################################################################

CONTENTS

###################################################################################*/
.contents-wrapper{
	/*margin:0 -30px 0 0 !important;*/
	margin:0 -30px 0 0;    
	padding:0;
	overflow:hidden;
	float:left;
}
.contents-wrapper-single{
	/*margin:0 30px 0 0 !important;*/
	margin:0 30px 0 0;    
	padding:0;
	float:left;
    width: 310px;
}
.category-h{
	width:97%;
	display:block;
	padding:10px 5px;
	margin:0 0 1em 0;
	font-size:14px;
	font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-weight:bold;
	line-height:1em;
	text-align:left;
	color:#fff;
	background-color:#d3d2cc;
	border: 1px solid #d3d2cc;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	-o-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
	position: relative;
	behavior: url(css/PIE.htc);
}

#guitar .category-h{
	background-color:#B92723;
	border: 1px solid #B92723;
}

#bass .category-h{
	background-color:#875484;
	border: 1px solid #875484;
}

#drums .category-h{
	background-color:#018DCA;
	border: 1px solid #018DCA;
}


#keyboard .category-h{
	background-color:#D96594;
	border: 1px solid #D96594;
}


#vocal .category-h{
	background-color:#F6941D;
	border: 1px solid #F6941D;
}






/*Item Box*/
.item{
	width:310px;
	height:285px;
	background-image:url(../images/item-h-border.png);
	background-repeat:no-repeat;
	background-position:left top;
	border:1px solid #bfbfbf;
	padding:5px 0 0 0;
	margin:0 30px 30px 0;
	text-align:left;
	float:left;
	position:relative;
}
.item:hover{
	background-color:#fcfaef;
	cursor:pointer;
}
.item-simple{
	width:310px;
	height:260px;
	padding:0;
/*	margin:0 30px 30px 0;*/
	margin:0 30px 55px 0;    
	text-align:left;
	float:left;
	position:relative;
}


/*Item Title*/
.item h3{
	height:45px;
	font-size:14px;
	font-family:mplus-bold "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-weight:normal;
	line-height:1.3em;
	padding:10px;
	margin:0;
	color:#f38f00;
}
.item h3 a{color:#f38f00 !important;}
.item h3 a:hover{color:#bb4b58 !important; text-decoration:none !important;}
.item h3 span{ font-size:10px !important;}

.margin2em , .margin2em a{
    font-size: 15px;
    text-align: center;
}


/*Item Box*/
#guitar .item{
	background-image:url(../images/item-h-border-g.png);
}
/*Item Title*/
#guitar .item h3{
	color:#B92723;
}
#guitar .item h3 a{color:#B92723 !important;}
#guitar .item h3 a:hover{color:#B92723 !important; text-decoration:none !important;}




/*Item Box*/
#bass .item{
	background-image:url(../images/item-h-border-b.png);
}
/*Item Title*/
#bass .item h3{
	color:#875484;
}
#bass .item h3 a{color:#875484 !important;}
#bass .item h3 a:hover{color:#875484 !important; text-decoration:none !important;}




/*Item Box*/
#drums .item{
	background-image:url(../images/item-h-border-d.png);
}
/*Item Title*/
#drums .item h3{
	color:#018DCA;
}
#drums .item h3 a{color:#018DCA !important;}
#drums .item h3 a:hover{color:#018DCA !important; text-decoration:none !important;}





/*Item Box*/
#keyboard .item{
	background-image:url(../images/item-h-border-k.png);
}
/*Item Title*/
#keyboard .item h3{
	color:#D96594;
}
#keyboard .item h3 a{color:#D96594 !important;}
#keyboard .item h3 a:hover{color:#D96594 !important; text-decoration:none !important;}




/*Item Box*/
#vocal .item{
	background-image:url(../images/item-h-border-v.png);
}
/*Item Title*/
#vocal .item h3{
	color:#F6941D;
}
#vocal .item h3 a{color:#F6941D !important;}
#vocal .item h3 a:hover{color:#F6941D !important; text-decoration:none !important;}



/*Jacket*/
.jkt-img{
	width:100px;
	height: auto;
	padding:0;
    margin: 10px 10px 35px 10px;
	border:1px solid #ddd;
	float:left;
}
.drill-img{
    width: 215px!important;
}
/*Summary*/
.item-summary{
	font-size:10px;
	line-height:1.4em;
	padding:10px;
	margin:0 0 1em 0;
    color: rgb(68, 68, 68);    
}

/*Detail Link*/
.item-detail-link{
	width:308px;
	padding:5px 25px 5px 5px;
	margin:0;
	background:#dadada url(../images/arrow-detail.png) no-repeat 290px 8px;
	text-align:right;
	position:absolute;
	bottom:0;
	color:#698d8e;
}
.item-detail-link:hover{color:#036;}


/*###################################################################################

FOOTER

###################################################################################*/


#footer{
	width:100%;
	padding:20px 0;
	margin:2em 0 0 0 !important;
	text-align:center;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	color:#fff;
	background:#000;
	border: 1px solid #000;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-o-border-radius: 10px 10px 0 0x;
	border-radius: 10px 10px 0 0;
	position: relative;
	behavior: url(css/PIE.htc);
}

/************************* ANCHOR */
#page-top{
	position:fixed;
	bottom: 50px;
	right: 0;
	padding: 0;
	text-align:left;
	line-height:1em;
}
#page-top a img{ opacity:0.6; filter: alpha(opacity=60); cursor:pointer;}
#page-top a img:hover{ opacity:1.0; filter:alpha(opacity=100); cursor:pointer;}


.topImg{
    display: inline-block;
}
.topAppBaner{
    display: inline-block;
    margin: 10px 5px;
    border: 1px solid #a2a2a2;
    padding: 5px;
    float: left;
}
.topAppBaner img{
    width:300px;    
}
.topAppBaner a.textLink{
	display: inline-block;
	transition: .3s;
    text-decoration: none;
}
.topAppBaner a.textLink:hover{
    transform: rotate(2.7deg);
    color: #000;
}
.topAppBaner p{
    text-align: center;
    line-height: 1.8em;
    font-size: 13px;
    margin: 4px auto;    
}
.appDownloadLink{
    width:100%;
    font-size:17px;
    font-weight: 500;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#a20703;
    border-radius:5px;
    box-shadow:2px 2px #640013;
}
.dArrow{
    display: none;
}