/*
 * デザイントークン。ju-chool.com(コーポレートサイト)の実際に使われている値を採用。
 * 値を変えるだけでサイト全体のトーンを調整できるよう、色・余白・フォント・角丸を変数化する。
 */
:root {
	/* Colors */
	/* 元の#00a0e9は白背景との contrast比 2.9:1でWCAG AA(4.5:1)未達だったため、
	   同系色のまま4.9:1まで暗くした(テキスト/白文字ボタン背景の両方に効く)。 */
	--ck-color-primary: #0077b3;
	--ck-color-primary-dark: #005f8f;
	--ck-color-black: #000000;
	--ck-color-text: #333333;
	--ck-color-white: #ffffff;
	--ck-color-bg-soft: #f7f8f8;
	--ck-color-border-soft: #efefef;
	--ck-color-accent-red: #e50012;

	/* 4段階のテキストカラーランプ(見出し→本文→補助→無効的、の順で情報の重みを表現する) */
	--ck-text-1: #16161a;
	/* 最重要(見出し) */
	--ck-text-2: #333333;
	/* 本文 */
	--ck-text-3: #767676;
	/* 補助情報(WCAG AA最低ライン) */
	--ck-text-4: #a3a3a3;
	/* メタ情報・無効的 */

	/* コンテンツ識別用アクセント(ju-chool.com の学年帯タグ配色を流用、ブランドカードの色分けに使用) */
	--ck-color-accent-1: #4774b9;
	--ck-color-accent-2: #ec6d74;
	--ck-color-accent-3: #f8b62d;
	--ck-color-accent-4: #22ac38;

	/* Typography */
	--ck-font-body: "Noto Sans JP", "Roboto", "Hiragino Kaku Gothic ProN", sans-serif;
	--ck-font-display: "Roboto", "Noto Sans JP", sans-serif;

	/* タイプスケール(比率1.25、Major Third) — 全ページの見出し・本文はこの変数を使う */
	--ck-text-xs: 0.75rem;
	/* 12px メタ情報 */
	--ck-text-sm: 0.85rem;
	/* 13.6px 補助テキスト */
	--ck-text-base: 1rem;
	/* 16px 本文 */
	--ck-text-md: 1.125rem;
	/* 18px 小見出し */
	--ck-text-lg: 1.375rem;
	/* 22px セクション内見出し */
	--ck-text-xl: 1.75rem;
	/* 28px セクション見出し */
	--ck-text-2xl: 2.25rem;
	/* 36px ページ/ヒーロー見出し */
	--ck-text-3xl: 2.75rem;
	/* 44px 大見出し */

	/* Spacing rhythm (PC / SP) */
	--ck-section-padding: 90px;
	--ck-section-padding-sp: 40px;
	--ck-container-padding: 40px;
	--ck-container-padding-sp: 20px;
	--ck-container-max-width: 1600px;

	/* Shape */
	--ck-radius-card: 10px;
	--ck-radius-pill: 50vh;
	--ck-shadow-card: 3px 3px 6px rgba(0, 0, 0, 0.2);

	/* Breakpoints (参照用、メディアクエリ自体には変数を使えないためコメントとして明記)
	   --ck-bp-mobile: 470px;
	   --ck-bp-tablet: 740px;
	*/
}

/* 親テーマ(welcart_basic)は「two-column」ページで#content(750px)+#secondary(210px)の
   サイドバー付きレイアウトを前提に#mainがそれらの幅に合わせて縮む(≒1000px)。
   新デザインの単一カラムページ(商品詳細・カテゴリー一覧等、get_sidebar()を呼ばない)
   ではサイドバー予約分の意味がなく、コンテナ幅(--ck-container-max-width)が
   正しく反映されないため、#mainを明示的にフル幅へ戻す。 */
#main.wrapper {
	width: 100%;
	max-width: none;
	float: none;
}

/* 見出しの基本ルール: 大見出しほど字間を締める(サイズだけに頼らない階層表現) */
.ck-header,
.ck-footer,
.ck-content-top,
.ck-listing,
.ck-item,
.ck-home {
	--ck-heading-tracking: -0.01em;
}

/* フォーカス表示(キーボード操作時のみ、マウス操作では出さない) */
.ck-header a:focus-visible,
.ck-footer a:focus-visible,
.ck-content-top a:focus-visible,
.ck-listing a:focus-visible,
.ck-item a:focus-visible,
.ck-home a:focus-visible,
.ck-btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--ck-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 新デザインコンポーネント共通のリンクリセット(親テーマ側のグローバルリンク装飾を打ち消す) */
.ck-header a,
.ck-footer a,
.ck-content-top a,
.ck-listing a,
.ck-item a {
	text-decoration: none;
	color: inherit;
}

.ck-item__description a,
.ck-item__custom-fields a {
	text-decoration: underline;
	color: var(--ck-color-primary);
}