@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%;
	}
.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: #000;
	z-index: 50;
}

/* タイトル */
.item, .sale{
	margin: auto;
	padding: var(--padding) calc(50% - var(--width)/2);}
	
.item h3, .sale h3{
		font-size: 4.5em;
		font-weight: 700;
		text-align: left;
		padding: 0 0 0.3em 0;
	}

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

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


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


/* おすすめアイテムリスト */
.osusume2 .list{
	padding: 2.2em 1em 3em;
	gap: 4em;
	scrollbar-color: #dadada rgba(0,0,0,0);
	scrollbar-width: thin;}
	
.osusume2 .list li{
		min-width: 29em;
		filter: var(--shadow);
	}


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


/* SALEアイテムリスト */
.sale{}

.sale .list{
		gap: 6em calc(10%/3);
		flex-wrap: wrap;}
.sale .list li{
			width: 22.5%;}
.sale .list li a{
				border: 1px solid #a4a4a4;
			}


/* アイテムリスト */
.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;
		}
.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.5em;
		}
.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;}
			
.list li .common::after{
				content: '';
				width: 110%;
				height: 1px;
				background: #000;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%,-50%,0);
			}

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

.list li .tag{
			font-size: 2.2em;
			margin: 0 0 .6em;
			padding: .2em .5em .4em;
			font-weight: 700;
			background: #f00;
			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: 700;
		text-align: left;
		display: block;}
		
/* .shiborikomi strong::before{
			content: '▼';
			padding: 0 .2em 0 0;
		} */
.shiborikomi strong::after{
			content: '▼';
			padding: 0 0 0 .2em;
		}

.shiborikomi .btn{
		display: flex;
		flex-wrap: wrap;
		gap: 1em 1%;}
		
.shiborikomi .btn li{
			width: 19.2%;
			background: #000;
			border: 2px solid #000;}
			
.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;
			}
.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; /* コンテナの幅を画像に合わせる */
}
.background-image {
    width: 100%; /* 画像をレスポンシブにする */
    height: auto;
}


.overlay-text-container img{
	width: 13vw; /* 画像をレスポンシブにする */
    height: auto;
	position: absolute; /* テキストを背景画像の特定部分に配置 */
    top: 38%; /* 背景画像の上から40% */
    left: 75%; /* 背景画像の左から30% */
    transform: translate(-50%, -50%); /* 中央位置を調整するためにtranslateを使う */
}

.overlay-text-container p{
	text-align: center;
	font-size: 5vw; /* テキストサイズをレスポンシブにする */
	font-weight: 800;
    color: white; /* テキストの色を指定 */
	position: absolute; /* テキストを背景画像の特定部分に配置 */
    top: 37%; /* 背景画像の上から40% */
    left: 75%; /* 背景画像の左から30% */
    transform: translate(-50%, -50%); /* 中央位置を調整するためにtranslateを使う */
	z-index: 1000;
	letter-spacing: 0.2px;
}

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

.medamakokuti{
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	margin: 10px 0;
	color: #f00;
	line-height: 1.3em;
}

.medamakokuti span{
	text-align: center;
	margin: 0.5em 0;
	font-size: 20px;
	display: block;
	font-weight: 700;
	color: #000;
}

.banacp{
	margin: 20px auto;
}

.cpoff3{
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	margin: 30px 0 20px 0;
	line-height: 1.3em;
}

.coupon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
  }
  .copy-button {
	width: 60%;
	max-width: 1920px;
	padding: 20px;
	font-size: 24px;
	color: white;
	background-color: #f00;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	margin: 30px auto;
	font-weight: 600;
	transition: opacity 0.3s ease;
  }
  .copy-button:hover {
	opacity: 0.3;
  }

  .cpoff{
	  text-align: center;
	  font-size: 3.1em;
	  font-weight: 900;
	  margin: 100px 0 30px 0;
	  letter-spacing:0.1em;
	  color: #f00;
	  line-height: 1.5;
  }

  .cpoff2{
	  text-align: center;
	  font-size: 3.3em;
	  font-weight: bold;
  }

  .cpoff2 span{
	  text-align: center;
	  font-size: 0.6em;
	  font-weight: 500;
	  margin: 0 0.2em 0 0;
  }

  .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;
			}


.medama .list{
			gap: 2em;
			padding: 1em 1em 3em;
			overflow-x: scroll;
			overflow-y: hidden;
			scrollbar-color: #dadada rgba(0, 0, 0, 0);
			scrollbar-width: thin;}
			
.medama .list li{
				min-width: 20em;}

.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: 3em 2%;}
			
.sale .list li{
				width: 49%;}
				
.sale .list li .off{
					font-size: 1.6em;
				}
.sale .list li a{
					padding: 1em;
				}


.list li .name{
				font-size: 1.4em;
				letter-spacing: 0;
			}
.list li .common{
				font-size: 1.2em;
				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: 2em;
			}
.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;
}


.overlay-text-container img{
	width: 30vw; /* 画像をレスポンシブにする */
    height: auto;
	position: absolute; /* テキストを背景画像の特定部分に配置 */
    top: 32%; /* 背景画像の上から40% */
    left: 80%; /* 背景画像の左から30% */
    transform: translate(-50%, -50%); /* 中央位置を調整するためにtranslateを使う */
}

.overlay-text-container p{
	text-align: center;
	font-size: 12vw; /* テキストサイズをレスポンシブにする */
	font-weight: 800;
    color: white; /* テキストの色を指定 */
	position: absolute; /* テキストを背景画像の特定部分に配置 */
    top: 31%; /* 背景画像の上から40% */
    left: 80%; /* 背景画像の左から30% */
    transform: translate(-50%, -50%); /* 中央位置を調整するためにtranslateを使う */
	z-index: 1000;
	letter-spacing: 0.1px;
}

.coupon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
  }
  .copy-button {
	width: 90%;
	max-width: 1920px;
	padding: 15px;
	font-size: 18px;
	color: white;
	background-color: #f00;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	margin: 30px auto;
	font-weight: 600;
  }
  .copy-button:hover {
	opacity: 0.3;
  }

  .cpoff{
	  text-align: center;
	  font-size: 23px;
	  font-weight: 900;
	  margin: 70px 0 30px 0;
	  letter-spacing:0.1em;
	  color: #f00;
	  line-height: 1.2em;
  }

  .cpoff2{
	  text-align: center;
	  font-size: 22px;
	  font-weight: bold;
  }

  .cpoff2 span{
	  text-align: center;
	  font-size: 0.6em;
	  font-weight: 500;
	  margin: 0 0.2em 0 0;
  }

  .cpoff3{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin: 30px 0 15px 0;
	line-height: 1.3em;
}

.cpcode{
	text-align: center;
	display: block;
	margin: 0 auto 5em;
	max-width: 100%;
	max-width: 390px;
	justify-content: center;
	padding: 0 15px;
}

.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;
}

.medamakokuti span{
	font-size: 14px;
}


}