/* CSS Document */

/*==================================================

top-contents
=================================================*/

.top-image.interview-mv::before {
	border-bottom: 8px solid #ef2a2f;
}
.top-image.interview-mv .mv {
	width: 90%;
	max-width: 1273px;
	position: relative;
	margin: 0 auto;
	z-index: 2;
}
.top-image.interview-mv .mv::after {
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	background-image: url("../../images/overray2.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	top: -15%;
	right: -5%;
	z-index: 0;
}
.top-image.interview-mv .mv .person {
	width: 100%;
	position: relative;
	z-index: 3;
}
.top-image.interview-mv .mv .person dl {
	width: 55%;
	display: table;
	position: absolute;
	color: #FFF;
	font-size: clamp(1.4rem, 2.4vw, 2.4rem);
	line-height: 140%;
	background-color: #ef2a2f;
	left: 0;
	bottom: 0;
	-webkit-transform: translate(0, -90%); 
	transform: translate(0, -90%);
	z-index: 2;
}
.top-image.interview-mv .mv .person dl dt {
	width: 43%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 5% .5em;
}
.top-image.interview-mv .mv .person dl dd {
	display: table-cell;
	background-color: #000;
	vertical-align: middle;
	padding: 5% 1em;
}
.top-image.interview-mv .mv .txt1 {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.interview-cont .switch {
    width: 90%;
    max-width: 1280px;
    display: flex;
    flex-flow: row wrap;
    margin: 80px auto 0;
}
.interview-cont .switch li {
    width: 50%;
    cursor: pointer;
    color: #999;
    text-align: center;
    line-height: 100%;
    background-color: #999;
    padding: 1.5em 1em;
}
.interview-cont .switch li img {
	width: 30%;
	max-width: 110px;
	height: auto;
}
.interview-cont.col1 .switch li.active {
    background-color: #ef2a2f;
}
.interview-cont.col2 .switch li.active {
    background-color: #ffcf3e;
}
.interview-cont.col3 .switch li.active {
    background-color: #1ae2f3;
}
.interview-cont.col4 .switch li.active {
    background-color: #00b95f;
}
.interview-cont .item {
	padding: 80px 0 100px;
}
.interview-cont.col1 .item {
	background-color: #ef2a2f;
}
.interview-cont.col2 .item {
	background-color: #ffcf3e;
}
.interview-cont.col3 .item {
	background-color: #1ae2f3;
}
.interview-cont.col4 .item {
	background-color: #00b95f;
}

.interview-cont.col1 #cate1 {
	background-image: url("../../interview/images/on_bg.png"),url("../../interview/images/intervie_bg.png");
	background-position: left bottom -1px,center center;
	background-repeat: no-repeat;
	background-size: 50%,contain;
}
.interview-cont.col1 #cate2 {
	background-image: url("../../interview/images/on_bg.png"),url("../../interview/images/intervie_bg.png");
	background-position: right bottom -1px,center center;
	background-repeat: no-repeat;
	background-size: 50%,contain;
}

.interview-cont .item dl {
	width: 90%;
	max-width: 1280px;
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
	margin: 0 auto;
}
.interview-cont #cate2 dl {
	flex-flow: row wrap;
}
.interview-cont .item dl:nth-of-type(n+2) {
	margin-top: 80px;
}
.interview-cont .item dl dt {
	width: 48%;
}
.interview-cont .item dl dd {
	width: 46%;
}
.interview-cont .item dl dd .qes {
	position: relative;
	color: #FFF;
	font-size: clamp(2rem, 2.8vw, 2.8rem);
	line-height: 160%;
	padding-left: 2.2em;
}
.interview-cont .item dl dd h2 {
	font-size: clamp(2.4rem, 3.2vw, 3.6rem);
	font-weight: 600;
	line-height: 160%;
	margin: .5em 0;
}
.interview-cont .item dl dd .qes::before {
	content: " ";
	display: block;
	position: absolute;
	width: 1.5em;
	height: 4px;
	background-color: #fff;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%); 
	transform: translate(0, -50%);
	z-index: 1;
}
.interview-cont .item dl dd p {
	font-size: clamp(1.6rem, 2vw, 2rem);
	line-height: 180%;
}

.interview-cont img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.top-image.interview-mv .mv::after {
		top: -15%;
		right: -20%;
		z-index: 0;
	}
	.top-image .mv .person {
		width: 100%;
		position: relative;
		z-index: 1;
	}
	.top-image .mv .person img {
		width: 130%;
		max-width: 130%;
		height: auto;
		margin-left: -20%;
	}
	.top-image.interview-mv .mv .person dl {
		width: 50%;
		display: block;
		left: 0;
		bottom: 0;
		z-index: 2;
	}
	.top-image.interview-mv .mv .person dl dt {
		width: 100%;
		display: block;
		text-align: center;
		vertical-align: middle;
		padding: 3% .5em;
	}
	.top-image.interview-mv .mv .person dl dd {
		width: 100%;
		display: block;
		text-align: center;
		background-color: #000;
		vertical-align: middle;
		padding: 3% 1em;
	}
	.interview-cont .switch {
		 margin: 8% auto 0;
	}
	.interview-cont .switch li {
		 padding: 1.2em 1em;
	}
	.interview-cont .item {
		padding: 8% 0 10%;
	}
	.interview-cont .item dl {
		width: 90%;
		max-width: 1280px;
		flex-direction: column-reverse;
		margin: 0 auto;
	}
	.interview-cont #cate2 dl {
		flex-direction: column-reverse;
	}
	.interview-cont .item dl:nth-of-type(n+2) {
		margin-top: 8%;
	}
	.interview-cont .item dl dt {
		width: 100%;
		margin-top: 6%;
	}
	.interview-cont .item dl dd {
		width: 100%;
		max-width: 620px;
		margin: 0 auto;
	}
	.interview-cont.col1 #cate1,.interview-cont.col1 #cate2 {
		background-image: url("../../interview/images/intervie_bg.png");
		background-position: left top;
		background-repeat: repeat-y;
		background-size: 100%;
	}
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	

}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	

}