:root{--rate: 10;--min-font-base: 2px;--ruby-rate: 0.5;--text-storke-rate: 0.1;--min-font: calc(var(--rate) * var(--min-font-base));--min-ruby-font: calc(var(--min-font) * var(--ruby-rate));--min-text-stroke: calc(var(--min-font) * var(--text-storke-rate));--min-ruby-text-stroke: calc(var(--min-ruby-font) * var(--text-storke-rate));--expand-rate: calc(90 / 63);--sky-blue: #38b6ff;--orange: #ffa620}@font-face{font-family:NotoSansJP;src:url("/assets/fonts/NotoSansJP-VariableFont_wght.ttf")}@font-face{font-family:roboto;src:url("/assets/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf")}body{color:#000;overflow-x:hidden}body>*{margin:0 auto;text-align:center}main{background:#fff;padding-bottom:20px;position:relative;overflow-x:hidden;font-weight:bold}main *{margin:0;box-sizing:border-box}.firstCaution{margin:10px auto}.firstCaution a{color:var(--sky-blue);text-decoration:underline;font-size:inherit}.controlArea{margin:20px auto;width:95%;max-width:700px;box-shadow:0 0 10px rgba(0,0,0,.1)}.controlArea .scrollBar{display:flex;background-color:#000;color:#fff;overflow-x:scroll}.controlArea .scrollBar li{list-style:none;margin:0}.controlArea .scrollBar input{display:none}.controlArea .scrollBar input:checked+label{background-color:var(--sky-blue)}.controlArea .scrollBar label{padding:10px 15px;display:block;width:max-content;cursor:pointer}.controlArea .scrollBar label:hover{background-color:#333}.controlArea .controlDisplay{display:none}.controlArea .controlDisplay.active{display:block;padding:20px 10px}.controlRow{display:flex;justify-content:center;margin:10px 0}.controlTitle{width:100px;text-align:left;display:flex;align-items:center;color:var(--sky-blue)}.controlContent{width:300px}.controlContent *{width:100%;padding:5px 10px}.controlContent input{width:100%;height:32px;margin:16px 0;padding:5px;border:none;border-bottom:var(--sky-blue) 2px solid;outline:none}.controlContent select{width:100%;height:32px;margin:16px 0;padding:5px;outline:none;border:none;border-bottom:var(--sky-blue) 2px solid;appearance:none}.controlContent.select{position:relative}.controlContent.select::after{border-left:8px solid rgba(0,0,0,0);border-right:8px solid rgba(0,0,0,0);border-top:9px solid #39cbd5;content:"";position:absolute;right:16px;bottom:28px;width:0;pointer-events:none}.controlContent textarea{width:100%;height:200px;margin:16px 0;padding:15px;border:2px solid var(--sky-blue);border-radius:15px;outline:none}.cardCommonButtons{display:flex;justify-content:center;margin:10px auto}#restoreData,#downloadButton{display:block;margin:10px;background:#4a4;border:1px solid #4a4;color:#fff;padding:10px 20px;border-radius:10px;cursor:pointer}#downloadButton{background:var(--orange);border:1px solid var(--orange)}#restoreData:hover{background:#fff;color:#4a4}#downloadButton:hover{background:#fff;color:var(--orange)}#restoreData:disabled,#downloadButton:disabled{background:#aaa;border:1px solid #aaa;color:#666;cursor:not-allowed}.caution{margin:20px auto;font-size:1rem}@keyframes infinitePop{0%{transform:scale(1)}70%{transform:scale(1.05)}80%{transform:scale(1)}90%{transform:scale(1.05)}100%{transform:scale(1)}}.howToButton{display:block;margin:20px auto;width:90%;max-width:400px;background:var(--sky-blue);color:#fff;padding:10px 0px;border-radius:10px;font-size:1.8rem;cursor:pointer;border:1px solid var(--sky-blue);transition:all .3s ease;box-shadow:0 0 10px rgba(0,0,0,.3);animation:infinitePop 1s infinite}.howToButton:hover{background:#fff;color:var(--sky-blue)}.inHighschool{display:block;margin:20px auto;width:90%;max-width:400px;background:var(--orange);color:#fff;padding:10px 0px;border-radius:10px;font-size:1.2rem;cursor:pointer;border:1px solid var(--orange);transition:all .3s ease;box-shadow:0 0 10px rgba(0,0,0,.3)}.inHighschool:hover{background:#fff;color:var(--orange)}.explain{font-size:1rem;color:gray;margin:20px auto;max-width:400px;width:90%;text-align:left}main li{list-style-type:disc;margin-top:3px;margin-left:20px}.explain span{background-color:var(--sky-blue);color:#fff;padding:2px 5px}.commonEffects ul{font-size:1rem;color:gray;margin:20px auto;max-width:400px;width:90%;text-align:left}#illustSelect{cursor:pointer;height:initial;margin:0;display:block;padding:10px 20px;background:var(--sky-blue);color:#fff;border-radius:10px;font-size:20px;cursor:pointer;border:1px solid var(--sky-blue)}#illustSelect:hover{background:#fff;color:var(--sky-blue)}#illustSelectArea{display:none;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.5)}#illustSelectArea.active{display:flex;justify-content:center;align-items:center;position:fixed}#illustSelectCard{margin:auto;position:relative;width:90%;height:90%;background:#fff;border-radius:20px}#illustSelectCardHeader{position:relative}#illustSelectCardHeader h2{margin:20px auto}#closeIllustSelectCard{position:relative;margin-left:auto;margin-right:10px;margin-top:-50px;width:30px;height:30px;cursor:pointer}#closeIllustSelectCard span{display:block;position:absolute;height:3px;width:80%;background:#000;border-radius:5px;transition:all .5s ease;top:12px;left:1px}#closeIllustSelectCard span:nth-child(1){transform:rotate(45deg)}#closeIllustSelectCard span:nth-child(2){transform:rotate(135deg)}#IllustSelectCardMain{width:100%;height:calc(100% - 40px);display:flex;justify-content:flex-start;align-items:center;overflow:scroll}.illustOption{display:block;height:80%;aspect-ratio:489/683;margin:auto 20px;cursor:pointer}.illustOption input{display:block;width:100%;height:100%;cursor:pointer}.illustOption img{height:100%;width:auto}.illustOption:hover{opacity:.6}#illustUpload{display:none}#illustUploadLabel{display:block;padding:10px 20px;background:var(--orange);color:#fff;border-radius:10px;font-size:20px;cursor:pointer;border:1px solid var(--orange);margin:10px 0}#illustUploadLabel:hover{background:#fff;color:var(--orange)}.csvControl{margin:50px auto;padding:10px}.csvControl p{margin:20px 0}.button{display:block;padding:10px 20px;width:300px;background:var(--sky-blue);color:#fff;border-radius:10px;font-size:20px;cursor:pointer;border:1px solid var(--sky-blue);margin:10px auto}.button:hover{background:#fff;color:var(--sky-blue)}.button.orange{background:var(--orange);border:1px solid var(--orange)}.button.orange:hover{background:#fff;color:var(--orange)}.A4Control{padding:10px}.A4Area{background:#ccc;width:90vw;max-width:700px;height:127.3064516129vw;max-height:990.1612903226px;margin:auto;padding:10px;position:relative}#A4Cards{display:block;width:100%;height:auto;margin:auto;z-index:5;position:relative}#A4BeforeText{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.cardArea{pointer-events:none;margin:-200px auto;scale:.5;width:calc(63px*var(--rate));position:relative}@media screen and (max-width: 630px){.cardArea{left:50%;transform:translate(-100%)}}.card{width:calc(63px*var(--rate));height:calc(88px*var(--rate));overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center;margin:20px auto}.card *{font-size:inherit;font-family:NotoSansJP;line-height:normal}.cardContents{width:calc(63px*var(--rate));height:calc(88px*var(--rate));position:relative;color:#fff;background:#f0f8ff;overflow:hidden}.cardContents *{text-align:start}.card img{display:block;position:absolute;width:100%;height:100%}.card p{position:absolute;display:block;color:#fff}.eventCard .power,.eventCard .powerMarkDiv,.eventCard .skillContainer{display:none}.eventCard .attributes{top:calc(11px*var(--rate))}.eventCard .skillBox{top:calc(55px*var(--rate))}.eventCard .column{height:calc(32px*var(--rate));top:calc(12px*var(--rate))}.vertical{writing-mode:vertical-rl}.santen{font-family:sans-serif}.skill{font-size:calc(var(--min-font)*1.4);background-image:url("/assets/images/original-card/skill/default.png");background-size:cover;width:fit-content;padding:calc(2px*var(--rate));padding-top:calc(.6px*var(--rate));height:calc(5px*var(--rate));line-height:calc(3.5px*var(--rate));border-right:#fff calc(.2px*var(--rate)) solid;margin:calc(.2px*var(--rate)) 0;margin-top:calc(3px + .8px*(var(--rate) - 10));position:relative}.skill.longSkill{font-size:calc(var(--min-font)*1.4*.8)}.skillContainer{position:relative;width:fit-content}.skillContainer .mark{position:absolute;right:calc(-4.5px*var(--rate));top:calc(.2px*var(--rate));height:calc(4.5px*var(--rate));width:calc(4.5px*var(--rate));display:block;background-size:contain}.skillContainer.sho .mark{background-image:url(/assets/images/original-card/default/mark/sho.png)}.skillContainer.one .mark{background-image:url(/assets/images/original-card/default/mark/1.png)}.skillContainer.jou .mark{background-image:url(/assets/images/original-card/default/mark/jou.png)}.card .skill{display:flex}.skill ruby{transform:translateY(-6px)}.skill.longSkill ruby{transform:translateY(calc(var(--rate) * -0.08px))}.skill rt{font-size:calc(var(--min-ruby-font)*1.4*2/3)}.skill.longSkill rt{font-size:calc(var(--min-ruby-font)*1.4*.8*2/3)}.effect{--shadow-width: var(--min-text-stroke);font-size:calc(var(--min-font));-moz-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;-webkit-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000}.effect.longEffect{font-size:calc(var(--min-font)*.8)}.effect rt{--shadow-width: calc(var(--min-text-stroke) * var(--ruby-rate));font-size:calc(var(--min-ruby-font));-moz-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;-webkit-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000}.effect.longEffect rt{font-size:calc(var(--min-ruby-font)*.8)}.effect .markInEffect{display:inline-block;position:static;width:calc(3px*var(--rate));height:calc(3px*var(--rate));padding:calc(.2px*var(--rate));vertical-align:text-bottom;border-radius:calc(.6px*var(--rate))}.effect.effect.longEffect .markInEffect{width:calc(2.5px*var(--rate));height:calc(2.5px*var(--rate))}#illust{width:100%;height:100%}.name{font-size:calc(var(--min-font)*1.6);left:calc(5.6px*var(--rate));top:calc(14px*var(--rate));height:calc(38.5px*var(--rate));text-align:center;line-height:calc(4px*var(--rate))}.name.noRuby{left:calc(5.8px*var(--rate))}.name rt{font-size:calc(var(--min-ruby-font)*1.6*2/3)}.name.longName{font-size:calc(var(--min-font)*1.3)}.name.longName rt{font-size:calc(var(--min-ruby-font)*1.3*2/3)}.name.veryLongName{font-size:calc(var(--min-font)*1)}.name.veryLongName rt{font-size:calc(var(--min-ruby-font)*1*2/3)}.name.bigNameArea{height:calc(64px*var(--rate))}.attributes{position:relative;left:calc(12.8px*var(--rate));top:calc(3px*var(--rate));width:calc(37px*var(--rate));height:calc(3.6px*var(--rate));display:flex;justify-content:flex-start;flex-wrap:wrap}.attributes span{position:relative;display:inline-block;height:calc(3.6px*var(--rate));line-height:calc(3.6px*var(--rate));margin:0 calc(.45px*var(--rate));margin-bottom:calc(.1px*var(--rate));background:linear-gradient(to right, white, rgb(222, 222, 222), white);color:#000}.attributes span::before,.attributes span::after{content:"";position:absolute;width:0;height:0}.attributes span::before{left:-7.6px;border-top:36px solid rgba(0,0,0,0);border-right:8px solid #fff}.attributes span::after{right:-7.6px;border-bottom:36px solid rgba(0,0,0,0);border-left:8px solid #fff}.rankText{font-size:calc(var(--min-font)*4);left:calc(2.2px*var(--rate));top:calc(1px*var(--rate));width:calc(7px*var(--rate));height:calc(7px*var(--rate));position:absolute;text-align:center;font-family:"roboto"}.rankText.levelText1{font-size:calc(var(--min-font)*2.8);left:calc(13.8px*var(--rate));top:calc(45px*var(--rate));width:calc(7px*var(--rate));height:calc(7px*var(--rate))}.rankText.levelText2{font-size:calc(var(--min-font)*1.2);left:calc(36.5px*var(--rate));top:calc(45.7px*var(--rate));width:calc(3px*var(--rate));height:calc(3px*var(--rate))}.power{font-size:calc(var(--min-font)*2.8);letter-spacing:calc(-0.1px*var(--rate));right:calc(2px*var(--rate));bottom:calc(2.5px*var(--rate));font-family:"roboto";font-weight:600}.powerMarkDiv{right:calc(16px*var(--rate));bottom:calc(1.8px*var(--rate));height:calc(8px*var(--rate));width:calc(6px*var(--rate));display:flex;justify-content:center;align-items:center;position:absolute}.powerMarkDiv img{height:65%;position:relative;object-fit:contain;margin:0 calc(-0.3px*var(--rate))}.skillBox{left:calc(6px*var(--rate));top:calc(54px*var(--rate));width:calc(54px*var(--rate));height:calc(24px*var(--rate));position:absolute;display:flex;flex-direction:column;justify-content:space-between}.skillBox.bigNameArea{top:calc(50px*var(--rate));left:calc(13px*var(--rate));width:calc(47px*var(--rate))}.skillBox.bigNameArea.eventCard{top:calc(54px*var(--rate))}.skillBox.has2Skill{justify-content:space-around}.skillBox p{position:relative}.column{--shadow-width: calc(var(--min-text-stroke));font-size:calc(var(--min-font));-moz-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;-webkit-text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;text-shadow:0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000,0 0 calc(var(--shadow-width)) #000;right:calc(5px*var(--rate));top:calc(4px*var(--rate));height:calc(43.5px*var(--rate))}