html,
body {
  background: #e6e6e6;
}

.top-mv {
  display: grid;
  grid-template-columns: calc(730 / var(--base-width) * var(--inner-width) * 1px) calc(490 / var(--base-width) * var(--inner-width) * 1px);
  grid-template-rows: calc(455 / var(--base-width) * var(--inner-width) * 1px) calc(176 / var(--base-width) * var(--inner-width) * 1px);
  gap: calc(20 / var(--base-width) * var(--inner-width) * 1px);
  place-content: stretch stretch;
  margin: 0 calc(20 / var(--base-width) * var(--inner-width) * 1px) calc(20 / var(--base-width) * var(--inner-width) * 1px);
  position: relative;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv {
    margin-top: calc(-13 / var(--base-width) * var(--inner-width) * 1px);
    margin: calc(-13 / var(--base-width) * var(--inner-width) * 1px) 0 calc(20 / var(--base-width) * var(--inner-width) * 1px);
    padding: 0 calc(20 / var(--base-width) * var(--inner-width) * 1px);
    display: block;
    overflow: hidden;
  }
}

.top-mv-1,
.top-mv-2,
.top-mv-3 {
  position: relative;
  width: 100%;
  height: 100%;
}

.top-mv-1__base,
.top-mv-2__base,
.top-mv-3__base {
  position: absolute;
  inset: 0;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: transparent;
  background: #002d72;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px + 2px);
  -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  transition-property: -webkit-clip-path;
  transition-property: clip-path;
  transition-property: clip-path, -webkit-clip-path;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
.step-1 .top-mv-1__base,
.step-1 .top-mv-2__base,
.step-1 .top-mv-3__base {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.top-mv-1__bg,
.top-mv-2__bg,
.top-mv-3__bg {
  position: absolute;
  inset: 0;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: transparent;
}
.top-mv-1__bg img,
.top-mv-2__bg img,
.top-mv-3__bg img {
  position: relative;
  transition-property: -webkit-clip-path;
  transition-property: clip-path;
  transition-property: clip-path, -webkit-clip-path;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.step-2 .top-mv-1__bg img,
.step-2 .top-mv-2__bg img,
.step-2 .top-mv-3__bg img {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.step-3 .top-mv-1__bg img,
.step-3 .top-mv-2__bg img,
.step-3 .top-mv-3__bg img {
  -webkit-clip-path: none;
          clip-path: none;
}

.top-mv-3__base {
  will-change: transform, opacity;
}

.top-mv-3__bg {
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.top-mv-3__cover {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

@media (hover: hover) {
  .top-mv-3:hover .top-mv-3__bg {
    transform: scale(1.1);
  }
  .top-mv-3:hover .top-mv-3__cover {
    opacity: 0.2;
  }
}

.top-mv-1__image,
.top-mv-2__image {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.top-mv-1__image img,
.top-mv-2__image img {
  transform: scale(1.3) translate(0, 10%);
  transform-origin: center center;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1);
}
.step-3 .top-mv-1__image img,
.step-3 .top-mv-2__image img {
  transform: scale(1.3) translate(0, 0);
  opacity: 1;
}

.step-4 .top-mv-1__image img,
.step-4 .top-mv-2__image img {
  transform: scale(1);
}

.top-mv-1 {
  grid-column: 1/2;
  grid-row: 1/3;
  z-index: 2;
  will-change: transform, opacity;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1 {
    width: auto;
    height: calc(350 / var(--base-width) * var(--inner-width) * 1px);
    margin-bottom: calc(13 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-1__bg {
  position: absolute;
  inset: 0;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__bg {
    border-radius: calc(8 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-1__image {
  left: 0;
  top: calc(-116 / var(--base-width) * var(--inner-width) * 1px);
  bottom: 0;
  width: calc(980 / var(--base-width) * var(--inner-width) * 1px);
  -webkit-mask: url(../img/top/mv-1-image-mask.svg) no-repeat left top/contain;
          mask: url(../img/top/mv-1-image-mask.svg) no-repeat left top/contain;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__image {
    top: calc(-109 / var(--base-width) * var(--inner-width) * 1px);
    left: calc(-20 / var(--base-width) * var(--inner-width) * 1px);
    right: calc(-20 / var(--base-width) * var(--inner-width) * 1px);
    width: auto;
    height: calc(809 / var(--base-width) * var(--inner-width) * 1px);
    overflow: hidden;
    -webkit-mask-image: url(../img/top/mv-1-image-mask-sp.svg);
            mask-image: url(../img/top/mv-1-image-mask-sp.svg);
  }
}
.top-mv-1__image img {
  position: absolute;
  left: calc(172 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(26 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(588 / var(--base-width) * var(--inner-width) * 1px);
  max-width: unset;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__image img {
    left: calc(22 / var(--base-width) * var(--inner-width) * 1px);
    top: calc(55 / var(--base-width) * var(--inner-width) * 1px);
    width: calc(343 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-1__people {
  position: absolute;
  left: calc(-26 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(276 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(370 / var(--base-width) * var(--inner-width) * 1px);
  bottom: 0;
  overflow: hidden;
  -webkit-mask: url(../img/top/mv-1-people-mask.svg) no-repeat left top/100% auto;
          mask: url(../img/top/mv-1-people-mask.svg) no-repeat left top/100% auto;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__people {
    left: calc(-16 / var(--base-width) * var(--inner-width) * 1px);
    top: calc(397 / var(--base-width) * var(--inner-width) * 1px);
    bottom: calc(-278 / var(--base-width) * var(--inner-width) * 1px);
    width: calc(234 / var(--base-width) * var(--inner-width) * 1px);
    -webkit-mask-image: url(../img/top/mv-1-people-mask-sp.svg);
            mask-image: url(../img/top/mv-1-people-mask-sp.svg);
    -webkit-mask-position: left bottom;
            mask-position: left bottom;
  }
}
.top-mv-1__people img {
  opacity: 0;
  transform: translate(0, 20%);
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.3, 0.8, 0.4, 1);
}
.step-5 .top-mv-1__people img {
  opacity: 1;
  transform: translate(0, 0);
}

.top-mv-1__title {
  position: absolute;
  left: calc(44 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(52 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(846 / var(--base-width) * var(--inner-width) * 1px);
  filter: drop-shadow(0 0 calc(11 / var(--base-width) * var(--inner-width) * 1px) rgba(0, 0, 0, 0.4));
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__title {
    left: calc(12 / var(--base-width) * var(--inner-width) * 1px);
    top: calc(31 / var(--base-width) * var(--inner-width) * 1px);
    width: calc(624 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.top-mv-1__title svg {
  width: 100%;
}
.top-mv-1__title path {
  fill: #fff;
  transform: translate(calc(423 / var(--base-width) * var(--inner-width) * 1px), 0);
  opacity: 0;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-1__title path {
    transform: translate(calc(312 / var(--base-width) * var(--inner-width) * 1px), 0);
  }
}
.top-mv-1__title path {
  transition-property: transform, opacity;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
}
.top-mv-1__title path.is-active {
  transform: translate(0, 0);
  opacity: 1;
}

.top-mv-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-2 {
    height: auto;
    margin-bottom: calc(12 / var(--base-width) * var(--inner-width) * 1px);
    padding-top: calc(296 / var(--base-width) * var(--inner-width) * 1px);
  }
}

@media only screen and (max-width: 47.9375em) {
  .top-mv-2__base {
    bottom: auto;
    height: calc(265 / var(--base-width) * var(--inner-width) * 1px);
    border-radius: calc(8 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-2__bg {
  position: absolute;
  inset: 0;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-2__bg {
    bottom: auto;
    height: calc(265 / var(--base-width) * var(--inner-width) * 1px);
    border-radius: calc(8 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-2__image {
  left: 0;
  top: calc(-116 / var(--base-width) * var(--inner-width) * 1px);
  bottom: 0;
  width: 100%;
  border-radius: 0 0 calc(40 / var(--base-width) * var(--inner-width) * 1px) calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-2__image {
    top: 0;
    bottom: auto;
    height: calc(265 / var(--base-width) * var(--inner-width) * 1px);
    border-radius: calc(8 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.top-mv-2__image img {
  position: absolute;
  left: calc(-20 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(74 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(570 / var(--base-width) * var(--inner-width) * 1px);
  max-width: unset;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-2__image img {
    left: calc(40 / var(--base-width) * var(--inner-width) * 1px);
    top: calc(-2 / var(--base-width) * var(--inner-width) * 1px);
    width: calc(355 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.top-mv-2__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: calc(10 / var(--base-width) * var(--inner-width) * 1px);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-2__buttons {
    width: 100%;
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
}
.step-6 .top-mv-2__buttons {
  opacity: 1;
  pointer-events: all;
}

.top-mv-button {
  position: relative;
  width: calc(229 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(70 / var(--base-width) * var(--inner-width) * 1px);
  border-radius: calc(70 / var(--base-width) * var(--inner-width) * 1px);
  padding: 0 calc(24 / var(--base-width) * var(--inner-width) * 1px);
  background: #fff;
  border: 1px solid #0089c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  color: #0089c8;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-button {
    width: auto;
  }
}
.top-mv-button .arrow {
  border-width: 1px;
}
@media (hover: hover) {
  .top-mv-button:hover .arrow {
    background: #0089c8;
    border-color: #0089c8;
    color: #fff;
  }
}

.top-mv-3 {
  grid-column: 2/3;
  grid-row: 2/3;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-3 {
    height: calc(221 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.top-mv-3 .item__title {
  font-size: calc(24 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .top-mv-3 .item__title {
    margin-top: calc(8 / var(--base-width) * var(--inner-width) * 1px);
    line-height: 1;
  }
}
@media only screen and (max-width: 47.9375em) and (max-width: 47.9375em) {
  .top-mv-3 .item__title span {
    font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.top-mv-3 .item__tags,
.top-mv-3 .item__label,
.top-mv-3 .item__title,
.top-mv-3 .arrow {
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.top-mv-3.step-6 .item__tags,
.top-mv-3.step-6 .item__label,
.top-mv-3.step-6 .item__title,
.top-mv-3.step-6 .arrow {
  opacity: 1;
  pointer-events: all;
}

.message__bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #002d72;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.message__window {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: 0 calc(40 / var(--base-width) * var(--inner-width) * 1px);
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  gap: calc(40 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .message__window {
    padding: calc(36 / var(--base-width) * var(--inner-width) * 1px);
    gap: 0;
    overflow: auto;
    justify-content: flex-start;
  }
}

.message__title {
  position: absolute;
  left: calc(64 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(167 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(423 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .message__title {
    flex-shrink: 0;
    align-self: center;
    position: static;
    width: calc(273 / var(--base-width) * var(--inner-width) * 1px);
    margin-bottom: calc(32 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.message__title path {
  fill: #fff;
}

.message__text {
  width: calc(561 / var(--base-width) * var(--inner-width) * 1px);
  color: #fff;
  font-weight: 700;
  font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 1.7;
  letter-spacing: -0.04em;
}
@media only screen and (max-width: 47.9375em) {
  .message__text {
    flex-shrink: 0;
    font-size: calc(14 / var(--base-width) * var(--inner-width) * 1px);
    width: auto;
    text-align: right;
    margin-bottom: calc(62 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.message__text p + p {
  margin-top: 1.7em;
}

.message__close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(146 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(70 / var(--base-width) * var(--inner-width) * 1px);
  border-radius: calc(70 / var(--base-width) * var(--inner-width) * 1px);
  border: 1px solid #fff;
  color: #fff;
  padding: 0 calc(24 / var(--base-width) * var(--inner-width) * 1px);
  font-weight: 700;
  font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .message__close {
    flex-shrink: 0;
  }
}
.message__close .arrow {
  border-width: 1px;
}

.items {
  position: relative;
  display: grid;
  grid-template-columns: calc(342 / var(--base-width) * var(--inner-width) * 1px) auto;
  gap: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(1023 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .items {
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: calc(20 / var(--base-width) * var(--inner-width) * 1px);
    margin-bottom: 0;
  }
}

.items__bg {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}
@media only screen and (max-width: 47.9375em) {
  .items__bg {
    position: static;
  }
}
.items__bg img,
.items__bg picture {
  width: 100%;
  height: auto;
}

.items__bg--1 {
  right: calc(15 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(12 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(210 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .items__bg--1 {
    display: none;
  }
}

.items__bg--2 {
  left: calc(5 / var(--base-width) * var(--inner-width) * 1px);
  bottom: calc(-53 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(597 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .items__bg--2 {
    order: 999;
    margin-left: calc(-20 / var(--base-width) * var(--inner-width) * 1px);
    margin-top: calc(-20 / var(--base-width) * var(--inner-width) * 1px);
    width: calc(390 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(238 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto auto;
  padding: calc(20 / var(--base-width) * var(--inner-width) * 1px);
  color: #fff;
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
  z-index: 1;
}
@media only screen and (max-width: 47.9375em) {
  .item {
    position: relative;
  }
}
.item .arrow {
  position: relative;
  z-index: 1;
  grid-column: 2/3;
  grid-row: 3/4;
  border-width: 1px;
  border-color: #fff;
  background: rgb(255, 255, 255);
  color: #0089c8;
  align-self: end;
  justify-self: end;
  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .item .arrow {
    background: rgb(255, 255, 255);
    color: #0089c8;
  }
}
@media (hover: hover) {
  .item:hover .arrow {
    background: rgba(255, 255, 255, 0);
    color: #fff;
  }
}

.item__bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transform-origin: center center;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: #fff;
}
.item__bg img {
  position: relative;
  will-change: opacity;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

@media (hover: hover) {
  .item:hover .item__bg {
    transform: scale(1.1);
  }
  .item:hover .item__bg img {
    opacity: 0.8;
  }
}

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

.item__label {
  position: relative;
  z-index: 1;
  grid-column: 1/2;
  grid-row: 2/3;
  align-self: end;
  font-family: "Montserrat", sans-serif;
  font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  font-weight: 400;
  line-height: 1.3;
}

.item__title {
  position: relative;
  z-index: 1;
  grid-column: 1/2;
  grid-row: 3/4;
  align-self: end;
  font-weight: 700;
  font-size: calc(28 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 1.4;
}

.item--special {
  left: 0;
  top: 0;
  width: calc(342 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(600 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .item--special {
    left: auto;
    top: auto;
    width: auto;
    height: calc(450 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--women {
  left: calc(358 / var(--base-width) * var(--inner-width) * 1px);
  top: 0;
  width: calc(300 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(275 / var(--base-width) * var(--inner-width) * 1px);
  background-color: #d58f7c;
}
@media only screen and (max-width: 47.9375em) {
  .item--women {
    left: auto;
    top: auto;
    width: auto;
    height: calc(190 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--environment {
  left: calc(674 / var(--base-width) * var(--inner-width) * 1px);
  top: 0;
  width: calc(300 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(275 / var(--base-width) * var(--inner-width) * 1px);
  background-color: #dfb345;
}
@media only screen and (max-width: 47.9375em) {
  .item--environment {
    left: auto;
    top: auto;
    width: auto;
    height: calc(190 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--business {
  left: calc(358 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(291 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(408 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(200 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .item--business {
    left: auto;
    top: auto;
    width: auto;
    height: calc(200 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--works {
  left: calc(358 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(507 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(408 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(262 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .item--works {
    left: auto;
    top: auto;
    width: auto;
    height: calc(262 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--people-index {
  left: calc(782 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(291 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(458 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(272 / var(--base-width) * var(--inner-width) * 1px);
  -webkit-mask: url(../img/top/item-people-index-mask.svg) no-repeat center center/cover;
          mask: url(../img/top/item-people-index-mask.svg) no-repeat center center/cover;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 52.4017467249% 100%, 52.4017467249% 88.2352941176%, 43.6681222707% 73.5294117647%, 0% 73.5294117647%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 52.4017467249% 100%, 52.4017467249% 88.2352941176%, 43.6681222707% 73.5294117647%, 0% 73.5294117647%);
  z-index: 3;
}
@media only screen and (max-width: 47.9375em) {
  .item--people-index {
    left: auto;
    top: auto;
    width: auto;
    height: calc(290 / var(--base-width) * var(--inner-width) * 1px);
    -webkit-mask: url(../img/top/item-people-index-mask__sp.svg) no-repeat center center/cover;
            mask: url(../img/top/item-people-index-mask__sp.svg) no-repeat center center/cover;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 55.7142857143% 100%, 55.7142857143% 86.2068965517%, 41.4285714286% 68.9655172414%, 0% 68.9655172414%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 55.7142857143% 100%, 55.7142857143% 86.2068965517%, 41.4285714286% 68.9655172414%, 0% 68.9655172414%);
  }
}
.item--people-index .item__title {
  margin-bottom: calc(72 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .item--people-index .item__title {
    margin-bottom: calc(83 / var(--base-width) * var(--inner-width) * 1px);
  }
}
@media only screen and (max-width: 47.9375em) {
  .item--people-index .arrow {
    margin-bottom: calc(0 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--people {
  display: block;
  z-index: 2;
  left: calc(782 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(507 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(458 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(300 / var(--base-width) * var(--inner-width) * 1px);
  padding: 0;
}
@media only screen and (max-width: 47.9375em) {
  .item--people {
    left: auto;
    top: auto;
    width: auto;
    border-bottom-right-radius: 0;
    margin-top: calc(-91 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.item--crosstalk {
  left: calc(782 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(823 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(458 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(200 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .item--crosstalk {
    left: auto;
    top: auto;
    width: auto;
  }
}

.item--recruit {
  left: calc(504 / var(--base-width) * var(--inner-width) * 1px);
  top: calc(785 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(262 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(238 / var(--base-width) * var(--inner-width) * 1px);
  background-color: #7dd57c;
}
@media only screen and (max-width: 47.9375em) {
  .item--recruit {
    left: auto;
    top: auto;
    width: auto;
    height: calc(190 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.people {
  width: calc(458 / var(--base-width) * var(--inner-width) * 1px);
  overflow: hidden;
}
@media only screen and (max-width: 47.9375em) {
  .people {
    width: 100%;
  }
}
.people .swiper {
  width: calc(224 / var(--base-width) * var(--inner-width) * 1px);
  margin: 0;
  overflow: visible;
}
@media only screen and (max-width: 47.9375em) {
  .people .swiper {
    width: calc(176 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.people .swiper-slide {
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transform-origin: left top;
}
.people .swiper-slide-next {
  transform: translate(calc(16 / var(--base-width) * var(--inner-width) * 1px), calc(72 / var(--base-width) * var(--inner-width) * 1px)) scale(46.6666666667%);
}
@media only screen and (max-width: 47.9375em) {
  .people .swiper-slide-next {
    transform: translate(calc(16 / var(--base-width) * var(--inner-width) * 1px), calc(70 / var(--base-width) * var(--inner-width) * 1px)) scale(59.4594594595%);
  }
}
.people .swiper-slide-next + .swiper-slide {
  transform: translate(calc(-94 / var(--base-width) * var(--inner-width) * 1px), calc(72 / var(--base-width) * var(--inner-width) * 1px)) scale(46.6666666667%);
}
@media only screen and (max-width: 47.9375em) {
  .people .swiper-slide-next + .swiper-slide {
    transform: translate(calc(-77 / var(--base-width) * var(--inner-width) * 1px), calc(70 / var(--base-width) * var(--inner-width) * 1px)) scale(59.4594594595%);
  }
}
.people .swiper-slide-next + .swiper-slide + .swiper-slide {
  transform: translate(calc(-204 / var(--base-width) * var(--inner-width) * 1px), calc(72 / var(--base-width) * var(--inner-width) * 1px)) scale(46.6666666667%);
}
@media only screen and (max-width: 47.9375em) {
  .people .swiper-slide-next + .swiper-slide + .swiper-slide {
    transform: translate(calc(-170 / var(--base-width) * var(--inner-width) * 1px), calc(70 / var(--base-width) * var(--inner-width) * 1px)) scale(59.4594594595%);
  }
}

.people__item {
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  width: calc(224 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(300 / var(--base-width) * var(--inner-width) * 1px);
  border-radius: calc(40 / var(--base-width) * var(--inner-width) * 1px);
  padding: calc(20 / var(--base-width) * var(--inner-width) * 1px) calc(0 / var(--base-width) * var(--inner-width) * 1px);
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 47.9375em) {
  .people__item {
    width: calc(126 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(262 / var(--base-width) * var(--inner-width) * 1px);
    padding: calc(16 / var(--base-width) * var(--inner-width) * 1px) calc(0 / var(--base-width) * var(--inner-width) * 1px) calc(20 / var(--base-width) * var(--inner-width) * 1px);
    margin-top: calc(34 / var(--base-width) * var(--inner-width) * 1px);
    transition-property: width, height, margin-top;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
}
@media only screen and (max-width: 47.9375em) {
  .swiper-slide-active .people__item {
    width: calc(176 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(296 / var(--base-width) * var(--inner-width) * 1px);
    margin-top: 0;
  }
}

.people__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.people__image img,
.people__image picture {
  position: relative;
  transform-origin: center center;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.people__image::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50.32%, #5472a0 80%, #002d72 100%);
}

@media (hover: hover) {
  .people__item:hover .people__image img,
  .people__item:hover .people__image picture {
    transform: scale(1.1);
  }
}

.people__tags {
  position: relative;
  z-index: 2;
  gap: calc(4 / var(--base-width) * var(--inner-width) * 1px);
  margin: 0 calc(12 / var(--base-width) * var(--inner-width) * 1px);
  opacity: 0;
  pointer-events: none;
  place-self: start start;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .people__tags {
    margin: 0 calc(8 / var(--base-width) * var(--inner-width) * 1px);
    align-content: flex-start;
  }
}
.people__tags .tag {
  background: #0089c8;
  color: #fff;
  font-size: calc(10 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(20 / var(--base-width) * var(--inner-width) * 1px);
  border: 0;
}
.people__tags .tag.is-hidden {
  display: none;
}
@media only screen and (max-width: 47.9375em) {
  .people__tags .tag.is-sp-hidden {
    display: none;
  }
}
.people__tags::after {
  content: "...";
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(24 / var(--base-width) * var(--inner-width) * 1px);
  padding: 0 calc(12 / var(--base-width) * var(--inner-width) * 1px);
  background: #0089c8;
  color: #fff;
  font-size: calc(10 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(20 / var(--base-width) * var(--inner-width) * 1px);
  border: 0;
}
.swiper-slide-active .people__tags {
  opacity: 1;
  pointer-events: all;
}

.people__title {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: calc(4 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.people__title span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(18 / var(--base-width) * var(--inner-width) * 1px);
  padding: 0 calc(4 / var(--base-width) * var(--inner-width) * 1px);
  font-weight: 700;
  font-size: calc(14 / var(--base-width) * var(--inner-width) * 1px);
  color: #0089c8;
  background: #fff;
  white-space: nowrap;
}
@media only screen and (max-width: 47.9375em) {
  .people__title span {
    height: calc(20 / var(--base-width) * var(--inner-width) * 1px);
    font-size: calc(12 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.swiper-slide-active .people__title {
  opacity: 1;
  pointer-events: all;
}

.people__position {
  display: none;
}

.people__name {
  position: relative;
  z-index: 2;
  padding: 0 calc(12 / var(--base-width) * var(--inner-width) * 1px);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .people__name {
    font-size: calc(24 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.people__name small {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: calc(12 / var(--base-width) * var(--inner-width) * 1px);
}
.swiper-slide-active .people__name {
  opacity: 1;
  pointer-events: all;
}

.people__controls {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: calc(20 / var(--base-width) * var(--inner-width) * 1px);
  width: calc(220 / var(--base-width) * var(--inner-width) * 1px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 47.9375em) {
  .people__controls {
    bottom: 0;
    width: calc(158 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.people__prev,
.people__next {
  flex-shrink: 0;
  width: calc(48 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(48 / var(--base-width) * var(--inner-width) * 1px);
  border-radius: calc(48 / var(--base-width) * var(--inner-width) * 1px);
  color: #0089c8;
  background: #e6e6e6;
  border: 1px solid #0089c8;
  transition-property: background, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .people__prev,
  .people__next {
    width: calc(35 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(35 / var(--base-width) * var(--inner-width) * 1px);
    border-radius: calc(35 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.people__prev path,
.people__next path {
  fill: currentColor;
}
@media (hover: hover) {
  .people__prev:hover,
  .people__next:hover {
    background: #0089c8;
    color: #fff;
  }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic.people__dots {
  transform: translate(0, 0);
}

.people__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(89 / var(--base-width) * var(--inner-width) * 1px);
  max-width: calc(89 / var(--base-width) * var(--inner-width) * 1px);
  padding-left: calc(46 / var(--base-width) * var(--inner-width) * 1px);
  position: static;
}
@media only screen and (max-width: 47.9375em) {
  .people__dots {
    max-width: calc(65 / var(--base-width) * var(--inner-width) * 1px);
    padding-left: calc(32 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.people__dots .swiper-pagination-bullet {
  flex-shrink: 0;
  width: calc(23 / var(--base-width) * var(--inner-width) * 1px);
  height: calc(23 / var(--base-width) * var(--inner-width) * 1px);
  position: relative;
  color: #b2b2b2;
  background: transparent;
  opacity: 1;
  padding: 0;
  transform: scale(1);
  --swiper-pagination-bullet-horizontal-gap: 0;
}
@media only screen and (max-width: 47.9375em) {
  .people__dots .swiper-pagination-bullet {
    width: calc(16 / var(--base-width) * var(--inner-width) * 1px);
    height: calc(16 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.people__dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: #0089c8;
}
.people__dots .swiper-pagination-bullet::before {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: currentColor;
}
@media only screen and (max-width: 47.9375em) {
  .people__dots .swiper-pagination-bullet::before {
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }
}
.people__dots .swiper-pagination-bullet-active-next,
.people__dots .swiper-pagination-bullet-active-next-next {
  transform: scale(1);
}/*# sourceMappingURL=top.css.map */