/* =========================================================================
   動き（紹介動画 shinano-motion の演出をサイト用にしたもの）
   - 丘: 1周期ぶんの正弦波を横に繰り返し、ゆっくり流す（動画の Hills と同じ形）
   - トップのヒーロー: 空・光・ボケ・葉・芽・文字の順に出る
   - スクロール: 見出しの線が伸び、カードが順番に上がる（main.js が .reveal / .is-visible を付ける）
   動きを減らす設定のときは、すべて止めて最終状態で表示する
   ========================================================================= */
:root {
  --sky-pale: #E3F3FA;
  --leaf: #7DBB5A;
  --lime: #B9DB7A;
  --sun: #FFD86B;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  /* 丘の形（scratch の waves.py で生成した正弦波 1 周期ぶんの SVG） */
  --wave-hero-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240' viewBox='0 0 1600 240' preserveAspectRatio='none'%3E%3Cpath fill='%237DBB5A' d='M0,240 L0,80.0 L10,81.1 L20,82.2 L30,83.3 L40,84.4 L50,85.5 L60,86.5 L70,87.6 L80,88.7 L90,89.7 L100,90.7 L110,91.7 L120,92.7 L130,93.7 L140,94.6 L150,95.6 L160,96.5 L170,97.3 L180,98.2 L190,99.0 L200,99.8 L210,100.6 L220,101.3 L230,102.0 L240,102.7 L250,103.3 L260,103.9 L270,104.4 L280,104.9 L290,105.4 L300,105.9 L310,106.3 L320,106.6 L330,106.9 L340,107.2 L350,107.5 L360,107.7 L370,107.8 L380,107.9 L390,108.0 L400,108.0 L410,108.0 L420,107.9 L430,107.8 L440,107.7 L450,107.5 L460,107.2 L470,106.9 L480,106.6 L490,106.3 L500,105.9 L510,105.4 L520,104.9 L530,104.4 L540,103.9 L550,103.3 L560,102.7 L570,102.0 L580,101.3 L590,100.6 L600,99.8 L610,99.0 L620,98.2 L630,97.3 L640,96.5 L650,95.6 L660,94.6 L670,93.7 L680,92.7 L690,91.7 L700,90.7 L710,89.7 L720,88.7 L730,87.6 L740,86.5 L750,85.5 L760,84.4 L770,83.3 L780,82.2 L790,81.1 L800,80.0 L810,78.9 L820,77.8 L830,76.7 L840,75.6 L850,74.5 L860,73.5 L870,72.4 L880,71.3 L890,70.3 L900,69.3 L910,68.3 L920,67.3 L930,66.3 L940,65.4 L950,64.4 L960,63.5 L970,62.7 L980,61.8 L990,61.0 L1000,60.2 L1010,59.4 L1020,58.7 L1030,58.0 L1040,57.3 L1050,56.7 L1060,56.1 L1070,55.6 L1080,55.1 L1090,54.6 L1100,54.1 L1110,53.7 L1120,53.4 L1130,53.1 L1140,52.8 L1150,52.5 L1160,52.3 L1170,52.2 L1180,52.1 L1190,52.0 L1200,52.0 L1210,52.0 L1220,52.1 L1230,52.2 L1240,52.3 L1250,52.5 L1260,52.8 L1270,53.1 L1280,53.4 L1290,53.7 L1300,54.1 L1310,54.6 L1320,55.1 L1330,55.6 L1340,56.1 L1350,56.7 L1360,57.3 L1370,58.0 L1380,58.7 L1390,59.4 L1400,60.2 L1410,61.0 L1420,61.8 L1430,62.7 L1440,63.5 L1450,64.4 L1460,65.4 L1470,66.3 L1480,67.3 L1490,68.3 L1500,69.3 L1510,70.3 L1520,71.3 L1530,72.4 L1540,73.5 L1550,74.5 L1560,75.6 L1570,76.7 L1580,77.8 L1590,78.9 L1600,80.0 L1600,240 Z'/%3E%3C/svg%3E");
  --wave-hero-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1240' height='240' viewBox='0 0 1240 240' preserveAspectRatio='none'%3E%3Cpath fill='%233F8A4E' d='M0,240 L0,152.0 L10,151.5 L20,151.0 L30,150.4 L40,149.8 L50,149.1 L60,148.3 L70,147.6 L80,146.8 L90,145.9 L100,145.0 L110,144.1 L120,143.2 L130,142.2 L140,141.2 L150,140.2 L160,139.1 L170,138.1 L180,137.0 L190,135.9 L200,134.8 L210,133.7 L220,132.6 L230,131.5 L240,130.4 L250,129.3 L260,128.2 L270,127.1 L280,126.0 L290,124.9 L300,123.9 L310,122.8 L320,121.8 L330,120.9 L340,119.9 L350,119.0 L360,118.1 L370,117.3 L380,116.5 L390,115.7 L400,115.0 L410,114.3 L420,113.6 L430,113.1 L440,112.5 L450,112.0 L460,111.6 L470,111.2 L480,110.9 L490,110.6 L500,110.4 L510,110.2 L520,110.1 L530,110.0 L540,110.0 L550,110.1 L560,110.2 L570,110.3 L580,110.6 L590,110.8 L600,111.2 L610,111.6 L620,112.0 L630,112.5 L640,113.0 L650,113.6 L660,114.2 L670,114.9 L680,115.7 L690,116.4 L700,117.2 L710,118.1 L720,119.0 L730,119.9 L740,120.8 L750,121.8 L760,122.8 L770,123.8 L780,124.9 L790,125.9 L800,127.0 L810,128.1 L820,129.2 L830,130.3 L840,131.4 L850,132.5 L860,133.6 L870,134.7 L880,135.8 L890,136.9 L900,138.0 L910,139.1 L920,140.1 L930,141.2 L940,142.2 L950,143.1 L960,144.1 L970,145.0 L980,145.9 L990,146.7 L1000,147.5 L1010,148.3 L1020,149.0 L1030,149.7 L1040,150.4 L1050,150.9 L1060,151.5 L1070,152.0 L1080,152.4 L1090,152.8 L1100,153.1 L1110,153.4 L1120,153.6 L1130,153.8 L1140,153.9 L1150,154.0 L1160,154.0 L1170,153.9 L1180,153.8 L1190,153.7 L1200,153.4 L1210,153.2 L1220,152.8 L1230,152.4 L1240,152.0 L1240,240 Z'/%3E%3C/svg%3E");
  --wave-hero-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='240' viewBox='0 0 980 240' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF8F1' d='M0,240 L0,186.2 L10,185.6 L20,185.2 L30,184.7 L40,184.3 L50,184.0 L60,183.7 L70,183.4 L80,183.3 L90,183.1 L100,183.0 L110,183.0 L120,183.0 L130,183.1 L140,183.2 L150,183.4 L160,183.6 L170,183.9 L180,184.2 L190,184.6 L200,185.1 L210,185.5 L220,186.0 L230,186.6 L240,187.2 L250,187.8 L260,188.5 L270,189.2 L280,189.9 L290,190.7 L300,191.4 L310,192.2 L320,193.0 L330,193.8 L340,194.7 L350,195.5 L360,196.3 L370,197.2 L380,198.0 L390,198.8 L400,199.6 L410,200.4 L420,201.2 L430,201.9 L440,202.7 L450,203.4 L460,204.0 L470,204.7 L480,205.3 L490,205.8 L500,206.4 L510,206.8 L520,207.3 L530,207.7 L540,208.0 L550,208.3 L560,208.6 L570,208.7 L580,208.9 L590,209.0 L600,209.0 L610,209.0 L620,208.9 L630,208.8 L640,208.6 L650,208.4 L660,208.1 L670,207.8 L680,207.4 L690,206.9 L700,206.5 L710,206.0 L720,205.4 L730,204.8 L740,204.2 L750,203.5 L760,202.8 L770,202.1 L780,201.3 L790,200.6 L800,199.8 L810,199.0 L820,198.2 L830,197.3 L840,196.5 L850,195.7 L860,194.8 L870,194.0 L880,193.2 L890,192.4 L900,191.6 L910,190.8 L920,190.1 L930,189.3 L940,188.6 L950,188.0 L960,187.3 L970,186.7 L980,186.2 L980,240 Z'/%3E%3C/svg%3E");
  --wave-page-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='110' viewBox='0 0 1400 110' preserveAspectRatio='none'%3E%3Cpath fill='%23D7E8CC' d='M0,110 L0,52.0 L10,52.7 L20,53.4 L30,54.1 L40,54.9 L50,55.6 L60,56.3 L70,56.9 L80,57.6 L90,58.3 L100,58.9 L110,59.6 L120,60.2 L130,60.8 L140,61.4 L150,62.0 L160,62.5 L170,63.1 L180,63.6 L190,64.0 L200,64.5 L210,64.9 L220,65.4 L230,65.7 L240,66.1 L250,66.4 L260,66.7 L270,67.0 L280,67.2 L290,67.4 L300,67.6 L310,67.7 L320,67.9 L330,67.9 L340,68.0 L350,68.0 L360,68.0 L370,67.9 L380,67.9 L390,67.7 L400,67.6 L410,67.4 L420,67.2 L430,67.0 L440,66.7 L450,66.4 L460,66.1 L470,65.7 L480,65.4 L490,64.9 L500,64.5 L510,64.0 L520,63.6 L530,63.1 L540,62.5 L550,62.0 L560,61.4 L570,60.8 L580,60.2 L590,59.6 L600,58.9 L610,58.3 L620,57.6 L630,56.9 L640,56.3 L650,55.6 L660,54.9 L670,54.1 L680,53.4 L690,52.7 L700,52.0 L710,51.3 L720,50.6 L730,49.9 L740,49.1 L750,48.4 L760,47.7 L770,47.1 L780,46.4 L790,45.7 L800,45.1 L810,44.4 L820,43.8 L830,43.2 L840,42.6 L850,42.0 L860,41.5 L870,40.9 L880,40.4 L890,40.0 L900,39.5 L910,39.1 L920,38.6 L930,38.3 L940,37.9 L950,37.6 L960,37.3 L970,37.0 L980,36.8 L990,36.6 L1000,36.4 L1010,36.3 L1020,36.1 L1030,36.1 L1040,36.0 L1050,36.0 L1060,36.0 L1070,36.1 L1080,36.1 L1090,36.3 L1100,36.4 L1110,36.6 L1120,36.8 L1130,37.0 L1140,37.3 L1150,37.6 L1160,37.9 L1170,38.3 L1180,38.6 L1190,39.1 L1200,39.5 L1210,40.0 L1220,40.4 L1230,40.9 L1240,41.5 L1250,42.0 L1260,42.6 L1270,43.2 L1280,43.8 L1290,44.4 L1300,45.1 L1310,45.7 L1320,46.4 L1330,47.1 L1340,47.7 L1350,48.4 L1360,49.1 L1370,49.9 L1380,50.6 L1390,51.3 L1400,52.0 L1400,110 Z'/%3E%3C/svg%3E");
  --wave-page-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='110' viewBox='0 0 900 110' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF8F1' d='M0,110 L0,93.1 L10,92.8 L20,92.4 L30,92.0 L40,91.6 L50,91.1 L60,90.6 L70,90.1 L80,89.5 L90,88.9 L100,88.3 L110,87.7 L120,87.0 L130,86.3 L140,85.6 L150,84.9 L160,84.2 L170,83.5 L180,82.9 L190,82.2 L200,81.5 L210,80.8 L220,80.2 L230,79.5 L240,78.9 L250,78.3 L260,77.8 L270,77.2 L280,76.7 L290,76.3 L300,75.8 L310,75.5 L320,75.1 L330,74.8 L340,74.6 L350,74.4 L360,74.2 L370,74.1 L380,74.0 L390,74.0 L400,74.0 L410,74.1 L420,74.2 L430,74.4 L440,74.6 L450,74.9 L460,75.2 L470,75.6 L480,76.0 L490,76.4 L500,76.9 L510,77.4 L520,77.9 L530,78.5 L540,79.1 L550,79.7 L560,80.3 L570,81.0 L580,81.7 L590,82.4 L600,83.1 L610,83.8 L620,84.5 L630,85.1 L640,85.8 L650,86.5 L660,87.2 L670,87.8 L680,88.5 L690,89.1 L700,89.7 L710,90.2 L720,90.8 L730,91.3 L740,91.7 L750,92.2 L760,92.5 L770,92.9 L780,93.2 L790,93.4 L800,93.6 L810,93.8 L820,93.9 L830,94.0 L840,94.0 L850,94.0 L860,93.9 L870,93.8 L880,93.6 L890,93.4 L900,93.1 L900,110 Z'/%3E%3C/svg%3E");
  --wave-cta-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='100' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath fill='%237DBB5A' d='M0,100 L0,36.0 L10,36.7 L20,37.4 L30,38.1 L40,38.8 L50,39.5 L60,40.2 L70,40.9 L80,41.6 L90,42.2 L100,42.9 L110,43.5 L120,44.2 L130,44.8 L140,45.4 L150,46.0 L160,46.6 L170,47.1 L180,47.7 L190,48.2 L200,48.7 L210,49.2 L220,49.7 L230,50.1 L240,50.6 L250,51.0 L260,51.3 L270,51.7 L280,52.0 L290,52.3 L300,52.6 L310,52.9 L320,53.1 L330,53.3 L340,53.5 L350,53.7 L360,53.8 L370,53.9 L380,53.9 L390,54.0 L400,54.0 L410,54.0 L420,53.9 L430,53.9 L440,53.8 L450,53.7 L460,53.5 L470,53.3 L480,53.1 L490,52.9 L500,52.6 L510,52.3 L520,52.0 L530,51.7 L540,51.3 L550,51.0 L560,50.6 L570,50.1 L580,49.7 L590,49.2 L600,48.7 L610,48.2 L620,47.7 L630,47.1 L640,46.6 L650,46.0 L660,45.4 L670,44.8 L680,44.2 L690,43.5 L700,42.9 L710,42.2 L720,41.6 L730,40.9 L740,40.2 L750,39.5 L760,38.8 L770,38.1 L780,37.4 L790,36.7 L800,36.0 L810,35.3 L820,34.6 L830,33.9 L840,33.2 L850,32.5 L860,31.8 L870,31.1 L880,30.4 L890,29.8 L900,29.1 L910,28.5 L920,27.8 L930,27.2 L940,26.6 L950,26.0 L960,25.4 L970,24.9 L980,24.3 L990,23.8 L1000,23.3 L1010,22.8 L1020,22.3 L1030,21.9 L1040,21.4 L1050,21.0 L1060,20.7 L1070,20.3 L1080,20.0 L1090,19.7 L1100,19.4 L1110,19.1 L1120,18.9 L1130,18.7 L1140,18.5 L1150,18.3 L1160,18.2 L1170,18.1 L1180,18.1 L1190,18.0 L1200,18.0 L1210,18.0 L1220,18.1 L1230,18.1 L1240,18.2 L1250,18.3 L1260,18.5 L1270,18.7 L1280,18.9 L1290,19.1 L1300,19.4 L1310,19.7 L1320,20.0 L1330,20.3 L1340,20.7 L1350,21.0 L1360,21.4 L1370,21.9 L1380,22.3 L1390,22.8 L1400,23.3 L1410,23.8 L1420,24.3 L1430,24.9 L1440,25.4 L1450,26.0 L1460,26.6 L1470,27.2 L1480,27.8 L1490,28.5 L1500,29.1 L1510,29.8 L1520,30.4 L1530,31.1 L1540,31.8 L1550,32.5 L1560,33.2 L1570,33.9 L1580,34.6 L1590,35.3 L1600,36.0 L1600,100 Z'/%3E%3C/svg%3E");
  --wave-cta-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='100' viewBox='0 0 1100 100' preserveAspectRatio='none'%3E%3Cpath fill='%233F8A4E' d='M0,100 L0,74.7 L10,74.4 L20,74.0 L30,73.6 L40,73.1 L50,72.6 L60,72.0 L70,71.5 L80,70.9 L90,70.2 L100,69.6 L110,68.9 L120,68.2 L130,67.4 L140,66.7 L150,65.9 L160,65.2 L170,64.4 L180,63.6 L190,62.8 L200,62.0 L210,61.2 L220,60.4 L230,59.6 L240,58.8 L250,58.0 L260,57.3 L270,56.5 L280,55.8 L290,55.1 L300,54.4 L310,53.8 L320,53.1 L330,52.5 L340,52.0 L350,51.4 L360,50.9 L370,50.4 L380,50.0 L390,49.6 L400,49.3 L410,48.9 L420,48.7 L430,48.5 L440,48.3 L450,48.1 L460,48.1 L470,48.0 L480,48.0 L490,48.1 L500,48.1 L510,48.3 L520,48.5 L530,48.7 L540,49.0 L550,49.3 L560,49.6 L570,50.0 L580,50.4 L590,50.9 L600,51.4 L610,52.0 L620,52.5 L630,53.1 L640,53.8 L650,54.4 L660,55.1 L670,55.8 L680,56.6 L690,57.3 L700,58.1 L710,58.8 L720,59.6 L730,60.4 L740,61.2 L750,62.0 L760,62.8 L770,63.6 L780,64.4 L790,65.2 L800,66.0 L810,66.7 L820,67.5 L830,68.2 L840,68.9 L850,69.6 L860,70.2 L870,70.9 L880,71.5 L890,72.0 L900,72.6 L910,73.1 L920,73.6 L930,74.0 L940,74.4 L950,74.7 L960,75.1 L970,75.3 L980,75.5 L990,75.7 L1000,75.9 L1010,75.9 L1020,76.0 L1030,76.0 L1040,75.9 L1050,75.9 L1060,75.7 L1070,75.5 L1080,75.3 L1090,75.0 L1100,74.7 L1100,100 Z'/%3E%3C/svg%3E");
  --wave-foot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1300' height='60' viewBox='0 0 1300 60' preserveAspectRatio='none'%3E%3Cpath fill='%2324221E' d='M0,60 L0,39.3 L10,39.5 L20,39.8 L30,40.0 L40,40.2 L50,40.4 L60,40.6 L70,40.7 L80,40.8 L90,40.9 L100,41.0 L110,41.0 L120,41.0 L130,41.0 L140,40.9 L150,40.9 L160,40.8 L170,40.7 L180,40.5 L190,40.3 L200,40.1 L210,39.9 L220,39.7 L230,39.4 L240,39.1 L250,38.8 L260,38.5 L270,38.2 L280,37.8 L290,37.4 L300,37.0 L310,36.6 L320,36.2 L330,35.7 L340,35.3 L350,34.8 L360,34.3 L370,33.8 L380,33.3 L390,32.8 L400,32.3 L410,31.8 L420,31.2 L430,30.7 L440,30.2 L450,29.6 L460,29.1 L470,28.6 L480,28.0 L490,27.5 L500,27.0 L510,26.5 L520,26.0 L530,25.5 L540,25.0 L550,24.6 L560,24.1 L570,23.7 L580,23.2 L590,22.8 L600,22.4 L610,22.1 L620,21.7 L630,21.4 L640,21.0 L650,20.7 L660,20.5 L670,20.2 L680,20.0 L690,19.8 L700,19.6 L710,19.4 L720,19.3 L730,19.2 L740,19.1 L750,19.0 L760,19.0 L770,19.0 L780,19.0 L790,19.1 L800,19.1 L810,19.2 L820,19.3 L830,19.5 L840,19.7 L850,19.9 L860,20.1 L870,20.3 L880,20.6 L890,20.9 L900,21.2 L910,21.5 L920,21.8 L930,22.2 L940,22.6 L950,23.0 L960,23.4 L970,23.8 L980,24.3 L990,24.7 L1000,25.2 L1010,25.7 L1020,26.2 L1030,26.7 L1040,27.2 L1050,27.7 L1060,28.2 L1070,28.8 L1080,29.3 L1090,29.8 L1100,30.4 L1110,30.9 L1120,31.4 L1130,32.0 L1140,32.5 L1150,33.0 L1160,33.5 L1170,34.0 L1180,34.5 L1190,35.0 L1200,35.4 L1210,35.9 L1220,36.3 L1230,36.8 L1240,37.2 L1250,37.6 L1260,37.9 L1270,38.3 L1280,38.6 L1290,39.0 L1300,39.3 L1300,60 Z'/%3E%3C/svg%3E");
}

/* ---------- 丘（共通） ---------- */
@keyframes hills-flow {
  to {
    background-position:
      calc(-1 * var(--w1)) 100%,
      var(--w2) 100%,
      calc(-1 * var(--w3)) 100%;
  }
}

/* ---------- ヒーロー ---------- */
.hero {
  --hills-h: 240px;
  --w1: 980px; --w2: 1240px; --w3: 1600px;
  padding-bottom: calc(var(--hills-h) - 40px);
  background: linear-gradient(180deg, var(--sky-pale) 0%, #fff 55%, #F4F8EC 100%);
  isolation: isolate;
}
.hero::before { display: none; }
.hero__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__rays {
  position: absolute; left: -900px; top: -1000px; width: 2000px; height: 2000px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 246 214 / .75) 0deg 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 50%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 50%);
  opacity: .55;
  animation: rays-in 2s ease-out both, rays-turn 160s linear infinite;
}
.hero__rays::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, #FFF6D6 0%, transparent 65%);
}
@keyframes rays-in { from { opacity: 0; } }
@keyframes rays-turn { to { rotate: 360deg; } }

.hero__bokeh span {
  position: absolute; left: var(--x); bottom: -60px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(255 255 255 / 0) 70%);
  animation: bokeh-rise var(--d) linear var(--delay) infinite;
}
@keyframes bokeh-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  50% { transform: translate(24px, -55vh); opacity: .5; }
  85% { opacity: .9; }
  100% { transform: translate(-12px, -110vh); opacity: 0; }
}

.hero__inner { z-index: 2; }

/* 見出しの文字: 1文字ずつぼかしから浮かび上がる */
.hero__title .char {
  display: inline-block;
  animation: char-in 1s var(--ease-out) both;
  animation-delay: calc(.35s + var(--i) * .07s);
}
@keyframes char-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(.3em) scale(.96); }
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.hero__eyebrow::before {
  content: ""; width: 40px; height: 2px; border-radius: 2px; background: currentColor;
  transform-origin: left; animation: line-draw .7s var(--ease-out) .1s both;
}
.hero__eyebrow span { animation: fade-left .8s var(--ease-out) .25s both; }
.hero__text { animation: fade-up .9s var(--ease-out) 1.1s both; }
.hero__actions { animation: fade-up .9s var(--ease-out) 1.3s both; }
.hero-news { animation: fade-up .9s var(--ease-out) 1.5s both; }
@keyframes line-draw { from { transform: scaleX(0); } }
@keyframes fade-left { from { opacity: 0; transform: translateX(-16px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

/* 写真: 白フチのカードが順に弾んで並び、写真はゆっくりズーム */
.hero__visual { position: relative; padding-bottom: 0; aspect-ratio: 6 / 5; }
.photo-card {
  position: absolute; margin: 0; padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 26px 50px -26px rgb(44 95 55 / .55);
  animation: card-in .9s var(--ease-pop) both;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; animation: ken-burns 14s ease-in-out infinite alternate; }
.photo-card--1 { left: 4%; top: 0; width: 66%; aspect-ratio: 4 / 3; rotate: -3deg; animation-delay: .4s; z-index: 1; }
.photo-card--2 { left: 0; bottom: 4%; width: 36%; aspect-ratio: 4 / 5; rotate: 4deg; animation-delay: .65s; z-index: 2; }
.photo-card--2 img { object-position: 50% 30%; }
.photo-card--3 { right: 0; bottom: 0; width: 46%; aspect-ratio: 1; rotate: -2deg; animation-delay: .85s; z-index: 2; }
.photo-card--3 img { animation-delay: -6s; }
@keyframes card-in { from { opacity: 0; transform: translateY(40px) scale(.85); } }
@keyframes ken-burns { from { transform: scale(1.1); } to { transform: scale(1); } }

.hero__logo {
  right: 4%; bottom: auto; top: -2%; z-index: 3; rotate: -6deg; transform: none;
  animation: logo-pop .8s var(--ease-pop) 1.2s both, float 5s ease-in-out 2s infinite alternate;
}
@keyframes logo-pop { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
@keyframes float { to { translate: 0 -10px; } }

/* キラキラ */
.twinkle {
  position: absolute; width: 34px; aspect-ratio: 1; z-index: 3;
  background: var(--sun);
  clip-path: path("M17,0 C19,13 21,15 34,17 C21,19 19,21 17,34 C15,21 13,19 0,17 C13,15 15,13 17,0 Z");
  animation: twinkle 2.6s ease-in-out infinite;
}
.twinkle--1 { left: -4%; top: 8%; animation-delay: 1.6s; }
.twinkle--2 { right: 30%; bottom: -3%; width: 26px; background: var(--lime); animation-delay: 2.4s;
  clip-path: path("M13,0 C14.5,10 16,11.5 26,13 C16,14.5 14.5,16 13,26 C11.5,16 10,14.5 0,13 C10,11.5 11.5,10 13,0 Z"); }
@keyframes twinkle { 0%, 100% { transform: scale(0) rotate(0deg); } 50% { transform: scale(1) rotate(90deg); } }

/* 丘と芽 */
.hero__hills {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--hills-h); z-index: 1; pointer-events: none;
  background-image: var(--wave-hero-front), var(--wave-hero-mid), var(--wave-hero-back);
  background-repeat: repeat-x;
  background-size: var(--w1) var(--hills-h), var(--w2) var(--hills-h), var(--w3) var(--hills-h);
  background-position: 0 100%, 0 100%, 0 100%;
  animation: hills-rise 1.4s var(--ease-out) both, hills-flow 60s linear infinite;
}
@keyframes hills-rise { from { transform: translateY(60%); } }
.sprout { position: absolute; left: 12%; bottom: 46%; width: 96px; overflow: visible; }
.sprout__stem { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; animation: stem-grow 1.2s var(--ease-out) 1.4s both; }
.sprout__leaf { transform-box: fill-box; transform-origin: left center; animation: leaf-open .8s var(--ease-pop) 2.2s both; }
.sprout__leaf--2 { animation-delay: 2.35s; }
@keyframes stem-grow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes leaf-open { from { transform: scale(0); } }

/* 風に流れる葉 */
.hero__leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.leaf {
  position: absolute; left: 0; top: var(--y); width: var(--s);
  animation: leaf-drift var(--d) linear var(--delay) infinite;
}
.leaf > span { display: block; animation: leaf-sway var(--sway) ease-in-out infinite alternate; }
.leaf svg { display: block; width: 100%; fill: var(--c); opacity: .85; }
@keyframes leaf-drift {
  from { transform: translateX(-80px) rotate(0deg); }
  to { transform: translateX(calc(100vw + 80px)) rotate(540deg); }
}
@keyframes leaf-sway { from { translate: 0 -30px; scale: 1 1; } to { translate: 0 40px; scale: -1 1; } }

@media (max-width: 860px) {
  .hero { --hills-h: 150px; --w1: 610px; --w2: 775px; --w3: 1000px; padding-bottom: calc(var(--hills-h) + 8px); }
  .hero__visual { width: min(100%, 520px); margin-inline: auto; }
  .sprout { width: 56px; left: auto; right: 10%; bottom: 40%; }
  .leaf:nth-child(n+6) { display: none; }
}

/* ---------- 下層ページの見出し: 下に丘 ---------- */
.page-hero {
  --hills-h: 110px; --w1: 900px; --w2: 0px; --w3: 1400px;
  padding-bottom: calc(clamp(48px, 6vw, 80px) + 60px);
}
.page-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--hills-h); pointer-events: none;
  background-image: var(--wave-page-front), var(--wave-page-back);
  background-repeat: repeat-x;
  background-size: var(--w1) var(--hills-h), var(--w3) var(--hills-h);
  background-position: 0 100%, 0 100%;
  animation: page-hills-flow 50s linear infinite;
}
@keyframes page-hills-flow { to { background-position: calc(-1 * var(--w1)) 100%, var(--w3) 100%; } }
.page-hero__en, .page-hero__ja, .page-hero__lead { animation: fade-up .9s var(--ease-out) both; }
.page-hero__ja { animation-delay: .1s; }
.page-hero__lead { animation-delay: .25s; }

/* ---------- お問い合わせ欄の上: 丘 / フッターの上: 波 ---------- */
.cta { position: relative; --hills-h: 100px; --w1: 1100px; --w3: 1600px; }
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--hills-h); pointer-events: none;
  background-image: var(--wave-cta-front), var(--wave-cta-back);
  background-repeat: repeat-x;
  background-size: var(--w1) var(--hills-h), var(--w3) var(--hills-h);
  background-position: 0 100%, 0 100%;
  animation: page-hills-flow 55s linear infinite;
}
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 60px; pointer-events: none;
  background: var(--wave-foot) repeat-x 0 100% / 1300px 60px;
  animation: foot-flow 70s linear infinite;
}
@keyframes foot-flow { to { background-position: -1300px 100%; } }

/* ---------- スクロールで現れる ---------- */
.reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* 見出し: 線が伸び、文字が下からせり上がる */
.section-head.reveal { opacity: 1; transform: none; }
.section-head.reveal .section-head__en::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.section-head.reveal .section-head__en { opacity: 0; transition: opacity .6s .15s; }
.section-head.reveal .section-head__ja { clip-path: inset(0 0 100% 0); transform: translateY(.5em); transition: clip-path .9s var(--ease-out) .2s, transform .9s var(--ease-out) .2s; }
.section-head.reveal .section-head__lead { opacity: 0; transition: opacity .8s .5s; }
.section-head.is-visible .section-head__en::before { transform: none; }
.section-head.is-visible .section-head__en,
.section-head.is-visible .section-head__lead { opacity: 1; }
.section-head.is-visible .section-head__ja { clip-path: inset(0 0 -10% 0); transform: none; }

/* 蛍光ペンのマーカー */
.marker {
  background-image: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 100% 100%;
  padding-inline: .06em;
}
.reveal .marker { background-size: 0% 100%; transition: background-size 1s var(--ease-out) .6s; }
.is-visible .marker { background-size: 100% 100%; }
.message-teaser .marker { --sun: rgb(255 216 107 / .45); }

/* カードは少し弾んで上がる */
.value.reveal, .category.reveal, .producer-card.reveal, .story-card.reveal, .product-card.reveal {
  transform: translateY(28px) scale(.97);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-pop);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.value.is-visible, .category.is-visible, .producer-card.is-visible, .story-card.is-visible, .product-card.is-visible { transform: none; }

/* 3つのこだわりのイラストはふわふわ */
.value__img { animation: float 3.2s ease-in-out infinite alternate; }
.value:nth-child(2) .value__img { animation-delay: -1.1s; }
.value:nth-child(3) .value__img { animation-delay: -2.2s; }

/* カテゴリーの丸い写真に色の輪 */
.category img { box-shadow: 0 0 0 10px var(--ring, var(--lime)); transition: transform .5s var(--ease-pop); }
.category:nth-child(2) img { --ring: #FFE9A8; }
.category:nth-child(3) img { --ring: var(--pink); }
.category:hover img { transform: rotate(-4deg) scale(1.04); }

/* ボタンの矢印が少し動く */
.btn::after { transition: transform .25s var(--ease-out); }
.btn:hover::after { transform: translateX(4px) rotate(45deg); }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__rays, .hero__bokeh, .hero__leaves { display: none; }
  .hero__hills, .page-hero::before, .cta::before, .site-footer::before { animation: none !important; }
  .section-head.reveal .section-head__en::before, .section-head.reveal .section-head__ja { transform: none; clip-path: none; }
  .section-head.reveal .section-head__en, .section-head.reveal .section-head__lead { opacity: 1; }
  .reveal .marker { background-size: 100% 100%; }
  .reveal { transform: none !important; }
}