@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--primary:#1565c0;--primary-light:#e3f2fd;--primary-dark:#0d47a1;--primary-50:#e3f2fd;--primary-100:#bbdefb;--primary-200:#90caf9;--primary-500:#2196f3;--primary-600:#1e88e5;--primary-700:#1976d2;--primary-800:#1565c0;--primary-900:#0d47a1;--accent:#42a5f5;--accent-light:#e1f5fe;--amazon-orange:#f90;--rakuten-red:#bf0000;--bg:#f5f7fa;--surface:#fff;--text-primary:#1a1a2e;--text-secondary:#546e7a;--text-muted:#90a4ae;--border:#e0e0e0;--border-light:#f0f4f8;--shadow-sm:0 1px 2px #0000000f;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 4px 16px #0000001a;--shadow-hover:0 4px 12px #1565c026;--radius:4px;--radius-lg:6px;--transition:.2s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,Noto Sans JP,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}.page-header{text-align:center;background:linear-gradient(135deg,#0d47a1 0%,#1565c0 40%,#1976d2 100%);flex-direction:column;justify-content:center;align-items:center;min-height:160px;padding:40px 20px 30px;display:flex;position:relative;overflow:hidden}.page-header.has-bg-image{background-position:50%;background-size:cover}.page-header.has-bg-image:before{content:"";z-index:1;background:linear-gradient(135deg,#0d47a1bf 0%,#1565c099 50%,#1976d280 100%);position:absolute;inset:0}.page-title{color:#fff;letter-spacing:.02em;z-index:2;font-size:1.6rem;font-weight:700;position:relative}.page-subtitle{color:#ffffffd9;z-index:2;margin-top:6px;font-size:.85rem;position:relative}.toolbar{z-index:100;background:var(--surface);border-bottom:1px solid var(--border);justify-content:center;align-items:center;gap:10px;padding:8px 16px;display:flex;position:sticky;top:0;box-shadow:0 1px 4px #0000000f}.search-input{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);width:100%;transition:var(--transition);color:var(--text-primary);outline:none;padding:8px 12px 8px 36px;font-family:inherit;font-size:.85rem}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #1565c01f}.search-wrapper{flex-shrink:0;align-items:center;width:200px;display:flex;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;font-size:.85rem;position:absolute;left:10px}.category-select{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);transition:var(--transition);color:var(--text-primary);cursor:pointer;outline:none;flex-shrink:0;min-width:140px;padding:8px 12px;font-family:inherit;font-size:.85rem}.category-select:focus{border-color:var(--primary)}.product-grid-container{width:100%;padding:12px 8px}.product-grid{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}.product-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--border-light);flex-direction:column;display:flex;position:relative;overflow:hidden}.product-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.product-image-wrapper{background:#f0f4f8;width:100%;padding-top:85%;position:relative;overflow:hidden}.product-image{object-fit:cover;width:100%;height:100%;transition:transform .3s;position:absolute;top:0;left:0}.product-card:hover .product-image{transform:scale(1.04)}.product-image-placeholder{width:100%;height:100%;color:var(--text-muted);background:#e8edf2;justify-content:center;align-items:center;font-size:2rem;display:flex;position:absolute;top:0;left:0}.product-comment{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.65rem;line-height:1.35;display:-webkit-box;overflow:hidden}.product-body{flex-direction:column;gap:2px;padding:6px 8px 4px;display:flex}.product-title{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.72rem;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.product-meta-row{justify-content:space-between;align-items:center;padding:0 8px 4px;display:flex}.product-price{color:var(--primary-dark);font-size:.8rem;font-weight:700}.like-section{align-items:center;gap:3px;display:flex}.like-button{cursor:pointer;transition:var(--transition);background:#fff;border:1px solid #ddd;border-radius:99px;align-items:center;padding:4px 10px;font-size:.95rem;line-height:1;display:flex;box-shadow:0 1px 2px #0000000d}.like-button:hover{background:#f8f9fa;transform:translateY(-1px)}.like-button:active{transform:scale(.95)}.like-plus{color:#ff4081;margin-left:3px;font-size:.7em;font-weight:800;position:relative;top:-1px}.like-button:hover{transform:scale(1.15)}.like-button.liked{animation:.35s likePopIn}@keyframes likePopIn{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.like-count{color:var(--text-muted);font-size:.65rem;font-weight:500}.purchase-buttons{gap:4px;margin-top:auto;padding:4px 8px 8px;display:flex}.purchase-btn{border-radius:var(--radius);color:#fff;transition:var(--transition);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;padding:5px 2px;font-size:.6rem;font-weight:600;text-decoration:none;display:flex}.purchase-btn:hover{opacity:.88}.purchase-btn.amazon{background:var(--primary-700)}.purchase-btn.amazon:hover{background:var(--primary-800)}.purchase-btn.rakuten{background:var(--primary-200);color:var(--primary-900)}.purchase-btn.rakuten:hover{background:var(--primary-100)}.purchase-btn.detail{color:#fff;background:#4338ca}.purchase-btn.detail:hover{background:#3730a3}.purchase-btn.disabled{pointer-events:none;opacity:.4;background:#ccc}.category-heading-bar{background:var(--primary-50);border-left:4px solid var(--primary);color:var(--primary-dark);align-items:center;gap:8px;margin:0 8px;padding:10px 16px;scroll-margin-top:52px;font-size:.95rem;font-weight:700;display:flex}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-state-icon{margin-bottom:12px;font-size:2.5rem}.profile-section{max-width:800px;margin:40px auto;padding:0 16px}.profile-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}@media (min-width:640px){.profile-card{text-align:left;flex-direction:row}}.profile-decoration{background:var(--primary-100);filter:blur(40px);opacity:.5;pointer-events:none;border-radius:50%;width:120px;height:120px;margin-top:-30px;margin-right:-30px;position:absolute;top:0;right:0}.profile-image-wrapper{width:80px;height:80px;box-shadow:var(--shadow-md);background:#e2e8f0;border:3px solid #fff;border-radius:50%;flex-shrink:0;overflow:hidden}@media (min-width:640px){.profile-image-wrapper{width:96px;height:96px}}.profile-image{object-fit:cover;width:100%;height:100%}.profile-content{text-align:center;z-index:2;flex:1}@media (min-width:640px){.profile-content{text-align:left}}.profile-name{color:#0f172a;margin-bottom:2px;font-size:1.1rem;font-weight:700}.profile-job{color:var(--primary);letter-spacing:.02em;margin-bottom:8px;font-size:.8rem;font-weight:600}.profile-bio{color:var(--text-secondary);margin-bottom:10px;font-size:.82rem;line-height:1.6}.profile-tags{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}@media (min-width:640px){.profile-tags{justify-content:flex-start}}.profile-tag{background:var(--primary-50);color:var(--text-secondary);border-radius:var(--radius);padding:3px 10px;font-size:.7rem;font-weight:500}.page-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border-light);margin-top:20px;padding:24px 20px 30px;font-size:.75rem}.back-to-top{background:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;align-items:center;gap:6px;margin-bottom:12px;padding:8px 20px;font-family:inherit;font-size:.78rem;font-weight:600;display:inline-flex}.back-to-top:hover{background:var(--primary-dark)}@media (max-width:1400px){.product-grid{grid-template-columns:repeat(6,1fr)}}@media (max-width:1024px){.product-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:768px){.page-header{min-height:120px;padding:30px 16px 24px}.page-title{font-size:1.3rem}.product-grid{grid-template-columns:repeat(2,1fr);gap:6px}.product-grid-container{padding:8px 4px}.toolbar{gap:6px;padding:6px 10px}.category-select{min-width:110px;font-size:.78rem}.category-heading-bar{margin:0 4px;font-size:.85rem}}.admin-container{max-width:900px;margin:0 auto;padding:30px 20px}.admin-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:30px;display:flex}.admin-title{font-size:1.5rem;font-weight:700}.admin-actions{align-items:center;gap:8px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;padding:10px 20px;font-family:inherit;font-size:.85rem;font-weight:600}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--border-light);color:var(--text-primary)}.btn-secondary:hover{background:var(--border)}.btn-danger{color:#dc2626;background:#fee2e2}.btn-danger:hover{background:#fecaca}.btn-success{color:#16a34a;background:#dcfce7}.btn-success:hover{background:#bbf7d0}.btn-small{padding:6px 12px;font-size:.78rem}.admin-section{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:24px}.admin-section h2{border-bottom:2px solid var(--border-light);margin-bottom:16px;padding-bottom:10px;font-size:1.15rem;font-weight:600}.form-group{margin-bottom:16px}.form-group label{color:var(--text-secondary);margin-bottom:6px;font-size:.82rem;font-weight:600;display:block}.form-input{border:1.5px solid var(--border);border-radius:var(--radius);width:100%;transition:var(--transition);color:var(--text-primary);outline:none;padding:10px 14px;font-family:inherit;font-size:.9rem}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #1565c01a}.form-row{align-items:flex-end;gap:12px;display:flex}.form-row .form-group{flex:1}.item-list{flex-direction:column;gap:8px;display:flex}.item-row{background:var(--border-light);border-radius:var(--radius);justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.item-row-name{font-size:.9rem;font-weight:500}.item-row-actions{flex-shrink:0;gap:6px;display:flex}.product-admin-card{background:var(--border-light);border-radius:var(--radius);align-items:flex-start;gap:14px;padding:14px;display:flex}.product-admin-thumb{border-radius:var(--radius);object-fit:cover;background:#eee;flex-shrink:0;width:60px;height:60px}.product-admin-info{flex:1;min-width:0}.product-admin-info h4{margin-bottom:2px;font-size:.85rem;font-weight:600}.product-admin-info p{color:var(--text-secondary);font-size:.78rem}.scrape-section{border:1.5px dashed var(--primary-500);border-radius:var(--radius);background:#e3f2fd;margin-bottom:16px;padding:16px}.scrape-section label{color:var(--primary-dark);font-size:.82rem;font-weight:600}.login-container{max-width:380px;margin:80px auto;padding:0 20px}.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center;padding:40px 30px}.login-card h1{color:var(--text-primary);margin-bottom:24px;font-size:1.3rem}.login-card .form-group{text-align:left}.loading-overlay{z-index:9999;color:var(--text-secondary);background:#fffc;justify-content:center;align-items:center;font-size:1rem;display:flex;position:fixed;inset:0}.toast{border-radius:var(--radius);color:#fff;z-index:9999;box-shadow:var(--shadow-lg);padding:12px 20px;font-size:.85rem;font-weight:500;animation:.3s toastSlide;position:fixed;bottom:20px;right:20px}.toast.success{background:#16a34a}.toast.error{background:#dc2626}@keyframes toastSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.return-portfolio-section{text-align:center;background:var(--bg);padding:30px 20px 60px}.btn-return-portfolio{color:var(--text-secondary);border:1px solid var(--border);transition:var(--transition);box-shadow:var(--shadow-sm);background:#fff;border-radius:99px;align-items:center;gap:10px;padding:12px 28px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-return-portfolio:hover{background:var(--surface);color:var(--primary);border-color:var(--primary-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}
