:root{

--bg:#FAFAF5;
--bg-soft:#F4F8EC;

--green:#4E7A59;
--green-light:#DCEAC8;

--text:#374151;
--text-light:#6B7280;

--line:#EAEAE2;
}

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

body{

font-family:'Noto Sans JP',sans-serif;

background:
linear-gradient(
180deg,
var(--bg) 0%,
var(--bg-soft) 100%
);

color:var(--text);

line-height:1.9;

min-height:100vh;

position:relative;
}


img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
}

.card:focus-visible{
    outline:2px solid #4E7A59;
    outline-offset:4px;
}
/* background */

.bg-circle{

position:fixed;

border-radius:50%;

pointer-events:none;

z-index:-1;

filter:blur(90px);
}

.bg-circle-1{

width:300px;
height:300px;

background:#C9DCA2;

left:-100px;
bottom:-80px;

opacity:.15;
}

.bg-circle-2{

width:250px;
height:250px;

background:#A8C98C;

right:-80px;
top:120px;

opacity:.12;
}

.bg-circle-3{

width:220px;
height:220px;

background:#F3D8D8;

left:50%;
top:-80px;

transform:translateX(-50%);

opacity:.10;
}

/* layout */

.container{

max-width:960px;

margin:0 auto;

padding:0 24px;
}

/* header */

.header{

padding:50px 0;
}

.logo{

width:min(240px,65vw);

height:auto;

display:block;
}

/* hero */

.hero{

text-align:center;

padding:80px 0;
}

.title{

font-size:clamp(34px,6vw,62px);

font-weight:700;

line-height:1.8;

color:var(--green);

margin-bottom:30px;
}

.lead{

font-size:22px;

margin-bottom:30px;
}

.notice{

font-size:15px;

color:var(--text-light);

max-width:700px;

margin:auto;
}

/* section */

.contact,
.works{

padding:70px 0;
}

h2{

font-size:28px;

color:var(--green);

text-align:center;

margin-bottom:20px;
}

.section-text{

max-width:700px;

margin:0 auto 40px;

text-align:center;

color:var(--text-light);
}

/* cards */

.card-grid{

display:grid;

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

gap:24px;
}

.card{

background:white;

border-radius:32px;

padding:36px;

text-decoration:none;

color:inherit;

text-align:center;

box-shadow:
0 8px 24px rgba(0,0,0,.05);

transition:.3s ease;
}

.card:hover{

transform:translateY(-5px);

box-shadow:
0 16px 40px rgba(0,0,0,.08);
}

.line-card{

background:
linear-gradient(
135deg,
#DCEAC8,
#F1F7E8
);
}

.card-title{

font-size:20px;

font-weight:700;

color:var(--green);

margin-bottom:8px;
}

.card-desc{

font-size:14px;

color:var(--text-light);
}

/* footer */

footer{

padding:80px 0 40px;

margin-top:40px;

border-top:1px solid var(--line);

text-align:center;
}

.footer-text{

color:var(--green);

font-weight:500;
}

.copyright{

font-size:13px;

margin-top:10px;

color:#9CA3AF;
}

/* responsive */

@media(max-width:768px){

.hero{

padding:50px 0;
}

.title{

font-size:34px;

line-height:1.7;
}

.lead{

font-size:18px;
}

h2{

font-size:22px;
}

.card{

padding:28px;
}

}