@charset "UTF-8";
/* Sass Document */
/* ----------------------------------------------------------------------------------------------------
*  基本情報
* --------------------------------------------------------------------------------------------------*/

@layer components, variations;
@layer components {
	a,
	abbr,
	acronym,
	address,
	applet,
	article,
	aside,
	audio,
	b,
	big,
	blockquote,
	body,
	canvas,
	caption,
	center,
	cite,
	code,
	dd,
	del,
	details,
	dfn,
	div,
	dl,
	dt,
	em,
	embed,
	fieldset,
	figcaption,
	figure,
	footer,
	form,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	header,
	hgroup,
	html,
	i,
	iframe,
	img,
	ins,
	kbd,
	label,
	legend,
	li,
	mark,
	menu,
	nav,
	object,
	ol,
	output,
	p,
	pre,
	q,
	ruby,
	s,
	samp,
	section,
	small,
	span,
	strike,
	strong,
	sub,
	summary,
	sup,
	table,
	tbody,
	td,
	tfoot,
	th,
	thead,
	time,
	tr,
	tt,
	u,
	ul,
	var,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		font: inherit;
		font-size: 100%;
		vertical-align: baseline;
	}
	p {
		font-size: 1.6rem;
		line-height: 1.75;
	}
	button {
		border: none;
		font: inherit;
		color: currentColor;
	}
	ol,
	ul {
		list-style: none;
	}
}
html {
	line-height: 1;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

strong {
	font-weight: 700;
}

caption,
td,
th {
	text-align: left;
}

blockquote,
q {
	quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: "";
	content: none;
}

a img {
	border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

* {
	box-sizing: border-box;
	word-break: break-word; /* 長い単語を強制的に折り返す */
	overflow-wrap: break-word; /* 同様の目的。対応ブラウザが広い */
	line-break: auto; /* 節での自然な改行を優先（日本語では特に有効） */
	white-space: normal; /* 普通の折り返し挙動に */
}

html {
	font-size: 100%;
	line-height: 2;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
	font-size: min(0.78125vw, 62.5%);
}
@media (width <= 767.98px) {
	html {
		font-size: 1.33333vw;
	}
}

body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	position: relative;
	font-weight: 400;
	font-family: "Noto Sans JP", sans-serif;
	color: #000;
	font-size: 1.6rem;
	@media (width < 768px) {
		min-width: inherit;
	}
}
body.is-fixed {
	overscroll-behavior-y: none;
	overflow: hidden;
	position: relative;
}

div[id],
section[id] {
	scroll-margin-top: 2rem;
}

@media (width > 768px) {
	a[href*="tel:"] {
		text-decoration: none;
		cursor: default;
		pointer-events: none;
	}
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.l-content__inner {
	max-width: 97rem;
	margin-inline: auto;
	padding-inline: 2rem;
	box-sizing: content-box;
	position: relative;
	z-index: 5;
	&.-large {
		max-width: 110rem;
	}
	@media (width < 768px) {
		padding-inline: 3rem;
	}
}

@media (width < 768px) {
	.u-sp {
		display: block;
	}
}

@media (768px <= width) {
	.u-sp {
		display: none !important;
	}
}

.u-pc-inline {
	display: inline;
}
@media (width < 768px) {
	.u-pc-inline {
		display: none;
	}
}

.u-pc {
	display: block;
}
@media (width < 768px) {
	.u-pc {
		display: none;
	}
}

:root {
	--medium: 500;
	--color-main: #1a2792;
	--delay: 0.3s;
	--opacity: 0.7;
	--semiBold: 600;
}

/* header */
#l-header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 6rem;
	z-index: 10001;
	background-color: #fff;
	@media (width < 768px) {
		height: 10rem;
	}
}

.l-header__inner {
	max-width: 128rem;
	margin-inline: auto;
	height: 100%;
	display: flex;
	padding-inline: 4rem;
	@media (width < 768px) {
		height: auto;
		padding: 0 0 0 1.5rem;
	}
}

.l-header__group {
	display: flex;
	align-items: center;
	column-gap: 1.4rem;
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* ヘッダーのロゴ */
.l-header__logo {
	width: 10.5rem;
	flex-shrink: 0;
	@media (width < 768px) {
		width: 14rem;
	}
}

.l-header__txt {
	font-size: 1.5rem;
	font-weight: var(--medium);
	color: var(--color-main);
	font-weight: bold;
	@media (width < 768px) {
		font-size: 1.8rem;
		line-height: calc(25 / 20);
	}
}

/* ヘッダーの言語切替 */
.l-header__language {
	font-size: 1.5rem;
	font-weight: var(--semiBold);
	display: flex;
	height: 100%;
	align-items: center;
	margin-left: 1.8rem;
	@media (width < 768px) {
		font-size: 2.7rem;
		height: auto;
	}
}

.l-header__language-item {
	&:not(:first-child) {
		position: relative;
		margin-left: 0.4em;
		&::before {
			content: "/";
		}
	}
	a {
		color: #c0c0c0;
		text-decoration: none;
		transition: var(--delay) opacity;
	}
	&.-current {
		a {
			color: currentColor;
			@media (any-hover: hover) {
				&:hover {
					opacity: var(--opacity);
				}
			}
		}
	}
}

/* ヘッダーのナビゲーション */
.l-header__nav {
	margin-left: auto;
	height: 100%;
	font-size: 1.3rem;
	@media (width < 768px) {
		font-size: 3.2rem;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #021835;
		height: auto;
		padding: 2rem 3rem 6rem;
		transition:
			0.5s opacity,
			0.5s visibility;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		&.is-open {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
	}
}

.l-header__nav-list {
	display: flex;
	height: 100%;
	align-items: center;
	column-gap: 0.1rem;
	@media (width < 768px) {
		display: block;
		height: auto;
	}
}

.l-header__nav-item,
.l-header__nav-link {
	height: 100%;
	@media (width < 768px) {
		height: auto;
	}
}

.l-header__nav-item {
	@media (width < 768px) {
		border-bottom: 1px solid #7f8a99;
	}
}

.l-header__nav-link {
	display: grid;
	place-content: center;
	position: relative;
	padding-right: 3rem;
	color: currentColor;
	text-decoration: none;
	font-weight: var(--semiBold);
	transition: var(--delay) opacity;
	@media (any-hover: hover) {
		&:hover {
			opacity: var(--opacity);
		}
	}
	@media (width<= 767.98px) {
		color: #fff;
		display: block;
		padding: 3rem;
	}
	&::after {
		content: "";
		position: absolute;
		width: 0.7rem;
		height: 0.7rem;
		border-right: 1.5px solid #000;
		border-bottom: 1.5px solid #000;
		top: 47%;
		right: 1.5rem;
		transform: translateY(-50%) rotate(45deg);
		@media (width<= 767.98px) {
			border-color: #fff;
			width: 1.6rem;
			height: 1.6rem;
			transform: translateY(-50%) rotate(315deg);
			right: 3rem;
		}
	}
}

/* ヘッダーコンタクトのボタン囲み */
.l-header__contact {
	width: 17.2rem;
	&.l-header__contact__en {
		width: 10rem;
	}
	height: 100%;
	display: grid;
	align-content: center;
	flex-shrink: 0;
	margin-left: 2rem;
	@media (width <= 767.98px) {
		width: 18.3rem;
		&.l-header__contact__en {
			width: 15rem;
		}
		margin: 2rem 0 1.5rem auto;
		.l-contact__link {
			min-height: 6rem;
			font-size: 1.7rem;
			text-align: center;
			line-height: calc(27 / 20);
			&::before {
				width: 3.2rem;
				height: 3.1rem;
			}
		}
	}
}


/* ヘッダーコンタクトのボタン */
.l-contact__link {
	display: grid;
	width: 100%;
	align-items: center;
	min-height: 3rem;
	font-size: 1.12rem;
	font-weight: var(--semiBold);
	border-radius: 0.6rem;
	text-decoration: none;
	color: #fff;
	position: relative;
	padding-left: 4rem;
	background: linear-gradient(90deg, rgba(26, 39, 146, 1) 1%, rgba(0, 127, 176, 1) 100%);
	transition: var(--delay) opacity;
	@media (any-hover: hover) {
		&:hover {
			opacity: var(--opacity);
		}
	}
	@media (width <=767.98px) {
		&.u-sp {
			font-size: 3.4rem;
			border: 1px solid #fff;
			text-align: center;
			min-height: 11.2rem;
			border-radius: 1rem;
			margin-top: 8rem;
			&::before {
				width: 5.3rem;
				height: 5.2rem;
				left: 5rem;
			}
			&::after {
				border-right: 1.5px solid #fff;
				border-bottom: 1.5px solid #fff;
				content: "";
				position: absolute;
				top: 50%;
				right: 3rem;
				width: 1.6rem;
				height: 1.6rem;
				transform: translateY(-50%) rotate(315deg);
				right: 3rem;
			}
		}
	}
	&::before {
		content: "";
		position: absolute;
		width: 1.6rem;
		height: 1.5rem;
		mask: url(../img/icn_mail.svg) no-repeat center/100% 100%;
		background-color: #fff;
		top: 50%;
		left: 1.6rem;
		transform: translateY(-50%);
	}
}

/* ハンバーガー囲み */
.l-hamburger-wrapper {
	width: 10rem;
	height: 10rem;
	@media (width > 768px) {
		display: none;
	}
}

/* ハンバーガーメニュー */
.l-hamburger {
	width: 100%;
	height: 100%;
	border: none;
	position: relative;
	background-color: #fff;
	&.is-cross {
		.l-hamburger-line {
			&:first-child,
			&:last-child {
				top: 50%;
			}
			&:first-child {
				transform: rotate(45deg);
			}
			&:last-child {
				transform: rotate(-45deg);
			}
			&:nth-of-type(2) {
				opacity: 0;
			}
		}
	}
}

.l-hamburger-line {
	height: 0.4rem;
	background-color: var(--color-main);
	position: absolute;
	top: 50%;
	width: 5rem;
	left: 0;
	right: 0;
	margin-inline: auto;
	&:first-child,
	&:last-child {
		transition:
			var(--delay) transform,
			var(--delay) top;
	}
	&:nth-of-type(2) {
		transition: var(--delay) opacity;
	}
	&:first-child {
		top: calc(50% - 1.5rem);
	}
	&:last-child {
		top: calc(50% + 1.5rem);
	}
}

/* ----------------------------------------------------------------------------------------------------
 * footer
 * --------------------------------------------------------------------------------------------------*/

#l-footer {
	padding-block: 6rem 5rem;
}

.l-footer__inner {
	max-width: 115rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 18rem 1fr;
	column-gap: 11.3rem;
	@media (width < 768px) {
		display: block;
	}
}

/* フッターロゴ */
.l-footer__logo {
	width: 18rem;
	grid-row: 1 / 3;
	grid-column: 1;
	@media (width < 768px) {
		margin: 9rem auto 0;
	}
	img {
		width: 100%;
	}
	a {
		display: block;
		transition: var(--delay) opacity;
		@media (any-hover: hover) {
			&:hover {
				opacity: var(--opacity);
			}
		}
	}
}

/* フッターのナビゲーション */
.l-footer__nav {
	font-size: 1.4rem;
	grid-row: 1;
	grid-column: 2;
	margin-top: -0.5rem;
	font-weight: var(--medium);
	@media (width < 768px) {
		font-size: 2.4rem;
		margin-top: 0;
	}
}

.l-footer__nav-list {
	display: flex;
	column-gap: 2rem;
	@media (width < 768px) {
		column-gap: 3rem;
		justify-content: center;
	}
}

.l-footer__nav-link {
	color: currentColor;
	text-decoration: none;
	position: relative;
	transition: var(--delay) opacity;
	@media (any-hover: hover) {
		&:hover {
			opacity: var(--opacity);
		}
	}
	&[target="_blank"] {
		padding-right: 2.2rem;
		@media (width < 768px) {
			padding-right: 5.2rem;
		}
		&::after {
			width: 1.2rem;
			height: 1rem;
			content: "";
			position: absolute;
			bottom: 0.5rem;
			right: 0;
			background: url(../img/icn_blank.svg) no-repeat center/100% 100%;
		}
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.l-footer__nav-link[target="_blank"]::after {
		width: 2.3rem;
		height: 2.2rem;
		padding-right: 3rem;
	}
}

/* コピーライト */
.c-copyright {
	font-size: 1.2rem;
	display: block;
	color: #5a5a5a;
	font-weight: 300;
	grid-row: 2;
	grid-column: 2;
	margin-top: 0.5rem;
	@media (width < 768px) {
		text-align: center;
		font-size: 2.4rem;
		margin-top: 3rem;
	}
}

/* TOPに戻るボタン囲み */
.l-page-top {
	position: fixed;
	bottom: -10rem;
	right: 6rem;
	z-index: 999;
	transition: var(--delay) bottom;
	@media (width < 768px) {
		bottom: -14rem;
	}
	@media (width < 768px) {
		right: 4rem;
	}
	&.is-show {
		bottom: 4rem;
	}
}

/* TOPに戻るボタン */
.l-btn-top {
	display: block;
	width: 11.2rem;
	height: 6.8rem;
	position: relative;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	text-decoration: none;
	font-weight: var(--medium);
	padding-top: 1.3rem;
	transition: var(--delay) opacity;
	line-height: calc(28 / 24);
	@media (any-hover: hover) {
		&:hover {
			opacity: var(--opacity);
		}
	}
	@media (width < 768px) {
		font-size: 2.4rem;
		width: 10.9rem;
		height: 12rem;
		padding-top: 2rem;
	}
	span {
		position: relative;
		z-index: 5;
	}
	&::before {
		content: "";
		position: absolute;
		width: 1.8rem;
		height: 1.8rem;
		border-top: 3px solid #fff;
		border-left: 3px solid #fff;
		bottom: 0.5rem;
		left: 0;
		right: 0;
		margin-inline: auto;
		z-index: 5;
		transform: rotate(45deg);
		@media (width < 768px) {
			border-width: 2px;
			width: 2rem;
			height: 2rem;
			bottom: 1rem;
		}
	}
	&::after {
		background-color: var(--color-main);
		border-radius: 0.4rem;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		position: absolute;
		content: "";
		transform: skew(0, -7deg);
	}
}

/* 汎用ボタン */
.c-btn {
	color: #fff;
	background: linear-gradient(90deg, rgba(26, 39, 146, 1) 1%, rgba(0, 127, 176, 1) 100%);
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: var(--medium);
	display: grid;
	min-height: 4.5rem;
	border-radius: 0.4rem;
	place-content: center;
	position: relative;
	letter-spacing: 0.06em;
	box-shadow: 5px 5px 10px -1px #777777;
	transition:
		var(--delay) transform,
		var(--delay) box-shadow;
	@media (width < 768px) {
		font-size: 3.2rem;
		min-height: 7.1rem;
		font-weight: bold;
		box-shadow: 2px 2px 6px -1px #777777;
	}
	&.-large {
		min-height: 9rem;
		font-size: 2.6rem;
		font-weight: bold;
		@media (width < 768px) {
			font-size: 3.2rem;
			min-height: 11rem;
		}
		&::after {
			width: 2.2rem;
			height: 2rem;
			right: 4.6rem;
			@media (width < 768px) {
				width: 2.5rem;
				height: 2.2rem;
				right: 4rem;
			}
		}
	}
	@media (any-hover: hover) {
		&:hover {
			transform: translate(5px, 5px);
			box-shadow: 0 0 0 0 #777777;
		}
	}
	&::after {
		content: "";
		position: absolute;
		width: 1.3rem;
		height: 1.1rem;
		background: url(../img/icn_arrow.svg) no-repeat center / 100% 100%;
		right: 2rem;
		top: 50%;
		transform: translateY(-50%);
		@media (width < 768px) {
			width: 2.6rem;
			height: 2.3rem;
			right: 4rem;
			background-image: url(../img/icn_arrow_sp.svg);
		}
	}
}

/* h2見出し囲み */
.p-ttl-wrapper {
	position: relative;
}

/* h2見出し */
.c-section__ttl {
	font-size: 3.6rem;
	text-align: center;
	line-height: calc(48 / 36);
	font-weight: bold;
	color: var(--color-main);
	@media (width < 768px) {
		font-size: 4rem;
		line-height: calc(60 / 40);
	}
	/* 見出しのコピー */
	&.is-txtmove {
		position: absolute;
		left: 0;
		right: 0;
		text-align: center;
		z-index: 2;
		top: 0;
		color: #ccc;
		clip-path: polygon(4rem 0, 100% 0%, 100% 100%, 10rem 100%);
		animation: textHide 1.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
	}
}

/* 見出しのコピーアニメーション */
@keyframes textHide {
	0% {
		clip-path: polygon(10rem 0, 100% 0%, 100% 100%, 4rem 100%);
	}
	100% {
		clip-path: polygon(calc(100% + 10rem) 0, 100% 0%, 100% 100%, calc(100% + 4rem) 100%);
	}
}

/* h3見出し */
.c-second__ttl {
	font-size: 3rem;
	text-align: center;
	color: var(--color-main);
	font-weight: bold;
	@media (width < 768px) {
		font-size: 3.8rem;
	}
}

/* h2タイトル直下のテキスト */
.c-heading__txt {
	text-align: center;
	font-size: 1.5rem;
	line-height: calc(30 / 15);
	margin-top: 3.3rem;
	@media (768px <= width) {
		font-weight: var(--semiBold);
		&.-pctxtweight--midium {
			font-weight: var(--semiBold);
		}
	}
	@media (width < 768px) {
		font-size: 2.8rem;
		line-height: calc(44 / 28);
		text-align: justify;
		+ .c-heading__txt {
			margin-top: 1.5em;
		}
	}
}

/* スマホのズームボタン */
.c-btn-zoom {
	font-size: 2.8rem;
	background-color: var(--color-main);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.8rem;
	font-weight: bold;
	max-width: 27.4rem;
	width: 100%;
	margin: 1.4rem 0 0 auto;
	&.-mt {
		margin-top: 2.4rem;
	}
	@media (768px <= width) {
		display: none;
	}
	.c-icn {
		width: 3rem;
		height: 3rem;
		flex-shrink: 0;
		display: inline-block;
		position: relative;
		top: 0.1rem;
	}
}

#l-main {
	padding-top: 6rem;
	position: relative;
	&.is-cover {
		&::after {
			content: "";
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			background-color: #fff;
			width: 100%;
			height: 100%;
			z-index: 1000;
		}
	}
	@media (width < 768px) {
		padding-top: 10rem;
	}
}

/* フェードがつく */
.is-animate {
	opacity: 0;
	transform: translateY(5rem);
	transition:
		0.9s transform,
		0.9s opacity;
	&.is-show {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 背景装飾があるコンテンツ */
.is-hasbg {
	&::before,
	&::after {
		opacity: 0;
		transition: opacity 2s;
	}
	&.is-in {
		&::before,
		&::after {
			opacity: 1;
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
 * mv
 * --------------------------------------------------------------------------------------------------*/
.p-mv {
	position: relative;
	height: 45rem;
	@media (width < 768px) {
		height: 63rem;
	}
}

/* MVのタイトル大囲み */
.p-mv__text-wrapper {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	display: grid;
	align-items: center;
	max-width: 113rem;
	margin-inline: auto;
	@media (width < 768px) {
		display: block;
	}
}

/* MVのタイトル囲み */
.p-content__ttl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media (width < 768px) {
		padding-left: 5rem;
		justify-content: flex-start;
		padding-top: 7rem;
	}
	span {
		display: inline-block;
	}
}
/* MVのサブタイトル */
.c-ttl-sub {
	width: fit-content;
	position: relative;
	+ .c-ttl-sub {
		margin-top: 1rem;
		@media (width < 768px) {
			margin-top: 1.2rem;
		}
	}
	&.-pr {
		&::after {
			width: calc(100% - 1em);
		}
	}
	/* 背景のグラデーション */
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, rgba(0, 122, 169, 1) 1%, rgba(92, 200, 219, 1) 100%);
		border-radius: 0.2rem;
		height: 5.5rem;
		top: 50%;
		transform: translateY(-50%) skew(-8deg);
		@media (width < 768px) {
			height: 6.3rem;
		}
	}
	/* サブタイトルのテキスト */
	.c-txt {
		position: relative;
		z-index: 5;
		color: #fff;
		font-weight: bold;
		padding: 1rem 2rem;
		font-size: 2.6rem;
		line-height: 1.2;
		@media (width < 768px) {
			font-size: 2.95rem;
		}
		.u-txtsize--large {
			font-size: 3.6rem;
			@media (width < 768px) {
				font-size: 4rem;
			}
		}
		&.c-txt__en {
			@media (width < 768px) {
				padding: 1.4rem 2rem;
				font-size: 2.5rem;
			}
			.u-txtsize--large {
				@media (width < 768px) {
					font-size: 2.9rem;
				}
			}
		}
	}
}
/* MVのメインタイトル */
.c-ttl-main {
	font-size: 6rem;
	line-height: calc(67 / 60);
	font-weight: bold;
	color: #fff;
	margin: 1rem 0 0 1rem;
	filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
	@media (width < 768px) {
		font-size: 6.82rem;
		margin: 2rem 0 0 2rem;
	}
}

#video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes subSlide {
	0% {
		clip-path: polygon(0 0, calc(-1rem) 0, calc(-2rem) 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0% 100%);
	}
}

/* ----------------------------------------------------------------------------------------------------
 * introduction
 * --------------------------------------------------------------------------------------------------*/

.p-introduction {
	padding-block: 6.4rem 5.8rem;
}

.p-img-global {
	margin-top: 5.5rem;
	width: 100%;
	display: block;
	@media (width < 768px) {
		margin-top: 8rem;
	}
	img {
		width: 100%;
	}
}

/* ----------------------------------------------------------------------------------------------------
 * global
 * --------------------------------------------------------------------------------------------------*/

.p-global {
	background-color: #e9eef6;
	padding-block: 10rem 8rem;
	position: relative;
	overflow-x: clip;
	@media (width < 768px) {
		padding-block: 13rem 12rem;
		.c-heading__txt {
			margin-top: 6rem;
		}
	}
	&::before {
		content: "";
		position: absolute;
		width: 50rem;
		height: 21.8rem;
		background: url(../img/txt_global-support.svg) no-repeat center/contain;
		top: 2.6rem;
		left: calc(50% - 55.5rem);
	}
	&::after {
		content: "";
		position: absolute;
		width: 51.7rem;
		height: 35.3rem;
		background: url(../img/img_earth.png) no-repeat top center/100% auto;
		top: 0;
		left: calc(50% + 25rem);
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.p-global::before {
		background-image: url(../img/txt_global-support_sp.svg);
		width: 68.5rem;
		height: 9.8rem;
		left: 2.5rem;
		top: 7rem;
	}
	.p-global::after {
		background-image: url(../img/img_earth_sp.png);
		background-size: contain;
		background-position: top right;
		left: auto;
		right: 0;
		width: 38.2rem;
		height: 34.4rem;
		top: 23rem;
	}
}

.p-global-content {
	&.-content01 {
		margin-top: 6.4rem;
		display: flex;
		justify-content: center;
		column-gap: 4.6rem;
		@media (width < 768px) {
			display: block;
			margin-top: 8.4rem;
		}
		> div {
			width: 21rem;
			flex-shrink: 0;
			margin-top: 1.8rem;
			@media (width < 768px) {
				width: 100%;
				margin-top: 2rem;
			}
		}
		.p-global-map {
			width: 60.6rem;
			flex-shrink: 0;
		}
	}
	&.-content02 {
		margin-top: 5.4rem;
		.p-global-img {
			width: 100%;
			margin-top: 4rem;
			img {
				width: 100%;
			}
		}
	}
}

.p-global-list {
	@media (width < 768px) {
		display: flex;
		padding-inline: 2rem;
		column-gap: 1.5rem;
	}
}

.p-global-item {
	background-color: #01a6cc;
	color: #fff;
	border-radius: 0.5rem;
	padding: 2rem 1.7rem;
	@media (width < 768px) {
		width: calc((100% - 1.5rem) / 2);
		display: flex;
		flex-direction: column;
		border-radius: 1rem;
	}
	.c-txt {
		font-size: 2.7rem;
		font-weight: var(--medium);
		line-height: 1.2;
		@media (width < 768px) {
			font-size: 4.38rem;
			margin-top: auto;
		}
		&.c-txt__en {
			font-size: 2.45rem;
			@media (width < 768px) {
				font-size: 3.9rem;
				margin-top: auto;
			}
		}
		&.u-txtsize--small {
			font-size: 1.92rem;
			@media (width < 768px) {
				font-size: 2.89rem;
			}
		}
		.u-txtsize--large {
			font-size: 200%;
			font-weight: bold;
		}
		&.-center {
			text-align: center;
			margin-top: -0.5rem;
		}
		&.-padding-left-pc {
			padding-left: 2em;
			@media (width < 768px) {
				padding-left: 0;
			}
		}
	}
	&.-item01 {
		padding-block: 1.5rem 1rem;
		@media (width < 768px) {
			padding-block: 2.5rem;
		}
	}
	&.-item02 {
		margin-top: 2.6rem;
		padding-block: 1rem;
		@media (width < 768px) {
			margin-top: 0;
			padding-block: 2rem 2.5rem;
		}
	}
}

.p-global-point-item {
	display: flex;
	@media (width < 768px) {
		display: block;
	}
	.c-number {
		align-self: center;
		width: 11.9rem;
		flex-shrink: 0;
		margin-right: 1.3rem;
		img {
			width: 100%;
		}
		@media (width < 768px) {
			width: 18.7rem;
			margin-bottom: 1.5rem;
		}
	}
	&.-item02 .c-number {
		transform: translateY(0.3rem);
		@media (width < 768px) {
			transform: translateY(0);
		}
	}
	.c-txt {
		padding-top: 0.2rem;
		font-size: 2rem;
		font-weight: bold;
		position: relative;
		width: fit-content;
		@media (width < 768px) {
			font-size: 3.13rem;
			line-height: calc(47 / 31.3);
			padding-bottom: 2rem;
		}
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 0.4rem;
			left: 0;
			right: 0;
			@media (width < 768px) {
				height: 0.6rem;
			}
		}
	}
	&.-item01 {
		.c-txt {
			&::after {
				background-color: #2b79b6;
			}
		}
	}
	&.-item02 {
		margin-top: 1.8rem;
		@media (width < 768px) {
			margin-top: 4.5rem;
		}
		.c-txt {
			&::after {
				background-color: #006934;
			}
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
 * contact
 * --------------------------------------------------------------------------------------------------*/
.l-contact {
	padding-block: 6rem 5.5rem;
	background: url(../img/bg_contact.jpg) no-repeat center/cover;
	@media (width < 768px) {
		padding-block: 10rem 6rem;
		background-image: url(../img/bg_contact_sp.jpg);
	}
	.p-btn-wrapper {
		margin: 3rem auto 0;
		max-width: 51.6rem;
		@media (width < 768px) {
			max-width: 62rem;
		}
	}
}

.l-contact__txt {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: calc(32 / 18);
	@media (width < 768px) {
		font-size: 3rem;
		line-height: calc(45 / 30);
	}
}

/* ----------------------------------------------------------------------------------------------------
 * strengths
 * --------------------------------------------------------------------------------------------------*/

.p-strengths {
	padding-block: 9.8rem 8.3rem;
	position: relative;
	overflow: clip;
	@media (width < 768px) {
		padding-block: 14rem 12rem;
	}
	&::before,
	&::after {
		content: "";
		position: absolute;
	}
	&::before {
		width: 42.9rem;
		height: 20.7rem;
		background: url(../img/txt_whyscsk.svg) no-repeat center/100% auto;
		left: calc(50% - 55rem);
		top: 4rem;
	}
	&::after {
		width: 68.2rem;
		height: 38.3rem;
		background: url(../img/bg_strengths.png) no-repeat center/100% auto;
		left: calc(50% + 17rem);
		top: -6rem;
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.p-strengths::before {
		width: 62.5rem;
		height: 11.4rem;
		background-image: url(../img/txt_whyscsk_sp.svg);
		left: 6rem;
		top: 7.8rem;
	}
	.p-strengths::after {
		width: 83.2rem;
		height: 36.3rem;
		background: url(../img/bg_strengths.png) no-repeat center / 100% auto;
		left: calc(50% - 6rem);
		top: 14rem;
	}
}

.p-strengths-img {
	margin-top: 6rem;
	@media (width < 768px) {
		margin-inline: calc(50% - 50vw);
	}
}

.p-strengths__content {
	margin-top: 4.6rem;
	position: relative;
	@media (width < 768px) {
		margin-top: 7.6rem;
	}
	.c-second__ttl {
		@media (width < 768px) {
			width: 50%;
			position: absolute;
			left: 0;
			height: 23.3rem;
			width: calc(50% - 1.5rem);
			border-block: 2px solid var(--color-main);
			display: grid;
			place-content: center;
			font-size: 2.8rem;
			line-height: calc(49 / 28);
		}
	}
}

.p-strengths__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3rem 2.5rem;
	margin-top: 3.5rem;
	@media (width < 768px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3.5rem 3rem;
		justify-content: space-between;
	}
}

.p-strengths__item {
	color: #fff;
	text-align: center;
	position: relative;
	padding-top: 6.8rem;
	position: relative;
	width: 27.2rem;
	height: 20rem;
	* {
		position: relative;
		z-index: 5;
	}
	@media (width < 768px) {
		width: 100%;
		height: 24.3rem;
		padding-top: 8.3rem;
		&:first-child {
			grid-column: 2;
		}
	}
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
		left: 0;
		right: 0;
		top: 0;
	}
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		box-shadow: 5px 5px 10px -1px #777777;
		top: 1rem;
		left: 1rem;
		z-index: -1;
		@media (width < 768px) {
			box-shadow: 2px 2px 6px -1px #777777;
		}
	}
	.c-icn {
		display: inline-block;
		margin-inline: auto;
		position: absolute;
		height: 8rem;
		display: grid;
		place-content: center;
		top: 0;
		left: 0;
		right: 0;
		@media (width < 768px) {
			padding-top: 1rem;
		}
	}
	&.-item01 {
		.c-icn img {
			width: 4.9rem;
			@media (width < 768px) {
				width: 5.6rem;
			}
		}
		.c-txt.-heading {
			font-size: 1.62rem;
			@media (width < 768px) {
				font-size: 1.9rem;
			}
		}

		&::before {
			background-color: #7ebd2a;
		}
		&::after {
			background-color: #3f5f15;
		}
	}
	&.-item02 {
		.c-icn img {
			width: 4.6rem;
			@media (width < 768px) {
				width: 5.2rem;
			}
		}

		&::before {
			background-color: #4373c3;
		}
		&::after {
			background-color: #213961;
		}
	}
	&.-item03 {
		.c-icn img {
			width: 8.4rem;
			@media (width < 768px) {
				width: 10rem;
			}
		}

		&::before {
			background-color: #01a6cc;
		}
		&::after {
			background-color: #005366;
		}
	}
	&.-item04 {
		padding-top: 7rem;
		@media (width < 768px) {
			padding-top: 9rem;
		}
		.c-icn img {
			width: 5.8rem;
			@media (width < 768px) {
				width: 6.6rem;
			}
		}
		.c-txt.-main {
			margin-top: 1em;
			@media (width < 768px) {
				margin-top: 0.7em;
			}
		}

		&::before {
			background-color: #01a6cc;
		}
		&::after {
			background-color: #005366;
		}
	}
	&.-item05 {
		padding-top: 7rem;
		@media (width < 768px) {
			padding-top: 8.7rem;
		}
		.c-icn img {
			width: 4.1rem;
			@media (width < 768px) {
				width: 4.7rem;
			}
		}

		&::before {
			background-color: #925da3;
		}
		&::after {
			background-color: #492f51;
		}
		.c-txt.-main {
			margin-top: 0;
		}
	}
	.c-txt {
		&.-heading {
			font-weight: bold;
			font-size: 1.66rem;
			line-height: calc(20.7 / 16.6);
			@media (width < 768px) {
				font-size: 1.95rem;
			}
		}
		&.-main {
			line-height: 1;
			font-weight: bold;
			font-size: 1.99rem;
			margin-top: 0.3em;
			@media (width < 768px) {
				font-size: 2.3rem;
				margin-top: 0.2em;
			}
			.u-txtsize--large {
				font-size: calc(4.66rem * 0.9);
				position: relative;
				font-weight: 900;
				bottom: -0.1rem;
				@media (width < 768px) {
					font-size: 5.4rem;
				}
			}
		}
		&.-sub {
			font-size: 1.2rem;
			margin-top: 0.7em;
			line-height: calc(17 / 12);
			font-feature-settings: "palt";
			@media (width < 768px) {
				font-size: 1.4rem;
			}
		}
		&.-sub2 {
			font-size: 1.1rem;
			margin-top: 0.2em;
			line-height: 1.2;
			font-feature-settings: "palt";
			@media (width < 768px) {
				font-size: 1.29rem;
			}
		}
	}
}

.u-en {
	font-family: "Roboto", sans-serif;
}

/* ----------------------------------------------------------------------------------------------------
 * capabilities
 * --------------------------------------------------------------------------------------------------*/

.p-capabilities {
	padding-block: 10rem 7.2rem;
	background-color: #e9eef6;
	position: relative;
	overflow: clip;
	@media (width < 768px) {
		padding-block: 15rem 10rem;
	}
	&::before,
	&::after {
		position: absolute;
		content: "";
	}
	.c-heading__txt {
		margin-top: 5.6rem;
		@media (width < 768px) {
			letter-spacing: 0.02em;
		}
	}
	&::before {
		background: url(../img/txt_capabilities.svg) no-repeat center/100% auto;
		width: 64.5rem;
		height: 11.3rem;
		top: 3rem;
		left: calc(50% - 55rem);
	}
	&::after {
		background: url(../img/bg_capabilities.png) no-repeat center/100% auto;
		width: 91rem;
		height: 64.4rem;
		left: calc(50% + 11.4rem);
		top: -5rem;
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.p-capabilities::before {
		left: 5rem;
		top: 8rem;
	}
	.p-capabilities::after {
		width: 92.1rem;
		height: 65.1rem;
		left: 35%;
		top: 13rem;
	}
}

.p-capabilities-img {
	margin-top: 4.8rem;
}

.p-capabilities__content {
	margin-top: 6.3rem;
}

.p-capabilities__list {
	display: flex;
	gap: 3.4rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2.7rem;
	@media (width < 768px) {
		display: block;
	}
}

.p-capabilities__item {
	background-color: #fff;
	box-shadow: 5px 5px 8px -1px #333;
	border-radius: 0.8rem;
	border: 1px solid var(--color-main);
	width: 30rem;
	height: 23rem;
	text-align: center;
	padding: 1.9rem 1rem;
	@media (width < 768px) {
		border-radius: 1rem;
		width: 100%;
		height: auto;
		box-shadow: 5px 5px 3px -1px #666;
		padding: 3.3rem 1rem 3rem;
		+ .p-capabilities__item {
			margin-top: 3rem;
		}
	}
	.c-txt {
		font-size: 1.5rem;
		font-weight: var(--medium);
		line-height: calc(24 / 16);
		margin-top: 0.5rem;
		@media (width < 768px) {
			font-size: 2.6rem;
			margin-top: 1rem;
		}
	}
	.p-btn-wrapper {
		max-width: 20rem;
		margin: 1.2rem auto 0;
		@media (width < 768px) {
			max-width: 40rem;
			margin-top: 2.4rem;
		}
	}
}

.p-capabilities__ttl {
	text-align: center;
	font-size: 2.4rem;
	line-height: calc(30 / 24);
	color: var(--color-main);
	font-weight: bold;
	min-height: 3em;
	display: grid;
	place-content: center;
	@media (width < 768px) {
		font-size: 3.6rem;
		min-height: inherit;
		display: block;
	}
}

/* ----------------------------------------------------------------------------------------------------
 * NEWS
 * --------------------------------------------------------------------------------------------------*/

.p-news {
	padding-block: 12.3rem 6.7rem;
	position: relative;
	@media (width < 768px) {
		padding-block: 16rem;
	}
	&::before {
		content: "";
		position: absolute;
		width: 14.6rem;
		height: 5.9rem;
		background: url(../img/txt_news.svg) no-repeat center/contain;
		top: 6rem;
		left: calc(50% - 48rem);
	}
	.c-section__ttl {
		font-size: 3.2rem;
		font-weight: bold;
		text-align: left;
		&.is-txtmove {
			margin: 0;
			right: auto;
			clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
			animation: textHide2 2.4s forwards 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.p-news::before {
		top: 8rem;
		width: 21.7rem;
		height: 8.8rem;
		left: 3rem;
	}
}

@keyframes textHide2 {
	0% {
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
	}
	100% {
		clip-path: polygon(calc(100% + 10rem) 0, 100% 0%, 100% 100%, calc(100% + 4rem) 100%);
	}
}

.p-news__list {
	@media (width < 768px) {
		margin-top: 2rem;
	}
}

.p-news__item {
	border-bottom: 1px solid #bcbcbc;
	a {
		display: block;
		padding-block: 3rem;
		text-decoration: none;
		color: currentColor;
		transition: var(--delay) opacity;
		@media (any-hover: hover) {
			&:hover {
				opacity: var(--opacity);
			}
		}
	}
}

.p-news__inner {
	display: flex;
	align-items: center;
	column-gap: 2.6rem;
	@media (width < 768px) {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: 1rem 3rem;
	}
}

.p-news__date {
	font-size: 1.5rem;
	color: var(--color-main);
	flex-shrink: 0;
	font-weight: var(--medium);
	letter-spacing: 0.05em;
	@media (width < 768px) {
		grid-row: 1;
		grid-column: 1;
		font-size: 3rem;
	}
}

.p-news__category {
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 100px;
	color: #fff;
	height: 2.7rem;
	width: 11.3rem;
	display: block;
	font-weight: var(--medium);
	place-content: center;
	flex-shrink: 0;
	font-size: 1.5rem;
	letter-spacing: -0.08em;
	padding: 0 0.5rem 0.3rem;
	@media (width < 768px) {
		grid-row: 1;
		grid-column: 2;
		font-size: 2.4rem;
		width: 17.9rem;
		height: 4.3rem;
	}
	&.-event {
		background-color: #2a7fc5;
	}
	&.-seminar {
		background-color: #106287;
	}
	&.-notice {
		background-color: #925da3;
	}
	&.-press {
		background-color: #7cbd26;
	}
	&.-other {
		background-color: #747474;
	}
}

.p-news__txt {
	flex-grow: 1;
	font-size: 1.5rem;
	font-weight: var(--medium);
	line-height: calc(28 / 15);
	display: inline;
	position: relative;
	@media (width < 768px) {
		font-size: 2.4rem;
		grid-column: 1/3;
		grid-row: 2;
		line-height: calc(36 / 24);
	}
}

.p-news__item a[target="_blank"] {
	.p-news__txt {
		&::after {
			right: 0;
			margin-left: 0.5em;
			display: inline-block;
			width: 1.5rem;
			height: 1.1rem;
			content: "";
			background: url(../img/icn_news_blank.svg) no-repeat center/100% 100%;
		}
	}
}

.p-news__item a[href$=".pdf"] {
	.p-news__txt {
		&::after {
			margin-bottom: -0.5rem;
			width: 2rem;
			height: 2.2rem;
			background: url(../img/icn_pdf.png) no-repeat center/contain;
		}
	}
}

/* iOS18で疑似要素に　@media(width < 768px)が効かなかったので、従来の記述 */
@media screen and (max-width: 767.98px) {
	.p-news__item a[target="_blank"] .p-news__txt::after {
		width: 3.4rem;
		height: 2.5rem;
		position: relative;
		top: 0.2rem;
	}
	.p-news__item a[href$=".pdf"] .p-news__txt::after {
		width: 3rem;
		height: 3.3rem;
	}
}

/* 6件目以降を隠すためのクラス */
.p-news__item.is-hide {
  display: none !important;
}

/* 「もっと見る」ボタンの簡易的なデザイン（サイトのトーン＆マナーに合わせて調整） */
.c-btn-more {
	display: block;
	margin: 30px auto 0;
	padding: 10px 40px;
	background-color: #fff;
	border: 1px solid #bcbcbc;
	border-radius: 3px;
	cursor: pointer;
	font-size: 1.5rem;
	transition: all 0.3s;
	@media (width < 768px) {
		font-size: 2.4rem;
	}
}
.c-btn-more:hover {
	background-color: #f5f5f5;
}

/* ----------------------------------------------------------------------------------------------------
 * スマホのモーダル
 * --------------------------------------------------------------------------------------------------*/
.p-modal {
	height: 100svh;
	position: fixed;
	z-index: 10002;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		var(--delay) opacity,
		var(--delay) visibility;
	&.is-show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		.p-modal__content-wrapper {
			pointer-events: auto;
		}
	}
}

.p-modal__bg {
	background-color: rgba(255, 255, 255, 0.9);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.p-modal__inner {
	height: 100%;
	width: 100%;
	display: grid;
	position: relative;
	align-items: center;
	z-index: 2;
	pointer-events: none;
}

.p-modal__close {
	position: fixed;
	right: 1rem;
	width: 6rem;
	height: 6rem;
	transform: translateY(calc(-100% - 2rem));
	font-size: 5rem;
	line-height: 1;
	display: grid;
	place-content: center;
	background-color: transparent;
	color: #333;
}

.p-modal__content-wrapper {
	overflow: auto;
	position: relative;
	width: 100%;
	background-color: #fff;
	padding-block: 2rem;
}

.p-modal__content {
	padding-inline: 4rem;
	img {
		width: 100%;
	}
}