@charset "UTF-8";
/* ============================================
   grape-prototype : style.css
   参照 generalleclerc-shigeru.com のレイアウトを忠実に再現
   ============================================ */

/* ── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1,h2,h3,h4,h5,h6, p, a, img,
small, b, u, i, dl, dt, dd, ol, ul, li, section, article, footer, nav, figure {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
html { line-height: 1; -webkit-text-size-adjust: 100%; }
ol, ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
/* 注意：`a:visited` を併記すると詳細度(0,1,1)が `.btnPill` 等のクラス(0,1,0)を上回り、
   訪問済みリンクだけ文字色が inherit（黒）に化けるため、a のみに指定する */
a { text-decoration: none; color: inherit; }

/* キーボード操作の可視化（金のフォーカスリング：暗背景・明背景の両方で視認可） */
a:focus-visible, button:focus-visible {
  outline: 2px solid #D4B57E;
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 400;
  color: #000;
  background: #FFF;
  overflow-x: clip; /* hidden だと overflow-y が auto 化し position:sticky が壊れるため clip を使う */
  -webkit-font-smoothing: antialiased;
}
/* ブランドフォント別名（旧クラス名互換） */
.fontViga      { font-family: "Cormorant Garamond", serif; font-weight: 600; font-style: italic; }
.fontCaveat    { font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic; }
.fontMontserrat{ font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: 0.3em; }
.fontMincho    { font-family: "Zen Old Mincho", "Noto Serif JP", serif; }
.fontGaramond  { font-family: "Cormorant Garamond", serif; }

/* ──────────────────────────────────────
   Loading
   ────────────────────────────────────── */
.loading {
  position: fixed; inset: 0;
  background: radial-gradient(125% 120% at 50% 42%, #6a005f 0%, #3a0032 72%);  /* ブランド葡萄・明るめ */
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loading.is-hidden { opacity: 0; visibility: hidden; }
.loading .main { text-align: center; }

/* ロゴ・ローダー：ブランドマーク（円相＋ブドウ）を薄く表示し、
   ゴールドのハイライトが円相に沿って一周し続ける */
.loaderMark {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto;
}
.loaderMark__base {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0.20;            /* 薄い下地（白ロゴ） */
}
.loaderMark__sweep {
  position: absolute; inset: 0;
  overflow: hidden;
  /* 外周の円相だけをマスク（中央のブドウは除外＝色が変わるのは円だけ） */
  -webkit-mask: url('../logo/logo_ring_only.png') center/contain no-repeat;
          mask: url('../logo/logo_ring_only.png') center/contain no-repeat;
}
.loaderMark__sweep::before {
  content: '';
  position: absolute; inset: -30%;
  /* ゴールドのスイープ（葡萄色の背景に映える） */
  background: conic-gradient(from 0deg,
    transparent 0deg, #D4B57E 24deg, #F0D9A8 60deg, #D4B57E 92deg, transparent 116deg, transparent 360deg);
  animation: loaderSweep 1.5s linear infinite;
}
@keyframes loaderSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loaderMark__sweep::before { animation: none; }
}

.loading-text {
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.34em;
  color: #FFF;
  margin: 24px 0 0;
}
.loading-text span {
  display: block;
  margin-top: 8px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: rgba(255,255,255,0.55);
}

/* ──────────────────────────────────────
   Content
   ────────────────────────────────────── */
.mainSite, .content { width: 100%; }
/* 全コンテンツを固定タイムラプスステージ(.tlStage)の上に重ねる */
.mainSite { position: relative; z-index: 1; }

/* ──────────────────────────────────────
   タイムラプス固定ステージ（背景の時間変化）
   - position:fixed の div レイヤーを scroll で opacity クロスフェード
   - background-attachment:fixed を使わないため iOS でも破綻しない
   ────────────────────────────────────── */
.tlStage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #0a0810;
  opacity: 0;                 /* 既定は非表示。タイムラプス区間でのみ is-active */
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.tlStage.is-active { opacity: 1; }
.tlLayer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 48%;   /* 同一カメラ4枚の地平線をそろえる */
  background-repeat: no-repeat;
  opacity: 0;                        /* opacity は JS が scroll 連動で制御 */
  will-change: opacity;
}
.tlLayer.base { opacity: 1; }        /* 最背面(back-young)は常時不透明＝隙間防止 */
@media (prefers-reduced-motion: reduce) {
  .tlStage { transition: none; }
}

/* ── 固定コーナーロゴ（スクロール後に出現） ── */
.cornerLogo {
  position: fixed;
  top: 24px; left: 32px;
  z-index: 9999;
  width: 64px; height: 64px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  pointer-events: none;
}
.cornerLogo.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cornerLogo a { display: block; }
.cornerLogo img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  background: #FFF;
  padding: 4px;
}

/* ── HERO：背景画像（night.jpg）＋微補正 ── */
.hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #050609;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* (削除済み：.hero--night 残骸を排除) */
.hero-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 上寄せして葉のシルエットと山並みを画面中央寄りに */
  object-position: center 30%;
  display: block;
  z-index: 0;
  /* レンダリング品質ヒント：細部を保持 */
  image-rendering: -webkit-optimize-contrast;
}
/* ヒーローの暗化グラデ：ロゴ周辺だけ控えめに暗化（中央の夕日は残す） */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* 上下のみ軽い暗化 */
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.00) 18%, rgba(0,0,0,0.00) 78%, rgba(0,0,0,0.20) 100%);
}

/* ── topContents：参照に忠実なポジショニング ── */
.topContents {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: 100%; height: 100vh;
}
.topContents > * { color: #FFF; }

/* ロゴ：参照は h1 を画面中央上寄り（translate -50%, -85%） */
/* ブランドロゴ画像（中央大型） */
.topContents h1.brandLogo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  width: clamp(280px, 36vw, 560px);
  opacity: 0;
  animation: brandLogoIn 1.4s ease-out 1.6s forwards;
}
.topContents h1.brandLogo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.45));
}
@keyframes brandLogoIn {
  0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.94); letter-spacing: 0.4em; }
  100% { opacity: 1; transform: translate(-50%, -55%) scale(1);    letter-spacing: 0.25em; }
}

/* 星の集合演出（JSが .is-stars を付与）：CSS登場アニメを止め、星の結像後にクロスフェード */
.hero__stars {
  position: absolute; inset: 0;
  /* canvasは置換要素＝insetだけでは伸びない（属性サイズが勝つ）ため明示指定 */
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.topContents h1.brandLogo.is-stars {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -55%) scale(0.985);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.topContents h1.brandLogo.is-stars.is-logo-in {
  opacity: 1;
  transform: translate(-50%, -55%) scale(1);
}

/* 地名：bottom左寄せ（参照：bottom: 120px, translate -130%, 0） */
.topContents .heroPlace {
  position: absolute;
  left: 50%; bottom: 120px;
  transform: translate(-130%, 0);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.45em;
  white-space: nowrap;
}

/* 定点観測カメラの意匠タイムスタンプ（右下固定・ヒーロー＋タイムラプス区間のみ表示） */
.fieldStamp {
  position: fixed;
  right: 28px; bottom: 26px;
  z-index: 90;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.fieldStamp.is-off,
.fieldStamp.is-swap { opacity: 0; }
.fieldStamp.is-swap { transition: opacity 0.22s ease; }
.no-js .fieldStamp { display: none; }
@media (max-width: 640px) {
  .fieldStamp { right: 14px; bottom: 14px; font-size: 9px; letter-spacing: 0.24em; }
}

/* ── HERO ACTIONS：右上ヘッダーのフロストガラス・ピルボタン ── */
.heroActions {
  position: absolute;
  top: 28px; right: 32px;
  z-index: 6;
  display: flex;
  gap: 12px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}
.heroActions .action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #FFF;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);   /* 明るい空・雲の上でも白文字が沈まないように */
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.heroActions .action--shop,
.heroActions .action:hover { text-shadow: none; }   /* 白地（常時・ホバー時）は影なし */
.heroActions .action:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #320028;
}
.heroActions .action__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.heroActions .action__label { line-height: 1; }

/* Shop は強調：背景を薄白で常時押し出し */
.heroActions .action--shop {
  background: rgba(255, 255, 255, 0.94);
  color: #320028;
}
.heroActions .action--shop:hover {
  background: #320028;
  color: #FFF;
  transform: translateY(-1px);
}

/* ── SCROLL HINT：中央下、洗練された細線 ── */
.scrollHint {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translate(-50%, 0);
  z-index: 5;
}
.scrollHint a {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #FFF;
}
.scrollHint__label {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.45em;
  opacity: 0.85;
}
.scrollHint__line {
  position: relative;
  display: block;
  width: 1px; height: 56px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.scrollHint__line i {
  position: absolute;
  top: -100%; left: 0;
  display: block;
  width: 100%; height: 60%;
  background: linear-gradient(180deg, transparent 0%, #FFF 100%);
  animation: scrollFlow 2.4s ease-in-out infinite;
}
@keyframes scrollFlow {
  0%   { top: -60%; }
  100% { top: 100%; }
}

/* レスポンシブ：モバイルでは Shop のみテキスト省略しアイコン主体 */
@media (max-width: 640px) {
  .heroActions { top: 16px; right: 16px; padding: 4px; }
  .heroActions .action { padding: 9px 14px; font-size: 13px; gap: 6px; }
  .heroActions .action--contact .action__label { display: none; }
}

/* container.start.shape は撤去済み（ヒーローを覆い隠していたため） */

/* ── back：固定背景の繋ぎセクション ── */
.back {
  /* 背景は .tlStage が担当（ここは初期フレーム back-young を見せる100vhのつなぎ） */
  width: 100%;
  height: 100vh;
  position: relative;
}

/* ──────────────────────────────────────
   WHAT'S Clean：シンプル縦積み・左寄せ
   ────────────────────────────────────── */
.whatsClean {
  /* 背景は .tlStage（whats-day）が担当 */
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: #FFF;
  display: flex;
  align-items: center;
  padding: 120px 0;
}
.whatsClean::before {
  /* 左半分を暗化（編集誌の見開き左ページ風）。下段本文が草地に溶けないよう強め */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.08) 75%);
  pointer-events: none;
}
@media (max-width: 768px) {
  /* モバイルは全面スクリム（左暗化だけでは本文が判読不能になる） */
  .whatsClean::before { background: rgba(10,8,16,0.58); }
}
.whatsClean__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
}

/* エミブロウ：番号 + 細線 + キッカー */
.whatsClean__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.9);
}
.whatsClean__eyebrow .num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  color: #D4B57E;
}
.whatsClean__eyebrow .bar {
  display: block;
  width: 64px; height: 1px;
  background: rgba(255,255,255,0.6);
}
.whatsClean__eyebrow .kicker {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.4em;
  text-transform: lowercase;
}

/* タイトル：一文を2行で（自動行送り） */
.whatsClean__title {
  margin: 0 0 32px;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: #FFF;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.whatsClean__title .line {
  display: block;
  text-indent: 0.16em;
}

/* 装飾区切り：dash + diamond + dash */
.whatsClean__sep {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 64px;
  width: 100%;
  max-width: 380px;
}
.whatsClean__sep .dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,181,126,0.0) 0%, rgba(212,181,126,0.85) 50%, rgba(212,181,126,0.0) 100%);
}
.whatsClean__sep .diamond {
  width: 8px; height: 8px;
  background: #D4B57E;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* facts：アイコン + 本体（ラベル＋値） */
.whatsClean__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
}
.whatsClean__facts li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  position: relative;
}
.whatsClean__facts li:first-child { border-top: 1px solid rgba(255,255,255,0.16); }

/* アイコン：金色の線画 */
.whatsClean__facts .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  color: #D4B57E;
  position: relative;
}
.whatsClean__facts .icon::before {
  /* 円フレーム */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212,181,126,0.45);
  border-radius: 50%;
}
.whatsClean__facts .icon svg {
  width: 28px; height: 28px;
  position: relative;
  z-index: 1;
}

.whatsClean__facts .body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.whatsClean__facts .lbl {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: #D4B57E;
  text-transform: uppercase;
}
.whatsClean__facts .val {
  font-family: "Noto Serif JP", "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.95);
  max-width: 640px;
}

/* 四隅のコーナーマーカー（編集誌風） */
.whatsClean__corner {
  position: absolute;
  width: 28px; height: 28px;
  z-index: 3;
  pointer-events: none;
}
.whatsClean__corner--tl {
  top: 56px; left: 56px;
  border-top: 1px solid rgba(212,181,126,0.7);
  border-left: 1px solid rgba(212,181,126,0.7);
}
.whatsClean__corner--tr {
  top: 56px; right: 56px;
  border-top: 1px solid rgba(212,181,126,0.7);
  border-right: 1px solid rgba(212,181,126,0.7);
}
.whatsClean__corner--bl {
  bottom: 56px; left: 56px;
  border-bottom: 1px solid rgba(212,181,126,0.7);
  border-left: 1px solid rgba(212,181,126,0.7);
}
.whatsClean__corner--br {
  bottom: 56px; right: 56px;
  border-bottom: 1px solid rgba(212,181,126,0.7);
  border-right: 1px solid rgba(212,181,126,0.7);
}

@media (max-width: 768px) {
  .whatsClean__corner { width: 18px; height: 18px; }
  .whatsClean__corner--tl, .whatsClean__corner--tr { top: 24px; }
  .whatsClean__corner--bl, .whatsClean__corner--br { bottom: 24px; }
  .whatsClean__corner--tl, .whatsClean__corner--bl { left: 24px; }
  .whatsClean__corner--tr, .whatsClean__corner--br { right: 24px; }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .whatsClean { padding: 80px 0; }
  .whatsClean__inner { padding: 0 24px; }
  .whatsClean__facts li {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 22px 0;
  }
  .whatsClean__facts .icon { width: 40px; height: 40px; }
  .whatsClean__facts .icon svg { width: 21px; height: 21px; }
}

/* ──────────────────────────────────────
   VISION：全幅固定背景（夕方）＋右パネル
   WHAT'S(昼) からタイムラプス連続する同構図
   ────────────────────────────────────── */
.vision {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;   /* パネルを右に */
  align-items: center;
  overflow: hidden;
  z-index: 5;
}
.vision__bg {
  /* 背景は .tlStage（vision-evening）が担当。スクリムのみ残す */
  position: absolute; inset: 0;
  z-index: 0;
}
.vision__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* 右側（テキスト側）を暗くして文字を読みやすく。明るい夕空に負けないよう強め */
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(8,6,14,0.30) 42%, rgba(8,6,14,0.88) 100%);
}
.vision__panel {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 620px;
  padding: 100px 80px 100px 40px;
  color: #FFF;
}
.vision__eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 28px;
}
.vision__eyebrow .num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 600; font-size: 24px;
  color: #D4B57E;
}
.vision__eyebrow .bar { width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
.vision__eyebrow .kicker {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400; font-size: 16px;
  letter-spacing: 0.4em; text-transform: lowercase;
}
.vision__title {
  margin: 0 0 36px;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.9;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.vision__body p {
  font-family: "Noto Serif JP", "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.1em;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.vision__sign {
  display: flex; align-items: center; gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.vision__sign .circle-photo {
  width: 56px; height: 56px;
  border: 1px solid rgba(212,181,126,0.6);
}
.vision__sign-name {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.9);
}
@media (max-width: 900px) {
  .vision { justify-content: center; }
  /* 背景は価値観と同じく fixed tlStage（スクロールでクロスフェード）に任せる。
     カードを廃し全画面背景に直置き、可読性はスクリム＋文字影で担保 */
  .vision__scrim { background: rgba(10,8,16,0.56); }
  .vision__panel { width: 100%; max-width: none; padding: 80px 32px; }
}
.textArea .man {
  text-align: right;
  margin-top: 48px;
}
.circle-photo {
  display: inline-block;
  width: 80px; height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
}
.circle-photo.lg { width: 159px; height: 159px; }

/* ──────────────────────────────────────
   METHOD：全幅固定背景（袋掛け）＋右パネル
   VISION からタイムラプス連続する同構図
   ────────────────────────────────────── */
.method {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;   /* パネルを左に */
  align-items: center;
  overflow: hidden;
  z-index: 5;
}
.method__bg {
  /* 背景は .tlStage（method-bagging）が担当。スクリムのみ残す */
  position: absolute; inset: 0;
  z-index: 0;
}
.method__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* 左側（テキスト側）を暗く。背景が雪＋白空のため強め */
  background: linear-gradient(90deg, rgba(8,6,14,0.90) 0%, rgba(8,6,14,0.50) 52%, rgba(8,6,14,0.10) 80%, rgba(0,0,0,0) 100%);
}
.method__panel {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 620px;
  padding: 100px 40px 100px 80px;   /* 左寄せ：左の余白を広く */
  color: #FFF;
}
.method__eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 28px;
}
.method__eyebrow .num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 600; font-size: 24px;
  color: #D4B57E;
}
.method__eyebrow .bar { width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
.method__eyebrow .kicker {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400; font-size: 16px;
  letter-spacing: 0.4em; text-transform: lowercase;
}
.method__title {
  margin: 0 0 36px;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.method__body p {
  font-family: "Noto Serif JP", "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.1em;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
@media (max-width: 900px) {
  .method { justify-content: center; }
  /* 冬の雪＝明るい背景なので少し強め。背景は fixed tlStage に任せて全画面・直置き */
  .method__scrim { background: rgba(10,8,16,0.60); }
  .method__panel { width: 100%; max-width: none; padding: 80px 32px; }
}

/* ──────────────────────────────────────
   Footer
   ────────────────────────────────────── */
/* ===== ⑥ Footer（ダーク葡萄） ===== */
.site-footer {
  position: relative; z-index: 5;
  background: #24001d; color: #E9DCEA;
  padding: 84px 6vw 36px; text-align: left;
}
.footer__inner {
  max-width: 1180px; margin: 0 auto; padding-bottom: 46px;
  display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(233,220,234,0.14);
}
.footer__logo { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: 26px; letter-spacing: 0.2em; color: #fff; margin: 0 0 14px; }
.footer__place { font-family: "Cormorant Garamond", serif; font-style: italic; letter-spacing: 0.32em; font-size: 13px; color: #D4B57E; margin: 0 0 8px; text-transform: uppercase; }
.footer__addr { font-family: "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: 0.06em; color: rgba(233,220,234,0.6); margin: 0 0 18px; }
.footer__mission { font-family: "Noto Serif JP", serif; font-size: 13px; line-height: 1.95; color: rgba(233,220,234,0.82); margin: 0; }
.footer__nav { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__h { font-family: "Cormorant Garamond", serif; font-style: italic; letter-spacing: 0.24em; font-size: 12px; color: #D4B57E; margin: 0 0 6px; text-transform: uppercase; }
.footer__col a { font-family: "Noto Sans JP", sans-serif; font-size: 14px; letter-spacing: 0.06em; color: rgba(233,220,234,0.85); text-decoration: none; transition: color 0.25s ease; }
.footer__col a:hover { color: #fff; }
.footer__bottom { max-width: 1180px; margin: 26px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__copy { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13px; letter-spacing: 0.1em; color: rgba(233,220,234,0.55); margin: 0; }
.footer__legal { display: flex; gap: 12px; align-items: center; margin: 0; }
.footer__legal a { font-family: "Noto Sans JP", sans-serif; font-size: 12px; letter-spacing: 0.06em; color: rgba(233,220,234,0.55); text-decoration: none; transition: color 0.25s ease; }
.footer__legal a:hover { color: #D4B57E; }
.footer__legal span { color: rgba(233,220,234,0.28); }
@media (max-width: 760px) {
  .site-footer { padding: 60px 22px 30px; }
  .footer__inner { flex-direction: column; gap: 36px; }
  .footer__nav { gap: 44px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ──────────────────────────────────────
   画像 reveal（スクロール時に段階表示）
   ────────────────────────────────────── */
.reveal-target {
  position: relative;
  overflow: hidden;
}
.reveal-target::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #FAF6EE;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: 5;
  pointer-events: none;
}
.reveal-target.is-revealed::after {
  transform: scaleX(0);
}

/* ── no-js フォールバック：JSが動かない環境でも全コンテンツを表示 ── */
.no-js .loading { display: none; }
.no-js .inviewfadeIn, .no-js .inviewfadeIn1, .no-js .inviewfadeIn2,
.no-js .inviewfadeInUp, .no-js .inviewfadeInLeft1, .no-js .inviewfadeInRight1,
.no-js .vision__panel, .no-js .method__panel, .no-js .foreveryone__panel,
.no-js .story-rv { opacity: 1 !important; transform: none !important; }
.no-js .hcard__media { clip-path: none; transform: none; opacity: 1; }
.no-js .hcard__meta, .no-js .hcard__copy, .no-js .hcard__price { opacity: 1; transform: none; }
.no-js .story__title .line > span { transform: none; }
/* タイムラプス背景はJS依存のため、区間セクションには暗色フォールバック */
.no-js .back, .no-js .whatsClean, .no-js .vision,
.no-js .method, .no-js .foreveryone { background-color: #16091c; }

/* ──────────────────────────────────────
   inview fade-in
   ────────────────────────────────────── */
.inviewfadeIn, .inviewfadeIn1, .inviewfadeIn2,
.inviewfadeInUp, .inviewfadeInLeft1, .inviewfadeInRight1 {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.inviewfadeIn, .inviewfadeIn1, .inviewfadeIn2 { transform: translateY(20px); }
.inviewfadeInUp     { transform: translateY(40px); }
.inviewfadeInLeft1  { transform: translateX(-40px); }
.inviewfadeInRight1 { transform: translateX(40px); }

.is-in { opacity: 1 !important; transform: translate(0,0) !important; }
.inview1.is-in .primepearTxt,
.inview1.is-in .somethingTxt {
  animation: popIn 0.8s ease-out;
}
@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────
   Responsive
   ────────────────────────────────────── */
@media (max-width: 768px) {
  .topContents h1 { width: 80%; }
  /* scroll ヒント（bottom:36px＋縦線56px）と重ならない位置へ */
  .topContents .heroPlace { transform: translate(-50%, 0); left: 50%; bottom: 150px; }
  .cornerLogo { width: 44px; height: 44px; top: 14px; left: 14px; }
  .topContact, .topShop { display: none; }
  .container.start { height: 60vh; }
  .back { height: 60vh; }
  /* whatsClean / vision のレスポンシブは独自定義済み */
  .secret { background: #FFF; padding: 40px 24px; margin: 80px auto; }
  .secret .secretText { position: static; width: 100%; }
  .secret .secretText p { padding: 32px 24px; }
  .loveInner { padding-bottom: 60%; background-attachment: scroll; }
  .productTop { flex-direction: column; margin-top: -30%; gap: 40px; align-items: center; }
  .product1, .product2, .product3 { width: 100%; }
  .productMain { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────
   03 for everyone：全幅固定背景（作業風景）＋右パネル（.method と同構造）
   背景は .tlStage（method-bagging）が担当。スクリムのみ残す
   ────────────────────────────────────── */
.foreveryone {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  z-index: 5;
}
.foreveryone__bg { position: absolute; inset: 0; z-index: 0; }
.foreveryone__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(8,6,14,0.18) 42%, rgba(8,6,14,0.82) 100%);
}
.foreveryone__panel {
  position: relative; z-index: 2;
  width: 46%; max-width: 620px;
  padding: 100px 80px 100px 40px;
  color: #FFF;
}
.foreveryone__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; }
.foreveryone__eyebrow .num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 600; font-size: 24px;
  color: #D4B57E;
}
.foreveryone__eyebrow .bar { width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
.foreveryone__eyebrow .kicker {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400; font-size: 16px;
  letter-spacing: 0.4em; text-transform: lowercase;
}
.foreveryone__title {
  margin: 0 0 36px;
  font-family: "Zen Old Mincho", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.foreveryone__body p {
  font-family: "Noto Serif JP", "Zen Old Mincho", serif;
  font-weight: 400; font-size: 15px; line-height: 2.4; letter-spacing: 0.1em;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
@media (max-width: 900px) {
  .foreveryone { justify-content: center; }
  /* 背景は fixed tlStage（クロスフェード）に任せて全画面・直置き */
  .foreveryone__scrim { background: rgba(10,8,16,0.56); }
  .foreveryone__panel { width: 100%; max-width: none; padding: 80px 32px; }
}

/* ──────────────────────────────────────
   説明テキスト：カードなしで背景に直置き＋横スライドイン（軽量CSSのみ）
   可読性は片側グラデのスクリム＋文字影で確保／写真を主役に＝タイムラプス感
   ────────────────────────────────────── */
.vision__panel, .method__panel, .foreveryone__panel {
  /* フロストガラス：写真主役のタイムラプス感を保ちつつ可読性を保証
     （ヒーローの Shop/Contact ピルと同じデザイン言語） */
  width: 44%;
  max-width: 560px;
  padding: 44px 48px;
  border-radius: 18px;
  background: rgba(10, 8, 16, 0.38);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.60);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
/* 初期位置：右カードは右から／左カード(method)は左から */
.vision__panel, .foreveryone__panel { transform: translateX(120px); margin-right: 5vw; }
.method__panel { transform: translateX(-120px); margin-left: 5vw; }
/* 画面に入ったら定位置へスライド＋フェード */
.vision__panel.is-card-shown,
.method__panel.is-card-shown,
.foreveryone__panel.is-card-shown { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .vision__panel, .foreveryone__panel,
  .method__panel {
    width: 100%; max-width: 600px;
    margin: 0;
    padding: 80px 28px;
    /* 価値観セクションと同じ「カードなし・全画面背景に直置き」。
       箱で囲うと写真がカード裏に見えて timelapse 感が消えるため、背景を全画面に開放。
       iOS対策（backdrop-filter黒落ち）も兼ねて blur/背景/枠を撤去し、可読性はスクリム＋文字影で担保 */
    background: none;
    border: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: 0 2px 18px rgba(0,0,0,0.92);
    transform: translateY(48px);   /* モバイルは下から */
  }
  .vision__body p, .method__body p, .foreveryone__body p {
    text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.55);
  }
  .vision__panel.is-card-shown,
  .method__panel.is-card-shown,
  .foreveryone__panel.is-card-shown { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vision__panel, .method__panel, .foreveryone__panel { transform: none; transition: opacity 0.5s ease; }
}



/* ──────────────────────────────────────
   お知らせ：実務連絡のミニマル帯（商品ゾーンへの入口・生成り背景）
   ────────────────────────────────────── */
.news {
  position: relative; z-index: 5;
  background: #FAF7F1;
  color: #320028;
  padding: 66px 6vw 6px;     /* 下は harvest に連続（生成りゾーンの先頭） */
}
.news__inner { max-width: 1100px; margin: 0 auto; }
.news__eyebrow { display: inline-flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
.news__eyebrow .bar { width: 40px; height: 1px; background: #D4B57E; align-self: center; }
.news__eyebrow .kicker { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: 0.4em; color: #920783; text-transform: lowercase; }
.news__eyebrow .ja { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: 16px; letter-spacing: 0.22em; color: #320028; }

.news__list { border-top: 1px solid rgba(50,0,40,0.12); margin: 0; padding: 0; list-style: none; }
.news__item { border-bottom: 1px solid rgba(50,0,40,0.12); }
.news__link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 16px 6px; text-decoration: none; color: inherit; transition: background 0.3s ease;
}
.news__link:hover { background: rgba(146,7,131,0.05); }
.news__date { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px; letter-spacing: 0.08em; color: #9a7e92; white-space: nowrap; }
.news__title { font-family: "Noto Serif JP", serif; font-size: 15px; line-height: 1.6; color: #320028; transition: color 0.3s ease; }
.news__link:hover .news__title { color: #920783; }
.news__arrow { font-style: normal; color: #920783; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.news__link:hover .news__arrow { transform: translateX(5px); }

.news__more {
  display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 0;
  font-family: "Zen Old Mincho", serif; font-size: 13px; letter-spacing: 0.12em; color: #920783; text-decoration: none;
  border-bottom: 1px solid rgba(146,7,131,0.4); padding-bottom: 3px; transition: gap 0.3s ease, border-color 0.3s ease;
}
.news__more i { font-style: normal; transition: transform 0.3s ease; }
.news__more:hover { gap: 11px; }
.news__more:hover i { transform: translateX(3px); }

@media (max-width: 640px) {
  .news { padding: 52px 20px 4px; }
  .news__link { grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 4px; }
  .news__title { grid-column: 1 / -1; }
  .news__arrow { display: none; }
}

/* ──────────────────────────────────────
   ① 今年の実り（PRODUCTS／品種）— 生成り背景・カードグリッド
   ────────────────────────────────────── */
.harvest {
  position: relative; z-index: 5;
  background: #FAF7F1;
  color: #320028;            /* ブランド葡萄インク grape-900 */
  padding: 90px 6vw 110px;   /* お知らせ帯から連続するため上を詰める */
  overflow: hidden;
}

/* 動く背景：果実色のソフトな光がゆっくり漂う */
.harvest__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hblob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.28; will-change: transform; }
.hblob--grape  { width: 48vw; height: 48vw; left: -14vw; top: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(142,91,176,0.45), rgba(142,91,176,0) 70%);
  animation: hdrift1 32s ease-in-out infinite; }
.hblob--peach  { width: 42vw; height: 42vw; right: -12vw; top: 30%;
  background: radial-gradient(circle at 50% 50%, rgba(244,178,166,0.40), rgba(244,178,166,0) 70%);
  animation: hdrift2 38s ease-in-out infinite; }
.hblob--muscat { width: 40vw; height: 40vw; left: 30vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(178,210,120,0.34), rgba(178,210,120,0) 70%);
  animation: hdrift3 44s ease-in-out infinite; }
@keyframes hdrift1 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6vw,4vw) scale(1.12); } }
@keyframes hdrift2 { 0%,100%{ transform: translate(0,0) scale(1.05); } 50%{ transform: translate(-5vw,5vw) scale(0.92); } }
@keyframes hdrift3 { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(4vw,-6vw) scale(1.1); } }

/* コンテンツを背景より前面へ */
.harvest__head, .harvest__feature, .harvest__grid, .harvest__cta { position: relative; z-index: 1; }

.harvest__head { max-width: 1200px; margin: 0 auto 56px; text-align: center; }
.harvest__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.harvest__eyebrow .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 22px; color: #D4B57E; }
.harvest__eyebrow .bar { width: 48px; height: 1px; background: rgba(50,0,40,0.35); }
.harvest__eyebrow .kicker { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: 0.4em; color: #920783; }
.harvest__title { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: clamp(30px, 4vw, 52px); letter-spacing: 0.14em; margin: 0 0 22px; }
.harvest__lead { font-family: "Noto Serif JP", serif; font-size: 15px; line-height: 2.2; letter-spacing: 0.08em; color: #5E4858; }

.harvest__feature { max-width: 1240px; margin: 0 auto 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; }
.harvest__grid    { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 22px; }

/* カード：枠なし・画像主役の編集レイアウト */
.hcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; --rd: 0s; }

/* メディア：角丸＋マスク出現（スクロールで下から立ち上がり＋マスクが開く＋フェード） */
.hcard__media {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(50,0,40,0.10);
  /* 初期：下にずれ・マスクで隠れ・透明 */
  clip-path: inset(0 0 100% 0);
  transform: translateY(48px);
  opacity: 0;
  transition: clip-path 1.0s cubic-bezier(0.22,1,0.36,1),
              transform 1.0s cubic-bezier(0.22,1,0.36,1),
              opacity 0.8s ease,
              box-shadow 0.55s ease;
  transition-delay: var(--rd);
}
.hcard.is-shown .hcard__media { clip-path: inset(0 0 0 0); transform: translateY(0); opacity: 1; }

/* スタッガー（カード単位で遅延を変数に） */
.harvest__feature .hcard:nth-child(2) { --rd: 0.12s; }
.harvest__feature .hcard:nth-child(3) { --rd: 0.24s; }
.harvest__feature .hcard:nth-child(4) { --rd: 0.36s; }
.harvest__grid .hcard:nth-child(2) { --rd: 0.08s; }
.harvest__grid .hcard:nth-child(3) { --rd: 0.16s; }
.harvest__grid .hcard:nth-child(4) { --rd: 0.24s; }
.harvest__grid .hcard:nth-child(5) { --rd: 0.32s; }

/* ホバーはリフト（遅延なしで即反応） */
.hcard.is-shown:hover .hcard__media { transition-delay: 0s; transform: translateY(-8px); box-shadow: 0 32px 64px rgba(50,0,40,0.20); }

/* 写真：フレーム内で縦パララックス＋ホバーでゆっくりズーム */
.hcard__img { width: 100%; aspect-ratio: 4 / 5; background-size: auto 124%; background-position: center 50%;
  transition: background-size 0.8s cubic-bezier(0.22,1,0.36,1); will-change: background-position; }
.hcard--sm .hcard__img { aspect-ratio: 1 / 1; }
.hcard:hover .hcard__img { background-size: auto 142%; }

/* ホバーで右上に出る矢印ボタン */
.hcard__arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); color: #320028;
  font-size: 19px; line-height: 1;
  opacity: 0; transform: scale(0.55) translateY(-6px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1), background 0.3s ease;
  box-shadow: 0 6px 20px rgba(50,0,40,0.20);
  pointer-events: none;
}
.hcard--sm .hcard__arrow { width: 38px; height: 38px; font-size: 16px; top: 11px; right: 11px; }
.hcard:hover .hcard__arrow { opacity: 1; transform: scale(1) translateY(0); }
.hcard:hover .hcard__arrow { background: #920783; color: #fff; }  /* ブランド葡萄 grape-300 */

/* 品種名：スクロール表示時に1文字ずつ縦回転（rotateX）でめくれて出る */
.hcard__name { perspective: 400px; }
.hcard__name .flipchar {
  display: inline-block; transform-origin: 50% 50%; backface-visibility: visible;
  /* 1回転（-360°）で正面(0°)へ着地。世界観（上質・静謐）に合わせ回転数を抑制 */
  transform: perspective(130px) rotateX(-360deg); opacity: 0;
  transition: transform 0.95s cubic-bezier(0.18, 1, 0.3, 1), opacity 0.1s linear;
  transition-delay: calc(var(--i, 0) * 0.06s);
  will-change: transform;
}
/* 本文（品種名）が画面に入った時に発火。出入りで毎回再生 */
.hcard.is-text-in .hcard__name .flipchar { transform: perspective(130px) rotateX(0deg); opacity: 1; }

/* 本文：名前は回転で見せるので不透明度フェードは外す。メタ/説明/重量だけフェードアップ */
.hcard__body { padding: 16px 2px 0; }
.hcard--sm .hcard__body { padding-top: 13px; }
.hcard__meta, .hcard__copy, .hcard__price {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  transition-delay: 0.05s;
}
.hcard.is-text-in .hcard__meta,
.hcard.is-text-in .hcard__copy,
.hcard.is-text-in .hcard__price { opacity: 1; transform: translateY(0); }
.hcard__meta { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.hcard__idx { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 17px; color: #D4B57E; }
.hcard__tags { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 11px; letter-spacing: 0.22em; color: #A64A97; text-transform: uppercase; }
.hcard__name { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: 23px; letter-spacing: 0.08em; margin: 0 0 9px; color: #320028; line-height: 1.3; }
.hcard--sm .hcard__name { font-size: 18px; margin-bottom: 7px; }
.hcard__copy { font-family: "Noto Serif JP", serif; font-size: 13px; line-height: 1.9; color: #5E4858; margin: 0 0 10px; }
.hcard--sm .hcard__copy { font-size: 12px; margin-bottom: 0; }
.hcard__price { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: 0.12em; color: #998391; }

.harvest__more { max-width: 1100px; margin: 34px auto 0; text-align: center; font-size: 13px; letter-spacing: 0.06em; color: #8a7585; line-height: 1.9; }
.harvest__cta { text-align: center; margin-top: 46px; }
/* CTAピル：ヒーローの Shop/Contact と同じデザイン言語（Cormorantセリフ＋アイコン） */
.btnPill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 999px;
  background: #920783;   /* ブランド Primary CTA (grape-300) */
  color: #fff;
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  font-weight: 600; font-size: 17px; letter-spacing: 0.18em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(146,7,131,0.28);
  transition: transform 0.3s ease, background 0.3s ease;
}
.btnPill:hover { transform: translateY(-2px); background: #8a007b; }  /* grape-400 */
.btnIcon { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 900px) {
  .harvest { padding: 80px 20px 80px; }
  .harvest__feature { grid-template-columns: 1fr; gap: 32px; }
  .harvest__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .hcard--lg .hcard__img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  /* OSの「視差効果を減らす」設定を尊重：常時アニメは停止、出現演出はフェードに置換 */
  .hblob, .sblob, .mote, .story__photo { animation: none !important; }
  .hcard__media { clip-path: inset(0 0 0 0); transform: none; transition: opacity 0.6s ease, box-shadow 0.55s ease; }
  .hcard__name .flipchar { transform: none; transition: opacity 0.5s ease; }
  .hcard__meta, .hcard__copy, .hcard__price { transform: none; transition: opacity 0.6s ease; }
  .story__title .line > span { transform: none; }
  .story-rv { transform: none; transition: opacity 0.7s ease; }
}

/* ===== ② 生産者の物語（STORY）：深い葡萄色の編集スプレッド ===== */
.story {
  position: relative; z-index: 5;
  background: linear-gradient(180deg, #4a0042 0%, #28001f 100%);  /* ブランド葡萄・明るめ */
  color: #F8F1FA;
  padding: 130px 6vw; overflow: clip; /* hidden は sticky を壊すため clip */
}

/* === 背景：オーロラ・メッシュグラデーション＋光の粒＋微細グレイン === */
.story__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.story__bg.is-paused * { animation-play-state: paused !important; }

.sblob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
  mix-blend-mode: screen; will-change: transform; }
/* すべてブランド葡萄9段階（青紫・ゴールドは不採用） */
.sblob--1 { width: 52vw; height: 52vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle at 50% 50%, rgba(146,7,131,0.85), rgba(146,7,131,0) 68%); /* grape-300 */
  animation: sdrift1 30s ease-in-out infinite; }
.sblob--2 { width: 46vw; height: 46vw; right: -10vw; top: 6%;
  background: radial-gradient(circle at 50% 50%, rgba(186,121,177,0.60), rgba(186,121,177,0) 68%); /* grape-100 */
  animation: sdrift2 38s ease-in-out infinite; }
.sblob--3 { width: 50vw; height: 50vw; left: 18vw; bottom: -16vw;
  background: radial-gradient(circle at 50% 50%, rgba(166,74,151,0.78), rgba(166,74,151,0) 68%); /* grape-200 */
  animation: sdrift3 34s ease-in-out infinite; }
.sblob--4 { width: 40vw; height: 40vw; left: 30vw; top: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(207,167,205,0.55), rgba(207,167,205,0) 68%); /* grape-50 */
  animation: sdrift4 44s ease-in-out infinite; }
@keyframes sdrift1 { 0%,100%{ transform: translate(0,0) scale(1); } 33%{ transform: translate(7vw,6vh) scale(1.18); } 66%{ transform: translate(-3vw,10vh) scale(0.95); } }
@keyframes sdrift2 { 0%,100%{ transform: translate(0,0) scale(1.05); } 50%{ transform: translate(-6vw,7vh) scale(0.85); } }
@keyframes sdrift3 { 0%,100%{ transform: translate(0,0) scale(1); } 40%{ transform: translate(6vw,-6vh) scale(1.2); } 75%{ transform: translate(-5vw,-2vh) scale(0.95); } }
@keyframes sdrift4 { 0%,100%{ transform: translate(0,0) scale(0.95); } 50%{ transform: translate(5vw,5vh) scale(1.25); } }

/* 光の粒（ふわふわ漂い、またたく） */
.story__motes { position: absolute; inset: 0; }
.mote { position: absolute; top: var(--y); left: var(--x);
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle, rgba(247,239,208,0.95), rgba(247,239,208,0) 68%);
  animation: moteFloat var(--dur) ease-in-out var(--delay) infinite alternate,
             moteTwinkle var(--tw) ease-in-out var(--delay) infinite alternate;
  will-change: transform, opacity; }
@keyframes moteFloat { from { transform: translate(0,0); } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes moteTwinkle { from { opacity: var(--o0); } to { opacity: var(--o1); } }

/* 微細フィルムグレイン（質感） */
.story__grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; }

.story__inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}

/* 写真：スクロール中も画面に留まる（ピン留め）＋ ゆっくり ken-burns。子ども時代の2枚をクロスフェード */
.story__media { position: sticky; top: 12vh; align-self: start; z-index: 1; }
.story__photoWrap {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  /* 浮き防止：黒い影は使わず、縁を背景へフェードさせて溶け込ませる */
  -webkit-mask-image: radial-gradient(128% 118% at 50% 44%, #000 58%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(128% 118% at 50% 44%, #000 58%, rgba(0,0,0,0) 100%);
}
/* 周辺を葡萄色でなじませる（中央は鮮明、縁ほど背景色へ） */
.story__photoWrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 110% at 50% 44%, rgba(40,0,31,0) 52%, rgba(40,0,31,0.55) 100%);
  mix-blend-mode: multiply;
}
.story__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: storykenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
.story__photo--2 { opacity: 0; }  /* スクロール進行でJSがフェードイン（もぐ→食べる） */
@keyframes storykenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.story__caption {
  display: block; margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif; font-size: 11px; line-height: 1.7; letter-spacing: 0.04em;
  color: rgba(243,236,247,0.45);
}

/* 汎用リビール（出入りで再生＝スクロールするたびに動く） */
.story-rv { opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.story-rv.is-in { opacity: 1; transform: translateY(0); }

.story__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.story__eyebrow .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 22px; color: #D4B57E; }
.story__eyebrow .bar { width: 48px; height: 1px; background: rgba(243,236,247,0.4); }
.story__eyebrow .kicker { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: 0.4em; color: #cfa7cd; }

/* 見出し：行マスクからせり上がる（縦回転は廃止） */
.story__title {
  font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.34; letter-spacing: 0.08em;
  margin: 0 0 24vh; color: #fff;
}
.story__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.story__title .line > span { display: inline-block; transform: translateY(118%);
  transition: transform 0.95s cubic-bezier(0.22,1,0.36,1); }
.story__title.is-in .line > span { transform: translateY(0); }
.story__title .line:nth-child(2) > span { transition-delay: 0.12s; }

/* 本文：段階リビール＋縦リズム（写真がピンされる距離を確保） */
.story__step {
  font-family: "Noto Serif JP", serif; font-size: 16px; line-height: 2.25; letter-spacing: 0.04em;
  color: rgba(243,236,247,0.9); margin: 0 0 30vh; max-width: 30em;
}
.story__sign {
  margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; letter-spacing: 0.14em; color: #D4B57E;
}
.story__sign span { font-family: "Zen Old Mincho", serif; font-style: normal; font-size: 17px; letter-spacing: 0.2em; color: #fff; }

@media (max-width: 860px) {
  .story { padding: 84px 22px; }
  .story__inner { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .story__media { position: static; }
  .story__title { margin-bottom: 30px; }
  .story__step { margin-bottom: 26px; max-width: none; }
}

/* ===== ④ 栽培ジャーナル（JOURNAL）：編集インデックス ===== */
.journal {
  position: relative; z-index: 5;
  background: #FBF8FA;            /* 葡萄を一滴落とした明るい白 */
  color: #320028;
  padding: 120px 6vw 110px;
}
.journal__head { max-width: 1100px; margin: 0 auto 56px; text-align: center; }
.journal__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.journal__eyebrow .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 22px; color: #D4B57E; }
.journal__eyebrow .bar { width: 48px; height: 1px; background: rgba(50,0,40,0.3); }
.journal__eyebrow .kicker { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: 0.4em; color: #920783; }
.journal__title { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: 0.12em; margin: 0 0 20px; }
.journal__lead { font-family: "Noto Serif JP", serif; font-size: 15px; line-height: 2.1; letter-spacing: 0.06em; color: #6a4a63; }

.journal__list { max-width: 980px; margin: 0 auto; border-top: 1px solid rgba(50,0,40,0.12); }
.jcard { border-bottom: 1px solid rgba(50,0,40,0.12); }
.jcard__link {
  display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 28px;
  padding: 22px 14px; text-decoration: none; color: inherit;
  transition: background 0.35s ease;
}
.jcard__link:hover { background: rgba(146,7,131,0.05); }
.jcard__thumb { width: 150px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; }
.jcard__thumb span { display: block; width: 100%; height: 100%; background-size: cover; background-position: center;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.jcard__link:hover .jcard__thumb span { transform: scale(1.07); }
.jcard__meta { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 13px; letter-spacing: 0.1em; color: #9a7e92; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.jcard__meta .cat { font-style: normal; font-family: "Noto Sans JP", sans-serif; font-size: 11px; letter-spacing: 0.12em; color: #920783; }
.jcard__meta .dot { color: rgba(50,0,40,0.3); }
.jcard__title { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: 0.04em; line-height: 1.5; margin: 0; color: #320028; transition: color 0.3s ease; }
.jcard__link:hover .jcard__title { color: #920783; }
.jcard__arrow { font-size: 18px; color: #920783; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.jcard__link:hover .jcard__arrow { transform: translateX(6px); }

.journal__cta { text-align: center; margin-top: 48px; }
.textLink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Zen Old Mincho", serif; font-size: 15px; letter-spacing: 0.14em; color: #920783; text-decoration: none;
  border-bottom: 1px solid rgba(146,7,131,0.4); padding-bottom: 4px; transition: gap 0.3s ease, border-color 0.3s ease;
}
.textLink i { font-style: normal; transition: transform 0.3s ease; }
.textLink:hover { gap: 12px; border-color: #920783; }
.textLink:hover i { transform: translateX(3px); }

@media (max-width: 760px) {
  .journal { padding: 80px 20px; }
  .jcard__link { grid-template-columns: 96px 1fr; gap: 16px; }
  .jcard__thumb { width: 96px; }
  .jcard__arrow { display: none; }
}

/* ===== ⑤ 締めCTA：実りのプール（カーソル連動の果実） ===== */
.pool {
  position: relative; z-index: 5;
  height: 92vh; min-height: 600px; overflow: hidden;
  background: #ECE6F3;   /* 淡い葡萄ラベンダー（果実が映える明るい地） */
}
.pool__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pool__overlay {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  /* 初回は粒子ロゴ演出のあとにフェードイン（JSが .is-shown を付与） */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.pool__overlay.is-shown { opacity: 1; transform: none; }
.no-js .pool__overlay { opacity: 1 !important; transform: none !important; }

/* 見出しの文字（カーソルに反応する物理文字・JSが生成） */
.pool__head .kchar {
  display: inline-block;
  will-change: transform;
}
.pool__eyebrow {
  font-family: "Cormorant Garamond", serif; font-style: italic; text-transform: uppercase;
  letter-spacing: 0.42em; font-size: 14px; color: #920783; margin: 0 0 20px;
}
.pool__head {
  font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600;
  /* ページの見出しスケール（最大60px）の1.2倍に収め、フィナーレ感と調和を両立 */
  color: #320028; font-size: clamp(36px, 5vw, 72px); line-height: 1.22; letter-spacing: 0.06em;
  margin: 0; text-shadow: 0 2px 30px rgba(236,230,243,0.8);
}
/* ヒーローの heroActions と同じフロストのカプセルで2つのCTAを束ねる（明背景版） */
.pool__cta {
  pointer-events: auto; margin-top: 40px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(50,0,40,0.12);
}
@media (max-width: 560px) {
  .pool__cta { flex-direction: column; gap: 6px; padding: 8px; border-radius: 34px; }
  .pool__cta .btnPill, .pool__cta .btnGhost { width: 100%; justify-content: center; }
}
/* セカンダリ：カプセル（.pool__cta）内のゴースト面。ヒーローの Contact と同役割 */
.btnGhost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  color: #500046; background: transparent;
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  font-weight: 600; font-size: 17px; letter-spacing: 0.14em;
  text-decoration: none; white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.btnGhost:hover { background: rgba(255,255,255,0.95); color: #320028; }
.pool__hint {
  position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 12px; letter-spacing: 0.28em; color: #920783; opacity: 0.7; pointer-events: none;
}
@media (max-width: 760px) {
  .pool { height: 80vh; min-height: 520px; }
  .pool__hint { display: none; }
  /* アニメするcanvasの上でbackdrop-filterを毎フレーム再ブラーするとiOSで重く＝カクつくため無効化。
     不透明白で代替（果実の上でもボタンは読みやすい） */
  .pool__cta {
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== ③ 体験（EXPERIENCE） ===== */
.experience {
  position: relative; z-index: 5;
  background: #F6EFF4;            /* 葡萄を含んだ淡い白（journalより少し温かい） */
  color: #320028;
  padding: 120px 6vw 110px;
}
.exp__head { max-width: 1100px; margin: 0 auto 56px; text-align: center; }
.exp__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.exp__eyebrow .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 22px; color: #D4B57E; }
.exp__eyebrow .bar { width: 48px; height: 1px; background: rgba(50,0,40,0.3); }
.exp__eyebrow .kicker { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15px; letter-spacing: 0.4em; color: #920783; }
.exp__title { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: 0.12em; margin: 0 0 20px; }
.exp__lead { font-family: "Noto Serif JP", serif; font-size: 15px; line-height: 2.1; letter-spacing: 0.06em; color: #6a4a63; }

.exp__grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.expcard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(50,0,40,0.07); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; }
.expcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.expcard__media { aspect-ratio: 3 / 2; overflow: hidden; }
.expcard__media span { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.expcard--on:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(50,0,40,0.14); }
.expcard--on:hover .expcard__media span { transform: scale(1.06); }
.expcard__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.expcard__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.expcard__idx { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 17px; color: #D4B57E; }
.expcard__tag { font-family: "Noto Sans JP", sans-serif; font-size: 11px; letter-spacing: 0.14em; color: #998391; border: 1px solid rgba(50,0,40,0.18); border-radius: 999px; padding: 3px 12px; }
.expcard__tag--on { color: #fff; background: #920783; border-color: #920783; }
.expcard__name { font-family: "Zen Old Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: 22px; letter-spacing: 0.08em; margin: 0 0 10px; color: #320028; }
.expcard__copy { font-family: "Noto Serif JP", serif; font-size: 13px; line-height: 1.95; color: #5E4858; margin: 0 0 18px; flex: 1; }
.expcard__more { font-family: "Zen Old Mincho", serif; font-size: 14px; letter-spacing: 0.1em; color: #920783; display: inline-flex; align-items: center; gap: 7px; }
.expcard__more i { font-style: normal; transition: transform 0.3s ease; }
.expcard--on:hover .expcard__more i { transform: translateX(4px); }
.expcard--soon { opacity: 0.9; }
.expcard--soon .expcard__media span { filter: grayscale(0.25) saturate(0.85); }
.expcard--soon .expcard__link { cursor: default; }
.expcard__more--soon { font-family: "Cormorant Garamond", serif; font-style: italic; letter-spacing: 0.22em; color: #A6899E; text-transform: uppercase; }
@media (max-width: 860px) {
  .experience { padding: 80px 20px; }
  .exp__grid { grid-template-columns: 1fr; max-width: 440px; gap: 22px; }
}