:root{
    --seiji:#c8e3d8;
    --pale-green:#d7efe5;
    --wakakusa:#c1dacf;
    --pink:#f7f3ff;
    --yellow:#e3d7af;
    --gray:#d6ece7;
    --milky:#545454;
    --black:#2d2d2d;
}

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

html,body{
    
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background:rgb(255, 244, 244);
    color:var(--black);
    overflow-x:hidden;
}

/* =========================
SECTION
========================= */

section{
    position:relative;
    padding:6vw;
    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* =========================
WAVE
========================= */

.wave{
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    line-height:0;
}

.wave svg{
    display:block;
    width:100%;
    height:90px;
}

.wave path{
    fill:rgba(255, 244, 244, 0.604);
}

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

.hero{
    min-height:72vh;
    background:var(--seiji);
}

.big-title{
    font-size:9vw;
    line-height:0.82;
    letter-spacing:-0.06em;
}

/* =========================
LABEL
========================= */

.section-label{
    font-size:5vw;
    margin-bottom:50px;
    color:var(--milky);
    text-transform:uppercase;
}

/* =========================
PROFILE
========================= */

.profile{
    background:#d9e3db;
}

.profile-layout{
    display:flex;
    align-items:center;
    gap:90px;
}

.profile-image{
    width:26vw;
    height:26vw;

    border-radius:50%;
    background:white;

    border:1px solid var(--black);

    overflow:hidden;

    flex-shrink:0;
}

.profile-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-text{
    display:flex;
    flex-direction:column;
    gap:36px;
}

.profile-line span{
    font-size:1vw;
    opacity:0.45;
}

.profile-line p{
    font-size:3vw;
    margin-top:8px;
}

/* =========================
HOBBIES
========================= */

.hobbies{
    background:var(--wakakusa);
}

.bubble-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
}

.hobby-bubble{

    width:240px;
    height:240px;

    border-radius:50%;
    background:var(--yellow);

    border:1px solid var(--black);

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    cursor:pointer;

    transition:0.5s cubic-bezier(.19,1,.22,1);

    overflow:hidden;
}

.hobby-bubble.large{
    width:270px;
    height:270px;
}

.bubble-main{
    font-size:4vw;
    line-height:0.9;
    text-align:center;

    transition:0.4s;
}

.large .bubble-main{
    font-size:4.2vw;
}

.bubble-detail{

    position:absolute;

    width:70%;

    opacity:0;

    pointer-events:none;

    font-size:1vw;
    font-weight:500;
    line-height:1.8;

    text-align:center;

    transition:0.5s;
}

.bubble-detail h3{
    margin-bottom:12px;
    font-size:1.2vw;
}

.hobby-bubble.active{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) ;

    z-index:999;

    width:320px;
    height:320px;
}

.hobby-bubble.active .bubble-main{
    transform:translateY(-85px);
}

.hobby-bubble.active .bubble-detail{
    opacity:1;
}

/* =========================
TRAVEL
========================= */

.travel{
    background:var(--pale-green);
}

.travel-layout{
    display:flex;
    align-items:flex-end;
    gap:60px;
}

.travel-grid{

    width:75vw;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.travel-photo{

    aspect-ratio:1/1;

    background:white;

    border:0.7px solid var(--black);

    overflow:hidden;
}

.travel-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
3DCG
========================= */

.cg{
    background:var(--gray);
}

.cg-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
   
}

.cg-item{
    aspect-ratio:16/10;
    background:white;
    border:0.7px solid var(--black);
    overflow:hidden;
    position:relative;
}

.cg-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.2);
}

.cg-label{
    position:absolute;
    bottom:18px;
    left:18px;
    font-size:1vw;
    background:rgba(255,255,255,0.8);

    /* padding:8px 14px; */
}

/* =========================
DOG
========================= */

.dog{
    background:var(--pink);
}

.dog-box{

    width:32vw;
    height:32vw;
    margin-top:30px;
    background:white;
    border:1px solid var(--black);
    overflow:hidden;
}



.dog-box img{
    width:100%;
    height:100%;
    object-fit:cover;
}

  


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

@media(max-width:900px){

    .big-title{
        font-size:18vw;
    }

    .section-label{
        font-size:6vw;
    }

    .profile-layout{
        flex-direction:column;
    }

    .profile-image{
        width:70vw;
        height:70vw;
    }

    .profile-line span{
        font-size:3vw;
    }

    .profile-line p{
        font-size:7vw;
    }

    .bubble-wrap{
        justify-content:center;
    }

    .hobby-bubble,
    .hobby-bubble.large{
        width:220px;
        height:220px;
    }

    .bubble-main{
        font-size:8vw;
    }

    .large .bubble-main{
        font-size:10vw;
    }

    .bubble-detail{
        font-size:3vw;
    }

    .bubble-detail h3{
        font-size:4vw;
    }

    .travel-layout{
        flex-direction:column;
        align-items:flex-start;
    }

    .travel-grid{
        width:100%;
    }

    .cg-grid{
        grid-template-columns:1fr;
    }

    .cg-label{
        font-size:3vw;
    }

    .dog-box{
        width:70vw;
        height:70vw;
    }

}