@charset "utf-8";

/* ちょっと隙間空けます、広がりすぎないようにします */
.tpcontents{
    padding-left:1em;
    padding-right: 1em;
    max-width: 960px;
    margin-left:auto;
    margin-right:auto;
    
}

#topic{padding: 1em 0.5em 1em 0.5em;}

.tpcontents img{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 1em;
    margin-top: 1em;
}

.tpcontents .tpbtitle{
    border-left: 1px solid #000;
    border-bottom: 3px solid #20c828;
    padding: 0.5em;
    font-size: 120%;
}

.tpcontents .tpli a{
    display: block;
    padding: 0.5em 0;
    background: #89e994;
    text-align: center;
}

.tpcontents .tpcli a{
    display: block;
    padding: 0.5em 0;
    border-bottom: 1px solid #20c828;
}

.tpcontents .tpli a{
    padding: 1em 0;
}

@media only screen and (max-width:767px){
    .tpcontents .tpli .tplc:nth-child(2),
    .tpcontents .tpli .tplc:nth-child(3){
        margin-top:1em;
    }
}
@media only screen and (min-width:768px){
    .tpcontents .tpli{display: flex;}
    .tpcontents .tpli .tplc{
        width:calc(100%/3);
    }

    .tpcontents .tpli .tplc:nth-child(2),
    .tpcontents .tpli .tplc:nth-child(3){
        margin-left:1em;
    }
}

.tpcontents .tpli .tplc a{
    color: #fff;
}

.tpcontents .tpcli h4 .tdate{
    color: #24A9E2;
}

.tpcontents .tpcli h4 .ttitle{
    color: #D6DF22;
}