@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* ==================================================
  CSS ORGANIZATION MAP
==================================================
  整理基準：
  - HTML内の登場順とDOMの親子関係に沿って配置。
  - JSが参照・生成するクラスは、対象コンポーネントの章に併記。
  - セレクタ、宣言、値、宣言順、空ルール、コメントアウト宣言は変更しない。
  - CSSカスケードに影響する重複ルールは、元の前後関係を維持。

  HTML構造：
  body
  └─ #wrapper
     ├─ main.scroll-page.js-scroll-page
     │  ├─ section.section.page-hero.js-section-start
     │  │  ├─ .site-header
     │  │  └─ .section__inner.page-hero__inner
     │  ├─ section.section.page-intro
     │  ├─ section.section.js-stack-section × 3
     │  │  ├─ .section__product-name
     │  │  └─ .section__inner
     │  │     └─ .scene-showcase
     │  │        ├─ .scene-showcase__text
     │  │        │  ├─ .scene-showcase__scene-title
     │  │        │  ├─ .scene-showcase__product-detail
     │  │        │  └─ .scene-showcase__product-thumbnail
     │  │        └─ .scene-showcase__scene-image
     │  ├─ section.section.page-backcover.js-section-end
     │  └─ .scene-modal.js-scene-modal
     └─ .footerWrapper

  JS対応：
  - ページ初期化：html.is-page-initializing
  - セクション状態：.is-active / .is-underlay / .is-below /
    .is-offscreen-right / .is-stacked / .is-current-stack
  - ヒーロー文字：.js-hero-title-char / .is-hero-title-char-show
  - イントロ文字：.page-intro__reveal-word /
    .js-page-intro-reveal-unit（JS生成）
  - シーン表示：.js-reveal-item / .is-reveal-hidden / .is-show
  - タイトル入力：.is-typing
  - 本文文字：.js-random-char / .is-char-show / .is-space（JS生成）
  - 製品名文字：.js-scan-char / .is-scan-char-show / .is-space（JS生成）
  - モーダル：.js-scene-modal / .js-scene-modal-trigger /
    .js-scene-modal-image / .js-scene-modal-close / .is-open

  CSS構成：
  00. Foundation / Reset / Variables
  01. Page Shell / Common Section
  02. Initial View / JS Section State
  03. Page Hero
  04. Page Introduction
  05. Stack Section Shell
  06. Scene Showcase Layout
  07. Reveal State / JS Common Control
  08. Scene Title
  09. Scene Product Detail
  10. Product Thumbnail Link
  11. Scene Image / CRT Reveal
  12. Page Backcover
  13. Scene Image Modal
  14. Media Queries
================================================== */

/* ==================================================
  00. Foundation / Reset / Variables
==================================================
  リセット、CSS変数、Webフォント、bodyの基本設定。
  コンポーネントより先に読み込む共通基盤。
================================================== */

/* --- 00-01. Reset
--- */

html, body, div, span, applet, object, iframe,
h1, h2, h3,
h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output,
ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 100%;
	vertical-align: bottom;
}

iframe {
	filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	outline: none;
	border: none;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
	font-weight: normal;
}

article, aside, details, figcaption, figure, picture,
footer, header, hgroup,
menu, nav, section {
	display: block;
}

* {
box-sizing: border-box; 
-o-box-sizing: border-box; 
-ms-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
}

html {
	width: 100%;
	height: 100%;
	margin: 0;

	overflow-y: scroll;
	font-size: 100%;
	line-height: 1.8em;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

input, textarea {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

ol {
	list-style: decimal;
	margin: 0 0 0 2em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th {
	text-align: left;
}

/* --- 00-02. Root Variables
--- */

:root {

	--vivant-red: #af1918; 
	// --heading-text: #b1ada7;
	--heading-text: #fff;

	--snap-duration: 0.7s;
	--snap-easing: cubic-bezier(0.76, 0, 0.24, 1);

	--noto-sans-jp: "Noto Sans JP", sans-serif;
	--barlow-condensed: "Barlow Condensed", sans-serif;

	--font-weight-thin: 100;
	--font-weight-extralight: 200;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;
}

/* --- 00-03. Font Loading / Body Base
--- */

@font-face {
	font-family: "CustomAlphaNum";
	src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2lv0tKk.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0020-007E; /* 半角英数字・記号 */
	size-adjust: 110%;
}

body {
	background: #111;
	color: #fff;
	font-family: var(--noto-sans-jp),"游ゴシック", YuGothic, "小塚ゴシック Pro L", "KozGoPro-Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; 
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	padding: 0; 
	width: 100%;
	height: auto;
	margin: 0;
	overflow-x: hidden;
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
}

/* ==================================================
  01. Page Shell / Common Section
==================================================
  HTML:
  body > #wrapper > main.scroll-page.js-scroll-page > .section

  モバイルを基準としたページスクロール、section、共通innerを定義。
================================================== */

.scroll-page {
	position: relative;
	width: 100%;
	/* min-height: 100dvh; */
	height: 100dvh;
	overflow: visible;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	background: #111;
}

.section {
	position: relative;
	width: 100%;
	/* min-height: 100dvh; */
	min-height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	color: #fff;
	z-index: var(--section-z, 1);
	container-type: inline-size;
}

.section__inner {
	width: 100%; 
	/* min-height: 100dvh;  */
	display: grid;
	place-items: self-start;
}

/* 未使用（削除可） */
.section__title {
	margin: 0;
	font-size:clamp(12px, calc(100vw * 20 / 1024) , 20px); 
}

/* ==================================================
  02. Initial View / JS Section State
==================================================
  JS対応：
  - html.is-page-initializing
  - .is-active / .is-underlay / .is-below
  - .is-offscreen-right / .is-stacked

  実際のPC用状態クラスのtransformは 14. Media Queries 内。
================================================== */

html.is-page-initializing,
html.is-page-initializing body {
	overflow: hidden;
}

html.is-page-initializing .scroll-page {
	scroll-behavior: auto;
}

@media only screen and (min-width: 1024px) {

	html.is-page-initializing .scroll-page > .section {
		transition: none !important;
	}

	html.is-page-initializing .scroll-page > .js-section-start {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	html.is-page-initializing .scroll-page > .page-intro,
	html.is-page-initializing .scroll-page > .js-section-end {
		transform: translate3d(0, 100%, 0);
		visibility: hidden;
	}

	html.is-page-initializing .scroll-page > .js-stack-section {
		transform: translate3d(100dvw, 0, 0);
		visibility: hidden;
	}
}

/* --- 02-01. Section state reference
  --stack-offset はJSが各 .js-stack-section に設定。
  横スタック時の位置とz-indexはPC用メディアクエリで制御。
--- */

/* ==================================================
  03. Page Hero
==================================================
  HTML:
  .section.page-hero.js-section-start
  ├─ .site-header
  └─ .section__inner.page-hero__inner
     └─ .page-hero__content > .page-hero__body > .page-hero__title

  JS対応：ヒーロータイトルを .js-hero-title-char に分割。
================================================== */

/* --- 03-01. Site Header
--- */

.site-header {
	height: 101px; 
	height: 60px; 
	width: 100%; 
	padding: 0 clamp(20px, calc(100vw * 30 / 1920) , 30px); 
	background: #000; 
	display: grid;
	place-items: center start;
}

.site-header__inner {
	aspect-ratio: 180 / 38;
	height:clamp(30px, calc(100vw * 38 / 1920) , 38px); 
	line-height: 1; 
}

.site-header__logo {
	width: 100%; 
	vertical-align: bottom; 
}

/* --- 03-02. Hero Section / Inner
--- */

.section__inner.page-hero__inner {
	/* min-height: calc(100dvh - 101px);  */
	position: relative; 
	min-height: calc(100dvh - 60px);
}

.js-section-start {
	position: relative; 
	overflow: hidden; 
	background: #000; 
	height: 100dvh; 
}

/* --- 03-03. Hero Content / Title Typewriter
--- */

.page-hero__content {
	display: block; 
	text-align: center; 
	padding: 0; 
	transform: translateY(-8%); 
	margin: auto;
}

.page-hero__body {
	margin-bottom: clamp(30px, calc(100vw * 60 / 1920) , 60px); 
	padding: 0 20px; 
}

.page-hero__title {
	text-align: left; 
	position: relative; 
	padding: 0 0 20px; 
}

.js .page-hero__title:not(.is-hero-title-ready) {
	visibility: hidden;
}

.page-hero__title i {
	display: block; 
}

.page-hero__title-emphasis {
	display: block; 
}

.js-hero-title-char {
	opacity: 0;
	visibility: hidden;
}

.js-hero-title-char.is-hero-title-char-show {
	opacity: 1;
	visibility: visible;
}

.page-hero__title::after {
	content: ""; 
	position: absolute; 
	display: block; 
	width: 10px; 
	height: 10px; 
	left: 3px; 
	bottom: 0px; 
	border-right: 1px solid var(--vivant-red); 
	border-bottom: 1px solid var(--vivant-red); 
	transform-origin: center; 
	transform: rotate(45deg);
	opacity: 0;
	visibility: hidden;
}

.page-hero__title.is-hero-title-complete::after {
	visibility: visible;
	animation: page-hero-title-marker-blink 0.8s steps(1, end) infinite;
}

@keyframes page-hero-title-marker-blink {
	0%, 45% {
		opacity: 1;
	}

	46%, 75% {
		opacity: 0;
	}

	76%, 100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-hero-title-char {
		opacity: 1;
		visibility: visible;
	}

	.page-hero__title.is-hero-title-complete::after {
		opacity: 1;
		animation: none;
	}
}

/* ==================================================
  04. Page Introduction
==================================================
  HTML:
  .section.page-intro > .section__inner > .page-intro__text

  JS対応：
  .page-intro__reveal-word と自動生成された
  .js-page-intro-reveal-unit をインラインスタイルで表示制御。
================================================== */

.page-intro {
	overflow: hidden;
	background: var(--vivant-red);
}

.page-intro .section__inner {
	padding: 20px;
	width: 100%;
	min-height: 100dvh;
	display: grid;
	place-items: center;
}

.page-intro__text {
	color: #000; 
	font-weight: 900; 
	font-size:clamp(20px, calc(100vw * 48 / 1920) , 48px); 
	line-height: 1.4; 
	letter-spacing: 0.05em; 
}

.page-intro__paragraph br {
	display: none; 
}

/* ==================================================
  05. Stack Section Shell
==================================================
  HTML:
  .section.js-stack-section
  ├─ .section__product-name
  └─ .section__inner > .scene-showcase

  JS対応：stackSections、--stack-offset、--section-z、
  .is-stacked、.is-current-stack。
================================================== */

/* --- 05-01. Stack Section Base
--- */

.scroll-page > .js-stack-section {
	background: #000; 
	padding: 0; 
}

/* --- 05-02. HUD Frame
--- */

.js-stack-section::before,
.js-stack-section::after {
	content: ""; 
	position: absolute; 
	display: block; 
	width: 100dvw; 
	height: 25dvh; 
	background-image: url('../images/ledFrame_03.png'); 
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size:200%; 
	z-index: -1; 
	opacity: 0.5;
}

.js-stack-section:before {
	top: 0; 
	left: 0; 
	background-position: left top;
	animation: hud-frame-flicker 5.2s linear infinite;
	animation-delay: -0.4s;
}

.js-stack-section::after {
	bottom: 0; 
	right: 0; 
	background-position: right bottom;
	animation: hud-frame-flicker-after 6.7s linear infinite;
	animation-delay: -2.35s;
}

/* --- 05-03. Stack Inner
--- */

.js-stack-section .section__inner {
	width: 100%;
	min-height: 100dvh;
	padding: 20px 40px;

	display: grid;
	place-items: center start;
}

/* --- 05-04. Stacked Product Name
--- */

.section__product-name {
	position: absolute; 
	top: 0px; 
	left: 0px; 
	transform: rotate(90deg);
	transform-origin: left bottom; 
	padding: 0 ; 
	width: fit-content; 
	height: 50px; 
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none; 
	display: grid;
	place-items: center;
	border-bottom: 2px solid var(--vivant-red); 
}

.section__product-name-text {
	display: block; 
	font-size: 14px; 
	line-height: 1; 

	font-family: "Barlow Condensed", sans-serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0.5em; 
}

/* ==================================================
  06. Scene Showcase Layout
==================================================
  HTML順：
  .scene-showcase
  ├─ .scene-showcase__text
  │  ├─ .scene-showcase__scene-title
  │  ├─ .scene-showcase__product-detail
  │  └─ .scene-showcase__product-thumbnail
  └─ .scene-showcase__scene-image

  SPでは order により表示順を制御。PC配置は 14. Media Queries 内。
================================================== */

.scene-showcase-wrapper {
	margin: auto; 
}

.scene-showcase {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: row;
	gap: 20px;
}

.scene-showcase__text,
.scene-showcase__product-detail {
	display: contents; 
}

.scene-showcase__scene-title {
	order: 1;
}

.scene-showcase__scene-image {
	order: 2;
}

.scene-showcase__product-name {
	order: 3;
}

.scene-showcase__body {
	order: 4;
}

.scene-showcase__product-thumbnail  {
	order: 5;

	display: flex;


	gap: 20px; 
	width: fit-content; 
	margin-right: auto;
}

/* 未使用（削除可） */
.scene-showcase__scene-title,
.scene-showcase__product-name,
.scene-showcase__body,
.scene-showcase__scene-image,
.scene-showcase__product-thumbnail {


}

/* ==================================================
  07. Reveal State / JS Common Control
==================================================
  JS対応：
  REVEAL_ITEM_SELECTOR = .js-reveal-item
  REVEAL_HIDDEN_CLASS  = .is-reveal-hidden
  REVEAL_SHOW_CLASS    = .is-show

  data-reveal-order の順番に各要素へ .is-show を付与。
================================================== */

.js-reveal-item.is-reveal-hidden {
	pointer-events: none;
}

.js-reveal-item.is-show {
	pointer-events: auto;
}

.scene-showcase__scene-title.is-reveal-hidden,
.scene-showcase__scene-image.is-reveal-hidden,
.scene-showcase__product-thumbnail.is-reveal-hidden {
  opacity: 0;
}

.scene-showcase__scene-title.is-show,
.scene-showcase__scene-image.is-show,
.scene-showcase__product-thumbnail.is-show {
  opacity: 1;
}

/* ==================================================
  08. Scene Title
==================================================
  HTML:
  .scene-showcase__scene-title.js-reveal-item
  └─ .scene-showcase__scene-title-text[data-type-segments]

  JS対応：ローマ字入力、かな変換、確定文字、.is-typing。
================================================== */

.scene-showcase__scene-title {
	position: relative; 
}


.scene-showcase__scene-title::after {
	content: ""; 
	position: absolute; 
	inset: 0; 
	background-image: url('../images/paper-noise.png'); 
	background-repeat: repeat;
	background-size: 250px; 
	mix-blend-mode: multiply; 
}


.scene-showcase__scene-title.is-reveal-hidden {
	opacity: 0;
}

.scene-showcase__scene-title.is-show {
	opacity: 1;
}

.scene-showcase__scene-title-text {
	position: relative;
	display: block;
	margin-bottom:0; 
	font-size:clamp(20px, calc(100vw * 42 / 1920) , 42px); 
	font-weight: 800; 
	letter-spacing: 0.05em; 
	line-height: 1; 
	color:  var(--heading-text); 
}

.scene-showcase__scene-title-text.is-typing::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin-left: 0.08em;
	background: currentColor;
	transform: translateY(0.12em);
	animation: scene-title-cursor-blink 0.7s steps(1) infinite;
}

@keyframes scene-title-cursor-blink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

/* ==================================================
  09. Scene Product Detail
==================================================
  HTML:
  .scene-showcase__product-detail
  ├─ .scene-showcase__product-name
  └─ .scene-showcase__body

  JS対応：製品名のスキャン文字と本文のランダム文字を生成。
================================================== */

/* --- 09-01. Product Name / Scan Characters
--- */

/* 未使用（削除可） */
.scene-showcase__product-name {

}

.scene-showcase__product-name-text {
	font-weight: 900; 
	letter-spacing: 0.1em; 
	margin-bottom: 40px;
	font-size:clamp(14px, calc(100vw * 18 / 1920) , 18px); 
	color: var(--heading-text); 
}

.scene-showcase__product-name.is-reveal-hidden {
	opacity: 0;
}

.scene-showcase__product-name.is-show {
	opacity: 1;
}

.scene-showcase__product-name .js-scan-char {
	opacity: 0;
	display: inline-block;
	transform: translate3d(0.25em, 0, 0);
	filter: blur(5px);
	transition:
		opacity var(--scan-text-char-duration, 180ms) linear,
		transform var(--scan-text-char-duration, 180ms) var(--snap-easing),
		filter var(--scan-text-char-duration, 180ms) linear;
	will-change: opacity, transform, filter;
}

.scene-showcase__product-name .js-scan-char.is-scan-char-show {
	opacity: 1;
	transform: translate3d(0.1em, 0, 0);
	filter: blur(0);
}

.scene-showcase__product-name .js-scan-char.is-space {
	width: 0.35em;
}

/* --- 09-02. Body Text / Random Characters
--- */

/* 未使用（削除可） */
.scene-showcase__body {

}

.scene-showcase__paragraph {
	line-height: 1.6; 
	font-size:clamp(12px, calc(100vw * 16 / 1920) , 16px); 
}

.scene-showcase__body.is-reveal-hidden {
	opacity: 0;
}

.scene-showcase__body.is-show {
	opacity: 1;
}

.scene-showcase__body .js-random-char {
	opacity: 0;
	display: inline;
	color: var(--vivant-red); 
	transition:
		opacity var(--random-text-char-duration, 120ms) linear,
		filter var(--random-text-char-duration, 120ms) linear,
		color var(--random-text-char-duration, 120ms) linear;
	filter: blur(10px);
}

.scene-showcase__body .js-random-char.is-char-show {
	opacity: 1;
	color: #fff; 
	filter: blur(0);
}

.scene-showcase__body .js-random-char.is-space {
	display: inline;
}

/* ==================================================
  10. Product Thumbnail Link
==================================================
  HTML:
  .scene-showcase__product-thumbnail
  └─ .scene-showcase__product-link
     ├─ .scene-showcase__product-link-visual
     │  ├─ .scene-showcase__thumbnail-figure
     │  └─ .scene-showcase__product-link-arrow
     └─ .scene-showcase__product-link-label

  hover / focus-visible / revealアニメーションを同章に集約。
================================================== */

.scene-showcase__product-link {
	color: #fff; 
	display: block; 
	text-decoration: none; 
	width: fit-content; 
}

/* 未使用（削除可） */
.scene-showcase__product-thumbnail {

}

.scene-showcase__product-link-visual {
	display: flex;
	align-items: flex-end; 
	gap: 20px; 
}

.scene-showcase__thumbnail-figure {
	border-radius: 10px;
	overflow: hidden; 
}

.scene-showcase__thumbnail-image {
	aspect-ratio: 300 / 225;
	max-width: clamp(80px, calc(100vw * 180 / 1920) , 180px); 
	object-fit: cover; 
	transition: all .7s ease;
}

.scene-showcase__product-link:hover .scene-showcase__thumbnail-image {
	transform: scale(1.1);
}

.scene-showcase__product-link-arrow {
	display: flex;
	align-items: stretch; 
	gap: 5px; 
	transform: skewX(-45deg);
}

.scene-showcase__product-link-arrow i {
	height: 15px; 
	width: 5px; 
	display: block; 
	border: 1px solid var(--vivant-red); 

	opacity: 0.5;
	visibility: visible;

	transition:
		opacity 0.08s steps(1, end),
		visibility 0.08s steps(1, end),
		transform 0.12s ease;
}

.scene-showcase__product-link-arrow i:nth-child(1) {
	transition-delay: 0.24s;
}

.scene-showcase__product-link-arrow i:nth-child(2) {
	transition-delay: 0.18s;
}

.scene-showcase__product-link-arrow i:nth-child(3) {
	transition-delay: 0.12s;
}

.scene-showcase__product-link-arrow i:nth-child(4) {
	transition-delay: 0.06s;
}

.scene-showcase__product-link-arrow i:nth-child(5) {
	transition-delay: 0s;
}

.scene-showcase__product-link:hover + .scene-showcase__product-link .scene-showcase__product-link-arrow i,
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link .scene-showcase__product-link-arrow i,
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i,
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i {
	opacity: 1;
	visibility: visible;
}

.scene-showcase__product-link:hover + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(1),
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(1),
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i:nth-child(1),
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i:nth-child(1) {
	transition-delay: 0s;
}

.scene-showcase__product-link:hover + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(2),
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(2),
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i:nth-child(2),
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i:nth-child(2) {
	transition-delay: 0.06s;
}

.scene-showcase__product-link:hover + .scene-showcase__product-link.scene-showcase__product-link-arrow i:nth-child(3),
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link.scene-showcase__product-link-arrow i:nth-child(3),
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i:nth-child(3),
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i:nth-child(3) {
	transition-delay: 0.12s;
}

.scene-showcase__product-link:hover + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(4),
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(4),
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i:nth-child(4),
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i:nth-child(4) {
	transition-delay: 0.18s;
}

.scene-showcase__product-link:hover +.scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(5),
.scene-showcase__product-link:focus-visible + .scene-showcase__product-link .scene-showcase__product-link-arrow i:nth-child(5),
.scene-showcase__product-link:hover .scene-showcase__product-link-arrow i:nth-child(5),
.scene-showcase__product-link:focus-visible .scene-showcase__product-link-arrow i:nth-child(5) {
	transition-delay: 0.24s;
}

.scene-showcase__product-link-label {
	display: block; 
	width: fit-content; 
	margin-top: 20px;
	font-size:clamp(10px, calc(100vw * 12 / 1920) , 12px); 
	line-height: 1.2; 
	font-weight: 700; 


	/* 下線用の背景を準備 */
	background-image: linear-gradient(var(--vivant-red));
	background-repeat: no-repeat;
	background-size: 0% 1px; /* 初期は幅0%で非表示 */
	background-position: right bottom; /* 左下からスタート */
	padding-bottom: 12px; /* テキストと線の間隔 */
	transition: background-size 0.5s ease;

}

.scene-showcase__product-link-label::before {
	content: ""; 
	display: inline-block; 
	border-right: 1px solid var(--vivant-red); 
	border-top: 1px solid var(--vivant-red); 
	margin-right: 10px;
	height: 6px; 
	width: 6px; 
	transform-origin: center; 
	transform: rotate(45deg) translateY(-0.1em) ;
}

.scene-showcase__product-link:hover .scene-showcase__product-link-label {
	background-size: 100% 1px; /* hover時に右から消える動き */
	background-position: left bottom; 
}

.scene-showcase__product-thumbnail.is-reveal-hidden .scene-showcase__thumbnail-figure {
	opacity: 0;
	transform: translate3d(-18px, 0, 0) scale(0.98);
	clip-path: inset(0 100% 0 0);
	filter: blur(5px) brightness(1.25) contrast(1.1);
}

.scene-showcase__product-thumbnail.is-reveal-hidden .scene-showcase__product-link-arrow i {
	opacity: 0;
	transform: translate3d(-8px, 0, 0);
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__thumbnail-figure {
	animation: product-thumbnail-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i {
	animation-name: product-thumbnail-arrow-reveal;
	animation-duration: 0.22s;
	animation-timing-function: steps(1, end);
	animation-fill-mode: backwards;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i:nth-child(1) {
	animation-delay: 0.32s;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i:nth-child(2) {
	animation-delay: 0.38s;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i:nth-child(3) {
	animation-delay: 0.44s;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i:nth-child(4) {
	animation-delay: 0.50s;
}

.scene-showcase__product-thumbnail.is-show .scene-showcase__product-link-arrow i:nth-child(5) {
	animation-delay: 0.56s;
}

@keyframes product-thumbnail-reveal {
	0% {
		opacity: 0;
		transform: translate3d(-18px, 0, 0) scale(0.98);
		clip-path: inset(0 100% 0 0);
		filter: blur(5px) brightness(1.25) contrast(1.1);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		clip-path: inset(0 0 0 0);
		filter: blur(0) brightness(1) contrast(1);
	}
}

@keyframes product-thumbnail-arrow-reveal {
	0% {
		opacity: 0;
		transform: translate3d(-8px, 0, 0);
	}

	50% {
		opacity: 1;
		transform: translate3d(2px, 0, 0);
	}

	100% {
		opacity: 0.5;
		transform: translate3d(0, 0, 0);
	}
}

/* ==================================================
  11. Scene Image / CRT Reveal
==================================================
  HTML:
  .scene-showcase__scene-image
  └─ .scene-showcase__image-glow
     └─ .scene-showcase__figure
        └─ .scene-showcase__image-button.js-scene-modal-trigger
           └─ .scene-showcase__image

  JS対応：.is-showでCRT表示、クリックで画像モーダルを開く。
================================================== */

/* 未使用（削除可） */
.scene-showcase__scene-image {
	
}

.scene-showcase__image-glow {
	position: relative;
	border-radius: 30%;
	transition:
		box-shadow .8s ease,
		filter .8s ease;
}

.scene-showcase__image-glow:hover {
	box-shadow:
		0 20px 30px -10px rgba(175, 25, 24, 0.45);
	filter: brightness(1.04);
}

.scene-showcase__figure {
	position: relative;
	margin: 0;
	/* 初期状態：中央に潰れて見えない */
	-webkit-clip-path: inset(50% 50% 50% 50%);
	clip-path: inset(50% 50% 50% 50%);
	opacity: 0;
	will-change: clip-path, opacity, filter;
	overflow: hidden;
	border-radius: 15px;
}

.scene-showcase__image {
	display: block;
	width: 100%;
	height: auto;

	aspect-ratio: 3 / 2;

	transform: scale(1);
	transform-origin: center;
	transition:
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.8s ease;
}

.scene-showcase__image-button:hover .scene-showcase__image,
.scene-showcase__image-button:focus-visible .scene-showcase__image {
	transform: scale(1.04);
	filter: brightness(1.08);
}

.is-show .scene-showcase__figure {
	animation: crt-reveal .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes crt-reveal {
	0% {
		-webkit-clip-path: inset(50% 50% 50% 50%);
		clip-path: inset(50% 50% 50% 50%);
		opacity: 0;
		filter: brightness(2) contrast(1.8);
	}

	/* 中央に細い線が出る */
	12% {
		-webkit-clip-path: inset(calc(50% - 0.5px) 45% calc(50% - 0.5px) 45%);
		clip-path: inset(calc(50% - 0.5px) 45% calc(50% - 0.5px) 45%);
		opacity: 1;
		filter: brightness(2.4) contrast(2);
	}

	/* 高さ1〜2pxのまま左右いっぱいに広がる */
	36% {
		-webkit-clip-path: inset(calc(50% - 0.5px) 0 calc(50% - 0.5px) 0);
		clip-path: inset(calc(50% - 0.5px) 0 calc(50% - 0.5px) 0);
		opacity: 1;
		filter: brightness(2.2) contrast(1.8);
	}

	/* 少しだけ横線状態をキープ */
	48% {
		-webkit-clip-path: inset(calc(50% - 0.5px) 0 calc(50% - 0.5px) 0);
		clip-path: inset(calc(50% - 0.5px) 0 calc(50% - 0.5px) 0);
		filter: brightness(1.8) contrast(1.5);
	}

	/* 天地に開いていく */
	100% {
		-webkit-clip-path: inset(0 0 0 0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
		filter: brightness(1) contrast(1);
	}
}

.scene-showcase__figure::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 2;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow:
		0 0 8px rgba(255, 255, 255, 0.9),
		0 0 18px rgba(255, 80, 80, 0.45);
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

.is-show .scene-showcase__figure::before {
	animation: crt-scanline .5s ease-out forwards;
}

@keyframes crt-scanline {
	0% {
		opacity: 0;
		transform: translateY(-50%) scaleX(0);
	}

	12% {
		opacity: 1;
		transform: translateY(-50%) scaleX(0.15);
	}

	36% {
		opacity: 1;
		transform: translateY(-50%) scaleX(1);
	}

	55% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateY(-50%) scaleX(1);
	}
}

.is-show .scene-showcase__image {
	animation: crt-flicker 0.45s steps(2, end) 0.25s 2;
}

@keyframes crt-flicker {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0.65;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0.85;
	}
	100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scene-showcase__figure,
	.scene-showcase__figure::before,
	.scene-showcase__image {
		animation: none !important;
		transition: none !important;
	}

	.scene-showcase__figure {
		-webkit-clip-path: inset(0);
		clip-path: inset(0);
		opacity: 1;
		filter: none;
	}
}

.scene-showcase__image-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: zoom-in;
	aspect-ratio: 3 / 2;
}

.scene-showcase__image-button:focus-visible {
	outline: 1px solid var(--vivant-red);
	outline-offset: 4px;
}

/* ==================================================
  12. Page Backcover
==================================================
  HTML:
  .section.page-backcover.js-section-end
  └─ .section__inner.page-backcover__inner
     ├─ .page-backcover__credit
     └─ .page-backcover__copyright

  注：.page-cta__inner は元CSSに存在するセレクタとして保持。
  現在のHTMLでは .page-backcover__inner が使用されている。
================================================== */

.scroll-page > .js-section-end {
	background: #000; 
	padding: 20px; 
	display: grid; 
	place-items: center; 
}

.page-backcover .section__inner {
	gap: 40px; 
}

.page-backcover__content {
	display: grid; 
	grid-template-columns: repeat(1, 1fr); 
	width: 100%; 
	max-width: 1024px; 
	gap: 20px; 
}


.page-backcover__credit {
	background: var(--vivant-red); 
	color: #fff; 
	padding: 30px 16px 20px; 
	min-height: 115px; 
	width: 100%; 
	margin: 0 auto 10px;
	line-height: 1.8; 
	position: relative; 
	text-align: center; 
}

.page-backcover__banner-link {
	display: block; 
	text-decoration: none; 
	display: flex;
	flex-wrap: wrap;
	flex-direction: column; 
	gap: 0; 
}

.page-backcover__banner-link figure {
	overflow: hidden; 
}

.page-backcover__banner-image {
	width: 100%; 
	transition: all .4s ease;
}

.page-backcover__banner-link:hover .page-backcover__banner-image {
	transform: scale(1.05);
}

.page-backcover__top-link {

}

.page-backcover__top-link-anchor {
	display: block; 
	width: fit-content; 
	border: 2px solid #fff; 
	padding: 10px 20px; 
	line-height: 1.4; 
	text-decoration: none; 
	color: #fff; 
	background-color: #000;
	transition: background-color .5s ease;
}

.page-backcover__top-link-anchor:hover {
	background-color: var(--vivant-red); 
}

.page-backcover__top-link-text {
	display: block; 
	line-height: 1; 
	font-weight: 700;
	letter-spacing: 0.1em; 
	font-size:clamp(12px, calc(100vw * 14 / 1366) , 14px); 
}


/* 未使用（削除可） */
.page-cta__inner {
	position: relative; 
	min-height: calc(100dvh - 60px);
	text-align: center; 
}



.page-backcover__banner-text {
	color: #fff; 
	display: block; 
	text-align: center; 
	word-break: keep-all; 
	font-size:clamp(12px, calc(100vw * 14 / 1366) , 14px); 
	line-height: 1.6; 
	margin-top: 5px;
}



.page-backcover__status {
	position: absolute; 
	top: 0px; 
	left: 20px; 
	transform: translateY(-50%);
	width: fit-content; 

	border: 2px solid #fff; 
	background: #000; 
}

.page-backcover__status-label {
	position: relative; 
}

.page-backcover__status-label::after {
	content: ""; 
	position: absolute; 
}

.page-backcover__status-text {
	display: block; 
	font-size:clamp(10px, calc(100vw * 12 / 800) , 12px); 
	letter-spacing: 0.2em; 
	font-weight: 700; 
	padding: 5px 10px; 
	color: #fff; 
}

.page-backcover__broadcast-text {
	display: block; 
	font-size:clamp(12px, calc(100vw * 18 / 800) , 18px); 
	font-weight: var(--font-weight-black); 
}


.page-backcover__official-list {
	margin: 10px auto 0;
	width: fit-content; 
	display: grid;
	grid-template-columns: auto auto;
	row-gap: 0; 
	line-height: 1.6; 
}


.page-backcover__official {
	font-size:clamp(12px, calc(100vw * 16 / 800) , 16px); 
	font-weight: var(--font-weight-regular); 

	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2; 
	gap: 0; 
}

.page-backcover__official-label {
	text-align: left; 
}

.page-backcover__official-label::after {
	content: "：";
	display: inline-block;	
	margin-left: 0.5em;
}

.page-backcover__official-link {
	color: #fff; 
	text-decoration: none; 
	position: relative; 
	padding-right: 20px; 
	text-align: left; 
	display: block; 


}





.page-backcover__official-link span {
	display: block; 
	width: fit-content; 
	/* 下線用の背景を準備 */
	background-image: linear-gradient(#fff);
	background-repeat: no-repeat;
	background-size: 0% 1px; /* 初期は幅0%で非表示 */
	background-position: right bottom; /* 左下からスタート */
	padding-bottom: 5px; /* テキストと線の間隔 */
	transition: background-size 0.5s ease;
}

.page-backcover__official-link:hover span {
    background-size: 100% 1px; /* hover時に右から消える動き */
	background-position: left bottom; 
}

.page-backcover__official-link[target=_blank] span::after {
	content: ""; 
	display: inline-block; 
	transform: translateY(10%);

	background-image: url('../images/icon_external_link.svg'); 
	background-repeat: no-repeat; 
	
	width: clamp(12px, calc(100vw * 14 / 800) , 14px); 
	height: clamp(12px, calc(100vw * 14 / 800) , 14px); 



	background-size: clamp(12px, calc(100vw * 14 / 800) , 14px)  clamp(12px, calc(100vw * 14 / 800) , 14px); 
	margin-left: 10px;
}

.page-backcover__copyright {
	position: absolute; 
	bottom: 20px; 

	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
	flex-direction: column; 
	gap: 5px; 
}

.page-backcover__copyright-item {
	font-size: 10px; 
	color: #666; 
	line-height: 1.4; 
}

.page-backcover__top-link {
	margin: auto;
}

/* ==================================================
  13. Scene Image Modal
==================================================
  HTML:
  .scene-modal.js-scene-modal
  ├─ .scene-modal__overlay.js-scene-modal-close
  └─ .scene-modal__dialog
     ├─ .scene-modal__close.js-scene-modal-close
     └─ .scene-modal__figure > .scene-modal__image.js-scene-modal-image

  JS対応：.is-open と body.is-scene-modal-open を付与・解除。
================================================== */

.scene-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.28s ease,
		visibility 0.28s ease;
}

.scene-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.scene-modal__overlay {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background:
		radial-gradient(ellipse at 50% 50%, rgba(175, 25, 24, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
		rgba(0, 0, 0, 0.86);
	cursor: zoom-out;
}

.scene-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(1200px, 86dvw);
	max-height: 88dvh;
}

.scene-modal__figure {
	margin: 0;
}

.scene-modal__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 88dvh;
	object-fit: contain;
	border-radius: 12px;
}

.scene-modal__close {
	position: absolute;
	right: 0;
	top: -44px;
	z-index: 2;
	margin: 0;
	padding: 0 0 0 22px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--barlow-condensed);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}

.scene-modal__close::before,
.scene-modal__close::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	display: block;
	width: 11px;
	height: 1px;
	background: var(--vivant-red);
	transform-origin: center;
}

.scene-modal__close::before {
	transform: translateY(-50%) rotate(45deg);
}

.scene-modal__close::after {
	transform: translateY(-50%) rotate(-45deg);
}

.scene-modal__close:focus-visible {
	outline: 1px solid var(--vivant-red);
	outline-offset: 4px;
}

@keyframes scene-modal-image-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 16px, 0) scale(0.98);
		filter: blur(8px) brightness(1.4);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0) brightness(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scene-modal,
	.scene-modal__image {
		transition: none !important;
		animation: none !important;
	}
}

/* ==================================================
  14. Media Queries
==================================================
  Mobile First：
  - 479px以下 / 480px以上 / 568px以上 / 667px以上 / 768px以上
  - 1024px以上で固定セクション、横スタック、2カラムを有効化
  - prefers-reduced-motion ではPCセクション遷移を短縮
================================================== */

/* 未使用（削除可） */
@media only screen and (max-width: 479px) {


}

/* 未使用（削除可） */
@media only screen and (min-width: 480px) {


}

/* 未使用（削除可） */
@media only screen and (min-width: 568px) {


}

/* 未使用（削除可） */
@media only screen and (min-width: 667px) {


}

/* 未使用（削除可） */
@media only screen and (min-width: 768px) {


}

@media only screen and (min-width: 1024px) {


	body {
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	.scroll-page {
		position: fixed;
		inset: 0;
		width: 100dvw;
		height: 100dvh;
		overflow: hidden;
		scroll-snap-type: none;
		scroll-behavior: auto;
		overscroll-behavior-y: auto;
	}

	.section {
		position: absolute;
		top: 0; 
		height: 100%;
		min-height: 0;
		transition: transform var(--snap-duration) var(--snap-easing), background-color .7s ease;
		will-change: transform;
	}

	.section.is-active,
	.section.is-underlay {
		transform: translate3d(0, 0, 0);
	}

	.section.is-below {
		transform: translate3d(0, 100%, 0);
	}

	.section.is-offscreen-right {
		transform: translate3d(100dvw, 0, 0);
	}

	.section.is-stacked {
		transform: translate3d(var(--stack-offset, 0px), 0, 0);
	}

	.section.is-stacked:has(+ .is-stacked) {
		background-color: #111; 
	}

	.section.is-stacked + .is-stacked {
		box-shadow: 0 0 20px rgba(0,0,0,0.5);
	}

	.section__inner {
		height: 100%;
		min-height: 0;
	}

	.section__inner.page-hero__inner {
		height: calc(100% - 101px); 
		min-height: 0;
	}

	.js-stack-section .section__inner {
		height: 100%;
		min-height: 0;
		container-type: size;
	}


	.js-stack-section {
		width: calc(100dvw - var(--stack-offset, 0px));
	}

	.js-stack-section::before,
	.js-stack-section::after {
		width: 70dvw; 
		height: 25dvh; 
		background-size:150%; 
		z-index: -1; 
	}

	.js-stack-section:before {
		top: 10px; 
		left: 40px; 
	}

	.js-stack-section::after {
		bottom: 10px; 
		right: 40px; 
	}

	.section.is-stacked:has(+ .is-stacked)::before,
	.section.is-stacked:has(+ .is-stacked)::after {
		opacity: 0;
		animation: none;
	}

	/* 02. Site Header */
	.site-header {
		height: 101px; 
	}


	/* 04. Page Introduction */
	.page-intro__text {
		letter-spacing: 0; 
	}

	.page-intro__paragraph br {
		display: block; 
	}

	/* 05. Cover / Page Hero */

	/* 未使用（削除可） */
	.page-hero__title {

	}

	/* 未使用（削除可） */
	.page-hero__title-emphasis {
	}



	/* PC-01. Keyframes: hud-frame-flicker（左上HUDフレームの明滅） */
	@keyframes hud-frame-flicker {
		0% {
			opacity: 0.42;
			filter: brightness(1);
		}
	
		3% {
			opacity: 0.25;
			filter: brightness(0.8);
		}
	
		5% {
			opacity: 0.5;
			filter: brightness(1.15);
		}
	
		8% {
			opacity: 0.3;
			filter: brightness(0.9);
		}
	
		11% {
			opacity: 0.48;
			filter: brightness(1.1);
		}
	
		14% {
			opacity: 0.34;
			filter: brightness(0.95);
		}
	
		16% {
			opacity: 0.52;
			filter: brightness(1.2);
		}
	
		18% {
			opacity: 0.28;
			filter: brightness(0.85);
		}
	
		20% {
			opacity: 0.9;
			filter: brightness(1.08);
		}
	
		24% {
			opacity: 0.4;
			filter: brightness(1);
		}
	
		100% {
			opacity: 0.4;
			filter: brightness(1);
		}
	}

	/* PC-02. Keyframes: hud-frame-flicker-after（右下HUDフレームの明滅） */
	@keyframes hud-frame-flicker-after {
		0% {
			opacity: 0.32;
			filter: brightness(0.95);
		}
	
		4% {
			opacity: 0.22;
			filter: brightness(0.8);
		}
	
		7% {
			opacity: 0.44;
			filter: brightness(1.08);
		}
	
		10% {
			opacity: 0.28;
			filter: brightness(0.9);
		}
	
		13% {
			opacity: 0.4;
			filter: brightness(1.05);
		}
	
		17% {
			opacity: 0.24;
			filter: brightness(0.85);
		}
	
		19% {
			opacity: 0.9;
			filter: brightness(1.12);
		}
	
		22% {
			opacity: 0.3;
			filter: brightness(0.95);
		}
	
		26% {
			opacity: 0.34;
			filter: brightness(1);
		}
	
		100% {
			opacity: 0.34;
			filter: brightness(1);
		}
	}


	.section.is-stacked:has(+ .is-stacked) .section__product-name {
		opacity: 1;
		pointer-events: auto;
		cursor: pointer; 
	}

	.section__inner {
		place-items: center;
	}

	.js-stack-section .section__inner {
		padding: 5dvh 5dvw;
	}


	.scene-showcase-wrapper {
		margin: auto; 
		aspect-ratio: 1728 / 704; 
		max-height: 90dvh; 
		max-width: 90dvw; 
		
	}

	.scene-showcase {
		
		align-items: start;
		grid-template-columns: 35fr 65fr;
		column-gap: clamp(40px, calc(100vw * 100 / 1920) , 100px); 
		row-gap: clamp(20px, calc(100vw * 40 / 1920) , 40px); 
	}


	.scene-showcase__text {
		display: flex;
		flex-direction: column;
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		align-self: stretch;
	}

	.scene-showcase__scene-title {
		order: 1;
	}


	.scene-showcase__paragraph {
		line-height: 1.2; 
		font-size: 12px; 
	}


	@container (max-height: 250px) {
		.scene-showcase__paragraph {
			line-height: 1.2;
			font-size: 12px; 
		}
	}

	@container (min-height: 400px) {
		.scene-showcase__paragraph {
			line-height: 1.8;
			font-size: 14px; 
		}
	}

	@container (min-height: 560px) {
		.scene-showcase__paragraph {
			line-height: 2; 
			font-size: 16px; 
		}
	}

	@container (min-height: 800px) {
		.scene-showcase__paragraph {
			line-height: 2.5; 
		}
	}

	.scene-showcase__product-detail {
		--text-frame-size: 30px;
		--text-frame-image-size: 60px;
		--text-frame-offset: -10px;
		--text-frame-padding: 5dvh;
		--text-frame-opacity: 0.5;
		order: 2;
		display: grid;
		gap: 10px;
		margin-top: auto;
	}

	@container (max-height: 250px) {
		.scene-showcase__product-detail {
			gap: 10px;
		}
	}

	@container (max-height: 400px) {
		.scene-showcase__product-detail {
			gap: 15px;
		}
	}

	@container (min-height: 560px) {
		.scene-showcase__product-detail {
			gap: 20px;
		}
	}

	.scene-showcase__product-name {
		padding: var(--text-frame-padding) 0 0; 
		position: relative; 
	}

	.scene-showcase__body {
		padding: 0 0 var(--text-frame-padding); 
		position: relative; 
	}



	.scene-showcase__scene-image {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}


	.scene-showcase__figure {
		height: 100%; 
		aspect-ratio: 3 / 2;
	}

	.scene-showcase__image {
		
	}

	.scene-showcase__product-thumbnail {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}


	.page-backcover .section__inner {
		height: fit-content; 
		gap: 40px; 
	}



	
	.page-backcover__content {
		--page-backcover-column-gap: 40px;

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--page-backcover-column-gap);
		row-gap: 40px;
	}

	.page-backcover__credit {
		grid-column: 1 / -1;
		margin: auto;
	}

	.page-backcover__banner-item {
		min-width: 0;
	}

	.page-backcover__banner-link {
		display: block;
		width: 100%;
	}

	/*
		バナーが1つだけの場合
		バナー項目は2カラム分の領域を使用し、
		リンクを1カラム相当の幅で中央配置する
	*/
	.page-backcover__content:not(
		:has(
			> .page-backcover__banner-item
			+ .page-backcover__banner-item
		)
	)
	> .page-backcover__banner-item {
		grid-column: 1 / -1;
	}

	.page-backcover__content:not(
		:has(
			> .page-backcover__banner-item
			+ .page-backcover__banner-item
		)
	)
	> .page-backcover__banner-item
	> .page-backcover__banner-link {
		width: calc(
			(100% - var(--page-backcover-column-gap)) / 2
		);

		margin-inline: auto;
	}




}










@media only screen and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.section {
		transition-duration: 0.01ms;
	}
}