@charset "utf-8";

@media screen and (max-width: 655px) {

html, body{
	height: 100%;
}

#wp{
	height: 100%;
}
	#wp.in{
		height: auto;
	}

#contents{
	background-image: url('../images/bg.jpg');
	background-size: contain;
	background-position: center center;
	background-attachment: fixed;
	position: relative;
	padding-bottom: inherit;
	overflow: hidden;
	height: 100% !important;
}

	#contents.in{
		padding-bottom: 70px;
		height: auto !important;
		overflow: inherit;
		margin-top: 60px;
	}

#sqexFooter{
	width: 100%;
}
	#sqexFooter.nallow{
		position: relative;
	}

.shadows{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
	.shadows .shadow_header{
		width: 100%;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('../images/bg_shadow_top.png');
		background-position: center center;
		background-repeat: repeat-x;
	}
	.shadows .shadow_footer{
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: url('../images/bg_shadow_bottom.png');
		background-position: center center;
		background-repeat: repeat-x;
	}

.info_container{
	width: 100%;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
	margin: 0 auto auto 0;
	
	transition: opacity 1s ease-out;
	opacity: 0;
	z-index: 1;
}
	.info_container.in{
		opacity: 1;
		z-index: 3;
	}
	
	.info_container .box_info{
		width: 100%;
		height: auto;
		left: 0;
		top: 0;
		margin: -35% auto auto 0;
		position: relative;
		background-image: url('../../images/bg_paint.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 1;
	}
		.info_container .box_info img{
			position: relative;
			width: 60%;
			height: auto;
			margin: 35% 20% 25% 20%;
		}
		
	.info_container .box_catch{
		width: 100%;
		left: 0;
		top: 0;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
		.info_container .box_catch img{
			position: relative;
			top: 0;
			left: 0;
			width: 90%;
			margin: 5% 5% 0 5%;
			height: auto;
		}
		
	.info_container .box_jacket{
		width: 100%;
		height: auto;
		left: 0;
		top: 0;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
		.info_container .box_jacket img{
			position: relative;
			top: 0;
			left: 0;
			width: 80%;
			margin: auto 10%;
		}
		
	.info_container .info_bnrs{
		height: auto;
		position: relative;
		width: 80%;
		top: 0;
		left: 10%;
		margin-top: -20%;
		z-index: 2;
		display: none;
	}
		.info_container .info_bnrs .info_bnr_hires{
			position: relative;
		}

.navi_container{
	display: none;
}

.detail_container{
	width: 100%;
	position: relative;
	top: 0;
	
	transition: opacity 1s ease-out;
	opacity: 0;
	
	margin-top: -6%;
}
		.detail_container.in{
			opacity: 1;
		}
	
	#detail_music{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_music.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_music img{
			width: 66%;
			height: auto;
			margin: 27% 17% 12% 17%;
			position: relative;
		}
			ul.btn_tracklist{
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				margin-left: -84px;
			}
				ul.btn_tracklist li{
					position: absolute;
					cursor: pointer;
					background-image: url('../../images/btn_music_track_play.png');
					background-size: contain;
					background-repeat: no-repeat;
					width: 72px;
					height: 24px;
					color: rgba(255, 255, 255, 0);
					transition: opacity 0.15s ease-out;
					/* margin-bottom: 19vw; */
				}
					#detail_music li.playing{
						background-image: url('../../images/btn_music_track_stop.png');
					}
					#detail_music li.off{
						background: none;
						width: 0;
						pointer-events: none;
					}
					#detail_music li.n10{
						margin-bottom: 23.5vw;
					}
			
			ul.btn_detail{
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				margin-left: 6px;
			}
				ul.btn_detail li{
					position: absolute;
					cursor: pointer;
					background-image: url('../../images/btn_music_track_detail.png');
					background-size: contain;
					background-repeat: no-repeat;
					width: 86px;
					height: 24px;
					color: rgba(255, 255, 255, 0);
					transition: opacity 0.15s ease-out;
					overflow: hidden;
				}
	
	#detail_spec{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_spec.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_spec img{
			width: 66%;
			height: auto;
			margin: 25% 17% 15% 17%;
			position: relative;
		}
	
	#detail_news{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_news.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_news img{
			width: 66%;
			height: auto;
			margin: 26% 17% 10% 17%;
			position: relative;
		}
			#detail_news .link_news{
				position: absolute;
				left: 17%;
				height: 6vw;
			}
				#detail_news .link_news div{
					position: relative;
				}
			
			#detail_news .link_news.headphone{
				width: 11vw;
				top: 46%;
			}
			#detail_news .link_news.gibson{
				width: 11vw;
				top: 52%;
			}
			#detail_news .info_bnr_news{
				position: absolute;
				width: 96%;
				height: auto;
				left: 2%;
				top: 17%;
			}
				#detail_news .info_bnr_news > img{
					width: 100%;
					height: 100%;
					cursor: pointer;
				}
	
	#detail_portal{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_portal.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_portal img{
			width: 66%;
			height: auto;
			margin: 26% 17% 10% 17%;
			position: relative;
		}
			#detail_portal .info_bnr_portal{
				position: absolute;
				width: 96%;
				height: auto;
				left: 2%;
				top: 17%;
			}
				#detail_portal .info_bnr_portal > img{
					width: 100%;
					height: 100%;
					cursor: pointer;
				}
		
	#detail_arrange{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_arrange.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_arrange img{
			width: 66%;
			height: auto;
			margin: 0% 17%;
			position: relative;
		}
		#detail_arrange img{
			margin-top: 0;
			margin-bottom: 19%;
		}
			#detail_arrange img:first-child{
				margin-top: 25%;
				margin-bottom: 0;
			}
			#detail_arrange .link_arrange{
				position: absolute;
				width: 35vw;
				height: 6vw;
				top: 48.1%;
				left: 17.5%;
			}
				#detail_arrange .link_arrange div{
					position: relative;
				}
			
			#detail_arrange .link_arrange.ryukawamura{
				width: 31vw;
				height: 6vw;
				top: 94.3%;
				left: 17.5%;
			}
	
	#detail_store{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_store.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		overflow: hidden;
	}
	
		#detail_store .bnr_store{
			width: 86%;
			position: relative;
			z-index: 3;
			overflow: hidden;
			margin: 22% 11% 55% 11%;
		}
			
			#detail_store .bnr_store div{
				position: relative;
				float: left;
			}
			#detail_store .bnr_store .link_estore{
				width: 45%;
				height: auto;
			}
			#detail_store .bnr_store .link_sms{
				width: 45%;
				height: auto;
			}
			#detail_store .bnr_store .link_tr{
				width: 45%;
				height: auto;
			}
			#detail_store .bnr_store .link_amzn{
				width: 45%;
				height: auto;
			}
			
			#detail_store ul.btn_detail{
				position: absolute;
				top: 0;
				left: 50%;
				height: 100%;
				margin-left: -50px;
			}
				#detail_store ul.btn_detail li{
					position: absolute;
					cursor: pointer;
					background-image: url('../../images/btn_music_track_detail2.png');
					background-size: contain;
					background-repeat: no-repeat;
					width: 100px;
					height: 20px;
					color: rgba(255, 255, 255, 0);
					transition: opacity 0.15s ease-out;
					overflow: hidden;
					
					top: 84%;
				}
					#detail_store ul.btn_detail li:first-child{
						top: 74%;
					}

	#detail_pv{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_pv.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		overflow: hidden;
	}
		#youtube_pv{
			position: relative;
			left: 50%;
			top: 0;
			width: 72vw;
			height: 40.5vw;
			margin-top: 24%;
			margin-bottom: 12%;
			margin-left: -36vw;
		}
	
	/*
		
		
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_news.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}
		#detail_news img{
			width: 66%;
			height: auto;
			margin: 23% 17% 10% 17%;
			position: relative;
		}
		
		*/
	
	#detail_interview{
		width: 100%;
		height: auto;
		background-image: url('../../images/bg_interview.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		margin-bottom: 15%;
	}
		#detail_interview > img{
			width: 66%;
			height: auto;
			margin: 24% 17% 25% 17%;
			position: relative;
		}
			#detail_interview .info_bnr_interview{
				position: absolute;
				width: 70%;
				height: auto;
				left: 15%;
				top: 78%;
			}
				#detail_interview .info_bnr_interview > img{
					width: 100%;
					height: 100%;
					cursor: pointer;
				}


.intro_container{
	width: 100%;
	height: auto;
	background-image: url('../../images/intro_bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	overflow: hidden;
	margin-top: 10%;
	
	transition: opacity 1s ease-out;
	z-index: 2;
}
	.intro_container.out{
		opacity: 0;
	}
	
	.intro_container .intro_select{
		position: relative;
		overflow: hidden;
		width: 70%;
		margin: 50% 15% 33% 15%;
	}
		.intro_btn_on, .intro_btn_off{
			transition: opacity 0.15s ease-out;
			cursor: pointer;
		}
		
		.intro_container .intro_select .intro_btn_on{
			width: 45%;
			height: auto;
			margin-right: 10%;
			position: relative;
			float: left;
		}
		.intro_container .intro_select .intro_btn_off{
			width: 45%;
			height: auto;
			position: relative;
			float: left;
		}

.bgm_controller{
	display: none;
}

.sp_menu_container{
	height: 60px;
	width: 100%;
	position: absolute;
	top: 0;
	margin-top: -60px;
	overflow: hidden;
	opacity: 0.9;
	z-index: 99;
	transition: height 0.15s ease-out;
	display: none;
}
	.sp_menu_container.in{
		display: block;
	}
	.sp_menu_container.fix{
		position: fixed;
		margin-top: 0;
	}
	.sp_menu_container.open{
		height: 497px;
	}
	.sp_menu_container .sp_menu_btn{
		width: 100%;
		height: 60px;
		position: relative;
		background-color: #FFFFFF;
		border-bottom: solid 1px #3e291a;
	}
		.sp_menu_container .sp_menu_btn img{
			height: 20px;
			width: auto;
			margin: 20px auto;
			left: 50%;
			position: relative;
		}
			.sp_menu_container .sp_menu_btn.sp_menu_tit{
				background-color: #3e291a;
			}
				.sp_menu_container .sp_menu_btn.sp_menu_tit img{
					margin-left: -30px;
				}
					.sp_menu_container .sp_menu_btn.sp_menu_tit img.menu_arrow{
						margin-left: 0px;
						transition: transform 0.15s ease-out;
					}
					.sp_menu_container.open .sp_menu_btn.sp_menu_tit img.menu_arrow{
						transform: rotate(180deg);
					}
					
				.sp_menu_container .sp_menu_btn.btn_spec img{
					margin-left: -32px;
				}
				.sp_menu_container .sp_menu_btn.btn_news img{
					margin-left: -25px;
				}
				.sp_menu_container .sp_menu_btn.btn_portal img{
					margin-left: -32px;
				}
				.sp_menu_container .sp_menu_btn.btn_music img{
					margin-left: -50px;
				}
				.sp_menu_container .sp_menu_btn.btn_arrange img{
					margin-left: -40px;
				}
				.sp_menu_container .sp_menu_btn.btn_store img{
					margin-left: -25px;
				}
				.sp_menu_container .sp_menu_btn.btn_pv img{
					margin-left: -10px;
				}
				.sp_menu_container .sp_menu_btn.btn_interview img{
					margin-left: -50px;
				}
			.sp_menu_container .bgm_controller{
				display: block;
			}
				.sp_menu_container .sp_menu_btn.btn_bgm img{
					height: 50px;
					margin: 5px auto auto -60px;
				}
					.btn_bgm_on.hide, .btn_bgm_off.hide{
						display: none;
					}



.btn_pagetop{
	position: fixed;
	z-index: 99;
	width: 18%;
	height: auto;
	bottom: 30px;
	right: 0;
	transition: opacity 0.15s ease-out;
	
	opacity: 0;
}
	.btn_pagetop.in{
		opacity: 1;
	}
	.btn_pagetop.fix{
		position: absolute;
	}
	
	.btn_pagetop img{
		cursor: pointer;
		transition: opacity 0.15s ease-out;
		width: 100%;
		height: auto;
	}

.popup.music_info{
	position: absolute;
	width: 70%;
	height: auto;
	background-color: #f8f2e3;
	color: #3e291a;
	padding: 5%;
	text-align: left;
	left: 50%;
	margin-left: -40%;
	margin-top: -21%;
	font-size: 2.5vw;
	line-height: 25px;
	opacity: 0;
	z-index: -1;
	
	/* box-shadow */
	box-shadow: 0px 0px 13px 0px #a78d68;
	-moz-box-shadow: 0px 0px 13px 0px #a78d68;
	-webkit-box-shadow: 0px 0px 13px 0px #a78d68;
	/* border-radius */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
	.popup.music_info p{
		font-size: 3vw;;
		font-weight: bold;
		margin-bottom: 5%;
	}
	.popup.in{
		z-index: 999 !important;
		animation: popup_fadein 0.5s forwards !important;
		pointer-events: all !important;
	}
	.popup.out{
		z-index: 999 !important;
		animation: popup_fadeout 0.3s forwards !important;
	}


.popup.interview{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(251, 249, 244, 0.97);
	color: #3e291a;
	text-align: left;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
}
	.popup.interview .text_interview{
		width: 90%;
		height: 90%;
		overflow: scroll;
		overflow-scrolling: touch;
		-webkit-overflow-scrolling: touch;
		font-size: 3.5vw;
		padding: 5%;
		position: absolute;
		line-height: 7vw;
		color: #3e291a;
	}

		.popup.interview .text_interview h1{
			font-size: 6vw;
			margin-bottom: 20px;
		}
		
		.popup.interview .text_interview h2{
			font-size: 4vw;
			margin-bottom: 20px;
		}
		
		.popup.interview .text_interview hr{
			width: 80%;
			margin: 40px 10%;
			padding: 0;
		}
		
		.popup.interview .text_interview span{
			
		}
		
			.popup.interview .text_interview span.tit{
				font-size: 4vw;
				font-weight: bold;
			}
			
			.popup.interview .text_interview span.name{
				font-weight: bold;
			}
			
			.popup.interview .text_interview span.name.interviewer{
				
			}
			
			.popup.interview .text_interview span.name.naka{
				color: #50a062;
			}
			
			.popup.interview .text_interview span.name.kawa{
				color: #5887ec;
			}
			
			.popup.interview .text_interview span.name.miya{
				color: #aa47c6;
			}
			
		.popup.interview .text_interview img{
			margin: 5% auto 7% auto;
width: 100%;
height: auto;
		}
			.popup.interview .text_interview img.v{
				margin: 5% 20% 7% 20%;
width: 60%;
height: auto;
			}


.btn_close{
	position: fixed;
	z-index: 999;
	width: 18%;
	height: auto;
	bottom: 0;
	right: 0;
	
	
}

	.btn_close.hide{
		display: none;
	}
	.btn_close.in{
		
	}
	.btn_close.fix{
		position: absolute;
	}
	
	.btn_close img{
		cursor: pointer;
		width: 100%;
		height: auto;
	}

}