@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap";
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}.collapse{visibility:collapse}.visible{visibility:visible}.flex{display:flex}.grid{display:grid}.inline-block{display:inline-block}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}body,html{color:#4a5759;scroll-behavior:smooth;background:0 0;min-height:100vh;margin:0;padding:0;font-family:Noto Serif JP,Times New Roman,serif;line-height:1.6;position:relative}body:before{content:"";z-index:-1;opacity:0;filter:brightness(1.1)saturate(.8);background:url(/bg.webp) 50%/cover no-repeat;width:100%;height:100%;transition:opacity 1.5s;position:fixed;top:0;left:0}body.loaded:before{opacity:1}body.scrolled:before{opacity:.4}@keyframes fadeInBackground{0%{opacity:0}to{opacity:.15}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.App{position:relative;overflow-x:hidden}.hero{opacity:1;background-position:50%;background-size:cover;height:clamp(160px,28vh,280px);transition:opacity .8s;position:relative}.hero.scrolled{opacity:.4}.hero.visible{opacity:1}.section{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none;background-color:#ffffffd9;border-radius:0;width:calc(100% - 2cm);max-width:none;margin:56px auto;padding:56px 28px;transition:none}#about-section{margin:24px auto 0;padding:40px 20px}.projects{text-align:left;margin:2rem 0;padding:0;list-style:none}.projects li{margin-bottom:1.5rem;padding-left:1.5rem;position:relative}.projects li strong{color:#4a5759;margin-bottom:.5rem;display:block}.note-section{text-align:left}.note-header{align-items:center;gap:18px;margin-bottom:24px;display:flex}.note-header-text h2{margin:0}.note-profile{background:#fff;border:1px solid #4a575933;border-radius:50%;flex:none;width:56px;height:56px;transition:transform .2s;display:inline-flex;overflow:hidden}.note-profile img{object-fit:cover;width:100%;height:100%;display:block}.note-profile:hover{transform:translateY(-2px)}.note-subtitle{color:#5a6c7d;margin:8px 0 0;font-size:.95rem}.note-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;display:grid}.note-card{color:#2c3e50;opacity:0;background:#ffffffe6;border:1px solid #4a575926;border-radius:0;flex-direction:column;gap:8px;min-width:0;padding:14px;text-decoration:none;transition:opacity .5s,transform .5s;display:flex;transform:translateY(10px)}.note-thumb{aspect-ratio:16/9;background:#4a57590f;width:100%;overflow:hidden}.note-thumb img{object-fit:cover;width:100%;height:100%;display:block}.note-card.visible{opacity:1;transform:translateY(0)}.note-title{font-weight:700;line-height:1.4}.note-date{color:#6a7a8a;font-size:.85rem}.note-empty{color:#5a6c7d;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;display:flex}.note-hint{color:#8a9aa8;margin-top:12px;font-size:.85rem}.company-blog-block{border-top:1px solid #4a57591f;margin-top:32px;padding-top:28px}.company-blog-header{margin-bottom:18px}.company-blog-header h3{color:#2c3e50;margin:0;font-size:1.2rem}.company-blog-subtitle{color:#5a6c7d;margin:8px 0 0;font-size:.95rem;line-height:1.6}.company-blog-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;display:grid}.company-blog-card{color:#2c3e50;opacity:0;background:linear-gradient(#ffffffeb,#f4f7f8f5);border:1px solid #4a575926;flex-direction:column;gap:8px;min-width:0;padding:0 0 14px;text-decoration:none;transition:opacity .5s,transform .5s,border-color .2s;display:flex;transform:translateY(10px)}.company-blog-thumb{aspect-ratio:16/9;background:#4a57590f;width:100%;overflow:hidden}.company-blog-thumb img{object-fit:cover;width:100%;height:100%;display:block}.company-blog-card.visible{opacity:1;transform:translateY(0)}.company-blog-card:hover{border-color:#4a575947}.company-blog-domain{letter-spacing:.08em;text-transform:uppercase;color:#7b8b97;padding:0 14px;font-size:.78rem}.company-blog-title{color:#2c3e50;padding:0 14px;font-weight:700;line-height:1.45}.company-blog-cta{color:#4a5759;margin-top:auto;padding:0 14px;font-size:.88rem}@media (max-width:720px){.note-header{flex-direction:column;align-items:flex-start}.note-grid,.company-blog-grid{grid-template-columns:1fr}.note-empty{flex-direction:column;align-items:flex-start}}@media (min-width:721px) and (max-width:980px){.note-grid,.company-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}h1,h2,h3,h4,h5,h6{color:#4a5759;letter-spacing:-.025em;margin-bottom:1rem;font-weight:600;line-height:1.2}p{color:#4a5759;margin-bottom:1.5rem;font-size:1.125rem}.reveal{opacity:0;transition:all 1.2s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;transform:translateY(40px)}.reveal.visible{opacity:1;overflow:visible;transform:translateY(0)}a{color:#4299e1;text-decoration:none;transition:color .2s}a:hover{color:#2b6cb0}.footer{text-align:center;color:#4a5759;margin-top:4rem;padding:2rem 1rem;font-size:.9rem}.project-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:2rem;display:grid}.project-card{text-align:left;cursor:pointer;background:#f1f1f1;flex-direction:column;padding:0;transition:background .3s;display:flex;overflow:hidden}.project-image{background-color:#fff;border-radius:6px;justify-content:center;align-items:center;width:calc(100% - 2rem);height:180px;margin:1rem auto .5rem;display:flex}.project-title{color:#4a5759;justify-content:space-between;align-items:center;padding:1rem;font-size:1.1rem;font-weight:700;display:flex}.project-body{padding:0 1rem 1rem;transition:max-height .4s;overflow:hidden}.project-description{color:#4a5759;font-size:.95rem}.store-button{color:#fff;background-color:#4a5759;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:.9rem;font-weight:500;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s;display:inline-flex}.store-button--active:hover{color:#4a5759;background-color:#fff;border-color:#4a5759}.store-button--disabled{color:#6b7280;pointer-events:none;opacity:.8;background-color:#e5e7eb}.mobile-icons{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.mobile-icon{object-fit:cover;background:linear-gradient(145deg,#fff,#e6e6e6);border-radius:24px;width:120px;height:120px;transition:transform .25s}.mobile-icon:hover{transform:translateY(-6px)}.contact-info{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.contact-item{color:#4a5759;align-items:center;gap:.5rem;font-size:1rem;display:flex}.skills-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:2rem;max-width:1180px;margin:1rem auto 0;display:grid}.skill-category{flex-direction:column;align-items:center;min-width:0;margin-bottom:2rem;display:flex}.skill-title-wrapper{margin-bottom:1.5rem;display:inline-block;position:relative}.skill-title{text-align:center;color:#fff;background-position:0%;background-size:300% 300%;border-radius:2rem;width:200px;padding:.75rem 1.5rem;font-size:1.2rem;position:relative}.skill-color-0{background-color:#b0c4b1}.skill-color-1{background-color:#edafb8}.skill-color-2{background-color:#a2d2ff}.skill-color-3{background-color:#cdb4db}.read-more-btn{color:#fff;opacity:0;z-index:2;pointer-events:auto;background-color:#4a5759;border:none;border-radius:999px;padding:.25rem .6rem;font-size:.7rem;text-decoration:none;transition:all .3s;position:absolute;bottom:-10px;right:-10px;transform:translateY(5px)}.skill-title-wrapper.visible .read-more-btn{animation:.6s forwards fadeInReadMore}.read-more-btn:hover{color:#4a5759;background-color:#fff}@keyframes fadeInReadMore{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.skill-items{flex-direction:column;gap:.5rem;width:100%;display:flex}.skill-item{color:#4a5759;opacity:0;overflow-wrap:anywhere;font-size:12px;animation:.6s forwards fadeInUp;transform:translateY(10px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.hero{height:clamp(120px,24vh,220px)}.skills-grid{grid-template-columns:1fr}.section{width:calc(100% - 1.5rem);margin:28px auto;padding:40px 18px}p{font-size:1rem}.projects li{padding-left:1rem}body:before{opacity:1;z-index:-1;pointer-events:none;background-attachment:scroll;position:fixed}}@media (min-width:769px) and (max-width:1040px){.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.about-content{text-align:left;color:#4a5759;grid-template-columns:minmax(220px,320px) minmax(0,1fr);justify-content:center;align-items:center;gap:34px;max-width:980px;margin:0 auto;display:grid}.about-profile{text-align:center;flex-direction:column;align-items:center;display:flex}.about-details{flex-direction:column;gap:26px;width:100%;display:flex}.about-name{margin:0 0 10px}.about-copy{max-width:680px;font-size:.75rem}.about-timeline{text-align:left;--timeline-gap:18px;--timeline-marker-size:20px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:18px;width:100%;margin-top:0;padding-top:28px;display:grid}.about-timeline-item{opacity:0;text-align:center;flex-direction:column;align-items:center;padding:0 16px 0 0;transition:opacity .65s,transform .65s;display:flex;position:relative;transform:translateY(22px)}.about-timeline-item:before{content:"";top:calc(var(--timeline-marker-size)/2);left:50%;right:calc(-50% - var(--timeline-gap));transform-origin:0;opacity:0;background:linear-gradient(90deg,#4a57592e,#4a575966);height:1px;transition:opacity .8s,transform .8s;position:absolute;transform:scaleX(0)}.about-timeline.visible .about-timeline-item{opacity:1;transform:translateY(0)}.about-timeline.visible .about-timeline-item:before{opacity:1;transform:scaleX(1)}.about-timeline-item:last-child:before{display:none}.about-timeline-marker{width:var(--timeline-marker-size);height:var(--timeline-marker-size);box-sizing:border-box;z-index:1;background:#4a5759;border:4px solid #fffffff2;border-radius:999px;margin-bottom:16px;position:relative;box-shadow:0 0 0 1px #4a57592e}.about-timeline-year{letter-spacing:.04em;color:#2c3e50;margin-bottom:8px;font-size:1rem;font-weight:700}.about-timeline-text{color:#5a6c7d;max-width:18ch;margin:0;font-size:.64rem;line-height:1.7}.carousel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:560px;margin:0 auto;display:grid}.carousel-block{aspect-ratio:16/9;background:#4a57590f;border-radius:4px;width:100%;position:relative;overflow:hidden;box-shadow:0 4px 12px #2c3e5024}.carousel-image{object-fit:cover;opacity:1;width:100%;height:100%;transition:opacity .7s;display:block;position:absolute;inset:0}.carousel-image.is-fading{opacity:0}@media (max-width:640px){.carousel-grid{grid-template-columns:minmax(0,1fr);gap:14px;max-width:340px}}.about-image{object-fit:cover;opacity:0;border-radius:50%;width:180px;height:180px;margin-bottom:16px;transition:opacity 1.2s,transform 3s;transform:scale(1)}.about-image.animate{opacity:1;transform:scale(1.07)}@media (max-width:900px){.about-content{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.about-details{align-items:center}.about-timeline{--timeline-gap:20px;grid-template-columns:1fr;grid-auto-flow:row;gap:20px;width:min(640px,100%);max-width:640px;margin-top:4px;padding-top:8px}.about-timeline-item{text-align:left;padding:0 0 0 40px;display:block}.about-timeline-item:before{top:var(--timeline-marker-size);bottom:calc(var(--timeline-gap)*-1);transform-origin:top;width:1px;height:auto;left:15px;right:auto;transform:scaleY(0)}.about-timeline.visible .about-timeline-item:before{transform:scaleY(1)}.about-timeline-marker{margin-bottom:0;position:absolute;top:0;left:5px}.about-timeline-text{max-width:none}}.hidden{display:none}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.passion-image-wrapper{justify-content:center;align-items:center;margin:0 auto;padding:0;display:flex}.passion-image{width:100%;max-width:320px;height:auto;box-shadow:none;background:0 0;border-radius:0;margin:0 auto;display:block}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}
.floating-menu{opacity:0;z-index:999;align-items:center;gap:12px;transition:all .5s;display:flex;position:fixed;bottom:20px;right:20px;transform:translateY(30px)}.floating-menu.show{opacity:1;transform:translateY(0)}.linkedin-icon,.github-icon{color:#4a5759;justify-content:center;align-items:center;height:100%;font-size:32px;transition:transform .2s;display:flex}.github-icon:hover,.linkedin-icon:hover{transform:scale(1.1)}.toggle-wrapper{cursor:pointer;background:#ccc;border-radius:16px;width:60px;height:32px;transition:background .3s;position:relative}.toggle-button{text-align:center;border-radius:50%;width:28px;height:28px;font-size:12px;line-height:28px;transition:left .3s,background .3s;position:absolute;top:2px;left:2px}.toggle-button.jp{color:#fff;background:#4a5759;left:2px}.toggle-button.en{color:#4a5759;background:#fff;left:30px}
.book-wrapper{justify-content:center;align-items:center;display:flex}.book{perspective:1000px}.small-book .pages{width:400px;height:200px;transform-style:preserve-3d;position:relative}.page{transform-origin:0 0;backface-visibility:hidden;cursor:pointer;background-position:50%;background-size:cover;width:200px;height:200px;transition:transform 1s;position:absolute;top:0}.page:nth-child(odd){z-index:1;right:0;transform:rotateY(0)}.page:nth-child(2n){transform-origin:100% 0;left:0;transform:rotateY(180deg)}.page.flipped:nth-child(odd){z-index:0;transform:rotateY(-180deg)}.page.flipped:nth-child(2n){z-index:2;transform:rotateY(0)}.book-wrapper{position:relative}.arrow-right{color:#4a5759;z-index:20;pointer-events:none;font-size:3rem;transition:opacity .6s;animation:1.5s ease-in-out infinite wiggleRight;position:absolute;top:50%;left:-3rem;transform:translateY(-50%)}.arrow-right.hidden{opacity:0}@keyframes wiggleRight{0%{transform:translateY(-50%)translate(0)}25%{transform:translateY(-50%)translate(4px)}50%{transform:translateY(-50%)translate(0)}75%{transform:translateY(-50%)translate(4px)}to{transform:translateY(-50%)translate(0)}}@media (max-width:560px){.book-wrapper{transform-origin:top;margin-bottom:-56px;transform:scale(.72)}}