@charset "UTF-8";

:root{
  --black:#000;
  --white:#fff;
  --line:rgba(255,255,255,.23);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  background:#000;
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

.site{
  min-height:100vh;
  background:#000;
}

.visual{
  position:relative;
  overflow:hidden;
  background:#050505;
}

.visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(0,0,0,.25);
}

.visual__bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.74) contrast(1.14);
}

.visual__inner{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.visual__logo{
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.34));
}

.content{
  background:#000;
}

.copy img{
  width:100%;
  height:auto;
}

/* PC */
@media (min-width:768px){
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden;
  }

  .site{
    display:grid;
    grid-template-columns:38.2% 61.8%;
    width:100%;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }

  .visual,
  .visual__bg{
    width:100%;
    height:100vh;
    min-height:100vh;
  }

  .visual__inner{
    padding-top:4.6vh;
  }

  .visual__logo{
    width:min(210px,25vw);
  }

  .content{
    position:relative;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
  }

  .content__inner{
    position:absolute;
    left:7.2vw;
    top:50%;
    width:min(760px,82%);
    transform:translateY(-49%);
  }

  .tagline{
    margin-bottom:31px;
    font-size:18px;
    font-weight:500;
    letter-spacing:.08em;
    color:rgba(255,255,255,.95);
  }

  .copy{
    width:min(744px,88%);
    margin:0 0 6.8vh;
  }

  .nav{
    width:450px;
    max-width:48vw;
  }

  .nav__item{
    position:relative;
    display:flex;
    align-items:center;
    height:58px;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    font-size:15px;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.94);
  }

  .nav__item::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:0;
    height:1px;
    background:#fff;
    transition:width .35s ease;
  }

  .nav__item::after{
    content:"→";
    position:absolute;
    right:0;
    top:50%;
    transform:translate(-12px,-50%);
    opacity:0;
    font-size:20px;
    transition:opacity .25s ease,transform .25s ease;
  }

  .nav__item:hover::before{
    width:100%;
  }

  .nav__item:hover::after{
    opacity:.9;
    transform:translate(0,-50%);
  }

  .brand-text{
    position:absolute;
    left:7.2vw;
    bottom:5.6vh;
    width:520px;
    max-width:calc(100% - 340px - 10.7vw);
    font-size:11px;
    line-height:2.1;
    letter-spacing:.12em;
    color:rgba(255,255,255,.72);
    white-space:nowrap;
  }

  .footer{
    position:absolute;
    right:3.5vw;
    bottom:5.25vh;
    display:flex;
    flex-direction:column;
    gap:7px;
    align-items:flex-end;
    text-align:right;
    font-size:10px;
    letter-spacing:.18em;
    color:#cccccc;
    white-space:nowrap;
  }
}

/* SP */
@media (max-width:767px){
  .visual{
    height:68svh;
    min-height:480px;
  }

  .visual::after{
    background:rgba(0,0,0,.15);
  }

  .visual__bg{
    object-position:center top;
    filter:brightness(.95) contrast(1.14);
  }

  .visual__inner{
    padding-top:0;
  }

  .visual__logo{
width:min(180px,36vw);
  }

  .content__inner{
    padding:36px 25px 0;
  }

  .tagline{
    margin-bottom:25px;
    font-size:16px;
    font-weight:500;
    letter-spacing:.08em;
    color:rgba(255,255,255,.95);
  }

  .copy{
    width:100%;
    margin:0 0 52px;
  }

  .nav{
    margin-bottom:72px;
    border-top:1px solid var(--line);
  }

  .nav__item{
    position:relative;
    display:flex;
    align-items:center;
    height:88px;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-left:14px;
    font-size:24px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.94);
  }

  .nav__item::after{
    content:"→";
    position:absolute;
    right:8px;
    top:50%;
    transform:translate(-12px,-50%);
    opacity:0;
    transition:opacity .25s ease,transform .25s ease;
  }

  .nav__item:active::after,
  .nav__item:hover::after{
    opacity:.8;
    transform:translate(0,-50%);
  }

  .brand-text{
    width:calc(100% - 50px);
    max-width:320px;
    margin:0 25px 46px;
    padding:0;
    text-align:left;
    font-size:13px;
    line-height:2.15;
    letter-spacing:.12em;
    color:rgba(255,255,255,.82);
  }

  .footer{
    width:calc(100% - 50px);
    margin:0 25px 54px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
    text-align:right;
    font-size:11px;
    letter-spacing:.18em;
    color:#cccccc;
  }
}

.reveal{
  opacity:0;
  transform:translateY(12px);
  animation:fadeUp .85s ease forwards;
}

.reveal--01{animation-delay:.05s}
.reveal--02{animation-delay:.16s}
.reveal--03{animation-delay:.28s}
.reveal--04{animation-delay:.40s}
.reveal--05{animation-delay:.52s}
.reveal--06{animation-delay:.60s}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    animation:none;
  }

  .nav__item::before,
  .nav__item::after{
    transition:none;
  }
}

/* 英数字 */
.nav__item,
.footer{
    font-family:"Barlow Semi Condensed",sans-serif;
    font-weight:600;
}

.nav__item{
    letter-spacing:.14em;
}

.footer{
    letter-spacing:.20em;
}