@charset "UTF-8";
/* CSS Document */
body{
    margin:0;
    background:#efebe6;
    color:#4b3527;
    font-family:"Times New Roman","Noto Serif JP",serif;
    line-height:1.8;
    -webkit-text-size-adjust:100%;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:50px 20px;
}

.hero{
    text-align:center;
    margin-bottom:45px;
}

.hero h1{
    font-size:2rem;
    font-weight:normal;
    letter-spacing:.08em;
    margin-bottom:15px;
}

.lead{
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:1rem;
}

.card-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.card{

    display:flex;

    flex-direction:column;

    text-decoration:none;

    color:#432f22;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.25s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.card img{

    width:100%;

    height:210px;

    object-fit:cover;

    display:block;

}

.card-body{

    padding:22px;

}

.card h2{

    margin:0 0 12px;

    font-size:1.5rem;

    font-weight:normal;

}

.card p{

    margin:0;

    color:#777;

    font-size:.95rem;

    line-height:1.7;

}

.global-footer{

    margin-top:60px;

    background:#8b5d43;

    color:#fff;

    text-align:center;

    padding:24px;

}

.global-footer a{

    color:#fff;

    text-decoration:none;

    margin:0 10px;

}

.global-footer a:hover{

    text-decoration:underline;

}

@media (max-width:720px){

.container{

    padding:30px 15px;

}

.hero h1{

    font-size:2.1rem;

}

.card-grid{

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

    gap:18px;

}

.card img{

    height:150px;

}

.card-body{

    padding:16px;

}

.card h2{

    font-size:1.15rem;

}

.card p{

    font-size:.85rem;

}

}

@media (max-width:480px){

.card-grid{

    grid-template-columns:1fr;

}

}