@charset "UTF-8";



/* -  basic structure 
------------------------------------- */

.container {
	position: relative;
	max-width: 1000px;
	margin: auto;
	border-left: 1px solid #031b19;
	border-right: 1px solid #031b19;
	color: #062e2a;
	background: #e0eadc;
	box-shadow: 0 10px 10px rgba(0,0,0,0.4);
}


/* header */

.hd {
	margin: 0;
	padding: 10px;
	background: linear-gradient(#fff, #1f564e);
	border-bottom: 5px solid #e0eadc;
	text-align: center;
	box-shadow: 0 10px 10px rgba(0,0,0,0.4);
}

@media(max-width: 700px) {
	.hd img {
		width: 85%;
	}
}

/* return button */

.bn-toHome {
	position: fixed;
	bottom: 5px;
	right: 20px;
}

@media(min-width: 1000px) {
	.bn-toHome {
		left: auto;
		right: auto;
		width: 980px;
	}
}

.bn-toHome a {
	width: 30px;
	height: 30px;
	display: block;
	margin: 0 0 0 auto;
	background: #fff;
	font-size: 0;
	/*border-radius: 50%;*/
	opacity: 0.6;
}

.bn-toHome a::after {
	content: '';
	display: block;
	position: relative;
	left: 8px;
	top: 9px;
	width: 10px;
	height: 10px;
	border-top: 5px solid #062e2a;
	border-left: 5px solid #062e2a;
	border-radius: 2px;
	transform: rotate(45deg);
}


.bn-toHome span {
	display: block;
	position: absolute;
	top: -10000px;
	left: -10000px;
}


/* footer */

.ft {
	color: #fff;
	background: #062e2a;
	text-align: center;
}

/* navigation */

.nv {
	display: none;
}

@media(max-width: 700px) {

	.nv {
		display: block;
	}

	.nv-button {
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 3;
		width: 20px;
		height: 19px;
		border-top :4px solid;
		border-bottom :4px solid;
		color: #fff;
		font-size: 0;
		transition: transform 500ms;
		cursor: pointer;
		opacity: 0.8;
	}

	.nv-button.close {
		border-bottom :none;
		transform: translate(-3px,-5px) rotate(135deg);
	}

	.nv-button::after {
		content: "";
		display: block;
		position: relative;
		top: 3.5px;
		width: 20px;
		height: 1px;
		border-top: 4px solid;
	}

	.close.nv-button::after {
		transform: translate(0,-8px) rotate(-90deg);
	}

	.nv-chunk {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		transform: translate(0,-100%);
		transition: transform 500ms;
	}

	.nv-chunk.active {
		transform: translate(0,0);
}


	.nv-scroll {
		background: #000;
		opacity: 0.9;
	}

	.nv-scroll li {
		padding: 10px;
		text-align: center;
		border-bottom: 1px dotted #fff;
	}

	.nv-scroll li:hover {
		background: #333;
		text-shadow: 0 0 3px;
	}

	.nv-scroll a {
		display: block;
		width: 100%;
		color: #fff;
		text-decoration: none;
	}


	.nv-other {
		background: #021816;
		text-align: center;
	}
	.nv-other li {
		display: inline-block;
		margin:0 10px;
	}

	.nv-other a {
		color: #fff;
		font-size: 3rem;
	}

	.nv-other a:hover {
		text-shadow: 0 0 3px;
	}

	.nv-button span {
		display: block;
		position: absolute;
		top: -10000px;
		left: -10000px;
	}

}



/* main contents */

.mn__chunk {
	padding: 30px;
}


@media(max-width: 700px) {

	.mn__chunk {
		padding: 15px;
	}

	.mi.mn__chunk {
		padding: 0;
	}
}


.mn__chunk:nth-child(odd) {
	background: #e0eadc;
}

.mn__chunk:nth-child(odd) a {
	color: #062e2a;
}

.mn__chunk:nth-child(odd) a:hover {
	filter: blur(0.4px);
	text-shadow: 0 0 1px #38f9a5;
}


.mn__chunk:nth-child(even) {
	color: #fff;
	background: #124c44;
}


/* clearfix */

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


/* anchor */

.mn__chunk:nth-child(even) a {
	color: #fff;
}

.mn__chunk:nth-child(even) a:hover {
	text-shadow:0 0 3px;
}


/* basic design of section heading */

.mn__heading {
	margin: 0 0 15px;
	text-align: center;
	border-bottom: 1px solid;
	font-size: 1.8em;
	font-size: 2.6rem;
}


/* -  main information 
------------------------------------- */

.mn__chunk:nth-child(1) {
	color: #fff;
	background: #062e2a;
}

.mn__chunk:nth-child(1) a {
	color: #fff;
}

.mn__chunk:nth-child(1) a:hover {
	text-shadow:0 0 3px;
}


/* two columns */

@media(min-width: 701px) {

	.firstCol {
		width: 57%;
		float: right;
	}
	
	.secondCol {
		width: 40%;
		float: left;
	}

}


@media(max-width: 700px) {
	.mi__keyv {
		width: 100%;
	}

	.mi__song ,
	.mi__movi {
		width: 90%;
		margin: 0 auto 20px;
	}
	
	.mi__live ,
	.mi__news {
		width: 100%;
	}

	.mi__twit {
		width: 90%;
		margin: auto;
		padding: 0 0 20px;
	}
}


/* key images */

.mi__keyv img {
	width: 100%;
	margin: 0 0 20px;
}


.mi__keyv ul {
	position: relative;
	width: 100%;
	padding: 77% 0 0;
}

.mi__keyv li {
	position: absolute;
	top: 0;
	opacity: 0;
	animation: display 12s infinite;
}


/* setting start time of animations */

.mi__keyv li:nth-child(2) {
	animation-delay: 4s;
}

.mi__keyv li:nth-child(3) {
	animation-delay: 8s;
}


/* -- animation -- */

@keyframes display {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	33% {
		opacity: 1;
	}
	41% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* -- animation end -- */

/* songs */

.mi__song-list {
	height: 200px;
	overflow: auto;
}

.mi__song-list li {
	margin: 0 0 0.7em;
}

.mi__song-list audio {
	display: block;
	width: 95%;
	margin:1px auto;
}

/* movies */

.mi__movi-list {
	margin:15px 0 0;
}

.mi__movi-list li {
	width: 48%;
	float: left;
	margin:0 1%;
}


@media(max-width: 700px) {
	.mi__movi-list li {
		width: 100%;
		float: none;
		margin: 0 auto;
	}
}


.mi__movi-content {
	position: relative;
	padding: 56.25% 10px 10px;
}


.mi__movi-list iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mi__movi-title {
	margin:5px 0 10px;
	text-align: center;
}

.mi__movi-nav {
	margin: 0 0 15px;
	text-align: center;
}


/* next live */

.mi__live {
	min-height: 200px;
	margin: 0 0 20px;
	padding: 15px;
	background: top / cover no-repeat url(../images/index_bg_01.jpg);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
}

.mi__live .mn__heading {
	margin: 0 0 10px;
	border: none;
	font-size: 2.5em;
	font-size: 3.5rem;
}

.mi__live-date {
	margin: 0 0 0.3em;
	letter-spacing: 0.05em;
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
}

.mi__live a {
	text-decoration: none;
}

.mi__live-date span {
	font-size: 0.7em;
}

.mi__live-info {
	text-align: center;
	font-size: 1.6rem;
}

.mi__live .mi__live-info a {
	text-decoration: underline;
}


/* what's new */

.mi__news {
	height: 250px;
	margin: 0 0 20px;
	padding: 15px;
	overflow: auto;
	color: #062e2a;
	background: #e0eadc top right / contain no-repeat url(../images/index_bg_02.png);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
}


.mi__news .mn__heading {
	margin: 0 0 5px;
	text-align: left;
	border: none;
}


.mi__news-list {
	padding: 0 70px 0 0;
}


.mi__news-list li {
	margin: 0 0 0.6em;
}

.mi__news-list li::before {
	content: '◆';
}

.mn__chunk .mi__news a {
	color: #062e2a;
}

.mn__chunk .mi__news a:hover {
	filter: blur(0.4px);
	text-shadow: 0 0 1px #38f9a5;
}



/* -  members 
------------------------------------- */

.mb__sec {
	position:relative;
	width: 50%;
	height: 140px;
	overflow: hidden;
	float: left;
	padding:15px;
}

@media(max-width: 700px) {
	.mb__sec {
		width: 100%;
		float: none;
	}
}

.mn__chunk.mb > a {
	display: block;
	position: relative;
	text-decoration: none;
}


@media(max-width: 700px) {
	.mn__chunk.mb > a {
		margin: 0 0 5px;
		box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	}
}


.mn__chunk.mb > a:hover {
	top: 1px;
	left: 1px;
	filter: none;
	text-shadow: none;
}


.mb__heading-part {
	position:absolute;
	top: 10px;
	left:10px;
	right:10px;
	font-weight: bold;
	font-size: 2.3em;
	font-size: 3rem;
	text-shadow: 1px 1px 2px #fff;
}


.mb__heading-part > img {
	position:absolute;
	top: 0;
	left: 0;
}

@media(max-width: 700px) {
	.mb__sec-guitar .mb__heading-part > img ,
	.mb__sec-drums .mb__heading-part > img {
		left: auto;
		right: 0;
	}
}


.mb__heading-part > span {
	position:absolute;
	top: 95px;
	left: -5px;
	z-index: 1;
}


@media(max-width: 700px) {
	.mb__sec-guitar .mb__heading-part > span ,
	.mb__sec-drums .mb__heading-part > span {
		left: auto;
		right: -5px;
	}
}


.mb__profile {
	margin-left: 125px;
}


@media(max-width: 700px) {
	.mb__sec-guitar .mb__profile ,
	.mb__sec-drums .mb__profile {
		margin-left: 0;
		margin-right: 125px;
	}
}


.mb__profile > dt {
	margin: 0 0 5px;
	border-bottom: 1px dotted;
}

.mb__profile dd:first-of-type {
	height: 4em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;}

.mb__profile-nav {
	position: absolute;
	bottom: 10px;
	right: 20px;
}


@media(max-width: 700px) {
	.mb__sec-guitar .mb__profile-nav ,
	.mb__sec-drums .mb__profile-nav {
		right: auto;
		left: 30px;
	}
}

.mb__profile-nav::before {
	content: '';
	display: block;
	position: relative;
	top: 0.8em;
	left: -1.2em;
	width: 0.3em;
	height: 0.3em;
	border-top: 3px solid ;
	border-right: 3px solid ;
	transform: rotate(45deg);
	border-radius: 1px;
}

/* vocal */
.mb__sec-vocal {
	background: #062e2a;
}

/* guitar */
.mb__sec-guitar {
	color: #062e2a;
	background: #e0eadc;
}

@media(max-width: 700px) {
	.mb__sec-guitar {
		color: #fff;
		background: #062e2a;
	}
}

.mb__sec-guitar .mb__heading-part {
	color: #fff;
}


/* bass */
.mb__sec-bass {
	color: #062e2a;
	background: #e0eadc
}

@media(max-width: 700px) {
	.mb__sec-bass {
		color: #fff;
		background: #062e2a;
	}

	.mb__sec-bass .mb__heading-part {
		color: #062e2a;
	}
}


/* drums */
.mb__sec-drums {
	background: #062e2a;
}


/* -  history 
------------------------------------- */

.hs p ,
.hs__txt {
	margin: 0 0 0.6em;
	line-height: 1.6;
}

.hs__phot {
	display: block;
	width: 100%;
	margin: 0 0 15px;
}

@media(min-width: 700px) {
	.hs__phot {
		width: 300px;
		float: right;
		margin: 0 0 15px 15px;
	}
}


.hs__txt dt {
	width: 4.5em;
	float: left;
}

.hs__txt dd {
	margin: 0 0 0.5em 4.5em;
}

/* -  contact 
------------------------------------- */

.ct__form {
	width: 100%;
	height:80vh;
	overflow: auto;
}