@font-face{font-family:"Petaluma";src:url("../fonts/Petaluma.woff2") format("woff2"),url("../fonts/Petaluma.woff") format("woff")}@font-face{font-family:"Petaluma Text";src:url("../fonts/PetalumaText.woff2") format("woff2"),url("../fonts/PetalumaText.woff") format("woff")}@font-face{font-family:"Petaluma Script";src:url("../fonts/PetalumaScript.woff2") format("woff2"),url("../fonts/PetalumaScript.woff") format("woff")}html{box-sizing:border-box;margin:0}*,*:before,*:after{box-sizing:inherit;pointer-events:none}body{padding:20px;font-family:"Petaluma Script";font-size:20px;padding-top:180px;margin:0}a{color:#00b7ff}.note{font-family:"petaluma"}.menu-button,.menu-button-close{position:fixed;right:20px;top:20px;z-index:3}.line{height:3rem;position:relative;padding-right:30px;padding-left:6px;border:1px solid;margin-bottom:3rem;background-color:#fff !important;background:linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) calc(25% - 0.8px), black 25%, rgba(0, 0, 0, 0) calc(25% + 0.8px), rgba(0, 0, 0, 0) 100%),linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(51% - 0.8px), black 51%, rgba(0, 0, 0, 0) calc(51% + 0.8px), rgba(0, 0, 0, 0) 100%),linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(75% - 0.8px), black 75%, rgba(0, 0, 0, 0) calc(75% + 0.8px), rgba(0, 0, 0, 0) 100%)}.line .progress{border:1px solid red;height:100%;position:absolute;width:1px;left:0;transition:left .2s;opacity:0}.line.full{width:100%}.line:before{content:" ";width:1px;background-color:#000;height:100%;position:absolute;right:8px;display:inline-block}.line:after{content:" ";width:4px;background-color:#000;height:100%;display:inline-block;position:absolute;right:0px}.line div{display:inline-block;position:relative;height:100%;vertical-align:top;width:1rem;text-align:center}.line .letter{position:absolute;top:calc(100% + .5rem)}.line .letter.line-text{width:100%}.note{font-size:2.2rem;position:absolute;top:0}.note.full{font-size:3rem;top:-0.6rem;position:relative;height:100%}.note:after{position:absolute}.note.d{top:1.25rem}.note.d:after{content:""}.note.e{top:.95rem}.note.e:after{content:""}.note.f{top:.55rem}.note.f:after{content:""}.note.g{top:.1rem}.note.g:after{content:""}.note.a{top:-0.25rem}.note.a:after{content:""}.note.b{top:-0.65rem}.note.b:after{content:""}.note.c{top:-1rem}.note.c:after{content:""}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:100%;background:none;border:0;outline:none;cursor:pointer;pointer-events:all}#logo{position:fixed;top:20px;left:20px;z-index:4}h1{margin:0;padding:0;display:inline-block;padding-right:40px !important;height:3rem;border-top:1px solid #b4b4b4;border-bottom:1px solid #b4b4b4;position:relative;background-color:#fff !important;background:linear-gradient(to top, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0) calc(25% - 0.8px), #b4b4b4 25%, rgba(180, 180, 180, 0) calc(25% + 0.8px), rgba(180, 180, 180, 0) 100%),linear-gradient(to top, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0) calc(51% - 0.8px), #b4b4b4 51%, rgba(180, 180, 180, 0) calc(51% + 0.8px), rgba(180, 180, 180, 0) 100%),linear-gradient(to top, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0) calc(75% - 0.8px), #b4b4b4 75%, rgba(180, 180, 180, 0) calc(75% + 0.8px), rgba(180, 180, 180, 0) 100%)}h1 span{position:absolute;right:30px}#menu{opacity:0;transition:opacity .4s;position:fixed;width:100%;left:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;z-index:3}#menu .line{opacity:0;transition:opacity .4s .2s}#menu .note{opacity:0;transition:opacity .4s .4s}#menu.active{opacity:1}#menu.active .line,#menu.active .note{opacity:1}.hint{z-index:2}.hint span{font-family:"petaluma"}.hint p{margin:0}.hint.hint-1{position:absolute;left:200px;top:73px}.hint.hint-1 span{font-size:3rem;height:10px;line-height:1;position:absolute;transform:rotate(-90deg)}.hint.hint-1 p{position:relative;transform:rotate(-10deg);padding-top:20px;font-size:.9rem}.hint.hint-2{position:absolute;right:100px;top:100px}.hint.hint-2 span{font-size:3rem;height:10px;line-height:1;position:absolute;transform:rotate(90deg);right:3rem}.hint.hint-2 p{position:relative;transform:rotate(4deg);padding-top:20px;text-align:center;font-size:.9rem}.hint.hint-3{position:absolute;right:4%;top:389px}.hint.hint-3 span{font-size:2rem;height:10px;line-height:1;position:absolute;transform:rotate(-90deg);left:0rem;top:1rem}.hint.hint-3 p{position:relative;transform:rotate(-5deg);padding-top:20px;text-align:center;font-size:.9rem}.ilusstration{font-size:5px}.ilusstration.illustation-1{position:absolute;top:170px;right:10%;transform:rotate(-9deg);font-size:6px;font-weight:bolder}