@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ------------------------------------------------------------------
   ↑ 先頭コメントは本番の既存ファイルのもの。絶対に消さないこと。
     消すと WordPress が子テーマを認識せず、サイト全体が壊れます。
   ↓ ここから下が最強AIボードゲームズのデザイン（木目テーマ）
     原本: design-handoff/saikyo-cocoon-child.css
   ------------------------------------------------------------------ */

/* ==================================================================
   00. 変数
   .saikyo-reversi（ゲーム本体）の中は一切指定しない。
   ================================================================== */
:root{
  --sk-paper:#f0f0f0;   /* 地 */
  --sk-surface:#ffffff; /* 面 */
  --sk-ink:#1c1c1c;     /* 文字 */
  --sk-ink-2:#3f3f3f;   /* 副文字 */
  --sk-mute:#5f5f5f;
  --sk-amber:#1c1c1c;   /* 装飾アクセント（旧・琥珀 #b06a24） */
  --sk-link:#1a1a1a;    /* リンク文字（コントラスト確保のため濃いめ） */
  --sk-link-hover:#000000;
  --sk-board:#4a4a4a;   /* カードに描く盤の地（旧・緑 #1d6b4a） */
  --sk-sumi:#141414;    /* ヘッダー・フッターの墨（旧・茶寄り #1f1a14） */
  --sk-line:rgba(0,0,0,.14);
  --sk-gothic:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  --sk-mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS PMincho",serif;
}

/* ==================================================================
   01. 全体
   ================================================================== */
body{
  background:var(--sk-paper);
  color:var(--sk-ink);
  font-family:var(--sk-gothic);
  -webkit-font-smoothing:antialiased;
}
.article,.entry-content{font-size:17px;line-height:2.05}
.main,#main,.sidebar{background:transparent;border:0;box-shadow:none}
.content{margin-top:0}

/* Cocoon既定の青リンクを琥珀に統一 */
a,.entry-card-title,.related-entry-card-title{color:var(--sk-link)}
a:hover{color:var(--sk-link-hover)}
.article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article a:hover{text-decoration-thickness:2px}
.a-wrap:hover{background:rgba(0,0,0,.05)}

/* 見出し */
.article h1,.article h2,.article h3,.entry-title,.archive-title{font-family:var(--sk-mincho);letter-spacing:.01em}
.article h1,.entry-title{font-size:31px;line-height:1.55;font-weight:600}
.article h2{
  font-size:24px;font-weight:600;line-height:1.6;
  background:none;border:0;border-left:3px solid var(--sk-amber);
  padding:0 0 0 14px;margin:2.2em 0 .8em;
}
.article h3{font-size:19px;font-weight:600;border:0;border-bottom:1px solid var(--sk-line);padding-bottom:.4em;margin:1.8em 0 .7em}
.article p{margin:0 0 1.1em}

/* ==================================================================
   02. ヘッダー（墨のひとつの塊）
   全幅の背景はカラム位置に依存しない box-shadow + clip-path で伸ばす。
   margin:0 -100vw / calc(50% - 50vw) は使わない（サイドバー有りで崩れる）
   ================================================================== */
.header,.header-container,#header-container{background:var(--sk-sumi);color:#f2f2f2}
#header-container-in,.header-in{max-width:1256px}
.header .site-name-text,.logo-text{
  font-family:var(--sk-mincho);color:#f2f2f2;font-size:19px;letter-spacing:.06em;font-weight:600;
}
.header .site-name-text:hover{color:#fff}
.tagline{color:#b9b9b9;font-size:12px}
.logo-header{padding:14px 0}

/* グローバルナビ */
#navi,.navi-in{background:var(--sk-sumi)}
#navi .navi-in>ul>li>a{color:#b9b9b9;font-size:14px;height:52px;line-height:52px}
#navi .navi-in>ul>li>a:hover{background:rgba(255,255,255,.06);color:#fff}
#navi .navi-in>ul>li.current-menu-item>a{color:#fff;box-shadow:inset 0 -2px 0 var(--sk-amber)}
.mobile-menu-buttons .menu-button{background:var(--sk-sumi);color:#f2f2f2}

/* トップのヒーロー（固定ページ本文の先頭に .sk-hero を置く） */
.sk-hero{
  background:var(--sk-sumi);color:#f2f2f2;
  box-shadow:0 0 0 100vmax var(--sk-sumi);
  clip-path:inset(0 -100vmax);
  padding:52px 24px 56px;margin:0 0 44px;text-align:center;
}
.sk-hero h1{font-family:var(--sk-mincho);font-size:40px;font-weight:600;line-height:1.45;margin:0;color:#f2f2f2}
.sk-hero p{max-width:600px;margin:20px auto 0;font-size:15px;line-height:2;color:#b9b9b9}
@media screen and (max-width:834px){
  .sk-hero{padding:26px 18px 30px;margin-bottom:28px}
  .sk-hero h1{font-size:25px}
  .sk-hero p{font-size:13px;margin-top:12px}
}

/* パンくず */
.breadcrumb{background:transparent;font-size:12px;color:var(--sk-mute);padding:14px 0;margin:0}

/* ==================================================================
   03. ゲームカード（リバーシだけ画像、他はCSS描画）
   ゲームを足すときは .sk-card__art--<slug> を1つ増やすだけ。
   ================================================================== */
.sk-games{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 44px}
.sk-card{
  display:flex;flex-direction:column;
  background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;
  overflow:hidden;text-decoration:none!important;color:var(--sk-ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.sk-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.5);color:var(--sk-ink)}
.sk-card--soon{opacity:.72;pointer-events:none}
.sk-card__art{height:132px;position:relative}
.sk-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.sk-card__name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;margin:0}
.sk-card__badge{background:var(--sk-amber);color:var(--sk-surface);font-size:10px;letter-spacing:.08em;padding:3px 7px;border-radius:2px}
.sk-card__badge--soon{background:transparent;color:var(--sk-mute);border:1px solid rgba(0,0,0,.3)}
.sk-card__text{font-size:13px;line-height:1.8;color:var(--sk-ink-2);margin:0;flex:1}
.sk-card__cta{background:var(--sk-sumi);color:var(--sk-surface);text-align:center;padding:11px 0;border-radius:2px;font-size:14px;font-weight:700}
.sk-card__cta--soon{background:transparent;border:1px solid rgba(0,0,0,.2);color:var(--sk-mute);font-weight:400}

/* リバーシとチェスは、実物の写真にあたるものがある。ゲーム本体と同じ大理石素材で
   実際の盤面を組んだ画像を貼る（素材も寸法比も盤と完全に同じ）。
   残る2つは準備中なので、今までどおり CSS で描いた記号のまま。
   チェスのカードは画像だが、遊べるようになるまでカード自体は準備中のまま
   （.sk-card--soon が付いているので、リンクせず薄く出る）。 */
.sk-card__art--reversi{
  background:#8f8778 url("assets/card-reversi-v2.webp") center/cover no-repeat;
}
.sk-card__art--chess{
  background:#8d8880 url("assets/card-chess-v2.webp") center/cover no-repeat;
}
/* 将棋：木地の格子 */
.sk-card__art--shogi{
  background:#cfcfcf;
  background-image:linear-gradient(to right,rgba(0,0,0,.45) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,0,0,.45) 1px,transparent 1px);
  background-size:14.28% 16.6%;
}
/* 五目並べ：碁盤 */
.sk-card__art--gomoku{
  background:#dadada;
  background-image:linear-gradient(to right,rgba(0,0,0,.5) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,0,0,.5) 1px,transparent 1px);
  background-size:11% 13%;background-position:6px 6px;
}
@media screen and (max-width:1023px){.sk-games{grid-template-columns:repeat(2,1fr);gap:14px}}
@media screen and (max-width:480px){
  .sk-games{grid-template-columns:1fr}
  .sk-card__art{height:112px}
  .sk-card__cta{padding:14px 0;font-size:15px} /* タップ領域44px以上 */
}

/* 3つの特徴 */
.sk-points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;padding:34px 36px;margin:0 0 44px}
.sk-points h3{font-family:var(--sk-mincho);font-size:20px;font-weight:600;margin:0 0 10px;border:0;padding:0}
.sk-points p{font-size:14px;line-height:1.95;color:var(--sk-ink-2);margin:0}
@media screen and (max-width:834px){.sk-points{grid-template-columns:1fr;gap:22px;padding:24px 22px}}

/* ==================================================================
   04. ゲームページ（1カラム。盤より上に要素を積まない）
   固定ページに body クラス .sk-game を付ける（下部の functions.php 例を参照）
   ================================================================== */
.sk-game .entry-title{text-align:center;font-size:30px;margin:6px 0 0}
.sk-game .sk-lead{text-align:center;font-size:14px;color:var(--sk-ink-2);margin:10px 0 20px}
.sk-game .breadcrumb{padding:12px 0 0}
.sk-game .date-tags,.sk-game .sns-share,.sk-game .author-info{display:none} /* 盤より上を空ける */
.sk-game .entry-content{max-width:800px;margin-left:auto;margin-right:auto} /* 1カラムでも本文は800pxに絞る */
.sk-game .saikyo-reversi{max-width:640px;margin:0 auto 8px} /* 外側の位置だけ。中身は触らない */
.sk-game .article h2:first-of-type{margin-top:1.6em}
@media screen and (max-width:834px){
  .sk-game .entry-title{font-size:21px}
  .sk-game .sk-lead{font-size:12px;margin:6px 0 12px}
  .sk-game .breadcrumb{display:none} /* スマホは盤を上げるため非表示 */
}

/* 他のゲームへの導線 */
.sk-others{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.6em 0}
.sk-others a{display:flex;align-items:center;gap:12px;background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;padding:14px 16px;text-decoration:none!important;color:var(--sk-ink)}
.sk-others .sk-others__art{width:44px;height:44px;flex:0 0 auto}
@media screen and (max-width:480px){.sk-others{grid-template-columns:1fr}}

/* 記事 → ゲーム の相互リンク帯 */
.sk-playbox{display:flex;align-items:center;gap:20px;background:var(--sk-paper);border:1px solid rgba(0,0,0,.16);border-radius:3px;padding:20px 22px;margin:2em 0}
.sk-playbox__board{
  width:96px;height:96px;flex:0 0 auto;border:4px solid #2a2a2a;background:var(--sk-board);
  background-image:linear-gradient(to right,rgba(0,0,0,.4) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,0,0,.4) 1px,transparent 1px);
  background-size:25% 25%;
}
.sk-playbox__title{font-size:16px;font-weight:700;margin:0 0 6px}
.sk-playbox__text{font-size:13px;line-height:1.8;color:var(--sk-ink-2);margin:0}
.sk-playbox__cta{background:var(--sk-sumi);color:var(--sk-surface);padding:12px 22px;border-radius:2px;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none!important}
@media screen and (max-width:480px){
  .sk-playbox{gap:14px;padding:16px}
  .sk-playbox__board{width:56px;height:56px;border-width:3px;background-size:25% 25%}
  .sk-playbox__cta{padding:12px 14px;font-size:13px}
}

/* レベル表 */
.sk-levels{width:100%;border-collapse:collapse;font-size:14px;background:var(--sk-surface);border:1px solid var(--sk-line)}
.sk-levels th{background:var(--sk-paper);text-align:left;padding:11px 14px;font-size:12px;color:var(--sk-ink-2);font-weight:700}
.sk-levels td{padding:12px 14px;line-height:1.8;border-top:1px solid rgba(0,0,0,.1)}
.sk-levels td:first-child{width:56px;font-weight:700}
.sk-levels td:nth-child(2){width:110px}
.sk-levels tr.is-default td{background:#f5f5f5}
.sk-levels tr.is-ex td{background:var(--sk-sumi);color:#dcdcdc}
.sk-levels tr.is-ex td:first-child{color:#d0d0d0}
@media screen and (max-width:480px){
  .sk-levels,.sk-levels td,.sk-levels th{font-size:13px}
  .sk-levels td:nth-child(2){width:auto}
}

/* ==================================================================
   05. 一覧・エントリーカード
   ================================================================== */
.entry-card,.related-entry-card{background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;padding:14px}
.entry-card-title,.related-entry-card-title{font-size:15px;font-weight:700;line-height:1.6}
.entry-card-snippet,.related-entry-card-snippet{font-size:12px;line-height:1.7;color:var(--sk-mute)}
.entry-card-meta,.post-date{font-size:11px;color:var(--sk-mute)}
.cat-label{background:var(--sk-amber);border:0;border-radius:2px;font-size:11px}
.archive-title{font-size:24px;font-weight:600;margin:0 0 10px}
.pagination .page-numbers{border:1px solid rgba(0,0,0,.2);border-radius:2px;background:transparent;color:var(--sk-ink-2);min-width:34px;height:34px;line-height:34px}
.pagination .current{background:var(--sk-sumi);border-color:var(--sk-sumi);color:var(--sk-surface)}

/* 目次・引用 */
.toc{background:var(--sk-paper);border:1px solid rgba(0,0,0,.12);border-radius:3px;padding:18px 22px}
.toc-title{font-size:13px;font-weight:700}
.article blockquote{background:#f2f2f2;border:0;border-left:3px solid var(--sk-amber);padding:20px 24px;margin:1.8em 0;font-size:15px;line-height:2}
.article blockquote::before,.article blockquote::after{content:none}

/* ==================================================================
   06. サイドバー（記事・一覧のみ。ゲームページは1カラム）
   ================================================================== */
.sidebar h3,.widget-sidebar-title{font-size:13px;font-weight:700;background:transparent;border:0;border-bottom:1px solid var(--sk-line);padding:0 0 10px;margin:0 0 14px;color:var(--sk-ink)}
.sidebar .widget{background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;padding:20px 22px;margin-bottom:20px}
.sidebar li{font-size:13px;line-height:1.8;border:0}
.sidebar .widget_categories li a{display:flex;justify-content:space-between}

/* サイドバー先頭の「今すぐ遊ぶ」（テキストウィジェットに貼る） */
.sk-side-play{background:var(--sk-sumi)!important;border-color:var(--sk-sumi)!important;color:#f2f2f2}
.sk-side-play h3{color:#d0d0d0;border-bottom-color:rgba(255,255,255,.15)}
.sk-side-play__board{
  width:100%;aspect-ratio:1;border:6px solid #2a2a2a;background:var(--sk-board);
  background-image:linear-gradient(to right,rgba(0,0,0,.4) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,0,0,.4) 1px,transparent 1px);
  background-size:12.5% 12.5%;
}
.sk-side-play strong{display:block;margin-top:14px;font-size:14px;color:#fff}
.sk-side-play span{display:block;margin-top:6px;font-size:12px;line-height:1.7;color:#b9b9b9}

/* ==================================================================
   07. 広告枠
   盤の周囲には置かない。記事下とH2直前だけ。高さを固定してズレを防ぐ。
   ================================================================== */
.sk-ad{min-height:120px;margin:2.4em 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sk-ad--under{border-top:1px solid var(--sk-line);padding-top:2em}
.sk-affiliate{background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;padding:24px 26px;margin:2.4em 0}
.sk-affiliate__title{font-family:var(--sk-mincho);font-size:18px;font-weight:600;margin:0 0 14px}
.sk-affiliate__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:112px}
.sk-affiliate__note{font-size:12px;color:var(--sk-mute);margin:12px 0 0;line-height:1.8}
@media screen and (max-width:480px){.sk-affiliate__grid{grid-template-columns:1fr}}
/* ゲームページで盤のすぐ後ろに広告が入るのを防ぐ保険 */
.sk-game .saikyo-reversi+.sk-ad,.sk-game .saikyo-reversi+.sk-affiliate{display:none}

/* ==================================================================
   08. フッター
   ================================================================== */
.footer,#footer{background:var(--sk-sumi);color:#b9b9b9;border:0;padding:40px 0 22px}
.footer a,#footer a{color:#dcdcdc}
.footer a:hover,#footer a:hover{color:#fff}
.footer h3,#footer .widget-footer-title{font-family:var(--sk-gothic);font-size:11px;letter-spacing:.12em;color:#808080;font-weight:400;background:transparent;border:0;padding:0;margin:0 0 12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:18px;font-size:11px;color:#767676}
.footer-bottom .copyright{font-size:11px}
.go-to-top-button{background:var(--sk-sumi);color:#f2f2f2;border-radius:2px}

/* ==================================================================
   09. AMPページのフォールバック（プラグイン側の出力に合わせる）
   ================================================================== */
.saikyo-amp-fallback{background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:3px;padding:22px;text-align:center;font-size:14px}

/* ==================================================================
   10. 貼り付け用HTML（参考。CSSとしては読み飛ばされます）
   ------------------------------------------------------------------
   ■ トップのヒーロー＋ゲームカード（カスタムHTMLブロック）

   <div class="sk-hero">
     <h1>強いAIと遊べる、無料のボードゲーム</h1>
     <p>登録もダウンロードもいりません。開いたらすぐ、弱い相手から歯が立たない相手まで選んで遊べます。</p>
   </div>

   <h2>遊べるゲーム</h2>
   <div class="sk-games">
     <a class="sk-card" href="/reversi/">
       <div class="sk-card__art sk-card__art--reversi"></div>
       <div class="sk-card__body">
         <h3 class="sk-card__name">リバーシ<span class="sk-card__badge">遊べる</span></h3>
         <p class="sk-card__text">白と黒をひっくり返して、盤を自分の色で埋めていくゲーム。</p>
         <span class="sk-card__cta">遊ぶ</span>
       </div>
     </a>
     <span class="sk-card sk-card--soon">
       <div class="sk-card__art sk-card__art--chess"></div>
       <div class="sk-card__body">
         <h3 class="sk-card__name">チェス<span class="sk-card__badge sk-card__badge--soon">準備中</span></h3>
         <p class="sk-card__text">駒ごとの動きを組み合わせて、相手の王を追いつめるゲーム。</p>
         <span class="sk-card__cta sk-card__cta--soon">準備中</span>
       </div>
     </span>
     （将棋 = --shogi、五目並べ = --gomoku を同じ形で並べる）
   </div>

   ■ ゲームページ（固定ページ /reversi/・1カラム設定）
     本文の先頭から順に：
       <p class="sk-lead">強さは11段階。勝てる相手から、まず間違えない相手まで。</p>
       [reversi]              ← ショートコードブロック。1ページに1つまで
       <h2>遊びかた</h2> …
       <h2>強さの選びかた</h2> + <table class="sk-levels">…</table>
       <div class="sk-ad">（AdSense）</div>
       <h2>もっと強くなる読みもの</h2> …
       <div class="sk-affiliate">…</div>
       <h2>ほかのゲーム</h2> + <div class="sk-others">…</div>

   ■ body に .sk-game を付ける（子テーマ functions.php）

   add_filter('body_class', function($c){
     if (is_page(array('reversi','chess','shogi','gomoku'))) { $c[] = 'sk-game'; }
     return $c;
   });

   ■ 転送
     scp -P 10022 style.css xs601932@xs601932.xsrv.jp:~/saikyo-ai.com/public_html/wp-content/themes/cocoon-child-master/style.css
     （ssh は -p、scp は -P）
   ================================================================== */

/* ==================================================================
   11. 実装時に足したぶん（デザインCSSの原本には無い）
   ------------------------------------------------------------------
   理由をそれぞれ書いてあります。デザインを変える意図の追加はしていません。
   ================================================================== */

/* --- 準備中のゲームを「リンクしない箱」として並べる -----------------
   .sk-others はリンク前提で書かれているが、チェス・将棋・五目並べの
   固定ページはまだ無い。存在しないURLに貼ると 404 が増えて評価を落とすので、
   ページができるまでは span で出し、見た目だけ .sk-others a に合わせる。 */
.sk-others__soon{
  display:flex;align-items:center;gap:12px;
  background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:3px;
  padding:14px 16px;color:var(--sk-mute);
}
.sk-others__art{width:44px;height:44px;flex:0 0 auto;border-radius:2px}
.sk-others__soon small,
.sk-others a small{display:block;font-size:11px;color:var(--sk-mute);margin-top:2px}
@media screen and (max-width:480px){.sk-others__soon{padding:12px 14px}}

/* --- h3 の左端をそろえる ---------------------------------------------
   Cocoon の .article h3 は「左に太い縦線＋左右 20px の余白」という作り。
   デザイン原本は線（border）だけを 0 にしていて、余白を戻していないため、
   見出しだけが本文より 20px 右にずれていた。
   下線（padding-bottom:.4em）は原本の意図なので残す。 */
.article h3{padding:0 0 .4em}

/* --- 強さの表 --------------------------------------------------------
   2026-09-05、「はじめて」「初級」といった呼びかたの列をやめて2列にした。
   デザイン原本は3列前提で 2列目に 110px を当てているが、いまの2列目は
   説明文なので、そこで折り返されると読めない。幅の指定を戻す。 */
.sk-levels td:nth-child(2){width:auto}

/* --- トップページ ---------------------------------------------------
   ヒーローが H1 を持つので、Cocoon のページタイトルは出さない設定にしている。
   その分の余白を詰め、ヒーローをヘッダーと地続きに見せる。 */
.sk-front .entry-title,
.sk-front .article-header{display:none}
.sk-front .entry-content{margin-top:0}
/* ヒーローをヘッダーと地続きに見せる。Cocoon が #main に付ける 36px の
   余白がここに挟まると、墨の帯が2つに割れて見える。 */
.sk-front .main{padding-top:0}
.sk-front .breadcrumb,
.sk-front .date-tags,
.sk-front .sns-share,
.sk-front .author-info{display:none}
.sk-front .article{padding-top:0}

/* --- サイドバーの「今すぐ遊ぶ」を丸ごとリンクにする -------------------
   デザインでは箱全体が導線。テキストリンクだけにするとタップ領域が狭い。 */
.sk-side-play__link{display:block;text-decoration:none!important;color:inherit}
.sk-side-play__link:hover .sk-side-play__board{border-color:var(--sk-amber)}
.sk-side-play__board{transition:border-color .15s ease}

/* --- .sk-playbox の中央ブロック --------------------------------------
   記事末尾に functions.php が自動で入れる帯。中央だけ伸ばす。 */
.sk-playbox>div{flex:1}

/* ゲームを特定しない記事（「考える力」「親子で遊ぶ」など）では、
   リバーシとチェスの2本を縦に並べる。デザイン原本はボタン1つ前提。 */
.sk-playbox__ctas{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.sk-playbox__ctas .sk-playbox__cta{text-align:center}
@media screen and (max-width:480px){
  /* 幅が足りないので、ボタンだけ下の段へ回して横に2つ並べる */
  .sk-playbox{flex-wrap:wrap}
  .sk-playbox__ctas{flex-direction:row;width:100%}
  .sk-playbox__ctas .sk-playbox__cta{flex:1}
}

/* --- 広告の大理石額装 -------------------------------------------------
   サイトは白黒モノトーンなので、ゲーム系のバナーはそのままだと確実に浮く。
   広告を大理石の枠で額装して、サイトの持ち物に見せる。

   仕掛けは border-image（9スライス）。1枚の正方形を9つに切り、
   四隅は固定・4辺は繰り返して伸びるので、**広告の寸法が何であっても
   枠のほうが自動で合う。** 300x250 でも 728x90 でも同じ1枚で足りる。
   辺は「繰り返し」であって「拡大」ではないので、大理石が歪まない。

   枠の画像は wordpress/theme/make-frame.py が作る（素材は ambientCG の
   Onyx013）。差し替えるときはファイル名の版番号を上げること。 */
.sk-ad,
.sk-affiliate,
.sk-frame{
  /* 枠の画像が読めなかったときは、この色の無地の枠になる（崩れない） */
  border:28px solid #3a3a3a;
  border-image:url("assets/ad-frame-v1.webp") 96 round;
  border-radius:0;
  background-clip:padding-box;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.55);
}

/* ▼ 額装するなら「広告」の見出しを必ず添えること（規約と法律の両方の要求）。
   ・AdSense は「広告がサイトの中身と紛らわしい配置」を禁じている。
     枠を付けて綺麗にするほど、サイトの持ち物に見えてしまうので、
     ここを省くと逆にリスクが上がる。
   ・アフィリエイトなら景品表示法のステマ規制でも表示が要る。
   使いかた:  <p class="sk-ad__label">広告</p> を枠のすぐ上に置く。 */
.sk-ad__label{
  display:block;text-align:center;
  font-size:11px;letter-spacing:.16em;color:var(--sk-mute);
  margin:2.4em 0 6px;
}
.sk-ad__label+.sk-ad,
.sk-ad__label+.sk-affiliate{margin-top:0}

/* 広告そのものは中身の幅しか無いので、枠を中身に吸い付かせる。
   これをやらないと、300px のバナーの周りに本文幅いっぱいの枠ができる。 */
.sk-ad{
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  background:var(--sk-surface);
}
/* .sk-affiliate は元から本文幅いっぱいの箱なので、幅はそのまま。
   デザイン原本の1px枠と角丸だけ、額装と二重にならないよう上で消してある。 */

/* スマホでは 28px×2 = 56px が効きすぎる。枠を細くして中身の幅を確保する。
   border-image-slice は画像側の値なので変えない（枠が縮むだけ）。 */
@media screen and (max-width:480px){
  .sk-ad,
  .sk-affiliate,
  .sk-frame{border-width:16px}
  .sk-affiliate{padding:16px 14px}
}

/* --- 目次・見出しの飛び先がヘッダーに隠れないように ------------------ */
:target{scroll-margin-top:72px}

/* --- 印刷（保護者が印刷して使うことがある） -------------------------- */
@media print{
  .sk-hero,.sk-ad,.sk-affiliate,.sk-playbox,.sk-side-play,#navi,.footer,#footer{display:none!important}
  body{background:#fff}
}

/* --- ゲームページ：盤をファーストビューに入れるための詰め ------------
   このサイトのいちばんの要件が「開いたらすぐ盤」。
   ヘッダーを1段（ロゴ左・メニュー右）にしたうえで、盤の上の余白を削る。
   .saikyo-reversi の中身には触らない。触るのはラッパの外側の幅だけ。 */
.sk-game .content{margin-top:0}
.sk-game .main{padding-top:10px}
.sk-game .entry-title{margin:0}
.sk-game .sk-lead{margin:8px 0 12px}

/* 画面の縦が足りないときは盤を小さくして、全体を見えるようにする。
   スマホは幅のほうが先に効くので、この指定は当たらない。 */
@media screen and (max-height:900px){.sk-game .saikyo-reversi{max-width:560px}}
@media screen and (max-height:820px){.sk-game .saikyo-reversi{max-width:480px}}
@media screen and (max-height:720px){.sk-game .saikyo-reversi{max-width:410px}}

/* チェスには上と同じ指定を書かない。盤の横に棋譜の欄が並ぶ作りなので、
   外側を細くすると盤ではなく棋譜が潰れる。縦が短いときの縮小は
   chess/css/style.css の .board-wrap 側（max-width:min(720px,74vh)）が持っている。 */

/* 盤の直下に広告を置かせない（AdSense の配置規約。リバーシと同じ扱い）。
   デザイン原本の .saikyo-reversi+... と対になる、チェスのぶん。 */
.sk-game .saikyo-chess+.sk-ad,
.sk-game .saikyo-chess+.sk-affiliate{display:none}

/* スマホは盤の上をさらに詰める。iPhone SE のような小さい画面でも
   盤の下端がなるべく折り目より上に来るようにする。 */
@media screen and (max-width:480px){
  .sk-game .entry-title{font-size:19px;line-height:1.45}
  .sk-game .sk-lead{margin:6px 0 8px;font-size:11.5px}
  .sk-game .main{padding-top:6px}
}

/* --- 大理石（オニキス）背景 ------------------------------------------
   2026-09-04。方針変更で、地の無地（--sk-paper）をオニキス大理石に
   差し替える。素材は ambientCG の Onyx008 の Color マップを、
   1920×1080 / 828×1472 の WebP に落として assets に置いたもの。
   色は素材のまま。リサイズとWebP化以外の加工はしていない。
   縞が強いぶんの可読性は、下の紙のヴェールの数値で調整する。 */
body{
  background:#f4f4f4 url("assets/marble-bg-desktop-v2.webp") center center / cover no-repeat fixed;
}

/* 紙のヴェール。大理石を残しつつ全体のコントラストを落とす。
   石をもっと見せたいなら数値を下げる／落ち着かせたいなら上げる。 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(255,255,255,.15);
}

/* 元の設計では .main / .sidebar は transparent で、本文は地の上に
   直接乗っていた。大理石の上にそのまま文字を置くと読めないので、
   ここだけ紙の面を敷いて浮かせる。枠と影は既存のカードに合わせる。 */
.main,#main,.sidebar{
  background:rgba(255,255,255,.92);
  border:1px solid var(--sk-line);
  border-radius:3px;
  box-shadow:0 10px 34px -20px rgba(0,0,0,.5);
}
.main{padding:30px 34px}
.sidebar{padding:20px 18px}

/* トップも他ページと同じく面を敷く。
   カードと .sk-points は不透明なので面が無くても読めるが、
   末尾の「はじめての方へ」は素の <p> で、大理石に直乗りすると
   本文もリンクも読みにくかったため。ヒーローは box-shadow で
   全幅に抜けるので、面の上に乗っても見た目は変わらない。 */

/* スマホ。iOS は background-attachment:fixed が正しく動かないので
   scroll に切り替え、あわせて軽い縦長画像を使う。 */
@media screen and (max-width:834px){
  body{
    background-image:url("assets/marble-bg-mobile-v2.webp");
    background-attachment:scroll;
  }
  .main{padding:20px 16px}
  .sidebar{padding:16px 14px}
}

/* 印刷では背景を落とす（上の @media print と同じ意図） */
@media print{
  body{background:#fff!important}
  body::before{display:none}
  .main,#main,.sidebar{background:#fff;border:0;box-shadow:none}
}

/* --- トップのサイト名（叛逆明朝） -------------------------------------
   フォントのライセンス上、フォントファイルはサーバーに置けないので、
   文字を焼いた画像を置いている。詳しい理由は functions.php の 07。 */
.sk-hero__title{
  display:block;
  width:min(820px,92%);
  height:auto;
  margin:0 auto 30px;
}

/* サイト名が主役になったぶん、キャッチコピーは一段下げる */
.sk-front .sk-hero h1{font-size:26px;line-height:1.5}

@media screen and (max-width:834px){
  .sk-hero__title{width:100%;margin-bottom:18px}
  .sk-front .sk-hero h1{font-size:17px}
}


/* ==================================================================
   12. 記事の中の局面図（2026-09-06 追加）
   ------------------------------------------------------------------
   articles/build.py が出力した articles/build/diagram.css をそのまま
   連結したもの。手で直さず、build.py 側を直して貼り直すこと。
   盤と駒の画像は saikyo-chess プラグインのものを絶対パスで見に行く。
   ================================================================== */
/* --- 記事の中の局面図 -------------------------------------------------
   盤と駒はゲームと同じ画像・同じ寸法比を使う（別の絵を作らない）。
   数値の出どころは chess/css/style.css の :root。勝手に変えると駒がずれる。 */
.sk-diagram{margin:2em 0;padding:0}
/* 幅はこちらで決める。枠の太さは「親の幅」に対する割合なので、
   盤に直接 width を書くと記事カラムの幅で枠の太さが変わってしまう。 */
.sk-diagram__wrap{width:min(400px,100%);margin:0 auto}
.sk-diagram__board{
  position:relative;width:100%;aspect-ratio:1/1;
  padding:8.1464%;                       /* 枠の太さ */
  container-type:inline-size;
  background:url("/wp-content/plugins/saikyo-chess/assets/img/board-v2.webp") center/100% 100% no-repeat;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
}
.sk-diagram__grid{position:relative;width:100%;height:100%}
/* 印はゲームの盤と同じ描きかた。z-index で駒の上に載せるので、
   駒が置いてあるマスでも印が見える（ゲームの .cell と同じ重なり順）。 */
.sk-diagram__mk,.sk-diagram__dot,.sk-diagram__cap{
  position:absolute;width:12.5%;height:12.5%;z-index:1;
  left:calc(12.5% * var(--f));top:calc(12.5% * var(--r));
}
.sk-diagram__mk{background:rgba(200,162,78,.10);box-shadow:inset 0 0 0 2px rgba(200,162,78,.85)}
.sk-diagram__dot{background:radial-gradient(circle at 50% 50%,rgba(28,24,18,.42) 0 15%,transparent 16%)}
.sk-diagram__cap{background:
  linear-gradient(135deg,rgba(28,24,18,.42) 0 22%,transparent 22%) left top/38% 38% no-repeat,
  linear-gradient(225deg,rgba(28,24,18,.42) 0 22%,transparent 22%) right top/38% 38% no-repeat,
  linear-gradient(45deg, rgba(28,24,18,.42) 0 22%,transparent 22%) left bottom/38% 38% no-repeat,
  linear-gradient(315deg,rgba(28,24,18,.42) 0 22%,transparent 22%) right bottom/38% 38% no-repeat}
.sk-diagram__pc{
  position:absolute;left:-4.6875%;top:-8.75%;width:21.875%;height:19.375%;
  background-image:url("/wp-content/plugins/saikyo-chess/assets/img/pieces-v1.webp");
  background-size:600% 200%;background-repeat:no-repeat;
  background-position:var(--sx) var(--sy);
  transform:translate(calc(57.142857% * var(--f)),calc(64.516129% * var(--r)));
}
/* 盤に載せる文字。マスの下辺にまたがる位置に置く（駒の頭を隠さない） */
.sk-diagram__lb{
  position:absolute;width:12.5%;height:12.5%;z-index:2;pointer-events:none;
  left:calc(12.5% * var(--f));top:calc(12.5% * var(--r));
  display:flex;align-items:flex-end;justify-content:center;
}
.sk-diagram__lb>span{
  background:rgba(20,20,20,.88);color:#fff;border-radius:3px;
  font-family:var(--sk-gothic,sans-serif);font-size:clamp(9px,3.1cqw,13px);
  line-height:1;padding:.34em .55em;white-space:nowrap;letter-spacing:.02em;
  transform:translateY(50%);
}
.sk-diagram__coords{
  position:absolute;pointer-events:none;display:flex;
  font-family:var(--sk-mincho,serif);font-size:clamp(8px,2.6cqw,12px);
  letter-spacing:.06em;color:#514c44;
}
.sk-diagram__coords span{flex:1;text-align:center}
.sk-diagram__files{left:8.1464%;right:8.1464%;bottom:0;height:8.1464%;align-items:center}
.sk-diagram__ranks{top:8.1464%;bottom:8.1464%;left:0;width:8.1464%;flex-direction:column}
.sk-diagram__ranks span{display:flex;align-items:center;justify-content:center}
.sk-diagram figcaption{
  margin:10px auto 0;max-width:min(520px,100%);
  font-size:13px;line-height:1.85;color:var(--sk-ink-2,#3f3f3f);text-align:left;
}
/* 手順の箱 */
.sk-line{
  margin:1.6em 0;padding:14px 16px;
  background:var(--sk-surface,#fff);border:1px solid var(--sk-line,rgba(0,0,0,.14));
  border-radius:3px;font-size:14px;line-height:2;
}
.sk-line p{margin:0}
.sk-line p+p{margin-top:.4em}
.sk-line__moves{font-family:var(--sk-mincho,serif);letter-spacing:.02em;font-weight:600}