@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　history
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.cont-nav{
  padding-bottom: 150px;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* history01
-----------------------------------------------------------------*/
.history01{
  padding: 180px 0 50px;  
}
.history h2{
  margin-bottom: 50px;  
}
.history-timeline{
  border-top: 1px solid var(--gray);
  letter-spacing: .05em;  
}
.history-timeline > div{
  display: flex;
  flex-wrap: wrap;
  padding: 50px 30px;
  border-bottom: 1px solid var(--gray);   
}
.history-timeline > div > dt{
  flex-shrink: 0;
  max-width: 240px;
  width: 20%;
  padding-right: 15px;
	font-weight: bold; 
}
.history-timeline > div > dd{
  max-width: calc(100% - 240px);
  width: 80%;  
}
.history-timeline > div > dt span{
  display: inline-block;
  width: 5.7em;
  text-align: right;
}
.history-timeline > div > dd + dt,
.history-timeline > div > dd + dt + dd{
	margin-top: 10px;
}


/* history03
-----------------------------------------------------------------*/
.history02{
  padding: 100px 0 50px;  
}

/* history03
-----------------------------------------------------------------*/
.history03{
  padding: 100px 0 130px;  
}







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

  .cont-nav{
    padding-bottom: 60px;
  }


 /* history01
-----------------------------------------------------------------*/
  .history01{
    padding: 60px 0 30px;  
  }
  .history h2{
    margin-bottom: 20px;
    line-height: 1.4;  
  }
	.history-timeline > div {
		padding: 20px 0;
		border-bottom: 1px solid var(--gray);   
	}
	.history-timeline > div > dt{
		max-width: none;
		width: 28%;
	} 
  .history-timeline > div > dd{
    max-width: none;
    width: 72%;  
  } 
 
 /* history03
-----------------------------------------------------------------*/
  .history02{
    padding: 30px 0;  
  }

/* history03
-----------------------------------------------------------------*/
  .history03{
    padding: 30px 0 60px;  
  }
  
}