@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
}

.sticky-conter{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	padding: 1% 0 3%;
	background-color: #f0e800;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.point20{
	margin: 10% auto 10%;
}


.point_lead{
	width: 90%;
	margin: 5% auto;
	box-sizing: border-box;
	border: solid 1px #000;
	padding: 3% 2%;
	font-size: 15px;
	line-height: 2;
	text-align: center;
}

.point_lead span{
	font-size: 18px;
	font-weight: 600;
}

.shop{
	width: 90%;
	margin: 5% auto;
	background-color: #f3f1bc;
	box-sizing: border-box;
	padding: 3% 0;
}

.shop h1{
	text-align: center;
	margin: 0 auto 6%;
	font-size: 15px;
	line-height: 1.7;
}

.border_none{
	border: none;
}

.point_lead .kome{
	font-size: 12px;
	font-weight: normal;
	display: inline-block;
	margin-top: 1%
}

.point_shopImg{
	width: 90%;
	margin: 5% auto;
}

.wrapper h1{
	text-align: center;
	font-family: "trade-gothic-next-compressed", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 45px;
	line-height: 1.1;
	margin-top:5%;
}

.box{
	margin: 0 auto;
	padding-top: 13%;
	width: 95%;
}

.box h2{
	font-family: "trade-gothic-next-compressed", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 35px;
	display: flex;
	width: 100%;
	margin: 0 auto;
	align-items: center;
	line-height: 2;
}

.box h2:before, .box h2:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}

.box h2:before {
	margin-right: 1rem;
}

.box h2:after {
	margin-left: 1rem;
}	

.box p{
	text-align: center;
	font-size: 15px;
	margin: 1% auto 5%;
	/*background-color: #fff;*/
	line-height: 2;
}

.box p span{
	background-color: #fff;
	padding: 1% 3%;
}

.wrapper ul{
	padding: 0;
	list-style: none;
	display: flex;
	gap :10px 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.wrapper ul li a{
	display: block;
	text-decoration: none;
	color: #000;
}

.wrapper .cate li, .wrapper .series li{
	width: calc(33.3% - 10px);
	background-color: #fff;
}

.wrapper ul li p{
	font-size: 12px;
	text-align:center;
	padding-bottom: 4%;
}

.wrapper ul li{
	 overflow:hidden;
}

.wrapper ul li img{
	 transition:1s all;
}

.wrapper .cate li img{
	box-sizing: border-box;
	padding: 5%;
}

.wrapper ul li img:hover{
	transform:scale(1.1,1.1);
	transition:0.5s all;
}

.boxLast{
	margin-bottom: 5%;
}


@media(min-width:750px){
	.sticky-conter{
		display: flex;
		background-color: #fffec4;
	}
	
	.pc-box{
		width: 33%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pc-box__left{
		width: 45vh;
	}
	
	.pc-box__right{
		padding: 0;
        list-style: none;
        line-height: 2.5; /* 重なりを防ぐために行間をしっかり空ける */
	}
	
	.pc-box__right ul{
		padding: 0;
	}
	
	.pc-box__right ul li {
		position: relative;
		overflow: hidden;      /* はみ出す背景をカット */
		list-style: none;
		margin-bottom: 10px;    /* 項目間の隙間 */
		background-color: #fff; /* 通常時の背景色 */
	}

	.pc-box__right ul li a {
		display: block;
		padding:  10px 20px;         /* 色が塗られる範囲を広げる */
		color: #000;
		text-decoration: none;
		font-weight: bold;
		position: relative;
		z-index: 2;            /* 文字を背景（z-index:1）より上に配置 */
		transition: color 0.3s;
	}

	/* 左から伸びてくる背景色の設定 */
	.pc-box__right ul li::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 0;              /* 最初は幅ゼロ */
		height: 100%;
		background-color: #f0e800; /* 塗りたい色（例：黄色） */
		z-index: 1;            /* 文字の下、liの背景の上に配置 */
		transition: width 0.4s ease-out; /* 伸びるアニメーション */
	}

	/* hoverした時の動き */
	.pc-box__right ul li:hover::after {
		width: 100%;           /* 幅を全開にする */
	}

	/* 必要ならhover時に文字色も変える */
	.pc-box__right ul li:hover a {
		color: #000;           /* 背景色に応じて調整 */
	}

	.wrapper{
		width: 35%;
		background-color: #f0e800;
	}
	
	.shop h1{
		font-size: 16px;
	}

	.br_s{
		display: none
	}

	.wrapper h1{
		font-size: 65px;
	}

	.box{
		margin: 10% auto;
		width: 90%;
	}

	.box h2{
		font-size: 45px;
	}

	.box p{
		font-size: 18px;
	}

	.wrapper ul li p{
		font-size: 13px;
	}
	
	.boxLast{
		margin-bottom: 0%;
	}

}

#item-list-content{
	padding-top: 10%!important;
}