/* =========================================================
   sections — 01〜05 と 締め
   ========================================================= */
/* =========================================================
   01 今週の中身
   ========================================================= */
.week-band{margin-top:56px}
.week-band .ph{aspect-ratio:21/8}
/* 6品なので3列で割り切る。
   auto-fill だと 1180px 幅で4列になり、2行目に空セルが2つ残って、
   罫線色（--line）の背景がベタの灰色の塊として見えていました。
   品目数を変えるときは、この列数も割り切れる数に合わせること */
.week-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;
}
.week-card{background:var(--bg); padding:30px 28px 32px}
/* 品目のサムネイル（thumbs.js が実物のモデルから描く。写真に差し替え可） */
.ball{display:block; width:116px; height:auto; margin:-6px 0 0 -10px}
.week-card h3{font-family:"Shippori Mincho",serif; font-weight:600; font-size:21px; letter-spacing:.08em; margin-top:18px}
/* 収穫日は「6時間」を裏づける根拠なので、読める大きさで出す */
.week-meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--dim);
}
.week-card p{font-size:13px; color:var(--soft); margin-top:14px; line-height:1.95}
.week-foot{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:48px}
.week-foot .stamp{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.12em; color:var(--dim)}

/* =========================================================
   02 収穫から6時間
   ========================================================= */
.sec--soil{background:var(--forest); overflow:hidden}
.soil-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.soil-bg.in{opacity:.30}
/* 文字を読ませるための覆い */
.soil-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(31,71,46,.94) 0%, rgba(31,71,46,.80) 34%, rgba(31,71,46,.46) 62%, rgba(31,71,46,.66) 100%),
    linear-gradient(rgba(31,71,46,.90), rgba(31,71,46,.48) 26%, rgba(31,71,46,.44) 74%, rgba(31,71,46,.94));
}
.sec--soil .wrap{position:relative; z-index:2}
.compare{margin-top:64px; display:grid; gap:26px}
.compare-row{display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:center}
.compare-label{font-size:13px; color:var(--soft); letter-spacing:.04em}
.compare-bar{position:relative; height:34px}
.compare-bar i{
  display:block; height:100%; border-radius:3px;
  background:repeating-linear-gradient(90deg, rgba(241,235,222,.16) 0 7px, transparent 7px 14px);
  border:1px solid var(--line);
  width:var(--w); transform-origin:left; transform:scaleX(0);
  transition:transform 1.5s var(--ease);
}
.compare-row.in .compare-bar i{transform:scaleX(1)}
.compare-row.ours .compare-bar i{
  background:linear-gradient(90deg, var(--leaf-bright), #5E9B3E); border-color:transparent;
}
.compare-bar b{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.1em;
  color:var(--soft); white-space:nowrap; font-weight:500;
  left:calc(var(--w) + 16px);
}
/* バーが端まで届く行は、数値をバーの内側に置く */
.compare-row.wide .compare-bar b{left:auto; right:14px; color:var(--ink)}
.compare-row.ours .compare-bar b{color:var(--leaf-bright)}

.timeline{margin-top:84px; border-top:1px solid var(--line)}
/* 罫線は wrap いっぱいに引き、文字だけ左に寄せる。
   説明を 1fr にすると 1440px で 800px 超になり、時刻から説明までの
   視線移動が長くなっていました。読み物は 600px までに収める */
.tl-row{
  display:grid; grid-template-columns:96px 132px minmax(0,600px); gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.tl-time{font-family:"JetBrains Mono",monospace; font-size:17px; letter-spacing:.08em; color:var(--acc)}
.tl-name{font-family:"Shippori Mincho",serif; font-weight:600; font-size:17px; letter-spacing:.1em}
.tl-desc{font-size:13px; color:var(--soft); line-height:1.95}

.figures{display:flex; flex-wrap:wrap; gap:64px; margin-top:72px}
.fig b{
  display:block; font-family:"Shippori Mincho",serif; font-weight:600;
  font-size:clamp(44px,6vw,76px); letter-spacing:.02em; line-height:1.1; color:var(--ink);
}
.fig b em{font-style:normal; font-size:.42em; margin-left:6px; color:var(--acc)}
.fig span{
  display:block; margin-top:10px; font-family:"JetBrains Mono",monospace;
  font-size:12px; letter-spacing:.14em; color:var(--dim);
}

/* =========================================================
   03 つくる人
   ========================================================= */
.growers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px; margin-top:60px}
.grower .ph{aspect-ratio:4/5}
.grower h3{font-family:"Shippori Mincho",serif; font-weight:600; font-size:20px; letter-spacing:.1em; margin-top:22px}
.grower .role{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.12em;
  color:var(--dim); margin-top:8px;
}
.grower blockquote{
  font-family:"Shippori Mincho",serif; font-size:15px; line-height:1.95; color:var(--soft);
  margin-top:16px; padding-left:16px; border-left:1px solid var(--line);
}
.hands{margin-top:60px}
.hands .ph{aspect-ratio:21/9}

/* =========================================================
   04 プランと価格
   ========================================================= */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:22px; margin-top:60px}
.plan{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:34px 30px 32px; display:flex; flex-direction:column;
}
.plan--pick{border-color:var(--leaf); box-shadow:0 18px 44px rgba(27,42,28,.10)}
.plan-flag{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em;
  color:#FFFFFF; background:var(--leaf); border-radius:999px;
  padding:5px 14px; align-self:flex-start; justify-self:start; margin-bottom:16px;
}
/* 推しでないカードにも同じ高さの空バッジを置く。
   無いと「ふだん便」だけバッジのぶん下にずれて、見出しも価格も揃わない */
.plan-flag--none{background:none; visibility:hidden}
.plan h3{font-family:"Shippori Mincho",serif; font-weight:600; font-size:23px; letter-spacing:.1em}
.plan .who{font-size:12.5px; color:var(--soft); margin-top:8px; line-height:1.9}
.plan-price{margin-top:26px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.plan-price .now{font-family:"Shippori Mincho",serif; font-size:36px; letter-spacing:.02em}
.plan-price .now em{font-style:normal; font-size:.4em; margin-left:4px; color:var(--soft)}
.plan-price .was{font-size:13px; color:var(--dim); text-decoration:line-through}
.plan-unit{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--dim); margin-top:8px}
.plan-spec{list-style:none; margin:24px 0 28px; border-top:1px solid var(--line)}
.plan-spec li{
  display:flex; justify-content:space-between; gap:14px; font-size:13px;
  padding:11px 0; border-bottom:1px solid var(--line); color:var(--soft);
}
.plan-spec li b{color:var(--ink); font-weight:500}
.plan .btn{margin-top:auto; text-align:center}
/* 価格表は横に読むもの。行そのものを3枚で共有して、
   「品目数」「配送」「容量の目安」が必ず同じ高さに並ぶようにする。
   （バッジ・見出し・価格・単価・仕様・ボタンの7行） */
@supports (grid-template-rows:subgrid){
  .plans{grid-template-rows:repeat(7,auto)}
  .plan{display:grid; grid-template-rows:subgrid; grid-row:span 7}
  .plan .btn{margin-top:0; align-self:end}
}

/* =========================================================
   05 よくある不安
   ・閉じたときも「答えの一行目」が見えるので、開かずに判断できる
   ・カードにして、開いているものが一目でわかるようにする
   ========================================================= */
/* 幅は指定しない。他のセクション（品目カード・生産者・プラン）と右端を揃えるため。
   2列に固定するのは、質問が長いと3列では折り返しが増えて読みにくいから */
.faq{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.faq-item:hover{border-color:rgba(27,42,28,.28)}
.faq-item.open{
  border-color:var(--leaf);
  box-shadow:0 14px 34px rgba(27,42,28,.09);
  background:#fff;
}
.faq-q{
  width:100%; display:flex; align-items:flex-start; gap:14px; text-align:left;
  background:none; border:none; cursor:pointer; padding:20px 22px; color:var(--ink);
  font-family:"Noto Sans JP",sans-serif; font-size:15px; font-weight:500;
  letter-spacing:.03em; line-height:1.65;
}
.faq-q .num{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--dim);
  padding-top:4px; min-width:22px; flex:none;
  transition:color .4s var(--ease);
}
.faq-item.open .faq-q .num{color:var(--leaf)}
.faq-q .qt{flex:1; min-width:0}
/* 開く前も、答えの一行目が薄く見えている */
.faq-q .peek{
  display:block; margin-top:6px; font-size:12.5px; font-weight:400; color:var(--dim);
  line-height:1.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity .35s var(--ease), max-height .45s var(--ease);
  max-height:24px; opacity:1;
}
.faq-item.open .faq-q .peek{opacity:0; max-height:0; margin-top:0}
.faq-q .mark{
  width:22px; height:22px; flex:none; position:relative; margin-top:2px;
  border-radius:50%; border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.faq-q .mark::before,.faq-q .mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--soft); width:9px; height:1px;
  transition:background .4s var(--ease);
}
.faq-q .mark::after{transform:rotate(90deg); transition:opacity .4s var(--ease), background .4s var(--ease)}
.faq-item:hover .mark{border-color:var(--leaf)}
.faq-item.open .faq-q .mark{transform:rotate(180deg); border-color:var(--leaf); background:var(--leaf)}
.faq-item.open .faq-q .mark::before{background:#fff}
.faq-item.open .faq-q .mark::after{opacity:0}
.faq-a{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s var(--ease), opacity .4s var(--ease);
}
.faq-item.open .faq-a{max-height:320px; opacity:1}
.faq-a p{
  font-size:13.5px; color:var(--soft); line-height:2.0;
  padding:0 22px 22px 56px; max-width:none;
  border-top:1px solid var(--line); padding-top:18px; margin:0 22px 22px 56px;
  padding-left:0; padding-right:0;
}

/* ---- 締め ---- */
.close{text-align:center; padding:var(--gap) 0}
.close h2{margin:0 auto}
.close .btn{margin-top:38px}
.foot{
  background:var(--forest); color:#9CB095; padding:46px 0 42px;
  font-size:12px; letter-spacing:.04em;
}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:baseline; justify-content:space-between}
.foot .logo{font-family:"Shippori Mincho",serif; font-size:14px; letter-spacing:.24em; color:#DCE6D4}

/* ---- スクロールで浮かび上がる（動き） ---- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1; transform:none}

:focus-visible{outline:2px solid var(--leaf); outline-offset:3px}

/* ---- レスポンシブ ---- */
@media (max-width:1040px){
  /* 6品なので2列。3列のまま詰めるとカードが細くなりすぎる */
  .week-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--gap:clamp(72px,14vw,110px)}
  .bar{padding:12px 5vw}
  .bar .btn{padding:9px 18px; font-size:12px}
  /* 6品は 3→2→1 と割り切れる数で落とす。半端な列にすると空セルが出る */
  .week-grid{grid-template-columns:repeat(2,1fr)}
  .week-card{padding:26px 22px 28px}
  .compare-row{grid-template-columns:1fr; gap:10px}
  .compare-bar b{position:static; transform:none; display:block; margin-top:8px}
  .tl-row{grid-template-columns:1fr; gap:8px; padding:22px 0}
  .figures{gap:36px}
  .faq-q{font-size:15px; gap:14px}
  .faq-a p{padding-left:38px; font-size:13.5px}
  .week-band .ph{aspect-ratio:16/10}
  .hands .ph{aspect-ratio:16/10}
}
@media (max-width:620px){
  .week-grid{grid-template-columns:1fr}
  .week-card{padding:26px 22px 28px}
}
@media (max-width:560px){
  .week-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .compare-bar i{transform:scaleX(1); transition:none}
  .btn,.faq-a,.faq-q .mark{transition:none}
}

/* =========================================================
   締め（深緑に反転して、数字で押す）
   ・02 と同じ深緑。濃い帯が2回目に現れるので、ここが終着点だと伝わる
   ・背景の土の断面は 02 と同じ生成コードを使い回す
   ========================================================= */
.closing{position:relative; overflow:hidden; text-align:center}
.closing-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.closing-bg.in{opacity:.22}
.closing-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(64% 74% at 50% 46%, rgba(31,71,46,.42), rgba(23,53,34,.90)),
    linear-gradient(rgba(23,53,34,.72), transparent 26%, transparent 72%, rgba(20,46,30,.86));
}
.closing .wrap{position:relative; z-index:2}
.closing .eyebrow{color:var(--leaf-bright)}
.closing h2{
  font-size:clamp(32px,4.6vw,58px); letter-spacing:.09em; line-height:1.5; margin-top:20px;
  text-shadow:0 2px 30px rgba(8,20,12,.6);
}
.closing-figs{
  justify-content:center; gap:clamp(40px,6vw,88px); margin-top:56px;
  padding:38px 0 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.closing-figs .fig b{font-size:clamp(38px,5vw,64px)}
.closing-figs .fig span{letter-spacing:.14em}
.closing-cta{margin-top:44px}
.closing-cta .btn{padding:17px 46px; font-size:15px}
.closing-fine{
  font-size:12px; color:var(--dim); margin-top:18px; letter-spacing:.04em; line-height:1.9;
}
@media (max-width:860px){
  .closing-figs{
    gap:26px 0; margin-top:38px; padding:28px 0 30px;
    display:grid; grid-template-columns:repeat(3,1fr);
  }
  .closing-figs .fig b{font-size:clamp(26px,7vw,36px)}
  .closing-figs .fig span{font-size:11px; letter-spacing:.06em; line-height:1.6}
  .closing-cta{margin-top:32px}
  .closing-cta .btn{width:100%; text-align:center; padding:16px 0}
}