/* =========================================================
   works.css  実績一覧（/works）専用。クラス名はすべて wk- で始まる
   各ルールの上のコメントは、その部品に入っている文字（どの部品かの目印）。
   ========================================================= */
/* wk-root: Ⓒ2025 OTAKKY AI Works 実績一覧  */
.wk-root { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); border-radius: 0px; flex-flow: column; height: 100%; margin: 0px; opacity: 1; padding: 200px 0px 0px; width: 100%; max-width: 100%; }
@media screen and (max-width: 1280px) { .wk-root { place-content: center flex-start; align-items: center; flex-flow: column; padding: 200px 0px 0px; } }
@media screen and (max-width: 760px) { .wk-root { padding: 200px 0px 0px; } }

/* wk-blk1-sec1: Works 実績一覧 システム開発 ホームページ制作  */
.wk-blk1-sec1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; padding: 0px 40px 150px; width: 100%; --gh-wk-blk1-sec1: 0px; --gv-wk-blk1-sec1: 0px; max-width: 100%; }
@media screen and (max-width: 540px) { .wk-blk1-sec1 { padding: 0px 30px 150px; --gh-wk-blk1-sec1: 0px; --gv-wk-blk1-sec1: 0px; } }
.wk-blk1-inner { padding: 0px 40px 150px; width: calc(100% - (var(--gh-wk-blk1-sec1) * 0)); height: auto; flex-flow: column; place-content: center flex-start; align-items: center; gap: 0px; --gh-wk-blk1-sec1: 0px; --gv-wk-blk1-sec1: 0px; max-width: calc(100% - (var(--gh-wk-blk1-sec1) * 0)); }
@media screen and (max-width: 540px) { .wk-blk1-inner { padding: 0px 30px 150px; flex-direction: column; --gh-wk-blk1-sec1: 0px; --gv-wk-blk1-sec1: 0px; } }

/* wk-blk1-box1: Works 実績一覧 システム開発 ホームページ制作  */
.wk-blk1-box1 { place-content: center flex-start; align-items: center; flex-flow: wrap; gap: 40px; margin: 0px 0px 100px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: 1280px; --gh-wk-blk1-box1: 40px; --gv-wk-blk1-box1: 40px; max-width: 100%; }
html.js .wk-blk1-box1:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-wk-blk1-box1: 40px; --gv-wk-blk1-box1: 40px; }
.wk-blk1-box1.in-active { transition-delay: 500ms; transition-duration: 500ms; }
@media screen and (max-width: 760px) { .wk-blk1-box1 { gap: 24px; --gh-wk-blk1-box1: 24px; --gv-wk-blk1-box1: 24px; } }

/* wk-blk1-box2: Works 実績一覧 */
.wk-blk1-box2 { place-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: 0px; padding: 0px; width: auto; --gh-wk-blk1-box2: 0px; --gv-wk-blk1-box2: 0px; max-width: 100%; }

/* wk-blk1-txt1: Works */
.wk-blk1-txt1 { color: rgb(34, 34, 34); font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 760px) { .wk-blk1-txt1 { font-size: 48px; } }
@media screen and (max-width: 540px) { .wk-blk1-txt1 { font-size: 32px; } }

/* wk-blk1-txt2: 実績一覧 */
.wk-blk1-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; }
@media screen and (max-width: 540px) { .wk-blk1-txt2 { font-size: 11px; } }

/* wk-blk1-box3: システム開発 ホームページ制作 SNS運用クリエイティブ */
.wk-blk1-box3 { align-content: flex-start; align-items: flex-start; background: rgba(0, 0, 0, 0); border-radius: 0px; flex-flow: wrap; margin: 0px; padding: 0px; width: auto; max-width: 100%; }
@media screen and (max-width: 760px) { .wk-blk1-box3 { width: auto; } }
@media screen and (max-width: 540px) { .wk-blk1-box3 { width: auto; } }

/* wk-blk1-link1: システム開発 */
.wk-blk1-link1 { place-content: center; align-items: center; background: rgb(238, 238, 238); border-radius: 3px; flex-flow: row; margin: 5px 3px 5px 5px; padding: 10px 20px; max-width: calc(100% - 8px); }
.wk-blk1-link1:hover { background: rgb(208, 208, 208); }

/* wk-blk1-txt3: システム開発 */
.wk-blk1-txt3 { background: rgba(0, 0, 0, 0); border-radius: 2px; color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 400; height: auto; line-height: 1; margin: 0px; padding: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; }

/* wk-blk1-link1: システム開発 */
.wk-blk1-link1:hover .wk-blk1-txt3:hover { background: rgba(204, 204, 204, 0); }

/* wk-blk1-box4: 2026.8.12 システム開発 補助金マッチングAIエ */
.wk-blk1-box4 { place-content: flex-start; align-items: flex-start; flex-flow: wrap; gap: 10px; margin: 0px 0px 50px; padding: 0px; width: 1280px; --gh-wk-blk1-box4: 10px; --gv-wk-blk1-box4: 10px; max-width: 100%; }
@media screen and (max-width: 1280px) { .wk-blk1-box4 { width: 1280px; --gh-wk-blk1-box4: 10px; --gv-wk-blk1-box4: 10px; } }
@media screen and (max-width: 760px) { .wk-blk1-box4 { width: auto; --gh-wk-blk1-box4: 10px; --gv-wk-blk1-box4: 10px; max-width: 100%; } }
@media screen and (max-width: 540px) { .wk-blk1-box4 { margin: 0px 0px 50px; --gh-wk-blk1-box4: 10px; --gv-wk-blk1-box4: 10px; } }

/* wk-blk1-link2: 2026.8.12 システム開発 補助金マッチングAIエ */
.wk-blk1-link2 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; margin: 0px 0px 30px; width: calc(25% - (var(--gh-wk-blk1-box4) * 0.75)); max-width: calc(25% - (var(--gh-wk-blk1-box4) * 0.75)); }
@media screen and (max-width: 760px) { .wk-blk1-link2 { flex-direction: column; overflow: hidden auto; width: calc(50% - (var(--gh-wk-blk1-box4) * 0.5)); max-width: calc(50% - (var(--gh-wk-blk1-box4) * 0.5)); } }
@media screen and (max-width: 540px) { .wk-blk1-link2 { margin: 0px 0px 30px; overflow: hidden auto; width: calc(100% - (var(--gh-wk-blk1-box4) * 0)); max-width: calc(100% - (var(--gh-wk-blk1-box4) * 0)); } }

/* wk-blk1-img1:  */
.wk-blk1-img1 { background: rgb(245, 245, 245); filter: grayscale(100%); height: auto; mix-blend-mode: normal; width: 100%; max-width: 100%; }
.wk-blk1-img1::before { background-repeat: no-repeat; background-size: 285px auto; }
.wk-blk1-img1:hover { filter: grayscale(0%); mix-blend-mode: normal; scale: 1; }
@media screen and (max-width: 760px) { .wk-blk1-img1 { height: auto; width: 100%; } }

/* wk-blk1-box5: 2026.8.12 システム開発 補助金マッチングAIエ */
.wk-blk1-box5 { align-content: flex-start; align-items: flex-start; margin: 0px; width: 100%; max-width: 100%; }
@media screen and (max-width: 760px) { .wk-blk1-box5 { margin: 0px; } }

/* wk-blk1-box6: 2026.8.12 システム開発 */
.wk-blk1-box6 { place-content: center flex-start; align-items: center; flex-flow: row; margin: 20px 0px 7px; padding: 0px; width: 181px; max-width: 100%; }

/* wk-blk1-txt4: 2026.8.12 */
.wk-blk1-txt4 { color: rgb(102, 102, 102); font-family: Poppins, sans-serif; font-size: 10px; font-weight: 400; height: 15px; margin: 0px 10px 0px 0px; max-width: calc(100% - 10px); }
@media screen and (max-width: 760px) { .wk-blk1-txt4 { font-size: 12px; } }

/* wk-blk1-txt5: システム開発 */
.wk-blk1-txt5 { background: rgb(245, 245, 245); color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 400; height: 15px; margin: 0px; padding: 10px; max-width: 100%; }
@media screen and (max-width: 760px) { .wk-blk1-txt5 { font-size: 10px; } }

/* wk-blk1-txt6: 補助金マッチングAIエージェント開発 */
.wk-blk1-txt6 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; margin: 0px 0px 10px; text-align: left; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 760px) { .wk-blk1-txt6 { font-size: 15px; } }
@media screen and (max-width: 540px) { .wk-blk1-txt6 { color: rgb(0, 0, 0); font-size: 15px; } }

/* wk-blk1-box7: Load more */
.wk-blk1-box7 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: column; height: auto; width: calc(100% - (var(--gh-wk-blk1-box4) * 0)); max-width: calc(100% - (var(--gh-wk-blk1-box4) * 0)); }

/* wk-blk1-btn1: Load more */
.wk-blk1-btn1 { background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; color: rgb(51, 51, 51); font-family: Poppins, sans-serif; font-size: 15px; font-weight: 400; height: auto; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 4px; opacity: 1; padding: 13px; text-align: left; width: 250px; max-width: calc(100% - 8px); --g-color-0: #f5f5f5ff; --g-position-0: 0%; --g-color-1: #ffffff; --g-position-1: 100%; --g-color-2: #ffffff; --g-position-2: 100%; --g-color-3: #ffffff; --g-position-3: 100%; --g-color-4: #ffffff; --g-position-4: 100%; --g-color-5: #ffffff; --g-position-5: 100%; --g-color-6: #ffffff; --g-position-6: 100%; --g-color-7: #ffffff; --g-position-7: 100%; --g-color-8: #ffffff; --g-position-8: 100%; --g-color-9: #ffffff; --g-position-9: 100%; --g-color-10: #ffffff; --g-position-10: 100%; --g-color-11: #ffffff; --g-position-11: 100%; --g-angle: 90deg; }
.wk-blk1-btn1:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px 0px inset; }

/* wk-blk1-txt7: Load more */
.wk-blk1-txt7 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 400; padding: 0px 0px 2px; text-align: center; justify-content: center; }

/* wk-blk1-link3: chevron_right TOPへ戻る */
.wk-blk1-link3 { place-content: center; align-items: center; background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); border-radius: 200px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; flex-flow: row; padding: 13px; width: 250px; max-width: 100%; --g-color-0: #f5f5f5; --g-position-0: 0%; --g-color-1: #ffffff; --g-position-1: 100%; --g-color-2: #ffffff; --g-position-2: 100%; --g-color-3: #ffffff; --g-position-3: 100%; --g-color-4: #ffffff; --g-position-4: 100%; --g-color-5: #ffffff; --g-position-5: 100%; --g-color-6: #ffffff; --g-position-6: 100%; --g-color-7: #ffffff; --g-position-7: 100%; --g-color-8: #ffffff; --g-position-8: 100%; --g-color-9: #ffffff; --g-position-9: 100%; --g-color-10: #ffffff; --g-position-10: 100%; --g-color-11: #ffffff; --g-position-11: 100%; --g-angle: 90deg; }
.wk-blk1-link3:hover { box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset; transition-duration: 500ms; transition-timing-function: ease; }

/* wk-blk1-icon1: chevron_right */
.wk-blk1-icon1 { color: rgb(51, 51, 51); font-size: 20px; margin: 0px; rotate: 180deg; max-width: 100%; }

/* wk-blk1-txt8: TOPへ戻る */
.wk-blk1-txt8 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 400; height: auto; line-height: 1.4; text-align: center; width: 185px; max-width: 100%; justify-content: center; }

/* Load more：最初は 8 件だけ見せ、ボタンで 8 件ずつ増やす（assets/js/site.js の data-load-more）。
   JS が動かない環境では全件表示される */
html.js [data-load-more] > a:nth-of-type(n+9):not(.shown) { display: none; }