/* 「学習を深める」ページ：ホーム画面（home.css）の部品を使い、足りないところだけここに書く */

.learn-hero { grid-template-columns: 220px 1fr; align-items: center; margin-top: 18px; }
.learn-hero .alby::before { bottom: 2px; }
.learn-hero .bubble { margin-bottom: 0; }
.learn-hero .bubble h1 { font-size: 39px; }
@media (min-width: 821px) {
  .learn-hero .bubble::before { bottom: auto; top: 50%; margin-top: -17px; }
}

/* 内容ごとのまとまり（ワッペン） */
.groups { max-width: 1040px; margin: 40px auto 0; padding: 0 24px; display: grid; gap: 36px; }
.g-mint   { --c: var(--mint);   --cd: var(--mint-deep); --tint: #E7F7EF; }
.g-sun    { --c: var(--sun);    --cd: #9A7108;          --tint: #FFF5D9; }
.g-orange { --c: var(--orange); --cd: #B0560F;          --tint: #FFEBD9; }
.g-mint .patch   { transform: rotate(-.4deg); }
.g-sun .patch    { transform: rotate(.35deg); }
.g-orange .patch { transform: rotate(-.3deg); }

.group h2 { font-size: 27px; line-height: 1.35; }
.group h2 span {
  display: inline-block; margin-left: 12px; font-family: var(--body); font-weight: 700;
  font-size: 15px; color: var(--cd); vertical-align: 4px;
}

/* 関係する内容・チェックリストの項目の札 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tags i {
  font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.6; padding: 0 10px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--cd); color: var(--cd);
}

.back-home { max-width: 992px; margin: 36px auto 56px; padding: 0 24px; text-align: center; }

@media (max-width: 820px) {
  .learn-hero { grid-template-columns: 1fr; margin-top: 8px; }
  .learn-hero .alby img { width: 140px; }
  .learn-hero .alby::before { width: 140px; }
  .learn-hero .bubble h1 { font-size: 27px; }
  .groups { margin-top: 32px; gap: 30px; }
  .group h2 { font-size: 23px; }
  .group h2 span { display: block; margin: 2px 0 0; }
}