@charset "UTF-8";

/* =========================================================
 * SOY-KUFU 採用サイト デザイントークン
 * prefix: --sk-
 *
 * トーン: クールカジュアル & ナチュラル
 * 美容学生に「おしゃれ」「ちゃんとしている」と感じさせる配色
 * ========================================================= */

:root {

	/* --- SWELL 親テーマ上書き --- */
	/* SP の root フォント可変を 16px 固定にして、過剰な可変文字サイズを防ぐ */
	--swl-fz--root: 16px;

	/* --- カラー（クライアント指定トンマナ: 白ベース + ペールブルー） --- */
	--sk-bg:            #FFFFFF;   /* ベース背景 純白 */
	--sk-bg-sub:        #EAF3F8;   /* セクション切替用 ペールブルー */
	--sk-bg-deep:       #1F2A33;   /* 強調セクション用 ダークネイビー */
	--sk-surface:       #FFFFFF;   /* カード等 */
	--sk-text:          #1A1A1A;   /* 本文 ほぼ黒 */
	--sk-text-mid:      #555555;   /* 補助テキスト */
	--sk-text-light:    #888888;   /* 説明・キャプション */
	--sk-text-on-dark:  rgba(255, 255, 255, 0.92);
	--sk-text-on-dark-muted: rgba(255, 255, 255, 0.72);

	/* メインブランドカラー = ミディアムブルー
	 * accent       : 数値ハイライト / リンク / 強調用
	 * accent-dark  : ホバー / より強調
	 * accent-light : アイコン色 / 細線装飾
	 * accent-pale  : 極淡背景 / 装飾リング */
	--sk-accent:        #4A8DB8;   /* メインブルー */
	--sk-accent-dark:   #3A7299;   /* ホバー・強調 */
	--sk-accent-light:  #7BA8C9;   /* アイコン・チェック・年目バッジ */
	--sk-accent-pale:   #EAF3F8;   /* セクション背景 */
	--sk-accent-soft:   #B6D4E6;   /* 細線装飾用 */
	--sk-warm:          #C99A77;   /* 暖色アクセント（補助、現状ほぼ未使用） */

	/* 差し色コーラル（STAFF由来 → 全体に少量の差し色として展開）
	 * coral      : 英字ラベル / 番号 / 装飾線アクセント
	 * coral-soft : 淡い装飾・罫線
	 * ink        : 大きめ英字見出しの濃紺 */
	--sk-accent-coral:      #E89B85;
	--sk-accent-coral-soft: #F2C9BC;
	--sk-ink:               #1A2A4A;

	--sk-line:          #06C755;   /* LINE公式カラー */
	--sk-line-dark:     #05A648;

	--sk-border:        #E8E8E8;
	--sk-border-strong: rgba(26, 26, 26, 0.18);

	/* --- タイポグラフィ --- */
	--sk-font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--sk-font-heading: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--sk-font-en:      "Cormorant Garamond", "Times New Roman", serif;

	--sk-text-hero:  clamp(1.75rem, 6.4vw, 3rem);
	--sk-text-h1:    clamp(1.5rem, 5vw, 2.25rem);
	--sk-text-h2:    clamp(1.35rem, 4.4vw, 1.875rem);
	--sk-text-h3:    1.125rem;
	--sk-text-lead:  1.0625rem;
	--sk-text-body:  1rem;
	--sk-text-small: 0.875rem;
	--sk-text-mini:  0.75rem;

	--sk-leading-tight: 1.35;
	--sk-leading-base:  1.75;
	--sk-leading-loose: 1.9;

	--sk-tracking-en: 0.14em;

	/* --- スペーシング --- */
	--sk-section-py:   clamp(4.5rem, 10vw, 7rem);
	--sk-container-px: clamp(1rem, 5vw, 2.5rem);
	--sk-grid-gap:     clamp(1rem, 3vw, 1.75rem);
	--sk-content-max:  1100px;
	--sk-content-narrow: 720px;

	/* --- シェイプ --- */
	--sk-radius-card:   14px;
	--sk-radius-image:  10px;
	--sk-radius-pill:   999px;
	--sk-radius-chip:   6px;
	--sk-slant:         -3deg;  /* 青背景セクション/STAFF 共通の斜めエッジ角度 */
	/* 画像の右傾き平行四辺形（ひし形）クリップ。STAFF カードと全画像で統一 */
	--sk-card-clip:      polygon(7% 6%, 100% 0, 93% 94%, 0 100%);
	--sk-card-clip-soft: polygon(4% 3.5%, 100% 0, 96% 96.5%, 0 100%); /* SP 用 弱め */

	/* --- シャドウ --- */
	--sk-shadow-card:  0 6px 20px rgba(43, 42, 40, 0.08);
	--sk-shadow-hover: 0 12px 28px rgba(43, 42, 40, 0.14);
	--sk-shadow-cta:   0 8px 22px rgba(6, 199, 85, 0.25);
	--sk-shadow-line:  0 -2px 16px rgba(0, 0, 0, 0.15);

	/* --- レイアウト --- */
	--sk-sticky-h:     76px;   /* スマホ下部フローティングCTA高 */

	/* --- トランジション --- */
	--sk-transition:      all 0.25s ease;
	--sk-transition-slow: all 0.4s ease;
}