.box450px1fr {
  max-width: 450px;
	width: 100%;
  min-width: 0;
}
.twocolumngrid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
}
.container {
	background-color: white;
	padding: 0.5rem;
	border-radius: 1rem;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
	max-width: 450px;
	width: 100%;
}
#draggable-list {
	padding: 0;
	list-style: none;
}
#draggable-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1rem;
	background-color: #f1f5f9;
	border-radius: 0.5rem;
	margin-bottom: 0.5rem;
	cursor: grab;
   transition: transform 0.2s ease, opacity 0.2s ease;
	font-size: 0.875rem; /* リストアイテムの文字サイズを小さく */
}
#draggable-list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dragging {
	opacity: 0.5;
	transform: scale(1.02);
}
.delete-btn {
	background-color: #ef4444;
	color: white;
	font-size: 0.75rem;
	font-weight: bold;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.delete-btn:hover {
	background-color: #dc2626;
}
.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;/**/
	justify-content: center;
}
.secondary {
	flex: 0 0 100px;
	padding: 0.2rem 0.3rem;/**/
	/*color: white;*/
	/*border: none;*/
  border: 1px solid #999;
	border-radius: 0.5rem;
	font-size: 0.5rem;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	white-space: nowrap;
}
.secondary:hover {filter: brightness(0.8);}
#size-toggle-checkbox:checked ~ #smbuttons .secondary {
  flex: 0 0 120px; /* 例: 100pxから120pxに拡大 */
  font-size: 0.7rem;  /* 2. 文字サイズを大きくする *//* 例: 0.5remから0.7remに拡大 */
  padding: 0.4rem 0.5rem;/* 3. ボタンの高さ(パディング)も調整し、ボタン全体を大きく見せる */
}
/* ------------------------------------ */
.bgwi { background-color: #dff; }
.bgsh { background-color: #dcf; }
.bgdr { background-color: #cfc; }
.bgau { background-color: #ffd; }
.bgsa { background-color: #fdd; }
.bggn { background-color: #fec; }
.bgji { background-color: #efd; }
.bgun { background-color: #cdf; }

.bgwi2 { background-color: #eff; }
.bgsh2 { background-color: #eef; }
.bgdr2 { background-color: #dfd; }
.bgau2 { background-color: #ffe; }
.bgsa2 { background-color: #fee; }
.bggn2 { background-color: #feb; }
.bgji2 { background-color: #efe; }
.bgun2 { background-color: #eef; }
/*.bgwi2 { background-color: #eef; }*/
/*.bgun2 { background-color: #ddf; }*/
/*.bggn2bk { background-color: #edb; }
.bggn2bk2 { background-color: #edc; }*/

.bgwi3 { background-color: #aee; }
.bgsh3 { background-color: #a9c; }
.bgdr3 { background-color: #9b9; }
.bgau3 { background-color: #cc9; }
.bgsa3 { background-color: #c99; }
.bggn3 { background-color: #cba; }
.bgji3 { background-color: #bca; }
.bgun3 { background-color: #9ad; }

.bgsp { background-color: #f96; }
.bgnn { background-color: #ccc; }
.bgad { background-color: #ddd; }
.bgae { background-color: #eee; }

/* ------------------------------------ */
/* 非表示にして疑似的にボタン型にラップ (input要素の共通スタイル) */
.toggle-input {
    display: none; 
}

/* ラベル (ボタン型) の共通スタイル */
.toggle-button {
    user-select: none; /* テキスト編集オフ */
    display: inline-block;
    border: 1px solid #999; 
    border-radius: 4px;     
    padding: 0.1rem 0.1rem; 
    background-color: transparent; 
    color: #333;               
    cursor: pointer;
}

/* ホバー時は線と文字の色を濃くする */
.toggle-button:hover {
    border-color: #000;
    color: #000;
}

/* 選択中強調 (対応するinputがチェックされた時のlabelのスタイル) */
/* IDセレクタは維持しつつ、共通のスタイルをクラスで定義し直す */
#toggleEnergy:checked + .toggle-button,
#toggleSpName:checked + .toggle-button { 
/* または、HTML側でinputにクラス（例: .toggle-input）を付与し、
   .toggle-input:checked + .toggle-button とすることも可能です。
   ただし、元のCSSはIDベースだったので、今回は元の構造に沿ってIDとクラスの組み合わせにします。
*/
    background-color: #007bff; /* 青系の背景色 */
    color: white;               /* 白の文字色 */
    border-color: #007bff;      /* 枠線の色も統一 */
}
/* ------------------------------------ */
.smbtn {
    /* 背景と文字の色 */
    /* background-color: #007bff; 例: 青色 */
    color: #000;

    /* ボタンの余白を調整してサイズを小さくする */
    padding: 5px 10px; /* 上下5px、左右10px */

    /* フォントサイズを小さくする */
    font-size: 12px; /* 小さめのフォントサイズ */

    /* その他のスタイル */
    border: 1px solid #999;
    border-radius: 4px; /* 角を丸くする */
    cursor: pointer; /* マウスカーソルをポインターにする */
    text-decoration: none; /* <a>タグの場合、下線を消す */
    display: inline-block; /* <a>タグの場合、paddingが効くようにする */
      margin: 1px;/* */
}

/* ホバー時のスタイル（オプション） */
.smbtn:hover {
  filter: brightness(0.8);
  /* background-color: #0056b3; 少し濃い青 */
}
.emoji {
    font-family:
        /* 1. ローカルの絵文字フォントを優先（OSにより異なる） */
        "Segoe UI Emoji",        /* Windows */
        "Apple Color Emoji",     /* macOS/iOS */
        "Noto Color Emoji",      /* Android/Linux/一部環境 */

        /* 2. 一般的な絵文字対応フォントのカテゴリ */
        "Twemoji Mozilla",       /* Firefoxのカスタム絵文字対応 */

        /* 3. 代替の標準フォント（絵文字フォントが使えない場合に備えて） */
        sans-serif;              /* 最後にサンセリフ系のフォントを指定 */
}
/* ------------------------------------ */
.quickspgrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  max-width: 450px; /* 最大幅 */
  border: 1px solid #000;  /*全体の枠線（右下もここでカバー） */
  margin-top: 2px;
  border-radius: 8px;
  overflow: hidden; /* 丸め&はみだし消し */
}
.quickspgrid .cell{
  padding: 0px;
  text-align: center;
  border-right: 1px solid #000; /* 右の線（1px） */
  white-space: nowrap; /* テキスト折り返し防止 */
}

/* ------------------------------------ */
.beforestatusgrid {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 9列均等 */
  grid-template-rows: repeat(3, auto); /* 3行 */
  gap: 0px; /* セル間の隙間 */
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  border: 1px solid #ddd; /* 全体の枠線 */
  /*background-color: #f9f9f9;  背景色 */
  margin-top: 5px; 
  border-radius: 8px;overflow: hidden; /* 丸め&はみだし消し */
}

.beforestatusgrid .cell {
  padding: 0px;
  text-align: center;
  border: 1px solid #ddd; /* 各セルの枠線 */
  /*background-color: white;*/
}

.beforestatusgrid .header {
  background-color: #ddd; /* ヘッダーの背景色 */
  /*font-weight: bold;*/
}
/* ------------------------------------ */
.statusgrid {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 9列均等 */
  grid-template-rows: repeat(3, auto); /* 3行 */
  gap: 0; /* 隙間を0に変更（ボーダーで線を表現） */
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  border: 1px solid #000;  /*全体の枠線（右下もここでカバー） */
  /*border-left: 1px solid #ccc;  左の線を強調（重なり回避） */
  /*border-top: 1px solid #ccc;  上の線を強調（重なり回避） */
  /*background-color: #f9f9f9;  背景色 */
  margin-top: 2px; 
  border-radius: 8px;
  overflow: hidden; /* 丸め&はみだし消し */
}

.statusgrid .cell {
  padding: 1px;
  text-align: center;
  border-right: 1px solid #000; /* 右の線（1px） */
  border-bottom: 1px solid #ddd; /* 下の線（1px） */
  white-space: nowrap; /* テキスト折り返し防止 */
  /*background-color: white;*/
}
.statusgrid .bgddd {
  background-color: #ddd; /* ヘッダーの背景色 */
  /*font-weight: bold;*/
}
.statusgrid .bold {
  /*background-color: #e0e0e0; 背景色 */
  font-weight: bold;
}
/* ------------------------------------ */
.secondarygrid {
  display: grid;
  grid-template-columns: 60px 1fr 30px 1fr; /* 最初の3列固定、4列目残り全部 */
  grid-auto-rows: auto; /* 行の高さを自動調整 */
  gap: 0; /* 隙間を0に変更（ボーダーで線を表現） */
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  border: 1px solid #000; /* 全体の枠線（右下もここでカバー） */
  /*border-left: 1px solid #ccc;  左の線を強調（重なり回避） */
  /*border-top: 1px solid #ccc;  上の線を強調（重なり回避） */
  /*background-color: #f9f9f9;  背景色 */
  border-radius: 8px;
  overflow: hidden; /* 丸め&はみだし消し */
}

.secondarygrid .cell {
  padding: 2px;
  text-align: center; /* 左揃え（必要に応じてcenterに変更） */
  border-right: 1px solid #000; /* 右の線（1px） */
  border-bottom: 1px solid #000; /* 下の線（1px） */
  /*background-color: #f9f9f9;  背景色（必要に応じて追加） */
  overflow: hidden; /* 長いテキストの処理 */
  white-space: nowrap; /* テキスト折り返し防止（4列目のみ適宜調整） */
}
/* ------------------------------------ */
.spgrid {
  display: grid;
  grid-template-columns: 60px 1fr 100px; /* 最初の3列固定、4列目残り全部 */
  grid-auto-rows: auto; /* 行の高さを自動調整 */
  gap: 0; /* 隙間を0に変更（ボーダーで線を表現） */
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  border: 1px solid #000; /* 全体の枠線（右下もここでカバー） */
  /* border-left: 1px solid #ccc; 左の線を強調（重なり回避） */
  /* border-top: 1px solid #ccc; 上の線を強調（重なり回避） */
  /*background-color: #f9f9f9;  背景色 */
  margin-top: 5px; 
  border-radius: 8px;
  overflow: hidden; /* 丸め&はみだし消し */
}

.spgrid .cell {
  padding: 2px;
  text-align: center; /* 左揃え（必要に応じてcenterに変更） */
  border-right: 1px solid #000; /* 右の線（1px） */
  border-bottom: 1px solid #000; /* 下の線（1px） */
  /*background-color: #f9f9f9;  背景色（必要に応じて追加） */
  overflow: hidden; /* 長いテキストの処理 */
  white-space: nowrap; /* テキスト折り返し防止 */
}
/* ------------------------------------ */
.processgrid {
  display: grid;
  margin-top: 5px; 
  grid-template-columns: 20px 50px 1fr 50px; /* 最初の3列固定、4列目残り全部 */
  grid-auto-rows: auto; /* 行の高さを自動調整 */
  gap: 0; /* 隙間を0に変更（ボーダーで線を表現） */
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  border: 1px solid #000; /* 全体の枠線（右下もここでカバー） */
  /*border-left: 1px solid #ccc;  左の線を強調（重なり回避） */
  /*border-top: 1px solid #ccc;  上の線を強調（重なり回避） */
  /*background-color: #f9f9f9;  背景色 */
  border-radius: 8px;
  overflow: hidden; /* 丸め&はみだし消し */
}

.processgrid .cell {
  padding: 2px;
  text-align: center; 
  border-right: 1px solid #000; /* 右の線（1px） */
  border-bottom: 1px solid #000; /* 下の線（1px） */
  /* background-color: #f9f9f9; 親の背景を継承して統一 */
  overflow: hidden; /* 長いテキストの処理 */
  /*white-space: nowrap;  テキスト折り返し防止（4列目のみ適宜調整） */
}
/* ------------------------------------ */
.quickenergygrid {
  display: grid;  
  grid-template-columns: repeat(7, 1fr); 
  width: 100%; /* 幅を調整 */
  max-width: 450px; /* 最大幅 */
  gap: 1px;   /* 各セグメント間の隙間 (必要に応じて調整) */
  /*height: 20px;*/
  margin: 5px 0;
}
.quickenergygrid .segment {
text-align: center;   /*align-selfで指定 */
  /*background-color: #eee; */
  border: 1px solid #999;
  border-radius: 10px;
  height: 100%; /* 親グリッドセルの高さに伸ばす*/

  display: flex; /* Flexコンテナにする */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  justify-content: center; /* 子要素を水平方向の中央に配置 */
}
.quickenergygrid .cell {
  /*text-align: center; align-selfで指定 */
  font-size: 10px;
  font-weight: bold; 

  display: flex; /* Flexコンテナにする */
  align-items: center; /* 子要素を垂直方向の中央に配置 */
  justify-content: center; /* 子要素を水平方向の中央に配置 */

  /*justify-self: center;  横方向中央 */
   /*align-self: center;   縦方向中央 */
}
/* ------------------------------------ */
/* ナビゲーションボタン全てに適用 */
#step-first, 
#step-prev, 
#step-next, 
#step-last {
    font-size: 12px; 
    padding: 2px 5px; /* ボタン内の余白を減らす */
    line-height: 1; /* 行の高さを調整 */
}
/* ------------------------------------ */
/* Hide to Show:Pairs */
#custombuttons {display: none;}
#custombuttonstoggle:checked ~ #custombuttons{display: block; }

#spcondition {display: none;}
#spconditiontoggle:checked ~ #spcondition {display: block; }

#quickenergy {display: none;}
#quickenergytoggle:checked ~ #quickenergy {display: block; }

#statustower {display: none;}
#statustowertoggle:checked ~ #statustower {display: block; }
/* Hide to Show:Ptriple */
#quicksp {display: none;}
#quicksptoggle:checked ~ #quicksp {display: block; }
#quicksptoggle:checked ~ #itemspstatus {display: none; }

/* Show to Hide:Soros */
#processgridtoggle:not(:checked) ~ #processgrid {display: none; }
#statusdetailtoggle:not(:checked) ~ #statusdetail {display: none; }
#underareatoggle:not(:checked) ~ #underarea {display: none; }


@media screen and (max-width:480px) {
    .container {/*  border-radius: 0;  border-radiusの左右の角を削除し、端と揃える */
        padding-left: 0;
        padding-right: 0;
        max-width: none; 
    }
}