:root {
  --bg-color: #A0AEAF;
  --bg-section: #F5F5F5;
  --color-white: #FFF;
  --color-deepgreen: #1D5446;
  --color-darkgray: #4D5357;
}

body {
  color: var(--color-darkgray);
}

main {
  /* background-color: var(--bg-color); */
  /* background-image: url("../../assets/img/projects/background_pc.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  background-attachment: fixed; */
  position: relative;
}

main::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url(../../assets/img/projects/background_pc.jpg) no-repeat 50% 0 / cover;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  /* main {
    background-image: url("../../assets/img/projects/background_sp.jpg");
  } */

  main::before {
    background-image: url("../../assets/img/projects/background_sp.jpg");
  }
}

/****************************************/
/* common */
/****************************************/
.heading {
  color: var(--color-deepgreen);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 7px;
}

.heading__en {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.26785;
  letter-spacing: 0.06em;
}

.heading__ja {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.list__card {
  width: 473px;
}

.list__card.is-hidden {
  display: none;
}

.list__item {
  /* background-color: var(--color-white); */
  /* border-radius: 16px; */
  position: relative;
  padding-top: 13px;
  margin-bottom: 12px;
}

.list__new {
  width: 43.72px;
  height: 42.36px;
  background-image: url("../../assets/img/projects/new_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 18px;
}

.list__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* column-gap: 10px; */
  gap: 8px;
  position: absolute;
  top: 25px;
  left: 12px;
  padding-right: calc(13.10782% + 12px);
}

.list__tag--category {
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.21428;
  background-color: var(--color-darkgray);
  border-radius: 6px;
  padding: 6px 10px;
}

.list__tag--status.reviewing,
.list__tag--status.testing,
.list__tag--status.completed {
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.21428;
  background: linear-gradient(90deg, rgba(29, 180, 168, 1), rgba(29, 140, 180, 1));
  border-radius: 36px;
  padding: 6px 10px;
}

.list__tag--status.testing {
  background: linear-gradient(90deg, rgba(85, 165, 236, 1), rgba(53, 99, 190, 1));
}

.list__tag--status.completed {
  background: linear-gradient(90deg, rgba(237, 104, 160, 1), rgba(229, 49, 76, 1));
}

.list__image {
  width: 100%;
  aspect-ratio: 473 / 252;
  overflow: hidden;
  background-color: #CBD1D5;
  border-radius: 16px 16px 0 0;
}

.list__image img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
  object-position: center;
  /* border-radius: 16px 16px 0 0; */
}

.list__text {
  background-color: var(--color-white);
  border-radius: 0 0 16px 16px;
  padding: 18px 22px;
}

.list__heading {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.77777;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.list__sentence {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.list__bottom {
  display: flex;
  column-gap: 10px;
  margin-bottom: 14px;
}

.list__logo {
  width: 83px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--color-white);
  border-radius: 6px;
  overflow: hidden;
}

.list__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.list__words {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

.list__key {
  color: var(--color-deepgreen);
  font-size: 12px;
  line-height: 1.16666;
  background-color: #EDEDED;
  border-radius: 30px;
  padding: 5px 8px;
}

.list__button {
  display: block;
  width: fit-content;
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.71428;
  letter-spacing: 0.02em;
  background-color: var(--color-deepgreen);
  border-radius: 40px;
  padding: 9px 41.21px 9px 15px;
  margin-inline: auto;
  position: relative;
}

.list__button.to__list {
  padding-inline: 41.21px 15px;
  margin-top: 80px;
}

.list__button:visited {
  color: var(--color-white);
}

.list__button::before {
  content: "";
  width: 16.21px;
  height: 16.21px;
  background-image: url("../../assets/img/projects/arrow_icon.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.list__button.to__list::before {
  left: 15px;
  transform: translateY(-50%) scaleX(-1);
}

@media screen and (max-width: 767px) {
  .heading {
    row-gap: calc(100vw * 2 / 390);
  }

  .heading__en {
    font-size: calc(100vw * 42 / 390);
  }

  .heading__ja {
    font-size: calc(100vw * 18 / 390);
  }

  .list__item {
    padding-top: calc(100vw * 13 / 390);
    margin-bottom: calc(100vw * 12 / 390);
  }

  .list__new {
    width: calc(100vw * 41.78 / 390);
    height: calc(100vw * 42.36 / 390);
    right: calc(100vw * 13 / 390);
  }

  .list__tag {
    /* column-gap: calc(100vw * 10 / 390); */
    gap: calc(100vw * 8 / 390);
    top: calc(100vw * 25 / 390);
    left: calc(100vw * 12 / 390);
    padding-right: calc(13.10782% + calc(100vw * 12 / 390));
  }

  .list__tag--category {
    font-size: calc(100vw * 14 / 390);
    border-radius: calc(100vw * 6 / 390);
    padding: calc(100vw * 6 / 390) calc(100vw * 10 / 390);
  }

  .list__tag--status.reviewing,
  .list__tag--status.testing,
  .list__tag--status.completed {
    font-size: calc(100vw * 14 / 390);
    border-radius: calc(100vw * 36 / 390);
  }

  .list__image {
    border-radius: calc(100vw * 16 / 390) calc(100vw * 16 / 390) 0 0;
  }

  .list__text {
    border-radius: 0 0 calc(100vw * 16 / 390) calc(100vw * 16 / 390);
    padding: calc(100vw * 18 / 390) calc(100vw * 22 / 390);
  }

  .list__heading {
    font-size: calc(100vw * 18 / 390);
    margin-bottom: calc(100vw * 3 / 390);
  }

  .list__sentence {
    font-size: calc(100vw * 15 / 390);
  }

  .list__bottom {
    column-gap: calc(100vw * 10 / 390);
    margin-bottom: calc(100vw * 14 / 390);
  }

  .list__logo {
    width: calc(100vw * 83 / 390);
    height: calc(100vw * 52 / 390);
    border-radius: calc(100vw * 6 / 390);
  }

  .list__words {
    gap: calc(100vw * 4 / 390);
  }

  .list__key {
    font-size: calc(100vw * 12 / 390);
    border-radius: calc(100vw * 30 / 390);
    padding: calc(100vw * 5 / 390) calc(100vw * 8 / 390);
  }

  .list__button {
    font-size: calc(100vw * 14 / 390);
    border-radius: calc(100vw * 40 / 390);
    padding: calc(100vw * 9 / 390) calc(100vw * 41.21 / 390) calc(100vw * 9 / 390) calc(100vw * 15 / 390);
  }

  .list__button.to__list {
    padding-inline: calc(100vw * 41.21 / 390) calc(100vw * 15 / 390);
    margin-top: calc(100vw * 47 / 390);
  }

  .list__button::before {
    width: calc(100vw * 16.21 / 390);
    height: calc(100vw * 16.21 / 390);
    right: calc(100vw * 15 / 390);
  }
}

/****************************************/
/* hero */
/****************************************/
.hero {
  padding-block: 75px 88px;
}

.hero__inner {
  max-width: 1000px;
  margin-inline: auto;
  position: relative;
  padding-inline: 20px;
}

.hero__heading {
  color: var(--color-white);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  column-gap: 51px;
  width: fit-content;
  padding: 5.09px 20px;
  margin-bottom: 40px;
  /* background: linear-gradient(90deg, rgba(9, 189, 162, 1), rgba(14, 124, 168, 1)); */
  background-color: #214154;
}

.hero__heading--en {
  font-size: 22px;
  line-height: 1.26923;
  letter-spacing: 0.06em;
  position: relative;
}

.hero__heading--en::before {
  content: "";
  width: 1px;
  height: 43px;
  background-color: var(--color-white);
  position: absolute;
  top: 50%;
  left: -26px;
  transform: translateY(-50%);
}

.hero__heading--ja {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.31818;
  letter-spacing: 0.06em;
  margin-top: -3px;
}

.hero__lead {
  color: var(--color-white);
  font-size: 22px;
  font-weight: 500;
  /* line-height: 1.72727; */
  letter-spacing: 0.06em;
}

.hero__lead--margin {
  display: block;
  line-height: 1.72727;
}

.hero__lead--margin:not(:last-of-type) {
  margin-bottom: 10.96px;
}

.hero__count {
  width: 271px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 28px;
  /* background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.3),
      rgba(123, 200, 255, 0.8)) padding-box,

    linear-gradient(135deg,
      rgba(255, 255, 255, 0.3),
      rgba(123, 200, 255, 0.8)) border-box; */
  background:
    linear-gradient(135deg,
      rgba(143, 195, 31, 0.2),
      rgba(143, 195, 31, 1));
  border: 1.5px solid #8FC31F;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding-block: 17.5px 37.5px;
  position: absolute;
  right: 20px;
  bottom: 0;
}

.hero__count--number {
  font-size: 79px;
  font-weight: 600;
  line-height: 1.26582;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(9, 189, 162, 1), rgba(14, 124, 168, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-white);
}

.hero__count--text {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.hero__count--text.mini {
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

@media screen and (max-width: 1024px) {
  .hero__count {
    width: calc(100vw * 271 / 1024);
    border: calc(100vw * 1.5 / 1024) solid transparent;
    border-radius: calc(100vw * 28 / 1024);
    backdrop-filter: blur(calc(100vw * 5 / 1024));
    -webkit-backdrop-filter: blur(calc(100vw * 5 / 1024));
    padding-block: calc(100vw * 17.5 / 1024) calc(100vw * 37.5 / 1024);
    right: 20px;
  }

  .hero__count--number {
    font-size: calc(100vw * 79 / 1024);
  }

  .hero__count--text {
    font-size: calc(100vw * 20 / 1024);
  }

  .hero__count--text.mini {
    font-size: calc(100vw * 12 / 1024);
    margin-top: calc(100vw * 6 / 1024);
  }
}

@media screen and (max-width: 767px) {
  .hero {
    padding-block: calc(100vw * 27 / 390) calc(100vw * 50 / 390);
  }

  .hero__inner {
    padding-inline: calc(100vw * 24 / 390);
  }

  .hero__heading {
    flex-direction: column;
    align-items: flex-start;
    row-gap: calc(100vw * 6.5 / 390);
    background: transparent;
    padding: 0;
    margin-bottom: calc(100vw * 17 / 390);
  }

  .hero__heading--en {
    display: flex;
    align-items: center;
    width: fit-content;
    /* height: calc(100vw * 53 / 390); */
    font-size: calc(100vw * 22 / 390);
    line-height: calc(100vw * 28 / 390);
    /* background: linear-gradient(90deg, rgba(9, 189, 162, 1), rgba(14, 124, 168, 1)); */
    background-color: #214154;
    padding-inline: calc(100vw * 13 / 390);
  }

  .hero__heading--en::before {
    content: none;
  }

  .hero__heading--ja {
    display: flex;
    align-items: center;
    width: fit-content;
    height: calc(100vw * 50 / 390);
    font-size: calc(100vw * 36 / 390);
    /* background: linear-gradient(90deg, rgba(9, 189, 162, 1), rgba(14, 124, 168, 1)); */
    background-color: #214154;
    padding-inline: calc(100vw * 13 / 390);
    padding-bottom: calc(100vw * 3 / 390);
    margin-top: 0;
  }

  .hero__lead {
    font-size: calc(100vw * 18 / 390);
    /* line-height: 1.88888; */
    margin-bottom: calc(100vw * 17 / 390);
  }

  .hero__lead--margin {
    display: inline;
    line-height: 1.88888;
    margin-bottom: 0;
  }

  .hero__count {
    position: static;
    width: 100%;
    border: calc(100vw * 1.5 / 390) solid #8FC31F;
    border-radius: calc(100vw * 28 / 390);
    backdrop-filter: blur(calc(100vw * 5 / 390));
    -webkit-backdrop-filter: blur(calc(100vw * 5 / 390));
    padding-block: calc(100vw * 17.5 / 390) calc(100vw * 37.5 / 390);
  }

  .hero__count--number {
    font-size: calc(100vw * 79 / 390);
  }

  .hero__count--text {
    font-size: calc(100vw * 20 / 390);
  }

  .hero__count--text.mini {
    font-size: calc(100vw * 12 / 390);
    margin-top: calc(100vw * 6 / 390);
  }
}

/****************************************/
/* updates */
/****************************************/
.updates {
  padding-inline: 20px;
  margin-bottom: 20px;
}

.updates__inner {
  max-width: 1472px;
  background-color: var(--bg-section);
  border-radius: 40px;
  padding-block: 77px 48px;
  margin-inline: auto;
}

/* .list__wrapper {
  max-width: 1607px;
  left: 50%;
  transform: translateX(-50%);
} */

.updates .heading {
  margin-bottom: 38px;
}

.updates__slider {
  width: min(100vw, 1607px);
  left: 50%;
  transform: translateX(-50%);
}

.updates__slider:not(.swiper-initialized) {
  visibility: hidden;
}

.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto !important;
  position: relative;
}

.list__item {
  position: relative;
}

.slide-nav,
.pager-nav {
  cursor: pointer;
}

.slide-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  background: transparent;
  border: none;
  padding: 0;

  opacity: 0;
  pointer-events: none;
}

.swiper-slide-active .slide-nav {
  opacity: 1;
  pointer-events: auto;
}

.swiper-slide-active .slide-nav--prev {
  left: -74px;
}

.swiper-slide-active .slide-nav--next {
  right: -74px;
}

.slide-nav--prev::after,
.slide-nav--next::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.slide-nav--prev::after {
  background-image: url("../../assets/img/projects/prev_button.png");
}

.slide-nav--next::after {
  background-image: url("../../assets/img/projects/next_button.png");
}

.updates-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.pager-nav {
  width: 54px;
  height: 54px;
  background: transparent;
  border: none;
  padding: 0;
}

.pager-nav::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.pager-nav--prev::after {
  background-image: url("../../assets/img/projects/prev_button.png");
}

.pager-nav--next::after {
  background-image: url("../../assets/img/projects/next_button.png");
}

.swiper-pagination {
  position: static !important;
  padding-top: 38px;
}

.swiper-pagination-bullet {
  width: 13px !important;
  height: 13px !important;
  background: var(--color-darkgray) !important;
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  background: var(--color-darkgray) !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:not(:last-of-type),
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:not(:last-of-type) {
  margin-inline: 0 33px !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:last-of-type,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:last-of-type {
  margin-inline: 0 !important;
}

@media screen and (max-width: 767px) {
  .updates {
    padding-inline: 0;
    margin-bottom: 0;
  }

  .updates__inner {
    border-radius: calc(100vw * 34 / 390) calc(100vw * 34 / 390) 0 0;
    padding-block: calc(100vw * 60 / 390) calc(100vw * 72 / 390);
  }

  .updates .heading {
    margin-bottom: calc(100vw * 38 / 390);
  }

  .slide-nav {
    display: none;
  }

  .pager-nav {
    width: calc(100vw * 54 / 390);
    height: calc(100vw * 54 / 390);
  }

  .updates-controls {
    column-gap: 0;
    justify-content: space-between;
    padding-inline: calc(100vw * 24 / 390);
    margin-top: calc(100vw * 34 / 390);
  }

  .swiper-pagination {
    width: fit-content !important;
    padding-top: 0;
  }

  .swiper-pagination-bullet {
    width: calc(100vw * 13 / 390) !important;
    height: calc(100vw * 13 / 390) !important;
  }

  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:not(:last-of-type),
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:not(:last-of-type) {
    margin-inline: 0 calc(100vw * 33 / 390) !important;
  }
}

@media (min-width: 768px) {
  .updates-controls .pager-nav {
    display: none;
  }
}

/****************************************/
/* contents */
/****************************************/
.contents {
  background-color: var(--bg-section);
  padding-block: 52px 160px;
}

.contents__flow {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* margin-bottom: 52px; */
  background-color: var(--bg-section);
  padding-top: 30px;
}

.contents__flow-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.contents__flow--text {
  flex: 0 0 auto;
  margin-right: 70px;
}

*[data-font="outfit"].contents__flow--text {
  font-size: clamp(64px, 8vw, 116px);
  font-weight: 100 !important;
  line-height: 1.25862 !important;
  color: rgba(33, 65, 84, 0.2);
}

.contents__inner {
  max-width: 1000px;
  padding-inline: 20px;
  margin-inline: auto;
}

.contents .heading {
  margin-bottom: 60px;
}

.contents__wrapper {
  /* max-width: 1000px; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 27px;
}

.contents__category,
.contents__keywords {
  display: flex;
}

.contents__category {
  margin-bottom: 32px;
}

.contents__keywords {
  margin-bottom: 47px;
}

.contents__category--text,
.contents__keywords--text {
  width: 120px;
  color: var(--color-darkgray);
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  flex-shrink: 0;
}

.contents__category--list,
.contents__keywords--list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  padding-left: 29px;
}

.contents__category--list::before,
.contents__keywords--list::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #B3B8C7;
  position: absolute;
  left: 0;
  color: var(--color-darkgray);
}

.contents__category--link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--color-darkgray) !important;
  width: fit-content;
  height: 32px;
  border-radius: 6px;
  padding-inline: 10px;
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
}

.contents__keywords--link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--color-deepgreen) !important;
  width: fit-content;
  height: 32px;
  border-radius: 30px;
  padding-inline: 10px;
  background-color: #EDEDED;
  border: none;
  cursor: pointer;
}

/* .contents__category--link:visited {
  color: var(--color-darkgray);
} */

.category-choice {
  color: var(--color-white) !important;
  background-color: var(--color-darkgray);
}

.contents__category--link.is-active {
  color: var(--color-white) !important;
  background-color: var(--color-darkgray);
}

/* .keywords-choice {
  color: var(--color-white) !important;
  background-color: var(--color-deepgreen);
} */

.contents__keywords--link.is-active {
  color: var(--color-white) !important;
  background-color: var(--color-deepgreen);
}

.contents__button {
  display: block;
  width: fit-content;
  color: #214154 !important;
  font-size: 18px;
  line-height: 1.27777;
  border: 1px solid #214154;
  border-radius: 40px;
  padding: 10.5px 53.5px;
  margin: 60px auto 0;
  cursor: pointer;
  transition: opacity .3s linear;
}

.contents__button:hover {
  opacity: 0.6;
}

@media screen and (max-width: 1024px) {
  .list__card {
    width: calc(100vw * 473 / 1024);
  }
}

@media screen and (max-width: 767px) {
  .contents {
    padding-block: calc(100vw * 60 / 390) calc(100vw * 80 / 390);
  }

  .contents__inner {
    padding-inline: calc(100vw * 24 / 390);
  }

  .contents__flow {
    background-color: transparent;
    padding-top: 0;
    /* margin-bottom: calc(100vw * 60 / 390); */
  }

  /* .contents__flow-track {
    background-color: var(--bg-color);
  } */

  *[data-font="outfit"].contents__flow--text {
    font-size: calc(100vw * 116 / 390);
    color: rgba(255, 255, 255, 0.2);
  }

  .contents__flow--text {
    margin-right: calc(100vw * 50 / 390);
  }

  .contents .heading {
    margin-bottom: calc(100vw * 40 / 390);
  }

  .contents__category,
  .contents__keywords {
    flex-direction: column;
    row-gap: calc(100vw * 8 / 390);
  }

  .contents__category {
    margin-bottom: calc(100vw * 32 / 390);
  }

  .contents__keywords {
    margin-bottom: calc(100vw * 47 / 390);
  }

  .contents__category--list,
  .contents__keywords--list {
    gap: calc(100vw * 10 / 390);
    padding-left: 0;
  }

  .contents__category--list::before,
  .contents__keywords--list::before {
    content: none;
  }

  .contents__category--link {
    font-size: calc(100vw * 16 / 390);
    border-radius: calc(100vw * 6 / 390);
    padding-inline: calc(100vw * 7.5 / 390);
    height: calc(100vw * 32 / 390);
  }

  .contents__keywords--link {
    font-size: calc(100vw * 14 / 390);
    border-radius: calc(100vw * 30 / 390);
    padding-inline: calc(100vw * 10 / 390);
    height: calc(100vw * 32 / 390);
  }

  .contents__wrapper {
    row-gap: calc(100vw * 47 / 390);
  }

  .list__card {
    width: 100%;
  }

  .contents__button {
    margin-top: calc(100vw * 60 / 390);
  }
}

/****************************************/
/* bottom */
/****************************************/
.bottom {
  display: flex;
  align-items: center;
  width: 100%;
  height: 243px;
  background-image: url("../../assets/img/projects/bottom_background.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  white-space: nowrap;
}

/* .contents__flow {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 52px;
} */

.bottom__flow-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.bottom__flow--text {
  flex: 0 0 auto;
  margin-right: 70px;
}

*[data-font="outfit"].bottom__flow--text {
  font-size: clamp(64px, 8vw, 116px);
  font-weight: 100 !important;
  line-height: 1.25862 !important;
  color: rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 767px) {
  .bottom {
    height: calc(100vw * 243 / 390);
  }

  .bottom__flow--text {
    margin-right: calc(100vw * 70 / 390);
  }

  *[data-font="outfit"].bottom__flow--text {
    font-size: calc(100vw * 116 / 390);
  }
}

/**************************************** 詳細ページ ****************************************/

.detail {
  padding: 20px 20px 0 20px;
}

.detail__inner {
  max-width: 1472px;
  background-color: var(--bg-section);
  border-radius: 50px 50px 0 0;
  padding-block: 148px;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .detail {
    padding: calc(100vw * 15 / 390) calc(100vw * 15 / 390) 0 calc(100vw * 15 / 390);
  }

  .detail__inner {
    border-radius: calc(100vw * 20 / 390);
    padding-block: calc(100vw * 22 / 390) calc(100vw * 35 / 390);
    margin-bottom: calc(100vw *24 / 390);
  }
}

/****************************************/
/* top */
/****************************************/

.top {
  max-width: 869px;
  padding-inline: 20px;
  margin: 0 auto 80px;
}

.top__date {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.top__heading {
  font-size: 34px;
  font-weight: 500;
  line-height: 0.94117;
  letter-spacing: 0.02em;
  margin-bottom: 35px;
}

.top__text {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 35px;
}

.top__tag {
  display: flex;
  flex-wrap: wrap;
  /* column-gap: 20px; */
  gap: 8px;
  margin-bottom: 14px;
}

.top__tag--category {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--color-white) !important;
  width: fit-content;
  height: 32px;
  border-radius: 6px;
  padding-inline: 10px;
  background-color: var(--color-darkgray);
}

.top__tag--status.reviewing,
.top__tag--status.testing,
.top__tag--status.completed {
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.21428;
  background: linear-gradient(90deg, rgba(29, 180, 168, 1), rgba(29, 140, 180, 1));
  border-radius: 36px;
  padding: 6px 10px;
}

.top__tag--status.testing {
  background: linear-gradient(90deg, rgba(85, 165, 236, 1), rgba(53, 99, 190, 1));
}

.top__tag--status.completed {
  background: linear-gradient(90deg, rgba(237, 104, 160, 1), rgba(229, 49, 76, 1));
}

.top__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.top__keywords--item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--color-deepgreen) !important;
  width: fit-content;
  height: 32px;
  border-radius: 30px;
  padding-inline: 10px;
  background-color: #EDEDED;
}

.top__image {
  position: relative;
  margin-bottom: 24px;
}

.top__new {
  width: 64px;
  height: 64px;
  background-image: url("../../assets/img/projects/new_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -31px;
  right: 18px;
}

.top__image--inner {
  width: 100%;
  height: 100%;
  aspect-ratio: 869 / 464;
  border-radius: 20px;
  background-color: #CBD1D5;
  overflow: hidden;
}

.top__image--inner img {
  width: 100%;
  height: 100%;
  /* height: auto; */
  /* border-radius: 20px; */
  object-fit: contain;
  object-position: center;
}

.top__overview {
  color: var(--color-deepgreen);
  font-size: 14px;
  line-height: 1.71428;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.top__info {
  display: flex;
  column-gap: 22px;
}

.top__logo {
  width: 118px;
  height: 74px;
  flex-shrink: 0;
}

.top__logo a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  border-radius: 6px;
  overflow: hidden;
}

.top__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.top__base--title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7142;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.top__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 6px;
}

.top__list--item {
  display: flex;
  /* align-items: center; */
  align-items: flex-start;
  column-gap: 10px;
}

.top__list--item dt {
  font-size: 14px;
  line-height: 1.21428;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-darkgray);
  border-radius: 4px;
  padding: 6px 10px;
  flex-shrink: 0;
}

.top__list--item dd {
  font-size: 16px;
  line-height: 1.1875;
  letter-spacing: 0.02em;
  padding-top: 6px;
}

@media screen and (max-width: 767px) {
  .top {
    padding-inline: calc(100vw * 20 / 390);
    margin-bottom: calc(100vw * 47 / 390);
  }

  .top__date {
    font-size: calc(100vw * 12 / 390);
    margin-bottom: calc(100vw * 2 / 390);
    ;
  }

  .top__heading {
    font-size: calc(100vw * 26 / 390);
    line-height: 1.69230;
    margin-bottom: calc(100vw * 6 / 390);
  }

  .top__text {
    font-size: calc(100vw * 18 / 390);
    line-height: 1.44444;
    margin-bottom: calc(100vw * 14 / 390);
  }

  .top__tag {
    /* column-gap: calc(100vw * 20 / 390); */
    gap: calc(100vw * 8 / 390);
    margin-bottom: calc(100vw * 14 / 390);
  }

  .top__tag--category {
    font-size: calc(100vw * 16 / 390);
    height: calc(100vw * 32 / 390);
    border-radius: calc(100vw * 6 / 390);
    padding-inline: calc(100vw * 10 / 390);
  }

  .top__tag--status.reviewing,
  .top__tag--status.testing,
  .top__tag--status.completed {
    font-size: calc(100vw * 16 / 390);
    padding: calc(100vw * 6 / 390) calc(100vw * 10 / 390);
  }

  .top__keywords {
    gap: calc(100vw * 6 / 390);
    margin-bottom: calc(100vw * 38 / 390);
  }

  .top__keywords--item {
    height: calc(100vw * 32 / 390);
    font-size: calc(100vw * 14 / 390);
    padding-inline: calc(100vw * 10 / 390);
  }

  .top__image {
    margin-bottom: calc(100vw * 17 / 390);
  }

  .top__new {
    width: calc(100vw * 42 / 390);
    height: calc(100vw * 42 / 390);
    top: calc(100vw * -21 / 390);
    right: calc(100vw * 20 / 390);
  }

  .top__image--inner {
    aspect-ratio: 320 / 170;
    border-radius: calc(100vw * 20 / 390);
  }

  .top__overview {
    font-size: calc(100vw * 14 / 390);
    margin-bottom: calc(100vw * 17 / 390);
  }

  .top__info {
    flex-direction: column;
    row-gap: calc(100vw * 6 / 390);
  }

  .top__logo {
    width: calc(100vw * 118 / 390);
    height: calc(100vw * 74 / 390);
  }

  .top__logo a {
    border-radius: calc(100vw * 6 / 390);
  }

  .top__base--title {
    font-size: calc(100vw * 14 / 390);
    margin-bottom: calc(100vw * 6 / 390);
  }

  .top__list {
    row-gap: calc(100vw * 6 / 390);
  }

  .top__list--item {
    column-gap: calc(100vw * 10 / 390);
  }

  .top__list--item dt {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(100vw * 14 / 390);
    width: calc(100vw * 93 / 390);
    border-radius: calc(100vw * 4 / 390);
    padding: calc(100vw * 6 / 390) 0;
    flex-shrink: 0;
  }

  .top__list--item dd {
    font-size: calc(100vw * 16 / 390);
    padding-top: calc(100vw * 6 / 390);
  }
}

/****************************************/
/* editor */
/****************************************/

.editor {
  max-width: 869px;
  padding-inline: 20px;
  margin: 0 auto 80px;
}

.editor h1,
.editor h2,
.editor h3,
.editor h4,
.editor h5,
.editor h6 {
  font-weight: 500;
  font-weight: 500;
  line-height: 1.45454;
  margin-bottom: 20px;
}

.editor h3 {
  font-size: 22px;
  /* font-weight: 500;
  line-height: 1.45454;
  margin-bottom: 20px; */
}

.editor p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 34px;
}

.editor img {
  width: 77.6754%;
  height: auto;
  display: block;
  margin-inline: auto;
  margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .editor {
    padding-inline: calc(100vw * 20 / 390);
    margin-bottom: calc(100vw * 140 / 390);
  }

  .editor h1,
  .editor h2,
  .editor h3,
  .editor h4,
  .editor h5,
  .editor h6 {
    margin-bottom: calc(100vw * 20 / 390);
  }

  .editor h3 {
    font-size: calc(100vw * 22 / 390);
    /* margin-bottom: calc(100vw * 20 / 390); */
  }

  .editor p {
    font-size: calc(100vw * 16 / 390);
    margin-bottom: calc(100vw * 26 / 390);
  }

  .editor img {
    width: 100%;
    margin-bottom: calc(100vw * 60 / 390);
  }
}

/****************************************/
/* member */
/****************************************/

.member {
  max-width: 869px;
  padding-inline: 20px;
  margin-inline: auto;
}

.member__heading {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
  margin-bottom: 35px;
}

.member__heading--en {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.26785;
  letter-spacing: 0.06em;
}

.member__heading--ja {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.member__list {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.member__list.sp {
  display: none;
}

.member__item {
  display: flex;
  column-gap: 15px;
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 16px;
}

.member__image {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden;
  flex-shrink: 0;
}

.member__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* border-radius: 16px; */
}

.member__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.57142;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.member__title {
  color: #BBBEC1;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.83333;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.member__profile {
  font-size: 14px;
  line-height: 1.57142;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 767px) {
  .member {
    padding-inline: calc(100vw * 20 / 390);
  }

  .member__heading {
    row-gap: calc(100vw * 7 / 390);
    margin-bottom: calc(100vw * 35 / 390);
  }

  .member__heading--en {
    font-size: calc(100vw * 42 / 390);
  }

  .member__heading--ja {
    font-size: calc(100vw * 18 / 390);
  }

  .member__list {
    row-gap: calc(100vw * 10 / 390);
  }

  .member__list.pc {
    display: none;
  }

  .member__list.sp {
    display: flex;
  }

  .member__item {
    flex-direction: column;
    row-gap: calc(100vw * 15 / 390);
    padding: calc(100vw * 20 / 390);
    border-radius: calc(100vw * 16 / 390);
  }

  .member__half {
    display: flex;
    column-gap: calc(100vw * 15 / 390);
  }

  .member__image {
    width: calc(100vw * 140 / 390);
    height: calc(100vw * 140 / 390);
    border-radius: calc(100vw * 12 / 390);
  }

  .member__name {
    font-size: calc(100vw * 14 / 390);
    margin-bottom: calc(100vw * 6 / 390);
  }

  .member__title {
    font-size: calc(100vw * 12 / 390);
  }

  .member__profile {
    font-size: calc(100vw * 14 / 390);
  }
}

/****************************************/
/* bottom */
/****************************************/

.detail .bottom {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}