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

body{
	margin: 0;
	background-color: #000;
	overflow-x: hidden;
	min-height: 100vh;
}

/* ホログラム背景エフェクト
----------------------------------------------------------- */
.hologram-bg{
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
}
.hologram-bg::before,
.hologram-bg::after{
	content: "";
	position: absolute;
	pointer-events: none;
}
.hologram-bg::before{
	inset: 0;
	z-index: 0;
	background-image: url("../img/back_seirarai.jpg");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}
.hologram-bg::after{
	inset: -34%;
	z-index: 1;
	background:
		linear-gradient(116deg,
			transparent 0%,
			transparent 43%,
			rgba(255, 255, 255, .12) 45%,
			rgba(255, 255, 255, .92) 47%,
			rgba(255, 255, 255, .26) 49%,
			transparent 53%,
			transparent 100%),
		linear-gradient(116deg,
			transparent 0%,
			transparent 41%,
			rgba(126, 231, 255, .02) 44%,
			rgba(126, 231, 255, .36) 46%,
			transparent 48%,
			rgba(255, 164, 232, .32) 50%,
			transparent 52%,
			rgba(255, 243, 165, .24) 54%,
			transparent 57%,
			transparent 100%),
		linear-gradient(116deg,
			transparent 0%,
			transparent 25%,
			rgba(255, 255, 255, .12) 26%,
			rgba(255, 255, 255, .56) 28%,
			rgba(186, 245, 255, .28) 29%,
			transparent 33%,
			transparent 100%),
		repeating-linear-gradient(116deg,
			transparent 0,
			transparent 74px,
			rgba(255, 255, 255, .24) 76px,
			rgba(190, 244, 255, .16) 78px,
			transparent 84px,
			transparent 186px),
		radial-gradient(circle at 16% 24%, rgba(255, 255, 255, .78) 0, rgba(255, 255, 255, .78) 1px, transparent 2px),
		radial-gradient(circle at 68% 36%, rgba(190, 244, 255, .66) 0, rgba(190, 244, 255, .66) 1px, transparent 2px),
		radial-gradient(circle at 38% 82%, rgba(255, 213, 246, .6) 0, rgba(255, 213, 246, .6) 1px, transparent 2px);
	background-blend-mode: screen, screen, lighten, screen, lighten, screen, screen;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
	background-position:
		-155% 50%,
		-138% 50%,
		-100% 58%,
		0 0,
		0 0,
		80px 48px,
		140px 110px;
	background-size:
		230% 230%,
		230% 230%,
		210% 210%,
		100% 100%,
		280px 280px,
		360px 360px,
		430px 430px;
	mix-blend-mode: screen;
	opacity: .42;
	filter: blur(.25px) saturate(1.15);
	animation: hologramShimmer 13s ease-in-out infinite;
	will-change: transform, background-position, opacity;
}
@keyframes hologramShimmer{
	0%{
		background-position:
			-155% 50%,
			-138% 50%,
			-100% 58%,
			0 0,
			0 0,
			80px 48px,
			140px 110px;
		opacity: .34;
		transform: translate3d(-2%, 0, 0);
	}
	46%{
		background-position:
			64% 46%,
			76% 49%,
			42% 56%,
			20px -14px,
			18px -20px,
			46px 92px,
			116px 148px;
		opacity: .58;
		transform: translate3d(1%, -1%, 0);
	}
	62%{
		opacity: .46;
	}
	100%{
		background-position:
			210% 44%,
			225% 48%,
			180% 56%,
			38px -28px,
			34px -42px,
			12px 132px,
			92px 186px;
		opacity: .36;
		transform: translate3d(2%, -1%, 0);
	}
}

/* 左右サイド共通 */
.side-panel{
	position: fixed;
	top: 0;
	width: 285px;
	height: 100vh;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

/* 左 */
.side-panel-left{
	left: 0;
}

/* 右 */
.side-panel-right{
	right: 0;
}

/* サイドの焼き込みカラーだけ */
.side-color{
	position: absolute;
	inset: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	opacity: .82;
}

.side-panel-left .side-color{
	background: #ff4fa0;
}

.side-panel-right .side-color{
	background: #ffe600;
}

/* キャラPNG */
.side-character{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	z-index: 2;
}

/* コンテンツをサイドより前に出す */
header,
nav,
main,
.wrapper,
.container,
.dechauheaderWrapper,
.mainVisu,
.body1,
.mainTitle,
.embeddedWrap,
.embedded1,
.decharepoAnnai,
.body1 > a,
.copyright{
	position: relative;
	z-index: 5;
}
.dechauheaderWrapper{
	z-index: 10!important;
}

/* 1500px以下でサイド非表示 */
@media (max-width: 1200px){
	.side-panel{
		display: none;
	}
}



.body1 {
	width: calc(100% - 2em);
	max-width: 700px; /** デザインの最大幅 **/
	margin: 0 auto;
	position: relative;
	z-index: 4;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

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

.mainVisu{
	display: flex;
	justify-content: center;
}
.mainVisu img{
    width: 100%;
	max-width: 1000px;
}
.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;
}
.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;
  transform: translateY(20px);
  transition: 5s;
}
/*
 メディアクエリ 
----------------------------------------------------------- */

@media (max-width: 1000px){

	.hologram-bg::before{
		background-position: top center;
	}
	.hologram-bg::after{
		inset: -34%;
		background-size:
			250% 250%,
			250% 250%,
			230% 230%,
			100% 100%,
			220px 220px,
			290px 290px,
			350px 350px;
		opacity: .4;
		animation-duration: 14s;
	}

}

@media (prefers-reduced-motion: reduce){
	.hologram-bg::after{
		animation: none;
		background-position:
			58% 48%,
			70% 50%,
			38% 57%,
			18px -12px,
			12px 24px,
			52px 92px,
			124px 152px;
		opacity: .32;
		transform: none;
	}
}


@media (min-width:600px){
	.mainTitle h1{
	font-size: 2.8em;
}
	.mainTitle p{
	font-size: 1.5em;
}
}

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