/* ==============================================================
   blocks.css = 汎用ブロック層
   読み込み順は foundation -> blocks -> components -> home。
   ここは .branco-home--content 単一クラススコープの弱い詰めに保ち、
   文脈クラス層（components.css / home.css）が後勝ちで上書きする。
   ============================================================== */

/* === L1: SWELL変数上書き ===
   ここに置くのは「カスタマイザーに設定項目が無い」静的変数だけ。
   色（メイン/文字/リンク/見出し/グラデ/FAQ/リスト/キャプション/吹き出し/セル/ヘッダー/フッター）は
   カスタマイザーが正本。CSSで固定しない。 */
.branco-home--content {
	--color_gray: var(--branco-zinc-100);
	--color_border: var(--branco-line);
	--color_border--table: var(--branco-line-strong);
	--swl-box_shadow: 0 1px 0 rgba(24, 24, 27, 0.04);
	--swl-img_shadow: 0 1px 0 rgba(24, 24, 27, 0.04);
	--swl-btn_shadow: none;
	--swl-color_shadow: rgba(24, 24, 27, 0.08);
	--swl-step_arrow_color: var(--branco-zinc-300);
	--table-border: 1px solid var(--color_border--table);
}

/* === SWELL構造正規化: groupに注入される__inner-containerをレイアウト透過にする
   （alignfull配下の900px拘束と、grid直下に挟まる余計なラッパーを無効化） === */
.branco-home--content .wp-block-group__inner-container {
	display: contents;
}

.branco-home--content .wp-block-group__inner-container > div {
	margin-bottom: 0;
}

/* === L3: SWELL見出し装飾のリセット === */
.branco-home--content h2,
.branco-home--content h3,
.branco-home--content h4 {
	background: transparent;
	border: 0;
	padding: 0;
}

.branco-home--content h2::before,
.branco-home--content h2::after,
.branco-home--content h3::before,
.branco-home--content h3::after,
.branco-home--content h4::before,
.branco-home--content h4::after {
	display: none;
	content: none;
}

/* === 見出し標準 === */
.branco-home--content h2 {
	margin: 0 0 clamp(22px, 2.6vw, 36px);
	color: var(--color_htag, var(--color_main));
	font-family: var(--branco-font-en);
	font-size: clamp(calc(var(--swl-fz--content, 16px) * 2.125), 4.4vw, calc(var(--swl-fz--content, 16px) * 3.75));
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: 0;
}

.branco-home--content h3 {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	color: var(--color_htag, var(--color_main));
	font-size: clamp(calc(var(--swl-fz--content, 16px) * 1.25), 1.7vw, calc(var(--swl-fz--content, 16px) * 1.625));
	font-weight: 700;
	line-height: 1.4;
}

.branco-home--content h4 {
	margin: 0 0 12px;
	color: var(--color_htag, var(--color_main));
	font-size: clamp(var(--swl-fz--content, 16px), 1.2vw, calc(var(--swl-fz--content, 16px) * 1.125));
	font-weight: 700;
	line-height: 1.5;
}

/* 本文の後に来る見出しは上に呼吸を入れる */
.branco-home--content h2:where(:not(:first-child)) {
	margin-top: clamp(56px, 7vw, 96px);
}

.branco-home--content h3:where(:not(:first-child)),
.branco-home--content h4:where(:not(:first-child)) {
	margin-top: clamp(32px, 4vw, 56px);
}

/* === 段落 === */
/* :whereで詳細度ゼロ化。素のpだけに効かせ、components/home側の(0,2,0)級の段落スタイル
   (section__label/lead、card__label、mission__body p等)を潰さない */
.branco-home--content :where(p:not(.branco-ui-part)) {
	margin: 0 0 1.4em;
	color: var(--color_text, var(--branco-zinc-700));
	font-family: var(--swl-font_family);
	font-size: var(--swl-fz--content, 16px);
	font-weight: var(--swl-font_weight);
	line-height: 2;
}

/* === リスト（SWELLのグローバルreset list-style:none をスコープ内で戻す） === */
.branco-home--content ul {
	list-style: disc;
}

.branco-home--content ol {
	list-style: decimal;
}

.branco-home--content ul,
.branco-home--content ol {
	margin: 0 0 1.6em;
	padding-left: 1.4em;
	color: var(--color_text, var(--branco-zinc-700));
	font-family: var(--swl-font_family);
	font-size: var(--swl-fz--content, 16px);
	font-weight: var(--swl-font_weight);
	line-height: 1.9;
}

.branco-home--content li {
	margin: 0.35em 0;
}

.branco-home--content li::marker {
	color: var(--color_main, var(--branco-zinc-500));
}

/* === SWELLボタン === */
.branco-home--content .swell-block-button {
	--the-fz: var(--swl-fz--content, 16px);
}

.branco-home--content .swell-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(54px, 4.4vw, 66px);
	border: 1px solid var(--color_main, var(--branco-zinc-950));
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
	font-weight: 800;
	line-height: 1;
	padding: 0 clamp(26px, 2.8vw, 42px);
	box-shadow: none;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.branco-home--content .swell-block-button__link:hover,
.branco-home--content .swell-block-button__link:focus-visible {
	background: transparent;
	color: var(--color_main, var(--branco-zinc-950));
	transform: translateY(-2px);
	opacity: 1;
}

/* 副CTA（枠線スタイル） */
.branco-home--content .is-style-btn_line .swell-block-button__link {
	background: transparent;
	border-color: var(--branco-line-strong);
	color: var(--color_main, var(--branco-zinc-950));
}

.branco-home--content .is-style-btn_line .swell-block-button__link:hover,
.branco-home--content .is-style-btn_line .swell-block-button__link:focus-visible {
	background: var(--color_main, var(--branco-zinc-950));
	border-color: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
}

/* === Step 2: 個別ブロック上書き（形のみ。色はカスタマイザー） === */
.branco-home--content .c-balloon__text {
	border-radius: 4px;
}

.branco-home--content .cap_box {
	border-radius: 4px;
	box-shadow: var(--swl-box_shadow);
}

.branco-home--content .cap_box_ttl,
.branco-home--content .cap_box_content {
	border-radius: 4px;
}

.branco-home--content .swell-block-linkList {
	--the-radius: 4px;
	list-style: none;
	padding-left: 0;
}

.branco-home--content .swell-block-linkList__link {
	border-color: var(--branco-line);
	border-radius: 4px;
	color: var(--color_link, var(--color_main));
}

.branco-home--content .p-postListWrap {
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .p-postList__thumb,
.branco-home--content .p-postList__thumb::before {
	border-radius: 4px;
}

.branco-home--content .p-postList__title {
	color: var(--color_htag, var(--color_main));
	font-family: var(--swl-font_family);
	font-weight: 700;
}

.branco-home--content .p-postList__excerpt,
.branco-home--content .p-postList__meta {
	color: var(--color_text, var(--branco-zinc-500));
}

.branco-home--content .c-postThumb__cat {
	border-radius: 4px;
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
}

.branco-home--content .is-style-more_btn > a.btn_text {
	border-color: var(--color_main, var(--branco-zinc-950));
	border-radius: 4px;
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
	box-shadow: none;
}

.branco-home--content .c-bannerLink {
	border-radius: 4px;
	box-shadow: var(--swl-img_shadow);
	overflow: hidden;
}

.branco-home--content .c-bannerLink__img,
.branco-home--content .c-bannerLink__label,
.branco-home--content .c-bannerLink__text {
	border-radius: 4px;
}

.branco-home--content .c-bannerLink__label {
	background: var(--color_content_bg, #ffffff);
	color: var(--color_main, var(--branco-zinc-950));
}

.branco-home--content .-cap-ctr_button .c-bannerLink__label {
	border-radius: 4px;
}

.branco-home--content .c-bannerLink__title,
.branco-home--content .c-bannerLink__description {
	color: currentColor;
}

.branco-home--content .is-style-simple .c-tabList__button {
	border-color: var(--branco-line);
	color: var(--color_text, var(--branco-zinc-500));
}

.branco-home--content .is-style-simple .c-tabList__button[aria-selected="true"] {
	border-color: var(--branco-line-strong);
	background: var(--branco-zinc-100);
	color: var(--color_main, var(--branco-zinc-950));
}

.branco-home--content .is-style-simple .c-tabBody {
	border-color: var(--branco-line);
}

.branco-home--content .is-style-note_box,
.branco-home--content .is-style-stitch,
.branco-home--content .is-style-crease {
	border-color: var(--branco-line);
	border-radius: 4px;
	background: var(--branco-zinc-100);
	color: var(--color_text, var(--branco-zinc-700));
	box-shadow: var(--swl-box_shadow);
}

.branco-home--content table {
	border-color: var(--color_border--table);
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content th,
.branco-home--content td {
	border-color: var(--color_border--table);
}

.branco-home--content .is-style-stripes tbody tr:nth-child(odd) {
	background: var(--branco-zinc-100);
}

.branco-home--content .swl-cell-bg {
	--cell-icon-color: var(--color_main, var(--branco-zinc-950));
}

.branco-home--content blockquote {
	border-left: 1px solid var(--color_main, var(--branco-zinc-950));
	border-radius: 4px;
	background: var(--branco-zinc-100);
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content blockquote cite {
	color: var(--color_text, var(--branco-zinc-500));
	opacity: 1;
}

.branco-home--content .wp-block-separator {
	border-color: var(--branco-line-strong);
	color: var(--branco-line-strong);
}

.branco-home--content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(54px, 4.4vw, 66px);
	border: 1px solid var(--color_main, var(--branco-zinc-950));
	border-radius: 4px;
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
	font-weight: 800;
	line-height: 1;
	padding: 0 clamp(26px, 2.8vw, 42px);
	box-shadow: none;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.branco-home--content .wp-block-button__link:hover,
.branco-home--content .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--color_main, var(--branco-zinc-950));
	transform: translateY(-2px);
	opacity: 1;
}

.branco-home--content .is-style-outline .wp-block-button__link {
	border-color: var(--branco-line-strong);
	background: transparent;
	color: var(--color_main, var(--branco-zinc-950));
}

.branco-home--content .is-style-outline .wp-block-button__link:hover,
.branco-home--content .is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--color_main, var(--branco-zinc-950));
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
}

/* === Step 2: ブロック仕上げ === */
.branco-home--content .swell-block-faq__item {
	border-color: var(--branco-line);
	border-radius: 4px;
}

.branco-home--content .is-style-faq-stripe .faq_q {
	background: var(--branco-zinc-100);
}

.branco-home--content .is-style-faq-box .swell-block-faq__item,
.branco-home--content .is-style-faq-border .swell-block-faq__item {
	border-color: var(--branco-line);
}

.branco-home--content .swell-block-step {
	--swl-step_arrow_color: var(--branco-zinc-300);
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-step__item {
	border-color: var(--branco-line);
	border-radius: 4px;
}

.branco-home--content .swell-block-step__number,
.branco-home--content .swell-block-step__title {
	color: var(--color_htag, var(--color_main));
}

.branco-home--content .swell-block-step__body {
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-accordion__item {
	border-color: var(--branco-line);
	border-radius: 4px;
	background: var(--color_content_bg, #ffffff);
	overflow: hidden;
}

.branco-home--content .swell-block-accordion__title {
	background: var(--branco-zinc-100);
	color: var(--color_htag, var(--color_main));
}

.branco-home--content .is-style-main .swell-block-accordion__title {
	background: var(--color_main, var(--branco-zinc-950));
	color: var(--color_content_bg, #ffffff);
}

.branco-home--content .swell-block-accordion__body {
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-dl {
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-dl__dt {
	color: var(--color_htag, var(--color_main));
	font-weight: 700;
}

/* vtabelはdtがメイン色になるため、本文背景色を文字色にする */
.branco-home--content .is-style-vtabel .swell-block-dl__dt {
	color: var(--color_content_bg, #ffffff);
}

.branco-home--content .swell-block-dl__dd {
	border-color: var(--branco-line);
}

.branco-home--content .swell-block-fullWide {
	background-color: var(--color_main_thin, var(--branco-zinc-100));
}

.branco-home--content .swell-block-fullWide__inner {
	max-width: var(--container_size);
}

.branco-home--content .swell-block-columns {
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-column {
	border-radius: 4px;
}

.branco-home--content .is-style-clmn-border .swell-block-column {
	border-color: var(--branco-line);
}

.branco-home--content .is-style-clmn-shadow .swell-block-column {
	border: 1px solid var(--branco-line);
	background: var(--color_content_bg, #ffffff);
	box-shadow: var(--swl-box_shadow);
}

.branco-home--content .shadow_on .wp-block-column {
	border: 1px solid var(--branco-line);
	border-radius: 4px;
	background: var(--color_content_bg, #ffffff);
	box-shadow: var(--swl-box_shadow);
}

.branco-home--content .border_gray .wp-block-column,
.branco-home--content .border_main .wp-block-column {
	border-color: var(--branco-line);
	border-radius: 4px;
}

.branco-home--content .swell-block-box-menu {
	--the-icon-color: var(--color_main, var(--branco-zinc-950));
	--the-icon-gradient: linear-gradient(45deg, var(--color_main, var(--branco-zinc-950)), var(--color_text, var(--branco-zinc-700)));
	--the-border-color: var(--branco-line);
	color: var(--color_text, var(--branco-zinc-700));
}

.branco-home--content .swell-block-box-menu__link {
	border-color: var(--branco-line);
	border-radius: 4px;
	box-shadow: none;
}

.branco-home--content .swell-block-box-menu__figure,
.branco-home--content .swell-block-box-menu__text {
	color: currentColor;
}

.branco-home--content .swell-block-review__inner {
	border-color: var(--color_main, var(--branco-zinc-950));
	border-radius: 4px;
	box-shadow: var(--swl-box_shadow);
}

.branco-home--content .swell-block-review__merits,
.branco-home--content .swell-block-review__demerits {
	--color_list_good: var(--color_main, var(--branco-zinc-950));
	--color_list_bad: var(--color_text, var(--branco-zinc-500));
}

/* Column post list: SWELLのカード構造は保ち、余白と0件表示だけ整える */
.branco-column-latest .p-postListWrap {
	margin-top: clamp(34px, 4vw, 56px);
}

.branco-column-latest .p-postList {
	row-gap: 24px;
}

.branco-column-latest .p-postList__link {
	border: 1px solid var(--branco-line);
	border-radius: 4px;
	background: #ffffff;
	box-shadow: none;
	overflow: hidden;
}

.branco-column-latest .p-postList__link:hover .p-postList__title,
.branco-column-latest .p-postList__link:focus-visible .p-postList__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) {
	border: 1px solid var(--branco-line-strong);
	border-radius: 4px;
	background: #ffffff;
	color: var(--branco-zinc-700);
	font-family: var(--swl-font_family);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	padding: 28px;
}

.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) .is-style-more_btn {
	display: block;
	width: min(100%, 780px);
	margin: 22px auto 0;
}

.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 0;
	border: 1px solid var(--branco-zinc-950);
	border-radius: 4px;
	background: #ffffff;
	color: var(--branco-zinc-950);
	font-family: var(--branco-font-en);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	padding: 0 16px;
	text-decoration: none;
	transform: none;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a:hover,
.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a:focus-visible {
	border-color: var(--branco-zinc-950);
	background: var(--branco-zinc-950);
	color: #ffffff;
	opacity: 1;
	transform: none;
}

.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a::before,
.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a::after {
	display: none;
	content: none;
}

@media (max-width: 767px) {
	.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) {
		padding: 24px;
	}

	.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) .is-style-more_btn {
		width: 100%;
	}

	.branco-column-latest .p-postListWrap:not(:has(.p-postList__item)) a {
		width: 100%;
	}
}