/* ===== FV hero module (hb-fv / heroVariant: fv-ribbon) ===== */
#top_hero.hb-fv{
  position:relative;
  width:100%;
  height:calc(100vh - 56px);
  /* svh = URLバー表示時の最小ビューポート基準。実機モバイルでアドレスバーが
     畳まれても hero 高さが変わらず、ロード直後のレイアウトジャンプを防ぐ。 */
  height:calc(100svh - 56px);
  margin:0 0 48px;
  overflow:hidden;
  background:#fff;
  line-height:1;
  color:#000;
}
@media (min-width:768px){
  #top_hero.hb-fv{height:calc(100vh - 90px);height:calc(100svh - 90px);margin-bottom:64px}
}
/* fv-boot: セクション直下のインラインscriptが同期付与する起動クラス。
   defer の fv-hero.js が実行される前に最終リボンPNG/タイトルが素で描画される
   FOUC (青いリボンが一瞬映って消える) を防ぐ。fv-hero.js が動けば
   .motion-preview / .ribbons-settled 系の既存ルールに引き継ぎ、
   死んでいれば 9 秒後にインライン側のタイマーが fv-boot を外して最終状態へ戻す。 */
#top_hero.hb-fv.fv-boot:not(.motion-preview):not(.ribbons-settled) ._logo_image_final,
#top_hero.hb-fv.fv-boot:not(.motion-preview):not(.ribbons-settled) ._logo_image_trace,
#top_hero.hb-fv.fv-boot:not(.motion-preview):not(.ribbons-settled) ._title{opacity:0}
/* 原本準拠のPCヘッダー挙動: FVトップではヘッダーを隠し、ヒーローを超えて
   スクロールしたら上から出現させる (閾値 = heroHeight - 20、fv-hero.js が制御)。
   html.fv-hdr はインラインscriptが同期付与 (no-JS では付かない = ヘッダー常時表示)。
   ヒーローはヘッダー分を引かないフルビューポート高になり、原本と同じく
   デザイン下端 (68.75vw) がフォールドで見切れる構図に戻る。SP は従来どおり。 */
@media (min-width:768px){
  html.fv-hdr header[data-saas-fv-header]{top:-90px;transition:top .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease}
  html.fv-hdr header[data-saas-fv-header].fv-header-shown{top:0;box-shadow:0 2px 14px rgba(0,20,40,.10)}
  html.fv-hdr body.top main{margin-top:0}
  html.fv-hdr #top_hero.hb-fv{height:100vh;height:100svh}
}
#top_hero.hb-fv ._hero_design{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:max(68.75vw, 100%);
}
#top_hero.hb-fv img{display:block;max-width:none}
#top_hero.hb-fv ._hero_bg{width:100%;height:100%}
#top_hero.hb-fv ._hero_bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
#top_hero.hb-fv ._hero_bg_img_sp{display:none}
#top_hero.hb-fv ._logo_image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}
#top_hero.hb-fv ._logo_image picture,
#top_hero.hb-fv ._logo_image img{display:block;width:100%;height:100%}
#top_hero.hb-fv ._logo_image img{object-fit:cover;object-position:left center}
#top_hero.hb-fv ._logo_image_trace{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  overflow:visible;
  pointer-events:none;
}
#top_hero.hb-fv ._logo_image_trace_sp{display:none}
#top_hero.hb-fv ._trace_path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
#top_hero.hb-fv ._title{position:absolute;top:38%;left:28%;z-index:3;width:43.5%;margin:0;font-weight:400;line-height:1}
#top_hero.hb-fv ._title_text{font-family:inherit;font-size:clamp(30px,3.3vw,54px);font-weight:700;line-height:1.42;letter-spacing:.05em;color:#fff;text-shadow:0 1px 16px rgba(0,25,50,.35)}
#top_hero.hb-fv ._title_text span{display:block}
#top_hero.hb-fv .swiper_container{position:absolute;right:0;bottom:0;width:73%;height:100%;clip-path:polygon(61% 0%,100% 0%,100% 100%,0% 100%);overflow:visible}
#top_hero.hb-fv .swiper{height:100%;overflow:visible}
#top_hero.hb-fv .swiper-wrapper{height:100%;display:flex;position:relative;z-index:1;transition-property:transform}
#top_hero.hb-fv .swiper-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  opacity:0;
  z-index:1;
  transition-property:opacity;
  transition-duration:0s;
  transition-timing-function:ease;
  will-change:opacity,transform;
}
#top_hero.hb-fv .swiper-slide.swiper-slide-prev{opacity:1;z-index:2}
#top_hero.hb-fv .swiper-slide.swiper-slide-active{opacity:1;z-index:3}
#top_hero.hb-fv .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:bottom right}
@media (prefers-reduced-motion:no-preference){
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._logo_image_final{opacity:0}
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._logo_image_trace{opacity:0}
  #top_hero.hb-fv.motion-preview.ribbons-ready:not(.ribbons-settled) ._logo_image_trace{opacity:1}
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._trace_image_main{opacity:1}
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._trace_paint_main{opacity:0}
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._trace_image_sub{opacity:1}
  #top_hero.hb-fv.motion-preview:not(.ribbons-settled) ._trace_paint_sub{opacity:0}
  #top_hero.hb-fv.motion-preview.ribbons-ready:not(.ribbons-settled) ._logo_image_final{animation:fv-ribbon-commit .08s 2.5s linear both}
  #top_hero.hb-fv[data-ribbon-debug="slow"].ribbons-ready:not(.ribbons-settled) ._logo_image_final{animation-delay:4.25s}
  #top_hero.hb-fv.motion-preview.ribbons-ready:not(.ribbons-settled) ._logo_image_trace{animation:fv-ribbon-exit .08s 2.58s linear both}
  #top_hero.hb-fv[data-ribbon-debug="slow"].ribbons-ready:not(.ribbons-settled) ._logo_image_trace{animation-delay:4.33s}
  #top_hero.hb-fv .swiper_container{transition:opacity 1500ms ease}
  #top_hero.hb-fv:not(.ribbons-settled) .swiper_container{opacity:0}
  #top_hero.hb-fv.motion-preview.ribbons-ready ._trace_path_main_entry{animation:fv-ribbon-main-entry 3.9s .08s cubic-bezier(.3,.5,.18,1) both}
  #top_hero.hb-fv.motion-preview.ribbons-ready ._trace_paint_main_entry{animation:fv-ribbon-main-entry 3.9s .08s cubic-bezier(.3,.5,.18,1) both}
  #top_hero.hb-fv.motion-preview.ribbons-ready ._trace_path_sub{animation:fv-ribbon-sub 1.725s .48s cubic-bezier(.16,.82,.22,1) both}
  #top_hero.hb-fv[data-ribbon-debug="slow"].ribbons-ready ._trace_path_main_entry{animation-duration:6.8s;animation-delay:.08s;animation-timing-function:cubic-bezier(.3,.5,.18,1)}
  #top_hero.hb-fv[data-ribbon-debug="slow"].ribbons-ready ._trace_paint_main_entry{animation:fv-ribbon-main-entry 6.8s .08s cubic-bezier(.3,.5,.18,1) both}
  #top_hero.hb-fv[data-ribbon-debug="slow"].ribbons-ready ._trace_path_sub{animation-duration:5.25s;animation-timing-function:cubic-bezier(.18,.78,.14,1)}
  #top_hero.hb-fv.motion-preview ._title{opacity:1}
  /* 見出しは行 span 単位で独立フェード (リボン sweep 中に 1行目→2行目の順で
     ゆっくり立ち上がる)。ribbons-settled の ._title リセットは h1 側だけを
     対象にしているため、span のアニメーションは settle をまたいでも完走する。 */
  #top_hero.hb-fv.motion-preview ._title_text span{opacity:0;animation:fv-title-line 1.8s cubic-bezier(.25,.46,.45,.94) both}
  #top_hero.hb-fv.motion-preview ._title_text span:nth-child(1){animation-delay:.9s}
  #top_hero.hb-fv.motion-preview ._title_text span:nth-child(2){animation-delay:1.9s}
  #top_hero.hb-fv.motion-preview ._title_text span:nth-child(n+3){animation-delay:2.9s}
  #top_hero.hb-fv.motion-preview.ribbons-settled ._logo_image_final,
  #top_hero.hb-fv.motion-preview.ribbons-settled ._title{animation:none;opacity:1}
  #top_hero.hb-fv.motion-preview.ribbons-settled ._logo_image_trace{animation:none;opacity:0}
}
@keyframes fv-ribbon-commit{from{opacity:0}to{opacity:1}}
@keyframes fv-ribbon-exit{from{opacity:1}to{opacity:0}}
@keyframes fv-title-line{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:translateY(0)}}
@keyframes fv-ribbon-main-entry{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes fv-ribbon-sub{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@media (max-width:767px){
  /* センタリングは transform に依存させない (ホスト側 reduced-motion の一括
     transform:none !important で殺されるため left:5% で等価に中央へ) */
  #top_hero.hb-fv ._title{width:90%;top:44%;left:5%}
  #top_hero.hb-fv ._title_text{font-size:clamp(22px,6vw,30px)}
}
@media (prefers-reduced-motion:reduce){
  /* ホストの一括 transform:none でスライドの translate3d 配置が無効化されるため、
     reduce 時は active スライドだけをレイアウトして通常時と同じ初期写真を見せる */
  #top_hero.hb-fv .swiper-slide{display:none}
  #top_hero.hb-fv .swiper-slide.swiper-slide-active{display:block;opacity:1}
}
@media (max-width:650px){
  #top_hero.hb-fv ._hero_bg_img_pc{display:none}
  #top_hero.hb-fv ._hero_bg_img_sp{display:block;object-fit:cover;object-position:left top}
  #top_hero.hb-fv ._logo_image{top:auto;bottom:0}
  #top_hero.hb-fv ._logo_image_trace_pc{display:none}
  #top_hero.hb-fv ._logo_image_trace_sp{display:block}
  #top_hero.hb-fv .swiper_container{width:100%;height:55%;clip-path:polygon(30% 0%,100% 0%,100% 100%,0% 100%)}
}
/* R26: 旧 fv-reveal (topService__h2 全体の opacity フェード) は撤廃。
   見出しの出現アニメは styles.css / script.js 側の saas-head-fade に一本化する
   (要素全体フェード + 文字 rise の二重掛けが二重アニメの原因だったため)。 */