/* ヒーロー用CSS(index.html <style> から抽出。内容は無変更。_shared.cssへは統合しない) */
  /* FV（fv-77 FocusPull を控えめに移植・写真とコピーが主役・JS不使用）
     2026-09-11 改訂：全面の暗いオーバーレイをやめ、写真は明るいまま見せる。
     文字はコンテナ化した控えめなパネル（締め色）の中だけで確保する。 */
  .hero{ position:relative; width:100%; min-height:88vh; max-height:920px; overflow:hidden; background:#DCE9E7; }
  .hero .world{ position:absolute; inset:-3%; }
  .hero .world img{
    width:100%; height:100%; object-fit:cover;
    filter:blur(16px) saturate(1.02) brightness(1.02); transform:scale(1.05);
    animation:hero-focus 2.2s cubic-bezier(.3,.1,.2,1) .2s forwards;
  }
  @keyframes hero-focus{ to{ filter:blur(0) saturate(1) brightness(1); transform:scale(1); } }
  .hero::after{
    /* ごく薄い均一トーンのみ。写真本来の明るさを見せる */
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,30,29,.04) 0%, rgba(20,30,29,.12) 100%);
  }
  .hero-inner{
    position:relative; z-index:2; max-width:1160px; margin:0 auto; min-height:88vh; max-height:920px;
    display:flex; align-items:center; padding:0 24px;
  }
  .hero-copy{
    max-width:600px; padding:42px 40px; border-radius:8px;
    background:rgba(23,35,34,.85);
  }
  .hero-copy .eyebrow{ color:#CFE3E1; opacity:0; animation:hero-rise .9s ease 1.5s forwards; }
  .hero-copy .eyebrow::before{ background:#E7A374; }
  .hero-copy h1{
    color:#FBF8F1; margin:16px 0 20px; font-size:clamp(28px,4vw,42px); line-height:1.6;
    opacity:0; animation:hero-rise 1s ease 1.75s forwards;
  }
  .hero-copy .lead{ color:#EFEAE0; opacity:0; animation:hero-rise 1s ease 2s forwards; }
  .hero-copy .hero-cta{
    margin-top:26px; display:flex; gap:14px; flex-wrap:wrap;
    opacity:0; animation:hero-rise 1s ease 2.25s forwards;
  }
  @keyframes hero-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
  .hero-copy .btn--ghost{ color:#F6F1E7; border-color:rgba(246,241,231,.6); }
  .hero-copy .btn--ghost:hover, .hero-copy .btn--ghost:focus-visible{ border-color:#F6F1E7; background:rgba(246,241,231,.08); }
  @media (max-width:768px){
    .hero{ min-height:auto; }
    .hero-inner{ min-height:auto; padding:28px 20px; display:block; }
    .hero-copy{ max-width:100%; padding:30px 26px; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero .world img{ animation:none; filter:none; transform:none; }
    .hero-copy .eyebrow, .hero-copy h1, .hero-copy .lead, .hero-copy .hero-cta{ animation:none; opacity:1; transform:none; }
  }