/*
 * YOMOSORA Blog / 星空よもぎ蒸し ヨモソラ 専用ブログ
 * 色・書体・余白は公開中LP（/yomosora/ の style-9652cb3d37.css, 2026-09-24時点）から読み取って再構成。
 * LPのハッシュ付きCSSは読み込まない。重いアニメーションは使わない（星は radial-gradient のみ）。
 */

/* ---------- トークン ---------- */
:root {
	/* LPと同じ値 */
	--night: #081813;
	--forest: #10271f;
	--ink: #223b30;
	--cream: #f2f0e8;
	--sage: #d3dfc9;
	--muted: #afbcb1;
	--line: #c9d7c640;
	--mark: #d7e0cf;
	--sage-hover: #e6efdf;
	--button-ink: #183627;
	--outline: #b9c9ba;
	--sky-deep: #071310;
	--text-soft: #c5d1bf;
	--text-dim: #b3c2ad;
	--paper-text: #2b4437;
	--paper-soft: #506256;
	--paper-line: #bfccb6;
	--star: #eff7ff;
	--star-far: #cbddef;
	/* 星のきらめき（LPの #fffdf1 / #f4f3df 系を少し深めた金色。小さな点・日付だけに使う） */
	--glint: #fffdf1;
	--gold: #e6dab0;
	--focus: #91b88a;

	--serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	--sans: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
	--roman: "Cormorant Garamond", Georgia, serif;
	--number: Arial, "Helvetica Neue", "Noto Sans JP", sans-serif;

	--gutter: 64px;          /* 片側の余白（LP: 100% - 128px） */
	--wrap-max: 1280px;
	--narrow-max: 760px;
}

/* ---------- 基本 ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--night);
	color: var(--cream);
	font: 400 16px/1.9 var(--sans);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: lining-nums;
}
a {
	color: inherit;
	text-decoration: none;
}
img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}
figure,
p,
h1,
h2,
h3,
h4 {
	margin: 0;
}
h1,
h2,
h3,
h4 {
	font-weight: 400;
}
ul,
ol {
	margin: 0;
	padding: 0;
}
::selection {
	background: #b8cbae;
	color: var(--forest);
}
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}
.screen-reader-text,
.sr-only {
	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: fixed;
	left: 16px;
	top: -80px;
	z-index: 100;
	padding: 10px 20px;
	background: var(--cream);
	color: var(--night);
}
.skip-link:focus {
	top: 12px;
}
.wrap {
	width: calc(100% - var(--gutter) * 2);
	max-width: var(--wrap-max);
	margin-inline: auto;
}
.wrap-narrow {
	max-width: var(--narrow-max);
}

/* 日本語見出しの改行位置を文節単位に（対応ブラウザのみ。非対応でも表示は崩れない） */
.page-title,
.entry-title,
.post-card-title,
.notice-title,
.section-title,
.entry-content h2,
.entry-content h3,
.button > span:first-child,
.line-button,
.empty-title,
.empty-text {
	word-break: auto-phrase;
}

/* ---------- 星空（radial-gradient のみ） ---------- */
.sky {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--sky-deep);
	background-image:
		radial-gradient(ellipse 60% 70% at 82% 0%, #1f3d3166, transparent 70%),
		radial-gradient(ellipse 50% 60% at 8% 100%, #16302766, transparent 70%),
		linear-gradient(180deg, #050f0c 0%, #0a1c16 62%, var(--forest) 100%);
}
.sky::before,
.sky::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
/* 小さな星（静止） */
.sky::before {
	background-image:
		radial-gradient(1px 1px at 18px 26px, var(--star) 50%, transparent 55%),
		radial-gradient(1px 1px at 132px 84px, var(--star-far) 50%, transparent 55%),
		radial-gradient(1px 1px at 76px 158px, var(--star) 50%, transparent 55%),
		radial-gradient(1px 1px at 204px 44px, var(--star-far) 50%, transparent 55%),
		radial-gradient(1px 1px at 58px 212px, var(--star) 50%, transparent 55%),
		radial-gradient(1px 1px at 176px 190px, var(--star-far) 50%, transparent 55%),
		radial-gradient(1px 1px at 226px 132px, var(--star) 50%, transparent 55%);
	background-size: 240px 240px;
	opacity: .55;
}
/* 明るい星（ゆっくり明滅。動きを減らす設定では静止） */
.sky::after {
	background-image:
		radial-gradient(1.4px 1.4px at 64px 48px, var(--glint) 45%, transparent 60%),
		radial-gradient(1.2px 1.2px at 298px 118px, var(--star) 45%, transparent 60%),
		radial-gradient(1.6px 1.6px at 190px 262px, var(--gold) 45%, transparent 60%),
		radial-gradient(4px 4px at 190px 262px, #e6dab040, transparent 70%),
		radial-gradient(1.2px 1.2px at 344px 300px, var(--star-far) 45%, transparent 60%);
	background-size: 380px 340px;
	opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
	.sky::after {
		animation: yomosora-twinkle 7s ease-in-out infinite alternate;
	}
}
@keyframes yomosora-twinkle {
	from { opacity: .45; }
	to { opacity: .95; }
}
.star-dot {
	display: inline-block;
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 6px #e6dab080;
}

/* ---------- ボタン・リンク ---------- */
.line-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 48px;
	padding: 11px 18px;
	border: 1px solid #c8d5c45e;
	color: var(--cream);
	font-size: 14px;
	line-height: 1.6;
	transition: background-color .25s, color .25s;
}
.line-button:hover {
	background: #c8d5c420;
}
.button {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	max-width: 100%;
	min-height: 60px;
	padding: 16px 24px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
	transition: background-color .25s, color .25s, box-shadow .25s;
}
.button > span:first-child {
	min-width: 0;
}
.button > span:last-child {
	font-size: 20px;
	font-weight: 300;
}
.button-sage {
	background: var(--sage);
	color: var(--button-ink);
}
.button-sage:hover {
	background: var(--sage-hover);
	box-shadow: 0 5px 25px #0002;
}
.button-outline {
	border-color: var(--outline);
	background: transparent;
	color: var(--cream);
}
.button-outline:hover {
	background: var(--cream);
	color: var(--night);
}
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
	font-size: 15px;
}
.circle-arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform .25s;
}
.text-link:hover .circle-arrow {
	transform: translateX(3px);
}

/* ---------- ヘッダー ---------- */
.site-header {
	position: relative;
	z-index: 20;
	background: var(--night);
	border-bottom: 1px solid #e4ebe029;
}
.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 36px;
	min-height: 96px;
	padding: 12px 4.4%;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	min-height: 48px;
}
.brand-icon {
	width: 44px;
	height: 44px;
}
.brand-type {
	display: block;
}
.brand-wordmark {
	width: 176px;
	height: auto;
}
.brand-type small {
	display: block;
	margin-top: 6px;
	color: var(--mark);
	font: 11px/1.2 var(--sans);
	letter-spacing: .16em;
	white-space: nowrap;
}
.site-nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-left: auto;
	white-space: nowrap;
}
.site-nav a {
	position: relative;
	padding: 12px 0;
	font-size: 14px;
	letter-spacing: .04em;
}
.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 1px;
	background: var(--sage);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s;
}
.site-nav a:hover::after,
.site-nav a.is-current::after {
	transform: scaleX(1);
}
.header-line {
	white-space: nowrap;
}

/* ---------- 一覧の見出し（星空帯） ---------- */
.page-hero {
	padding: 76px 0 68px;
}
.eyebrow,
.notice-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #c5d7bc;
	font-size: 12px;
	letter-spacing: .15em;
	line-height: 1.7;
}
.page-title {
	margin-top: 18px;
	font: 400 clamp(30px, 3.6vw, 46px)/1.6 var(--serif);
	letter-spacing: .05em;
	text-shadow: 0 2px 22px #06120ba6;
}
.page-lead {
	max-width: 42em;
	margin-top: 20px;
	color: var(--text-soft);
	font-size: 15px;
	line-height: 2.1;
}

/* ---------- 記事一覧 ---------- */
.listing {
	padding: 72px 0 104px;
	background: var(--forest);
}
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 32px;
	list-style: none;
}
.post-grid > li {
	display: flex;
	min-width: 0;
}
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #0c211a;
	border: 1px solid #c9d7c626;
	transition: border-color .25s;
}
.post-card:hover {
	border-color: #d3dfc973;
}
.post-card:focus-within {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}
.post-card-media {
	position: relative;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: var(--sky-deep);
}
.post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-card-media.is-sky {
	display: grid;
	place-items: center;
	isolation: isolate;
	background-image:
		radial-gradient(ellipse 70% 80% at 80% 0%, #1f3d3166, transparent 70%),
		linear-gradient(180deg, #050f0c, #0f261e);
}
.post-card-media.is-sky::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(1px 1px at 22px 30px, var(--star) 50%, transparent 55%),
		radial-gradient(1px 1px at 118px 70px, var(--star-far) 50%, transparent 55%),
		radial-gradient(1.4px 1.4px at 70px 128px, var(--gold) 45%, transparent 60%),
		radial-gradient(1px 1px at 160px 22px, var(--star) 50%, transparent 55%);
	background-size: 180px 160px;
	opacity: .7;
}
.post-card-media .post-card-mark {
	width: 56px;
	height: 56px;
	opacity: .85;
}
.post-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 24px 26px;
}
.post-card-date {
	color: var(--gold);
	font: 13px/1.6 var(--number);
	letter-spacing: .08em;
}
.post-card-title {
	margin: 8px 0 10px;
	font: 400 19px/1.75 var(--serif);
	letter-spacing: .03em;
	overflow-wrap: anywhere;
}
.post-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.post-card-link:focus-visible {
	outline: none;
}
.post-card-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: #becbbf;
	font-size: 14px;
	line-height: 1.9;
	overflow-wrap: anywhere;
}
.post-card-more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--sage);
	font-size: 13px;
	letter-spacing: .06em;
}
.post-card-more .arrow {
	transition: transform .25s;
}
.post-card:hover .post-card-more .arrow {
	transform: translateX(4px);
}

/* ページ送り（the_posts_pagination の出力） */
.pagination {
	margin-top: 64px;
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font: 14px var(--number);
	letter-spacing: .04em;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	font-family: var(--sans);
}
.pagination a.page-numbers:hover {
	background: #c8d5c420;
}
.pagination .page-numbers.current {
	background: var(--sage);
	border-color: var(--sage);
	color: var(--button-ink);
}
.pagination .page-numbers.dots {
	border-color: transparent;
}

/* 記事0件・404 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 56px 24px;
	border: 1px solid var(--line);
	text-align: center;
}
.empty-mark {
	width: 56px;
	height: 56px;
	opacity: .8;
}
.empty-title {
	font: 400 22px/1.7 var(--serif);
	letter-spacing: .04em;
}
.empty-text {
	color: var(--text-soft);
	font-size: 14px;
}
.empty-state .button,
.empty-actions {
	margin-top: 12px;
}
.empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ---------- 記事ページ ---------- */
.entry-hero {
	padding: 48px 0 56px;
}
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	list-style: none;
	color: var(--text-dim);
	font-size: 12px;
	letter-spacing: .06em;
}
.breadcrumb li {
	min-width: 0;
	overflow-wrap: anywhere;
}
.breadcrumb li:last-child {
	flex: 1 1 0;
	min-width: 6em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-wrap: normal;
}
.breadcrumb li + li::before {
	content: "／";
	margin: 0 10px;
	color: #7f907f;
}
.breadcrumb a {
	text-decoration: underline;
	text-decoration-color: #c9d7c666;
	text-underline-offset: 4px;
}
.breadcrumb a:hover {
	color: var(--cream);
}
.breadcrumb [aria-current] {
	color: var(--mark);
}
.entry-title {
	margin: 26px 0 20px;
	font: 400 clamp(26px, 3.4vw, 40px)/1.65 var(--serif);
	letter-spacing: .04em;
	overflow-wrap: anywhere;
	text-shadow: 0 2px 22px #06120ba6;
}
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	font-size: 13px;
}
.meta-item {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
.meta-label {
	color: var(--text-dim);
	font-size: 12px;
	letter-spacing: .08em;
}
.meta-item time {
	color: var(--gold);
	font-family: var(--number);
	letter-spacing: .06em;
}
.entry-paper {
	padding: 64px 0 96px;
	background: var(--cream);
	color: var(--paper-text);
}
.entry-thumbnail {
	margin-bottom: 48px;
}
.entry-thumbnail img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 本文（the_content） */
.entry-content {
	font-size: 16px;
	line-height: 2.05;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}
.entry-content > * + * {
	margin-top: 1.5em;
}
.entry-content h2 {
	position: relative;
	margin-top: 2.6em;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--paper-line);
	color: var(--ink);
	font: 400 clamp(21px, 2.3vw, 26px)/1.7 var(--serif);
	letter-spacing: .04em;
}
.entry-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: 1px;
	background: #52644f;
}
.entry-content h3 {
	margin-top: 2.2em;
	padding-left: 14px;
	border-left: 2px solid #9fb59a;
	color: var(--ink);
	font: 400 19px/1.75 var(--serif);
	letter-spacing: .03em;
}
.entry-content h2 + *,
.entry-content h3 + * {
	margin-top: 1.1em;
}
.entry-content a {
	color: #2f5a44;
	text-decoration: underline;
	text-decoration-color: #8fae8a;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .2s;
}
.entry-content a:hover {
	color: var(--button-ink);
	text-decoration-color: currentColor;
}
.entry-content strong,
.entry-content b {
	font-weight: 500;
	color: var(--ink);
}
.entry-content ul,
.entry-content ol {
	list-style: none;
	padding: 0;
}
.entry-content li {
	position: relative;
	padding-left: 1.5em;
}
.entry-content li + li {
	margin-top: .45em;
}
.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: .35em;
	top: .9em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6c8269;
}
.entry-content ol {
	counter-reset: yomosora-ol;
}
.entry-content ol > li {
	counter-increment: yomosora-ol;
}
.entry-content ol > li::before {
	content: counter(yomosora-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: #52644f;
	font-family: var(--number);
	font-size: .92em;
}
.entry-content li > ul,
.entry-content li > ol {
	margin-top: .45em;
}
.entry-content blockquote {
	margin: 1.8em 0 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid #b2bba9;
	color: var(--paper-soft);
}
.entry-content hr {
	height: 1px;
	margin: 3em 0;
	border: 0;
	background: var(--paper-line);
}
.entry-content img {
	height: auto;
}
.entry-content figure {
	margin-inline: 0;
}
.entry-content figcaption,
.entry-content .wp-caption-text {
	margin-top: 8px;
	color: #5b6a5d;
	font-size: 13px;
	line-height: 1.8;
}
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 14px;
}
.entry-content th,
.entry-content td {
	padding: 10px 12px;
	border: 1px solid #cad3c3;
	text-align: left;
	vertical-align: top;
}
.entry-content th {
	background: #e7eade;
	font-weight: 500;
}
.entry-content pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 16px;
	background: #e7eade;
	font-size: 14px;
	white-space: pre;
}
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}
.entry-content .aligncenter {
	margin-inline: auto;
}
.entry-content .alignleft,
.entry-content .alignright {
	margin-bottom: 1em;
}
.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2em;
}

/* 記事末尾の案内ボックス */
.notice-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: 72px;
	padding: 40px 40px 36px;
	background: var(--forest);
	border: 1px solid #c9d7c633;
	color: var(--cream);
}
.notice-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(1px 1px at 30px 24px, var(--star) 50%, transparent 55%),
		radial-gradient(1.4px 1.4px at 190px 70px, var(--gold) 45%, transparent 60%),
		radial-gradient(1px 1px at 110px 128px, var(--star-far) 50%, transparent 55%);
	background-size: 260px 170px;
	opacity: .5;
	pointer-events: none;
}
.notice-title {
	margin: 12px 0 18px;
	font: 400 22px/1.7 var(--serif);
	letter-spacing: .04em;
}
.notice-text p {
	font-size: 15px;
	line-height: 2;
}
.notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.notice-actions > a {
	flex: 1 1 260px;
}
.notice-actions .line-button.button {
	justify-content: space-between;
	font-size: 15px;
}

/* 最新記事 */
.latest-posts {
	padding: 88px 0 104px;
	background: var(--forest);
}
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 36px;
}
.section-title {
	font: 400 clamp(24px, 2.6vw, 32px)/1.7 var(--serif);
	letter-spacing: .04em;
}

/* ---------- フッター ---------- */
.site-footer {
	padding: 80px 0 32px;
	background: var(--night);
	border-top: 1px solid var(--line);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
}
.footer-wordmark {
	display: block;
	width: min(320px, 80%);
}
.footer-wordmark img {
	width: 100%;
}
.footer-name {
	margin: 14px 0 26px;
	color: #c5d7bc;
	font-size: 12px;
	letter-spacing: .16em;
}
.footer-notice p {
	color: var(--mark);
	font-size: 14px;
	line-height: 2;
}
.store-facts {
	margin: 0;
	border-top: 1px solid #b7c6ad33;
}
.store-facts > div {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #b7c6ad33;
}
.store-facts dt {
	color: #c0cfb8;
	font-size: 13px;
}
.store-facts dd {
	margin: 0;
	font-size: 14px;
	overflow-wrap: anywhere;
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 20px 0 16px;
	list-style: none;
}
.footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: #c9d7c666;
	text-underline-offset: 5px;
}
.footer-links a:hover {
	text-decoration-color: currentColor;
}
.footer-bottom {
	margin-top: 56px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	color: var(--text-dim);
	font-size: 12px;
	letter-spacing: .06em;
}
.footer-bottom small {
	font-size: inherit;
}

/* ---------- レスポンシブ ---------- */
@media (min-width: 701px) {
	.entry-content .alignleft {
		float: left;
		margin-right: 1.5em;
	}
	.entry-content .alignright {
		float: right;
		margin-left: 1.5em;
	}
}
@media (max-width: 1200px) {
	:root {
		--gutter: 44px;
	}
}
@media (max-width: 1000px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.header-inner {
		gap: 10px 24px;
		padding: 14px 22px;
	}
	.header-line {
		order: 3;
		width: 100%;
		white-space: normal;
	}
	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}
@media (max-width: 700px) {
	:root {
		--gutter: 22px;
	}
	.header-inner {
		min-height: 0;
		padding: 12px 20px;
		gap: 8px 16px;
	}
	.brand {
		gap: 8px;
	}
	.brand-icon {
		width: 36px;
		height: 36px;
	}
	.brand-wordmark {
		width: 132px;
	}
	.brand-type small {
		margin-top: 4px;
		font-size: 9px;
		letter-spacing: .09em;
	}
	.site-nav {
		gap: 18px;
	}
	.site-nav a {
		font-size: 13px;
	}
	.header-line {
		min-height: 44px;
		padding: 9px 14px;
		font-size: 13px;
	}
	.page-hero {
		padding: 52px 0 48px;
	}
	.page-lead {
		font-size: 14px;
		line-height: 2;
	}
	.listing {
		padding: 44px 0 72px;
	}
	.post-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.post-card-body {
		padding: 18px 18px 22px;
	}
	.post-card-title {
		font-size: 18px;
	}
	.pagination {
		margin-top: 44px;
	}
	.empty-state {
		padding: 44px 16px;
	}
	.entry-hero {
		padding: 34px 0 40px;
	}
	.entry-title {
		margin: 20px 0 16px;
	}
	.entry-paper {
		padding: 40px 0 64px;
	}
	.entry-thumbnail {
		margin-bottom: 32px;
	}
	.entry-content {
		font-size: 15.5px;
		line-height: 2;
	}
	.notice-box {
		margin-top: 56px;
		padding: 30px 22px 26px;
	}
	.notice-title {
		font-size: 20px;
	}
	.notice-text p {
		font-size: 14px;
	}
	.notice-actions > a {
		flex-basis: 100%;
	}
	.button {
		min-height: 56px;
		padding: 14px 18px;
		gap: 14px;
	}
	.latest-posts {
		padding: 64px 0 76px;
	}
	.site-footer {
		padding: 56px 0 28px;
	}
	.footer-bottom {
		margin-top: 40px;
	}
}
@media (max-width: 370px) {
	:root {
		--gutter: 16px;
	}
	.header-inner {
		padding: 10px 16px;
		gap: 8px 12px;
	}
	.brand-icon {
		width: 30px;
		height: 30px;
	}
	.brand-wordmark {
		width: 108px;
	}
	.brand-type small {
		font-size: 8px;
		letter-spacing: .06em;
	}
	.site-nav {
		gap: 14px;
	}
	.notice-box {
		padding: 26px 18px 22px;
	}
	.store-facts > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}