@charset "UTF-8";
@import url("mybootstrap.css");


/*//////////////

common

/////////////*/

.font-min small{
	font-size: :10px;
}

.wf-roundedmplus1c
{ font-family: "Rounded Mplus 1c"; }

body{
	font-family: "Rounded Mplus 1c", "ＭＳ ゴシック", "MS Gothic", "Osaka−等幅", "Osaka-mono", "monospace";
	color: #f4f4f4;
	width: 100%;
}

.pattern {
  width: 100%;
  height: 100%;
  background: url(http://www.webcreatorbox.com/sample/images/yokojima.png);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -50;
}

#bgvid{
	position: fixed; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -100;
	background-size: cover;
}

.ttl{
	margin:5em auto;
}

/*/////////////

ツイッターボタン

/////////////*/

.twitter-bottun{
	display: block;
	width:30%;
    margin: 14em auto 0;
	opacity: 1;
	z-index: 900;
}

.yoyaku-bottun{
	display: block;
	width:40%;
    margin: 1em auto 0;
	opacity: 1;
	z-index: 900;
}


/*ロゴ*/

.logo{
	display: block;
	margin: 0 auto;
	margin-top: 13em;
}

#logo{
}

.info-wrapper{
	display: block;
	margin-top:12em;
}



/*

スクロールアニメーション

*/

.scroll {
  padding-top: 60px;
}
.scroll span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.scroll span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.scroll-wrapper{
	position: absolute;
	bottom:10px;
	left:50%;
}


/*

ヒーロー

*/

#hero{
		position: relative;
	height:100vh;
}

/*

プロローグ

*/

#prolo{
	height: 100%;
	margin:1em auto;
}

#prolo h1{
    font-size: 2em;
    margin: 1em;
}

.prolo-info{
	line-height: 2em;
    letter-spacing: 3px;
}



/*

epi2

*/


#info img{
	display: block;
	padding: 1em;
}


#info p{
	display: block;
	padding: 1em;
}


.accordion {
  min-width: 350px;
  margin: 0 auto;
}
.accordion .ac-content {
  margin: 0 10px;
}
.accordion input {
  display: none;
}
.accordion label {
	display: block;
	background: rgba(0, 0, 0, 0.55);
	font-size: 2em;
	text-align: center;
	cursor: pointer;
	padding: 10px;
}
.accordion label:hover {
  background: rgba(255, 12, 0, 0.58);
}
.accordion .ac-cont {
	transition: 0.3s;
	height: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.55);
	padding: 0 10px;
}
.accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
}

.ac-cont h4{
	margin-top:2em;
}

#epi2{
	height:50vh;
}

.info-act{
	font-size:1.5em;
}

.info-act span{
	font-size:0.5em;
}


.artist-ttl{
	padding: 1em 1em 0;
	text-align: center;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*

フッター

*/

footer{
	position: absolute;
    width: 100vw;
    height: 100px;
	margin: auto;
}

.footerlogo-wrapper{
	display:block;
	margin:0 auto;
	margin-bottom: -20px;
}

.footerlogo{
	width:15vw;
	display:block;
	bottom:3;
	margin:0 auto;
	margin-bottom: -20px;
}

footer p{
	text-align: center;
	font-size: 1em;
	margin:1em auto;
	margin-bottom: -5px;
}



/*

タブレット

*/

@media screen and (max-width: 700px) {
	
	.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5%;
    /* display: block; */
    /* margin: 0 auto; */
    width: 90%;
    height: 90%;
    border: 0;
	}	
	.ttl{
	 width: 90%;
	    margin: 2em auto 0.5em;
	}
	
	#prolo h1 {
		font-size: 16px;
		margin: 1.2em 0;
	}	
	
	.prolo-info {
		line-height: 2em;
		letter-spacing: 2px;
		font-size: 10px;
	}
	
	#info p{
		line-height: 1.4em;
    	letter-spacing: 0.2em;
	}
	
	.info-act{
		font-size:1.5em;
	}

	.info-act span{
		font-size:0.5em;
	}


	.artist-ttl{
		padding: 1em 1em 0;
		text-align: center;
	}	
	
	.twitter-bottun{
		width:50%;
	}
	
	.yoyaku-bottun{
		width:60%;
	}	
	
	
	.logo{
			width:90vw;
		}

	.footerlogo{
		width: 80vw;
		padding-top:30px;
		padding-bottom: 10px;
	}
}