要素のvisited状態
* 7. クラスを持つ要素の子孫の要素のhover状態
*/
.color-fg,
.color-fg a,
.color-fg a:visited,
.color-fg a:hover,
p a.color-fg,
p a.color-fg:visited,
p a.color-fg:hover {
color: hsl(from var(--fg-color) h s l / var(--fg-alpha, 100%)) !important;
}
.text-snow {
--fg-color: var(--snow);
}
.text-ink {
--fg-color: var(--ink);
}
.text-line-green {
--fg-color: var(--line-green);
}
.text-vermilion {
--fg-color: var(--vermilion);
}
.text-green {
--fg-color: var(--green);
}
.text-yellow {
--fg-color: var(--yellow);
}
.text-teal {
--fg-color: var(--teal);
}
.text-pink {
--fg-color: var(--pink);
}
.text-orange {
--fg-color: var(--orange);
}
.text-blue {
--fg-color: var(--blue);
}
.text-red {
--fg-color: var(--red);
}
.text-gray {
--fg-color: var(--gray);
}
.text-light-gray {
--fg-color: var(--light-gray);
}
.text-dark-gray {
--fg-color: var(--dark-gray);
}
.text-alpha-5 {
--fg-alpha: 5%;
}
.text-alpha-10 {
--fg-alpha: 10%;
}
.text-alpha-15 {
--fg-alpha: 15%;
}
.text-alpha-20 {
--fg-alpha: 20%;
}
.text-alpha-25 {
--fg-alpha: 25%;
}
.text-alpha-30 {
--fg-alpha: 30%;
}
.text-alpha-35 {
--fg-alpha: 35%;
}
.text-alpha-40 {
--fg-alpha: 40%;
}
.text-alpha-45 {
--fg-alpha: 45%;
}
.text-alpha-50 {
--fg-alpha: 50%;
}
.text-alpha-55 {
--fg-alpha: 55%;
}
.text-alpha-60 {
--fg-alpha: 60%;
}
.text-alpha-65 {
--fg-alpha: 65%;
}
.text-alpha-70 {
--fg-alpha: 70%;
}
.text-alpha-75 {
--fg-alpha: 75%;
}
.text-alpha-80 {
--fg-alpha: 80%;
}
.text-alpha-85 {
--fg-alpha: 85%;
}
.text-alpha-90 {
--fg-alpha: 90%;
}
.text-alpha-95 {
--fg-alpha: 95%;
}
.text-alpha-100 {
--fg-alpha: 100%;
}
/**
* Background Colors
*/
.color-bg {
background-color: hsl(from var(--bg-color) h s l / var(--bg-alpha, 100%)) !important;
}
.bg-snow {
--bg-color: var(--snow);
}
.bg-ink {
--bg-color: var(--ink);
}
.bg-line-green {
--bg-color: var(--line-green);
}
.bg-vermilion {
--bg-color: var(--vermilion);
}
.bg-green {
--bg-color: var(--green);
}
.bg-yellow {
--bg-color: var(--yellow);
}
.bg-teal {
--bg-color: var(--teal);
}
.bg-pink {
--bg-color: var(--pink);
}
.bg-orange {
--bg-color: var(--orange);
}
.bg-blue {
--bg-color: var(--blue);
}
.bg-red {
--bg-color: var(--red);
}
.bg-gray {
--bg-color: var(--gray);
}
.bg-light-gray {
--bg-color: var(--light-gray);
}
.bg-dark-gray {
--bg-color: var(--dark-gray);
}
.bg-radial-grad-pink-yellow {
background: var(--radial-grad-pink-yellow);
}
.bg-radial-grad-yellow-green {
background: var(--radial-grad-yellow-green);
}
.bg-radial-grad-pink-yellow, .bg-radial-grad-yellow-green {
overflow: hidden;
isolation: isolate;
& > canvas {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
&:has(canvas) {
background: none;
}
}
.bg-alpha-5 {
--bg-alpha: 5%;
}
.bg-alpha-10 {
--bg-alpha: 10%;
}
.bg-alpha-15 {
--bg-alpha: 15%;
}
.bg-alpha-20 {
--bg-alpha: 20%;
}
.bg-alpha-25 {
--bg-alpha: 25%;
}
.bg-alpha-30 {
--bg-alpha: 30%;
}
.bg-alpha-35 {
--bg-alpha: 35%;
}
.bg-alpha-40 {
--bg-alpha: 40%;
}
.bg-alpha-45 {
--bg-alpha: 45%;
}
.bg-alpha-50 {
--bg-alpha: 50%;
}
.bg-alpha-55 {
--bg-alpha: 55%;
}
.bg-alpha-60 {
--bg-alpha: 60%;
}
.bg-alpha-65 {
--bg-alpha: 65%;
}
.bg-alpha-70 {
--bg-alpha: 70%;
}
.bg-alpha-75 {
--bg-alpha: 75%;
}
.bg-alpha-80 {
--bg-alpha: 80%;
}
.bg-alpha-85 {
--bg-alpha: 85%;
}
.bg-alpha-90 {
--bg-alpha: 90%;
}
.bg-alpha-95 {
--bg-alpha: 95%;
}
.bg-alpha-100 {
--bg-alpha: 100%;
}
/**
* Border Colors
*/
.color-border {
--bd-color: hsl(from var(--border-color) h s l / var(--border-alpha, 100%));
}
.border-snow {
--border-color: var(--snow);
}
.border-ink {
--border-color: var(--ink);
}
.border-line-green {
--border-color: var(--line-green);
}
.border-vermilion {
--border-color: var(--vermilion);
}
.border-green {
--border-color: var(--green);
}
.border-yellow {
--border-color: var(--yellow);
}
.border-teal {
--border-color: var(--teal);
}
.border-pink {
--border-color: var(--pink);
}
.border-orange {
--border-color: var(--orange);
}
.border-blue {
--border-color: var(--blue);
}
.border-red {
--border-color: var(--red);
}
.border-gray {
--border-color: var(--gray);
}
.border-light-gray {
--border-color: var(--light-gray);
}
.border-dark-gray {
--border-color: var(--dark-gray);
}
.border-alpha-5 {
--border-alpha: 5%;
}
.border-alpha-10 {
--border-alpha: 10%;
}
.border-alpha-15 {
--border-alpha: 15%;
}
.border-alpha-20 {
--border-alpha: 20%;
}
.border-alpha-25 {
--border-alpha: 25%;
}
.border-alpha-30 {
--border-alpha: 30%;
}
.border-alpha-35 {
--border-alpha: 35%;
}
.border-alpha-40 {
--border-alpha: 40%;
}
.border-alpha-45 {
--border-alpha: 45%;
}
.border-alpha-50 {
--border-alpha: 50%;
}
.border-alpha-55 {
--border-alpha: 55%;
}
.border-alpha-60 {
--border-alpha: 60%;
}
.border-alpha-65 {
--border-alpha: 65%;
}
.border-alpha-70 {
--border-alpha: 70%;
}
.border-alpha-75 {
--border-alpha: 75%;
}
.border-alpha-80 {
--border-alpha: 80%;
}
.border-alpha-85 {
--border-alpha: 85%;
}
.border-alpha-90 {
--border-alpha: 90%;
}
.border-alpha-95 {
--border-alpha: 95%;
}
.border-alpha-100 {
--border-alpha: 100%;
}
/**
* Scrim
* ヒーロー画像の上に敷く暗幕。文字の可読性を確保するために使う。
* テキストを持つ要素そのものに付けられるため、ラッパーを増やさずに済む。
* 濃さは --scrim-alpha で調整する。
*/
.bg-scrim-b {
background-image: linear-gradient(
to top,
hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 60%)),
transparent
);
}
.bg-scrim-t {
background-image: linear-gradient(
to bottom,
hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 60%)),
transparent
);
}
.bg-scrim-full {
background-image: linear-gradient(
hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 40%)),
hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 40%))
);
}
.scrim-alpha-5 {
--scrim-alpha: 5%;
}
.scrim-alpha-10 {
--scrim-alpha: 10%;
}
.scrim-alpha-15 {
--scrim-alpha: 15%;
}
.scrim-alpha-20 {
--scrim-alpha: 20%;
}
.scrim-alpha-25 {
--scrim-alpha: 25%;
}
.scrim-alpha-30 {
--scrim-alpha: 30%;
}
.scrim-alpha-35 {
--scrim-alpha: 35%;
}
.scrim-alpha-40 {
--scrim-alpha: 40%;
}
.scrim-alpha-45 {
--scrim-alpha: 45%;
}
.scrim-alpha-50 {
--scrim-alpha: 50%;
}
.scrim-alpha-55 {
--scrim-alpha: 55%;
}
.scrim-alpha-60 {
--scrim-alpha: 60%;
}
.scrim-alpha-65 {
--scrim-alpha: 65%;
}
.scrim-alpha-70 {
--scrim-alpha: 70%;
}
.scrim-alpha-75 {
--scrim-alpha: 75%;
}
.scrim-alpha-80 {
--scrim-alpha: 80%;
}
.scrim-alpha-85 {
--scrim-alpha: 85%;
}
.scrim-alpha-90 {
--scrim-alpha: 90%;
}
.scrim-alpha-95 {
--scrim-alpha: 95%;
}
.scrim-alpha-100 {
--scrim-alpha: 100%;
}
/**
* Glassmorphism
*
* 刻みは 02_border.css の rounded-* に合わせている。低い側は差が見て分かる
* ため 2 刻み、8 以上は 4 刻み。
*/
.bg-blur-2 {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.bg-blur-4 {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.bg-blur-6 {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.bg-blur-8 {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.bg-blur-12 {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.bg-blur-16 {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.bg-blur-20 {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.bg-blur-24 {
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.bg-blur-28 {
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
}
.bg-blur-32 {
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
}
/**
* SVG の塗り
*
* svg { fill: currentColor } をベースへ入れると、色を持つ SVG（ロゴやイラスト）
* まで単色に塗り潰してしまう。アイコンとして色を継承させたい箇所にだけ当てる。
*/
.fill-current {
fill: currentColor;
}
.stroke-current {
stroke: currentColor;
}