@charset "UTF-8";

/* ==========================================================================
   MV
========================================================================== */
#mv {
  background: var(--color1);
  color: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#mv .mv__inner {
  height: 100svh;
  min-height: 365px;
  padding: 10svh 7.5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
#mv .mv__inner .ttl {
  font-size: 8.4vw;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

#mv .mv_img {
  width: 100%;
  height: 75%;
  position: absolute;
  top: 0;
  left: 0;
}
#mv .mv_bg picture,
#mv .mv_img picture {
  width: 100%;
  height: 100%;
}
#mv .mv_bg picture img,
#mv .mv_img picture img,
#mv .mv_img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (orientation: portrait){
  #mv {
    background: var(--black);
  }
  #mv .mv_bg {
    display: none;
  }
  #mv .mv_img::before {
    content: '';
    display: block;
    background: linear-gradient(0deg,var(--black) 0%, transparent 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .6s cubic-bezier(.39, .575, .565, 1);
  }
}
@media (orientation: landscape){
  #mv .mv_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    mix-blend-mode: luminosity;
    opacity: .15;
  }
  #mv .mv_img {
    width: 40%;
    height: 100%;
  }
  #mv .mv__inner {
    padding-right: 6%;
    padding-left: 46%;
  }
  #mv .mv__inner::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    mix-blend-mode: multiply;
  }
  #mv .mv__inner .ttl {
    font-size: 4.75vw;
  }
}


/* ==========================================================================
   #intro
========================================================================== */
.reference {
  background: var(--color1_l);
  padding: 1px 5%;
  position: relative;
}
.reference::before {
  content: '\EC51';
  font-family: 'remixicon' !important;
  font-style: normal;
  font-size: 5.5em;
  line-height: 1;
  color: var(--color1);
  position: absolute;
  top: -.35em;
  left: -.25em;
}
.reference .headline .en_ttl {
  color: #FFF;
  font-style: italic;
  line-height: 1;
  margin-bottom: -.5em;
}

ul.links {
  list-style-type: none;
  padding-left: 0;
}
ul.links li:not(:last-child) {
  margin-bottom: 2rem;
}
ul.links .ttl {
  line-height: 1;
}
ul.links .ttl span {
  display: inline-block;
  font-size: 2em;
  font-family: var(--font1);
  transform: translateY(5%);
}
ul.links p {
  margin-top: 0;
}
ul.links .btn {
  background: var(--black);
  padding: .5em 1em;
  margin-top: .5em;
  font-size: 90%;
  box-shadow: none;
  min-width: 258px;
}
ul.links sup {
  background: #FFF;
  color: var(--black);
  padding: .1em 1em;
  border-radius: 1em;
  line-height: inherit;
  letter-spacing: 0;
  position: static;
}

/* ==========================================================================
   #reason
========================================================================== */


/* ==========================================================================
   #news
========================================================================== */


/* ==========================================================================
   #recruit
========================================================================== */


/* ==========================================================================
   #company
========================================================================== */
#company {
  border-top: 1px solid var(--border1);
}