@charset "utf-8";

/* Loading */
body.loading,
html.loading {
  overflow: hidden;
  width: 100vw;
  height: var(--svh-max, --vh-max);
}

#loading {
  background: var(--color-blue);
  border-block-start: 0.001px solid var(--color-white);
  position: fixed;
  width: 100vw;
  height: var(--svh-max, --vh-max);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  inset: 0;
  overflow: hidden;
}

html.loading #loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading-logo {
  width: 15rem;
  height: auto;
}

@media (min-width: 48rem) {
  #loading-logo {
    width: 20rem;
  }
}

@media (min-width: 64rem) {
  #loading-logo {
    width: 18.75rem;
  }
}

@media (min-width: 94rem) {
  #loading-logo {
    width: 21rem;
  }
}

@media (min-width: 107rem) {
  #loading-logo {
    width: 24rem;
  }
}

/* MV */
.hero {
  height: var(--svh-max, --vh-max);
  background: #e9e9e9;
  background: var(--color-gray);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-wrapper {
  opacity: 0;
  transform: translateY(-50px);
}

.hero figure {
  container-type: size;
  inline-size: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  z-index: 200;
  pointer-events: none;
}

.hero img {
  width: 18rem;
  height: auto;
  display: block;
  margin-block-start: 1rem;
  transform: scale(1) translateZ(0);
}

.hero figure img {
  filter: brightness(1) blur(0px);
  transition: none;
}

.fog-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 300;
}

@media (min-width: 48rem) {
  #loading {
    border-block-start: none;
  }
}

@container (min-width: 31.31rem) {
  .hero img {
    width: clamp(20rem, 11.228rem + 28.07vw, 25rem);
  }
}
@container (min-width: 48rem) and (min-height: 800px) {
  .hero img {
    width: clamp(30rem, 62.5vw, 40rem);
  }
}

@container (min-width: 79.375rem) {
  .hero img {
    width: 30rem;
  }
}

@container (min-width: 64.063rem) and (min-height: 43.75rem) {
  .hero img {
    height: 70vh;
    width: auto;
  }
}

@media (min-width: 64.063rem) {
  .hero-wrapper {
    padding-block-start: 1.5rem;
  }
}

.floating {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-13px);
  }
}

.hero-copy {
  font-size: clamp(1.063rem, 0.732rem + 1.41vw, 2rem);
  font-family: var(--font-ja);
  font-weight: var(--font-weight-bold-ja);
  letter-spacing: var(--spacing-text-ja);
  position: absolute;
  inset-block-end: clamp(2.28rem, 1.674rem + 2.58vw, 4rem);
  inset-inline-start: clamp(1.56rem, 0.701rem + 3.67vw, 4rem);
  line-height: 1.6;
  z-index: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  display: inline-block;
  color: var(--color-blue);
  background: linear-gradient(90deg, var(--color-blue) 20%, var(--color-white) 30%);
  background-size: 500% 500%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  /* マスク */
  -webkit-mask-image: linear-gradient(90deg, #fff 25%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 400% 400%;
  -webkit-mask-position: 130% 0%;
  mask-image: linear-gradient(90deg, #fff 25%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 400% 400%;
  mask-position: 130% 0%;
}

.hero-loop-text-wrap {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  pointer-events: none;
  z-index: 10;
}

@media (min-width: 93.75rem) {
  .hero-loop-text-wrap {
    gap: clamp(2.5rem, -2.857rem + 5.71vw, 4rem);
  }
  .hero-text-line {
    font-size: clamp(10rem, -0.714rem + 11.43vw, 13rem);
  }
}

.h-t-line1,
.h-t-line2 {
  width: 100%;
}

.hero-text-line {
  font-family: var(--font-en);
  font-size: clamp(4.75rem, 2.901rem + 7.89vw, 10rem);
  font-weight: var(--font-weight-extra-bold-en);
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.1rem;
  white-space: nowrap;
  margin: 0;
}

.h-t-line1 .splide__list,
.h-t-line2 .splide__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
}

.h-t-line1 .splide__slide,
.h-t-line2 .splide__slide {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 1px;
}

/* About us */

.about-us {
  padding-block: clamp(10rem, 7.183rem + 12.02vw, 18rem) clamp(6rem, 3.887rem + 9.01vw, 12rem);
  text-align: center;
  z-index: 500;
  position: relative;
}

.about-us-inner {
  max-width: 66.875rem;
  margin-inline: auto;
  display: inline-block;
  text-align: start;
}

.about-us-text {
  color: var(--color-black);
  font-family: var(--font-ja);
  font-size: var(--font-size-accent-text);
  font-weight: var(--font-weight-medium-ja, --font-weight-regular-ja);
  line-height: 2;
  letter-spacing: var(--spacing-accent-ja);
}

.about-us-text:first-of-type {
  margin-block-start: clamp(2.7rem, 2.376rem + 1.38vw, 3.62rem);
}

.about-us-text + .about-us-text {
  margin-block-start: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
}

.button-common {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.8rem;
  gap: 1.2rem;
  border-radius: 2.02225rem;
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: var(--font-weight-bold-ja);
  font-size: var(--font-size-accent-text);
  border: 2px solid var(--color-blue);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: var(--spacing-accent-ja);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.button-common span {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  transform-origin: center;
  line-height: 1.4;
}

.button-common svg.icon--arrow {
  aspect-ratio: 15 / 14;
  flex-shrink: 0;
  stroke: currentColor;
  width: 1rem;
  height: auto;
  vertical-align: middle;
}

.button-common svg.icon--external {
  flex-shrink: 0;
  stroke: currentColor;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.button-about-us {
  margin-block-start: clamp(2.6rem, 2.389rem + 0.9vw, 3.2rem);
}

@media (min-width: 64rem) {
  .button-common {
    background: linear-gradient(90deg, var(--color-white) 45%, var(--color-blue) 80%);
    background-size: 500% 500%;
    background-position: 99% 0%;
    transition: background-position 0.7s ease, color 0.3s ease-in-out;
    overflow: hidden;
  }

  .button-common span {
    transition: transform 0.3s ease, color 0.3s ease;
    transform-origin: center;
  }

  .button-common:hover {
    background-position: 0% 0%;
    color: var(--color-blue);
  }

  .button-common:hover span {
    transform: rotateX(-15deg);
    line-height: 1.4;
  }

  @keyframes gradient-slide {
    from {
      background-position: 0% 0%;
    }
    to {
      background-position: -100% 0%;
    }
  }
}

@media (min-width: 79.375rem) {
  .about-us-inner .section-heading {
    position: sticky;
    top: 100px;
  }

  .about-us-text,
  .button-about-us {
    margin-inline-start: 31.12rem;
  }
}

/* liquide nitrogen */
.liquide-nitrogen-img-wrapper {
  height: clamp(10rem, 0.141rem + 42.07vw, 38rem);
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 500;
  height: clamp(15rem, -2.727rem + 75.64vw, 80rem);
  inset-block-start: 0.1rem;

  transform: scale(0.95);
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}

.liquide-nitrogen-img img {
  position: absolute;
  inset-block-end: calc(-1 * clamp(0.6rem, -0.949rem + 6.61vw, 5rem));
  inset-inline-start: 0;
  width: 120%;
  height: auto;
}

/* Our strength */

#our-strength {
  position: relative;
  background-color: var(--color-blue);
  z-index: 500;
}

.our-strength {
  padding-block: clamp(3.2rem, 1.862rem + 5.71vw, 7rem) clamp(5.5rem, 3.563rem + 8.26vw, 11rem);
  text-align: center;
}

.strength-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6.5rem, 5.921rem + 2.47vw, 7.5rem);
  margin-block-start: clamp(3.5rem, 1.915rem + 6.76vw, 8rem);
}

.strength-item {
  display: grid;
  grid-template-areas: "strength-figure" "strength-content";
  gap: clamp(3.5rem, 3.211rem + 1.23vw, 4rem);
}

.strength-figure {
  grid-area: strength-figure;
}

.strength-content {
  grid-area: strength-content;
}

.our-strength-inner {
  margin-inline-start: 0;
  margin-inline: auto;
  display: inline-block;
  text-align: left;
}

.our-strength .section-heading .ja {
  padding-inline-start: clamp(0.1rem, 0.03rem + 0.3vw, 0.3rem);
}

.strength-number {
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: clamp(6.75rem, 5.606rem + 4.88vw, 10rem);
  font-weight: var(--font-weight-bold-en);
  letter-spacing: calc(-1 * clamp(0.338rem, 0.338rem + 0.18vw, 0.5rem));
  line-height: clamp(6.75rem, 5.606rem + 4.88vw, 10rem);
  justify-self: end;
  align-self: start;
  transform: translate(19%, -30%);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.strength-title-ja {
  color: var(--color-white);
  font-size: clamp(1.375rem, 1.155rem + 0.94vw, 2rem);
  font-weight: var(--font-weight-bold-ja);
  line-height: 1.6;
  text-align: center;
  letter-spacing: var(--spacing-accent-ja);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.strength-title-en {
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: clamp(2rem, 1.648rem + 1.5vw, 3rem);
  font-weight: var(--font-weight-bold-en);
  line-height: clamp(2.063rem, 1.732rem + 1.41vw, 3rem);
  justify-self: start;
  align-self: end;
  transform: translate(-5%, 50%);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.text-white {
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular-ja);
}

.strength-desc {
  margin-block-start: clamp(1rem, 0.683rem + 1.35vw, 1.9rem);
  line-height: 2;
  letter-spacing: var(--spacing-text-ja);
}

.strength-image-wrapper {
  display: grid;
  margin-inline: clamp(2rem, -1.472rem + 14.81vw, 8rem);
  position: relative;
}

.strength-image-wrapper > * {
  grid-area: 1 / 1;
}

.strength-number,
.strength-title-en {
  position: absolute;
  z-index: 2;
}

.strength-figure {
  border-radius: var(--border-radius-base);
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}

.strength-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.strength-item:nth-child(even) .strength-number {
  justify-self: start;
  transform: translate(-20%, -30%);
}

.strength-item:nth-child(even) .strength-title-en {
  justify-self: end;
  transform: translate(5%, 50%);
}

.strength-item:nth-child(1) .strength-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(184deg, rgba(255, 255, 255, 0) 81.75%, rgba(125, 140, 154, 0.3) 97.17%);
  border-radius: var(--border-radius-base);
  z-index: 1;
}

.strength-item:nth-child(3) .strength-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, rgba(125, 140, 154, 0.8) 0.26%, rgba(255, 255, 255, 0) 34.63%, rgba(255, 255, 255, 0) 75.83%);
  border-radius: var(--border-radius-base);
  z-index: 1;
}

.our-strength-loop-text-wrap {
  display: none;
}

@media (min-width: 64rem) {
  .our-strength {
    --img-w: clamp(22rem, 6.091rem + 25.45vw, 29rem);
    --text-w: clamp(27rem, 15.079rem + 14.29vw, 27.938rem);
  }

  .strength-list {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    align-items: center;
  }

  .strength-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
    align-items: center;
    gap: 5.7rem;
  }

  .strength-item:nth-child(odd) .strength-image-wrapper {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
  }
  .strength-item:nth-child(odd) .strength-content {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .strength-item:nth-child(even) .strength-image-wrapper {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
  .strength-item:nth-child(even) .strength-content {
    grid-column: 1;
    grid-row: 1/2;
    justify-self: end;
    text-align: left;
  }

  .our-strength .section-heading {
    transform: translateX(-0.4rem);
  }

  .strength-item:nth-child(odd) .strength-content {
    padding-inline-end: 0.5rem;
  }

  .strength-item:nth-child(even) .strength-content {
    padding-inline-start: 0.5rem;
  }

  .strength-title-ja {
    text-align: left;
  }

  .strength-image-wrapper {
    width: auto;
    height: auto;
    margin-inline: 0rem;
  }

  .strength-list {
    width: auto;
  }

  .container {
    padding-inline: var(--offset-l);
  }

  .container-inner {
    width: 100%;
    max-width: var(--container-size-l);
  }
}

@media (min-width: 83.438rem) {
  .strength-content {
    width: var(--text-w);
  }

  .strength-image-wrapper {
    width: var(--img-w);
  }

  .our-strength-inner-wrapper {
    width: min(100%, var(--container-size-l));
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .strength-list {
    width: max-content;
  }

  #our-strength {
    position: relative;
  }

  .our-strength-loop-text-wrap {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-end: calc((100vw - clamp(66rem, 7.122rem + 92.09vw, 90rem)) / 2);
    width: 15em;
    overflow: hidden;
    pointer-events: none;
    display: block;
  }

  .our-strength-text-line {
    font-size: clamp(4.75rem, 2.901rem + 7.89vw, 10rem);
    font-family: var(--font-en);
    font-weight: var(--font-weight-extra-bold-en);
    line-height: 1;
    color: rgba(255, 255, 255, 0.2);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    text-orientation: mixed;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    letter-spacing: var(--spacing-loop-en);
  }
}

.strength-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0.1, 0.3, 1), transform 0.8s cubic-bezier(0.4, 0.1, 0.3, 1);
}

.strength-item.in-view {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.strength-item:nth-child(odd) {
  transform: translateX(-50px);
}
.strength-item:nth-child(odd).in-view {
  transform: translateX(0);
}

.strength-item:nth-child(even) {
  transform: translateX(50px);
}
.strength-item:nth-child(even).in-view {
  transform: translateX(0);
}

/* Products */

.products {
  background-color: var(--color-gray);
  padding-block: clamp(7rem, 4.975rem + 8.64vw, 10.5rem) clamp(5.1rem, 2.591rem + 12.55vw, 10rem);
  height: auto;
  position: relative;
  z-index: 500;
  overflow: hidden;
}

.products .fog-container {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 200%;
  pointer-events: none;
  z-index: 1;
}

.products-inner-wrapper {
  display: grid;
  grid-template-areas: "products-figure" "products-content";
  align-items: center;
  border-radius: var(--border-radius-base);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 0rem clamp(2rem, 1.421rem + 2.47vw, 3rem) clamp(3rem, 2.421rem + 2.47vw, 4rem);
  width: 100%;
  z-index: 2;
  transform: translateZ(0);
  position: relative;
}

.products-figure {
  grid-area: products-figure;
  min-height: 350px;
}

.products-content {
  grid-area: products-content;
  margin-block-start: clamp(-1rem, -6.787rem + 24.69vw, 9rem);
  z-index: 100;
  align-self: end;
}

.products-content .section-heading .en {
  margin-inline-start: calc(-1 * clamp(0.1rem, 0.03rem + 0.3vw, 0.3rem));
}

.products-img img {
  width: clamp(21.394rem, 15.835rem + 23.72vw, 31rem);
  height: auto;
  transform: rotate(-2deg);
  position: absolute;
  will-change: transform;
  inset-block-start: clamp(-3.5rem, -4.368rem + 3.7vw, -2rem);
  inset-inline-start: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.text-black {
  color: var(--color-black);
  font-family: var(--font-ja);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular-ja);
  line-height: 2;
}

.products-desc {
  margin-block-start: 2rem;
  letter-spacing: var(--spacing-text-ja);
}

.button-products {
  display: flex;
  width: fit-content;
  margin: clamp(2.2rem, 1.918rem + 1.2vw, 3rem) auto 0;
}

.button-products span {
  margin-block-start: 0.02rem;
}

.products-loop-text-wrap {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, 75%);
  display: grid;
  gap: 2rem;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}

.p-t-line {
  width: 100%;
}

.products-text-line {
  font-family: var(--font-en);
  font-size: clamp(4.75rem, 2.901rem + 7.89vw, 10rem);
  font-weight: var(--font-weight-extra-bold-en);
  line-height: 1.5;
  color: rgba(0, 93, 175, 0.2);
  letter-spacing: var(--spacing-loop-en);
  white-space: nowrap;
  margin: 0;
}

.p-t-line .splide__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
}

.p-t-line .splide__slide {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .products {
    padding-block: clamp(9rem, 4.094rem + 7.67vw, 11rem);
  }

  .products .fog-container {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, 10%);
    width: var(--vi-max, --vw-max);
    height: 120vh;
    height: 120svh;
    pointer-events: none;
    z-index: 1;
  }

  .products-inner-wrapper {
    grid-template-areas: "products-content products-figure";
    grid-template-columns: 1fr 1fr;
    max-width: var(--container-size-l);
    padding: clamp(5.56rem, 3.098rem + 3.85vw, 6.56rem) clamp(4rem, 1.538rem + 3.85vw, 5rem) clamp(5rem, 2.538rem + 3.85vw, 6rem);
    gap: 2rem;
    box-sizing: border-box;
  }

  .products-content {
    grid-area: products-content;
    margin-block-start: -2.2rem;
    position: relative;
    z-index: 100;
  }

  .products-figure {
    position: relative;
    grid-area: products-figure;
  }

  .products-img img {
    width: clamp(29rem, 9.308rem + 30.77vw, 37rem);
    height: auto;
    position: absolute;
    inset-block-start: 55%;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-42.4%) rotate(-2deg);
  }

  .products-desc {
    margin-block-start: 3rem;
  }

  .button-products {
    margin: clamp(2.5rem, 2.389rem + 0.9vw, 3.2rem) 0 0 0;
  }

  .products-loop-text-wrap {
    transform: translate(-50%, -50%);
  }
}

/* Service */

#service {
  background-color: var(--color-blue);
  padding-block: clamp(3.9rem, 2.395rem + 6.42vw, 6.5rem) clamp(6rem, 4.239rem + 7.51vw, 11rem);
  position: relative;
  z-index: 500;
}

.service-cards {
  margin-block-start: clamp(3rem, 2.074rem + 3.95vw, 4.6rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.service-card {
  display: grid;
  grid-template-areas: "service-figure" "service-content";
  gap: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-content {
  position: relative;
  grid-area: service-content;
  width: 100%;
  padding: clamp(2rem, 1.421rem + 2.47vw, 3rem);
  gap: 1.3rem;
  border-radius: 0 0 0.4375rem 0.4375rem;
  background: #fff;
  height: 100%;
  margin-block-start: -0.1rem;
  display: grid;
  grid-template-rows: min-content;
}

.service-figure {
  grid-area: service-figure;
  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
  overflow: hidden;
  aspect-ratio: 22 / 15;
  position: relative;
  z-index: 1;
}

.service-figure img {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.service-card:nth-of-type(2) .service-figure img {
  transform: translate(-50%, -51.5%);
}

.service-number,
.service-title-en {
  color: var(--color-blue);
  text-align: center;
  font-family: var(--font-en);
  font-size: 0.70919rem;
  font-weight: var(--font-weight-bold-en);
}

.service-number {
  padding-inline-end: 0.5rem;
  border-inline-end: var(--color-blue) solid 1px;
}

.service-title-en {
  padding-inline-start: 0.15rem;
  letter-spacing: 0.03em;
}

.service-title-ja {
  display: block;
  color: var(--color-blue);
  font-family: var(--font-ja);
  font-size: 1.37994rem;
  font-weight: var(--font-weight-bold-ja);
  letter-spacing: 0.17938rem;
  padding-block: 0.9rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.service-desc {
  color: var(--color-black);
  font-family: var(--font-ja);
  font-size: 0.875rem;
  font-weight: var(--font-weight-regular-ja);
  line-height: 2;
  z-index: 2;
  letter-spacing: var(--spacing-text-ja);
}

.service-button-wrapper {
  display: grid;
  gap: 0.5rem;
}

.button-service-catalog {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.8rem 1.4rem;
  z-index: 2;
  border: 2px solid var(--color-blue);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--color-blue);
  gap: 0.7rem;
  margin-block-end: 0.4rem;
}

.button-service-catalog span {
  font-size: 0.875rem;
}

.icon--external {
  display: block;
  width: 60px;
  height: auto;
}

.service-content {
  position: relative;
}

.service-card:nth-of-type(1) .service-content::before,
.service-card:nth-of-type(2) .service-content::before,
.service-card:nth-of-type(3) .service-content::before,
.service-card:nth-of-type(4) .service-content::before {
  content: attr(data-bg-number);
  position: absolute;
  inset-block-end: 0;

  font-family: var(--font-en);
  font-size: 10rem;
  font-weight: var(--font-weight-bold-en);
  color: rgba(0, 93, 175, 0.06);
  z-index: 1;
  pointer-events: none;
  letter-spacing: -0.7rem;
  line-height: 0.75;
}

.service-card[data-index="0"] .service-content::before {
  inset-inline-end: -0.5rem;
}
.service-card[data-index="1"] .service-content::before {
  inset-inline-end: 0.2rem;
}
.service-card[data-index="2"] .service-content::before {
  inset-inline-end: 0rem;
}
.service-card[data-index="3"] .service-content::before {
  inset-inline-end: 0.2rem;
}

@media (min-width: 64rem) {
  #service {
    padding-block: clamp(6.5rem, 5.273rem + 1.92vw, 7rem) clamp(6rem, 4.239rem + 7.51vw, 11rem);
  }

  .service-cards {
    margin-block-start: clamp(5rem, 2.547rem + 3.84vw, 6rem);
    gap: 3rem;
  }

  .service-card {
    grid-template-areas: "service-content service-figure";
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    min-height: 23.125rem;
  }

  .service-content {
    border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
    margin-block-start: 0rem;
    grid-area: service-content;
    width: 100%;
    gap: 2rem;
  }

  .service-figure {
    border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
    aspect-ratio: 0;
    grid-area: service-figure;
  }

  .button-service-catalog {
    background: linear-gradient(90deg, var(--color-blue) 45%, rgba(255, 255, 255, 0.5) 80%);
    background-size: 500% 500%;
    background-position: 100% 0%;
    transition: background-position 0.7s ease, color 0.3s ease-in-out;
    align-self: end;
    margin-block-end: 0rem;
  }

  .button-service-catalog:hover {
    background-position: 0% 0%;
    color: var(--color-white);
  }

  .service-card:nth-of-type(1) .service-content::before,
  .service-card:nth-of-type(2) .service-content::before,
  .service-card:nth-of-type(3) .service-content::before,
  .service-card:nth-of-type(4) .service-content::before {
    font-size: 13rem;
    letter-spacing: -0.8rem;
  }

  .service-card[data-index="0"] .service-content::before {
    right: -0.8rem;
  }
  .service-card[data-index="1"] .service-content::before {
    right: 0.1rem;
  }
  .service-card[data-index="2"] .service-content::before {
    right: -0.1rem;
  }
  .service-card[data-index="3"] .service-content::before {
    right: 0.1rem;
  }
}

@media (min-width: 64rem) and (max-width: 71.875rem) {
  .service-card--transportation .service-img img {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* news */

.news {
  position: relative;
  z-index: 500;
  background-color: var(--color-gray);
  padding-block: clamp(3.9rem, 2.808rem + 4.66vw, 7rem) clamp(6rem, 4.239rem + 7.51vw, 11rem);
  padding-inline: var(--offset-s) 0;
}

.news-cards {
  margin-block-start: clamp(3rem, 2.074rem + 3.95vw, 4.6rem);
  display: grid;
  grid-template-columns: repeat(3, clamp(20.438rem, 19.25rem + 5.07vw, 23.813rem));
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: 0 var(--offset-s);
  grid-auto-rows: 1fr;
}

@media (min-width: 35.625rem) {
  .news {
    padding-inline: var(--offset-m) 0;
  }
  .news-cards {
    padding-inline: 0 var(--offset-m);
  }
}

.news-card {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: var(--border-radius-base);
  scroll-snap-align: start;
  height: 100%;
  cursor: pointer;
}

.news-content {
  display: grid;
  grid-template-rows: 1fr 0.5fr;
  grid-template-areas: "figure" "body";
}

.news-body {
  display: grid;
  grid-area: body;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 2rem;
}

.button-news-wrapper {
  text-align: center;
  margin-inline-start: calc(var(--offset-s) * -1);
}

@media (min-width: 35.625rem) {
  .button-news-wrapper {
    margin-inline-start: calc(var(--offset-m) * -1);
  }
}

.button-news {
  margin-block-start: clamp(3.5rem, 2.62rem + 3.76vw, 6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.news-figure {
  grid-area: figure;
  width: 100%;
  height: auto;
  aspect-ratio: 19 / 12;
  overflow: hidden;
}

.news-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-title {
  font-size: clamp(1rem, 0.956rem + 0.19vw, 1.125rem);
  font-weight: var(--font-weight-bold-ja);
  margin-block-start: 1rem;
  line-height: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(2 * 2rem);
  letter-spacing: var(--spacing-accent-ja);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-categories {
  display: inline-block;
  color: var(--color-white);
  background-color: var(--color-blue);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold-ja);
  letter-spacing: var(--spacing-text-ja);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.meta time {
  font-family: var(--font-en);
  font-weight: var(--font-weight-bold-en);
  color: #a2a2a2;
}

@media (min-width: 64rem) and (max-width: 83rem) {
  .news-content {
    grid-template-rows: 1fr 0.7fr;
  }
}

@media (min-width: 64rem) {
  .news {
    padding-inline: var(--offset-l);
  }
  .news-cards {
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: 0;
    margin-block-start: clamp(5rem, 2.547rem + 3.84vw, 6rem);
  }

  .news-card {
    transition: all 0.3s cubic-bezier(0.4, 0.1, 0.3, 1);
  }

  .news-card:hover {
    transform: scale(1.03);
  }
  .button-news-wrapper {
    margin-inline-start: 0;
  }
}

/* cta */

.cta-button {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(0deg, rgba(248, 248, 248, 0.6) 0%, rgba(248, 248, 248, 0.6) 100%), rgba(0, 93, 175, 0);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cta {
  background-color: transparent;
  padding-block: 2rem;
}

@media (min-width: 64rem) {
  .cta {
    padding-block: 6.77rem;
  }

  .cta-button:hover {
    border: none;
  }
}