@charset "UTF-8";
/* CSS Document */

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



body{
	background-size:100% auto;
	background-color: black;
	scroll-margin-top: 0!important;
    background-image: url("../img/gakaruback.png");
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    --mirage-shift-x: 0px;
    --mirage-shift-y: 0px;
    --mirage-band-shift: 0px;
    --mirage-skew: 0deg;
    --mirage-opacity: 0.52;
    --mirage-bg-opacity: 0.38;
}

.mirage-layer{
	position: fixed;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}
.mirage-layer::before,
.mirage-layer::after{
	content: "";
	position: absolute;
	inset: -8%;
}
.mirage-layer::before{
	background-image: url("../img/gakaruback.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	opacity: var(--mirage-bg-opacity);
	filter: blur(4.2px) saturate(1.3) brightness(1.15);
	transform: translate3d(var(--mirage-shift-x), var(--mirage-shift-y), 0) scale(1.06);
	mix-blend-mode: screen;
}
.mirage-layer::after{
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255,255,255,0) 0px,
		rgba(255,235,190,0.16) 5px,
		rgba(255,180,88,0.09) 11px,
		rgba(255,255,255,0) 22px
	);
	mix-blend-mode: hard-light;
	opacity: var(--mirage-opacity);
	filter: blur(1.5px);
	transform: translate3d(var(--mirage-band-shift), 0, 0) skewX(var(--mirage-skew)) scale(1.03);
	animation: mirageWave 4.5s linear infinite;
}

.kanji-layer{
	position: fixed;
	inset: 0;
	z-index: 12;
	pointer-events: none;
	overflow: hidden;
}

.kanji-glyph{
	position: absolute;
	left: 0;
	top: 0;
	line-height: 1;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "serif";
	font-weight: 700;
	opacity: 0;
	mix-blend-mode: screen;
	text-shadow:
		0 0 8px rgba(255,214,137,0.8),
		0 0 20px rgba(255,133,46,0.55),
		0 0 36px rgba(255,88,24,0.45);
	filter: blur(0.2px);
	transform: translate3d(0,0,0) rotate(var(--glyph-rot, 0deg)) scale(0.58);
	animation-name: kanjiBlink;
	animation-timing-function: cubic-bezier(0.18, 0.78, 0.35, 1);
	animation-fill-mode: both;
}

#sparkCanvas{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3000;
	pointer-events: none;
}

@keyframes mirageWave{
	0%{background-position: 0 0;}
	50%{background-position: 70px -10px;}
	100%{background-position: -55px 12px;}
}

@keyframes kanjiBlink{
	0%{
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(var(--glyph-rot, 0deg)) scale(0.58);
		filter: blur(1.2px);
	}
	18%{
		opacity: var(--glyph-opacity, 0.75);
		filter: blur(0.25px);
	}
	32%{
		opacity: calc(var(--glyph-opacity, 0.75) * 0.42);
	}
	48%{
		opacity: var(--glyph-opacity, 0.75);
	}
	72%{
		opacity: calc(var(--glyph-opacity, 0.75) * 0.36);
	}
	100%{
		opacity: 0;
		transform: translate3d(var(--glyph-drift-x, 0px), var(--glyph-drift-y, -40px), 0) rotate(calc(var(--glyph-rot, 0deg) + 8deg)) scale(1.08);
		filter: blur(0.7px);
	}
}

@keyframes mirageGlow{
	0%,100%{transform: translate3d(0,0,0) scale(1);}
	50%{transform: translate3d(0,-1.5%,0) scale(1.05);}
}

.body1 {
	width: calc(100% - 2em);
	max-width: 800px; /** デザインの最大幅 **/
	margin: 0 auto;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
	    "Hiragino Sans",
	    Meiryo,
	    sans-serif;
	padding-top: 190px;
	position: relative;
	z-index: 20;
}
img {border:0;}
address {font-style:normal;}
a{text-decoration:none;}

.m0auto{margin: 0 auto;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px!important;}
.mb30{margin-bottom: 30px!important;}
.mb50{margin-bottom: 50px!important;}
.mt10{margin-top: 10px!important;}
.mt15{margin-top: 15px!important;}
.mt30{margin-top: 30px!important;}
.mt50{margin-top: 50px!important;}

.mb1em{margin-bottom: 1em!important;}
.mb2em{margin-bottom: 2em!important;}
.mb3em{margin-bottom: 3em!important;}
.mt1em{margin-top: 1em!important;}
.mt2em{margin-top: 2em!important;}
.mt3em{margin-top: 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;}

.embeddedWrap{
	display: flex;
	justify-content: center;
	background: white;
	border: 1px solid red;
	border-radius: 10px;
}
.embedded1{
	width: 100%;
	max-width: 812px;
	height: 600px;
	border-radius: 10px;
}


.title img{
	display: block;
	width: 100%;
}
.read1 p{
	font-size: 1em;
	color:white;
	margin-bottom: 1em;
	text-align: center;
}
.catsch1 h2{
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: red;
	margin: 0.3em;
}




.kekkaWrapper{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.kekka{
    width: 32.5%;
}
.kekka a{
    display: block;
    text-decoration: none;    
    border: 2px solid #333;
    border-radius: 10px;
    padding: 0.5em;
    width: 100%;
    font-size: 0.7em;
    color:black;
    background: #ffe3a3;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 700;
    margin-bottom: 0.5em;
}
.kekka a:hover{
    opacity: 0.8;
}






/*
FlexBoxの設定
----------------------------------------------------------- */
/*コンテナ*/
.flexContainer{
	display:flex;
	justify-content: center;

}
/*アイテム*/
.flexItem{
	margin: 0 4%;
}


/*
 フェイドインクラス
----------------------------------------------------------- */
.fadeInUp{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/*
 メディアクエリ 
----------------------------------------------------------- */
@media (max-width:813px){
	.body1 {
		width: calc(100% - 2em);
		max-width: 420px; /** デザインの最大幅 **/
		margin: 0 auto;
		/*font-family: 'M PLUS 1p', sans-serif;*/
		font-family: "Helvetica Neue",Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
		padding-top: 120px;
	}
}

img {
max-width: 100%;
height: auto;
}
img.yohaku1{
margin:20px auto;
    display: flex;
    justify-content: center;
    
}
img.yohaku2{
margin:20px auto 40px auto;
    display: flex;
    justify-content: center;
    
}
.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
  }
.youtube iframe {
		width: 100%;
		height: 100%;
	  }

@media (prefers-reduced-motion: reduce){
	.mirage-layer::before,
	.mirage-layer::after{
		animation: none;
	}
	#sparkCanvas{
		display: none;
	}
	.kanji-layer{
		display: none;
	}
}