*{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:#000;--color-secondary:#9e9e9e;--color-hover:#f5f5f5;--color-border:#d0d0d0;--font-size-small:12px;--font-size-normal:16px;--font-size-large:28px}body{background-color:#fff;font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif}.globalContainer{max-width:672px;margin:0 auto;padding:48px 0 0}.globalContainer h1{font-size:var(--font-size-large);margin-bottom:32px}.indexList{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.indexList li{margin:0}.indexList a{color:var(--color-primary);font-size:var(--font-size-normal);background-color:#fff;padding:16px 0;text-decoration:none;display:block}.indexList a:hover{text-decoration:underline}.basicButton{border:1px solid var(--color-border);color:var(--color-primary);cursor:pointer;background-color:#fff;border-radius:8px;padding:12px 24px;transition:scale .2s,background-color .2s;box-shadow:0 1px 2px #0000001a}.basicButton:active{scale:.98}.basicButton:hover{background-color:var(--color-hover)}.pageNavigation{margin-bottom:32px}nav ul{flex-wrap:wrap;gap:16px;margin:0;padding:0;list-style:none;display:flex}nav li{margin:0}.navigationLink{color:var(--color-primary);border:1px solid var(--color-border);font-size:var(--font-size-normal);border-radius:8px;padding:8px 16px;text-decoration:none;transition:background-color .2s,box-shadow .2s;display:inline-block}.navigationLink:hover{background-color:var(--color-hover);box-shadow:0 1px 2px #0000001a}.navigationLink:focus{outline:2px solid var(--color-primary);outline-offset:2px}.container{flex-direction:column;align-items:center;gap:24px;display:flex}.colorBox{border:2px solid var(--color-border);background-color:#0000;width:200px;height:200px;transition:background-color .3s}.buttonGroup{gap:8px;display:flex}.buttonGroup button{font-size:var(--font-size-medium);border:1px solid var(--color-border);cursor:pointer;background-color:#fff;padding:8px 16px;transition:background-color .2s}.buttonGroup button:hover{background-color:var(--color-hover)}.pageContent{flex-direction:column;gap:24px;display:flex}.pageImageContainer{border:1px solid var(--color-border);border-radius:8px;width:100%;overflow:hidden}.pageImage{width:100%;height:auto;display:block}.pageDescription{flex-direction:column;gap:32px;display:flex}.imageCreditText{font-size:var(--font-size-small);color:var(--color-secondary);line-height:1.6}.imageCreditText a{color:var(--color-secondary);text-decoration:underline;transition:color .2s}.imageCreditText a:hover{color:var(--color-primary)}.contentText{font-size:var(--font-size-normal);color:var(--color-primary);line-height:1.6}.cartContainer{z-index:1000;position:fixed;top:16px;right:16px}.cartHeader{border:1px solid var(--color-border);cursor:pointer;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;padding:0;transition:box-shadow .2s;display:flex;position:relative;box-shadow:0 2px 8px #0000001a}.cartHeader:hover{box-shadow:0 4px 12px #00000026}.cartHeader:focus{outline:2px solid var(--color-primary);outline-offset:2px}.cartIcon{font-size:24px}.cartBadge{background-color:var(--color-primary);color:#fff;min-width:24px;height:24px;font-size:var(--font-size-small);border:2px solid #fff;border-radius:12px;justify-content:center;align-items:center;padding:0 6px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.popoverContent{border:1px solid var(--color-border);background-color:#fff;border-radius:8px;min-width:240px;max-width:320px;padding:16px 24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #0000001a}.popoverContent p{font-size:var(--font-size-normal);color:var(--color-primary);margin:0;line-height:1.6}.cartDropdown{border:1px solid var(--color-border);background-color:#fff;border-radius:8px;flex-direction:column;width:320px;max-height:400px;display:flex;position:fixed;top:80px;right:16px;box-shadow:0 4px 16px #0000001a}.cartDropdownHeader{border-bottom:1px solid var(--color-border);padding:16px}.cartDropdownTitle{font-size:var(--font-size-normal);color:var(--color-primary);margin:0;font-weight:600}.cartItemsList{max-height:320px;padding:8px;overflow-y:auto}.cartEmptyMessage{text-align:center;color:var(--color-secondary);font-size:var(--font-size-normal);padding:24px 16px}.cartItem{border-radius:8px;padding:12px;transition:background-color .2s}.cartItem:hover{background-color:var(--color-hover)}.cartItemInfo{justify-content:space-between;align-items:center;gap:8px;display:flex}.cartItemName{font-size:var(--font-size-normal);color:var(--color-primary);flex:1}.cartItemCount{font-size:var(--font-size-normal);color:var(--color-secondary);font-weight:500}.productsGrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:32px;display:grid}.productCard{border:1px solid var(--color-border);background-color:#fff;border-radius:8px;flex-direction:column;gap:16px;padding:16px;transition:box-shadow .2s;display:flex;box-shadow:0 1px 2px #0000000d}.productCard:hover{box-shadow:0 4px 8px #0000001a}.productImageContainer{aspect-ratio:4/3;background-color:var(--color-hover);border-radius:8px;width:100%;overflow:hidden}.productImage{object-fit:cover;width:100%;height:100%}.productInfo{flex-direction:column;gap:8px;display:flex}.productDescription{font-size:var(--font-size-small);color:var(--color-secondary);line-height:1.6}.productName{font-size:var(--font-size-normal);color:var(--color-primary);font-weight:600}.productPrice{font-size:var(--font-size-normal);color:var(--color-primary);font-weight:700}.addToCartButton{width:100%;margin-top:auto}.preview{border:1px solid var(--color-border);position-anchor:--anchor-0;top:anchor(bottom);left:anchor(left);opacity:1;width:322px;transition:opacity .3s ease, transform .3s ease, display .3s allow-discrete;background-color:#fff;border-radius:8px;margin-top:8px;display:none;position:fixed;transform:translateY(0)scale(1);box-shadow:0 4px 16px #0000001a}.preview:popover-open{display:block}@starting-style{.preview:popover-open{opacity:0;transform:translateY(-8px)scale(.95)}}.preview:not(:popover-open){opacity:0;transform:translateY(-8px)scale(.95)}.preview .ogpImage{object-fit:cover;width:320px;height:180px;display:block}.preview .ogpContent{padding:8px}.preview .ogpTitle{font-size:var(--font-size-normal);color:var(--color-primary);margin:0;font-weight:600;line-height:1.6}.preview .ogpDescription{font-size:var(--font-size-small);color:var(--color-secondary);margin:0;line-height:1.6}