@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-ea240e44 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-ea240e44 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-ea240e44:hover { transform: translateY(-2px); } }
@layer main { .styled-card-ea240e44 { 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-ea240e44:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-fc5b3ad { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-5cbff06e { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-a9ba2d2f { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .tag-area-6a67f218 { display: inline-flex; gap: 0.25rem; } }
@layer main { .tag-84bc9d93 { 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 { .tag-area-6a67f218 { flex-wrap: wrap; } }
@layer main { .styled-card-f4337634 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-f4337634 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-f4337634:hover { transform: translateY(-2px); } }
@layer main { .styled-card-f4337634 { 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-f4337634:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-4021e79d { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-8d1c245e { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-da16611f { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .title-c136a040 { font-size: 1rem; font-weight: bold; color: rgb(15 23 42); padding-block-end: 0.5rem; } }
@layer main { .qrill-dff5423 { font-size: 0.875rem; color: rgb(100 116 139); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; } }
@layer main { .tag-area-34784a8a > .tag-884566c5:nth-child(n+2)::before { content: ', '; } }
@layer main { .small-posts-list-8acca484 > .post-header-ba735839:nth-child(n+2) { padding-block-start: 0.5rem; border-block-start: 1px solid rgba(100 116 139 / 0.5); } }
@layer main { .small-posts-list-8acca484 > .post-header-ba735839:nth-last-child(n+2) { padding-block-end: 0.5rem; } }
@layer main { .post-list-card-ed333f20 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .post-list-card-ed333f20 { transition: all 0.25s ease-in-out; } }
@layer main { .post-list-card-ed333f20:hover { transform: translateY(-2px); } }
@layer main { .post-list-card-ed333f20 { 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 { .post-list-card-ed333f20:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .title-45a68f19 { font-size: 1.5rem; font-weight: bold; color: rgb(15 23 42); padding-block-end: 0.5rem; } }
@layer main { .post-959a9cb1 { display: flex; flex-direction: column; gap: 1rem; } }
@layer main { .qrill-926f42fc { font-size: 0.875rem; color: rgb(100 116 139); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; } }
@layer main { .qrill-135272c1 { font-size: 0.875rem; color: rgb(100 116 139); } }
@layer main { .qrill-604caf82 { color: rgb(59 130 246); font-weight: bold; } }
@layer main { .tag-area-ffeeebdd { display: inline-flex; gap: 0.25rem; } }
@layer main { .tag-875a2838 { 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 { .post-list-card-ed333f20 > .post-959a9cb1:nth-child(n+2) { padding-block-start: 1rem; border-block-start: 1px solid rgba(100 116 139 / 0.5); } }
@layer main { .post-list-card-ed333f20 > .post-959a9cb1:nth-last-child(n+2) { padding-block-end: 1rem; } }
@layer main { .contents-area-69e5b292 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: flex; gap: 1rem; } }
@layer main { .qrill-75d13a2b { max-width: 30%; flex-shrink: 1; } }
@layer main { .qrill-28d6fd6a { max-width: 70%; flex-shrink: 3; } }
@layer main { @media (max-width: 799px) { .contents-area-69e5b292 { flex-direction: column; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-75d13a2b { max-width: 100%; }  }  } 
@layer main { @media (max-width: 799px) { .qrill-28d6fd6a { max-width: 100%; }  }  } 
@layer main { .contents-area-69e5b292 { margin-block: 1.5rem; } }
@layer main { aside { display: flex; flex-direction: column; gap: 1rem; } }
@layer main { .result-card-6ca1c566 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .result-card-6ca1c566 { transition: all 0.25s ease-in-out; } }
@layer main { .result-card-6ca1c566:hover { transform: translateY(-2px); } }
@layer main { .result-card-6ca1c566 { 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-6ca1c566:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .tag-area-bddf90ec { display: inline-flex; gap: 0.25rem; } }
@layer main { .tag-8aaca7e7 { 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-15aa72c { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-35439a30 strong { font-weight: bold; color: rgb(59 130 246); } }
@layer main { .result-card-list-4c8488e { 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("/blog/authors/%5Bauthor%5D.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"; } }