/**************************************************/
/*  Codex追加：通常記事と瞬刊で共用するlinkカード
/**************************************************/
body div.relation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body div.relation ul li {
    border: 0;
    position: relative;
}
body div.relation ul li:last-child {
    margin-bottom: 0;
}
body div.relation ul li::before {
    content: none;
    display: none;
}
body div.relation ul li span::before {
    background: rgb( var( --gray-color ) );
    border-radius: 8px;
    display: inline;
    margin-right: 10px;
    padding: 6px;
}
body div.relation ul li.external span::before {
    content: "外部";
}
body div.relation ul li.relate span::before {
    content: "関連";
}
body div.relation ul li.source span::before {
    content: "情報元";
}
body div.relation ul li.release span::before {
    content: "リリース";
}
body div.relation ul li.review span::before {
    content: "レビュー";
}
body div.relation ul li.external:not( .pd-0 ),
body div.relation ul li.relate:not( .pd-0 ) {
    padding-left: 3.4em;
    text-indent: -3.4em;
}
body div.relation ul li.source:not( .pd-0 ) {
    padding-left: 4.4em;
    text-indent: -4.4em;
}
body div.relation ul li.release:not( .pd-0 ) {
    padding-left: 5.3em;
    text-indent: -5.3em;
}
body div.relation ul li.review:not( .pd-0 ) {
    padding-left: 5.45em;
    text-indent: -5.45em;
}
body div.relation ul li a.link,
body div.relation ul li a.link:hover {
    border-bottom: 0;
    color: #333;
    text-decoration: none;
}
body div.relation ul li a.link > div.flex-1 {
    align-self: stretch;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}
body div.relation ul li a.link div.title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: .12em;
    transition: color 0.195s ease;
}
body div.relation ul li:hover a.link div.title {
    color: rgb( var( --main-color ) );
    text-decoration-color: rgb( var( --main-color ) );
}
body div.relation ul li a picture img {
    transition: transform 0.3s ease;
}
body div.relation ul li:hover a picture img {
    transform: scale( 1.1 );
}
body div.relation ul li div.button {
    background-color: transparent;
    bottom: auto;
    color: rgb( var( --main-color ) );
    flex: 0 0 auto;
    margin-top: auto;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 1;
}
body div.relation ul li div.button::before {
    background-color: rgb( var( --main-color ) );
    border-radius: 50px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateX( -100% );
    transition: transform 0.3s ease;
    width: 100%;
    z-index: -1;
}
body div.relation ul li:hover div.button::before {
    transform: translateX( 0 );
}
body div.relation ul li:hover div.button {
    color: #fff;
}

@media ( max-width: 767px ) {
    body div.relation {
        padding: .5em;
    }
    body div.relation li a.link div.title {
        display: -webkit-box;
        font-size: 16px;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    body div.relation li a.link div.flex-0-0-120 {
        flex: 0 0 100px;
    }
    body div.relation li a.link div.button {
        display: none;
    }
}

@media ( min-width: 768px ) {
    body div.relation {
        padding: 1em;
    }
    body div.relation li a.link div.title {
        display: -webkit-box;
        font-size: 20px;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    body div.relation li a.link div.flex-0-0-120 {
        flex: 0 0 120px;
    }
    body div.relation li a.link div.button {
        display: block;
    }
}