@charset "UTF-8";
.mv {
  height: 100vh;
  height: 100dvh;
  max-height: 630px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .mv {
    max-height: initial;
  }
}
.mv .mv__contents {
  width: 100%;
  margin: auto 0;
  position: absolute;
  top: 51%;
  z-index: 1;
  transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
  .mv .mv__contents {
    top: 55%;
  }
}
.mv h1 {
  margin-bottom: 17px;
}
@media print, screen and (min-width: 768px) {
  .mv h1 {
    margin-bottom: 27px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv h1 {
    margin-bottom: 34px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv h1 {
    margin-bottom: 40px;
  }
}
.mv h1 .mv__text_line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.mv h1 img {
  width: auto;
}
.mv h1 .milkand {
  max-width: 190px;
  gap: 12px;
  margin-bottom: 15px;
}
@media print, screen and (min-width: 768px) {
  .mv h1 .milkand {
    max-width: initial;
    gap: 20px;
    margin-bottom: 18px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv h1 .milkand {
    gap: 25px;
    margin-bottom: 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv h1 .milkand {
    gap: 30px;
    margin-bottom: 25px;
  }
}
.mv h1 .milkand img {
  height: 50px;
  transition: opacity 1.7s cubic-bezier(0.34, 0.59, 0.06, 1.01), transform 1.7s cubic-bezier(0.34, 0.59, 0.06, 1.01);
}
@media print, screen and (min-width: 321px) {
  .mv h1 .milkand img {
    height: 60px;
  }
}
@media print, screen and (min-width: 768px) {
  .mv h1 .milkand img {
    height: 71px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv h1 .milkand img {
    height: 84px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv h1 .milkand img {
    height: 96px;
  }
}
.mv h1 .milkand .mv__text_block {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media print, screen and (min-width: 768px) {
  .mv h1 .milkand .mv__text_block {
    gap: 8px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv h1 .milkand .mv__text_block {
    gap: 9px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv h1 .milkand .mv__text_block {
    gap: 10px;
  }
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(1) {
  transition-delay: 0.25s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(2) {
  transition-delay: 0.3s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(3) {
  transition-delay: 0.35s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(4) {
  transition-delay: 0.4s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(5) {
  transition-delay: 0.45s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(6) {
  transition-delay: 0.5s;
}
.mv h1 .milkand .mv__text_block:first-child img:nth-child(7) {
  transition-delay: 0.55s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(1) {
  transition-delay: 0.45s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(2) {
  transition-delay: 0.5s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(3) {
  transition-delay: 0.55s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(4) {
  transition-delay: 0.6s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(5) {
  transition-delay: 0.65s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(6) {
  transition-delay: 0.7s;
}
.mv h1 .milkand .mv__text_block:last-child img:nth-child(7) {
  transition-delay: 0.75s;
}
.mv h1 .milkand .mv__text_block:last-child img.lastdelay {
  transition: opacity 0.8s cubic-bezier(0.08, 0.48, 0.88, 0.36), transform 0.8s cubic-bezier(0.08, 0.48, 0.88, 0.36);
  transition-delay: 1.4s;
}
.mv h1 .project {
  gap: 2px;
}
@media print, screen and (min-width: 920px) {
  .mv h1 .project {
    gap: 3px;
  }
}
.mv h1 .project img {
  height: 13px;
  transition: opacity 1.5s cubic-bezier(0.34, 0.59, 0.06, 1.01), transform 1.5s cubic-bezier(0.34, 0.59, 0.06, 1.01);
}
@media print, screen and (min-width: 321px) {
  .mv h1 .project img {
    height: 15px;
  }
}
@media print, screen and (min-width: 768px) {
  .mv h1 .project img {
    height: 18px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv h1 .project img {
    height: 21px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv h1 .project img {
    height: 24px;
  }
}
.mv h1 .project img:nth-child(1) {
  transition-delay: 2.25s;
}
.mv h1 .project img:nth-child(2) {
  transition-delay: 2.3s;
}
.mv h1 .project img:nth-child(3) {
  transition-delay: 2.35s;
}
.mv h1 .project img:nth-child(4) {
  transition-delay: 2.4s;
}
.mv h1 .project img:nth-child(5) {
  transition-delay: 2.45s;
}
.mv h1 .project img:nth-child(6) {
  transition-delay: 2.5s;
}
.mv h1 .project img:nth-child(7) {
  transition-delay: 2.55s;
}
.mv h1 img {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  transform: perspective(1000px) translate3d(0px, 0px, 0px) rotateX(-90deg);
}
.mv h1 .mv__text_block.is-active img {
  opacity: 1;
  transform: rotateX(0);
}
.mv .mv__item_list {
  padding-inline: 50px;
}
.mv .mv__item_list .splide__track {
  overflow: visible;
}
.mv .mv__item_list .splide__slide:nth-child(1) button {
  transition-delay: 2.9s;
}
.mv .mv__item_list .splide__slide:nth-child(2) button {
  transition-delay: 3s;
}
.mv .mv__item_list .splide__slide:nth-child(3) button {
  transition-delay: 3.1s;
}
.mv .mv__item_list .splide__slide:nth-child(4) button {
  transition-delay: 3.2s;
}
.mv .mv__item_list .splide__slide:nth-child(5) button {
  transition-delay: 3.3s;
}
.mv .mv__item_list .splide__slide:nth-child(6) button {
  transition-delay: 3.4s;
}
.mv .mv__item_list .splide__slide:nth-child(7) button {
  transition-delay: 3.5s;
}
.mv .mv__item_list .splide__slide:nth-child(8) button {
  transition-delay: 3.6s;
}
.mv .mv__item_list .splide__slide:nth-child(9) button {
  transition-delay: 3.7s;
}
.mv .mv__item_list .splide__slide:nth-child(10) button {
  transition-delay: 3.8s;
}
.mv .mv__item_list .splide__slide:nth-child(11) button {
  transition-delay: 3.9s;
}
.mv .mv__item_list .splide__slide:nth-child(12) button {
  transition-delay: 4s;
}
.mv .mv__item_list .splide__slide:nth-child(13) button {
  transition-delay: 4.1s;
}
.mv .mv__item_list .splide__slide:nth-child(14) button {
  transition-delay: 4.2s;
}
.mv .mv__item_list .splide__slide:nth-child(15) button {
  transition-delay: 4.3s;
}
.mv .mv__item_list .splide__slide:nth-child(16) button {
  transition-delay: 4.4s;
}
.mv .mv__item_list .splide__slide:nth-child(17) button {
  transition-delay: 4.5s;
}
.mv .mv__item_list .splide__slide:nth-child(18) button {
  transition-delay: 4.6s;
}
.mv .mv__item_list .splide__slide:nth-child(19) button {
  transition-delay: 4.7s;
}
.mv .mv__item_list .splide__slide:nth-child(20) button {
  transition-delay: 4.8s;
}
.mv .mv__item_list button {
  display: block;
  position: relative;
  opacity: 0;
  transform: translateY(100%) translateX(100%);
  transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1), transform 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.mv .mv__item_list button img {
  width: auto;
  height: 200px;
  /* hightで固定 */
}
@media print, screen and (min-width: 321px) {
  .mv .mv__item_list button img {
    height: 222px;
  }
}
@media print, screen and (min-width: 768px) {
  .mv .mv__item_list button img {
    height: 270px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv .mv__item_list button img {
    height: 320px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv .mv__item_list button img {
    height: 368px;
  }
}
.mv .mv__item_list button svg {
  height: 0;
}
.mv .mv__item_list .mv__item_list__item {
  transform: scale(1);
  transition: transform 2.5s cubic-bezier(0.33, 1, 0.68, 1) 3.5s;
}
.mv .mv__item_list .mv__item_list__item img {
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
}
.mv .mv__item_list .mv__item_list__logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.mv .mv__item_list .mizkan button {
  -webkit-clip-path: url(#mv_slider_mask__mizkan);
  clip-path: url(#mv_slider_mask__mizkan);
}
.mv .mv__item_list .pokka button {
  -webkit-clip-path: url(#mv_slider_mask__pokkasapporo);
  clip-path: url(#mv_slider_mask__pokkasapporo);
}
.mv .mv__item_list .sazae button {
  -webkit-clip-path: url(#mv_slider_mask__sazae);
  clip-path: url(#mv_slider_mask__sazae);
}
.mv .mv__item_list .cocacola button {
  -webkit-clip-path: url(#mv_slider_mask__cocacola);
  clip-path: url(#mv_slider_mask__cocacola);
}
.mv .mv__item_list {
  /*.mizkan {
      width: 28.32%;
  }
  .pokka {
      width: 20.88%;
  }
  .sazae {
      width: 22.96%;
  }
  .cocacola {
      width: 32.08%;
  }*/
  /*overflow: hidden;
  .splide__track  {
      padding-inline: 3.47%;
      overflow-x: visible;
  }*/
}
.mv .mv__item_list.is-initialized button {
  opacity: 1;
  transform: translateY(0) translateX(0);
}
.mv .mv__item_list.is-initialized button .mv__item_list__item {
  transform: scale(1.2);
}
@media (hover: hover) {
  .mv .mv__item_list.is-initialized button:where(:any-link, :enabled, summary, span, dt, div):hover .mv__item_list__item img {
    transform: scale(1.1);
  }
  .mv .mv__item_list.is-initialized button:where(:any-link, :enabled, summary, span, dt, div):hover .mv__item_list__logo {
    opacity: 1;
  }
}
.mv .maker__list {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1), transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: 3.5s;
}
.mv .maker__list.top {
  top: -4px;
  transform: translateY(-100%);
}
.mv .maker__list.top .sp {
  margin-top: 10px;
}
.mv .maker__list.bottom {
  bottom: -4px;
  transform: translateY(100%);
}
.mv .maker__list.bottom .sp {
  margin-bottom: 10px;
}
.mv .maker__list .splide__slide {
  width: auto !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  --img-margin-right: 3px;
}
@media print, screen and (min-width: 768px) {
  .mv .maker__list .splide__slide {
    --img-margin-right: 4px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv .maker__list .splide__slide {
    --img-margin-right: 5px;
  }
}
.mv .maker__list .splide__slide img {
  width: auto;
  max-width: none;
  height: 38px;
}
@media print, screen and (min-width: 768px) {
  .mv .maker__list .splide__slide img {
    height: 63px;
  }
}
@media print, screen and (min-width: 920px) {
  .mv .maker__list .splide__slide img {
    height: 70px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mv .maker__list .splide__slide img {
    height: 86px;
  }
}
.mv .maker__list .splide__slide img:not(:last-child) {
  margin-right: var(--img-margin-right);
}
.mv .maker__list .splide__slide img.mg-r0 {
  margin-right: 0;
}
.mv .maker__list .splide__slide img.mg-r1_5x {
  margin-right: calc(var(--img-margin-right) * 1.5);
}
.mv .maker__list .splide__slide img.mg-r2x {
  margin-right: calc(var(--img-margin-right) * 2);
}
.mv .maker__list .splide__slide img.mg-r3x {
  margin-right: calc(var(--img-margin-right) * 3);
}
.mv .maker__list .splide__slide img.mg-r5x {
  margin-right: calc(var(--img-margin-right) * 5);
}
.mv .maker__list .splide__slide .rotate_img {
  margin-right: var(--img-margin-right);
  position: relative;
}
.mv .maker__list .splide__slide .rotate_img img {
  display: block;
}
.mv .maker__list .splide__slide .rotate_img.mg-r0 {
  margin-right: 0;
}
.mv .maker__list .splide__slide .rotate_img.mg-r1_5x {
  margin-right: calc(var(--img-margin-right) * 1.5);
}
.mv .maker__list .splide__slide .rotate_img.mg-r2x {
  margin-right: calc(var(--img-margin-right) * 2);
}
.mv .maker__list .splide__slide .rotate_img.mg-r3x {
  margin-right: calc(var(--img-margin-right) * 3);
}
.mv .maker__list .splide__slide .rotate_img img {
  margin-right: 0 !important;
}
.mv .maker__list .splide__slide .rotate_img .rotate_img__front {
  animation: rotate_img__front 8s linear infinite;
}
.mv .maker__list .splide__slide .rotate_img .rotate_img__back {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: rotateY(180deg);
  animation: rotate_img__back 8s linear infinite;
}
.mv .maker__list .splide__slide .rotate_img.delay05 img {
  animation-delay: 0.5s;
}
.mv .maker__list .splide__slide .rotate_img.delay15 img {
  animation-delay: 1.5s;
}
.mv .maker__list .splide__slide .rotate_img.delay22 img {
  animation-delay: 2.2s;
}
.mv .maker__list .splide__slide .rotate_img.delay26 img {
  animation-delay: 2.6s;
}
.mv .maker__list .splide__slide .rotate_img.delay30 img {
  animation-delay: 3s;
}
.mv .maker__list .splide__slide .rotate_img.delay40 img {
  animation-delay: 4s;
}
.mv .maker__list .splide__slide .rotate_img.delay52 img {
  animation-delay: 5.2s;
}
.mv.is-active .maker__list {
  opacity: 1;
  transform: translateY(0);
}

@-moz-document url-prefix() {
  .mv .mv__item_list.is-initialized button .mv__item_list__item {
    transform: scale(1);
  }
  @media (hover: hover) {
    .mv .mv__item_list.is-initialized button:where(:any-link, :enabled, summary, span, dt, div):hover .mv__item_list__item img {
      transform: scale(1);
    }
  }
}
.about {
  height: 100vh;
  height: 100dvh;
  position: relative;
}
.about .panel {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.about .about__project .project__logo img {
  width: 50%;
  display: block;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .about .about__project .project__logo img {
    width: 57.7%;
    max-width: 590px;
  }
}
.about .about__project.is-active .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.about .about__whats .whtas_flex {
  width: 71%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  transform: scale(1.1);
  transition: transform 1s cubic-bezier(0.32, 0.94, 0.6, 1) 1.5s;
}
@media print, screen and (min-width: 400px) {
  .about .about__whats .whtas_flex {
    width: 80%;
  }
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whtas_flex {
    width: auto;
    max-width: initial;
    justify-content: center;
    gap: 9.17%;
    margin: 0;
  }
}
.about .about__whats .whats__title {
  width: 90.2%;
  margin-left: 7%;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 400px) {
  .about .about__whats .whats__title {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whats__title {
    width: 34.47%;
    margin-left: 0;
    margin-bottom: 0;
  }
}
.about .about__whats .whats__title h2 {
  margin-bottom: 9px;
  transition: opacity 0.3s;
}
@media print, screen and (min-width: 400px) {
  .about .about__whats .whats__title h2 {
    margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whats__title h2 {
    margin-bottom: 9.06%;
  }
}
.about .about__whats .whats__title h2 div {
  width: 100%;
}
.about .about__whats .whats__title h2 img {
  display: block;
}
.about .about__whats .whats__title h2 .title__line1 {
  margin-bottom: 6%;
}
.about .about__whats .whats__title h2 .title__line1 img {
  width: 31.59%;
}
.about .about__whats .whats__title h2 .title__line2 {
  margin-bottom: 6%;
}
.about .about__whats .whats__title h2 .title__line2 img {
  width: 87.91%;
}
.about .about__whats .whats__title h2 .title__line3 .RotateFadeIn__con {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.about .about__whats .whats__title h2 .title__line3 img:nth-child(1) {
  width: 85.71%;
  margin-right: 1.4%;
}
.about .about__whats .whats__title h2 .title__line3 img:nth-child(2) {
  width: 10.7%;
}
.about .about__whats .whats__title .whats__itemlist {
  width: 77%;
  margin: 0 auto 0 13%;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whats__title .whats__itemlist {
    width: 74.87%;
    margin: 0 auto 11.07% auto;
  }
}
.about .about__whats .whats__title .whats__itemlist .itemlist_grid {
  display: grid;
  grid-template-columns: 56.98% 1fr;
}
.about .about__whats .whats__title .whats__itemlist img {
  width: 100%;
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item {
  position: relative;
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item img:nth-child(1) {
  transform: translateX(-27%);
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item img:nth-child(2) {
  transform: translateX(-27%);
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item img:nth-child(3) {
  transform: translateX(-12%);
}
.about .about__whats .whats__title .whats__itemlist .itemlist__item img:nth-child(4) {
  transform: translateX(-27%);
}
.about .about__whats .link_button button {
  width: 75.83%;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .link_button button {
    width: 63.63%;
    margin-left: 11%;
  }
}
.about .about__whats .whats__text {
  width: 100%;
  margin-bottom: 25px;
  transition: opacity 0.3s;
  transform: translateX(5%);
}
@media print, screen and (min-width: 400px) {
  .about .about__whats .whats__text {
    margin-bottom: 30px;
  }
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whats__text {
    width: 34.66%;
    margin-bottom: 0;
    transform: translateX(0);
  }
}
.about .about__whats .whats__text p:not(:last-child) {
  margin-bottom: 20px;
}
@media print, screen and (min-width: 321px) {
  .about .about__whats .whats__text p:not(:last-child) {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 400px) {
  .about .about__whats .whats__text p:not(:last-child) {
    margin-bottom: 30px;
  }
}
@media print, screen and (min-width: 768px) {
  .about .about__whats .whats__text p:not(:last-child) {
    margin-bottom: 44px;
  }
}
@media print, screen and (min-width: 920px) {
  .about .about__whats .whats__text p:not(:last-child) {
    margin-bottom: 52px;
  }
}
@media print, screen and (min-width: 1100px) {
  .about .about__whats .whats__text p:not(:last-child) {
    margin-bottom: 60px;
  }
}
.about .about__whats .whats__text p img {
  width: 100%;
}
.about .about__whats.is-active .whtas_flex {
  transform: scale(1);
}
.about .about__whats.is-active .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.about .about__whats.is-active .whats__title .whats__title_itemlist .RotateFadeIn__con {
  transition-delay: 0.15s;
}
.about .about__whats.is-active .whats__title .title__line1 .RotateFadeIn__con {
  transition-delay: 0.15s;
}
.about .about__whats.is-active .whats__title .title__line2 .RotateFadeIn__con {
  transition-delay: 0.3s;
}
.about .about__whats.is-active .whats__title .title__line3 .RotateFadeIn__con {
  transition-delay: 0.45s;
}
.about .about__whats.is-active .link_button .RotateFadeIn__con {
  transition-delay: 0.9s;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats.is-active .link_button .RotateFadeIn__con {
    transition-delay: 0.6s;
  }
}
.about .about__whats.is-active .link_button img:nth-child(1) {
  animation: link_button_dots1 4s linear infinite;
  animation-delay: 1s;
}
.about .about__whats.is-active .link_button img:nth-child(2) {
  animation: link_button_dots2 4s linear infinite;
  animation-delay: 1s;
}
.about .about__whats.is-active .link_button img:nth-child(3) {
  animation: link_button_dots3 4s linear infinite;
  animation-delay: 1s;
}
.about .about__whats.is-active .link_button img:nth-child(4) {
  animation: link_button_dots4 4s linear infinite;
  animation-delay: 1s;
}
.about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(1) .RotateFadeIn__con {
  transition-delay: 0.45s;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(1) .RotateFadeIn__con {
    transition-delay: 0.6s;
  }
}
.about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(2) .RotateFadeIn__con {
  transition-delay: 0.6s;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(2) .RotateFadeIn__con {
    transition-delay: 0.75s;
  }
}
.about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(3) .RotateFadeIn__con {
  transition-delay: 0.75s;
}
@media print, screen and (min-width: 768px) {
  .about .about__whats.is-active .whats__text .RotateFadeIn:nth-child(3) .RotateFadeIn__con {
    transition-delay: 0.9s;
  }
}

@keyframes spinSlowDown {
  0% {
    transform: rotateY(0deg);
  }
  70% {
    transform: rotateY(1080deg); /* 3回転 */
  }
  85% {
    transform: rotateY(1160deg); /* 少し行き過ぎ */
  }
  100% {
    transform: rotateY(1080deg); /* ピタッと止まる */
  }
}
.case {
  height: 100vh;
  height: 100dvh;
  position: relative;
}
.case .case__navi {
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  position: fixed;
  top: 38px;
  right: 13px;
  z-index: 10;
}
@media print, screen and (min-width: 768px) {
  .case .case__navi {
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px);
    top: 46px;
    right: 15px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .case__navi {
    height: calc(100vh - 71px);
    height: calc(100dvh - 71px);
    top: 56px;
    right: 20px;
  }
}
.case .case__navi ul {
  width: 103px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .case .case__navi ul {
    width: 126px;
  }
}
@media print, screen and (min-width: 920px) {
  .case .case__navi ul {
    width: 138px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .case__navi ul {
    width: 148px;
  }
}
.case .case__navi li {
  height: 21px;
  position: absolute;
  right: 0;
  will-change: transform;
  transform: translateZ(0);
}
@media print, screen and (min-width: 768px) {
  .case .case__navi li {
    height: 25px;
  }
}
@media print, screen and (min-width: 768px) {
  .case .case__navi li {
    height: 26px;
  }
}
@media print, screen and (min-width: 768px) {
  .case .case__navi li {
    height: 27px;
  }
}
.case .case__navi a {
  display: block;
  padding: 5px 0;
}
@media print, screen and (min-width: 768px) {
  .case .case__navi a {
    padding: 7px 0;
  }
}
.case .case__navi svg {
  width: auto;
  height: 10px;
  fill: #FFDC7D;
  display: block;
  transition: fill 0.5s;
}
@media print, screen and (min-width: 768px) {
  .case .case__navi svg {
    height: 11px;
  }
}
@media print, screen and (min-width: 920px) {
  .case .case__navi svg {
    height: 12px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .case__navi svg {
    height: 13px;
  }
}
.case .case__navi .is-active svg {
  fill: #231815 !important;
}
.case .case__navi .navi__active1 svg {
  fill: #FFDC7D;
}
.case .case__navi .navi__active2 svg {
  fill: #CEAECE;
}
.case .case__navi .navi__active2 li:nth-child(1) svg {
  fill: #F3C8C3;
}
.case .case__navi .navi__active3 svg {
  fill: #E4BB8D;
}
.case .case__navi .navi__active3 li:nth-child(1) svg,
.case .case__navi .navi__active3 li:nth-child(2) svg {
  fill: #FFDC7D;
}
.case .case__navi .navi__active4 svg {
  fill: #CEAECE;
}
.case .case__navi .navi__active4 li:nth-child(5) svg {
  fill: #80A7B9;
}
.case .case__navi .navi__active5 svg {
  fill: #E4BB8D;
}
.case .panel {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  webkit-mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  will-change: transform;
  transform: translateZ(0);
  transition: opacity 0.5s cubic-bezier(0.32, 0.94, 0.6, 1), -webkit-mask-position 0.5s cubic-bezier(0.32, 0.94, 0.6, 1), mask-position 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel a,
.case .panel button {
  width: 100%;
  height: 100%;
}
.case .panel .panel__inner {
  width: calc(100% - 50px);
  max-width: 1090px;
  margin: auto;
  position: relative;
  transform: translateY(-4%);
}
@media print, screen and (min-width: 768px) {
  .case .panel .panel__inner {
    width: calc(100% - 60px);
  }
}
@media print, screen and (min-width: 920px) {
  .case .panel .panel__inner {
    width: calc(100% - 70px);
  }
}
@media print, screen and (min-width: 1100px) {
  .case .panel .panel__inner {
    width: calc(100% - 80px);
  }
}
.case .panel .case__text {
  position: relative;
  z-index: 4;
}
@media print, screen and (min-width: 321px) {
  .case .panel .case__text {
    padding-left: 3.8%;
  }
}
@media print, screen and (min-width: 768px) {
  .case .panel .case__text {
    padding-left: 0;
  }
}
.case .panel .case__text img {
  display: block;
}
.case .panel .case__text p {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {
  .case .panel .case__text p {
    font-size: 1.4rem;
  }
}
@media print, screen and (min-width: 920px) {
  .case .panel .case__text p {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .panel .case__text p {
    font-size: 1.6rem;
  }
}
.case .panel .text__caseof,
.case .panel .text__milkand {
  width: 100%;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
  .case .panel .text__caseof,
  .case .panel .text__milkand {
    width: 50%;
    margin-bottom: 13px;
  }
}
@media print, screen and (min-width: 920px) {
  .case .panel .text__caseof,
  .case .panel .text__milkand {
    margin-bottom: 16px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .panel .text__caseof,
  .case .panel .text__milkand {
    margin-bottom: 19px;
  }
}
.case .panel .text__caseof {
  width: 90%;
}
@media print, screen and (min-width: 768px) {
  .case .panel .text__caseof {
    width: 50%;
  }
}
.case .panel .text__caseof .RotateFadeIn__con {
  transition-delay: 0.9s;
}
.case .panel .text__milkand {
  width: 85%;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .case .panel .text__milkand {
    width: 50%;
  }
}
.case .panel .text__milkand .RotateFadeIn__con {
  transition-delay: 1s;
}
.case .panel img {
  width: 100%;
}
.case .panel img.hover__out, .case .panel img.hover__in {
  transition: opacity 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel img.hover__in {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.case .panel .text__name {
  width: 85%;
  margin-bottom: 4px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .case .panel .text__name {
    width: 50%;
    margin-bottom: 7px;
  }
}
@media print, screen and (min-width: 920px) {
  .case .panel .text__name {
    margin-bottom: 10px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .panel .text__name {
    margin-bottom: 12px;
  }
}
.case .panel h2 .RotateFadeIn {
  transition: opacity 2s cubic-bezier(0.32, 0.94, 0.6, 1), transform 2s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel h2 .RotateFadeIn span {
  display: block;
  padding-bottom: 1px;
}
.case .panel h2 .RotateFadeIn:not(:last-child) {
  margin-bottom: 8px;
}
@media print, screen and (min-width: 768px) {
  .case .panel h2 .RotateFadeIn:not(:last-child) {
    margin-bottom: 13px;
  }
}
@media print, screen and (min-width: 920px) {
  .case .panel h2 .RotateFadeIn:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 1100px) {
  .case .panel h2 .RotateFadeIn:not(:last-child) {
    margin-bottom: 17px;
  }
}
.case .panel h2 .RotateFadeIn:nth-child(1) .RotateFadeIn__con {
  transition-delay: 2s;
}
.case .panel h2 .RotateFadeIn:nth-child(2) .RotateFadeIn__con {
  transition-delay: 2.1s;
}
.case .panel h2 img {
  width: 100%;
}
.case .panel .link_circle {
  width: 12.55%;
  display: block;
  position: absolute;
  bottom: 2%;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 1s cubic-bezier(0.32, 0.94, 0.6, 1), transform 1s cubic-bezier(0.32, 0.94, 0.6, 1);
  transition-delay: 2.8s;
}
@media print, screen and (min-width: 768px) {
  .case .panel .link_circle {
    width: 11.55%;
    bottom: 0;
  }
}
.case .panel .link_circle img {
  width: 100%;
}
.case .panel .link_circle img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.case .panel .link_circle img:nth-child(2) {
  animation: link_circle_dots1 4s linear infinite;
}
.case .panel .link_circle img:nth-child(3) {
  animation: link_circle_dots2 4s linear infinite;
}
.case .panel .link_circle img:nth-child(4) {
  animation: link_circle_dots3 4s linear infinite;
}
.case .panel .text__caption {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 40%, #000 60%);
  mask-image: linear-gradient(to left, transparent 0%, transparent 40%, #000 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 120% 0;
  mask-position: 120% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.case .panel:nth-child(odd) .case__text {
  width: 100%;
  margin-left: auto;
}
@media print, screen and (min-width: 768px) {
  .case .panel:nth-child(odd) .case__text {
    width: 50%;
  }
}
.case .panel:nth-child(odd) .text__caseof {
  width: 90%;
}
@media print, screen and (min-width: 768px) {
  .case .panel:nth-child(odd) .text__caseof {
    width: 100%;
  }
}
.case .panel:nth-child(odd) .text__milkand {
  width: 85%;
}
@media print, screen and (min-width: 768px) {
  .case .panel:nth-child(odd) .text__milkand {
    width: 100%;
  }
}
.case .panel:nth-child(odd) .text__name {
  width: 85%;
}
@media print, screen and (min-width: 768px) {
  .case .panel:nth-child(odd) .text__name {
    width: 100%;
  }
}
.case .panel .case__img {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
@media print, screen and (min-width: 321px) {
  .case .panel .case__img {
    width: 100%;
    margin: 0;
  }
}
@media print, screen and (min-width: 768px) {
  .case .panel .case__img {
    position: static;
  }
}
.case .panel .img__item {
  width: 100%;
  position: relative;
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
  .case .panel .img__item {
    position: absolute;
    transform: translateY(-50%);
  }
}
.case .panel .img__item img {
  width: 100%;
  max-width: initial;
}
.case .panel .img__item .img__item_hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  webkit-mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: opacity 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), mask-position 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), -webkit-mask-position 1.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel .img__item .img__item_bg {
  width: 100%;
  margin-top: 2px;
  position: relative;
  overflow: hidden;
}
.case .panel .img__item .img__item_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  will-change: object-position;
}
.case .panel .img__item .img__item_bg .img__item_bg__before {
  object-position: left center;
  z-index: 1;
}
.case .panel .img__item .img__item_bg .img__item_bg__after {
  object-position: right center;
  z-index: 0;
}
.case .panel .img__item svg {
  height: 0;
}
.case .panel .img__package {
  position: absolute;
  z-index: 3;
}
@media print, screen and (min-width: 768px) {
  .case .panel .img__package {
    transform: translateY(-50%);
  }
}
.case .panel .img__package img {
  width: 100%;
  max-width: initial;
  opacity: 0;
  transform: translateY(10%) rotate(3deg) scale(1.1);
  transform-origin: left top;
  transition: opacity 1s cubic-bezier(0.32, 0.94, 0.6, 1), transform 1s cubic-bezier(0.32, 0.94, 0.6, 1);
  transition-delay: 1.6s;
}
.case .panel .img__package .package__img {
  position: relative;
  z-index: 1;
  animation: itemFluffy 3s ease-in-out infinite;
}
.case .panel .img__package .package__shadow {
  position: absolute;
  z-index: 0;
}
.case .panel .case__shape {
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s;
  transition-delay: 0.5s;
  pointer-events: none;
}
@media (hover: hover) {
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__out,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__out {
    opacity: 0;
  }
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__in,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__in {
    opacity: 1;
  }
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__out,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__out {
    opacity: 0;
  }
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__in,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__in {
    opacity: 1;
  }
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_bg .img__item_bg__before,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_bg .img__item_bg__before {
    transform: scale(1.1);
  }
  .case .panel a:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_hover,
  .case .panel button:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_hover {
    opacity: 1;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@media (hover: hover) {
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__out,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__out {
    opacity: 1;
  }
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__in,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .text__milkand img.hover__in {
    opacity: 0;
  }
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__out,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__out {
    opacity: 1;
  }
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__in,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .text__name h2 img.hover__in {
    opacity: 0;
  }
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_bg .img__item_bg__before,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_bg .img__item_bg__before {
    transform: scale(1);
  }
  .case .panel.no-hover a:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_hover,
  .case .panel.no-hover button:where(:any-link, :enabled, summary, span, dt, div):hover .img__item_hover {
    opacity: 0;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.case .mizkan {
  background-color: #FDF7F6;
}
.case .mizkan .link_circle {
  left: 70%;
}
.case .mizkan .case__img {
  margin-bottom: 16%;
}
@media print, screen and (min-width: 768px) {
  .case .mizkan .case__img {
    margin-bottom: 0;
  }
}
.case .mizkan .img__item {
  width: 79.37%;
  left: 22.15%;
  padding-top: 1px;
}
@media print, screen and (min-width: 768px) {
  .case .mizkan .img__item {
    width: 39.72%;
    top: 54%;
    left: 11.5%;
  }
}
.case .mizkan .img__item .RotateFadeIn__con {
  width: 100%;
}
.case .mizkan .img__item .img__item_bg {
  padding-top: 98%;
  -webkit-clip-path: url(#item_mask__mizkan);
  clip-path: url(#item_mask__mizkan);
}
.case .mizkan .img__package {
  width: 47.18%;
  top: 19%;
  left: 0;
}
@media print, screen and (min-width: 768px) {
  .case .mizkan .img__package {
    width: 24.77%;
    top: 104%;
    left: -0.5%;
  }
}
.case .mizkan .img__package .package__img {
  width: 70.74%;
}
.case .mizkan .img__package .package__shadow {
  width: 85.18%;
  bottom: -8%;
  right: -4%;
}
.case .mizkan .case__shape {
  width: 120%;
  fill: #F3C8C3;
  top: 59%;
  left: -59%;
}
@media print, screen and (min-width: 768px) {
  .case .mizkan .case__shape {
    width: 65.4%;
    top: 60%;
    left: -40%;
  }
}
.case .pokkasapporo {
  background-color: #FFF8E5;
}
.case .pokkasapporo .panel__inner {
  transform: translateY(-4%);
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .panel__inner {
    transform: translateY(8%);
  }
}
.case .pokkasapporo .text__name {
  width: 163%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .text__name {
    width: 50%;
  }
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .text__name h2 {
    width: 200%;
  }
}
.case .pokkasapporo .text__name img {
  width: 89%;
  aspect-ratio: 100/7;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .text__name img {
    width: 100%;
    aspect-ratio: auto;
  }
}
.case .pokkasapporo .link_circle {
  width: 6.28%;
  left: 40.5%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .link_circle {
    width: 12.55%;
    left: 91.5%;
    bottom: 2%;
  }
}
.case .pokkasapporo .link_circle img {
  width: 100%;
  aspect-ratio: auto;
}
.case .pokkasapporo .case__img {
  margin-bottom: 4%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .case__img {
    margin-bottom: 0;
  }
}
.case .pokkasapporo .img__item {
  width: 57.84%;
  left: 21.08%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .img__item {
    width: 29.35%;
    top: 23%;
    left: 61.7%;
  }
}
.case .pokkasapporo .img__item .RotateFadeIn__con {
  width: 100%;
}
.case .pokkasapporo .img__item .img__item_bg {
  padding-top: 140%;
  -webkit-clip-path: url(#item_mask__pokkasapporo);
  clip-path: url(#item_mask__pokkasapporo);
}
.case .pokkasapporo .img__package {
  width: 39.07%;
  top: 21.5%;
  left: -2%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .img__package {
    width: 21%;
    top: 85%;
    left: 81%;
  }
}
.case .pokkasapporo .img__package .package__img {
  width: 63.31%;
}
.case .pokkasapporo .img__package .package__shadow {
  width: 100%;
  bottom: -11%;
  right: 7%;
}
.case .pokkasapporo .case__shape {
  width: 100%;
  fill: #FFDC7D;
  top: 59%;
  right: -51%;
}
@media print, screen and (min-width: 768px) {
  .case .pokkasapporo .case__shape {
    width: 56.33%;
    top: 78%;
    right: -31%;
  }
}
.case .pokkasapporo .case__shape path {
  opacity: 0.5;
}
.case .sazae {
  background-color: #F8F3F8;
}
.case .sazae .panel__inner {
  transform: translateY(-4%);
}
@media print, screen and (min-width: 768px) {
  .case .sazae .panel__inner {
    transform: translateY(7%);
  }
}
.case .sazae .link_circle {
  left: 56%;
}
.case .sazae .case__img {
  margin-bottom: 11%;
}
@media print, screen and (min-width: 768px) {
  .case .sazae .case__img {
    margin-bottom: 0;
  }
}
.case .sazae .img__item {
  width: 63.38%;
  left: 25.23%;
}
@media print, screen and (min-width: 768px) {
  .case .sazae .img__item {
    width: 32.2%;
    top: 42%;
    left: 14%;
  }
}
.case .sazae .img__item .RotateFadeIn__con {
  width: 100%;
}
.case .sazae .img__item .img__item_bg {
  padding-top: 125%;
  -webkit-clip-path: url(#item_mask__sazae);
  clip-path: url(#item_mask__sazae);
}
.case .sazae .img__package {
  width: 52.92%;
  top: 30.5%;
  left: 1%;
}
@media print, screen and (min-width: 768px) {
  .case .sazae .img__package {
    width: 28.89%;
    top: 119%;
    left: 1.5%;
  }
}
.case .sazae .img__package .package__img {
  width: 87.3%;
}
.case .sazae .img__package .package__shadow {
  width: 96.82%;
  bottom: -10%;
  right: 1%;
}
.case .sazae .case__shape {
  width: 110%;
  fill: #CEAECE;
  top: 52%;
  left: -58%;
}
@media print, screen and (min-width: 768px) {
  .case .sazae .case__shape {
    width: 61.3%;
    top: 70%;
    left: -35%;
  }
}
.case .sazae .case__shape path {
  opacity: 0.5;
}
.case .cocacola {
  background-color: #FaF1E8;
}
.case .cocacola .panel__inner {
  transform: translateY(-4%);
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .panel__inner {
    transform: translateY(3%);
  }
}
.case .cocacola .link_circle {
  left: 100%;
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .link_circle {
    left: 101.5%;
  }
}
.case .cocacola .case__img {
  margin-bottom: 11%;
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .case__img {
    margin-bottom: 0;
  }
}
.case .cocacola .img__item {
  width: 88.61%;
  left: 12.07%;
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .img__item {
    width: 45.04%;
    top: 24%;
    left: 50%;
  }
}
.case .cocacola .img__item .RotateFadeIn__con {
  width: 100%;
}
.case .cocacola .img__item .img__item_bg {
  padding-top: 78%;
  -webkit-clip-path: url(#item_mask__cocacola);
  clip-path: url(#item_mask__cocacola);
}
.case .cocacola .img__package {
  width: 38.76%;
  top: 18%;
  left: -5.5%;
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .img__package {
    width: 21%;
    top: 87%;
    left: 75.5%;
  }
}
.case .cocacola .img__package .package__img {
  width: 65.06%;
}
.case .cocacola .img__package .package__shadow {
  width: 100%;
  bottom: -12%;
  right: 8%;
}
.case .cocacola .case__shape {
  width: 105%;
  fill: #E4BB8D;
  top: 62%;
  right: -52%;
}
@media print, screen and (min-width: 768px) {
  .case .cocacola .case__shape {
    width: 56.88%;
    top: 65%;
    right: -30%;
  }
}
.case .cocacola .case__shape path {
  opacity: 0.5;
}
.case .honoka {
  background-color: #ECF2F4;
}
.case .honoka .panel__inner {
  transform: translateY(-2%);
}
@media print, screen and (min-width: 768px) {
  .case .honoka .panel__inner {
    transform: translateY(3%);
  }
}
.case .honoka .link_circle {
  left: 74.5%;
}
.case .honoka .case__img {
  margin-bottom: 9%;
}
@media print, screen and (min-width: 768px) {
  .case .honoka .case__img {
    margin-bottom: 0;
  }
}
.case .honoka .img__item {
  width: 65.23%;
  left: 17.38%;
}
@media print, screen and (min-width: 768px) {
  .case .honoka .img__item {
    width: 33.11%;
    top: 43%;
    left: 11%;
  }
}
.case .honoka .img__item .RotateFadeIn__con {
  width: 100%;
}
.case .honoka .img__item .img__item_bg {
  padding-top: 113%;
  -webkit-clip-path: url(#item_mask__honoka);
  clip-path: url(#item_mask__honoka);
}
.case .honoka .img__package {
  width: 35.69%;
  top: 30%;
  left: 3%;
}
@media print, screen and (min-width: 768px) {
  .case .honoka .img__package {
    width: 23.21%;
    top: 108%;
    left: 2.8%;
  }
}
.case .honoka .img__package .package__img {
  width: 61.26%;
}
.case .honoka .img__package .package__shadow {
  width: 90.9%;
  bottom: -10%;
  right: 3%;
}
.case .honoka .case__shape {
  width: 100%;
  fill: #80A7B9;
  top: 57%;
  left: -50%;
}
@media print, screen and (min-width: 768px) {
  .case .honoka .case__shape {
    width: 56.33%;
    top: 65%;
    left: -32%;
  }
}
.case .honoka .case__shape path {
  opacity: 0.5;
}
.case .panel.is-active {
  z-index: 1;
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: opacity 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), -webkit-mask-position 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), mask-position 1.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel.is-active .text__caseof .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.case .panel.is-active .text__milkand .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.case .panel.is-active h2 .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.case .panel.is-active .link_circle {
  opacity: 1;
  transform: translateX(0);
}
.case .panel.is-active .text__caption {
  animation: text_mask_overlay 3s cubic-bezier(0.32, 0.94, 0.6, 1) forwards;
  animation-delay: 3s;
}
.case .panel.is-active .img__item .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.case .panel.is-active .img__item .RotateFadeIn__con .tl_only_grass_X {
  transform: translate(0);
}
.case .panel.is-active .img__item .img__item_bg img {
  transition: transform 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.case .panel.is-active .img__item .img__item_bg img.img__item_bg__before {
  animation: item_bgimg_position 15s linear infinite;
}
.case .panel.is-active .img__package img {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.case .panel.is-active .case__shape {
  opacity: 1;
}
.case .panel.is-active.pokkasapporo .link_circle {
  transition-delay: 2.9s;
}
.case .panel.is-active.pokkasapporo .text__caption {
  animation-delay: 3.2s;
}
.case .panel.is-active.pokkasapporo .img__package img {
  transition-delay: 1.7s;
}

@keyframes item_bgimg_position {
  0% {
    object-position: left center;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    object-position: right center;
    opacity: 0;
  }
}
@keyframes itemFluffy {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes text_mask_overlay {
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@keyframes link_circle_dots1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@keyframes link_circle_dots2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
@keyframes link_circle_dots3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
#anchor_move__overlay {
  background: #FFF;
  position: fixed;
  inset: 0;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
}