/* One continuous page. The white envelope is already waiting below the inbox. */
.niwa-support { position:relative; padding-block:70px 150px; }
.niwa-support__intro { text-align:center; }
.niwa-support__intro h2 { text-wrap:balance; }
.niwa-support__intro p, .niwa-support__destination p { max-width:54ch; margin:22px auto 0; color:var(--pt-muted); font-size:15px; line-height:1.7; text-wrap:pretty; }
.niwa-support__scene { --pocket-top:90px; --pocket-width:min(420px, calc(100% - 24px)); --pocket-height:260px; position:relative; width:min(1140px,100%); height:510px; margin:50px auto 0; }
.niwa-support.is-animated .niwa-support__scene { --pocket-top:1780px; height:calc(var(--pocket-top) + var(--pocket-height) + 150px); }
.niwa-support__letters { position:absolute; inset:0 0 auto; height:calc(var(--pocket-top) + var(--pocket-height) - 3px); overflow:clip; z-index:2; pointer-events:none; }
.niwa-support__inbox { position:sticky; top:28svh; height:0; }
.niwa-support__mail { display:none; position:absolute; top:0; left:50%; width:min(340px, calc(100% - 48px)); height:56px; overflow:hidden; border:1px solid #e1e2e6; border-radius:10px; background:#fff; box-shadow:0 5px 20px #2e30320b; transform:translateX(-50%); transform-origin:center top; }
.niwa-support.is-animated .niwa-support__mail { display:block; }
.niwa-support__mail-head { display:flex; align-items:center; gap:12px; height:54px; padding:8px 16px; }
.niwa-support__mail-head > div { min-width:0; flex:1; }
.niwa-support__mail-head strong, .niwa-support__mail-head div > span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.niwa-support__mail-head strong { font-size:11px; font-weight:500; line-height:1.6; }
.niwa-support__mail-head div > span { color:var(--pt-muted); font-size:10px; line-height:1.6; }
.niwa-support__mail-icon { display:grid; place-items:center; flex:0 0 29px; height:29px; border-radius:50%; background:var(--pt-bone); color:var(--pt-muted); }
.niwa-support__mail-icon svg { width:18px; height:18px; }
.niwa-support__mail-dot { width:5px; height:5px; border-radius:50%; background:#a7a0c2; }
.niwa-support__reply { min-height:94px; padding:15px 16px 18px; border-top:1px solid #e9e6f0; background:#f8f7fb; }
.niwa-support__reply-label { display:flex; align-items:center; gap:5px; color:#696086; font-size:10px; font-weight:500; }
.niwa-support__reply-label svg { width:15px; height:15px; }
.niwa-support__reply p { margin-top:8px; font-size:11px; line-height:1.6; }
.niwa-support__envelope-back, .niwa-support__envelope-front { position:absolute; left:50%; top:var(--pocket-top); width:var(--pocket-width); height:var(--pocket-height); transform:translateX(-50%); border-radius:5px 5px 12px 12px; }
.niwa-support__envelope-back { z-index:1; background:#fff; border:1px solid #e9eaed; box-shadow:0 20px 35px #3438400e, 0 2px 5px #34384006; }
.niwa-support__envelope-open { position:absolute; inset:-145px -1px auto; width:calc(100% + 2px); height:146px; transform-origin:center bottom; opacity:0; }
.niwa-support__envelope-front { z-index:3; }
.niwa-support__envelope-front > svg:not(.niwa-support__envelope-fold) { display:block; width:100%; height:100%; }
.niwa-support__envelope-fold { position:absolute; inset:0 0 auto; width:100%; height:145px; transform-origin:center top; backface-visibility:hidden; }
.niwa-support__destination { position:absolute; top:calc(var(--pocket-top) + var(--pocket-height) + 45px); left:50%; transform:translateX(-50%); text-align:center; }
.niwa-support__destination h3 { text-wrap:balance; }
.niwa-support__destination p { margin-top:14px; }
@media(max-width:700px) {
  .niwa-support { padding-block:45px 145px; }
  .niwa-support__intro p, .niwa-support__destination p { font-size:14px; }
  .niwa-support__scene { --pocket-width:min(340px, calc(100% - 80px)); --pocket-height:clamp(160px, 54vw, 200px); height:480px; margin-top:35px; }
  .niwa-support__mail { width:min(316px, calc(100% - 104px)); }
  .niwa-support.is-animated .niwa-support__scene { --pocket-top:1980px; }
  .niwa-support__mail-head { gap:9px; padding-inline:12px; }
  .niwa-support__reply { padding-inline:13px; }
  .niwa-support__envelope-open { inset-block-start:calc(var(--pocket-height) * -.53); height:calc(var(--pocket-height) * .53 + 1px); }
  .niwa-support__envelope-fold { height:calc(var(--pocket-height) * .53); }
}
@media print { .niwa-support.is-animated .niwa-support__scene { --pocket-top:90px; height:480px; } .niwa-support__letters { display:none; } }