/* =========================================================
   My Portfolio - main.css
   レイアウト / ヘッダー・フッター / トップページの各セクション
   （色・フォント・余白のトークンは style.css の :root を参照）
   ========================================================= */

/* ---------------------------------------------------------
   共通：セクション・見出し
   --------------------------------------------------------- */
.site-main { padding-top: var(--header-height); }

.section { padding-block: var(--space-8); }
.section--warm { background: var(--color-bg-warm); }

.eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-3);
}

.section-title {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 800;
}

.section-head { margin-bottom: var(--space-7); }
.section-lead {
	color: var(--color-ink-soft);
	line-height: 1.8;
	margin-top: var(--space-3);
	max-width: 640px;
}

.section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ---------------------------------------------------------
   ボタン
   --------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--color-accent);
	color: #fff;
	box-shadow: var(--shadow-pop);
}
.btn--primary:hover { background: var(--color-accent-deep); color: #fff; }

.btn--ghost {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: #fff; }

.btn--lg { font-size: 1.05rem; padding: 1em 2em; }

/* ---------------------------------------------------------
   ヘッダー（固定・glassmorphism）
   --------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-height);
	display: flex;
	align-items: center;
	background: rgba(250, 250, 248, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
	border-bottom-color: var(--color-line);
	box-shadow: var(--shadow-sm);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.site-header__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}
.site-header__dot { color: var(--color-accent); }
.site-header .custom-logo-link img { max-height: 40px; width: auto; }

/* PCナビ */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
}
.site-nav__list a {
	position: relative;
	padding-block: 0.25em;
}
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}
.site-nav__list a:hover { color: var(--color-accent); }
.site-nav__list a:hover::after { transform: scaleX(1); }

/* ハンバーガー */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	position: relative;
}
.nav-toggle__bar {
	display: block;
	width: 24px; height: 2px;
	margin: 4px auto;
	background: var(--color-ink);
	transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }

/* SPオーバーレイメニュー */
.mobile-menu {
	position: fixed;
	inset: var(--header-height) 0 0 0;
	z-index: 90;
	background: var(--color-bg);
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
	padding: var(--space-6) var(--gutter);
}
.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.6rem;
}
.mobile-menu__list a:hover { color: var(--color-accent); }
.mobile-menu__overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: transparent;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 10vw, 6rem) var(--space-8);
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero__eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-4);
}
.hero__title {
	font-size: clamp(2.6rem, 9vw, 5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.hero__highlight {
	position: relative;
	color: var(--color-accent);
	white-space: nowrap;
}
.hero__highlight::after {
	content: "";
	position: absolute;
	left: -2%; bottom: 0.08em;
	width: 104%; height: 0.28em;
	background: var(--color-accent-soft);
	border-radius: 999px;
	z-index: -1;
}
.hero__lead {
	margin: var(--space-5) 0 var(--space-6);
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	color: var(--color-ink-soft);
	max-width: 50ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ポップなアクセント図形 */
.hero__blob {
	position: absolute;
	border-radius: 50%;
	z-index: 1;
	filter: blur(2px);
	opacity: 0.9;
}
.hero__blob--1 {
	width: 220px; height: 220px;
	right: -40px; top: 8%;
	background: radial-gradient(circle at 30% 30%, var(--color-accent-soft), var(--color-accent));
	opacity: 0.55;
}
.hero__blob--2 {
	width: 130px; height: 130px;
	right: 22%; bottom: 6%;
	background: var(--color-pop);
	opacity: 0.25;
}

/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */
.about__grid { display: grid; gap: var(--space-6); }
.about__body p { margin-bottom: var(--space-4); color: var(--color-ink-soft); }
.about__body p:last-of-type { margin-bottom: var(--space-5); }

.skill-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.skill-chips li a,
.skill-chips li span {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.skill-chips li a:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ---------------------------------------------------------
   ORGS（運営団体紹介：なごめ／なごがく 2カラム）
   ABOUTセクション内、見出し直下に配置
   --------------------------------------------------------- */
.orgs {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-line);
}

.orgs__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
@media (min-width: 768px) {
	.orgs__grid {
		flex-direction: row;
		align-items: stretch;
		gap: var(--space-8);
	}
}

.org-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}
@media (min-width: 768px) {
	.org-card {
		width: 50%;
		padding: 0 var(--space-6);
	}
	.org-card + .org-card {
		border-left: 1px solid var(--color-line);
	}
}

.org-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0 0 var(--space-5);
}

.org-card__logo {
	display: block;
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
	.org-card__logo { width: 112px; height: 112px; }
}

.org-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	margin: 0;
}

.org-card__text {
	color: var(--color-ink-soft);
	line-height: 1.8;
	margin: 0 0 var(--space-6);
	flex-grow: 1;
}

.org-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-ink);
	padding: 0.75em 1.5em;
	border-radius: 999px;
	border: 2px solid var(--color-ink);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), gap 0.2s var(--ease), transform 0.2s var(--ease);
}
.org-card__link:hover {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
	gap: var(--space-3);
	transform: translateY(-2px);
}

.org-card__arrow { transition: transform 0.2s var(--ease); }
.org-card__link:hover .org-card__arrow { transform: translateX(2px); }

/* ---------------------------------------------------------
   INSTA LINKS（関連Instagramアカウント：3カラム）
   「なごめ／なごがく」2カラム（ORGS）のすぐ下に配置
   ※ クラス名を新規に統一（ig-links から insta-links-* へ移行）。
   ※ 既存テーマスタイルに負けないよう、詳細度を上げた上で
     !important を付与し、確実に横並び・中央寄せ・アイコン拡大を適用する。
   --------------------------------------------------------- */
body .insta-links-section {
	width: 100% !important;
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-line);
	box-sizing: border-box;
}

/* --- 一番親のコンテナ要素：PCでは横並び・画面中央寄せ（確実に適用） --- */
body .insta-links-section .insta-links-container {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 50px !important;
	margin: 40px auto !important;
	width: 100% !important;
	padding: 0 !important;
	list-style: none !important;
}

/* --- 各リンクアイテム：アイコンとテキストを縦中央で揃える --- */
body .insta-links-section .insta-links-container .insta-link-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important; /* アイコンと文字の間隔 */
	width: auto !important;
	max-width: none !important;
	color: var(--color-ink);
	text-decoration: none !important;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
body .insta-links-section .insta-links-container .insta-link-item:hover,
body .insta-links-section .insta-links-container .insta-link-item:focus-visible {
	opacity: 0.55;
	transform: translateY(-2px);
}

/* --- アイコンサイズ：文字より一回り大きく、押しやすいサイズに --- */
body .insta-links-section .insta-icon-wrap {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	color: var(--color-ink);
}
body .insta-links-section .insta-icon-wrap svg {
	width: 100% !important;
	height: 100% !important;
	max-width: 36px !important;
	max-height: 36px !important;
	display: block !important;
}
/* Font Awesome（<i class="fab fa-instagram">）を使う場合の保険 */
body .insta-links-section .insta-icon-wrap i {
	font-size: 32px !important;
	line-height: 1 !important;
}

body .insta-links-section .insta-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.35;
}

/* --- スマホ（767px以下）：横並びを解除して縦並びに --- */
@media (max-width: 767px) {
	body .insta-links-section .insta-links-container {
		flex-direction: column !important;
		gap: 20px !important;
	}
	body .insta-links-section .insta-links-container .insta-link-item {
		width: 100% !important;
		max-width: 320px !important;
		justify-content: center !important;
	}
}

/* ---------------------------------------------------------
   WORKS
   --------------------------------------------------------- */
.works__all {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
}
.works__all:hover { color: var(--color-accent); }

.work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

.work-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
a.work-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}
.work-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.work-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}
a.work-card:hover .work-card__img { transform: scale(1.04); }
.work-card__placeholder {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3rem;
	color: var(--color-accent);
	opacity: 0.6;
}
.work-card__cta {
	position: absolute;
	right: var(--space-3); bottom: var(--space-3);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	background: var(--color-ink);
	color: #fff;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
a.work-card:hover .work-card__cta { opacity: 1; transform: translateY(0); }

.work-card__body { padding: var(--space-5); }
.work-card__skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.work-card__skills li {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
	background: var(--color-accent-soft);
	padding: 0.25em 0.7em;
	border-radius: 999px;
}
.work-card__title {
	font-size: 1.25rem;
	margin-bottom: var(--space-2);
}
.work-card__excerpt {
	font-size: 0.92rem;
	color: var(--color-ink-soft);
	line-height: 1.65;
}

.works__note {
	margin-top: var(--space-5);
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */
.contact__inner { text-align: center; max-width: 640px; margin-inline: auto; }
.contact__title {
	font-size: clamp(2rem, 7vw, 3.4rem);
	font-weight: 800;
	margin-block: var(--space-3) var(--space-4);
}
.contact__lead {
	color: var(--color-ink-soft);
	margin-bottom: var(--space-6);
}

/* ---------------------------------------------------------
   フッター（3カラム）
   --------------------------------------------------------- */
.site-footer {
	background: var(--color-ink);
	color: #F5F2EE;
	padding-top: var(--space-8);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-7);
}
.site-footer__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.4rem;
	color: #fff;
}
.site-footer__desc {
	margin-top: var(--space-3);
	color: rgba(245, 242, 238, 0.6);
	font-size: 0.9rem;
	max-width: 32ch;
}
.site-footer__list,
.site-footer__social-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-weight: 600;
}
.site-footer__list a:hover,
.site-footer__social-list a:hover { color: var(--color-accent); }
.site-footer__social-label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 242, 238, 0.5);
	margin-bottom: var(--space-3);
}
.site-footer__bottom {
	border-top: 1px solid rgba(245, 242, 238, 0.12);
	padding-block: var(--space-5);
	font-size: 0.82rem;
	color: rgba(245, 242, 238, 0.55);
}

/* ---------------------------------------------------------
   index.php（投稿一覧フォールバック）
   --------------------------------------------------------- */
.post-list { display: grid; gap: var(--space-5); }
.post-list__item {
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-line);
}
.post-list__title { font-size: 1.4rem; }
.post-list__meta {
	font-size: 0.82rem;
	color: var(--color-ink-soft);
	margin-block: var(--space-2);
}
.post-list__excerpt { color: var(--color-ink-soft); }

/* ---------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------- */
@media (min-width: 720px) {
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.about__grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
	.site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1000px) {
	.work-grid { grid-template-columns: repeat(3, 1fr); }
}

/* SP：PCナビを隠してハンバーガー表示 */
@media (max-width: 859px) {
	.site-nav { display: none; }
	.nav-toggle { display: block; }
}

/* PC：オーバーレイメニューは使わない */
@media (min-width: 860px) {
	.mobile-menu,
	.mobile-menu__overlay { display: none; }
}

/* =========================================================
   single.php（記事・作品の詳細）
   ========================================================= */
.single { padding-bottom: var(--space-8); }

/* 記事ヘッダー */
.single-hero { padding-block: var(--space-8) var(--space-6); }
.single-hero__inner { max-width: 760px; margin-inline: auto; }
.single-hero__eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-3);
}
.single-hero__title {
	font-size: clamp(1.9rem, 5.5vw, 3rem);
	font-weight: 800;
	line-height: 1.12;
}
.single-hero__meta { margin-top: var(--space-4); }
.single-hero__date {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-ink-soft);
}

/* アイキャッチ */
.single-thumb {
	max-width: 880px;
	margin: 0 auto var(--space-7);
	/* SP でコンテナ幅を超えないよう確実に制限 */
	width: 100%;
	overflow: hidden;
}
.single-thumb__img {
	width: 100%;
	height: auto;          /* 高さを自動にして縦が切れないようにする */
	max-width: 100%;       /* 親要素を超えない */
	display: block;        /* inline 扱いによる下余白をなくす */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	object-fit: cover;
}

/* SP: 角丸を小さくして画面幅ぴったりに表示 */
@media (max-width: 600px) {
	.single-thumb {
		/* コンテナの横パディングをキャンセルして全幅表示 */
		margin-left: calc(-1 * var(--space-4));
		margin-right: calc(-1 * var(--space-4));
		width: calc(100% + var(--space-4) * 2);
		max-width: none;
	}
	.single-thumb__img {
		border-radius: 0;  /* SP では角丸なしで全幅 */
		box-shadow: none;
	}
}

/* 本文の読みやすい横幅 */
.single-body { max-width: 720px; margin-inline: auto; }

/* 本文タイポグラフィ（WordPress ブロック対応） */
.entry-content { font-size: 1.05rem; line-height: 1.85; color: #2A2724; }
.entry-content > * + * { margin-top: var(--space-5); }
.entry-content h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-top: var(--space-7);
	padding-top: var(--space-2);
}
.entry-content h3 { font-size: 1.3rem; margin-top: var(--space-6); }
.entry-content h4 { font-size: 1.1rem; margin-top: var(--space-5); }
.entry-content a {
	color: var(--color-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.entry-content a:hover { color: var(--color-accent); }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: var(--space-2); }
.entry-content ul li::marker { color: var(--color-accent); }
.entry-content img,
.entry-content figure { border-radius: var(--radius); }
.entry-content figure { margin-inline: 0; }
.entry-content figcaption {
	margin-top: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-ink-soft);
	text-align: center;
}
.entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-2) var(--space-5);
	border-left: 4px solid var(--color-accent);
	background: var(--color-accent-soft);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}
.entry-content blockquote p { margin-top: 0; }
.entry-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: var(--color-bg-warm);
	padding: 0.15em 0.45em;
	border-radius: 6px;
}
.entry-content pre {
	background: var(--color-ink);
	color: #F5F2EE;
	padding: var(--space-5);
	border-radius: var(--radius);
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content hr {
	border: none;
	height: 1px;
	background: var(--color-line);
	margin-block: var(--space-7);
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--color-line);
	padding: var(--space-3);
	text-align: left;
}
.entry-content th { background: var(--color-bg-warm); }

/* 記事フッターのタグ */
.entry-footer { margin-top: var(--space-6); }
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.entry-tags li a {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.8rem;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--color-accent-soft);
	color: var(--color-accent-deep);
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.entry-tags li a:hover { background: var(--color-accent); color: #fff; }

.page-links {
	margin-top: var(--space-5);
	font-family: var(--font-display);
	font-weight: 700;
	display: flex;
	gap: var(--space-2);
}

.back-link {
	margin-top: var(--space-7);
	font-family: var(--font-display);
	font-weight: 700;
}
.back-link a:hover { color: var(--color-accent); }

/* 前後ナビ */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: var(--space-8);
	max-width: 880px;
	margin-inline: auto;
}
.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.post-nav__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.post-nav__item--next { text-align: right; }
.post-nav__item--empty { background: none; border: none; }
.post-nav__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--color-accent);
}
.post-nav__title { font-weight: 500; font-size: 0.95rem; }

/* コメント */
.single-comments { max-width: 720px; margin: var(--space-8) auto 0; }
.comments__title { font-size: 1.4rem; margin-bottom: var(--space-5); }
.comments__list { list-style: none; padding: 0; }
.comments__list .comment-body { padding-block: var(--space-4); border-bottom: 1px solid var(--color-line); }
.comments__list .comment-author { font-family: var(--font-display); font-weight: 700; }
.comments__list .comment-meta { font-size: 0.8rem; color: var(--color-ink-soft); }
.comment-form { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font: inherit;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .comment-reply-title { font-family: var(--font-display); font-size: 1.3rem; }

/* 詳細ページのレスポンシブ */
@media (max-width: 600px) {
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__item--next { text-align: left; }
	.post-nav__item--empty { display: none; }
}

/* =========================================================
   ヒーロースライドショー（template-parts/hero.php）
   ========================================================= */
.hero-slider {
	position: relative;
	width: 100%;
	height: 100vh;          /* ファーストビューを埋める */
	min-height: 480px;
	margin-top: calc(-1 * var(--header-height)); /* 固定ヘッダーの下に潜り込ませて全画面に */
	overflow: hidden;
	background: var(--color-bg-warm);
}
/* モバイルのアドレスバー対応（対応ブラウザのみ） */
@supports (height: 100svh) {
	.hero-slider { height: 100svh; }
}

.hero-slider__viewport { position: absolute; inset: 0; }

.hero-slider__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.04);
	transition: opacity 0.8s var(--ease), transform 1.2s var(--ease), visibility 0.8s;
}
.hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	z-index: 2;
}

/* ---- PC / SP 背景画像レイヤー -----------------------------------
   .hero-slider__bg--pc  ： PC・スマホ共通のベース画像（常に表示）
   .hero-slider__bg--sp  ： スマホ専用画像（600px 以下でPC画像の上に重なる）
   SP 画像が未設定の場合は .hero-slider__bg--sp 要素自体が出力されないため、
   PC 画像がスマホでもそのまま表示される（フォールバック不要）。
------------------------------------------------------------------ */
.hero-slider__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
/* スマホ用画像はデフォルト非表示 */
.hero-slider__bg--sp { display: none; }

/* 文字を読みやすくするためのシェード */
.hero-slider__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28,27,26,0.62) 0%, rgba(28,27,26,0.30) 45%, rgba(28,27,26,0.05) 100%);
}

/* デモスライド（画像未設定時のポップなグラデーション背景） */
.hero-slider__slide--demo1 { background-image: linear-gradient(120deg, #FF6B6B 0%, #FFA36B 100%); }
.hero-slider__slide--demo2 { background-image: linear-gradient(120deg, #2EC4B6 0%, #5BB8FF 100%); }
.hero-slider__slide--demo3 { background-image: linear-gradient(120deg, #FF6B6B 0%, #C56BFF 100%); }

.hero-slider__content {
	position: relative;
	z-index: 3;
	max-width: 640px;
	color: #fff;
}
.hero-slider__eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.85;
	margin: 0 0 var(--space-3);
}
.hero-slider__title {
	font-size: clamp(2rem, 6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
.hero-slider__text {
	margin: var(--space-4) 0 var(--space-5);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	color: rgba(255,255,255,0.92);
	max-width: 46ch;
}

/* アクティブなスライドだけ中身をふわっと表示 */
.hero-slider__slide .hero-slider__content > * {
	opacity: 0;
	transform: translateY(14px);
}
.hero-slider__slide.is-active .hero-slider__content > * {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero-slider__slide.is-active .hero-slider__content > *:nth-child(1) { transition-delay: 0.15s; }
.hero-slider__slide.is-active .hero-slider__content > *:nth-child(2) { transition-delay: 0.28s; }
.hero-slider__slide.is-active .hero-slider__content > *:nth-child(3) { transition-delay: 0.40s; }
.hero-slider__slide.is-active .hero-slider__content > *:nth-child(4) { transition-delay: 0.52s; }

/* 矢印 */
.hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px; height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero-slider__arrow:hover { background: var(--color-accent); color: #fff; }
.hero-slider__arrow:active { transform: translateY(-50%) scale(0.94); }
.hero-slider__arrow--prev { left: clamp(0.75rem, 3vw, 1.5rem); }
.hero-slider__arrow--next { right: clamp(0.75rem, 3vw, 1.5rem); }

/* ドット */
.hero-slider__dots {
	position: absolute;
	left: 0; right: 0; bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}
.hero-slider__dot {
	width: 10px; height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,0.55);
	transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.hero-slider__dot.is-active {
	width: 28px;
	background: #fff;
}

/* 動きを減らす設定では、フェードのみ・拡大なし */
@media (prefers-reduced-motion: reduce) {
	.hero-slider__slide { transform: none; transition: opacity 0.4s linear, visibility 0.4s; }
	.hero-slider__slide.is-active { transform: none; }
	.hero-slider__slide.is-active .hero-slider__content > * { transform: none; transition: none; }
}

@media (max-width: 600px) {
	/* SP 画像が設定されている場合のみ .hero-slider__bg--sp 要素が存在するため、
	   display:block にするだけで PC 画像の上に重なり自動的に切り替わる。
	   SP 画像が未設定のスライドでは PC 画像がそのまま表示される。 */
	.hero-slider__bg--sp { display: block; }
	.hero-slider__shade { background: linear-gradient(180deg, rgba(28,27,26,0.25) 0%, rgba(28,27,26,0.62) 100%); }
	/* 矢印は中央テキストと重ならないよう下部の左右へ */
	.hero-slider__arrow {
		width: 40px; height: 40px;
		top: auto;
		bottom: 1.25rem;
		transform: none;
	}
	.hero-slider__arrow:active { transform: scale(0.94); }
	.hero-slider__arrow--prev { left: 1rem; }
	.hero-slider__arrow--next { right: 1rem; }
	/* ドットは左右の矢印の中央に揃える */
	.hero-slider__dots { bottom: calc(1.25rem + 15px); }
}

/* =========================================================
   ABOUT をカード全体タップで詳細ページへ（stretched link）
   ========================================================= */
.about--linked .about__grid {
	position: relative;
	border-radius: var(--radius-lg);
	transition: background 0.2s var(--ease);
}
/* カード全体に効くタップ領域（見出しリンクを引き伸ばす） */
.about__link { color: inherit; }
.about__link::after {
	content: "";
	position: absolute;
	inset: calc(var(--space-5) * -1);
	z-index: 1;
	border-radius: var(--radius-lg);
}
/* スキルチップはリンクとして個別に押せるよう前面に */
.about--linked .skill-chips { position: relative; z-index: 2; }

/* 「詳しく見る →」表示 */
.about__more {
	margin-top: var(--space-5);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-accent-deep);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: color 0.2s var(--ease);
}
.about__arrow { transition: transform 0.2s var(--ease); }

/* ホバー／フォーカス時のフィードバック */
.about--linked .about__grid:hover,
.about--linked .about__grid:focus-within {
	background: var(--color-bg-warm);
}
.about--linked .about__grid:hover .section-title,
.about--linked .about__grid:focus-within .section-title { color: var(--color-accent); }
.about--linked .about__grid:hover .about__more,
.about--linked .about__grid:focus-within .about__more { color: var(--color-accent); }
.about--linked .about__grid:hover .about__arrow { transform: translateX(4px); }

/* タップ領域の余白を確保（背景が広がっても窮屈にならないよう） */
.about--linked .about__grid { padding: var(--space-5); margin-inline: auto; }
@media (min-width: 720px) {
	.about--linked .about__grid { padding: var(--space-6); }
}

/* =========================================================
   活動報告カードの日付・メタ／セクション導入文
   ========================================================= */
.work-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.work-card__date {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--color-ink-soft);
}
.work-card__meta .work-card__skills { margin-bottom: 0; }

.works__intro {
	margin-top: calc(var(--space-7) * -1 + var(--space-4));
	margin-bottom: var(--space-6);
	color: var(--color-ink-soft);
	max-width: 46ch;
}

/* =========================================================
   ABOUT（LP形式：見出し＋リード＋画像つきブロック）
   ========================================================= */
.about-lp__head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-8);
}
.about-lp__lead {
	margin-top: var(--space-5);
	color: var(--color-ink-soft);
	font-size: 1.05rem;
	line-height: 1.9;
}

.lp-block {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	margin-bottom: var(--space-8);
}
.lp-block:last-child { margin-bottom: 0; }
.lp-block__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.lp-block__title {
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
	margin-bottom: var(--space-4);
}
.lp-block__text { color: var(--color-ink-soft); line-height: 1.9; }

.lp-block--text-only {
	display: block;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 768px) {
	.lp-block { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
	.lp-block--reverse .lp-block__media { order: 2; }
}

/* =========================================================
   メンバー募集（人材募集スタイル）
   ========================================================= */
.recruit__head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-7);
}
.recruit__lead {
	margin-top: var(--space-5);
	color: var(--color-ink-soft);
	line-height: 1.9;
}
.recruit__cols {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}
.recruit__col {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-6);
}
.recruit__col-title {
	font-size: 1.15rem;
	margin-bottom: var(--space-4);
}
.recruit__list { display: grid; gap: var(--space-3); }
.recruit__list li {
	position: relative;
	padding-left: 1.8em;
	color: var(--color-ink);
	line-height: 1.6;
}
.recruit__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent);
	font-weight: 700;
}
.recruit__cta { text-align: center; }
.recruit__deadline {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-accent-deep);
	margin-bottom: var(--space-4);
}
.recruit__note {
	margin-top: var(--space-4);
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

@media (min-width: 768px) {
	.recruit__cols { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

/* ---------------------------------------------------------
   MEMBERS（運営メンバー：Swiper スライダー）
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   MEMBERS（運営メンバー：Swiper スライダー）
   --------------------------------------------------------- */

/* ラッパー：左端をコンテナ左端に揃え、右は画面端まで広げる */
.members__slider-wrap {
	position: relative;                /* 矢印ボタンの基準点 */
	/* コンテナと同じ左インデントを padding-left で再現 */
	padding-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
	/* overflow はここでは隠さない（左が切れる原因だった）
	   代わりに右だけ画面端まで出す → clip-path で右クリップ */
	overflow: hidden;                  /* 右端の飛び出しを止める */
}

/* Swiper 本体：右は次カードが見えるようわずかに溢れさせる */
.js-member-swiper {
	overflow: visible;
	/* 左の padding-left 分だけ負のマージンで引き戻す
	   → 先頭カードがラッパーの左端ぴったりに来る */
	margin-left: 0;
}

/* スライド1枚の幅 */
.js-member-swiper .swiper-slide {
	width: 75vw;
	max-width: 280px;
}
@media (min-width: 600px) {
	.js-member-swiper .swiper-slide { width: 40vw; max-width: 280px; }
}
@media (min-width: 1000px) {
	.js-member-swiper .swiper-slide { width: 22%; max-width: 280px; }
}

/* ---------------------------------------------------------
   MEMBERS（運営メンバー：Swiper スライダー）
   --------------------------------------------------------- */

/*
 * 全幅化の仕組み：
 *   section の中に入っているため通常はコンテナ幅に収まるが、
 *   margin-left/right で画面端まで引き伸ばし、
 *   padding-left でカードの開始位置をコンテナ左端に揃える。
 */
.members__slider-wrap {
	position: relative;
	/* 画面端まで引き伸ばす */
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	/* カード開始位置をコンテナ左端に揃える */
	padding-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
	/* 右は次カードが見えるよう overflow を制御しない */
	overflow: hidden;
	padding-bottom: var(--space-2); /* カード shadow が切れないよう少し余白 */
}

/* Swiper 本体：右は画面端まで溢れさせる */
.js-member-swiper {
	overflow: visible;
}

/* スライド1枚の幅 */
.js-member-swiper .swiper-slide {
	width: 72vw;
	max-width: 260px;
}
@media (min-width: 600px) {
	.js-member-swiper .swiper-slide { width: 38vw; max-width: 260px; }
}
@media (min-width: 1000px) {
	.js-member-swiper .swiper-slide { width: 21%; max-width: 260px; }
}

/* ---- 矢印ナビゲーション ---- */
.members__nav {
	display: none;
}
@media (min-width: 768px) {
	.members__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		border: 2px solid var(--color-ink);
		background: var(--color-surface);
		color: var(--color-ink);
		cursor: pointer;
		transition: background 0.2s var(--ease), color 0.2s var(--ease);
		padding: 0;
	}
	.members__nav:hover {
		background: var(--color-ink);
		color: #fff;
	}
	/* 前へ：コンテナ左端の少し外側 */
	.members__nav--prev {
		left: max(8px, calc((100vw - var(--max-width)) / 2 - 52px));
	}
	/* 次へ：右端付近 */
	.members__nav--next {
		right: 12px;
	}
	/* Swiper が disabled にしたとき薄くする */
	.members__nav.swiper-button-disabled {
		opacity: 0.35;
		pointer-events: none;
	}
}

/* ---- 「すべて見る」ボタン ---- */
.members__more {
	text-align: center;
	margin-top: var(--space-6);
}
.members__more-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-ink);
	padding: 0.75em 1.75em;
	border-radius: 999px;
	border: 2px solid var(--color-ink);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.members__more-btn:hover {
	background: var(--color-ink);
	color: #fff;
	transform: translateY(-2px);
}
.members__more-btn svg { flex-shrink: 0; }

/* カード本体：白背景・角丸・影でカード感 */
.member-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	height: 100%;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.member-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

/* 写真リンク（クリック→詳細ページへ） */
.member-card__photo-link {
	display: block;
	overflow: hidden;
}

.member-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-warm);
}

.member-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
/* 写真ホバー：拡大＋わずかに暗くして奥行き演出 */
.member-card:hover .member-card__img {
	transform: scale(1.07);
	filter: brightness(0.9);
}

.member-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--color-ink-soft);
}

/* テキストエリア */
.member-card__body {
	padding: var(--space-4) var(--space-5) var(--space-5);
	flex-grow: 1;
}

.member-card__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 var(--space-2);
}
.member-card__name a {
	color: var(--color-ink);
}
.member-card__name a:hover {
	color: var(--color-accent);
}

.member-card__bio {
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--color-ink-soft);
	margin: 0;
}

/* ---------------------------------------------------------
   MEMBER SINGLE（運営メンバー詳細ページ）
   single-member.php で使用
   --------------------------------------------------------- */
.member-single__body {
	padding-block: var(--space-7) var(--space-8);
}

.member-single__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}
@media (min-width: 768px) {
	.member-single__grid {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}
}

/* 顔写真：スマホ全幅、PC で固定幅 */
.member-single__photo {
	width: 100%;
}
@media (min-width: 768px) {
	.member-single__photo {
		flex-shrink: 0;
		width: 280px;
	}
}

.member-single__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	display: block;
	box-shadow: var(--shadow);
}

/* 名前見出し */
.member-single__name {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 var(--space-5);
}

/* プロフィール本文 */
.member-single__content { max-width: 640px; }

/* ---------------------------------------------------------
   ISSUES（北部市場の課題）
   スマホ：縦1列アコーディオン（タイトル→画像→説明文）
   PC    ：左リスト＋右固定画像の2カラム（ホバー切り替え）
   --------------------------------------------------------- */

/* ---- セクション共通 ---- */
.issues {
	padding: var(--space-7) 0 var(--space-6);
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	margin: var(--space-7) 0;
}
.issues__heading {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 800;
	margin: var(--space-3) 0 var(--space-6);
}

/* ============================================================
   スマホ（デフォルト）：縦1列、アコーディオン
   ============================================================ */

/* レイアウトコンテナ：スマホは1列 */
.issues__layout {
	display: flex;
	flex-direction: column;
}

.issues__items { width: 100%; }

/* 1課題ブロック */
.issue-item {
	border-bottom: 1px solid var(--color-line);
}
.issue-item:first-child {
	border-top: 1px solid var(--color-line);
}

/* タイトル行（ボタン） */
.issue-item__head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	outline: none;
}
.issue-item__head:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.issue-item__num {
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
.issue-item__title {
	font-family: var(--font-display);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	font-weight: 700;
	color: var(--color-ink);
	flex: 1;
	transition: color 0.2s var(--ease);
}
.issue-item.is-active .issue-item__title { color: var(--color-accent); }

/* 矢印インジケーター */
.issue-item__arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}
.issue-item__arrow::before,
.issue-item__arrow::after {
	content: '';
	position: absolute;
	background: var(--color-ink-soft);
	border-radius: 2px;
	transition: transform 0.3s var(--ease);
}
.issue-item__arrow::before { width: 10px; height: 2px; top: 9px; left: 0; }
.issue-item__arrow::after  { width: 2px; height: 10px; top: 5px; left: 4px; }
.issue-item.is-active .issue-item__arrow::after { transform: rotate(90deg) scaleY(0); }

/* 展開ボディ：grid-template-rows でスライドアニメーション */
.issue-item__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.38s var(--ease);
}
.issue-item.is-active .issue-item__body {
	grid-template-rows: 1fr;
}
.issue-item__body-inner {
	overflow: hidden;
	padding-bottom: 0;
	transition: padding-bottom 0.38s var(--ease);
}
.issue-item.is-active .issue-item__body-inner {
	padding-bottom: var(--space-5);
}

/* スマホ画像 */
.issue-image-sp {
	margin-top: var(--space-4);
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-warm);
}
.issue-image-sp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.issue-image-sp--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.issue-image-sp--placeholder span {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--color-accent);
	opacity: 0.3;
}

/* 説明文 */
.issue-description p {
	margin: var(--space-3) 0 0;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--color-ink-soft);
}

/* PC右パネル：スマホでは非表示 */
.issues__visual { display: none; }

/* ============================================================
   PC（768px以上）：左右2カラム、ホバーで右画像フェード切替
   ============================================================ */
@media (min-width: 768px) {

	/* 2カラムレイアウト */
	.issues__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.issues__items {
		flex: 1 1 0;
		min-width: 0;
	}

	/* PC：矢印インジケーター非表示 */
	.issue-item__arrow { display: none; }

	/* PC：スマホ画像を非表示（右パネルに表示） */
	.issue-image-sp { display: none; }

	/* PC：展開ボディは常に表示状態（高さ制限なし）
	   説明文のフェードイン／アウトのみ制御 */
	.issue-item__body {
		display: block;
		grid-template-rows: unset;
		overflow: visible;
	}
	.issue-item__body-inner {
		overflow: visible;
		padding-bottom: 0;
	}
	.issue-item.is-active .issue-item__body-inner {
		padding-bottom: 0;
	}

	/* 説明文：非アクティブは非表示 */
	.issue-description {
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 0.35s var(--ease), opacity 0.28s var(--ease);
	}
	.issue-item.is-active .issue-description {
		max-height: 200px;
		opacity: 1;
	}
	.issue-description p { margin-top: var(--space-3); }

	/* 右：画像パネルエリア */
	.issues__visual {
		display: block;
		flex: 0 0 48%;
		position: sticky;
		top: var(--space-7);
		border-radius: var(--radius);
		overflow: hidden;
		aspect-ratio: 4 / 3;
		background: var(--color-bg-warm);
	}

	.issues__panel {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 0.45s var(--ease);
		pointer-events: none;
	}
	.issues__panel.is-active {
		opacity: 1;
		pointer-events: auto;
	}
	.issues__panel-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.issues__panel-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-warm));
	}
	.issues__panel-placeholder span {
		font-family: var(--font-display);
		font-size: 4rem;
		font-weight: 800;
		color: var(--color-accent);
		opacity: 0.3;
	}
}