/**
 * お問い合わせページ（/contact/・templates/page-contact.html）だけの見た目。inc/cf7.php が is_page( 'contact' ) のときだけ読む。
 * 本文はコアのブロック（setup-data/page-contact.html）。ここはブロックの設定で表せない装飾だけ。
 *   - はにわの画像：本文の画像に付く枠・影・角丸を外す（className is-contact-haniwa）
 *   - 「こんな相談が多いです」：リストを白い丸い吹き出し（下向きのしっぽ）にして並べる（hpcode.co.jp トップの bubbles-wrap と同じ考え方）
 *   - 「送ったあとの流れ」：丸数字（地 button #F8D9A8・紺の太字）を細い縦線でつなぐ
 */

/* リード文：文節で折り返す（「お問い合わ／せ」「…しま／す。」のような切れ方をさせない）。対応していないブラウザは今までどおり */
.wp-block-post-content p.is-contact-lead {
	word-break: auto-phrase;
	text-wrap: pretty;
}

.wp-block-post-content .wp-block-image.is-contact-haniwa {
	flex-shrink: 0;
	margin: 0;
}

.wp-block-post-content .wp-block-image.is-contact-haniwa img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/*
 * こんな相談が多いです（読者の声の吹き出し）。hpcode.co.jp トップの「こんな小さなことから、ご相談ください」
 * （リストのスタイル bubbles-wrap：白い丸い箱・影・下向きのしっぽを左右交互・横に並べて折り返し）と同じ考え方。
 * haniwaman では傾けない（CEO 方針）・人物イラストは付けない・色はブログの紺（ink）と白。上下に少しずらして「声」らしく。
 * しっぽは clip-path の三角（地と同じ白）。PC は左カラムの中で折り返し（おおむね2つずつ）、スマホは縦に並べて左右交互に寄せる。
 */
.wp-block-post-content ul.wp-block-list.is-contact-voices {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 22px 12px;
	/* 上の余白は親グループの blockGap（16px）に任せる＝margin-top は 0 にしない（2026-10-14：0 にしていて見出しとの間が詰まっていた） */
	margin-bottom: 0;
	margin-inline: 0;
	padding: 4px 0 10px;
	list-style: none;
}

.wp-block-post-content .is-contact-voices > li {
	position: relative;
	margin: 0;
	padding: 10px 18px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--base);
	/* 影はしっぽ（::after の clip-path の三角）込みの形全体に出したいので box-shadow でなく drop-shadow（shadow soft とほぼ同じ強さ） */
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.wp-block-post-content .is-contact-voices > li::after {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 26px;
	width: 16px;
	height: 10px;
	background-color: inherit;
	clip-path: polygon(0 0, 100% 0, 30% 100%);
}

.wp-block-post-content .is-contact-voices > li:nth-child(even)::after {
	right: 26px;
	left: auto;
	clip-path: polygon(0 0, 100% 0, 70% 100%);
}

.wp-block-post-content .is-contact-voices > li:nth-child(4n + 1) { transform: translateY(2px); }
.wp-block-post-content .is-contact-voices > li:nth-child(4n + 2) { transform: translateY(-4px); }
.wp-block-post-content .is-contact-voices > li:nth-child(4n + 3) { transform: translateY(4px); }

@media (width <= 640px) {
	.wp-block-post-content ul.wp-block-list.is-contact-voices {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 18px;
	}

	.wp-block-post-content .is-contact-voices > li {
		max-width: 92%;
		transform: none !important;
	}

	.wp-block-post-content .is-contact-voices > li:nth-child(even) {
		align-self: flex-end;
	}
}

/* 送ったあとの流れ */
.wp-block-post-content ol.wp-block-list.is-contact-steps {
	/* 見出し「送ったあとの流れ」との間は親グループの blockGap（16px）。margin: 0 だと上書きして 0px になっていた（2026-10-14 修正） */
	margin-bottom: 0;
	margin-inline: 0;
	padding: 0;
	list-style: none;
	counter-reset: contact-step;
}

.wp-block-post-content .is-contact-steps li {
	position: relative;
	min-height: 32px;
	margin: 0;
	padding-top: 3px;
	padding-left: 48px;
	line-height: 1.7;
	counter-increment: contact-step;
}

.wp-block-post-content .is-contact-steps li + li {
	margin-top: 20px;
}

.wp-block-post-content .is-contact-steps li::before {
	content: counter(contact-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--button);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	line-height: 1;
}

.wp-block-post-content .is-contact-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 32px;
	bottom: -20px;
	left: 15px;
	width: 2px;
	background-color: var(--wp--preset--color--button-hover);
}