/* myblog/templates/navbar.html */


/* ナビゲーションバー全体のスタイル */
.navbar-dark.black {
    background-color: #6c6c6c; /* 深いブラック */
}
/* サイト名のフォントの変更 */
.navbar-site-name {
    color: white !important;;
    display: block;
    font-size: 1.75rem;
    text-align: left; /* 文字を左詰め */
    margin-left: 0; /* 左の余白をなくす */
    padding-left: 0.5rem; /* 左側に適度な余白を設定（調整可能） */
}
/* ナビゲーションリンクのスタイル（外枠を白いボックス風に） */
.nav-link {
    font-size: 1rem;
    padding: 8px 12px;
    color: #333; /* 標準文字色を黒系 */
    background-color: #6c6c6c; /* 深いブラック */
    border: 2px solid rgb(255, 255, 255); /* 白枠をつける */
    border-radius: 8px; /* 角を丸く */
    transition: all 0.3s ease-in-out;
    margin-left: 5px; /* 左側の余白 */
    margin-right: 5px; /* 右側の余白 */
}
.nav-link:hover {
    color: #00aaff; /* リンクホバー時にアクセントカラー */
    background-color: #a8a8a8; /* 背景カラーにアクセントカラー */
}
/* ドロップダウンメニューのスタイル */
.dropdown-menu {
    background-color: #d8c9c9;
    border-radius: 5px;
}
.dropdown-item:hover {
    background-color: #b2a7f2;
    color: #fff;
}
/* メニュー項目の間隔を調整 */
.navbar-nav .nav-item + .nav-item {
    margin-left: 3px;
}
/* ロゴに影を付ける */
.navbar-brand img {
    width: 50px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
/* 検索フォームの改良 */
form.d-flex {
    max-width: 300px;
    margin-left: auto;
}
form.d-flex input[type="search"] {
    border-radius: 20px;
    padding-left: 15px;
    transition: border-color 0.3s ease;
}
form.d-flex input[type="search"]:focus {
    border-color: #00aaff; /* フォーカス時のボーダー色 */
}
form.d-flex .btn {
    border-radius: 20px;
    background-color: #00aaff;
    color: #fff;
    transition: background-color 0.3s ease;
}
form.d-flex .btn:hover {
    background-color: #007bff; /* ホバー時のカラー変更 */
}

/* ==========================
   レスポンシブ調整
========================== */
/* タブレット・PC 画面 */
/* @media (min-width: 768px) {
} */

/* スマホ画面 */
@media (max-width: 768px) {
    .navbar-site-name {
        color: white !important;;
        display: block;
        font-size: 1.25rem;
        text-align: left; /* 文字を左詰め */
        margin-left: 0; /* 左の余白をなくす */
        padding-left: 0.5rem; /* 左側に適度な余白を設定（調整可能） */
    }
    .navbar-nav {
        text-align: center;
        width: 100%;
    }
    .dropdown-menu {
        text-align: center;
    }
    .navbar-nav .nav-item {
        padding: 8px 0;
    }
    .form-inline {
        width: 100%;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }
    .navbar-toggler {
        border-color: #671cae;
    }
    .navbar-toggler-icon {
        background-color: #4d63f8;
    }

    /* myblog/template/navarrays-right.html */
    /* デザイン向上のため、スマホ画面では「カテゴリ一覧」以外のメニューは表示しない */
    #social-links, #weather-forecast {
        display: none;
    }
}