@charset "Shift_JIS";
/* MQ.CSS_start 
-------------------------------------------------- :*/

/* 1100px以下＋SCROLL_BAR＋20PXに適用
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
 */
@media only screen and (max-width:1120px) {

/* H1　HEADER  INNER　start
-------------------------
-------------------------
-------------------------
*/
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}

.header_p{display:none;}
h1{
	width:40%; float:left;
}


/* MENU start
-------------------------
-------------------------
-------------------------
 */

header ul{
float:right;
width:400px;
margin-top:0px;
}

header ul li{
float:left;
font-family: 'Open Sans', sans-serif;
margin-right:20px;
display:inline-block;
text-align:right;
}

header ul li:last-child{
margin-right:0;
}

header ul li a{
font-size:1.4rem;
font-weight:bold;
color:#FFF;
}

header .inner{
max-width:768px;
padding:25px 0;
}

header ul li{width:160px; height:20px; padding-bottom:10px; float:left;}
header ul li:nth-child(1){width:170px;}
header ul li:nth-child(2){width:170px;}
header ul li:nth-child(3){width:170px;}
header ul li:nth-child(4){width:170px;}
header ul li:nth-child(5){width:170px;}

/* mainpage start ------------------------- */
.mainpage_inner{
	width:768px;
	
	margin:190px auto;
}

/* メインエリア mainpage start ------------------------- */
#main .inner{
	position:relative;
	width:768px;
	margin:180px auto;
	padding:0 0;
	overflow:hidden;
	background:url(../images/jkt_bg.png) no-repeat center 120px;
}

.ycbtn{
	position: absolute;
	display:block;
	width:160px;
	height:160px;
	bottom:70px;
	right:50px;
	background:rgba(0,0,0,0);
}
.ycbtn img{
	width:100%;
	height:auto;
}

/*ジャケット*/
#main .inner h2{
float:none;
width:100%;
margin-right:0;
}

#main .inner h2 img{
	display:block;
	margin:0 auto;
	float:none;
	width:40%;
	height:auto;
}

/* タイトル */
#main .inner h3{
	float:none;
	width:640px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
}

#main .inner h3 img{ width:100%;}

/* テキストエリア */
#main .inner p{
float: none;
margin:20px auto 0;
width:640px;
font-size:1.5rem;
line-height:2.6rem;
}

/* 特典影像・詳しく　ボタン */
#main .inner .subbtn{
	float:none;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	width:60%;
	overflow:hidden;
}

/* 特典影像・詳しく　ボタン */
#main .inner .subbtn ul li:nth-child(1){
	float:left;
	width:75px;
	margin-right:20px;
	}
#main .inner .subbtn ul li:nth-child(1) img{width:100%;}
#main .inner .subbtn ul li:nth-child(2){ float:left; width:284px; margin-top:11px;}
#main .inner .subbtn ul li:nth-child(2) img{ width:100%;}
#main .inner .subbtn ul li:nth-child(2) a{ display:block;}
#main .inner .subbtn ul li:nth-child(2) a:hover{ background-color:rgba(255,255,255,0.50)}
 

/* 購入・オリ特　ボタン */
#main .inner .mainbtn{ padding-top:20px; clear:both; overflow:hidden;}
#main .inner .mainbtn ul{ width:90%; margin:0 auto 0;}
#main .inner .mainbtn li{ width:50%; float:left;}
#main .inner .mainbtn li img{width:90%; height:auto; float: left;}
#main .inner .mainbtn li img:hover{ background:rgba(255,238,191,0.50); transition:.3s;}


/* トラックリスト／収録曲 ------------------------- */
#track{}
#track .inner{
	width:768px;
	margin:0 auto 0;
	padding:160px 0 120px;
}

/* h2 */
#track .inner h2{}
#track .inner h2 img{
	width:290px;
	text-align:left;
	display:block;
	margin:0;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}

/* 楽曲リスト */
#track .inner ul{
	float:left;
	margin-top:30px;
	width:240px;
	}

#track .inner ul li{
	padding:1px 0;
	font-weight:bold;
	font-size:1.2rem;
	}
	
#track .inner ul li span{
	display:block;
	font-size:1.1rem;
	text-indent:1.1rem;
	}

#track .inner ul li ul{
	text-indent:2.4rem; 
	margin-top:0!important;
	margin-bottom:20px;
}
#track .inner ul li ul span{text-indent:3.6rem;}
#track .inner ul li.mc_en{color:#FFEDBF;}

#thumbnail{
	width:380px;
	height:280px;
	float:none;
	clear:both;
	margin-top:160px;
	position:relative;
	}

#thumbnail img.thumb_chatch{
	position:absolute;
	top:0;
	left:0;
	width:65px;
	height:auto;
	z-index:0;
}

#thumbnail img.thumb_img{
	position:absolute;
	top:20px;
	left:20px;
	width:360px;
	height:auto;
}

#thumbnail p{
	position:absolute;
	bottom:5px;
	left:20px;
	width:360px;
	font-size:1.3rem;
}

#thumbnail a{
	position:absolute;
	top:20px;
	left:20px;
	display:block;
	width:360px;
	height:203px;
	background-color:rgba(255,255,255,0.00);
}

#thumbnail a:hover{ background-color:rgba(255,255,255,0.25);}
.boss{
	position:absolute;
	top:100px;
	right:-280px;
	z-index:-1;
	width:776px;
	height:995px;
	background:url(../images/boss_bg_img.png);
}

/* スポットムービー Spot Movie ------------------------- */
#spot{}
#spot .inner{
	width:768px;
	margin:0 auto 0;
	padding:160px 0 120px;
	}
/* h2 タイトル */
#spot .inner h2{padding-bottom:60px;}
#spot .inner h2 img{
	width:185px;
	text-align:center;
	display:block;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}

/* YOUTUBE start ------------------------- */
.iframe_outer{
width:740px;
height:416px;
margin:0 auto 0;
overflow:hidden;
/* box-shadow */
}

.iframe_outer iframe{
display:block;
width:740px;
height:416px;
margin:0 auto;
overflow:hidden;
}

/* 体験者様の声 ------------------------- */
#voice{}
#voice .inner{
	width:768px;
	margin:0 auto 0;
	padding:160px 0 120px;
}


/* h2 タイトル */
#voice .inner h2{padding-bottom:60px;}
#voice .inner h2 img{
	width:460px;
	text-align:center;
	display:block;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}
#voice .inner h3{
	text-align:center;
	margin:0 auto;
	font-size:1.5rem;
	line-height:2.3rem;
	color:#FFEEBF;
}
#voice .inner p{
	width:680px;
	text-align:left;
	margin:20px auto 0;
	font-size:1.4rem;
	line-height:2.0rem;
	color:#FFF;
}

.vote_btn{
	width:680px;
	margin:0 auto;
	}

.vote_btn ul{ margin-top:20px;}
.vote_btn ul li{
	float:left;
	width:50%;}


.vote_btn img{
		width:99%;
	}
.vote_btn img:hover{background:rgba(255,238,191,0.50); transition:.3s;}

.experience{
	margin:30px auto 0;
	padding:60px 0;
	width:680px;
	background:#fff;
}

.experience ul{
	margin:0 auto;
	padding:0;
	width:560px;
	height:560px;
	overflow: auto;
}

.experience ul li{
	font-size:1.5rem;
	line-height:2.4rem;
	font-weight:bold;
	color: #333;
	width:510px;
	margin:0 0 0px;
	border-bottom:1px solid #999;
}

.experience ul li span{
	font-weight:bold;
	padding:15px 0;
	display:block;
	font-size:1.3rem;
	line-height:2.0rem;
}




/* OFFICIAL BANNER ------------------------- */

#official{}
#official .inner{
	width:768px;
	margin:0 auto 0;
	padding:160px 0 120px;
}

/* h2 タイトル */
#official .inner h2{padding-bottom:60px;}
#official .inner h2 img{
	width:263px;
	text-align:center;
	display:block;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}
#official .inner div{
	margin:0 auto;
	padding:50px;
	background:rgba(255,255,255,.15);
}

#official .inner div h3{
	text-align:center;
	margin:0 auto;
	font-size:1.5rem;
	line-height:2.6rem;
	color:#FFEEBF;
}

#official .inner div p{
	width:90%;
	margin:20px auto 0;
	font-size:1.2rem;
	line-height:2.0rem;
}


#official .inner div ul li h4{
	padding:0 0 10px;
	font-size:1.4rem; text-align:center; color:#FFEEBF;}

#official .inner ul li div{
	width:400px;
	margin:40px auto 0;
	padding:0;
	background:none;
}

#official .inner div ul li img{ width:100%;}
#official .inner div ul li img:hover{
	cursor: pointer;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	transition:.3s;
}

#official .inner div ul li a{
	display: block;
	background:rgba(255,238,191,1.00);
}



}


/* 768px＋20px以下に適用 モバイル
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
---------------------------------------------------------------------------
*/

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

/* 影像 背景消し */
#bgv{ display:none;}
#bgv_filter{ display:none;}


/* ドロップダウンメニュー */
body{
	position:relative;
	font-size:1.4rem;
	color:#FFF;
	background:url(../images/top_bg.jpg) fixed center center no-repeat #000;
	background-size: contain;
}


.js #menu {display:none;}
.js .slicknav_menu {
display:block;
position: absolute;
z-index:1001;
top:0;
right:0;
margin:0;
padding:0;
width:155px;
}

h1{
z-index:1005;}


/* 影像 背景消し */
#bgv{ display:none;}
#bgv_filter{ display:none;}


/* H1　HEADER  INNER　start
-------------------------
-------------------------
-------------------------
*/
header{
position: relative;
top: 0;
left: 0;
z-index: 1000;
margin:0;
padding:0;
width:160px;
overflow:hidden;
}

.header_p{display:none;}
h1{
	width:160px;
	float:left;
}

header .inner{
padding:5px 0;
margin:0 auto;
}


/* モバイル用 画像消し、テキストメニュー表示 */

.slicknav_menu img{ display:none;}
header ul li a span{ display: block;}


/* メインエリア mainpage start ------------------------- */

#main .inner{
	width:100%;
	position:relative;
	margin:0 0 0;
	padding:70px 0 40px;
	background:none;
	overflow:hidden;
}

.ycbtn{
	position: absolute;
	display:block;
	width:90px;
	height:90px;
	top:5px;
	right:5px;
	background:rgba(0,0,0,0);
	border-radius:80px;
}

.ycbtn:hover{background:rgba(217,0,0,0.30);}
.ycbtn img{width:100%; height:auto;}


/*ジャケット*/
#main .inner h2{
float:none;
width:100%;
margin-right:0;
}

#main .inner h2 img{
	display:block;
	margin:0 auto;
	float:none;
	width:200px;
	height:auto;
}

/* タイトル */
#main .inner h3{
	float:none;
	width:100%;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
}

#main .inner h3 img{ display:none;}
#main .inner h3 span{display: block;
width:96%;
margin:0 auto;
font-size:1.5rem;
line-height:2.4rem;
font-weight:bold; 
}

/* テキストエリア */
#main .inner p{
float: none;
margin:10px auto 0;
width:96%;
font-size:1.3rem;
line-height:2.2rem;
}

/* 特典影像・詳しく　ボタン */
#main .inner .subbtn{
	float:none;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	width:96%;
	overflow:hidden;
}

/* 特典影像・詳しく　ボタン */
#main .inner .subbtn ul li:nth-child(1){
	float:left;
	width:20%;
	margin-right:4%;
	}
#main .inner .subbtn ul li:nth-child(1) img{width:100%;}
#main .inner .subbtn ul li:nth-child(2){ float:left; width:70%; margin-top:11px;}
#main .inner .subbtn ul li:nth-child(2) img{ width:100%;}
#main .inner .subbtn ul li:nth-child(2) a{ display:block;}
#main .inner .subbtn ul li:nth-child(2) a:hover{ background-color:rgba(255,255,255,0.50)}
 

/* 購入・オリ特　ボタン */
#main .inner .mainbtn{ padding-top:20px; clear:both; overflow:hidden;}
#main .inner .mainbtn ul{ width:96%; margin:0 auto 0;}
#main .inner .mainbtn li{ width:100%; float:none; margin-bottom:10px;}
#main .inner .mainbtn li img{width:100%; height:auto; float:none;}
#main .inner .mainbtn li img:hover{ background:rgba(255,238,191,0.50); transition:.3s;}


/* トラックリスト／収録曲 ------------------------- */
#track{}
#track .inner{
	width:96%;
	margin:0 auto 0;
	padding:70px 0 40px;
}

/* h2 */
#track .inner h2{
	margin-bottom:20px;}
#track .inner h2 img{
	max-width:40%;
	max-width:200px;
	text-align:left;
	display:block;
	margin:0;
	padding-bottom:10px;
	border-bottom:1px solid #FFF;
}

/* 楽曲リスト */
#track .inner ul{
	float:none;
	margin-top:0;
	margin-left:auto;
	margin-left:auto;
	width:96%;
	}

#track .inner ul li{
	padding:1px 0;
	font-weight:bold;
	font-size:1.2rem;
	}
	
#track .inner ul li span{
	display:block;
	font-size:1.1rem;
	text-indent:0.1rem;
	}

#track .inner ul li ul{
	text-indent:1.2rem; 
	margin-top:0!important;
	margin-bottom:5px;
}
#track .inner ul li ul span{text-indent:1.8rem;}
#track .inner ul li.mc_en{color:#FFEDBF;}

#thumbnail{
	clear:both;
	width:308px;
	float:none;
	margin:15px auto 0;
	position:relative;
	}

#thumbnail img.thumb_chatch{
	position:absolute;
	top:0;
	left:0;
	width:65px;
	height:auto;
	z-index:0;
}

#thumbnail img.thumb_img{
	position: relative;
	top:0px;
	left:0px;
width:300px;
height:169px;
}

#thumbnail p{
	position: relative;
	top:5px;
	left:0;
	width:100%;
	font-size:1.2rem;
}

#thumbnail a{
	position:absolute;
	top:0;
	left:0;
	display:block;
width:300px;
height:169px;
	background-color:rgba(255,255,255,0.00);
}

#thumbnail a:hover{ background-color:rgba(255,255,255,0.25);}
.boss{ display:none;}

/* スポットムービー Spot Movie ------------------------- */
#spot{}
#spot .inner{
	width:96%;
	margin:0 auto 0;
	padding:70px 0 40px;
	}
/* h2 タイトル */
#spot .inner h2{padding-bottom:20px;}
#spot .inner h2 img{
	max-width:40%;
	text-align:left;
	display:block;
	margin:0;
	padding-bottom:10px;
	border-bottom:1px solid #FFF;
}

/* YOUTUBE start ------------------------- */
.iframe_outer{
width:300px;
height:169px;
margin:0 auto 0;
overflow:hidden;
/* box-shadow */
}

.iframe_outer iframe{
display:block;
width:300px;
height:169px;
margin:0 0 0;
overflow:hidden;
}


/* 体験者様の声 ------------------------- */
#voice{ }
#voice .inner{
	width:96%;
	margin:0 auto 0;
	padding:70px 0 40px;
}


/* h2 タイトル */
#voice .inner h2{padding-bottom:20px;}
#voice .inner h2 img{
	width:100%;
	text-align:center;
	display:block;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}

#voice h3 br{ display:none;
}


#voice .inner h3{
	text-align:left;
	margin:0 auto;
	font-size:1.3rem;
	line-height:2.3rem;
	color:#FFEEBF;
}
#voice .inner p{
	width:100%;
	text-align:left;
	margin:20px auto 0;
	font-size:1.2rem;
	line-height:1.6rem;
	color:#FFF;
}

.vote_btn{
	width:100%;
	margin:0 auto;
	}

.vote_btn ul{ margin-top:10px;}
.vote_btn ul li{
	float:none;
	width:96%;
	margin:0 auto;
	margin-bottom:5px;}


.vote_btn img{
		width:100%;
	}
.vote_btn img:hover{background:rgba(255,238,191,0.50); transition:.3s;}

.experience{
	margin:20px auto 0;
	padding:30px 0;
	width:100%;
	background:#fff;
}

.experience ul{
	margin:0 auto;
	padding:0;
	width:300px;
	overflow: auto;
}

.experience ul li{
	font-size:1.2rem;
	line-height:1.8rem;
	font-weight:bold;
	color: #333;
	width:240px;
	margin:0 auto 0px;
	padding:15px 10px;
	border-bottom:1px solid #999;
}

.experience ul li span{
	font-weight:bold;
	padding:5px 0;
	display:block;
	font-size:1.0rem;
	line-height:1.6rem;
	color:#666;
}


/* OFFICIAL BANNER ------------------------- */

#official{}
#official .inner{
	width:96%;
	margin:0 auto 0;
	padding:70px 0 40px;
}

/* h2 タイトル */
#official .inner h2{padding-bottom:20px;}
#official .inner h2 img{
	width:263px;
	text-align:center;
	display:block;
	margin:0 auto;
	padding-bottom:20px;
	border-bottom:1px solid #FFF;
}
#official .inner div{
	margin:0 auto;
	padding:20px;
	background:rgba(255,255,255,.15);
}

#official .inner div h3{
	text-align:left;
	margin:0 auto;
	font-size:1.5rem;
	line-height:2.3rem;
	color:#FFEEBF;
}

#official .inner div p{
	width:100%;
	margin:10px auto 0;
	font-size:1.1rem;
	line-height:1.6rem;
}


#official .inner div ul li h4{
	padding:0 0 5px;
	font-size:1.3rem; text-align:center; color:#FFEEBF;}

#official .inner ul li div{
	width:80%;
	margin:30px auto 0;
	padding:0;
	background:none;
}

#official .inner div ul li img{ width:100%;}
#official .inner div ul li img:hover{
cursor: pointer;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
transition:.3s;
}

#official .inner div ul li a{display: block; background:rgba(255,238,191,1.00);}


/* SNSシェアボタン ------------------------- */

.sns_outer{
clear:both;
margin:0 auto;
width:320px;
overflow:hidden;
}

.sns_outer ul.sns{
clear:both;
width:150px;
height:30px;
margin:60px auto 0;
padding:0;
}

.sns_outer ul.sns li{
width:70px;
float:left;
text-align:center;
}

.sns_outer ul.sns li:nth-child(1){ margin-right:10px;}





/* Footer start ------------------------- */

footer{
margin:10px auto 0;
padding:0 0 10px;
}

footer ul{
clear:both;
width:260px;
height:50px;
margin:0 auto;
}

footer ul li{
width:25%;
float:left;
text-align:center;
}

footer ul li img{
width:80%;
height: auto;
}

/* Small start ------------------------- */
small{
display:block;
clear:both;
color:#FFF;
font-weight:bold;
margin:50px auto 0;
padding:0 0 125px;
text-align:center;
font-size:1.2rem;
}

/* ページトップへ ------------------------- */
.pagetop{
position:fixed;
right:20px;
bottom:20px;
width:60px;
z-index:999;
cursor: pointer;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
letter-spacing:-0.1rem;
}

.pagetop:hover{
filter: alpha(opacity=100);
-moz-opacity: 1.00;
-khtml-opacity: 1.00;
opacity: 1.00;
}

.pagetop span{
font-size:1.0rem;
display:block;
text-align:center;
}

.pagetop img{
width:100%;
height:auto;
top:0;
left:0;
}



/*  ポップアップ 体験談 投稿フォーム ------------------------- */
#vote{
	padding:40px 0 0;
	margin:0 auto;
}
#vote h1{
	color:#FFEDBF;
	text-align:center;
	font-size:1.6rem;
	line-height:2.0rem;
	vertical-align:middle;
	float:none;
}
.hissu{
	font-weight:bold;
	font-size:1.5rem; padding:1px;
	color:rgba(0,0,0,1.00);
	background-color:#FFEDBF;
	border-radius:2px;
}

.mail_form{
	width:320px;
	margin:0 auto;}

.mail_form div{
	margin-top:25px;}
	
#vote form input{
	display:block;
	padding:5px;
	border:none;
	border-radius:6px;}
	
#vote form textarea{
	width:310px;
	display:block;
	padding:5px;
	border:none;
	border-radius:6px;
}

#vote .vote_btn{
	marign:0 auto;}

#vote .vote_btn a{
	display: inline-block;
	margin:0 auto;
	text-align:center;
	padding:3px 5px;
	color:#FFF;
	font-weight:bold;
	border:2px solid #FFF;
	text-decoration:none;
}

#vote .vote_btn a:hover{ 
	color:#333; background:rgba(255,237,191,1.00);}

.close_btn{width:320px;}
.close_btn a{
	display:block;
	margin:0 auto;
	width:60px;
	text-align:center;
}

.pc{ display:none;}
.mob{ display: block;}

#information{
	padding:5px 0 0;
	min-height:auto;
}


#information img{
}

}