@charset "utf-8";
/* ====================================================
   サイト共通の動き（カーソル・ページ遷移・読み込み）
   トップページの世界観（細い線・ゆっくりした動き）を全ページに通す。

   動きを減らす設定の利用者には、遷移もカーソルの追従も出さない。
   ==================================================== */

:root { --m-bg: #14171A; --m-fg: #B8B9BA; }   /* 2026-10-16 全ページをトップと同じ黒にそろえたので配色は1つ */

/* ---------- ページ遷移の幕 ----------
   サイト内のリンクから来たときだけ出る（検索などから直接来た人には出さない）。
   幕は CSS だけで自動的に消えるので、JS が失敗しても中身が隠れたままにならない。 */
.m-veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.m-veil canvas { width: 44px; height: 44px; opacity: .55; }

/* 入ってくるとき：ページ表示の最初の瞬間から幕を出しておき、すぐ消す。
   JS が作る .m-veil はページ末尾で生成されるので間に合わず、中身が一瞬見えてしまう。
   そのため、入るときの幕だけは <html> の疑似要素で作る。 */
html.is-entering::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--m-bg);
  pointer-events: none;
  animation: m-veil-out .55s ease .08s forwards;
}

@keyframes m-veil-out {
  to { opacity: 0; visibility: hidden; }
}

/* 出ていくとき：幕を下ろしてから移動する */
html.is-leaving .m-veil {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .38s ease, visibility 0s;
}

/* ---------- カーソル ----------
   細い輪と点。マウスとトラックパッドの環境だけで出す（スマホでは出さない）。 */
.m-cursor, .m-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9500;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}

.m-cursor {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--m-fg);
  transition: opacity .3s ease, width .35s ease, height .35s ease, margin .35s ease, background-color .35s ease;
}

.m-cursor-dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--m-fg);
}

html.m-cursor-ready .m-cursor { opacity: .45; }
html.m-cursor-ready .m-cursor-dot { opacity: .9; }

/* リンクの上では輪が広がり、点は消える */
html.m-on-link .m-cursor {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  opacity: .6;
}
html.m-on-link .m-cursor-dot { opacity: 0; }

/* 押した瞬間に少し縮む */
html.m-pressing .m-cursor {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

/* 独自カーソルを出す環境では標準の矢印を隠す。
   ただし文字を入力する欄では標準のカーソルを残す（入力位置が分からなくなるため）。 */
html.m-cursor-ready, html.m-cursor-ready a, html.m-cursor-ready button { cursor: none; }
html.m-cursor-ready input,
html.m-cursor-ready textarea,
html.m-cursor-ready select { cursor: auto; }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.is-entering::before { animation: none; display: none; }
  .m-veil { transition: none; }
}

/* ---------- あそび（2026-10-16） ---------- */
/* 本文の要素が、見えた順に少し下からふわっと出る（.m-rise を付けたもの。JS が順番に遅延を付ける） */
.m-rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.m-rise.is-in { opacity: 1; transform: none; }

/* リンクの下線が左から伸びる（本文中のリンク以外の、ナビやボタン） */
.m-line { position: relative; text-decoration: none !important; }
.m-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.2,.7,.2,1); opacity: .7;
}
.m-line:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .m-rise { opacity: 1; transform: none; transition: none; }
  .m-line::after { transition: none; }
}

/* 読み込みの最初の一瞬、ふわっと出す対象を隠しておく（m-pre は head のスクリプトが付け、motion.js が外す）。
   JS が動かなかったときに中身が隠れたままにならないよう、1.5 秒後に CSS だけで必ず表示する */
html.m-pre main > *, html.m-pre .b-list > li, html.m-pre .b-body > *, html.m-pre .b-head, html.m-pre .b-crumb,
html.m-pre .b-article__date, html.m-pre .b-article__title, html.m-pre .b-title, html.m-pre .site-header,
html.m-pre .site-footer, html.m-pre .b-foot {
  opacity: 0;
  animation: m-failsafe 0s linear 1.5s forwards;
}
@keyframes m-failsafe { to { opacity: 1; } }