@charset "utf-8";

/*
Theme Name: 映画『巨頭オ』 theme
Description: 映画『巨頭オ』 専用テーマ
Version: 1.0
*/

/*==========================================
 変数（色・フォント）
===========================================*/
:root {
	--color-bg: #000000;
	--color-bg-panel: #161616;
	--color-sidebar-bg: #808080;
	--color-red: #ed1b24;
	/* グレー地のサイドバーに置く赤（黒地の赤と同じトーンに見えるよう、やや暗くしている） */
	--color-red-on-gray: #bb151b;
	--color-gold: #e8c15a;
	--color-text: #a6a6a6;
	/* テキスト・罫線に使う白（黒背景でまぶしくならないよう少し暗めのグレー） */
	--color-line: #a6a6a6;
	--color-link: #0000ff;
	--color-link-visited: #551a8b;
	/* サイト全体でDotGothic16に統一（Noto Sans JPは廃止） */
	--font-body: 'DotGothic16', sans-serif;
	--font-retro: 'DotGothic16', sans-serif;
}

/*==========================================
 General
===========================================*/
html {
	font-size: 62.5%;
	height: 100%;
}
body {
	font-family: var(--font-body);
	font-weight: 500;
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	font-size: 1.5rem;
	background: var(--color-bg);
	color: var(--color-text);
	letter-spacing: 0;
}

a {
	color: var(--color-link);
	text-decoration: underline;
}
a:visited {
	color: var(--color-link-visited);
}
a:hover {
	opacity: 0.8;
}

h2 {
	font-size: 17px;
	line-height: 27.8px;
	margin: 0;
}
h3,
p {
	font-size: 15px;
	line-height: 16px;
}
p {
	color: var(--color-text);
	margin: 0 0 20px;
}

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-only {
	display: none;
}

/* margin utility */
.mgn00 { margin-bottom: 0 !important; }
.mgn10 { margin-bottom: 10px !important; }
.mgn20 { margin-bottom: 20px !important; }
.mgn30 { margin-bottom: 30px !important; }
.mgn40 { margin-bottom: 40px !important; }
.mgn50 { margin-bottom: 50px !important; }

/* 幅ユーティリティ */
.w1280 { max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.w1080 { max-width: 1080px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/*==========================================
 ローダー
===========================================*/
#loader {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: var(--color-bg);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
}
.noScroll {
	overflow: hidden;
}
#wrapper {
	/* display:noneではなくopacity:0で隠す。display:noneだと、キャッシュが効いた
	   高速な読み込み時にYouTubeの埋め込みが「幅0」の状態で初期化され、
	   低解像度のサムネイルが選ばれてぼやけてしまうため。 */
	opacity: 0;
}

/*==========================================
 画面四隅の破れ紙フレーム
 （ビューポートの四隅に常に固定表示。スクロール・ウィンドウリサイズの影響を受けない）
===========================================*/
#corner-frames {
	pointer-events: none;
}
.corner-frame {
	position: fixed;
	width: 140px;
	max-width: 20vw;
	height: auto;
	/* 予告編（.video-embed／991）より前面に出す */
	z-index: 993;
}
.corner-frame--top-left {
	top: 0;
	left: 0;
}
.corner-frame--top-right {
	top: 0;
	right: 0;
}
.corner-frame--bottom-left {
	bottom: 0;
	left: 0;
}
.corner-frame--bottom-right {
	bottom: 0;
	right: 0;
}
@media only screen and (max-width: 1024px) {
	.corner-frame {
		width: 90px;
		max-width: 32vw;
	}
}

/*==========================================
 画面全体のノイズ／グリッチ演出（薄いテレビノイズ風。クリック等は透過）
===========================================*/
#noise-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: overlay;
	background-repeat: repeat;
	background-size: 140px 140px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: noise-glitch 0.5s steps(2, end) infinite;
}
@keyframes noise-glitch {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-1%, 1%);
	}
	50% {
		transform: translate(1%, -1%);
	}
	75% {
		transform: translate(-1%, -1%);
	}
	100% {
		transform: translate(0, 0);
	}
}

/*==========================================
 最新情報ティッカー（メインコンテンツ先頭。サイドバーとは並ばない）
===========================================*/
.info-ticker {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	overflow: hidden;
	padding: 8px 16px;
	white-space: nowrap;
	background: #000000;
}
.info-ticker .ticker-icon {
	flex: none;
	height: 20px;
	width: auto;
}
.info-ticker .ticker-text {
	flex: 1;
	position: relative;
	margin: 0;
	height: 1.6em;
	line-height: 1.6em;
	font-family: var(--font-retro);
	color: var(--color-red);
	font-size: 1.4rem;
	overflow: hidden;
	white-space: nowrap;
}
.info-ticker .ticker-text .ticker-text-inner {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
}

/* SPメニュー開閉ボタン（ハンバーガー） */
.menu {
	display: none;
}

/*==========================================
 レイアウト：サイドバー（固定・全高）＋メイン
===========================================*/
#container {
	min-height: 100vh;
	position: relative;
}
/* bg-img.pngをコンテナ全体の背景に敷き詰め、半透明にして重ねる（コンテンツより背面に配置） */
#container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('images/bg-img.png');
	background-repeat: repeat;
	background-size: 300px 300px;
	opacity: 0.25;
	z-index: -1;
	pointer-events: none;
}

#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 260px;
	/* iOS Safariでは100vhがツールバーを含んだ高さになり、下端に固定した
	   #sidebar-footer（訪問者カウンター／コピーライト）が画面外に隠れてしまう。
	   dvh（実際に見えている高さ）を優先し、100vhは非対応ブラウザ向けの保険。 */
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: var(--color-sidebar-bg);
	/* 背景の手前に1px間隔（1pxの線＋1pxの隙間）の横線ボーダーを重ねる（格子状ではなく横線のみ） */
	background-image:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 2px);
	color: #222;
	padding: 24px 20px;
	box-sizing: border-box;
	border-right: 2px solid #333333;
	z-index: 500;
}
/* ロゴ／メニュー／SNSリンクは内部スクロール、訪問者数カウンター・コピーライトは画面下部に固定 */
#sidebar-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
#sidebar-footer {
	flex: none;
}
#sidebar .site-logo {
	margin: 0 0 24px;
	text-align: center;
}
#sidebar .site-logo a {
	color: var(--color-red-on-gray);
	font-weight: 500;
	font-size: 1.7rem;
	text-decoration: none;
}
#sidebar #main-nav ul li {
	margin-bottom: 14px;
	font-size: 1.3rem;
}
#sidebar #main-nav ul li a {
	color: var(--color-link);
	text-decoration: underline;
}
#sidebar #main-nav ul li a:visited {
	color: var(--color-link-visited);
}
#sidebar .sns-link {
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
#sidebar .sns-link a {
	display: inline-block;
	color: var(--color-link);
	font-family: var(--font-body);
	text-decoration: underline;
	font-size: 1.3rem;
}
/* Xのアイコン */
#sidebar .sns-link img {
	width: 24px;
	height: auto;
}
#sidebar .sns-link .tiktok-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border: 1px solid #000;
	background: #c0c0c0;
	background: #808080;
	color: #000;
	color: #0000ff;
	font-family: var(--font-body);
	font-size: 1.2rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow:
		inset 1px 1px #fff,
		inset -1px -1px #404040;
	margin-top: 12px;
}
#sidebar .sns-link .tiktok-link:hover {
	background: #000;
	color: #fff;
	color: #ed1b24;
}
#sidebar .visitor-counter {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 24px;
}
#sidebar .visitor-counter .counter-num {
	display: inline-flex;
	background: #000;
	border: 1px solid #808080;
	vertical-align: middle;
}
#sidebar .visitor-counter .counter-digit {
	display: inline-block;
	min-width: 1em;
	padding: 1px 4px;
	background: #000;
	color: var(--color-red);
	font-family: var(--font-retro);
	text-align: center;
	border-right: 1px solid #808080;
}
#sidebar .visitor-counter .counter-digit:last-child {
	border-right: none;
}
#sidebar .site-copyright {
	font-size: 0.9rem;
	color: #333;
	margin: 0;
}
#sp-menu-close {
	display: none;
}
#sp-menu-overlay {
	display: none;
}

#main-content {
	/* サイドバー幅260px + サイドバー側の余白80px */
	margin-left: 340px;
	/* ウィンドウ幅が狭くなっても右側に20pxの余白を残す */
	margin-right: 20px;
	max-width: 940px;
	min-height: 100vh;
/*	background: var(--color-bg);*/
	/* 上のアキはサイドバーの24pxから、ティッカー自身のpadding8pxを差し引いた16px */
	padding: 16px 0 80px;
	box-sizing: border-box;
}

/*==========================================
 見出し
===========================================*/
.section-title {
	color: var(--color-text);
	font-size: 17px;
	line-height: 27.8px;
	font-weight: 500;
	text-align: left;
	padding: 0 20px 0 0;
	margin: 0 0 30px;
}
/* ◆予告編 のH2のみ、これまでどおり赤のまま維持 */
.section-trailer .section-title {
	color: var(--color-red);
}
.section-divider {
	color: var(--color-line);
	text-align: left;
	/* ウィンドウ幅が狭くなっても折り返さず常に1行（はみ出た分は隠す） */
	white-space: nowrap;
	overflow: hidden;
	word-break: normal;
	letter-spacing: 0;
	margin: 60px 0;
}
/* 予告編／ストーリー／キャスト・コメント／チケット の下の区切り線 */
.section-hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: 40px 0;
}

/*==========================================
 ファーストビュー（画像1枚で表示。PC/SPは js-image-switch で自動切替）
===========================================*/
.section-fv {
	position: relative;
}
.fv-image {
	width: 100%;
	display: block;
}

/* 画像を囲む3重の枠線（内側から：3px離して1px線／1px離して2px線／1px離して1px線） */
.fv-frame {
	box-sizing: border-box;
}
.fv-frame--1 {
	padding: 3px;
	border: 1px solid #808080;
}
.fv-frame--2 {
	padding: 1px;
	border: 2px solid #808080;
}
.fv-frame--3 {
	padding: 1px;
	border: 1px solid #808080;
}

/*==========================================
 ムビチケ購入エリア
===========================================*/
.section-purchase {
	padding: 30px 20px;
	text-align: center;
}
#mvtk-widgets-container {
	margin: 0 auto;
}

/*==========================================
 公開日バナー
===========================================*/
.section-dates {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 20px 30px;
}
.date-badge {
	flex: 1;
	min-width: 220px;
	background: var(--color-bg-panel);
	border: 1px solid var(--color-red);
	text-align: center;
	padding: 16px;
	box-sizing: border-box;
}
.date-badge__date {
	color: var(--color-text);
	font-size: 1.9rem;
	font-weight: 500;
	margin: 0;
}
.date-badge__note {
	color: #999;
	font-size: 1.1rem;
	margin: 6px 0 0;
}

/*==========================================
 予告編／動画モーダル
===========================================*/
.section-trailer {
	/* 上下のアキを均一（どちらも60px）にする。
	   下は直後の <hr class="section-hr"> が上に40pxのmarginを持つため、
	   padding-bottomは20pxにして 20+40=60px で揃えている。 */
	padding: 60px 0 20px;
}
.video-wrap {
	max-width: 840px;
	margin: 0 auto;
}
/* 重なり順（下→上）：
     #noise-overlay 990 ／ .video-embed 991 ／ .corner-frame 993
     ／ MENUボタン・TOPへ戻るボタン・SPメニューの背景 995 ／ SPのサイドバー 996 ／ 動画モーダル 1000
   予告編はノイズ演出（990）より前面に出す必要があるが、固定表示のボタン類より
   前面に来てはいけないため、ボタン類はこれより大きい値にしている。 */
.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	/* #noise-overlay（z-index:990）が予告編動画の上に重なってぼやけて見えるのを防ぐ */
	z-index: 991;
}
.video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-placeholder {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000 url('images/img-bg.jpg') center / cover no-repeat;
	color: var(--color-text);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.video-placeholder__play {
	font-size: 3.9rem;
	color: var(--color-red);
}
.video-placeholder__text {
	text-align: center;
	font-weight: 500;
	font-size: 1.7rem;
	margin: 0;
	text-shadow: 0 0 6px #000;
}

.modalWrapper {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.85);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	overflow: hidden;
	display: none;
}
.youtube {
	position: fixed;
	width: 80%;
	max-width: 1200px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding-top: 40px;
}
.youtube .iframeWrapper {
	position: relative;
	padding-top: 56.25%;
	width: 100%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.youtube .closeBtn {
	position: absolute;
	top: 0;
	right: 12px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.youtube .closeBtn:before,
.youtube .closeBtn:after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 30px;
	background-color: var(--color-gold);
	position: absolute;
	top: 0;
	right: 12px;
}
.youtube .closeBtn:before { transform: rotate(45deg); }
.youtube .closeBtn:after { transform: rotate(-45deg); }

/*==========================================
 イントロダクション／ストーリー
===========================================*/
.section-introduction {
	padding: 0;
}
.section-story {
	padding: 0 0 60px;
}
.section-body {
	max-width: 1080px;
	margin: 0 auto;
}
/* イントロダクションはテキストと画像を2カラムにする（間隔80px） */
#introduction .section-body {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}
#introduction .section-body__text {
	flex: 1;
}
.introbox {
	/* 90年代レトロなデザインコンセプトのため、囲み線・塗り・ドロップシャドウは使用しない */
/*	padding: 3rem 4rem;*/
/*	max-width: 640px;*/
}
/* イントロダクション冒頭のリード文（原稿で太字指定されている1行目） */
.intro-lead {
	font-weight: bold;
}
/* イントロダクション／ストーリー本文中の「巨頭オ」を強調 */
.intro-keyword,
.story-keyword {
	color: var(--color-red);
}
/* 本文中の「巨頭オ」のグリッチ演出（にじみの色は赤と黒のみ／白は使用しない）
   ※spanはinline要素のままではtransformが効かないため、inline-blockにする */
.intro-keyword,
.story-keyword {
	display: inline-block;
	animation: keyword-glitch 7s steps(1, end) infinite;
	will-change: transform;
}
@keyframes keyword-glitch {
	0%, 90% {
		transform: translate(0, 0);
		text-shadow: none;
	}
	91% {
		transform: translate(-1px, 0);
		text-shadow: 1px 0 var(--color-red), -1px 0 #000000;
	}
	93% {
		transform: translate(1px, 0);
		text-shadow: -1px 0 var(--color-red), 1px 0 #000000;
	}
	95% {
		transform: translate(0, -1px);
		text-shadow: 1px 0 var(--color-red);
	}
	97%, 100% {
		transform: translate(0, 0);
		text-shadow: none;
	}
}
/* 同時にチラつかないよう、各「巨頭オ」でタイミングをずらす */
.intro-keyword               { animation-delay: 1.2s; }
.intro-keyword:nth-of-type(2) { animation-delay: 4.6s; }
.story-keyword               { animation-delay: 2.9s; }
.story-keyword:nth-of-type(2) { animation-delay: 5.4s; }

@media (prefers-reduced-motion: reduce) {
	.intro-keyword,
	.story-keyword {
		animation: none;
	}
}
.section-body__images {
	display: flex;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
}
/* イントロダクションの画像カラム（2カラムの右側）は縦に並べる */
#introduction .section-body__images {
/*	flex: 1;*/
	flex-direction: column;
	margin-top: 0;
}
.section-body__images img {
	flex: 1;
	min-width: 200px;
}
/* イントロダクションの画像：幅は最大120px、縦横比は崩さない */
#introduction .section-body__images img {
	flex: none;
	min-width: 0;
	max-width: 120px;
	height: auto;
}
/* ストーリーは横長画像に変更したため、テキストの下に配置する（縦並び） */
.story-bg {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.story-bg .section-body__text {
	/* イントロダクションの本文と同じ幅にする
	   （section-bodyの幅から、画像カラム120px＋間隔80px＝200pxを引いた幅） */
	max-width: calc(100% - 200px);
}
.story-bg .story-img {
	width: 100%;
	max-width: 640px;
	height: auto;
}

/*==========================================
 上映劇場
===========================================*/
.section-theater {
	padding: 0 20px 60px;
}
.theater-empty {
	text-align: center;
	color: #999;
}
#theater-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 30px;
}
#theater-info li {
	cursor: pointer;
	color: #b8b9b9;
	position: relative;
}
#theater-info li.area_hover {
	color: var(--color-red);
	font-weight: 500;
}
/* 上映劇場のテーブルのみに適用（キャスト/コメントのtableは90年代風の見た目にするため無装飾のまま） */
#theater table {
	border-collapse: collapse;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
#theater table th,
#theater table td {
	border-bottom: 1px dashed #444;
	padding: 10px;
	font-size: 1.4rem;
	color: #ddd;
	text-align: left;
}
#theater table th {
	color: #999;
	font-size: 1.1rem;
	border-bottom: 2px solid #666;
}
#theater table td a {
	color: var(--color-gold) !important;
}

/*==========================================
 90年代風のプレーンなtable（キャスト/コメント・チケットで共通使用）
===========================================*/
/* table自体（外枠）と各セルに1px白線。セル間隔はデフォルトのまま（cellspacing指定なし） */
.retro-table {
	/* reset.cssのborder-collapse/border-spacingを打ち消し、ブラウザデフォルトの表組みに戻す */
	border-collapse: revert;
	border-spacing: revert;
	border: 1px solid var(--color-line);
	max-width: 640px;
}
.retro-table td {
	border: 1px solid var(--color-line);
	vertical-align: top;
	padding: 2px;
}

/*==========================================
 キャスト/コメント
===========================================*/
.section-cast {
	/* PCではイントロ・ストーリーと同様に左右のpaddingなし（SP時のみ20px） */
	padding: 0 0 60px;
}
.section-cast img {
	min-width: 150px;
	/* 黒30%の半透明フィルターを重ねた状態。
	   黒(0)を不透明度0.3で重ねると「元の色×0.7」になるため、
	   要素を増やさずbrightness(0.7)で同じ結果にしている。 */
	filter: brightness(0.7);
}
/* キャスト名／COMMENT／PROFILE：白ビュレット、文字色は赤 */
.cast-label-list {
	margin: 0 0 10px;
	padding-left: 1.2em;
}
.cast-label-list li {
	list-style: disc;
	color: var(--color-red);
}
.cast-label-list li::marker {
	color: var(--color-line);
}
/* 右セル最後の段落の下marginは不要 */
#cast .retro-table td p:last-child {
	margin-bottom: 0;
}

/*==========================================
 チケット
===========================================*/
.section-ticket {
	/* PCではイントロ・ストーリーと同様に左右のpaddingなし（SP時のみ20px） */
	padding: 0 0 60px;
}
/* ウィンドウ幅が狭いときは、セルを潰さず表ごと横スクロールさせる
   （表は640pxを保ち、はみ出したぶんをこのラッパーでスクロールする） */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#ticket .retro-table {
	min-width: 640px;
}
#ticket .retro-table td:first-child {
	min-width: 150px;
}
.ticket-note {
	max-width: 1080px;
	margin: 20px auto 0;
}
.ticket-note__link {
	color: #0000ff;
	text-decoration: underline;
}

/*==========================================
 コメント（観客の声）
===========================================*/
.section-comment {
	/* PCではイントロ・ストーリーと同様に左右のpaddingなし（SP時のみ20px） */
	padding: 0 0 60px;
}
.section-comment__note {
	text-align: left;
	color: #999;
	margin-bottom: 30px;
}
.commentBox {
	margin-bottom: 30px;
	max-width: 640px;
	padding: 6px;
	background: #d9d9d9;
	/* 左・上は若干濃いグレー、右・下は若干薄いグレー（90年代風の立体的な枠） */
	border-top: 2px solid #808080;
	border-left: 2px solid #808080;
	border-right: 2px solid #f5f5f5;
	border-bottom: 2px solid #f5f5f5;
	box-sizing: border-box;
}
.commentBox .body {
	font-size: 1.5rem;
	margin-bottom: 10px;
	/* 背景が明るいグレーになるため、本文は暗い文字色にする */
	color: #222222;
}
.commentBox .name {
	display: block;
	text-align: right;
	/* 本文（h3, p）と同じサイズ */
	font-size: 15px;
	color: var(--color-red);
	margin-bottom: 0;
}

/*==========================================
 ページトップへ戻るボタン
===========================================*/
#backToTop {
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	/* 予告編（.video-embed／991）より前面に出す */
	z-index: 995;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	/* 塗り・ボーダーはMENUボタン（＝PCサイドバー）と同じ、グレー地＋1px間隔の横線 */
	background-color: var(--color-sidebar-bg);
	background-image:
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 2px);
}
/* △（山形）とTOPの2段組み */
#backToTop a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	height: 100%;
	color: #ffffff;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}
#backToTop a:visited {
	color: #ffffff;
}
#backToTop .backToTop__arrow {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	transform: rotate(-45deg);
	/* 回転で下方向に寄るため、視覚的な中心に合わせて微調整 */
	margin-bottom: -3px;
}
/* TOPの文字サイズは本文（h3, p）と同じ */
#backToTop .backToTop__text {
	font-size: 15px;
}

/*==========================================
 スクロールフェードイン
===========================================*/
.fadeInAfterUp,
.fadeInAfterBl,
.fadeInAfterScl {
	transform: none !important;
	opacity: 1 !important;
	filter: blur(0) !important;
}

/*==========================================
 レスポンシブ（SP：1024px以下）
===========================================*/
@media only screen and (max-width: 1024px) {

	.sp-only {
		display: block;
	}

	/* MENU／CLOSEボタン共通（ハンバーガーではなく、PCサイドバーと同じグレー背景＋横線ボーダーの箱）
	   ※どちらも同じ位置・同じ幅で表示されるよう、見た目とサイズはここで共通指定する */
	.menu,
	#sp-menu-close {
		display: block;
		/* タップしやすさとデザインのバランスを取ったサイズ（実測 72×37px） */
		width: 72px;
		padding: 10px 0;
		box-sizing: border-box;
		text-align: center;
		cursor: pointer;
		border: 0;
		border-radius: 0;
		appearance: none;
		-webkit-appearance: none;
		/* PCサイドバー（#sidebar）と同じ、グレー地＋1px間隔の横線 */
		background-color: var(--color-sidebar-bg);
		background-image:
			repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 2px);
		/* 文字はサイドバーのメニューリンクと同じ青＋下線 */
		color: var(--color-link);
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 1.2;
		text-decoration: underline;
	}
	.menu {
		position: fixed;
		top: 21px;
		left: 20px;
		/* 予告編（.video-embed／991）より前面に出す */
		z-index: 995;
	}

	#container {
		display: block;
	}

	/* サイドバーが非表示（オフキャンバス）の間は、メインコンテンツを画面幅いっぱいに */
	#main-content {
		margin-left: 0;
		margin-right: 0;
		/* 固定表示のMENUボタン（上21px＋高さ37px）の下にティッカーが来るよう、上に余白を確保 */
		padding-top: 72px;
	}

	/* サイドバーをオフキャンバス化
	   ※transformではなくleftで画面外に出している。transformを使うと、中にある
	   　Xアイコン（position: fixed）の基準がサイドバー自身になってしまい、
	   　サイドバーごと画面外に隠れてしまうため。 */
	#sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		/* CLOSEボタンがMENUボタンと同じ位置（上21px／左20px）に来るようにする */
		padding: 21px 20px;
		/* 90年代風のテーマに合わせ、スライドのアニメーションはせずパッと切り替える（transitionなし） */
		/* メニューを開いたときはMENUボタン・予告編より前面に出す */
		z-index: 996;
		background: #000;
		background-image: none;
		border-right: 0;
		color: var(--color-text);
	}
	/* SPはサイドバーが黒地になるため、通常の赤に戻す */
	#sidebar .site-logo a {
		color: var(--color-red);
	}
	#sidebar .visitor-counter,
	#sidebar .site-copyright {
		color: #ccc;
	}

	/* Xアイコン／TikTokテキストリンクはサイドバー内ではなく、画面右上に固定表示する
	   （高さをMENUボタンと同じ37pxにして、上下の位置を揃えている。
	   　PCでは縦並びだが、SPでは高さを37pxに収めるため横並びに変える） */
	#sidebar .sns-link {
		position: fixed;
		top: 21px;
		right: 20px;
		margin: 0;
		z-index: 995;
		flex-direction: row;
		align-items: center;
		gap: 4px;
	}
	#sidebar .sns-link a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 37px;
		padding: 0 8px;
		/* SPは黒背景の上に乗るため、本文と同じグレーにする（PC側の青下線は使わない） */
		color: var(--color-text);
		text-decoration: underline;
	}
	#sidebar .sns-link .tiktok-link {
		box-sizing: border-box;
		height: 37px;
		padding: 0 8px;
		border: 1px solid #000;
		background: #c0c0c0;
		background: #808080;
		color: #000;
		color: rgb(0, 0, 255);
		text-decoration: none;
		box-shadow:
			inset 1px 1px #fff,
			inset -1px -1px #404040;
		margin-top: 0;
		margin-left: 12px;
	}



	/* CLOSEボタン（位置・幅はMENUボタンと共通指定。下の余白でロゴまでの間隔をとる） */
	#sp-menu-close {
		margin-bottom: 34px;
	}

	/* ------------------------------------------
	 SPのメニューはキャスト/チケットの表（.retro-table）と同じ見た目にする。
	 navの中身は<ul>のまま（表組みではなくリストとしてマークアップを保つ）で、
	 CSSで「外枠＋各セルに1px白線、セル間はすき間あり」の表組みを再現している。
	------------------------------------------ */
	#sidebar #main-nav ul {
		border: 1px solid var(--color-line);
		/* tableのborder-spacing相当のすき間 */
		padding: 2px;
	}
	#sidebar #main-nav ul li {
		display: flex;
		gap: 2px;
		margin-bottom: 2px;
		font-size: 1.3rem;
	}
	#sidebar #main-nav ul li:last-child {
		margin-bottom: 0;
	}
	/* 左セル：メニューリンク（文字色はPCと同じ青＋下線） */
	#sidebar #main-nav ul li a {
		flex: 1 1 auto;
		border: 1px solid var(--color-line);
		padding: 8px 10px;
		color: var(--color-link);
		text-decoration: underline;
	}
	/* 右セル：カンプにある†の細いセル（装飾のため擬似要素で出力） */
	#sidebar #main-nav ul li::after {
		content: "†";
		flex: none;
		width: 22px;
		border: 1px solid var(--color-line);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-line);
	}

	#sp-menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		/* サイドバー（996）より背面、予告編（991）より前面 */
		z-index: 995;
	}

	body.sp-menu-is-open #sidebar {
		left: 0;
	}
	/* メニューを開いている間はXアイコンを隠す（デザインカンプの展開時はCLOSEのみ） */
	body.sp-menu-is-open #sidebar .sns-link {
		display: none;
	}
	body.sp-menu-is-open #sp-menu-overlay {
		display: block;
	}
	body.sp-menu-is-open {
		overflow: hidden;
	}

	/* SPでは各セクションの左右に20pxの余白を付ける */
	.section-story,
	.section-cast,
	.section-ticket,
	.section-comment {
		padding: 0 20px 60px;
	}
	/* 特報はPCと同様、上下のアキを均一（60px）にする（下は直後のhrの40pxと合わせて60px） */
	.section-trailer {
		padding: 60px 20px 20px;
	}
	/* イントロダクションは下のpaddingなし */
	.section-introduction {
		padding: 0 20px;
	}


	/* SPではイントロダクションの本文が全幅になるため、ストーリーの本文も全幅にする */
	.story-bg .section-body__text {
		max-width: none;
	}

	#introduction .section-body {
		flex-direction: column;
		gap: 30px;
		/* PC用の align-items: flex-start が残ると、画像の行が内容幅（120px×3＋余白＝400px）
		   まで広がって画面からはみ出すため、stretchに戻して画面幅に収める */
		align-items: stretch;
	}
	/* 1カラムになるぶん、イントロダクションの画像は縦積みではなく横並びにする。
	   3点×120px＋余白では画面幅に収まらず回り込むため、折り返しを禁止して
	   幅が足りないときは3点均等に縮小させる（最大120pxは維持）。 */
	#introduction .section-body__images {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 20px;
	}
	#introduction .section-body__images img {
		flex: 1 1 0;
		min-width: 0;
	}

	/* キャスト/コメントの表は左右2セルをやめ、画像→テキストの縦一列にする */
	#cast .retro-table,
	#cast .retro-table tbody,
	#cast .retro-table tr,
	#cast .retro-table td {
		display: block;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
	/* display:blockではborder-spacingが効かないため、PCと同じ2pxの隙間をpadding/marginで再現する */
	#cast .retro-table {
		padding: 2px;
	}
	#cast .retro-table tr {
		margin-bottom: 2px;
	}
	#cast .retro-table tr:last-child {
		margin-bottom: 0;
	}
	#cast .retro-table td + td {
		margin-top: 2px;
	}
}