.cp_timeline {
    /*箱*/
position: relative;
margin: 1.5em 0.5em;
}

.cp_timeline:before {
    /*流れの縦線*/
position: absolute;
top: 0;
width: 4px;
height: 99.9%;
content: '';
background-color: #006064;
left: 30px;
}

.cp_timeline .timeline_group {
    /*年と月日までの隙間*/
position: relative;
padding-top: 55px;
}

.cp_timeline .timeline_group:not(:first-of-type) {
    /*年と最後の項目までの隙間*/
margin-top: 4rem;
}

.cp_timeline .time_title {
    /*年ボックスのデザイン*/
position: absolute;
top: 0;
left: 0;
padding: 0.5rem 1.5rem;
color: #fff;
background-color: #4e8fcf;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 0.9em;
}

.cp_timeline .timeline_item {
    /*年と内容までの隙間*/
margin-bottom: 1em;
position: relative;
padding-left: 80px;
}

.cp_timeline .timeline_item:not(:last-of-type) {
    /*最後以外の項目の隙間*/
margin-bottom: 2.5em;
}

.cp_timeline .timeline_item:before {
    /*月日と項目をつなぐ横線*/
position: absolute;
z-index: -1;
left: 5%;
width: 10%;
height: 4px;
content: '';
background-color: #006064;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.cp_timeline .time {
    /*月日アイコンと中身の文字*/
position: absolute;
left: 0;
box-sizing: border-box;
min-width: 60px;
min-height: 60px;
padding: 0.75em 0.5em;
text-align: center;
color: #fff;
background-color: #00bfd9;
top: 50%;
margin-top: -30px;
border-radius: 65px;
}

.cp_timeline .time_month {
    /*日付*/
font-size: 0.95em;
font-weight: 700;
display: block;
}

.cp_timeline .time_year {
    /*月*/
font-size: 0.75em;
display: block;
text-transform: uppercase;
}

/*会社数のアイコン*/
.cp_timeline .company {
position: absolute;
left: 0;
box-sizing: border-box;
min-width: 65px;
min-height: 60px;
padding: 1.2em 0.5em;
text-align: center;
color: #fff;
background-color: #26C6DA;
top: 50%;
margin-top: -30px;
}

.cp_timeline .company_num {
    /*社数*/
font-size: 0.8em;
font-weight: 700;
display: block;
}
/*ここまで*/

.cp_timeline .desc {
    /*内容の箱*/
padding: 0.5em 1em;
border-left: 3px soliC6DA;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
font-size: 0.9em;
}

.cp_timeline .desc .flag {
    /*タイトル文字のあれこれ*/
font-size: 1.0em;
font-weight: bold;
margin: 0;
}

.desc ul{
    margin-bottom: 0.5em;
}

.desc li{
    margin-left: 2em;
}

.companylist ol{
    margin-top: 0;
    margin-left: 2.5em
}

/*組合員参加・脱退なし年度用*/
.listblank{
    margin: 2em 0;
}
/*参加・脱退無しここまで*/


/*以下スマートフォン対応範囲*/
@media only screen and (max-width: 767px) {
.cp_timeline{
width: 94%;
padding-left: 0.5em;        
}   

.cp_timeline:before {
    /*流れの縦線（左寄せに変更）*/
left: 0.5em;
height:99.6%;
}
.cp_timeline .timeline_group {
    /*年と月日までの隙間*/
padding-top: 40px;
}
.cp_timeline .timeline_item {
    /*年と内容までの隙間*/
padding-top: 60px;
padding-left: 20px;
}
.cp_timeline .timeline_item:before {
    /*月日と項目をつなぐ横線*/
top: 75px;
}
.cp_timeline .time {
    /*月日アイコンと中身の文字*/
top: 40px;
border-radius: 0 20px 20px 0;
min-height: 2em;
}
.cp_timeline .time_month,
.cp_timeline .time_year {
    /*月日はblockから変更*/
display: inline-block;
font-size: 0.75em;    
}
    
.cp_timeline .company{
    padding: 0.5em 0.5em;
    top:40px;
    min-height: 2em;
    display: inline-block;
}
    
.cp_timeline .desc {
    /*内容の文字サイズ*/
font-size: 0.8em;
}
    
}