@charset "UTF-8";
/* ==================================================
   手続き別「◯◯とは」ページ（tpl-yougo-term.php）専用
   参考LP saimu22a_hca の CVR訴求ブロック／CTAブロックを再現します。

   ・読み込みは tpl-yougo-term.php のときだけ（functions.php で分岐）
   ・main.css は触っていません
   ・支給画像は 750px 幅を前提にしているため、各ブロックは 750px で頭打ちにしています

   ★このテーマの rem は 16px 基準です（main.css は html に font-size を指定していません）。
     診断シミュレーターの sim.css は 62.5%＝10px 基準なので、数値をそのまま持ってこないこと。

   色は支給画像から抽出した実測値です。
     帯の緑           #91d70a
     手続き名の赤     #ea0000
     「相談料・着手金」#714428
================================================== */

.ylp-cta {
	--ylp-w: 750px;
	--ylp-green: #91d70a;
	--ylp-red: #ea0000;
	--ylp-brown: #714428;
	--ylp-yellow: #fff100;
}

/* --------------------------------------------------
   CTAブロック
-------------------------------------------------- */
.ylp-cta {
	padding: 0 0 34px;
	background: #fff;
}
.ylp-cta__inner {
	width: 100%;
	max-width: var(--ylp-w);
	margin: 0 auto;
	padding: 0 12px;
	box-sizing: border-box;
	text-align: center;
}
/* ★診断シミュレーターをボタンの下に入れ子で出すため、CTA自身の画像だけに限定しています
   （`.ylp-cta img` のままだと、中のシミュレーターの画像まで幅100%になります）。 */
.ylp-cta__inner > img,
.ylp-cta__btn img {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px auto;
}
/* ボタンの画像だけ上の余白なし（★2026-09-03 ご指示） */
.ylp-cta__btn img { margin-top: 0; }


/* CTA上部の1枚画像（事務員イラスト＋手続き名＋0円バッジ＋緑帯）。★2026-09-03 支給 */
.ylp-cta__hero { max-width: 750px; }

/* 事務員イラスト＋「まずは事務員にお悩みをお話しください」（支給画像の切り出し） */
.ylp-cta__staff { max-width: 750px; }

/* 「◯◯の 相談料・着手金 ［0円］」
   手続き名が3ページで変わるため、この行だけ画像ではなくテキストで組んでいます。
   0円バッジは支給画像から切り出したものを右に重ねます。 */
.ylp-cta__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2%;
	margin: 4px 0 0;
}
.ylp-cta__price-txt {
	flex: 1 1 auto;
	margin: 0;
	text-align: left;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--ylp-brown);
	font-size: clamp(1.38rem, 6.4vw, 2.88rem);
}
.ylp-cta__proc { color: var(--ylp-red); }
.ylp-cta__no {
	color: var(--ylp-brown);
	font-size: 72%;
}
.ylp-cta__fee {
	color: var(--ylp-brown);
	white-space: nowrap;
}
/* 0円バッジ。支給画像から切り出したものをそのまま並べます（重なりが起きないよう flex で横並び） */
.ylp-cta__zero {
	flex: 0 0 27%;
	width: 27%;
	max-width: 220px;
	margin: 0;
}

.ylp-cta__note {
	margin: 2px 0 8px;
	text-align: right;
	font-size: .75rem;
	line-height: 1.5;
	color: #555;
}

/* CTAボタンの上の黒帯（参考LP cta_h6。文言は手続きごとに変わるのでHTMLテキストで組む）
   支給画像の文字は 497x40px／canvas 750px 相当なので、その比率に合わせています。 */
.ylp-cta__h6 {
	margin: -16px 0 0;
	padding: 9px 12px;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: clamp(.8rem, 2.9vw, 1.31rem);
	line-height: 1.4;
	text-align: center;
	letter-spacing: .01em;
}

/* 3つの丸ポイント（支給画像）。★2026-09-03 ご指示で btmcopy の下へ移動 */
.ylp-cta__point {
	max-width: 593px;
	margin-top: 14px;
}

/* 「債務整理診断スタート」の上のラベル画像（★2026-09-03 支給 cta_label_only.webp）。
   実寸は 862x132px ですが、ボタン（603px）に合わせて収めます。 */
.ylp-cta__simlead {
	display: block;
	width: 100%;
	max-width: 603px;
	height: auto;
	margin: 16px auto 4px;
}

/* ボタン2種（支給画像）。★2026-09-03 ご指示で電話→診断の順、メール・LINEは削除 */
.ylp-cta__btns {
	margin-top: 6px;
}
.ylp-cta__btn {
	display: block;
	max-width: 603px;
	margin: 0px auto;
	line-height: 0;
	transition: transform .15s, opacity .15s;
}
.ylp-cta__btn:hover { opacity: .85; }
.ylp-cta__btn:active { transform: translateY(3px); }

/* トップページのCTA（★2026-09-09 ご指示）。メール／LINE／電話の3つが続くので、
   ボタン同士がくっついて見えないように間隔だけ空けます。
   「◯◯とは」ページなど電話→診断の2つのときは、間に .ylp-cta__simlead が入るため不要です。 */
.ylp-cta__btns--trio .ylp-cta__btn + .ylp-cta__btn { margin-top: 10px; }

.ylp-cta__btmcopy {
	max-width: 589px;
	margin-top: 16px;
}

.ylp-cases h2 { margin-top: 0; }

/* --------------------------------------------------
   CTAの中に開く診断シミュレーター（★2026-09-03。トップページのCTAでも同じです）
   「債務整理診断スタート」の直後に差し込まれるので、
   CTAの中央寄せの影響を受けないように戻しておきます。
-------------------------------------------------- */
.ylp-cta__btns .sim-embed {
	margin: 16px 0 4px;
	text-align: left;
}

/* PC（768px以上）では .sim-embed .wrap に余白を入れます（★2026-09-03 ご指示）。
   sim-embed.css 側に .sim-embed .wrap { padding: 0 } があり、そちらが後に読み込まれるため、
   要素名を1つ足して（div.wrap）詳細度で勝たせています。 */
@media screen and (min-width: 768px) {
	.sim-embed div.wrap { padding: 10px; }
}

/* シミュレーター本体の下の余白。単体ページは末尾の .foot-box が余白を持っていますが、
   埋め込み版にはそれが無いため、ここで足しています（.sim-embed .main-content の
   padding: 0 5% より詳細度を上げるため .wrap を重ねています）。 */
.sim-embed .wrap.main-content { padding-bottom: 40px; }

/* 埋め込みシミュレーターのヘッダー（★2026-09-03 ご指示）。
   sim-embed.css 側は 767px以下で padding: 10px 0 ですが、そちらが後に読み込まれるため、
   要素名を1つ足して（header.site-header）詳細度で勝たせています。 */
@media screen and (max-width: 767px) {
	.sim-embed header.site-header {
		padding: 10px 10px;
		min-height: 120px;
	}
}

/* 黒帯の末尾の「※」と、丸ポイントの下に出す注記（★2026-09-03 ご指示）。
   注記は本文より小さめ・控えめな色にしています。 */
.ylp-cta__h6-mark {
	font-size: .62em;
	vertical-align: super;
	margin-left: .15em;
}
.ylp-cta__note {
	margin: 10px 0 0;
	padding: 0 4px;
	font-size: .68rem;
	line-height: 1.6;
	color: #666;
	text-align: left;
}

/* --------------------------------------------------
   追従CTA（フッターの固定バー）★2026-09-03
   ご指示でボタン1つだけにしたので、1カラムにします。

   ★2026-09-18：中身が「債務整理診断」から「電話」に変わったため、
     クラス名を .fcta--sim / .side-cta__sim から .fcta--img / .side-cta__btn に
     変えました（支給画像のボタン1枚、という意味の汎用名）。
     今後ボタンの種類を差し替えても、CSS側は触らずに済みます。
-------------------------------------------------- */
.floating-cta__grid--single { grid-template-columns: 1fr; }
/* スマホ下部バーは支給画像のボタン（★2026-09-03 ご指示）。
   バーが高くなりすぎないよう幅で頭打ちにしています。 */
.fcta--img {
	background: none;
	padding: 0;
}
.fcta--img img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 auto;
}

/* PCの右下サイド追従も支給画像のボタン（★2026-09-03 ご指示）。 */
.side-cta__btn {
	display: block;
	line-height: 0;
	transition: transform .15s, opacity .15s;
}
.side-cta__btn:hover { opacity: .85; }
.side-cta__btn:active { transform: translateY(3px); }
.side-cta__btn img {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
}


/* --------------------------------------------------
   トップページ（body.home）だけの調整（★2026-09-03 ご指示）
   main.css / sim-embed.css は触らずここで上書きしています。
   ・sim-embed.css の .sim-embed .main-content / .result-box より
     詳細度を1つ上げる（body.home を足す）ことで勝たせています。
-------------------------------------------------- */
@media screen and (max-width: 680px) {
	/* スマホではCTAだけ画面いっぱいに（main.css の .wrap は左右20pxずつ空ける）。
	   :has() で「中に .ylp-cta を持つ .wrap」だけに絞っているので、
	   ほかのセクションの左右の余白はそのままです。 */
	body.home .wrap:has(> .ylp-cta) { width: 100%; }
}

body.home .sim-embed .main-content {
	padding: 0;
	padding-bottom: 20px;
}
body.home .sim-embed .result-box { margin: 3% 0; }

@media screen and (max-width: 768px) {
	body.home .sim-embed .sim-box {
		padding-top: 4px;
		width: 95%;
		margin: 0 auto;
	}
}


/* --------------------------------------------------
   ほかの手続きへの導線
   .yougo-hub … 用語集ページ（/yougo/）から3ページへ振り分けるカード
   .yougo-nav … 各ページ下部の「ほかの手続きも見る」
   見た目は同じなので、同じ指定をまとめています。
-------------------------------------------------- */
.yougo-hub,
.yougo-nav {
	display: grid;
	gap: 12px;
	margin-top: 18px;
}
@media screen and (min-width: 768px) {
	.yougo-hub,
	.yougo-nav { grid-template-columns: repeat(3, 1fr); }
}
.yougo-hub__item,
.yougo-nav__item {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--line-strong, #d6dcc9);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s, transform .15s;
}
.yougo-hub__item:hover,
.yougo-nav__item:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
.yougo-hub__item strong,
.yougo-nav__item strong {
	display: block;
	margin-bottom: 6px;
	font-size: 1.06rem;
	color: var(--brand-d, #4ba02b);
}
.yougo-hub__item span,
.yougo-nav__item span {
	display: block;
	font-size: .85rem;
	line-height: 1.7;
	color: #333;
}

/* --------------------------------------------------
   狭い画面の微調整
-------------------------------------------------- */
@media screen and (max-width: 374px) {
	.ylp-cta__note { font-size: .7rem; }
}

/* --------------------------------------------------
   広告用メインビジュアル（★2026-09-07）

   /nini-seiri/ ・ /kojin-saisei/ に直接入ってきた人にだけ出すMV。
   出し分けは page-templates/tpl-yougo-term.php の中のスクリプトで、
   hidden 属性を付け外ししています。ここでは「hidden なら消える」ことと
   画像の並びだけを決めています。

   MVを出すときも下の .page-hero（緑の見出し）はそのまま残します。
   そのため見出しは .page-hero の h1 が持ち、こちらは画像だけです
   （トップの .hero-mv は画像を h1 で包んでいますが、ここは包みません）。
-------------------------------------------------- */
.ylp-mv {
	/* 1820px より広い画面ではMVの左右に地色が出る。トップの .hero-mv と同じ淡い緑にして、
	   画像の四隅（葉のイラスト）となじませる。白のままだと縦の境目が見える。 */
	background: var(--bg-soft);
	line-height: 0;
}
/* hidden のときは必ず消す（テーマ側の display 指定に負けないよう明示） */
.ylp-mv[hidden] {
	display: none !important;
}
.ylp-mv__img {
	display: block;
	width: 100%;
	max-width: 1820px;
	height: auto;
	margin: 0 auto;
}