@charset "UTF-8";

/* ===================================
	File Name   : module.css
	Description : Exhibitor Contents CSS
	Editor      : Bface Saeki
	Last Editor : Bface Chiba
	
	Update Description 
  [2023/01/19] voice miraiスタイル追加
  [2022/05/20] feeページにdeadline class追加
	[2021/03/10] reportページに出展者インタビュー情報掲載
	[2021/03/04] reportページスタイル追加
	[2021/04/08] faqページスタイル追加

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

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

	1. Share Elements
	2. Table Flow
  3. FaQ  
  4. Matching
  5. Report
  6. Booth
  7. Committee
  8. Competition
  9. Mirai
  10. Voice



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



/*===== ■1. Share Elements =====*/
h1 {
  position: relative;
}

h1 .speech {
  position: absolute;
  top: -2.5em;
  left: 50%;
  width: fit-content;
  padding: 3px 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 1.4rem;
  background: #333;
  transform: translateX(-50%);
}

h1 .speech::before {
  position: absolute;
  bottom: -.5em;
  left: 50%;
  width: 10px;
  height: 10px;background: linear-gradient(to top right,transparent 50%,#333 50.5%) no-repeat top left/50% 100%,linear-gradient(to top left,transparent 50%,#333 50.5%) no-repeat top right/50% 100%;
  transform: translateX(-50%);
  content: '';
}

i.ico_plus,
i.ico_plus::after {
  display: block;
  position: relative;
  width: 10px;
  height: 50px;
  margin: 0 auto;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,.15);
  background: linear-gradient(135deg, #e84a65 0%, #db2571 100%) no-repeat left top;
}
i.ico_plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 10px;
  transform: translate(-50%, -50%);
  content: "";
}


@media (max-width: 768px){
  i.ico_plus {
    width: 2.67vw;
    height: 10.67vw;
  }
  i.ico_plus::after {
    width: 10.67vw;
    height: 2.67vw;
  }
}




/*===== ■2. Table Flow =====*/
.table_flow {
  width: 100%;
  height: 100%;
}

.table_flow li{
  position: relative;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #646d7c;
  padding: 5px 7px;
  margin-bottom: 30px;
}

.table_flow li::after, .table_flow li::before {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 10px;
  background: #646d7c;
  content: "";
}

.table_flow li::before {left: 0;}
.table_flow li::after {right: 0;}

.table_flow li div{
  background: #646d7c;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 10px ;
}

.table_flow li p{
  flex: 1;
  margin-left: 20px;
  font-size: 1.8rem;
  font-weight: bold;
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: center;
}

.table_flow li span{
  position: absolute;
  top: 100%;
  right: calc(50% - 30px);
  content: '';
  border-top: 20px solid #ccc;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  z-index: -1;
}


@media (max-width: 768px){
  .table_flow li {
    display: block;
    width: 100%;
    padding: 2.67vw;
    border-bottom: 0.54vw solid #646d7c;
    margin-bottom: 5.34vw;
  }
  
  .table_flow li::after, .table_flow li::before {
    width: 0.54vw;
    height: 2.67vw;
  }

  .table_flow li div {
    display: block;
    padding: 4vw 2.67vw;
    margin-bottom: 2.67vw;
    width: 100%;
    font-size: 4.27vw;
  }
  
  .table_flow li p {
    flex: 1;
    margin-left: 0;
    font-size: 4.27vw;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  
  .table_flow li span{
    position: absolute;
    right: calc(50% - 5.34vw);
    border-top: 4vw solid #ccc;
    border-right:  5.34vw solid transparent;
    border-left: 5.34vw solid transparent;
  } 

}




/*===== ■3.FaQ =====*/
#faq .faq_q {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 5px;
  background: #646d7c;
}

#faq .faq_q.active::before {
  transform: translateY(-50%) rotate(-135deg);
  transition: all .5s;
}

#faq .faq_q.active::after {
	position:absolute;
	width: 50px;
	height: 20px;
	bottom: -20px;
	left: 50%;
  transform: translateX(-50%);
	background:linear-gradient(to top right, transparent 70%, #646d7c 50%) top left/ 50% 100% no-repeat,
	linear-gradient(to top left, transparent 70%, #646d7c 50%) top right / 50% 100% no-repeat;
  content:"";
}

#faq .faq_q::before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 12px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transition: all .5s;
  content: "";
}

#faq .faq_q:hover::before {
  top: calc(50%  + 5px);
}

#faq .faq_q.active:hover::before {
  top: 50%;
}

#faq .faq_q > span {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 3.0rem;
  font-weight: bold;
  color: #646d7c;
}

#faq .faq_q > span + p {
  margin: 5px 50px 5px 10px;
  font-size: 2.0rem;
  font-weight: bold;
  color: #fff;
}

#faq .ans_wrapper {
  display: none;
}

#faq .faq_ans {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px 5px 5px;
}

#faq .faq_ans > span {
  display: inline-block;
  padding: 5px 10px;
  background: #e6316e;
  font-size: 3.0rem;
  font-weight: bold;
  color: #fff;
}

#faq .faq_ans > span + div {
  width: 100%;
  margin-left: 10px;
}


@media (max-width: 768px) {
  #faq .faq_q {
    padding: 1.34vw;
  }
  
  #faq .faq_q.active::after {
    width: 10.67vw;
    height: 5.34vw;
    bottom: -5.34vw;
  }

  #faq .faq_q::before {    
    right: 4vw;
    width: 2.67vw;
    height: 2.67vw;
  }

  #faq .faq_q:hover::before {
    top: 50%;
  }

  #faq .faq_q > span {
    padding: 1.34vw 2.67vw;
    font-size: 2.0rem;
  }

  #faq .faq_q > span + p {
    margin: 1.34vw 10.67vw 1.34vw 2.67vw;
    font-size: 1.6rem;
  }

  #faq .faq_ans {
    padding: 5.34vw 1.34vw 1.34vw;
  }

  #faq .faq_ans > span {
    padding: 1.34vw 2.67vw;
    font-size: 2.0rem;
  }

  #faq .faq_ans > span + div {
    margin-left: 2.67vw;
  }


}


/*===== ■3. Matching Elements =====*/
.matching{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.matching > div{
  width: calc(50% - 140px);
  position: relative;
}

.matching > p{
  width: 240px;
  padding: 0 20px;
  text-align: center;
}

.matching > p span:first-child{
  display: block;
  width: 80%;
  margin: 0 auto;
}

.matching > div::before,
.matching > div::after{
  position: absolute;
  content: "";
}

.matching > div::before{
  top: 90px;
  width: 60px;
  height: 15px;
  background: #646d7c;
}

.matching > div::after{
  top: 75px;
  width: 30px;
  height: 30px;
  border-top: 15px solid #646d7c;
  border-right: 15px solid #646d7c;
}

  
.matching > div:first-of-type::before{
  right: -50px;
}

.matching > div:first-of-type::after{
  right: -60px;
  transform: rotate(45deg);
}

.matching > div:last-of-type::before{
  left: -50px;
}

.matching > div:last-of-type::after{
  left: -60px;
  transform: rotate(-135deg);
}




@media (max-width: 768px){
  .matching{
    display: block;
    margin-bottom: 10.66vw;
  }
  
  .matching > div{
    width: 100%;
  }
  
  .matching > div:first-of-type{
      margin-bottom: 90.66vw;
  }
  
  .matching > div:first-of-type::before{
    top: auto;
    right: 50%;
    bottom: -9.33vw;
    width: 4vw;
    height: 12vw;
    background: #646d7c;
    transform: translateX(50%);
  }

  .matching > div:first-of-type::after{
    top: auto;
    right: 50%;
    bottom: -9.33vw;
    width: 8vw;
    height: 8vw;
    border-top: 4vw solid #646d7c;
    border-right: 4vw solid #646d7c;
    transform: translateX(50%) rotate(135deg);
  }

  .matching > div:last-of-type::before{
    left: 50%;
    top: -9.33vw;
    width: 4vw;
    height: 12vw;
    background: #646d7c;
    transform: translateX(-50%);
  }

  .matching > div:last-of-type::after{
    left: 50%;
    top: -9.33vw;
    width: 8vw;
    height: 8vw;
    border-top: 4vw solid #646d7c;
    border-right: 4vw solid #646d7c;
    transform: translateX(-50%) rotate(-45deg) ;
  }

  .matching > p{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }

  .matching > p span:first-child{
    width: 60%;
  }

  
  
}


/*===== ■4. Report Elements =====*/
.table_general .box_darkgray[class] {
  background: #646d7c;
}


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

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

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


/*===== ■5. #Magazine Elements =====*/
#magazine h3 {
    position: relative;
}
#magazine h3>em {
	position: absolute;
	top: -1.2em;
	left: 50%;
	width: fit-content;
	padding: 3px 5px;
	border-radius: 5px;
	color: #e6316e;
	font-size: 1.4rem;
	background: #fff;
	transform: translateX(-50%);
	box-shadow: 2px 2px 5px rgb(0 0 0 / 25%);
}

#magazine h3>em::before {
	position: absolute;
	bottom: -0.5em;
	left: 50%;
	width: 10px;
	height: 10px;
	background: linear-gradient(to top right,transparent 50%,#fff 50.5%) no-repeat top left/50% 100%,linear-gradient(to top left,transparent 50%,#fff 50.5%) no-repeat top right/50% 100%;
	transform: translateX(-50%);
	content: '';
}

#magazine #vol01 ul li li {
	position: relative;
	background: #fff;
	padding: 20px 30px 20px 20px;
	margin-right: 30px;
	width: calc(33.33% - 20px);
	font-weight: 700;
}

#magazine #vol01 ul li li:last-of-type {
	margin-right: 0;
}

#magazine #vol01 ul li li span {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	z-index: 2;
}

#magazine #vol01 ul li li:nth-of-type(2) span {
	width: 38px;
}

#magazine #backnumber img{
	border: 1px solid #ccc;
}

@media (max-width: 768px){
	#visitor #event h3>em {
    top: -1.2em;
    padding: 0.4rem 0.8rem;
    border-radius: 0.8vw;
    font-size: 1.2rem;
	}
	#visitor #event h3>em::before {
    bottom: -0.45em;
    left: 50%;
    width: 2.66vw;
    height: 2.66vw;
	}
	#magazine #vol01 ul li li {
    position: relative;
    background: #fff;
    padding: 5.33vw 10.66vw 5.33vw 5.33vw;
    margin-right: 0;
    width: 100%;
	}
	#magazine #vol01 ul li li:last-of-type {
		margin-bottom: 0;
	}
	
	#magazine #vol01 ul li li:nth-child(even) {
    padding: 5.33vw 5.33vw 5.33vw 10.66vw;
	}

	#magazine #vol01 ul li li:nth-of-type(2) span {
		width: 10.13vw;
	}
	
	#magazine #vol01 ul li li:nth-child(even) span {
		left: -2.66vw;
	}
	
	#magazine #backnumber img{
		border: 0.266vw solid #ccc;
	}
}

/*===== ■6. #Booth Elements =====*/
/*
#booth .deadline{
	opacity: .6;
}
*/


/*===== ■7. Committee Elements =====*/
#committee > div > ul::after{
	content: "";
	display: block;
	width: calc(50% - 10px);;
}

/*===== ■8. Competition Elements =====*/
#competition_sns > div:first-child{
  padding:1rem;
  background: #fff;
  border: solid #000 0.1rem;
}
#competition_sns > div:first-child img{
  vertical-align: bottom;
}
#sponsorship li{
  border: 1px solid #999;
}

#competition_about #judge_comment dt{
	height: 0;
	overflow: hidden;
	max-width: 100%;
	padding-bottom: 50.6%;
	position: relative;
	margin: 0 auto;
}

#competition_about #judge_comment dt iframe{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

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



/*===== ■9. Mirai Elements =====*/

.mirai_judge{
  background: #ededed;
  padding: 20px;
  margin-bottom: 30px;
}

.mirai_judge h4{
  margin-bottom: 10px;
  font-weight: bold;
  background: #999;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

.mirai_judge .one{
  width: calc(33.3% - 5px);
}

.mirai_judge .twice{
  width: calc(66.6% - 10px);
  margin: 0 auto;
}

.mirai_judge figure{
  width: 40%;
  margin-right: 15px;
}
.mirai_judge p{
  flex: 1;
}

.mirai_judge  em{
  display: block;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.new_judge > div {
    min-width: 180px;
}

@media (max-width: 768px){ 
  .mirai_judge{
    padding: 4vw;
    margin-bottom: 8vw;
  }

  .mirai_judge h5{
    margin-bottom: 1.33vw;
    padding: 1.33vw 0;
  }

  .mirai_judge .one{
    width: 100%;
    margin-bottom: 2.66vw;
  }

  .mirai_judge .twice{
    width: 100%;
  }
  
  .mirai_judge .twice > div div:not(:last-child){
    margin-bottom: 2.66vw;
  }

  .mirai_judge figure{
    width: 40%;
    margin-right: 4vw;
  }

  .mirai_judge  em{
    display: block;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 2.66vw;
  }
}


.mirai_award > div {
  position: relative;
}

.mirai_award > div figure{
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
}

.mirai_award > div > div {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  z-index: 2;
  border-top: #646d7c solid 3px;
}

.mirai_award > div > div span{
  border-bottom: 1px solid #ccc;
}

#mirai_intro{
	display: inline-block;
	padding: 20px 30px;
	border-radius: 10px;
	background: #FFFCD2;
}

@media (max-width: 768px){ 
  .mirai_award > div figure{
    position: static;
    padding: 0 2.67vw 2.67vw;
  }
  
  .mirai_award > div > div {
    margin-top: 2.67vw;
    padding: 5.33vw;
    border-top: #646d7c solid 0.8vw;
    background: none; 
  }

  .mirai_award > div > div span{
    border-bottom: 0.267vw solid #ccc;
  }
	
	#mirai_intro{
		padding: 5.33vw;
		border-radius: 2.66vw;
	}

}

/*===== ■10. Voice Elements =====*/

#voice ul.card_basic>li figure::before,
#voice ul.card_basic>li figure::after{
  background: none;
}

.voice_title{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 40px;
}

.voice_title figure{
  width: 50%;
}

.voice_title figure img{
  width: 100%;
}

.voice_title p{
  width: 50%;
  display: flex;
  align-items: flex-end;
  background: #2172b3;
}

.voice_title p span{
  font-size: 2.0rem;
  line-height: 1.4;
  padding: 20px;
  color: #fff;
  font-weight: bold;
}

.voice_title p b{
  font-size: 2.8rem;
   display: block;
}

#voice > .voice_article{
  margin-bottom: 50px;
}

.voice_article li{
  margin-bottom: 30px;
}

.voice_article li b{
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  padding: 0 0 0 40px;
}

.voice_article li b::before{
  display: flex;
  position: absolute;
  content: 'Q';
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: #646d7c;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  align-items: center;
  justify-content: center;  
  text-align: center;
}

.voice_article li p {
  display: flex;
  line-height: 1.6;
}

.voice_article li span{
  font-weight: bold;
  min-width: 40px;
  line-height: 1.6;
}

@media (max-width: 768px){
  .voice_title{
    flex-direction: column;
    margin-bottom: 10.66vw;
  }

  .voice_title figure{
    width: 100%;
  }

  .voice_title p{
    width: 100%;
  }

  .voice_title p span{
    font-size: 1.8rem;
    padding: 5.33vw;
  }

  .voice_title p b{
    font-size: 2.0rem;
  }

  #voice > .voice_article{
    margin-bottom: 13.33vw;
  }

  .voice_article li{
    margin-bottom: 6.66vw;
  }

  .voice_article li b{
    margin-bottom: 2.66vw;
    padding: 0 0 0 10.66;
  }
  
  .voice_article li b::before {
    width: 8vw;
    height: 8vw;
  }
  
  .voice_article li span{
    min-width: 10.666vw;
  }
}

#exhibition #intro li{
  position: relative;
  background: #fff;
  padding: 20px 30px 20px 20px ;
  margin-right: 30px;
  width: calc(33% - 30px);
  font-weight: bold;
}

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

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


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

/* #exhibition #intro .arrow_down::after */
#exhibition #intro .arrow_down::before{
  position: absolute;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#exhibition #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){
  #exhibition #intro li{
    position: relative;
    background: #fff;
    padding: 5.33vw 10.67vw 5.33vw 10.67vw;
    margin-right: 0;
    width: 100%;
  }
  
  #exhibition #intro li:nth-child(even){ padding: 5.33vw 5.33vw 5.33vw 10.67vw;}

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


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


.movie_wrapper {
	height: 0;
	overflow: hidden;
	max-width: 100%;
	padding-bottom: 56.25%;
	position: relative;
	margin: 0 auto;
}

.movie_wrapper iframe{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.arrow{
  position: relative;
  display: inline-block;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
}
.arrow::before,
.arrow::after{
  position: absolute;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.arrow::before{
  top: calc(50% - 18px);
  right: -50px;
  box-sizing: border-box;
  /* width: 6px; */
  /* height: 18px; */
  border: 18px solid transparent;
  border-left: 18px solid #999;
}
.arrow::after{
  top: calc(50% - 12px);
  right: -15px;
  width: 0;
  height: 25px;
  border-left: 10px solid #999;
}