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

/* ============ Theme Colors ============ */
:root{
  --color-bg:#F3DEEF;      /* 背景 */
  --color-primary:#7E204C; /* 見出し/ボタン/メニューの基調色 */
  --color-accent:#c9a953;  /* ホバーなどの差し色 */
  --color-text:#3b3b3b;    /* 説明文などの本文色 */
}
/* ===================================== */



body {
	margin: 0;
	background-color: #F3DEEF;
	font-family: sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
	/*background-image: url("images/haikei_suisai.png");
	background-size: 1000px;
	background-repeat:  repeat;*/
}
a {
	text-decoration: none;
	/*color: #ffffff;*/
	/*color: #c7444d;*/
}

/*img {
	padding: 10px 10px 10px 10px;
}*/

.scroll-fade {
	opacity: 0;
	transform: translateY(50px);
	transition: all 1000ms 0s ease;
}
.fv_pc {
	width: 100%;
	background-size: cover;
}
.fv_sp {
	display: none;
	width: 100vw;
	background-size: contain;
}
.fvimage {
	/*width: 100%;*/
	opacity: 0;
	transition: all 5000ms 0s ease;
}
.fvimage_frame {
	/*width: 100%;*/
	opacity: 0;
	transition: all 1000ms 0s ease;
}


/*.cd-fixed-bg {
	position: relative;
	width: 100vw;
	height: 30vw;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	}
}*/
.area {
	background-color: #F3DEEF;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 999;
    margin-bottom: 20px;
	padding: auto 0;
}
.wrapper {
	background-color: #F3DEEF;
	max-width: 800px;
	margin: 0 auto;
    padding: 10px 0px;
}



/*.cd-fixed-bg {
	position: relative;
	width: 100vw;
	height: 30vw;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	}*/

.cd-fixed-bg {
	width: 100%;
	/*height: 30vw;*/
	margin: 0px;
    padding: 0px;
	/*background-size: cover;*/
	background-size: 100%;
	background-repeat: no-repeat;
	min-height: 500px;/*追加*/
	background-position: center center;
	background-attachment: fixed;
	
}
.cd-fixed-bg.cd-bg-1 {background-image: url(images/wg_back1.jpg);}
.cd-fixed-bg.cd-bg-2 {background-image: url(images/wg_back2.jpg);}
.cd-fixed-bg.cd-bg-3 {background-image: url(images/wg_back3.jpg);}


.nonebg {background-image:none!important;}

h1 {
	color: #7E204C;
	text-align: center;
	font-family: serif;
	font-size: 50px;
}
.midashi1 {
	color: #7E204C;
	text-align: center;
	font-family: serif;
	font-size: 30px;
	font-weight: bolder;
}
.line {
	border: 0;
	background-color: #7E204C;
	height: 2px;
}
.setsumei {
	text-align: center;
	font-family: serif;
	color: #3b3b3b;
	font-size: 24px;
	line-height: 38px;
}
.hayawari {margin: 30px 0;}
.campaign {
	font-family: serif;
	color: #cab272;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin: 10px 0;
}
.image_sp {width: 100%; display: none;position: relative;z-index: 10;}
.image_pc {width: 100%;position: relative;z-index: 10;}
h2 {
	color: #7E204C;
	font-family: serif;
	font-size: 42px;
	text-align: center;
}
/*h2 {
	font-family: serif;
	font-size: 48px;
	text-align: center;
}*/
.pname {
	color: #7E204C;
	margin: 10px;
	font-family: serif;
	font-size: 26px;
	font-weight: bolder;
	}

.tags {
	font-family: serif;
	margin-top: 50px;
	margin-bottom: 0;
	font-size: 26px;
	font-weight: bolder;
	text-align: center;
	}
.tags2 {
	font-family: serif;
	font-size: 20px;
	margin: 0;
	font-weight: bolder;
	text-align: center;
	color: #3b3b3b;
	}
.image_tag {
	margin-top: 10px;
	margin-bottom: 20px;
}
.inline {
	margin: 0 5px;
	display: inline-block;
}
.inline2 {
	text-align-last: left;
	margin: 0 5px;
	display: block;
}
.psetumei {
	text-align: left;
	color: #3b3b3b;
	font-size: 20px;
	margin: 10px;
}
.button1 {
	width: 400px;
	padding: 18px;
	margin: 30px auto;
	text-align: center;
	background-color: #7E204C;
	color: #ffffff;
	font-size: 28px;
	font-weight: bold;
	border-radius: 10px;
	transition: all 1000ms 0s ease;
}
.niretu {
	padding: 0;
	list-style: none;
	font-size: 0;
}

/* ================================
   共通 2 カラムカード (.niretu & .priceList)
   2025‑05‑27 修正版
   — どのセクションでも同じ余白／幅で揃える —
================================ */

/* UL 自体を中央寄せ & 共通リセット */
.niretu,
.priceList{
  padding:0;
  list-style:none;
  font-size:0;        /* インラインブロックのスキマ対策 */
  text-align:center;  /* UL をセンター */
}

.priceList{
  text-align:left;        /* UL 内の inline-block を左寄せ */
}

/* カード（LI）共通 */
.niretu li,
.priceList>li{
  display:inline-block;
  width:calc(50% - 10px);   /* 左右 15px 余白で 2 列 */
  margin:0 5px 24px;
  padding:15px;
  box-sizing:border-box;
  vertical-align:top;
  font-size:16px;           /* 親の 0 をリセット */
}

/* SP 幅で少しゆったり */
@media(max-width:768px){
  .niretu li,
  .priceList>li{
	  width:calc(50% - 8px);
	  margin:0 3px 20px;
	  padding:10px;
	  
	}   /* 左右10px 余白 */
}

/* 「価格で選ぶ」だけ商品名を小さめに */
.priceList .pname .inline2:first-child{
  font-size:90%;
  line-height:1.25;
}



.image_w {width: 100%;}

.button2 {
	width: 300px;
	padding: 18px;
	margin: 30px auto;
	text-align: center;
	background-color: #7E204C;
	color: #ffffff;
	font-size: 28px;
	font-weight: bold;
	border-radius: 10px;
	transition: all 1000ms 0s ease;
}
.button3 {
	width: 90%;
	padding: 10px 0;
	margin: 20px auto;
	text-align: center;
	background-color: #ffffff;
	color: #c9a953;
	font-size: 22px;
	border-radius: 10px;
	/*border: 1px solid #870424;*/
	border: 1px solid #c9a953;
	transition: all 1000ms 0s ease;
}
.button3:hover {
	background-color: #7E204C;
}
.ranks {font-size: 0;padding-bottom: 50px;}
.rank {display: inline-block; width: 50%;}
.table {border-collapse: collapse;}
.table td {padding: 0;}
.caution {
	width: calc(100% - 10px);
	background-color: #fff;
	border: 5px solid #dd0000;
	margin: 100px 0;
	color: #000000;
}
.kakunin {
	margin: -1px;
	background-color: #e14586;
	text-align: center;
	font-size: 40px;
	color: #ffffff;
	font-weight: bold;
	padding: 10px;
}
.c-midashi {
	padding: 0 30px;
	font-size: 32px;
	font-weight: 600;
	margin: 30px 0 10px 0;
}
.c-setumei {
	margin-left: 30px;
	padding-right: 50px;
	font-size: 22px;
}
.c-setumei li {margin-bottom: 10px;}
#tyuui {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	margin: 10px 0;
	color: #a12122;
}
#tyuui2 {
	width: calc(80% - 200px);
	margin: 0 auto 50px auto;
	text-align: center;
	background-color: #a12122;
	padding: 15px 100px;
	font-size: 30px;
	color: #ffffff;
	font-weight: bold;
	border-radius: 20px;
}
.pcmenu {
	transition: all 300ms 0s ease;
	border-radius: 10px;
}
.menulist {
    /*padding: 20px 0 20px 0;*/
	padding: 0;
    list-style: none;
    font-size: 0;
}
.menulist li {
    display: inline-block;
    width: calc( 100% / 3 - 3px);
    font-size: 24px;
    text-align: center;
    font-family: serif;
	background-color: #7E204C;
    /*padding: 30px 0;*/
	padding: 0 0 15px 0;/*追加*/
    border: 1px solid #fff;
    transition: all 800ms 0s ease;
}
.menulist li a {color: #fff;}
.menulist li:hover {background-color: #c9a953;}
.menulist li a:hover {color: #ffffff;}
.spmenu {
	display: none;
	padding: 0;
}

/*追加*/
.menulist3 {
    /*padding: 20px 0 20px 0;　消すやつ*/
	padding: 0;
    list-style: none;
    font-size: 0;
}
.menulist3 li {
    display: inline-block;
    width: calc( 100% / 3 - 3px);
    font-size: 24px;
    text-align: center;
    font-family: serif;
	background-color: #7E204C;
    padding: 30px 0;
	/*padding: 0 0 15px 0; 追加　隠すやつ*/
    border: 1px solid #fff;
    transition: all 800ms 0s ease;
}
.menulist3 li a {color: #fff;}
.menulist3 li:hover {background-color: #c9a953;}
.menulist3 li a:hover {color: #ffffff;}
.spmenu {
	display: none;
	padding: 0;
}
/*追加*/

.menulist2 {
    display: block;
    padding: 0;
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 150px;
    z-index: 999999;
    opacity: 0;
    transition: all 300ms 0s ease;
}
.menulist2 li {
	background-color: #7E204C;
	/*background-color: #cab272;*/
    list-style: none;
    border: 1px solid #fff;
    width: 150px;
    text-align: center;
	/*text-align: left;*/
    padding: 2vw 0;
}
.menulist2 li:hover {
	background-color: #bca771;
}
.menulist2 li a {
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
}
/*@media screen and (max-width:1300px){
	.menulist2 {display: none;}
}*/

@media screen and (max-width:1000px) {
	.menulist2 {display: none;}
	
	/*.menulist3 {display: none;} 追加*/
	
	.fv_pc {display: none}
	.fv_sp {display: block;}
	h1 {font-size: 6.5vw;}
	.midashi1 {
		font-size: 4.6vw;
		width: 80%;
		margin: 5px auto 20px auto;
	}
	.setsumei {font-size: 3vw;line-height: 4.6vw;}
    .tags {font-size: 4.6vw;}
	.campaign {font-size: 3.6vw;}
	.image_sp {display: inline-block;}
	.image_pc {display: none;}
	h2 {font-size: 5vw;}
	.pname {font-size: 2.6vw;margin: 10px;} /* 長嶺変更箇所 */
	
	.pname2 {font-size: 2.6vw;margin: 10px;} /* 長嶺変更箇所 */
	
	.psetumei {display: none;} /* 長嶺変更箇所 */
	.button1 {width: 50%;font-size: 3.2vw;padding: 1.8vw;}
	.niretu li {width: calc(50% - 30px); display: inline-block; padding: 15px; vertical-align: top;} /* 長嶺変更箇所 */
	.button2 {width: 50%;font-size: 3.2vw;padding: 1.8vw;}
	.button3 {font-size: 2.8vw;}
	.rank {display: inline-block;width: 50%;} /* 長嶺変更箇所 */
	.kakunin {font-size: 5vw;padding: 1.2vw;}
	.c-midashi {padding: 0 4vw;font-size: 4.4vw;}
	.c-setumei {margin-left: 4vw;padding-right: 4vw;font-size: 3.2vw;}
	#tyuui {font-size: 4.6vw;}
	#tyuui2 {padding: 2vw 5%;width: 80%;font-size: 3.4vw;border-radius: 10px;}

	/*↓の変更後*/
	.cd-fixed-bg {
		content: "";
		width: 100%;
		/*height: 400px;*/
		min-height: 300px;
		position: sticky;
		top: 0;
		left: 0;
		z-index: -1;
		/*background-size: cover;*/
		background-size: 150%;
		background-repeat: no-repeat;
		background-position: center;
}
	
	/*.cd-fixed-bg {
		width: 100%;
		height: 50vw;
		background-image:none!important;
	}
	
    .nonebg::before {background-image:none!important;}
	.cd-fixed-bg::before {
		content: "";
		display: block;
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100vh;
		top:0;
		left: 0;
		background-position:center;
		background-size: cover;
	}*/
	
    /*一時保存（こちらが正しい）
    .nonebg::before {background-image:none!important;}
	.cd-fixed-bg::before {
		content: "";
		display: block;
		position: relative;
		z-index: -1;
		width: 100%;
		height: 30vh;
		top:0;
		left: 0;
	}*/
    
	.cd-fixed-bg.cd-bg-1::before {background-image: url(images/wg_back1.jpg);}
	.cd-fixed-bg.cd-bg-2::before {background-image: url(images/wg_back2.jpg);}
	.cd-fixed-bg.cd-bg-3::before {background-image: url(images/wg_back3.jpg);}
	/*.cd-fixed-bg.cd-bg-4::before {background-image: url(images/md_cate_sp_back4.jpg);}*/
	/*.cd-fixed-bg.cd-bg-4::before {background-image: url(images/_cate_sp_back5.jpg);}*/

	.spmenu {
		position: fixed;
		top: 0;
		left: 0;
		width:100%; 
		z-index: 999999;
		display: block;
		opacity: 0;
		
	}
	.menulist li {
		font-size: 3vw; 
		font-weight: 500; 
		/*padding: 15px 0;*/
		padding: 0 0 15px 0;
		z-index: 99999;
	}
	
	.menulist3 li {
		font-size: 3vw; 
		font-weight: 500; 
		padding: 15px 0;
		/*padding: 0 0 15px 0;*/
		z-index: 99999;
	}/*追加*/
	
	.pcmenu {display: none;}
}

.button1:hover {
	color: #c9a953;
	transform: translateY(-5px); 
	animation: gradationTest 3s infinite;
}
.button2:hover {
	color: #c9a953;
	transform: translateY(-5px); 
	animation: gradationTest 3s infinite;
}

.bunner {
	transform: translateY(0px); 
	transition: all 800ms 0s ease;
}
.bunner:hover {
	/*transform: translateY(-10px); */
	opacity: 0.7;
}

@keyframes gradationTest {
	0% { background-color: #e14545; }
	33% { background-color: #e1ac45; }
	66% { background-color: #e16245; }
	100% { background-color: #e14545; }
}

.fadein {
	opacity: 1;
	transform: translateY(0);
}




/*スライダーPC　追加分*/
#mainimage{
	position: relative;
	overflow: hidden; 
}
#mainimage ul li.active{
	z-index: 9; }
#mainimage ul li.last-active{
	z-index: 8; }
#mainimage{
	width: 100%;
	height: 880px;
	position: relative; }
#mainimage ul{
	position: absolute;
	top: -16px;
	left: -11%;
	width: 100%; }
#mainimage ul li{
	list-style: none;
	width: 110%;
	position: absolute;
	top: 0;
	right: -10%;
	z-index: 6; }
#mainimage .topimage01{
	width: 100%;
	height: 887px;
	background: url("images/title2.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage .topimage02{
	width: 100%;
	height: 887px;
	background: url("images/title3.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage .topimage03{
	width: 100%;
	height: 887px;
	background: url("images/title4.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }


#mainimage .title{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 11; }
/*スライダーPC　↑↑↑ここまで*/


/*スライダーSP　追加分*/
#mainimage_sp{
	position: relative;
	overflow: hidden; 
}
#mainimage_sp ul li.active{
	z-index: 9; }
#mainimage_sp ul li.last-active{
	z-index: 8; }
#mainimage_sp{
	width: 100%;
	height: 100vw;
	position: relative; }
#mainimage_sp ul{
	position: absolute;
	top: -16px;
	left: -11%;
	width: 100%; }
#mainimage_sp ul li{
	list-style: none;
	width: 100%;
	position: absolute;
	top: 0;
	right: -10%;
	z-index: 6; }
/*#mainimage_sp .topimage01{
	width: 100%;
	height: 100vw;
	background: url("images/title_sp1.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }*/
#mainimage_sp .topimage02{
	width: 100%;
	height: 100vw;
	background: url("images/title_sp2.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage_sp .topimage03{
	width: 100%;
	height: 100vw;
	background: url("images/title_sp3.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }
#mainimage_sp .topimage04{
	width: 100%;
	height: 100vw;
	background: url("images/title_sp4.jpg") center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover; }

#mainimage_sp .title{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 11; 
}
/*スライダーSP　↑↑↑ここまで*/



/* 新商品 */
.new{
	padding: 2px 6px 2px 6px;
	margin-bottom: 5px;
	border-radius: 30px;
	color: #FFFFFF;
	background-color: #f36b4b;
	font-size: 80%;
	font-family: sans-serif;
	font-weight: normal;
}


/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}


/* レビュー件数 フォント */
.review{
	/*color: #0099b6;*/
	color: #7E204C;
	margin: 0 0 0 5px;
	/*font-family: sans-serif;*/
	font-family: serif;
	font-size: 24px;
	/*font-weight: normal;*/
	font-weight: bolder;
}

#dot{
	color: #7E204C;
	border-bottom: 1px dotted;
}
/* 星レビュー */

.star5_rating{
	margin: 0px;
	/*background-color: #ffffff;後で消す*/
	position: relative;
	z-index: 0;
	display: inline-block;
	white-space: nowrap;
	color: #CCCCCC;
	text-align: left;
	/*font-size: 20px;*/
	
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
	letter-spacing: -0.1em;
	font-size: 20px;/* 星のサイズ */
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32;
	/*font-size: 20px;*/
}

.star5_rating[data-rate="5"]:after{ width: 100%; }
.star5_rating[data-rate="4.9"]:after{ width: 98%; }
.star5_rating[data-rate="4.8"]:after{ width: 96%; }
.star5_rating[data-rate="4.7"]:after{ width: 94%; }
.star5_rating[data-rate="4.6"]:after{ width: 92%; }
.star5_rating[data-rate="4.5"]:after{ width: 90%; }
.star5_rating[data-rate="4.4"]:after{ width: 88%; }
.star5_rating[data-rate="4.3"]:after{ width: 86%; }
.star5_rating[data-rate="4.2"]:after{ width: 84%; }
.star5_rating[data-rate="4.1"]:after{ width: 82%; }
.star5_rating[data-rate="4"]:after{ width: 80%; }
.star5_rating[data-rate="3.9"]:after{ width: 78%; }
.star5_rating[data-rate="3.8"]:after{ width: 76%; }
.star5_rating[data-rate="3.7"]:after{ width: 74%; }
.star5_rating[data-rate="3.6"]:after{ width: 72%; }
.star5_rating[data-rate="3.5"]:after{ width: 70%; }
.star5_rating[data-rate="3.4"]:after{ width: 68%; }
.star5_rating[data-rate="3.3"]:after{ width: 66%; }
.star5_rating[data-rate="3.2"]:after{ width: 64%; }
.star5_rating[data-rate="3.1"]:after{ width: 62%; }
.star5_rating[data-rate="3"]:after{ width: 60%; }
.star5_rating[data-rate="2.9"]:after{ width: 58%; }
.star5_rating[data-rate="2.8"]:after{ width: 56%; }
.star5_rating[data-rate="2.7"]:after{ width: 54%; }
.star5_rating[data-rate="2.6"]:after{ width: 52%; }
.star5_rating[data-rate="2.5"]:after{ width: 50%; }
.star5_rating[data-rate="2.4"]:after{ width: 48%; }
.star5_rating[data-rate="2.3"]:after{ width: 46%; }
.star5_rating[data-rate="2.2"]:after{ width: 44%; }
.star5_rating[data-rate="2.1"]:after{ width: 42%; }
.star5_rating[data-rate="2"]:after{ width: 40%; }
.star5_rating[data-rate="1.9"]:after{ width: 38%; }
.star5_rating[data-rate="1.8"]:after{ width: 36%; }
.star5_rating[data-rate="1.7"]:after{ width: 34%; }
.star5_rating[data-rate="1.6"]:after{ width: 32%; }
.star5_rating[data-rate="1.5"]:after{ width: 30%; }
.star5_rating[data-rate="1.4"]:after{ width: 28%; }
.star5_rating[data-rate="1.3"]:after{ width: 26%; }
.star5_rating[data-rate="1.2"]:after{ width: 24%; }
.star5_rating[data-rate="1.1"]:after{ width: 22%; }
.star5_rating[data-rate="1"]:after{ width: 20%; }
.star5_rating[data-rate="0.9"]:after{ width: 18%; }
.star5_rating[data-rate="0.8"]:after{ width: 16%; }
.star5_rating[data-rate="0.7"]:after{ width: 14%; }
.star5_rating[data-rate="0.6"]:after{ width: 12%; }
.star5_rating[data-rate="0.5"]:after{ width: 10%; }
.star5_rating[data-rate="0.4"]:after{ width: 8%; }
.star5_rating[data-rate="0.3"]:after{ width: 6%; }
.star5_rating[data-rate="0.2"]:after{ width: 4%; }
.star5_rating[data-rate="0.1"]:after{ width: 2%; }
.star5_rating[data-rate="0"]:after{ width: 0%; }

/*.result-rating-rate{
	margin: auto;
	padding: 0px 0px 0px 0px;
}*/


/* フレックスボックス */

.box {
	margin: 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

@media screen and (max-width:1000px) {
    .review {
		font-size: 2.8vw;
		margin: 10px;
	}
	.shipping {font-size: 2vw;line-height: 4.4vw;padding: 0px;
	}
}

/* PCのみレビュー件数の表示 */
@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
	.line{	
display: none !important;	
}
}

/* カテゴリーアイコン */
.text_img1{
    width: 100%;
    vertical-align: baseline;
	/*margin: -30px 0 0 0;*/
}

.text_img2{
    width: 100%;
	vertical-align: baseline;
	/*text-align: left;*/
	/*margin: -15px 0 0 0;*/
}

.spmenu2{
	width: 100%;
	vertical-align: middle;
	/*margin: -50px 0 0 0;*/
	padding: 30px 0 0 0;
}



/*商品背景*/
.haikei{
	padding-bottom: 5px;
	/*background-color: #ffffff;*/
	/*background-color: white(0,0,0,.5);
	color: #ffffff;*/
	background-color: rgba(255,255,255,.5);
	color: #ffffff;
}


/*追記
.priceFilter button.active{
  background:#003366;
  color:#fff;
}*/

.haikei{
	padding-bottom: 5px;
	background-color: rgba(255,255,255,.5);
	color: #3b3b3b; /* 文字色を背景に合わせて調整 */
}

/* 絞り込みボタンのスタイル */
.priceFilter {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0; /* 下に余白を追加 */
    text-align: center;
}
.priceFilter li {
    display: inline-block;
    margin: 0 5px;
}
.priceFilter button {
    padding: 8px 12px;
    font-size: 14px; /* 少し小さく調整 */
    cursor: pointer;
    border: 1px solid #7E204C;
    background-color: #ffffff;
    color: #7E204C;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.priceFilter button:hover {
    background-color: #7E204C; /* ホバー色を少し濃く */
    color: #ffffff;
}
/* JavaScriptで付与されるアクティブなボタンスタイル */
.priceFilter button.active {
  background-color: #7E204C; /* プライマリカラーに合わせる */
  color: #fff;
  border-color: #7E204C;
}


/* フェードイン用クラス (scroll-fadeと併用) */
.fadein {
	opacity: 1;
	transform: translateY(0);
}


/* スマートフォン表示の調整 */
@media screen and (max-width:1000px) {
	/* ... (既存のメディアクエリ内のスタイル) ... */

    .priceList > * { /* 「価格で選ぶ」のリストアイテムも同様 */
        /* 例: 1列表示にする場合 */
        /* width: calc(100% - 30px); */
        /* padding: 15px; */
    }

    .priceFilter button {
        font-size: 13px;
        padding: 6px 10px;
    }

	/* ... (既存のメディアクエリ内のスタイル) ... */
}


/* ---------------------------------------------
   ▼▼ 「価格で選ぶ」ボタンをスマホで 2 行配置 ▼▼
----------------------------------------------*/
.priceFilter{
  display:flex;
  flex-wrap:wrap;           /* 2 行に折り返し */
  gap:8px;                  /* ボタン間のすき間 */
  justify-content:center;   /* 真ん中揃え */
}
.priceFilter li{
  margin:0;                 /* li 同士の余白は gap に任せる */
}
.priceFilter button{
  min-width:108px;          /* 横幅をそろえると見た目◎（お好みで調整） */
}
/* ---------------------------------------------
   ▲▲ ここまでを style1.css の末尾にコピペ ▲▲
----------------------------------------------*/

/* 既存 .priceFilter button.active の定義が複数ある場合は
   “最後に出てくる 1 つだけ” を残してね */


/* =========================================
   2) 「価格で選ぶ」だけ商品名を小さく
   -----------------------------------------*/
.priceList .pname .inline2:first-child{
  font-size:80%;     /* お好みで 80–90% */
  line-height:1.25;
}

/* =========================================
   「価格で選ぶ」の商品名を読みやすく：
   ・自動改行（単語途中でも折る）
   ・行間を気持ち広めに
   ・フォント 90％
========================================= */
.priceList .pname .inline2:first-child{
  font-size:90%;
  line-height:1.3;
  /*white-space:normal;*/     /* ← ここが重要！折返し許可 */
	white-space: pre-line;
  overflow-wrap:anywhere; /* 長い単語でも折る */
}

/* style1.css に追加または修正 */

/* 「価格で選ぶ」セクションの商品カード内の .pname (商品名と価格の親要素) のスタイル */
.priceList .pname {
    display: flex; /* Flexboxコンテナとして設定 */
    flex-direction: column; /* 子要素を縦方向に並べる */
    justify-content: space-between; /* 商品名と価格の間にスペースを確保し、価格を下部に配置しやすくする */
    min-height: 70px; /* .pname の最小の高さを指定します。この値は商品名の行数やフォントサイズによって調整してください。(例: 商品名が2行程度 + 価格1行分を想定) */
                      /* この高さを調整することで、カード全体の見た目のバランスも取れます。*/
}

/* 商品名 (.pname 内の最初の .inline2 要素) のスタイル */
.priceList .pname .inline2:first-child {
    /* 既存のスタイル (font-size, line-heightなど) はそのまま活かします */
    /* 必要に応じて、商品名が長すぎる場合に省略表示する設定も追加できます */
    /* 例: 最大2行まで表示して、それ以上は「...」で省略する場合 */
    /*
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

/* 価格 (.pname 内の最後の .inline2 要素) のスタイル */
.priceList .pname .inline2:last-child {
    margin-top: auto; /* これが重要！価格を .pname コンテナの下端に押し下げます */
}