.main_wrap{padding-top:100px; }
.main_visual{background:url("../../images/sub/history/his_main_bg.jpg") no-repeat; height:950px; background-size:cover;}
.main_visual .txt_box{padding-top:200px; text-align:center;}
.main_visual .txt_box .tb02{position:relative; margin-top:35px; padding-top:40px; font-size:2.3rem; color:#fff;}
.main_visual .txt_box .tb02:before{content:""; display:block; width:30px; height:2px; background:#fff; position:absolute; top:0; left:50%; transform:translateX(-50%);}

.graph_box{position:relative; margin-top:130px;}
.graph_box:before{content:""; display:block; width:100%; height:1px; background:#d4d6d7; position:absolute; top:175px; left:0;}
.graph_box ul{width:1200px; margin:0 auto; font-size:0; text-align:center;}
.graph_box li{display:inline-block; font-size:2rem; width:200px;}
.graph_box li .img_box{opacity:0; position:relative; border:5px solid #e6ae1a; box-sizing:border-box; transition:all 0.2s; -webkit-transition:all 0.2s; }
.graph_box li .img_box:after{content:""; display:inline-block; width:0; height:0; border-style:solid; border-width:13px 11px ; border-color:#e6ae1a transparent transparent transparent; position:absolute; bottom:-31px; left:50%; transform:translateX(-50%);}
.graph_box li .img_box img{width:100%;}
.graph_box li .year{position:relative; margin-top:40px; padding-top:20px;}
.graph_box li .year:before{content:""; display:block; width:14px; height:14px; background:#fff; position:absolute; top:-10px; left:50%; transform:translateX(-50%); border-radius:999px; border:3px solid transparent; box-sizing:border-box; transition:all 0.2s; -webkit-transition:all 0.2s;}
.graph_box li .year span{display:inline-block; height:45px; line-height:45px; padding:0 30px; background:transparent; color:#fff; border-radius:999px;  }
.graph_box li.on .img_box{opacity:1;}
.graph_box li.on .year:before{border:3px solid #e6ae1a;}
.graph_box li.on .year span{background:#e6ae1a;}

@media (max-width:1200px){
.main_visual{height:750px; }
.main_visual .txt_box{padding-top:120px;}

.graph_box{margin-top:85px;}
.graph_box:before{top:152px;}
.graph_box ul{width:100%; }
.graph_box li{width:165px;}
}

@media (max-width:1024px){
.main_visual{height:auto; background-position:50% 0; padding: 0 15px; box-sizing:border-box;}
.main_wrap{padding-top:70px;}
.main_visual .txt_box{padding-top:70px;}
.main_visual .txt_box .tb01 img{width:600px;}
.main_visual .txt_box .tb02{padding:30px 15px 0; word-break:keep-all;}

.graph_box{padding-bottom:30px;}
.graph_box:before{display:none;}
.graph_box li{width:33.3%; padding:0 10px; box-sizing:border-box; margin-bottom:20px;}
.graph_box li .img_box{opacity:1; max-width:200px; margin:0 auto;}
.graph_box li .img_box:after{display:none;}
.graph_box li .year{margin-top:0px; padding-top:0;}
.graph_box li .year:before{display:none;}
.graph_box li.on .year span{background:transparent;}
}

@media (max-width:768px){
.main_visual .txt_box{padding-top:40px;}
.main_visual .txt_box .tb01 img{max-width:100%;}
.main_visual .txt_box .tb02{font-size:1.8rem; padding-top:20px; margin-top:15px;}

.graph_box{margin-top:40px;}
.graph_box li{width:50%; margin-bottom:10px;}
.graph_box li .img_box{border-width:2px;}
.graph_box li .year span{padding:0;}
}