@charset "utf-8";

#carousel{
  position:relative;
}
@media screen and (min-width: 769px) and (max-width: 959px) {
  #carousel {
    margin: 60px 0 0;
  }
}
  .hd{
    position:fixed;
    top:0;
    left:0;
  }

.swiper-slide img {
  width: 100%;
  height: 100vh!important;
  object-fit: cover;
}

#carousel .swiper.slider{
  height: calc(100dvh);
  top: inherit;
}
.hd_inner{
  flex-wrap: wrap;
}
main{
  padding-top: 60px;
}

@media screen and (min-width:768px) {
  #carousel .swiper.slider{
    height: calc(100vh);
  }
  .hd_menu{
    order:0;
  }
  .hd_inner--right .pc{
    width:100%;
    margin-bottom:15px;
    order:1;
  }

}

.hd_top{
  gap: unset;
}

@media screen and (min-width:960px) {
  .hd_inner--right .pc{
    margin-bottom:0px;
  }
  .logo-area{
    min-width:200px;
  }
  .hd_cts {
      padding: 0;
  }
  .hd_top{
    justify-content: space-between;
    padding:10px 10px 10px 0px;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
  }
  .hd_inner{
    width:unset;
    flex-wrap: nowrap;
  }
  .hd .js-nav{
    height:80px;
  }
  .hd_menu ul{
    flex-wrap: nowrap;
  }

  .hd_menu ul li{
    font-size:0.9rem;
  }

  .hd-trans{
    min-width: 260px;
  }
  .hd_link{
    order:0;
  }

  .hd_top::-webkit-scrollbar {
    height: 4px;
  }

  .hd_top::-webkit-scrollbar-track {
    background: transparent;
  }

  .hd_top::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
  }

  .hd_top::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
 .site_menubar{
   position: sticky;
 }
 main{
   padding-top: 80px;
 }

}

#carousel .swiper.slider-thumbnail .swiper-wrapper{
  justify-content: flex-end;
  padding: 2% 0;
}

#carousel .swiper.slider-thumbnail{
  position: absolute;
  bottom: 0;
}

.btn_area p a, .btn_area p a{
  display: flex;
  align-items: center;
  background: #324155;
  padding: 13px 18px;
  width: 100%;
  font-weight: bold;
  color: #fddf67;
}

/* carousel の next prev を消す
.full_view .swiper-button-next ,
.full_view .swiper-button-prev {
  display: none;
}
*/

/* indexではpaddinなし */
:has(#carousel) > main{
  padding-top:0;
}

/* メニューバーあり下層ではpaddingなし */
@media screen and (min-width:960px) {
 :has(.site_menubar) > main{
   padding-top:0;
 }
}