*{margin:0;padding:0;box-sizing:border-box;font-family:var(--main-font),-apple-system-body,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans Japanese","\6e38\30b4\30b7\30c3\30af   Medium","Yu Gothic Medium","\30e1\30a4\30ea\30aa",meiryo,sans-serif}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;font-size:var(--fontSize);overflow:hidden;background-color:var(--bgColor)}.screen{display:flex;flex-direction:column;height:100vh}#readyState{font-size:10px;color:#fff;position:absolute;left:50%;transform:translate(-50%)}#content{position:relative;display:flex}.content{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .8s}p{margin:0;padding:0}h2{text-align:center;margin-bottom:1.5em;font-size:3em}.dialog{position:fixed;top:0;left:0;width:100%;height:100%;color:#fff;background-color:#000c;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;z-index:10;opacity:0;visibility:hidden;transition:opacity .3s linear,visibility .3s linear}.dialog.show{opacity:1;visibility:visible}.dialog-content{margin:0;padding:0;position:absolute;top:50%;left:50%;width:90%;line-height:1;transform:translate(-50%,-50%) scale(.9);transition:transform .3s ease-in-out}.dialog.show .dialog-content{transform:translate(-50%,-50%) scale(1)}.callinfo{text-align:center;line-height:1;color:var(--primaryColor)}#callDept,#overallCallState{font-size:2.5em;text-align:center;padding-bottom:.1em}#callName{font-size:5em;margin-bottom:.3em;font-weight:700;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.dialog-content .dialog-title,.dialog-content #callDept,.dialog-content #callName,.dialog-content{color:#fff;text-align:center}.info{font-size:1.9em;font-weight:700;text-align:center;padding:10px 0%;color:var(--primaryColor)}.picture{width:250px;height:250px;border-radius:50%;border:5px solid white;box-shadow:0 4px 10px #0003}.baricon{width:40px;height:40px;padding:5px;margin-left:auto;opacity:50%}.fade-out{opacity:0;transition:opacity 1s}.navbar{color:#fff;display:flex;justify-content:space-between;align-items:center;padding-top:env(safe-area-inset-top);background-image:linear-gradient(to bottom,var(--darkKeycolor),var(--keycolor) 95%,var(--darkKeycolor));height:calc(85px + env(safe-area-inset-top));position:relative}.navbarbutton{width:5em;height:2em;padding:5px;color:var(--forceButtonPrimaryColor, var(--primaryColor));background-color:var(--keycolor);border:none;cursor:pointer;font-size:1.1em;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:5px;border-radius:10px;box-sizing:border-box}[data-home=true] .navbar{background-image:none;color:var(--primaryColor)}.navbar h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:30px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.navbar .back-text{font-weight:700;font-size:26px;padding:5px 10px;margin-right:20px;transition:opacity .2s ease;cursor:pointer}.navbar a:last-child,.navbar button:last-child{margin-right:0}.back-text{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.logo{width:80%;margin:0 auto;height:250px;background-image:var(--logo-image);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(5px 5px 3px rgba(0,0,0,.2))}.dialog-actions{padding-top:2em}.button-container,.dialog-actions{display:flex;margin:0 auto;width:100%;align-items:center;justify-content:center}.stylish-button{z-index:1;flex:1;padding:5px;background:none;color:var(--forceButtonPrimaryColor, var(--primaryColor));border:none;cursor:pointer;transition:background-color .2s,transform .2s,box-shadow .2s;font-size:2em;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px;height:calc((calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + 170px))) / 3);max-width:calc((100vw - 50px)/2);opacity:var(--buttonOpacity);border-radius:var(--buttonRadius);position:relative}.stylish-button:before{content:"";position:absolute;inset:0;background-color:var(--keycolor);border-radius:var(--buttonRadius);transition:transform .2s;z-index:-1}.stylish-button:after{content:"";position:absolute;top:6px;left:6px;width:100%;height:100%;background-color:var(--darkKeycolor);border-radius:var(--buttonRadius);transition:transform .2s;z-index:-2}.stylish-button:active:before{transform:translate(1px,6px)}.stylish-button:active:after{transform:translate(-5px)}.stylish-button .icon{font-size:2.5em;display:block;margin-bottom:10px;transition:transform .2s}.stylish-button .label{line-height:1;font-size:1.2em;display:block;letter-spacing:-.05em;padding:0;transition:transform .2s}.stylish-button:active .icon,.stylish-button:active .label{transform:translate(1px,6px)}#hangup.stylish-button{padding-top:3em;color:#fff;min-width:50%;opacity:1;margin-left:auto;margin-right:auto;max-height:25%}#hangup.stylish-button:before{background-color:var(--hangupColor);background-image:url(./hangup.svg);background-repeat:no-repeat;background-position:center calc(50% - .5em);background-size:5em auto}img.button-container{margin:0;padding:0}.keyboard,.input-area{justify-content:space-between;padding:5px;display:flex;align-items:center}#inputBar{font-size:3em;background-color:transparent;border:none;outline:none;overflow:hidden;margin:0;resize:none;color:var(--primaryColor);text-shadow:-1px -1px 0 var(--darkKeycolor),1px -1px 0 var(--darkKeycolor),-1px 1px 0 var(--darkKeycolor),1px 1px 0 var(--darkKeycolor)}.keyboard{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}.key{opacity:var(--buttonOpacity);font-size:3em;background-color:var(--keycolor);color:var(--forceButtonPrimaryColor, var(--primaryColor));border-radius:var(--buttonRadius);border:none;cursor:pointer;padding:0;margin:0;height:calc((100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + 85px))/8);transition:background-color .2s,transform .2s,box-shadow .2s;box-sizing:border-box;box-shadow:3px 3px 0 var(--darkKeycolor)}.key:active{transform:translateY(5px);box-shadow:0 0 0 var(--darkKeycolor)}#delete.key,#allDelete.key{background-color:#0000;box-shadow:0 0 #0000;padding:20px 5px 5px}#search.key{padding:5px;margin:8px;width:calc(100vw - 16px);display:inline-block}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.7)}to{opacity:var(--buttonOpacity);transform:scale(1)}}#call,#cancel{opacity:1}.new-button{animation:fadeInScaleUp .5s forwards;animation-delay:.3s;opacity:0;transform-origin:center}.new-button:nth-child(n+2){animation-delay:.5s}.spacer{flex-grow:1}.contact-container{display:flex;flex-direction:column;overflow-y:auto;width:100%}.contact-row{display:flex;border:1px solid var(--keycolor);padding:5px;align-items:center;text-shadow:-1px -1px 0 var(--darkKeycolor),1px -1px 0 var(--darkKeycolor),-1px 1px 0 var(--darkKeycolor),1px 1px 0 var(--darkKeycolor)}.contact-cell{-webkit-line-clamp:2;line-height:1;font-size:2.5em;flex:1;padding:0;text-align:left;color:var(--primaryColor);border:none;cursor:pointer}.contact-name{font-size:1.2em;font-weight:700;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.contact-cell:first-child{flex:0;width:120px;font-size:5em;padding:0 10px}.kana{font-size:.5em;display:block;margin-bottom:2px;letter-spacing:.3em}.userarea{margin-top:auto;margin-bottom:auto;text-align:center;height:calc(100vh - 85px);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.calluserarea{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;height:calc(100vh - 85px);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);height:100%}button:disabled{opacity:.5;cursor:not-allowed}.settings-menu{position:absolute;top:45px;right:10px;background-color:#ffffffe6;border-radius:5px;box-shadow:0 2px 10px #0003;z-index:1000;min-width:200px;overflow:hidden}.settings-menu-item{padding:12px 15px;font-size:16px;color:#333;cursor:pointer;transition:background-color .2s ease}.settings-menu-item:hover{background-color:#e0e0e0}.settings-menu-item:not(:last-child){border-bottom:1px solid #eee}@media screen and (min-width:1133px){.logo{height:280px}.screen{font-size:1em}.contact-cell{font-size:2.1em}.contact-cell:first-child{width:120px;font-size:4em}.picture{width:280px;height:280px}}@media screen and (min-width:1200px){.logo{height:300px}.screen{font-size:1.3em}.contact-cell{font-size:2.2em}.contact-cell:first-child{width:130px;font-size:4em}.picture{width:300px;height:300px}}@media screen and (max-width:800px){.screen{font-size:.8em}}@media screen and (max-width:600px){.screen{font-size:.6em}}