:root{--main-font:"Helvetica","Helvetica Neue","Arial","Yu Gothic","游ゴシック","YuGothic","游ゴシック体","Hiragino Sans","ヒラギノ角ゴシック","Meiryo","メイリオ","sans-serif";--text-color:#222;--bg-color:#fff;--footer-color:#888}html,body{height:100%}body{margin:0;padding:0;font-family:var(--main-font)}.contents-wrap{max-width:2000px;width:100%;margin:auto}.contents{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%;min-height:100vh;width:95%;margin:auto}header{display:flex;justify-content:space-between;padding:15px 0;background-color:rgb(255 255 255/80%);backdrop-filter:blur(3px);z-index:1;width:100%;position:sticky;top:0;left:0}.page-name{width:calc(100% - 50px - 10%);z-index:10;max-height:60px;margin-left:2.5%}.page-works{max-width:419px}.page-profile{max-width:442px}.page-name>img{height:100%;width:100%}.modal-link{display:block;width:50px;height:60px;position:relative;background:0 0;border:none;cursor:pointer;margin-right:2.5%}input{display:none}.hamburger{width:40px;height:5px;background:var(--text-color);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;transition:.4s cubic-bezier(.26,.45,.45,.94)}.hamburger:before,.hamburger:after{display:block;content:"";width:40px;height:5px;position:absolute;background:var(--text-color);transition:.4s cubic-bezier(.26,.45,.45,.94)}.hamburger:before{bottom:12px}.hamburger:after{top:12px}.modal{width:100%;height:100vh;background:var(--bg-color);text-align:right;position:fixed;top:0;left:0;z-index:9;transform:scale(0);opacity:0;transition:opacity .6s cubic-bezier(.38,.57,.57,1),transform 0s .6s}ul{list-style:none;position:relative;top:40%;transform:translate(150px,-50%);margin:0 5%;transition:.4s cubic-bezier(.38,.57,.57,1)}li{margin:25px 0}.page-link,.link-wrap{display:inline;padding:10px 0;color:var(--text-color);text-decoration:none;font-weight:700;letter-spacing:2.5px;font-size:1em;margin:0;cursor:pointer}.link-icon{display:block;width:40px;margin:15px 0 15px auto;transform:translateX(75px);opacity:0;transition:.4s cubic-bezier(.38,.57,.57,1)}.link-icon>img{width:25px;padding:10px 5px 10px 10px}#modal-link:checked~.modal{transform:scale(1);opacity:1;transition:opacity .4s cubic-bezier(.38,.57,.57,1)}#modal-link:checked~.modal>ul{transform:translate(0,-50%)}#modal-link:checked~.hamburger{background:rgba(34,34,34,0)}#modal-link:checked~.hamburger:before{bottom:0;transform:rotate(-45deg)}#modal-link:checked~.hamburger:after{top:0;transform:rotate(45deg)}#contact:checked~.link-icon{transform:translateX(0);opacity:1}main{min-height:100%}footer{text-align:center;z-index:0}.footer-text{padding:50px 0;color:var(--footer-color);font-size:.8em;letter-spacing:.5px}@media screen and (max-width:460px){.page-name{width:calc(100% - 40px - 10%);max-height:35px}.page-works{max-width:244px}.page-profile{max-width:258px}.modal-link{width:40px;height:35px}.hamburger{width:25px;height:3px}.hamburger:before,.hamburger:after{width:25px;height:3px}.hamburger:before{bottom:7px}.hamburger:after{top:7px}}