/* ==========================================================================
   お問い合わせ
   07_Contact（窓口一覧）1440x3261 / node 2036:3279
   08-Contact（フォーム）  1440x3402 / node 2036:3757
   数値はすべて Figma 実寸。y 座標のコメントは Figma のフレーム基準。
   ========================================================================== */

/* --------------------------------------------------------------------------
   窓口一覧
   -------------------------------------------------------------------------- */
.kro-psec--ct {
	/* パンくずの下端 y437.4（y415 + 14px x 1.6）→ 欧文ラベル y589 */
	padding-top: 151.6px;
	/* 最後のカード下端 y2150 → フッター y2350 */
	padding-bottom: 200px;
}

/* リード文（32px Bold 160%）。Figma: x130 y711 1023x102 */
.kro-ct-lead {
	/* 和文見出し下端 y677 → リード y711（実測で 1px 早いので 33px） */
	margin-top: 33px;
	/* Figma のテキストボックスがコンテナより 2px 右 */
	margin-left: 2px;
}

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

/* 注記（20px Regular 200%）。Figma: x131 y872 1181x40 */
.kro-ct-note {
	/* リード下端 y813.4（711 + 51.2 x 2）→ 注記 y872 */
	margin: 59.6px 0 0 3px;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	color: #000;
}

/* カード。Figma: 577px x 2 + gap 30 = 1184（＝コンテナ幅ぴったり）
   行ピッチ 400（カード高 340 + 行間 60）。 */
.kro-ct-cards {
	display: grid;
	grid-template-columns: repeat(2, 577px);
	column-gap: 30px;
	row-gap: 60px;
	/* 注記の下端 y912 → 1枚目のカード y1010 */
	margin: 98px 0 0;
	padding: 0;
	list-style: none;
}

.kro-ct-card {
	margin: 0;
}

.kro-ct-card__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	min-height: 340px;
	/* 幅が狭くなって本文の行数が増えたとき、同じ行のカードの高さを揃える */
	height: 100%;
	/* カード上端からタイトルまで 110px、左は 33px（うち 1px は枠線） */
	padding: 109px 32px 32px;
	background-color: #fff;
	border: 1px solid var(--kro-navy);
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

.kro-ct-card__link:hover {
	background-color: rgba(0, 80, 142, .04);
}

/* アイコンはカードごとに Figma 上の位置が違うので、カード単位で指定する。
   left / top は枠線 1px を差し引いた値。 */
.kro-ct-card__icon {
	position: absolute;
	display: block;
}

.kro-ct-card--partnership .kro-ct-card__icon {
	left: 32px;
	top: 31px;
}

.kro-ct-card--clinic .kro-ct-card__icon {
	left: 48px;
	top: 29px;
}

.kro-ct-card--media .kro-ct-card__icon {
	left: 41px;
	top: 29px;
}

.kro-ct-card--succession .kro-ct-card__icon {
	left: 48px;
	top: 30px;
}

.kro-ct-card--other .kro-ct-card__icon {
	left: 39px;
	top: 36px;
}

/* タイトル（24px Bold 160%） */
.kro-ct-card__title {
	display: block;
	font-family: var(--kro-font-ja);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

/* 欧文ラベル（16px Roboto Bold 160%）。Figma のテキストボックスが 1px 右。 */
.kro-ct-card__en {
	display: block;
	/* タイトル下端 +148.4 → 欧文 +155 */
	margin: 6.6px 0 0 1px;
	font-family: var(--kro-font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: #000;
}

/* 赤い罫線（幅80 / 1px / #E60012） */
.kro-ct-card__rule {
	display: block;
	/* 欧文下端 +180.6 → 罫線 +198 */
	margin-top: 17.4px;
	width: 80px;
	height: 1px;
	background-color: var(--kro-red);
}

/* 本文（16px Regular 180%）。Figma: w506、テキストボックスが 4px 右。 */
.kro-ct-card__body {
	display: block;
	/* 罫線下端 +199 → 本文 +233 */
	margin: 34px 0 0 4px;
	max-width: 506px;
	font-family: var(--kro-font-ja);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}

/* --------------------------------------------------------------------------
   お問い合わせフォーム
   -------------------------------------------------------------------------- */
.kro-psec--ctform {
	/* パンくずの下端 y437.4 → 欧文ラベル y589 */
	padding-top: 151.6px;
	/* パネル下端 y2291 → フッター y2491 */
	padding-bottom: 200px;
}

/* 水色のパネル。Figma: x125 y747 1187x1544 / #C2F4FF
   コンテナ（x128 w1184）より 3px 左・3px 広いので、その分だけはみ出させる。 */
.kro-formpanel {
	box-sizing: border-box;
	/* 和文見出し下端 y677 → パネル y747 */
	margin: 70px 0 0 -3px;
	width: calc(100% + 3px);
	padding: 100px 101px 80px 104px;
	background-color: #c2f4ff;
}

/* Contact Form 7 が挿し込む余白・レスポンス欄をリセット */
.kro-formpanel .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	border-color: var(--kro-navy);
	font-family: var(--kro-font-ja);
	font-size: 16px;
	line-height: 1.8;
}

.kro-formpanel .wpcf7-form-control-wrap {
	display: block;
}

/* 1項目。ラベル(40) + 20 + 入力(64)、項目間は 50px。 */
.kro-form__row + .kro-form__row {
	margin-top: 50px;
}

.kro-form__label {
	display: block;
	/* Figma: 20px Regular 200% = 40px */
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	color: #000;
}

.kro-form__req {
	/* Figma のラベルは「お名前 [必須]」と半角スペースぶん空いている */
	margin-left: 4px;
	color: var(--kro-red);
}

/* Lightning / Bootstrap の input 既定（高さ・文字サイズ）を確実に上書きするため、
   要素セレクタ＋パネルまで含めた詳細度で書く。 */
.kro-formpanel input.kro-form__input,
.kro-formpanel select.kro-form__select,
.kro-formpanel textarea.kro-form__textarea {
	box-sizing: border-box;
	display: block;
	/* ラベル下端 → 入力欄 20px */
	margin-top: 20px;
	width: 100%;
	height: 64px;
	padding: 0 29px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 0;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 400;
	line-height: 2;
	color: #000;
}

.kro-formpanel textarea.kro-form__textarea {
	/* Figma: h320 */
	height: 320px;
	padding: 11px 29px;
	resize: vertical;
}

.kro-formpanel input.kro-form__input::placeholder,
.kro-formpanel textarea.kro-form__textarea::placeholder {
	color: #888;
	opacity: 1;
}

/* セレクトは未選択（先頭の「選択してください」）のときだけ #888 にする。
   CF7 の first_as_label は value="" の option を先頭に置くので :invalid で拾える。 */
.kro-formpanel select.kro-form__select {
	appearance: none;
	-webkit-appearance: none;
	/* Material の arrow_drop_down（24x24）。Figma: x1165 = 入力欄右端から 22px
	   （実測で三角形が 1px 左に出るので 21px に寄せる） */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 21px center;
	background-size: 24px 24px;
	padding-right: 60px;
}

.kro-formpanel select.kro-form__select:invalid {
	color: #888;
}

.kro-formpanel input.kro-form__input:focus,
.kro-formpanel select.kro-form__select:focus,
.kro-formpanel textarea.kro-form__textarea:focus {
	outline: 2px solid var(--kro-navy);
	outline-offset: -2px;
}

/* 送信ボタン。Figma: x584 y2147 273x64 / #00508E */
.kro-form__submit-row {
	position: relative;
	/* テキストエリア下端 y2097 → ボタン y2147 */
	margin-top: 50px;
	text-align: center;
}

.kro-formpanel .kro-form__submit {
	display: inline-block;
	box-sizing: border-box;
	width: 273px;
	height: 64px;
	padding: 0;
	background-color: var(--kro-navy);
	border: 1px solid var(--kro-navy);
	border-radius: 0;
	font-family: var(--kro-font-ja);
	font-size: 20px;
	font-weight: 700;
	line-height: 62px;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.kro-formpanel .kro-form__submit:hover {
	background-color: #fff;
	color: var(--kro-navy);
}

/* 送信中インジケータはボタンと同じ行に置くと中央揃えがずれ（幅ぶん左に寄る）、
   ブロックにすると下の余白を押し広げるので、absolute でレイアウトから外す。 */
.kro-formpanel .wpcf7-spinner {
	position: absolute;
	left: 50%;
	bottom: -36px;
	margin: 0;
	transform: translateX(-50%);
}

/* reCAPTCHA の表示文（AUN 指示 16）。
   ※ Figma には無い追加要素なので、この分だけパネルが縦に伸びる。 */
.kro-formpanel p.kro-form__recaptcha {
	margin: 24px 0 0;
	font-family: var(--kro-font-ja);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	color: #333;
	text-align: center;
}

.kro-formpanel p.kro-form__recaptcha a {
	color: var(--kro-navy);
	text-decoration: underline;
}

/* ==========================================================================
   タブレット（可変幅）
   ========================================================================== */
@media (max-width: 1215px) {
	.kro-psec--ct,
	.kro-psec--ctform {
		padding-top: 100px;
		padding-bottom: 120px;
	}

	.kro-ct-lead {
		margin-left: 0;
	}

	.kro-ct-lead p {
		font-size: 26px;
	}

	.kro-ct-note {
		margin-left: 0;
		font-size: 16px;
		line-height: 1.8;
	}

	.kro-ct-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 40px;
		margin-top: 60px;
	}

	.kro-ct-card__link {
		min-height: 0;
		padding: 100px 28px 32px;
	}

	.kro-ct-card__body {
		max-width: none;
		margin-left: 0;
	}

	.kro-formpanel {
		margin-left: 0;
		width: 100%;
		padding: 60px 40px;
	}
}

@media (max-width: 900px) {
	.kro-ct-lead p {
		font-size: 22px;
	}

	.kro-ct-cards {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.kro-ct-card__title {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.kro-psec--ct,
	.kro-psec--ctform {
		padding-top: 60px;
		padding-bottom: 80px;
	}

	.kro-ct-lead p {
		font-size: 20px;
	}

	.kro-ct-note {
		margin-top: 32px;
		font-size: 14px;
	}

	.kro-ct-cards {
		margin-top: 40px;
	}

	.kro-ct-card__link {
		padding: 92px 20px 28px;
	}

	.kro-ct-card__icon {
		max-width: 64px;
		height: auto;
	}

	.kro-ct-card--partnership .kro-ct-card__icon,
	.kro-ct-card--clinic .kro-ct-card__icon,
	.kro-ct-card--media .kro-ct-card__icon,
	.kro-ct-card--succession .kro-ct-card__icon,
	.kro-ct-card--other .kro-ct-card__icon {
		left: 20px;
		top: 24px;
	}

	.kro-ct-card__body {
		font-size: 14px;
	}

	.kro-formpanel {
		padding: 40px 20px;
	}

	.kro-form__row + .kro-form__row {
		margin-top: 28px;
	}

	.kro-form__label {
		font-size: 16px;
		line-height: 1.8;
	}

	.kro-formpanel input.kro-form__input,
	.kro-formpanel select.kro-form__select,
	.kro-formpanel textarea.kro-form__textarea {
		margin-top: 12px;
		height: 56px;
		padding: 0 16px;
		font-size: 16px;
	}

	.kro-formpanel textarea.kro-form__textarea {
		height: 220px;
		padding: 12px 16px;
	}

	.kro-formpanel select.kro-form__select {
		padding-right: 48px;
		background-position: right 12px center;
	}

	.kro-form__submit-row {
		margin-top: 32px;
	}

	.kro-formpanel .kro-form__submit {
		width: 100%;
		max-width: 273px;
		height: 56px;
		font-size: 18px;
		line-height: 54px;
	}
}

/* ==========================================================================
   2026-09-16 追加（こちらで直接追記）
   ========================================================================== */

/* フォーム：任意項目のラベル（原稿「電話番号（任意）」） */
.kro-form__opt {
	margin-left: 4px;
	color: #6b7785;
}

/* 窓口一覧：原稿 05.CONTACT の「Contact Window」。
   Figma に無いため、窓口カードの紺の枠線と文字組みに合わせて足した。 */
.kro-ct-window {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	column-gap: 48px;
	row-gap: 16px;
	align-items: start;
	margin: 100px 0 0;
	padding: 48px 56px;
	border: 1px solid var(--kro-navy, #00508e);
	background: #fff;
}

.kro-ct-window__title {
	margin: 0;
	font-family: var(--kro-font-en, "Roboto", sans-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--kro-navy, #00508e);
}

.kro-ct-window__body p {
	margin: 0;
	font-family: var(--kro-font-ja, "Noto Sans JP", sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 2;
	color: #000;
}

.kro-ct-window__body .kro-ct-window__org {
	font-size: 20px;
	font-weight: 700;
}

.kro-ct-window__mail a {
	color: var(--kro-navy, #00508e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kro-ct-window__body .kro-ct-window__note {
	margin-top: 12px;
	font-size: 16px;
	color: #333;
}

@media (max-width: 900px) {
	.kro-ct-window {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 60px;
		padding: 32px 28px;
	}
	.kro-ct-window__body p {
		font-size: 16px;
		line-height: 1.9;
	}
	.kro-ct-window__body .kro-ct-window__org {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.kro-ct-window {
		margin-top: 40px;
		padding: 24px 20px;
	}
	.kro-ct-window__title {
		font-size: 20px;
	}
	.kro-ct-window__body p {
		font-size: 15px;
	}
	.kro-ct-window__body .kro-ct-window__note {
		font-size: 14px;
	}
}