@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;
}

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);
}
.site-name-text, .site-name-text a{
  color: var(--hud-cyan) !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;
}

/* トップページ一番上のタイトル（AME-MAME-BAR HEAD OFFICE）の文字装飾のみ
   （枠・背景は付けない。ユーザーの意向で外した） */
.post-181 .entry-content > h2.wp-block-heading{
  font-family: Consolas, monospace;
  font-size: 22px;
  font-weight: 500;
  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: 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: 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: 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: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:Consolas,monospace;
  font-size:10px;
  color:var(--hud-ink-muted);
}

/* パネル内の見出し（新着レビュー・YouTubeチャンネル・キャラクタープラモから探す）
   左にひし形マーカーを添える（デザイン案のsection-titleに合わせた装飾） */
.hud-panel > h3.wp-block-heading::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  margin-bottom:1px;
  background:var(--hud-cyan);
  transform:rotate(45deg);
}

/* KIT DATAなどの表をパネル風に */
.entry-content table{
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: var(--hud-panel-2) !important;
  border: 1px solid var(--hud-cyan-dim) !important;
}
.entry-content table td, .entry-content table th{
  border: 1px dotted var(--hud-cyan-line) !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: Consolas, monospace !important;
  font-size: 12px !important;
  white-space: nowrap !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: Consolas, monospace !important;
  color: var(--hud-cyan) !important;
  letter-spacing: 0.06em;
}
#sidebar .author-description p{
  font-family: Consolas, monospace !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);
}

/* キャラクタープラモ シリーズ詳細ページ（総件数・スケール別タイル） */
.series-total{
  font-family: Consolas, monospace;
  font-size: 12px;
  color: var(--hud-cyan);
  margin: 8px 0 0 !important;
}
/* スケール別タイル。フロントページの「キャラクタープラモから探す」タイルと
   同じ見た目（画像＋下部にラベル）を、横並びではなく縦に積んで並べる。
   画像は各スケールの最新記事のサムネイルをそのまま使う（専用画像は無し） */
.series-scale-tiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  max-width: 320px;
}
.series-scale-tile{
  position: relative;
  display: block;
  height: 100px;
  overflow: hidden;
  border: 2px solid var(--hud-cyan-dim);
  background: #fff;
  text-decoration: none !important;
}
.series-scale-tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.series-scale-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,7,11,0) 45%, rgba(5,7,11,0.85) 100%);
}
.series-scale-tile-label{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  font-family: Consolas, monospace;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.series-scale-tile.is-active{
  border-color: var(--hud-cyan);
}
.series-scale-tile:hover img{
  filter: brightness(1.15);
}

.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欄・タイル欄をウィジェットから編集できるようにした際の見た目
   （通常の画像ウィジェット＝<figure><a><img><figcaption>を、カード/タイル風に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; }

.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;
}
.hud-series-tile-wrap figcaption{
  position:absolute; left:7px; right:7px; bottom:6px;
  font-size:11px; font-weight:500; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
  z-index:2;
}

/* キャラクタープラモ タイル一覧 */
.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:2px solid var(--hud-cyan);
  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);
}

/* スマホ（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:"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:"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: "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アニメーションで実装。<marquee>タグは未使用） */
.retro-marquee{
  background: #000;
  color: var(--retro-gold);
  font-family: "MS Gothic", "Courier New", monospace;
  font-size: 13px;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 3px solid var(--retro-edge);
}
.retro-marquee span{
  display: inline-block;
  padding-left: 100%;
  animation: retro-marquee-scroll 16s linear infinite;
}
@keyframes retro-marquee-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .retro-marquee span{ animation: none; padding-left: 12px; }
}

/* ヘッダー（NEWバッジ・虹色タイトル・タグライン・戻るリンク） */
.retro-masthead{
  text-align: center;
  padding: 20px 16px 16px;
  border-bottom: 3px double var(--retro-edge);
}
.retro-badge-new{
  display: inline-block;
  background: var(--retro-pink);
  color: #fff;
  font-family: "MS Gothic", "Courier New", monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border: 1px solid var(--retro-edge);
  transform: rotate(-4deg);
  margin-bottom: 6px;
  animation: retro-blink-badge 1.4s step-start infinite;
}
@keyframes retro-blink-badge{
  50%{ opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce){
  .retro-badge-new{ animation: none; }
}
.retro-masthead h1{
  margin: 4px 0 2px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #ff2f92, #ffb400, #2f9e44, #0000ee, #7d2fae);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}
.retro-masthead .retro-tagline{
  margin: 0 0 8px;
  font-size: 12px;
  color: #444;
}
.retro-masthead .retro-back-link{
  font-family: "MS Gothic", "Courier New", monospace;
  font-size: 12px;
  color: var(--retro-link);
}

/* 各セクション共通 */
.retro-section{
  padding: 16px;
  border-bottom: 1px dashed #999;
}
.retro-section-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.retro-section-title::before{
  content: "★ ";
  color: var(--retro-pink);
}
.retro-section-title::after{
  content: " ☆彡";
  color: var(--retro-gold);
}
.retro-root a{
  color: var(--retro-link);
}
.retro-root a:visited{
  color: var(--retro-link-visited);
}

/* このコーナーについて（3カテゴリーの入口カード） */
.retro-link-table{
  width: 100%;
  border-collapse: collapse;
}
.retro-link-table td{
  width: 33.33%;
  vertical-align: top;
  padding: 8px;
  border: 1px solid #999;
  text-align: center;
}
.retro-link-table .retro-cat-icon{
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}
.retro-link-table a{
  font-weight: bold;
  text-decoration: underline;
}
.retro-link-table .retro-desc{
  margin: 4px 0 0;
  font-size: 11px;
  color: #666;
}

/* 更新履歴（[hud_retro_updates]ショートコードの出力） */
.retro-updates{
  width: 100%;
  font-size: 12px;
  font-family: "MS Gothic", "Courier New", monospace;
  border-collapse: collapse;
}
.retro-updates td{
  padding: 3px 6px;
  border-bottom: 1px dotted #aaa;
}
.retro-updates td:first-child{
  color: #777;
  white-space: nowrap;
}
.retro-updates .tag{
  display: inline-block;
  font-size: 10px;
  padding: 0 5px;
  margin-right: 4px;
  border: 1px solid var(--retro-ink);
  background: #fff;
}

/* おまけ（アクセスカウンター、装飾のみの固定数字） */
.retro-counter-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.retro-counter-digits{
  font-family: "MS Gothic", "Courier New", monospace;
  background: #000;
  color: var(--retro-led);
  padding: 4px 8px;
  letter-spacing: 0.2em;
  font-size: 16px;
  border: 2px solid #333;
}

/* 相互リンク（現状は準備中のプレースホルダー） */
.retro-reciprocal{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  font-size: 11px;
}
.retro-reciprocal div{
  border: 1px solid #999;
  background: #fff;
  padding: 8px;
  text-align: center;
  color: #666;
}

/* フッター（工事中バッジ・著作権） */
.retro-footer{
  text-align: center;
  padding: 16px;
}
.retro-footer .retro-construction{
  display: inline-block;
  background: repeating-linear-gradient(45deg, #ffb400, #ffb400 6px, #111 6px, #111 12px);
  color: #111;
  font-family: "MS Gothic", "Courier New", monospace;
  font-weight: bold;
  padding: 3px 10px;
  border: 2px solid #111;
  margin-bottom: 8px;
}
.retro-footer .retro-construction span{
  background: #fff;
  padding: 0 4px;
}
.retro-footer .retro-copyright{
  font-size: 11px;
  margin: 0;
}
.retro-footer .retro-browser-note{
  font-size: 10px;
  color: #888;
  font-style: italic;
  margin: 4px 0 0;
}