/* ==========================================================================
   サイクランドナカザワ — Layout
   ==========================================================================
   コンテナ、ヘッダー、フッター、各種共通レイアウト構造。
   ========================================================================== */

/* ---------- Containers ---------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--s-5);
	position: relative;
	z-index: 1;
}
.container-narrow { max-width: var(--container-narrow-width); }
.container-wide { max-width: var(--container-wide-width); }

@media (max-width: 700px) {
	.container { padding: 0 var(--s-4); }
}

.site-main { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-header {
	padding: var(--s-3) 0;
	background: rgba(242, 247, 242, 0.95);
	border-bottom: 1px solid var(--c-mist);
	position: sticky; top: 0; z-index: 100;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}

.brand {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	color: var(--c-sumi);
}

.brand-name {
	font-family: var(--f-mincho);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: 0.18em;
}

.brand-since {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--f-latin);
	font-style: italic;
	font-size: 0.7rem;
	color: var(--c-water-deep);
	letter-spacing: 0.18em;
	margin-top: 2px;
}

.brand-since::after {
	content: '';
	width: 4px;
	height: 4px;
	background: var(--c-leaf-deep);
	border-radius: 50%;
}

.brand-since-rank {
	color: var(--c-navy);
	font-weight: 500;
}

.custom-logo-link { display: block; }
.custom-logo { max-height: 60px; width: auto; }

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; }

.nav-list {
	display: flex;
	gap: var(--s-5);
	font-family: var(--f-rounded);
	font-weight: 500;
	font-size: 0.92rem;
	letter-spacing: 0.18em;
}

.nav-list a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}

.nav-list a::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--dot, var(--c-water));
}

.nav-list li:nth-child(1) a { --dot: #A8D5E0; }
.nav-list li:nth-child(2) a { --dot: #6BB5C8; }
.nav-list li:nth-child(3) a { --dot: #B5DD80; }
.nav-list li:nth-child(4) a { --dot: #DCEDC9; }
.nav-list li:nth-child(5) a { --dot: #8FC362; }
.nav-list li:nth-child(6) a { --dot: #6CA340; }
.nav-list li:nth-child(7) a { --dot: #3A7B91; }

.nav-list a:hover { opacity: 0.6; }

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
	display: none;
	width: 40px; height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 0;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--c-sumi);
	transition: all 0.3s var(--ease-soft);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 800px) {
	.nav-toggle { display: flex; }
	.nav {
		position: fixed;
		top: 0; right: -100%;
		width: 80%;
		max-width: 320px;
		height: 100vh;
		background: var(--c-paper);
		padding: var(--s-7) var(--s-5) var(--s-5);
		transition: right 0.4s var(--ease-out);
		box-shadow: -8px 0 24px rgba(58, 123, 145, 0.08);
		z-index: 110;
	}
	.nav.is-open { right: 0; }
	.nav-list {
		flex-direction: column;
		gap: var(--s-4);
		font-size: 1.1rem;
	}
}

section { position: relative; }

/* ---------- Article header(single posts) ---------- */
.article-header,
.page-header {
	padding: var(--s-7) 0 var(--s-5);
	text-align: center;
}

.article-meta {
	margin-top: var(--s-4);
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--c-mossy);
	letter-spacing: 0.08em;
}

.article-pillar {
	display: inline-block;
	font-family: var(--f-mincho);
	font-size: 0.85rem;
	letter-spacing: 0.3em;
	color: var(--c-leaf-deep);
	text-indent: 0.3em;
	margin-bottom: var(--s-3);
}

.article-title, .page-title {
	margin: 0 auto;
	max-width: 16em;
}

.article-date {
	font-family: var(--f-hand);
	color: var(--c-water-deep);
	font-size: 0.95rem;
}

.article-hero, .page-hero {
	margin: var(--s-5) 0 var(--s-7);
}

.article-hero img, .page-hero img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}

.article-hero-caption {
	max-width: var(--container-narrow-width);
	margin: var(--s-3) auto 0;
	padding: 0 var(--s-4);
	font-size: 0.85rem;
	color: var(--c-mossy);
	text-align: center;
	font-family: var(--f-mincho);
}

.article-footer {
	margin: var(--s-7) 0 var(--s-6);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-mist);
	border-bottom: 1px solid var(--c-mist);
}

.article-tags {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--s-4);
}

.article-tag-label {
	font-size: 0.85rem;
	color: var(--c-mossy);
	letter-spacing: 0.15em;
	font-family: var(--f-mincho);
}

.article-tag {
	font-size: 0.85rem;
	color: var(--c-leaf-deep);
	padding: 4px 10px;
	background: var(--c-leaf-pale);
	border-radius: 2px;
}

.article-share {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	flex-wrap: wrap;
}

.article-share-label {
	font-size: 0.85rem;
	color: var(--c-mossy);
	letter-spacing: 0.15em;
	font-family: var(--f-mincho);
}

.article-share a {
	font-size: 0.85rem;
	font-family: var(--f-mincho);
	letter-spacing: 0.15em;
	border-bottom: 1px solid var(--c-leaf-deep);
	padding-bottom: 1px;
	color: var(--c-leaf-deep);
}

/* ---------- Pillar archive hero ---------- */
.pillar-hero {
	padding: var(--s-7) 0 var(--s-6);
	background: var(--c-paper-cool);
	border-bottom: 1px solid var(--c-mist);
	margin-bottom: var(--s-7);
}

.pillar-hero-inner {
	text-align: center;
	margin-top: var(--s-3);
}

.pillar-description {
	margin-top: var(--s-3);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	color: var(--c-sumi-soft);
	font-size: 1rem;
	line-height: 1.9;
}

.archive-header {
	padding: var(--s-7) 0 var(--s-5);
	text-align: center;
}

.archive-description {
	margin-top: var(--s-3);
	color: var(--c-mossy);
}

/* ---------- Archive grid ---------- */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6) var(--s-5);
	margin-bottom: var(--s-7);
}

@media (max-width: 900px) {
	.archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.archive-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ---------- Story list(index template) ---------- */
.story-list { display: flex; flex-direction: column; }

.story-row {
	border-bottom: 1px solid var(--c-mist);
	padding: var(--s-5) 0;
}
.story-row:first-child { padding-top: var(--s-3); }
.story-row:last-child { border-bottom: none; }

.story-row-link {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--s-5);
	align-items: start;
}

.story-row-image {
	width: 220px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.story-row-image img {
	width: 100%; height: 100%;
	object-fit: cover;
}

@media (max-width: 700px) {
	.story-row-link { grid-template-columns: 1fr; }
	.story-row-image { width: 100%; }
}

/* ---------- Pagination ---------- */
.pagination {
	margin: var(--s-7) 0;
	text-align: center;
	font-family: var(--f-mincho);
	letter-spacing: 0.18em;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	color: var(--c-sumi);
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: all 0.3s var(--ease-soft);
}

.pagination .page-numbers:hover {
	border-color: var(--c-leaf-deep);
}

.pagination .page-numbers.current {
	color: var(--c-leaf-deep);
	border-color: var(--c-leaf-deep);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	margin: var(--s-3) 0 var(--s-4);
	font-size: 0.82rem;
	color: var(--c-mossy);
	letter-spacing: 0.05em;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.breadcrumb li:not(:last-child)::after {
	content: '／';
	margin-left: 8px;
	opacity: 0.5;
}

.breadcrumb a {
	color: var(--c-mossy);
	border-bottom: 1px solid transparent;
}
.breadcrumb a:hover {
	border-bottom-color: var(--c-leaf-deep);
	color: var(--c-leaf-deep);
	opacity: 1;
}

/* ---------- No results ---------- */
.no-results {
	text-align: center;
	padding: var(--s-7) 0;
	color: var(--c-mossy);
	font-family: var(--f-mincho);
	letter-spacing: 0.06em;
}

/* ---------- Search form ---------- */
.search-form {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

.search-form-label {
	display: block;
	font-family: var(--f-mincho);
	font-size: 0.85rem;
	color: var(--c-mossy);
	letter-spacing: 0.18em;
	margin-bottom: var(--s-2);
	text-align: center;
}

.search-form-row {
	display: flex;
	border: 1px solid var(--c-mossy);
}

.search-input {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: var(--c-paper);
	font-family: var(--f-gothic);
	font-size: 0.95rem;
	color: var(--c-sumi);
}
.search-input:focus { outline: none; }

.search-submit {
	padding: 12px 24px;
	background: var(--c-leaf-deep);
	color: var(--c-paper);
	font-family: var(--f-mincho);
	font-size: 0.9rem;
	letter-spacing: 0.18em;
	transition: background 0.3s var(--ease-soft);
}
.search-submit:hover {
	background: var(--c-leaf-dark);
}


/* === Footer Logo: invert to white (added 2026-04-29) === */
.shop-brand .custom-logo {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}