/* =========================================
   Tokyo Ghoul Fan Tribute — Animated
   10周年特設サイトの雰囲気にインスパイアされた演出（非商用 / オリジナル）
   ========================================= */
:root{
  --bg:#0b0c10; --bg-deep:#07080c; --text:#e6e6e6; --muted:#b0b0b0;
  --accent:#d90429; --accent-2:#8a0318; --card:#14161d;
}
html,body{height:100%;}
body{margin:0; color:var(--text);
  background:linear-gradient(180deg, var(--bg), var(--bg-deep));
  font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',system-ui,sans-serif;
}
/* --- ローディング --- */
.loader{position:fixed; inset:0; display:grid; place-items:center; background:#000; z-index:2000;}
.loader-inner{position:relative; text-align:center;}
.loader-title{font-family:'Oswald',system-ui,sans-serif; font-size:3rem; letter-spacing:.12em; color:#fff; position:relative;}
.loader-title::before, .loader-title::after{content:attr(data-text); position:absolute; left:0; top:0; color:#fff; mix-blend-mode:screen;}
.loader-title::before{transform:translate(-2px,-1px); color:#d90429; animation:glitch 1.8s infinite linear alternate;}
.loader-title::after{transform:translate(2px,1px); color:#8a0318; animation:glitch 1.6s infinite linear alternate;}
.loader-sub{color:var(--muted); margin:.5rem 0 1rem; font-size:.9rem;}
.loader-bar{width:260px; height:3px; background:rgba(255,255,255,.15); border-radius:3px; margin:0 auto; overflow:hidden;}
.loader-bar span{display:block; width:40%; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); animation:load 2.4s ease-in-out infinite;}
.scanlines{position:absolute; inset:0; background:
  repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
  animation:scan 6s linear infinite; mix-blend-mode:overlay;}
@keyframes load{0%{transform:translateX(-120%);}50%{transform:translateX(20%);}100%{transform:translateX(140%);} }
@keyframes scan{0%{background-position-y:0;}100%{background-position-y:1000px;} }
@keyframes glitch{0%{clip-path:inset(0 0 0 0);} 20%{clip-path:inset(10% 0 0 0);} 40%{clip-path:inset(0 0 20% 0);} 60%{clip-path:inset(5% 0 5% 0);} 80%{clip-path:inset(0 0 12% 0);} 100%{clip-path:inset(0 0 0 0);} }

/* --- ヘッダー --- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:1000; backdrop-filter:blur(4px);
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2)); border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; gap:1rem; padding:.75rem 1rem;}
.brand{font-family:'Oswald',system-ui,sans-serif; font-weight:700; letter-spacing:.08em; color:#fff; text-decoration:none;}
.brand span{color:var(--accent);} 
.nav-toggle{display:none;}
.nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0;}
.nav-list a{position:relative; color:var(--text); text-decoration:none; padding:.5rem .75rem;}
.nav-list a::after{content:""; position:absolute; left:.75rem; right:.75rem; bottom:.25rem; height:2px; background:linear-gradient(90deg, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;}
.nav-list a:hover::after{transform:scaleX(1);} 

/* --- ティッカー --- */
.ticker{position:relative; overflow:hidden; border-block:1px solid rgba(255,255,255,.08); background:#0f1016;}
.ticker-track{display:flex; gap:2rem; padding:.35rem 0; color:#fff; font-family:'Oswald'; letter-spacing:.12em;}
.ticker-track span{color:#fff; text-shadow:0 0 12px rgba(217,4,41,.6);} 
.ticker-track{animation:marquee 18s linear infinite;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);} }

/* --- セクション共通 --- */
.section{padding:5rem 1.25rem; max-width:1100px; margin:0 auto;}
.section h2{font-family:'Oswald',system-ui,sans-serif; letter-spacing:.06em;}


/* --- ストーリー --- */
.section-story p{line-height:1.8;}

/* --- お問い合わせ --- */
.contact-form{display:grid; gap:.75rem; max-width:680px;}
.contact-form input, .contact-form textarea{width:100%; padding:.65rem .75rem; border-radius:.35rem; border:1px solid rgba(255,255,255,.12); background:#0f1016; color:var(--text);} 
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--accent);} 

/* --- フッター --- */
.site-footer{padding:3rem 1rem; text-align:center; color:var(--muted);} 
.site-footer a{color:var(--text);} 

/* --- スクロールリビール --- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);} 


.slideshow {
  overflow: hidden;
  position: relative;
  min-width: 960px;
  height: 600px;
}
.slideshow img {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -800px;
}


.c-mv__logo png, .c-mv__title svg {
  margin: auto;
  width: 40%;
  height: 50%;
}

#chara_txt_00 .t02 {
  line-height: 10px;
  font-size: 50px;
  color: #F9F9F5;
}

#chara_txt_00 .t01 {
  vertical-align: -5px;
  font-size: 50px;
  color: #F10004;
}

#chara_txt_00 {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  width: 600px;
  padding-left: 30px;
  font-size: 30px;
  font-weight: bold;
  line-height: 40px;
  margin-top: 90px;
  text-shadow: -1px -1px 0px #353434, 1px 1px 0px #353434;
}

.txt_red1 {
  color: #F10004;
}

.chara_mincho {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 24px;
}

.chara_serrifu {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 22px;
  font-weight: bold;
  color: #F10004;
  text-shadow: -1px -1px 0px #353434, 1px 1px 0px #353434;
}

.txt_13 {
  font-size: 13px;
}