/* ------------------------------------------------------------
top common
---------------------------------------------------------------*/

body::before {
	content: "";
	width: 100svw;
	height: 100vh;
	background-image: url("../images/top/bg-introduce-pc.webp");
	background-position: top center;
	background-size: cover;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 autox;
}

/* ------------------------------------------------------------
FV
---------------------------------------------------------------*/
section.sec-top-fv {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}
video.sec-top-fv-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}
.top-fv-txt {
	width: 45.5%;
	height: auto;
	aspect-ratio: 656 / 284;
	max-width: 656px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.top-fv-txt img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (max-width: 999px) {
	section.sec-top-fv {
		height: calc(100svh - 70px);
		margin-top: 70px;
	}
	.top-fv-txt {
		width: 93.8%;
		aspect-ratio: 366 / 160;
		max-width: 366px;
	}
}

/* ------------------------------------------------------------
Introduce
---------------------------------------------------------------*/
.sec-introduce-pc {
	display: block;
	width: 100%;
	height: 100vh;
	min-height: 839px;
	position: relative;
	background-color: var(--c-white);
	background-image: url("../images/top/bg-introduce-pc.webp");
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.sec-introduce-sp {
	display: none;
}
.introduce-slider {
	height: 100%;
	display: flex;
	will-change: transform;
}

.introduce-slide-item {
	flex: 0 0 100%;
	height: 100%;
	position: relative;
	display: grid;
	place-items: center;
	padding: 0 6.94%;
}
.introduce-slide-item.--spacer {
	flex: 0 0 50%;
}

.introduce-txt {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	z-index: 10;
	will-change: transform;
}
.introduce-txt-group {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 20px;
}
.introduce-txt-group.sp {
	display: none;
}
.introduce-txt-group > p {
	opacity: 0;
	position: relative;
	font-size: 24px;
	line-height: 1;
	color: var(--c-primary);
	padding: 3px 0;
	font-weight: var(--fw-medium);
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-color: var(--c-white);
}
/* .introduce-txt-group > p::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% + 5px);
	height: 100%;
	background: var(--c-white);
	z-index: -1;
} */

.introduce-txt-group > figure {
	width: 33.3%;
	max-width: 480px;
	height: auto;
	aspect-ratio: 520 / 245;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-top: 50px;
}
.introduce-txt-group > figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (max-width: 1200px) {
	.introduce-txt > p > span {
		font-size: 20px;
	}
}
@media screen and (max-width: 768px) {
	.sec-introduce-pc {
		display: none;
	}
	.sec-introduce-sp {
		display: block;
		width: 100%;
		height: 100vh;
		min-height: 500px;
		position: relative;
		background-color: var(--c-white);
		background-image: url("../images/top/bg-introduce-sp.webp");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
	}
	.introduce-txt-group.pc {
		display: none;
	}
	.introduce-txt-group.sp {
		display: flex;
	}
	.introduce-txt-group {
		gap: 15px;
	}
	.introduce-slide-item {
		padding: 0 30px;
	}

	.introduce-txt-group > p {
		font-size: 15px;
		padding: 3px !important;
		letter-spacing: -0.05em;
	}
	.introduce-txt-group > figure {
		width: 65%;
		margin-top: 15px;
	}
}

@media screen and (max-width: 500px) {
	.sec-introduce {
		min-height: 600px;
	}

	.introduce-txt-group > p {
		font-size: 15px;
	}
}

/* ------------------------------------------------------------
Part items
---------------------------------------------------------------*/

/* .sec-top-part {
	width: 100%;
	position: relative;
	overflow: visible;
	background: var(--c-white);
} */
/* .top-part-body {
	position: sticky;
	top: var(--sticky-top);
	z-index: 1;
} */
.sec-top-parts {
	width: 100%;
	position: relative;
	overflow: visible;
}
.top-part-content-wrapper {
	width: 100%;
	position: relative;
	z-index: 10;
	align-items: center;
	display: flex;
	justify-content: center;
}
.top-part-1 {
	background: var(--c-primary);
	height: auto;
}
.top-part-2 {
	background: var(--c-d-blue);
	height: auto;
}
.top-part-3 {
	background: var(--c-navy);
	height: auto;
}
.top-part-1 > .top-part-content-wrapper {
	height: calc(100svh - (var(--sticky-top) + (var(--collapsed) * 1)));
}
.top-part-2 > .top-part-content-wrapper {
	height: calc(100svh - (var(--sticky-top) + (var(--collapsed) * 2)));
}
.top-part-3 > .top-part-content-wrapper {
	height: calc(100svh - (var(--sticky-top) + (var(--collapsed) * 3)));
}

.top-part-item {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.top-part-item.tpi-1 {
	background: var(--c-d-blue);
}
.top-part-item.tpi-2 {
	background: var(--c-primary);
}
.top-part-item.tpi-3 {
	background: var(--c-navy);
}

.top-part-item-content {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
.top-part-head {
	width: 100%;
	height: 50px;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 30px;
	position: sticky;
	z-index: 30;
}
.top-part-head::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-image: url("../images/common/bg-op-10.webp");
	background-position: center;
	background-size: auto;
	background-repeat: repeat;
	mix-blend-mode: multiply;
}
.top-part-1 > .top-part-head {
	top: var(--sticky-top);
	height: var(--collapsed);
	background: var(--c-primary);
}
@media screen and (min-width: 769px) {
	.sec-top-parts.is-stuck .top-part-1 > .top-part-head {
		top: 0;
		height: calc(var(--sticky-top) + var(--collapsed));
		padding-top: var(--sticky-top);
	}
}
.top-part-2 > .top-part-head {
	top: calc(var(--sticky-top) + var(--collapsed));
	background: var(--c-d-blue);
}
.top-part-3 > .top-part-head {
	top: calc(var(--sticky-top) + (var(--collapsed) * 2));
	background: var(--c-navy);
}

.top-part-ttl {
	width: 500px;
	height: 50px;
	background: var(--c-white);
	color: var(--c-primary);
	display: flex;
	align-items: center;
	padding: 30px;
	gap: 30px;
	flex-shrink: 0;
	z-index: 10;
	position: relative;
}
.top-part-num {
	width: auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	line-height: 1;
	gap: 2px;
	flex-shrink: 0;
	overflow: hidden;
	padding-right: 30px;
	position: relative;
}
.top-part-num::after {
	content: "";
	width: 1px;
	height: 30px;
	background: var(--c-primary);
	position: absolute;
	right: 0;
}
.top-part-num > span {
	width: 100%;
	text-align: center;
	font-size: 9px;
	font-weight: var(--fw-semibold);
}
.top-part-num > p {
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: var(--fw-semibold);
}
.top-part-ttl > h3 {
	width: 100%;
	font-size: 24px;
	line-height: 1;
	font-weight: var(--fw-semibold);
}
.top-part-sub-ttl {
	font-size: 15px;
	letter-spacing: 0;
	font-weight: var(--fw-reg);
}

.top-part-cont {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0 6.94%;
	display: flex;
	align-items: center;
}

.tpi-1 .top-part-cont {
	/* padding-top: 120px;
	padding-bottom: 190px; */
	flex-flow: column;
	justify-content: center;
	gap: 50px;
}

.tpi-2 .top-part-cont {
	justify-content: space-between;
	/* padding-top: 242px;
	padding-bottom: 320px; */
	gap: 90px;
}

.tpi-3 .top-part-cont {
	/* padding-top: 40px; */
	/* padding-bottom: 60px; */
	flex-flow: column;
	justify-content: center;
	gap: 20px;
}

.top-part-img {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	transition-delay: 0.5s !important;
}
.tpi-1 .top-part-img {
	width: 56.5%;
	max-width: 814px;
	aspect-ratio: 814 / 300;
	margin: 0 auto;
}
.tpi-2 .top-part-img {
	width: 33.333%;
	max-width: 480px;
	aspect-ratio: 480 / 440;
}
.tpi-3 .top-part-img {
	width: 35%;
	max-width: 420px;
	aspect-ratio: 580 / 510;
	margin: 0 auto;
}

.top-part-img > * {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.top-part-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.top-part-txt {
	font-size: 18px;
	line-height: 3;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	transition-delay: 0.5s !important;
}
.tpi-1 .top-part-txt {
	text-align: center;
}
.tpi-3 .top-part-txt {
	font-size: 28px;
	line-height: 1;
	text-align: center;
}
.tpi-3 .os-issues-list + .top-part-txt {
	font-size: 20px;
	line-height: 1.6;
}
.tpi-3 .os-issues-list {
	display: flex;
	gap: 27px;
	max-width: 985px;
}
.tpi-3 .os-issues-list .os-issues-list-item {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: flex-start;
	border-radius: 5px;
	background: var(--c-white);
	overflow: hidden;
	position: relative;
}
.tpi-3 .os-issues-list .os-issues-list-item figure {
	width: 100%;
	aspect-ratio: 310 / 180;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}
.tpi-3 .os-issues-list .os-issues-list-item figure::after {
	content: "";
	width: 100%;
	height: 41.17%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 0;
	background: linear-gradient(0deg, rgb(0 0 0 / 51%), transparent);
}
.tpi-3 .os-issues-list .os-issues-list-item figure .ili-num {
	position: absolute;
	right: 16px;
	bottom: 17px;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	gap: 7px;
	align-items: flex-end;
	line-height: 1;
}
.tpi-3 .os-issues-list .os-issues-list-item figure .ili-num span {
	font-size: 24px;
	font-family: var(--font-garamond);
	font-weight: var(--fw-reg);
	letter-spacing: -0.025em;
}
.tpi-3 .os-issues-list .os-issues-list-item figure .ili-num strong {
	font-size: 40px;
	letter-spacing: -0.05em;
	font-weight: var(--fw-reg);
}
.tpi-3 .os-issues-list .os-issues-list-item figure img {
	translate: none !important;
	rotate: none !important;
	scale: none !important;
	transform: translate3d(0px, 0px, 0px) !important;
}
.tpi-3 .os-issues-list .os-issues-list-item figure + div {
	width: 100%;
	display: flex;
	flex-flow: column;
	padding: 20px;
	gap: 10px;
	min-height: 130px;
}
.tpi-3 .os-issues-list .os-issues-list-item figure + div h4 {
	width: 100%;
	font-size: 20px;
	color: #2e95af;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
}
.tpi-3 .os-issues-list .os-issues-list-item figure + div p {
	width: 100%;
	font-size: 16px;
	color: var(--c-bk);
	font-weight: var(--fw-medium);
	letter-spacing: 0;
	font-family: var(--font-notosans);
}

@media screen and (min-width: 1000px) and (max-height: 900px) {
	.tpi-1 .top-part-cont {
		/* padding-top: 80px;
		padding-bottom: 100px; */
		gap: 20px;
	}
	.tpi-3 .top-part-cont {
		/* padding-top: 20px;
		padding-bottom: 40px; */
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure {
		aspect-ratio: 310 / 165;
	}
	.tpi-3 .top-part-txt {
		font-size: 24px;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure + div p {
		font-size: 14px;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure + div {
		padding-block: 15px;
		min-height: 100px;
		gap: 5px;
	}
}
@media screen and (max-width: 999px) {
	.top-part-txt {
		font-size: 16px;
		line-height: 1.6;
	}
}
@media screen and (max-width: 768px) {
	.top-part-head {
		height: 50px;
		gap: 12px;
	}
	.top-part-ttl {
		width: 250px;
		height: 50px;
		padding: 15px;
		gap: 12px;
	}
	.top-part-num {
		padding-right: 12px;
	}
	.top-part-ttl > h3 {
		font-size: 16px;
	}
	.top-part-sub-ttl {
		font-size: 12px;
		word-break: keep-all;
	}

	.top-part-cont {
		padding: 0 30px;
	}

	.tpi-1 .top-part-cont {
		padding-top: 30px;
		padding-bottom: 0;
		gap: 30px;
	}

	.tpi-2 .top-part-cont {
		justify-content: center;
		flex-flow: column;
		/* padding-top: 50px; */
		padding-top: calc(var(--sticky-top) + var(--collapsed));
		padding-bottom: 50px;
		gap: 30px;
		align-items: flex-start;
	}

	.tpi-3 .top-part-cont {
		gap: 15px;
		padding: 20px 0 0;
		overflow: scroll;
	}

	.tpi-1 .top-part-img {
		width: 65%;
		aspect-ratio: auto;
		max-width: 300px;
	}
	.tpi-2 .top-part-img {
		width: 50%;
		/*		aspect-ratio: 280 / 113;*/
		max-width: 300px;
	}
	.tpi-3 .top-part-img {
		width: 100%;
		aspect-ratio: 390 / 694;
		max-width: 230px;
		margin: 0 auto;
	}
	.top-part-txt span {
		display: block;
		margin: 10px 0;
	}
	.top-part-txt {
		font-size: 15px;
		line-height: 1.6em;
	}
	.tpi-1 .top-part-txt {
		text-align: left;
	}
	.tpi-3 .top-part-txt {
		font-size: 16px;
		line-height: 1.6;
	}
	.tpi-3 .os-issues-list {
		max-width: 100%;
		overflow-x: scroll;
		padding: 0 30px;
		position: relative;
	}
	.tpi-3 .os-issues-list .os-issues-list-item {
		min-width: 300px;
	}
	.tpi-3 .os-issues-list .os-issues-list-item:not(:last-child) {
		margin: 0;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure {
		aspect-ratio: 310 / 100;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure + div {
		gap: 5px;
		min-height: auto;
		padding: 10px 15px 15px;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure + div h4 {
		font-size: 18px;
	}
	.tpi-3 .os-issues-list .os-issues-list-item figure + div p {
		font-size: 15px;
	}
	.tpi-3 .os-issues-list + .top-part-txt {
		font-size: 15px;
		letter-spacing: -0.05em;
	}
}

/* ------------------------------------------------------------
Recruit
---------------------------------------------------------------*/
.sec-top-recruit {
	width: 100%;
	min-height: 600px;
	padding: 0 6.94%;
	background-image: url("../images/top/bg-top-recruit-pc.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.top-recruit-cont {
	padding-top: 106px;
	padding-bottom: 207px;
	width: 100%;
	max-width: 600px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 30px;
}
.top-recruit-cont > .ttl-box {
	gap: 50px;
}
.top-recruit-cont .ttl-box h3.--en {
	font-size: 90px;
	line-height: 1;
}
.top-recruit-ttl-txt > p {
	width: 100%;
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-color: var(--c-primary);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.loop-txt-box {
	display: flex;
	overflow: hidden;
	position: absolute;
	bottom: -3px;
	z-index: 5;
	width: calc(100% + 60px);
	align-items: center;
	height: 112px;
	gap: 20px;
	flex-wrap: nowrap;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.loop-txt-box > img {
	animation: loop 40s infinite linear 1s both;
	height: 100%;
	max-width: none;
}
@keyframes loop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

@media screen and (max-width: 999px) {
	.sec-top-recruit {
		padding: 0 30px;
	}
	.top-recruit-cont {
		padding-top: 117px;
		padding-bottom: 256px;
		max-width: none;
	}
	.top-recruit-cont > .ttl-box {
		gap: 36px;
	}
	.top-recruit-cont .ttl-box h3.--en {
		font-size: 60px;
	}

	.loop-txt-box {
		height: 56px;
	}
}

@media screen and (max-width: 600px) {
	.sec-top-recruit {
		min-height: 650px;
		aspect-ratio: 782 / 1301;
		background-image: url("../images/top/bg-top-recruit-sp.webp");
	}
	.top-recruit-ttl-txt > p {
		text-align: justify;
	}
}
/* ------------------------------------------------------------
News
---------------------------------------------------------------*/
.sec-top-news {
	width: 100%;
	padding: 0 6.94%;
	background-color: var(--c-light);
	position: relative;
	overflow: hidden;
}
.top-news-flex {
	width: 100%;
	padding-top: 100px;
	padding-bottom: 250px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
}
.top-news-flex .ttl-box {
	width: 250px;
	flex-shrink: 0;
	gap: 50px;
}
.top-news-flex .ttl-box h3.--en {
	font-size: 90px;
	line-height: 1;
}
.news-list {
	width: auto;
	display: flex;
	flex-flow: column;
}
.top-news-flex .news-list {
	width: 100%;
}
.top-news-flex .btn-box-center {
	display: none;
}
.news-list-item {
	width: 100%;
	color: var(--c-bk);
	font-family: var(--font-notosans);
	font-weight: var(--fw-medium);
	display: flex;
	gap: 10px 20px;
	align-items: center;
	padding: 30px;
	padding-right: 70px;
	border-bottom: 1px solid var(--c-l-gray);
	position: relative;
	transition: var(--transition-base);
}
.news-list-item:hover {
	opacity: 0.6;
}
.news-list-item::after {
	content: "";
	width: 13px;
	height: auto;
	aspect-ratio: 1 / 1;
	background-image: url("../images/common/icon-arrow-right-bk.svg");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
	z-index: 10;
	flex-shrink: 0;
}
.news-list-item:first-of-type {
	border-top: 1px solid var(--c-l-gray);
}
.nli-head {
	width: auto;
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.nli-date {
	font-size: 16px;
}
.nli-cat {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	background: var(--c-primary);
	font-size: 14px;
	color: var(--c-white);
	padding: 6px 20px;
	min-width: 120px;
}

.nli-ttl {
	width: auto;
	font-size: 16px;
}

@media screen and (max-width: 999px) {
	.sec-top-news {
		padding: 0 30px;
	}
	.top-news-flex {
		padding-top: 70px;
		padding-bottom: 50px;
		justify-content: flex-start;
		flex-flow: column;
		align-items: center;
		gap: 30px;
	}
	.top-news-flex .ttl-box {
		width: 100%;
	}
	.top-news-flex .ttl-box .c-btn {
		display: none;
	}
	.news-list-item {
		gap: 10px;
		padding: 20px 0;
		padding-right: 0;
		flex-wrap: nowrap;
		flex-flow: column;
		align-items: flex-start;
	}
	.news-list-item::after {
		content: none;
	}
	.nli-head {
		width: 100%;
		justify-content: flex-start;
	}
	.nli-ttl {
		width: 100%;
	}
	.top-news-flex .btn-box-center {
		display: flex;
	}
	.top-news-flex .ttl-box h3.--en {
		font-size: 60px;
	}
}

/* ローディング覆い */
.loading {
	position: fixed;
	inset: 0;
	background: #3db7fc; /* ← ご指定の背景色 */
	display: grid;
	place-items: center;
	z-index: 9999;
	/* ここをワイプで削っていく */
	clip-path: inset(0 0 0 0);
	will-change: clip-path;
}
.loading__text {
	display: flex;
	gap: 0.5em;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff; /* 暗背景なので白文字 */
}
.loading__text span.word > span {
	font-size: 20px;
}
.loading__text span.word > span.e {
	margin-left: 0.1em;
}
.word {
	opacity: 0;
	transform: translateX(-20px); /* 左から入る */
}
/* 本文のチラ見え防止（ワイプ直前に外す） */
.is-hidden {
	visibility: hidden;
}