/* ------------------------
   Reset
------------------------ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    color:#edf5ff;

    font-family:"Zen Old Mincho",serif;

    line-height:1.8;

    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(120,190,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 20%,
        rgba(90,170,255,.12),
        transparent 30%
    ),

    radial-gradient(
        circle at 50% 100%,
        rgba(60,120,190,.25),
        transparent 55%
    ),

    linear-gradient(
        180deg,
        #04111d 0%,
        #0a2238 25%,
        #113a5d 60%,
        #1a537d 100%
    );

    background-attachment:fixed;

}

/* ------------------------
   星空背景
------------------------ */

.stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-3;

}



/* ------------------------
   Header
------------------------ */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 60px;

    backdrop-filter:blur(12px);

    background:rgba(8,20,35,.35);

    z-index:1000;

}


.logo{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    letter-spacing:.12em;

}


nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}

nav a{

    color:#edf5ff;

    text-decoration:none;

    transition:.35s;

}

nav a:hover{

    color:#9bc8ff;

}


/* ------------------------
   Hero
------------------------ */

.hero{

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(70px,10vw,150px);

    font-weight:300;

    letter-spacing:.08em;

}


.sub{

    margin-top:30px;

    font-size:1rem;

    letter-spacing:.18em;

    line-height:2;

    color:#b9cfe3;

}


.scroll{

    margin-top:120px;

    font-size:.9rem;

    letter-spacing:.3em;

    opacity:.6;

}


/* ------------------------
   Section
------------------------ */

section{

    padding:140px 10%;

}


/* ------------------------
   見出し
------------------------ */

h2{

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    text-align:center;

    margin-bottom:80px;

    font-weight:300;

}


/* ------------------------
   Book Card
------------------------ */

.book{

    max-width:700px;

    margin:40px auto;

    padding:45px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(18px);

    transition:.4s;

}


.book:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 45px rgba(120,180,255,.15);

}


.book h3{

    font-size:2rem;

    margin-bottom:15px;

}


.book p{

    color:#b9cfe3;

    margin-bottom:30px;

}


.book a{

    color:#9bc8ff;

    text-decoration:none;

}

.book a:hover{

    letter-spacing:.08em;

}


/* ------------------------
   About
------------------------ */

.about{

    text-align:center;

    line-height:2.4;

}


/* ------------------------
   Contact
------------------------ */

.contact{

    text-align:center;

}

.contact a{

    color:#9bc8ff;

    text-decoration:none;

}


/* ------------------------
   Footer
------------------------ */

footer{

    padding:70px;

    text-align:center;

    font-size:.9rem;

    color:#9fb5ca;

}
/* =========================
   Moon
========================= */

.moon{

    position:fixed;

    top:90px;
    right:8%;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.45) 0%,
        rgba(210,235,255,.25) 35%,
        rgba(120,180,255,.12) 70%,
        transparent 100%
    );

    filter:blur(18px);

    box-shadow:
        0 0 80px rgba(140,200,255,.18),
        0 0 160px rgba(120,180,255,.08);

    animation:moonFloat 10s ease-in-out infinite;

    pointer-events:none;

    z-index:-1;

}@keyframes moonFloat{

    0%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.85;

    }

    50%{

        transform:
        translateY(-10px)
        scale(1.03);

        opacity:1;

    }

    100%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.85;

    }

}
@keyframes moonFloat{

    0%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.85;

    }

    50%{

        transform:
        translateY(-8px)
        scale(1.02);

        opacity:1;

    }

    100%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.85;

    }

}
/* =========================
   Stars
========================= */

.stars{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;

}