/*
***************************************全体***************************************
***************************************全体***************************************
***************************************全体***************************************
*/
/* ***************************************TOPタイトル*************************************** */
/* TOPサブタイトル 1*/ 
.top_contents_sub_title1 {
text-align : center;
font-size : 15px;
line-height : 0.5;
color: #e9e6e6;
text-shadow: 1px 1px 5px #00000024;
}
/* TOPタイトル 1*/ 
h2.top_contents_main_title1 {
margin-block-start : 0;
margin-block-end : 0;
margin-inline-start : 0;
margin-inline-end : 0;
font-weight : 500;
text-align : center;
font-size : 19px;
line-height : 1.5;
color: #e9e6e6;
text-shadow: 1px 1px 5px #0000001a;
}
@media screen and (min-width: 500px) {
/* TOPサブタイトル 1*/ 
.top_contents_sub_title1 {
font-size : 16px;
}
/* TOPタイトル 1*/
h2.top_contents_main_title1 {
font-size : 23px;
}
}
/* ***************************************TOPタイトル*************************************** */


/* ***************************************TOPタイトル横画像設置*************************************** */
.search_p_image,
.popularity_image,
.recommended_image {
flex-basis: 38%;
}
.top_title_img{
width: 45px;
opacity: 0.8;
margin: auto 4px 0px;
filter: drop-shadow(1px 1px 2px #636363);
}
.top_long_title_imag{
width: 45px;
opacity: 0.9;
margin: auto 0 10px;
filter: drop-shadow(1px 1px 2px #636363);
}
.top_title_area1 {
text-align: center;
margin: 10px auto 6px;
/*animation : fadeIn 0.5s 0.3s both;*/
padding-top: 15px;
}
.top_title_area2 {
display: inline-block;
margin: auto -3px;
}
.long_title::before {
content: "\A" ;
white-space: pre ;
}
.top_contents_sub_title1 {
line-height: 1.5;
text-shadow: 1px 1px 4px #0808087a;
}
h2.top_contents_main_title1 {
line-height: 1;
text-shadow: 1px 1px 4px #0808087a;
}
@media screen and (min-width: 500px){
.top_title_img,
.top_long_title_imag{
width: 72px;
margin: auto 5px;
}

}
@media screen and (min-width: 550px){
.top_title_area1 {
text-align: center;
margin: 12px auto 10px;
padding-top: 18px;
}
.long_title::before {
content: "・" ;
white-space: pre ;
}
}
/* ***************************************TOPタイトル横画像設置*************************************** */


/* ***************************************TOPカテゴリー・タグエリア、おすすめ・新着エリア大枠*************************************** */
/* エリア全体*/ 
.top_area{
background-color: rgb(255 255 255 / 7%);
padding-bottom: 4px;
margin: 0;
}
@media screen and (min-width: 650px) {
.top_area{
padding-bottom: 15px;
}
}
/* ***************************************TOPカテゴリー・タグエリア、おすすめ・新着エリア大枠*************************************** */
/*
***************************************全体***************************************
***************************************全体***************************************
***************************************全体***************************************
*/



/*
***************************************TOPスクロールエリア***************************************
***************************************TOPスクロールエリア***************************************
***************************************TOPスクロールエリア***************************************
*/

/* スクロール全体*/ 
.top_main_slider_area {
margin : 0 auto;
max-width : 900px;
background-color: rgb(255 255 255 / 7%);
padding-bottom: 6px;
/*
animation : fadeIn 1s 0.3s both;*/
}
/* メイン画像スクロールエリア内アイテム*/ 
#owl-0 .top_slider_item {
margin : 0;
}
/* サブ画像スクロールエリア内アイテム*/ 
#owl-0-2 .top_slider_item {
padding : 0;
margin : 0 5% 5px;
cursor : pointer;
border-radius : 8px;
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.3);
transition : all 0.3s 0s ease;
transform : translateY(0);
}
/* サブ画像スクロール画像入れ*/ 
.image_box {
position : relative;
z-index : 1;
}
/* サブ画像スクロール内画像*/ 
.image_box .shadow img {
position : relative;
border-radius : 8px;
z-index : -1;
}

/* サブスクロール最初の要素*/ 
#owl-0-2 .first_click{
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
/* サブスクロール選択中の要素*/ 
#owl-0-2 .current .top_slider_item{
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
/* サブスクロール選択されたの要素*/ 
#owl-0-2 .top_slider_item:active{
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}

/* メインスクロールページめくりボタン*/ 
#owl-0.owl-theme .owl-next,
#owl-0.owl-theme .owl-prev {
width: 30px;
height: 40px;
margin-top: -20px;
position: absolute;
text-align: center;
top: 50%;
background: rgb(255 255 255 / 85%);
transition : all 0.3s 0s ease;
transform : translateY(0);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0.2);
}
#owl-0.owl-theme .owl-prev {
left : 0;
}
#owl-0.owl-theme .owl-next {
right : 0;
}
#owl-0.owl-theme .owl-next:active,
#owl-0.owl-theme .owl-prev:active {
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
#owl-0.owl-theme .owl-next i,
#owl-0.owl-theme .owl-prev i {
font-size : 15px;
color: rgb(129 129 129);
}

/* メインスライダー全面リンクボタン化*/ 
.top_scroll_link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:20;
}
/* 
.top_scroll_area {
position : absolute;
top : 0;
left : 0;
width : 100%;
margin : auto;
}
.scroll_logo_animation_fade:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
}*/ 
/* メインスライダー初期*/ 
.scroll_logo_animation_fade:before{
content:"";
animation: fadeOut 2s 1.5s both;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
background-color: #fffffff0;
bottom: 0;
}

/* メインスライダー上の画像（現状アイコン）*/ 
.top_slider_icon{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
filter: grayscale(100%);
transform : translateY(0);
transition: all 0.3s 0s ease;
width: 40% !important;
}
/* 選択状態のメインスライダー上の画像（現状アイコン）*/ 
.top_slider_item:active .top_slider_icon{
transform : translateY(1px);
filter: grayscale(0%);
}


@media screen and (min-width: 650px){
#owl-0-2 .first_click{
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}

.image_box .shadow {
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
border-radius : 8px;
}

#owl-0-2 .first_click .image_box .shadow {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.6) inset;
}

#owl-0-2 .current .top_slider_item .image_box .shadow {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.6) inset;
}
#owl-0-2 .top_slider_item:active .image_box .shadow {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.6) inset;
}
.image_box .shadow {
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
}
#owl-0-2 .top_slider_item:hover {
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
#owl-0-2 .top_slider_item:active {
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}

.top_slider_item:hover .top_slider_icon{
transform : translateY(1px);
filter: grayscale(0%);
}

.top_slider_item:active .top_slider_icon{
transform : translateY(2px);
filter: grayscale(0%);
}

#owl-0.owl-theme .owl-next, 
#owl-0.owl-theme .owl-prev {
width: 40px;
}
#owl-0.owl-theme .owl-prev {
left : 10px;
}
#owl-0.owl-theme .owl-next {
right : 10px;
}
#owl-0.owl-theme .owl-next i,
#owl-0.owl-theme .owl-prev i {
font-size : 25px;
}

#owl-0.owl-theme .owl-next:hover i,
#owl-0.owl-theme .owl-prev:hover i { 
color : #439da4;
}
#owl-0.owl-theme .owl-next:hover,
#owl-0.owl-theme .owl-prev:hover {
transition : all 0.3s 0s ease;
transform : translateY(1px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
#owl-0.owl-theme .owl-next:active,
#owl-0.owl-theme .owl-prev:active {
transition : all 0.3s 0s ease;
transform : translateY(2px);
box-shadow : 0 1px 4px 1px rgba(0, 0, 0, 0);
}
#owl-0.owl-theme .owl-next:before,
#owl-0.owl-theme .owl-prev:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0) inset;
transition : all 0.3s 0s ease;
border-radius: 3px;
}
#owl-0.owl-theme .owl-next:active:before,
#owl-0.owl-theme .owl-prev:active:before{
transition : all 0.3s 0s ease;
box-shadow : 0.5px 2px 6px rgba(0, 0, 0, 0.2) inset;
}

}

/*
***************************************TOPスクロールエリア***************************************
***************************************TOPスクロールエリア***************************************
***************************************TOPスクロールエリア***************************************
*/



/*
***************************************カテゴリー・タグ エリア***************************************
***************************************カテゴリー・タグ エリア***************************************
***************************************カテゴリー・タグ エリア***************************************
*/

.top_category_main {
width : 100%;
margin : 0 auto 10px;
z-index : 0;
}
.top_category_area {
box-shadow: 0 1px 4px 1px rgb(0 0 0 / 30%);
margin: 10px auto;
height: 80px;
width: 80px;
border-radius: 8px;
transition: all 0.3s 0s ease;
overflow: hidden;
}
.top_category_area:active {
box-shadow: 0 1px 4px 1px rgb(0 0 0 / 0%);
transition: all 0.3s 0s ease;
transform : translateY(1px);
}
.top_category_image {
background-size: cover;
position: relative;
width: 100%;
height: 100%;
float: left;
}
.top_category_image::before {
position : absolute;
bottom : 0;
left : 0;
right : 0;
color : #757575;
content : attr(data-title);
text-align : center;
font-size : 11.5px;
line-height : 1.85;
}
.top_category_area a{
/*animation : fadeIn 0.7s 0.7s both;*/
border-radius: 8px;
}
.icon_tag{
background-image: url("https://webbura.com/img/main/category_90_01.jpg");
}
.icon_food{
background-image: url("https://webbura.com/img/main/category_90_02.jpg");
}
.icon_drink{
background-image: url("https://webbura.com/img/main/category_90_03.jpg");
}
.icon_general_goods{
background-image: url("https://webbura.com/img/main/category_90_04.jpg");
}
.icon_fashion{
background-image: url("https://webbura.com/img/main/category_90_05.jpg");
}
.icon_appliance{
background-image: url("https://webbura.com/img/main/category_90_06.jpg");
}
.icon_others{
background-image: url("https://webbura.com/img/main/category_90_07.jpg");
}
@media screen and (min-width: 650px){
.top_category_main {
margin : 0 auto;
}
.top_category_area {
height: 90px;
width: 90px;
}
.top_category_area:hover {
box-shadow: 0 1px 4px 1px rgb(0 0 0 / 0%);
transition: all 0.3s 0s ease;
transform : translateY(1px);
}
.top_category_image {
transition: all 0.3s 0s ease;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 0%) inset;
}
.top_category_image::before {
font-size : 15px;
line-height: 1.5;
}
.top_category_image:active {
transition: all 0.3s 0s ease;
box-shadow: 0.5px 2px 6px rgb(0 0 0 / 30%) inset;
}
}

/*
***************************************カテゴリー・タグ エリア***************************************
***************************************カテゴリー・タグ エリア***************************************
***************************************カテゴリー・タグ エリア***************************************
*/