/* ワックス脱毛 ページ固有のスタイル
   共通の料金表は pages/treatment-pricing.css にあります

   ★ .process-steps / .process-step は記事本文の ul・li の指定とぶつかるため、
     セレクタに親を1つ足して優先されるようにしています（!important の代わり）。 */

.treatment-process-section {
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 20px;
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

.process-container {
  background: #f0f9ff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.08);
  border: 1px solid #e0f2fe;
  position: relative;
}

.process-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #0ea5e9;
}

.process-header {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: white;
  padding: 30px;
  text-align: center;
  position: relative;
}

.process-header::before {
  content: "";
  display: none;
}

.process-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.process-subtitle {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 400;
  line-height: 1.6;
}

.process-content {
  padding: 40px 30px;
  background: #ffffff;
}

.p-article__body .process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
}

.process-steps .process-step {
  counter-increment: step-counter;
  background: #ffffff;
  margin-bottom: 20px;
  padding: 25px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(125, 211, 252, 0.06);
  border-left: 4px solid #0ea5e9;
  position: relative;
  transition: all 0.3s ease;
  list-style: none;
}

/* いちばん下の項目には下余白を付けない
   （共通CSSの :last-child 指定と優先度が並ぶため、ここで明示している） */
.process-steps .process-step:last-child {
  margin-bottom: 0;
}

.process-steps .process-step:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(125, 211, 252, 0.1);
}

.process-steps .process-step::before {
  content: counter(step-counter);
  position: absolute;
  left: -20px;
  top: 20px;
  background: #0ea5e9;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
}

.process-step::after {
  display: none;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 8px;
  padding-left: 15px;
}

.step-title::before {
  display: none;
}

.step-description {
  color: #374151;
  line-height: 1.6;
  padding-left: 15px;
  font-size: 0.95rem;
  font-weight: 400;
}

.process-footer {
  background: #3b82f6;
  color: white;
  padding: 25px 30px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.safety-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 0;
  margin-top: 10px;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.safety-badge::before {
  content: "";
  display: none;
}

.menu-column {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  width: 50%;
  text-align: left;
  padding-left: 25px;
}

.price-column {
  font-size: 1.2rem;
  font-weight: 700;
  color: #dc3545;
  width: 50%;
}

@media (max-width: 768px) {
  .treatment-process-section {
    padding: 0 15px;
    margin: 30px auto;
  }

  .process-header {
    padding: 30px 20px;
  }

  .process-title {
    font-size: 1.3rem;
  }

  .process-content {
    padding: 25px 20px;
  }

  .process-steps .process-step {
    padding: 20px;
    margin-left: 15px;
  }

  .process-steps .process-step::before {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    left: -15px;
  }

  .step-title {
    font-size: 1.1rem;
    padding-left: 15px;
  }

  .step-description {
    font-size: 0.95rem;
    padding-left: 15px;
  }

  .process-header {
    padding: 25px 20px;
  }

  .process-footer {
    padding: 20px;
  }

  .menu-column {
    padding-left: 15px;
  }
}