@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　conact
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
   contact-tel
---------------------------------------------------------------------------*/
.contact-tel{
  padding: 100px 0 125px;
}
.contact-tel h2{
  margin-bottom: 50px;  
}
.contact-tel .tel-list{
  max-width: 320px;
  width: calc((100% - 30px)/3);
}
.contact-tel .tel-list > div:nth-child(n+2){
  margin-top: 30px;  
}
.contact-tel .tel-list dt{
  display: flex;
  align-items: center; 
  margin-bottom: 12px;
  font-size: 1.8rem;
  line-height: 1.4; 
}
.contact-tel .tel-list dt span:first-child{
  color: #094;
  margin-right: 3px;  
}
.contact-tel .tel-list dd ul li{
  display: flex;
  align-items: center;     
}
.contact-tel .tel-list dd ul li:nth-child(n+2){
  margin-top: 2px;  
}
.contact-tel .tel-list dd ul span{
  flex-shrink: 0;
  width: 6em;
  font-size: 1.8rem;
}
.contact-tel .tel-list dd ul a{
  font-size: 2.4rem;
  pointer-events: none;  
}






/*--------------------------------------------------------------------------
   contact-form
---------------------------------------------------------------------------*/
.contact-form{
  margin-bottom: 50px;
  padding: 100px 0 150px;
  background: #f5f5f5;  
}
.contact-form h2{
  margin-bottom: 50px;
}
.contact-form h2 + .txt{
  margin-bottom: 50px;
  font-size: 2rem;
  line-height: 2;  
}

.form-list > div{
  padding: 20px 0;
  border-bottom: 1px solid #d8d8d8;  
}
.form-list dt{
  display: flex;
  align-items: center; 
  margin-bottom: 12px; 
}
.form-list dt .ttl{
  font-size: 1.8rem;
  font-weight: 500;  
}
.form-list dt .req{
  margin-left: 15px;
  padding: 5px 10px;
  background: #e00;
  line-height: 1;
  font-size: 1.4rem;
  color: #fff;
}
.form-list .note{
  margin-top: 5px;
  font-size: 1.4rem;  
}
.form-list .form_select {
  display: block;
	max-width: 600px;
}
#company-name,
#division-name,
#message{
  max-width: 900px;  
}

.contact-form .txt-privacy{
  margin: 70px 0 30px;
  text-align: center;  
}
.contact-form .txt-privacy a{
  padding-right: 15px;
  background: url(../img/common/ico_blank_green.svg) no-repeat right center;
  background-size: 12px auto;
  color: #094;
}




/*--------------------------------------------------------------------------
   contact-confirm
---------------------------------------------------------------------------*/
.contact-confirm{
	padding: 80px 0 200px;
}
.contact-confirm .txt{
	margin-bottom: 80px;
	font-size: 1.8rem;
}
.contact-confirm .form-list > div{
	display: flex;
}
.contact-confirm .form-list{
	margin-bottom: 80px;
}
.contact-confirm .form-list dt{
	width: 30%;
	margin-bottom: 0;
}
.contact-confirm .form-list dd{
	width: 70%;
}
.contact-confirm .btn-back{
	width: 280px;
	margin: 30px auto 0;	
}
.contact-confirm .btn-back a{
	background-color: #d8d8d8;
	color: #000;
}
.contact-confirm .btn-back a::after{
	background-image: url(../img/common/arw_btn.svg);
}




/*--------------------------------------------------------------------------
   contact-thanks
---------------------------------------------------------------------------*/
.contact-thanks{
	padding: 90px 0 200px;
}
.contact-thanks h2{
	margin-bottom: 100px;
	font-weight: normal;
	font-size: 2rem;
	line-height: 2.2;
	text-align: center;
}
.contact-thanks .btn-back a{
	margin: 0 auto;
}
.contact-thanks .btn-back::after{
	display:none;
}












/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {



/*--------------------------------------------------------------------------
   contact-tel
---------------------------------------------------------------------------*/
	.contact-tel{
		padding: 50px 0 90px;
	}
	.contact-tel h2{
		margin-bottom: 30px;  
	}
	.contact-tel .layout-box{
		display: block;
	}
	.contact-tel .tel-list{
		max-width: 320px;
		width: 100%;
		margin: 0 auto;
	}
	.contact-tel .tel-list + .tel-list{
		margin-top: 30px;
	}
	.contact-tel .tel-list dt{
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.contact-tel .tel-list dd ul li{
		display: flex;
		align-items: center;     
	}
	.contact-tel .tel-list dd ul li:nth-child(n+2){
		margin-top: 2px;  
	}
	.contact-tel .tel-list dd ul span{
		width: 6em;
		font-size: 1.4rem;
	}
	.contact-tel .tel-list dd ul a{
		font-size: 2.2rem;
		pointer-events: auto;  
	}






/*--------------------------------------------------------------------------
   contact-form
---------------------------------------------------------------------------*/
	.contact-form{
		margin-bottom: 0;
		padding: 75px 0 100px;
	}
	.contact-form h2{
		margin-bottom: 30px;
	}
	.contact-form h2 + .txt{
		margin-bottom: 20px;
		font-size: 1.6rem;
		line-height: 1.8;
		text-align: justify;  
	}
	
	.form-list dt{
		margin-bottom: 10px; 
	}
	.form-list dt.main-conf{
		align-items: flex-end;
	}
	.form-list dt .ttl{
		font-size: 1.4rem;
	}
	.form-list dt .req{
		margin-left: 10px;
		padding: 5px 10px;
		font-size: 1rem;
	}
	.form-list dt.main-conf .req{
		position: relative;
		top: -4px;
	}
	.form-list .note{
		font-size: 1rem;  
	}
	#company-name,
	#division-name,
	#message{
		max-width: 900px;  
	}
	
	.contact-form .txt-privacy{
		margin: 50px 0 30px;
	}
	.contact-form .txt-privacy a{
		padding-right: 15px;
		background: url(../img/common/ico_blank_green.svg) no-repeat right center;
		background-size: 12px auto;
		color: #094;
	}
	


 
/*--------------------------------------------------------------------------
   contact-confirm
---------------------------------------------------------------------------*/
	.contact-confirm{
		padding: 50px 0 60px;
	}
	.contact-confirm .txt{
		margin-bottom: 30px;
		font-size: 1.4rem;
	}
	.contact-confirm .form-list > div{
		display: block;
	}
	.contact-confirm .form-list dt{
		width: 100%;
		margin-bottom: 10px;
	}
	.contact-confirm .form-list dd{
		width: 100%;
	}
	.contact-confirm .btn-back{
		max-width: 380px;
		width: 100%;
	}
	.contact-confirm .btn-back a{
		max-width: 380px;
	}




/*--------------------------------------------------------------------------
   contact-thanks
---------------------------------------------------------------------------*/
	.contact-thanks{
		padding: 70px 0;
	}
	.contact-thanks h2{
		margin-bottom: 70px;
		font-size: 1.6rem;
		line-height: 1.8;
		text-align: justify;
	}
	.contact-thanks .btn-back a{
		max-width: 380px;
	}


  
}