@charset "UTF-8";

/*===============*/
/*! interview_index */
/*===============*/
/*! visual */
main.interview_index .visual {
	position: relative;
	background-color: #BDBDBD;
}

main.interview_index .visual div::before {
	background: linear-gradient(-90deg, rgba(189, 189, 189, 0), rgba(189, 189, 189, 1));
}

main.interview_index .visual div::after {
	background: linear-gradient(90deg, rgba(189, 189, 189, 0), rgba(189, 189, 189, 1));
}

/*! detail */
main.interview_index .detail {
	position: relative;
	padding: 100px 0;
}

main.interview_index .detail>div {
	position: relative;
	z-index: 10;
	margin: 0 auto;
	max-width: 1360px;
}

main.interview_index .detail .interview {
	margin-bottom: 50px;
	display: flex;
    flex-wrap: wrap;
}

main.interview_index .detail .interview::after {
	display: block;
	clear: both;
	content: "";
}

main.interview_index .detail .interview .interview-item {
	position: relative;
	display: block;
	overflow: hidden;
	width: calc((100% - 60px) / 3);
	padding: 10px;
	margin: 10px;

}

body main.interview_index .detail .interview .interview-item a {
    margin: 0;
	display: block;
	position: relative;
	background: #efefef;
}

body.dv_pc main.interview_index .detail .interview .interview-item a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	transition: background-color .2s, border .2s, opacity .2s;
	width: 100%;
	height: 100%;
}
body.dv_pc main.interview_index .detail .interview .interview-item a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	transition: background-color .2s, border .2s, opacity .2s;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: 2px #0e283a solid;
}

body.dv_pc main.interview_index .detail .interview .interview-item a:hover::before {
	opacity: 1;
	background-color: transparent;
}
body.dv_pc main.interview_index .detail .interview .interview-item a:hover::after {
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	border: 2px #0e283a solid;
}

main.interview_index .detail .interview .interview-item img {
	position: relative;
	transition: transform .2s;
}

main.interview_index .detail .interview .interview-item a:hover img {
	transform: scale(1.2, 1.2);
}

main.interview_index .detail .interview .interview-item:first-child img {
	z-index: 0;
}

main.interview_index .detail .interview .interview-item:first-child h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	z-index: 15;
	padding-left: .1em;
	color: #fccf01;
	white-space: nowrap;
	letter-spacing: .1em;
	font-weight: 900;
	font-size: 200%;
	font-family: urw-din, sans-serif;
	transform: translate(-50%, -50%);
}

main.interview_index .detail .interview .interview-item .interview-wrap {
	position: absolute;
	bottom: 8%;
	left: 6%;
	z-index: 4;
	white-space: nowrap;
}

main.interview_index .detail .interview div .occupation {
	padding: 0 1.5em 0 1.55em;
	background-color: #FFF;
	color: #0e283a;
	text-align: left;
	letter-spacing: .05em;
	font-weight: 700;
	line-height: 2.4;
}

main.interview_index .detail .interview div .occupation::first-letter {
	color: #b62b00;
}

main.interview_index .detail .interview div .name {
	color: #FFF;
	white-space: nowrap;
	background: #0e283a;
    padding: 0em 1.5em;
    display: flex;
    align-items: center;
    width: auto;
}

main.interview_index .detail .interview div .name * {
	display: inline-block;
	letter-spacing: .1em;
}

main.interview_index .detail .interview div .name small {
	margin-right: .5em;
	font-size: 75%;
}

main.interview_index .detail .interview div .name strong {
	font-weight: 700;
	font-size: 140%;
}

main.interview_index .detail .interview .interview-item .number {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	letter-spacing: .05em;
    font-weight: 900;
    font-size: 250%;
	font-family: urw-din, sans-serif;
	line-height: 1;
	background: #fff;
	padding: .5rem 1rem;
	min-width: 2em;
    min-height: 1.5em;
	z-index: 6;
}

main.interview_index .detail .interview .interview-item .number.new {
	min-width: 3em;
	letter-spacing: .01em;
	background: #fccf01;
}

main.interview_index .detail .interview .interview-item .number.new {
	text-transform: uppercase;
}


@media screen and (max-width:768px) {

	/*! detail */
	main.interview_index .detail {
		padding: 0;
	}

	main.interview_index .detail>div {
		max-width: none;
	}

	main.interview_index .detail .interview .interview-item {
		width: 50%;
		margin: 0;
		padding: 0;
	}

	main.interview_index .detail .interview .interview-item .interview-wrap {
		bottom: 30%;
	}

	main.interview_index .detail .interview div .occupation {
		position: absolute;
		padding: 0 .75em;
		letter-spacing: 0;
		font-size: 70%;
		line-height: 2;
	}

	main.interview_index .detail .interview div .name {
		position: absolute;
		top: 1.5em;
		padding: 0 .75em;
	}

	main.interview_index .detail .interview div .name small {
		display: block;
		font-size: 70%;
		line-height: 1.4;
	}

	main.interview_index .detail .interview div .name strong {
		display: block;
		font-size: 120%;
		line-height: 1.4;
	}

	main.interview_index .detail .interview .interview-item .number {
		font-size: 150%;
	}

}

/*===============*/
/*! interview */
/*===============*/
/*! interview_visual */
.interview_visual {
	position: relative;
	z-index: 10;
	height: 700px;
}

.interview_visual>div {
	position: absolute;
	left: 50%;
	width: 1360px;
	height: 700px;
	transform: translateX(-50%);
}

.interview_visual>div>i.l,
.interview_visual>div>i.r {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	width: 20%;
	content: "";
	opacity: 0;
	transition: .2s;
}

.interview_visual>div>i.l {
	left: -1px;
}

.interview_visual>div>i.r {
	right: -1px;
}

.interview02 .interview_visual {
	background-color: #D7DBDE;
}

.interview02 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(215, 219, 222, 0), rgba(215, 219, 222, 1));
}

.interview02 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(215, 219, 222, 0), rgba(215, 219, 222, 1));
}

.interview03 .interview_visual {
	background-color: #B5B5B5;
}

.interview03 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(181, 181, 181, 0), rgba(181, 181, 181, 1));
}

.interview03 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(181, 181, 181, 0), rgba(181, 181, 181, 1));
}

.interview04 .interview_visual {
	background-color: #C8C7C5;
}

.interview04 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(200, 199, 197, 0), rgba(200, 199, 197, 1));
}

.interview04 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(200, 199, 197, 0), rgba(200, 199, 197, 1));
}

.interview05 .interview_visual {
	background-color: #E0DDD6;
}

.interview05 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(224, 221, 214, 0), rgba(224, 221, 214, 1));
}

.interview05 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(224, 221, 214, 0), rgba(224, 221, 214, 1));
}

.interview06 .interview_visual {
	background-color: #CACFCB;
}

.interview06 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(202, 207, 203, 0), rgba(202, 207, 203, 1));
}

.interview06 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(202, 207, 203, 0), rgba(202, 207, 203, 1));
}

.interview07 .interview_visual {
	background-color: #C4C4C2;
}

.interview07 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(196, 196, 194, 0), rgba(196, 196, 194, 1));
}

.interview07 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(196, 196, 194, 0), rgba(196, 196, 194, 1));
}

.interview08 .interview_visual {
	background-color: #CCC3C2;
}

.interview08 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(204, 195, 194, 0), rgba(204, 195, 194, 1));
}

.interview08 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(204, 195, 194, 0), rgba(204, 195, 194, 1));
}

.interview09 .interview_visual {
	background-color: #DCDCDA;
}

.interview09 .interview_visual>div::before {
	background: linear-gradient(-90deg, rgba(220, 220, 218, 0), rgba(220, 220, 218, 1));
}

.interview09 .interview_visual>div::after {
	background: linear-gradient(90deg, rgba(220, 220, 218, 0), rgba(220, 220, 218, 1));
}

.interview_visual>div>div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 20;
	min-width: 900px;
	width: 90vw;
	transform: translateX(-50%);
}

@media screen and (min-width:1360px) {
	.interview_visual {
		height: auto;
	}

	.interview_visual>div {
		position: relative;
		left: auto;
		margin: 0 auto;
		max-width: 1680px;
		width: 100%;
		height: auto;
		transform: translateX(0);
	}

	.interview_visual>div>div {
		max-width: 1400px;
	}
}

@media screen and (min-width:1600px) {

	.interview_visual>div>i.l,
	.interview_visual>div>i.r {
		opacity: 1;
	}

	.interview_visual h1,
	.interview_visual h2,
	.interview_visual p small,
	.interview_visual p strong {
		text-shadow: 0 1px 5px rgba(0, 0, 0, .25);
	}

	.interview_visual h1::before {
		box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
	}
}

.interview_visual>div>div>span {
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
}

.interview_visual h1 {
	position: absolute;
	bottom: 0;
	padding-bottom: 1.25em;
	color: #FFF;
	text-align: center;
	white-space: nowrap;
	font-weight: 900;
	font-family: urw-din, sans-serif;
	line-height: .95;
}

.interview_visual h1::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 90%;
	height: 8px;
	background-color: #fccf01;
	content: "";
	white-space: nowrap;
	transform: translateX(-50%);
}

.interview_visual h1 small {
	display: block;
	letter-spacing: .15em;
	background: #004985;
	padding: 1em 0 0em .15em;
}

.interview_visual h1 strong {
	display: block;
	font-weight: 500;
	font-size: 1000%;
	background: #004985;
	padding: 0 .1em .1em;
}

.interview_visual p {
	position: absolute;
	top: 40px;
	padding-left: .25em;
	color: #FFF;
	white-space: nowrap;
	line-height: 1.6;
	font-size: 1.5rem;
}

.interview_visual p small {
	display: block;
	letter-spacing: .05em;
	font-size: 80%;
}

.interview_visual p strong {
	display: block;
	letter-spacing: .2em;
	font-weight: 700;
	font-size: 160%;
}

.interview_visual h2 {
	position: absolute;
	bottom: -1em;
	font-size: 160%;
}

.interview_visual h2 span {
	display: inline-block;
	margin-top: .3em;
	padding: 0 .75em;
	background-color: #0e283a;
	color: #FFF;
	font-weight: 700;
	line-height: 2;
}

.interview_visual h2 {
	left: 0;
}

.interview_visual.rgt h2 {
	right: 0;
	left: auto;
}

.interview_visual>div>div>span,
.interview_visual h1,
.interview_visual p {
	left: 3%;
}

.interview_visual.rgt>div>div>span,
.interview_visual.rgt h1,
.interview_visual.rgt p {
	right: 3%;
	left: auto;
}

.interview_visual.rgt h2,
.interview_visual.rgt p small,
.interview_visual.rgt p strong {
	text-align: right;
}

/*! detail */
main.interview .detail {
	position: relative;
	padding: 100px 0 80px;
	background-color: #EFEFEF;
}

main.interview .detail>div {
	position: relative;
	margin: 0 auto;
}

main.interview .detail .txt {
	position: relative;
	z-index: 20;
	margin: 0 auto;
	padding: 100px 0;
	max-width: 1000px;
	width: 90%;
	background-color: #FFF;
}

main.interview .detail .txt>div>div {
	margin: 0 auto;
	width: 70%;
}

main.interview .detail .txt h3 {
	position: relative;
	margin-bottom: 80px;
	padding-left: .05em;
	color: #0e283a;
	text-align: center;
	letter-spacing: .05em;
	font-weight: 700;
	font-size: 160%;
}

main.interview .detail .txt h3::first-letter {
	color: #b62b00;
}

main.interview .detail .txt h3::before {
	position: absolute;
	bottom: -35px;
	left: 50%;
	width: 3em;
	height: 2px;
	background-color: #fccf01;
	content: "";
	transform: translateX(-50%);
}

main.interview .detail .txt p {
	line-height: 2.2;
}

main.interview .detail .img {
	margin: -30px auto;
	max-width: 1160px;
	width: 94%;
}

main.interview .detail .img_full {
	margin-top: -30px;
	background-color: #FFF;
}

main.interview .detail .img_full div {
	position: relative;
	margin: 0 auto;
	max-width: 1366px;
}

main.interview .detail .img_full div::before,
main.interview .detail .img_full div::after {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	z-index: 10;
	width: 20%;
	content: "";
	opacity: 0;
	transition: .2s;
}

main.interview .detail .img_full div::before {
	left: -1px;
	background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

main.interview .detail .img_full div::after {
	right: -1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

main.interview .detail .txt.private {
	margin-top: -30px;
}

main.interview .detail .txt.private>div>div {
	display: flex;
	justify-content: space-around;
    width: 90%;
}

main.interview .detail .txt.private>div>div>div {
	flex: 0 0 40%;
}

main.interview .detail .txt.private>div>div p {
	position: relative;
	display: inline-block;
	padding: 1em 2em;
    background: #0e283a;
	border-radius: 10px;
    color: #FFF;
    line-height: 1.8;
}

main.interview .detail .txt.private>div>div p::before {
    content: "";
    position: absolute;
	bottom: 50%;
    left: 100%;
    width: 0;
    height: 0;
    border-width: .5em 0 .5em 1em;
    border-style: solid;
    border-color: transparent transparent transparent #0e283a;
    transform: translateY(50%);
}

main.interview .detail .txt h3.private_ttl {
	margin-bottom: 70px;
	text-align: left;
	font-family: urw-din, sans-serif;
	font-weight: 900;
	font-size: 200%;
	text-transform: uppercase;
}

main.interview .detail .txt h3.private_ttl::before {
    bottom: -15px;
    left: 0;
    transform: translateX(0);
}

main.interview .detail .txt.private>div>div figure {
	max-width: 300px;
}




@media screen and (min-width:1360px) {

	main.interview .detail .img_full div::before,
	main.interview .detail .img_full div::after {
		opacity: 1;
	}
}

@media screen and (max-width:768px) {
	/*! interview_visual */
	.interview_visual {
		height: 19.57em;
	}

	.interview_visual>div {
		width: 38em;
		height: 19.57em;
	}

	.interview_visual>div::before,
	.interview_visual>div::after {
		display: none;
	}

	.interview_visual>div>div {
		min-width: 0;
	}

	.interview_visual>div>div>span {
		top: 50%;
	}

	.interview_visual h1 {
		padding-bottom: 1em;
	}

	.interview_visual h1::before {
		height: 4px;
	}

	.interview_visual h1 small {
	font-size:85%;
	}

	.interview_visual h1 strong {
		font-size: 600%;
	}

	.interview_visual p {
		top: 1em;
		line-height: 1.5;
	}

	.interview_visual p small {
		font-size: 80%;
		letter-spacing: 0;
	}

	.interview_visual p strong {
		font-size: 140%;
	}

	.interview_visual h2 {
		font-size: 110%;
	}

	.interview_visual>div>div>span,
	.interview_visual h1,
	.interview_visual p {
		left: 2%;
	}

	.interview_visual.rgt>div>div>span,
	.interview_visual.rgt h1,
	.interview_visual.rgt p {
		right: 1%;
	}

	/*! detail */
	main.interview .detail {
		padding: 4em 0 0;
	}

	main.interview .detail .txt {
		padding: 3em 0;
		max-width: none;
	}

	main.interview .detail .txt>div>div {
		width: 80%;
	}

	main.interview .detail .txt h3 {
		margin-bottom: 3em;
		font-size: 120%;
	}

	main.interview .detail .txt h3::before {
		bottom: -1.5em;
	}

	main.interview .detail .img {
		margin: -1em auto;
		max-width: none;
		width: 100%;
	}

	main.interview .detail .img_full {
		margin-top: -1em;
		overflow: hidden;
	}

	main.interview .detail .img_full div {
		width: 130%;
		margin-left: -15%;
		max-width: none;
	}

	main.interview .detail .img_full div::before,
	main.interview .detail .img_full div::after {
		display: none;
	}

	main.interview .detail .txt.private>div>div {
		flex-direction: column;
	}

	main.interview .detail .txt.private>div>div p {
		text-align: center;
		margin-bottom: 3rem;
		left: 50%;
		transform: translateX(-50%);
	}

	main.interview .detail .txt.private>div>div p::before {
		bottom: -.8em;
		left: 50%;
		border-width: 1em .5em 0 .5em;
		border-color: #1F2A66 transparent transparent transparent;
		transform: translateX(-50%);
	}

	main.interview .detail .txt h3.private_ttl {
		text-align: center;
		margin-bottom: 3rem;
	}

	main.interview .detail .txt h3.private_ttl::before {
		bottom: -15px;
		left: 50%;
		transform: translateX(-50%);
	}

	main.interview .detail .txt.private>div>div figure {
		width: 70%;
		margin: 0 auto;
	}
}