/* ==========================================================================
   KRO TOP page
   Figma: 01.TOP_v3_1 (1440 x 8138)
   数値はすべてFigmaの実測値（1440px幅を基準）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero  (page y 100-1080 / h 980)
   -------------------------------------------------------------------------- */
.kro-hero {
	position: relative;
	height: 980px;
	overflow: hidden;
	color: #fff;
}

/* メインビジュアルのスライド。3枚をクロスフェードで切り替える。 */
.kro-hero__slides {
	position: absolute;
	inset: 0;
}

.kro-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Figma の画像フィルは全スライド scaleMode:FILL・変形なし＝中央基準。 */
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

/* v3_1 の写真だけはノードが 1440x1080 で、ヒーローに出るのは下側 980px。 */
.kro-hero__photo--bottom {
	object-position: center bottom;
}

.kro-hero__photo.is-active {
	opacity: 1;
}

/* JS が動かない場合でも1枚目は必ず見えるようにする。 */
.kro-hero__slides:not(.is-ready) .kro-hero__photo:first-child {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.kro-hero__photo {
		transition-duration: .01ms;
	}
}

/* 明るい写真でも白文字が読めるように、黒の膜を40%にしている（2026-09-24 指示12）。 */
.kro-hero__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .4);
}

.kro-hero__title {
	position: absolute;
	top: 365px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--kro-font-ja);
	font-size: 64px;
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
}

.kro-hero__accent {
	position: absolute;
}

.kro-hero__accent--red {
	top: 446px;
	left: calc(50% - 232px);
	width: 300px;
	height: 44px;
}

.kro-hero__accent--black {
	top: 529px;
	left: calc(50% - 104px);
	width: 207.82px;
	height: 30.45px;
}

.kro-hero__lead {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
}

.kro-hero__lead--1 {
	top: 504px;
}

.kro-hero__lead--2 {
	top: 564px;
}

.kro-hero__watermark {
	position: absolute;
	top: 797px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--kro-font-en);
	font-size: 160px;
	font-weight: 700;
	line-height: 1.2;
	color: rgba(255, 255, 255, .3);
}

.kro-hero__scroll {
	position: absolute;
	top: 787px;
	left: 50%;
	transform: translateX(-50%);
}

.kro-hero__scroll span {
	display: block;
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
}

/* 下へスクロールを促す縦線。
   ::after は道すじ（薄い線）、::before が上から伸びて下へ抜ける明るい線。
   線の位置と長さは ::after 側だけを直せばよいように、2つまとめて指定する。 */
.kro-hero__scroll::before,
.kro-hero__scroll::after {
	content: "";
	position: absolute;
	top: 33px;
	left: 50%;
	width: 1px;
	height: 160px;
}

.kro-hero__scroll::after {
	background-color: rgba(255, 255, 255, .25);
}

.kro-hero__scroll::before {
	background-color: #fff;
	transform: scaleY(0);
	transform-origin: top;
	animation: kro-scroll-line 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes kro-scroll-line {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
	/* 動きを止める設定の端末では、元どおりの1本線にする。 */
	.kro-hero__scroll::before {
		animation: none;
		transform: none;
	}

	.kro-hero__scroll::after {
		background-color: #fff;
	}
}

/* --------------------------------------------------------------------------
   News  (page y 1080-1650)
   -------------------------------------------------------------------------- */
.kro-news__inner {
	display: grid;
	grid-template-columns: 405px 1fr;
	padding-top: 160px;
	padding-bottom: 158px;
}

.kro-news__item {
	display: grid;
	grid-template-columns: 123px 95px 1fr;
	align-items: center;
	height: 26px;
	margin-bottom: 30px;
}

.kro-news__item:last-child {
	margin-bottom: 0;
}

.kro-news__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 26px;
	border: 1px solid var(--kro-navy);
	font-family: var(--kro-font-ja);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--kro-navy);
}

.kro-news__date {
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

.kro-news__title {
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

a.kro-news__title:hover {
	color: var(--kro-navy);
	text-decoration: underline;
}

.kro-news__body .kro-btn {
	margin-top: 50px;
}

/* --------------------------------------------------------------------------
   Mission  (page y 1650-2550 / h 900, navy)
   -------------------------------------------------------------------------- */
.kro-mission {
	position: relative;
	height: 900px;
	overflow: hidden;
	color: #fff;
	background-color: var(--kro-navy);
}

.kro-mission__photos {
	position: absolute;
	top: 0;
	right: 0;
	/* デザイン上の見えている窓は 600x900（2列 x 3段）。帯はこれより長く、はみ出しは隠す。 */
	width: 600px;
	height: 900px;
	overflow: hidden;
}

/* 写真10枚 = 2列 x 5段 = 600x1500 の帯。これを2本重ねて無限ループさせる。 */
.kro-mission__photos-strip {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(2, 300px);
	grid-template-rows: repeat(5, 300px);
	width: 600px;
	height: 1500px;
	animation: kro-imgloop-y 40s linear infinite;
}

/* 2本目を半周期ずらすと、常にどちらかが窓を埋めて継ぎ目が出ない。 */
.kro-mission__photos-strip:nth-child(2) {
	animation-delay: -20s;
}

.kro-mission__photos img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* 上方向に流す（PC）。 */
@keyframes kro-imgloop-y {
	from {
		transform: translateY(100%);
	}

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

/* 左方向に流す（SP・タブレット）。 */
@keyframes kro-imgloop-x {
	from {
		transform: translateX(100%);
	}

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

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

	/* 動かさない場合は重ねる意味がないので1本だけ見せる。 */
	.kro-mission__photos-strip:nth-child(2) {
		display: none;
	}
}

.kro-mission__inner {
	position: relative;
	padding-top: 124px;
}

.kro-mission__headline {
	position: relative;
	height: 101px;
	margin-top: 41px;
}

.kro-mission__headline-text {
	width: 563.452px;
	height: 53.99px;
	margin-left: 2px;
}

.kro-mission__headline-line {
	position: absolute;
	top: 56.6px;
	left: 5px;
	width: 566px;
	height: 44px;
}

.kro-mission__catch {
	margin-top: 19px;
	margin-left: 1px;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 51px;
}

.kro-mission__body {
	width: 568px;
	margin-top: 26px;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
}

.kro-mission .kro-btn {
	margin-top: 48px;
}

/* --------------------------------------------------------------------------
   Business  (page y 2550-3860)
   -------------------------------------------------------------------------- */
.kro-business {
	padding-top: 160px;
	padding-bottom: 152px;
}

.kro-business__lead {
	margin-top: 35px;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 51px;
}

.kro-business__cards {
	display: grid;
	/* 事業04（運営代行）を足して4列にした（2026-09-24 指示9）。
	   1枚 375→273px になるので、写真も同じ比率で 500→365px に縮める。 */
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-top: 50px;
}

.kro-business-card__media {
	position: relative;
	height: 365px;
}

.kro-business-card__media img {
	width: 100%;
	height: 365px;
	max-width: none;
	object-fit: cover;
}

.kro-business-card__badge {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 84px;
	height: 34px;
	background-color: #fff;
}

.kro-business-card__badge-ja {
	position: absolute;
	top: 12px;
	left: 8px;
	font-family: var(--kro-font-ja);
	font-size: 12px;
	font-weight: 700;
	line-height: 19px;
	color: var(--kro-navy);
}

.kro-business-card__badge-no {
	position: absolute;
	top: -5px;
	left: 39px;
	font-family: var(--kro-font-en);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-business-card__en {
	position: absolute;
	/* 4列にして1枚が273pxになったため、Maintenance が収まる大きさにする。 */
	top: 332px;
	left: 90px;
	font-family: var(--kro-font-en);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
}

.kro-business-card__title {
	margin-top: 35px;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 38px;
	text-align: center;
}

.kro-business-card__title::after {
	content: "";
	position: static;
	display: block;
	overflow: visible;
	border: 0;
	line-height: 0;
	width: 80px;
	height: 1px;
	margin: 17px auto 0;
	background-color: var(--kro-red);
}

.kro-business-card__desc {
	margin-top: 19px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 29px;
}

/* --------------------------------------------------------------------------
   Vision  (page y 3860-5457)
   -------------------------------------------------------------------------- */
.kro-vision {
	padding-top: 160px;
	padding-bottom: 160px;
	/* Figmaのぼかし図形はCSSグラデーションでは再現しきれないため、
	   デザインの背景ムラをそのまま画像化して敷いている。 */
	background-color: #fff;
	background-image: url(../images/vision/glow.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.kro-vision__inner {
	position: relative;
}

.kro-vision__lead {
	margin-top: 35px;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 51px;
}

.kro-vision__script {
	position: absolute;
	top: 126px;
	left: 663.7px;
	width: 586.01px;
	height: 197.238px;
	max-width: none;
}

.kro-vision-row {
	display: flex;
	align-items: flex-start;
	gap: 47px;
}

.kro-vision-row--1 {
	margin-top: 59px;
	margin-left: 118px;
}

.kro-vision-row--2 {
	margin-top: 40px;
	margin-left: 17px;
}

.kro-vision-row--3 {
	margin-top: 56px;
	margin-left: 118px;
}

.kro-vision-row__photo {
	flex: none;
	width: 240px;
	height: 240px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

.kro-vision-row__body {
	padding-top: 40px;
}

.kro-vision-row__en {
	font-family: var(--kro-font-en);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-vision-row__ja {
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 38px;
}

.kro-vision-row__ja::after {
	content: "";
	position: static;
	display: block;
	overflow: visible;
	border: 0;
	line-height: 0;
	width: 80px;
	height: 1px;
	margin-top: 17px;
	background-color: var(--kro-red);
}

.kro-vision-row__desc {
	width: 779px;
	margin-top: 12px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 29px;
}

.kro-vision-row__desc .kro-navy-em {
	font-weight: 700;
}

.kro-vision__cta {
	width: 374px;
	margin-top: 59px;
	margin-left: 405px;
}

/* --------------------------------------------------------------------------
   Group  (page y 5457-6753)
   -------------------------------------------------------------------------- */
.kro-group {
	padding-top: 160px;
	padding-bottom: 194px;
}

.kro-group__lead {
	margin-top: 35px;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 51px;
}

.kro-group__body {
	margin-top: 35px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 29px;
}

.kro-group__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
}

.kro-group-card {
	position: relative;
	height: 500px;
	text-align: center;
	background-color: var(--kro-light-blue);
}

.kro-group-card__en {
	padding-top: 64px;
	font-family: var(--kro-font-en);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-group-card__en::after {
	content: "";
	position: static;
	display: block;
	overflow: visible;
	border: 0;
	line-height: 0;
	width: 80px;
	height: 1px;
	margin: 12px auto 0;
	background-color: var(--kro-red);
}

.kro-group-card__desc {
	margin-top: 27px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 29px;
}

.kro-group-card__icon {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	max-width: none;
}

.kro-group-card__icon--medical {
	top: 238px;
	width: 120px;
	height: 113px;
}

.kro-group-card__icon--prevention {
	top: 257px;
	width: 140px;
	height: 81px;
}

.kro-group-card__icon--operations {
	top: 249px;
	width: 120px;
	height: 92px;
}

.kro-group-card__title {
	position: absolute;
	top: 375px;
	right: 0;
	left: 0;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 38px;
}

.kro-group__cta {
	width: 374px;
	margin-top: 61px;
	margin-left: 405px;
}

/* --------------------------------------------------------------------------
   Contact  (page y 6753-7233 / h 480)
   -------------------------------------------------------------------------- */
.kro-contact {
	position: relative;
	height: 480px;
	overflow: hidden;
	color: #fff;
	text-align: center;
}

.kro-contact__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.kro-contact__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 80, 142, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.kro-contact__inner {
	position: relative;
	padding-top: 84px;
}

.kro-contact__en {
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
}

.kro-contact__title {
	font-family: var(--kro-font-ja);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.6;
}

.kro-contact__desc {
	margin-top: 34px;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
}

.kro-contact__cta {
	width: 374px;
	margin: 48px auto 0;
}

.kro-contact__cta .kro-btn__arrow {
	right: 24px;
}

/* --------------------------------------------------------------------------
   Narrow viewport fallback（モバイル用デザインは未確定のための暫定）
   -------------------------------------------------------------------------- */
@media (max-width: 1215px) {
	.kro-hero {
		height: 620px;
	}

	.kro-hero__title {
		top: 200px;
		font-size: 40px;
	}

	.kro-hero__accent--red {
		top: 250px;
		left: calc(50% - 145px);
		width: 188px;
		height: 28px;
	}

	.kro-hero__lead {
		font-size: 22px;
	}

	.kro-hero__lead--1 {
		top: 292px;
	}

	.kro-hero__lead--2 {
		top: 334px;
	}

	.kro-hero__accent--black {
		top: 310px;
		left: calc(50% - 71px);
		width: 143px;
		height: 21px;
	}

	.kro-hero__watermark {
		top: 470px;
		font-size: 88px;
	}

	.kro-hero__scroll {
		top: 460px;
	}

	.kro-hero__scroll::before,
	.kro-hero__scroll::after {
		height: 130px;
	}

	.kro-news__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.kro-news__item {
		grid-template-columns: 116px 88px 1fr;
	}

	.kro-mission {
		height: auto;
		padding-bottom: 80px;
	}

	/* 可変幅では横一列に流す（SPデザインの指示「左向きに数枚の写真をスライド」に合わせる）。
	   窓は3列 x 2段ぶん、帯は5列 x 2段ぶん。 */
	.kro-mission__photos {
		/* static にすると中の帯（absolute）がセクション基準になってしまう。 */
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.kro-mission__photos-strip {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-auto-flow: column;
		width: calc(100% / 3 * 5);
		height: 100%;
		animation-name: kro-imgloop-x;
	}

	.kro-mission__inner {
		padding-top: 64px;
	}

	.kro-mission__headline,
	.kro-mission__headline-text,
	.kro-mission__headline-line {
		width: 100%;
		max-width: 566px;
		height: auto;
	}

	.kro-mission__headline {
		position: static;
	}

	/* PCでは絶対配置で重ねているが、可変幅では通常フローで下に置く。 */
	.kro-mission__headline-line {
		position: static;
		display: block;
		margin-top: 4px;
	}

	.kro-mission__catch {
		font-size: 24px;
		line-height: 1.6;
	}

	.kro-mission__body {
		width: auto;
	}

	.kro-business,
	.kro-group {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.kro-business__lead,
	.kro-vision__lead,
	.kro-group__lead {
		font-size: 24px;
		line-height: 1.6;
	}

	/* 事業カードは4枚なので、この幅では2列に折り返す（1列だと縦に長すぎる）。 */
	.kro-business__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.kro-group__cards {
		grid-template-columns: 1fr;
	}

	.kro-business-card__desc {
		width: auto;
	}

	.kro-vision {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.kro-vision__script {
		display: none;
	}

	.kro-vision-row {
		flex-direction: column;
		gap: 24px;
		margin-top: 56px !important;
		margin-left: 0 !important;
	}

	.kro-vision-row__body {
		padding-top: 0;
	}

	.kro-vision-row__en {
		font-size: 28px;
	}

	.kro-vision-row__desc {
		width: auto;
	}

	.kro-vision__cta,
	.kro-group__cta {
		margin-left: 0;
		max-width: 100%;
	}

	.kro-group-card {
		height: auto;
		padding-bottom: 48px;
	}

	.kro-group-card__icon,
	.kro-group-card__title {
		position: static;
		transform: none;
		margin: 24px auto 0;
	}

	.kro-contact {
		height: auto;
		padding-bottom: 80px;
	}

	.kro-contact__inner {
		padding-top: 64px;
	}

	.kro-contact__title {
		font-size: 28px;
	}

	.kro-contact__desc {
		font-size: 16px;
	}

	.kro-contact__cta {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   SP  （Figma 390px フレーム基準）
   Header / Hero / Mission / Vision / Footer はデザインの実測値。
   News / Business / Group / Contact はSPデザインが未作成のため、
   PCのトーンを保ったまま1カラムに落とし込んだ暫定値。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* ---- 共通見出し（EN 16px はPCと同値、JA は 40px → 28px） ---- */
	.kro-heading__ja {
		font-size: 28px;
	}

	/* ---- Hero  (h640) ---- */
	.kro-hero {
		height: 640px;
	}

	.kro-hero__title {
		top: 258px;
		font-size: 32px;
	}

	/* PC（300x44）のちょうど 1/2。 */
	.kro-hero__accent--red {
		top: 299px;
		left: calc(50% - 90px);
		width: 150px;
		height: 22px;
	}

	/* SPデザインには黒のブラシ装飾が無い。 */
	.kro-hero__accent--black {
		display: none;
	}

	.kro-hero__lead {
		font-size: 16px;
	}

	.kro-hero__lead--1 {
		top: 327px;
	}

	.kro-hero__lead--2 {
		top: 357px;
	}

	/* SPでは中央寄せではなく左端から流し、右側を画面外へはみ出させる。 */
	.kro-hero__watermark {
		top: 568px;
		left: 0;
		transform: none;
		font-size: 72px;
	}

	.kro-hero__scroll {
		top: 530px;
	}

	.kro-hero__scroll::before,
	.kro-hero__scroll::after {
		top: 18px;
		height: 95px;
	}

	/* ---- News（SPデザイン未作成） ---- */
	.kro-news__inner {
		gap: 32px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.kro-news__item {
		grid-template-columns: 1fr;
		height: auto;
		row-gap: 6px;
		margin-bottom: 24px;
	}

	.kro-news__badge {
		width: 100px;
	}

	/* SPではフッターのボタンと揃えて全幅にする。 */
	.kro-news__body .kro-btn {
		width: 100%;
	}

	/* ---- Mission ---- */
	.kro-mission {
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
	}

	/* SPは本文が先、写真が後。 */
	.kro-mission__inner {
		order: 1;
		padding-top: 54px;
		padding-bottom: 70px;
	}

	/* SPデザインのタイルは 130x167（正方形ではない）ので高さを実寸で固定する。 */
	.kro-mission__photos {
		order: 2;
		height: 334px;
		aspect-ratio: auto;
	}

	.kro-mission__photos-strip {
		grid-template-rows: repeat(2, 167px);
	}

	.kro-mission__headline {
		margin-top: 33px;
	}

	.kro-mission__headline-text,
	.kro-mission__headline-line {
		width: 350px;
		max-width: 100%;
	}

	.kro-mission__headline-text {
		margin-left: 3px;
	}

	.kro-mission__headline-line {
		margin-top: 11px;
		margin-left: 7px;
	}

	.kro-mission__catch {
		margin-top: 30px;
		font-size: 24px;
		line-height: 38px;
	}

	.kro-mission__body {
		margin-top: 38px;
		font-size: 16px;
		line-height: 32px;
	}

	.kro-mission .kro-btn {
		width: 100%;
		margin-top: 40px;
	}

	/* ---- Business（SPデザイン未作成） ---- */
	.kro-business,
	.kro-group {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.kro-business__lead,
	.kro-vision__lead,
	.kro-group__lead {
		margin-top: 24px;
		font-size: 24px;
		line-height: 38px;
	}

	.kro-vision__lead {
		margin-top: 33px;
	}

	.kro-group__cards {
		gap: 40px;
		margin-top: 40px;
	}

	/* スマホは1列。 */
	.kro-business__cards {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 40px;
	}

	.kro-business-card__media,
	.kro-business-card__media img {
		height: 320px;
	}

	/* 英字だけ 32px に縮めるとバッジ側（40px のまま）と重なるので、白バッジ一式を
	   PC の 0.8 倍に揃える。数字と英字は PC 同様ベースラインを合わせる。 */
	.kro-business-card__badge {
		width: 80px;
		height: 32px;
	}

	.kro-business-card__badge-ja {
		top: 12px;
		left: 8px;
		font-size: 12px;
		line-height: 18px;
	}

	.kro-business-card__badge-no {
		top: -5px;
		left: 37px;
		font-size: 32px;
	}

	.kro-business-card__en {
		top: 283px;
		left: 90px;
		font-size: 32px;
	}

	.kro-business-card__title {
		margin-top: 24px;
		font-size: 20px;
		line-height: 32px;
	}

	.kro-business-card__desc {
		margin-top: 16px;
		font-size: 14px;
		line-height: 26px;
	}

	/* ---- Vision ---- */
	.kro-vision {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	/* SPデザインの見出しだけ行間が 48px（Mission の 64px と異なる）。 */
	.kro-vision .kro-heading__ja {
		line-height: 48px;
	}

	/* 筆記体ロゴはSPデザインにも入っている（リード文の右上）。 */
	.kro-vision__script {
		display: block;
		top: 128px;
		right: 20px;
		left: auto;
		width: 235px;
		height: auto;
	}

	.kro-vision-row {
		gap: 21px;
		margin-top: 44px !important;
	}

	.kro-vision-row--1 {
		margin-top: 27px !important;
	}

	.kro-vision-row__photo {
		align-self: center;
		width: 200px;
		height: 200px;
	}

	.kro-vision-row__body {
		padding-left: 2px;
	}

	.kro-vision-row__en {
		font-size: 30px;
	}

	.kro-vision-row__ja {
		margin-top: 13px;
		font-size: 18px;
		line-height: 29px;
	}

	.kro-vision-row__ja::after {
		margin-top: 15px;
	}

	.kro-vision-row__desc {
		margin-top: 11px;
		font-size: 14px;
		line-height: 26px;
	}

	.kro-vision__cta,
	.kro-group__cta {
		width: 100%;
		margin-top: 48px;
	}

	/* ---- Group（SPデザイン未作成） ---- */
	.kro-group__body {
		margin-top: 24px;
		font-size: 14px;
		line-height: 26px;
	}

	.kro-group-card__en {
		padding-top: 48px;
		font-size: 32px;
	}

	.kro-group-card__desc {
		margin-top: 20px;
		font-size: 14px;
		line-height: 26px;
	}

	.kro-group-card__title {
		font-size: 20px;
		line-height: 32px;
	}

	/* ---- Contact（SPデザイン未作成） ---- */
	.kro-contact__inner {
		padding-top: 60px;
		/* 他セクションと同じ左右20pxの余白。これが無いと文字が画面端に付く。 */
		padding-right: 20px;
		padding-left: 20px;
	}

	.kro-contact__title {
		margin-top: 6px;
		font-size: 26px;
		line-height: 1.5;
	}

	.kro-contact__desc {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.9;
		/* 3行に折り返すと中央揃えの最終行が短く残るため、SPだけ左揃え。 */
		text-align: left;
	}

	.kro-contact__cta {
		width: 100%;
		margin-top: 32px;
	}

	/* ボタン幅が縮むぶんアイコンを左へ寄せ、ラベルとの間隔を確保する。 */
	.kro-contact__cta .kro-btn__icon {
		left: 56px;
	}
}