/* ******************************************************************
 *	File name		: interview_ver1.1.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_box{
	overflow:hidden;
}
#seiwano_hito_lists{
	position:relative;
	width:1816px;
	margin-bottom:30px;
	text-align:left;
}
#seiwano_hito_lists li{
	position:relative;
	width:414px;
	height:630px;
	top:0px;
	left:0;
	margin:0 40px 0 0 !important;
	padding:0px;
	background:none;
	transition-duration:0.5s;
	}
	#seiwano_hito_lists li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding:20px;
		background:#FFF;
		border:20px solid #F2F2F2;
		text-decoration:none;
		transition-duration:0.5s;
		color:#000;
	}
	#seiwano_hito_lists li a:hover{
		text-decoration:none;
		border:20px solid rgba(59,65,130,1);
	}
	#seiwano_hito_lists li figure{
		position:relative;
		margin:0 auto 20px;
		width:100%;
		}
		#seiwano_hito_lists li figure p{
			position:absolute;
			top:17px;
			left:10px;
			padding:0px;
			font-weight:bold;
			font-size:3.5rem;
			color:#FFF;
			line-height:1;
			text-shadow:rgba(0,0,0,0.7) 0px 0px 3px;
			transform:scale(0.85,1);
			letter-spacing:2px;
			z-index:50;
			}
			#seiwano_hito_lists li figure p::before{
				content:"No.";
				display:block;
				font-size:1.1rem;
			}
			#seiwano_hito_lists li figure p::after{
				content:" ";
				display:block;
				position:absolute;
				bottom:0px;
				left:0px;
				width:100%;
				height:3px;
				background:#FFF;
				-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
				-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
				box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}
	#seiwano_hito_lists li .hito_info{
		position:relative;
		text-align:left;
		min-height:167px;
	}
	#seiwano_hito_lists li .hito_info .hito_name{
		margin:0 0 20px;
		font-size:2.5rem;
		line-height:1.3;
	}
	#seiwano_hito_lists li .hito_info .hito_year{
		margin:0 0 20px;
		font-size:1.2rem;
		line-height:1.3;
	}

	#seiwano_hito_lists li .tag{
		position:absolute;
		bottom:20px;
		left:15px;
		text-align:left;
	}
	#seiwano_hito_lists 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;
		text-decoration:none;
		color:#FFF
	}

	#seiwano_hito_lists 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_lists li .interviewer figure{
			position:relative;
			margin:0 auto 0px;
			width:100%;
			border:5px solid #FFF;
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border-radius:50%;
			overflow:hidden;
		}
		#seiwano_hito_lists 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_lists 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:767px){
	#seiwano_hito_lists{
		position:relative;
		width:414px;
		text-align:left;
	}
	#seiwano_hito_lists li{
		position:relative;
		left:-10px;
		margin:-50px 0 !important;
		transform:scale(0.8,0.8);
	}
}