@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page CSS
	Editor      : Bface Saeki
	Last Editor : Bface Chiba
	
	Update Description :
  [2024/04/02] top_message追加
  [2024/03/01] top_achievement追加、top_press削除
  [2022/09/29] top_recommend追加
  [2022/09/12] top_intro,top_pickup追加
	[2022/06/21] top_info修正
====================================== */

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

	1. Redefinition
  2. Section [top_hero]
  3. Section [top_info]
  4. Section [top_outline]
  5. Section [top_structure]
  6. Section [top_exhibitor]
  7. Section [top_others]
  8. Section [top_movie]
  9. Section [top_press]
  10. Section [top_intro]
  11. Section [top_pickup]
  12. Section [top_recommend]
  13. Section [top_achievement]
  14. Section [top_approach]
  15. Section [top_message]
  16. Animations
  17. Briefing
  19. Section [top_detail]

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



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


@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: 60px 0 0;
  background: #fff100;
  margin-bottom: 60px;
}
#top_hero #top_main #top_kv{
  display: flex;
  justify-content: space-between;
  padding: 0 60px 20px;
}

#top_hero #top_main #top_kv .logo{
  width: calc(50% - 30px);
}
#top_hero #top_main #top_kv .logo ul{
	display: flex;
	 justify-content: space-between;
	flex-wrap: wrap;
}
#top_hero #top_main #top_kv .logo li{
	position: relative;
	width: calc(50% - 15px);
	margin-bottom: 10px;
	z-index: 2;
  background: #fff;
}
#top_hero #top_main #top_kv .logo li a{
  display: block;
  padding: 5px 10px;  
  
}
#top_hero #top_main #top_kv .logo li a.placeholder:hover{
  pointer-events: none;
}
#top_hero #top_main #top_kv .logo li a:not(.placeholder){
  box-shadow: 0 3px 4px rgba(0, 0, 0, .1), 0 1px 1px 1px rgba(0, 0, 0, .2);
  transition: 0.6s;
  border-bottom: 2px solid;
}
#top_hero #top_main #top_kv .logo ul li:nth-child(5) a{border-bottom-color: #ce1623;}
#top_hero #top_main #top_kv .logo ul li:nth-child(7) a{border-bottom-color: #df7f1f;}
#top_hero #top_main #top_kv .logo ul li:nth-child(9) a{border-bottom-color: #519536;}

#top_hero #top_main #top_kv .logo li a:not(.placeholder):hover{
  box-shadow: 0 4px 8px rgba(0, 0, 0, .0), 0 1px 1px 1px rgba(0, 0, 0, 0);
  border-bottom: 2px solid #fff;
}
#top_hero #top_main #top_kv .logo li img{
	vertical-align: top;
}
#top_hero #top_main #top_kv .logo li > span{
	position: absolute;
	left: -20px;
	top: 50%;
	background: #c00;
	font-weight: bold;
	color: #fff;
	height: 25px;
	width: 25px;
	font-size: 0.8rem;
	text-align: center;
	border-radius: 50%;
	display: block;
	z-index: -1;
	transform: translateY(-50%);
}
#top_hero #top_main #top_kv .logo li > span > span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}
#top_hero #top_main #top_kv .logo > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#top_hero #top_main #top_kv .logo > div a{
  width: 50%;
  margin: 0;
}
#top_hero #top_main #top_kv .logo > div > p{
  width: calc(50% - 20px);
  background: #000;
  padding: 10px 20px;
  border-radius: 40px;
  color: #fff100;
}
#top_hero #main_announce{
  width: 50%;
  margin: 0;
	z-index: 0;
	position: relative;
}
#top_hero #main_announce #video_wrapper{
	padding: 10px;
	background: #333;
}
#top_hero #main_announce #video_wrapper video{
	width: 100%;
	display: block;
}

#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{
  margin-bottom: 70px;
}
#bnr_area ul{
  display: flex;
  justify-content: center;
  align-items: end;
  flex-wrap:wrap;
}

#bnr_area ul li{
  width: calc(20% - 20px);
  margin: 0 10px 10px;
}

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

#bnr_area ul li img{width: 100%;}


@media (max-width: 1024px) {
	
  #top_hero #top_main #top_kv{
		flex-direction: column;
		padding: 0 5.33vw 2.66vw;
	}
	#top_hero #top_main #top_kv .logo{
		width: 100%;
    margin-bottom: 40px;
	}
  #top_hero #top_main #top_kv .logo li {
    width: calc(50% - 20px);
  }
	#top_hero #top_main #top_kv .logo li > span{
		left: -30px;
		height: 30px;
		width: 30px;
		font-size: 10px;
	}
	#top_hero #top_main #top_kv .logo li > span > span{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	#top_hero #main_announce{
		width: 100%;
	}
	#top_hero #main_announce #video_wrapper{
		padding: 2.66vw;
	}
	#bnr_area ul li p{
		font-size: 8px;
		margin-bottom: 1.33vw
	}
}


@media (max-width: 768px) {
  #top_hero {
    margin: 8vw auto;
  }
  #top_hero #top_main #top_kv .logo{
		width: 100%;
    margin-bottom: 10.66vw;
	}
	#top_hero #top_main #top_kv .logo ul{
		justify-content: center;
		margin-bottom: 5.33vw;
	}
  
  #top_hero #top_main #top_kv .logo li{
	  width: 90%;
		margin-bottom: 2.66vw;
  }
  #top_hero #top_main #top_kv .logo li a{
    display: block;
    padding: 1.33vw 2.66vw;
  }
  #top_hero #top_main #top_kv .logo li a:not(.placeholder){
    box-shadow: 0 0.8vw 1.066vw rgba(0, 0, 0, .1), 0 0.266vw 0.266vw 0.266vw rgba(0, 0, 0, .2);
    border-bottom: 0.522vw solid;
  }

  #top_hero #top_main #top_kv .logo li a:not(.placeholder):hover{
    box-shadow: 0 0.8vw 1.066vw rgba(0, 0, 0, .0), 0 0.266vw 0.266vw 0.266vw rgba(0, 0, 0, 0);
    border-bottom: 0 0.8vw solid #fff;
  }

	#top_hero #top_main #top_kv .logo li > span{
		left: -5.33vw;
		width: 6.66vw;
    height: 6.66vw;
	}
  #top_hero #top_main #top_kv .logo > div{
    flex-wrap: wrap;
  }
  #top_hero #top_main #top_kv .logo > div a{
    width: 100%;
    margin-top: 5.33vw;
  }
  #top_hero #top_main #top_kv .logo > div > p{
    width: 100%;
    padding: 2.66vw 5.33vw;
    border-radius: 10.66vw;
  }
  

  #top_hero #top_banner {
    padding: 2.66vw 0;
    margin: 8vw 0 0;
  }
  
  #top_hero #top_banner li{
    width: calc(50% - 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(33.3% - 2.66vw);
		margin: 0 1.33vw 1.33vw;
  }

}



/*===== 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: 25px;
}
#top_info > div > div p{
  position: relative;
  font-weight: bold;
  color: #fff;
  padding: 5px 15px;
  background: #333;
  display: inline-block;
  margin-bottom: 20px;
	border-radius: 4px;
}
#top_info > div > div p::after{
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 15px solid #333;
}

#top_info > div > div ul{
	display: flex;
	justify-content: center;
}

#top_info > div > div ul li{
	margin: 0 10px;
}

#top_info > div > div a{
  display: block;
  width: 50px;
  padding: 10px;
  background: #333;
  margin: 0 auto;
	border-radius: 5px;
}

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

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

#top_info .box_wrapper > 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 .box_wrapper > 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 .box_wrapper > ul li:not(:last-child) 　a:hover::before { width: 100%; opacity: 1;}

#top_info .box_wrapper > 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 .box_wrapper > ul li:not(:last-child) a.placeholder { pointer-events: none;}

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

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

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

#top_info .box_wrapper > ul span.information{background: #FFB400;}
#top_info .box_wrapper > ul span.magazine{background: #4d87df;}
#top_info .box_wrapper > ul span.interview{background: #eba449;}


#top_info .box_wrapper > 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 > div > div{
		margin-top: 6.66vw;
	}
	#top_info > div > div p{
		padding: 1.33vw 4vw;
		margin-bottom: 5.33vw;
		border-radius: 1.06vw;
	}
	#top_info > div > div p::after{
		margin-left: -2.66vw;
		border: 2.66vw solid transparent;
		border-top: 4vw solid #333;
	}

	#top_info > div > div ul{
		display: flex;
		justify-content: center;
	}

	#top_info > div > div ul li{
		margin: 0 10px;
	}

	#top_info > div > div a{
		display: block;
		width: 50px;
		padding: 10px;
		background: #333;
		margin: 0 auto;
		border-radius: 5px;
	}


	
  #top_info .box_wrapper > ul { padding: 0 2.67vw;}

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

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

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

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

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

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



/*===== 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_interview { 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);
  }
}



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


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



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


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

/*===== 6. Section [top_sns]  =====*/
#top_sns{
	margin-bottom: 80px;
}
#top_sns .flex2 > div{
  box-shadow: 2px 2px 5px rgb(0 0 0 / 25%);
  height: 400px;
  overflow-y: scroll;
}
@media (max-width: 768px) {
  #top_sns { margin: 0 2.67vw 10.67vw;}
  
  #top_sns .flex2 > div:first-child{
    margin-bottom: 5.33vw;
  }
}



/*===== 7. Section [top_others]  =====*/
#top_others .flex2 ul li {
/*  border: 1px solid #ccc;*/
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 1px;
  background: #fff;
}

#top_others .flex2 ul a,
#top_others .flex2 ul a img { display: block; padding: 0;}

#top_others aside {
  text-align: center;
}

#top_others aside .flex3::after{
  content: "";
  display: block;
  width: calc(33.33% - 10px);
}

#top_others aside a{
  max-width: 800px;
  margin: 0 0 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
  transition: .5s;
}

#top_others aside a:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 1px 1px rgba(0, 0, 0, 0.15);
}

#top_others aside a img{
  vertical-align: middle;
}


@media (max-width: 768px) {
  #top_others { padding: 0 2.67vw;}
  
  #top_others .flex2 ul li {
    width: calc(50% - 2.68vw);
    margin: 0 1.34vw 1.34vw;
  }
  
/*
  #top_others aside{
    margin: 0 2.67vw;
  }
*/
  
  #top_others aside a {
    width: 100%;
    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;
    margin-bottom: 4vw;
  }
  
  #top_others aside a:hover {
    background-position: inherit;
    color: #fff;
  }
  #top_others aside a img{
      width: 100%;
  }
}


/*===== 8. Section [top_muvie]  =====*/

#top_movie{
  margin-bottom: 80px;
}

#top_movie > div > div > div{
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}

#top_movie > div > div{
}


#top_movie > div iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

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

/*===== 13. Section [top_achievement]  =====*/

#top_achievement #merit_number {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
 margin-top: 30px;
}

#top_achievement #merit_number li{
  width: calc(25% - 10px);
  padding: 5px;
  background: #fff100;
}

#top_achievement #merit_number div{
  border: 1px solid rgba(255,255,255,.65);
  padding: 20px;
  height: 100%;
}

#top_achievement #merit_number li div p{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dotted #333;
}


@media (max-width: 768px){
  #top_achievement #merit_number {
    margin-top: 8vw;
  }

  #top_achievement #merit_number li{
    width: calc(100%);
    padding: 1.33vw;
    margin-bottom: 2.66vw;
    background: #fff100;
  }
  
  #top_achievement #merit_number div{
    border: 0.266vw solid rgba(255,255,255,.65);
    padding: 5.33vw;
  }
  
  #top_achievement #merit_number li div p{
    margin-bottom: 2.66vw;
    padding-bottom: 2.66vw;
    border-bottom: 0.266vw dotted #333;
  }
}



/*===== 10. Section [top_intro] =====*/
#top_intro li{
  position: relative;
  background: #fff;
  padding: 20px 30px 20px 20px ;
  margin-right: 30px;
  width: calc(25% - 30px);
  font-weight: bold;
}

#top_intro li span{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
}

#top_intro li:nth-of-type(2) span{width: 38px;}
#top_intro li:nth-of-type(4) span{ width: 33px;}


#top_intro .arrow_down {
  position: relative;
  vertical-align: middle;
  text-decoration: none;
}


#top_intro .arrow_down::before{
  position: absolute;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#top_intro .arrow_down::before {
  top: -30px;
  right: 50%;
  transform: translateX(50%);
  box-sizing: border-box;
  border: 45px solid transparent;
  border-top: 25px solid #ededed;
}

@media (max-width: 768px){
  #top_intro{
    margin: 0 2.67vw 10.67vw;
  }
  
  #top_intro li{
    position: relative;
    background: #fff;
    padding: 20px 40px 20px 20px;
    margin-right: 0;
    width: 100%;
  }
  
  #top_intro li:nth-child(even){ padding: 20px 20px 20px 40px;}

  #top_intro li span{
    top: -2.66vw;
    right: -2.66vw;
    width: 8vw;
   z-index: 10;
  }
  
  #top_intro li:nth-child(even) span{left: -2.66vw;}
  #top_intro li:nth-of-type(2) span{width: 10.13vw;}
  #top_intro li:nth-of-type(4) span{ width: 8.8vw;}

  #top_intro .arrow_down {
    position: relative;
    vertical-align: middle;
    text-decoration: none;
  }
  
  #top_intro .arrow_down::before {
    top: -8vw;
    border: 12vw solid transparent;
    border-top: 6.67vw solid #ededed;
  }
 } 


/*===== ■11. Section [top_seminar] =====*/

#top_seminar .table_general table{
  height: auto;
}
.seminar_detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #666;
    font-size: 1.4rem;
}

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

}


/*===== ■11. Section [top_pickup] =====*/

#top_pickup ul.card_basic > li{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li a{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li a:hover{
  border-radius: 15px;
}

#top_pickup ul.card_basic > li figure::before,
#top_pickup ul.card_basic > li figure::after{
  display: none;
}

#top_pickup ul.card_basic > li h3{
  border-bottom: 1px solid #ccc;
}

#top_pickup ul.card_basic > li figure img{
  border-radius: 10px 10px 0 0;
	width: 100%;
}

#top_pickup ul.card_basic > li a p > span {
  position: relative;
  padding-right: 25px;
  color: #fff100;
}

#top_pickup ul.card_basic > li a p > span::before,
#top_pickup ul.card_basic > li a p > span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#top_pickup ul.card_basic > li a p > span::before {
  width: 19px;
  height: 19px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

#top_pickup ul.card_basic > li a p > span::after {
  width: 6px;
  height: 6px;
  right: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 768px){
  #top_pickup{
    margin:0 2.67vw 10.67vw;
  }
  
  #top_pickup ul.card_basic > li{
    border-radius: 4vw;
    margin-bottom: 8vw;
  }

  #top_pickup ul.card_basic > li a{
    border-radius: 4vw;
  }

  #top_pickup ul.card_basic > li a:hover{
    border-radius: 4vw;
  }

  #top_pickup ul.card_basic > li figure::before,
  #top_pickup ul.card_basic > li figure::after{
    display: none;
  }

  #top_pickup ul.card_basic > li h3{
    border-bottom: 0.266VW solid #ccc;
  }

  #top_pickup ul.card_basic > li figure img{
    border-radius: 2.67VW 2.67VW 0 0;
  }

  #top_pickup ul.card_basic > li a > span { padding-right: 6.68vw;}
  #top_pickup ul.card_basic > li a > span::before {
    width: 5.34vw;
    height: 5.34vw;
  }
  
  #top_pickup ul.card_basic > li a > span::after {
    width: 1.6vw;
    height: 1.6vw;
    right: 2.67vw;
  }

  #top_pickup ul.card_basic>li a {
    padding: 4vw!important;
  }
}


/*===== ■12. Section [top_recommend] =====*/
#top_recommend li > p{
  text-indent: 0;
}
@media (max-width: 768px){
  #top_recommend {
    padding: 0 2.67vw ;
  }
}

/*===== ■13. Section [top_zone] =====*/
#top_zone ul:after {
  content: "";
  display: block;
  width: calc(25% - 20px);
}
#top_zone li{
  padding: 15px;
  margin-bottom: 20px;
  background-color: rgba(255,241,0,0.3);;
  border-top: #FCC800 2px solid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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


#top_zone li figure{
  margin-bottom: 10px;
}
#top_zone li div p{
  padding: 10px;
  background: #fff;
  font-size: 1.4rem;
}

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

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


/*===== ■14. Section [top_approach] =====*/
@media (max-width: 768px){
  #top_approach{
    margin: 0 2.67vw 10.67vw;
  }
}
/*===== ■15. Section [top_message] =====*/
#top_message li{
  padding: 20px;
  border: solid 5px #fff100;
  background: rgba(255,241,0,0.2);
}
#top_message li > div p:first-child{
	margin-bottom: 1rem;
  font-weight: bold;
}

#top_message li > div span{
  background: #666;
  color: #fff100;
  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{
    margin: 0 2.67vw 10.67vw;
  }
  #top_message li{
    padding: 4vw;
    border: solid 1.33vw #fff100;
		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;
  }
}

/*===== ■16. Animations =====*/
#top_hero figure::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: calc(100% + 110px);
  background: hsl(56,100%,29%);
  content: "";
  animation: hero01 .6s ease-in-out .3s forwards;
	z-index: 2
}
#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;
  }
}

/*===== ■17. 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%;
  }
}

/*===== ■19. Section [top_detail] =====*/
#top_detail ul.card_basic > li figure::before,
#top_detail ul.card_basic>li figure::after{
  display: none;
}
@media (max-width: 768px){
  #top_detail {
      margin: 0 2.67vw 10.67vw;
  }
}



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

#top_keynote::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: "";
}
#top_keynote h2{
  position: relative;
  display: inline-block;
}
#top_keynote h2 b{
  position: absolute;
  display: block;
  left: calc(100% + 10px);
  color: #fff;
  background: #ee0000;
  bottom: 10px;
  font-size: 1.8rem;
  padding: 0px 10px;
  transform: rotate(0) skewX(-10deg);
  
}
@media (max-width: 1024px) {
  #top_keynote::before {
    bottom: calc(-40px);
    height: calc(100% - 60px);
  }
}


@media (max-width: 768px) {
  #top_keynote{ 
    margin: 21.33vw 2.67vw 10.67vw;
  }
  #top_keynote::before {
    bottom: -2.67vw;
    right: -2.67vw;
    width: calc(87.5vw + 2.67vw);
    height: calc(100% - 10.67vw);
  }
  #top_keynote h2{
    font-size: 2.4rem;
  }
  #top_keynote h2 b{
    left: 0;
    color: #fff;
    background: #ee0000;
    bottom: calc(100% + 10px);
    padding: 0px 10px;
    font-size: 1.6rem;

  }
  
}