@charset "utf-8";
/*****************************************************************************
CSS only for /english/information/history/
*****************************************************************************/

h1 span{
	font-size:18px; font-weight:normal;
}

.main_image { margin: 80px 0 50px;}
.inner {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 100px auto;
	width: 976px;
	position: relative;
}

.inner .chronology {
  padding-left: 4px;
  flex-basis: 465px;
}
.inner .chronology .timeline01,
.inner .chronology .timeline02{
  margin-top: 2em;
  list-style: none;
}
.inner .chronology .timeline01 > li,
.inner .chronology .timeline02 > li {
  /*margin-bottom: 50px;
  padding-left: 24px;*/
  margin-top: -1em;
  padding: 0 0 50px 24px;
  border-left: #a8a7a7 2px solid;
  position: relative;
  /*&::before {
  	margin: -5px 0 0 -5px;
  	width: 10px;
  	height: 10px;
  	content: '';
  	background: #a8a7a7;
  	border-radius: 50%;
  	display: block;
  	position: absolute;
  	top: .8em;
  	left: -1px;
  }*/
}
.inner .chronology .timeline01 > li:first-of-type::before,
.inner .chronology .timeline02 > li:first-of-type::before{
  width: 2px;
  height: 1em;
  content: '';
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: -2px;
}
.inner .chronology .timeline01 > li:last-of-type,
.inner .chronology .timeline02 > li:last-of-type{
  padding-bottom: 0;
  /*border-color: transparent;*/
}
.inner .chronology .timeline01 > li::after,
.inner .chronology .timeline02 > li::after{
  margin: -5px 0 0 -5px;
  width: 10px;
  height: 10px;
  content: '';
  background: #a8a7a7;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: .8em;
  left: -1px;
}
.inner .chronology .timeline01 > li h4,
.inner .chronology .timeline02 > li h4{
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #21366E;
}
.serif, .serif * {
    font-family: Garamond, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.inner .chronology .timeline01 > li .text .list-icon,
.inner .chronology .timeline02 > li .text .list-icon{
    margin: 0;
    list-style: none;
}
.inner .chronology .timeline01 > li .text p,
.inner .chronology .timeline01 > li .text li,
.inner .chronology .timeline02 > li .text p,
.inner .chronology .timeline02 > li .text li{
  font-size: 1em;
  padding: 0.5em 0 1em;
}
.inner .chronology .timeline01 > li .text p a,
.inner .chronology .timeline01 > li .text li a,
.inner .chronology .timeline02 > li .text p a,
.inner .chronology .timeline02 > li .text li a{
  color: #505050;
  text-decoration: underline;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {

	h1 span{
		font-size:17px; font-weight:normal;
	}
	.main_image {
		margin: 1.875rem 0;
	}
	  .inner {
		display: block;
		width: auto;
	  }
	  .inner .contents {
		margin-bottom: 40px;
	  }
	  .inner .contents .text {
		margin-bottom: 30px;
	  }
	  .inner .contents .image ul li {
		margin-bottom: 40px;
	  }
	  .inner .contents .image ul li dt {
		margin-bottom: .5em;
	  }
	  .inner .contents .image ul li dd {
		margin: 0;
	  }
	  .inner .chronology {
		margin: 0 10px;
		padding-left: 4px;
	  }
	.inner .chronology .timeline01 {
		margin: 2em 0 0 0;
	}
	.inner .chronology .timeline02 {
		margin: 0 0 0 0;
	}
	  .inner .chronology .timeline > li {
		margin-top: -1.2em;
		padding-bottom: 30px;
		/*&::before {
			top: 1.4em;
		}*/
	  }
	  .inner .chronology .timeline01 > li:first-of-type::before {
		height: 1em;
	  }
	  .inner .chronology .timeline02 > li:first-of-type::before {
		height: 0;
	  }
	  .inner .chronology .timeline01 > li,
	  .inner .chronology .timeline02 > li {
	    padding-bottom: 2em ;
	  }
	
	  .inner .chronology .timeline01 > li:last-of-type{
	    padding-bottom: 2em ;
	  }
	  .inner .chronology .timeline01 > li::after,
	  .inner .chronology .timeline02 > li::after{
		top: 0.65em;
	  }
	  .inner .chronology .timeline01 > li h4,
	  .inner .chronology .timeline02 > li h4{
		margin-bottom: 0;
		font-size: 1.4em;
	  }
	  .inner .chronology .timeline01 > li h4 .period,
	  .inner .chronology .timeline02 > li h4 .period {
		font-size: 1.4em;
	  }
	  .inner .chronology .timeline01 > li .text p,
	  .inner .chronology .timeline02 > li .text p{
		font-size: 1em;
	  }
}