/*
Theme Name: Soi YIPUN Child
Theme URI: https://soiyipun.com/
Description: Child theme for the Soi YIPUN official website.
Author: PLANK
Author URI: https://www.plank.jp/
Template: generatepress
Version: 0.1.0
Text Domain: soiyipun-child
*/

/* デザイントークン・本体CSSは後工程で追加する。 */

/* ==========================================================================
   Soi YIPUN Design Tokens — 和紙 × 木(焦げ茶) × 桜 × 余白
   確定日: 2026-06-11(ロゴ実測色 #40220F / #F4BCCA 基準・旧3色不採用)
   ========================================================================== */

:root {
	/* --- Colors --- */
	--sy-color-bg: #F8F5EF;            /* 背景: 和紙 */
	--sy-color-surface: #FFFEFB;       /* カード等の面 */
	--sy-color-primary: #40220F;       /* 主色: ロゴの焦げ茶 */
	--sy-color-primary-soft: #5C3A20;  /* 木の中間色(hover・小見出し) */
	--sy-color-accent: #F4BCCA;        /* 桜: 面・装飾・淡バッジ専用(文字使用禁止) */
	--sy-color-accent-tint: #FBE9EE;   /* 桜の薄面 */
	--sy-color-accent-strong: #A34762; /* 濃い桜: 文字・ボーダー可(対比約5:1) */
	--sy-color-text: #332416;          /* 本文 */
	--sy-color-text-muted: #71614F;    /* 補助文字 */
	--sy-color-border: #E8DFD2;        /* 境界線 */
	--sy-color-focus: #3B6EA5;         /* フォーカスリング */
	--sy-color-error: #B3261E;
	--sy-color-success: #2E7D32;

	/* --- Typography(システムフォントのみ・外部フォント不使用) --- */
	--sy-font-body:
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic Medium",
		"Yu Gothic",
		"Noto Sans JP",
		Meiryo,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	--sy-font-heading:
		"Shippori Mincho",
		"Noto Serif JP",
		Georgia,
		"Times New Roman",
		serif;
	--sy-fw-normal: 400;
	--sy-fw-bold: 600;
	--sy-fs-sm: 0.875rem;                                     /* 14px 注釈(本文・UI文字には不使用) */
	--sy-fs-base: 1rem;                                       /* 16px 本文 */
	--sy-fs-lg: 1.125rem;                                     /* 18px リード */
	--sy-fs-h4: 1.125rem;
	--sy-fs-h3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);  /* 19→22px */
	--sy-fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);      /* 22→28px */
	--sy-fs-h1: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);     /* 26→36px */
	--sy-lh-body: 1.8;     /* 日本語本文 */
	--sy-lh-heading: 1.4;
	--sy-lh-en: 1.6;       /* 英語本文(body:lang(en)で適用) */

	/* --- Spacing(8px基準) --- */
	--sy-space-1: 4px;
	--sy-space-2: 8px;
	--sy-space-3: 16px;
	--sy-space-4: 24px;
	--sy-space-5: 32px;
	--sy-space-6: 48px;
	--sy-space-7: 64px;
	--sy-space-8: 96px;
	--sy-section-gap: var(--sy-space-6); /* セクション余白(SP)→PCで拡大 */

	/* --- Layout --- */
	--sy-container: 1200px;        /* GP既定と一致 */
	--sy-container-narrow: 760px;  /* 記事本文 */
	--sy-gutter: 20px;             /* 左右ガター(SP)→769px:24px→1025px:32px */

	/* --- Borders / Radii / Shadows --- */
	--sy-border: 1px solid var(--sy-color-border);
	--sy-radius-sm: 4px;
	--sy-radius: 8px;
	--sy-shadow-sm: 0 1px 3px rgba(51, 36, 22, 0.08);
	--sy-shadow: 0 4px 16px rgba(51, 36, 22, 0.10);

	/* --- Motion --- */
	--sy-transition: 0.2s ease;

	/* --- Header(第2弾で使用する候補値) --- */
	--sy-header-h-sp: 60px;
	--sy-header-h-pc: 76px;

	/* --- z-index scale(第2弾候補。GeneratePress標準値との衝突は未検証 ---
	   第2弾でGPのヘッダー/ドロワー実値を確認してから使用すること) */
	--sy-z-header: 100;
	--sy-z-dropdown: 200;
	--sy-z-drawer: 300;
	--sy-z-skiplink: 400;
}

/* ==========================================================================
   Base — GeneratePress標準を活かす最小限の土台(全面リセットなし)
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--sy-color-bg);
	color: var(--sy-color-text);
	font-family: var(--sy-font-body);
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	overflow-wrap: break-word;
}

/* 英語ページの行間(bodyのみに適用し、継承で本文へ波及させる。
   見出しは下の h1〜h6 ルールが line-height を明示しているため影響を受けない) */
body:lang(en) {
	line-height: var(--sy-lh-en);
}

/* フォーム部品: フォント継承+16px固定(iOS入力ズーム防止) */
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 16px;
	line-height: inherit;
}

/* --- 見出し(h1〜h6共通: 色・フォント・ウェイト・行間) --- */
h1, h2, h3, h4, h5, h6 {
	color: var(--sy-color-primary);
	font-family: var(--sy-font-heading);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	overflow-wrap: break-word;
}

/* サイズ指定は h1〜h4 のみ(h5・h6はGeneratePress標準サイズを維持) */
h1 { font-size: var(--sy-fs-h1); }
h2 { font-size: var(--sy-fs-h2); }
h3 { font-size: var(--sy-fs-h3); }
h4 { font-size: var(--sy-fs-h4); }

/* --- テキスト要素 --- */
p {
	margin-top: 0;
	margin-bottom: var(--sy-space-4);
}

ul, ol {
	margin-bottom: var(--sy-space-4);
}

strong {
	font-weight: var(--sy-fw-bold);
}

small {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-muted);
}

/* --- リンク(第1弾は色のみ。下線方針は実表示確認後に第2弾で確定) --- */
a {
	color: var(--sy-color-primary);
	transition: color var(--sy-transition);
}

a:hover {
	color: var(--sy-color-accent-strong);
}

/* --- メディア(横スクロール防止は原因側で対処) --- */
img {
	max-width: 100%;
	height: auto;
}

figure {
	max-width: 100%;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* --- ボタン(外観の全面上書きはせず最小限のみ) --- */
button {
	cursor: pointer;
}

/* --- フォーカス(削除しない・明確に表示) --- */
:focus-visible {
	outline: 2px solid var(--sy-color-focus);
	outline-offset: 2px;
	border-radius: var(--sy-radius-sm);
}

/* --- 選択範囲(文字#332416/地#F4BCCA・対比約8.6:1) --- */
::selection {
	background-color: var(--sy-color-accent);
	color: var(--sy-color-text);
}

/* --- 区切り・引用・インラインコード --- */
hr {
	border: 0;
	border-top: var(--sy-border);
	margin: var(--sy-space-6) 0;
}

blockquote {
	margin: 0 0 var(--sy-space-4);
	padding: var(--sy-space-3) var(--sy-space-4);
	border-left: 3px solid var(--sy-color-accent-strong);
	background-color: var(--sy-color-accent-tint);
	color: var(--sy-color-text);
}

/* インラインコードのみ(コードブロック<pre>内は後工程で別途設計) */
:not(pre) > code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375em;
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius-sm);
	padding: 0.1em 0.4em;
}

/* スクリーンリーダー向けクラスは WordPress/GeneratePress 標準の
   .screen-reader-text をそのまま使用する(再定義しない) */

/* --- アニメーション抑制 --- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* 慣例的な例外使用 */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Responsive — 第1弾はガター・見出し・セクション余白トークンのみ
   ========================================================================== */

@media (min-width: 769px) {
	:root {
		--sy-gutter: 24px;
		--sy-section-gap: var(--sy-space-7);
	}
}

@media (min-width: 1025px) {
	:root {
		--sy-gutter: 32px;
		--sy-section-gap: var(--sy-space-8);
	}
}

/* ==========================================================================
   工程9 第2弾 — ヘッダー / ナビゲーション / フッター / 検索フォーム
   ========================================================================== */

/* --- ロゴ(横長・正方形どちらにも対応。本来の縦横比を維持する) --- */
.site-header .custom-logo,
.site-header .header-image {
	height: auto;
	max-height: clamp(40px, 6vw, 52px);
	width: auto;
}

/* --- ヘッダー共通 --- */
.site-header {
	background-color: var(--sy-color-surface);
	border-bottom: var(--sy-border);
}

.main-title a,
.main-title a:hover {
	color: var(--sy-color-primary);
}

.site-description {
	color: var(--sy-color-text-muted);
}

/* --- デスクトップナビゲーション(1025px以上) --- */
@media (min-width: 1025px) {
	.main-navigation {
		background-color: transparent;
	}

	/* 表示改善10: 項目間の余白を広げ、2段になった場合も行間が詰まらないようにする */
	.main-navigation .main-nav ul {
		row-gap: var(--sy-space-2);
	}

	.main-navigation .main-nav ul li {
		margin: var(--sy-space-1) var(--sy-space-2);
	}

	.main-navigation .main-nav ul li a {
		color: var(--sy-color-primary);
		font-weight: var(--sy-fw-normal);
		letter-spacing: 0.02em;
		transition: color var(--sy-transition), box-shadow var(--sy-transition);
	}

	.main-navigation .main-nav ul li a:hover {
		color: var(--sy-color-accent-strong);
		background-color: transparent;
	}

	/* 現在ページ表示(色+下インジケータの二重判別。太字化とあわせて視認性を保ちつつ下線は1pxへ細くする) */
	.main-navigation .main-nav ul li.current-menu-item > a,
	.main-navigation .main-nav ul li.current-menu-ancestor > a {
		color: var(--sy-color-accent-strong);
		font-weight: var(--sy-fw-bold);
		box-shadow: inset 0 -1px 0 var(--sy-color-accent-strong);
		background-color: transparent;
	}
}

/* --- モバイルナビゲーション(1024px以下)
   表示切替自体は親テーマの動的CSS(mobile-menuクエリ=フィルタで1024px化)が行う。
   ここでは配色・開閉時の見た目のみ指定する --- */
@media (max-width: 1024px) {
	.main-navigation .menu-toggle {
		color: var(--sy-color-primary);
		background-color: transparent;
	}

	.main-navigation.toggled .main-nav > ul {
		background-color: var(--sy-color-surface);
		border-top: var(--sy-border);
	}

	.main-navigation.toggled .main-nav ul li a {
		color: var(--sy-color-primary);
		border-bottom: var(--sy-border);
	}

	/* 現在位置表示(current-menu-ancestor を含む) */
	.main-navigation.toggled .main-nav ul li.current-menu-item > a,
	.main-navigation.toggled .main-nav ul li.current-menu-ancestor > a {
		color: var(--sy-color-accent-strong);
	}
}

/* --- 共通フッター(sy-footer) --- */
.sy-footer {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	padding: var(--sy-space-6) var(--sy-gutter);
}

.sy-footer__inner {
	max-width: var(--sy-container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sy-space-4);
	text-align: center;
}

.sy-footer__logo {
	display: block;
	width: 72px;
	height: 72px;
}

.sy-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sy-space-2) var(--sy-space-4);
}

.sy-footer__menu a {
	color: var(--sy-color-primary);
}

.sy-footer__menu a:hover {
	color: var(--sy-color-accent-strong);
}

/* --- 共通フッター: SNSリンク（表示改善9） --- */
.sy-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sy-space-2) var(--sy-space-4);
}

.sy-footer__social a {
	color: var(--sy-color-primary);
}

.sy-footer__social a:hover {
	color: var(--sy-color-accent-strong);
}

@media (min-width: 769px) {
	.sy-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* --- 本文リンクの下線(文章要素に限定し、ボタン・画像リンク・カード・見出しを除外) --- */
.entry-content p a,
.entry-content li a,
.entry-content blockquote a,
.entry-content figcaption a,
.entry-content td a,
.entry-content th a,
.comment-content p a,
.comment-content li a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
}

/* --- 検索フォームの折り返し修正(GP searchform と WPコア検索ブロックの両対応) --- */
.search-form {
	display: flex;
	gap: var(--sy-space-2);
	align-items: stretch;
}

.search-form label {
	flex: 1;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	min-width: 0;
}

.search-form .search-submit {
	flex-shrink: 0;
	white-space: nowrap;
}

.wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--sy-space-2);
}

.wp-block-search__input {
	flex: 1;
	min-width: 0;
}

.wp-block-search__button {
	flex-shrink: 0;
	white-space: nowrap;
	margin-left: 0;
}

/* ==========================================================================
   工程10 — HOME(8セクション)
   前提: HOME固定ページはGeneratePressのページ設定「Content Container: Full Width」
   を使用(body.full-width-content)。セクション背景が画面幅いっぱいに広がり、
   内部コンテンツは .sy-wrap(最大1200px)/.sy-wrap--narrow(最大760px)に収まる。
   ========================================================================== */

/* --- GeneratePressレイアウト調整(HOME限定・他ページへ影響しない) --- */
.site-content .sy-home.content-area {
	width: 100%;
}

.sy-home .site-main {
	margin: 0;
}

/* --- 共通ラッパー --- */
.sy-wrap {
	max-width: var(--sy-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sy-gutter);
	padding-right: var(--sy-gutter);
}

.sy-wrap--narrow {
	max-width: var(--sy-container-narrow);
}

.sy-home__section {
	padding-top: var(--sy-section-gap);
	padding-bottom: var(--sy-section-gap);
}

.sy-eyebrow {
	color: var(--sy-color-accent-strong);
	font-size: var(--sy-fs-sm);
	font-weight: var(--sy-fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--sy-space-2);
}

/* --- Hero(写真なし構成。将来 .sy-hero__media を追加して2カラム化する余地として
       本文側 .sy-hero__body にのみ最大幅を設定している) --- */
.sy-hero {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
}

.sy-hero__body {
	max-width: 40em;
}

.sy-hero__title {
	margin: 0 0 var(--sy-space-3);
	overflow-wrap: break-word;
}

.sy-hero__lead {
	font-size: var(--sy-fs-lg);
	margin: 0 0 var(--sy-space-4);
}

.sy-hero__cta {
	margin: 0;
}

/* --- Hero: 写真追加時の内部レイアウト(写真未配置時は1カラムのまま) --- */
.sy-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-5);
}

.sy-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sy-radius);
}

@media (min-width: 640px) {
	.sy-hero__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--sy-space-6);
	}

	.sy-hero__media {
		flex: 0 0 45%;
	}
}

/* --- About --- */
.sy-about__body {
	margin-bottom: var(--sy-space-4);
}

.sy-about__cta {
	margin: 0;
}

/* --- About: 写真(未配置時は出力されないため崩れなし) --- */
.sy-about__media {
	margin-bottom: var(--sy-space-5);
}

.sy-about__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sy-radius);
}

/* --- セクションヘッダー(モバイル縦・768px以上で左右配置) --- */
.sy-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-2);
	margin-bottom: var(--sy-space-4);
}

.sy-section-head h2 {
	margin: 0;
}

.sy-section-head__intro {
	color: var(--sy-color-text-muted);
	margin: var(--sy-space-1) 0 0;
}

.sy-section-head__more {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.sy-section-head {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sy-space-2) var(--sy-space-4);
	}
}

/* --- カードグリッド(列数は修飾クラスで分離・共通クラスは1列のみ) --- */
.sy-card-grid {
	display: grid;
	gap: var(--sy-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.sy-card-grid--brands {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.sy-card-grid--stories {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-card-grid--brands,
	.sy-card-grid--stories {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- カード(全体リンク・画像なしでも成立するテキストカード) --- */
.sy-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	overflow: hidden;
	box-shadow: var(--sy-shadow-sm);
	text-decoration: none;
	transition: box-shadow var(--sy-transition), border-color var(--sy-transition);
}

.sy-card:hover {
	box-shadow: var(--sy-shadow);
	border-color: var(--sy-color-accent-strong);
}

.sy-card:focus-visible {
	outline: 2px solid var(--sy-color-focus);
	outline-offset: 2px;
	box-shadow: var(--sy-shadow);
}

.sy-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.sy-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sy-space-2);
	padding: var(--sy-space-3);
}

.sy-card__title {
	margin: 0;
	font-size: var(--sy-fs-lg);
	overflow-wrap: break-word;
}

.sy-card__copy {
	margin: 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

.sy-badge {
	display: inline-block;
	max-width: 100%;
	background-color: var(--sy-color-accent-tint);
	color: var(--sy-color-accent-strong);
	border: 1px solid var(--sy-color-accent);
	border-radius: var(--sy-radius-sm);
	font-size: var(--sy-fs-sm);
	padding: 2px 10px;
	overflow-wrap: break-word;
}

/* --- ボタン --- */
.sy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--sy-space-2) var(--sy-space-4);
	max-width: 100%;
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	border-radius: var(--sy-radius);
	font-weight: var(--sy-fw-bold);
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	transition: background-color var(--sy-transition), color var(--sy-transition);
}

.sy-btn:hover {
	background-color: var(--sy-color-primary-soft);
	color: var(--sy-color-surface);
}

.sy-btn:focus-visible {
	outline: 2px solid var(--sy-color-focus);
	outline-offset: 2px;
}

.sy-btn--ghost {
	background-color: transparent;
	color: var(--sy-color-primary);
	border: 1px solid var(--sy-color-primary);
}

.sy-btn--ghost:hover {
	background-color: var(--sy-color-accent-tint);
	color: var(--sy-color-primary);
}

/* --- Guide CTA --- */
.sy-guide__hub {
	margin: var(--sy-space-4) 0 0;
}

/* --- Map(画像は非リンク・figure余白はHOME内のみ調整) --- */
.sy-map__lead {
	margin-bottom: var(--sy-space-4);
}

.sy-map .sy-map__thumb {
	margin: 0 0 var(--sy-space-4);
}

.sy-map__thumb img {
	display: block;
	width: 100%;
	border: var(--sy-border);
	border-radius: var(--sy-radius);
}

.sy-map__cta {
	margin: 0;
}

/* --- MAP 凡例(TOPとMAPページ共通・SP1列/PC3列) --- */
.sy-map-legend {
	margin-top: var(--sy-space-3);
	padding: var(--sy-space-3) var(--sy-space-4);
	background-color: var(--sy-color-accent-tint);
	border: 1px solid var(--sy-color-border);
	border-radius: var(--sy-radius);
}

.sy-map-legend__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sy-space-2) var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-map-legend__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sy-map-legend__item {
	font-size: var(--sy-fs-sm);
	line-height: 1.7;
	color: var(--sy-color-text);
	margin: 0;
	overflow-wrap: break-word;
}

/* --- HOME Map: Google Maps ブロック(Spot 未登録時は出力されない) --- */
.sy-map__gmaps {
	margin-top: var(--sy-space-5);
	padding-top: var(--sy-space-5);
	border-top: var(--sy-border);
}

.sy-map__gmaps-heading {
	font-size: var(--sy-fs-h3);
	font-weight: var(--sy-fw-bold);
	margin: 0 0 var(--sy-space-3);
}

.sy-map__gmaps-lead,
.sy-map__gmaps-detail {
	color: var(--sy-color-text-muted);
	margin: 0 0 var(--sy-space-3);
}

.sy-map__gmaps .sy-map-embed {
	margin-bottom: var(--sy-space-3);
}

/* --- Scenes: マーケット写真ギャラリー(写真未配置時は出力されない) --- */
.sy-scenes {
	padding-top: calc(var(--sy-section-gap) * 0.5);
}

.sy-scenes__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sy-space-2);
}

@media (min-width: 480px) {
	.sy-scenes__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sy-space-3);
	}
}

.sy-scenes__item picture {
	display: block;
}

.sy-scenes__item img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sy-radius-sm);
}

/* ==========================================================================
   工程72: HOME下部CTA群(creators / cta / vision)— 役割を分けた3セクション
   ========================================================================== */

/* --- #1 Creators: 募集訴求(和紙背景・2カラム訴求+魅力カード) --- */
.sy-creators {
	background-color: var(--sy-color-bg);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-creators__layout {
	display: grid;
	gap: var(--sy-space-6);
}

@media (min-width: 1025px) {
	.sy-creators__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: var(--sy-space-8);
	}
}

.sy-creators__intro {
	max-width: 40em;
}

.sy-creators__body {
	margin: var(--sy-space-3) 0 var(--sy-space-4);
}

.sy-creators__cta {
	margin: 0;
}

.sy-creators__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-3);
}

.sy-creators__card {
	display: flex;
	align-items: center;
	gap: var(--sy-space-3);
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	box-shadow: var(--sy-shadow-sm);
	padding: var(--sy-space-3) var(--sy-space-4);
}

.sy-creators__card-num {
	flex: 0 0 auto;
	font-family: var(--sy-font-heading);
	font-size: var(--sy-fs-h3);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-accent-strong);
	line-height: 1;
}

.sy-creators__card-text {
	color: var(--sy-color-text);
	font-size: var(--sy-fs-base);
}

/* --- #2 Visit CTA: 淡い桜背景の中に白カードを中央配置 --- */
.sy-cta {
	background-color: var(--sy-color-accent-tint);
	border-top: var(--sy-border);
	text-align: center;
}

.sy-cta__card {
	max-width: 40em;
	margin-inline: auto;
	background-color: var(--sy-color-surface);
	border-radius: var(--sy-radius);
	box-shadow: var(--sy-shadow);
	padding: var(--sy-space-6) var(--sy-space-4);
}

@media (min-width: 768px) {
	.sy-cta__card {
		padding: var(--sy-space-7) var(--sy-space-6);
	}
}

.sy-cta__body {
	margin: var(--sy-space-3) 0 0;
	color: var(--sy-color-text);
}

.sy-cta__address {
	margin: var(--sy-space-2) 0 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

.sy-cta__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sy-space-3);
	margin: var(--sy-space-5) 0 0;
}

@media (min-width: 480px) {
	.sy-cta__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* --- #3 Vision: 事業ビジョンの締め(3ステップ横並び) --- */
.sy-vision {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	text-align: center;
}

.sy-vision__intro {
	max-width: 40em;
	margin-inline: auto;
}

.sy-vision__body {
	margin: var(--sy-space-3) 0 0;
	color: var(--sy-color-text);
}

.sy-vision__steps {
	list-style: none;
	margin: var(--sy-space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-4);
	text-align: left;
}

@media (min-width: 768px) {
	.sy-vision__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sy-space-4);
	}
}

.sy-vision__step {
	background-color: var(--sy-color-bg);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	padding: var(--sy-space-4);
}

.sy-vision__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	font-family: var(--sy-font-heading);
	font-weight: var(--sy-fw-bold);
	font-size: var(--sy-fs-sm);
	margin-bottom: var(--sy-space-3);
}

.sy-vision__step-title {
	margin: 0 0 var(--sy-space-1);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
}

.sy-vision__step-text {
	margin: 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

.sy-vision__cta {
	margin: var(--sy-space-6) 0 0;
}

/* ==========================================================================
 * 工程11: SOI YIPUN (/soiyipun/) ・ VISIT SOI YIPUN (/en/visit/)
 * ========================================================================== */

/* --- GeneratePressレイアウト調整(soiyipun/visit限定) --- */
.site-content .sy-soiyipun.content-area,
.site-content .sy-visit.content-area {
	width: 100%;
}

.sy-soiyipun .site-main,
.sy-visit .site-main {
	margin: 0;
}

/* --- セクション共通パディング --- */
.sy-soiyipun__section,
.sy-visit__section {
	padding-top: var(--sy-section-gap);
	padding-bottom: var(--sy-section-gap);
}

/* --- Hero --- */
.sy-soiyipun-hero,
.sy-visit-hero {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
}

.sy-soiyipun-hero__body,
.sy-visit-hero__body {
	max-width: 40em;
}

.sy-soiyipun-hero__cta,
.sy-visit-hero__cta {
	margin: var(--sy-space-4) 0 0;
}

.sy-soiyipun-hero__media,
.sy-visit-hero__media {
	margin-top: var(--sy-space-5);
	border-radius: 6px;
	overflow: hidden;
}

.sy-soiyipun-hero__media img,
.sy-visit-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- Story (JA) / About (EN) --- */
.sy-soiyipun-story__body,
.sy-visit-about__body {
	margin: var(--sy-space-3) 0 0;
	max-width: 40em;
}

.sy-soiyipun-story__body p + p,
.sy-visit-about__body p + p {
	margin-top: var(--sy-space-3);
}

/* --- Store (JA) --- */
.sy-soiyipun-store {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-soiyipun-store__body {
	margin: var(--sy-space-3) 0 0;
	max-width: 40em;
}

.sy-soiyipun-store__body p + p {
	margin-top: var(--sy-space-3);
}

.sy-soiyipun-store__media,
.sy-visit-about__media {
	display: grid;
	gap: var(--sy-space-3);
	margin-top: var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-soiyipun-store__media,
	.sy-visit-about__media {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sy-soiyipun-store__photo,
.sy-visit-about__photo {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}

.sy-soiyipun-store__photo img,
.sy-visit-about__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Gallery (soiyipun/visit) --- */
.sy-soiyipun-gallery,
.sy-visit-gallery {
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-soiyipun-gallery__lead,
.sy-visit-gallery__lead {
	margin: var(--sy-space-3) 0 var(--sy-space-4);
	max-width: 40em;
	color: var(--sy-color-text-muted);
}

.sy-soiyipun-gallery__grid,
.sy-visit-gallery__grid {
	display: grid;
	gap: var(--sy-space-3);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.sy-soiyipun-gallery__grid,
	.sy-visit-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-soiyipun-gallery__grid,
	.sy-visit-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sy-soiyipun-gallery__photo,
.sy-visit-gallery__photo {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}

.sy-soiyipun-gallery__photo img,
.sy-visit-gallery__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Access --- */
.sy-soiyipun-access,
.sy-visit-access {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

/* 情報リスト(dl) — access・info 共用 */
.sy-info-list {
	margin: var(--sy-space-4) 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sy-space-2) var(--sy-space-4);
	align-items: baseline;
}

.sy-info-list dt {
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
	white-space: nowrap;
}

.sy-info-list dd {
	margin: 0;
}

.sy-access__map-link,
.sy-soiyipun-google-map__cta,
.sy-visit-google-map__cta {
	margin-top: var(--sy-space-4);
}

/* --- Google Map (soiyipun/visit) --- */
.sy-soiyipun-google-map,
.sy-visit-google-map {
	border-bottom: var(--sy-border);
}

.sy-soiyipun-google-map__lead,
.sy-visit-google-map__lead {
	margin: var(--sy-space-3) 0 var(--sy-space-4);
	max-width: 40em;
	color: var(--sy-color-text-muted);
}

/* --- Brands (soiyipun/visit) --- */
.sy-soiyipun-brands,
.sy-visit-brands {
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

/* --- Info (営業・来場情報) --- */
.sy-soiyipun-info,
.sy-visit-info {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-soiyipun-info__note,
.sy-visit-info__note {
	margin-top: var(--sy-space-4);
	color: var(--sy-color-text-muted);
}

/* --- Creators CTA (JA専用) --- */
.sy-soiyipun-creators {
	background-color: var(--sy-color-accent-tint);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
	text-align: center;
}

.sy-soiyipun-creators__body {
	margin: var(--sy-space-3) 0 var(--sy-space-4);
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

/* --- Visit CTA (EN専用) --- */
.sy-visit-cta {
	background-color: var(--sy-color-accent-tint);
	border-top: var(--sy-border);
	text-align: center;
}

.sy-visit-cta__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sy-space-3);
	margin: var(--sy-space-4) 0 0;
}

@media (min-width: 480px) {
	.sy-visit-cta__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ==========================================================================
 * 工程12: Products archive (/products/) ・ Products single (/products/{slug}/)
 * ========================================================================== */

/* --- GeneratePressレイアウト調整 --- */
.site-content .sy-products-archive.content-area,
.site-content .sy-product.content-area {
	width: 100%;
}

.sy-products-archive .site-main,
.sy-product .site-main {
	margin: 0;
}

/* --- セクション共通パディング --- */
.sy-products__section,
.sy-product__section {
	padding-top: var(--sy-section-gap);
	padding-bottom: var(--sy-section-gap);
}

/* --- Archive: ヘッダー --- */
.sy-products-header {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
}

/* --- Archive: カテゴリーフィルター --- */
.sy-products-filter {
	border-bottom: var(--sy-border);
	background-color: var(--sy-color-surface);
	padding: var(--sy-space-3) 0;
}

.sy-filter-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-2);
}

.sy-filter-tab {
	display: inline-block;
	padding: 6px var(--sy-space-3);
	border: 1px solid var(--sy-color-border);
	border-radius: 20px;
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-sub);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sy-filter-tab:hover {
	background-color: var(--sy-color-accent-tint);
	border-color: var(--sy-color-accent);
	color: var(--sy-color-primary);
}

.sy-filter-tab.is-active {
	background-color: var(--sy-color-primary);
	border-color: var(--sy-color-primary);
	color: #fff;
}

/* --- Archive: グリッドセクション --- */
.sy-products-grid {
	border-top: none;
}

.sy-products-empty {
	color: var(--sy-color-text-sub);
	padding: var(--sy-space-6) 0;
	text-align: center;
}

/* --- Archive: カードロゴメディア --- */
.sy-card__media--logo {
	background-color: var(--sy-color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sy-space-3);
}

.sy-card__media--logo img {
	max-height: 80px;
	width: auto;
	object-fit: contain;
}

/* --- Single: Hero --- */
.sy-product-hero {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
	min-height: 220px;
	display: flex;
	align-items: flex-end;
}

.sy-product-hero--has-bg {
	background-size: cover;
	background-position: center;
	position: relative;
}

.sy-product-hero--has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(51, 36, 22, 0.7) 0%, rgba(51, 36, 22, 0.2) 60%, transparent 100%);
}

.sy-product-hero--has-bg .sy-wrap {
	position: relative;
	z-index: 1;
}

.sy-product-hero--has-bg .sy-product-hero__title {
	color: #fff;
}

.sy-product-hero__body {
	padding: var(--sy-space-6) 0 var(--sy-space-5);
}

.sy-product-hero__logo {
	margin-bottom: var(--sy-space-3);
}

.sy-product-hero__logo img {
	max-height: 64px;
	width: auto;
}

.sy-product-hero--has-bg .sy-product-hero__logo img {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.sy-product-hero__title {
	margin: 0;
}

/* --- Single: Intro --- */
.sy-product-intro__meta {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-sub);
	margin: 0 0 var(--sy-space-3);
}

.sy-product-intro__creator + .sy-product-intro__company::before {
	content: ' / ';
}

.sy-product-intro__body {
	margin-top: var(--sy-space-3);
}

.sy-product-intro__body p + p {
	margin-top: var(--sy-space-3);
}

/* --- Single: Featured items --- */
.sy-product-items {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-product-items h2 {
	margin-bottom: var(--sy-space-4);
}

.sy-product-items__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sy-space-4);
}

@media (min-width: 480px) {
	.sy-product-items__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-product-items__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.sy-product-item__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--sy-color-bg);
}

.sy-product-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sy-product-item__body {
	margin-top: var(--sy-space-2);
}

.sy-product-item__name {
	font-weight: var(--sy-fw-bold);
	font-size: var(--sy-fs-sm);
	margin: 0;
}

.sy-product-item__note {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-sub);
	margin: var(--sy-space-1) 0 0;
}

/* --- Single: Details --- */
.sy-product-details {
	border-top: var(--sy-border);
}

.sy-product-details h2 {
	margin-bottom: var(--sy-space-4);
}

.sy-product-details__list {
	max-width: 40em;
}

.sy-product-details__photo {
	margin-top: var(--sy-space-5);
}

.sy-product-details__photo .sy-eyebrow {
	margin-bottom: var(--sy-space-3);
}

.sy-product-details__photo img {
	width: 100%;
	max-width: 640px;
	height: auto;
	border-radius: 4px;
	display: block;
}

/* --- Single: Links + nav --- */
.sy-product-links {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
}

.sy-product-links__status {
	margin: 0 0 var(--sy-space-4);
}

.sy-product-links__external {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-3);
	margin: 0 0 var(--sy-space-5);
}

.sy-product-links__nav {
	margin: 0;
	padding-top: var(--sy-space-4);
	border-top: var(--sy-border);
}

.sy-product-links__nav a {
	color: var(--sy-color-text-sub);
	text-decoration: none;
	font-size: var(--sy-fs-sm);
}

.sy-product-links__nav a:hover {
	color: var(--sy-color-primary);
}

/* ==========================================================================
 * 工程13: Stories archive (/stories/) ・ Stories single (/stories/{slug}/)
 *         GUIDE page (/guide/)
 * ========================================================================== */

/* --- GeneratePressレイアウト調整 --- */
.site-content .sy-stories-archive.content-area,
.site-content .sy-story.content-area,
.site-content .sy-guide-page.content-area {
	width: 100%;
}

.sy-stories-archive .site-main,
.sy-story .site-main,
.sy-guide-page .site-main {
	margin: 0;
}

/* --- セクション共通パディング --- */
.sy-stories__section,
.sy-story__section,
.sy-guide-page__section {
	padding-top: var(--sy-section-gap);
	padding-bottom: var(--sy-section-gap);
}

/* --- Stories archive: ヘッダー --- */
.sy-stories-header {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
}

/* --- Stories archive: ヘッダーのリード文(表示改善1) --- */
.sy-stories-header__lead {
	margin: var(--sy-space-3) 0 0;
	max-width: 40em;
	color: var(--sy-color-text);
}

/* --- Stories archive: Chatuchak写真ギャラリー(表示改善1。
       写真未配置時は出力されないため崩れなし) --- */
.sy-stories-gallery {
	background-color: var(--sy-color-surface);
	border-bottom: var(--sy-border);
	padding-top: var(--sy-space-5);
	padding-bottom: var(--sy-space-5);
}

.sy-stories-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sy-space-3);
}

@media (min-width: 640px) {
	.sy-stories-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-stories-gallery__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.sy-stories-gallery__item picture {
	display: block;
}

.sy-stories-gallery__item img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sy-radius-sm);
	box-shadow: var(--sy-shadow-sm);
}

/* --- Stories archive: フィルター --- */
.sy-stories-filter {
	border-bottom: var(--sy-border);
	background-color: var(--sy-color-surface);
	padding: var(--sy-space-3) 0;
}

/* --- Stories archive: 空状態 --- */
.sy-stories-empty {
	color: var(--sy-color-text-muted);
	padding: var(--sy-space-6) 0;
	text-align: center;
}

/* --- カード: カテゴリーラベル --- */
.sy-card__category {
	font-size: var(--sy-fs-sm);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-accent-strong);
	letter-spacing: 0.04em;
	margin: 0 0 var(--sy-space-1);
}

/* --- Stories single: ヘッダー(アイキャッチあり) --- */
.sy-story__header {
	background-color: var(--sy-color-accent-tint);
}

.sy-story-header--has-bg {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

@media (min-width: 768px) {
	.sy-story-header--has-bg {
		min-height: 320px;
	}
}

.sy-story-header__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.sy-story-header--has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%);
}

.sy-story-header__inner {
	position: relative;
	z-index: 1;
	padding-top: var(--sy-section-gap);
	padding-bottom: calc(var(--sy-section-gap) * 0.75);
}

.sy-story-header--has-bg .sy-story-header__inner {
	color: #fff;
}

.sy-story-header__cat {
	margin: 0 0 var(--sy-space-2);
}

.sy-story-header__title {
	margin: 0;
	font-size: clamp(1.4rem, 3.5vw, 2.25rem);
	line-height: 1.25;
}

.sy-story-header__lead {
	margin: var(--sy-space-3) 0 0;
	font-size: 1rem;
	line-height: 1.7;
}

/* --- カテゴリーバッジ --- */
.sy-badge--category {
	background-color: var(--sy-color-accent-tint);
	color: var(--sy-color-accent-strong);
	border-color: var(--sy-color-accent);
}

.sy-story-header--has-bg .sy-badge--category {
	background-color: rgba(255,255,255,.18);
	color: #fff;
	border-color: rgba(255,255,255,.35);
}

/* Shared hero readability styles for all current and future Stories posts */
.single-stories .sy-story-header__title {
	color: #F3E6CC;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.9),
		0 0 12px rgba(0, 0, 0, 0.35);
}

.single-stories .sy-story-header__lead {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.single-stories .sy-story-header--has-bg::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.38) 42%,
		rgba(0, 0, 0, 0.68) 100%
	);
}

/* --- Stories single: 本文エリア --- */
.sy-story__body {
	padding: var(--sy-section-gap) var(--sy-gutter);
	margin: 0 auto;
}

/* --- Gutenberg 本文スタイル補完 --- */
.sy-rich-text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sy-radius);
}

.sy-rich-text figure {
	margin: var(--sy-space-4) 0;
}

.sy-rich-text figcaption {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-muted);
	text-align: center;
	margin-top: var(--sy-space-1);
}

.sy-rich-text p + p {
	margin-top: var(--sy-space-3);
}

/* --- アーカイブ戻りリンク --- */
.sy-story-body__nav {
	margin-top: var(--sy-space-6);
	padding-top: var(--sy-space-4);
	border-top: var(--sy-border);
}

.sy-story-body__nav a {
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
	text-decoration: none;
}

.sy-story-body__nav a:hover {
	color: var(--sy-color-primary);
}

/* --- Stories single: 関連コンテンツ --- */
.sy-story-related {
	background-color: var(--sy-color-accent-tint);
	border-top: var(--sy-border);
}

.sy-story-related__group + .sy-story-related__group {
	margin-top: var(--sy-space-5);
}

/* --- コンパクトカードグリッド(関連コンテンツ用) --- */
.sy-card-grid--related {
	display: grid;
	gap: var(--sy-space-3);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.sy-card-grid--related {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sy-card--compact .sy-card__title {
	font-size: var(--sy-fs-sm);
	font-weight: var(--sy-fw-bold);
}

/* --- GUIDE page: Hero --- */
.sy-guide-hero {
	background-color: var(--sy-color-accent-tint);
	border-bottom: var(--sy-border);
}

.sy-guide-hero__title {
	margin: var(--sy-space-2) 0 0;
	font-size: clamp(1.4rem, 3.5vw, 2.25rem);
	line-height: 1.3;
}

.sy-guide-hero__lead {
	margin: var(--sy-space-3) 0 0;
	max-width: 600px;
	line-height: 1.7;
}

/* --- GUIDE page: Hero直下の案内画像（表示改善6） --- */
.sy-guide-visual__figure {
	margin: 0;
}

.sy-guide-visual img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: var(--sy-border);
	border-radius: var(--sy-radius);
}

/* 表示改善7: 前後セクションの padding-top/bottom（section-gap）と二重に
   積み上がる分だけ本セクション自体の余白を詰める。ヒーロー・カテゴリー
   セクション側の padding は変更しない（GUIDE専用の本クラスのみで調整）。
   表示改善8: 表示改善7のPC側 margin-top（-8px/-40px）が強すぎて、ピンクの
   ヒーロー帯とMAP画像が重なって見えたため、PC側は正のmarginに戻して
   余白を広げ直した。margin-bottom（画像下→カテゴリ見出し）は表示改善7の
   時点で問題がなかったため変更していない。 */
.sy-guide-visual {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: -8px;
	margin-bottom: -4px;
}

@media (min-width: 769px) {
	.sy-guide-visual {
		margin-top: 24px;
		margin-bottom: 0;
	}
}

@media (min-width: 1025px) {
	.sy-guide-visual {
		margin-top: 0;
		margin-bottom: -32px;
	}
}

/* --- GUIDE page: Categories --- */
.sy-guide-categories h2 {
	margin-bottom: var(--sy-space-5);
}

.sy-guide-cat + .sy-guide-cat {
	margin-top: var(--sy-space-6);
	padding-top: var(--sy-space-5);
	border-top: var(--sy-border);
}

.sy-guide-cat__head {
	display: flex;
	align-items: baseline;
	gap: var(--sy-space-3);
	margin-bottom: var(--sy-space-4);
}

.sy-guide-cat__name {
	margin: 0;
	font-size: 1.125rem;
}

.sy-guide-cat__more {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.sy-guide-cat__more:hover {
	text-decoration: underline;
}

/* --- GUIDE page: Map CTA --- */
.sy-guide-map {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
	border-bottom: var(--sy-border);
}

.sy-guide-map__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-4);
	align-items: flex-start;
}

@media (min-width: 640px) {
	.sy-guide-map__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.sy-guide-map h2 {
	margin: var(--sy-space-2) 0 0;
}

/* --- GUIDE page: CTA --- */
.sy-guide-cta {
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	text-align: center;
}

.sy-guide-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sy-space-4);
}

.sy-guide-cta .sy-eyebrow {
	color: rgba(255,255,255,.75);
}

.sy-guide-cta h2 {
	margin: 0;
	color: var(--sy-color-surface);
}

.sy-guide-cta .sy-btn--primary {
	background-color: var(--sy-color-surface);
	color: var(--sy-color-primary);
	border: 1px solid var(--sy-color-surface);
}

.sy-guide-cta .sy-btn--primary:hover {
	background-color: transparent;
	color: var(--sy-color-surface);
}

/* ==========================================================================
   工程14: MAP page + Spots single
   ========================================================================== */

/* --- Full-width wrappers -------------------------------------------------- */

.sy-map-page,
.sy-spot {
	width: 100%;
}

/* 工程75: MAPページはGeneratePressの right-sidebar レイアウトが適用されており、
   上記の弱い width:100% だけではサイドバー分の幅計算・余白が解除しきれず、
   ページ全体が左寄りに見えていた。.sy-home / .sy-soiyipun 等と同じ強さの
   上書き(.site-content 経由 + .site-main margin:0)を適用して中央基準に揃える。
   .sy-spot(Spot詳細)は工程75時点では対象外だったが、工程78で同じ問題が
   確認されたため同一パターンで補正した(下記)。 */
.site-content .sy-map-page.content-area {
	width: 100%;
}

.sy-map-page .site-main {
	margin: 0;
}

/* 工程78: Spot詳細ページ(/spots/{slug}/・/en/spots/{slug}/)も body class に
   right-sidebar が付与されており、MAPページと同一原因で左寄りに見えていた。
   同じ強さの上書きを .sy-spot 専用に適用する。 */
.site-content .sy-spot.content-area {
	width: 100%;
}

.sy-spot .site-main {
	margin: 0;
}

/* --- MAP page sections ---------------------------------------------------- */

.sy-map-page__section {
	padding-block: var(--sy-section-gap);
}

.sy-map-page__section + .sy-map-page__section {
	padding-top: 0;
}

/* --- MAP hero ------------------------------------------------------------- */

.sy-map-hero {
	background-color: var(--sy-color-accent-tint);
}

.sy-map-hero__title {
	font-size: clamp(1.625rem, 4vw, 2.25rem);
	font-weight: 600;
	color: var(--sy-color-primary);
	margin-block: var(--sy-space-3) var(--sy-space-3);
	line-height: 1.35;
}

.sy-map-hero__lead {
	color: var(--sy-color-text-muted);
	max-width: 640px;
	margin: 0;
}

/* --- MAP image ------------------------------------------------------------ */

.sy-map-image {
	padding-block: 0;
	background-color: var(--sy-color-bg);
}

.sy-map-image__inner {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sy-map-image__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.sy-map-illustration {
	margin: 0 0 var(--sy-space-3);
}

.sy-map-illustration img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* --- MAP spots section ---------------------------------------------------- */

.sy-map-spots h2 {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 600;
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

.sy-map-spots-empty {
	color: var(--sy-color-text-muted);
	padding-block: var(--sy-space-5);
}

/* Spots grid — same responsive pattern as stories */

.sy-card-grid--spots {
	margin-top: var(--sy-space-4);
}

/* Soi YIPUN highlighted card */

.sy-card--soiyipun {
	border: 2px solid var(--sy-color-accent-strong);
	position: relative;
}

/* Map number badge */

.sy-spot-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding-inline: 0.375rem;
	border-radius: 50%;
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}

/* Soi YIPUN badge */

.sy-badge--soiyipun {
	display: inline-block;
	padding: 0.1875rem 0.5rem;
	border-radius: 3px;
	background-color: var(--sy-color-accent-strong);
	color: var(--sy-color-surface);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

/* Filter tabs — button variant (extends existing a.sy-filter-tab styles) */

button.sy-filter-tab {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--sy-color-border);
	background-color: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--sy-color-text-muted);
	padding: 0.375rem 0.875rem;
	border-radius: 2rem;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button.sy-filter-tab:hover {
	background-color: var(--sy-color-accent-tint);
	color: var(--sy-color-primary);
	border-color: var(--sy-color-accent);
}

button.sy-filter-tab.is-active {
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	border-color: var(--sy-color-primary);
}

/* --- MAP CTA section(工程74: ワクワク感のある2枚のカード) ------------------ */

.sy-map-cta {
	background-color: var(--sy-color-accent-tint);
}

/* 工程76: 「.sy-map-page__section + .sy-map-page__section { padding-top: 0; }」
   (同背景が続く場合の二重余白防止ルール)が、背景色の異なる本セクションにも
   適用され、上paddingが0・下paddingのみ通常どおりという非対称な余白になり、
   ピンク背景内でカード群が上寄りに見えていた。本セクション専用に
   上下対称のpaddingへ戻す(他セクション間のルールには影響しない)。 */
.sy-map-cta.sy-map-page__section {
	padding-top: var(--sy-section-gap);
}

/* 工程77: 最下部ビジョンCTA(.sy-vision)も、直前の.sy-map-cta(ピンク背景)から
   続く .sy-map-page__section として同じ「隣接上padding0」ルールの影響を受け、
   白背景内で上寄り・下側余白過多に見えていた。TOPページと共有する.sy-vision
   自体は変更せず、MAPページのみで有効な複合セレクタで上paddingを復元する。 */
.sy-vision.sy-map-page__section {
	padding-top: var(--sy-section-gap);
}

.sy-map-cta__inner {
	display: grid;
	gap: var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-map-cta__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sy-space-5);
	}
}

.sy-map-cta__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--sy-color-surface);
	border-radius: var(--sy-radius);
	box-shadow: var(--sy-shadow);
	padding: var(--sy-space-6) var(--sy-space-4);
}

@media (min-width: 768px) {
	.sy-map-cta__card {
		padding: var(--sy-space-7) var(--sy-space-5);
	}
}

/* 工程75: 2枚のカードの高さはgridのalign-items:stretch(既定)で揃うが、
   本文の行数差でボタン位置がずれて見えるため、ボタンをカード下部へ固定する。 */
.sy-map-cta__card > .sy-btn {
	margin-top: auto;
}

.sy-map-cta__text {
	font-size: var(--sy-fs-h4);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
	line-height: var(--sy-lh-heading);
	margin: var(--sy-space-2) 0 var(--sy-space-2);
}

.sy-map-cta__desc {
	color: var(--sy-color-text-muted);
	margin: 0 0 var(--sy-space-4);
}

/* ==========================================================================
   Spots single
   ========================================================================== */

/* --- Spot header ---------------------------------------------------------- */

.sy-spot__header {
	padding-block: var(--sy-space-5) var(--sy-space-4);
	background-color: var(--sy-color-accent-tint);
}

.sy-spot-header__meta {
	display: flex;
	align-items: center;
	gap: var(--sy-space-2);
	flex-wrap: wrap;
	margin-bottom: var(--sy-space-3);
}

.sy-spot__title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 600;
	color: var(--sy-color-primary);
	line-height: 1.3;
	margin-block: 0 var(--sy-space-2);
}

.sy-spot__lead {
	color: var(--sy-color-text-muted);
	font-size: 1rem;
	margin: 0;
}

/* --- Spot photos ---------------------------------------------------------- */

.sy-spot__photos {
	display: grid;
	gap: var(--sy-space-3);
	padding-block: var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-spot__photos {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

.sy-spot__photo {
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
}

.sy-spot__photo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.sy-spot__photo--main {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.sy-spot__photo--main {
		grid-column: auto;
	}
}

/* --- Spot body ------------------------------------------------------------ */

.sy-spot__body {
	padding-block: var(--sy-space-4) var(--sy-space-6);
}

/* --- Spot meta (dl) ------------------------------------------------------- */

.sy-spot__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sy-space-1) var(--sy-space-4);
	align-items: baseline;
	margin-block: var(--sy-space-4);
	padding: var(--sy-space-3) var(--sy-space-4);
	background-color: var(--sy-color-bg);
	border-radius: 6px;
	border: 1px solid var(--sy-color-border);
}

.sy-spot__meta dt {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sy-color-text-muted);
	white-space: nowrap;
}

.sy-spot__meta dd {
	margin: 0;
	color: var(--sy-color-text);
	font-size: 0.9375rem;
}

/* --- Spot Google Maps button ---------------------------------------------- */

.sy-spot__gmaps {
	margin-block: var(--sy-space-3);
}

/* --- Spot back nav -------------------------------------------------------- */

.sy-spot__nav {
	margin-top: var(--sy-space-4);
	font-size: 0.875rem;
}

.sy-spot__nav a {
	color: var(--sy-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sy-spot__nav a:hover {
	color: var(--sy-color-primary);
}

/* ==========================================================================
   工程15: Google Maps embed
   ========================================================================== */

/* --- MAP page: Google Maps embed section ---------------------------------- */

.sy-map-google-map__heading {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 600;
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

/* --- Shared iframe responsive wrapper ------------------------------------ */

.sy-map-embed,
.sy-spot__map-embed,
.sy-soiyipun-map-embed,
.sy-visit-map-embed {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--sy-color-bg);
}

.sy-map-embed,
.sy-soiyipun-map-embed,
.sy-visit-map-embed {
	aspect-ratio: 16 / 9;
}

.sy-spot__map-embed {
	aspect-ratio: 4 / 3;
	margin-block: var(--sy-space-3) 0;
}

@media (min-width: 640px) {
	.sy-spot__map-embed {
		aspect-ratio: 16 / 9;
	}
}

.sy-map-embed__iframe,
.sy-spot__map-embed-iframe,
.sy-soiyipun-map-embed__iframe,
.sy-visit-map-embed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   工程16: CREATORS / CONTACT ページ
   工程84: CREATORSページをLP構成へ全面改修(写真追加・セクション追加)
   ========================================================================== */

/* --- GeneratePressレイアウト調整(creators限定。map/spotページ(工程75/78)と
       同一パターンで右サイドバー分の余白を解消) --- */
.site-content .sy-creators-page.content-area {
	width: 100%;
}

.sy-creators-page .site-main {
	margin: 0;
}

/* --- Shared: page section spacing ---------------------------------------- */

.sy-creators-page__section,
.sy-contact-page__section {
	padding-block: var(--sy-space-7);
}

@media (min-width: 769px) {
	.sy-creators-page__section,
	.sy-contact-page__section {
		padding-block: var(--sy-space-8);
	}
}

/* --- CREATORS: hero ------------------------------------------------------- */

.sy-creators-hero {
	background-color: var(--sy-color-bg);
	border-bottom: var(--sy-border);
}

.sy-creators-hero__title {
	font-size: var(--sy-fs-h1);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

.sy-creators-hero__lead {
	font-size: var(--sy-fs-lg);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text);
	max-width: 48em;
}

/* --- CREATORS: hero写真(工程84追加) --------------------------------------- */

.sy-creators-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-5);
}

.sy-creators-hero__body {
	max-width: 40em;
}

.sy-creators-hero__cta {
	margin: var(--sy-space-4) 0 0;
}

.sy-creators-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sy-radius);
}

@media (min-width: 769px) {
	.sy-creators-hero__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--sy-space-7);
	}

	.sy-creators-hero__body {
		flex: 0 0 48%;
	}

	.sy-creators-hero__media {
		flex: 1 1 auto;
	}
}

/* --- CREATORS: why chatuchak(工程84新設) ---------------------------------- */

.sy-creators-why {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
}

.sy-creators-why__head {
	max-width: 44em;
	margin-bottom: var(--sy-space-6);
}

.sy-creators-why__lead {
	margin: var(--sy-space-3) 0 0;
	color: var(--sy-color-text-muted);
}

.sy-creators-why__layout {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-5);
}

.sy-creators-why__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sy-radius);
}

.sy-creators-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.sy-creators-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 769px) {
	.sy-creators-why__layout {
		flex-direction: row;
		align-items: stretch;
		gap: var(--sy-space-6);
	}

	.sy-creators-why__media {
		flex: 0 0 40%;
	}

	.sy-creators-why__media img {
		height: 100%;
	}

	.sy-creators-why__grid {
		flex: 1 1 auto;
	}
}

.sy-creators-why__card {
	background-color: var(--sy-color-bg);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	padding: var(--sy-space-4);
}

.sy-creators-why__card-title {
	margin: 0 0 var(--sy-space-2);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
}

.sy-creators-why__card-text {
	margin: 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

/* --- CREATORS: market gallery(工程84新設) --------------------------------- */

.sy-creators-gallery {
	background-color: var(--sy-color-bg);
	border-top: var(--sy-border);
}

.sy-creators-gallery__lead {
	margin: var(--sy-space-3) 0 var(--sy-space-5);
	max-width: 40em;
	color: var(--sy-color-text-muted);
}

.sy-creators-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-3);
	grid-template-columns: repeat(2, 1fr);
}

.sy-creators-gallery__item {
	margin: 0;
	border-radius: var(--sy-radius-sm);
	overflow: hidden;
}

.sy-creators-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sy-creators-gallery__item--feature {
	grid-column: 1 / -1;
}

.sy-creators-gallery__item--feature img {
	aspect-ratio: 16 / 9;
}

@media (min-width: 640px) {
	.sy-creators-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-creators-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- CREATORS: body ------------------------------------------------------- */

.sy-creators-body {
	background-color: var(--sy-color-surface);
}

.sy-creators-body__heading {
	font-size: var(--sy-fs-h2);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

.sy-creators-body__lead {
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	margin-bottom: var(--sy-space-6);
}

.sy-creators-body__list {
	list-style: none;
	padding: 0;
	margin: var(--sy-space-6) 0;
	display: grid;
	gap: var(--sy-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.sy-creators-body__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-creators-body__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sy-creators-body__item {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-1);
	padding: var(--sy-space-5);
	background-color: var(--sy-color-bg);
	border-left: 4px solid var(--sy-color-accent-strong);
	border-radius: 0 var(--sy-radius-sm) var(--sy-radius-sm) 0;
}

.sy-creators-body__item-heading {
	font-size: var(--sy-fs-base);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-2);
}

.sy-creators-body__item p:last-child {
	margin-bottom: 0;
}

.sy-creators-body__note {
	padding: var(--sy-space-4);
	border: var(--sy-border);
	border-radius: var(--sy-radius-sm);
	background-color: var(--sy-color-accent-tint);
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-muted);
}

.sy-creators-body__note p {
	margin: 0;
}

/* --- CREATORS: cta -------------------------------------------------------- */

.sy-creators-cta {
	background-color: var(--sy-color-bg);
	border-top: var(--sy-border);
	text-align: center;
}

.sy-creators-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sy-space-4);
}

.sy-creators-cta h2 {
	font-size: var(--sy-fs-h2);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
}

.sy-creators-cta__body {
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text-muted);
	margin: 0;
}

/* --- CREATORS: fit(こんなブランドにおすすめ、工程84新設) ------------------- */

.sy-creators-fit {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
}

.sy-creators-fit__list {
	list-style: none;
	margin: var(--sy-space-4) 0 var(--sy-space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3);
}

.sy-creators-fit__item {
	position: relative;
	padding-left: var(--sy-space-5);
	line-height: var(--sy-lh-body);
}

.sy-creators-fit__item::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sy-color-accent-strong);
	font-weight: var(--sy-fw-bold);
}

.sy-creators-fit__categories {
	padding-top: var(--sy-space-5);
	border-top: var(--sy-border);
}

.sy-creators-fit__categories-label {
	margin: 0 0 var(--sy-space-3);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
	font-size: var(--sy-fs-sm);
}

.sy-creators-fit__categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-2);
}

/* --- CREATORS: world(チャトチャックから世界へ、工程84新設・重点訴求) ------- */

.sy-creators-world {
	background-color: var(--sy-color-accent-tint);
	border-top: var(--sy-border);
}

.sy-creators-world__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-5);
}

.sy-creators-world__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sy-radius);
}

.sy-creators-world__lead {
	margin: var(--sy-space-3) 0 var(--sy-space-5);
	max-width: 42em;
}

.sy-creators-world__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-creators-world__steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sy-creators-world__step {
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	padding: var(--sy-space-4);
}

.sy-creators-world__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--sy-color-primary);
	color: var(--sy-color-surface);
	font-family: var(--sy-font-heading);
	font-weight: var(--sy-fw-bold);
	font-size: var(--sy-fs-sm);
	margin-bottom: var(--sy-space-3);
}

.sy-creators-world__step-title {
	margin: 0 0 var(--sy-space-1);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
}

.sy-creators-world__step-text {
	margin: 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

@media (min-width: 769px) {
	.sy-creators-world__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--sy-space-7);
	}

	.sy-creators-world__media {
		flex: 0 0 42%;
	}

	.sy-creators-world__body {
		flex: 1 1 auto;
	}
}

/* --- CREATORS: flow(出店までの流れ、工程84新設) --------------------------- */

.sy-creators-flow {
	background-color: var(--sy-color-bg);
	border-top: var(--sy-border);
}

.sy-creators-flow__steps {
	list-style: none;
	margin: var(--sy-space-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sy-space-4);
}

@media (min-width: 640px) {
	.sy-creators-flow__steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.sy-creators-flow__steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sy-creators-flow__step {
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius);
	padding: var(--sy-space-4);
	text-align: center;
}

.sy-creators-flow__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--sy-color-accent-strong);
	color: var(--sy-color-surface);
	font-family: var(--sy-font-heading);
	font-weight: var(--sy-fw-bold);
	font-size: var(--sy-fs-sm);
	margin-bottom: var(--sy-space-3);
}

.sy-creators-flow__step-title {
	margin: 0 0 var(--sy-space-1);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
}

.sy-creators-flow__step-text {
	margin: 0;
	color: var(--sy-color-text-muted);
	font-size: var(--sy-fs-sm);
}

/* --- CREATORS: faq(よくあるご質問、工程84新設) ---------------------------- */

.sy-creators-faq {
	background-color: var(--sy-color-surface);
	border-top: var(--sy-border);
}

.sy-creators-faq__list {
	margin: var(--sy-space-5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3);
}

.sy-creators-faq__item {
	border: var(--sy-border);
	border-radius: var(--sy-radius-sm);
	padding: var(--sy-space-3) var(--sy-space-4);
	background-color: var(--sy-color-bg);
}

.sy-creators-faq__question {
	cursor: pointer;
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-primary);
	list-style: none;
}

.sy-creators-faq__question::-webkit-details-marker {
	display: none;
}

.sy-creators-faq__question::before {
	content: "+";
	display: inline-block;
	width: 1.25em;
	color: var(--sy-color-accent-strong);
	font-weight: var(--sy-fw-bold);
}

.sy-creators-faq__item[open] .sy-creators-faq__question::before {
	content: "\2013";
}

.sy-creators-faq__answer {
	margin: var(--sy-space-3) 0 0 1.25em;
	color: var(--sy-color-text-muted);
}

/* --- CONTACT: hero -------------------------------------------------------- */

.sy-contact-hero {
	background-color: var(--sy-color-bg);
	border-bottom: var(--sy-border);
}

.sy-contact-hero__title {
	font-size: var(--sy-fs-h1);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

.sy-contact-hero__lead {
	font-size: var(--sy-fs-lg);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text);
	max-width: 44em;
}

/* --- CONTACT: form area --------------------------------------------------- */

.sy-contact-form {
	background-color: var(--sy-color-surface);
}

.sy-contact-form .sy-rich-text {
	max-width: var(--sy-container-narrow);
	margin-inline: auto;
}

/* CF7 form styling */

.sy-contact-form .wpcf7 {
	margin-top: var(--sy-space-5);
}

.sy-contact-form .wpcf7-form label {
	display: block;
	font-size: var(--sy-fs-sm);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-text);
	margin-bottom: var(--sy-space-1);
}

.sy-contact-form .wpcf7-form input[type="text"],
.sy-contact-form .wpcf7-form input[type="email"],
.sy-contact-form .wpcf7-form select,
.sy-contact-form .wpcf7-form textarea {
	width: 100%;
	padding: var(--sy-space-2) var(--sy-space-3);
	font-family: var(--sy-font-body);
	font-size: var(--sy-fs-base);
	color: var(--sy-color-text);
	background-color: var(--sy-color-surface);
	border: var(--sy-border);
	border-radius: var(--sy-radius-sm);
	appearance: none;
}

.sy-contact-form .wpcf7-form input[type="text"]:focus,
.sy-contact-form .wpcf7-form input[type="email"]:focus,
.sy-contact-form .wpcf7-form select:focus,
.sy-contact-form .wpcf7-form textarea:focus {
	outline: 2px solid var(--sy-color-focus);
	outline-offset: 2px;
	border-color: var(--sy-color-focus);
}

.sy-contact-form .wpcf7-form textarea {
	min-height: 160px;
	resize: vertical;
}

.sy-contact-form .wpcf7-form .wpcf7-submit {
	display: inline-block;
	padding: var(--sy-space-3) var(--sy-space-6);
	font-family: var(--sy-font-body);
	font-size: var(--sy-fs-base);
	font-weight: var(--sy-fw-bold);
	color: var(--sy-color-surface);
	background-color: var(--sy-color-primary);
	border: 2px solid var(--sy-color-primary);
	border-radius: var(--sy-radius-sm);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.sy-contact-form .wpcf7-form .wpcf7-submit:hover,
.sy-contact-form .wpcf7-form .wpcf7-submit:focus {
	background-color: var(--sy-color-primary-soft);
	border-color: var(--sy-color-primary-soft);
}

.sy-contact-form .wpcf7-validation-errors,
.sy-contact-form .wpcf7-acceptance-missing {
	color: var(--sy-color-error);
	font-size: var(--sy-fs-sm);
	margin-top: var(--sy-space-2);
}

.sy-contact-form .wpcf7-not-valid-tip {
	color: var(--sy-color-error);
	font-size: var(--sy-fs-sm);
	display: block;
	margin-top: var(--sy-space-1);
}

/* --- CONTACT: info (consultation list) ------------------------------------ */

.sy-contact-info {
	background-color: var(--sy-color-bg);
}

.sy-contact-info__heading {
	font-size: var(--sy-fs-h2);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-5);
}

.sy-contact-info__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sy-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sy-space-3);
}

.sy-contact-info__item {
	padding: var(--sy-space-3) var(--sy-space-4);
	background-color: var(--sy-color-surface);
	border-left: 4px solid var(--sy-color-accent-strong);
	border-radius: 0 var(--sy-radius-sm) var(--sy-radius-sm) 0;
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text);
}

.sy-contact-info__cta {
	margin: 0;
}

/* --- Common CTA: 出店相談 -------------------------------------------------- */

.sy-common-cta {
	padding-block: var(--sy-space-7);
	background-color: var(--sy-color-accent-tint);
	border-top: 1px solid var(--sy-color-border);
	text-align: center;
}

@media (min-width: 769px) {
	.sy-common-cta {
		padding-block: var(--sy-space-8);
	}
}

.sy-common-cta__heading {
	font-size: var(--sy-fs-h2);
	font-weight: var(--sy-fw-bold);
	line-height: var(--sy-lh-heading);
	color: var(--sy-color-primary);
	margin-bottom: var(--sy-space-4);
}

.sy-common-cta__body {
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text);
	max-width: 40em;
	margin-inline: auto;
	margin-bottom: var(--sy-space-6);
}

.sy-common-cta__btn {
	margin: 0;
}

/* ==========================================================================
   § 工程27 — Brands Archive 強化
   ========================================================================== */

/* --- ヘッダーリード文 --- */
.sy-products-header__lead {
	font-size: var(--sy-fs-base);
	line-height: var(--sy-lh-body);
	color: var(--sy-color-text-muted);
	margin-top: var(--sy-space-3);
	max-width: 40em;
}

/* --- カード: 産地 --- */
.sy-card__region {
	font-size: var(--sy-fs-sm);
	color: var(--sy-color-text-muted);
	margin: 0 0 var(--sy-space-1);
}

/* --- バッジ modifier --- */
.sy-badge--available {
	background-color: #e8f5e9;
	color: #2e7d32;
}
.sy-badge--coming {
	background-color: #fff8e1;
	color: #f57f17;
}
.sy-badge--inactive {
	background-color: #f5f5f5;
	color: #9e9e9e;
}

/* --- 空状態 --- */
.sy-products-empty {
	text-align: center;
	padding: var(--sy-space-10) 0;
}
.sy-products-empty__text {
	font-size: var(--sy-fs-base);
	color: var(--sy-color-text-muted);
	margin-bottom: var(--sy-space-6);
}
.sy-products-empty__cta {
	margin: 0;
}