@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700&display=swap');

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

body{
    font-family:'Noto Serif JP', serif;
    background:#f5f1eb;
    color:#2b2b2b;
    line-height:1.8;
}

.hero{
    height:100vh;
    background:
        linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url('https://images.unsplash.com/photo-1522383225653-ed111181a951?q=80&w=1920&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.overlay h1{
    color:white;
    font-size:5rem;
    letter-spacing:10px;
}

.jp{
    color:#f0dada;
    font-size:1.2rem;
    margin-top:10px;
}

section{
    padding:80px 10%;
}

h2{
    font-size:2rem;
    margin-bottom:30px;
    border-left:5px solid #b48a78;
    padding-left:15px;
}

.about p{
    font-size:1.1rem;
}

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

.card{
    background:white;
    padding:30px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.buttons a{
    text-decoration:none;
    color:white;
    background:#b48a78;
    padding:12px 24px;
    border-radius:30px;
    transition:0.3s;
}

.buttons a:hover{
    background:#8f6a5b;
}

footer{
    text-align:center;
    padding:30px;
    background:#e7ddd4;
}

@media(max-width:768px){

    .overlay h1{
        font-size:3rem;
    }

    section{
        padding:60px 8%;
    }

}