@charset "utf-8";
section.section.hero {
  padding-bottom: 1em;
}
.container_hero {
  max-width: 1920px;
  width: 100%;
  margin: auto;
  background: url(../images/top/bg_hero.png) repeat-x left top / 100%;
  overflow: hidden;
}
.hero_wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.hero_title {
  /* width: 960px; */
  width: 100%;
  height: auto;
}
.hero_title img {
  /* max-width: none; */
}
.slide {
  /* width: 960px; */
  width: 100%;
  height: auto;
}
.slide img {
  margin-top: -1px;
}

/* slider */
.slick_wrapper > ul {
  margin: 0;
}
.slick-dotted.slick-slider {
  margin: 0;
  /* margin-top: 35px; */
}
.slick-dots {
  bottom: -30px;
  margin: 0;
  position: static;
  margin-left: -6%;
}
.slick-dots li {
  margin: 0 4px; 
  width: unset;
  height: 5px;
}
.slick-slide img {
  border-radius:15px;
}
.slick-dots li button {
  width: 70px;
}
.slick-dots li button:before {
  content:'';
  width: 70px;
  height: 5px;
  background: #999999;
  opacity: 1;
}
.slick-dots li.slick-active button:before{
  background: red;
}

.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

/* 共通設定 */
.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 20px;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 6.4vw;
  height: 6.4vw;
  border-top: 1.33vw solid #F05BDD;
  border-right: 1.33vw solid #F05BDD;
  filter:drop-shadow(0px 0px 5px rgb(0, 0, 0.5));
}

/* next */
.slick-next {
  right: 30px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */
.slick-prev {
  left: 30px;
}
.slick-prev::after {
  left: 20px;
  /* left: 4px; */
  transform: rotate(-135deg);
}
.slick-next::after,
.slick-prev::after {
  width: 30px;
  height: 30px;
  border-top: 5px solid yellow;
  border-right: 5px solid yellow;
}
.slick-next {
  right: 8px;
}
.slick-prev {
  left: 8px;
}
.slick-next::after {
  right: 20px;
}
.slick-dots {
  margin-left: 0;
}

/* 出展募集のコメント */
.top_info h2 {
  font-size: clamp(22px,5.4vw,42px);
  font-weight: bold;
  line-height: 1.2;
  color: #10a776;
  text-align: center;
}
.top_info p {
  font-size: clamp(14px,2.3vw,18px);
}

/* 新着情報 */
dl.news_item {
  padding: 0 2.5%;
  display: grid;
  grid-template-columns: 6em 1fr;
  row-gap: 2em; 
  column-gap: 2em;
  overflow: auto;
  line-height: 1.6;
  max-height: 350px;
  max-height: 200px;
}
dl.news_item dd a {
  text-decoration: underline;
}
dl.news_item dd a:hover {
  text-decoration: none;
}

/* Youtubeの下のボタン */
.btn_lastYear {
  margin-top: clamp(20px, 6.5vw, 50px);
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
  border-radius: 5px;
}
.btn_lastYear img {
  border-radius: 10px;
}


/* PCで表示 */
.pc_only {
  display: inline-block;
}
/* PCでは非表示 */
.sp_only, .tb_only, .pc_none {
  display: none;
}

/*------------------------------------------*/
/* 1200px用 */
/*------------------------------------------*/
@media screen and (max-width:1200px){
  /* タブレットで表示 */
  .tb_only, .pc_none {
    display: inline-block;
  }
  /* タブレットでは非表示 */
  .pc_only, .sp_only {
    display: none;
  }

 

  /* 下記は削除しない */
}

/*------------------------------------------*/
/* スマホ用 768px  */
/*------------------------------------------*/
  @media screen and (max-width:768px){
  /* スマホで表示 */
  .sp_only, .pc_none {
    display: inline-block;
  }
  /* スマホでは非表示 */
  .pc_only, .tb_only, .sp_none {
    display: none;
  }

  .container_hero {
    background: url(../images/top/bg_hero.png) repeat-x left top / cover;
    overflow: visible;
  }
  .hero_wrapper {
    display: block;
    overflow:visible;
  }
  .hero_title {
    margin: auto;
  }
  .hero_title img {
    max-width: 100%;
  }
  .slide {
    padding: 2em 0 1em;
  }
  

  /* 下記は削除しない */
}


/*------------------------------------------*/
/* スマホ用 680px  */
/*------------------------------------------*/
  @media screen and (max-width:680px){
    
  /* 新着情報 */
  dl.news_item {
    grid-template-columns: 1fr;
    row-gap: 0.5em; 
  }
  dl.news_item dd {
    margin-bottom: 1em;
  }

  /* slider */
  .slick-dots li button {
    width: 40px;
  }
  .slick-dots li button:before {
    width: 40px;
  }
  

  /* 下記は削除しない */
}

/*------------------------------------------*/
/* スマホ用 480px  */
/*------------------------------------------*/
  @media screen and (max-width:480px){

  

  /* 下記は削除しない */
}