#jq_pricing_table_ul,#jq_maiwari_table_ul,#jq_spine_width_table_ul{
	list-style-type: none;
}
#jq_pricing_table_ul li,#jq_spine_width_table_ul li{
	background: white;
	padding: 5px 20px;
	text-align: right;
	
}
#jq_pricing_table_ul li span.price_detail_span{
	display: inline-block;
	width: 100px;
}

#jq_pricing_table_ul li#total_amount{
}
li#total_amount span{
	align-self: baseline;
	font-weight: bold;
	font-size: 1.5em;
}
li#total_amount span.large{
	font-size: 2em;
	font-weight: bold;
}


/* 毎割 */
#jq_maiwari_table_ul li{
	background: white;
	
	
}

@media screen and (min-width:481px){
	#jq_maiwari_table_ul li{
		display: flex;
		padding: 5px 0;
		margin: 0 0 5px 0;
	}

}

@media screen and (max-width:480px){
	#jq_maiwari_table_ul li{
		border-radius: 5px;
		width: 96%;
		margin: 0 auto 15px;
		box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .3);
	}
}

/*
#jq_maiwari_table_ul li.open{
	cursor: pointer;
}
*/
#jq_maiwari_table_ul li.open:hover{
	opacity: 0.7;
}
/*
#jq_maiwari_table_ul li.not_login{
	cursor: pointer;
}
*/
#jq_maiwari_table_ul li.not_login:hover{
	opacity: 0.7;
}
#jq_maiwari_table_ul li.closed{
	opacity: 0.2;
}

#jq_maiwari_table_ul li div.css_maiwari_plan{
	background: gainsboro;
	font-weight: bold;
}

@media screen and (min-width:481px){
	#jq_maiwari_table_ul li div.css_maiwari_plan{
		display: flex;
		align-items: center;
		width: 140px;
		padding: 0 10px;
	}
}

@media screen and (max-width:480px){
	#jq_maiwari_table_ul li div.css_maiwari_plan{
		text-align: center;
		padding: 5px;
		border-radius: 5px 5px 0 0;
	}
}

@media screen and (min-width:481px){
	#jq_maiwari_table_ul li dl{
		padding-left: 10px;
		width: 300px;
	}
}
@media screen and (max-width:480px){
	
}

#jq_maiwari_table_ul li dl div{
	display: flex;
	padding: 3px 0;
}

@media screen and (min-width:481px){
	#jq_maiwari_table_ul li dl div dt{
		width: 100px;
	}
}

@media screen and (max-width:480px){
	#jq_maiwari_table_ul li dl div dt{
		padding-right: 10px;
		width: 30%;
		text-align: right;
	}
}

.sunday{
	color: red;
}
.saturday{
	color: royalblue;
}

#jq_maiwari_table_ul li div.discount-display{
	display: flex;
	padding: 0 10px;
	align-items: center;
	width: 350px;
}

#jq_maiwari_table_ul li div.discount-display span.total_amount{
	align-self: baseline;
}
#jq_maiwari_table_ul li div.discount-display span.large{
	font-size: 2em;
	font-weight: bold;
}
#jq_maiwari_table_ul li div.discount-display span.discount_amount{
	border-radius: 3px;
	background: red;
	color: white;
	padding: 2px 10px;
}
#jq_maiwari_table_ul li div.purchase-btn-area{
	font-weight: bold;
	cursor: pointer;
}
@media screen and (min-width:481px){
	#jq_maiwari_table_ul li div.purchase-btn-area{
		flex-grow: 1;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
@media screen and (max-width:480px){
	#jq_maiwari_table_ul li div.purchase-btn-area{
		border-radius: 0 0 5px 5px;
		text-align: center;
	}
}
.purchase-btn-area.open{
	background: cornflowerblue;
	color: white;
	font-size: 1.5em;
}
.purchase-btn-area.closed{
	background: crimson;
	color: white;
	font-size: 1.5em;
}

.purchase-btn-area.not_login{
	background: cornflowerblue;
	color: white;
}
@media screen and (min-width:481px){
	.purchase-btn-area.not_login{
		font-size: 1em;
	}
}

@media screen and (max-width:480px){
	.purchase-btn-area.not_login{
		font-size: 1.5em;
	}
}


li#spine_width_li span{
	align-self: baseline;
	font-weight: bold;
	font-size: 1.5em;
}
li#spine_width_li span.large{
	font-size: 2em;
	font-weight: bold;
}

.progress_bar{
  /* 進捗バーの基本的なスタイル */
  width: 100%;
  height: 5px;
  border-radius: 1px;
  background-color: #e0e0e0; /* バーの空の背景色 */

  /* data-valueの値に応じて背景を塗りつぶす */
  /* ここが最も重要な部分です */
  background: linear-gradient(
    to right,
    #4ad14a 0%, /* 左端の色 */
    #4ad14a var(--progress-width), /* progress-widthまで同じ色 */
    #e0e0e0 var(--progress-width), /* progress-widthから右の空の色 */
    #e0e0e0 100%
  );
}
.progress_bar.is-yellow{
	background: linear-gradient(
    to right,
    #ffc107 0%, /* 左端の色 */
    #ffc107 var(--progress-width), /* progress-widthまで同じ色 */
    #e0e0e0 var(--progress-width), /* progress-widthから右の空の色 */
    #e0e0e0 100%
  );
}
.progress_bar.is-red{
	background: linear-gradient(
    to right,
    #dc3545 0%, /* 左端の色 */
    #dc3545 var(--progress-width), /* progress-widthまで同じ色 */
    #e0e0e0 var(--progress-width), /* progress-widthから右の空の色 */
    #e0e0e0 100%
  );
}