/* =============================================================
   制作の記録（/making/）共通スタイル　2026-07-27 ／ 2026-08-03 見た目をゲームへ寄せた
   方針:
     ・🔄 2026-08-03 変更【ゲーム画面の雰囲気へ寄せる】
       🚫 旧方針は「明朝見出しの読み物トーン。**ゲームの世界観は持ち込まない**」でした。**逆になりました。**
          消さずに残します（次に読む人が、古い方針を現行と読み違えないため）
     ・地は明るいまま保つ … 長文を読む頁なので、暗くすると読みにくくなる。
       ゲームの【濃い紫の地＋蛍光】は【誘導枠・ボタンの中】でだけ使う（下の .play）
     ・ヘッダーとフッターだけトップと共通のまま。同じサイトだと分かるようにするため（＝ここは寄せない）
   ============================================================= */

:root{
  --ink:#1d2430;      /* 本文 */
  --sub:#5d6675;      /* 補足 */
  --faint:#8c95a5;    /* さらに薄い補足 */
  --line:#dde3ec;     /* 罫線 */
  --bg:#f7f9fc;       /* 背景 */
  --card:#fff;

  /* 🎮 ゲームへ寄せるための書体（2026-08-03 追加）
     ゲーム本番の font-family と**同じ並び**にしてあります（実測: ゲームCSS内 Zen Maru=62件／明朝=0件）。
     🚫🚫【Google Fonts のリンクを足さないこと】
        足すと **外部への通信が1本増えます**。解析まわりの方針が固まるまで、
        通信を増やす変更は入れないこと（決めていないことを、既成事実にしないため）。
        ここに書いた "Zen Maru Gothic" は【端末に入っていれば使う】だけで、通信は1本も増えません。
     🔵 Windows には丸ゴシックが内蔵されていないので Yu Gothic に落ちます。
        **それはゲーム側とまったく同じ条件**なので、ずれは増えません（だから同じ並びにしています）。 */
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;

  /* 🎮 飾りの色（2026-08-03 変更）。ゲームの濃い紫の系統。
     🚨 ゲームの蛍光色（#fff06f 黄／#8df4ff 水／#ff61bd 桃）は**この明るい地には置けません**。
        実測 on #f7f9fc … #fff06f=1.11:1 ／ #8df4ff=1.21:1 ／ #ff61bd=2.59:1（**3つとも不合格**）
        だから蛍光は【濃い紫の地の上】でだけ使います（.play の中）。実測 on #241d2e … #8df4ff=12.8:1 */
  --deco:#5b3a8e;     /* 見出しの飾り・11px前後の小さな文字にも使用。実測 on #f7f9fc = 8.16:1（合格） */
  --accent:#6d28d9;   /* リンク。実測 on #f7f9fc = 6.74:1（合格。旧 #3b5bdb は 5.37:1） */
  --game-d:#241d2e;   /* ゲームの濃い地。実測 on #f7f9fc = 15.43:1 */
  --game-d2:#38284a;  /* ゲームの濃い地（薄いほう）。実測 on #f7f9fc = 12.68:1 */
  --game-y:#fff06f;   /* ゲームの蛍光の黄。**濃い地の上でだけ使う**（on #241d2e = 11.4:1 相当） */

  /* 🚨 --gold は【ヘッダーとフッターの帯＝トップと共通の部分】専用に残しています。
     ここを寄せるとトップとの繋がりが切れるので、値も用途も変えていません。
     実測 on #f7f9fc … #8f6f36=4.43:1（合格） / #c8a25c=2.27:1（不合格・文字が読めない）
     トップは暗い地なので #c8a25c=8.17:1 が正。同じ名前で【地が逆だから値も逆】が正しい。
     この値はトップの --gold-d と同値です（2026-07-30 実測して確認） */
  --gold:#8f6f36;
  --night:#080c16;    /* ヘッダー。トップと同色 */
  --pr:#b7791f;       /* PR表示。🚫 2026-08-03 の寄せ直しの対象外（大きさ・色は現状維持） */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--maru);   /* 🔄 2026-08-03 "Zen Kaku Gothic New" から丸ゴシックへ（ゲームと同じ並び） */
  background:var(--bg); color:var(--ink);
  line-height:2; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
/* 🔨 2026-08-11: 長いURLをそのまま表示しているリンクが、スマホ幅で折り返せず
   ページごと横にはみ出していた（/making/ai-anime を 375px で実測 → scrollWidth 404px・はみ出し13件）。
   犯人は <table>ではありません（.table-scroll の overflow-x は正しく効いていました）。
   anywhere は「はみ出すときだけ」割るので、日本語の本文の見え方は変わりません。
   🔬 いちばん長い実例: https://x.com/NEMUNFT/status/… （表示文字53文字） */
a{color:var(--accent); text-decoration:none; overflow-wrap:anywhere}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- 共通ヘッダー（トップと共通） ---------- */
.site-head{
  background:var(--night); padding:16px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.site-head__logo{
  font-family:"Shippori Mincho B1",serif; font-weight:700; font-size:20px;
  letter-spacing:.14em; color:#e8e3d8;
}
.site-head__logo:hover{text-decoration:none; color:#fff}
.site-head__en{font-size:10.5px; letter-spacing:.22em; color:#a9a498}
.site-head__nav{display:flex; gap:18px; font-size:12.5px}
.site-head__nav a{color:#b9c8dd; letter-spacing:.1em}
.site-head__nav a[aria-current="page"]{color:#e8e3d8; border-bottom:1px solid var(--gold); padding-bottom:2px}
.site-head__cta{
  margin-left:auto; font-size:12.5px; letter-spacing:.14em;
  color:#d8b673; border:1px solid rgba(200,162,92,.6); padding:9px 20px;
}
.site-head__cta:hover{text-decoration:none; background:rgba(200,162,92,.12)}

/* ---------- 本文の器 ---------- */
.wrap{max-width:760px; margin:0 auto; padding:56px 20px 90px}

/* ---------- ハブの導入 ---------- */
.hub-intro{margin-bottom:44px}
.hub-intro__kicker{
  font-size:11px; letter-spacing:.36em; color:var(--deco); margin-bottom:10px;
}
.hub-intro h1{
  font-family:var(--maru); font-size:32px; font-weight:800;
  letter-spacing:.06em; line-height:1.55; margin-bottom:16px;
}
.hub-intro__lead{font-size:15px; color:var(--sub); line-height:2.1}

/* ---------- カテゴリ ---------- */
.cats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px}
.cats__item{
  font-size:13px; letter-spacing:.08em; color:var(--sub);
  border:1px solid var(--line); background:var(--card);
  border-radius:999px; padding:7px 18px;
}
.cats__item:hover{text-decoration:none; border-color:var(--accent); color:var(--accent)}
.cats__item.is-active{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- 記事カード ---------- */
.list{display:flex; flex-direction:column; gap:18px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; transition:border-color .18s, transform .18s;
}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card__link{display:flex; gap:0; color:inherit}
.card__link:hover{text-decoration:none}
.card__thumb{
  width:240px; flex:none; min-height:150px; background:#eef2f8;
  border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.card__thumb img{width:100%; height:100%; object-fit:cover}
.card__thumb-alt{font-size:12px; color:var(--faint); letter-spacing:.06em}
.card__body{padding:22px 24px; flex:1}
.card__meta{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.card__cat{
  font-size:11.5px; letter-spacing:.1em; color:var(--deco);
  border:1px solid rgba(91,58,142,.45); border-radius:999px; padding:2px 10px;
}
.card__date{font-size:12px; color:var(--faint); letter-spacing:.06em}
.card__day{
  font-size:11px; letter-spacing:.06em; color:var(--sub);
  background:#eef2f8; border-radius:4px; padding:2px 9px;
}
.card__pr{
  font-size:11px; font-weight:700; letter-spacing:.14em; color:#fff;
  background:var(--pr); border-radius:3px; padding:2px 9px;
}
.card__title{
  font-family:var(--maru); font-size:19px; font-weight:700;
  line-height:1.75; letter-spacing:.01em; margin-bottom:8px;
}
.card__sub{font-size:13.5px; color:var(--sub); line-height:1.9}
.list__note{margin-top:34px; font-size:13px; color:var(--faint); line-height:2}

/* ---------- 記事本文 ---------- */
.article{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:44px 46px 40px}
.article__meta{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.article__cat{
  font-size:11.5px; letter-spacing:.1em; color:var(--deco);
  border:1px solid rgba(91,58,142,.45); border-radius:999px; padding:2px 10px;
}
.article__date{font-size:12.5px; color:var(--faint); letter-spacing:.06em}
/* 「開発○日目のできごと」＝出来事の日に紐づく数字。執筆日ではない */
.article__day{
  font-size:11.5px; letter-spacing:.08em; color:var(--sub);
  background:#eef2f8; border-radius:4px; padding:3px 11px;
}
.article h1{
  font-family:var(--maru); font-size:29px; font-weight:800;
  line-height:1.65; letter-spacing:.02em; margin-bottom:12px;
}
.article__sub{font-size:15px; color:var(--sub); line-height:1.9; margin-bottom:28px}
.article h2{
  font-family:var(--maru); font-size:20px; font-weight:700;
  letter-spacing:.02em; line-height:1.75;
  margin:44px 0 14px; padding-left:13px; border-left:4px solid var(--deco); border-radius:2px;
}
.article p{font-size:15.5px; margin-bottom:18px; line-height:2.15}
.article strong{font-weight:700; color:#111}
.article ul{margin:0 0 20px 4px; list-style:none}
.article ul li{
  font-size:15px; line-height:2.05; padding-left:20px; position:relative; margin-bottom:8px;
}
.article ul li::before{
  content:""; position:absolute; left:4px; top:.95em;
  width:6px; height:6px; background:var(--deco); border-radius:50%;
}
.article__end{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line);
  font-size:15px; color:var(--sub); line-height:2.1;
}

/* 会話の引用（記事の"入口"） */
.quote{
  margin:26px 0; padding:22px 26px; background:#f4f7fc;
  border-left:4px solid var(--accent); border-radius:0 8px 8px 0;
}
.quote p{
  font-family:var(--maru); font-size:20px; font-weight:700;
  line-height:1.85; margin:0; color:#111;
}

/* ルール（記事の"核心"。仕組みそのもの）
   引用とは種類が違うので、同じ見た目にしない。
   引用＝人の言葉＝左罫の柔らかい囲み ／ ルール＝掲示された決まり＝金の枠で正面から掲示する */
.rule{
  margin:32px 0; padding:26px 28px; position:relative;
  background:#f6f1fd; border:2px solid var(--deco); border-radius:14px;
  box-shadow:0 4px 18px rgba(91,58,142,.12);
}
.rule::before{
  content:"きまり"; position:absolute; top:-11px; left:22px;
  font-size:11px; font-weight:700; letter-spacing:.22em; color:#fff;
  background:var(--deco); border-radius:999px; padding:2px 12px;
}
.rule p{
  font-family:var(--maru); font-size:21px; font-weight:800;
  line-height:1.9; margin:0; color:var(--game-d2); letter-spacing:.01em;
}
@media (max-width:767px){
  .rule{padding:22px 18px; margin:26px 0}
  .rule p{font-size:17.5px; line-height:1.9}
  .rule::before{left:16px; font-size:10px}
}

/* ===== 制作途中の記事のための部品（2026-08-03 追加） =====
   .wip … これから書き足す箇所の目印。中の文字は書き換えず、囲うだけ。 */
.wip{
  display:inline-block; padding:1px 8px; border-radius:4px;
  border:1px dashed var(--line); background:#eef2f8;
  color:var(--faint); font-size:.88em; line-height:1.9;
}
p.wip{display:block; padding:10px 12px}

/* 記事中の表。狭い画面でも本文ごと横に流れないよう、表だけを横スクロールさせる */
.table-scroll{overflow-x:auto; margin:22px 0; -webkit-overflow-scrolling:touch}
.article table{border-collapse:collapse; width:100%; min-width:420px; font-size:14.5px}
.article th, .article td{border:1px solid var(--line); padding:9px 12px; text-align:left; line-height:1.9}
.article th{background:#eef2f8; font-weight:700; white-space:nowrap}

/* コピーして使ってもらう用の文字列（プロンプトなど） */
.article pre{
  overflow-x:auto; margin:14px 0; padding:14px 16px;
  border:1px solid var(--line); border-radius:8px; background:#f6f8fb;
  -webkit-overflow-scrolling:touch;
}
.article pre code{font-size:13.5px; line-height:1.9; white-space:pre-wrap; word-break:break-word}

/* 記事冒頭の但し書き（「この記事は制作途中です」など） */
.article__note{
  margin:18px 0 26px; padding:12px 16px;
  border-left:3px solid var(--line); background:#f6f8fb;
  color:var(--faint); font-size:14px; line-height:1.9;
}

/* スクショ＋キャプション */
.shot{margin:28px 0}
.shot img{border:1px solid var(--line); border-radius:8px; width:100%}
.shot__ph{
  border:1px dashed var(--line); border-radius:8px; background:#eef2f8;
  min-height:220px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:13px; text-align:center; padding:20px; line-height:1.9;
}
.shot__cap{margin-top:9px; font-size:12.5px; color:var(--faint); line-height:1.8}

/* ゲームへの誘導
   🎮 2026-08-03【この枠だけ、ゲームの配色をそのまま持ち込みます】
      ゲーム本番の実測 … 濃い紫の地 #241d2e / #38284a に、蛍光の黄 #fff06f・水 #8df4ff・桃 #ff61bd
      🔑 蛍光色は明るい地では読めません（on #f7f9fc で 1.11〜2.59:1）。**濃い地の上でだけ効きます**
         実測 … #8df4ff on #241d2e = 12.8:1 ／ 濃い紫の文字 #241d2e on #fff06f = 13.91:1 */
.play{
  margin:34px 0; padding:26px 28px; text-align:center;
  background:linear-gradient(135deg,var(--game-d),var(--game-d2)); border-radius:16px;
}
.play__lead{font-size:14px; color:#d9d2ee; margin-bottom:16px; line-height:1.9}
.play__btn{
  display:inline-block; font-family:var(--maru); font-weight:800;
  font-size:17px; letter-spacing:.1em; color:var(--game-d);
  background:var(--game-y); padding:15px 42px; border-radius:999px;
}
.play__btn:hover{text-decoration:none; filter:brightness(1.06)}
.play__note{margin-top:12px; font-size:11.5px; color:#9d93bb; letter-spacing:.08em}

/* 「準備中」の見せ方（2026-08-03 追加）。
   遊びに行くボタンを、押せない見た目にする。href そのものを外してあるので押しても飛びません。
   🚫 pointer-events では消さないこと（親ごと効いて、隠したくない子まで押せなくなります）。 */
.is-soon{opacity:.55; cursor:default}

/* PR表示（記事の冒頭 ／ リンクの直前）。2026-08-03 に大きさと色を見直しました。
   🚫 これより小さく・薄くしないこと。装飾で埋もれさせないこと。
   　 本文と同じ大きさ以上・本文より濃い、を保つこと。 */
.pr-top{
  margin-bottom:24px; padding:12px 16px; border:1px solid rgba(183,121,31,.4);
  background:#fffaf0; border-radius:6px; font-size:15.5px; color:#111; line-height:1.85;
}
/* リンクの直前に置く1行。本文と同じ大きさ・同じ濃さ以上で出す */
.pr-lead{
  font-size:15.5px; color:#111; font-weight:700; line-height:2.15; margin-bottom:6px;
}
.pr-inline{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em;
  color:#fff; background:var(--pr); border-radius:3px; padding:2px 9px;
  margin-right:8px; vertical-align:2px;
}

/* メルマガ枠の差し込み口 */
.mg-slot{margin-top:48px}
.mg-slot__todo{
  border:1px dashed var(--line); border-radius:8px; background:var(--card);
  padding:28px 20px; text-align:center; color:var(--faint); font-size:13px;
}

/* 連載ナビ */
.pager{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.pager a{
  flex:1; min-width:180px; background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:16px 18px; color:inherit;
}
.pager a:hover{text-decoration:none; border-color:var(--accent)}
.pager__label{display:block; font-size:11px; letter-spacing:.14em; color:var(--faint); margin-bottom:5px}
.pager__title{font-size:13.5px; line-height:1.75}
.pager__back{
  display:block; text-align:center; margin-top:22px;
  font-size:13px; letter-spacing:.1em;
}

/* ---------- 共通フッター ---------- */
.site-foot{
  background:var(--night); text-align:center; padding:34px 20px;
  border-top:1px solid rgba(232,227,216,.1);
}
.site-foot__links{display:flex; justify-content:center; gap:26px; margin-bottom:16px; flex-wrap:wrap}
.site-foot__links a{color:#8f9aae; font-size:12px; letter-spacing:.12em}
.site-foot__links a:hover{color:#e8e3d8; text-decoration:none}
.site-foot__copy{font-size:11.5px; letter-spacing:.14em; color:#5f6778}

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width:767px){
  .site-head{padding:14px 16px; gap:12px}
  .site-head__logo{font-size:18px}
  .site-head__en{display:none}
  .site-head__nav{order:3; width:100%; gap:16px}
  .site-head__cta{font-size:11.5px; padding:8px 14px}

  .wrap{padding:38px 16px 64px}
  .hub-intro h1{font-size:25px}
  .hub-intro__lead{font-size:14px}

  .card__link{flex-direction:column}
  .card__thumb{width:100%; min-height:170px; border-right:none; border-bottom:1px solid var(--line)}
  .card__body{padding:20px 18px}
  .card__title{font-size:17px}

  .article{padding:28px 20px 26px; border-radius:8px}
  .article h1{font-size:23px}
  .article h2{font-size:18px; margin:34px 0 12px}
  .article p{font-size:15px; line-height:2.1}
  .quote{padding:18px 18px}
  .quote p{font-size:17px}
  .play{padding:22px 18px}
  .play__btn{font-size:15px; padding:14px 26px; letter-spacing:.1em}
  .pager a{min-width:0}
  .site-foot__links{gap:16px}
}