﻿/* CSS Document */

/*写真非表示*/
body.ex-salepage #contents.mitten ul.shoplist_cat {
    li.shop1112 .service > img,
    li.shop1114 .service > img,
    li.shop1401 .service > img,
    li.shop1601 .service > img,
    li.shop1501 .service > img,
    li.shop1210 .service > img,
    li.shop1805 .service > img {
        width: 0; height: 0; display: none;
    }
}


/*-----------------------------------
セール写真表出
-----------------------------------*/
.pc .w_full.common_navi_btn{
  display: none !important;
}
#photoBOX {
  margin: 20px 40px 0;
  padding: 0 20px;
  overflow: hidden;
  background: rgba(255, 103, 0, 0.2);
}
#photoBOX li {
  float: left;
  width: 15%;
  height: auto;
  aspect-ratio: 2/1.2;
  margin-right: 1%;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  animation-name: fade-in1;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  border: 3px solid #E60012;
  box-sizing: border-box;
}
@keyframes fade-in1 {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
#photoBOX li:nth-child(5) {
  margin-right: 0;
  font-size: 15px;
  font-weight: bold;
	a{
		color:#fff;
		display: block;
		background:#E60012;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 10px;
		box-sizing: border-box;
	}
}
/*-----------------------------------
PC・スマホ共通スタイル
body.ex-salepage
-----------------------------------*/
html {
    scroll-behavior: smooth;	
}
body.ex-salepage.pc .sp {
  display: none;
}
body.ex-salepage.sp .pc {
  display: none;
}
body.ex-salepage.sp .footer-navi, body.pc #e_navi_foot.common_e_navi {
  display: none !important;
}

body.ex-salepage #contents.foris {
  width: 100%;
  text-align: center;
  padding: 0;
  border-bottom: #ccc3c2 1px solid ;
    position:relative;
    overflow: unset;
}
body.ex-salepage #contents.foris::before {
    content: "";
    display:block;
    width:100%;
    height: 100%;
    background: url(bg-w2601_bargain_f.jpg);
    background-size: cover;
    background-attachment: fixed;
    position:absolute;
}
body.ex-salepage #contents.mitten {
  width: 100%;
  text-align: center;
  padding: 0;
  border-bottom: #ccc3c2 1px solid;
  background: url(bg-w2601_bargain_m.jpg);
  overflow-x: unset;
}

body.ex-salepage.view.pc #contents > .inner {
  width: 80%;
  min-width: 960px;
  max-width: 1400px;
}
body.ex-salepage #contents-main .shoplist_cat {
  margin: 0 auto;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  position: relative;
  padding: 10px 0;
}
body.ex-salepage #contents #contents-main {width: 100%;position: relative;}
body.ex-salepage #contents.mitten #contents-main {top: -20px;}

body.ex-salepage #contents h2 {
  margin: 0 auto 20px;
  padding: 0;
  border: none;
  background: none;
    width: 100%;
}
body.ex-salepage #contents.mitten h2{
  padding: 0;
}
body.ex-salepage .exsale_header {
  width: 85%;
  margin: 0 auto;
  background: none;
}

body.ex-salepage #contents.foris .exsale_header p {
  font-size: 16px;
  line-height: 1.6em;
  font-weight: bold;
  display: block;
}
body.ex-salepage #contents.foris .exsale_header{
  position: relative;
}
body.ex-salepage #contents div.salepage_btn {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 44;
  width: 100%;
  border-top: 1px solid #565456;
      background: rgba(255,255,255,0.8);
}
body.ex-salepage #contents div.salepage_btn .box {
  width: 960px;
  margin: 0 auto;
  padding: 0;
}
body.ex-salepage #contents div.salepage_btn #items {
  display: flex;
  justify-content: center;
  width: 100%;
  float: none;
  padding: 10px;
}
body.ex-salepage #contents div.salepage_btn #items .item {
  width: 100%;
  height: 100%;
}
body.ex-salepage #contents div.salepage_btn #items .item:nth-child(6) {
  display: block;
  margin: 0;
}
body.ex-salepage #contents div.salepage_btn #items .item p.image {
  height: 100px;
}

body.ex-salepage #contents ul.shoplist_cat {
  margin-top: 0;
}
body.ex-salepage #contents ul.shoplist_cat ul li {
  border: 1px solid #ccc;
  width: calc(100% / 2 - 50px);
  background: #fff;
  margin: 8px;
  position: relative;
  padding: 0 16px 40px;
}
body.ex-salepage ul.shoplist_cat ul li:before{
  display: none;
}
body.ex-salepage #contents ul.shoplist_cat ul li.cat_ttl:before {
  display: none;
}
body.ex-salepage #contents ul.shoplist_cat ul li.cat_ttl {
  padding: 0;
  border: none;
  margin: -1px 0 0;
  background: none;
  width: 100%;
}
body.ex-salepage #contents ul.shoplist_cat ul li.cat_ttl h3 {
  font-weight: bold;
  color: #fff;
  padding: 10px 0 12px;
  margin-top: 30px;
  font-size: 18px;
  margin-bottom: 20px;
  background: #E60012;
    border: none;
}
body.ex-salepage ul.shoplist_cat ul li .detail{
  float: none;
  width: auto;
  padding: 16px 0 0;
}
body.ex-salepage .shoplist_cat .item .detail {
	padding: 20px 0 10px;
}
body.ex-salepage #contents ul.shoplist_cat ul li .service {
  float: none;
  width: auto;
  padding: 0px 0px;
  overflow: hidden;
  background: #fff;
  margin: 10px 0;
}
body.ex-salepage.pc #contents ul.shoplist_cat ul li .service {
  min-height: 160px;
}
body.ex-salepage #contents ul.shoplist_cat ul li .service .text {
  font-size: 14px;
  line-height: 1.6em;
  padding: 0 0 10px;
  text-align: left;
  white-space: pre-wrap;
  box-sizing: border-box;
}
body.ex-salepage #contents ul.shoplist_cat ul li .service > img{
  margin: 0 auto 10px;
  display: block;
  width: 240px;
  height: 240px;
}


body.ex-salepage #contents ul.shoplist_cat ul li .service .text span {
  font-size: 120%;
  font-weight: bold;
  color: #f00;
}
body.ex-salepage #contents ul.shoplist_cat ul li .service a.shopbtn {
  display: block;
  margin: 0 auto 10px;
  padding: 10px;
  border-radius: 5px;
  background: #902322;
	color: #fff;
  font-size: 12px; font-weight: bold;
  width: 10em;
  line-height: 1em;
  position: absolute;
  bottom: 0;
  right: 16px;
}
body.ex-salepage #contents.mitten ul.shoplist_cat ul li .service a.shopbtn {
  background: #ed87a1;
  color: #fff;
}
body.ex-salepage #contents ul.shoplist_cat ul li .service a.shopbtn:after {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  padding-left: 4px;
  font-size: 12px;
}
body.ex-salepage #contents p.attention {
  background: none;
  padding: 0;
  color: #fff;
}
body.ex-salepage ul.shoplist_cat {
  margin-top: 20px;
  margin-bottom: 20px;
}
body.ex-salepage ul.shoplist_cat ul {
  padding: 0 30px 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  background: none;
}

body.ex-salepage ul.shoplist_cat ul li .shopname {
  width: 60%;
}
body.ex-salepage ul.shoplist_cat ul li .shopname a {
  color: #333;
  text-align: left;
}
body.ex-salepage ul.shoplist_cat ul li .logo {
  width: 30%;
  float: right;
  text-align: center;
  min-height: 60px;
}
body.ex-salepage ul.shoplist_cat ul li .logo img {
  max-height: 60px;
  width: auto;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem{
  clear: both;
  margin: 0 10px;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .itemlist {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
body.ex-salepage .shoplist_cat .item .shopitem .item {
  border: none;
  width: calc(100% / 2 - 4px);
  height: 116px;
}
body.ex-salepage ul.shoplist_cat ul li .service .shopitem article.item .desc  .icon{
  background: #E60012;
  top: -70px;
  right: -5px;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .image, body.ex-salepage ul.shoplist_cat ul li .shopitem .item .desc {
  width: 100%;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .image {
  height: 100%;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item.noimg .image,
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .image {
  border: 2px solid #E60012;
  float: none;
  overflow: hidden;
  border-radius: 10px;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .image .logo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 40px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 5px;
  box-sizing: border-box;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .date{
  display: none;
}
body.ex-salepage ul.shoplist_cat ul li .shopitem .item .image .img_bg_css {
  border-radius: 5px;
  min-height: 90px;
    border: none;
}
body.ex-salepage .attention {
  padding: 0 10px 40px;
}
body.ex-salepage .attention p {
  font-size: 10px;
  line-height: 1.4em;
	margin: 20px 0 0;
}
body.ex-salepage .attention p strong {
  font-size: 14px;
  display: inline-block;
  padding-bottom: 8px;
}

/*カテゴリボタン*/

body.ex-salepage .list_menu.bottom {
  border-bottom: none;
  margin-bottom: 20px;
  margin-top: 0;
  padding-top: 0;
}
body.ex-salepage ul.list_menu {
   width: 100%;
   overflow: hidden;
   padding: 15px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0 0 10px;
   box-sizing: border-box;
   position: sticky;
   top: 0;
   z-index: 10;
   background: #E60012;
}
body.ex-salepage ul.list_menu  li {
  text-align: center;
  flex: 1;
  box-sizing: border-box;
}
body.ex-salepage  ul.list_menu li a label{
  position: relative;
  font-size: 15px;
  line-height: 1.2em;
  padding: 5px 0 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  text-decoration: none;
  font-weight: bold;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  height: 60px;
  box-shadow: 0 3px 3px 0 rgb(0 0 0 / 20%);
}
body.ex-salepage.pc ul.list_menu  li a br{
    display: none;
}
body.ex-salepage ul.list_menu li a label:after {
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
  display: block;
  margin: 0 0 0;
  font-size: 22px;
  line-height: 1em;
  position: absolute;
  bottom: 8px;
  left: calc(50% - 8px);
  color: var(--color-sale-red);
}
/*-----------------------------------
スマホのみ
body.ex-salepage .sp_view
-----------------------------------*/
body.ex-salepage.sp #contents {
  padding: 0;
  box-sizing: border-box;
  overflow: unset;
}
body.ex-salepage.sp #contents-main {
  top: 0px;
  padding: 20px 0;
}
body.ex-salepage.sp #contents-main p.main_caption{
  font-size: 14px;
  line-height: 1.4rem;
  margin-bottom: 0;
}
body.ex-salepage.sp #contents h2{
  margin: 0;
}
body.ex-salepage.sp .footer-navi {
  display: none !important;
}
body.ex-salepage.sp footer .ad_foot_desc {
  padding-bottom: 120px;
}
body.ex-salepage.sp .to-top {
  bottom: 100px;
}
body.ex-salepage.sp .exsale_header, body.ex-salepage.sp #contents div.salepage_btn .box, body.ex-salepage.sp #contents div.salepage_btn #items {
  width: 100%;
    box-sizing: border-box;
}
body.ex-salepage.sp #contents .exsale_header{
}
body.ex-salepage.sp #contents .inner {
  padding: 0;
  background: none;
}
body.ex-salepage.sp .attention {
  padding: 0 10px 10px;
}
body.ex-salepage.sp .exsale_header p,
body.ex-salepage.sp .attention p,
body.ex-salepage.sp #contents.foris .exsale_header p {
  font-size: 3.6vw;
  padding: 10px 0;
  text-align: center;
}
body.ex-salepage.sp #contents.foris .exsale_header p{
  left: calc(50% - 26vw);
  bottom: 10px;
}
body.ex-salepage.sp .attention p {
  font-size: 10px;
  line-height: 1.4em;
	background: #fff;
}
body.ex-salepage.sp .exsale_header p.bnr, body.ex-salepage.sp .attention p.bnr {
  padding: 0 30px 20px;
}
body.ex-salepage.sp .exsale_header p.bnr:before, body.ex-salepage.sp .attention p.bnr:before {
  width: 42px;
  height: 42px;
  top: -4px;
  left: 8px;
}
body.ex-salepage.sp .tablist_menu{
  background: #fff;
  padding: 10px 0 0;
}
body.ex-salepage.sp .tablist_menu ul li a{
  padding: 12px 4px;
}
body.ex-salepage.sp .tablist_menu ul li a.on{
  font-size: 20px;
}
body.ex-salepage.sp .list_menu {
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  gap: 6px;
}
body.ex-salepage.sp #contents.mitten .list_menu li{
	width: calc(100%/5 - 15px);
	flex: auto;
}
body.ex-salepage.sp .list_menu label{
  height:43px;
}
body.ex-salepage.sp .list_menu label::after{
  bottom:0;
}
body.ex-salepage.sp .list_menu.bottom {
  padding-top: 16px;
  margin-top: 10px;
}
body.ex-salepage.sp .list_menu ul {
  flex-wrap: wrap;
}
body.ex-salepage.sp .list_menu ul li {
  width: 46%;
  margin-bottom: 1%;
}
body.ex-salepage.sp .list_menu ul li a {
  position: relative;
  font-size: 3.6vw;
  line-height: 1.2em;
  padding: 5px 0 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  background: #fff;
	height: 45px;
}
body.ex-salepage.sp .list_menu.bottom ul li a {
  padding: 16px 0 5px;
}
body.ex-salepage.sp .list_menu ul li a:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
body.ex-salepage.sp .list_menu.bottom ul li a:before {
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
body.ex-salepage.sp ul.shoplist_cat ul{
  background: #fff;
  padding: 4px;
}
body.ex-salepage.sp #contents ul.shoplist_cat {
  margin: 3%;
  border: 3px solid #E60012;
  box-sizing: border-box;
  width: auto;
}

body.ex-salepage.sp #contents ul.shoplist_cat ul li{
  width: 100%;
  padding: 16px 0 40px;
  margin: 0 0 10px;
  border-width: 0 0 1px;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li:last-child{
  border: none;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li.cat_ttl {
  padding: 0;
  width: 95%;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li.cat_ttl h3 {
  font-size: 16px;
  padding: 10px 0;
  margin: 0;
}
body.ex-salepage.sp ul.shoplist_cat ul li .detail{
  padding: 0 16px;
}
body.ex-salepage.sp ul.shoplist_cat ul li .shopname {
  width: calc(100% - 110px);
}
body.ex-salepage.sp ul.shoplist_cat ul li .logo {
  text-align: center;
  min-height: auto;
}
body.ex-salepage.sp ul.shoplist_cat ul li .logo img {
  width: auto;
}
body.ex-salepage.sp #contents div.salepage_btn {
  padding: 0;
  margin: 0;
  width: 100%;
}
body.ex-salepage.sp #contents div.salepage_btn #items {
  padding: 10px;
}
body.ex-salepage.sp #contents div.salepage_btn #items .page_btn {
  margin: 0;
  background: #fff;
  border-radius: 8px;
}
body.ex-salepage.sp #contents div.salepage_btn #items .page_btn a {
  padding: 0;
  position: relative;
  line-height: 1.4em;
  padding-top: 12px;
  border-radius: 8px;
  box-sizing: border-box;
}
body.ex-salepage.sp div.salepage_btn .page_btn a::before {
  position: absolute;
  width: 15px;
  height: 8px;
  left: calc(50% - 7px);
  bottom: 8px;
  content: "";
  clip-path: polygon(0% 0%,100% 0%,50% 100%);
  background: #000;
}
body.ex-salepage.sp #contents div.salepage_btn #items .page_btn a br {
  display: block;
}
body.ex-salepage.sp #photoBOX li {
  width: 32%;
  height: 80px;
}
body.ex-salepage.sp #contents div.salepage_btn #items .item p.image,
body.ex-salepage.sp #contents div.salepage_btn #items .page_btn a {
  display: block;
  border-width: 2px;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2rem;
}
body.ex-salepage.sp div.salepage_btn #items .name a {
  padding: 0;
  font-size: 80%;
}
body.ex-salepage.sp .list_menu ul li a br {
  display: none;
}
body.ex-salepage.sp ul.shoplist_cat ul li .shopitem .itemlist {
  justify-content: center;
  padding: 4px 0 10px;
}
body.ex-salepage.sp ul.shoplist_cat ul li .service .shopitem article.item {
  width: calc(100% / 2 - 10px);
  margin: 6px 1% 0;
  display: block;
}
body.ex-salepage.sp ul.shoplist_cat ul li .service .shopitem article.item .icon{
  background: #f00;
    top: -70px;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li .service {
  border: none;
  padding-top: 0;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li .service > img{
  float: none;
  margin: 0 auto 10px;
  width: 80%;
  height: auto;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li:first-child .service {
  padding: 0;
}
body.ex-salepage.sp #contents ul.shoplist_cat ul li .service .text{
  min-height: auto;
}

/* For modern browsers */
.cf:before, .cf:after {}
.cf:after {
  clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
  zoom: 1;
}
/*SE対策*/
@media (max-width:370px) {
  body.ex-salepage.sp .list_menu ul li, body.ex-salepage.sp .list_menu ul li:nth-child(3n) {
    width: 46%;
    margin-right: 1%;
  }
  body.ex-salepage.sp .list_menu ul li:nth-child(2n) {
    margin-right: 0;
  }

}


/*-----------
　タブ切り替え
------------*/

body.ex-salepage #contents .tab-radio {
  display: none;
}
body.ex-salepage #contents .tab-menu:hover {
  opacity: 0.8;
}
body.ex-salepage #contents .shoplist_cat > li{
  display: none;
}

/* ラジオボタンがチェックされたら、コンテンツを表示 */
#contents #tab01:checked ~ .shoplist_cat li.bf1,
#contents #tab02:checked ~ .shoplist_cat li.m1,
#contents #tab03:checked ~ .shoplist_cat li.m2,
#contents #tab04:checked ~ .shoplist_cat li.m3,
#contents #tab05:checked ~ .shoplist_cat li.m4,
#contents #tab06:checked ~ .shoplist_cat li.m5,
#contents #tab07:checked ~ .shoplist_cat li.m6,
#contents #tab08:checked ~ .shoplist_cat li.m7,
#contents #tab09:checked ~ .shoplist_cat li.m8,
#contents #tab10:checked ~ .shoplist_cat li.m9,
#contents #tab02:checked ~ .shoplist_cat li.f1,
#contents #tab03:checked ~ .shoplist_cat li.f2,
#contents #tab04:checked ~ .shoplist_cat li.f3{
  display: block;
}

/* ラジオボタンがチェックされたら、タブの色を変える */
#tab01:checked ~ ul li #tabmenu01 label,
#tab02:checked ~ ul li #tabmenu02 label,
#tab03:checked ~ ul li #tabmenu03 label,
#tab04:checked ~ ul li #tabmenu04 label,
#tab05:checked ~ ul li #tabmenu05 label,
#tab06:checked ~ ul li #tabmenu06 label,
#tab07:checked ~ ul li #tabmenu07 label,
#tab08:checked ~ ul li #tabmenu08 label,
#tab09:checked ~ ul li #tabmenu09 label,
#tab10:checked ~ ul li #tabmenu10 label{
  background:#fff100!important;
}