@charset "utf-8";

/*-----------------------------------------------
 * Page title (SP)
-------------------------------------------------*/
@media screen and (max-width:768px){
	.p-staffcast__pageNameWrap {
		position: relative;
		margin-top: calc(50 / var(--vw-min) * 100vw);
		margin-bottom: calc(50 / var(--vw-min) * 100vw);
	}
	.p-staffcast__pageName {
		width: calc(280 / var(--vw-min) * 100vw);
		height: calc(50 / var(--vw-min) * 100vw);
		margin: 0 auto;
		background: #fff;
		position: relative;
		z-index: 1;
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.8s var(--easing-outquart), transform 0.85s var(--easing-outquart);
	}
	body.--is-loaded .p-staffcast__pageName {
		opacity: 1;
		transform: translateY(0);
	}
	.p-staffcast__pageName::before {
		content: '';
		display: block;
		width: 80%;
		height: 45%;
		background: #000;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-mask: url(../img/common/nav/nav_staffcast.svg) no-repeat center / contain;
		mask: url(../img/common/nav/nav_staffcast.svg) no-repeat center / contain;
	}
	.p-staffcast__pageNameWrap > .p-cmn__bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
	}
	.p-staffcast__pageNameWrap > .p-cmn__bg::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: calc(114 / var(--vw-min) * 100vw);
		-webkit-mask: url(../img/common/bg/bg_staffcast.svg) no-repeat center / contain;
		mask: url(../img/common/bg/bg_staffcast.svg) no-repeat center / contain;
		background-color: #134b26;
		opacity: 0;
		transform: none;
		transition: opacity 0.8s var(--easing-outquart);
	}
	body.--is-loaded .p-staffcast__pageNameWrap > .p-cmn__bg::before {
		opacity: 1;
		transform: none;
	}
}

/*-----------------------------------------------
 * Section bg titles
-------------------------------------------------*/
.p-cmn__bg {
	width: 100%;
	position: relative;
	z-index: -1;
	pointer-events: none;
}
.p-cmn__bg::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, 40px);
	transition: opacity 0.8s ease, transform 0.85s var(--easing-outquart);
}
body.--is-loaded .p-cmn__bg::before {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media screen and (min-width:769px){
	.p-cmn__bg::before {
		width: min(calc(760 / var(--vw-min) * 100vw), 760px);
		height: min(calc(110 / var(--vw-min) * 100vw), 110px);
	}
	.p-cmn__bg.-staff {
		top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	}
	.p-cmn__bg.-staff::before {
		-webkit-mask: url(../img/common/bg/bg_staff.svg) no-repeat center / contain;
		mask: url(../img/common/bg/bg_staff.svg) no-repeat center / contain;
		background-color: #134b26;
		width: min(calc(320 / var(--vw-min) * 100vw), 320px);
	}
	.p-cmn__bg.-cast {
		top: min(calc(140 / var(--vw-min) * 100vw), 140px);
	}
	.p-cmn__bg.-cast::before {
		-webkit-mask: url(../img/common/bg/bg_cast.svg) no-repeat center / contain;
		mask: url(../img/common/bg/bg_cast.svg) no-repeat center / contain;
		background-color: #134b26;
		width: min(calc(270 / var(--vw-min) * 100vw), 270px);
	}
}

/*-----------------------------------------------
 * Staffcast list
-------------------------------------------------*/
.p-staffcast {
	position: relative;
	padding-bottom: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (min-width:769px){
	.p-staffcast__in {
		margin: 0 min(calc(20 / var(--vw-min) * 100vw), 20px);
	}
}
@media screen and (max-width:768px){
	.p-staffcast {
		padding: 0 calc(30 / var(--vw-min) * 100vw) calc(80 / var(--vw-min) * 100vw);
	}
}

@keyframes staff-fadein {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.p-staffcast__content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	opacity: 0;
	transform: translateY(10px);
}
body.--is-loaded .p-staffcast__content {
	animation: staff-fadein 0.8s var(--easing-outquart) forwards;
}
.p-staffcast__content:nth-of-type(1) { animation-delay: 0.07s; }
.p-staffcast__content:nth-of-type(2) { animation-delay: 0.14s; }
.p-staffcast__content:nth-of-type(3) { animation-delay: 0.21s; }
.p-staffcast__content:nth-of-type(4) { animation-delay: 0.28s; }
.p-staffcast__content:nth-of-type(5) { animation-delay: 0.35s; }

@media screen and (max-width:768px){
	.p-staffcast__content {
		justify-content: flex-start;
	}
	.p-staffcast__content.-cast {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

@media screen and (min-width:769px){
	.p-staffcast__content.-cast {
		max-width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
		margin: 0 auto;
	}
	.p-staffcast__content.-cast > .hr-order2 {
		display: block;
		width: 100%;
		order: 2;
	}
}

.p-staffcast__item {
	position: relative;
	text-align: center;
	margin-bottom: min(calc(44 / var(--vw-min) * 100vw), 44px);
}
@media screen and (min-width:769px){
	.p-staffcast__item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width:768px){
	.p-staffcast__item {
		width: 50%;
		margin: 0 auto calc(40 / var(--vw-min) * 100vw);
	}
}

.-original .p-staffcast__item,
.-artist .p-staffcast__item {
	width: 100%;
}

.-cast .p-staffcast__item {
	margin: min(calc(60 / var(--vw-min) * 100vw), 60px) 0 min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:768px){
	.-cast .p-staffcast__item {
		width: 50%;
		margin: 0 0 calc(40 / var(--vw-min) * 100vw);
	}
}
@media screen and (min-width:769px){
	.-cast .p-staffcast__item:nth-child(n+4) {
		order: 2;
	}
	.-cast .p-staffcast__item.-kobeni {
		width: calc(25% - 110px);
	}
	.-cast .p-staffcast__item.-kishibe {
		width: calc(25% - 110px);
		margin-right: 30px;
	}
}

.-artist .p-staffcast__item {
	margin: 0 auto min(calc(60 / var(--vw-min) * 100vw), 60px);
}
@media screen and (max-width:768px){
	.-artist .p-staffcast__item {
		margin: 0 auto calc(40 / var(--vw-min) * 100vw);
	}
}

.p-staffcast__dd {
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	line-height: 2;
	color: #47ba6e;
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
	letter-spacing: 0.15em;
}
/* .-cast .p-staffcast__dd {
	text-indent: 16px;
} */
.p-staffcast__dd.-ls-wide {
	letter-spacing: 1.15em;
}
@media screen and (max-width:768px){
	.p-staffcast__dd {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

.p-staffcast__dt {
	position: relative;
	display: inline-block;
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	letter-spacing: 0.7em;
}
@media screen and (max-width:768px){
	.p-staffcast__dt {
		font-size: calc(24 / var(--vw-min) * 100vw);
		letter-spacing: 0.64em;
	}
}
.p-staffcast__dt > small {
	display: block;
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	letter-spacing: 0.1em;
}
@media screen and (min-width:769px){
	.p-staffcast__dt > small {
		margin-top: min(calc(16 / var(--vw-min) * 100vw), 16px);
	}
}
@media screen and (max-width:768px){
	.p-staffcast__dt > small {
		margin-top: calc(4 / var(--vw-min) * 100vw);
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

.-artist .p-staffcast__dt {
	display: block;
	letter-spacing: 0.45em;
}
@media screen and (max-width:768px){
	.-artist .p-staffcast__dt {
		line-height: 2;
	}
}

.p-staffcast__endingList {
	width: 100%;
}
@media screen and (min-width:769px){
	.p-staffcast__endingList {
		max-width: 700px;
		margin: 0 auto;
	}
}
.p-staffcast__endingList > li {
	width: 100%;
}
@media screen and (min-width:769px){
	.p-staffcast__endingList > li {
		margin-bottom: min(calc(28 / var(--vw-min) * 100vw), 28px);
	}
}
@media screen and (max-width:768px){
	.p-staffcast__endingList > li {
		margin-bottom: calc(25 / var(--vw-min) * 100vw);
	}
}
.p-staffcast__endingList > li span.-name,
.p-staffcast__endingList > li span.-ttl {
	display: block;
	text-align: center;
	line-height: 2;
}

/* comment icon */
.p-staffcast__cmticon {
	width: min(calc(24 / var(--vw-min) * 100vw), 24px);
	height: min(calc(24 / var(--vw-min) * 100vw), 24px);
	-webkit-mask: url(../img/common/icon/icon-comment.svg) no-repeat center / contain;
	mask: url(../img/common/icon/icon-comment.svg) no-repeat center / contain;
	background: #fff;
	position: absolute;
	top: 0;
	right: -16px;
	transition: background 0.3s ease, transform 0.3s var(--easing-outquart);
}
.p-staffcast__cmticon button {
	width: 100%;
	height: 100%;
	display: block;
}
@media screen and (hover:hover) and (pointer: fine){
	.p-staffcast__cmticon:hover {
		transform: scale(1.15);
		background: #e02e2c;
	}
}
@media screen and (max-width:768px){
	.p-staffcast__cmticon {
		width: 22px;
		height: 60px;
		top: 18%;
		right: -26px;
		transform: translateY(-50%);
	}
	.-original .p-staffcast__cmticon {
		right: 4px;
	}
}

/*-----------------------------------------------
 * Staff modal
-------------------------------------------------*/
.p-staffModal {
	width: min(calc(600 / var(--vw-min) * 100vw), 600px);
	max-width: 90vw;
	padding: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
@media screen and (max-width:768px){
	.p-staffModal {
		width: 100%;
		padding: calc(40 / var(--vw-min) * 100vw) calc(30 / var(--vw-min) * 100vw);
	}
}

.p-staffModal__nameWrap {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	text-align: center;
}
@media screen and (max-width:768px){
	.p-staffModal__nameWrap {
		margin-bottom: calc(28 / var(--vw-min) * 100vw);
	}
}
.p-staffModal__nameWrap > span {
	display: block;
}
.p-staffModal__role {
	color: #666;
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	letter-spacing: 1.05em;
}
@media screen and (max-width:768px){
	.p-staffModal__role {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}
.p-staffModal__name {
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	letter-spacing: 1.2em;
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:768px){
	.p-staffModal__name {
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: calc(10 / var(--vw-min) * 100vw);
	}
}

.p-staffModal__body {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
@media screen and (max-width:768px){
	.p-staffModal__body {
		flex-direction: column;
		align-items: center;
	}
}

.p-staffModal__img img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}
@media screen and (max-width:768px){
	.p-staffModal__img {
		margin-bottom: calc(28 / var(--vw-min) * 100vw);
	}
}

.p-staffModal__cmt {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2.375;
	letter-spacing: 0.1em;
	text-align: justify;
	text-justify: inter-ideograph;
}
@media screen and (min-width:769px){
	.p-staffModal__cmt {
		flex: 1;
		min-width: 0;
	}
	.p-staffModal__cmt.-denji {
		width: min(calc(466 / var(--vw-min) * 100vw), 466px);
	}
}
@media screen and (max-width:768px){
	.p-staffModal__cmt {
		width: calc(586 / var(--vw-min) * 100vw);
		margin: 0 auto;
		font-size: calc(20 / var(--vw-min) * 100vw);
		line-height: 2.1;
	}
}

#modal14 .p-staffModal__cmt {
	letter-spacing: 0.05em;
}
@media screen and (max-width:768px){
	#modal14 .p-staffModal__cmt {
		text-align: center;
	}
}