#primary{
  container-type: inline-size;
  container-name: primary;	
}

@container primary (width < 441px) {
  #hashmap_main header .panel a{
    font-size: .8rem;
		padding: 2px;
  }
}


.demo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	
	figure{
		display: grid;
		place-items: center;
		background: #ffffff;
	}
}

@media only screen and (min-width: 441px){

.demo iframe {
	width: 80%;
	max-width: 374px;
	aspect-ratio: 374/933;
}
}

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

.demo iframe {
	width: 100%;
	aspect-ratio: 374/933;
}
}


/* チェックボックス自体を非表示にし、隣接ラベルでスタイルを定義するCSS */

.demo_embed{
display: grid;
place-items: start;
background: #f5f6ff;
  border: #e5e5e5 solid 1px;
  border-radius: 6px;
  padding: 0 4px;

b{
	display: block;
	margin-right: 8px;
}
}

.hidden-checkbox:checked + .checkbox-label::before { 
	background: #007bff; 
}

.hidden-checkbox:checked + .checkbox-label::after { /* チェックマーク */
  content: ""; 
	position: absolute; 
	left: 7px; 
	top: 3px;
	display: block;
  width: 6px; 
	height: 11px; 
	border: solid white;
  border-width: 0 3px 3px 0; 
	transform: rotate(45deg);
}

.hidden-checkbox { /* 画面外へ隠す */
  position: absolute; 
	width: 1px; 
	height: 1px; 
  padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip: rect(0, 0, 0, 0); 
}
.checkbox-label { 
	position: relative; 
	padding-left: 36px; 
	cursor: pointer; 
}
.checkbox-label::before { /* ボックス枠 */
  content: ""; 
	position: absolute; 
	left: 0; 
	top: 0;
	display: block;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 2px solid #ccc;
;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.hidden-checkbox:checked + .checkbox-label::before { 
	background: #007bff; 
  border: 2px solid #007bff;
}

.hidden-checkbox:checked + .checkbox-label::after { /* チェックマーク */
  content: ""; 
	position: absolute; 
	left: 8px; 
	top: 4px;
	display: block;
  width: 6px; 
	height: 11px; 
	border: solid white;
  border-width: 0 3px 3px 0; 
	transform: rotate(45deg);
}

/* ★:has() を使った状態変化 */
/* チェックされたinputを持つ親（.todo-item）の中の、カスタムボックスを変化させる */
.todo-item:has(.real-checkbox:checked) .custom-box {
  background-color: #007bff;
  border-color: #007bff;
  transform: scale(1.05); /* ほんの少し弾むエフェクト */
}

/* チェックマークを描画 */
.todo-item:has(.real-checkbox:checked) .custom-box::after {
  transform: rotate(45deg) scale(1);
}

/* 全体のレイアウト */
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
}

/* 本物のチェックボックスは非表示に */
.real-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 1. カスタムチェックボックスの土台 */
.custom-box {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 2. チェックマークの線（擬似要素で作成） */
.custom-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); /* 初期状態は非表示 */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}