@charset "UTF-8";
/* CSS Document */
/*img {
	width: 100%;
max-width: none;
}
body:before {
opacity: 0;
}*/
#insta-area {
	display: none;
}

#topics-top {
    display: flex;
    border-bottom: 0px solid #000;
}

#mainWrap {
	position: relative;
	height: auto;
	background-color: #000;
	/*height: 100vh;*/
	overflow: hidden;
	line-height: 0;
	font-family: 'YakuHanMP', 'Noto Serif JP', serif;
}

#mainWrap #newInfo {
	position: absolute;
	left: 2%;
	top: 4%;
	font-size: 2vw;
	color: #c6bf8a;
	
}
#mainWrap #base {
	filter: brightness(75%) contrast(200%) grayscale(100%);
	opacity: 0;
}
#mainWrap._on #base {
	transition: filter 5s 4s, opacity 1.5s;
	filter: brightness(100%) contrast(100%) grayscale(0%);
	opacity: 1;
}
#mainWrap #hikari {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	opacity: 0;
	mix-blend-mode:screen;
}
#mainWrap._on #hikari {
	transition: 3s 2.5s;
	opacity: 1;
}
#mainWrap #hikari .hikari01 {
	position: absolute;
	opacity: 0.7;
	mix-blend-mode:screen;
}
#mainWrap #hikari .hikari02 {
	position: absolute;
	animation-name: flicker;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	mix-blend-mode:screen;
}
#mainWrap #names {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateY(-20px);
}
#mainWrap._on #names {
	opacity: 1;
	transform: translateY(0px);
	transition: 1.0s cubic-bezier(.52,.53,.59,1) 4.0s;
}
/*#mainWrap::after {
	content: "";
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: #000;
	transition: 3s;
	opacity: 1;
}
#mainWrap._show::after {
	opacity: 0;
}*/
#mainWrap .txtBox {
	position: absolute;
	width: 70%;
	left: 15%;
	top: 3.5%;
	filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 1)) brightness(300%);
}
#mainWrap._on .txtBox {
	transition: 2s 2s;
	filter: drop-shadow(0px 0px 8px rgba(0, 129, 202, 0.8));
}
#mainWrap .txtBox .th30 {
	width: 80%;
	margin: 0 auto;
	filter: drop-shadow(0px 0px 8px rgba(0, 129, 202, 0.8));
opacity: 0;
}
#mainWrap._on .txtBox .th30 {
	transition: 1.5s;
	opacity: 1;
}
#mainWrap .txtBox h2 {
	width: 80%;
	margin: 0 auto;
	padding: 2% 0;
	filter: drop-shadow(0px 2px 8px rgba(0, 129, 202, 0.8));
	opacity: 0;
}
#mainWrap._on .txtBox h2 {
	transition: 1s 1.5s;
	opacity: 1;
}
#mainWrap .txtBox p {
	width: 66%;
	margin: 0 auto;
	filter: drop-shadow(0px 2px 8px rgba(0, 129, 202, 0.8));
	opacity: 0;
}
#mainWrap._on .txtBox p {
	transition: 1s 2.5s;
	opacity: 1;
}




@keyframes flicker {
  from {
      opacity: 0.8;
    }
    4% {
      opacity: 0.6;
    }
    8% {
      opacity: 0.75;
    }
    12% {
      opacity: 0.65;
    }
    16% {
      opacity: 0.60;
    }
    20% {
      opacity: 0.7;
    }
    24% {
      opacity: 1;
    }
    28% {
      opacity: 0.85;
    }
    32% {
      opacity: 0.60;
    }
    36% {
      opacity: 0.75;
    }
    40% {
      opacity: 0.6;
    }
    44% {
      opacity: 1;
    }
    48% {
      opacity: 0.75;
    }
    52% {
      opacity: 0.60;
    }
    56% {
      opacity: 10;
    }
    60% {
      opacity: 0.7;
    }
    64% {
      opacity: 0.85;
    }
    68% {
      opacity: .65;
    }
    72% {
      opacity: 0.7;
    }
    76% {
      opacity: 0.6;
    }
    80% {
      opacity: 1;
    }
    84% {
      opacity: 0.60;
    }
    88% {
      opacity: 0.55;
    }
    92% {
      opacity: 1;
    }
    96% {
      opacity: 0.6;
    }
    to {
      opacity: 0.7;
    }
}

#contents-wrap {
	font-family: 'YakuHanMP','Noto Serif JP', serif;
}
#pointWrap02 {
	background-color: #a30000;
	padding: 0.5em;
}
#pointWrap02 h3 {
	color: #c6bf8a;
	font-size: 3vw;
	font-size: clamp(13px, 3.3vw, 40px);
	letter-spacing: 0.1em;
	font-weight: 300;
}
#pointWrap01 {
	background-color: #000;
	padding: 2% 0;
}




@media screen and (max-width: 959px) {
	#mainWrap #newInfo {
		left: 2.5%;
    top: 5%;
		font-size: 2.6vw;
	}
	
}
@media screen and (max-width: 599px) {
	#mainWrap #newInfo {
		left: 3%;
    top: 6%;
		font-size: 4.4vw;
	}
	#mainWrap .txtBox {
		position: absolute;
		width: 90%;
		left: 5%;
		top: 10%;
	}

	#mainWrap .txtBox h2 {
		width: 86%;
		/*padding: 0%;*/
		padding-top: 3%;

	}
	#mainWrap._on .txtBox h2 {
		transition: 1s 1.5s;
		opacity: 1;
	}
	#mainWrap .txtBox p {
		width: 70%;
		margin: 0 auto;
		filter: drop-shadow(0px 2px 8px rgba(0, 129, 202, 0.8));
		opacity: 0;
	}
	#mainWrap._on .txtBox p {
		transition: 1s 2.5s;
		opacity: 1;
	}
	#pointWrap02 h3 {
		letter-spacing: 0em;
		font-size: 5vw;
		font-size: clamp(13px, 5vw, 22px);
	}
	#pointWrap01 {
		padding: 5% 0;
	}
	#pointWrap01 .pointBox {
		max-width: 400px;
	}
	



}