@charset "UTF-8";
/* ============================================================
   有限会社 丸吉青果 — style.css
   COLOR  ha(葉) #3A7A55 / wakaba #6FAE79 / daidai #EE8B4B
          tsuchi #4A4139 / kinari #FBF8F1 / line #E8E1D4
   FONT   Zen Maru Gothic（丸ゴシック）500 / 700 / 900
   本文17px・行間2.0・字間0.02em。角丸14px、やわらかい影。
   ============================================================ */

:root{
  --ha:#3A7A55;
  --ha-d:#2c6142;
  --wakaba:#6FAE79;
  --daidai:#EE8B4B;
  --daidai-d:#dc7735;
  --tsuchi:#4A4139;
  --kinari:#FBF8F1;
  --surface:#FFFFFF;
  --line:#E8E1D4;
  --ink:#3A3E3C;
  --sub:#6B716E;
  --f:'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;
  --r:14px;
  --rs:10px;
  --shadow:0 4px 16px rgba(58,122,85,.07);
  --wrap:1180px;
  --pad:clamp(16px, 4vw, 40px);
  --sec-y:clamp(48px, 6vw, 88px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0; background:var(--kinari); color:var(--ink);
  font-family:var(--f); font-weight:500; font-size:17px; line-height:2; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .22s ease; }
a:hover{ color:var(--daidai); }
button{ font:inherit; transition:background-color .2s ease, color .2s ease, transform .18s ease; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
dl{ margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); }

/* 見出し */
.sec-head{ text-align:center; }
.sec-en{ font-size:12px; font-weight:900; letter-spacing:.24em; color:var(--ha); }
.sec-title{ font-weight:900; color:var(--ha); font-size:clamp(27px, 3.6vw, 40px); margin-top:8px; }
.sec-mark{ width:46px; height:4px; border-radius:99px; background:var(--daidai); margin:14px auto 0; }
.sec-mark--left{ margin-inline:0; }
.sec-lead{ font-size:16px; color:var(--sub); margin:16px auto 0; max-width:34em; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:900; white-space:nowrap; border:none; cursor:pointer; border-radius:var(--r);
}
.btn--cta{ background:var(--daidai); color:#fff; font-size:18px; padding:16px 32px; box-shadow:0 6px 18px rgba(238,139,75,.3); }
.btn--cta:hover{ background:var(--daidai-d); color:#fff; transform:translateY(-2px); }
.btn--outline{ background:#fff; border:2px solid var(--ha); color:var(--ha); font-size:18px; padding:14px 28px; }
.btn--outline:hover{ background:var(--ha); color:#fff; }
.btn--sm{ font-size:15px; padding:12px 20px; }
.btn--block{ width:100%; font-size:17px; padding:16px; }

/* ---------- 情報バー ---------- */
.topbar{ background:var(--ha-d); color:#e3f0e8; }
.topbar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding-block:8px; font-size:13px; letter-spacing:.04em;
}
.topbar__tel{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- ヘッダー ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; gap:20px; padding-block:12px; }
.logo{ display:flex; align-items:center; gap:12px; white-space:nowrap; }
.logo__seal{
  flex:none; width:44px; height:44px; background:var(--ha); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px; color:#fff; line-height:1;
}
.logo__text{ display:flex; flex-direction:column; line-height:1.25; }
.logo__en{ font-size:10px; letter-spacing:.24em; color:var(--ha); font-weight:700; }
.logo__ja{ font-weight:900; font-size:20px; color:var(--ha); letter-spacing:.06em; }

.nav{ display:flex; gap:24px; margin-left:auto; white-space:nowrap; font-weight:700; font-size:15px; }
.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  color:var(--ha); cursor:pointer; padding:0;
}
.mnav{ display:none; flex-direction:column; background:#fff; border-top:1px solid var(--line); padding:4px var(--pad) 14px; }
.mnav.is-open{ display:flex; }
.mnav a{ padding:15px 2px; font-weight:700; border-bottom:1px solid var(--line); }
.mnav a:last-child{ border-bottom:none; font-weight:900; color:var(--daidai); }

/* ---------- ヒーロー ---------- */
.hero{ background:var(--surface); border-bottom:1px solid var(--line); }
.hero__inner{
  display:flex; flex-wrap:wrap; gap:clamp(32px, 4vw, 56px); align-items:center;
  padding-block:clamp(44px, 6vw, 84px);
}
.hero__body{ flex:1 1 440px; min-width:290px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; background:#eaf3ec; color:var(--ha);
  font-weight:900; font-size:13px; letter-spacing:.08em; padding:7px 15px; border-radius:var(--rs);
}
.hero__title{ font-weight:900; color:var(--ha); font-size:clamp(32px, 5vw, 52px); line-height:1.5; letter-spacing:.02em; margin-top:22px; }
.hero__text{ font-size:clamp(17px, 1.35vw, 19px); line-height:2; color:var(--sub); max-width:32em; margin-top:22px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.hero__visual{ flex:1 1 340px; min-width:270px; }
.ph{
  aspect-ratio:4/3; background:linear-gradient(150deg,#eef6ef,#fbf3e6);
  border:1px solid var(--line); border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace, Menlo, monospace; font-size:13px; color:#9aa39c; letter-spacing:.05em;
}
.stats{ display:flex; flex-wrap:nowrap; margin-top:34px; border-top:1px solid var(--line); }
.stat{ flex:1 1 0; min-width:0; padding:16px 16px 0; }
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat__num{ font-weight:900; font-size:30px; line-height:1.1; }
.stat--ha .stat__num{ color:var(--ha); }
.stat--wakaba .stat__num{ color:var(--wakaba); }
.stat--daidai .stat__num{ color:var(--daidai); }
.stat__label{ font-size:13px; color:var(--sub); margin-top:4px; }

/* ---------- カード共通 ---------- */
.grid{ display:grid; gap:22px; margin-top:38px; }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px; box-shadow:var(--shadow);
}
.card__icon{ display:block; }
.card__icon--ha{ color:var(--ha); }
.card__icon--wakaba{ color:var(--wakaba); }
.card__icon--daidai{ color:var(--daidai); }
.card__title{ font-weight:900; color:var(--ha); font-size:20px; margin:16px 0 10px; line-height:1.5; }
.card__text{ font-size:15.5px; line-height:1.85; color:var(--sub); }

/* ---------- 強み ---------- */
.strength{ background:var(--ha-d); color:#eaf3ee; }
.strength .sec-en{ color:#a9d8ba; }
.strength .sec-title{ color:#fff; }
.strength__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:18px; margin-top:38px; }
.scard{ background:rgba(255,255,255,.1); border-radius:var(--r); padding:30px 28px; }
.scard__no{ font-weight:900; font-size:14px; color:#ffdcc2; letter-spacing:.1em; }
.scard__title{ font-weight:900; color:#fff; font-size:20px; margin:12px 0 10px; line-height:1.5; }
.scard__text{ font-size:15.5px; line-height:1.9; color:#e4f1e8; }

/* ---------- 取扱品目 ---------- */
.item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow);
}
.item__head{ padding:18px 22px; font-weight:900; font-size:18px; color:#fff; }
.item__head--ha{ background:var(--ha); }
.item__head--wakaba{ background:var(--wakaba); }
.item__head--daidai{ background:var(--daidai); }
.item__head--tsuchi{ background:var(--tsuchi); }
.item__list{ padding:18px 22px 22px; display:flex; flex-wrap:wrap; gap:8px; }
.item__list li{ font-size:14.5px; font-weight:700; color:var(--sub); background:#f1f7f2; padding:6px 15px; border-radius:99px; }
.note{ font-size:15px; color:var(--sub); margin-top:20px; text-align:center; }

/* ---------- お届け先 ---------- */
.clients{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clients__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:16px; margin-top:32px; }
.client{ background:var(--kinari); border:1px solid var(--line); border-radius:var(--r); padding:26px 16px; text-align:center; }
.client svg{ color:var(--wakaba); display:block; margin-inline:auto; }
.client__name{ font-weight:900; font-size:16px; color:var(--ha); margin-top:12px; }

/* ---------- 流れ ---------- */
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; box-shadow:var(--shadow);
}
.step__head{ display:flex; align-items:center; gap:13px; }
.step__no{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--ha); color:#fff;
  font-weight:900; font-size:17px; display:flex; align-items:center; justify-content:center;
}
.step__title{ font-weight:900; color:var(--ha); font-size:19px; }
.step__text{ font-size:15.5px; line-height:1.85; color:var(--sub); margin-top:14px; }

/* ---------- 採用 ---------- */
.recruit{ background:#f4f0e7; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.recruit__inner{ display:flex; flex-wrap:wrap; gap:clamp(30px, 4vw, 56px); }
.recruit__body{ flex:1 1 400px; min-width:290px; }
.recruit__title{ font-weight:900; color:var(--ha); font-size:clamp(27px, 3.6vw, 40px); margin-top:8px; line-height:1.45; }
.recruit__text{ font-size:clamp(16.5px, 1.3vw, 18px); line-height:2; color:var(--sub); margin-top:18px; max-width:31em; }
.voice{
  flex:1 1 330px; min-width:280px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(24px, 3vw, 32px); box-shadow:var(--shadow);
}
.voice__label{ font-weight:900; font-size:15px; color:var(--ha); letter-spacing:.08em; }
.voice p{ font-size:16px; line-height:1.95; color:var(--ink); margin-top:12px; }
.voice__who{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--sub); font-weight:700; }

/* ---------- ビジョン ---------- */
.vision{ text-align:center; }
.vision p{ font-weight:900; color:var(--ha); font-size:clamp(21px, 3vw, 32px); line-height:1.75; margin:16px auto 0; max-width:22em; }
.vision em{ font-style:normal; color:var(--daidai); }

/* ---------- 会社概要 ---------- */
.company{ background:var(--surface); border-top:1px solid var(--line); }
.company__inner{ display:flex; flex-wrap:wrap; gap:clamp(30px, 4vw, 56px); }
.company__head{ flex:1 1 270px; min-width:250px; }
.company__list{ flex:1 1 460px; min-width:300px; border-top:2px solid var(--ha); }
.company__row{ display:flex; flex-wrap:wrap; gap:6px 20px; padding:16px 0; border-bottom:1px solid var(--line); }
.company__row dt{ flex:none; width:120px; font-weight:900; color:var(--ha); }
.company__row dd{ margin:0; flex:1; min-width:200px; }

/* ---------- お問い合わせ ---------- */
.contact{ background:var(--tsuchi); color:#eae5dd; }
.contact__inner{ display:flex; flex-wrap:wrap; gap:34px; align-items:center; justify-content:space-between; padding-block:var(--sec-y); }
.contact__body{ flex:1 1 420px; min-width:280px; }
.contact__en{ font-size:12px; font-weight:900; letter-spacing:.24em; color:#a9d8ba; }
.contact__title{ font-weight:900; color:#fff; font-size:clamp(25px, 3.4vw, 38px); line-height:1.5; margin-top:14px; }
.contact__text{ font-size:17px; line-height:1.95; color:#d8d1c8; margin-top:16px; max-width:33em; }
.contact__card{ flex:0 1 330px; min-width:265px; background:#5a5049; border-radius:var(--r); padding:28px; }
.contact__label{ font-size:13px; color:#d8d1c8; }
.contact__tel{ display:block; font-weight:900; font-size:30px; color:#fff; margin-top:4px; }
.contact__tel:hover{ color:var(--daidai); }
.contact__note{ font-size:13px; color:#d8d1c8; margin-top:4px; }
.contact__card .btn{ margin-top:20px; }

/* ---------- フッター ---------- */
.footer{ background:var(--ha-d); color:#dfece4; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:38px; justify-content:space-between; padding-block:clamp(42px, 5vw, 64px); }
.footer__brand{ flex:1 1 320px; min-width:250px; }
.footer__logo{ display:flex; align-items:center; gap:12px; }
.footer__seal{
  flex:none; width:42px; height:42px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:20px; color:var(--ha-d);
}
.footer__en{ font-size:10px; letter-spacing:.24em; color:#bfe0cc; font-weight:700; }
.footer__ja{ font-weight:900; font-size:19px; color:#fff; }
.footer__address{ font-size:14.5px; line-height:1.9; color:#d3e6da; margin-top:16px; max-width:26em; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:42px; }
.footer__coltitle{ font-size:12px; font-weight:900; letter-spacing:.14em; color:#bfe0cc; margin-bottom:14px; }
.footer__list{ display:flex; flex-direction:column; gap:11px; font-size:15px; }
.footer__list a{ color:#e8f2ec; }
.footer__copy{ border-top:1px solid rgba(255,255,255,.15); }
.footer__copy p{ padding-block:18px; font-size:12.5px; color:#c3dccd; }

/* ---------- レスポンシブ ---------- */
@media (max-width:1000px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .header .btn--sm{ margin-left:auto; }
}
@media (max-width:600px){
  .header .btn--sm{ display:none; }
  .burger{ margin-left:auto; }
  .logo__en{ display:none; }
  .logo__ja{ font-size:17px; }
  .stat{ padding-inline:10px; }
  .stat__num{ font-size:26px; }
  .hero__actions .btn{ width:100%; }
  .company__row dt{ width:auto; }
}
@media (max-width:360px){
  .logo__ja{ font-size:15px; }
  .btn--cta, .btn--outline{ font-size:16px; padding-inline:20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

@media print{
  .header, .topbar, .burger, .mnav{ display:none !important; }
  body{ background:#fff; }
}