.simulator-wrapper {
  max-width: 900px;
  margin: 2em auto;
  font-family: 'Helvetica Neue', sans-serif;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.simulator-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0.7em 2.5em 0.7em 0.8em;
  font-size: 1em;
  border-radius: 6px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M6 8L0.803848 0.5H11.1962L6 8Z" fill="%23666"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 12px 8px;
  cursor: pointer;
}

.simulator-title {
  padding: 0.8em 1em;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
  border-radius: 6px;
}

.title-full-body {
  background-color: #d4f1e3;
  color: #16684e;
  border-top: 4px solid #a0dbc3;
  border-bottom: 4px solid #a0dbc3;
}

.title-legs {
  background-color: #d9edf7;
  color: #31708f;
  border-top: 4px solid #bce8f1;
  border-bottom: 4px solid #bce8f1;
}

.title-arms {
  background-color: #f3e5f5;
  color: #6a1b9a;
  border-top: 4px solid #ce93d8;
  border-bottom: 4px solid #ce93d8;
}

.title-vio {
  background-color: #fdeaea;
  color: #c62828;
  border-top: 4px solid #ef9a9a;
  border-bottom: 4px solid #ef9a9a;
}

.title-face {
  background-color: #d7e8f7;
  color: #1b4f72;
  border-top: 4px solid #9abedf;
  border-bottom: 4px solid #9abedf;
}

.simulator-section {
  margin-bottom: 1.5em;
}


label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
  font-size: 1.1em;
}

select {
  width: 100%;
  padding: 0.7em;
  font-size: 1em;
  border-radius: 6px;
  border: 1px solid #ccc;
}

h2 {
  font-size: 1.8em;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.3em;
  margin-bottom: 1em;
  color: #333;
}

.result {
  background-color: #e7f6ed;
  /* グリーン系の淡い色 */
  padding: 1.5em;
  border-radius: 10px;
  margin-top: 1.5em;
  line-height: 1.8;
  font-size: 1.1em;
  border: 1px solid #b2d8c4;
}

.highlight {
  color: #d9534f;
  font-weight: bold;
}

.price-benefit {
  color: #3c9a5f;
  font-weight: bold;
}

.price-normal {
  color: #333;
  /* 黒に近いグレー */
  font-weight: bold;
}

.discount-text {
  color: #e67e22;
  /* ポジティブなオレンジ */
  font-weight: bold;
}

.fire-icon {
  margin-right: 0.2em;
}

.review-note {
  margin-top: 1em;
  padding: 0.8em 1em;
  background-color: #fffbea;
  border-left: 5px solid #ffc107;
  color: #665c00;
  font-size: 0.95em;
  border-radius: 6px;
}

.fade-in {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 全身脱毛 */
.result.full-body {
  background-color: #e8f8f3;
  border: 1px solid #a0dbc3;
}

.title-full-body {
  background-color: #d4f1e3;
  color: #16684e;
  border-top: 4px solid #a0dbc3;
  border-bottom: 4px solid #a0dbc3;
}

/* 両足5部位 */
.result.legs {
  background-color: #e7f4fa;
  border: 1px solid #bce8f1;
}

.title-legs {
  background-color: #d9edf7;
  color: #31708f;
  border-top: 4px solid #bce8f1;
  border-bottom: 4px solid #bce8f1;
}

/* 両腕5部位 */
.result.arms {
  background-color: #f2e8f8;
  border: 1px solid #ce93d8;
}

.title-arms {
  background-color: #f3e5f5;
  color: #6a1b9a;
  border-top: 4px solid #ce93d8;
  border-bottom: 4px solid #ce93d8;
}

/* VIO */
.result.vio {
  background-color: #fff1f2;
  border: 1px solid #ef9a9a;
}

.title-vio {
  background-color: #fdeaea;
  color: #c62828;
  border-top: 4px solid #ef9a9a;
  border-bottom: 4px solid #ef9a9a;
}

.result.face {
  background-color: #eef4fa;
  border: 1px solid #9abedf;
}


.price-benefit.full-body {
  color: #16684e;
  /* 緑：全身脱毛 */
}

.price-benefit.legs {
  color: #31708f;
  /* 青：両足 */
}

.price-benefit.arms {
  color: #6a1b9a;
  /* 紫：両腕 */
}

.price-benefit.vio {
  color: #c62828;
  /* 赤系：VIO */
}

.price-benefit.face {
  color: #1b4f72;
  font-weight: bold;
}

.parts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .parts-container {
    justify-content: flex-start;
    /* 内部アイテムを左詰めにする */
    max-width: 264px;
    /* アイテム幅（80px + gap）× 3列分 */
    margin-left: auto;
    margin-right: auto;
    /* 全体を中央に配置 */
  }
}

.part {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.part img {
  width: 64px;
  height: auto;
}

.part span {
  margin-top: 4px;
  font-size: 14px;
}