@charset "UTF-8";

/* セールテンプレートCSS */

/* 全体調整 */

#headcontents,
#category_top,
#category_bottom,
#store_infomation,
#sale_header,
#sale_footer,
#sale_storeheader{
width: 100%;
margin: 0 auto;
}

.contents_body a,
.contents_body a:active,
.contents_body a:hover,
.contents_body a:link,
.contents_body a:visited,
.contents_body a:active, 
.contents_body a:focus {
color: #1d1d1d;
outline: 0;
text-decoration: none;
}

.contents_body a:hover{
opacity: 1;
}

.contents_body *, 
.contents_body *::before, 
.contents_body *::after{
box-sizing: border-box;
}

.contents_body .main_kv, 
.contents_body .sp_kv{
margin: 0 auto;
padding: 0;
}

.contents_body .main_kv img, 
.contents_body .sp_kv img{
width: 100%;
}

.contents_body .main_kv, 
.contents_body .main_kv img{
display: block;
}

.contents_body .sp_kv, 
.contents_body .sp_kv img{
display: none;
}

.contents_body h4{
display: block;
position: relative;
width: 100%;
font-size: 25px;
line-height: 1em;
margin: 0 auto 80px;
color: inherit;
border: inherit;
}

.contents_body h4:before{
content: '';
position: absolute;
left: 0;
bottom: -20px;
display: inline-block;
width: 60px;
height: 2px;
background-color: #1d1d1d;
border-radius: 2px;
}

.contents_body h4 span{
display: block;
font-size: 18px;
line-height: 1em;
margin: 0 auto 0.7em;
}


/* 親イベントCSS */

/* ヘッダー調整 */

#headcontents{
width: 100%;
margin: 0 auto;
}

#headcontents .main_title{
margin: 0 auto 0;
font-size: 40px;
font-weight: 900;
line-height: 1.8em;
text-align: center;
}

#headcontents .main_title h3{
font-size: 40px;
line-height: 1.2em;
margin: 80px auto 0;
color: inherit;
border: inherit;
}

#headcontents .main_title .period{
margin: 0.5em auto 0;
font-size: 30px;
line-height: 1.2em;
}

#headcontents .main_caption{
padding: 40px 2.5%;
background: #f7f7f7;
}

#headcontents .main_caption h3{
margin: 0;
}

#headcontents .date{
margin: 40px auto 0;
}

#headcontents .date dt{
display: table-cell;
width: auto;
white-space: wrap;
min-width: 130px;
padding: 5px 4px;
text-align: center;
background: #fff;
vertical-align: middle;
}

#headcontents .date dd{
display: table-cell;
width: 100%;
padding: 5px 0 5px 10px;
}


/* カテゴリリンク */

#headcontents .search_box5{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 80px 2.5%;
margin: 80px auto 0;
border: 1px solid;
word-break: break-word;
}

#headcontents .search_box6,
#headcontents .search_box8{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 80px 2.5%;
margin: 80px auto 0;
border: 1px solid;
word-break: break-word;
}

#headcontents .search_box5 div,
#headcontents .search_box6 div,
#headcontents .search_box8 div{
width: 100%;
font-size: 20px;
line-height: 1em;
margin: 0 auto 30px;
}

#headcontents .search_box5 li{
width: 18%;
}

#headcontents .search_box6 li{
width: 31.6%;
}

#headcontents .search_box8 li{
width: 23.5%;
}

#headcontents .search_box6 li:nth-child(n+5){
margin-top: 2.6%;
}

#headcontents .search_box8 li:nth-child(n+6){
margin-top: 2%;
}

#headcontents .search_box5 li a,
#headcontents .search_box6 li a{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
border: 1px solid #1d1d1d;
border-radius: 5px;
height: 100%;
font-size: 14px;
line-height: 1.5em;
padding: 0.8em 2em 0.8em 1em;
position: relative;
z-index: 0;
background: #1d1d1d;
}

#headcontents .search_box8 li a{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
border: 1px solid #1d1d1d;
border-radius: 5px;
height: 100%;
font-size: 12px;
line-height: 1.5em;
padding: 0.8em 1.6em 0.8em 0.8em;
position: relative;
z-index: 0;
background: #1d1d1d;
}

#headcontents .search_box5 li a:before,
#headcontents .search_box6 li a:before,
#headcontents .search_box8 li a:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 0;
display: block;
background: #fff;
transition: 0.25s;
left: 0;
border-radius: 4px;
}

#headcontents .search_box5 li a:after,
#headcontents .search_box6 li a:after{
position: absolute;
top: 50%;
right: 1em;
content:'\f107';
font-family: 'Font Awesome 6 Free';
font-size: 12px;
font-weight: 900;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transition: 0.05s;
}

#headcontents .search_box8 li a:after{
position: absolute;
top: 50%;
right: 1em;
content:'\f107';
font-family: 'Font Awesome 6 Free';
font-size: 10px;
font-weight: 900;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transition: 0.05s;
}

#headcontents .search_box5 li a:hover,
#headcontents .search_box6 li a:hover,
#headcontents .search_box8 li a:hover{
color: #1d1d1d;
}

#headcontents .search_box5 li a:hover:before,
#headcontents .search_box6 li a:hover:before,
#headcontents .search_box8 li a:hover:before{
height: 100%;
z-index: -1;
}

#headcontents .search_box5 li a:hover:after,
#headcontents .search_box6 li a:hover:after,
#headcontents .search_box8 li a:hover:after{
color: #1d1d1d;
}


@media only screen and (max-device-width: 999px) {


/* 全体調整 */

.contents_body h4{
font-size: min(2rem, 30px);
text-align: center;
}

.contents_body h4 span{
font-size: min(1.2rem, 20px);
}

.contents_body h4:before{
width: 2em;
left: 50%;
transform: translateX(-50%);
}

.block-top-event--section{
margin: 80px 0;
}


/* SPヘッダー調整 */

#headcontents .main_title{
line-height: 1.8em;
text-align: center;
}

#headcontents .main_title h3{
font-size: min(2rem, 40px);
}

#headcontents .main_title .period{
font-size: min(1.6rem, 30px);
}


/* SPカテゴリリンク */

#headcontents .search_box5 div,
#headcontents .search_box6 div,
#headcontents .search_box8 div{
text-align: center;
}

#headcontents .search_box5 li{
width: 18%;
}

#headcontents .search_box5 li a{
font-size: min(0.8rem, 12px);
}

#headcontents .search_box5 li a:after{
right: 0.7em;
font-size: min(0.8rem, 12px);
}

#headcontents .search_box5 div{
font-size: min(1.5rem, 20px);
}


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


/* SP_Sカテゴリリンク */

#headcontents .search_box5:after {
display: block;
content:"";
width: 30%;
}

#headcontents .search_box5 li{
width: 30%;
}

#headcontents .search_box5 li:nth-child(n+5){
margin-top: 2.5%;
}
}


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


/* SP_S全体調整 */

.contents_body h4{
margin: 0 auto 50px;
}

#headcontents .main_kv, 
#headcontents .main_kv img{
display: none;
}

#headcontents .sp_kv, 
#headcontents .sp_kv img{
display: block;
}

#headcontents .main_caption{
padding: 25px 4%;
}

#headcontents .date{
margin: 25px auto 0;
}

.block-top-event--section{
margin: 50px 0;
}


/* SP_Sヘッダー調整 */

#headcontents{
padding: 50px 0 0;
}

#headcontents .main_title h3{
font-size: min(3rem, 28px);
}

#headcontents .main_title .period{
font-size: min(2.5rem, 22px);
}


/* SP_Sカテゴリリンク */

#headcontents .search_box5,
#headcontents .search_box6,
#headcontents .search_box8{
justify-content: space-between;
flex-wrap: wrap;
padding: 25px 20px;
}

#headcontents .search_box5:after{
width: calc(50% - 5px);
}

#headcontents .search_box5 div,
#headcontents .search_box6 div,
#headcontents .search_box8 div{
margin: 0 auto 25px;
}

#headcontents .search_box5 li,
#headcontents .search_box6 li,
#headcontents .search_box8 li{
width: 48%;
}

#headcontents .search_box5 li:nth-child(n+4),
#headcontents .search_box6 li:nth-child(n+4),
#headcontents .search_box8 li:nth-child(n+4){
margin-top: 4%;
}

#headcontents .search_box5 li a,
#headcontents .search_box6 li a,
#headcontents .search_box8 li a{
font-size: 12px;
min-height: 5em;
}
}

}



/* 子イベントCSS */

/* カテゴリフッター調整 */

#category_bottom .saleitem_link{
font-size: 20px;
line-height: 1em;
text-align: center;
margin: 0 auto;
padding: 0 0 80px;
border-bottom: 2px solid #ddd;
}

#category_bottom .saleitem_link a{
position: relative;
display: inline-block;
margin: 0 auto;
padding: 1em 2.5em 1em 2em;
z-index: 0;
border: 1px solid #1d1d1d;
border-radius: 9999px;
overflow: hidden;
}

#category_bottom .saleitem_link a span{
display: block;
margin: 0 auto 0.5em;
font-size: 16px;
line-height: 1em;
}

#category_bottom .saleitem_link a:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
display: block;
background: #1d1d1d;
transition: 0.25s;
left: 0;
}

#category_bottom .saleitem_link a:after{
position: absolute;
top: 50%;
right: 1em;
content:'\f105';
font-family: 'Font Awesome 6 Free';
font-size: 14px;
font-weight: 900;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transition: 0.05s;
}

#category_bottom .saleitem_link a:hover{
color: #fff;
}

#category_bottom .saleitem_link a:hover:before{
width: 100%;
z-index: -1;
}

#category_bottom .saleitem_link a:hover:after{
color: #fff;
}

#category_bottom .saleitem_link.main_link{
margin: 40px auto 0;
padding: 0;
border: none;
}

#category_bottom .saleitem_link.no_border{
border: none;
}


/* 店舗インフォ */

#store_infomation{
width: 100%;
margin: 0 auto;
padding: 80px 0;
background: var(--sub-color);
}

#store_infomation a{
color: #1d1d1d;
}

#store_infomation h4{
margin: 0 auto;
text-align: center;
}

#store_infomation h4:before{
background-color: #1d1d1d;
left: 50%;
transform: translateX(-50%);
}

#store_infomation .store_link_contents{
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 4%;
}

#store_infomation .store_link_contents li{
width: calc(100% / 3);
margin: 70px 0 0;
padding: 0 5%;
}

#store_infomation .store_link_contents li img{
display: block;
width: 100%;
max-width: 150px;
margin: 0 auto;
}

#store_infomation .store_link_contents li .store_contents{
width: 100%;
margin: 0 auto;
font-size: 18px;
line-height: 1.5em;
font-weight: bold;
}

#store_infomation .store_link_contents li .store_contents span{
display: inline-block;
font-size: 13px;
font-weight: normal;
line-height: 1.5em;
}

#store_infomation .store_link_contents li .store_contents p{
text-align: center;
margin: 5px auto 0;
}


@media only screen and (max-device-width: 999px) {


/* SPカテゴリフッター調整 */

#category_bottom .saleitem_link{
font-size: min(1.4rem, 20px);
margin: 3rem auto 0;
}

#category_bottom .saleitem_link a span{
font-size: min(1rem, 16px);
}

#category_bottom .saleitem_link a{
color: #fff;
background: #1d1d1d;
}

#category_bottom .saleitem_link a:before{
background: #fff;
}

#category_bottom .saleitem_link a:after{
font-size: min(1rem, 14px);
}

#category_bottom .saleitem_link a:hover, 
#category_bottom .saleitem_link a:hover:after{
color: #1d1d1d;
}


/* SP店舗インフォ */

#store_infomation .store_link_contents li{
padding: 0 1%;
}

#store_infomation .store_link_contents li img{
width: 70%;
max-width: 140px;
}

#store_infomation .store_link_contents li .store_contents{
font-size: min(1rem, 18px);
}

#store_infomation .store_link_contents li .store_contents span{
font-size: min(0.7rem, 13px);
}


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


/* SP_Sカテゴリフッター調整 */

#category_bottom .saleitem_link{
font-size: 16px;
padding: 0 0 50px;
}

#category_bottom .saleitem_link a{
padding: 0.8em 1.6em 0.8em 1.6em;
}

#category_bottom .saleitem_link a span{
font-size: 12px;
margin: 0 auto 0.6em;
}

#category_bottom .saleitem_link.main_link {
margin: 25px auto 0;
}

/* SP_S店舗インフォ */

#store_infomation{
padding: 50px 4%;
}

#store_infomation .store_link_contents{
justify-content: space-between;
}

#store_infomation .store_link_contents li{
width: 46%;
margin: 40px 0 0;
padding: 0;
}

#store_infomation .store_link_contents li .store_contents{
font-size: min(1.4rem, 18px);
}

#store_infomation .store_link_contents li .store_contents span{
font-size: min(0.9rem, 13px);
}
}

}




/* 子イベントページCSS */

/* ヘッダー調整 */

.block-goods-list--pager-top.pager,
.block-goods-list-naviframe--top.pager{
margin-top: 0;
}

#sale_header{
width: 100%; 
}

#sale_header a, #sale_header a:active, #sale_header a:hover, #sale_header a:link, #sale_header a:visited, #sale_header a:active, #sale_header a:focus{
outline: 0;
text-decoration: none;
}

#sale_header *, #sale_header *::before, #sale_header *::after{
box-sizing: border-box;
}

#sale_header .saleheader_image img{
width: 100%; 
}

#sale_header .saleheader_image img.pc_mv{
display: block;
}

#sale_header .saleheader_image img.sp_mv{
display: none;
}

#sale_header .saleheader_image a{
transition: 0.25s;
}

#sale_header .saleheader_image a:hover{
opacity: 0.8;
}

#sale_header .salecategory_box{
padding: 20px 10px 0;
}

#sale_header .box_border{
padding: 0 10px;
background-color: #f7f7f7;
}

#sale_header .box_border span{
width: 100%;
display: block;
height: 20px;
border-bottom: 1px solid #bbb;
}


/* フッター調整 */

.block-goods-list--pager-bottom.pager,
.block-goods-list-naviframe--bottom.pager,
.block-event-page--goods{
margin-bottom: 0;
}

#sale_footer{
width: 100%;
}

#sale_footer a, #sale_footer a:active, #sale_footer a:hover, #sale_footer a:link, #sale_footer a:visited, #sale_footer a:active, #sale_footer a:focus{
outline: 0;
text-decoration: none;
}

#sale_footer *, #sale_footer *::before, #sale_footer *::after{
box-sizing: border-box;
}

#sale_footer .salecategory_box{
padding: 10px 10px 20px;
}

#sale_footer .button_title{
width: 100%;
margin: 0 auto;
padding: 20px 0;
color: #1d1d1d;
font-size: 20px;
font-weight: bold;
line-height: 1em;
border-top: 1px solid #bbb;
}


/* 共通項目調整 */

.salecategory_box{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none ;
background-color: #f7f7f7;
}

.salecategory_box.four-col li{
width: 23.5%;
margin-right: 2%;
}

.salecategory_box.five-col li{
width: 18.8%;
margin-right: 1.5%;
}

.salecategory_box.six-col li{
width: 16%;
margin-right: 0.8%;
}

#sale_header .salecategory_box.four-col li:nth-child(n+5),
#sale_header .salecategory_box.six-col li:nth-child(n+7){
margin-top: 2%;
}

#sale_header .salecategory_box.five-col li:nth-child(n+6){
margin-top: 1.5%;
}

#sale_header .salecategory_box.four-col li:nth-child(4n),
#sale_header .salecategory_box.five-col li:nth-child(5n),
#sale_header .salecategory_box.six-col li:nth-child(6n){
margin-right: 0;
}

#sale_footer .salecategory_box.four-col li:nth-child(n+6),
#sale_footer .salecategory_box.five-col li:nth-child(n+7),
#sale_footer .salecategory_box.six-col li:nth-child(n+8){
margin-top: 2%;
}

#sale_footer .salecategory_box.four-col li:nth-child(5n),
#sale_footer .salecategory_box.five-col li:nth-child(6n),
#sale_footer .salecategory_box.six-col li:nth-child(7n){
margin-right: 0;
}

.salecategory_box li a{
display: block;
width: 100%;
height: 100%;
color: #4a453a;
border: 1px solid #4a453a;
border-radius: 6px;
font-size: 10px;
font-weight: bold;
position: relative;
transition: 0.25s;
padding: 0.8em 1.6em;
}

.salecategory_box li a.active{
color: #fff;
background: #1d1d1d;
border-color: #1d1d1d;
}

.salecategory_box li a:hover,
.salecategory_box li a:hover.active{
color: #fff;
background: #4a453a;
border-color: #4a453a;
}

.salecategory_box li a.active:after{
content: none;
}

.salecategory_box li a:after{
position: absolute;
top: 50%;
right: 0.5em;
content: '\f105';
font-family: 'Font Awesome 6 Free';
font-size: 12px;
font-weight: 900;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

.salecategory_box li a .category_name{
width: 100%;
margin: 1em auto 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.salecategory_box li a .category_icon{
display: block;
width: 20%;
aspect-ratio: 1 / 1;
margin: 0 auto;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: 0.25s;
}

.salecategory_box li a .ag{
background-image: url('../../../../features/sale/blackicon_ag.png');
}

.salecategory_box li a .eg{
background-image: url('../../../../features/sale/blackicon_eg.png');
}

.salecategory_box li a .ba{
background-image: url('../../../../features/sale/blackicon_ba.png');
}

.salecategory_box li a .ef{
background-image: url('../../../../features/sale/blackicon_ef.png');
}

.salecategory_box li a .dr{
background-image: url('../../../../features/sale/blackicon_dr.png');
}

.salecategory_box li a .wd{
background-image: url('../../../../features/sale/blackicon_wd.png');
}

.salecategory_box li a .dg{
background-image: url('../../../../features/sale/blackicon_dj.png');
}

.salecategory_box li a .pa{
background-image: url('../../../../features/sale/blackicon_pa.png');
}

.salecategory_box li a .ac{
background-image: url('../../../../features/sale/blackicon_ac.png');
}

.salecategory_box li a .other{
background-image: url('../../../../features/sale/blackicon_other.png');
}

.salecategory_box li a:hover .ag,
.salecategory_box li a.active .ag{
background-image: url('../../../../features/sale/whiteicon_ag.png');
}

.salecategory_box li a:hover .eg,
.salecategory_box li a.active .eg{
background-image: url('../../../../features/sale/whiteicon_eg.png');
}

.salecategory_box li a:hover .ba,
.salecategory_box li a.active .ba{
background-image: url('../../../../features/sale/whiteicon_ba.png');
}

.salecategory_box li a:hover .ef,
.salecategory_box li a.active .ef{
background-image: url('../../../../features/sale/whiteicon_ef.png');
}

.salecategory_box li a:hover .dr,
.salecategory_box li a.active .dr{
background-image: url('../../../../features/sale/whiteicon_dr.png');
}

.salecategory_box li a:hover .wd,
.salecategory_box li a.active .wd{
background-image: url('../../../../features/sale/whiteicon_wd.png');
}

.salecategory_box li a:hover .dg,
.salecategory_box li a.active .dg{
background-image: url('../../../../features/sale/whiteicon_dj.png');
}

.salecategory_box li a:hover .pa,
.salecategory_box li a.active .pa{
background-image: url('../../../../features/sale/whiteicon_pa.png');
}

.salecategory_box li a:hover .ac,
.salecategory_box li a.active .ac{
background-image: url('../../../../features/sale/whiteicon_ac.png');
}

.salecategory_box li a:hover .other,
.salecategory_box li a.active .other{
background-image: url('../../../../features/sale/whiteicon_other.png');
}


@media only screen and (max-device-width: 999px) {
@media only screen and (max-width: 800px) {


/* SPフッター調整 */

#sale_footer .button_title{
font-size: min(1.5rem, 17px);
}


/* SP共通項目調整 */

.salecategory_box li a,
.salecategory_box li a:after{
font-size: min(0.8rem, 10px);
}

.salecategory_box li a .category_name{
margin: 0.5em auto 0;
}
}


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


/* SP_S共通項目調整 */

.salecategory_box{
justify-content: space-between;
}

.salecategory_box.five-col li,
.salecategory_box.six-col li{
width: 32%;
margin: 0;
}

.salecategory_box.eight-col li{
width: 23.5%;
}

.salecategory_box.five-col li:nth-of-type(n+4),
.salecategory_box.five-col li:nth-of-type(n+4),
.salecategory_box.six-col li:nth-of-type(n+4){
margin-top: 2%;
}

.salecategory_box li a .category_icon{
width: 25%;
}

.salecategory_box.eight-col li a .category_name{
min-height: 3em;
}
}


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


#sale_header .saleheader_image img.pc_mv{
display: none;
}

#sale_header .saleheader_image img.sp_mv{
display: block;
}
}

}




/* 店舗イベントCSS */

/* 店舗ヘッダー調整 */

#sale_storeheader .saleheader_image img.pc_mv{
display: block;
margin: 0 auto 20px;
}

#sale_storeheader .saleheader_image img.sp_mv{
display: none;
}


@media only screen and (max-device-width: 999px) {
@media only screen and (max-width: 500px) {


#sale_storeheader .saleheader_image img.pc_mv{
display: none;
}

#sale_storeheader .saleheader_image img.sp_mv{
display: block;
margin: 0 auto 2rem;
}
}

}