@charset "UTF-8";
/* CSS Document */

:root {
	--base14-sp: 3.73vw;
	--base20-sp: 5.33vw;
	--base18-pc: min(1.32vw, 18px);
	--base20-pc: min(1.466vw, 20px);
	--base28-pc: min(20vw, 28px);
	--base40-pc: min(2.93vw, 40px);
	--base50-pc: min(3.6vw, 50px);
  }

/*フォント（明朝）*/
.mincho-exbold {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}

.mincho-bold {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

.mincho {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.gothic {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

img {
 width:100%;
 vertical-align: bottom;
}

/*テキストリンク*/
a {
 text-decoration:none;
 color:#fff;
}

/*マージン指定*/
.mgt20 {
 margin-top:20px !important;
}
.mgb30 {
 margin-bottom:30px !important;
}

/*注意書き*/
.attention {
 font-size:12px;
 line-height:1.5em;
}
.align-r {
	text-align: right;
}

/*画像置換用*/
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

/*テキスト関連*/
.txtGr {
	color: #666 !important;
}
.txtb {
 font-weight:bold;
}
.txt12 {
 font-size:12px !important;
}
.txt14 {
 font-size:14px !important;
}
.copylight-box {
 display:inline-block;
 width:100%;
 text-align:right;
 font-size:12px !important;
}
.ta-justify {
 text-align:justify !important;
 text-justify:inter-ideograph !important;
}

/*PC用要素の非表示*/
.pc-hide {
 display:block !important;
	}
.sp-hide {
 display:none !important;
}
@media screen and (min-width:768px) {
.pc-hide {
 display:none !important;
}
.sp-hide {
 display:block !important;
}
}

/*PC、スマホ共通要素の非表示*/
.common-hide {
 display:none !important;
}

body {
 font-size:14px;
 line-height:1.7em;
 width:100%;
 color:#000;
	overflow-x: hidden;
	position: relative;
	background: #222;
}
/* body#under-theatre {
	background: #fff;
} */
body.under-theatre-y {
	background: #fff url(/images/top/img-05-y@2x.jpg) center top / cover no-repeat;
	background-attachment: fixed;
}
body.under-theatre-t {
	background: #fff url(/images/top/img-05-t@2x.jpg) center top / cover no-repeat;
	background-attachment: fixed;
}
body#under-theatre::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
}
@media screen and (min-width:768px) {
body {
	font-size: 18px;
	}
}

/* #mainimage {
	width: 100%;
	padding-bottom: 180%;
 background:url(../images/top/mainimage.jpg) center bottom / contain no-repeat;
	position: relative;
}
@media screen and (min-width:768px) {
#mainimage {
	height: 0px;
	padding-bottom: 73%;
 background:url(../images/top/mainimage.jpg) center top / cover  no-repeat;
}
}
@media screen and (min-width:1280px) {
#mainimage {
	padding-bottom: 935px;
 background:url(../images/top/mainimage.jpg) center top / 1280px auto no-repeat,
	url(../images/top/mainimage-back.jpg) center top /  1280px auto repeat-x;
}
}
 */

.logo-asa10 {
width: min(17.3vw,100px);
position: absolute;
left: 10px;
top: 10px;
z-index: 4;
}
/* @media screen and (max-width:767px) {
	.logo-asa10 {
		top: 6px;
	}
} */
.logo-asa10 a {
transition: all 0.2s;
}
.logo-asa10 a:hover {
opacity: 0.7;
}

@media screen and (min-width:768px) {
.logo-asa10 {
width: min(6.6vw,100px);
position: absolute;
left: auto;
right: min(1.6vw,25px);
top: min(1.6vw,25px);
}
}

#mainimage {
	position: relative;
}
/* @media screen and (max-width:767px) {
	#mainimage {
		padding-top: 72px;
		background: #fff;
	}	
} */

.mainimage-pc {
	display: none;
}
@media screen and (min-width:768px) {
	.mainimage-pc {
		display: flex;
		flex-direction: row;
	}
	.mainimage-pc-item {
		position: relative;
	}
	.mainimage-sp {
		display: none;
	}
}

.mainimage-copy {
	width: 13.6vw;
	height: 42.3vw;
	background: url(/images/top/sub-copy-sp.svg) center center / contain no-repeat;
	text-indent: 101%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	bottom: var(--base20-sp);
	left: var(--base20-sp);
}
.mainimage-kurosawa-name {
	position: absolute;
	width: 96%;
	left: 2%;
	top: 54.5%;
}
.mainimage-kurosawa-name img {
	vertical-align: top;
}
@media screen and (min-width:768px) {
	.mainimage-copy {
		width: 7.6vw;
		height: 20vw;
		background: url(/images/top/sub-copy-pc.svg) center center / contain no-repeat;
		bottom: 2.2vw;
		left: calc(50% - 3.8vw);
	}
	.mainimage-kurosawa-name {
		width: 53%;
		left: 20.5vw;
		top: 1.8vw;
	}
	
}

@media screen and (min-width:768px) {
.work-mv {
	height: 100vw;
}
}


.schedule-item {
	display: block;
	width: 40.5%;
	height: 0px;
	padding-top: 11.95%;
	text-indent: 100%;
 	white-space: nowrap;
 	overflow: hidden;
	position: absolute;
}
.mainimage-sp-y-schedule {
	background:url(/images/top/schedule-y-w.svg) center center / contain no-repeat;
	margin: auto;
	top: 45vw;
	left: 3.7vw;
}
.mainimage-sp-t-schedule {
	background:url(/images/top/schedule-t-w.svg) center center / contain no-repeat;
	margin: auto;
	 bottom: 20vw;
	 right: var(--base20-sp);
}
@media screen and (min-width:768px) {
	.schedule-item {
		width: 47.4%;
		padding-top: 14%;
		position: absolute;
		bottom: 3%;
	   }
	.mainimage-pc-list-item-y-schedule {
		background:url(/images/top/schedule-y-w.svg) center center / contain no-repeat;
		left: calc((100% - 47.4%) / 2);
	}
	.mainimage-pc-list-item-t-schedule {
		background:url(/images/top/schedule-t-w.svg) center center / contain no-repeat;
		left: calc((100% - 47.4%) / 2);
	}
}

.work-mv-y-schedule {
	background:url(/images/top/schedule-y-w.svg) center center / contain no-repeat;
	margin: auto;
	bottom: var(--base20-sp);
	right: var(--base20-sp);
}
.work-mv-t-schedule {
	background:url(/images/top/schedule-t-w.svg) center center / contain no-repeat;
	margin: auto;
	bottom: var(--base20-sp);
	right: var(--base20-sp);
}
@media screen and (min-width:768px) {
	.work-mv-y-schedule,
	.work-mv-t-schedule {
		width: 23.7%;
		padding-top: 7%;
		bottom: 4.4vw;
	}
	.work-mv-y-schedule {
		background:url(/images/top/schedule-y-b.svg) center center / contain no-repeat;
		right: auto;
		left: 4.4vw;
	}
	.work-mv-t-schedule {
		right: 4.4vw;
	}
}
/* 0.5～0.7 */
/* @media screen and (min-width:768px) and (max-aspect-ratio: 10/7) {
	.schedule-item {
        position: fixed;
		bottom: 3%;
    }
} */

/* 0.5以下 */
/* @media screen and (min-width:768px) and (max-aspect-ratio: 2/1) {
	.schedule-item {
        position: absolute;
        bottom: calc(100vh - (50vw + 3%));
    }
} */

.page-ti-1 {
	font-size: 6.4vw;
	
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	line-height: 1em;
	padding: 0.2em;
	margin-bottom: var(--base20-sp);

	background: linear-gradient(90deg, rgba(223, 0, 0, 0) 0%, rgba(223, 0, 0, 0.65) 35%, rgba(223, 0, 0, 0.65) 65.38%, rgba(223, 0, 0, 0) 100%);
}
.page-ti-1 span {
	display: block;
	font-style: inherit;
	font-weight: inherit;
}
@media screen and (min-width:768px) {
	.page-ti-1 {
		font-size: var(--base40-pc);
		margin-bottom: min(51vw, 70px);
	}
}


.page-ti-2 {
font-size: 7vw;
line-height: 1.3em;
margin-bottom: var(--base20-sp);

font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.page-ti-2 span {
	display: block;
	font-style: inherit;
	font-weight: inherit;
}
@media screen and (min-width:768px) {
	.page-ti-2 {
		font-size: min(5.5vw, 75px);
		margin-bottom: var(--base20-pc);
	}
}

.page-ti-3 {
	display: flex;
	flex-direction: row;
	height: 8vw;
	margin-left: -5.9vw;
	margin-bottom: var(--base20-sp);
}
#under-theatre .page-ti-3 {
	/* height: 50px; */
	margin-left: 0px;
	padding-top: min(5vw, 40px);
}
@media screen and (max-width:767px) {
#story-y .page-ti-3 {
	margin-bottom: 65vw;
}
#staff-y .page-ti-3 {
	margin-bottom: 37.3vw;
}
#story-t .page-ti-3 {
	margin-bottom: 37.3vw;
}
#staff-t .page-ti-3 {
	margin-bottom: 50vw;
}
.theatre .page-ti-3 {
	margin-bottom: 62vw;
}
#under-theatre .page-ti-3 {
	height: auto;
}
#under-theatre.menu-open .page-ti-3 {
	position: absolute;
}
}

.page-ti-3-work {
	display:flex;
	align-items: center;
	height: 100%;
	background: rgba(255,255,255,0.4);
	padding-left: 4vw;
	padding-right: 3vw;
	position: relative;
}
.page-ti-3-work img {
	width: auto;
	height: 5.6vw;
}
@media screen and (max-width:767px) {
	#under-theatre .page-ti-3-work {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	#under-theatre .page-ti-3-work img{
		height: 11vw;
	}
}
.page-ti-3-name {
	display:flex;
	align-items: center;
	height: 100%;
	background: rgba(233,0,0,0.6);
	font-size: 4.8vw;
	padding-left: 3vw;
	padding-right: 3vw;
	position: relative;

	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.page-ti-3-name::after {
	content: "";
	display: block;
	width: 1em;
	height: 100%;
	background: linear-gradient(to right, rgba(233,0,0,0.6) 0%, rgba(233,0,0,0) 100%);
	position: absolute;
	top: 0px;
	right: -1em;
}
@media screen and (min-width:768px) {
	.page-ti-3 {
		flex-direction: column;
		width: max-content;
		height: auto;
		margin-left: max(-11vw, -150px);
		margin-bottom: var(--base50-pc);
	}
	#under-theatre .page-ti-3 {
		margin-left: 0px;
	}
		
	#story-y .page-ti-3 {
		margin-bottom: min(14vw, 210px);
	}
	#story-t .page-ti-3 {
		margin-bottom: min(6vw, 210px);
	}
	#staff-y .page-ti-3 {
		margin-bottom: min(10vw, 150px);
	}
	#staff-t .page-ti-3 {
		margin-bottom: min(15vw, 150px);
	}
	.theatre .page-ti-3 {
		margin-bottom: min(10vw, 150px);
	}

	.page-ti-3-work {
		padding: min(1.815vw, 25px) min(3.63vw, 50px) min(0.7vw, 10px);
		background: linear-gradient(to right, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 75%, rgba(255,255,255,0) 100%);
	}
	.page-ti-3-name {
		display: block;
		text-align: center;
		font-size: var(--base40-pc);
		line-height: 1em;
		box-sizing: content-box;
		padding: min(0.733vw, 10px) 0px;
		background: linear-gradient(to right, rgba(233,0,0,0.6) 0%, rgba(233,0,0,0.6) 75%, rgba(233,0,0,0) 100%);
	}
	.page-ti-3-work img {
		width: min(14.6vw, 200px);
		height: auto;
	}
	.page-ti-3-name::after {
		display: none;
	}
}
/* .page-ti {
	width: 84.8%;
	position: absolute;
	right: 7.46%;
	top: 31vw;	
}
@media screen and (min-width:768px) {
.page-ti {
	width: 32.4%;
	position: absolute;
	right: 8.6%;
	top: 3%;	
}
}
@media screen and (min-width:1280px) {
.page-ti {
	width: 415px;
	position: absolute;
	right: calc((100vw - 1280px) / 2 + 110px);
	top: 32.9px;	
}
} */

article {
overflow: hidden;
}

section {
	position: relative;
	width:100%;
	padding-bottom: 0px;
}
@media screen and (max-width:767px) {
	.theatre {
		height: 112vw;
		min-height: 100vw;
	}
	#theatre-t.theatre {
		height: calc(112vw + 25px);
	}
}
@media screen and (min-width:768px) {
	.story,
	.staff {
		/* height: 56.1vw; */
		max-height: 842px;
	}
	.theatre {
		height: 56.1vw;
		max-height: calc(842px + 25px);
	}
}
/* @media screen and (min-width:768px) {
section {
	height: min(53.3vw, 800px);
}
section#intro {
	height: clamp(505px, 53.3vw, 800px);
}
section#comment,
section#character,
section#movie {
	height: auto;
}
} */

.section-base,
.section-base2,
.section-base3,
.section-base4 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

.section-base__color {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
}

.section-base__color-y {
	background: #65B675;
	mix-blend-mode: multiply;
}

.section-base__color-t {
	background: #BF85B6;
	mix-blend-mode: multiply;
}

.section-base__pic--1,
.section-base__pic--2 {
	height: 100%;
	position: absolute;
	top: 0px;
}
.section-base__pic--1 {
	z-index: 3;
}
.section-base__pic--2 {
	z-index: 1;
}

.section-base img {
	width: auto;
	height: 100%;
}
@media screen and (max-width:767px) {
	#story-y .section-base__pic--1 {
		height: 112vw;
		left: -24%;
	}
	#story-y .section-base__pic--2 {
		height: 112vw;
		right: -64%;
	}

	#theatre-y .section-base__pic--1 {
		right: -11%;
	}
	#theatre-y .section-base__pic--2 {
		left: -8%;
	}

	#story-t .section-base__pic--1 {
		height: 112vw;
		right: -14%;
		top: -7%;
	}
	#story-t .section-base__pic--2 {
		height: 112vw;
		left: -43%;
		top: 4%;
	}
	#staff-t .section-base__pic--1 {
		height: 100vw;
		right: -52%;
		top: 8%;
	}
	#staff-t .section-base__pic--2 {
		height: 100vw;
		left: 0%;
		top: -2%;
	}


	#theatre-t .section-base__pic--1 {
		left: -7%;
	}
	#theatre-t .section-base__pic--2 {
		right: -15%;
	}

}
@media screen and (min-width:768px) {
	.section-base__pic--2 {
		right: 0px;
	}

	.story .section-base__pic--1 {
		height: min(56.25vw, 100%);
		left: 0px;
	}
	.story .section-base__pic--2 {
		height: min(56.25vw, 100%);
		right: 0px;
	}
	/* #story-y .section-base__pic--1 {
		height: 112vw;
		left: -24%;
	}
	#story-y .section-base__pic--2 {
		height: 112vw;
		right: -64%;
	} */

	#theatre-y .section-base__pic--1,
	#story-t .section-base__pic--1,
	#staff-t .section-base__pic--1 {
		left: auto;
		right: 0px;
	}
	#theatre-y .section-base__pic--2,
	#story-t .section-base__pic--2,
	#staff-t .section-base__pic--2 {
		right: auto;
		left: 0px;
	}
}


.section-base2__pic {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50%;
	overflow: hidden;
}
.section-base2__pic picture {
    display: block;
    width: 100%;
    height: 100%;
}
.section-base2__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.section-base2__color {
	background: linear-gradient(180deg, rgba(40, 152, 64, 0.5) 0%, rgba(40, 152, 64, 0.25) 35%, rgba(144, 44, 138, 0.25) 65%, rgba(144, 44, 138, 0.5) 100%);
}

#award .section-base2__pic--1 img {
    object-position: center 32%;
}

#movie .section-base2__pic--1 img {
    object-position: left 25%;
}

#movie .section-base2__pic--2 img {
    object-position: right center;
}

#explanation .section-base2__pic--1 img {
    object-position: center 10%;
}
#explanation .section-base2__pic--2 img {
    object-position: center 30%;
}



.section-base3 {
    display: block;
    width: 100%;
    height: 100%;
}
.section-base3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.section-base4__pic--1,
.section-base4__pic--2,
.section-base4__pic--3,
.section-base4__pic--4 {
	height: 140vw;
	position: absolute;
	top: 0px;
}
.section-base4__pic--1 {
	left: -52%;
	top: -11%;
	z-index: 3;
}
.section-base4__pic--2 {
	left: -40%;
	top: auto;
	bottom: 0px;
	z-index: 1;
}
.section-base4__pic--3 {
	right: -25%;
	top: -18%;
	z-index: 1;
}
.section-base4__pic--4 {
	right: -37%;
	top: -11%;
	z-index: 3;
}

.section-base4 img {
    width: auto;
    height: 100%;
}

@media screen and (min-width:768px) {
.section-base4__pic--1,
.section-base4__pic--2,
.section-base4__pic--3,
.section-base4__pic--4 {
	height: 123.6%;
	position: absolute;
	top: -19%;
}
.section-base4__pic--1 {
	left: -6%;
	z-index: 3;
}
.section-base4__pic--2 {
	left: 0px;
	bottom: 0px;
	z-index: 1;
}
.section-base4__pic--3 {
	right: 0px;
	z-index: 1;
}
.section-base4__pic--4 {
	right: -6%;
	z-index: 3;
}
}


.award-list {
	display: flex;
	flex-direction: column;
	gap: var(--base20-sp);
}
.award-list-item {
	color: #FFD277;
	line-height: 1.3em;
	text-align: center;
	font-size: 3.7vw;

	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.award-list-item span {
	display: block;
	font-style: inherit;
	font-weight: inherit;
}
@media screen and (min-width:768px) {
	.award-list {
		gap: var(--base20-pc);
	}	
	.award-list-item {
		font-size: var(--base28-pc);
	}
}

/*パララックス*/
section.between {
overflow: hidden;
}
.between-inner {
  height: 100vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(0);
min-width: 100%;
}

.between1-inner {
background-image: url(/images/top/img-04-y.jpg) ;
}
.between2-inner {
	background-image: url(/images/top/img-06-y.jpg) ;
}
.between3-inner {
	background-image: url(/images/top/img-04-t.jpg) ;
}
.between4-inner {
	background-image: url(/images/top/img-05-t.jpg) ;
}


section.between {
	height: 56.25vw;
}

@media screen and (min-width:768px) {
section.between {
	clip-path: inset(0);
	position: relative;
}
}
@media screen and (min-width:1330px) {
section#between3 .between-inner,
section#between4 .between-inner {
  background-position: center top;
}
}

.inner {
	padding: 8vw 6vw 13.3vw;
 margin:auto;
 text-align:justify;
 text-justify:inter-ideograph;
	position: relative;
	z-index: 1;
	color: #fff;
}

@media screen and (min-width:768px) {
.inner {
	padding: min(7.33vw, 100px) min(11vw, 150px);
}
}

.cont-block {
	max-width: 1200px;
	margin: auto;
}

.txt-space-1 {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	background: rgba(35, 63, 40, 0.7);
	padding: var(--base20-sp);
}
.work-info {
	font-size: 0.77em;
	line-height: 1.5em;
}
.work-info-ti {
	font-weight: bold;
}
.txt-character {
	padding: 2.6vw;
	background: rgba(255,255,255,0.7);
}
@media screen and (min-width:768px) {
	#award .txt-space-1,
	#explanation .txt-space-1,
	.story .txt-space-1 {
			padding: var(--base50-pc);
	}
	section:not(#explanation):not(#award):not(.story) .txt-space-1 {
		background: none;
		padding: 0px;
	}
	.staff .txt-space-1 {
		flex-direction: inherit;
		justify-content: flex-end;
	}

	#theatre-y .theatre-cont-l {
		display: flex;
		justify-content: flex-start;
	}
	#theatre-t .theatre-cont-l {
		display: flex;
		justify-content: flex-end;
	}
	.theatre .txt-theatre {
		display: flex;
		gap: 15px;
		background: none;
		padding: 0px;
	}
}
@media screen and (min-width:1200px) {
	.story .cont-block {
		display: flex;
		justify-content: flex-end;
	}
	.story .txt-space-1 {
		max-width: 920px;
		background: none;
		padding: 0px;
	}
}

#intro .txt-space,
#story .txt-space {
width: 62%;
/*font-size: max(3.73vw ,14px);
line-height: 6.34vw;*/
}
#intro .txt-space {
text-shadow: 1px 1px 1px #009fcb,
    -1px 1px 1px #009fcb,
    -1px -1px 1px #009fcb,
    1px -1px 1px #009fcb,
				1px 1px 1px #009fcb,
    -1px 1px 1px #009fcb,
    -1px -1px 1px #009fcb,
    1px -1px 1px #009fcb;
}
@media screen and (min-width:768px) {
#intro .txt-space {
text-shadow: 1px 1px 1px #005972,
    -1px 1px 1px #005972,
    -1px -1px 1px #005972,
    1px -1px 1px #005972,
				1px 1px 1px #005972,
    -1px 1px 1px #005972,
    -1px -1px 1px #005972,
    1px -1px 1px #005972;
}
}
#story .txt-space {
text-shadow: 1px 1px 1px #C44A4C,
    -1px 1px 1px #C44A4C,
    -1px -1px 1px #C44A4C,
    1px -1px 1px #C44A4C,
				1px 1px 1px #C44A4C,
    -1px 1px 1px #C44A4C,
    -1px -1px 1px #C44A4C,
    1px -1px 1px #C44A4C;
}
@media screen and (min-width:768px) {
#explanation .txt-space,
.story .txt-space,
.staff .txt-space,
.theatre .txt-space {
/* width: 100%; */
font-size: clamp(14px, 1.8vw, 18px);
line-height: 1.7em;
}
}

	
/*ムービー*/
.mov_space {
 width:100%;
 overflow:hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap:var(--base20-sp);
 }
.mov_space:not(:last-child) {
	margin-bottom: var(--base20-sp);
}
.mov_space_ti {
	width: 100%;
	line-height: 1em;
	font-size: min(4.8vw, 28px);
	color: #fff;
	border-bottom: solid 1px #fff;
	padding-bottom: 0.4em; 
}

.mov_space dd {
	width: 100%;
}
.mov_space dd div{
 width:100%;
 padding-bottom:56.25%;
 height:0px;
 position:relative;
}
.mov_space dd div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@media screen and (min-width: 768px) {
.mov_space_ti {
	font-size: clamp(18px, 1.6vw, 24px);
	padding-bottom: 0.4em; 
}
.mov_space:not(:last-child) {
	margin-bottom: var(--base50-pc);
}

.mov_space dd {
 width:48%;
}
}

.caption {
	font-size: var(--base14-sp);
	line-height: 1.2em;
	border-right: solid 1px rgba(255,255,255,0.5);
	border-bottom: solid 1px rgba(255,255,255,0.5);
	border-bottom-right-radius: 0.714em;
	padding: 0.5em;
	font-weight: bold;
}
@media screen and (min-width:768px) {
	.caption {
		font-size: var(--base18-pc);
	}
}
/*イントロ*/
@media screen and (min-width:768px) {
#intro	.cont-block {
width: clamp(400px, 40vw, 600px);
	}
#intro	.txt-space span {
	display: block;
}
}


/*ストーリー*/
@media screen and (min-width:768px) {
#story	.cont-block {
width: clamp(400px, 35vw, 600px);
	position: absolute;
	bottom: 3em;
}
#story	.txt-space span {
	display: block;
}
}

/*登場人物*/
.chara-cont {
position: relative;
}
.chara-list {
width: 10000px;
overflow: hidden;
mix-blend-mode: multiply;
position: relative;
}
.chara-item {
float: left;
cursor: pointer;
}

.chara-item-inner {
height: 100%;
overflow: hidden;
float: left;
position: relative;
}
.chara-item-inner::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.3);
z-index: 1;
transition: all 0.3s;
}
.chara-item:hover .chara-item-inner::after,
.chara-item.cAct .chara-item-inner::after {
background: rgba(0,0,0,0);
}
.chara-item > *,
.chara-item-inner > * {
float: left;
}

.chara-txt {
display: flex;
align-items: center;
flex-wrap: wrap;
background: #C44A4C;
mix-blend-mode: multiply;
color: #fff;
}
.cAct .chara-txt {
}
.chara-txt-inner >  * {
width: 100%;
}

.chara__name {
	font-family: "Noto Serif JP", serif;
	margin-left: 1.4em;
	margin-bottom: 0.1em;
	font-size: 1.3em;
}
.chara__cast {
font-size: 0.85em;
margin-left: 2.4em;
margin-bottom: 0.1em;
}
.chara__cast span {
font-size: 1.2em;
}
.chara_dsc {
width: 10em;
font-size: 0.85em;
margin-left: 3em;
line-height: 1.3em;
}
@media screen and (max-width:767px) {
.chara-item {
width: 144px;
height: 250px;
clip-path: polygon(0 0, 67.82% 0, 100% 100%, 32.17% 100%);
margin-left: -46.25px;

transition: all 0.3s;
}
.chara-item.cAct {
width: 278px;
clip-path: polygon(0 0, 83.3% 0, 100% 100%, 16.66% 100%);
}
.chara-item:first-child {
margin-left: 0px;
}
.chara-item-inner {
width: 278px;
clip-path: polygon(0 0, 83.3% 0, 100% 100%, 16.66% 100%);
}
.chara-pic {
width: 144px;
height: 100%;
clip-path: polygon(0 0, 67.82% 0, 100% 100%, 32.17% 100%);
}
.chara-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chara-txt {
width: 180px;
height: 100%;
clip-path: polygon(0 0, 74.3% 0, 100% 100%, 25.7% 100%);
margin-left: -46.25px;
}
}
@media screen and (min-width:768px) {
.chara-item {
width: 259px;
height: 450px;
clip-path: polygon(0 0, 67.82% 0, 100% 100%, 32.17% 100%);
margin-left: -83.33px;
transition: all 0.3s;
}
.chara-item.cAct {
width: 500px;
clip-path: polygon(0 0, 83.3% 0, 100% 100%, 16.66% 100%);
}
.chara-item:first-child {
margin-left: 0px;
}
.chara-item-inner {
width: 500px;
clip-path: polygon(0 0, 83.3% 0, 100% 100%, 16.66% 100%);
}
.chara-pic {
width: 259px;
height: 100%;
clip-path: polygon(0 0, 67.82% 0, 100% 100%, 32.17% 100%);
}
.chara-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chara-txt {
width: 324.33px;
height: 100%;
clip-path: polygon(0 0, 74.3% 0, 100% 100%, 25.7% 100%);
margin-left: -83.33px;
}

.chara__name {
	margin-left: 1.5em;
	margin-bottom: 0.3em;
	font-size: 2em;
}
.chara__cast {
font-size: 1em;
margin-left: 3.2em;
margin-bottom: 0.3em;
}
.chara__cast span {
font-size: 1.5em;
}
.chara_dsc {
font-size: 1em;
width: 12em;
margin-left: 5em;
}
.chara_dsc span {
display: inline-block;
}

}
	
/*スタッフ*/
	.staff-pos {
	 font-size: 1.14em;
		width: 3em;
		font-weight: bold;
	}
	.staff-name {
	font-size: 0.86em;
		margin-bottom: 0.7em;
	}
	.staff-name span {
		display: inline-block;
		font-size: 1.33em;
		font-weight: bold;
	}

	@media screen and (min-width:768px) {
	.staff-list {
		max-width: 600px;
		display: flex;
		flex-wrap: wrap;
	}
	.staff-pos {
		font-size: 1.5em;
		width: 3em;
	}
	.staff-name {
		font-size: 1em;
		width: calc(100% - 6em);
	}
	.staff-name span {
		font-size: 1.5em;
	}
#staff	.cont-block {
width: clamp(400px, 33.3vw, 500px);
	position: absolute;
	right: 0px;
	bottom: 2em;
}
}

/*劇場*/
.section-theatre {
	max-width: 900px;
	margin: auto;
	padding: 50px min(5.8vw, 50px) 200px;
	box-sizing: border-box;
}
.theatre__txt {
margin-bottom: 1em;
}
.theatre__arrow {
	text-align: right;
	height: 3em;
	line-height: 3em;
	position: relative;
	margin-right: 1.5em;
	font-size: 0.9em;
}
.theatre__arrow::after {
	content: "";
	display: block;
	width: 1em;
	height: 100%;
	position: absolute;
	top: 0px;
	right: -1.2em;
	transition: all 0.15s;

	background: url(/images/top/arrow01-w.svg) center center / contain no-repeat;
}
a:hover .theatre__arrow::after {
	right: -1.5em;
}

/* @media screen and (min-width:768px) {
#theatre .cont-block {
width: min(48vw, 720px);
float: right;
}
} */

/*ヘッダーとナビゲーション*/
header {
 text-align:center;
}
header nav {
	overflow: hidden;
}

@media screen and (max-width:767px) {
	.sp-menu .menu-nav-cont {
		/* max-height: 0px; */
		display: none;
		position: relative;
		transition: all 0.5s;

	}
	.menu-open .sp-menu .menu-nav-cont {
		display: block;
		/* max-height: 1000px; */
		z-index: 2;
	}
	.menu-open .content {
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0px;
		z-index: 1;
	}
	
}
@media screen and (min-width:768px) {
	header {
		position: fixed;
		bottom: 0px;
		z-index: 10;
		width: 100%;
	}
}

.main-nav a.nav_current,
.main-nav a:hover,
.main-nav p:hover {
		color: #003c71;
}

.menu-nav ul {
width: 88%;
margin: auto;
}

.menu-nav li {
 width:100%;
	position: relative;
}
.menu-nav li p,
.menu-nav li a {
		display:inline-block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
	text-decoration: none;
	color:#9A0000;
	transition: all 0.2s;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
 }
 .menu-nav li p span,
.menu-nav li a span {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.5em;
 }
@media screen and (max-width:767px) {
.menu-nav:not(:last-child) {
	padding-bottom: 40px;
}
.menu-nav-work-ti a {
	display: block;
	width: 88%;
	margin: 0px auto 0.5em;
	font-size: 16px;
	color:#9A0000;
	text-align: left;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.menu-nav li a {
border-bottom: solid 1px #640000;
}
.menu-nav li:first-child a {
	border-top: solid 1px #640000;
}
.menu-nav-global {
padding-top: 75px;
background: rgba(255,255,255,0.8);
}
#under-theatre .menu-nav-global {
	min-height: 100vh;
}

.menu-nav-y {
	background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(166,205,180,0.8) 20%);
}
.menu-nav-t {
	background: linear-gradient(to bottom,  rgba(166,205,180,0.8) 0%,rgba(205,166,180,0.8) 20%, rgba(205,166,180,0.8) 100%);
	padding-bottom: 75px;
}
}
@media screen and (min-width:768px) {
nav .main-nav {
	mix-blend-mode: multiply;
}
.menu-nav-global {
	background: rgba(255,255,255,0.8);
}
.menu-nav-y,
.menu-nav-t {
	max-height: 0px;
	overflow: hidden;
	transition: all 0.5s;
}
.menu-nav-y.pc-open,
.menu-nav-t.pc-open {
	max-height: 60px;
}
.menu-nav-y {
	background: rgba(166,205,180,0.8);
}
.menu-nav-t {
	background: rgba(205,166,180,0.8);
}

.menu-nav ul {
width: auto;
}
.menu-nav li {
display: inline-block;
 width:auto;
 float:none;
 vertical-align:bottom;
letter-spacing: normal;
}
.menu-nav li:after {
left: -3px;
top: calc(50% - 3px);
}
.menu-nav li:first-child:after {
display: none;
}

.menu-nav li a,
.menu-nav li p {
	display: table;
 height:50px;
	padding: 0px 10px;
	text-align: center;
	font-size: 1em;
	letter-spacing: 0.3em;
 }
 .menu-nav li a span,
 .menu-nav li p span {
 display: table-cell;
 height:15px;
	line-height: 1.2em;
	vertical-align: middle;
	margin-right: 0px;
}
.menu-nav {
 display:block !important;
}
}
/*ハンバーガーメニュー*/
@media (max-width: 767px) {
.menu-btn {
 width:30px;
	/* float: right; */
	position: fixed;
	z-index: 10;
	top: 0px;
	right: 0px;
	padding: 16px 10px 8px 0px;
	text-align: center;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .2s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 25px;
  height: 40px;
}
.menu-trigger span {
  position: absolute;
  left: calc((100% - 8px) / 2);
  width: 8px;
  height: 8px;
		border-radius: 50%;
  background-color: #dd0000;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 16px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger.active span {
  /* background-color: #fff; */
  width: 35px;
  height: 4px;
		border-radius: 2px;
		left: -5px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(14px) rotate(-45deg);
  transform: translateY(14px) rotate(-45deg);
		top: 5.5px
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
		bottom: 6px;
}
}


/*フッター*/
footer {
 width:100%;
 font-size:11px;
 text-align:center;
 padding:0px 10px 50px;
 -webkit-box-sizing:border-box;
 -ms-box-sizing:border-box;
 box-sizing:border-box;
 background-color:rgba(255,255,255,0.7);
 z-index:2;
	position: absolute;
	bottom: 0px;
}
@media (max-width: 767px) {
footer {
 padding-bottom:0px;
}
}


.text-box-01 {
 text-align:justify;
 text-justify:inter-ideograph;
}


/*ソーシャル関連*/
div.sns-space {
 text-align:center;
 padding:10px 0px;
 background:#000;
}
div#boxArea {
 width:300px;
 margin:auto;
}
div#boxArea > div {
 margin:0px 10px;
}

div#videolink a {
 display:block;
 width:80px;
 height:20px;
 line-height:20px;
 font-size:12px;
 text-align:center;
 background:#FB8400;
 color:#fff;
 border-radius:3px;
}
div#videolink a:hover {
 opacity:0.8;
}
@media screen and (max-width:400px) {
div#videolink {
 clear:both;
 float:none !important;
 margin: 0px auto !important;
 padding-top:10px;
}
}


/*劇場情報*/
.theatre-cont {
	font-size: 14px;
	}
	.region:not(:last-child) {
	margin-bottom: 3em;
	}
	.name-region {
	line-height: 1em;
	font-size: 1.3em;
	color: rgb(101, 182, 117);
	;
	font-weight: bold;
	margin-bottom: 0.5em;
	/*padding-bottom: 0.4em;
	border-bottom: solid 2px #a36800;*/
	}
	.name-prefecture {
	display: none;
	}
	.under-theatre-t .name-region {
	color: rgb(186, 133, 185);
	}
	
	.theatre-item {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 3em;
	border-top: solid 2px #000;
	border-bottom: solid 2px #000;
	}
	dt.theatre-item {
	display: none;
	}
	.theatre-item:not(:last-child) {
	}
	.theatre-item p {
	margin-bottom: 0px !important;
	padding: 0.4em;
	}
	.theatre-item p:not(:first-child) {
	border-top: solid 1px #000;
	}
	
	dd .theatre--name {
	font-weight: bold;
	}
	dd .theatre--name a {
	text-decoration: underline;
	transition: all 0.2s;
	color: #000;
	}
	dd .theatre--name a:hover {
	text-decoration: none;
	}
	.theatre--name span {
	font-weight: bold;
	display: inline-block;
	text-decoration: underline;
	}
	dd .theatre-prefecture {
	font-size: 0.9em;
	}
	.theatre--term span,
	.theatre--afternoon span {
	display: inline-block;
	}
	.theatre--term span:not(.theatre--term--inner) {
	margin-right: 0.5em;
	}
	
	@media (max-width: 700px) {
	.theatre-item p {
	width: 100%;
	}
	.theatre--term:empty,
	.theatre--afternoon:empty {
	display: none;
	}
	}
	@media (min-width: 701px) {
	.region {
	border-bottom: solid 1px #000;
	}
	.name-prefecture {
	line-height: 1em;
	font-weight: bold;
	margin-bottom: 0.4em;
	}
	.theatre-item {
	flex-wrap: nowrap;
	border-top: solid 1px #000;
	border-bottom: none;
	margin-bottom: 0px;
	}
	dt.theatre-item {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.5);
	}
	.theatre-item p {
	border:none !important;
	}
	dt.theatre-item p {
	transform: scale(0.9);
	transform-origin: center left;
	}
	.theatre-prefecture {
	width: 5em;
	}
	dt .theatre-prefecture {
	width: 4.4em;
	}
	.theatre--name {
	width: calc((100% - 12em) * 0.55);
	}
	.theatre--afternoon {
	width: calc((100% - 12em) * 0.35);
	}
	.theatre--tel {
	width: 8em;
	}
	
	.theatre--term span.theatre--term--inner,
	.theatre--afternoon span.theatre--afternoon--inner {
	display: none;
	}
	}
	
	/*ページ内アンカーボタン*/
	.anc-region {
	margin-bottom: 2em;
	}
	.anc-reg-item a {
	display: block;
	line-height: 1em;
	background: rgb(101, 182, 117);
	padding: 0.8em 0px 0.6em 2em;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1px;
	position: relative;
	transition: all 0.2s;
	}
	.under-theatre-t .anc-reg-item a {
	background: rgb(186, 133, 185);
	}
	.anc-reg-item a:hover {
	background: #fff;
	color:  rgb(101, 182, 117);
	}
	.under-theatre-t .anc-reg-item a:hover {
		background: rgb(186, 133, 185);
		color: #fff;
	}
	.anc-reg-item a span {
	font-weight: bold;
	}
	.anc-reg-item a::before {
	content: "";
	display: block;
	width: 0px;
	height: 0px;
	border-width: 0.4em 0.4em 0px 0.4em;
	border-color: #fff transparent transparent transparent;
	border-style: solid;
	position: absolute;
	left: 0.8em;
	bottom: 50%;
	margin-bottom: -0.2em;
	transition: all 0.2s;
	}
	.anc-reg-item a:hover::before {
	border-color: rgb(101, 182, 117) transparent transparent transparent;
	}
	.under-theatre-t .anc-reg-item a:hover::before {
	border-color: #fff transparent transparent transparent;
	}
	@media (min-width: 701px) {
	.anc-region {
	display: flex;
	justify-content: flex-start;
	column-gap:1px;
	}
	.anc-reg-item {
	flex-grow:1;
	}
	.anc-reg-item a {
	display: block;
	font-size: 0.9em;
	height: 100%;
	box-sizing: border-box;
	vertical-align: middle;
	padding: 0.8em 0px 1.5em 0px;
	text-align: center;
	}
	.anc-reg-item a span {
	display: inline-block;
	vertical-align: middle;
	height: 1em;
	}
	.anc-reg-item a::before {
	left: 50%;
	margin-left: -0.4em;
	bottom: 0.7em;
	margin-bottom: auto;
	}
	}
	
.ti-theatre {
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
	letter-spacing: 0.1em;
}
.theatre-note {
	margin-bottom: 30px;
}
.theatre-term {
	width: fit-content;
	font-size: 18px;
	text-align: center;
	line-height: 1.2em;
	margin: auto;
	margin-bottom: 20px;
	background-color: rgba(255,255,255,0.7);
	color: rgb(101, 182, 117);
	padding: 0.5em 1em;
	border-radius: 0.2em;
	/* border: solid 1px rgba(101, 182, 117,0.7); */
	box-shadow: 0 0 10px 0 rgba(0, 0, 0,0.2);
}
.under-theatre-t .theatre-term {
	color: rgb(186, 133, 185);
	/* border-color: rgba(186, 133, 185,0.7); */
}
.theatre-term span {
	display: inline-block;
	font-weight: bold;
}
@media (min-width: 701px) {
	.theatre-note {
		font-size: 16px;
	}
	.theatre-term {
		font-size: 22px;
	}

}