@charset "UTF-8";

.heroArea_frame_renew {
  background: url(../img/top_bg_2.webp) 0 0 repeat;
  background-size: cover;
}
@media screen and (min-width: 992px) {
  .heroArea_frame_renew {
     padding-top: 90px;
  }
}

.heroArea_renew {
  height: 80vh;
}

@media screen and (max-height: 660px) and (orientation: landscape) {
  .heroArea_renew {
    height: 100vh;
  }
}
.heroArea_content_renew {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.heroArea_renew .mainlogo_wrapper_renew {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 15;
  width: 24rem;
}

@media screen and (max-width:480px) {
  .heroArea_renew .mainlogo_wrapper_renew{
    top: 23%;
    width: 75%;
  }
}

.heroArea_renew .mainlogo_wrapper_renew .mainlogo_sub_renew{
  margin-bottom: 1rem;
  max-width: 100%;
}


.heroArea_renew .mainlogo_wrapper_renew img {
  display: block;
}

.mainlogo_lead_renew{
  backdrop-filter: blur(1px);
}

.heroArea_renew .mainlogo_wrapper_renew .mainlogo_main_renew{
  filter: drop-shadow(0px 4px 10px rgba(255, 255, 255, .8));
  margin-bottom: 4rem;
}

.heroArea_renew .mainlogo_wrapper_renew .deadline_renew {
  position: absolute;
  width: 8rem;
  bottom: -1rem;
  right: -29%;
}

@media screen and (max-width:480px) {
  .heroArea_renew .mainlogo_wrapper_renew .deadline_renew {
    position: absolute;
    right: -9%;
    bottom: 3vh;
    width: 22vw;
  }
}

.heroArea_renew .mainlogo_wrapper_renew .deadline_renew img {
  width: 100%;
}
.heroArea_renew .period_renew {
  position: absolute;
  z-index: 100;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 32rem;
  width: 90%;
}
.heroArea_renew .period_renew img{
  width: 100%;
}
/* @media screen and (min-width: 700px) and (max-width: 991px) {
  .heroArea_renew .period_renew {
    top: auto;
    bottom: 2rem;
  }
} */

@media screen and (max-width:480px) {
  .heroArea_renew .period_renew {
    width: 90%;
    max-width: 23rem;
    bottom: calc(50% - 34vh);
  }
}

@media screen and (max-width:375px) {
  .heroArea_renew .period_renew {
    bottom: calc(50% - 40vh);
  }
}

.main_icon_renew{
  position: absolute;
  width: 38rem;
  bottom: -3.2rem;
  left: calc(50% - 18.7rem);
  z-index: 10;
}
@media screen and (max-width:480px) {
  .main_icon_renew{
    width: 75vw;
    left: 12%;
    bottom: calc(50% - 18rem);
  }
}

.p-top-books{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-top-books-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 20px rgb(255 255 255 / 80%);
}
.p-top-books-gallery{
    --radius: 120vw;
    height: 100%;
}
.p-top-books-gallery__image.p-top__size-ss {
  width: 7.96875vw;
}
.p-top-books-gallery__image.p-top__size-m {
  width: 15.3125vw;
}

@media screen and (max-width:480px) {
  .p-top-books-gallery__image.p-top__size-m{
    width: 27.3125vw;
  }
}

.p-top-books-gallery__image.p-top__size-l {
  width: 24.375vw;
}
@media screen and (max-width:480px) {
  .p-top-books-gallery__image.p-top__size-l {
    width: 37.375vw;
  }
}
.p-top-books-gallery__inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.p-top-books-gallery__image {
  position: absolute;
  z-index: 1;
  transform: scale(0);
  transform-origin: center;
  translate: var(--x) var(--y);
  --angle2: calc(var(--angle) * 1deg - 90deg);
  --x: calc(cos(var(--angle2)) * var(--radius) * 1);
  --y: calc(sin(var(--angle2)) * var(--radius) * 1);
}
.p-top-books-gallery__image.p-top-delay-1 {
  animation-delay: 0ms;
}
.p-top-books-gallery__image.p-top-delay-1-2 {
  animation-delay: 375ms;
}
.p-top-books-gallery__image.p-top-delay-2 {
  animation-delay: 1000ms;
}
.p-top-books-gallery__image.p-top-delay-2-2 {
  animation-delay: 1875ms;
}
.p-top-books-gallery__image.p-top-delay-2-3 {
  animation-delay: 2250ms;
}
.p-top-books-gallery__image.p-top-delay-3 {
  animation-delay: 4000ms;
}
.p-top-books-gallery__image.p-top-delay-4 {
  animation-delay: 5000ms;
}
.p-top-books-gallery__image.p-top-delay-4-2 {
  animation-delay: 4875ms;
}
.p-top-books-gallery__image.p-top-delay-5 {
  animation-delay: 6000ms;
}
.p-top-books-gallery__image.p-top-delay-5-2 {
  animation-delay: 6375ms;
}
.p-top-books-gallery__image.p-top-delay-5-3 {
  animation-delay: 6750ms;
}
@keyframes top-mv-gallery-root {
  0% {
    z-index: 24;
    filter: blur(5px);
    opacity: 0;
    transform: scale(0.7);
  }
  50% {
    filter: blur(5px);
    opacity: 0;
    transform: scale(1);
  }
  53% {
    filter: blur(0);
    opacity: 1;
  }
  70% {
    filter: blur(0);
    opacity: 1;
  }
  75% {
    filter: blur(4px);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    filter: blur(15px);
    transform: scale(0);
  }
  100% {
    z-index: 0;
    filter: blur(15px);
    opacity: 0;
    transform: scale(0);
    translate: 0 0;
  }
}
@keyframes top-mv-gallery-root-blur {
  0% {
    z-index: 24;
    filter: blur(7px);
    opacity: 0;
    transform: scale(0.7);
  }
  50% {
    filter: blur(7px);
    opacity: 0;
    transform: scale(1);
  }
  53% {
    filter: blur(7px);
    opacity: 1;
  }
  60% {
    filter: blur(4px);
    opacity: 1;
  }
  75% {
    filter: blur(4px);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    z-index: 0;
    filter: blur(15px);
    opacity: 0;
    transform: scale(0);
    translate: 0 0;
  }
}

.p-top-books-gallery__root5--inside {
    --angle: 310;
    translate: var(--x) var(--y);
    animation: top-mv-gallery-root 9s linear infinite;
    animation-direction: reverse;
    --angle2: calc(var(--angle) * 1deg - 90deg);
    --x: calc(cos(var(--angle2)) * calc(var(--radius) * .4) * 1);
    --y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.0) * 1);
    bottom: 1.5rem;
    left: calc(50% - 19rem);
}
.p-top-books-gallery__root6--inside {
    --angle: 100;
    translate: var(--x) var(--y);
    animation: top-mv-gallery-root 9s linear infinite;
    animation-direction: reverse;
    --angle2: calc(var(--angle) * 1deg - 90deg);
    --x: calc(cos(var(--angle2)) * calc(var(--radius) * .4) * 1);
    --y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.0) * 1);
    bottom: 1.5rem;
    right: calc(50% - 19rem);
}
.p-top-books-gallery__root7--inside {
    --angle: 310;
    translate: var(--x) var(--y);
    animation: top-mv-gallery-root 9s linear infinite;
    animation-direction: reverse;
    --angle2: calc(var(--angle) * 1deg - 90deg);
    --x: calc(cos(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
    --y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
    left: calc(50% - 17rem);
}
.p-top-books-gallery__root8--inside {
    --angle: 50;
    translate: var(--x) var(--y);
    animation: top-mv-gallery-root 9s linear infinite;
    animation-direction: reverse;
    --angle2: calc(var(--angle) * 1deg - 90deg);
    --x: calc(cos(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
    --y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
    right: calc(50% - 17rem);
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root5--inside {
    left: calc(50% - 12rem);
    bottom: 6.5rem;
  }
}
@media screen and (width <= 480px) {
  .p-top-books-gallery__root5--inside {
    --angle: 250;
    --radius: 120vw;
    bottom: calc(50% - 11rem);
    left: calc(50% - 5.5rem);
  }
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root6--inside {
    bottom: 8.5rem;
    right: calc(50% - 13rem);
  }
}
@media screen and (width <= 480px) {
  .p-top-books-gallery__root6--inside {
    --angle: 90;
    --radius: 120vw;
    bottom: calc(50% - 11rem);
    right: calc(50% - 5.5rem);
  }
}

@media screen and (width <= 768px) {
  .p-top-books-gallery__root7--inside {
        left: calc(50% - 11rem);
  }
}
@media screen and (width <= 480px) {
  .p-top-books-gallery__root7--inside {
    --radius: 140vw;
    --angle: 280;
    bottom: calc(50% - 8.5rem);
    left: calc(50% - 3rem);
  }
} 
@media screen and (width <= 768px) {
  .p-top-books-gallery__root8--inside {
        right: calc(50% - 14rem);
  }
}
@media screen and (width <= 480px) {
  .p-top-books-gallery__root8--inside {
    --radius: 120vw;
    --angle: 100;
    bottom: calc(50% - 9rem);
    right: calc(50% - 4rem);
  }
}
.p-top-books-gallery__root8--blur {
  --angle: 250;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root8--blur {
    --angle: 240;
  }
}
.p-top-books-gallery__root9--blur {
  --angle: 260;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root9--blur {
    --angle: 270;
  }
}
.p-top-books-gallery__root10--blur {
  --angle: 290;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root10--blur {
    --angle: 300;
  }
}
.p-top-books-gallery__root11--blur {
  --angle: 310;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
@media screen and (width <= 768px) {
  .p-top-books-gallery__root11--blur {
    --angle: 330;
  }
}

.p-top-books-gallery__root12--blur {
  --angle: 60;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}

.p-top-books-gallery__root13--blur {
  --angle: 130;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
.p-top-books-gallery__root14--blur {
  --angle: 100;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}
.p-top-books-gallery__root15--blur {
  --angle: 80;
  animation: top-mv-gallery-root-blur 9s linear infinite;
  animation-direction: reverse;
}

.p-top-mov video{
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: .15;
  mix-blend-mode: color-dodge;
}