/* ページの切り替え：暗い幕が下から上がって画面を覆い、次のページで上へ抜ける。動きは pt.js。
   幕は html の疑似要素（次のページの最初の描画から覆っていられるように、DOM を待たない） */
html::before{content:"";position:fixed;z-index:2147483000;left:-12vw;right:-12vw;top:0;height:130vh;pointer-events:none;
  background:#0a0b0e;border-radius:50% / 15vh;transform:translate3d(0,112vh,0);visibility:hidden;will-change:transform}
html::after{content:"";position:fixed;z-index:2147483001;left:50%;top:50%;width:46px;height:42px;margin:-21px 0 0 -23px;pointer-events:none;
  background:#f1efea;-webkit-mask:url(comp-mark.png) center/contain no-repeat;mask:url(comp-mark.png) center/contain no-repeat;opacity:0;visibility:hidden}
/* 出るとき：覆う */
html.pt-cover::before{visibility:visible;transform:translate3d(0,-15vh,0);transition:transform .62s cubic-bezier(.7,0,.2,1)}
html.pt-cover::after{visibility:visible;opacity:.9;transition:opacity .3s ease .34s}
html.pt-cover{pointer-events:none}
/* 着いたとき：覆ったまま始まる */
html.pt-in::before{visibility:visible;transform:translate3d(0,-15vh,0)}
html.pt-in::after{visibility:visible;opacity:.9}
/* 抜ける */
html.pt-out::before{visibility:visible;transform:translate3d(0,-136vh,0);transition:transform .8s cubic-bezier(.65,0,.15,1) .08s}
html.pt-out::after{visibility:visible;opacity:0;transition:opacity .25s ease}
@media (prefers-reduced-motion: reduce){html::before,html::after{display:none}}