@charset "utf-8";
/* ==========================================================================
   LTJ / PRO AGENT  —  site.css   (section & page styles)
   ========================================================================== */

/* ==========================================================================
   TOP : 1. FV
   ========================================================================== */
/* SP：上＝コピー、中央〜下＝3Dビジュアル。PC：左右50:50。 */
.fv {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-start;
  background: var(--off-white);
  overflow: hidden;
  padding-block: calc(var(--header-h) + 4svh) 46svh;
}
@media (min-width: 1025px) {
  /* CR-003：PCの画面高を 100vh → 72svh へ。次のセクションが最初の画面に見えるようにする */
  .fv {
    min-height: 640px;
    min-height: max(72svh, 640px);
    align-items: center;
    padding-block: var(--header-h) 0;
  }
}

.fv__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* コピーの可読性を守る薄いベール（SP は下方向、PC は左方向） */
.fv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--off-white) 0%, rgba(244,243,240,.94) 34%, rgba(244,243,240,.55) 52%, rgba(244,243,240,0) 70%);
}
@media (min-width: 1025px) {
  .fv__veil {
    background:
      linear-gradient(to right, var(--off-white) 0%, rgba(244,243,240,.9) 32%, rgba(244,243,240,0) 62%);
  }
}

.fv__in { position: relative; z-index: 2; width: 100%; }

/* コピー欄の実効幅を変数に持たせ、見出しの文字サイズを「行が折り返さない大きさ」から逆算する。
   日本語コピーは改行をブラウザ任せにしない（行構成を固定する）。 */
.fv__copy {
  --cw: calc(100vw - var(--gut) * 2);
  max-width: 640px;
}
@media (min-width: 1025px) {
  .fv__copy {
    --cw: min(calc(52vw - var(--gut)), 700px);
    max-width: min(52%, 700px);
  }
}

.fv__eyebrow { margin-bottom: 26px; }

/* 見出しの直下に置く会社定義。前より一段大きく */
.fv__sub {
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: .07em;
  line-height: 1.7;
  color: rgba(5,5,6,.82);
  margin-top: clamp(22px, 2.8vw, 34px);
}

/* 最長行「一般流通では出会えない」＝11字。11.5で割った値が1行に収まる上限。
   FV-TYPE-03/04/05：1行目はRegularで小さく、2行目「商機を、御社へ。」をSemiBoldで主役に。
   サイズ比は 100 : 125。疑似太字を使わないよう Noto Serif JP の 600 を読み込んでいる。 */
/* 基準サイズ＝2行目「「商機」を御社へ。」（9字）が1行に収まる上限。1行目はその 0.62倍で小さく添える */
.fv__h {
  font-size: min(calc(var(--cw) / 9.6), 100px);
  line-height: 1.24;
  letter-spacing: .008em;
  font-weight: 400;
}
.fv__h span { display: block; white-space: nowrap; }
.fv__h .l1 { font-size: .72em; line-height: 1.45; letter-spacing: .02em; }
.fv__h .l2 { font-size: 1em; margin-top: .06em; }

.fv__lead {
  margin-top: clamp(24px, 3vw, 38px);
  max-width: 30em;
}
.fv__lead span { display: block; }

.fv__cta { margin-top: clamp(30px, 3.6vw, 46px); }
@media (max-width: 600px) {
  .fv__cta .btn { min-width: 100%; }
}

.fv__scroll {
  position: absolute;
  left: var(--gut);
  bottom: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.fv__scroll-line {
  width: 1px;
  height: 54px;
  background: rgba(5,5,6,.28);
  position: relative;
  overflow: hidden;
}
.fv__scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--black);
  animation: scrollDrop 2.6s var(--ease-io) infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(150%); }
  100% { transform: translateY(150%); }
}
.fv__scroll-txt {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gray);
}

/* FV 入場モーション（JS が有効なときだけ隠す） */
.js .fv__eyebrow, .js .fv__sub, .js .fv__h span, .js .fv__lead span, .js .fv__cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
}
.is-ready .fv__eyebrow { opacity: 1; transform: none; transition-delay: .15s; }
.is-ready .fv__h span:nth-child(1) { opacity: 1; transform: none; transition-delay: .28s; }
.is-ready .fv__h span:nth-child(2) { opacity: 1; transform: none; transition-delay: .38s; }
.is-ready .fv__sub     { opacity: 1; transform: none; transition-delay: .54s; }
.is-ready .fv__cta     { opacity: 1; transform: none; transition-delay: .68s; }
.is-ready .fv__scroll { animation: fadeIn 1.2s var(--ease) 1.1s both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* FV：文字＋実写1枚（PC 左コピー・右画像 / SP 上コピー・下画像） */
.fv--type .fv__in { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; }
.fv__pic {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--off-white-2);
}
.fv__pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  display: block;
  transform: scale(1.0);
  animation: fvZoom 26s ease-out both;
}
@keyframes fvZoom { from { transform: scale(1.0); } to { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .fv__pic img { animation: none; } }
@media (min-width: 1025px) {
  .fv--type .fv__in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); }
  .fv__pic { aspect-ratio: auto; height: min(62svh, 620px); }
}
.js .fv__pic { opacity: 0; transform: translateY(14px); transition: opacity 1.4s var(--ease) .35s, transform 1.5s var(--ease) .35s; }
.is-ready .fv__pic { opacity: 1; transform: none; }

/* FV：文字だけの版（2026-09-07 決定。3Dオブジェクトは使わない） */
.fv--type {
  padding-block: calc(var(--header-h) + 8svh) clamp(110px, 16svh, 150px);  /* 下はスクロール誘導ぶんを確保 */
  min-height: 0;
}
.fv--type .fv__copy { --cw: calc(100vw - var(--gut) * 2); max-width: none; }
@media (min-width: 1025px) {
  .fv--type { min-height: max(72svh, 620px); padding-block: var(--header-h) clamp(96px, 12svh, 130px); }  /* スクロール誘導とCTAの間に余白 */
  .fv--type .fv__copy { --cw: min(calc((100vw - var(--gut) * 2) * .5), 700px); max-width: none; }
  .fv--type .fv__h { font-size: min(calc(var(--cw) / 9.6), 100px); }
  .fv--type .fv__lead { max-width: 34em; }
}

/* ==========================================================================
   TOP : 2. HOW WE WORK（1画面。左＝見出しと導入文、右＝3工程。装飾なし）
   ========================================================================== */
.work {
  position: relative;
  overflow: clip;
  padding-block: var(--sec-y);
}
.work__in { position: relative; z-index: 1; }

.work__h {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(28px, 6.6vw, 48px);
  line-height: 1.4;
}
.work__h span { display: block; }
.work__lead { margin-top: clamp(18px, 2vw, 26px); max-width: 30em; }

.work__steps {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
}
.work__step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 14px;
  padding-block: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.work__step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.work__no {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(244,243,240,.6);
  padding-top: .9em;
}
.work__t { font-size: clamp(19px, 4.2vw, 24px); letter-spacing: .06em; }
.work__body .lead { margin-top: 8px; max-width: 34em; }

@media (min-width: 1025px) {
  .work__in {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 110px);
    align-items: center;
  }
  .work__steps { margin-top: 0; }
  .work__step {
    grid-template-columns: 84px 1fr;
    gap: 0 22px;
    padding-block: clamp(22px, 2.6vw, 32px);
  }
}

/* ==========================================================================
   TOP : 各セクションの上下余白
   ========================================================================== */
.pj, .std, .ct { padding-block: var(--sec-y); }

/* ==========================================================================
   TOP : 3. PROJECTS
   ========================================================================== */
.pj { position: relative; }
.pj__head { margin-bottom: clamp(40px, 5vw, 68px); }

/* minmax(0,1fr) にしないと、aspect-ratio を持つカードが列幅を押し広げて横スクロールが出る */
.pj__grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .pj__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 2026-09-07：写真の上に文字を重ねると「ズレ・バグ」に見えるため、写真（上）＋文字パネル（下）に分離 */
.pjc {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  /* 光彩：白に近い冷色の淡いハロー＋落ち影。ホバー／タップでカテゴリ色に寄る */
  box-shadow:
    0 30px 70px -40px rgba(0,0,0,.85),
    0 0 42px -6px rgba(214,224,240,.11);
  transition: box-shadow .7s var(--ease), border-color .7s var(--ease), transform .55s var(--ease);
}
.pjc:focus-visible { outline: 2px solid var(--off-white); outline-offset: 4px; }
@media (hover: hover) {
  .pjc--fishery:hover  { border-color: rgba(62,192,222,.45);  box-shadow: 0 30px 70px -40px rgba(0,0,0,.85), 0 0 60px -4px rgba(62,192,222,.22); }
  .pjc--wellness:hover { border-color: rgba(159,232,112,.40); box-shadow: 0 30px 70px -40px rgba(0,0,0,.85), 0 0 60px -4px rgba(159,232,112,.18); }
}
/* タップ／クリック中：わずかに沈み、光彩が強まる */
.pjc:active { transform: scale(.985); transition-duration: .18s; }
.pjc--fishery:active  { border-color: rgba(62,192,222,.65);  box-shadow: 0 20px 50px -34px rgba(0,0,0,.9), 0 0 64px -2px rgba(62,192,222,.30); }
.pjc--wellness:active { border-color: rgba(159,232,112,.60); box-shadow: 0 20px 50px -34px rgba(0,0,0,.9), 0 0 64px -2px rgba(159,232,112,.26); }
.pjc:active .pjc__go { transform: translateX(9px); }
.pjc:active .pjc__img { transform: scale(1.04); }
.pjc__vis { position: relative; z-index: 0; aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 900px) { .pjc__vis { aspect-ratio: 16 / 9.5; } }
.pjc__vis .pjc__grad { display: none; }   /* カードでは暗転グラデーションを使わない */

/* --- 画像スロット ------------------------------------------------------
   実写を入れるときは、以下の --img を差し替えるだけでよい。
   例) .pjc--fishery .pjc__img { --img: url("../img/fishery-card.jpg"); }
   画像が無い間は、カテゴリカラーで組んだ抽象ビジュアルが表示される。
   -------------------------------------------------------------------- */
.pjc__img {
  position: absolute;
  inset: 0;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease), filter 1.2s var(--ease);
  filter: saturate(.72) contrast(1.06);
}
.pjc__grad {
  position: absolute;
  inset: 0;
  transition: opacity 1s var(--ease);
}

/* fishery : deep ocean blue → cyan */
.pjc--fishery .pjc__img {
  background-color: var(--fishery-deep);
  background-image:
    var(--img, none),
    radial-gradient(120% 90% at 78% 8%,  rgba(62,192,222,.42) 0%, rgba(62,192,222,0) 58%),
    radial-gradient(90% 80% at 18% 96%, rgba(10,51,80,.95) 0%, rgba(5,20,34,1) 70%),
    linear-gradient(168deg, #0d4468 0%, #072339 62%, #04121f 100%);
}
.pjc--fishery .pjc__grad {
  background:
    linear-gradient(to top, rgba(3,12,20,.92) 0%, rgba(3,12,20,.45) 38%, rgba(3,12,20,.06) 72%);
}

/* wellness : deep teal → acid green の一滴 */
.pjc--wellness .pjc__img {
  background-color: var(--wellness-deep);
  background-image:
    var(--img, none),
    radial-gradient(70% 55% at 68% 26%, rgba(159,232,112,.20) 0%, rgba(159,232,112,0) 62%),
    radial-gradient(110% 90% at 26% 92%, rgba(8,50,47,.96) 0%, rgba(3,18,18,1) 72%),
    linear-gradient(160deg, #0f5a54 0%, #073632 58%, #03110f 100%);
}
.pjc--wellness .pjc__grad {
  background:
    linear-gradient(to top, rgba(2,12,11,.92) 0%, rgba(2,12,11,.45) 38%, rgba(2,12,11,.06) 72%);
}

/* 微粒子レイヤー（両カード共通・CSSのみ） */
.pjc__vis::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.8px 1.8px at 62% 18%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 54%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 84%, rgba(255,255,255,.25), transparent 60%);
  transition: transform 1.6s var(--ease);
}

.pjc__txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 36px) clamp(24px, 2.8vw, 36px);
  color: var(--off-white);
  background: var(--charcoal);
  border-top: 1px solid rgba(255,255,255,.08);
}
.pjc__cat {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(244,243,240,.72);
  margin-bottom: 14px;
  display: block;
}
.pjc--fishery .pjc__cat  { color: #7fd8ee; }
.pjc--wellness .pjc__cat { color: #b9e9a4; }

.pjc__nm {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(23px, 3.4vw, 36px);
  letter-spacing: .06em;
  line-height: 1.35;
}
.pjc__nm em {
  font-family: var(--f-en);
  font-style: normal;
  font-weight: 300;
  font-size: .82em;
  letter-spacing: .1em;
}
.pjc__sum {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(244,243,240,.78);
}
.pjc__go {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(244,243,240,.85);
  font-size: 12.5px;
  letter-spacing: .1em;
  transition: transform .6s var(--ease);
}
.pjc__go .ar { width: 30px; }

@media (hover: hover) {
  .pjc:hover .pjc__img   { transform: scale(1.06); filter: saturate(1) contrast(1.06); }
  .pjc:hover .pjc__vis::after { transform: translate3d(-8px, -6px, 0) scale(1.04); }
  .pjc:hover .pjc__go    { transform: translateX(9px); }
}

.pj__more { margin-top: clamp(34px, 4vw, 52px); }

/* ==========================================================================
   TOP : 4. OPPORTUNITY STANDARD
   ========================================================================== */
.std__head { margin-bottom: clamp(38px, 4.6vw, 62px); }
.std__list { border-top: 1px solid var(--rule); }
.std__list li { border-bottom: 1px solid var(--rule); }
.std__list a {
  display: grid;
  grid-template-columns: 58px 1fr 24px;
  align-items: center;
  gap: 0 16px;
  padding-block: clamp(22px, 2.6vw, 30px);
  transition: padding-left .6s var(--ease), color .5s var(--ease);
}
.std__no { font-size: 14px; color: var(--gray); letter-spacing: .1em; }
.std__body { display: flex; flex-direction: column; gap: 6px; }
.std__t {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.2vw, 25px);
  letter-spacing: .07em;
  line-height: 1.3;
}
.std__q { font-size: 12.5px; color: var(--gray); letter-spacing: .06em; }
.std__list .ar { opacity: .45; transition: transform .6s var(--ease), opacity .5s var(--ease); }
@media (hover: hover) {
  .std__list a:hover { padding-left: 14px; }
  .std__list a:hover .ar { transform: translateX(7px); opacity: 1; }
}
/* TOP-STANDARD-UI：縦1列。番号と基準名を大きく、問いを横に小さく（2×2にはしない） */
@media (min-width: 900px) {
  .std__list a { grid-template-columns: 80px 1fr 28px; padding-block: clamp(24px, 2.8vw, 34px); }
  .std__no { font-size: 17px; }
  .std__t { font-size: clamp(22px, 2.4vw, 30px); }
  .std__body { flex-direction: row; align-items: baseline; gap: 26px; }
  .std__q { font-size: 13px; }
}

/* 4基準の下段：4原則を1行で（説明文なし）＋ABOUTへの導線1本 */
.std__pol {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--rule);
}
.std__pol-h { font-family: var(--f-serif); font-size: clamp(21px, 2.2vw, 24px); letter-spacing: .06em; line-height: 1.5; }
.std__pol-l { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.std__pol-l li { display: flex; align-items: baseline; gap: 12px; font-size: 16px; letter-spacing: .05em; }
@media (min-width: 900px) {
  .std__pol-l { flex-direction: row; flex-wrap: wrap; gap: 10px 30px; }
  .std__pol-l li { font-size: 14.5px; }
}
.std__pol-l em {
  font-family: var(--f-en); font-style: normal; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gray);
  margin-left: 2px;   /* 日本語 → 英語 の順（2026-09-07） */
}
.std__more { margin-top: clamp(30px, 3.6vw, 44px); }

/* CONTACTページ：フォーム下の導線 */
.ct-links { margin-top: clamp(30px, 3.6vw, 44px); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; }
.ct-links .note { width: 100%; }

/* 詳細FVの実写（picture 版） */
.pd-fv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 流通の比較図：段の数が一目で分かる */
.fl { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: clamp(36px, 4.4vw, 60px); }
.fl__row { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(20px, 2.4vw, 28px); }
.fl__lb { font-family: var(--f-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,243,240,.55); }
.fl__chain { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; counter-reset: none; }
.fl__chain li {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.28);
  font-family: var(--f-serif); font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .08em;
  text-align: center;
}
.fl__chain li + li::before {   /* 段の間の矢印 */
  content: ""; position: absolute; left: 50%; top: -11px; width: 1px; height: 12px; background: rgba(255,255,255,.35);
}
.fl__chain .fl__mid { color: rgba(244,243,240,.62); border-style: dashed; border-color: rgba(255,255,255,.22); }
.fl__chain .fl__mid::after {
  content: "＋ 手数料・保管・輸送"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .08em; color: rgba(244,243,240,.45);
}
.fl__chain .fl__hub { border-color: rgba(62,192,222,.75); background: rgba(62,192,222,.08); color: #bfe9f4; }
.fl__note { margin-top: 14px; font-size: 13px; line-height: 1.9; color: rgba(244,243,240,.62); }
@media (min-width: 900px) {
  .fl__chain { flex-direction: row; align-items: stretch; gap: 0; }
  .fl__chain li { flex: 1 1 0; min-height: 64px; padding: 14px 10px; }
  .fl__chain li + li { margin-left: 34px; }
  .fl__chain li + li::before { left: -34px; top: 50%; width: 34px; height: 1px; transform: translateY(-50%); }
  .fl__chain li + li::after { content: ""; position: absolute; left: -9px; top: 50%; width: 6px; height: 6px; border-top: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5); transform: translateY(-50%) rotate(45deg); }
  .fl__chain .fl__mid::after { content: "＋ 手数料・保管・輸送"; left: 50%; right: auto; top: auto; bottom: -24px; transform: translateX(-50%); white-space: nowrap; border: 0; width: auto; height: auto; }
  .fl__row--new .fl__chain { max-width: 62%; }
}

/* 魚結の事業内容カード */
.biz { display: grid; gap: clamp(16px, 2vw, 24px); }
.biz__c { background: var(--charcoal); border: 1px solid rgba(255,255,255,.10); overflow: hidden; }
.biz__vis { aspect-ratio: 4 / 3; overflow: hidden; background: var(--charcoal-2); }
.biz__vis img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); transition: transform 1.2s var(--ease); }
.biz__c:hover .biz__vis img { transform: scale(1.04); }
.biz__txt { padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); }
.biz__t { font-family: var(--f-serif); font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .06em; line-height: 1.5; display: flex; align-items: baseline; gap: 12px; }
.biz__no { font-family: var(--f-en); font-size: 12px; letter-spacing: .14em; color: #7fd8ee; }
.biz__txt .lead { margin-top: 10px; font-size: 13.5px; }
@media (min-width: 640px)  { .biz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .biz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* パートナー募集 */
.pt { padding-block: var(--sec-y); }
.pt__in { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.pt__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 28px); }
.pt__tags li { border: 1px solid rgba(5,5,6,.3); padding: 10px 16px; font-size: 13px; letter-spacing: .06em; }
.pt__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--off-white-2); }
.pt__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .pt__l .btn { min-width: 100%; } }
@media (min-width: 1025px) {
  .pt__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); }
  .pt__pic { aspect-ratio: auto; height: min(560px, 64vh); }
}

/* 導入までの流れ */
.flw { counter-reset: flw; border-top: 1px solid var(--rule); margin-top: clamp(30px, 3.6vw, 46px); }
.flw li {
  counter-increment: flw;
  display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; letter-spacing: .05em;
}
.flw li::before { content: counter(flw, decimal-leading-zero); font-family: var(--f-en); font-size: 12px; letter-spacing: .12em; color: var(--gray); }
.flw + .note { margin-top: 18px; }

/* ==========================================================================
   TOP : 8. CONTACT
   ========================================================================== */
.ct {
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.ct::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(150,170,200,.13) 0%, rgba(0,0,0,0) 64%);
  pointer-events: none;
}
.ct__in { position: relative; display: grid; gap: clamp(34px, 4vw, 52px); }
.ct__h { margin-top: clamp(20px, 2.4vw, 30px); }
.ct__h span { display: block; }
.ct__l .lead { margin-top: clamp(18px, 2vw, 26px); }
@media (max-width: 600px) { .ct__r .btn { min-width: 100%; } }
/* RESP-01：スマホは中央揃えの縦積み */
@media (max-width: 1024px) {
  .ct__in { text-align: center; justify-items: center; }
  .ct__l .eyebrow { justify-content: center; }
  .ct__l .lead { margin-inline: auto; }
}
@media (min-width: 1025px) {
  .ct__in { grid-template-columns: 1fr auto; align-items: end; gap: clamp(48px, 6vw, 100px); }
}

/* ==========================================================================
   下層ページ共通 : ページヘッダー
   ========================================================================== */
.ph {
  position: relative;
  background: var(--off-white);
  padding-block: calc(var(--header-h) + clamp(56px, 9vw, 130px)) clamp(48px, 7vw, 100px);
  overflow: hidden;
}
.ph--dark { background: var(--black); color: var(--off-white); }
.ph__in { position: relative; z-index: 2; }
.ph__cat {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 20px;
}
.ph__h {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(29px, 6.6vw, 62px);
  line-height: 1.4;
  letter-spacing: .02em;
}
.ph__h span { display: block; }
.ph__lead { margin-top: clamp(22px, 2.6vw, 34px); max-width: 34em; }

/* パンくず */
.bc {
  font-family: var(--f-en);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.bc a { transition: opacity .4s var(--ease); }
.bc a:hover { opacity: .6; }
.bc i { font-style: normal; opacity: .5; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.acc { border-top: 1px solid var(--rule); }
.acc__i { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr 22px;
  align-items: center;
  gap: 0 16px;
  padding-block: clamp(24px, 2.8vw, 34px);
  text-align: left;
}
.acc__no { font-size: 14px; color: var(--gray); letter-spacing: .1em; }
.acc__ttl {
  font-family: var(--f-serif);
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: .07em;
  line-height: 1.5;
}
.acc__ttl b { font-weight: 400; }
.acc__ttl small {
  display: block;
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: var(--gray);
  letter-spacing: .06em;
  margin-top: 8px;
}
.acc__mk { position: relative; width: 16px; height: 16px; justify-self: end; }
.acc__mk::before, .acc__mk::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform .55s var(--ease);
}
.acc__mk::after { transform: rotate(90deg); }
.acc__i.is-open .acc__mk::after { transform: rotate(0); }

.acc__pn {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease);
}
.acc__i.is-open .acc__pn { grid-template-rows: 1fr; }
.acc__pn > div { overflow: hidden; }
.acc__body {
  padding: 4px 0 clamp(30px, 3.4vw, 44px);
  max-width: 46em;
}
@media (min-width: 900px) {
  .acc__btn  { grid-template-columns: 78px 1fr 22px; }
  .acc__body { padding-left: 78px; }
}
.acc__body p + p { margin-top: 1.2em; }

/* 2カラム文章 */
.tx2 { display: grid; gap: clamp(26px, 3vw, 40px); }
@media (min-width: 900px) {
  .tx2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); }
  /* 2カラムの中に入る見出しは、列幅に収まる大きさにする */
  .tx2 .blk__h { font-size: clamp(22px, 3.4vw, 40px); }
}

/* ==========================================================================
   PROJECTS 一覧（エディトリアル）
   ========================================================================== */
.pl { border-top: 1px solid var(--rule); }
.pl__i { border-bottom: 1px solid var(--rule); }
.pl__a {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  padding-block: clamp(30px, 4vw, 56px);
  align-items: center;
  transition: opacity .6s var(--ease);
}
.pl__vis {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--black);
}
.pl__vis .pjc__img, .pl__vis .pjc__grad { position: absolute; inset: 0; }
.pl__no {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gray);
}
.pl__cat {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.pl__i[data-cat="fishery"]  .pl__cat { color: var(--fishery-mid); }
.pl__i[data-cat="wellness"] .pl__cat { color: var(--wellness-mid); }
.pl__nm {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 42px);
  letter-spacing: .05em;
  line-height: 1.35;
}
.pl__nm em { font-family: var(--f-en); font-style: normal; font-weight: 300; font-size: .8em; letter-spacing: .1em; }
.pl__sum { margin-top: 16px; max-width: 30em; }
.pl__go { margin-top: clamp(20px, 2.4vw, 28px); }
@media (min-width: 900px) {
  .pl__a { grid-template-columns: 62px minmax(0,1fr) minmax(0,1.05fr); gap: clamp(30px, 4vw, 64px); }
  .pl__i:nth-child(even) .pl__a > .pl__vis { order: 3; }
}
@media (hover: hover) {
  .pl__a:hover .pjc__img { transform: scale(1.05); }
}

/* ==========================================================================
   PROJECT 詳細 : 共通パーツ
   ========================================================================== */
.pd-fv {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--off-white);
  padding-block: calc(var(--header-h) + 60px) clamp(48px, 7vw, 92px);
}
@media (min-width: 1025px) { .pd-fv { min-height: 88vh; } }
.pd-fv__bg { position: absolute; inset: 0; z-index: 0; }
/* 写真の明るい部分にコピーが乗っても読めるよう、左と上下を落とす */
.pd-fv__bg .pjc__grad {
  background-image:
    linear-gradient(to top,   rgba(2, 6, 10, .92) 0%, rgba(2, 6, 10, .48) 44%, rgba(2, 6, 10, .06) 82%),
    linear-gradient(to right, rgba(2, 6, 10, .78) 0%, rgba(2, 6, 10, .34) 40%, rgba(2, 6, 10, 0) 76%),
    linear-gradient(to bottom, rgba(2, 6, 10, .62) 0%, rgba(2, 6, 10, 0) 26%);
}
.pd-fv__bg .pjc__img, .pd-fv__bg .pjc__grad { position: absolute; inset: 0; }
.pd-fv__in { position: relative; z-index: 2; width: 100%; }
.pd-fv__cat {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.pd-fv__nm {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px);
  letter-spacing: .1em;
  color: rgba(244,243,240,.86);
}
.pd-fv__nm em { font-family: var(--f-en); font-style: normal; font-weight: 300; letter-spacing: .12em; }
.pd-fv__h {
  margin-top: clamp(24px, 3vw, 38px);
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(31px, 7.4vw, 68px);
  line-height: 1.36;
  letter-spacing: .02em;
}
.pd-fv__h span { display: block; }
.pd-fv__lead { margin-top: clamp(22px, 2.6vw, 32px); max-width: 34em; color: rgba(244,243,240,.7); }
.pd-fv__cta { margin-top: clamp(30px, 3.6vw, 44px); }
@media (max-width: 600px) { .pd-fv__cta .btn { min-width: 100%; } }

/* 巨大タイポの value 一覧 */
.bv { display: grid; gap: 0; }
.bv__i {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: clamp(24px, 3vw, 40px);
  display: grid;
  gap: 8px;
}
.bv__i:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.bv__en {
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(34px, 9vw, 78px);
  line-height: .98;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(244,243,240,.2);
}
.bv__jp { font-family: var(--f-serif); font-size: clamp(16px, 2vw, 20px); letter-spacing: .07em; }
@media (min-width: 900px) {
  .bv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
  .bv__i { border-bottom: 0 !important; }
  /* 4カラムのときは列幅に収まる大きさまで落とす */
  .bv__en { font-size: clamp(24px, 4.2vw, 60px); }
}

/* 流通図 */
.flow { display: grid; gap: 0; margin-top: clamp(34px, 4vw, 54px); }
.flow__r {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 14px;
}
.flow__n {
  font-family: var(--f-serif);
  font-size: clamp(16px, 2.2vw, 21px);
  letter-spacing: .1em;
  min-width: 6em;
}
.flow__bar { flex: 1; height: 1px; background: currentColor; opacity: .2; }
.flow__cut { font-size: 11.5px; letter-spacing: .14em; opacity: .55; font-family: var(--f-en); text-transform: uppercase; }
.flow--short .flow__r { opacity: .35; }
.flow--short .flow__r.is-keep { opacity: 1; }

/* データ数値 */
.dt { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 800px) { .dt { grid-template-columns: repeat(3, 1fr); } }
.dt__i { border-top: 1px solid rgba(255,255,255,.16); padding-top: clamp(20px, 2.4vw, 30px); }
.dt__n {
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(46px, 8vw, 86px);
  line-height: 1;
  letter-spacing: .01em;
}
.dt__u { font-size: .42em; letter-spacing: .04em; margin-left: .12em; }
.dt__l {
  margin-top: 14px;
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244,243,240,.55);
  line-height: 1.9;
}
.dt__j { margin-top: 8px; font-size: 12.5px; color: rgba(244,243,240,.62); }

/* チェック項目リスト */
.chk { display: grid; gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
.chk li {
  background: var(--charcoal);
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.chk__en {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,243,240,.5);
}
.chk__jp { font-size: 14px; letter-spacing: .05em; }
@media (min-width: 600px)  { .chk { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .chk { grid-template-columns: repeat(5, 1fr); } }
.chk--4 { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 1000px) { .chk--4 { grid-template-columns: repeat(4, 1fr) !important; } }

/* 成分タグ */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 38px); }
.tags li {
  border: 1px solid rgba(255,255,255,.24);
  padding: 11px 18px;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .12em;
}

/* 権利の強調ブロック */
.right-box {
  border: 1px solid rgba(159,232,112,.32);
  background: linear-gradient(140deg, rgba(14,86,81,.30) 0%, rgba(8,50,47,.16) 100%);
  padding: clamp(26px, 3.4vw, 46px);
  margin-top: clamp(30px, 3.6vw, 46px);
}
.right-box p {
  font-family: var(--f-serif);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.85;
  letter-spacing: .05em;
}
.right-box .note { margin-top: 16px; }

/* 導入対象 */
.tg { display: grid; gap: 1px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
.tg li {
  background: var(--charcoal);
  padding: clamp(24px, 3vw, 38px) clamp(18px, 2.2vw, 28px);
  display: grid;
  gap: 8px;
}
.tg__en {
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tg__jp { font-size: 13px; color: rgba(244,243,240,.62); }
@media (min-width: 600px)  { .tg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg { grid-template-columns: repeat(4, 1fr); } }

/* 支援メニュー */
.sup { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.sup li {
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-block: clamp(20px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 0 16px;
  align-items: baseline;
}
.sup__en {
  font-family: var(--f-en);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,243,240,.5);
}
.sup__jp { font-size: 14.5px; letter-spacing: .05em; }
@media (min-width: 900px) { .sup li { grid-template-columns: 180px 1fr; } }
.tone-light .sup { border-top-color: var(--rule); }
.tone-light .sup li { border-bottom-color: var(--rule); }
.tone-light .sup__en { color: var(--gray); }

/* 数式ブロック（既存 × 既存 + iPS → 新収益） */
.eq {
  display: grid;
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 46px);
  font-family: var(--f-serif);
  letter-spacing: .06em;
}
.eq__r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eq__t { font-size: clamp(16px, 2.2vw, 22px); }
.eq__o { font-family: var(--f-en); font-weight: 200; font-size: clamp(18px, 2.4vw, 26px); opacity: .5; }
.eq__res {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--f-en);
  font-weight: 200;
  font-size: clamp(26px, 5vw, 52px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wellness-acid);
}

/* ==========================================================================
   COMPANY
   ========================================================================== */
.tbl { border-top: 1px solid var(--rule); }
.tbl__r {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(18px, 2.2vw, 26px);
  display: grid;
  gap: 6px 0;
}
.tbl__k {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
  padding-top: .35em;
}
.tbl__k b {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--fg);
  text-transform: none;
  margin-bottom: 4px;
}
.tbl__v { font-size: 14.5px; line-height: 2; }
.tbl__v em { font-style: normal; font-family: var(--f-en); letter-spacing: .08em; color: var(--gray); margin-left: .6em; }
@media (min-width: 768px) {
  .tbl__r { grid-template-columns: minmax(180px, 240px) 1fr; gap: 0 clamp(24px, 4vw, 60px); }
}

/* 代表メッセージ */
.msg { margin-top: clamp(30px, 4vw, 52px); max-width: 40em; }
.msg .lead + .lead { margin-top: 1.4em; }
.msg__pt {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: .05em;
  line-height: 1.7;
  margin-block: clamp(26px, 3vw, 36px);
}
.msg__sig {
  margin-top: clamp(30px, 3.6vw, 44px);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; letter-spacing: .12em; color: rgba(244,243,240,.62);
}
.msg__sig b { font-family: var(--f-serif); font-weight: 400; font-size: 18px; letter-spacing: .14em; color: var(--off-white); }

/* ==========================================================================
   CONTACT フォーム
   ========================================================================== */
.form { max-width: 780px; }
.form__r { margin-bottom: clamp(24px, 3vw, 34px); }
.form__l {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .1em;
  margin-bottom: 12px;
}
.form__req {
  font-family: var(--f-en);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 3px 8px;
  line-height: 1;
  opacity: .7;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea,
.form select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 14px 2px;
  font-size: 15px;
  letter-spacing: .05em;
  border-radius: 0;
  appearance: none;
  transition: border-color .5s var(--ease);
}
.form textarea { min-height: 170px; resize: vertical; line-height: 2; }
/* appearance:none で消えるプルダウンの矢印を自前で描く */
.form select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23050506' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-bottom-color: var(--black);
}
.form input::placeholder, .form textarea::placeholder { color: rgba(5,5,6,.28); }
.form__note { margin-top: clamp(26px, 3vw, 36px); }
.form__submit { margin-top: clamp(30px, 3.6vw, 44px); }
.form__submit .btn { min-width: min(340px, 100%); }
@media (max-width: 600px) { .form__submit .btn { min-width: 100%; } }
.form__err {
  color: #B3261E;
  font-size: 12.5px;
  margin-top: 8px;
  display: none;
}
.form__r.is-err input,
.form__r.is-err textarea { border-bottom-color: #B3261E; }
.form__r.is-err .form__err { display: block; }

.ct-info { display: grid; gap: clamp(22px, 2.6vw, 32px); }
.ct-info dt {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.ct-info dd { font-size: 14.5px; line-height: 2; }

/* thanks */
.thx { min-height: 76svh; display: flex; align-items: center; }
.thx__in { text-align: left; max-width: 900px; }
.thx__h { margin-top: 20px; }
.thx__cta { margin-top: clamp(34px, 4vw, 50px); }

/* ==========================================================================
   汎用：セクション見出し + 本文の縦積みブロック
   ========================================================================== */
.blk + .blk { margin-top: clamp(56px, 7vw, 104px); }
.blk__h {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(24px, 4.4vw, 44px);
  line-height: 1.45;
  letter-spacing: .03em;
}
.blk__h span { display: block; }
.blk__lead { margin-top: clamp(20px, 2.4vw, 30px); max-width: 34em; }
.blk__big {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 6.4vw, 64px);
  line-height: 1.4;
  letter-spacing: .03em;
  margin-top: clamp(24px, 3vw, 40px);
}

/* 次ページ導線 */
.nx { border-top: 1px solid var(--rule); }
.nx__a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(30px, 4vw, 52px);
  transition: padding-inline .6s var(--ease);
}
.nx__l { display: grid; gap: 8px; }
.nx__k { font-family: var(--f-en); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gray); }
.nx__t { font-family: var(--f-serif); font-size: clamp(20px, 3.4vw, 32px); letter-spacing: .06em; }
@media (hover: hover) { .nx__a:hover { padding-left: 14px; } }
.tone-dark .nx, .tone-black .nx, .tone-deep .nx { border-top-color: var(--rule-dark); }


/* ==========================================================================
   TOP FV：ダーク版（実写1枚を主役にする案 / OPEN-01 の比較用）
   canvas の3Dは使わず、写真を全面に敷く。コピーの構成・順序は白版と同じ。
   ========================================================================== */
.fv--photo {
  background: var(--black);
  color: var(--off-white);
}
.fv--photo .fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fv--photo .fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform: scale(1.02);
}
@media (max-width: 1024px) {
  .fv--photo .fv__bg img { object-position: 62% center; }
}

/* コピーを置く側を落として可読性を確保する。写真の見せ場は右側に残す */
.fv--photo .fv__veil {
  background:
    linear-gradient(to bottom, rgba(4,7,11,.86) 0%, rgba(4,7,11,.42) 30%, rgba(4,7,11,.30) 52%, rgba(4,7,11,.92) 100%);
}
@media (min-width: 1025px) {
  .fv--photo .fv__veil {
    background:
      linear-gradient(to right, rgba(4,7,11,.94) 0%, rgba(4,7,11,.78) 34%, rgba(4,7,11,.30) 62%, rgba(4,7,11,.10) 100%),
      linear-gradient(to bottom, rgba(4,7,11,.55) 0%, rgba(4,7,11,0) 26%);
  }
}

.fv--photo .fv__sub   { color: rgba(244,243,240,.72); }
.fv--photo .eyebrow   { color: var(--gray-2); }
.fv--photo .lead      { color: rgba(244,243,240,.68); }
.fv--photo .fv__scroll-txt { color: rgba(244,243,240,.6); }
.fv--photo .fv__scroll-line { background: rgba(244,243,240,.28); }
.fv--photo .fv__scroll-line::after { background: var(--off-white); }

.fv--photo .btn {
  border-color: rgba(255,255,255,.42);
  color: var(--off-white);
}
.fv--photo .btn::before { background: var(--off-white); }
.fv--photo .btn:hover { color: var(--black); border-color: var(--off-white); }