@charset "utf-8";
/* CSS Document */
/*----------------------
----------------------*/
div#title{
display:table;
width: 100%;
height: 600px;
padding: 100px 0;
float: left;
background: url("../image/history/title.jpg") no-repeat 50% 0;
text-align:center;
}

div#title div#title_box{
display:table-cell;
vertical-align:middle;
width:400px;
height: 400px;
margin: 0 auto;
background: url("../image/common/title_line.png") no-repeat 50% 50%;
color: #fff;
}

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

div#area_h2_1{
width: 100%;
float: left;
padding: 60px 0;
background: url("../image/history/h2_bg.gif") no-repeat 50% 50%;
background-size: contain;
text-align: center;
}

@media screen and (max-width:680px) {
div#area_h2_1{
width: calc(100% - 20px) ;
margin: 0 10px;
padding:20px 0;
}
}
/*-----------------
-----------------*/

div#area_h2_2{
width: 100%;
float: left;
padding: 60px 0;
background: url("../image/history/h2_bg.gif") no-repeat 50% 50%;
background-size: contain;
text-align: center;
}

@media screen and (max-width:680px) {
div#area_h2_2{
width: calc(100% - 20px) ;
margin: 0 10px;
padding:20px 0;
}
}


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

div#area_history_1{
width: 100%;
float: left;
padding: 60px 0;
}

div#area_history_1 div#area_history_box_1{
width:100%;
max-width:900px;
margin:0 auto;
}

@media screen and (max-width:680px) {
div#area_history_1 div#area_history_box_1{
padding: 0 10px;
}
}



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

div#area_history_2{
width: 100%;
float: left;
padding: 60px 0;
}

div#area_history_2 div#area_history_box_2{
width:100%;
max-width:900px;
margin:0 auto;
}

@media screen and (max-width:680px) {
div#area_history_2 div#area_history_box_2{
padding: 0 10px;
}
}





.timeline {
  list-style: none;
}
.timeline > li {
margin-bottom: 60px;
overflow: hidden;
margin: 0;
position: relative;
}
.timeline-date {
width: 110px;
float: left;
margin-top: 20px;
}
.timeline-content {
width: 75%;
float: left;
border-left: 3px #e5e5d1 solid;
padding:15px 0 30px 30px;
}
.timeline-content:before {
content: '';
width: 12px;
height: 12px;
background: #F8B500;
position: absolute;
left: 106px;
top: 24px;
border-radius: 100%;
}

.timeline_img{
padding: 20px 0 0 0;
}


@media screen and (max-width:680px) {
.timeline_img{
width: 100%;
height: auto;
}
}