:root{--color-white:#fff;--color-gray-50:#f8f9fa;--color-gray-100:#f1f3f5;--color-gray-200:#e9ecef;--color-gray-300:#dee2e6;--color-gray-400:#ced4da;--color-gray-500:#adb5bd;--color-gray-600:#868e96;--color-gray-700:#495057;--color-gray-800:#343a40;--color-gray-900:#212529;--color-accent:#228be6;--color-accent-light:#e7f5ff;--color-accent-dark:#1971c2;--color-bg:var(--color-white);--color-bg-secondary:var(--color-gray-50);--color-bg-tertiary:var(--color-gray-100);--color-text:var(--color-gray-900);--color-text-secondary:var(--color-gray-700);--color-text-tertiary:var(--color-gray-600);--color-text-link:var(--color-accent);--color-border:var(--color-gray-200);--color-border-hover:var(--color-gray-300);--color-amazon:#f90;--color-amazon-bg:#fff8ed;--color-rakuten:#bf0000;--color-rakuten-bg:#fff5f5;--color-yahoo:#f03;--color-yahoo-bg:#fff5f7;--color-success:#2f9e44;--color-success-bg:#ebfbee;--color-warning:#e67700;--color-warning-bg:#fff9db;--color-error:#e03131;--color-error-bg:#fff5f5;--font-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;--text-2xs:.625rem;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.875rem;--text-md:.9375rem;--text-lg:1rem;--text-xl:1.125rem;--text-2xl:1.375rem;--text-3xl:1.75rem;--text-4xl:2.25rem;--leading-tight:1.4;--leading-normal:1.7;--leading-relaxed:1.9;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(0,0,0,.04);--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.03);--shadow-lg:0 10px 20px rgba(0,0,0,.06),0 4px 8px rgba(0,0,0,.03);--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease;--container-max:1200px;--container-article:780px;--sidebar-width:240px;--header-height:56px;--header-height-desktop:64px;--nav-bar-height:40px;--z-dropdown:100;--z-sticky:200;--z-overlay:300;--z-modal:400;--z-toast:500}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background-color:var(--color-bg);min-height:100dvh;overflow-x:hidden}a{color:var(--color-text-link);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-dark);text-decoration:underline}img,video{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:inherit}ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold);line-height:var(--leading-tight);color:var(--color-text)}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding-left:var(--space-4);padding-right:var(--space-4)}.container--article{max-width:var(--container-article)}.card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:box-shadow var(--transition-normal)}.card:hover{box-shadow:var(--shadow-md)}.card--clickable{cursor:pointer;position:relative;overflow:hidden}.card--clickable:hover{border-color:var(--color-border-hover)}.card--clickable:after{content:"📊 価格・ランク履歴を見る";position:absolute;bottom:4px;left:4px;padding:2px 6px;background:#228be61a;color:var(--color-accent-dark);font-size:9px;font-weight:var(--font-semibold);border-radius:var(--radius-sm);line-height:1.4;pointer-events:none}@media(hover:hover){.card--clickable:after{content:"📊 価格・ランキング履歴を見る →";position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(0deg,#000c,#0009);color:#fff;font-size:var(--text-xs);font-weight:var(--font-medium);text-align:center;border-top:none;letter-spacing:0;opacity:0;transform:translateY(100%);transition:opacity .25s ease,transform .25s ease;z-index:2;pointer-events:none}.card--clickable:hover:after{opacity:1;transform:translateY(0)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-semibold);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn,.btn:hover{text-decoration:none}.btn--primary{background:var(--color-accent);color:var(--color-white)}.btn--primary:hover{background:var(--color-accent-dark);color:var(--color-white)}.btn--outline{background:var(--color-white);color:var(--color-text);border:1px solid var(--color-border)}.btn--outline:hover{background:var(--color-gray-50);border-color:var(--color-border-hover)}.btn--amazon{background:var(--color-amazon);color:var(--color-white);font-weight:var(--font-bold)}.btn--amazon:hover{opacity:.9;color:var(--color-white)}.btn--rakuten{background:var(--color-rakuten);color:var(--color-white);font-weight:var(--font-bold)}.btn--rakuten:hover{opacity:.9;color:var(--color-white)}.btn--yahoo{background:var(--color-yahoo);color:var(--color-white);font-weight:var(--font-bold)}.btn--yahoo:hover{opacity:.9;color:var(--color-white)}.btn--sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn--lg{padding:var(--space-3) var(--space-6);font-size:var(--text-md)}.btn--block{width:100%}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);font-size:var(--text-2xs);font-weight:var(--font-bold);border-radius:var(--radius-sm);line-height:1.4}.badge--best{background:var(--color-success-bg);color:var(--color-success)}.badge--sale{background:var(--color-error-bg);color:var(--color-error)}.badge--new{background:var(--color-accent-light);color:var(--color-accent)}.ad-label{display:inline-block;font-size:var(--text-2xs);color:var(--color-text-tertiary);padding:1px var(--space-2);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);letter-spacing:.08em}.ad-label,.section-title{font-weight:var(--font-bold)}.section-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-lg);margin:0 0 var(--space-1);padding-bottom:2px;border-bottom:2px solid var(--color-gray-900)}.price{font-weight:var(--font-bold);color:var(--color-error)}.price--original{font-weight:var(--font-normal);color:var(--color-text-tertiary);text-decoration:line-through;font-size:var(--text-sm)}.skeleton{background:linear-gradient(90deg,var(--color-gray-100) 25%,var(--color-gray-200) 50%,var(--color-gray-100) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.page-enter-active,.page-leave-active{transition:opacity .2s ease}.page-enter-from,.page-leave-to{opacity:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-gray-50)}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}::-moz-selection{background:#228be626}::selection{background:#228be626}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.horizontal-scroll{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2);cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.horizontal-scroll:active{cursor:grabbing}@media(hover:none){.horizontal-scroll{scrollbar-width:none}.horizontal-scroll::-webkit-scrollbar{display:none}}@media(hover:hover){.horizontal-scroll{scrollbar-width:thin;scrollbar-color:var(--color-gray-300) transparent}.horizontal-scroll::-webkit-scrollbar{height:6px}.horizontal-scroll::-webkit-scrollbar-track{background:transparent}.horizontal-scroll::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full)}.horizontal-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}}.breadcrumb{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-4);flex-wrap:wrap}.breadcrumb a{color:var(--color-text-secondary)}.breadcrumb a:hover{color:var(--color-accent)}.breadcrumb__separator{color:var(--color-gray-400)}@media(min-width:768px){:root{--text-base:.9375rem;--text-lg:1.0625rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem}.container{padding-left:var(--space-6);padding-right:var(--space-6)}}@media(min-width:1024px){.container{padding-left:var(--space-8);padding-right:var(--space-8)}}.pagination{gap:var(--space-2);margin-top:var(--space-6);flex-wrap:wrap}.pagination,.pagination__btn{display:flex;align-items:center;justify-content:center}.pagination__btn{min-width:36px;height:36px;padding:0 var(--space-3);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.pagination__btn:hover:not(.is-disabled):not(.is-active){background:var(--color-gray-50);border-color:var(--color-border-hover)}.pagination__btn.is-active{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}.pagination__btn.is-disabled{color:var(--color-text-tertiary);cursor:not-allowed;opacity:.5}