@charset "UTF-8";

/* -----------------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------------- */
:root {
  --layout-width-min: 375px; /* SPのデザインカンプの横幅 */
  --layout-width-max: 1280px; /* PCのデザインカンプの横幅 */
  --layout-container-width: calc(100% - 160px);

  --base-font-size: 16;
  --rem: calc(1rem / var(--base-font-size));

  --color-base:#00161E;
  --color-border: #DEDEDE;
  --color-blue: #007CC8;
  --color-deepblue: #171C61;

  --font-base: "Zen Kaku Gothic New", sans-serif;
  --font-sans: "Jost", sans-serif;
}
/* 中型デスクトップ（1439px以下） */
@media (max-width: 1439px) {
    :root {
        --layout-container-width: 96%;
    }
}
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    :root {
        --layout-container-width: 92%;
    }
}
/* スマホ（768px以下） */
@media (max-width: 768px) {
    :root {
        --layout-container-width: 89.6%;
    }
}

html {
	scroll-behavior: smooth;
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	min-height: 100%;
	color: var(--color-base);
	background-color: #F8F9FA;
	line-height: 1.75;
	font-size: 1rem;
	@media (max-width: 767px) {
		font-size: 0.875rem;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}

body, pre, input, textarea, select { 
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal; 
}

input, select, textarea { font-size: inherit; }

*, *::before, *::after {
  box-sizing: border-box;
}
@media (min-width: 1025px) { .view_tab-sp, body .view_tab { display: none !important; } }
@media (min-width: 768px) { .view_sp { display: none !important; } }
@media (max-width: 1024px) { .view_pc { display: none !important; } }
@media (max-width: 767px) { .view_pc-tab, body .view_tab { display: none !important; } }

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

.u-container {
	max-width: var(--layout-width-max);
    margin-inline: auto;
    width: var(--layout-container-width);
}
/* -----------------------------------------------------------
	#page
----------------------------------------------------------- */
body:not(#top) main{
	position: relative;
	&::before {
		content: "";
		background: url(../images/common/deco-ribbon_left.avif) right bottom no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		width: 28.1vw;
		max-width: 408px;
		aspect-ratio: 1/0.559;
		z-index: 1;
	}
	@media (max-width: 767px) {
		&::before {
			width: 60vw;
		}
	}
}
/* -----------------------------------------------------------
	#header
----------------------------------------------------------- */
header {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: calc(100% - 64px);
	height: 76px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 0 24px;
	border-radius: 9999px;
	border: 2px solid rgba(222, 222, 222, 0.3);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(5px);
	z-index:1000;
	transition:.1s;
	@media (max-width: 767px) {
		top: 8px;
		width: calc(100% - 16px);
		height: 56px;
		padding: 0 32px 0 16px;
	}
	.logo {
		max-width: 200px;
		width: 40.9%;
		@media (min-width: 1025px) and (max-width: 1280px) {
			width: 16%;
		}
		a {
			display: flex;
			align-items: flex-end;
			gap: 9.5%;
			width: 100%;
			.logo-mark {
				width: 37.4%;
			}
			.logo-text {
				width: 52.7%;
				aspect-ratio: 1/0.38;
				background: url(../images/common/logo-text.svg) center bottom no-repeat;
				background-size: contain;
			}
		}
	}
	.gnav {
		.gnav-list {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap:2.8vw;
			@media (min-width: 1025px) and (max-width: 1280px) {
				gap:1.8vw;
			}
			.gnav-item {
				a {
					font-size: calc(16 * var(--rem));
					font-weight: 700;
					display: inline-block;
					transition: 0.3s;
					@media (hover: hover) {
						&:hover {
							color: var(--color-blue);
						}
					}
				}
			}
			.button-gnav-cv {
				a {
					background-color: var(--color-blue);
					border-radius: 999px;
					color: #fff;
					font-weight: 700;
					line-height: 1;
					padding: 12px 16px 12px 24px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap:16px;
					.icon {
						position: relative;
						width: 24px;
						aspect-ratio: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						img {
							position: relative;
							z-index: 1;
							width: 14px;
							aspect-ratio: 1;
						}
						&::before {
							content: "";
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background-color: #fff;
							position: absolute;
							inset: 0;
							margin: auto;
							transition: transform .3s ease;
						}
					}
					@media (hover: hover) {
						&:hover {
							.icon {
								&::before {
									transform: scale(1.2);
								}
							}
						}
					}
				}
			}
		}
	}
	.button-menu {
		position: relative;
		width: 42px;
		height: 31px;
		background:none;
		border:none;
		cursor:pointer;
		@media (max-width: 767px) {
			width: 32px;
		}
		span {
			position: absolute;
			left: 50%;
			width: 32px;
			height: 2px;
			background-color: var(--color-deepblue);
			transition:.3s ease;
			border-radius: 1px;
			&:nth-child(1) {
				top: 0;
				transform:translateX(-50%);
			}
			&:nth-child(2) {
				top: 9px;
				transform:translateX(-50%);
			}
		}
		p {
			position: absolute;
			top: 19px;
			left: 50%;
			transform:translateX(-50%);
			font-size: 12px;
			font-family: var(--font-sans);
			font-weight: 600;
			line-height: 1;
			letter-spacing: 0.2em;
			color: var(--color-deepblue);
			&::before {
				content:"MENU";
				font-style: italic;
			}
		}
		&.active {
			span {
				&:nth-child(1) {
					top: 5px;
					transform: translateX(-50%)	rotate(25deg);
				}
				&:nth-child(2) {
					top: 5px;
					transform: translateX(-50%)	rotate(-25deg);
				}
			}
			p {
				&::before {
					content:"CLOSE";
				}
			}
		}
	}
	&.active {
		border: none;
		backdrop-filter: blur(0);
		background: rgba(255, 255, 255, 1);
		border-radius: 38px 38px 0 0;
	}
}
/* 展開メニュー */
.popup-menu {
	position:fixed;
	inset:0;
	padding:0 32px;
	opacity:0;
	visibility:hidden;
	transition:.3s;
	z-index:900;
	@media (max-width: 767px) {
		padding: 0 8px;
	}
	&::before {
		content:"";
		position:absolute;
		inset:0;
		background:rgba(0,0,0,.15);
		backdrop-filter:blur(8px);
		-webkit-backdrop-filter:blur(8px);
		cursor: pointer;
	}
	.popup-menu__panel {
		position:relative;
		height: fit-content;
		margin-top:86px;
		padding:32px;
		border-radius: 0 0 28px 28px;
		background: rgba(255, 255, 255, 1);
		transform:translateY(-20px);
		transition: transform .4s ease;
		z-index:1;
		overflow:auto;
		@media (max-width: 767px) {
			height:calc(100% - 64px);
			margin-top:64px;
		}
		.popup-menu__list {
			display: flex;
			flex-direction: column;
			gap:24px;
			li {
				padding-bottom: 16px;
				border-bottom: 1px solid var(--color-border);
				a {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					strong {
						font-family: var(--font-sans);
						font-size: calc(24 * var(--rem));
						font-style: italic;
						font-weight: 500;
						letter-spacing: 0.14em;
						text-transform: uppercase;
						line-height: 1;
					}
					span {
						text-align: right;
						font-weight: 500;
						line-height: 1;
					}
				}
			}
		}
		.menutxt-link {
			text-align: right;
			margin-top: 16px;
			a {
				display: inline-block;
				font-size: calc(12 * var(--rem));
				font-weight: 500;
				line-height: 1;
			}
		}
		.item-cv {
			width: 100%;
			margin-top: 24px;
			a {
				display: flex;
				flex-direction: column;
				border-radius: 8px;
				background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
				color: #fff;
				padding: 16px;
				line-height: 1;
				position: relative;
				small {
					letter-spacing: 0.06em;
					margin-bottom: 8px;
					font-weight: 500;
				}
				strong {
					font-family: var(--font-sans);
					font-size: calc(28 * var(--rem));
					font-style: italic;
					font-weight: 500;
					text-transform: uppercase;
					letter-spacing: 0.08em;
				}
				.icon {
					position: absolute;
					top: 50%;
					right: 16px;
					transform: translateY(-50%);
					width: 24px;
					aspect-ratio: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					img {
						width: 12px;
						aspect-ratio: 1;
						position: relative;
						z-index: 1;
					}
					&::before {
						content: "";
						width: 100%;
						height: 100%;
						background-color: #fff;
						border-radius: 50%;
						position: absolute;
						inset: 0;
						margin: auto;
						transition:.3s ease;
						display: block;
					}
				}
				@media (hover: hover) {
					&:hover {
						.icon {
							&::before {
								scale: 1.5;
							}
						}
					}
				}
			}
		}
	}
	&.active {
		opacity: 1;
		visibility: visible;
		.popup-menu__panel {
			transform:translateY(0);
		}
	}
}

/* -----------------------------------------------------------
	footer
----------------------------------------------------------- */
footer {
	position: relative;
	margin-top: 240px;
	@media (max-width: 767px) {
		margin-top: 120px;
	}
	&::before {
		content: "";
		width: 100%;
		height: 1px;
		position: absolute;
		top: 150px;
		left: 0;
		background-color: var(--color-border);
	}
	@media (max-width: 767px) {
		&::before {
			top: 120px;

		}
	}
	.l-footer__contact {
		max-width: 1024px;
		a {
			display: block;
			width: 100%;
			border-radius: 8px;
			background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
			position: relative;
			padding: 40px;
			transition: 0.3s;
			@media (max-width: 767px) {
				padding: 32px;
			}
			&::after {
				content: "";
				background: url(../images/common/bg-contact.avif) right center no-repeat;
				background-size: cover;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
			}
			.l-contact__title {
				padding: 24px 0 0 24px;
				color:#fff;
				position: relative;
				z-index: 1;
				@media (max-width: 767px) {
					padding: 0;
				}
				.jp {
					font-size: calc(18 * var(--rem));
					font-weight: 500;
					letter-spacing: 0.06em;
					margin-bottom: 8px;
					@media (max-width: 767px) {
						font-size: calc(16 * var(--rem));
					}
				}
				.en {
					font-size: calc(64 * var(--rem));
					font-family: var(--font-sans);
					font-weight: 500;
					line-height: 1;
					font-style: italic;
					text-transform: uppercase;
					letter-spacing: 0.06em;
					@media (max-width: 767px) {
						font-size: calc(40 * var(--rem));
					}
				}
			}
			.l-contact__lead {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap:24px;
				margin-top: 44px;
				position: relative;
				z-index: 1;
				@media (max-width: 767px) {
					margin-top: 32px;
					gap:16px;
				}
				.lead {
					font-weight: 500;
					line-height: 1.8;
					color:#fff;
					width: calc(100% - 64px);
					@media (max-width: 767px) {
						width: calc(100% - 56px);
						br {
							display: none;
						}
					}
				}
				.icon {
					width: 40px;
					aspect-ratio: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					img {
						width: 20px;
						aspect-ratio: 1;
						position: relative;
						z-index: 1;
					}
					&::before {
						content: "";
						border-radius: 50%;
						width: 100%;
						height: 100%;
						position: absolute;
						inset: 0;
						margin: auto;
						transition: 0.3s;
						background-color: #fff;
					}
				}
			}
			@media (hover: hover) {
				&:hover {
					opacity: 0.7;
					.p-contact__lead {
						.icon {
							&::before {
								scale: 1.2;
							}
						}
					}
				}
			}
		}
	}
	.l-footer__main {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 160px;
		@media (max-width: 767px) {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 80px;
		}
		.l-footer__main__companyinfo {
			@media (max-width: 767px) {
				display: contents;
			}
			.logo {
				max-width: 400px;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 80%;
				}
				@media (max-width: 767px) {
					width: 75%;
				}
				a {
					display: flex;
					align-items: flex-end;
					gap: 2.4vw;
					.logo-mark {
						width: 37.4%;
					}
					.logo-text {
						width: 53.7%;
					}
				}
			}
			.l-footer__locations {
				margin-top: 246px;
				display: flex;
				flex-direction: column;
				gap:40px;
				@media (min-width: 768px) and (max-width: 1024px) {
					margin-top: 160px;
				}
				@media (max-width: 767px) {
					margin-top: 48px;
				}
				.l-footer__location {
					border-left: 2px solid var(--color-border);
					position: relative;
					&::after {
						content: "";
						width: 2px;
						height: 24px;
						background-color: var(--color-blue);
						position: absolute;
						top: 0;
						left: -2px;
					}
					address {
						padding-left: 32px;
						>span {
							display: block;
							line-height: 1.4;
							font-weight: 500;
							&.company__name {
								font-weight: 700;
								line-height: 1.8;
							}
							&.tel_fax {
								font-family: var(--font-sans);
								font-weight: 400;
							}
							.num {
								font-family: var(--font-sans);
								font-weight: 400;
							}
						}
					}
				}
			}
		}
		.l-footer__main__menu {
			@media (max-width: 767px) {
				margin-top: 80px;
				width: 100%;
			}
			.title {
				font-size: calc(14 * var(--rem));
				font-family: var(--font-sans);
				font-style: italic;
				font-weight: 500;
				line-height: 1;
				text-transform: uppercase;
				letter-spacing: 0.14em;
				margin-bottom: 32px;
			}
			.footer-menu__list {
				display: flex;
				flex-direction: column;
				gap:32px;
				@media (max-width: 767px) {
					gap:16px;
				}
				li {
					border-bottom: 1px solid var(--color-border);
					position: relative;
					@media (max-width: 767px) {
						width: 100%;
					}
					a {
						padding-bottom: 16px;
						display: flex;
						align-items: flex-end;
						gap:40px;
						@media (max-width: 767px) {
							width: 100%;
							justify-content: space-between;
						}
						&::after {
							content: "";
							width: 0;
							height: 1px;
							background-color: var(--color-blue);
							position: absolute;
							bottom: 0;
							left: 0;
							transition: 0.3s;
						}
						strong {
							font-size: calc(36 * var(--rem));
							font-family: var(--font-sans);
							font-style: italic;
							line-height: 1;
							font-weight: 500;
							text-transform: uppercase;
							letter-spacing: 0.14em;
							@media (min-width: 768px) and (max-width: 1024px) {
								font-size: calc(28 * var(--rem));
							}
							@media (max-width: 767px) {
								font-size: calc(24 * var(--rem));
							}
						}
						span {
							font-weight: 500;
							line-height: 1;
						}
						@media (hover: hover) {
							&:hover {
								&::after {
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
	.l-footer__sub {
		margin-top: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		@media (max-width: 767px) {
			flex-direction: column;
			justify-content: flex-start;
			margin-top: 8px;
		}
		.certification {
			display: flex;
			align-items: center;
			gap:16px;
			@media (max-width: 767px) {
				order:2;
				gap:24px;
			}
			li {
				img {
					max-height: 64px;
				}
			}
		}
		.l-footer__sub__inner {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap:72px;
			@media (max-width: 767px) {
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;
				gap: 24px;
				order: 1;
				width: 100%;
				margin-bottom: 64px;
			}
			.privacy {
				@media (max-width: 767px) {
					text-align: right;
				}
				a {
					display: inline-block;
					font-size: 87.5%;
					font-weight: 500;
					line-height: 1;
					opacity: 0.6;
					transition: 0.3s;
					@media (hover: hover) {
						&:hover {
							opacity: 1;
						}
					}
				}
			}
			.copyright {
				text-align: right;
				font-family: var(--font-sans);
				font-size: 11px;
				font-style: italic;
				font-weight: 500;
				line-height: 1;
				opacity: 0.6;
				@media (max-width: 767px) {
					text-align: center;
				}
			}
		}
	}
	.l-footer-catchcopy {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		overflow: hidden;
		text-align: center;
		font-family: var(--font-sans);
		text-transform: uppercase;
		font-style: italic;
		font-weight: 500;
		line-height: 0.75;
		font-size: 8vw;
		margin-top: 104px;
		@media (max-width: 767px) {
			margin-top: 64px;
		}
		span {
			display: block;
			transform: translateY(2em);
			&:nth-child(1) {color:#50BFEF;}
			&:nth-child(2) {color:#4CBDEE;}
			&:nth-child(3) {color:#48B9EB;}
			&:nth-child(4) {color:#43B6E9;}
			&:nth-child(5) {color:#3EB1E7;}
			&:nth-child(6) {color:#3AAEE5;}
			&:nth-child(7) {color:#36AAE3;}
			&:nth-child(8) {color:#30A6E0;}
			&:nth-child(9) {color:#2CA3DE;}
			&:nth-child(10) {color:#289FDD;}
			&:nth-child(11) {color:#239BDA;}
			&:nth-child(12) {color:#1F98D8;}
			&:nth-child(13) {color:#1B95D6;}
			&:nth-child(14) {color:#1892D5;}
			&:nth-child(15) {color:#138ED2;}
			&:nth-child(16) {color:#108BD0;}
			&:nth-child(17) {color:#0C88CF;}
			&:nth-child(18) {color:#0885CD;}
		}
		.small {
			font-size: 7vw;
		}
		.head {
			padding-left: 0.5em;
		}
		&.is-active {
			span {
				animation: textanimation 0.5s forwards;
				&:nth-child(1) { animation-delay: 0.1s;}
				&:nth-child(2) { animation-delay: 0.15s;}
				&:nth-child(3) { animation-delay: 0.2s;}
				&:nth-child(4) { animation-delay: 0.25s;}
				&:nth-child(5) { animation-delay: 0.3s;}
				&:nth-child(6) { animation-delay: 0.35s;}
				&:nth-child(7) { animation-delay: 0.4s;}
				&:nth-child(8) { animation-delay: 0.45s;}
				&:nth-child(9) { animation-delay: 0.5s;}
				&:nth-child(10) { animation-delay: 0.55s;}
				&:nth-child(11) { animation-delay: 0.6s;}
				&:nth-child(12) { animation-delay: 0.65s;}
				&:nth-child(13) { animation-delay: 0.7s;}
				&:nth-child(14) { animation-delay: 0.75s;}
				&:nth-child(15) { animation-delay: 0.8s;}
				&:nth-child(16) { animation-delay: 0.85s;}
				&:nth-child(17) { animation-delay: 0.9s;}
				&:nth-child(18) { animation-delay: 0.95s;}
			}
		}
	}
}
/* -----------------------------------------------------------
	Component
----------------------------------------------------------- */
/* 	パーツ
----------------------------------------------------------- */
.c-button-basic {
	max-width: 320px;
	a {
		background-color: var(--color-blue);
		border-radius: 999px;
		color: #fff;
		font-weight: 700;
		line-height: 1;
		padding: 26px 24px 26px 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap:16px;
		@media (max-width: 767px) {
			padding: 20px 16px 20px 24px;
		}
		.txt {
			font-size: calc(18 * var(--rem));
			font-weight: 700;
			line-height: 1;
			@media (max-width: 767px) {
				font-size: calc(16 * var(--rem));
			}
		}
		.icon {
			position: relative;
			width: 24px;
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			img {
				position: relative;
				z-index: 1;
				width: 14px;
				aspect-ratio: 1;
			}
			&::before {
				content: "";
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				inset: 0;
				margin: auto;
				transition: transform .3s ease;
			}
		}
		@media (hover: hover) {
			&:hover {
				.icon {
					&::before {
						transform: scale(1.2);
					}
				}
			}
		}
	}
	&.white {
		a {
			background-color: #fff;
			.txt {
				color: var(--color-blue);
			}
			.icon {
				&::before {
					content: "";
					background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
				}
			}
		}
	}
}
.c-title-basic {
	.txt-jp {
		position: relative;
		padding-left: 48px;
		font-size: calc(24 * var(--rem));
		line-height: 1;
		font-weight: 500;
		letter-spacing: 0.06em;
		margin-bottom: 16px;
		&:before {
			content: "";
			width: 32px;
			height: 2px;
			border-radius: 1px;
			background-color: var(--color-blue);
			position: absolute;
			top: 0.5em;
			left: 0;
		}
		@media (max-width: 767px) {
			padding-left: 32px;
			font-size: calc(16 * var(--rem));
			&::before {
				width: 24px;
			}
		}
	}
	.txt-en {
		font-size: calc(104 * var(--rem));
		font-family: var(--font-sans);
		font-style: italic;
		font-weight: 600;
		line-height: 1;
		text-transform: uppercase;
		@media (min-width: 768px) and (max-width: 1024px) {
			font-size: calc(72 * var(--rem));
		}
		@media (max-width: 767px) {
			font-size: calc(48 * var(--rem));
		}
	}
}
.c-table-basic {
	width: 100%;
	tr {
		th,td {
			border-bottom: 1px solid var(--color-border);
			padding: 24px;
			@media (max-width: 767px) {
				display: block;
				padding: 16px;
			}
		}
		th {
			position: relative;
			vertical-align: center;
			font-weight: 500;
			line-height: 1.4;
			&::before {
				content: "";
				background-color: var(--color-blue);
				border-radius: 1px;
				width: 2px;
				height: 16px;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
			@media (max-width: 767px) {
				border-bottom: none;
				padding-bottom: 0;
				&::before {
					top: calc(16px + 0.2em);
					transform: translateY(0);
				}
			}
		}
		td {
			line-height: 1.4;
			&:has(dl) {
				display: flex;
				flex-direction: column;
				gap:1em;
			}
			dl {
				dt {
					font-weight: 700;
				}
			}
			ul {
				display: flex;
				flex-direction: column;
				gap:8px;
				li {
					display: grid;
					grid-template-columns: 1em 1fr;
					gap: 0.25em;
					&::before {
						content: "・";
					}
				}
			}
		}
	}
}
/* 	コンテンツ
----------------------------------------------------------- */
/* ページタイトル */
.c-pagetitle {
	padding-top: 182px;
	@media (max-width: 767px) {
		padding-top: 140px;
	}
	.c-pagetitle__item {
		margin-inline: auto;
		@media (min-width: 1025px) {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 92%;
		}
		@media (max-width: 767px) {
			width: 89.6%;
		}
		.c-pagetitle-jp {
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.06em;
			@media (min-width: 1025px) {
				padding-right: 80px;
				padding-bottom: 0.6em;
				order:2;
				font-size: calc(32 * var(--rem));
			}
			@media (min-width: 1025px) and (max-width: 1280px) {
				font-size: calc(28 * var(--rem));
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: calc(24 * var(--rem));
				padding-bottom: 16px;
			}
			@media (max-width: 767px) {
				font-size: calc(20 * var(--rem));
				padding-bottom: 8px;
			}
		}
		.c-pagetitle-en {
			font-family: var(--font-sans);
			font-weight: 500;
			line-height: 1;
			text-transform: uppercase;
			background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			padding-right: 0.1em;
			@media (min-width: 1025px) {
				order:1;
				font-size: calc(140 * var(--rem));
				font-style: italic;
			}
			@media (min-width: 1025px) and (max-width: 1280px) {
				font-size: calc(104 * var(--rem));
				font-style: italic;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: calc(92 * var(--rem));
				font-style: italic;
			}
			@media (max-width: 767px) {
				font-size: calc(64 * var(--rem));
				font-style: italic;
			}
		}
	}
	.txt-lead {
		margin-top: 64px;
		font-weight: 500;
		font-size: calc(28 * var(--rem));
		padding-left: 16px;
		@media (min-width: 1025px) and (max-width: 1280px) {
			font-size: calc(22 * var(--rem));
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			font-size: calc(18 * var(--rem));
		}
		@media (max-width: 767px) {
			font-size: calc(16 * var(--rem));
			padding-left: 0;
			margin-top: 24px;
		}
	}
}
/* ページ下部他ページへのリンク */
.c-other-pagelink {
	.c-other-pagelink__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 1px;
		grid-row-gap: 1px;
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			grid-column-gap: 0px;
		}
		.c-other-pagelink__item {
			height: 360px;
			@media (min-width: 768px) and (max-width: 1024px) {
				height: 240px;
			}
			@media (max-width: 767px) {
				height: 180px;
			}
			a {
				display: flex;
				flex-direction: column;
				overflow: hidden;
				position: relative;
				padding: 64px 44px 32px 64px;
				color: #fff;
				height: 100%;
				width: 100%;
				@media (min-width: 768px) and (max-width: 1024px) {
					padding: 32px;
				}
				@media (max-width: 767px) {
					padding: 32px 24px;
				}
				&::before {
					content: "";
					width: 100%;
					height: 100%;
					background: linear-gradient(290deg, rgba(0, 124, 200, 0.00) 1.07%, rgba(0, 124, 200, 0.80) 98.5%);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				>img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					position: absolute;
					inset: 0;
					margin: auto;
					transition: 0.3s;
				}
				.page-txt-jp {
					font-size: calc(20 * var(--rem));
					font-weight: 500;
					line-height: 1.2;
					letter-spacing: 0.06em;
					position: relative;
					z-index: 1;
					margin-bottom: 8px;
					@media (max-width: 767px) {
						font-size: calc(16 * var(--rem));
					}
				}
				.page-txt-en {
					font-size: calc(48 * var(--rem));
					font-family: var(--font-sans);
					line-height: 1;
					font-weight: 500;
					font-style: italic;
					text-transform: uppercase;
					position: relative;
					z-index: 1;
					@media (min-width: 768px) and (max-width: 1024px) {
						font-size: calc(40 * var(--rem));
					}
					@media (max-width: 767px) {
						font-size: calc(28 * var(--rem));
					}
				}
				.icon {
					margin-top: auto;
					position: relative;
					z-index: 1;
					width: 40px;
					aspect-ratio: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: auto;
					@media (max-width: 767px) {
						width: 24px;
					}
					img {
						position: relative;
						z-index: 1;
						width: 20px;
						aspect-ratio: 1;
						@media (max-width: 767px) {
							width: 14px;
						}
					}
					&::before {
						content: "";
						width: 100%;
						height: 100%;
						border-radius: 50%;
						background-color: #fff;
						position: absolute;
						inset: 0;
						margin: auto;
						transition: transform .3s ease;
					}
				}
				@media (hover: hover) {
					&:hover {
						img {
							scale: 1.05;
						}
						.icon {
							&::before {
								transform: scale(1.2);
							}
						}
					}
				}
			}
		}
	}
}
body#aboutus .c-other-pagelink {
	.c-other-pagelink__list {
		.c-other-pagelink__item {
			&.thumbnail-equipment,
			&.thumbnail-aboutus,
			&.thumbnail-recruit {
				display: none;
			}
		}
	}
}
body#business .c-other-pagelink {
	.c-other-pagelink__list {
		.c-other-pagelink__item {
			&.thumbnail-business,
			&.thumbnail-aboutus,
			&.thumbnail-recruit {
				display: none;
			}
		}
	}
}
body#equipment .c-other-pagelink {
	.c-other-pagelink__list {
		.c-other-pagelink__item {
			&.thumbnail-equipment,
			&.thumbnail-aboutus,
			&.thumbnail-recruit {
				display: none;
			}
		}
	}
}
body#company .c-other-pagelink {
	.c-other-pagelink__list {
		.c-other-pagelink__item {
			&.thumbnail-business,
			&.thumbnail-equipment,
			&.thumbnail-company {
				display: none;
			}
		}
	}
}
/* 空背景 */
.c-sky__wrapper {
	background: url(../images/common/bg-sky_long.avif) center bottom no-repeat;
	background-size: 100% 100%;
}
.c-sky__wrapper2 {
	position: relative;
	&::before {
		content: "";
		background: url(../images/common/bg-sky.avif) center 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 1136px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
/* -----------------------------------------------------------
	アニメーション
----------------------------------------------------------- */
/* 要素フェードイン */
.anime-fade-in {
	opacity: 0;
	&.is-active {
		-webkit-animation-duration: 0.8s;
		animation-duration: 0.8s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fade-in;
		animation-name: fade-in;
		transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	}
}
@keyframes fade-in {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 40px, 0);
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
/* テキスト1文字ずつ出現 */
.js-text {
	overflow: hidden;
	span {
		display: inline-block;
		transform: translateY(2em);
	}
	&.is-active {
		span {
			animation: textanimation 0.5s forwards;
			&:nth-child(1) { animation-delay: 0.1s;}
			&:nth-child(2) { animation-delay: 0.15s;}
			&:nth-child(3) { animation-delay: 0.2s;}
			&:nth-child(4) { animation-delay: 0.25s;}
			&:nth-child(5) { animation-delay: 0.3s;}
			&:nth-child(6) { animation-delay: 0.35s;}
			&:nth-child(7) { animation-delay: 0.4s;}
			&:nth-child(8) { animation-delay: 0.45s;}
			&:nth-child(9) { animation-delay: 0.5s;}
			&:nth-child(10) { animation-delay: 0.55s;}
			&:nth-child(11) { animation-delay: 0.6s;}
			&:nth-child(12) { animation-delay: 0.65s;}
			&:nth-child(13) { animation-delay: 0.7s;}
			&:nth-child(14) { animation-delay: 0.75s;}
			&:nth-child(15) { animation-delay: 0.8s;}
			&:nth-child(16) { animation-delay: 0.85s;}
			&:nth-child(17) { animation-delay: 0.9s;}
			&:nth-child(18) { animation-delay: 0.95s;}
			&:nth-child(19) { animation-delay: 1s;}
			&:nth-child(20) { animation-delay: 1.05s;}
			&:nth-child(21) { animation-delay: 1.1s;}
			&:nth-child(22) { animation-delay: 1.15s;}
			&:nth-child(23) { animation-delay: 1.2s;}
			&:nth-child(24) { animation-delay: 1.25s;}
			&:nth-child(25) { animation-delay: 1.3s;}
			&:nth-child(26) { animation-delay: 1.35s;}
			&:nth-child(27) { animation-delay: 1.4s;}
			&:nth-child(28) { animation-delay: 1.45s;}
			&:nth-child(29) { animation-delay: 1.5s;}
			&:nth-child(30) { animation-delay: 1.55s;}
			&:nth-child(31) { animation-delay: 1.6s;}
			&:nth-child(32) { animation-delay: 1.65s;}
			&:nth-child(33) { animation-delay: 1.7s;}
			&:nth-child(34) { animation-delay: 1.75s;}
			&:nth-child(35) { animation-delay: 1.8s;}
			&:nth-child(36) { animation-delay: 1.85s;}
			&:nth-child(37) { animation-delay: 1.9s;}
			&:nth-child(38) { animation-delay: 1.95s;}
			&:nth-child(39) { animation-delay: 2s;}
			&:nth-child(40) { animation-delay: 2.05s;}
			&:nth-child(41) { animation-delay: 2.1s;}
			&:nth-child(42) { animation-delay: 2.15s;}
			&:nth-child(43) { animation-delay: 2.2s;}
			&:nth-child(44) { animation-delay: 2.25s;}
			&:nth-child(45) { animation-delay: 2.3s;}
			&:nth-child(46) { animation-delay: 2.35s;}
			&:nth-child(47) { animation-delay: 2.4s;}
			&:nth-child(48) { animation-delay: 2.45s;}
			&:nth-child(49) { animation-delay: 2.5s;}
			&:nth-child(50) { animation-delay: 2.55s;}
		}
	}
}
@keyframes textanimation {
	0% { transform: translateY(2em); }
	100% { transform: translateY(0); }
}