@charset "UTF-8";
/* ==========================================================================
   私たちについて（page-about.php）
   ========================================================================== */

.page-about {
	--c-about-text: #474747;
	--c-about-tint: #eff6fa;
}

/* --------------------------------------------------------------------------
   ヒーロー〜企業理念（背景の三角装飾）
   -------------------------------------------------------------------------- */
.p-about-head {
	position: relative;
}

.p-about-head__deco {
	position: absolute;
	width: 405px;
	height: 405px;
	max-width: none;
	pointer-events: none;
}

/* 右上：ヒーロー直下から */
.p-about-head__deco--r {
	top: 410px;
	right: 0;
	transform: scaleY(-1);
}

/* 左下：企業理念ボックスの下にはみ出す */
.p-about-head__deco--l {
	bottom: 0;
	left: 0;
	transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   企業理念
   -------------------------------------------------------------------------- */
.p-about-philosophy {
	position: relative;
	padding: 92px 0 140px;
}

.p-about-philosophy__box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding: 80px 50px;
	background: var(--c-white);
}

.p-about-philosophy__heading {
	flex-shrink: 0;
}

.p-about-philosophy__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 632px;
	max-width: 100%;
}

.p-about-philosophy__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0 10px;
	border-bottom: 1px solid #e6e6e6;
	line-height: 35px;
	letter-spacing: 0;
}

.p-about-philosophy__num {
	flex-shrink: 0;
	color: var(--c-blue);
	font-family: var(--ff-roboto);
	font-size: 24px;
	font-weight: 300;
}

.p-about-philosophy__text {
	color: var(--c-about-text);
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   キートの想い・原点
   -------------------------------------------------------------------------- */
.p-about-story {
	padding: 120px 0 124px;
}

.p-about-story__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.p-about-story__side {
	flex-shrink: 0;
}

.p-about-story__logo {
	width: 375px;
	margin-top: 80px;
}

.p-about-story__logo img {
	width: 100%;
}

.p-about-story__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 632px;
	max-width: 100%;
}

.p-about-story__title {
	color: var(--c-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: 0;
}

.p-about-story__text {
	color: var(--c-about-text);
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

.p-about-story__text p {
	text-indent: 1em;
}

.p-about-story__text .p-about-story__last {
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
   オフィス帯 + 代表メッセージ / キートの強み（淡いブルー背景）
   -------------------------------------------------------------------------- */
.p-about-office {
	height: 500px;
	overflow: hidden;
}

.p-about-office img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-about-tint {
	background: var(--c-about-tint);
}

.p-about-message {
	position: relative;
	z-index: 1;
	margin-top: -120px;
}

.p-about-message__box {
	padding: 100px 80px;
	background: var(--c-white);
}

.p-about-message__content {
	display: flex;
	align-items: flex-start;
	gap: 70px;
	margin-top: 60px;
}

.p-about-message__photo {
	flex-shrink: 0;
	width: 342px;
}

.p-about-message__photo img {
	width: 100%;
}

.p-about-message__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.p-about-message__title {
	color: var(--c-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: 0;
}

.p-about-message__text {
	color: var(--c-about-text);
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

.p-about-message__name {
	color: var(--c-about-text);
	font-size: 18px;
	line-height: 35px;
	letter-spacing: 0;
	text-align: right;
}

/* キートの強み */
.p-about-strengths {
	padding: 120px 0 150px;
}

.p-about-strengths__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 530px));
	justify-content: space-between;
	align-items: start;
	gap: 47px 40px;
	margin-top: 60px;
}

/* 左右互い違い（右列を120px下げる） */
.p-about-strengths__item:nth-child(2) {
	margin-top: 120px;
}

.p-about-strengths__item:nth-child(3) {
	margin-top: -120px;
}

.p-about-strengths__item {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 40px 30px;
	border-radius: 20px;
	background: var(--c-white);
}

.p-about-strengths__img {
	width: 100%;
	aspect-ratio: 470 / 300;
	object-fit: cover;
}

.p-about-strengths__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid #ffb3cb;
}

.p-about-strengths__num {
	flex-shrink: 0;
	color: var(--c-blue);
	font-family: var(--ff-roboto);
	font-size: 32px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 0;
}

.p-about-strengths__title {
	flex: 1;
	min-width: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.p-about-strengths__text {
	margin-top: 2px;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   SDGs・取り組み
   -------------------------------------------------------------------------- */
.p-about-sdgs {
	padding: 150px 0 200px;
}

.p-about-sdgs__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.p-about-sdgs__inner > .c-subheading {
	flex-shrink: 0;
}

.p-about-sdgs__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 683px;
	max-width: 100%;
	margin-right: -50px;
}

.p-about-sdgs__block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 40px;
	border-bottom: 1px solid #d9d9d9;
}

.p-about-sdgs__block:last-child,
.p-about-sdgs__block:nth-last-child(2) {
	border-bottom: 0;
}

.p-about-sdgs__title {
	color: var(--c-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: 0;
}

.p-about-sdgs__items {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 30px;
	color: var(--c-about-text);
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

.p-about-sdgs__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.p-about-sdgs__more {
	margin-top: -30px;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

.p-about-sdgs__more a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--c-blue);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity 0.3s;
}

.p-about-sdgs__more a:hover {
	opacity: 0.7;
}

.p-about-sdgs__more img {
	width: 10px;
	height: 10px;
}

.p-about-sdgs__bullet {
	flex-shrink: 0;
	background: linear-gradient(-69.27deg, #ffb3cb 8.33%, #7bddff 88.7%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
	.p-about-sdgs__list {
		margin-right: 0;
	}
}

@media (max-width: 1180px) {
	.p-about-message__box {
		padding: 80px 50px;
	}

	.p-about-message__content {
		gap: 48px;
	}

	.p-about-message__photo {
		width: 300px;
	}

	.p-about-strengths__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

@media (max-width: 1024px) {
	.p-about-head__deco {
		width: 300px;
		height: 300px;
	}

	.p-about-philosophy__box {
		flex-direction: column;
		gap: 32px;
		padding: 60px 40px;
	}

	.p-about-philosophy__list {
		width: 100%;
	}

	.p-about-story__inner {
		flex-direction: column;
		gap: 40px;
	}

	.p-about-story__side {
		width: 100%;
	}

	.p-about-story__logo {
		width: 300px;
		margin: 48px auto 0;
	}

	.p-about-story__body {
		width: 100%;
	}

	.p-about-office {
		height: 360px;
	}

	.p-about-message__content {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.p-about-message__body {
		width: 100%;
	}

	.p-about-sdgs {
		padding: 120px 0 160px;
	}

	.p-about-sdgs__inner {
		flex-direction: column;
	}

	.p-about-sdgs__list {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.p-about-head__deco {
		width: 180px;
		height: 180px;
	}

	.p-about-head__deco--r {
		top: 260px;
	}

	.p-about-philosophy {
		padding: 48px 0 80px;
	}

	.p-about-philosophy__box {
		gap: 24px;
		padding: 40px 20px;
	}

	.p-about-philosophy__list {
		gap: 8px;
	}

	.p-about-philosophy__item {
		gap: 12px;
		padding: 14px 0 10px;
		line-height: 1.6;
	}

	.p-about-philosophy__num {
		font-size: 20px;
		line-height: 1.4;
	}

	.p-about-philosophy__text {
		font-size: 16px;
	}

	.p-about-story {
		padding: 72px 0 80px;
	}

	.p-about-story__logo {
		width: 220px;
		margin-top: 32px;
	}

	.p-about-story__body {
		gap: 20px;
	}

	.p-about-story__title,
	.p-about-message__title,
	.p-about-sdgs__title {
		font-size: 20px;
		line-height: 1.5;
	}

	.p-about-story__text,
	.p-about-message__text,
	.p-about-sdgs__items,
	.p-about-strengths__text {
		font-size: 14px;
		line-height: 1.9;
	}

	.p-about-story__text .p-about-story__last {
		margin-top: 1.9em;
	}

	.p-about-office {
		height: 220px;
	}

	.p-about-message {
		margin-top: -60px;
	}

	.p-about-message__box {
		padding: 56px 20px;
	}

	.p-about-message__content {
		gap: 28px;
		margin-top: 36px;
	}

	.p-about-message__photo {
		width: min(260px, 80%);
	}

	.p-about-message__body {
		gap: 20px;
	}

	.p-about-message__name {
		font-size: 16px;
		line-height: 1.8;
	}

	.p-about-strengths {
		padding: 80px 0 90px;
	}

	.p-about-strengths__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 36px;
	}

	.p-about-strengths__item:nth-child(2),
	.p-about-strengths__item:nth-child(3) {
		margin-top: 0;
	}

	.p-about-strengths__item {
		gap: 14px;
		padding: 24px 20px;
		border-radius: 16px;
	}

	.p-about-strengths__num {
		font-size: 26px;
		line-height: 1.3;
	}

	.p-about-strengths__title {
		font-size: 18px;
		line-height: 1.5;
	}

	.p-about-sdgs {
		padding: 80px 0 100px;
	}

	.p-about-sdgs__inner {
		gap: 32px;
	}

	.p-about-sdgs__list {
		gap: 28px;
	}

	.p-about-sdgs__block {
		gap: 14px;
		padding-bottom: 28px;
	}

	.p-about-sdgs__items {
		flex-direction: column;
		gap: 4px;
	}
}