@charset "utf-8";
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}


@property --vw {
	syntax: "<length>";
	initial-value: 0;
	inherits: true
}

:root {
	--vw: 100vw;
	--breakpoint-s: 480;
	--breakpoint-m: 960;
	--breakpoint-l: 1920;
	--breakpoint: var(--breakpoint-m);
	--viewport: tan(atan2(var(--vw), 1px));
	--scale: calc(var(--viewport) / var(--breakpoint));
	--root-scale: calc(.0625rem * var(--scale, 1));

	--is-vwmin: initial;
	--is-vwmax: ;

	--color-red: #cd1419;
	--color-yellow: #b0821a;
	--color-kihachi: #b7282d;
	--color-rgb-kihachi: 183, 40, 45;
	--color-inako: #249dd9;
	--color-rgb-inako: 36, 157, 217;
	--color-kyotoanimation: #e5461e;
	--color-denki-black: #0d0d0d;
	--color-link: var(--color-yellow);
	--color-white: #ffffff;
	--color-white-alpha10: rgb(255, 255, 255, 0.1);
	--color-white-alpha20: rgb(255, 255, 255, 0.2);
	--color-white-alpha30: rgb(255, 255, 255, 0.3);
	--color-white-alpha40: rgb(255, 255, 255, 0.4);
	--color-white-alpha50: rgb(255, 255, 255, 0.5);
	--color-white-alpha60: rgb(255, 255, 255, 0.6);
	--color-white-alpha70: rgb(255, 255, 255, 0.7);
	--color-white-alpha80: rgb(255, 255, 255, 0.8);
	--color-white-alpha90: rgb(255, 255, 255, 0.9);
	--color-black: #000000;
	--color-black-alpha10: rgb(0, 0, 0, 0.1);
	--color-black-alpha20: rgb(0, 0, 0, 0.2);
	--color-black-alpha30: rgb(0, 0, 0, 0.3);
	--color-black-alpha40: rgb(0, 0, 0, 0.4);
	--color-black-alpha50: rgb(0, 0, 0, 0.5);
	--color-black-alpha60: rgb(0, 0, 0, 0.6);
	--color-black-alpha70: rgb(0, 0, 0, 0.7);
	--color-black-alpha80: rgb(0, 0, 0, 0.8);
	--color-black-alpha90: rgb(0, 0, 0, 0.9);
	--color-grey100: #e6e6e6;
	--color-grey200: #cccccc;
	--color-grey300: #b3b3b3;
	--color-grey400: #999999;
	--color-grey500: #7f7f7f;
	--color-grey600: #666666;
	--color-grey700: #4d4d4d;
	--color-grey800: #333333;
	--color-grey900: #1a1a1a;

	--font-mplus1: "M PLUS 1", sans-serif;
	--font-murecho: "Murecho", sans-serif;
	--font-oswald: "Oswald", sans-serif;

	--leading-trim: calc((1em - 1lh) / 2);

	--z-background: 0;
	--z-foreground: 10;

	--z-bottom-level: 1;
	--z-lower-level: 2;
	--z-middle-level: 3;
	--z-upper-level: 4;
	--z-top-level: 5;

	--z-frame: 100;
	--z-header: 101;
	--z-menu-modal: 200;
	--z-menu-btn: 201;
	--z-footer: 500;
	--z-modal: 1000;
	--z-modal-btn: 1001;
	--z-loading: 9999;
	--z-loadingStart: 10000;

	--duration-250: 250ms;
	--duration-500: 500ms;
	--duration-600: 600ms;
	--duration-750: 750ms;
	--duration-1000: 1000ms;
	--ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
	--ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
	--ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
	--ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
	--ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
	--ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
	--ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
:root:lang(ja) {
	--font-base: var(--font-mplus1);
}
:root:lang(en) {
	--font-base: var(--font-murecho);
}


/* _____ 960px 以下 _____ */
@media (max-width: 959px) {
}
@media not (min-width: 960px) {
	:root {
		--hero-as: 960 / 1554;
		--kv-as: 960 / 1384;
	}
}
/* _____ 960px 以上 _____ */
@media (min-width: 960px) {
	:root {
		--breakpoint: var(--breakpoint-l);

		--is-vwmin: ;
		--is-vwmax: initial;

		--hero-as: 1920 / 1716;
		--kv-as: 1920 / 1364;
	}
}

html {
	font-size: var(--root-scale, 6.25%);
}
body {
	font-family: var(--font-base);
	font-optical-sizing: auto;
	font-size: 16rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	color: var(--color-white);
	background-color: var(--color-denki-black);
	text-spacing-trim: trim-start;
	text-autospace: normal;
	overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
	hyphens: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
	overscroll-behavior-block: contain;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* スクロールバー */
body {
	--sb-track-color: var(--color-denki-black);
  --sb-thumb-color: var(--color-yellow);
  --sb-size: 8px;
}
body::-webkit-scrollbar {
  width: var(--sb-size)
}
body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}
body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
}
@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

img,svg,picture,iframe{inline-size:100%;block-size:auto;border:0}
button{border:none;}
a {
	color: var(--color-link);
	background-color: transparent;
	text-decoration: none;
	pointer-events: auto;
}
@media (any-hover: hover) {
}

@media (min-width: 960px) {
	/* マウスカーソル */
	.cursor-glass {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		touch-action: none;
		z-index: var(--z-loading);
	}
	.cursor {
		--harf: calc(100rem / 2);
		--setX: calc(var(--x) - var(--harf));
		--setY: calc(var(--y) - var(--harf));
		transform: translate3d(var(--setX, 0), var(--setY, 0), 0) scale(var(--size , 0));
		transform-origin: center;
		inline-size: 100rem;
		aspect-ratio: 1;
		border: 1px solid var(--color-white-alpha20);
		border-radius: 9999px;
		backdrop-filter: blur(1px) brightness(2);
	}
}


.visually-hidden {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  width: 4px !important;
  height: 4px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}


/* モバイルとデスクトップの表示非表示 */
.vwmin {
	display: var(--is-vwmin, block) var(--is-vwmax, none);
}
.vwmax {
	display: var(--is-vwmin, none) var(--is-vwmax, block);
}


/* __________ SVG 設定 __________ */
.--_svg {
	display: grid;
	align-items: center;
	justify-items: center;
	inline-size: var(--_svg-size, 1em);
	aspect-ratio: var(--_svg-aspect, 1);
}
.--_svg svg {
	inline-size: var(--_svg-size, 1em);
	aspect-ratio: var(--_svg-aspect, 1);
	pointer-events: none;
}


/* __________ フェードイン・フェードアウト __________ */
.fade-in {
	opacity: 1 !important;
	pointer-events: auto !important;
	transition: opacity var(--duration-500) linear;
}
.fade-out {
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity var(--duration-500) linear;
}


/* __________ ローディング __________ */
.loading-start {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--color-denki-black);
	z-index: var(--z-loadingStart);
}
.loading-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--color-denki-black);
	z-index: var(--z-loading);
	background-color: var(--color-denki-black);
	-webkit-mask-image: url(/_assets_teaser/images/mask.webp);
	mask-image: url(/_assets_teaser/images/mask.webp);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 900% 100%;
	mask-size: 900% 100%;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}
.is-loading .loading-wrapper {
	animation: loading-mask-animation 500ms steps(8) 1 forwards;
}
@keyframes loading-mask-animation {
	0% {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
	100% {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
}
.loading-contents {
	display: grid;
	align-content: center;
	justify-content: center;
	justify-items: center;
	width: 100%;
	height: 100%;
}
.loading-bulb {
	inline-size: 56rem;
	z-index: var(--z-bottom-level);
}
.loading-title {
	font-family: var(--font-oswald);
	font-size: 32rem;
	letter-spacing: .04em;
	margin-block-start: -16rem;
	filter: drop-shadow(0 0 3px var(--color-yellow));
	z-index: var(--z-middle-level);
}


/* _____ フレーム _____ */
.frame-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	pointer-events: none;
	z-index: var(--z-frame);
}
.frame-line {
	width: 100%;
	height: 100%;
	border: 32rem solid var(--color-denki-black);
	transition: border var(--duration-1000) var(--ease-out-expo);
}
@media (min-width: 960px) {
	.frame-line {
		border-top-width: 100rem;
	}
	.is-frame .frame-line {
		border-top-width: 32rem;
	}
}


/* __________ モーダル __________ */
/* モーダル ボタン */
.icon-button {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	position: fixed;
	top: 0;
	right: 0;
	inline-size: 128rem;
	padding-inline: 32rem;
	padding-block: 32rem;
	aspect-ratio: 48 / 30;
	background-color: var(--color-denki-black);
	overflow: hidden;
}
.button-lines {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	position: absolute;
	display: block;
	right: 0;
	height: 4rem;
	background-color: var(--color-white);
	transition: background-color var(--duration-500) var(--ease-out-expo);
}
@media (any-hover: hover) {
	.icon-button:hover .button-lines {
		background-color: var(--color-red);
	}
}
.is-close .btn-line1 {
	animation: btn-line1-animation var(--duration-500) var(--ease-out-expo) forwards;
	animation-direction: reverse;
}
.is-close .btn-line2 {
	animation: btn-line2-animation var(--duration-500) var(--ease-out-expo) forwards;
	animation-direction: reverse;
}
.is-open .btn-line1 {
	animation: btn-line1-animation var(--duration-500) var(--ease-out-expo) forwards;
}
.is-open .btn-line2 {
	animation: btn-line2-animation var(--duration-500) var(--ease-out-expo) forwards;
}
@keyframes btn-line1-animation {
	0% {
		width: 100%;
		top: calc(50% - 10rem);
		transform: rotate(0deg);
	}
	50% {
		width: 100%;
		top: 50%;
		transform: rotate(0deg);
	}
	100% {
		width: 100%;
		top: 50%;
		transform: rotate(30deg);
	}
}
@keyframes btn-line2-animation {
	0% {
		width: 80%;
		top: calc(50% + 8rem);
		transform: rotate(0deg);
	}
	50% {
		width: 100%;
		top: 50%;
		transform: rotate(0deg);
	}
	100% {
		width: 100%;
		top: 50%;
		transform: rotate(-30deg);
	}
}
@media (min-width: 960px) {
}


/* モーダル メニュー */
.menu .icon-button {
	z-index: var(--z-menu-btn);
}
@media not (min-width: 960px) {
	.menu .icon-button {
		opacity: 1;
		visibility: visible;
	}
}
@media (min-width: 960px) {
	.menu .icon-button {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: var(--duration-1000) var(--ease-out-expo);
	}
	.is-frame .menu .icon-button {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}
.menu-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	inline-size: 480rem;
	height: 100%;
	background-color: var(--color-denki-black);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: var(--z-menu-modal);
	transition: var(--duration-500) var(--ease-out-expo);
}
.is-open .menu-wrapper {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.menu-wrapper {
	--sb-track-color: var(--color-denki-black);
  --sb-thumb-color: var(--color-yellow);
  --sb-size: 8px;
}
.menu-wrapper::-webkit-scrollbar {
  width: var(--sb-size)
}
.menu-wrapper::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}
.menu-wrapper::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
}
@supports not selector(::-webkit-scrollbar) {
  .menu-wrapper {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}
.menu-container{
	position: relative;
	width: 100%;
	height: 100%;
}
.menu-header,
.menu-footer {
	position: relative;
	width: 100%;
	height: 48rem;
	overflow: hidden;
}
.menu-txt-list {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	color: var(--color-denki-black);
	background-color: var(--color-yellow);
}
.menu-txt {
	display: inline-block;
	padding-inline-end: 24rem;
	font-family: var(--font-oswald);
	font-size: 40rem;
	font-weight: 700;
	line-height: 1;
}
.menu-txt:nth-child(odd) {
  animation: txt-loop1-animation 50s -25s linear infinite;
}
.menu-txt:nth-child(even) {
  animation: txt-loop2-animation 50s linear infinite;
}
@keyframes txt-loop1-animation {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes txt-loop2-animation {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}
.menu-contents {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: calc(100% - 96rem);
	min-block-size: 940rem;
	padding-inline: 48rem;
	padding-block-start: 100rem;
}
.menu-inari {
	position: absolute;
	top: -20rem;
	left: 38rem;
	inline-size: 124rem;
	aspect-ratio: 200 / 221;
	pointer-events: none;
}
.menu-nav-list {
	display: grid;
	row-gap: 32rem;
}
.menu-nav-link {
	--_svg-size: 60rem;
	font-size: 38rem;
	font-weight: 700;
	color: var(--color-white);
	transition: color var(--duration-500) var(--ease-out-expo);
}
@media (any-hover: hover) {
	.menu-nav-link:hover {
		color: var(--color-red);
	}
}
.menu-sns {
	display: grid;
	row-gap: 16rem;
	margin-block-start: 64rem;
}
.menu-sns-head {
	font-family: var(--font-oswald);
	font-size: 24rem;
	font-weight: 700;
}
.menu-sns-list {
	display: flex;
	column-gap: 16rem;
}
.menu-lang-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-block-start: 48rem;
}
@media (min-width: 960px) {
	.menu-contents {
		padding-inline: 64rem;
	}
	.menu-nav-list {
		row-gap: 24rem;
	}
	.menu-nav-link {
		--_svg-size: 48rem;
		font-size: 32rem;
	}
}




/* _____ 言語ボタン _____ */
.lang-link {
	display: grid;
	align-items: center;
	justify-items: center;
	inline-size: 100%;
	block-size: 60rem;
	color: var(--color-red);
	background-color: var(--color-denki-black);
	font-family: var(--font-oswald);
	font-size: 24rem;
	font-weight: 700;
	letter-spacing: .05em;
	border: 2px solid var(--color-red);
	aspect-ratio: 1;
}
.lang-link:hover,
.lang-link.lang-ja:lang(ja),
.lang-link.lang-en:lang(en) {
	color: var(--color-white);
	background-color: var(--color-red);
}
@media (min-width: 960px) {
	.lang-link {
		block-size: 40rem;
		font-size: 16rem;
	}
}


/* バックグラウンド */
.bg-wrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: var(--z-background);
}
.bg {
	width: 100vw;
	height: 100vh;
}
.bg-img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	object-position: center bottom;
}
.noise {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/_assets_teaser/images/_bg-noise.webp);
	background-repeat: repeat;
	background-position: 0 0;
	animation: noise-animation 1s steps(5) infinite;
}
@keyframes noise-animation {
	0% {
		background-position: 0 0;
	}
	20% {
		background-position: 5% -20%;
	}
	40% {
		background-position: -20% 30%;
	}
	60% {
		background-position: 20% -10%;
	}
	80% {
		background-position: -10% 20%;
	}
	100% {
		background-position: 0 0;
	}
}


/* _____ メインコンテンツ _____ */
.foreground-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.container {
	position: relative;
	padding-inline: 64rem;
	padding-block: 128rem;
	margin-inline: auto;
}
@media (min-width: 960px) {
	.layout-s { max-inline-size: calc(1280rem + 128rem); }
	.layout-m { max-inline-size: calc(1440rem + 128rem); }
	.layout-l { max-inline-size: calc(1680rem + 128rem); }
}


/* _____ 見出し _____ */
.headline-container {
	position: relative;
	width: 100%;
	height: 268rem;
	overflow: hidden;
}
.headline-inner {
	display: grid;
	align-items: center;
	justify-items: start;
	grid-template-columns: 64rem 1fr;
	grid-template-rows: 1fr;
	transform: skewY(-10deg);
	transform-origin: top right;
}
.headline-inner::after {
	content: "";
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	height: 3rem;
	background-color: var(--color-yellow);
	filter: drop-shadow(0 0 8px #fbc854);
	transform: translate3d(100%, 0, 0);
	transition: transform var(--duration-750) var(--ease-in-expo);
}
.headline-title {
	grid-column: 2 / -1;
	grid-row: 1 / -1;
}
.headline-news .headline-title:lang(ja) {
	--_svg-size: 350rem;
	--_svg-aspect: 550 / 160;
}
.headline-news .headline-title:lang(en) {
	--_svg-size: 247rem;
	--_svg-aspect: 388 / 160;
}
.headline-intro .headline-title:lang(ja) {
	--_svg-size: 768rem;
	--_svg-aspect: 1206 / 160;
}
.headline-intro .headline-title:lang(en) {
	--_svg-size: 710rem;
	--_svg-aspect: 1115 / 160;
}
.headline-staff .headline-title:lang(ja) {
	--_svg-size: 338rem;
	--_svg-aspect: 531 / 160;
}
.headline-staff .headline-title:lang(en) {
	--_svg-size: 269rem;
	--_svg-aspect: 423 / 160;
}
.headline-cast .headline-title:lang(ja) {
	--_svg-size: 341rem;
	--_svg-aspect: 537 / 160;
}
.headline-cast .headline-title:lang(en) {
	--_svg-size: 234rem;
	--_svg-aspect: 367 / 160;
}
.headline-character .headline-title:lang(ja) {
	--_svg-size: 530rem;
	--_svg-aspect: 833 / 160;
}
.headline-character .headline-title:lang(en) {
	--_svg-size: 567rem;
	--_svg-aspect: 890 / 160;
}
.headline-movie .headline-title:lang(ja) {
	--_svg-size: 355rem;
	--_svg-aspect: 558 / 160;
}
.headline-movie .headline-title:lang(en) {
	--_svg-size: 290rem;
	--_svg-aspect: 456 / 160;
}
.wrapper .path-top {
	transform: translate3d(0, 6.48%, 0);
	transition: transform var(--duration-500) var(--ease-out-expo);
	transition-delay: var(--duration-600);
}
.wrapper .path-bottom {
	transform: translate3d(0, -6.48%, 0);
	transition: transform var(--duration-500) var(--ease-out-expo);
	transition-delay: var(--duration-600);
}
/* 見出し 表示 */
.is-active .headline-inner::before,
.is-active .headline-inner::after {
	transform: translate3d(0%, 0, 0);
}
.is-active .path-top {
	transform: translate3d(0, 0, 0);
}
.is-active .path-bottom {
	transform: translate3d(0, 0, 0);
}
.is-active .svg-headline {
	filter: drop-shadow(0 0 0 var(--color-yellow));
	animation: headline-animation var(--duration-750) var(--ease-in-out-expo) forwards;
	animation-delay: var(--duration-600);
}
@keyframes headline-animation {
	0% {
		filter: drop-shadow(0 0 0 var(--color-yellow));
	}
	30% {
		filter: drop-shadow(0 0 10px var(--color-yellow));
	}
	100% {
		filter: drop-shadow(0 0 0 var(--color-yellow));
	}
}
@media (min-width: 960px) {
	.headline-container {
		height: 482rem;
	}
	.headline-inner {
		grid-template-columns: 96rem 1fr;
	}
	.headline-news .headline-title:lang(ja) {
		--_svg-size: 550rem;
	}
	.headline-news .headline-title:lang(en) {
		--_svg-size: 388rem;
	}
	.headline-intro .headline-title:lang(ja) {
		--_svg-size: 1206rem;
	}
	.headline-intro .headline-title:lang(en) {
		--_svg-size: 1115rem;
	}
	.headline-staff .headline-title:lang(ja) {
		--_svg-size: 531rem;
	}
	.headline-staff .headline-title:lang(en) {
		--_svg-size: 423rem;
	}
	.headline-cast .headline-title:lang(ja) {
		--_svg-size: 537rem;
	}
	.headline-cast .headline-title:lang(en) {
		--_svg-size: 367rem;
	}
	.headline-character .headline-title:lang(ja) {
		--_svg-size: 833rem;
	}
	.headline-character .headline-title:lang(en) {
		--_svg-size: 890rem;
	}
	.headline-movie .headline-title:lang(ja) {
		--_svg-size: 558rem;
	}
	.headline-movie .headline-title:lang(en) {
		--_svg-size: 456rem;
	}
	@keyframes headline-animation {
		0% {
			filter: drop-shadow(0 0 0 var(--color-yellow));
		}
		30% {
			filter: drop-shadow(0 0 15px var(--color-yellow));
		}
		100% {
			filter: drop-shadow(0 0 0 var(--color-yellow));
		}
	}
}


/* _____ フッター _____ */
.footer-wrapper {
	z-index: var(--z-footer);
}
.container.footer-container {
	background-color: var(--color-denki-black);
}
.footer-contents {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: 1fr;
	row-gap: 128rem;
}
.footer-nav-left {
	display: grid;
	row-gap: 40rem;
	inline-size: 478rem;
}
.footer-lang {
	display: flex;
}
@media (min-width: 960px) {
	.container.footer-container {
		padding-inline: 128rem;
	}
	.footer-contents {
		grid-template-columns: max-content 1fr;
		column-gap: 128rem;
	}
}

.footer-nav-right {
	display: grid;
	align-items: start;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
}
.footer-nav {
	display: grid;
	row-gap: 1px;
	max-inline-size: 529rem;
	background-color: var(--color-white);
	border: 1px solid var(--color-white);
}
.footer-nav:last-child {
	border-left: 0;
}
.footer-nav-head {
	padding-block: 8rem;
	padding-inline: 24rem;
	color: var(--color-red);
	background-color: var(--color-denki-black);
	font-family: var(--font-oswald);
	font-size: 16rem;
	font-weight: 700;
}
.footer-nav-list {
	display: grid;
	row-gap: 1px;
}
.footer-nav-link {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr max-content;
	column-gap: 1px;
	color: var(--color-white);
	font-size: 28rem;
	font-weight: 700;
	transition: color var(--duration-500) var(--ease-out-expo);
}
.footer-nav-link .--_svg {
	background-color: var(--color-denki-black);
}
.footer-nav-txt {
	padding-block: 24rem;
	padding-inline: 24rem;
	background-color: var(--color-denki-black);
}
.nav-menu .footer-nav-txt {
}
.footer-nav-arrow {
	--_svg-size: 28rem;
	width: 100%;
	height: 100%;
	max-inline-size: 76rem;
	color: var(--color-red);
}
@media (any-hover: hover) {
	.footer-nav-link:hover {
		color: var(--color-red);
	}
}
@media (min-width: 960px) {
	.footer-nav-txt {
		padding-block: 16rem;
	}
	.footer-nav-arrow {
		--_svg-size: 26rem;
	}
}

.footer-nav-sns {
	display: grid;
	grid-template-columns: max-content 1fr;
}
.footer-nav-sns .--_svg {
	--_svg-size: 32rem;
	width: 100%;
	height: 100%;
	max-inline-size: 76rem;
	padding-block: 16rem;
	padding-inline-start: 24rem;
}
.footer-nav-window {
	--_svg-size: 36rem;
	width: 100%;
	height: 100%;
	max-inline-size: 76rem;
	color: var(--color-red);
}
@media (min-width: 960px) {
	.footer-nav-window {
		--_svg-size: 26rem;
	}
}

.footer-sub-contents {
	display: grid;
	justify-items: center;
	row-gap: 48rem;
	margin-block-start: 128rem;
}
.footer-share {
	display: flex;
	align-items: center;
	column-gap: 48rem;
}
.footer-share-head {
	font-family: var(--font-oswald);
	font-size: 32rem;
}
.footer-share-list {
	display: grid;
	column-gap: 32rem;
}
.footer-share-list:lang(ja) {
	grid-template-columns: repeat(4, max-content);
}
.footer-share-list:lang(en) {
	grid-template-columns: repeat(2, max-content);
}
.footer-share-link {
	--_svg-size: 48rem;
	color: var(--color-white);
	transition: color var(--duration-500) var(--ease-out-expo);
}
.footer-share-facebook .path-inner,
.footer-share-line .path-inner {
	fill: var(--color-denki-black);
}

.footer-kyotoanimation {
	--_svg-size: 282rem;
	--_svg-aspect: 224 / 34;
}
.footer-kyotoanimation a {
	color: var(--color-white);
}
@media (any-hover: hover) {
	.footer-share-link:hover {
		color: var(--color-red);
	}
}
@media (min-width: 960px) {
	.footer-sub-contents {
		row-gap: 24rem;
	}
	.footer-share {
		column-gap: 32rem;
	}
	.footer-share-head {
		font-size: 16rem;
	}
	.footer-share-list {
		column-gap: 16rem;
	}
	.footer-share-link {
		--_svg-size: 32rem;
	}
	.footer-kyotoanimation {
		--_svg-size: 202rem;
	}
}

.page-top-container {
	display: grid;
	align-content: center;
	justify-content: center;
	justify-items: center;
	height: 100dvh;
	background-color: var(--color-denki-black);
	-webkit-mask-image: url(/_assets_teaser/images/mask.webp);
	mask-image: url(/_assets_teaser/images/mask.webp);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 50%;
	mask-position: 0 50%;
	-webkit-mask-size: 900% 120%;
	mask-size: 900% 120%;
}
body.is-page-start {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-page-start .page-top-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-page-trans .page-top-container {
	animation: page-mask-animation 400ms steps(8) 1 forwards;
	animation-delay: 200ms;
}
.is-page-trans .page-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(/_assets_teaser/images/mask-flare.webp);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 900% 100%;
	mix-blend-mode: screen;
	z-index: var(--z-upper-level);
	animation: page-bg-animation 500ms steps(8) 1 forwards;
}
@keyframes page-mask-animation {
	0% {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
	100% {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
}
@keyframes page-bg-animation {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 100% 0;
	}
}
.page-bulb {
	inline-size: 56rem;
	z-index: var(--z-middle-level);
}
.page-title {
	font-family: var(--font-oswald);
	font-size: 32rem;
	letter-spacing: .04em;
	margin-block-start: -12rem;
	filter: drop-shadow(0 0 3px var(--color-yellow));
	z-index: var(--z-bottom-level);
}
@media (min-width: 960px) {
}


/* __________ モーダル ウインドウ __________ */
.modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-denki-black);
	z-index: var(--z-modal);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: var(--duration-500) var(--ease-out-expo);
}
.modal-wrapper.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.modal-container {
	position: relative;
}
.is-youtube .modal-container {
	width: 90vw;
	max-width: 1280px;
	max-height: 90vh;
	aspect-ratio: 16 / 9;
}
.is-image .modal-container {
	max-width: 90%;
	max-height: 90%;
}
.modal-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal-image {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	inline-size: auto;
	block-size: auto;
}
.modal-close.icon-button .button-lines {
	animation: none;
}
.modal-close.icon-button .btn-line1 {
	width: 100%;
	top: 50%;
	transform: rotate(30deg);
}
.modal-close.icon-button .btn-line2 {
	width: 100%;
	top: 50%;
	transform: rotate(-30deg);
}
