@charset "UTF-8";

/* ============================================================
   Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');


/* ============================================================
   CSS Variables
   ============================================================ */
:root {
	--color-text: #000000;
	--color-base: #000000;
	--color-bg: #FFFFFF;
	--color-bg-sec: #306078;
	--font-base: 'Noto Sans JP', sans-serif;
	--font-bold: 800;
	--font-size: 2.0rem;
	--font-title: 2.0rem;
	--border-px: 3px;
	--padding-base: 40px 50px;
	--padding-per: 5%;
}

@media screen and (max-width: 768px) {
	:root {
		--font-size: 1.5rem;
		--border-px: 2px;
		--padding-base: 40px 15px;
		--font-title: 1.7rem;
	}
}


/* ============================================================
   Base / Reset
   ============================================================ */
html, body {
	height: 100%;
	width: 100%;
	font-size: 62.5%; /* 1.0rem = 10px */
	background-color: #FFFFFF;
}

* { box-sizing: border-box; }

body {
	font-family: var(--font-base);
	margin: 0;
	padding: 0;
	color: var(--color-text);
	font-size: var(--font-size);
	line-height: 1.9;
	letter-spacing: 0.2rem;
	font-weight: 600;
	background: var(--color-bg);
	animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

body.beige_mode {
	background-color: #DDD7C5;
}

body.beige_mode * {
	color: #071521;
}

@media screen and (max-width: 767px) {
	body { min-width: 100%; }
}


/* ============================================================
   Display Utilities
   ============================================================ */
.sp_view    { display: none; }
.pc_view    { display: block; }
.br_hide_sp { display: block; }
.br_hide_pc { display: none; }
.br_sp      { display: block; }
.br_hide    { display: inline; }

@media screen and (max-width: 767px) {
	.sp_view { display: block; }
	.pc_view { display: none; }
	.br_hide { display: none; }
}


/* ============================================================
   Typography
   ============================================================ */
h1 {
	font-family: "LINE Seed JP", sans-serif;
	font-size: clamp(2.4rem, 4vw + 1rem, 4.0rem);
	font-weight: 800;
	line-height: 1.4;
}

h2 {
	font-family: "LINE Seed JP", sans-serif;
	font-size: clamp(2.0rem, 3vw + 1rem, 3.2rem);
	font-weight: 700;
}

h3 {
	font-size: 1.8rem;
	font-weight: 700;
}

.ttl_pc,
.ttl_pc_wt {
	text-align: center;
	padding: 0 0 20px 0;
	margin: 0 auto;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 800;
	font-size: 3.2rem;
	letter-spacing: 0.15em;
	line-height: 1.2;
}

.ttl_pc    { color: var(--color-base); }
.ttl_pc_wt { color: var(--color-bg); }

@media screen and (max-width: 767px) {
	.ttl_pc,
	.ttl_pc_wt {
		width: 80%;
		padding: 30px 0 10px 0;
		font-weight: 900;
		font-size: 2.0rem;
		letter-spacing: 0.1em;
	}

	.ttl_pc_credits {
		width: 80%;
		text-align: center;
		padding: 10% 0 5% 0;
		margin: 0 auto;
		font-family: "LINE Seed JP", sans-serif;
		font-weight: 100;
		font-size: 1.7rem;
		letter-spacing: 0.25em;
		color: #43679e;
	}

	.ttl_pc_credits img { width: 100%; }
}

.readmore {
	width: 250px;
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #FFFFFF;
	border-bottom: #FFFFFF 3px solid;
}

img.svg_black {
	filter: brightness(0) saturate(100%);
}


/* ============================================================
   Layout
   ============================================================ */
#wrapper {
	background: #FFFFFF;
	background-position: center top;
	background-repeat: repeat;
	background-size: 250px 250px;
	min-width: 1100px;
}

#container {
	width: 1024px;
	margin: 0 auto;
	padding: 0 30px 70px 30px;
}

#contents {}

.contents {
	max-width: 1200px;
	min-width: 1024px;
	margin: 0 auto;
	padding: 30px 0 50px 0;
	text-align: center;
}

.contents_header,
.contents_header_wt {
	font-weight: var(--font-bold);
	font-size: var(--font-title);
}

.contents_header_wt { color: var(--color-bg); }

.contents_header img { width: 100%; }

.contents_photo {
	width: 100%;
	margin: 40px auto;
}

.contents_photo img { width: 100%; }

.contents_text {
	font-family: var(--font-base);
	color: var(--color-text);
	font-size: var(--font-size);
	width: 80%;
	font-weight: 400;
	letter-spacing: 0.0em;
	line-height: 2.3em;
	margin: 5% auto 0 auto;
	text-align: left;
}

@media screen and (max-width: 767px) {
	#wrapper {
		min-width: initial;
	}

	#wrapper img { max-width: 100%; }

	.contents {
		max-width: 100%;
		min-width: 100%;
		padding: 0;
	}

	.contents_header {
		width: 90%;
		margin: 0 auto;
	}

	.contents_header img { width: 100%; }

	.contents_photo {
		width: 90%;
		margin: 10% auto;
	}
}


/* ============================================================
   Navigation — PC
   ============================================================ */
#nav_container_pc {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	letter-spacing: 0.2rem;
	position: fixed;
	z-index: 999;
	padding: 0;
	margin: 0;
	box-shadow: 0 1rem 2rem hsl(0 0% 0% / 10%);
}

#nav_container_pc ul {
	height: 100px;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	list-style-type: none;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
	letter-spacing: 0.2em;
	text-align: center;
	line-height: 1.9rem;
}

#nav_container_pc ul li { margin: 0 20px; }

#nav_container_pc ul li span {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
}

#nav_container_pc ul li.nav_news { margin: 0; }

#nav_container_pc ul li.nav_news:nth-child(2) { margin-left: 7px; }

#nav_container_pc ul li a:link,
#nav_container_pc ul li a:visited {
	color: #000000;
	text-decoration: none;
}

#nav_container_pc ul li a,
#nav_container_pc ul li a::before,
#nav_container_pc ul li a::after {
	transition: all .3s;
}

#nav_container_logo {
	width: 170px;
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
}

#nav_container_logo img {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1600px) {
	#nav_container_pc ul { font-size: 1.6rem; }
	#nav_container_pc ul li { margin: 0 16px; }
	#nav_container_pc ul li span { font-size: 1.1rem; }
}

@media screen and (max-width: 1440px) {
	#nav_container_pc ul { font-size: 1.4rem; }
	#nav_container_pc ul li { margin: 0 13px; }
	#nav_container_pc ul li span { font-size: 1.0rem; }

	#nav_container_logo { width: 140px; }
}

@media screen and (max-width: 1300px) {
	#nav_container_pc ul { font-size: 1.2rem; }
	#nav_container_pc ul li { margin: 0 10px; }
	#nav_container_pc ul li span {
		font-size: 0.95rem;
		letter-spacing: 0.05em;
	}

	#nav_container_logo { width: 120px; }
}

@media screen and (max-width: 1200px) {
	#nav_container_pc ul { font-size: 1.05rem; }
	#nav_container_pc ul li { margin: 0 8px; }
	#nav_container_pc ul li span {
		font-size: 0.85rem;
		letter-spacing: 0.05em;
	}

	#nav_container_logo {
		width: 110px;
		left: 3%;
		top: 50%;
	}

	#nav_container_logo img {
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 1000px) {
	#nav_container_pc ul { font-size: 0.9rem; }
	#nav_container_pc ul li { margin: 0 6px; }
	#nav_container_pc ul li span {
		font-size: 0.7rem;
		letter-spacing: 0;
	}

	#nav_container_logo {
		width: 90px;
		left: 2%;
	}
}

@media screen and (max-width: 900px) {
	#nav_container_pc ul { font-size: 0.78rem; }
	#nav_container_pc ul li { margin: 0 4px; }
	#nav_container_pc ul li span {
		font-size: 0.62rem;
		letter-spacing: 0;
	}

	#nav_container_logo { width: 75px; }
}

.nav_sns_01 {
	height: 50%;
	position: absolute;
	right: 7.2%;
	top: 25%;
}

.nav_sns_01 img {
	width: 100%;
	height: 100%;
}

.nav_sns_02 {
	height: 50%;
	position: absolute;
	right: 4%;
	top: 25%;
}

.nav_sns_02 img {
	width: 100%;
	height: 100%;
}

/* Navigation — SP */
@media screen and (max-width: 767px) {
	nav.globalMenuSp {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		height: 100%;
		overflow: auto;
		width: 80%;
		max-width: 320px;
		background: #FFFFFF;
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
		transform: translateX(-100%);
		transition: transform 0.4s ease;
		-webkit-overflow-scrolling: touch;
	}

	nav.globalMenuSp.active { transform: translateX(0); }

	nav.globalMenuSp ul {
		margin: 0 auto;
		padding: 90px 0 0 0;
		width: 100%;
		text-align: left;
		font-family: "LINE Seed JP", sans-serif;
		font-weight: 600;
		font-size: 1.8rem;
		letter-spacing: 0.2em;
		color: #000000;
		list-style: none;
	}

	nav.globalMenuSp ul li {
		list-style-type: none;
		width: 100%;
		border-bottom: 1px solid #E8E8E8;
	}

	nav.globalMenuSp ul li a {
		display: block;
		color: #000000;
		padding: 20px 30px;
		text-decoration: none;
	}

	nav.globalMenuSp ul li span {
		display: block;
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		line-height: 1.4;
		color: #888888;
		font-weight: 400;
		margin-top: 2px;
	}

	nav.globalMenuSp ul li:nth-child(2) {
		display: block;
	}

	nav.globalMenuSp ul li a div.nav_news:nth-child(1) { margin-right: 0; }

	/* SP ヘッダーバー */
	.sp_header_bar {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		z-index: 3;
		padding: 0 20px;
	}

	/* ハンバーガーボタン */
	.navToggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		position: relative;
		top: auto;
		left: auto;
		width: 28px;
		height: 28px;
		cursor: pointer;
		z-index: 4;
		text-align: center;
	}

	.navToggle span {
		display: block;
		width: 28px;
		height: 2px;
		background: #000000;
		border-radius: 2px;
		transition: .35s ease-in-out;
		transform-origin: center;
	}

	.navToggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(-45deg);
	}

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

	.navToggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(45deg);
	}

	.overflowHidden { overflow: hidden; }

	/* メニュー背後のオーバーレイ */
	.overflowHidden::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}

	.nav_sns_01 {
		position: relative;
		right: 7.2%;
		top: 25%;
	}
}


/* ============================================================
   Main / Key Visual
   ============================================================ */
#top_pc_keyvisual { padding-top: 100px; }

#top_pc_keyvisual img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

#top_pc_keyvisual_inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

#top_bottom_pc {
	width: 100%;
	height: 100%;
	min-width: 1024px;
	position: relative;
	margin: 0 auto;
}

#top_bottom_pc img {
	display: block;
	margin: 0 auto;
	width: 100%;
}

/* SP キービジュアル */
@media screen and (max-width: 767px) {
	#top_sp {
		width: 100%;
		padding-top: 60px;
		background: none;
	}

	#top_sp img { width: 100%; }
}

/* バナー（キービジュアル内） */
#top_bnr_pc img,
#top_bnr_pc_03 img,
#top_bnr_pc_04 img,
#top_bnr_pc_05 img,
#top_bnr_pc_06 img { width: 100%; }

#top_bnr_pc    { position: absolute; top: 76%;    right: 3%;    width: 9%; }
#top_bnr_uso   { position: absolute; top: 76%;    right: 12.9%; width: 9%; }
#top_bnr_uso img { width: 100%; }
#top_bnr_sp    { position: absolute; top: 41%;    left: 4%;     width: 25%; }
#top_bnr_pc_01 { position: absolute; top: 51%;    right: 15.7%; width: 17%; }
#top_bnr_pc_02 { position: absolute; top: 10%;    right: 3%;    width: 4%; }
#top_bnr_pc_03 { position: absolute; top: 68%;    right: 7.4%;  width: 25%; }
#top_bnr_pc_04 { position: absolute; top: 78%;    right: 7.4%;  width: 25%; }
#top_bnr_pc_05 { position: absolute; top: 46.5%;  right: 11.3%; width: 17%; }
#top_bnr_pc_06 { position: absolute; top: 87.8%;  right: 7.4%;  width: 25%; }

#top_bnr_sp img  { width: 100%; }
#top_bnr_pc_01 img { width: 150%; }
#top_bnr_pc_02 img { width: 100%; }



/* ============================================================
   Trailer
   ============================================================ */
#trailer_pc {
	background-color: #ffff00;
	background-image: url("../img/bg_pattern.png");
	background-repeat: repeat;
	background-size: 241.5px 241.5px;
	padding: 140px 0;
}

#trailer_pc p { text-align: center; }

.trailer_container {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 60px auto 0;
	aspect-ratio: 16 / 9;
}

#trailer_yt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	box-shadow:
		inset 0 -3em 3em rgba(0, 0, 0, 0.1),
		0 0 0 0px rgb(255, 255, 255),
		0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

#trailer_pc ul {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 20px 0;
	list-style-type: none;
	color: #FFFFFF;
	width: 630px;
}

#trailer_pc ul li {
	width: 300px;
	margin: 5px;
	padding: 0;
	font-size: 1.5rem;
}

#trailer_pc ul li a img { width: 100%; }
#trailer_pc ul li a { color: #be8655; font-weight: 500; }

@media screen and (max-width: 767px) {
	#trailer_pc { padding: 30px 0 50px 0; }

	.trailer_container {
		aspect-ratio: unset;
		padding-top: 56.25%;
	}

	.trailer_container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#trailer_yt { margin: 0; }

	#trailer_pc ul {
		justify-content: center;
		padding: 5% 0 0 0;
		width: 80%;
	}

	#trailer_pc ul li { width: 100%; }
}


/* ============================================================
   Introduction
   ============================================================ */
#intro {
	width: 100%;
	background: url("../img/intro_bg.jpg") no-repeat;
	background-size: cover;
	padding: 140px 0;
}

#intro_photo {
	width: 100%;
	overflow: hidden;
}

#intro_photo img { width: 100%; }

.intro_photo_02 {
	max-width: 1575px;
	margin: 0 auto;
}

.intro_photo_02 img { width: 100%; }

#intro_photo_03_out {
	width: 100%;
	background: url("../img/about_photo_03_bg.png") repeat-x, #DBBA45;
	background-position: top;
	background-size: 1575px auto;
}

.intro_photo_03 {
	max-width: 1575px;
	margin: 0 auto;
}

.intro_photo_03 img { width: 100%; }

#intro_container_pc { padding: 30px 0 0 0; }

.intro_headline_pc {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10%;
}

#intro_container_pc p { margin: 30px 0; }

#intro_container_pc p.caption {
	font-size: 1.2rem;
	letter-spacing: 0.15em;
	line-height: 2.2em;
	color: #8B8B8B;
	font-weight: 400;
}

#intro_headline_l_pc { width: calc(800px - 380px); }

#intro_headline_r_pc { width: 380px; }

#intro_headline_r_pc img { width: 100%; }

#intro_text_pc {
	margin: 30px 0 40px 0;
	width: 800px;
}

#intro_attention {
	width: calc(100% - 60px);
	padding: 20px 30px;
	background: url("../img/intro_border_ptn.png") repeat;
	background-size: 55px 55px;
}

#intro_attention p {
	font-size: 1.2rem;
	color: #0037ee;
}

@media screen and (max-width: 767px) {
	#intro {
		background: none;
		padding: 30px 0 50px 0;
	}

	#intro_photo { overflow: visible; }
}


/* ============================================================
   Story
   ============================================================ */
#story {
	width: 100%;
	background: url("../img/trailer_bg.jpg") no-repeat;
	background-size: cover;
	padding: 80px 0;
}

#story_photo {
	width: 100%;
	overflow: hidden;
}

#story_photo img { width: 100%; }

@media screen and (max-width: 767px) {
	#story {
		background: none;
		padding: 30px 0 50px 0;
	}

	#story_photo { overflow: visible; }
}


/* ============================================================
   Comment Modal
   ============================================================ */
/* コメントモーダルのコンテンツ背景を黄色に */
.modaal-wrapper .modaal-content-container {
	background: #ffff00;
	padding: 40px 30px;
	border-radius: 16px;
	overflow: hidden;
}
.modaal-wrapper .modaal-container {
	border-radius: 16px;
	overflow: hidden;
}

.comment_modal_inner {
	padding: 0;
	max-width: 700px;
	margin: 0 auto;
}

.comment_modal_ttl {
	font-family: "LINE Seed JP", sans-serif;
	font-size: 3.2rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	color: #000000;
	text-align: center;
	margin: 20px 0 30px 0;
}

.comment_modal_item {
	padding: 30px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.comment_modal_item:last-child {
	border-bottom: none;
}

.comment_modal_name {
	font-family: "LINE Seed JP", sans-serif;
	font-size: 2.1rem;
	font-weight: 700;
	color: #000000;
	letter-spacing: 0.15em;
	margin: 14px 0 0 0;
	text-align: right;
}

.comment_modal_role {
	font-size: 65%;
	font-weight: 400;
}

.comment_modal_text {
	font-size: 1.4rem;
	color: #111111;
	line-height: 2.0em;
	margin: 0;
}

@media screen and (max-width: 767px) {
	.comment_modal_inner {
		padding: 10px 5px;
	}

	.comment_modal_ttl {
		font-size: 2.0rem;
		letter-spacing: 0.1em;
	}

	.comment_modal_name {
		font-size: 1.8rem;
	}

	.comment_modal_text {
		font-size: 1.3rem;
	}
}


/* ============================================================
   Cast
   ============================================================ */
#cast {
	width: 100%;
	background: #FFFFFF;
	background-size: 200px 200px;
	padding: 80px 0;
}

#cast_photo { width: 100%; }
#cast_photo img { width: 100%; }

.cast_inner {
	width: 90%;
	margin: 0 auto;
}

.cast_inner ul {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
	margin: 0 auto;
}

.cast_inner ul li {
	width: 48%;
	margin: 3% 0 0 0;
	text-align: center;
}

.cast_inner ul li img { width: 100%; margin-top: 30px; }
.cast_inner ul li img:nth-child(2) { width: 45%; }

.cast_inner_02 ul {
	width: 85%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
	margin: 0 auto;
}

.cast_inner_02 ul li {
	width: 22%;
	margin: 3% 0 0 0;
	text-align: center;
}

.cast_inner_02 ul li img { width: 100%; margin-top: 30px; }
.cast_inner_02 ul li img:nth-child(2) { width: 45%; }

@media screen and (max-width: 767px) {
	#cast { padding: 15% 0; }

	.cast_inner ul { width: 90%; }

	.cast_inner ul li { width: 100%; }

	.cast_inner ul li img:nth-child(2) { width: 85%; }

	.cast_inner_02 ul { width: 80%; }

	.cast_inner_02 ul li { width: 48%; }
}


/* ============================================================
   Cast Modal
   ============================================================ */
.modal_inner {
	background-size: 200px 200px;
	padding: 5%;
	margin: 0;
}

.modal_inner h4 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	color: #13406e;
	padding-bottom: 3%;
	margin: 0;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.modal_inner .modal_ttl {
	width: 100%;
	padding-bottom: 5%;
	margin: 0;
}

.modal_inner .modal_ttl img {
	width: 45%;
	padding-bottom: 0%;
	margin: 0;
}

.modal_container {
	color: #13406e;
	margin: 0;
	padding: 40px 0;
	border-top: dotted 1px #13406e;
	border-bottom: dotted 1px #13406e;
}

.modal_txt {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	line-height: 2.0em;
	color: #13406e;
	font-weight: 400;
	margin: 0 3%;
}

@media screen and (max-width: 767px) {
	.modal_inner h4 {
		font-size: 1.1rem;
		color: #666666;
		padding-bottom: 7%;
	}

	.modal_inner .modal_ttl img { width: 100%; }

	.modal_container {
		color: #000000;
		padding: 5% 0;
		border-color: #A6A6A6;
	}

	.modal_txt { font-size: 1.2rem; }
}


/* ============================================================
   Staff
   ============================================================ */
#staff {
	width: 100%;
	background-size: 200px 200px;
	padding: 80px 0;
}

.staff_inner {
	width: 90%;
	margin: 0 auto;
}

.staff_inner ul {
	width: 85%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
	margin: 0 auto;
}

.staff_inner ul li {
	width: 32%;
	margin: 0 0 10% 0;
	text-align: center;
}

.staff_inner ul li img { width: 100%; margin-top: 30px; }
.staff_inner ul li img:nth-child(2) { width: 45%; }

@media screen and (max-width: 767px) {
	.staff_inner ul { width: 90%; }

	.staff_inner ul li { width: 50%; }
}


/* ============================================================
   Staff Modal
   ============================================================ */
.staff_modal_inner {
	background-size: 200px 200px;
	padding: 5%;
	margin: 0;
}

.staff_modal_inner h4 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	color: #13406e;
	padding-bottom: 3%;
	margin: 0;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.staff_modal_inner .modal_ttl {
	width: 100%;
	padding-bottom: 5%;
	margin: 0;
}

.staff_modal_inner .modal_ttl img {
	width: 45%;
	padding-bottom: 0%;
	margin: 0;
}

@media screen and (max-width: 767px) {
	.staff_modal_inner h4 {
		font-size: 1.1rem;
		color: #666666;
		padding-bottom: 7%;
	}

	.staff_modal_inner .modal_ttl img { width: 100%; }
}


/* ============================================================
   Comment (コメント映像)
   ============================================================ */
#comment_pc {
	background: url("../img/footer_bg.jpg") no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	text-align: center;
	padding: 80px 0;
}

#comment_pc_keyvisual_inner {
	width: 80%;
	margin: 50px auto;
}

#comment_pc_keyvisual_inner img { width: 100%; }

#comment_visual {
	width: 100%;
	background: url("../img/comment_bg.jpg") no-repeat;
	background-size: cover;
	background-position: top center;
	padding: 80px 0;
}

.comment_inner {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	padding: 80px 0;
}

.comment_inner img { width: 80%; }

@media screen and (max-width: 767px) {
	#comment_visual { padding: 15% 0; }

	.comment_inner {
		padding: 10% 0;
	}

	.comment_inner img { width: 100%; }
}


/* ============================================================
   Theater (上映劇場)
   ============================================================ */
#theater {
	margin: 100px 0;
}

.theater_inner {
	text-align: center;
	margin: 50px 0 70px 0;
}

.theater_inner span { font-size: 2.8rem; }

@media screen and (max-width: 767px) {
	#theater {
		margin: 0 auto;
		width: 90%;
		padding: 30px 0 50px 0;
	}

	.theater_inner { margin: 0 0 70px 0; }

	.theater_inner span { font-size: 2.1rem; }
}


/* ============================================================
   Introduction
   ============================================================ */
#intro {
	background: #ffffff;
	padding: 140px 0;
}

.ttl_sub {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	display: block;
	margin-top: 12px;
}

.intro_inner {
	max-width: 900px;
	margin: 60px auto 0;
	padding: 0 40px;
}

.intro_photo {
	width: 100%;
	margin: 0 0 40px 0;
	background: #c0f0f0;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.intro_photo.intro_photo_02 {
	margin-bottom: 0;
}

.intro_photo img {
	width: 100%;
	display: block;
}

/* イントロ最初の画像を横幅いっぱいに */
.intro_photo:not(.intro_photo_02) {
	width: 98vw;
	max-width: 98vw;
	margin: 1vw 0 1vw 50%;
	transform: translateX(-50%);
}

/* 横スクロール無限ループ（右→左、10px/秒） */
.loop_slider {
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 60px 50%;
	transform: translateX(-50%);
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

.loop_slider_track {
	display: flex;
	width: max-content;
	animation: loop_scroll 63.25s linear infinite;
}

.loop_slider_track img {
	width: 2530px;
	height: 245px;
	display: block;
	flex-shrink: 0;
}

@keyframes loop_scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.intro_text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.8em;
	letter-spacing: 0.05em;
	color: #111;
	margin: 0 0 100px 0;
}

.intro_text p { margin: 0 0 1.5em 0; }

.intro_text ruby rt {
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.intro_text .intro_note {
	color: #e60012;
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: 2.5em;
}

/* ============================================================
   People / Director
   ============================================================ */
#people {
	background-color: #ffff00;
	background-image: url("../img/bg_pattern.png");
	background-repeat: repeat;
	background-size: 241.5px 241.5px;
	padding: 140px 0;
}

#director {
	background: #ffffff;
	padding: 140px 0;
}

.director_inner {
	max-width: 860px;
	margin: 60px auto 0;
	padding: 0 40px;
}

.director_name {
	text-align: center;
	margin-bottom: 30px;
}

.director_name .people_yomi {
	text-align: center;
}

.director_text {
	margin-top: 0;
}

.people_inner {
	max-width: 860px;
	margin: 60px auto 0;
	padding: 0 40px;
}

.people_item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	margin: 0 0 70px 0;
}

.people_item--right {
	flex-direction: row-reverse;
}

.people_item:last-child {
	margin-bottom: 0;
}

/* PEOPLE用: 控えめな横スライドイン */
@keyframes peopleFadeInRight {
	from { opacity: 0; transform: translate3d(60px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes peopleFadeInLeft {
	from { opacity: 0; transform: translate3d(-60px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.people_item.fadeInRight {
	animation-name: peopleFadeInRight;
}

.people_item.fadeInLeft {
	animation-name: peopleFadeInLeft;
}

/* イントロ本文用: 控えめな下からフェードイン */
@keyframes introFadeInUp {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.intro_text.fadeInUp,
.director_inner.fadeInUp {
	animation-name: introFadeInUp;
}

.people_photo {
	width: 230px;
	min-width: 230px;
	height: 230px;
	background: #00e5ff;
	overflow: hidden;
	flex-shrink: 0;
}

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

.people_profile { flex: 1; }

#people .people_photo { margin: 0 auto; }

.people_name {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 0;
	color: #000;
	margin: 0 0 6px 0;
	line-height: 1.2;
}

.people_yomi {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #000;
	margin-top: 8px;
}

.people_text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.9em;
	letter-spacing: 0.02em;
	color: #111;
	margin: 14px 0 0 0;
	text-align: justify;
}

/* Director は先頭 people_item を左寄せ写真で表示 */
#director .people_item {
	align-items: center;
}

@media screen and (max-width: 767px) {
	#intro { padding: 50px 0; }

	.intro_inner {
		padding: 0 20px;
		margin-top: 20px;
	}

	.intro_photo { min-height: 200px; }

	.loop_slider_track img { width: 1265px; height: 122.5px; }
	.loop_slider_track { animation-duration: 31.625s; }

	.intro_text { font-size: 1.8rem; }

	.intro_text .intro_note { line-height: 1.4em; }

	#people,
	#director { padding: 50px 0; }

	.people_inner {
		padding: 0 24px;
		margin-top: 30px;
	}

	.people_item,
	.people_item--right {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		margin-bottom: 50px;
	}

	.people_photo {
		width: 55%;
		min-width: 55%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	#people .people_name,
	#people .people_yomi {
		text-align: center;
	}

	.people_name { font-size: 2.2rem; }
	.people_yomi { font-size: 1.2rem; }
	.people_text { font-size: 1.5rem; }
}

/* ============================================================
   Footer
   ============================================================ */
#footer_container_pc {
	width: 100%;
	padding: 140px 0;
	background-color: #ffff00;
	background-image: url("../img/bg_pattern.png");
	background-repeat: repeat;
	background-size: 241.5px 241.5px;
}

#footer_visual {
	width: 80%;
	max-width: 700px;
	margin: 0 auto;
}

#footer_visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================================
   ムビチケ
   ============================================================ */

#ticket {
	width: 100%;
	margin: 0 auto;
	padding: 3% 0 5% 0;
	background: #ffffff;
}

#mvtk-widgets-container {
	margin: 0 auto 40px auto;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#ticket {
		padding: 6% 0;
	}
}


/*--------------------------
Banner Flex
--------------------------*/

#bnr_flex_container {
	width: 100%;
	margin-top: 40px;
}

#bnr_flex_inner {
	width: 840px;
	margin: 0 auto 3% auto;
}

#bnr_flex_container ul {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}

#bnr_flex_container ul li {
	width: 400px;
	height: 100px;
	margin: 0;
}

#bnr_flex_container ul li img {
	width: 400px;
	height: 100px;
	object-fit: contain;
}

@media screen and (max-width: 767px) {
#bnr_flex_container {
	width: 100%;
}

#bnr_flex_inner {
	width: 90%;
	margin: 0 auto;
}

#bnr_flex_container ul {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}

#bnr_flex_container ul li {
	width: 100%;
	height: auto;
	margin: 0;
}

#bnr_flex_container ul li img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

#bnr_flex_container ul li.bnr_sns_item {
	width: 44px;
}
}


/* ============================================================
   News — List
   ============================================================ */
#blog_container {
	background: #ffffff;
	padding: 180px 0 140px 0;
}

#blog_container_news {
	max-width: 900px;
	margin: 60px auto 0;
	padding: 0 40px;
}

.news_list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #E8E8E8;
}

article.news {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	gap: 4px 30px;
	padding: 32px 0;
	border-bottom: 1px solid #E8E8E8;
}

article.news time {
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	color: var(--color-bg-sec);
	flex: 0 0 auto;
}

article.news h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1.7;
	flex: 1 1 460px;
	margin: 0;
}

article.news a:link,
article.news a:visited {
	color: var(--color-text);
	text-decoration: none;
}

article.news a:hover { opacity: 0.6; }

#blog_container .no_news {
	text-align: center;
	padding: 60px 0;
	font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 767px) {
	#blog_container { padding: 110px 0 90px 0; }

	#blog_container_news { padding: 0 20px; }

	article.news {
		flex-flow: column;
		gap: 8px;
		padding: 24px 0;
	}

	article.news h2 { font-size: 1.5rem; }
}


/* ============================================================
   News — Pagination
   ============================================================ */
.pagination { margin-top: 60px; }

.pagination ul.page-numbers {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination ul.page-numbers li { margin: 0; }

.pagination ul.page-numbers li a,
.pagination ul.page-numbers li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid #000000;
	border-radius: 50%;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--color-text);
	text-decoration: none;
}

.pagination ul.page-numbers li a:hover { opacity: 0.6; }

.pagination ul.page-numbers li span.current {
	background: var(--color-bg-sec);
	border-color: var(--color-bg-sec);
	color: #FFFFFF;
}

.pagination ul.page-numbers li a.prev,
.pagination ul.page-numbers li a.next {
	border-radius: 22px;
	min-width: 70px;
	padding: 0 20px;
}

@media screen and (max-width: 767px) {
	.pagination ul.page-numbers li a,
	.pagination ul.page-numbers li span {
		min-width: 38px;
		height: 38px;
		font-size: 1.2rem;
	}
}


/* ============================================================
   News — Single
   ============================================================ */
.news_single {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 40px;
}

.news_single time {
	display: block;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	color: var(--color-bg-sec);
	margin-bottom: 16px;
}

.news_single_ttl {
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1.5;
	margin: 0 0 50px 0;
	padding-bottom: 40px;
	border-bottom: 1px solid #E8E8E8;
}

.news_single .article-content {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2.1;
	letter-spacing: 0.02em;
}

.news_single .article-content img { max-width: 100%; height: auto; }
.news_single .article-content p { margin: 0 0 1.6em 0; }

.nav-below {
	max-width: 800px;
	margin: 60px auto 0;
	padding: 30px 40px 0 40px;
	border-top: 1px solid #E8E8E8;
	display: flex;
	justify-content: space-between;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
}

.nav-below a:link,
.nav-below a:visited { color: var(--color-text); text-decoration: none; }
.nav-below a:hover { opacity: 0.6; }

.news_back {
	display: block;
	max-width: 800px;
	margin: 60px auto 0;
	padding: 0 40px;
	text-align: center;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
}

.news_back a:link,
.news_back a:visited { color: var(--color-text); text-decoration: none; }
.news_back a:hover { opacity: 0.6; }

@media screen and (max-width: 767px) {
	.news_single,
	.nav-below,
	.news_back { padding-left: 20px; padding-right: 20px; }

	.news_single_ttl { font-size: 2.0rem; padding-bottom: 24px; margin-bottom: 30px; }

	.nav-below { flex-flow: column; gap: 16px; }
}