/* ============================================================ base.css — リセットと、文字・リンクの基本 ============================================================ */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* フッターの Back to Top（#top）用（2026-08-16） */ /* 2026-08-18に scrollbar-gutter: stable を追加したが、Safari だと スクロールバーが実際には不要なページでも、確保した余白に薄い インジケーターが表示されてしまう問題が発覚し、2026-08-19に撤回。 元々の目的（exhibitions の列数計算がスクロールバーの有無に つられてずれる不具合）は exhibitions.js 側で直接対処している （layoutGrid 内、計測時だけ grid の高さを一時的に0にする方式）。 その後、右上にグレーの丸（スクロールバー本体）が見えるとの指摘が 続いたため、scrollbar-gutter の話ではなく実際のスクロールバー表示 そのものだったと判明。一度は見た目を完全に消したが、位置の目安や ドラッグ操作ができなくなるのは不便では、との相談を受け、消すのでは なく「サイトの罫線色に合わせた細いバー」に変更した（2026-08-19）。 さらに、ページによってスクロールバーの有無が変わるとメニューなど の横幅がその分だけ動いてしまう（指摘を受けて対応。2026-08-19）。 auto（必要なときだけ出す）ではなく scroll（常に出す）にして、 スクロールバー分の余白を常に一定にする。scrollbar-gutter: stable と違い、これは実際にバーを描画させる指定なので、Safari の インジケーター問題は起きない。 */ overflow-y: scroll; /* 2026-09-08：ここに scrollbar-width / scrollbar-color（標準プロパティ）を 書いてはいけない。CSS仕様上、この2つが初期値以外だとブラウザは下の ::-webkit-scrollbar 系の指定をすべて無視する決まりになっており、Safari は OS標準の「角丸のつまみ」を描いてしまう。これがナビ右端に丸いカプセルが 浮いて見えていた正体だった（Chromeは同じ標準プロパティでも細い直線状に 描くため表面化していなかった）。この2つを外すと Safari も Chrome と同じ WebKit方式（下の border-radius: 0 の四角いバー）に戻る。 Firefox はこの標準プロパティでしかスタイルできないので、下の @supports で Firefox だけに限定して指定する。 */ } /* 注意：以下のスクロールバー指定は base.njk の にも同じ内容を直接 書いてある（2026-09-08）。WebKitはスクロール領域を作る瞬間に種類を決めて しまうため、この外部CSSの到着が間に合わないページでは効かないことがある。 変更するときは base.njk 側も必ず一緒に直すこと。 */ html::-webkit-scrollbar { width: 6px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; } html::-webkit-scrollbar-thumb:hover { background: var(--mute); } /* Firefox 専用。::-webkit-scrollbar を持たない＝WebKit/Blink系ではない、 という条件で切り分ける。WebKit/Blink（Chrome・Safari）でこの指定が効くと、 上の ::-webkit-scrollbar 系が丸ごと無視されてしまうため、必ずこの @supports の中だけに書くこと（2026-09-08）。 */ @supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) { html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; /* つまみの色 背景色 */ } } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-body); /* スクロールバー（つまみの track）とコンテンツの境目に、サイト全体と 同じ1pxの罫線を引く。スマホなど、スクロールバー自体が描画されない 環境でも、常にこの罫線だけは出るようにする（指摘を受けて追加。 2026-08-19）。 */ border-right: 1px solid var(--line); } /* 本文は header / main / footer の縦積み。main が余りを埋める */ main { flex: 1; display: flex; flex-direction: column; min-height: 0; } img { display: block; width: 100%; height: auto; } p { margin: 0 0 12px; } p:last-child { margin-bottom: 0; } /* --- リンク：下線、ホバーで白地に反転 --------------------- */ /* 下線は文字と同じ濃さだと本文の中で強すぎるので 50% に落とす。文字自体は 100% のまま（2026-09-08）。1行目は color-mix 非対応ブラウザ向けの フォールバックで、--ink を直接薄めた値。 */ a { color: inherit; text-decoration: underline; text-decoration-color: rgba(240, 238, 232, 0.5); text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 2px; } a:hover, a:focus-visible { background: var(--ink); color: var(--bg); text-decoration: none; } /* --- 表示用：作品名・展示名。細字のサンセリフ ------------- */ .disp { font-family: var(--font-display); font-weight: 300; line-height: var(--leading-disp); } .t-md { font-size: var(--size-md); } .t-sm { font-size: 16px; line-height: 1.4; } /* --- ラベル：10px・大文字・字間広め ----------------------- */ .lbl { font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mute); } /* 欧文の解説など、補助的に落とす文字 */ .sub { color: var(--mute); } /* 読み上げ専用（画面には出さない） */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }