{"id":150,"date":"2025-09-19T17:25:01","date_gmt":"2025-09-19T08:25:01","guid":{"rendered":"https:\/\/poe2tools.net\/?page_id=150"},"modified":"2025-12-26T19:23:55","modified_gmt":"2025-12-26T10:23:55","slug":"poe2-stash-tab-calculator","status":"publish","type":"page","link":"https:\/\/poe2tools.net\/ja\/poe2-stash-tab-calculator\/","title":{"rendered":"\u3010POE2\u3011\u304a\u3059\u3059\u3081\u30b9\u30bf\u30c3\u30b7\u30e5\u30bf\u30d6\u306e\u30bb\u30fc\u30eb\u4fa1\u683c\u8a08\u7b97\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div class=\"price-calculator\">\n\n<div class=\"total-price-display\">\n    <p class=\"price-normal\"><strong>\u901a\u5e38\u4fa1\u683c :<\/strong> <span id=\"normal-price-output\">&#8211;<\/span><\/p>\n    <p class=\"price-discount\"><strong>\u5272\u5f15\u4fa1\u683c :<\/strong> <span id=\"discount-price-output\">&#8211;<\/span><\/p>\n<\/div>\n    <div id=\"calculator-groups\">\n        <\/div>\n\n\n<\/div>\n\n<style>\n.category-title {\n    color: var(--accent-color);\n    margin-top: 40px;\n    margin-bottom: 15px;\n    font-size: 1.2em;\n    text-align: center;\n    border-top: 1px solid var(--border-color);\n    padding-top: 30px;\n}\n\n.category-title:first-child {\n    margin-top: 0;\n    border-top: none;\n    padding-top: 0;\n}\n\n\/* ============================================= *\/\n\/* 1. \u57fa\u672c & \u30ab\u30e9\u30fc\u5909\u6570\u8a2d\u5b9a                      *\/\n\/* ============================================= *\/\n.price-calculator {\n    \/* \u30ab\u30e9\u30fc\u5909\u6570\uff1a\u3053\u308c\u3089\u306e\u5024\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u3067\u3001\u30c6\u30fc\u30de\u5168\u4f53\u306e\u8272\u3092\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002 *\/\n    --bg-color: transparent;           \/* \u30da\u30fc\u30b8\u5168\u4f53\u306e\u80cc\u666f\u8272 *\/\n    --container-bg-color: #2a2a2e;   \/* \u30b3\u30f3\u30c6\u30ca\u3001\u30ab\u30fc\u30c9\u306e\u80cc\u666f\u8272 *\/\n    --border-color: #444;            \/* \u57fa\u672c\u306e\u5883\u754c\u7dda\u8272 *\/\n    --text-color-primary: #dcdcdc;    \/* \u57fa\u672c\u306e\u30c6\u30ad\u30b9\u30c8\u8272 *\/\n    --text-color-secondary: #888;     \/* \u88dc\u52a9\u30c6\u30ad\u30b9\u30c8\u8272\uff08\u4fa1\u683c\u306a\u3069\uff09*\/\n    --accent-color: #e5b848;          \/* \u5f37\u8abf\u8272\uff08\u9078\u629e\u6642\u306e\u5883\u754c\u7dda\u3001\u4fa1\u683c\u306a\u3069\uff09*\/\n\n    max-width: 100%; \/* \u6700\u5927\u5e45\u306e\u8abf\u6574 *\/\n    margin: 30px auto;\n    min-height:1000px;\n    font-family: sans-serif;\n    background-color: var(--bg-color);\n    padding: 0px;\n    border-radius: 8px;\n}\n\n\/* ============================================= *\/\n\/* 2. \u4e0a\u90e8\u306e\u4fa1\u683c\u8868\u793a\u30a8\u30ea\u30a2                       *\/\n\/* ============================================= *\/\n.total-price-display {\n    background-color: var(--container-bg-color);\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    padding: 20px 25px;\n    margin-bottom: 30px;\n    text-align: center;\n}\n\n.total-price-display p {\n    margin: 8px 0;\n    font-size: 1.1em;\n    color: var(--text-color-primary);\n}\n\n.total-price-display strong {\n    font-weight: 600;\n}\n\n.total-price-display span {\n    color: var(--accent-color);\n    font-weight: bold;\n}\n\n\/* ============================================= *\/\n\/* 3. \u30ab\u30fc\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\uff083\u5217\u30b0\u30ea\u30c3\u30c9\uff09            *\/\n\/* ============================================= *\/\n.card-container {\n    display: grid;\n    \/* 3\u3064\u306e\u540c\u3058\u5e45\u306e\u5217\u3092\u751f\u6210\u3057\u307e\u3059\u3002*\/\n    grid-template-columns: repeat(3, 1fr);\n    gap: 15px; \/* \u30ab\u30fc\u30c9\u9593\u306e\u9593\u9694 *\/\n}\n\n\/* ============================================= *\/\n\/* 4. \u500b\u5225\u30ab\u30fc\u30c9\u306e\u30b9\u30bf\u30a4\u30eb                       *\/\n\/* ============================================= *\/\n.card-block {\n    display: flex;\n    align-items: center;\n    border: 2px solid var(--border-color);\n    border-radius: 6px;\n    padding: 15px;\n    background-color: var(--container-bg-color);\n    cursor: pointer;\n    transition: all 0.2s ease-in-out;\n}\n\n.card-block:hover {\n    border-color: #666; \/* \u30db\u30d0\u30fc\u6642\u306b\u5883\u754c\u7dda\u8272\u3092\u5c11\u3057\u660e\u308b\u304f *\/\n}\n\n.card-block.selected {\n    border-color: var(--accent-color); \/* \u9078\u629e\u6642\u306b\u5f37\u8abf\u8272\u3067\u5883\u754c\u7dda\u3092\u5909\u66f4 *\/\n    box-shadow: 0 0 10px rgba(229, 184, 72, 0.2);\n}\n\n\/* \u30ab\u30b9\u30bf\u30e0\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9 *\/\n.card-checkbox {\n    width: 20px;\n    height: 20px;\n    border: 2px solid #777;\n    border-radius: 4px;\n    margin-right: 15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    transition: all 0.2s ease-in-out;\n}\n\n.card-block.selected .card-checkbox {\n    background-color: var(--accent-color);\n    border-color: var(--accent-color);\n}\n\n.card-checkbox svg {\n    display: none;\n    width: 14px;\n    height: 14px;\n    stroke: var(--bg-color); \/* \u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306e\u8272\u3092\u6697\u304f\u3057\u3066\u5bfe\u6bd4\u52b9\u679c\u3092\u51fa\u3059 *\/\n    stroke-width: 3;\n}\n\n.card-block.selected .card-checkbox svg {\n    display: block;\n}\n\n\/* \u30ab\u30fc\u30c9\u5185\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2 *\/\n.card-text .name {\n    font-weight: 600;\n    margin: 0;\n    color: var(--text-color-primary);\n    font-size:20px;\n}\n\n.card-text .price {\n    font-size: 16px;\n    color: var(--text-color-secondary);\n    margin: 5px 0 0;\n\n}\n\n\/* ============================================= *\/\n\/* 5. \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6Web\u8abf\u6574                        *\/\n\/* ============================================= *\/\n\/* \u753b\u9762\u5e45\u304c992px\u4ee5\u4e0b\u306e\u5834\u5408\uff08\u30bf\u30d6\u30ec\u30c3\u30c8\uff09-> 2\u5217\u306b\u5909\u66f4 *\/\n@media (max-width: 992px) {\n    .card-container {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n\/* \u753b\u9762\u5e45\u304c600px\u4ee5\u4e0b\u306e\u5834\u5408\uff08\u30e2\u30d0\u30a4\u30eb\uff09-> 1\u5217\u306b\u5909\u66f4 *\/\n@media (max-width: 600px) {\n    .card-container {\n        grid-template-columns: 1fr;\n    }\n    .price-calculator {\n        padding: 15px;\n    }\n}\n\/* \u4fa1\u683c\u8868\u793a\u30b3\u30f3\u30c6\u30ca\u3092Flexbox\u306b\u5909\u66f4\u3057\u3066\u5de6\u53f3\u306b\u914d\u7f6e *\/\n.price-calculator .total-price-display {\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n}\n\n\/* \u5404\u4fa1\u683c\u9805\u76ee\u304c\u5360\u3081\u308b\u30b9\u30da\u30fc\u30b9\u3092\u8a2d\u5b9a *\/\n.price-calculator .total-price-display p {\n    flex: 1; \/* \u4e21\u5074\u304c\u540c\u3058\u30b9\u30da\u30fc\u30b9\u3092\u5360\u3081\u308b\u3088\u3046\u306b\u8a2d\u5b9a *\/\n    font-size: 1.1em;\n}\n\n\/* \u4e2d\u592e\u306b\u533a\u5207\u308a\u7dda\u3092\u8ffd\u52a0 *\/\n.price-calculator .total-price-display .price-normal {\n    border-right: 1px solid var(--border-color);\n}\n\n\/* \u901a\u5e38\u4fa1\u683c\u306e\u6570\u5b57\u306e\u8272\uff08\u57fa\u672c\u306e\u30c6\u30ad\u30b9\u30c8\u8272\uff09*\/\n.price-calculator .total-price-display .price-normal span {\n    color: var(--text-color-primary);\n    font-weight: bold;\n}\n\n\/* \u5272\u5f15\u4fa1\u683c\u306e\u6570\u5b57\u306e\u8272\uff08\u5f37\u8abf\u8272\uff09*\/\n.price-calculator .total-price-display .price-discount span {\n    color: var(--accent-color);\n    font-weight: bold;\n    font-size: 1em; \/* \u5272\u5f15\u4fa1\u683c\u3092\u5c11\u3057\u5927\u304d\u304f\u3057\u3066\u5f37\u8abf *\/\n}\n\n@media (max-width: 600px) {\n    \/* \u65e2\u5b58\u306e\u30ab\u30fc\u30c9\u30b3\u30f3\u30c6\u30ca\u30b9\u30bf\u30a4\u30eb *\/\n    .card-container {\n        grid-template-columns: 1fr;\n    }\n    .price-calculator {\n        padding: 15px;\n    }\n\n    \/* \u25bc\u25bc\u25bc \u30e2\u30d0\u30a4\u30eb\u4fa1\u683c\u8868\u793a\u7528\u30b9\u30bf\u30a4\u30eb\uff08\u8ffd\u52a0\uff09\u25bc\u25bc\u25bc *\/\n    .price-calculator .total-price-display {\n        flex-direction: column; \/* \u5de6\u53f3\u914d\u7f6e\u304b\u3089\u4e0a\u4e0b\u914d\u7f6e\u306b\u5909\u66f4 *\/\n        gap: 15px; \/* \u4e0a\u4e0b\u306e\u9593\u9694\u3092\u8ffd\u52a0 *\/\n    }\n\n    .price-calculator .total-price-display .price-normal {\n        border-right: none; \/* \u53f3\u5074\u306e\u533a\u5207\u308a\u7dda\u3092\u524a\u9664 *\/\n        padding-bottom: 15px; \/* \u4e0b\u5074\u306e\u4f59\u767d\u3092\u8ffd\u52a0 *\/\n        border-bottom: 1px solid var(--border-color); \/* \u4e0b\u90e8\u306e\u533a\u5207\u308a\u7dda\u3092\u8ffd\u52a0 *\/\n        width: 100%; \/* \u5e45\u3092100%\u306b\u8a2d\u5b9a *\/\n    }\n\n    .price-calculator .total-price-display .price-discount {\n        width: 100%; \/* \u5e45\u3092100%\u306b\u8a2d\u5b9a *\/\n    }\n\/* ============================================= *\/\n\/* 7. \u4fa1\u683c\u8868\u793a\u30a8\u30ea\u30a2\u306e\u4e0a\u90e8\u56fa\u5b9a\uff08Sticky\uff09         *\/\n\/* ============================================= *\/\n.price-calculator .total-price-display {\n    position: -webkit-sticky; \/* Safari\u30d6\u30e9\u30a6\u30b6\u4e92\u63db\u6027 *\/\n    position: sticky;\n    top: 10px; \/* \u753b\u9762\u4e0a\u90e8\u304b\u3089\u3069\u308c\u3060\u3051\u96e2\u308c\u3066\u56fa\u5b9a\u3055\u308c\u308b\u304b\u3092\u6c7a\u5b9a *\/\n    z-index: 100; \/* \u4ed6\u306e\u8981\u7d20\u306e\u4e0a\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306bz-index\u3092\u8a2d\u5b9a *\/\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u901a\u5e38\u4fa1\u683c : &#8211; \u5272\u5f15\u4fa1\u683c : &#8211;<\/p>\n","protected":false},"author":1,"featured_media":646,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-150","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/pages\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":30,"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":686,"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/pages\/150\/revisions\/686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/media\/646"}],"wp:attachment":[{"href":"https:\/\/poe2tools.net\/ja\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}