@charset "UTF-8";
/**
 * 06_Group（組織と人）
 * Figma: 1440x8424 / コンテナは x128〜x1312（1184px）。
 * 数値はすべて Figma のフレーム座標から起こした実測値。
 */

/* セクション見出し（.kro-sechead__*）は共通パーツとして pages.css に置いている。 */

/* ==========================================================================
   Integration（それぞれの専門性が、ひとつの体系を成す）
   ========================================================================== */
.kro-gsec--integration {
	/* パンくず下端 y437.4 → ラベル y589 */
	padding-top: 152px;
}

.kro-integration {
	display: grid;
	/* 本文575 / 余白32 / 写真577 = 1184 */
	grid-template-columns: 575fr 577fr;
	gap: 32px;
	/* 見出し下端 y741 → 本文・写真 y793 */
	margin-top: 52px;
}

/* Lightning が p に line-height:1.7 を直接当てているため、継承ではなく
   p セレクタで指定しないと行送りが上書きされてしまう。 */
.kro-integration__body p {
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
	color: #000;
}

.kro-integration__body p + p {
	/* Figma は段落間に1行ぶんの空行が入る（20px × 200% = 40px） */
	margin-top: 40px;
}

.kro-integration__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 577 / 384;
	object-fit: cover;
}

/* ==========================================================================
   Group Map（事業領域 × 法人）
   ========================================================================== */
.kro-gsec--map {
	/* 写真下端 y1177 → ラベル y1300 */
	padding-top: 123px;
}

.kro-gmap__lead {
	/* 見出し下端 y1388 → リード y1450 */
	margin-top: 62px;
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-gmap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	/* リード下端 y1552.4 → カード y1587 */
	margin-top: 35px;
}

.kro-gmap__col {
	min-width: 0;
}

.kro-gmap__card {
	height: 290px;
	padding-top: 41px;
	background-color: #c2f4ff;
	text-align: center;
}

.kro-gmap__field {
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-gmap__en {
	/* 領域名下端 +73 → 欧文 +64（Figma のテキストボックスは少し重なる） */
	margin-top: -9px;
	font-family: var(--kro-font-en);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-gmap__corp {
	position: relative;
	/* 欧文下端 +128 → 法人名 +168。間に赤い区切り線（+141, 80x1） */
	margin-top: 40px;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-gmap__corp::before {
	content: "";
	position: absolute;
	top: -27px;
	left: 50%;
	width: 80px;
	height: 1px;
	margin-left: -40px;
	background-color: var(--kro-red);
}

.kro-gmap__corp-en {
	/* 法人名下端 +206.4 → 欧文 +222 */
	margin-top: 15.6px;
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-gmap__body {
	/* カード下端 y1877 → 本文 y1917 */
	margin-top: 40px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

/* 代表者名は説明文の続きではないので、1行ぶんより少しだけ離す。 */
.kro-gmap__rep {
	display: block;
	margin-top: 0.6em;
}

/* ==========================================================================
   Management（経営陣）
   ========================================================================== */
.kro-gsec--management {
	/* Figma の本文ボックス（y2092）基準では 103px だが、そのボックスは末尾の
	   空行ぶん1行多い。描画結果の最終行（y2061）に合わせて 133px とする。 */
	padding-top: 133px;
}

.kro-mgmt {
	display: grid;
	/* 1列目の写真 x132 / 2列目の写真 x733（間隔601px） */
	grid-template-columns: 601px 1fr;
	row-gap: 72px;
	/* 見出し下端 y2283 → 写真 y2310 */
	margin-top: 27px;
	margin-left: 4px;
}

.kro-mgmt__item {
	display: flex;
	align-items: flex-start;
	gap: 33px;
	min-width: 0;
}

.kro-mgmt__photo {
	flex: none;
	width: 265px;
	height: 246px;
}

.kro-mgmt__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.kro-mgmt__text {
	min-width: 0;
	/* Figma のテキストボックスは 258px 固定。所属が2行に折り返すのはこの幅のため。 */
	max-width: 258px;
	padding-top: 44px;
	font-family: var(--kro-font-ja);
	color: #000;
}

/* 経営陣のテキストは Figma 上すべて line-height 180%。
   各行の margin は「前の行のテキストボックス下端 → 次の行の上端」の実測差。 */
.kro-mgmt__role {
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--kro-navy);
}

.kro-mgmt__name {
	/* 役職 y2354+28.8 → 氏名 y2376 */
	margin-top: -6.8px;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.8;
}

.kro-mgmt__en {
	/* 氏名 y2376+57.6 → 欧文 y2430 */
	margin-top: -3.6px;
	font-family: var(--kro-font-en);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.8;
}

.kro-mgmt__org {
	/* 欧文 y2430+43.2 → 所属 y2484 */
	margin-top: 10.8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
}

/* ==========================================================================
   Locations（拠点）
   ========================================================================== */
.kro-gsec--locations {
	/* 経営陣の写真下端 y2877 → ラベル y3035 */
	padding-top: 161px;
	/* 最後の写真下端 y7313 → フッター上端の罫線 y7512。拠点行の積み上がりで
	   実装側が2px下がるぶんを差し引いて、罫線位置をぴたりと合わせる。 */
	padding-bottom: 197px;
}

.kro-locations__lead {
	/* 見出し下端 y3123 → リード y3168 */
	margin-top: 45px;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 2;
	color: #000;
}

/* カテゴリー見出しの上マージンは Figma 上で 120 / 149 / 133px とバラついている
   （デザイン側の揺れ）。1pxまで合わせるため、隣接セレクタで順番ごとに指定する。
   5つ目以降が増えた場合は最後の 133px が継承される。 */
.kro-locations__group.is-first {
	/* リード下端 y3208 → 整形外科 y3264 */
	margin-top: 56px;
}

.kro-locations__group + .kro-locations__group {
	/* 整形外科のボタン下端 y4025 → リハビリテーション y4145 */
	margin-top: 120px;
}

.kro-locations__group + .kro-locations__group + .kro-locations__group {
	/* リハビリの写真下端 y4526 → 整骨院・整体院 y4675 */
	margin-top: 149px;
}

.kro-locations__group + .kro-locations__group + .kro-locations__group + .kro-locations__group {
	/* 整骨院の写真下端 y6799 → ピラティス y6932 */
	margin-top: 128px;
}

.kro-locations__cat {
	font-family: var(--kro-font-ja);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

.kro-clinics {
	display: grid;
	/* 577 + 30 + 577 = 1184 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
}

.kro-clinics--card {
	/* 見出し下端 y3315.2 → 写真 y3342 */
	margin-top: 27px;
	row-gap: 80px;
}

.kro-clinics--row {
	/* 見出し下端 → 店舗名（Figma 60px） */
	margin-top: 60px;
	/* Figma の行ピッチは 346 / 350 / 350 / 351 / 350px。行の高さ 270px に対して
	   80px を採ると 2行目以降がぴたりと合う（1行目だけ Figma 側が4px詰まっている）。 */
	row-gap: 80px;
}

.kro-clinic {
	min-width: 0;
}

/* --- 整形外科（大きな写真カード） --- */
.kro-clinic__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 577 / 385;
	object-fit: cover;
}

.kro-clinics--card .kro-clinic__name {
	/* 写真下端 y3727 → 店舗名 y3757 */
	margin-top: 30px;
}

.kro-clinic__name {
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 2;
	color: #000;
}

.kro-clinic__sub {
	display: block;
	/* Figma は1行目（24px）と2行目（18px）の行間が CSS より4px詰まる */
	margin-top: -4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 2;
}

.kro-clinics--card .kro-clinic__detail {
	position: relative;
	/* 店舗名下端 y3838 → 赤線 y3853 → 住所 y3882 */
	margin-top: 45px;
}

.kro-clinics--card .kro-clinic__detail::before {
	content: "";
	position: absolute;
	top: -29px;
	left: 0;
	width: 69px;
	height: 1px;
	background-color: var(--kro-red);
}

.kro-clinics--card .kro-clinic__action {
	display: flex;
	justify-content: center;
	/* 住所下端 y3960 → ボタン y3985 */
	margin-top: 26px;
}

/* --- 整骨院・整体院ほか（正方形写真の行） --- */
.kro-clinics--row .kro-clinic__row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 30px;
	/* 店舗名下端 +48 → 赤線 +66 → 写真 +99 */
	margin-top: 51px;
}

.kro-clinics--row .kro-clinic__row::before {
	content: "";
	position: absolute;
	top: -33px;
	left: 0;
	width: 69px;
	height: 1px;
	background-color: var(--kro-red);
}

.kro-clinic__thumb {
	flex: none;
	width: 171px;
	height: 171px;
}

.kro-clinic__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kro-clinics--row .kro-clinic__detail {
	/* flex アイテムのままだと中身の長さで幅が変わり、SPでボタン幅が
	   拠点ごとにバラつく。常に残り幅いっぱいに広げる。 */
	flex: 1 1 auto;
	min-width: 0;
	/* Figma のテキストボックスは 351px 固定。住所の折り返し位置がこの幅で決まる。 */
	max-width: 351px;
	/* 住所は写真より4px上から始まる */
	margin-top: -4px;
}

.kro-clinics--row .kro-clinic__action {
	/* 住所下端 → ボタン上端は Figma 実測 23〜29px。中間値を採用。 */
	margin-top: 26px;
}

/* --- 住所ブロック --- */
.kro-clinic__address,
.kro-clinic__branches {
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #000;
}

.kro-clinic__address span {
	display: block;
}

.kro-clinic__map {
	color: var(--kro-navy);
}

.kro-clinic__tel a {
	color: inherit;
}

/* ==========================================================================
   店舗情報はこちら ボタン（233x40）
   ========================================================================== */
.kro-linkbtn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 233px;
	height: 40px;
	background-color: #fff;
	border: 1px solid var(--kro-navy);
	transition: opacity .2s ease;
}

.kro-linkbtn:hover {
	opacity: .7;
}

.kro-linkbtn__label {
	font-family: var(--kro-font-ja);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--kro-navy);
}

.kro-linkbtn__arrow {
	position: absolute;
	top: 50%;
	/* Figma: ボタン右端 x533 に対し矢印は x479〜507（幅28 / 高さ5） */
	right: 26px;
	width: 28px;
	height: 5px;
	margin-top: -2.5px;
}

/* ==========================================================================
   タブレット
   ========================================================================== */
@media (max-width: 1215px) {
	.kro-gmap__lead {
		font-size: 26px;
	}

	.kro-gmap__en {
		font-size: 34px;
		margin-top: -6px;
	}

	.kro-gmap__corp {
		font-size: 20px;
	}

	.kro-gmap__corp-en {
		font-size: 14px;
	}

	.kro-mgmt {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 30px;
		margin-left: 0;
	}

	.kro-mgmt__photo {
		width: 200px;
		height: 186px;
	}

	.kro-mgmt__item {
		gap: 20px;
	}

	.kro-mgmt__text {
		max-width: none;
		padding-top: 20px;
	}

	.kro-mgmt__name {
		font-size: 26px;
	}

	.kro-mgmt__en {
		font-size: 20px;
	}
}

@media (max-width: 900px) {
	.kro-gsec--integration {
		padding-top: 72px;
	}

	.kro-gsec--map,
	.kro-gsec--management {
		padding-top: 80px;
	}

	.kro-gsec--locations {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.kro-integration {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 32px;
	}

	.kro-integration__body p {
		font-size: 17px;
	}

	.kro-integration__body p + p {
		margin-top: 34px;
	}

	.kro-gmap {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 28px;
	}

	.kro-gmap__card {
		height: auto;
		padding: 32px 20px;
	}

	.kro-gmap__lead {
		margin-top: 24px;
		font-size: 20px;
	}

	.kro-gmap__body {
		margin-top: 20px;
	}

	.kro-mgmt {
		grid-template-columns: 1fr;
		row-gap: 40px;
		margin-top: 32px;
	}

	.kro-locations__group,
	.kro-locations__group + .kro-locations__group,
	.kro-locations__group + .kro-locations__group + .kro-locations__group,
	.kro-locations__group + .kro-locations__group + .kro-locations__group + .kro-locations__group {
		margin-top: 72px;
	}

	.kro-locations__group.is-first {
		margin-top: 40px;
	}

	.kro-locations__lead {
		margin-top: 24px;
		font-size: 16px;
	}

	.kro-locations__cat {
		font-size: 24px;
	}

	.kro-clinics {
		grid-template-columns: 1fr;
		row-gap: 56px;
	}

	.kro-clinics--card,
	.kro-clinics--row {
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.kro-gmap__lead {
		font-size: 18px;
	}

	.kro-integration__body p {
		font-size: 16px;
	}

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

	.kro-gmap__en {
		font-size: 30px;
	}

	.kro-mgmt__item {
		gap: 16px;
	}

	.kro-mgmt__photo {
		width: 140px;
		height: 130px;
	}

	.kro-mgmt__text {
		padding-top: 8px;
	}

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

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

	.kro-mgmt__org {
		font-size: 14px;
	}

	.kro-clinic__name {
		font-size: 20px;
		/* 院名が2行になったときの行間を詰める（20px×2=40px だと下の
		   サブ行との間隔より広く見えて、どこで切れているか分かりにくい）。 */
		line-height: 1.5;
	}

	.kro-clinic__sub {
		font-size: 15px;
		line-height: 1.6;
		/* 院名の折り返しより、院名とサブ行の間をはっきり広くする。 */
		margin-top: 8px;
	}

	.kro-clinics--row .kro-clinic__row {
		gap: 16px;
		margin-top: 40px;
	}

	.kro-clinic__thumb {
		width: 120px;
		height: 120px;
	}

	.kro-clinic__address,
	.kro-clinic__branches {
		font-size: 14px;
	}

	.kro-linkbtn {
		width: 100%;
	}
}