@charset "utf-8";
/*-------------------------------------
SITE : //www.jeansfactory.jp/
CREATE : 2017.01.11
MODIFIED : 2020.11.14
UPDATED BY : OGASAWARA
MEMO : 2020.11.14 ブレイクポイントの追加。CC対応。
-------------------------------------*/

/* ==================================

 artcollection
 
================================== */

.artcollection-container{margin:60px auto 120px;max-width: 1024px;}
.artcollection-container .pageTitle{font-size:24px;font-weight:400;position:relative;display:  inline-block;}
.artcollection-container .artcollection-layout{display: -webkit-flex;display: flex;margin-top: 50px;}
.artcollection-container .artcollection-layout__menu{width: 280px;margin-right: 30px;}
.artcollection-container .artcollection-layout__menuInner{position:sticky;top:20px}
.artcollection-container .artcollection-layout__content{ width: -webkit-calc(100% - 310px);width: calc(100% - 310px);}
@media screen and (max-width:834px){
.artcollection-container .pageTitle{font-size:20px;padding: 0 30px;}
.artcollection-container .artcollection-layout{-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;}
.artcollection-container .artcollection-layout__menu{width: 100%;margin-right: 0;}
.artcollection-container .artcollection-layout__menuInner{position: inherit;top: inherit;margin: 0 30px;}
.artcollection-container .artcollection-layout__content{width: 100%;margin-top: 50px;}
}
@media screen and (max-width:640px){
.artcollection-container{margin: 30px auto 80px;}
.artcollection-container .pageTitle{padding: 0 20px;}
.artcollection-container .artcollection-layout{margin-top:30px}
.artcollection-container .artcollection-layout__menuInner{margin: 0 20px;}
.artcollection-container .artcollection-layout__content{margin-top: 30px;}
}

/* searchType
-------------------------------------*/
.artcollection-layout__menu .searchType{}
.artcollection-layout__menu .searchType ul{}
.artcollection-layout__menu .searchType ul > li{font-size: 14px;}
.artcollection-layout__menu .searchType ul > li a{position:relative;padding: 5px 0;transition: .5s;text-decoration: none;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;color: #202020;}
.artcollection-layout__menu .searchType ul > li a:hover{background:#dcdde2;}
.artcollection-layout__menu .searchType ul > li.slt{}
.artcollection-layout__menu .searchType ul > li .icon-checkmark{display:inline-block;width:20px;min-width: 20px;height: 20px;border-radius:5px;border: 1px solid #666;margin-right: 8px;box-sizing: border-box;}
.artcollection-layout__menu .searchType ul > li.slt .icon-checkmark{background-image: -webkit-linear-gradient(left, #202020 0%, #202020 100%);background-image: linear-gradient(to right, #202020 0%, #202020 100%);border: none;position: relative;}
.artcollection-layout__menu .searchType ul > li.slt .icon-checkmark::after { position: absolute; content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 3px solid #fff;border-bottom: 3px solid #fff;top: 50%;left: 50%; -webkit-transform: translate(-50%,-50%) rotate(-45deg);transform: translate(-50%,-50%) rotate(-45deg);}
@media screen and (max-width:834px){
}
@media screen and (max-width:640px){
}

/* art-searchLists
-------------------------------------*/
.artcollection-layout__menu .art-searchLists{margin-top:30px;}
.artcollection-layout__menu .art-searchLists ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.artcollection-layout__menu .art-searchLists ul li{width: -webkit-calc(100% / 3 - 4px);width: calc(100% / 3 - 4px);margin-right: 6px;text-align: center;}
.artcollection-layout__menu .art-searchLists ul li:nth-of-type(3n){margin-right:0}
.artcollection-layout__menu .art-searchLists ul li:nth-of-type(n+4){margin-top:8px}
.artcollection-layout__menu .art-searchLists ul li a{color: #202020;display:  block;background: #EBECF0;border: 1px solid #EBECF0;transition: all 300ms ease-out 0ms;text-decoration: none;border-radius: 4px;display: -webkit-flex;display: flex;-webkit-box-align: center;align-items: center;height: 50px;-webkit-justify-content: center;justify-content: center;}
.artcollection-layout__menu .art-searchLists ul a:hover{border: #001335 1px solid;}
.artcollection-layout__menu .art-searchLists ul li.slt{}
.artcollection-layout__menu .art-searchLists ul li.slt a{color:#fff;background: #001335;border: #001335 1px solid;}
.artcollection-layout__menu .art-searchLists #searchBlk {margin-top: 30px;}
.artcollection-layout__menu .art-searchLists #searchBlk #searchform{text-decoration: none;color: #333;box-shadow: inset 3px 3px 5px #BABECC, inset -5px -5px 10px #e8e9ea;width: 100%;min-width: 220px;box-sizing: border-box;transition: all 0.2s ease-in-out;appearance: none;-webkit-appearance: none;border: none;height: 45px;line-height: 45px;padding: 0 20px;outline: 0;border-radius: 50px;background-color: #fff;}
.artcollection-layout__menu .art-searchLists #searchBlk #searchform:focus {box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #e8e9ea;}
@media screen and (max-width:834px){
}
@media screen and (max-width:640px){
}

/* art_list
-------------------------------------*/
#art_list{padding:0;overflow:hidden;}
#art_list ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
#art_list li{width: -webkit-calc(100% / 4 - 11.25px);width: calc(100% / 4 - 11.25px);margin-right: 15px;}
#art_list li:nth-of-type(4n){margin-right:0}
#art_list li:nth-of-type(n+5){margin-top:15px}
#art_list li a,
#art_list li span{display:block; text-decoration:none; color:#000; font-size:12px; line-height:18px; position:relative}
#art_list li a img{width:100%;border-radius: 10px;}
#art_list li a p{opacity:0;display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);color:#FFF;z-index:100;text-align:center;padding:42% 10px 0;box-sizing:border-box;font-size:10px;line-height:1.8;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;border-radius: 10px;}
#art_list li a p b{display:block; color:#FFF; font-size:14px; font-weight:500; line-height:1; padding-bottom:10px}
#art_list li a:hover p{opacity:1}
#list_more{text-align:center;text-decoration:none;font-size: 15px;-webkit-transition:all 0.3s;transition:all 0.3s;margin: 50px auto 0;color: #202020;max-width: 200px;position: relative;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}
#list_more .icon_plus{position: relative;height: 16px;width: 16px;display: inline-block;margin-right: 10px;}
#list_more .icon_plus::before{position:absolute;content:'';width:1px;height:14px;background-color: #202020;top:50%;right: 50%;-webkit-transform: translate(50%,-50%);transform: translate(50%,-50%);}
#list_more .icon_plus::after{position:absolute;content:'';width:1px;height:14px;background-color: #202020;top:50%;right: 50%;-webkit-transform: translate(50%,-50%) rotateZ(-90deg);transform: translate(50%,-50%) rotateZ(-90deg);}
#list_more:hover{opacity:0.6; filter:alpha(opacity=60); -ms-filter:"alpha( opacity=60 )"}
#art_list h2.ititle {font-weight: 400;display: block;font-size: 18px;}	
#art_list h2.ititle + .sqbox{margin-top:20px}
#art_list ul + .ititle{margin-top:30px}
@media screen and (max-width:834px){
#art_list ul{margin:0 30px}
#art_list h2.ititle {margin:0 30px}	
#art_list ul + .ititle{margin:30px 30px 0}
}
@media screen and (max-width:640px){
#art_list ul{margin:0 20px}
#art_list li{width: -webkit-calc(100% / 2 - 5px);width: calc(100% / 2 - 5px);margin-right: 10px;}
#art_list li:nth-of-type(2n){margin-right:0}
#art_list li:nth-of-type(n+3){margin-top:10px}
#art_list h2.ititle {margin:0 20px;font-size:16px}	
#art_list ul + .ititle{margin:30px 20px 0}
}

/*artDetail
-------------------------------------*/
#artDetail {margin: 60px auto 0;max-width: 1024px;}
#artDetail .artBlk{display: -webkit-flex;display: flex;}
#artDetail .artBlk .artImg {width: 60%;margin-right: 30px;}
#artDetail .artBlk .artImg img {width: 100%}
#artDetail .artImg .thumb_img {margin:20px 0 0 0;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
#artDetail .artImg .thumb_img a {height:auto;width: -webkit-calc(100% / 4 - 7.5px);width: calc(100% / 4 - 7.5px);margin-right: 10px;}
#artDetail .artImg .thumb_img a:nth-of-type(4n) {margin-right:0;}
#artDetail .artImg .thumb_img a:nth-of-type(n+5) {margin-top:10px;}
#artDetail .artImg .thumb_img a img{ width:100%;}
#artDetail .artTxt {line-height: 1.8;font-size: 13px;position: relative;width: -webkit-calc(40% - 30px);width: calc(40% - 30px);}
#artDetail .artTxt h2 {font-size: 24px;font-weight: 400;line-height: 1.6;color: #202020;margin-bottom: 30px;}
#artDetail .artTxt h2 span {display: block;font-size: 15px;font-weight: normal;padding-top: 10px;}
#artDetail .artTxt .btnBlk {float:left;}
#artDetail .artTxt .btnBlk:nth-of-type(n+2) {margin-left:20px;}
#artDetail #closebtn{background: #fff;min-width: -webkit-calc(300px - 40px);min-width: calc(300px - 40px);max-width: -webkit-calc(350px - 40px);max-width: calc(350px - 40px);height: 60px;line-height: 60px;text-align: center;color: #050505;padding: 0 20px;-webkit-transition: 0.3s;transition: 0.3s;text-decoration: none;border: none;font-size: 14px;font-weight: 400;box-shadow: -5px -5px 15px #e8e9ea, 5px 5px 15px #BABECC;display: block;margin: 40px auto 0;}
#artDetail #closebtn:hover{box-shadow: -2px -2px 5px #e8e9ea, 2px 2px 5px #BABECC;}
@media screen and (max-width:834px){
#artDetail .artBlk{-webkit-flex-wrap: wrap;flex-wrap: wrap;}
#artDetail .artBlk .artImg {width: 100%;margin-right: 0;}
#artDetail .artImg .thumb_img {margin: 20px 30px 0;}
#artDetail .artImg .thumb_img a {height:auto;width: -webkit-calc(100% / 5 - 8px);width: calc(100% / 5 - 8px);margin-right: 10px;}
#artDetail .artImg .thumb_img a:nth-of-type(4n) {margin-right:10px;}
#artDetail .artImg .thumb_img a:nth-of-type(5n) {margin-right:0;}
#artDetail .artImg .thumb_img a:nth-of-type(n+5) {margin-top:0;}
#artDetail .artImg .thumb_img a:nth-of-type(n+6) {margin-top:10px;}
#artDetail .artTxt {margin: 50px 30px 0;width: -webkit-calc(100% - 60px);width: calc(100% - 60px);}
}
@media screen and (max-width:640px){
#artDetail {margin: 30px auto 0;}
#artDetail .artImg .thumb_img {margin: 20px 20px 0;}
#artDetail .artTxt {margin: 30px 20px 0;width: -webkit-calc(100% - 40px);width: calc(100% - 40px);}
#artDetail .artTxt h2 {font-size: 20px;}
#artDetail .artTxt h2 span {font-size: 14px;}
#artDetail #closebtn{min-width: -webkit-calc(100% - 40px);min-width: calc(100% - 40px);max-width: -webkit-calc(100% - 40px);max-width: calc(100% - 40px);height: 50px;line-height: 50px;margin: 30px auto 0;}
}

/*otherart
-------------------------------------*/
#otherArtist{max-width: 1024px;margin: 60px auto 0;}
#otherShopart{max-width: 1024px;margin: 60px auto 120px;}
#otherArtist h2,
#otherShopart h2{font-size: 18px;font-weight:400;display:block;}
#art_list #otherArtist ul,
#art_list #otherShopart ul{margin-top:30px}
#art_list #otherArtist li,
#art_list #otherShopart li{width: -webkit-calc(100% / 5 - 12px);width: calc(100% / 5 - 12px);margin-right: 15px;}
#art_list #otherArtist li:nth-of-type(5n),
#art_list #otherShopart li:nth-of-type(5n){margin-right:0}
#art_list #otherArtist li:nth-of-type(n+5),
#art_list #otherShopart li:nth-of-type(n+5){margin-top:0}
#art_list #otherArtist li:nth-of-type(n+6),
#art_list #otherShopart li:nth-of-type(n+6){margin-top:15px}
@media screen and (max-width:834px){
#otherArtist h2,
#otherShopart h2{margin:0 30px}
#art_list #otherArtist li,
#art_list #otherShopart li{width: -webkit-calc(100% / 4 - 11.25px);width: calc(100% / 4 - 11.25px);}
#art_list #otherArtist li:nth-of-type(5n),
#art_list #otherShopart li:nth-of-type(5n){margin-right:15px}
#art_list #otherArtist li:nth-of-type(4n),
#art_list #otherShopart li:nth-of-type(4n){margin-right:0}
#art_list #otherArtist li:nth-of-type(n+5),
#art_list #otherShopart li:nth-of-type(n+5){margin-top:15px}
}
@media screen and (max-width:640px){
#otherArtist{margin: 50px auto 0;}
#otherShopart{margin: 50px auto 80px;}
#otherArtist h2,
#otherShopart h2{margin:0 20px;font-size: 16px;}
#art_list #otherArtist li,
#art_list #otherShopart li{width: -webkit-calc(100% / 2 - 5px);width: calc(100% / 2 - 5px); margin-right: 10px;}
#art_list #otherArtist li:nth-of-type(5n),
#art_list #otherShopart li:nth-of-type(5n){margin-right:10px}
#art_list #otherArtist li:nth-of-type(2n),
#art_list #otherShopart li:nth-of-type(2n){margin-right:0}
#art_list #otherArtist li:nth-of-type(n+3),
#art_list #otherShopart li:nth-of-type(n+3){margin-top:10px}
}