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

/* -------- mypage ---------------*/


/* signup */
#mypage .formwrap{
	border: 1px solid var(--border-color2);
	padding: var(--gap2);
	border-radius: var(--border-radius1);
	}
	#mypage .informations{
		margin-bottom: var(--gap2);
		}
	#mypage .informations h5{
		margin-bottom: 10px;
		}
	@media screen and (max-width: 781px) {
		#mypage .formwrap{
			border: none;
			padding: 0;
			border-radius: 0;
			}
	}

/* mypage top */
#mypage .mypagemenu{
	margin-top: var(--gap3);
	}
	#mypage .mypagemenu li{
		border: 1px solid var(--border-color1);
		border-radius: var(--border-radius1);
		padding: var(--gap1);
		background: var(--bg-color1);
		}
	#mypage .mypagemenu a{
		display: block;
		text-decoration: none;
		}
	#mypage .mypagemenu li:hover{
		background: var(--bg-color3);
		}
	#mypage .mypagemenu span{
		font-size: 40px;
		display: flex;
		justify-content: center;
		}
	#mypage .mypagemenu span::before{
		margin: 0;
		color: var(--accent-color2);
		}
	#mypage .mypagemenu h3{
		border: none;
		padding: 0;
		font-size: 1.2rem;
		margin: var(--gap1) 0 0;
		text-align: center;
		}
	#mypage .mypagemenu p{
		margin: var(--gap1) 0 0;
		color: var(--accent-color3);
		font-size: .9rem;
		}
	@media screen and (max-width: 599px) {
		#mypage .mypagemenu span{
			font-size: 30px;
			}
		#mypage .mypagemenu h3{
			font-size: 1rem;
			margin: 5px 0 0;
			}
		#mypage .mypagemenu p{
			margin: 5px 0 0;
			}
	}

/* mypage history */
#mypage .searchbox{
	margin-bottom: var(--gap2);
	}
#mypage .ordernumber{
	display: flex;
	justify-content: space-between;
	}


.orderlist{
	margin-bottom: var(--gap2);
	border-bottom: 1px solid var(--border-color2);
	}
	.orderlist > div{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 5px var(--gap1);
		padding: var(--gap1) 0;
		}
	.orderlist .header{
		background: var(--bg-color3);
		border-top: 1px solid var(--border-color2);
		flex-wrap: wrap;
		justify-content: space-between;
		}
	.orderlist .detail{
		border-top: 1px solid var(--border-color2);
		}
	.cartlist .detail.close_item{
	    background: #f2d9e4;
		}
	.cartlist .title span.close_txt{
	    color: var(--accent-color4);
    font-weight: bold;
		}



	.orderlist .footer{
		border-top: 1px solid var(--border-color2);
		justify-content: end;
		}
	.orderlist .thumb{
		flex: 1 1 10%;
		text-align: center;
		}
		.orderlist .thumb img{
			width: 60px;
			height: 80px;
			object-fit: contain;
			margin: 0 auto;
			}
	.orderlist .cont{
		flex: 1 1 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap1);
		}
	.orderlist .title{
		flex-basis: 80%;
		}
		.orderlist .title span{
			display: block;
			color: var(--accent-color3);
			font-size: .9rem;
			}
	.orderlist .price{
		flex-basis: 20%;
		}
	.orderlist .header > *{
		padding: 0 var(--gap1);
		}
	.orderlist .footer > *{
		padding: 0 var(--gap1);
		}
	.orderlist .totalprice{
		font-size: 1.2rem;
	    color: var(--accent-color1);
		}

		.orderlist .totalprice span.note{
		font-size:0.7em;
		}
	@media screen and (max-width: 599px) {


		.orderlist .thumb{
			flex: 1 1 30%;
			}
		.orderlist .cont{
			flex: 1 1 70%;
			flex-wrap: wrap;
			}
		.orderlist .title,
		.orderlist .price{
			flex-basis: 100%;
			}

		.orderlist .price{
		order: 1;
		margin-left: auto;
		}
		.orderlist .volume{
		order: 2;
		margin-left: auto;
		}
		.orderlist .header .ordernumber{
			flex-basis: 100%;
			}
	}
/* mypage point */
#mypage .pointheld{
	align-items: center;
	margin-bottom: var(--gap2);
	}
	#mypage .pointheld .point{
		text-align: center;
	    padding: var(--gap1) 0;
	    border-top: 1px solid var(--border-color1);
	    border-bottom: 1px solid var(--border-color1);
		}
	#mypage .point_limit{
	margin-top: 1rem;
	color: var(--accent-color2);
	font-weight: bold;
	}
	#mypage .pointheld span{
		display: block;
		}
	#mypage .pointheld span::before{
		display: block;
		font-size: 40px;
		color: var(--accent-color2);
		}
	#mypage .pointheld strong{
		font-size: 3rem;
		color: var(--accent-color2); 
		}
	#mypage .pointheld small{
		font-size: 2rem;
		margin: 0 5px;
		color: var(--accent-color2);
		}
#mypage .pointhowto{
	margin-bottom: var(--gap2);
	padding: var(--gap2);
	background: var(--bg-color3);
	border-radius: var(--border-radius1);
	}
	#mypage .pointhowto h3{
		margin: 0 0 var(--gap2);
		padding: 0;
		border: none;
		font-weight: bold;
		}
	#mypage .pointhowto h4{
		margin: 0 0 var(--gap1);
		padding: 0;
		background: none;
		}
	#mypage .pointhowto h4+p{
		border-bottom: 1px solid var(--border-color2);
		margin-bottom: 10px;
		padding-bottom: 10px;
		}
	#mypage .pointhowto .sans-serif{
		font-size: .9rem;
		}
	#mypage .pointhowto strong{
		color: var(--accent-color2);
		}
.pointlist{
	margin-bottom: var(--gap2);
	border-bottom: 1px solid var(--border-color2);
	}
	.pointlist > div{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 5px var(--gap1);
		padding: var(--gap1);
		}
	.pointlist .header{
		background: var(--bg-color3);
		border-top: 1px solid var(--border-color2);
		}
	.pointlist .detail{
		border-top: 1px solid var(--border-color2);
		}
	.pointlist .pointdate{ flex-basis: 15%; text-align: center; }
	.pointlist .point{ flex-basis: 20%; text-align: center; }
	.pointlist .pointdetail{ flex-basis: 50%; }
	.pointlist .detailbtn{ flex-basis: 15%; text-align: center; }
	.pointlist small{
		display: block;
		color: var(--accent-color2);
		}
	.pointlist .detail .point{
		color: var(--accent-color1);
		}
	@media screen and (max-width: 599px) {
		#mypage .pointheld strong{
			font-size: 2.5rem;
			}
		#mypage .pointheld small{
			font-size: 1.5rem;
			}
		.pointlist > div{
			flex-wrap: wrap;
			}
		.pointlist .header{
			display: none;
			}
		.pointlist .pointdate{ flex-basis: 15%; text-align: left; }
		.pointlist .point{ flex-basis: 50%; text-align: center; }
		.pointlist .pointdetail{ flex-basis: 70%; order: 4; }
		.pointlist .detailbtn{ flex-basis: 20%; text-align: right; order: 3; white-space: nowrap; }
		.pointlist .point small{
			display: inline-block;
			}
	}

/* mypage coupon */
#mypage .coupon{
	margin-bottom: var(--gap3);
	}

#mypage .discount.coupon {
    margin-bottom: 0;
}
	#mypage .coupon .couponticketinner{
		width: 450px;
		max-width: 100%;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset, 0 2px 4px rgba(0, 0, 0, .1);
		}
	#mypage .coupon .prize{
		background: url(../images/imgcoupon.jpg) no-repeat center;
		background-size: cover;
		text-align: center;
		padding: var(--gap2);
		padding-right: calc( var(--gap2) + 35%);
		color: #fff;
		position: relative;
		text-align: center;
		}
	#mypage .coupon .prize .logo{
		background: url(../images/logow.png) no-repeat center;
		background-size: contain;
		width: 30%;
	    height: 30px;
		text-indent: -9999px;
		position: absolute;
		right: var(--gap2);
		top: 50%;
		margin-top: -15px;
		}
	#mypage .coupon .prize strong{
		display: inline-block;
		vertical-align: middle;
		font-size: 3rem;
		letter-spacing: .2rem;
		}
	#mypage .coupon .prize small{
		display: inline-block;
		vertical-align: bottom;
		font-size: 1.2rem;
		}
	#mypage .coupon .prize span{
		font-size: 1rem;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 3px 0;
		display: block;
		margin-top: 10px;
		}
	#mypage .coupon .cont{
		padding: var(--gap1);
		position: relative;
		padding-right: calc( var(--gap1) + 25%);
		}
	#mypage .coupon .cont .img{
		width: 25%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
		}
	#mypage .coupon .cont h3{
		border: none;
		padding: 0;
		margin: 0;
		font-size: 1.2rem;
		}
	#mypage .coupon .cont p{
		font-size: .9rem;
		}
	#mypage .coupon .information{
		font-size: .9rem;
		}
	#mypage .coupon .information h4{
		background: none;
		padding: 0;
		margin: 10px 0 0;
		font-size: 1rem;
		}
	@media screen and (max-width: 781px) {
		#mypage .coupon{
			flex-wrap: wrap;
			}
	}
	@media screen and (max-width: 599px) {
		#mypage .coupon .couponticket{
			flex-basis: 100%;
			}
		#mypage .coupon .couponticketinner{
			width: auto;
			}
		#mypage .coupon .prize strong{
			font-size: 2.5rem;
			}
	}

/* cart */

#cart span.small {
    font-size:12px;
    display: block;
}
#cart .inner_err_message{
    display:none;
    color: var(--accent-color4);
    font-size: 13px;
    font-weight: bold;
}
#cart  h3{
	color:  var(--accent-color1);
	padding: 0 0 0 24px;
	margin: var(--gap1) 0;
	position: relative;
	font-weight: 600;
	border: 0;
	}
	#cart h3:before{
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		border-radius: 9px;
		border: 1px solid var(--accent-color1);
		position: absolute;
		left: 0;
		top: 4px;
		}
#cart  h4{
	}

#cart input.btnnext:disabled {
    background: #ddd;
    border-color: #ddd;
    pointer-events: none;
}
.cartlist{
	margin-bottom: var(--gap2);
	border-bottom: 1px solid var(--border-color2);
	}
	.cartlist > div{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap1);
		padding: var(--gap1);
		border-top: 1px solid var(--border-color2);
		}
	.cartlist .header{
		background: var(--bg-color3);
		padding-left: 0;
		}
	.cartlist .detail{
		padding-left: 0;
		}
	.cartlist .subtotal{
		background: #fcfcfc;
		}
	.cartlist .footer{
		background: var(--bg-color3);
		flex-wrap: wrap;
		gap: 0;
		}
	.cartlist .footer .note{
		width: 100%;
		text-align: right;
	}
	.cartlist .footer .note.small{
		width: 100%;
		text-align: right;
		margin-top: 0;
		font-size: 12px;
	}
	.cartlist .thumb{
		flex: 1 1 10%;
		text-align: center;
		}
		.cartlist .thumb img{
			width: 60px;
			height: 80px;
			object-fit: contain;
			margin: 0 auto;
			}
	.cartlist .cont{
		flex: 1 1 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap1);
		}
	.cartlist .title{
		flex-basis: 65%;
		}
		.cartlist .title span{
			display: block;
			color: var(--accent-color3);
			font-size: .9rem;
			}
	.cartlist .volume{
		flex-basis: 10%;
		text-align: center;
		}
		.cartlist .volume label{
			display: none;
			}
	.cartlist .price{
		flex-basis: 15%;
		text-align: center;
		}
	.cartlist .price span.note{
	font-size: 10px;
	}
	small.note{
    font-size: 0.8em;
    display: inline;
	}
	small.note.tax{
    display:block;
    padding-top:0px;
	}
	.cartlist .tax{
		flex-basis: 10%;
		text-align: center;
		}


		.cartlist .detail .price{
			color: var(--accent-color1);
			text-align: right;
			font-size: 1.2rem;
			}
	.cartlist .delete{
		flex-basis: 10%;
		text-align: center;
		}
	.cartlist .pricetitle{
		color: var(--accent-color1);
		}
	.cartlist .totalpoint{
		margin-left: auto;
		}
	.cartlist .subtotal .totalprice{
		color: var(--accent-color1);
		text-align: right;
		}
	.cartlist .subtotal .totalprice span.hilight{
		color: var(--accent-color4);
		}
	.cartlist .subtotal.point .totalprice,
	.cartlist .subtotal.coupon .totalprice{
		color: var(--accent-color4);
		}
	.cartlist .total .totalprice{
		font-size: 2rem;
		text-align: right;
	    color: var(--accent-color1);
		}

.cartlist .total .totalprice em{
font-size:14px;
font-style:normal;
}
	.cartlist input[type="button"]{
		min-width: unset;
		font-size: .9rem;
		padding: 10px;
		background: var(--bg-color1);
		border: 1px solid var(--border-color1);
		color: var(--accent-color1);
		}
		c.cartlist input[type="button"]
	.cartstep .cartlist .detail .price{
		font-size: 1rem;
		}
	@media screen and (max-width: 599px) {

		.cartlist .price:before,
		.cartlist .volume:before {
    content: attr(data-label);
    margin-right: 4px;
    font-size: .9rem;
    color: var(--txt-color);
}
		.cartlist .header{
			display: none;
			}
		.orderlist .header{
		display: flex;
		gap: 0;
		}
.orderlist .header + .header {
    display: none;
}
		.cartlist .thumb{
			flex: 1 1 30%;
			}
		.cartlist .cont{
			flex: 1 1 70%;
			flex-wrap: wrap;
			}
		.cartlist .title{
			flex-basis: 100%;
			}
		.cartlist .volume{
			flex-basis: unset;
			text-align: left;
			}
		.cartlist .volume label{
			display: inline-block;
			margin: 0;
			font-size: .9rem;
			display:none;
			}
			#cart.maincart .cartlist .volume:before{
			display:none;
			}
		.cartlist .price{
			flex-basis: unset;
			}
		.cartlist .delete{
			flex-basis: unset;
			margin-left: auto;
			}
		.cartlist .footer{
			flex-wrap: wrap;
			justify-content: space-between;
			}
		.cartlist .total .totalprice{
			font-size: 1.8rem;
			flex-basis: 100%;
			}
		.cartstep .cartlist .pricetitle{
			flex-basis: unset;
			}
		.cartstep .cartlist .totalprice{
			flex-basis: unset;
			}
	}

.txt_right{
text-align:right;
}
.cartpack{
	margin: var(--gap2) 0;
	border: 1px solid var(--border-color2);
	padding: var(--gap2);
	background: #fcfcfc;
	}
.cartpack li .detail:has(.editlink) {
    justify-content: space-between;
}

.cart_wrapper h5 + .cartpack {
    margin-top: 1rem;
}
	.cartpack li{
		display: flex;
		justify-content: space-between;
		gap: 10px var(--gap2);
		}
	.cartpack li:not(:last-child){
		margin-bottom: var(--gap1);
		padding-bottom: var(--gap1);
		border-bottom: 1px solid var(--border-color2);
		}
	.cartpack li .editlink{
    min-width: max-content;
	}
	.cartpack li label{
		flex-basis: 30%;
		font-weight: bold;
		margin-right: 0 !important;
		}
	.cartpack li label input[type="radio"]{
		transform: scale(1.2);
		}
	.cartpack li .detail{
		flex-basis: 70%;
		position: relative;
		}
	.cartpack li .detail label{
		flex-basis: unset;
		font-weight: normal;
		display: block;
		}
	@media screen and (max-width: 599px) {
		.cartpack li{
			flex-wrap: wrap;
			}
		.cartpack li label{
			flex-basis: 100%;
			}
		.cartpack li .detail{
			flex-basis: 100%;
			width: calc( 100% - 34px );
			margin-left: 34px;
			}
		.cartpack li .detail .inputm{
			max-width: 100%;
			}
	}

#cart .progresstrackers{
	margin-bottom: var(--gap3);
	}
#cart .information{
	margin-bottom: var(--gap2);
	}
#cart .remarks{
	border: 1px solid var(--border-color2);
	padding: var(--gap2);
	margin: var(--gap2) 0;
	}




  /*カートレイアウト調整*/
  .popup.cart h4 a {
    font-size: 14px;
    text-decoration: underline;
  }
  .popup.cart h4 {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .popup.cart {
    height: fit-content;
    width: 95vw;
    max-height: 80vh;
    max-width: 840px;

  }
  .popup.cart .scroll {
    overflow: scroll;
    max-height: 60vh;
  }
  #cart .inner_sumbmit {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  #cart .inner_sumbmit .btn {
    width: fit-content;
    min-width: fit-content;
    height: 40px;

  }
  #cart .inner_submit input[type="submit"] {
    width: unset;
    min-width: fit-content;
  }
  #cart .inner_submit_input {
    width: calc(100% - 7rem);
  }
  #cart .editlink {
    display: block;
    text-align: right;
  }
  #cart .inner_submit_input input {
    margin-bottom: 0.5rem;
  }
  #cart .inner_submit_input input.num {
    text-align: right;
  }
  #cart .cart_wrapper {
    display: flex;
    flex-direction: row-reverse;
    gap: 3rem;
    align-items: start;
  }
 #cart .payment_type{
    margin-bottom: 1rem;
    font-weight: bold;
}
  #cart .cart_wrapper aside {
    width: 30%;
    min-width: 290px;
    position: sticky;
    top: 64px;
  }
  #cart .cartlist .subtotal {
   padding: 0.5rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
  }


/*カートcss追加*/
#cart .cartlist > div.cart_price_inner .subtotal {
    padding: 0;
}
#cart .cartlist .subtotal_wrap {
    width: 100%;
    padding: 4px 0px;
}
#cart .cartlist .subtotal_wrap .note {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
}
.cartlist > div.cart_price_inner {
    padding: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem;
    background: #fcfcfc;
}
.cartlist > div.cart_price_inner:empty {
    display: none;
}
#cart .cartlist .subtotal + .subtotal {
   border-top: 0;
    padding-top: 0;
}

#cart .cartlist > div.cart_price_inner .subtotal.discount {
    padding-left: 2rem;
    font-size: 12px;
}






  .popup.cart .popup_footer {
    position: sticky;
    bottom: 7rem;
    background: var(--bg-color3);
    width: 100%;
    left: 0;
    padding: 2rem;
    display: flex;
    border-top: 1px solid var(--border-color2);
    justify-content: end;
  }


  @media screen and (max-width: 1024px) {
    #cart .cart_wrapper {
      display: block;
    }

    #cart .cart_wrapper aside {
      width: 100%;
      position: initial;
    }
  }


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


  }

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

.popup.cart .popup_footer{
    justify-content:center;
}
  }