@charset "UTF-8";:root{--bg-primary: #0d0d0d;--bg-secondary: #1f1f1f;--black-line: #383838;--black-weak: #494a3a;--gray: #656565;--text-secondary: #838383;--yellow-dark: #cac200;--yellow-normal: #fff73e;--yellow-light: #fff73e80;--yellow-weak: #fff73e1a;--green-dark: #2e8510;--green-normal: #68ff4f;--green-light: #3eff5d;--bage-dark: #7f7f5d;--bage-normal: #bebe92;--red-dark: #b73e42;--red: #ff575c;--red-weak: #d77d86;--blue: #6ad4f6;--blue-dark: rgba(56, 144, 170, 1);--txt-color: #fff;--link-color: var(--blue);--main-gradient: linear-gradient( 180deg, #ffea4f 0%, #fff73e 33.33%, #68ff4f 75%, #00e517 100% );--font: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-logo: "Righteous", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--z-gnav: 10000001;--z-play-queue: 10000002;--z-volume: 10000003;--z-play-area: 100000000;--z-over-wrap: 1000000000000;--root_dir: "../img";--radius-full: calc(infinity * 1px)}.top-projects-container{padding-bottom:2rem;background-color:#000}.top-projects-container .section-header{margin-bottom:1rem;text-align:center}.top-projects-container .section-header .title{margin:0;font-size:1.8rem;font-weight:700;color:var(--yellow-normal)}@media screen and (max-width: 1024px){.top-projects-container .section-header .title{font-size:2.2rem}}.top-projects-container .section-title{margin-bottom:2rem;font-size:1.8rem;font-weight:700;color:#fff;text-align:center}.top-projects-container .projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;padding:0 1rem;margin:0 auto}@media (max-width: 1024px){.top-projects-container .projects-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 767px){.top-projects-container .projects-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 432px){.top-projects-container .projects-grid{gap:.25rem}}@media (max-width: 360px){.top-projects-container .projects-grid{grid-template-columns:repeat(2,1fr);gap:.2rem}}.top-projects-container .projects-grid .project-card{display:flex;flex-direction:column;overflow:hidden;color:#fff;text-decoration:none;background:#1a1a1a;border:1px solid #333333;border-radius:12px;box-shadow:0 4px 8px #0003;transition:transform .2s;animation:fadeIn .6s ease-out}.top-projects-container .projects-grid .project-card.empty{pointer-events:none;background:#080808;border:none}@media screen and (max-width: 767px){.top-projects-container .projects-grid .project-card.empty{display:none}}.top-projects-container .projects-grid .project-card.empty .card-image,.top-projects-container .projects-grid .project-card.empty .project-details,.top-projects-container .projects-grid .project-card.empty .card-content{background-color:transparent}.top-projects-container .projects-grid .project-card:hover{box-shadow:0 10px 20px #0000004d;transition:all .3s cubic-bezier(.25,.8,.25,1);transform:translateY(-5px)}.top-projects-container .projects-grid .project-card:nth-child(1){animation-delay:.05s}.top-projects-container .projects-grid .project-card:nth-child(2){animation-delay:.1s}.top-projects-container .projects-grid .project-card:nth-child(3){animation-delay:.15s}.top-projects-container .projects-grid .project-card:nth-child(4){animation-delay:.2s}.top-projects-container .projects-grid .project-card:nth-child(5){animation-delay:.25s}.top-projects-container .projects-grid .project-card:nth-child(6){animation-delay:.3s}.top-projects-container .projects-grid .project-card:nth-child(7){animation-delay:.35s}.top-projects-container .projects-grid .project-card:nth-child(8){animation-delay:.4s}.top-projects-container .projects-grid .project-card:nth-child(9){animation-delay:.45s}.top-projects-container .projects-grid .project-card:nth-child(10){animation-delay:.5s}.top-projects-container .projects-grid .project-card:nth-child(11){animation-delay:.55s}.top-projects-container .projects-grid .project-card:nth-child(12){animation-delay:.6s}.top-projects-container .projects-grid .project-card .project-details{padding:.5rem 1rem;margin-top:auto;background-color:#181818;border-top:1px solid #333333}@media screen and (max-width: 767px){.top-projects-container .projects-grid .project-card .project-details{padding-top:.25rem}}.top-projects-container .projects-grid .project-card .project-details .project-date{display:block;font-size:.9rem;color:#fff;text-align:left}.top-projects-container .projects-grid .project-card .card-image{width:100%;aspect-ratio:16/9;overflow:hidden;background-color:#fff}.top-projects-container .projects-grid .project-card .card-image img{width:100%;height:100%;object-fit:contain}.top-projects-container .projects-grid .project-card .card-content{display:flex;flex-direction:column;justify-content:end;padding:.5rem 1rem;background-color:#1a1a1a}@media screen and (max-width: 767px){.top-projects-container .projects-grid .project-card .card-content{padding-bottom:.25rem}}.top-projects-container .projects-grid .project-card .card-content .project-tags{display:flex;flex-wrap:nowrap;gap:.5rem;min-height:1.7rem;padding:.5rem 0;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}.top-projects-container .projects-grid .project-card .card-content .project-tags::-webkit-scrollbar{height:4px}.top-projects-container .projects-grid .project-card .card-content .project-tags::-webkit-scrollbar-thumb{background-color:#444;border-radius:4px}.top-projects-container .projects-grid .project-card .card-content .project-tags span{flex-shrink:0;padding:.2rem .5rem;font-size:.8rem;font-weight:600;background-color:#333;border-radius:.2rem}@media screen and (max-width: 767px){.top-projects-container .projects-grid .project-card .card-content .project-tags span{padding:.1rem .3rem;font-size:.7rem}}.top-projects-container .projects-grid .project-card .card-content .project-excerpt{display:-webkit-box;margin-top:auto;overflow:hidden;font-size:1rem;font-weight:700;color:#fff;text-align:left;text-overflow:ellipsis;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media screen and (max-width: 767px){.top-projects-container .projects-grid .project-card .card-content .project-excerpt{font-size:.8rem}}.top-projects-container .projects-grid .project-card:nth-child(n+9){display:none}@media (max-width: 1200px){.top-projects-container .projects-grid .project-card{flex:0 0 calc(25% - 10px)}}@media (max-width: 1024px){.top-projects-container .projects-grid .project-card{flex:0 0 calc(33% - 10px)}.top-projects-container .projects-grid .project-card:nth-child(n+7){display:none}}@media (max-width: 767px){.top-projects-container .projects-grid .project-card{flex:0 0 calc(50% - 10px)}.top-projects-container .projects-grid .project-card:nth-child(n+5){display:none}}.top-projects-container .error-message{color:red;text-align:center}.top-projects-container .default-button{display:inline-block;margin-top:2rem;font-size:1rem;font-weight:700;color:#000;text-decoration:none;border-radius:25px;transition:background-color .2s}.top-projects-container .default-button:hover{background-color:#ffed4a}.projects-page .top-projects-container .projects-grid{height:auto;max-height:none}.projects-page .top-projects-container .projects-grid .project-card{display:flex}@media screen and (max-width: 767px){.top-projects-container .projects-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}}@media (max-width: 432px){.top-projects-container .projects-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.25rem}}@media (max-width: 360px){.top-projects-container .projects-grid{grid-template-columns:repeat(2,1fr);gap:.2rem;padding:0 .5rem}.top-projects-container .projects-grid .project-card .card-content{padding:.3rem .5rem}.top-projects-container .projects-grid .project-card .card-content .project-tags{gap:.3rem;padding:.3rem 0}.top-projects-container .projects-grid .project-card .card-content .project-tags span{padding:.1rem .2rem;font-size:.6rem}.top-projects-container .projects-grid .project-card .card-content .project-excerpt{font-size:.8rem}.top-projects-container .projects-grid .project-card .project-details{padding:.3rem .5rem}.top-projects-container .projects-grid .project-card .project-details .project-date{font-size:.7rem}}.skeleton{transition:opacity .3s ease-out;animation:none!important}.skeleton .skeleton-image{height:180px;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s infinite}.skeleton .skeleton-tag{display:inline-block;width:60px;height:24px;margin-right:8px;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton .skeleton-text{width:80%;height:20px;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}.skeleton .skeleton-date{display:block;width:120px;height:16px;background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a,#1a1a1a 75%);background-size:200% 100%;border-radius:4px;animation:shimmer 1.5s infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.content-loaded{animation:scaleIn .4s ease-out forwards}