@charset "UTF-8";

/* ===================================
	File Name   : visitor.css
	Description : Visitor Page Layout CSS
	Editor      : Bface Hayakawa
	Last Editor : Bface Saeki
	
	Update Description :
  [2025/06/17] 来場期調整（出展者一覧）
	[2023/08/30] evolutionページスタイル追加
	[2023/08/30] evolutionページスタイル追加
	[2023/05/24] 新規制作

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

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

	1. Share Elements
	2. Index Page Setting
	3. Exhibitor Page Setting
	4. Seminars Page Setting
	
====================================== */



/*===== ■1. Share Elements =====*/
h3 span {
	margin-left: 10px;
	font-size: 1.4rem;
}

.notice {
	display: block;
	padding-left: 1rem;
	font-weight: bold;
	text-indent: -1rem;
}

a.box {
	width: 80%;
	margin: 0 auto;
}

.inner .inner { margin-bottom: 30px;}

.inner p em {
	color: #c00;
	font-weight: bold;
}

#sub_cont li a .icon_key::before {color: #333;}
#sub_cont li a:hover .icon_key::before {opacity: .6;}

/* lower_content */
aside#visitor_contact h3 {
  margin: 40px 0 15px;
  padding: 15px 0 15px 10px;
  border-left: 5px solid #666;
  background: #ebebeb;
  font-weight: bold;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'Noto Sans Japanese';
  line-height: 1;
}

aside#visitor_contact p { margin: 0 15px 15px;}

aside#visitor_contact p em {
  color: #c00;
  font-weight: bold;
  font-size: 1.6rem;
}

aside#visitor_contact ul {
  display: flex;
  justify-content: center;
}

aside#visitor_contact ul li {
  width: 48%;
  margin: 0 10px;
  text-align: center;
}


@media screen and (max-width:768px) {
	h3 span {
		display: block;
		margin: 5px 0 0;
		font-size: 1.2rem;
	}
	
	a.box { width: 100%;}
  
  .inner p { margin-bottom: 10px;}

	.inner .inner { margin-bottom:  20px;}
  
  /* lower_content */
	aside#visitor_contact h3 {
	  font-size: 1.4rem;
	  padding: 10px 0 10px 10px;
	  margin-bottom: 10px;
	}
  
  aside#visitor_contact p em { font-size: 1.4rem;}
  
	aside#visitor_contact ul { flex-direction: column;}
	aside#visitor_contact ul li:not(:last-child) { margin-bottom: 10px;}
  
  aside#visitor_contact ul li {
    width: 95%;
  }

}



/*===== ■2. Index Page Setting =====*/
/* visitor_list */
#visitor_list .inner > p {
  margin: 10px 0 20px;
  font-weight: bold;
  color: #c00;
  text-align: center;
}




/* visitor_about */
#visitor_about > .inner > p em { font-size: 1.6rem;}

#visitor_about > .inner .inner:first-of-type .flex3 { margin-bottom: 30px;}

#visitor_about a:hover .icon_blank:before {
  color: #999;
}

/*visit_registration*/
#visitor_registration ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#visitor_registration li {
  margin-bottom: 20px;
}

#visitor_registration ul li{
   width: calc(50% - 10px);
}

#visitor_registration ul h4 {
  margin-bottom: 10px;
  padding: 5px;
  background: #ebebeb;
  font-weight: bold;
  text-align: center;
}
#visitor_registration ul h4 span {
  display: block;
}
#visitor_registration ul p:last-of-type {
  margin-bottom: 10px;
}
#visitor_registration ul p.note {
  text-indent: -1em;
  padding-left: 1em;
}
#visitor_registration ul figure {
  width: 60%;
  margin: 0 auto;
}

/* visitor_target */
#visitor_target .target {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 15px;
}

#visitor_target .target > li {
  box-sizing: border-box;
  width: 31.3%;
  margin: 0 1% 3px;
  padding: 0;
}

#visitor_target .target > li.width100 {
  width: 100%;
}

#visitor_target em {
  display: block;
  position: relative;
  padding-left: 10px;
  font-weight: bold;
  line-height: 1.3;
}

#visitor_target em:before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid #333;
  border-radius: 50%;
  content: '';
}

#visitor_target aside {
  margin-top: 30px;
  padding: 1px;
  border: 5px solid #ebebeb;
}

#visitor_target dl {
  padding: 15px;
  background: #ebebeb;
  text-align: center;
}

#visitor_target dt {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 2rem;
}

#visitor_target dd { text-align: left;}

#visitor_target dd p { margin-bottom: 10px;}

#visitor_target dd div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#visitor_target dd div > ul {
  width: 80%;
}

#visitor_target dd div > span {
  min-width: 180px;
  width: 20%;
  margin-left: 20px;
}

#visitor_target dd div li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 2px;
  font-weight: bold;
  line-height: 1.4;
}

#visitor_target dd div li:before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #999;
  content: '';
}


/* visitor_seminar */
#visitor_seminar p {
  margin-bottom: 20px;
}
#visitor_seminar a.box:not(:last-of-type) {
  margin-bottom: 20px;
}

/* visitor_access */
#visitor_about .visit_access picture {
  display: block;
  margin-bottom: 20px;
}

#visitor_about .visit_access .flex {
  justify-content: space-between;
}

#visitor_about .visit_access .flex p {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(50% - 10px);
  padding: 10px;
  background: #000;
  border-radius: 10px;
  box-sizing: border-box;
}

#visitor_about .visit_access .flex p > img {
  width: 10%;
  min-width: 80px;
}
#visitor_about .visit_access .flex p > span {
  width: calc(90% - 10px);
  margin-left: 10px;
  font-weight: bold;
  color: #fff;
}
#visitor_about .visit_access .flex p > span > span {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
}


/* visitor_faq */

#visitor_faq a:hover .icon_blank:before {
  color: #999;
}

#visitor_faq dl { margin-bottom: 20px;}

#visitor_faq dt {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}

#visitor_faq dt span {
  flex: 1;
  display: block;
  font-weight: bold;
  font-size: 1.8rem;
}

#visitor_faq dd { display: flex;}

#visitor_faq dd div {
  flex: 1;
  margin-top: 8px;
}

#visitor_faq i:not(.icon_blank) {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(to bottom right, #666, #333);
  color: #fff;
  font-weight: bold;
  font-family: 'Open Sans', 'Noto Sans Japanese';
  letter-spacing: 0.05em;
  line-height: 1;
}

#visitor_faq i:not(.icon_blank):before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  content: '';
}

#visitor_faq dd i:not(.icon_blank) {
  border: 1px solid #333;
  background: #fff;
  color: #333;
}

#visitor_faq dd p {
  margin-bottom: 10px;
}

#visitor_faq dd p span { 
  display: block;
}
#visitor_faq dd p span:not(:last-child) { 
  margin-bottom: 20px;
}

/* seminar_related */
#seminar_related ul.seminar_icon {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
	text-align: center;
}

#seminar_related ul.seminar_icon li {
  margin-right: 5px;
	padding: 5px 10px;
  background: #666;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
}

#seminar_related ul.seminar_icon li:first-child { background: #9bc144;}
#seminar_related ul.seminar_icon li:nth-child(2) { background: #d75d66;}

#seminar_related ul.seminar_icon + p {
  margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.2rem;
}

#seminar_related p.right {
  margin: 0;
  text-align: right;
}

#seminar_related table {
  width: 100%;
  margin-bottom: 20px;
}

#seminar_related th {
	padding: 5px;
	background: #666;
	border: 1px solid #666;
	font-weight: bold;
	text-align: center;
	font-size: 1.8rem;
	color: #fff;
	vertical-align: middle;
}

#seminar_related td:first-child {
	width: 15%;
	background: #ebebeb;
	border-style: none none dotted dotted;
	border-color: #999;
	border-width: 0 0 1px 1px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
}

#seminar_related td {
  width: 85%;
	padding: 10px;
	border-style: none dotted dotted dotted;
	border-color: #999;
	border-width: 0 1px 1px 1px;
	vertical-align: top;
}

#seminar_related td.adjust {
  vertical-align: middle;
  color: #999;
  font-weight: bold;
  font-size: 1.6rem;
}
#seminar_related td.adjust.single { color: #333;}

#seminar_related dt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.8rem;
}

#seminar_related dd:not(:last-of-type) { padding-bottom: 10px;}

#seminar_related dt span {
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  background: #c00;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}

#seminar_related dd span { display: block;}

#seminar_related dd em {
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
}


@media screen and (max-width:768px) {
  #visitor_list .inner > p {
    text-align: left;
  }
  
  /* visitor_registration */
  #visitor_registration ul {
    flex-direction: column;
  }
  
  #visitor_registration ul li{
     width: 100%
  }

	/* visitor_about */
	#visitor_about > .inner > p em { font-size: 1.4rem;}
	#visitor_about > .inner .inner:first-of-type .flex3 { margin-bottom: 20px;}

	
	/* visit target */
	#visitor_target .target > li {
	  width: calc(100% - 20px);
	  margin: 0 10px 5px;
	}
	#visitor_target aside { margin-top: 0;}
	
	#visitor_target dt { font-size: 1.6rem;}
	
	#visitor_target dd div {
	  flex-wrap: wrap;
	  margin: 10px 0 0;
	}
	#visitor_target dd div span { 
    width: 80%;
    margin: 10px auto 0;
  }
	
	#visitor_target dd div span img { margin-left: 0;}


  /* visitor_seminar */
  #visitor_seminar a.box:not(:last-of-type) {
    margin-bottom: 10px;
  }


  /* visitor_access */
  #visitor_about .visit_access picture {
    margin-bottom: 10px;
    text-align: center;
  }

  #visitor_about .visit_access .flex {
    flex-direction: column;
  }

  #visitor_about .visit_access .flex p {
    width: 100%;
    border-radius: 5px;
  }

  #visitor_about .visit_access .flex p > img {
    width: 10%;
    min-width: 20px;
  }
	
  
	/* visitor faq */
  #visitor_faq dd p {
    margin-bottom: 10px;
  }
  
	#visitor_faq dt span { font-size: 1.4rem;}
  
  /* seminar_related */
  #seminar_related ul.seminar_icon {
    justify-content: space-between;
  }
  #seminar_related ul.seminar_icon li {
    width: calc(50% - 5px);
    margin: 0 0 5px;
    box-sizing: border-box;
  }

  #seminar_related th {
    font-size: 1.4rem;
  }
  
  #seminar_related dt {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  
  #seminar_related dd { clear: both;}

  #seminar_related dd em { font-size: 1.4rem;}  
}



/*===== ■3. Exhibitor Page Setting =====*/
#exhibitor_list > .inner > p {
  text-align: right;
}

#exhibitor_list #list_chemcal h3 {color: #036EB7;}
#exhibitor_list #list_machine h3 {color: #00913A;}
#exhibitor_list #list_resource h3 {color: #F29600;}
#exhibitor_list #list_safety h3 {color: #E95513;}
#exhibitor_list #list_water h3 {color: #009FE8;}
#exhibitor_list #list_instrumentation h3 {color: #D60050;}
#exhibitor_list #list_preservation h3 {color: #946134;}
#exhibitor_list #list_special h3 {color: #943494;}
#exhibitor_list #list_shininchem h3 {color: #000590;}

#exhibitor_list #list_all {
	margin: 10px 10px 30px;
}

#exhibitor_list [id^="list_"] li {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  background: #f1f1f1;
}
#exhibitor_list #list_chemcal li {background-color: rgba(3, 110, 183, 0.1);}
#exhibitor_list #list_machine li {background-color: rgba(0, 145, 58, 0.1);}
#exhibitor_list #list_resource li {background-color: rgba(242, 150, 0, 0.1);}
#exhibitor_list #list_safety li {background-color: rgba(233, 85, 19, 0.1);}
#exhibitor_list #list_water li {background-color: rgba(0, 159, 232, 0.1);}
#exhibitor_list #list_instrumentation li {background-color: rgba(214, 0, 80, 0.1);}
#exhibitor_list #list_preservation li {background-color: rgba(148, 97, 52, 0.1);}
#exhibitor_list #list_special li {background-color: rgba(148, 52, 148, 0.1);}
#exhibitor_list #list_shininchem li {background-color: rgb(0, 5, 144, 0.1);}


@media screen and (max-width:768px) {
	#exhibitor_list #list_all {
		margin: 10px 0 30px;
	}
}



/*===== ■3. Evolution Page Setting =====*/
#evolution .box {
  margin: 20px auto;
  max-width: 80%;
}
#evolution .image_wapper {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
#evolution .exhibitor_list li {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  background: #f1f1f1;
}
#evolution .appendix {
  text-align: right;
}
#evolution section section {
  margin-top: 20px;
}

@media screen and (max-width:768px) {
  #evolution .box {
    max-width: 100%;
  }
}

/* evolution_special */
#evolution_special figure {
  text-align: center;
}

/* evolution_zone */
#evolution_zone ol.zone_list {
  margin: 10px 0 20px;
}
#evolution_zone ol.zone_list li {
  display: inline-block;
  margin-right: 20px;
  counter-increment: num;
  color: #fff;
  font-weight: bold;
}
#evolution_zone ol.zone_list li:not(:last-child) {
  margin-bottom: 5px;
}
#evolution_zone ol.zone_list li::before {
  display: inline-block;
  width: 21px;
  height: 21px;
  text-align: center;
  line-height: 21px;
  margin-right: 5px;
  border: 1px solid #333;
  color: #333;
  border-radius: 50%;
  font-weight: bold;
  content: counter(num);
}
#evolution_zone ol.zone_list li span {padding: 2px 5px;}
#evolution_zone ol.zone_list li:nth-child(1) span {background-color: #036EB7;}
#evolution_zone ol.zone_list li:nth-child(2) span {background-color: #00913A;}
#evolution_zone ol.zone_list li:nth-child(3) span {background-color: #F29600;}
#evolution_zone ol.zone_list li:nth-child(4) span {background-color: #E95513;}
#evolution_zone ol.zone_list li:nth-child(5) span {background-color: #009FE8;}
#evolution_zone ol.zone_list li:nth-child(6) span {background-color: #D60050;}
#evolution_zone ol.zone_list li:nth-child(7) span {background-color: #946134;}

/* evolution_seminar */
#evolution_seminar figure {
  text-align: center;
}
#evolution_seminar .special_category {
  margin-top: 10px;
}
#evolution_seminar .special_category li { 
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  font-weight: bold;
}
#evolution_seminar .special_category li.special { background: #F1CDB1; }
#evolution_seminar .special_category li.sustainability { background: #9FCE63; }
#evolution_seminar .special_category li.dx { background: #F9DA78; }
#evolution_seminar .special_category li.co2 { background: #a3a6e3; }
#evolution_seminar .special_category li.hydrogen { background: #B4C6E7; }
#evolution_seminar .special_category li.resource { background: #00B0F0; }
#evolution_seminar .special_category li.biomass { background: #A9D08E; }






/*===== 4. Seminars Page Setting =====*/
#seminars_list .inner > p {
  margin-bottom: 20px;
}
#seminars_list .inner > a.box {
  width: 80%;
  margin: 0 auto;
}
#seminars_list .inner > a.box:not(:last-of-type) {
  margin-bottom: 20px;
}
@media screen and (max-width:640px) {
  #seminars_list .inner > a.box {
    width: 100%;
  }
  #seminars_list .inner > a.box:not(:last-of-type) {
    margin-bottom: 10px;
  }
}