/* ====== Base ====== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 2px;
}
html { 
    scroll-behavior: smooth;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", "Meiryo", "Segoe UI", Arial, sans-serif;
    background: #05070a; 
    color: #e8f0ff; 
    line-height: 1.6;
}
a { 
    color: #8cc2ff; 
    text-decoration: none;
}
a:hover { 
    text-decoration: underline;
}

li { 
    opacity: .8; 
    margin-left: 1.5rem;
}

/* ====== Layout ====== */
.container { 
    max-width: 1100px; 
    padding: 0 4vw; 
    margin: 0 auto;
}
.container p { 
    opacity: .8; 
    padding: .5rem 1.5rem;
}
header {
    position: sticky; 
    top: 0; 
    z-index: 50;
    background: rgba(5,7,10,.8);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255,255,255,.06);
}
.navbar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: .5rem 0;
    opacity: .8; 
}
.lang-switch { 
    text-align: right;
}
footer {
    border-top: 1px solid rgba(255,255,255,.08);
    color: #9fb8e6;
    padding: 1.2rem 0; 
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.credit { 
    text-align: right; 
    opacity: 0.5;
}

/* ====== Sections ====== */
.section { 
    padding: 2rem 0;
}
.section h1, .section h2, .section h3, .section h4 { 
    color: #eaf4ff; 
    letter-spacing: .01em; 
    font-weight: bolder; 
    padding: 0.5rem;
}
.section h1 { font-size: clamp(40px, 3vw, 50px); }
.section h2 { font-size: clamp(30px, 2.5vw, 40px); }
.section h3 { font-size: clamp(20px, 1.5vw, 30px); }
.section h4 { font-size: clamp(10px, 1.0vw, 20px); }
.lead { 
    color: #cfe3ff; 
}
.section ul { 
    list-style: none;
}
.card {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; 
    padding: 1rem; 
    margin: 1rem; 
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.card li { 
    list-style: disc;
}

/* ====== For high school students ====== */
.hero { 
    position: relative; 
    height: 70vh; 
    min-height: 500px;
}
.hero img {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    filter: brightness(.75) contrast(1.05) saturate(1.05);
}
.hero h1 { 
    position: absolute; 
    font-size: clamp(40px, 3vw, 50px); 
    font-weight: bolder; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%);
    text-shadow: 0 0 10px #000; 
    white-space: nowrap; 
}

.ad { 
    text-align: center;
}
.ad h2, .ad h3 { font-weight: bolder; }
.ad h2 { font-size: clamp(30px, 2.5vw, 40px); }
.ad h3 { font-size: clamp(20px, 2.0vw, 30px); }
.ad img { 
    width: 70%; 
    margin: 1rem;
}
.ad p { 
    width: 80%; 
    margin: 1rem auto;
}

/* ====== Fade-in (for scroll) ====== */
.fade-in { 
    opacity: 0; 
    transform: translateY(16px); 
    transition: opacity .7s ease-out, transform .7s ease-out;
}
.fade-in.visible { 
    opacity: 1; 
    transform: translateY(0);
}

/* ====== Responsive ====== */
@media screen and (max-width: 700px) {
    * { font-size: clamp(15px, 1vh, 20px); }
    body { 
        width: 100%; 
        margin: 0rem; 
        padding: 0rem; 
        text-align: center;
    }
    .navbar { 
        display: block; 
    }
    .container { 
        width 100%; 
        margin: 0;
        padding: 0;
    }
    .container p, .container li {
        margin: 0.8rem 0.4rem; 
        padding: 0.2rem 0.4rem;
    }
    .card { 
        margin: 0.8rem 0.4rem;
        padding: 0.5rem 0.4rem;
    }
    .card li { 
        margin: 0.5rem 0.4rem; 
        padding: 0.1rem 0.4rem;
        text-align: center;
        list-style: none;
    }
    .hero h1, .hero span, .ad h2 { 
        font-size: clamp(20px, 3vh, 30px);
    }
    .hero h1 { 
        white-space: wrap;
    }
    .hero span { 
        white-space: nowrap;
    }
    .ad {
        margin: 0.5rem 0.4rem;
        padding: 0.5rem 0.4rem;
    }
    .ad img { 
        width: 95%; 
        margin: 0.4rem;
    }
    .ad p { 
        width: 100%; 
        margin: 0.5rem 0.4rem;
        padding: 0.5rem 0.4rem;
    }
}