@charset "utf-8";

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

html, body{
	height: 100%;
}

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

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

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

#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: 1200px;
	height: auto;
	position: relative;
	left: 50%;
	top: 0;
	margin: 0 auto auto -600px;
	
	transition: opacity 1s ease-out;
	opacity: 0;
	z-index: 1;
}
	.info_container.in{
		opacity: 1;
		z-index: 3;
	}
	
	.info_container .box_info{
		width: 509px;
		height: 556px;
		left: 50%;
		top: 0;
		margin: 120px auto auto -60px;
		position: absolute;
		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: absolute;
			top: 140px;
			left: 105px;
			width: 307px;
			height: 293px;
		}
		
	.info_container .box_catch{
		width: 478px;
		height: 138px;
		left: 50%;
		top: 0;
		margin: 48px auto auto -239px;
		position: absolute;
		z-index: 2;
	}
		.info_container .box_catch img{
			position: absolute;
			top: 0;
			left: 0;
			width: 478px;
			height: 138px;
		}
		
	.info_container .box_jacket{
		width: 458px;
		height: 455px;
		left: 50%;
		top: 0;
		margin: 195px auto auto -440px;
		position: absolute;
		z-index: 2;
	}
		.info_container .box_jacket img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		
	.info_container .info_bnrs{
		width: 100%;
		height: 93px;
		position: absolute;
		top: 640px;
		left: 0;
		
		display: none;
	}
		.info_container .info_bnrs .info_bnr_hires{
			width: 383px;
			height: 93px;
			position: relative;
			float: left;
			left: 50%;
			margin-left: -191px;
		}
		.info_container .info_bnrs img{
			transition: opacity 0.15s ease-out;
		}
			.info_container .info_bnrs img:hover{
				opacity: 0.5;
			}

.navi_container{
	width: 1018px;
	height: 114px;
	background-image: url('../../images/navi_bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	left: 50%;
	/* top: 740px; */
	top: 670px;
	margin: auto auto auto -509px;
	
	transition: opacity 1s ease-out;
	opacity: 0;
}
		.navi_container.in{
			opacity: 1;
		}
	
	.navi_container .navi_btn{
		margin: 32px 7px;
		height: 58px;
		float: left;
	}
		.navi_container .navi_btn img{
			transition: opacity 0.15s ease-out;
		}
			.navi_container .navi_btn img:hover{
				opacity: 0.5;
			}
		
		.navi_container .navi_btn.btn_spec{
			margin-left: 190px;
			width: 88px;
		}
		.navi_container .navi_btn.btn_news{
			margin-left: 80px;
			width: 104px;
		}
		.navi_container .navi_btn.btn_portal{
			margin-left: 74px;
			width: 132px;
		}
		.navi_container .navi_btn.btn_music{
			width: 182px;
		}
		.navi_container .navi_btn.btn_arrange{
			width: 157px;
		}
		.navi_container .navi_btn.btn_store{
			width: 110px;
		}
		.navi_container .navi_btn.btn_pv{
			width: 50px;
		}
		.navi_container .navi_btn.btn_interview{
			width: 182px;
		}

.detail_container{
	width: 100%;
	position: relative;
	top: 0;
	/* 	margin-top: 780px; */
	margin-top: 710px;
	
	transition: opacity 1s ease-out;
	opacity: 0;
}
		.detail_container.in{
			opacity: 1;
		}
	
	#detail_music{
		width: 618px;
		height: 2138px;
		background-image: url('../../images/bg_music.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_music img{
			width: 66%;
			height: auto;
			left: 17%;
			top: 7.5%;
			position: relative;
			pointer-events: none;
		}
			ul.btn_tracklist{
				position: absolute;
				top: 11.8%;
				left: 50%;
				margin-left: -70px;
			}
				ul.btn_tracklist li{
					position: relative;
					cursor: pointer;
					background-image: url('../../images/btn_music_track_play.png');
					background-size: contain;
					background-repeat: no-repeat;
					width: 60px;
					height: 20px;
					color: rgba(255, 255, 255, 0);
					transition: opacity 0.15s ease-out;
					margin-bottom: 137px;
				}
					#detail_music li.playing{
						background-image: url('../../images/btn_music_track_stop.png');
					}
					#detail_music li:hover{
						opacity: 0.5;
					}
					#detail_music li.off{
						background: none;
						width: 0;
						pointer-events: none;
					}
					#detail_music li.n10{
						margin-bottom: 165px;
					}
			
			ul.btn_detail{
				position: absolute;
				top: 11.8%;
				left: 50%;
				margin-left: 10px;
			}
				ul.btn_detail li{
					position: relative;
					cursor: pointer;
					background-image: url('../../images/btn_music_track_detail.png');
					background-size: contain;
					background-repeat: no-repeat;
					width: 72px;
					height: 20px;
					color: rgba(255, 255, 255, 0);
					transition: opacity 0.15s ease-out;
					margin-bottom: 137px;
					overflow: hidden;
				}

	
	#detail_spec{
		width: 618px;
		height: 358px;
		background-image: url('../../images/bg_spec.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_spec img{
			width: 66%;
			height: auto;
			left: 17%;
			top: 43%;
			position: relative;
			pointer-events: none;
		}
		
	#detail_news{
		width: 618px;
		height: 523px;
		background-image: url('../../images/bg_news.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_news img{
			width: 64%;
			height: auto;
			left: 18%;
			top: 30%;
			position: relative;
			pointer-events: none;
		}
		
			#detail_news .link_news{
				position: absolute;
				height: 25px;
				left: 100px;
			}
				#detail_news .link_news div{
					position: relative;
				}
			
			#detail_news .link_news.headphone{
				top: 358px;
				width: 100px;
			}
			#detail_news .link_news.gibson{
				top: 336px;
				width: 100px;
			}
			#detail_news .info_bnr_news{
				position: absolute;
				width: 101%;
				height: auto;
				left: 1%;
				top: 44%;
			}
				#detail_news .info_bnr_news img{
					pointer-events: auto;
					transition: opacity 0.15s ease-out;
					cursor: pointer;
				}
					#detail_news .info_bnr_news img:hover{
						opacity: 0.5;
					}
		
	#detail_portal{
		width: 618px;
		height: 523px;
		background-image: url('../../images/bg_portal.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_portal img{
			width: 64%;
			height: auto;
			left: 18%;
			top: 30%;
			position: relative;
			pointer-events: none;
		}
			#detail_portal .info_bnr_portal{
				position: absolute;
				width: 101%;
				height: auto;
				left: 1%;
				top: 44%;
			}
				#detail_portal .info_bnr_portal img{
					pointer-events: auto;
					transition: opacity 0.15s ease-out;
					cursor: pointer;
				}
					#detail_portal .info_bnr_portal img:hover{
						opacity: 0.5;
					}
		
	#detail_arrange{
		width: 618px;
		height: 2604px;
		background-image: url('../../images/bg_arrange.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_arrange img{
			width: 66%;
			height: auto;
			left: 17%;
			top: 0;
			position: relative;
			pointer-events: none;
		}
		#detail_arrange img:first-child{
			margin-top: 25%;
		}
			#detail_arrange .link_arrange{
				position: absolute;
				width: 220px;
				height: 25px;
				top: 1264px;
				left: 110px;
			}
				#detail_arrange .link_arrange div{
					position: relative;
				}
			
			#detail_arrange .link_arrange.ryukawamura{
				top: 2469px;
				width: 195px;
			}
	
	#detail_store{
		width: 618px;
		height: 666px;
		background-image: url('../../images/bg_store.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
	
		#detail_store .bnr_store{
			width: 80%;
			height: 93px;
			position: absolute;
			margin: 23% auto auto 11.5%;
			z-index: 3;
		}
			#detail_store .bnr_store img{
				transition: opacity 0.15s ease-out;
			}
				#detail_store .bnr_store img:hover{
					opacity: 0.5;
				}
			
			#detail_store .bnr_store div{
				position: relative;
				float: left;
			}
			#detail_store .bnr_store .link_estore{
				width: 240px;
				height: 92px;
			}
			#detail_store .bnr_store .link_sms{
				width: 240px;
				height: 92px;
			}
			#detail_store .bnr_store .link_tr{
				width: 240px;
				height: 92px;
			}
			#detail_store .bnr_store .link_amzn{
				width: 240px;
				height: 92px;
			}
			
			#detail_store ul.btn_detail{
				position: absolute;
				top: 74%;
				left: 50%;
				margin-left: -50px;
			}
				#detail_store ul.btn_detail li{
					position: relative;
					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;
					margin-bottom: 47px;
					overflow: hidden;
				}
					#detail_store li:hover{
						opacity: 0.5;
					}
			
			
	#detail_pv{
		width: 618px;
		height: 472px;
		background-image: url('../../images/bg_pv.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#youtube_pv{
			position: absolute;
			left: 50%;
			top: 140px;
			width: 460px;
			height: 258px;
			margin-left: -230px;
		}
	
	#detail_interview{
		width: 618px;
		height: 637px;
		background-image: url('../../images/bg_interview.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		left: 50%;
		position: relative;
		margin-left: -309px;
		margin-top: 20px;
	}
		#detail_interview > img{
			width: 64%;
			height: auto;
			left: 18%;
			top: 24%;
			position: relative;
			pointer-events: none;
		}
			#detail_interview .info_bnr_interview{
				position: absolute;
				width: 67%;
				height: auto;
				left: 16.5%;
				top: 78%;
			}
				#detail_interview .info_bnr_interview > img{
					width: 100%;
					height: 100%;
					transition: opacity 0.15s ease-out;
					cursor: pointer;
				}
					#detail_interview .info_bnr_interview > img:hover{
						opacity: 0.5;
					}


.intro_container{
	width: 455px;
	height: 406px;
	background-image: url('../../images/intro_bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -203px auto auto -227px;

	transition: opacity 1s ease-out;
	z-index: 2;
}
	.intro_container.out{
		opacity: 0;
		z-index: -1;
	}
	
	.intro_container .intro_select{
		position: absolute;
		left: 100px;
		top: 210px;
	}
		.intro_btn_on, .intro_btn_off{
			transition: opacity 0.15s ease-out;
			cursor: pointer;
		}
			.intro_btn_on:hover, .intro_btn_off:hover{
				opacity: 0.5;
			}
		
		.intro_container .intro_select .intro_btn_on{
			width: 104px;
			height: 44px;
			margin-right: 30px;
			position: relative;
			float: left;
		}
		.intro_container .intro_select .intro_btn_off{
			width: 104px;
			height: 44px;
			position: relative;
			float: left;
		}

.bgm_controller{
	transition: opacity 1s ease-out;
	opacity: 0;
	z-index: 4;
	position: absolute;
	right: 0;
	top: 30px;
	width: 100px;
	height: 40px;
}
	.bgm_controller.in{
		opacity: 1;
	}
	
	.btn_bgm_on, .btn_bgm_off{
		transition: opacity 0.15s ease-out;
		cursor: pointer;
		width: 100px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
	}
		.btn_bgm_on:hover, .btn_bgm_off:hover{
			opacity: 0.5;
		}
	
		.btn_bgm_on.hide, .btn_bgm_off.hide{
			display: none;
		}

.sp_menu_container{
	display: none;
}

.btn_pagetop{
	position: fixed;
	z-index: 99;
	width: 98px;
	height: 98px;
	bottom: 30px;
	right: 30px;
	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;
	}
		.btn_pagetop img:hover{
			opacity: 0.5;
		}

.popup.music_info{
	position: absolute;
	width: 440px;
	height: auto;
	background-color: #f8f2e3;
	color: #3e291a;
	padding: 30px;
	text-align: left;
	left: 50%;
	margin-left: -250px;
	font-size: 12px;
	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: 13px;
		font-weight: bold;
		margin-bottom: 5%;
	}
	.popup.in{
		z-index: 999 !important;
		animation: popup_fadein 0.5s forwards !important;
	}
	.popup.out{
		z-index: 999 !important;
		animation: popup_fadeout 0.3s forwards !important;
	}

.popup.interview{
	position: absolute;
	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;
}
	.popup.interview .text_interview{
		width: 600px;
		font-size: 12px;
		padding: 50px;
		left: 50%;
		position: absolute;
		margin-left: -350px;
		line-height: 28px;
		color: #3e291a;
	}

		.popup.interview .text_interview h1{
			font-size: 25px;
			margin-bottom: 20px;
		}
		
		.popup.interview .text_interview h2{
			font-size: 15px;
			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: 15px;
				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: 20px 60px 40px 60px;
		}
			.popup.interview .text_interview img.v{
				margin: 20px 141px 40px 141px;
			}


.btn_close{
	position: fixed;
	z-index: 999;
	width: 98px;
	height: 98px;
	bottom: 30px;
	right: 30px;
	transition: opacity 0.15s ease-out;
	
	opacity: 0;
}

	.btn_close.hide{
		display: none;
	}
	.btn_close.in{
		opacity: 1;
	}
	.btn_close.fix{
		position: absolute;
	}
	
	.btn_close img{
		cursor: pointer;
		transition: opacity 0.15s ease-out;
	}
		.btn_close img:hover{
			opacity: 0.5;
		}

}

@keyframes popup_fadeout {
	0%{
		opacity: 1;
		z-index: 99;
	}
	100%{
		opacity: 0;
		z-index: -1;
	}
}

@keyframes popup_fadein {
	0%{
		opacity: 0;
		z-index: -1;
	}
	100%{
		opacity: 1;
		z-index: 99;
	}
}