/* =============================================================
   PROMISE — Lab Grown Diamond Page
   lab-grown.css  |  v2.0.0
============================================================= */
/* ---- Page Hero ------------------------------------------- */
.page-hero {
  text-align: right;
}
.category-title { margin-top: 25px; }
/* ---- 特徴 ------------------------------------------------ */
#features { margin-top:0px; }
.features-icons { display: flex; justify-content: space-between; width: 900px; margin: 0 auto; }
.feature-item { display: flex; flex-direction: column; align-items: center; }
.feature-icon { width: 118px; height: 118px; text-align: center; margin-bottom: 15px; }
.feature-icon img { width: 100%; }
.feature-label { font-size: var(--fs-2xl); letter-spacing: .12em; }

/* ---- 生産方法 -------------------------------------------- */
#production { margin: 185px 0 0 0; }
.method-block { max-width: 1200px; margin: 0 auto 120px; padding: 0 40px; }
.method-block:last-child { margin-bottom: 0; }

.method-block--hpht,
.method-block--cvd { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; text-align: left; }
.imageCvd { width: 80%; }
.method-tag { margin-bottom: 30px; }
.method-title { font-family: 'Cinzel', serif; font-size: var(--fs-max); font-weight: 400; letter-spacing: .05em; line-height: 1.15; vertical-align: middle; }
.method-title { display: flex; align-items: center;  gap: 3px; }
.method-title span { font-size: var(--fs-xl);  }
.method-body { font-size: var(--fs-sm); line-height: 2.4; margin-top: 30px; }
.method-diagram img { width: 100%; }
.method-diagram img.imageCvd { width: 85%; margin-left: 80px; }

/* ---- CTA ------------------------------------------------- */
#cta {
  padding: 100px 40px;
  text-align: center;
  background: var(--deep);
  border-top: 1px solid var(--border);
}

#cta p {
  font-size: .85rem;
  color: var(--gray-lt);
  margin-bottom: 40px;
  letter-spacing: .08em;
  line-height: 2.2;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
  .method-block--hpht,
  .method-block--cvd { gap: 48px; padding-inline: 24px; }
  .features-icons { width: 100%; flex-wrap: wrap; padding-inline: 24px; }
}

@media (max-width: 768px) {
 
  #features { margin-top: 80px; padding: 0; }
  .features-icons { margin-top: 7vw; width: 100%; padding-inline: 5vw; }
  .feature-item { width: 32%; }
  .feature-icon {
    width: 100%;          /* 親要素(30%)の幅に対して最大化 */
    max-width: 85px;      /* 大きくなりすぎないよう上限を設定 */
    height: auto;         /* 高さを自動可変に変更（118px固定を解除） */
    margin-bottom: 10px;  /* 余白もスマホ向けに少し詰める */
  }

  .feature-label {
    font-size:var(--fs-md);
    text-align: center;
    line-height: 1.6;
  }

  #production { margin-top: 80px; padding: 0; }
  .method-block { padding-inline: 5vw; margin: 60px 0; }
  .method-block--hpht,
  .method-block--cvd { grid-template-columns: 1fr; gap: 40px; padding: 0; }
  .method-block--cvd { padding-top: 50px; margin-top: 50px; border-top: 1px solid #222; }

.imageCvd { width: 80%; }
.method-tag { margin-bottom: 5px; font-size: var(--fs-md); }
.method-title { font-family: 'Cinzel', serif; font-size: var(--fs-max); font-weight: 400; letter-spacing: .05em; line-height: 1.15; vertical-align: middle; }
.method-title span { font-size: var(--fs-xl); }
.method-body { font-size: var(--fs-md); line-height: 1.8; margin-top: 25px; }
.method-diagram img { width: 100%; }
.method-diagram img.imageCvd { width: 100%; margin: 0; }


}