/* ******************************************************************
 *	File name		: interview.css
 *	Summary			: css base
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

main .page_title{
	padding:0 20px;
}
main .page_title p{
	margin:0 auto 10px;
	font-weight:bold;
}
main h2 img{
	width:425px;
	max-width:100%;
}

#second_base_100{
	padding-bottom:0px;
}

footer::before{
	background:url(../../image/base/ft_bg.webp) no-repeat 0 0 #F2F2F2;
	background-size:cover;
}

/* -----------------------------------------------------------------
   interview
----------------------------------------------------------------- */
/*
#section_head{
	width:615px;
	max-width:100%;
	margin:0 auto 70px !important;
	text-align:center;
	}
	#section_head figure{
		width:100%;
		margin:0 0 20px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		overflow:hidden;
}
*/
#section_head{
	width:880px;
	max-width:100%;
	margin:0 auto 70px !important;
	padding:0 20px;
	text-align:center;
	}
	#section_head figure{
		width:100%;
		margin:0 0 20px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		overflow:hidden;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#section_head{
		padding:0 20px;
	}
}

#hito_info_box{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	}
	#hito_info_box > div:nth-child(1){
		width:calc(100% - 300px);
	}
	#hito_info_box > div:nth-child(2){
		position:relative;
		width:250px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		}
		#hito_info_box > div:nth-child(2)::before{
			content:" ";
			position:absolute;
			top:calc(50% - 15px);
			left:-40px;
			border:15px solid transparent;
			border-right:25px solid #196C19;
}

#section_head .tag{
	text-align:left;
	}
	#section_head .tag p{
		display:inline-block;
		height:26px;
		margin:0 10px 7px 0 !important;
		padding:0 15px 0;
		font-weight:500 !important;
		font-size:0.87rem !important;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius:15px;
		background:#000;
		color:#FFF
}

/* div1 */
#hito_info_box > div:nth-child(1) p{
	margin:0 0 0px;
	font-size:1.3rem;
}
#hito_info_box > div:nth-child(1) p span{
	display:inline-block;
	margin:0 0 0 10px;
	font-size:1.1rem;
}
#hito_info_box > div:nth-child(1) p.hito_name{
	margin:0 0 10px;
	font-size:4.0rem;
	line-height:1.35;
}

/* div2 */
#hito_info_box > div:nth-child(2){
	padding:15px;
	text-align:left;
	background:url(../../image/interview/base/introduction.png) no-repeat top 20px right 35px #196C19;
	}
	#hito_info_box > div:nth-child(2) > p:nth-of-type(1){
		width:100px;
		margin:0px;
		font-size:1.0rem;
		text-align:center;
		color:#FFF;
		line-height:1.3;
	}
	#hito_info_box > div:nth-child(2) > p:nth-of-type(2){
		width:100px;
		margin:0px;
		font-weight:bold;
		font-size:1.7rem;
		text-align:center;
		color:#FFF;
		line-height:1.3;
}
#hito_info_box > div:nth-child(2) .tag{
	position:absolute;
	top:120px;
	left:125px;
	color:#000;
	}
	#hito_info_box > div:nth-child(2) .tag p{
		height:23px;
		max-width:115px;
		font-size:0.8rem !important;
		background:#FFF;
		color:#000;
}
#hito_info_box > div:nth-child(2) figure{
	position:relative;
	margin:0px;
	width:100px;
	height:100px;
	margin:0 0 5px;
	padding:5px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	background:#FFF;
	overflow:hidden;
	}
	#hito_info_box > div:nth-child(2) figure img{
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		overflow:hidden;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	#hito_info_box{
		display:block;
		}
		#hito_info_box > div:nth-child(1){
			width:100%;
			margin:0 0 40px;
		}
		#hito_info_box > div:nth-child(2){
			margin:0 auto;
			}
			#hito_info_box > div:nth-child(2)::before{
				top:-40px;
				left:calc(50% - 15px);
				border:15px solid transparent;
				border-bottom:25px solid #196C19;
	}

	#section_head .tag{
		text-align:center;
	}

	/* div1 */
	#hito_info_box > div:nth-child(1) p{
		text-align:center;
	}
	#hito_info_box > div:nth-child(1) p.hito_name{
		font-size:3.0rem;
	}

	/* div2 */
	#hito_info_box > div:nth-child(2) .tag{
		text-align:left;
	}
}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

section{
	background:#F2F2F2;
	padding:0px !important;
	}
	section::before{
		content:" ";
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:80px;
		background:#E2E2EC;
		padding:0px !important;
		z-index:0;
	}
	section *{
		position:relative;
		z-index:1;
}
section .q_title .interviewer,
section .interviewee{
	position:absolute;
	}
	section .q_title .interviewer img,
	section .interviewee img{
		border:5px solid #FFF;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		overflow:hidden;
	}
	section .q_title .interviewer{
		top:-27px;
		left:20px;
		width:100px;
		padding-top:17px;
		background:url(../../image/interview/base/interviewer.png) no-repeat 0 0;
		background-size:contain;
		}
		section .q_title .interviewer img{
			border:3px solid #FFF;
	}
	section .interviewee{
		top:-30px;
		right:20px;
		width:200px;
		padding-top:30px;
		background:url(../../image/interview/base/interviewee.png) no-repeat 0 0;
		background-size:contain;
		}
		section .interviewee img{
			border:5px solid #FFF;
}

section .q_title{
	position:relative;
	width:880px;
	max-width:100%;
	margin:0 auto 70px;
	padding:0 20px 0 150px;
	}
	section .q_title *{
		color:#000 !important;
	}
	section .q_title h3{
		display:-webkit-flex;
		display:flex;
		justify-content:flex-start;
		align-items:center;
		height:80px;
		padding:0 !important;
		font-weight:bold;
		font-size:1.3rem !important;
	}
	section .q_title h3 span{
		display:inline-block !important;
		position:relative;
		font-weight:bold;
		font-size:2.9rem !important;
		margin:0 20px 0 0 !important;
}


section .a_box{
	position:relative;
	width:880px;
	max-width:100%;
	min-height:260px;
	margin:0 auto;
	padding:0 20px 100px;
}
section .answer{
	position:relative;
	width:calc(100% - 260px);
	padding:40px 40px 20px;
	background:#FFF;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	}
	section .answer::before{
		content:" ";
		position:absolute;
		top:35px;
		right:-37px;
		border:12px solid transparent;
		border-left:25px solid #FFF;
}
section .answer figure{
	width:500px;
	max-width:100%;
	margin:0 0 20px;
	max-width:100%;
}
section .answer p{
	margin:0 0 20px;
	font-size:1.0rem;
	text-align:justify;
}

section .youtube{
	width:100%;
	height:0px;
	margin:0 0 20px;
	padding-top:56.25%;
}
section .youtube iframe{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

#end_interview{
	width:655px;
	max-width:100%;
	margin:0 auto;
	padding:50px 20px 170px;
	overflow:hidden;
}
#end_interview p{
	display:inline-block;
	position:relative;
	margin:0 0 50px;
	font-weight:bold;
	font-size:2.0rem;
	text-align:center;
	color:#3B4182;
	line-height:1.35;
	}
	#end_interview p::before,
	#end_interview p::after{
		content:" ";
		position:absolute;
		bottom:30px;
		width:60px;
		height:2px;
		background:#3B4182;
		}
		#end_interview p::before{
			left:-60px;
			transform:rotate(45deg);
		}
		#end_interview p::after{
			right:-60px;
			transform:rotate(-45deg);
	}
	#end_interview figure{
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius:15px;
		overflow:hidden;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	section::before{
		display:none !important;
	}
	section .interviewee{
		position:relative;
		top:0px;
		right:0px;
		margin:0 auto 40px;
	}
	section .q_title .interviewer{
		top:calc(50% - 60px);
	}

	section .q_title{
		width:100%;
		margin:0 auto 40px;
		padding:0 10px 0 120px;
		background:#E2E2EC !important;
		}
		section .q_title h3{
			display:block;
			height:auto;
			padding:20px !important;
			font-size:1.2rem !important;
		}
		section .q_title h3 span{
			display:block !important;
			width:100%;
			position:relative;
			font-size:1.5rem !important;
			margin:0 0 10px !important;
	}

	section .a_box{
		padding:0 20px 50px;
	}
	section .answer{
		width:100%;
		padding:20px 20px 10px;
		}
		section .answer::before{
			content:" ";
			position:absolute;
			top:-35px;
			right:calc(50% - 12px);
			border:12px solid transparent;
			border-bottom:25px solid #FFF;
	}
	section .answer p{
		font-size:0.9rem;
		line-height:1.75;
	}


	#end_interview{
		margin:0 auto;
		padding:50px 20px 100px;
		overflow:hidden;
	}
	#end_interview p{
		margin:0 0 30px;
		font-size:1.2rem;
		}
		#end_interview p::before,
		#end_interview p::after{
			bottom:20px;
			width:40px;
			}
			#end_interview p::before{
				left:-40px;
			}
			#end_interview p::after{
				right:-40px;
	}
}

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

#interview_list{
	padding:0 0 70px !important;
	}
	#interview_list::before{
		display:none;
}
#interview_list .section_title{
	padding:0 20px;
}
#interview_list .section_title img{
	width:250px;
}

/* seiwano_hito_list */
#seiwano_hito_list{
	position:relative;
	margin:0 0 30px;
}
#seiwano_hito_list li{
	position:relative;
	top:0px;
	left:0;
	margin:0 20px 25px !important;
	background:none;
	transition-duration:0.5s;
	}
	#seiwano_hito_list li::before{
		content:" ";
		display:block;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:#F2F2F2;
		transition-duration:0.5s;
		}
		#seiwano_hito_list li:hover::before{
			background:#3C4183;
	}
	#seiwano_hito_list li a{
		display:block;
		position:relative;
		padding:20px;
		background:#FFF;
		border:20px solid #F2F2F2;
		transition-duration:0.5s;
		color:#000;
	}
	#seiwano_hito_list li a:hover{
		border:20px solid rgba(59,65,130,1);
	}
	#seiwano_hito_list li figure{
		position:relative;
		margin:0 auto 20px;
		width:100%;
	}
	#seiwano_hito_list li .hito_info{
		position:relative;
		text-align:left;
		width:calc(100% - 37%);
		min-height:180px;
	}
	#seiwano_hito_list li .hito_info .hito_name{
		margin:0 0 20px;
		font-size:2.5rem;
		line-height:1.3;
	}
	#seiwano_hito_list li .hito_info .hito_year{
		margin:0 0 20px;
		font-size:1.2rem;
		line-height:1.3;
	}

	#seiwano_hito_list li .tag{
		text-align:left;
	}
	#seiwano_hito_list li .tag p{
		display:inline-block;
		height:30px;
		margin:0 10px 0 0;
		padding:0 15px 0;
		font-size:0.95rem;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius:15px;
		background:#000;
		color:#FFF
	}

	#seiwano_hito_list li .interviewer{
		position:absolute;
		right:20px;
		bottom:20px;
		width:35%;
		max-width:145px;
		padding:10px;
		text-align:center;
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius:15px;
		background:#196C1A;
		}
		#seiwano_hito_list li .interviewer figure{
			position:relative;
			margin:0 auto 0px;
			width:100%;
		}
		#seiwano_hito_list li .interviewer p{
			display:inline-block;
			margin:0 0 0.10px !important;
			font-size:1.05rem;
			color:#FFF;
			border-bottom:1px solid #fFF;
			text-align:center;
			line-height:1;
		}
		#seiwano_hito_list li .interviewer p:last-child{
			display:block;
			margin:0 !important;
			font-size:1.9rem;
			border-bottom:none;
			line-height:1;
}
/* --- responsive --- */
@media only screen and (max-width:1400px){
	#seiwano_hito_list li a{
		padding:1vw;
	}
	#seiwano_hito_list li figure{
		margin:0 auto 1vw;
	}
	#seiwano_hito_list li .hito_info{
		min-height:12.5vw;
		width:calc(100% - 10vw);
	}
	#seiwano_hito_list li .hito_info .hito_name{
		margin:0 0 2vw;
		font-size:2.5vw;
	}
	#seiwano_hito_list li .hito_info .hito_year{
		margin:0 0 2vw;
		font-size:1.2vw;
	}
	#seiwano_hito_list li .tag p{
		height:2vw;
		margin:0 1vw 0 0;
		padding:0 1vw 0;
		font-size:1.0vw;
	}
	#seiwano_hito_list li .interviewer{
		right:1vw;
		bottom:1vw;
		width:9.5vw;
		padding:1vw;
		}
		#seiwano_hito_list li .interviewer p{
			margin:0 0 0.5vw !important;
			font-size:1.05vw;
		}
		#seiwano_hito_list li .interviewer p:last-child{
			font-size:1.9vw;
	}
}
@media only screen and (max-width:1100px){
	#seiwano_hito_list li a{
		border:10px solid #F2F2F2;
	}
	#seiwano_hito_list li a:hover{
		border:10px solid rgba(59,65,130,1);
	}

}
@media only screen and (max-width:767px){
	#seiwano_hito_list li{
		width:48%;
	}
	#seiwano_hito_list li .hito_info{
		min-height:20.0vw;
	}
	#seiwano_hito_list li .hito_info .hito_name{
		margin:0 0 2vw;
		font-size:5vw;
	}
	#seiwano_hito_list li .hito_info .hito_year{
		margin:0 0 2vw;
		font-size:2.4vw;
	}
	#seiwano_hito_list li .tag p{
		height:4vw;
		margin:0 1vw 0 0;
		padding:0 2vw 0;
		font-size:2.0vw;
	}

	#seiwano_hito_list li .interviewer{
		width:15.5vw;
		}
		#seiwano_hito_list li .interviewer p{
			margin:0 0 1vw !important;
			font-size:1.8vw;
		}
		#seiwano_hito_list li .interviewer p:last-child{
			font-size:3.0vw;
	}
}
@media only screen and (max-width:500px){
	#seiwano_hito_list li{
		width:300px;
	}
	#seiwano_hito_list li a{
		padding:15px;
	}
	#seiwano_hito_list li .hito_info{
		width:calc(100% - 120px);
		min-height:calc(160px - 1.5rem);
	}
	#seiwano_hito_list li .hito_info .hito_name{
		margin:0 0 10px;
		font-size:2.0rem;
	}
	#seiwano_hito_list li .hito_info .hito_year{
		margin:0 0 10px;
		font-size:1.0rem;
	}
	#seiwano_hito_list li .tag p{
		height:auto;
		margin:0 4px 0 0;
		padding:0 10px 0;
		font-size:0.8rem;
	}
	#seiwano_hito_list li .interviewer{
		right:15px;
		bottom:15px;
		width:115px;
		height:160px;
		padding:10px;
		}
		#seiwano_hito_list li .interviewer p{
			margin:0 0 0.10px !important;
			font-size:0.8rem;
		}
		#seiwano_hito_list li .interviewer p:last-child{
			font-size:1.3rem;
	}
}