@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1.6rem;font-weight:400;line-height:1.5;color:#333}img{max-width:100%;height:auto;display:block}.hidden{display:none}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.btn-close-sm{padding:.25rem;width:.8em;height:.8em;background-size:.8em;opacity:.5}.btn-close-sm:hover{opacity:.75}#root{position:relative;width:min(100%,1600px);margin:0 auto}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.login-container button{padding:10px 20px;background-color:#4285f4;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}.login-container button:hover{background-color:#357abd}.mobile-mockup{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:fit-content;height:fit-content;z-index:1;overflow-x:hidden;overflow-y:auto;border-radius:2.4rem}.mobile-mockup img{width:100%;height:auto;will-change:transform}.mobile-mockup .iPhone_frame{width:auto;height:calc(80vh - 16rem)}.mobile-mockup .pageView{position:absolute;top:8%;left:4.4%;width:91.4%;height:75.2%;overflow-x:hidden;overflow-y:auto}.mobile-mockup .pageView::-webkit-scrollbar{display:none}.mobile-mockup.loading{display:flex;justify-content:center;align-items:center;background:#ffffffe6}.mobile-mockup .loading-overlay{display:flex;flex-direction:column;align-items:center;gap:1rem}.mobile-mockup .loading-overlay p{color:#333;font-size:1.2rem}.mobile-mockup .loading-spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{color:red;text-align:center;padding:20px;font-size:1.2em}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center}.error-page h1{color:#dc3545;margin-bottom:1rem}.error-page p{color:#666}.password-form{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:1rem;box-sizing:border-box}.password-form h1{font-size:clamp(1.8rem,4vw,2rem);margin-bottom:2rem;text-align:center;padding:0 1rem}.password-form .error-message{color:red;margin-bottom:1rem;text-align:center;font-size:clamp(.9rem,3vw,1rem)}.password-form form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:min(300px,90%)}.password-form form input{width:100%;padding:.8rem;border:1px solid #ccc;border-radius:4px;font-size:clamp(1.8rem,4vw,2rem);box-sizing:border-box}.password-form form input:focus{outline:none;border-color:#666}.password-form form button{width:100%;padding:.8rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:clamp(1.6rem,4vw,2rem);transition:background-color .2s}.password-form form button:hover{background-color:#0056b3}.password-form form button:active{transform:scale(.98)}@media(max-width:480px){.password-form{padding:1rem}.password-form h1{margin-bottom:1.5rem}.password-form form{gap:.8rem}}.pc-mockup img{width:100%;height:auto;will-change:transform}@media(max-width:600px){.pc-mockup img{max-width:100vw;height:auto;margin:0 auto}}.ratio.ratio-1x1 .position-absolute.top-0.end-0{left:auto!important;right:0!important}.position-absolute.top-0.end-0.m-2.bg-dark.bg-opacity-75.rounded-circle{background-color:#212529!important;border-radius:.25rem!important;width:1.6rem!important;height:1.6rem!important;aspect-ratio:1;display:flex!important;align-items:center!important;padding:.25rem .4rem!important}.page-list-container{padding:2rem}.page-list-container .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:0 2rem}.page-list-container .header h1{margin:0}.page-list-container .header .user-controls{display:flex;align-items:center;gap:1rem}.page-list-container .header .user-controls .user-email{color:#666;font-size:.9rem}.page-list-container .header .user-controls .logout-button{padding:.5rem 1rem;border:none;border-radius:4px;background-color:#dc3545;color:#fff;cursor:pointer;font-size:.9rem;transition:background-color .2s}.page-list-container .header .user-controls .logout-button:hover{background-color:#c82333}.page-list-container .header .user-controls .create-button{padding:.5rem 1rem;background-color:#28a745;color:#fff;text-decoration:none;border-radius:4px;font-size:.9rem;transition:background-color .2s}.page-list-container .header .user-controls .create-button:hover{background-color:#218838}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.qr-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.qr-container{background-color:#fff;padding:20px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:16px}.qr-container button{padding:8px 16px;border:none;border-radius:4px;background-color:#333;color:#fff;cursor:pointer}.qr-container button:hover{background-color:#444}.page-item{text-decoration:none;color:inherit;transition:transform .2s}.page-item:hover{transform:translateY(-5px)}.page-item .thumbnail{width:100%;height:auto;aspect-ratio:1/1;overflow:hidden;border-radius:8px;box-shadow:0 2px 8px #0003}.page-item .thumbnail img{width:100%;height:100%;object-fit:cover;object-position:center top}.page-item .page-title{margin-top:1rem;text-align:center;font-size:1.1rem;color:#333}.share-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.share-container{background-color:#fff;padding:2rem;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:90%;width:400px}.share-container h3{font-size:1.8rem;margin:0}.share-container .qr-code{padding:1rem;background:#fff;border-radius:4px}.share-container .share-buttons{display:flex;flex-direction:column;gap:1rem;width:100%}.share-container .share-buttons button{padding:1rem;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-size:1.4rem;transition:background-color .2s}.share-container .share-buttons button:hover{background-color:#0056b3}.share-container .close-button{padding:.8rem 2rem;border:none;border-radius:4px;background-color:#6c757d;color:#fff;cursor:pointer;font-size:1.4rem;transition:background-color .2s}.share-container .close-button:hover{background-color:#5a6268}.card{transition:transform .2s}.card:hover{transform:translateY(-5px)}.storage-info .progress{height:.5rem}.create-page{max-width:800px;margin:2rem auto;padding:2rem}.create-page h1{text-align:center;margin-bottom:2rem;font-size:1.8rem}.create-page .error-message{color:#dc3545;text-align:center;margin-bottom:1rem}.create-page form{display:flex;flex-direction:column;gap:1.5rem}.create-page form .form-group{display:flex;flex-direction:column;gap:.5rem}.create-page form .form-group label{font-weight:500}.create-page form .form-group input[type=number],.create-page form .form-group input[type=text],.create-page form .form-group input[type=password]{padding:.8rem}.create-page form .form-group input{border:1px solid #ccc;border-radius:4px;font-size:1rem}.create-page form .form-group input:focus{outline:none;border-color:#666}.create-page form .form-group .dropzone{border:2px dashed #ccc;border-radius:4px;padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s}.create-page form .form-group .dropzone:hover{border-color:#666}.create-page form .form-group .dropzone.success{border-color:#28a745;background-color:#28a7451a}.create-page form .form-group .dropzone p{margin:0;font-size:.875rem;color:#666}.create-page form .form-group .dropzone .preview{display:flex;flex-direction:column;align-items:center;gap:1rem}.create-page form .form-group .dropzone .preview img{max-width:200px;max-height:200px;object-fit:contain}.create-page form .form-group .dropzone .preview span{font-size:.75rem;color:#198754}.create-page form button{padding:.5rem;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background-color .2s;width:120px}.create-page form button:hover:not(:disabled){opacity:.8}.create-page form button:disabled{cursor:not-allowed;opacity:.5}.form-check{display:flex;align-items:center;gap:.5em}.form-check .form-check-input-sm{width:.875em;height:.875em}