@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 手風琴ヘッダー: 角丸 + 余白整理 */
body .slist dt{
	border: solid 1px #ddd;
	border-radius: 4px;
	padding: 12px 18px;
	margin-bottom: 4px;
	font-size: 110%;
	background: #fff;
	transition: background-color .15s, color .15s, border-color .15s;
}
body .slist dt:hover{
	background-color: #a85253;
	border-color: #a85253;
	color: #fff;
}
body .slist dt.down-arrow{
	border-radius: 4px 4px 0 0;
	margin-bottom: 0;
}

/* slist 手風琴ボディ */
body .slist dd{
	border: solid 1px #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
	padding: 8px 12px;
	margin-bottom: 8px;
	background: #fafafa;
}
body .slist dd a{
	border-radius: 4px;
	padding: 6px 10px;
	transition: background-color .15s, color .15s;
}
body .slist dd a:hover{
	background-color: #a85253;
	color: #fff;
}

/* 結果リスト (.rlist): カード化して視認性を上げる */
body .rlist li{
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px 12px;
	margin-bottom: 6px;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
body .rlist li:hover{
	border-color: #a9171d;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
body .rlist .fc-title a{
	color: #222;
}
body .rlist .fc-title a:hover{
	color: #a9171d;
}

/* YouTube バッジ: クラッシュする青 #54A2C9 を burgundy に揃える */
body .tubeicon{
	border: 1px solid #a9171d;
	border-radius: 4px;
	color: #a9171d;
}

/* 詳細ページ画像選択時の 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;
}

/* 詳細ページの主要メタ列: 線は完全に削除 */
body ul.detail-info,
body ul.detail-info li{
	border: none !important;
	padding: 6px 4px;
}
/* h-tag や rlist 内の罫線も無効化 */
body .article ul.detail-info li,
body .article .rlist li,
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;
	}
}