@charset "UTF-8";

/* ===================================
	File Name   : module.css
	Description : Exhibitor Contents CSS
	Editor      : Bface Saeki
	Last Editor : Bface Chiba
	
	Update Description :
	[2022/06/21] Information page追加
	[2021/03/23] 新規作成

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

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

	1. Share Elements
	2. Donwload page Setting
	3. Teema page Setting
	4. Information page Setting

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



/*===== ■1. Share Elements =====*/

/*===== ■2. Donwload page Setting =====*/

#download_logo figure{
  border: 1px solid #ccc;
}



/*===== ■3. Teema page Setting =====*/
header .tit_inquiry {
    margin: 0 10px;
    padding: 60px 0;
    text-align: center;
}

header .tit_inquiry h1 {
    margin: 0 auto 30px;
    max-width: 1024px;
    width: 80%;
}

@media (min-width: 1536px){
	header .tit_inquiry {
			margin: 4rem 5rem 8rem;
			border-bottom: 1px solid #ebebeb;
	}

}


/*===== ■4. Information page Setting =====*/

#information .news_list {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 10px;
}

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

#information .news_list 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;
}
#information .news_list a:not(.placeholder)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: #ededed;
  content: "";
  opacity: 0;
  transition: .25s;
}
#information .news_list a:hover::before { width: 100%; opacity: 1;}

#information .news_list 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: "";
}

#information .news_list a.placeholder { pointer-events: none;}

#information .news_list time {
  position: relative;
  margin-right: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

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

#information .news_list p {
  flex: 1;
  font-family: sans-serif;
}

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

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



@media (max-width: 768px) {
  #top_info .news_list { padding: 0 2.67vw;}

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

  #information .news_list a {
    display: block;
    padding: 2.67vw 4vw;
    background: rgba(255,255,255,.7);
  }
  #information .news_list a:not(.placeholder)::before { display: none;}

  #information .news_list a:not(.placeholder)::after {
    right: 2.67vw;
    width: 1.34vw;
    height: 1.34vw;
  }

  #information .news_list time {
    display: inline-block;
    margin: 0 0 1.34vw;
    padding: 0 0 1.34vw;
    font-size: 1.4rem;
  }

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

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



/*===== ■5. Contact Setting =====*/
#contact_form #OF_form1{
  width: 100%;
}
#contact_form #OF_form1 table#formtable tr th{
  background: #eee;
  color: #666;
  border-right: #333 1px solid;
}

#contact_form #OF_form1 table#formtable{
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}

#contact_form #OF_form1 table#formtable tr th, 
#contact_form #OF_form1 table#formtable tr td{
  border-bottom: 1px solid #333;
  
}

#contact_form #OF_form1 table#formtable tr td{
  border-right: none;
}


#contact_form input[type="checkbox" i]{ 
  background-color: initial;
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}

#contact_form input[type="radio" i] {
  background-color: initial;
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 3px 3px 0px 5px;
  padding: initial;
  border: initial;
}

#contact_form #OF_form1 input[type="text"][name="co"] {
  width: 100% !important;
  display: inline-block;
}

#contact_form input,
#contact_form #OF_form1 select[name="pref"]{
  border: #888 1px solid;
  border-radius: 2px;
  padding: 3px;
}
#contact_form #OF_form1 table#formtable tr:not(#caption) td{
  max-width: none;
}


#contact_form .contact_frame{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#contact_form .contact_frame > div:first-child{
  width: 35%;
}

#contact_form .contact_frame > div:last-child{
  width: calc(65% - 50px);
}

#contact_form #OF_form1 input.OF_submit_btn1{
  width: 60%;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px;
  background-color: #516DAE;
  border: none;
  color: #fff;
}

#contact_form #OF_form1 input.OF_submit_btn1:hover{
  opacity: 0.7;
}



@media (max-width: 768px) {
  #contact_form .contact_frame{
    flex-direction: column;
  }
  
  #contact_form .contact_frame > div:first-child{
    width: 100%;
    margin-bottom: 5.33vw;
  }

  #contact_form .contact_frame > div:last-child{
    width: 100%;
  }
  
  #contact_form #OF_form1 input.OF_submit_btn1{
    width: 80%;
    font-size: 4.8vw;
    border-radius: 8vw;
    padding: 2.66vw;
  }
  
}