@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
*/

.custom-image-wrapper {
    position: relative;
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 高さを自動に設定 */
    overflow: hidden;
    margin-bottom: 20px; /* 複数の画像を配置するためのマージン */
    display: flex; /* 子要素を水平方向に配置 */
    justify-content: center; /* 子要素を中央に配置 */
}

.custom-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景画像を設定 */
    background-image: inherit;
    background-size: cover; /* 背景画像をカバーさせる */
    background-repeat: no-repeat; /* 背景画像をリピートさせない */
    background-position: center; /* 背景画像を中央に配置 */
    filter: blur(30px); /* ブラーの強さを増加 */
    opacity: 0.7; /* 背景画像の透明度 */
    z-index: 0;
}

.custom-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 半透明の黒いオーバーレイ */
    z-index: 1;
}

.custom-image img {
    position: relative;
    z-index: 2;
    /* width: 100%; これは削除しても良いです */
    height: auto; /* 高さを自動調整 */
    display: block; /* 画像の隙間をなくすために追加 */
}