@charset "utf-8";



/* メインコンテンツ
--------------------------------------------- */
.main-container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 30px;
	margin-right: 30px;
}

.profile-container {

}

@media (min-width: 768px) {
	.profile-container {
		display: flex;
	}
}

.profile-img{
	margin: 0;
	margin-bottom: 10px;
	background-color: #222;
}

@media (min-width: 768px) {
	.profile-img {
		flex:0 0 280px;
	}
}

.profile-text{
	margin-top: 0;
}

@media (min-width: 768px) {
	.profile-text {
		flex:1 1 auto;
		margin-left: 3%;
	}
}



/* メンバー
--------------------------------------------- */
.member{
	margin-left: 30px;
	margin-right: 30px;
}

.member-container {
	display: flex;
}
.bogey1 {
	position: relative;
	flex-basis: 50%;
	max-width: 50%;
}
.bogey2 {
	position: relative;
	flex-basis: 50%;
	max-width: 50%;
}

/* sp表示 */
.bogey1sp { display: block !important; }
.bogey1pc { display: none !important; }

/* pc表示 */
@media only screen and (min-width: 768px) {
.bogey1sp { display: none !important; }
.bogey1pc { display: block !important; }
}

/* sp表示 */
.bogey2sp { display: block !important; }
.bogey2pc { display: none !important; }

/* pc表示 */
@media only screen and (min-width: 768px) {
.bogey2sp { display: none !important; }
.bogey2pc { display: block !important; }
}


.bogey1 p {

	position: absolute;
	font-size: 1rem;
	background-color: rgba(0,0,0,0.6);
	bottom:0%;
	left:0%;
	width: 100%;
	margin:0;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 3%;
}

.bogey2 p {

	position: absolute;
	background-color: rgba(0,0,0,0.6);
	bottom:0%;
	left:0%;
	width: 100%;
	margin:0;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 3%;
}

.bogey1 p a {
	text-decoration: none;
	color: #fff;
}

.bogey2 p a {
	text-decoration: none;
	color: #fff;
}

.bogey1 img {
	width: 100%;
}


.bogey1 p:after{
display: block;
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin: -4px 0 0 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
}

.bogey2 p:after{
display: block;
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin: -4px 0 0 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
}

/* ソーシャルメディア
--------------------------------------------- */

.social-media {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 30px;
	margin-right: 30px;
}

.media-wrapper {

}

@media (min-width: 768px) {
	.media-wrapper {
		display: flex;
	}
}

.facebook-wrapper {
	position: relative;
	width: 100%;
}

.facebook-wrapper iframe {
top: 0;
left: 0;
width: 100%;
height: 400px;
}

@media (min-width: 768px) {
	.facebook-wrapper {
		flex:0 0 45%;
		margin-left: 40px;
	}
}

.twitter-wrapper {
	position: relative;
	width: 100%;
}

@media (min-width: 768px) {
	.twitter-wrapper {
		flex:1 1 45%;
	}
}


/* メンバーページ
--------------------------------------------- */

.profile-container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 30px;
	margin-right: 30px;
}

/* ベース転がし
--------------------------------------------- */

.bass-img {
		margin-bottom:10px;
		width: 100%;
}

@media (min-width: 768px) {
	.bass-img {
		width: 250px;
	}
}

/* ギターとの出会い
--------------------------------------------- */

.guitar-img {
		margin-bottom:10px;
		width: 100%;
}

@media (min-width: 768px) {
	.guitar-img {
		width: 350px;
	}
}




/* 記事ボタン（共通）
--------------------------------------------- */

.article-container {
	background-color: #eee;
	width: 100%;
	padding: 5px;
}

.article-btn {
	display: flex;
	flex-wrap: wrap;
	list-style: none;

}


.article-btn li {
	flex: 0 0 96%;

	background-color: #fff;
	margin: 5px;
}

@media (min-width: 768px) {
	.article-btn li{
		flex: 0 0 23.5%;
	}
}

.article-btn a {
	display: block;
	text-decoration: none;
}

.article-btn img {
	width: 80px;
	float:left;
	margin-right: 5px;
		
}



/* ベース転がし（一旦無効）
--------------------------------------------- 

.bass-container {
	margin-top: 10px;
}

@media (min-width: 768px) {
	.bass-container {
		display: flex;
	}
}

.bass-img {
		margin-bottom:10px;

}

@media (min-width: 768px) {
	.bass-img {
		flex:0 0 250px;
		margin-bottom:10px;
	}
}

.bass-text {

}

@media (min-width: 768px) {
	.bass-text {
		flex:1 1 auto;
		margin-left: 3%;
	}
}

*/