/* ======================================================
RESET
====================================================== */

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

html,
body{
    width:100%;
    height:100%;
}

body{

    overflow:hidden;

    background:#f6f1ea;

    color:#6b5f53;

    position:relative;

    font-family:
    "Avenir Next",
    "Avenir",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

}

/* ======================================================
BACKGROUND GLOW
====================================================== */

.background-glow{
    position:fixed;
    inset:0;

    z-index:0;

    pointer-events:none;

    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(255,255,255,0.8),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 70%,
        rgba(190,170,145,0.25),
        transparent 40%
    ),

    radial-gradient(
        circle at 50% 50%,
        rgba(255,255,255,0.35),
        transparent 50%
    );
}

/* ======================================================
NOISE
====================================================== */

.noise{
    position:fixed;
    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:0.03;

    background-image:
    url("https://grainy-gradients.vercel.app/noise.svg");
}

/* ======================================================
HEADER
====================================================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    padding:32px 48px;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-size:16px;
    letter-spacing:0.22em;
    font-weight:500;
}

.global-nav{
    display:flex;
    gap:42px;
}

.global-nav a{
    text-decoration:none;
    color:#6b5f53;
    font-size:12px;
    letter-spacing:0.18em;
    opacity:0.72;
    transition:0.4s ease;
}

.global-nav a:hover{
    opacity:1;
}


/* ======================================================
ROTATOR
====================================================== */

.header-rotator{
    position:relative;
    width:460px;
    height:18px;

    overflow:hidden;
}

.rotator-track{
    position:relative;
    width:100%;
    height:100%;
}

.rotator-track span{
    position:absolute;
    top:0;
    right:0;

    font-size:11px;
    letter-spacing:0.2em;

    color:#8a7d70;

    text-decoration:none;

    white-space:nowrap;

    opacity:0;

    transform:translateY(10px);

    transition:
    opacity 1.4s ease,
    transform 1.4s ease;
}

.rotator-track span.active{
    opacity:0.7;
    transform:translateY(0px);
}




/* ======================================================
HERO
====================================================== */

.hero{
    position:relative;
    z-index:20;

    width:100%;
    height:100vh;

    display:flex;

    align-items:flex-end;

    padding-left:7vw;

    padding-bottom:8vh;
}

.hero-copy{
    max-width:520px;
}

.sub-title{
    font-size:12px;
    letter-spacing:0.28em;
    margin-bottom:26px;
    opacity:0.7;
}

.hero h1{
    font-size:clamp(50px, 8vw, 90px);
    line-height:1.2;
    font-weight:300;
    letter-spacing:-0.06em;
    color:#5d5145;
    margin-bottom:32px;
}

.lead{
    font-size:15px;
    line-height:2;
    opacity:0.75;
    max-width:420px;
}

/* ======================================================
CANVAS
====================================================== */

#canvas-container{
    position:fixed;
    inset:0;
    z-index:10;
}

/* ======================================================
RESPONSIVE
====================================================== */

@media screen and (max-width:768px){

    .site-header{
        padding:24px;
    }

    /* 追加 */
    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    /* 追加 */
    .header-rotator{
        width:100%;
    }

    /* 追加 */
    .rotator-track span{
        left:0;
        right:auto;
        text-align:left;
        font-size:11px;
        letter-spacing:0.12em;
    }

    /* 追加（任意） */
    .logo{
        font-size:15px;
        letter-spacing:0.20em;
    }

    .global-nav{
        display:none;
    }

    .hero{
        padding:0 24px 50px;
    }

    .hero h1{
        font-size:52px;
    }

    .lead{
        font-size:14px;
    }

}