@charset "UTF-8";

/* 下段は青い面に切り替え、集める → 絞る → 採点の順を絵でたどる。 */
body.page-home .home-method {
  padding-block: 48px 32px;
  border-block: var(--home-line);
  border-radius: var(--home-round-section) var(--home-round-section) 0 0;
  background: var(--home-blue);
}
body.page-home .mfig {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  list-style: none;
}
body.page-home .mfig__step {
  position: relative;
  padding: 24px 16px;
  border: var(--home-line);
  border-radius: var(--home-round);
  background: var(--paper);
  text-align: center;
}
body.page-home .mfig__picture {
  display: grid;
  place-items: center;
  height: 192px;
}
body.page-home .mfig__art { display: block; width: 100%; max-width: 256px; height: 192px; }
body.page-home .mfig__waffle { width: 176px; height: 176px; }
body.page-home .mfig__art--empty { display: grid; place-items: center; }
body.page-home .mfig__art--empty .home-check { width: 96px; height: 96px; }
body.page-home .mfig__score text { font-family: var(--home-font); font-weight: 700; fill: var(--ink); }
body.page-home .mfig__weight { font-size: 1rem; }
body.page-home .mfig__points { font-size: 1.25rem; }
body.page-home .mfig__rank { font-size: 0.875rem; }
body.page-home .mfig__title { margin-top: 16px; font-size: 1.125rem; white-space: nowrap; }
body.page-home .mfig__text { margin-top: 8px; font-size: 0.8125rem; line-height: 1.8; color: var(--ink-soft); }
body.page-home .mfig__next {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  right: -32px;
  top: 112px;
  border: var(--home-line);
  border-radius: var(--radius-pill);
  background: var(--home-yellow);
}
body.page-home .mfig-note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: 0.9375rem;
  font-weight: 700;
}
body.page-home .mfig-note > span { display: inline-flex; gap: 8px; align-items: center; }
body.page-home .mfig-note .home-check { width: 24px; height: 24px; }
body.page-home .mfig-note a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  font-size: 0.8125rem;
  color: var(--ink);
}
body.page-home .mfig-note a:hover { color: var(--link-deep); }
body.page-home .mfig-note .home-arrow { width: 16px; height: 16px; }

@media (min-width: 700px) and (max-width: 959px) {
  body.page-home .mfig { gap: 16px; }
  body.page-home .mfig__step { padding: 16px 8px; }
  body.page-home .mfig__title { font-size: 0.8125rem; }
  body.page-home .mfig__text { font-size: 0.75rem; }
  body.page-home .mfig__picture, body.page-home .mfig__art { height: 160px; }
  body.page-home .mfig__waffle { width: 144px; height: 144px; }
  body.page-home .mfig__next { right: -24px; top: 80px; width: 32px; height: 32px; }
}
@media (max-width: 699px) {
  body.page-home .home-method { border-radius: var(--home-round-section-sm) var(--home-round-section-sm) 0 0; padding-block: 32px 24px; }
  body.page-home .mfig { grid-template-columns: 1fr; gap: 24px; }
  body.page-home .mfig__step {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 16px 12px;
    text-align: left;
    border-radius: var(--home-round-sm);
  }
  body.page-home .mfig__picture { grid-row: 1 / 3; height: 104px; }
  body.page-home .mfig__art { width: 112px; height: auto; }
  body.page-home .mfig__weight, body.page-home .mfig__points { font-size: 1.75rem; }
  body.page-home .mfig__rank { font-size: 1.125rem; }
  body.page-home .mfig__weight--small { display: none; }
  body.page-home .mfig__waffle { width: 88px; height: 88px; }
  body.page-home .mfig__title { align-self: end; margin-top: 0; font-size: 0.9375rem; letter-spacing: -0.02em; }
  body.page-home .mfig__text { align-self: start; margin-top: 8px; font-size: 0.75rem; }
  body.page-home .mfig__next { top: auto; bottom: -32px; right: calc(50% - 20px); transform: rotate(90deg); }
  body.page-home .mfig-note { gap: 0; margin-top: 24px; font-size: 0.8125rem; }
  body.page-home .mfig-note a { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 359px) {
  body.page-home .mfig__step { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
  body.page-home .mfig__art, body.page-home .mfig__waffle { width: 80px; }
  body.page-home .mfig__title { font-size: 0.875rem; }
}