@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（国境なきジョーク団）
    Version: 2.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   国境なきジョーク団（2026-11-14 作り直し：ダーク配色・全文フィード）
   正本は Claude Code のプロジェクト「国境なきジョーク団」の design/child-theme/style.css。
   サーバー側を直接書き換えず、正本を直して tools/deploy_theme.sh で反映する。
   方針：開いた瞬間にジョークが1本まるごと読める。ゴシックで読みやすく。
         題名は太く大きく、セリフは普通の太さ、ジョークの間は細い罫線。面（カード）で囲まない。
   ========================================================================== */

:root {
	--jwb-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
	--jwb-bg: #1b1c1f;          /* 背景：黒に近い濃いグレー */
	--jwb-bg-2: #232429;        /* 入力欄など、少しだけ明るい面 */
	--jwb-ink: #d6d4ce;         /* 本文：少し落とした白 */
	--jwb-bright: #eceae4;      /* 題名：本文より一段明るい白 */
	--jwb-muted: #8e8b84;       /* 日付などの控えめな文字 */
	--jwb-rule: #34363c;        /* ジョークとジョークの間の細い罫線 */
	--jwb-rule-strong: #55585f; /* 日付が変わる境目の、一段強い罫線 */
	--jwb-accent: #d98660;      /* 差し色（ロゴの地球の赤茶を、暗い背景で読める明るさにした1色） */
	--jwb-gap-joke: 1.75rem;    /* 罫線の上下それぞれの余白 */

	/* SWELL が使う色を暗い配色に合わせる */
	--color_border: rgba(255, 255, 255, .14);
	--color_gray: rgba(255, 255, 255, .06);
	--color_htag: var(--jwb-bright);
}

html {
	background: var(--jwb-bg);
	color-scheme: dark;
}

body,
#body_wrap {
	font-family: var(--jwb-sans);
	font-weight: 400;
	background: var(--jwb-bg);
	color: var(--jwb-ink);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--jwb-accent);
}

::selection {
	background: rgba(217, 134, 96, .35);
}

/* --------------------------------------------------------------------------
   1. 会話（記事本文）
   書式：話者名で1行 → その下の行に「セリフ」→ 発言と発言の間は1行空ける。
   ブロック：グループ（スタイル「ジョーク1本」）の中に、段落（スタイル「話者名」）と
             段落（スタイル「セリフ」）を交互に置く。ジョークの間は区切り線（スタイル「ジョークの区切り」）。
   -------------------------------------------------------------------------- */
.post_content .is-style-jwb-joke,
.post_content .is-style-jwb-joke > .wp-block-group__inner-container {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.post_content p.is-style-jwb-who {
	margin: 0 0 .1em;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .04em;
	font-weight: 700;
	color: var(--jwb-accent);
}

.post_content p.is-style-jwb-say {
	margin: 0 0 1em;
	/* 行頭の「 を左にぶら下げて、話者名の左端とセリフの文字の左端をそろえる */
	padding: 0 0 0 .5em;
	text-indent: -1em;
	font-family: var(--jwb-sans);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.75;
	letter-spacing: .02em;
	color: var(--jwb-ink);
	overflow-wrap: anywhere;
	line-break: strict;
}

.post_content .is-style-jwb-joke p.is-style-jwb-say:last-child {
	margin-bottom: 0;
}

/* ジョークとジョークの区切り：細い罫線と、その上下の余白。番号や印は付けない */
.post_content hr.is-style-jwb-sep,
.post_content hr.wp-block-separator.is-style-jwb-sep {
	display: block;
	width: auto;
	max-width: none;
	height: 0;
	margin: var(--jwb-gap-joke) 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--jwb-rule);
	background: none;
	opacity: 1;
	color: var(--jwb-rule);
}

.post_content hr.is-style-jwb-sep::before,
.post_content hr.is-style-jwb-sep::after {
	content: none;
}

/* --------------------------------------------------------------------------
   1-2. 解説（事実を下敷きにした回の末尾に付ける【野暮を承知で、解説】）
   ジョーク本体より一段控えめに：小さめの文字、少し落とした色、上に細い罫線。
   ブロック：グループ（スタイル「解説」）の中に、段落（「解説の題」）、見出し h3（「解説の小見出し」）、段落（「解説の文」）。
   -------------------------------------------------------------------------- */
.post_content .is-style-jwb-note {
	margin: 2.75rem 0 0;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid var(--jwb-rule);
	background: none;
}

.post_content .is-style-jwb-note > .wp-block-group__inner-container {
	margin: 0;
	padding: 0;
}

.post_content p.is-style-jwb-note-title {
	margin: 0 0 1.1rem;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .06em;
	font-weight: 700;
	color: var(--jwb-muted);
}

.post_content h3.is-style-jwb-note-head {
	margin: 1.4rem 0 .35rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: .875rem;
	line-height: 1.6;
	letter-spacing: .02em;
	font-weight: 700;
	color: var(--jwb-ink);
}

.post_content h3.is-style-jwb-note-head::before,
.post_content h3.is-style-jwb-note-head::after {
	content: none;
}

.post_content .is-style-jwb-note-title + h3.is-style-jwb-note-head {
	margin-top: 0;
}

.post_content p.is-style-jwb-note-text {
	margin: 0 0 .6em;
	padding: 0;
	font-size: .875rem;
	line-height: 1.85;
	letter-spacing: .02em;
	color: #a9a69f; /* 本文（#d6d4ce）と控えめな文字（#8e8b84）の間。背景との明度差は約7 */
	overflow-wrap: anywhere;
	line-break: strict;
}

.post_content .is-style-jwb-note p.is-style-jwb-note-text:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. 1日ぶん（1記事）の枠：トップ・ジャンル・記事ページで共通
   日付とジャンル → 組の題名 → ジョーク5本。日と日の間は、一段強い罫線と広い余白。
   -------------------------------------------------------------------------- */
#body_wrap {
	--article_size: 680px;
}

.jwb-feed.l-article {
	--swl-pad_post_content: 0px;
}

.jwb-day {
	margin: 0;
	padding: 0;
}

.jwb-day + .jwb-day {
	margin-top: 4.5rem;
	padding-top: 2rem;
	border-top: 3px solid var(--jwb-rule-strong);
}

.jwb-day__head {
	margin: 0 0 1.25rem;
}

.jwb-day__meta {
	display: flex;
	align-items: baseline;
	gap: .9em;
	margin: 0 0 .2rem;
	font-size: .8125rem;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--jwb-muted);
}

.jwb-day__cat {
	color: var(--jwb-muted);
	text-decoration: none;
}

.jwb-day__cat::before {
	content: "#";
	margin-right: .1em;
	opacity: .7;
}

.jwb-day__cat:hover {
	color: var(--jwb-accent);
}

.jwb-day__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--jwb-bright);
}

.jwb-day__title::before,
.jwb-day__title::after {
	content: none;
}

.jwb-day__title a {
	color: inherit;
	text-decoration: none;
}

.jwb-day__title a:hover {
	color: var(--jwb-accent);
}

.jwb-day .post_content {
	margin: 0;
	padding: 0;
}

/* アイキャッチ（ある記事だけ）：本文の幅の3分の1で右に置き、ジョークを左に回り込ませる */
.jwb-day .post_content::after {
	content: "";
	display: block;
	clear: both;
}

.post_content .jwb-day__eye {
	float: right;
	width: 33.333%;
	margin: .25rem 0 .9rem 1.25rem;
	padding: 0;
}

.post_content .jwb-day__eyeImg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 4px;
}

/* SWELL は本文の各ブロックに clear: both を付けるので、回り込むように外す */
.jwb-day .post_content > .is-style-jwb-joke,
.jwb-day .post_content > hr.is-style-jwb-sep {
	clear: none;
}

/* 絵の横に来た罫線は、絵の下にもぐらせず、絵の手前で止める */
.jwb-day .post_content hr.is-style-jwb-sep {
	overflow: hidden;
}

.jwb-empty {
	color: var(--jwb-muted);
}

/* ジャンルのページの見出し */
.jwb-feedHead {
	margin: 0 0 2rem;
	padding: 0 0 1rem;
	border-bottom: 3px solid var(--jwb-rule-strong);
}

.jwb-feedHead__label {
	margin: 0;
	font-size: .75rem;
	letter-spacing: .12em;
	color: var(--jwb-muted);
}

.jwb-feedHead__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jwb-bright);
}

/* 一覧のページ送り */
.jwb-pager {
	margin: 4.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 3px solid var(--jwb-rule-strong);
}

.jwb-pager .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.jwb-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}

.jwb-pager .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	padding: .5em .8em;
	border: 1px solid var(--jwb-rule);
	border-radius: 4px;
	font-size: .875rem;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: var(--jwb-ink);
}

.jwb-pager a.page-numbers:hover {
	border-color: var(--jwb-accent);
	color: var(--jwb-accent);
}

.jwb-pager .page-numbers.current {
	border-color: var(--jwb-rule-strong);
	background: var(--jwb-bg-2);
	color: var(--jwb-bright);
	font-weight: 700;
}

.jwb-pager .page-numbers.dots {
	border: 0;
	min-width: 0;
	padding: .5em .2em;
	color: var(--jwb-muted);
}

/* 記事ページの下：前の日・次の日 */
.jwb-dayNav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 4rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 3px solid var(--jwb-rule-strong);
}

.jwb-dayNav__link {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: var(--jwb-ink);
}

.jwb-dayNav__link.-next {
	text-align: right;
}

.jwb-dayNav__label {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--jwb-accent);
}

.jwb-dayNav__title {
	display: block;
	margin-top: .2rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--jwb-ink);
}

a.jwb-dayNav__link:hover .jwb-dayNav__title {
	color: var(--jwb-bright);
}

/* --------------------------------------------------------------------------
   3. サイドバー（パソコンは右側・スマホは本文の下）
   -------------------------------------------------------------------------- */
.jwb-side__title {
	margin: 0 0 .5rem;
	padding: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--jwb-muted);
}

.jwb-genres {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--jwb-rule);
}

.jwb-genres li {
	margin: 0;
	border-bottom: 1px solid var(--jwb-rule);
}

.jwb-genres a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: .7rem .15rem;
	font-size: .9375rem;
	line-height: 1.5;
	text-decoration: none;
	color: var(--jwb-ink);
}

.jwb-genres a:hover .jwb-genres__name,
.jwb-genres a.is-current .jwb-genres__name {
	color: var(--jwb-accent);
}

.jwb-genres a.is-current .jwb-genres__name {
	font-weight: 700;
}

.jwb-genres__count {
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--jwb-muted);
}

.jwb-side__random {
	margin: 1.25rem 0 0;
}

.jwb-side__random a {
	display: block;
	padding: .75rem 1rem;
	border: 1px solid var(--jwb-rule-strong);
	border-radius: 4px;
	font-size: .9375rem;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: var(--jwb-accent);
}

.jwb-side__random a:hover {
	border-color: var(--jwb-accent);
}

@media (min-width: 960px) {
	/* 本文（680px）とサイドバー（260px）を、ひとかたまりで中央に置く */
	.-sidebar-on .l-content {
		justify-content: center;
		gap: 64px;
	}

	.-sidebar-on .l-mainContent {
		width: 680px;
		max-width: calc(100% - 324px);
		flex: 0 1 680px;
	}

	.-sidebar-on .l-sidebar.jwb-side {
		width: 260px;
		flex: 0 0 260px;
		margin: 0;
		padding: 0;
	}

	.jwb-side__inner {
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 959px) {
	.l-sidebar.jwb-side {
		margin-top: 4rem;
		padding-top: 1.75rem;
		border-top: 3px solid var(--jwb-rule-strong);
	}
}

/* --------------------------------------------------------------------------
   4. ヘッダー：1行に収まる薄い帯
   -------------------------------------------------------------------------- */
.l-header {
	background: var(--jwb-bg);
	border-bottom: 1px solid var(--jwb-rule);
	box-shadow: none;
}

.l-header .l-header__inner {
	display: flex;
	align-items: center;
	min-height: 0;
	height: 52px;
	padding-top: 0;
	padding-bottom: 0;
}

.l-header .l-header__logo {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	padding: 0;
	margin-right: auto;
}

.l-header .c-headLogo {
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 0;
}

.l-header .c-headLogo__link {
	display: block;
	padding: 0;
}

.l-header .c-headLogo__img {
	display: block;
	width: auto;
	height: 26px;
}

.l-header .c-catchphrase {
	margin: 0;
	padding: 0;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .14em;
	white-space: nowrap;
	color: var(--jwb-muted);
	opacity: 1;
}

/* パソコン：ジャンルはサイドバーに出すので、ヘッダーには検索のボタンだけ残す */
.l-header .c-gnav > .menu-item:not(.c-gnav__s) {
	display: none;
}

.l-header .l-header__gnav {
	margin-left: auto;
}

.l-header .c-gnav__sBtn,
.l-header .c-iconBtn {
	color: var(--jwb-ink);
}

/* スマホ：ヘッダーの下に、横に送れるジャンルの帯 */
.l-header__spNav {
	background: var(--jwb-bg);
	border-top: 1px solid var(--jwb-rule);
}

.p-spHeadMenu .menu-item a,
.l-header__spNav .menu-item a {
	color: var(--jwb-ink);
	font-size: .8125rem;
	letter-spacing: .04em;
}

.l-header__spNav .menu-item.current-menu-item a {
	color: var(--jwb-accent);
}

@media (max-width: 959px) {
	.l-header .l-header__inner {
		height: 48px;
		padding-left: 16px;
		padding-right: 4px;
	}

	/* ロゴを左、検索と開閉メニューのボタンを右に並べる */
	.l-header .l-header__logo {
		order: 1;
	}

	.l-header .l-header__customBtn,
	.l-header .l-header__menuBtn {
		position: static;
		flex: 0 0 44px;
		width: 44px;
		height: 48px;
		margin: 0;
		transform: none;
	}

	.l-header .l-header__customBtn {
		order: 2;
	}

	.l-header .l-header__menuBtn {
		order: 3;
	}

	.l-header .l-header__customBtn .c-iconBtn,
	.l-header .l-header__menuBtn .c-iconBtn {
		width: 100%;
		height: 100%;
	}

	.l-header .c-headLogo__img {
		height: 22px;
	}
}

@media (max-width: 519px) {
	/* 狭い画面では英語名はフッターだけに出す */
	.l-header .c-catchphrase {
		display: none;
	}
}

/* 本文の上の余白を詰めて、最初のジョークを上に寄せる */
.l-content {
	padding-top: 1.75rem;
	margin-top: 0;
}

@media (max-width: 959px) {
	.l-content {
		padding-top: 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   5. フッター・パンくず・開閉メニュー・検索
   -------------------------------------------------------------------------- */
.l-footer {
	margin-top: 4rem;
	background: var(--jwb-bg);
	border-top: 1px solid var(--jwb-rule);
	color: var(--jwb-muted);
}

.l-footer__foot {
	background: none;
}

.l-footer__foot .l-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.l-footer__nav {
	order: 1;
}

.l-footer__nav a {
	color: var(--jwb-ink);
}

.l-footer__nav a:hover {
	color: var(--jwb-accent);
}

.jwb-footnote {
	order: 2;
	margin: 1.4em 0 .3em;
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--jwb-muted);
}

.jwb-footname {
	order: 3;
	margin: 0 0 .6em;
	font-size: .6875rem;
	letter-spacing: .14em;
	color: var(--jwb-muted);
}

.l-footer .copyright {
	order: 4;
	color: var(--jwb-muted);
}

.p-breadcrumb {
	background: none;
	color: var(--jwb-muted);
}

.p-breadcrumb a {
	color: var(--jwb-muted);
}

.p-spMenu__inner,
.p-spMenu__inner::before {
	background: var(--jwb-bg);
	color: var(--jwb-ink);
}

.p-spMenu a {
	color: var(--jwb-ink);
}

.c-widget__title.-spmenu {
	background: none;
	color: var(--jwb-muted);
}

.c-listMenu a {
	border-bottom-color: var(--jwb-rule);
}

.c-searchForm__s,
.p-searchModal .c-searchForm__s {
	background: var(--jwb-bg-2);
	border: 1px solid var(--jwb-rule-strong);
	color: var(--jwb-bright);
}

.c-searchForm__submit {
	background: var(--jwb-accent);
	color: #1b1c1f;
}

/* --------------------------------------------------------------------------
   6. 固定ページ・検索結果など（SWELL の標準の画面）を暗い配色に合わせる
   -------------------------------------------------------------------------- */
.c-postTitle__ttl,
.c-pageTitle,
.c-pageTitle__inner {
	font-family: var(--jwb-sans);
	font-weight: 700;
	color: var(--jwb-bright);
	border: 0;
}

.p-termHead__desc,
.c-pageTitle__subTitle {
	color: var(--jwb-muted);
}

.page .post_content {
	color: var(--jwb-ink);
}

.page .post_content h2 {
	font-family: var(--jwb-sans);
	font-weight: 700;
	color: var(--jwb-bright);
}

.post_content h2::before,
.post_content h2 {
	border-color: var(--jwb-rule-strong);
}

.page .post_content .wp-block-table td {
	padding: .9em 1em;
	border: 0;
	border-bottom: 1px solid var(--jwb-rule);
	vertical-align: top;
	line-height: 1.8;
	background: none;
	color: var(--jwb-ink);
}

.page .post_content .wp-block-table tr:first-child td {
	border-top: 1px solid var(--jwb-rule);
}

.page .post_content .wp-block-table td:first-child {
	width: 7.5em;
	white-space: nowrap;
	color: var(--jwb-muted);
	font-size: .9em;
}

.p-postList__title {
	font-family: var(--jwb-sans);
	font-weight: 700;
	line-height: 1.55;
	color: var(--jwb-bright);
}

.p-postList__meta {
	color: var(--jwb-muted);
}

.p-postList .p-postList__item,
.p-postList.-type-simple .p-postList__link {
	border-color: var(--jwb-rule);
}

.c-pagination .page-numbers {
	background: none;
	border: 1px solid var(--jwb-rule);
	color: var(--jwb-ink);
}

.c-pagination .page-numbers.current {
	background: var(--jwb-bg-2);
	color: var(--jwb-bright);
}

.wpcf7 form p {
	margin-bottom: 1.4em;
}

.wpcf7 form label {
	display: block;
	font-size: .9em;
}

.wpcf7 .jwb-req {
	margin-left: .5em;
	font-size: .8em;
	color: var(--jwb-accent);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--jwb-rule-strong);
	border-radius: 4px;
	background: var(--jwb-bg-2);
	color: var(--jwb-bright);
	padding: .7em .8em;
	font-size: 16px; /* iOS で拡大されないように 16px 以上 */
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: 0;
	border-color: var(--jwb-accent);
}

.wpcf7 input[type="submit"] {
	display: inline-block;
	min-width: 12em;
	padding: .8em 2em;
	border: 1px solid var(--jwb-accent);
	border-radius: 4px;
	background: var(--jwb-accent);
	color: #1b1c1f;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .1em;
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item {
	margin-left: 0;
}

.wpcf7 form .wpcf7-response-output {
	border-color: var(--jwb-rule-strong);
	color: var(--jwb-ink);
}

/* --------------------------------------------------------------------------
   タイトルバナー（トップページの1ページ目だけ。本文＋サイドバーと同じ幅）
   -------------------------------------------------------------------------- */
.jwb-banner {
	margin: 0 0 1.5rem;
}

.jwb-banner__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

@media (min-width: 960px) {
	.home.-sidebar-on .l-content {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.jwb-banner {
		flex: 0 0 100%;
		max-width: 1004px;
		margin: 0 0 2rem;
	}

	/* パソコンでは上下を少し切って 3:1 にする（高さ約335px。最初のジョークを上に寄せるため）。
	   切る位置は、帽子の上から船べりまでが入るように上寄り。スマホは絵の全体を出す。 */
	.jwb-banner__img {
		aspect-ratio: 3 / 1;
		object-fit: cover;
		object-position: 50% 18%;
	}
}