@media print, screen and (min-width: 701px) {
    ul.articles {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px #808080 dotted;
        list-style-type: none;
        li {
            padding: 20px 0;
            border-bottom: 1px #808080 dotted;
        }
        .item {
            width: 100%;
            margin: 0;
            font-size: 1.6rem;
            display: flex;
            justify-content: space-between;
            .photo {
                width: 180px;
                order: 1;
                img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }
            .detail {
                order: 2;
                width: calc(100% - 200px);
                .xtitle {
                    margin-bottom: 5px;
                    line-height: 1.4;
                    font-size: 1rem;
                    a {
                        color: #333;
                        font-weight: bold;
                    }
                }
                .author {
                    margin-bottom: 5px;
                    font-size: 0.7rem;
                    color: #666;
                }
                .issue {
                    margin-top: 1em;
                    font-size: 0.8rem;
                    color: #333;
                    a {
                        color: #333;
                        font-size: 0.8rem;
                        &::before {
                            content: "> ";
                        }
                    }
                }
            }
        }
    }

    /* 旧デザイン */
    ul.thumbnail {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px #808080 dotted;
        list-style-type: none;
    }

    ul.thumbnail li {
        padding: 20px 0;
        border-bottom: 1px #808080 dotted;
    }

    ul.thumbnail dl {
        width: 100%;
        margin: 0;
        font-size: 80%;
    }

    ul.thumbnail dt.photo {
        width: 250px;
        float: left;
    }
    ul.thumbnail dt.photo img {
        border: 1px #808080 solid;
    }

    ul.thumbnail dt.title,
    ul.thumbnail dd {
        margin: 0 0 0 160px;
    }

    ul.thumbnail dt.xtitle {
        margin-bottom: 5px;
        line-height: 120%;
        font-size: medium;
    }

    ul.thumbnail dd {
        line-height: 150%;
    }

    .clearFix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearFix {
        min-height: 1px;
    }

}

@media screen and (max-width: 700px) {
    img {
        max-width : 100% ;
        height : auto ;
    }

    img { float : none ; }

    h2 {
        font-size : 75% ;
        margin : 1em 0 0.8em 0 ; 
    }

    p {
        width : 100% ;
        font-size : 65% ;
        margin : 0 0 1.8em 0 ;
        line-height : 1.7 ;
    }

    ul.thumbnail {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px #808080 dotted;
        list-style-type: none;
    }

    ul.thumbnail li {
        padding: 20px 15px;
        border-bottom: 1px #808080 dotted;
    }

    ul.articles {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px #808080 dotted;
        list-style-type: none;
        li {
            padding: 3vw 0 0 0;
            border-bottom: 1px #808080 dotted;
        }
        .item {
            width: 100%;
            margin: 0;
            font-size: 1.6rem;
            display: flex;
            flex-wrap: wrap;
            .photo {
                width: 100%;
                order: 1;
                img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }
            .detail {
                order: 2;
                width: 100%;
                .xtitle {
                    padding-top: 3vw;
                    margin-bottom: 5px;
                    line-height: 1.2;
                    font-size: 4vw;
                    a {
                        color: #333;
                        font-weight: bold;
                    }
                }
                .author {
                    margin-bottom: 5px;
                    font-size: 3vw;
                    color: #666;
                }
                .issue {
                    text-align: right;
                    font-size: 3vw;
                    color: #333;
                    a {
                        color: #333;
                        font-size: 3vw;
                        &::before {
                            content: "> ";
                        }
                    }
                }
            }
        }
    }
}