@charset "utf-8";

/*==========================================================================
  mv
  ==========================================================================*/
.mv {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    height: 90vh;
  }
}
.mv__image {
  width: 300%;
  height: 100%;
  background: url("/ja/portal/cycle/assets/images/mv_sp.svg") repeat-x center / contain;
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-51%);
  animation: slow-pan 60s infinite alternate;
  @media (width >= 1024px) {
      background: url("/ja/portal/cycle/assets/images/mv.svg") repeat-x center / contain;
  }
}
@keyframes slow-pan {
  0% {
    transform: translateX(-51%);
  }
  100% {
    transform: translateX(-49%);
  }
}
.mv__title {
  padding: calc(var(--inline-base) * 4) calc(var(--inline-base) * 4.25);
  margin-top: calc(var(--inline-base) * -2.25);
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-bg-white), transparent 10%);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: calc(var(--inline-base) * 2);
    overflow: hidden;
    z-index: -1;
  }
  &::after {
    content: "";
    width: 34.35vw;
    height: 25.64vw;
    background-color: color-mix(in srgb, var(--color-bg-white), transparent 10%);
    position: absolute;
    top: -23.58vw;
    left: 50%;
    border-radius: calc(var(--inline-base) * 2) calc(var(--inline-base) * 2) 0 0;
    overflow: hidden;
    z-index: -1;
    transform: translateX(-50%);
  }
  @media (width >= 1024px) {
    padding: calc(var(--inline-base) * 5) calc(var(--inline-base) * 7.5) calc(var(--inline-base) * 5);
    margin-top: calc(var(--inline-base) * -2.25);
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: calc(var(--inline-base) * 3);
    }
    &::after {
      content: "";
      width: 200px;
      height: 150px;
      top: -150px;
      border-radius: calc(var(--inline-base) * 3) calc(var(--inline-base) * 3) 0 0;
    }
  }
}

.mv__logo {
  width: 17.94vw;
  @media (width >= 1024px) {
    width: auto;
  }
}
.mv__title__text {
  width: 78.46vw;
  font-size: 8.71vw;
  line-height: 1.26;
  text-align: center;
  &.text-line {
    &::before {
      width: calc(100% + calc(var(--inline-base) * 5));
      height: calc(var(--inline-base) * 2);
      bottom: 0;
      border-radius: calc(var(--inline-base) * 1);
    }
  }
  span {
    display: none;
  }
  @media (width >= 1024px) {
    width: auto;
    font-size: clamp(calc(var(--inline-base) * 7.25), calc(2.7344 * 1vw + calc(var(--inline-base) * 3.75)), calc(var(--inline-base) * 8.125));
    line-height: 1.2;
    &.text-line {
      &::before {
        height: calc(var(--inline-base) * 3);
        bottom: 0;
        border-radius: calc(var(--inline-base) * 1.5);
      }
    }
    span {
      display: inline;
    }
  }
}
.question {
  width: calc(var(--inline-base) * 6);
  height: 0;
  margin-inline: auto;
  position: sticky;
  top: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
  @media (width >= 1024px) {
    width: 110px;
  }
}
.question__inner {
  transform: translateY(calc(-100% - calc(var(--inline-base) * 1)));
}
.question__image {
  width: calc(var(--inline-base) * 6);
  @media (width >= 1024px) {
    width: 110px;
  }
}
.question__text {
  font-weight: bold;
  display: flex;
  justify-content: center;
  span {
    display: inline-block;
    animation: jump 1.5s infinite;
    &:nth-child(1) { animation-delay: 0.1s; }
    &:nth-child(2) { animation-delay: 0.2s; }
    &:nth-child(3) { animation-delay: 0.3s; }
    &:nth-child(4) { animation-delay: 0.4s; }
    &:nth-child(5) { animation-delay: 0.5s; }
    &:nth-child(6) { animation-delay: 0.6s; }
  }
}
@keyframes jump {
  0%, 20%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(calc(var(--inline-base) * -1));
  }
}
.question__arrow {
  width: calc(var(--inline-base) * 1.25);
  margin-inline: auto;
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 2);
  }
}

/*==========================================================================
  intro
  ==========================================================================*/
.intro {
  padding-bottom: calc(var(--inline-base) * 38.5);
  @media (width >= 1024px) {
    padding-bottom: var(--block-base);
  }
}
.intro__title {
  padding: calc(var(--inline-base) * 31) 0 calc(var(--inline-base) * 21);
  text-align: center;
  @media (width >= 1024px) {
    padding: calc(var(--inline-base) * 40) 0 calc(var(--inline-base) * 30);
  }
}
.intro__title__image {
  width: calc(var(--inline-base) * 18.75);
  margin-inline: auto;
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 29.25);
    margin-inline: auto;
  }
}
.intro__title__text {
  margin-top: calc(var(--inline-base) * 3);
  &.animation-ele {
    opacity: 0;
    transform: scale(.9);
    transition: ease .5s;
    &.is-animation {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (width >= 1024px) {
    margin-top: calc(var(--inline-base) * 5);
  }
}
.intro__lead {
  background: url("/ja/portal/cycle/assets/images/intro-bg.svg") no-repeat center / contain;
  text-align: center;
}
.intro__lead__inner {
  height: calc(var(--inline-base) * 42.5);
  margin: calc(var(--inline-base) * 4) 0 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 92.5);
    margin: calc(var(--inline-base) * 11.25) 0 calc(var(--inline-base) * 9);
  }
}
.intro__text {
  .text-line {
    &::before {
      width: 100%;
      height: calc(var(--inline-base) * 1);
      bottom: 0;
      border-radius: calc(var(--inline-base) * 0.5);
    }
  }
  &.animation-ele {
    opacity: 0;
    transform: scale(.9);
    transition: ease .5s;
    &.is-animation {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (width >= 1024px) {
    .text-line {
      &::before {
        height: calc(var(--inline-base) * 2);
        bottom: 5px;
        border-radius: calc(var(--inline-base) * 1);
      }
    }
  }
}

/*==========================================================================
  tsukaeru
  ==========================================================================*/
.tsukaeru {
  padding-top: calc(var(--inline-base) * 12);
  @media (width >= 1024px) {
    padding-top: 0;
  }
}
.tsukaeru__2columns {
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 120);
    flex-direction: row-reverse;
  }
}
.tsukaeru__2column {
  width: 100%;
  position: relative;
  overflow: hidden;
  @media (width >= 1024px) {
    width: 50%;
  }
}
.tsukaeru__profile {
  margin-top: calc(var(--inline-base) * -3);
  display: flex;
  align-items: center;
  border-radius: calc(var(--inline-base) * 3);
  overflow: hidden;
  z-index: 1;
  @media (width >= 1024px) {
    margin-top: 0;
    border-radius: calc(var(--inline-base) * 5) 0 0 calc(var(--inline-base) * 4);
  }
}
.tsukaeru__profile__inner {
  width: 100%;
  height: calc(var(--inline-base) * 64);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    max-width: 950px;
  }
}
.tsukaeru__name {
  margin-bottom: calc(var(--inline-base) * 3);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 6);
  }
}
.tsukaeru__pattern {
  width: calc(var(--inline-base) * 41.5);
  img {
    width: 100%;
  }
  @media (width >= 1024px) {
    max-width: calc(var(--inline-base) * 69.5);
    width: calc(100% - calc(var(--inline-base) * 10));
  }
}
.tsukaeru__visual {
  height: calc(var(--inline-base) * 50.25);
  @media (width >= 1024px) {
    height: auto;
  }
}
.tsukaeru__line {
  margin-left: calc(var(--inline-base) * 3.75);
  @media (width >= 1024px) {
    margin-left: 0;
    position: absolute;
    right: 230px;
    top: 50px;
  }
}
.tsukaeru__image {
  width: 75.38vw;
  transform: translate(51vw, -17vw);
  @media (width >= 1024px) {
    width: 570px;
    position: absolute;
    right: -210px;
    bottom: calc(var(--inline-base) * 5);
    transform: none;
    img {
      transform: rotate(-31deg);
    }
  }
}
.tsukaeru__visual {
  &.animation-ele {
    .tsukaeru__line {
      opacity: 0;
      transform: translateY(calc(var(--inline-base) * 2));
      transition: ease .5s;
      transition-delay: .4s;
    }
    .tsukaeru__image {
      img {
        transform: translateX(100%) rotate(0);
        transition: ease .5s;
      }
    }
    &.is-animation {
      .tsukaeru__line {
        opacity: 1;
        transform: translateY(0);
      }
      .tsukaeru__image {
        img {
          transform: translateX(0) rotate(-31deg);
        }
      }
    }
  }
}

/*==========================================================================
  company
  ==========================================================================*/
.company {
  margin-top: calc(var(--inline-base) * 26);
  @media (width >= 1024px) {
    margin-top: calc(var(--inline-base) * 22);
  }
}
.company__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company__title__image {
  width: calc(var(--inline-base) * 11.5);
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 21.25);
  }
}
.company__title__text {
  margin-top: calc(var(--inline-base) * 1);
  .text-line {
    &::before {
      width: calc(100% + calc(var(--inline-base) * 4));
      height: calc(var(--inline-base) * 2);
      bottom: 0;
      border-radius: calc(var(--inline-base) * 1);
    }
  }
  @media (width >= 1024px) {
    margin-top: calc(var(--inline-base) * 2);
    .text-line {
      &::before {
        width: calc(100% + calc(var(--inline-base) * 10));
        height: calc(var(--inline-base) * 4);
        bottom: calc(var(--inline-base) * 2.5);
        border-radius: calc(var(--inline-base) * 2);
      }
    }
  }
}
.company__place {
  height: calc(var(--inline-base) * 80);
  position: relative;
  @media (width >= 1024px) {
    height: 1170px;
  }
}
.company__place__map {
  width: calc(var(--inline-base) * 70);
  position: absolute;
  top: calc(var(--inline-base) * -1.5);
  left: 50%;
  z-index: -2;
  transform: translateX(calc(var(--inline-base) * -39));
  @media (width >= 1024px) {
    width: 1464px;
    top: -60px;
    left: 50%;
    z-index: -2;
    transform: translateX(-65%);
  }
}
.company__place__line {
  position: absolute;
  top: calc(var(--inline-base) * 17);
  left: calc(var(--inline-base) * 8.625);
  &.animation-ele {
    opacity: 0;
    transform: translateY(calc(var(--inline-base) * 2));
    transition: ease .5s;
    &.is-animation {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (width >= 1024px) {
    top: 420px;
    left: 50%;
    transform: translateX(-74%);
    &.animation-ele {
      transform: translateX(-74%) translateY(calc(var(--inline-base) * 2));
      &.is-animation {
        transform: translateX(-74%) translateY(0);
      }
    }
  }
}
.company__place__tsukaeru {
  position: absolute;
  top: calc(var(--inline-base) * 30);
  left: 50%;
  transform: translateX(calc(var(--inline-base) * 8.5));
  &::before {
    content: "";
    width: calc(var(--inline-base) * 1.5);
    height: calc(var(--inline-base) * 1.5);
    background-color: var(--color-secondary);
    position: absolute;
    top: calc(var(--inline-base) * 1.375);
    left: calc(var(--inline-base) * -3);
    display: block;
    border-radius: 50%;
  }
  &::after {
    content: "日本原燃";
    color: var(--color-secondary);
    font-weight: bold;
    position: absolute;
    top: calc(var(--inline-base) * -2);
    left: calc(var(--inline-base) * -6.5);
  }
  img {
    width: calc(var(--inline-base) * 10.5);
  }
  @media (width >= 1024px) {
    top: 608px;
    transform: translateX(30%);
    &::before {
      width: calc(var(--inline-base) * 3);
      height: calc(var(--inline-base) * 3);
      top: 18px;
      left: -47px;
    }
    &::after {
      top: -10px;
      left: -70px;
    }
    img {
      width: 133px;
    }
  }
}
.company__slide{
  margin-top: calc(var(--inline-base) * -37);
  padding-inline: calc(var(--inline-base) * 2);
  display: flex;
  flex-direction: column;
  .splide-facility__slide {
    position: relative;
    &::before {
      content: "";
      width: 100%;
      height: calc(100% - calc(var(--inline-base) * 2));
      background-color: var(--color-bg-white);
      border: var(--color-primary) calc(var(--inline-base) * 1) solid;
      border-radius: calc(var(--inline-base) * 3);
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      z-index: -1;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    }
  }
  .splide-facility__inner {
    padding-bottom: calc(var(--inline-base) * 4);
    text-align: center;
  }
  .splide-facility__image {
    height: calc(var(--inline-base) * 17);
    margin-bottom: calc(var(--inline-base) * 2);
    display: flex;
    align-items: end;
    justify-content: center;
    img {
      width: calc(var(--inline-base) * 18.75);
    }
  }
  .splide-facility__title {
    height: calc(var(--inline-base) * 7.5);
    margin-bottom: calc(var(--inline-base) * 3);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .splide-facility__name {
    margin-bottom: calc(var(--inline-base) * 1);
  }
  .splide-facility__desc {
    width: calc(var(--inline-base) * 30);
    margin-inline: auto;
    text-align: left;
    @media (width < 1024px) {
      br {
        display: none;
      }
    }
  }
  .splide__pagination {
    width: auto;
    right: calc(var(--inline-base) * -2);
    bottom: calc(50% - calc(var(--inline-base) * 2));
    transform: translateX(50%) rotate(90deg);
  }
  @media (width >= 1024px) {
    margin-top: -264px;
    padding-inline: 0;
    flex-direction: row;
    .splide-facility__slide {
      &::before {
        width: 100%;
        height: calc(100% - calc(var(--inline-base) * 4.5));
        border: var(--color-primary) calc(var(--inline-base) * 1.5) solid;
        border-radius: calc(var(--inline-base) * 4);
      }
    }
    .splide-facility {
      height: 545px;
    }
    .splide-facility__inner {
      padding-bottom: calc(var(--inline-base) * 5.5);
    }
    .splide-facility__image {
      height: 235px;
      margin-bottom: calc(var(--inline-base) * 4);
      img {
        width: 245px;
      }
    }
    .splide-facility__title {
      height: calc(var(--inline-base) * 17.5);
      margin-bottom: calc(var(--inline-base) * 3);
    }
    .splide-facility__name {
      margin-bottom: calc(var(--inline-base) * 1);
    }
    .splide-facility__desc {
      width: auto;
      text-align: center;
    }
    .splide__pagination {
      right: calc(var(--inline-base) * -3);
    }
  }
}
.company__slide__inner {
  width: calc(var(--inline-base) * 38);
  @media (width >= 1024px) {
    width: 59.375%;
  }
}
.company__slide__tsukaeru {
  width: 100%;
  position: relative;
  display: flex;
  align-items: end;
  @media (width >= 1024px) {
    width: 36.5625%;
    transform: translateX(calc(var(--inline-base) * 6.5));
  }
}
.company__slide__tsukaeru-line {
  position: absolute;
  top: calc(var(--inline-base) * -3);
  left: calc(var(--inline-base) * 6.5);
  @media (width < 1024px) {
    margin-right: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 1.5) 0 calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 3);
      border-color: transparent transparent transparent var(--color-primary);
      translate: 100% -50%;
      top: 50%;
      right: 0;
    }
    &.animation-ele {
      opacity: 0;
      transform: translateX(calc(var(--inline-base) * 2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
  @media (width >= 1024px) {
    top: 0;
    left: 26.5%;
    margin-bottom: calc(var(--inline-base) * 3);
    &::after {
      border-width: calc(var(--inline-base) * 3) calc(var(--inline-base) * 2.5) 0 0;
      border-color: var(--color-primary) transparent transparent;
      translate: calc(-50% - 0.4px) 100%;
      bottom: 0;
      left: calc(var(--inline-base) * 8);
      transform: skew(-10deg);
    }
    &.animation-ele {
      opacity: 0;
      transform: translateY(calc(var(--inline-base) * 2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

.company__slide__tsukaeru-image {
  position: absolute;
  top: calc(var(--inline-base) * -5);
  right: calc(var(--inline-base) * -4.25);
  img {
    width: calc(var(--inline-base) * 15);
    top: 0;
    right: 0;
  }
  @media (width >= 1024px) {
    position: static;
    img {
      width: calc(var(--inline-base) * 34.125);
    }
  }
}
.company__business {
  margin-top: calc(var(--inline-base) * -23);
  padding-top: calc(var(--inline-base) * 52.75);
  padding-bottom: calc(var(--inline-base) * 16);
  @media (width >= 1024px) {
    margin-top: -264px;
    padding-top: 344px;
    padding-bottom: 272px;
  }
}
.company__business__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--inline-base) * 1);
  @media (width >= 1024px) {
    flex-wrap: nowrap;
    gap: unset;
  }
}
.company__business__item {
  width: calc(var(--inline-base) * 22.4);
  height: calc(var(--inline-base) * 22.4);
  margin-bottom: calc(var(--inline-base) * 1);
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  border-radius: calc(var(--inline-base) * 3);
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  &.line-bottom {
    &::before {
      content: "";
      width: calc(var(--inline-base) * 2);
      height: calc(var(--inline-base) * 8);
      background-color: var(--color-primary);
      position: absolute;
      bottom: calc(var(--inline-base) * -7.5);
      display: block;
    }
  }
  &:first-of-type {
    margin-inline: calc((100% - calc(var(--inline-base) * 22.4)) / 2);
  }
  &:nth-of-type(2),
  &:nth-of-type(3) {
    transform: translateY(calc(var(--inline-base) * 24.4));
  }
  &:nth-of-type(4),
  &:nth-of-type(5) {
    transform: translateY(calc(var(--inline-base) * -24.4));
  }
  @media (width >= 1024px) {
    width: 19.5%;
    max-width: 243px;
    height: 243px;
    margin-bottom: 0;
    border-radius: calc(var(--inline-base) * 4);
    &.line-bottom {
      &::before {
        content: "";
        width: calc(var(--inline-base) * 3);
        height: 90px;
        bottom: -85px;
      }
    }
    &:first-of-type {
      margin-inline: 0;
    }
    &:nth-of-type(2),
    &:nth-of-type(3) {
      transform: none;
    }
    &:nth-of-type(4),
    &:nth-of-type(5) {
      transform: none;
    }
  }
}
.company__business__facility-name {
  width: calc(var(--inline-base) * 15.75);
  height: calc(var(--inline-base) * 6.25);
  margin: calc(var(--inline-base) * 1) auto calc(var(--inline-base) * 2.875);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 23.75);
    height: calc(var(--inline-base) * 9.5);
    margin: calc(var(--inline-base) * 2) auto calc(var(--inline-base) * 3.375);
  }
}
.company__business__facility-image {
  width: calc(var(--inline-base) * 16.875);
  @media (width >= 1024px) {
    width: auto;
  }
}
.company__business__list{
  margin-bottom: calc(var(--inline-base) * 6);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 10);
  }
}
.company__business__detail {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: calc(var(--inline-base) * 3);
  padding-block: calc(var(--inline-base) * 3);
  border-radius: calc(var(--inline-base) * 2);
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  @media (width >= 1024px) {
    padding-inline: calc(var(--inline-base) * 10);
    padding-block: calc(var(--inline-base) * 6);
    border-radius: calc(var(--inline-base) * 4);
  }
}
.company__business__inner {
  text-align: center;
}
.company__business__text {
  margin-bottom: calc(var(--inline-base) * 5);
  padding: calc(var(--inline-base) * 4) calc(var(--inline-base) * 3.5);
  border-radius: calc(var(--inline-base) * 2);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 5);
    padding: calc(var(--inline-base) * 5);
    border-radius: calc(var(--inline-base) * 2);
  }
}
.company__business__philosophy {
  margin-bottom: calc(var(--inline-base) * 4);
  .is-sp {
    display: inline;
  }
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 4);
    .is-sp {
      display: none;
    }
  }
}
.company__business__desc {
  text-align: left;
}
.company__business__image {
  margin-bottom: calc(var(--inline-base) * 3);
  img {
    width: calc(var(--inline-base) * 40.75);
    height: calc(var(--inline-base) * 18);
  }
  figcaption {
    margin-top: calc(var(--inline-base) * 1);
  }
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 5);
    img {
      width: 540px;
      height: 200px;
      margin-inline: auto;
    }
    figcaption {
      margin-top: calc(var(--inline-base) * 2);
    }
  }
}
.company__next {
  margin-top: calc(var(--inline-base) * -10);
  margin-inline: calc(var(--inline-base) * 3);
  @media (width >= 1024px) {
    margin-top: -180px;
    margin-bottom: 144px;
  }
}
.company__next__inner {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    flex-direction: row;
  }
}
.company__next__tsukaeru-image {
  width: calc(var(--inline-base) * 20.75);
  margin-top: calc(var(--inline-base) * -2.5);
  img {
    width: 100%;
  }
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 33.5);
    margin-top: 0;
  }
}
.company__next__tsukaeru-line {
  @media (width < 1024px) {
    margin-bottom: calc(var(--inline-base) * 3);
    &.animation-ele {
      opacity: 0;
      transform: translateY(calc(var(--inline-base) * 2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateY(0);
      }
    }
    &::after {
      border-width: calc(var(--inline-base) * 3) calc(var(--inline-base) * 1.5) 0 calc(var(--inline-base) * 1.5);
      border-color: var(--color-primary) transparent transparent;
      translate: -50% 100%;
      bottom: 0;
      left: 50%;
    }
  }
  @media (width >= 1024px) {
    margin-left: calc(var(--inline-base) * 3);
    &.animation-ele {
      opacity: 0;
      transform: translateX(calc(var(--inline-base) * -2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateX(0);
      }
    }
    &::after {
      border-width: calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 3) calc(var(--inline-base) * 1.5) 0;
      border-color: transparent var(--color-primary) transparent transparent;
      translate: -100% -50%;
      top: 50%;
      left: 0;
    }
  }
}

/*==========================================================================
  about
  ==========================================================================*/
.about__title {
  margin-bottom: calc(var(--inline-base) * 5);
  text-align: center;
  .text-line {
    &::before {
      width: calc(100% + calc(var(--inline-base) * 4));
      height: calc(var(--inline-base) * 2);
      bottom: 0;
      border-radius: calc(var(--inline-base) * 1);
    }
  }
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 10);
    .text-line {
      &::before {
        width: calc(100% + calc(var(--inline-base) * 10));
        height: calc(var(--inline-base) * 4);
        bottom: 0;
        border-radius: calc(var(--inline-base) * 2);
      }
    }
  }
}
.about__subtitle {
  margin-bottom: calc(var(--inline-base) * 2);
  text-align: center;
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 3);
  }
}
.about__desc {
  width: 100%;
  max-width: calc(var(--inline-base) * 42.75);
  margin-inline: auto;
  margin-bottom: calc(var(--inline-base) * 5);
  @media (width >= 1024px) {
    width: calc(100% - calc(var(--inline-base) * 10));
    max-width: 1080px;
  }
}
.about__uran {
  margin-bottom: calc(var(--inline-base) * 15);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 10);
  }
}
.about__uran__inner {
  display: flex;
  flex-direction: column-reverse;
  @media (width >= 1024px) {
    display: flex;
    flex-direction: row;
  }
}
.about__uran__tsukaeru {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    width: 443px;
  }
}
.about__uran__tsukaeru-line {
  &.animation-ele {
    opacity: 0;
    transform: translateY(calc(var(--inline-base) * 2));
    transition: ease .5s;
    &.is-animation {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.about__uran__tsukaeru-image {
  width: calc(var(--inline-base) * 20.75);
  margin-top: calc(var(--inline-base) * -2.5);
  margin-inline: auto;
  img {
    width: 100%;
  }
  @media (width >= 1024px) {
    width: 226px;
    margin-top: 0;
  }
}
.about__uran__graph {
  text-align: center;
}
.about__uran__graph-name {
  margin-bottom: calc(var(--inline-base) * 1);
  font-weight: bold;
  @media (width >= 1024px) {
    font-weight: normal;
  }
}
.about__uran__graph-image {
  margin-bottom: calc(var(--inline-base) * 1);
  img {
    width: 100%;
    height: auto;
  }
  figcaption {
    margin-top: calc(var(--inline-base) * 0.5);
    .is-pc {
      display: none;
    }
    .is-sp {
      display: inline;
    }
  }
  @media (width >= 1024px) {
    margin-bottom: 0;
    figcaption {
      margin-top: calc(var(--inline-base) * 1);
      .is-pc {
        display: inline;
      }
      .is-sp {
        display: none;
      }
    }
  }
}
.about__step__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  @media (width >= 1024px) {
    flex-direction: row;
  }
}
.about__step__detail {
  width: 100%;
  margin-bottom: calc(var(--inline-base) * 2);
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    z-index: -1;
    border-radius: calc(var(--inline-base) * 3);
  }
  &::after {
    content: "";
    background-image: url("/ja/portal/cycle/assets/images/about-step-bg1-sp.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    display: block;
    position: absolute;
    z-index: -1;
    width: 91.53vw;
    height: 108.71vw;
    top: -6.41vw;
    right: 2.05vw;
  }
  @media (width >= 1024px) {
    width: 35%;
    margin-bottom: 0;
    &::before {
      content: "";
      width: 100vw;
      border-radius: 0 calc(var(--inline-base) * 4) calc(var(--inline-base) * 4) 0;
    }
    &::after {
      background-image: url("/ja/portal/cycle/assets/images/about-step-bg1.svg");
      width: 466px;
      height: 483px;
      top: -14px;
      right: 370px;
    }
  }
}
.about__step__text {
  margin-block: calc(var(--inline-base) * 2);
  margin-inline: calc(var(--inline-base) * 2);
  padding: calc(var(--inline-base) * 4) calc(var(--inline-base) * 2);
  background-color: color-mix(in srgb, var(--color-bg-white), transparent 10%);
  border-radius: calc(var(--inline-base) * 2);
  @media (width >= 1024px) {
    margin-block: calc(var(--inline-base) * 5);
    padding: calc(var(--inline-base) * 4);
    background-color: color-mix(in srgb, var(--color-bg-white), transparent 10%);
    border-radius: calc(var(--inline-base) * 2);
    transform: translateX(calc(var(--inline-base) * -4));
  }
}
.about__step__desc {
  margin-bottom: calc(var(--inline-base) * 3);
  text-align: center;
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 1);
    text-align: left;
    font-size: clamp(calc(var(--inline-base) * 2.375), calc(3.125 * 1vw + -13px), calc(var(--inline-base) * 3.38));
  }
}
.about__step__items {
  width: 100%;
  position: relative;
  @media (width >= 1024px) {
    width: 65%;
    padding-inline: calc(var(--inline-base) * 4);
    position: relative;
    display: grid;
    column-gap: calc(var(--inline-base) * 4);
    row-gap: calc(var(--inline-base) * 4);
    grid-template-columns: 0.5fr 0.5fr;
    &::before {
      content: "";
      width: 100vw;
      height: 100%;
      background-color: var(--color-primary);
      position: absolute;
      top: 0;
      left: 100%;
      display: block;
      z-index: -1;
      border-radius: calc(var(--inline-base) * 4) 0 0 calc(var(--inline-base) * 4);
    }
    &::after {
      content: "";
      background-image: url("/ja/portal/cycle/assets/images/about-step-bg2.svg");
      background-repeat: no-repeat;
      background-position: left top;
      display: block;
      position: absolute;
      z-index: -1;
      width: 338px;
      height: 447px;
      top: 37px;
      left: calc(100% + 24px);
    }
  }
}
.about__step__item {
  margin-bottom: calc(var(--inline-base) * 2);
  padding-block: calc(var(--inline-base) * 3);
  background-color: var(--color-bg-white);
  border: var(--color-primary) calc(var(--inline-base) * 1) solid;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--inline-base) * 1);
  border-radius: calc(var(--inline-base) * 3);
  &::after {
    content: "";
    width: calc(var(--inline-base) * 2);
    height: calc(var(--inline-base) * 3);
    background-color: var(--color-primary);
    position: absolute;
    bottom: calc(var(--inline-base) * -3.5);
  }
  &:nth-of-type(4) {
    margin-bottom: 0;
    &::after {
      display: none;
      @media (width >= 1024px) {
        display: block;
      }
    }
  }
  @media (width >= 1024px) {
    margin-bottom: 0;
    padding-block: 0;
    border: var(--color-primary) calc(var(--inline-base) * 1.5) solid;
    gap: calc(var(--inline-base) * 2);
    border-radius: calc(var(--inline-base) * 4);
    &:nth-of-type(1) {
      &::before {
        content: "";
        width: 42px;
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        position: absolute;
        left: 0;
        transform: translateX(calc(-100% - 5px));
      }
      &::after {
        content: "";
        width: 42px;
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        right: 0;
        bottom: auto;
        transform: translateX(calc(100% + 5px));
      }
    }
    &:nth-of-type(2) {
      &::after {
        content: "";
        width: 95px;
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        position: absolute;
        left: 0;
        bottom: 0;
        transform: rotate(-45deg) translate(-90px, -25px);
      }
    }
    &:nth-of-type(3) {
      &::after {
        content: "";
        width: 42px;
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        position: absolute;
        right: 0;
        bottom: auto;
        transform: translateX(calc(100% + 5px));
      }
    }
    &:nth-of-type(4) {
      &::after {
        content: "";
        width: 42px;
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        position: absolute;
        right: 0;
        bottom: auto;
        transform: translateX(calc(100% + 5px));
      }
    }
  }
}
.about__step__title {
  text-align: center;
  @media (width >= 1024px) {
    font-size: clamp(1.1111rem, calc(2.7344 * 1vw + -0.4444rem), var(--fontSize-header-xs));
  }
}
.about__step__icons {
  display: flex;
  gap: calc(var(--inline-base) * 5);
  @media (width >= 1024px) {
    gap: calc(var(--inline-base) * 3.75);
    width: calc(var(--inline-base) * 33.75);
    justify-content: center;
  }
}
.about__step__icon {
  width: calc(var(--inline-base) * 10);
  height: calc(var(--inline-base) * 10);
  background-color: var(--color-secondary);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--inline-base) * 2);
  @media (width >= 1024px) {
    width: 120px;
    height: 120px;
    border-radius: calc(var(--inline-base) * 2);
  }
}

/*==========================================================================
  process
  ==========================================================================*/
.process__all {
  position: relative;
  &.animation-ele {
    .process__all__scrollguide {
      width: calc(var(--inline-base) * 18);
      height: calc(var(--inline-base) * 13);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + calc(var(--inline-base) * 6)));
      pointer-events: none;
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("/ja/portal/cycle/assets/images/scroll-guide.svg");
        background-size: contain;
        position: absolute;
        opacity: 1;
        transition: ease .5s;
        transition-delay: 1s;
      }
    }
    &.is-animation {
      .process__all__scrollguide {
        &::before {
          opacity: 0;
        }
      }
    }
  }
  @media (width >= 1024px) {
    .process__all__scrollguide {
      display: none;
    }
  }
}
.process__all__title {
  margin-bottom: calc(var(--inline-base) * 5);
  position: relative;
  &::before {
    content: "";
    width: calc(100vw - calc(var(--inline-base) * 2));
    height: calc(var(--inline-base) * 6);
    background-color: var(--color-bg-beige);
    position: absolute;
    top: calc(var(--inline-base) * 2);
    left: 0;
    z-index: -1;
    border-radius: 0 calc(var(--inline-base) * 1) calc(var(--inline-base) * 1) 0;
  }
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 12.5);
    &::before {
      content: "";
      width: 100vw;
      height: calc(var(--inline-base) * 10);
      top: calc(var(--inline-base) * 4);
      left: -51.5vw;
      border-radius: 0 calc(var(--inline-base) * 2) calc(var(--inline-base) * 2) 0;
    }
  }
}
.process__all__inner {
  padding-inline: calc(var(--inline-base) * 3);
  @media (width >= 1024px) {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: calc(var(--inline-base) * 1);
    position: relative;
    height: 150px;
  }
}
.process__all__title1 {
  @media (width >= 1024px) {
    padding-left: calc(var(--inline-base) * 0.5);
    position: absolute;
    top: 50%;
    left: calc(var(--inline-base) * 1);
    margin-top: -2em;
  }
}
.process__all__title2 {
  @media (width >= 1024px) {
    margin-top: calc(var(--inline-base) * -2);
    font-size: clamp(var(--fontSizeMW-header-l), calc(10.5469 * 1vw + -3rem), var(--fontSize-header-l));
    line-height: var(--lineHeight-header-l);
    position: absolute;
    bottom: 50%;
    left: calc(var(--inline-base) * 1);
    margin-bottom: -1em;
  }
}
.process__allsteps {
  margin-bottom: calc(var(--inline-base) * 15);
  position: relative;
  display: flex;
  gap: calc(var(--inline-base) * 1);
  overflow-x: auto;
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 36);
    overflow-x: auto;
    @media (width >= 1280px) {
      overflow-x: visible;
      &::after {
        content: "";
        width: 100vw;
        height: calc(var(--inline-base) * 10);
        background-color: var(--color-bg-beige);
        position: absolute;
        left: calc(100% + calc(var(--inline-base) * 6));
        bottom: 0;
        z-index: -1;
        border-radius: calc(var(--inline-base) * 2) 0 0 calc(var(--inline-base) * 2);
      }
    }
    &::before {
      display: none;
    }
  }
}
.process__allstep {
  display: flex;
  flex-direction: column;
}
.process__allstep__contents {
  margin-bottom: calc(var(--inline-base) * 1);
  display: flex;
  gap: calc(var(--inline-base) * 1);
}
.process__allstep__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.process__allstep__icon {
  width: calc(var(--inline-base) * 7);
  height: calc(var(--inline-base) * 7);
  background-color: var(--color-secondary);
  text-align: center;
  line-height: calc(var(--inline-base) * 3.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--inline-base) * 1);
  span {
    line-height: calc(var(--inline-base) * 2.15);
  }
  @media (width >= 1024px) {
    line-height: 27.5px;
    span {
      line-height: 17.5px;
    }
  }
}
.process__allstep__images {
  display: flex;
  gap: calc(var(--inline-base) * 1);
}
.process__allstep__image {
  width: calc(var(--inline-base) * 22.4);
  img {
    border-radius: calc(var(--inline-base) * 1);
  }
  @media (width >= 1024px) {
    width: 176px;
    img {
      border-radius: calc(var(--inline-base) * 1);
    }
  }
}
.process__allstep__bottom {
  height: calc(var(--inline-base) * 10);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    content: "";
    width: calc(var(--inline-base) * 1);
    height: 100%;
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    translate: -100% 0;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: calc(var(--inline-base) * 5) 0 calc(var(--inline-base) * 5) calc(var(--inline-base) * 2);
    border-color: transparent transparent transparent var(--color-primary);
    translate: 100% 0;
    z-index: 1;
  }
  &:nth-of-type(2n) {
    &::after {
      border-color: transparent transparent transparent var(--color-primary-light);
    }
  }
}
.process__allstep {
  &:first-of-type {
    .process__allstep__bottom {
      border-radius: calc(var(--inline-base) * 2) 0 0 calc(var(--inline-base) * 2);
      &::before {
        display: none;
      }
    }
  }
  &:last-of-type {
    .process__allstep__bottom {
      border-radius: 0 calc(var(--inline-base) * 2) calc(var(--inline-base) * 2) 0;
      &::after {
        display: none;
      }
    }
  }
  &:nth-of-type(2n) {
    .process__allstep__bottom {
      &::before {
        background-color: var(--color-primary-light);
      }
      &::after {
        border-color: transparent transparent transparent var(--color-primary-light);
      }
    }
  }
  &:nth-of-type(2) {
    .process__allstep__bottom {
      justify-content: end;
    }
  }
}

.process__step {
  position: relative;
  scroll-margin-top: calc(var(--inline-base) * 10.25);
  &::before {
    content: "";
    width: calc(100vw - calc(var(--inline-base) * 2));
    height: calc(var(--inline-base) * 6);
    background-color: var(--color-bg-beige);
    position: absolute;
    top: calc(var(--inline-base) * 2);
    left: 0;
    z-index: -1;
    border-radius: 0 calc(var(--inline-base) * 1) calc(var(--inline-base) * 1) 0;
  }
  @media (width >= 1024px) {
    scroll-margin-top: calc(var(--inline-base) * 13.5);
    &::before {
      content: "";
      width: 100vw;
      height: calc(var(--inline-base) * 10);
      top: calc(var(--inline-base) * 4);
      left: -51.5vw;
      border-radius: 0 calc(var(--inline-base) * 2) calc(var(--inline-base) * 2) 0;
    }
  }
}
.process__step__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  &::before {
    content: "";
    width: calc(var(--inline-base) * 3);
    height: calc(100% + var(--block-base));
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    left: calc(var(--inline-base) * -16);
  }
  @media (width >= 1024px) {
    flex-direction: row;
    gap: calc(var(--inline-base) * 6);
  }
}
.process__step__first {
  width: 100%;
  .process__step__image {
    display: block;
  }
  @media (width >= 1024px) {
    width: 50%;
    .process__step__image {
      display: none;
    }
  }
}
.process__step__end {
  width: 100%;
  .process__step__image {
    display: none;
  }
  @media (width >= 1024px) {
    width: 50%;
    .process__step__image {
      display: block;
    }
  }
}
.process__title__inner {
  display: flex;
  gap: calc(var(--inline-base) * 1);
  @media (width >= 1024px) {
    gap: calc(var(--inline-base) * 2);
  }
}
.process__icon {
  width: calc(var(--inline-base) * 10);
  height: calc(var(--inline-base) * 10);
  background-color: var(--color-secondary);
  text-align: center;
  line-height: calc(var(--inline-base) * 4.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--inline-base) * 1);
  span {
    line-height: calc(var(--inline-base) * 3.125);
  }
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 18);
    height: calc(var(--inline-base) * 18);
    background-color: var(--color-secondary);
    line-height: calc(var(--inline-base) * 9);
    border-radius: calc(var(--inline-base) * 2);
    span {
      line-height: calc(var(--inline-base) * 4);
    }
  }
}
.process__title__text {
  @media (width >= 1024px) {
    position: relative;
    width: 74.02%;
    height: calc(var(--inline-base) * 18);
  }
}
.process__title {
  margin-bottom: calc(var(--inline-base) * 12);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 2);
  }
}
.process__title1 {
  margin-top: calc(var(--inline-base) * 1);
  @media (width >= 1024px) {
    margin-top: -2em;
    position: absolute;
    top: 50%;
    left:  calc(var(--inline-base) * 0.5);
  }
}
.process__title2 {
  /*display: flex;*/
  display: inline;
  align-items: center;
  @media (width >= 1024px) {
    /*margin-top: calc(var(--inline-base) * -2);*/
    position: absolute;
    bottom: 50%;
    left: 0;
    margin-bottom: -1em;
    span.process__title-small {
      font-size: clamp(calc(var(--inline-base) * 4.25), calc(4.2969 * 1vw + calc(var(--inline-base) * -1.25)), calc(var(--inline-base) * 5.625));
    }
    span.process__title-ls {
      letter-spacing: -1rem;
    }
  }
}
.process__desc {
  margin-bottom: calc(var(--inline-base) * 2);
  padding-inline: calc(var(--inline-base) * 2);
  display: flex;
  align-items: end;
  @media (width >= 1024px) {
    min-height: 190px;
    height: auto;
    margin-bottom: calc(var(--inline-base) * 2);
    padding-inline: calc(var(--inline-base) * 3);
  }
}
.process__desc__text{
  font-weight: normal;
}
.process__speechBubble {
  width: calc(100% - calc(var(--inline-base) * 2));
  height: calc(var(--inline-base) * 1);
  margin-left: calc(var(--inline-base) * 1);
  position: relative;
  display: inline-block;
  margin-bottom: calc(var(--inline-base) * 3);
  background-color: var(--color-primary);
  text-align: left;
  border-radius: calc(var(--inline-base) * 0.5);
  &::before {
    content: "";
    margin-left: calc(var(--inline-base) * -3);
    position: absolute;
    bottom: calc(var(--inline-base) * 1);
    left: 50%;
    border-style: solid;
    border-width: calc(var(--inline-base) * 4) calc(var(--inline-base) * 4.7) 0 0;
    border-color: var(--color-primary) transparent transparent;
    translate: 250% 100%;
    transform: skew(-10deg);
    transform-origin: top;
  }
  &::after {
    content: "";
    margin-left: calc(var(--inline-base) * -3);
    position: absolute;
    bottom: calc(var(--inline-base) * 1);
    left: 50%;
    border-style: solid;
    border-width: calc(var(--inline-base) * 2.325) calc(var(--inline-base) * 2.2625) 0 0;
    border-color: var(--color-bg-white) transparent transparent;
    translate: calc(565% - 1.4px) 100%;
    transform: skew(-13deg);
    transform-origin: top;
  }
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 5);
    border-radius: calc(var(--inline-base) * 0.5);
    &::before {
      margin-left: 0;
      bottom: calc(var(--inline-base) * 1);
      left: 50%;
      border-width: 50px 37px 0 0;
    }
    &::after {
      margin-left: 0;
      bottom: calc(var(--inline-base) * 1);
      left: 50%;
      border-width: 29.6px 18.1px 0 0;
    }
  }
}
.process__tsukaeru {
  width: calc(var(--inline-base) * 15.5);
  margin-top: calc(var(--inline-base) * -2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  @media (width >= 1024px) {
    width: 162px;
    margin-top: -35px;
  }
}
.process__step__image {
  position: relative;
  margin-inline: calc(var(--inline-base) * 1);
  margin-bottom: calc(var(--inline-base) * 3);
  img {
    border: var(--color-primary) calc(var(--inline-base) * 1) solid;
    border-radius: calc(var(--inline-base) * 3);
    width: 100%;
  }
  @media (width >= 1024px) {
    margin-inline: 0;
    margin-bottom: 0;
    img {
      border: var(--color-primary) calc(var(--inline-base) * 1.5) solid;
      border-radius: calc(var(--inline-base) * 4);
    }
    &::after {
      content: "";
      width: 100vw;
      height: calc(var(--inline-base) * 10);
      background-color: var(--color-bg-beige);
      position: absolute;
      left: calc(100% + calc(var(--inline-base) * 6));
      bottom: calc(var(--inline-base) * 4);
      z-index: -1;
      border-radius: calc(var(--inline-base) * 2) 0 0 calc(var(--inline-base) * 2);
    }
  }
}
.process__branch {
  margin-top: calc(var(--inline-base) * 10);
  padding-inline: calc(var(--inline-base) * 2);
  border-radius: calc(var(--inline-base) * 3);
  position: relative;
  @media (width >= 1024px) {
    margin-top: calc(var(--inline-base) * 8);
    padding-inline: calc(var(--inline-base) * 4);
    border-radius: calc(var(--inline-base) * 4);
    &::before {
      content: "";
      background-color: #E0D265;
      position: absolute;
      display: block;
    }
  }
}
.process__branch__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--inline-base) * 2);
  @media (width >= 1024px) {
    gap: calc(var(--inline-base) * 3);
  }
}
.process__branch__detail {
  min-width: 0;
  flex: 1;
  padding-block: calc(var(--inline-base) * 2);
  @media (width >= 1024px) {
    padding-block: calc(var(--inline-base) * 4);
  }
}
.process__branch__title {
  margin-bottom: calc(var(--inline-base) * 1);
  @media (width >= 1024px) {
    margin-bottom: calc(var(--inline-base) * 2);
  }
}
.process__branch__image {
  flex-shrink: 0;
  padding-block: calc(var(--inline-base) * 2);
  img {
    width: calc(var(--inline-base) * 15);
  }
  @media (width >= 1024px) {
    padding-block: calc(var(--inline-base) * 4);
    img {
      width: 200px;
    }
  }
}
.process__branch__icon {
  width: calc(var(--inline-base) * 13);
  height: calc(var(--inline-base) * 13);
  text-align: center;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.process__fix__content {
  position: absolute;
  top: calc(var(--inline-base) * 12);
  right: calc(var(--inline-base) * 3);
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 16);
    top: calc(var(--inline-base) * 55);
    left: calc(var(--inline-base) * 1);
    right: unset;
  }
  @media (width >= 1500px) {
    height: calc(100% + var(--block-base) + 200px);
    width: calc(var(--inline-base) * 25);
    top: calc(var(--inline-base) * 25);
    left: calc(var(--inline-base) * -27);
  }
}
.process__fix__line {
  display: none;
  @media (width >= 1500px) {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 1;
    &::before {
      content: "";
      width: 202px;
      height: 202px;
      background-color: var(--color-bg-white);
      position: absolute;
      display: block;
      border-radius: 50%;
      transform: translate(-1px, -1px);
    }
    &::after {
      content: "";
      width: calc(var(--inline-base) * 3);
      height: calc(100% + 2px);
      background-color: var(--color-primary);
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(calc(var(--inline-base) * -1.5));
    }
  }
}
.process__fix__icon {
  /*width: calc(var(--inline-base) * 15);*/
  width: 30.76vw;
  position: sticky;
  top: calc(50vh - 100px);
  z-index: 1;
  img {
    width: 100%;
  }
  @media (width >= 1024px) {
    position: unset;
    width: 100%;
    max-width: calc(var(--inline-base) * 25);
  }
  @media (width >= 1500px) {
    position: sticky;
    width: auto;
  }
}
.process__step {
  &.step3 {
    .process__branch {
      border: #EAE198 calc(var(--inline-base) * 1) solid;
      &::before {
        background-color: #E0D265;
        top: calc(var(--inline-base) * -8);
        left: 104px;
      }
    }
    .process__branch__icon {
      background-color: #E0D265;
      top: calc(var(--inline-base) * -11);
      left: 0;
    }
  }
  &.step4-1 {
    margin-bottom: calc(var(--inline-base) * 15);
    .process__branch {
      border: #CCCCCC calc(var(--inline-base) * 1) solid;
      &::before {
        content: "";
        background-color: #CCCCCC;
        top: calc(var(--inline-base) * -8);
        left: calc(50% - calc(var(--inline-base) * 1));
      }
    }
    .process__branch__icon {
      background-color: #6A6868;
      top: calc(var(--inline-base) * -11);
      left: 0;
    }
  }
  &.step4-2 {
    &::before {
      display: none;
    }
    .process__title {
      display: none;
    }
    .process__fix__content {
      top: calc(var(--inline-base) * -10);
    }
  }
  @media (width >= 1024px) {
    &.step1 {
      .process__step__inner {
        &::before {
          top: 300px;
          border-radius: calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 1.5) 0 0;
        }
      }
      .process__fix__line {
        &::before {
          display: none;
        }
        &::after {
          top: 150px;
        }
      }
    }
    &.step3 {
      .process__branch {
        &::before {
          content: "";
          width: calc(var(--inline-base) * 2);
          height: calc(var(--inline-base) * 8);
          top: calc(var(--inline-base) * -8);
          left: 104px;
          display: none;
        }
      }
      .process__branch__icon {
        top: -125px;
        left: 9.74%;
        border-radius: 50%;
        &::before {
          content:"";
          width: calc(var(--inline-base) * 2);
          height: calc(var(--inline-base) * 2);
          background-color: #EAE198;
          position: absolute;
          bottom: -13px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
        }
      }
    }
    &.step4-1 {
      margin-bottom: calc(var(--inline-base) * 13);
      .process__branch {
        &::before {
          content: "";
          width: calc(var(--inline-base) * 2);
          height: calc(var(--inline-base) * 12);
          top: calc(var(--inline-base) * -12);
          left: calc(50% - calc(var(--inline-base) * 1));
        }
      }
      .process__branch__icon {
        top: calc(var(--inline-base) * -22);
        left: calc(50% - calc(var(--inline-base) * 6.5));
        border-radius: 50%;
      }
      .process__fix__content {
        height: calc(100% + calc(var(--inline-base) * 13) + 200px);
      }
    }
    &.step4-2 {
      &::before {
        display: block;
      }
      .process__title {
        display: block;
      }
      .process__fix__content {
        top: calc(var(--inline-base) * 55);
      }
      @media (width >= 1500px) {
        .process__fix__content {
          top: 200px;
        }
      }
    }
    &.step6 {
      .process__fix__content {
        height: 200px;
      }
    }
  }
}
.process__end {
  padding-bottom: calc(var(--inline-base) * 23.5);
  position: relative;
  &::after {
    content: "";
    width: calc(var(--inline-base) * 2);
    height: 100%;
    background-image: linear-gradient(var(--color-primary) 90%, #f2f495);
    position: absolute;
    top: 0;
    left: calc(50% - calc(var(--inline-base) * 1));
    z-index: -1;
    border-radius: 0 0 calc(var(--inline-base) * 1) calc(var(--inline-base) * 1);
  }
  @media (width >= 1024px) {
    @media (width >= 1500px) {
      padding-top: calc(var(--inline-base) * 9);
    }
    padding-bottom: calc(var(--inline-base) * 35);
    @media (width >= 1500px) {
      &::before {
        content: "";
        width: calc(50% + calc(var(--inline-base) * 1.5) + calc(var(--inline-base) * 16));
        height: calc(var(--inline-base) * 3);
        background-color: var(--color-primary);
        position: absolute;
        top: 0;
        left: calc(var(--inline-base) * -16);
        border-radius: 0 calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 1.5);
      }
    }
    &::after {
      content: "";
      width: calc(var(--inline-base) * 3);
      height: 100%;
      left: calc(50% - calc(var(--inline-base) * 1.5));
      border-radius: calc(var(--inline-base) * 1.5);
    }
  }
}
.process__end__content {
  width: 100%;
  padding: calc(var(--inline-base) * 1) 0 calc(var(--inline-base) * 2);
  background-color: var(--color-bg-white);
  border: var(--color-primary) calc(var(--inline-base) * 1) solid;
  border-radius: calc(var(--inline-base) * 3);
  &:first-of-type {
    margin-bottom: calc(var(--inline-base) * 2);
  }
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 80);
    margin-inline: auto;
    padding: calc(var(--inline-base) * 3) 0 calc(var(--inline-base) * 4);
    border: var(--color-primary) calc(var(--inline-base) * 1.5) solid;
    border-radius: calc(var(--inline-base) * 4);
    &:first-of-type {
      margin-bottom: calc(var(--inline-base) * 10);
    }
  }
}
.process__end__image {
  margin-top: calc(var(--inline-base) * 1);
  margin-bottom: calc(var(--inline-base) * 1);
  display: flex;
  justify-content: center;
  gap: calc(var(--inline-base) * 3);
  img {
    width: calc(var(--inline-base) * 18);
  }
  @media (width >= 1024px) {
    margin-top: 0;
    margin-bottom: calc(var(--inline-base) * 4);
    gap: calc(var(--inline-base) * 4);
    img {
      width: calc(var(--inline-base) * 30.625);
    }
  }
}
.process__end__text {
  text-align: center;
}
.process__end__branch {
  width: calc(var(--inline-base) * 18);
  margin-left: auto;
  margin-right: calc(var(--inline-base) * 1);
  padding-top: calc(var(--inline-base) * 6);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--inline-base) * 3.25);
  &::before {
    content: "";
    width: calc(var(--inline-base) * 2);
    height: calc(var(--inline-base) * 24);
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    border-radius: 0 0 calc(var(--inline-base) * 1) calc(var(--inline-base) * 1);
    z-index: -1;
  }
  @media (width >= 1024px) {
    width: 42.18%;
    height: 274px;
    margin-right: 0;
    padding-top: 0;
    flex-direction: row;
    justify-content: end;
    align-items: end;
    gap: 10.55%;
    &::before {
      content: "";
      width: calc(var(--inline-base) * 3);
      height: 160px;
      left: 0;
      border-radius: unset;
    }
    &::after {
      content: "";
      width: 295px;
      height: calc(var(--inline-base) * 3);
      background-color: var(--color-primary);
      position: absolute;
      top: 160px;
      left: 0;
      border-radius: 0 calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 1.5) calc(var(--inline-base) * 1.5);
      z-index: -1;
    }
  }
}
.process__end__branch-image {
  margin-bottom: calc(var(--inline-base) * 1);
}
.process__end__branch-content1 {
  .process__end__branch-image {
    /*width: calc(var(--inline-base) * 13);*/
    width: 27.17vw;
    transform: scale(-1, 1);
    img {
      width: 100%;
    }
  }
  @media (width >= 1024px) {
    .process__end__branch-image {
      max-width: calc(var(--inline-base) * 19.5);
      width: 100%;
      margin-bottom: calc(var(--inline-base) * 2.75);
    }
  }
}
.process__end__branch-content2 {
  .process__end__branch-image {
    width: 37.17vw;
    img {
      width: 100%;
      transform-origin: bottom;
      transition: transform ease .3s;
    }
  }
  &:hover {
    .process__end__branch-image {
      img {
        transform: scale(1.05);
      }
    }
  }
  @media (width >= 1024px) {
    .process__end__branch-image {
      max-width: calc(var(--inline-base) * 27.5);
      width: 100%;
      margin-bottom: 0;
    }
  }
}
.process__end__branch-text {
  text-align: center;
}

/*==========================================================================
  process__after
  ==========================================================================*/
.process__after {
  margin-top: calc(var(--inline-base) * 15);
  background-color: var(--color-bg-beige);
  position: relative;
  z-index: 0;
  @media (width >= 1024px) {
    margin-top: 267px;
  }
}
.process__after::before {
  content: "";
  display: block;
  background-color: var(--color-bg-beige);
  width: 136%;
  height: calc(var(--inline-base) * 33);
  position: absolute;
  top: calc((var(--inline-base) * 5.5)* -1);
  left: -18%;
  border-radius: 50%;
  z-index: -1;
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 120);
    top: -155px;
  }
}
.process__after__top_image {
  width: 23.58vw;
  position: absolute;
  top: calc(var(--inline-base) * -11);
  left: 50%;
  margin-left: -11.79vw;
  @media (width >= 1024px) {
    width: 170px;
    margin-left: -85px;
    top: -235px;
  }
}
.process__after__top_image img {
  width: 100%;
  height: auto;
}
.process__after__content {
  padding: calc(var(--inline-base) * 13) calc(var(--inline-base) * 3) 0;
  background-image: url("/ja/portal/cycle/assets/images/process-after-bg-sp.svg");
  background-repeat: no-repeat;
  background-position: center 12.56vw;
  background-size: 108.71VW;
  @media (width >= 1024px) {
    padding:  calc(var(--inline-base) * 4.75) 0 0;
    background-image: url("/ja/portal/cycle/assets/images/process-after-bg.svg");
    background-position: center calc(var(--inline-base) * 12);
    background-size: calc(var(--inline-base) * 160);
  }
}
.process__after__content__inner {
  background-color: color-mix(in srgb, var(--color-bg-white), transparent 40%);
  border-radius: calc(var(--inline-base) * 2);
  text-align: center;
  padding: calc(var(--inline-base) * 3) 0;
  /*margin-top: calc(var(--inline-base) * -4);*/
  @media (width >= 1024px) {
    width:100%;
    max-width: calc(var(--inline-base) * 112.5);
    margin: 0 auto;
    padding: calc(var(--inline-base) * 6) 0;
  }
  img {
    width: 77.43vw;
    display: block;
    margin: calc(var(--inline-base) * 2) auto 0;
    @media (width >= 1024px) {
      width: calc(var(--inline-base) * 53);
      margin: calc(var(--inline-base) * 6) auto 0;
    }
  }
}


.process__after__content__title {
  position: relative;
  &.text-line {
    display: inline;
    &::before {
      width: calc(100% + calc(var(--inline-base) * 1));
      height: calc(var(--inline-base) * 2);
      bottom: 0;
      border-radius: calc(var(--inline-base) * 1);
      @media (width >= 1024px) {
        width: calc(100% + calc(var(--inline-base) * 10));
        height: calc(var(--inline-base) * 4);
        border-radius: calc(var(--inline-base) * 2);
      }
    }
  }
}
.process__after__content__title > span {
display: inline-block;
text-align: center;
}
.process__after__tsukaeru {
  text-align: center;
  padding: calc(var(--inline-base) * 2) 0 calc(var(--inline-base) * 8);
  @media (width >= 1024px) {
    padding: 0 0 calc(var(--inline-base) * 13);
    width:calc(var(--inline-base) * 102.25);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 0 auto;
  }
}
.process__after__tsukaeru-line {
  @media (width < 1024px) {
    &.animation-ele {
      opacity: 0;
      transform: translateY(calc(var(--inline-base) * 2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
  @media (width >= 1024px) {
    &.animation-ele {
      opacity: 0;
      transform: translateX(calc(var(--inline-base) * -2));
      transition: ease .5s;
      &.is-animation {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }
}

.process__after__tsukaeru-image {
  width: 40vw;
  height: auto;
  margin: calc(var(--inline-base) * -2.5) auto 0;
  @media (width >= 1024px) {
    width: calc(var(--inline-base) * 43);
    margin: calc(var(--inline-base) * -11) 0 0;
  }
}
.speechBubble {
  &.process__after-tail {
    margin-bottom: calc(var(--inline-base) * 5);
    &::after {
      border-width: calc(var(--inline-base) * 3) calc(var(--inline-base) * 2.5) 0 0;
      border-color: var(--color-primary) transparent transparent;
      translate: calc(-50% - 0.4px) 100%;
      bottom: 0;
      left: calc(var(--inline-base) * 28);
      transform: skew(-10deg);
    }
  }
  @media (width >= 1024px) {
    &.process__after-tail {
      margin-left: calc(var(--inline-base) * 4);
      &::after {
        border-width: calc(var(--inline-base) * 2) calc(var(--inline-base) * 5) calc(var(--inline-base) * 2) 0;
        border-color: transparent var(--color-primary) transparent transparent;
        translate: -100% -50%;
        bottom: unset;
        top: 50%;
        left: 0;
        transform: skew(10deg);
      }
    }
  }
}


/*==========================================================================
  related
  ==========================================================================*/
.related {
  margin: 0 calc(var(--inline-base) * 1);
  padding-bottom: calc(var(--inline-base) * 8);
  @media (width >= 1024px) {
    max-width: calc(var(--inline-base) * 160);
    margin: 0 auto 0;
    padding-bottom: calc(var(--inline-base) * 20);
  }
}
.related::before {
  content: "";
  display: block;
  background-color: var(--color-bg-white);
  width: 100%;
  height: calc(var(--inline-base) * 0.5);
  border-radius: calc(var(--inline-base) * 0.25);
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 1);
    border-radius: calc(var(--inline-base) * 0.5);
  }
}
.related__title {
  text-align: center;
  margin-top:  calc(var(--inline-base) * 13);
  margin-bottom:  calc(var(--inline-base) * 5);
}
.related__items {
  padding: 0 calc(var(--inline-base) * 4);
  @media (width >= 1024px) {
    padding: 0;
    width: calc(var(--inline-base) * 125);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--inline-base) * 4);
  }
}
.related__item {
  margin-bottom: calc(var(--inline-base) * 4);
  text-align: center;
  @media (width >= 1024px) {
    margin-bottom: 0;
  }
}
.related__item:last-child {
  margin-bottom: 0;
}
.related__item__image {
  width: 100%;
  margin-bottom: calc(var(--inline-base) * 3);
  border-radius: calc(var(--inline-base) * 2);
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

/*==========================================================================
  footer
  ==========================================================================*/
footer {
  background-color: var(--color-bg-beige);
}
.footer__copy {
  background-color: var(--color-primary);
  height: calc(var(--inline-base) * 8);
  display: flex;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 27);
  }
}
.footer__copy p {
  background-color: var(--color-primary-light);
  height: calc(var(--inline-base) * 4);
  width: 100%;
  border-radius: calc(var(--inline-base) * 1);
  margin: 0 calc(var(--inline-base) * 1);
  display: flex;
  justify-content: center;
  align-items: center;
  @media (width >= 1024px) {
    height: calc(var(--inline-base) * 8);
    max-width: calc(var(--inline-base) * 160);
    border-radius: calc(var(--inline-base) * 2);
    margin: 0;
  }
}