/*
Theme Name: my-nucleare
Template: nucleare
Description: 言葉の書庫 用の nucleare 子テーマ。ヘッダ・お知らせ欄・ノート一覧・フッターを差し替えている。
Version: 1.0
*/

:root {
	--accent: #3f7f63;
	--accent-light: #7fc7af;
	--text: #222;
	--muted: #777;
	--line: rgba(0, 0, 0, .08);
}

body {
	background: #f1efe4;
	color: var(--text);
}

/* 旧カスタマイザーCSSから引き継ぎ */
.widget li a { font-weight: bold; }
.widget img { padding-bottom: 5px; }
.widget a:hover img { opacity: .7; }
.entry-meta .byline { display: none !important; }

/* ---------- レイアウト ---------- */
.site {
	max-width: 1200px;
	margin: 0 auto 4em;
}
.content-area { width: 846px; }
.widget-area {
	width: 320px;
	margin-left: 34px;
}
.entry-content,
.entry-footer,
.entry-header,
.entry-summary,
.page-content,
.page-header {
	padding-left: 4em;
	padding-right: 4em;
}
.page-header {
	padding-top: 2.2em;
	padding-bottom: 2.2em;
}
.page-title { font-size: 20px; }
.entry-content { margin-top: 1.5em; }
.hentry { margin-bottom: 3em; }

@media all and (max-width: 1199px) {
	.content-area { width: calc(100% - 354px); }
}
@media all and (max-width: 1139px) {
	.content-area,
	.widget-area {
		width: 100%;
		margin-left: 0;
	}
	.widget-area { margin-top: 2em; }
}
@media all and (max-width: 767px) {
	.entry-content,
	.entry-footer,
	.entry-header,
	.entry-summary,
	.page-content,
	.page-header {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.page-header {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
}

/* ---------- 最上部のメニューバー（文字を太くする以外は親テーマのまま） ---------- */
.theNavigationBar { position: fixed; }
.theNavigationBlock { max-width: 1200px; }
.main-navigation a { font-weight: 700; }

/* SNS・お問い合わせアイコン */
.site-social {
	display: flex;
	align-items: center;
	gap: .2em;
}
.theNavigationSocial .site-social {
	height: 59px;
	padding: 0 .5em;
}
.site-social a {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #5d9981;
	padding: 0;
	transition: color .2s, background .2s;
}
.site-social a:hover {
	color: #fff;
	background: var(--accent-light);
}
.site-social svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

@media all and (max-width: 1025px) {
	/* スマホでもバーを最上部に固定する（親テーマは absolute） */
	.theNavigationBar { position: fixed; }
	.theNavigationSocial .site-social { height: 50px; }
	.main-navigation ul ul a { padding-left: 2em; }
}

/* ---------- サイト名とイラスト ---------- */
/* 親テーマの header.site-header{margin-bottom:2em} より優先させるため要素名付き */
header.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	margin: 59px 0 3.5em;
}
/* お知らせ帯が続くトップ1ページ目だけ余白なし（2ページ目以降は帯が無い） */
.home:not(.paged) header.site-header { margin-bottom: 0; }
.site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5em 0 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2em;
}
.site-branding {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	padding-bottom: 1.8em;
}
.site-title {
	font-size: 50px;
	font-weight: 400;
	letter-spacing: 4px;
	line-height: 1.4;
	margin: 0;
}
.site-title a,
.site-title a:hover { color: #4e8c72; }
.site-description {
	font-size: 13px;
	letter-spacing: 2px;
	color: #444;
	margin: .4em 0 0;
}
.site-header-illust {
	flex: 0 0 auto;
	display: block;
	width: 260px;
	height: auto;
	margin-bottom: 12px;
}

@media all and (max-width: 1025px) {
	header.site-header { margin-top: 50px; }
	.site-header-inner {
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding-top: 1.5em;
	}
	.site-branding {
		text-align: center;
		padding-bottom: 1em;
	}
	.site-title { font-size: 34px; }
	.site-description {
		max-width: 22em;
		margin: .4em auto 0;
	}
	.site-header-illust { width: 200px; }
}

/* ---------- お知らせ欄（ヘッダ直下の全幅バンド） ---------- */
.top-news {
	background: #e9e6da;
	margin: 0 0 2em;
}
.top-news-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.6em 0;
	display: flex;
	align-items: stretch;
	gap: 2.5em;
}
.top-news-head {
	flex: 0 0 130px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--text);
	border-right: 1px solid rgba(0, 0, 0, .15);
	padding-top: .5em;
}
.top-news-head strong {
	font-size: 22px;
	letter-spacing: 3px;
	line-height: 1.2;
}
.top-news-head span {
	font-size: 11px;
	letter-spacing: 3px;
	color: var(--accent);
	margin-top: .2em;
}
.top-news-list {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.top-news-list li {
	display: flex;
	align-items: baseline;
	gap: 2em;
	padding: .6em 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
.top-news-list li:first-child { padding-top: .2em; }
.top-news-list li:last-child { border-bottom: 0; }
.top-news-list time {
	flex: 0 0 6em;
	color: #555;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.top-news-list a { color: var(--text); }
.top-news-list a:hover { color: var(--accent); }
.top-news-list .is-new {
	color: #e8573f;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
}

@media all and (max-width: 767px) {
	.top-news-inner {
		flex-direction: column;
		gap: .5em;
		padding-top: 1.4em;
		padding-bottom: 1.4em;
	}
	.top-news-head {
		flex-basis: auto;
		flex-direction: row;
		align-items: baseline;
		gap: .8em;
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, .15);
		padding: 0 0 .5em;
	}
	.top-news-head strong { font-size: 19px; }
	.top-news-list li {
		flex-wrap: wrap;
		gap: 0 1em;
		font-size: 14px;
	}
	.top-news-list time {
		flex-basis: 100%;
		font-size: 12px;
	}
}

/* ---------- 記事一覧のカテゴリタブ ---------- */
.note-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}
.note-tabs li { margin: 0; }
.note-tabs a {
	display: block;
	padding: .45em 1.3em;
	font-size: 13px;
	letter-spacing: 1px;
	color: #666;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 999px;
	transition: color .2s, background .2s, border-color .2s;
}
.note-tabs a:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.note-tabs .is-current a {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

@media all and (max-width: 767px) {
	.note-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: .3em;
	}
}

/* ---------- 記事カード ---------- */
.entry-header { padding-top: 3em; }
.entry-topmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
	font-size: 13px;
	margin-bottom: .8em;
}
.entry-topmeta time {
	color: var(--muted);
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}
.entry-topmeta .cat-chip {
	display: inline-block;
	color: var(--accent);
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1.7;
	padding: 0 .8em;
	border: 1px solid currentColor;
	border-radius: 20px;
	transition: background .2s, color .2s;
}
.entry-topmeta .cat-chip:hover {
	background: var(--accent);
	color: #fff;
}
h2.entry-title {
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: 0;
	margin: 0;
}
.entry-bottom { padding: 1.5em 0 2em; }

/* ページ送り */
.site-main .pagination {
	margin: 0 0 2.5em;
	text-align: center;
}
.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .4em;
}
.pagination .page-numbers {
	display: inline-block;
	min-width: 2.4em;
	padding: .4em .6em;
	font-size: 13px;
	line-height: 1.6;
	color: #666;
	background: #fff;
	border-radius: 2px;
	letter-spacing: 1px;
}
.pagination a.page-numbers:hover { color: var(--accent); }
.pagination .page-numbers.current {
	background: var(--accent);
	color: #fff;
}
.pagination .page-numbers.dots { background: transparent; }

/* ---------- お問い合わせフォーム（Contact Form 7） ---------- */
.wpcf7 label {
	display: block;
	margin-bottom: 1.2em;
	font-size: 14px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 520px;
	margin-top: .3em;
}
.wpcf7 textarea { max-width: none; }
.wpcf7 input[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: 0;
	padding: .8em 2.5em;
	letter-spacing: 2px;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--accent-light); }

/* ---------- フッター ---------- */
.site-footer {
	background: #fff;
	border-top: 1px solid var(--line);
	padding: 2.5em 1em 2em;
	text-align: center;
}
.footer-nav ul {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
}
.footer-nav li {
	display: inline-block;
	margin: 0;
}
.footer-nav a {
	display: block;
	padding: .3em 1.4em;
	font-size: 13px;
	letter-spacing: 1px;
	color: #555;
	border-right: 1px solid rgba(0, 0, 0, .15);
}
.footer-nav li:last-child a { border-right: 0; }
.footer-nav a:hover { color: var(--accent); }
.footer-nav .menu-item-external a:after {
	content: "\2197";
	font-size: 10px;
	margin-left: 3px;
}
.site-footer .site-social {
	justify-content: center;
	margin-bottom: 1em;
}
.site-footer .site-info {
	float: none;
	width: auto;
	padding: 0;
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--muted) !important;
}

@media all and (max-width: 767px) {
	.footer-nav li { display: block; }
	.footer-nav a { border-right: 0; }
}

/* ---------- 狭い幅での左右余白（各ブロックの基本ルールより後に置く） ---------- */
@media all and (max-width: 1140px) {
	.site-header-inner,
	.top-news-inner {
		padding-left: 1em;
		padding-right: 1em;
	}
}
@media all and (max-width: 579px) {
	.site-header-inner,
	.top-news-inner {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}