@charset "utf-8";
/*
Template: jstork19
Theme Name: stork19_custom
Theme URI:http://open-cage.com/stork19/
Version: 1.3.0
Author: opencage
Author URI: https://open-cage.com/
Description: RAKU-LOG リニューアル用カスタマイズ（デザインモック案準拠）
*/

/* ==================================================
   1. 配色（カスタマイザーの色設定より優先させるため body に定義）
   ================================================== */
body {
	--rk-accent: #2F5BD3;      /* メインの青 */
	--rk-accent-dark: #1E3F99;
	--rk-ink: #1A1D23;         /* 本文 */
	--rk-muted: #5B6370;       /* 補足テキスト */
	--rk-line: #E2E5EA;        /* 罫線 */
	--rk-bg: #F5F6F8;          /* ページ背景 */
	--rk-navy: #1B2333;        /* 見出し・フッター */
	--rk-code-bg: #1B2333;
	--rk-tag-bg: #EAF0FC;

	--header-bg: #FFFFFF;
	--header-logo-color: var(--rk-accent);
	--header-text-color: var(--rk-ink);
	--inner-content-bg: #FFFFFF;
	--main-text-color: var(--rk-ink);
	--main-link-color: var(--rk-accent);
	--main-link-color-hover: var(--rk-accent-dark);
	--main-ttl-bg: var(--rk-navy);
	--main-ttl-color: #FFFFFF;
	--label-bg: var(--rk-accent);
	--label-text-color: #FFFFFF;
	--footer-bg: var(--rk-navy);
	--footer-text-color: #E8ECF3;
	--footer-link-color: #E8ECF3;

	background-color: var(--rk-bg);
	color: var(--rk-ink);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ==================================================
   2. ヘッダー
   ================================================== */
.stk_header {
	border-bottom: 1px solid var(--rk-line);
}
.site__logo__title.text,
.site__logo__title.text a {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--rk-accent);
}
.site_description {
	color: var(--rk-muted);
}
.ul__g_nav > li > a {
	font-weight: 500;
}
.ul__g_nav > li > a:hover {
	color: var(--rk-accent);
	opacity: 1;
}

/* ==================================================
   3. 記事一覧（カード・シンプル共通）
   ================================================== */
.archives-list .post-list {
	background: #FFFFFF;
	border: 1px solid var(--rk-line);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.2s, border-color 0.2s;
}
.archives-list .post-list:hover {
	border-color: #C8D5F5;
	box-shadow: 0 4px 16px rgba(26, 29, 35, 0.08);
}
.archives-list .entry-title {
	font-size: 105%;
	line-height: 1.6;
}
.archives-list .post-list__link:hover .entry-title {
	color: var(--rk-accent) !important;
}
.archives-list .byline,
.archives-list .description {
	color: var(--rk-muted);
}
/* シンプル（横長リスト）レイアウト：モック案に合わせて調整 */
.archives-list.simple-list .post-list,
.archives-list.simple-list .post-list:first-child {
	margin: 0 0 14px;
	border: 1px solid var(--rk-line);
}
.archives-list.simple-list .post-list__link {
	padding: 16px;
	align-items: center;
	background: transparent;
}
.archives-list.simple-list .eyecatch {
	width: 32%;
	max-width: 200px;
}
.archives-list.simple-list .eyecatch img {
	border-radius: 8px;
}
.archives-list.simple-list section {
	padding-left: 20px;
}
@media only screen and (max-width: 480px) {
	.archives-list.simple-list .post-list {
		margin-left: 0;
		margin-right: 0;
	}
	.archives-list.simple-list .post-list__link {
		padding: 12px;
	}
	.archives-list.simple-list section {
		padding-left: 12px;
	}
}

/* 記事カードのタグ */
.rk-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 4px;
}
.rk-card-tag {
	font-size: 12px;
	line-height: 1.6;
	color: var(--rk-accent);
	background: var(--rk-tag-bg);
	padding: 1px 8px;
	border-radius: 4px;
}

/* 抜粋は3行まで（コードが混ざっても崩れないように） */
.archives-list .description p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* カテゴリーラベル：角丸の小さなタグ風 */
.cat-name {
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.eyecatch .cat-name {
	top: 8px;
	left: 8px;
	right: auto;
	opacity: 1;
}

/* カテゴリー別の色は functions.php がカテゴリー名から自動生成します
   （PC・アプリ=青／Web制作=緑／ツール=橙／資格・学び=紫／暮らし・エンタメ=ピンク） */

/* ページ送り */
.pagination .page-numbers {
	border-radius: 8px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pagination .page-numbers.current {
	background-color: var(--rk-accent);
	color: #FFFFFF;
}

/* トップ上部：よく読まれている記事＋Webツール便利帳（[rk_top_panels]） */
.rk-top-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.rk-panel {
	border-radius: 14px;
	padding: 22px 24px;
}
.rk-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	margin-bottom: 10px;
}
#inner-content .rk-panel__title,
.rk-panel__title {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: 900;
	background: none;
	color: inherit;
	border: none;
	box-shadow: none;
}
.rk-panel__title::before,
.rk-panel__title::after {
	display: none;
}
.rk-panel--ranking {
	background: #FFFFFF;
	border: 1px solid var(--rk-line);
}
.rk-panel__note {
	font-size: 12px;
	color: var(--rk-muted);
}
.rk-rank {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rk-rank__item {
	border-top: 1px solid #EEF0F3;
}
.rk-rank__link {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	color: var(--rk-ink);
	text-decoration: none;
}
.rk-rank__link:hover .rk-rank__title {
	color: var(--rk-accent);
}
.rk-rank__num {
	font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--rk-accent);
	width: 28px;
	flex: none;
}
.rk-rank__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rk-rank__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}
.rk-rank__views {
	font-size: 12px;
	color: var(--rk-muted);
}
.rk-panel--tools {
	background: var(--rk-navy);
	color: #E8ECF3;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rk-panel--tools .rk-panel__head {
	flex-direction: column;
	align-items: flex-start;
}
.rk-panel__eyebrow {
	font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #9DB4F0;
}
.rk-panel--tools .rk-panel__title {
	color: #FFFFFF;
}
.rk-panel__lead {
	margin: 0;
	font-size: 13px;
	color: #C2CAD8;
}
.rk-tools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rk-tools__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 16px;
	box-sizing: border-box;
	border-radius: 10px;
	background: #26314A;
	color: #FFFFFF;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}
.rk-tools__link:hover {
	background: #33405E;
	color: #FFFFFF;
}
.rk-tools__more {
	font-size: 13px;
	font-weight: 500;
	color: #9DB4F0;
	text-decoration: none;
	margin-top: auto;
}
.rk-tools__more:hover {
	color: #FFFFFF;
}
/* ウィジェットエリア内で使うときの余白・見出しの打ち消し */
.widget:has(.rk-top-panels) {
	margin-bottom: 0;
}
.widget:has(.rk-top-panels) .widgettitle {
	display: none;
}

/* ==================================================
   4. 記事本文
   ================================================== */
#inner-content .article,
.single #main article,
.page #main article {
	border-radius: 16px;
}
.entry-content {
	line-height: 1.9;
}
/* H2：濃紺の帯（カスタマイザーの見出しデザイン設定に関係なく固定） */
#inner-content .entry-content h2:not([class*="is-style-style"]):not(.rk-panel__title) {
	background: var(--rk-navy);
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	box-shadow: none;
	padding: 0.7em 1em;
	margin-top: 2.2em;
	font-weight: 900;
	line-height: 1.5;
}
#inner-content .entry-content h2:not([class*="is-style-style"]):not(.rk-panel__title)::before,
#inner-content .entry-content h2:not([class*="is-style-style"]):not(.rk-panel__title)::after {
	display: none;
}
/* H3：左に青い線 */
#inner-content .entry-content h3:not([class*="is-style-style"]) {
	background: none;
	border: none;
	border-left: 5px solid var(--rk-accent);
	border-radius: 0;
	box-shadow: none;
	padding: 0.2em 0 0.2em 0.8em;
	color: var(--rk-ink);
}
#inner-content .entry-content h3:not([class*="is-style-style"])::before,
#inner-content .entry-content h3:not([class*="is-style-style"])::after {
	display: none;
}

/* タグ（記事下・ウィジェット） */
.tag-cloud-link,
.wp-block-tag-cloud a {
	color: var(--rk-accent);
	background: var(--rk-tag-bg);
	box-shadow: none;
	border-radius: 4px;
	opacity: 1;
}
.tag-cloud-link::before,
.wp-block-tag-cloud a::before {
	content: "#";
	font-family: inherit;
	font-weight: 700;
}
@media only screen and (min-width: 768px) {
	.tag-cloud-link:hover {
		box-shadow: none;
		background: #D6E2FA;
		opacity: 1;
	}
}

/* 記事ページのカテゴリーラベル：枠の外にはみ出さず、日付の左に並べる */
@media only screen and (min-width: 1167px) {
	.single .byline:has(.cat-name:not(.noposition)) {
		padding-top: 0;
	}
	.single .byline:has(.cat-name:not(.noposition)) .cat-name {
		position: static;
		display: inline-block;
		margin-right: 12px;
	}
}
.single .byline .cat-name {
	font-size: 13px;
	padding: 2px 10px;
	vertical-align: middle;
}

/* PR表記 */
.pr-notation {
	display: block;
	font-size: 13px;
	color: var(--rk-muted);
	background: var(--rk-bg);
	padding: 8px 14px;
	border-radius: 8px;
}

/* この記事でわかること（手入力の抜粋があるときに自動表示） */
.rk-summary {
	background: var(--rk-tag-bg);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 2em;
}
.entry-content .rk-summary__title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 15px;
	color: #1E3F99;
}
.rk-summary p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
}

/* 目次（最初の見出しの前に自動表示） */
.rk-toc {
	border: 1px solid var(--rk-line);
	border-radius: 12px;
	padding: 18px 24px;
	margin: 2em 0;
	background: #FFFFFF;
}
.entry-content .rk-toc__title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 15px;
}
.entry-content .rk-toc__list,
.entry-content .rk-toc__sub {
	margin: 0;
	padding-left: 1.4em;
	line-height: 1.7;
}
.entry-content .rk-toc__list > li {
	margin: 4px 0;
	font-size: 15px;
}
.entry-content .rk-toc__sub > li {
	margin: 2px 0;
	font-size: 14px;
}
.rk-toc a {
	color: var(--rk-accent);
	text-decoration: none;
}
.rk-toc a:hover {
	text-decoration: underline;
}
/* サイドバー用（[rk_toc]） */
.rk-toc--side {
	padding: 16px 20px;
	margin: 0;
	font-size: 14px;
}
.rk-toc--side .rk-toc__title {
	margin: 0 0 6px;
	font-weight: 700;
}
.rk-toc--side .rk-toc__list,
.rk-toc--side .rk-toc__sub {
	margin: 0;
	padding-left: 1.3em;
	line-height: 1.7;
}
.rk-toc--side .rk-toc__sub {
	display: none; /* サイドは H2 だけに絞る */
}
/* 目次から飛んだとき、見出しが固定ヘッダーに隠れないように */
.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: 90px;
}

/* 最初の見出し前の広告エリア */
.rk-ad-area {
	margin: 2em 0;
	text-align: center;
}
.rk-ad-area .widget {
	margin: 0;
}

/* ==================================================
   5. コードブロック
   ================================================== */
.entry-content pre:not(.prettyprint),
.entry-content .wp-block-code {
	position: relative;
	background: var(--rk-code-bg);
	color: #E8ECF3;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 14px;
	line-height: 1.7;
	padding: 2.6em 1.4em 1.2em;
	border-radius: 12px;
	overflow-x: auto;
	tab-size: 4;
}
.entry-content pre code {
	font-family: inherit;
}
/* インラインコード */
.entry-content :not(pre) > code {
	font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
	font-size: 0.9em;
	background: var(--rk-tag-bg);
	color: #1E3F99;
	padding: 0.1em 0.4em;
	border-radius: 4px;
}
/* コピーボタン（functions.php のスクリプトで追加） */
.rk-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid #44506A;
	border-radius: 6px;
	background: #26314A;
	color: #E8ECF3;
	font-size: 12px;
	font-family: "Noto Sans JP", sans-serif;
	cursor: pointer;
}
.rk-copy-btn:hover {
	background: #33405E;
}

/* 表：スマホで横スクロール */
.entry-content .wp-block-table {
	overflow-x: auto;
}
.entry-content table th {
	background: var(--rk-bg);
}

/* ==================================================
   6. サイドバー・ウィジェット
   ================================================== */
.widgettitle {
	background: none;
	color: var(--rk-ink);
	padding: 0 0 8px;
	border-bottom: 2px solid var(--rk-ink);
	font-weight: 900;
	border-radius: 0;
}
#sidebar1 .widget {
	margin-bottom: 2em;
}
/* ブロック形式のウィジェット見出しも同じ見た目に */
#sidebar1 .wp-block-heading,
#sidebar1 .wp-block-search__label {
	font-size: 16px;
	font-weight: 900;
	color: var(--rk-ink);
	padding: 0 0 8px;
	margin: 0 0 12px;
	border-bottom: 2px solid var(--rk-ink);
	background: none;
	display: block;
}
/* サイドバーのランキング（WordPress Popular Posts）を本文と同じ黒文字に */
#sidebar1 .wpp-list,
#sidebar1 .widget_custom_html ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#sidebar1 .wpp-list li,
#sidebar1 .widget_custom_html li {
	padding: 10px 0;
	border-bottom: 1px solid #EEF0F3;
	font-size: 14px;
	line-height: 1.6;
}
#sidebar1 .wpp-list a,
#sidebar1 .widget_custom_html li a {
	color: var(--rk-ink);
	text-decoration: none;
	font-weight: 500;
}
#sidebar1 .wpp-list a:hover,
#sidebar1 .widget_custom_html li a:hover {
	color: var(--rk-accent);
}
#sidebar1 .wpp-meta,
#sidebar1 .wpp-views,
#sidebar1 .post-stats {
	display: block;
	font-size: 12px;
	color: var(--rk-muted);
	margin-top: 2px;
}

/* 検索フォーム */
.wp-block-search__input,
.searchform_input {
	border: 1px solid #C9CED6 !important;
	border-radius: 8px;
	min-height: 44px;
	padding: 0 12px;
}
.wp-block-search__button {
	background: var(--rk-accent) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 8px;
	min-height: 44px;
	font-weight: 700;
}
.wp-block-search__button:hover {
	background: var(--rk-accent-dark) !important;
}
/* サイドバーのリスト（最近の投稿など） */
#sidebar1 .wp-block-latest-posts li,
#sidebar1 .wp-block-latest-comments li {
	padding: 8px 0;
	border-top: 1px solid #EEF0F3;
	font-size: 14px;
	line-height: 1.6;
}
#sidebar1 .wp-block-latest-posts a {
	color: var(--rk-ink);
	text-decoration: none;
}
#sidebar1 .wp-block-latest-posts a:hover {
	color: var(--rk-accent);
}

/* 広告ウィジェットに「スポンサーリンク」ラベルを自動表示 */
.widget:has(ins.adsbygoogle)::before,
.entry-content .rk-ad::before {
	content: "スポンサーリンク";
	display: block;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--rk-muted);
	margin-bottom: 6px;
}
/* コードブロック直後に広告が来ないよう余白を確保 */
.entry-content pre + .widget:has(ins.adsbygoogle) {
	margin-top: 2em;
}

/* ==================================================
   6-1. 記事下のプロフィール欄（STORK19 の著者ボックス）
   ================================================== */
#single_foot .stk_authorbox {
	background: var(--rk-bg);
	border-radius: 16px;
	padding: 24px;
	margin-top: 2.5em;
}
#single_foot .stk_authorbox > .h_ttl {
	margin: 0 0 14px;
	padding: 0;
	font-size: 13px;
	color: var(--rk-muted);
	background: none;
	text-align: left;
	letter-spacing: 0.08em;
}
#single_foot .stk_authorbox > .h_ttl::before,
#single_foot .stk_authorbox > .h_ttl::after {
	display: none;
}
#single_foot .stk_authorbox > .h_ttl .gf {
	font-size: 0; /* 「ABOUT US」を日本語に差し替え */
}
#single_foot .stk_authorbox > .h_ttl .gf::after {
	content: "この記事を書いた人";
	font-size: 13px;
	font-weight: 700;
}
#single_foot .author_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
#single_foot .author_img {
	flex: none;
	width: 72px;
	margin: 0;
}
#single_foot .author_img img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}
#single_foot .author_info {
	flex: 1 1 260px;
	min-width: 0;
}
#single_foot .author_name {
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 4px;
	text-align: left;
}
#single_foot .author_description {
	font-size: 14px;
	line-height: 1.8;
	color: #3A4250;
	text-align: left;
}
#single_foot #author-newpost .h_ttl {
	font-size: 15px;
	font-weight: 900;
	background: none;
	color: var(--rk-ink);
	padding: 0 0 8px;
	border-bottom: 2px solid var(--rk-ink);
	text-align: left;
}

/* ==================================================
   6-2. スマホ表示の調整
   ================================================== */
@media only screen and (max-width: 767px) {
	/* キャッチコピーはスマホでは非表示（ロゴだけにする） */
	.stk_header .site_description {
		display: none;
	}
	/* ロゴをひと回り小さく */
	.site__logo__title.text,
	.site__logo__title.text a {
		font-size: 30px;
		line-height: 1.2;
	}
	/* サムネイル上のカテゴリーラベルを小さく */
	.archives-list .eyecatch .cat-name {
		font-size: 10px;
		padding: 1px 6px;
		top: 4px;
		left: 4px;
		border-radius: 3px;
	}
	/* トップ上部の2つの枠は縦に並べる */
	.rk-top-panels {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 20px;
	}
	.rk-panel {
		padding: 18px;
	}
}

/* ==================================================
   7. フッター
   ================================================== */
#footer {
	border-top: none;
}
#inner-footer a:hover {
	opacity: 0.8;
}
.copyright {
	color: #B8C1D0;
}