header { background:none; border:none; }
.footer_wrapper_title { display:none; }
.footer_wrapper_menu { display:none; }

/* 動画・画像の背景レイヤーはPC(ホバーあり)専用。スマホでは非表示にする */
.top_images { display:none; }

.top_video { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0.45; transition:opacity 1s ease-out; }

.top_h1_wrapper { height:100dvh; position:relative; }
.top_h1 { height:100dvh; margin:0; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; font-weight:bold; font-size:32px; letter-spacing:0; transition:color 0.6s ease-out; }
.top_h1_en { margin-top:20px; display:flex; align-items:center; font-size:12px; }
.top_h1_en::before { content:''; width:5px; height:5px; margin-right:5px; display:block; background:#ff2000; }
.top_h1_scroll { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); font-size:12px; }
.top_h1_scroll::before { content:''; width:1px; height:50px; background:#808080; position:absolute; bottom:-50px; left:50%; animation:scrollLine 1.5s ease-in-out infinite; }
.top_h1_scroll::after { content:''; width:1px; height:15px; background:#808080; position:absolute; bottom:-50px; left:50%; transform-origin:bottom; animation:scrollArrow 1.5s ease-in-out infinite; }

@keyframes scrollLine {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(15px); opacity:0; }
}
@keyframes scrollArrow {
  0%   { transform:translateY(0) rotate(25deg); opacity:1; }
  100% { transform:translateY(15px) rotate(25deg); opacity:0; }
}

/*案0用*/
.top_en { font-size:12px; }

/*案1用*/
.top_copy1 { width:100%; max-width:520px; display:block; }

/*案2用*/
.top_copy2 { width:100%; max-width:680px; display:block; }

/*案3用*/
.top_copy3 { width:100%; max-width:640px; display:block; }

/*手書き用共通*/
.top_copy_on { position:absolute; top:0; left:0; opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s; }


/* 1025px以上のとき */
@media screen and (min-width:1025px){
  /* headerはposition:fixedでフローから外れているため、その高さ分だけ上を空けて重なりを防ぐ */
  .wrapper.top_content { padding-top:100px; box-sizing:border-box; }
  .top_h1_wrapper { height:auto; }
  .top_h1 { height:auto; margin:0; font-size:40px; }
  .top_h1_en { display:none; }
  .top_h1_scroll { display:none; }
}

/* top_h1の手書き文字アニメーション(top_copy_handwriting.css/js側、実測で約0.7秒で描き終わる)の後、
   top_navsが1つずつ表示される。header/footerはアニメーションなし(最初から表示)。 */
.page-enter .top_nav { opacity:0; animation:fadeUpIn 0.5s ease-out both; }
.page-enter .top_nav:nth-child(1) { animation-delay:0.75s; }
.page-enter .top_nav:nth-child(2) { animation-delay:0.83s; }
.page-enter .top_nav:nth-child(3) { animation-delay:0.91s; }
.page-enter .top_nav:nth-child(4) { animation-delay:0.99s; }
.page-enter .top_nav:nth-child(5) { animation-delay:1.07s; }
.page-enter .top_nav:nth-child(6) { animation-delay:1.15s; }
.page-enter .top_nav:nth-child(7) { animation-delay:1.23s; }
.page-enter .top_nav:nth-child(8) { animation-delay:1.31s; }
.page-enter .top_nav:nth-child(9) { animation-delay:1.39s; }

@keyframes fadeUpIn {
  0% { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ホバーなし（スマホ・タブレットなど） */
.top_navs { margin:15vh 0 0 0; }
.top_nav { width:100%; padding:20px 0 30px 0; display:block; border-bottom:1px solid #e3e3e3; }
.top_nav:last-child { border-bottom:none; }
.top_nav_image { width:100%; aspect-ratio:2 / 1; object-fit:cover; margin-bottom:10px; display:block; }
.top_nav_image_bottom { object-position: center bottom; }
.top_nav_wrapper { width:100%; display:inline-flex; gap:7.5%; position:relative; font-weight:bold; font-size:14px; line-height:1.8; }
.top_nav_wrapper::after { content:''; width:4px; height:100%; background:url(../img/arrow_b.svg) no-repeat 100% 50%; position:absolute; right:0; }
.top_nav_number { display:inline; }
.top_nav_texts { display:flex; flex-direction:column; }
.top_nav_text { font-weight:normal; }
.top_nav_en { display:none; }

@media screen and (min-width:769px) and (max-width:1024px) {
  .top_nav_wrapper { font-size:18px; }
}

/* 1024px以下で横長のとき */
@media screen and (max-width:1024px) and (orientation:landscape){
  .top_navs { margin:5vh 0 0 0; }
}

/* 1025px以上のとき */
@media screen and (min-width:1025px){
  .top_navs { margin:5vh 0 0 0; }

  /* headerとfooterを除いた残り領域いっぱいに広げ、その中でh1+ナビを縦中央寄せして1画面に収める */
  .wrapper.top_content { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }

  /* --  画像レイヤー本体（対応するリンクにホバーした時だけ .active を付与して表示） -- */
  .top_images { display:block; position:fixed; inset:0; z-index:0; pointer-events:none; }
  .top_image { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); /* 少し拡大した状態から */ transition:opacity 1s ease-out, transform 1.4s ease-out; }
  .top_image_bottom { background-position:center bottom; }
  .top_image_top { background-position:center top; }
  .top_image.active { opacity:1; transform:scale(1); /* 表示時に等倍まで戻す */ }

  /* マウスオーバー前の初期表示。ナビにホバーすると静止画(.top_image)がこの上に重なって隠す */
  .top_video { position:absolute; }
  body.is-hover .top_video { opacity:0; }

  /* 写真の上に暗いオーバーレイを敷いて文字の視認性を確保（ホバー時だけ表示） */
  .top_overlay { position:fixed; inset:0; background:rgba(0, 0, 0, 0.35); z-index:1; pointer-events:none; opacity:0; transition:opacity 1s ease-out; }
  .top_overlay.active { opacity:1; }

  /* --  ナビゲーション  -- */
  .top_navs { width:700px; padding-bottom:50px; position:relative; z-index:2; }
  .top_nav { margin:10px 0; padding:0; display:inline-block; border-bottom:none; }
  .top_nav_image { display:none; }
  .top_nav span { color:#000; text-decoration:none; letter-spacing:0.1em; opacity:1; transition:color 0.6s ease-out, opacity 0.6s ease-out, letter-spacing 0.6s ease-out; }
  .header_link, .header_link a { transition:color 0.6s ease-out; }
  body.is-hover .top_nav_wrapper::after { background:url(../img/arrow_w.svg) no-repeat 100% 50%; }
  body.is-hover .top_nav:hover span { color:#fff; opacity:1; letter-spacing:0.15em; }
  .top_nav span.top_nav_wrapper { width:100%; display:inline-block; font-size:14px; line-height:1.2; }
  .top_nav span.top_nav_number { width:4em; display:inline-block; }
  .top_nav span.top_nav_texts { display:inline-block; }
  .top_nav span.top_nav_title { width:130px; display:inline-block; border-right:1px solid rgba(0,0,0,0.2); }
  body.is-hover .top_nav:hover span.top_nav_title { border-right:1px solid rgba(255,255,255,0.4); }
  .top_nav span.top_nav_text { width:350px; padding-left:10px; display:inline-block; font-weight:normal; }
  .top_nav span.top_nav_en { display:inline-block; color:#808080; font-weight:normal; transition:color 0.6s ease-out; }
  body.is-hover .top_nav:hover span.top_nav_en { color:rgba(255,255,255,0.7); }

  /* ナビをホバー中の他の項目 */
  body.is-hover .top_nav span { color:#fff; opacity:0.6; }
  body.is-hover .top_nav span.top_nav_title { border-right:1px solid rgba(255,255,255,0.4); }
  body.is-hover .top_nav span.top_nav_en { color:rgba(255,255,255,0.7); }

  /* ナビをホバー中に反転するもの */
  /* header_link内の<a>はformat.cssの a{color:initial} が直接効いて継承を上書きするため、a にも明示指定 */
  body.is-hover .header_link,
  body.is-hover .header_link a { color:#fff; }
  body.is-hover .top_h1 { color:#fff; }
  body.is-hover footer { border-top:1px solid #fff; }
  body.is-hover .footer_link img.top_off { display:none; }
  body.is-hover .footer_link img.top_on { display:inline; }

  /*手書き用共通*/
  body.is-hover .top_copy_on { opacity:1; visibility:visible; transition:opacity 0.3s, visibility 0.3s; }
  body.is-hover .top_copy_off { opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s; }

  /*案4用*/
  .bg { background:url(../img/top/top_bg.svg) no-repeat 90% -20px; background-size:auto 97%; }
}

footer { padding-top:10px; }