body{font-family:comfortaa;background-color:#f7f2ec;background-image:url(/assets/bedge-grunge-CkfpSDfr.png);color:#564336;margin:0;padding:0}h2{text-align:left;font-size:2rem}.richtext p{margin-bottom:12px;line-height:1.8}.section-line{width:100%;height:2px;background-color:#bc3b45;margin-bottom:50px;transition:width 1s ease-out}.section-line.active{width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background-color:transparent;position:fixed;width:100%;top:0;left:0;box-sizing:border-box;z-index:2000}.header.scrolled{background:#d7cfc8cc;box-shadow:0 2px 6px #0000001a}.logo{position:relative;display:inline-block}.logo img{height:20px}.hamburger-container{display:flex;top:20px;right:20px;width:30px;height:30px;justify-content:center;align-items:center;cursor:pointer;z-index:1000}.hamburger{display:flex;flex-direction:column;gap:5px;width:30px;height:22px;position:relative;cursor:pointer;z-index:2001}.hamburger span{display:block;position:absolute;width:100%;height:3px;background:#564336;border-radius:3px;opacity:1;left:0;transform:rotate(0);transition:all .3s ease-in-out}.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:9px}.hamburger span:nth-child(3){top:18px}.hamburger.active span:nth-child(1){top:9px;transform:rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){top:9px;transform:rotate(-45deg)}.nav{display:flex;position:fixed;top:0;right:0;width:33%;height:100svh;background:#d7cfc8cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);flex-direction:column;justify-content:center;align-items:center;transform:translate(100%);transition:.4s ease;z-index:1000;overflow:hidden}.nav.active{transform:translate(0);position:fixed;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.nav ul{list-style:none;text-align:left;padding:0;margin:0}.nav li{margin:20px 0}#nav ul li{opacity:0;transform:translate(50px);transition:transform .5s ease,opacity .5s ease}.nav a{display:flex;align-items:center;gap:12px;color:#564336;font-size:20px;text-decoration:none;transition:.2s}.nav a:hover{transform:translate(5px);opacity:.8}.nav i{font-size:18px;color:#564336;width:30px;text-align:center}.menu-accent{color:#bc3b45;font-weight:600}.copyright{position:absolute;bottom:20px;font-size:12px;color:#564336;opacity:.8}.btn{position:relative;overflow:hidden;display:inline-block;background:#bc3b45;color:#f7f2ec;padding:20px 70px;margin-top:clamp(8px,3vw,16px);margin-bottom:clamp(12px,4vw,24px);border-radius:30px;box-shadow:2px 3px #67524933;text-decoration:none;transition:all .4s ease}.btn:before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:#ffffff4d;transform:skew(-25deg);transition:.6s}.btn:hover:before{left:130%}.btn:hover{transform:translateY(-3px);box-shadow:4px 6px #67524940}.btn:active{transform:translateY(1px);box-shadow:1px 2px #67524926;background:#a9373f;transition:all .1s ease}.home{min-height:100svh;display:block}.intro{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(24px,6vw,48px);box-sizing:border-box;position:relative}.intro{padding-top:clamp(80px,12svh,120px)}.home .hello{font-size:clamp(.9rem,3.5vw,1rem);letter-spacing:.08em}.home h1{font-size:clamp(2.2rem,9vw,3.5rem);line-height:1.1}.home .highlight{color:#bc3b45}.home .sub{max-width:420px;font-size:clamp(.9rem,3.8vw,1rem);line-height:1.6}.illustration{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;justify-content:center;width:100%;pointer-events:none}.illustration img{max-height:min(40svh,280px);width:auto;max-width:100%;display:block}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hello,.home h1,.sub,.btn{opacity:0;animation:fadeUp 1s ease forwards}.hello{animation-delay:.2s}.home h1{animation-delay:.5s}.sub{animation-delay:.8s}.btn{animation-delay:1.1s}.works{padding:80px 100px}.works h2{text-align:left;font-size:2rem;margin-bottom:30px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:1100;margin:0 auto}.work-item{text-decoration:none;color:inherit;text-align:left}.work-item p{font-family:Zen Maru Gothic;margin-top:8px;font-weight:500;line-height:1.6}.thumb{width:100%;aspect-ratio:4 / 3;background:#c0bab5;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.thumb img{width:100%;height:100%;object-fit:cover}.image-box{width:100%;aspect-ratio:16 / 9;background:#c0bab5;border-radius:12px;overflow:hidden}.image-box img{width:100%;height:100%;object-fit:cover}.tag{background:#bc3b45;color:#fff;border-radius:20px;padding:2px 12px;font-size:.8rem;margin-top:0;display:inline-block}.work-skeleton{display:flex;flex-direction:column;gap:10px}.work-skeleton .thumb{height:200px}.work-skeleton .line{height:14px;width:90%}.work-skeleton .line.short{width:60%}.work-item{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.work-item.show{opacity:1;transform:translateY(0)}.work-item{transition:transform .35s ease,box-shadow .35s ease}.work-item:hover{transform:translateY(-6px)}.work-item .thumb{transition:transform .5s ease,box-shadow .5s ease}.work-item:hover .thumb{transform:scale(1.05);box-shadow:0 12px 30px #00000026}.thumb{overflow:hidden}.tag{transition:background .3s ease,transform .3s ease}.work-item:hover .tag{background:#e05b5b}.thumb{position:relative}.project-type-badge{position:absolute;top:12px;left:12px;padding:6px 14px;border-radius:999px;font-size:11px;letter-spacing:.08em;font-family:Zen Maru Gothic;text-transform:uppercase;background:#ffffffe6;color:#564336;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 4px 12px #00000014;transition:transform .3s ease,opacity .3s ease}.work-item:hover .project-type-badge{transform:translateY(-2px)}.work-detail{padding:80px 100px;font-family:zen maru gothic;font-weight:lighter}.project-type-detail{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#bc3b45;margin-bottom:12px;font-family:Zen Maru Gothic}.detail-header{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}.detail-body{margin-top:60px;max-width:100%}.detail-body .info p{display:grid;margin-bottom:16px}.detail-body .info span{display:block}.detail-body img{max-width:100%;height:auto;display:block;margin:24px 0}.detail-section{margin-bottom:40px}.detail-section h3{margin-bottom:12px;font-size:1rem}.gallery-section{margin-bottom:100px}.gallery-section h3{font-size:1rem;margin-bottom:24px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0 60px}.gallery-item[data-category=web]{grid-column:span 2}.gallery-item[data-category=illustration]{grid-column:span 4}.gallery-item[data-category=banner]{grid-column:span 2}.gallery-item[data-category=logo],.gallery-item[data-category=poster]{grid-column:span 4}.gallery-grid.is-sp{grid-template-columns:repeat(4,1fr);padding:0 60px}.gallery-item{overflow:visible;background:none}.gallery-item img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block;transition:transform .4s ease}.gallery-item{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.gallery-item.is-visible{opacity:1;transform:translateY(0)}.detail-header,.detail-body,.detail-gallery{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.detail-body{transition-delay:.15s}.detail-gallery{transition-delay:.3s}.detail-header.is-visible,.detail-body.is-visible,.detail-gallery.is-visible{opacity:1;transform:translateY(0)}.back-btn-area{text-align:center;margin-top:60px}.skeleton{position:relative;overflow:hidden;background:#e2ddd8;border-radius:6px}.skeleton:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{to{transform:translate(100%)}}.skeleton-title{height:32px;width:70%;margin-bottom:20px}.skeleton-line{height:14px;margin:10px 0}.skeleton-image{height:220px;border-radius:12px}.profile{padding:80px 100px}.profile-container{display:flex;align-items:center;gap:60px;max-width:900px;margin:0 auto}.profile-img img{width:180px;height:auto}.profile-text{max-width:600px;line-height:1.9}.profile-text h3{font-size:1.2rem;margin-bottom:10px}.profile-text .jp-name{color:#c3463a;margin-left:6px;font-family:zen maru gothic;white-space:nowrap}.profile-text p{font-family:zen maru gothic}.skill-container{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:900px;margin:0 auto 60px}.skill-card{background-color:#d7cfc899;border-left:10px solid #c3463a;border-radius:0 40px 40px 0;padding:20px;max-width:250px;min-width:180px;text-align:center}.skill-card h3{font-size:1.1rem;margin-bottom:10px;font-family:zen maru gothic}.skill-card p{font-family:zen maru gothic;text-align:left}.skill-card .tags{color:#c3463a;font-size:.85rem;margin-top:10px}.likes-container{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:900px;margin:0 auto;text-align:center}.like-item{max-width:240px;margin:0 auto}.like-item h3{margin-bottom:12px;font-family:zen maru gothic}.like-item p{font-family:zen maru gothic}.like-icon{width:120px;height:120px;background-color:#c2b8b2;border-radius:50%;margin:0 auto 20px}.like-circle{width:180px;height:180px;margin:0 auto 24px;background:#d7cfc899;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}.like-circle img{width:50%;height:50%;object-fit:contain;transition:transform .4s ease}.like-item:hover .like-circle{transform:translateY(-6px);box-shadow:0 12px 30px #0000001f}.like-item:hover .like-circle img{transform:scale(1.05)}footer{background:#d8d2cc;text-align:center;padding:40px 20px}.footer-logo{height:30px}.footer-nav{margin:30px 0}.footer-nav a{color:#4a2f25;margin:0 12px;text-decoration:none;font-size:.9rem}.copy{font-size:.7rem;color:#6d5b50}.footer-logo-link{display:inline-block}.footer-logo{height:30px;transition:opacity .3s ease,transform .3s ease}.footer-logo-link:hover .footer-logo{opacity:.75;transform:translateY(-2px)}.footer-nav a{position:relative;color:#4a2f25;margin:0 12px;text-decoration:none;font-size:.9rem;padding-bottom:4px;transition:color .3s ease,transform .3s ease}.footer-nav a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#bc3b45;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.footer-nav a:hover{color:#bc3b45;transform:translateY(-2px)}.footer-nav a:hover:after{transform:scaleX(1)}@media(max-width:1024px){.nav{width:100%;background:#d7cfc8cc}.intro{justify-content:flex-start;padding-top:clamp(120px,18vh,180px)}.illustration img{max-height:30svh}.nav a{font-size:22px}.work-grid{grid-template-columns:repeat(2,1fr);gap:40px}.gallery-grid{grid-template-columns:repeat(3,1fr);padding:0}.detail-header{grid-template-columns:1fr;gap:32px}.detail-body{margin-top:40px}}@media(max-width:768px){.intro{justify-content:flex-start;padding-top:min(20svh,180px)}.illustration img{max-height:30svh}.works{padding:80px 40px}.works h2{font-size:1.6rem}.work-grid{grid-template-columns:1fr;gap:32px}.work-item{max-width:420px;margin:0 auto}.tag{font-size:.75rem}.gallery-grid.is-sp{grid-template-columns:1fr;padding:0}.gallery-section{margin-bottom:64px}.gallery-section h3{font-size:1rem;margin-bottom:16px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px;padding:0}.project-type-badge{font-size:10px;padding:5px 12px;top:10px;left:10px}.work-detail{padding:80px 40px}.project-type-detail{font-size:11px;margin-bottom:10px}.detail-title h2{font-size:1.5rem;line-height:1.4}.detail-image .image-box{border-radius:10px}.detail-body{font-size:.95rem}.detail-body .info p{margin-bottom:12px}.back-btn-area{margin-top:48px}.profile-container{flex-direction:column;text-align:center;gap:40px}.profile-img img{margin:0 auto}.profile{padding:80px 40px}.profile h2{font-size:1.6rem}.profile-text h3{display:flex;flex-direction:column;align-items:center}.profile-text .jp-name{margin-left:0;margin-top:4px}.skill-container{grid-template-columns:1fr;gap:24px;justify-items:center}.likes-container{grid-template-columns:1fr;gap:40px}}@media(max-width:390px){.intro{padding-top:min(40svh,150px)}.illustration img{max-height:30svh}}@media(min-width:1025px){.intro{justify-content:flex-start;padding-top:clamp(120px,18vh,180px)}.illustration img{max-height:28svh;max-width:320px}.btn{margin-bottom:48px}}
