.c-main {
  position: relative;
}
.flow-internship {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(480/var(--sp-font-size)*1rem);
  height: calc(100% + (88/var(--sp-font-size)*1rem));
  pointer-events: none;
  z-index: 2000;
}
.flow-internship__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff009e;
  position: sticky;
  /* 112 + 38 + 88 + 24 + 128 */
  top: calc(100vh - (390/var(--sp-font-size)*1rem));
  width: 100%;
  height: calc(88/var(--sp-font-size)*1rem);
  border-radius: calc(44/var(--sp-font-size)*1rem) 0 0 calc(44/var(--sp-font-size)*1rem);
  pointer-events: all;
}

.flow-internship__btn:hover::after {
  opacity: 1;
}
.flow-internship__btn:hover .flow-internship__arrow:first-child {
  animation: transformCenterRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.flow-internship__btn:hover .flow-internship__arrow:last-child {
  animation: transformLeftCenter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.15s;
}
.flow-internship__btn:hover .flow-internship-dice__cube {
  animation-play-state: paused;
}
.flow-internship__txt {
  font-size: calc(28/var(--sp-font-size)*1rem);
  font-weight: 700;
  color: #fff;;
}
.flow-internship__wrap {
  position: relative;
  width: calc(24/var(--sp-font-size)*1rem);
  height: calc(12/var(--sp-font-size)*1rem);
  overflow: hidden;
}
.flow-internship__arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.flow-internship__arrow:first-of-type {
  transform: translateX(0%);
  animation: transformLeftCenter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.15s;
}
.flow-internship__arrow:last-of-type {
  transform: translateX(-100%);
  animation: transformCenterRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.15s;
}
.flow-internship-dice {
  position: absolute;
  width: calc(32/var(--sp-font-size)*1rem);
  height: calc(32/var(--sp-font-size)*1rem);
  z-index: 10;

  perspective: 600px;
}
.flow-internship-dice--1 {
  top: 0;
  left: calc(26/var(--sp-font-size)*1rem);
  transform: translateY(-50%);
}
.flow-internship-dice--1 .flow-internship-dice__cube {
  animation: rotate1 3s linear infinite;
}
.flow-internship-dice--2 {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.flow-internship-dice--2 .flow-internship-dice__cube {
  animation: rotate2 3s linear 0.5s infinite;
}
.flow-internship-dice__cube {
  position: relative;
  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
}
.flow-internship-dice__face {
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden;
  grid-template-columns: repeat(3, calc(8/var(--sp-font-size)*1rem));
  grid-template-rows: repeat(3, calc(8/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--1 {
  transform: rotateY(0deg) translateZ(calc(16/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--1 .flow-internship-dice__dot {
  background-color: #ed1c24;

  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.flow-internship-dice__face--2 {
  transform: rotateX(-90deg) translateZ(calc(16/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--2 .flow-internship-dice__dot:nth-of-type(1) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--2 .flow-internship-dice__dot:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--3 {
  transform: rotateY(90deg) translateZ(calc(16/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--3 .flow-internship-dice__dot:nth-of-type(1) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--3 .flow-internship-dice__dot:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.flow-internship-dice__face--3 .flow-internship-dice__dot:nth-of-type(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--4 {
  transform: rotateY(-90deg) translateZ(calc(16/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--4 .flow-internship-dice__dot:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--4 .flow-internship-dice__dot:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--4 .flow-internship-dice__dot:nth-of-type(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--4 .flow-internship-dice__dot:nth-of-type(4) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--5 {
  transform: rotateX(90deg) translateZ(calc(16/var(--sp-font-size)*1rem));
}
.flow-internship-dice__face--5 .flow-internship-dice__dot:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--5 .flow-internship-dice__dot:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--5 .flow-internship-dice__dot:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.flow-internship-dice__face--5 .flow-internship-dice__dot:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--5 .flow-internship-dice__dot:nth-of-type(5) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--6 {
  transform: rotateX(180deg) translateZ(calc(16/var(--sp-font-size)*1rem));

  gap: 0 1px;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.flow-internship-dice__face--6 .flow-internship-dice__dot:nth-of-type(6) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}
.flow-internship-dice__dot {
  background-color: #000;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@media only screen and (min-width: 769px), print {
  .flow-internship {
    width: calc(344/var(--pc-font-size)*1rem);
    height: calc(100% + (60/var(--pc-font-size)*1rem));
  }
  .flow-internship__btn {
    /* 100 + 30 + 60 + 24 */
    top: calc(100vh - (214/var(--pc-font-size)*1rem));
    height: calc(60/var(--pc-font-size)*1rem);
    border-radius: calc(30/var(--pc-font-size)*1rem) 0 0 calc(30/var(--pc-font-size)*1rem);
  }
  .flow-internship__btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    border-right: none;
    border-width: 3px;
    border-radius: calc(30/var(--pc-font-size)*1rem) 0 0 calc(30/var(--pc-font-size)*1rem);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
  }
  .flow-internship__txt {
    font-size: calc(20/var(--pc-font-size)*1rem);
  }
  .flow-internship__wrap {
    width: calc(20/var(--pc-font-size)*1rem);
    height: calc(20/var(--pc-font-size)*1rem);
  }
  .flow-internship-dice {
    width: calc(24/var(--pc-font-size)*1rem);
    height: calc(24/var(--pc-font-size)*1rem);
  }
  .flow-internship-dice--1 {
    left: calc(14/var(--pc-font-size)*1rem);
  }
  .flow-internship-dice__face {
    grid-template-columns: repeat(3, calc(6/var(--pc-font-size)*1rem));
    grid-template-rows: repeat(3, calc(6/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--1 {
    transform: rotateY(0deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--2 {
    transform: rotateX(-90deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--3 {
    transform: rotateY(90deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--4 {
    transform: rotateY(-90deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--5 {
    transform: rotateX(90deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__face--6 {
    transform: rotateX(180deg) translateZ(calc(12/var(--pc-font-size)*1rem));
  }
  .flow-internship-dice__dot {
    width: calc(6/var(--pc-font-size)*1rem);
    height: calc(6/var(--pc-font-size)*1rem);
  }
}





@keyframes transformLeftCenter {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformCenterRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes rotate1 {
  100% {
    transform: rotateX(720deg) rotateZ(-720deg);
  }
}
@keyframes rotate2 {
  100% {
    transform: rotateX(450deg) rotateZ(-720deg);
  }
}