/*リセット*/
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;
}
ol, ul, dl{
    list-style:none;
}

a{
	text-decoration:none;
}

html{
	margin:0px;
	padding:0px;
	font-size: 62.5%;
}

body{
	width:100%;
	margin:0px;
	padding:0px;
	font-size: 1.5rem;
	background:url(../images/bg.jpg);
	font-family:sans-serif;
}
#wrapper{
	width:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	overflow:hidden;
}
.pc{
	display:block;
}
.sp{
	display:none;
}

a:link, a:visited{
	color:#FF0000;
}
a:hover{
	text-decoration:underline;
}

/*フラッグと山---------------*/
#flag{
	position:fixed;
	width:100%;
	height:323px;
	background:url(../images/flag.png) no-repeat;
	background-position:center top;
}
#hill{
	position:fixed;
	width:100%;
	height:368px;
	bottom:0;
	background:url(../images/hill.png) no-repeat;
	background-position:center top;
}
#logo{
	position:absolute;
	top:20px;
	width:100%;
	text-align:center;
}


/*ナビ----------------------*/
#naviArea{
	position:relative; 
	width:960px;
	height:400px;
	margin:60px auto 0 auto;
}
#navi{
	
}
#navi li{
	position:absolute;
}

#navi li:nth-of-type(1){
	top:100px;
}
#navi li:nth-of-type(2){
	top:240px;
	left:100px;
}
#navi li:nth-of-type(3){
	top:60px;
	right:20px;
}
#navi li:nth-of-type(4){
	top:180px;
	right:140px;
}


/*全体------------------------*/
#main{
	width:100%;
	text-align:left;
}

.content{
	position:relative;
	box-sizing: boder-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	width:960px;
	margin:200px auto 100px auto;
	padding:40px 30px 40px 30px;
	text-align:center;
	line-height:1.8;
	background:rgba(255,255,255,0.9);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow:rgba(0, 0, 0, 0.3) 1px 1px 3px 1px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 1px 1px 3px 1px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 1px 1px 3px 1px;
}
.content h2{
	margin:0 0 20px 0;
	font-size:3.4rem;
	font-weight:600;
	line-height:1.2;
	color:#F85529;
}
.content h3{
	font-size:22px;
	letter-spacing:-1px;
}

.content .box{
	font-size:2.2rem;
	font-weight:600;
	line-height:1;
	}
.content .box p{
	display:inline-block;
	margin:0 8px 0 0;
	padding:8px 8px 7px 8px;
	background-color:#E50012;
	font-size:2.0rem;
}
.content .boxtext{
	margin:0 0 30px 0;
	padding:15px;
	background-color:#FFDEAD;
	line-height:1.8;
}
.content .boxtextR{
	width:80%;
	padding:20px 0 16px 0;
	margin:10px auto 8px auto;
	border:5px solid #fff;
	text-align:center;
	font-size:3.8rem;
	font-weight:600;
	opacity:0.9;
	border-radius: 10px;/* CSS3草案 */  
	-webkit-border-radius:10px;/* Safari,Google Chrome用 */  
	-moz-border-radius:10px;/* Firefox用 */
}

/*TOP*/
#newsArea{
	position:relative;
	width:100%;
	z-index:4;
}

#news{
	position:relative;
	width:700px;
	margin:0 auto 0 auto;
	padding:20px 0 5px 0;
	background:url(../images/top_kanban.png) no-repeat;
	background-size:contain;
	box-sizing: boder-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	text-align:center;
	line-height:2.0;
	text-shadow:1px 1px 0px #333;
	-moz-text-shadow:1px 1px 0px #333;
	-webkit-text-shadow:1px 1px 0px #333;
	-o-box-text-shadow:1px 1px 0px #333;
	color:#571e0d;
}

#news h1{
	font-weight:400;
	font-size:1.8rem;
	margin:0 0 20px 0;
}
#newstitle{
	width:540px;
	margin:20px auto 0 auto;
	padding:3px 0 3px 0;
	text-align:center;
	background:rgba(255,70,20,0.9);
	color:#fff;
}
#whatsnew{
	width:540px;
	height:150px;
	margin:0 auto 0 auto;
	padding:15px 0 15px 0;
	text-align:left;
	overflow-y:auto;
	color:#333;
	line-height:1.3;
}
#whatsnew dt{
	float:left;
	width:21%;
	margin:0 0 10px 0;
}
#whatsnew dd{
	float:left;
	width:79%;
	margin:0 0 10px 0;
}

#campaign{
	margin:0 auto 40px auto;
	text-align:left;
	background-color:#FFFFCE;
}
#campaign .text{
	padding:15px 15px 15px 15px;
}
#campaign dt{
	clear:left;
	float:left;
	width:8%;
	margin:0 2% 30px 0;
    padding: 3px 8px 3px 8px;
    background-color: #E50012;
    color: #fff;
    font-size: 1.8rem;
	font-weight:600;
	overflow:hidden;
}
#campaign dd{
	float:left;
	width:88%;
	margin:10px 0 30px 0;
	overflow:hidden;
	line-height:1.6;
}


/*プロフィール*/
#profile{
	margin:0 auto 100px auto;
}
.links{
	position:relative;
	bottom:0;
	right:0;
	text-align:right;
}
.links img{
	margin:0 0 0 10px;
}
#artistphoto{
	float:left;
	width:40%;
	margin:0 20px 20px 0;
}

/*MV*/
#mvArea{
	background:#000;
	color:#fff;
	text-align:center;
}
.youtube{
	width:100%;
}


/*アルバム*/
#jacket{
	float:left;
	margin:0 10px 0 0;
}
#profile .text{
	float:left;
	width:auto;
	margin:0 10px 15px 0;
	text-align:left;
	color:#fff;
}
#profile .cdtext{
	float:left;
	width:530px;
	margin:0 0 15px 0;
	font-size:12px;
	line-height:1.6;
	text-align:left;
}

#profile .photo{
	float:left;
	margin:0 15px 20px 0;
}
.detail{
	margin:30px 0 60px 0;
	text-align:left;
}

.detail .text{
	line-height:1.7;
}

hr{
	border:none:
	border-bottom:1px solid #454545;
	margin:40px auto 40px auto;
}


/*コピーライト-----------------*/
#copyright{
	position:relative;
	width:960px;
	color:#999;
	text-align:center;
	font-size:9px;
	margin:10px auto 10px auto;
	z-index:4;
}
/*トップにもどる*/
.totop{
	cursor:pointer;
	letter-spacing:-1px;
}


@media screen and (max-width: 640px) {
    	
	body{
		background-size:50%;
	}
		
	/*フラッグと山---------------*/
	#flag{
		height:100px;
		background-size:cover;
	}
	#hill{
		height:120px;
		background-size:cover;
	}
	#logo{
		top:10px;
	}
	/*ナビ----------------------*/
	#naviArea{
		width:100%;
		height:auto;
		margin:7vh auto 0 auto;
	}
	#navi li{
		width:30%;
	}
	#navi li:nth-of-type(1){
		top:2vh;
		left:0;
	}
	#navi li:nth-of-type(2){
		top:15vh;
		left:10%;
	}
	#navi li:nth-of-type(3){
		top:0;
		right:0;
	}
	#navi li:nth-of-type(4){
		top:12vh;
		right:10%;
	}
	
	
	
	#main{
		width:100%;
		margin:0 auto 0 auto;
	}
	.content{
		width:92%;
		margin:0 auto 0 auto;
		padding:15px 2% 30px 2%;
		text-align:left;
	}
	.content h2{
		font-size:2.4rem;
		text-align:center;
	}
	.content h3{
		text-align:center;
		font-size:1.6rem;
	}
	.content h4{
		font-size:2.4rem;
	}
	.content .boxtextR{
		padding:15px 0 16px 0;
		font-size:2.8rem;
	}
	.logoImg{
		margin:15px auto 5px auto;
	}
	
	
	/*NEWS---------------------*/
	#news{
		width:96%;
		margin:32.6vh auto 40px auto;
		padding:15px 1% 5px 1%;
		background-size:cover;
	}
	#news h1{
		font-size:1.3rem;
		letter-spacing:-1px;
		text-align:center;
	}
	#newstitle{
		width:100%;
		padding:3px 0 3px 0;
		background:#E50012;
	}
	#whatsnew{
	  width:94%;
	  height:110px;
	  margin:5px auto 100px auto;
	  padding:5px 1% 15px 2%;
	  background:none;
	  font-size:1.4rem;
	  overflow-y:auto;
	}
	 #whatsnew dt{
		float:none;
		width:100%;
		margin:0;
	 }
	 #whatsnew dd{
		float:none;
		width:100%;
	 }
	 
	 #campaign dt{
		clear:none;
		float:none;
		width:20%;
		margin:0 2% 0px 0;
		padding: 1px 8px 1px 8px;
		font-size: 1.5rem;
	}
	#campaign dd{
		float:none;
		width:100%;
		margin:10px 0 30px 0;
	}

	 
	/*プロフィール*/
	#profileArea{
		padding:20px 0 20px 0;
	}
	#profile{
		margin:0 auto 100px auto;
	}
	#artistphoto{
		float:none;
		width:100%;
		margin:0 15px 0 0;
	}
	/*アルバム*/
	#profile .photo{
		float:none;
		margin:0 0 20px 0;
	}
	#jacket{
		float:none;
		margin:0 auto 0 auto;
	}
	.detail h2{
		font-size:3.0rem;
		text-align:center;
  	}
	#profileArea .cdtext{
		float:none;
	 	width:100%;
	}
	.links{
		text-align:center;
	}

	
	
	/*MV*/
	#cm ul li{
		width:32%;
		margin:0 2% 10px 0;
	}
	#cm ul li:nth-of-type(3n){
		margin:0 0 10px 0;
	}
	
	
	

	
	
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	
	#copyright{
		width:96%;
		text-align:center;
		margin:10px auto 10px auto;
	}

	.img100{
		width:100%;
	}
	.img90{
		width:90%;
	}
	.img80{
		width:80%;
	}
	.img70{
		width:70%;
	}
	.img60{
		width:60%;
	}
	.img50{
		width:50%;
	}


}








/*----------------------------------------------------
  レイアウト
----------------------------------------------------*/

.top_space3 { margin-top:3px; }
.top_space5 { margin-top:5px; }
.top_space6 { margin-top:6px; }
.top_space7 { margin-top:7px; }
.top_space10 { margin-top:10px; }
.top_space12 { margin-top:12px; }
.top_space13 { margin-top:13px; }
.top_space15 { margin-top:15px; }
.top_space20 { margin-top:20px; }
.top_space25 { margin-top:25px; }
.top_space30 { margin-top:30px; }
.top_space35 { margin-top:35px; }
.top_space40 { margin-top:40px; }
.top_space45 { margin-top:45px; }
.top_space50 { margin-top:50px; }
.top_space55 { margin-top:55px; }
.top_space60 { margin-top:60px; }
.top_space65 { margin-top:65px; }
.top_space70 { margin-top:70px; }
.top_space80 { margin-top:80px; }
.top_space90 { margin-top:90px; }
.top_space100 { margin-top:100px; }

.botom_space5 { margin-bottom:5px; }
.botom_space10 { margin-bottom:10px; }
.botom_space15 { margin-bottom:15px; }
.botom_space20 { margin-bottom:20px; }
.botom_space25 { margin-bottom:25px; }
.botom_space30 { margin-bottom:30px; }
.botom_space35 { margin-bottom:35px; }
.botom_space40 { margin-bottom:40px; }
.botom_space50 { margin-bottom:50px; }
.botom_space60 { margin-bottom:60px; }

.left_space5 { margin-left:5px; }
.left_space10 { margin-left:10px; }
.left_space15 { margin-left:15px; }
.left_space20 { margin-left:20px; }
.left_space25 { margin-left:25px; }
.left_space30 { margin-left:30px; }
.left_space40 { margin-left:40px; }
.left_space41 { margin-left:41px; }
.left_space45 { margin-left:45px; }
.left_space50 { margin-left:50px; }

.right_space5 { margin-right:5px; }
.right_space10 { margin-right:10px; }
.right_space15 { margin-right:15px; }
.right_space20 { margin-right:20px; }
.right_space30 { margin-right:30px; }
.right_space40 { margin-right:40px; }
.right_space50 { margin-right:50px; }


.patop_space5 { padding-top:5px; }
.patop_space10 { padding-top:10px; }
.patop_space15 { padding-top:15px; }
.patop_space20 { padding-top:20px; }
.patop_space30 { padding-top:30px; }

.paright_space5 { padding-right:5px; }
.paright_space7 { padding-right:7px; }
.paright_space10 { padding-right:10px; }
.paright_space13 { padding-right:13px; }
.paright_space15 { padding-right:15px; }
.paright_space20 { padding-right:20px; }

.paleft_space5 { padding-left:5px; }
.paleft_space7 { padding-left:7px; }
.paleft_space10 { padding-left:10px; }
.paleft_space15 { padding-left:15px; }
.paleft_space20 { padding-left:20px; }
.paleft_space30 { padding-left:30px; }

.pabotom_space5 { padding-bottom:5px; }
.pabotom_space10 { padding-bottom:10px; }
.pabotom_space15 { padding-bottom:15px; }
.pabotom_space20 { padding-bottom:20px; }
.pabotom_space30 { padding-bottom:30px; }


.text{
	text-align:left;
	line-height:2.0;
}

.letter_narrow{
	letter-spacing:-1px;
}
.fleft{
	float:left;
	overflow:hidden;
}
.fright{
	float:right;
	overflow:hidden;
}
.txtLeft{
	text-align:left;
}
.txtRight{
	text-align:right;
}
.txtcancel{
	text-decoration: line-through;
}
.thick{
	font-weight:600;
}

.red{
	color:#ff0000;
}
.gray{
	color:#999;
	}


.disp_none{
	display:none;
}

.cursor{
	cursor:pointer;
}
.center{
	text-align:center;
	margin:0px auto 0px auto;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
	
.clear{
	clear:both;	
}

.textsmall{
	font-size:1.1rem;
}

.textmedium{
	font-size:1.3rem;
	line-height:1.6;
}