@charset "UTF-8";
/* CSS Document */

/* トラブルデータ国旗 */

.kokki:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  transform: translateY(-2px); /* ← 上に10px移動 */
}
@media (max-width: 1000px) {
.kokki:before {
	display:none;
  }
}

/* 国ごとに切り替え */
.kokki--Austria:before {
  background-image: url('../image/flag/kokki--Austria.png');
}
.kokki--Cambodia:before {
  background-image: url('../image/flag/kokki--Cambodia.png');
}
.kokki--Canada:before {
  background-image: url('../image/flag/kokki--Canada.png');
}
.kokki--france:before {
  background-image: url('../image/flag/kokki--France.png');
}
.kokki--guam:before {
  background-image: url('../image/flag/kokki--guam.png');
}
.kokki--Italia:before {
  background-image: url('../image/flag/kokki--Italia.png');
}
.kokki--Korea:before {
  background-image: url('../image/flag/kokki--Korea.png');
}
.kokki--Peru:before {
  background-image: url('../image/flag/kokki--Peru.png');
}
.kokki--Singapore:before {
  background-image: url('../image/flag/kokki--Singapore.png');
}
.kokki--Spain:before {
  background-image: url('../image/flag/kokki--Spain.png');
}
.kokki--swiss:before {
  background-image: url('../image/flag/kokki--swiss.png');
}
.kokki--tai:before {
  background-image: url('../image/flag/kokki--tai.png');
}
.kokki--taiwan:before {
  background-image: url('../image/flag/kokki--taiwan.png');
}
.kokki--Turkey:before {
  background-image: url('../image/flag/kokki--Turkey.png');
}
.kokki--uk:before {
  background-image: url('../image/flag/kokki--uk.png');
}
.kokki--usa:before {
  background-image: url('../image/flag/kokki--usa.png');
}

/* 海外MAPの調整 */
  :root {
    --button-select: #cb343b;
    --button-base: #e08589;
    --map-select: #f2d1ce;
    --map-base: #b5bdc6;
  }

  path:hover {
    cursor: pointer;
  }

  #america-map:hover path,
  #asia-map:hover path,
  #europe-map:hover path,
  g:has(> #america-button:hover)>#america-map path,
  g:has(> #asia-button:hover)>#asia-map path,
  g:has(> #europe-button:hover)>#europe-map path {
    fill: var(--map-select);
  }

  #america-map:hover~#america-button .st1,
  #america-button:hover .st1,
  #asia-map:hover~#asia-button .st1,
  #asia-button:hover .st1,
  #europe-map:hover~#europe-button .st1,
  #europe-button:hover .st1,
  #hawaii-button:hover .st1 {
    fill: var(--button-select);
  }

  .st0 {
    fill: var(--map-base);
  }

  .st1 {
    fill: var(--button-base);
  }

  .st2 {
    fill: #FFFFFF;
  }