@charset "UTF-8";
/* Farm/buy デザイントークン
-----------------------------------------------------------------*/
/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/* ============================================================
   生産品への想い 専用CSS
   ark_company/assets/company-foodproduct-value.css を移植。
   ・色/フォント/.phead/.sec-title/.page/html,body背景は company_common.css
   ・読み込み順: common → company_common → 本CSS
============================================================ */
/* ---- ページ固有リセット ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--enji);
}

/* ============ えんじ地ヒーロー ============ */
.hero {
  background: var(--enji);
  color: #fff;
  padding-bottom: 9.7222222222vw;
}
@media (max-width: 1023px) {
  .hero {
    padding-bottom: min(17.0666666667vw, 83.2px);
  }
}

.strip-track {
  --ticker-duration: 48s;
}

.strip .si {
  border-radius: 2px;
}

.hero-copy {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -moz-column-gap: var(--gutter);
  column-gap: var(--gutter);
  padding: 6.6666666667vw var(--edge) 0;
}
@media (max-width: 1023px) {
  .hero-copy {
    padding: min(14.9333333333vw, 72.8px) var(--edge) 0;
  }
}

.hero-copy .inner {
  grid-column: 6/13;
}
@media (max-width: 1023px) {
  .hero-copy .inner {
    grid-column: 1/-1;
  }
}

.hero-copy h2 {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-h3);
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #fff;
}
@media (max-width: 1023px) {
  .hero-copy h2 {
    line-height: 1.6;
  }
}

@media (max-width: 1023px) {
  .hero-copy h2 br {
    display: inline;
  }
}

.hero-copy p {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-mincho);
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2.2222222222vw;
}
@media (max-width: 1023px) {
  .hero-copy p {
    margin-top: min(6.4vw, 31.2px);
  }
}

.hero-copy p:first-of-type {
  margin-top: 2.7777777778vw;
}
@media (max-width: 1023px) {
  .hero-copy p:first-of-type {
    margin-top: min(8.5333333333vw, 41.6px);
  }
}

@media (max-width: 1023px) {
  .hero-copy p br {
    display: none;
  }
}

/* ============ 特集ブロック群 ============ */
.omoi-sec {
  padding: 12.5vw var(--edge) 11.1111111111vw;
  background: var(--paper);
}
@media (max-width: 1023px) {
  .omoi-sec {
    padding: min(14.9333333333vw, 72.8px) var(--edge) 0;
  }
}

/* 背景ワンショットフェード */
.page.bg-armed {
  background: var(--enji);
  transition: background-color 0.7s ease;
}

.page.bg-armed.is-bg-switched {
  background: var(--paper);
}

.page.bg-armed .hero,
.page.bg-armed .omoi-sec {
  background: transparent;
}

.page.bg-armed .hero,
.page.bg-armed .hero .phead--on-enji h1,
.page.bg-armed .hero .phead--on-enji .breadcrumb,
.page.bg-armed .hero .phead--on-enji .breadcrumb a,
.page.bg-armed .hero .phead--on-enji .breadcrumb b,
.page.bg-armed .hero .phead--on-enji .breadcrumb .sep,
.page.bg-armed .hero .phead--on-enji .rule,
.page.bg-armed .hero-copy h2,
.page.bg-armed .hero-copy p {
  transition: color 0.7s ease, border-color 0.7s ease;
}

.page.bg-armed.is-bg-switched .hero {
  color: var(--text);
}

.page.bg-armed.is-bg-switched .hero .phead--on-enji h1,
.page.bg-armed.is-bg-switched .hero .phead--on-enji .breadcrumb,
.page.bg-armed.is-bg-switched .hero .phead--on-enji .breadcrumb a,
.page.bg-armed.is-bg-switched .hero .phead--on-enji .breadcrumb b,
.page.bg-armed.is-bg-switched .hero-copy h2 {
  color: var(--text);
}

.page.bg-armed.is-bg-switched .hero .phead--on-enji .breadcrumb .sep,
.page.bg-armed.is-bg-switched .hero-copy p {
  color: var(--muted);
}

.page.bg-armed.is-bg-switched .hero .phead--on-enji .rule {
  border-top-color: var(--line);
}

/* ---- 白パネル(テキスト) + 画像 の交互ブロック ----
   白パネルと画像はどちらも画面に固定し、パネル内のテキストだけが上へ流れる。
   スクロール量とテキストの移動量は 1:1（company_value.js が transform を当てる）。 */
.omoi-list {
  --ob-top: 8.2638888889vw;
  --ob-h: calc(100vh - 160px);
  --ob-h: calc(100svh - 160px);
  --ob-pad: 6.6666666667vw;
  --ob-fade: 5vw;
  --ob-lead: calc(var(--ob-h) * 0.75);
  --ob-tail: calc(var(--ob-h) * 0.4);
}
@media (max-width: 1023px) {
  .omoi-list {
    --ob-pad: 0;
  }
}

.ob-block + .ob-block {
  margin-top: 8.3333333333vw;
}
@media (max-width: 1023px) {
  .ob-block + .ob-block {
    margin-top: 0;
  }
}

.ob-sticky {
  display: grid;
  grid-template-columns: 742fr 506fr;
  -moz-column-gap: 0;
  column-gap: 0;
  align-items: stretch;
  background: #fff;
}
@media (max-width: 1023px) {
  .ob-sticky {
    display: flex;
    flex-direction: column;
    background: #fff;
    width: calc(100% + var(--edge) * 2);
    margin-left: calc(var(--edge) * -1);
    margin-right: calc(var(--edge) * -1);
  }
}

.ob-panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  background: #fff;
}
@media (max-width: 1023px) {
  .ob-panel {
    display: contents;
  }
}

.ob-media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .ob-media {
    display: none;
    order: 2;
    aspect-ratio: 3/2;
  }
}

.ob-media__pic {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ob-media__pic.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ob-media__pic {
    transition: none;
  }
}
.ob-set__img {
  display: none;
}
@media (max-width: 1023px) {
  .ob-set__img {
    display: block;
    margin-bottom: min(5.3333333333vw, 26px);
    aspect-ratio: 3/2;
    overflow: hidden;
    background: #e7e5df;
  }
}

.ob-block-rev .ob-sticky {
  grid-template-columns: 506fr 742fr;
}

.ob-block-rev .ob-panel {
  grid-column: 2;
}

.ob-block-rev .ob-media {
  grid-column: 1;
}

.ob-panel-inner {
  padding: var(--ob-lead) var(--ob-pad) var(--ob-tail);
}
@media (max-width: 1023px) {
  .ob-panel-inner {
    display: contents;
  }
}

/* JS が有効なときだけ「固定＋窓」にする（.is-panned は company_value.js が付与）。
   JS無効 / reduced-motion / SP では素の2カラムに落ちるのでテキストが消えない。
   ※ ブロックの伸長は min-height。padding では sticky の可動域は伸びない
     （同趣旨の注記: company_top.scss L705-713）。--ob-run は JS が書く */
.ob-block.is-panned {
  min-height: calc(var(--ob-h) + var(--ob-run, 0px));
}

.ob-block.is-panned .ob-sticky {
  position: sticky;
  top: var(--ob-top);
  height: var(--ob-h);
}

.ob-block.is-panned .ob-panel {
  overflow: hidden;
}

.ob-block.is-panned .ob-panel-inner {
  will-change: transform;
}

.ob-block.is-panned .ob-panel::before,
.ob-block.is-panned .ob-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ob-fade);
  z-index: 2;
  pointer-events: none;
}

.ob-block.is-panned .ob-panel::before {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.ob-block.is-panned .ob-panel::after {
  bottom: 0;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

/* 入場演出の合図を .is-shown（company_value.js が付ける）に差し替える。
   共通の initScrollReveal / initReveal は発火が早すぎて、演出が見える前に終わってしまう。
     ・PC（固定中）… 「画面の85%ライン」は窓の下端から79pxの位置。白フェード(--ob-fade)に
       隠れたまま帯が伸び終わる → 窓の高さの35%ぶん上がってから始める
     ・SP        … 要素が画面に入りかけた時点で発火するため、慣性スクロールだと
       読める位置に来たときには終わっている → 画面に入って少し上がってから始める
   合図の出し方は company_value.js の revealInPanel。
   .is-rvManaged は JS が生きていて演出を預かるときだけ付くので、
   JS 無効・reduced-motion では従来どおり共通側の演出に戻る。 */
.omoi-list.is-rvManaged .ob-set.js-reveal .ob-head::after {
  transform: scaleX(1);
}

.omoi-list.is-rvManaged .ob-set.js-reveal.is-shown .ob-head::after {
  transform: scaleX(0);
}

.omoi-list.is-rvManaged .ob-set.js-riseStagger > p.js-riseIn {
  opacity: 0;
  transform: translateY(56px);
  transition-delay: 0s;
}

.omoi-list.is-rvManaged .ob-set.js-riseStagger > p.js-riseIn.is-shown {
  opacity: 1;
  transform: none;
}

.omoi-list.is-rvManaged .ob-cat.js-charReveal .rv-i {
  transform: translateY(108%);
}

.omoi-list.is-rvManaged .ob-cat.js-charReveal.is-shown .rv-i {
  transform: translateY(0);
}

.ob-cat {
  margin: 0 0 5vw;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-h2);
  letter-spacing: 0.08em;
  line-height: var(--lh-head);
  color: var(--text);
}
@media (max-width: 1023px) {
  .ob-cat {
    order: 1;
    padding: min(19.2vw, 93.6px) var(--edge) 0;
    margin-bottom: min(12.8vw, 62.4px);
  }
}

@media (max-width: 1023px) {
  .ob-set {
    order: 3;
    padding: 0 var(--edge);
  }
}

@media (max-width: 1023px) {
  .ob-cat + .ob-set {
    margin-top: 0;
  }
}

@media (max-width: 1023px) {
  .ob-set:last-child {
    padding-bottom: min(21.3333333333vw, 104px);
  }
}

/* 固定演出の解除（JS無効時の受け皿も兼ねる） */
@media (prefers-reduced-motion: reduce) {
  .ob-block.is-panned {
    min-height: 0;
  }
  .ob-block.is-panned .ob-sticky {
    position: static;
    height: auto;
  }
  .ob-block.is-panned .ob-panel {
    overflow: visible;
  }
  .ob-block.is-panned .ob-panel::before,
  .ob-block.is-panned .ob-panel::after {
    display: none;
  }
  .ob-media {
    min-height: 420px;
  }
}
@media print {
  .ob-block.is-panned {
    min-height: 0;
  }
  .ob-block.is-panned .ob-sticky {
    position: static;
    height: auto;
  }
  .ob-block.is-panned .ob-panel {
    overflow: visible;
  }
  .ob-block.is-panned .ob-panel-inner {
    transform: none !important;
  }
  .omoi-list.is-rvManaged .ob-set.js-reveal .ob-head::after {
    display: none;
  }
  .omoi-list.is-rvManaged .ob-set.js-riseStagger > p.js-riseIn {
    opacity: 1;
    transform: none;
  }
  .omoi-list.is-rvManaged .ob-cat.js-charReveal .rv-i {
    transform: none;
  }
}
.ob-set + .ob-set {
  margin-top: 7.7777777778vw;
}
@media (max-width: 1023px) {
  .ob-set + .ob-set {
    margin-top: min(12.8vw, 62.4px);
  }
}

.ob-head {
  display: inline-block;
  position: relative;
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-lead);
  letter-spacing: 0.08em;
  line-height: 2.3;
  color: var(--text);
  padding-inline: var(--ob-band-padding, 1.3888888889vw);
}
@media screen and (max-width: 1023px) {
  .ob-head {
    --ob-band-padding: min(3.2vw, 15.6px);
    --ob-band-shadow-spread: 0.5px;
  }
}
@media (max-width: 1023px) {
  .ob-head {
    line-height: 2;
  }
}

.ob-head-band {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--paper);
  padding: 0.5555555556vw 0;
  box-shadow: var(--ob-band-padding, 1.3888888889vw) 0 0 var(--ob-band-shadow-spread, 0px) var(--paper), calc(-1 * var(--ob-band-padding, 1.3888888889vw)) 0 0 var(--ob-band-shadow-spread, 0px) var(--paper), 0 0 0 var(--ob-band-shadow-spread, 0px) var(--paper);
}
@media (max-width: 1023px) {
  .ob-head-band {
    padding: min(1.3333333333vw, 6.5px) 0;
  }
}

.ob-set > p {
  margin-top: 1.9444444444vw;
  font-family: var(--mincho);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-mincho);
  color: var(--text-body);
}
@media (max-width: 1023px) {
  .ob-set > p {
    margin-top: min(4.2666666667vw, 20.8px);
  }
}

.omoi-list:not(.is-rvManaged) .ob-set > p.js-riseIn {
  transition-delay: calc(var(--rd, 0s) + 0.35s);
}

.ob-set.js-reveal .ob-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: right center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
  pointer-events: none;
}

.ob-set.js-reveal.is-visible .ob-head::after {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .ob-set.js-reveal .ob-head::after {
    transform: scaleX(0);
    transition: none;
  }
  .omoi-list:not(.is-rvManaged) .ob-set > p.js-riseIn {
    transition-delay: 0s;
  }
}
@media print {
  .ob-set.js-reveal .ob-head::after {
    display: none;
  }
}