:root{--header-height:3em}html{background:#fff}body{margin:0;margin-top:var(--header-height);display:flex;flex-direction:column;min-height:calc(100svh - var(--header-height));font-family:"ヒラギノ角ゴ ProN",-apple-system,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif}header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background:#1f286f;color:#fff;display:flex;z-index:500;> .userinfo{position:absolute;transform:translateX(calc(-100% - 10px));height:100%;display:flex;gap:10px;margin:auto 0 auto 10px;transition:transform 0.35s ease;overflow:hidden;max-width:calc(100% - 20px);> .icon{aspect-ratio:1;height:2em;border-radius:50%;margin:auto 0;}> .info{overflow:hidden;margin:auto 0;> .name{margin:0;font-weight:normal;font-size:0.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}> .hn{margin:0;font-size:0.75em;color:rgba(255,255,255,0.75);}}}> .sitename{display:flex;color:#fff;font-size:1.5em;text-decoration:none;transition:transform 0.35s ease;height:100%;aspect-ratio:11 / 4;> img{height:100%;aspect-ratio:11/4;}}> .menu{margin:auto 10px auto auto;font-size:0.95em;transition:transform 0.35s ease;> ul{display:flex;list-style:none;padding:0;margin:0;gap:10px;> li{margin:auto 0;> a{color:#fff;text-decoration:none;&.button{background:#fff;color:#1f286f;}}}}}}main{flex-grow:1;display:flex;flex-direction:column}.button{all:unset;background:var(--back,#1f286f);color:var(--text,#fff);text-decoration:none;padding:7.5px 15px;border-radius:3px;display:inline-flex;cursor:pointer;transition:opacity 0.15s ease;&:hover{opacity:0.9;}&.loadable{display:flex;> .text{margin:auto;}&.loading{> .loading-spinner{width:1.3em;opacity:1;}}}&:disabled{opacity:0.5;cursor:not-allowed;}&.danger{background:#c22;}> .loading-spinner{position:relative;width:0;height:100%;opacity:0;transition:all .15s ease;&:before{content:'';position:absolute;top:50%;width:1em;height:1em;margin:auto;box-sizing:border-box;border:1.5px solid rgba(255,255,255,0.45);border-top-color:rgba(255,255,255,0.9);border-radius:50%;animation:spin .4s linear infinite;}}}@keyframes spin{0%{transform:translateY(-50%) rotate(0deg);}100%{transform:translateY(-50%) rotate(360deg);}}.textbutton{all:unset;color:#666;font-size:0.9em;cursor:pointer;text-decoration:underline}.heading{background:#e6edff;color:#1f286f;padding:10vw 7vw;display:flex;align-items:center;&.full{flex-grow:1;}h1{font-size:1.5em;margin:0;}.left{width:100%;height:100%;> .icon{> img{height:6em;width:6em;}}}.right{display:flex;svg{aspect-ratio:1300 / 733;width:100%;}img{max-width:100%;max-height:100%;margin:auto;}}> .hide{display:none;}.textbox{background:rgba(255,255,255,0.9);}small{display:block;}.fadein{opacity:0;animation:fade-in-bottom 0.4s ease forwards;}.fadeout{opacity:1;animation:fade-out-top 0.4s ease forwards;}}#notifications{position:fixed;right:10px;bottom:10px;max-width:calc(100% - 20px);display:flex;flex-direction:column;pointer-events:none;z-index:100;> .notification{background:#1f286f;color:#fff;padding:10px 15px;margin-left:auto;margin-top:10px;animation:fade-in-notify 0.35s ease;border:solid 1px rgba(255,255,255,0.4);box-shadow:0 0 15px rgba(0,0,0,0.1);&.hide{animation:fade-out-notify 0.35s ease;pointer-events:none;}&.error{background:#c22;}}}@keyframes fade-in-bottom{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}@keyframes fade-out-top{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-20px);}}@keyframes fade-in-notify{0%{opacity:0;transform:translateY(20px);max-height:0;margin-top:0;}100%{opacity:1;transform:translateY(0);max-height:5em;margin-top:10px;}}@keyframes fade-out-notify{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-20px);}}footer{background:#1f286f;color:#fff;margin-top:auto;padding:12.5px 15px;font-size:0.95em}.only-mobile{display:none}@media (max-width:660px){.only-pc{display:none;}.only-mobile{display:unset;}.heading{flex-wrap:wrap;&.mc{text-align:center;}> .left{order:2;> h1{font-size:1.4em;}}> .right{order:1;margin-bottom:20px;flex-grow:1;> img{max-width:400px;margin:auto;}}}}