@charset "UTF-8";
/* =========================================================
   映画版トップ 上書きCSS（common.css の後に読み込む）
   デザイン準拠: tacopi_movie_top_a.jpg
   すべて .movie-top 配下にスコープ
   ========================================================= */

html,
body{
	min-height: 100%;
	background-color: #111;
}

.movie-top{
	line-height: 1.5;
}

/* 装飾アイコン背景（アニメ版 item01〜08）を無効化 */
.movie-top #section-news,
.movie-top #section-movie,
.movie-top #section-intro{
	background-image: none;
}

/* ヘッダー：ロゴ左寄せ＋劇場版バッジ */
.movie-top .header-area{
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box; /* width:100% にパディングを含める（横はみ出し防止） */
	max-width: 100%;
}
.movie-top .header-badge{ display: inline-block; line-height: 0; }
.movie-top .header-badge img{ width: 100%; }

/* ヒーロー */
.movie-top #section-top{
	display: block;
	min-width: 0;
	width: 100%;
	position: relative;
}
.movie-top #section-top .top-visual{
	position: relative;
	width: 100%;
	min-height: 640px;
	aspect-ratio: 1920 / 1020;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	background: url("../img/bg_hero.jpg?v=20260911-1") top center / cover no-repeat;
}
.movie-top #section-top .top-scene-viewport{
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}
.movie-top #section-top .top-scene-track{
	display: flex;
	position: absolute;
	top: 5%;
	left: 0;
	width: 479%;
	height: 62%;
	animation: top-scene-flow 60s linear infinite;
	/* ループの開始位置：ss_04 / ss_06 が見えている位置（1セットの約25%）から始める。
	   負のdelayで途中から再生するだけなので、継ぎ目はこれまでどおりシームレス */
	animation-delay: -15s;
	will-change: transform;
}
.movie-top #section-top .top-scene-set{
	position: relative;
	flex: 0 0 50%;
	height: 100%;
}
/* 場面写カード：サイズ・位置・重なりを不規則に散らした2段レイアウト
   ・トリミングなし（素材と同じ 16:9）は維持。width だけを1枚ずつ変えている
   ・上段(奇数)／下段(偶数)を 5% ずつずらして交互配置 → 縦横ともに重なりが出る
   ・z-index 1〜3 で前後関係もランダムに
   2026-09-15 配置スタディ「微1改」を反映（../../hero_layout_study/）
   ・大小のリズム＋主役3枚（--04 ss_19 / --10 ss_09 / --19 ss_08）を大きく
   ・中心位置を基準に配置しているので、幅を変えても段の重心がずれない
   ・SPは left も個別指定（PCと幅が違うため、中心をそろえる） */
.movie-top #section-top .top-scene-card{
	position: absolute;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	width: 8.664%;
	z-index: 1;
	box-shadow: 0 8px 18px rgba(17, 17, 17, .22);
}
.movie-top #section-top .top-scene-card img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1枚ずつ 位置・サイズ・重なり順を指定（意図的に不規則） */
.movie-top #section-top .top-scene-card--01{ top: 14.2%; left: 3.0%; width: 7.2%; z-index: 2; }
.movie-top #section-top .top-scene-card--02{ top: 57.1%; left: 4.9%; width: 8.2%; z-index: 3; }
.movie-top #section-top .top-scene-card--03{ top: 8.6%; left: 12.0%; width: 8.0%; z-index: 3; }
.movie-top #section-top .top-scene-card--04{ top: 47.1%; left: 13.6%; width: 13.1%; z-index: 1; }
.movie-top #section-top .top-scene-card--05{ top: 6.9%; left: 21.5%; width: 7.9%; z-index: 3; }
.movie-top #section-top .top-scene-card--06{ top: 56.1%; left: 27.4%; width: 8.8%; z-index: 3; }
.movie-top #section-top .top-scene-card--07{ top: 7.5%; left: 30.3%; width: 10.4%; z-index: 3; }
.movie-top #section-top .top-scene-card--08{ top: 59.7%; left: 37.2%; width: 6.3%; z-index: 3; }
.movie-top #section-top .top-scene-card--09{ top: 5.7%; left: 41.6%; width: 7.5%; z-index: 2; }
.movie-top #section-top .top-scene-card--10{ top: 48.4%; left: 44.4%; width: 12.0%; z-index: 1; }
.movie-top #section-top .top-scene-card--11{ top: -0.1%; left: 50.5%; width: 9.8%; z-index: 2; }
.movie-top #section-top .top-scene-card--12{ top: 57.5%; left: 57.5%; width: 7.1%; z-index: 2; }
.movie-top #section-top .top-scene-card--13{ top: 9.9%; left: 61.7%; width: 7.5%; z-index: 2; }
.movie-top #section-top .top-scene-card--14{ top: 53.5%; left: 65.5%; width: 10.1%; z-index: 2; }
.movie-top #section-top .top-scene-card--15{ top: 2.0%; left: 70.7%; width: 9.6%; z-index: 3; }
.movie-top #section-top .top-scene-card--16{ top: 51.1%; left: 76.6%; width: 9.2%; z-index: 2; }
.movie-top #section-top .top-scene-card--17{ top: 12.2%; left: 81.2%; width: 7.2%; z-index: 2; }
.movie-top #section-top .top-scene-card--18{ top: 54.8%; left: 86.7%; width: 10.4%; z-index: 2; }
.movie-top #section-top .top-scene-card--19{ top: -3.1%; left: 89.0%; width: 13.4%; z-index: 1; }
.movie-top #section-top .top-scene-card--20{ top: 63.1%; left: 98.2%; width: 7.7%; z-index: 4; }
.movie-top #section-top .top-visual-ribbon{
	position: absolute;
	top: 39%;
	left: 3%;
	width: 98%;
	z-index: 3;
	pointer-events: none;
}
.movie-top #section-top .top-visual-copy{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.movie-top #section-top .top-visual-copy p,
.movie-top #section-top .top-visual-copy h2{ position: absolute; margin: 0; line-height: 0; }
.movie-top #section-top .top-visual-copy img{ display: block; width: 100%; }
.movie-top #section-top .top-visual-logo{ left: 6%; bottom: 18%; width: 35%; }
.movie-top #section-top .top-visual-release{
	left: 9%;
	bottom: 7%;
	width: 29%;
	aspect-ratio: 522 / 71; /* 置き換え前の公開日画像と同じ表示領域 */
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	color: #e4007f;
	font-family: "M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Meiryo",sans-serif;
	font-size: clamp(32px, 3.5vw, 68px);
	font-weight: 900;
	font-feature-settings: "palt";
	font-kerning: normal;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 0 #fff, 0 2px 8px rgba(228, 0, 127, .22);
}
.movie-top #section-top .top-visual-release__date{
	display: inline-flex;
	align-items: baseline;
}
.movie-top #section-top .top-visual-release__number{
	font-size: 1.08em;
	line-height: .82;
	font-variant-numeric: tabular-nums;
}
.movie-top #section-top .top-visual-release__unit{
	font-size: .68em;
	margin: 0 0 0 .02em;
}
.movie-top #section-top .top-visual-release__weekday{
	font-size: .58em;
	margin-left: .08em;
	transform: translateY(-.03em);
}
.movie-top #section-top .top-visual-release__word{
	display: inline-flex;
	align-items: center;
	font-size: .78em;
	margin-left: .24em;
	letter-spacing: 0;
}
.movie-top #section-top .top-visual-catch{ top: auto; left: 39%; bottom: 6%; width: 26%; z-index: 2; }
.movie-top #section-top .top-visual-catch__sp{
	display: block;
	color: #e4007f;
	font-family: "Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
	font-size: clamp(18px, 1.7vw, 32px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 0 4px rgba(255, 255, 255, .9);
}
.movie-top #section-top .top-visual-catch__ending,
.movie-top .intro-text__ending{ white-space: nowrap; }
.movie-top #section-top .top-visual-catch__ending::after,
.movie-top .intro-text__ending::after{
	content: "";
	display: inline-block;
	width: 2.4em;
	border-top: .1em solid currentColor;
	margin-left: .08em;
	vertical-align: middle;
	transform: translateY(-.08em);
}
.movie-top #section-top .top-visual-takopi{
	position: absolute;
	right: 8%;
	bottom: 3%;
	width: 31%;
	z-index: 4;
	pointer-events: none;
}
@keyframes top-scene-flow{
	to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.movie-top #section-top .top-scene-track{ animation: none; }
}

/* 共通：セクション見出し（HTML/CSSテキスト・下部にピンク線）
   ※文言はHTML側の <span> を編集するだけで変更可（画像不要） */
.movie-top .sec-h2{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	max-width: 980px;
	margin: 0 auto 22px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e4007f;
	color: #e4007f;
	line-height: 1;
}
/* 見出しは日本語表記のみに統一（英語は非表示。戻す場合は下の display:none を外す） */
.movie-top .sec-h2__ja{
	font-family: "M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Meiryo",sans-serif;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: .06em;
}
.movie-top .sec-h2__en{
	display: none;
	font-family: "M PLUS 1p","Helvetica Neue",Arial,sans-serif;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: .1em;
}

/* 一時非表示（公開時にクラスを外して復活させる） */
.movie-top .is-temporarily-hidden{ display: none; }

/* 劇場・チケット2バナー（HTML/CSS版・中央寄せ・見出しなし） */
.movie-top #section-theater-banner{ position: relative; z-index: 2; }
.movie-top .theater-banner-list{
	display: flex;
	justify-content: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.movie-top .theater-banner-item{ width: 450px; max-width: 47%; }
.movie-top .theater-banner-link{
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	height: 136px;
	padding: 0 26px;
	background: #fff;
	border: 2px solid #e4007f;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3); /* PSドロップシャドウ準拠: 乗算/不透明度30%/角度90/距離10/サイズ30 */
	box-sizing: border-box;
	transition: opacity .2s ease;
}
.movie-top .theater-banner-link:hover{ opacity: .6; text-decoration: none; }
.movie-top .theater-banner-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: #e4007f;
}
.movie-top .theater-banner-icon svg{ width: 42px; height: 42px; }
.movie-top .theater-banner-text{
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #e4007f;
	line-height: 1;
}
.movie-top .theater-banner-en{
	font-family: "M PLUS 1p","Helvetica Neue",Arial,sans-serif;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .3em;
}
.movie-top .theater-banner-ja{
	font-family: "M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Meiryo",sans-serif;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: .04em;
}

/* NEWS：白角丸ボックス＋区切り線 */
.movie-top #section-news{ position: relative; z-index: 2; }
.movie-top .news-box{
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3); /* PSドロップシャドウ準拠: 乗算/不透明度30%/角度90/距離10/サイズ30 */
	padding: 6px 40px;
}
.movie-top .update-list{ width: 100%; margin: 0; }
.movie-top .update-block{
	display: flex;
	align-items: center;
	margin: 0;
	padding: 22px 4px;
	border: 0;
	border-bottom: 1px solid #e7e7e7;
	background: none;
	box-shadow: none;
	font-weight: normal;
	line-height: 1.5;
}
.movie-top .update-block:last-child{ border-bottom: 0; }
.movie-top .update-date{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: auto;
	min-width: 108px;
	margin: 0 20px 0 0;
	font-size: 14px;
	font-weight: bold;
	color: #e4007f;
}
.movie-top .update-new{
	order: -1;
	display: inline-block;
	background: #e4007f;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 0;
	vertical-align: middle;
}
.movie-top .update-text{ width: auto; flex: 1; font-size: 15px; color: #222; }
.movie-top .update-text a{ color: #222; }
.movie-top .update-text a:hover{ color: #e4007f; }

/* MOVIE：最新1件バナー（全幅・中央） */
.movie-top #section-movie{ position: relative; z-index: 2; }
.movie-top .movie-latest{ width: 100%; }
.movie-top .movie-latest-link{ display: block; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } /* PSドロップシャドウ準拠: 乗算/不透明度30%/角度90/距離10/サイズ30 */
.movie-top .movie-latest img{ width: 100%; height: auto; display: block; }
.movie-top .movie-latest__copy{
	position: absolute;
	left: 6.25%;
	bottom: 12%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #111;
	font-family: "Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
}
.movie-top .movie-latest__copy-en{
	font-family: "Times New Roman","Yu Mincho",serif;
	font-size: clamp(12px, 2vw, 20px);
	line-height: 1.2;
	letter-spacing: .02em;
}
.movie-top .movie-latest__copy-ja{
	font-size: clamp(22px, 3.6vw, 36px);
	line-height: 1.25;
}
.movie-top .movie-latest__play{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12%;
	max-width: 112px;
	min-width: 64px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #e4007f;
	transform: translate(-50%, -50%);
	transition: transform .25s ease, box-shadow .25s ease;
}
.movie-top .movie-latest__play::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 24px solid #fff;
	transform: translate(-35%, -50%);
}
.movie-top .movie-latest-link:hover .movie-latest__play,
.movie-top .movie-latest-link:focus-visible .movie-latest__play{
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 0 0 8px rgba(228, 0, 127, .2);
}

/* イントロダクション（画像の上にテキストをオーバーレイ・セリフ体） */
.movie-top #section-intro{ position: relative; z-index: 2; scroll-margin-top: 150px; }
.movie-top .intro-box{
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.movie-top .intro-copy{
	margin: 0 0 56px; /* 「あらすじ」見出しまでの間隔。他セクション（#section-movie / #section-intro の56px）に合わせる */
	padding: 42px 6%;
	background: rgba(255,255,255,.94);
	box-shadow: 0 10px 30px rgba(0,0,0,.22);
	font-family: "Hiragino Mincho ProN","YuMincho","游明朝","MS Mincho",serif;
	color: #222;
}
.movie-top .intro-copy__lead{
	margin: 0 0 28px;
	color: #e4007f;
	font-size: 26px;
	line-height: 1.55;
	text-align: center;
}
.movie-top .intro-copy__body{
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 2;
}
.movie-top .intro-copy__message{
	margin: 30px 0 0;
	color: #e4007f;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}
/* STORY：テキスト（白ボックス）→ 場面写センター の縦積み。
   旧版は場面写の上にテキストをオーバーレイしていたが、PCで文字が小さく見えるため
   イントロ本文と同じ級数の独立ブロックに変更（PC/SP共通のレイアウト） */
.movie-top .intro-photo{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.movie-top .intro-photo img{
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin: 0 auto;
	order: 2;
}
.movie-top .intro-text{
	order: 1;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 6% 0;
	text-align: center;
}
/* STORY見出しは他セクションと同じ .sec-h2 デザイン。
   .intro-photo の gap で間隔を取るので margin-bottom は殺す */
.movie-top .intro-photo .sec-h2{ order: 0; margin-bottom: 0; }
.movie-top .intro-text__body{
	font-family: "Hiragino Mincho ProN","YuMincho","游明朝","MS Mincho",serif;
	font-size: 15px; /* イントロ本文と同級数 */
	line-height: 2;
	color: #222;
	margin: 0; /* 段落間の空きは行送りのみ（詰め） */
}
/* SP専用の改行（PCでは非表示。あらすじ本文と結びの行送りをSPだけ最適化） */
.movie-top .intro-text__break-sp{ display: none; }
.movie-top .intro-text__catch{
	font-family: "Hiragino Mincho ProN","YuMincho","游明朝","MS Mincho",serif;
	font-size: 20px; /* イントロ結び（.intro-copy__message）と同級数 */
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .04em;
	color: #e4007f;
	margin: 30px 0 0;
}

/* フッター（ロゴ＋著作権のみ） */
.movie-top .top-footer{ background: #111; text-align: center; }
.movie-top .copyright{ color: #fff; font-size: 12px; }
@media all and (max-width: 767px){
	.movie-top .copyright{ font-size: 10px; }
}

/* フロートバナー（CMSから新着順で最大2件を出力） */
.movie-top > .top-follow-banner{
	position: fixed !important;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	width: auto;
	max-width: none;
	margin: 0;
	transition: opacity .2s ease;
}
.movie-top .top-follow-banner__list{
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.movie-top .top-follow-banner__item{
	position: relative;
	flex: 0 0 160px;
	width: 160px;
	height: 160px;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(17, 17, 17, .26);
}
.movie-top .top-follow-banner__link,
.movie-top .top-follow-banner__link img{
	display: block;
	width: 100%;
	height: 100%;
}
.movie-top .top-follow-banner__link{
	overflow: hidden;
	border-radius: 50%;
	background: transparent;
	transition: transform .2s ease;
}
.movie-top .top-follow-banner__link:hover{ transform: scale(1.04); }
.movie-top .top-follow-banner__link img{ object-fit: contain; }
.movie-top .top-follow-banner__link:focus-visible{
	outline: 3px solid #e4007f;
	outline-offset: 3px;
}

/* =========================================================
   PC（>=768px）
   ========================================================= */
@media all and (min-width: 768px) {
	.movie-top #section-top{ overflow: hidden; }
	.movie-top #section-top .top-visual{
		left: 50%;
		width: max(100%, 980px);
		transform: translateX(-50%);
	}
	/* タコピー：PCのみ従来の約75%のサイズに（元は31%） */
	.movie-top #section-top .top-visual-takopi{ width: 23%; right: 12%; bottom: 3.5%; }

	/* キャッチコピー：1行目が途中で折り返していたため改行位置を <br> だけに固定 */
	.movie-top #section-top .top-visual-catch__sp{ white-space: nowrap; }


	.movie-top .top-main-wrap{
		min-width: 0; /* common.css の min-width:980px による横はみ出し(横スクロール)対策 */
		/* リボン=fixed（画面に固定）／bg.jpg=scroll（ページと一緒に動く）
		   レイヤー順: リボン左, リボン右, bg.jpg */
		background-image:
			url("../img/bg_ribbon_left.png"),
			url("../img/bg_ribbon_right.png"),
			url("../img/bg.jpg?v=20260911-1");
		background-repeat: no-repeat, no-repeat, repeat-y;
		background-position: left top 28%, right top 66%, top center;
		/* コンテンツ量やウィンドウ比率にかかわらず、bg.jpg が領域全体を覆う */
		background-size: 30vw auto, 30vw auto, 100% auto;
		background-attachment: fixed, fixed, scroll;
		background-color: #eef1f4;
		padding: 0 0 80px;
	}

	/* ヘッダー */
	.movie-top .header-area{ padding: 16px 28px; gap: 24px; }
	.movie-top .header-logo{ width: 194px; margin: 0; } /* 素材の原寸幅（デザイン実測とほぼ一致） */
	.movie-top .header-badge{ width: 118px; }

	/* 共通セクション余白 */
	.movie-top .top-content-section{ padding: 52px 0 0; }

	.movie-top .section-inner{
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
	} /* common.css の section-inner:980px固定による横はみ出し対策（流動幅に） */

	/* 2バナー：980px幅いっぱいに両脇揃え（左右の余白なしで均等分割） */
	.movie-top #section-theater-banner{ padding: 48px 0 56px; }
	.movie-top .theater-banner-list{ width: 100%; }
	.movie-top .theater-banner-item{ flex: 1 1 0; width: auto; max-width: none; }

	/* NEWS */
	.movie-top #section-news{ padding: 48px 0 0; }

	/* ▼一時対応: 劇場・チケット2バナーを隠している間、ヒーローとNEWSが詰まりすぎるので上余白を足す。
	   バナーから is-temporarily-hidden を外せばこの指定は自動的に効かなくなる（隣接セレクタのため）。
	   ※PCは common.css の `#section-news{ padding: 0% !important }` が効いていて padding では入らないため margin で確保する
	     （上の .movie-top #section-news の padding 48px も、同じ理由でPCでは効いていない） */
	.movie-top #section-theater-banner.is-temporarily-hidden + #section-news{ margin-top: 110px; }

	/* MOVIE */
	.movie-top #section-movie{ padding: 56px 0 0; }

	/* イントロ */
	.movie-top #section-intro{ padding: 56px 0 40px; }

	/* フッター */
	.movie-top .top-footer{ padding: 72px 0 72px; }
	.movie-top .footer-logo{ width: 330px; margin: 0 auto 22px; }
}

/* =========================================================
   SP（<=767px）
   ========================================================= */
@media all and (max-width: 767px) {
	/* SP：共通の固定::beforeは無効化し、下層と同じ3レイヤー背景を直接指定 */
	.movie-top .top-main-wrap::before{ display: none; }
	.movie-top .top-main-wrap{
		background-image:
			url("../img/bg_ribbon_left.png"),
			url("../img/bg_ribbon_right.png"),
			url("../img/bg.jpg?v=20260911-1");
		background-repeat: no-repeat, no-repeat, repeat-y;
		background-position: left -6% top 20%, right -6% top 72%, top center;
		background-size: 62vw auto, 62vw auto, 100% auto;
		background-attachment: fixed, fixed, scroll;
		background-color: #eef1f4;
	}

	.movie-top > .top-follow-banner{
		right: 16px;
		bottom: 16px;
	}
	.movie-top .top-follow-banner__list{ gap: 8px; }
	.movie-top .top-follow-banner__item{
		flex-basis: 132px;
		width: 132px;
		height: 132px;
	}

		/* ヘッダー */
		.movie-top .header-area{ padding: 10px 14px; gap: 10px; }
		.movie-top .header-logo{ width: 30%; max-width: 132px; margin: 0; }
		.movie-top .header-badge{ width: 19%; max-width: 80px; }

		/* ヒーロー */
		.movie-top #section-top .top-visual{
			min-height: 0;
			aspect-ratio: 640 / 786;
		}
		.movie-top #section-top .top-scene-track{
			top: 1%;
			width: 1120%;
			height: 55%;
			animation-duration: 80s;
			animation-delay: -20.8s; /* SPも ss_04 / ss_06 が見える位置（1セットの約26%）から */
		}
		.movie-top #section-top .top-scene-card img{ object-fit: contain; }
		/* SPも1枚ずつ サイズ・位置を不規則に（PCより振れ幅は控えめ） */
		.movie-top #section-top .top-scene-card--01{ top: 12.2%; left: 1.8%; width: 7.2%; z-index: 2; }
		.movie-top #section-top .top-scene-card--02{ top: 55.7%; left: 5.2%; width: 7.8%; z-index: 3; }
		.movie-top #section-top .top-scene-card--03{ top: 6.3%; left: 12.0%; width: 8.0%; z-index: 3; }
		.movie-top #section-top .top-scene-card--04{ top: 48.9%; left: 14.8%; width: 10.7%; z-index: 1; }
		.movie-top #section-top .top-scene-card--05{ top: 5.3%; left: 21.7%; width: 7.6%; z-index: 3; }
		.movie-top #section-top .top-scene-card--06{ top: 55.1%; left: 27.7%; width: 8.1%; z-index: 3; }
		.movie-top #section-top .top-scene-card--07{ top: 6.5%; left: 30.5%; width: 9.6%; z-index: 3; }
		.movie-top #section-top .top-scene-card--08{ top: 57.9%; left: 37.2%; width: 6.2%; z-index: 3; }
		.movie-top #section-top .top-scene-card--09{ top: 3.3%; left: 41.5%; width: 7.6%; z-index: 2; }
		.movie-top #section-top .top-scene-card--10{ top: 50.0%; left: 45.5%; width: 9.8%; z-index: 1; }
		.movie-top #section-top .top-scene-card--11{ top: -1.4%; left: 50.8%; width: 9.1%; z-index: 2; }
		.movie-top #section-top .top-scene-card--12{ top: 55.5%; left: 57.5%; width: 7.1%; z-index: 2; }
		.movie-top #section-top .top-scene-card--13{ top: 8.1%; left: 61.8%; width: 7.4%; z-index: 2; }
		.movie-top #section-top .top-scene-card--14{ top: 53.3%; left: 66.1%; width: 8.9%; z-index: 2; }
		.movie-top #section-top .top-scene-card--15{ top: 1.6%; left: 71.2%; width: 8.6%; z-index: 3; }
		.movie-top #section-top .top-scene-card--16{ top: 49.1%; left: 76.8%; width: 9.0%; z-index: 2; }
		.movie-top #section-top .top-scene-card--17{ top: 10.2%; left: 82.1%; width: 7.2%; z-index: 2; }
		.movie-top #section-top .top-scene-card--18{ top: 54.9%; left: 87.3%; width: 9.1%; z-index: 2; }
		.movie-top #section-top .top-scene-card--19{ top: -1.1%; left: 90.3%; width: 10.9%; z-index: 1; }
		.movie-top #section-top .top-scene-card--20{ top: 61.4%; left: 98.3%; width: 7.5%; z-index: 4; }
		.movie-top #section-top .top-visual-ribbon{ top: 34%; left: 4%; width: 150%; }
		.movie-top #section-top .top-visual-logo{ top: 63%; left: 12%; bottom: auto; width: 76%; }
		.movie-top #section-top .top-visual-release{
			top: 84%;
			left: 50%;
			bottom: auto;
			width: 92%;
			transform: translateX(-50%);
			justify-content: center;
			font-size: clamp(26px, 8vw, 38px);
			text-align: center;
			letter-spacing: 0;
		}
		.movie-top #section-top .top-visual-catch{
			top: 6%;
			left: 7%;
			bottom: auto;
			width: auto;
			z-index: 5;
			line-height: 1;
		}
		.movie-top #section-top .top-visual-catch__sp{
			writing-mode: vertical-rl;
			text-orientation: upright;
			font-size: clamp(17px, 5.2vw, 25px);
		}
		/* 縦書きキャッチの末尾は、横線ではなく縦長の棒にする */
		.movie-top #section-top .top-visual-catch__ending::after{
			writing-mode: horizontal-tb;
			width: 0;
			height: 1.15em;
			border-top: 0;
			border-left: .12em solid currentColor;
			margin-top: .22em;
			margin-left: .2em;
			vertical-align: -0.05em;
		}
		/* タコピー：現在の表示から20%縮小 */
	.movie-top #section-top .top-visual-takopi{ top: 32%; right: 5%; bottom: auto; width: 33.6%; }

		/* 共通セクション余白 */
	.movie-top .top-content-section{ padding: 36px 0 0; }
	.movie-top .sec-h2{ margin: 0 auto 16px; padding-bottom: 8px; }
	.movie-top .sec-h2__ja{ font-size: 23px; }
	.movie-top .sec-h2__en{ font-size: 15px; }

	/* 2バナー（横並び） */
	.movie-top #section-theater-banner{ padding: 28px 0 32px; }
	.movie-top .theater-banner-list{ flex-direction: row; gap: 10px; }
	.movie-top .theater-banner-item{ width: auto; max-width: none; flex: 1 1 0; }
	.movie-top .theater-banner-link{ height: 84px; gap: 8px; padding: 0 10px; }
	.movie-top .theater-banner-icon{ width: 44px; height: 44px; }
	.movie-top .theater-banner-icon svg{ width: 20px; height: 20px; }
	.movie-top .theater-banner-text{ gap: 2px; min-width: 0; }
	.movie-top .theater-banner-en{ font-size: 8px; letter-spacing: .1em; }
	.movie-top .theater-banner-ja{ font-size: 13px; white-space: nowrap; }

	/* NEWS */
	.movie-top #section-news{ padding: 32px 0 0; }
	/* ▼一時対応: 上のPC側と同じ理由（バナー非表示ぶんの余白） */
	.movie-top #section-theater-banner.is-temporarily-hidden + #section-news{ padding-top: 64px; }
	.movie-top .news-box{ padding: 4px 18px; }
	.movie-top .update-block{ padding: 16px 2px; align-items: flex-start; flex-wrap: wrap; }
	.movie-top .update-date{ min-width: 92px; font-size: 13px; }
	.movie-top .update-text{ font-size: 14px; }

	/* MOVIE */
	.movie-top #section-movie{ padding: 40px 0 0; }

	/* イントロ（SPは以前どおりテキスト→画像の縦積み・オーバーレイなし） */
	.movie-top #section-intro{ padding: 40px 0 40px; }
	.movie-top .intro-copy{ margin-bottom: 40px; padding: 26px 20px; }
	.movie-top .intro-copy__lead{ margin-bottom: 20px; font-size: 20px; text-align: left; }
	.movie-top .intro-copy__body{ margin-bottom: 18px; font-size: 13px; line-height: 1.9; }
	.movie-top .intro-copy__message{ margin-top: 22px; font-size: 17px; text-align: left; }
	.movie-top .intro-photo{ gap: 22px; }
	.movie-top .intro-photo img{ max-width: none; }
	.movie-top .intro-text{ padding: 4px 4% 0; text-align: center; }
	.movie-top .intro-text__body{ font-size: 13px; line-height: 1.9; margin: 0; }
	.movie-top .intro-text__catch{ font-size: 17px; margin: 22px 0 0; }
	.movie-top .intro-text__break-sp{ display: inline; }

	/* フッター */
	.movie-top .top-footer{ padding: 44px 0 44px; }
	.movie-top .footer-logo{ width: 66%; margin: 0 auto 18px; }
}

/* ハンバーガーメニュー（デザイン未確定のため簡易表示に上書き） */
.movie-top #g-nav-sp{ background: #111; background-image: none; }
.movie-top .g-nav-logo{ width: 190px; margin: 0 auto 32px; }
.movie-top #g-nav-sp ul{ width: 100%; }
.movie-top #g-nav-sp li{ font-size: 16px; margin: 0 0 14px; text-align: left; }
.movie-top #g-nav-sp ul li a,
.movie-top #g-nav-sp ul li .nav-unavailable,
.movie-top .g-nav-close a{
	background: none; display: block; padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	font-family: "M PLUS 1p","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Meiryo",sans-serif;
	font-weight: 900;
}
.movie-top #g-nav-sp ul li .nav-unavailable{ opacity: .48; text-decoration: line-through; pointer-events: none; } /* 準備中：クリック不可 */
.movie-top #g-nav-sp ul li.is-unavailable{ cursor: not-allowed; }
.movie-top .g-nav-close{ margin-top: 20px; font-size: 14px; text-align: center; }
.movie-top .g-nav-close a{ border-bottom: 0; }

/* PCも項目が多いため2列にする */
@media all and (min-width: 768px) {
	.movie-top .g-nav-list-inner{ width: 70%; max-width: 640px; }
	.movie-top #g-nav-sp ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.movie-top #g-nav-sp li{
		width: 47%;
	}
}

/* SPは項目が多いため2列にする */
@media all and (max-width: 767px) {
	.movie-top .g-nav-list-inner{ width: 88%; max-width: none; }
	.movie-top #g-nav-sp ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 92%;
		margin: 0 auto 24px;
	}
	.movie-top #g-nav-sp li{
		width: 47%;
		font-size: 0.92em;
		margin: 0 0 1.1em;
	}
	.movie-top #g-nav-sp li a{ white-space: nowrap; }
}

/* アニメ公式HPへの遷移は、ナビゲーションの最終行を1カラムで表示 */
.movie-top #g-nav-sp li.nav-anime-link{ flex: 0 0 100%; width: 100%; }