/* Circleタイプのアイコン（P1-04 / P1-18で線画へ）。
以前は絵文字（🏠📮💞…）を content で出していたが、OSごとに字面も余白も違って
一覧に並べたときに大きさと位置が揃わなかった。SVGをマスクにして、
色は style.css の種類ごとのテーマ色をそのまま使う。 */
.ctype {
display: inline-block;
width: 1.15em; height: 1.15em;
margin-right: 7px;
vertical-align: -.16em;
border-radius: 0;
background-color: #98a0b8;
-webkit-mask-image: var(--ctype-ic); mask-image: var(--ctype-ic);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* 一緒に暮らす家族 = 家 */
.ctype.family_home {
background-color: #ffb37f;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* 離れて暮らす家族 = 離れた二軒 */
.ctype.family_far {
background-color: #ffd97f;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* パートナー = ハート */
.ctype.partner {
background-color: #ff9fc4;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* 友だち = 重なる二つの輪 */
.ctype.friends {
background-color: #7fd8c8;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* 仕事 = かばん */
.ctype.work {
background-color: #a6b4ff;
--ctype-ic: url('data:image/svg+xml;utf8,');
}
/* そのほか = 星 */
.ctype.custom { background-color: #98a0b8; }