:root{--bg:#F7F9F9;--ink:#2E2E2E;--mute:#5c5c5c;--brand:#3BA7A0;--accent:#E6DCCD;--max:860px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",sans-serif;line-height:1.8}
.container{max-width:var(--max);margin:0 auto;padding:20px}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #e6eded;background:#fff;position:sticky;top:0}
.nav a{color:var(--ink);text-decoration:none;font-size:0.85rem}
.logo{height:36px;display:block}
.brand{display:flex;align-items:center;margin-right:6px}
h1{line-height:1.3;margin:22px 0 12px}
.lead{font-size:1.1rem;color:var(--mute)}
.btn{display:inline-block;border:1px solid var(--ink);padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink)}
.note{font-size:.9rem;color:var(--mute)}
.site-footer{border-top:1px solid #e6eded;background:#fff;padding:18px 20px;margin-top:28px;text-align:center}
.footer-links{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #e6eded;justify-content:center}
.footer-section{display:flex;flex-direction:column;gap:8px}
.footer-section h4{margin:0 0 8px 0;font-size:0.9rem;color:var(--brand);font-weight:600}
.footer-section a{color:var(--mute);text-decoration:none;font-size:0.9rem}
.footer-section a:hover{color:var(--brand)}
.brandline{display:flex;gap:8px;align-items:center;margin-bottom:8px;justify-content:center}
.brandline img{height:16px}
.infinity{display:inline-block;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;position:relative}
.infinity:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border:2px solid var(--ink);border-radius:50%}
.hint{margin-top:24px;padding:12px;border-left:4px solid var(--brand);background:#eef7f6}
figure{margin:0;padding:0}
img{max-width:100%;height:auto;border-radius:8px}
pre{background:#f2f6f6;padding:10px 12px;border-radius:8px;overflow:auto}
.search-widget{background:#f2f6f6;padding:24px 20px;margin-top:32px;border-top:1px solid #e6eded}
.search-box h3{font-size:1.1rem;margin:0 0 12px 0;color:var(--ink)}
.search-form{display:flex;gap:8px;margin-bottom:12px}
.search-form input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:1rem}
.search-form button{padding:10px 20px;background:var(--brand);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem}
.search-form button:hover{background:#2d8c86}
.search-result{min-height:20px}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-180deg) scale(0.5)}to{opacity:1;transform:rotate(0deg) scale(1)}}
@keyframes fadeInTitle{from{opacity:0}to{opacity:1}}
@keyframes fadeInOut{0%{opacity:0;transform:translateX(-50%) translateY(10px)}10%{opacity:1;transform:translateX(-50%) translateY(0)}90%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
@keyframes mysticalGradient{0%{background-position:0% 50%;opacity:0.3}25%{background-position:50% 50%;opacity:0.8}50%{background-position:100% 50%;opacity:1}75%{background-position:50% 50%;opacity:0.8}100%{background-position:0% 50%;opacity:0.3}}
@keyframes charFadeIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.fade-in-up{animation:fadeInUp 0.8s ease-out forwards;opacity:0}
.fade-in{animation:fadeIn 1s ease-out forwards;opacity:0}
.slide-in-left{animation:slideInLeft 0.8s ease-out forwards;opacity:0}
.rotate-in{animation:rotateIn 1.2s ease-out forwards;opacity:0}
.fade-in-title{background:linear-gradient(90deg,rgba(59,167,160,0.2) 0%,rgba(59,167,160,0.9) 25%,rgba(59,167,160,1) 50%,rgba(59,167,160,0.9) 75%,rgba(59,167,160,0.2) 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(59,167,160,0.3));animation:mysticalGradient 11s ease-in-out infinite 1.5s}
.fade-in-title span{animation-timing-function:ease-out}
.animate-delay-1{animation-delay:0.2s}
.animate-delay-2{animation-delay:0.4s}
.animate-delay-3{animation-delay:0.6s}
.scroll-animate{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.scroll-animate.visible{opacity:1;transform:translateY(0)}
.btn{transition:transform 0.3s ease,box-shadow 0.3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,167,160,0.3)}
.hidden-text{color:#F7F9F9;user-select:text;background:#F7F9F9}
.hidden-text::selection{color:#2E2E2E;background:#3BA7A0}
@media (max-width:600px){
body{font-size:0.9rem;line-height:1.6}
.container{padding:16px}
h1{font-size:1.9rem;line-height:1.3}
h2{font-size:1.2rem}
.lead{font-size:0.95rem}
.btn{font-size:0.8rem;padding:8px 10px;white-space:nowrap}
.nav{gap:8px;padding:10px 12px;font-size:0.75rem}
.nav a{font-size:0.75rem}
.logo{height:36px}
.search-form input,.search-form button{font-size:0.9rem;padding:8px 10px}
.footer-section h4{font-size:0.85rem}
.footer-section a{font-size:0.85rem}
.scroll-animate{padding:20px 12px!important;font-size:0.85rem}
.scroll-animate h2{font-size:1.1rem!important}
.scroll-animate p{font-size:0.85rem!important;line-height:1.7!important}
.brandline{font-size:0.75rem}
.site-footer .brandline img{height:10px!important;max-height:10px!important}
#logo-main{max-width:320px!important}
}