@charset "UTF-8";

/* 紋章を「全部見せる」図版に。各パーツは意味を増やさない飾り。 */
body.page-home .hero-art {
  position: relative;
  width: 100%;
  max-width: 416px;
  height: 400px;
  justify-self: center;
  isolation: isolate;
}
body.page-home .hero-art__orbit {
  position: absolute;
  width: 352px;
  height: 352px;
  inset: 32px 0 auto auto;
  border-radius: var(--radius-pill);
  background: var(--home-blue);
}
body.page-home .hero-art__sheet {
  position: absolute;
  inset: 8px 48px auto auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  padding: 16px 32px 24px;
  border: var(--home-line);
  border-radius: var(--home-round);
  background: var(--paper);
  box-shadow: var(--home-shadow-art);
  transform: rotate(8deg);
}
body.page-home .hero-art__top {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
}
body.page-home .hero-art__number {
  font-size: 6.5rem;
  line-height: 1.15;
  letter-spacing: -0.08em;
  margin-left: -8px;
}
body.page-home .hero-art__waffle { width: 192px; height: 192px; color: var(--kaki); }
body.page-home .hero-art__seal {
  position: absolute;
  bottom: 8px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: var(--home-line);
  border-radius: var(--radius-pill);
  background: var(--home-yellow);
  transform: rotate(-12deg);
}
body.page-home .home-check {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-home .hero-art__seal .home-check { width: 64px; height: 64px; }
body.page-home .hero-art__seal circle { stroke: none; }
body.page-home .hero-art__spark {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 16px;
  width: 56px;
  height: 56px;
  fill: var(--kaki);
  transform: rotate(8deg);
}
body.page-home .hero-art__trail {
  position: absolute;
  right: -8px;
  bottom: -16px;
  width: 144px;
  height: 88px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-16deg);
}
@media (min-width: 700px) and (max-width: 959px) {
  body.page-home .hero-art { transform: scale(0.8); transform-origin: center right; }
}
@media (max-width: 699px) {
  body.page-home .hero-art { width: 296px; height: 264px; margin-top: 32px; }
  body.page-home .hero-art__orbit { width: 248px; height: 248px; top: 8px; right: 8px; }
  body.page-home .hero-art__sheet { width: 192px; right: 48px; padding: 12px 16px 16px; border-radius: var(--home-round-sm); box-shadow: var(--home-shadow); }
  body.page-home .hero-art__top { font-size: 0.75rem; }
  body.page-home .hero-art__number { font-size: 4rem; }
  body.page-home .hero-art__waffle { width: 128px; height: 128px; }
  body.page-home .hero-art__seal { width: 72px; height: 72px; bottom: 0; left: 0; }
  body.page-home .hero-art__seal .home-check { width: 40px; height: 40px; }
  body.page-home .hero-art__spark { width: 40px; height: 40px; left: 8px; }
  body.page-home .hero-art__trail { width: 104px; height: 64px; right: 0; bottom: -8px; }
}