/* ==========================
Loading
========================== */

#loading {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color-primary);
    z-index: 9999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

#loading.is-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading__inner {
    width: 50%;
    min-width: 280px;
    max-width: 50vw;
    margin-inline: auto;
}

/*================================================
  mainvisual
================================================*/

.mainvisual {
  /* background-image: url(../../image/home/mainvisual.jpg);
  background-size: cover;
  background-position: center; */
  height: 100vh;
  width: 100%;
  color: var(--color-white);
  position: relative;
  background-color: var(--color-black);
  overflow: hidden;
}
.mainvisual::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-color: rgba(var(--color-primary-rgb), .15);
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 0;
}
.mainvisual-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 100%;
  padding-inline: 5%;
  z-index: 3;
}

.mainvisual-message-main {
  font-size: clamp(3.2rem, 1.8rem + 4vw, 7.8rem);
  line-height: 1.2;
  font-weight: 900;
}

.mainvisual-message-main span {
  display: inline-block;
}
.mainvisual-message-main span.emphasis {
  color: var(--color-primary-second);
}
.mainvisual-message-en {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-white);
  line-height: 1.4;
  font-size: 5rem;
}

@media print,
screen and (min-width: 769px) {
  .mainvisual-message-en {
    font-size: 10rem;
    -webkit-text-stroke: 2px var(--color-white);
  }
}

@media print,
screen and (min-width: 1200px) {
  .mainvisual-message-en {
    font-size: 15.6rem;
  }
}

/*動画*/
.mainvisual-video video {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position:center center;
}

@media print,
screen and (min-width: 1200px) {
  .mainvisual-video {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 720px;
      overflow: hidden;
  }
  .mainvisual-video video {
      height: 100%;
      /* 下側の切れ対策：ほんの少しだけ上へシフト＆縮小 */
      transform: translateY(1%) scale(1.02);
      transform-origin: center center;
      display: block;
  }
}


/*================================================
  message
================================================*/
.message {
  /* background-image: url(../../image/home/message_bg.jpg);
  background-size: contain;
  background-position: top right; */
  background-color: var(--color-gray92);
  padding-top: calc(var(--layout-gap) * 1);
  color: var(--color-primary);
  /* border: 1px solid red; */
  overflow: hidden;
}
.message::after {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  background-image: url(../../image/home/message_bg_sp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1920/1271;
  border-bottom: 20px solid  var(--color-gray92);
  /* max-width: 560px;
  margin-left: auto; */
}

.message .section-title {
  position: relative;
}

.message .section-title-en {
  font-size: clamp(5rem, 5vw + 5rem, 20rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.6;
}

.message .section-title-ja {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.message-text {
  font-size: 1.6rem;
  font-weight: 500;
  transform: translateY(-20px);
}

.message-text p {
  margin-bottom: calc(var(--layout-gap) / 2);
}

.ceo {
  text-align: right;
  font-size: 1.6rem;
}

.ceo span {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

@media print,
screen and (min-width: 1200px) {
  .message {
    background-image: url(../../image/home/message_bg.jpg);
    background-size: cover;
    background-position: center right 50%;
    padding-top: calc(var(--layout-gap) * 1);
  }
  .message::after {
    display: none;
  }
  .message-text {
    width: 70%;
    max-width: 985px;
  }

  .message-text p {
    margin-bottom:1em;
  }

  .ceo span {
    font-size: 2.4rem;
  }
}

@media print,
screen and (min-width: 1600px) {
    .message {
      background-position: center right;
    }
    .message-text {
      font-size: 1.8rem;
    }
}


/*================================================
  about-us
================================================*/

.section-wrapper {
  padding-block: calc(var(--layout-gap) * 2);
  background-size: cover;
  background-position: center;
}

.section-title {
  margin-bottom: calc(var(--layout-gap) / 2);
}

.section-wrapper p {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: calc(var(--layout-gap));
}

.link-btn {
  margin-left: auto;
}

.about-us {
  color: var(--color-white);
  background-image: url(../../image/home/about_us_bg.jpg);
  position: relative;
  z-index: 1;
}

.about-us::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: rgba(var(--color-primary-rgb), .49);
  z-index: -1;
}

.about-us .section-title-ja {
  color: var(--color-primary-second);
}

@media print,
screen and (min-width: 769px) {
  .section-wrapper {
    padding-block: calc(var(--layout-gap) * 3);
  }

  .section-wrapper p {
    font-size: 2.8rem;
    margin-bottom: 0;
  }

  .section-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media print,
screen and (min-width: 1200px) {
  .section-wrapper {
    padding-block: calc(var(--layout-gap) * 5);
  }

  .section-wrapper p {
    font-size: 3.2rem;
  }

  .section-title {
    margin-bottom: calc(var(--layout-gap) * 1.2);
  }
}


@media print,
screen and (min-width: 1600px) {
    .section-wrapper {
      min-height: 100vh;
  }
}


/*================================================
  products
================================================*/

.products {
  color: var(--color-primary);
  /* background-image: url(../../image/home/products_bg.jpg);
  background-position: center right 20%; */
  background-image: url(../../image/home/products_bg_sp.jpg);
  background-size: contain;
  background-position: bottom center;
  background-color: #edf1f4;
  padding-bottom: 120px;
  padding-right: 20%;
}

.products .link-btn {
  margin-left: 0;
  margin-right: auto;
}

@media print,
screen and (min-width: 769px) {
  .products {
    background-image: url(../../image/home/products_bg.jpg);
    background-position: top right 20%;
    background-size: 150%;
    padding-right: 0;
  }
  .products .section-content {
    flex-direction: row-reverse;
  }

  .products .section-text {
    text-align: right;
  }
}

@media print,
screen and (min-width: 1200px) {
  .products {
    background-image: url(../../image/home/products_bg.jpg);
    background-position: top right;
    background-size: 130%;
    padding-bottom: 160px;
  }
}

@media print,
screen and (min-width: 1600px) {
    .products {
      background-size: cover;
    }
}

/*================================================
  production-technology
================================================*/

.production-technology {
  background-image: linear-gradient(rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.6)), url(../../image/home/production_technology_bg.jpg);
  background-position: bottom center;
  background-size: 150%;
  color: var(--color-primary);
}

.production-technology .section-title-ja {
  color: var(--color-primary-second);
}

@media print,
screen and (min-width: 769px) {
  .production-technology {
    background-position: top center;
    background-size: 200%;
  }
}

/*================================================
  company
================================================*/

.company {
  background-image: url(../../image/home/company_bg.jpg);
  color: var(--color-white);
  text-align: center;
  position: relative;
}

.company::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
      rgba(0, 30, 49, 0.7) 60%,
      rgba(0, 49, 81, 0) 100%);
  z-index: 0;
}

.company .section-title-ja {
  color: var(--color-primary-second);
}

.company .section-content {
  align-items: center;
  flex-direction: column;
}

.company .section-text {
  position: relative;
  z-index: 1;
}

.company .link-btn {
  margin-inline: auto;
}

@media print,
screen and (min-width: 769px) {
  .company .link-btn {
    margin-top: calc(var(--layout-gap));
  }
}

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

.recruit {
  background-image: url(../../image/home/recruit_bg.jpg);
  background-position: center;
  color: var(--color-white);
}

.recruit .section-title-ja {
  color: var(--color-primary);
}