TRISITE

basic.css

p > .left	文中の要素を左寄せし、要素の右と下にvar(--padding)を空けます。
p > .right	文中の要素を右寄せし、要素の左と下にvar(--padding)を空けます。
:is(ul, ol).no-style	list-style: none;と同じ。
.aspect-4-3	aspect-ratio: 4 / 3;と同じ。
.aspect-1-1	aspect-ratio: 1 / 1;と同じ。
.aspect-16-9	aspect-ratio: 16 / 9;と同じ。
.width-limiter	要素のmax-widthをvar(--width-limit)にして、左右にvar(--padding)を空けます。要素は左右中央に配置されます。
.text-left	text-align: left;と同じ。
.text-center	text-align: center;と同じ。
.text-right	text-align: right;と同じ。
.text-justify	text-align: justify;と同じ。（初期値）
.w10p ～ .w100p（10刻み）	width: ？%;と同じ。
.w10 ～ .w200（10刻み）、 .w250、.w300	width: ？px;と同じ。
.pc	画面幅920.1px以上で表示。
.tb	画面幅520.1px ～ 920pxで表示。
.sp	画面幅520px以下で表示。

button.css

.button	要素をボタンの形状にします。
.button.slide	hoverによって背景色がスライドしながら変わるボタンになります。
.button.button-disagree	背景がar(--color-disagree-bg)色のボタンになります。
.button.button-cancel	背景がar(--color-cancel-bg)色のボタンになります。

form.css

classはありません。

grid.css

Gridは、コンテナクエリを使用してレスポンシブします。.gridを適用した要素の親要素に.containerを適用することで、コンテナクエリを使用できます。

.grid	子要素をグリッドアイテムにします。
.grid.grid-column-2 ～ .grid.grid-column-5	グリッドアイテムを最大いくつ並べるかを指定できます。
.grid-top	グリッドコンテナに指定すると、align-items: start;と同じ。 グリッドアイテムに指定すると、align-self: start;と同じ。
.grid-middle	グリッドコンテナに指定すると、align-items: center;と同じ。 グリッドアイテムに指定すると、align-self: center;と同じ。
.grid-bottom	グリッドコンテナに指定すると、align-items: end;と同じ。 グリッドアイテムに指定すると、align-self: end;と同じ。

.flex	子要素をフレックスアイテムにします。
.flex.flex-left	justify-content: flex-start;と同じ。
.flex.flex-center	justify-content: center;と同じ。
.flex.flex-right	justify-content: flex-end;と同じ。
.flex-top	フレックスコンテナに指定すると、align-items: flex-start;と同じ。 フレックスアイテムに指定すると、align-self: start;と同じ。
.flex-middle	フレックスコンテナに指定すると、align-items: center;と同じ。 フレックスアイテムに指定すると、align-self: center;と同じ。
.flex-bottom	フレックスコンテナに指定すると、align-items: flex-end;と同じ。 フレックスアイテムに指定すると、align-self: end;と同じ。
.flex.flex-nowrap	flex-wrap: nowrap;と同じ。
.g1 ～ .g5	flex: 1; ～ flex: 5;と同じ。
.order1 ～ .order5	order: 1; ～ order: 5;と同じ。
.half-gap	gapがvar(--gap)の半分になります。
.no-gap	gapが0になります。
.container	container-type: inline-size;と同じ。（子要素をコンテナクエリに対応させます。）
.left	float: left;と同じ。
.right	float: right;と同じ。
.clear	clear: both;と同じ。
.clear-tb	グリッドコンテナ、フレックスコンテナに使用すると、画面幅920px以下でアイテムを縦並びにします。
.clear-sp	グリッドコンテナ、フレックスコンテナに使用すると、画面幅520px以下でアイテムを縦並びにします。
.tb-order1 ～ .tb-order5	画面幅920px以下でorder: 1; ～ order: 5;と同じ。
.sp-order1 ～ .sp-order5	画面幅520px以下でorder: 1; ～ order: 5;と同じ。

nav.css

.main-menu.slide-left	.main-menuが左から出入りします。
.main-menu.slide-right	.main-menuが右から出入りします。

paging.css

.paging	要素をページネーションにします。

table.css

table.free	セル幅が自動のテーブルになります。
table.block	画面幅520px以下でテーブル内容が縦並びになります。