/**
 * ABCom 購入者専用ページ（page-abcom-owner.php）改修用スタイル
 *
 * page-abcom-owner.php 専用に enqueue（functions.php の abcom_owner_enqueue_assets／
 * is_page_template で限定）。既存の custom.css / style.css / dist/output.css には手を入れず、
 * `ablp-owner-` プレフィックスで非干渉に追加する。LP と同じデザインシステム
 * （ブランドレッド #e60028・基準グレー #efefef）に準拠。
 */

/* #55（購入者専用ページのみ・2026-08-06）：ページ全体の地を #ffffff に。
   #31 の共通body(#e5e5e5・abcom-header.php head inline)を当ページだけ上書き。
   本CSSは購入者ページ限定enqueueのため !important の影響は当ページのみ。 */
body { background-color: #ffffff !important; }

.ablp-owner {
	background-color: #fff;
	color: #000000;
	padding-top: 8rem; /* 固定ヘッダー分の余白を確保 */
	padding-bottom: 6rem;
}

@media (min-width: 768px) {
	.ablp-owner {
		padding-top: 9rem;
		padding-bottom: 8rem;
	}
}

.ablp-owner-inner {
	width: min(100%, 75rem);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* 見出し：ブランドレッドの縦バーで挟む（LP のタイトル流儀） */
.ablp-owner-head {
	text-align: center;
	margin-bottom: 3rem;
}

.ablp-owner-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.ablp-owner-title {
		font-size: 2.5rem;
	}
}

.ablp-owner-title::before,
.ablp-owner-title::after {
	content: "";
	flex: 0 0 6px;
	width: 6px;
	height: 2.25rem;
	background: #e60028;
}

.ablp-owner-lead {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: #707070;
}

.ablp-owner-lead p + p {
	margin-top: 0.25rem;
}

@media (min-width: 768px) {
	.ablp-owner-lead {
		font-size: 1.0625rem;
	}
}

.ablp-owner-content {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: #707070;
}

/* カード：PC=3カラム / タブレット・SP=縦積み */
.ablp-owner-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

/* No.36：タブレット（768〜1023px）はスマホ表示に合わせて縦積みにする。
   768px から3カラムにすると、912px でカード1枚あたり約256px しかなく、
   本文が12文字前後で折り返して窮屈になるうえ、カードの高さが揃わず
   ボタン前に大きな空白ができる。
   この幅より上（PC）は従来どおり3カラム。ページ内の他の 768px 指定
   （余白・見出し・リード文のサイズ）は文字組みの調整のみで、
   タブレットでも破綻しないためそのままにしている。 */
@media (min-width: 1024px) {
	.ablp-owner-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

.ablp-owner-card {
	display: flex;
	flex-direction: column;
	background: #e5e5e5;
	border-radius: 0.5rem;
	padding: 2rem 1.75rem;
}

/* カード見出し＋短い赤アンダーライン（LP の下線流儀＝短い固定バー） */
.ablp-owner-card-title {
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}

.ablp-owner-card-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.75rem;
	background: #e60028;
}

.ablp-owner-card-body {
	font-size: 0.9rem;
	line-height: 1.9;
	color: #707070;
}

/* カード1：保証対応時のご案内 サブボックス（白地） */
.ablp-owner-subbox {
	margin-top: 1.5rem;
	background: #fff;
	border-radius: 0.375rem;
	padding: 1.25rem;
}

.ablp-owner-subbox-title {
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #000000;
}

.ablp-owner-subbox p:not(.ablp-owner-subbox-title) {
	font-size: 0.8rem;
	line-height: 1.8;
	color: #707070;
}

.ablp-owner-subbox p + p {
	margin-top: 0.5rem;
}

/* グレーのピルボタン（カード下端に揃える） */
.ablp-owner-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: auto;
	padding: 0.9rem 1.5rem;
	border-radius: 9999px;
	background: #707070;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ablp-owner-btn:hover {
	background: #000000;
	color: #fff;
}

/* No.36：タブレット（768〜1023px）ではカードが1カラム＝約864px幅になるため、
   width:100% のままだとボタンが横に伸びすぎて間延びして見える。この帯だけ最大幅を設け、
   カードの中央に置く。
   スマホ（〜767px）はカード幅が狭く現状で違和感がないため、従来どおり幅いっぱいのまま。
   PC（1024px〜）は3カラムでカード自体が狭いため、こちらも従来どおり。
   中央寄せは margin ではなく align-self を使う。.ablp-owner-btn は margin-top:auto で
   カード下端に揃えているため、margin:auto にするとその指定を打ち消してしまう。 */
@media (min-width: 768px) and (max-width: 1023px) {
	.ablp-owner-btn {
		max-width: 20rem;
		align-self: center;
	}
}