/*-----ここから　フィルターに必要な内容-------------------------------------------------------*/
.main {
    background: url(imgs/main01.png) no-repeat center center;
    background-size: 100% auto;
}

.filter_items .item-block {
	display: none;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/*カテゴリ名をいれないといけない　*/
/*
section.category-denim .item-denim,
section.category-donegal .item-donegal,*/
section.category-all .item-all,
section.category-marble .item-marble,
section.category-marbleor .item-marbleor,
section.category-metal .item-metal,
section.category-glass .item-glass,
section.category-luster .item-luster,
section.category-cloth .item-cloth,
section.category-stone .item-stone,
section.category-proposal .item-proposal,
section.category-ex .item-ex {
	display: block;
	-webkit-animation: show .4s linear 0s forwards;
	        animation: show .4s linear 0s forwards;
	        /*transform: scale(1);*/
}

@-webkit-keyframes show {
from {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	        /*transform: scale(0.8);*/
}
to {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	       /* transform: scale(1);*/
}
}

@keyframes show {
from {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	        /*transform: scale(0.8);*/
}
to {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	        /*transform: scale(1);*/
}
}

/*-----/ここまで　フィルターに必要な内容-------------------------------------------------------*/



.filter_wrap{
width:1134px;
margin:40px auto 40px;
position:relative;
overflow:hidden;
}

@media screen and (max-width: 1024px) {
section,
.filter_wrap{
width:90%;
margin:30px auto;
}
}



.filter_items{
	margin-top:20px;
}


/*----------------------*/
/*		ソートの箱	*/
/*----------------------*/
.box {
width:24%;
height-min:171px;
margin:0 0.4% 25px;
padding:0;
text-align: center;
display:block;
overflow:hidden;
float: left ;
border:solid 1px #fff;
}

.box a {
text-align: center;
vertical-align: middle; 	
}

.box a img {
width:100%;
height: auto;
}
@media screen and (max-width: 1024px) {
.box {
width:23%;
margin:0 2% 15px;
}
}
@media screen and (max-width: 890px) {
.filter_items {
display: flex;
flex-wrap: wrap;
}
.box {
width:45%;
padding:0;
text-align: center;
}

}


@media screen and (max-width: 480px) {
.box:nth-child{
margin-left: 2.5%;
margin-right: 2.5%;
}
}


.box .number {
	display: none;
}




/*----------------------*/
/*		ソートボタン 		*/
/*----------------------*/

.tnews{
margin-top: 3em;
}

.fil_btn span{
position: relative
}


.fil_btn span.is-current{
color: #00B3FF;
}
.fil_btn span.is-current::after {
opacity: 1;
bottom: 3px;

}


.fil_btn span::after {
content: '';
width: 2em;
height: 2px;
display: inline-block;
background-color: #00B3FF;
position: absolute;
left: calc(50% - 1em);
opacity: 0;
transition: .4s;
bottom: -10px;
}
.fil_btn span:hover{
color: #00B3FF;
}

.fil_btn span:hover::after {
visibility: visible;
opacity: 1;
bottom: 3px;
}


.fil_btn span:hover::after{
}


.filter ul {
	margin: 0 0 0 20px;
	list-style: none;
	text-align: left;
}

.filter li {
	float: left;
	margin: 0 10px 0 0;
	margin-bottom: 15px;
}

.filter li span {
	color:#333;
	display: block;
	width: 214px;
	height: 40px;
	line-height: 40px;
	text-align: center;
cursor: pointer;
}

.fil_btn br{
display: none;
}


@media screen and (max-width: 890px) {
 .tnews {
  margin-top: 3em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:space-between ;
 }
 .filter li {
	float: none;
  margin: 5px 0 1em;
  width: 49%;

  border: solid 1px #ccc;
  padding: 5px;
		text-align: center;
		}
	.filter li span{
  display: flex;
  justify-content: center;
  align-items: center;

	width: 98%!important;
	line-height: 1.4em;
}
.fil_btn br{
display: block;
}
/*下線消す*/
.fil_btn span::after {
content:none;
}

}


/*--以下はPCの時だけ　スマホにロールオーバーという概念がない--*/
@media screen and (max-width: 890px) {


}



/*----------------------*/
/*		説明箱	 		*/
/*----------------------*/



.descri_box  {
width:80%;
margin:20px auto 30px; 
clear:both; 
overflow:hidden;
display:none;
text-align:center;
	
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

.descri_box h2{
text-align:center;
font-size:1.5em;
margin:0.5em auto;
padding-bottom:30px;
}

.descri_box p{
text-align:left;
width:758px;
margin:auto;
}
@media screen and (max-width: 890px) {

.descri_box  {
width:80%;
}
.descri_box p {
width:100%;
}
}

.descri_box .sub_ttl{
text-align:center;
display:block;
font-size:1.3em;
margin:0 auto 1em;
font-weight:normal;
}

@media only screen and (max-width:480px){
.descri_box .sub_ttl{
text-align: left;
}
}

.descri_box .img{
	margin: 5px auto;
	text-align:center;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@media screen and (max-width: 890px) {

.descri_box  {
width:100%;
margin:0 auto 2em;
font-size:0.9em;
}	

.descri_box .sub_ttl{
font-size:1.1em;
margin:0 auto 10px;
}

.descri_box h2{
font-size:1.5em;
margin:0 auto 10px;
background-size:100% auto ;
}

.item-ex .txt_area{
	font-size: 0.5em;
	line-height: 3.5em;
}

}


#koko{
	display:block;
	height:100px;
}

@media only screen and (max-width:480px){
.maintxt h2{
	font-size:1.2em;
}
.txt_area{
	font-size: 0.95em;
}

}