/* assets/css/custom.css */

/* 1. フォントの読み込み (カスタムCSSの最上部に配置) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 

/* 2. フォントの強制適用 */
/* Anankeはシンプルなため、bodyへの適用だけでほぼ全体に効きます */
body {
    font-family: "Noto Sans JP", sans-serif !important; 
}

/* 3. 色の強制適用 (yukkotoy.com の温かい雰囲気に) */
/* リンクやボタンをオレンジ系に設定 */
:root {
    --primary: #FF8C00; /* 例: 濃いオレンジ */
    /* Anankeのデフォルトのリンク色を上書き */
    --link-color: var(--primary); 
    --link-hover-color: darkorange;
}
a {
    color: var(--primary);
}


/* 4. ヘッダーの固定とナビゲーションバーの再現 */
/* Anankeのヘッダー要素 (.site-header) をターゲットにします */
.site-header {
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex; /* タイトルとメニューを横並びにする */
    justify-content: space-between; /* 両端寄せ */
    align-items: center;
    padding: 15px 30px; 
    background-color: white; /* 背景色を白に */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を付けて浮き上がらせる */
}

/* 5. 本文がヘッダーの下に隠れないように、マージンを設定 */
/* サイトのメインコンテンツ部分をヘッダーの高さ分下にずらします */
.site-main {
    margin-top: 70px !important; /* ヘッダーの高さより少し多めに設定 */
}