@charset "UTF-8";
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;800;900&display=swap');/*font-family: 'Noto Sans JP', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600&display=swap');/*font-family: 'Noto Serif JP', serif;*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');/*font-family: "Zen Old Mincho", serif;*/

@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap');/*font-family: "LINE Seed JP", sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');/*font-family: "Cinzel", serif;*/

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

/****************************************
Smart phone BASE 767
*****************************************/
.sp_view{display: none;}
.br_hide_sp {display: block;}
.br_hide_pc {display: none;}
.br_sp{display:block}

.br_hide {
	display: inline;
}

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

/*--------------------------
COMMON
--------------------------*/

/*-----------------------
Base Settings
-------------------------*/
:root {
	--color-text: #3B2400;
	--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 {
        /* PCの2.0remから小さくする（例：1.6rem = 16px） */
        --font-size: 1.5rem;
		--border-px:2px;
		--padding-base:40px 15px;
		--font-title: 1.7rem;
    }
}

* { 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;
}

/*fade-in START*/

body {
    animation: fadeIn 2s ease 0s 1 normal;
	background: var(--color-bg);
}

body.beige_mode * {
    color: #071521;
}

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


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

/*fade-in END*/

#wrapper {
   
}

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

#contents {
	}

p {
/*	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;*/
}
/* 見出し：clamp()を使って画面幅に応じて無段階に伸縮させる */
h1 {
  /* スマホで2.4rem(24px) 〜 PCで4.0rem(40px) まで滑らかに変化 */
	font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(2.4rem, 4vw + 1rem, 4.0rem);
  font-weight: 800;
  line-height: 1.4;
}

h2 {
  /* スマホで2.0rem 〜 PCで3.2rem */
	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;
}
.ttl_pc  {
	color:  var(--color-bsse);
}

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


@media screen and (max-width:767px){
	
	.ttl_pc , .ttl_pc_wt {
		text-align: center;
		padding: 0 0 20px 0;
		margin: 0 auto;
		font-family: "Cinzel", serif;
		font-weight: 600;
		font-size: 2.5rem;
		letter-spacing: 0.25em;
	}
	.ttl_pc  {
		color:  var(--color-bsse);
	}

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

.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%);
}
/*--------------------------
COMMON
--------------------------*/

#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 {
	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;
}

/*--------------------------
NAVIGATION
--------------------------*/
#nav_container_pc {
	width: 100%;
	font-family: 'Balthazar', serif;
	background-size: 200px 200px;
	letter-spacing: 0.2rem;
	position: fixed;

	/* --- ガラス効果の設定 ここから --- */
	background-color: rgba(255, 255, 255, 0.8); /* 白を60%の濃さ（半透明）にする */
	backdrop-filter: blur(10px); /* メニューの後ろの要素をぼかす */
	-webkit-backdrop-filter: blur(10px); /* iPhoneやMac(Safariブラウザ)への対応 */
	border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* ガラスの端のツヤ感を表現 */
	/* --- ガラス効果の設定 ここまで --- */

	z-index: 999;
	padding: 0;
	margin: 0 0;
	/* ガラスの透明感に合わせて、影を少し柔らかく(20% -> 10%)調整しました */
	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 0 0 0;
	list-style-type: none;
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: 0.2em;
	color: #bb0007;
	text-align: center;
	line-height: 1.9rem;
}

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

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

#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:#bb0007;
	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: 20%;
}

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

@media screen and (max-width:1200px){

	#nav_container_pc ul {
		
		font-size: 1.2rem;

	}

	#nav_container_pc ul li span {
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		
	}
	
	#nav_container_logo {
	width: 120px;
	position: absolute;
	left: 5%;
	top: 29%;
}

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

.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%;
}






/*--------------------------
MAIN
--------------------------*/
#top_pc_keyvisual{
	padding-top: 0;
	
}
	
#top_pc_keyvisual img {
	display: block;/*画像下の1pxの隙間を消す*/
	margin: 0 auto;
	width: 100%;
}

#top_pc_keyvisual_inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	/*max-width: 1800px;*/
}

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

#top_bottom_pc img {
	display: block;/*画像下の1pxの隙間を消す*/
	margin: 0 auto;
	width: 100%;
}

#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 img {
	width: 100%;
}

#top_bnr_pc {
    position: absolute;
	top:68%;
	right: 3%;
    width: 9%;
}

#top_bnr_sp img {
	width: 100%;
}

#top_bnr_sp {
    position: absolute;
	top:41%;
	left: 4%;
    width: 25%;
}

#top_bnr_pc_05 img {
	width: 100%;
}

#top_bnr_pc_05 {
    position: absolute;
	top: 46.5%;
	right: 11.3%;
    width: 17%;
}

#top_bnr_pc_01 {
    position: absolute;
	top: 51%;
	right: 15.7%;
    width: 17%;
}

#top_bnr_pc_01 img {
	width: 150%;
}

#top_bnr_pc_02 {
    position: absolute;
	top: 10%;
	right: 3%;
    width: 4%;
}

#top_bnr_pc_02 img {
	width: 100%;
}

#top_bnr_pc_03 {
    position: absolute;
	top: 68%;
	right: 7.4%;
    width: 25%;
}

#top_bnr_pc_03 img {
	width: 100%;
}

#top_bnr_pc_04 {
    position: absolute;
	top:78%;
	right: 7.4%;
    width: 25%;
}

#top_bnr_pc_04 img {
	width: 100%;
}



#top_bnr_pc_06 {
    position: absolute;
	top: 87.8%;
	right: 7.4%;
    width: 25%;
}

#top_bnr_pc_06 img {
	width: 100%;
}


#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%;
} 
/*--------------------------
Trailer
--------------------------*/
#trailer_pc {
    background: #FFFFFF;
	background-size: cover;
	padding: 80px 0;
}

#trailer_pc p {
    text-align: center;
}
.trailer_container {
    position: relative;
    width: 100%;
    max-width: 1440px;   /* PCでの最大幅 */
    margin: 0 auto;
    aspect-ratio: 16 / 9;   /* padding-top をやめてこれに変更 */
}
#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 {
	margin: 5px;
    /*border: #be8655 1px solid;*/
    padding: 0 0;
    font-size: 1.5rem;
}
#trailer_pc ul li{
	width: 300px;
}
#trailer_pc ul li a img{
	width: 100%;
}
#trailer_pc ul li a {
    color: #be8655;
    font-weight: 500;
}

/*--------------------------
INTRODUCTION
--------------------------*/
#intro {
	width: 100%;
	background: url("../img/intro_bg.jpg") no-repeat;
	background-size:  cover;
	padding: 80px 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%;
	/*display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;*/
}

#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: #CD2629;
	background: url("../img/intro_border_ptn.png") repeat;
	background-size: 55px 55px;
}

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

/*--------------------------
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%;
}





/*--------------------------
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; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	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; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	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%;
}

/*--------------------------
CAST modal
--------------------------*/
.modal_inner {
	/*background: url("../img/bg_pattern_blue.jpg") repeat;*/
	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;
	margin-bottom: 10px;
	color: #13406e;
	font-weight: 400;
	margin: 0 3%;
}

/*--------------------------
STAFF
--------------------------*/
#staff {
	width: 100%;
	/*background: url("../img/bg_pattern_beige.jpg") repeat;*/
	background-size: 200px 200px;
	padding: 80px 0;
}

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



.staff_inner ul {
	width: 85%;
	display: flex;
	flex-direction: row; /*子要素の並ぶ向き...縦配置column*/
	flex-wrap: wrap; /*子要素の折り返し*/
	justify-content: space-between; /*水平方向の揃え flex-end center space-between space-around*/
	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%;
}

/*--------------------------
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;
}



/*--------------------------
COMMENT
--------------------------*/
#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%;
}

/*--------------------------
Theater
--------------------------*/
#theater {
	margin: 100px 0;
}
.theater_inner {
	text-align: center;
	margin: 50px 0 70px 0;
}

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

/*--------------------------
FOOTER
--------------------------*/

#footer_container_pc {
	width: 100%;
	background: #FFFFFF;
	background-size: cover;
}


#footer_credits_pc {
    width: 100%;
    text-align: center;
    margin: 0 0 5% 0;
    padding: 5% 0;
}

#footer_credits_pc img{
	width: 15%;
}