/* ==========================================
   上部タグリストのレイアウト変更
   ========================================== */
.xcs-tag-list {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    list-style: none;
    margin: 0;
    padding: 0;
    /* gap: 0.5em; */
    /* justify-content: center; */
}

.xcs-tag-list li {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================
   各投稿のレイアウト変更
   ========================================== */
.xcs-works-list .wp-block-post-terms__separator{
    width: 0.5em;
visibility: hidden;
}

/* ==========================================
   works_tag タクソノミー タグデザイン(基本形)
   ========================================== */
.xcs-works-list .taxonomy-works_tag a,
.xcs-tag-list a {
    position: relative;
    display: inline-block;
    margin: 0 0.6em 0.6em 0.6em;
    padding: 0.6em 1em 0.6em 1.2em;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background-color: var(--tag-color, #999);
}

.xcs-works-list .taxonomy-works_tag a::before,
.xcs-tag-list a::before {
    position: absolute;
    top: 0;
    /* 先端の突き出し位置は元のサイズのまま維持する */
    left: -1em;
    content: '';
    /* 三角形の高さを本体の高さ(line-height 1em + padding 0.6em×2 = 2.2em)と正確に一致させ、
       右側(本体との接合部分)を1px分だけ余分に伸ばして本体に重ね、隙間を隠す */
    border-width: 1.1em calc(1em + 1px) 1.1em 0;
    border-style: solid;
    border-color: transparent var(--tag-color, #999) transparent transparent;
}

.xcs-works-list .taxonomy-works_tag a::after,
.xcs-tag-list a::after {
    position: absolute;
    top: 50%;
    left: 0.3em;
    transform: translateY(-50%);
    content: '●';
    font-size: 0.6em;
    color: #fff;
}


/* ==========================================
   タームごとの色分け(hrefのスラッグで判定)
   ========================================== */
.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/analysis'],
.xcs-tag-list a[href$='/works_tag/analysis'] {
    --tag-color: #189576;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/design'],
.xcs-tag-list a[href$='/works_tag/design'] {
    --tag-color: #3fa237;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/event'],
.xcs-tag-list a[href$='/works_tag/event'] {
    --tag-color: #99cb71;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/manage'],
.xcs-tag-list a[href$='/works_tag/manage'] {
    --tag-color: #c29715;
}

/* ==========================================
   promotion（広告・メディア）:白抜き
   ========================================== */
.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/promotion'],
.xcs-tag-list a[href$='/works_tag/promotion'] {
    --tag-color: #189576;
    color: var(--tag-color);
    background-color: #fff;
    border-top: 1.5px solid var(--tag-color);
    border-right: 1.5px solid var(--tag-color);
    border-bottom: 1.5px solid var(--tag-color);
    border-left: none; /* 左は三角形側に継ぐので消す */
    box-sizing: border-box;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/promotion']::before,
.xcs-tag-list a[href$='/works_tag/promotion']::before {
    /* border三角形トリック(塗りつぶし)をキャンセルし、SVGのアウトライン三角形に差し替え */
    /* top/heightは基準要素(a)のborder-top/bottomぶん内側にズレるため、その分を打ち消す */
    top: -1.5px;
    left: -1em;
    width: 1.05em;
    height: calc(100% + 3px);
    border-width: 0;
    background-color: var(--tag-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Cpolyline points='10,0 1,11 10,22' fill='none' stroke='black' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Cpolyline points='10,0 1,11 10,22' fill='none' stroke='black' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/promotion']::after,
.xcs-tag-list a[href$='/works_tag/promotion']::after {
    color: var(--tag-color);
}


/* ==========================================
   works一覧のレイアウト、デザイン変更
   ========================================== */

   .xcs-works-list h2 {
  word-break: auto-phrase; /* 文節単位で自動改行(Chrome/Edge対応) */
  overflow-wrap: break-word; /* 長い英単語やURLがはみ出さないための保険 */
}

.xcs-works-list .c-subtitleField {
    text-align: center;
    color: #2d935d;
}

.xcs-works-list .wp-block-post-excerpt__more-text{
    text-align: right;
}

/* ==========================================
   xcs-works-list のタグのみ少し小さくする
   (padding/margin/三角形はem基準なのでfont-sizeを
   下げるだけで全体が比例して縮小する)
   上部のタグリストが1emなので、75%で0.75em
   ========================================== */
.xcs-works-list .taxonomy-works_tag a {
    font-size: 0.75em;
}

/* 三角形(::before)のborder-widthは "1em + 1px" のように
   em(縮小される)とpx(縮小されない)が混在しており、
   本体との重なり量(1px)がそのままだと相対的にずれて見える。
   font-sizeの縮小率(0.75)に合わせてpx側も0.75倍にしておく */
.xcs-works-list .taxonomy-works_tag a::before {
    border-width: 1.1em calc(1em + 0.75px) 1.1em 0;
}

/* promotionタグの枠線(1.5px)と、それに合わせた::beforeの
   位置・高さ補正(-1.5px / +3px)も同じ理由でpx側を0.75倍にする */
.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/promotion'] {
    border-top-width: 1.125px;
    border-right-width: 1.125px;
    border-bottom-width: 1.125px;
}

.xcs-works-list .taxonomy-works_tag a[href$='/works_tag/promotion']::before {
    top: -1.125px;
    height: calc(100% + 2.25px);
}

/* ==========================================
   ACF画像フィールドブロック(c-acfImageField)
   <figure>のブラウザ標準の左右マージンを解除し、
   画像がコンテンツ幅いっぱいに表示されるようにする
   ========================================== */

.c-acfImageField {
    margin-left: 0;
    margin-right: 0;
}

.c-acfImageField img {
    width: 100%;
    height: auto;
    display: block;
}