html{background-color:var(--color-primary);margin:0;padding:0;max-width:100%!important;overflow-x:hidden!important}body{background-color:var(--color-bg);color:var(--color-text);flex-direction:column;min-height:100vh;margin:0;font-family:Noto Serif JP,serif;display:flex;max-width:100%!important;overflow-x:hidden!important}h1,h2,h3,h4{font-family:Noto Serif JP,serif!important}.hplp-main{flex-grow:1;width:100%;padding:2rem 1rem 4rem;overflow:hidden}@media (width>=768px){.hplp-main{padding:4rem 1.5rem 6rem}}.hplp-inner{max-width:64rem;margin:0 auto}.section-title{color:var(--color-accent);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);text-align:center;border-radius:15px;margin-bottom:2rem;padding:2.5rem 2rem;font-size:2.2rem;font-weight:900}.content-card{border-top:8px solid var(--color-accent);background:#fff;border-radius:24px;margin-top:3rem;padding:2rem;box-shadow:0 8px 32px #00000014}.content-card h2{color:var(--color-primary);border-bottom:2px solid var(--color-bg-sub);margin-bottom:1.5rem;padding-bottom:1rem;font-size:1.5rem;font-weight:700}@media (width>=768px){.content-card h2{font-size:1.875rem}}.media-wrap{justify-content:center;display:flex}.media-wrap img{border:2px solid var(--color-border);border-radius:12px;width:100%;max-width:56rem;box-shadow:0 4px 16px #0000001a}.media-link{width:100%;max-width:56rem;transition:transform .2s,box-shadow .2s;display:block}.media-link:hover,.media-link:focus-visible{transform:translateY(-2px)}.media-link:hover img,.media-link:focus-visible img{box-shadow:0 10px 28px #0000002e}.media-note{text-align:center;word-break:break-all;margin-top:1.25rem}.body-text{color:var(--color-text);max-width:56rem;margin:0 auto;font-size:.875rem;line-height:1.75}@media (width>=768px){.body-text{font-size:1rem}}.body-text a{color:var(--color-accent-ink);text-decoration:underline}.live-demo__lead{margin-bottom:1.25rem}.live-demo{border:2px solid var(--color-border);background:#06041a;border-radius:14px;max-width:56rem;margin:0 auto;overflow:hidden;box-shadow:0 10px 32px #0000002e}.live-demo__bar{background:#14102e;border-bottom:1px solid #b79cff33;align-items:center;gap:6px;height:32px;padding:0 12px;display:flex}.live-demo__bar i{background:#ff5f7e;border-radius:50%;width:10px;height:10px}.live-demo__bar i:nth-child(2){background:#ffc24b}.live-demo__bar i:nth-child(3){background:#45e08a}.live-demo__bar span{color:#a29cc8;background:#ffffff0f;border-radius:999px;margin-left:10px;padding:2px 12px;font-family:ui-monospace,monospace;font-size:.72rem}.live-demo__viewport{height:480px;position:relative;overflow:hidden}.live-demo__frame{transform-origin:0 0;pointer-events:none;border:0;width:1280px;height:800px;position:absolute;top:0;left:0}.live-demo.is-active .live-demo__frame{pointer-events:auto}.live-demo__cover{cursor:pointer;background:linear-gradient(#06041a00 60%,#06041a8c);border:0;justify-content:center;align-items:flex-end;width:100%;padding:0 0 18px;display:flex;position:absolute;inset:0}.live-demo__cover span{color:#0b0720;background:#d4ff3a;border-radius:999px;padding:8px 18px;font-family:Noto Serif JP,serif;font-size:.85rem;font-weight:700;transition:transform .2s;box-shadow:0 6px 20px #00000059}.live-demo__cover:hover span,.live-demo__cover:focus-visible span{transform:translateY(-2px)}.live-demo.is-active .live-demo__cover{display:none}@media (width<=768px){.footer__inner{grid-template-columns:1fr 1fr}}@media (width<=480px){.footer__inner{grid-template-columns:1fr;gap:32px}}@media (width<=640px){.footer__logo-img{height:42px}}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:100px;justify-content:center;align-items:center;gap:10px;font-family:Noto Serif JP,serif;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex}.btn--line{background:linear-gradient(135deg, var(--color-cta), var(--color-cta-hover));color:#fff;box-shadow:0 6px 28px #1d7a5473}.btn--line:hover{box-shadow:0 10px 36px #1d7a5499}.btn--sm{padding:10px 20px;font-size:.82rem}.btn__icon{justify-content:center;align-items:center;display:inline-flex}
