@charset "UTF-8";
/* 佐藤ファーム｜Elementorで扱いにくい部品だけのCSS
   （実績の数字 / 出荷カレンダー / ベン図 / ロゴ）
   これ以外のデザインは Elementor の設定で編集できます */

:root {
  --green:      #1bae6e;
  --green-dk:   #2b9d6b;
  --green-mid:  #47be8a;
  --ink:        #000;
  --text:       #333;
  --grey:       #666;
  --line-tbl:   #ccc;
  --thead:      #f0f0f0;
  --f-jp:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-noto:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-en:  "Montserrat", "Helvetica Neue", Arial, sans-serif; /* DIN 2014 substitute */
  --lh-auto: 1.125;  /* Figma "Auto" line-height parity (browser normal = 1.45) */
}

.tt {
  --asc: 1.16;      /* Zen Kaku Gothic New */
  --desc: .29;
  --cap: .70;
  --lh: 1;
  display: block;
  margin-top:    calc((((var(--lh) - var(--asc) - var(--desc)) / 2) + var(--asc) - var(--cap)) * -1em);
  margin-bottom: calc((((var(--lh) - var(--asc) - var(--desc)) / 2) + var(--desc)) * -1em);
}
.tt--noto { --cap: .7366; }
.tt--en   { --asc: .97; --desc: .25; --cap: .70; }
/* ヘッダーのロゴはトップページへのリンク。
   既定のリンク色（#1BAE6E）や下線がロゴに乗らないよう打ち消します */
.logo-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.logo-link:hover,
.logo-link:focus { color: inherit; text-decoration: none; opacity: .65; }
.logo-link:focus-visible { outline: 2px solid #1BAE6E; outline-offset: 4px; border-radius: 2px; }

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3531em;                 /* 10 / 28.319 */
  font-size: 19.116px;          /* SP header size */
  color: var(--ink);
  line-height: 1;
}
.logo--light { color: #fff; }
.logo__name { --lh: 1; font-family: var(--f-jp); font-weight: 500; white-space: nowrap; }
.logo__c1 { font-size: 1em;      letter-spacing:  .05em; }
.logo__c2 { font-size: 1em;      letter-spacing: -.04em; }
.logo__c3 { font-size: 1.0883em; letter-spacing: -.1em;  }
.logo__c4 { font-size: 1.0883em; letter-spacing: -.09em; }
.logo__group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .1765em;                 /* 4.998 / 28.319 */
  width: 6.356em;               /* 180 / 28.319 */
}
.logo__bars { flex: 1 1 0; min-width: 0; display: block; padding-bottom: .0353em; }
.logo__bars i {
  display: block;
  height: .0353em;              /* 1 / 28.319 */
  background: currentColor;
}
.logo__bars i + i { margin-top: .1059em; }
.logo__en {
  --lh: 1;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: .5173em;           /* 14.648 / 28.319 */
  letter-spacing: .11em;
  line-height: 1;
  white-space: nowrap;
}
/* 数値ブロック（30ha+ / JGAP / 10品目+）
   以前は container-type: inline-size のコンテナクエリで縮尺を決めていたが、
   Elementorのウィジェット枠がコンテナクエリの解決前に高さを確定してしまい、
   枠が29pxに潰れて次の見出し(FEATURE)と20px重なっていた（スマホ幅のみ）。
   同じ縮尺を画面幅から求めることで、1回のレイアウトで確定させる。
     ・48px = セクションのスマホ時の左右padding（24px×2）
     ・478px = 元デザインでの横幅。これ以上広い画面では等倍（1px）で止める */
.stats-wrap { width: 100%; max-width: 478px; }
.stats {
  --u: min(1px, calc((100vw - 48px) / 478));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(40 * var(--u));
  padding: calc(15 * var(--u));
  text-align: center;
}
.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  flex: 0 0 auto;
}
.stats__item--s { width: calc(100 * var(--u)); }
.stats__item--m { width: calc(168 * var(--u)); }
.stats__label {
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: calc(19.2 * var(--u));
  line-height: 1;
  color: var(--text);
}
.stats__value {
  --lh: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(50.182 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  color: var(--green);
  white-space: nowrap;
}
.stats__en   { flex: 0 0 auto; white-space: nowrap; }
.stats__num  { font-size: 1em; }
.stats__unit { font-size: .5739em; }
.stats__badge {
  flex: 0 0 auto;
  font-family: var(--f-noto);
  font-weight: 500;
  font-size: calc(16.8 * var(--u));
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  /* 2.4u below the cap-top, minus Noto's own cap trim (0.2484em) */
  margin-top: calc(10.43 * var(--u) - .2484em);
}
.stats__badge--bold {
  font-weight: 700;
  line-height: var(--lh-auto);
  margin-top: calc(21.23 * var(--u));
}
.stats__badge--bold { font-weight: 700; }
.stats__sub {
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: calc(14.4 * var(--u));
  line-height: 1;
  letter-spacing: .08em;
  color: var(--text);
  white-space: nowrap;
}
/* 年表（作付けカレンダー）
   コンテナクエリだと枠の高さが解決前に確定して潰れるため、画面幅から縮尺を出す。
   PCでは親の幅が常に640pxなので等倍（1px）でよい */
.timeline {
  position: relative;
  width: 100%;
  --u: 1px;
}
@media (max-width: 767px) {
  .timeline { --u: calc((100vw - 48px) / 640); }   /* 48px = 左右padding 24px×2 */
}
.timeline__table { width: 100%; table-layout: fixed; }
.timeline__table th,
.timeline__table td {
  border: calc(1.633 * var(--u)) solid var(--line-tbl);
  padding: 0;
}
.timeline__table th {
  height: calc(55.51 * var(--u));
  background: var(--thead);
  font-family: var(--f-jp);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.timeline__table th,
.timeline__table td { vertical-align: middle; }
.timeline__table th .n { font-size: calc(26.122 * var(--u)); }
.timeline__table th .u { font-size: calc(19.592 * var(--u)); }
.timeline__table td { height: calc(99.592 * var(--u)); background: #fff; }
.timeline__overlay { position: absolute; inset: 0; pointer-events: none; }
.tl-art {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.tl-label {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: calc(22.857 * var(--u));
  line-height: var(--lh-auto);
  color: var(--grey);
  white-space: nowrap;
}
.tl-label--c { text-align: center; }
/* ベン図
   中の文字は cqw で拡縮するが、container-type を付けると枠の高さが 0 になり
   下のセクションに重なる。そこで「最大幅と縦横比」は枠(ウィジェット)側に持たせ、
   ベン図はそれを埋めるだけにする。こうすると高さは枠が決めるので潰れない */
.elementor-widget:has(> .venn) {
  /* max-width は Elementor 側の .elementor-27 .elementor-element-xxxx{max-width:100%}
     のほうが詳細度が高いため、ここだけ !important で上書きする */
  max-width: 438.21px !important;
  aspect-ratio: 438.21 / 375;
  flex: 0 0 auto;
}
/* スマホでは枠の幅が「親に合わせて伸びた結果」なので寸法が確定せず、
   縦横比から高さを出せずに 0 になる。画面幅から実寸を与えて確定させる
     82px = このセクションでベン図の左右にある余白の合計 */
@media (max-width: 767px) {
  .elementor-widget:has(> .venn) { width: calc(100vw - 82px); }
}
.venn {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
}
.venn__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.venn__t, .venn__s, .venn__core {
  position: absolute;
  color: #fff;
  white-space: nowrap;
  font-family: var(--f-jp);
}
.venn__t { font-weight: 700; font-size: 5.477cqw; line-height: 1.7; letter-spacing: .05em; }
.venn__s { font-weight: 500; font-size: 4.108cqw; line-height: 1.7; letter-spacing: .05em; }
.venn__t--prod  { left: 38.48%; top: 13.87%; }
.venn__s--prod  { left: 29.35%; top: 24.27%; }
.venn__t--hr    { left: 16.20%; top: 62.13%; }
.venn__s--hr    { left: 10.50%; top: 73.07%; }
.venn__t--sales { left: 60.98%; top: 62.13%; }
.venn__s--sales { left: 57.32%; top: 73.87%; line-height: 1.4; text-align: center; }
.venn__core {
  left: 50%;
  top: 45.33%;
  font-family: var(--f-en);
  font-weight: 800;
  font-size: 7.531cqw;
  line-height: 1.7;
  letter-spacing: .05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .8);
  text-align: center;
  /* Montserrat is wider than the comp's DIN 2014 — condense to the same width */
  transform: translateX(-50%) scaleX(.87);
}

@media (min-width: 900px) {

}

/* ---- Elementor 側の調整 ---- */
/* テキストウィジェット内の段落は余白ゼロ。行間はElementorの「間隔」で調整します */
.elementor-widget-text-editor p { margin: 0; }
/* 見出しウィジェットの既定マージンを消す */
.elementor-widget-heading .elementor-heading-title { margin: 0; }

/* ---- ページ全体の背景（カンプの淡いグラデーション） ---- */
body {
  background-color: #fdfdf7;
  background-image: url("../img/bg-gradient.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 100% auto;
}
/* 日本語の禁則処理 */
body { line-break: strict; word-break: normal; overflow-wrap: anywhere; }

/* ---- 会社概要の表 ---- */
.sf-company { width: 100%; border-collapse: collapse; }
.sf-company th, .sf-company td {
  padding: 12px 20px;
  border-bottom: 1px solid #ddd;
  font-family: var(--f-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh-auto);
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}
.sf-company th { width: 20%; white-space: nowrap; }
.sf-company tr:first-child th, .sf-company tr:first-child td { font-weight: 700; }
.sf-company td small { font-size: 14px; }
@media (max-width: 899px) {
  .sf-company th, .sf-company td { padding: 12px 10px; font-size: 14px; }
  .sf-company th { width: 30%; font-size: 12px; }
  .sf-company td small { font-size: 12px; }
}

/* ---- ロゴ（ヘッダー/フッター用） ---- */
.sf-logo { display: inline-flex; flex-direction: column; align-items: center; }

/* ---- ヘッダーのナビ ---- */
.sf-nav__list { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; }
.sf-nav__list a {
  font-family: var(--f-noto); font-weight: 500; font-size: 16px;
  line-height: var(--lh-auto); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sf-nav__list a:hover { color: var(--green); }

/* フッターのナビは濃い背景(#333)の上に置くので明るい色にする */
.sf-nav--footer .sf-nav__list { justify-content: flex-end; }
.sf-nav--footer .sf-nav__list a { color: #F1F4F7; font-size: 12px; }
.sf-nav--footer .sf-nav__list a:hover { color: #FFFFFF; }

/* TOPではヘッダーをヒーローに重ねる（カンプ通り）
   ※ HFEは body 側に .ehf-header を付けるので、ヘッダー本体は #masthead で指定する */
body.home #masthead { position: absolute; top: 0; left: 0; width: 100%; background: transparent; }
/* ドロワー(z-index:90)より前面に置いて、開いたままでも閉じられるようにする */
#masthead { position: relative; z-index: 200; }
#masthead .main-title.bhf-hidden { display: none; }

/* ヘッダー内の3ブロックの幅を固定して重なりを防ぐ */
.sf-header .elementor-widget-shortcode { flex: 0 0 auto; }
.sf-header .sf-logo-wrap { flex: 0 0 200px; text-align: center; }
.sf-header .sf-header-cta { flex: 0 0 320px; }

/* PC版ヘッダーは ナビ336 + ロゴ200 + ボタン320 + すき間128 = 984px 必要。
   1024〜1279px では すき間を詰めて余裕を作る（メニューが1つ増えても耐えるように） */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sf-header .e-con-inner,
  .sf-header { gap: 32px !important; }
}

/* 984px を下回るとナビが画面外へ出るため、ドロワーへの切替を 1023px までに広げる
   （以前は 899px で、900〜983px の帯で横スクロールが発生していた） */
@media (max-width: 1023px) {
  /* SPは ロゴ / LINEボタン / ハンバーガー の3つだけ。
     ナビ本体はドロワーとして開くので display:none にはしない（幅だけ0にする） */
  .sf-header .elementor-widget-shortcode { width: 0 !important; flex: 0 0 0 !important; }
  .sf-header .sf-logo-wrap { width: auto !important; flex: 0 0 auto; }
  .sf-header .sf-logo-wrap .logo { font-size: 19.116px !important; }
  .sf-header { justify-content: space-between !important; gap: 12px !important; flex-wrap: nowrap !important; }
  .sf-header .e-con-inner { justify-content: space-between !important; gap: 12px !important; flex-wrap: nowrap !important; }
  .sf-header .sf-header-cta { width: auto !important; flex: 0 0 auto !important;
                              flex-direction: row !important; justify-content: flex-end; gap: 12px !important; }
  .sf-header .sf-header-cta .elementor-widget-button { width: 136px !important; flex: 0 0 136px !important; }
  .sf-header .sf-header-cta .elementor-button { width: 100%; }
  .sf-header .sf-burger-wrap { flex: 0 0 36px !important; width: 36px !important; display: block !important; }
  /* ドロワー(.sf-nav)はヘッダーの子要素なので、ロゴ・ボタン・ハンバーガーを前面に出す */
  .sf-header .sf-logo-wrap,
  .sf-header .sf-header-cta { position: relative; z-index: 95; }
  .sf-hide-sp { display: none !important; }
  .sf-header .sf-header-cta .elementor-button { font-size: 14px !important; padding: 7px 16px !important; }
}

/* ---- SP ---- */
.sf-burger-wrap { display: none; }
.sf-burger { display: none; width: 36px; height: 36px; padding: 0 4px; background: none; border: 0; cursor: pointer; }
.sf-burger span { display: block; height: 2px; margin: 7px 0; background: var(--ink); border-radius: 2px; transition: .25s; }
@media (max-width: 1023px) {
  .sf-burger { display: block !important; }
  /* ドロワーはヘッダーのナビだけ（フッターのナビには当てない） */
  .sf-nav:not(.sf-nav--footer) { position: fixed; inset: 0; z-index: 90; padding: 110px 32px 40px;
            background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
            opacity: 0; visibility: hidden; transition: opacity .25s; }
  body.sf-nav-open .sf-nav:not(.sf-nav--footer) { opacity: 1; visibility: visible; }
  .sf-nav:not(.sf-nav--footer) .sf-nav__list { flex-direction: column; gap: 24px; }
  .sf-nav:not(.sf-nav--footer) .sf-nav__list a { font-family: var(--f-jp); font-size: 18px; letter-spacing: .05em;
                    display: block; padding-bottom: 12px; border-bottom: 1px solid var(--line, #ddd); }
  /* SPのフッターナビはカンプどおり右寄せの縦並び */
  .sf-nav--footer .sf-nav__list { flex-direction: column; align-items: flex-end; gap: 24px; }
  body.sf-nav-open .sf-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  body.sf-nav-open .sf-burger span:nth-child(2) { opacity: 0; }
  body.sf-nav-open .sf-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}
/* 「配送について」が折り返さないように */
.sf-nowrap .elementor-heading-title { white-space: nowrap; }
@media (max-width: 899px) { .sf-nowrap .elementor-heading-title { white-space: normal; } }

/* ---- ヒーローのキャベツ写真 ----
   枠(1040x255)と写真(3:2)の比率が違うため、cover だと中央だけ極端に拡大される。
   カンプは写真全体を枠に収めているので、それに合わせる。
   （Elementorの「背景サイズ」では 100% 100% を指定できないためCSSで上書き） */
.sf-hero-photo { background-size: 100% 100% !important; }

/* ---- ログイン中の管理バー(上の黒帯)とヘッダーが重ならないようにする ---- */
body.admin-bar.home #masthead { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar.home #masthead { top: 46px; }
}

/* ---- Hello Elementor がテーブルに付ける縞模様を打ち消す ----
   `table tbody > tr:nth-child(odd) > *` が効いてしまい、
   出荷カレンダーの白セルと会社概要の背景が灰色がかるため上書きする */
.timeline .timeline__table tbody > tr > td { background-color: #fff; }
.timeline .timeline__table thead > tr > th { background-color: var(--thead); }
.sf-company.sf-company > tbody > tr > th,
.sf-company.sf-company > tbody > tr > td { background-color: transparent; }