@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------------------------ */

/*  インタビュー一覧

/* ------------------------------------------------------------------------ */

body.interviews section{
	margin: 48px auto 0;
}

/* mainVisual
--------------------------------------------------------------------------- */

body.interviews .mainVisual{
	background: url("/wp/wp-content/themes/bigman/interviews/img/img_mainvisual_interviews.jpg") no-repeat center / cover;
}

/* interviewNav_area
--------------------------------------------------------------------------- */

.interviewNav_area{
	background-color: #f5f5f5;
	margin-top: 48px;
    padding: 16px 10px;
}

.interviewNav_area > ul{
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
    margin: 0 auto;
}

.interviewNav_area > ul > li{
	position: relative;
    width: 21%;
    margin: 8px 2%;
	padding: 2px;
	border-radius: 5px;
	background: linear-gradient(90deg, #3689b3, #7c8cb0);
}

.interviewNav_area > ul > li > a{
	display: inline-block;
	background: #fff;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	transition: all .3s;
}

.interviewNav_area > ul > li > a .gradation-border{
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	background: linear-gradient(90deg, #3689b3, #7c8cb0);
	background: -webkit-linear-gradient(0deg, #3689b3, #7c8cb0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: rotate(0.03deg);
	transition: all .3s;
}

.interviewNav_area > ul > li > a:hover{
	background: transparent;
}

.interviewNav_area > ul > li > a:hover  .gradation-border{
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
}

.interviewNav_area > ul > li.current > a{
	background: transparent;
}

.interviewNav_area > ul > li.current > a .gradation-border{
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
}

@media screen and (max-width: 767px){
	.interviewNav_area > ul > li{
		width: 30%;
		margin: 4px 8px;
	}
	
}

@media screen and (max-width: 424px){
	.interviewNav_area > ul > li{
		margin: 4px;
	}
	
}

/* interview_list
--------------------------------------------------------------------------- */

.interview_list{
	margin-top: 50px;
}

.interview_list > ul{
	display: flex;
	flex-wrap: wrap;
	margin-top: 48px;
}

.interview_list > ul > li{
	position: relative;
	width: calc(100% / 3 - 16px);
	margin: 80px 24px 0 0;
}

.interview_list > ul > li:nth-of-type(-n+3){
	margin-top: 0;
}

.interview_list > ul > li:nth-of-type(3n){
	margin-right: 0;
}

.interview_list > ul > li > a{
	transition: all .3s;
}

.interview_list > ul > li > a:hover .ttl{
	color: #9bbed3;
}

.interview_list > ul > li > a .interview_img img{
	width: 100%;
    object-fit: cover;
    transition: .3s;
    height: 100%;
}

.interview_list > ul > li > a:hover .interview_img img{
	transform: scale(1.1);
	transition: .3s;
}

.interview_img{
	position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 2.8;
}

.interview_img .category{
	position: absolute;
    right: 0;
    top: 20px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid #fff;
    padding: 0 10px;
    line-height: 1.3;
    letter-spacing: -0.03em;
	z-index: 10;
}

.interview_list .ttl{
	font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.5;
    color: #3689b3;
    text-align: left;
    margin-top: 20px;
    letter-spacing: -0.06em;
	transition: .3s;
}

.interview_list .place{
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	color: #a0a0a0;
	text-align: left;
	margin-top: 8px;
}

@media screen and (max-width: 940px){
	.interview_list > ul > li{
		 width: calc(100% / 2 - 8px);
		 margin: 40px 16px 0 0;
	}
	
	.interview_list > ul > li:nth-of-type(3n){
		margin: 40px 16px 0 0;
	}
	
	.interview_list > ul > li:nth-of-type(2n){
		margin-right: 0;
	}
	
	.interview_list > ul > li .ttl{
		font-size: 1.8rem;
		margin-top: 16px;
	}
	
	.interview_list > ul > li .place{
		font-size: 1.6rem;
	}
	
	.interview_list > ul > li .interview_img .category{
		font-size: 1.4rem;
		right: 10px;
	}
	
}

@media screen and (max-width: 424px){
	
	.interview_list{
		margin-top: 32px;
	}
	
	.interview_list > ul{
		flex-direction: column;
	}
	
	.interview_list > ul > li{
		width: 100%;
		margin: 0 0 36px;
	}
	
	.interview_list > ul > li:nth-of-type(3n){
		margin: 0 0 36px;
	}
	
	.interview_list > ul > li .ttl{
		margin-top: 8px;
	}
	
	.interview_list > ul > li .place{
		margin-top: 4px;
	}
	
}

/* フッター
--------------------------------------------------------------------------- */

body.interviews footer{
	margin-top: 236px;
}

@media screen and (max-width: 940px){
	
	body.interviews footer{
		margin-top: 96px;
	}
	
}

/* ------------------------------------------------------------------------ */

/*  インタビュー詳細

/* ------------------------------------------------------------------------ */

/* interview-detail_top
--------------------------------------------------------------------------- */

.interview-detail_top{
	background-color: #fafafa;
}

.interview-detail_top .flex{
	justify-content: space-between;
}

.interview-detail_top .imgBox{
	width: 60%;
}

.interview-detail_top .imgBox img{
	object-fit: cover;
    height: 100%;
}

.interview-detail_top .textBox{
	display: flex;
	flex-direction: column;
	width: 36%;
}

.interview-detail_top .textBox h3{
	font-size: 2.4rem;
    color: #3689b3;
    text-align: left;
    letter-spacing: -0.06em;
    margin-top: 56px;
    line-height: 1.5;
    border-bottom: 1px solid #c8d9e4;
	width: 85%;
    min-height: 80px;
}

.interview-detail_top .textBox .text_bottom{
	position: relative;
	height: 100%;
}

.interview-detail_top .textBox .text_bottom:before{
	content: "";
	position: absolute;
	bottom: 16px;
	right: 16px;
	max-width: 250px;
    width: 58%;
	background: url("/wp/wp-content/themes/bigman/interviews/img/icon_detail_001.png") no-repeat center / contain;
	aspect-ratio: 1 / 0.71;
}

.interview-detail_top .textBox .text_bottom p{
	margin-top: 16px;
	text-align: left;
}

@media screen and (max-width: 1080px){
	.interview-detail_top .textBox h3{
		margin-top: 32px;
		min-height: auto;
   	 	padding-bottom: 16px;
	}
	
	.interview-detail_top .textBox .text_bottom p{
		margin-top: 8px;
	}
	
	.interview-detail_top .textBox .text_bottom:before{
		width: 48%;
	}
}

@media screen and (max-width: 940px){
	.interview-detail_top .imgBox{
		width: 52%;
	}
	
	.interview-detail_top .textBox{
		width: 46%;
	}
	
	.interview-detail_top .textBox .text_bottom{
		margin-top: 8px;
	}
	
	.interview-detail_top .textBox .text_bottom:before{
		width: 39%;
	}
	
	.interview-detail_top .textBox h3{
		font-size: 2.2rem;
		margin-top: 24px;
	}
	
	.interview-detail_top .textBox .text_bottom p{
		margin-top: 0;
	}
}

@media screen and (max-width: 767px){
	.interview-detail_top .flex{
		flex-direction: column;
	}
	
	.interview-detail_top .imgBox{
		width: 100%;
	}
	
	.interview-detail_top .textBox{
		width: 100%;
		padding: 0 20px;
	}
	
	.interview-detail_top .textBox h3{
		width: 100%;
	}
	
	.interview-detail_top .textBox .text_bottom{
		padding: 0 0 80px;
	}
	
	.interview-detail_top .textBox .text_bottom:before {
		bottom: 8px;
		right: 8px;
		width: auto;
		height: 96px;
	}
	
}


/* question_list
--------------------------------------------------------------------------- */

.question_list .inner{
	max-width: 940px;
	width: 100%;
	margin: 0 auto;
}

.question_list .question{
	position: relative;
	padding-left: 32px;
	font-size: 2.0rem;
	font-weight: 500;
	text-align: left;
	margin-top: 48px;
	letter-spacing: -0.06em;
}

.question_list .question:before{
	position: absolute;
    top: 0.1em;
    left: 0;
    content: "Q.";
    color: #3689b3;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: normal;
}

.question_list .answer{
	font-weight: 500;
	text-align: left;
	letter-spacing: -0.06em;
}

.question_list .answer_area{
	margin-top: 16px;
}

.question_list .answer_area.flex{
	justify-content: space-between;
}

.question_list .answer_area.flex .answer{
	width: 50%;
}

.question_list .answer_area.flex figure{
	width: 45%;
}

@media screen and (max-width: 767px){
	.question_list .question{
		font-size: 1.8rem;
		line-height: 1.5;
		padding-left: 28px;
	}
	
	.question_list .question:before{
		top: -0.16em;
		font-size: 2.2rem;
	}
	
	.question_list .answer_area{
		margin-top: 0;
	}
	
	.question_list .answer_area.flex{
		flex-direction: column;
	}
	
	.question_list .answer_area.flex .answer{
		width: 100%;
		order: 2;
		margin-top: 8px;
	}
	
	.question_list .answer_area.flex figure{
		width: 100%;
		order: 1;
		margin-top: 16px;
	}
	
}

/* フッター
--------------------------------------------------------------------------- */

body.interviews.detail footer{
	margin-top: 200px;
}

@media screen and (max-width: 940px){
	
	body.interviews.detail footer{
		margin-top: 96px;
	}
	
}