/* =========================================================
   Hayate — main.css
   軽量・高速を優先。Webフォント読み込みなし（システムフォント）。
   色はCSS変数で集中管理（カスタマイザーから --hy-accent を上書き）。
   ========================================================= */

:root {
	--hy-accent: #1a5fb4;
	--hy-ink: #1a1a1a;
	--hy-muted: #666;
	--hy-line: #e2e2e2;
	--hy-bg: #fff;
	--hy-bg-soft: #f6f7f9;
	--hy-container: 1080px;
	--hy-content: 720px;
	--hy-radius: 6px;
	--hy-gap: clamp(1rem, 4vw, 2rem);
	--hy-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* ---- リセット最小限 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--hy-font);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--hy-ink);
	background: var(--hy-bg);
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--hy-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.4; font-weight: 700; }

/* ---- レイアウト ---- */
.container {
	width: 100%;
	max-width: var(--hy-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
}
.site-main { padding-block: clamp(2rem, 6vw, 4rem); }

/* ---- アクセシビリティ ---- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0;
	z-index: 1000; padding: .75rem 1rem;
	background: var(--hy-ink); color: #fff;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--hy-accent); outline-offset: 2px; }

/* ---- ヘッダー ---- */
.site-header {
	border-bottom: 1px solid var(--hy-line);
	background: var(--hy-bg);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}
.site-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hy-ink);
}
.site-description { margin: .1rem 0 0; font-size: .8rem; color: var(--hy-muted); }
.custom-logo { display: block; height: auto; }

/* ---- ナビ ---- */
.primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0; padding: 0;
	list-style: none;
}
.primary-nav__list a { color: var(--hy-ink); font-weight: 500; }
.primary-nav__list a:hover { color: var(--hy-accent); text-decoration: none; }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	background: var(--hy-bg);
	cursor: pointer;
	position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 50%; transform: translateX(-50%);
	width: 20px; height: 2px;
	background: var(--hy-ink);
	transition: .2s;
}
.nav-toggle__bar { top: 50%; margin-top: -1px; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }

@media (max-width: 768px) {
	.nav-toggle { display: block; }
	.primary-nav {
		display: none;
		width: 100%;
		flex-basis: 100%;
	}
	.primary-nav.is-open { display: block; }
	.primary-nav__list { flex-direction: column; gap: 0; }
	.primary-nav__list a {
		display: block;
		padding: .75rem 0;
		border-top: 1px solid var(--hy-line);
	}
	.site-header__inner { flex-wrap: wrap; }
}

/* ---- パンくず ---- */
.breadcrumb { padding-block: .75rem 0; font-size: .8rem; color: var(--hy-muted); }
.breadcrumb__list {
	display: flex; flex-wrap: wrap; gap: .4rem;
	margin: 0; padding: 0; list-style: none;
}
.breadcrumb__item + .breadcrumb__item::before { content: "›"; margin-right: .4rem; color: var(--hy-line); }

/* ---- ヒーロー（トップ） ---- */
.hero {
	background: var(--hy-bg-soft);
	padding-block: clamp(3rem, 10vw, 6rem);
	text-align: center;
}
.hero__title { font-size: clamp(1.8rem, 6vw, 3rem); margin: 0; }
.hero__lead { color: var(--hy-muted); margin-top: 1rem; }

.section-title {
	font-size: clamp(1.3rem, 4vw, 1.75rem);
	border-left: 4px solid var(--hy-accent);
	padding-left: .75rem;
	margin-block: 2.5rem 1.5rem;
}

/* ---- 投稿一覧（カードグリッド） ---- */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--hy-gap);
}
.post-card {
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	overflow: hidden;
	background: var(--hy-bg);
	transition: box-shadow .2s, transform .2s;
}
.post-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.post-card__link { display: block; color: inherit; }
.post-card__link:hover { text-decoration: none; }
.post-card__thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--hy-bg-soft); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1rem 1.25rem 1.5rem; }
.post-card__title { font-size: 1.1rem; margin: .4rem 0; }
.post-card__meta, .post-card__excerpt { font-size: .85rem; color: var(--hy-muted); }
.cat-links {
	display: inline-block;
	font-size: .72rem;
	color: var(--hy-accent);
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---- 記事本文 ---- */
.entry, .front-page-content { max-width: var(--hy-content); margin-inline: auto; }
.post-list + * { margin-top: 3rem; }
.entry-header { margin-block: 1.5rem; }
.entry-title { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: .3rem 0; }
.entry-meta { font-size: .85rem; color: var(--hy-muted); }
.entry-thumbnail { margin: 0 0 2rem; }
.entry-thumbnail img { width: 100%; border-radius: var(--hy-radius); }
.entry-content > * { margin-block: 1.2em; }
.entry-content h2 {
	font-size: 1.5rem; margin-top: 2.5em;
	padding-bottom: .3em; border-bottom: 2px solid var(--hy-line);
}
.entry-content h3 { font-size: 1.25rem; margin-top: 2em; }
.entry-content img { border-radius: var(--hy-radius); }
.entry-content blockquote {
	margin-inline: 0; padding: .5rem 1.2rem;
	border-left: 4px solid var(--hy-line); color: var(--hy-muted);
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--hy-line); padding: .6rem; }

.entry-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin-top: 2rem; list-style: none; }
.entry-tags li a {
	font-size: .8rem; padding: .25rem .7rem;
	background: var(--hy-bg-soft); border-radius: 999px; color: var(--hy-muted);
}

/* ---- 前後ナビ ---- */
.post-navigation {
	display: flex; justify-content: space-between; gap: 1rem;
	margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hy-line);
	font-size: .9rem;
}

/* ---- 検索結果 ---- */
.search-result { padding-block: 1.25rem; border-bottom: 1px solid var(--hy-line); }
.search-result__title { font-size: 1.15rem; margin: 0 0 .3rem; }
.search-result__meta { font-size: .8rem; color: var(--hy-muted); }

/* ---- 検索フォーム ---- */
.search-form { display: flex; gap: .5rem; max-width: 480px; }
.search-form__field {
	flex: 1; padding: .6rem .8rem;
	border: 1px solid var(--hy-line); border-radius: var(--hy-radius);
	font-size: 1rem;
}
.search-form__submit, .button {
	padding: .6rem 1.2rem;
	background: var(--hy-accent); color: #fff;
	border: 0; border-radius: var(--hy-radius);
	cursor: pointer; font-size: 1rem;
}
.button { display: inline-block; }
.button:hover { text-decoration: none; opacity: .9; }

/* ---- ページネーション ---- */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination a, .pagination .current {
	display: inline-block; padding: .5rem .85rem;
	border: 1px solid var(--hy-line); border-radius: var(--hy-radius);
}
.pagination .current { background: var(--hy-accent); color: #fff; border-color: var(--hy-accent); }

/* ---- フッター ---- */
.site-footer {
	margin-top: clamp(3rem, 8vw, 5rem);
	padding-block: clamp(2rem, 6vw, 3rem);
	background: var(--hy-ink); color: #cfd3d8;
	font-size: .9rem;
}
.site-footer a { color: #fff; }
.footer-nav__list { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.site-footer__copy { margin: 0; color: #9aa0a8; font-size: .8rem; }

/* ---- 目次（TOC） ---- */
.toc {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	background: var(--hy-bg-soft);
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	font-size: .95rem;
}
.toc__title {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.toc__title::-webkit-details-marker { display: none; }
.toc__title::before {
	content: "";
	width: 0; height: 0;
	border-left: 6px solid var(--hy-accent);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transition: transform .2s;
}
.toc[open] .toc__title::before { transform: rotate(90deg); }
.toc__nav { margin-top: .75rem; }
.toc__list, .toc__nav ol {
	margin: 0;
	padding-left: 1.4rem;
	list-style: decimal;
}
.toc__nav ol ol { list-style: lower-roman; margin-top: .3rem; }
.toc__item { margin: .35rem 0; }
.toc__item a { color: var(--hy-ink); }
.toc__item a:hover { color: var(--hy-accent); }

/* ---- FAQ ---- */
.faq { margin-top: 3rem; }
.faq__title {
	font-size: clamp(1.3rem, 4vw, 1.6rem);
	border-left: 4px solid var(--hy-accent);
	padding-left: .75rem;
	margin-bottom: 1.25rem;
}
.faq__list { margin: 0; }
.faq__q {
	position: relative;
	font-weight: 700;
	padding: .9rem 1rem .9rem 2.2rem;
	background: var(--hy-bg-soft);
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	margin-top: .75rem;
}
.faq__q::before {
	content: "Q";
	position: absolute; left: .9rem; top: .9rem;
	color: var(--hy-accent); font-weight: 800;
}
.faq__a {
	position: relative;
	margin: 0;
	padding: .9rem 1rem .9rem 2.2rem;
	color: var(--hy-ink);
}
.faq__a::before {
	content: "A";
	position: absolute; left: .9rem; top: .9rem;
	color: var(--hy-muted); font-weight: 800;
}
.faq__a p { margin: 0 0 .6em; }
.faq__a p:last-child { margin-bottom: 0; }

/* 見出しアンカー：固定ヘッダー等に隠れないよう余白を確保 */
.entry-content :is(h2, h3, h4)[id] { scroll-margin-top: 1.5rem; }

/* ---- 動きを抑える設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Ver2 追加スタイル
   ========================================================= */

/* ---- CTA（記事下の誘導） ---- */
.cta {
	margin: 2.5rem 0 1rem;
	padding: 1.5rem clamp(1rem, 4vw, 2rem);
	text-align: center;
	background: var(--hy-bg-soft);
	border: 1px solid var(--hy-line);
	border-top: 3px solid var(--hy-accent);
	border-radius: var(--hy-radius);
}
.cta__title {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hy-ink);
}
.cta__text { color: var(--hy-muted); }
.cta__text p { margin: 0 0 .6em; }
.cta__button {
	display: inline-block;
	margin-top: 1rem;
	padding: .8rem 2.4rem;
	background: var(--hy-accent);
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	transition: opacity .15s ease;
}
.cta__button:hover { opacity: .85; color: #fff; }

/* ---- 事業者情報 [hayate_company_info] ---- */
.company-info { margin: 1.5rem 0; }
.company-info__list {
	margin: 0;
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	overflow: hidden;
}
.company-info__label {
	padding: .8rem 1rem .2rem;
	font-weight: 700;
	font-size: .85rem;
	color: var(--hy-muted);
	background: var(--hy-bg-soft);
}
.company-info__value {
	margin: 0;
	padding: 0 1rem .8rem;
	background: var(--hy-bg-soft);
	border-bottom: 1px solid var(--hy-line);
}
.company-info__value:last-child { border-bottom: 0; }
@media (min-width: 600px) {
	.company-info__list {
		display: grid;
		grid-template-columns: 9em 1fr;
	}
	.company-info__label {
		padding: .8rem 1rem;
		border-bottom: 1px solid var(--hy-line);
	}
	.company-info__label:nth-last-of-type(1) { border-bottom: 0; }
	.company-info__value {
		padding: .8rem 1rem;
		background: var(--hy-bg);
	}
}

/* ---- 関連記事 ---- */
.related-posts { margin: 2.5rem 0; }
.related-posts__title {
	margin: 0 0 1rem;
	padding-left: .75rem;
	border-left: 4px solid var(--hy-accent);
	font-size: 1.25rem;
}

/* =========================================================
   Ver2 デザインパーツ＆レイアウト
   ========================================================= */

:root {
	--hy-shadow: 0 2px 12px rgba(0, 0, 0, .06);
	--hy-shadow-hover: 0 6px 20px rgba(0, 0, 0, .1);
	--hy-ease: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ---- 一覧カラム数（カスタマイザー：bodyクラスで切替） ---- */
.hy-cols-1 .post-list { grid-template-columns: 1fr; }
.hy-cols-2 .post-list { grid-template-columns: repeat(2, 1fr); }
.hy-cols-3 .post-list { grid-template-columns: repeat(3, 1fr); }
.hy-cols-4 .post-list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.hy-cols-3 .post-list,
	.hy-cols-4 .post-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.hy-cols-2 .post-list,
	.hy-cols-3 .post-list,
	.hy-cols-4 .post-list { grid-template-columns: 1fr; }
}

/* ---- カードのhover質感 ---- */
.post-card {
	transition: transform var(--hy-ease), box-shadow var(--hy-ease);
}
.post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hy-shadow-hover);
}

/* ---- キャプション付きボックス ---- */
.hy-box {
	position: relative;
	margin: 2em 0;
	padding: 1.4em 1.2em 1em;
	border: 2px solid var(--hy-accent);
	border-radius: var(--hy-radius);
	background: var(--hy-bg);
}
.hy-box__label {
	position: absolute;
	top: -0.9em;
	left: 1em;
	padding: .1em .8em;
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
	background: var(--hy-accent);
	border-radius: 999px;
}
.hy-box > p { margin: .4em 0 0; }
.hy-box--warn { border-color: #e0a800; background: #fffaf0; }
.hy-box--warn .hy-box__label { background: #e0a800; }
.hy-box--check { border-color: #2e9e5b; background: #f3faf5; }
.hy-box--check .hy-box__label { background: #2e9e5b; }

/* ---- 蛍光マーカー ---- */
.hy-marker {
	background: linear-gradient(transparent 60%, #ffee58 60%);
	font-weight: 700;
}
.hy-marker--blue {
	background: linear-gradient(transparent 60%, #b3e5fc 60%);
}

/* ---- ステップ（手順） ---- */
.hy-step {
	list-style: none;
	margin: 2em 0;
	padding: 0;
	counter-reset: hy-step;
}
.hy-step__item {
	position: relative;
	padding: 0 0 1.8em 3.2em;
	counter-increment: hy-step;
}
.hy-step__item::before {
	content: counter(hy-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2em;
	height: 2.2em;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #fff;
	background: var(--hy-accent);
	border-radius: 50%;
}
.hy-step__item::after {
	content: "";
	position: absolute;
	left: 1.05em;
	top: 2.4em;
	bottom: .2em;
	width: 2px;
	background: var(--hy-line);
}
.hy-step__item:last-child { padding-bottom: 0; }
.hy-step__item:last-child::after { display: none; }
.hy-step__title {
	display: block;
	font-weight: 700;
	padding-top: .35em;
	margin-bottom: .3em;
}
.hy-step__item p { margin: 0; color: var(--hy-muted); }

/* ---- 吹き出し ---- */
.hy-balloon {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 1.8em 0;
}
.hy-balloon__icon {
	flex: 0 0 64px;
	margin: 0;
	text-align: center;
	font-size: .75rem;
	color: var(--hy-muted);
}
.hy-balloon__icon img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--hy-line);
}
.hy-balloon__body {
	position: relative;
	padding: .9em 1.1em;
	background: var(--hy-bg-soft);
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
}
.hy-balloon__body::before {
	content: "";
	position: absolute;
	top: 22px;
	left: -8px;
	border: 8px solid transparent;
	border-left: 0;
	border-right-color: var(--hy-bg-soft);
}
.hy-balloon__body p { margin: 0; }
.hy-balloon--right { flex-direction: row-reverse; }
.hy-balloon--right .hy-balloon__body::before {
	left: auto;
	right: -8px;
	border: 8px solid transparent;
	border-right: 0;
	border-left-color: var(--hy-bg-soft);
}

/* ---- リッチボタン ---- */
.hy-btn,
.wp-block-button.is-style-hy-btn .wp-block-button__link {
	display: inline-block;
	padding: .85em 2.4em;
	background: var(--hy-accent);
	color: #fff;
	font-weight: 700;
	text-align: center;
	border-radius: 999px;
	box-shadow: var(--hy-shadow);
	transition: transform var(--hy-ease), box-shadow var(--hy-ease);
}
.hy-btn:hover,
.wp-block-button.is-style-hy-btn .wp-block-button__link:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--hy-shadow-hover);
}
.hy-btn::after { content: " →"; }

/* ---- 装飾テーブル ---- */
.hy-table table,
.wp-block-table.is-style-hy-table table {
	border-collapse: collapse;
	width: 100%;
}
.hy-table th, .hy-table td,
.wp-block-table.is-style-hy-table th,
.wp-block-table.is-style-hy-table td {
	border: 1px solid var(--hy-line);
	padding: .7em 1em;
}
.hy-table th,
.wp-block-table.is-style-hy-table th,
.wp-block-table.is-style-hy-table tr td:first-child {
	background: var(--hy-bg-soft);
	font-weight: 700;
	white-space: nowrap;
}
@media (max-width: 540px) {
	.hy-table,
	.wp-block-table.is-style-hy-table { overflow-x: auto; }
}

/* ---- ポイントボックス（グループブロックスタイル） ---- */
.wp-block-group.is-style-hy-box-info {
	border: 2px solid var(--hy-accent);
	border-radius: var(--hy-radius);
	padding: 1.2em;
	background: var(--hy-bg);
}

/* ---- 料金表 ---- */
.hy-price {
	position: relative;
	height: 100%;
	padding: 1.8em 1.4em;
	text-align: center;
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	background: var(--hy-bg);
	box-shadow: var(--hy-shadow);
}
.hy-price--featured { border: 2px solid var(--hy-accent); }
.hy-price__badge {
	position: absolute;
	top: -0.9em;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: .1em 1em;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--hy-accent);
	border-radius: 999px;
}
.hy-price__name { margin: 0 0 .4em; font-weight: 700; }
.hy-price__amount {
	margin: 0 0 .8em;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--hy-accent);
}
.hy-price__amount span { font-size: .85rem; color: var(--hy-muted); font-weight: 400; }
.hy-price__features {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
	text-align: left;
}
.hy-price__features li {
	padding: .45em 0 .45em 1.4em;
	border-bottom: 1px dashed var(--hy-line);
	position: relative;
}
.hy-price__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--hy-accent);
	font-weight: 700;
}

/* ---- スクロールフェードイン ---- */
.hy-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}
.hy-fade.is-visible {
	opacity: 1;
	transform: none;
}
/* JS無効・動きを減らす設定では常に表示 */
@media (prefers-reduced-motion: reduce) {
	.hy-fade { opacity: 1; transform: none; }
}

/* ---- ニュース欄（お知らせ一覧） ---- */
.news-list { margin: 2.5rem 0; }
.news-list__heading {
	margin: 0 0 1rem;
	padding-left: .75rem;
	border-left: 4px solid var(--hy-accent);
	font-size: 1.25rem;
}
.news-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hy-line);
}
.news-list__link {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	padding: .9rem .4rem;
	border-bottom: 1px solid var(--hy-line);
	color: var(--hy-ink);
	transition: background var(--hy-ease);
}
.news-list__link:hover {
	background: var(--hy-bg-soft);
}
.news-list__link:hover .news-list__title { color: var(--hy-accent); }
.news-list__date {
	flex: 0 0 auto;
	font-size: .85rem;
	color: var(--hy-muted);
	font-variant-numeric: tabular-nums;
}
.news-list__title { transition: color var(--hy-ease); }
.news-list__more { text-align: right; margin: .8rem 0 0; }
.news-list__more a { font-weight: 700; }
@media (max-width: 540px) {
	.news-list__link { flex-direction: column; gap: .2rem; }
}