@charset "UTF-8";
/* =========================================================
   philosophy.css - 企業理念ページ
   Figma 1440px 基準（1rem = Figmaのpx ÷ 10）
   ========================================================= */

.p-philosophy { padding-top: 15rem; }

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

.p-philosophy__mv {
	width: min(100%, 144rem);
	margin: 3rem auto 0;
	padding: 0 12rem;
}

.p-philosophy__mv img {
	display: block;
	width: 100%;
	height: 25rem;
	object-fit: cover;
	border-radius: 2rem;
}

/* =========================================================
   MISSION
   ========================================================= */
.p-mission {
	position: relative;
	padding: 7rem 0 12rem;
}

.p-mission__dots {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.p-mission__dots img { width: 100%; height: 100%; }

.p-mission__dots--left {
	left: calc(-4.8rem - var(--gutter));
	top: 16.5rem;
	width: 43.01rem;
	height: 52rem;
}

.p-mission__dots--right {
	right: calc(-16.25rem - var(--gutter));
	top: 17.5rem;
	width: 56.45rem;
	height: 46.65rem;
}

.p-mission__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 0 12rem;
	text-align: center;
}

.p-mission__title {
	margin-top: 1.4rem;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 4.8rem;
	line-height: 5.7rem;
	color: var(--c-main);
}

.p-mission__lead {
	margin-top: 7rem;
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 3.5rem;
	color: var(--c-main);
}

.p-mission__body {
	margin-top: 4rem;
	font-size: 1.6rem;
	line-height: 3.4rem;
	color: var(--c-text);
}

.p-mission__body p + p { margin-top: 3.4rem; }

/* =========================================================
   その「難しい」を、わたしたちが引き受ける。
   ========================================================= */
.p-accept {
	position: relative;
	height: 100rem;
	overflow: hidden;
	background: var(--c-main);
	border-radius: 12rem 12rem 0 0;
}

.p-accept__glow {
	position: absolute;
	left: calc(19rem + var(--gutter));
	top: -24.7rem;
	width: 106rem;
	height: 79.5rem;
	background: radial-gradient(closest-side, rgba(120, 180, 245, .3) 0%, rgba(120, 180, 245, 0) 100%);
	pointer-events: none;
}

.p-accept__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 12rem 12rem 0;
	text-align: center;
}

.p-accept__title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 4.8rem;
	line-height: 8rem;
	color: #fff;
}

.p-accept__body {
	margin-top: 4rem;
	font-size: 1.6rem;
	line-height: 3.4rem;
	color: #fff;
	opacity: .9;
}

.p-accept__body p + p { margin-top: 3.4rem; }

/* =========================================================
   画像ループ（見た目は page.css・ここでは位置だけ）
   ========================================================= */
.p-philosophy .p-imgloop { margin-top: -20.6rem; }

/* =========================================================
   3つの約束
   ========================================================= */
.p-promise { padding: 12rem 0; }

.p-promise__stage {
	position: relative;
	width: min(100%, 144rem);
	height: 112.5rem;
	margin-inline: auto;
}

.p-promise__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 4rem;
	color: var(--c-main);
	text-align: center;
}

.p-promise__list {
	position: absolute;
	left: 17rem;
	top: 11rem;
	display: flex;
	flex-direction: column;
	gap: 4rem;
	width: 59.9rem;
}

.p-promise__item + .p-promise__item {
	padding-top: 3rem;
	border-top: 1px solid var(--c-line);
}

.p-promise__no {
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 2.4rem;
	line-height: 1.2;
	color: rgba(0, 48, 112, .3);
}

.p-promise__name {
	margin-top: .8rem;
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .04em;
	color: var(--c-main);
}

.p-promise__text {
	margin-top: 3rem;
	font-size: 1.6rem;
	line-height: 2;
	color: var(--c-text);
}

.p-promise__photo,
.p-promise__photo-sub {
	position: absolute;
	overflow: hidden;
	border-radius: 1rem;
}

.p-promise__photo img,
.p-promise__photo-sub img { width: 100%; height: 100%; object-fit: cover; }

.p-promise__photo { left: 88.9rem; top: 11.1rem; width: 43.1rem; height: 72.4rem; }
.p-promise__photo-sub { left: 115rem; top: 92.5rem; width: 29rem; height: 20rem; }

/* =========================================================
   VISION
   ========================================================= */
.p-vision {
	position: relative;
	height: 49.3rem;
	overflow: hidden;
}

.p-vision__bg {
	position: absolute;
	inset: 0;
	background-image: url("../img/philosophy/vision-bg.jpg");
	background-size: cover;
	background-position: center;
}

.p-vision__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 10rem 12rem 0;
	text-align: center;
}

.p-vision__title {
	margin-top: 1.4rem;
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 4rem;
	color: #fff;
}

.p-vision__body {
	margin-top: 4rem;
	font-size: 1.6rem;
	line-height: 3.4rem;
	color: #fff;
}

.p-vision__body p + p { margin-top: 3.4rem; }

/* =========================================================
   VALUE
   ========================================================= */
.p-value {
	height: 112.5rem;
	background: var(--c-gray);
}

.p-value__inner {
	width: min(100%, 144rem);
	margin-inline: auto;
	padding: 12rem 12rem 0;
	text-align: center;
}

.p-value__title {
	margin-top: 1.4rem;
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 4rem;
	color: var(--c-main);
}

.p-value__grid {
	position: relative;
	width: 110.1rem;
	height: 73.2rem;
	margin: 7rem auto 0;
}

.p-valuecard {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 34.5rem;
	min-height: 34.6rem;
	padding: 2.8rem 2.6rem;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 1.8rem;
	overflow: hidden;
}

.p-valuecard:nth-child(1) { left: 0; top: 0; }
.p-valuecard:nth-child(2) { left: 37.8rem; top: 0; }
.p-valuecard:nth-child(3) { left: 75.6rem; top: 0; }
.p-valuecard:nth-child(4) { left: 20.4rem; top: 38.6rem; }
.p-valuecard:nth-child(5) { left: 58.2rem; top: 38.6rem; }

.p-valuecard__no {
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 2rem;
	line-height: 1.2;
	color: #155ea2;
}

.p-valuecard__icon { display: block; width: 8rem; height: 8rem; }
.p-valuecard__icon img { width: 100%; height: 100%; object-fit: contain; }

.p-valuecard__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
}

.p-valuecard__en {
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 3.2rem;
	line-height: 1.2;
	color: var(--c-main);
}

.p-valuecard__ja {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-text);
}

.p-valuecard__text {
	font-size: 1.6rem;
	line-height: 1.9;
	color: var(--c-text);
	text-align: left;
	width: 100%;
}

/* =========================================================
   OUTRO
   ========================================================= */
.p-outro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.2rem;
	padding: 15rem 14rem;
	background: #001128;
	text-align: center;
}

.p-outro__title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 4.8rem;
	line-height: 8rem;
	color: #fff;
}

.p-outro__body {
	font-size: 1.6rem;
	line-height: 2;
	color: #fff;
	opacity: .92;
}

/* フッターからのアンカーリンク用。固定ヘッダーに隠れないよう余白を取る */
.p-vision,
.p-value { scroll-margin-top: calc(var(--header-h) + 4rem); }

/* =========================================================
   SP（デザイン確定後に再調整する暫定レイアウト）
   ========================================================= */
@media screen and (max-width: 1023px) {
	.p-philosophy { padding-top: var(--header-h); }
	.p-philosophy__head { padding: 0 2.4rem; max-width: none; }

	/* MISSION（Figma SP: セクション746／Frame8424は上から80） */
	.p-mission { padding: 8rem 0 10rem; }
	.p-mission__inner { padding: 0 2.4rem; max-width: none; }
	.p-mission__dots--left { left: -8%; top: 6rem; width: 46%; height: auto; }
	.p-mission__dots--right { right: -12%; top: 8rem; width: 52%; height: auto; }
	.p-mission__dots img { height: auto; }
	.p-mission .c-sublabel { font-size: 2rem; line-height: 1.2; color: #8c8c8c; }
	.p-mission__title { margin-top: 2rem; font-size: 2.4rem; line-height: 1.5; }
	.p-mission__lead { margin-top: 3rem; font-size: 2rem; line-height: 1.5; font-weight: 700; color: var(--c-text); }
	.p-mission__body { margin-top: 3rem; font-size: 1.5rem; line-height: 2; }
	.p-mission__body p + p { margin-top: 3rem; }

	/* その「難しい」を、わたしたちが引き受ける。（Figma SP: 848／本文は上から100） */
	.p-accept { height: auto; border-radius: 4rem 4rem 0 0; padding-bottom: 19.6rem; }
	.p-accept__inner { padding: 10rem 2.4rem 0; max-width: none; }
	.p-accept__title { font-size: 2.4rem; line-height: 1.5; }
	.p-accept__body { margin-top: 3rem; font-size: 1.5rem; line-height: 2; opacity: 1; }
	.p-accept__body p + p { margin-top: 3rem; }
	.p-accept__glow { left: -10%; width: 120%; }

	.p-philosophy .p-imgloop { margin-top: -11.6rem; }
	.p-imgloop { height: 21.6rem; }
	.p-imgloop__group { height: 21.6rem; gap: 1.2rem; padding-right: 1.2rem; }
	.p-imgloop__item { width: 18rem; }
	.p-imgloop__item--tall { height: 21.6rem; }
	.p-imgloop__item--short { height: 13rem; }

	/* 3つの約束（Figma SP: 見出し2062／リスト2130） */
	.p-promise { padding: 9rem 0 0; }
	.p-promise__stage { height: auto; padding: 0 2.4rem; max-width: none; }
	.p-promise__title { position: static; font-size: 2.4rem; line-height: 1.583; }
	.p-promise__list { position: static; width: 100%; margin-top: 3rem; gap: 3rem; }
	.p-promise__item + .p-promise__item { padding-top: 3rem; }
	.p-promise__no { font-size: 2rem; }
	.p-promise__name { margin-top: .4rem; font-size: 2rem; line-height: 1.5; }
	.p-promise__text { margin-top: 2rem; font-size: 1.5rem; line-height: 2; }
	.p-promise__photo { position: relative; left: auto; top: auto; width: 100%; height: 34rem; margin-top: 5rem; }
	.p-promise__photo-sub { position: relative; left: auto; top: auto; width: 60%; height: 16rem; margin: 2rem 0 0 auto; }

	.p-vision { height: auto; }
	.p-vision__inner { padding: 7rem 2.4rem; max-width: 62rem; }
	.p-vision__title { font-size: 2.4rem; }
	.p-vision__body { margin-top: 3rem; font-size: 1.4rem; line-height: 2.2; }
	.p-vision__body p + p { margin-top: 2.2em; }

	.p-value { height: auto; }
	.p-value__inner { padding: 7rem 2.4rem; max-width: 62rem; }
	.p-value__title { font-size: 2.4rem; }
	.p-value__grid { display: flex; flex-direction: column; gap: 2rem; width: 100%; height: auto; margin-top: 4rem; }
	.p-valuecard { position: static; width: 100%; min-height: 0; }
	.p-valuecard:nth-child(n) { left: auto; top: auto; }

	.p-outro { padding: 8rem 2.4rem; }
	.p-outro__title { font-size: 2.3rem; line-height: 1.6; white-space: nowrap; }
	.p-outro__body { font-size: 1.4rem; }
}