/* 事例記事の共通部品。殻は case-layout.css。case-article.css には足さない
 *
 * 置く基準:
 *   2記事以上で使われうる汎用の構造なら、1記事目から置いてよい
 *   「その記事でしか成立しない見た目」は置かない → case-{html名}.css へ
 *
 * 命名:
 *   case-{構造}  （ハイフン。見た目・役割だけ）
 *   NG: 記事名・コラム名・案件名を入れる（例: case-analog-list）
 *   1記事限定は case-{html名}.css へ。そちらなら記事名クラス可
 *   既存の case_flex はアンダースコアの遺産。新規はハイフン
 */

/* 見出し付きの入れ子リスト */
#Case .case-section-list {
    margin-top: 1.5em;
}
#Case .case-section-list > li + li {
    margin-top: 1.5em;
}
#Case .case-section-list > li > h3:first-child {
    color: #0070C0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
#Case .case-section-list > li > h3 + p {
    margin-top: 0.3em;
}

/* ・行のぶら下げインデント */
#Case .case-hang-list {
    margin-top: 1.5em;
}
#Case .case-section-list > li > h3:first-child + .case-hang-list {
    margin-top: 0.6em;
}
#Case .case-hang-list > li {
    padding-left: 1em;
    text-indent: -1em;
}
#Case .case-hang-list > li > p {
    text-indent: 0;
    margin-top: 0.3em;
}
#Case .case-hang-list > li:has(p) + li {
    margin-top: 1.5em;
}

/* 見出しだが本文と同じ見た目 */
#Case .cnts h3.case-caption {
    font-size: 1.8rem;
    font-weight: normal;
    color: #333;
    line-height: inherit;
}
#Case .cnts h3.case-caption.fontbold {
    font-weight: bold;
}

/* 目次。本文と同じ見た目。ホバー変化は後で足す */
#Case .case-toc-title {
    color: #0070C0;
}
#Case .case-toc > li {
    list-style: disc;
    margin-left: 2rem;
}
#Case .case-toc > li + li {
    margin-top: 0.3em;
}
#Case .case-toc a,
#Case .case-toc a:hover {
    color: inherit;
    text-decoration: none;
}

/* 目次ジャンプ時、見出しがヘッダー直下に張り付かない余白 */
#Case .cnts h2[id] {
    scroll-margin-top: 70px;
}

/* 本文と図の横並び
 * 上揃え: case-split
 * 上下中央: case-split mid
 * 高さを本文に合わせる（比は維持）: case-split eq
 */
#Case .case-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-top: 1.5em;
}
#Case .case-split > p {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}
#Case .case-split > img,
#Case .case-split > figure {
    flex: 0 1 42%;
    width: 42%;
    max-width: 420px;
    height: auto;
}
#Case .case-split.mid {
    align-items: center;
}
#Case .case-split.eq {
    align-items: stretch;
}
#Case .case-split.eq > img {
    flex: 0 1 auto;
    align-self: stretch;
    width: auto;
    max-width: 48%;
    height: auto;
    object-fit: contain;
    object-position: center right;
}
#Case .case-split.eq > figure {
    flex: 0 1 auto;
    align-self: stretch;
    display: flex;
    width: auto;
    max-width: 48%;
}
#Case .case-split.eq > figure > img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 820px) {
    #Case .case-split {
        flex-direction: column;
        align-items: center;
    }
    #Case .case-split > img,
    #Case .case-split > figure {
        width: 100%;
        max-width: 480px;
        height: auto;
        align-self: center;
    }
}