@charset "utf-8";
.header {
	position: sticky;
	top: 0;
}

/*---------------------------------
* staffcast
----------------------------------*/
.pageWrap {
	padding: min(calc(100 / var(--vw-min) * 100vw), 100px) 0 min(calc(135 / var(--vw-min) * 100vw), 135px);
}
.page_sectionCont{
	/* max-width: 980px; */
	max-width: 100%;
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.pageWrap {
		padding: calc(185 / var(--vw-min) * 100vw) 0  calc(110 / var(--vw-min) * 100vw);
	}
	.page_sectionCont{
		width: 100%;
		padding: 0 calc(40 / var(--vw-min) * 100vw);
	}
}

.page_sectionContLast{
	margin-top: 60px;
}
/* pageTtl */
.pageTtl{
	width: 100%;
	max-width: 980px;
	height: 46px;
	margin: 0 auto 60px auto;
}
.pageTtl{
	mask: url(../img/common/title/page_tit_staffcast.svg) no-repeat center center/ contain;
	background-color: var(--color-green);
}
@media screen and (max-width: 768px){
	.pageTtl{
		min-width: unset;
		height: calc(60 / var(--vw-min)* 100vw);
		margin: 0 auto calc(60 / var(--vw-min)* 100vw) auto;
	}
}
.page_section{
	padding: 60px 0;
	border-bottom: 1px solid var(--color-pink);
}
.page_section:last-child{
	padding: 60px 0 0;
	border-bottom: none;
}


@media screen and (min-width:769px){
	.cont-title{
		height: min(calc(32 / var(--vw-min) * 100vw), 32px);
	}
}

/*-------- PAGE CONTENTS --------*/
.staffcast {
	padding: min(calc(60 / var(--vw-min) * 100vw), 60px) 0 min(calc(180 / var(--vw-min) * 100vw), 180px);
	border-bottom: min(calc(1 / var(--vw-min)* 100vw), 1px) solid var(--color-green);
}
@media screen and (max-width:768px){ 
	.staffcast {
		padding: calc(60 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw) calc(180 / var(--vw-min) * 100vw);
	}
}


.staffcast{
	border-bottom: min(calc(1 / var(--vw-min)* 100vw), 1px) solid var(--color-green);
}
.staffcastBlockWrap{
	display: flex;
	justify-content: center;
}
.staffcastBlock{
	padding: min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(40 / var(--vw-min) * 100vw), 40px) min(calc(10 / var(--vw-min) * 100vw), 10px);
	width: min(calc(600 / var(--vw-min) * 100vw), 600px);
	display: flex;
	flex-direction: column;
}
.staffcastBlock:first-child{
	border-right: min(calc(1 / var(--vw-min)* 100vw), 1px) solid var(--color-green);
}
@media screen and (max-width:768px){ 
	.staffcast{
		border-bottom: min(calc(1 / var(--vw-min)* 100vw), 1px) solid var(--color-green);
	}
	.staffcastBlockWrap{
		flex-direction: column;
	}
	.staffcastBlock{
		padding: min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(40 / var(--vw-min) * 100vw), 40px) min(calc(60 / var(--vw-min) * 100vw), 60px);
		width: 100%;
		flex-direction: column;
	}
	.staffcastBlock:first-child{
		border-right: none;
		border-bottom: min(calc(1 / var(--vw-min)* 100vw), 1px) solid var(--color-green);
		padding: min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(40 / var(--vw-min) * 100vw), 40px) min(calc(10 / var(--vw-min) * 100vw), 10px);

	}
}
.staffcastList{
	padding: min(calc(60 / var(--vw-min) * 100vw), 60px) 0 min(calc(60 / var(--vw-min) * 100vw), 60px);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media screen and (max-width:768px){
	.staffcastList{
		padding:calc(60 / var(--vw-min) * 100vw) 0 0;
	}
}

.staffcastList__item{
	width: calc((100% - min(calc(50 / var(--vw-min) * 100vw), 50px)) / 2);
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
	position: relative;
}
.staffcastList__item .item__ttl{
	font-size:min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 1;
	margin-bottom: 0.8vw;
}
.staffcastList__item .item_ttl_jp{
	display: block;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: bold;
	margin-top:  min(calc(5 / var(--vw-min) * 100vw), 5px);
	margin-bottom:  min(calc(5 / var(--vw-min) * 100vw), 5px);
}
.staffcastList__item .item__name{
	font-size:min(calc(20 / var(--vw-min) * 100vw), 20px);
	color: var(--color-green);
	font-weight: bold;
	line-height: 1.3;
}
@media screen and (max-width:768px){
	.staffcastList__item .item__ttl{
		font-weight: bold;
		font-size: calc(20 / var(--vw-min) * 100vw);
		padding-bottom: 1vw;
	}
	.staffcastList__item .item_ttl_jp{
		display: inline-block;
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-top: unset;
		margin-bottom: unset;
		margin-left: calc(10 / var(--vw-min) * 100vw);
	}
	.staffcastList__item .item__name{
		position: relative;
		font-size:calc(23 / var(--vw-min) * 100vw);
	}
}
.staffcastBlock._cast .staffcastList__item .item__name{
	position: relative;
	color: var(--color-pink);
}
.modalBtn{
	display: block;
	position: absolute;
	width: min(calc(58 / var(--vw-min) * 100vw), 58px);
	height: min(calc(58 / var(--vw-min) * 100vw), 58px);
	top: 0;
	right: 36px;
	bottom: 0;
	margin: auto;
	background: url(../img/common/deco/dot.png) no-repeat center center;
	background-size:min(calc(25 / var(--vw-min) * 100vw), 25px) min(calc(5 / var(--vw-min) * 100vw), 5px);
	transition: all .4s ease;
}
.modalBtn_ar{
	right: -18px;
}
@media screen and (max-width:768px){
	.modalBtn{
		display: inline-block;
		position: absolute;
		width: calc(58 / var(--vw-min) * 100vw);
		height: calc(58 / var(--vw-min) * 100vw);
		top: -8px;
		right: unset;
		bottom: unset;
		margin: unset;
		margin-left: calc(20 / var(--vw-min) * 100vw);
		background-size:min(calc(25 / var(--vw-min) * 100vw), 25px) min(calc(5 / var(--vw-min) * 100vw), 5px);
	}
	.modalBtn_ar{
		right: 13px;
	}
}
.modalBtn::after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-mask: url(../img/common/deco/deco_logo.svg) no-repeat center / 100%;
	mask: url(../img/common/deco/deco_logo.svg) no-repeat center / 100%;
	background: var(--color-green);
	z-index: -1;
	transition: all .4s ease;
}
.staffcastBlock._cast .modalBtn::after{
	background-color: var(--color-pink);
	
}

.top__music{
	font-size: min(calc(16 / var(--vw-min)* 100vw), 16px);
}
@media screen and (max-width:768px){
	.top__music{
		font-size: calc(23 / var(--vw-min)* 100vw);
		margin-bottom: 7vw;
	}
}
.top__music > span{
	background-color: var(--color-green);
	color: #FFF;
	display: inline-block;
	font-weight: 700;
	padding: 0 0.5vw;
}

.staffcast__enBorder{
	border-top: 1px solid;
	border-color: var(--color-blue);
}

/* hover */
.modalBtn:hover{
	background-size:min(calc(20 / var(--vw-min) * 100vw), 20px) min(calc(3 / var(--vw-min) * 100vw), 3px);
}
.staffcastBlock._cast .modalBtn:hover::after{
	background-color: var(--color-green);
	transform: scale(.9);
}
.staffcastBlock._staff .modalBtn:hover::after{
	background-color:var(--color-pink);
   transform: scale(.9);
}

/* COMMENT */
#commentModal .oneModalIn{
	align-items: flex-start;
	background-color: var(--color-green);
}
#commentModal .oneModalIn__cont{
	padding: 0;
	width: 100%;
}
.cmtBox{
	width: 100%;
}
.cmtBox__head{
	background-color: var(--color-pink);
	text-align: center;
	color: #fff;
	height: min(calc(126 / var(--vw-min) * 100vw), 126px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.cmtBox__head_ttl{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.cmtBox__head_name{
	font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
	font-weight: bold;
}
.cmtBox__detail{
	color:#000;
	font-size: min(calc(17 / var(--vw-min) * 100vw), 17px);
	padding: min(calc(50 / var(--vw-min) * 100vw), 50px) 0;
}
.cmtBox__detail__inner{
	margin: 0 auto;
	width: min(calc(980 / var(--vw-min) * 100vw), 980px);
	display: flex;
	justify-content: space-between;
}
.detail__txt{
	width:calc(100% - min(calc(340 / var(--vw-min) * 100vw), 340px));
}
.detail__ph{
	width: min(calc(300 / var(--vw-min) * 100vw), 300px);
}
.detail__ph img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:768px){
	.cmtBox__head{
		background-color: var(--color-pink);
		text-align: center;
		color: #FFF;
		height:calc(180 / var(--vw-min) * 100vw);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.cmtBox__head_ttl{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
	.cmtBox__head_name{
		font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
	}
	.cmtBox__detail{
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: 0 0;
	}
	.cmtBox__detail__inner{
		width: 100%;
		flex-direction: column;
		padding: calc(40 / var(--vw-min) * 100vw);
	}
	.detail__txt{
		width:100%;
	}
	.detail__ph{
		width: 100%;
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
		display: flex;
		justify-content: center;
	}
	.detail__ph img{
		width: 55vw;
	}
}