@charset "UTF-8";
/* ######################################################################################

　パンくずリスト　topicPath

###################################################################################### */

/* ====================================================
　共通
==================================================== */
.topicPath{
    position: relative;
    background: var(--color-white);
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.topicPath ol{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
@media print, screen and (min-width: 768px){
    /* 0.25em刻み（自身のfont-size 1.3rem=13px基準）：上=0.25em／下=0.5em */
    /* 左右paddingは共通変数--container-pad-pc（min(3.125vw,2.5em)）を
       そのまま使わない。2.5emはbody基準（1.6rem=16px）で40px相当だが、
       このol自身はfont-size:1.3rem(13px)のため、変数をそのまま参照すると
       同じ40px基準のつもりが32.5px相当に縮み、pageHead__heading側
       （bodyのfont-size基準＝40px）と左端がずれる。ol自身の実font-size
       （13px）を基準に、同じ40px相当になる比率へ換算し直す
       （40px ÷ 13px = 3.0769em） */
    .topicPath ol{
        padding-top: 0.25em;
        padding-bottom: 0.5em;
        padding-right: 3.0769em;
        padding-left: 3.0769em;
        font-size: 1.3rem;
        line-height: 3.0769em;
    }
}
@media screen and (max-width: 767px){
    /* Figma SPアートボード幅390px基準。上限を設けずvwで画面幅に比例拡縮する。
       左右余白は24px基準（共通.contentsの20pxとは異なる）。
       文字サイズは通常テキストのため画面幅に連動させず固定remとする */
    .topicPath ol{
        padding-top: 3.0769vw;
        padding-bottom: 3.0769vw;
        padding-right: 6.1538vw;
        padding-left: 6.1538vw;
        line-height: 1.25;
        font-size: 1.3rem; /* Figma実測13px */
    }
}
.topicPath ol li{
    display: flex;
    align-items: center;
    color: var(--color-text);
}
.topicPath ol li a{
    color: #2e5ac2;
    text-decoration: none;
}
.topicPath ol a:hover{ text-decoration: underline; }

/* 区切り矢印（">"型シェブロン。装飾のみのためCSSで描画） */
.topicPath ol li + li::before{
    content: "";
    flex-shrink: 0;
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 0.75em; /* 12px相当（bodyの1.6rem=16px基準） */
    margin-left: 0.75em;  /* 同上 */
    border-top: 1.5px solid #b7b7b7;
    border-right: 1.5px solid #b7b7b7;
    transform: rotate(45deg);
}
@media screen and (max-width: 767px){
    .topicPath ol li + li::before{ margin-right: 1.5385vw; margin-left: 1.5385vw; }
}

/* 現在地インジケーター（コンテナ左端に揃えた装飾バー） */
.topicPath ol::after{
    content: "";
    position: absolute;
    left: 24px;
    bottom: -4px;
    width: 50px;
    height: 4px;
    background: var(--color-primary);
}
@media print, screen and (min-width: 768px){
    /* 左paddingと同じ理由・同じ換算値（40px相当 = 3.0769em、ol自身の
       font-size:1.3rem基準）で揃える */
    .topicPath ol::after{ left: 3.0769em; }
}
@media screen and (max-width: 767px){
    /* Figma実測：SP版パンくずには現在地インジケーター（下線）が存在しない
       （PC版のみ表示する装飾のため、SPでは非表示にする） */
    .topicPath ol::after{ display: none; }
}