@charset "utf-8";


/*==========
CONTENTS WORKS ID:1501
==========*/
/*config*/
:root {
    --timeline-color:#91c423;  /*タイムラインの色*/
    --timeline-circle-title:22px; /*見出しの文字サイズ*/
    --timeline-circle-size:70px; /*サークルのサイズ*/
    --timeline-circle-font:40px; /*サークルの文字サイズ*/
}
/*css*/
.template-timeline{
    counter-reset: number;
    margin-bottom: 30px;
}
.template-timeline-once{
    position: relative;
    min-height: 100px;
}
.template-timeline-once::before{
    counter-increment: number;
    content:counter(number);
    position: absolute;
    top:0;
    left:0;
    width:var(--timeline-circle-size);
    line-height:var(--timeline-circle-size);
    height:var(--timeline-circle-size);
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    background: var(--timeline-color);
    color: #fff;
    font-size: var(--timeline-circle-font);
    z-index:2;
}
.template-timeline-once::after{
    position: absolute;
    content:"";
    top:calc(var(--timeline-circle-size)/2);
    left:calc(var(--timeline-circle-size)/2);
    width:2px;
    height:100%;
    display: inline-block;
    background: var(--timeline-color);
    z-index:1;
}
.template-timeline-once:last-of-type::after{
    display: none;
}
.template-timeline-text{
    margin-left:calc(var(--timeline-circle-size) + 20px);
    flex-wrap: wrap;
}
.template-timeline-title{
    margin:1em 0;
    font-size: var(--timeline-circle-title);
    color:var(--timeline-color);
}