/*Content CSS*/
#coexistence{overflow: hidden;}

section > article{padding: 70px 0 100px;}
section > article:nth-child(even){background-color: #f7f7f7;}

.sub_inner{width: 100%; max-width: 1500px; padding: 0 50px; margin: 0 auto;}

/* fontstyle */
h2.sub_title::before{content: ''; display: inline-block; width: 5px; height: 45px; background-color: #18578f; margin-right: 15px; position: relative; top: 2px;}
.fs_55{font-family: 'SCoreDream'; font-size: 55px; font-weight: 700;}
.fs_20{font-family: 'SCoreDream'; font-size: 20px; font-weight: 700;}
.fs_18{font-size: 18px; font-weight: 700; }
.fs_17{font-size: 17px; font-weight: 300; color: #555;}

/* con */
.his_con { position:relative; }
.his_con .d1_ul { position:relative; padding: 40px 0 0; }
.his_con .d1_ul::before { content:""; position:absolute; left:50%; transform: translateX(-50%); top:0; width:1px; height:100%; background:#ddd; }

.d1_ul .d1_li { width: 50%; display: flex; flex-direction: row-reverse; text-align: right; align-items: flex-end; margin-left: 5px; min-height: 100px; margin-bottom: 50px;}
.d1_ul .d1_li:last-child{margin-bottom: 0;}
.d1_ul .his_dot { position:relative; display: flex; align-items: center; width: 9px; height: 9px; background: #fff; border-radius: 50%; z-index: 1; flex-shrink: 0; background-color: #18578f; top: -32px;}
.d1_ul .his_dot::before { content: ''; position:absolute; right:100%; top:50%; transform: translateY(-50%); width: 30px; height: 1px; background-color: #18578f; }
.d1_ul .his_dot::after{content: ''; display: block; position: absolute; background-color: #18578f; opacity: .2; top: -5px; left: -5px; width: 19px; height: 19px; border-radius: 50%;}

.d1_ul .his_txt { position:relative; top:-15px; margin-right: 45px; display: flex; flex-direction: column-reverse;}
.d1_ul .his_txt h2 {font-family: 'SCoreDream'; font-size: 40px; font-weight: 700; line-height: 1; color: #18578f; margin-top: 20px;}
.his_txt .d2_ul { margin-top:30px; }
.his_txt .d2_ul li { position:relative; padding-right: 15px; display: flex; flex-direction: row-reverse; font-size: 16px; font-weight: 300; margin:0 0 10px; line-height: 1.5; }
.his_txt .d2_ul li::before { content:""; position:absolute; right:0; top:10px; width:4px; height: 4px; background:#c30d23; }

.his_box{margin-top: 15px;}
.his_box li{display: flex; flex-direction: row-reverse; align-items: center;}
.his_box li:nth-child(n+2){margin-top: 45px;}
.his_box li p{min-width: 290px; margin:0 15px; }
.his_box .text{display: flex; flex-direction: row-reverse; align-items: baseline;}
.his_box .img{display: flex; flex-shrink: 0;}
.his_box .img img{display: block;}
.his_box .img img + img{margin-left: 8px;}



.d1_ul .d1_li:nth-child(odd) { flex-direction: row; margin-left: calc(50% - 5px); text-align: left; }
.d1_ul .d1_li:nth-child(odd) .his_dot::before { right:initial; left:100%; }
.d1_ul .d1_li:nth-child(odd) .his_txt { margin:0 0 0 45px; }
.d1_ul .d1_li:nth-child(odd) .his_txt .d2_ul li { padding:0 0 0 15px; flex-direction: row; }
.d1_ul .d1_li:nth-child(odd) .his_txt .d2_ul li::before { right:initial; left:0; }
.d1_ul .d1_li:nth-child(odd) .his_box li{ flex-direction: row;}
.d1_ul .d1_li:nth-child(odd) .his_box li p{margin-left:15px; }
.d1_ul .d1_li:nth-child(odd) .his_box .text{flex-direction: row; }
.d1_ul .d1_li:nth-child(odd) .his_box .img img + img{margin-right: 8px;}



/* .bor{border: solid 1px #ddd;} */

@media screen and (max-width:1500px){
    .his_box li{display: block;}
    .his_box .img{justify-content: right; margin: 15px 52px 0 0;}
    .d1_ul .d1_li:nth-child(odd) .his_box .img{justify-content: left;  margin: 15px 0 0 52px;}
}

@media screen and (max-width:1280px) {
    .img{overflow-x: scroll;}
}

@media screen and (max-width:1024px) {
    section > article{padding: 50px 0;}
    .sub_inner{padding: 0 30px;}
    h2.sub_title::before{height: 31px;}
    .fs_55{font-size: 35px;}
    .fs_18{font-size: 17px; line-height: 1.65;}
    .fs_17{font-size: 16px;}
    .d1_ul .his_txt h2{font-size: 28px;}
    .his_box li:nth-child(n+2){margin-top: 30px;}
    .his_box .img{margin-right: 0;}
    .d1_ul .d1_li:nth-child(odd) .his_box .img{margin-left: 0;}


    .his_con .d1_ul::before{left: 4px; transform: initial;}
    .d1_ul .d1_li {width: 100%; flex-direction: row; margin-left: 0; text-align: left; }
    .d1_ul .d1_li .his_dot::before { right:initial; left:100%; }
    .d1_ul .d1_li .his_txt { margin:0 0 0 45px; }
    .d1_ul .d1_li .his_txt .d2_ul li { padding:0 0 0 15px; flex-direction: row; }
    .d1_ul .d1_li .his_txt .d2_ul li::before { right:initial; left:0; }
    .d1_ul .d1_li .his_box li{ flex-direction: row;}
    .d1_ul .d1_li .his_box li p{margin-left:15px; }
    .d1_ul .d1_li .his_box .text{flex-direction: row; }
    .d1_ul .d1_li .his_box .img img + img{margin-right: 8px;}
    .d1_ul .d1_li:nth-child(odd){margin-left: 0;}

    .d1_ul .d1_li .his_box li{display: flex;}
    .his_box li p{min-width: 225px; margin-right:15px;}
    .his_box li:nth-child(n+2){margin-top: 15px;}
    .d1_ul .y2022 { margin-top: 50px; }
    .d1_ul .y2021 { margin-top: 50px; }
    .d1_ul .y2020 { margin-top: 50px; }
    .d1_ul .y2019 { margin-top: 50px; }
    .d1_ul .y2018 { margin-top: 50px; }
    .d1_ul .y2017 { margin-top: 50px; }

    .d1_ul .his_dot{top: -22px;}



}

@media screen and (max-width: 768px) {
    .sub_inner{padding: 0 20px;}
    h2.sub_title::before{height: 25px;}
    .fs_55{font-size: 27px;}
    .fs_18{font-size: 16px;}
    .fs_17{font-size: 14px;}
    .d1_ul .d1_li{margin-bottom: 30px;}
    .d1_ul .d1_li .his_box li{display: block;}
    .his_box .img{justify-content: left; margin-left: 0;margin-top: 10px;}
    .d1_ul .d1_li:nth-child(odd) .his_box .img{margin-left: 0;}
    .d1_ul .his_txt h2{font-size: 22px;}

    br.no2{display: none;}



}



@media screen and (max-width: 640px) {
    .sub_inner{padding: 0 20px;}
    h2.sub_title::before{height: 25px;}
    .fs_55{font-size: 27px;}
    .fs_18{font-size: 16px;}
    .fs_17{font-size: 14px;}






}

@media screen and (max-width: 480px) {
    .his_box .img, .d1_ul .d1_li:nth-child(odd) .his_box .img{justify-content: left; margin-left: 0;}
    br.no{display: none;}
}
