/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --deep-blue:#0a0e27;
    --accent-cyan:#00d4ff;
    --gold:#c8a84e;
    --gold-light:#f0d78c;
    --white:#f0f0f5;
    --glass-bg:rgba(10,14,39,0.6);
    --glass-border:rgba(200,168,78,0.2);
}
html{scroll-behavior:smooth}
body.nav-open{overflow:hidden;position:fixed;width:100%;touch-action:none}
/* ページ本体だけをぼかす（ナビは対象外） */
body.nav-open #stars-canvas,
body.nav-open .hero-wrap,
body.nav-open .page-wrapper,
body.nav-open > footer,
body.nav-open .hero-social{
    filter:blur(10px);
    -webkit-filter:blur(10px);
    transition:filter .4s ease;
    pointer-events:none;
}
body{
    font-family:'Noto Sans JP',sans-serif;
    background:var(--deep-blue);
    color:var(--white);
    line-height:1.8;
    min-height:100vh;
    overflow-x:hidden;
}

/* ===== STARS ===== */
#stars-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ===== LOADING ===== */
#loading{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--deep-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;transition:opacity .8s,visibility .8s}
#loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
#loading p{font-family:'Orbitron',sans-serif;color:var(--gold);letter-spacing:4px;font-size:14px;animation:pulse 1.5s ease-in-out infinite}
/* パーソナライズ版ローディング (PC: GIF+横一列、SP: GIF上+テキスト下) */
#loading p.loading-personal{
    display:flex;flex-direction:row;align-items:center;
    gap:28px;justify-content:center;
    animation:none;padding:0 24px;max-width:100%;
}
#loading p.loading-personal .lp-gif{
    height:160px;width:auto;flex-shrink:0;display:block;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
#loading p.loading-personal .lp-text{
    display:flex;flex-direction:row;align-items:baseline;
    gap:20px;flex-wrap:wrap;justify-content:center;
}
#loading p.loading-personal .lp-dept{
    font-family:'Noto Sans JP',sans-serif;font-size:24px;font-weight:700;
    letter-spacing:2px;color:var(--accent-cyan);
}
#loading p.loading-personal .lp-name{
    font-family:'Noto Sans JP',sans-serif;font-size:30px;font-weight:900;
    letter-spacing:2px;color:var(--gold-light);
}
#loading p.loading-personal .lp-status{
    font-family:'Noto Sans JP',sans-serif;font-size:22px;font-weight:700;
    letter-spacing:3px;color:var(--gold);
    animation:pulse 1.5s ease-in-out infinite;
}
@media(max-width:768px){
    #loading p.loading-personal{flex-direction:column;gap:14px}
    #loading p.loading-personal .lp-gif{height:180px}
    #loading p.loading-personal .lp-text{gap:10px}
    #loading p.loading-personal .lp-dept{font-size:18px;letter-spacing:1px}
    #loading p.loading-personal .lp-name{font-size:22px;letter-spacing:1px}
    #loading p.loading-personal .lp-status{font-size:16px;letter-spacing:2px}
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== NAV (全デバイス共通: ハンバーガーのみ) ===== */
nav{
    position:fixed;top:0;left:0;width:100%;z-index:1100;
    padding:18px 30px;
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(10,14,39,.85);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-border);
}
.nav-logo{
    font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;
    color:var(--gold);text-decoration:none;letter-spacing:2px;
    transition:text-shadow .3s ease;
}
.nav-logo:hover{text-shadow:0 0 12px rgba(200,168,78,.6)}
@media(max-width:768px){
    .nav-logo{font-size:13px;letter-spacing:1px}
}

/* ナビオーバーレイ（ぼかしなし、薄い暗転のみ） */
.nav-overlay{
    display:none;
    position:fixed;top:0;left:0;width:100%;height:100vh;
    background:rgba(10,14,39,.3);
    z-index:1000;
    opacity:0;transition:opacity .4s ease;
}
.nav-overlay.open{display:block;opacity:1}

/* ナビリンク: 狭めの右側パネル・グラデーション背景 */
.nav-links{
    position:fixed;top:0;right:0;
    width:clamp(320px,32vw,440px);
    height:100vh;
    background:#0a0e27;
    background-image:
        radial-gradient(ellipse at 100% 0%,rgba(200,168,78,.22),transparent 55%),
        radial-gradient(ellipse at 0% 100%,rgba(0,212,255,.18),transparent 60%),
        radial-gradient(circle at 100% 50%,rgba(200,168,78,.08),transparent 40%),
        linear-gradient(135deg,rgba(10,14,39,1),rgba(18,24,63,1));
    border-left:1px solid rgba(200,168,78,.35);
    box-shadow:-15px 0 50px rgba(0,0,0,.6);
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    padding:0 clamp(30px,4vw,50px) 0 0;
    display:none;
    overflow:hidden;
    z-index:1001;
    list-style:none;
    /* 左上コーナーに小さめの斜めカット */
    clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    transform:translateX(100%) translateZ(0);
    transition:transform .5s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    isolation:isolate;
}
.nav-links.open{display:flex;transform:translateX(0) translateZ(0)}
.nav-links::before{
    content:'';position:absolute;top:0;right:0;width:2px;height:40%;
    background:linear-gradient(to bottom,var(--gold),transparent);
}
.nav-links::after{
    content:'';position:absolute;bottom:0;right:0;width:100%;height:3px;
    background:linear-gradient(90deg,transparent,var(--gold),var(--accent-cyan));
}
/* 装飾要素は非表示 */
.nav-deco-top,.nav-deco-bottom,.nav-deco-line,.nav-deco-line2{display:none}
.nav-links li{display:block;text-align:right}
.nav-links a{
    display:block;padding:10px 0;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(15px,1.4vw,18px);font-weight:900;
    color:rgba(240,240,245,.95);
    letter-spacing:3px;text-transform:uppercase;
    text-decoration:none;
    transition:color .3s,text-shadow .3s,letter-spacing .3s;
    pointer-events:auto;
    position:relative;z-index:2;
    cursor:pointer;
}
.nav-links a.active{
    color:var(--gold);
    text-shadow:0 0 12px rgba(200,168,78,.5),0 0 24px rgba(200,168,78,.25);
}
.nav-links a:hover{
    color:var(--gold);
    text-shadow:0 0 15px rgba(200,168,78,.65),0 0 30px rgba(200,168,78,.35);
    letter-spacing:4px;
}

/* ハンバーガーは常に表示 */
.hamburger{
    display:flex;flex-direction:column;gap:6px;cursor:pointer;z-index:1002;
    padding:6px;
}
.hamburger span{
    width:28px;height:2px;background:var(--gold);transition:.3s;
    display:block;
}

/* ===== PAGE CONTENT WRAPPER ===== */
.page-wrapper{
    position:relative;z-index:1;
    min-height:100vh;
    padding-top:80px;
}

/* ===== SECTION HEADER ===== */
.section-label{
    font-family:'Orbitron',sans-serif;font-size:11px;
    letter-spacing:6px;color:var(--gold);text-transform:uppercase;
}
.section-title{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:3px;
    margin:8px 0;
    background:linear-gradient(135deg,var(--white),var(--gold-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.divider{width:50px;height:1px;background:var(--gold);margin-bottom:25px}
.section-header{text-align:center;padding:60px 0 40px}
.section-header .divider{margin:15px auto 0}

/* ===== GLASS CARD ===== */
.glass-card{
    background:var(--glass-bg);backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);border-radius:16px;
    padding:40px 30px;transition:.4s;
}
.glass-card:hover{
    border-color:rgba(200,168,78,.5);
    box-shadow:0 10px 40px rgba(0,0,0,.3),0 0 30px rgba(200,168,78,.1);
    transform:translateY(-5px);
}

/* ===== FIXED SNS LINKS (全ページ共通) ===== */
.hero-social{
    position:fixed;left:30px;bottom:30px;
    display:flex;flex-direction:column;gap:14px;
    z-index:998;
}
.hero-social a{
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--glass-border);border-radius:50%;
    color:var(--white);text-decoration:none;transition:.3s;
    background:rgba(10,14,39,.7);backdrop-filter:blur(8px);
}
.hero-social a:hover{
    border-color:var(--gold);color:var(--gold);
    transform:translateY(-3px);
    box-shadow:0 5px 20px rgba(200,168,78,.3);
}

/* ===== FOOTER ===== */
footer{
    position:relative;z-index:1;
    text-align:center;padding:40px 20px;
    border-top:1px solid var(--glass-border);
    margin-top:80px;
}
.footer-logo{font-family:'Orbitron',sans-serif;font-size:14px;color:var(--gold);letter-spacing:4px;margin-bottom:12px}
.footer-social{display:none}
.footer-social a{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--glass-border);border-radius:50%;
    color:rgba(240,240,245,.5);text-decoration:none;transition:.3s;
}
.footer-social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.copyright{font-size:11px;color:rgba(240,240,245,.3);letter-spacing:2px}

/* ===== SD MASCOT ===== */
.sd-mascot{
    position:fixed;bottom:20px;right:20px;width:80px;z-index:100;
    cursor:pointer;animation:float 3s ease-in-out infinite;
    filter:drop-shadow(0 5px 15px rgba(0,0,0,.5));transition:transform .3s;
}
.sd-mascot:hover{transform:scale(1.15) rotate(5deg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ===== SHOOTING STAR ===== */
.shooting-star{
    position:fixed;width:2px;height:2px;background:var(--gold-light);border-radius:50%;
    box-shadow:0 0 6px var(--gold-light),0 0 20px var(--accent-cyan);
    z-index:0;pointer-events:none;animation:shoot 1s linear forwards;
}
@keyframes shoot{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(300px,300px) scale(0)}}

/* ===== FADE IN ANIMATION ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    nav{padding:12px 20px}
    /* モバイルは全画面表示（斜め解除） */
    .nav-links{
        width:100%;
        clip-path:none;-webkit-clip-path:none;
        padding:0 30px 0 0;
        box-shadow:none;
        border-left:none;
    }
    .nav-links::before{top:18px;right:20px;font-size:12px}
    .nav-links::after{width:100%}
    .nav-links a{font-size:18px;padding:9px 0}
    .page-wrapper{padding-top:60px}
    .sd-mascot{width:55px;bottom:10px;right:10px}
    footer{margin-top:40px;padding:30px 15px}
}

/* ===== POST OFFICE: NAV BADGE ===== */
.nav-badge{
    display:flex;align-items:baseline;gap:10px;
    margin-left:auto;margin-right:12px;padding:0;line-height:1.2;
    font-family:'Noto Sans JP',sans-serif;font-size:14px;
    text-decoration:none;letter-spacing:1px;
    white-space:nowrap;
    transition:.3s;
}
.nav-badge:hover .nav-badge-name,
.nav-badge:hover .nav-badge-dept{
    text-shadow:0 0 10px rgba(200,168,78,.4);
}
.nav-badge-dept{color:var(--accent-cyan);font-weight:500;font-size:13px}
.nav-badge-name{color:var(--gold-light);font-weight:700;font-size:15px}
@media(max-width:768px){
    /* スマホ: ハンバーガーの真下、ヒーローイラストに重ねて表示。枠なし、影で読みやすく */
    .nav-badge{
        position:absolute;top:100%;right:20px;
        margin-right:0;margin-top:6px;
        font-size:12px;gap:6px;
    }
    .nav-badge-dept,.nav-badge-name{
        text-shadow:0 1px 6px rgba(10,14,39,.95),0 0 12px rgba(10,14,39,.8);
    }
    .nav-badge-dept{font-size:11px}
    .nav-badge-name{font-size:13px}
}

/* ===== POST OFFICE: SETUP MODAL ===== */
#setupOverlay{
    position:fixed;inset:0;z-index:9500;
    background:radial-gradient(ellipse at center,rgba(10,14,39,.92),rgba(10,14,39,.98));
    backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;
    padding:24px;opacity:0;transition:opacity .5s ease;
}
#setupOverlay.show{display:flex;opacity:1}
#setupOverlay .setup-card{
    max-width:520px;width:100%;
    padding:44px 38px;border-radius:20px;
    background:linear-gradient(135deg,rgba(18,24,63,.95),rgba(10,14,39,.95));
    border:1px solid rgba(200,168,78,.4);
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(200,168,78,.1);
    text-align:center;position:relative;
    transform:translateY(20px);transition:transform .5s ease;
}
#setupOverlay.show .setup-card{transform:translateY(0)}
.setup-label{
    font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:4px;
    color:var(--accent-cyan);text-transform:uppercase;
}
.setup-card h2{
    font-size:clamp(20px,3vw,26px);font-weight:900;
    color:var(--gold-light);margin:10px 0 6px;letter-spacing:2px;
}
.setup-desc{
    font-size:13px;color:rgba(240,240,245,.6);
    line-height:1.8;margin-bottom:24px;
}
.setup-input{
    width:100%;padding:14px 18px;border-radius:10px;
    background:rgba(10,14,39,.6);
    border:1px solid rgba(200,168,78,.3);
    color:var(--white);font-size:15px;font-family:inherit;
    margin-bottom:20px;transition:.3s;
}
.setup-input:focus{
    outline:none;border-color:var(--gold);
    box-shadow:0 0 16px rgba(200,168,78,.2);
}
.setup-dept-list{
    display:grid;grid-template-columns:1fr;gap:8px;
    margin-bottom:24px;text-align:left;
}
.setup-dept-btn{
    padding:12px 16px;border-radius:10px;cursor:pointer;
    background:rgba(10,14,39,.5);
    border:1px solid var(--glass-border);
    color:rgba(240,240,245,.85);font-size:14px;font-family:inherit;
    transition:.3s;text-align:left;display:flex;align-items:center;gap:10px;
}
.setup-dept-btn:hover{
    border-color:rgba(200,168,78,.5);
    background:rgba(200,168,78,.05);
}
.setup-dept-btn.selected{
    border-color:var(--gold);
    background:linear-gradient(135deg,rgba(200,168,78,.12),rgba(0,212,255,.06));
    box-shadow:0 0 18px rgba(200,168,78,.2);
}
.setup-dept-btn .dept-emoji{font-size:18px}
.setup-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.setup-btn-primary{
    padding:14px 36px;border-radius:30px;cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--deep-blue);border:none;
    font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;
    transition:.3s;
}
.setup-btn-primary:hover{
    box-shadow:0 8px 24px rgba(200,168,78,.4);transform:translateY(-2px);
}
.setup-btn-primary:disabled{
    opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;
}
.setup-btn-skip{
    padding:14px 24px;border-radius:30px;cursor:pointer;
    background:none;border:1px solid rgba(240,240,245,.2);
    color:rgba(240,240,245,.6);
    font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:2px;
    transition:.3s;
}
.setup-btn-skip:hover{
    border-color:rgba(240,240,245,.4);color:var(--white);
}

/* ===== POST OFFICE: WELCOME SCREEN ===== */
#welcomeScreen{
    position:fixed;inset:0;z-index:9800;
    background:radial-gradient(ellipse at center,rgba(10,14,39,.96),rgba(10,14,39,1));
    display:none;align-items:center;justify-content:center;
    padding:24px;opacity:0;transition:opacity .8s ease;
}
#welcomeScreen.show{display:flex;opacity:1}
#welcomeScreen.fade{opacity:0}
#welcomeScreen .welcome-inner,
#loading.is-welcome .welcome-inner{
    text-align:center;max-width:560px;
    transform:scale(.96);transition:transform .8s ease;
}
#welcomeScreen.show .welcome-inner,
#loading.welcome-show .welcome-inner{transform:scale(1)}
.welcome-brand{
    font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:5px;
    color:var(--accent-cyan);margin-bottom:10px;
    animation:wFadeIn .8s ease both;
}
.welcome-title{
    font-size:clamp(20px,3vw,28px);font-weight:900;
    color:var(--gold-light);letter-spacing:4px;margin-bottom:30px;
    animation:wFadeIn .8s .15s ease both;
}
.welcome-divider{
    width:80%;max-width:380px;height:1px;margin:0 auto 28px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    animation:wExpand .9s .3s ease both;transform-origin:center;
}
.welcome-dept{
    font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:4px;
    color:var(--accent-cyan);margin-bottom:12px;
    animation:wFadeIn .8s .45s ease both;
}
.welcome-dept-name{
    font-size:clamp(22px,3.6vw,32px);font-weight:900;
    color:var(--white);margin-bottom:18px;letter-spacing:3px;
    animation:wFadeIn .8s .55s ease both;
}
.welcome-user{
    font-size:clamp(18px,2.6vw,24px);font-weight:700;
    color:var(--gold-light);margin-bottom:36px;letter-spacing:2px;
    animation:wFadeIn .8s .7s ease both;
}
.welcome-divider2{
    width:80%;max-width:380px;height:1px;margin:0 auto 28px;
    background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);
    animation:wExpand .9s .85s ease both;transform-origin:center;
}
.welcome-message{
    font-size:clamp(15px,2vw,18px);
    color:var(--white);letter-spacing:3px;font-weight:500;
    animation:wFadeIn .8s 1s ease both;
}
@keyframes wFadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes wExpand{
    from{opacity:0;transform:scaleX(0)}
    to{opacity:1;transform:scaleX(1)}
}

@media(max-width:768px){
    #setupOverlay .setup-card{padding:32px 24px}
    .setup-actions{flex-direction:column}
    .setup-btn-primary,.setup-btn-skip{width:100%}
}