@charset "UTF-8";
/* ========================================
   Top page responsive adjustments
======================================== */
.hero {
  position: relative;
  z-index: 1;
  min-height: clamp(680px, 45.31vw, 870px);
  padding-top: 100px;
  overflow: hidden;
  color: #fff;
  background-color: #050021;
}
.hero__mobile {
  display: none;
}
.hero__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 0, 33, 0.36), rgba(5, 0, 33, 0.04)), url("../assets/mv-bg.webp") center/cover no-repeat;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(clamp(680px, 45.31vw, 870px) - 100px);
  margin: 0 auto;
}
.hero__copy {
  position: absolute;
  z-index: 2;
  top: clamp(100px, 7.19vw, 138px);
  left: clamp(48px, 7.34vw, 141px);
}
.hero__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(50px, 5.21vw, 110px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.34);
}
.hero__particle {
  font-size: 0.9em;
}
.hero__en {
  margin: 25px 0 0;
  font-size: clamp(12px, 1.25vw, 28px);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.hero__visual {
  position: absolute;
  inset: 0;
}
.hero__people {
  position: absolute;
  top: 50%;
  right: clamp(32px, 3.33vw, 64px);
  width: min(47.135vw, 905px);
  max-width: none;
  height: auto;
  transform: translateY(-50%);
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .hero {
    min-height: 680px;
  }
  .hero__inner {
    min-height: 580px;
  }
  .hero__copy {
    top: clamp(100px, 11vw, 132px);
    left: clamp(32px, 5vw, 60px);
  }
  .hero__people {
    right: 20px;
  }
  .hero__title {
    font-size: clamp(40px, 4.8vw, 60px);
  }
  .hero__en {
    font-size: 14px;
  }
}
.service,
.company {
  height: auto;
}

.service {
  padding: clamp(140px, 13.33vw, 256px) 0 clamp(150px, 12vw, 230px);
}
.service__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(40px, 3.54vw, 68px);
  width: min(100% - clamp(40px, 4.17vw, 80px), 1560px);
  margin: 0 auto;
}
.service__copy {
  min-width: 0;
  padding-top: clamp(16px, 2.4vw, 46px);
}
.service__visual {
  justify-self: end;
  width: min(100%, 917px);
  height: auto;
  aspect-ratio: 917/398;
}
.service__visual-pc {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}
.service__image {
  display: none;
}

.company {
  padding: 0 0 clamp(160px, 14vw, 269px);
}
.company__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  align-items: center;
  gap: clamp(48px, 8.9vw, 171px);
  width: min(100% - clamp(40px, 4.17vw, 80px), 1560px);
  margin: 0 auto;
}
.company__visual {
  justify-self: start;
  width: min(100%, 693px);
  height: auto;
  aspect-ratio: 693/397;
}
.company__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.company__copy {
  min-width: 0;
  padding-top: 0;
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
  .service__inner,
  .company__inner {
    width: calc(100% - 64px);
  }
  .company__inner {
    gap: clamp(40px, 6vw, 84px);
  }
  .content-heading {
    font-size: clamp(30px, 3.1vw, 43px);
  }
  .content-text {
    font-size: clamp(16px, 1.43vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .hero {
    min-height: 0;
    padding-top: 0;
  }
  .hero__mobile {
    display: block;
    width: 100%;
  }
  .hero__mobile-image {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero__background, .hero__inner {
    display: none;
  }
  .service {
    padding: 141px 0 130px;
  }
  .service__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .service__visual {
    order: 1;
    width: calc(100% - 58px);
    margin: 0 29px;
    aspect-ratio: 332/135;
  }
  .service__visual-pc {
    display: none;
  }
  .service__image {
    display: block;
  }
  .service__copy {
    order: 2;
    padding: 35px 29px 0;
  }
  .company {
    padding: 0 0 150px;
  }
  .company__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .company__visual {
    order: 1;
    width: min(100% - 84px, 306px);
    margin: 0 auto;
    aspect-ratio: 306/175;
  }
  .company__copy {
    order: 2;
    padding: 40px 41px 0;
  }
}
/* ========================================
   Figma SP_TOP — content after the hero
======================================== */
@media screen and (max-width: 768px) {
  .about {
    height: 1201px;
  }
  .about__philosophy {
    padding-top: 60px;
  }
  .about__slogan {
    margin-top: 40px;
    font-size: 40px;
    line-height: 1.3;
  }
  .about__philosophy-text {
    width: 250px;
    margin: 25px auto 0;
    font-size: 18px;
    line-height: 1.5;
  }
  .about__body {
    padding-top: 107px;
  }
  .about__heading {
    margin-top: 37px;
  }
  .about__text {
    width: 255px;
    margin-top: 26px;
  }
  .about__body .detail-button {
    margin-top: 40px;
  }
  .about__visual {
    height: 168px;
  }
  .content {
    background: linear-gradient(52deg, rgba(10, 26, 47, 0.98) 21%, rgba(10, 26, 47, 0.96) 50%, rgba(5, 0, 33, 0.98) 99%), url("../assets/decoration.png") center 10%/auto 24% no-repeat;
  }
  .service {
    height: 812px;
    min-height: 812px;
    padding: 140px 20px 0;
  }
  .service__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
  }
  .service__copy {
    display: contents;
  }
  .service .section-title {
    order: 1;
    grid-column: 1;
    grid-row: auto;
  }
  .service .content-heading {
    order: 2;
    grid-column: 1;
    grid-row: auto;
    margin-top: 17px;
  }
  .service__visual {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 24px 0 0;
    aspect-ratio: 350/142;
  }
  .service .content-text {
    order: 4;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 41px;
  }
  .service .detail-button {
    order: 5;
    grid-column: 1;
    grid-row: auto;
    margin-top: 32px;
  }
  .company {
    height: auto;
    min-height: 673px;
    padding: 140px 20px 120px;
  }
  .company__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    transform: translateY(-20px);
  }
  .company__copy {
    display: contents;
  }
  .company .section-title {
    order: 1;
  }
  .company .content-heading {
    order: 2;
    margin-top: 20px;
  }
  .company__visual {
    order: 3;
    width: 100%;
    margin: 31px 0 0;
    aspect-ratio: 350/200;
  }
  .company .content-text {
    order: 4;
    width: 100%;
    margin-top: 40px;
  }
  .company .detail-button {
    order: 5;
    margin-top: 30px;
  }
  .recruit {
    height: auto;
    min-height: 1196px;
    padding: 0 20px 160px;
  }
  .recruit__copy {
    padding: 0;
  }
  .recruit .content-heading {
    margin-top: 20px;
  }
  .recruit .content-text {
    width: 265px;
    margin: 18px auto 0;
  }
  .recruit__copy .detail-button {
    margin-top: 40px;
  }
  .recruit__gallery {
    width: 100%;
    margin-top: 40px;
    gap: 60px;
  }
  .recruit__image {
    width: 100%;
    height: auto;
    aspect-ratio: 600/326;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .contact {
    height: 397px;
    min-height: 397px;
  }
  .contact__inner {
    width: 100%;
    padding: 40px 20px 0;
  }
  .contact__intro {
    text-align: center;
  }
  .contact .section-title {
    text-align: center;
  }
  .contact__text {
    width: 350px;
    margin: 18px auto 0;
    text-align: center;
  }
  .contact__action {
    padding-top: 28px;
  }
  .contact__mail {
    margin-top: 19px;
  }
  .contact__action .detail-button {
    margin-top: 8px;
  }
}