/* CSS Document */

:root{
	--prism-core-size: 22vmin;
}

*{
	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;}

body{
	background-color: #010101;
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42) 62%, #010101 100%),
		url("../img/back_bb1000.jpg");
	background-size: 100% auto;
	background-position: center top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}
.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: 1;
}

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

.mainVisu{
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 1;
	isolation: isolate;
	padding-top: clamp(0px, 1.8vw, 18px);
}
.mainVisu::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1180px, 112vw);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 5%, rgba(255, 255, 255, 0.08) 14%, rgba(255, 255, 255, 0) 46%),
		conic-gradient(from 215deg, rgba(0, 216, 255, 0), rgba(0, 216, 255, 0.2), rgba(255, 255, 255, 0.34), rgba(255, 70, 210, 0.18), rgba(0, 216, 255, 0));
	filter: blur(18px);
	opacity: 0.62;
	mix-blend-mode: screen;
	z-index: -1;
	animation: logoAura 5.5s ease-in-out infinite;
}
.mainVisu img{
    width: 100%;
	max-width: 1000px;
	filter:
		drop-shadow(0 18px 36px rgba(0, 0, 0, 0.78))
		drop-shadow(0 0 26px rgba(0, 212, 255, 0.2))
		drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
}

.prismBurst{
	--burst-center-x: 50vw;
	--burst-center-y: 50vh;
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.prismBurst::before{
	content: "";
	position: absolute;
	inset: -18%;
	background:
		radial-gradient(circle at var(--burst-center-x) var(--burst-center-y), rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.12) 7%, rgba(255, 255, 255, 0) 18%),
		radial-gradient(circle at var(--burst-center-x) var(--burst-center-y), rgba(0, 229, 255, 0.16) 0, rgba(0, 229, 255, 0) 31%),
		radial-gradient(circle at var(--burst-center-x) var(--burst-center-y), rgba(255, 0, 176, 0.13) 0, rgba(255, 0, 176, 0) 36%),
		conic-gradient(from 8deg at var(--burst-center-x) var(--burst-center-y), rgba(255, 255, 255, 0), rgba(0, 221, 255, 0.16), rgba(255, 255, 255, 0.04), rgba(255, 46, 196, 0.13), rgba(255, 255, 255, 0), rgba(255, 231, 82, 0.1), rgba(255, 255, 255, 0));
	filter: blur(22px);
	opacity: 0.86;
	animation: prismAtmosphere 9s linear infinite;
}
.prismBurst::after{
	content: "";
	position: absolute;
	top: var(--burst-center-y);
	left: var(--burst-center-x);
	width: 92vmax;
	height: 92vmax;
	transform: translate(-50%, -50%);
	background:
		repeating-conic-gradient(from -14deg, rgba(255, 255, 255, 0) 0deg 9deg, rgba(255, 255, 255, 0.16) 9.4deg 10.1deg, rgba(0, 217, 255, 0.11) 10.2deg 11.2deg, rgba(255, 255, 255, 0) 11.5deg 24deg);
	-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 8%, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0) 68%);
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 8%, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0) 68%);
	mix-blend-mode: screen;
	opacity: 0.34;
	animation: prismHaloSpin 22s linear infinite;
}
.prismCore{
	position: absolute;
	top: var(--burst-center-y);
	left: var(--burst-center-x);
	width: var(--prism-core-size);
	height: var(--prism-core-size);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 3%, rgba(255, 255, 255, 0.42) 7%, rgba(0, 221, 255, 0.22) 18%, rgba(255, 0, 183, 0.08) 34%, rgba(255, 255, 255, 0) 72%);
	box-shadow:
		0 0 34px rgba(255, 255, 255, 0.28),
		0 0 72px rgba(0, 221, 255, 0.16),
		0 0 116px rgba(255, 39, 191, 0.1);
	mix-blend-mode: screen;
	animation: prismCorePulse 2.25s ease-in-out infinite;
}
.prismRay{
	--angle: 0deg;
	--length: 52vmax;
	--thickness: 2px;
	--duration: 1.8s;
	--delay: 0s;
	--drift: 4vmax;
	--flare: 14px;
	--ray-color: #ffffff;
	position: absolute;
	top: var(--burst-center-y);
	left: var(--burst-center-x);
	width: var(--length);
	height: var(--thickness);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--ray-color) 12%, rgba(255, 255, 255, 0.92) 33%, var(--ray-color) 54%, rgba(255, 255, 255, 0));
	opacity: 0;
	transform-origin: 0 50%;
	filter: blur(0.35px);
	mix-blend-mode: screen;
	box-shadow:
		0 0 calc(var(--flare) * 0.8) var(--ray-color),
		0 0 calc(var(--flare) * 1.9) rgba(255, 255, 255, 0.62);
	animation: prismShoot var(--duration) cubic-bezier(0.18, 0.78, 0.22, 1) infinite;
	animation-delay: var(--delay);
}
.prismRay::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20vmax;
	height: calc(var(--thickness) * 2.1);
	transform: translateY(-50%);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), var(--ray-color) 42%, rgba(255, 255, 255, 0));
	filter: blur(1.4px);
	opacity: 0.76;
}
.prismRay::after{
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	width: calc(var(--thickness) * 2.8);
	height: calc(var(--thickness) * 2.8);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--ray-color);
	box-shadow:
		0 0 calc(var(--flare) * 1) rgba(255, 255, 255, 0.9),
		0 0 calc(var(--flare) * 1.9) var(--ray-color);
}
.mainTitle{
	width: 100%;
	margin-bottom: 2em;
}
.mainTitle img{
	width: 100%;
}
.mainTitle h1{
	font-family: "M PLUS 1p", serif;
	letter-spacing: -0.06em;
	color: white;
	text-align: center;
	font-weight: 900;
	font-size: 1.8em;
	line-height: 1.15em;
    text-shadow: black 1px 0 10px;
}
.mainTitle p{
	color: white;
	text-align: center;
	width: 100%;
	margin: 0 auto;
    text-shadow: black 1px 0 10px;
}
.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;
  transform: translateY(20px);
  transition: 5s;
}

@keyframes prismCorePulse{
	0%, 100%{
		transform: translate(-50%, -50%) scale(0.76);
		opacity: 0.46;
	}
	50%{
		transform: translate(-50%, -50%) scale(1.16);
		opacity: 0.88;
	}
}

@keyframes prismShoot{
	0%{
		opacity: 0;
		transform:
			translateY(-50%)
			rotate(var(--angle))
			translateX(calc(var(--drift) * -1))
			scaleX(0.08);
	}
	9%{
		opacity: 0.92;
	}
	52%{
		opacity: 0.86;
		transform:
			translateY(-50%)
			rotate(var(--angle))
			translateX(var(--drift))
			scaleX(1);
	}
	100%{
		opacity: 0;
		transform:
			translateY(-50%)
			rotate(var(--angle))
			translateX(calc(var(--drift) * 2.1))
			scaleX(1.18);
	}
}

@keyframes prismAtmosphere{
	0%{
		transform: scale(1) rotate(0deg);
	}
	50%{
		transform: scale(1.04) rotate(2deg);
	}
	100%{
		transform: scale(1) rotate(0deg);
	}
}

@keyframes prismHaloSpin{
	0%{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100%{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes logoAura{
	0%, 100%{
		opacity: 0.48;
		transform: translate(-50%, -50%) scale(0.96);
	}
	50%{
		opacity: 0.74;
		transform: translate(-50%, -50%) scale(1.04);
	}
}
/*
 メディアクエリ 
----------------------------------------------------------- */
@media (min-width:600px){
	.mainTitle h1{
	font-size: 2.8em;
}
	.mainTitle p{
	font-size: 1.5em;
}
}

@media (max-width:600px){
	body{
		background-attachment: scroll;
	}
	:root{
		--prism-core-size: 25vmin;
	}
	.mainVisu::before{
		width: 132vw;
		opacity: 0.42;
		filter: blur(16px);
	}
	.prismBurst::before{
		opacity: 0.64;
		filter: blur(18px);
	}
	.prismBurst::after{
		opacity: 0.24;
	}
	.prismRay::before{
		width: 12vmax;
	}
}