body {
  > main {
	> section {
	  > article {
		line-height: 150%;
		container-type: inline-size;
		strong {
		  color:oklch(from currentColor calc(l + 0.1) 0.75 calc(h + 30) );
		}
		form {
		  user-select: none;
		  margin: 0.5em;
		  padding: 0.5em;
		  border:2px solid;
		  border-radius: 4px;
		  label[for] {
			display: inline-block;
			cursor: pointer;
			user-select: none;
		  }
		  input[type=radio],input[type=checkbox] {
			display: none;
			body.debug & {
			  display: unset;
			}
		  }

		  @container (width >= 800px) {
			display: grid;
			grid-template-columns: 40% 60%;
			grid-template-rows: 160px min-content;
			grid-auto-flow: column;
		  }

		  > section {
			span.price { font-family: "Meiryo", "Yu Gothic", "MS PGothic", "Hiragino Mincho ProN", sans-serif; }
			> div.selbtn {
			  display:flex;
			  width: 100%;
			  max-width: 25em;
			  min-height: 5em;

			  dl,dt,dd { margin:0; padding:0; }
			  dt,dd { margin-bottom: 0.5em; }

			  label {
				flex: 1 1 auto;
				display:flex;
				justify-content: center;
				align-items: center;
				container-type: inline-size;
				margin: 0 0.5em;
				padding: 0.5em;
				border: 2px solid;
				border-radius: 8px;
				font-size: clamp(0.5em, 5cqi, 24px);
				--backColor: oklch(0.5 0.04 80);
				border-color: oklch(from var(--backColor) clamp(0.2,calc(1 - l),0.8) c h);
				color: oklch(from var(--backColor) clamp(0.2,var(--test-contrast),0.8) 0 0);
				background: oklch(from var(--backColor) l c h);
				input:checked + &, &.chked {
				  color: oklch(from var(--backColor) clamp(0,var(--test-contrast),1) 0 0);
				  background: oklch(from var(--backColor) calc(l + 0.15) calc(c + 0.2) h);
				}
			  }
			  &.mon,&.tai,&.haiso {
				label {
				  justify-content: flex-start;
				  font-size: clamp(14px, 2cqi, 18px);
				  span { flex:1; text-align:right; }
				}
			  }
			  &.haiso {
				max-width: unset;
				min-height: unset;
				&.time {
				  flex-flow: row wrap;
				  label {
					flex: 0 0 5.5em;
					display: inline-block;
					margin: 4px;
					text-align: center;
				  }
				}
				dd:not(:has(input)) {
				  padding-left: 1.5em;
				}
			  }
			}

			h2 {
			  font-size: 1em;
			}

			display:none;
			&#rbsel {
			  grid-column: 1 / 2;
			  grid-row: auto;
			  display:block;
			  &:has(input[name=rb]:checked) + #shosel {
				display:block;
			  }
			}
			&#shosel {
			  grid-column: 1 / 2;
			  grid-row: auto;
			  .list {
				display:none;
			  }
			  div:has(input[name=__mon]:checked) ~ .list.mon {
				display:block;
			  }
			  div:has(input[name=tai]:checked) ~ .list.tai {
				display:block;
			  }
			  &:has(input[type=checkbox]:checked) + #orderinfo {
				display:block;
			  }
			}
			&#orderinfo {
			  grid-column: 2 / 3;
			  grid-row: 1 / 3;
			  > div.sheet {
				> div {
				  > label, > input {
					display: block;
					width: 100%;
				  }
				}

				@container (width >= 400px) {
				  display: grid;
				  grid-template-columns: 10em 1fr;
				  gap: 4px;

				  > div {
					display: grid;
					grid-column: 1 / -1;
					grid-template-columns: subgrid;
					align-items: center;
					> label, > input {
					  display: inline-block;
					  width: auto;
					}
					p { grid-column: 1 / -1; }
				  }
				}
			  }
			  &:has(input[name=bin][type=radio]:checked) + #calc {
				display: block;
				&:has(div#sum:empty) {
				  display:none;
				  &:has(.beforetime, .endtime) {
					display: block;
				  }
				}
			  }
			}
			&#calc {
			  grid-column: 1 / 3;
			  grid-row: auto;
			  
			  &:has(.beforetime, .endtime) {
				display: block;
			  }

			  div#sum {
				dl {
				  max-width: 30em;
				  label {
					display: flex;
					span { flex:1; text-align:right; }
					&.sum {
					  margin-top: 4px;
					  padding-top: 4px;
					  border-top:1px solid;
					}
				  }
				}
			  }

			}
		  }
		}
	  }
	}
  }
}