.breadcrumbs-list {
    color: #2d344b;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1;
    gap: 4px;
    /* biz-pay 分岐は theme/block-editor の reset CSS を一切 enqueue しないため、
       <ol> 標準の margin / padding-inline-start:40px が残る。常時ロードされる
       この CSS 側で自前リセットして全 page で余白を揃える（biz-pay 含む全サイト共通）。 */
    margin: 0;
    padding: 0;
}

.breadcrumbs-list .breadcrumbs-list__item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumbs-list .breadcrumbs-list__item:not(:last-of-type)::after {
    background: url('./img/icon_arrow_right_small_gray.png') no-repeat center / contain !important;
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.breadcrumbs-list .breadcrumbs-list__item > a {
    text-underline-offset: 2px;
}

.breadcrumbs-list .breadcrumbs-list__item a:hover {
    text-decoration: underline;
}

@media only screen and (min-width: 1240px) {
    .breadcrumbs-list {
        font-size: 14px;
    }
    .breadcrumbs-list .breadcrumbs-list__item:not(:last-of-type)::after {
        width: 24px;
        height: 24px;
    }
}

/* 固定ページ(post_type=page)のパンくずリプレイス用 modifier。
   theme の dist/css/style.css は固定ページの enqueue 分岐（inc/admin/settings.php）で
   読み込まれないため、全ページで常時読み込まれるこのプラグイン CSS 側に配置する。
   PC の max-width は 1232px 固定（画面幅による出し分けはしない）。
   line-height / 下線は portal 固定ページ限定。全サイトで enqueue される共有ベース
   （.breadcrumbs-list / __item > a）を汚さないよう modifier 配下に閉じ込める。 */
.breadcrumbs--portal {
    max-width: 1232px;
    margin-inline: auto;
    padding: 8px 16px;
}

.breadcrumbs--portal .breadcrumbs-list {
    line-height: 1.4;
}

.breadcrumbs--portal .breadcrumbs-list .breadcrumbs-list__item > a {
    text-decoration: underline;
}

@media screen and (min-width: 1240px) {
    .breadcrumbs--portal {
        padding: 16px 8px;
    }
}