@charset "UTF-8";

.page-header{
	display:none;
}
	
.page-caption-sp{
	display:none;
}
	
.cover{
	background-image: url("../img/interview_top.webp");
}

/*//////////----- RECRUIT-INTERVIEW-CHILD -----//////////*/

.interview-child{
	width:100%;
	margin:0 auto;
	max-width: 360px;
}

.interview-child-cover{
	width:100%;
	position: relative;
}

.interview-child-cover p.copy{
	font-size:2.0rem;
	line-height:30px;
	
	text-align: center;
	
	margin-bottom:20px;
	position: relative;
}

.interview-child-cover p.copy:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	background-image: url("../img/icon-philosophy-message-h5.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
	
	position: absolute;
	top:-15px;
	left:-15px;
}

.interview-child-cover p.copy:after{
	display:none;
	content:"";
	
	width:30px;
	height:30px;
	
	background-image: url("../img/icon-philosophy-message-h5.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
	
	position: absolute;
	bottom:-15px;
	right:-15px;
	
	transform: rotate(180deg)
}

.interview-child-cover p.copy span.note{
	display:block;
}

.interview-child-cover p.copy span.note br{
	display:none;
}

.interview-child-cover p.thumbnail{
	width:100%;
	position: relative;
}

.interview-child-cover p.thumbnail:before{
	display:block;
	content:"";
	
	box-sizing: border-box;
	padding-top:55%;
}

.interview-child-cover p.thumbnail img{
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center left;
}

.interview-child-cover p.staff{
	font-size:1.8rem;
	line-height:30px;
	font-weight:700;
	
	position: absolute;
	bottom:40%;
	right:10%;
}

.interview-child-cover p.staff span.note{
	display:block;
	
	font-size:1.6rem;
	line-height:20px;
	font-weight:500;
}

.interview-body div.container{
	box-sizing: border-box;
	padding:20px 0;
	
	position: relative;
}

.interview-body div.container:nth-child(1){
	padding-bottom:0;
}

.interview-body div.container-child{
	box-sizing: border-box;
	padding-bottom:30px;
}

.interview-body div.container-child:last-child{
	padding-bottom:0;
}

.interview-body h5{
	font-size:1.8rem;
	line-height:40px;
	color:#ff934c;
	
	box-sizing: border-box;
	padding-left:25px;
	position: relative;
	
	margin-bottom:5px;
}

.interview-body h5:before{
	display:block;
	content:"Q.";
	
	position: absolute;
	top:0;
	left:0;
}

.interview-body div.ans{
	font-size:1.6rem;
	line-height:30px;
}

.interview-body div.ans p{
	margin-bottom:30px;
}

.interview-body div.ans p:last-of-type{
	margin-bottom:0;
}

.interview-body div.ans img.thum{
	width:180px;
	
	box-sizing: border-box;
	padding-left:5px;
	padding-bottom:5px;
}

.interview-body div.container p.thum-wide{
	width:100%;
	margin-bottom:20px;
}

.interview-body div.container p.thum-wide img{
	width:100%;
	vertical-align: bottom;
}

@media only screen and (min-width: 960px){
	
	.interview-child{
		max-width: 860px;
	}
	
	.interview-child-cover p.copy{
		font-size:1.4rem;
		line-height:45px;
		
		text-align: left;
		
		box-sizing: border-box;
		padding-left:40px;
		
		position: absolute;
		top:20%;
		left:50%;
		
		z-index: 10;
	}
	
	.interview-child-cover p.copy:before{
		width:40px;
		height:40px;
		
		background-size:40px;
		
		top:0;
		left:0;
	}
	
	.interview-child-cover p.copy span.note br{
		display:block;
	}
	
	.interview-child-cover p.staff{
		font-size:1.0rem;
		line-height:30px;
		
		bottom:35%;
		right:29.5%;
	}
	
	.interview-child-cover p.staff span.note{
		font-size:0.8rem;
		line-height:20px;
	}
	
	.interview-body div.container{
		padding:40px 0;
	}
	
	.interview-body div.container p.thum-wide{
		margin-bottom:30px;
	}
	
	.interview-body div.container:nth-child(1){
		width:530px;
	}
	
	.interview-body div.container-child{
		padding-bottom:60px;
	}
	
	.interview-body h5{
		font-size:1.2rem;
		line-height:30px;
		
		margin-bottom:15px;
	}
	
	.interview-body div.ans{
		font-size:0.8rem;
		line-height:30px;
	}
	
	.interview-body div.ans img.thum{
		width:290px;
		
		position: absolute;
		top:40px;
		right:-330px;
		
		padding:0;
	}
}

/*//////////----- インタビューページのページング_2024年4月1日追加 -----//////////*/

.interview-pager{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
	margin:0 auto;
	max-width: 375px;
	
	box-sizing: border-box;
	padding:40px 20px;
}
	
@media only screen and (min-width: 960px){
	
	.interview-pager{
		max-width: 720px;
		padding:80px 40px;
	}
}

.interview-pager div.row{
	width:100%;
	
	background-color:#fff;
	color:#000;
	
	background-image: url("../img/icon-arrow-left-color.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: center left 10px;
	
	box-sizing: border-box;
	border:solid 1px #ccc;
	border-bottom:none;
}

@media only screen and (min-width: 960px){
	
	.interview-pager div.row{
		width:50%;
	}
	
	.interview-pager div.row:nth-child(1){
		border-right:none;
		border-bottom:solid 1px #ccc;
	}
}

.interview-pager div.row:nth-child(2){
	background-image: url("../img/icon-arrow-right-color.webp");
	background-position: center right 10px;
	border-bottom:solid 1px #ccc;
}

.interview-pager div.row a{
	display:block;
	transition:0.25s;
}
	
.interview-pager div.row a:hover{
	opacity: 0.5;
	text-decoration: none;
	color:#000;
}
	
.interview-pager div.row div.inner{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
	
	box-sizing: border-box;
	padding:10px 20px 10px 30px;
	
	font-size:1.4rem;
	line-height:18px;
}
	
.interview-pager div.row:nth-child(2) div.inner{
	padding:10px 30px 10px 20px;
}

@media only screen and (min-width: 960px){
	
	.interview-pager div.row div.inner{
		font-size:0.7rem;
		line-height:20px;
	}
}
	
.interview-pager div.row p.thumb{
	width:85px;
	position: relative;
}

.interview-pager div.row:nth-child(2) p.thumb{
	order:2;
}

.interview-pager div.row p.thumb:before{
	display:block;
	content:"";
	
	box-sizing: border-box;
	padding-top:100%;
}

.interview-pager div.row p.thumb img{
	display:block;
	
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center;
	
	box-sizing: border-box;
	border:solid 2.5px #ff934c;
}

.interview-pager div.row p.comment{
	width:calc(100% - 85px);
	
	box-sizing: border-box;
	padding:0 0 0 10px;
}
	
.interview-pager div.row:nth-child(2) p.comment{
	order:1;
	padding:0 10px 0 0;
}