footer {
	background-color:#000;
}
header {
	background-color:rgba(0,0,0,0.8);
}
#header li:hover {
    background-color: #585858;
    transition-duration: 1s;
}
.main section {
    padding: 50px 0;
    margin-top: 100px;
    
}
#header nav a {
    color: #fefefe;
}
.wrapper {
	background:#000 url(../images/djyagi.png) no-repeat;
	background-position:bottom;
	background-size:contain;
	padding-bottom: 350px;

}
.dj_header {
	height:calc(100vh - 100px);
 	 background-image:url("../images/djyagi2.png");
 	 background-repeat:no-repeat;
	background-size:cover;
	background-position:left top;
}
h1{
	  padding:0;
}

main h2,main h3,main h4,main p {
	color:#fff;
}
h2{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:4rem;

}
.d2 h2,.d3 h2{
	height:15rem;
	background-position:center;
	background-size:cover;
	  transition-duration: 1s;
	  height: 5em;
}
.d2 h2 {
	background-image:url("../images/dj_interview_h.png");
}
.d3 h2 {
	background-image:url("../images/dj_events_h.png");
}
.d2 h2:hover,.d3 h2:hover{
	transition-duration: 1s;
}
.d2 h2:hover {
	background-image:url("../images/dj_interview_a.png");
}
.d3 h2:hover {
	background-image:url("../images/dj_events_a.png");
}
.projake{
	    width: 100%;
    height: auto;
    margin-top: auto;
}
small,p {
	color:#fff;
}
nav .menu1, nav .menu2, nav .menu3 {
	    background-color: #fff;
}

.dj_recruit{
	text-align: center;
    margin: 0;
    position: relative;
    z-index: 3;
}
.dj_recruit .djrec{
	padding: 1rem;
    margin: 2em 90px 2em auto;
    width: 20em;
    transition-duration: 1s;
    color: #fff;
    display: block;
    border: solid 1px #fff;
}

/*************************************アコーディオン***************************************/

.accbox {
    margin: 2em 0;
    padding: 0;
    width:100%;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 0;
    padding : 0;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
}


/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.d2 .accshow {
   height: auto;
    padding: 50px 0;
    opacity: 1;
    transition: 0.8s;
    overflow: hidden;
}
.d3 .accshow {
	height:0;
    padding:0;
    opacity: 0;
    transition: 0.8s;
    overflow: hidden;
}
/*クリックで中身表示*/
.d3 .cssacc:checked + .accshow {
    height: auto;
    padding: 50px 0;
    opacity: 1;
}
.d2 .cssacc:checked + .accshow {
    height: 0;
    padding: 0;
    opacity: 0;
}
.cssacc:checked + .d2 h2{
    background-image:url("../images/dj_interview_a.png");
}

/*************************************neon***************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.text-effect {
	width: 100vw;
    height: 700px;
}
.area {
	text-align: center;
	color: #000;
	letter-spacing: -7px;
	font-weight: 700;
	text-transform: uppercase;
	animation: blur 0.7s ease-in-out 0s infinite;
	-ms-animation: blur 0.7s ease-in-out 0s infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 10em;
	-webkit-transform: translate3d(-50%,-50%,0);
	-ms-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	display: flex;
	opacity: 0.8;
}
.span {
  -webkit-animation: glow 2s ease-in-out both infinite;
  animation: glow 2s ease-in-out both infinite;
  -ms-animation: glow 2s ease-in-out both infinite;
  animation-play-state: running;
  -ms-animation-play-state: running;
  text-shadow: 0 0 0 #fb00ff;
}
.span:nth-child(7) {
  -webkit-animation-delay: -0.2857142857s;
  -ms-animation-delay: -0.2857142857s;
  animation-delay: -0.2857142857s;
}
.span:nth-child(6) {
  -webkit-animation-delay: -0.5714285714s;
  -ms-animation-delay: -0.5714285714s;
   animation-delay: -0.5714285714s;
}
.span:nth-child(5) {
  -webkit-animation-delay: -0.8571428571s;
  -ms-animation-delay: -0.8571428571s;
  animation-delay: -0.8571428571s;
}
.span:nth-child(4) {
  -webkit-animation-delay: -1.1428571429s;
  -ms-animation-delay: -1.1428571429s;
  animation-delay: -1.1428571429s;
}
.span:nth-child(3) {
	-webkit-animation-delay: -1.4285714286s;
	-ms-animation-delay: -1.4285714286s;
	animation-delay: -1.4285714286s;
}
.span:nth-child(2) {
	-webkit-animation-delay: -1.7142857143s;
	-ms-animation-delay: -1.7142857143s;
	animation-delay: -1.7142857143s;
}
.span:nth-child(1) {
	-webkit-animation-delay: -2s;
	-ms-animation-delay: -2s;
	animation-delay: -2s;
}

@-webkit-keyframes glow {
  33% {
    text-shadow: 0 0 8.3333333333px #cc02ff, 0 -25px 50px cyan, -25px 25px 70px #ff47d7, 25px 25px 70px #4b00ff;
}
66% {
    text-shadow: 0 0 8.3333333333px #fb00ff, 0 -25px 70px #ff00e0, -25px 25px 70px #4b00ff, 25px 25px 50px #00f3ff;
}
}

@keyframes glow {
 33% {
    text-shadow: 0 0 8.3333333333px #cc02ff, 0 -25px 50px cyan, -25px 25px 50px #ff47d7, 25px 25px 50px #4b00ff;
}
66% {
    text-shadow: 0 0 8.3333333333px #fb00ff, 0 -25px 50px #ff00e0, -25px 25px 50px #4b00ff, 25px 25px 50px #00f3ff;
}}
@-ms-keyframes glow {
 33% {
    text-shadow: 0 0 8.3333333333px #cc02ff, 0 -25px 50px cyan, -25px 25px 50px #ff47d7, 25px 25px 50px #4b00ff;
}
66% {
    text-shadow: 0 0 8.3333333333px #fb00ff, 0 -25px 50px #ff00e0, -25px 25px 50px #4b00ff, 25px 25px 50px #00f3ff;
}
}

/*************************************dj disk***************************************/
.text-div {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}

#record_svg {
  display: block;
  width: 500px;
  height:500px;
  margin: auto 0 ;
  cursor: pointer; cursor: hand;
  user-select: none;
}
.d1 h2 {
	display:none;
}
#disk p {
	text-align:center;
}
.profile_disk {
	display: flex;
	width: calc(100vw/2.4);
	height: 500px;
	position: relative;
	margin:auto;
}
#disk {
	width:500px;
	margin: auto 0 auto auto;
	position:absolute;
	left:0;
	z-index:0;
}
.profile_jake{
	width:500px;
	height:500px;
	position:absolute;
	z-index:1;
	right:0;
	}
/*************************************interview***************************************/
.inter {
	display:flex;
	padding:0 3em;
}
.inter img{
	width:45%;
	height:45%;
}
.inter_text {
	padding-right: 3em;
	width:55%;
}
.inter:nth-child(even) .inter_text  {
	flex-direction:row-reverse;
	padding-left: 3em;
	padding:0 3em;
}
.inter:nth-child(even) {
	flex-direction:row-reverse;
	padding:1em 3em;
}
/*************************************events***************************************/

.events_img {
	width:90%;
	height:auto;
	margin:auto
}
.events_img.grid{
	height:auto;
	overflow:hidden
}
.grid-item {
	width:calc(100%/4);
	height:auto;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding:3px
}
.events_img div img{
	width: 100%;
	height:auto;
	display:block
}
.ev_text{
	position: inherit;
	top:50%;
	left:50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	transition-duration: 1s;
	/***opacity:0;***/
	text-align:center;
	color: #fff;
	display:none;
}
.events_img div:hover img,.events_img div:focus img{
	opacity:0.4;
	transition-duration: 1s;
}
.events_img div:hover .ev_text,.events_img div:focus .ev_text{
	transition-duration: 1s;
	display:inline;
	/**opacity:1;**/
}

.kara {
	width:500px;
	height:800px;
}

/*************************************ページめくり***************************************/
.dj_recruit{
    width: 18em;
    position: relative;
		bottom: -180px;
    left: 0;
    transform: rotate(-30deg);
		transition-duration: 1s;
}

.dj_recruit:hover {
	transform: rotate(0deg);
	left: 3vw;
}

.recdj {
	display:block;
	width:100%;

}

.card2 {
    position: absolute;
    top: 0;
    left: 0;
}

/* 表面の表示 */
.card {
	width:100%;
    transform: rotateY(0deg);
    transition: transform 300ms 150ms;
}
.card2 {
	width:100%;
    transform: rotateY(90deg);
    transition: transform 300ms;
}

/* 裏面の表示 */
.recdj:hover .card {
    transform:rotateY(90deg);
    transition: transform 300ms;
}
.recdj:hover .card2 {
    transform:rotateY(0deg);
    transition: transform 300ms 150ms;
}


/************************************メディアクエリ*********************************************/

@media screen and (max-width: 1600px) {
	.profile_disk{
		    width: calc(100vw/1.6);
		    height:500px;
	}
}
@media screen and (max-width: 1200px) {
	.profile_disk{
		    width: calc(100vw/1.3);
		    height:500px;
	}
}
@media screen and (max-width: 1000px) {
	.area{
		font-size:7em;
	}
	#record_svg {
		width:100%
	}
	.main section {
    margin: 50px 0;
    }
    	.dj_recruit{
		    bottom:0px;
	}
}
@media screen and (max-width: 900px) {
	.profile_disk{
	    width: 450px;
	    height:700px;
	}
 	#disk{
		width:450px;
		top:0;
	}
	.profile_jake{
		width: 450px;
		height:auto;
		bottom:0;
	}
}
@media screen and (max-width: 700px) {
	.d1{
		display:block;
	}
	.d2 h2, .d3 h2 {
   	 height: 3.5em;
  	  font-size: 3em;
	}
	.inter, .inter:nth-child(even){
		flex-direction:column-reverse;
	}
	.inter_text, .inter_img{
		padding:0;
	}
	.inter_text {
	width:100%;
}
.inter img{
	width:100%;
	height:auto;
}
.inter:nth-child(even) .inter_text {
    padding: 0;
}
.events_img div{
    width: calc(100%/3);
   }
.dj_recruit {
    width: 13em;
}
	.wrapper{
		padding-bottom:35%;
	}

	.profile_disk{
		    width: 350px;
		    height:550px;
	}
 	#disk{
		width:350px;
		top:0;
	}
	.profile_jake{
		width: 350px;
		height:auto;
		bottom:0;
	}

.card2 {
	width:100%;
    transform: rotateY(0deg);
    transition: transform 300ms 150ms;
}

}

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

    .area{
		font-size:5em;
	}
	#record_svg{
		margin:0;
		height:auto
	}
	.d2 h2, .d3 h2{
   	 height: 1em;
  	  font-size: 2em;
	}
	.events_img div {
    width: calc(100%/2);
   }
   .dj_recruit {
    width: 15em;
	}
	.main section {
    padding: 0;
    margin:20px auto auto auto;
    }
	.profile_disk{
	    width: 250px;
	    height:400px;
	}
 	#disk{
		width:250px;
		top:0;
	}
	.profile_jake{
		width: 250px;
		height:auto;
		bottom:0;
	}
	.dj_recruit {
    bottom: -50px;
}

.ev_text{
    width: 85%;
    font-size: 14px;
}
}