/* 新しいロゴスタイル - 鳩アイコン用 */
.logo-image-left, .logo-image-right {
    width: 60px;  /* アイコンサイズを調整 */
    height: auto;
    vertical-align: middle;
}

.logo-image-left {
    margin-right: 15px;
}

.logo-image-right {
    margin-left: 15px;
}

/* サイトロゴ全体のスタイル */
.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

/* タイトル文字の枠線付きスタイル */
.site-logo h1 {
    color: #333333; /* ダークグレーの文字色 */
    font-size: 2.5rem;
    font-weight: 400;
    text-shadow: 
        /* 白い枠線（外側） */
        -3px -3px 0 #ffffff,
        -3px -2px 0 #ffffff,
        -3px -1px 0 #ffffff,
        -3px 0px 0 #ffffff,
        -3px 1px 0 #ffffff,
        -3px 2px 0 #ffffff,
        -3px 3px 0 #ffffff,
        -2px -3px 0 #ffffff,
        -2px -2px 0 #ffffff,
        -2px -1px 0 #ffffff,
        -2px 0px 0 #ffffff,
        -2px 1px 0 #ffffff,
        -2px 2px 0 #ffffff,
        -2px 3px 0 #ffffff,
        -1px -3px 0 #ffffff,
        -1px -2px 0 #ffffff,
        -1px -1px 0 #ffffff,
        -1px 0px 0 #ffffff,
        -1px 1px 0 #ffffff,
        -1px 2px 0 #ffffff,
        -1px 3px 0 #ffffff,
        0px -3px 0 #ffffff,
        0px -2px 0 #ffffff,
        0px -1px 0 #ffffff,
        0px 1px 0 #ffffff,
        0px 2px 0 #ffffff,
        0px 3px 0 #ffffff,
        1px -3px 0 #ffffff,
        1px -2px 0 #ffffff,
        1px -1px 0 #ffffff,
        1px 0px 0 #ffffff,
        1px 1px 0 #ffffff,
        1px 2px 0 #ffffff,
        1px 3px 0 #ffffff,
        2px -3px 0 #ffffff,
        2px -2px 0 #ffffff,
        2px -1px 0 #ffffff,
        2px 0px 0 #ffffff,
        2px 1px 0 #ffffff,
        2px 2px 0 #ffffff,
        2px 3px 0 #ffffff,
        3px -3px 0 #ffffff,
        3px -2px 0 #ffffff,
        3px -1px 0 #ffffff,
        3px 0px 0 #ffffff,
        3px 1px 0 #ffffff,
        3px 2px 0 #ffffff,
        3px 3px 0 #ffffff,
        /* 影（右下） */
        4px 4px 6px rgba(0, 0, 0, 0.3);
    margin: 0;
    /* アニメーション対応のためのtransition */
    transition: all 0.3s ease;
}

/* ホバー時の効果 */
.site-logo h1:hover {
    transform: scale(1.02);
    text-shadow: 
        /* 白い枠線（外側） */
        -3px -3px 0 #ffffff,
        -3px -2px 0 #ffffff,
        -3px -1px 0 #ffffff,
        -3px 0px 0 #ffffff,
        -3px 1px 0 #ffffff,
        -3px 2px 0 #ffffff,
        -3px 3px 0 #ffffff,
        -2px -3px 0 #ffffff,
        -2px -2px 0 #ffffff,
        -2px -1px 0 #ffffff,
        -2px 0px 0 #ffffff,
        -2px 1px 0 #ffffff,
        -2px 2px 0 #ffffff,
        -2px 3px 0 #ffffff,
        -1px -3px 0 #ffffff,
        -1px -2px 0 #ffffff,
        -1px -1px 0 #ffffff,
        -1px 0px 0 #ffffff,
        -1px 1px 0 #ffffff,
        -1px 2px 0 #ffffff,
        -1px 3px 0 #ffffff,
        0px -3px 0 #ffffff,
        0px -2px 0 #ffffff,
        0px -1px 0 #ffffff,
        0px 1px 0 #ffffff,
        0px 2px 0 #ffffff,
        0px 3px 0 #ffffff,
        1px -3px 0 #ffffff,
        1px -2px 0 #ffffff,
        1px -1px 0 #ffffff,
        1px 0px 0 #ffffff,
        1px 1px 0 #ffffff,
        1px 2px 0 #ffffff,
        1px 3px 0 #ffffff,
        2px -3px 0 #ffffff,
        2px -2px 0 #ffffff,
        2px -1px 0 #ffffff,
        2px 0px 0 #ffffff,
        2px 1px 0 #ffffff,
        2px 2px 0 #ffffff,
        2px 3px 0 #ffffff,
        3px -3px 0 #ffffff,
        3px -2px 0 #ffffff,
        3px -1px 0 #ffffff,
        3px 0px 0 #ffffff,
        3px 1px 0 #ffffff,
        3px 2px 0 #ffffff,
        3px 3px 0 #ffffff,
        /* 強めの影 */
        5px 5px 10px rgba(0, 0, 0, 0.4);
}

/* スマホ表示時の調整 */
@media screen and (max-width: 768px) {
    .logo-image-left, .logo-image-right {
        width: 40px;  /* スマホではさらに小さく */
    }
    
    .site-logo h1 {
        font-size: 1.8rem; /* スマホでも少し大きめに */
        /* スマホ用の枠線を細く */
        text-shadow: 
            /* 白い枠線（外側） */
            -2px -2px 0 #ffffff,
            -2px -1px 0 #ffffff,
            -2px 0px 0 #ffffff,
            -2px 1px 0 #ffffff,
            -2px 2px 0 #ffffff,
            -1px -2px 0 #ffffff,
            -1px -1px 0 #ffffff,
            -1px 0px 0 #ffffff,
            -1px 1px 0 #ffffff,
            -1px 2px 0 #ffffff,
            0px -2px 0 #ffffff,
            0px -1px 0 #ffffff,
            0px 1px 0 #ffffff,
            0px 2px 0 #ffffff,
            1px -2px 0 #ffffff,
            1px -1px 0 #ffffff,
            1px 0px 0 #ffffff,
            1px 1px 0 #ffffff,
            1px 2px 0 #ffffff,
            2px -2px 0 #ffffff,
            2px -1px 0 #ffffff,
            2px 0px 0 #ffffff,
            2px 1px 0 #ffffff,
            2px 2px 0 #ffffff,
            /* 影 */
            3px 3px 5px rgba(0, 0, 0, 0.3);
    }
}