/* トップページ：主役は2つのメッセージの文字そのもの。
   右下で、マグカップを持ったアルビーが「第1回から始める」の札のふちに腰かける */
.hero { padding: clamp(36px, 7vw, 88px) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 20vw, 230px); gap: 0 24px; align-items: end; }
.hero-sub { margin: 0 0 20px; font-size: .95rem; color: var(--ink-soft); font-weight: 700; }
.hero-words { margin: 0; font-size: clamp(2.1rem, 1rem + 5vw, 4.4rem); line-height: 1.3; }
.hero-words .line { display: block; }
.hero-words .line:first-child { color: var(--ink-soft); }
.hero-words .line:last-child { color: var(--ink); }
.hero-second {
  margin: 22px 0 0; font-family: var(--hand); font-weight: 600; letter-spacing: .04em;
  font-size: clamp(1.2rem, .9rem + 1.4vw, 1.85rem); color: var(--mikata);
}
.hero-lead { margin: 22px 0 clamp(28px, 4vw, 44px); max-width: 36em; color: var(--ink-soft); }
.hero-alby { width: 100%; height: auto; display: block; position: relative; z-index: 2; margin-bottom: -34px; }

.doors { padding: 0 0 8px; }
.doors .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.door {
  display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px;
}
.door:hover { border-color: var(--ink-soft); }
.door.first { background: var(--ink); color: #fff; border-color: var(--ink); }
.door:last-child { padding-top: 34px; }
.door-title { font-family: var(--hand); font-weight: 600; font-size: 1.25rem; letter-spacing: .03em; }
.door-text { font-size: .92rem; opacity: .85; }

.top-more { padding-top: 8px; }
.years { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 46em; }
.years li { display: grid; gap: 2px; padding: 14px 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); }
.years strong { font-family: var(--hand); font-weight: 600; font-size: 1.1rem; color: var(--mikata); letter-spacing: .03em; }
.soon-list { color: var(--ink-soft); }

@media (max-width: 860px) {
  .doors .wrap { grid-template-columns: 1fr; }
  .door:last-child { padding-top: 20px; }
  /* 1列のときは、アルビーは最初の札（はじめての先生へ）のふちに腰かける */
  .hero-alby { margin-bottom: -26px; }
}
@media (max-width: 600px) {
  /* スマホ：文の幅を確保するため、アルビーは文の下の右はしに小さく置く */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-lead { margin-bottom: 0; }
  .hero-alby { width: 112px; justify-self: end; margin-top: -8px; margin-bottom: -22px; }
}