/* ヒーローセクションのスタイル */
        .hero-section {
            position: relative; /* ★重要：子要素のabsolute配置の基準となります */
            width: 100%;
            height: auto; /* 背景画像がコンテンツを押し広げる */
            overflow: hidden; /* 子要素がはみ出さないように */
            background-color: #f0f0f0; /* 背景画像の読み込み前や読み込み失敗時の代替色 */
            /* もし background-img が float: right でなく、
               hero-section の背景として機能させたいなら、ここで background-image を設定 */
        }

        .hero-section .background-img {
            filter: brightness(55%);
            float: right; /* 元のfloat指定を維持。位置調整はこれに合わせて考慮 */
            max-width: 100%;
            height: auto;
            /* 必要であれば z-index を調整して overlay-img の下に配置 */
        }

        .hero-section .overlay-img {
            /* overlay-img の配置は background-img の float: right に依存するので複雑になりがち。
               もし position: absolute で重ねるなら、
               position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
               などを設定し、background-img も同様に absolute で重ねる構成を検討。 */
            position: absolute; /* 親要素 .hero-section を基準に */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 中央寄せ */
            z-index: 5; /* background-img より手前に表示 */
            max-width: 80%; /* オーバーレイ画像のサイズ調整 */
            height: auto;
        }

        /* ニュースティッカーのスタイル */
        .news-ticker {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            padding: 5px 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-family: sans-serif;
            color: #333;

            position: absolute; /* 親要素 .hero-section を基準に位置指定 */
            bottom: 50px;      /* ヒーローセクションの底から100px上に移動（調整可能） */
            left: 30%;          /* ヒーローセクションの左右中央に寄せる準備 */
            transform: translateX(-50%); /* 自身の幅の半分だけ左にずらして完全に中央寄せ */
            width: 600px;       /* ニュースティッカーの固定幅（調整可能） */
            z-index: 1000;      /* 他のコンテンツより手前に表示 */
        }

        .news-ticker::before {
            content: '❯';
            color: crimson;
            font-size: 1.2em;
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle;
        }
        .ticker-content {
            flex-grow: 1;
            margin-right: 15px;
            white-space: nowrap;
            overflow: hidden;
        }
        .ticker-content a {
            display: inline-block;
            text-decoration: none;
            color: inherit;
        }
        .ticker-controls {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        .control-button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1em;
            margin-left: 8px;
            padding: 0 4px;
            color: #555;
            transition: color 0.2s ease;
        }
        .control-button:hover {
            color: #000;
        }
        .control-button svg {
            width: 1.2em;
            height: 1.2em;
            vertical-align: middle;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.5s ease;
        }
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }

        /* ニュースティッカーのスタイル (デスクトップ表示用) */
.news-ticker {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 5px 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
    color: #333;

    position: absolute; /* 親要素 .hero-section を基準に位置指定 */
    bottom: 50px;       /* ヒーローセクションの底から50px上に移動（調整可能） */
    left: 30%;          /* デスクトップ表示時の左寄せ設定 */
    transform: translateX(-50%); /* デスクトップ表示時の中央寄せのための調整 */
    width: 600px;       /* ニュースティッカーの固定幅（調整可能） */
    z-index: 1000;      /* 他のコンテンツより手前に表示 */
}

/* その他のnews-ticker関連のスタイルは変更なし */
.news-ticker::before {
    content: '❯';
    color: crimson;
    font-size: 1.2em;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
.ticker-content {
    flex-grow: 1;
    margin-right: 15px;
    white-space: nowrap;
    overflow: hidden;
}
.ticker-content a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
.ticker-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.control-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin-left: 8px;
    padding: 0 4px;
    color: #555;
    transition: color 0.2s ease;
}
.control-button:hover {
    color: #000;
}
.control-button svg {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}


/* ★変更点：メディアクエリのブレークポイントを1000pxに設定★ */
@media screen and (max-width: 1000px) {
    .news-ticker {
        /* 画面幅が1000px以下になったら、幅を少し小さくし、中央に寄せる */
        width: 80%; /* 例: 画面幅の80%に設定 */
        max-width: 500px; /* 必要に応じて最大幅を設定 */
        left: 50%; /* 水平中央に配置 */
        transform: translateX(-50%); /* 自身の幅の半分だけ左にずらして完全に中央寄せ */
        bottom: 40px; /* 下からの位置も少し調整 */
        padding: 5px 10px;
    }

    /* 768px以下のスマートフォン向けに、さらに調整が必要な場合は
       別途メディアクエリを追加することもできます。
       例: @media screen and (max-width: 768px) { ... }
    */

    /* 必要に応じて、文字サイズやパディングも調整 */
    .news-ticker::before {
        font-size: 1.1em;
        margin-right: 8px;
    }

    .ticker-content {
        font-size: 0.95em;
    }

    .control-button {
        font-size: 0.95em;
    }
}

/* スマートフォン表示 (例: 768px以下) でさらに調整が必要な場合 */
/* ★ここから修正するメディアクエリのブロック★ */
/* ★ここから修正するメディアクエリのブロック★ */
@media screen and (max-width: 768px) {
    .news-ticker {
        width: 90%; 
        max-width: 320px; 
        left: 50%; 
        transform: translateX(-50%); 
        
        /* スマートフォンでの下からの位置をさらに下に調整 */
        bottom: 3px; /* これまでの20pxから10pxに変更。さらに下げる場合はこの値を小さくしてください */
        
        padding: 5px 10px; 
    }

    .news-ticker::before {
        font-size: 0.9em; 
        margin-right: 5px;
    }

    .ticker-content {
        font-size: 0.8em; 
    }

    .control-button {
        font-size: 0.8em; 
    }
}
/* ★メディアクエリのブロックここまで★ */