@charset "utf-8";
:where(.main_wrap),:where(.main_wrap) :where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){
	all: unset;
	display: revert;
	line-height: 1em;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: .06em;
	font-weight: 400;
	box-sizing: border-box;
}
.sp_only{
	display: none;
}
:where(.main_wrap) *{
	font-size: 10px;
}
.main_wrap a{
	cursor: pointer;
}
:root{
	--width: 1200px;
	--padding: 80px;
	--shadow: drop-shadow(0 0 .7em rgba(164,164,164,.3));
}

/* メニュー */
.navigation{
	width: 100%;
	height: 8em;
	background: #000;}
.navigation ul{
		display: flex;
		padding: 1.4em calc(50% - var(--width)/2);
		height: 100%;
		background-color: #878787;
		justify-content: center;
	}
.navigation li{
		width: calc(100%/3);
		display: flex;
		border-left: 1px solid #fff;
	}
.navigation li:last-child{
		border-right: 1px solid #fff;
	}
.navigation a{
		width: 100%;
		height: 100%;
		font-size: 2.4em;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

.navigation.active ul{
	width: 100%;
	height: 8em;
	position: fixed;
	top: 0;
	background: #878787;
	z-index: 50;
}

/* タイトル */
.item, .sale{
	margin: auto;
	max-width: 1200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
	/* background-color: #272727; */
	margin-bottom: 100px;
}
.item h3, .sale h3{
		font-size: 4.5em;
		font-weight: 700;
		text-align: center;
		padding: 0 0 0.3em 0;
		color: #fff;
	}

.item h4, .sale h4{
		margin: 2em 0 4em;}
		
.item h4 img, .sale h4 img{
			width: auto;
			height: 7.1em;
			margin: auto;
			display: block;
		}


/* おすすめアイテムリスト */
.osusume .list{
		gap: 4em;
		overflow-x: scroll;
		overflow-y: hidden;
		scrollbar-color: #dadada rgba(0,0,0,0);
    	scrollbar-width: thin;
		margin: 0 auto 100px;
		padding-bottom: 40px;
	
	}
		
.osusume .list li{
			min-width: 29em;
			filter: var(--shadow);
		}


/* SALEアイテムリスト */

.sale .list{
		gap: 4em calc(10%/3);
		flex-wrap: wrap;}
.sale .list li{
		width: 22.5%;}
.sale .list li a{
		border-radius: 10px;
			}


/* アイテムリスト */
.list{
	display: flex;}
	
.list li{
		position: relative;}
		
.list li a{
			/* height: 100%; */
			padding: 1em 1em 2em;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			border-radius: 10px;
		}
.list li .genre{
			padding: .2em .5em;
			font-size: 1.6em;
			font-weight: 700;
			color: #fff;
			background: #ffc600;
			position: absolute;
			top: .625em;
			right: .625em;
		}
.list li .off{
			width: 4.238em;
			aspect-ratio: 1/1;
			background: url(../img/off_icon.png) no-repeat center/contain;
			font-size: 2.1em;
			font-weight: 700;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
			top: -1.14em;
			left: -.76em;
			color: #fff;}
			
.list li .off > span{
				font-size: 1em;
				font-weight: 700;}
				
.list li .off > span span{
					font-size: 1.4em;
					font-weight: 700;
					letter-spacing: -.02em;
				}

.list li img{
			width: 100%;
			display: block;
			margin: 0 0 2em;
		}
.list li .name{
			margin: 0 0 .5em;
			font-size: 1.6em;
			font-weight: 700;
			line-height: 1.3em;
		}
.list li .about{
			margin: 0 0 .8em;
			font-size: 1.2em;
			line-height: 1.5em;
			font-weight: 400;
		}
.list li .common{
			font-size: 1.4em;
			margin: auto 0 1em;
			font-weight: 700;
			display: inline-block;
			position: relative;
			color: #777;		
		}

			
.list li .common::after{
				content: '';
				width: 110%;
				height: 1px;
				background: #777;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%,-50%,0) rotate(-4deg);
			}

.list li strong{
			font-size: 2.6em;
			margin: 0;
			color: #e93330;
			font-weight: 700;
			letter-spacing: 0;}
			
.list li strong small{
				font-size: 0.6em;
				font-weight: 600;
				letter-spacing: 0;
			}

.list li .tag{
			font-size: 2.2em;
			margin: 0 0 10px;
			padding: .2em .5em .4em;
			font-weight: 700;
			background: #e93330;
			color: #fff;

		}
.list li .link{
			width: 13.875em;
			margin: .8em auto 0;
			font-size: 1.6em;
			font-weight: 700;
			background: #000007;
			color: #fff	;
			aspect-ratio: 222/40;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 2em;
		}


/* 絞り込み */
.shiborikomi{
	margin: 0 0 8em;}
	
.shiborikomi strong{
		margin: 0 0 1.5em;
		font-size: 2em;
		font-weight: 600;
		text-align: center;
		display: block;
		color: #fff;
	}
		
		
.shiborikomi strong::before{
			content: '▼';
			padding: 0 0.5em 0 0;
		}

.shiborikomi strong::after {
	content: '▼';
	padding: 0 0 0 0.5em;
}


.shiborikomi .btn{
		display: flex;
		flex-wrap: wrap;
		gap: 1em 1%;}
		
.shiborikomi .btn li{
			width: 19.2%;
		}
			
.shiborikomi .btn li button{
				width: 100%;
				aspect-ratio: 224/54;
				font-size: 1.6em;
				font-weight: 600;
				color: #fff;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ffffff;
			}

.shiborikomi .btn li button:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transition: all .25s ease;
}

.shiborikomi .btn li .active{
				background: #fff;}
				
.shiborikomi .btn li .active button{
					color: #000;
				}


/* 全アイテムを見る */
.more{
	background: #878787;
	padding: var(--padding) calc(50% - var(--width)/2);}
	
.more a{
		font-size: 2.4em;
		aspect-ratio: 1200/70;
		color: #fff;
		border: 1px solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;}
		
.more a::before{
			content: '';
			width: 1.4em;
			height: 1px;
			background: #fff;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: .8em;
		}
		
.more a::after{
			content: '';
			width: .4em;
			height: 1px;
			background: #fff;
			position: absolute;
			top: 50%;
			transform: translateY(-50%) rotate(30deg);
			transform-origin: 100% 0;
			right: .8em;

		}

.attention{
	text-align: center;
    font-size: 1.3em;
    padding: 20px;
    border: 3px solid #ff2490;
    max-width: 1200px;
    margin: 50px auto 0;
    color: #ff2490;
    font-weight: 700;
    line-height: 1.5;
}

.cpcode{
	text-align: center;
	display: block;
	margin: 0 auto;
	max-width: 1000px;
	justify-content: center;
}

.cpattention2{

	text-align: center;
    font-size: 1.3em;
    margin:0 0 60px 0;
    color: #000007;
    line-height: 1.5;
	max-width: 1000px;
	width: 100%;

}

.image-container {
    position: relative; /* 親要素の位置を基準にするためにrelativeを指定 */
    display: inline-block; /* コンテナの幅を画像に合わせる */
	width: 100%;
    display: block;
}
.background-image {
    width: 100%; /* 画像をレスポンシブにする */
    height: auto;
}


.banabotan{
	margin: 1em auto;
	width: 100%;
    text-align: center;
}

.banacp{
	margin: 20px auto;
}
  .spdannraku{
	display: none;
}

.margin30{
	margin-top:30px;
}


@media screen and (max-width:1240px) {
	:where(.main_wrap) *{
		font-size: .82vw;
	}
	:root{
		--width: 92%;
		--padding: 6.4vw;
	}
}

@media screen and (max-width:768px) {
	:where(.main_wrap) *{
		font-size: 2.6666vw;
	}
	:root{
		--padding: 8vw;
	}

	.item h3 span{
		font-size: 20px;
		font-weight: 700;
			text-align: left;
	}
	
	.sale h3 span{
		font-size: 20px;
		font-weight: 700;
			text-align: left;
	}

.navigation{
		height: 6em;}

.navigation li:first-child{
				border-left: none;
			}
.navigation li:last-child{
				border-right: none;
			}

.navigation a{
			font-size: 1.6em;
			letter-spacing: 0;
		}

.navigation.active ul{
		height: 6em;
	}

.item h3,.sale h3{
			font-size: 2.8em;
		}

.item h4 img,.sale h4 img{
				height: 5em;
			}


.osusume .list{
			gap: 2em;
		}
			
.osusume .list li{
				min-width: 20em;
			}

.osusume2 .list{ 
	overflow-x: scroll;
		overflow-y: hidden;
				gap: 2em;}
				
.osusume2 .list li{
					min-width: 20em;
				}			

.sale .list{
			gap: 2em 2%;}
			
.sale .list li{
				width: 49%;}
				
.sale .list li .off{
					font-size: 1.6em;
				}
.sale .list li a{
					padding: 1em 1em 1.3em 1em;
				}


.list li .name{
				font-size: 12px;
				letter-spacing: 0;
			}
.list li .common{
				font-size: 12px;
				margin: auto 0 .8em;
			}
.list li .about{
				font-size: 1em;
				letter-spacing: 0;
			}
.list li .tag{
				font-size: 1.6em;
				padding: .2em .5em;
			}
.list li strong{
				font-size: 20px;
                font-weight: bold;
                color: #ff0e0a;
			}
.list li .link{
				width: 100%;
				font-size: 1.2em;
			}



.shiborikomi strong{
			font-size: 1.8em;
		}
.shiborikomi .btn{
			gap: 1em 2%;}
.shiborikomi .btn li{
				width: 49%;}
.shiborikomi .btn li button{
					font-size: 1.4em;
				}

.more a{
			font-size: 1.8em;
			aspect-ratio: 1200/180;
		}


.attention{
    font-size: 1em;
    padding: 20px 10px;
    line-height: 1.5;
    width: 95%;
}

.image-container {
    position: relative; /* 親要素の位置を基準にするためにrelativeを指定 */
    display: inline-block; /* コンテナの幅を画像に合わせる */
}
.background-image {
    width: 100%; /* 画像をレスポンシブにする */
    height: auto;
}

.cpattention2{

	text-align: center;
    font-size: 1.3em;
    margin:0 0 30px 0;
    color: #000007;
    line-height: 1.5;
	max-width: 1000px;
	width: 100%;

}

.shiborikomi{
	margin: 0 0 5em;}

.spdannraku{
	display: block;
}
}

.main_wrap {
    background-image: url("../img/bgimage.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
	background-color: #272727;
}

.loop-text {
	width: 100%;
	overflow: hidden;
	/* background: #272727; */
	padding: 10px 0;
}
  
  .loop-text__inner {
	display: inline-block;
    white-space: nowrap;
    color: #4d4d4d;
    font-size: 120px;
    font-weight: 900;
    letter-spacing: 0.1em;
    animation: loopText 26s linear infinite;
	letter-spacing: 8.5px;
	margin-bottom: 50px;
  }
  
  @keyframes loopText {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-50%);
	}
  }

  @media screen and (max-width: 768px) {
	.loop-text__inner {
		font-size: 88px;
        animation-duration: 20s;
		margin-bottom: 30px;
	}
  }

.bf-ribbon {
	position: relative;
	padding: 14px 48px;
	font-size: 28px;
	font-weight: 700;
	background: #ffea01;
	color: #282627;
	line-height: 1;
	margin: 0 auto 60px;
	width: 60%;
    display: flex;
    justify-content: center;
  }

  .bf-ribbon02 {
	position: relative;
	padding: 14px 48px;
	font-size: 28px;
	font-weight: 700;
	background: #ffea01;
	color: #282627;
	line-height: 1;
	margin: 0 auto 60px;
	width: 56%;
    display: flex;
    justify-content: center;
  }
  
  .bf-ribbon::before {
	content: "";
	position: absolute;
	right:0;
	top: 0;
	width: 0;
	height: 0;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
	border-right: 6px solid #272727;
	transform: skewX(0deg); /* ← 画像と同じ角度 */
  }

  .bf-ribbon02::before {
	content: "";
	position: absolute;
	right:0;
	top: 0;
	width: 0;
	height: 0;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
	border-right: 6px solid #272727;
	transform: skewX(0deg); /* ← 画像と同じ角度 */
  }
  
  /* 右の内向き三角（忠実） */
  .bf-ribbon::after {
	content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 6px solid #272727;
    transform: skewX(0deg);
  }

  .bf-ribbon02::after {
	content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 6px solid #272727;
    transform: skewX(0deg);
  }

.image-container picture,
.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.tokubai-section {
    position: relative;
    padding: 100px 0 140px;
    background: #111;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.tokubai-inner {
    position: relative;
    z-index: 2;
    max-width: 740px;
    margin: 0 auto;
}


.line-right {
    transform: rotate(35deg);
}


/* ボックス */
.tokubai-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px 20px;
    border-bottom: 1px solid #fff;
    position: relative;
}

.tokubai-box .label {
    width: 110px;
    text-align: center;
    font-size: 20px;
    padding: 10px 20px;
    border: 1px solid #fff;
    font-weight: 600;
}

.tokubai-box .period {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}


.end-badge {
    position: absolute;
    right: 40%;
    background: #ff1f1f;
    color: #fff;
    padding: 10px 42px;
    font-size: 20px;
    font-weight: 700;
	bottom: 10.5vh;
    transform: rotate(-8deg);
}

@media screen and (max-width: 768px) {
    .tokubai-title {
        font-size: 32px;
    }
    .tokubai-box {
        flex-direction: column;
        gap: 12px;
    }
    .end-badge {
        right: 34%;
        bottom: 59%;
    }
}


.triangle-bottom {
    position: relative;
    background: #111;
    padding: 100px 0 180px;
}

.triangle-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.tokubai-box {
    border-bottom: none !important;
}

.tokubai-section {
    position: relative;
    padding-bottom: 60px;
}

.tokubai-section::before {
    content: "";
    position: absolute;
    bottom: 142px;
    left: 49.5%;
    transform: translateX(-50%);
    width: 75vh;
    height: 1px;
    background: #fff;
}


.sale-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 30px;
    align-items: center;
    max-width: 750px;
    margin: 80px auto 40px;
}

.sale-card__img {
    flex: 0 0 50%;
}
.sale-card__img img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sale-card__info {
    flex: 1;
}

.sale-card__info .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
	letter-spacing: 1.6px;
	line-height: 1.2;
}

.sale-card__info .tags {
    text-align: left;
    gap: 10px;
    margin-bottom: 25px;
	display: ruby-text;
}
.sale-card__info .tags span {
    border: 1px solid #000;
    padding: 4px 10px;
    font-size: 10px;
}

.sale-card__info .size {
    font-size: 14px;
    margin-bottom: 20px;
}

.price-old {
    font-size: 14px;
    text-decoration: line-through;
    color: #777;
	margin: 25px 0 10px 0;
}
.price-new {
    font-size: 28px;
    font-weight:900;
    color: #ff0e0a;
}
.price-new span {
    font-size: 18px;
    font-weight: 700;
}

/* ボタン */
.buy-btn {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-size: 16px;
    padding: 14px 28px;
    margin-top: 25px;
	width: 80%;
    text-align: center;
	border: solid 1px #c00;
}

@media screen and (max-width: 768px) {
    .sale-card {
        flex-direction: column;
        padding: 24px;
        gap: 20px;
    }

    .sale-card__img {
        width: 100%;
        flex: none;
    }

    .sale-card__info .title {
        font-size: 12px;
        margin: 5px auto 0;
        font-weight: 700;
        line-height: 1.3em;
    }

    .price-new {
        font-size: 20px;
    }
}

.medama{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 120px 0 60px;
}

/* .medama::before{
	content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 60px;
    transform: translateX(-50%);
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background-color: #111;
    z-index: 0;
} */

.titleimage{
	max-width: 100%;
	margin:0 auto 60px;
    text-align: center;
}

.sale-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 34%;
    transform: translate(1%, -35%);
}

.sale-card__badge img {
    width: 100%;
    height: auto;
    display: block;
}

.sale-card__badge .num {
    position: absolute;
    top: 24%;
	letter-spacing: 1.5px;
    left: 0;
    width: 100%;
    font-size: 48px;
    font-weight: 700;
    color: #f7ff00;
    text-align: center;
    line-height: 1;
}

.sale-card__badge .off {
    position: absolute;
    bottom: -2%;
    left: 0;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

@media screen and (max-width: 768px) {
    .sale-card__badge {
        width: 44%;
        height: 70px;
        transform: translate(0%, -62%);
    }

    .sale-card__badge .num {
        font-size: 40px;
        top: 11px;
    }

    .sale-card__badge .off {
        font-size: 14px;
        bottom: 11px;
    }

    .price-new span {
    font-size: 14px;
    }
}

.buy-btn {
    position: relative;
    padding-right: 36px; /* 三角のスペースを確保 */
}

.buy-btn::after {
    content: "＞";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight:normal;
    color: #fff;
}


.buy-btn:hover {
    background: #ffffff;
    border: solid 1px #c00;
	color: #c00;
}


.sale-card__img a.sale-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.sale-card__img a.sale-card__img-link img {
    width: 100%;
    height: auto;
    display: block;
}


   .image-container {
    position: relative;
}

.kv-badge {
    position: absolute;
    top: 12%;
    right: 16%;
    width: 14%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kv-badge img {
    width: 100%;
    height: auto;
}

.kv-badge .kv-num {
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 690%;
	font-weight: 800;
	color: #f7ff00;
	letter-spacing: 1px;

}

.kv-badge .kv-off {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.pcnone{
	display: none;
}

@media (max-width: 768px) {
    .kv-badge {
        top:6%;
        right: 4%;
        width: 30%;
    }
    .kv-badge .kv-num {
        font-size: 386%;
    }
    .kv-badge .kv-off {
        font-size: 12px;
    }
}

.smalltxt{
	font-size: 0.6em;
}
@media (max-width: 768px) {

.tokubai-box .period {
    font-size: 185%;
    font-weight: 700;
    text-align: center;
	line-height: 1.6;
}

.tokubai-box .label {
    width: 140px;
    text-align: center;
    font-size: 20px;
    padding: 10px 20px;
    border: 1px solid #fff;
    font-weight: 600;
	margin-bottom: 10px;
}

.tokubai-section {
    padding-bottom: 15px;
}

.tokubai-section::before {
    display: none;
}

.medama::before{
	height: 30px;
}

.item, .sale {
    padding:0 15px;
}

.medama {
    padding:80px 15px 30px;
	
}

.bf-ribbon {
    position: relative;
    padding: 14px 48px;
    font-size: 26px;
    font-weight: 700;
    background: #ffea01;
    color: #282627;
    line-height: 1;
    margin: 0 auto 60px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bf-ribbon02 {
    padding: 10px 32px;
    font-size: 24px;
    margin: 0 auto 50px;
    width: 90%;
	text-align: center;
	line-height: 1.3;

}

.sale-card__info {
    flex: 1;
    text-align: center;
}

.bf-ribbon::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 6px solid #272727;
    transform: skewX(0deg);
}

.bf-ribbon02::before {
        border-top: 40px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 9px solid #272727;
        transform: skewX(0deg);
}

.bf-ribbon::after {
	content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 6px solid #272727;
    transform: skewX(0deg);
  }

  .bf-ribbon02::after {
    border-top: 40px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 9px solid #272727;
    transform: skewX(0deg);
  }

.buy-btn {
    width: 100%;
    text-align: center;
}

.pcnone{
	display: block;
}

.osusume .list {
    padding-bottom: 20px;
}

.titleimage {
    max-width: 90%;
    margin: 0px auto 40px;
}

.tokubai-section {
    padding: 80px 0 15px;
}

}

/* 2カラム：PC & SP 共通 */
.sale-card-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px; /* 40px → SPに最適化 */
    max-width: 1200px;
    margin: 100px auto;
}

/* カードの max-width を無効化しつつ、幅100%に */
.sale-card-wrap .sale-card {
    max-width: none;
    width: 100%;
    margin: 0;
    /* outline: 4px solid #e4d100; */
    outline: 3px solid #ffe89e;
    

}


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


    .sale-card {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        display: block !important;
        padding:5px 0 15px !important;
        box-sizing: border-box;
    }

    .sale-card__img,
    .sale-card__info {
        width: 100% !important;
        flex: none !important;
    }


    .sale-card-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 40px 16px;
        margin-top: 80px;
    }


    .sale-card {
        width: calc(50% - 8px) !important;
    }


    .sale-card__info .tags {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin-top: 10px;
        margin-bottom: 0;
    }


    .sale-card__info .tags span {
        display: inline-block !important;
        width: 75% !important;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto;
        font-size: 10px;
        font-weight : 500;
        line-height: 1.2;
    }

}


.sale-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sale-card__link .sale-card {
    width: 100%;
}

.medamaitleimage{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .sale-card-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
        margin-bottom: 40px;
    }

    .sale-card__link {
        display: block;
    }

    .sale-card {
        margin: 0;
        width: 100%;
        padding: 16px;
        gap: 12px;
    }

    .sale-card__img {
        width: 100%;
    }

    .sale-card__badge {
        transform: translate(0, -54%);
        width: 80px;
        height: auto;
    }

    .sale-card__badge .num {
        font-size: 40px;
    }

    .sale-card__badge .off {
        font-size: 16px;
    }

    .medamaitleimage{
        width: 85%;
}
}
@media screen and (max-width: 768px) {
    .sale-card-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 16px !important;
    }
}

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


    .sale-card-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 60px 0 !important;
    }

    .sale-card__link {
        width: calc(50% - 10px) !important;
        display: block;
    }

    .sale-card {
        margin: 0 !important;
        width: 100% !important;
    }

    .price-old {
	margin: 10px 0 5px 0;
    }

    .price-new {
        font-size: 20px;
        font-weight:bold;
        color: #ff0e0a;
    }

    .price-new span {
        font-size: 12px;
        font-weight: 700;
    }

    .list li img {
    margin: 0 0 10px;
}
}


.sale-card__link:hover .sale-card {
    transform: scale(1.05);
    transition: transform 0.25s ease;
}

.sale-card__link .sale-card {
    transition: transform 0.25s ease;
}


.list.margin30 li a {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.list.margin30 li:hover a {
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    transform: translateY(-15px);
}