/*
* Works Card（施工事例カード）
* 色・角丸は下の変数で変えられる（列数はショートコードの columns）。テーマ側で .works-list に上書きすれば反映される。
* 色の既定はテーマのキーカラー（TCD テーマの --tcd-key1-color）を使い、無ければ青。
*
* セレクタを .works-list.works-list／.works-list .works-card__* と2クラス分にしているのは、
* 本文用の「.post_content p」「.post_content ul」等（クラス1つ＋要素）に負けないようにするため。
*/
.works-list.works-list {
--wc-accent: rgb(var(--tcd-key1-color, 0, 128, 202));
--wc-text: #313345;
--wc-catch: var(--wc-accent);
--wc-card-bg: #fff;
--wc-img-bg: #d9d9d9;
/* 既定（design="shadow"）：枠なしで影で浮かせる。白い背景の上でもカードの境目が分かる */
--wc-radius: 16px;
--wc-frame: var(--wc-accent);
--wc-frame-width: 0px;
--wc-shadow: 0 6px 20px rgba(0, 0, 0, .10);
--wc-more-border-width: 3px;
/* ラベル・矢印・and more カードの色（デザイン案ごとに下で切り替える） */
--wc-cat-bg: #fff;
--wc-cat-color: var(--wc-accent);
--wc-cat-border: var(--wc-accent);
--wc-arrow: var(--wc-text);
--wc-arrow-hover-bg: var(--wc-accent);
--wc-arrow-hover-color: #fff;
--wc-more-bg: var(--wc-card-bg);
--wc-more-color: var(--wc-accent);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
text-align: left; /* 記事の枠（.cstm-box-sticky）の中央揃えを引き継がない */
list-style: none;
margin: 0;
padding: 0;
}
/* 自動整形がカードの部品と部品の間に入れた
・空の も隠す（説明文の中の改行は残す） */
.works-card > br,
.works-card__link > br,
.works-card__img > br,
.works-card__body > br,
.works-card__more > br,
.works-card > p:empty,
.works-card__link > p:empty,
.works-card__body > p:empty,
.works-card__more > p:empty {
display: none;
}
/* HTML を直接貼った場所で自動整形が
・空の
を挟んでも、一覧のマスが空かないよう隠す */
.works-list.works-list > br,
.works-list.works-list > p:empty {
display: none;
}
.works-list .works-card {
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
.works-list .works-card::before,
.works-list .works-card::marker,
.works-list .works-card__title::before,
.works-list .works-card__title::after {
content: none;
}
.works-list .works-card__link {
display: flex;
flex-direction: column;
height: 100%;
background: var(--wc-card-bg);
border: var(--wc-frame-width) solid var(--wc-frame);
border-radius: var(--wc-radius);
box-shadow: var(--wc-shadow);
overflow: hidden;
color: inherit;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.works-list .works-card__link:hover,
.works-list .works-card__link:focus-visible {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}
.works-list .works-card__link:focus-visible {
outline: 2px solid var(--wc-accent);
outline-offset: 2px;
}
.works-list .works-card__link:hover .works-card__arrow,
.works-list .works-card__link:focus-visible .works-card__arrow {
background: var(--wc-arrow-hover-bg);
border-color: var(--wc-arrow-hover-bg);
color: var(--wc-arrow-hover-color);
}
.works-list .works-card__img {
position: relative;
flex-shrink: 0;
aspect-ratio: 3 / 2;
background: var(--wc-img-bg);
overflow: hidden;
margin: 0;
}
.works-list .works-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-width: none;
}
/*
* 写真の提供者の名前：画像の左下に、カメラのアイコン付きの白いラベルで重ねる（TOP の切手の .cb-stamp__credit と同じ見た目）
*
![]()
名前