﻿@charset "utf-8";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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-style:normal;font-weight: normal;font-size: 100%;vertical-align: baseline; background:none;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}html{    overflow-y: auto;overflow-x: auto;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}input, textarea,{margin: 0;padding: 0;}ol, ul{    list-style:none;}table{    border-collapse: collapse;     border-spacing:0;}caption, th{    text-align: left;}a:focus {outline:none;}.clearfix:after {content: "."; display: block;clear: both;height: 0;visibility: hidden;}.clearfix {min-height: 1px;}* html .clearfix {height: 1px;/*\*//*/height: auto;overflow: hidden;/**/}
body{
	/*perspective: 1px;
	transform-style: preserve-3d;
	overflow-y: scroll;
	overflow-x: hidden;*/
	width:100%;
	font-family:"メイリオ","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",sans-serif !important;
	text-align:center;
	line-height:1.8 !important;
}

.light header{
	margin-bottom:0 !important;
}
.light .navbar{
	margin-bottom:0 !important;
	border-radius:0 !important;
}
.light .navbar-brand{
	padding:12px;
}
ul{
	margin:0; padding:0;
}
body.light{
	color:#420;
	background:#fff;
}
body.dark{
	color:#988;
	background:#000;
}
.dark a{
	color:#ddd;
}
.dark a:hover{
	color:#fff;
}
.dark a.btn,
.dark a:hover.btn{
	color:#fff;
}
.dark strong{
	color:#ff8000;
}
.wrapper{
	margin:auto;
}
.wrapper.sp{
}
#snsbox{
	clear:both;
	text-align:center;
}
#snsbox ul{
	width:100%;
	font-size:90%;
	max-width:100%;
	list-type:none;
	height:32px
	line-height:32px;
	padding:0;
	margin:0;
	text-align:center;
	vertical-align:middle !important;
}
.light #snsbox ul{
	background:#e1e2e6;
}
.dark #snsbox ul{
	background:#333;
}

#snsbox ul li{
	display:inline-block;
	padding: 0;
	margin: 0 2px;
	width:96px;
	height:32px
	margin:1px;
	line-height:32px;
	text-align:center !important;
	vertical-align:middle !important;
}
#snsbox ul li.apbtn{
	width:106px;
}
#snsbox ul li *{
	vertical-align:middle !important;
}
.btn{
	margin:0.5em 0;
}
article{
	width:100%;
}
.content{
}
article{
	max-width:1280px;
	margin:auto;
	font-size:12pt;
}
section #new{background: #111;}
#new h3{font-weight: 800 !important;font-size: 1.2em !important;}
#new p{text-align: center;}

h2{
	clear:both;
	margin:0 0 0.6em 0;
	font-size:1.6em;
	line-height:1.6;
}
section h2{
  margin: 0;
	font-size:20pt;
	line-height:1.6;
	color:#fff !important;
	background: #555;
	padding: 2%;
}
section h2 span{

}
small{font-size: 40%;}
.cols{
	width:100%;
	font-size:0pt;
}
.cols > *{
	display:inline-block;
	margin:1%;
	font-size:16pt;
	vertical-align:top;
}
.cols > div.nomargin{
	margin:0;
}
.cols > li.nomargin{
	margin:0%;
}
.cols > div img{
	max-width:100%;
}
.cols .col_2{
	width:48%;
}
.cols .col_2.nomargin{
	width:50%;
}
.cols .col_33{
	width:31%;
}
.cols .col_66{
	width:64%;
}
.cols .col_66.nomargin{
	width:66.66%;
}
.cols .col_3{
	width:31%;
}

.cols .col_5{
	width: 20%;
}


.cols .col_3.nomargin,
.cols .col_33.nomargin{
	width:33.33%;
}
.cols .col_4{
	width:23%;
}
.cols .col_4.nomargin{
	width:25%;
}
.cols .col_4.photo{
	width:23%;
	margin:1%;
}
.cols .col_5 .photo{
	width:20%;
	margin:0;
}
.cols .col_4.photo a{
	display:table-cell;
	background:#fff;
	vertical-align:middle;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	box-shadow:2px 2px 10px 1px #888;
	-moz-box-shadow:2px 2px 10px 1px #888;
	-webkit-box-shadow:2px 2px 10px 1px #888;
}
.cols .col_4.photo a img{
	max-width:98%;
	max-height:98%;
	margin:1%;
}
.cols .col_5 .photo a img{
	max-width:100%;
	max-height:100%;
	margin:0;
}
.al_c{
	text-align:center;
}
.al_r{
	text-align:right;
}
.al_l{
	text-align:left;
}

.cols > .val_b{
	vertical-align:baseline;
}
.video{
	background:#000;
}
.youtube{
	position:relative;
	width:100%;
	height:auto;
	margin:20px auto;
}
.youtube:after{
	content:"";
	display:block;
	padding-top:56.25%;
}
.youtube iframe{
	position:absolute;
	top:0; left:0;
	width:100% !important;
	height:100%;
	margin:auto;
}
.swImgBox,
.tn div{
	position:relative;
	width:100%;
	height:auto;
	line-height:1;
	border: 1px solid #bbb;
	margin: 5% 0;
}
.swImgBox:after,
.tn div:after{
	content:"";
	display:block;
	padding-top:100%;
}
.swImgBox img,
.tn div img{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	max-width:100%;
	max-height:100%;
	margin:auto;

}
.is_btn{
	display:block;
	line-height:3em;
	text-align:center;
	text-decoration:none !important;
	color:#fff !important;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	background-color:#06c;
}
.is_btn:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
}
.is_btn img{
	width:100%; height:auto;
	max-width:240px;
}
.is_btn-s{
	font-size:140%;
}
.is_btn-m{
	font-size:160%;
}
.is_btn-l{
	font-size:190%;
}
.is_btn_no{
	line-height:3em;
	text-align:center;
	text-decoration:none !important;
	color:#fff !important;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	background-color:#a99;
}
.stxt{
	font-size:80%;
	line-height:1.3;
}
.location{
	margin-bottom:10px;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	background:#eee;
}
.light .location{
	background:#eee;
}
.dark .location{
	background:#222;
}
.map{
	text-align:center;
}
.map img{
	border:1px solid;
	width:100%; height:auto;
}
.link p{
	text-align:center;
}

/* ページ装飾 */
section p{
	text-align:left;
}
section p.lead{
	text-align:center;
}
#overview{
	background:url(img/title_bg.jpg) no-repeat 50% 50% #000;
	background-size:cover;
}

#overview h1{
	font-size:40pt;
	padding:0.7em 0;
	color:#fff;
}
#overview h1 span{
	display:block;
}
#background {
	position: fixed;
	right: 0;
	bottom: 0;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	z-index:-1;
	background-color:#fff;
}
section.content:not(#overview){
	background:rgb(19, 19, 19);
}
section.content h2{
	font-size:200%;
	color:#555;
}
#intro{
	text-align:center;
	padding:1em;
	color:#fff;
	background:#1d1f29;
}
#intro p{
	max-width:1280px;
	margin:auto;
	font-size:12pt;
	text-align: center;
}
.content .cols > div{
	padding:6px;
	vertical-align:middle;
}
.content .cols img.mh-s{
	max-height:155px;
}
.content .cols img.mh-m{
	max-height:250px;
}
.content .cols img.mh-l{
	max-height:320px;
}
.mfp-content{
	width:90%;
	max-width:1000px;
	height:100%;
	overflow:auto;
	margin:auto;
	background:#fff;
}
.mfp-content .col_2:not(.tn){
	height:100%;
	padding:1%;
	font-size:11pt;
	vertical-align:middle;
}
.mfp-content .col_2 h2,.mfp-content .col_2 p{
margin: 4% 0;
}
.mfp-content .col_2 h2{
	font-size:1.6em;
	color:#202020;
}
.mfp-content .tn div{
	cursor:pointer;
	border:1px solid #eee;
}
.mfp-content .tn div.current{
	border:1px solid #ffd935;
}
.mfp-iframe-holder .mfp-close{
	top:0 !important;
}
.mfp-iframe-scaler iframe{
	background:#fff !important;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
	right:6px !important;
	color:#000 !important;
}
.mfp-iframe-holder .mfp-content{
	max-width:1100px !important;
}
#gallery{
	padding-top:20px;
	background:url(/roland/v-drums/img/gallery_bg.jpg) no-repeat 50% 0 #ccc fixed;
	background-size:cover;
}
#gallery h3{
	font-size:300%;
	font-weight:normal;
	color:#200;
}
.m-photo-box{
	padding-top:2px;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
}
.m-photo-box a{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	background:#eee;
}
.m-photo-box a img{
	max-width:100%;
	max-height:100%;
	margin:auto;
	vertical-align:middle;
}
#kit .cols div td{
	font-size:10pt;
}
#kit h3{
	font-size:120%;
}
#cmp{
	padding:0;
	background:#cbb59c;
}
#cmp h2{
	padding:0.4em;
	font-size:150%;
	color:#fff;
	background:#f80;
}
#cmp .cols > div{
	font-size:11pt;
}
#ne{
	padding:1px 0;
}
#ne .cols > div{
	font-size:9pt;
	text-align:left;
}
#ne .cols > div .lead{
	font-size:160%;
}
#ne h2{
	padding:1em 0;
	font-size:300%;
	color:#fff;
	background:url(/roland/v-drums/img/ne_bg.jpg) no-repeat 50% 100% #656565 fixed;
	background-size:cover;
	z-index:10000;
}
#ne h3{
	text-align:center;
	font-size:150%;
}
#ne p.lead{
	font-size:140%;
	text-align:left;
}
#lineups{
	padding-top:1px;
	background:#ccc;
}
#lineups h2{
	font-size:300%;
}
#lineups .grp{
	padding:1%;
	font-size:9pt;
	border:1px dotted #655;
	background:#fff;
}
#lineups .grp > div{
	display:inline-block;
	vertical-align:top;
	font-size:9pt;
}
#lineups .grp h3{
	font-size:200%;
}
section.content#stores{
	padding:0;
	background:#555;
	background-size:cover;
}
#stores h2{
	color:#fff;
}
#stores .cols > div{
	padding:10px;
	font-size:9pt;
	background:#e2dada;
}
#stores h2{
	font-size:200%;
}
#stores .cols > div{
	font-size:8pt;
}
#stores .storelist a{
	color:#422;
}
#stores .storelist a:hover{
	color:#4579bd;
	text-decoration:none;
}
#stores .storelist h3{
	font-size: 1.8em;
	padding: 2% 0;
}
a.popup-modal{
	font-size:10pt;
	color:#f6f6f6;
}
a.popup-modal:hover{
	color:#4579bd;
	text-decoration:none;
}
a.popup-modal h3{
	font-size:150%;
	font-weight: 500;
}
a.popup-modal p{
	font-size:100%;
	line-height:1.4;
}
img.staff{
	display:inline-block;
	width:110px;
	vertical-align:middle;
	border-radius:110px;
	-moz-border-radius:110px;
	-webkit-border-radius:110px;
}
.staff_name{
	float:right;
	width:calc(100% - 130px);
}
.staff_name h3{
	font-weight:bold;
}
.staff_name span{
	font-size:80%;
}
#stores .btn{
	clear:both;
}
article .modal-dialog{
	width:calc(100% - 20px);
}
@media only screen and (min-width:320px){
	#overview h1{
		padding:1em 1%;
		font-size:46pt;
		margin: 0;
	}
}
@media only screen and (min-width:640px){
	#overview h1{
		font-size:50pt;
	}
	#overview h1 span{
		display:inline;
	}
	#intro p{
		font-size:14pt;
	}
	a.popup-modal{
		font-size:11pt;
	}
	#cmp h2{
		font-size:250%;
	}
}
@media only screen and (min-width:768px){

	#stores .cols > div{
		font-size:10pt;
	}
	article .modal-dialog{
		width:780px;
	}
	#lineups .grp,
	#lineups .grp > div{
		font-size:11pt;
	}
}

@media only screen and (min-width:1280px){
	.content article{
		font-size:16pt;
	}
	#overview h1{
		font-size:70pt;
	}
	#intro p{
		font-size:16pt;
	}
	#new article{
		width:80%;
		font-size:14pt;
	}
	#new article .lead{
		font-size:150%;
	}
	.content article h2{
		font-size:300%;
}	}
	#stores h2{
	}
	article .modal-dialog{
		width:900px;
	}
}

article h1{
	margin:0;
}
.pagelink{
	width:100%;
	margin:10px 0;
	font-size:130%;
	text-align:center;
}
.pagelink a{
	display:block;
	padding:1em 0;
	background:#222;
}
.pagelink a:hover{
	text-decoration:none;
	background:#334;
}
.pagelink.toppage a{
	background:#f80;
}
.pagelink.toppage a:hover{
	background:#fa0;
}

@media only screen and (max-width:1280px){
	#stores .staff_name{width:100%;}
	#stores img.staff{width:45%; border-radius:45%; -moz-border-radius:45%; -webkit-border-radius:45%;}
	#new article,
	#kit article,
	#ne article,
	#lineups article
	{padding:1em;}
	#stores article{padding:0.4em;}
}
@media only screen and (max-width:800px){
	#overview{
		background:url(img/title_sp_bg.jpg) no-repeat 50% 50% #000;
		background-size:cover;
	}
	.cols .col_3,.cols .col_4.sm{width:48%;}
	.btn-lg, .btn-group-lg > .btn{font-size:12pt;}
	.cols .col_5{width: 25%;}
}
@media only screen and (max-width:640px){
	.cols .col_2.sm,.cols .col_3.sm{width:48%;}
	.cols .col_3.nomargin,.cols .col_4.nomargin{width:50%;}
	.cols .col_2.nomargin{width:100%;}
	.cols.tn .col_3.nomargin{width:33.33%;}
	.cols .col_2.md{width:98%;}
	.cols .nomargin{width:100%;}
	.cols .col_33,.cols .col_66{width:48%;}
	.cols .col_33.nomargin,.cols .col_66.nomargin{width:50%;}
	.cols .col_4.photo{width:46%;}
	.cols .col_4{width:48%;}
	/*.d_photo li{width:33.33%;}*/
	.sub_title h2{font-size:160%; height:80px; background-size:auto cover;}
	.li_photo{width:48%;}
	.sub_title h2{font-size:160%; height:80px; background-size:auto cover;}
	.li_photo{width:48%;}
	.pull-left img{max-width:150px !important;}
	img.staff{
		display:inline-block;
		width:110px;
		border-radius:110px;
		-moz-border-radius:110px;
		-webkit-border-radius:110px;
	}
	.staff_name{
		float:right;
		width:calc(100% - 130px);
	}
	section#f_lnk .cols .col_3{width:98%;}
	.pagelink{font-size:100%; margin:0;}
}
@media only screen and (max-width:480px){
	.cols .col_2,.cols .col_3{width:98%;}
	.cols .col_33,.cols .col_66{width:98%;}
	.cols .col_33.nomargin,.cols .col_66.nomargin{width:100%;}
	.cols .col_5{width: 25%;}
	#stores .staff_name{width:100%;}
	#stores img.staff{width:55%; border-radius:55%; -moz-border-radius:55%; -webkit-border-radius:55%;}
}
@media only screen and (max-width:320px){
	.cols .col_4:not(.sm){width:98%;}
	.cols .col_4.photo{width:48%;}
	.cols .col_33,.cols .col_66{width:98%;}
	.cols .col_4.nomargin,.cols .col_33.nomargin,.cols .col_66.nomargin{width:98%;}
}

footer{
	width:100%;
	clear:both;
	text-align:center;
	background:#f0ebeb;
}
footer #global_footer{
	width:940px;
	margin:auto;
	text-align:left;
}
.sp_btn{
	width:90%;
	margin:20px auto;
	padding:0;
	list-style:none;
	text-align:center;
	font-size:0;
}
.sp_btn li{
	display:inline-block;
	width:50%;
	height:2.4em;
	margin:auto;
	line-height:2.4;
	font-size:14pt;
	background:#eee;
}
.sp_btn li a{
	display:block;
	color:#fff;
	background:#06f;
}
#f_lnk{
	background:#000;
}
