@charset "UTF-8";
:root{--ink:#422825;--muted:#837b68;--accent:#e0922b;--pale:#f5decc;--line:#e8e3e2;--bg:#fcf4cb;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);
    background:var(--bg);
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    line-height:1.85
    } 
    
.container{
    width:min(100% - 40px,960px);
    margin:auto
}

a{
    color:inherit
}

.site-header{
    background:var(--white);
    border-bottom:1px solid var(--line)
}

.site-header .container{
    min-height:74px;
    display:flex;
    align-items:center
}

.brand{
    text-decoration:none;
    font-weight:800;
    letter-spacing:.13em;
    font-size:19px
}

.brand span{
    font-size:12px;
    font-weight:500;
    letter-spacing:.03em;
    margin-left:12px;
    color:var(--muted)
}

.hero{
    ackground:linear-gradient(120deg,#f5f2e7,#f9f8f4);
    padding:80px 0 76px;
    text-align:center
}

.eyebrow{
    font-size:12px;
    letter-spacing:.2em;
    color:var(--accent);
    font-weight:800;
    margin:0 0 10px
}

.hero h1{
    font-size:clamp(30px,5vw,43px);
    line-height:1.4;
    margin:0 0 14px;
    letter-spacing:.08em
}

.hero p:last-child{
    color:var(--muted);
    margin:0
}

.recruit-section{
    padding:72px 0 88px
}

.section-heading{
    text-align:center;
    margin-bottom:32px
}

.section-heading h2{
    font-size:27px;
    margin:0 0 12px
}

.notice{
    color:#8a6260;
    font-size:13px;
    margin:0
}

.job-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 12px 36px rgba(24,70,60,.055);
    overflow:hidden
}

.job-card-heading{
    padding:29px 36px;
    background:#f8f5f2;
    border-bottom:1px solid var(--line)
}

.badge{
    display:inline-block;
    background:var(--accent);
    color:white;
    border-radius:50px;
    font-size:12px;
    padding:2px 13px;
    font-weight:700
}

.job-card-heading h3{
    font-size:25px;
    margin:9px 0 3px
}

.job-card-heading p{
    margin:0;
    color:var(--muted);
    font-size:14px
}

.job-details{
    margin:0;
    padding:8px 36px 20px
}

.job-details>div{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:18px;border-bottom:1px solid var(--line);
    padding:21px 4px}
    
.job-details>div:last-child{
    border-bottom:0
}

.job-details dt{
    font-weight:700;
    color:#3c4355
}

.job-details dd{
    margin:0;
    overflow-wrap:anywhere
}

.footnote{
    color:var(--muted);
    font-size:12px;
    margin:19px 3px 0
}

.site-footer{
    background:#e0922b;
    color:#e3ddd8;
    text-align:center;
    padding:26px 0;
    font-size:12px
}

@media(max-width:640px){
    .container{
        width:min(100% - 28px,960px)
    }
    
    .site-header .container{
        min-height:62px
    }
    
    .hero{
        padding:62px 0
    }
    
    .recruit-section{
        padding:52px 0 65px
    }
    
    .job-card-heading{
        padding:23px 22px
    }
    
    .job-details{
        padding:4px 20px 14px
    }
    
    .job-details>div{
        display:block;
        padding:17px 0
    }
    
    .job-details dt{
        margin-bottom:5px
    }
    
    .job-details dd{
        font-size:14px
    }
    
    .job-card-heading h3{
        font-size:22px
    }
    
    .section-heading h2{
        font-size:24px
    }
}