/* =========================================================
   Company（会社情報）ページ
   見出しは共通の .fp-head*（style.css）を使用
   ========================================================= */

.company-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.company-section {
	padding: 80px 24px; /* 左右24px：TOP（.fp-section）と統一 */
}

/* 会社情報ページの英語見出し（TOPの72pxより小さい56px指定。下余白24pxは共通値のまま） */
.company .fp-head__en {
	font-size: 56px;
	letter-spacing: 3.36px;
	text-transform: capitalize;
}

/* ===================== Vision ===================== */
.company-vision {
	background: #F1F7FF; /* 全幅の薄ブルー背景 */
	padding-top: 96px;
	padding-bottom: 107px;
}

.company-message {
	background: #fff;
	padding-top: 88px;
	padding-bottom: 88px;
}

.company-profile {
	background: #F7FAFC;
}

.company-vision__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: center;
}

.company-vision__head {
	margin-bottom: 0;
}

.company-vision__text {
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 51px;
	letter-spacing: 1.12px;
}

/* ===================== Message ===================== */
.company-message__inner {
	display: grid;
	grid-template-columns: 1fr 32.92%; /* 写真列=395px ÷ 親1200px */
	gap: 72px;
	align-items: start;
}

/* gridアイテムのmin-width:autoによる横はみ出し（＝折り返されない）を防ぐ */
.company-message__body {
	min-width: 0;
}

.company-message__text {
	max-width: 680px; /* テキスト行長を少し短く */
	margin: 8px 0 28px;
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 2;
}

.company-message__sign {
	text-align: right;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 31px;
}

.company-message__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 49 / 65; /* 395:524。幅が%で伸縮しても縦横比を維持 */
	object-fit: cover;
	border-radius: 8px;
}

/* ===================== Company（会社概要） ===================== */
.company-profile__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 56px;
	align-items: start;
}

.company-profile__table {
	margin: 0;
	background: #FFF;
	border-radius: 24px;
	border: 1px solid #E6ECF2;
	padding: 8.6%; /* 64px ÷ カード幅744px（1100−300−gap56）。上下左右とも幅基準の%で64px相当 */
	box-shadow: 0 2px 28px 0 rgba(23, 32, 51, 0.07);
}

.company-profile__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid #A0B7CF;
}

.company-profile__row:last-child {
	border-bottom: none;
}

.company-profile__label {
	margin: 0;
	color: #172033;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.company-profile__value {
	margin: 0;
	color: #4B5563;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}

/* ===================== Responsive ===================== */
@media (max-width: 860px) {
	.company-vision__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.company-vision__text {
		font-size: 18px;
		line-height: 1.9; /* 固定51pxだとSPで行間が開きすぎるため比率指定に */
	}
	.company-message__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.company-message__photo {
		order: -1; /* SPは写真を上に */
		max-width: 360px;
	}
	.company-profile__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.company-profile__table {
		padding: 8px 24px;
	}
}

@media (max-width: 600px) {
	.company-section {
		padding: 56px 20px;
	}
	.company-vision__text br {
		display: none;
	}
	.company-profile__row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 16px 0;
	}
}

/* 左右gutterはTOP（.fp-section）と同じく768px以下で20pxへ */
@media (max-width: 768px) {
	.company-section {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* .company .fp-head__en（詳細度2）が共通のSP用34pxを上書きしてしまうため、ここで明示的に縮小 */
	.company .fp-head__en {
		font-size: 34px;
	}
}