/* ========================================
 * ヘッダー（ロゴ）
 * ======================================== */

/* ヘッダー全体 */
.head-logo { padding: 0 var(--padd-1) 0; background-color: var(--colr-1); overflow: visible; }

/* ヘッダーリンク */
.head-lnk { display: flex; justify-content: flex-end; gap: var(--padd-2); padding: var(--padd-2) 0; width: var(--widt-1); margin: var(--marg-1); }

/* ヘッダーリンクアイテム */
.head-lnk-item { color: var(--colr-2); font-weight: var(--fwgt-1); font-size: var(--font-2); }

/* ヘッダーリンクホバー */
.head-lnk-item:hover { color: var(--colr-3); }

/* ロゴラッパー */
.logo-wrap { position: relative; width: var(--widt-1); margin: var(--marg-1); height: 250px; overflow: visible; margin-bottom: 10px; margin-top: 40px; }

/* ロゴタイトル */
.logo-ttl { margin: 0; padding: 0; }

/* ロゴリンク */
.logo-lnk { display: block; }

/* ロゴ画像 */
.logo-img { width: 100%; height: auto; border-radius: var(--radi-1); }

/* キャラクター画像（表示専用） */
.chara-img { position: absolute; top: -35px; left: 350px; height: 400px; width: auto; pointer-events: none; z-index: 100; }

/* クリック領域 */
.chara-hit { position: absolute; top: 0; left: 30%; width: 40%; height: 80%; z-index: 101; }