※追加クラス名は、ブックマークレットで確認可能
テキスト関係
vw単位
・以下のクラス名を追加すること。WP管理画面上で分かり易いように、テキストもvw単位で設定してもOK
.xcs-fzclamp-2 {font-size: clamp(1.4rem, 2vw, 2.4rem) !important;}
.xcs-fzclamp-3 {font-size: clamp(1.6rem, 3vw, 3.6rem) !important;}
.xcs-fzclamp-4 {font-size: clamp(1.8rem, 4vw, 4.8rem) !important;}
.xcs-fzclamp-5 {font-size: clamp(2rem, 5vw, 6rem) !important;}
.xcs-fzclamp-6 {font-size: clamp(2.2rem, 6vw, 7.2rem) !important;}
.xcs-fzclamp-7 {font-size: clamp(2.4rem, 7vw, 8.4rem) !important;}
.xcs-fzclamp-8 {font-size: clamp(2.6rem, 8vw, 9.7rem) !important;}
.xcs-fzclamp-9 {font-size: clamp(2.8rem, 9vw, 10.8rem) !important;}
.xcs-fzclamp-10 {font-size: clamp(3rem, 10vw, 12rem) !important;}
wp管理画面でのフォントサイズ（s, m, lなど）
・デフォルトではPC/SPでほとんどサイズ差が無く使いにくいので、以下の通り上書きしている
/* M */
.has-sm-l-font-size {font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1rem);}
/* L */
.has-sm-l-font-size {font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);}
/* XL */
.has-sm-xl-font-size {font-size: clamp(1.1rem, 1rem + 0.5vw, 1.33rem);}
/* 2XL */
.has-sm-2-xl-font-size {font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);}
/* 3XL */
.has-sm-3-xl-font-size {font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);}
/* 4XL */
.has-sm-4-xl-font-size {font-size: clamp(1.8rem, 1.2rem + 2vw, 2.66rem);}
/* 5XL */
.has-sm-5-xl-font-size {font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem);}
/* 6XL */
.has-sm-6-xl-font-size {font-size: clamp(3rem, 1rem + 7vw, 8rem);}
その他ユーティリティ
レスポンシブ
「横並び」ブロックで並べた要素を、横→縦に
@media screen and (max-width: 1400px) {.xcs-fd-row-1400 {flex-direction: column !important;}}
@media screen and (max-width: 1280px) {.xcs-fd-row-1280 {flex-direction: column !important;}}
@media screen and (max-width: 1024px) {.xcs-fd-row-1024 {flex-direction: column !important;}}
@media screen and (max-width: 768px) {.xcs-fd-row-768 {flex-direction: column !important;}}
@media screen and (max-width: 600px) {.xcs-fd-row-600 {flex-direction: column !important;}}
※「横並び」のグループブロックに、このクラス名を付与する