@charset "UTF-8";
/*
 * utopia-single.css
 * 投稿ページ専用デザイン（SWELL子テーマ用）完成版
 *
 * 起点: #body_wrap.single-post（SWELLはテンプレートクラスを #body_wrap に付与）
 * 範囲: 本文の装飾 + サイドバー見出しの軽い装飾
 *       + 関連/人気記事タイトルの3行省略
 *       + 人気記事の順位を 01/02 角ボックスに変更（.p-postList__thumb::before を上書き）
 * レイアウト幅・グリッド・サイドバー余白の強制はしない（SWELL標準を維持）
 */

:root {
	--utopia-single-ink: #071021;
	--utopia-single-muted: #64708a;
	--utopia-single-blue: #2454ff;
	--utopia-single-violet: #7357ff;
	--utopia-single-cyan: #4de7ff;
	--utopia-single-line: rgba(36, 84, 255, 0.22);
}

/* ===========================================================
 * 1. 記事ヘッダー
 * =========================================================== */

/* タイトルと日付を縦並びにして「日付 → タイトル」の順にする */
body #body_wrap.single-post .p-articleHead.c-postTitle {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* 日付を一番上へ。SWELLの display:block / 横並びを打ち消す */
body #body_wrap.single-post .p-articleHead .c-postTitle__date {
	order: 1 !important;
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--utopia-single-muted) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

/* タイトルを装飾線の下へ */
body #body_wrap.single-post .p-articleHead .c-postTitle__ttl {
	order: 3 !important;
	margin: 0 !important;
}

body #body_wrap.single-post h1,
body #body_wrap.single-post .c-postTitle__ttl,
body #body_wrap.single-post .entry-title {
	color: var(--utopia-single-ink);
	font-weight: 900;
	line-height: 1.45;
}

body #body_wrap.single-post .p-articleHead::after,
body #body_wrap.single-post .entry-header::after {
	content: "";
	order: 2;
	display: block;
	width: min(220px, 42%);
	height: 3px;
	margin: 4px 0 14px;
	background: linear-gradient(90deg, var(--utopia-single-blue), var(--utopia-single-cyan), transparent);
	box-shadow: 0 0 18px rgba(77, 231, 255, 0.26);
}

body #body_wrap.single-post .p-articleMetas .c-categoryList__link,
body #body_wrap.single-post .p-articleMeta .c-categoryList__link,
body #body_wrap.single-post .post-categories a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--utopia-single-blue), var(--utopia-single-violet));
	color: #ffffff !important;
	font-size: 0.78rem;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 4px 4px 0 rgba(36, 84, 255, 0.14);
}

body #body_wrap.single-post .p-articleThumb img,
body #body_wrap.single-post .post-thumbnail img,
body #body_wrap.single-post .post_content img.wp-post-image {
	display: block;
	width: 100%;
	border: 1px solid rgba(77, 231, 255, 0.46);
	border-radius: 8px;
	box-shadow:
		0 0 0 3px rgba(36, 84, 255, 0.08),
		0 18px 40px rgba(7, 16, 33, 0.14);
}

/* ===========================================================
 * 2. 本文タイポグラフィ
 * =========================================================== */

body #body_wrap.single-post .post_content,
body #body_wrap.single-post .entry-content {
	font-size: clamp(1rem, 1.18vw, 1.06rem);
	line-height: 2.0;
	color: var(--utopia-single-ink);
}

body #body_wrap.single-post .post_content p,
body #body_wrap.single-post .entry-content p {
	margin-bottom: 1.6em;
}

body #body_wrap.single-post .post_content a,
body #body_wrap.single-post .entry-content a {
	color: #173ed3;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

body #body_wrap.single-post .post_content strong,
body #body_wrap.single-post .entry-content strong {
	font-weight: 900;
	background: linear-gradient(transparent 64%, rgba(77, 231, 255, 0.22) 64%);
}

/* ===========================================================
 * 3. 見出し H2 / H3 / H4
 * =========================================================== */

body #body_wrap.single-post .post_content h2,
body #body_wrap.single-post .entry-content h2 {
	position: relative;
	margin: 2.6em 0 1.1em;
	padding: 16px 18px 16px 24px;
	border: 1px solid var(--utopia-single-line);
	border-left: 6px solid var(--utopia-single-blue);
	border-radius: 6px;
	background:
		linear-gradient(90deg, rgba(36, 84, 255, 0.08), rgba(77, 231, 255, 0.04)),
		#ffffff;
	color: var(--utopia-single-ink);
	box-shadow: 6px 6px 0 rgba(36, 84, 255, 0.08);
	font-weight: 900;
	line-height: 1.5;
}

body #body_wrap.single-post .post_content h2::after,
body #body_wrap.single-post .entry-content h2::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 14px;
	width: 34px;
	height: 22px;
	background-image: radial-gradient(var(--utopia-single-blue) 2px, transparent 2px);
	background-size: 8px 8px;
	opacity: 0.55;
}

body #body_wrap.single-post .post_content h3,
body #body_wrap.single-post .entry-content h3 {
	margin: 2.1em 0 0.9em;
	padding: 8px 0 8px 16px;
	border-left: 4px solid var(--utopia-single-violet);
	color: var(--utopia-single-ink);
	font-weight: 900;
	line-height: 1.55;
}

body #body_wrap.single-post .post_content h4,
body #body_wrap.single-post .entry-content h4 {
	margin: 1.9em 0 0.8em;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--utopia-single-line);
	font-weight: 900;
}

/* ===========================================================
 * 4. 本文内の目次（サイドバーの目次は触らない）
 * =========================================================== */

body #body_wrap.single-post .post_content .p-toc,
body #body_wrap.single-post .post_content #toc_container {
	position: relative;
	border: 1px solid rgba(36, 84, 255, 0.24);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(36, 84, 255, 0.04), rgba(115, 87, 255, 0.03)),
		#ffffff;
	box-shadow: 6px 6px 0 rgba(36, 84, 255, 0.06);
}

body #body_wrap.single-post .post_content .p-toc__ttl,
body #body_wrap.single-post .post_content #toc_container .toc_title {
	color: var(--utopia-single-ink);
	font-weight: 900;
}

body #body_wrap.single-post .post_content .p-toc a,
body #body_wrap.single-post .post_content #toc_container a {
	color: var(--utopia-single-ink);
	text-decoration: none;
}

body #body_wrap.single-post .post_content .p-toc a:hover,
body #body_wrap.single-post .post_content #toc_container a:hover {
	color: #173ed3;
}

/* ===========================================================
 * 5. 引用・テーブル・コード・区切り線（本文内）
 * =========================================================== */

body #body_wrap.single-post .post_content blockquote,
body #body_wrap.single-post .entry-content blockquote {
	border-left: 5px solid var(--utopia-single-violet);
	border-radius: 6px;
	background: rgba(36, 84, 255, 0.05);
	color: var(--utopia-single-ink);
}

body #body_wrap.single-post .post_content table,
body #body_wrap.single-post .entry-content table {
	border: 1px solid rgba(36, 84, 255, 0.18);
	background: #ffffff;
}

body #body_wrap.single-post .post_content th,
body #body_wrap.single-post .entry-content th {
	background: rgba(36, 84, 255, 0.08);
	color: var(--utopia-single-ink);
}

body #body_wrap.single-post .post_content code,
body #body_wrap.single-post .post_content pre,
body #body_wrap.single-post .entry-content code,
body #body_wrap.single-post .entry-content pre {
	border-radius: 6px;
	background: #071021;
	color: #eaf3ff;
}

body #body_wrap.single-post .post_content hr,
body #body_wrap.single-post .post_content .wp-block-separator {
	width: 72px;
	height: 1px;
	margin: 16px auto;
	border: 0;
	background: rgba(36, 84, 255, 0.22);
}

/* ===========================================================
 * 6. サイドバー：各ウィジェットをカード枠で囲む
 *    幅・配置・グリッドには一切触らない（見た目の装飾のみ）。
 *    SWELL構造: #sidebar .c-widget（各セクション） / .c-widget__title（見出し）
 * =========================================================== */

/* 各ウィジェットをカード化（枠・角丸・内側余白・薄い影） */
body #body_wrap.single-post #sidebar .c-widget {
	padding: 18px 16px !important;
	border: 1px solid rgba(36, 84, 255, 0.16) !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	box-shadow: 0 10px 26px rgba(7, 16, 33, 0.06) !important;
}

/* 見出し：左アクセントバー＋下線 */
body #body_wrap.single-post #sidebar .c-widget__title {
	position: relative !important;
	margin-bottom: 14px !important;
	padding: 0 0 10px 14px !important;
	border-bottom: 1px solid rgba(36, 84, 255, 0.16) !important;
	color: var(--utopia-single-ink) !important;
	font-weight: 900 !important;
	letter-spacing: 0.02em !important;
}

/* 見出し左の8bit風アクセント（縦バー＋ドット） */
body #body_wrap.single-post #sidebar .c-widget__title::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 2px !important;
	width: 5px !important;
	height: 1.05em !important;
	border-radius: 2px !important;
	background: linear-gradient(180deg, var(--utopia-single-blue), var(--utopia-single-violet)) !important;
}

/* 見出し下線のシアンアクセント（左端を強調） */
body #body_wrap.single-post #sidebar .c-widget__title::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: -1px !important;
	width: 64px !important;
	height: 2px !important;
	background: linear-gradient(90deg, var(--utopia-single-blue), var(--utopia-single-cyan)) !important;
}

/* ===========================================================
 * 7. 関連記事・人気記事のタイトル省略（3行で打ち切り）
 *    実構造: .p-postList__item .p-postList__body 内のタイトル
 * =========================================================== */

body #body_wrap.single-post .p-postList__body .p-postList__title,
body #body_wrap.single-post .p-postList__title,
body #body_wrap.single-post .c-postList__title,
body #body_wrap.single-post .swell-block-postLink .p-postList__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5;
}

/* ===========================================================
 * 8. 人気記事の順位を 01/02 角ボックスに変更
 *    判明した実構造: SWELLは ul.p-postList.-w-ranking の
 *    「li::before」で丸メダルを描いている（専用要素は無い）。
 *    その li::before を上書きして 01〜05 の角ボックスにする。
 * =========================================================== */

/* li を基準にして ::before を左上に絶対配置できるようにする */
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item {
	position: relative !important;
}

/* SWELL純正の丸メダル（li::before）を角ボックスに作り替える */
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item::before {
	content: "" !important;
	position: absolute !important;
	left: 6px !important;
	top: 6px !important;
	right: auto !important;
	bottom: auto !important;
	width: 24px !important;
	height: 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 6px !important;
	background-color: var(--utopia-single-blue) !important;
	background-image: linear-gradient(135deg, var(--utopia-single-blue), var(--utopia-single-violet)) !important;
	color: #ffffff !important;
	font-family: "Press Start 2P", monospace !important;
	font-size: 0.5rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	box-shadow: 2px 2px 0 rgba(36, 84, 255, 0.2) !important;
	border: 0 !important;
	z-index: 5 !important;
}

/* 順位番号（人気記事5件想定。10位以降が必要なら追記） */
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item:nth-child(1)::before { content: "01" !important; }
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item:nth-child(2)::before { content: "02" !important; }
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item:nth-child(3)::before { content: "03" !important; }
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item:nth-child(4)::before { content: "04" !important; }
body #body_wrap.single-post .p-postList.-w-ranking li.p-postList__item:nth-child(5)::before { content: "05" !important; }

/* ===========================================================
 * 9. レスポンシブ（本文のみ。レイアウト幅は触らない）
 * =========================================================== */

@media (max-width: 600px) {
	body #body_wrap.single-post .post_content,
	body #body_wrap.single-post .entry-content {
		font-size: 1rem;
		line-height: 1.95;
	}

	body #body_wrap.single-post .post_content h2,
	body #body_wrap.single-post .entry-content h2 {
		margin-top: 2.2em;
		padding: 14px 16px 14px 18px;
	}
}