/*
Theme Name: Operation Takashima
Description: 髙嶋大作戦のサイト - サイバーパンク/ホログラム風ポートフォリオテーマ
Author: 髙嶋
Version: 1.0.0
*/

:root{
  --bg:#070a12;
  --panel:#0c1220;
  --yellow:#fcee0a;
  --cyan:#38f7ff;
  --magenta:#ff2079;
  --green:#39ff88;
  --ink:#dce9f5;
  --ink-dim:#7d92a8;
  --line: rgba(56,247,255,0.25);
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html{scroll-padding-top: 70px; height:100%;}
*{box-sizing:inherit;}
body{
  margin:0; min-height:100%;
  background: var(--bg);
  color: var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(56,247,255,0.035) 0px, rgba(56,247,255,0.035) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 20% 0%, rgba(255,32,121,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(56,247,255,0.10), transparent 50%);
  pointer-events:none; z-index:1;
}
.grid-floor{
  position:fixed; left:0; right:0; bottom:0; height:40vh;
  background-image:
    linear-gradient(rgba(56,247,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,247,255,0.14) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom;
  opacity:.35;
  mask-image: linear-gradient(to top, black, transparent);
  pointer-events:none; z-index:0;
}

a{ color: var(--cyan); text-decoration:none; }

/* NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding: env(safe-area-inset-top,0px) 20px 0;
  background: rgba(7,10,18,0.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1100px; margin:0 auto;
  height:56px; display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Orbitron',sans-serif; font-weight:900; letter-spacing:2px;
  font-size:15px; color:var(--yellow);
  text-shadow: 0 0 8px rgba(252,238,10,0.6);
  text-decoration:none; display:flex; align-items:center;
}
.logo span{color:var(--cyan); text-shadow:0 0 8px rgba(56,247,255,0.6);}
.navlinks{display:flex; gap:22px; overflow-x:auto; scrollbar-width:none;}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks a{
  color:var(--ink-dim); text-decoration:none; font-size:12px;
  font-family:'Share Tech Mono',monospace; letter-spacing:1px; white-space:nowrap;
  padding:4px 2px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--cyan); border-color:var(--cyan);}

/* HERO */
header.hero{
  position:relative; z-index:2;
  min-height: 70vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 100px 24px 40px;
  max-width:1100px; margin:0 auto;
}
.hero-content{ position:relative; z-index:2; }
.holo-fish-wrap{
  position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;
}
.holo-fish{
  position:absolute; top:18%; left:-38%;
  width:min(70vw, 640px);
  filter: drop-shadow(0 0 14px rgba(56,247,255,0.55)) drop-shadow(0 0 26px rgba(255,32,121,0.3));
  animation: swim 22s ease-in-out infinite;
  opacity:.85;
}
.fish-body-link{ pointer-events:auto; cursor:pointer; }
.fish-body-link:hover ellipse, .fish-body-link:focus-visible ellipse{ fill-opacity:.32; }
.holo-fish svg{width:100%; height:auto; display:block;}
.fish-tail{ transform-origin: 210px 100px; animation: tailwag 1.4s ease-in-out infinite; }
.fish-fin-top{ transform-origin: 130px 60px; animation: finwag 2.1s ease-in-out infinite; }
.fish-fin-bottom{ transform-origin: 140px 150px; animation: finwag 2.3s ease-in-out infinite reverse; }
.fish-flicker{ animation: flicker 3.6s steps(1) infinite; }

@keyframes swim{
  0%   { left:-38%; top:16%; transform: scaleX(-1) rotate(0deg); }
  45%  { left:58%;  top:8%;  transform: scaleX(-1) rotate(-4deg); }
  50%  { left:62%;  top:8%;  transform: scaleX(1) rotate(4deg); }
  95%  { left:-30%; top:30%; transform: scaleX(1) rotate(-3deg); }
  100% { left:-38%; top:16%; transform: scaleX(-1) rotate(0deg); }
}
@keyframes tailwag{ 0%,100%{ transform: rotate(14deg); } 50%{ transform: rotate(-14deg); } }
@keyframes finwag{ 0%,100%{ transform: rotate(8deg); } 50%{ transform: rotate(-8deg); } }
@keyframes flicker{
  0%,100%{ opacity:1; } 4%{ opacity:.4; } 6%{ opacity:1; }
  46%{ opacity:1; } 48%{ opacity:.3; } 50%{ opacity:1; }
}
@media (max-width: 640px){ .holo-fish{ top:60%; } }

.eyebrow-id{
  font-family:'Share Tech Mono',monospace; color:var(--cyan); font-size:12px;
  letter-spacing:1px; margin-bottom:14px; opacity:.85;
}
.title-wrap{ position:relative; }
h1.title{ position:relative; z-index:1; display:flex; flex-direction:column; gap:0.02em;
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: clamp(2.2rem, 9vw, 5rem);
  line-height:0.95; margin:0; color:var(--ink); letter-spacing:1px;
}
.title .line{ display:block; }
.title-shadow{
  position:absolute; left:-4px; top:50%; transform: translateY(-50%);
  width:max-content; max-width:160%;
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size: clamp(1.8rem, 8.5vw, 5.2rem);
  letter-spacing:8px; color:transparent;
  -webkit-text-stroke: 1.4px rgba(56,247,255,0.55);
  text-shadow: 0 0 18px rgba(255,32,121,0.45), 0 0 34px rgba(56,247,255,0.3);
  z-index:0; pointer-events:none; opacity:.6;
  animation: holoShadow 4.6s steps(1) infinite;
}
@keyframes holoShadow{
  0%,100%{ opacity:.6; transform:translateY(-50%) translateX(0) skewX(0deg); }
  40%{ opacity:.6; transform:translateY(-50%) translateX(0) skewX(0deg); }
  41%{ opacity:.25; transform:translateY(-50%) translateX(3px) skewX(2deg); }
  43%{ opacity:.6; transform:translateY(-50%) translateX(-2px) skewX(-1deg); }
  70%{ opacity:.6; transform:translateY(-50%) translateX(0) skewX(0deg); }
  71%{ opacity:.2; transform:translateY(-50%) translateX(-3px) skewX(-2deg); }
  73%{ opacity:.6; transform:translateY(-50%) translateX(0) skewX(0deg); }
}
.hero-sub{ margin-top:22px; max-width:46ch; color:var(--ink-dim); font-size:15px; line-height:1.8; }
.hero-tag{ margin-top:30px; display:inline-flex; gap:10px; align-items:center;
  font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--yellow); }
.hero-tag .dot{width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 8px var(--yellow); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* SECTIONS */
main{position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:0 24px 100px;}
section{padding-top:90px; margin-top:-90px;}
.has-ad-rail{ position:relative; }

/* AD RAILS (左右の広告枠。今は「広告募集中」のネオン看板)
   画面幅が足りない場合は枠自体を小さくして、画面端で切れないようにする。 */
.ad-rail{ display:none; }
.ad-slot{
  position:relative; width:240px; min-height:544px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, rgba(56,247,255,0.05), rgba(255,32,121,0.04));
  border:1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
@media (min-width:1200px){
  .ad-rail{ display:flex; flex-direction:column; gap:16px; position:absolute; top:90px; width:130px; }
  .ad-rail-left{ right:calc(100% + 6px); }
  .ad-rail-right{ left:calc(100% + 6px); }
  .ad-slot{ width:130px; min-height:420px; }
}
@media (min-width:1650px){
  .ad-rail{ gap:24px; width:240px; }
  .ad-rail-left{ right:calc(100% + 8px); }
  .ad-rail-right{ left:calc(100% + 8px); }
  .ad-slot{ width:240px; min-height:544px; }
}
.ad-neon{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  width:calc(100% - 16px); min-height:392px; margin:8px; padding:14px 6px;
  border-radius:8px; overflow:hidden;
  text-decoration:none; transition: box-shadow .25s;
}
.ad-neon-tag{
  font-family:'Orbitron',sans-serif; font-size:.6rem; letter-spacing:.2em;
  position:relative; z-index:1; text-align:center;
}
.ad-neon-main{
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:.04em;
  white-space:normal; text-align:center; line-height:1.4;
  position:relative; z-index:1;
}
.ad-neon-main .flick{ animation: neonFlick 4.8s linear infinite; }
.ad-neon-sub{
  font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.12em;
  position:relative; z-index:1; text-align:center;
}
@media (min-width:1650px){
  .ad-neon{ gap:22px; width:calc(100% - 24px); min-height:516px; margin:12px; padding:18px 8px; }
  .ad-neon-tag{ font-size:.72rem; letter-spacing:.3em; }
  .ad-neon-main{ font-size:2.3rem; letter-spacing:.06em; white-space:nowrap; }
  .ad-neon-sub{ font-size:.72rem; letter-spacing:.2em; }
}
@keyframes neonFlick{
  0%,19%,21%,23%,60%,62%,100%{ opacity:1; }
  20%,22%,61%{ opacity:.2; text-shadow:none; }
}
@media (prefers-reduced-motion: reduce){ .ad-neon-main .flick{ animation:none; } }

/* --- variant 1: cyan neon sign --- */
.ad-neon--cyan{
  border:2px solid rgba(56,247,255,0.85);
  box-shadow: 0 0 6px rgba(56,247,255,0.7), 0 0 16px rgba(56,247,255,0.35), inset 0 0 8px rgba(56,247,255,0.35);
}
.ad-neon--cyan:hover, .ad-neon--cyan:focus-visible{
  box-shadow: 0 0 8px rgba(56,247,255,0.9), 0 0 24px rgba(56,247,255,0.5), inset 0 0 12px rgba(56,247,255,0.45);
}
.ad-neon--cyan .ad-neon-tag{ color:var(--cyan); text-shadow: 0 0 6px rgba(56,247,255,0.9), 0 0 14px rgba(56,247,255,0.5); }
.ad-neon--cyan .ad-neon-main{
  font-family:'Dela Gothic One', sans-serif; font-weight:400;
  color:#ffe4f0; text-shadow: 0 0 3px #fff, 0 0 9px #ff2079, 0 0 20px #ff2079, 0 0 38px rgba(255,32,121,0.75);
}
.ad-neon--cyan .ad-neon-sub{ color:var(--yellow); text-shadow: 0 0 8px rgba(252,238,10,0.6); }

/* --- variant 2: magenta outline / hologram stroke text --- */
.ad-neon--magenta{
  border:2px solid rgba(255,32,121,0.75);
  box-shadow: 0 0 6px rgba(255,32,121,0.6), 0 0 16px rgba(255,32,121,0.3), inset 0 0 8px rgba(255,32,121,0.25);
  background: linear-gradient(160deg, rgba(255,32,121,0.05), rgba(56,247,255,0.04));
}
.ad-neon--magenta:hover, .ad-neon--magenta:focus-visible{
  box-shadow: 0 0 8px rgba(255,32,121,0.8), 0 0 24px rgba(255,32,121,0.45), inset 0 0 12px rgba(255,32,121,0.35);
}
.ad-neon--magenta .ad-neon-tag{ color:var(--magenta); text-shadow:0 0 6px rgba(255,32,121,0.9); }
.ad-neon--magenta .ad-neon-main{
  font-family:'Orbitron', sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:.08em; white-space:normal; text-align:center; line-height:1.4;
  color:transparent; -webkit-text-stroke:1.2px rgba(56,247,255,0.8);
  text-shadow: 0 0 8px rgba(255,32,121,0.55), 0 0 18px rgba(56,247,255,0.35);
  animation: holoShadow 4.6s steps(1) infinite;
}
@media (min-width:1650px){
  .ad-neon--magenta .ad-neon-main{ font-size:1.7rem; letter-spacing:.12em; }
}
.ad-neon--magenta .ad-neon-sub{ color:var(--cyan); text-shadow:0 0 8px rgba(56,247,255,0.5); }

/* --- variant 3: glitch / chromatic aberration sign --- */
.ad-neon--glitch{
  border:1px solid rgba(220,233,245,0.35);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  background:
    repeating-linear-gradient(0deg, rgba(220,233,245,0.035) 0px, rgba(220,233,245,0.035) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, rgba(56,247,255,0.05), rgba(255,32,121,0.04));
}
.ad-neon--glitch:hover, .ad-neon--glitch:focus-visible{
  border-color: rgba(220,233,245,0.6);
}
.ad-neon--glitch .ad-neon-tag{ color:var(--ink-dim); font-family:'Share Tech Mono',monospace; }
.ad-neon--glitch .ad-neon-main{ font-family:'Share Tech Mono',monospace; font-weight:700; font-size:1rem; color:var(--ink); }
@media (min-width:1650px){
  .ad-neon--glitch .ad-neon-main{ font-size:1.6rem; }
}
.ad-neon--glitch .ad-neon-main::before, .ad-neon--glitch .ad-neon-main::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden;
}
.ad-neon--glitch .ad-neon-main::before{
  color:var(--magenta); left:2px; text-shadow:-1px 0 var(--magenta);
  animation: glitchTop 5s infinite linear alternate-reverse;
}
.ad-neon--glitch .ad-neon-main::after{
  color:var(--cyan); left:-2px; text-shadow:1px 0 var(--cyan);
  animation: glitchBot 4s infinite linear alternate-reverse;
}
.ad-neon--glitch .ad-neon-sub{ color:var(--cyan); }

/* --- variant 4: mark icon + hazard stripe --- */
.ad-neon--mark{
  border:2px solid rgba(252,238,10,0.65);
  box-shadow: 0 0 6px rgba(252,238,10,0.5), 0 0 16px rgba(252,238,10,0.25), inset 0 0 8px rgba(252,238,10,0.2);
}
.ad-neon--mark:hover, .ad-neon--mark:focus-visible{
  box-shadow: 0 0 8px rgba(252,238,10,0.7), 0 0 24px rgba(252,238,10,0.4), inset 0 0 12px rgba(252,238,10,0.3);
}
.ad-neon--mark::before, .ad-neon--mark::after{
  content:""; position:absolute; left:0; right:0; height:9px;
  background: repeating-linear-gradient(45deg, var(--yellow) 0 9px, #0a0e17 9px 18px);
  opacity:.8; z-index:1;
}
.ad-neon--mark::before{ top:0; }
.ad-neon--mark::after{ bottom:0; }
.ad-neon--mark .mark-bg-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.14; z-index:0; }
.ad-neon--mark .mark-bg-icon svg{ width:72%; height:72%; }
.ad-neon--mark .ad-neon-tag{ color:var(--yellow); text-shadow:0 0 6px rgba(252,238,10,0.7); font-family:'Bungee', sans-serif; letter-spacing:.15em; }
.ad-neon--mark .ad-neon-main{
  font-family:'Bungee', sans-serif; font-weight:400; font-size:.95rem; letter-spacing:.03em; text-align:center; line-height:1.5; white-space:normal;
  color:var(--yellow); text-shadow: 0 0 6px rgba(252,238,10,0.8), 0 0 16px rgba(252,238,10,0.5);
}
@media (min-width:1650px){
  .ad-neon--mark .ad-neon-main{ font-size:1.5rem; letter-spacing:.05em; }
}
.ad-neon--mark .ad-neon-sub{ color:var(--cyan); text-shadow:0 0 6px rgba(56,247,255,0.5); }

/* --- variant 5: terminal (green hacker console) --- */
.ad-neon--terminal{
  border:2px solid rgba(57,255,136,0.65);
  box-shadow: 0 0 6px rgba(57,255,136,0.5), 0 0 16px rgba(57,255,136,0.25), inset 0 0 10px rgba(57,255,136,0.2);
  background:
    repeating-linear-gradient(0deg, rgba(57,255,136,0.05) 0px, rgba(57,255,136,0.05) 1px, transparent 1px, transparent 4px),
    linear-gradient(160deg, rgba(57,255,136,0.05), rgba(9,20,15,0.4));
  align-items:flex-start; text-align:left; padding-left:20px;
}
.ad-neon--terminal:hover, .ad-neon--terminal:focus-visible{
  box-shadow: 0 0 8px rgba(57,255,136,0.7), 0 0 24px rgba(57,255,136,0.4), inset 0 0 14px rgba(57,255,136,0.3);
}
.ad-neon--terminal .ad-neon-tag{ color:var(--green); font-family:'Share Tech Mono',monospace; text-shadow:0 0 6px rgba(57,255,136,0.8); text-align:left; }
.ad-neon--terminal .ad-neon-main{
  font-family:'Share Tech Mono',monospace; font-size:1.05rem; color:var(--green);
  text-shadow:0 0 6px rgba(57,255,136,0.7), 0 0 16px rgba(57,255,136,0.4);
  text-align:left; white-space:pre-line;
}
.ad-neon--terminal .ad-neon-main::after{ content:"_"; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.ad-neon--terminal .ad-neon-sub{ color:var(--ink-dim); text-align:left; }
.ad-neon--terminal .scan{
  position:absolute; left:0; right:0; height:18px; top:0;
  background:linear-gradient(rgba(57,255,136,0.18), transparent);
  animation: termScan 3.2s linear infinite; pointer-events:none;
}
@keyframes termScan{ 0%{ top:-18px; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .ad-neon--terminal .scan{ animation:none; } .ad-neon--terminal .ad-neon-main::after{ animation:none; } }

/* --- variant 6: holo projector (rotating dashed rings) --- */
.ad-neon--projector{
  border:1px solid rgba(220,233,245,0.3);
  background: radial-gradient(circle at 50% 40%, rgba(56,247,255,0.14), transparent 65%);
}
.ad-neon--projector:hover, .ad-neon--projector:focus-visible{ border-color: rgba(220,233,245,0.55); }
.ad-neon--projector .ring{
  position:absolute; width:160px; height:160px; border-radius:50%;
  border:1px dashed rgba(56,247,255,0.55);
  animation: ringSpin 14s linear infinite;
}
.ad-neon--projector .ring.ring2{ width:118px; height:118px; border-color:rgba(255,32,121,0.45); animation-duration:10s; animation-direction:reverse; }
@keyframes ringSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .ad-neon--projector .ring{ animation:none; } }
.ad-neon--projector .beam{
  position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);
  background:linear-gradient(rgba(56,247,255,0.5), transparent 40%, transparent 60%, rgba(56,247,255,0.5));
  opacity:.6;
}
.ad-neon--projector .ad-neon-tag{ color:var(--cyan); text-shadow:0 0 6px rgba(56,247,255,0.9); }
.ad-neon--projector .ad-neon-main{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:.06em;
  color:#eaffff; text-shadow:0 0 4px #fff, 0 0 12px rgba(56,247,255,0.8), 0 0 26px rgba(56,247,255,0.5);
}
.ad-neon--projector .ad-neon-sub{ color:var(--yellow); text-shadow:0 0 6px rgba(252,238,10,0.6); }

/* --- variant 7: VHS ticker (interlace + scrolling marquee) --- */
.ad-neon--vhs{
  border:1px solid rgba(255,32,121,0.4);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, rgba(255,32,121,0.06), rgba(56,247,255,0.05));
  justify-content:space-between; padding-top:22px; padding-bottom:22px;
}
.ad-neon--vhs:hover, .ad-neon--vhs:focus-visible{ border-color: rgba(255,32,121,0.65); }
.ad-neon--vhs .track{
  width:100%; overflow:hidden; border-top:1px solid rgba(220,233,245,0.2); border-bottom:1px solid rgba(220,233,245,0.2);
  padding:6px 0;
}
.ad-neon--vhs .track-inner{
  display:inline-flex; white-space:nowrap; animation: ticker 9s linear infinite;
  font-family:'Share Tech Mono',monospace; font-size:.8rem; letter-spacing:.1em; color:var(--ink);
}
.ad-neon--vhs .track-inner span{ padding-right:28px; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ad-neon--vhs .track-inner{ animation:none; } }
.ad-neon--vhs .ad-neon-tag{ color:var(--magenta); text-shadow:0 0 6px rgba(255,32,121,0.8); }
.ad-neon--vhs .ad-neon-main{
  font-family:'Dela Gothic One',sans-serif; font-weight:400; font-size:1.5rem;
  color:transparent; -webkit-text-stroke:1px rgba(255,32,121,0.85);
  text-shadow:1px 0 var(--cyan), -1px 0 var(--magenta);
}
.ad-neon--vhs .ad-neon-sub{ color:var(--cyan); }

/* --- variant 8: ID card / QR (amber data card) --- */
.ad-neon--card{
  border:2px solid rgba(252,238,10,0.55);
  box-shadow: 0 0 6px rgba(252,238,10,0.4), inset 0 0 8px rgba(252,238,10,0.15);
  background: linear-gradient(160deg, rgba(252,238,10,0.05), rgba(56,247,255,0.03));
}
.ad-neon--card:hover, .ad-neon--card:focus-visible{
  box-shadow: 0 0 8px rgba(252,238,10,0.6), inset 0 0 12px rgba(252,238,10,0.25);
}
.ad-neon--card::before, .ad-neon--card::after{
  content:""; position:absolute; width:18px; height:18px; border:2px solid var(--yellow); opacity:.8;
}
.ad-neon--card::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.ad-neon--card::after{ bottom:8px; right:8px; border-left:none; border-top:none; }
.ad-neon--card .qr{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(6,7px); grid-template-rows:repeat(6,7px); gap:2px; margin-bottom:4px;
}
.ad-neon--card .qr div{ background:rgba(252,238,10,0.15); }
.ad-neon--card .qr div.on{ background:var(--yellow); box-shadow:0 0 4px rgba(252,238,10,0.8); }
.ad-neon--card .ad-neon-tag{ color:var(--yellow); font-family:'Share Tech Mono',monospace; letter-spacing:.25em; }
.ad-neon--card .ad-neon-main{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.15rem; letter-spacing:.05em;
  color:var(--yellow); text-shadow:0 0 6px rgba(252,238,10,0.7), 0 0 16px rgba(252,238,10,0.4);
}
.ad-neon--card .ad-neon-sub{ color:var(--ink-dim); }

/* --- HUD dressing (密度アップ用の共通パーツ) --- */
.corner{ position:absolute; width:14px; height:14px; opacity:.85; z-index:2; pointer-events:none; }
.corner.tl{ top:6px; left:6px; border-top:1.5px solid currentColor; border-left:1.5px solid currentColor; }
.corner.tr{ top:6px; right:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; }
.corner.bl{ bottom:6px; left:6px; border-bottom:1.5px solid currentColor; border-left:1.5px solid currentColor; }
.corner.br{ bottom:6px; right:6px; border-bottom:1.5px solid currentColor; border-right:1.5px solid currentColor; }
.readout{ position:absolute; z-index:2; font-family:'Share Tech Mono',monospace; font-size:.52rem; letter-spacing:.05em; opacity:.55; pointer-events:none; }
.readout.top{ top:10px; left:24px; }
.readout.bottom{ bottom:10px; right:24px; }
.particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.particles span{ position:absolute; width:2px; height:2px; border-radius:50%; background:currentColor; box-shadow:0 0 4px currentColor; animation: hudTwinkle 2.6s ease-in-out infinite; }
@keyframes hudTwinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }
.barmeter{ display:flex; align-items:flex-end; gap:3px; height:16px; position:relative; z-index:2; }
.barmeter span{ width:3px; background:currentColor; opacity:.7; animation: hudBarpulse 1.6s ease-in-out infinite; }
@keyframes hudBarpulse{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .particles span, .barmeter span{ animation:none; } }

/* --- cyan: circuit trace + corners + readouts --- */
.ad-neon--cyan .corner, .ad-neon--cyan .readout{ color:var(--cyan); }
.ad-neon--cyan .circuit{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(0deg, transparent 30%, rgba(56,247,255,0.2) 30%, rgba(56,247,255,0.2) 31%, transparent 31%),
    linear-gradient(0deg, transparent 70%, rgba(56,247,255,0.2) 70%, rgba(56,247,255,0.2) 71%, transparent 71%);
}
.ad-neon--cyan .circuit::before, .ad-neon--cyan .circuit::after{
  content:""; position:absolute; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation: hudTwinkle 2s infinite;
}
.ad-neon--cyan .circuit::before{ top:30%; }
.ad-neon--cyan .circuit::after{ top:70%; animation-delay:.6s; }

/* --- magenta: grid + corners + readouts --- */
.ad-neon--magenta .corner, .ad-neon--magenta .readout{ color:var(--magenta); }
.ad-neon--magenta .gridbg{
  position:absolute; inset:10px; z-index:0; opacity:.35; pointer-events:none;
  background-image: linear-gradient(rgba(255,32,121,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,32,121,0.35) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 75%);
}

/* --- glitch: corners + readout + static noise particles --- */
.ad-neon--glitch .corner{ color: rgba(220,233,245,0.6); }
.ad-neon--glitch .readout{ color: var(--ink-dim); }
.ad-neon--glitch .particles{ color: rgba(220,233,245,0.5); }

/* --- mark: corners + readout --- */
.ad-neon--mark .corner{ color: var(--yellow); z-index:2; }
.ad-neon--mark .readout{ color: var(--yellow); opacity:.7; }

/* --- terminal: log lines + corners + barmeter --- */
.ad-neon--terminal .corner{ color: var(--green); }
.ad-neon--terminal .log{ font-family:'Share Tech Mono',monospace; font-size:.58rem; line-height:1.6; color:rgba(57,255,136,0.55); text-align:left; position:relative; z-index:2; }
.ad-neon--terminal .barmeter{ color: var(--green); }

/* --- projector: extra ring + orbit dot + readouts --- */
.ad-neon--projector .readout{ color:var(--cyan); }
.ad-neon--projector .ring3{ position:absolute; width:172px; height:172px; border-radius:50%; border:1px dotted rgba(252,238,10,0.35); animation: ringSpin 22s linear infinite; }
.ad-neon--projector .orbit{ position:absolute; width:150px; height:150px; animation: ringSpin 5s linear infinite; }
.ad-neon--projector .orbit::before{ content:""; position:absolute; top:0; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
@media (prefers-reduced-motion: reduce){ .ad-neon--projector .ring3, .ad-neon--projector .orbit{ animation:none; } }

/* --- vhs: corners + readout (timecode) --- */
.ad-neon--vhs .corner{ color: var(--magenta); }
.ad-neon--vhs .readout{ color: var(--cyan); }

/* --- card: barcode strip under QR --- */
.ad-neon--card .barcode{ position:relative; z-index:1; display:flex; gap:2px; height:10px; margin-top:2px; }
.ad-neon--card .barcode span{ width:2px; background:rgba(252,238,10,0.55); }
.ad-neon--card .barcode span:nth-child(3n){ width:3px; background:rgba(252,238,10,0.85); }

.section-head{ display:flex; align-items:center; gap:14px; margin-bottom:28px;
  border-bottom:1px solid var(--line); padding-bottom:14px; flex-wrap:wrap; }
.section-head .idx{ font-family:'Share Tech Mono',monospace; color:var(--magenta); font-size:13px; }
.section-head h2{ font-family:'Orbitron',sans-serif; font-size: clamp(1.3rem,4vw,1.9rem);
  margin:0; color:var(--ink); letter-spacing:1px; }
.section-head h2 a{ color:inherit; text-decoration:none; transition:color .2s, text-shadow .2s; }
.section-head h2 a:hover, .section-head h2 a:focus-visible{ color:var(--cyan); text-shadow:0 0 10px rgba(56,247,255,0.6); }
.section-head .desc{ margin-left:auto; font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--ink-dim); }

.sec-title-wrap{ position:relative; display:inline-flex; align-items:center; }
.sec-shadow{
  position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(1.7);
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:3.4em; letter-spacing:4px; white-space:nowrap;
  color:transparent; -webkit-text-stroke: 1px rgba(56,247,255,0.5);
  text-shadow: 0 0 10px rgba(255,32,121,0.4), 0 0 18px rgba(56,247,255,0.25);
  z-index:0; pointer-events:none; opacity:.5;
  animation: holoShadowSec 4.6s steps(1) infinite;
}
@keyframes holoShadowSec{
  0%,100%{ opacity:.5; transform:translateY(-50%) scaleY(1.7) translateX(0) skewX(0deg); }
  40%{ opacity:.5; transform:translateY(-50%) scaleY(1.7) translateX(0) skewX(0deg); }
  41%{ opacity:.2; transform:translateY(-50%) scaleY(1.7) translateX(3px) skewX(2deg); }
  43%{ opacity:.5; transform:translateY(-50%) scaleY(1.7) translateX(-2px) skewX(-1deg); }
  70%{ opacity:.5; transform:translateY(-50%) scaleY(1.7) translateX(0) skewX(0deg); }
  71%{ opacity:.15; transform:translateY(-50%) scaleY(1.7) translateX(-3px) skewX(-2deg); }
  73%{ opacity:.5; transform:translateY(-50%) scaleY(1.7) translateX(0) skewX(0deg); }
}
.sec-title-wrap h2{ position:relative; z-index:1; margin:0; }

.cards{position:relative; display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-bottom:70px;}
.card{
  position:relative; background: linear-gradient(160deg, rgba(56,247,255,0.06), rgba(255,32,121,0.03));
  border:1px solid var(--line); padding:20px; min-height:220px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  text-decoration:none; color:inherit; display:block;
}

/* POEM SIGN ROW (漢詩をカード背景に敷き詰める) */
.poem-sign-row{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  display:flex; justify-content:space-evenly; align-items:center;
  pointer-events:none;
}
.poem-sign-row .col{
  writing-mode: vertical-rl; text-orientation: upright;
  font-family:'Orbitron',sans-serif; font-weight:500;
  font-size:1.4rem; letter-spacing:.55em;
  color:transparent; -webkit-text-stroke: 0.6px rgba(56,247,255,0.3);
  text-shadow: 0 0 5px rgba(255,32,121,0.16), 0 0 9px rgba(56,247,255,0.12);
  opacity:.22; margin:0;
  filter: blur(0.6px);
  animation: flicker 5s steps(1) infinite;
}
.poem-sign-row .col:nth-child(2n){ animation-delay:.7s; }
.poem-sign-row .col:nth-child(3n){ animation-delay:1.3s; }
@media (prefers-reduced-motion: reduce){ .poem-sign-row .col{ animation:none; } }
/* PC版: カード全体にまたがる密度の高い共有の漢詩帯を表示 / スマホ版: カード毎の帯に切替 */
.poem-sign-row--card{ display:none; }
.poem-sign-row--wide{ display:flex; }
@media (max-width: 640px){
  .poem-sign-row--wide{ display:none; }
  .poem-sign-row--card{ display:flex; }
}
.card::before{
  content:""; position:absolute; top:0; left:0; width:24px; height:2px; background:var(--cyan); box-shadow:0 0 6px var(--cyan); z-index:2;
}
.card .status{
  position:relative; z-index:1;
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:1px;
  color:var(--yellow); border:1px solid rgba(252,238,10,0.4); padding:2px 8px; display:inline-block; margin-bottom:12px;
}
.card h3{ position:relative; z-index:1; font-family:'Orbitron',sans-serif; font-size:16px; margin:0 0 10px; color:var(--ink); line-height:1.4; }
.card p{ position:relative; z-index:1; margin:0; font-size:13px; line-height:1.75; color:var(--ink-dim);}
.card .meta{ position:relative; z-index:1; margin-top:14px; font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--cyan); opacity:.8;}

.diary-list{border-left:1px solid var(--line); padding-left:20px; margin-bottom:70px; display:flex; flex-direction:column; gap:26px;}
.diary-item{position:relative;}
.diary-item::before{
  content:""; position:absolute; left:-25px; top:6px; width:8px; height:8px;
  background:var(--magenta); box-shadow:0 0 8px var(--magenta); transform:rotate(45deg);
}
.diary-date{font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--cyan); margin-bottom:6px;}
.diary-item p{margin:0; font-size:13px; line-height:1.8; color:var(--ink-dim); max-width:64ch;}

/* SINGLE POST */
.single-wrap{ position:relative; z-index:2; max-width:800px; margin:0 auto; padding:130px 24px 100px; }
.single-wrap .status{ font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--yellow);
  border:1px solid rgba(252,238,10,0.4); padding:2px 10px; display:inline-block; margin-bottom:16px; }
.single-wrap h1{ font-family:'Orbitron',sans-serif; font-size: clamp(1.6rem,5vw,2.6rem); margin:0 0 10px; }
.single-wrap .tagline{ color:var(--ink-dim); font-size:15px; margin-bottom:20px; }
.single-wrap .creator{ font-family:'Share Tech Mono',monospace; color:var(--cyan); font-size:12px; margin-bottom:34px; }
.single-wrap .content{ line-height:2; font-size:15px; border-top:1px solid var(--line); padding-top:30px; }
.single-wrap .content p{ margin:0 0 1.4em; }

/* FILE BLOCK (PDFなどの添付ファイル表示をサイトの雰囲気に合わせる) */
.single-wrap .content .wp-block-file{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background: linear-gradient(160deg, rgba(56,247,255,0.06), rgba(255,32,121,0.03));
  border:1px solid var(--line); padding:18px 20px; margin:0 0 1.4em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.single-wrap .content .wp-block-file::before{
  content:""; position:absolute; top:0; left:0; width:22px; height:2px; background:var(--cyan); box-shadow:0 0 6px var(--cyan);
}
.single-wrap .content .wp-block-file a{
  font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:.3px; color:var(--ink);
}
.single-wrap .content .wp-block-file > a:first-child{ flex:1 1 auto; min-width:0; word-break:break-all; color:var(--cyan); }
.single-wrap .content .wp-block-file .wp-block-file__button{
  flex:none; display:inline-block; color:var(--bg) !important; background:var(--cyan);
  padding:8px 18px; border-radius:2px; font-weight:700; letter-spacing:1px;
  text-decoration:none; box-shadow:0 0 10px rgba(56,247,255,0.4);
  transition: background .2s, box-shadow .2s;
}
.single-wrap .content .wp-block-file .wp-block-file__button:hover,
.single-wrap .content .wp-block-file .wp-block-file__button:focus-visible{
  background:var(--yellow); box-shadow:0 0 14px rgba(252,238,10,0.55);
}
.single-wrap .content .wp-block-file__embed{
  width:100%; margin-top:4px;
}
.single-wrap .content .wp-block-file__embed iframe,
.single-wrap .content .wp-block-file__embed embed,
.single-wrap .content .wp-block-file__embed object{
  width:100%; min-height:70vh; border:1px solid var(--line); background:#0c1220;
}
.back-link{ display:inline-block; margin-bottom:24px; font-family:'Share Tech Mono',monospace; font-size:12px; }

.sns-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.sns-link{
  font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:.5px;
  color:var(--cyan); border:1px solid var(--line); padding:10px 18px;
  background: linear-gradient(160deg, rgba(56,247,255,0.08), rgba(255,32,121,0.04));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.sns-link:hover, .sns-link:focus-visible{
  color:var(--yellow); border-color: rgba(252,238,10,0.5);
  box-shadow: 0 0 14px rgba(56,247,255,0.25);
}

/* HOLO MARK (髙嶋大作戦のマーク) */
.holo-mark{
  filter: drop-shadow(0 0 8px rgba(56,247,255,0.55)) drop-shadow(0 0 16px rgba(255,32,121,0.3));
  opacity:.55; animation: flicker 3.6s steps(1) infinite; pointer-events:none;
}
.mark-nav{ width:22px; height:22px; margin-right:6px; flex:none; }
.mark-watermark{ position:absolute; z-index:0; width:min(60vw,520px); height:auto;
  opacity:.10; animation: markSpin 90s linear infinite, flicker 5s steps(1) infinite; }
.mark-hero-link{
  position:absolute; z-index:0; top:-8%; right:-10%;
  width:min(60vw,520px);
  pointer-events:auto; cursor:pointer; display:block;
}
.mark-hero-link svg{ width:100%; height:auto; display:block; pointer-events:none; }
.mark-hero-link:hover svg, .mark-hero-link:focus-visible svg{ opacity:.18; }
.mark-footer{ bottom:-30%; right:-6%; width:min(70vw,620px); opacity:.08; }
.mark-sec{ width:26px; height:26px; margin-right:6px; flex:none; opacity:.7; }
@keyframes markSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

footer{
  position:relative; z-index:2; border-top:1px solid var(--line);
  padding:30px 24px calc(30px + env(safe-area-inset-bottom,0px));
  max-width:1100px; margin:0 auto;
  font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--ink-dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  overflow:hidden;
}

a:focus-visible, button:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  .hero-tag .dot, .title-shadow, .sec-shadow, .holo-mark{animation:none !important;}
}