@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

#topicPathArea {
	padding: 20px 0 20px;
}
.sp-block,
.spS-block {
	display: none;
}
/*=============================================================
 mvArea
=============================================================*/
#mvArea {
	position: relative;
	margin-bottom: 130px;
}
#mvArea .mv {
	width: 84%;
	max-width: 1450px;
	margin: 0 0 0 auto;
	position: relative;
}
#mvArea .mv .mv__img {
	overflow: hidden;
	position: relative;
}
#mvArea .mv .mv__img img {
	position: relative;
	display: block;
	opacity: 0;
	width: 100%;
	transition: all 0.5s 0.3s ease;
	z-index: 0;
}
#mvArea .mv .mv__img .mask.active img {
	opacity: 1;
}
#mvArea .mv .mask {
	overflow: hidden;
	position: relative;
	display: block;
}
#mvArea .mv .mask::before {
	content: "";
	background: #19C1F6;
	display: block;
	height: 100%;
	position: absolute;
	transform: translateX(-100%);
	transition: all 1.2s 0s ease;
	width: 100%;
	z-index: 1;
}
#mvArea .mv .mask.active::before {
	transform: translateX(101%);
}
#mvArea .mv__ttl {
	position: absolute;
	top: 6vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: -60px;
	margin-bottom: 0;
	z-index: 2;
}
#mvArea .mv__ttl div {
	overflow: hidden;
	margin-bottom: 3%;
}
#mvArea .mv__ttl div:first-of-type {
	margin-bottom: 5%;
}
#mvArea .mv__ttl span {
	display: inline-block;
	background: #fff;
	font-size: clamp(35px, 4vw, 48px);
	font-weight: 600;
	padding: 0px 5px;
	transition: all 0.5s 0.3s ease;
	transform: translateY(100%);
	opacity: 0;
}
#mvArea .mv__ttl div:nth-of-type(3) span {
	font-size: clamp(47px, 5vw, 66px);
}
#mvArea .mv__ttl span.sub-ttl {
	background: linear-gradient(0deg, #19C1F6, #19C1F6), linear-gradient(90deg, rgba(41, 112, 224, 0.2) 0%, rgba(25, 193, 246, 0.2) 100%);
	color: #fff;
	font-size: clamp(14px, 1.6vw, 20px);
	font-weight: 500;
	font-family: "Inter", sans-serif;
	padding: 6px 15px;
}
#mvArea .mv__lead {
	color: #2970E0;
	line-height: 1.8;
	width: 72%;
	max-width: 870px;
	margin-top: 35px;
	opacity: 0;
}
#mvArea .mv__bg {
	width: 84%;
	max-width: 1450px;
	height: 100%;
	background: rgba(25, 193, 246, 0.1);
	border-radius: 0 80px 80px 0;
	position: absolute;
	top: 70px;
	left: 0;
	z-index: -1;
	opacity: 0;
}
/*=============================================================
 ttl
=============================================================*/
.ttl-h2 {
	font-size: 36px;
	color: #082E3A;
	position: relative;
	font-family: 'Noto Sans JP';
	display: inline-block;
	border-bottom: none;
	background: #fff;
	padding-right: 20px;
}
.ttl-h2::before {
	content: "";
	width: 100vw;
	height: 1px;
	background: #000;
	position: absolute;
	top: 58%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}
.ttl-h2 span {
	font-size: 16px;
	color: #2970E0;
	display: block;
}
/*=============================================================
 member
=============================================================*/
.member .member__list {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-auto-flow: column;
	gap: 30px 6%;
	margin-top: -25px;
}
.member .member__img {
	width: 196px;
	object-fit: cover;
	object-position: bottom;
}
.member .member__name {
	font-size: 21px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 10px 0;
	line-height: 1.5;
}
.member .member__name span {
	display: inline-block;
	font-size: 14px;
	color: #fff;
	padding: 6px 10px;
	line-height: 1;
}
.member .member__name.member__name--color01 {
	color: #32CFF9;
}
.member .member__name.member__name--color01 span {
	background: #32CFF9;
}
.member .member__name.member__name--color02 {
	color: #B992F4;
}
.member .member__name.member__name--color02 span {
	background: #B992F4;
}
.member .member__name.member__name--color03 {
	color: #28DD65;
}
.member .member__name.member__name--color03 span {
	background: #28DD65;
}
/*=============================================================
 talk__list
=============================================================*/
.talk__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 5%;
}
.talk__list li {
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(30px);
	background: linear-gradient(0deg, #19C1F6, #19C1F6), linear-gradient(90deg, rgba(41, 112, 224, 0.2) 0%, rgba(25, 193, 246, 0.2) 100%);
	border-radius: 50px;
	box-shadow: 4px 4px 10px 0px #00000033;
	transition: box-shadow .5s ease;
}
.talk__list li:hover {
	box-shadow: none;
}
.talk__list li::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	transition: opacity .5s ease;
	border-radius: 50px;
	z-index: 0;
}
.talk__list a {
	display: block;
	box-shadow: 4px 4px 10px 0px #00000033;
	color: #fff;
	text-decoration: none;
	padding: 0 80px;
	font-size: 18px;
	line-height: 1.4;
	position: relative;
	padding-left: 70px;
	height: 70px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 2px solid transparent;
	transition: color 0.5s ease, border-color 0.5s ease;
	border-radius: 50px;
}
.talk__list a span {
	margin-right: 20px;
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
}
.talk__list a::before,
.talk__list a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 42px;
	transform: translateY(-50%);
	transition: background 0.5s ease, border-color 0.5s ease;
}
.talk__list a::before {
	width: 30px;
	height: 2px;
	background: #fff;
}
.talk__list a::after {
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}
.talk__list a:hover {
	color: #19C1F6;
	border-color: #19C1F6;
}
.talk__list li:hover::before {
	opacity: 1;
}
.talk__list a:hover::before {
	background: #19C1F6;
}
.talk__list a:hover::after {
	border-top: 2px solid #19C1F6;
	border-right: 2px solid #19C1F6;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablet
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (max-width: 1023px) {
	/*=============================================================
	member
	=============================================================*/
	.member .member__list {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}
	/*=============================================================
	talk__list
	=============================================================*/
	.talk__list a {
		font-size: 17px;
	}
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (max-width: 767px) {
	#topicPathArea {
		padding: 14px 0 10px;
	}
	section+section {
		margin-top: 70px;
	}
	.sp-block {
		display: block;
	}
	/*=============================================================
	mvArea
	=============================================================*/
	#mvArea {
		margin-bottom: 100px;
	}
	#mvArea .mv {
		width: 100%;
		padding: 0 15px;
	}
	#mvArea .mv .mv__img {
		width: 88%;
		margin: 0 0 0 auto;
	}
	#mvArea .mv .mv__img img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		max-height: 300px;
		object-position: 50% 20%;
		border-radius: 0 0 0 80px;
	}
	#mvArea .mv__ttl {
		position: relative;
		top: 0;
		margin: -80px 0 0;
	}
	#mvArea .mv__ttl div {
		margin-bottom: 7px;
	}
	#mvArea .mv__ttl div:first-of-type {
		margin-bottom: 15px;
	}
	#mvArea .mv__ttl span.sub-ttl {
		font-size: 16px;
		padding: 3px 15px;
	}
	#mvArea .mv__ttl span {
		font-size: 43px;
	}
	#mvArea .mv__ttl div:nth-of-type(3) span {
		font-size: 59px;
	}
	#mvArea .mv__lead {
		width: 85%;
		margin-top: 15px;
	}
	#mvArea .mv__bg {
		width: 93%;
	}
	/*=============================================================
	ttl
	=============================================================*/
	.ttl-h2 {
		font-size: 26px;
		margin-bottom: 0;
	}
	.ttl-h2 span {
		font-size: 14px;
	}
	/*=============================================================
	member
	=============================================================*/
	.member .member__list {
		grid-template-columns: 1fr;
		gap: 20px 0;
		margin-top: -10px;
	}
	.member .member__profile {
		display: flex;
		gap: 0;
		flex-wrap: wrap;
		align-items: flex-end;
		margin-bottom: 10px;
	}
	.member .member__img {
		width: 125px;
	}
	.member .host .member__profile {
		gap: 45px;
	}
	.member .host .member__img_host {
		left: 90px;
		bottom: -2px;
		width: 46px;
	}
	.member .host .member__name {
		width: calc(100% - 150px);
	}
	.member .member__name {
		font-size: 18px;
		width: calc(100% - 130px);
		display: block;
	}
	.member .member__name span {
		margin-top: 6px;
	}
	.member .member__desc {
		font-size: 14px;
	}
	/*=============================================================
	talk__list
	=============================================================*/
	.talk__list {
		grid-template-columns: 1fr;
		margin-top: 15px;
	}
	.talk__list a {
		font-size: 16px;
		padding: 0 70px;
	}
	.talk__list a span {
		font-size: 20px;
		margin-right: 20px;
	}
	.talk__list a::before,
	.talk__list a::after {
		right: 27px;
	}
	.talk__list a::before {
		width: 20px;
	}
	.talk__list a::after {
		width: 8px;
		height: 8px;
	}
}
@media (max-width: 400px) {
	.spS-block {
		display: block;
	}
}