img{max-width:100%;height:auto}
/* ==========================================================================
   CROP CORE BLEND — 共通スタイルシート
   ========================================================================== */

:root{
  --bg: #f7f5f0;
  --surface: #efece3;
  --surface-2: #e6e2d6;
  --line: #ddd7c8;
  --charcoal: #2c2a25;
  --charcoal-soft: #4a473e;
  --crop-green: #4f6d4a;
  --crop-green-dark: #3a5236;
  --sage: #8a9a7e;
  --sage-ink: #596d4f;   /* sage dark enough for BOTH light surfaces: 5.6:1 on --white, 4.8:1 on --surface */
  --sage-onlight: #8a9a7e;
  --sage-ondark: #b8c7ad;  /* sage light enough for the dark green (4.8:1) */
  --earth: #a9855f;
  --accent-light: #b7c9a8;
  --accent-pale: #eef2e6;
  --white: #fffdf9;
  --shadow: 0 10px 30px rgba(44, 42, 37, 0.08);
  --shadow-soft: 0 4px 14px rgba(44, 42, 37, 0.06);
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1180px;
  --font-head: "Shippori Mincho", "Cormorant Garamond", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
}*, *::before, *::after{ box-sizing: border-box; }html{ scroll-behavior: smooth; }body{
  margin:0;
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}img{ max-width:100%; display:block; }a{ color: inherit; text-decoration:none; }ul{ margin:0; padding:0; list-style:none; }h1, h2, h3, h4{
  font-family: var(--font-head);
  color: var(--charcoal);
  line-height: 1.45;
  font-weight: 600;
  margin: 0 0 .6em;
}h1{ font-size: clamp(1.9rem, 4vw, 3rem); }h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }h3, h2{ font-size: 1.25rem; }p{ margin: 0 0 1.1em; color: var(--charcoal-soft); }.agri-container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}section{ padding: 88px 0; }
@media (max-width: 720px){section{ padding: 56px 0; }
}/* subtle field-grid background pattern */
.field-pattern{
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(79,109,74,0.05) 1px, transparent 1px),
    linear-gradient(rgba(79,109,74,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}.field-pattern-dark{
  background-color: var(--crop-green-dark);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}.agri-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--crop-green);
  font-weight: 600;
  margin-bottom: 14px;
}.agri-eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--earth);
  display:inline-block;
}/* ---------- Buttons ---------- */
.agri-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  cursor:pointer;
  transition: all .2s ease;
  font-family: var(--font-body);
}.agri-btn-primary{
  background: var(--crop-green);
  color: var(--white);
}.agri-btn-primary:hover{ background: var(--crop-green-dark); }.agri-btn-outline{
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}.agri-btn-outline:hover{ background: var(--charcoal); color: var(--white); }.btn-light{
  background: var(--white);
  color: var(--crop-green-dark);
  border-color: var(--white);
}.btn-light:hover{ background: var(--accent-pale); }.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 30px; }.btn-block{ width:100%; padding:12px 16px; min-height:44px; }/* ---------- Header ---------- */
.agri-site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(247,245,240,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}.nav-wrap{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 14px 24px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}.brand{ display:flex; align-items:center; gap:12px; }.brand img{ width:44px; height:34px; }.brand-text{
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--charcoal);
  white-space: nowrap;
}.brand-text small{
  display:block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--sage);
  margin-top: 2px;
}.main-nav{ display:flex; align-items:center; gap: 4px; }.main-nav a{
  display:inline-block;
  padding: 10px 14px;
  font-size: .92rem;
  color: var(--charcoal-soft);
  border-radius: 999px;
  transition: all .2s ease;
  white-space: nowrap;
}.main-nav a:hover, .main-nav a.active{
  background: var(--surface-2);
  color: var(--crop-green-dark);
}.nav-cta{
  background: var(--crop-green) !important;
  color: var(--white) !important;
  margin-left: 6px;
}.nav-cta:hover{ background: var(--crop-green-dark) !important; }.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor:pointer;
}.nav-toggle span{
  display:block; height:2px; width:20px;
  background: var(--charcoal); margin: 0 auto;
}

@media (max-width: 1080px){.main-nav{
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px 30px;
    gap: 2px;
    overflow-y:auto;
    transform: translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition: all .25s ease;
    border-top: 1px solid var(--line);
  }.main-nav.open{ transform:translateY(0); opacity:1; visibility:visible; }.main-nav a{ padding:14px 10px; border-radius: 8px; text-align:left; }.nav-cta{ margin-left:0; margin-top:8px; text-align:center; }.nav-toggle{ display:flex; }
}/* ---------- Hero ---------- */
.agri-hero{
  position:relative;
  padding: 90px 0 100px;
  overflow:hidden;
}.agri-hero .agri-container{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items:center;
  position:relative;
  z-index:2;
}.hero-copy p.agri-lead{ font-size: 1.08rem; }.hero-media{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}.hero-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(44,42,37,0) 40%, rgba(44,42,37,0.35));
}.hero-badge{
  position:absolute; left:18px; bottom:18px; z-index:2;
  background: rgba(255,253,249,0.92);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: .8rem;
  color: var(--crop-green-dark);
  font-weight:600;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 900px){.agri-hero .agri-container{ grid-template-columns: 1fr; }.agri-hero{ padding: 50px 0 60px; }
}/* page header (inner pages) */
.agri-page-hero{
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}.agri-page-hero .agri-container{ max-width: 880px; }.agri-breadcrumb{
  font-size: .82rem;
  color: var(--sage);
  margin-bottom: 18px;
}.agri-breadcrumb a{ color: var(--crop-green-dark); }.agri-breadcrumb span{ margin: 0 6px; }/* ---------- Cards & Grids ---------- */
.agri-grid{ display:grid; gap: 28px; }.agri-grid-2{ grid-template-columns: repeat(2, 1fr); }.agri-grid-3{ grid-template-columns: repeat(3, 1fr); }.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){.agri-grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){.agri-grid-2, .agri-grid-3, .grid-4{ grid-template-columns: 1fr; }
}.agri-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}.agri-card h3, .agri-card h2{ margin-bottom: 10px; }.agri-card .agri-tag{
  display:inline-block;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--crop-green-dark);
  background: var(--accent-pale);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}.card-media{
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom: 20px;
  aspect-ratio: 16/10;
}.card-media img{ width:100%; height:100%; object-fit:cover; }.agri-section-head{
  max-width: 640px;
  margin: 0 0 48px;
}.agri-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
}
@media (max-width: 900px){.two-col{ grid-template-columns: 1fr; gap: 30px; }
}.two-col img{ border-radius: var(--radius); box-shadow: var(--shadow); }/* ---------- System diagram (original field-inspired) ---------- */
.system-diagram{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position:relative;
  margin-top: 20px;
}.diagram-node{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align:center;
  font-size: .92rem;
  font-weight:600;
  color: var(--charcoal-soft);
  position:relative;
}.diagram-node .dot{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--sage);
  margin: 0 auto 10px;
}.diagram-core{
  grid-column: 1 / -1;
  background: var(--crop-green-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align:center;
  margin-top: 8px;
  position:relative;
}.diagram-core h3, .diagram-core h2{ color: var(--white); margin-bottom: 6px; }.diagram-core p{ color: rgba(255,255,255,0.8); margin:0; max-width: 520px; margin: 0 auto; }.diagram-lines{
  height: 40px;
  position:relative;
}.diagram-lines svg{ width:100%; height:100%; display:block; }
@media (max-width: 760px){.system-diagram{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){.system-diagram{ grid-template-columns: 1fr; }
}/* ---------- Process steps ---------- */
.process-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px){.process-list{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){.process-list{ grid-template-columns: 1fr; } }.agri-process-step{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid var(--line);
}.process-num{
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--crop-green);
  display:block;
  margin-bottom: 8px;
}/* ---------- Sections with tinted background ---------- */
.section-tint{ background: var(--surface); }.agri-section-dark{
  background: var(--crop-green-dark);
  color: var(--white);
}.agri-section-dark h2, .agri-section-dark h3{ color: var(--white); }.agri-section-dark p{ color: rgba(255,255,255,0.82); }/* ---------- Lists with icons ---------- */
.check-list li{
  position:relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: var(--charcoal-soft);
}.check-list li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:10px; height:10px;
  background: var(--accent-light);
  border: 2px solid var(--crop-green);
  border-radius: 3px;
}/* ---------- Forms ---------- */
.form-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
@media (max-width: 600px){.form-card{ padding: 24px; } }.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px){.form-grid{ grid-template-columns: 1fr; } }.field{ margin-bottom: 20px; }.field.full{ grid-column: 1 / -1; }.field label{
  display:block;
  font-size: .86rem;
  font-weight:600;
  margin-bottom: 8px;
  color: var(--charcoal);
}.field .req{ color: var(--earth); }.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--charcoal);
}.field textarea{ min-height: 130px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--crop-green);
  background: var(--white);
}.radio-row{ display:flex; gap:18px; flex-wrap:wrap; }.radio-row label{
  display:flex; align-items:center; gap:8px;
  font-weight:400; font-size: .9rem;
  color: var(--charcoal-soft);
}.checkbox-row{ display:flex; align-items:flex-start; gap:10px; }.checkbox-row input{ margin-top:5px; }.checkbox-row label{ font-size: .88rem; color: var(--charcoal-soft); font-weight:400; }.form-note{
  font-size: .82rem;
  color: var(--sage);
  margin-top: -6px;
}/* ---------- Toast (non-blocking popup, replaces alert) ---------- */
#toast-region{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: 340px;
}.toast{
  background: var(--charcoal);
  color: var(--white);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: .88rem;
  line-height:1.6;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transform: translateY(20px);
  opacity:0;
  transition: all .3s ease;
}.toast.show{ transform:translateY(0); opacity:1; }.toast strong{ display:block; margin-bottom:2px; color: var(--accent-light); font-family: var(--font-head); }.toast .toast-close{
  margin-left:auto; cursor:pointer; color: rgba(255,255,255,0.6); font-size:1.1rem; line-height:1;
}/* ---------- Confirmation panel (after form submit) ---------- */
.confirm-panel{
  display:none;
  background: var(--accent-pale);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius);
  padding: 34px;
  text-align:center;
}.confirm-panel.show{ display:block; }.confirm-panel .mark{
  width:46px; height:46px; border-radius:50%;
  background: var(--crop-green);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px;
  font-size:1.3rem;
}/* ---------- Table (ordering/payment, pricing notes) ---------- */
.info-table{
  width:100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}.info-table th, .info-table td{
  padding: 16px 18px;
  text-align:left;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}.info-table th{
  background: var(--surface);
  width: 30%;
  color: var(--charcoal);
  font-weight:600;
}.info-table tr:last-child td, .info-table tr:last-child th{ border-bottom:none; }/* ---------- Ordering flow steps ---------- */
.flow{
  display:flex;
  flex-wrap:wrap;
  gap: 0;
  counter-reset: flow;
}.agri-flow-step{
  flex: 1 1 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position:relative;
  margin: 8px;
}.agri-flow-step .flow-num{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background: var(--crop-green);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:12px;
}.flow-arrow{
  align-self:center;
  color: var(--sage);
  font-size: 1.3rem;
  padding: 0 4px;
}
@media (max-width: 760px){.flow{ flex-direction:column; }.flow-arrow{ transform: rotate(90deg); align-self:flex-start; margin-left: 24px; }
}/* ---------- Insights list ---------- */
.article-card{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: 24px;
}.article-card img{ width:100%; height:100%; object-fit:cover; }.article-card .article-body{ padding: 24px 24px 24px 0; }.article-meta{ font-size: .78rem; color: var(--sage); margin-bottom: 10px; letter-spacing:.03em; }
@media (max-width: 700px){.article-card{ grid-template-columns: 1fr; }.article-card img{ aspect-ratio: 16/9; }.article-card .article-body{ padding: 0 20px 20px; }
}.article-content{ max-width: 760px; margin: 0 auto; }.article-content h2{ margin-top: 1.4em; }.article-content img{ border-radius: var(--radius); margin: 28px 0; box-shadow: var(--shadow-soft); }.article-tags{ display:flex; gap:10px; flex-wrap:wrap; margin: 20px 0 0; }.article-tags span{
  background: var(--surface); border-radius: 999px; padding: 6px 14px;
  font-size:.78rem; color: var(--crop-green-dark);
}.article-nav{
  display:flex; justify-content:space-between; gap: 20px; margin-top: 50px;
  padding-top: 30px; border-top: 1px solid var(--line);
}.article-nav a{ color: var(--crop-green-dark); font-weight:600; font-size:.92rem; display:inline-block; padding:6px 0; }/* ---------- Footer ---------- */
.agri-site-footer{
  background: var(--crop-green-dark);
  color: rgba(255,255,255,0.85);
  padding: 64px 0 30px;
}.agri-footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 900px){.agri-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){.agri-footer-grid{ grid-template-columns: 1fr; } }.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 16px; }.footer-brand img{ width:36px; height:28px; }.footer-brand span{ font-family: var(--font-head); font-size: 1.05rem; color:#fff; }.agri-site-footer h4, .agri-site-footer h2, .agri-site-footer h3{
  color: #fff; font-size: .85rem; letter-spacing:.08em;
  margin-bottom: 18px; font-family: var(--font-body); font-weight:700;
}.agri-site-footer a{ color: rgba(255,255,255,0.75); font-size: .9rem; display:inline-block; padding:6px 0; }.agri-site-footer li{ margin-bottom: 10px; }.agri-site-footer a:hover{ color: #fff; }.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px;
  padding-top: 24px; font-size: .8rem; color: rgba(255,255,255,0.78);
}/* ---------- 404 ---------- */
.notfound{
  min-height: 62vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 80px 24px;
}.notfound .code{
  font-family: var(--font-head);
  font-size: clamp(3rem, 10vw, 6rem);
  color: var(--crop-green);
  line-height:1;
  margin-bottom: 10px;
}/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; }.center{ text-align:center; }.small{ font-size:.85rem; color: var(--sage); }.divider{ height:1px; background: var(--line); margin: 60px 0; border:none; }.skip-link{
  position:absolute; left:-999px; top:0;
  background:#fff; padding:10px 16px; z-index:2000;
}.skip-link:focus{ left:10px; top:10px; }

/* a11y: touch targets + reduced motion + skip-link */
.agri-site-footer a,.article-nav a{display:inline-block;padding:4px 0;min-height:24px;line-height:1.5}.btn-block{min-height:44px;padding-top:12px;padding-bottom:12px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;padding:.6em 1em;background:#111;color:#fff;text-decoration:none;font-size:.9rem}.skip-link:focus{left:8px;top:8px;outline:2px solid #fff}

/* ---------- Contrast corrections (WCAG AA) ---------- */
/* 1. Light cards nested inside a dark section keep dark text: the
      .agri-section-dark rules would otherwise paint them white-on-cream (1.16:1). */
.agri-section-dark .agri-process-step{ color:#4a473e; }
.agri-section-dark .agri-process-step h2,
.agri-section-dark .agri-process-step h3{ color: var(--charcoal); }
.agri-section-dark .agri-process-step p{ color:#4a473e; }

/* 2. --sage (#8a9a7e) reads on neither extreme: 2.95:1 on the light surfaces and
      2.87:1 on the dark green. Split it into a light-surface and a dark-surface tone. */
.small,
.article-meta,
.agri-breadcrumb,
.form-note,
.flow-arrow,
.brand-text small{ color: var(--sage-ink); }

/* 3. Dark contexts: body copy goes light, sage text goes to the light sage. */
.agri-site-footer{ color: rgba(255,255,255,0.86); }
.agri-site-footer p,
.agri-site-footer li,
.agri-site-footer address{ color: rgba(255,255,255,0.86); }
.agri-site-footer .small,
.agri-site-footer .article-meta,
.agri-site-footer .brand-text small,
.agri-section-dark .small,
.agri-section-dark .article-meta,
.agri-section-dark .flow-arrow{ color: var(--sage-ondark); }

/* 4. Outline button is charcoal-on-transparent; inside a dark section that is 1.67:1.
      Give it the light treatment there (a .btn-light variant already exists for new markup). */
.agri-section-dark .agri-btn-outline,
.agri-site-footer .agri-btn-outline{ color: var(--white); border-color: rgba(255,255,255,.7); }
.agri-section-dark .agri-btn-outline:hover,
.agri-site-footer .agri-btn-outline:hover{ background: var(--white); color: var(--charcoal); }