@charset "UTF-8";

/* ========================================
   page-plan 追加分（functions.php のスラッグ判定で自動読込）
   BP: SP max-width 767px / PC min-width 768px
======================================== */

.p-plan-lcc,
.p-plan-faq,
.c-button--outline {
	--plan-color-text: #382712;
	--plan-color-accent: var(--main-color);
	--plan-color-white: #fff;
	--plan-color-faq-border: #adadad;
}

/* ライフサイクルコスト
---------------------------------------- */
.p-plan-lcc {
	/* 直前の p-plan__planlist の margin-bottom(60px) と相殺され、80px になる */
	margin: 80px 0;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc {
		/* 直前の p-plan__planlist の margin-bottom(SP 40px) と相殺され、80px になる */
		margin: 80px 0 44px;
	}
}

/* 既存 p-plan__headline のSP高さ固定(64px)内に2行で収めるため、SPのみFigma値で上書き */
@media screen and (max-width: 767px) {
	.p-plan-lcc .p-plan__headline,
	.p-plan-faq .p-plan__headline {
		padding: 0 24px;
		font-size: 22px;
		line-height: 1;
		text-align: center;
	}
}

.p-plan-lcc__inner {
	display: flex;
	flex-direction: column;
	margin-top: 32px;
	color: var(--plan-color-text);
	letter-spacing: 0;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__inner {
		margin-top: 24px;
		padding: 0 20px;
	}
}

.p-plan-lcc__lead {
	max-width: 960px;
	padding-left: 20px;
	border-left: 4px solid var(--plan-color-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.9;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__lead {
		padding-left: 12px;
		font-size: 15px;
		line-height: 1.7;
	}
}

.p-plan-lcc__compare {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 32px 24px 0;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__compare {
		gap: 14px;
		margin: 44px 0 0;
	}
}

.p-plan-lcc__ttl {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__ttl {
		display: none;
	}
}

.p-plan-lcc__label {
	padding: 8px 8px 8px 10px;
	border-radius: 8px;
	background: var(--plan-color-accent);
	color: var(--plan-color-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.p-plan-lcc__subttl {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.p-plan-lcc__img img {
	display: block;
	width: 100%;
	max-width: 932px;
	height: auto;
	aspect-ratio: 932 / 376;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__img img {
		max-width: none;
		aspect-ratio: 700 / 1630;
	}
}

.p-plan-lcc__note {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.p-plan-lcc__point {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-top: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--plan-color-accent);
	border-bottom: 1px solid var(--plan-color-accent);
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__point {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}

.p-plan-lcc__pointlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.p-plan-lcc__pointitem {
	display: flex;
	align-items: center;
	gap: 6px;
}

.p-plan-lcc__pointitem::before {
	content: "";
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	background: no-repeat center / contain;
}

.p-plan-lcc__pointitem--cost::before {
	background-image: url(../images/plan/ico_cost_01.svg);
}

.p-plan-lcc__pointitem--maintenance::before {
	background-image: url(../images/plan/ico_cost_02.svg);
}

.p-plan-lcc__pointtxt {
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

@media screen and (max-width: 767px) {
	.p-plan-lcc__pointtxt {
		line-height: 1.4;
	}
}

/* 費用に関するよくあるご質問
---------------------------------------- */
.p-plan-faq {
	margin-bottom: 80px;
}

.p-plan-faq__inner {
	display: flex;
	flex-direction: column;
	gap: 34px;
	margin-top: 24px;
	padding: 0 40px;
	color: var(--plan-color-text);
	letter-spacing: 0;
}

@media screen and (max-width: 767px) {
	.p-plan-faq__inner {
		gap: 32px;
		padding: 0 20px;
	}
}

.p-plan-faq__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

@media screen and (max-width: 767px) {
	.p-plan-faq__list {
		gap: 24px;
	}
}

/* 区切り線：Figma の破線（線2px・間隔2px）を再現するため gradient で描画 */
.p-plan-faq__item {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-bottom: 33px;
	background: linear-gradient(to right, var(--plan-color-faq-border) 2px, transparent 2px) left bottom / 4px 1px repeat-x;
}

@media screen and (max-width: 767px) {
	.p-plan-faq__item {
		padding-bottom: 25px;
	}
}

.p-plan-faq__q {
	display: flex;
	align-items: center;
	gap: 20px;
}

.p-plan-faq__q::before {
	content: "";
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: url(../images/plan/icon_faq__q.svg) no-repeat center / contain;
}

.p-plan-faq__qtxt {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.p-plan-faq__a {
	display: flex;
	gap: 36px;
	margin: 0;
}

.p-plan-faq__a::before {
	/* SVG は Figma の A 枠（左余白15px・上余白3px）込みで書き出し済み */
	content: "";
	flex-shrink: 0;
	align-self: flex-start;
	width: 31px;
	height: 21px;
	background: url(../images/plan/icon_faq__a.svg) no-repeat center / contain;
}

.p-plan-faq__atxt {
	max-width: 100%;
	font-size: 15px;
	font-weight: 500;
	/* Figma: 15px / 25px */
	line-height: calc(25 / 15);
}

/* Figma: PCは幅360px・文字と矢印の間45px・右寄せ(右余白24px) / SPは幅280px・間15px・中央 */
div.c-button.c-button--outline.p-plan-faq__btn {
	width: 360px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	div.c-button.c-button--outline.p-plan-faq__btn {
		width: 280px;
	}
}

div.c-button.c-button--outline.p-plan-faq__btn a.c-button__link {
	justify-content: flex-end;
	padding-right: 24px;
}

@media screen and (max-width: 767px) {
	div.c-button.c-button--outline.p-plan-faq__btn a.c-button__link {
		justify-content: center;
		padding-right: 0;
	}
}

div.c-button.c-button--outline.p-plan-faq__btn a.c-button__link span {
	padding-right: 63px;
}

@media screen and (max-width: 767px) {
	div.c-button.c-button--outline.p-plan-faq__btn a.c-button__link span {
		padding-right: 33px;
	}
}

/* c-button 白抜き版（既存 c-button の配色反転）
---------------------------------------- */
div.c-button.c-button--outline {
	flex-shrink: 0;
	width: 280px;
	max-width: 100%;
	margin: 0;
	background: var(--plan-color-white);
	color: var(--plan-color-accent);
	font-weight: 700;
	letter-spacing: 0;
}

div.c-button.c-button--outline::before {
	background-color: var(--plan-color-accent);
}

div.c-button.c-button--outline:hover {
	color: var(--plan-color-white);
}

div.c-button.c-button--outline a.c-button__link {
	padding: 0;
	font-size: 15px;
	line-height: 1;
}

div.c-button.c-button--outline a.c-button__link span {
	padding-right: 33px;
	letter-spacing: 0;
}

div.c-button.c-button--outline a.c-button__link span::before {
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--plan-color-accent);
}

div.c-button.c-button--outline a.c-button__link span::after {
	right: 8px;
	width: 5px;
	height: 5px;
	margin-top: auto;
	border-top: solid 1px var(--plan-color-white);
	border-right: solid 1px var(--plan-color-white);
}

div.c-button.c-button--outline a.c-button__link:hover span::before {
	background-color: var(--plan-color-white);
}

div.c-button.c-button--outline a.c-button__link:hover span::after {
	border-top-color: var(--plan-color-accent);
	border-right-color: var(--plan-color-accent);
}

/* SPではhoverを無効化（theme-customize.css の既存方針に合わせる） */
@media screen and (max-width: 767px) {
	div.c-button.c-button--outline::before {
		display: none;
	}

	div.c-button.c-button--outline:hover {
		color: var(--plan-color-accent);
	}

	div.c-button.c-button--outline a.c-button__link:hover span::before {
		background-color: var(--plan-color-accent);
	}

	div.c-button.c-button--outline a.c-button__link:hover span::after {
		border-top-color: var(--plan-color-white);
		border-right-color: var(--plan-color-white);
	}
}