:root{--bg:#F6F7FA;
    --card:#fff;
    --ink:#1D2433;
    --mute:#5B6478;
    --navy:#22305A;
    --navy2:#2F4180;
    --gold:#B58B3F;
    --line:#DDE1EB;
    --on-navy:#fff;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --bg:#121726;
        --card:#1B2236;
        --ink:#E8EBF3;
        --mute:#A3ABBF;
        --navy:#0D1222;
        --navy2:#8FA2E8;
        --gold:#D4AA5E;
        --line:#2C3550;
    }
}
:root[data-theme="dark"]{
    --bg:#121726;
    --card:#1B2236;
    --ink:#E8EBF3;
    --mute:#A3ABBF;
    --navy:#0D1222;
    --navy2:#8FA2E8;
    --gold:#D4AA5E;
    --line:#2C3550
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:70px;
}
*{
    box-sizing:border-box;
}

body{
    margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.8 "Noto Sans JP",system-ui,sans-serif;
}
h1,h2,h3{
    font-family:"Shippori Mincho",serif;margin:0;
    line-height:1.35;
}
a{
    color:var(--navy2);
}

strong {
    color: #B58B3F;
}
:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:2px;
}
.en{
    display:none;
}
body.lang-en .en{
    display:revert;
}body.lang-en .ja{
    display:none;
}
.wrap{max-width:1000px;
    margin:0 auto;
    padding:0 22px;
}
nav{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:9;background:var(--bg);
    border-bottom:1px solid var(--line);
}
nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;height:58px;
}
.logo{font-family:"Shippori Mincho",serif;
    font-weight:700;
    font-size:18px;
    color:var(--ink);
    text-decoration:none;
}
nav ul{
    display:flex;
    gap:20px;list-style:none;
    margin:0;padding:0;font-size:14px;
}
nav ul a{
    color:var(--mute);
    text-decoration:none;
}
nav ul a:hover{
    color:var(--ink);
}
.lang{
    border:1px solid var(--navy2);
    background:none;color:var(--navy2);
    border-radius:99px;padding:4px 14px;
    font:inherit;font-size:13px;cursor:pointer;
}
@media(max-width:760px){
    nav ul{display:none};
}
.hero{
    background:var(--navy);
    color:var(--on-navy);
    padding:84px 0 96px;
    position:relative;
    overflow:hidden;
}
.hero svg{
    position:absolute;
    right:-40px;
    bottom:-10px;
    height:115%;
    opacity:.16;
}
.hero h1{
    font-size:clamp(34px,6vw,60px);
    font-weight:700;max-width:14em;
}
.hero p{
    max-width:34em;
    color:#D3D9EE;
    margin:20px 0 32px;
}
.btn{
    display:inline-block;
    padding:12px 26px;
    border-radius:6px;
    background:var(--gold);
    color:#1a1405;
    font-weight:700;
    text-decoration:none;
    border:0;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}
.btn.alt{
    background:none;
    border:1.5px solid currentColor;
    color:inherit;
    margin-left:10px;
}
section{
    padding:72px 0;
}
section h2{
    font-size:30px;
    margin-bottom:10px;
}
.lead{
    color:var(--mute);
    max-width:38em;
    margin:0 0 32px;
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;padding:26px;
}
.card h3{
    font-size:20px;
    margin-bottom:6px;
}
.zoom{
    background:var(--navy);
    color:var(--on-navy);
    border-radius:14px;
    padding:36px;
    display:grid;
    gap:28px;
    grid-template-columns:1.2fr 1fr;
}
.zoom dl{
    margin:0;
    display:grid;
    grid-template-columns:auto 1fr;gap:6px 18px;align-content:center;
}
.zoom dt{
    color:#B9C3E6;
}
.zoom dd{
    margin:0;
}
@media(max-width:700px){
    .zoom{
        grid-template-columns:1fr;padding:26px;}
    }
.alt-bg{
    background:var(--card);
    border-block:1px solid var(--line);
}
.files{
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
}
.files li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:16px 22px;
    border-bottom:1px solid var(--line);
}
.files li:last-child{border:0}
.files small{
    color:var(--mute);
    display:block;
}
.dl{
    white-space:nowrap;
    font-weight:700;
    text-decoration:none;
    border:1.5px solid var(--navy2);
    padding:6px 16px;
    border-radius:6px;
}
form{
    display:grid;
    gap:16px;
    max-width:620px;
}
label{
    font-weight:500;
    font-size:14px;
    display:grid;
    gap:4px;
}
input[type=text],input[type=email],textarea{
    font:inherit;padding:11px 12px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--bg);color:var(--ink);
}
.choice{
    display:grid;
    gap:10px;
}
.choice label{
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
    cursor:pointer;
    font-weight:400;
}
.choice input{
    margin-top:6px;
    accent-color:var(--navy2);
}
.choice label:has(input:checked){
    border-color:var(--navy2);
}
.choice b{
    display:block;
}
.links a{
    display:block;
    text-decoration:none;
    color:var(--ink);
}
.links .card:hover{
    border-color:var(--navy2);
}
.links span.u{
    color:var(--mute);
    font-size:13px;
}
.yt{
    display:flex;
    gap:28px;align-items:center;
    flex-wrap:wrap;
}
.yt .play{
    width:200px;
    aspect-ratio:16/9;
    background:var(--navy);
    border-radius:10px;
    display:grid;
    place-items:center;
}
footer{
    background:var(--navy);
    color:#C9D0E8;
    padding:44px 0;
    font-size:14px;
}
footer a{
    color:goldenrod;
    list-style-type: none;
}