.ul {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 480px;
}

.item-container {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: none;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 300px;
	cursor: pointer;
}

.item-containerButton {
	border: 1px solid black;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 300px;
}

.label-model{
    width:180px!important;
    display: inline-block;
    word-wrap: break-word;
    text-align: left;
}

.button-product{
    width:110px!important;
    display: inline-block;
    word-wrap: break-word;
}

.nav-link {
	font-size: 12px;
	cursor: pointer;
	color: black;
	font-weight: bold;
}

.nav-link.disabled {
	color: gray !important;
	pointer-events: none;
}


div.productNext {
	width: 90%;
}
div.nextBtnArea {
	width: 100%;
	text-align: center;
}
div.nextBtnArea input[type='button'] {
	width: 70%;
	max-width: 24em;
	min-width: 12em;
	height: 3em;
	border-radius: 20px;
	border: 1px solid gray;
	background-color: lightgray;
	cursor: pointer;
}
div.nextBtnArea input[type='button']:disabled {
	cursor: auto;
}

.mt20{margin-top:20px;}


.banner{
	max-width: 50%;
    text-align: center;
}

.jpg{
	max-width: 100%;
    text-align: center;
}

.back-yellow {
  background-color:  #f6f4f1; 
  max-width: 650px;                /* 親要素の60% */
  margin: 0 auto;            /* 横中央寄せ */
  text-align: center;        /* 文字を中央寄せ */
  padding-top: 5px;
  padding-bottom: 20px;
}
.member-column {
  background-color:  #ffffff;
  display: flex;
  align-items: center;
  gap: 10px; /* numとcontentsの間の余白 */
  margin: 30px 30px 30px 30px;
  padding: 20px 20px 20px 10px;
}

.num {
	color: #ff8000;
  display: flex;
  flex-direction: column;
  align-items: center; /* num-pointとnum-numを中央揃え */
  width: 60px; /* 幅を固定 */

}

.num-point {
  font-weight: 900;
  font-size: 1em; /* num-numの半分程度の大きさ */
  margin-bottom: 4px; /* 下のnum-numとの間隔 */
}

.num-num {
  font-size: 2em;
}
.contents {
  flex: 1;
  text-align: left;
  position: relative; /* ← 疑似要素を配置するために必要 */
  padding-left: 20px; /* ← 線とテキストの間に余白 */
}

/* 擬似要素で左線を引く */
.contents::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 10px;
  width: 1px;
  background-color: #c0c0c0;
}

.contents .header {
  font-size: 1.5em;
 height: 100%;  
}
.contents .points {
  font-size: 1.2em;
  list-style: inside disc;
  padding-left: 1.2em;     /* 左に余白を作る */
  text-indent: -1.2em;     /* 1行目を元に戻す（ぶら下げインデント） */
  margin: 0;
  color: black;
}
.contents .notes {
  font-size: 1em;
  color: black;
  padding-left: 2em;   /* 箇条書きのテキスト位置と揃える */
  text-indent: -2em;   /* 1行目を左に引っ込めて、ぶら下げインデント */
}
.p1 {
	font-size: 2em;
	margin: 25px 50px 25px 50px;
	
}
.p2 {
	margin: 25px 50px 25px 50px;
	font-size: 1.5em;
	color: black;
}

@media (max-width: 600px) {
  .contents .header {
    font-size: 5vw; /* 画面幅の5% */
  }
  .contents .points {
    font-size: 4vw;
  }
  .contents .notes {
    font-size: 3.5vw;
  }
  .p1 {
    font-size: 6vw;
    margin: 20px 15px;
  }
  .p2 {
    font-size: 5vw;
    margin: 20px 15px;
  }
  .num-num {
    font-size: 8vw;
  }
  .num-point {
    font-size: 4vw;
  }
  
.banner{
	max-width: 80%;
    text-align: center;
}
}