.side-menu{position:fixed;top:0;right:0;width:250px;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0003;transform:translate(100%);transition:transform .3s ease;z-index:1000;padding:20px;box-sizing:border-box;display:flex;flex-direction:column}.side-menu.open{transform:translate(0)}.close-button{align-self:flex-end;background:none;border:none;font-size:28px;cursor:pointer;padding:0;margin-bottom:20px;line-height:1}.side-menu ul{list-style:none;padding:0;margin:0;flex-grow:1}.side-menu li{border-bottom:1px solid #eee}.side-menu a{display:block;padding:12px 0;font-weight:600;color:#333;text-decoration:none;font-family:Outfit,Noto Sans JP,sans-serif;font-optical-sizing:auto;font-style:normal;-webkit-user-select:none;user-select:none;transition:background-color .2s}.side-menu a:hover{background-color:#f0f0f0}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;z-index:900}.logout-button{display:block;padding:12px 0;font-weight:600;color:#333;font-family:Outfit,Noto Sans JP,sans-serif;font-optical-sizing:auto;font-style:normal;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .2s}.logout-button:hover{background-color:#f0f0f0}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:#121212;border-bottom:1px solid #333;color:#fff}.header-logo{height:64px;width:auto}.user-info{font-family:Outfit,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;font-size:20px}@media (min-width: 768px){.header{padding:16px 32px}.header-logo{height:64px}}.menu-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer}@media (max-width: 767px){.header{padding:12px 16px}.header-logo{height:48px}}.slider{position:fixed;width:100%;height:100%;overflow:hidden}.slide{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out}.slide.active{opacity:1}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:3000}.close-btn{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem}.record-modal{padding:20px;font-family:Outfit,sans-serif}.record-tabs{display:flex;justify-content:center;gap:20px;margin-bottom:16px}.record-tabs button{padding:8px 16px;font-weight:700;background:#eee;border:none;border-radius:6px;cursor:pointer}.record-tabs .active{background:#000;color:#fff}.record-content label{display:block;margin-bottom:12px;font-weight:700;color:#333}.record-date{color:#333;display:flex;justify-content:center;gap:20px}.record-content input,.record-content textarea{width:100%;padding:8px;margin-top:4px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box}.submit-button{margin-top:16px;padding:10px 20px;background:#000;color:#fff;border:none;border-radius:6px;cursor:pointer;width:100%}.edit-diary{color:#333}.submit-button:disabled{background-color:#ccc;color:#666;cursor:not-allowed;opacity:.7}@media (max-width: 600px){.record-modal{font-size:14px;padding:16px}.record-tabs button{padding:6px 12px;font-size:14px}.record-content label,.record-content input,.record-content textarea{font-size:14px}.submit-button{font-size:14px;padding:8px 16px}.close-btn{font-size:1.2rem}}.form{display:flex;flex-direction:column;max-width:400px;margin:0 auto;border-radius:8px;font-family:Arial,sans-serif;color:#000;background-color:#fff}.form h2{text-align:center;margin-bottom:1.5rem;font-weight:700;font-size:1.8rem}.form form{display:flex;flex-direction:column}.form label{margin-bottom:6px;font-weight:600;font-size:1rem}.form input[type=text],.form input[type=date],.form input[type=email],.form input[type=password]{padding:10px 12px;margin-bottom:1.2rem;border:1.5px solid #ccc;border-radius:6px;font-size:1rem;transition:border-color .3s ease}.form input[type=text]:focus,.form input[type=date]:focus,.form input[type=email]:focus,.form input[type=password]:focus{outline:none;border-color:#07c;box-shadow:0 0 5px #0077cc80}.form button[type=submit],button.form-start{padding:12px;background-color:#07c;color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease}.form button[type=submit]:hover{background-color:#005fa3}.guest-link{margin-top:1rem;text-align:center}.guest-btn{background:none;border:none;color:#07c;text-decoration:underline;cursor:pointer;font-size:.9rem}.guest-btn:hover{color:#005fa3}.modal-buttons{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.form-group{margin-bottom:15px}.form-buttons{display:flex;justify-content:space-between;align-items:center}.error-message{color:red;font-size:.8rem;margin-bottom:10px}button.form-start{margin-top:20px!important;width:150px;background-color:#005fa3!important;color:#fff!important}.tutorial-slide{text-align:center;padding:1rem}.tutorial-slide h2{margin:0;color:#005fa3}.tutorial-slide p{line-height:1.6;color:#000}.tutorial-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding:0 1rem}.tutorial-nav button:hover:not(:disabled){color:#005fa3}.tutorial-nav button:disabled{color:#ccc;cursor:not-allowed}.tutorial-nav button{all:unset;border:none!important;outline:none!important;box-shadow:none!important;appearance:none;-webkit-appearance:none;-moz-appearance:none;font-size:1.8rem;color:#07c;cursor:pointer;background:transparent;padding:0;margin:0}.step-indicator{text-align:right;font-size:.9rem;color:#888;margin-bottom:10px;color:#005fa3}.icon-button{background:none;border:none;padding:0;color:#000;font-size:20px;cursor:pointer;transition:opacity .3s ease,color .3s ease}.icon-button:disabled{color:#ccc;cursor:not-allowed;opacity:.6}.icon-button:hover:enabled{color:#555}.App{position:relative;width:100%;height:100vh;overflow:hidden;font-family:Arial,sans-serif}.overlay{position:fixed;top:0;left:0;width:100%;height:160%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;background-color:#0006}.logo{width:250px;height:auto;top:100px;left:50%;z-index:900;pointer-events:none}.buttons{display:flex;gap:20px}.login-button,.signup-button{padding:12px 24px;font-size:1rem;font-weight:700;border:none;border-radius:5px;cursor:pointer;background-color:#fff;color:#333;transition:background-color .3s ease;font-family:Outfit,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal}.login-button:hover,.signup-button:hover{background-color:#ddd}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:3000}.modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:400px;box-shadow:0 0 20px #0003;position:relative;z-index:3100;margin:0 auto;box-sizing:border-box;padding:20px}.modal-close{position:absolute;top:15px;right:15px;font-size:1.2rem;cursor:pointer;border:none;background:none}.slider-img{width:100%;height:100vh;object-fit:cover;position:absolute;top:0;left:0;transition:opacity 1s ease-in-out;z-index:0}.modal-background{background:#000000b3}.overlay-logo{display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;top:100px;left:50%;transform:translate(-50%);z-index:900}@media (max-width: 400px){.modal-content{width:90%;font-size:15px}}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:60px;background-color:#fff;border-top:1px solid #ccc;box-shadow:0 -2px 5px #0000001a;z-index:100;display:flex;justify-content:space-around;align-items:center;box-sizing:border-box;padding:0}.nav-side{width:50%;height:100%;display:flex;justify-content:center;align-items:center}.nav-button{background:none;border:none;color:#333;font-size:16px;font-weight:700;cursor:pointer;padding:8px 16px;white-space:nowrap;transition:background-color .3s ease,color .3s ease;font-family:Outfit,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;width:100%;height:80%;display:flex;justify-content:center;align-items:center}.nav-button:hover{color:#fff;background-color:#999}.nav-link{color:#333}.add-button{position:absolute;left:50%;bottom:30px;transform:translate(-50%);background-color:#000;color:#fff;font-size:28px;border:none;border-radius:50%;width:56px;height:56px;cursor:pointer;box-shadow:0 2px 6px #0003;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease;z-index:101}.add-button:hover{background-color:gray}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;opacity:.9;z-index:9999;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(20px)}10%{opacity:1;transform:translate(-50%) translateY(0)}90%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}.user-stats,.user-title{display:flex;justify-content:space-around;font-family:Outfit,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;font-size:1.5rem}.user-title{margin-top:1rem}.user-page{padding-bottom:80px}.user-page p{display:flex;justify-content:center}.user-page-data{font-size:1rem;margin:0;display:flex;justify-content:center}@media (max-width: 400px){.user-stats{font-size:1.2rem}}.card-container{display:flex;flex-direction:column;gap:12px;padding:16px}.record-card,.timeline-card{background-color:#fff;border-radius:12px;box-shadow:0 2px 6px #0000001a;padding:16px;transition:transform .2s}.record-card:hover{transform:scale(1.02)}.record-card h3,h4{margin:0;font-size:16px;color:#333}.record-card p,label{margin:4px 0;font-size:14px;color:#333;justify-content:left}.card-date{font-size:10px;color:#333;padding-top:5px}.timeline-diary{font-size:14px;color:#333;padding-top:5px}.input-field{width:100%;box-sizing:border-box;max-width:100%;padding:.5rem;margin-top:.25rem;margin-bottom:1rem;font-size:1rem;border:1px solid #ccc;border-radius:4px}.timeline-card{position:relative;display:flex;justify-content:space-between;align-items:center}.timeline-heart{position:absolute;top:10px;right:10px;display:flex;color:#000}input[type=date].input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;min-width:0;max-width:100%;box-sizing:border-box}.save-button{padding:.5rem 1rem;background-color:#007bff;color:#fff;font-size:1rem;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease}.save-button:hover{background-color:#0056b3}.post-actions svg{transition:transform .2s ease}.post-actions svg:hover{transform:scale(1.1)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}a{font-weight:500;text-decoration:inherit}h1{font-size:3.2em;line-height:1.1}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}input,select,textarea,form{background-color:#fff!important;color:#000!important}