/* --- リセットと基本 --- */
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:Inter, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #e6eef8;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 20%),
                radial-gradient(ellipse at 80% 60%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 20%),
                linear-gradient(180deg,#04061a 0%, #071433 50%, #0b1630 100%);
    background-attachment: fixed;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
@media (max-width: 800px) {
  body { font-size: 18px; }
    h1 { font-size: 26px !important; }
    sup { font-size: 12px; }
}
@media (min-width: 801px) {
  body { font-size: 20px; }
    h1 { font-size: 32px !important; }
    sup { font-size: 14px; }
}

/* --- 星層（軽いアニメーション）--- */
.stars{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}
.stars::before,
.stars::after{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:repeat;
    mix-blend-mode:screen;
    will-change:background-position, opacity;
    pointer-events:none;
}

.stars::before{
    background-image: radial-gradient(#ffffff 0.8px, transparent 2px);
    background-size: 24px 24px;
    opacity:0.16;
    animation: moveBgSlow 800s linear infinite;
}
.stars::after{
    background-image: radial-gradient(#ffffff 1.2px, transparent 1px);
    background-size: 6px 6px;
    opacity:0.08;
    animation: moveBg 1200s linear infinite reverse;
}

@keyframes moveBg{
    from{background-position:0 0}
    to{background-position:-2000px -1400px}
}
@keyframes moveBgSlow{
    from{background-position:0 0}
    to{background-position:2000px -800px}
}

/*
@media (prefers-reduced-motion: reduce){
    .stars::before, .stars::after, .orbiter{animation:none}
}
*/

/* --- ページレイアウト --- */
header{position:relative;z-index:10}
.container{
    max-width:1100px;
}

header{
    padding: 3rem 1.25rem;
    display:block;
    text-align: center;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
}
.site-title{
    font-weight:800;
    letter-spacing:0.6px;
    font-size:2.5rem
}
/*
nav a{
    color:inherit;
    text-decoration:none;
    margin-left:1rem;
    font-weight:500;
    opacity:0.9
}*/

footer{
    width: 100%;
    bottom: 0;
    padding-bottom: 4rem;
    text-align: center;
}

main{
    position:relative;
    z-index:5;
    flex:1;
    padding:0 1rem;
}

section.section{
    padding:4rem 0; position:relative; overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.02);
    margin: 10px;
}
section.section:nth-child(odd){background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}
section.section:nth-child(even){background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.00));}

.section .inner{max-width:900px;margin:0 auto}
.section .heading{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#f1f9ff}
.section .lead{color:rgba(230,238,248,0.8);margin-bottom:1.5rem}
.section .note{font-size:0.85rem;color:rgba(230,238,248,0.65);margin-top:1rem}


.tooltip {
    position:absolute;
    background:#1c2235;
    color:#fff;
    padding:1rem 1.5rem;
    border-radius:8px;
    font-size:1rem;
    max-width:25%;
    box-shadow:0 2px 6px rgba(0,0,0,0.5);
    z-index:20;
    display:none;
    pointer-events:none;
}
.tooltip.mobile {
    position:fixed;
    left:50%;
    bottom:1rem;
    transform:translateX(-50%);
    max-width: 90%;
    width: 90%;
}

/*
.orbiter{
    position:absolute;right:-6rem;top:10%;width:280px;height:280px;border-radius:50%;
    border:10px dashed rgba(255,255,255,0.06);filter:blur(0.4px);opacity:0.6;transform-origin:50% 50%;
    animation: spin 30s linear infinite;
    pointer-events:none;
}
@keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

footer{border-top:1px solid rgba(255,255,255,0.04);padding:2rem 0;margin-top:auto}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.muted{color:rgba(230,238,248,0.6);font-size:0.95rem}

@media (max-width:800px){
    .orbiter{display:none}
    header{flex-direction:column;align-items:flex-start}
    section.section{padding:3.5rem 0}
}
*/

figure {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}
figcaption {
    color: rgba(230,238,248,0.7);
    text-align: center;
}
@media (max-width: 800px) {
    figcaption { font-size: 14px; }
}
@media (min-width: 801px) {
    figcaption { font-size: 16px; }
}

img {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: auto;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 2rem;
}
th, td {
    border: 1px solid #ccc;
    padding: 0.5rem;
}
.scrollable {
    overflow-x: auto;
}

a {
  color: lab(53.48% 22.28 -72.93);
}

sup {
    font-weight: normal;
}

.note-trigger {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: #b3b3b3;
}


/*テキストの折り返しなど*/
.text {
    display: inline-block;
}

.nowrap {
    white-space: nowrap;
}