@charset "UTF-8";
/* CSS Document */
/*
	heading
-----------------------------------------------------------------------------------------------*/
.b-heading{
	background: url("../images/talk_heading_img01.png") no-repeat top center/ cover;
}
.txt__sp{
	display: none;
}
/*
	talk-wrapper
-----------------------------------------------------------------------------------------------*/
.bg__brown{
	background: rgba(103, 52, 0, .15);
	margin-top: -55px;
}
#talk-wrapper .ctsArea{
	padding-top: 140px;
}
.people__listbox{
	display: flex;
	flex-wrap: wrap;
	gap: 0 60px;
	justify-content: center;
}
.people__box{
	display: block;
}
.type__border{
	position: relative;
}
.type__border::after{
	border: 1px solid #fff;
	border-radius: var(--bdrs);
	content: '';
	height: 210px;
	left: 12px;
	position: absolute;
	top: 12px;
	width: 210px;
	z-index: -1;
}
.people__orange .type__border::after{
	border-color: var(--talk-o);
}
.people__purple .type__border::after{
	border-color: var(--talk-p);
}
.people__green .type__border::after{
	border-color: var(--talk-g);
}
.people__img{
    border-radius: var(--bdrs);
	height: auto;
	margin-bottom: 28px;
	width: 210px;
	z-index: 99;
}
.people__txt{
	margin-bottom: 10px;
}
.people__orange .people__name,
.people__orange .name-en{
	color: var(--talk-o);
}
.people__purple .people__name,
.people__purple .name-en{
	color: var(--talk-p);
}
.people__green .people__name,
.people__green .name-en{
	color: var(--talk-g);
}
/*
	nav__wrapper
-----------------------------------------------------------------------------------------------*/
#nav__wrapper{
	bottom: 0;
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 100;
	overflow-x: scroll;
}
.talk-nav__list{
	display: flex;
}
.talk-nav__item{
	background: #fff;
	border-top: 1px solid var(--red);
	cursor: pointer;
	display: inline-block;
	min-width: 225px;
	transition: .3s;
	position: relative;
	width:100%;
}
.talk-nav__item:hover{
	background: var(--red);
}
.talk-nav__item::after{
	background: rgba(10, 78, 119, .1);
	content: '';
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}
.talk-nav__item:last-child::after{
	display: none;
}
.question__name{
	align-items: center;
	background: var(--red);
	color: #fff;
	display: inline-flex;
	font-size: 1.2rem;
	height: 22px;
	justify-content: center;
	left: 25px;
	padding: 5px 0 9px 0;
	position: absolute;
	text-align: center;
	top: 0;
	transition: .3s;
	width: 94px;
}
.talk-nav__link{
	align-items: center;
	display: flex;
	font-size: 1.4rem;
	padding: 33px 15px 18px 25px;
}
.talk-nav__item:hover .question__name{
	background: #fff;
	color: var(--red);
}
.talk-nav__item:hover .talk-nav__letter{
	color: #fff;
}
.talk-nav__letter{
	padding-right: 12%;
	position: relative;
	white-space: nowrap;
	width: 100%;
}
.talk-nav__letter::before,
.talk-nav__letter::after{
	border-right: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	bottom: 26px;
	content: '';
	height: 8px;
	position: absolute;
	right: 0;
	transform: rotate(45deg) translateX(0);
	transition: .3s;
	width: 8px;
}
.talk-nav__letter::after{
	bottom: 20px;
}
.talk-nav__item:hover .talk-nav__letter::before,
.talk-nav__item:hover .talk-nav__letter::after{
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.talk-nav__item:hover .talk-nav__letter::before{
	bottom: 22px;
}
.talk-nav__item:hover .talk-nav__letter::after{
	bottom: 16px;
}
/*
	question-wrapper
-----------------------------------------------------------------------------------------------*/
#question-wrapper .ctsArea{
	padding-bottom: 0;
	padding-top: 140px;
	z-index: 99;
}
.ctsArea__white{
	position: relative;
}
.ctsArea__white::before{
	align-items: center;
	background: var(--red);
	content: '';
	color: #fff;
	display: inline-flex;
	font-size: 1.6rem;
	font-weight: var(--medium);
	height: 25px;
	justify-content: center;
	left: 50%;
	padding-bottom: 3px;
	position: absolute;
	text-align: center;
	top: 0;
	transform: translateX(-50%);
	width: 130px;
}
#question01 .ctsArea__white::before{
	content: 'Question.1';
}
#question02 .ctsArea__white::before{
	content: 'Question.2';
}
#question03 .ctsArea__white::before{
	content: 'Question.3';
}
#question04 .ctsArea__white::before{
	content: 'Question.4';
}
#question05 .ctsArea__white::before{
	content: 'Question.5';
}
#question06 .ctsArea__white::before{
	content: 'Question.6';
}
.under__yellow{
	border-bottom: 1px solid rgba(236, 190, 51, 1);
	padding-bottom: 35px;
}
.talk__box{
	padding: 80px 80px 0 105px;
}
.talk__item{
	display: flex;
	gap: 0 30px;
	padding-bottom: 40px;
}
.talk__item:last-child{
	padding: 0;
}
.people__double .purple{
	color: var(--talk-p);
}
.people__double .green{
	color: var(--talk-g);
}
.talk__item .people__name{
	font-size: 1.6rem;
	font-weight: var(--bold);
	line-height: 1.8;
	white-space: nowrap;
}
.talk__txt{
	font-feature-settings: "palt";
	font-weight: var(--medium);
	text-align: justify;
	line-height: 1.8;
}
.question__img{
	line-height: 1;
	margin-top: -70px;
}
/*
	page-top
-----------------------------------------------------------------------------------------------*/
#page-top{
	bottom: 130px;
}
@media screen and (max-width:812px){
	/*
		heading
	-----------------------------------------------------------------------------------------------*/
	.txt__pc{
		display: none;
	}
	.txt__sp{
		display: block;
		font-size: 1.5rem;
		margin-bottom: 45px;
	}
	/*
		talk__wrapper
	-----------------------------------------------------------------------------------------------*/
	#talk-wrapper .ctsArea{
		padding-top: 75px;
	}
	.people__list{
		margin-bottom: 35px;
	}
	.people__list:last-child{
		margin-bottom: 0;
	}
	.people__box{
		display: flex;
		gap: 0 26px;
	}
	.type__border{
		height: 140px;
		width: 140px;
	}
	.type__border::after{
		height: 140px;
		left: 9px;
		top: 9px;
		width: 140px;
	}
	.people__img{
		margin-bottom: 0;
	}
	.people__intro{
		width: 130px;
	}
	.txt__prof-small{
		margin-bottom: 14px;
	}
	.people__name{
		font-size: 2.3rem;
	}
	.name-en{
		letter-spacing: 0.3rem;
		padding-top: 8px;
	}
	/*
		nav__wrapper
	-----------------------------------------------------------------------------------------------*/
	#nav__wrapper{
		overflow-x: hidden;
		position: relative;
	}
	.talk-nav{
		padding-top: 60px;
	}
	.talk-nav__wrapper{
		border-bottom: 1px solid var(--red);
	}
	.talk-nav__list {
		flex-wrap: wrap;
	}
	.talk-nav__item{
		overflow-x: scroll;
		min-width: 50%;
		width: 50%;
	}
	.talk-nav__link{
		font-size: 1.3rem;
		padding: 30px 15px 18px 15px;
	}
	.question__name{
		font-size: 1.1rem;
		height: 16px;
		left: 15px;
		width: 85px;
	}
	/*
		question__wrapper
	-----------------------------------------------------------------------------------------------*/
	.ctsArea__white::before{
		font-size: 1.1rem;
		height: 18px;
		width: 88px;
		}
	.under__yellow{
		padding-bottom: 20px;
	}
	.talk__box{
		padding: 40px 30px 0 30px;
	}
	.talk__item{
		gap: 0 18px;
		padding-bottom: 22px;
	}
	.talk__item .people__name,
	.talk__txt{
		font-size: 1.4rem;
		line-height: 1.7;
	}
	.talk__txt{
		line-height: 1.7;
	}
	.question__img {
			margin-top: -25px;
		}
	/*
		page-top
	-----------------------------------------------------------------------------------------------*/
	#page-top{
		bottom: 13px;
	}
}
/*iPad時の記述*/
@media screen and (min-width:685px) and (max-width:812px){
	.txt__sp{
		display: inline-block;
		margin-bottom: 35px;
	}
	.people__box{
		display: inline-block;
	}
	.type__border{
		margin-bottom: 30px;
	}
}
@media screen and (min-width:682px) and (max-width:767px){
	.people__list{
		margin-bottom: 0;
	}
}
/*デバイスが横向きの時の記述*/
@media (orientation: landscape) and (max-width:812px){
	.txt__sp{
		margin-bottom: 50px;
	}
	.people__list{
		margin-bottom: 0;
	}
}
@media (orientation: landscape) and (max-width:667px){
	.people__list{
		margin-bottom: 30px;
	}
}