/* ============================================
   boots.css 由来
============================================ */
h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .h2, h2 {
    font-size: 2rem;
  }
}

.icon-row {
  font-size: 18px;
  white-space: nowrap;
  align-items: center;
}

span.target {
  height: 20px;
  width: 20px;
  margin:0px 20px 0px 5px;
}

.icon-target.flex-r {
  gap: 0;
}

#data-cucumber {
  font-size: 2rem;
}

/* ---------------------------------------select（ステータスアイコン配置） */
.input-left > div {
  position: absolute;
}

.input-left > .center-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-left > div {
  margin: 5px;
}

.input-left > div[data-type="atk"] {
  top: 40%;
  left: 5%;
}

.input-left > div[data-type="matk"] {
  top: 40%;
  left: 0;
}

.input-left > div[data-type="hp"] {
  top: 0px;
  left: 13%;
}

.input-left > div[data-type="def"] {
  right: 13%;
}

.input-left > div[data-type="crit"] {
  top: 40%;
  right: 0px;
}

.input-left > div[data-type="mdef"] {
  right: 13%;
  bottom: 0;
}

.input-left > div[data-type="resist"] {
  left: 13%;
  bottom: 0;
}

/* calculate-container（表示切り替え） */
.tab-panel,
.chartab,
.personal-list,
.progress,
.toggle > .toggle-container {
  display: none;
}

.chartab.active,
.personal-list.active,
.progress.active {
  display: flex;
  justify-content: space-between;
}

.progress-table th,
.progress-table td {
  width: calc(100% / 8);
}
.shortage-table th,
.shortage-table td {
  width: calc(100% / 8);
}

.custom-icon {
  width: 23px;
  height: 23px;
  display: inline-block;
  vertical-align: -0.125em;
  color: #4a8c63;
  transition: color var(--t-fast);
}

/* ============================================
   左ナビゲーション（キャラクター選択）
============================================ */
.nav-container {
  width: 210px;
  flex-shrink: 0;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--c-border);    /* nav-cの外枠*/
  position: sticky;
  top: 66px;
  min-height: 500px;
  max-height: calc(100dvh - 82px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-container::-webkit-scrollbar { display: none; }
.nav-container::-webkit-scrollbar-thumb {
  background: var(--c-primary);
  border-radius: 4px;
}

/* ナビ内ボタンエリア */
.buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* 全員所持・未所持ボタン */
.have-all-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* --- 属性タブリスト --- */
.character-tablist > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

li.tab-personal {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 13px;
  transition: background var(--t-fast), color var(--t-fast);
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
  user-select: none;
}

/* 属性タブ 個別カラー */
li.tab-personal[data-personal="純粋"]         { border-color: var(--c-attr1); }
li.tab-personal[data-personal="純粋"].active,
li.tab-personal[data-personal="純粋"]:hover   { background: var(--c-attr1); color: var(--c-attr1-text); border-color: var(--c-attr1); }

li.tab-personal[data-personal="冷静"]         { border-color: var(--c-attr2); }
li.tab-personal[data-personal="冷静"].active,
li.tab-personal[data-personal="冷静"]:hover   { background: var(--c-attr2); color: var(--c-attr2-text); }

li.tab-personal[data-personal="狂気"]         { border-color: var(--c-attr3); }
li.tab-personal[data-personal="狂気"].active,
li.tab-personal[data-personal="狂気"]:hover   { background: var(--c-attr3); color: var(--c-attr3-text); }

li.tab-personal[data-personal="活発"]         { border-color: var(--c-attr4); }
li.tab-personal[data-personal="活発"].active,
li.tab-personal[data-personal="活発"]:hover   { background: var(--c-attr4); color: var(--c-attr4-text); }

li.tab-personal[data-personal="憂鬱"]         { border-color: var(--c-attr5); }
li.tab-personal[data-personal="憂鬱"].active,
li.tab-personal[data-personal="憂鬱"]:hover   { background: var(--c-attr5); color: var(--c-attr5-text); }

li.tab-personal[data-personal="すべて"].active,
li.tab-personal[data-personal="すべて"]:hover {
  background: var(--c-bg-soft);
  border-color: var(--c-primary-dk);
  color: var(--c-primary-text);
}

/* --- キャラクターリスト --- */
.character-tabpanel > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chartab {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
  gap: 2px;
}

li.character {
  width: 93.5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 14px;  /* font-change*/
  border: 1.5px solid transparent;
  color: var(--c-text);
  transition: background var(--t-fast), border-color var(--t-fast);
  user-select: none;
}

li.character:hover {
  background: var(--c-bg-soft);
  border-color: var(--c-border);
}

/* ============================================
  background-target-main（5属性 × 要素種別）	
============================================ */
div.background-target-main[data-css="純粋"],
button.background-target-main[data-css="純粋"],
p.background-target-main[data-css="純粋"],
.background-target-main[data-css="純粋"].active,
.advisor-rank-label.background-target-main[data-css="純粋"],
.chip-cross.background-target-main[data-css="純粋"],
h3.background-target-main[data-css="純粋"],
span.background-target-main[data-css="純粋"],
.plus-button.background-target-main[data-css="純粋"] {
  background: var(--c-attr1);
  color: var(--c-attr1-text);
  font-weight: bold;
}

div.background-target-main[data-css="冷静"],
button.background-target-main[data-css="冷静"],
p.background-target-main[data-css="冷静"],
.background-target-main[data-css="冷静"].active,
.advisor-rank-label.background-target-main[data-css="冷静"],
.chip-cross.background-target-main[data-css="冷静"],
h3.background-target-main[data-css="冷静"],
span.background-target-main[data-css="冷静"],
.plus-button.background-target-main[data-css="冷静"] {
  background: var(--c-attr2);
  color: var(--c-attr2-text);
  font-weight: bold;
}

div.background-target-main[data-css="狂気"],
button.background-target-main[data-css="狂気"],
p.background-target-main[data-css="狂気"],
.background-target-main[data-css="狂気"].active,
.advisor-rank-label.background-target-main[data-css="狂気"],
.chip-cross.background-target-main[data-css="狂気"],
h3.background-target-main[data-css="狂気"],
span.background-target-main[data-css="狂気"],
.plus-button.background-target-main[data-css="狂気"] {
  background: var(--c-attr3);
  color: var(--c-attr3-text);
  font-weight: bold;
}

div.background-target-main[data-css="活発"],
button.background-target-main[data-css="活発"],
p.background-target-main[data-css="活発"],
.background-target-main[data-css="活発"].active,
.advisor-rank-label.background-target-main[data-css="活発"],
.chip-cross.background-target-main[data-css="活発"],
h3.background-target-main[data-css="活発"],
span.background-target-main[data-css="活発"],
.plus-button.background-target-main[data-css="活発"] {
  background: var(--c-attr4);
  color: var(--c-attr4-text);
  font-weight: bold;
}

div.background-target-main[data-css="憂鬱"],
button.background-target-main[data-css="憂鬱"],
p.background-target-main[data-css="憂鬱"],
.background-target-main[data-css="憂鬱"].active,
.advisor-rank-label.background-target-main[data-css="憂鬱"],
.chip-cross.background-target-main[data-css="憂鬱"],
h3.background-target-main[data-css="憂鬱"],
span.background-target-main[data-css="憂鬱"],
.plus-button.background-target-main[data-css="憂鬱"] {
  background: var(--c-attr5);
  color: var(--c-attr5-text);
  font-weight: bold;
}

div > h3.advisor-title.background-target-main {
  background: none;
  color: var(--c-heading);
}

/* ============================================	
  background-target-sub（main より薄いライトカラー）	
============================================ */
.input-left.background-target-sub[data-css="純粋"],
.wrapper-input-left.background-target-sub[data-css="純粋"],
button.background-target-sub[data-css="純粋"],
.background-target-sub[data-css="純粋"].active,
p.not-owned.background-target-sub[data-css="純粋"],
.stock-placeholder.background-target-sub[data-css="純粋"],
th.background-target-sub[data-css="純粋"],
input.background-target-sub[data-css="純粋"],
.background-target-sub[data-css="純粋"] > span,
.no-advise.background-target-sub[data-css="純粋"],
.advisor-rank-header.background-target-sub[data-css="純粋"],
.advisor-rank-section.background-target-sub[data-css="純粋"],
.advisor-cross-title.background-target-sub[data-css="純粋"],
.advisor-no-stage.background-target-sub[data-css="純粋"],
.toggle > p.background-target-sub[data-css="純粋"],
.minus-button.background-target-sub[data-css="純粋"] {
  background: var(--c-attr1-lt);
  border-color: var(--c-attr1);
  color: var(--c-heading);
  font-weight: bold;
  accent-color: var(--c-attr1);
}

.input-left.background-target-sub[data-css="冷静"],
button.background-target-sub[data-css="冷静"],
.background-target-sub[data-css="冷静"].active,
p.not-owned.background-target-sub[data-css="冷静"],
.stock-placeholder.background-target-sub[data-css="冷静"],
th.background-target-sub[data-css="冷静"],
input.background-target-sub[data-css="冷静"],
.background-target-sub[data-css="冷静"] > span,
.no-advise.background-target-sub[data-css="冷静"],
.advisor-rank-header.background-target-sub[data-css="冷静"],
.advisor-rank-section.background-target-sub[data-css="冷静"],
.advisor-cross-title.background-target-sub[data-css="冷静"],
.advisor-no-stage.background-target-sub[data-css="冷静"],
.toggle > p.background-target-sub[data-css="冷静"],
.minus-button.background-target-sub[data-css="冷静"] {
  background: var(--c-attr2-lt);
  border-color: var(--c-attr2);
  color: var(--c-heading);
  font-weight: bold;
  accent-color: var(--c-attr2);
}

.input-left.background-target-sub[data-css="狂気"],
button.background-target-sub[data-css="狂気"],
.background-target-sub[data-css="狂気"].active,
p.not-owned.background-target-sub[data-css="狂気"],
.stock-placeholder.background-target-sub[data-css="狂気"],
th.background-target-sub[data-css="狂気"],
input.background-target-sub[data-css="狂気"],
.background-target-sub[data-css="狂気"] > span,
.no-advise.background-target-sub[data-css="狂気"],
.advisor-rank-header.background-target-sub[data-css="狂気"],
.advisor-rank-section.background-target-sub[data-css="狂気"],
.advisor-cross-title.background-target-sub[data-css="狂気"],
.advisor-no-stage.background-target-sub[data-css="狂気"],
.toggle > p.background-target-sub[data-css="狂気"],
.minus-button.background-target-sub[data-css="狂気"] {
  background: var(--c-attr3-lt);
  border-color: var(--c-attr3);
  color: var(--c-heading);
  font-weight: bold;
  accent-color: var(--c-attr3);
}

.input-left.background-target-sub[data-css="活発"],
button.background-target-sub[data-css="活発"],
.background-target-sub[data-css="活発"].active,
p.not-owned.background-target-sub[data-css="活発"],
.stock-placeholder.background-target-sub[data-css="活発"],
th.background-target-sub[data-css="活発"],
input.background-target-sub[data-css="活発"],
.background-target-sub[data-css="活発"] > span,
.no-advise.background-target-sub[data-css="活発"],
.advisor-rank-header.background-target-sub[data-css="活発"],
.advisor-rank-section.background-target-sub[data-css="活発"],
.advisor-cross-title.background-target-sub[data-css="活発"],
.advisor-no-stage.background-target-sub[data-css="活発"],
.toggle > p.background-target-sub[data-css="活発"],
.minus-button.background-target-sub[data-css="活発"] {
  background: var(--c-attr4-lt);
  border-color: var(--c-attr4);
  color: var(--c-heading);
  font-weight: bold;
  accent-color: var(--c-attr4);
}

.input-left.background-target-sub[data-css="憂鬱"],
button.background-target-sub[data-css="憂鬱"],
.background-target-sub[data-css="憂鬱"].active,
p.not-owned.background-target-sub[data-css="憂鬱"],
.stock-placeholder.background-target-sub[data-css="憂鬱"],
th.background-target-sub[data-css="憂鬱"],
input.background-target-sub[data-css="憂鬱"],
.background-target-sub[data-css="憂鬱"] > span,
.no-advise.background-target-sub[data-css="憂鬱"],
.advisor-rank-header.background-target-sub[data-css="憂鬱"],
.advisor-rank-section.background-target-sub[data-css="憂鬱"],
.advisor-cross-title.background-target-sub[data-css="憂鬱"],
.advisor-no-stage.background-target-sub[data-css="憂鬱"],
.toggle > p.background-target-sub[data-css="憂鬱"],
.minus-button.background-target-sub[data-css="憂鬱"] {
  background: var(--c-attr5-lt);
  border-color: var(--c-attr5);
  color: var(--c-heading);
  font-weight: bold;
  accent-color: var(--c-attr5);
}

/* ============================================	
  border-target（5属性ぶん・枠線色を変更）	
============================================ */
button.border-target[data-css="純粋"],
.tab-item.border-target[data-css="純粋"],
.option-equip.border-target[data-css="純粋"],
.blueprint.border-target[data-css="純粋"],
input.border-target[data-css="純粋"],
.need.border-target[data-css="純粋"],
.progress.active.border-target[data-css="純粋"],
.stock-placeholder.border-target[data-css="純粋"],
table.border-target[data-css="純粋"],
tr.border-target[data-css="純粋"],
th.border-target[data-css="純粋"],
td.border-target[data-css="純粋"],
.border-target[data-css="純粋"].no-advise,
.border-target[data-css="純粋"].active,
.advisor-rank-section.border-target[data-css="純粋"],
.advisor-rank-label.border-target[data-css="純粋"],
.badge-done.border-target[data-css="純粋"],
p.border-target[data-css="純粋"],
.stock-wrapper.border-target[data-css="純粋"],
span.target > img.border-target[data-css="純粋"],
.equip.border-target[data-css="純粋"],
.plus-button.border-target[data-css="純粋"] {
  border-color: var(--c-attr1) !important;
}

button.border-target[data-css="冷静"],
.tab-item.border-target[data-css="冷静"],
.option-equip.border-target[data-css="冷静"],
.blueprint.border-target[data-css="冷静"],
input.border-target[data-css="冷静"],
.need.border-target[data-css="冷静"],
.progress.active.border-target[data-css="冷静"],
.stock-placeholder.border-target[data-css="冷静"],
table.border-target[data-css="冷静"],
tr.border-target[data-css="冷静"],
th.border-target[data-css="冷静"],
td.border-target[data-css="冷静"],
.border-target[data-css="冷静"].no-advise,
.border-target[data-css="冷静"].active,
.advisor-rank-section.border-target[data-css="冷静"],
.advisor-rank-label.border-target[data-css="冷静"],
.badge-done.border-target[data-css="冷静"],
p.border-target[data-css="冷静"],
.stock-wrapper.border-target[data-css="冷静"],
span.target > img.border-target[data-css="冷静"],
.equip.border-target[data-css="冷静"],
.plus-button.border-target[data-css="冷静"] {
  border-color: var(--c-attr2) !important;
}

button.border-target[data-css="狂気"],
.tab-item.border-target[data-css="狂気"],
.option-equip.border-target[data-css="狂気"],
.blueprint.border-target[data-css="狂気"],
input.border-target[data-css="狂気"],
.need.border-target[data-css="狂気"],
.progress.active.border-target[data-css="狂気"],
.stock-placeholder.border-target[data-css="狂気"],
table.border-target[data-css="狂気"],
tr.border-target[data-css="狂気"],
th.border-target[data-css="狂気"],
td.border-target[data-css="狂気"],
.border-target[data-css="狂気"].no-advise,
.border-target[data-css="狂気"].active,
.advisor-rank-section.border-target[data-css="狂気"],
.advisor-rank-label.border-target[data-css="狂気"],
.badge-done.border-target[data-css="狂気"],
p.border-target[data-css="狂気"],
.stock-wrapper.border-target[data-css="狂気"],
span.target > img.border-target[data-css="狂気"],
.equip.border-target[data-css="狂気"],
.plus-button.border-target[data-css="狂気"] {
  border-color: var(--c-attr3) !important;
}

button.border-target[data-css="活発"],
.tab-item.border-target[data-css="活発"],
.option-equip.border-target[data-css="活発"],
.blueprint.border-target[data-css="活発"],
input.border-target[data-css="活発"],
.need.border-target[data-css="活発"],
.progress.active.border-target[data-css="活発"],
.stock-placeholder.border-target[data-css="活発"],
table.border-target[data-css="活発"],
tr.border-target[data-css="活発"],
th.border-target[data-css="活発"],
td.border-target[data-css="活発"],
.border-target[data-css="活発"].no-advise,
.border-target[data-css="活発"].active,
.advisor-rank-section.border-target[data-css="活発"],
.advisor-rank-label.border-target[data-css="活発"],
.badge-done.border-target[data-css="活発"],
p.border-target[data-css="活発"],
.stock-wrapper.border-target[data-css="活発"],
span.target > img.border-target[data-css="活発"],
.equip.border-target[data-css="活発"],
.plus-button.border-target[data-css="活発"] {
  border-color: var(--c-attr4) !important;
}

button.border-target[data-css="憂鬱"],
.tab-item.border-target[data-css="憂鬱"],
.option-equip.border-target[data-css="憂鬱"],
.blueprint.border-target[data-css="憂鬱"],
input.border-target[data-css="憂鬱"],
.need.border-target[data-css="憂鬱"],
.progress.active.border-target[data-css="憂鬱"],
.stock-placeholder.border-target[data-css="憂鬱"],
table.border-target[data-css="憂鬱"],
tr.border-target[data-css="憂鬱"],
th.border-target[data-css="憂鬱"],
td.border-target[data-css="憂鬱"],
.border-target[data-css="憂鬱"].no-advise,
.border-target[data-css="憂鬱"].active,
.advisor-rank-section.border-target[data-css="憂鬱"],
.advisor-rank-label.border-target[data-css="憂鬱"],
.badge-done.border-target[data-css="憂鬱"],
span.target > img.border-target[data-css="憂鬱"],
p.border-target[data-css="憂鬱"],
.stock-wrapper.border-target[data-css="憂鬱"],
.equip.border-target[data-css="憂鬱"],
.plus-button.border-target[data-css="憂鬱"] {
  border-color: var(--c-attr5) !important;
}

/* ============================================	
  :hover	
============================================ */
.character[data-css="純粋"]:hover,
.toggle.active > p.background-target-sub[data-css="純粋"],
button[data-button="add-need"][data-css="純粋"]:hover,
.tab-item[data-css="純粋"]:hover,
#reset[data-css="純粋"]:hover,
.have-true[data-css="純粋"]:hover,
.have-false[data-css="純粋"]:hover,
.progress-reset[data-css="純粋"]:hover,
button.background-target-sub[data-css="純粋"]:hover,
.toggle > p.background-target-sub[data-css="純粋"]:hover {
  background: var(--c-attr1);
  color: var(--c-attr1-text);
  font-weight: bold;
}

.character[data-css="冷静"]:hover,
.toggle.active > p.background-target-sub[data-css="冷静"],
button[data-button="add-need"][data-css="冷静"]:hover,
.tab-item[data-css="冷静"]:hover,
#reset[data-css="冷静"]:hover,
.have-true[data-css="冷静"]:hover,
.have-false[data-css="冷静"]:hover,
.progress-reset[data-css="冷静"]:hover,
button.background-target-sub[data-css="冷静"]:hover,
.toggle > p.background-target-sub[data-css="冷静"]:hover {
  background: var(--c-attr2);
  color: var(--c-attr2-text);
  font-weight: bold;
}

.character[data-css="狂気"]:hover,
.toggle.active > p.background-target-sub[data-css="狂気"],
button[data-button="add-need"][data-css="狂気"]:hover,
.tab-item[data-css="狂気"]:hover,
#reset[data-css="狂気"]:hover,
.have-true[data-css="狂気"]:hover,
.have-false[data-css="狂気"]:hover,
.progress-reset[data-css="狂気"]:hover,
button.background-target-sub[data-css="狂気"]:hover,
.toggle > p.background-target-sub[data-css="狂気"]:hover {
  background: var(--c-attr3);
  color: var(--c-attr3-text);
  font-weight: bold;;
}

.character[data-css="活発"]:hover,
.toggle.active > p.background-target-sub[data-css="活発"],
button[data-button="add-need"][data-css="活発"]:hover,
.tab-item[data-css="活発"]:hover,
#reset[data-css="活発"]:hover,
.have-true[data-css="活発"]:hover,
.have-false[data-css="活発"]:hover,
.progress-reset[data-css="活発"]:hover,
button.background-target-sub[data-css="活発"]:hover,
.toggle > p.background-target-sub[data-css="活発"]:hover {
  background: var(--c-attr4);
  color: var(--c-attr4-text);
  font-weight: bold;
}

.character[data-css="憂鬱"]:hover,
.toggle.active > p.background-target-sub[data-css="憂鬱"],
button[data-button="add-need"][data-css="憂鬱"]:hover,
.tab-item[data-css="憂鬱"]:hover,
#reset[data-css="憂鬱"]:hover,
.have-true[data-css="憂鬱"]:hover,
.have-false[data-css="憂鬱"]:hover,
.progress-reset[data-css="憂鬱"]:hover,
button.background-target-sub[data-css="憂鬱"]:hover,
.toggle > p.background-target-sub[data-css="憂鬱"]:hover {
  background: var(--c-attr5);
  color: var(--c-attr5-text);
  font-weight: bold;
}

/* ============================================
   セレクトコンテナ（武器・設計図選択）
============================================ */
.select-container {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--c-border);
  margin-bottom: 12px;
}

.weapon.flex-r {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.input-left {
  width: 50%;
  min-height: 375px;
  border: 2px dashed var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-soft);
  position: relative; /* 位置変更禁止 */
}

.input-left.hide {
  display: none;
}

.wrapper-input-left {
  display: none;
}

.wrapper-input-left.show {
  border: 2px dashed var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-soft);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 10px;
  height: 375px;
  width: 50%;
}

.input-left select.option-equip {
  width: 100px;
  max-width: 128px;
  font-size: 12px;  /* font-changed */
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--c-surface);
  color: var(--c-text);
}

.input-left > .center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#center-select-box {
  height: 50px;
  gap: 10%;
}

.input-left > .center-box > div > p {
  font-size: 15px;
  font-weight: bold;
  color: var(--c-heading);
  text-align: center;
  margin: 0;
}

select[data-select='rank'] {
  font-size: 13px;  /* font-changed*/
  text-align: center;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  padding: 3px 8px;
  background: var(--c-surface);
  color: var(--c-text);
}

.input-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-list.flex-r {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-item {
  width: 36px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 15px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  transition: all var(--t-fast);
  user-select: none;
  margin-bottom: 5px;
}

.tab-item:hover { background: var(--c-bg-soft); border-color: var(--c-primary); }

.tab-item.active {
  font-weight: bold;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.blueprint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border-lt);
  font-size: 14px;
  gap: 8px;
}

.blueprint[data-css="純粋"]:has(input:focus) {
  background: var(--c-attr1-lt);
}

.blueprint[data-css="冷静"]:has(input:focus) {
  background: var(--c-attr2-lt);
}

.blueprint[data-css="狂気"]:has(input:focus) {
  background: var(--c-attr3-lt);
}

.blueprint[data-css="活発"]:has(input:focus) {
  background: var(--c-attr4-lt);
}

.blueprint[data-css="憂鬱"]:has(input:focus) {
  background: var(--c-attr5-lt);
}

li.blueprint > .icon-row > .target,
li.blueprint > .icon-row > .target img {
  height: 27px;
  width: 27px;
}

/* ============================================
   フォーム入力・select 共通
============================================ */
select,
input[type="tel"],
input[type="text"],
input[type="number"] {
  font-family: var(--font);
  font-size: 13px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

select:focus,
input[type="tel"]:focus {
  border-color: var(--c-primary-dk);
  box-shadow: 0 0 0 3px rgba(168,218,181,0.3);
}

/* 設計図枚数入力欄 */
.blueprint > span > input[type="tel"] {
  height: 30px;
  width: 58px;
  text-align: center;
}

/* ============================================
   ボタン共通ベース
============================================ */
button {
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  border-radius: var(--r-pill);
  line-height: 1.4;
}

button.all {
  border: 1.5px solid var(--c-primary-dk);
  color: var(--c-primary-text);
  padding: 6px 16px;
  font-size: 12px;
  box-shadow: var(--sh-sm);
}

button.all:hover,
#advisor-run:hover {
  background: var(--c-primary-dk);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}

button.all.false {
  background: white;
  color: #5d4037;
}

button[data-button='add-need']:not(.all) {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);  /* border-delete */
  color: var(--c-text);
  padding: 5px 12px;
  font-size: 12px;
}

#reset,
.reset {
  background: none;
  border: 1.5px solid #ffcdd2;
  color: #e57373;
  padding: 4px 12px;
  font-size: 12px;
  transition: background var(--t-fast), border-color var(--t-fast);
}

#reset:hover,
.reset:hover { background: #fff0f0; border-color: #ef9a9a; }

.equipreset {
  height: 38px;
  width: 60px;
  background: none;
  border: 1.5px solid #ffcdd2;
  color: #e57373;
  padding: 2px 8px;
  font-size: 11px;
}

.equipreset:hover { background: #fff0f0; }

.progress-reset {
  background: none;
  border: 1.5px solid #ffcdd2;
  color: var(--c-heading);
  padding: 2px 8px;
  font-size: 13px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.progress-reset:hover { background: #fff0f0; }

button.have-true {
  border: 1.5px solid #fbc02d;
  color: #5d4037;
  padding: 2px 10px;
  font-size: 11px;
  white-space: nowrap;
}

button.have-true:hover { background: var(--c-attr4); }

button.have-false {
  background: var(--c-primary-lt);
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-text);
  padding: 2px 10px;
  font-size: 11px;
  white-space: nowrap;
}

button.have-false:hover { background: var(--c-primary); }

.have-all-true,
.have-all-false {
  width: 88px;
  height: 27px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--r-pill);
  flex: 1;
}

.have-all-true {
  background: var(--c-primary-lt);
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-text);
}

.have-all-true:hover { background: var(--c-primary); }

.have-all-false {
  background: #fff9c4;
  border: 1.5px solid #fbc02d;
  color: #5d4037;
}

.have-all-false:hover { background: var(--c-attr4); }

/* --- 現物入力 ±ボタン --- */
.localEquip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 5px;
}

.localEquip input[type="tel"] {
  height: 25px;
  width: 40px;
  text-align: center;
  padding: 3px 4px;
  font-size: 12px;
}

.minus-button,
.plus-button {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
  line-height: 1;
}

.minus-button {
  background: #fff0f0;
  border: 1.5px solid #ffcdd2;
  color: #e57373;
}

.minus-button:hover { background: #ffcdd2; }

.plus-button {
  background: var(--c-primary-lt);
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-text);
}

.plus-button:hover { background: var(--c-primary); }

/* ============================================
   バッジ・タグ（属性表示用）
============================================ */
.advisor-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: bold;
  border: 1.5px solid transparent;
}

/* 完了済みバッジ */
.badge-done {
  background: var(--c-bg-soft);
  border-color: var(--c-border);
  color: var(--c-muted);
}

/* 属性バッジ5種 */
.badge-attr1 { background: var(--c-attr1); border-color: #69c878; color: var(--c-attr1-text); }
.badge-attr2 { background: var(--c-attr2); border-color: #42a5f5; color: var(--c-attr2-text); }
.badge-attr3 { background: var(--c-attr3); border-color: #ef5350; color: var(--c-attr3-text); }
.badge-attr4 { background: var(--c-attr4); border-color: #ffd600; color: var(--c-attr4-text); }
.badge-attr5 { background: var(--c-attr5); border-color: #7c3aed; color: var(--c-attr5-text); }

/* ============================================
   カード
============================================ */
.card-game {
  background: var(--grad-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 16px;
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.card-game:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

/* ============================================
   計算エリア（need / stock）
============================================ */
.calculate-container {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--c-border);
  margin-bottom: 12px;
}

.box.flex-r {
  height: 385px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.need {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
}

.need,
.stock-wrapper {
  height: 384px;
  width: 50%;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
}

.needbox > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stock-wrapper {
  position: sticky;
  top: 66px;
  justify-content: space-between;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 10px;
  flex-direction: column;
}

.stock-wrapper > p {
  height: 22px;
}

.stock-charname {
  font-size: 15px;
  color: var(--c-heading);
  font-weight: bold;
  padding-left: 4px;
  margin-bottom: 6px;
  display: block;
}

/* ============================================
   進捗テーブル（キャラクターごとのランク状況）
============================================ */
table.progress-table,
table.shortage-table {
  vertical-align: middle;
}

thead {
  height: 30px;
}

tbody {
  height: 280px;
}

.progress-table {
  height: 310px;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
  table-layout: fixed;
}

.progress-table th,
.progress-table td {
  border: 1px solid var(--c-border-lt);
  padding: 5px 2px;
  overflow: hidden;
  vertical-align: middle;
}

.progress-table th:first-child,
.progress-table td:first-child {
  width: 30px;
  font-size: 18px;
  padding: 0;
}

.progress-table th {
  font-weight: normal;
  font-size: 11px;
}

.rank-done { opacity: 0.38; }

.equip-false {
  color: var(--c-text);
  font-weight: bold;
}

.equip-true > img,
.equip-false > img {
  display: block;
  margin: auto;
}

/* ============================================
   不足設計図テーブル
============================================ */
.shortage-table {
  height: 310px;
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
  table-layout: fixed;
}

.shortage-table th,
.shortage-table td {
  border: 1px solid var(--c-border-lt);
  padding: 4px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shortage-table th:first-child,
.shortage-table td:first-child {
  font-size: 16px;
  padding: 0;
}

.shortage-has {
  font-weight: bold;
  color: #e57373;
  background: #fff8f8;
}

.shortage-none { color: #c8d8cc; }

/* ストックプレースホルダー */
.stock-placeholder {
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: var(--c-muted);
  font-size: 13px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--c-border);
  min-height: 80px;
}

/* ============================================
   進捗リスト（キャラ選択・needbox 内）
============================================ */
li.personal-list       { display: none; }
li.personal-list.active { display: flex; flex-direction: column; gap: 8px; }

.char-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

li.progress {
  display: none;
  background: var(--c-surface);
  padding: 10px;
  flex-direction: column;
  gap: 6px;
}

li.progress.active {
  height: 384px;
  display: flex;
  box-shadow: var(--sh-sm);
}

li.progress > .flex-r {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

li.progress > .flex-r > p {
  font-size: 15px;
  font-weight: bold;
  color: var(--c-heading);
  flex: 1;
  margin: 0;
  min-width: 0;
}

.not-owned {
  font-size: 12px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-muted);
  padding: 4px 0;
  border: 1.5px dashed var(--c-border);
  border-radius: var(--r-md);
  margin: 0;
}

/* ============================================
   サブタブ（すべてタブ内）
============================================ */
.sub-tab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  gap: 6px;
}

.sub-tab-item {
  padding: 4px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 14px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  transition: all var(--t-fast);
  user-select: none;
}

.sub-tab-item.active {
  background: var(--c-primary-lt);
  border-color: var(--c-primary-dk);
  color: var(--c-primary-text);
}

.sub-tab-wrapper { overflow: hidden; width: 100%; }

.sub-tab-track {
  display: flex;
  transition: transform var(--t-base);
}

.sub-tab-panel { min-width: 100%; }

/* ============================================
   ステージアドバイザー
============================================ */
#stage-advisor-container {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--c-border);
  margin-bottom: 12px;
}

.advisor-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  align-items: center;
}

.advisor-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--c-text);
  user-select: none;
}

.advisor-controls input[type="radio"] {
  width: 14px;
  height: 14px;
}

.advisor-title {
  font-size: 20px;
  color: var(--c-heading);
  margin-bottom: 12px;
  font-weight: normal;
  border-bottom: 2px dashed var(--c-border);
  padding-bottom: 8px;
}

.advisor-rank-section {
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-lt);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.advisor-rank-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.advisor-rank-label {
  font-weight: bold;
  font-size: 15px;
  color: var(--c-heading);
  background: var(--c-primary-lt);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-primary);
}

.advisor-rank-cost {
  font-size: 11px;
  color: var(--c-muted);
}

.advisor-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.badge-label {
  font-size: 11px;
  color: var(--c-heading);
}

.advisor-columns.flex-r {
  display: flex;
  gap: 12px;
}

.advisor-col-left,
.advisor-col-right {
  flex: 1;
  min-width: 0;
}

.advisor-cross-title {
  font-size: 13px;
  color: var(--c-muted);
  font-weight: bold;
  border-bottom: 1px solid var(--c-border-lt);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.advisor-combo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px dashed white;
}

.advisor-combo-row:last-child { border-bottom: none; }

.advisor-combo-sep {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: bold;
}

.advisor-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 13px;
  color: var(--c-text);
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-fast);
}

.advisor-stage-chip:hover { box-shadow: var(--sh-md); }

.chip-cross {
  background: #e3f2fd;
  border-color: var(--c-attr2);
  color: var(--c-attr2-text);
}

.type-icon-wrap {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.type-rank {
  font-size: 13px;
  font-weight: bold;
}

.type-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
}

.advisor-no-stage {
  font-size: 14px;
  color: var(--c-muted);
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.no-advise {
  padding: 48px 32px;
  text-align: center;
  color: var(--c-muted);
  font-size: 15px;
  background: var(--c-bg-soft);
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--c-border);
  margin: 20px 0;
  letter-spacing: 0.04em;
  line-height: 2;
}

.advisor-wrapper { min-height: 40px; padding: 4px 0; }

/* ============================================
   現物在庫入力エリア
============================================ */
.stock-input {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--c-border);
  margin-bottom: 16px;
}

.toggle > p {
  cursor: pointer;
  padding: 8px 14px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: bold;
  color: var(--c-heading);
  border: 1.5px solid var(--c-border-lt);
  user-select: none;
  transition: background var(--t-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.toggle > p::before {
  content: '▶';
  font-size: 9px;
  transition: transform var(--t-fast);
  flex-shrink: 0;
}

.toggle.active > p::before { transform: rotate(90deg); }

.toggle > p:hover {
  background: var(--c-primary-lt);
}

.toggle > .toggle-container {
  display: none;
  padding: 0 4px 10px 4px;
}

.toggle-container  ul {
  padding-left: 0;
}

.equip {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-lt);
  border-radius: var(--r-md);
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
  width: calc((100% - 24px) / 5);
  min-width: 110px;
  flex-shrink: 0;
}

.equip:hover {
  box-shadow: var(--sh-sm);
}

div.icon-target {
  margin: 7px;
}

div.icon-target > span {
  margin:5px 20px 5px 5px;
}

span.target > img.type-icon,
div.icon-target > span > img.type-icon {
  border: 1px solid gold;
}

.equip > .equipName {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--c-heading);
  line-height: 1.4;
}

.stock-input li.flex-r {	
  flex-wrap: wrap !important;	
  justify-content: center;
  gap: 6px !important;	
}

.stock-input ul.flex-c > li > ul.flex-c {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.stock-input li > ul.flex-c > li.flex-r {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================
   タブレット（769px ～ 1024px）
============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-container { width: 175px; }

  .advisor-columns.flex-r { flex-direction: column; }
  .advisor-col-left,
  .advisor-col-right      { width: 100%; }

  .advisor-combo-row {
    justify-content: flex-start;
  }
}

/* ============================================
   スマホ（～768px）
============================================ */
@media (max-width: 768px) {
  /* --- ナビをスライドオーバーレイ化 --- */
  .nav-container {
    position: fixed;
    top: 0;
    left: -270px;
    width: 250px;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1200;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    box-shadow: var(--sh-lg);
    transition: left var(--t-base);
    padding-top: 64px;
    border-left: none;
  }

  .nav-container.open { left: 0; }

  /* オーバーレイ背景 */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.22);
    z-index: 1100;
    backdrop-filter: blur(2px);
  }

  .nav-overlay.open { display: block; }

  div.icon-target { margin: 4px; }

  /* --- weapon エリア縦積み --- */
  .weapon.flex-r { flex-direction: column; gap: 10px; }

  .input-left,
  .input-right {
    width: 100%;
  }

  .input-left { min-height: 300px; }

  /* --- need / stock-wrapper 縦積み --- */
  .box.flex-r { height: 100%; flex-direction: column; gap: 10px; }

  .need,
  .stock-wrapper {
    width: 100%;
  }

  .stock-wrapper { position: static; }

  /* --- アドバイザーカラム縦積み --- */
  .advisor-columns.flex-r { flex-direction: column; }
  .advisor-col-left,
  .advisor-col-right { width: 100%; }

  /* --- タブをスクロール可能に --- */
  .tab-list.flex-r {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .input-right > ul.tab-list.flex-r {
    flex-wrap: wrap;
  }

  .tab-list > .tab-item {
    width: calc((100% - 10%) / 5);
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .tab-list.flex-r::-webkit-scrollbar { display: none; }

  /* --- ステージチップ行のはみ出し対策 --- */
  .advisor-combo-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .advisor-combo-row::-webkit-scrollbar { display: none; }

  /* ============================================
     在庫入力：装備カード 3列 + 2列
  ============================================ */
  .stock-input .equip {
    width: calc((100% - 12px) / 3);
    min-width: 0;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .no-advise { padding: 40px 20px; }
}

/* ============================================
   標準的なスマホ（〜414px）
============================================ */
@media (max-width: 414px) {
  #data-cucumber {
    font-size: 1.5rem;
  }

  .input-left,
  .wrapper-input-left {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  .input-left > .center-box > div > p,
  li.progress > .flex-r > p,
  .stock-charname,
  .toggle > p,
  .tab-item,
  .equip > .equipName,
  .advisor-rank-label {
    font-size: 13px;
  }

  .progress-table th,
  .advisor-rank-cost,
  .advisor-combo-sep,
  .badge-label,
  button.have-true,
  button.have-false {
    font-size: 12px;
  }

  .equipreset {
    width: 64px;
    font-size: 12px;
    padding: 2px 4px;
  }

  .progress-table th,
  .progress-table td,
  .shortage-table th,
  .shortage-table td {
    padding: 4px 1px;
  }

  .progress-table th:first-child,
  .progress-table td:first-child {
    font-size: 14px;
  }

  .shortage-table th:first-child,
  .shortage-table td:first-child {
    font-size: 14px;
  }

  .progress-table img,
  .shortage-table img,
  .equip-true > img,
  .equip-false > img {
    max-width: 100%;
    height: auto;
  }

  .stock-input .equip {
    min-width: 0;
  }

  .no-advise {
    padding: 32px 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .advisor-title {
    font-size: 17px;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }

  .toggle > p {
    padding: 8px 10px;
  }

  .advisor-rank-label {
    padding: 2px 8px;
  }
}

/* ============================================
   小型スマホ（〜360px）
============================================ */
@media (max-width: 360px) {
  #data-cucumber,
  .input-left > .center-box > div > p {
    font-size: 16px;
    line-height: 1.3;
  }

  .input-left select.option-equip {
    width: 90px;
  }

  #center-select-box {
    width: 66px;
  }

  button.all {
    padding: 6px 6px;
  }

  .tab-item {
    font-size: 12px;
    padding: 4px 4px;
    margin-bottom: 5px;
  }

  .icon-row {
    font-size: 15px;
  }

  li.blueprint > div.icon-row {
    font-size: 13px;
  }

  .progress-table th:first-child,
  .progress-table td:first-child,
  .shortage-table th:first-child,
  .shortage-table td:first-child {
    font-size: 12px;
  }

  .progress-table th,
  .progress-table td,
  .shortage-table th,
  .shortage-table td {
    padding: 3px 1px;
  }

  .minus-button,
  .plus-button {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .localEquip {
    gap: 2px;
  }

  .localEquip input[type="tel"] {
    width: 36px;
  }

  .stock-charname,
  li.progress > .flex-r > p,
  .toggle > p {
    font-size: 12px;
  }

  .advisor-rank-label {
    padding: 2px 6px;
  }

  .advisor-title {
    font-size: 16px;
  }

  .no-advise {
    padding: 24px 12px;
  }

  .stock-input .equip {
    width: calc((100% - 6px) / 2);
  }

  .input-left > div[data-type="hp"] {
    top: 0px;
    left: 5%;
  }

  .input-left > div[data-type="def"] {
    top: 0;
    right: 5%;
  }

  .input-left > div[data-type="mdef"] {
    right: 5%;
    bottom: 0;
  }

  .input-left > div[data-type="resist"] {
    left: 5%;
    bottom: 0;
  }
}

/* ============================================
   印刷対応
============================================ */
@media print {
  .nav-container { display: none !important; }
}