/* 雷迷テラ公式サイト。2195年から届く通信という見立て。紫黒の地に雷の黄色を一点だけ。 */
:root{
  --ink:#0b0918; --deep:#151030; --panel:#1c1640; --line:#3a3070;
  --violet:#6a4cf0; --lilac:#b9abff; --volt:#ffe53b; --mint:#4fe0c0;
  --paper:#f3f0fc; --dim:#aaa4c9;
  --display:"Dela Gothic One","Hiragino Kaku Gothic StdN","Yu Gothic",sans-serif;
  --signal:"DotGothic16","MS Gothic",monospace;
  --body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --wrap:1120px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.9;font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='291' viewBox='0 0 168 291'%3E%3Cpath d='M84 0l84 48.5v97L84 194 0 145.5v-97zM84 194v97M0 145.5M168 145.5' fill='none' stroke='%23b9abff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--volt);color:var(--ink);padding:6px 12px;z-index:30}

/* ヘッダー */
.site-head{position:sticky;top:0;z-index:20;background:rgba(11,9,24,.9);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:20px;text-decoration:none;letter-spacing:.06em;white-space:nowrap}
.logo span{color:var(--volt)}
.nav{display:flex;gap:4px 20px;flex-wrap:wrap;font-size:14px}
.nav a{text-decoration:none;color:var(--dim);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--paper)}
.nav a[aria-current]{color:var(--volt);border-bottom-color:var(--volt)}

/* トップのヒーロー */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.bolt{position:absolute;top:-4%;right:6%;width:min(620px,70vw);height:112%;background:var(--volt);
  clip-path:polygon(58% 0,100% 0,66% 42%,92% 42%,28% 100%,46% 54%,18% 54%);opacity:.95}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:24px}
.hero-copy{align-self:center;padding-block:72px;min-width:0}
.signal{font-family:var(--signal);color:var(--mint);font-size:15px;letter-spacing:.14em;margin:0 0 12px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(60px,10.5vw,124px);line-height:1.08;margin:0;letter-spacing:.02em}
.hero .yomi{font-family:var(--signal);letter-spacing:.3em;color:var(--lilac);margin:10px 0 28px;font-size:15px}
.hero .catch{font-size:clamp(18px,2.2vw,23px);line-height:1.8;margin:0 0 32px}
.hero-fig{justify-self:center;margin:24px 0 -2px}
.hero-fig img{width:auto;max-height:720px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:11px 24px;text-decoration:none;font-weight:700;border:1.5px solid var(--lilac);color:var(--paper);background:var(--ink)}
.btn:hover{background:var(--panel)}
.btn.main{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.btn.main:hover{background:#fff27a}

/* 下層ページの見出し */
.page-head{border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(var(--deep),var(--deep))}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
.page-head .txt{padding-block:56px;align-self:center;min-width:0}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,6.4vw,68px);line-height:1.2;margin:0 0 12px}
.page-head p.lead{margin:0;color:var(--dim);max-width:34em}
.page-head img{max-height:340px;width:auto;margin-bottom:-1px}

/* 本文 */
main section{padding-block:56px}
main section+section{border-top:1px solid var(--line)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,32px);line-height:1.4;margin:0 0 24px;text-wrap:balance}
h2::before{content:"";display:inline-block;width:.62em;height:.72em;margin-right:.45em;background:var(--volt);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
h3{font-size:18px;font-weight:700;margin:0 0 6px}
p{margin:0 0 1em}
.narrow{max-width:44em}
.note{color:var(--dim);font-size:14px}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{display:block;background:var(--panel);border:1px solid var(--line);padding:20px 22px;text-decoration:none;min-width:0}
a.card:hover{border-color:var(--volt)}
.card p{margin:0;color:var(--dim);font-size:15px;line-height:1.75}
a.card h3::after{content:" →";color:var(--volt)}
.card.off{border-style:dashed}

.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.news time{font-family:var(--signal);color:var(--mint)}

.spec{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:0 16px;margin:0}
.spec dt{color:var(--dim);padding:10px 0;border-bottom:1px solid var(--line)}
.spec dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}

.timeline{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--violet)}
.timeline li{padding:7px 0;display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px}
.timeline time{font-family:var(--signal);color:var(--mint)}
.timeline .big{font-weight:700;color:var(--volt)}

.goals{list-style:none;margin:0;padding:0;display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.goals li{font-size:18px;font-weight:700;padding-left:1.4em;position:relative}
.goals li::before{content:"";position:absolute;left:0;top:.5em;width:.7em;height:.8em;background:var(--volt);clip-path:polygon(60% 0,100% 0,62% 40%,90% 40%,20% 100%,42% 55%,12% 55%)}
.goals b{color:var(--volt)}

.rules{margin:0;padding-left:1.3em}
.rules li{padding:4px 0}
.letter{font-size:17px;line-height:2.2;border-left:2px solid var(--volt);padding-left:22px;max-width:36em}
.letter .sign{font-family:var(--signal);color:var(--lilac);margin:12px 0 0}
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:0 0 12px}
.stats div{background:var(--panel);border:1px solid var(--line);padding:16px 20px}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:32px;color:var(--volt);line-height:1.3}
.stats span{color:var(--dim);font-size:14px}

/* 公開前に消す確認タグ */
.todo{display:inline-block;font-family:var(--body);font-size:12px;font-weight:700;line-height:1.5;background:#ff5d8f;color:#2a0614;padding:2px 8px;margin-left:8px;vertical-align:middle;letter-spacing:0}

.site-foot{border-top:1px solid var(--line);padding-block:36px;color:var(--dim);font-size:14px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap}
.site-foot a{margin-right:16px}
.site-foot p{margin:0}

@media (max-width:760px){
  .site-head .wrap{gap:0;padding-block:8px 0}
  .nav{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:16px;white-space:nowrap;scrollbar-width:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .hero-copy{padding-block:28px 0}
  .hero .yomi{margin-bottom:14px}
  .hero .catch{font-size:17px;margin-bottom:18px}
  .btn{padding:9px 14px;font-size:14px}
  .btns{gap:8px}
  .hero-fig{margin-top:12px}
  .hero-fig img{max-height:540px}
  .bolt{top:38%;height:62%;right:-6%;width:100vw}
  .page-head .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .page-head .txt{padding-block:28px 0}
  .page-head img{max-height:210px;justify-self:end}
  .two{grid-template-columns:minmax(0,1fr);gap:28px}
  main section{padding-block:40px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:0}
  .news li{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ファンクラブの導線 */
.head-fc{order:3;background:var(--volt);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;padding:6px 14px;white-space:nowrap}
.head-fc:hover{background:#fff27a}
.site-head .nav{order:2;margin-left:auto}
.more{margin:16px 0 0;font-size:15px}
.more a{color:var(--lilac)}
.fc-band{background:var(--violet);padding-block:0!important;overflow:hidden;border-bottom:1px solid var(--line)}
main section+.fc-band,.fc-band+section{border-top:0}
.fc-band .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:end}
.fc-band img{max-height:440px;width:auto;justify-self:center;margin-top:24px}
.fc-copy{padding-block:44px;align-self:center;min-width:0}
.fc-band .signal{color:var(--volt)}
.fc-band h2{font-size:clamp(28px,4.4vw,44px);margin-bottom:12px}
.fc-band h2::before{display:none}
.fc-list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:4px}
.fc-list li{padding-left:1.2em;position:relative;font-weight:700}
.fc-list li::before{content:"";position:absolute;left:0;top:.55em;width:.6em;height:.7em;background:var(--volt);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fc-band .note{color:var(--paper)}
.pause{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;border:1px solid var(--mint);color:var(--mint);padding:1px 10px}
@media (max-width:760px){
  .site-head .nav{order:4;margin-left:0}
  .head-fc{order:2;padding:4px 12px;font-size:13px}
  .site-head .wrap{gap:6px 0}
  .fc-band .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .fc-band img{order:2;max-height:300px;margin-top:0}
  .fc-copy{padding-block:32px 16px}
}

/* トップの寄りの立ち絵。上端と下端を帯に揃え、左は文字の下へ溶かす */
.hero .wrap{min-height:640px}
.hero-copy{position:relative;z-index:2}
.hero-fig{position:absolute;top:0;bottom:0;right:max(0px,calc((100vw - var(--wrap))/2));margin:0;height:100%;z-index:1}
.hero-fig img{height:100%;width:auto;max-height:none;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
.month{margin:0;padding:0;list-style:none;counter-reset:m;display:grid;gap:0}
.month li{counter-increment:m;display:grid;grid-template-columns:2.4em minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--line)}
.month li::before{content:counter(m);grid-row:span 2;font-family:var(--display);font-size:24px;color:var(--volt);line-height:1.4}
.month b{font-size:18px}
.month span{color:var(--dim);font-size:15px}
@media (max-width:760px){
  .hero .wrap{min-height:0}
  .hero-fig{position:static;height:auto;margin:14px -20px 0;overflow:hidden}
  .hero-fig img{width:100%;height:400px;object-fit:cover;object-position:74% 0;-webkit-mask-image:none;mask-image:none}
}

/* 文字と袖が重ならないよう立ち絵を右へ逃がす */
@media (min-width:761px){
  .hero h1{font-size:clamp(56px,8.4vw,112px)}
  .hero-copy{max-width:440px;text-shadow:0 0 10px var(--ink),0 0 3px var(--ink)}
  .hero-copy .btn{text-shadow:none}
  .hero-fig{right:calc(max(0px,(100vw - var(--wrap))/2) - 130px)}
  .hero-fig img{-webkit-mask-image:linear-gradient(to right,transparent 8%,#000 42%);mask-image:linear-gradient(to right,transparent 8%,#000 42%)}
}

/* 下層ページの立ち絵は頭からおへそまでの寄りで大きめに */
@media (min-width:761px){
  .page-head img{max-height:430px;max-width:54vw;margin-top:16px}
}
@media (max-width:760px){
  .page-head img{max-height:300px;max-width:100%;margin-top:8px}
}

/* 名前は必ず1行。立ち絵の位置はwrap基準（画面幅で左へずれないように） */
.hero h1{white-space:nowrap}
@media (min-width:761px){
  .hero-copy{max-width:520px}
  .hero-fig{right:-130px}
}

/* スマホでも文字と画像を同じ高さに横並び */
@media (max-width:760px){
  .hero .wrap{position:static;display:block;min-height:0}
  .hero-copy{width:56%;padding-block:28px 32px;text-shadow:none}
  .hero h1{font-size:11.4vw}
  .signal{font-size:12px;letter-spacing:.06em;margin-bottom:8px}
  .hero .yomi{font-size:12px;letter-spacing:.18em;margin:6px 0 12px}
  .hero .catch{font-size:14px;line-height:1.75;margin-bottom:16px}
  .hero .catch br{display:none}
  .hero .btns{flex-direction:column;align-items:stretch}
  .hero .btn{text-align:center;padding:9px 6px;font-size:13px}
  .more{font-size:13px;margin-top:10px}
  .hero-fig{position:absolute;top:0;bottom:0;right:0;left:auto;width:50%;height:auto;margin:0;overflow:hidden}
  .hero-fig img{width:100%;height:100%;object-fit:cover;object-position:60% 0;max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
  .bolt{top:0;height:100%;right:-14%;width:66vw}

  .page-head .wrap{grid-template-columns:minmax(0,1fr) 46%;gap:8px;align-items:stretch}
  .page-head .txt{padding-block:24px;align-self:center}
  .page-head h1{font-size:7.4vw;margin-bottom:8px}
  .page-head p.lead{font-size:13px;line-height:1.7}
  .page-head img{width:calc(100% + 20px);max-width:none;height:210px;max-height:none;margin:0 -20px 0 0;object-fit:cover;object-position:50% 0;justify-self:stretch}

  .fc-band .wrap{grid-template-columns:minmax(0,1fr) 38%;gap:8px;align-items:stretch}
  .fc-copy{padding-block:26px;order:1}
  .fc-band h2{font-size:6.6vw}
  .fc-copy p,.fc-list li{font-size:14px;line-height:1.7}
  .fc-band .btn{padding:9px 12px;font-size:13px}
  .fc-band img{order:2;width:calc(100% + 20px);max-width:none;height:100%;max-height:none;margin:0 -20px 0 0;object-fit:cover;object-position:42% 0;justify-self:stretch;align-self:stretch}
}

/* スマホの微調整：FC欄の画像は見出しの高さに抑え、切れ目は左へ溶かす */
@media (max-width:760px){
  .hero-fig{width:47%}
  .page-head img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
  .fc-band h2{font-size:5.2vw;white-space:nowrap}
  .fc-band .wrap{grid-template-columns:minmax(0,1fr) 36%;gap:4px}
  .fc-band img{height:340px;align-self:end;object-position:40% 0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%);mask-image:linear-gradient(to right,transparent 0,#000 18%)}
}

.site-head{background:var(--ink)}

/* スマホのトップ：顔を枠の中央へ */
@media (max-width:760px){
  .hero-fig img{object-position:49% 0}
}

/* FC欄は「よっす」。切らずに帯の下端へ揃える */
.fc-band img{align-self:end}
@media (max-width:760px){
  .fc-band .wrap{grid-template-columns:minmax(0,1fr) 40%}
  .fc-band img{width:calc(100% + 20px);height:auto;max-height:none;object-fit:contain;-webkit-mask-image:none;mask-image:none;align-self:end;margin:0 -20px 0 0}
}

/* スマホの見出し画像：顔を枠の中央へ */
@media (max-width:760px){
  .page-head img[src*="links"]{object-position:6% 0}
  .page-head img[src*="profile"]{object-position:22% 0}
}

/* ファンクラブ欄：スマホは全身画像にして頭の位置を上げる（picture は枠を作らない） */
.fc-band picture{display:contents}
.fc-band source{display:none}