@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page CSS
	Editor      : Bface Saeki
	Last Editor : Bface Chiba
	
	Update Description :
  [2022/09/29] top_recommend追加
  [2022/09/12] top_intro,top_pickup追加
	[2022/06/21] top_info修正
	[2022/03/10] 動画セクション追加
	[2022/03/01] プレスリリースセクション追加
====================================== */

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

	1. Redefinition
  2. Section [top_hero]
  3. Section [top_info]
  4. Section [top_exhibitor]
  5. Section [top_outline]
  6. Section [top_exhibit_zone]
  13. Animations
  14. Briefing

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



/*===== 1. Redefinition =====*/
/* box */
main { margin: 0 0 60px;}

@media (max-width: 1024px) {
  /* box */
  main { margin: 0 0 60px;}
}

@media (max-width: 768px) {
  /* box */
  main { margin: 0 0 8vw;}
}


/*===== 2. Section [top_hero]  =====*/
#top_hero {
  padding: 0;
  background: /*url(../img/top/bg-visual.svg) repeat left top / 2px 2px, */url(../img/top/img-visual.jpg) no-repeat center center / cover;
  margin-bottom: 30px;
}

#top_hero #main_announce{
  padding-top: 20px;
  margin: 0 auto;
  max-width: 680px;
}

#top_hero .slide{
  width: 100%;
  height: auto;
  background: #fff;
  line-height: 0;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}

::-webkit-full-page-media, :future, :root #top_hero .slide{
  background: rgba(0,0,0,0.5);
  }

#top_hero .slide a{
  position: relative;
}

#top_hero .slide a.soon{
	opacity: 1;
}

	
#top_hero .slide a:after{
  content:"";
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index: 2;
  border: 10px solid #000;
  opacity: .5;
}

/* 1枚時（slickを使わないルート）の表示を安定化 */
#main_announce .slide.is-single > div { display: block; }
#main_announce .slide.is-single img { display: block; width: 100%; height: auto; }

/* 念のため：スライド内部の画像は常にブロック化 */
#main_announce .slide img { display: block; width: 100%; height: auto; }



#top_hero #top_banner {
  background: rgba(51,51,51,.9);
  width: 100%;
  padding: 20px;
  margin: 40px 0 0;
}

#top_hero #top_banner ul{
  display: flex;
  justify-content: center;
  margin: 0 auto;
/*	max-width: 1024px;*/
  flex-wrap: wrap;
}

#top_hero #top_banner li{
/*  width: calc(20% - 20px);*/
	width: calc(16.66% - 20px);
  margin: 0 10px;
  text-align: center;
}

#top_hero #top_banner li img{width: 100%;}

#top_hero #top_banner li a.soon{
  opacity: 1;
}

#bnr_area ul li img, #top_hero #top_banner li img {
	width: 100%
}
.slick-dots li button {
	width: 75px
}
#bnr_area {
	margin-bottom: 70px
}
#bnr_area ul {
	display: flex;
	justify-content: center;
	align-items: end;
}
#bnr_area ul li {
	width: 492px;
	margin: 0 10px
}

#bnr_area ul li p {
	text-align: center;
	font-size: 1.4rem;
	margin-bottom: 5px;
	font-weight: 700
}

/* === 右下ミニバナー === */
@media (min-width: 769px) {
  .hero-mini-banner--left {
    position: absolute; /* Hero内の位置指定に戻す */
    z-index: 6;
    right: clamp(2%, 4vw, 8%); /* 右側寄せ（調整用） */
    top: 55%;                  /* 上からの位置。中央より少し下 */
    transform: translateY(-50%); /* 高さ中央基準で調整 */
    width: clamp(220px, 20vw, 340px);
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.3));
  }
}
/* === Tablet only: 769–1024px はPCより少し下に === */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-mini-banner--left {
    /* Hero内の右寄りは維持しつつ、縦位置だけ少し下げる */
    top: 68%;                     /* PCの 52% → 60% などに調整 */
    transform: translateY(-50%);  /* 中心基準は維持 */
    right: clamp(6%, 7vw, 12%);   /* 右余白は微調整（任意） */
    width: clamp(220px, 24vw, 360px); /* 画面比でやや控えめ（任意） */
  }
}

/* === SP表示：右上固定（優先度を強めて確実に右側へ） === */
@media (max-width: 768px) {
  .hero-mini-banner--left {
    position: fixed !important;
    top: 55%;
    right: max(30px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(140px, 48vw, 220px);
    z-index: 999;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.3));
    transition: none;
  }
  .banner-close {
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
  }
}


.hero-mini-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.banner-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}
.banner-close:hover { background: rgba(0,0,0,0.8); }
.hero-mini-banner:hover img {
  opacity: 1 !important;
  filter: brightness(1.09); /* ←ほんの少し明るくして白っぽく見せる */
  transition: filter .3s ease;
}

/* 閉じたとき */
.hero-mini-banner.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}





@media (max-width: 1024px) {
  #top_hero #main_announce{
    padding-top: 10.66vw;
    max-width: none;
    width: 70%;
  }

  #top_hero .slide{
    width: auto;
    box-shadow: 1.33vw 1.33vw 2.66vw rgba(0,0,0,0.5);
  }

}

@media (max-width: 768px) {
  #top_hero {
    margin-bottom: 8vw;
  }
  
  #top_hero #main_announce{
    padding-top: 10.66vw;
    max-width: none;
    width: 80%;
  }

  #top_hero .slide{
    width: auto;
    box-shadow: 1.33vw 1.33vw 2.66vw rgba(0,0,0,0.5);
  }
  
  #top_hero .slide a{
    padding: 0!important;
  }
  #top_hero .slide a:after{
    border: 1.33vw solid #000;
  }

  #top_hero #top_banner {
    padding: 2.66vw 5.33vw;
    margin: 14.66vw 0 0;
  }
  
  #top_hero #top_banner li{
     width: calc(33.3% - 2.66vw);
    margin: 0 1.33vw;
  }
  
  .slick-dots li button {
    display: block;
    width: 6.66vw;
  }

  #bnr_area {
    margin: 0 auto 13.33vw;
    padding: 0 2.66vw
  }
  #bnr_area ul li {
    width: calc(50% - 2.66vw)
  }

}


/*===== 3. Section [top_info]  =====*/
#top_info {
  position: relative;
  margin-bottom: 60px;
  padding: 50px 0;
}

#top_info::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 87.5vw;
  height: 100%;
  background: rgba(170,170,170,.25);
  content: "";
}

#top_info > i {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(204,204,204,.5);
  font-size: 80px;
  font-family: 'Merriweather Sans', sans-serif;
  line-height: .8;
  transform: translateY(-50%);
}
#top_info > div > div{
  text-align: center;
  margin-top: 3rem;
}
#top_info > div > div p{
  position: relative;
  font-weight: bold;
  color: #fff;
  padding: 0.5rem 1.5rem;
  background: #000;
  display: inline-block;
  margin-bottom: 2rem;
}
#top_info > div > div p::after{
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  margin-left: -1rem;;
  border: 1rem solid transparent;
  border-top: 1.5rem solid #000;
}
#top_info > div > div a{
  display: block;
  width: 5rem;
  border: solid #000 0.1rem;
  padding: 1rem;
  background: #fff;
  margin: 0 auto;
}

#top_info > div > div img{vertical-align: bottom;}
#top_info ul {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 10px;
}

#top_info li:not(:last-child) { margin-bottom: 10px;}

#top_info ul li:not(:last-child) a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 30px 15px 20px;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
  border: 1px solid #ebebeb;
  background: rgba(255,255,255,.5);
  color: #333;
}
#top_info ul li:not(:last-child) a:not(.placeholder)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: #fff;
  content: "";
  opacity: 0;
  transition: .25s;
}
#top_info ul li:not(:last-child) 　a:hover::before { width: 100%; opacity: 1;}

#top_info ul li:not(:last-child) 　a:not(.placeholder)::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

#top_info ul li:not(:last-child) a.placeholder { pointer-events: none;}

#top_info ul time {
  position: relative;
  margin-right: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

#top_info ul time:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background: #333;
  transform: translateY(-50%);
  content: "";
}

#top_info ul span{
  display: inline-block;
  color: #ffffff;
  padding: 5px 10px;
  margin-right: 10px;
  width: 120px;
  text-align: center;
  font-size: 1.4rem;
}

#top_info ul span.information{background: #69bb3c;}
#top_info ul span.magazine{background: #4d87df;}
#top_info ul span.interview{background: #eba449;}

#top_info ul p {
  flex: 1;
  font-family: sans-serif;
}

@media (max-width: 768px) {
  #top_info {
    margin-bottom: 8vw;
    padding: 5.34vw 0 8vw;
  }

  #top_info > i { font-size: 3.0rem;}

  #top_info ul { padding: 0 2.67vw;}

  #top_info li:not(:last-child) { margin-bottom: 1.34vw;}

  #top_info ul li:not(:last-child) a {
    display: block;
    padding: 2.67vw 4vw;
    background: rgba(255,255,255,.7);
  }
  #top_info ul li:not(:last-child) a:not(.placeholder)::before { display: none;}

  #top_info ul li:not(:last-child) a:not(.placeholder)::after {
    right: 2.67vw;
    width: 1.34vw;
    height: 1.34vw;
  }

  #top_info ul time {
    display: inline-block;
    margin: 0 0 1.34vw;
    padding: 0 0 1.34vw;
    font-size: 1.4rem;
  }

  #top_info ul time:after {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 5.34vw;
    height: 1px;
  }

  #top_info ul p { font-size: 1.4rem;}
  
  #top_info ul span{
    padding: 0 2.66vw;
    margin: 0 0 0 1.33vw;
    width: auto;
    font-size: 1.2rem;
  }
}

/*===== 4. Section [top_exhibitor]  =====*/
#top_exhibitor { margin-bottom: 60px;}


@media (max-width: 768px) {
  #top_exhibitor { margin: 0 2.67vw 10.67vw;}
}

/*===== 5. Section [top_outline]  =====*/
#top_outline {
  margin-bottom: 90px;
  position: relative;
}

#top_outline::before {
  position: absolute;
  bottom: calc(-30px);
  right: 0vw;
  z-index: -1;
  width: 87.5vw;
  height: calc(100% - 30px);
  background: rgba(170,170,170,.25);
  content: "";
}

@media (max-width: 1024px) {
  #top_outline::before {
    bottom: calc(-40px);
    height: calc(100% - 60px);
  }
}

@media (max-width: 768px) {
  #top_outline { margin: 0 2.67vw 10.67vw;}

  #top_outline::before {
    bottom: -2.67vw;
    right: -2.67vw;
    width: calc(87.5vw + 2.67vw);
    height: calc(100% - 10.67vw);
  }
}


/*===== 6. Section [top_exhibit_zone]  =====*/
#top_exhibit_zone ul:after {
  content: "";
  display: block;
  width: calc(25% - 20px);
}
#top_exhibit_zone li{
  padding: 15px;
  margin-bottom: 20px;
  background-color: rgba(209,228,242,0.3);
  border-top: #0080cc 2px solid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#top_exhibit_zone li > a{
  margin-top: auto;
  font-size: 1.4rem;
  width: 100%;
}

#top_exhibit_zone li figure{
  margin-bottom: 10px;
}

#top_exhibit_zone li .target{
  padding: 10px;
  background: #fff;
  font-size: 1.4rem;
}

#top_exhibit_zone li .target span{
  border-bottom: dotted 1px #333;
  padding-bottom: 5px;
}
@media (max-width: 768px){
  #top_exhibit_zone li{
    padding: 4vw;
    margin-bottom: 5.33vw;
    border-top: #ec8ea2 0.53vw solid;
  }
  #top_exhibit_zone li figure{
    margin-bottom: 2.66vw;
  }
  #top_exhibit_zone li div p{
    padding: 2.66vw;
  }

  #top_exhibit_zone li p span{
    border-bottom: dotted 0.26vw #333;
    padding-bottom: 1.33vw;
  }
}

/*===== 7. Section [top_message]  =====*/
#top_message li {
    padding:20px;
    border:5px solid #0080cc;
    background:rgba(209,228,242,0.3)
}
#top_message li>div p:first-child {
    margin-bottom:1rem;
    font-weight:700
}
#top_message li>div span {
    background:#666;
    color:#fff;
    padding:5px 10px;
    margin-bottom:5px;
    display:inline-block
}
#top_message li>div em {
    font-size:2rem;
    margin-top:2px
}
#top_message li>div b {
    font-size:1.8rem;
    margin-top:5px;
    display:block
}
#top_message li figure {
    width:140px;
    padding:5px;
    background:#fff;
    margin-right:10px
}
#top_message li>p {
    line-height:1.4
}
@media (max-width:768px) {
    #top_message li {
        padding:4vw;
        border:1.33vw solid #0080cc;
        text-align:center
    }
    #top_message li>div span {
        padding:1.33vw 2.66vw;
        margin-bottom:1.33vw
    }
    #top_message li>div em {
        margin-top:1.33vw;
        font-size:1.8rem
    }
    #top_message li>div b {
        margin-top:1.33vw
    }
    #top_message li figure {
        width:37.3vw;
        padding:1.33vw;
        margin-right:auto;
        margin-left:auto;
        margin-bottom:2.66vw
    }
}

/*===== 13. Animations =====*/
#top_hero figure::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: hsl(340,79%,55%);
  content: "";
  animation: hero01 .6s ease-in-out .3s forwards;
}
#top_hero figure svg {
  visibility: hidden;
  animation: hero02 .2s ease-in-out .6s forwards;
}

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

#top_outline::before {
  opacity: 0;
  width: 0;
}
#top_outline.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% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: visible;
    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;
  }
}

/*===== 14. Briefing  =====*/

#briefing {
  text-align: center;
}

#briefing a{
  width: 50%;
  max-width: 800px;
  margin: 0 10px 80px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
  transition: .5s;
}

#briefing a:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
}
#briefing a img{
  vertical-align: middle;
}


@media (max-width: 768px){
  #briefing{
    flex-direction: column;
    margin: 0 2.67vw;
  }
  
  #briefing a {
    width: 100%;
    margin: 0 0 10.67vw;
    padding: 0!important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%), 0 1px 1px 1px rgb(0 0 0 / 15%);
    font-size: 1.8rem;
    transition: none;
  }
  
  #briefing a:first-child {
    margin-bottom: 2.67vw;
  }
  
  #briefing a:hover {
    background-position: inherit;
    color: #fff;
  }
  #briefing a img{
      width: 100%;
  }
}