@charset "utf-8";
/*-----------------------------------------------
 * COMMON
-------------------------------------------------*/
@media screen and (min-width: 768px){
	.contBG__color{
		position: absolute;
		left: 0;
		right: 0;
		padding-top: 320px;
		margin: 0 auto;
	}
	.contBG__colorIn{
		height: 200%;
		transform-origin: center top;
	}
	.fullContentFixed.-bgTitle{
		margin: 0 auto;
	}

	.contBG__title,
	.contBG__titleImg{
		max-width: 890px;
		max-height: 323.4656px;
	}
}

.fullContentFixed.-bgTitle .fullContentFixedIn{
	position: absolute;
}


/*-----------------------------------------------
 * STAFFCAST - COMMON 
-------------------------------------------------*/
#staffcast .contSectionIn{
	position: relative;
}
#staffcast .contentIn{
	width: 100%;
	position: unset;
	padding: 80px 3.5715% 0;
	display: flex;
}

.staffcastCont{
	width: 46.1539%;/* 480 */
}
#staff{
	margin-right: auto;
}
#cast{
	margin-left: auto;
}

.staffcastLists{
	width: 100%;
	padding-top: 40px;
	padding-left: min(6.66667%, 32px);
}
.staffcastList{
	width: 100%;
	display: flex;
	letter-spacing: 0;
}
.staffcastList__dt{
	font-size: 16px;
	font-weight: 700;
	color: var(--color-main-red);
	padding-right: 1em;
	text-align: right;
	line-height: 1.5;
}

.staffcastList__dd{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
}
.staffcastList__comlink{
	display: inline-block;
	width: 48px;
	height: 20px;
	position: relative;
}
.staffcastList__comlink > .btn_comment{
	position: absolute;
	top: 0px;
	left: 8px;
	width: 40px;
	height: 24px;
	background-color: var(--color-main-yellow);
	-webkit-mask: url(../img/common/icon_fukidashi.svg?v2) no-repeat center / contain;
	mask: url(../img/common/icon_fukidashi.svg?v2) no-repeat center / contain;
	pointer-events: auto;
	background-color: #000;
}
.staffcastList__dd > small{
	font-size: 60%;
	font-weight: 400;
	display: inline-block;
	line-height: 1.5;
	margin-top: 0.52em;
}
.staffcastList__dd > small.-w100{
	width: 100%;
}
.staffcastList:not(:last-child){
	padding-bottom: 16px;
}

#staff .staffcastList__dt{
	min-width: 11em;
}
#cast .staffcastList__dt{
	min-width: 7.5em;
}

@media (hover: hover) and (pointer: fine){
	.staffcastList__comlink > .btn_comment{
		transition: .3s ease;
	}
	.staffcastList__comlink > .btn_comment:hover{
		background-color: var(--color-main-red);
		transform: scale(110%);
	}
}

@media screen and (max-width: 767px){
	#staffcast .contentIn{
		padding: var(--sp-size-96) var(--sp-size-48) 0;
		flex-direction: column;
	}
	.staffcastCont{
		width: 100%;
	}
	#staff{
		margin-right: 0;
	}
	#cast{
		margin-left: 0;
		padding-top: var(--sp-size-80);
	}

	.staffcastLists{
		padding-top: var(--sp-size-48);
		padding-left: 0;
	}
	.staffcastList__dt{
		font-size: var(--sp-size-24);
		line-height: var(--sp-size-40);
	}
	.staffcastList__dd{
		font-size: var(--sp-size-26);
	}
	.staffcastList__comlink{
		width: var(--sp-size-48);
		height: var(--sp-size-20);
	}
	.staffcastList__comlink > .btn_comment{
		top: calc(var(--sp-size-2) * -1);
		left: var(--sp-size-8);
		width: var(--sp-size-40);
		height: var(--sp-size-24);
	}
	.staffcastList__dd > small{
		font-size: 76.9231%;
	}
	.staffcastList:not(:last-child){
		padding-bottom: var(--sp-size-24);
	}
	#staff .staffcastList__dt,
	#cast .staffcastList__dt{
		min-width: 40%;
	}
}


/*-----------------------------------------------
 * COMMENT
-------------------------------------------------*/
#commentModal .oneModalIn__cont{
	width: 100%;
}
#js-commentModalCont{
	width: 100%;
	max-width: 1920px;
	padding: 0 min(6.6667%, calc(80px * var(--max-percent)));
	display: flex;
	margin: 0 auto;
}
.commentCont__img{
	width: 41.5385%;
	margin-right: 4.6154%;/* 48 */
	max-width: 480px;
	flex-shrink: 0;
}
.commentCont__img img{
	width: 100%;
}
.commentCont__Wrap{
	width: 100%;
}


@media screen and (max-width: 860px){
	#js-commentModalCont{
		flex-direction: column;
	}
	.commentCont__img{
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		padding-bottom: 48px;
	}
}

.commentCont_h2{
	width: 100%;
	line-height: 1;
}
.commentCont_h2__job{
	display: block;
	font-size: 20px;
	color: var(--color-main-red);
	font-weight: 700;
	margin-bottom: 12px;
}
.commentCont_h2__name{
	display: block;
	font-size: 32px;
	font-weight: 900;
}
.commentCont__commentWrap{
	margin-top: 40px;
	width: 100%;
	padding: 24px;
	background-color: #fff;
	border: 1px solid #000;
}
.commentCont__infoWrap{
	width: 100%;
	padding-top: 40px;
}
.commentCont_mainTxt,
.commentCont__infotxt{
	padding-top: 16px;
    font-size: 16px;
    line-height: 2;
}

#js-commentModalCont .cont_txtTitle{
	font-size: 22px;
	line-height: 0.8;
}

@media screen and (max-width: 767px){
	#commentModal .oneModalIn__cont{
		padding: var(--sp-size-96) 0;
	}
	#js-commentModalCont{
		padding: 0 6.4%;
	}
	.commentCont__img{
		width: 100%;
		padding-bottom: var(--sp-size-48);
	}
	.commentCont_h2__job{
		font-size: var(--sp-size-32);
		margin-bottom: var(--sp-size-16);
	}
	.commentCont_h2__name{
		font-size: var(--sp-size-40);
	}
	.commentCont__commentWrap{
		margin-top: var(--sp-size-48);
		padding: var(--sp-size-24);
	}
	.commentCont__infoWrap{
		padding-top: var(--sp-size-48);
	}
	.commentCont_mainTxt,
	.commentCont__infotxt{
		font-size: var(--sp-size-24);
		padding-top: var(--sp-size-20);
	}
	#js-commentModalCont .cont_txtTitle{
		font-size: var(--sp-size-32);
	}
}