@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon
Version: 1.1.2
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*---------------------------------
複数の固定ページの日付を非表示にする、おまじない
--------------------------------*/
.post-181 .date-tags,
.post-3209 .date-tags,
.post-3498 .date-tags,
.post-3 .date-tags {
display: none;
}
/*---------------------------------
固定ページ記事タイトル非表示
--------------------------------*/
.type-page h1,
.type-page
.post-meta{
display:none;
}
/*---------------------------------
グローバルメニューにアンダーライン
--------------------------------*/
/*カレントメニュー*/
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
border-bottom: 1px solid #fa884b; /*下線色*/
background: #fff; /*背景色*/
}
.menu-header .current-menu-item .item-label,
.menu-header .current-post-item .item-label,
.menu-header .current-menu-ancestor .item-label,
.menu-header .current-post-ancestor .item-label,
.menu-header .menu-item .item-label:hover {
color:#fa4b97; /*文字色*/
}
/*---------------------------------
サムネイルの左上部カテゴリー消す
--------------------------------*/
.cat-label {
display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/***************************************************************
** HUD系デザイン ダークテーマ（2026-08-03、第一段階：配色のみ）
** Claude Codeとの相談で決めた近未来HUD風の配色を、Cocoonの既存
** 構造（テンプレートは未変更）にCSSだけで適用する。
** ヒーロー・タイル一覧などの新要素はまだ含まない（別途対応）。
***************************************************************/
:root{
--hud-bg-deep:#05070b;
--hud-panel:#0b121b;
--hud-panel-2:#0f1a26;
--hud-cyan:#35d6e8;
--hud-cyan-dim:#124a53;
--hud-cyan-line:#1c5964;
--hud-ink:#dff7fa;
--hud-ink-muted:#93a9b5;
--hud-amber:#f5e642;
--hud-amber-dim:#6b6218;
--hud-magenta:#ff3fa4;
--hud-magenta-dim:#7a1a52;
--hud-green:#3dffa0;
--hud-blue:#3d7cff;
}
html, body, #container{
background-color: var(--hud-bg-deep) !important;
background-image:
linear-gradient(var(--hud-cyan-line) 1px, transparent 1px),
linear-gradient(90deg, var(--hud-cyan-line) 1px, transparent 1px) !important;
background-size: 34px 34px !important;
}
body, #content, .article, .entry-content, #main, .content-in{
color: var(--hud-ink) !important;
}
/* ヘッダー・ナビ */
#header, #header-container{
background-color: rgba(5,7,11,0.9) !important;
border-bottom: 1px solid var(--hud-cyan-dim);
}
/* ヘッダー内側の枠（.wrap）はCocoon標準で幅1256px固定＋中央寄せのため、
画面が広いと左側に余白ができ、ロゴを左寄せにしても画面端までは届かない。
ヘッダーだけ枠を画面幅いっぱいに広げて解消する（2026-08-06追加）。 */
#header-in.wrap{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
.site-name-text, .site-name-text a{
color: var(--hud-cyan) !important;
}
/* ヘッダーロゴ帯: 白背景が焼き込み済みの写真バナー（top-04.png）はやめて、
他のHUD見出しと統一感のあるテキストロゴに変更（2026-08-06、ユーザー指示で
額縁案から変更）。2026-08-07に画像ロゴへの差し替えを試したが、画像側の
フォントがイメージと違うとのことで、このテキストロゴに戻した
（画像自体は`images/header-logo.png`にそのまま残してあるので、
デザイン違いの画像を再度作った場合はまた差し替えられる）。
画像は非表示にし、既存の.site-name-text要素にテキストを表示する。 */
.logo.logo-header.logo-image{
padding: 18px 16px !important;
background-color: var(--hud-bg-deep);
text-align: left !important; /* Cocoon標準の.logo{text-align:center}を上書き */
}
.logo.logo-header.logo-image .site-logo-image{
display: none !important;
}
.logo.logo-header.logo-image .site-name-text::before{
content: "AME.MAME.BAR";
display: block;
text-align: left;
font-family: 'Orbitron', 'JetBrains Mono', Consolas, monospace;
font-size: 22px;
font-weight: 700;
letter-spacing: 2px;
color: var(--hud-cyan);
text-shadow: 0 0 8px rgba(53, 214, 232, 0.7);
}
.logo.logo-header.logo-image .site-name-text::after{
content: "Nostalgic Finder from 90's";
display: block;
text-align: left;
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 11px;
letter-spacing: 1px;
color: var(--hud-ink-muted);
margin-top: 3px;
}
/* フッター下部のマスコットロゴ画像（fto-04.png）・標準メニュー
（HOME/Sitemap/Privacy-Policy/Contact）・著作権表記は非表示に
（2026-08-06、ユーザー指示）。同じ内容は下の.hud-footer-panelに
まとめて表示するため、標準フッター側の.footer-bottom全体を隠す形にした。 */
.footer-bottom{
display: none !important;
}
/* PAGE TOPボタン（Cocoon標準は水色地で、暗いテーマと合わなかったため2026-08-06追加） */
.page-top a{
background-color: var(--hud-bg-deep) !important;
color: var(--hud-cyan) !important;
border-top: 1px solid var(--hud-cyan-dim) !important;
}
.page-top a:hover{
color: var(--hud-ink) !important;
background-color: var(--hud-panel-2) !important;
}
#navi{
background-color: transparent !important;
border-top: none !important;
}
.menu-header .item-label{
color: var(--hud-ink-muted) !important;
}
.menu-header .menu-item:hover .item-label,
.menu-header .current-menu-item .item-label,
.menu-header .current-post-item .item-label{
color: var(--hud-cyan) !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover{
border-bottom: 1px solid var(--hud-cyan) !important;
background: transparent !important;
}
/* 記事・サイドバーを包む土台（スマホのスライドメニュー内の複製も含む） */
#main, #sidebar, .sidebar, .navi-menu-content, .sidebar-menu-content{
background-color: var(--hud-bg-deep) !important;
}
/* 記事エリア（本文） */
.article, .entry-content{
background-color: var(--hud-panel) !important;
border: 1px solid var(--hud-cyan-dim) !important;
}
/* HUDパネル（個別ブロックを囲む枠。四隅に鍵カッコの装飾） */
.hud-panel{
position: relative;
background-color: var(--hud-panel-2);
border: 1px solid var(--hud-cyan-dim);
padding: 16px;
margin: 20px 0;
}
.hud-panel::before, .hud-panel::after{
content: "";
position: absolute;
pointer-events: none;
z-index: 2;
inset: 0;
background-repeat: no-repeat;
}
/* 四隅の鍵カッコ（HUDパネル風）: ::beforeで左上・右下、::afterで右上・左下 */
.hud-panel::before{
background-image:
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan));
background-size:
14px 2px,
2px 14px,
14px 2px,
2px 14px;
background-position:
top -1px left -1px,
top -1px left -1px,
bottom -1px right -1px,
bottom -1px right -1px;
}
.hud-panel::after{
background-image:
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan));
background-size:
14px 2px,
2px 14px,
14px 2px,
2px 14px;
background-position:
top -1px right -1px,
top -1px right -1px,
bottom -1px left -1px,
bottom -1px left -1px;
}
.hud-panel > *:first-child{ margin-top: 0; }
.hud-panel > *:last-child{ margin-bottom: 0; }
.entry-content a{
color: var(--hud-cyan) !important;
}
.entry-title{
color: var(--hud-ink) !important;
}
.wp-block-heading{
color: var(--hud-ink) !important;
}
.entry-content h2, .entry-content h3, .entry-content h4,
.entry-content .wp-block-heading{
border-color: var(--hud-cyan-dim) !important;
}
.entry-content h3 + p{
margin-top: 6px !important;
font-size: 13px !important;
color: var(--hud-ink-muted) !important;
}
/* キット名見出し（h3、赤背景バナーの直後にある「1/35 ○○（再販版）」等）を
サイバー系に（2026-08-06）。ボックスアート等のセクション見出しはh4なので
ここでは影響しない */
.entry-content h3.wp-block-heading{
color: var(--hud-amber, #f5e642) !important;
font-family: 'RocknRoll One', 'JetBrains Mono', Consolas, monospace !important;
letter-spacing: 0.04em !important;
margin-top: 28px !important;
}
.entry-content h3.wp-block-heading::before{
content: "▶";
display: inline-block;
margin-right: 8px;
font-size: 1.15em;
color: var(--hud-amber, #f5e642);
text-shadow: 0 0 3px rgba(245, 230, 66, 0.5);
}
/* セクション見出し（h4、「ボックスアート」「箱の側面」「ランナー」等）は
キット名見出し（h3、黄色＋矢印）とはっきり区別できるデザインに（2026-08-06）。
色はシアン、マーカーは◆、下線付きのラベル風にして階層を分ける */
.entry-content h4.wp-block-heading{
color: var(--hud-cyan, #35d6e8) !important;
font-family: 'JetBrains Mono', Consolas, monospace !important;
letter-spacing: 0.08em !important;
border-bottom: 1px dashed var(--hud-cyan-dim, #124a53) !important;
padding-bottom: 6px !important;
margin-top: 24px !important;
}
.entry-content h4.wp-block-heading::before{
content: "◆";
display: inline-block;
margin-right: 6px;
font-size: 0.7em;
color: var(--hud-cyan, #35d6e8);
}
/* 「BOX ART」「BOX SIDE」見出し末尾の点滅■（2026-08-08追加、
section-image-scroll.jsが元の日本語見出し「ボックスアート」「箱の側面」を
英語表記に差し替えた上で末尾に付け足す。DB上の本文は日本語のまま）。 */
.hud-heading-cursor{
display: inline-block;
width: 0.7em;
height: 1em;
background: var(--hud-cyan, #35d6e8);
margin-left: 6px;
vertical-align: -0.13em;
}
/* 元の見出し（ランナー・デカール等）をまとめた小さいラベル
（section-image-scroll.jsが生成。2026-08-06追加）。2026-08-08に一度
シアン＋点滅カーソルを試したが、ユーザー指示で黄色・点滅無しに戻した。 */
.hud-img-scroll-label{
color: var(--hud-amber, #f5e642) !important;
font-family: 'JetBrains Mono', Consolas, monospace !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
margin: 20px 0 4px !important;
}
/* h4見出し直後の画像群をまとめる横スクロール枠（section-image-scroll.jsが
ここにfigureを移動させる。2026-08-06追加） */
.hud-img-scroll{
display: flex;
gap: 12px;
overflow-x: auto;
padding: 4px 4px 12px;
margin: 8px 0 20px;
cursor: grab;
scrollbar-width: thin;
scrollbar-color: var(--hud-cyan, #35d6e8) var(--hud-panel-2, #0f1a26);
}
.hud-img-scroll::-webkit-scrollbar{
height: 8px;
}
.hud-img-scroll::-webkit-scrollbar-track{
background: var(--hud-panel-2, #0f1a26);
}
.hud-img-scroll::-webkit-scrollbar-thumb{
background: var(--hud-cyan, #35d6e8);
border-radius: 4px;
}
.hud-img-scroll::-webkit-scrollbar-thumb:hover{
background: var(--hud-amber, #f5e642);
}
.hud-img-scroll.is-dragging{
cursor: grabbing;
user-select: none;
}
.hud-img-scroll.is-dragging *{
pointer-events: none;
}
.hud-img-scroll figure.wp-block-image{
position: relative;
flex: 0 0 auto;
margin: 0 !important;
}
.hud-img-scroll figure.wp-block-image img{
height: 260px !important;
width: auto !important;
max-width: none !important;
display: block;
}
/* キャプション（ファイル名等）が画像より横長だと枠が広がり画像の左右に
隙間ができるため、画像の下に重ねて表示することで幅の影響を無くす
（2026-08-06） */
.hud-img-scroll figure.wp-block-image figcaption{
position: absolute;
left: 0;
right: 0;
top: 0;
margin: 0 !important;
padding: 3px 6px !important;
background: rgba(5, 7, 11, 0.75) !important;
color: var(--hud-ink, #dff7fa) !important;
font-size: 11px !important;
white-space: normal;
text-align: center;
}
/* トップページ一番上のタイトル（AME-MAME-BAR HEAD OFFICE）の文字装飾のみ
（枠・背景は付けない。ユーザーの意向で外した）。
2026-08-04、この見出しだけ「もっとサイバーな感じ」の指示でOrbitronに変更
（他の場所のJetBrains Monoはそのまま） */
.post-181 .entry-content > h2.wp-block-heading{
font-family: 'Orbitron', 'JetBrains Mono', Consolas, monospace;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--hud-cyan) !important;
background: transparent !important;
margin: 4px 0 10px !important;
}
.post-181 .entry-content > p.has-text-align-center:first-of-type{
font-size: 13px;
color: var(--hud-ink-muted);
letter-spacing: 0.04em;
margin: 0 0 4px;
}
/* トップページ ヒーロー（PICK UP、デザイン案通り：画像とテキストの横並びパネル） */
.hud-hero-panel{
padding: 0 !important;
overflow: hidden;
}
.hud-hero-inner{
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px){
.hud-hero-inner{ grid-template-columns: 1fr; }
}
.hud-hero-art{
position: relative;
min-height: 260px;
border-right: 1px solid var(--hud-cyan-dim);
background: var(--hud-panel-2);
}
.hud-hero-art img{
position: absolute;
top: 12px;
left: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
object-fit: cover;
}
.hud-hero-text{
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.hud-hero-eyebrow{
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 11px;
color: var(--hud-cyan);
letter-spacing: 0.14em;
margin: 0;
}
.hud-hero-title{
font-size: 20px;
font-weight: 500;
color: var(--hud-ink);
margin: 0;
}
.hud-hero-desc{
font-size: 13px;
color: var(--hud-ink-muted);
line-height: 1.7;
margin: 0;
}
.hud-hero-cta{
margin-top: 4px;
align-self: flex-start;
border: 1px solid var(--hud-cyan);
color: var(--hud-cyan);
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 12px;
padding: 7px 16px;
text-decoration: none;
letter-spacing: 0.08em;
}
.hud-hero-cta:hover{
background: var(--hud-cyan);
color: var(--hud-bg-deep);
}
/* 新着レビュー（最新の投稿ブロックをカード風に再スタイル。中身は自動更新のまま） */
.wp-block-latest-posts.is-grid{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 12px !important;
}
.wp-block-latest-posts.is-grid > li{
background: var(--hud-panel-2);
border: 1px solid var(--hud-cyan-line);
padding: 10px;
margin: 0 !important;
}
.wp-block-latest-posts__featured-image{
float: none !important;
margin: 0 0 8px !important;
width: auto !important;
}
.wp-block-latest-posts__featured-image img{
width: 100% !important;
height: 110px !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
display: block !important;
}
.wp-block-latest-posts li > a{
display: block;
font-size: 13px;
font-weight: 500;
color: var(--hud-ink) !important;
text-decoration: none !important;
line-height: 1.5;
}
.wp-block-latest-posts li > a:hover{
color: var(--hud-cyan) !important;
}
.wp-block-latest-posts__post-date{
display: block;
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 10px;
color: var(--hud-ink-muted) !important;
margin-top: 4px;
}
/* 新着レビュー（[hud_latest_reviews]ショートコード）カード */
.hud-review-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:12px;
}
.hud-review-card{
display:block;
background:var(--hud-panel-2);
border:1px solid var(--hud-cyan-line);
padding:10px;
text-decoration:none !important;
color:var(--hud-ink);
}
.hud-review-grade{
display:inline-block;
font-family:'JetBrains Mono',Consolas,monospace;
font-size:10px;
color:var(--hud-cyan);
border:1px solid var(--hud-cyan-dim);
padding:1px 6px;
margin-bottom:6px;
}
.hud-review-grade--empty{
visibility:hidden;
}
.hud-review-thumb{
height:90px;
margin-bottom:8px;
overflow:hidden;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
}
.hud-review-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.hud-review-card h3{
margin:0 0 4px;
font-size:13px;
font-weight:500;
line-height:1.5;
color:var(--hud-ink);
border:none !important;
}
.hud-review-card:hover h3{
color:var(--hud-cyan);
}
.hud-review-card time{
font-family:'JetBrains Mono',Consolas,monospace;
font-size:10px;
color:var(--hud-ink-muted);
}
/* パネル内の見出し（NEW REVIEWS・YouTube Channel・Search for plastic models）
左右にひし形マーカーを添えて挟む形にする（2026-08-04、ユーザー指示で右側も追加） */
.hud-panel > h3.wp-block-heading::before,
.hud-panel > h3.wp-block-heading::after{
content:"";
display:inline-block;
width:6px;
height:6px;
margin-bottom:1px;
background:var(--hud-cyan);
transform:rotate(45deg);
}
.hud-panel > h3.wp-block-heading::before{
margin-right:8px;
}
.hud-panel > h3.wp-block-heading::after{
margin-left:8px;
}
/* パネル見出し3つ（Search for plastic models・YouTube Channel・NEW REVIEWS）は
色々試した結果、最終的に全部AME-MAME-BAR HEAD OFFICEと同じOrbitronで統一
（2026-08-04、ユーザー指示。RocknRoll One・DotGothic16・Monomaniac Oneを
個別に試した経緯があったため、クラス名は残しつつフォントは共通化） */
.hud-heading-tiles,
.hud-heading-youtube,
.hud-heading-reviews,
.hud-heading-scale,
.hud-heading-annex{
font-family: 'Orbitron', 'JetBrains Mono', Consolas, monospace;
}
/* [hud_annex_updates]ショートコード（資料室別館の更新情報、トップページ
最下部・サイドバー共通）。既存の.hud-panel（トップページ）にそのまま
入れても浮かないよう、装飾は最小限のシンプルな箇条書きにしている。 */
.hud-annex-updates{
list-style: none;
margin: 12px auto 0;
padding: 0;
max-width: 640px;
width: fit-content;
}
.hud-annex-updates li{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
padding: 8px 4px;
border-bottom: 1px dashed var(--hud-cyan-dim);
font-size: 13px;
}
.hud-annex-updates li:last-child{
border-bottom: none;
}
.hud-annex-updates-date{
color: var(--hud-ink-muted);
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 12px;
flex: 0 0 auto;
}
.hud-annex-updates-tag{
color: var(--hud-bg-deep);
background-color: var(--hud-cyan);
font-size: 11px;
padding: 1px 6px;
flex: 0 0 auto;
}
.hud-annex-updates a{
color: var(--hud-cyan) !important;
text-decoration: none;
}
.hud-annex-updates a:hover{
text-decoration: underline;
}
/* サイドバーウィジェット内は幅が狭いため、日付・タグを縦積みにして
タイトルの折り返しを優先する */
.widget .hud-annex-updates li{
font-size: 12px;
}
/* KIT DATAなどの表をパネル風に */
.entry-content table{
width: 90% !important;
margin: 4px auto 20px !important;
border-collapse: collapse !important;
background-color: var(--hud-panel-2) !important;
border: 1px solid var(--hud-cyan, #35d6e8) !important;
box-shadow: 0 0 8px rgba(53, 214, 232, 0.5), inset 0 0 12px rgba(53, 214, 232, 0.08) !important;
}
/* 「KIT DATA」等、表の直前にある見出し用の段落を表と同じ幅・左端に揃え、
表にくっつくくらい近づける */
.entry-content p:has(+ figure.wp-block-table){
width: 90% !important;
margin: 20px auto 2px !important;
}
.entry-content table td, .entry-content table th{
border: 1px dotted #2a8fa3 !important;
padding: 6px 10px !important;
color: var(--hud-ink) !important;
}
.entry-content table tr td:first-child,
.entry-content table tr th:first-child{
color: var(--hud-ink-muted) !important;
font-family: 'JetBrains Mono', Consolas, monospace !important;
font-size: 12px !important;
white-space: nowrap !important;
}
/* 映画チラシのキャスト表・スタッフ表など、Gutenbergで「中央寄せ」にした表
（figure.wp-block-table.aligncenter）向けの修正（2026-08-08）。
WordPress標準CSSがこのクラスの組み合わせをdisplay:tableにしてしまうため、
中の表（.entry-content table{width:90%}）が「figureの中身に合わせて縮んだ
幅」の90%という循環参照になり、実際には文字数ぎりぎりまで狭くなって
セル内が変な所で改行されていた。KIT DATA表などaligncenterの付かない表は
この対象外で今まで通り。ユーザー指定で幅は70%固定。 */
.entry-content figure.wp-block-table.aligncenter{
display: block !important;
width: 70% !important;
margin: 4px auto 20px !important;
}
.entry-content figure.wp-block-table.aligncenter table{
width: 100% !important;
margin: 0 !important;
}
.entry-content figure.wp-block-table.aligncenter td:not(:first-child),
.entry-content figure.wp-block-table.aligncenter th:not(:first-child){
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* メインサイト記事ページの「ターゲットロック」演出（2026-08-08追加、
js/target-lock.jsが要素を差し込む）。検討用サンプル（Artifact）のB案
（ターゲットロック）＋C案の「ARCHIVE.LOAD」ログ行を採用したもの。
ソフビ・プラレール・映画チラシ（single-retro-*.php）はentry-title/
cat-labelを使わないため、このCSSは影響しない。 */
.hud-lock-log{
display: flex;
gap: 8px;
align-items: baseline;
margin: 0 0 10px;
padding-left: 10px;
border-left: 2px solid var(--hud-cyan-dim, #123a44);
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--hud-ink-muted);
}
.hud-lock-log b{
color: var(--hud-cyan);
font-weight: 700;
}
.entry-title .hud-lock-prefix{
color: var(--hud-cyan);
font-family: 'JetBrains Mono', Consolas, monospace;
font-weight: 700;
}
/* js/target-lock.jsが![]()
だけをこのdivで包む（2026-08-08、figure全体に
付けると画像より横幅が広かったりキャプション分縦に長かったりして枠が
ずれる不具合の修正）。display:inline-blockで画像の実寸にぴったり合わせる。 */
.hud-lock-frame{
position: relative;
display: inline-block;
max-width: 100%;
}
.hud-lock-frame img{
display: block;
}
/* 四隅の照準ティックは::beforeにまとめて8レイヤーで描き、::afterを
スキャンラインのアニメーション専用に空けている。 */
.hud-lock-frame::before{
content: "";
position: absolute;
pointer-events: none;
z-index: 2;
inset: -14px;
background-repeat: no-repeat;
background-image:
linear-gradient(var(--hud-cyan), var(--hud-cyan)), linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)), linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)), linear-gradient(var(--hud-cyan), var(--hud-cyan)),
linear-gradient(var(--hud-cyan), var(--hud-cyan)), linear-gradient(var(--hud-cyan), var(--hud-cyan));
background-size:
22px 2px, 2px 22px,
22px 2px, 2px 22px,
22px 2px, 2px 22px,
22px 2px, 2px 22px;
background-position:
top 4px left 4px, top 4px left 4px,
top 4px right 4px, top 4px right 4px,
bottom 4px right 4px, bottom 4px right 4px,
bottom 4px left 4px, bottom 4px left 4px;
}
.hud-lock-frame::after{
content: "";
position: absolute;
pointer-events: none;
z-index: 2;
left: 10px;
right: 10px;
height: 1px;
background: var(--hud-cyan);
box-shadow: 0 0 8px 1px var(--hud-cyan);
opacity: 0.75;
animation: hud-lock-scan 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.hud-lock-frame::after{ animation: none; top: 50%; }
}
@keyframes hud-lock-scan{
0%, 100% { top: 14%; }
50% { top: 82%; }
}
.hud-lock-readout{
position: absolute;
z-index: 3;
left: 24px;
bottom: 24px;
background: rgba(5, 7, 11, 0.72);
border: 1px solid var(--hud-cyan-dim, #123a44);
padding: 6px 10px;
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 11px;
line-height: 1.6;
letter-spacing: 0.03em;
color: var(--hud-cyan);
}
.hud-lock-blink{
animation: hud-lock-blink 1.4s step-start infinite;
}
@media (prefers-reduced-motion: reduce){
.hud-lock-blink{ animation: none; }
}
@keyframes hud-lock-blink{
50% { opacity: 0; }
}
/* 記事下部のタグ一覧の枠を無くしてフラットに（2026-08-06） */
.entry-tags .tag-link.border-element,
.date-tags .tag-link.border-element{
border: none !important;
background: none !important;
padding: 0 !important;
margin: 0 0.8em 0.4em 0 !important;
}
.entry-tags .tag-link.border-element:hover,
.date-tags .tag-link.border-element:hover{
text-decoration: underline !important;
}
/* 記事上部の「1/35 scale」等のカテゴリーバッジも同様に枠・背景色を無くして
フラットに（2026-08-06）。Cocoon標準ではカテゴリーごとに自動で色が
割り当てられ、テーマの配色と合わないため統一する */
.entry-categories .cat-label,
.entry-categories .cat-link{
border: none !important;
background: none !important;
padding: 0 !important;
margin: 0 0.8em 0.4em 0 !important;
color: var(--hud-cyan, #35d6e8) !important;
}
.entry-categories .cat-link:hover{
text-decoration: underline !important;
}
/* 記事本文中の色付き見出し（シリーズ名バナー、Gutenbergの色パレット指定。
15種類以上の背景色（赤・indigo・watery-green等）が記事によってバラバラに
使われていることが判明したため、個別の色名を列挙せず、クラス名に
「-background-color」を含む見出し全部を対象にする汎用セレクターに変更
（2026-08-06）。元の文字色が何であってもシアンで上書きする。個別記事は
編集せず、この種の色指定を使っている記事すべてに一括で効く */
.entry-content h1[class*="-background-color"],
.entry-content h2[class*="-background-color"],
.entry-content h3[class*="-background-color"],
.entry-content h4[class*="-background-color"]{
position: relative;
background-color: var(--hud-panel-2, #0f1a26) !important;
border: 1px solid var(--hud-cyan-dim, #124a53) !important;
padding: 16px !important;
color: var(--hud-cyan, #35d6e8) !important;
font-family: 'RocknRoll One', 'JetBrains Mono', 'Consolas', monospace !important;
letter-spacing: 0.06em !important;
text-shadow: 0 0 8px rgba(53, 214, 232, 0.7), 0 0 16px rgba(53, 214, 232, 0.35) !important;
}
.entry-content h1[class*="-background-color"]::before,
.entry-content h2[class*="-background-color"]::before,
.entry-content h3[class*="-background-color"]::before,
.entry-content h4[class*="-background-color"]::before,
.entry-content h1[class*="-background-color"]::after,
.entry-content h2[class*="-background-color"]::after,
.entry-content h3[class*="-background-color"]::after,
.entry-content h4[class*="-background-color"]::after{
content: "";
position: absolute;
pointer-events: none;
z-index: 2;
inset: 0;
background-repeat: no-repeat;
}
.entry-content h1[class*="-background-color"]::before,
.entry-content h2[class*="-background-color"]::before,
.entry-content h3[class*="-background-color"]::before,
.entry-content h4[class*="-background-color"]::before{
background-image:
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8));
background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px;
background-position:
top -1px left -1px,
top -1px left -1px,
bottom -1px right -1px,
bottom -1px right -1px;
}
.entry-content h1[class*="-background-color"]::after,
.entry-content h2[class*="-background-color"]::after,
.entry-content h3[class*="-background-color"]::after,
.entry-content h4[class*="-background-color"]::after{
background-image:
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8)),
linear-gradient(var(--hud-cyan, #35d6e8), var(--hud-cyan, #35d6e8));
background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px;
background-position:
top -1px right -1px,
top -1px right -1px,
bottom -1px left -1px,
bottom -1px left -1px;
}
/* 本文中の区切り線（色付き
、多くの記事で共通）を中央寄せで縮め、
元の色に近いネオンカラーに統一（2026-08-06）。色無しの区切り線
（is-style-wide等）は今回は対象外 */
.entry-content hr.has-red-background-color,
.entry-content hr.has-blue-background-color,
.entry-content hr.has-pink-background-color,
.entry-content hr.has-lime-background-color{
width: 90% !important;
height: 1px !important;
margin: 24px auto !important;
border: none !important;
}
.entry-content hr.has-red-background-color{
background-color: var(--hud-blue, #3d7cff) !important;
box-shadow: 0 0 8px rgba(61, 124, 255, 0.7), 0 0 16px rgba(61, 124, 255, 0.35) !important;
}
.entry-content hr.has-blue-background-color{
background-color: var(--hud-cyan, #35d6e8) !important;
box-shadow: 0 0 8px rgba(53, 214, 232, 0.7), 0 0 16px rgba(53, 214, 232, 0.35) !important;
}
.entry-content hr.has-pink-background-color{
background-color: var(--hud-magenta, #ff3fa4) !important;
box-shadow: 0 0 8px rgba(255, 63, 164, 0.7), 0 0 16px rgba(255, 63, 164, 0.35) !important;
}
.entry-content hr.has-lime-background-color{
background-color: var(--hud-green, #3dffa0) !important;
box-shadow: 0 0 8px rgba(61, 255, 160, 0.7), 0 0 16px rgba(61, 255, 160, 0.35) !important;
}
/* 色無しの区切り線（is-style-wide等、デフォルトで白っぽく表示されるもの）も
同じ扱いにしてシアンのネオンカラーに統一（2026-08-06）。既に色指定が
ある区切り線には影響しないよう:not()で除外 */
.entry-content hr.wp-block-separator:not(.has-red-background-color):not(.has-blue-background-color):not(.has-pink-background-color):not(.has-lime-background-color){
width: 90% !important;
height: 1px !important;
margin: 10px auto !important;
border: none !important;
background-color: var(--hud-cyan, #35d6e8) !important;
box-shadow: 0 0 8px rgba(53, 214, 232, 0.7), 0 0 16px rgba(53, 214, 232, 0.35) !important;
}
/* サイドバー */
#sidebar .widget{
background-color: var(--hud-panel) !important;
border: 1px solid var(--hud-cyan-dim) !important;
color: var(--hud-ink) !important;
}
#sidebar .widget a{
color: var(--hud-ink-muted) !important;
}
#sidebar .widget a:hover{
color: var(--hud-cyan) !important;
}
/* サイドバー プロフィール（Cocoon標準の「プロフィール」ウィジェット）
アバター・名前・SNSアイコンをHUD配色に寄せる。
左側のヒーロー/タイルパネルと同じ明るいシアンの枠で囲み、
本文まで含めて等幅フォント（デジタル風）にしている */
#sidebar .widget_author_box{
border: 1px solid rgba(53,214,232,0.45) !important;
box-shadow: 0 0 4px rgba(53,214,232,0.12);
}
.author-thumb img{
border: 2px solid var(--hud-cyan) !important;
border-radius: 50% !important;
}
#sidebar .author-name a{
font-family: 'DotGothic16', 'MS Pゴシック', 'MS Gothic', sans-serif !important;
color: var(--hud-cyan) !important;
letter-spacing: 0.06em;
}
#sidebar .author-description p{
font-family: 'DotGothic16', 'MS Pゴシック', 'MS Gothic', sans-serif !important;
font-size: 12px;
line-height: 1.7;
letter-spacing: 0.02em;
}
.author-follows .follow-button{
background: transparent !important;
border: 1px solid var(--hud-cyan-dim) !important;
}
.author-follows .follow-button:hover{
border-color: var(--hud-cyan) !important;
filter: brightness(1.3);
}
/* シリーズ詳細ページの記事一覧を画像タイルでスケールごとに表示（2026-08-04）。
タイルは.hud-series-tile（フロントページのシリーズタイルと同じ見た目）を再利用。
標準のCocoon記事一覧（#list）はこのページでは非表示にして差し替える。
全体をトップページと同じ.hud-panel（四隅に鍵カッコ）で囲んでいる。 */
.series-scale-group-title{
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 13px;
color: var(--hud-cyan);
margin: 22px 0 10px;
padding-top: 14px;
border-top: 1px solid var(--hud-cyan-dim);
}
.series-scale-panel .series-scale-group-title:first-child{
margin-top: 0;
padding-top: 0;
border-top: none;
}
.series-scale-group-grid{
justify-content: flex-start;
}
/* 大見出し（例:「新キット」「旧キット」）。hud_family_children_is_grouped()が
trueのシリーズ（今のところガンダムのみ）でだけ使われる（2026-08-04追加） */
.series-supergroup-title{
font-family: 'Orbitron', 'JetBrains Mono', Consolas, monospace;
font-size: 16px;
letter-spacing: 0.06em;
color: var(--hud-cyan);
margin: 32px 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--hud-cyan);
/* トップページのタイルから#newkit/#oldkitでジャンプした時に見出しの真上で
止まるよう余白を確保（2026-08-05追加） */
scroll-margin-top: 90px;
}
.series-supergroup-title:first-child{
margin-top: 0;
}
/* 対象カテゴリーの判定はfunctions.php側のbody_classフィルター
（hud-series-page、hud_current_series_id()を参照）に一本化した
（2026-08-05、以前はここに対象カテゴリーIDを1つずつ列挙しており、
シリーズ追加のたびにfunctions.phpと二重管理になっていた。
.pagination・.pagination-nextは標準の記事一覧に付随するページ送り
リンクで、このページでは投稿を全件タイル表示するため不要かつ、
投稿数の少ないシリーズでは実体のないページへのリンクになっていたため
同時に非表示にする）。 */
body.hud-series-page #list,
body.hud-series-page .pagination,
body.hud-series-page .pagination-next{
display: none !important;
}
.search-box.input-box{
background-color: var(--hud-panel-2) !important;
border: 1px solid var(--hud-cyan-dim) !important;
}
.search-box .search-edit{
background: transparent !important;
color: var(--hud-ink) !important;
}
/* ランキングバナー2種を非表示（以前の合意通り廃止） */
#block-81, #block-82, #block-108, #block-110{
display: none !important;
}
/* YouTube動画 自動スクロール一覧（スクロールバーは出さない） */
.hud-yt-hscroll{
overflow:hidden;
margin:12px 0;
}
.hud-yt-track{
display:flex;
gap:12px;
width:max-content;
animation: hud-yt-scroll 40s linear infinite;
}
.hud-yt-hscroll:hover .hud-yt-track{
animation-play-state: paused;
}
@keyframes hud-yt-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.hud-yt-track{ animation: none; overflow-x: auto; }
}
.hud-yt-card{
flex:0 0 160px;
background:var(--hud-panel-2);
border:1px solid var(--hud-cyan-line);
padding:8px;
text-decoration:none;
color:var(--hud-ink);
display:block;
}
.hud-yt-card .hud-yt-thumb{
position:relative;
height:90px;
margin-bottom:6px;
overflow:hidden;
background:#000;
}
.hud-yt-card .hud-yt-thumb img{
width:100%;height:100%;object-fit:cover;
opacity:0.85;
}
.hud-yt-card .hud-yt-play{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:0;height:0;
border-style:solid;
border-width:10px 0 10px 16px;
border-color:transparent transparent transparent var(--hud-cyan);
filter:drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.hud-yt-card h4{
margin:0;
font-size:11px;
font-weight:500;
line-height:1.5;
}
.hud-yt-card:hover h4{
color: var(--hud-cyan);
}
/* トップページのYouTube欄・タイル欄をウィジェットから編集できるようにした際の見た目
（通常の画像ウィジェット＝![]()
を、カード/タイル風にCSSだけで整形） */
.hud-yt-card-wrap{
flex:0 0 160px;
background:var(--hud-panel-2);
border:1px solid var(--hud-cyan-line);
padding:8px;
}
.hud-yt-card-wrap figure{ margin:0; }
.hud-yt-card-wrap a{ position:relative; display:block; }
.hud-yt-card-wrap img{
width:100%; height:90px; object-fit:cover; display:block;
opacity:0.85; margin-bottom:6px;
}
.hud-yt-card-wrap a::after{
content:;
position:absolute; top:36px; left:50%;
transform:translate(-50%,-50%);
width:0;height:0;
border-style:solid;
border-width:10px 0 10px 16px;
border-color:transparent transparent transparent var(--hud-cyan);
filter:drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.hud-yt-card-wrap figcaption{
font-size:11px; font-weight:500; line-height:1.5;
color:var(--hud-ink);
}
.hud-yt-card-wrap:hover figcaption{
color: var(--hud-cyan);
}
.hud-widget-title{ display:none; }
/* サイドバー「AME-MAME-BAR YOUTUBE LIST」の縦スクロール一覧
（sidebar-youtube-vscroll.jsが画像ウィジェットをここへ移動する。
トップページのYouTube欄（横スクロール）の縦バージョン。2026-08-06追加） */
.hud-yt-vscroll{
height: 420px;
overflow: hidden;
position: relative;
margin: 12px 0;
}
.hud-yt-vtrack{
display: flex;
flex-direction: column;
gap: 12px;
animation: hud-yt-vscroll-move 90s linear infinite;
}
.hud-yt-vscroll:hover .hud-yt-vtrack{
animation-play-state: paused;
}
@keyframes hud-yt-vscroll-move{
from{ transform: translateY(0); }
to{ transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce){
.hud-yt-vtrack{ animation: none; }
.hud-yt-vscroll{ overflow-y: auto; }
}
.hud-yt-vtrack .widget_media_image{
flex: 0 0 auto;
background: var(--hud-panel-2);
border: 1px solid var(--hud-cyan-line);
padding: 8px;
margin: 0 !important;
}
.hud-yt-vtrack .widget_media_image figure{ margin: 0; }
.hud-yt-vtrack .widget_media_image a{ position: relative; display: block; }
.hud-yt-vtrack .widget_media_image img{
width: 100%; height: auto; display: block;
opacity: 0.85; margin-bottom: 6px;
}
.hud-yt-vtrack .widget_media_image a::after{
content: "";
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 0; height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent var(--hud-cyan);
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}
.hud-yt-vtrack .widget_media_image figcaption{
font-size: 11px; font-weight: 500; line-height: 1.5;
color: var(--hud-ink);
}
.hud-yt-vtrack .widget_media_image:hover figcaption{
color: var(--hud-cyan);
}
.hud-series-tile-wrap{
position:relative;
flex:0 0 100px;
aspect-ratio:3/4;
overflow:hidden;
border:2px solid var(--hud-cyan);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
transition: border-width 0.15s ease;
}
.hud-series-tile-wrap:hover{ border-width:4px; }
.hud-series-tile-wrap figure{ margin:0; height:100%; position:relative; }
.hud-series-tile-wrap a{ display:block; height:100%; }
.hud-series-tile-wrap img{
width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
transition: filter 0.15s ease;
}
.hud-series-tile-wrap:hover img{ filter:brightness(1.2); }
.hud-series-tile-wrap figure::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(5,7,11,0) 55%, rgba(5,7,11,0.9) 100%);
pointer-events:none;
}
/* キャプション文字は画像に重ねず、title属性のネイティブツールチップにしている
（2026-08-04、シリーズ詳細ページの個別タイルと挙動を揃えた。以前あった
.hud-series-tile-wrap figcaptionのスタイルは、HUD_Tile_Widgetがfigcaptionを
出力しなくなったため削除済み） */
/* スケールモデル タイル（SEARCH FOR SCALE MODEL欄、2026-08-04追加）。
.hud-series-tile-wrapとほぼ同じ作りだが、スケールモデルは横長の写真が
多いため、縦横比を4:3（横長）に変更・タイル幅も少し広げてある */
.hud-scale-tile-wrap{
position:relative;
flex:0 0 130px;
aspect-ratio:4/3;
overflow:hidden;
border:2px solid var(--hud-cyan);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
transition: border-width 0.15s ease;
}
.hud-scale-tile-wrap:hover{ border-width:4px; }
.hud-scale-tile-wrap figure{ margin:0; height:100%; position:relative; }
.hud-scale-tile-wrap a{ display:block; height:100%; }
.hud-scale-tile-wrap img{
width:100%; height:100%; object-fit:cover; object-position:center center; display:block;
transition: filter 0.15s ease;
}
.hud-scale-tile-wrap:hover img{ filter:brightness(1.2); }
.hud-scale-tile-wrap figure::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(5,7,11,0) 55%, rgba(5,7,11,0.9) 100%);
pointer-events:none;
}
/* キャラクタープラモ タイル一覧 */
.hud-series-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
margin:16px 0;
}
.hud-series-tile{
position:relative;
flex:0 0 100px;
aspect-ratio:3/4;
overflow:hidden;
border:3px solid var(--hud-cyan);
box-shadow: 0 0 0 1px var(--hud-bg-deep), 0 0 6px rgba(53,214,232,0.6);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
text-decoration:none;
color:var(--hud-ink);
background:#fff;
display:block;
}
.hud-series-tile img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:top center;
}
.hud-series-tile .hud-scrim{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(5,7,11,0) 55%, rgba(5,7,11,0.9) 100%);
}
.hud-series-tile .hud-label{
position:absolute;left:7px;right:7px;bottom:6px;
font-size:11px;font-weight:500;
text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.hud-series-tile{
transition: border-width 0.15s ease, border-color 0.15s ease;
}
.hud-series-tile img{
transition: filter 0.15s ease;
}
.hud-series-tile:hover{
border-width: 4px;
}
.hud-series-tile:hover img{
filter: brightness(1.2);
}
/* スケールモデル（自動車・オートバイ・軍用車両・飛行機）の個別タイル。
.hud-series-tileとほぼ同じだが、横長の写真が多いため縦横比を4:3（横長）に、
幅も少し広げてある（2026-08-04追加。1行あたりの並び数が変わってもよいと
ユーザー確認済み） */
.hud-scale-tile{
position:relative;
flex:0 0 140px;
aspect-ratio:4/3;
overflow:hidden;
border:3px solid var(--hud-cyan);
box-shadow: 0 0 0 1px var(--hud-bg-deep), 0 0 6px rgba(53,214,232,0.6);
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
text-decoration:none;
color:var(--hud-ink);
background:#fff;
display:block;
transition: border-width 0.15s ease, border-color 0.15s ease;
}
.hud-scale-tile img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center center;
transition: filter 0.15s ease;
}
.hud-scale-tile:hover{
border-width: 4px;
}
.hud-scale-tile:hover img{
filter: brightness(1.2);
}
/* スマホ（480px以下）ではタイルを正方形比率に切り替え。
PC/スマホ切替ウィジェット（HUD_Tile_Widget）のpicture要素が
同じ幅でスマホ用画像に切り替わるのに合わせて、枠の比率も揃える */
@media screen and (max-width: 480px){
.hud-series-tile-wrap{
aspect-ratio: 1/1;
}
}
/* フッター */
#footer{
background-color: var(--hud-bg-deep) !important;
border-top: 1px solid var(--hud-cyan-dim) !important;
color: var(--hud-ink-muted) !important;
}
#footer a{
color: var(--hud-ink-muted) !important;
}
/* 記事一覧のカード（カテゴリー・アーカイブページなど） */
.entry-card{
background-color: var(--hud-panel) !important;
border: 1px solid var(--hud-cyan-dim) !important;
color: var(--hud-ink) !important;
}
.entry-card-title, .entry-card-title a{
color: var(--hud-ink) !important;
}
.entry-card-title a:hover{
color: var(--hud-cyan) !important;
}
.entry-card-content, .entry-card-content a{
color: var(--hud-ink-muted) !important;
}
.entry-card .post-date{
color: var(--hud-ink-muted) !important;
}
.entry-card-thumb{
border-bottom: 1px solid var(--hud-cyan-dim) !important;
}
/* パンくず・ページヘッダー・ページネーション */
.breadcrumb, .breadcrumb a{
color: var(--hud-ink-muted) !important;
}
.page-header, .archive-title, .content-header{
background-color: var(--hud-panel) !important;
border: 1px solid var(--hud-cyan-dim) !important;
color: var(--hud-ink) !important;
}
.pagination a, .pagination span{
background-color: var(--hud-panel-2) !important;
border: 1px solid var(--hud-cyan-dim) !important;
color: var(--hud-ink-muted) !important;
}
.pagination .current{
color: var(--hud-cyan) !important;
border-color: var(--hud-cyan) !important;
}
/***************************************************************
** レトロ裏メニュー（ソフビ・プラレール・映画チラシ）配色
** 90年代・古き良きインターネット風。対象カテゴリーのページだけ、
** CSS変数を上書きすることでHUD系ダークテーマのルールをそのまま
** 転用している（第一段階：配色・フォントのみ、装飾要素は今後）。
***************************************************************/
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570{
--hud-bg-deep:#142b52;
--hud-panel:#fef9ec;
--hud-panel-2:#fdf6e3;
--hud-cyan:#0000ee;
--hud-cyan-dim:#7d2fae;
--hud-cyan-line:#999966;
--hud-ink:#1a1a1a;
--hud-ink-muted:#555;
font-family:'DotGothic16',"MS Pゴシック","MS Gothic",sans-serif !important;
}
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 html, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 body, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 #container{
background-image:
repeating-linear-gradient(45deg, #1c3a6e 0 6px, #142b52 6px 12px) !important;
background-size: auto !important;
}
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .entry-content a, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 #sidebar .widget a{
text-decoration: underline !important;
}
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .hud-panel::before, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .hud-panel::after{
background-image: none !important;
border: none !important;
}
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .hud-panel, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .article, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .entry-content{
border: 2px solid #000 !important;
}
body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .entry-title, body.categoryid-5, body.categoryid-17, body.categoryid-18, body.categoryid-376, body.categoryid-377, body.categoryid-418, body.categoryid-419, body.categoryid-420, body.categoryid-421, body.categoryid-422, body.categoryid-423, body.categoryid-424, body.categoryid-425, body.categoryid-426, body.categoryid-427, body.categoryid-428, body.categoryid-429, body.categoryid-430, body.categoryid-431, body.categoryid-432, body.categoryid-433, body.categoryid-434, body.categoryid-435, body.categoryid-436, body.categoryid-437, body.categoryid-438, body.categoryid-439, body.categoryid-440, body.categoryid-1771, body.categoryid-1772, body.categoryid-1785, body.categoryid-1868, body.categoryid-2570 .wp-block-heading{
font-family:'DotGothic16',"MS Pゴシック","MS Gothic",sans-serif !important;
}
/***************************************************************
** 資料室別館（レトロ裏メニューのハブページ）
** 2026-08-03追加。Artifact「資料室別館（レトロ裏メニュー案）」の
** モックアップをそのままCSS化。.retro-rootでスコープし、他ページの
** クラス名（.section-title等）と衝突しないようretro-プレフィックスを
** 付けている。固定ページ側はwp:htmlブロックでこのクラス構造を出力する。
***************************************************************/
.retro-root, .retro-root *{
box-sizing: border-box;
}
.retro-root{
min-height: 100vh;
--retro-navy: #142b52;
--retro-navy-2: #1c3a6e;
--retro-panel: #fef9ec;
--retro-edge: #000000;
--retro-ink: #1a1a1a;
--retro-link: #0000ee;
--retro-link-visited: #7d2fae;
--retro-pink: #ff2f92;
--retro-gold: #ffb400;
--retro-led: #2f9e44;
font-family: 'DotGothic16', "MS Pゴシック", "MS Gothic", sans-serif;
color: var(--retro-ink);
background-color: var(--retro-navy);
background-image: repeating-linear-gradient(45deg, var(--retro-navy-2) 0 6px, var(--retro-navy) 6px 12px);
padding: 20px 12px;
display: flex;
justify-content: center;
}
.retro-frame{
max-width: 760px;
width: 100%;
background: var(--retro-panel);
border: 2px solid var(--retro-edge);
box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
/* 上部の流れる帯（marquee、CSSアニメーションで実装。