/*
 * mibotの予約・導入について(/corporate-introduction/)
 *
 * このページだけのもの。パンくず・本文の箱・タイトルは assets/css/page-plain.css(c-breadcrumb / c-article …)、
 * 本文の部品(.p-guide__*)は style.css、見出し・段落は assets/css/customizer.css(#page_content …)。
 * 2 枚のカード(通常予約 / 法人導入相談)は PC もスマホも縦に並べる。
 * 色は .p-guide__* と同じもの(文字 #333 / 補足 #6b7280 / 線 #d1d5db・#e5e7eb)。
 * スマホ用(767px 以下)は、それぞれの PC 用のルールのすぐ後に書く。
 */

/* ---- タイトルの上の小見出しと、タイトルの下のリード ---- */
#page_content .p-corporate-introduction__eyebrow {
	margin: 0 0 -16px;
	font-size: 16px;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#page_content .p-corporate-introduction__eyebrow {
		margin-bottom: -16px;
		font-size: 13px;
	}
}

#page_content .p-corporate-introduction__lead {
	margin: 0 0 32px;
	font-size: 16px;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#page_content .p-corporate-introduction__lead {
		margin-bottom: 24px;
		font-size: 14px;
	}
}

/* タイトルとリードがスマホで 1〜2 文字だけ次の行に落ちないよう、区切りの位置でだけ折り返す */
.p-corporate-introduction__nowrap {
	display: inline-block;
}

/* ---- 2 枚のカード(PC もスマホも縦に並べる。
 * 2026-10-27 まで PC は左右 2 カラムだったが、通常予約の本文が短くカードの下半分が空く・右の注記の分だけボタンの高さがずれるため、縦に変えた) ---- */
.p-corporate-introduction__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* 枠は .p-guide__borderSection。style.css(このファイルより後に読む)の .p-guide__borderSection の margin に勝つよう、ルートのクラスを付けて詳細度を上げる */
.p-corporate-introduction .p-corporate-introduction__card {
	margin: 0;
	padding: 24px;
}

@media screen and (max-width: 767px) {
	.p-corporate-introduction .p-corporate-introduction__card {
		padding: 20px 16px;
	}
}

/* customizer.css の #page_content h2(26px・下線・上の余白)を打ち消す。
 * 番号は文字の ① ②(.p-guide__subHeading--number は ::before の四角を消すためだけに付けている) */
#page_content .p-corporate-introduction__cardHeading {
	margin: 0 0 16px;
	padding: 0;
	border-bottom: none;
	font-size: 20px !important;
	line-height: 1.4;
}

@media screen and (max-width: 767px) {
	#page_content .p-corporate-introduction__cardHeading {
		font-size: 17px !important;
	}
}

.p-corporate-introduction__card .p-guide__text,
.p-corporate-introduction__card .p-guide__note {
	margin: 0 0 8px;
}

/* ---- 法人導入相談の 3 つの受付方法(番号は .p-guide__orderedList。項目の間は線を引かず 16px 空ける。2026-10-27 まで線 + 上下 14px だった) ---- */
.p-corporate-introduction__methods {
	margin: 16px 0 0 !important;
}

/* style.css(後に読む)の .p-guide__orderedList .p-guide__orderedItem の margin: 10px 0 0 に勝つよう、:first-child / + で詳細度を上げる */
.p-corporate-introduction__methods .p-guide__orderedItem:first-child {
	margin: 0;
}

.p-corporate-introduction__methods .p-guide__orderedItem + .p-guide__orderedItem {
	margin: 16px 0 0;
}

.p-corporate-introduction__methods .p-guide__orderedItem::before {
	font-size: 16px;
	line-height: 1.85;
}

#page_content .p-corporate-introduction__methodName {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	#page_content .p-corporate-introduction__methodName {
		font-size: 15px;
	}
}

#page_content .p-corporate-introduction__methodText {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #333;
}

@media screen and (max-width: 767px) {
	#page_content .p-corporate-introduction__methodText {
		font-size: 13px;
	}
}

/* ---- ボタン(黄色は .p-guide__button。display は style.css の inline-block に勝つよう詳細度を上げる) ---- */
.p-corporate-introduction__cardFooter {
	padding-top: 28px;
}

@media screen and (max-width: 767px) {
	.p-corporate-introduction__cardFooter {
		padding-top: 20px;
	}
}

/* 幅は他のページのボタンと同じ 300px(.p-guide__button--md / a.basic_link / .common-btn)で中央に置く。スマホはカードいっぱい */
.p-corporate-introduction .p-corporate-introduction__button {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	max-width: 300px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.p-corporate-introduction .p-corporate-introduction__button {
		max-width: none;
	}
}

.p-corporate-introduction__buttonIcon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* 通常予約を準備中にする間のグレーアウト(リンクを外した <span>。style.css の .p-guide__button の背景色・hover に勝つよう !important。2026-11-05 ユーザー指示) */
.p-corporate-introduction .p-corporate-introduction__button--disabled,
.p-corporate-introduction .p-corporate-introduction__button--disabled:hover,
.p-corporate-introduction .p-corporate-introduction__button--disabled:focus,
.p-corporate-introduction .p-corporate-introduction__button--disabled:active {
	background-color: #d1d5db !important;
	color: #6b7280 !important;
	cursor: default;
}

.p-corporate-introduction__card .p-corporate-introduction__cardNote {
	margin: 12px 0 0;
}

/* ---- 納車について(style.css の .p-guide__section の margin に勝つよう詳細度を上げる) ---- */
.p-corporate-introduction .p-corporate-introduction__delivery {
	margin: 48px 0 0;
}

@media screen and (max-width: 767px) {
	.p-corporate-introduction .p-corporate-introduction__delivery {
		margin-top: 40px;
	}
}

.p-corporate-introduction__delivery .p-guide__text {
	margin: 0 0 8px;
}