/**
 * Foundation
 * デザイントークン・ベーススタイル（モバイルファースト）
 *
 * Breakpoints:
 * - md: 768px
 * - lg: 960px（SWELL準拠）
 * - xl: 1200px（任意）
 */

:root {
	/* Color（XD Assets） */
	--color-black: #000000;
	--color-text: #1f1f1f;
	--color-text-muted: #5d5d5d;
	--color-navy: #001234;
	--color-green: #b5d219;
	--color-blue: #0083cb;
	--color-blue-sky: #00a6ea;
	--color-blue-navy: #335daa;

	/* Color（派生・UI） */
	--color-bg: #ffffff;
	--color-bg-muted: #ececec;
	--color-bg-dark: #001234;
	--color-bg-gray: #707070;
	--color-border: #d0d5da;
	--color-border-selected: #00a6ea;
	--color-surface-selected: #e5f6fd;
	--color-white: #ffffff;

	/* Gradient */
	--grad-cta: linear-gradient(90deg, #b5d219 0%, #0083cb 50%);
	/*
	 * ボタンのホバー用「グラデーションスライド」向け.
	 * --grad-cta と同じ配色を全幅に配置し、background-size:200% と組み合わせて
	 * hover時に background-position をずらすことで色が流れるように見せる.
	 * （--grad-cta 自体は他の用途（罫線・文字グラデ等）で使われているため変更しない）.
	 */
	--grad-cta-slide: linear-gradient(90deg, #b5d219 0%, #0083cb 50%, #b5d219 100%);
	--grad-heading: linear-gradient(90deg, #0083cb 50%, #b5d219 100%);
	--grad-mv-overlay: linear-gradient(
		180deg,
		rgb(0 131 203 / 75%) 0%,
		rgb(181 210 25 / 75%) 100%
	);

	/* Filter icons */
	--color-filter-material: #335daa;
	--color-filter-shape: #0083cb;
	--color-filter-process: #00a6ea;
	--color-filter-size: #b5d219;

	/* Spacing */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--section-pad-y: 48px;
	--section-pad-x: 16px;

	/* Radius / Shadow */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-pill: 999px;
	--shadow-card: 0 4px 16px rgb(0 0 0 / 6%);

	/* Typography（1rem=16px。SWELLの SP 3.6vw を上書き） */
	--font-sans: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Sans",
		sans-serif;
	--font-source-sans-3: "Source Sans 3", sans-serif;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.5rem;
	--fs-2xl: 2rem;
	--fs-section: 1.75rem;
	--lh-body: 1.8;
	--lh-tight: 1.4;

	/* Layout */
	--content-width: 1280px;
	--header-height: 96px;

	/* SWELL html { font-size: var(--swl-fz--root) } の基準を固定 */
	--swl-fz--root: 16px;
}

@media (min-width: 768px) {
	:root {
		--section-pad-x: 20px;
	}
}

@media (min-width: 960px) {
	:root {
		--space-4: 40px;
		--space-5: 64px;
		--space-6: 80px;
		--section-pad-y: 80px;
		--section-pad-x: 24px;
		--fs-lg: 1.25rem;
		--fs-xl: 2rem;
		--fs-2xl: 3rem;
		--fs-section: 2.5rem;
		--header-height: 96px;
	}
}

/**
 * Base
 * rem 基準は :root の --swl-fz--root: 16px（SP含む）
 */
body {
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: #f5f6f7;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--color-blue);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

/* 電話番号リンク（tel:）はスマホ幅のときだけ発信できるようにし、それ以外はクリックできない通常の表示にする. */
@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}

/**
 * Utilities（最小限）
 */
.u-content {
	width: 100%;
	max-width: var(--content-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--section-pad-x);
	padding-left: var(--section-pad-x);
}

.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/*
 * ページネーション（the_posts_pagination()）共通スタイル.
 * サイト内のすべてのアーカイブ／一覧ページで共通利用する.
 * SWELL側の .page-numbers は display:block のままだと幅がコンテナいっぱいになり、
 * border-radius:50% と組み合わさって楕円形に潰れてしまうため、
 * 丸いページ番号ボタンとして正しく描画されるよう明示的に上書きする.
 */
.pagination {
	margin-top: var(--space-4);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 90%);
	color: var(--color-blue);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	text-decoration: none;
	opacity: 0.8;
}

.pagination .page-numbers.current {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.pagination .page-numbers.dots {
	color: var(--color-text-muted);
}

.pagination .page-numbers.next,
.pagination .page-numbers.prev {
	padding: 0;
}

.pagination .page-numbers.next img,
.pagination .page-numbers.prev img {
	display: block;
}

@media (min-width: 960px) {
	.pagination .page-numbers,
	.pagination .page-numbers.next img,
	.pagination .page-numbers.prev img {
		width: 44px;
		height: 44px;
	}
}