@charset "UTF-8";
/* CSS Document */



header {
  top: -75px;
  transition: top 0.3s ease-in-out; /* スムーズなアニメーション */
}



#top_header {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: calc(((100vw - 25vw) / 2) + 25vw + 3vw);
}


#top_header h2 {
  margin: calc(((100vw - 25vw) / 2) - 3vw) auto 0;
  width: 50vw;
  height: 25vw;
  position: relative;
  z-index: 50;
}
#top_header h2 img {
  width: 100%;
  height: auto;
}

#top_header .top_header_arrow {
  transform: translateX(-50%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: fixed; /* その場に残って消えさせる場合 */
  /* position: absolute; 動画にくっついてフェイドアウトさせる場合 */
  bottom: 25px;
  left: 50%;
  z-index: 200;
}
#top_header .top_header_arrow > img {
  width: 50px;
  height: 9px;
  transform: rotate(90deg);
  /* animation: bounce 3.5s infinite; */
  animation: bounce-and-pause 5s infinite;
}
@keyframes bounce-and-pause {
  0%, 12%, 30%, 46%, 60% {
    transform: translateY(0) rotate(90deg);
  }
  24% {
    transform: translateY(-20px) rotate(90deg);
  }
  38% {
    transform: translateY(-10px) rotate(90deg);
  }
  51% {
    transform: translateY(-3px) rotate(90deg);
  }
  60.01%, 100% {
    transform: translateY(0) rotate(90deg);
  }
}

/* 動画 */
#top_header .top_header_video {
  width: 100vw;
  height: 100vw;
  overflow: hidden; /* はみ出した部分を隠す */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#top_header .top_header_video_sp,
#top_header .top_header_video_pc {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保ちつつ、中央を基準に切り取る */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#top_header .top_header_video_pc {
  display: none;
}

/* スライド（Swiper）*/
#top_header .swiper {
  width: 100vw;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#top_header .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#top_header .swiper-slide picture img {
/*  display: block;*/
  width: 100vw;
  height: 100vw;
  object-fit: cover; /* 画像の縦横比を維持しつつ、コンテナを完全にカバー */
}
#top_header .swiper-pagination-bullet {
  --swiper-pagination-bullet-inactive-color: #ffffff; /* 非アクティブなbulletsの色を設定 */
  --swiper-pagination-bullet-inactive-opacity: 0.45; /* 非アクティブなbulletsの透明度を設定 */
}
#top_header .swiper-pagination-bullet-active {
  --swiper-pagination-color: #ffffff; /* アクティブなbulletsの色を設定 */
  --swiper-pagination-bullet-opacity: 0.9; /* アクティブなbulletsの透明度を設定 */
}
#top_header .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px /* ドットの間隔調整 */
}

/* 静止画1枚 */
#top_header .top_header_bg {
  width: 100vw;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#top_header .top_header_bg img {
  width: 100%;
  height: auto;
}



.top_copytext {
  margin: 20vw auto;
  width: 60vw;
  min-width: 330px;
  height: auto;
}
.top_copytext img {
  width: 100%;
  height: auto;
}



.top_contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: calc(100vw - 20px - 20px);
  max-width: 620px;
  height: calc(100vw - 20px - 20px);
  max-height: 620px;
}
.top_contents > li {
  display: block;
  margin-top: 20px;
  width: calc((100vw - 20px * 3) / 2);
  max-width: 300px;
  height: calc((100vw - 20px * 3) / 2);
  max-height: 300px;
}
.top_contents > li:first-of-type, 
.top_contents > li:nth-of-type(2) {
  margin-top: 0;
}
.top_contents > li:first-of-type, 
.top_contents > li:nth-of-type(3) {
  margin-right: 20px;
}
.top_contents > li > a {
  transition: opacity 0.3s ease;
}
.top_contents > li > a:hover {
  opacity: 0.75;
}
.top_contents > li > a > img {
  width: 100%;
  aspect-ratio: 1 / 1;
}



.top_completion {
  
}
.top_completion > p {
  font-size: 2.0rem;
  font-weight: 100;
  text-align: center;
}
.top_completion > p:nth-of-type(2) {
  font-size: 1.4rem;
}
.top_completion > p + p {
  margin-top: 0;
}



.top_access > dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 50px auto 0;
  width: calc(20.0em + 4.0em + 2.0em);
}
.top_access > dl > dt {
  font-weight: 600;
  text-align: right;
  margin-top: 1.0em;
  width: 4.0em;
}
.top_access > dl > dd {
  margin-top: 1.0em;
  width: 20.0em;
}
.top_access > dl > dd > span {
  font-size: 1.2rem;
}
.top_access > dl > dt:first-of-type,
.top_access > dl > dd:first-of-type {
  margin-top: 0;
}
.top_access > dl > dd > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  margin-top: 1.0em;
  width: 20.0em;
  transition: opacity 0.3s ease;
}
.top_access > dl > dd > a:hover {
  opacity: 0.5;
}





@media print, screen and (min-width:1000px) {
  
  header nav ul li:first-of-type a::after {
    width: 35px;
  }
  
  #top_header {
    height: 600px;
  }

  #top_header h2 {
    margin: 0 auto;
    padding-top: calc((600px - 150px) / 2);
    width: 300px;
  }
  
  /* 動画 */
  #top_header .top_header_video {
    height: 100vh;
    /* height: 600px; */
  }
  #top_header .top_header_video_sp {
    display: none;
  }
  #top_header .top_header_video_pc {
    display: block;
    height: 100vh;
    /* height: 600px; */
  }
  
  /* スライド（Swiper）*/
  #top_header .swiper {
    overflow: hidden; /* コンテナからはみ出した部分を隠す */
    height:600px;
  }
  #top_header .swiper-slide {

  }
  #top_header .swiper-slide picture img {
    height: 600px; /* 画像の高さを600pxに設定 */
    position: absolute; /* 絶対配置を指定 */
    top: 50%; /* 垂直方向の中央に移動 */
    left: 50%; /* 水平方向の中央に移動 */
    transform: translate(-50%, -50%); /* 画像の中心を基準に位置を調整 */
  }
  #top_header .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px /* ドットの間隔調整 */
  }
  

  
  .top_copytext {
    margin: 150px auto;
    width: 930px;
    height: auto;
  }
  
  

  .contents_wrap > img.top_img_main {
    margin: 0 calc((100% - 930px) / 2);
    width: 930px;
    height: auto;
  }

  

  .top_contents {
    width: 850px;
    max-width: 850px;
    height: 850px;
    max-height: 850px;
  }
  .top_contents > li {
    margin-top:50px;
    width: 400px;
    max-width: 400px;
    height: 400px;
    max-height: 400px;
  }
  .top_contents > li:first-of-type, 
  .top_contents > li:nth-of-type(3) {
    margin-right: 50px;
  }
  .top_contents > li > a > img {
    width: 400px;
  }

  
  
  .top_completion > p {
    font-size: 2.4rem;
  }
  .top_completion > p:nth-of-type(2) {
    font-size: 1.6rem;
  }
  .top_completion > p + p {
    margin-top: -5px;
  }
  
  
  
  .top_access > dl {
    font-size: 1.5rem;
  }
  .top_access > dl > dt {
    font-weight: 500;
  }
  .top_access > dl > dd {
    margin-top: 1.0em;
    width: 20.0em;
  }
  .top_access > dl > dd > span {
    font-size: 1.3rem;
  }
  .top_access > dl > dt:first-of-type,
  .top_access > dl > dd:first-of-type {
    margin-top: 0;
  }
  .top_access > dl > dd > a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin-top: 1.0em;
    width: 20.0em;
    transition: opacity 0.3s ease;
  }
  .top_access > dl > dd > a:hover {
    opacity: 0.5;
  }
}