@charset "euc-jp";
/* CSS Document */


/*sliderに影響がでるので削除（250120）
* {
	box-sizing:border-box;
}*/


body {
	-webkit-text-size-adjust: 100%;

}




#sale .coupon,
#sale .clm2 li,
#sale .clm3 li {
	box-sizing:border-box;
}

#sale strong {
	color:var(--eventStrongcolor);
	font-weight:bold;
}

#side_contents {
	display: none;
}

#main_contents {
	float: none;
	width: auto;
}


#sale h2,
#sale h3 {
	margin: 0;
	padding: 0;
	border: none;
}

#sale h2 img {
  height: auto;
  display: block;
	max-width: 100%;
}






#sale h3,
#sale h3 strong,
#sale .clm2 li a {
	font-family: "Lato", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	color: #333;

}

#sale h3 {
	margin-top: 50px;
	margin-bottom:20px;
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.1;
}

/*#cp{
	margin-top: 50px;
	margin-bottom:0px;
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.1;
}*/

#cp {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

#cp .threecoupon {
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-top: 4px;
}







#sale h3 img {
	width: 100%;
	max-width: 600px;
	margin:  0 auto;
 	height: auto;
  	display: block;
}


#sale h3 strong {
	display: block;
	font-size: 108px;
	color: #DF98AA;
}



.product-banner {
  display: flex;
  flex-direction: row;
	align-items: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  max-width: 600px;
  margin: auto;
	margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.product-info {
  padding: 16px;
  text-align: left;
  position: relative;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
}

.product-price {
	display: flex;
  align-items: center;
  gap: 6px; /* ← 追加。flexで詰める */
  flex-wrap: nowrap; /* 改行させない */
  font-size: 14px;
  color: #555;
  white-space: nowrap; /* ← これが重要！子要素含めて全体で改行を防止 */
}

.off-circle {
  background-color: #BD495E;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
 display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

.discount-price {
  font-size: 24px;
  color: #d9475f;
  font-weight: bold;
}

.tax {
  font-size: 14px;
  color: #555;
}

@media (max-width: 767px) {
  .product-name {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .product-price {
    font-size: 12px;
  }
	
.product-price-label {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}


	
	

  .discount-price {
    font-size: 30px;
  }

  .tax {
    font-size: 12px;
  }

  .off-circle {
    width: 50px;
    height: 50px;
    font-size: 16px;
    margin-right: 6px;
	 border-radius: 50%;
  }
	
  .price-line {
   display: inline-flex;
   align-items: center;
   gap: 4px; /* ← 価格と(税込)の間に少しスペース */
   white-space: nowrap;
}

	
	
	

  .product-info {
    padding: 8px;
  }
}



  .product-img {
    width: 40%;
  }
	
  .product-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

	
	

  .product-info {
    width: 60%;
    padding: 12px;
  }


.item-container {
	display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 16px;

}

/* 親ラップ */
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 640px;   /* ← 中央揃えしたいとき */
  margin: 0 auto;
  padding: 8px;
  box-sizing: border-box;
}

/* カード全体 */
.item-wrap {
  display: flex;
  flex-direction: column;
  background: #fff;
  width: calc(50% - 6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 商品画像 */
.item-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* 情報 */
.item-info {
  display: flex;
  flex-direction: column;
  padding: 12px;
  height: 100%;
  flex-grow: 1;
}

.item-title {
  font-size: calc(10px + 0.4vw);
  font-weight: bold;
  line-height: 1.4;
}

.item-price-label {
  font-size: calc(10px + 0.3vw);
  color: #555;
}

.item-title,
.item-price-label {
  margin: 0 0 6px 0;
}

.item-sale {
   font-size: calc(13px + 0.4vw);
  font-weight: bold;
  display: flex;
  gap: 6px;
  align-items: center;
	flex-wrap: wrap; 
	margin-top: auto;
	margin-bottom: 5px;
  color: #b7282e;
}

@media (max-width: 452px) {
  .item-sale {
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
    gap: 4px;
  }
}


.discount {
  background: #A90707;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: calc(9.6px + 0.3vw);
}

.price {
  font-size: calc(16px + 0.4vw);
  font-weight: bold; /* ← これで文字が太くなる */
  color: #A90707;
  line-height: 1;
  margin-top: 4px;
  margin-bottom: 4px;
}



/* ボタン */
.salebtn {
  margin-top: auto;
  background: #333;
  color: #fff !important;
  text-align: center;
  padding: 4px 2px;
  border-radius: 4px;
  text-decoration: none;
  font-size: calc(11px + 0.3vw);
	font-weight: bold;
  display: block;
}

.salebtn:hover {
  text-decoration: none; /* ← ホバー時の下線も消す！ */
}

.salebtn a:hover {
  text-decoration: none; /* ← ホバー時の下線も消す！ */
}


/* 画面がめちゃくちゃ狭い場合は1カラムに（任意） */
@media (max-width: 320px) {
  .item-wrap {
    width: 100%;
  }
}








#sale h4 {
	margin: 15px 0 10px;
	font-size: 48px;
	text-align: center;
}

#sale h4 img {
	vertical-align: top;
	padding-left: 15px;
}

#sale .clm1 {
/*	margin: 10px 0 0;*/
	text-align: center;
	margin: 0 auto 20px;
}

.clm1 img {
  width: 100%;
  height: auto;
  max-width: 600px;
}

#sale .clm2,
#sale .clm3 {
	clear: both;
	overflow: hidden;
	margin: 10px -10px 0 0;
}

#sale .clm2 li,
#sale .clm3 li,
#sale .clm2 li.multi {
	position: relative;
	float: left;
	line-height: 1;
	margin: 0 10px 10px 0;
	padding: 15px 0;
	border: 5px solid var(--eventStrongcolor);
}

#sale .clm2 li,
#sale .clm3 li,
#sale .clm2 li.multi {
	background:var(--eventBgcolor);
	background-repeat: no-repeat;
	background-position: right bottom;
}

#sale .clm2 li,
#sale .clm3 li {
	background-image: var(--eventBgimg);
}

#sale .clm2 li.multi {
	background-image: var(--eventBgimgs);
}


#sale .clm2 li {
	width: 485px;
}

#sale .clm3 li {
	width: 310px;
	background-size:50%;
}

#sale .clm2 li a,
#sale .clm2 li strong,
#sale .clm3 li a,
#sale .clm3 li strong {
	display: block;
}

#sale .clm2 li img,
#sale .clm3 li img {
	float: left;
	margin: 0 15px;
}

#sale .clm2 li img {
	width: 200px;
	height: 200px;
}

#sale .clm3 li img {
	width: 120px;
	height: 120px;
}

#sale .clm2 li h2,
#sale .clm3 li h2 {
	margin: 0 15px 15px 0;
	background-color: var(--eventStrongcolor);
	text-align: center;
	font-weight: bold;
	color: #fff;
}

#sale .clm2.bnsale li h2,
#sale .clm2.point li h2 {
	margin-left: 230px;
	height: 70px;
	line-height: 70px;
	font-size: 24px;
}


#sale .clm2.bnsale li h2.couponlabel {
	line-height: 45px;
}

#sale .clm2.bnsale li h2.couponlabel div {
	width: 87%;
	height: 25px;
	margin: auto;
	line-height: 25px;
	font-size: 14px;
	background-color: var(--eventBgcolor);
	color: var(--eventStrongcolor);
	border-top: solid var(--eventStrongcolor) 1px;
	border-right: solid var(--eventStrongcolor) 1px;
	border-bottom: solid var(--eventStrongcolor) 1px;
	border-left: solid var(--eventStrongcolor) 1px;
	box-sizing: border-box;
}

	
#sale .clm2.bnsale li h2:after {
	content: "OFF！";
}

#sale .clm2.bnsale li p.offsale {
	font-size: 11px;
	line-height: 14px;
}

#sale .clm2.bnsale li p.offsale:before,
#sale .clm2.bnsale li p.offsale:after {
	display: inline-block;
}

#sale .clm2.bnsale li p.offsale:before,
#sale .clm2.bnsale li p.offsale2:before {
	content:"通常価格:"
}

#sale .clm2.bnsale li p.offsale:after {
	content:"円(税込)が"
}

#sale .clm2.bnsale li.multi p.offsale:after {
	content:"円(税込)～が"
}


#sale .clm2.point li h2:before,
#sale .clm2.point li h2:after {
	display: inline-block;
}

#sale .clm2.point li h2:before {
	content:"ポイント"
}

#sale .clm2.point li h2:after {
	content:"倍！"
}


/*かきなおしたところ　241023

#sale .clm2 li h2 {
	margin-left: 230px;
	height: 70px;
	line-height: 70px;
	font-size: 24px;
}


#sale .clm2 li h2.bgsale.couponlabel{
	line-height: 45px;
}

#sale .clm2 li h2.bgsale.couponlabel div{
	width: 87%;
	height: 25px;
	margin: auto;
	line-height: 25px;
	font-size: 14px;
	background-color: var(--eventBgcolor);
	color: var(--eventStrongcolor);
	border-top: solid var(--eventStrongcolor) 1px;
	border-right: solid var(--eventStrongcolor) 1px;
	border-bottom: solid var(--eventStrongcolor) 1px;
	border-left: solid var(--eventStrongcolor) 1px;
	box-sizing: border-box;
}

	
#sale .clm2 li h2.bgsale:after {
	content: "OFF！";
}

#sale .clm2 li p.offsale {
	font-size: 11px;
	line-height: 14px;
}

#sale .clm2 li p.offsale:before,
#sale .clm2 li p.offsale2:before {
	content:"通常価格:"
}

#sale .clm2 li p.offsale:after {
	content:"円(税込)が"
}

#sale .clm2 li.multi p.offsale:after {
	content:"円(税込)～が"
}*/

#sale .clm3 li h2 {
	margin-left: 150px;
	line-height: 30px;
	font-size: 16px;
}
/****************/

#sale .clm2 li strong,
#sale .clm3 li strong {
	position: absolute;
	left: 230px;
	letter-spacing: -4px;
	color: var(--eventStrongcolor);
}

#sale .clm2 li strong {
	left: 230px;
	bottom: 40px;
	font-size: 50px;
}

#sale .clm2 li strong.digit5 {
	font-size:58px;
	left:230px;
}

.iphone #sale .clm2 li strong {
    font-size: 60px;
}

.android #sale .clm2 li strong {
    font-size: 80px;
}

#sale .clm3 li strong {
	left: 150px;
	bottom: 50px;
	font-size: 40px;
}

.iphone #sale .clm3 li strong {
    font-size: 38px;
}

.android #sale .clm3 li strong {
    font-size: 50px;
}

#sale .clm2 li a:hover,
#sale .clm3 li a:hover {
	text-decoration: none;
}





#sale .clm2 li a,
#sale .clm3 li a {
	clear: both;
	overflow: hidden;
}

p.rtop {
	display:none;
}

#sale .bnsale li strong {
    left: 230px;
    bottom: 40px;
    font-size: 50px;

}

#sale .bnsale li p {
	font-size:11px;
	color:#000;
	background:none;
	padding:0;
	line-height:20px;
	text-align:left;
	font-weight:bold;
}


#sale .bnsale li p span {
	display:inline-block;
	font-weight:inherit;
	font-size:inherit;
	color:inherit;
}

p.btn_sale {
	margin-top:1.0rem;
}

p.btn_sale a {
	display:block;
	background:rgba(198,21,27,1);
	padding:1rem;
	color:#fff !important;
	font-size:1.8rem;
	text-align:center;
	border-radius:5px;
}
p.btn_sale a:hover {
	background:rgba(198,21,27,0.7);
	text-decoration:none !important;
}

#floatbanner {
	display:none;
}

#sale .coupon {
	width:100%;
	padding:54px 108px;
	background:var(--eventCouponbg);
}




#sale .coupon ul li {
	width:100%;
	margin-bottom: 4%;
}

#sale .coupon ul li:last-child {
	margin-bottom:0;
}	
	
#sale .coupon ul {
	text-align: center;
}

#sale .coupon ul li img {
	width:100%;
	max-width: 600px;
	margin: 0 auto;
	
}
	

	
	@media (max-width: 480px) {
  #sale .atn img {
    width: 90%;
    max-width: 300px;
  }
}

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


body {
	background: none;
	box-sizing:border-box;
}

#page,
#main_contents {
	float: none;
	width: auto;
	
}

#otherstore,
#topinformation,
#header,
#header + .area,
#header + .area + .area,
#header + .area + .area + .area,
#side_contents,
#footer,
#page > .hr_solid,
#page > .hr_dashed,
#balloon a {
	display: none;
}

#main_contents .area img {
	width: 100%;
}

#main_contents .area div {
	font-size: 100%;
}


#sale .clm2 li,
#sale .clm2 li.multi {
	width:49%;
	background-size:60%;
	padding: 0.5rem;
	margin-right:1%;
	
	
}

#sale .clm3 li {
	width:32%;
	background-size:60%;
	padding: 0.2rem;
	margin-right:1%;
	border: 3px solid #ef3655;
}


#sale .clm2 li:nth-child(even),
#sale .clm3 li:nth-child(3n) {
	margin-right:0;
}

#sale .clm2 li a,
#sale .clm3 li a {
	display:block;
}


#sale .clm2 li img,
#sale .clm2 li.multi img,
#sale .clm3 li img {
	width:100%;
	height:auto;
	margin:0;
	display:block;
	float:none;
}


#sale .clm2 li h2,
#sale .clm2 li.multi span,
#sale .clm3 li h2 {
	font-size: 0.8rem;
	padding:0.2rem 0;
	margin:0.5rem 0 0;
	line-height:1.2rem;
	display:block;
}
	
	
#sale .clm2.bnsale li h2,
#sale .clm2.point li h2 {
	height: 45px;
	line-height: 45px;
	padding: 0;
	margin-left: 0;
	font-size: 15px;
}
	
#sale .clm2.bnsale li h2.couponlabel {
	line-height: 29px;
}	
	
#sale .clm2.bnsale li h2.couponlabel div {
    width: 40%;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
}
	
	
/*241023 修正

#sale .clm2 li h2.bgsale {
	height: 45px;
	line-height: 45px;
	padding: 0;
}
	
	#sale .clm2 li h2.bgsale.couponlabel {
	line-height: 29px;
}	
	
#sale .clm2 li h2.bgsale.couponlabel div {
    width: 40%;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
}
*/

#sale .bnsale li p span {
	display:block;
}

#sale .clm2 li strong,
#sale .clm3 li strong {
	position:static;
	letter-spacing: -4px;
	/*color: #c0c355;*/
	color:var(--eventStrongcolor);
}

#sale .clm2 li strong,
#sale .clm2 li.multi strong {
	line-height:4.4rem;
	margin:0 0 1rem;
}

.iphone #sale .clm2 li strong,
.iphone #sale .clm2 li.milti strong{
	font-size:2.6rem;
	line-height:3.0rem;
	letter-spacing:-4px;
}

.android #sale .clm2 li strong,
.android #sale .clm2 li.multi strong {
	font-size:2.5rem;
	line-height: 3.4rem;
	letter-spacing:-4px;

}


.iphone #sale .clm2 li strong.digit5 {
	font-size:2.5rem;
}

.android #sale .clm2 li strong.digit5 {
	font-size:2.5rem;
}

#sale .clm3 li strong {
	line-height:3.0rem;
	margin:0 0 1rem;
}

.iphone #sale .clm3 li strong {
    font-size: 2.2rem;
}

.android #sale .clm3 li strong {
    font-size: 2.4rem;
}


#sale .clm2 li p.offsale {
	font-size: 8px;
	line-height: 11px;
}

#sale .clm2 li a:hover,
#sale .clm3 li a:hover {
	text-decoration: none;
}
	


/*#sale .atn {
	margin: 15px 0;
	padding: 15px;
	max-width: 70%;
	text-align: center;
}*/

#sale .salebtn a {
	display: block;
	line-height: 2;
	margin: 15px 0;
	color: #fff;
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	background: #9d7e3c;
	border-radius: 5px;
}

/*
#sale .btn a:hover {
	text-decoration: none;
	color: #333;
	background: #c1e8ff;
}*/

#sale .clm2 li a,
#sale .clm3 li a {
	clear: both;
	overflow: hidden;
}

#sale .clm3 li h2 {
	margin:0;
}

p.rtop,
p.rtop a {
	display:block;
}
	



p.rtop {
	width:70%;
	margin:1.5rem auto;
	text-align:center;
}

p.rtop a {
	background:var(--eventStrongcolor);
	color:#fff !important;
	padding:1rem 0;
}

#sale .bnsale li p {
	font-size:8px;
	text-align: center;
	line-height:11px;
	margin-top:0.5rem;
	margin-bottom: 0rem;
}

#float_event {
	display:none;
}


#sale .coupon {
	padding:2rem;
}
	
#sale p.catch{
		font-size: 0.8rem;
}
	


body {
    padding-bottom: 17.5% !important;
}
	
	

	


#floatbanner {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index:10000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-bottom: 0;
	width: 100%;
}
			
#floatbanner a {
	display: block;
	width: 50%;
	background:var(--eventStrongcolor);
	color:#fff;
	font-size: 2.8vw;
	line-height: 1.6rem;
	padding:0.5rem;
	text-align: center;
	border-left: 1px solid #fff;
}

#floatbanner a span {
	display: block;
	font-size: 3vh;
	font-weight: bold;
}
			
#floatbanner a img {
	width: 100%;
}	

#floatbanner a:hover {
	text-decoration: none;
}

}