@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page CSS
	Editor      : Bface Nakamura
  Last Editor : Bface Nakamura
	
	Update Description :
	[2025/06/24] 新規作成
====================================== */

/*========== Style Contents ==========

	1. Redefinition
  2. Section [top_hero]
  3. Section [top_structure]
  4. Section [top_info]
  5. Section [top_outline]
  6. Section [top_exhibitor]
  7. Section [top_others]
  8. Animations

====================================== */



/*===== 1. Redefinition =====*/

main { margin: 0 0 6rem;}

@media (max-width: 768px) {
  main { margin: 0 0 3rem;}
}



/*===== 2. Section [top_hero]  =====*/
#top_hero {
  padding: 6rem 0 3rem;
  background: var(--dominantC);
  #top_main {
    #top_kv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 6rem 2rem;
      .logo { width: 35%;}
    }
  }
  #main_announce {
    position: relative;
    width: 50%;
    margin: 0 10rem;
    z-index: 0;
    > div {
      display: flex;
      justify-content: space-between;
    }
    .slide {
      width: 100%;
      height: auto;
      background: var(--baseC);
      line-height: 0;
      box-shadow: .5rem .5rem 1rem rgba(0,0,0,.5);
      a { 
        position: relative;
        width: 100%;
        &::after {
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          z-index: 2;
          border: 1rem solid var(--DC);
          content: "";
          opacity: .5
        }
        &.soon { opacity: 1;}
      }
      .slick-dots {
        li {
          button {
            width: 7.5rem;
          }
          &.slick-active button { background: var(--DC);}
        } 
      }
    }
  }
  #top_banner {
    width: 100%;
    margin: 4rem 0 0;
    padding: 2rem;
    background: rgba(51,51,51,.9);
    ul {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      flex-wrap: wrap;
      li {
        width: calc(16.66% - 2rem);
        margin: 0 1rem;
        text-align: center;
        img { width: 100%;}
        a.soon {opacity: 1;}
      }
    }
  }
}

@media (max-width: 1024px) {
  #top_hero {
    #top_main{
      #top_kv {
        flex-direction: column;
        padding: 0 5rem 2.5rem;
        .logo { width: 80%;}
      }
    }
    #main_announce {
      padding-top: 5rem;
      max-width: none;
      width: 90%;
      .slide {
        width: auto;
        box-shadow: 1.5rem 1.5rem 2.5rem rgba(0,0,0,.5);
      }
    }
  }
}

@media (max-width: 768px) {
  #top_hero {
    margin: 0 auto 3rem;
    padding: 3rem 0 1rem;
    #top_main{
      #top_kv {
        padding: 0 2rem 1rem;
        .logo { width: 100%;}
      }
    }
    #main_announce {
      padding-top: 2rem;
      .slide {
        box-shadow: .5rem .5rem 1rem rgba(0,0,0,.5);
        a {
          padding: 0!important;
          &::after {
            border: .5rem solid var(--DC);
          }
        }
        .slick-dots {
          li {
            button {
              display: block;
              width: 2.5rem;
            }
          }
        }   
      }
    }
    #top_banner {
      padding: 1rem 0;
      margin: 3rem 0 0;
      ul {
        li {
          width: calc(33% - 1rem);
          margin: 0 .5rem;
        }
      }
    }
  }
}



/*===== 3. Section [top_structure]  =====*/
#top_structure { 
  margin-top: 5rem;
}

@media (max-width: 768px) {
  #top_structure { margin: 0 auto;}
}



/*===== 4. Section [top_info]  =====*/
#top_info {
  position: relative;
  margin: 9rem auto 6rem;
  padding: 5rem 0;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 87.5vw;
    height: 100%;
    background: rgba(170,170,170,.25);
    content: "";
    z-index: -1;
  }
  > i {
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(204,204,204,.5);
    font-size: 8rem;
    font-family: 'Merriweather Sans', sans-serif;
    line-height: .8;
    transform: translateY(-50%);
  }
  ul {
    max-width: 104.4rem;
    margin: 0 auto;
    padding: 0 1rem;
    li:not(:last-child) { 
      margin-bottom: 1rem;
    }
    a {
      display: flex;
      align-items: center;
      position: relative;
      padding: 1.5rem 2rem;
      box-shadow: 0 .2rem .3rem 0 rgba(0,0,0,.1);
      border: .1rem solid var(--GCl);
      background: rgba(255,255,255,.5);
      color: var(--DC);
      &:not(.placeholder)::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: var(--baseC);
        content: "";
        z-index: -1;
        opacity: 0;
        transition: .25s;
      }
      &:hover::before { width: 100%; opacity: 1;}
      &:not(.placeholder)::after {
        position: absolute;
        top: 50%;
        right: 2rem;
        width: .6rem;
        height: .6rem;
        border-top: .2rem solid currentColor;
        border-right: .2rem solid currentColor;
        transform: translateY(-50%) rotate(45deg);
        content: "";
      }
    }
    .placeholder { pointer-events: none;}
    time {
      position: relative;
      margin-right: 1.5rem;
      padding-right: 1.5rem;
      white-space: nowrap;
      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: .1rem;
        height: 2rem;
        background: var(--DC);
        transform: translateY(-50%);
        content: "";
      }
    }
    p {
      flex: 1;
      font-family: sans-serif;
    }
  }
}

@media (max-width: 768px) {
  #top_info {
    margin: 5rem auto 3rem;
    padding: 2rem 0 3rem;
    > i { font-size: 3rem;}
    ul { 
      padding: 0 1rem;
      li:not(:last-child) { margin-bottom: .5rem;}
      a {
        display: block;
        padding: 1rem 1.5rem;
        background: rgba(255,255,255,.7);
        &:not(.placeholder)::before { display: none;}
        &:not(.placeholder)::after {
          right: 1rem;
          width: .5rem;
          height: .5rem;
        }
      }
      time {
        display: block;
        margin: 0 0 .5rem;
        padding: 0 0 .5rem;
        font-size: 1.2rem;
        &::after {
          position: absolute;
          top: auto;
          right: auto;
          bottom: 0;
          left: 0;
          width: 2rem;
          height: .1rem;
        }
      }
      p { font-size: 1.4rem;}
    }
  }
}



/*===== 5. Section [top_outline]  =====*/
#top_outline {
  margin-bottom: 9rem;
  position: relative;
  &::before {
    position: absolute;
    bottom: calc(-3rem);
    right: 0;
    width: 87.5vw;
    height: calc(100% - 3rem);
    background: rgba(170,170,170,.25);
    content: "";
    z-index: -1;
  }
  .flex {
    flex-wrap: nowrap;
    gap: 4rem;
  }
  
}

@media (max-width: 1024px) {
  #top_outline {
    &::before {
      height: calc(100% - 4rem);
    }
  }
}

@media (max-width: 768px) {
  #top_outline { 
    margin: 0 1rem 5rem;
    &::before {
      bottom: -1rem;
      right: -1rem;
      width: calc(87.5vw + 1rem);
      height: calc(100% - 4rem);
    }
    .flex {
      flex-wrap: wrap;
      gap: 0;
    }
    .video-wrap {
      max-width: 100%;
    }
  }
}



/*===== 6. Section [top_exhibitor]  =====*/
#top_exhibitor { margin-bottom: 6rem;}

@media (max-width: 768px) {
  #top_exhibitor { 
    margin-bottom: 3rem;
    padding: 0 1rem 1rem;
    ul.flex4 li { margin:0 auto.5rem}
  }
}



/*===== 7. Section [top_others]  =====*/
#top_others { 
  a {
    margin: 0 0 2rem;
    padding: 2rem 4rem;
    box-shadow: 0 .4rem .8rem rgba(0, 0, 0, 0.5), 0 .1rem .1rem .1rem rgba(0, 0, 0, 0.15);
    &:hover {
      box-shadow: 0 .2rem .4rem rgba(0, 0, 0, 0.25), 0 .1rem .1rem .1rem rgba(0, 0, 0, 0.15);
    }
  }
}

@media (max-width: 768px) {
  #top_others { 
    padding: 0 1rem;
    a {
      margin-bottom: 1rem;
      padding: 1rem 2rem;
      box-shadow: 0 .2rem .4rem rgb(0 0 0 / 25%), 0 .1rem .1rem .1rem rgb(0 0 0 / 15%);
    }
  }
}



/*===== 8. Animations =====*/
.top_overlay {
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--dominantC);
    content: "";
    z-index: 3;
    animation: hero01 .6s ease-in-out .3s forwards;
  }
}

.top_contents {
  opacity: 0;
  animation: hero02 .2s ease-in-out .7s forwards;
}

#top_info {
  &::before {
    opacity: 0;
    transform: translateX(-100%);
  }
  &.anim::before { animation: move01 .6s ease-in-out .3s forwards;}
}

#top_outline {
  &::before {
    opacity: 0;
    width: 0;
  }
  &.anim::before { animation: move02 .6s ease-in-out .3s forwards;}
}

@keyframes hero01 {
  0% {
    width: 0;
    left: 0;
  }
  30% {
    left: 0;
    width: 100%;
  }
  70% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

@keyframes hero02 {
 0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes move01 {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes move02 {
  0% {
    opacity: 1;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 87.5vw;
  }
}