@charset "utf-8";
/* CSS Document */

/*=================================================
共通
==================================================*/
.section_wrap{width: 100%;  padding: 0 10px;}
/*スマホ*/
@media screen and (max-width: 960px) {
    .section_wrap{margin: 15vw auto 0; padding: 0 10px; }
    .section_wrap .main{width: 100%;}   
}

/*=================================================
sec1 
==================================================*/
.section_wrap .sec1{width: 100%; max-width:960px; margin: 50px auto 0px; }
.section_wrap .sec1 p{font-size:20px; margin: 0 0 30px;}
/*スマホ*/
@media screen and (max-width: 768px) {
    .section_wrap .sec1{width: 100%; max-width:960px; margin: 30px auto 0px; }
    .section_wrap .sec1 p{font-size:14px; margin: 0 0 20px;}
}

/*=================================================
main　活動
==================================================*/
.main{margin: 100px 0 450px;}
.year1{width: 974px;  margin: 0 auto; height:auto; position: relative;}
/*下線*/
.year1::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 15px;
    width: 100%;
    max-width: 960px;
    border-bottom:solid 2px #2f88aa;
}

/*活動内容*/
.year1 .year_wrap{
    max-width:974px;
    display: flex;
    padding: 20px 0px 0px 0px;
    position: relative;
}
/*画像がないとき用*/
.year1.img_none .year_wrap{padding: 20px 0px 20px 0px;}

/*横線*/
.year1 .top::before{
    content:"";
    border-left: solid 5px #2f88aa;
    height: 100%;
    padding: 0px 0 1950px 0;/*内容に合わせて調整*/
    position: absolute;
    top:-50px;
    left:14px;
}
/*一番下横点線　last_dateを付与*/
.year1 .last_date::before{
    content:"";
    border-left:dashed 5px #2f88aa;
    height: 100%;
    padding: 0 0 400px 0;/*内容に合わせて調整*/
    position: absolute;
    top:0;
    left:14px;
}

/*丸印*/
.year1 .year_wrap .circle{
    font-size:30px;
    color: #2f88aa;
    position:relative;
}

/*引き込み線*/
.year1 .year_wrap .circle::after{
    content:"";
    border-top: 2px solid #2f88aa;
    width: 40px;
    position: absolute;
    top:25px;
    left:28px;
}
/*年号*/
.year1 .year_wrap .date{
    display: inline-block;
    margin: 1px 0 0 36px;
    background: #2f88aa;
    padding:2px 20px 5px;
    height: 45px;
    font-size:23px;
    color:#FFF;
    vertical-align: middle;
}
/*年の文字*/
.year1 .year_wrap .date span{
    font-size: 13px;
    vertical-align: middle;
}
/*テキスト*/
.year1 .year_wrap .h_txt{
    width:50%;
    text-align: left;
    padding :10px 0px 0px 30px  ;
}
.year1 .year_wrap .h_txt p{font-size:18px;}

/*画像*/
.year1 .year_wrap .img_box{margin: 20px 0 30px 0; margin-left:auto;}
.year1 .year_wrap .img_box figure{display: inline; text-align: right; }
.year1 .year_wrap .img_box figure img{width:100%;  max-width: 230px; }


/*実施中用調整 green_itemを付与*/
.year1.green_item> .year_wrap .circle{color:#EB7800!important;}
.year1.green_item> .year_wrap .circle::after{content:""; border-top: 2px solid #EB7800!important;}
.year1.green_item> .year_wrap .date{background: #EB7800!important;}
.year1.green_item> .year_wrap .h_txt{color:#EB7800!important; font-weight: bold;}
.green_txt{color:#EB7800!important;}
.green_item a{color:#EB7800!important; font-weight: bold;}
.green_item a:hover{opacity: 0.6;}

/*スマホ*/
@media screen and (max-width: 768px) {
    /*=================================================
    main　活動
    ==================================================*/
    .main{margin: 100px 0 150px;}
    .year1{width: 100%;  margin: 0 auto; height:auto; position: relative;}
    /*下線*/
    .year1::before{
        content: "";
        position: absolute;
        bottom: 0px;
        left: 10px;
        width: 100%;
        max-width: 960px;
        border-bottom:none;
    }

    /*活動内容*/
    .year1 .year_wrap{
        max-width:974px;
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0px 0px 0px;
        position: relative;
    }
    /*画像がないとき用*/
    .year1.img_none .year_wrap{padding: 20px 0px 20px 0px;}

    /*横線*/
    .year1 .top::before{
        content:"";
        border-left: solid 3px #2f88aa;
        height: 100%;
        padding: 0px 0 2250px 0;/*内容に合わせて調整*/
        position: absolute;
        top:-50px;
        left:0px;
    }
    /*一番下横点線　last_dateを付与*/
    .year1 .last_date::before{
        content:"";
        border-left:dashed 3px #2f88aa;
        height: 100%;
        padding: 0 0 400px 0;/*内容に合わせて調整*/
        position: absolute;
        top:0;
        left:0px;
    }

    /*丸印*/
    .year1 .year_wrap .circle{
        display: none;
    }

    /*引き込み線*/
    .year1 .year_wrap .circle::after{
        content:none;
    }
    /*年号*/
    .year1 .year_wrap .date{
        display: inline-block;
        margin: 1px 0 0 0px;
        background: #2f88aa;
        width:35%;
        padding:2px 10px 5px;
        text-align: center;
        height: auto;
        font-size: 3.5vw;
        color:#FFF;
        vertical-align: middle;
    }
    /*年の文字*/
    .year1 .year_wrap .date span{
        font-size: 13px;
        vertical-align: middle;
    }
    /*テキスト*/
    .year1 .year_wrap .h_txt{
        display: inline-block;
        width:100%;
        text-align: center;
        padding :10px 0px 0px 20px  ;
    }
    .year1 .year_wrap .h_txt p{font-size:13px;}

    /*画像*/
    .year1 .year_wrap .img_box{padding-top:30px; margin:auto;}
    .year1 .year_wrap .img_box figure{display: block; text-align: left; }
    .year1 .year_wrap .img_box figure img{width:100%;  max-width: 230px; }


    /*実施中用調整 green_itemを付与*/
    .year1.green_item> .year_wrap .circle{color:#EB7800!important;}
    .year1.green_item> .year_wrap .circle::after{content:""; border-top: 2px solid #EB7800!important;}
    .year1.green_item> .year_wrap .date{background: #EB7800!important;}
    .year1.green_item> .year_wrap .h_txt{color:#EB7800!important; font-weight: bold;}
    .green_txt{color:#EB7800!important;} 
    .green_item a{color:#EB7800!important; font-weight: bold;}
    .green_item a:hover{opacity: 0.6;}  
    
}