/****************pc*****************/

/* common setting */
img{
	max-width: 100%;
}

.underline{
	text-decoration: underline;
}

/* top table */
.table-area{
	background-color:#f1f1f1;
	padding:50px 0 35px 0
}

.top-table th{
	width:10%;
	padding:20px 10px 20px 40px;
	vertical-align: middle;
}
.top-table .top-table-title{
	display: inline-block;
	width: 8em;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 3px;
	background: #f1f1f1;
	color: #29aae1;
	font-weight: 500;
}
.top-table td{
	vertical-align: middle;
	padding:20px 0 20px 30px!important
}

/* heading */
.font-first{
	line-height:1.5em;
	background: linear-gradient(transparent 65%,#ffff00 0%);
	font-size: 2.4rem;
	font-weight: bold;
	color: #29aae1;
}

/* catch copy */
.catch{
	color: #4d4d4d;
	font-weight: bold;
	font-size: 2rem;
	border: 4px solid #29aae1;
	padding: 1rem 0;
	line-height: 1.6;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.catch > div{
	max-width: 29em;
	margin: 0 auto;
}

.intro-title{
	font-weight: bold;
	font-size: 1.1rem;
	border: 1px solid #000;
	border-radius: 6px;
	display: inline-block;
	padding: 0.8rem 1rem 0.6rem;
}

/* interview */
.interview-title{
	line-height:1.5em;
	font-size: 2.3rem;
	font-weight: bold;
	color: #29aae1;
	max-width: 33em;
	margin: 0 auto 3rem;
}

.question_image, .answer_image{
	text-align: center;
}

.arrow_questionname, .arrow_answername{
	padding-top: 2px;
	font-size: 1rem;
}

.arrow_question{
	color: #29aae1;
	border-color: #29aae1;
}

.arrow_question:before{
	border-right-color: #29aae1;
}

.arrow_answer{
	color: #333;
	border-color: #333;
}

.arrow_answer:before{
	border-left-color: #333;
}

/****************tablet*****************/

@media screen and (max-width:1199px){
	/* top table */
	.top-table th{
		padding:20px;
	}
	.top-table td{
		padding:20px 20px 20px 0!important;
	}

	/* catch copy */
	.catch{
		padding: 1.5rem;
	}

	/* interview */
	.answer_image{
		margin-right: 0;
	}
	
	.arrow_question{
		left: 20px;
	}

	.arrow_answer{
		left: 0;
	}
}

/****************mobile*****************/

@media screen and (max-width: 767px) {
	/* top table */
	.table-area {
		background-color: #fff;
		padding-right: 15px;
		padding-left: 15px;
	}
	.table-area .table-responsive{
		border:solid 1px #D3D3D3;
		border-radius: 2px;
		font-size:14px;
	}
	.top-table .top-table-title{
		height: 35px;
		line-height: 35px;
	}
	.top-table th {
		padding: 15px;
	}
	.top-table td{
		padding:15px 5px 15px 0!important;
	}
	
	/* heading */
	.font-first{
		line-height:1.3em;
		font-size: 1.4rem;
	}
	
	/* catch copy */
	.catch{
		font-size: 1.25rem;
		padding: 1.5rem 1rem;
	}
	
	/* interview */
	.interview-title{
		font-size: 1.4rem;
	}
	
	.question_Box.d-flex{
		flex-direction: column;
		align-items: flex-start!important;
	}
	
	.question_Box.d-flex.answer-right-flex{
		align-items: flex-end!important;
	}
	
	.question_image{
		text-align: left;
		margin-bottom: 0.5rem;
	}
	
	.answer_image{
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		margin-bottom: 0.5rem;
	}
	
	.question_image img, .answer_image img{
		width: 70px;
	}
	
	.arrow_questionname, .arrow_answername{
		display: inline-block;
		padding: 0.5rem;
	}
	
	.arrow_question, .arrow_answer{
		font-size: 1rem;
		margin: 0;
		left: 0;
		width: 100%;
	}
	
	.arrow_question:before{
		top: -16px;
		right: auto;
		left: 86px;
		border-right-color: transparent;
		border-bottom-color: #29aae1;
	}

	.arrow_question:after{
		top: -15px;
		left: 87px;
		border-right-color: transparent;
		border-bottom-color: #fff;
	}
	
	.arrow_answer:before{
		top: -16px;
		left: auto;
		right: 86px;
		border-left-color: transparent;
		border-bottom-color: #333;
	}

	.arrow_answer:after{
		top: -15px;
		left: auto;
		right: 87px;
		border-left-color: transparent;
		border-bottom-color: #fff;
	}
	
}

/*end*/