@charset "UTF-8";
/* =========================================================
   黒執事 20th Anniversary 特設サイト
   イントロ演出（260630_demo.html からの移植 / 追加スタイル）

   - base.css / base.html / base.js には一切変更を加えません
   - style.css（base.css）より後ろに読み込んでください
   - セレクタはすべて .kuro-intro 系にスコープしているため、
     デモ側の * リセットや section / a への素のスタイルは移植していません
   - デモのCSSネストは、対応ブラウザを選ばないようフラットに展開しています
   ========================================================= */

/* =========================================================
   0. 下地を黒に固定（白フェード防止・最重要）

   base.css は #contents にしか黒を指定していないため、
   body の地色は共通テンプレート（template2.0.css）の白のままです。
   各レイヤーを opacity で薄くすると、この白が透けて
   「白フェード」になってしまうので、html / body ごと黒で塗ります。
   ========================================================= */
html.kuro-intro-black,
html.kuro-intro-black body {
	background-color: #000;
}

/* =========================================================
   0-1. 本編のロック（イントロ表示中）
   ========================================================= */
html.is-kuro-intro,
html.is-kuro-intro body {
	overflow: hidden;
	height: 100%;
}

/* 本編（ヘッダー・コンテンツ・フッター）を伏せる。
   display:none ではなく visibility で伏せることで、
   共通テンプレートのフッターJSや解析タグの動作を妨げません。
   ここで opacity を使わないのがポイント：
   本編のフェードインは下の .kuro-curtain 側で行います */
html.is-kuro-intro #wp {
	visibility: hidden;
}

/* =========================================================
   0-2. 黒カーテン（全レイヤーの背面に常駐）

   ゲート／PV が薄くなる過程で必ずこの黒が見えるため、
   どのタイミングでも白が覗きません。
   最後にこのカーテン自体をフェードアウトさせることで、
   本編が「黒から浮かび上がる」切り替えになります。
   ========================================================= */
.kuro-curtain {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99800;
	background-color: #000;
	opacity: 1;
	pointer-events: none;
	transition: opacity 1.5s ease;
}

.kuro-curtain.is-hiding {
	opacity: 0;
}

/* =========================================================
   1. ゲート画面（音量注意の告知＋ENTER SITE）
   ========================================================= */
.kuro-gate {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
	opacity: 1;
	transition: opacity .6s ease;
}

.kuro-gate.is-hiding {
	opacity: 0;
	pointer-events: none;
}

.kuro-gate__content {
	max-width: 560px;
	width: 100%;
}

.kuro-gate__logo {
	max-width: 420px;
	width: 82%;
	margin: 0 auto 2rem;
}

.kuro-gate__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.kuro-gate__title {
	font-family: "Special Elite", "Courier New", "Courier", monospace;
	font-size: 1.5rem;
	line-height: 1.6;
	color: #f4f4f4;
	letter-spacing: .08em;
	margin: 0 0 1.6rem;
}

.kuro-gate__note {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
	font-size: .9rem;
	line-height: 1.9;
	color: #a0a0a0;
	margin: 0 0 2.5rem;
}

.kuro-gate__btn {
	font-family: "Special Elite", "Courier New", "Courier", monospace;
	background: transparent;
	color: #f4f4f4;
	border: 1px solid #f4f4f4;
	border-radius: 0;
	padding: 15px 50px;
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: .2em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: all .6s cubic-bezier(.25, 1, .5, 1);
}

.kuro-gate__btn:hover,
.kuro-gate__btn:focus-visible {
	background-color: #f4f4f4;
	color: #000;
	box-shadow: 0 0 20px rgba(255, 255, 255, .2);
	outline: none;
}

/* =========================================================
   2. オープニング動画レイヤー（全画面PV）
   ========================================================= */
.kuro-op {
	/* 映像の拡大率。既定は等倍＝トリミングなし。
	   縁のUIをどうしても隠したい場合のみ 1.02〜1.05 程度に上げます */
	--kuro-op-scale: 1;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99900;
	background-color: #000;
	display: none;
	pointer-events: none;   /* 動画への直接インタラクションを防ぐ */
	opacity: 1;
	transition: opacity 1s ease;
}

.kuro-op.is-active { display: block; }
.kuro-op.is-hiding { opacity: 0; }

/* ---- ステージ ----
   既定は等倍のため映像をトリミングしません。
   YouTubeのUIは「事前再生（プリロール）」と pointer-events: none で回避します。 */
.kuro-op__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;           /* 16:9 */
	min-height: 100vh;
	min-width: 177.77vh;       /* 16:9 */
	transform: translate(-50%, -50%) scale(var(--kuro-op-scale, 1));
	transform-origin: center center;
	pointer-events: none;
}

/* ---- レターボックス表示（映像を一切切らない）----
   CONFIG.fitMode を "contain" にすると付与されます。
   画面比率に関わらず全画面をそのまま表示し、余白は黒帯になります。 */
.kuro-op--contain .kuro-op__stage {
	width: min(100vw, 177.78vh);
	height: min(56.25vw, 100vh);
	min-width: 0;
	min-height: 0;
}

/* プレイヤー生成前後の iframe は既定で白地になるため、黒を明示 */
.kuro-op__stage,
.kuro-op iframe {
	background-color: #000;
}

.kuro-op iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	pointer-events: none;
}

/* ---- 遮蔽カバー（サムネイル・終了画面の露出防止）----
   終了／スキップの瞬間にこれを黒くかぶせてから
   プレイヤーを破棄するため、サムネイルが一切見えません */
.kuro-op__cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99902;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.kuro-op__cover.is-visible { opacity: 1; }

/* ---- スキップボタン ---- */
.kuro-op__skip {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 99901;
	pointer-events: auto;
	background: rgba(0, 0, 0, .6);
	color: #f4f4f4;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 0;
	padding: 10px 25px;
	font-size: .85rem;
	line-height: 1;
	font-family: "Special Elite", "Courier New", "Courier", monospace;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: all .6s cubic-bezier(.25, 1, .5, 1);
}

.kuro-op__skip:hover,
.kuro-op__skip:focus-visible {
	border-color: #f4f4f4;
	letter-spacing: .15em;
	outline: none;
}

/* =========================================================
   3. 背景ループ動画（無音・任意機能）
   ========================================================= */
.kuro-bgvideo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.kuro-bgvideo iframe {
	width: 100vw;
	height: 56.25vw;          /* 16:9 */
	min-height: 100vh;
	min-width: 177.77vh;      /* 16:9 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	opacity: .3;              /* 背景として馴染ませる */
}

.kuro-bgvideo::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle, transparent 20%, #000 90%);
}

/* 背景動画を使う場合のみ、本編の地を透過させて動画を透かす */
html.has-kuro-bgvideo #contents { background: transparent; }
html.has-kuro-bgvideo body { background: #000; }
html.has-kuro-bgvideo #wp { position: relative; z-index: 10; }

/* =========================================================
   4. レスポンシブ
   ========================================================= */
@media screen and (max-width: 768px) {
	.kuro-gate__title { font-size: 1.15rem; }
	.kuro-gate__note { font-size: .8rem; margin-bottom: 2rem; }
	.kuro-gate__btn { padding: 14px 38px; font-size: .95rem; }
	.kuro-op__skip {
		right: 16px;
		bottom: 20px;
		padding: 9px 18px;
		font-size: .78rem;
	}
}

/* =========================================================
   5. アクセシビリティ（動きを減らす設定）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.kuro-gate,
	.kuro-op,
	.kuro-gate__btn,
	.kuro-op__skip,
	.kuro-op__cover,
	.kuro-curtain { transition: none; }
}