@charset "UTF-8";

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


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

	body {
		font-size: 14px;
	}
	img {
		width: 100%;
		height: auto;
	}
	p {
		word-break: break-all;

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


	.container {
		width: 100%;
	}
	

	#globalHeader {
		height: auto;
	}

	#globalHeader #logo {
		width: 65%;
		float: none;
		margin: 10% 0 5% 0;
	}
	#globalHeader nav {
		display: none;
		width: 40%;
		float: none;
		margin: 0;
		position: absolute;
		right: 17%;
		top: 4.8%;
		z-index: 100;
		box-shadow: 0 0 8px #000;
	}
	#globalHeader nav li {
		display: block;
		margin: 0;
		border-bottom: 1px solid #ccc;
	}
	#globalHeader nav li a {
		display: block;
		padding: 12% 4%;
		background: rgba(0, 133, 63, 0.9);
		text-shadow: 1px 1px 0px #000;
	}
	#globalHeader nav li:last-child {
		top: 0;
	}
	#globalHeader nav li:last-child a img {
		width: 20%;
	}

	#menu {
		position: absolute;
		top: 4.8%;
		right: 2%;
		width: 15%;
	}
	#menu a  {
		display: block;
		width: 100%;
		height: 100%;
		background: #00853f;
		border: 1px solid #444;
		border-radius: 4px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		font-size: 0.7rem;
		line-height: 385%;
	}

	section header > h1 {
		padding-bottom: 4%;
		font-size: 2.0em;
	}
	article header > h1 {
		width: 100%;
		padding: 2% 4%;
		font-size: 1.6rem;
	}
	article header > h1 span {
		position: static;
		display: block;
		text-align: right;
		font-size: 1rem;
	}

	section.container {
		padding: 0 2%;
	}


	.listStyle li {
		padding-left: 0;
	}
	.listStyle li time {
		position: static;
	}

	#contact {
		margin: 10% 0;
	}
	#contact .inner {
		min-height: auto;
		padding: 0 0 0 20%;
		background-size: 17% auto;
		background-position: top left;
		font-size: 0.9rem;
		line-height: 1.3;
	}
	#contact .inner p:nth-child(2) {
		margin-left: -20%;
		padding: 2% 0;
	}
	#contact .inner p.note {
		margin-left: -20%;
	}


	footer #topBtn {
		width: 10%;
		top: -40%;
	}
	footer .banners {
		margin-left: 18%;
	}
	footer .banners:after {
		content: "";
		display: block;
		clear: both;
	}	
	footer .banners li {
		display: block;
		width: 23%;
		float: left;
		margin-right: 2%;

	}
	footer nav {
		position: relative;
		top: 0;
		margin: 2% 0;
		line-height: 1.8;
		z-index: 90;
	}
	footer #copyright {
		position: static;
		text-align: right;
	}
	footer #obj {
		width: 15%;
		top: -10%;
	}


	/* top */
	.bx-controls-direction {
		display: none;
	}
	#topSchedule .schedule {
		float: none;
		padding: 0 2%;
	}
	#topSchedule #liveSchedule,
	#topSchedule #workshopSchedule {
		width: 100%;
	}
	#topSchedule h3 #language {
		/*display: block;*/
		padding-left: 0.5em;
		text-align: right;
	}
	#topSchedule #liveSchedule .listStyle li {
		padding-left: 0;
	}

	#topNews {
		padding-left: 2%;
		padding-right: 2%;
	}

	#topMovies li {
		width: 96%;
		float: none;
		margin-left: 2%;
		margin-right: 2%;
		padding: 2%;
	}
	#topMovies li figure {
		position: relative;
		width: 100%;
		padding-top: 56%;
	}
	#topMovies li figure iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
	#topMovies li figure figcaption {
		display: none;
	}
	#topMovies li:nth-child(2n) {
		float: none;
	}

	#topBio {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
		padding: 4%;
	}
	#topBio .pic {
		width: 60%;
		float: none;
		margin: 0 auto;
		text-align: center;
	}
	#topBio .text {
		width: 100%;
		float: none;
	}


	/* discography */
	article#discography {
		background-size: 100% auto;
		padding-bottom: 30%;
	}
	article#discography .itemList > li {
		width: 47%;
	}
	article#discography .itemList > li figure {
		min-height: auto;
		display: inline;

	}


	/* workshop */
	article#workshop section .listStyle li {
		padding-left: 10%;
	}
	article#workshop .listStyle li time {
		display: block;
	}
	article#workshop section .question {
		top: 0;
	}
	article#workshop section .question img {
		width: auto;
	}
	article#workshop section .djembe,
	article#workshop section .tama {
		background-size: 9% auto;
		background-position: left top;
	}

	article#workshop #musical_instrument figure {
		width: 20%;
	}
	article#workshop #musical_instrument p {
		width: 75%;
	}
}