/* トップページの開幕（intro.js）。intro-on の間はページを黒で覆い、スクロールさせない */
html.intro-on{overflow:hidden}
html.intro-on::after{content:"";position:fixed;inset:0;z-index:2147482999;background:#000}
.inari-intro{position:fixed;inset:0;z-index:2147483000;background:#000;overflow:hidden;cursor:pointer;transition:opacity .9s ease}
.inari-intro.intro-out{opacity:0;pointer-events:none}
/* 映像は16:9。黒地なので端が切れても見えない。縦長の画面ではロゴが小さくなりすぎないよう、幅を画面の2.3倍まで広げる */
.inari-intro video{position:absolute;left:50%;top:50%;width:min(max(100vw,177.78vh),230vw);height:auto;transform:translate(-50%,-50%);background:#000}
.inari-intro .intro-skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));padding:10px 14px;border:0;background:none;color:rgba(244,236,222,.45);font:12px/1 system-ui,sans-serif;letter-spacing:.32em;cursor:pointer;opacity:0;animation:intro-skip-in .6s ease 1.2s forwards}
.inari-intro .intro-skip:hover,.inari-intro .intro-skip:focus-visible{color:rgba(244,236,222,.85);outline:1px solid rgba(244,236,222,.35);outline-offset:2px}
@keyframes intro-skip-in{to{opacity:1}}