@charset "UTF-8";

.history-table-col h3{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

@media screen and (min-width: 768px) {

	.methanol-detail{
		margin: 30px 0 0;
	}
	.methanol-detail-col-txt p{
		line-height: 2;
	}
	.methanol-detail-col.col-flex{
		display: flex;
		flex-direction: row-reverse;
	}
	.methanol-detail-col.col-flex figure{
		width: 250px;
	}
	.methanol-detail-col.col-flex .methanol-detail-col-txt{
		padding: 0 50px 0 0;
		width: calc(100% - 250px);
	}
	.methanol-detail-col + .methanol-detail-col{
		margin-top: 30px;
	}

	.history-lead{
		margin: 30px 0 0;
	}
	.history-lead p{
		line-height: 2;
	}
	.history-lead p + p{
		margin-top: 25px;
	}	
	.history-table{
		position: relative;
		margin: 50px 0 0;
	}
	.history-table-wrap{
		position: relative;
	}
	.history-table-wrap:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
	}
	.history-table-col{
		position: relative;
		width: 50%;
	}
	.history-table-col h3{
		padding: 0 0 2px;
		position: relative;
		font-size: 42px;
		color: #0245A0;
	}
	.history-table-col h3 span{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: #0245A0;
	}
	.history-table-col h3 span:after{
		content: "";
		position: absolute;
		top: -11px;
		right: -11px;
		display: block;
		width: 22px;
		height: 22px;
		background: #fff;
		border-radius: 12px;
	}
	.history-table-detail{
		margin: 10px 0 0;
		padding: 0 30px 0 0;
	}
	.history-table-detail p{
		line-height: 2;
	}

	.history-table-fig-box{
		margin: 15px 0 0;
	}
	.history-table-fig-box.fig-box-flex{
		display: flex;
		flex-wrap: wrap;
		margin: 15px -7px 0;
	}
	.history-table-fig-box.fig-box-flex > figure{
		padding: 0 7px;
		width: 50%;
	}
	.history-table-fig-box.fig-box-flex > figure:nth-child(n+3){
		margin-top: 14px;
	}
	#table-1954{
		margin-top: 160px;
	}	
	#table-1955{
		margin-top: -120px;
	}	
	#table-1960{
		margin-top: 40px;
	}	
	#table-1983{
		margin-top: -120px;
	}	
	#table-1988{
		margin-top: 100px;
	}	
	#table-1994{
		margin-top: 40px;
	}	
	#table-2010{
		margin-top: 280px;
	}	
	#table-2020{
		margin-top: -120px;
	}	
	#table-2021{
		margin-top: 40px;
	}	
	#table-2022{
		margin-top: -120px;
	}	

	.history-table-col-box{
		display: flex;
		position: relative;
	}

	.history-arrow{
		position: absolute;
		display: block;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		width: 32px;
		height: calc(100% + 5px);
		background: #0245A0;
	}
	.history-arrow:after{
		position: absolute;
		bottom:  -19px;
		left: 0;
		right: 0;
		content: "";
		display: block;
		border-width: 20px 16px 0 16px;
		border-style: solid;
		width: 0;
		height: 0;
		border-color: #0245A0 transparent transparent transparent;
	}

	.history-table-col:nth-child(even) h3{
		text-align: right;
	}
	.history-table-col:nth-child(even) h3 span:after{
		right: inherit;
		left: -11px;
	}
	.history-table-col:nth-child(even) .history-table-detail{
		padding: 0 0 0 30px;
	}
	.history-table-col:nth-child(even) .history-table-fig-box.fig-box-flex{
		justify-content: flex-end;
	}


	#history .btn-link{
		margin-top: 60px;
	}



	.features-lead {
		margin: 30px 0 0;
	}
	.features-lead p{
		line-height: 2;
	}
	.features-figure{
		margin: 20px 0 0;
	}

}



@media screen and (max-width: 767px) {

	.methanol-detail{
		margin: 25px 0 0;
	}
	.methanol-detail-col-txt p{
		line-height: 2;
	}
	.methanol-detail-col.col-flex figure{
		margin: auto;
		width: 200px;
	}
	.methanol-detail-col.col-flex .methanol-detail-col-txt{
		margin: 20px 0 0;
	}
	.methanol-detail-col + .methanol-detail-col{
		margin-top: 20px;
	}

	.history-lead{
		margin: 30px 0 0;
	}
	.history-lead p{
		line-height: 2;
	}
	.history-table{
		position: relative;
		margin: 30px 0 0;
	}
	.history-table-wrap{
		position: relative;
	}
	.history-table-col{
		position: relative;
	}
	.history-table-col h3{
		padding: 0 0 2px;
		position: relative;
		font-size: 24px;
		color: #0245A0;
	}
	.history-table-col h3 span{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: #0245A0;
	}
	.history-table-col h3 span:after{
		content: "";
		position: absolute;
		top: -6px;
		right: 3px;
		display: block;
		width: 12px;
		height: 12px;
		background: #fff;
		border-radius: 12px;
	}
	.history-table-detail{
		margin: 10px 0 0;
		padding: 0 18px 0 0;
	}
	.history-table-detail p{
		line-height: 2;
	}

	.history-table-fig-box{
		margin: 10px 0 0;
		padding: 0 12px 0 0;
	}
	.history-table-fig-box.fig-box-flex{
		display: flex;
		flex-wrap: wrap;
		margin: 10px -6px 0;
	}
	.history-table-fig-box.fig-box-flex > figure{
		padding: 0 6px;
		width: 50%;
	}
	.history-table-fig-box.fig-box-flex > figure:nth-child(n+3){
		margin-top: 12px;
	}

	.history-arrow{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 0;
		width: 18px;
		height: calc(100% + 5px);
		background: #0245A0;
	}
	.history-arrow:after{
		position: absolute;
		bottom:  -9px;
		left: 0;
		right: 0;
		content: "";
		display: block;
		border-width: 10px 9px 0 9px;
		border-style: solid;
		width: 0;
		height: 0;
		border-color: #0245A0 transparent transparent transparent;
	}
	.history-table-col-box + .history-table-col-box,
	.history-table-col + .history-table-col{
		margin-top: 25px;
	}


	#history .btn-link{
		margin-top: 30px;
	}
	.features-lead {
		margin: 25px 0 0;
	}
	.features-lead p{
		line-height: 2;
	}
	.features-figure {
		margin: 20px 0 0;
	}
}


@media screen  and (max-width: 374px){


}