/* 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{
	position: relative;
	min-height: 100vh;
	background: black;
	background-image: url("../img/back.png");
	background-size:100% auto ;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.bgSparkLayer{
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	mix-blend-mode: screen;
}
.bgSparkLayer::before,
.bgSparkLayer::after{
	content: "";
	position: absolute;
	inset: -12%;
	background:
		radial-gradient(circle at 18% 20%, rgba(255, 232, 146, 0.28), transparent 16%),
		radial-gradient(circle at 82% 18%, rgba(255, 190, 58, 0.22), transparent 18%),
		radial-gradient(circle at 48% 78%, rgba(255, 255, 214, 0.18), transparent 20%);
	filter: blur(16px);
	opacity: 0.78;
	animation: bgGlowDrift 9s ease-in-out infinite;
}
.bgSparkLayer::after{
	inset: -20%;
	background:
		radial-gradient(circle at 72% 54%, rgba(255, 211, 86, 0.24), transparent 15%),
		radial-gradient(circle at 24% 70%, rgba(255, 247, 186, 0.2), transparent 17%);
	animation-duration: 12s;
	animation-delay: -4s;
}
.bgSpark{
	position: absolute;
	top: -10vh;
	left: var(--bg-spark-left);
	width: var(--bg-spark-size);
	height: var(--bg-spark-size);
	border-radius: 50%;
	background: radial-gradient(circle, #fffbe4 0%, #ffe27b 38%, rgba(255, 184, 38, 0) 74%);
	box-shadow:
		0 0 8px rgba(255, 225, 116, 0.92),
		0 0 16px rgba(255, 174, 25, 0.44);
	opacity: 0;
	transform: translate3d(0, -12vh, 0) rotate(0deg);
	animation: bgSparkFall var(--bg-spark-duration) linear infinite;
	animation-delay: var(--bg-spark-delay);
}
.bgSpark:nth-child(3n){
	border-radius: 2px;
	background: linear-gradient(135deg, rgba(255,255,232,0.98), rgba(255,196,48,0.72) 48%, rgba(255,176,20,0));
}
.bgSpark:nth-child(4n){
	filter: blur(0.6px);
}
.bgSpark:nth-child(5n){
	width: calc(var(--bg-spark-size) * 1.8);
	height: 1px;
	border-radius: 999px;
}
.dechauheaderWrapper,
.mainVisu,
.body1{
	position: relative;
	z-index: 1;
}
.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;
}

.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: white;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
.charaSection{
	position: relative;
	margin: 0 auto 2.5em;
	padding: 1.1em 0.85em 1.4em;
	overflow: hidden;
	border: 2px solid red;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	isolation: isolate;
}
.charaSparkLayer{
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.charaSparkLayer::before,
.charaSparkLayer::after{
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(18px);
	opacity: 0.42;
	animation: charaGlowPulse 4.8s ease-in-out infinite;
}
.charaSparkLayer::before{
	top: 10%;
	left: 8%;
	width: 11em;
	height: 11em;
	background: radial-gradient(circle, rgba(255, 218, 105, 0.55), transparent 68%);
}
.charaSparkLayer::after{
	right: 4%;
	bottom: 16%;
	width: 14em;
	height: 14em;
	background: radial-gradient(circle, rgba(255, 185, 43, 0.38), transparent 70%);
	animation-delay: -2s;
}
.charaSpark{
	position: absolute;
	top: -12%;
	left: var(--spark-left);
	width: var(--spark-size);
	height: var(--spark-size);
	border-radius: 50%;
	background: radial-gradient(circle, #fff8ca 0%, #ffd55e 42%, rgba(255, 182, 38, 0) 72%);
	box-shadow: 0 0 9px rgba(255, 220, 96, 0.88);
	opacity: 0;
	transform: translate3d(0, -2em, 0);
	animation: charaSparkFall var(--spark-duration) linear infinite;
	animation-delay: var(--spark-delay);
}
.charaSpark:nth-child(3n){
	border-radius: 2px;
	transform: rotate(18deg);
}
.charaSpark:nth-child(4n){
	filter: blur(1px);
}
.charaHead{
	position: relative;
	z-index: 2;
	margin-bottom: 0.8em;
	text-align: center;
}
.charaKicker{
	display: inline-block;
	margin-bottom: 0.25em;
	padding: 0.25em 0.9em;
	border: 1px solid rgba(255, 216, 111, 0.75);
	border-radius: 999px;
	background: rgba(0,0,0,0.38);
	color: #ffe59c;
	font-family: 'Anton', sans-serif;
	font-size: 0.82em;
	letter-spacing: 0.08em;
}
.charaHead h2{
	color: red;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 1.55em;
	font-weight: 900;
	line-height: 1.18;
	/*text-shadow: 0 3px 0 #50020b, 0 0 18px rgba(255, 206, 87, 0.58);*/
}
.charaCarousel{
	position: relative;
	z-index: 2;
	padding-top: 0.65em;
}
.charaViewport{
	overflow-x: hidden;
	overflow-y: hidden;
	cursor: grab;
	touch-action: pan-y;
}
.charaViewport.is-dragging{
	cursor: grabbing;
}
.charaTrack{
	display: flex;
	gap: 1em;
	padding: 2em 0.1em 1em;
	transition: transform 0.58s cubic-bezier(.2,.86,.2,1);
	will-change: transform;
}
.charaViewport.is-dragging .charaTrack{
	transition: none;
}
.charaCard{
	position: relative;
	flex: 0 0 78%;
	min-height: 440px;
	overflow: visible;
	border: 1px solid rgba(255, 220, 124, 0.8);
	border-radius: 12px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.12), transparent 30%),
		linear-gradient(145deg, rgba(24, 2, 5, 0.96), rgba(112, 7, 18, 0.94));
	box-shadow: 0 16px 28px rgba(0,0,0,0.4);
	opacity: 0.58;
	transform: scale(0.93);
	transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
}
.charaCard::before{
	content: "";
	position: absolute;
	inset: 0.55em;
	border: 1px solid rgba(255, 216, 111, 0.35);
	border-radius: 9px;
	pointer-events: none;
}
.charaCard::after{
	content: "";
	position: absolute;
	right: -24%;
	bottom: -16%;
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 216, 111, 0.28), transparent 68%);
}
.charaCard.is-active{
	opacity: 1;
	transform: scale(1);
	box-shadow: 0 18px 34px rgba(0,0,0,0.5), 0 0 22px rgba(255, 212, 99, 0.35);
}
.charaImage{
	position: absolute;
	left: 50%;
	top: -1.15em;
	width: 112%;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
}
.charaImage img{
	display: block;
	width: 100%;
	filter: drop-shadow(0 18px 18px rgba(0,0,0,0.62));
	transform: translateY(0) rotate(-1deg);
	transition: transform 0.7s cubic-bezier(.2,.86,.2,1);
}
.charaCard.is-active .charaImage img{
	transform: translateY(-0.55em) rotate(1deg) scale(1.03);
	animation: charaFloat 3.8s ease-in-out infinite;
}
.charaText{
	position: absolute;
	left: 0.8em;
	right: 0.8em;
	bottom: 0.8em;
	z-index: 2;
	padding: 0.85em;
	/*border-left: 4px solid #ffd86f;*/
	border-radius: 9px;
	background: linear-gradient(90deg, rgba(12, 2, 4, 0.94), rgba(72, 5, 12, 0.78));
	backdrop-filter: blur(3px);
}
.charaNumber{
	color: #ffd86f;
	font-family: 'Anton', sans-serif;
	font-size: 0.74em;
	letter-spacing: 0.06em;
}
.charaText h3{
	margin: 0.08em 0 0.18em;
	color: white;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 1.9em;
	font-weight: 900;
	line-height: 1;
	text-shadow: 3px 3px 0 #8b0715;
}
.charaText p:last-child{
	color: #fff8de;
	font-size: 1em;
	font-weight: 800;
	line-height: 1.58;
}
.charaNav{
	position: absolute;
	top: 48%;
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 226, 143, 0.9);
	border-radius: 50%;
	background: linear-gradient(180deg, #fff0a8, #c79324);
	color: #5c020b;
	font-size: 2.1em;
	font-weight: 900;
	line-height: 0.9;
	box-shadow: 0 5px 0 #6d0711, 0 10px 18px rgba(0,0,0,0.35);
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.charaNav:hover{
	transform: translateY(-54%) scale(1.06);
	box-shadow: 0 6px 0 #6d0711, 0 14px 22px rgba(0,0,0,0.42);
}
.charaNavPrev{
	left: 0.1em;
}
.charaNavNext{
	right: 0.1em;
}
.charaDots{
	display: flex;
	justify-content: center;
	gap: 0.55em;
	margin-top: 0.25em;
}
.charaDot{
	width: 11px;
	height: 11px;
	border: 1px solid #ffd86f;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}
.charaDot.is-active{
	width: 30px;
	border-radius: 999px;
	background: #ffd86f;
	box-shadow: 0 0 12px rgba(255, 216, 111, 0.8);
}
.charaRumor{
	position: relative;
	z-index: 2;
	margin-top: 1em;
	padding: 0.75em 0.6em;
	border-top: 1px solid rgba(255, 216, 111, 0.5);
	border-bottom: 1px solid rgba(255, 216, 111, 0.5);
	color: #fff4c5;
	text-align: center;
	font-size: 0.8em;
	font-weight: 900;
	line-height: 1.35;
	text-shadow: 0 0 12px rgba(255, 216, 111, 0.55);
}
.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 (min-width:600px){
	.mainTitle h1{
		font-size: 2.8em;
	}
		.mainTitle p{
		font-size: 1.5em;
	}
	.charaSection{
		padding: 1.35em 1.2em 1.65em;
	}
	.charaHead h2{
		font-size: 2.2em;
	}
	.charaCard{
		flex-basis: 58%;
		min-height: 520px;
	}
	.charaImage{
		top: -1.65em;
		width: 106%;
	}
	.charaText{
		left: 1em;
		right: 1em;
		bottom: 1em;
		padding: 1em;
	}
	.charaText h3{
		font-size: 2.35em;
	}
	.charaText p:last-child{
		font-size: 1.08em;
	}
	.charaRumor{
		font-size: 1.55em;
	}
}

@media (max-width:600px){
	.charaSection{
		margin-left: -0.25em;
		margin-right: -0.25em;
	}
	.charaTrack{
		gap: 0.75em;
		padding-top: 1.7em;
	}
	.charaCard{
		flex-basis: 86%;
		min-height: 415px;
	}
	.charaImage{
		top: -0.75em;
		width: 126%;
	}
	.charaNav{
		width: 36px;
		height: 36px;
		font-size: 1.75em;
	}
	.charaText h3{
		font-size: 1.65em;
	}
	.charaText p:last-child{
		font-size: 0.92em;
	}
}

@media (prefers-reduced-motion: reduce){
	.charaTrack,
	.charaCard,
	.charaImage img,
	.charaNav,
	.charaDot{
		transition: none;
	}
	.charaCard.is-active .charaImage img{
		animation: none;
	}
	.charaSpark,
	.charaSparkLayer::before,
	.charaSparkLayer::after,
	.bgSpark,
	.bgSparkLayer::before,
	.bgSparkLayer::after{
		animation: none;
	}
}

@keyframes bgSparkFall{
	0%{
		opacity: 0;
		transform: translate3d(0, -12vh, 0) rotate(0deg) scale(0.62);
	}
	9%{
		opacity: var(--bg-spark-opacity);
	}
	78%{
		opacity: var(--bg-spark-opacity);
	}
	100%{
		opacity: 0;
		transform: translate3d(var(--bg-spark-drift), 112vh, 0) rotate(260deg) scale(1);
	}
}

@keyframes bgGlowDrift{
	0%, 100%{
		transform: translate3d(-1.5%, -1%, 0) scale(1);
		opacity: 0.58;
	}
	50%{
		transform: translate3d(1.5%, 1%, 0) scale(1.06);
		opacity: 0.86;
	}
}

@keyframes charaSparkFall{
	0%{
		opacity: 0;
		transform: translate3d(0, -2em, 0) rotate(0deg) scale(0.6);
	}
	12%{
		opacity: var(--spark-opacity);
	}
	82%{
		opacity: var(--spark-opacity);
	}
	100%{
		opacity: 0;
		transform: translate3d(var(--spark-drift), 36em, 0) rotate(220deg) scale(1);
	}
}

@keyframes charaGlowPulse{
	0%, 100%{
		transform: scale(0.92);
		opacity: 0.32;
	}
	50%{
		transform: scale(1.08);
		opacity: 0.55;
	}
}

@keyframes charaFloat{
	0%, 100%{
		transform: translateY(-0.55em) rotate(1deg) scale(1.03);
	}
	50%{
		transform: translateY(-1.05em) rotate(-0.6deg) scale(1.045);
	}
}