.ec-eyecatchRole .ec-eyecatchRole__intro {
  color: #fff;
}

.ec-layoutRole {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	transition: transform 0.3s;
	background: #050510;
}

/*個数・カートに入れるを非表示*/
.ec-shelfGrid form,
.ec-shelfGrid .ec-productRole__btn {
    display: none;
}


/*額縁*/
.ec-shelfGrid__item-image {
    position: relative; /* 相対位置指定 */
    overflow: hidden; /* 画像の外側にはみ出した部分を隠す */
}

.ec-shelfGrid__item-image img {
    width: 100%; /* 画像の幅を100%に設定 */
    height: auto; /* 高さを自動で調整 */
    border: 10px solid #fff; /* 枠線の色と幅を指定 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 影の設定 */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.ec-shelfGrid__item-image:hover img {
    transform: scale(1.05); /* ホバー時に拡大表示 */
}

/*画像サイズ統一*/
.ec-shelfGrid__item-image img {
    width: 200px; /* 画像の幅を200pxに設定 */
    height: 200px; /* 画像の高さを200pxに設定 */
    object-fit: cover; /* 画像を中央に配置し、余白を自動で追加 */
}



/*メニューデコ*/
/* メニューの背景を透明にする */
.ec-itemNav__nav li a {
    background-color: transparent !important; /* 背景色を透明にする */
}

/* メニューの文字に明朝体を指定し、ネオンのような光彩装飾を追加する */
.ec-itemNav__nav li a {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS Mincho", serif; /* フォントを明朝体に指定 */
    color: #4287f5; /* 文字色を青に設定 */
    text-shadow: 0 0 5px #4287f5, 0 0 10px #4287f5, 0 0 20px #4287f5, 0 0 30px #4287f5, 0 0 40px #4287f5, 0 0 55px #4287f5, 0 0 75px #4287f5; /* ネオンのような光彩装飾を追加 */
}

/* 共通の親要素に対して文字色を設定 */
.ec-headerRole,
.ec-headerNav,
.ec-newsRole__newsItem,
.ec-newsRole__newsDate {
    color: #fff !important;
}





/* スマートフォン用のスタイル */
@media only screen and (max-width: 768px) {
    .ec-eyecatchRole .ec-eyecatchRole__intro {
        color: #fff;
    }

    .ec-layoutRole {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        transition: transform 0.3s;
        background: #050510;
    }

    /*個数・カートに入れるを非表示*/
    .ec-shelfGrid form,
    .ec-shelfGrid .ec-productRole__btn {
        display: none;
    }

    /*額縁*/
    .ec-shelfGrid__item-image {
        position: relative; /* 相対位置指定 */
        overflow: hidden; /* 画像の外側にはみ出した部分を隠す */
    }

    .ec-shelfGrid__item-image img {
        width: 100%; /* 画像の幅を100%に設定 */
        height: auto; /* 高さを自動で調整 */
        border: 10px solid #fff; /* 枠線の色と幅を指定 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 影の設定 */
        transition: transform 0.3s ease; /* ホバー時のアニメーション */
    }

    .ec-shelfGrid__item-image:hover img {
        transform: scale(1.05); /* ホバー時に拡大表示 */
    }

    /*画像サイズ統一*/
    .ec-shelfGrid__item-image img {
        width: 200px; /* 画像の幅を200pxに設定 */
        height: 200px; /* 画像の高さを200pxに設定 */
        object-fit: cover; /* 画像を中央に配置し、余白を自動で追加 */
    }

    /*メニューデコ*/
    /* メニューの背景を透明にする */
    .ec-itemNav__nav li a {
        background-color: transparent !important; /* 背景色を透明にする */
    }

    /* メニューの文字に明朝体を指定し、ネオンのような光彩装飾を追加する */
    .ec-itemNav__nav li a {
        font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS Mincho", serif; /* フォントを明朝体に指定 */
        color: #4287f5; /* 文字色を青に設定 */
        text-shadow: 0 0 5px #4287f5, 0 0 10px #4287f5, 0 0 20px #4287f5, 0 0 30px #4287f5, 0 0 40px #4287f5, 0 0 55px #4287f5, 0 0 75px #4287f5; /* ネオンのような光彩装飾を追加 */
    }

    /* 共通の親要素に対して文字色を設定 */
    .ec-headerRole,
    .ec-headerNav,
    .ec-newsRole__newsItem,
    .ec-newsRole__newsDate {
        color: #fff !important;
    }
}


/* メタル調の研ぎ澄まされたデザイン */
.ec-blockBtn--top {
    display: inline-block;
    padding: 0 10px 0 10px ;
    border: 2px solid #bfbfbf;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.ec-blockBtn--top:hover {
    background-color: #555;
    border-color: #999;
    color: #fff;
}

.ec-blockBtn--top:active {
    background-color: #777;
    border-color: #ccc;
}