/* Project I.R.I.S. のサイト（トップ・企画概要・用語説明）。
   色はアプリと揃える：地下の暗がり／シアン（Sig）／マゼンタ（Wav）／管理都市の白 */
:root{--bg:#06070c; --panel:rgba(12,18,30,.72); --line:rgba(127,231,255,.22);
      --ink:#e7eef7; --dim:#8ea3bd; --cy:#7fe7ff; --mg:#ff5fa2; --white:#f2f6fb}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}
h1,h2,h3,p,dd,dt,span,b,li{line-break:strict; word-break:auto-phrase; overflow-wrap:normal}
#bg{position:fixed; inset:0; background:url(assets/kv.webp) center/cover no-repeat; background-position:50% 20%}
@media (min-aspect-ratio:1/1){ #bg{background-image:url(assets/kv_wide.webp); background-position:50% 40%} }
#veil{position:fixed; inset:0;
  background:linear-gradient(180deg,rgba(6,7,12,.80) 0%,rgba(6,7,12,.46) 16%,
    rgba(6,7,12,.14) 34%, rgba(6,7,12,.12) 48%,
    rgba(6,7,12,.72) 72%,rgba(6,7,12,.97) 100%)}
/* 管理都市のモニタ越しに見ている感じ（アプリと同じ走査線） */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px); opacity:.5}
main{position:relative; z-index:1; min-height:100dvh; display:flex; align-items:stretch; justify-content:center;
  padding:32px 20px calc(24px + env(safe-area-inset-bottom))}
.in{width:100%; max-width:800px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
  min-height:calc(100dvh - 56px)}
/* キービジュアルを真ん中に見せるため、カードから下は画面の下側へ寄せる（2026-09-21 あやめさん）。
   実際の指定は下の .cards（margin-top:auto）。画面が低いときは詰める */
@media (max-height:620px){ .in{min-height:0} .cards{margin-top:18px!important} }

.cat{margin-top:3vh; font-size:10.5px; letter-spacing:.42em; text-indent:.42em; color:var(--cy); font-weight:600}
h1.logo{margin:0; font-size:clamp(26px,7vw,44px); letter-spacing:.2em; font-weight:300; color:var(--white);
  text-shadow:0 0 28px rgba(127,231,255,.35)}
h1.logo b{font-weight:600}
.lead{margin:0; font-size:13px; line-height:2.05; color:#e2ecf8;
  text-shadow:0 2px 10px rgba(0,0,0,1), 0 0 26px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.8)}
.lead b{color:var(--cy); font-weight:600}

.cards{display:flex; gap:14px; width:100%; flex-wrap:wrap; justify-content:center; margin-top:auto}
a.card{flex:1 1 230px; max-width:330px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); padding:20px 20px 18px;
  backdrop-filter:blur(6px); text-align:left; display:block; transition:transform .16s ease, background .16s ease, border-color .16s}
a.card:hover{background:rgba(18,28,46,.86); border-color:rgba(127,231,255,.45)}
a.card:active{transform:translateY(1px)}
a.card.main{background:linear-gradient(180deg,rgba(127,231,255,.16),rgba(12,18,30,.8)); border-color:rgba(127,231,255,.5)}
a.card .n{font-size:10px; letter-spacing:.24em; color:var(--cy); font-weight:600}
a.card b{display:block; font-size:17px; margin:8px 0 6px; letter-spacing:.06em; font-weight:600}
a.card span{display:block; font-size:12px; line-height:1.9; color:var(--dim)}
a.card .t{display:inline-block; margin-top:10px; font-size:10.5px; color:var(--cy); letter-spacing:.1em;
  border-bottom:1px solid var(--line); padding-bottom:2px}

.foot{margin-top:4px; font-size:11px; color:#6b7d95; line-height:1.9}
.contact{margin-top:12px; padding-top:14px; width:100%; max-width:520px; border-top:1px solid rgba(127,231,255,.18)}
.contact .lbl{font-size:10px; letter-spacing:.22em; color:var(--cy)}
.contact .org{margin-top:6px; font-size:12.5px; color:#cfe0f2; letter-spacing:.04em}

/* 読み物のページ（企画概要のテキスト版・用語説明） */
.doc{width:100%; max-width:760px; text-align:left}
.doc .back{display:inline-block; margin-bottom:16px; font-size:10.5px; letter-spacing:.14em; color:var(--cy);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
.doc h1{margin:0 0 6px; font-size:20px; letter-spacing:.1em; font-weight:600; color:var(--white)}
.doc .sub{margin:0 0 22px; font-size:11px; letter-spacing:.2em; color:var(--cy)}

/* 用語説明 */
.word{display:flex; gap:16px; align-items:flex-start; margin:0 0 16px; padding:16px;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(6px)}
.word img{width:38%; max-width:240px; height:auto; border:1px solid rgba(127,231,255,.2); flex:none; display:block}
.w-body{flex:1; min-width:0}
.word h2{margin:0 0 2px; font-size:16px; letter-spacing:.06em; color:var(--white); font-weight:600}
.word .w-en{margin:0 0 9px; font-size:9.5px; letter-spacing:.2em; color:var(--cy)}
.word p:not(.w-en){margin:0; font-size:12.5px; line-height:1.95; color:#d3e0ee}
.word b{color:var(--cy); font-weight:600}
.word .old{display:inline-block; margin-top:8px; font-size:10.5px; color:#7386a0; letter-spacing:.04em}
.group-head{margin:26px 0 12px; font-size:11px; letter-spacing:.24em; color:var(--mg); font-weight:600}
.group-head:first-of-type{margin-top:8px}
@media(max-width:520px){
  .word{flex-direction:column; gap:12px}
  .word img{width:100%; max-width:none}
}

/* スマホのトップ（2026-09-21 あやめさん「もう少しキービジュアルを見えるように」）。
   カードを薄くして、画面の上半分に絵が残るようにする */
@media(max-width:520px){
  .cat{margin-top:9vh}
  h1.logo{letter-spacing:.14em}
  .lead{font-size:12.5px; line-height:1.95}
  a.card{flex:1 1 100%; max-width:none; padding:12px 15px 13px}
  a.card b{font-size:15.5px; margin:5px 0 4px}
  a.card span:not(.t){font-size:11px; line-height:1.75;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  a.card .t{margin-top:7px}
  .cards{gap:9px}
  .foot{display:none}
  .contact{margin-top:10px; padding-top:10px}
}