@charset "UTF-8";
/*
 * グローバル基盤 — フォント・色・コンテナ・ユーティリティ
 *
 * ここには「サイト全体に効く土台」だけを書く。見出し・ボタン・カードなどの部品は common.css。
 *
 * JIN:R 側の前提（jinr/style.css）:
 *   html { font-size: 62.5% }            → 1rem = 10px。JIN:R の寸法は rem 指定が多い
 *   .d--font-pc-m-size { 1.6rem / 1.95 } → カスタマイザー「文字サイズ M」で 16px。デザイン（16px/1.9）とほぼ一致
 *   #wrapper.d--zenkakugothic { font-family: 'Zen Kaku Gothic New' }
 *   a { color: inherit }                 → リンク色はカスタマイザー「リンクの色」で決まる
 *   img { display: block; transition: all .4s }
 *
 * 方針:
 *   - フォント・色・文字サイズは「カスタマイザーの値をトークンと揃える」ことを第一にし、
 *     CSS での上書きは最小限にする（カスタマイザーの <style> は子テーマ CSS より後に出るため）。
 *   - ここで上書きするのは、カスタマイザーで設定できない・選択肢に無いものだけ。
 */

/* ------------------------------------------------------------
 * フォント
 * カスタマイザーで「ゴシック（Zen Kaku Gothic New）」を選ぶ前提だが、
 * 選択に依らず効くよう #wrapper.d--xxx（0,1,1）より強い body #wrapper（0,1,2）で指定する。
 * ---------------------------------------------------------- */
body #wrapper {
	font-family: var(--f-ja);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}

/* 英語ラベル・数字用。JIN:R の .ef（英語フォント）は「なし」に設定し、子テーマの .en を使う */
.en,
.slb-en {
	font-family: var(--f-en);
	letter-spacing: .06em;
}

/* 太字の重み。Zen Kaku Gothic New の 500 を「やや太い」として使えるようにする */
.slb-medium { font-weight: 500; }
.slb-bold   { font-weight: 700; }

/* ------------------------------------------------------------
 * コンテナ
 * フルワイドブロックの内側で本文幅（1080px）に揃えるための箱。
 * JIN:R の .t--main-width（1120px）より少し狭い。
 * ---------------------------------------------------------- */
.slb-container {
	width: 100%;
	max-width: var(--w-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}
@media (min-width: 782px) {
	.slb-container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ------------------------------------------------------------
 * フォーカス
 * キーボード操作時の輪郭をアクセント色で統一する
 * ---------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------
 * 表示切替ユーティリティ
 * JIN:R のブレークポイント（781/782）に合わせる
 * ---------------------------------------------------------- */
@media (max-width: 781px) {
	.slb-pc-only { display: none !important; }
}
@media (min-width: 782px) {
	.slb-sp-only { display: none !important; }
}

/* ------------------------------------------------------------
 * 動きの抑制
 * OS 設定で「視差効果を減らす」が有効な場合は、子テーマ側の演出をすべて止める
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.slb *,
	.slb *::before,
	.slb *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------
 * スムーススクロール（ページ内リンク用）
 * ---------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
 * noindex 期間中の目印（公開時に削除する）
 * 管理画面 → 設定 → 表示設定 で noindex にしている間、
 * 画面右下に小さく「TEST」と出して本番と取り違えないようにする。
 * ---------------------------------------------------------- */
.slb-env-badge {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 9999;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-white);
	font-family: var(--f-en);
	font-size: 11px;
	letter-spacing: .12em;
	pointer-events: none;
	opacity: .85;
}