@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@600&display=swap");
.p-visual {
	position: relative;
	width: 100%;
	height: 100vh;
}
.p-visual__grid {
	display: flex;
}
@media (max-width: 767px) {
	.p-visual__grid {
		display: block;
	}
}
.p-visual__item {
	width: 50%;
	height: 100vh;
}
@media (max-width: 767px) {
	.p-visual__item {
		width: 100%;
		height: 50vh;
	}
}
.p-visual__item::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(34, 34, 34, 0.3);
}
.p-visual__item-1 {
	background: url(../img/visual-1.jpg) center center no-repeat;
	background-size: cover;
}
.p-visual__item-2 {
	background: url(../img/visual-2.jpg) center center no-repeat;
	background-size: cover;
}
.p-visual__title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 3.2rem;
	text-align: center;
	line-height: 2.1875em;
	letter-spacing: 0.05em;
}
.p-visual__title span {
	display: block;
	text-wrap: nowrap;
}
@media (max-width: 767px) {
	.p-visual__title span {
		text-align: center;
	}
}
.p-visual__title span .char {
	display: inline-block;
	min-width: 0.25em;
	opacity: 0;
	animation-play-state: paused;
}
.p-visual__title.is-active .char {
	animation:
		translateY 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both,
		fadeIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
	animation-play-state: running;
	opacity: 1;
}
@media (max-width: 767px) {
	.p-visual__title {
		writing-mode: initial;
		font-size: 2.3rem;
	}
}

@keyframes translateX {
	0% {
		transform: translateX(25%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes translateY {
	0% {
		transform: translateY(55%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*
INTRO
*/
.p-intro {
	position: relative;
	margin-top: -1px;
}
@media (max-width: 767px) {
	.p-intro {
		padding-bottom: 50px;
	}
}
.p-intro__grid {
	display: flex;
	align-items: center;
}
@media (max-width: 767px) {
	.p-intro__grid {
		display: block;
	}
}
.p-intro__content {
	width: 50%;
	box-sizing: border-box;
	padding-right: 50px;
}
@media (max-width: 767px) {
	.p-intro__content {
		width: 100%;
		padding: 0 0 25px;
	}
}
.p-intro__title {
	font-weight: 500;
	font-size: 3.2rem;
	font-size: clamp(2.4rem, 2.5vw, 3.2rem);
	line-height: 1.5625em;
	color: #192981;
	margin-bottom: 1em;
}
.p-intro__text {
	font-size: 1.6rem;
	line-height: 2.5em;
}

/*
SV
*/
.p-sv {
	position: relative;
	padding-bottom: 100px;
}
@media (max-width: 767px) {
	.p-sv {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
.p-sv__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 90px 0;
}
@media (max-width: 767px) {
	.p-sv__header {
		display: block;
		padding: 0;
	}
}
.p-sv__title {
	font-weight: bold;
	color: #192981;
	font-size: 3.2rem;
	font-size: clamp(2.2rem, 2.5vw, 3.2rem);
	line-height: 1.5625em;
	margin: 0;
	position: relative;
}
@media (max-width: 767px) {
	.p-sv__title {
		margin-bottom: 20px;
	}
}
.p-sv__title::after {
	content: "ABOUT ";
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	position: absolute;
	left: -250px;
	top: 200px;
	font-size: 12rem;
	color: #fff;
}
@media (max-width: 767px) {
	.p-sv__title::after {
		left: auto;
		right: 0;
		top: -15px;
		font-size: 6rem;
	}
}
.p-sv__grid {
	display: flex;
}
@media (max-width: 767px) {
	.p-sv__grid {
		display: block;
	}
}
.p-sv__pics {
	width: 50%;
	position: relative;
}
@media (max-width: 767px) {
	.p-sv__pics {
		width: 80%;
		margin: 0 auto;
	}
}
.p-sv__pics img {
	border-radius: 100%;
	opacity: 0;
	position: absolute;
	right: 20px;
	top: 0;
	width: 100%;
	width: calc(100% + 50px);
	max-width: calc(100% + 50px);
	transition: 0.3s ease;
}
.p-sv__pics img.is-active {
	opacity: 1;
}
@media (max-width: 767px) {
	.p-sv__pics img {
		width: 100%;
		max-width: 100%;
		position: relative;
		right: 0;
		display: none;
	}
}
@media (max-width: 767px) {
	.p-sv__pics img:nth-child(1) {
		display: block;
	}
}
.p-sv__links {
	width: 50%;
}
@media (max-width: 767px) {
	.p-sv__links {
		width: 100%;
	}
}
.p-sv__item {
	position: relative;
	margin: 0;
	border-bottom: 1px solid #ededed;
	padding-bottom: 40px;
	opacity: 1;
	transform: translateY(40px);
}
.p-sv__item a {
	display: block;
	text-decoration: none;
}
.p-sv__item.is-active,
.p-sv__item:hover {
	opacity: 1;
}
@media (max-width: 767px) {
	.p-sv__item {
		padding-bottom: 20px;
		opacity: 1;
	}
}
.p-sv__num {
	color: white;
	font-weight: bold;
	font-size: 7rem;
	margin-top: 0;
	margin-bottom: -35px;
	display: block;
	position: relative;
	line-height: 1;
}
@media (max-width: 767px) {
	.p-sv__num {
		font-size: 5rem;
		margin-bottom: -15px;
		margin-top: 20px;
	}
}
.p-sv__lead {
	font-weight: 500;
	font-size: 2.6rem;
	line-height: 1.5384615385em;
	margin-bottom: 1em;
	color: #192981;
	display: block;
	position: relative;
}
@media (max-width: 767px) {
	.p-sv__lead {
		font-size: 2rem;
	}
}
.p-sv__note {
	font-size: 1.6rem;
	line-height: 1.875em;
	margin-bottom: 0;
}

/*
CASE
*/
.p-case {
	position: relative;
	padding-top: 90px;
}
@media (max-width: 767px) {
	.p-case {
		padding: 50px 0;
	}
}
.p-case__grid {
	display: flex;
	gap: 50px;
}
@media (max-width: 767px) {
	.p-case__grid {
		display: block;
	}
}
.p-case__header {
	position: relative;
	flex: 0 0 300px;
	z-index: 3;
}
.p-case__header .c-btn {
	position: absolute;
	left: 0;
	bottom: 0;
}
.p-case__title {
	font-weight: 500;
	font-size: 3.2rem;
	font-size: clamp(2.2rem, 2.5vw, 3.2rem);
	color: #192981;
	margin-bottom: 2em;
	position: relative;
	z-index: 3;
}
@media (max-width: 767px) {
	.p-case__title {
		margin-bottom: 1em;
	}
}
.p-case__title::after {
	content: "COLUMN";
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	position: absolute;
	left: -50px;
	top: -136px;
	font-size: 12rem;
	color: #fff;
	width: 1200px;
	display: block;
}
@media (max-width: 767px) {
	.p-case__title::after {
		font-size: 6rem;
		left: -10px;
		top: -70px;
	}
}
.p-case__text {
	font-size: 1.6rem;
	line-height: 1.875em;
}
.p-case__gall {
	position: relative;
}
.p-case__swiper {
	position: relative;
	padding-bottom: 30px;
	max-width: 1000px;
}
.p-case .swiper-pagination {
	top: auto !important;
	bottom: 0 !important;
	background: #fff;
}
.p-case .swiper-pagination-progressbar-fill {
	background: #192981;
}
@media (max-width: 767px) {
	.p-case .c-btn {
		z-index: 3;
		margin-top: 30px;
	}
}

/*
SUP
*/
.p-sup {
	position: relative;
	padding-top: 160px;
	padding-bottom: 100px;
}
@media (max-width: 767px) {
	.p-sup {
		padding: 5px 0 50px;
	}
}
.p-sup::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: url(../img/sup-bg.png) left bottom no-repeat;
	background-size: cover;
	height: 1964px;
}
.p-sup__title {
	font-weight: 500;
	font-size: 3.2rem;
	font-size: clamp(2.4rem, 2.5vw, 3.2rem);
	color: #192981;
	margin-bottom: 2em;
	text-align: center;
}
@media (max-width: 767px) {
	.p-sup__title {
		margin-bottom: 1em;
	}
}
.p-sup__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 50px 26px;
	margin-top: 85px;
	margin-bottom: 60px;
}
@media (max-width: 767px) {
	.p-sup__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 26px 13px;
		margin-top: 0;
	}
}
.p-sup__item {
	text-align: center;
}
.p-sup__item img {
	transition: 0.3s ease;
}
.p-sup__item a:hover img {
	opacity: 0.7;
}
.p-sup__name {
	display: block;
	margin-top: 10px;
	text-align: center;
}
.p-sup .c-btn {
	margin-top: 50px;
}

/*
QNA
*/
.p-qna {
	position: relative;
	padding-top: 150px;
	padding-bottom: 100px;
}
@media (max-width: 767px) {
	.p-qna {
		padding: 50px 0;
	}
}
.p-qna__title {
	font-weight: 500;
	font-size: 3.2rem;
	font-size: clamp(2.4rem, 2.5vw, 3.2rem);
	line-height: 1.5625em;
	color: #192981;
	margin-top: 0;
	margin-bottom: 1em;
	text-align: center;
}
@media (max-width: 767px) {
	.p-qna__title {
		margin-top: 30px;
	}
}
.p-qna__title::before {
	content: "FAQ";
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	text-align: center;
	display: block;
	font-size: 12rem;
	color: #f8f9fb;
	margin-bottom: -50px;
}
.p-qna .c-btn {
	margin-top: 50px;
}
/*
INFO
*/
.p-info {
	position: relative;
	background: #f4f5f9;
	padding-top: 80px;
	padding-bottom: 100px;
}
.p-info__title {
	text-align: center;
	font-size: 2.8rem;
	font-weight: 500;
	color: #192981;
	margin-bottom: 50px;
}
.p-info__grid {
	display: flex;
	gap: 45px;
}
@media (max-width: 767px) {
	.p-info__grid {
		display: block;
	}
	.p-info__news {
		margin-bottom: 50px;
	}
}
.p-info__news {
	flex: 0 0 51%;
}
.p-info__seminar {
	flex: 0 0 43%;
}
.p-info__table {
	width: 100%;
	border-spacing: 0px 10px;
}
.p-info__table tr {
	background: #fff;
}
.p-info__table th {
	font-size: 1.6rem;
	color: #192981;
	font-weight: 500;
	padding: 15px;
}
.p-info__table td {
	font-size: 1.6rem;
	color: #222;
	border-left: 1px solid #edeef1;
	padding: 15px;
}
.p-info__table td p {
	margin-bottom: 20px;
}
.p-info__table td p:last-child {
	margin-bottom: 0;
}
.p-info__table .p-info__table-title {
	font-size: 1.6rem;
	color: #192981;
	font-weight: 500;
	margin-bottom: 10px;
}