/* poppins-300 - latin */
@font-face {
  font-display: optional;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/poppins-v24-latin-300.woff2') format('woff2');
}
/* poppins-regular - latin */
@font-face {
  font-display: optional;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
  font-display: optional;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/poppins-v24-latin-500.woff2') format('woff2');
}
/* poppins-600 - latin */
@font-face {
  font-display: optional;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/poppins-v24-latin-600.woff2') format('woff2'); 
}

/**
 * Base
 */

:root {
  --intro-delay-base: 1s;
  --intro-duration: 1.2s;
}

#header {
  background: transparent;
}

#wrap {
  margin-top: 0;
  line-height: 1.5;
}

#footer {
  padding-bottom: 80px;
}
#footer .footer-logo {
  margin-top: 54px;
  display: flex;
  justify-content: center;
}
#footer .footer-logo img {
  width: 148px;
}
#footer .footer-navi {
  padding-top: 0;
}
#footer .footer-navi .f-menu {
  flex-direction: row;
  justify-content: center;
}
#footer .footer-navi .f-menu-item {
  padding: 0;
}
#footer .footer-navi .f-menu-item a {
  display: block;
  font-size: 8px;
  padding: 5px 8px;
}
#footer .footer-social {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 27px;
  top: 0;
  left: 0;
  right: 0;
}
#footer .footer-social .f-social-item {
  display: block;
  margin: 0;
  padding: 2px 4px;
  width: 26px;
  height: 26px;
}
#footer .copyright {
  text-align: center;
  margin-top: 12px;
  font-size: 7px;
}
@media screen and (min-width: 768px) {
  #footer {
    padding-bottom: 175px;
  }
  #footer .footer-logo {
    margin-top: 148px;
  }
  #footer .footer-logo img {
    width: 296px;
  }
  #footer .footer-info {
    display: block;
    margin-top: 28px;
  }
  #footer .footer-navi .f-menu {
    gap: 16px;
  }
  #footer .footer-navi .f-menu-item a {
    font-size: 15px;
  }
  #footer .footer-social {
    margin-top: 60px;
    gap: 32px;
  }
  #footer .footer-social .f-social-item {
    width: 45px;
    height: 45px;
  }
  #footer .copyright {
    font-size: 12px;
    margin-top: 25px;
  }
}

/**
 * Utilities
 */

@media screen and (min-width: 768px) {
  .u-max-md {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .u-md {
    display: none;
  }
}

.u-poppins {
  font-family: 'Poppins', sans-serif;
}

.u-yu-gothic {
  font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
    sans-serif;
}

.u-hidden {
  display: none;
}

.u-section {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1270px;
}
.u-section.is-no-pad {
  padding: 0;
}
.u-section.is-small {
  max-width: 1070px;
}
.u-section.is-large {
  max-width: 1470px;
}

/**
 * Animations
 */
[data-aos='fade-up'] {
  transition-duration: 1s;
  transition-property: transform, opacity;
}
[data-aos='fade-up']:not(.aos-animate) {
  opacity: 0;
  transform: translateY(8px);
}
@media screen and (min-width: 768px) {
  [data-aos='fade-up']:not(.aos-animate) {
    transform: translateY(16px);
  }
}

/**
 * Animations (Intro)
 */
body.top:not(.is-intro-animate) {
  visibility: hidden;
}
#header,
[data-intro='kv'],
[data-intro='scroll-indicator'],
[data-intro='kv-phrase'],
.kv-image {
  transition-property: transform, opacity;
}
[data-intro='kv'] {
  transition-delay: calc(var(--intro-delay-base) * 0);
  transition-duration: calc(var(--intro-duration) * 0.6);
}
.kv-image {
  transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1);
  transition-duration: calc(var(--intro-duration) * 1);
  will-change: transform, opacity;
}

.kv-image.is-09 {
  transition-delay: calc(var(--intro-delay-base) * 0.3);
}
.kv-image.is-06 {
  transition-delay: calc(var(--intro-delay-base) * 0.33);
}
.kv-image.is-04 {
  transition-delay: calc(var(--intro-delay-base) * 0.36);
}
.kv-image.is-14 {
  transition-delay: calc(var(--intro-delay-base) * 0.39);
}
.kv-image.is-10 {
  transition-delay: calc(var(--intro-delay-base) * 0.42);
}
.kv-image.is-01 {
  transition-delay: calc(var(--intro-delay-base) * 0.45);
}
.kv-image.is-11 {
  transition-delay: calc(var(--intro-delay-base) * 0.48);
}
.kv-image.is-08 {
  transition-delay: calc(var(--intro-delay-base) * 0.51);
}
.kv-image.is-12 {
  transition-delay: calc(var(--intro-delay-base) * 0.54);
}
.kv-image.is-05 {
  transition-delay: calc(var(--intro-delay-base) * 0.57);
}
.kv-image.is-13 {
  transition-delay: calc(var(--intro-delay-base) * 0.6);
}
.kv-image.is-07 {
  transition-delay: calc(var(--intro-delay-base) * 0.63);
}
.kv-image.is-15 {
  transition-delay: calc(var(--intro-delay-base) * 0.66);
}
.kv-image.is-16 {
  transition-delay: calc(var(--intro-delay-base) * 0.69);
}
.kv-image.is-02 {
  transition-delay: calc(var(--intro-delay-base) * 0.72);
}
.kv-image.is-03 {
  transition-delay: calc(var(--intro-delay-base) * 0.75);
}
.kv-image.is-logo {
  transition-delay: calc(var(--intro-delay-base) * 0.92);
}
#header {
  transition-delay: calc(var(--intro-delay-base) * 0.98);
  transition-duration: calc(var(--intro-duration) * 0.8);
}
[data-intro='scroll-indicator'] {
  transition-delay: calc(var(--intro-delay-base) * 1.04);
  transition-duration: calc(var(--intro-duration) * 0.8);
}
[data-intro='kv-phrase'] {
  transition-delay: calc(var(--intro-delay-base) * 1.04);
  transition-duration: calc(var(--intro-duration) * 0.8);
}

body.top:not(.is-intro-animate) [data-intro='kv'],
body.top:not(.is-intro-animate) #header,
body.top:not(.is-intro-animate) [data-intro='scroll-indicator'],
body.top:not(.is-intro-animate) [data-intro='kv-phrase'],
body.top:not(.is-intro-animate) .kv-image {
  opacity: 0;
}
body.top:not(.is-intro-animate) .kv-image.is-01 {
  /* transform: translateY(1.8cqw); */
  transform: translateY(0.9cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-02 {
  /* transform: translateY(0.8cqw); */
  transform: translateY(0.4cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-03 {
  /* transform: translateY(0.9cqw); */
  transform: translateY(0.45cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-04 {
  /* transform: translateY(0.7cqw); */
  transform: translateY(0.35cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-05 {
  /* transform: translateX(2.2cqw); */
  transform: translateX(1.1cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-06 {
  /* transform: translateY(0.7cqw); */
  transform: translateY(0.35cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-07 {
  /* transform: translateY(-0.6cqw); */
  transform: translateY(-0.3cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-08 {
  /* transform: translateY(0.4cqw); */
  transform: translateY(0.2cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-09 {
  /* transform: translateX(-0.6cqw); */
  transform: translateX(-0.3cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-10 {
  /* transform: translateX(0.8cqw); */
  transform: translateX(0.4cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-11 {
  /* transform: translateY(0.6cqw); */
  transform: translateY(0.3cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-12 {
  /* transform: translateX(-1.1cqw); */
  transform: translateX(-0.55cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-13 {
  /* transform: translateY(-0.3cqw); */
  transform: translateY(-0.15cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-14 {
  /* transform: translateY(-0.5cqw); */
  transform: translateY(-0.25cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-15 {
  /* transform: translateY(0.6cqw); */
  transform: translateY(0.3cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-16 {
  /* transform: translateY(-0.4cqw); */
  transform: translateY(-0.2cqw);
}
body.top:not(.is-intro-animate) .kv-image.is-logo {
  /* transform: translateY(1.6cqw); */
  transform: translateY(0.8cqw);
}
body.top:not(.is-intro-animate) [data-intro='kv-phrase'] {
  /* transform: translateY(0.8cqw); */
  transform: translateY(0.4cqw);
}

/* Animation of changing the background color of #header on scroll */
body.top.is-intro-animated #header {
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: background-color;
  opacity: 1;
}
body.top.is-intro-animated.is-scrolling #header {
  background-color: #fff;
}

/**
 * Components
 */

 .kv {
  position: relative;
  height: calc(100svh - 3vw);
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .kv {
    height: calc(100svh - min(2vw, 30px));
  }
}

.kv-container {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kv-image {
  position: absolute;
}
.kv-image.is-logo {
  width: 76.2cqw;
}
.kv-image.is-01 {
  top: 10cqw;
  left: 36.5cqw;
  width: 6.4cqw;
}
.kv-image.is-02 {
  top: 16.1cqw;
  left: 12.3cqw;
  width: 2.5cqw;
}
.kv-image.is-03 {
  top: 20.5cqw;
  left: 54.9cqw;
  width: 4.1cqw;
}
.kv-image.is-04 {
  top: 26.7cqw;
  left: 30.2cqw;
  width: 9.7cqw;
}
.kv-image.is-05 {
  top: 29.2cqw;
  left: 75.7cqw;
  width: 17.6cqw;
}
.kv-image.is-06 {
  top: 21.3cqw;
  left: 71.9cqw;
  width: 5.3cqw;
}
.kv-image.is-07 {
  top: 16.8cqw;
  left: 59cqw;
  width: 12.4cqw;
}
.kv-image.is-08 {
  top: 28.3cqw;
  left: 50.1cqw;
  width: 9.3cqw;
}
.kv-image.is-09 {
  top: 23.6cqw;
  left: 39.9cqw;
  width: 6.2cqw;
}
.kv-image.is-10 {
  top: 25cqw;
  left: 17.7cqw;
  width: 8.4cqw;
}
.kv-image.is-11 {
  top: 23.5cqw;
  left: 5.1cqw;
  width: 7.6cqw;
}
.kv-image.is-12 {
  top: 18cqw;
  left: 85.5cqw;
  width: 10.6cqw;
}
.kv-image.is-13 {
  top: 16.5cqw;
  left: 76.9cqw;
  width: 5.2cqw;
}
.kv-image.is-14 {
  top: 19.4cqw;
  left: 41.6cqw;
  width: 8.2cqw;
}
.kv-image.is-15 {
  top: 15.3cqw;
  left: 17.2cqw;
  width: 6.4cqw;
}
.kv-image.is-16 {
  top: 16.3cqw;
  left: 25.8cqw;
  width: 11cqw;
}

.kv-phrase {
  position: absolute;
  top: calc(100% - 5.8vw);
  font-size: 11.3vw;
  line-height: 1.2;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .kv-phrase {
    top: calc(100% - min(3.4vw, 50px));
    font-size: min(7vw, 100px);
  }
}

.scroll-indicator {
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 30px;
  width: 150px;
  transform: rotate(-90deg) translate(-50%, 0);
  transform-origin: left top;

  --progress: 1; /* 0 - 1 */
  --value-width: 20%;
  --value-offset: calc(var(--progress) * (100% - var(--value-width)));
}
.scroll-indicator-bar {
  position: relative;
  width: 150px;
  height: 1px;
  background-color: #bababa;
}
.scroll-indicator-value {
  position: absolute;
  right: var(--value-offset);
  top: -1px;
  width: var(--value-width);
  height: 3px;
  background-color: #808080;
  border-radius: 2px;
}
.scroll-indicator-text {
  position: absolute;
  font-size: 12px;
  color: #7f7f7f;
  left: 100%;
  top: 0;
  transform: translate(12px, -50%);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .scroll-indicator {
    display: none;
  }
}