/********************************************************************ナラティブ**************************************************************************/

#main .back,#main .next{	background-color: #000;}

.narrative01{
	width: 100%;
	margin:  0 auto;
	text-align: center;
}
.narrativepage{		width: 90%;}
.narrativeflex{
	display: flex;
	justify-content: space-around;	
	gap:5%;
}
.narrativeflex section {
	position: relative;
	width: 45%;
	margin:  0 0 5% 0 ;
}
 .intervention {
	width: 20%;
	margin: 0 auto;
}
.narrativeflex section img{		width: 100%;}
.narrativeflex01{	display: flex;}

.update_img01{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
}
.update_img02{
	position: absolute;
	right: 0;
	top: 0;
	width: 40%;
}



@media screen and (max-width: 751px){
	
	.narrativeflex{		flex-wrap: wrap;	}
	.intervention {		width: 40%;	}
}

/**************************************************************アップデート・グリッチ********************************************************************************/

.interim{	width: 400px;}

.skew {
  animation: skew 3s infinite;
}
@keyframes skew {
  0% {    transform: none;  }
  33% {    transform: none;  }
  33.3% {    transform: skewX(30deg);  }
  33.6% {    transform: skewX(-30deg);  }
  33.9% {    transform: none;  }
  66% {    transform: none;  }
  66.3% {    transform: skewX(5deg);  }
  66.6% {    transform: skewX(-5deg);  }
  66.9% {    transform: none;  }
  77% {    transform: none;  }
  77.3% {    transform: skewX(15deg);  }
  77.6% {    transform: skewX(-15deg);  }
  77.9% {    transform: none;  }
}


/**************************************************************モーダル********************************************************************************/

.js_modalBtnWrap {
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.js_modalWrap {
  opacity: 0;
  z-index: -1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.js_modalWrap.active {  animation: modalOpen 0.3s ease forwards;}
.js_modalWrap.active2 {  animation: modalClose 0.3s ease forwards;}
.js_modalBG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.js_modalContInner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 751px){
	.js_modalContInner img {	width: 100vw;	}
}

@keyframes modalOpen {
	0% {    opacity: 0;  }
	100% {
		opacity: 1;
		z-index: 1000;
	}
}
@keyframes modalClose {
	0% {
		opacity: 1;
		z-index: 1000;
	}
	100% {    opacity: 0;  }
}

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

.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg{
  background: rgba(100, 100, 100, 0.9);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content{
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
}