@charset "UTF-8";

/*------------------------------------------------------------

   history

--------------------------------------------------------------*/

html,
body,
#history {
	/*height: 100%;*/
	/*min-height: 100%;*/
}
.chronology {
	/*height: 100%;*/
	/*min-height: 100%;*/
}
#history .chronology {
	background: #eee;
	width: 100vw;
	min-width: 1054px;
	padding: 0 40px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0;
	overflow: hidden;
	position: relative;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	background-position: center;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .chronology {
		min-width: 100%;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history header {
		margin-bottom: 60px;
	}
}

/* #section
--------------------------------------------------------------*/
#history #section01 {
	background-image: url(../about/images/history_vis_01.jpg);
}
#history #section02 {
	background-image: url(../about/images/history_vis_02.jpg);
}
#history #section03 {
	background-image: url(../about/images/history_vis_03.jpg);
}
#history #section04 {
	background-image: url(../about/images/history_vis_04.jpg);
}
#history #section05 {
	background-image: url(../about/images/history_vis_05.jpg);
}
#history #section06 {
	background-image: url(../about/images/history_vis_06.jpg);
}
#history #section07 {
	background-image: url(../about/images/history_vis_07.jpg);
}
#history #section08 {
	background-image: url(../about/images/history_vis_08.jpg);
}

/* social
--------------------------------------------------------------*/

#history .social {
	width: 34px;
	padding-left: 36%;
	float: left;
	border-right: 2px solid #fff;
	margin-right: -2px;
}
#history .social li {
	position: relative;
	border : 1px solid rgba(255,255,255,0.2);
	width: 34px;
	height: 120px;
	right:-17px;
	background: rgba(255,255,255,0.15);
	margin: 40px 0;
}
#history .social li div {
	position: relative;
	width: 300px;
	top: 50%;
	right: 310px;
	margin-top: -30px;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .social {
		padding-left: 22%;
	}
	#history .social li div {
		width: 290px;
		right: 300px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .social {
		width: 100%;
		padding-left: 10px;
		padding-bottom: 10px;
		padding-top: 20px;
		float: none;
		border-left: 2px solid #fff;
		border-right: none;
		margin-right: 0;
	}
	#history .social li {
		position: static;
		width: 100%;
		border: none;
		margin: 0;
		height: auto;
		background: none;
	}
	#history .social li div {
		width: 100%;
		position: static;
		top: 0;
		right: 0;
		margin-top: 0;
		-webkit-transform: translateY(0%); /* Safari用 */
		transform: translateY(0%);
	}
}
#history .social li p {
	margin: 30px 0;
	text-align: right;
	font-size: 16px;
	/*font-weight: bold;*/
	line-height: 1.6;
	color: #FFF;
	opacity: 0.8;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .social li p {
		font-size: 14px;
		letter-spacing: 0;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .social li p {
		text-align: left;
		font-size: 19px;
		letter-spacing: 0.1em;
		margin: 1em 0 0;
	}
}
#history .social li p .year {
	display: block;
	font-size: 0.8em;
	font-weight: normal;
}
#history .social li p.sub {
	font-size: 80%;
	line-height: 2;
}
#history .social li p.sub .year {
	display: inline;
	font-size: 100%;
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .social li p .year {
		font-size: 0.9em;
		font-weight: normal;
	}
	#history .social li p.sub {
		font-size: 1.2em;
		margin-top: 10px;
		padding-bottom: 0.8em;
	}
	#history .social li p.sub .year {
		font-size: 1em;
	}
}

/* id
--------------------------------------------------------------*/
#history .social #social1914 {
	height: 100px ;
}
#history .social #social1939 {
	margin-top: 210px;
	height: 140px;
}
#history .social #social1955 {
	height: 300px;
}
#history .social #social1986 {
	height: 140px;
	margin-top: 230px;
}
#history .social #social1996 {
	height: 260px;
}
#history .social #social2001 {
	height: 1300px;
}
#history .social #social2009 {
	height: 1300px;
}
#history .social #nextGenaration {
	height: 1740px;
}
#history .social #newnormal {
	height: 700px;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .social #social1914 {
		height: 100px ;
	}
	#history .social #social1939 {
		margin-top: 0;
		height: 140px;
	}
	#history .social #social2001 {
		height: 850px;
	}
	#history .social #social2009 {
		height: 830px;
	}
	#history .social #nextGenaration {
		height: 730px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .social li {
		margin-top: 0 !important;
		height: auto !important;
	}
}


/* aioi
--------------------------------------------------------------*/
#history .aioi {
	width: 50%;
	float: left;
	border-left: 2px solid #fff;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .aioi {
		width: 73%;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .aioi {
		float: none;
		width: 100%;
	}
}
#history .aioi li {
	padding: 40px 0;
	padding-left: 55px;
	margin-left: -8px;
	overflow: hidden;
	position: relative;
	color: #FFF;
}
#history .aioi .year {
	position: relative;
	width: 2em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 200;
	font-size: 75px;
	letter-spacing: 0;
	line-height: 1;
	float: left;
}
#history .aioi li .year:before {
	content : "■";
	position: absolute;
	font-size: 14px;
	left:-55px;
	top:50%;
	margin-top: -0.5em;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .aioi li {
		padding: 20px 0;
		padding-left: 40px;
	}
	#history .aioi .year {
		font-size: 60px;
	}
	#history .aioi li .year:before {
		left: -40px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .aioi .year {
		float: none;
	}
}
#history .aioi li .content {
	width: auto;
	font-size: 16px;
	font-weight: bold;
	padding-left: 188px;
	padding-top: 27px;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .aioi li .content {
		padding-left: 140px;
		font-size: 14px;
		padding-top: 18px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .aioi li .content {
		padding-left: 0;
		padding-top: 0.2em;
		padding-bottom: 20px;
		font-size: 18px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 320px ){
	#history .aioi li .content {
		font-size: 16px;
	}
}

/* id
--------------------------------------------------------------*/
#history .aioi #aioi1918 {
	margin-top: 40px;
}
#history .aioi #aioi1975 {
	margin-top: 190px;
}
#history .aioi #aioi1983 {
	margin-top: 100px;
}
#history .aioi #aioi1998 {
	margin-top: 80px;
}
#history .aioi #aioi2004 {
	margin-top: 80px;
}
#history .aioi #aioi2006 {
	margin-top: 80px;
}
#history .aioi #aioi2008 {
	margin-top: 80px;
}
#history .aioi #aioi2014 {
	margin-top: 80px;
}
#history .aioi #aioi2018 {
	/*color: #33d08c;*/
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#history .aioi #aioi1918 {
		margin-top: 70px;
	}
	#history .aioi #aioi2001 {
		margin-top: 20px;
	}
	#history .aioi #aioi2004,
	#history .aioi #aioi2006,
	#history .aioi #aioi2008,
	#history .aioi #aioi2014,
	#history .aioi #aioi2018 {
		margin-top: 0px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#history .aioi li {
		margin-top: 0px !important;
	}
}

/*------------------------------------------------------------

   historyAnnotation

--------------------------------------------------------------*/
#historyAnnotation {
	position: absolute;
	top:144px;
	right: 9px;
}
#historyAnnotation .annotation {
	font-size: 12px;
}
/*------------------------------------ media */
@media screen and ( max-width: 768px ){
	#historyAnnotation {
		top:50px;
		right: 9px;
	}
}
/*------------------------------------ media */
@media screen and ( max-width: 414px ){
	#historyAnnotation {
		text-align: left;
		right:auto;
		left:8px;
		top: 60px;
	}
}