@charset "utf-8";
/* CSS Document */

/*====================
639以下および全サイズ共通
======================*/
/*キービジュアル*/
#key{
	margin-bottom:10px;

}
#club{
	width: 95%;
	margin: 0 auto 10%;
	text-align: center;
}

/*メンバー募集と練習スケジュール共通項目*/

#index .title{
	border-left: #0000f0 5px solid;
}

#member,
#schedule{
	padding: 0 10px;
	margin-bottom:15%;
}
#member p,
#schedule p{
	text-align: center;

}
.btn {
    color: #fff;
	font-size: 16px;
    text-decoration: none;
	margin:0 auto;
    padding: 15px 5px;
	border-radius: 10px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: block;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn:hover {
	opacity: 0.8;
}
.btn::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    background: url("../img/img_ball.png") no-repeat 0 50%;
    background-size: 35px 35px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn span {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
 
}
.btn:hover span {
    margin-left: -70px;
}
/*メンバー募集*/
#member .phMem{
	margin-bottom: 20px;
	width: 80%;
	margin:0 auto 15px;
}

#member .btn{
	width: 180px;
	background:-webkit-linear-gradient(bottom,#02493C 0%,#02493C 5%,#02bd9c 95%,#02bd9c 100%);
	background:linear-gradient(to top,#02493C 0%,#02493C 5%,#02bd9c 95%,#02bd9c 100%);
}
 
#member .btn:hover::before {
    left: 130px;
    background-size: 60px 60px;
 
}
/*スケジュール*/
#schedule h3{
	text-align: center;
	margin-bottom: 5px;
	font-weight: bold;
}

#schedule .btn{
	width: 220px;
}
#schedule .btn:hover::before {
    left: 175px;
    background-size: 60px 60px;
}

#schedule .sche_mini .btn{
	background:-webkit-linear-gradient(bottom,#0b69af 0%,#0b69af 5%,#2892e0 95%,#2892e0 100%);
	background:linear-gradient(to top,#0b69af 0%,#0b69af 5%,#2892e0 95%,#2892e0 100%);
	margin-bottom: 30px;
}

#schedule .sche_jh .btn{
	background:-webkit-linear-gradient(bottom,#373e5a 0%,#373e5a 5%,#5c6999 95%,#5c6999 100%);
	background:linear-gradient(to top,#373e5a 0%,#373e5a 5%,#5c6999 95%,#5c6999 100%);
}


#schedule .btn span{
	padding-left: 30px;
}

/*フェイスブック*/
#content #fb{
	width: 95%;
	padding: 0 10px;
	margin: 0 auto;
}

#content #fb .titile{
	margin-bottom:50px;
}
#content .fb-page{
	text-align: center;
}




/*====================
640以上
======================*/
@media screen and (min-width:640px){	
#content{
		overflow: hidden;
	}	

/*キーまわり*/
#key{
	margin-bottom: 30px;
}

#club{
	margin: 0 auto 30px;
	text-align: center;
	}
	
	
/*メンバー募集*/

#member{
	overflow: hidden;
	padding: 0 20px;
	margin-bottom: 50px;
	}	
#member #member01 .texMem{
	float: left;
	width: 60%;
	padding-left: 10px;
	margin-bottom: 20px;
}
	
#member .phMem{
	float: right;
	width: 35%;
	padding-right: 10px;

}
#member #linkClub{
	float: left;
	width: 60%;
	}
	
#member #linkClub p{
	text-align: center;
	}

	
	
/*練習日程*/
#schedule{
	float: right;
	width: 50%;
	padding-right: 20px;
	box-sizing: border-box;
	}
	
	
/*フェイスブック*/
#content #fb{
float: left;
	width: 50%;
	padding-left: 20px;
	box-sizing: border-box;
	}
	
/*フッター*/
#footer #innerF{
	margin: 0 auto;
	padding:15px;
	}
#footer #innerF .logo{
		width:80%;
	}
	#footer ul{
		width:70%;
	}
	#footer ul li{
		display: inline;
		margin-right: 5px;
		text-align: right;

	}
#footer li a{
	padding-left: 15px;

}

	
}

/*====================
960以上
======================*/
@media screen and (min-width:960px){	
	#gnav .nav1{
	background: rgba(0,0,240,0.1);
	}
#club{
	line-height: 2;
	margin-bottom: 50px;
	}	
	
	
/*メンバー募集*/
/*練習日程*/
#schedule{
	width: 40%;
	}
	
/*フェイスブック*/
#content #fb{
width: 60%;
	}

#content .fb-page{
	padding: 0 10px;
	width: 92%;
	margin: 0 auto;
	
	}
}


/*====================
1200以上
======================*/
@media screen and (min-width:1200px){
	
/*メンバー募集*/
#member{
	padding: 60px;
	margin-bottom: 0;
	}
#member #member01 .texMem{
	width: 500px;
	}
#member #linkClub{
	width: 600px;	
	}
#schedule{
	padding-right: 60px;
	width: 450px;
	}
	#schedule .link{
		width: 370px;
	}
#content #fb{
	padding-left: 60px;
	width: 600px;
	}
	
	
	
	
	
	
	
	
}