:root {
    --bg-color: #aeb2b9; 
    --header-bg: #2d345a;
    --item-bg: #1e243e;
    --accent-color: #facc15;
    --dot-empty: #3d445e;
    --text-color: #ffffff;
    --select-color: #a5b4fc;
    --title-bar-color: #7286a5; 
    --btn-bg: #3d445e;
    --main-width: 780px;
}

body {
    background-color: #000;
    color: var(--text-color);
    font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
    margin: 0;
    padding: 0;
}

/* 100vh確保 */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: var(--bg-color);
}

/* simulatorメインエリア */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* タイトルバー周り */
.top-window-header {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.title-container { width: 95%; max-width: var(--main-width); box-sizing: border-box; }
.title-inner {
    width: 100%;
    background: var(--title-bar-color);
    border: 1px solid #ffffff;
    border-radius: 0 50px 50px 0;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
h1 { margin: 0; font-size: 1.25rem; letter-spacing: 2px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }

/* simulator本体 */
.main-wrapper {
    width: 95%;
    max-width: var(--main-width);
    padding: 30px 0;
    box-sizing: border-box;
}

/* ツール下部の操作・合計表示エリア */
.tool-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 20px;
    background: #1a1f35;
    box-sizing: border-box;
    margin-top: 5px;
}

/* サイトのfooter（画面外へ） */
footer {
    width: 100%;
}

/* --- simulatorCSS --- */
.category-group { margin-bottom: 15px; }
.category-header { cursor: pointer; user-select: none; }
.category-header:hover .category-header-content { filter: brightness(1.2); }
.row-frame { display: flex; align-items: stretch; min-height: 42px; }
.row-left-bar { width: 4px; background-color: #ffffff; flex-shrink: 0; }
.category-header-content { flex: 1; background: var(--header-bg); display: flex; justify-content: space-between; align-items: center; padding-right: 10px; transition: filter 0.2s; }
.category-icon { width: 45px; display: flex; align-items: center; justify-content: center; margin-right: 5px; flex-shrink: 0; }
.item-list { margin-left: 45px; padding-top: 1px; }
.item-list.collapsed { display: none; }
.row-content { flex: 1; display: flex; align-items: center; background: var(--item-bg); padding: 0 15px; }
.control-panel { display: flex; align-items: center; gap: 5px; width: 130px; }
.step-btn { background: var(--btn-bg); color: white; border: 1px solid #666; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; }
select { background: transparent; color: var(--select-color); border: 1px solid var(--select-color); border-radius: 2px; padding: 1px 2px; font-size: 0.85rem; font-weight: bold; outline: none; flex: 1; text-align: center; }
.item-name { flex: 1; font-size: 0.9rem; margin-left: 10px; }
.item-effect { width: 80px; text-align: right; font-size: 0.95rem; font-weight: bold; padding-right: 10px; }
.dot-container { display: flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-empty); }
.dot.active { background: var(--accent-color); box-shadow: 0 0 5px var(--accent-color); }
.reset-btn { background: transparent; color: #888; border: 1px solid #444; padding: 5px 15px; font-size: 0.75rem; font-weight: bold; cursor: pointer; border-radius: 3px; margin-right: auto; transition: all 0.2s; }
.reset-btn:hover { color: #fff; border-color: #f87171; background: rgba(248, 113, 113, 0.2); }
.total-val { font-size: 2.5rem; font-weight: bold; margin-left: 20px; line-height: 1; }

.custom-table {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  margin: 1em auto;     
}
.custom-table th,
.custom-table td {
  border: 1px solid #ccc; 
  padding: 4px 4px;        
  text-align: center;       
}
.contents-wrap{  
	display: flex;
	justify-content: center;  /* 横中央 */
}