@charset "UTF-8";
/* ============================================================
 * style_notes.css
 * Notesカテゴリ単一記事ページ専用スタイル
 * Loaded conditionally via header-lower.php
 * ============================================================ */

/* ============================================================
 * Design Tokens (style_recruit.css と共通の値、 is-notes-single スコープに再定義)
 * ============================================================ */

body.is-notes-single {
	--font-display: 'Outfit', sans-serif;
	--font-body: 'DM Sans', 'Noto Sans JP', sans-serif;
	--font-mincho: 'Shippori Mincho', serif;
	--font-mono: 'DM Mono', monospace;

	--fs-xs: 12px;
	--fs-sm: 14px;
	--fs-base: 16px;
	--fs-md: 18px;
	--fs-lg: 20px;
	--fs-xl: 24px;
	--fs-2xl: 32px;
	--fs-3xl: 40px;
	--fs-4xl: 48px;

	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-3xl: 128px;

	--lh-tight: 1.2;
	--lh-snug: 1.4;
	--lh-relaxed: 1.7;

	--ls-normal: 0.02em;
	--ls-wide: 0.06em;
	--ls-mono: 0.16em;

	--container-narrow: 720px;
	--container-text: 640px;

	/* Body base */
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	background-color: var(--white);
}


/* ============================================================
 * Utility classes
 * ============================================================ */

body.is-notes-single .is-mono {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-mono);
	font-size: var(--fs-xs);
}


/* ============================================================
 * Article overall structure
 * ============================================================ */

body.is-notes-single .notes_single {
	background-color: var(--ivory);
}

body.is-notes-single .notes_article {
	padding: var(--space-2xl) 0;
}

body.is-notes-single .notes_article_inner,
body.is-notes-single .notes_article_featured_inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--space-md);
}

body.is-notes-single .notes_article_body_inner {
	max-width: var(--container-text);
	margin: 0 auto;
	padding: 0 var(--space-md);
}


/* ============================================================
 * Hero(タイトル・サブタイトル・日付)
 * ============================================================ */

body.is-notes-single .notes_article_hero {
	padding-bottom: var(--space-lg);
}

body.is-notes-single .notes_article_eyebrow {
	color: var(--text-secondary);
	margin: 0 0 var(--space-md);
}

body.is-notes-single .notes_article_title {
	font-size: var(--fs-2xl);
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-notes-single .notes_article_subtitle {
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: var(--lh-snug);
	color: var(--text-secondary);
	letter-spacing: var(--ls-wide);
	margin: 0 0 var(--space-md);
}

body.is-notes-single .notes_article_date {
	color: var(--text-secondary);
	margin: 0;
}


/* ============================================================
 * Featured Image
 * ============================================================ */

body.is-notes-single .notes_article_featured {
	margin: 0 0 var(--space-lg) 0;
}

body.is-notes-single .notes_article_featured img {
	display: block;
	width: 100%;
	height: auto;
}


/* ============================================================
 * Article Body
 * ============================================================ */

body.is-notes-single .notes_article_body {
	padding-top: var(--space-md);
}

body.is-notes-single .notes_article_body h2 {
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
	color: var(--charcoal);
	margin: var(--space-2xl) 0 var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--warm-gray);
}

body.is-notes-single .notes_article_body h2:first-child {
	margin-top: 0;
}

body.is-notes-single .notes_article_body p {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	letter-spacing: var(--ls-wide);
	color: var(--charcoal);
	margin: 0 0 var(--space-md);
}

body.is-notes-single .notes_article_body strong {
	font-weight: 500;
	color: var(--charcoal);
}

body.is-notes-single .notes_article_body em {
	font-style: italic;
}

body.is-notes-single .notes_article_body a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease;
}

body.is-notes-single .notes_article_body a:hover {
	opacity: 0.7;
}

body.is-notes-single .notes_article_body blockquote {
	margin: var(--space-lg) 0;
	padding: var(--space-md) var(--space-lg);
	border-left: 2px solid var(--orange);
	background-color: var(--ivory);
	font-size: var(--fs-md);
	color: var(--text-secondary);
}

body.is-notes-single .notes_article_body blockquote p {
	margin: 0 0 var(--space-sm);
}

body.is-notes-single .notes_article_body blockquote p:last-child {
	margin: 0;
}


/* ============================================================
 * Article Footer(戻るリンク + 他のNotes)
 * ============================================================ */

body.is-notes-single .notes_article_footer {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--warm-gray);
}

body.is-notes-single .notes_article_back {
	display: inline-block;
	font-size: var(--fs-sm);
	color: var(--charcoal);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	letter-spacing: var(--ls-wide);
	margin-bottom: var(--space-xl);
}

body.is-notes-single .notes_article_others {
	margin-top: var(--space-xl);
}

body.is-notes-single .notes_article_others_label {
	color: var(--text-secondary);
	margin: 0 0 var(--space-md);
}

body.is-notes-single .notes_article_others ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

body.is-notes-single .notes_article_others li {
	border-bottom: 1px solid var(--warm-gray);
}

body.is-notes-single .notes_article_others li:first-child {
	border-top: 1px solid var(--warm-gray);
}

body.is-notes-single .notes_article_others a {
	display: block;
	padding: var(--space-md) 0;
	color: var(--charcoal);
	text-decoration: none;
	font-size: var(--fs-md);
	letter-spacing: var(--ls-wide);
	transition: opacity 0.2s ease;
}

body.is-notes-single .notes_article_others a:hover {
	opacity: 0.7;
}


/* ============================================================
 * Responsive
 * ============================================================ */

@media (min-width: 768px) {

	body.is-notes-single .notes_article {
		padding: var(--space-3xl) 0;
	}

	body.is-notes-single .notes_article_title {
		font-size: var(--fs-3xl);
	}

	body.is-notes-single .notes_article_subtitle {
		font-size: var(--fs-lg);
	}

	body.is-notes-single .notes_article_body h2 {
		font-size: var(--fs-2xl);
		margin-top: var(--space-3xl);
	}

	body.is-notes-single .notes_article_body p {
		font-size: var(--fs-md);
	}
}

@media (min-width: 900px) {

	body.is-notes-single .notes_article_title {
		font-size: var(--fs-4xl);
	}
}