/* ==================================================
 style.css
================================================== */
/* Reset css */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
body,h1,h2,h3,p,ul,ol,figure {
	margin: 0;
}
ul,ol {
	list-style: none;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
iframe {
	display: block;
	border: 0;
}
a {
	text-decoration: none;
	color: inherit;
}
/* Root */
:root {
	--color-header: #ff4200;
	--color-nav: #4d4d4d;
	--color-border:#808080;
	--color-black: #000;
	--color-white: #fff;
	
	--width-wide: 200rem;
	--width-middle: 150rem;
	--width-small: 77.2rem;
	--width-iframe: 81.2rem;
	--width-banner: 50rem;
	
	--radius: 1rem;
	--radius-large: 1.5rem;
	
	--shadow-text:1px 1px 2px var(--color-black);
}
/* Base */
body {
	min-height: 100vh;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
	color: var(--color-black);
	font-feature-settings: "palt";
	background-color: var(--color-black);
}
body::before {
	content: none;
}
main {
	padding-top: 1rem;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
/* 背景はロゴの切替と同期する。 */
.site-backgrounds {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: var(--color-black);
	z-index: 0;
	pointer-events: none;
}
.site-backgrounds::before,
.site-backgrounds::after {
	content: "";
	position: absolute;
	inset: -18%;
	background:
		radial-gradient(ellipse at 12% 98%, rgba(255,255,255,.98) 0 7%, rgba(255,222,126,.58) 12%, transparent 29%),
		radial-gradient(ellipse at 38% 104%, rgba(255,250,225,.92) 0 10%, rgba(255,185,71,.38) 18%, transparent 34%),
		radial-gradient(ellipse at 67% 96%, rgba(255,255,255,.95) 0 8%, rgba(255,231,150,.52) 15%, transparent 30%),
		radial-gradient(ellipse at 94% 105%, rgba(255,247,207,.88) 0 10%, rgba(255,184,59,.38) 18%, transparent 35%),
		radial-gradient(circle at 22% 76%, rgba(255,245,171,.98) 0 .35%, transparent .9%),
		radial-gradient(circle at 48% 58%, rgba(255,255,255,.92) 0 .28%, transparent .8%),
		radial-gradient(circle at 78% 72%, rgba(255,226,106,.98) 0 .42%, transparent 1%),
		radial-gradient(circle at 91% 43%, rgba(255,255,255,.88) 0 .25%, transparent .75%);
	opacity: 0;
	filter: blur(3.6rem) saturate(1.35);
	mix-blend-mode: screen;
	transform: translateY(18%) scale(.68);
	pointer-events: none;
	z-index: 2;
}
.site-backgrounds::after {
	background-position: 14% 8%, 50% 0, 76% 12%, 98% 2%;
}
.site-backgrounds.is-steaming::before {
	animation: steamRise 1.15s cubic-bezier(.2, .7, .25, 1) both;
}
.site-backgrounds.is-steaming::after {
	animation: steamRise 1.15s .14s cubic-bezier(.2, .7, .25, 1) both;
}
.site-backgrounds.is-steaming {
	animation: backgroundImpact .6s cubic-bezier(.18, .72, .3, 1) both;
}
.site-background {
	position: absolute;
	top: clamp(2rem, 6vw, 6rem);
	left: 50%;
	width: 100%;
	height: auto;
	transform: translateX(-50%) scale(1.045);
	transform-origin: center top;
	opacity: 0;
	filter: saturate(1.05) contrast(1.03) brightness(.82);
	transition: opacity .24s ease-out, transform .7s cubic-bezier(.22, 1, .36, 1), filter .42s ease-out;
}
.site-background.is-active {
	opacity: 1;
	transform: translateX(-50%) scale(1);
	filter: saturate(1.18) contrast(1.08) brightness(1);
	animation: backgroundBurst .62s ease-out both;
}
.footer {
	position: relative;
	z-index: 1;
}
/* Layout */
.container-wide {
	width: min(100%,var(--width-wide));
	margin-inline: auto;
}
.container-middle {
	width: min(100%,var(--width-middle));
	margin-inline: auto;
}
.container-small {
	width:min(calc(100% - 2rem), var(--width-small));
	margin-inline: auto;
}
/* Header */
.header {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.header__logo {
	display: block;
	background: var(--color-header);
	padding: 1rem;
}
.header__logo img {
	width: min(80%,40rem);
	margin-inline: auto;
}
.header__nav {
	background: var(--color-nav);
}
.header__menu {
	display: flex;
	justify-content: space-between;
	width: min(90%,60rem);
	margin-inline: auto;
}
.header__menu a {
	display: block;
	padding: .5em;
	color: var(--color-white);
	font-size: 1.44rem;
	line-height: normal;
}
/* Hero */
.hero__logo-switcher {
	width: min(96%, var(--width-wide));
	aspect-ratio: 2000 / 1958;
	margin-inline:auto;
	position: relative;
	isolation: isolate;
}
.hero__logo-switcher::before,
.hero__logo-switcher::after {
	content: "";
	position: absolute;
	inset: -12%;
	background:
		radial-gradient(ellipse at 12% 102%, rgba(255,255,255,1) 0 9%, rgba(255,219,110,.65) 15%, transparent 31%),
		radial-gradient(ellipse at 48% 97%, rgba(255,248,221,.98) 0 11%, rgba(255,180,52,.5) 19%, transparent 36%),
		radial-gradient(ellipse at 88% 102%, rgba(255,255,255,.96) 0 9%, rgba(255,223,123,.58) 16%, transparent 32%);
	opacity: 0;
	filter: blur(1.9rem) saturate(1.3);
	mix-blend-mode: screen;
	transform: translateY(20%) scale(.64);
	pointer-events: none;
	z-index: 3;
}
.hero__logo-switcher::after {
	background-position: 10% 0, 56% 10%, 92% 2%;
}
.hero__logo-switcher.is-steaming::before {
	animation: steamRise .92s cubic-bezier(.2, .7, .25, 1) both;
}
.hero__logo-switcher.is-steaming::after {
	animation: steamRise .92s .12s cubic-bezier(.2, .7, .25, 1) both;
}
.hero__logo-switcher.is-steaming .hero__logo.is-active {
	animation: logoImpact .46s cubic-bezier(.18, .8, .28, 1) both;
}
.hero__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transform: translate3d(5%, 0, 0) scale(.92);
	filter: none;
	transition: opacity .12s ease-out, transform .24s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
	pointer-events: none;
}
.hero__logo.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: none;
	z-index: 1;
}
@keyframes steamRise {
	0% { opacity: 0; transform: translateY(22%) scale(.58); }
	18% { opacity: .95; }
	55% { opacity: .72; }
	100% { opacity: 0; transform: translateY(-42%) scale(1.55); }
}
@keyframes backgroundImpact {
	0% { filter: brightness(1) saturate(1); }
	22% { filter: brightness(1.32) saturate(1.28); }
	100% { filter: brightness(1) saturate(1); }
}
@keyframes logoImpact {
	0% { opacity: 0; transform: scale(.84); }
	55% { opacity: 1; transform: scale(1.045); }
	100% { opacity: 1; transform: scale(1); }
}
.hero__title {
	margin: 2rem 0;
	font-family: "M PLUS 1p",sans-serif;
	font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-black);
	text-align: center;
	filter:
    drop-shadow(0 0 2px var(--color-white))
    drop-shadow(0 0 4px var(--color-white))
    drop-shadow(0 0 6px var(--color-white))
    drop-shadow(0 0 8px rgba(255,255,255,.8));
}
.hero__text {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	color: var(--color-white);
	font-size: clamp(1.6rem, 1.4rem + 0.7vw, 1.9rem);
	font-weight:300;
	text-shadow:var(--shadow-text);
}
.split {
	display: flex;
	justify-content: center;
	flex-wrap: no-wrap;
	margin-top: clamp(3rem,8vw,10rem);
}
.split__img {
	width: clamp(10rem,30vw,50rem);
}
.x-banner {
	display: block;
	width: min(100%, var(--width-banner));
	margin: 2rem auto;
}
/* Schedule */
.schedule {
	margin: 3rem auto;
}
.schedule__container {
	display: flex;
	justify-content: center;
	background: var(--color-white);
	border: 2px solid var(--color-border);
	border-radius:var(--radius);
}
.schedule__iframe {
	width: 100%;
	max-width: var(--width-iframe);
	height: 60rem;
	border-radius:var(--radius);
}
/* Links */
.links {
	margin-bottom: 3rem;
}
.links__link {
	display: block;
}
.decharepo-banner {
	width: min(100%, var(--width-banner));
	margin: 0 auto 3rem;
}
.dechau-logo-banner {
    width:100%;
}
.back-button {
	display: block;
	max-width:var(--width-small);
	margin: 0 auto;
	padding: 1rem 1rem 1.6rem;
	border-radius: var(--radius-large);
	background:var(--color-header);
}																																																						
/* Footer */
.footer {
	padding-bottom: 2rem;
}
.footer small {
	display: block;
	color: var(--color-white);
	text-shadow: var(--shadow-text);
	font-size: 1rem;
	text-align: center;
}
/* Animation */
.fadeInUp {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1.2s ease,transform 1.2s ease;
}
.fadeInUp.isVisible {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 600px) {
	.site-background {
		top: clamp(5rem, 23vw, 10rem);
	}
	.hero__logo-switcher {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__logo {
		transition: none;
		transform: none;
	}
	.site-backgrounds.is-steaming::before,
	.site-backgrounds.is-steaming::after,
	.site-backgrounds.is-steaming,
	.hero__logo-switcher.is-steaming::before,
	.hero__logo-switcher.is-steaming::after,
	.hero__logo-switcher.is-steaming .hero__logo.is-active {
		animation: none;
	}
}