/* ABC農業資材店 — 汎用サンプル style.css (デザインシート4a v1.0 準拠) */
:root{
  --green:#3B6D11; --green-dark:#2E550D; --brown:#6B4A2B; --amber:#EFA01F;
  --line:#06C755; --line-dark:#05B34C;
  --text:#2C2A24; --muted:#5F5B50; --bg:#FAF7F0; --white:#FFFFFF;
  --maxw:1120px; --radius:14px;
  --shadow:0 4px 16px rgba(60,50,20,.06);
  --shadow-lg:0 12px 30px rgba(60,50,20,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",sans-serif;color:var(--text);background:var(--bg);
  line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.maru{font-family:"Zen Maru Gothic",sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.en{font-family:"Nunito",sans-serif;font-weight:700}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,.07)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;flex-direction:column;line-height:1.2}
.logo b{font-family:"Zen Maru Gothic",sans-serif;font-size:19px;color:var(--green);font-weight:700}
.logo span{font-size:11px;color:var(--muted);letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:26px}
.nav a.link{font-size:14px;font-weight:500;color:var(--text);transition:color .2s}
.nav a.link:hover{color:var(--green)}
.btn-line{display:inline-flex;align-items:center;gap:8px;background:var(--line);color:#fff;
  font-weight:700;padding:11px 20px;border-radius:999px;font-size:14px;transition:.2s;
  box-shadow:0 4px 12px rgba(6,199,85,.28)}
.btn-line:hover{background:var(--line-dark);transform:translateY(-1px)}
.btn-line svg{width:18px;height:18px;fill:#fff}
.hamburger{display:none;background:none;border:0;cursor:pointer;font-size:26px;color:var(--green)}

/* ===== Hero ===== */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;
  background:linear-gradient(rgba(30,40,10,.42),rgba(30,40,10,.46)),url(../images/top-hero-01.webp) center/cover no-repeat}
.hero .wrap{padding-top:54px;padding-bottom:54px}
.hero h1{color:#fff;font-size:clamp(28px,5vw,46px);font-weight:700;line-height:1.32;
  text-shadow:0 2px 16px rgba(0,0,0,.3);max-width:18em}
.hero .sub{color:#fff;font-size:clamp(15px,2vw,19px);margin-top:18px;max-width:30em;
  text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-line.lg{padding:16px 30px;font-size:16px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.85);color:#fff;font-weight:700;padding:15px 26px;
  border-radius:8px;font-size:15px;backdrop-filter:blur(2px);transition:.2s}
.btn-ghost:hover{background:rgba(255,255,255,.28)}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--amber);color:#412402;
  font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:18px}

/* ===== Section base ===== */
section{padding:clamp(56px,9vw,96px) 0}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .ey{display:inline-block;font-family:"Nunito",sans-serif;font-weight:700;
  color:var(--amber);letter-spacing:.16em;font-size:13px;margin-bottom:10px;text-transform:uppercase}
.sec-head h2{font-size:clamp(22px,3.4vw,30px);font-weight:700;color:var(--text)}
.sec-head h2 .accent{color:var(--green)}
.sec-head p{color:var(--muted);margin-top:12px;font-size:15px}

/* ===== Category grid ===== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cat-card .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.cat-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat-card:hover .ph img{transform:scale(1.06)}
.cat-card .body{padding:16px 18px 20px}
.cat-card h3{font-size:18px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:8px}
.cat-card h3 i{font-size:20px;color:var(--amber)}
.cat-card p{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.7}

/* ===== Reasons ===== */
.reasons{background:var(--white)}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.reason{text-align:center;padding:10px}
.reason .ic{width:74px;height:74px;border-radius:50%;background:#EAF3DE;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px}
.reason h3{font-size:19px;font-weight:700;margin-bottom:10px}
.reason p{font-size:14.5px;color:var(--muted)}
.reason .no{font-family:"Nunito",sans-serif;font-weight:700;color:var(--amber);font-size:14px;letter-spacing:.1em}

/* ===== Gallery ===== */
.gallery{background:var(--bg)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gal-grid figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gal-grid figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal-grid figure:hover img{transform:scale(1.07)}
.gal-grid .big{grid-column:span 2;grid-row:span 2}

/* ===== Sunflower / community ===== */
.community{position:relative;color:#fff;text-align:center;
  background:linear-gradient(rgba(60,45,5,.5),rgba(60,45,5,.55)),url(../images/sunflower-01.webp) center/cover fixed no-repeat}
.community h2{color:#fff;font-size:clamp(22px,3.4vw,30px);font-weight:700}
.community p{max-width:34em;margin:16px auto 0;font-size:15.5px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.community .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.community .tags span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);
  padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:500}

/* ===== Access ===== */
.access .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.access .info dl{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;margin-top:8px}
.access .info dt{font-weight:700;color:var(--green);font-size:14px;white-space:nowrap}
.access .info dd{font-size:15px}
.access .info .req{color:var(--amber);font-size:12.5px;font-weight:700}
.access .hours{background:#EAF3DE;border-radius:var(--radius);padding:18px 20px;margin-top:8px}
.access .hours b{color:var(--green)}
.access .map img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:100%;object-fit:cover;min-height:320px}

/* ===== CTA ===== */
.cta{background:var(--green);color:#fff;text-align:center}
.cta h2{color:#fff;font-size:clamp(22px,3.4vw,30px);font-weight:700}
.cta p{max-width:32em;margin:14px auto 28px;font-size:15.5px;color:#EAF3DE}
.cta .btn-line.lg{box-shadow:0 6px 18px rgba(0,0,0,.25)}
.cta .sub-link{display:inline-flex;align-items:center;gap:6px;color:#fff;margin-top:18px;
  font-size:14px;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}

/* ===== Footer ===== */
.footer{background:#23210E;color:#cfcbbd;padding:40px 0 28px;font-size:13.5px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.footer b{font-family:"Zen Maru Gothic",sans-serif;color:#fff;font-size:17px;display:block;margin-bottom:8px}
.footer .copy{width:100%;border-top:1px solid rgba(255,255,255,.12);margin-top:22px;
  padding-top:18px;text-align:center;color:#8f8b7d;font-size:12.5px}

/* ===== Floating mobile CTA ===== */
.float-cta{display:none}

/* ===== Responsive ===== */
@media(max-width:980px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .access .wrap{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav .link{display:none}
  .nav .btn-line{display:none}
  .hamburger{display:block}
  .reason-grid{grid-template-columns:1fr;gap:20px}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gal-grid .big{grid-column:span 2;grid-row:span 1}
  .community{background-attachment:scroll}
  .drawer{position:fixed;inset:0 0 0 auto;width:78%;max-width:300px;background:#fff;z-index:100;
    transform:translateX(100%);transition:transform .3s;box-shadow:-8px 0 30px rgba(0,0,0,.15);
    padding:80px 26px 30px;display:flex;flex-direction:column;gap:6px}
  .drawer.open{transform:translateX(0)}
  .drawer a{padding:14px 4px;border-bottom:1px solid rgba(0,0,0,.07);font-weight:500}
  .drawer .btn-line{justify-content:center;margin-top:16px;border-bottom:0}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;opacity:0;visibility:hidden;transition:.3s}
  .overlay.open{opacity:1;visibility:visible}
  .float-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--line);color:#fff;align-items:center;justify-content:center;gap:8px;
    padding:14px;font-weight:700;font-size:16px;box-shadow:0 -4px 16px rgba(0,0,0,.15)}
  .float-cta svg{width:20px;height:20px;fill:#fff}
  body{padding-bottom:54px}
}
@media(min-width:769px){.drawer,.overlay{display:none}}
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero{min-height:72vh}
  body{font-size:15px}
}