@charset "utf-8";
/*-----------------------------------------------
 * NEWS - COMMON
-------------------------------------------------*/
.mainContent{
	width: 86.6667%;/* 1040 */
	/* min-width: min(1040px, 100%);
	max-width: calc(1040px * var(--max-percent)); */
	width: 100%;
	max-width: 1664px;
	margin: 0 auto;
}
.mainContentIn{
	width: 100%;
	padding: 0 7.6924%;/* 0 80 */
	position: relative;
}

@media screen and (max-width:768px){
	.mainContent{
		max-width: 100%;
	}
	.mainContentIn{
		padding: 0;
	}
}
 

/*-----------------------------------------------
 * NEWS - LISTS
-------------------------------------------------*/
.interviewLists{
	width: 100%;
}
.interviewList{
	position: relative;
}
.interviewList:not(:last-child){
	margin-bottom: min(2%, 16px);
}
.interviewList__link{
	display: flex;
	text-decoration: none;
	background-color: #fff;
	position: relative;
}
.interviewList__link:before,
.interviewList__link:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: var(--color-black);
	z-index: 2;
}
.interviewList__link:before{
	top: 0;
}
.interviewList__link:after{
	bottom: 0;
}
.interviewList__date{
	width: 10.9091%;/* 96 */
	max-width: 96px;
	flex-shrink: 0;
	background-color: #fafaeb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	line-height: 1.25;
	font-weight: 700;
}
.interviewList:nth-child(odd) .interviewList__date,
.interviewList:nth-child(odd) .interviewList__title-media{
	color: var(--color-orange);
}
.interviewList:nth-child(even) .interviewList__date,
.interviewList:nth-child(even) .interviewList__title-media{
	color: var(--color-blue);
}
.interviewList__title{
	display: flex;
	flex-direction: column;
	padding: 2% 2.7273%;/* 16 24 */
}
.interviewList__title-media {
	line-height: 1.25;
	font-weight: 700;
	margin-bottom: min(calc(10 / var(--vw-min) * 100vw), calc(10px * var(--max-percent)));;
}
.interviewList-arrowArea{
	flex-shrink: 0;
	width: 10.9091%;/* 96 */
	max-width: 96px;
	position: relative;
	margin-left: auto;
}
.interviewList-arrow {
	position: absolute;
    top: 0;
    bottom: 0;
    right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
    width: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
    height: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
    margin: auto 0;
	border-radius: 50%;
    border: 1px solid var(--color-black);
    background-color: var(--color-black);
	overflow: hidden;
}
.interviewList-arrow:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background: linear-gradient(#FFF, #FFF) right bottom / 0 100% no-repeat;
	transition: background-size 0.4s;
}
.interviewList-arrow::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 40%;
    margin: auto;
    -webkit-mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
    mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
    background-color: #fff;
    z-index: 2;
	transition: .3s ease;
}
@media screen and (hover:hover) and (pointer: fine){
	.interviewList__link .interviewList__title-txt span{
		background: linear-gradient(var(--color-yellow), var(--color-yellow)) right bottom / 0 40% no-repeat;
		transition: background-size 0.8s;
	}
	.interviewList__link:hover .interviewList__title-txt span {
		background-size: 100% 40%;
		background-position: left bottom;
	}
	.interviewList__link:hover .interviewList-arrow:before{
		background-position: left bottom;
		background-size: 100% 100%;
	}
	.interviewList__link:hover .interviewList-arrow::after{
		background-color: var(--color-black);
		transform: translateX(25%);
		transition-delay: .2s;
	}
}

@media screen and (max-width:768px){
	.interviewLists{
		padding: 0 6.4%;/* 0 48 */;
	}
	.interviewList:not(:last-child){
		margin-bottom: calc(24 / var(--vw-min) * 100vw);
	}
	.interviewList__date{
		width: auto;
		min-width: 18.3487%;/* 120 */
		padding: var(--sp-size-16) 0;
	}
	.interviewList__title{
		padding: calc(12 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
		line-height: 2;
	}
	.interviewList__title-media {
		margin: calc(10 / var(--vw-min) * 100vw) 0;
	}
	.interviewList-arrowArea{
		width: calc(96 / var(--vw-min) * 100vw);
	}
	.interviewList-arrow {
		width: calc(72 / var(--vw-min) * 100vw);
        height: calc(72 / var(--vw-min) * 100vw);
		right: var(--sp-size-12);
		border-width: var(--sp-size-2);
	}
	.interviewList-arrow::after {
		width: 33.3334%;
        height: 33.3334%;
	}
}