@charset "UTF-8";

/* =========================================================================
   NEWS ARTICLE(記事詳細)
   -------------------------------------------------------------------------
   Figma「NEWS ARTICLE_pc01」(1440x2915 / 背景 #F9F9F9)
        「LATEST NEWS_sp01」(390x3268 ※名前は紛らわしいがSP版の記事詳細)

   縦の積み方(PC / Figma実測)
     header 96 + 罫線1 → 120 → 本体
     meta 30 →80→ [ タイトル80 →64→ 本文 ] →80→ BACK TO NEWS 18 →180→ footer
   横は 1280幅 + 左右余白80。トークンは main.css の :root をそのまま使う。

   main.css には旧 .entry の体裁が残っているが、こちらは別のクラス名
   (.narticle)で組んでいるので上書き合戦にならない。
   ========================================================================= */

.narticle {
	background: var(--c-f9);
	color: var(--c-3c);
	/*
	 * ヘッダーは position:fixed なので、その分をここで空ける。
	 * 96(ヘッダー)+ 1(罫線)+ 120(Figmaの間隔)= 217。
	 */
	padding-top: calc(var(--hd-h) + 121px);
	/*
	 * フッターまでの180は padding で取る。最後の子要素に margin-bottom を
	 * 置くとマージンの相殺で親の外へ抜け、body の地色が帯状に見えてしまう。
	 */
	padding-bottom: 180px;
}

/*
 * 左右の余白と最大幅は自分で持つ(親の padding に依存させない)。
 * .ptitle と同じ形。
 */
.narticle__inner {
	max-width: calc(1280px + var(--edge) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--edge);
	padding-right: var(--edge);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 80px;
}

/* -------------------------------------------------------------------------
   メタ  001 | 2026.08.25 | ANNOUNCEMENT
   15px / lh30。番号と日付は #878787、カテゴリーだけ #3C3C3C。
   区切りは 1x7 の細い線 #C4C4C4 で、行の高さの中央に置く。
   ------------------------------------------------------------------------- */

.narticle__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	line-height: 30px;
}

.narticle__no,
.narticle__date {
	font-weight: 400;
	color: var(--c-87);
}

.narticle__cat {
	font-weight: 400;
	color: var(--c-3c);
}

.narticle__sep {
	flex: 0 0 auto;
	width: 1px;
	height: 7px;
	background: var(--c-c4);
}

/* -------------------------------------------------------------------------
   タイトルと本文
   タイトル(80)と本文の間隔は64。
   ------------------------------------------------------------------------- */

.narticle__main {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* タイトル47 + 32 + 罫線1 = 80 */
.narticle__head {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--c-ink);
}

.narticle__title {
	font-weight: 300;
	font-size: 36px;
	line-height: 1.3; /* 46.8px */
	color: var(--c-ink);
}

/* -------------------------------------------------------------------------
   本文(the_content)
   エディタから入る要素にそのまま当たるよう、要素セレクタで組む。

   Figmaの間隔(PC)
     段落・リストどうし   24
     H2 の前             40(セクションの区切り)
     H3 の後             16
   ------------------------------------------------------------------------- */

.narticle__body {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

.narticle__body > * + * {
	margin-top: 24px;
}

.narticle__body > h3 + *,
.narticle__body > h4 + * {
	margin-top: 16px;
}

/* h3 の直後が h2 のときは「セクションの区切り」を優先させたいので後に書く */
.narticle__body > h2 {
	margin-top: 40px;
}

.narticle__body > :first-child {
	margin-top: 0;
}

.narticle__body h2 {
	font-weight: 400;
	font-size: 20px;
	line-height: 40px;
	color: var(--c-3c);
}

.narticle__body h3,
.narticle__body h4 {
	font-weight: 400;
	font-size: 16px;
	line-height: 32px;
	color: var(--c-3c);
}

.narticle__body p {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

/*
 * ブラウザ既定の余白を消す。
 * ここで margin をまとめて 0 にしてはいけない。上の「> * + *」より
 * セレクタが強いため、24px のリズムまで打ち消してしまう(実測で確認済み)。
 * 上の余白はリズムの規則に任せ、下と左右だけを 0 にする。
 */
.narticle__body ul,
.narticle__body ol,
.narticle__body h4,
.narticle__body hr,
.narticle__body table {
	margin-bottom: 0;
}

.narticle__body figure,
.narticle__body blockquote {
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

/*
 * リスト。Figmaのテキストは行頭にマーカーが無い状態で x=0 に置かれているが、
 * 折り返したときに項目の切れ目が分からなくなるためマーカーは残し、
 * 字下げを最小限(1.4em)にしている。※先方確認事項。
 * 行間は段落と同じで、項目間に追加の余白は入らない(3行=90pxの実測どおり)。
 */
.narticle__body ul,
.narticle__body ol {
	padding-left: 1.4em;
}

.narticle__body li + li {
	margin-top: 0;
}

/* 入れ子のリストは既定の上下余白を消して行を詰める */
.narticle__body li > ul,
.narticle__body li > ol {
	margin-top: 0;
}

.narticle__body li::marker {
	color: var(--c-87);
}

/* 画像・図版。デザインに専用の枠は無いので、本文の幅に収めるだけ。 */
.narticle__body img {
	width: auto;
	height: auto;
}

.narticle__body figcaption {
	margin-top: 12px;
	font-size: 12px;
	line-height: 24px;
	color: var(--c-87);
}

.narticle__body blockquote {
	padding-left: 24px;
	border-left: 1px solid var(--c-c4);
	color: var(--c-87);
}

.narticle__body hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--c-c4);
}

.narticle__body strong,
.narticle__body b {
	font-weight: 500;
}

/* 本文中のリンクだけは下線を戻す(デザインに例が無いため最小限の可読性優先) */
.narticle__body a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

.narticle__body a:hover {
	text-decoration-color: var(--c-87);
}

/* -------------------------------------------------------------------------
   ← BACK TO NEWS
   矢印6x9 + 間隔12 + 12px/lh18 の文字。色は #191919。
   ------------------------------------------------------------------------- */

.narticle__back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-ink);
	transition: opacity 0.3s ease;
}

.narticle__back:hover {
	opacity: 0.6;
}

.narticle__back-arrow {
	flex: 0 0 auto;
}

/* =========================================================================
   タブレット幅(768〜900px)
   SP専用デザインの対象外。PCの体裁のまま縦の間隔と見出しだけ詰める。
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
	.narticle {
		padding-top: calc(var(--hd-h) + 97px);
		padding-bottom: 120px;
	}

	.narticle__inner {
		gap: 64px;
	}

	.narticle__main {
		gap: 48px;
	}

	.narticle__title {
		font-size: 30px;
	}
}

/* =========================================================================
   SP  (Figma: LATEST NEWS_sp01 = 390x3268)
     header 64 + 罫線1 → 80 → 本体(350幅・左右余白20)
     meta 28 →64→ [ タイトル64 →48→ 本文 ] →64→ BACK TO NEWS →80→ footer
   ========================================================================= */

@media (max-width: 767px) {
	.narticle {
		/* 64(ヘッダー)+ 1(罫線)+ 80 = 145 */
		padding-top: calc(var(--hd-h) + 81px);
		padding-bottom: 80px;
	}

	.narticle__inner {
		gap: 64px;
	}

	.narticle__meta {
		font-size: 14px;
		line-height: 28px;
	}

	.narticle__main {
		gap: 48px;
	}

	/* タイトル31 + 32 + 罫線1 = 64 */
	.narticle__title {
		font-size: 24px;
		line-height: 1.3; /* 31.2px */
	}

	.narticle__body {
		font-size: 14px;
		line-height: 28px;
	}

	/* SPの間隔: 段落どうし16 / H2の前32 / H2の後20 / H3の後16 */
	.narticle__body > * + * {
		margin-top: 16px;
	}

	.narticle__body > h2 + * {
		margin-top: 20px;
	}

	.narticle__body > h3 + *,
	.narticle__body > h4 + * {
		margin-top: 16px;
	}

	.narticle__body > h2 {
		margin-top: 32px;
	}

	.narticle__body > :first-child {
		margin-top: 0;
	}

	.narticle__body h2 {
		font-size: 16px;
		line-height: 32px;
	}

	.narticle__body h3,
	.narticle__body h4 {
		font-size: 14px;
		line-height: 28px;
	}

	.narticle__body p {
		font-size: 14px;
		line-height: 28px;
	}
}