:root{--bg-main:#ffffff;--bg-alt:#f8f8f8;--bg-card:#ffffff;--text-main:#161209;--text-muted:#a9a9b3;--accent-color:#2d96bd;--border-color:#f0f0f0;--border-strong:#e0e0e0}@media(prefers-color-scheme:dark){:root:not([theme=light]){--bg-main:#292a2d;--bg-alt:#252627;--bg-card:#272c34;--text-main:#f0f0f0;--text-muted:#999999;--accent-color:#55bde2;--border-color:#363636;--border-strong:#444444}}[theme=dark]{--bg-main:#292a2d;--bg-alt:#252627;--bg-card:#272c34;--text-main:#f0f0f0;--text-muted:#999999;--accent-color:#55bde2;--border-color:#363636;--border-strong:#444444}.portfolio-index{color:var(--text-main);padding:0;font-size:.85rem;line-height:1.35}.translation-btn{transition:all .3s ease}.translation-btn:hover{text-shadow:0 0 10px var(--accent-color,#2d96bd),0 0 20px var(--accent-color,#2d96bd);color:var(--accent-color,#2d96bd) !important}.koiwai-footer{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.5rem 1rem;text-align:center;font-size:.9rem;color:var(--text-muted,#a9a9b3);border-top:1px solid rgba(150,150,150,.15)}.koiwai-footer-copy{font-weight:500}.koiwai-footer-desc{font-size:.82rem;opacity:.75}.hero-section{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 2rem 1rem;text-align:center}.hero-contact{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-top:.8rem;font-size:.75rem;color:var(--text-muted)}.contact-item{display:flex;align-items:center;gap:.4rem}.contact-item i{color:var(--accent-color);font-size:.7rem}.roulette-wrapper{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-content-row{display:flex;justify-content:center;align-items:center;width:100%;max-width:1000px;position:relative;z-index:10;min-height:400px}.social-side-links{display:flex;flex-direction:column;gap:1.5rem}.social-side-links.left-links{position:absolute;left:0;top:50%;transform:translateY(calc(-50% - 36px));align-items:flex-start;z-index:20}.social-side-links.right-links{align-items:flex-start}.social-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--bg-card);color:var(--text-main);font-size:1.5rem;border:2px solid var(--border-color);box-shadow:0 4px 10px rgba(0,0,0,5%);transition:all .3s cubic-bezier(.175,.885,.32,1.275);text-decoration:none}.social-icon:hover{transform:translateY(-5px)scale(1.1);color:#fff;background:var(--accent-color);border-color:var(--accent-color);box-shadow:0 8px 20px rgba(0,0,0,.15)}@media(max-width:768px){.hero-content-row{flex-direction:column;gap:2rem}.social-side-links{flex-direction:row;justify-content:center;width:100%}.social-side-links.left-links,.social-side-links.right-links{align-items:center;position:static;transform:none}.left-links{order:1;margin-bottom:1rem}.roulette-wrapper{order:2;margin-top:.5rem}.right-links{order:3;margin-top:-1rem}}.click-here-pop{position:absolute;top:-32px;right:-55px;background-color:var(--accent-color);color:#fff;padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:700;pointer-events:none;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.15);animation:bouncePopup 1.5s infinite ease-in-out;z-index:10;opacity:.95}.click-here-pop::after{content:'';position:absolute;bottom:-5px;left:12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--accent-color)}@keyframes bouncePopup{0%,100%{transform:translateY(0)rotate(5deg)}50%{transform:translateY(-5px)rotate(8deg)}}.roulette-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--border-color);background:var(--bg-card);color:var(--accent-color);font-size:1rem;cursor:pointer;margin-top:.8rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 2px 8px rgba(0,0,0,8%);z-index:5}.roulette-btn:hover{transform:scale(1.15);background:var(--accent-color);color:#fff;border-color:var(--accent-color);box-shadow:0 4px 15px rgba(45,150,189,.3)}:root{--roulette-img-size:min(300px, 75vw)}.roulette-container{width:700px;max-width:95vw;height:var(--roulette-img-size);overflow:hidden;border-radius:8px;border:none;box-shadow:none;margin-bottom:1rem;position:relative;background:0 0;z-index:2;--track-offset:calc((100% - var(--roulette-img-size)) / 2);-webkit-mask-image:linear-gradient(to right,transparent 0%,black calc(50% - var(--roulette-img-size)/2 + 20px),black calc(50% + var(--roulette-img-size)/2 - 20px),transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black calc(50% - var(--roulette-img-size)/2 + 20px),black calc(50% + var(--roulette-img-size)/2 - 20px),transparent 100%)}.roulette-container::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--roulette-img-size);height:var(--roulette-img-size);border:3px solid rgba(255,255,255,.2);border-radius:8px;pointer-events:none;z-index:15;box-shadow:0 0 30px rgba(0,0,0,.1)}.roulette-container::after{display:none}.speech-bubble{position:absolute;left:50%;top:-25px;transform:translateY(20px)translateX(-50%);background:var(--bg-main);color:var(--text-main);padding:.4rem 1rem;border-radius:8px;font-weight:600;font-size:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap;max-width:350px;z-index:10;border:1px solid var(--border-color)}.speech-bubble.show{opacity:1;transform:translateY(0)translateX(-50%)}.speech-bubble::before{content:'';position:absolute;right:auto;left:50%;top:100%;transform:translateX(-50%);border-top:10px solid var(--bg-main);border-bottom:none;border-right:12px solid transparent;border-left:12px solid transparent}.roulette-track{display:flex;flex-direction:row}.roulette-track.is-spinning{animation:scrollHorizontal 3s linear infinite}.roulette-track img{width:var(--roulette-img-size);min-width:var(--roulette-img-size);height:var(--roulette-img-size);object-fit:cover;transition:width .3s ease,height .3s ease}@keyframes scrollHorizontal{0%{transform:translateX(var(--track-offset,0px))}100%{transform:translateX(calc(var(--track-offset,0px) - var(--roulette-img-size) * var(--img-count)))}}.hero-title{font-size:1.8rem;font-weight:700;margin-bottom:.3rem;color:var(--text-main);line-height:1.2}.hero-welcome{color:var(--text-main);font-size:1.05rem;max-width:600px;margin:0 auto;line-height:1.6}.hero-contact{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;color:var(--text-muted)}.contact-item{display:flex;align-items:center;gap:.5rem}.contact-item i{color:var(--accent-color);font-size:.85rem}.timeline-section{padding:2rem 1rem;max-width:700px;margin:0 auto}.section-title{text-align:center;font-size:1.05rem;font-weight:700;margin-bottom:1.5rem;color:var(--text-main);border-bottom:2px solid var(--accent-color);display:inline-block;padding-bottom:.3rem;letter-spacing:.5px;text-transform:uppercase}.section-title-wrap{text-align:center}.timeline{position:relative}.timeline::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--border-strong);transform:translateX(-50%)}.timeline-item{position:relative;width:50%;padding:.35rem 1.2rem;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4rem}.timeline-item.left{left:0;text-align:left;justify-content:flex-start;padding-left:2rem;padding-right:1.2rem}.timeline-item.right{left:50%;text-align:left;justify-content:flex-start}.timeline-item.right .timeline-year{font-size:.75rem}.timeline-item.right .timeline-title{font-size:.82rem}.timeline-item.right .timeline-desc{font-size:.72rem}.timeline-item::after{content:'';position:absolute;top:.55rem;width:8px;height:8px;background:var(--accent-color);border:none;border-radius:50%;z-index:1}.timeline-item.left::after{right:-5.5px;width:10px;height:10px}.timeline-item.right::after{left:-3px;width:6px;height:6px}.timeline-item.future{opacity:.4}.timeline-item.future::after{background:0 0;border:2px solid var(--accent-color);width:6px;height:6px}.timeline-year{color:var(--accent-color);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums;flex-shrink:0}.timeline-title{color:var(--text-main);font-size:.95rem;font-weight:600;flex-shrink:0}.timeline-desc{color:var(--text-muted);font-size:.8rem;line-height:1.3;width:100%}.archive-section{padding:2rem 1rem;background:var(--bg-alt)}.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:0 auto}.archive-card{background:var(--bg-card);border-radius:8px;padding:.8rem 1rem;border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0,0,0,3%)}.archive-card h3{color:var(--text-main);margin-top:0;margin-bottom:.4rem;font-size:1.05rem;border-bottom:1px solid var(--border-color);padding-bottom:.3rem;display:flex;align-items:center;gap:.3rem}.archive-list{list-style:none;padding:0;margin:0}.archive-list li{margin-bottom:.3rem;padding-bottom:.3rem;border-bottom:1px solid var(--border-color)}.archive-list li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.archive-title{color:var(--text-main);font-weight:600;font-size:.9rem;display:block;margin-bottom:.1rem}.archive-desc{color:var(--text-muted);font-size:.82rem;line-height:1.3}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.gallery-img-container{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px}.gallery-img-container img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.gallery-img-container:hover img{transform:scale(1.1)}@media(max-width:768px){.roulette-container{width:100%;max-width:90vw;--track-offset:calc((90vw - 300px) / 2);transform:scale(.9);margin-bottom:0}.roulette-container::before{width:var(--roulette-img-size);height:var(--roulette-img-size)}.roulette-btn{width:38px;height:38px;font-size:.85rem}.speech-bubble{left:50%;top:-30px;transform:translateY(20px)translateX(-50%);z-index:20}.speech-bubble.show{transform:translateY(0)translateX(-50%)}.speech-bubble::before{right:auto;left:50%;top:100%;transform:translateX(-50%);border-top:10px solid var(--bg-main);border-bottom:none;border-right:12px solid transparent;border-left:12px solid transparent}.timeline::before{left:12px}.timeline-item{width:100%;padding-left:28px;padding-right:0;justify-content:flex-start}.timeline-item.left,.timeline-item.right{left:0;text-align:left}.timeline-item.left::after,.timeline-item.right::after{left:8px}.archive-grid{grid-template-columns:1fr}}