/* リキッドレイアウト対応 */

/* インナー幅・左右余白（カンプ: ABOUT コンテンツ幅 1198px / 1440 基準） */

:root {
	--inner-value: 1250;
	--inner: 1200px;
	--padding-pc: 25px;
	--padding-sp: 20px;
}

:root {
	--rem: 1rem / 16;
	--em: 1em / 16;
	--vw: 1440 * 100vw; /* PCカンプの幅に合わせる */
	--cqi: 1440 / 100cqi; /* コンテナ連動値用（calc(125 / var(--cqi)) で消費） */
	--inner-percent: var(--inner-value) * 100%;
}

/* フォント（Figma実測: Cormorant / Noto Serif JP / Noto Sans JP / Sacramento） */

:root {
	--base-font: "Noto Serif JP", serif;
	--sans-font: "Noto Sans JP", sans-serif;
	--en-font: "Cormorant", serif;
	--script-font: "Sacramento", cursive;
	--fw-thin: 100;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--leading-trim: calc((1em - 1lh) / 2);
	--fz-body-min: 14px; /* 本文文字の下限サイズ（リキッドで縮んでもこれ未満にしない） */
}

/* 色（Figma実測。直値ハードコード禁止） */

:root {
	--white: #fff;
	--white-10: rgb(255 255 255 / 10%); /* モーダル PC の背面（カンプは白 20% の重ね。実測で中央値が合うのは 10%） */
	--black: #000;
	--main: #f3ede1; /* ベージュ: 本文文字・紙面の主色 */
	--text-dark: #171717; /* 紙面（ABOUT）上の文字 */
	--store-bg: #111; /* STORE〜フッター上端の地色（Figma 申告は #171717 だがカンプ実測 #111111） */
	--accent: #9d1c10; /* 赤: 「死ぬ」・赤帯・ウィッシュリストボタン */
	--accent-light: #bc281a; /* 赤（明）: ボタンの縁・ホバー */
	--text-deco: #ddc4b9; /* STORE の装飾英文 */
	--modal-close: #f2ede1;
	--accent-dark: #370a06;
	--button-dark: #81140a;
	--wishlist-border: #931f14;
	--movie-border: #7d7a74;
	--white-60: rgb(255 255 255 / 60%);
	--white-69: rgb(243 237 225 / 69%);
	--black-20: rgb(0 0 0 / 20%);
	--black-30: rgb(0 0 0 / 30%);
	--black-50: rgb(0 0 0 / 50%);
	--black-80: rgb(0 0 0 / 80%);
	--accent-shadow: rgb(85 11 11);
	--gradient-veil: linear-gradient(to bottom, transparent, var(--white-60));
	--gradient-accent: linear-gradient(90deg, var(--accent), var(--accent-dark));
	--gradient-button: linear-gradient(90deg, var(--accent-light), var(--button-dark));
	--gradient-rule: linear-gradient(90deg, var(--accent), transparent); /* ABOUT 見出しの下線。Figma は GRADIENT_LINEAR とだけ出るが、カンプ実測は左端 #9d1c10（赤）→ 右へ透明 */
	--noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix values='1 0 0 0 -0.2 0 1 0 0 -0.2 0 0 1 0 -0.2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* 羊の砂嵐ノイズ（画像ファイルを持たず SVG の feTurbulence で生成。240px タイル。-0.2 で少し暗めに寄せる。羊側は luminance マスクで明るい所にだけ乗るので、顔の輝度 +12%・平らな暗部 +4%（director-review 実測）） */
	--gradient-rule-light: linear-gradient(to bottom, transparent, var(--main), transparent);
	--border-gray: #d9d9d9;
	--text-sub: #666;
	--bg-placeholder: #eaeaea;
}

/* ヘッダー高さ（固定ヘッダーは無し。左上 Steam ロゴ 16px + 36px + 16px） */

:root {
	--header-height: 68px;
	--header-height-sp: 56px;
	--wishlist-banner-height-sp: 60px; /* SP の追従バナー帯。body の逃げ幅に使う */
}

/* z-index は必ずここで一元管理（直値禁止） */

:root {
	--z-index-loader: 1000;
	--z-index-modal: 500;
	--z-index-header: 100;
	--z-index-wishlist: 90;
	--z-index-drawer: 99;
}

/* スクロールロック（モーダル・ローダー用。
   ドロワーは js-rules の position:fixed 方式が既定 — こちらは使わない） */

:root {
	--scrollbar-width: 0;
}

@property --scrollbar {
	syntax: "<length>";
	initial-value: 0;
	inherits: true;
}

:root:has(:modal[open],
.is-scroll-lock,
.loader) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

body {
	container-type: inline-size;
	background-color: var(--black);
	background-image: linear-gradient(var(--black-20), var(--black-20)), url("../images/common/bg-room.jpg");
	background-position: top left;
	background-size: calc(1440 * var(--rem)) calc(810 * var(--rem));
	font-family: var(--base-font);
	font-weight: var(--fw-regular);
	line-height: 1.5;
	color: var(--main);
}

html {
	font-size: 16px;
}

@font-face {
	font-family: "Noto Serif JP";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/noto-serif-jp.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/noto-sans-jp.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/cormorant.woff2") format("woff2");
}

@font-face {
	font-family: "Sacramento";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/sacramento.woff2") format("woff2");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-padding-top: 3.75rem;
}

/* Set core body defaults */

body {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
	line-break: strict;
	overflow-wrap: anywhere; /* 100vw 全幅要素(事業内容の marquee 等)が、 縦スクロールバー幅を含む分だけ横にはみ出して
     横スクロールバーが出るのを抑止 (Firefox/Windows の classic scrollbar で発生)。
     overflow:hidden と違い clip は scroll コンテナを作らないので position:sticky を壊さない。 */
	overflow-x: clip;
}

main {
	flex: 1;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
	list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* picture*/

picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Blur images when they have no alt attribute */

img:not([alt]) {
	filter: blur(10px);
}

:where(dialog) {
	width: unset;
	max-width: unset;
	height: unset;
	max-height: unset;
	padding: unset;
	color: unset;
	background-color: unset;
	border: unset;
	overflow: unset;
}

:where(dialog:focus-visible) {
	outline: none;
}

/* フォームリセット */

input,
button,
select,
textarea {
	max-width: 100%;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
}

textarea {
	resize: vertical;
}

input[type=checkbox],
input[type=radio] {
	display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.3s;
}

a[href^="tel:"] {
	pointer-events: none;
}

.l-inner {
	max-width: calc(var(--inner) + var(--padding-pc) * 2);
	margin-inline: auto;
	padding-inline: var(--padding-pc);
	width: 100%;
}

.c-btn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	font-family: var(--sans-font);
	color: var(--main);
	overflow: hidden;
	transition: filter 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.c-btn::before {
	content: "";
	position: absolute;
	z-index: 0;
	background-image: url("../images/common/btn-texture.jpg");
	background-size: 100% 100%;
	opacity: 0.3;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.c-btn--primary {
	max-width: 30.125rem;
	min-height: 6.875rem;
	padding: 0.25rem;
	border: 0.0625rem solid var(--accent-light);
	background-image: var(--gradient-button);
	background-clip: content-box;
}

.c-btn--primary::before {
	inset: 0.25rem;
}

.c-btn__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.c-btn__main {
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	white-space: nowrap;
}

.c-btn__particle {
	font-size: max(1rem, 10px);
	font-weight: var(--fw-bold);
}

.c-btn__sub {
	font-size: max(1rem, 10px);
	line-height: 1.2;
	color: var(--text-deco);
}

.c-btn__icon {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 1rem;
}

.c-modal[open] {
	margin: 0;
	padding: 0;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	min-height: 100dvh;
	position: fixed;
	inset: 0;
	z-index: var(--z-index-modal);
	background-color: transparent;
	border: 0;
	overflow: visible;
}

.c-modal::backdrop {
	background-color: var(--white-10);
	backdrop-filter: blur(1rem);
}

.c-modal__image {
	width: 60rem;
	max-width: calc(100% - 3rem);
	max-height: calc(100dvh - 6rem);
	aspect-ratio: 16/9;
	object-fit: contain;
}

.c-modal__video {
	width: 60rem;
	max-width: calc(100% - 3rem);
	max-height: calc(100dvh - 6rem);
	aspect-ratio: 16/9;
	background-color: var(--black);
	object-fit: contain;
}

.c-modal__image[hidden],
.c-modal__video[hidden] {
	display: none;
}

.c-modal__close {
	display: grid;
	place-items: center;
	width: 5.6875rem;
	aspect-ratio: 1;
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
	background-color: var(--text-dark);
	font-family: var(--sans-font);
	font-size: 2rem;
	font-weight: var(--fw-thin);
	line-height: 1;
	color: var(--modal-close);
	transition: opacity 0.3s ease;
}

.c-modal[open] {
	animation: modal-in 0.3s ease;
}

.c-modal[open]::backdrop {
	animation: modal-in 0.3s ease;
}

.c-modal[open].is-closing {
	animation: modal-out 0.3s ease forwards;
}

.c-modal[open].is-closing::backdrop {
	animation: modal-out 0.3s ease forwards;
}

.c-section-title {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 41.1875rem;
	min-height: 9.375rem;
	font-family: var(--en-font);
	line-height: 1;
	text-align: center;
}

.c-section-title::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 0.0625rem solid var(--main);
	opacity: 0.16;
}

.c-section-title__bg {
	position: absolute;
	top: 0;
	left: 50%;
	padding-inline-start: 0.32em;
	font-size: 9.375rem;
	font-weight: var(--fw-regular);
	letter-spacing: 0.32em;
	color: var(--main);
	white-space: nowrap;
	opacity: 0.5;
	transform: translateX(-50%);
	filter: url("#section-title-outline");
	-webkit-mask-image: linear-gradient(to bottom, var(--black), transparent 80%);
	mask-image: linear-gradient(to bottom, var(--black), transparent 80%);
	transition: letter-spacing 1.4s ease-out, opacity 1.4s ease-out;
}

.js .c-section-title.js-fadeup:not(.is-visible) .c-section-title__bg {
	letter-spacing: 0.2em;
	opacity: 0;
}

.c-section-title__main {
	position: relative;
	margin-block-start: 3.1875rem;
	padding-inline-start: 0.64em;
	font-size: 3rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.64em;
	color: var(--main);
	text-shadow: 0 0 0.75rem var(--white-69);
	transition: opacity 1.25s cubic-bezier(0.165, 0.84, 0.44, 1), scale 1.25s cubic-bezier(0.165, 0.84, 0.44, 1), filter 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js .c-section-title.js-fadeup:not(.is-visible) .c-section-title__main {
	opacity: 0;
	scale: 0.92;
	filter: brightness(1.5);
}

.c-section-title--dark::after {
	border-color: var(--text-dark);
}

.c-section-title--dark .c-section-title__bg {
	color: var(--text-dark);
}

.c-section-title--faint .c-section-title__bg {
	opacity: 0.3;
}

.c-section-title--dark .c-section-title__main {
	color: var(--text-dark);
	text-shadow: none;
}

.c-section-title-filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.c-wishlist-banner {
	position: fixed;
	right: 1.1875rem;
	bottom: 2.5rem;
	z-index: var(--z-index-wishlist);
	width: calc(100% - 2.375rem);
	max-width: 20rem;
}

.c-wishlist-banner {
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.js .c-wishlist-banner {
	animation: banner-in 0.6s ease-out 1.8s backwards;
}

.c-wishlist-banner.is-hidden {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.c-wishlist-banner__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 6.625rem;
	padding: 0.25rem;
	border: 0.0625rem solid var(--wishlist-border);
	background-image: var(--gradient-button);
	background-clip: content-box;
	font-family: var(--sans-font);
	overflow: hidden;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.c-wishlist-banner__link::before {
	content: "";
	position: absolute;
	inset: 0.25rem;
	background-image: url("../images/common/btn-texture.jpg");
	background-size: 100% 100%;
	opacity: 0.2;
	mix-blend-mode: hard-light;
}

.c-wishlist-banner__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.c-wishlist-banner__main {
	font-size: max(1.25rem, 10px);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	white-space: nowrap;
}

.c-wishlist-banner__particle {
	font-size: max(0.875rem, 10px);
	font-weight: var(--fw-bold);
}

.c-wishlist-banner__sub {
	font-size: max(0.75rem, 10px);
	line-height: 1.2;
	color: var(--text-deco);
}

.c-wishlist-banner__icon {
	position: absolute;
	top: 2.8125rem;
	right: 1.75rem;
	z-index: 1;
	width: 1rem;
}

.c-wishlist-banner__close {
	transition: filter 0.3s ease, opacity 0.3s ease;
	position: absolute;
	top: -0.6875rem;
	right: -0.6875rem;
	display: grid;
	place-items: center;
	width: 2rem;
	min-height: 2rem;
	border: 0.0625rem solid var(--wishlist-border);
	border-radius: 50%;
	background-color: var(--black-80);
}

.c-wishlist-banner__close img {
	width: 0.5rem;
}

.footer {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	min-height: 42.625rem;
	margin-block-start: -0.875rem;
	background-color: var(--store-bg);
	background-image: linear-gradient(var(--store-bg), var(--store-bg)), url("../images/footer/footer-bg.jpg");
	background-repeat: no-repeat;
	background-position: center top, center calc(100% - 2rem);
	background-size: 100% 0.875rem, max(100%, 90rem) auto;
	font-family: var(--sans-font);
	overflow: hidden;
}

.footer__ink {
	position: absolute;
	top: 0.875rem;
	left: 50%;
	z-index: 0;
	max-width: none;
	width: max(100%, 90rem);
	transform: translateX(-50%) scaleY(-1);
}

.footer__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: calc(100% - 2.5rem);
	max-width: 40.375rem;
	margin-inline: auto;
	padding-block-start: 11.125rem;
	padding-block-end: 2.9375rem;
	flex: 1 0 auto;
}

.footer__totop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 7.0625rem;
	font-family: var(--en-font);
	font-weight: var(--fw-bold);
	color: var(--main);
}

.footer__totop.is-hopping img {
	animation: totop-hop 0.7s ease-in-out 2;
}

.footer__totop-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer__totop-text span:first-child {
	font-size: max(1.25rem, 10px);
	line-height: 1.2;
	letter-spacing: 0.12em;
}

.footer__totop-text span:last-child {
	margin-block-start: -0.3125rem;
	font-size: 2rem;
	line-height: 1.22;
	letter-spacing: 0.12em;
}

.footer__steam {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
}

.footer__steam img {
	flex-shrink: 0;
	width: 10rem;
}

.footer__steam p {
	min-width: 0;
	font-size: max(0.75rem, 10px);
	font-weight: var(--fw-light);
	line-height: 1.1666666667;
	color: var(--white);
}

.footer__logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	min-height: 4rem;
}

.footer__logo--matrix {
	width: 7.8125rem;
}

.footer__logo--hinata {
	width: 3.6875rem;
}

.footer__credit {
	font-family: var(--sans-font);
	font-size: max(0.75rem, 10px);
	line-height: 1.1666666667;
	color: var(--white);
	text-align: center;
}

.footer__copyright {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 2rem;
	padding-block: 0.625rem;
	background-color: var(--black);
	font-size: max(0.625rem, 10px);
	line-height: 1.2;
	color: var(--white);
	text-align: center;
}

.header {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: var(--z-index-header);
}

.header__logo {
	display: block;
	width: 7.5rem;
}

.p-top-about {
	position: relative;
	z-index: 2;
	width: calc(100% - 3rem);
	max-width: 74.875rem;
	min-height: 100rem;
	padding-block-end: 21.25rem; /* STORE の負マージン分の逃げ。本文が --fz-body-min で rem より大きくなる幅（タブレット）でも、本文が STORE の黒帯に被らないようにする。1440 では min-height 側が効くので見た目は不変 */
	margin-inline: auto;
	color: var(--text-dark);
}

.p-top-about::before {
	content: "";
	position: absolute;
	inset: -2% -2.67%;
	z-index: -1;
	background-image: url("../images/about/about-paper.png");
	background-image: -webkit-image-set(url("../images/about/about-paper.avif") type("image/avif"), url("../images/about/about-paper.webp") type("image/webp"), url("../images/about/about-paper.png") type("image/png"));
	background-image: image-set(url("../images/about/about-paper.avif") type("image/avif"), url("../images/about/about-paper.webp") type("image/webp"), url("../images/about/about-paper.png") type("image/png"));
	background-size: 100% 100%;
	pointer-events: none;
}

.p-top-about__inner {
	position: relative;
	z-index: 2;
	max-width: 67.25rem;
	padding-block-start: 7.5rem;
}

.p-top-about__title {
	max-width: 43.625rem;
	margin-inline: auto;
}

.p-top-about__lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: 4rem;
}

.p-top-about__catch {
	width: 100%;
	max-width: 35.6875rem;
	padding-block-end: 0.375rem;
	padding-inline-start: 1.1875rem;
	white-space: nowrap;
	background-image: var(--gradient-accent);
	font-size: 2.5rem;
	font-weight: var(--fw-regular);
	line-height: 1;
	letter-spacing: 0.24em;
	color: var(--white);
	text-align: center;
	clip-path: inset(0);
	transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1) 0.35s;
}

.js .p-top-about__lead.js-fadeup:not(.is-visible) .p-top-about__catch {
	clip-path: inset(0 100% 0 0);
}

.p-top-about__description {
	font-size: max(1rem, var(--fz-body-min));
	font-weight: var(--fw-semibold);
	line-height: 2;
	text-align: center;
}

.p-top-about__body {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	margin-block-start: 4rem;
}

.p-top-about__row {
	display: grid;
	grid-template-columns: 35.4375rem 26.375rem;
	align-items: start;
	gap: 3rem;
	width: 64.8125rem;
}

.p-top-about__row--reverse {
	grid-template-columns: 26.375rem 35.4375rem;
}

.p-top-about__image {
	justify-self: center;
	width: 34.75rem;
	height: auto;
	aspect-ratio: 16/9;
	margin-block: 0.5625rem 0.625rem;
	outline: 0.0625rem solid var(--accent);
	outline-offset: -0.0625rem;
	object-fit: cover;
	box-shadow: 0 0 2rem var(--black-50);
	transform: rotate(2deg);
	rotate: 0deg;
	transition: rotate 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.js .p-top-about__row.js-fadeup:not(.is-visible) .p-top-about__image {
	rotate: 3deg;
}

.js .p-top-about__row--reverse.js-fadeup:not(.is-visible) .p-top-about__image {
	rotate: -3deg;
}

.p-top-about__row--reverse .p-top-about__image {
	transform: rotate(-2deg);
}

.p-top-about__content {
	min-width: 0;
}

.p-top-about__heading {
	padding-block-end: 0.25rem;
	border-bottom: 0.0625rem solid transparent;
	border-image: var(--gradient-rule) 1;
	font-size: 2.5rem;
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	letter-spacing: 0.24em;
}

.p-top-about__heading span {
	color: var(--accent);
}

.p-top-about__text {
	margin-block-start: 1.5rem;
	font-size: max(1rem, var(--fz-body-min));
	font-weight: var(--fw-medium);
	line-height: 2;
}

.p-top-about__emphasis {
	display: block;
	margin-block-start: 2.3125rem;
	font-size: 1.5rem;
}

.p-top-about__deco {
	position: absolute;
	z-index: 1;
	max-width: none;
	pointer-events: none;
}

.p-top-about__deco--01 {
	top: 0;
	left: 0;
	width: 37.375rem;
}

.p-top-about__deco--02 {
	top: 36.6875rem;
	right: 0;
	width: 59.6875rem;
}

.p-top-about__deco--03 {
	bottom: 6rem;
	left: 5.5625rem;
	width: 31.875rem;
}

.p-top-media {
	min-height: 57.75rem;
	position: relative;
}

.p-top-media__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.p-top-media__title {
	flex-shrink: 0;
}

.p-top-media__gallery {
	margin-block-start: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: 68.25rem;
}

.p-top-media__stage {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 50.25rem) 4.5rem;
	align-items: center;
	gap: 4.5rem;
	width: 100%;
}

.p-top-media__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 4.5rem;
	font-family: var(--en-font);
	font-size: 1.5rem;
	line-height: 1.2083333333;
	letter-spacing: 0.1em;
	color: var(--main);
	transition: opacity 0.3s ease;
}

.p-top-media__nav img {
	width: 4.5rem;
}

.p-top-media__viewer {
	width: 100%;
	max-width: 50.25rem;
	aspect-ratio: 804/454;
	position: relative;
	touch-action: pan-y;
}

.p-top-media__item {
	display: block;
	width: 100%;
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.p-top-media__item--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/movie/movie-thumb.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.p-top-media__item.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.p-top-media__image {
	position: absolute;
	inset: 0.125rem;
	width: calc(100% - 0.25rem);
	height: calc(100% - 0.25rem);
	object-fit: cover;
	-webkit-mask-image: url("../images/movie/movie-thumb.png");
	mask-image: url("../images/movie/movie-thumb.png");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.p-top-media__item--video[aria-disabled=true] {
	cursor: default;
}

.p-top-media__item--video[aria-disabled=true] .p-top-media__play {
	opacity: 0.5;
}

.p-top-media__item.p-top-media__item--video .p-top-media__movie {
	aspect-ratio: 804/454;
	animation: tv-flicker 7s steps(1) infinite;
}

.p-top-media__play {
	width: 5.25rem;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: scale 0.3s ease, opacity 0.3s ease;
}

.p-top-media__video {
	width: calc(100% - 0.25rem);
	height: calc(100% - 0.25rem);
	position: absolute;
	inset: 0.125rem;
	z-index: 1;
	object-fit: cover;
	animation: tv-flicker 7s steps(1) infinite;
	-webkit-mask-image: url("../images/movie/movie-thumb.png");
	mask-image: url("../images/movie/movie-thumb.png");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.p-top-media__thumbs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

.p-top-media__thumbs.p-top-media__thumbs--sp.is-jumping {
	transition: none;
}

.p-top-media__thumb {
	display: block;
	width: 7.125rem;
	aspect-ratio: 114/64;
	position: relative;
	outline: 0.125rem solid transparent;
	outline-offset: 0;
	transition: opacity 0.3s ease, outline-color 0.4s ease;
}

.p-top-media__thumb[aria-current=true] {
	outline-color: var(--main);
}

.p-top-media__thumb:focus-visible {
	outline-color: var(--accent-light);
}

.p-top-media__thumb img {
	width: 100%;
	aspect-ratio: 114/64;
	object-fit: cover;
}

.p-top-media__thumb-play {
	display: grid;
	place-items: center;
	width: 2.5rem;
	aspect-ratio: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--black);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.p-top-media__thumb-play img {
	width: 1.25rem;
	aspect-ratio: 20/14;
}

.p-top-mv {
	position: relative;
	min-height: 74.1875rem;
}

.p-top-mv__title {
	position: absolute;
	top: 7.5rem;
	left: 50%;
	width: 35rem;
	transform: translateX(-50%);
}

.p-top-mv__logo {
	width: 100%;
}

.js .p-top-mv__title {
	opacity: 0;
	filter: blur(0.75rem);
	transition: opacity 1.6s ease-out, filter 1.6s ease-out;
}

.js.is-loaded .p-top-mv__title {
	opacity: 1;
	filter: blur(0);
}

.js .p-top-mv__catch {
	opacity: 0;
	translate: 0 1.5rem;
	transition: opacity 1.2s ease-out 0.7s, translate 1.2s ease-out 0.7s;
}

.js.is-loaded .p-top-mv__catch {
	opacity: 1;
	translate: 0 0;
}

.p-top-mv__catch {
	position: absolute;
	top: 44.5rem;
	left: 50%;
	width: 8.0625rem;
	transform: translateX(-50%);
}

.p-top-store {
	position: relative;
	z-index: 3;
	min-height: 56.375rem;
	margin-block-start: -23.625rem;
}

.p-top-store::before {
	content: "";
	position: absolute;
	top: 21.8125rem;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	background-color: var(--store-bg);
}

.p-top-store__ink {
	position: absolute;
	top: 21.875rem;
	left: 50%;
	z-index: -1;
	max-width: none;
	width: max(100%, 90rem);
	transform: translate(-50%, -100%);
}

.p-top-store__sheep {
	--sheep-glitch-shift: 0.375rem;
	--sheep-glitch-skew: 4deg;
	--sheep-glitch-color-a: rgb(188 40 26 / 55%);
	--sheep-glitch-color-b: rgb(90 190 210 / 40%);
	--sheep-glitch-time: 9.5s;
	--sheep-noise-opacity: 1;
	position: absolute;
	top: 14.5rem;
	left: calc(50% + 5.1875rem);
	z-index: -1;
	width: 44rem;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: sheep-drift 11s ease-in-out infinite, sheep-glitch var(--sheep-glitch-time) steps(1, end) infinite 3s, sheep-enter 1.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.js .p-top-store__sheep.js-inview:not(.is-visible) {
	animation-play-state: running, running, paused;
}

.p-top-store__sheep-image {
	max-width: none;
	width: 100%;
}

.p-top-store__sheep::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--noise-image);
	background-size: 15rem 15rem;
	opacity: var(--sheep-noise-opacity);
	-webkit-mask-image: -webkit-image-set(url("../images/store/store-sheep.avif") type("image/avif"), url("../images/store/store-sheep.png") type("image/png"));
	mask-image: image-set(url("../images/store/store-sheep.avif") type("image/avif"), url("../images/store/store-sheep.png") type("image/png"));
	mask-mode: luminance;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: sheep-noise 0.6s steps(1, end) infinite 0.2s;
}

.p-top-store__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 44.3125rem;
	padding-block-start: 21.875rem;
}

.p-top-store__specs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: 4rem;
	font-size: max(1.25rem, var(--fz-body-min));
	line-height: 1;
	white-space: nowrap;
}

.p-top-store__spec-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

.p-top-store__spec-row p + p {
	position: relative;
	padding-inline-start: 1.5625rem;
}

.p-top-store__spec-row p + p::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.0625rem;
	min-height: 1rem;
	background-image: var(--gradient-rule-light);
	transform: translateY(-50%);
}

.p-top-store__cta {
	margin-block-start: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
}

.p-top-store__note {
	width: 100%;
	max-width: 30.125rem;
	font-family: var(--sans-font);
	font-size: max(0.875rem, var(--fz-body-min));
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.p-top-store__note li {
	padding-inline-start: 1em;
	text-indent: -1em;
}

.p-top-store__deco {
	position: absolute;
	z-index: 1;
	width: 15.5rem;
	font-family: var(--script-font);
	font-size: max(0.625rem, 10px);
	line-height: 1.5;
	letter-spacing: 0.1em;
	opacity: 0.3;
}

.p-top-store__deco--left {
	top: 38.875rem;
	left: calc(50% - 41.9375rem);
}

.p-top-store__deco--right {
	top: 53.9375rem;
	right: calc(50% - 37.625rem);
	text-align: right;
}

.p-top {
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: clip;
}

.p-top__veil {
	position: absolute;
	top: 62.0625rem;
	right: 0;
	bottom: 36.375rem;
	left: 0;
	z-index: -3;
	background-image: var(--gradient-veil);
	backdrop-filter: blur(1.5rem);
}

.p-top__bg {
	position: absolute;
	inset: 0;
	z-index: -4;
	clip-path: inset(0);
	pointer-events: none;
}

.p-top__bg-video {
	--bg-blur: 0px;
	position: fixed;
	inset: -2rem;
	width: calc(100% + 4rem);
	height: calc(100% + 4rem);
	object-fit: cover;
	filter: brightness(0.15) blur(var(--bg-blur));
	transition: filter 0.4s ease-out;
}

.p-top__fog {
	--fog-roll: 1deg;
	--fog-hor: 2.5rem;
	--fog-ver: 0.3125rem;
	position: absolute;
	z-index: -2;
	max-width: none;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: fog-roll 3s ease-in-out infinite alternate, fog-hor 10s ease-in-out infinite alternate, fog-ver 15s ease-in-out infinite alternate;
}

.p-top__fog--02,
.p-top__fog--04 {
	animation-duration: 5s, 12s, 10s;
	animation-direction: alternate-reverse;
}

.p-top__fog--03 {
	animation-duration: 4s, 11s, 13s;
}

.p-top__fog--05 {
	animation-duration: 5s, 12s, 10s;
	animation-direction: alternate-reverse;
}

.p-top__fog--01 {
	top: -1.75rem;
	left: calc(50% - 57.0625rem);
	width: 62.75rem;
}

.p-top__fog--02 {
	top: 18.4375rem;
	left: 50%;
	width: 62.75rem;
}

.p-top__fog--03 {
	top: 38.6875rem;
	left: calc(50% - 64rem);
	width: 95.75rem;
}

.p-top__fog--04 {
	top: 107.5625rem;
	left: calc(50% - 68.875rem);
	width: 62.75rem;
}

.p-top__fog--05 {
	top: 74.1875rem;
	left: 50%;
	width: 62.75rem;
}

.p-top__sheep {
	--sheep-glitch-shift: 0.375rem;
	--sheep-glitch-skew: 4deg;
	--sheep-glitch-color-a: rgb(188 40 26 / 55%);
	--sheep-glitch-color-b: rgb(90 190 210 / 40%);
	--sheep-glitch-time: 7s;
	--sheep-noise-opacity: 1;
	position: absolute;
	top: 52.5rem;
	left: calc(50% - 45.9375rem);
	z-index: -1;
	width: 44.1875rem;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: sheep-breathe 9s ease-in-out infinite, sheep-glitch var(--sheep-glitch-time) steps(1, end) infinite, sheep-enter 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards;
}

.js .p-top__sheep.js-inview:not(.is-visible) {
	animation-play-state: running, running, paused;
}

.p-top__sheep-image {
	max-width: none;
	width: 100%;
}

.p-top__sheep::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--noise-image);
	background-size: 15rem 15rem;
	opacity: var(--sheep-noise-opacity);
	-webkit-mask-image: -webkit-image-set(url("../images/mv/mv-sheep.avif") type("image/avif"), url("../images/mv/mv-sheep.png") type("image/png"));
	mask-image: image-set(url("../images/mv/mv-sheep.avif") type("image/avif"), url("../images/mv/mv-sheep.png") type("image/png"));
	mask-mode: luminance;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: sheep-noise 0.6s steps(1, end) infinite;
}

a {
	transition: opacity 0.3s ease;
}

/* ボタン系など独自hoverを持つ要素は :not() に追加して除外する */

/* スクロールフェードイン（js-rules の IntersectionObserver とセット）
   html.js が付いた時だけ初期不可視にする（JS無効・読込失敗時に消えたままにしない） */

.js .js-fadeup {
	opacity: 0;
	translate: 0 2.5rem;
	transition: opacity 0.8s ease-out, translate 0.8s ease-out;
}

.js-fadeup.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* .js-inview: 同じ IntersectionObserver で is-visible が付くだけの発火フック（要素自体は隠さない）。
   配下の演出は各モジュールで `.js .xxx.js-inview:not(.is-visible) .child { 初期状態 }` の形で書く。
   html.is-loaded: 初回描画の次フレームで script.js が付ける。読込時の登場演出はこれを起点にする。
   スクショ検証では .js-fadeup / .js-inview に is-visible を付け、animation / transition を none にして撮る */

/* 羊のシルエット（MV 横・STORE）に共通のホラー演出。呼び出し側は wrapper に sheep-glitch、::after（ノイズ）に sheep-noise を付ける。
   sheep-glitch は steps(1) で使う（ほとんどの時間は静止し、周期の終盤に一瞬だけズレ・色ズレ・ちらつきが走る）。強さは各 wrapper の --sheep-* 変数で調整する */

/* ノイズ（砂嵐）: タイルを不規則に動かして、粒が走っているように見せる */

.pc-only {
	display: block;
}

.picture {
	display: contents;
}

.picture > source {
	display: none;
}

.picture.sp-only {
	display: none;
}

.sp-only {
	display: none;
}

@media (any-hover: hover) {

.c-btn:hover {
	filter: brightness(1.12);
}

.c-modal__close:hover {
	opacity: 0.7;
}

.c-wishlist-banner:hover .c-wishlist-banner__link,
.c-wishlist-banner:hover .c-wishlist-banner__close {
	opacity: 1;
	filter: brightness(1.12);
}

.footer .footer__totop:hover {
	opacity: 1;
}

.p-top-media__nav:hover,
.p-top-media__thumb:hover {
	opacity: 0.7;
}

.p-top-media__item--video:not([aria-disabled=true]):hover .p-top-media__play {
	scale: 1.1;
}

a:not([class*=c-btn]):hover {
	opacity: 0.7;
}

}

@media (scripting: none) {

.p-top-about__video {
	display: none;
}

.p-top-about__noscript {
	display: contents;
}

.p-top-media__video {
	display: none;
}

.p-top__bg {
	display: none;
}

}

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
	animation-duration: 0.01ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

}

@media (min-width: 768px) {

html {
	scroll-padding-top: 8.75rem;
}

}

@media (max-width: 1250px) {

html {
	font-size: calc(16 / var(--inner-value) * 100vw);
}

}

@media screen and (max-width: 767px) {

:root {
	--vw: 390 * 100vw; /* SPカンプ無し。390 基準で PC-first 変換 */
	--cqi: 390 / 100cqi;
}

:root {
	--wishlist-banner-height-sp: calc(100 * var(--rem));
}

html {
	font-size: 16px;
}

.l-inner {
	max-width: 600px;
	padding-inline: var(--padding-sp);
}

.c-btn {
	gap: 0;
}

.c-btn--primary {
	min-height: 5.6875rem;
}

.c-btn__text {
	min-width: 0;
	gap: 0.25rem;
}

.c-btn__main {
	font-size: max(1rem, 10px);
	line-height: 1.1875;
	text-align: center;
	white-space: nowrap;
}

.c-btn__particle {
	font-size: inherit;
	font-weight: inherit;
}

.c-btn__sub {
	font-size: max(0.75rem, 10px);
}

.c-btn__icon {
	width: 0.8125rem;
	position: absolute;
	top: 50%;
	right: 1.8125rem;
	transform: translateY(-50%);
}

.c-modal::backdrop {
	background-color: var(--black-50);
}

.c-modal__image {
	width: calc(100% - 1.5rem);
	max-width: calc(100% - 1.5rem);
	aspect-ratio: 366/224;
	object-fit: cover;
}

.c-modal__video {
	width: calc(100% - 1.5rem);
	max-width: calc(100% - 1.5rem);
}

.c-modal__close {
	width: 4.25rem;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 1.5rem;
}

.c-section-title {
	padding-block-end: 0;
	max-width: 17.625rem;
	min-height: 4rem;
}

.c-section-title__bg {
	font-size: 4rem;
}

.c-section-title__main {
	margin-block-start: 1.25rem;
	font-size: 1.5rem;
}

.c-section-title--faint .c-section-title__bg {
	opacity: 0.5;
}

.c-wishlist-banner {
	width: auto;
	max-width: none;
	right: 0.4375rem;
	bottom: 0.4375rem;
	left: 0.4375rem;
}

body:has(.c-wishlist-banner:not(.is-hidden)) {
	padding-block-end: var(--wishlist-banner-height-sp);
}

.c-wishlist-banner__link {
	min-height: 5.8125rem;
}

.c-wishlist-banner__link::before {
	opacity: 0.45;
	mix-blend-mode: multiply;
}

.c-wishlist-banner__main {
	font-size: max(1rem, 10px);
}

.c-wishlist-banner__particle {
	font-size: inherit;
	font-weight: inherit;
}

.c-wishlist-banner__icon {
	width: 0.8125rem;
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
}

.c-wishlist-banner__close {
	top: -0.6875rem;
	right: -0.1875rem;
	width: 2rem;
	min-height: 2rem;
}

.footer {
	margin-block-start: 0;
	min-height: 41.125rem;
	background-image: url("../images/sp/footer-bg.jpg");
	background-position: center calc(100% - 2rem);
	background-size: 100% auto;
}

.footer__ink {
	top: 0;
	width: 61.6875rem;
}

.footer__inner {
	padding-block-start: 7.5rem;
	padding-block-end: 1.875rem;
	gap: 2rem;
	width: calc(100% - 1.5rem);
}

.footer__totop {
	width: 4.875rem;
}

.footer__totop img {
	width: 4.875rem;
}

.footer__totop-text span:first-child {
	font-size: max(1rem, 10px);
	line-height: 1.1875;
}

.footer__totop-text span:last-child {
	font-size: 1.5rem;
	line-height: 1.2083333333;
	letter-spacing: 0.29em;
}

.footer__steam {
	flex-direction: column;
	gap: 1.5rem;
	text-align: left;
}

.footer__steam p {
	font-size: max(0.75rem, 10px);
	line-height: 1.4166666667;
}

.footer__logos {
	gap: 2rem;
	min-height: 4rem;
}

.footer__credit {
	font-size: max(0.75rem, 10px);
	line-height: 1.1666666667;
}

.footer__copyright {
	min-height: 2rem;
}

.header {
	top: 0.5rem;
	left: 0.5rem;
}

.header__logo {
	width: 6rem;
}

.p-top-about {
	width: calc(100% - 1.5rem);
	min-height: auto;
	padding-block-end: 11rem;
}

.p-top-about::before {
	inset: -2.12% -8.74%;
	background-image: url("../images/sp/about-paper.png");
	background-image: -webkit-image-set(url("../images/sp/about-paper.avif") type("image/avif"), url("../images/sp/about-paper.webp") type("image/webp"), url("../images/sp/about-paper.png") type("image/png"));
	background-image: image-set(url("../images/sp/about-paper.avif") type("image/avif"), url("../images/sp/about-paper.webp") type("image/webp"), url("../images/sp/about-paper.png") type("image/png"));
}

.p-top-about__inner {
	padding-block-start: 4rem;
	padding-inline: 0.6875rem 0.75rem;
}

.p-top-about__lead {
	margin-block-start: 2.5rem;
	gap: 1.5rem;
}

.p-top-about__catch {
	padding: 0.125rem 0 0.25rem;
	max-width: none;
	font-size: min(1.5rem, (100vw - 2.9375rem) / 14.2);
	letter-spacing: 0.24em;
}

.p-top-about__description {
	font-size: max(0.875rem, var(--fz-body-min));
	line-height: 2;
}

.p-top-about__description br {
	display: block;
}

.p-top-about__body {
	margin-block-start: 2.5rem;
	gap: 2.5rem;
}

.p-top-about__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	width: 100%;
}

.p-top-about__row--reverse {
	grid-template-columns: minmax(0, 1fr);
}

.p-top-about__image {
	width: 100%;
	margin-block: 0.3125rem 0.375rem;
}

.p-top-about__row--reverse .p-top-about__image {
	order: initial;
}

.p-top-about__content {
	order: -1;
}

.p-top-about__heading {
	font-size: 1.5rem;
	line-height: 1.5;
	letter-spacing: 0.24em;
}

.p-top-about__text {
	margin-block-start: 1.5rem;
	font-size: max(0.875rem, var(--fz-body-min));
	line-height: 2;
}

.p-top-about__text br {
	display: block;
}

.p-top-about__emphasis {
	margin-block-start: 1rem;
	font-size: max(1.3125rem, 10px);
}

.p-top-about__deco {
	max-width: none;
}

.p-top-about__deco--01 {
	width: 15rem;
}

.p-top-about__deco--02 {
	width: 22.875rem;
	top: 73.9375rem;
	right: -0.0625rem;
}

.p-top-about__deco--03 {
	width: 24.5625rem;
	top: 57rem;
	bottom: auto;
	left: -0.875rem;
}

.p-top-media {
	min-height: 30.6875rem;
	padding-block-end: 4rem;
}

.p-top-media__inner {
	padding-inline: 0;
	width: calc(100% - 1.5rem);
}

.p-top-media__gallery {
	margin-block-start: 2.5rem;
	gap: 0;
}

.p-top-media__stage {
	display: block;
}

.p-top-media__stage > .p-top-media__nav {
	display: none;
}

.p-top-media__nav {
	gap: 0.25rem;
	width: 3rem;
	font-size: max(1rem, 10px);
	line-height: 1.1875;
}

.p-top-media__nav img {
	width: 3rem;
}

.p-top-media__viewer {
	aspect-ratio: 366/206;
}

.p-top-media__item {
	overflow: visible;
}

.p-top-media__item--image::before {
	inset: -0.125rem;
	background-image: url("../images/sp/movie-thumb.png");
}

.p-top-media__image {
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: url("../images/sp/movie-thumb.png");
	mask-image: url("../images/sp/movie-thumb.png");
}

.p-top-media__item--video {
	overflow: visible;
}

.p-top-media__item.p-top-media__item--video .p-top-media__movie--sp {
	position: absolute;
	top: -0.125rem;
	left: -0.125rem;
	width: calc(100% + 0.25rem);
	max-width: none;
	aspect-ratio: 370/210;
}

.p-top-media__play {
	width: 4rem;
}

.p-top-media__video {
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: url("../images/sp/movie-thumb.png");
	mask-image: url("../images/sp/movie-thumb.png");
}

.p-top-media__thumbs {
	justify-content: flex-start;
	gap: 0.75rem;
	width: -moz-max-content;
	width: max-content;
}

.p-top-media__thumbs--pc {
	display: none;
}

.p-top-media__thumb-window {
	margin-block-start: 1.5rem;
	width: 100%;
}

.p-top-media__thumbs.p-top-media__thumbs--sp {
	--media-thumb-position: 11;
	display: flex;
	position: relative;
	left: 50%;
	transform: translateX(calc((var(--media-thumb-position) * 6.0625rem + 2.65625rem) * -1));
	transition: transform 0.3s ease;
}

.p-top-media__thumb {
	width: 5.3125rem;
}

.p-top-media__thumb-play {
	width: 2rem;
}

.p-top-media__controls.sp-only {
	margin-block-start: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.p-top-mv {
	min-height: 51.6875rem;
}

.p-top-mv__title {
	top: 6rem;
	width: 20rem;
}

.p-top-mv__catch {
	top: 27.5rem;
	width: 8.0625rem;
}

.p-top-store {
	margin-block-start: -15rem;
	min-height: 43.5625rem;
}

.p-top-store::before {
	top: 14.9375rem;
}

.p-top-store__ink {
	top: 0;
	width: 61.6875rem;
	transform: translateX(-50%);
}

.p-top-store__sheep {
	width: 25.75rem;
	top: 12.125rem;
	right: -6.75rem;
	left: auto;
}

.p-top-store__sheep::after {
	-webkit-mask-image: -webkit-image-set(url("../images/sp/store-sheep.avif") type("image/avif"), url("../images/sp/store-sheep.png") type("image/png"));
	mask-image: image-set(url("../images/sp/store-sheep.avif") type("image/avif"), url("../images/sp/store-sheep.png") type("image/png"));
}

.p-top-store__inner {
	padding-block-start: 14.9375rem;
	padding-inline: 0;
	width: calc(100% - 1.5rem);
}

.p-top-store__specs {
	margin-block-start: 2.5rem;
	gap: 1.5rem;
	font-size: max(1rem, var(--fz-body-min));
	line-height: 1;
}

.p-top-store__specs--pc {
	display: none;
}

.p-top-store__specs.p-top-store__specs--sp {
	display: flex;
}

.p-top-store__spec-row {
	gap: 1rem;
}

.p-top-store__spec-row p + p {
	padding-inline-start: 0;
}

.p-top-store__spec-row p + p::before {
	content: none;
	min-height: 0;
}

.p-top-store__specs--sp .p-top-store__spec-row p + p {
	padding-inline-start: 1.0625rem;
}

.p-top-store__specs--sp .p-top-store__spec-row p + p::before {
	content: "";
	min-height: 1rem;
}

.p-top-store__cta {
	gap: 1.5rem;
	margin-block-start: 2.5rem;
}

.p-top-store__note {
	font-size: max(0.875rem, var(--fz-body-min));
	line-height: 1.5;
}

.p-top-store__btn {
	width: min(23.5rem, 100vw - 0.875rem);
	max-width: none;
}

.p-top-store__deco {
	display: none;
}

.p-top__veil {
	top: 50rem;
	bottom: 28.5625rem;
	backdrop-filter: blur(0.75rem);
}

.p-top__fog--01 {
	width: 29.3125rem;
	top: 61.875rem;
	right: -14.875rem;
	left: auto;
}

.p-top__fog--02 {
	width: 39.9375rem;
	top: 33.4375rem;
	left: calc(50% - 20.90625rem);
}

.p-top__fog--03 {
	width: 24.375rem;
	top: 0;
	left: -5.6875rem;
}

.p-top__fog--04 {
	width: 24.375rem;
	top: 18.375rem;
	right: -12.375rem;
	left: auto;
}

.p-top__sheep {
	width: 17.4375rem;
	top: 28.3125rem;
	left: -2.1875rem;
}

.p-top__sheep::after {
	-webkit-mask-image: -webkit-image-set(url("../images/sp/mv-sheep.avif") type("image/avif"), url("../images/sp/mv-sheep.png") type("image/png"));
	mask-image: image-set(url("../images/sp/mv-sheep.avif") type("image/avif"), url("../images/sp/mv-sheep.png") type("image/png"));
}

.pc-only {
	display: none;
}

.picture.pc-only {
	display: none;
}

.picture.sp-only {
	display: contents;
}

.sp-only {
	display: block;
}

}

@media (max-width: 767px) {

a[href^="tel:"] {
	pointer-events: auto;
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}

@keyframes modal-in {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes modal-out {

from {
	opacity: 1;
}

to {
	opacity: 0;
}

}

@keyframes banner-in {

from {
	visibility: hidden;
	opacity: 0;
	translate: 0 1rem;
}

to {
	visibility: visible;
	opacity: 1;
	translate: 0 0;
}

}

@keyframes totop-hop {

0%,100% {
	translate: 0 0;
	rotate: 0deg;
}

30% {
	translate: 0 -0.625rem;
	rotate: -6deg;
}

50% {
	translate: 0 -0.1875rem;
	rotate: 0deg;
}

80% {
	translate: 0 -0.5rem;
	rotate: 6deg;
}

}

@keyframes tv-flicker {

0%,100% {
	opacity: 1;
}

31% {
	opacity: 0.93;
}

33% {
	opacity: 1;
}

64% {
	opacity: 0.96;
}

66% {
	opacity: 1;
}

}

@keyframes sheep-drift {

0%,100% {
	translate: 0 0;
}

50% {
	translate: 0 -0.625rem;
}

}

@keyframes fog-roll {

from {
	rotate: var(--fog-roll);
}

to {
	rotate: calc(var(--fog-roll) * -1);
}

}

@keyframes fog-hor {

from {
	translate: var(--fog-hor) 0;
}

to {
	translate: calc(var(--fog-hor) * -1) 0;
}

}

@keyframes fog-ver {

from {
	transform: translateY(calc(var(--fog-ver) * -1));
}

to {
	transform: translateY(var(--fog-ver));
}

}

@keyframes sheep-breathe {

0%,100% {
	translate: 0 0;
}

50% {
	translate: 0 -0.5rem;
}

}

@keyframes sheep-glitch {

0%,86% {
	transform: none;
	opacity: 1;
	filter: none;
}

86.5% {
	transform: translate(calc(var(--sheep-glitch-shift) * -1), calc(var(--sheep-glitch-shift) * 0.3)) skewX(calc(var(--sheep-glitch-skew) * -1));
	opacity: 0.8;
	filter: drop-shadow(var(--sheep-glitch-shift) 0 var(--sheep-glitch-color-a)) drop-shadow(calc(var(--sheep-glitch-shift) * -1) 0 var(--sheep-glitch-color-b));
}

87% {
	transform: translate(var(--sheep-glitch-shift), calc(var(--sheep-glitch-shift) * -0.2)) skewX(var(--sheep-glitch-skew));
	opacity: 0.9;
	filter: drop-shadow(calc(var(--sheep-glitch-shift) * -1) 0 var(--sheep-glitch-color-a)) drop-shadow(var(--sheep-glitch-shift) 0 var(--sheep-glitch-color-b));
}

87.5% {
	transform: none;
	opacity: 0.45;
	filter: none;
}

88% {
	opacity: 1;
}

93% {
	opacity: 1;
	transform: none;
}

93.3% {
	opacity: 0.3;
}

93.6% {
	opacity: 1;
}

94% {
	opacity: 0.6;
	transform: translate(calc(var(--sheep-glitch-shift) * 0.4), 0);
}

94.4% {
	opacity: 1;
	transform: none;
}

}

@keyframes sheep-noise {

0% {
	background-position: 0 0;
}

10% {
	background-position: -5% -10%;
}

20% {
	background-position: 3% 7%;
}

30% {
	background-position: -8% 2%;
}

40% {
	background-position: 6% -4%;
}

50% {
	background-position: -2% 9%;
}

60% {
	background-position: 9% -6%;
}

70% {
	background-position: -6% -3%;
}

80% {
	background-position: 2% 5%;
}

90% {
	background-position: -9% 8%;
}

100% {
	background-position: 0 0;
}

}

@keyframes sheep-enter {

from {
	opacity: 0;
	scale: 1.08;
	filter: blur(1rem);
}

to {
	opacity: 1;
	scale: 1;
	filter: blur(0);
}

}