/* トップ: 映画のあと（今週の野菜・想いの扉・農場・飲食店の方へ）と、動きを減らす設定のときの静かな表示。
   映画そのものは home-film.css。--rv（現れる）・--py（視差）・--r（一字ずつ）は public/js/v2/pages/home.js が流す */

/* 映画を見ている間は、カートの帯を下に隠す */
.home.is-film .cartbar.is-on { transform: translateY(160%); pointer-events: none; }

/* ---------- 今週の野菜 ---------- */
.wk { padding-block: clamp(56px, 6vw, 96px) clamp(48px, 5vw, 80px); }
.wk-hd { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.wk-hd h2 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: .1em; }
.wk-hd p { font-size: 13px; letter-spacing: .12em; color: var(--ink-2); padding-bottom: 6px; }
.wk-hd .lnk { margin-left: auto; }
/* 商品は、見出しと一緒に1画面に収まる大きさ（写真が画面の高さの半分ほど） */
.wk .rail > .pc { flex-basis: clamp(196px, 17vw, 260px); opacity: var(--rv, 1); transform: translate3d(0, calc((1 - var(--rv, 1)) * 70px), 0); }
@media (max-width: 899px) { .wk .rail > .pc { flex-basis: 52vw; } }

/* ---------- 想いの扉（回る輪の文字・磁石のように寄る丸い扉） ---------- */
.door { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-block: clamp(40px, 6vw, 90px) clamp(110px, 13vw, 190px); }
.door-tx { grid-column: 1/span 7; }
.door-eb, .rs-eb { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .3em; color: var(--ink-2); }
.door-eb::before, .rs-eb::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.door h2 { font-size: clamp(34px, 4.6vw, 72px); line-height: 1.55; letter-spacing: .12em; margin-top: 24px; }
.door-tx p { margin-top: 24px; font-size: 14px; line-height: 2.1; color: var(--ink-2); letter-spacing: .06em; }
.dbtn { --d: clamp(200px, 19vw, 290px); grid-column: 9/span 4; justify-self: center; position: relative; display: block; width: var(--d); height: var(--d); border-radius: 50%; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.dbtn-in { position: absolute; inset: 0; transform: translate(var(--mx2, 0px), var(--my2, 0px)) scale(calc(.7 + var(--rv, 1) * .3)); transition: transform .8s var(--spring); }
.dbtn.mag .dbtn-in { transition: transform .3s var(--ease); }
.dbtn::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; border: 1px solid var(--rule); transform: scale(.9); opacity: 0; transition: transform .8s var(--ease), opacity .6s; }
.dbtn:hover::before, .dbtn:focus-visible::before { transform: scale(1); opacity: 1; }
.dbtn-ph { position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; background: var(--night); transform: scale(var(--hs, .94)); transition: transform 1s var(--ease); box-shadow: 0 24px 50px -24px rgba(13, 16, 14, .6); }
.dbtn-ph img { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; object-position: 50% 62%; transform: translate(var(--px, 0px), var(--py2, 0px)); filter: saturate(.7) brightness(.55); transition: filter .9s var(--ease), transform .5s var(--ease); }
.dbtn:hover .dbtn-ph, .dbtn:focus-visible .dbtn-ph { --hs: 1.04; }
.dbtn:hover .dbtn-ph img, .dbtn:focus-visible .dbtn-ph img { filter: saturate(.95) brightness(.75); }
.dbtn-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--rot, 0deg)); opacity: var(--rv, 1); }
.dbtn-ring text { font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .18em; fill: currentColor; }
.dbtn-lb { position: absolute; inset: 17%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--surface); font-family: var(--f-min); font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .22em; pointer-events: none; }
.dbtn-lb svg { width: 26px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.2; transition: transform .6s var(--ease); }
.dbtn:hover .dbtn-lb svg { transform: translateX(6px); }
.dbtn-pulse { position: absolute; inset: 17%; border-radius: 50%; border: 1px solid var(--moss); animation: dpulse 3.2s var(--ease) infinite; pointer-events: none; }
@keyframes dpulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
/* 押すと広がる円（想いのページへ移る間、画面を覆う） */
.iris { position: fixed; inset: 0; z-index: 95; background: var(--night); pointer-events: none; overflow: hidden; }
.iris img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; filter: saturate(.7) contrast(1.08) brightness(.6); }

/* ---------- 農場 ---------- */
.farm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding-block: clamp(40px, 6vw, 90px) clamp(120px, 14vw, 200px); }
.farm-ph { grid-column: 1/span 7; margin: 0; }
.farm-ph .par { overflow: hidden; aspect-ratio: 5/4; max-width: 100%; background: var(--mist); }
.farm-ph img { width: 100%; height: 118%; max-width: none; object-fit: cover; translate: 0 calc(var(--py, 0) * -7%); filter: saturate(.8) contrast(1.06); }
.farm-ph figcaption { font-size: 11px; letter-spacing: .12em; color: var(--ink-2); margin-top: 12px; }
.farm-tx { grid-column: 9/span 4; padding-bottom: 40px; }
.farm-tx h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.6; letter-spacing: .1em; }
.farm-tx p { margin: 28px 0 24px; font-size: 14px; line-height: 2.15; color: var(--ink-2); }
.rv-img { clip-path: inset(calc((1 - var(--rv, 1)) * 100%) 0 0 0); }
.rv-img img { transform: scale(calc(1 + (1 - var(--rv, 1)) * .25)); }
.rv-up { opacity: var(--rv, 1); transform: translateY(calc((1 - var(--rv, 1)) * 40px)); }

/* ---------- 飲食店の方へ ---------- */
.rs { position: relative; min-height: 100vh; min-height: 100svh; background: var(--night); color: var(--on-dark); display: flex; align-items: center; overflow: hidden; }
.rs-ph { position: absolute; inset: 0; }
.rs-ph img { width: 100%; height: 120%; max-width: none; object-fit: cover; transform: translateY(calc(var(--py, 0) * -8%)); filter: saturate(.75) contrast(1.08) brightness(.6); }
.rs-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 10, 9, .9), rgba(8, 10, 9, .55) 45%, rgba(8, 10, 9, .1)); }
.rs-mq { position: absolute; left: 0; top: 50%; white-space: nowrap; font-family: var(--f-min); font-weight: 600; font-size: clamp(90px, 16vw, 260px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(236, 236, 230, .12); transform: translate3d(calc(var(--py, 0) * 30vw - 20vw), -50%, 0); pointer-events: none; }
.rs-in { position: relative; width: 100%; padding-block: clamp(120px, 14vw, 200px); }
.rs-eb { color: var(--on-dark-2); margin-bottom: 24px; }
.rs h2 { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.6; letter-spacing: .1em; }
.rs ul { margin: 44px 0 48px; max-width: 30em; border-top: 1px solid var(--rule-dark); }
.rs li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule-dark); font-size: 14px; letter-spacing: .06em; }
.rs li b { font-family: var(--f-min); font-weight: 600; color: var(--dew); min-width: 2.4em; flex: none; }
.rs .acts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rs .acts small { font-size: 12px; color: var(--on-dark-2); letter-spacing: .1em; }

@media (max-width: 899px) {
  .door { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .door-tx, .dbtn { grid-column: 1; }
  .dbtn { --d: min(64vw, 250px); }
  .farm { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .farm-ph, .farm-tx { grid-column: 1; }
  .farm-tx { padding-bottom: 0; }
}

/* ---------- 動きを減らす設定のとき（映画の代わりに、写真と文を静かに並べる） ---------- */
.film-static { display: none; }
.fs-blk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding-block: 72px; }
.fs-blk img { grid-column: 1/span 7; aspect-ratio: 3/2; object-fit: cover; width: 100%; background: var(--mist); }
.fs-blk div { grid-column: 9/span 4; }
.fs-blk :is(h1, h2) { font-size: clamp(26px, 3vw, 40px); letter-spacing: .12em; line-height: 1.5; }
.fs-blk p { margin: 18px 0 8px; font-size: 14px; line-height: 2.1; color: var(--ink-2); }
@media (max-width: 899px) {
  .fs-blk { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-block: 48px; }
  .fs-blk img, .fs-blk div { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .film, .op-intro { display: none; }
  .film-static { display: block; padding-top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 40px); }
  .dbtn-pulse { display: none; }
}

/* 開催中のキャンペーン（あるときだけ） */
.cpb { padding-block: 0 clamp(48px, 5vw, 80px); }
.cpb-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: var(--s-5); }
.cpb-hd h2 { font-size: var(--fs-xl); letter-spacing: .12em; }
.cpb-hd .lnk { margin-left: auto; }
.cpb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-4) var(--s-6); border-top: 1px solid var(--rule); }
.cpb-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.cpb-ph { width: 96px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.cpb-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cpb-list a:hover .cpb-ph img { transform: scale(1.06); }
.cpb-tx small { display: block; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-2); }
.cpb-tx b { display: block; font-family: var(--f-min); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .08em; line-height: 1.6; }