@charset "utf-8";
@layer base, font, low, main, high;
@layer main { @media (min-width: 800px) { .qrill-feb7f04d { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; }  }  } 
@layer main { @media (min-width: 800px) { .search-panel-state-c4f3ae8:checked ~ .qrill-feb7f04d { opacity: 1; pointer-events: unset; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-4bb22d0e { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; }  }  } 
@layer main { @media (min-width: 800px) { .search-panel-state-c4f3ae8:checked ~ .qrill-4bb22d0e { opacity: 1; pointer-events: unset; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d { background: rgb(253 254 254); margin-block: 3rem; max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d { transition: all 0.25s ease-in-out; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d:hover { transform: translateY(-2px); }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); }  }  } 
@layer main { @media (min-width: 800px) { .qrill-feb7f04d:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); }  }  } 
@layer main { @media (max-width: 799px) { .qrill-feb7f04d { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; transform: translateY(-120%); }  }  } 
@layer main { @media (max-width: 799px) { .search-panel-state-c4f3ae8:checked ~ .qrill-feb7f04d { transform: translateY(0); }  }  } 
@layer main { @media (max-width: 799px) { .qrill-feb7f04d { background: rgb(253 254 254); padding: 1rem; }  }  } 
@layer main { .qrill-feb7f04d { display: flex; flex-direction: column; gap: 1rem; } }
@layer main { .search-result-aba3fbd6 { flex-grow: 1; overflow-y: scroll; } }
@layer main { .qrill-39ba6179 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } }
@layer main { .qrill-86b49e3a { font-size: 2rem; } }
@layer main { .qrill-9fc5e7f7 { font-size: 2rem; } }
@layer main { .qrill-d3aedafb { border-radius: 12px; background: rgb(253 254 254); border: 2px solid rgba(71 85 105 / 0.4); padding: 1rem 1rem; display: flex; flex-direction: row; align-items: center; gap: 1rem; } }
@layer main { .search-input-ffa2e3a6 { width: 100%; } }
@layer main { .qrill-d3aedafb:has(.search-input-ffa2e3a6:focus) { border: 3px solid rgb(59 130 246); } }
@layer main { @media (min-width: 800px) { .qrill-ea47cd2a { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-374209eb { display: flex; justify-content: center; align-items: center; gap: 1rem; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-80af8798 { display: flex; justify-content: center; align-items: center; gap: 1rem; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-1aa4011a { display: none; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-374209eb { flex-direction: column; width: 100%; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-80af8798 { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 3rem; justify-content: space-between; border-block-start: 1px solid rgba(71 85 105 / 0.4); }  }  } 
@layer main { @media (max-width: 799px) { .qrill-843c46ac { width: 100%; border-radius: 12px; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-843c46ac:hover { background: rgba(59 130 246 / 0.1); }  }  } 
@layer main { @media (max-width: 799px) { .qrill-d136836d { display: block; padding: 1rem 2rem; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-1aa4011a { display: inline; margin-inline: 1rem; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-cda9c459 { font-size: 2rem; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-624b1f3d { display: none; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-9d4d9069 { display: none; }  }  } 
@layer main { @media (min-width: 800px) { .qrill-c856a5bb { display: flex; flex-direction: row; align-items: center; gap: 1rem; }  }  } 
@layer main { @media (min-width: 800px) { .search-open-47ff3f60 { width: 100%; border-radius: 12px; background: rgb(241 245 249); border: 2px solid rgba(71 85 105 / 0.4); padding: 0.25rem 1rem; }  }  } 
@layer main { @media (min-width: 800px) { .svg-icon-font-solid-magnifying-glass-59f61cd6 { margin-inline-end: 1rem; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-c856a5bb { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 6; transform: translateX(140%); }  }  } 
@layer main { @media (max-width: 799px) { .nav-panel-state-a0545885:checked ~ .qrill-c856a5bb { transform: translateX(0); }  }  } 
@layer main { @media (max-width: 799px) { .qrill-1550e27c { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 6; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; }  }  } 
@layer main { @media (max-width: 799px) { .nav-panel-state-a0545885:checked ~ .qrill-1550e27c { opacity: 1; pointer-events: unset; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-624b1f3d { display: block; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-fc3f98bf { display: block; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-c856a5bb { position: fixed; top: 0; right: 0; left: unset; width: 75%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; background: rgb(241 245 249); padding: 1.5rem; font-size: 1.5rem; gap: 1rem; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-9d4d9069 { display: flex; align-items: center; justify-content: space-between; }  }  } 
@layer main { @media (max-width: 799px) { .search-open-47ff3f60 { width: 100%; border-radius: 12px; background: rgb(241 245 249); border: 2px solid rgba(71 85 105 / 0.4); padding: 1rem 3rem; }  }  } 
@layer main { @media (max-width: 799px) { .svg-icon-font-solid-magnifying-glass-59f61cd6 { margin-inline-end: 1rem; }  }  } 
@layer main { .qrill-30da83c7 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: flex; justify-content: space-between; align-items: start; padding: 1rem; } }
@layer main { .qrill-cacefd49 { font-size: 1.25rem; font-weight: bold; font-style: normal; line-height: 1.0; } }
@layer main { .qrill-17c93a0a { font-size: 0.875rem; color: rgb(100 116 139); } }
@layer main { .page-footer-fcd47a42 { background: rgb(241 245 249); margin-block-start: 1.5rem; } }
@layer main { .qrill-bd78584e { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; padding-block: 3rem; color: rgb(100 116 139); display: flex; flex-direction: row; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 3rem; } }
@layer main { .qrill-6e5d5fb { display: flex; flex-direction: row; align-items: center; } }
@layer main { .qrill-6e5d5fb > .qrill-53e012bc:nth-child(n+2) { padding-inline-start: 0.5rem; border-inline-start: 1px solid rgba(100 116 139 / 0.4); } }
@layer main { .qrill-6e5d5fb > .qrill-53e012bc:nth-last-child(n+2) { padding-inline-end: 0.5rem; } }
@layer base { *, *:before, *:after { margin: 0; padding: 0; border: 0; box-sizing: border-box; font: inherit; color: inherit; }  } 
@layer base { a { text-decoration: inherit; }  } 
@layer base { button { cursor: pointer; }  } 
@layer base { input { width: 100%; border: 0 none; outline: none; }  } 
@layer base { img, video, canvas, svg { display: block; max-width: 100%; height: auto; }  } 
@layer base { :root { font-size: 16px; line-height: 1.6; font-family: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Noto Sans JP, Meiryo, sans-serif; }  } 
@layer base { body { background-color: rgb(253 254 254); color: rgb(15 23 42); }  } 
@layer base { ul, ol, menu { list-style-type: none; }  } 
@layer main { .qrill-e3e04706 { position: fixed; top: 0; right: 0; left: 0; z-index: 4; background-color: rgb(253 254 254); } }
@layer main { .contents-cc7f3c96 { padding-block: 74px; } }
@layer main { .hero-d64f0b67 { background: rgb(241 245 249); } }
@layer main { .qrill-edd48c3e { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; color: rgb(71 85 105); padding: 3rem 1rem; } }
@layer main { .qrill-3acec8ff { font-size: 2.7rem; line-height: 1.1; font-weight: bold; font-style: normal; max-width: 540px; color: rgb(100 116 139); } }
@layer main { .qrill-87c905c0 { font-size: 1.125rem; margin-block: 0.25rem; } }
@layer main { .qrill-d4c34281 { font-size: 0.875rem; margin-block-end: 3rem; } }
@layer main { .styled-card-9ac504c3 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-9ac504c3 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-9ac504c3:hover { transform: translateY(-2px); } }
@layer main { .styled-card-9ac504c3 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } }
@layer main { .styled-card-9ac504c3:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-c2cb76ec { font-size: 2rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-fc5b3ad { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-5cbff06e { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .product-card-8f76cb13 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .product-card-8f76cb13 { transition: all 0.25s ease-in-out; } }
@layer main { .product-card-8f76cb13:hover { transform: translateY(-2px); } }
@layer main { .product-card-8f76cb13 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } }
@layer main { .product-card-8f76cb13:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-af0d4bcd { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .qrill-a62d6e1b { font-size: 2rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-8d1c245e { font-size: 0.875rem; } }
@layer main { .qrill-da16611f { list-style-type: disc; margin-inline: 2rem; margin-block-start: 1.25rem; } }
@layer main { .qrill-f327aadc { color: rgb(15 23 42); font-weight: bold; margin-block-start: 1rem; } }
@layer main { .qrill-740adaa1 { font-size: 0.875rem; font-weight: bold; color: rgb(37 99 235); border-radius: 8px; border: 0 none; background-color: rgba( 96 165 250 / 0.2); padding: 2px 0.5rem; } }
@layer main { .qrill-c1051762 { font-size: 0.875rem; font-weight: bold; color: rgb(217 119 6); border-radius: 8px; border: 0 none; background-color: rgba( 251 191 36 / 0.2); padding: 2px 0.5rem; } }
@layer main { .qrill-dff5423 { margin-block: 1rem; padding: 1rem; border-inline-start: 3px solid rgb(217 119 6); background: rgba(251 191 36 / 0.3); color: rgb(217 119 6); } }
@layer main { .qrill-af0d4bcd { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding-block: 1.5rem; } }
@layer main { .qrill-1518d24b { display: inline-flex; box-sizing: content-box; padding: 1rem; border-radius: 8px; overflow: hidden; cursor: pointer; line-height: 1; font-weight: bold; font-style: normal; } }
@layer main { .qrill-1518d24b { background: linear-gradient(135deg, rgb(6 182 212) 0%, rgb(59 130 246) 100%); border: none; box-shadow: none; } }
@layer main { .qrill-1518d24b { transition: all 0.25s ease-in-out; } }
@layer main { .qrill-1518d24b:hover { box-shadow: 0 0 4px rgba(203 213 225 / 0.7); } }
@layer main { .qrill-1518d24b:active { box-shadow: 0 0 8px rgba(203 213 225 / 0.9); } }
@layer main { .qrill-1518d24b:hover { transform: translateY(-2px); } }
@layer main { .qrill-1518d24b { color: rgb(253 254 254); } }
@layer main { .qrill-62130f0c { color: rgba(100 116 139 / 0.5); background-color: transparent; box-shadow: 0 0 0 1px inset rgba(100 116 139 / 0.5); } }
@layer main { .qrill-62130f0c { transition: all 0.25s ease-in-out; } }
@layer main { .qrill-62130f0c:hover { color: rgba(15 23 42 / 0.8); box-shadow: 0 0 0 1px inset rgba(15 23 42 / 0.8); } }
@layer main { .qrill-62130f0c:active { color: rgba(15 23 42 / 1.0); box-shadow: 0 0 0 1px inset rgba(15 23 42 / 1.0); } }
@layer main { .qrill-62130f0c:hover { transform: translateY(-2px); } }
@layer main { .qrill-62130f0c { display: inline-flex; box-sizing: content-box; padding: 1rem; border-radius: 8px; overflow: hidden; cursor: pointer; line-height: 1; font-weight: bold; font-style: normal; color: rgb(15 23 42); } }
@layer main { .main-e1fb8243 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; margin-block: 2rem; gap: 1.25rem; } }
@layer main { @media (max-width: 799px) { .main-e1fb8243 { grid-template-columns: 1fr; }  }  } 
@layer main { .aside-27b600ac { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; } }
@layer main { .styled-card-9ac504c3 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; } }
@layer main { .result-card-d5b72df1 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .result-card-d5b72df1 { transition: all 0.25s ease-in-out; } }
@layer main { .result-card-d5b72df1:hover { transform: translateY(-2px); } }
@layer main { .result-card-d5b72df1 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } }
@layer main { .result-card-d5b72df1:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .tag-area-f3cf387a { display: inline-flex; gap: 0.25rem; } }
@layer main { .tag-8723deb5 { font-size: 0.875rem; color: rgb(253 254 254); border-radius: 8px; border: 0 none; background-color: rgb(59 130 246); padding: 2px 0.5rem; } }
@layer main { .qrill-95fc0210 { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-2c63bc7e strong { font-weight: bold; color: rgb(59 130 246); } }
@layer main { .result-card-list-3fbbbff9 { display: flex; flex-direction: column; gap: 1rem; } }
@font-face { font-family: 'fontawesome free generated'; font-style: normal; font-weight: 400; font-display: block; src: url("/products.woff2") format("woff2"); }
@layer font { .hf { font-family: 'fontawesome free generated'; font-style: normal; font-weight: normal; vertical-align: -0.125em; } }
@layer font { .hf::before { content: var(--hf); } }
@layer font { .hf-solid-xmark { --hf: "\e000"; } }
@layer font { .hf-solid-magnifying-glass { --hf: "\e001"; } }
@layer font { .hf-solid-bars { --hf: "\e002"; } }
@layer font { .hf-solid-xmark { --hf: "\e003"; } }
@layer font { .hf-brands-github { --hf: "\e004"; } }
@layer font { .hf-brands-x-twitter { --hf: "\e005"; } }
@layer font { .hf-brands-youtube { --hf: "\e006"; } }
@layer font { .hf-solid-house { --hf: "\e007"; } }
@layer font { .hf-solid-user { --hf: "\e008"; } }
@layer font { .hf-solid-box { --hf: "\e009"; } }
@layer font { .hf-solid-pen-to-square { --hf: "\e00a"; } }
@layer font { .hf-solid-envelope { --hf: "\e00b"; } }
@layer font { .hf-solid-magnifying-glass { --hf: "\e00c"; } }