@charset "utf-8";
@import url("reset.css");
/* CSS Document */
body{
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}
.wrap{
	overflow: hidden;
}


#top{
	height: 100vh;
	background:url(../images/savvy_top.jpg) ;
	background-position:center;
	background-size:cover;
}

@media(max-width:600px){
	#top{
		height:700px;
		background:url(../images/savvy_top_small.jpg) no-repeat;
		background-size:cover;	
		background-position:45% 50%;
	}
}

header{
	width:1000px;
	height:180px;
	padding-top:30px;
	margin:0 auto;
}

@media(max-width:768px){
	header{
		width:auto;
	}
}

/*ロゴマーク*/
.logo{
	text-align:center;
}

@media(max-width:600px){
	#pc_logo{
		display:none;
	}
	#mobile_logo{
		padding-top:40px;
}
}

@media(min-width:600px){
	#mobile_logo{
		display:none;
	}
}


#nav_box{
	width:1000px;
	margin:0 auto;
}

@media(max-width:768px){
	#nav_box{
		width:700px;
	}
}


/*ナビ止め*/
.fixed {
	background-color: rgba(255,255,255,0.2);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

/*ここまで*/

/*モバイルナビ*/
#nav_fixed{
	top:0;
	width:100%;
	background:#666;
	opacity:0.5;
}
#nav_fixed:hover{
	opacity:0.8;
}


#nav ul li{
	margin-bottom:20px;
	margin-left:5px;
}

#nav ul li:first-child{
	padding-top:10px;
}

#nav ul li:last-child{
	padding-bottom:10px;
}

#nav ul li a{
	font-size:18px;
	color:#fff;
	text-decoration:none;
}

.toggle{
	color:#fff;
	border:none;
	outline:none;
	background:none;
	font-size:32px;
	padding-left:5px;
}



@media(min-width:600px){
	#nav,#nav-toggle{
		display:none;
	}
}

@media(max-width:600px){
	#nav_box ul a,#fixedBox{
		display:none;
	}
	#nav_fixed{
		position:fixed;
		z-index:10000;
	}
}


.nav  #nav_box ul{
	display:flex;
	justify-content: space-between;
	padding-top:20px;
}

.nav #nav_box ul li{
	list-style:none;
}

.nav #nav_box ul li a{
	font-family: 'Roboto', sans-serif;
	color:#A8A8A8;
	text-decoration:none;
	font-size:22px;
	outline: none;
	transition: all 0.5s ease 0s;
}

.nav #nav_box ul li a:hover{
	color:#FFFFFF;
}

@media(max-width:768px){
	.nav #nav_box ul li a{
		font-size:20px;
	}
}


/*背景画像*/
#news,#profile,#live,#discography,#contact{
	height:1500px;
	background:url(../images/background_image.png) repeat-y;
	background-position:center;
	background-size:cover;
	background-attachment: fixed;
	background-color: #000;
}

@media(max-width:768px){
	#news,#profile,#live,#discography,#contact{
		background-image:none;
	}
}

@media(max-width:600px){
	#news,#profile,#live,#discography,#contact{
		background-image:url(../images/background_image_mobile.png);
		background-size:contain;
	}
}

/*背景画像ここまで*/


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

/*背景文字*/
h1{
	font-family:'Cuprum', sans-serif;
	font-size:950%;
	color:#fff;
	top:66px;
	right:0;
	user-select:none;
	position:absolute;
	opacity:0.2;
}

@media(max-width:768px){
	h1{
		font-size:600%;
		right:15px;
	}
}

@media(max-width:600px){
	h1{
		font-size:300%;
		top:55px;
		right:13px;
	}
}

h1:first-letter {
	color:#F00;
	font-size: 1.6em;
	letter-spacing:-10px;
}
#profile h1:first-letter{
	color:#F00;
	font-size: 1.6em;
	letter-spacing:-20px;
}

#live h1:first-letter {
	color:#F00;
	font-size: 1.6em;
	letter-spacing:-2px;
}
@media(max-width:600px){
	h1:first-letter{
		letter-spacing:normal;
	}
	#profile h1:first-letter{
		letter-spacing:-5px;
	}
}


/*内容の幅*/
.contents {
	width:1100px;
	margin:0 auto;
	position:relative;
}


@media(max-width:768px){
	.contents{
		width:auto;
	}
}

@media(max-width:600px){
	.contents{
		padding-top:20px;
	}
}
		

#news1{
	padding-left:50px;
	padding-top:120px;
}

@media(max-width:768px){
	#news1{
		padding-top:150px;
		padding-left:34px;
	}
}

@media(max-width:600px){
	#news1{
		padding-top:110px;
		padding-left:10px;
		padding-right:10px;
	}
}



#news .contents #news1 .midashi{
	color:#FFF;
	font-size:18px;
	border-left:#CC0005 solid 5px;
	padding-left:3px;
}

#news .contents #news1 .honbun{
	color:#999;
	padding-top:10px;
	padding-left:10px;
	margin-bottom: 50px;
	line-height:1.5;
}

@media(max-width:600px){
	#news .contents #news1 .midashi{
		font-size:17px;
		border-left:#CC0005 solid 3px;
	}
	#news .contents #news1 .honbun{
		line-height:1.3;
		font-size:15px;
	}
}

#profile_syashin{
	width:500px;
	height:100vh;
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	margin-left:50px;
	background:url(../images/youki_profile.jpg) no-repeat;
	background-position:center center;
}

@media(max-width:768px){
	#profile_syashin{
		width:350px;
		margin-left:34px;
	}
}

@media(max-width:600px){
	#profile_syashin{
		width:180px;
		height:180px;
		background-image:url(../images/youki_profile_mobile.jpg);
		background-size:contain;
		background-position:bottom;
		padding-top:180px;
		margin-left:auto;
		margin-right:auto;
}
}



/*上下揃えるキーワード*/

#dete_center{
	position:absolute;
	right:10%;
	top:45%;
}

#profile_dete dt{
	float:left;
	color:#fff;
	font-size:200%;
}


#profile_dete dd{
	font-size:110%;
	color:#fff;
	margin-left:100px;
	padding-left:20px;
	border-left:#999 solid 5px;
	line-height:1.5;
}

#dete_center p{
	color:#999;
	font-size:90%;
	padding-top:10px;
}

#dete_center img{
	padding-top:10px;
}

.insta{
	padding-left:5px;
}
@media(max-width:768px){
	#dete_center{
		right:5%;
	}
}

@media(max-width:600px){
	#dete_center{
		position: static;/*絶対配置の位置指定解除*/
		width:180px;
		padding-top:50px;
		margin:0 auto;
	}
	#profile_dete{
		text-align:left;
	}
	
	#profile_dete dt{
		float:none;
		margin-bottom:15px;
		font-size:25px;
	}
	#profile_dete dd{
		margin-left:0;
		padding-left:0;
		border-left:none;
		font-size:15px;
	}
	
}

.live,.discography,.profile_width{
	position:relative;
	top:120px;
	width:1000px;
	margin:0 auto;
}

@media(max-width:600px){
	.profile_width{
		width:auto;
	}
	.discography{
		top:130px;
		width:auto;
	}
}



.live_day{
	color:#FFF;
	font-size:110%;
	border-bottom:#666 solid 1px;
	padding-bottom:8px;
}

.live_contents{
	color:#999;
	line-height:1.3;
	padding-top:8px;
}

.live_about{
	padding-top:50px;
}

.live_about:first-child{
	padding-top:0;
}
@media(max-width:768px){
	.live{
		width:700px;
		margin:0 34px;
	}
}

@media(max-width:600px){
	.live{
		top:100px;
		width:auto;
		margin:0 15px;
	}
	
	.live_day{
		font-size:17px;
	}
	
	.live_contents{
		font-size:15px;
	}
}



#booking_buttom{
	padding-top:200px;
	text-align:center;
}

@media(max-width:600px){
	#booking_buttom{
		padding-top:180px;
	}
}

#live .booking a{
	text-decoration:none;
	border:#999 solid 2px;
	padding:10px;
	color:#999;
	background-color: transparent;
	transition: all 0.5s ease 0s;
}

@media(max-width:600px){
	#live .booking a{
		font-size:15px;
		padding:5px;
	}
}

#live .booking a:hover {
	color:#000;
	background-color: rgba(255, 255, 255, .2);
}


#disc_about {
	display:flex;
	padding-top:66px;
}

#disc_about:first-child{
	padding-top:66px;
}

.discography dd{
	padding-left:20px;
	line-height:1.5;
	color:#999;
}

.discography dd .disc_day{
	color:#FFF;
	font-weight:bold;
}


#disc_about_next{
	padding-top:66px;
}

@media(max-width:768px){
	.discography{
		padding-left:34px;
	}
}

@media(max-width:600px){
	.discography{
		padding-left:10px;
	}
	#disc_about{
		display:block;
	}
	#disc_about dt{
		padding-left:20px;
	}
	#disc_about dd{
		padding-top:10px;
	}
	#disc_about p{
		font-size:15px;
	}
}



#contact_about{
		color:#fff;
		padding-top:150px;
		padding-left:50px;
}

@media(max-width:768px){
	#contact_about{
		padding-left:34px;
	}
}

@media(max-width:600px){
	#contact_about{
		width:300px;
		line-height:1.2;
		margin:0 auto;
		padding-left:0;
		font-size:15px;
	}
}


textarea {  
    resize: none;  
}  

#contact_about ul li {
    list-style: none;
}

form{
	padding-top:30px;
}


label {
    margin-right: 50px;
	width:100px;
	float:left;
}

@media(max-width:600px){
	label{
		margin-right:10px;
	}
	
	.msg label{
		margin-bottom:10px;
	}
}


#contact_about ul li{
	padding-bottom:20px;
}

/*ページトップ*/
#page-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    font-size: 77%;
}
@media(max-width:600px){
	#page-top{
		bottom:30px;
		right:20px;
	}
}


#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
	opacity:0.7;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

footer{
	height:100vh;
	background-image:url(../images/footer.jpg);
	background-position:center center;
}
@media(max-width:600px){
	footer{
		width:auto;
		background-size:cover;
	}
}


footer p{
	color:#FFF;
	text-align:center;
	padding-top:800px;
}
@media(max-width:600px){
	footer p{
		padding-top:500px;
	}
}