@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{background:#f8f9fa;color:#333;font-family:Hiragino Sans,Yu Gothic,游ゴシック,Meiryo,sans-serif;line-height:1.6}.page-wrapper{background:#fff;box-shadow:0 0 20px #0000001a;margin:0 auto;max-width:414px;position:relative}.visually-hidden{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.visually-hidden:focus{height:auto;position:static;width:auto}.hero-banner{align-items:center;background:url(../../static/media/01.10bba755c2868b26bfb5.png) no-repeat 50%/cover;color:#fff;display:flex;justify-content:center;min-height:350px;overflow:hidden;padding:80px 20px 60px;position:relative;text-align:center}.hero-banner:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='80' cy='40' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='40' cy='70' r='2' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat;bottom:0;content:"";left:0;opacity:.5;position:absolute;right:0;top:0}.hero-inner{position:relative;z-index:2}.hero-avatar{align-items:center;background:#ffffffe6;border:3px solid #ffffffb3;border-radius:50%;box-shadow:0 8px 32px #0000004d;display:flex;height:100px;justify-content:center;margin:0 auto 20px;overflow:hidden;position:relative;width:100px}.hero-avatar.has-image:before{display:none}.hero-avatar img{border-radius:50%;height:100%;object-fit:cover;width:100%}.hero-banner h1{font-size:2.2rem;font-weight:700;line-height:1.3;margin-bottom:.5rem;text-shadow:0 2px 4px #0000004d}.hero-banner .subtitle{font-size:1.1rem;margin-bottom:1.5rem;opacity:.95}.hero-tag{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff40;border:1px solid #ffffff4d;border-radius:25px;display:inline-block;font-size:.9rem;margin-bottom:2rem;padding:10px 20px}.profile-section{background:#fff;padding:50px 20px}.profile-header{margin-bottom:40px;text-align:center}.avatar-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:4px solid #f8f9fa;border-radius:50%;box-shadow:0 15px 40px #667eea66;color:#fff;display:flex;font-size:.9rem;font-weight:700;height:140px;justify-content:center;margin:0 auto 20px;overflow:hidden;position:relative;width:140px}.avatar-container.has-image:before{display:none}.avatar-container img{border-radius:50%;height:100%;object-fit:cover;width:100%}.name-heading{color:#2c3e50;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}.job-title{color:#667eea;font-size:1rem;font-weight:500;margin-bottom:1.5rem}.bio-container{background:#f8f9fa;border-left:4px solid #667eea;border-radius:15px;color:#555;font-size:.95rem;line-height:1.8;margin-bottom:2.5rem;padding:20px;text-align:left}.credentials-layout{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr;margin-bottom:2rem}.credential-box{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #e9ecef;border-radius:15px;padding:20px 15px;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.credential-box:hover{box-shadow:0 8px 25px #0000001a;transform:translateY(-3px)}.credential-box .icon-element{font-size:1.8rem;margin-bottom:.5rem}.credential-box .label-text{color:#2c3e50;font-size:.85rem;font-weight:600;margin-bottom:.3rem}.credential-box .detail-text{color:#666;font-size:.8rem;line-height:1.4}.media-showcase{background:#f8f9fa;padding:50px 20px}.media-image-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;box-shadow:0 15px 40px #667eea66;color:#fff;display:flex;font-size:.9rem;font-weight:700;height:200px;justify-content:center;margin:0 auto 30px;max-width:350px;overflow:hidden;position:relative;width:100%}.media-image-container.has-image:before{display:none}.media-image-container img{border-radius:15px;height:100%;object-fit:cover;width:100%}.learning-features{background:#fff;padding:60px 20px}.section-heading{color:#2c3e50;font-size:1.5rem;font-weight:700;margin-bottom:.5rem;text-align:center}.section-subheading{color:#666;font-size:.95rem;margin-bottom:2.5rem;text-align:center}.feature-container{grid-gap:20px;display:grid;gap:20px}.feature-box{background:#f8f9fa;border:1px solid #e9ecef;border-radius:15px;padding:25px 20px;transition:transform .3s ease,box-shadow .3s ease}.feature-box:hover{box-shadow:0 10px 30px #0000001a;transform:translateY(-5px)}.feature-box h3{align-items:center;color:#2c3e50;display:flex;font-size:1.1rem;font-weight:600;margin-bottom:1rem}.feature-box .emoji-icon{font-size:1.3rem;margin-right:.8rem}.feature-box p{color:#555;font-size:.9rem;line-height:1.6}.publications{background:#f8f9fa;padding:60px 20px}.book-gallery{display:flex;gap:20px;overflow-x:auto;padding:20px 0;scroll-snap-type:x mandatory}.book-gallery::-webkit-scrollbar{display:none}.book-item{flex:0 0 auto;scroll-snap-align:start;text-align:center;width:140px}.book-item:hover{transform:scale(1.05)}.book-image{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;box-shadow:0 8px 25px #667eea4d;color:#fff;display:flex;font-size:.8rem;font-weight:700;height:180px;justify-content:center;margin-bottom:15px;overflow:hidden;position:relative;width:100%}.book-image:before{content:"📚 書籍画像"}.book-image.has-image:before{display:none}.book-image img{border-radius:10px;height:100%;object-fit:cover;width:100%}.book-name{color:#2c3e50;font-size:.9rem;font-weight:600;margin-bottom:.3rem}.book-summary{color:#666;font-size:.8rem}.advantages{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:60px 20px;position:relative}.advantages:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='80' cy='40' r='3' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='40' cy='70' r='2' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat;bottom:0;content:"";left:0;opacity:.3;position:absolute;right:0;top:0}.advantages-content{position:relative;z-index:2}.advantages h2{font-size:1.5rem;margin-bottom:2.5rem;text-align:center}.advantages-layout{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.advantage-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:15px;padding:25px 20px;text-align:center}.advantage-box:hover{background:#fff3;transform:translateY(-3px)}.advantage-icon{font-size:2rem;margin-bottom:.8rem}.advantage-label{font-size:1rem;font-weight:600;margin-bottom:.5rem}.advantage-desc{font-size:.85rem;opacity:.9}.join-section{background:#fff;padding:60px 20px;text-align:center}.join-section h2{color:#2c3e50;font-size:1.4rem;line-height:1.4;margin-bottom:1.5rem}.highlight-banner{animation:pulse-effect 2s infinite;background:linear-gradient(135deg,#ff6b6b,#ee5a24);border-radius:25px;display:inline-block;padding:15px 25px;transition:transform .3s ease}.action-button,.highlight-banner{color:#fff;cursor:pointer;font-weight:600;margin:2rem auto}.action-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;display:block;font-size:1.1rem;overflow:hidden;padding:18px 35px;position:relative;text-decoration:none;transition:all .3s ease}.action-button:hover{box-shadow:0 10px 30px #667eea66;transform:translateY(-2px)}.action-button:before{content:"";inset:0;position:absolute}.note-text{color:#666;font-size:.8rem;margin-top:1rem}@keyframes pulse-effect{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-on-scroll{animation:slide-up .8s ease-out}@media (min-width:768px){body{font-size:1.1rem}.page-wrapper{border-radius:20px;margin:20px auto;max-width:480px}.hero-banner{border-radius:20px 20px 0 0}.hero-avatar{height:120px;width:120px}.avatar-container{height:160px;width:160px}}@media (max-width:414px){.page-wrapper{box-shadow:none;margin:0}.credentials-layout{gap:10px;grid-template-columns:1fr}.advantages-layout{gap:15px;grid-template-columns:1fr}.hero-banner{padding:60px 15px 40px}.hero-banner h1{font-size:1.8rem}}.image-load-target{transition:opacity .3s ease}.image-load-target:hover{opacity:.9}.image-load-target:after{background:#ffffff1a;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.floating-cta-wrapper{bottom:30px;display:flex;justify-content:center;left:0;position:fixed;right:0;z-index:1000}@keyframes bounce-effect{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.floating-cta-button{align-items:center;animation:bounce-effect 3s infinite;background:linear-gradient(135deg,#ff6b6b,#ee5a24);border:none;border-radius:30px;box-shadow:0 8px 25px #ff6b6b66;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:8px;padding:15px 20px;text-decoration:none;transition:all .3s ease;white-space:nowrap}.floating-cta-button:hover{box-shadow:0 12px 35px #ff6b6b99;transform:scale(1.05)}.floating-cta-button .icon-element{font-size:1.1rem}@media (max-width:768px){.floating-cta-wrapper{bottom:15px;right:15px}.floating-cta-button{font-size:.85rem;padding:12px 16px}}@media (max-width:480px){.floating-cta-button{font-size:.8rem;padding:10px 14px}.floating-cta-button .icon-element{font-size:1rem}}