/* style.css */

/* ===== Base ===== */
:root{
  --bg:#F6F1E6;
  --surface:#FFFFFF;
  --soft:#FBF8F2;
  --primary:#2F6B4F;
  --primary-weak:#DCEBDD;
  --accent:#E38B2C;
  --ink:#1A1A1A;
  --muted:#5E5E5E;
  --line:rgba(0,0,0,.09);
  --shadow: 0 10px 26px rgba(0,0,0,.08);
  --radius:18px;
  --max:1580px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.center{text-align:center}

/* ===== Utilities ===== */
.u-primary{color:var(--primary)}
.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(47,107,79,.12);
  color:var(--primary);
  font-size:12px;
  border:1px solid rgba(47,107,79,.16);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  font-weight:700;font-size:14px;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.06)}
.btn--primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.btn--ghost{background:transparent}
.btn--lg{height:46px;padding:0 18px;border-radius:14px;font-size:15px}

.btn--ghostOnDeep{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}
.btn--ghostOnDeep:hover{box-shadow:0 12px 24px rgba(0,0,0,.18)}

/* ===== Header ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,230,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;gap:18px;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px;min-width:200px}
.logo__mark{
  width:38px;height:38px;border-radius:12px;
  background:var(--primary);
  position:relative;
  box-shadow:0 10px 20px rgba(47,107,79,.18);
}
.logo__mark::after{
  content:"";
  position:absolute;inset:9px;
  border-radius:10px;
  background:rgba(255,255,255,.18);
}
.logo__text{display:flex;flex-direction:column;gap:2px}
.logo__name{font-weight:900;letter-spacing:.02em}
.logo__sub{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.nav__link{font-size:14px;color:var(--muted)}
.nav__link:hover{color:var(--primary)}

.header__cta{display:flex;gap:10px}


/* ヘッダー全体の余白と間隔を詰める */
.header__inner{
  padding: 8px 0;   /* 12px → 8px くらいに */
  gap: 10px;        /* 18px → 10px */
}

/* ロゴ（画像＋文字）を“ひとまとまり”で詰める */
.logo{
  display: flex;
  align-items: center;
  gap: 10px;        /* ロゴ画像と文字の間 */
  min-width: auto;  /* 200px固定っぽいのを解除 */
}

/* ロゴ画像サイズ */
.logo__mark{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.logo__mark::after{ content:none; }
.logo__mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* サブタイトルの詰め */
.logo__sub{
  margin-top: 1px;
  font-size: 11px;
}

/* ナビ間隔を詰め */
.nav{
  gap: 12px;        /* 14px → 12px */
}

/* 右CTA間隔を詰め */
.header__cta{
  gap: 8px;
}

/* ボタンを少し小さく（任意） */
.btn{
  height: 36px;     /* 40px → 36px */
  padding: 0 12px;
  border-radius: 10px;
}


/* ==========================
   ロゴだけ中央（ナビ・CTAは右）
   ========================== */
.header__inner{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

/* ロゴを中央固定 */
.header .logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 右側（ナビ＋CTA）を右寄せで詰める */
.header .nav{
  margin-left: auto;
  display: flex;
  gap: 12px; /* 好みで 10px まで詰めてもOK */
}

.header .header__cta{
  display: flex;
  gap: 8px;
  margin-left: 10px; /* ナビとCTAの間 */
}

/* ロゴが右側に被らないよう最低限の“逃げ” */
.header__inner{
  padding-right: 220px; /* CTA分の逃げ（必要なら増減） */
}

/* SP（ナビ非表示のときはロゴを通常配置に戻す） */
@media (max-width: 980px){
  .header__inner{ padding-right: 0; }
  .header .logo{
    position: static;
    transform: none;
  }
}


/* ロゴ内テキストを左揃えにする */
.logo{
  text-align: left; /* 念のため */
}

.logo__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ←これが効く */
  text-align: left;        /* ←これも効く */
}

.logo__name,
.logo__sub{
  display: block;
  text-align: left;
}


/* ==========================
   Header：左テキスト / 中央ロゴ / 右ナビCTA
   ========================== */
.header__inner{
  /* 既存のflex/absolute中心固定をやめてgridに */
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;

  /* 以前の“逃げ”を無効化 */
  padding-right: 0;
}

/* 左：ブランドテキスト */
.brand{
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.brand__name{
  font-weight: 900;
  letter-spacing: .02em;
}
.brand__sub{
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}

/* 中央：ロゴアイコン */
.mark{
  justify-self: center;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 右：ナビ + CTA */
.header__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header__right .nav{
  margin-left: 0;      /* 既存の margin-left:auto を打ち消す */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.header__right .header__cta{
  display: flex;
  gap: 8px;
  margin-left: 10px;
}

/* 既存の「.header .logo をabsolute中央」ルール対策：
   今回はHTMLから.logoを消してbrand/markにしたので基本不要。
   もし.logoが残るなら、下も追記しておけば安全。 */
.header .logo{
  position: static;
  transform: none;
}

/* 左テキスト（brand）を“中央ロゴ寄り”に寄せる */
.brand{
  justify-self: end;     /* ←左端→左カラム右端へ */
  margin-right: 14px;    /* ←ロゴとの距離（好みで 10〜18px） */
  text-align: left;      /* 文字の揃えは左のまま */
  max-width: 320px;      /* 長文で押し出されるのを防ぐ（任意） */
}




/* =========================================================
   Farmテイスト：モザイク＋緑の帯＋ふきだし（Hero）
   ※ HTML側：.hero--farm / .heroFarm__* を使う前提
   ========================================================= */
.hero--farm{
  padding: 26px 0 26px;
  position: relative;
}

.heroFarm__badge{ margin-bottom: 12px; }

.heroFarm__mosaic{
  position: relative;
  padding: 14px;
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: visible;
}

/* やさしい紙質感＋薄い模様 */
.heroFarm__mosaic::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(47,107,79,.10) 0 120px, transparent 240px),
    radial-gradient(circle at 82% 30%, rgba(227,139,44,.10) 0 140px, transparent 260px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 10px, transparent 10px 22px);
  opacity:.9;
  pointer-events:none;
}

.heroFarm__grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.heroFarm__tile{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ddd;
}

.heroFarm__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* 上段：3枚／下段：2枚（農園サイトっぽい） */
.heroFarm__tile.t1{ grid-column: 1 / 5;  height: clamp(170px, 18vw, 220px); }
.heroFarm__tile.t2{ grid-column: 5 / 9;  height: clamp(170px, 18vw, 220px); }
.heroFarm__tile.t3{ grid-column: 9 / 13; height: clamp(170px, 18vw, 220px); }
.heroFarm__tile.t4{ grid-column: 1 / 7;  height: clamp(180px, 20vw, 240px); }
.heroFarm__tile.t5{ grid-column: 7 / 13; height: clamp(180px, 20vw, 240px); }

/* 緑の帯（メインメッセージ） */
.heroFarm__ribbon{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 40px));
  background: rgba(47,107,79,.94);
  color: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.18);
  /* box-shadow: 0 22px 44px rgba(0,0,0,.18); */
}

.heroFarm__ribbonKicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .92;
}

.heroFarm__ribbonTitle{
  margin: 6px 0 4px;
  font-size: clamp(22px, 3.0vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.heroFarm__ribbonSub{
  margin: 0;
  font-size: 13px;
  opacity: .92;
}

/* 右のふきだし */
.heroFarm__bubble{
  position: absolute;
  right: 18px;
  top: 72%;
  transform: translateY(-50%);
  width: min(320px, 42%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px 12px;
  /* box-shadow: 0 18px 40px rgba(0,0,0,.12); */
}

.heroFarm__bubble::after{
  content:"";
  position:absolute;
  left: 14px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.92);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.heroFarm__bubbleTitle{
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--primary);
  font-size: 14px;
}

.heroFarm__bubbleList{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.heroFarm__under{
  text-align: center;
  margin-top: 16px;
}

.heroFarm__lead{
  margin: 0 auto;
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
}

.heroFarm__actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 14px;
}

.heroFarm__chips{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


/* サンプル請求（ghost）を白背景にする：ヘッダー/ヒーロー共通 */
.btn--ghost{
  background: #fff; /* 背景だけ白 */
}

/* ついでに hover で少しだけ反応（任意） */
.btn--ghost:hover{
  background: rgba(255,255,255,.92);
}



/* ===== Hero：モザイク→1枚画像版 ===== */
.heroFarm__mosaic{
  padding: 0; /* 画像をドーンと入れるため */
}

.heroFarm__main{
  margin: 0;
  position: relative;
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  background: #ddd;
  z-index: 1;
}

/* 画像を“全部見せる”ために、枠を画像比率(3:2)に合わせる */
.heroFarm__main{
  aspect-ratio: 3 / 2; /* ← 1TOP.jpg が 2048×1365 ≒ 3:2 */
  width: 100%;
  overflow: hidden;
}

/* 枠いっぱいに表示（比率一致なので見切れない） */
.heroFarm__main img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 比率一致 → トリミングなし */
  display: block;
}


/* 文字の読みやすさ用：うっすら暗幕 */
.heroFarm__main::after{
  content:"";
  position:absolute;
  inset:0;
  /* background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12)); */
  pointer-events:none;
}

/* 既存の紙質テクスチャ（::before）が画像の上に乗るので弱める */
.heroFarm__mosaic::before{
  opacity: .25;
  z-index: 2;
}

/* 帯とふきだしを最前面に */
.heroFarm__ribbon,
.heroFarm__bubble{
  z-index: 3;
}


/* ===== ヒーロー上に“重ねる写真” ===== */
.heroFarm__mosaic{
  position: relative; /* 念のため（既にあってもOK） */
}

/* 重ね写真 共通 */
.heroFarm__thumb{
  position: absolute;
  z-index: 4; /* メイン画像より上 */
  padding: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,);
  border: 1px solid rgba(255,255,255,);
  /* box-shadow: 0 18px 40px rgba(0,0,0,.22); */
  backdrop-filter: blur(6px);
}

.heroFarm__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* 左下配置（今回追加） */
.heroFarm__thumb--bl{
  left: 18px;
  bottom: 18px;
  width: min(360px, 34%);
  aspect-ratio: 16 / 10;
}

/* リボン・吹き出しはさらに前面に（必要なら） */
.heroFarm__ribbon,
.heroFarm__bubble{
  z-index: 6;
}


/* 左下の家族写真：大きく＆下に突き抜け */
.heroFarm__thumb--bl{
  left: -86px;
  bottom: -56px;             /* ←マイナスで下に突き抜ける */
  width: min(520px, 48%);    /* ←大きくする（好みで調整） */
  aspect-ratio: 16 / 10;
  padding: 8px;              /* 枠も少し太く */
}

/* さらに“浮いてる感” */
/* .heroFarm__thumb--bl{
  box-shadow: 0 28px 70px rgba(0,0,0,.30);
} */


/* HeroのCTA（サンプル請求）だけ白背景にする */
.heroFarm__actions .btn--ghost{
  background: #fff;      /* 白に */
  /* border は .btn の設定（1px solid var(--line)）が効くので基本このままでOK */
}


/* レスポンシブで少し小さく */
@media (max-width: 980px){
  .heroFarm__thumb--bl{
    left: 12px;
    bottom: 12px;
    width: min(300px, 46%);
  }
}

@media (max-width: 520px){
  .heroFarm__thumb--bl{
    width: 48%;
    aspect-ratio: 4 / 3;
  }
}




/* SPの高さ調整 */
@media (max-width: 520px){
  .heroFarm__main img{
    height: 340px;
  }
}


/* レスポンシブ：帯とふきだしの位置を自然に */
@media (max-width: 980px){
  .heroFarm__bubble{
    position: static;
    transform: none;
    width: 100%;
    margin-top: 12px;
  }
  .heroFarm__bubble::after{ display:none; }
  .heroFarm__ribbon{
    top: 50%;
    width: calc(100% - 28px);
  }
}

@media (max-width: 520px){
  .heroFarm__mosaic{ padding: 12px; }
  .heroFarm__grid{ gap: 10px; }
  .heroFarm__tile{ border-radius: 16px; }
  .heroFarm__tile.t1,
  .heroFarm__tile.t2,
  .heroFarm__tile.t3{
    grid-column: 1 / 13;
    height: 160px;
  }
  .heroFarm__tile.t4,
  .heroFarm__tile.t5{
    grid-column: 1 / 13;
    height: 170px;
  }
  .heroFarm__ribbon{
    position: static;
    transform: none;
    margin-top: 10px;
  }
}


/* ===== “日常”っぽい：紙質背景＋うっすら装飾 ===== */
.section--daily{
  position: relative;
  overflow: hidden;
  /* ベースの紙色 */
  background: #fbf7ef;
}

/* 紙質感 + 雲/太陽などの“うっすら装飾”をまとめて */
.section--daily::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    /* 太陽（左上） */
    radial-gradient(circle at 10% 18%, rgba(227,139,44,.20) 0 16px, transparent 17px),
    radial-gradient(circle at 10% 18%, transparent 0 34px, rgba(227,139,44,.14) 35px 36px, transparent 37px),
    radial-gradient(circle at 10% 18%, transparent 0 56px, rgba(227,139,44,.10) 57px 58px, transparent 59px),

    /* 雲（左） */
    radial-gradient(circle at 9% 30%, rgba(0,0,0,.05) 0 26px, transparent 27px),
    radial-gradient(circle at 13% 28%, rgba(0,0,0,.05) 0 34px, transparent 35px),
    radial-gradient(circle at 17% 31%, rgba(0,0,0,.05) 0 26px, transparent 27px),
    radial-gradient(ellipse at 13% 33%, rgba(0,0,0,.05) 0 60px, transparent 61px),

    /* 雲（右上） */
    radial-gradient(circle at 92% 22%, rgba(0,0,0,.04) 0 28px, transparent 29px),
    radial-gradient(circle at 96% 20%, rgba(0,0,0,.04) 0 36px, transparent 37px),
    radial-gradient(circle at 99% 23%, rgba(0,0,0,.04) 0 28px, transparent 29px),
    radial-gradient(ellipse at 96% 25%, rgba(0,0,0,.04) 0 66px, transparent 67px),

    /* うっすらグリーンの面（雰囲気） */
    radial-gradient(circle at 18% 78%, rgba(47,107,79,.08) 0 140px, transparent 280px),
    radial-gradient(circle at 84% 70%, rgba(47,107,79,.06) 0 150px, transparent 320px),

    /* 紙の模様（斜めの繊維っぽさ） */
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 10px, transparent 10px 22px);

  opacity:.95;
  pointer-events:none;
}

/* 中身を装飾より前面に */
.section--daily > .container{
  position: relative;
  z-index: 1;
}

.section--daily::after{
  content:"";
  position:absolute;

  /* 画像の“箱”のサイズと位置 */
  right: 40px;
  bottom: 24px;
  width: 170px;
  height: 170px;           /* 縦も指定（比率は好みで） */

  /* 画像 */
  background: url("assets/トラ.jpg") no-repeat center / cover;

  /* 角丸＆影 */
  border-radius: 18px;     /* ←角丸 */
  /* box-shadow: 0 18px 40px rgba(0,0,0,.18); */
  border: 3px solid rgba(255,255,255,.75);

  opacity: .95;
  pointer-events:none;
  z-index: 1;
}

/* ===== SP：ヒーロー帯を中央寄せ + トラ画像を「米問屋の現場」の一番下へ ===== */
@media (max-width: 520px){

  /* ① SP時、帯（ribbon）を中央寄せ */
  .heroFarm__ribbon{
    margin: 10px auto 0;
    width: calc(100% - 24px);
    text-align: center;
  }

  /* ② 既存の「日常」セクションの疑似要素（section側）はSPでは消す */
  .section--daily::after{
    content: none;
  }

  /* ③ 「米問屋の現場」セクションの container の下にトラ画像を表示 */
  .section--daily .container::after{
    content:"";
    display:block;

    width: min(360px, 100%);
    aspect-ratio: 360 / 170;   /* 高さを比率で維持 */
    margin: 22px auto 0;       /* 下に追加するので上余白だけ */

    background: url("assets/トラ.jpg") no-repeat center / cover;
    border-radius: 18px;
    border: 3px solid rgba(255,255,255,.75);
    opacity: .95;

    box-sizing: border-box;
    pointer-events:none;
  }
}




/* ===== Sections ===== */
.section{padding:52px 0}
.section--soft{background:linear-gradient(0deg, rgba(255,255,255,.52), rgba(255,255,255,.52))}
.section--deep{
  background:var(--primary);
  position:relative;
  overflow:hidden;
}


/* デフォルト：SP用の下配置画像は非表示 */
.paper__cornerImgSpWrap{ display:none; }

@media (max-width: 520px){

  /* PC用：右上の小画像（absolute）をSPでは消す */
  .paper__cornerImg{ display:none; }

  /* 右上画像用に確保していた右paddingをSPでは戻す（被り・間延び防止） */
  .paper{ padding-right: 22px; } /* 好みで 20〜24px */

  /* SP用：split__right の下に出す画像を表示 */
  .paper__cornerImgSpWrap{
    display:block;
    margin: 14px auto 0;
    padding: 0 14px; /* 端の余白 */
  }

  .paper__cornerImgSp{
    display:block;
    width: min(180px, 100%);
    height: auto;
    margin: 0 auto;
    border-radius: 18px;
    border: 3px solid rgba(255,255,255,.75);
    opacity: .95;
  }
}


/* deep background pattern */
.section--deep::before{
  content:"";
  position:absolute;inset:-40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 2px, transparent 3px) 0 0/22px 22px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0/28px 28px;
  opacity:.9;
  pointer-events:none;
}
.section--deep > .container{position:relative}

.section__head{margin-bottom:18px}
.section__title{margin:0;font-size:28px;letter-spacing:-.01em}
.section__sub{margin:6px 0 0;color:var(--muted)}

.section__head--onDeep .section__title--onDeep,
.section__head--onDeep .section__sub--onDeep{
  color:#fff;
}
.section__sub--onDeep{opacity:.9}

/* ===== Cards / Grids ===== */
.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.card{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  /* box-shadow:0 14px 24px rgba(0,0,0,.06); */
}
.card__media img{width:100%;height:170px;object-fit:cover}
.card__body{padding:14px 14px 16px}
.card__title{margin:0 0 6px;font-size:16px}
.card__text{margin:0;color:var(--muted);font-size:14px}

/* ===== Split ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.paper{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  /* box-shadow:0 14px 26px rgba(0,0,0,.06); */
}
.paper__title{margin:0 0 10px;font-size:16px}
.list{margin:0;padding:0;list-style:none;color:var(--muted)}
.list li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(47,107,79,.22);
  border:2px solid rgba(47,107,79,.35);
  margin-top:6px;flex:0 0 auto;
}
.miniNote{
  margin-top:14px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(47,107,79,.08);
  border:1px solid rgba(47,107,79,.14);
}
.miniNote__title{margin:0 0 6px;font-weight:900;color:var(--primary);font-size:13px}
.miniNote__text{margin:0;color:var(--muted);font-size:13px}

.statRow{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:14px 0 16px;
}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 12px;
}
.stat__num{margin:0;font-weight:900;font-size:18px;color:var(--primary)}
.stat__label{margin:2px 0 0;color:var(--muted);font-size:12px}

/* ===== Pillars ===== */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.pillar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 16px;
  box-shadow:0 14px 26px rgba(0,0,0,.06);
  text-align:center;
}
.pillar__icon{
  width:56px;height:56px;border-radius:999px;
  margin:0 auto 10px;
  display:grid;place-items:center;
  background:rgba(47,107,79,.10);
  color:var(--primary);
  border:1px solid rgba(47,107,79,.18);
}
.pillar__title{margin:0 0 6px;font-size:16px}
.pillar__text{margin:0;color:var(--muted);font-size:14px}

/* ===== Products ===== */
.products{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.product{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px;
  /* box-shadow:0 14px 26px rgba(0,0,0,.06); */
}
.product__name{margin:0 0 6px;font-size:16px}
.product__desc{margin:0;color:var(--muted);font-size:14px}
.product__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
  font-size:12px;font-weight:800;
  padding:6px 10px;border-radius:999px;
  background:rgba(47,107,79,.08);
  border:1px solid rgba(47,107,79,.14);
  color:var(--primary);
}


#lineup .center{
  margin-top: 24px;
}




/* ===== Support cards (on deep) ===== */
.supportGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.supportCard{
  background:#fff;
  border-radius:var(--radius);
  padding:18px 16px;
  border:1px solid rgba(255,255,255,.28);
  /* box-shadow:0 18px 34px rgba(0,0,0,.18); */
}
.supportCard__title{margin:0 0 6px;font-size:16px}
.supportCard__text{margin:0;color:#4d4d4d;font-size:14px}
.deepCTA{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:18px;
}

/* ===== Flow ===== */
.flow{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.flow__item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 14px;
  /* box-shadow:0 14px 26px rgba(0,0,0,.06); */
  position:relative;
}
.flow__step{
  display:inline-flex;
  padding:6px 10px;border-radius:999px;
  background:rgba(227,139,44,.14);
  border:1px solid rgba(227,139,44,.26);
  color:var(--accent);
  font-weight:900;
  font-size:12px;
}
.flow__title{margin:10px 0 6px;font-size:15px}
.flow__text{margin:0;color:var(--muted);font-size:13px}


/* ===== Flow：矢印を追加（01〜03の右側だけ） ===== */
.flow__item:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-10px;                 /* gapの中央に出したいのでマイナス */
  width:14px;
  height:14px;
  border-top:3px solid var(--primary);   /* 緑 */
  border-right:3px solid var(--primary); /* 緑 */
  transform: translateY(-50%) rotate(45deg);
  opacity:.95;
  pointer-events:none;
  z-index:3;
}

/* 縦並びになるSPでは矢印は消す */
@media (max-width: 980px){
  .flow__item::after{ display:none; }
}



/* ===== Contact ===== */
.contact{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  align-items:start;
}
.contact__buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.contact__note{margin:10px 0 0;color:var(--muted);font-size:12px}

/* ===== Access ===== */
.access{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.map{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 14px 26px rgba(0,0,0,.06);
}
.map__placeholder{
  height:320px;
  display:grid;place-items:center;
  background:
    linear-gradient(0deg, rgba(47,107,79,.08), rgba(47,107,79,.04)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 10px, transparent 10px 22px);
  color:var(--muted);
  text-align:center;
}
.access__info{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px;
  /* box-shadow:0 14px 26px rgba(0,0,0,.06); */
}
.access__name{margin:0 0 8px;font-size:16px}
.access__text{margin:0;color:var(--muted)}
.access__buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}



.map__embed{
  width: 100%;
  aspect-ratio: 16 / 10;   /* 好みで 16/9 でもOK */
  border-radius: 18px;
  overflow: hidden;        /* 角丸をiframeに効かせる */
  /* box-shadow: 0 12px 26px rgba(0,0,0,.08); */
  background: #eee;
}

.map__embed iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


.access__about{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,17,17,.08);
}

.access__aboutTitle{
  font-size: 13px;
  letter-spacing: .06em;
  margin: 0 0 6px;
  opacity: .85;
}

.access__aboutText{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  opacity: .9;
}



/* ===== Footer ===== */
.footer{
  padding:18px 0;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.35);
}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer__small{margin:0;color:var(--muted);font-size:12px}
.toTop{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;
  background:rgba(47,107,79,.10);
  border:1px solid rgba(47,107,79,.18);
  color:var(--primary);
  font-weight:900;font-size:12px;
}


.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.footer__left{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
}

.footer__nav a{
  font-size: 13px;
  text-decoration:none;
  color: var(--text);
  opacity: .9;
}

.footer__nav a:hover{
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 680px){
  .footer__inner{
    align-items:flex-start;
  }
  .toTop{
    margin-left: auto;
  }
}




/* ===== Responsive ===== */
@media (max-width: 980px){
  .nav{display:none} /* シンプルに非表示（必要ならハンバーガー化できます） */
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .split{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .products{grid-template-columns:1fr}
  .supportGrid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .access{grid-template-columns:1fr}
  .collage__item img{height:160px}
  .collage__item--1 img,.collage__item--4 img{height:190px}
  .hero__title{font-size:36px}
}

@media (max-width: 520px){
  .header__cta{display:none} /* モバイルはCTA非表示（必要なら残してください） */
  .hero{padding-top:28px}
  .hero__title{font-size:32px}
  .ribbon{font-size:12px;padding:9px 12px}
}


/* 右上に画像を置くための土台 */
.paper{
  position: relative;
  /* 画像に文字がかぶらないように余白を足す（必要なら数値調整） */
  padding-right: 140px;
  padding-top: 12px;
}

/* 右上のご飯画像 */
.paper__cornerImg{
  position: absolute;
  top: 28px;
  right: 28px;

  width: 110px;
  height: 78px;

  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.9);
  /* box-shadow: 0 10px 20px rgba(0,0,0,.12); */

  pointer-events: none; /* 画像がクリック邪魔しない */
}

/* スマホでは少し小さく（or 消す） */
@media (max-width: 560px){
  .paper{
    padding-right: 16px; /* 右余白戻す */
  }
  .paper__cornerImg{
    width: 88px;
    height: 62px;
    top: 10px;
    right: 10px;
    opacity: .95;
  }
}


/* ===== pillars：カード内に写真＋丸アイコン（重ね） ===== */
.pillar{
  overflow: hidden; /* アイコンの影が切れるなら外してOK */
}

.pillar__media{
  position: relative;
  margin-bottom: 22px; /* アイコン分の余白 */
}

.pillar__photo{
  display: block;
  width: 100%;
  height: 170px;        /* 好みで 160〜220 */
  object-fit: cover;
  border-radius: 16px;  /* 写真の角丸 */
}

/* 写真に重なる丸アイコン */
.pillar__media .pillar__icon{
  position: absolute;
  left: 50%;
  bottom: -18px;                 /* 写真からはみ出して重ねる */
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  /* box-shadow: 0 10px 24px rgba(0,0,0,.16); */
  color: #2f6b55;                /* 緑系（サイトのトーンに合わせて） */
}

.pillar__title{
  margin-top: 6px; /* 既存で詰まってたら調整 */
}

/* SP微調整 */
@media (max-width: 640px){
  .pillar__photo{ height: 160px; }
}

.contact{
  display:grid;
  /* 左右が離れすぎないように、全体幅を少し絞って中央寄せ */
  max-width: 980px;
  margin-inline: auto;

  /* 伸びきらない列幅にして“中央に集まる”見え方に */
  grid-template-columns: minmax(0, 520px) minmax(0, 420px);
  justify-content: center;

  gap: 28px;
  align-items: start;
}


/* 店主紹介（Contactの下） */
.owner{
  margin-top: 22px;
}

.ownerCard{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 18px;
  align-items: center;

  /* background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius); */
  padding: 18px;
}

.ownerCard__media{
  width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
}

.ownerCard__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ownerCard__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}

.ownerCard__name{
  margin: 0 0 8px;
  font-size: 18px;
}

.ownerCard__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 720px){
  .ownerCard{
    flex-direction: column;
    align-items: flex-start;
  }
  .ownerCard__media{
    width: 100%;
    max-width: 420px;
  }
}


.contact{
  display: grid;
  /* 右側（お問い合わせ例）を広めにして、本文が1行で入りやすく */
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px){
  .contact{ grid-template-columns: 1fr; }
}


/* こだわりカード（pillars）の影を消す */
.pillars .pillar{
  box-shadow:none;
}

.map,
.pillar{
  box-shadow: none !important;
}


/* ================================
   Header (brand + center mark)
   + SP Hamburger Menu
   ================================ */

.header__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--c-text);
  line-height:1.15;
}
.brand__name{
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
}
.brand__sub{
  margin-top:4px;
  font-size:12px;
  color:var(--c-muted);
}

.mark{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-decoration:none;

}
.mark__img{
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
}

.header__right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
}




/* =========================================================
   SP Header: brand左寄せ + ハンバーガー内にナビ
   （既存CSSの上書き用：style.css最下部に置く）
   ========================================================= */

.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  --header-h: 72px; /* SPでのドロワーの余白基準 */
}

/* checkboxは非表示 */
.navToggle{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* overlay/ burger はPCでは出さない */
.burger,
.drawerOverlay{
  display: none;
}

/* ドロワー扱いのベース（PCは通常表示のまま） */
.drawer{
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* ===== SP ===== */
@media (max-width: 900px){

  /* ヘッダー並び：左（brand） / 右（mark + burger） */
  .header__inner{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
  }

  /* 既存の「brandを中央寄りにする」上書きを無効化 */
  .brand{
    margin: 0;
    margin-right: auto;      /* 左寄せ固定 */
    align-items: flex-start; /* 左揃え */
    text-align: left;
    max-width: 70%;
  }
  .brand__name{ font-size: 18px; }
  .brand__sub{
    display: block;
    font-size: 11px;
    line-height: 1.25;
  }

  .mark{
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  /* ハンバーガーボタン */
  .burger{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    flex: 0 0 auto;
  }
  .burger span{
    display: block;
    width: 20px;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .burger span + span{ margin-top: 4px; }

  /* SPはヘッダー右側（nav+cta）をドロワー化 */
  .header__right{
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    height: 100vh;
    padding: calc(var(--header-h) + 10px) 16px 18px; /* ヘッダー分の余白 */
    background: var(--paper);
    border-left: 1px solid var(--line);
    z-index: 900;

    display: flex;
    flex-direction: column;
    gap: 14px;

    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* ドロワー内：縦並び */
  .header__right .nav{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .header__right .nav__link{
    padding: 10px 8px;
    border-radius: 10px;
  }

  .header__right .header__cta{
    display: grid;
    gap: 10px;
    margin-left: 0;
  }
  .header__right .header__cta .btn{
    width: 100%;
    justify-content: center;
  }

  /* overlay */
  .drawerOverlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  /* 開く */
  .navToggle:checked ~ .drawerOverlay{
    opacity: 1;
    pointer-events: auto;
  }
  .navToggle:checked ~ .drawer{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ハンバーガー → × */
  .navToggle:checked + .burger span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  .navToggle:checked + .burger span:nth-child(2){
    opacity: 0;
  }
  .navToggle:checked + .burger span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }
}


/* SP：ヘッダー左右の余白 */
@media (max-width: 900px){
  .header .container{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ヘッダー中央にロゴを固定 */
.header__inner{
  position: relative;
}

.mark{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
}

.mark img{
  display: block;
  height: 34px;   /* 好みで調整 */
  width: auto;
}



:root{
  /* 既存の変数たち… */
  --primary: #3f6e5a;

  /* ★追加（ハンバーガーの線の色用） */
  --green: var(--primary);
}

/* ===== Header ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(249,246,238,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
}

/* 左：屋号 */
.brand{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--text);
}
.brand__name{
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 18px;
}
.brand__sub{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}

/* 中央：ロゴ */
.mark{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mark img{
  width: 32px;
  height: 32px;
  display: block;
}

/* 右（PC） */
.header__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav{
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__link{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  opacity: .88;
}
.nav__link:hover{ opacity: 1; }
.header__cta{
  display: flex;
  gap: 10px;
}

/* SP：ハンバーガー */
.navToggle{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.navBtn{
  display: none; /* ←SPで表示 */
  grid-column: 3;
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
}
.navBtn span{
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
}
.navBtn span::before,
.navBtn span::after{
  content:"";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
}
/* ←「もっと三」：間隔を詰める */
.navBtn span::before{ top: -5px; }
.navBtn span::after { top:  5px; }

.navOverlay{
  display: none; /* ←SPで表示 */
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,.35);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.spMenu{
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 340px);
  height: 100dvh;
  background: #fff;
  z-index: 90;
  transform: translateX(105%);
  transition: transform .25s ease;
  padding: 86px 18px 22px; /* ヘッダー分だけ上を空ける */
  overflow: auto;
  border-left: 1px solid var(--line);
}

/* SPメニューの中身 */
.spNav{ display: grid; }
.spNav__link{
  display: block;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.spNav__link:active{ opacity: .7; }
.spCta{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

/* 開閉（チェックで制御） */
.navToggle:checked + .navBtn span{ background: transparent; }
.navToggle:checked + .navBtn span::before{
  top: 0;
  transform: rotate(45deg);
}
.navToggle:checked + .navBtn span::after{
  top: 0;
  transform: rotate(-45deg);
}
.navToggle:checked ~ .navOverlay{
  opacity: 1;
  pointer-events: auto;
}
.navToggle:checked ~ .spMenu{
  transform: translateX(0);
}

/* SP表示切り替え */
@media (max-width: 880px){
  .header__inner{
    padding: 12px 10px; /* ←左右に余白 */
  }
  .header__right{ display: none; } /* PC用を非表示 */
  .navBtn{ display: inline-flex; }
  .navOverlay{ display: block; }
  .spMenu{ display: block; }

  .brand__name{ font-size: 20px; }
}


/* SPメニュー内の「×」閉じるボタン */
.spMenu__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.spMenu__close::before,
.spMenu__close::after{
  content: "";
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: 999px;
  position: absolute;
}

.spMenu__close::before{ transform: rotate(45deg); }
.spMenu__close::after { transform: rotate(-45deg); }


@media (max-width: 520px){
  /* SPはトップ画像を「全体表示」 */
  .heroFarm__main img{
    height: 340px;           /* 高さは維持（好みで auto でもOK） */
    object-fit: contain;     /* 切れずに全体が入る */
    object-position: center;
  }
}

@media (max-width: 520px){
  .heroFarm__main img{
    height: auto;
    object-fit: contain;
  }
}


/* リボン下の家族写真（PCは非表示） */
.heroFarm__ribbonFamily{
  display: none;
}

/* SPのみ表示 */
@media (max-width: 768px){
  .heroFarm__ribbonFamily{
    display: block;
    width: min(260px, 100%);
    margin: 10px auto 0; /* テキストの下に余白 */
  }
  .heroFarm__ribbonFamily img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.85);
  }

  /* 既存のモザイク内「左下の家族写真」をSPでは消す（二重防止） */
  .heroFarm__thumb--bl{
    display: none;
  }

  /* 念のため：リボンの内側余白を少し増やす（画像分） */
  .heroFarm__ribbon{
    padding-bottom: 14px;
  }
}


/* ===== SP: ヒーロー画像の背面に出ている白いボックスを消す ===== */
/* PCでは非表示（SPでのみ本文下に表示したい場合） */
.heroFarm__ribbonFamily{ display:none; }

@media (max-width: 520px){
  /* 画像の後ろにある白い枠（背景/枠線/影/余白）を消す */
  .heroFarm__mosaic{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  .heroFarm__mosaic::before{ display:none; }

  /* テキスト下に置く家族写真（SPのみ表示） */
  .heroFarm__ribbonFamily{
    display:block;
    margin: 12px auto 0;
    width: 100%;
  }
  .heroFarm__ribbonFamily img{
    width:100%;
    height:auto;
    display:block;
    border-radius: 18px;
  }

  /* もし家族写真が二重表示なら、左下サムネを消す（必要ならコメント解除） */
  /* .heroFarm__thumb--bl{ display:none; } */
}


/* ===== SP：リボン内テキストを中央寄せ ===== */
@media (max-width: 520px){
  .heroFarm__ribbon{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* 念のため（幅が100%じゃない場合に効く） */
  .heroFarm__ribbonKicker,
  .heroFarm__ribbonTitle,
  .heroFarm__ribbonSub{
    text-align: center;
  }
}



/* ===== Flow：SP(縦並び)は「下向き矢印」にする ===== */
@media (max-width: 980px){

  /* 矢印ぶんの余白（カード同士の間隔） */
  .flow{
    gap: 34px;
  }

  /* 右向き矢印 → 下向き矢印に上書き */
  .flow__item:not(:last-child)::after{
    display: block;

    /* 位置：カード下の中央 */
    top: auto;
    right: auto;
    left: 50%;
    bottom: -18px;

    /* 形：PCと同じ“角”の矢印を下向きに */
    width: 14px;
    height: 14px;
    border-top: 0;
    border-right: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    transform: translateX(-50%) rotate(45deg);
  }
}


/* ===== Flow：SPはボックス内を全て中央揃え ===== */
@media (max-width: 980px){
  .flow__item{
    text-align: center;
    justify-items: center; /* gridの時に効く */
    padding-left: 18px;    /* 左寄り見え防止（必要なら） */
    padding-right: 18px;
  }

  /* 01/02/03/04 の丸（step）を中央へ */
  .flow__step{
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* タイトル・本文も中央 */
  .flow__title,
  .flow__text{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ===== SP：見出し＆取扱商品＆ご注文の流れを中央寄せ ===== */
@media (max-width: 520px){

  /* 1) 各セクション見出し（h2 + サブ）を中央揃え */
  .section__head{
    text-align: center;
  }
  .section__title{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .section__sub{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }



  /* 3) ご注文の流れ：ボックス内（数字/タイトル/文章）を中央揃え */
  #flow .flow{
    grid-template-columns: 1fr; /* SPは縦並び */
    gap: 44px;                 /* 矢印分の余白 */
  }
  #flow .flow__item{
    text-align: center;
  }

  /* 4) SPの矢印：ボックス下部に「下向き」 */
  #flow .flow__item:not(:last-child)::after{
    top: auto;
    right: auto;
    left: 50%;
    bottom: -26px;

    width: 16px;
    height: 16px;

    /* いったんリセットして下向き矢印を作る */
    border: 0;
    border-right: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);

    transform: translateX(-50%) rotate(45deg);
    opacity: .9;
  }
}


/* ===== 取扱商品（#lineup）を中央揃え ===== */
@media (max-width: 520px){
#lineup .section__head{
  text-align: center;
}

/* 2カラムの塊そのものを中央に寄せる */
#lineup .products{
  max-width: 980px;  /* 好みで 860〜1100px くらいで調整OK */
  margin: 0 auto;
}

/* カード内テキストを中央揃え */
#lineup .product{
  text-align: center;
}

/* タグ（flex）も中央寄せ */
#lineup .product__tags{
  justify-content: center;
}
}

/* SP：#service の「相談してみる」ボタンだけ中央寄せ */
@media (max-width: 980px){
  #service .split__left > a.btn.btn--primary{
    display: flex;          /* ブロック化して */
    width: fit-content;     /* 中身幅にする */
    margin: 12px auto 0;    /* 左右autoで中央寄せ */
  }
}


/* SP：取扱商品（#lineup）のカードを左右いっぱいにしない */
@media (max-width: 520px){
  #lineup .products{
    padding: 0 12px;   /* ←ここを 8〜20px で好みに調整 */
  }
}

/* SP：お問い合わせボタン2つを中央揃え */
@media (max-width: 900px){
  .contact__buttons{
    justify-content: center;
  }
}

/* SP：Access のボタンを中央揃え */
@media (max-width: 900px){
  .access__buttons{
    justify-content: center;
  }
}

/* SP：注意書き（※サンプル請求〜）を中央揃え */
@media (max-width: 900px){
  .contact__note{
    text-align: center;
  }
}


/* ==========================
   PC：ロゴ左 / ナビ+CTA右寄せ
   ========================== */
@media (min-width: 981px){
  .header__inner{
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* ナビを右へ */
  .nav{
    margin-left: auto;
    justify-content: flex-end;
  }

  /* CTAも右端側に並べる */
  .header__cta{
    margin-left: 12px;
    display: flex;
    gap: 10px;
  }

  /* もしロゴ/マークを中央固定（absolute）してるなら解除 */
  .header .logo,
  .header .mark{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ==========================
   PC：ロゴ中央固定 / ナビ+CTA 右寄せ
   ========================== */
@media (min-width: 901px){

  /* 右端まで使いたい場合（ヘッダーだけフル幅） */
  .header .container.header__inner{
    max-width: none;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .header__inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* ロゴ（アイコン）を中央固定 */
  .mark{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  /* 右側（ナビ＋CTA）を右端へ */
  .header__right{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
  }

  .header__right .nav{
    margin-left: 0;
    flex-wrap: nowrap; /* 折り返したいなら消してOK */
  }
}

/* PC：ヘッダーだけ幅を少し狭く＆左右余白を付ける */
@media (min-width: 901px){
  .header .container.header__inner{
    max-width: 1200px;   /* ←ここを 1000〜1300px で好みに調整 */
    margin: 0 auto;
    padding: 10px 28px;  /* ←左右余白（20〜40pxくらいで調整） */
  }
}

/* PC：ロゴ(.mark)だけをど真ん中 / 他(brand・ナビ・CTA)はそのまま */
@media (min-width: 901px){

  /* 左右に余白あり（端ピッタリにしない） */
  .header .container.header__inner{
    max-width: 1200px;     /* 好みで 1100〜1300px */
    margin: 0 auto;
    padding: 12px 28px;    /* 左右余白 */
  }

  /* 3カラムで “中央だけ固定” */
  .header__inner{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 16px;
  }

  /* 左テキストは左に（中央寄せ上書きを無効化） */
  .brand{
    justify-self: start !important;
    margin-right: 0 !important;
    text-align: left;
  }

  /* ロゴは中央（absolute固定を完全に無効化） */
  .mark{
    justify-self: center;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* 右側は右に（位置はそのまま） */
  .header__right{
    justify-self: end;
    margin-left: 0 !important;
  }
}

/* PC：取扱商品 / 4つのサポート のカード群を“少し細く”して左右余白を綺麗に */
@media (min-width: 901px){
  #lineup .products,
  #case .supportGrid{
    max-width: 1120px;      /* ← 1000〜1200px で好みに調整 */
    margin-inline: auto;    /* 中央寄せ */
    padding-inline: 12px;   /* 端の当たりを柔らかく（任意） */
  }

  /* ついでに間隔を少しだけ上品に（任意） */
  #lineup .products{ gap: 18px; }
  #case .supportGrid{ gap: 18px; }
}

/* PC：ご注文の流れ（ボックス内の数字・タイトル・本文を中央揃え） */
@media (min-width: 981px){
  #flow .flow__item{
    text-align: center;
  }

  /* 01/02/03/04 の丸を中央に（念のため） */
  #flow .flow__step{
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* タイトル・本文も中央 */
  #flow .flow__title,
  #flow .flow__text{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}



.toTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:999px;
  background:rgba(47,107,79,.10);
  border:1px solid rgba(47,107,79,.18);
  color:var(--primary);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  white-space:nowrap; /* ← 折り返し防止 */
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.toTop::before{
  content:"↑";
  font-size:14px;
  line-height:1;
}
.toTop:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.10);
  background:rgba(47,107,79,.14);
}
.toTop:focus-visible{
  outline:2px solid rgba(227,139,44,.55);
  outline-offset:3px;
}

@media (max-width: 680px){
  .footer__inner{
    align-items:flex-start;
    flex-direction: column; /* ← SPは縦積みで綺麗に */
    gap: 14px;
  }
  .toTop{
    margin-left: 0;       /* ← auto解除 */
    align-self: center;   /* ← ボタンだけ中央へ */
  }
}

/* PC：取扱商品 / 4つのサポート の見出し（タイトル＋サブ）を中央揃え */
@media (min-width: 901px){
  #lineup .section__head,
  #case  .section__head{
    text-align: center;
  }

  /* サブ文が改行した時も中央で綺麗に */
  #lineup .section__sub,
  #case  .section__sub{
    margin-left: auto;
    margin-right: auto;
  }
}


/* ===== FIX: 横スクロール防止（SPメニューのはみ出し対策） ===== */
html, body{
  overflow-x: hidden;
}
@supports (overflow: clip){
  html, body{ overflow-x: clip; } /* 対応ブラウザはこっちがより綺麗 */
}

/* off-canvas を 105% → 100% に（はみ出しを作らない） */
.spMenu{ transform: translateX(100%); }

@media (max-width: 900px){
  .header__right{ transform: translateX(100%); }
}