/* ==========================================================
   LAYOUT
   北村千佳 Official Website
========================================================== */

/* ==========================================================
   Header
========================================================== */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:26px 0;
}

nav ul{
    display:flex;
    align-items:center;
    gap:32px;
    margin:0;
    padding:0;
    list-style:none;
}

nav li{
    margin:0;
}

nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    text-decoration:none;
}

/* ==========================================================
   Common Section
========================================================== */

.section{
    padding:90px 0;
}

.section-sm{
    padding:70px 0;
}

.section-lg{
    padding:120px 0;
}

/* ==========================================================
   Card Grid
========================================================== */

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

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}

/* ==========================================================
   Flex Utility
========================================================== */

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

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

.flex-column{
    display:flex;
    flex-direction:column;
}

/* ==========================================================
   Common Layout
========================================================== */

.center{
    text-align:center;
}

.mt-auto{
    margin-top:auto;
}

.w-full{
    width:100%;
}

.mx-auto{
    margin-inline:auto;
}


/* ==========================================================
   Footer
========================================================== */

footer{
    padding:36px 0;
}