@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20260510b
*/

/* Simplicity子テーマ用のスタイルを書く */


/* base */

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#searchform{
	margin: 0px;
}
#s{
	/*margin: 0px;*/
}


#navi ul{
	border-radius: 0px;
}
#main{
	border-radius: 0px;
}
#sidebar .widget{
	margin-bottom:10px;
	padding:10px;
	background-color: transparent;
	border-bottom: none;
}

/* h2: モックに合わせて burgundy はボーダーのみに使い、文字色はダークグレー */
.article h2{
	color: #333;
	border: none;
	border-left: 4px solid #a9171d;
	padding: .1em .8em;
	margin: 1.6em 0 .8em;
	font-weight: 600;
}
/* h2 内のリンク: 見た目は h2 と同色 (#333)、hover で burgundy + 下線 */
.article h2 a{
	color: #333 !important;
	text-decoration: none;
}
.article h2 a:hover{
	color: #a9171d !important;
	text-decoration: underline;
}


#sidebar h3{
	margin-top: 0px;
	color: #fff;
}

#sidebar a{
	color: #fff;
}
#sidebar a:hover{
	color: #fff;
	background-color: #a85253;
}


div.menu{
	/* モック準拠: フッターメニューの点線を排除 */
	border-top: none;
}

/* フッターメニュー / 任意のメニューでJapanese テキストが mid-word で改行されないよう
   word-break: keep-all で抑止し、各項目はインラインブロックで一括折り返し */
#footer-navi,
#footer-navi-in,
.footer-menu,
#footer .menu,
#footer ul.menu{
	word-break: keep-all;
	overflow-wrap: normal;
}
#footer-navi a,
#footer .menu a,
#footer ul.menu a{
	white-space: nowrap;
	display: inline-block;
}

header .post-meta{
	padding: 5px;
	margin-bottom: 30px;
}

.entry .post-meta{
	padding: 3px;
	border-bottom: none;
}

/* 投稿日 / 更新日 を全ページで非表示 */
.post-meta .post-date,
.post-meta .post-update,
header .post-meta,
.footer-post-meta{
	display: none !important;
}
#h-top{
	min-height: 0px;
}

/* フッター点線を排除 (モック準拠) */
#copyright{
	border-top: none;
	border-bottom: none;
}

/* =============================================================================
   フッター: WP top と /fc-ranking/ で同じ見た目を出す
   - /fc-ranking/ は親 simplicity2/style.css を読み込まないため、
     親の #footer / #footer-navi ルールと、WP top の inline customizer CSS
     (#footer { background:#a9171d }) を子テーマ側で再宣言する
   - !important は付けず親 CSS と同じ specificity に揃える
   ============================================================================= */
#footer{
	clear: both;
	background-color: #a9171d;   /* burgundy (WP top の customizer 出力と一致) */
	color: #fff;
	padding: 5px;
}
#footer a{ color: #fff; text-decoration: none; }
#footer a:hover{ text-decoration: underline; }

#footer-navi ul{
	text-align: center;
	padding-left: 0;
	margin: 0;
}
#footer-navi ul li{
	display: inline;
	list-style: outside none none;
}
#footer-navi ul li::before{
	content: "|";
	padding: 0 0.6em;
}
#footer-navi ul li:first-child::before{
	content: "";
	padding: 0;
}

#copyright{
	padding: 20px 0;
	font-size: 80%;
	text-align: center;
}
#copyright a{
	text-decoration: none;
	color: #fff;
}
.credit{ padding: 4px 0; }

/* WP top と同じく、disclaimer は <footer> の外に薄い灰色帯で出す。
   /fc-ranking/ では Cookie 注意文 (.fc-rank-cookie-note) が直後に続く */
.site-disclaimer,
.fc-rank-cookie-note{
	color: #888;
}
.fc-rank-cookie-note a{ color: #2098A8; }

#main .post, #main .page{
	margin-bottom:10px;
}

#header .alignleft{
	margin-left: 0px;
}

/* base */

.linkblock,
.linkblock-r,
.linkblock-c
{
	position: relative;
	display: block;
	padding: 15px 10px;
	text-decoration: none;
}
.linkblock-c{
	border: solid 1px #ccc;
}
.linkblock-r{
	border: dotted 1px #a9171d;
	color: #a9171d;
}
.linkblock-r:hover{
	background-color: #a85253;
	color: #fff;
}


.right-arrow:after{
	/*font-family: 'Font Awesome 5 Free';*/
	font-family: 'FontAwesome';
	content: "\f054";
	/*font-weight: 900;*/
	position: absolute;
	right: 15px;
}

@font-face {
	font-family: 'fcf';
	src: url('/common/font/fcf.ttf');
}
#site-title a{
	font-family: 'fcf';
	font-size: 130%;
}

/* h1: burgundy はボーダーのみに使い、文字色は #333 (モック整合) */
.article h1{
	border-top: solid 3px #a9171d;
	border-bottom: solid 3px #a9171d;
	padding: 15px 0px;
	color: #333;
}
a img:hover {
	opacity: 0.5 ;
}


@media screen and (max-width: 1110px){
	div#sidebar {
		padding: 0px 10px;
	}
}


@media screen and (max-width: 639px){
	.entry-read a, .related-entry-read a {
		border-radius: 0px;
	}
	#h-top #site-title a{
		font-size: 130%;
	}
}

/* =============================================================================
   2026-05-09 デザイン整理: モック [c:\tmp\fcrank_mockup.html] と一致させる
   - 赤バー右上の RSS/Feedly アイコンをサイト全体で非表示
   - 右サイドバーを「メインコンテンツ下段」に移動 (横並び 2 カラム → 縦並び)
   ============================================================================= */

/* body 背景: WP カスタマイザーの朱色 (#a9171d) を打ち消し、
   メインコンテンツ以外の余白も light gray にしてモックと整合 */
body,
body.custom-background{
	background-color: #f7f7f7 !important;
}

/* wrapper centering — WP top と /fc-ranking/ で同じ動きにする
   親の responsive-pc.css が @media (max-width:1110px) で width: 740px に縮小するので、
   ここで !important で 1070px に揃え直す */
#header-in, #navi-in, #body-in, #footer-in,
div#header-in, div#navi-in, div#body-in, div#footer-in{
	width: 1070px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

/* WP top header (赤バー) と sub-nav (白) は背景を保持
   #h-top: Simplicity2 親で既に bg-image / bg-color が指定されているため上書きしない
   ただし custom-background の朱色が漏れないよう、明示的に red を残す */
#header,
#h-top{
	background-color: #a9171d;
}
/* サブナビは白背景に強制 (Simplicity2 親の #navi ul は #F7F7F7、body bg が透けると朱色) */
#navi,
#navi-in,
#navi ul,
#navi ul li{
	background-color: #fff !important;
}
#navi ul,
#navi ul li{
	border: 0 !important;
}

/* =============================================================================
   モック site-header と一致させるための #h-top / #site-title / #mobile-menu-toggle 上書き
   ============================================================================= */
/* WP top の赤バー: /fc-ranking/ の .fc-rank-header と寸法を厳密に揃える
   - 親 / narrow.css / responsive-pc.css に複数の margin/padding rule があり
     cascade が複雑なので、絶対位置で固定する */
#h-top{
	min-height: 0 !important;
	padding: 0 !important;          /* flex の padding は子で吸収 */
	border-bottom: none;
	box-sizing: border-box;
	position: relative;
	height: 56px;                    /* 固定高さ */
	display: block;                  /* flex は使わず絶対位置で配置 */
}
/* タイトル: 左 20px に絶対固定 */
body #h-top .alignleft,
body #h-top .alignleft.top-title-catchphrase{
	position: absolute !important;
	top: 50% !important;
	left: 20px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto;
	width: auto;
}
/* ハンバーガー / user-nav: 右 20px に絶対固定 */
body #h-top #mobile-menu,
body #h-top .alignright{
	position: absolute !important;
	top: 50% !important;
	right: 20px !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* タイトルは左、ハンバーガーは右に配置
   (DOM 順: #mobile-menu, .alignleft.top-title-catchphrase, .alignright.top-sns-follows[hidden]
   をビジュアル順序: タイトル左 → 余白 → ハンバーガー右 に上書き) */
#h-top .alignleft,
#h-top .alignleft.top-title-catchphrase{
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	order: 1;
}
#h-top #site-title{
	margin: 0 !important;
	padding: 0 !important;
}
#h-top #mobile-menu{
	order: 99;
	margin-left: auto !important;
}
/* /fc-ranking/ standalone の .alignright (user-nav) も右端に押し出す
   alignleft が order:1 なので、alignright は order:99 で右端へ */
#h-top .alignright{
	order: 99;
	margin-left: auto !important;
	margin-right: 0 !important;
	height: auto !important;
}
/* fcf (ドット字) を完全に外し、Hiragino/Meiryo に統一 */
body #h-top #site-title a,
body.home #h-top #site-title a{
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, "ヒラギノ角ゴ ProN W3", sans-serif !important;
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}
#mobile-menu{
	margin: 0;
}
#mobile-menu-toggle{
	display: inline-block;
	background: transparent;
	border: 1px solid rgba(255,255,255,.5);
	border-radius: 3px;
	padding: 4px 12px !important;
	color: #fff !important;
	text-decoration: none;
}
#mobile-menu-toggle .fa{
	color: #fff;
	font-size: 18px;
}

/* =============================================================================
   モック s2-subnav と一致させるための #navi-in / .menu li 上書き
   ============================================================================= */
#navi-in{
	border-bottom: none;
	padding: 0 20px;
}
#navi-in .menu,
#navi-in ul.menu{
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
#navi-in .menu li,
#navi-in ul.menu li{
	margin: 0;
	padding: 0;
	border: 0;
}
#navi-in .menu li a,
#navi-in ul.menu li a{
	display: block;
	padding: 12px 16px;
	color: #333 !important;
	text-decoration: none;
	font-size: .92em;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
	background: transparent !important;
}
#navi-in .menu li a:hover,
#navi-in ul.menu li a:hover{
	color: #a9171d !important;
	border-bottom-color: #a9171d;
}

/* RSS / Feedly / SNS フォローボックスをサイト全体で非表示
   - 赤バー右上 (#h-top .top-sns-follows)
   - サイドバー / 他ウィジェットエリアの「フォローする」ボックス (.sns-pages, .sns-follow-msg, ul.snsp 等)  */
#h-top .alignright.top-sns-follows,
#h-top .top-sns-follows,
.top-sns-follows,
.sns-pages,
.sns-follow-msg,
ul.snsp,
.sns-follow-buttons,
.sns-follows{
	display: none !important;
}

/* カテゴリーウィジェットをサイドバーから非表示 (お知らせのみで利用価値が薄いため) */
#categories-2,
.widget_categories{
	display: none !important;
}

/* タイトル画像 (256x224 ピクセルアート) を拡大表示してもぼやけないように
   ピクセル境界を保ったままレンダリング。fc-db / nes-db 詳細ページの
   メインビューア + サムネ列、結果リストの thumb 等すべてに適用 */
#fc-disp img,
#fc-thum img,
.rlist img,
.fc-rank-card-thumb img,
.fc-rank-theme-card-thumb img,
.fc-rank-row-thumb img,
.fc-rank-popular-thumb img,
.fc-rank-game-thumb img{
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

/* サイドバーを main の右ではなく下段に移動 (デスクトップ含めサイト全体) */
#body-in{
	display: block;
}
#main, #main-in{
	width: 100% !important;
	float: none !important;
	max-width: 1070px;
	margin-left: auto;
	margin-right: auto;
}
#sidebar{
	width: 100% !important;
	float: none !important;
	clear: both;
	max-width: 1070px;
	margin: 2em auto 0;
	padding: 1em;
	background: #F7F7F7;
	border-top: none;
	box-sizing: border-box;
}
/* sidebar の widget レイアウト
   - widget は左寄せで縦に積む (Simplicity2 親のデフォルトと同じ)
   - 以前 grid 横並びを試したが、AdSense widget が空のとき grid セルが
     残って recent-posts widget が中央に寄る違和感が出たため廃止 (2026-05-10) */
#sidebar .widget{
	background: transparent !important;
	margin-bottom: 1.2em;
	padding: 0;
}
/* 日本語タイトルが mid-word で折り返されないよう抑止。
   widget 幅が確保できない極端な場合は最終手段で word-break される */
#sidebar .widget li,
#sidebar .widget li a{
	word-break: keep-all;
	overflow-wrap: anywhere;
	line-height: 1.7;
}
#sidebar .widget h3{
	color: #333 !important;
	background: transparent;
	border-bottom: none;
	padding: 0;
	margin: 0 0 .5em;
	font-size: 1em;
}
#sidebar a{
	color: #2098A8 !important;
}
#sidebar a:hover{
	color: #C03 !important;
	background-color: transparent !important;
}

/* 印刷用: コンテンツ本体だけ印刷できるよう、ナビ・サイドバー・SNS は非表示に */
@media print {
	#h-top,
	#navi-in,
	#sidebar,
	#footer,
	.fc-rank-toast,
	.fc-rank-social,
	.fc-rank-fav-wrap {
		display: none !important;
	}
	body { background: #fff !important; color: #000 !important; }
	#main { width: 100% !important; max-width: none !important; }
	a { color: #000 !important; text-decoration: underline; }
}

/* breakpoint メモ:
   - 720px: 主たるモバイル (タブレット縦/フォン横含む) - fc-rank.css と統一
   - 540px: スモールフォン (Samsung Galaxy 等) のみのレイアウト微調整
   既存の 639px / 1110px は Simplicity2 親テーマの古い breakpoint で、
   個別 element 用 (sidebar padding 等) なので統一せずそのまま残す */

/* =============================================================================
   kdtk-fcsearch (FC ソフトカタログ・ドリルダウン UI) の見た目を整える
   - プラグインファイルは触らず子テーマからの override で完結
   - kdtk-fcsearch.php は inline <style> をボディ内で出力するため、
     特異性を body プレフィックスで上げて cascade を勝たせる
   - 配色は Simplicity2 の burgundy #a9171d / hover #a85253 と一致済み
   - 残課題は radius / 余白 / クラッシュする青色アクセントの 3 点
   ============================================================================= */

/* [stFcCatalogCards]: 手風琴代替の 3 枚カード + select ドロップダウン */
.fc-catalog-cards{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 1em 0 1.6em;
}
@media (max-width: 720px){
	.fc-catalog-cards{ grid-template-columns: 1fr; gap: 8px; }
}
.fc-catalog-card{
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color .15s, box-shadow .15s;
}
.fc-catalog-card:hover{
	border-color: #a9171d;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.fc-catalog-card h4{
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	color: #a9171d;
	border: none;
	padding: 0;
}
.fc-catalog-card-desc{
	margin: 0;
	font-size: .82em;
	line-height: 1.5;
	color: #666;
}
.fc-catalog-select{
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;          /* iOS 自動ズーム防止 */
	line-height: 1.3;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #222;
	cursor: pointer;
	box-sizing: border-box;
	min-height: 44px;
}
.fc-catalog-select:focus{
	outline: none;
	border-color: #a9171d;
	box-shadow: 0 0 0 2px rgba(169,23,29,.15);
}

/* slist 手風琴: 2026-11-06 に「カタログのデザイン改善」節（ファイル末尾）へ移した */

/* 結果リスト (.rlist)・YouTube バッジ: 2026-11-06 に「カタログのデザイン改善」節（ファイル末尾）へ移した */

/* 詳細ページ画像選択時の inline JS による赤 border を burgundy に上書き */
body #fc-thum-over img{
	transition: border-bottom-color .1s;
}
body #fc-thum-over img[style*="border-bottom"]{
	border-bottom-color: #a9171d !important;
}

/* 詳細ページの主要メタ列（ul.detail-info）: 2026-11-06 に表組み（.fc-spec・ファイル末尾）へ変更 */
/* h-tag 内の罫線も無効化（rlist のカード枠は末尾の節で指定） */
body .article h3,
body .article h4,
body .article h5{
	border-bottom: none !important;
	border-top: none !important;
}

/* =============================================================================
   2026-05-09 スマホヘッダの重なり修正 (Issue #3 v2)
   元の CSS は #h-top を絶対配置 (.alignleft = title 左固定, .alignright = nav 右固定)
   にしていたが、これだと右側 nav の幅が title 領域を侵食する (max-width で予約幅を
   切っても、nav の実幅を予測するのが困難)。
   スマホでは flex レイアウトに切り替えて、title が自然に右側 nav の幅に合わせて
   shrink + ellipsis されるようにする。
   ============================================================================= */
@media (max-width: 480px) {
	/* #h-top を flex に。title (.alignleft) が伸縮、nav (.alignright) は固定幅 */
	body #h-top{
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px !important;
		gap: 8px;
	}
	/* タイトル: 絶対配置を解除し、flex item として伸縮 */
	body #h-top .alignleft,
	body #h-top .alignleft.top-title-catchphrase{
		position: static !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		flex: 1 1 auto;
		min-width: 0;            /* これが無いと flex 内で text-overflow が効かない */
		overflow: hidden;
		margin: 0 !important;
	}
	/* 右側 nav (ハンバーガー or fc-rank-user-nav): 絶対配置を解除し、コンテンツ幅で固定 */
	body #h-top #mobile-menu,
	body #h-top .alignright{
		position: static !important;
		transform: none !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		flex: 0 0 auto;
		margin: 0 !important;
		white-space: nowrap;
	}
	body #h-top #site-title{
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden;
	}
	/* タイトル <a>: ellipsis + フォントを少し縮小 (22px → 17px) */
	body #h-top #site-title a,
	body.home #h-top #site-title a{
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 17px !important;
		letter-spacing: .02em !important;
	}
	/* fc-rank-user-nav の各リンクのフォント・余白を smaller に (右側の占有幅を削減) */
	body #h-top .fc-rank-user-nav a{
		font-size: .82em !important;
		padding: .15em .5em !important;
	}
}
/* さらに極小画面 (≤ 360px、iPhone SE 等) ではフォントを更に縮小 */
@media (max-width: 360px) {
	body #h-top #site-title a,
	body.home #h-top #site-title a{
		font-size: 15px !important;
	}
	body #h-top .fc-rank-user-nav a{
		font-size: .75em !important;
		padding: .1em .35em !important;
	}
}

/* =============================================================================
   2026-06-22 可読性: カタログの行間に余白を持たせる
   テーマ標準の line-height 1.2 が詰まって見えるため、本文コンテンツ(#main)の行間を広げる。
   記事本文(.article p)は別途 1.7 済みで影響なし。カタログ詳細/一覧の発売日・メーカー・
   各種ボタン行はインライン line-height:120% を持つため、#main 配下に限定して上書きする。
   ============================================================================= */
#main{ line-height: 1.7; }
#main li,
#main td{ line-height: 1.7; }
#main .fc-title{ line-height: 1.5 !important; margin-bottom: 6px !important; }
#main [style*="line-height:120%"]{ line-height: 1.6 !important; margin-bottom: 8px !important; }

/* =============================================================================
   2026-07-04 記事(投稿)テンプレの可読性改善
   - 本文列を読みやすい行長(約42字)に制限。single post のみ対象で、
     カタログ/固定ページ (body.page) には影響しない
   - 目次 (.fc-toc): functions.php の目次自動生成フィルタが挿入する
   - 記事用共通コンポーネント: .fc-note (注記box) / .fc-say (会話吹き出し) / 投稿内テーブル
   ============================================================================= */

/* 本文列の行長制限 (デスクトップで 1070px 幅いっぱいに広がるのを防ぐ) */
body.single-post .article{
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* 目次 */
.fc-toc{
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 16px 20px;
	margin: 1.5em 0 2em;
}
.fc-toc-title{
	font-weight: 600;
	color: #333;
	margin: 0 0 .6em;
	font-size: 1em;
}
.fc-toc ol{
	margin: 0;
	padding-left: 1.4em;
}
.fc-toc li{
	margin: .3em 0;
	line-height: 1.6;
}
.fc-toc a{
	color: #2098A8;
	text-decoration: none;
}
.fc-toc a:hover{
	color: #a9171d;
	text-decoration: underline;
}

/* 注記ボックス (「この記事について」等の前置き) */
.article .fc-note{
	background: #faf6f6;
	border-left: 4px solid #a9171d;
	border-radius: 4px;
	padding: 14px 18px;
	margin: 0 0 2em;
	font-size: .95em;
}
.article .fc-note p{ margin: 0 0 .5em; }
.article .fc-note p:last-child{ margin-bottom: 0; }
.article .fc-note .fc-note-title{
	font-weight: 600;
	color: #a9171d;
}

/* 会話吹き出し (AI審査員シリーズの回答引用など)
   <div class="fc-say"><span class="fc-say-name">PLaMo</span>
     <div class="fc-say-body"><p>…</p></div></div>
   .fc-say-q を足すとこちら側の出題 (burgundy 淡色) */
.article .fc-say{
	margin: 1.2em 0;
}
.article .fc-say .fc-say-name{
	display: inline-block;
	font-size: .8em;
	font-weight: 600;
	color: #666;
	margin: 0 0 4px 8px;
}
.article .fc-say .fc-say-body{
	background: #f2f4f7;
	border-radius: 12px;
	padding: 12px 16px;
}
.article .fc-say .fc-say-body p{ margin: 0 0 .6em; }
.article .fc-say .fc-say-body p:last-child{ margin-bottom: 0; }
.article .fc-say.fc-say-q .fc-say-body{
	background: #f9ecec;
}

/* 投稿内テーブル (判定表など)。カタログ側の表は single-post 外なので影響しない */
body.single-post .article table{
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
	margin: 1.2em 0;
}
body.single-post .article th,
body.single-post .article td{
	border: 1px solid #ddd;
	padding: 8px 10px;
	line-height: 1.5;
}
body.single-post .article th{
	background: #f5f5f5;
	font-weight: 600;
}

/* =============================================================================
   2026-11-06 カタログのデザイン改善（案B）
   - 対象: /fc-db/・/nes-db/ トップ（ボタン型リンク・人気40本・開閉式の枠）
   - 余白の段（内側ほど狭く外側ほど広く）: 要素間 8px ＜ まとまりの中 12px ＜ 枠の内側 16〜20px
   - 色: アクセント burgundy #a9171d、文字 #222/#333、補足 #777、線 #e3e3e3
   ============================================================================= */
:root{
	--fc-accent: #a9171d;
	--fc-accent-weak: #faf3f3;
	--fc-line: #e3e3e3;
	--fc-muted: #777;
	--fc-s-line: 8px;
	--fc-s-inner: 12px;
	--fc-s-pad: 16px;
	--fc-radius: 6px;
}

/* ボタン型リンク（/fc-db/ の「〜から探す」）: <p class="fc-chips"><a>名前<span class="fc-chip-n">件数</span></a> … */
.article .fc-chips{
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-s-line);
	margin: 0 0 var(--fc-s-pad);
}
.article .fc-chips a{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: #fff;
	color: #222;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}
.article .fc-chips a:hover{
	border-color: var(--fc-accent);
	background: var(--fc-accent-weak);
	color: var(--fc-accent);
}
.article .fc-chips .fc-chip-n{
	font-size: .8em;
	font-weight: normal;
	color: var(--fc-muted);
}

/* 人気40本（[stFcPopularList]）: 順位バッジ＋タイトル＋2行目に年・メーカー・本数 */
ol.fc-popular-list{
	list-style: none;
	counter-reset: fcrank;
	columns: 2;
	column-gap: 32px;
	margin: 0 0 var(--fc-s-pad);
	padding: 0;
	border-top: 1px solid var(--fc-line);
}
ol.fc-popular-list li{
	counter-increment: fcrank;
	break-inside: avoid;
	display: grid;
	grid-template-columns: 28px 1fr;
	column-gap: var(--fc-s-inner);
	align-items: center;
	padding: 10px 4px;
	margin: 0;
	border-bottom: 1px solid var(--fc-line);
	line-height: 1.5;
}
ol.fc-popular-list li::before{
	content: counter(fcrank);
	grid-row: 1 / span 2;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f0f0f0;
	color: #555;
	font-size: .82em;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
ol.fc-popular-list li:nth-child(-n+3)::before{
	background: var(--fc-accent);
	color: #fff;
}
ol.fc-popular-list li a{
	color: #222;
	font-weight: 600;
	text-decoration: none;
}
ol.fc-popular-list li a:hover{
	color: var(--fc-accent);
	text-decoration: underline;
}
ol.fc-popular-list .fc-popular-meta{
	display: block;
	font-size: .8em;
	color: var(--fc-muted);
	line-height: 1.4;
}
@media screen and (max-width: 639px){
	ol.fc-popular-list{ columns: 1; }
}

/* 開閉式の枠（[stFcSearchTop] の dl.slist）: 見出し行＋開くと項目が上と同じボタン型で並ぶ（50音だけ5列の表） */
body .slist{
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-s-line);
	margin: 0 0 var(--fc-s-line);
}
body .slist dt,
body .slist dd.list-close{
	flex: 0 0 100%;
}
body .slist dt{
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	padding: 14px 48px 14px 18px;
	font-size: 1em;
	font-weight: 600;
	background: #fff;
	color: #222;
	transition: border-color .15s, color .15s, background-color .15s;
}
body .slist dt:hover{
	border-color: var(--fc-accent);
	background: var(--fc-accent-weak);
	color: var(--fc-accent);
}
body .slist dd{
	float: none;
	width: auto;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
body .slist dd a{
	display: inline-flex;
	align-items: baseline;
	padding: 7px 14px !important;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: #fff;
	color: #222;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}
body .slist dd a.right-arrow:after{
	content: none;
}
body .slist dd a:hover{
	border-color: var(--fc-accent);
	background: var(--fc-accent-weak);
	color: var(--fc-accent);
}
body .slist dd.list-close{
	padding: 4px;
	text-align: center;
	font-size: .85em;
	color: var(--fc-muted);
	cursor: pointer;
}
body .slist.j50{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}
body .slist.j50 dt,
body .slist.j50 dd.list-close{
	grid-column: 1 / -1;
}
body .slist.j50 dd a{
	display: block;
	text-align: center;
	border-radius: var(--fc-radius);
}
body .slist.j50 dd.pad5{
	background: #f7f7f7 !important;
	border-radius: var(--fc-radius);
	color: #bbb;
	padding: 8px 0 !important;
	text-align: center;
}
body .slist.j50 dd.row_b_left{
	border-right: none;
}

/* --- 詳細ページ（[stFcDetail]） --- */
/* 小見出し（〜で遊ぶには／シリーズ／こんなソフトもチェック／NES版）: h2 と同じ左線で一段小さく */
body .article .shomidashi{
	margin: 40px 0 var(--fc-s-inner);
	padding: .1em .7em;
	border: none;
	border-left: 4px solid var(--fc-accent);
	color: #333;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.4;
}

/* 基本情報の表（ul.detail-info.fc-spec）: 左に項目名、右に値 */
body .article ul.fc-spec{
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fc-line);
}
body .article ul.fc-spec li{
	display: grid;
	grid-template-columns: 6.5em 1fr;
	column-gap: var(--fc-s-pad);
	align-items: baseline;
	margin: 0;
	padding: 12px 4px;
	border: none;
	border-bottom: 1px solid var(--fc-line) !important;
	line-height: 1.7;
}
body .article ul.fc-spec .fc-spec-k{
	color: var(--fc-muted);
	font-size: .85em;
	font-weight: 600;
}
body .article ul.fc-spec .fc-spec-v{
	min-width: 0;
	overflow-wrap: anywhere;
	color: #222;
}
body .article ul.fc-spec .fc-spec-sub{
	font-size: .85em;
}
body .article ul.fc-spec .fc-spec-src{
	display: block;
	margin-top: 2px;
	font-size: .75em;
	color: var(--fc-muted);
}

/* 買う（楽天・主ボタン）／売る（駿河屋・レトログ・枠線ボタン） */
body .article .rakuten-search-block{
	max-width: 600px;
	margin: 28px 0 0;
}
body .article .rakuten-search-block .rakuten-search-btn{
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--fc-radius);
	box-shadow: none;
	text-align: center;
}
body .article .fc-sell{
	max-width: 600px;
	margin: 20px 0 0;
}
body .article .fc-sell-title{
	margin: 0 0 var(--fc-s-line);
	font-size: .85em;
	font-weight: 600;
	color: var(--fc-muted);
}
body .article .fc-sell-btns{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fc-s-line);
}
body .article .fc-sell-btns > div{
	margin: 0;
}
body .article .fc-sell .fc-sell-btn,
body .article .fc-sell .retrog-kaitori-block a{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #bbb;
	border-radius: var(--fc-radius);
	background: #fff;
	color: #222 !important;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
body .article .fc-sell .fc-sell-btn:hover,
body .article .fc-sell .retrog-kaitori-block a:hover{
	border-color: #222;
	background: #fafafa;
}
body .article .fc-sell-note{
	margin: 4px 0 0;
	font-size: .75em;
	line-height: 1.5;
	color: var(--fc-muted);
	text-align: center;
}
@media (max-width: 480px){
	body .article .fc-sell-btns{ grid-template-columns: 1fr; }
}

/* 〜で遊ぶには: ボタン型（.fc-chips）＋注記 */
body .article .fc-chips:has(+ .fc-play-note){
	margin-bottom: var(--fc-s-line);
}
body .article .fc-play-note{
	margin: 0;
	font-size: .75em;
	line-height: 1.5;
	color: var(--fc-muted);
}
/* レトログの計測ピクセル(1×1)にテーマの margin:auto が付き、文字が左に寄るのを防ぐ（リンクコード自体は無改変） */
body .article .fc-sell .retrog-kaitori-block a img{
	margin: 0;
}
/* お気に入り（fc-ranking が差し込む .fc-rank-fav-wrap）: 枠を外して画像の下の操作行にする */
body .article .fc-rank-fav-wrap{
	margin: 20px 0 12px;
	padding: 0;
	background: none;
	border: none;
}

/* --- 一覧のカード（ul.rlist: 一覧ページ／詳細ページのシリーズ・関連ソフト・NES版） --- */
body .article ul.rlist{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 10px;
	margin: 0 0 var(--fc-s-pad);
	padding: 0;
}
body .article ul.rlist li{
	display: block;
	width: auto;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
body .article ul.rlist li:hover{
	border-color: var(--fc-accent);
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body .article ul.rlist li img[loading]{
	border-radius: 4px;
}
body .article .rlist .fc-title{
	margin: 0 0 4px !important;
	font-size: 1em;
	line-height: 1.45 !important;
}
body .article .rlist .fc-title a{
	color: #222;
}
body .article .rlist .fc-title a:hover{
	color: var(--fc-accent);
}
body .article .rlist .fc-row-maker,
body .article .rlist .fc-row-date{
	font-size: .85em;
	line-height: 1.5;
}
body .article .rlist .fc-row-date{
	color: var(--fc-muted);
}
body .article .rlist .fc-row-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
body .article .rlist .fc-row-actions:empty{
	display: none;
}
body .article .rlist .tubeicon{
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 3px 8px 3px 26px;
	border: 1px solid var(--fc-accent);
	border-radius: 4px;
	color: var(--fc-accent);
	font-size: .8em;
	line-height: 1.4;
	text-decoration: none;
}
body .article .rlist .tubeicon:before{
	left: 7px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.15em;
	line-height: 1;
}
body .article .rlist .rakuten-search-btn--compact{
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: .8em;
	line-height: 1.4;
}