* { box-sizing: border-box; margin: 0; padding: 0; }
/* 300×250を基準に文字・装飾も同比率で拡縮。最大400×約333px。 */
html { font-size: min(0.3333333333vw, 1.3333333333px); }
html, body { width: 100%; max-width: 400px; height: 250rem; font-family: 'M PLUS Rounded 1c', sans-serif; }
.banner-container {
  display: block; position: relative; width: 100%; height: 250rem;
  overflow: hidden; text-decoration: none; color: #593d53;
  background: radial-gradient(ellipse at 90% 90%, #e4daf5 0%, transparent 60%), linear-gradient(120deg, #fff9f1, #fce6ec);
  border: 1rem solid #efd7e2;
}
.copy { position: relative; z-index: 3; padding: 15rem 16rem; }
.eyebrow { font-size: 9rem; font-weight: 700; letter-spacing: .4rem; color: #876479; }
h1 { margin-top: 9rem; font-size: 24rem; font-weight: 800; line-height: 1.35; letter-spacing: -.8rem; }
h1 span { color: #b54675; text-decoration: underline; text-decoration-color: #edb7cc; text-decoration-thickness: 4rem; text-underline-offset: 3rem; }
.description { margin-top: 6rem; font-size: 9rem; line-height: 1.8; font-weight: 500; }
.brand { margin-top: 5rem; font-size: 10rem; line-height: 1.45; font-weight: 700; }
.brand strong { font-size: 14rem; letter-spacing: 1rem; }
.notebook {
  position: absolute; right: -5rem; top: 69rem; z-index: 1;
  width: 112rem; height: 145rem; padding: 16rem 9rem 8rem 13rem;
  border-radius: 5rem 12rem 12rem 5rem; border-left: 5rem solid #c5a3cc;
  background: repeating-linear-gradient(to bottom, #fffcf7 0 17rem, #eee3ea 17rem 18rem);
  box-shadow: 0 8rem 20rem #855b7c26; transform: rotate(8deg);
  animation: notebook-in .8s ease-out both;
}
.tape { position: absolute; width: 46rem; height: 15rem; background: #d7b6d6bb; top: -7rem; left: 29rem; transform: rotate(-5deg); }
.notebook-title { font-size: 8rem; font-weight: 800; color: #856488; }
.notebook-title span { color: #c56f97; }
.entry { margin-top: 9rem; font-size: 7rem; line-height: 1.8; }
.label { display: inline-block; padding: 0 5rem; border-radius: 4rem; background: #f9dce6; color: #995173; font-weight: 800; }
.entry p { margin-top: 3rem; }
.diary .label { background: #ebe1f4; color: #80618f; }
.notebook-heart { position: absolute; bottom: 6rem; right: 12rem; font-size: 24rem; color: #c87c99; }
.character { position: absolute; z-index: 4; width: 76rem; height: auto; right: 13rem; bottom: 4rem; filter: drop-shadow(0 4rem 4rem #886b7e26); animation: hello .8s .15s ease-out both; }
.cta-button { position: absolute; z-index: 5; left: 16rem; bottom: 27rem; display: flex; align-items: center; justify-content: space-between; width: 164rem; padding: 9rem 16rem; border-radius: 24rem; font-size: 12rem; font-weight: 800; color: #fff; background: #ad4976; box-shadow: 0 4rem 10rem #ad49762b; transition: background .2s; }
.cta-button span { font-size: 17rem; line-height: 1; }
.footer-note { position: absolute; bottom: 10rem; left: 22rem; font-size: 8rem; color: #876479; }
.petal { position: absolute; color: #c28bac; }
.petal-one { top: 22rem; right: 23rem; font-size: 24rem; }
.petal-two { top: 49rem; right: 60rem; font-size: 14rem; }
.banner-container:hover .cta-button { background: #923760; }
.banner-container:focus-visible { outline: 3rem solid #923760; outline-offset: -3rem; }
@keyframes notebook-in { from { opacity: 0; transform: translateY(12rem) rotate(12deg); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes hello { from { opacity: 0; transform: translateY(12rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }