/* ===== BEGINNER（参考：差し色の帯に雲の吹き出し・下に尖りのある帯 → 写真の地に「6つのポイント」の枠） ===== */
.beginner { width: 100%; }
.beginner__balloon { position: relative; padding: 30px 20px 35px; background: var(--pale); color: var(--ink); }
/* 帯の下の中央の尖り（参考の index_beginner_arrow） */
.beginner__balloon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; width: 114px; height: 29px; margin: 0 auto; background: var(--pale); clip-path: path("M0 0 H114 C 86 0 64 6 57 29 C 50 6 28 0 0 0 Z"); }
.beginner__inner { position: relative; }
.beginner__h { position: relative; width: 270px; margin: 0 auto 30px; font-size: 1.8rem; line-height: 2.8rem; font-weight: 700; letter-spacing: .34rem; text-align: center; }
.beginner__h::before, .beginner__h::after { content: ""; position: absolute; bottom: 4px; width: 0; height: 30px; border-left: 1px dashed var(--accent); }
.beginner__h::before { left: 0; transform: rotate(-24deg); }
.beginner__h::after { right: 0; transform: rotate(24deg); }
.beginner__txt { font-size: 1.3rem; line-height: 2.8rem; letter-spacing: .1rem; }
.beginner__txt p + p { margin-top: 0; }


@media (min-width: 768px) {
  .beginner__balloon { padding: 65px 0 55px; }
  .beginner__inner { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 20px; }
  .beginner__h { width: 560px; font-size: 2.2rem; line-height: 2.2rem; }
  .beginner__txt { font-size: 1.4rem; text-align: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .beginner__h { width: 420px; font-size: 1.9rem; line-height: 3.2rem; }
}

/* --- 6つのポイント --- */
.beginner__point { position: relative; isolation: isolate; margin-bottom: 50px; padding: 50px 0 40px; }
.beginner__bg { display: none; }
@media (min-width: 768px) {
  .beginner__point { margin-bottom: 130px; padding: 80px 0 40px; }
  .beginner__bg { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; }
  .beginner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .18; }
}

.point-ttl { position: relative; margin: 0 auto 40px; font-family: var(--f-serif); font-size: 2.2rem; font-weight: 500; line-height: 1.6; letter-spacing: .14em; text-align: center; color: var(--ink-head); }
@media (min-width: 768px) {
  .point-ttl { margin-bottom: 64px; font-size: 2.8rem; }
}

.point-list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; }
@media (min-width: 768px) {
  .point-list { width: 100%; max-width: 900px; margin: 0 auto; }
}

.point { width: 300px; margin: 0 auto 50px; padding: 30px 10px; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow); text-align: center; }
.point__num { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 auto 14px; color: var(--accent); }
.point__label { font-family: var(--f-en); font-size: 1.1rem; line-height: 1; letter-spacing: .2rem; }
.point__digit { font-family: var(--f-en); font-size: 3rem; line-height: 1; font-weight: 400; letter-spacing: .05em; }
.point__icon { display: block; width: 106px; height: 106px; margin: 0 auto 12px; object-fit: contain; }
.point__catch { margin-bottom: 15px; font-size: 1.2rem; line-height: 1.2rem; }
.point__h { margin-bottom: 20px; font-family: var(--f-serif); font-size: 2rem; line-height: 2rem; font-weight: 500; letter-spacing: .2rem; color: var(--accent); }
.point__txt { font-size: 1.2rem; line-height: 2.4rem; }
.point__more { width: 220px; height: 50px; margin-top: 10px; line-height: 48px; font-family: var(--f-sans); font-weight: 700; }
@media (min-width: 768px) {
  .point { width: 31.5%; margin: 0 0 70px; }
  .point__h { font-size: 2.4rem; line-height: 2.4rem; }
  .point__txt { font-size: 1.4rem; line-height: 2.8rem; }
  .point__more { display: none; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .point__h { font-size: 2rem; letter-spacing: .05rem; }
  .point__txt { font-size: 1.2rem; line-height: 2.4rem; }
}