/* =========================================================
   表側(style.css の前)とブロックエディタの両方で読む共通部分。
   色・寸法はすべて CSS 変数で持つ。値はカスタマイザー「色」で変更でき、
   inc/front/enqueue.php が :root を上書きする。ここに色を直書きしない。
   ========================================================= */
:root {
	--primary: #00cc00;         /* メインカラー(見出し線・ボタン・フッター線) */
	--primary-dark: #00a300;    /* 濃いメインカラー(アイコン丸・ボタン枠) */
	--primary-vivid: #00e000;   /* ボタンのホバー */
	--on-primary: #ffffff;      /* メインカラー地に乗る文字色 */
	--ink: #333333;             /* 本文の文字色 */
	--ink-light: #666666;       /* 日付など薄い文字 */
	--paper: #ffffff;           /* 背景 */
	--paper-accent: #f5f5f5;    /* お問い合わせ枠などの薄い背景 */
	--border: rgba(0, 0, 0, 0.2);
	--hr: rgba(0, 0, 0, 0.08);
	--link: #666666;
	--link-hover: #1e73be;
	--container: 1140px;
	--content-narrow: 960px;
	--gutter: 15px;
	--font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ---------- 標準ボタン(本文) ---------- */
.wp-block-button__link { font-weight: 700; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--primary-dark); color: var(--primary-dark); background: transparent; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--primary-dark); color: var(--on-primary); }
.wp-block-button .wp-block-button__link.no-border-radius, .wp-block-button.no-border-radius .wp-block-button__link { border-radius: 0; }
.wp-block-button.kinds-btn-lg .wp-block-button__link { font-size: 1.15rem; padding: 0.8em 2.4em; }

/* ---------- お問い合わせセクション(kinds/contact-section ブロック) ---------- */
.kinds-contact { background: var(--paper-accent); padding: 1.6rem 1.5rem; text-align: center; margin: 2rem 0; border-radius: 4px; }
.kinds-contact-catch, .kinds-contact-time { display: block; font-size: 14px; line-height: 1.4; }
.kinds-contact-tel { display: block; padding: 6px 0; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--primary-dark); text-decoration: none; }
.kinds-contact-tel svg { width: 0.9em; height: 0.9em; vertical-align: -0.08em; margin-right: 0.3rem; }
.kinds-contact-txt { margin: 0 0 1rem; }
.kinds-contact-btn { display: block; max-width: 520px; margin: 0 auto; padding: 0.7rem 1.5rem 0.8rem; background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary-dark); border-radius: 4px; text-decoration: none; line-height: 1.3; transition: 0.2s; }
.kinds-contact-btn:hover { background: var(--primary-vivid); color: var(--on-primary); }
.kinds-contact-btn-txt { display: block; font-size: 1.15rem; font-weight: 700; }
.kinds-contact-btn-txt svg { width: 1em; height: 1em; vertical-align: -0.12em; margin: 0 0.2em; }
.kinds-contact-btn-sub { display: block; font-size: 12px; margin-top: 0.25rem; }
@media (max-width: 359px) {
	.kinds-contact { padding-right: 0.75rem; padding-left: 0.75rem; }
	.kinds-contact-btn { padding-right: 0.5rem; padding-left: 0.5rem; }
	.kinds-contact-btn-txt { font-size: 1rem; }
}
@media (min-width: 768px) {
	.kinds-contact.is-horizontal { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 1.5rem; }
	.kinds-contact.is-horizontal .kinds-contact-txt { margin: 0; }
	.kinds-contact.is-horizontal .kinds-contact-btn { margin: 0; flex: 0 0 auto; min-width: 320px; text-align: center; }
}

/* ---------- 特徴3つ(同期パターン「キンズの特徴」) ---------- */
.kinds-feature { text-align: center; }
.kinds-feature-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: var(--primary-dark); color: var(--on-primary); }
.kinds-feature-icon svg { width: 36px; height: 36px; }
.kinds-feature h3 a { color: inherit; text-decoration: none; }
.kinds-feature h3 a:hover { color: var(--primary-dark); }
.kinds-feature p { line-height: 1.8; margin-bottom: 0.5em; }

/* ---------- 枠付きボックス(core/group に kinds-box) ---------- */
.kinds-box { border: 2px solid var(--primary-dark); padding: 1.2em 1.5em 0.5em; }
.kinds-box h4 { color: var(--primary-dark); display: flex; align-items: center; gap: 0.4em; }
/* 見出し前の建物アイコン(-webkit- 付きと標準で同じ画像を使うため変数にする) */
.kinds-box h4::before {
	--kinds-box-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M48 0C21.5 0 0 21.5 0 48V464c0 26.5 21.5 48 48 48h96V432c0-26.5 21.5-48 48-48s48 21.5 48 48v80h96c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H48zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm112-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM80 96h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V112zM272 96h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16z'/></svg>");
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--kinds-box-icon) center / contain no-repeat;
	mask: var(--kinds-box-icon) center / contain no-repeat;
}