@charset "UTF-8";
/* =========================================================
   common.css - ヘッダー / フッター / 共通パーツ
   ========================================================= */

/* =========================================================
   HEADER
   ========================================================= */
.l-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding: 2.1rem 0;
	transition: transform .5s var(--ease-out), background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}

.l-header.is-fixed {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 .2rem 2rem rgba(0, 48, 112, .08);
	padding: 1.2rem 0;
}

.l-header.is-hidden { transform: translateY(-100%); }

.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 0 7.2rem;
}

.l-header__logo a { display: block; }

/* inline のままだと行ボックスの高さぶん、ロゴの下に余白ができる */
.l-header__logo img { display: block; width: 21.4rem; height: 3.6rem; }

.l-gnav {
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: .5rem .5rem .5rem 3rem;
	border: 2px solid var(--c-border);
	border-radius: 4rem;
	background: #fff;
}

.l-gnav__item > a {
	display: block;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--c-main);
	transition: opacity .3s ease;
}

.l-gnav__item > a:hover { opacity: .6; }

.l-gnav__item--cta > a {
	padding: 1rem 3rem;
	border-radius: 3rem;
	background: var(--c-main);
	color: #fff;
	transition: background-color .3s ease, opacity .3s ease;
}

.l-gnav__item--cta > a:hover { opacity: 1; background: #004697; }

.l-header__toggle { display: none; }

/* ---------- SP（FigmaのSPデザイン 390px 基準） ---------- */
@media screen and (max-width: 1023px) {
	/* backdrop-filter を .l-header 自身に付けると position:fixed の子（ナビ）の
	   包含ブロックがヘッダーになってしまい、メニューが表示されなくなる。
	   背景とぼかしは擬似要素に逃がす。 */
	.l-header {
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}

	.l-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(255, 255, 255, .94);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.l-header.is-fixed { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
	.l-header.is-fixed::before { box-shadow: 0 .2rem 2rem rgba(0, 48, 112, .08); }
	.l-header.is-navopen::before { background: #fff; }

	/* ナビを開いてもロゴは前面に残す */
	.l-header__logo { position: relative; z-index: 2; }

	.l-header__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.l-header__toggle-bars { display: block; position: relative; }

	/* 3本とも同じ太さで描かれるよう、絶対値の2pxで整数ピクセルに揃える */
	.l-header__toggle-bars span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--c-main);
		border-radius: 1px;
		transition: transform .4s var(--ease-out), opacity .3s ease;
	}

	.l-header__toggle-bars span:nth-child(1) { top: 0; }
	.l-header__toggle-bars span:nth-child(2) { top: calc(50% - 1px); }
	.l-header__toggle-bars span:nth-child(3) { bottom: 0; }

	.l-header.is-navopen .l-header__toggle-bars span:nth-child(1) { transform: translateY(.7rem) rotate(45deg); }
	.l-header.is-navopen .l-header__toggle-bars span:nth-child(2) { opacity: 0; }
	.l-header.is-navopen .l-header__toggle-bars span:nth-child(3) { transform: translateY(-.7rem) rotate(-45deg); }

	.l-header__nav {
		position: fixed;
		inset: 0;
		background: #fff;
		padding: calc(var(--header-h) + 3rem) 2.4rem 6rem;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1rem);
		transition: opacity .4s ease, transform .4s var(--ease-out), visibility .4s;
	}

	.l-header.is-navopen .l-header__nav { opacity: 1; visibility: visible; transform: none; }

	/* メニューを開いている間は背景をスクロールさせない（main.js が html に付与） */
	html.is-navlock,
	html.is-navlock body { overflow: hidden; }

	.l-gnav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.l-gnav__item { border-bottom: 1px solid var(--c-border); }

	.l-gnav__item > a {
		display: block;
		padding: 1.8rem .4rem;
		font-size: 1.6rem;
	}

	.l-gnav__item--cta > a {
		margin-top: 2.4rem;
		padding: 1.6rem;
		border-radius: 4rem;
		background: var(--c-main);
		color: #fff;
		text-align: center;
	}

	.l-gnav__item--cta { border-bottom: 0; }
}

/* =========================================================
   共通パーツ
   ========================================================= */
/* ---------- 地球アイコン＋ラベル ---------- */
.c-label {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-family: var(--font-gothic);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: .05em;
}

.c-label img { width: 1.8rem; height: 1.8rem; }
.c-label--navy { color: var(--c-main); }
.c-label--white { color: #fff; }
.c-label--gold { color: var(--c-gold); }

/* ---------- 矢印ボタン ---------- */
.c-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 5.4rem;
	height: 5.4rem;
	border-radius: .4rem;
	transition: background-color .3s ease, transform .3s var(--ease-out);
}

.c-arrow--blue { background: var(--c-accent); }
.c-arrow--outline { border: 1px solid var(--c-main); background: transparent; }
.c-arrow img { width: 1.8rem; height: 1.8rem; }
.c-arrow--prev { transform: rotate(180deg); }
.c-arrow--prev:hover { transform: rotate(180deg) translateX(.4rem); }

/* ---------- セクション見出し ---------- */
.c-sectitle {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 4rem;
	border-top: 1px solid var(--c-main);
}

.c-sectitle--gold { border-top-color: var(--c-gold); }

.c-sectitle__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.c-sectitle__en {
	font-family: var(--font-en);
	font-weight: 100;
	font-size: 8.8rem;
	line-height: 1.136;
	letter-spacing: 0;
	white-space: nowrap;
}

.c-sectitle--gold .c-sectitle__en { color: #fff; }
.c-sectitle--navy .c-sectitle__en { color: var(--c-main); }

.c-sectitle__nav { display: flex; gap: 2rem; }

/* ---------- ボタン ---------- */
.c-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.c-btn__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	border-radius: .4rem;
	background: #fff;
	color: var(--c-main);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.7;
	white-space: nowrap;
	transition: background-color .3s ease, color .3s ease;
}

.c-btn--outline .c-btn__label { border: 1px solid var(--c-border); }
.c-btn--outline .c-arrow { width: 5.6rem; height: 5.6rem; }

.c-btn:hover .c-arrow--blue { background: var(--c-main); transform: translateX(.4rem); }
.c-btn:hover .c-btn__label { color: var(--c-main); }

/* ---------- ニュースカード ---------- */
.c-newscard {
	flex-shrink: 0;
	width: 36.8rem;
	min-height: 35.7rem;
	border: 1px solid var(--c-border);
	border-radius: 1rem;
	background: #fff;
	overflow: hidden;
}

.c-newscard__link { display: block; height: 100%; }

.c-newscard__media {
	display: block;
	height: 20.7rem;
	overflow: hidden;
}

.c-newscard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease-out);
}

.c-newscard:hover .c-newscard__media img { transform: scale(1.06); }

.c-newscard__inner {
	display: block;
	padding: 1.8rem 2rem 2.4rem;
}

.c-newscard__date {
	display: block;
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--c-blue);
}

.c-newscard__title {
	display: block;
	margin-top: 1.2rem;
	font-size: 1.5rem;
	line-height: 1.9;
	color: var(--c-text);
}

/* =========================================================
   フッター
   ========================================================= */
.l-footer { background: var(--c-footer); color: #fff; }

.l-footer__body { padding: 10rem 0 0; }

.l-footer__inner {
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 0 12rem;
}

.l-footer__cols {
	display: flex;
	justify-content: space-between;
	gap: 4rem;
	padding-top: 4rem;
	border-top: 1px solid rgba(255, 255, 255, .45);
}

.l-footer__logo img { width: 18.6rem; height: 3.1rem; }

.l-footer__address {
	margin-top: 2rem;
	font-family: var(--font-gothic);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #fff;
}

.l-footer__sns {
	display: flex;
	gap: 1.2rem;
	margin-top: 2.1rem;
}

/* URL未確定のSNSは a ではなく span で出しているので、両方を同じ見た目にする */
.l-footer__sns a,
.l-footer__sns span { display: block; transition: opacity .3s ease; }
.l-footer__sns a:hover { opacity: .6; }
.l-footer__sns img { display: block; width: 2rem; height: 2rem; }

.l-footer__nav { display: flex; gap: 4.5rem; }

/* SPでは2列×2段に組むためのラッパー。PCは4カラム横並びのままにする */
.l-fnav__group { display: contents; }
.l-fnav__group:nth-child(1) .l-fnav__col:nth-child(1) { order: 1; width: 8.1rem; }
.l-fnav__group:nth-child(2) .l-fnav__col:nth-child(1) { order: 2; }
.l-fnav__group:nth-child(1) .l-fnav__col:nth-child(2) { order: 3; }
.l-fnav__group:nth-child(2) .l-fnav__col:nth-child(2) { order: 4; }

.l-fnav__head { line-height: 1.4; }
.l-fnav__head + .l-fnav__head { margin-top: 2rem; }

.l-fnav__head a {
	font-family: var(--font-gothic);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.45;
	color: #fff;
	transition: opacity .3s ease;
}

.l-fnav__list {
	margin-top: 1.6rem;
	padding-left: 2rem;
	border-left: 1px solid #707070;
}

.l-fnav__list li { line-height: 2rem; }
.l-fnav__list li + li { margin-top: .6rem; }

.l-fnav__list a {
	font-size: 1.4rem;
	line-height: inherit;
	color: #fff;
	transition: opacity .3s ease;
}

.l-fnav__head a:hover,
.l-fnav__list a:hover { opacity: .6; }

.l-footer__meta { margin-top: 8rem; text-align: right; }

.l-footer__privacy { line-height: 1.2rem; }

.l-footer__privacy a {
	font-size: 1.4rem;
	color: #fff;
	text-decoration: underline;
	transition: opacity .3s ease;
}

.l-footer__privacy a:hover { opacity: .6; }

.l-footer__copy {
	margin-top: 1.5rem;
	font-size: 1.4rem;
	line-height: 1.6;
	color: #fff;
}

.l-footer__visual {
	position: relative;
	/* 画面いっぱいに敷く写真なので、remではなく画面幅基準（vw）で拡大縮小させる。
	   remは1440px超で原寸止めにしたため、rem指定のままだと右側が余白になってしまう。
	   数値はFigma（1440px）実寸を vw に換算したもの。 */
	height: 45.069vw;
	margin-top: 10rem;
	background-image: url("../img/common/footer-bg.jpg");
	background-repeat: no-repeat;
	background-size: 102.993vw 68.604vw;
	background-position: .002vw -10.242vw;
}

/* Figmaのグラデーション（#343434 → 透明）を写真の上に重ねる */
.l-footer__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, #343434 0%, #343434 5.267%, rgba(52, 52, 52, 0) 100%);
	pointer-events: none;
}

.l-footer__visual-inner {
	position: relative;
	z-index: 1;
	top: -1rem;
	text-align: center;
}

.l-footer__catch {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 3.6rem;
	line-height: 1.6;
	color: #fff;
}

.l-footer__mark { margin-top: 1rem; }
.l-footer__mark img { width: 65.4rem; height: 10.9rem; }

/* ---------- ページトップ ---------- */
.c-pagetop {
	position: fixed;
	right: 3rem;
	bottom: 3rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: .4rem;
	background: #fff;
	border: 1px solid var(--c-main);
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition: opacity .4s ease, transform .4s var(--ease-out), visibility .4s;
}

.c-pagetop.is-visible { opacity: 1; visibility: visible; transform: none; }
.c-pagetop img { width: 1.9rem; height: 1.9rem; transform: rotate(-90deg); }
.c-pagetop:hover { background: var(--c-main); }
.c-pagetop:hover img { filter: brightness(0) invert(1); }

/* ---------- SP（FigmaのSPデザイン 390px 基準／1rem = 10px） ---------- */
@media screen and (max-width: 1023px) {
	/* ヘッダー：ロゴ134.82x22.68／右にハンバーガー(22x1.5 x3) */
	.l-header__inner { height: var(--header-h); padding: 0 2rem; }
	.l-header__logo img { width: 13.482rem; height: 2.268rem; }
	.l-header__toggle { width: 3.4rem; height: 3.4rem; margin-right: -.6rem; }
	.l-header__toggle-bars { width: 2.2rem; height: 16px; }

	/* 矢印つきボタン（Figma: ラベル16.296px/27.704px・矢印44x44・角丸3.259） */
	.c-arrow,
	.c-arrow--outline,
	.c-btn--outline .c-arrow { width: 4.4rem; height: 4.4rem; border-radius: .33rem; }
	.c-arrow img { width: 1.47rem; height: 1.47rem; }
	.c-btn { gap: .41rem; }

	.c-btn__label {
		padding: .815rem 1.63rem;
		border-radius: .33rem;
		font-size: 1.63rem;
		line-height: 1.7;
	}

	/* セクション見出し（ライン→20px→ラベル→3px→英字40px） */
	.c-sectitle { gap: .3rem; padding-top: 2rem; }
	.c-sectitle__row { align-items: flex-end; gap: 1.2rem; }
	.c-sectitle__en { font-size: 4rem; line-height: 1.1364; }
	.c-sectitle__nav { gap: .8rem; }
	.c-label { gap: .8rem; font-size: 1.4rem; line-height: 1.1; letter-spacing: 0; }
	.c-label img { width: 1.6rem; height: 1.6rem; }

	/* 中央寄せのセクション見出し（TOPのSERVICEなど） */
	.c-sectitle--center { align-items: center; text-align: center; }

	/* ニュースカード：SPは縦積みで全幅 */
	.c-newscard {
		width: 100%;
		min-height: 0;
		border-width: .0929rem;
		border-color: #d8e3f0;
		border-radius: 1rem;
	}

	.c-newscard__media { height: 21.375rem; }
	.c-newscard__inner { padding: 2.045rem 2.23rem 2.416rem; }
	.c-newscard__date { font-size: 1.6rem; line-height: 1.2; color: var(--c-main); }
	.c-newscard__title { margin-top: .744rem; font-size: 1.5rem; line-height: 1.7; color: #20242b; }

	/* ---------- フッター ---------- */
	.l-footer__body { padding: 4.8rem 0 0; }
	.l-footer__inner { width: 100%; padding: 0 2.4rem; }

	.l-footer__cols {
		flex-direction: column;
		gap: 3.1rem;
		padding-top: 2.9rem;
		border-top: 1px solid rgba(255, 255, 255, .45);
	}

	.l-footer__info { text-align: center; }
	.l-footer__logo a { display: inline-block; }
	.l-footer__logo img { width: 22.2rem; height: 3.7rem; }

	.l-footer__address {
		margin-top: 2rem;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 1.5rem;
		line-height: 1.5;
	}

	.l-footer__sns { justify-content: center; align-items: center; gap: 2.06rem; height: 4.388rem; margin-top: 2rem; }
	.l-footer__sns img { width: 3.434rem; height: 3.434rem; }

	/* 2列（左：企業理念＋サービス／右：会社概要＋トピックス…） */
	.l-footer__nav {
		display: flex;
		justify-content: center;
		gap: 5.8rem;
	}

	.l-fnav__group {
		display: flex;
		flex-direction: column;
		gap: 3rem;
		min-width: 9.6rem;
	}

	.l-fnav__col,
	.l-fnav__col:first-child,
	.l-fnav__group:nth-child(1) .l-fnav__col:nth-child(1) { width: auto; }

	.l-fnav__head a { font-size: 1.6rem; line-height: 1.45; }
	.l-fnav__head + .l-fnav__head { margin-top: 1.6rem; }
	.l-fnav__list { margin-top: 1.28rem; padding-left: 1.6rem; border-left: .08rem solid #707070; }
	.l-fnav__list li { line-height: 1.94rem; }
	.l-fnav__list li + li { margin-top: .48rem; }
	.l-fnav__list a { font-size: 1.4rem; }

	.l-footer__meta { margin-top: 5rem; text-align: center; }
	.l-footer__privacy { font-size: 1.4rem; line-height: 1.6; }
	.l-footer__privacy a { font-size: 1.4rem; text-decoration: none; }
	.l-footer__copy { margin-top: 1.06rem; font-size: 1.2rem; line-height: 1.6; }

	/* クロージング（キャッチ＋ロゴ＋写真）。写真は上端から6.4remの位置から。 */
	.l-footer__visual {
		height: 35.4rem;
		margin-top: .5rem;
		padding-top: 6.4rem;
		background-origin: content-box;
		background-clip: content-box;
		background-size: 51.605rem 34.403rem;
		background-position: -5.702rem -1.383rem;
	}

	.l-footer__visual::before { top: 6.4rem; }

	.l-footer__visual-inner { top: 0; padding-top: .5rem; }
	.l-footer__catch { font-size: 2rem; line-height: 1.45; }
	.l-footer__mark { margin-top: 1.1rem; }
	.l-footer__mark img { width: 27.5rem; height: 4.6rem; }

	.c-pagetop { right: 1.6rem; bottom: 1.6rem; width: 4.4rem; height: 4.4rem; }
	.c-pagetop img { width: 1.6rem; height: 1.6rem; }
}

/* =========================================================
   汎用ページ（下層ページ実装までの暫定）
   ========================================================= */
.l-generic { padding: calc(var(--header-h) + 8rem) 0 12rem; }
.l-generic__inner { width: 100%; max-width: 96rem; margin: 0 auto; padding: 0 2.4rem; }
.l-generic__title { font-family: var(--font-mincho); font-weight: 700; font-size: 3.6rem; line-height: 1.5; color: var(--c-main); }
.l-generic__body { margin-top: 3rem; }
.l-generic__body p { margin-bottom: 1.6em; }

/* ---------- スライダー矢印の無効状態 ---------- */
.c-arrow[disabled] { opacity: .3; cursor: default; }
.c-arrow[disabled]:hover { transform: none; }
.c-arrow--prev[disabled]:hover { transform: rotate(180deg); }