@charset "utf-8";
/* CSS Document */
/*font-family: 'Wallpoet', cursive;
font-family: 'Orbitron', sans-serif;*/
.siteContent .row { margin-top: -3%; }
h2 { font-family: 'Wallpoet', cursive; }
footer .copy { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 0.3em; }

.btn-more { display: inline-block; background-color: #000; color: #fff; font-size: 18px; font-family: 'Wallpoet', cursive; padding: 10px 16px; letter-spacing: 0.2em; position: relative; }
.btn-more:after { content: ""; display: block; width: 36px; height: 36px; background-image: url(../images/common/ico_more.png); background-size: 36px auto; position: absolute; bottom: -19px; right: -19px; }
.btn-more:hover ,#s03 .memberBox li.even .btn-more:hover, #s03 .memberBox li .twitter:hover, #s03 .memberBox li.even .twitter:hover, #s04 .list li.ico a:hover span { background-color: #ff00c3; color: #fff;}

section ul { list-style: none; margin: 0; padding: 0; }
section { position: relative; }
section .bg { width: 140%; position: absolute; top: 0; z-index: -1; margin: 0 -20%; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }

#s01 .item { margin-top: 2%; }
#s01 h1.logo { position: absolute; top: 45%; left: 0; right: 0; margin: 0 auto; padding: 0 5%; }
#s01 .catch { margin: 2% 5%; }
#s01 p { clear: both; font-size: 14px; line-height: 130%; margin: 3% 0; }
#s01 .bg { height: 50%; background-image: url(../images/common/bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
#s01 .bg .t ,#s01 .bg .b { overflow: hidden; position: absolute; width: 100%; height: 10%; }
#s01 .bg .t:before, #s01 .bg .b:before { content: ""; display: block; width: 100%; height: 600%; background-image: url(../images/common/bg_straip.png); background-size: 12px auto; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); }
#s01 .bg .b { bottom: 0; }

#s02 { color: #000; margin: -3% 0 8%; padding: 8% 0 0; }
#s02 .news { max-width: 600px; }
@media (max-width: 991px) { #s02 .news { max-width: none; } }
#s02 h2 span { border-bottom: solid 3px #000; padding: 1% 1%; }
#s02 .list li { border-bottom: solid 1px #000; margin-bottom: 5px; }
#s02 .list .date { margin-bottom: 0; font-size: 16px; font-family: 'Orbitron', sans-serif; background-image: url(../images/common/ico_news.png); background-repeat: no-repeat; background-position: left center; background-size: 13px auto; padding-left: 18px; }
#s02 .list .text { font-size: 14px; margin-bottom: 5px; padding-left: 18px; }
#s02 .btn-more { float: right; margin: 3% 3% 7% 0; }

@media (min-width: 1200px) { #s02 .calendar { float: right; } }
#s02 .calendar h2 { margin-bottom: 0; }
#s02 .calendar .calendarBox { height: 306px; border: solid 3px #000; }
#s02 .bg { height: 100%; background-color: #fff; }

#s02_bnr { margin: -14% 0 9%; padding: 8% 0 0; }
#s02_bnr a { display: block; height: 100%; line-height: 100%; }
#s02_bnr a .en { color: #ff00c3; font-size: 14px; font-family: 'Wallpoet', cursive; display: block; letter-spacing: .1em; }
#s02_bnr a .jp { color: #fff; font-size: 10px; }
#s02_bnr ul { text-align: center; }
#s02_bnr ul li { overflow: hidden; background-color: #000; display: inline-block; width: 97px; height: 97px; vertical-align: middle; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
#s02_bnr ul li.btn1 { margin: 0;  padding-top: 23px; }
#s02_bnr ul li.btn2 { margin: 7% 0 0 2%; padding-top: 16px; }
#s02_bnr ul li.btn3 { margin: 14% 0 0 2%; padding-top: 33px; }
#s02_bnr .bg { height: 100%; background-color: #fff; overflow: hidden; }
#s02_bnr .bg:before { content: ""; display: block; width: 100%; height: 400%; background-image: url(../images/common/bg_straip.png); background-size: 12px auto; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); }

#s03 h2 { margin-bottom: 6%; padding: 3% 0 2%; }
#s03 .memberBox li { max-height: 605px; position: relative; margin: -14% 0; padding-top: 5%; }
#s03 .memberBox li.m02 { padding-top: .4%; padding-bottom: 4%; }
#s03 .memberBox li.m03 { padding-top: 7.4%; }
#s03 .memberBox li.m04 { padding-top: 1.6%; }
#s03 .memberBox li.m02 .photo ,#s03 .memberBox li.m03 .photo, #s03 .memberBox li.m04 .photo { position: relative; }
#s03 .memberBox li.m02 .photo { z-index: 2; }
#s03 .memberBox li.m02 .bg { z-index: 1; }
#s03 .memberBox li.m03 .photo { z-index: 4; }
#s03 .memberBox li.m03 .bg { z-index: 3; }
#s03 .memberBox li.m04 .photo { z-index: 6; }
#s03 .memberBox li.m04 .bg { z-index: 5; }

#s03 .memberBox li .photo { float: right; text-align: right; }
#s03 .memberBox li.even .photo { float: left; text-align: left; }
#s03 .memberBox li .name { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; }
#s03 .memberBox li .name .p1, #s03 .memberBox li .name .p2, #s03 .memberBox li .name .p3, #s03 .memberBox li .name .p4 { position: absolute; z-index: 8; }
#s03 .memberBox li .name .p2 { z-index: 7; }
#s03 .memberBox li.m04 .name .p3, #s03 .memberBox li.m04 .name .p4 { z-index: 10; }

@media (max-width: 991px) {
	#s03 .memberBox li .name { width: 50%; margin: 0 3%; }
	#s03 .memberBox li .name .p1 { bottom: 50%; left: 0; right: 0; text-align: center; }
	#s03 .memberBox li .name .p4.btn-more { bottom: 40%; left: 50%; background-color: transparent; padding: 0; }
	#s03 .memberBox li.even .name { margin: 0 3% 0 auto; }
	#s03 .memberBox li.m02 .name { width: 55%; margin-top: 5%; }
	#s03 .memberBox li.m04 .name { margin-top: 5%; }
}
@media (min-width: 992px) {
	#s03 .memberBox li .name { margin: 0; }
	#s03 .memberBox li.m01 .name .p1 { bottom: 50%; left: 6%; }
	#s03 .memberBox li.m01 .name .p2 { bottom: 33%; left: 36%; }
	#s03 .memberBox li.m01 .name .p3 { bottom: 39%; left: 25%; }
	#s03 .memberBox li.m01 .name .p4 { bottom: 27%; left: 36%; }
	
	#s03 .memberBox li.m02 .name .p1 { bottom: 43%; left: 37.8%; }
	#s03 .memberBox li.m02 .name .p2 { bottom: 24%; right: 52%; }
	#s03 .memberBox li.m02 .name .p3 { bottom: 24.3%; left: 48%; }
	#s03 .memberBox li.m02 .name .p4 { bottom: 30%; left: 78%; }
	
	#s03 .memberBox li.m03 .name .p1 { bottom: 50%; left: 14.5%; }
	#s03 .memberBox li.m03 .name .p2 { bottom: 33%; left: 44.5%; }
	#s03 .memberBox li.m03 .name .p3 { bottom: 39%; left: 34.8%; }
	#s03 .memberBox li.m03 .name .p4 { bottom: 27%; left: 45%; }
	
	#s03 .memberBox li.m04 .name .p1 { bottom: 35%; left: 47.5%; }
	#s03 .memberBox li.m04 .name .p2 { bottom: 18%; right: 44%; }
	#s03 .memberBox li.m04 .name .p3 { bottom: 18%; left: 56%; }
	#s03 .memberBox li.m04 .name .p4 { bottom: 23%; left: 79%; }
}
@media (min-width: 1110px) {
	#s03 .memberBox li.m01 .name .p1 { bottom: 50%; left: 27.8%; }
	#s03 .memberBox li.m01 .name .p2 { bottom: 33%; left: 45%; }
	#s03 .memberBox li.m01 .name .p3 { bottom: 39%; left: 38.8%; }
	#s03 .memberBox li.m01 .name .p4 { bottom: 27%; left: 45%; }
	
	#s03 .memberBox li.m02 .name .p1 { bottom: 45%; left: 39.8%; }
	#s03 .memberBox li.m02 .name .p2 { bottom: 28%; right: 52%; }
	#s03 .memberBox li.m02 .name .p3 { bottom: 28.3%; left: 48%; }
	#s03 .memberBox li.m02 .name .p4 { bottom: 34%; left: 67%; }
	
	#s03 .memberBox li.m03 .name .p1 { bottom: 50%; left: 33.5%; }
	#s03 .memberBox li.m03 .name .p2 { bottom: 33%; left: 50.5%; }
	#s03 .memberBox li.m03 .name .p3 { bottom: 39%; left: 44.8%; }
	#s03 .memberBox li.m03 .name .p4 { bottom: 27%; left: 50%; }
	
	#s03 .memberBox li.m04 .name .p1 { bottom: 35%; left: 43.8%; }
	#s03 .memberBox li.m04 .name .p2 { bottom: 18%; right: 50%; }
	#s03 .memberBox li.m04 .name .p3 { bottom: 18%; left: 50.2%; }
	#s03 .memberBox li.m04 .name .p4 { bottom: 23%; left: 69%; }
}

#s03 .memberBox li .btn-more { float: right; }
#s03 .memberBox li.even .btn-more { background-color: #fff; color: #000; }
#s03 .memberBox li .twitter { font-size: 14px; font-family: 'Orbitron', sans-serif; padding: 10px 16px;  border: solid 2px #000; background-color: #fff; color: #000; }
#s03 .memberBox li.even .twitter { border: solid 2px #fff; background-color: #000; color: #fff; }
#s03 .memberBox li .bg { height: 80%; background-image: url(../images/common/bg.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; }
#s03 .memberBox li.even .bg { background-image: none; background-color: #000; }
#s03 .memberBox li .bg:before { content: ""; display: block; width: 100%; height: 400%; background-image: url(../images/common/bg_straip.png); background-size: 12px auto; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); }
#s03 .memberBox li.even .bg:before { display: none; }

#s04 { margin-top: 5%; padding: 7% 0; z-index: 9; height: 100%; overflow: hidden; }
#s04 h2 { margin-bottom: 0; text-align: center; }
#s04 .movieBox { height: 306px; border: solid 3px #000; }
#s04 .list { margin-top: 20%; }
#s04 .list li.ico a:before { content: ""; position: relative; display: inline-block; vertical-align: middle; width: 68px; height: 68px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: solid 2px #000; background-size: 68px auto; background-position: center; background-repeat: no-repeat; }
#s04 .list li.twi a:before { background-image: url(../images/common/btn_ico_twitter.png); background-color: #fff; }
#s04 .list li.blog a:before { background-color: #fff; }
#s04 .list li.you a:before { background-image: url(../images/common/btn_ico_youtube.png); background-color: #fff; }
#s04 .list li.ico span { font-size: 18px; font-family: 'Wallpoet', cursive; background-color: #fff; color: #000; display: inline-block; vertical-align: middle; width: 75%; text-align: center; margin-left: -6%; padding: 2% 0; border: solid 2px #000; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;}
#s04 .list li.toppage { width: 68px; background-color: #ff44ff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: solid 2px #000; }
#s04 .list li.toppage a { display: block; height: 100%; }
#s04 .bg { height: 100%; background-image: url(../images/top/bg_bottom.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; }
@media (max-width: 767px) {
	#s04 { padding-bottom: 0; }
	#s04 h2 { text-align: left; margin-top: 5%; }
	#s04 .list { text-align: center; margin: 0; padding-top: 5%; }
	#s04 .list li { display: inline-block; }
	#s04 .list li.ico a:before { width: 57px; height: 57px; background-size: 57px auto; }
	#s04 .list li.toppage { width: 57px; margin-left: 5%; }
	#s04 .btnBox { margin-top: 5%; background-image: url(../images/top/bg_bottom.png); background-repeat: no-repeat; background-size: cover; overflow: hidden; }
	#s04 .bg { background-image: none; background-color: #fff; padding-bottom: 0; }
}

/*背景画像レティナ対応*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.btn-more:after { background-image: url(../images/common/ico_more@2x.png); }
	#s01 .bg .t:before, #s01 .bg .b:before, #s03 .memberBox li .bg:before { background-image: url(../images/common/bg_straip@2x.png); }
	#s02 .list .date { background-image: url(../images/common/ico_news@2x.png); }
	#s04 .list li.twi a:before { background-image: url(../images/common/btn_ico_twitter@2x.png); background-color: #fff; }
	#s04 .list li.blog a:before { background-color: #fff; }
	#s04 .list li.you a:before { background-image: url(../images/common/btn_ico_youtube@2x.png); background-color: #fff; }
}