@charset "UTF-8";
/* ===========================================================
   こだわり・製法（kodawari.html）専用｜261010 新設
   ・枝豆／里芋の切替（タブ）
   ・里芋パネルの型（ページ頭は page-story.css の .phead、想いは .story を再利用）
   theme-f.css・page-story.css は変更しない。色・書体はトークンのみ（直値なし）。
   =========================================================== */

/* ---------- 切替：罫1本の上に2語。選択中だけ墨＋深緑2px（JSなしでは2つのページ内リンク） ---------- */
.kd-switch{display:flex;margin-top:28px;border-bottom:1px solid var(--line-2);scroll-margin-top:100px}
.kd-tab{display:inline-flex;align-items:baseline;justify-content:center;gap:.9rem;min-width:13em;min-height:56px;padding:.95rem 1.8rem .8rem;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:var(--f-min);font-weight:500;font-size:1.12rem;letter-spacing:.28em;line-height:1.6;color:var(--sub);transition:color .35s,border-color .35s}
.kd-tab .en{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:.9rem;letter-spacing:.12em;color:var(--kin-t)}
.kd-tab:hover{color:var(--sumi);border-bottom-color:var(--line-2)}
.kd-js:not(.kd-sat) .kd-tab[data-kd-tab="edamame"],
.kd-js.kd-sat .kd-tab[data-kd-tab="satoimo"]{color:var(--sumi);border-bottom-color:var(--green)}
/* 初回描画前に <head> の1行が html に kd-js（＋#satoimo なら kd-sat）を付ける＝ちらつかない */
.kd-js:not(.kd-sat) #satoimo,.kd-js.kd-sat #edamame{display:none}
.kd-panel{scroll-margin-top:150px}

/* ---------- 里芋：ページ頭（.phead 再利用）。株の根元に焦点を合わせる ---------- */
.sat-head .field img{object-position:50% 64%}

/* ---------- 受け継ぐ：写真を左端まで流し、右に「約16年前、」を大きく ---------- */
.sat-roots{padding:40px 0 170px}
.sat-roots .wrap-w{display:grid;grid-template-columns:minmax(0,56%) 1fr;gap:0 88px;align-items:center}
.sat-roots .pic{aspect-ratio:3/2;margin-left:calc(-1 * (max(0px, (100vw - var(--maxw-w)) / 2) + 32px))}
.sat-roots .pic img{object-position:50% 40%}
.sat-roots .ey{margin-bottom:1.8rem}
.sat-year .yr{display:flex;align-items:baseline;font-family:var(--f-min);font-weight:500;font-size:1.5rem;letter-spacing:.14em;line-height:1.2;color:var(--sumi);margin-bottom:2rem;padding-bottom:1.9rem;border-bottom:1px solid var(--line-2)}
.sat-year .yr .num{font-weight:300;font-size:clamp(4.6rem,7.2vw,6.8rem);letter-spacing:.02em;line-height:1;color:var(--green);margin:0 .1em 0 .06em}
.sat-year .body{display:block;font-family:var(--f-min);font-weight:500;font-size:1.14rem;letter-spacing:.12em;line-height:2.2;color:var(--sumi);max-width:22em}

/* ---------- 食感：SILVER面。特性の一文を大きく、3つの特性語だけ深緑＋金の細線（絹糸） ---------- */
.sat-kinu{background:var(--face);padding:0 0 150px}
.sat-kinu .wrap-w{display:grid;grid-template-columns:1fr minmax(0,38%);gap:0 96px;align-items:start}
.sat-kinu .txt{padding-top:140px}
.sat-kinu .pic{aspect-ratio:4/5;margin-top:-90px;border:2px solid var(--white);border-bottom:0}
.sat-kinu .pic img{object-position:50% 50%}
.sat-quote{font-family:var(--f-min);font-weight:500;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.12em;line-height:2.15;color:var(--sumi);margin:1.4rem 0 2.6rem;max-width:25em}
.sat-quote em{font-style:normal;color:var(--green);text-decoration:underline;text-decoration-color:var(--kin);text-decoration-thickness:1px;text-underline-offset:.42em}
.sat-kinu .hp{max-width:32em}

/* ---------- 風土：水（左）と土（右）のあいだに縦組みの一文を立てる ---------- */
.sat-terroir{padding:150px 0}
.sat-terroir .wrap-w{display:grid;grid-template-columns:minmax(0,24%) auto minmax(0,1fr);gap:0 64px;align-items:start}
.sat-terroir .mid{grid-column:2;grid-row:1;display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start}
.sat-terroir .mid .vh{height:auto}
.sat-terroir .land{grid-column:3;grid-row:1;padding-top:64px}
.sat-terroir .p-field{aspect-ratio:4/3}
.sat-terroir .p-water{grid-column:1;grid-row:1;aspect-ratio:3/4;margin-top:220px}
.sat-terroir .hp{margin-top:2.4rem;max-width:26em}

/* ---------- 調理：5つの動詞を薄罫で仕切る縦の品書き。下に料理写真を段違いで ---------- */
.sat-kitchen{border-top:1px solid var(--line);padding:140px 0 150px}
.sat-kitchen .ey{text-align:center;margin-bottom:3rem}
.sat-verbs{display:flex;flex-direction:row-reverse;justify-content:center;align-items:stretch}
.sat-verbs span{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--f-min);font-weight:500;font-size:clamp(1.6rem,2.5vw,2.25rem);letter-spacing:.26em;line-height:1.6;color:var(--sumi);height:6.6em;padding:0 clamp(1.2rem,2.6vw,2.6rem);border-left:1px solid var(--line-2);font-feature-settings:"palt" 0}
.sat-verbs span:first-child{border-right:1px solid var(--line-2)}
.sat-kitchen .hp{margin:3.6rem auto 0;max-width:30em;text-align:center}
.sat-kitchen .dishes{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 56px;margin-top:96px;align-items:start}
.sat-kitchen .dish-a{aspect-ratio:4/3}
.sat-kitchen .dish-b{aspect-ratio:1/1;margin-top:140px}

/* ---------- 目指すこと：.story.flip（旗を縦長で） ---------- */
.sat-vision{padding-top:40px}
.sat-vision .pic img{object-position:50% 40%}

/* ---------- 結び：.contact 再利用。枝豆へ戻る導線 ---------- */
.sat-switch{margin-top:2.6rem}

/* ===================== ≤1080 ===================== */
@media (max-width:1080px){
  .sat-roots .wrap-w{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
  .sat-kinu .wrap-w{gap:0 48px}
  .sat-terroir .wrap-w{grid-template-columns:auto minmax(0,1fr);gap:0 40px}
  .sat-terroir .mid{grid-column:1}
  .sat-terroir .land{grid-column:2;padding-top:24px}
  .sat-terroir .p-water{grid-column:1/-1;grid-row:2;width:46%;margin:56px 0 0 auto;aspect-ratio:4/3}
}

/* ===================== ≤768（SP） ===================== */
@media (max-width:768px){
  .kd-switch{margin-top:14px;scroll-margin-top:76px}
  .kd-tab{flex:1 1 50%;min-width:0;min-height:52px;padding:.85rem .4rem .7rem;gap:.55rem;font-size:1rem;letter-spacing:.2em}
  .kd-tab .en{font-size:.8rem;letter-spacing:.08em}
  .kd-panel{scroll-margin-top:124px}

  .sat-roots{padding:8px 0 96px}
  .sat-roots .wrap-w{grid-template-columns:1fr;gap:0}
  .sat-roots .pic{margin:0 -20px;aspect-ratio:4/3}
  .sat-roots .txt{padding-top:44px}
  .sat-year .yr{font-size:1.25rem;margin-bottom:1.6rem;padding-bottom:1.5rem}
  .sat-year .yr .num{font-size:4.2rem}
  .sat-year .body{font-size:1.02rem;letter-spacing:.1em;line-height:2.1}

  .sat-kinu{padding:0 0 88px}
  .sat-kinu .wrap-w{grid-template-columns:1fr}
  .sat-kinu .pic{order:-1;width:78%;margin:-48px 0 0 auto;aspect-ratio:4/3;border-width:8px}
  .sat-kinu .txt{padding-top:44px}
  .sat-quote{font-size:1.16rem;line-height:2.1;margin-bottom:1.8rem}

  .sat-terroir{padding:88px 0}
  .sat-terroir .wrap-w{grid-template-columns:1fr;gap:0}
  .sat-terroir .mid,.sat-terroir .land,.sat-terroir .p-water{grid-column:1;grid-row:auto}
  .sat-terroir .mid{justify-content:flex-end;gap:20px;margin-bottom:40px}
  .sat-terroir .land{padding-top:0}
  .sat-terroir .hp{margin-top:1.6rem}
  .sat-terroir .p-water{width:56%;margin:40px 0 0 auto}

  .sat-kitchen{padding:88px 0}
  .sat-kitchen .ey{margin-bottom:2rem}
  .sat-verbs span{font-size:1.4rem;letter-spacing:.2em;padding:0 .7rem}
  .sat-kitchen .hp{margin-top:2.4rem;text-align:left}
  .sat-kitchen .dishes{gap:0 12px;margin-top:48px}
  .sat-kitchen .dish-b{margin-top:56px}

  .sat-vision{padding-top:24px}
  .sat-switch{margin-top:2rem}
}

/* 261011 CEO指摘：里芋側の改行が語の途中で切れる→文節で折り返す。.ph＝文節のかたまり（途中で折らない）。auto-phraseはChrome/Edge、.phは全ブラウザ向け */
#satoimo p{word-break:auto-phrase;line-break:strict}
#satoimo .ph{display:inline-block}