@charset "UTF-8";
/*
 * bg-effect.css — 背景の常時エフェクト（御家騒動 / A-GARTEN）
 *  縦書き文字帯（左右端・60秒ループ）
 *
 * ■ 使い方（各htmlに2行）
 *    <head> 内：<link rel="stylesheet" href="/assets/css/bg-effect.css">
 *    <body> 直後：<div class="bg-fx" aria-hidden="true"></div>
 *
 * ■ 重なり順：body の背景グラデ ＜ エフェクト（z-index:0） ＜ 本文 main（z-index:1） ＜ ヘッダー/フッター（100）
 *  main 自体に背景グラデを持たせると、エフェクトがその下に隠れる。グラデは body 側に置くこと。
 *
 * ■ 文言の差し替え：下の .bg-fx::before, .bg-fx::after（左右共通）の content 1箇所だけ直す。
 *  translateY(-50%) で継ぎ目なくループさせるため、content は「1周分を2回」連結した文字列にする。
 *  1周分の長さは画面の高さ以上が必要（14px＋字間0.6emで1字22.4px → 縦1920pxなら86字以上）。
 */

/* ---- 縦書き文字帯（.bg-fx は動かない入れ物） ---- */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-fx::before,
.bg-fx::after {
  /* 左右共通の文言：家訓（1周＝127字）×2 */
  content: "御院家訓　一、土ハ家ノ根ナリ。根ヲ売ル者ハ家ヲ売ル。　一、信ハ三百年ニ積ミ、一夜ニ崩ル。　一、名ハ預カリ物ナリ。私スベカラズ。　一、本家ハ決メ、分家ハ記ス。　一、和ハ交ハシテ成ル。　一、当主ハ土地ト共ニ在リ。去ルコト能ハズ。　一、血ヨリ重キハ証文ナリ。　御院家訓　一、土ハ家ノ根ナリ。根ヲ売ル者ハ家ヲ売ル。　一、信ハ三百年ニ積ミ、一夜ニ崩ル。　一、名ハ預カリ物ナリ。私スベカラズ。　一、本家ハ決メ、分家ハ記ス。　一、和ハ交ハシテ成ル。　一、当主ハ土地ト共ニ在リ。去ルコト能ハズ。　一、血ヨリ重キハ証文ナリ。　";
  position: absolute;
  top: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .6em;
  color: var(--gold);
  opacity: .24;
  animation: bgFxBand 60s linear infinite;
}
/* 左 */
.bg-fx::before {
  left: 18px;
}
/* 右：PCのみ。左と逆向きに流す */
.bg-fx::after {
  right: 18px;
  animation-direction: reverse;
}
@keyframes bgFxBand { to { transform: translateY(-50%); } }

/* ---- 本文をエフェクトより手前に ---- */
body > main { position: relative; z-index: 1; }

/* ============ SP ============ */
@media (max-width: 900px) {
  .bg-fx::before {
    left: 4px;
    font-size: 10px;
    opacity: .30;
    animation-duration: 80s;
  }
  .bg-fx::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fx::before,
  .bg-fx::after { animation: none; }
}