body {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
  margin: 0;
}

.center {
  text-align: center;
}

#guideText {
  font-size: 1rem;
  color: #333;
  margin-bottom: 20px;
}

#inputArea {
  display: inline-block;
  text-align: left;
  margin-bottom: 20px;
  max-width: 90vw;   /* スマホで画面からはみ出さないように */
  width: 100%;
}

.slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
  gap: 8px;
  flex-wrap: wrap; /* スマホで折り返し可能に */
}

.slider span {
  width: 60px;
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none; /* Safari用 */
  appearance: none;
  height: 8px;
  border-radius: 5px;
  outline: none;
  margin: 0 8px;
  background: transparent; /* トラックは疑似要素に任せる */
}

/* トラック全般 (Safari対応) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 5px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Firefoxトラック */
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  cursor: pointer;
}

/* ===== 味覚ごとの色指定 ===== */

/* 甘味：ピンク */
.slider-sweet::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(248,165,194,0.2), rgba(248,165,194,1));
}
.slider-sweet::-webkit-slider-thumb {
  background: #f8a5c2;
}
.slider-sweet::-moz-range-track {
  background: linear-gradient(to right, rgba(248,165,194,0.2), rgba(248,165,194,1));
}
.slider-sweet::-moz-range-thumb {
  background: #f8a5c2;
}

/* 塩味：水色 */
.slider-salty::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(126,214,223,0.2), rgba(126,214,223,1));
}
.slider-salty::-webkit-slider-thumb {
  background: #7ed6df;
}
.slider-salty::-moz-range-track {
  background: linear-gradient(to right, rgba(126,214,223,0.2), rgba(126,214,223,1));
}
.slider-salty::-moz-range-thumb {
  background: #7ed6df;
}

/* 酸味：黄色 */
.slider-sour::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(249,202,36,0.2), rgba(249,202,36,1));
}
.slider-sour::-webkit-slider-thumb {
  background: #f9ca24;
}
.slider-sour::-moz-range-track {
  background: linear-gradient(to right, rgba(249,202,36,0.2), rgba(249,202,36,1));
}
.slider-sour::-moz-range-thumb {
  background: #f9ca24;
}

/* 苦味：茶色 */
.slider-bitter::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(130,88,159,0.2), rgba(130,88,159,1));
}
.slider-bitter::-webkit-slider-thumb {
  background: #82589F;
}
.slider-bitter::-moz-range-track {
  background: linear-gradient(to right, rgba(130,88,159,0.2), rgba(130,88,159,1));
}
.slider-bitter::-moz-range-thumb {
  background: #82589F;
}

/* うま味：緑 */
.slider-umami::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(88,177,159,0.2), rgba(88,177,159,1));
}
.slider-umami::-webkit-slider-thumb {
  background: #58B19F;
}
.slider-umami::-moz-range-track {
  background: linear-gradient(to right, rgba(88,177,159,0.2), rgba(88,177,159,1));
}
.slider-umami::-moz-range-thumb {
  background: #58B19F;
}

/* ===== 共通のつまみスタイル（大きめ） ===== */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Safari対応 */
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -8px; /* バーとの位置調整 */
  border: 2px solid white;
  position: relative;
  z-index: 2;
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  position: relative;
  z-index: 2;
}

.label-ja {
  width: 60px;
  white-space: nowrap;  /* ←改行させない */
}

.label-en {
  width: 70px;
  text-align: left;
  font-size: 0.9em;
  color: #555;
}

/* 表示ボタン */
#showButton {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  font-size: 1rem;
  margin: 0 auto;
  display: block;
}

/* 回転画像表示エリア：中央寄せ */
#displayArea {
  position: relative;
  width: 90vw;
  max-width: 300px;
  height: 90vw;
  max-height: 300px;
  margin: 5px auto 0;
}

/* 回転画像のスタイル */
#displayArea img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* 異なる回転速度（spin2とspin4は逆回転） */
.spin1 { animation: spin 20s linear infinite; }
.spin2 { animation: spin-reverse 30s linear infinite; }  /* ←逆回転 */
.spin3 { animation: spin 70s linear infinite; }
.spin4 { animation: spin-reverse 150s linear infinite; }  /* ←逆回転 */
.spin5 { animation: spin 120s linear infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* キャプションエリア：中央に太字で表示 */
#captionArea {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

/* レスポンシブ対応：スマホ用 */
@media (max-width: 480px) {
  .slider {
    flex-direction: column;
    align-items: flex-start;
  }

  .slider span,
  .label-en {
    width: auto;
  }

  input[type="range"] {
    width: 100%;
  }
}