/* ---------- ベースファイル | ここから ---------- */

html {
	font-size: 16px;
}

/* フォントカラーは、使用頻度が多いものを選択する */

body {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1;
}

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

a[href^=tel] {
	-webkit-text-decoration: none;
	text-decoration: none;
}

a {
	-webkit-tap-highlight-color: transparent;
	color: inherit;
}

:where(:link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]),
:where(:visited,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]),
:where(area[href],
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
	cursor: pointer; /*
  - :where() は詳細度（CSSの強さ）が 0 になるので、上書きしやすくするため指定
  - :any-link は a と area のリンクをまとめて指せる
  - label[for] はクリックで入力にフォーカスするので pointer は分かりやすい
  */
}

:where(:-moz-any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
	cursor: pointer; /*
  - :where() は詳細度（CSSの強さ）が 0 になるので、上書きしやすくするため指定
  - :any-link は a と area のリンクをまとめて指せる
  - label[for] はクリックで入力にフォーカスするので pointer は分かりやすい
  */
}

:where(:any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
	cursor: pointer; /*
  - :where() は詳細度（CSSの強さ）が 0 になるので、上書きしやすくするため指定
  - :any-link は a と area のリンクをまとめて指せる
  - label[for] はクリックで入力にフォーカスするので pointer は分かりやすい
  */
}

:where(button,
[type=button],
[type=reset],
[type=submit]) {
	touch-action: manipulation;
}

:focus:not(:focus-visible) {
	outline: none;
}

:where(input,
select,
textarea) {
	font-size: 1rem; /* = 16px */
}

/* ~~~~~ コンテンツ量が少なく短いページ（404、サンクスページなど）でもフッターを最下部に表示する ここから ~~~~~  */

/* HTMLの階層構造で適宜クラス名は変更する */

.content-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}

/* ~~~~~ コンテンツ量が少なく短いページ（404、サンクスページなど）でもフッターを最下部に表示する ここまで ~~~~~ */

iframe {
	border: none;
}

img {
	image-rendering: auto;
}

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

/* ---------- ベースファイル | ここまで ---------- */

/* ---------- リセットCSS | ここから ---------- */

html {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	box-sizing: border-box;
	tab-size: 4; /* Prevent adjustments of font size after orientation changes in iOS */
	word-break: normal;
}

*,
::before,
::after {
	background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
	box-sizing: inherit;
	box-sizing: border-box;
}

::before,
::after {
	text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
	vertical-align: inherit;
}

* { /* Reset `padding` and `margin` of all elements */
	margin: 0;
	padding: 0;
}

/* # =================================================================
     # General elements
     # ================================================================= */

hr { /* Add the correct box sizing in Firefox */
	color: inherit; /* Show the overflow in Edge and IE */
	height: 0;
	overflow: visible; /* Correct border color in Firefox. */
}

details,
main {
	display: block; /* Render the `main` element consistently in IE. */
}

summary {
	display: list-item; /* Add the correct display in all browsers */
}

small {
	font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
	display: none; /* Add the correct display in IE */
}

abbr[title] {
	-webkit-text-decoration: underline dotted;
	border-bottom: none; /* Remove the bottom border in Chrome 57 */ /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
	text-decoration: underline;
	text-decoration: underline;
	text-decoration: underline dotted;
}

a {
	background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
	outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
	font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
	font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

table {
	border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
	text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
	border-style: none;
}

/* # =================================================================
     # Forms
     # ================================================================= */

input {
	border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: textfield;
	appearance: none; /* Correct the odd appearance in Chrome and Safari */
	outline-offset: -2px; /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
	overflow: auto;
	resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
	font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
	font-weight: bold; /* Restore the font weight unset by the previous rule */
}

button {
	overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
	text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */

button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
	cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/* Replace focus style removed in the border reset above */

button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button; /* Correct the inability to style clickable types in iOS */
}

button,
input,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline-width: 0;
}

/* Style select like a standard input */

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select::-ms-expand {
	display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
	color: currentcolor; /* Internet Explorer 11+ */
}

legend {
	border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
	color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
	display: table; /* Correct the text wrapping in Edge and IE */ /* Correct the text wrapping in Edge and IE */
	max-width: 100%; /* Correct the text wrapping in Edge and IE */
	white-space: normal; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button { /* Correct the inability to style clickable types in iOS and Safari */
	-webkit-appearance: button;
	appearance: button;
	color: inherit;
	font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */

[disabled] {
	cursor: default;
}

/* # =================================================================
     # Specify media element style
     # ================================================================= */

img {
	border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */

progress {
	vertical-align: baseline;
}

/* # =================================================================
     # Accessibility
     # ================================================================= */

/* Specify the progress cursor of updating elements */

[aria-busy=true] {
	cursor: progress;
}

/* Specify the pointer cursor of trigger elements */

[aria-controls] {
	cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */

[aria-disabled=true] {
	cursor: default;
}

/* Remove default margin */

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

/* Remove default padding */

ul,
ol {
	list-style: none;
	padding: 0;
}

a {
	-webkit-text-decoration: none;
	color: inherit;
	text-decoration: none;
}

/* ---------- リセットCSS | ここまで ---------- */

.inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 78.125rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	width: 100%;
}

/* ---------- 各セクションのマスクアニメーション（X軸方向） -------------------------- */

.js-mask,
.js-fv-mask,
.js-mask-late {
	-webkit-mask-image: linear-gradient(90deg, #ffffff 0%,#ffffff 50%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #ffffff 0% 50%, transparent 100%);
	-webkit-mask-size: 200% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 200% 0%;
	mask-image: linear-gradient(90deg, #ffffff 0%,#ffffff 50%, transparent 100%);
	mask-image: linear-gradient(90deg, #ffffff 0% 50%, transparent 100%);
	mask-position: 200% 0%;
	mask-repeat: no-repeat;
	mask-size: 200% 100%;
}

.js-mask.is-open,
.js-fv-mask.is-open,
.js-mask-late.is-open {
	animation: mask 0.3s linear forwards;
}

/* -------------------- MVテキストのマスクエフェクト ------------------------- */

.js-text-mask,
.js-fv-text-mask,
.js-text-mask-single {
	--translateX: 0px;
	opacity: 0;
	overflow: hidden;
	position: relative;
	transform: translateY(1.25rem);
	visibility: hidden;
}

.js-text-mask::before,
.js-fv-text-mask::before,
.js-text-mask-single::before {
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateX(var(--translateX));
	width: 100%;
}

.js-text-mask.js-text-mask-black::before,
.js-fv-text-mask.js-text-mask-black::before,
.js-text-mask-single.js-text-mask-black::before {
	background-color: #190000;
}

.js-text-mask.js-text-mask-white::before,
.js-fv-text-mask.js-text-mask-white::before,
.js-text-mask-single.js-text-mask-white::before {
	background-color: #ffffff;
}

.js-text-mask.js-text-mask-green::before,
.js-fv-text-mask.js-text-mask-green::before,
.js-text-mask-single.js-text-mask-green::before {
	background-color: var(--theme);
}

/* ---------- 1文字ずつ下からフェードイン（js-split-up） ---------- */

.js-split-up {
	line-height: 1;
	overflow: hidden;
}

.js-split-up span {
	display: inline-block;
}

/* prefers-reduced-motion 対応（共通絶対ルール） */

/* ===========================================
   catalog-hero（下層ページ共通ヒーロー）
=========================================== */

.catalog-hero {
	padding-bottom: 2.5rem;
	padding-top: 3.75rem;
}

.catalog-hero__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
}

.catalog-hero__lead {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	margin-top: 1.25rem;
	text-align: center;
}

.catalog-hero__link {
	-webkit-text-decoration: underline;
	color: #2563eb;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: opacity 0.3s;
}

/* ===========================================
   catalog-list（アニメカード一覧）
=========================================== */

.catalog-list {
	padding-bottom: 6.25rem;
	padding-top: 1.25rem;
}

.catalog-list__cards {
	display: flex;
	flex-direction: column;
	row-gap: 2.5rem;
}

/* ===========================================
   catalog-card（アニメ 1 件）
=========================================== */

.catalog-card {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	padding-bottom: 1.875rem;
	padding-left: 1.875rem;
	padding-right: 1.875rem;
	padding-top: 1.875rem;
}

.catalog-card__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem;
}

.catalog-card__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.catalog-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.catalog-card__tag {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 100vmax;
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.3125rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.3125rem;
	white-space: nowrap;
}

.catalog-card__desc {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-top: 0.9375rem;
}

/* ===========================================
   プレビューステージ
=========================================== */

.catalog-card__preview {
	margin-top: 1.25rem;
}

.catalog-card__stage {
	align-items: center;
	aspect-ratio: 16/9;
	background-color: #f5f5f3;
	background-image: linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 6.25rem 6.25rem, 6.25rem 6.25rem, 1.25rem 1.25rem, 1.25rem 1.25rem;
	border-radius: 0.375rem;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.preview-box {
	align-items: center;
	background-color: #333333;
	border-radius: 0.375rem;
	color: #ffffff;
	display: flex;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	height: 7.5rem;
	justify-content: center;
	letter-spacing: 0.08em;
	width: 7.5rem;
}

.preview-text {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* js-mask デモ画像枠 */

.preview-photo {
	aspect-ratio: 16/9;
	border-radius: 0.375rem;
	max-width: 25rem;
	overflow: hidden;
	width: 100%;
}

.preview-photo img {
	-o-object-fit: cover;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* パララックス用にステージの余白と角丸をフレーム側へ */

.catalog-card__stage--flush {
	padding: 0;
}

/* 暗背景ステージ（js-split-texts-white 用） */

.catalog-card__stage--dark {
	background-color: #222222;
}

/* 分割 span（split 系プレビュー共通） */

.preview-text span {
	display: inline-block;
}

/* タイプライターのカーソル */

.preview-text--typewriter {
	min-height: 1em;
}

.preview-text--typewriter.is-typing::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1em;
	margin-left: 0.125rem;
	vertical-align: -0.125rem;
	width: 1px;
}

/* js-fadeIn-text-split デモ（数値カード 3 枚。アニメ値は code-stock/fade-in/js-fadeIn-text-split 準拠・見た目はカタログ用） */

.preview-stats {
	align-items: stretch;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
}

.preview-stats__item {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.375rem;
	display: flex;
	flex-direction: column;
	padding-bottom: 1.125rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1.125rem;
	row-gap: 0.5rem;
}

.preview-stats__title {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.preview-stats__value {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* 文字分割 span（js-preview-split が生成。stock の .js-char 相当。y 移動のため inline-block 必須） */

.preview-stats__value span {
	display: inline-block;
}

/* js-parallax デモ（画像 110% + overflow hidden 枠） */

.preview-parallax {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

.preview-parallax img {
	-o-object-fit: cover;
	display: block;
	height: 110%;
	max-width: none;
	max-width: initial;
	object-fit: cover;
	width: 100%;
}

/* js-parallax-element デモ（要素単独移動・動く要素と動かない要素を並置） */

.preview-parallax-compare {
	align-items: center;
	display: flex;
	gap: 5rem;
	justify-content: center;
}

.preview-parallax-compare__col {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.preview-parallax-compare__label {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.preview-badge {
	align-items: center;
	background-color: #707070;
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	height: 6.875rem;
	justify-content: center;
	letter-spacing: 0.08em;
	width: 6.875rem;
}

.preview-badge--move {
	background-color: #5b9b12;
}

/* ローディングデモ ステージ背景の「メインコンテンツ」テキスト（ローディングオーバーレイの下層。stage は既に flex-center のため自動で上下左右中央） */

.preview-main {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}

/* ローディングデモ（ステージ内オーバーレイ） */

.preview-loading {
	align-items: center;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
	justify-content: center;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 1s ease;
	z-index: 2;
}

.preview-loading--simple {
	background-color: #333333;
}

.preview-loading--percent {
	background-color: #333333;
}

/* simple-progress-bar（幅 0→100% を 3s 線形） */

.preview-loading-bar {
	height: 2px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.preview-loading-bar__progress {
	background-color: #d4e2ed;
	height: 100%;
	width: 0%;
}

.preview-loading-bar__progress.is-run {
	animation: loading-animation 3s linear forwards;
}

/* progress-bar-percent（% カウント + グラデーションバー） */

.preview-loading__count-wrapper {
	align-items: center;
	display: flex;
	justify-content: center;
}

.preview-loading__count {
	color: #5762ff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

.preview-loading__count-percent {
	color: #5762ff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

.preview-loading__progress {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 100vmax;
	height: 0.25rem;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.preview-loading__bar {
	background-image: linear-gradient(75deg, #5762ff 0%, #ff00e5 100%);
	height: 100%;
	left: 0;
	position: absolute;
	width: 0%;
}

/* skip-loading（テキストクロスフェード + ゴールドアクセント・実物同速再生） */

/* 4 つの skip-text を同位置に重ねてクロスフェードするため grid で 1 セルに集約する */

.preview-loading--skip {
	align-items: center;
	background-color: #0d0d0d;
	display: grid;
	justify-items: center;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	place-items: center; /* code-stock 準拠: 実物の is-done フェード 1.2s（共通 .preview-loading の 1s を上書き） */
	transition: opacity 1.2s ease; /* SP はステージが低くテキスト 4 行とスキップボタンが衝突するため、テキスト重心を上へ逃がす */
}

.preview-loading__skip-text {
	color: #f5f0e6;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	grid-column: 1;
	grid-row: 1; /* 「ー」等の行頭禁則を厳格化（自然折返し時の単語中間割れ防止） */
	line-break: strict;
	line-height: 2;
	opacity: 0;
	text-align: center;
	transition: opacity 1.4s ease, translate 1.4s ease; /* code-stock 準拠: 下からの浮き上がり + 1.4s クロスフェード */
	translate: 0 0.75rem;
}

.preview-loading__skip-text.is-active {
	opacity: 1;
	translate: 0 0;
}

.preview-loading__skip-btn {
	background-color: transparent;
	border: 1px solid #c9a961;
	border-radius: 100vmax;
	bottom: 1.25rem;
	color: #c9a961;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	max-width: 12.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.5rem;
	pointer-events: auto;
	position: absolute;
	right: 1.25rem;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: 100%;
}

.preview-loading__skip-btn:hover {
	background-color: #c9a961;
	color: #333333;
}

/* ===========================================
   select-dock（右下固定・現在の選択件数 + パネル開閉トリガー）
=========================================== */

.select-dock {
	bottom: 1.25rem;
	opacity: 0;
	position: fixed;
	right: 1.25rem;
	transform: translateY(5rem);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
	visibility: hidden;
	z-index: 50;
}

.select-dock.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.select-dock__toggle {
	align-items: center;
	background-color: #333333;
	border: none;
	border-radius: 100vmax;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	padding-bottom: 0.875rem;
	padding-left: 1.375rem;
	padding-right: 1.375rem;
	padding-top: 0.875rem;
	transition: opacity 0.3s;
}

.select-dock__count {
	color: #ffffff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
}

.select-dock__label {
	color: rgba(255, 255, 255, 0.75);
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-left: 0.8125rem;
	position: relative;
	white-space: nowrap;
}

/* 件数とラベルの区切り線（hr 相当は疑似要素で実装） */

.select-dock__label::before {
	background-color: rgba(255, 255, 255, 0.35);
	content: "";
	height: 0.75rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

/* ===========================================
   select-panel（選択中アニメーション一覧モーダル）
   - PC: 右下アンカーのカード型 / SP: 下部シート型
=========================================== */

.select-panel {
	background-color: #ffffff;
	border: none;
	border-radius: 0.75rem;
	bottom: 1.25rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	left: auto;
	margin: 0;
	max-height: min(37.5rem, 100dvh - 2.5rem);
	max-width: 26.25rem;
	overscroll-behavior: contain;
	padding: 0;
	position: fixed;
	right: 1.25rem;
	top: auto;
	width: calc(100% - 2.5rem);
}

.select-panel:not([open]) {
	display: none;
}

.select-panel::backdrop {
	background-color: rgba(0, 0, 0, 0.35);
}

/* パネル表示中は背面スクロールを固定（scroll 位置は overflow: hidden なら保持される） */

html.is-panel-open,
html.is-panel-open body {
	overflow: hidden;
}

.select-panel__head {
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 0.9375rem;
	justify-content: space-between;
	padding-bottom: 1.125rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.125rem;
}

.select-panel__title {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.select-panel__close {
	background: none;
	border: none;
	color: #707070;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.5rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.5rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.select-panel__body {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 0.9375rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 0.9375rem;
}

/* 依頼リストのセクション（カタログ選択 / ジェネレーター生成） */

.select-panel__section + .select-panel__section {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 1.25rem;
	padding-top: 1.125rem;
}

.select-panel__section-title {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
}

.select-panel__section-title + .select-panel__groups,
.select-panel__section-title + .select-panel__items {
	margin-top: 0.625rem;
}

.select-panel__group + .select-panel__group {
	margin-top: 1.125rem;
}

.select-panel__genre {
	background-color: #333333;
	border-radius: 0.25rem;
	color: #ffffff;
	display: inline-block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.3125rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.3125rem;
}

.select-panel__items {
	margin-top: 0.5rem;
}

.select-panel__item {
	padding-bottom: 0.625rem;
	padding-top: 0.625rem;
}

.select-panel__item-row {
	align-items: center;
	display: flex;
	gap: 0.625rem;
	justify-content: space-between;
}

.select-panel__item-actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
}

/* 実装対象メモ（カタログ選択・ジェネレーター生成の各行・任意入力・textarea） */

.select-panel__note {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.5;
	margin-top: 0.5rem;
	min-height: 3rem;
	padding-bottom: 0.4375rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.4375rem;
	resize: vertical;
	width: 100%;
}

.select-panel__note::-moz-placeholder {
	color: rgba(0, 0, 0, 0.35);
}

.select-panel__note::placeholder {
	color: rgba(0, 0, 0, 0.35);
}

/* ジェネレーター項目の要約（発火 / 移動 / duration 等） */

.select-panel__detail {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.6;
	margin-top: 0.375rem;
}

/* ジェネレーターページへの編集リンク */

.select-panel__edit {
	-webkit-text-decoration: none;
	background: none;
	border: 1px solid #b6ccf5;
	border-radius: 100vmax;
	color: #2563eb;
	flex-shrink: 0;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.375rem;
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	padding-top: 0.375rem;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
	white-space: nowrap;
}

.select-panel__item + .select-panel__item {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.select-panel__name {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.4;
	word-break: break-all;
}

.select-panel__remove {
	background: none;
	border: 1px solid #e5b4b4;
	border-radius: 100vmax;
	color: #b91c1c;
	cursor: pointer;
	flex-shrink: 0;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.375rem;
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	padding-top: 0.375rem;
	transition: background-color 0.3s, color 0.3s;
	white-space: nowrap;
}

.select-panel__empty {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.6;
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;
	text-align: center;
}

.select-panel__actions {
	align-items: center;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding-bottom: 0.9375rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 0.9375rem;
}

.select-panel__check {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	accent-color: #333333;
	appearance: auto;
	cursor: pointer;
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
}

.select-panel__copy {
	background-color: #ffffff;
	border: 1px solid #333333;
	border-radius: 100vmax;
	color: #333333;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.6875rem;
	padding-left: 1.125rem;
	padding-right: 1.125rem;
	padding-top: 0.6875rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.select-panel__copy--parts {
	background-color: transparent;
	border: 1px solid #333333;
	color: #333333;
	font-weight: 500;
}

.select-panel__copy:disabled,
.select-panel__copy--parts:disabled,
.select-panel__clear:disabled {
	cursor: default;
	opacity: 0.4;
}

.select-panel__clear {
	background: none;
	border: none;
	color: #707070;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-left: auto;
	padding-bottom: 0.625rem;
	padding-left: 0.3125rem;
	padding-right: 0.3125rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

/* すべてクリアの 2 段階確認状態（1 回目クリックで文言変更 + 赤強調） */

.select-panel__clear.is-confirm {
	color: #b91c1c;
	font-weight: 700;
}

.select-panel__status {
	color: #15803d;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.5;
	padding-bottom: 0.75rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 0;
}

.select-panel__status:empty {
	display: none;
}

.select-panel__status.is-error {
	color: #b91c1c;
}

/* ===========================================
   コントロール（再生・選択）
=========================================== */

.catalog-card__controls {
	align-items: center;
	display: flex;
	gap: 0.9375rem;
	margin-top: 0.9375rem;
}

.catalog-card__replay {
	background-color: #333333;
	border: none;
	border-radius: 100vmax;
	color: #ffffff;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.625rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
}

.catalog-card__select {
	align-items: center;
	background-color: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 100vmax;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.625rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 0.625rem;
	transition: background-color 0.3s, border-color 0.3s, opacity 0.3s;
}

.catalog-card__select input {
	clip: rect(0 0 0 0);
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.catalog-card__select span {
	font-size: 0;
}

.catalog-card__select span::before {
	content: "選択";
	font-size: 0.8125rem;
}

.catalog-card__select:has(input:checked) {
	background-color: #1e3a8a;
	border-color: #1e3a8a;
}

.catalog-card__select:has(input:checked) span::before {
	content: "選択中";
}

/* shine-effect デモ用 CTA ボタン（お申し込みはこちらから） */

.preview-cta {
	align-items: center;
	background: linear-gradient(135deg, #5b9b12 0%, #4a8f10 100%);
	border: none;
	border-radius: 100vmax;
	box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.15);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-width: 18.75rem;
	overflow: hidden;
	padding-bottom: 1.25rem;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: 1.25rem;
	position: relative;
}

.preview-cta__text {
	color: #ffffff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	position: relative;
}

/* shine-effect（code-stock/shine-effect/scss.md 準拠。キラーん光沢帯） */

.shine-effect {
	animation: shine-effect 2s ease-in-out infinite;
	background-color: rgba(255, 255, 255, 0.9);
	height: 100%;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: -9.375rem;
	transform: rotate(45deg);
	width: 3.125rem;
}

/* glitch-img-layers（code-stock/glitch/glitch-img-layers/scss.md 準拠。画像シフト型・強グリッチ） */

.glitch-img {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.glitch-img img {
	-o-object-fit: cover;
	display: block;
	height: 100%;
	object-fit: cover;
	position: relative;
	width: 100%;
	z-index: 1;
}

.glitch-img__layers {
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.glitch-img__layer {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.glitch-img__layer::before {
	background-image: var(--glitch-src);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.glitch-img__layer:nth-child(1) {
	transform: translateX(-5%);
}

.glitch-img__layer:nth-child(1)::before {
	animation: glitch-anim-1 2s infinite linear alternate;
}

.glitch-img__layer:nth-child(2) {
	transform: translateX(3%) translateY(3%);
}

.glitch-img__layer:nth-child(2)::before {
	animation: glitch-anim-2 2.3s -0.8s infinite linear alternate;
}

.glitch-img__layer:nth-child(3) {
	transform: translateX(5%);
}

.glitch-img__layer:nth-child(3)::before {
	animation: glitch-anim-flash 1s infinite linear;
}

/* glitch-blend-mode（code-stock/glitch/glitch-blend-mode 準拠。純グリッチ・即発火版） */

.glitch-mv-type-01 {
	--glitch-width: 100%;
	--glitch-height: 100%;
	--gap-horizontal: 5px;
	--gap-vertical: 5px;
	--time-anim: 0.8s;
	--delay-anim: 0.2s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: overlay;
	--blend-mode-5: overlay;
	--blend-color-1: #6100ff;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: #00fff0;
	--blend-color-5: #cc00ff;
}

.glitch-preview {
	height: 100%;
	position: relative;
	width: 100%;
}

.glitch {
	height: var(--glitch-height);
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: var(--glitch-width);
}

.glitch__img {
	background-blend-mode: var(--blend-mode-1);
	background-color: #333;
	height: calc(100% + var(--gap-vertical) * 2);
	left: calc(-1 * var(--gap-horizontal));
	position: absolute;
	top: calc(-1 * var(--gap-vertical));
	transform: translate3d(0, 0, 0);
	width: calc(100% + var(--gap-horizontal) * 2);
}

.glitch__img:nth-child(n+2) {
	animation-delay: var(--delay-anim);
	animation-duration: var(--time-anim);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	opacity: 0;
}

.glitch__img:nth-child(2) {
	animation-name: glitch-anim-1;
	background-blend-mode: var(--blend-mode-2);
	background-color: var(--blend-color-2);
}

.glitch__img:nth-child(3) {
	animation-name: glitch-anim-2;
	background-blend-mode: var(--blend-mode-3);
	background-color: var(--blend-color-3);
}

.glitch__img:nth-child(4) {
	animation-name: glitch-anim-3;
	background-blend-mode: var(--blend-mode-4);
	background-color: var(--blend-color-4);
}

.glitch__img:nth-child(5) {
	animation-name: glitch-anim-flash;
	background-blend-mode: var(--blend-mode-5);
	background-color: var(--blend-color-5);
}

/* bg-preview 共通（カード内ステージにスコープしたリスコープ版。実物は body 直下 / section 直下で全画面を占める） */

.bg-preview {
	align-items: center;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}

.bg-preview__title {
	color: #ffffff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	position: relative;
	text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.4);
	z-index: 1;
}

/* gradation-bg プレビュー（code-stock/anime/bg/gradation-bg 準拠。linear-gradient + background-position の 30s ヨーヨー） */

.bg-preview--gradation {
	animation: bg-preview-gradient 30s ease infinite;
	background: linear-gradient(45deg, red, yellow, blue);
	background-size: 400% 400%;
}

/* bg-slide プレビュー（code-stock/anime/bg/bg-slide 準拠。カタログ側は .is-open クラスで発火。
   実物は --clip 変数書換だが CSS Custom Property の補間は @property 宣言必須のため、カタログでは clip-path 直接切替） */

.bg-preview--slide {
	background-color: #333333;
}

.bg-preview--slide::before {
	background-color: rgba(255, 206, 0, 0.9);
	bottom: 0;
	clip-path: polygon(-25% 0px, -25% 0px, 0 50%, -25% 100%, -25% 100%, 0px 50%);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: clip-path 0.8s ease-in-out;
}

.bg-preview--slide.is-open::before {
	clip-path: polygon(-20% 0px, 100% 0px, 120% 50%, 100% 100%, -20% 100%, 0px 50%);
}

/* 再生ボタンでの再発火用。is-open remove 時に transition を殺して閉じ位置へ即スナップさせる（transition ありだと 0.8s かけて閉じるため、直後の再 add が全開→全開になり無反応に見える） */

.bg-preview--slide.is-reset::before {
	transition: none;
}

/* ===========================================
   コード参照アコーディオン（catalog.js が注入）
=========================================== */

.catalog-card__code {
	margin-top: 0.9375rem;
}

.code-view__toggle {
	align-items: center;
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 100vmax;
	color: #333333;
	cursor: pointer;
	display: inline-flex;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 0.625rem;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.625rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
}

/* 開閉状態を示す矢頭（開くと上向きに反転） */

.code-view__toggle::after {
	border-bottom: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	height: 0.4375rem;
	margin-top: -0.1875rem;
	transform: rotate(45deg);
	transition: transform 0.3s;
	width: 0.4375rem;
}

.code-view__toggle[aria-expanded=true]::after {
	margin-top: 0.1875rem;
	transform: rotate(225deg);
}

/* grid-template-rows 0fr → 1fr でアコーディオン開閉 */

.code-view__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s, visibility 0.3s;
	visibility: hidden;
}

.code-view__panel.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
}

.code-view__inner {
	overflow: hidden;
}

.code-view__items {
	display: flex;
	flex-direction: column;
	padding-top: 0.9375rem;
	row-gap: 0.9375rem;
}

.code-view__head {
	align-items: center;
	background-color: #333333;
	border-radius: 0.375rem 0.375rem 0 0;
	display: flex;
	gap: 0.625rem;
	justify-content: space-between;
	padding-bottom: 0.5rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 0.5rem;
}

.code-view__lang {
	color: #ffffff;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.code-view__copy {
	background-color: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 100vmax;
	color: #ffffff;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.4375rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 0.4375rem;
	transition: opacity 0.3s;
}

.code-view__pre {
	background-color: #1e2430;
	border-radius: 0 0 0.375rem 0.375rem;
	max-height: 25rem;
	overflow: auto;
	padding-bottom: 0.9375rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 0.9375rem;
}

.code-view__code {
	color: #e5e7eb;
	display: block;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1.7;
	white-space: pre;
}

/* ===========================================
   footer
=========================================== */

.footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-bottom: 1.875rem;
	padding-top: 1.875rem;
}

.footer__copyright {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

/* ===========================================
   gen（フェードイン ジェネレーター）
=========================================== */

.gen {
	padding-bottom: 6.25rem;
	padding-top: 2.5rem;
}

/* カタログページ最下部に置くためのセクション見出し */

.gen__title {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	padding-top: 2.5rem;
}

.gen__lead {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-top: 0.625rem;
}

.gen__layout {
	grid-gap: 2.5rem;
	align-items: start;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr 22.5rem;
	margin-top: 1.875rem;
}

/* プレビュー（カタログカードと同じ方眼ステージ） */

.gen__preview {
	position: sticky;
	top: 5.625rem;
}

.gen__stage {
	align-items: center;
	aspect-ratio: 16/9;
	background-color: #f5f5f3;
	background-image: linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 6.25rem 6.25rem, 6.25rem 6.25rem, 1.25rem 1.25rem, 1.25rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 0.375rem;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

/* .preview-box の display: flex が hidden 属性（UA の display: none）を上書きするため明示 */

.gen__stage .preview-box[hidden] {
	display: none;
}

.gen__preview-foot {
	align-items: center;
	display: flex;
	gap: 0.9375rem;
	margin-top: 0.9375rem;
}

.gen__play {
	background-color: #333333;
	border: none;
	border-radius: 100vmax;
	color: #ffffff;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.625rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
}

.gen__warn {
	color: #b45309;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.6;
	margin-top: 0.625rem;
}

/* コントロールフォーム */

.gen__form {
	display: flex;
	flex-direction: column;
}

.gen__row {
	border: none;
	margin: 0;
	padding: 0;
	transition: opacity 0.3s;
}

.gen__row + .gen__row {
	margin-top: 1.25rem;
}

.gen__row.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.gen__row-label {
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.gen__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.gen__choice {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 100vmax;
	color: #333333;
	cursor: pointer;
	display: inline-flex;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.5625rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5625rem;
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.gen__choice input {
	clip: rect(0 0 0 0);
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.gen__choice:has(input:checked) {
	background-color: #333333;
	border-color: #333333;
	color: #ffffff;
}

.gen__select {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 0.375rem;
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	margin-top: 0.5rem;
	padding-bottom: 0.625rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.625rem;
	width: 100%;
}

.gen__number {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 0.375rem;
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	margin-top: 0.5rem;
	padding-bottom: 0.625rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.625rem;
	width: 100%;
}

/* 角度ダイアル（角度 number 入力の視覚ピッカー。catalog.js の buildAngleDial が注入） */

.gen__dial {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	cursor: pointer;
	height: 3rem;
	margin-top: 0.5rem;
	position: relative;
	touch-action: none; /* タッチドラッグ中のスクロールを止めて pointermove を確実に受ける */
	width: 3rem;
}

/* 中心点 */

.gen__dial::before {
	background-color: #707070;
	border-radius: 50%;
	content: "";
	height: 0.25rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.25rem;
}

/* 角度を示すつまみ。--dial-x / --dial-y (単位ベクトル) を半径 rem(17) で外周へ配置 */

.gen__dial-knob {
	background-color: #2563eb;
	border-radius: 50%;
	height: 0.625rem;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(calc(0 * 1.0625rem - 50%), calc(0 * 1.0625rem - 50%));
	transform: translate(calc(var(--dial-x, 0) * 1.0625rem - 50%), calc(var(--dial-y, 0) * 1.0625rem - 50%));
	width: 0.625rem;
}

/* コード表示アコーディオン（中身のスタイルは _catalog.scss の code-view を共用） */

.gen__code {
	margin-top: 1.5625rem;
}

/* リスト追加 */

.gen__save {
	background-color: #f5f5f3;
	border-radius: 0.5rem;
	margin-top: 1.875rem;
	padding-bottom: 1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.25rem;
}

.gen__save-field + .gen__save-field {
	margin-top: 0.9375rem;
}

.gen__note-label {
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.gen__save-row {
	display: flex;
	gap: 0.625rem;
	margin-top: 0.625rem;
}

.gen__note {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 0.375rem;
	color: #333333;
	flex: 1;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.5;
	padding-bottom: 0.625rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.625rem;
}

textarea.gen__note {
	min-height: 3.75rem;
	resize: vertical;
}

.gen__add {
	background-color: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 100vmax;
	color: #ffffff;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.6875rem;
	padding-left: 1.375rem;
	padding-right: 1.375rem;
	padding-top: 0.6875rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.gen__edit-cancel {
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 100vmax;
	color: #707070;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.6875rem;
	padding-left: 1.125rem;
	padding-right: 1.125rem;
	padding-top: 0.6875rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

/* 生成リスト */

.gen__result {
	margin-top: 2.5rem;
}

.gen__result-title {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.gen-list {
	margin-top: 0.9375rem;
}

.gen-list__item {
	align-items: center;
	display: flex;
	gap: 0.9375rem;
	justify-content: space-between;
	padding-bottom: 0.875rem;
	padding-top: 0.875rem;
}

.gen-list__item + .gen-list__item {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 編集中の行はフォームへ読み戻し済みであることを示す */

.gen-list__item.is-editing {
	background-color: #eff6ff;
	border-radius: 0.375rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.gen-list__title {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.5;
	word-break: break-all;
}

.gen-list__detail {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.6;
	margin-top: 0.25rem;
}

.gen-list__actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
}

.gen-list__edit {
	background: none;
	border: 1px solid #b6cdf5;
	border-radius: 100vmax;
	color: #2563eb;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.375rem;
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	padding-top: 0.375rem;
	transition: background-color 0.3s, color 0.3s;
	white-space: nowrap;
}

.gen-list__remove {
	background: none;
	border: 1px solid #e5b4b4;
	border-radius: 100vmax;
	color: #b91c1c;
	cursor: pointer;
	flex-shrink: 0;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	padding-bottom: 0.375rem;
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	padding-top: 0.375rem;
	transition: background-color 0.3s, color 0.3s;
	white-space: nowrap;
}

.gen__empty {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-top: 0.9375rem;
}

.gen__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

/* 出力（コピー / 反映）は右下の依頼リストパネルへ一本化。ここは案内文のみ */

.gen__hint {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.6;
}

.gen__clear {
	background: none;
	border: none;
	color: #707070;
	cursor: pointer;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-left: auto;
	padding-bottom: 0.625rem;
	padding-left: 0.3125rem;
	padding-right: 0.3125rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.gen__status {
	color: #15803d;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.5;
	margin-top: 0.75rem;
}

.gen__status:empty {
	display: none;
}

.gen__status.is-error {
	color: #b91c1c;
}

/* 方眼紙背景（js-parallax-element 等・要素移動を視認しやすくする共通パーツ） */

.graph-paper {
	background-image: linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 6.25rem 6.25rem, 6.25rem 6.25rem, 1.25rem 1.25rem, 1.25rem 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ===========================================
   header（code-stock js/header 部分採用）
   - PC/SP 共通ドロワーメニュー（pc-nav なし）
   - ストックの mq('lg') ゲートを外し全幅でドロワー有効
=========================================== */

.header {
	background-color: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	height: 3.75rem;
	left: 0;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	position: fixed;
	right: 0;
	top: 0;
	transition: background-color 0.3s;
	width: 100%;
	z-index: 100;
}

.header__inner {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	height: 100%;
	justify-content: space-between;
	position: relative;
}

.header__logo {
	flex-shrink: 0;
}

.header__logo-link {
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.header__drawer {
	display: block;
}

.header__overlay {
	background-color: rgba(0, 0, 0, 0.6);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
}

/* ===========================================
   sp-nav（全幅共通ドロワー）
=========================================== */

.sp-nav { /* スクロールバー非表示 */
	-ms-overflow-style: none;
	background-color: #ffffff;
	bottom: 0;
	display: none;
	left: 0;
	overflow-y: auto;
	padding-bottom: 6.25rem;
	padding-left: 0;
	padding-right: 0;
	padding-top: 6.25rem;
	position: fixed;
	right: 0;
	scrollbar-width: none;
	top: 0;
	width: 100%;
	z-index: 11;
}

.sp-nav::-webkit-scrollbar {
	display: none;
}

.sp-nav__inner {
	margin-left: auto;
	margin-right: auto;
	max-width: -moz-max-content;
	max-width: max-content;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	width: 100%;
}

.sp-nav__items {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	text-align: center;
}

.sp-nav__item-link {
	color: #333333;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding-bottom: 0.625rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 0.625rem;
	transition: opacity 0.3s;
	white-space: nowrap;
}

/* ===========================================
   hamburger（全幅表示）
=========================================== */

.hamburger {
	cursor: pointer;
	display: inline-block;
	height: 2.5rem;
	position: relative;
	transition: opacity 0.3s;
	width: 2.5rem;
	z-index: 12;
}

.hamburger span {
	background-color: #333333;
	border-radius: 100vmax;
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: top 0.3s, transform 0.3s, width 0.3s, opacity 0.3s;
	width: 1.5rem;
}

.hamburger span:first-child {
	top: 40%;
}

.hamburger span:nth-child(2) {
	top: 50%;
}

.hamburger span:nth-child(3) {
	top: 60%;
}

.hamburger.is-active span:first-child {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 1.875rem;
}

.hamburger.is-active span:nth-child(2) {
	opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 1.875rem;
}

/* fixed ヘッダー分のコンテンツ押し下げ（header 高さ連動値のため同居） */

.content-wrap {
	padding-top: 3.75rem;
}

/* ===========================================
   top-intro
=========================================== */

.top-intro {
	padding-bottom: 3.75rem;
	padding-top: 5rem;
}

.top-intro__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
}

.top-intro__lead {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	margin-top: 1.875rem;
	text-align: center;
}

/* ===========================================
   top-usage
=========================================== */

.top-usage {
	padding-bottom: 3.75rem;
	padding-top: 3.75rem;
}

.top-usage__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
}

.top-usage__items {
	display: flex;
	gap: 1.875rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.top-usage__item {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	max-width: 20rem;
	padding-bottom: 1.875rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 1.875rem;
	width: 100%;
}

.top-usage__item-step {
	color: #707070;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

.top-usage__item-text {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-top: 0.9375rem;
}

/* ===========================================
   top-glossary
=========================================== */

.top-glossary {
	padding-bottom: 3.75rem;
	padding-top: 3.75rem;
}

.top-glossary__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
}

.top-glossary__lead {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.9;
	margin-top: 1.25rem;
	text-align: center;
}

.top-glossary__guide {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	margin-top: 2.5rem;
	padding-bottom: 1.5625rem;
	padding-left: 1.875rem;
	padding-right: 1.875rem;
	padding-top: 1.5625rem;
}

.top-glossary__guide-title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.top-glossary__guide-text {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-top: 0.75rem;
}

.top-glossary__guide-steps {
	list-style: decimal;
	margin-top: 0.9375rem;
	padding-left: 1.5rem;
}

.top-glossary__guide-step {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-top: 0.375rem;
}

.top-glossary__guide-step strong {
	color: #333333;
	font-weight: 700;
}

.top-glossary__guide-example {
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: 0.25rem;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-top: 1.125rem;
	padding-bottom: 0.75rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 0.75rem;
}

.top-glossary__guide-example-label {
	background-color: #333333;
	border-radius: 0.1875rem;
	color: #ffffff;
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin-right: 0.5rem;
	padding-bottom: 0.125rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.125rem;
}

.top-glossary__onoma {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	margin-top: 1.25rem;
	padding-bottom: 1.5625rem;
	padding-left: 1.875rem;
	padding-right: 1.875rem;
	padding-top: 1.5625rem;
}

.top-glossary__onoma-title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.top-glossary__onoma-text {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-top: 0.75rem;
}

.top-glossary__onoma-items {
	grid-gap: 0.375rem 1.875rem;
	display: grid;
	gap: 0.375rem 1.875rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 0.9375rem;
}

.top-glossary__onoma-item {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
}

.top-glossary__onoma-item strong {
	color: #333333;
	font-weight: 700;
}

.top-glossary__items {
	grid-gap: 1.25rem;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 2.5rem;
}

.top-glossary__item {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	min-width: 0;
	padding-bottom: 1.25rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 1.25rem;
}

.top-glossary__item--wide {
	grid-column: 1/-1;
}

.top-glossary__item-term {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.top-glossary__item-desc {
	color: #707070;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-top: 0.625rem;
}

.top-glossary__item-desc code {
	background-color: rgba(0, 0, 0, 0.06);
	border-radius: 0.1875rem;
	color: #333333;
	display: inline-block;
	font-family: "Menlo", "Consolas", "Courier New", monospace;
	font-size: 0.75rem;
	padding-left: 0.3125rem;
	padding-right: 0.3125rem;
}

.top-glossary__item-desc-lead {
	font-size: 0.8125rem;
	line-height: 1.8;
}

.top-glossary__item-subtitle {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-top: 1.125rem;
}

.top-glossary__item-code {
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 0.25rem;
	color: #333333;
	font-family: "Menlo", "Consolas", "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1.7;
	margin-top: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	padding-top: 0.75rem;
}

.top-glossary__item-code code {
	background-color: transparent;
	color: inherit;
	display: block;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
	white-space: pre;
}

.top-glossary__kf-props {
	grid-gap: 0.9375rem;
	display: grid;
	gap: 0.9375rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 0.625rem;
}

.top-glossary__kf-prop {
	background-color: rgba(0, 0, 0, 0.03);
	border-radius: 0.25rem;
	padding-bottom: 0.875rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.875rem;
}

.top-glossary__kf-prop-name {
	color: #333333;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.top-glossary__kf-prop-text {
	font-size: 0.8125rem;
	line-height: 1.8;
	margin-top: 0.375rem;
}

.top-glossary__kf-prop-values {
	list-style: disc;
	margin-top: 0.375rem;
	padding-left: 1.125rem;
}

.top-glossary__kf-prop-value {
	font-size: 0.78125rem;
	line-height: 1.7;
	margin-top: 0.1875rem;
}

.top-glossary__item-params {
	list-style: disc;
	margin-top: 0.5rem;
	padding-left: 1.25rem;
}

.top-glossary__item-param {
	font-size: 0.8125rem;
	line-height: 1.8;
	margin-top: 0.25rem;
}

.top-glossary__item-param strong {
	color: #333333;
	font-weight: 700;
}

/* ===========================================
   top-category
=========================================== */

.top-category {
	padding-bottom: 6.25rem;
	padding-top: 3.75rem;
}

.top-category__title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
}

.top-category__cards {
	grid-gap: 1.5625rem;
	display: grid;
	gap: 1.5625rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 2.5rem;
}

.top-category__card-link {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	display: block;
	height: 100%;
	padding-bottom: 1.875rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
	padding-top: 1.875rem;
	transition: background-color 0.3s;
}

.top-category__card-title {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.top-category__card-text {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-top: 0.75rem;
}

.top-category__card-count {
	color: #707070;
	display: block;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-top: 0.9375rem;
}

/* 以下制作パートナー様追加ファイル（コンフリクト対策） */

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

.js-mask,
.js-fv-mask,
.js-mask-late {
	-webkit-mask-image: none !important;
	animation: none !important;
	mask-image: none !important;
}

.js-text-mask,
.js-fv-text-mask,
.js-text-mask-single {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

.js-text-mask::before,
.js-fv-text-mask::before,
.js-text-mask-single::before {
	display: none !important;
}

.js-split-up span {
	opacity: 1 !important;
	transform: none !important;
}

.preview-loading-bar__progress.is-run {
	animation: none;
	width: 100%;
}

.shine-effect {
	animation: none;
}

.glitch-img__layer::before {
	animation: none !important;
}

.glitch__img {
	animation: none !important;
}

}

@media (any-hover: hover) {

.catalog-hero__link:hover {
	opacity: 0.7;
}

.select-dock__toggle:hover {
	opacity: 0.8;
}

.select-panel__close:hover {
	opacity: 0.7;
}

.select-panel__edit:hover {
	background-color: #2563eb;
	color: #ffffff;
}

.select-panel__remove:hover {
	background-color: #b91c1c;
	color: #ffffff;
}

.select-panel__copy:not(:disabled):hover,
.select-panel__copy--parts:not(:disabled):hover,
.select-panel__clear:not(:disabled):hover {
	opacity: 0.7;
}

.catalog-card__replay:hover {
	opacity: 0.7;
}

.catalog-card__select:hover {
	opacity: 0.7;
}

.code-view__toggle:hover {
	opacity: 0.7;
}

.code-view__copy:hover {
	opacity: 0.7;
}

.gen__play:hover {
	opacity: 0.7;
}

.gen__choice:not(:has(input:checked)):hover {
	border-color: #333333;
}

.gen__add:hover {
	opacity: 0.7;
}

.gen__edit-cancel:hover {
	opacity: 0.7;
}

.gen-list__edit:hover {
	background-color: #2563eb;
	color: #ffffff;
}

.gen-list__remove:hover {
	background-color: #b91c1c;
	color: #ffffff;
}

.gen__clear:hover {
	opacity: 0.7;
}

.header__logo-link:hover {
	opacity: 0.6;
}

.sp-nav__item-link:hover {
	opacity: 0.6;
}

.hamburger:hover {
	opacity: 0.8;
}

.top-category__card-link:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

}

@media (max-width: 1200px) {

html {
	font-size: 1.3333333333vw;
}

}

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

html {
	font-size: 16px;
}

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

.inner {
	max-width: 33.75rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.catalog-hero {
	padding-bottom: 1.5625rem;
	padding-top: 2.5rem;
}

.catalog-hero__title {
	font-size: 1.625rem;
}

.catalog-hero__lead {
	font-size: 0.875rem;
	margin-top: 0.9375rem;
	text-align: left;
}

.catalog-list {
	padding-bottom: 3.75rem;
	padding-top: 0.9375rem;
}

.catalog-list__cards {
	row-gap: 1.5625rem;
}

.catalog-card {
	padding-bottom: 1.25rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	padding-top: 1.25rem;
}

.catalog-card__head {
	gap: 0.625rem;
}

.catalog-card__title {
	font-size: 1.0625rem;
}

.catalog-card__desc {
	margin-top: 0.625rem;
}

.catalog-card__preview {
	margin-top: 0.9375rem;
}

.catalog-card__stage {
	gap: 0.625rem;
}

.preview-box {
	font-size: 0.6875rem;
	height: 5rem;
	width: 5rem;
}

.preview-text {
	font-size: 1.125rem;
}

.preview-stats {
	gap: 0.625rem;
}

.preview-stats__item {
	padding-bottom: 0.625rem;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.625rem;
	row-gap: 0.25rem;
}

.preview-stats__title {
	font-size: 0.625rem;
}

.preview-stats__value {
	font-size: 0.875rem;
}

.preview-parallax-compare {
	gap: 1.875rem;
}

.preview-main {
	font-size: 0.875rem;
}

.preview-loading--skip {
	padding-bottom: 2.125rem;
}

.preview-loading__skip-text {
	font-size: 1rem; /* SP は幅が狭く PC 用の文節改行位置（br）が崩れるため自然折返しに戻す */
}

.preview-loading__skip-text br {
	display: none;
}

.preview-loading__skip-btn {
	bottom: 0.625rem;
	font-size: 0.875rem;
	max-width: 9.375rem;
	padding-bottom: 0.3125rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.3125rem;
	right: 0.625rem;
}

.select-dock {
	bottom: 0.9375rem;
	right: 0.9375rem;
}

.select-panel {
	border-radius: 1rem 1rem 0 0;
	bottom: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	max-height: min(80dvh, 100dvh - 3.75rem);
	max-width: none;
	right: 0;
	top: auto;
	width: 100%;
}

.catalog-card__controls {
	gap: 0.625rem;
}

.preview-cta {
	min-width: 15rem;
	padding-bottom: 1rem;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
	padding-top: 1rem;
}

.preview-cta__text {
	font-size: 0.9375rem;
}

.catalog-card__code {
	margin-top: 0.625rem;
}

.code-view__pre {
	max-height: 18.75rem;
}

.gen {
	padding-bottom: 3.75rem;
	padding-top: 1.25rem;
}

.gen__title {
	font-size: 1.1875rem;
	padding-top: 1.875rem;
}

.gen__lead {
	font-size: 0.8125rem;
}

.gen__layout {
	gap: 1.5625rem;
	grid-template-columns: 1fr;
}

.gen__preview {
	position: static;
}

.gen__stage {
	gap: 0.625rem;
}

.gen__code {
	margin-top: 1.25rem;
}

.gen__save-row {
	flex-direction: column;
}

.header {
	height: 3.125rem;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}

.header__inner {
	gap: 0.625rem;
}

.header__logo-link {
	font-size: 0.875rem;
}

.content-wrap {
	padding-top: 3.125rem;
}

.top-intro {
	padding-bottom: 2.5rem;
	padding-top: 3.125rem;
}

.top-intro__title {
	font-size: 1.75rem;
}

.top-intro__lead {
	font-size: 0.875rem;
	margin-top: 1.25rem;
	text-align: left;
}

.top-usage {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

.top-usage__title {
	font-size: 1.375rem;
}

.top-usage__items {
	flex-direction: column;
	gap: 0.9375rem;
	margin-top: 1.5625rem;
}

.top-usage__item {
	max-width: 100%;
	padding-bottom: 1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.25rem;
}

.top-usage__item-text {
	margin-top: 0.625rem;
}

.top-glossary {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

.top-glossary__title {
	font-size: 1.375rem;
}

.top-glossary__lead {
	margin-top: 0.9375rem;
	text-align: left;
}

.top-glossary__guide {
	margin-top: 1.5625rem;
	padding-bottom: 1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.25rem;
}

.top-glossary__guide-title {
	font-size: 1rem;
}

.top-glossary__onoma {
	margin-top: 0.9375rem;
	padding-bottom: 1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.25rem;
}

.top-glossary__onoma-title {
	font-size: 1rem;
}

.top-glossary__onoma-items {
	gap: 0.375rem;
	grid-template-columns: 1fr;
}

.top-glossary__items {
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin-top: 1.5625rem;
}

.top-glossary__item {
	padding-bottom: 1.125rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.125rem;
}

.top-glossary__item-term {
	font-size: 0.9375rem;
}

.top-glossary__item-desc {
	margin-top: 0.5rem;
}

.top-glossary__kf-props {
	gap: 0.625rem;
	grid-template-columns: 1fr;
}

.top-category {
	padding-bottom: 3.75rem;
	padding-top: 2.5rem;
}

.top-category__title {
	font-size: 1.375rem;
}

.top-category__cards {
	gap: 0.9375rem;
	grid-template-columns: 1fr;
	margin-top: 1.5625rem;
}

.top-category__card-link {
	padding-bottom: 1.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 1.25rem;
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}

@keyframes mask {

0% {
	-webkit-mask-position: 200% 0%;
	mask-position: 200% 0%;
}

100% {
	-webkit-mask-position: 0% 0%;
	mask-position: 0% 0%;
}

}

@keyframes loading-animation {

0% {
	width: 0%;
}

100% {
	width: 100%;
}

}

@keyframes shine-effect {

0% {
	opacity: 0;
	transform: scale(0) rotate(45deg);
}

80% {
	opacity: 0.5;
	transform: scale(0) rotate(45deg);
}

81% {
	opacity: 1;
	transform: scale(4) rotate(45deg);
}

100% {
	opacity: 0;
	transform: scale(50) rotate(45deg);
}

}

@keyframes glitch-anim-1 {

0% {
	clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
}

10% {
	clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}

20% {
	clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}

30% {
	clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}

40% {
	clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
}

50% {
	clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
}

60% {
	clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
}

70% {
	clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}

80% {
	clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}

90% {
	clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}

100% {
	clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
}

}

@keyframes glitch-anim-2 {

0% {
	clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
}

15% {
	clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}

25% {
	clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
}

30% {
	clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}

45% {
	clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
}

50% {
	clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
}

65% {
	clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}

75% {
	clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}

80% {
	clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}

95% {
	clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
}

100% {
	clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
}

}

@keyframes glitch-anim-flash {

0% {
	opacity: 0.2;
}

30%,100% {
	opacity: 0;
}

}

@keyframes glitch-anim-1 {

0% {
	clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	opacity: 1;
	transform: translate3d(var(--gap-horizontal), 0, 0);
}

2% {
	clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}

4% {
	clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}

6% {
	clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}

8% {
	clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}

10% {
	clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}

12% {
	clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}

14% {
	clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}

16% {
	clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}

18% {
	clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}

20% {
	clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}

21.9% {
	opacity: 1;
	transform: translate3d(var(--gap-horizontal), 0, 0);
}

22%,100% {
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	opacity: 0;
	transform: translate3d(0, 0, 0);
}

}

@keyframes glitch-anim-2 {

0% {
	clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	opacity: 1;
	transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
}

3% {
	clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}

5% {
	clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
}

7% {
	clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}

9% {
	clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
}

11% {
	clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
}

13% {
	clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}

15% {
	clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
}

17% {
	clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
}

19% {
	clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
}

20% {
	clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
}

21.9% {
	opacity: 1;
	transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
}

22%,100% {
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	opacity: 0;
	transform: translate3d(0, 0, 0);
}

}

@keyframes glitch-anim-3 {

0% {
	clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	opacity: 1;
	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
}

1.5% {
	clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
}

2% {
	clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
}

2.5% {
	clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}

3% {
	clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
}

5% {
	clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
}

5.5% {
	clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
}

7% {
	clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
}

8% {
	clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}

9% {
	clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
}

10.5% {
	clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
}

11% {
	clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
}

13% {
	clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
}

14% {
	clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
}

14.5% {
	clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
}

15% {
	clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
}

16% {
	clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}

18% {
	clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
}

20% {
	clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
}

21.9% {
	opacity: 1;
	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
}

22%,100% {
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	opacity: 0;
	transform: translate3d(0, 0, 0);
}

}

@keyframes glitch-anim-flash {

0%,5% {
	opacity: 0.2;
	transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
}

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

}

@keyframes bg-preview-gradient {

0% {
	background-position: 0% 50%;
}

50% {
	background-position: 100% 50%;
}

100% {
	background-position: 0% 50%;
}

}


/*# sourceMappingURL=style.css.map */