@charset "UTF-8";

/*-------------------------
__seller_list_style
-------------------------*/
.page_ttl_box{background:url("../images/seller/page_ttl_bg.jpg") no-repeat center center;background-size:cover;}
.page_ttl_box .inner .page_ttl,
.page_ttl_box .inner .page_ttl_txt{
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition : .7s;
}
.page_ttl_box .inner .page_ttl {
  -webkit-animation: page_ttl_fade 0.5s ease 0.25s 1 forwards;
  animation: page_ttl_fade 0.5s ease 0.25s 1 forwards;
}
.page_ttl_box .inner .page_ttl_txt {
  -webkit-animation: page_ttl_fade 0.5s ease 0.5s 1 forwards;
  animation: page_ttl_fade 0.5s ease 0.5s 1 forwards;
}
@-webkit-keyframes page_ttl_fade {
  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes page_ttl_fade {
  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

.topic_path{margin-bottom:100px;}

#seller_list_head{padding-bottom:100px;}
#seller_list_head .inner{display:flex;-webkit-box-pack:justify;-ms-flex-pack: justify;justify-content:space-between;max-width:1215px;margin:0 auto;}
#seller_list_head .inner .box_l{text-align:left;}
#seller_list_head .inner .box_l .nubmer{font-size:3.2em;font-weight:500;color:#646464;letter-spacing:0.2em;padding-bottom:30px;}
#seller_list_head .inner .box_l .nubmer strong{font-size:132%;font-weight:500;color:#FF6E00;}
#seller_list_head .inner .box_l .nubmer02{font-size:1.6em;color:#646464;letter-spacing:0.05em;}
#seller_list_head .inner .box_r .inq_btn{width:500px;}
#seller_list_head .inner .box_r .inq_btn a{font-size:2em;line-height:40px;font-weight:500;color:#FFF;letter-spacing:0.05em;text-decoration:none;display:block;background-color:#FF6E00;height:42px;box-sizing:border-box;border:1px solid #FF6E00;overflow:hidden;position:relative;border-radius:3px;transition:.3s;}
#seller_list_head .inner .box_r .inq_btn a::before{content:"";display:block;background-color:#FFF;position:absolute;left:0;right:0;top:0;bottom:0;transition:.3s ease-in-out;-webkit-transform:translateX(-100%);transform:translateX(-100%);}
@media only screen and (min-width: 768px) {
  #seller_list_head .inner .box_r .inq_btn a:hover::before{box-sizing:border-box;-webkit-transform:translateX(0);transform:translateX(0);}
}
#seller_list_head .inner .box_r .inq_btn a span{position:relative;z-index:1;transition:.3s;}
@media only screen and (min-width: 768px) {
  #seller_list_head .inner .box_r .inq_btn a:hover span{color:#FF6E00;}
}
#seller_list_head .inner .box_r .inq_btn a span::before{content:"";vertical-align:middle;display:inline-block;background:url("/images/seller/ico_chk.png") no-repeat 0 0;background-size:contain;height:15px;width:17px;margin-top:-4px;margin-right:5px;transition:.3s;}
@media only screen and (min-width: 768px) {
  #seller_list_head .inner .box_r .inq_btn a:hover span::before{visibility:hidden;opacity:0;}
}
#seller_list_head .inner .box_r .inq_btn a span::after{content:"";display:block;background:url("/images/seller/ico_chk_on.png") no-repeat 0 0;background-size:contain;height:15px;width:17px;position:absolute;left:0;top:8px;z-index:-1;}
#seller_list_head .inner .box_r .sort_list{display:flex;-webkit-box-pack:justify;-ms-flex-pack: justify;justify-content:space-between;margin-top:25px;}
#seller_list_head .inner .box_r .sort_list li{font-size:2em;line-height:1.3;font-weight:500;}
#seller_list_head .inner .box_r .sort_list li:first-child{letter-spacing:1.5em;margin-right:-1.5em;}
#seller_list_head .inner .box_r .sort_list li a{display:block;color:#FF6E00;text-decoration:none;position:relative;}
#seller_list_head .inner .box_r .sort_list li a::before{content:"";vertical-align:middle;display:inline-block;background:url("/images/seller/ico_sort.png") no-repeat 0 0;background-size:contain;height:20px;width:16px;margin-right:8px;margin-top:-3px;}
#seller_list_head .inner .box_r .sort_list li a::after{content:"";display:block;background-color:#FF6E00;height:1px;width:100%;position:absolute;left:0;bottom:-6px;transform: scale(0, 1);transform-origin:left top;transition:transform .3s;}
#seller_list_head .inner .box_r .sort_list li:first-child a::after{width:calc(100% - 1.5em);}
@media only screen and (min-width: 768px) {
  #seller_list_head .inner .box_r .sort_list li a:hover::after{transform: scale(1, 1);}
}

#seller_list_head .inner .box_l,
#seller_list_head .inner .box_r .inq_btn,
#seller_list_head .inner .box_r .sort_list {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition : .7s;
}
#seller_list_head.is_play .inner .box_l {
  -webkit-animation: list_head_fade 0.5s ease 0.25s 1 forwards;
  animation: list_head_fade 0.5s ease 0.25s 1 forwards;
}
#seller_list_head.is_play .inner .box_r .inq_btn {
  -webkit-animation: list_head_fade 0.5s ease 0.5s 1 forwards;
  animation: list_head_fade 0.5s ease 0.5s 1 forwards;
}
#seller_list_head.is_play .inner .box_r .sort_list {
  -webkit-animation: list_head_fade 0.5s ease 0.75s 1 forwards;
  animation: list_head_fade 0.5s ease 0.75s 1 forwards;
}
@-webkit-keyframes list_head_fade {
  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes list_head_fade {
  100% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

#seller_list{padding-bottom:20px;}
#seller_list .inner{max-width:1215px;margin:0 auto;}
#seller_list .inner .box_wrap{display:flex;flex-wrap:wrap;margin:0 -37px;}
#seller_list .inner .box{width:calc(25% - 74px);margin:0 37px 80px;}
#seller_list .inner .box .ttl{font-size:1.4em;line-height:1.3;letter-spacing:0.05em;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:26px;}
#seller_list .inner .box .checkbox_wrap{text-align:left;margin:-15px 0 15px;}
#seller_list .inner .box .checkbox_wrap input[type="checkbox"]{display:none;}
#seller_list .inner .box .checkbox_wrap .checkbox{vertical-align:middle;display:inline-block;box-sizing:border-box;position:relative;cursor:pointer;}
#seller_list .inner .box .checkbox_wrap .checkbox::after{content:"";display:block;background-color:#FFF;height:18px;width:18px;margin-top:-9px;position:absolute;left:0;top:50%;border:1px solid #000;border-radius:2px;transition:.3s;}
@media only screen and (min-width: 768px) {
  #seller_list .inner .box .checkbox_wrap .checkbox:hover::after{border-color:#FF6E00;}
}
#seller_list .inner .box .checkbox_wrap .checkbox::before{content:"";display:block;height:13px;width:8px;margin-top:-10px;position:absolute;left:5px;top:50%;border-right:2px solid #FF6E00;border-bottom:2px solid #FF6E00;opacity:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);transition:.3s;}
#seller_list .inner .box .checkbox_wrap input[type="checkbox"]:checked + .checkbox::before{opacity:1;z-index:2;}
#seller_list .inner .box .checkbox_wrap input[type="checkbox"]:checked + .checkbox::after{border-color:#FF6E00;}
#seller_list .inner .box .image{backface-visibility:hidden;transition:.5s ease;}
#seller_list .inner .box .image a{display:block;background-color: #FFF;overflow:hidden;position:relative;transition:.3s;}
@media only screen and (min-width: 768px) {
  #seller_list .inner .box .image:hover{background-color:#000;}
  #seller_list .inner .box .image a:hover{opacity:.5;}
}
#seller_list .inner .box .image a::before{content:"";display:block;padding-top:66%;}
#seller_list .inner .box .image img{height:auto;width:100%;position:absolute;left:50%;top:0;transform:translate(-50%,0);transition:.5s ease;}
@media only screen and (min-width: 768px) {
  #seller_list .inner .box .image a:hover img{transform:translate(-50%,0) scale(1.1);}
}
#seller_list .inner .box .box_inner{padding-top:12px;text-align:left;}
#seller_list .inner .box .kind{font-size:1.2em;line-height:21px;letter-spacing:0.1em;vertical-align:top;display:inline-block;margin-bottom:10px;padding:0 10px;border:1px solid;}
#seller_list .inner .box .new{text-align:center;background-color:#FF6E00;height:23px;width:50px;margin:-33px 0 10px auto;padding-top:5px;box-sizing:border-box;}
#seller_list .inner .box .add,
#seller_list .inner .box .line{font-size:1.2em;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#seller_list .inner .box .price{font-size:1.2em;font-weight:700;color:#FF6E00;letter-spacing:0.05em;padding-top:10px;}
#seller_list .inner .box .price strong{font-size:220%;font-weight:700;}

#pagenation{max-width:420px;margin:0 auto;padding-bottom:200px;}
#pagenation a.prev,
#pagenation a.next{font-size:1.4em;color:#ff5033;text-decoration:none;margin-top:-20px;transition:.5s;}
#pagenation a.prev{float:left;}
#pagenation a.prev::after{content:"前のページへ";display:inline-block;}
#pagenation a.next{float:right;}
#pagenation a.next::before{content:"次のページへ";display:inline-block;}
@media only screen and (min-width: 768px) {
  #pagenation a.prev:hover,
  #pagenation a.next:hover{color:#000;}
}
#pagenation ul{letter-spacing:-1em;clear:both;}
#pagenation ul li{letter-spacing:normal;display:inline-block;}
#pagenation ul li + li{margin-left:5px;}
#pagenation ul li a{font-size:1.6em;font-weight:700;color:#FFF;text-decoration:none;display:block;background-color:#ff5033;border:1px solid #FFF;padding:5px 10px;box-sizing:border-box;transition:.5s;}
#pagenation ul li.active a{color:#ff5033;background-color:#FFF;border:1px solid #ff5033;pointer-events:none;}
@media only screen and (min-width: 768px) {
  #pagenation ul li a:hover{color:#ff5033;background-color:#FFF;border:1px solid #ff5033;}
  #pagenation ul li.active a:hover{background-color:#FFE2CC;}
}

#nohave{padding-bottom:200px;padding-top:50px;}
#nohave .nohave_ttl{font-size:2.4em;line-height:1.5;font-weight:700;color:#FF6E00;letter-spacing:0.1em;}

@media only screen and (max-width: 1289px) {
  #seller_list_head .inner{margin:0 40px;}

  #seller_list .inner{margin:0 40px;}
  #seller_list .inner .box_wrap{margin:0 -20px;}
  #seller_list .inner .box{width:calc(25% - 40px);margin:0 20px 80px;}
}

@media only screen and (max-width: 1024px) {
  #seller_list_head .inner .box_r .inq_btn{width:450px;}
  #seller_list_head .inner .box_r .inq_btn a{font-size:1.8em;}
  #seller_list_head .inner .box_r .inq_btn a span::after{top:6px;}
  #seller_list_head .inner .box_r .sort_list li{font-size:1.8em;}

  #seller_list .inner .box{width:calc(50% - 40px);}

  #pagenation{padding-bottom:100px;}
}

@media only screen and (max-width: 767px) {
  .topic_path{margin-bottom:50px;}

  #seller_list_head{padding-bottom:50px;}
  #seller_list_head .inner{display:block;margin:0 20px;}
  #seller_list_head .inner .box_l{text-align:center;}
  #seller_list_head .inner .box_l .nubmer{font-size:2em;padding-bottom:15px;}
  #seller_list_head .inner .box_l .nubmer02{font-size:1.3em;padding-bottom:25px;}
  #seller_list_head .inner .box_r .inq_btn{width:100%;}
  #seller_list_head .inner .box_r .inq_btn a{font-size:1.3em;line-height:38px;}
  #seller_list_head .inner .box_r .inq_btn a span::before{height:15px;width:17px;margin-top:-2px;}
  #seller_list_head .inner .box_r .sort_list li{font-size:1.3em;}
  #seller_list_head .inner .box_r .sort_list li:first-child{letter-spacing:0;margin-right:0;}
  #seller_list_head .inner .box_r .sort_list li a::before{height:15px;width:12px;margin-right:4px;margin-top:-3px;}

  #seller_list{padding-bottom:25px;}
  #seller_list .inner{margin:0 20px;}
  #seller_list .inner .box_wrap{margin:0 -6px;}
  #seller_list .inner .box{width:calc(50% - 12px);margin:0 6px 35px;}
  #seller_list .inner .box .ttl{font-size:1.2em;padding-left:24px;}
  #seller_list .inner .box .checkbox_wrap{margin:-12px 0 10px;}
  #seller_list .inner .box .checkbox_wrap .checkbox::after{height:16px;width:16px;}
  #seller_list .inner .box .checkbox_wrap .checkbox::before{height:12px;width:6px;margin-top:-9px;}
  #seller_list .inner .box .kind{font-size:1em;line-height:16px;letter-spacing:0.1em;padding:0 8px;}
  #seller_list .inner .box .new{height:18px;width:38px;margin:-28px 0 10px auto;padding-top:4px;}
  #seller_list .inner .box .new img{height:8px;width:auto;}
  #seller_list .inner .box .add,
  #seller_list .inner .box .line{font-size:1.1em;}
  #seller_list .inner .box .price{font-size:1.1em;}
  #seller_list .inner .box .price strong{font-size:200%;}

  #pagenation{max-width:inherit;margin:0 20px;}
  #pagenation a.prev::after{content:"";}
  #pagenation a.next::before{content:"";}

  #nohave{padding-bottom:150px;padding-top:100px;}
  #nohave .nohave_ttl{font-size:1.8em;}
}