@charset "UTF-8";
/* CSS Document */
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 90px 0px 0px 0px;
  z-index: 1;
}
.menu_undercover {
  position: fixed;
  top: 0px;
  height: 90px;
  width: 100%;
  z-index: 2;
  background-color: #fff
}
@media (max-width: 1205px) {
  .menu_undercover {
    position: fixed;
    top: 0px;
    height: 60px;
    width: 100%;
    z-index: 2;
    background-color: #fff
  }
}
.navi_title {
  align-self: center;
  font-family: "UniversNextPro-BoldCond";
  margin: 15px 0px 10px 0px;
  font-size: 1.8rem;
}
.ctn_title {
  align-self: center;
  font-family: "FP-ヒラギノ角ゴ ProN W6";
  margin: 0px 0px 30px 0px;
  font-size: 3rem;
}
.ctn_title_s {
  align-self: center;
  font-family: "FP-ヒラギノ角ゴ ProN W6";
  margin: 0px 0px 60px 0px;
  font-size: 2rem;
}

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




.history_contents {
  min-height: 0%;
	align-self: center;	
	overflow: hidden;
	width: 90vw
}


#content {
	width: 100%;
	margin: 0px  auto -50px  auto;

	background: url(../../images/bg_base.png);
	background-color:#FFFFFF;
	background-position:center 0px;
	
}
.header_history_base {
  position: sticky;
  top: 88px;
	width: 100%;
	height: 120px;
	text-align: center;
	background: url(../../images/bg_base.png);
	background-color:#ddd;
	z-index: 20
}
@media (max-width: 1205px) {

.header_history_base {
  position: sticky;
  top: 60px;
	
	width: 100%;
	height: 120px;
	text-align: center;
	background: url(../../images/bg_base.png);
	background-color:#ddd;
		z-index: 20
}
}

#header_history_base_btn {
	
padding-top: 18px;
	z-index: 21;
	text-align: center;
	width: 100%;

}
/*.fixed {
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	background: url(../../images/bg_header.jpg);

}*/
#header_history_line {
	position: absolute;
	width: 100%;
	height: 8px;
	background-color: rgba(0, 0, 0, 0.10);
	margin: 27px 0px 0px 0px;
	z-index: 22;
}
#header_history_red {
	position: absolute;
	left: 50%;
	width: 70%;
	height: 8px;
	margin: 27px auto 0px auto;
	margin-left: -35%;
	z-index: 24;
	overflow: hidden
}
.red_bar_1960s {
	position: absolute;
	width: 14%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}
.red_bar_1970s {
	width: 28%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}
.red_bar_1980s {
		position: absolute;
	width: 42%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}
.red_bar_1990s {
	position: absolute;
	width: 56%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;

}
.red_bar_2000s {
	position: absolute;
	width: 70%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}
.red_bar_2010s {
	position: absolute;
	width: 84%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}

.red_bar_2020s {
	position: absolute;
	width: 100%;
	height: 8px;
	background-color:#FFFFFF;

	transition: width .2s;
}

#btn_year_base {
	position: absolute;

	left: 50%;
	width: 70%;
	height: 42px;
	margin-left: -35%;
	z-index: 25;



}
.p_1960s {
	width: 14%;
}
.p_1970s {
	width: 28%;
}
.p_1980s {
	width: 42%;
}
.p_1990s {
	width: 56%;
}
.p_2000s {
	width: 70%;
}
.p_2010s {
	width: 84%;
}
.p_2020s {
	width: 100%;
}
ul.btn_year li {
	float: left;
	display: block;
	height: 42px;
	width: 14%;
	font-size: 180%;
	text-decoration: none;
	text-align: center;
  font-family: "UniversNextPro-BoldCond";
	font-weight: normal;
	font-style: normal;
	color: #999;
	line-height: 54px;
	font-feature-settings : "palt";

}
ul.btn_year li a {

	color: #000;

}

ul.btn_year li a:hover {
	  text-decoration: none;

	opacity: 1
	
}


#btn_type_base {
	position: absolute;
top: 76px;
	left: 50%;
	width: 440px;
	height: 30px;
	margin-left: -220px;
	z-index:22;

}
ul.btn_type li {
	float: left;
	display: block;
	height: 30px;
	width: 100px;
	font-size: 140%;
	text-decoration: none;
	text-align: center;
	font-family: PontiacInlineRegular;
	font-weight: normal;
	font-style: normal;
	color: #999;
	line-height: 28px;
	font-feature-settings : "palt";
}



ul.btn_type li a {

	color: #000;

}
ul.btn_type li a:hover {
	  text-decoration: none;
	color: #555;
	opacity: 1
	
}
ul.btn_type li.b_mmim,ul.btn_type li.b_mmim a{
width: 140px;
}


.cr{
	padding:5px;
	color: #999;
	font-size: 110%;
}
.cr_all{
	padding:5px;
	color: #ff0000;
	font-size: 110%;
}
.cr_mc{
	padding:5px;
	color: #00b6d1;
	font-size: 110%;
}
.cr_vm{
	padding:5px;
	color: #ba00ff;
	font-size: 110%;
}
.cr_mmim{
	padding:5px;
	color: #D6E600;
	font-size: 110%;
}