@charset "UTF-8";
/*
 * 家電ECO-BANK 告知ページ／お知らせバナー
 * 仕様：docs/SPEC_ecobank.md
 * クラスはすべて eco- で始める。SWELL のクラスは上書きしない
 */

:root {
	--eco-navy: #0d3b55;
	--eco-green: #5aa822;
	--eco-orange: #f28c28;
	--eco-bg: #f4f7f9;
	--eco-ink: #1f2328;
}


/* ---------- 共通 ---------- */
.eco-hero,
.eco-section,
.eco-footer {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.8;
}

.eco-section {
	padding: 56px 24px;
	background: #fff;
	color: var(--eco-ink);
}

.eco-section--bg {
	background: var(--eco-bg);
}

.eco-section--center {
	text-align: center;
}

/* 区切りの間隔を詰める2か所
 * ヒーロー→①：SWELL のブロック間の余白 2em（32px）+ 56 = 88px → 32 + 12 = 44px
 * 登録特典のボタン下端→注意の枠上端：56 + 32 + 56 = 144px → 40 + 0 + 0 = 40px
 *   ブロック間の余白を 0 にして、ページの背景色が帯状に見えないようにする
 *   SWELL には theme.json が無く、グループの中身は wp-block-group__inner-container で包まれるので、
 *   :has() の中は子（>）ではなく子孫で指す */
.eco-hero + .eco-section {
	padding-top: 12px;
}

.eco-section:has(+ .eco-section .eco-caution) {
	margin-bottom: 0;
	padding-bottom: 40px;
}

.eco-section:has(.eco-caution) {
	padding-top: 0;
}

/* 見出し：SWELL の見出し装飾を eco- の見出しだけ外す */
.eco-section .eco-heading,
.eco-hero .eco-hero__title,
.eco-card .eco-card__title,
.eco-caution .eco-caution__title {
	margin: 0 0 .5em;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-weight: 700;
	line-height: 1.4;
}

.eco-section .eco-heading::before,
.eco-section .eco-heading::after,
.eco-hero .eco-hero__title::before,
.eco-hero .eco-hero__title::after,
.eco-card .eco-card__title::before,
.eco-card .eco-card__title::after,
.eco-caution .eco-caution__title::before,
.eco-caution .eco-caution__title::after {
	content: none;
}

.eco-section .eco-heading {
	font-size: clamp(22px, 4.4vw, 32px);
}

.eco-section .eco-lead {
	margin: 0 0 32px;
}

/* カラム（スマホで1列） */
.eco-section .eco-cols,
.eco-hero .eco-hero__cols {
	gap: 24px;
	margin: 0;
}


/* ---------- ① ヒーロー ---------- */
.eco-hero {
	padding: 56px 24px;
	background: var(--eco-navy);
	color: #fff;
}

.eco-hero .eco-hero__cols {
	max-width: 1080px;
	margin: 0 auto;
	align-items: center;
}

/* 紺地で「BANK」が溶けないよう、ロゴの下に白い角丸の板を敷く */
.eco-hero .eco-hero__logo {
	box-sizing: border-box;
	max-width: calc(520px + 40px);
	margin: 0 0 24px;
	padding: 12px 20px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.eco-hero .eco-hero__logo img {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
}

.eco-hero .eco-hero__title {
	font-size: clamp(26px, 5.6vw, 40px);
}

.eco-hero .eco-hero__sub {
	display: inline-block;
	margin: 0 0 20px;
	padding-bottom: 4px;
	border-bottom: 4px solid var(--eco-orange);
	font-size: clamp(18px, 3.6vw, 24px);
	font-weight: 700;
	line-height: 1.5;
}

.eco-hero .eco-hero__text {
	margin: 0 0 24px;
	color: #fff;
}

.eco-hero .eco-hero__chara {
	text-align: center;
}

.eco-hero .eco-hero__chara img {
	width: 100%;
	max-width: 320px;
	height: auto;
}

/* 600px 以上：キャラクターは右寄せ・最大幅 380px */
@media (min-width: 600px) {
	.eco-hero .eco-hero__chara .wp-block-image {
		margin: 0;
	}

	.eco-hero .eco-hero__chara img {
		display: block;
		max-width: 380px;
		margin-left: auto;
	}
}

/* 782px 以上（2列）：帯の高さは文章の列で決め、キャラクターはその高さに収めて足元を LINE ボタンの下端にそろえる */
@media (min-width: 782px) {
	.eco-hero .eco-hero__chara {
		position: relative;
		align-self: stretch;
	}

	.eco-hero .eco-hero__chara img {
		position: absolute;
		right: 0;
		bottom: 0;
		width: auto;
		max-width: min(100%, 380px);
		max-height: 100%;
	}
}


/* ---------- カード・番号バッジ・タグ（②③④） ---------- */
.eco-card {
	box-sizing: border-box;
	height: 100%;
	padding: 28px 24px;
	border-radius: 12px;
	background: var(--eco-bg);
	text-align: left;
}

.eco-section--bg .eco-card {
	background: #fff;
}

.eco-section--center .eco-card {
	text-align: center;
}

.eco-card .eco-card__title {
	font-size: 20px;
}

.eco-card .eco-card__text {
	margin: 0;
}

.eco-card .eco-badge {
	display: inline-block;
	min-width: 48px;
	margin: 0 0 12px;
	padding: 2px 14px;
	border-radius: 999px;
	background: var(--eco-navy);
	color: #fff;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}

.eco-card .eco-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.eco-tags .eco-tag {
	margin: 0;
	padding: 2px 12px;
	border: 1px solid var(--eco-green);
	border-radius: 999px;
	background: #fff;
	color: var(--eco-navy);
	font-size: 16px;
	line-height: 1.6;
}


/* ---------- ④ 登録特典 ---------- */
.eco-section .eco-card--accent {
	max-width: 640px;
	margin: 0 auto 24px;
	border: 3px solid var(--eco-orange);
	background: #fff;
	text-align: center;
}

.eco-card--accent .eco-card__label {
	margin: 0 0 4px;
	font-weight: 700;
}

.eco-card--accent .eco-card__main {
	margin: 0;
	color: var(--eco-orange);
	font-size: clamp(22px, 4.4vw, 30px);
	font-weight: 700;
	line-height: 1.4;
}

.eco-section .eco-benefits {
	max-width: 880px;
	margin: 0 auto;
}


/* ---------- ボタン（高さ 48px 以上） ---------- */
.eco-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.eco-section .eco-btns {
	margin-top: 32px;
}

.eco-section--center .eco-btns,
.eco-footer .eco-btns {
	justify-content: center;
}

.wp-block-button.eco-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 32px;
	border: 2px solid var(--eco-green);
	border-radius: 999px;
	background: var(--eco-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.wp-block-button.eco-btn .wp-block-button__link:hover {
	opacity: .85;
}

.wp-block-button.eco-btn--outline .wp-block-button__link {
	border-color: #fff;
	background: transparent;
	color: #fff;
}


/* ---------- ⑤ 注意 ---------- */
.eco-caution {
	position: relative;
	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	padding: 20px 20px 20px 72px;
	border: 3px solid var(--eco-orange);
	border-radius: 12px;
	background: #fff;
	color: var(--eco-ink);
}

.eco-caution::before {
	content: "!";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--eco-orange);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}

.eco-caution .eco-caution__title {
	margin-bottom: 0;
	font-size: 20px;
}

.eco-caution .eco-caution__text {
	margin: 0;
}


/* ---------- ⑥ 運営・お問い合わせ ---------- */
.eco-footer {
	padding: 40px 24px;
	background: var(--eco-navy);
	color: #fff;
	text-align: center;
}

.eco-footer .eco-footer__text {
	margin: 0 0 .4em;
	color: #fff;
}

.eco-footer .eco-btns {
	margin-top: 24px;
}


/* ---------- トップ用お知らせバナー ---------- */
.eco-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	box-sizing: border-box;
	padding: 18px 20px;
	border-radius: 8px;
	background: var(--eco-navy);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	color: #fff;
}

/* ヒーローと同じ白い板。板の高さは 56px（画像 48px＋上下 4px） */
.eco-banner .eco-banner__logo {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 4px 8px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.eco-banner .eco-banner__logo img {
	display: block;
	width: auto;
	height: 48px;
}

/* すぐ下の SWELL の h2 見出し帯との間を元の約半分にする（main.css の .post_content h2）
 * h2 の上の余白は h2 の文字の 4 倍＝本文の 4.8em（599px 以下）／5.6em（600px 以上）。
 * バナーの下の余白はこれと重なって大きい方だけが効くので、負の値を足して半分にする。
 * .eco-banner は文字の大きさを指定しないので、1em は本文の文字の大きさと同じ */
.post_content > .eco-banner {
	margin-bottom: -2.4em;
}

/* 600px 以上：左右の端を h2 見出し帯にそろえる（main.css の .post_content>h2 と同じ変数を使う） */
@media (min-width: 600px) {
	.post_content > .eco-banner {
		margin-right: var(--swl-h2-margin--x, 0);
		margin-bottom: -2.8em;
		margin-left: var(--swl-h2-margin--x, 0);
	}
}

/* 文の部分：PC・スマホとも2行（上に「NEW 新サービス」、下にサービス名） */
.eco-banner .eco-banner__text {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	color: #fff;
	font-weight: 700;
}

/* 告知ページのヒーローの1行目（ロゴの上）もバナーの kicker と同じ見た目 */
.eco-banner .eco-banner__kicker,
.eco-hero .eco-hero__kicker {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .06em;
}

.eco-hero .eco-hero__kicker {
	margin: 0 0 10px;
}

/* 「新サービス」の前の小さな印（バナーとヒーローで共通） */
.eco-banner .eco-banner__new,
.eco-hero .eco-banner__new {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--eco-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
}

/* text-indent は1行目にだけ効くので、PC で改行した2行目の「は」は『の黒い部分の位置から始まる */
.eco-banner .eco-banner__title {
	display: block;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-indent: -.5em; /* 先頭の『の空き（文字の左半分）だけ左にぶら下げる */
	text-wrap: pretty;
}

/* 「くわしく見る」ボタンはオレンジ（バナーの中だけ） */
.eco-banner .wp-block-button.eco-btn .wp-block-button__link {
	border-color: var(--eco-orange);
	background: var(--eco-orange);
	color: #fff;
}

/* PC：バナーを一回り大きく（上下の余白 24px・ロゴの板 72px＝画像 64px＋上下 4px・ボタン 56px） */
@media (min-width: 600px) {
	.eco-banner {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.eco-banner .eco-banner__logo img {
		height: 64px;
	}

	/* 必ず2行（『家電ECO-BANK』／はじまりました）。br 以外では折り返さない */
	.eco-banner .eco-banner__title {
		font-size: 24px;
		white-space: nowrap;
	}

	.eco-banner .wp-block-button.eco-btn .wp-block-button__link {
		min-height: 56px;
		font-size: 17px;
	}
}


/* ---------- スマホ（375px 幅で1列・横スクロールを出さない） ---------- */
@media (max-width: 781px) {
	.eco-hero .eco-hero__cols,
	.eco-section .eco-cols {
		flex-wrap: wrap;
	}

	.eco-hero .eco-hero__cols > .wp-block-column,
	.eco-section .eco-cols > .wp-block-column {
		flex-basis: 100%;
		width: 100%;
	}
}

@media (max-width: 599px) {
	.eco-hero,
	.eco-section {
		padding: 40px 16px;
	}

	/* 詰める2か所（スマホ）：32 + 40 = 72px → 32 + 4 = 36px／40 + 32 + 40 = 112px → 28 + 0 + 0 = 28px */
	.eco-hero + .eco-section {
		padding-top: 4px;
	}

	.eco-section:has(+ .eco-section .eco-caution) {
		padding-bottom: 28px;
	}

	.eco-hero .eco-hero__logo {
		max-width: calc(520px + 28px);
		padding: 10px 14px;
	}

	.eco-footer {
		padding: 32px 16px;
	}

	.eco-card {
		padding: 24px 18px;
	}

	.eco-caution {
		padding: 64px 18px 18px;
	}

	.eco-banner {
		padding: 16px 16px;
	}

	.eco-banner .eco-banner__logo img {
		max-width: 100%;
	}

	/* スマホは改行を消し、幅に合わせて折り返す。編集画面で br のクラスが消えても効くよう title の中の br で指す */
	.eco-banner .eco-banner__title br {
		display: none;
	}

	.wp-block-button.eco-btn,
	.wp-block-button.eco-btn .wp-block-button__link {
		width: 100%;
	}
}