@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 画像のフィルターを解除 */
.swell-block-image img {
    filter: none; /* フィルターを無効化 */
}

/* 画像にオーバーレイテキストを追加 */
.swell-block-image .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;

    font-size: 24px;
    font-weight: bold;
}
.banner-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 25px; /* スペースを確保 */

}

.banner-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease;
    border-radius: 15px; /* 角を丸くする */

}

/* オンマウスで画像を切り替える */
.banner-container img.hover-image {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.banner-container:hover img.default-image {
    opacity: 0;
}

.banner-container:hover img.hover-image {
    opacity: 1;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 27px;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.5s ease;
}

/* オンマウスでテキストを変更 */
.overlay-text.hover-text {
    opacity: 0;
}

.banner-container:hover .overlay-text.default-text {
    opacity: 0;
}

.banner-container:hover .overlay-text.hover-text {
    opacity: 1;
}