@charset "UTF-8";

.mv__container {
  aspect-ratio: 16 / 5;
  background-color: white;
  position: relative;
  z-index: 1;
}

.mv__grid {
  display: grid;
  grid-template-columns: 10.9375% 13.90625% 18.3854166667% 45.8333333333% 10.9375%;
  grid-template-rows: auto;
  align-items: center;
}

.mv__contents {
  grid-column: 2 / 5;
  grid-row: 1 /2;
  position: relative;
  z-index: 2;
}

.mv__img {
  grid-column: 3 / 6;
  /* aspect-ratio: 16/9; */
  /* background-color: var(--bg-color-support10); */
  /* max-width: 50vw; */
  grid-row: 1 /2;
  position: relative;
  z-index: 1;
}

.mv__headlines {
  max-width: 480px;
}
.mv__headlines--title {
  font-size: var(--fz-headline-xl);
  font-family: var(--font-mincho);
  font-weight: var(--weight-b);
  background-color: var(--bg-color-grey);
  color: var(--bg-color-white);
  max-width: fit-content;
  line-height: var(--lh-sm);
  margin-bottom: 20px;
}
.mv__headlines--text {
  /* text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff; */
  background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
  .mv__grid {
    row-gap: 30px;
    grid-template-columns: 5vw 1fr 5vw;
    grid-template-rows: 1fr auto;
    padding: 30px 0;
  }
  .mv__contents {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
  .mv__img {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
  }
}

/* タイトル */
.title {
  font-size: var(--theme-headline-xl);
  font-weight: var(--weight-b);
  letter-spacing: 0.01em;
  line-height: var(--lh-sm);
  font-family: var(--font-mincho);
  margin-bottom: 1.5em;
}

.title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.5em;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(var(--color-main1)),
    color-stop(1.8em, var(--color-main1)),
    color-stop(1.8em, var(--color-support5)),
    to(var(--color-support5))
  );
  background-image: linear-gradient(
    to right,
    var(--color-main1) 0%,
    var(--color-main1) 1.8em,
    var(--color-support5) 1.8em,
    var(--color-support5) 100%
  );
}
@media (max-width: 768px) {
  .title {
    font-size: var(--theme-headline-xl);
  }
}

.box {
  background-color: var(--bg-color-support5);
}

.cases {
  display: grid;
  gap: 50px;
}

.case {
  display: flex;
  gap: 50px;
}

.case:nth-child(even) {
  flex-direction: row-reverse;
}

.case__img {
  max-width: 37.5%;
}

.case__contents {
  max-width: 62.5%;
}

.l-cv-block {
  background-image: url(/asset/img/projects/mobility-robotics/img-mobility-robotics-bg.jpg);
}

@media (max-width: 768px) {
  .posts {
    max-height: calc((13rem * 3));
  }
}