@charset "utf-8";
/* WORKS 一覧ページ */
.title_bg {
background-image: url("../works/img/title_bg.jpg");
}
main {
max-width: 1260px;
margin: auto;
padding-top: 50px;
}
.category_list {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.category_list li a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.6rem;
font-weight: 400;
padding: 6px 10px;
color: #222;
text-decoration: none;
display: block;
margin: 0 10px;
}
.crt a {
background-color: #E8E8E8;
/*border: 1px solid #D1D1D1;*/
border-radius: 6px;
}
.category_list li a:hover {
background-color: #E8E8E8;
border-radius: 6px; 
}
.tab_menu {
margin-bottom: 50px;
}


.pic {
max-width: 400px;
height: auto;
margin-bottom: 20px;
overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
background: #000;
}
.pic img {
width: 100%;
height: auto;
display: block;
transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.pic img:hover {
transform: scale(1.05);	/*画像の拡大率*/
transition-duration: 0.3s;	/*変化に掛かる時間*/
opacity: 0.7;	/* 小さくするほど暗くなります */
}
.shoes_title {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-size: 2.0rem;
line-height: 100%;
padding-left: 25px;
letter-spacing: 0.2em;
margin-bottom: 10px;
position: relative;
}
.shoes_title::before {
content: "";
position: absolute;
top: 45%;
display: inline-block;
width: 20px;
height:1px; 
background-color: #1C1F22;
left: 0;
}
.shoes_category {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.2rem;
margin-left: 25px;
color: #999;
display: block;
}
.item {
width: calc(33.3333333% - 20px);
height: 330px;
margin-right: 20px;
margin-bottom: 50px;
}

.list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
}


/*スマートフォン*/

@media all and (max-width : 812px ){
.title_bg {
background-image: url("../works/img/title_bg_sp.png");
height: 150px;
}
main {
width: 90%;
padding-top: 20px;
}
.category_list li a {
font-size: 1.2rem;
padding: 3px 5px;
margin: 0 5px ;
}
.category_list li a:hover {
background-color: #E8E8E8;
border-radius: 6px; 
}
.tab_menu {
margin-bottom: 25px;
}
.pic {
max-width: 400px;
margin-bottom: 10px;
}
.shoes_title {
font-size: 1.4rem;
padding-left: 20px;
margin-bottom: 6px;
}
.shoes_title::before {
width: 15px;
}
.shoes_category {
font-size: 1.0rem;
margin-left: 0px;
}
.item {
width: calc(50% - 20px);
height: auto;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}

}