@charset "UTF-8";

@media (max-width: 60em) {
    .mod-index-01._wide-col3>.col, .mod-index-02._wide-col3>.col {
        width: 50%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-left: 0;
        flex: none;
    }

    .mod-index-01._wide-col3>.col:nth-child(n+3), .mod-index-02._wide-col3>.col:nth-child(n+3) {
        margin-top: 2em;
    }
}

@media (max-width: 48em) {
    .mod-index-02._wide-col3 {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        margin: 0.7em 0 0;
        list-style: none;
    }

   .mod-index-01._wide-col3>.col {
        width: auto;
        padding: 0;
    }

    .mod-index-02._wide-col3>.col:before {
        display: inline-block;
        position: absolute;
        bottom: 1em;
        left: 0;
        width: 0;
        height: calc(100% - 1em);
        border-right: 3px dotted #ededed;
        content: "";
    }

    .mod-index-02._wide-col3>.col:nth-child(2n+1):before {
        display: none;
    }

    .mod-index-02._wide-col3>.col {
        margin-bottom: 1em;
        border-bottom: 3px dotted #e1e1e1;
    }

    .mod-index-01._wide-col3>.col:nth-child(n+3) {
        margin-top: 20px;
    }

    .mod-index-02._wide-col3>.col {
        margin-top: 0;
        padding-bottom: 20px;
    }

    .mod-index-02._wide-col3>.col:nth-child(n+3) {
        margin-top: 0;
    }

    .mod-index-01>.col>a.wrap {
        flex-direction: row-reverse;
        display: flex;    
        align-items: flex-start;
    }

    .mod-index-02>.col>a.wrap {
        display: flex;    
        align-items: flex-start;
        padding: 0 10px;
    }

    .mod-index-01>.col>a.wrap>.container {
        box-sizing: border-box;
        position: relative;    
        width: calc(100% - 43%);    
        padding-left: 10px;
    }

    .mod-index-02>.col>a.wrap>.container {
        box-sizing: border-box;
        position: relative;
    }

    .mod-index-01>.col>.wrap>.container>.tag, .mod-index-02>.col>.wrap>.container>.tag {
        padding: 4px 0.6em;    
        font-size: 1rem;
    }

    .mod-index-01>.col>a.wrap>.container>.hdg, .mod-index-02>.col>a.wrap>.container>.hdg {
        margin-top: 2px;  
        font-size: 1.2rem;
    }

    .mod-index-01>.col>.wrap>.image {    
        width: 43%;
    }

    .mod-index-02>.col+.col {
        margin-top: 0;
    }
}