/* ============================================================
   REPEL GUARD — 警告画面
   ------------------------------------------------------------
   演出の設計方針（J-horror の作法に寄せている）
     第1相 0.0–1.8s  完全な暗転と完全な無音。何も起きない「間」。
     第2相 1.8–5.4s  低い唸りと粒子が、気づかぬ速さでにじり寄る。
     第3相 5.4s      断ち切るような一撃。文字が焼き付く。
     第4相 それ以降   呼吸のような明滅と滴りだけが残る。

   ★安全上の重要事項（意図的な設計）
     点滅は毎秒3回未満に厳密に抑えている。これを超えると
     光感受性てんかんの発作を誘発しうるため（WCAG 2.3.1 / JIS X 8341-3）。
     嫌がらせの相手であっても、健康被害はこちらの責任問題になる。
     赤い閃光の連打は「怖い」のではなく単に危険なので採用しない。
     ゆっくりした呼吸のような明滅の方が、実際に不気味でもある。
   ============================================================ */

#repel-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  background: #000;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

#repel-guard-overlay.is-active { display: block; }

/* ---- 粒子（フィルムグレイン） ---- */
#repel-guard-overlay .rg-noise {
  position: absolute;
  inset: -30%;
  opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  transition: opacity 3.2s linear;
  will-change: transform;
}

/* ---- 赤い暈（かさ）。ごくゆっくり呼吸する ---- */
#repel-guard-overlay .rg-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 46%,
              rgba(122,0,6,.42) 0%, rgba(44,0,3,.62) 36%, #000 76%);
  transition: opacity 3.4s ease-in;
}

/* ---- 滴り ---- */
#repel-guard-overlay .rg-drip {
  position: absolute;
  top: -14vh;
  width: 3px;
  height: 22vh;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #7d0008 26%, #c60010 86%, rgba(255,60,60,.85));
  box-shadow: 0 0 7px rgba(180,0,8,.75);
  opacity: 0;
}

/* ---- 文字 ---- */
#repel-guard-overlay .rg-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vh 6vw;
  box-sizing: border-box;
  gap: .55em;
  overflow-y: auto;
  z-index: 2;
}

#repel-guard-overlay[dir="rtl"] .rg-content { direction: rtl; }

#repel-guard-overlay .rg-inner {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
}

#repel-guard-overlay .rg-ident,
#repel-guard-overlay .rg-title,
#repel-guard-overlay .rg-body,
#repel-guard-overlay .rg-reason,
#repel-guard-overlay .rg-dossier,
#repel-guard-overlay .rg-tail {
  opacity: 0;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  margin: 0;
}

/* ============================================================
   幽霊レイヤー（円山応挙の幽霊画様式）
   ------------------------------------------------------------
   ・単色（無彩色）のみで構成。色を持つのは周囲の赤い空間だけ。
   ・体は輪郭が滲み、下は消える（＝足を描かない、応挙以来の型）。
   ・一撃（5.4秒）の瞬間に現れ、約3秒でかき消える。
     現れて→消えるまでの「間」自体が本体で、常に動かし続けない。
   ・prefers-reduced-motion では、滲み・伸縮を止めて
     ただの静止フェードだけにする（下の @media で上書き）。
   ============================================================ */
#repel-guard-overlay .rg-yurei {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(46vw, 340px);
  height: 78%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.08);
  z-index: 1;
  /* ★ mix-blend-mode は使わない。
     luminosity 等のブレンドは、単色にしたいはずの幽霊に
     背景の赤を逆に混ぜ込んでしまうため（実測で確認済み）。
     単色を保つには、フィルタで無彩色化した上で通常合成するだけでよい。 */
}
#repel-guard-overlay .rg-yurei svg { width: 100%; height: 100%; display: block; }

/* ---- 相手が名乗った情報。ラベルは付けない。素のまま晒す。 ---- */
#repel-guard-overlay .rg-ident {
  margin-bottom: .5em;
  line-height: 2.05;
}
#repel-guard-overlay .rg-ident-line {
  font-size: clamp(13px, 1.75vw, 18px);
  letter-spacing: .3em;
  text-indent: .3em;
  color: #b9b4b1;
}
#repel-guard-overlay .rg-ident-line.rg-ident-first {
  font-size: clamp(18px, 2.9vw, 30px);
  letter-spacing: .4em;
  text-indent: .4em;
  color: #ece8e6;
  margin-bottom: .18em;
}

#repel-guard-overlay .rg-title {
  font-size: clamp(23px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.42;
  color: #86000a;
  text-shadow: 0 0 4px #ff0a14, 0 0 1px #ff2a3a, 0 0 32px rgba(140,0,0,.95), 0 2px 0 #1a0000;
}

#repel-guard-overlay .rg-body {
  font-size: clamp(16px, 2.8vw, 30px);
  letter-spacing: .12em;
  color: #d6d2cf;
}
/* 幽霊が現れる瞬間（一撃）に、文字の血の気を一段引かせる演出は
   下の rg-p3 / rg-p4 のブロックにまとめてある（同一選択子の重複を避けるため）。 */

/* ---- 判定理由。小さく赤く、事務的に。 ----
   理由を書かないと相手は何が起きたか分からず、
   「サイトが壊れた」で片付けてしまう。名指しで理由を告げた方が効きます。 */
#repel-guard-overlay .rg-reason {
  margin-top: .85em;
  font-size: clamp(11px, 1.35vw, 14px);
  letter-spacing: .22em;
  text-indent: .22em;
  color: #a8161c;
  font-family: "Noto Serif JP", serif;
}

/* ---- 素性の一覧。小さく、事務的に、淡々と。 ---- */
#repel-guard-overlay .rg-dossier {
  margin-top: 1.25em;
  width: 100%;
  max-width: 620px;
  padding: 15px 18px 13px;
  border: 1px solid rgba(150,10,14,.4);
  background: rgba(24,0,2,.55);
  text-align: left;
  position: relative;
}
#repel-guard-overlay[dir="rtl"] .rg-dossier { text-align: right; }

#repel-guard-overlay .rg-dossier-tag {
  position: absolute;
  top: -.78em;
  left: 14px;
  padding: 0 8px;
  background: #0a0001;
  font-size: 10px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: #a8161c;
}
#repel-guard-overlay[dir="rtl"] .rg-dossier-tag { left: auto; right: 14px; }

#repel-guard-overlay .rg-dossier dl { margin: 0; }
#repel-guard-overlay .rg-dossier dd {
  margin: 0 0 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.72;
  letter-spacing: .01em;
  color: #8e8480;
  word-break: break-all;
}
#repel-guard-overlay .rg-dossier dd.rg-dossier-msg {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(150,10,14,.22);
  color: #6d6360;
  max-height: 5.2em;
  overflow: hidden;
}
#repel-guard-overlay .rg-dossier-rec {
  margin-top: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: .2em;
  color: #a8161c;
}

#repel-guard-overlay .rg-tail {
  margin-top: 1.05em;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: .3em;
  color: #6b5f5f;
  text-indent: .3em;
}

/* ============================================================
   第2相：にじり寄る
   ここが真っ暗なだけだと「読み込み中かな」で終わってしまい、
   一撃までの数秒を待たずにタブを閉じられる。
   そこで、文字を「かろうじて見える」濃さで置き、ゆっくり近づける。
   相手が画面に顔を寄せた瞬間に第3相が来る、という設計。
   ============================================================ */
#repel-guard-overlay.rg-p2 .rg-noise    { opacity: .26; animation: rg-grain 1.1s steps(3) infinite; }
#repel-guard-overlay.rg-p2 .rg-vignette { opacity: .72; }
#repel-guard-overlay.rg-p2 .rg-title    { animation: rg-approach 3.6s ease-in 1 both; }

/* ============================================================
   第3相：一撃（1回だけの遷移。連続点滅ではない）
   ============================================================ */
#repel-guard-overlay.rg-p3 {
  animation: rg-strike .62s cubic-bezier(.36,.07,.19,.97) 1 both;
}
#repel-guard-overlay.rg-p3 .rg-noise    { opacity: .4; animation: rg-grain .9s steps(3) infinite; }
#repel-guard-overlay.rg-p3 .rg-vignette { opacity: 1; transition-duration: .16s; }

#repel-guard-overlay.rg-p3 .rg-ident { animation: rg-appear .5s ease-out .10s 1 both; }
#repel-guard-overlay.rg-p3 .rg-title { animation: rg-slam   .42s ease-out 1 both; }
#repel-guard-overlay.rg-p3 .rg-body  {
  animation: rg-appear .6s ease-out .30s 1 both,
             rg-body-drain 2.6s ease-out .30s 1 both;
}
#repel-guard-overlay.rg-p3 .rg-reason { animation: rg-appear 1.2s ease-out .7s 1 both; }
#repel-guard-overlay.rg-p3 .rg-dossier { animation: rg-appear 1.6s ease-out 1.15s 1 both; }
#repel-guard-overlay.rg-p3 .rg-tail  { animation: rg-appear 2.6s ease-out 1.9s 1 both; }
#repel-guard-overlay.rg-p3 .rg-drip  { animation: rg-fall linear infinite; }
#repel-guard-overlay.rg-p3 .rg-yurei { animation: rg-yurei-manifest 3s cubic-bezier(.2,.7,.3,1) 1 both; }
/* ★重要：rg-p3 は 5.4秒で付いて 6.1秒には rg-p4 に切り替わってしまう。
   幽霊の演出は3秒かけて消えるので、そのままだと 0.7秒で強制終了してしまう。
   同じアニメーションを rg-p4 側にも同一内容で指定し、クラスが切り替わっても
   アニメーションが最初からやり直しにならず、途中から継続するようにする。 */
#repel-guard-overlay.rg-p4 .rg-yurei { animation: rg-yurei-manifest 3s cubic-bezier(.2,.7,.3,1) 1 both; }
/* 血の気が引く演出も同じ理由で rg-p4 側にも必要。 */
#repel-guard-overlay.rg-p4 .rg-body  {
  animation: rg-body-drain 2.6s ease-out .30s 1 both;
}

/* ============================================================
   第4相：残り続ける
   毎秒0.42回の明滅＝WCAG の 3回/秒 制限に対し 7分の1 以下。
   ============================================================ */
#repel-guard-overlay.rg-p4 .rg-vignette { animation: rg-breathe 4.8s ease-in-out infinite; }
#repel-guard-overlay.rg-p4 .rg-title    { animation: rg-ember   2.4s ease-in-out infinite; opacity: 1; }
#repel-guard-overlay.rg-p4 .rg-noise    { opacity: .3; animation: rg-grain 1.3s steps(3) infinite; }
#repel-guard-overlay.rg-p4 .rg-ident,
#repel-guard-overlay.rg-p4 .rg-body,
#repel-guard-overlay.rg-p4 .rg-reason,
#repel-guard-overlay.rg-p4 .rg-dossier  { opacity: 1; }
#repel-guard-overlay.rg-p4 .rg-tail     { opacity: .95; }
#repel-guard-overlay.rg-p4 .rg-drip     { animation: rg-fall linear infinite; }

/* JavaScript を切っている相手向け（サーバー側描画）。演出なしで即表示。 */
#repel-guard-overlay.rg-static .rg-vignette { opacity: 1; }
#repel-guard-overlay.rg-static .rg-noise    { opacity: .3; }
#repel-guard-overlay.rg-static .rg-ident,
#repel-guard-overlay.rg-static .rg-title,
#repel-guard-overlay.rg-static .rg-body,
#repel-guard-overlay.rg-static .rg-reason,
#repel-guard-overlay.rg-static .rg-dossier,
#repel-guard-overlay.rg-static .rg-tail     { opacity: 1; }

/* ============================================================
   キーフレーム
   ============================================================ */
@keyframes rg-strike {
  0%   { transform: translate(0,0)    scale(1.06); }
  12%  { transform: translate(-9px,5px)  scale(1.03); }
  24%  { transform: translate(8px,-6px)  scale(1.02); }
  38%  { transform: translate(-6px,-4px) scale(1.01); }
  52%  { transform: translate(5px,4px)   scale(1); }
  68%  { transform: translate(-3px,2px)  scale(1); }
  84%  { transform: translate(2px,-1px)  scale(1); }
  100% { transform: translate(0,0)       scale(1); }
}

/* 遠くから、ゆっくり近づいてくる。ほとんど見えない濃さのまま。 */
@keyframes rg-approach {
  0%   { opacity: 0;    transform: scale(1.28); filter: blur(5px); }
  60%  { opacity: .055; transform: scale(1.12); filter: blur(3px); }
  100% { opacity: .105; transform: scale(1.02); filter: blur(1.4px); }
}

@keyframes rg-slam {
  0%   { opacity: 0; transform: scale(1.5);  filter: blur(9px); }
  55%  { opacity: 1; transform: scale(.985); filter: blur(0); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@keyframes rg-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 燠火（おきび）のような明滅。0.42Hz。 */
@keyframes rg-ember {
  0%, 100% { text-shadow: 0 0 3px #ff0a14, 0 0 26px rgba(120,0,0,.9), 0 2px 0 #250000; }
  50%      { text-shadow: 0 0 2px #b00009, 0 0 12px rgba(80,0,0,.55), 0 2px 0 #250000; }
}

@keyframes rg-breathe {
  0%, 100% { opacity: .84; }
  50%      { opacity: 1; }
}

@keyframes rg-grain {
  0%   { transform: translate(0,0); }
  33%  { transform: translate(-1.5%, 1%); }
  66%  { transform: translate(1%, -1.5%); }
  100% { transform: translate(0,0); }
}

@keyframes rg-body-drain {
  0%   { color: #d6d2cf; letter-spacing: .12em; text-shadow: none; }
  40%  { color: #b8433a; letter-spacing: .16em; text-shadow: 0 0 10px rgba(120,0,4,.45); }
  100% { color: #cdc7c2; letter-spacing: .12em; text-shadow: none; }
}

@keyframes rg-yurei-manifest {
  0%   { opacity: 0;    filter: grayscale(1) contrast(1.05) blur(0px);   transform: translateX(-50%) scale(0.97); }
  6%   { opacity: 0.5;  filter: grayscale(1) contrast(1.15) blur(0px);   transform: translateX(-50%) scale(1);    }
  10%  { opacity: 0.62; filter: grayscale(1) contrast(1.15) blur(0px);   transform: translateX(-50%) scale(1);    }
  22%  { opacity: 0.58; filter: grayscale(1) contrast(1.1)  blur(0.3px); transform: translateX(-50%) scale(1.005);}
  100% { opacity: 0;    filter: grayscale(1) contrast(1.0)  blur(9px);   transform: translateX(-50%) scale(1.06) translateY(-3%); }
}

@keyframes rg-fall {
  0%   { opacity: 0;   transform: translateY(0); }
  8%   { opacity: .75; }
  92%  { opacity: .55; }
  100% { opacity: 0;   transform: translateY(125vh); }
}

/* ------------------------------------------------------------
   動きを減らす設定の相手には、動きだけ止める。
   （文言はそのまま残るので、伝わる内容は変わらない）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #repel-guard-overlay,
  #repel-guard-overlay * {
    animation: none !important;
    transition: none !important;
  }
  #repel-guard-overlay.is-active .rg-vignette { opacity: 1; }
  #repel-guard-overlay.is-active .rg-noise    { opacity: .25; }
  #repel-guard-overlay .rg-yurei { display: none; }
  #repel-guard-overlay.is-active .rg-ident,
  #repel-guard-overlay.is-active .rg-title,
  #repel-guard-overlay.is-active .rg-body,
  #repel-guard-overlay.is-active .rg-reason,
  #repel-guard-overlay.is-active .rg-dossier,
  #repel-guard-overlay.is-active .rg-tail     { opacity: 1; }
  #repel-guard-overlay .rg-drip { display: none; }
}

/* ============================================================
   通常のお客様向け：入力エラーの表示（こちらは徹底して穏やかに）
   ============================================================ */
.cg-field-error {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.7;
  color: #a1462f;
  letter-spacing: .02em;
}

.cg-form-error {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 2px solid #a1462f;
  background: rgba(161, 70, 47, .06);
  font-size: 14px;
  line-height: 1.85;
  color: #6d3223;
}

.cg-invalid input,
.cg-invalid select,
.cg-invalid textarea,
input.cg-invalid,
select.cg-invalid,
textarea.cg-invalid {
  border-color: #a1462f !important;
}

.form-submit-btn[data-cg-busy="1"] {
  opacity: .55;
  pointer-events: none;
}

/* ============================================================
   日本語・英語の併記                          （20260806）
   ------------------------------------------------------------
   2026-08-05、英語圏の営業が「日本語ページ」から送信してきた。
   日本語だけで突き放しても、相手には一言も届かない。

   ★併記して迫力が落ちる、という懸念への答え：

     日本語は一字も小さくしない。二段組にもしない。
     英語は同じ大きさで並べるのではなく、
     「日本語の下に沈めた添え書き」として置く。

       ・大きさ … 日本語の 1/3 前後まで落とす
       ・字間  … 大きく空ける（.28em）。小さい字は空けるほど硬くなる
       ・色    … 発光を消し、燠火が沈んだような暗い赤に
       ・書体  … 同じ明朝のまま。英字は大文字だけを使う

     結果として、大きな日本語が叫び、その足元で
     小さな英語が同じことを事務的に繰り返す形になる。
     声が二つに増えるぶん、むしろ冷たくなる。

   ★この節が効くのは日本語版だけ。
     他の9言語は .rg-en を出力しないので、
     これまでと1バイトも変わらない。
   ============================================================ */
#repel-guard-overlay .rg-en {
  display: block;
  font-family: "EB Garamond", "Times New Roman", serif;
  font-weight: 400;
  text-transform: uppercase;
  /* 親の発光を必ず打ち消す。小さい字に強い影が乗ると滲んで潰れる。 */
  text-shadow: none;
}

/* ---- 見出しの下に沈める一行 ----
   親（.rg-title）は clamp(23px,5vw,56px)。その約 1/3。
   赤は残すが、発光を止めて彩度を落とし、
   「叫んだあとの、低い声」の位置に置く。 */
#repel-guard-overlay .rg-title .rg-en {
  margin-top: .5em;
  font-size: clamp(10px, 1.7vw, 19px);
  letter-spacing: .28em;
  text-indent: .28em;
  font-weight: 500;
  color: #6e0a10;
  text-shadow: 0 0 10px rgba(120, 0, 0, .55);
}

/* ---- 本文の下 ----
   ここは灰。赤を二段重ねると、見出しの一撃が薄まる。 */
#repel-guard-overlay .rg-body .rg-en {
  margin-top: .42em;
  font-size: clamp(10px, 1.25vw, 14px);
  letter-spacing: .26em;
  text-indent: .26em;
  color: #8f8a86;
}

/* ---- 判定理由・末尾・記録済 ----
   もともと小さい行なので、これ以上は縮めずに、色だけ落として重ねる。 */
#repel-guard-overlay .rg-reason .rg-en {
  margin-top: .35em;
  font-size: clamp(9px, 1.05vw, 11px);
  letter-spacing: .3em;
  text-indent: .3em;
  color: #7a1015;
}
#repel-guard-overlay .rg-tail .rg-en {
  margin-top: .4em;
  font-size: clamp(9px, 1.05vw, 11px);
  letter-spacing: .3em;
  text-indent: .3em;
  color: #4e4646;
}
#repel-guard-overlay .rg-dossier-rec .rg-en {
  margin-top: .25em;
  font-size: .88em;
  letter-spacing: .18em;
  opacity: .72;
}

/* 画面の高さが足りない端末では、添え書きを一段締める。
   日本語は最後まで縮めない。削るのは常に英語の側から。 */
@media (max-height: 700px) {
  #repel-guard-overlay .rg-title .rg-en { margin-top: .38em; letter-spacing: .22em }
  #repel-guard-overlay .rg-body  .rg-en { margin-top: .3em }
}

/* 「記録済」のバッジだけは横に並べる。
   もともと一行の小さな札なので、下に伸ばすと札に見えなくなる。 */
#repel-guard-overlay .rg-dossier-tag .rg-en {
  display: inline;
  margin-left: .7em;
  font-size: .82em;
  letter-spacing: .16em;
  opacity: .68;
}

/* 画面の狭い端末では、添え書きの余白だけを詰める。
   ★詰めるのは常に英語の側。日本語の大きさ・余白には一切触らない。
     この画面で最後まで守るべきなのは、
     「見出し・本文・判定理由が、スクロールせずに目に入ること」。 */
@media (max-width: 480px) {
  #repel-guard-overlay .rg-title  .rg-en { margin-top: .3em;  letter-spacing: .2em }
  #repel-guard-overlay .rg-body   .rg-en { margin-top: .26em; letter-spacing: .18em }
  #repel-guard-overlay .rg-reason .rg-en { margin-top: .2em;  letter-spacing: .22em }
  #repel-guard-overlay .rg-tail   .rg-en { margin-top: .24em; letter-spacing: .22em }
}