@charset "utf-8";
/*====================================================================================================

  三日町の歴史

====================================================================================================*/
.history-col{
    position: relative;
    border-left:2px dashed #e6e6e6;
}
.history-col:first-of-type{
    margin-top: 90px;
}
.history-col:last-of-type{
    
}

.history-col::before{
    content: "●";
    color: #fff;
    text-align: center;
    display: inline-block;
    background-color: #e89941;
    position: absolute;

}

.history-col:last-of-type::after{
    content: "●";
    color: #fff;
    text-align: center;
    display: inline-block;
    background-color: #cf6d63;
    position: absolute;
}

.img-box dl{
    height:auto;
}

.img-box dt{
    margin-bottom: 10px;   
}

.img-box dd{
    text-align: center;
    font-size: 0.88em;
    padding-bottom: 10px;
}

.history-col.photo-2{
    display: block;
}

.history-col.photo-2 .txt-box{
    width: 100%;
}

.history-col.photo-2 .img-box dl:first-of-type{
    margin-right: 60px;
}

.history-col:last-of-type > .txt-box > .until_now{
    position: absolute;
}

.annotation{
    width: 100%;
    text-indent: -0.5em;
    padding-left: 1em;
}



@media print,screen and (min-width:641px) {
.history-col{
    margin-left: 30px;
    padding: 15px 30px 90px 60px;
    display: flex; 
}
.txt-box {
    width: 50%;
    min-width: 550px;
    margin-right: 60px;
}
.history-col.photo-2 .img-box{
    display: flex;
    margin-top: 30px;
}
.history-col::before{
    font-size: 28px;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    top:-25px;
    left: -25px;
}
    
.history-col:last-of-type{
    padding-bottom: 45px;
    margin-bottom: 90px;
}

.history-col:last-of-type::after{
    font-size: 28px;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    bottom:-25px;
    left: -25px;
}
    
.history-col:last-of-type > .txt-box > .until_now{
    bottom:-20px;
}
    
}






@media print,screen and (max-width:640px) {
.history-col{
    margin-left: 0px;
    padding: 15px 15px 90px 30px;
    display: block; 
}
    
.txt-box {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 20px;
}
         
.history-col.photo-2 .img-box dl{
    width:100%; 
}
    
.history-col.photo-2 .img-box dl:nth-of-type(1){
    margin-bottom:20px;  
}
    
.history-col::before{
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    top:-15px;
    left: -15px;
}

.history-col:last-of-type::after{
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    bottom:-15px;
    left: -15px;
}
    
.history-col:last-of-type{
    padding-bottom: 60px;
    margin-bottom: 60px;
}    
    
.history-col:last-of-type > .txt-box > .until_now{
    bottom:-16px;
}
    
}