.case-archive {
  #page__mv {
    .page__mvWrap {
        .page__mvTextarea {
			min-width: auto;
          .page__mvText {
            max-width: 100%;
          }
        }
      }
			@media screen and (max-width: 767px) {
				margin-bottom: 10rem;
			}
    }

}

#case-archive {
	background-color: #e6f4ff;
	padding: 11rem 0 15rem 0;
	position: relative;

	.bg_img {
		background: url(../../img/case/bg_blue.svg) no-repeat top left / cover;
		height: 100%;
		left: 0%;
		max-width: 1440px;
		position: absolute;
		top: 0%;
		width: 100%;
		z-index: 0;
	}
	.head__text {
		font-size: 2rem;
		font-weight: 400;
    position: relative;
	line-height: 2;
    z-index: 2;
	}
	.grid {
		column-gap: 3rem;
		display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32rem, 38rem));
		margin-top: 7rem;
		row-gap: 5.1rem;
    justify-content: center;
	}
	.caseCard {
		position: relative;
	}
	.caseCard__img {
    aspect-ratio: 160/93;
    background-color: #fff;
    position: relative;
    overflow: hidden;
	}
	.caseCard__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .4s;
	}
  .caseCard:hover .caseCard__img img {
    transform: translate(-50%, -50%) scale(1.05);

  }

  .caseCard a:hover {
	opacity: 1;
  }

	.caseCard__numbers {
		align-items: baseline;
		background-color: var(--colorMainBlue);
		clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
		color: #fff;
		display: flex;
		font-family: "Oswald", sans-serif;
		height: 4.2rem;
		left: 0%;
		position: absolute;
		top: 0%;
		width: 10rem;
	}
	.caseCard__numbers span:first-of-type {
		font-size: 1.8rem;
		padding-left: 1.3rem;
	}
	.caseCard__number {
		font-size: 2.4rem;
		position: relative;
	}
	.caseCard__numbers::after {
		/* content: counter(num, decimal-leading-zero); */
		display: inline-block;
	}
	.caseCard__titles {
		align-items: center;
		align-items: stretch;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		.border {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 3px;
			width: 100%;
			background: var(--colorMainBlue);
		}
	}
	.caseCard__title {
		font-weight: 700;
		padding: 1.6rem 1rem;
	}
	.caseCard__icon {
		background-color: var(--colorMainBlue);
		clip-path: polygon(26% 0, 100% 0, 100% 100%, 0% 100%);
		height: auto;
		position: relative;
		width: 8rem;
	}
	.caseCard__icon img {
		position: absolute;
		right: 2.417rem;
		top: 50%;
		transform: translateY(-50%);
		transition: transform 0.6s ease;
        z-index: 3;
        transform-style: preserve-3d;
	}

	.caseCard a:hover .caseCard__icon img {
		animation: ctaRotation 2s linear infinite;
		top: 50%;
		transform: translateY(-50%);
	}
	@media screen and (max-width: 767px) {
		padding-top: 10rem;
		.grid {
			margin-top: 8rem;
			row-gap: 4rem;
		}
		.bg_img {
			height: 66rem;
		}
	}
}