/* ============================================================
   30-chrome.css — ヘッダー / グローバルナビ / レイアウト / サイドバー / フッター
   旧テーマ style.css 冒頭(R1層)の chrome 定義を Xwrite の DOM へ書き起こしたもの。
   セレクタ対応(解析§3):
     .masthead     → #header .headerInfo
     .site-name    → .siteInfo__title
     .site-romaji  → .siteInfo__desc
     .rule-2/-1    → .nai-rule-2 / .nai-rule-1(header.php で出力)
     .global-nav   → .nai-gnav(同上)
     .layout       → .contents > .container(2カラムは .main + .side)
     .sidebar      → .side #secondary
     .site-footer  → footer.footer
   ============================================================ */

/* ---- 地の色と基本 ---- */
body {
	background: var(--nai-page);
	color: var(--nai-ink);
	font-family: var(--nai-font-jp);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--nai-accent); color: var(--nai-paper); }
a { color: var(--nai-accent); }
a:hover { color: var(--nai-accent-dk); }

/* ---- マストヘッド(サイト名+ローマ字副題) ---- */
#header.header {
	background: var(--nai-page);
	border: none;
	box-shadow: none;
}
#header .container { max-width: none; padding: 0; }
#header .headerInfo {
	display: block;
	padding: 20px 48px 16px;
	text-align: center;
	min-height: 0;
}
#header .siteInfo { display: block; }
#header .siteInfo__logo { justify-content: center; margin: 0; }
.siteInfo__title,
.siteInfo__title a {
	font-family: var(--nai-font-jp);
	font-weight: 700;
	font-size: 31px;
	letter-spacing: 0.3em;
	color: var(--nai-ink);
	text-decoration: none;
	margin: 0;
	padding-left: 0.3em;
	line-height: 1.3;
}
/* ローマ字副題は必ず可視にする(親の no-desc 事故の再発防止・高さを潰さない) */
#header .siteInfo__desc {
	display: block !important;
	visibility: visible !important;
	height: auto !important;
	overflow: visible !important;
	font-family: var(--nai-font-mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	color: #9A9080;
	margin-top: 7px;
}

/* ---- グローバルナビ上端の二重罫 ---- */
.nai-rule-2 { height: 2px; background: var(--nai-ink); }
.nai-rule-1 { height: 1px; background: var(--nai-ink); margin-top: 3px; }

/* ---- グローバルナビ ---- */
.nai-gnav {
	border-bottom: 1px solid var(--nai-ink);
	background: var(--nai-page);
	position: relative;
	z-index: 40;
}
.nai-gnav-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 34px;
	flex-wrap: wrap;
}
.nai-gnav .nav-link {
	display: flex;
	align-items: center;
	height: 54px;
	font-family: var(--nai-font-jp);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--nai-ink);
	text-decoration: none;
	cursor: pointer;
}
.nai-gnav .nav-link:hover,
.nai-gnav .nav-link.active { color: var(--nai-accent); }
.nai-gnav .caret { font-family: var(--nai-font-mono); font-size: 9px; transform: translateY(1px); margin-left: 5px; }
.nai-gnav .nav-item--sub { position: relative; display: flex; }
.nai-gnav .dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 366px;
	background: var(--nai-paper);
	border: 1px solid var(--nai-ink);
	box-shadow: 0 28px 46px -22px rgba(30, 27, 23, 0.45);
	padding: 10px 0 12px;
	z-index: 70;
}
.nai-gnav .nav-item--sub.open .dropdown,
.nai-gnav .nav-item--sub:hover .dropdown { display: block; }
.nai-gnav .dropdown-label {
	padding: 6px 22px 10px;
	font-family: var(--nai-font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	color: #9A9080;
}
.nai-gnav .dropdown a { display: block; padding: 9px 22px; text-decoration: none; }
.nai-gnav .dropdown a:hover { background: var(--nai-page); }
.nai-gnav .dd-title { display: block; font-family: var(--nai-font-jp); font-size: 14.5px; color: var(--nai-ink); }

/* ---- 本文2カラム ---- */
.contents > .container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 44px 40px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--nai-w-side);
	gap: 60px;
	align-items: start;
}
.contents > .container > .main { min-width: 0; }
.contents > .container > .side { min-width: 0; }
body.no-sidebar .contents > .container { grid-template-columns: 1fr; }
.main-column, .block { min-width: 0; }

/* ---- サイドバー ---- */
.side #secondary { background: none; padding: 0; border: none; }
.sb-section { margin-bottom: var(--nai-s6); }
.sb-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 8px;
	margin-bottom: var(--nai-s3);
	border-bottom: 1px solid var(--nai-rule);
}
.sb-title { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }
.sb-en { font-family: var(--nai-font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--nai-meta-2); }
.side .search-box, .nai-404 .search-box {
	display: flex;
	background: var(--nai-paper);
	border: 1px solid var(--nai-ink);
}
.side .search-box input, .nai-404 .search-box input {
	flex: 1; min-width: 0; padding: 11px 12px; font-family: var(--nai-font-jp);
	font-size: 13px; background: none; border: none;
}
.side .search-box button, .nai-404 .search-box button {
	padding: 11px 18px; background: var(--nai-ink); color: var(--nai-paper);
	border: none; font-family: var(--nai-font-jp); font-size: 12.5px;
	letter-spacing: 0.08em; cursor: pointer;
}
.pop-item { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--nai-rule-hair); text-decoration: none; }
.pop-item:last-of-type { border-bottom: none; }
.pop-num { font-family: var(--nai-font-latin); font-size: 21px; color: var(--nai-accent); flex: none; }
.pop-title { font-size: 12.5px; line-height: 1.85; color: var(--nai-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags .tag {
	display: inline-block; padding: 6px 12px; background: var(--nai-paper);
	border: 1px solid var(--nai-rule-mid); font-size: 12px;
	color: var(--nai-ink-2); text-decoration: none;
}
.tags .tag:hover { border-color: var(--nai-ink); color: var(--nai-ink); }

/* ---- 記事ヘッダー(メタ行) ---- */
.articleHeader__title { font-family: var(--nai-font-jp); font-size: var(--nai-fs-h1); font-weight: 600; line-height: 1.55; letter-spacing: 0.03em; }
.meta-row {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
	margin: var(--nai-s3) 0 var(--nai-s4);
	font-family: var(--nai-font-mono); font-size: var(--nai-fs-meta);
	letter-spacing: 0.14em; color: var(--nai-meta);
}
.meta-row .sep { color: var(--nai-meta-2); }
.meta-row .catalog-no { margin-left: auto; }
.post-thumbnail { margin: 0 0 var(--nai-s5); }

/* ---- フッター ---- */
footer.footer { background: var(--nai-page); border-top: 1px solid var(--nai-ink); margin-top: var(--nai-s6); }
.container-copyright { max-width: 1240px; margin: 0 auto; padding: 22px 40px; }
.nai-footer { display: flex; flex-wrap: wrap; gap: var(--nai-s4); align-items: flex-end; justify-content: space-between; }
.nai-footer-site { font-size: 17px; font-weight: 600; letter-spacing: 0.18em; }
.nai-footer-sub { font-family: var(--nai-font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--nai-meta); font-style: normal; margin-top: 6px; }
.nai-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.nai-footer-links a { font-size: 12.5px; color: var(--nai-ink-2); text-decoration: none; }
.nai-footer-links a:hover { color: var(--nai-accent); }

/* ---- SP ---- */
@media (max-width: 860px) {
	#header .headerInfo { padding: 14px 16px 12px; }
	.siteInfo__title, .siteInfo__title a { font-size: 20px; letter-spacing: 0.22em; }
	.nai-gnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.nai-gnav-inner { justify-content: flex-start; gap: 20px; padding: 0 16px; flex-wrap: nowrap; }
	.nai-gnav .nav-link { height: 46px; font-size: 13.5px; white-space: nowrap; }
	.nai-gnav .dropdown { display: none !important; }
	.contents > .container { grid-template-columns: 1fr; gap: var(--nai-s6); padding: 24px 16px 0; }
	.container-copyright { padding: 18px 16px; }
	.nai-footer { flex-direction: column; align-items: flex-start; gap: var(--nai-s3); }
	.nai-footer-links { gap: 14px; }
}

/* ============================================================
   切替後の実測是正(2026-08-17 04:xx)
   親テーマ site.css の既定と噛み合わなかった3点。いずれも実測で実因を特定した。
   ============================================================ */

/* ①ローマ字副題が最上部の赤帯に出ていた
   実因: 親が .siteInfo__desc を position:absolute; top:0; background:var(--key-color)
   で「キャッチフレーズ帯」として出す設計(実測 pos=absolute / bg=rgb(176,57,42))。
   旧デザインはサイト名の直下に置く小さなローマ字なので、通常フローへ戻す。 */
#header .siteInfo__desc {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	background: transparent !important;
	padding: 0 !important;
	line-height: 1.6;
}

/* ②サイト名が左寄せだった
   実因: .siteInfo__title の <a> が親CSSで display:flex かつ justify-content 未指定(=flex-start)。
   text-align は継承されるが flex コンテナの主軸配置には効かない。 */
#header .siteInfo__title a {
	justify-content: center;
}

/* ③「新着記事」が赤い巨大ボタンで出ていた
   実因: 親 index.php の xw_block_title()(.blockTitle center・bg=key-color・h=55)。
   ないおとは自前の「最新の記事 / LATEST」罫線見出し(.nai-sec-head--latest)を
   一覧テンプレ内で出しているため二重になる。ネイティブ側を畳む。 */
.main .blockTitle { display: none; }

/* ④SPでナビ項目が潰れて文字が重なっていた
   実因: .nai-gnav-inner が flex で、子の flex-shrink 既定値1により
   狭い幅で各項目が圧縮されていた(実測: SPで「ジャズ」の幅が20px・scrollWidth 417>clientWidth 390)。
   横スクロールさせる設計なので、項目は縮ませない。 */
.nai-gnav-inner > *,
.nai-gnav .nav-link,
.nai-gnav .nav-item--sub {
	flex: 0 0 auto;
}