@charset "UTF-8";
/* ==========================================================================
   04_Philosophy（私たちの理念）
   Figma: 1440x10015 / node 2026:1294

   数値はすべて Figma のテキストボックス座標から起こしている。
   Lightning が p / h3 / h4 に line-height と margin を直接当てているため、
   継承ではなく要素セレクタで打ち消す必要がある点に注意（06_Group と同じ罠）。
   ========================================================================== */

.kro-philosophy {
	/* Figma のテキストは x130 始まり。コンテナ（x128）との差はグリフの
	   サイドベアリングに吸収されるので、あえて padding は足さない。 */
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */
.kro-t-red {
	color: var(--kro-red);
}

/* 赤の細い罫線。Figma: 幅69 / 幅123、太さ1px、#E60012 */
.kro-rule {
	display: block;
	width: 69px;
	height: 1px;
	background-color: var(--kro-red);
}

.kro-rule--wide {
	width: 123px;
}

/* 見出し（32px Bold 160%） */
.kro-philosophy .kro-psec__h3 {
	margin: 61px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

/* 小見出し（24px Bold 160%） */
.kro-philosophy .kro-psec__h4 {
	margin: 0;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

/* リード本文（20px Bold 200%）。段落間は1行ぶん（40px）。 */
.kro-psec__lead-body p {
	margin: 0;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
	color: #000;
}

.kro-psec__lead-body p + p {
	margin-top: 40px;
}

/* 補足本文（16px Regular 180%）。段落間は1行ぶん（28.8px）。 */
.kro-philosophy .kro-psec__note {
	margin: 0;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

.kro-philosophy .kro-psec__note + .kro-psec__note {
	margin-top: 28.8px;
}

/* Figma のマスク（画像を切り抜いた位置）を CSS で再現するための共通の器。
   --iw / --ih は器に対する画像の表示サイズ、--il / --it は食い込み量。 */
.kro-fig {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Lightning の img { max-width:100% } が効くと器の幅で頭打ちになり、
   マスクからはみ出させる前提の指定が壊れるので明示的に解除する。 */
.kro-fig img {
	position: absolute;
	top: var(--it, 0);
	left: var(--il, 0);
	width: var(--iw, 100%);
	max-width: none;
	height: var(--ih, 100%);
	object-fit: cover;
}

/* ==========================================================================
   社名の由来 / Our Name
   ========================================================================== */
.kro-psec--name {
	/* パンくず下端 y437.4 → 欧文ラベル y537 */
	padding-top: 99.6px;
}

.kro-psec--name .kro-psec__lead-body {
	/* 見出し下端 y737.2 → 本文 y789 */
	margin-top: 51.8px;
}

/* ベン図。Figma: x292 y1069 w857 h653（フレーム中央に対して左右対称） */
.kro-venn {
	width: 857px;
	max-width: 100%;
	margin: 0 auto;
}

.kro-venn img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   理念 / Mission
   ========================================================================== */
.kro-psec--mission {
	/* ベン図下端 y1722 → 欧文ラベル y1840 */
	padding-top: 118px;
}

/* 手書き文字＋赤い下線。下線は文字に重なるので絶対配置。 */
.kro-hand {
	position: relative;
	margin-left: 6px;
}

/* 赤線と文字は交差するので、必ず文字を手前に置く。 */
.kro-hand__text {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

.kro-hand__rule {
	position: absolute;
	z-index: 0;
	display: block;
	height: auto;
}

/* 全ての人に、最幸のQOLを：文字 x134 y1976 563x54 / 下線 x137 y2033 566x44 */
.kro-hand--qol {
	/* 和文見出し下端 y1928 → 文字 y1976 */
	margin-top: 48px;
	width: 563px;
}

.kro-hand--qol .kro-hand__rule {
	top: 57px;
	left: 3px;
	width: 566px;
}

/* 新しいANSINを、創る：文字 x134 y3117 461x49 / 下線 x239 y3173 215x32 */
.kro-hand--ansin {
	/* 和文見出し下端 y3073 → 文字 y3117 */
	margin-top: 44px;
	width: 461px;
}

.kro-hand--ansin .kro-hand__rule {
	top: 56px;
	left: 105px;
	width: 215px;
}

/* 手書き文字のすぐ下に来る 32px 見出し */
.kro-philosophy .kro-psec__h3--afterhand {
	/* 手書きボックス下端（=文字の高さ）から見出しボックス上端まで */
	margin-top: 66px;
}

.kro-psec--mission .kro-psec__lead-body {
	/* 見出し下端 y2198.4 → 本文 y2245 */
	margin-top: 46.6px;
}

/* 写真の帯。Figma が 300px の写真を 1440 フレームからはみ出す長さで並べているのは
   横に流れる帯の表現。1440 で 300px 角になる 20.8333vw をそのまま使い、
   窓（100vw）からはみ出したぶんを隠して左方向に流す。 */
.kro-strip {
	position: relative;
	/* 本文下端 y2485 → 写真上端 y2565 */
	margin-top: 80px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* Figma の 300px を保つ。崩すと以降のセクションが縦にずれる。 */
	height: 20.8333vw;
	overflow: hidden;
}

/* 写真10枚＝208.3vw の帯。窓より長ければ、2本を半周期ずらすだけで
   常にどちらかが窓を埋めるので継ぎ目が出ない（TOP の理念セクションと同じ仕組み）。 */
.kro-strip__track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	height: 100%;
	animation: kro-strip-x 60s linear infinite;
}

.kro-strip__track:nth-child(2) {
	animation-delay: -30s;
}

.kro-strip__track img {
	flex: 0 0 20.8333vw;
	width: 20.8333vw;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

@keyframes kro-strip-x {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kro-strip__track {
		animation: none;
	}

	.kro-strip__track:nth-child(2) {
		display: none;
	}
}

/* ==========================================================================
   ビジョン / Vision
   ========================================================================== */
.kro-psec--vision {
	/* 写真帯下端 y2865 → 欧文ラベル y2985 */
	padding-top: 120px;
}

/* 見出しの右に薄い "Ansin" のレタリングが重なる */
.kro-vision__top {
	position: relative;
	/* 手書き文字（高さ49）下端 y3166 → 見出し y3241 */
	margin-top: 75px;
}

.kro-philosophy .kro-vision__top .kro-psec__h3--afterhand {
	position: relative;
	z-index: 1;
	margin-top: 0;
}

/* z-index:-1 だと祖先の白背景の裏に回って消えるので、
   レタリングは 0、重なる本文側を 1 にして前後関係を作る。 */
.kro-vision__mark {
	position: absolute;
	top: -25px;
	left: 581px;
	z-index: 0;
	width: 586px;
	height: auto;
}

.kro-psec--vision .kro-psec__lead-body {
	position: relative;
	z-index: 1;
	/* 見出し下端 y3343.4 → 本文 y3403 */
	margin-top: 59.6px;
}

.kro-philosophy .kro-psec__h3--promise {
	/* 本文下端 y3603 → 見出し y3751 */
	margin-top: 148px;
}

.kro-psec__lead-body--single {
	/* 見出し下端 y3853.4 → 本文 y3913 */
	margin-top: 59.6px;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
	color: #000;
}

/* --------------------------------------------------------------------------
   3つの約束
   -------------------------------------------------------------------------- */
.kro-promise {
	display: grid;
	/* 写真372 + 間隔33 + 本文776 = 1181（Figma実測） */
	grid-template-columns: 372px 1fr;
	column-gap: 33px;
	align-items: start;
}

.kro-promise--1 {
	/* リード下端 y3953 → 写真上端 y4054 */
	margin-top: 101px;
}

.kro-promise--2 {
	/* 1枚目の写真下端 y4426 → 2枚目 y4530 */
	margin-top: 104px;
}

.kro-promise--3 {
	/* 2枚目の写真下端 y4902 → 3枚目 y5033 */
	margin-top: 131px;
}

/* 2枚目だけ写真が右、本文が左。列幅も入れ替えないと本文が 372px に潰れる。 */
.kro-promise--2 {
	grid-template-columns: 1fr 372px;
}

.kro-promise--2 .kro-promise__photo {
	order: 2;
}

.kro-promise--2 .kro-promise__text {
	order: 1;
}

.kro-promise__photo {
	position: relative;
	margin: 0;
	/* 番号とスクリプト体ラベルが上にはみ出す */
	overflow: visible;
}

.kro-promise__circle {
	width: 372px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

/* 写真の背後に敷く水色のぼかし円。Figma: 337px の放射グラデーション */
/* 2026-09-25：装飾を絞る方針（指示16）で、円の後ろの青いぼかしは表示しない。
   位置指定などは戻すときのために残してある。 */
.kro-promise__glow {
	display: none;
	position: absolute;
	/* z-index:-1 だと祖先の白背景の裏に隠れてしまう。0 にしておけば
	   同じ階層の写真・番号・ラベルが DOM 順で上に重なる。 */
	z-index: 0;
	width: 337px;
	height: 337px;
	border-radius: 50%;
	/* Figma はレイヤーぼかし付き。実測した放射方向の色プロファイルを
	   多段ストップで写し取り、外周に硬いフチが出ないようにしている。 */
	background-image: radial-gradient(
		circle closest-side at 50% 50%,
		#9dc5ff 0%,
		#a4d2ff 36%,
		#acdfff 48%,
		#b4ecff 60%,
		#bdfbff 71%,
		rgba(189, 251, 255, 0.56) 83%,
		rgba(189, 251, 255, 0.23) 95%,
		rgba(189, 251, 255, 0) 100%
	);
}

.kro-promise--1 .kro-promise__glow {
	top: 186px;
	left: 179px;
}

.kro-promise--2 .kro-promise__glow {
	top: 186px;
	left: -151px;
}

.kro-promise--3 .kro-promise__glow {
	top: 175px;
	left: 179px;
}

.kro-promise__num,
.kro-promise__label {
	position: absolute;
	top: var(--dy);
	left: var(--dx);
	height: auto;
}

/* 写真の背後のぼかし円より前に出す。Figma のテキストボックスは 776px 固定で、
   本文の折り返し位置がこの幅で決まっている。 */
.kro-promise__text {
	position: relative;
	z-index: 1;
	max-width: 776px;
}

.kro-promise__title {
	margin: 0;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-promise__text .kro-rule {
	/* 見出し下端 → 罫線 */
	margin-top: 17.6px;
}

.kro-philosophy .kro-promise__lead {
	margin: 11px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--kro-navy);
}

.kro-philosophy .kro-promise__body {
	margin: 20px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

/* 本文カラムの開始位置は Figma 上で 44 / 62 / 61px とばらついている
   （デザイン側の手置き）。1pxまで合わせるためブロックごとに指定する。 */
.kro-promise--1 .kro-promise__text {
	padding-top: 44px;
}

.kro-promise--2 .kro-promise__text {
	padding-top: 62px;
}

.kro-promise--3 .kro-promise__text {
	padding-top: 61px;
}

/* 3枚目だけ罫線が5px上、リードと本文が下にずれている（同じくデザイン側の揺れ） */
.kro-promise--3 .kro-rule {
	margin-top: 12.6px;
}

.kro-philosophy .kro-promise--3 .kro-promise__lead {
	margin-top: 26px;
}

.kro-philosophy .kro-promise--3 .kro-promise__body {
	margin-top: 32px;
}

/* ==========================================================================
   行動指針 / Values
   ========================================================================== */
.kro-psec--values {
	/* 3枚目の写真下端 y5405 → 欧文ラベル y5681 */
	padding-top: 276px;
}

.kro-values {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Figma: 575 + 32 + 575 = 1182 */
	column-gap: 32px;
	/* 見出し下端 y5881.2 → カード上端 y5941 */
	margin-top: 59.8px;
}

.kro-values__card {
	position: relative;
	height: 500px;
	text-align: center;
	/* 装飾を絞る方針でグラデーションをやめ、平らな淡い面にした（2026-09-25 指示16）。
	   元は Figma の 左上#98BEFF → 中央#BDFBFF → 右下 透明 のグラデーション。 */
	background-color: #eef4f9;
}

.kro-philosophy .kro-values__en {
	margin: 0;
	padding-top: 60px;
	font-family: var(--kro-font-en);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-values__card .kro-rule {
	margin: 17px auto 0;
}

.kro-philosophy .kro-values__ja {
	margin: 26px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-values__icon {
	display: block;
	/* Figma のアイコンはカード中央より 8px 右に置かれている */
	margin: 11.6px auto 0;
	transform: translateX(var(--dx, 8px));
	height: auto;
}

.kro-philosophy .kro-values__caption {
	margin: 21px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

/* ==========================================================================
   コンセプト / Concept
   ========================================================================== */
.kro-psec--concept {
	/* カード下端 y6441 → 欧文ラベル y6571 */
	padding-top: 130px;
}

.kro-concept {
	display: grid;
	/* Figma: 本文575 + 間隔30 + 写真577 = 1182（コンテナ1184に対し2px余る） */
	grid-template-columns: 575px 577px;
	justify-content: space-between;
	align-items: start;
}

.kro-concept__text {
	/* 見出し下端 y6771.2 → 小見出し y6801 */
	padding-top: 29.8px;
}

.kro-concept__text .kro-rule {
	/* 小見出し下端 y6839.4 → 罫線 y6852 */
	margin-top: 12.6px;
}

.kro-philosophy .kro-concept__text .kro-psec__note {
	/* 罫線 y6852 → 本文 y6892 */
	margin-top: 39px;
}

.kro-philosophy .kro-concept__text .kro-psec__note + .kro-psec__note {
	margin-top: 28.8px;
}

.kro-concept__photo {
	/* 写真は見出しに 41.2px 食い込んで置かれている（Figma: y6730） */
	margin: -41.2px 0 0;
	aspect-ratio: 577 / 385;
}

/* ==========================================================================
   組織の考え方 / Policy
   ========================================================================== */
.kro-psec--policy {
	/* コンセプト写真下端 y7115 → 欧文ラベル y7235 */
	padding-top: 120px;
}

.kro-philosophy .kro-psec__h4--policy {
	/* 見出し下端 y7435.2 → 小見出し y7465 */
	margin-top: 29.8px;
}

.kro-rule--policy {
	/* 小見出し下端 y7503.4 → 罫線 y7516 */
	margin-top: 12.6px;
}

.kro-chain {
	display: grid;
	grid-template-columns: repeat(4, 210px);
	justify-content: space-between;
	/* 円を274→210pxにしたとき、コンテナ(1184px)いっぱいに散らすと隙間が114pxになり
	   間延びした。元のデザインの比率（円274 : 隙間29）に合わせて全体幅を絞る。 */
	max-width: 930px;
	/* 罫線 y7517 → 円 y7576 */
	margin: 48px auto 0;
}

.kro-chain__item {
	position: relative;
	width: 210px;
	height: 210px;
	border: 1px solid #78aeff;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
}

.kro-philosophy .kro-chain__num {
	position: absolute;
	/* 見出し「経営」の左上。中央の大きな数字は見出しと重なって読めなかった。 */
	top: 40px;
	left: 50%;
	right: auto;
	margin: 0 0 0 -60px;
	font-family: var(--kro-font-en);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: #98beff;
}

.kro-philosophy .kro-chain__ja {
	position: absolute;
	top: 44px;
	left: 0;
	right: 0;
	margin: 0;
	font-family: var(--kro-font-ja);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-chain__item .kro-rule {
	position: absolute;
	top: 80px;
	left: 50%;
	width: 88px;
	margin-left: -44px;
}

.kro-chain__icon {
	position: absolute;
	top: 96px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: 46px;
}

.kro-philosophy .kro-chain__caption {
	position: absolute;
	top: 152px;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0 18px;
	font-family: var(--kro-font-ja);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: #000;
}

/* 円と円のあいだの三角。Figma: 23x48 / #00508E */
.kro-chain__arrow {
	position: absolute;
	top: 88px;
	left: 100%;
	/* 隙間30pxの中央に置く */
	margin-left: 7px;
	width: 0;
	height: 0;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 16px solid var(--kro-navy);
}

.kro-philosophy .kro-policy__close {
	/* 円の下端 y7851 → 本文 y7911 */
	margin: 60px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
	text-align: center;
}

.kro-philosophy .kro-policy__punch {
	/* 本文下端 y7987.8 → 結び y8023 */
	margin: 35.2px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--kro-red);
	text-align: center;
}

/* ==========================================================================
   代表メッセージ / Message
   ========================================================================== */
.kro-psec--message {
	/* 結び下端 y8074.2 → 欧文ラベル y8234 */
	padding-top: 159.8px;
	/* 本文下端 y8903.8 → フッター上端 y9104 */
	padding-bottom: 200.2px;
}

.kro-message {
	display: grid;
	grid-template-columns: 575px 577px;
	justify-content: space-between;
	align-items: start;
	/* 和文見出し下端 y8322 → 本文・写真 y8393 */
	margin-top: 71px;
}

.kro-message__side {
	text-align: center;
}

.kro-message__photo {
	margin: 0;
	aspect-ratio: 577 / 385;
}

.kro-philosophy .kro-message__role {
	/* 写真下端 y8778 → 役職 y8798 */
	margin: 21px 0 0;
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--kro-navy);
}

.kro-philosophy .kro-message__name {
	/* 役職ボックス下端 y8826.8 → 氏名 y8820 */
	margin: -7.8px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

.kro-message__en {
	/* Figma: 和名の右 18px、24px Roboto。ベースラインで揃う。 */
	margin-left: 18px;
	font-family: var(--kro-font-en);
	font-size: 24px;
	font-weight: 400;
}

.kro-philosophy .kro-message__org {
	/* 氏名ボックス下端 y8877.6 → 所属 y8875 */
	margin: -2.6px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

/* ==========================================================================
   タブレット（コンテナが縮み始める幅）
   ========================================================================== */
@media (max-width: 1215px) {
	.kro-venn {
		width: 100%;
	}

	/* 586px 固定のままだと器が縮んだとき右端に張り付くので、
	   Figma の比率（コンテナ幅に対して左 49.07% / 幅 49.49%）で追従させる。 */
	.kro-vision__mark {
		left: 49.07%;
		width: 49.49%;
	}

	.kro-promise {
		grid-template-columns: 300px 1fr;
		column-gap: 28px;
	}

	/* 2枚目は写真が右。列幅も入れ替えないと本文が写真幅（300px）に潰れる。 */
	.kro-promise--2 {
		grid-template-columns: 1fr 300px;
	}

	.kro-promise__circle {
		width: 300px;
	}

	/* 写真が 372→300px に縮むので、ぼかし円も同じ 0.8065 倍で追従させる。
	   337px のままだと写真から大きくはみ出して別の丸に見えてしまう。 */
	.kro-promise__glow {
		width: 272px;
		height: 272px;
	}

	.kro-promise--1 .kro-promise__glow,
	.kro-promise--2 .kro-promise__glow {
		top: 150px;
	}

	.kro-promise--3 .kro-promise__glow {
		top: 141px;
	}

	.kro-promise--1 .kro-promise__glow,
	.kro-promise--3 .kro-promise__glow {
		left: 144px;
	}

	.kro-promise--2 .kro-promise__glow {
		left: -122px;
	}

	/* 番号とスクリプト体ラベルも写真と同率で縮める。等倍のままだと
	   2枚目の "For Our Staff" が器からはみ出して画面外で切れる。 */
	.kro-promise__num,
	.kro-promise__label {
		top: calc(var(--dy) * 0.8065);
		left: calc(var(--dx) * 0.8065);
		transform: scale(0.8065);
		transform-origin: left top;
	}

	.kro-concept,
	.kro-message {
		grid-template-columns: 1fr 1fr;
		column-gap: 28px;
	}

	/* 写真の列が左に寄る分、見出しへの −41.2px の食い込みを外さないと
	   「新しい働き方と、高収益を両立する」の末尾に写真が重なる。 */
	.kro-concept__photo {
		margin-top: 0;
	}

	.kro-chain {
		/* 幅は基本指定（max-width:930px）のまま中央に置く */
		column-gap: 0;
	}

	.kro-chain__item {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
	}

	.kro-chain__arrow {
		margin-left: 3px;
	}
}

/* --------------------------------------------------------------------------
   円は 210px。4列 = 210×4 + 矢印が入らなくなる幅から 2列に折り返す。
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.kro-chain {
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		gap: 40px 56px;
		margin-top: 40px;
	}

	.kro-chain__item {
		width: 210px;
		max-width: 100%;
	}

	/* 1段目の右端に置く矢印は行末なので消す。 */
	.kro-chain__item:nth-child(2) .kro-chain__arrow {
		display: none;
	}
}

/* ==========================================================================
   タブレット縦〜大きめスマホ
   ========================================================================== */
@media (max-width: 900px) {
	.kro-philosophy .kro-psec__h3 {
		margin-top: 40px;
		font-size: 26px;
	}

	.kro-philosophy .kro-psec__h4 {
		font-size: 20px;
	}

	.kro-psec__lead-body p,
	.kro-psec__lead-body--single {
		font-size: 17px;
		line-height: 1.9;
	}

	.kro-psec__lead-body p + p {
		margin-top: 32px;
	}

	.kro-psec--name {
		padding-top: 56px;
	}

	.kro-psec--mission,
	.kro-psec--vision,
	.kro-psec--values,
	.kro-psec--concept,
	.kro-psec--policy {
		padding-top: 80px;
	}

	.kro-psec--message {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.kro-hand {
		margin-left: 0;
		width: 100%;
		max-width: 563px;
	}

	.kro-hand--qol,
	.kro-hand--ansin {
		margin-top: 32px;
	}

	/* 下線は文字幅に対する比率で置き直す。top は文字画像の高さに対する比率なので、
	   PC の「文字下端から 3px / 7px 下」がどの幅でも同じ比率で保たれ、文字に重ならない。 */
	.kro-hand--qol .kro-hand__rule {
		/* 57 / 54 */
		top: 105.556%;
		left: 0.5%;
		width: 100.5%;
	}

	.kro-hand--ansin .kro-hand__rule {
		/* 56 / 49 */
		top: 114.286%;
		left: 22.8%;
		width: 46.6%;
	}

	.kro-philosophy .kro-psec__h3--afterhand {
		margin-top: 48px;
	}

	.kro-vision__top {
		margin-top: 48px;
	}

	/* 幅はコンテナ比（1215px 以下の指定）で追従するが、top の -25px だけは
	   PC 固定値なので縮むと相対的に浮きすぎる。transform の % は自分の高さ基準に
	   解決されるので、PC の「自身の高さの 12.7% ぶん上」をどの幅でも保てる。 */
	.kro-vision__mark {
		top: 0;
		transform: translateY(-12.69%);
	}

	.kro-philosophy .kro-psec__h3--promise {
		margin-top: 72px;
	}

	.kro-psec--vision .kro-psec__lead-body,
	.kro-psec--name .kro-psec__lead-body,
	.kro-psec--mission .kro-psec__lead-body,
	.kro-psec__lead-body--single {
		margin-top: 32px;
	}

	/* 約束は写真を上、本文を下に積む */
	.kro-promise {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.kro-promise--1,
	.kro-promise--2,
	.kro-promise--3 {
		margin-top: 72px;
	}

	.kro-promise--2 .kro-promise__photo {
		order: 0;
	}

	.kro-promise--2 .kro-promise__text {
		order: 0;
	}

	.kro-promise--1 .kro-promise__text,
	.kro-promise--2 .kro-promise__text,
	.kro-promise--3 .kro-promise__text {
		padding-top: 0;
	}

	.kro-promise__photo {
		display: flex;
		justify-content: center;
		/* ぼかし円を写真サイズの比率で置くための基準 */
		--kro-circle: 280px;
	}

	.kro-promise__circle {
		width: var(--kro-circle);
	}

	/* 写真が中央寄せになるので、PC の「写真の左端から◯px」を
	   「中央から◯px」に置き直す。倍率は Figma の PC 値（写真 372px）に対する比。
	   画面外へのはみ出しは .kro-philosophy の overflow-x:hidden が受ける。 */
	.kro-promise__glow {
		/* 337 / 372 */
		width: calc(var(--kro-circle) * 0.9059);
		height: calc(var(--kro-circle) * 0.9059);
	}

	.kro-promise--1 .kro-promise__glow,
	.kro-promise--2 .kro-promise__glow {
		/* 186 / 372 */
		top: calc(var(--kro-circle) * 0.5);
	}

	.kro-promise--3 .kro-promise__glow {
		/* 175 / 372 */
		top: calc(var(--kro-circle) * 0.4704);
	}

	.kro-promise--1 .kro-promise__glow,
	.kro-promise--3 .kro-promise__glow {
		/* 写真左端 (50% - c/2) から +179/372 */
		left: calc(50% - var(--kro-circle) * 0.0188);
	}

	.kro-promise--2 .kro-promise__glow {
		/* 写真左端 (50% - c/2) から -151/372 */
		left: calc(50% - var(--kro-circle) * 0.9059);
	}

	/* 積み上げレイアウトでは写真が中央寄せになるので、1215px 用の
	   縮小指定を解除して中央基準で置き直す。 */
	.kro-promise__num,
	.kro-promise__label {
		top: var(--dy);
		transform: none;
	}

	.kro-promise__num {
		left: 50%;
		margin-left: -140px;
	}

	.kro-promise__label {
		left: 50%;
		margin-left: -40px;
	}

	.kro-philosophy .kro-promise__lead {
		font-size: 18px;
	}

	.kro-values {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	/* 1列になるとキャプションが左寄せになり、内側の余白が無いと枠に張り付く。
	   SPデザインの左右余白と同じ 20px を内側に持たせる。 */
	.kro-values__card {
		height: auto;
		padding: 0 20px 48px;
	}

	.kro-philosophy .kro-values__en {
		padding-top: 40px;
		font-size: 32px;
	}

	.kro-concept,
	.kro-message {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.kro-concept__text {
		padding-top: 24px;
		order: 2;
	}

	.kro-concept__photo {
		margin-top: 24px;
		order: 1;
	}

	.kro-philosophy .kro-policy__close {
		margin-top: 40px;
		font-size: 18px;
	}

	.kro-philosophy .kro-policy__punch {
		font-size: 22px;
	}

	.kro-message__side {
		order: 1;
	}

	.kro-message__text {
		order: 2;
	}
}

/* ==========================================================================
   スマートフォン
   ========================================================================== */
@media (max-width: 767px) {
	.kro-philosophy .kro-psec__h3 {
		font-size: 21px;
	}

	.kro-philosophy .kro-psec__h4 {
		font-size: 18px;
	}

	.kro-psec__lead-body p,
	.kro-psec__lead-body--single {
		font-size: 15px;
	}

	.kro-philosophy .kro-psec__note {
		font-size: 14px;
	}

	/* SP は3枚ぶんが窓に収まる大きさにする（TOP の SP と同じ見え方）。 */
	.kro-strip {
		height: 34.7222vw;
	}

	.kro-strip__track img {
		flex-basis: 34.7222vw;
		width: 34.7222vw;
	}

	/* 写真を縮めるとぼかし円も同率で追従する */
	.kro-promise__photo {
		--kro-circle: 220px;
	}

	.kro-promise__num {
		width: 60px;
		margin-left: -108px;
	}

	.kro-promise__label {
		width: 150px;
		margin-left: -30px;
	}

	.kro-philosophy .kro-promise__lead {
		font-size: 16px;
	}

	.kro-philosophy .kro-values__en {
		font-size: 26px;
	}

	.kro-chain {
		grid-template-columns: 1fr;
		gap: 48px;
		justify-items: center;
	}

	/* 1列なので、2列組みのときに行末として消していた矢印を戻す。 */
	.kro-chain__item:nth-child(2) .kro-chain__arrow {
		display: block;
	}

	/* 中身は 210px の円に合わせた絶対配置なので、縦積みにしても円は縮めない。 */
	.kro-chain__arrow {
		top: auto;
		bottom: -40px;
		left: 50%;
		margin-left: -12px;
		border-top: 23px solid var(--kro-navy);
		border-bottom: 0;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
	}

	/* 中央揃えのまま折り返すと行頭が揃わず読みづらいので、SPは左寄せ。 */
	.kro-philosophy .kro-policy__close,
	.kro-philosophy .kro-policy__punch,
	.kro-philosophy .kro-values__caption {
		text-align: left;
	}

	.kro-philosophy .kro-policy__punch {
		font-size: 18px;
	}

	.kro-philosophy .kro-message__name {
		font-size: 24px;
	}

	.kro-message__en {
		margin-left: 12px;
		font-size: 18px;
	}
}