@charset "UTF-8";
/* =========================================================
	 黒執事 20th Anniversary 特設サイト
	 - パララクスなし / レスポンシブ対応
	 - ヘッダー・フッター・解析タグはテンプレHTMLを流用
	 - 見出し／ナビ：PDF準拠の透過PNG画像
	 - 額縁：PDF準拠の画像フレーム（border-image 9スライス）
	 - 銘板：Name・Date行のみ左揃え／グッズボタンはPDF準拠の1枚画像
	 - 枠内ビジュアルは白プレースホルダー（後で差し替え）
	 ========================================================= */

/* ---- 基本トーン ---- */
#contents {
	background: #000;
	color: #f4f4f4;
	overflow-x: hidden;
}
.kuro {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
	line-height: 1.9;
	letter-spacing: .02em;
}
.kuro img { max-width: 100%; height: auto; display: block; }
.kuro a { color: inherit; text-decoration: none; }
@media screen and (min-width: 768px) {
	.kuro-sec a { transition: opacity 0.5s; }
	.kuro-sec a:hover { opacity: 0.7; }
}

/* ---- レイアウト共通コンテナ ---- */
.kuro-sec {
	max-width: 960px;
	margin: 0 auto;
	padding: 70px 20px 40px;
	text-align: center;
	scroll-margin-top: 20px;
}

/* =========================================================
	 キービジュアル
	 ========================================================= */
.kuro-kv {
	background: #000;
	text-align: center;
	padding: 30px 20px 24px;
}
.kuro-kv__logo {
	max-width: 460px;
	margin: 0 auto;
}
	
/* =========================================================
	 グローバルナビ（ダマスク帯＋PDF準拠の画像ボタン）
	 ========================================================= */
.kuro-nav {
	background-color: #22314a;
	background-image: url(../images/damask.png);
	background-repeat: repeat;
	background-size: auto 140px;
	background-position: center;
}
.kuro-nav__list {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 26px;
	list-style: none;
	line-height: 0;
}
.kuro-nav__list li a {
	display: inline-block;
	transition: opacity .2s ease, transform .2s ease;
}
.kuro-nav__list li a img {
	height: 24px;	 /* ナビボタンの高さを揃える */
	width: auto;
}
.kuro-nav__list li a:hover { opacity: .7; transform: translateY(-1px); }

/* =========================================================
	 セクション見出し（PDF準拠の画像／透過PNG）
	 ========================================================= */
.kuro-h2 {
	margin: 0 0 34px;
	text-align: center;
}
.kuro-h2 img {
	display: inline-block;
	width: auto;
	max-width: 90%;
	max-height: 74px;
	height: auto;
}
#comics .kuro-h2 img,
#exhibition .kuro-h2 img { max-height: 74px; }

/* =========================================================
	 額縁（PDF納品データ準拠の画像フレーム）
	 ========================================================= */
.kuro-frame {
	max-width: 620px;
	margin: 0 auto 26px;
	padding: 0;
	border-style: solid;
	border-width: 32px 32px 26px 27px;
	border-color: transparent;
	border-image-source: url(../images/frame.png);
	border-image-slice: 163 147 136 151;
	border-image-repeat: stretch;
	border-image-width: 42px 42px 32px 32px;
}
.kuro-frame__inner {
	background: #fff;
	overflow: hidden;
	position: relative;
}
.kuro-frame__inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.59), inset -3px -3px 8px rgba(0, 0, 0, 0.48);
	pointer-events: none;
}
.kuro-frame__inner--ph {
	/* aspect-ratio: 3 / 4; */
	background: #fff;
}
/* .kuro-frame__inner--wide { aspect-ratio: 4 / 3; } */
.kuro-frame__inner img { width: 100%; height: 100%; object-fit: cover; }

/* ---- メッセージ（古紙）---- */
.kuro-frame--paper { max-width: 640px; }
.kuro-frame--paper .kuro-frame__inner {
	background-color: #e9e3d3;
	background-image: url("../images/paper.png");
	background-size: cover;
	padding: 46px 26px;
	/* box-shadow: inset 3px 3px 8px rgb(33 20 14 / 59%), inset -3px -3px 8px rgb(41 20 13 / 48%); */
}
.kuro-message {
	color: #1c1a17;
	font-size: 15px;
	line-height: 2;
	margin: 0 0 22px;
	text-align: center;
	font-weight: bold;
}
.kuro-message--sign {
	margin-top: 28px;
	margin-bottom: 0;
	letter-spacing: .25em;
}

/* ---- ムービー（レスポンシブ 16:9）---- */
#movie .kuro-frame {
	max-width: 912px;
}
.kuro-frame__inner--video { background: #000; }
.kuro-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.kuro-video iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* =========================================================
	 ネームプレート（銘板）
	 No行は中央、Name・Date行のみ左揃え
	 ========================================================= */
.kuro-plate {
	width: 400px;
	height: 120px;
	margin: 0 auto 22px;
	background-color: #e9e3d3;
	background-image: url(../images/tag_bg.png);
	background-size: cover;
	color: #000000;
	font-family: "Special Elite", "Courier New", "Courier", monospace;
	font-size: 14px;
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.kuro-plate p { margin: 2px 0; }
.kuro-plate__no { text-align: center; }	 /* No行は中央 */
.plate-inner{text-align: left;}

/* =========================================================
	 説明テキスト
	 ========================================================= */
.kuro-desc {
	max-width: 760px;
	margin: 22px auto 0;
	font-size: 14px;
	line-height: 1.95;
	color: #e7e7e7;
	text-align: center;
}

/* =========================================================
	 ボタン（購入 / POP UP STORE）
	 ========================================================= */
.kuro-btn-wrap { margin-top: 26px; text-align: center; }

/* コミックス：テキストボタン */
.kuro-btn {
	position: relative;
	display: block;
	max-width: 560px;
	margin: 0 auto;
	padding: 18px 46px;
	background: #111;
	border: 1px solid #6b6b6b;
	border-radius: 3px;
	color: #f4f4f4;
	transition: background .2s ease, border-color .2s ease;
}
/* .kuro-btn:hover { background: #262626; border-color: #cbb26b; } */
.kuro-btn__sub {
	display: block;
	font-family: "Special Elite", "Courier New", monospace;
	font-size: 14px;
	color: #cfcfcf;
	margin-bottom: 4px;
}
.kuro-btn__main {
	display: block;
	font-family: "Special Elite", "Courier New", monospace;
	font-size: 20px;
	letter-spacing: .04em;
}
.kuro-btn__arrow {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #d8d8d8;
}

/* グッズ：PDF準拠の1枚画像ボタン */
.kuro-btn-img {
	display: inline-block;
	max-width: 560px;
	width: 100%;
	transition: opacity .2s ease, transform .2s ease;
}
.kuro-btn-img img { width: 100%; height: auto; display: block; }
/* .kuro-btn-img:hover { opacity: .85; transform: translateY(-1px); } */

/* =========================================================
	 NEWS（お知らせ）
	 ========================================================= */
.kuro-news {
	max-width: 900px;
	margin: 0 auto;
	background: #d9d9d9;
	background-image: url(../images/news_bg.png);
	color: #111;
	padding: 26px 26px 30px;
	border: 1px solid #000;
	box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.kuro-news__title {
	text-align: center;
	margin: 0 0 18px;
	padding: 14px 0;
	line-height: 0;
	position: relative;
}
	.kuro-news__title::before{
		content: "";
		background-image: url(../images/news_tit_line1.png);
		background-repeat: repeat-x;
		position: absolute;
		top: -8px;
		left: 0;
		width: 100%;
		height: 8px;
	}
	.kuro-news__title::after{
		content: "";
		background-image: url(../images/news_tit_line2.png);
		background-repeat: repeat-x;
		position: absolute;
		bottom: -8px;
		left: 0;
		width: 100%;
		height: 8px;
	}
.kuro-news__title img {
	display: inline-block;
	width: auto;
	max-height: 52px;
	height: auto;
}
.kuro-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 360px;
	overflow-y: auto;
}
.kuro-news__list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 8px;
	border-bottom: 1px solid #b3b3b3;
	text-align: left;
	display: flex;
	justify-content: center;
	align-items: center;
}
.kuro-news__date {
	flex: 0 0 130px;
	background: #111;
	color: #fff;
	text-align: center;
	padding: 10px 6px;
	padding-top: 1em;
	font-size: 14px;
	letter-spacing: .05em;
	font-family: "Special Elite", "Courier New", "Courier", monospace;
}
.kuro-news__text {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.8;
	color: #1a1a1a;
	padding-top: 4px;
}

/* =========================================================
	 レスポンシブ（スマホ対応）
	 ========================================================= */
@media screen and (max-width: 768px) {
	.kuro-sec { padding: 50px 16px 30px; }

	.kuro-nav__list { gap: 8px 16px; padding: 10px 8px; width: 80vw; }
	.kuro-nav__list li a img { height: 16px; }

	.kuro-h2 img { max-height: 40px; }
	#comics .kuro-h2 img,
	#exhibition .kuro-h2 img { max-height: 38px; }

	.kuro-frame {
	border-width: 18px 17px 15px 17px;
	border-image-width: 18px 17px 15px 17px;
	}
	.kuro-frame--paper .kuro-frame__inner { padding: 30px 16px; }

	.kuro-message { font-size: 13px; line-height: 1.95; }

	.kuro-plate { font-size: 12px; }

	.kuro-desc { font-size: 13px; }

	.kuro-btn { padding: 16px 40px; }
	.kuro-btn__main { font-size: 16px; }

	.kuro-news { padding: 18px 14px 22px; }
	.kuro-news__title img { max-height: 40px; }
	.kuro-news__list li { flex-direction: column; gap: 8px; }
	.kuro-news__date { flex: 0 0 auto; align-self: flex-start; padding: 6px 14px; }
}

@media screen and (max-width: 420px) {
	.kuro-nav__list { gap: 7px 12px; }
	.kuro-nav__list li a img { height: 14px; }
	.kuro-h2 img { max-height: 34px; }
}