@charset "UTF-8";

:root {
  --color-black: #22221F;
  --color-white: #ffffff;
  --color-gray: #F5F5F5;
  --color-bg-bk: #290202;
  --color-red: #6E0202;

  --poppins: "Poppins", sans-serif;
  --noto: "Noto Sans JP", sans-serif;

  --fs24: 2.4rem;
  --fs22: 2.2rem;
}

@media screen and (max-width:767px) {
  :root {
    --fs24: 2rem;
    --fs22: 1.8rem;
  }
}

/*================================================
 *  loader
 ================================================*/
.loader {
  position: fixed;
  inset: 0;
  background: #0b0d10;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .5s ease;
}

.loader.hide {
  opacity: 0;
  pointer-events: none;
}


.logo {
  position: absolute;
  /* top: -1rem; */
  /* right: -91rem; */
  /* left: 10rem; */
  opacity: 0;
}

.logo img {
  height: 30vh;
  width: auto;
  max-width: unset;
  display: block;
}

.count {
  position: absolute;
  /* top: 50%;
  left: 50%; */
  color: var(--color-white);
  /* transform: translate(-50%, -50%); */
  font-family: var(--poppins);
  font-weight: 200;
  top: 50%;
  left: 10%;
  transform: translateY(50%);
}


/* .loader {
  position: fixed;
  inset: 0;
  background: #0b0d10;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .5s ease;
}

.loader.hide {
  opacity: 0;
  pointer-events: none;
}

.count {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 2rem;
  font-family: sans-serif;
}

.logo {
  opacity: 0;
  transition: opacity 0.3s linear;
}

.logo img {
  height: 40vh;
  width: auto;
  display: block;
} */
@media screen and (max-width:767px) {
  .logo img {
    height: auto;
    width: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    transition: none;
  }

  .loader .bar span {
    transition: none;
  }
}

/*================================================
* mainVisual
================================================*/
#mainVisual {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

#mainVisual video {
  position: absolute;
  right: -6rem;
  /* left: calc(100% - 15rem); */
  /* bottom: -10rem; */
  top: -6rem;
  /* z-index: -1; */
  height: 120vh;
  width: auto;
  display: block;
  opacity: 0;
  transition: 4s;
  transition-delay: 2s;
}

.loading-hide #mainVisual video {
  opacity: 1;
}

.mv_catch {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  /* left: 50%; */
  left: 7rem;
  bottom: 6rem;
  /* transform: translateX(-50%); */
}

#mainVisual .catch_en {
  font-size: 12.4rem;
  font-family: var(--poppins);
  opacity: 0.1;
  white-space: nowrap;
}

.catch_en .clip_inner {
  height: 9rem;
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.catch_en .clip_inner .aim {
  display: flex;
}

#mainVisual .sp {
  display: none;
}

.catch_ja {
  padding-left: 7rem;
  margin-top: -1.5rem;
  font-size: 2.2rem;
}

.in_top .catch_en .clip_inner .aim span {
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(100%);

}

.loading-hide .in_top.on .catch_en .clip_inner .aim span {
  transform: translateY(0%);
}

/* .in_top.on .catch_en .clip_inner .aim span {
  transform: translateY(0%);
} */

.in_top .catch_en .clip_inner .aim span:nth-of-type(2) {
  transition-delay: 0.57s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(3) {
  transition-delay: 0.64s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(4) {
  transition-delay: 0.71s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(5) {
  transition-delay: 0.78s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(6) {
  transition-delay: 0.85s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(7) {
  transition-delay: 0.92s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(8) {
  transition-delay: 0.99s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(9) {
  transition-delay: 1.06s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(10) {
  transition-delay: 1.13s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(11) {
  transition-delay: 1.20s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(12) {
  transition-delay: 1.27s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(13) {
  transition-delay: 1.34s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(14) {
  transition-delay: 1.41s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(15) {
  transition-delay: 1.48s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(16) {
  transition-delay: 1.55s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(17) {
  transition-delay: 1.62s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(18) {
  transition-delay: 1.69s;
}

.in_top .catch_en .clip_inner .aim span:nth-of-type(19) {
  transition-delay: 1.76s;
}

@media screen and (max-width:767px) {
  #mainVisual {
    height: 75rem;
  }

  #mainVisual video {
    height: auto;
    width: 66rem;
    top: 47%;
    bottom: auto;
    right: -5rem;
    transform: translateY(-50%);
  }

  .mv_catch {
    left: 1rem;
    bottom: 6rem;
  }

  #mainVisual .pc {
    display: none;
  }

  #mainVisual .sp {
    display: block;
  }

  #mainVisual .catch_en {
    font-size: 5.4rem;
  }

  .catch_en .clip_inner {
    height: 4.1rem;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .catch_ja {
    padding-left: 1rem;
    margin-top: -2rem;
    font-size: 1.68rem;
  }
}

/*================================================
* mission
================================================*/
#mission {
  background: var(--color-white);
  transition: 1s;
  padding: 14rem 0;
}

#mission.on {
  background: var(--color-bg-bk);
}

#mission h2 {
  color: var(--color-white);
}

#mission .in_ani .clip_inner .aim span:nth-of-type(1) {
  transition-delay: 0.64s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(2) {
  transition-delay: 0.71s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(3) {
  transition-delay: 0.78s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(4) {
  transition-delay: 0.85s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(5) {
  transition-delay: 0.92s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(6) {
  transition-delay: 0.99s;
}

#mission .in_ani .clip_inner .aim span:nth-of-type(7) {
  transition-delay: 1.06s;
}

.mission_txt {
  margin: 8rem 0 0;
}

.mission_txt h3 {
  margin-bottom: 10rem;
  color: var(--color-white);
  opacity: 0.2;
}

.mission_txt h3,
.mission_txt .h3-txt {
  font-size: var(--fs24);
}

.mission_txt .mt-2rem {
  margin-top: 2rem;
}

.mission_txt p {
  color: var(--color-white);
  opacity: 0.2;
}

.mission_txt p span {
  display: block;
}




.clip_box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}


.clip_over {
  position: absolute;
  inset: 0;
  color: #fff;
  width: 100%;
  clip-path: inset(0 100% 0 0);
  height: 100%;
  opacity: 1 !important;
}

.clip_box.in_ani.on .clip_over {
  animation: reveal 1.5s ease-out forwards;
}

@keyframes reveal {
  to {
    clip-path: inset(0 0 0 0);
  }

}

@media screen and (max-width:767px) {}

/*================================================
* service
================================================*/
.service_ttl {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.service_ttl h2 {
  margin-bottom: 0;
}

.service_ttl p {
  width: 54rem;
}

.service_block {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 6rem;
}

.service_item {
  background: var(--color-gray);
  padding: 4rem;
}

.service_item img {
  width: 20rem;
  margin-bottom: 5rem;
}



.service_item .clip_box {
  font-size: var(--fs22);
  font-family: var(--poppins);
}

.service_item .en_txt {
  opacity: 0.2;
  font-size: var(--fs22);
  display: block;
}

.service_item .clip_over {
  color: var(--color-black);
  opacity: 1;
}

.service_item h3 {
  font-size: 1.6rem;
  margin-top: 4rem;
}

.service_item p {
  font-size: 1.2rem;
  margin-top: 2rem;
}

@media screen and (max-width:767px) {
  .service_ttl {
    flex-wrap: wrap;
  }

  .service_ttl p {
    width: 100%;
    margin-top: 4rem;
  }

  .service_block {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 4rem;
  }

  .service_item {
    padding: 2rem;
  }
}

/*================================================
* movieArea
================================================*/



#movieArea {
  height: 60vh;
  background: transparent;
  position: relative;
}

/* #movieArea::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(0.5rem);
  z-index: -1;
} */

@media screen and (max-width:767px) {}

/*================================================
* company
================================================*/
.company_list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  /* width: 68rem; */
  width: 72%;
  margin-left: auto;
}

.company_list dt {
  width: 24rem;
  border-bottom: 1px solid #E6E2E2;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
}

.company_list dd {
  width: calc(100% - 24rem);
  border-bottom: 1px solid #E6E2E2;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}

.company_list dt:last-of-type,
.company_list dd:last-of-type {
  margin-bottom: 0;
}

@media screen and (max-width:767px) {
  .company_list {
    width: 90%;
  }

  .company_list dt {
    width: 10rem;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
    border-bottom: none;
  }

  .company_list dd {
    width: calc(100% - 10rem);
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}

/*================================================
* message
================================================*/
#message {
  background: var(--color-white);
  color: var(--color-white);
  transition: 1s;
}


#message.on {
  background: var(--color-bg-bk);
}

#message::before {
  position: absolute;
  content: "";
  width: 73.3rem;
  height: 49.9rem;
  bottom: 0;
  right: 0;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../images/message_bg.png);
}

#message .wrap {
  position: relative;
  z-index: 1;
}

#message h2 {
  margin-bottom: 10rem;
}

#message .in_ani .clip_inner .aim span:nth-of-type(1) {
  transition-delay: 0.64s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(2) {
  transition-delay: 0.71s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(3) {
  transition-delay: 0.78s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(4) {
  transition-delay: 0.85s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(5) {
  transition-delay: 0.92s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(6) {
  transition-delay: 0.99s;
}

#message .in_ani .clip_inner .aim span:nth-of-type(7) {
  transition-delay: 1.06s;
}

.message_txt {
  width: 68rem;
  padding-left: 5rem;
}

.message_txt h3 {
  font-size: 1.2rem;
  display: flex;
  align-items: end;
  justify-content: start;
  gap: 2rem;
  color: var(--color-white);
  opacity: 0.2;
}

.message_txt h3 img {
  width: 15rem;
  opacity: 1;
}

.message_txt .clip_over {
  transition-delay: 1s;
}

.message_txt .clip_over h3 {
  color: var(--color-white);
  opacity: 1;
}

.message_txt .clip_over h3 img {
  opacity: 1;
}

.message_txt p {
  margin-top: 3rem;
}

.message_txt .clip_box+p {
  margin-top: 1rem;
  margin-bottom: 6rem;
}

@media screen and (max-width:767px) {
  #message::before {
    width: 34.5rem;
    height: 22.515rem;
  }

  .message_txt {
    width: 100%;
    padding-left: 0;
  }
}

/*================================================
* contact
================================================*/
.contact_wrap {
  width: 72%;
  margin-left: auto;
}

.contact_read p {
  margin-top: 1.6rem;
}


.form_list {
  display: flex;
  align-items: stretch;
  justify-content: start;
  flex-wrap: wrap;
  margin-top: 4rem;
}

.form_list dt {
  width: 25rem;
  padding-right: 5rem;
  margin-bottom: 4rem;
}

.form_list dt sup {
  color: var(--color-white);
  background: var(--color-red);
  padding: 0.5rem 1rem;
  line-height: 1;
  margin-left: 1rem;
  font-size: 1rem;
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.form_list dd {
  width: calc(100% - 25rem);
  margin-bottom: 4rem;
}

.form_list dd input,
.form_list dd textarea {
  background: var(--color-gray);
  padding: 1rem;
  color: var(--color-black);
  font-family: var(--color-black);
  font-size: 1.4rem;
  display: block;
  width: 100%;
}

.form_list dd textarea {
  height: 18rem;
}

.submit_btn {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
}


::placeholder {
  color: #ccc;
}

/* er */
.err {
  color: var(--color-red);
  font-size: .9em;
  margin: .25em 0 0
}

.is-error input,
.is-error textarea {
  border-color: var(--color-red);
}

.hp {
  position: absolute;
  left: -9999px
}

@media screen and (max-width:767px) {
  .contact_wrap {
    width: 100%;
  }

  .form_list dt {
    width: 100%;
    padding-right: 2rem;
    margin-bottom: 1rem;
  }

  .form_list dd {
    width: 100%;
    margin-bottom: 3rem;
  }


}

/*================================================
* 
================================================*/


@media screen and (max-width:767px) {}


/*================================================
* 
================================================*/

@media screen and (max-width:767px) {}

/*================================================
* 
================================================*/


@media screen and (max-width:767px) {}