@font-face{
  font-family:"Lunaris Pro";
  src:url("./font/lunaris_font.ttf") format("truetype");
  unicode-range: U+0041-005A, U+0061-007A;
  font-display:swap;
}

:root{
  --paper-tex: url("/zerofount/library/lunaris/images/backgroundpaper.png");
  --paper-tex-size: 512px 512px;
  --bg:#07090c; --chrome1:#1b2128; --chrome2:#0f141a; --chrome3:#2a333d;
  --line:#394552; --line2:#202830; --glow:#4fd3ff; --glow2:#ff9b3b;
  --txt:#d6dde6; --muted:#9aa7b6;
  --paper:#f2ead7; --paper2:#e6dcc6; --ink:#241b13;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(1200px 700px at 50% 0%, #15202c 0%, var(--bg) 60%, #040507 100%);
  color:var(--txt); font-family:"Georgia","Times New Roman",serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img{max-width:100%;height:auto}

/* スクロールバー非表示（ただしスクロール自体は可能） */
.paper,.sidebar,.rail,.carTrack{-ms-overflow-style:none;scrollbar-width:none}
.paper::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.rail::-webkit-scrollbar,.carTrack::-webkit-scrollbar{width:0;height:0}

.frame{
  display:grid;
  grid-template-columns:280px minmax(520px,1fr) 340px;
  gap:18px;
  padding:18px;
  height:calc(100vh - 64px);
  /* overflow:hidden; ← 削除 */
}
.paper{
  position:relative;overflow:auto;border-radius:12px;padding:22px 26px;
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),
    url("/zerofount/library/lunaris/images/backgroundpaper.png"),
    radial-gradient(900px 500px at 30% 10%,rgba(255,255,255,.65),transparent 60%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper2) 70%,#d8cbb2 100%);
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-size:520px 520px,520px 520px,auto,auto;
  background-position:0 0;
  background-blend-mode:normal,multiply,normal,normal;
  background-attachment:local,local,local,local;
  color:var(--ink);
  box-shadow:0 22px 55px rgba(0,0,0,.72),inset 0 0 0 1px rgba(0,0,0,.10),inset 0 30px 60px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.18);
  min-height:0;
}
/* 文字をテクスチャより手前に */
.paper > *{position:relative; z-index:1}

.paper h1,.paper h2,.paper h3{margin:.2em 0 .6em; letter-spacing:.02em}
.paper h1{font-size:34px; color:#3a2312; text-shadow:0 1px 0 rgba(255,255,255,.45)}
.paper p{line-height:1.85; margin:.6em 0}

/* 右レール：3パネルが“収まる”前提でスクロールさせない */
.rail{
  padding:14px;
  overflow:hidden;      /* ← rail自体をスクロールさせない */
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 固定3パネル：高さを抑えてちょうど収める */
.railHero{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.heroCard{
  display:block;text-decoration:none;border-radius:14px;
  overflow:hidden;border:1px solid rgba(255,255,255,.10);
  background:#111;box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.heroImg{
  height:118px; /* 150→118に圧縮。3枚＋カルーセルが収まりやすい */
  background-size:cover;background-position:center;
  filter:brightness(.9) saturate(.9);
}
.heroText{padding:10px}
.heroText h3{margin:0 0 4px;color:#e8f2ff;font-size:15px}
.heroText p{margin:0;color:#aab8c8;font-size:12.5px;line-height:1.45}
.heroCard:hover{
  border-color:rgba(79,211,255,.25);
  box-shadow:0 0 20px rgba(79,211,255,.15),0 12px 30px rgba(0,0,0,.5);
}

.footer{padding:14px 18px; color:#7f8da0; font-size:12px; opacity:.9}
:root{
  --space-a:#0b0f16; --space-b:#040609;
  --haze:rgba(79,211,255,.06); --haze2:rgba(255,155,59,.05);
  --grain:rgba(255,255,255,.06); --scan:rgba(255,255,255,.035);
  --vignette:rgba(0,0,0,.62);
}

body{position:relative; isolation:isolate; overflow-x:hidden}

body::before,body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-1}
body::before{
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(21,32,44,.0) 0%, rgba(21,32,44,.0) 35%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.35) 100%),
    radial-gradient(900px 520px at 20% 18%, var(--haze), transparent 62%),
    radial-gradient(900px 520px at 80% 22%, var(--haze2), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0) 22%, rgba(0,0,0,.18) 100%),
    radial-gradient(1600px 900px at 50% -10%, #15202c 0%, var(--bg) 58%, #040507 100%);
  filter:saturate(1.06) contrast(1.04);
}

body::after{
  background:
    radial-gradient(1200px 900px at 50% 30%, transparent 40%, var(--vignette) 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, var(--scan) 2px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
  mix-blend-mode:overlay;
  opacity:.45;
}

@supports (mix-blend-mode:soft-light){
  body::after{mix-blend-mode:soft-light; opacity:.55}
}
/* 任意：全体を少しだけ“硬く”する（やり過ぎ注意） */
.frame{filter:drop-shadow(0 0 22px rgba(79,211,255,.06))}
@media (max-width: 900px){
  main.frame>aside.sidebar{display:none!important}
  html,body{height:auto!important}
    body{min-height:0!important}

    .header{
      position:fixed;top:0;left:0;right:0;
      z-index:3000;
    }
    main.frame{padding-top:76px!important;} /* 64px + 余白 */


    main.frame{
      display:block!important;
      height:auto!important;
      min-height:0!important;
      max-height:none!important;
      padding:12px!important;
      gap:0!important;
    }

    article.paper{
      overflow:visible!important;
      height:auto!important;
      min-height:0!important;
      max-height:none!important;
      margin:0!important;
    }

    .rail{display:none!important}
  .sidebar{
  position:fixed;inset:64px auto 0 0; /* ヘッダー64px想定 */
  width:min(86vw,360px);height:calc(100svh - 64px);
  transform:translateX(-110%);transition:transform .18s ease;
  z-index:1000
}
body.menuOpen .sidebar{transform:translateX(0)}
body.menuOpen{overflow:hidden}

.drawerScrim{
  position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:999
}
body.menuOpen .drawerScrim{opacity:1;pointer-events:auto}
}
@media (max-width:900px){
  /* PC側sidebar/railはSPで消す（縦積み空間の原因） */
  main.frame>aside.sidebar,main.frame>aside.rail{display:none!important}
  main.frame{display:block!important;height:auto!important;min-height:0!important;padding:12px!important}
  article.paper{overflow:visible!important}

  /* header: nav/search非表示＋右にボタン */
  .header nav.topnav,.header form{display:none}
  .header{position:sticky;top:0;z-index:2000}
  .header .back{margin-left:0;flex:0 0 auto;z-index:1}
  .header .logo{position:absolute;left:50%;transform:translateX(-50%);height:44px;margin-left:0}
  .mBtn{margin-left:auto;width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;cursor:pointer;z-index:1}
  .mBtn span{height:2px;background:#d6dde6;border-radius:2px}

  /* drawer */
  .mScrim{position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:1900}
  .mDrawer{
    position:fixed;top:64px;left:0;bottom:0;width:min(86vw,360px);
    transform:translateX(-110%);transition:transform .18s ease;
    z-index:2000;background:linear-gradient(180deg,#111821,#0b1016);
    border-right:1px solid rgba(255,255,255,.06);box-shadow:18px 0 40px rgba(0,0,0,.55);
    display:flex;flex-direction:column
  }
  body.menuOpen .mScrim{opacity:1;pointer-events:auto}
  body.menuOpen .mDrawer{transform:translateX(0)}
  body.menuOpen{overflow:hidden}

  .mDrawerHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
  .mDrawerTitle{color:#aab8c8;letter-spacing:.12em;font-size:12px}
  .mDrawerClose{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:#d6dde6;cursor:pointer}

  .mNav{overflow:auto;flex:1;padding:8px 0}
  .mNav::-webkit-scrollbar{width:0;height:0}

  /* accordion */
  .mGroup{border-bottom:1px solid rgba(255,255,255,.06)}
  .mCat{
    list-style:none;cursor:pointer;
    padding:14px 16px;color:#8fa4ba;letter-spacing:.12em;font-size:20px;
    display:flex;align-items:center;justify-content:space-between
  }
  .mGroup>summary::-webkit-details-marker{display:none}
  .mCat::after{content:"›";transform:rotate(90deg);opacity:.65}
  .mGroup[open]>.mCat::after{transform:rotate(-90deg)}
  .mItemIcon{
  width:18px;
  height:18px;
  object-fit:contain;
  opacity:.85;
  flex-shrink:0;
}
  .mGroup>a,.mDisabled{
    display:block;padding:12px 18px 12px 36px;font-size:15px;text-decoration:none;color:#d6dde6
  }
  .mGroup>a:hover{background:rgba(79,211,255,.08)}
  .mDisabled{color:#7e8da0}
  .mDisabled em{font-style:normal;opacity:.8;margin-left:6px}
  .mRailHero{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.06)}
.mRailHeroHead{color:#8fa4ba;letter-spacing:.12em;font-size:12px;margin:4px 4px 10px;opacity:.9}

.mDrawer .railHero{display:flex;flex-direction:column;gap:10px}
.mDrawer .heroCard{border-radius:14px}
.mDrawer .heroImg{height:96px} /* SP向けに少し圧縮 */
.mDrawer .heroText h3{font-size:14px}
.mDrawer .heroText p{font-size:12px}
}
@media (max-width:900px){
  .header nav.topnav,.header form{display:none}

  .header{position:fixed;top:0;left:0;right:0;z-index:3000}
  main.frame{padding-top:76px!important}

  .hdrL,.hdrC,.hdrR{flex:0 0 42px;display:flex;align-items:center;justify-content:center}
  .hdrL{justify-content:flex-start}
  .hdrC{flex:1 1 auto;justify-content:center}
  .hdrR{justify-content:flex-end}

  .header .back{margin-left:0}
  .header .logo{height:44px;margin:0;position:static;transform:none}

  .mBtn{width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;cursor:pointer}
  .mBtn span{height:2px;background:#d6dde6;border-radius:2px}
}
@media (min-width: 1024px) {
    .mDrawer{
      display: none !important;
    }
}