/* ==========================================================================
base.css — ベースタイポグラフィ・要素デフォルト
----------------------------------------------------------------------------
reset.css の後に読み込み、トークンを使って初期見た目を整える。
この層では「セレクタ = 要素名のみ」を使い、クラス指定はしない。
========================================================================== */
/* --------------------------------------------------------------------------
Webフォント読み込みは各 HTML の で 指定する想定。
例(コメント・実装は HTML 側で行う):
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
HTML / Body
-------------------------------------------------------------------------- */
html {
font-size: 16px; /* rem の起点 */
color-scheme: light;
}
body {
font-family: var(--font-sans-jp);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
letter-spacing: var(--ls-wide);
color: var(--color-text);
background-color: var(--color-bg);
/* 日本語の禁則・自動カーニング */
font-feature-settings: 'palt';
word-break: auto-phrase;
overflow-wrap: anywhere;
line-break: strict;
}
/* --------------------------------------------------------------------------
Headings
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif-jp);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-base);
color: var(--color-text);
text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }
/* --------------------------------------------------------------------------
Text elements
-------------------------------------------------------------------------- */
p {
text-wrap: pretty;
}
p + p {
margin-block-start: 1em;
}
small {
font-size: var(--fs-sm);
color: var(--color-text-sub);
}
strong, b {
font-weight: var(--fw-semibold);
color: var(--color-text);
}
em, i {
font-style: italic;
}
/* --------------------------------------------------------------------------
Links
-------------------------------------------------------------------------- */
a {
color: var(--color-link);
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--duration-base) var(--ease-base),
text-decoration-color var(--duration-base) var(--ease-base);
}
a:hover,
a:focus-visible {
color: var(--color-link-hover);
text-decoration-color: currentColor;
}
/* --------------------------------------------------------------------------
Lists(クラス未指定の素のリスト用)
-------------------------------------------------------------------------- */
ul, ol {
padding-inline-start: 1.5em;
}
li + li {
margin-block-start: 0.4em;
}
/* --------------------------------------------------------------------------
Code / pre
-------------------------------------------------------------------------- */
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em;
}
/* --------------------------------------------------------------------------
Quote
-------------------------------------------------------------------------- */
blockquote {
padding-inline-start: var(--sp-4);
border-inline-start: 3px solid var(--color-primary-soft);
color: var(--color-text-sub);
font-style: italic;
}
/* --------------------------------------------------------------------------
Forms — 最小限のベース(詳細は 3-2-8 で components.css に)
-------------------------------------------------------------------------- */
input, textarea, select {
background-color: var(--color-bg-alt);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
color: var(--color-text);
transition: border-color var(--duration-base) var(--ease-base),
box-shadow var(--duration-base) var(--ease-base);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(122, 154, 151, 0.2);
}
::placeholder {
color: var(--color-text-mute);
opacity: 1;
}
/* --------------------------------------------------------------------------
Selection / Focus
-------------------------------------------------------------------------- */
::selection {
background-color: var(--color-primary-soft);
color: var(--color-text);
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
Image / Figure
-------------------------------------------------------------------------- */
figure {
margin: 0;
}
figcaption {
font-size: var(--fs-sm);
color: var(--color-text-sub);
margin-block-start: var(--sp-2);
}
/* --------------------------------------------------------------------------
Address / time
-------------------------------------------------------------------------- */
address {
font-style: normal;
}
/* --------------------------------------------------------------------------
Horizontal rule
-------------------------------------------------------------------------- */
hr {
background-color: var(--color-line);
margin-block: var(--sp-8);
}