@charset "UTF-8";

/* =====================================================
  TOP MINIMAL
===================================================== */

.top-minimal{
  position:relative;
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

/* =====================================================
  BLACK HOLD
===================================================== */

.top-minimal::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#000;
  opacity:1;
  pointer-events:none;
  animation:topBlackHold 1.05s ease forwards;
}

/* =====================================================
  GRADIENT DRIFT
===================================================== */

.top-minimal::after{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%, rgba(22,26,34,.16) 0%, rgba(7,10,16,.08) 32%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, rgba(5,8,14,.14) 0%, rgba(0,0,0,0) 100%);
  opacity:0;
  filter:blur(22px);
  animation:
    topGradientReveal 1.6s cubic-bezier(.22,.61,.36,1) 1s forwards,
    topGradientDrift 18s ease-in-out 2.2s infinite alternate;
}

/* =====================================================
  HERO
===================================================== */

.top-hero{
  position:relative;
  z-index:1;
  width:100%;
  padding:48px 20px 32px;
}

.top-hero__inner{
  width:min(100%, 1040px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  /* 🎯 重心を下げる（ここが本体） */
  transform:translateY(36px);
}

/* =====================================================
  LOGO
===================================================== */

.top-hero__logo{
  margin:0 0 20px; /* ← 詰める（重要） */
  opacity:0;
  animation:storyLogoAppear 2s cubic-bezier(.22,.61,.36,1) 1.2s forwards;
}

.top-hero__logo img{
  display:block;
  width:88px; /* ← 少し大きく */
  margin:0 auto;
  opacity:.94;
  transform:translateY(6px);
  animation:topLogoBreath 6s ease-in-out 4.2s infinite;
}

/* =====================================================
  TITLE
===================================================== */

.top-hero__title{
  margin:0;
  margin-top:6px; /* ← ロゴに寄せる */

  font-family:var(--fb-en);
  font-size:13px; /* ← 少しだけ下げる（上品に） */
  letter-spacing:.135em;
  color:rgba(244,243,239,.86);

  opacity:0;
  animation:storyFade 1s cubic-bezier(.22,.61,.36,1) 2.2s forwards;
}

/* =====================================================
  NAV（INSIDE）
===================================================== */

.top-hero__nav{
  margin-top:28px; /* ← 黄金比調整（32→28） */
  opacity:0;
  animation:storyFade 1s cubic-bezier(.22,.61,.36,1) 2.9s forwards;
}

.top-hero__link{
  display:inline-block;
  font-family:var(--fb-en);

  font-size:10px;
  letter-spacing:.28em;

  text-transform:uppercase;
  text-decoration:none;

  color:rgba(244,243,239,.72);
  opacity:.85;
}

/* アンダーライン完全削除 */
.top-hero__link::after{
  display:none;
}

/* =====================================================
  FOOTER
===================================================== */

.top-footer{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 0 18px;
  background:#000;
}

.top-footer__inner{
  width:min(100%, 1040px);
  margin:0 auto;
  padding:0 20px;
}

.top-footer__address{
  margin:0;
  text-align:center;
  font-family:var(--fb-en);
  font-size:9px;
  letter-spacing:.14em;
  color:#f4f3ef;
  opacity:0;
  animation:storyFade 1.2s cubic-bezier(.22,.61,.36,1) 4.2s forwards;
}

/* =====================================================
  ANIMATION
===================================================== */

@keyframes topBlackHold{
  0%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0;}
}

@keyframes topGradientReveal{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes topGradientDrift{
  0%{transform:scale(1.02);}
  100%{transform:scale(1.04);}
}

@keyframes storyLogoAppear{
  from{
    opacity:0;
    transform:translateY(10px);
    filter:blur(6px);
  }
  to{
    opacity:1;
    transform:translateY(6px);
    filter:blur(0);
  }
}

@keyframes storyFade{
  from{
    opacity:0;
    filter:blur(2px);
  }
  to{
    opacity:1;
    filter:blur(0);
  }
}

@keyframes topLogoBreath{
  0%{transform:translateY(6px) scale(1);}
  50%{transform:translateY(6px) scale(1.02);}
  100%{transform:translateY(6px) scale(1);}
}

/* =====================================================
  RESPONSIVE
===================================================== */

@media (max-width:768px){

  .top-hero{
    padding:40px 16px 24px;
  }

  .top-hero__logo img{
    width:70px;
  }

  .top-hero__title{
    font-size:13px;
  }

  .top-footer__address{
    font-size:8px;
  }
}


/* =====================================================
  TOP PAGE LEAVE
===================================================== */

.top-minimal,
.top-footer,
.top-hero__logo,
.top-hero__title,
.top-hero__nav{
  will-change:opacity, transform, filter;
}

/* クリック後の余韻 */
body.is-top-leave .top-minimal{
  opacity:0;
  transform:translateY(8px);
  filter:blur(2px);

  transition:
    opacity .42s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1),
    filter .42s cubic-bezier(.22,.61,.36,1);
}

/* ロゴはほんの少しだけ残像を残す */
body.is-top-leave .top-hero__logo{
  opacity:.34;
  transform:translateY(2px) scale(.992);

  transition:
    opacity .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1);
}

/* タイトルとナビは先に静かに消える */
body.is-top-leave .top-hero__title,
body.is-top-leave .top-hero__nav{
  opacity:0;
  transform:translateY(4px);
  filter:blur(2px);

  transition:
    opacity .3s cubic-bezier(.22,.61,.36,1),
    transform .3s cubic-bezier(.22,.61,.36,1),
    filter .3s cubic-bezier(.22,.61,.36,1);
}

/* フッターも少し遅れて消える */
body.is-top-leave .top-footer{
  opacity:0;

  transition:
    opacity .32s cubic-bezier(.22,.61,.36,1);
}

/* クリック感をほんの少しだけ */
.top-hero__link{
  transition:
    color .35s ease,
    opacity .35s ease,
    transform .24s ease;
}

.top-hero__link:active{
  transform:translateY(1px);
  opacity:.72;
}


/* =====================================================
  TOP -> BAR
  QUIET AFTERIMAGE TRANSITION
===================================================== */

/* 通常の入場 */
body.is-page-enter #main,
body.is-page-enter .fb-footer,
body.is-page-enter footer{
  opacity:0;
  transform:translate3d(0, 8px, 0);
  filter:blur(1.5px);
}

body.is-ready #main,
body.is-ready .fb-footer,
body.is-ready footer{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .72s cubic-bezier(.22,.61,.36,1);
}

/* 通常のページ離脱 */
body.is-page-leave #main,
body.is-page-leave .fb-footer,
body.is-page-leave footer{
  opacity:0;
  transform:translate3d(0, 8px, 0);
  filter:blur(2px);
  transition:
    opacity .22s cubic-bezier(.22,.61,.36,1),
    transform .22s cubic-bezier(.22,.61,.36,1),
    filter .22s cubic-bezier(.22,.61,.36,1);
}

/* =========================================
  TOP -> BAR 専用
  先に title / inside / enter を消す
========================================= */

body.is-top-leave [data-top-title],
body.is-top-leave [data-top-inside],
body.is-top-leave #topEnterLink{
  opacity:0;
  transform:translate3d(0, 10px, 0);
  filter:blur(4px);
  transition:
    opacity .16s cubic-bezier(.22,.61,.36,1),
    transform .24s cubic-bezier(.22,.61,.36,1),
    filter .24s cubic-bezier(.22,.61,.36,1);
}

/* ロゴ本体は少しだけ遅く消える */
body.is-top-leave [data-top-logo]{
  opacity:.18;
  transform:translate3d(0, 4px, 0) scale(1.01);
  filter:blur(1.5px);
  transition:
    opacity .28s cubic-bezier(.22,.61,.36,1),
    transform .32s cubic-bezier(.22,.61,.36,1),
    filter .32s cubic-bezier(.22,.61,.36,1);
  transition-delay:.04s;
}

/* ページ全体は最後に静かに抜ける */
body.is-top-leave #main,
body.is-top-leave .fb-footer,
body.is-top-leave footer{
  opacity:0;
  transform:translate3d(0, 6px, 0);
  filter:blur(1.5px);
  transition:
    opacity .30s cubic-bezier(.22,.61,.36,1),
    transform .34s cubic-bezier(.22,.61,.36,1),
    filter .34s cubic-bezier(.22,.61,.36,1);
  transition-delay:.03s;
}

/* =========================================
  AFTERIMAGE GHOST
========================================= */

.top-enter-afterimage{
  opacity:.92;
  transform:translate3d(0, 0, 0) scale(1);
  filter:blur(0);
  will-change:transform, opacity, filter;
}

.top-enter-afterimage.is-animate{
  opacity:0;
  transform:translate3d(0, 10px, 0) scale(1.035);
  filter:blur(4px);
  transition:
    opacity .46s cubic-bezier(.22,.61,.36,1),
    transform .52s cubic-bezier(.22,.61,.36,1),
    filter .52s cubic-bezier(.22,.61,.36,1);
}

/* クリック中のノイズ防止 */
body.is-top-leave{
  pointer-events:none;
}

@media (max-width:767px){
  body.is-page-enter #main,
  body.is-page-enter .fb-footer,
  body.is-page-enter footer{
    transform:translate3d(0, 6px, 0);
    filter:blur(1px);
  }

  body.is-top-leave [data-top-title],
  body.is-top-leave [data-top-inside],
  body.is-top-leave #topEnterLink{
    transform:translate3d(0, 8px, 0);
    filter:blur(3px);
  }

  .top-enter-afterimage.is-animate{
    transform:translate3d(0, 8px, 0) scale(1.03);
    filter:blur(3px);
  }
}