/* CSS Document */

*{
	margin:0;padding:0;
	font-feature-settings: "palt";
	box-sizing: border-box;
}



img {border:0;}
address {font-style:normal;}
a{text-decoration:none;}

.m0auto{margin: 0 auto;}
.mb1{margin-bottom: 1em!important;}
.mb1-5{margin-bottom: 1.5em!important;}
.mb2{margin-bottom: 2em!important;}
.mb2-5{margin-bottom: 2.5em!important;}
.mb3{margin-bottom: 3em!important;}
.red {color: red;}
.yelllow {color: yellow;}
.white{color:white;}
.blue{color:blue;}
.green{color:green;}
.DechauOrange{color:#FF4200;}
.clear {clear:both;}
.copyright {font-size: 0.5em;margin: 20px 0;text-align: center;}

html, body{
	width: 100%;
}
body{
	background: black;
	background-image: none;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	touch-action: pan-y;
	overscroll-behavior-x: none;
}
.body1 {
	width: calc(100% - 2em);
	max-width: 700px; /** デザインの最大幅 **/
	margin: 0 auto;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	position: relative;
	z-index: 2;
}

.img100per{
	width: 100%;
	display: flex;
	justify-content: center;
    margin-bottom: 1em;
}
.img100per img{
	width: 100%;
}

.mainVisu{
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translate3d(0, 40px, -120px) scale(0.9);
}
.mainVisu img{
    width: 100%;
	max-width: 1000px;
}
.mainVisu::before{
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(circle, rgba(255, 210, 140, 0.85), rgba(255, 90, 30, 0.2) 45%, rgba(255, 66, 0, 0.0) 75%);
	filter: blur(2px);
	opacity: 0;
	transform: scale(0.7);
	z-index: -1;
}
.mainVisu.is-pop{
	animation: popIn 1.2s ease-out forwards;
}
.mainVisu.is-pop::before{
	animation: glowBurst 1.6s ease-out forwards, glowPulse 3s 1.6s ease-in-out infinite;
	box-shadow: 0 0 40px rgba(255, 160, 60, 0.55), 0 0 120px rgba(255, 66, 0, 0.55);
}

@keyframes popIn {
  0% { opacity: 0; transform: translate3d(0, 60px, -140px) scale(0.86); }
  60% { opacity: 1; transform: translate3d(0, -8px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes glowBurst {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.15); }
  55% { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0.75; transform: scale(0.92); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.06); }
}
.parallax{
	will-change: transform;
	--parallax-y: 0px;
	transform: translate3d(0, var(--parallax-y), 0);
}

#fx-canvas{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.75;
}
.parallax-layer{
	position: fixed;
	inset: -5% 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.05);
	will-change: transform;
	pointer-events: none;
}
.layer-back{
	z-index: 0;
	background-image: url("../img/back_nq.png");
	opacity: 1;
	mix-blend-mode: screen;
}
.layer-mid{
	z-index: 1;
	background-image: radial-gradient(circle at 20% 20%, rgba(255, 120, 40, 0.2), rgba(0, 0, 0, 0) 45%),
		radial-gradient(circle at 80% 30%, rgba(255, 220, 140, 0.15), rgba(0, 0, 0, 0) 50%),
		radial-gradient(circle at 50% 80%, rgba(255, 66, 0, 0.12), rgba(0, 0, 0, 0) 50%);
	opacity: 0.9;
}
.layer-front{
	z-index: 2;
	background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
	opacity: 0.5;
}
.floating-numbers{
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}
.foreground-sparks{
	position: fixed;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	mix-blend-mode: screen;
}
.floating-numbers .num{
	position: absolute;
	color: rgba(255, 255, 255, 0.65);
	font-family: "Anton", "M PLUS 1p", sans-serif;
	letter-spacing: 0.08em;
	text-shadow: 0 0 12px rgba(255, 66, 0, 0.6), 0 0 30px rgba(255, 66, 0, 0.5);
	animation: floatUp linear infinite;
}
.glow-orb{
	position: fixed;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	filter: blur(16px);
	background: radial-gradient(circle, rgba(255, 66, 0, 0.95), rgba(255, 66, 0, 0.0));
	z-index: 9;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.95;
	transform: translate(-50%, -50%);
}
.cursor-sparkles{
	position: fixed;
	inset: 0;
	z-index: 12;
	pointer-events: none;
	mix-blend-mode: screen;
}
.cursor-sparkles .sparkle{
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,220,160,0.8) 35%, rgba(255,66,0,0) 70%);
	filter: blur(0.2px);
	box-shadow: 0 0 12px rgba(255, 240, 200, 0.9), 0 0 24px rgba(255, 120, 40, 0.7);
	animation: sparklePop 0.8s ease-out forwards;
}
.cursor-sparkles .sparkle::after{
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%);
	opacity: 0.7;
}

.mainTitle{
	width: 100%;
	margin-bottom: 2em;
}
.mainTitle img{
	width: 100%;
}
.mainTitle h1{
	font-family: "M PLUS 1p", serif;
	letter-spacing: -0.06em;
	color: black;
	text-align: center;
	font-weight: 900;
	font-size: 1.8em;
	line-height: 1.15em;
}
.mainTitle p{
	color: black;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
.embeddedWrap{
	display: flex;
	justify-content: center;
	background: white;
	border: 2px solid gray;
	border-radius: 10px;
	margin-bottom: 2em;
}
.embedded1{
	width: 100%;
	max-width: 812px;
	height: 85vh;
	border-radius: 10px;
}

.content {
  flex: 1;
}
footer {
	position: fixed;
  width: 100%;
  background: #44aa33;
}
/*
FlexBoxの設定
----------------------------------------------------------- */
/*コンテナ*/
.flexContainer{
	display:flex;
	justify-content: flex-start; /*水平方向の揃え設定*/
	align-items: stretch; /*垂直方向の揃え設定*/
}
/*アイテム*/
.flexItem{
	width: calc(100%/2 - 0.3em); /*分割数を指定*/
}
/*要素の真ん中に配置*/
.mannaka{
	display: flex;
	justify-content: center;
	align-items: center;
}
/*
 フェイドインクラス
----------------------------------------------------------- */
.fadeInUp {
  opacity : 0;
  --fade-y: 20px;
  --parallax-y: 0px;
  transform: translate3d(0, calc(var(--fade-y) + var(--parallax-y)), 0);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.fadeInUp.is-visible{
	opacity: 1;
	--fade-y: 0px;
}

@keyframes flicker {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1.15); }
  70% { opacity: 0.6; transform: scale(0.9); }
}
@keyframes sparklePop {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  25% { opacity: 1; transform: scale(1.2) rotate(40deg); }
  100% { opacity: 0; transform: scale(2) rotate(120deg); }
}

@keyframes floatUp {
  0% { transform: translate3d(0, 20vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translate3d(0, -120vh, 0) rotate(360deg); opacity: 0; }
}
/*
 メディアクエリ 
----------------------------------------------------------- */
@media (min-width:600px){
	.mainTitle h1{
	font-size: 2.8em;
}
	.mainTitle p{
	font-size: 1.5em;
}
}

@media (max-width:600px){
	
}