/* 「わがぼんの使い方」専用。既存のheroや共通ヘッダーへ適用しない。 */
.how-to { padding: 72px 0 80px; border-top: 1px solid #eaf0eb; background: #fff; }
.how-to-inner { width: min(calc(100% - 64px), 1240px); margin-inline: auto; }
.how-to-heading { text-align: center; }
.how-to-heading h2 { margin: 0; color: #16815e; font-size: 32px; font-weight: 600; line-height: 1.5; letter-spacing: .03em; }
.how-to-heading > p { margin: 16px 0 0; color: #4b5d51; font-size: 17px; line-height: 1.9; }
.how-to-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 44px 0 0; padding: 0; list-style: none; }
.how-to-step { min-width: 0; }
.how-to-step h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 21px; line-height: 1.6; font-weight: 600; }
.how-to-number { color: #009f72; font-size: 15px; font-weight: 600; letter-spacing: .05em; }
.how-to-description { margin: 12px 0 0; min-height: 54px; color: #4b5d51; font-size: 15px; line-height: 1.8; }
.how-to-screen { display: flex; align-items: center; justify-content: center; height: 560px; margin: 24px 0 0; padding: 20px; background: #f5f9f6; border: 1px solid #e8efe9; border-radius: 20px; }
.how-to-screen img { width: 100%; max-width: 300px; height: auto; max-height: 520px; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 18px rgb(38 73 48 / 7%); }
.how-to-note { max-width: 900px; margin: 22px auto 0; text-align: center; }
@media (min-width: 761px) and (max-width: 1100px) {
  .how-to-inner { width: calc(100% - 40px); }
  .how-to-steps { gap: 20px; }
  .how-to-step h3 { font-size: 18px; gap: 9px; }
  .how-to-description { min-height: 81px; font-size: 14px; }
  .how-to-screen { padding: 14px; height: 500px; }
  .how-to-screen img { max-height: 470px; }
}
@media (max-width: 760px) {
  .how-to { padding: 48px 0 52px; }
  .how-to-inner { width: min(calc(100% - 36px), 500px); }
  .how-to-heading h2 { font-size: 26px; }
  .how-to-heading > p { margin-top: 12px; font-size: 15px; text-wrap: balance; }
  .how-to-steps { grid-template-columns: minmax(0, 1fr); gap: 38px; margin-top: 32px; }
  .how-to-step h3 { font-size: 21px; }
  .how-to-description { min-height: 0; margin-top: 10px; font-size: 14px; }
  .how-to-screen { height: auto; margin-top: 18px; padding: 22px 16px; border-radius: 16px; }
  .how-to-screen img { max-width: 280px; max-height: 675px; }
  .how-to-note { margin-top: 26px; text-align: left; }
}
@media (max-width: 359px) {
  .how-to-inner { width: calc(100% - 28px); }
  .how-to-heading h2 { font-size: 24px; }
  .how-to-step h3 { font-size: 19px; gap: 10px; }
  .how-to-screen { padding: 18px 14px; }
}

.how-to-description { text-wrap: balance; }

/* 採用デザインのPC仕上げ。画像全体を保ち、表示上の高さを揃える。 */
@media (min-width: 761px) {
  .how-to-screen { margin-top: 16px; }
  .how-to-step:nth-child(2) .how-to-screen img { max-width: 338px; }
}