@charset "UTF-8";
.contsblock__title--en {
  font-size: 94px;
  margin-bottom: 32px;
  display: block;
}

.service__left__title--jp {
  font-size: 24px;
}

.pc_br {
  display: block;
}

.sp_br {
  display: none;
}

/* style.css */
#container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  transition: 1.5s;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 1;
  transition: opacity 2s ease-in-out;
  opacity: 1;
}

#progressBarContainer {
  width: 100%;
  height: 100vh;
  background-color: #333333;
  transform: rotate(-90deg);
  z-index: 2;
  mask-image: url(../image/k1.png);
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 10%;
          mask-size: 10%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url(../image/k1.png);
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 10%;
}

#progressBar {
  width: 0;
  height: 100%;
  background-color: #ffffff;
  transition: width 2s ease-in-out;
}

* {
  font-weight: 600;
  font-family: "Noto Sans JP", "Inter", sans-serif;
  font-style: normal;
}

.main .conts__wrap {
  max-width: 1280px;
  width: 85.582%;
  margin-left: auto;
  margin-right: auto;
}
.main .bg__all--white {
  background-color: #ffffff;
  padding: 520px 0;
  margin-bottom: 520px;
}

.video {
  /*天地中央配置*/
  position: fixed;
  z-index: -999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  transition: opacity 0.5s ease-out;
}

.header {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.header__logo {
  width: 180px;
  color: #ffffff;
  text-decoration: none;
}
.header__logo svg {
  fill: #ffffff;
}
.header__nav {
  display: flex;
  align-items: center;
}
.header__nav__item {
  font-size: 18px;
  font-weight: 600;
  margin-right: 48px;
  color: #ffffff;
  text-decoration: none;
}
.header__nav__item.black {
  color: #000000;
}
.header__nav__item--button {
  background-color: white;
  padding: 1rem;
  border-radius: 3rem;
  width: 180px;
  text-align: center;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 18px;
}
.header__nav__item--button.black {
  background-color: black;
  padding: 1rem;
  border-radius: 3rem;
  width: 180px;
  text-align: center;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 18px;
}
.header__nav__item--button:last-child {
  margin-right: 0px;
}
.header__menu-icon.active span:nth-child(1) {
  transform: translateY(13px) rotate(-45deg);
}
.header__menu-icon.active span:nth-child(2) {
  opacity: 0;
}
.header__menu-icon.active span:nth-child(3) {
  transform: translateY(-13px) rotate(45deg);
}
.header__menu-icon span {
  transition: all 0.3s ease;
}
.header__menu-icon.black span {
  background-color: #000000;
}
.header__nav {
  display: flex;
  list-style: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 1;
}
.header__nav__item:last-child {
  margin-right: 0;
}
.header__menu-icon {
  cursor: pointer;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 40px;
  height: 40px;
}
.header__menu-icon span {
  display: block;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 3px;
}

.black {
  color: #000000;
}

.firstview {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.firstview__wrap {
  width: 1280px;
  bottom: 10%;
  left: 6%;
  position: absolute;
}
.firstview__title {
  color: #ffffff;
  font-size: clamp(1.75rem, 0.25rem + 7.5vw, 5.875rem);
  font-weight: 700;
  line-height: clamp(3.125rem, 0.966rem + 10.8vw, 8.063rem);
  /* 151.042% */
  margin-bottom: 75px;
}
.firstview__text {
  color: #ffffff;
  font-family: Inter;
  font-size: 28px;
  /* font-weight: 200; */
  line-height: 42px;
}

.moji {
  display: inline-block;
  margin-right: -20px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.moji--fv {
  display: inline-block;
  margin-right: -20px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.moji.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.moji_nomove {
  margin-right: 0;
}

.contsblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contsblock--intro {
  margin-bottom: 680px;
}
.contsblock--intro__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 70px;
  margin-bottom: 30px;
}
.contsblock--intro__text {
  font-size: 20px;
  font-weight: 600;
  line-height: 42px;
}
.contsblock--second {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 680px;
}
.contsblock--fourth {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 680px;
}
.contsblock--fifth {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 680px;
}
.contsblock--sixth {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 680px;
}
.contsblock__left {
  flex-basis: 540px;
  width: 540px;
}
.contsblock__right {
  flex-basis: 740px;
  width: 740px;
}
.contsblock__right__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 70px;
  margin-bottom: 30px;
}
.contsblock__right__text {
  font-size: 20px;
  font-weight: 600;
  line-height: 42px;
  margin-bottom: 20px;
}
.contsblock__right--circle {
  width: 340px;
  height: 340px;
  margin-bottom: 110px;
  display: inline-block;
  aspect-ratio: 1/1;
  position: relative;
}
.contsblock__right--circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid transparent;
  background: linear-gradient(135deg, rgba(17, 154, 55, 0.2), rgba(229, 0, 27, 0.2), rgba(0, 114, 178, 0.2)) border-box;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
}
.contsblock__right--circle_wrap {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.contsblock__right--circle h3 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 30px;
}
.contsblock__right--circle p {
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
}
.contsblock__right--circle:first-child {
  margin-right: -20px;
}
.contsblock__right--circle:last-child {
  margin-left: -20px;
}
.contsblock__right-company_info dl {
  display: flex;
  border-bottom: 1px solid #666666;
  margin-bottom: 20px;
  font-size: 18px;
}
.contsblock__right-company_info dl dt {
  width: 12%;
  margin-right: 4rem;
  line-height: 32px;
  padding-bottom: 20px;
}
.contsblock__right-company_info dl dd {
  padding-bottom: 20px;
}
.contsblock__right-company_info dl dd p {
  line-height: 32px;
  /* 200% */
}
.contsblock__right__news dl {
  display: flex;
  border-bottom: 1px solid #666666;
  margin-bottom: 20px;
  font-size: 18px;
}
.contsblock__right__news dl dt {
  width: 12%;
  margin-right: 4rem;
  line-height: 32px;
  padding-bottom: 20px;
}
.contsblock__right__news dl dd {
  padding-bottom: 20px;
}
.contsblock__right__news dl dd p {
  line-height: 32px;
  /* 200% */
}
.contsblock__title--en {
  font-family: Inter;
  font-size: 94px;
  font-weight: 600;
  line-height: 94px;
  margin-bottom: 10px;
}
.contsblock__title--jp {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.contsblock__text {
  font-size: 20px;
}
.contsblock__text--contact {
  font-size: 20px;
  line-height: 42px;
  margin-bottom: 40px;
}
.contsblock__text--download {
  font-size: 20px;
  line-height: 42px;
  margin-bottom: 40px;
}
.contsblock__banner {
  flex-basis: 100%;
  display: flex;
}
.contsblock__banner__image {
  margin-right: 3rem;
}
.contsblock__banner__image:last-child {
  margin-right: 0rem;
}
.contsblock__banner img {
  width: 100%;
  height: auto;
}
.contsblock__button {
  background-color: black;
  padding: 1rem;
  border-radius: 3rem;
  width: 180px;
  text-align: center;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  height: -moz-fit-content;
  height: fit-content;
}

.contsblock--twocolumn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1500px;
}
.contsblock--twocolumn .contsblock {
  width: -moz-fit-content;
  width: fit-content;
  display: block;
}
.contsblock--twocolumn .contsblock__title--jp {
  margin-bottom: 30px;
  display: block;
}
.contsblock--twocolumn .contsblock__text {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  line-height: 42px;
}

.footer {
  height: calc(100vh + 118px);
  position: relative;
}
.footer .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  margin-bottom: 480px;
}
.footer .container img {
  width: 240px;
  height: auto;
}
.footer__text {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-weight: 100;
  font-style: normal;
  font-size: 3rem;
}
.footer__text span.moji.fade-in {
  font-family: "nitalago-ruika", sans-serif;
  font-weight: 400;
  margin: 0 -5.5px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2.5rem;
}
.footer__bottom-text {
  line-height: 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0.75rem auto 0;
}
.footer__copyright {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.7rem;
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 1366px) {
  .header {
    padding: 20px;
  }
  .headersvg {
    width: 120px;
  }
  .header__menu-icon {
    display: flex;
  }
  .header__nav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #333;
    flex-direction: column;
    align-items: start;
    padding: 60px 20px 20px;
    display: flex;
    position: absolute;
    height: 100vh;
    top: 0;
    opacity: 0;
    visibility: hidden;
  }
  .header__nav__item {
    margin-bottom: 10px;
    color: white;
    text-decoration: none;
  }
  .header__nav__item.black {
    color: #ffffff;
  }
  .header__nav.active {
    opacity: 1;
    background-color: rgba(51, 51, 51, 0.8);
    visibility: visible;
  }
  .header__nav a {
    padding: 2rem 0;
    text-align: center;
    font-size: 150%;
    display: block;
    width: 100%;
  }
  .header__nav__item--button.black {
    padding: 2rem 0;
    text-align: center;
    font-size: 150%;
    display: block;
    width: 90%;
    background-color: #ffffff;
    color: #000000;
    margin: 20px auto 20px;
  }
  a.header__nav__item--button {
    margin-bottom: 2rem;
  }
  .main {
    max-width: 100%;
    position: static;
    width: 100%;
    padding: 0 8rem;
    margin: 0 auto;
  }
  .firstview {
    position: static;
    padding: 8rem 4rem;
    margin: 180px auto;
    height: auto;
  }
  .firstview__title {
    font-size: clamp(1.75rem, 0.25rem + 7.5vw, 4.47rem);
    line-height: clamp(3.125rem, 0.966rem + 7.8vw, 9.063rem);
  }
  .firstview__wrap {
    position: static;
    width: 100%;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
  }
  .main {
    padding: 0;
  }
  .main .bg__all--white {
    padding: 240px 0;
    margin-bottom: 240px;
  }
  .video {
    width: auto;
  }
  .contsblock {
    display: block;
    margin-bottom: 240px;
  }
  .contsblock--intro {
    margin-bottom: 240px;
  }
  .contsblock--twocolumn {
    display: block;
    width: 100%;
  }
  .contsblock--twocolumn .contsblock {
    width: 100%;
  }
  .contsblock--second {
    margin-bottom: 240px;
  }
  .contsblock--fourth {
    margin-bottom: 240px;
  }
  .contsblock--fifth {
    margin-bottom: 240px;
  }
  .contsblock--last {
    margin-bottom: 0;
  }
  .contsblock__title {
    margin-bottom: 100px;
  }
  .contsblock__right {
    width: 100%;
    flex-basis: auto;
    text-align: center;
    margin: 0 auto;
  }
  .contsblock__right__title {
    text-align: left;
  }
  .contsblock__right__text {
    text-align: left;
  }
  .contsblock__right-company_info {
    text-align: left;
  }
  .contsblock__text-btn {
    display: flex;
  }
  .contsblock__text--contact {
    width: 70%;
  }
  .contsblock__text--download {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .pc_br {
    display: none;
  }
  .sp_br {
    display: block;
  }
  .firstview {
    height: 95vh;
    margin: 0 auto 0px;
    padding: 0 2rem;
    position: relative;
  }
  .firstview__wrap {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 0 0 4%;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .firstview__text {
    font-size: 21px;
    line-height: 32px;
  }
  #progressBarContainer {
    width: 100%;
    height: 100vh;
    background-color: #333333;
    transform: rotate(-90deg);
    z-index: 2;
    mask-image: url(../image/k1.png);
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 25%;
            mask-size: 25%;
    /* Chrome, Safari用 */
    -webkit-mask-image: url(../image/k1.png);
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
  }
  .moji {
    margin-right: -10px;
  }
  .moji--fv {
    margin-right: -10px;
  }
  .contsblock {
    margin-bottom: 240px;
  }
  .contsblock--intro {
    margin-bottom: 240px;
  }
  .contsblock--intro__title {
    font-size: 42px;
    line-height: 64px;
  }
  .contsblock__title {
    margin-bottom: 40px;
  }
  .contsblock__title--en {
    font-size: 64px;
    line-height: 94px;
    margin-bottom: -10px;
  }
  .contsblock__title--jp {
    margin-bottom: 40px;
    display: block;
  }
  .contsblock__banner {
    display: block;
  }
  .contsblock__banner__image {
    margin-right: 0rem;
    margin-bottom: 4rem;
  }
  .contsblock__text-btn {
    display: block;
  }
  .contsblock__text--contact {
    width: 100%;
  }
  .contsblock__text--download {
    width: 100%;
  }
  .contsblock__right {
    width: 100%;
  }
  .contsblock__right--circle:first-child {
    margin-right: 0px;
    margin-bottom: -40px;
  }
  .contsblock__right--circle:last-child {
    margin-left: 0px;
  }
  .contsblock__right__title {
    font-size: 30px;
    line-height: 46px;
  }
  .contsblock__right-company_info dl {
    display: block;
  }
  .contsblock__right-company_info dl dt {
    width: 100%;
    margin-right: 0;
    padding-bottom: 5px;
  }
  .contsblock__right__news dl {
    display: block;
  }
  .contsblock__right__news dl dt {
    padding-bottom: 0;
  }
  .contsblock__right__news dl dd p {
    text-align: left;
  }
  .contsblock--second {
    margin-bottom: 240px;
  }
  .contsblock--fourth {
    margin-bottom: 240px;
  }
  .contsblock--fifth {
    margin-bottom: 240px;
  }
  .contsblock--last {
    margin-bottom: 0;
  }
}/*# sourceMappingURL=style.css.map */