/*-------------------- common --------------------*/
body {
  position: relative;
}
.corner_deco {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  animation: corner_fadeIn 1s linear 1 forwards;
  animation-delay: 1.6s;
}
@keyframes corner_fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

  .stage {
    position: absolute;
 top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 4rem);
    height: calc(110vh - 2rem);
  }

  .stage {
    --path: path('M0,0 L0,0 Z');
  }

  .ball {
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    offset-path: var(--path);
    offset-rotate: 0deg;
    animation-name: orbit;
    animation-duration: 120s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @keyframes orbit {
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
  }


.main_contents {
  padding: 0 4rem 8rem;
margin: 5rem auto 0;
    max-width: 500px;
    opacity: 0;
    animation: contents_fadeIn 1s linear 1 forwards;
    animation-delay: .6s;
}
@keyframes contents_fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/*-------------------- //common --------------------*/
/*-------------------- top --------------------*/
#top {
  min-height: 100vh;
  width: 100%;
  position: relative;
}
#top .top_kv_area {
  padding-top: 8rem;
  width: 100%;
  height: auto;
}
#top .top_kv_area h1 .logo_30th {
  width: 80%;
  height: auto;
  max-width: 500px;
  margin: 0 auto;
  opacity: 0;
  animation: logo30thIn 1s linear 1 forwards;
      animation-delay: .2s;
}
@keyframes logo30thIn {
  0% {opacity: 0; transform: scale(0.8) translateY(30px);}
  60% {opacity: 1; transform: scale(1.1) translateY(-20px);}
  100% {opacity: 1; transform: scale(1) translateY(0);}
}


#top .top_kv_area h1 .special_site {
  color: #C23332;
  font-size: 10vw;
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1.6rem auto 0;
  text-align: center;
  opacity: 0;
   animation: ssFadeIn 1s linear 1 forwards;
       animation-delay: .4s;
}
@keyframes ssFadeIn {
  0% {opacity: 0; transform: scale(0.8) translateY(30px);}
  60% {opacity: 1; transform: scale(1.1) translateY(-20px);}
  100% {opacity: 1; transform: scale(1) translateY(0);}
}

#top .top_kv_area .kv_puffy {
  width: 100%;
  height: auto;
    margin: 4rem auto 0;
    opacity: 0;
    animation: kvpuffy_fadeIn .6s linear 1 forwards;
}
@keyframes kvpuffy_fadeIn {
0% {opacity: 0; transform: scale(0.8) translateY(30px);}
  60% {opacity: 1; transform: scale(1.1) translateY(-20px);}
  100% {opacity: 1; transform: scale(1) translateY(0);}
}

/*-------------------- //top --------------------*/
/*-------------------- main --------------------*/
.main_contents .link_area .link_list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.main_contents .link_area .link_list li .site_num {
  margin-bottom: 0.4rem;
  display: block;
  font-size: 2rem;
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  color: #000;
}
.main_contents .link_area .link_list li a .link_img {
  overflow: hidden;
  border: solid 1px #000;
  border-radius: 5px;
}
.main_contents .link_area .link_list li a .link_img img {
  transition: all .2s;
}
.main_contents .link_area .link_list li a:hover .link_img {
  border: solid 1px #C23332;
}
.main_contents .link_area .link_list li a:hover .link_img img {
  transition: all .2s;
  transform: scale(1.05);
}
.main_contents .link_area .link_list li a .site_tit {
  font-size: 1.6rem;
  font-weight: 700;
    font-family: "helvetica-neue-lt-pro", sans-serif;
  margin-top: .8rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .2s;
}
.main_contents .link_area .link_list li a:hover .site_tit {
  color: #C23332;
  transition: all .2s;
}
.main_contents .link_area .link_list li a .site_tit .arrow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-left: .8rem;
  background: url('../images/arrow.svg') no-repeat center / contain;
    transition: all .2s;
  }
  .main_contents .link_area .link_list li a:hover .site_tit .arrow {
    background: url('../images/arrow_red.svg') no-repeat center / contain;
    transition: all .2s;
    animation: arrowSwaying .8s ease-in 1;
}
@keyframes arrowSwaying {
  0% {transform: rotate(0deg);}
  20% {transform: rotate(20deg);}
  40% {transform: rotate(-16deg);}
  60% {transform: rotate(12deg);}
  80% {transform: rotate(-8deg);}
  100% {transform: rotate(0deg);}
}
/*-------------------- //main --------------------*/
/*-------------------- footer --------------------*/
footer {
  background-color: #fff !important;
}
/*-------------------- //footer --------------------*/


@media (min-width: 768px) {
.main_contents {
    padding: 0 8rem 8rem;
    max-width: none;
}
.main_contents .link_area .link_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
}
.main_contents .link_area .link_list li a .site_tit .arrow {
  width: 2.8rem;
  height: 2.8rem;
  }
.stage {
    width: calc(100% - 6rem);
    height: calc(110vh - 6rem);
            top: 3.2rem;
  }
}


@media (min-width: 1100px) {
#top .top_kv_area {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 0 4%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#top .top_kv_area .kv_puffy {
    max-width: none;
    flex: 1;
    margin: 0;
}
#top .top_kv_area h1 {
    flex: 1;
}
  #top .top_kv_area h1 .logo_30th {
  width: 100%;
    max-width: none;
}
#top .top_kv_area h1 .special_site {
        font-size: 5vw;
}

  .main_contents .link_area .link_list {
        grid-template-columns: 1fr 1fr 1fr;
}
.main_contents .link_area .link_list li .site_num {
    font-size: 2rem;
}
.main_contents .link_area .link_list li a .site_tit {
    font-size: 1.6rem;
}
}

@media (min-width: 1400px) {
    .main_contents .link_area .link_list li a .site_tit {
        font-size: 2rem;
    }
}


@media (max-width: 374px) {
  .main_contents .link_area .link_list li a .site_tit {
    font-size: .75rem;
}
}