@charset "utf-8";

/* ===== セクションタイトル（ttl_xxx.png を囲む見出し） =====
   汎用：.section-ttl ／ 個別：.ttl-greeting, .ttl-blog ... */
.section-ttl {
	margin-bottom: clamp(24px, 3.4vw, 60px);
	text-align: center;
	line-height: 1;
}
.section-ttl img { display: inline-block; }
.section-ttl picture { display: contents; }

/* ===== 「〜へ」ボタン（背景は #fff の80%）。他ページでも使い回す ===== */
.btn-more-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(30px, 4.1vw, 80px);
}
.btn-more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 440px;
	max-width: 100%;
	height: clamp(52px, 3.45vw, 66px);
	padding-inline: 2.5em;
	border: 3px solid var(--color-main);
	background: rgb(255 255 255 / .8);
	color: var(--color-main);
	font-family: var(--font-sans);
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 700;
	letter-spacing: .08em;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-more::after {
	content: "";
	position: absolute;
	top: 50%;
	right: clamp(18px, 1.9vw, 36px);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor;
	transform: translateY(-50%);
	transition: transform var(--transition);
}
.btn-more:hover {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: #fff;
	opacity: 1;
}
.btn-more:hover::after { transform: translate(6px, -50%); }

@media (max-width: 767.98px) {
	.btn-more-wrap { justify-content: center; }
	.btn-more { width: 100%; max-width: 320px; }
	.section-ttl img { zoom: .8; } /* SPはタイトル画像を0.8倍 */
}

/* 汎用ボタン */
.btn {
	display: inline-block;
	padding: .8em 2.5em;
	border: 1px solid var(--color-main);
	background: var(--color-main);
	color: #fff;
	text-align: center;
}

/* ページネーション（the_posts_pagination） */
.pagination { margin-block: 30px; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.pagination .page-numbers {
	padding: .8em 1.2em;
	border: 1px solid var(--color-text);
	background: var(--color-bg);
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--color-text);
	color: #fff;
	opacity: 1;
}
.pagination .dots,
.pagination .prev,
.pagination .next { border-color: transparent; }

/* フォーム（Contact Form 7 など） */
.box-contact {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}
.box-contact :where(input:not([type=radio], [type=checkbox]), textarea, select) {
	width: 100%;
	padding: .6em .8em;
	border: 1px solid var(--color-border);
}

/* チェックボックス */
input[type="checkbox"] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	accent-color: var(--color-main);
}