@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap";
:root{--primary:#2d5be3;--primary-light:#4b76f0;--primary-dark:#1e45c4;--primary-bg:#eef3fe;--primary-border:#c7d7fb;--amber:#f59e0b;--amber-light:#fcd34d;--amber-bg:#fffbeb;--amber-border:#fde68a;--green:#10b981;--green-bg:#ecfdf5;--text:#1a1a2e;--text-secondary:#64748b;--text-muted:#94a3b8;--border:#e5e9f5;--border-hover:#c7d7fb;--bg:#f8faff;--white:#fff;--surface:#fff;--shadow-xs:0 1px 2px #2d5be30f;--shadow-sm:0 2px 8px #2d5be314, 0 1px 2px #0000000a;--shadow-md:0 4px 16px #2d5be31f, 0 2px 4px #0000000f;--shadow-lg:0 12px 40px #2d5be326, 0 4px 8px #00000014;--shadow-amber:0 4px 20px #f59e0b40;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;--font:"Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;--transition:all .2s cubic-bezier(.4,0,.2,1);--transition-fast:all .15s ease;--header-h:56px;--accent:var(--primary);--accent-light:var(--primary-light);--accent-bg:var(--primary-bg);--navy:#1a2744;--navy-mid:#243358;--navy-light:#2d4070;--success:var(--green);--warn:var(--amber);--text-primary:var(--text);--bg-card:var(--white);--muted:var(--text-muted)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.7}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}ul,ol{list-style:none}.header{z-index:100;background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow-xs);position:sticky;top:0}.header-inner{max-width:840px;height:var(--header-h);justify-content:space-between;align-items:center;margin:0 auto;padding:0 16px;display:flex}.header-logo{color:var(--primary);letter-spacing:-.03em;align-items:center;gap:4px;font-size:15px;font-weight:900;display:flex}.header-logo span{color:var(--amber)}.header-nav{gap:4px;display:flex}.header-nav a{color:var(--text-secondary);border-radius:var(--radius-sm);transition:var(--transition-fast);padding:6px 10px;font-size:11px;font-weight:600}.header-nav a:hover{color:var(--primary);background:var(--primary-bg)}.hero{text-align:center;border-bottom:1px solid var(--border);background:linear-gradient(160deg,#f0f5ff 0%,#e8f0fe 40%,#fff8ec 100%);padding:36px 16px 28px;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#2d5be314 0%,#0000 70%);width:280px;height:280px;position:absolute;top:-30%;right:-10%}.hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#f59e0b14 0%,#0000 70%);width:200px;height:200px;position:absolute;bottom:-20%;left:-5%}.hero-badge{background:var(--white);border:1.5px solid var(--primary-border);border-radius:var(--radius-full);color:var(--primary);box-shadow:var(--shadow-xs);align-items:center;gap:6px;margin-bottom:14px;padding:5px 14px;font-size:11px;font-weight:700;animation:.5s fadeInDown;display:inline-flex}.hero-title{color:var(--text);letter-spacing:-.03em;margin-bottom:10px;font-size:clamp(22px,6vw,32px);font-weight:900;line-height:1.3;animation:.5s .1s both fadeInUp}.hero-title .highlight{color:var(--primary);background:linear-gradient(135deg, var(--primary), var(--primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:var(--text-secondary);margin-bottom:24px;font-size:13px;line-height:1.7;animation:.5s .15s both fadeInUp}.persona-grid{grid-template-columns:1fr 1fr;gap:8px;max-width:480px;margin:0 auto 20px;animation:.5s .2s both fadeInUp;display:grid}.persona-card{background:var(--white);border-radius:var(--radius-md);border:1.5px solid var(--border);color:var(--text);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-xs);align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:700;display:flex}.persona-card:hover,.persona-card.active{border-color:var(--primary);background:var(--primary-bg);color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.persona-card.amber:hover,.persona-card.amber.active{border-color:var(--amber);background:var(--amber-bg);color:#92400e}.persona-card.green:hover,.persona-card.green.active{border-color:var(--green);background:var(--green-bg);color:#065f46}.persona-card.purple:hover,.persona-card.purple.active{color:#4c1d95;background:#f5f3ff;border-color:#8b5cf6}.persona-emoji{flex-shrink:0;font-size:18px}.persona-label{line-height:1.3}.persona-label small{color:var(--text-muted);font-size:10px;font-weight:500;display:block}.search-wrap{max-width:520px;margin:0 auto;animation:.5s .25s both fadeInUp;position:relative}.search-box{background:var(--white);border-radius:var(--radius-full);box-shadow:var(--shadow-md);border:2px solid var(--border);transition:var(--transition);align-items:center;gap:8px;padding:5px 5px 5px 18px;display:flex}.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px #2d5be31f, var(--shadow-md)}.search-input{font-size:14px;font-family:var(--font);color:var(--text);background:0 0;border:none;outline:none;flex:1;min-width:0}.search-input::placeholder{color:var(--text-muted)}.search-btn{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:var(--white);border-radius:var(--radius-full);white-space:nowrap;transition:var(--transition);flex-shrink:0;padding:11px 22px;font-size:13px;font-weight:700;box-shadow:0 2px 8px #2d5be34d}.search-btn:hover{background:linear-gradient(135deg, var(--primary-dark), var(--primary));transform:translateY(-1px);box-shadow:0 4px 14px #2d5be366}.search-clear{color:var(--text-muted);transition:var(--transition-fast);background:0 0;flex-shrink:0;padding:0 8px;font-size:18px}.search-clear:hover{color:var(--text-secondary)}.search-suggestions{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);z-index:200;padding:16px;animation:.2s fadeInDown;position:absolute;top:calc(100% + 10px);left:0;right:0}.suggestions-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-size:11px;font-weight:700}.suggestions-grid{flex-wrap:wrap;gap:6px;display:flex}.suggestion-chip{border-radius:var(--radius-full);border:1.5px solid var(--border);color:var(--text-secondary);background:var(--white);cursor:pointer;transition:var(--transition-fast);padding:6px 14px;font-size:12px;font-weight:500}.suggestion-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}.filter-section{background:var(--white);border-bottom:1px solid var(--border);top:var(--header-h);z-index:90;padding:10px 0;position:sticky}.filter-scroll{scrollbar-width:none;gap:6px;padding:0 16px;display:flex;overflow-x:auto}.filter-scroll::-webkit-scrollbar{display:none}.filter-tag{border-radius:var(--radius-full);white-space:nowrap;border:1.5px solid var(--border);color:var(--text-secondary);background:var(--white);transition:var(--transition-fast);cursor:pointer;align-items:center;gap:5px;padding:7px 14px;font-size:12px;font-weight:600;display:inline-flex}.filter-tag:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-bg)}.filter-tag.active{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);font-weight:700}.main{max-width:840px;margin:0 auto;padding:20px 16px 80px}.result-info{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.result-count{color:var(--text-secondary);font-size:13px}.result-count strong{color:var(--text);font-weight:700}.quick-link{border-radius:var(--radius-full);border:1.5px solid var(--primary-border);color:var(--primary);background:var(--primary-bg);transition:var(--transition-fast);white-space:nowrap;align-items:center;padding:5px 12px;font-size:11px;font-weight:700;display:inline-flex}.quick-link:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}.card-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;display:grid}@media (min-width:560px){.card-grid{grid-template-columns:repeat(3,1fr);gap:12px}}@media (min-width:768px){.card-grid{grid-template-columns:repeat(4,1fr)}}.article-card{background:var(--white);border-radius:var(--radius-md);border:1.5px solid var(--border);transition:var(--transition);cursor:pointer;color:inherit;flex-direction:column;gap:8px;padding:14px;text-decoration:none;display:flex;position:relative;overflow:hidden}.article-card:before{content:"";background:var(--primary);transform-origin:bottom;width:3px;height:100%;transition:transform .2s;position:absolute;top:0;left:0;transform:scaleY(0)}.article-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-border);transform:translateY(-2px)}.article-card:hover:before{transform:scaleY(1)}.card-header{justify-content:space-between;align-items:center;gap:6px;min-height:18px;display:flex}.card-section{color:var(--primary);letter-spacing:.04em;background:var(--primary-bg);border-radius:var(--radius-full);padding:2px 8px;font-size:10px;font-weight:700}.card-word-badge{color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:10px;font-weight:500}.card-title{color:var(--text);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;font-size:12px;font-weight:700;line-height:1.5;display:-webkit-box;overflow:hidden}.card-excerpt{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.6;display:-webkit-box;overflow:hidden}.card-tags{flex-wrap:wrap;gap:4px;margin-top:auto;display:flex}.card-tag{border-radius:var(--radius-full);background:var(--bg);color:var(--text-muted);border:1px solid var(--border);padding:2px 8px;font-size:10px;font-weight:500}.card-copy-btn{color:var(--white);border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--amber), #f97316);transition:var(--transition-fast);justify-content:center;align-items:center;gap:4px;width:100%;margin-top:2px;padding:8px 10px;font-size:11px;font-weight:700;display:inline-flex;box-shadow:0 2px 6px #f59e0b4d}.card-copy-btn:hover{background:linear-gradient(135deg, #d97706, var(--amber));transform:translateY(-1px);box-shadow:0 4px 10px #f59e0b66}.category-nav{border-top:1px solid var(--border);margin-top:40px;padding-top:32px}.category-nav-title{color:var(--text);align-items:center;gap:8px;margin-bottom:16px;font-size:15px;font-weight:800;display:flex}.category-nav-title:before{content:"";background:linear-gradient(180deg, var(--primary), var(--amber));border-radius:2px;width:4px;height:18px;display:inline-block}.category-nav-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (min-width:560px){.category-nav-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:768px){.category-nav-grid{grid-template-columns:repeat(5,1fr)}}.category-nav-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);color:inherit;text-align:center;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;text-decoration:none;display:flex}.category-nav-card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-sm);background:var(--primary-bg);transform:translateY(-2px)}.category-nav-emoji{font-size:24px}.category-nav-name{font-size:12px;font-weight:700}.category-nav-arrow{color:var(--text-muted);font-size:12px}.load-more-wrap{text-align:center;padding:8px 0 24px}.load-more-btn{border-radius:var(--radius-full);border:2px solid var(--primary);color:var(--primary);background:var(--white);transition:var(--transition);box-shadow:var(--shadow-xs);align-items:center;gap:8px;padding:14px 36px;font-size:14px;font-weight:700;display:inline-flex}.load-more-btn:hover{background:var(--primary);color:var(--white);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.article-hero{background:linear-gradient(160deg, var(--primary-bg) 0%, #e8f0fe 100%);border-bottom:1px solid var(--border);padding:28px 16px 24px}.article-hero-section{color:var(--primary);background:var(--white);border:1.5px solid var(--primary-border);border-radius:var(--radius-full);align-items:center;gap:4px;margin-bottom:12px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-flex}.article-hero-title{color:var(--text);letter-spacing:-.02em;font-size:clamp(17px,4.5vw,26px);font-weight:900;line-height:1.4}.article-body-wrap{max-width:840px;margin:0 auto;padding:24px 16px 80px}.example-block{background:var(--white);border-radius:var(--radius-lg);border:2px solid var(--primary-border);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:20px 20px 16px;position:relative}.example-block:before{content:"";background:linear-gradient(90deg, var(--primary), var(--amber));border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:3px;position:absolute;top:0;left:0;right:0}.example-block-label{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:var(--white);border-radius:var(--radius-full);padding:3px 14px;font-size:11px;font-weight:700;position:absolute;top:-12px;left:16px;box-shadow:0 2px 6px #2d5be34d}.example-text{font-family:var(--font);letter-spacing:.03em;color:var(--text);white-space:pre-wrap;margin-bottom:16px;font-size:15px;font-weight:400;line-height:2}.copy-full-btn{background:linear-gradient(135deg, var(--amber), #f97316);width:100%;color:var(--white);border-radius:var(--radius-md);transition:var(--transition);box-shadow:var(--shadow-amber);letter-spacing:.02em;justify-content:center;align-items:center;gap:10px;padding:16px;font-size:16px;font-weight:900;display:flex}.copy-full-btn:hover{background:linear-gradient(135deg, #d97706, var(--amber));transform:translateY(-2px);box-shadow:0 8px 24px #f59e0b59}.copy-full-btn.copied{background:linear-gradient(135deg, var(--green), #059669);box-shadow:0 4px 16px #10b9814d}.cta-section{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-xs);margin-bottom:24px;padding:20px}.cta-title{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:12px;font-size:13px;font-weight:700;display:flex}.cta-card{border-radius:var(--radius-md);border:1.5px solid var(--border);transition:var(--transition-fast);justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:14px 16px;display:flex}.cta-card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-xs)}.cta-card:last-child{margin-bottom:0}.cta-card-info{flex:1;min-width:0}.cta-card-name{margin-bottom:3px;font-size:13px;font-weight:700}.cta-card-desc{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.cta-card-btn{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:var(--white);border-radius:var(--radius-sm);white-space:nowrap;transition:var(--transition-fast);flex-shrink:0;align-items:center;padding:9px 16px;font-size:12px;font-weight:700;display:inline-flex;box-shadow:0 2px 6px #2d5be340}.cta-card-btn:hover{background:linear-gradient(135deg, var(--primary-dark), var(--primary));transform:translateY(-1px)}.related-section{margin-top:32px}.related-title{color:var(--text);align-items:center;gap:8px;margin-bottom:14px;font-size:14px;font-weight:800;display:flex}.related-title:before{content:"";background:linear-gradient(180deg, var(--primary), var(--amber));border-radius:2px;width:4px;height:16px;display:inline-block}.toast{background:linear-gradient(135deg, #065f46, var(--green));color:var(--white);border-radius:var(--radius-full);z-index:999;opacity:0;pointer-events:none;white-space:nowrap;align-items:center;gap:8px;padding:14px 28px;font-size:14px;font-weight:700;transition:all .35s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 8px 24px #10b98159}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.article-content h1{margin:1.5em 0 .75em;font-size:1.6rem;font-weight:900;line-height:1.4}.article-content h2{background:var(--primary-bg);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);margin:2em 0 .75em;padding:10px 16px;font-size:1.2rem;font-weight:800;line-height:1.4}.article-content h3{color:var(--text);align-items:center;gap:6px;margin:1.5em 0 .5em;font-size:1.05rem;font-weight:700;display:flex}.article-content h3:before{content:"";background:var(--amber);border-radius:2px;flex-shrink:0;width:8px;height:8px;display:inline-block}.article-content p{margin-bottom:1em;line-height:1.9}.article-content ul,.article-content ol{margin:.75em 0 1em 1.2em}.article-content ul{list-style:outside}.article-content ol{list-style:decimal}.article-content li{margin-bottom:.4em;line-height:1.7}.article-content strong{color:var(--primary-dark);font-weight:700}.article-content a{color:var(--primary);text-decoration:underline;-webkit-text-decoration-color:var(--primary-border);text-decoration-color:var(--primary-border)}.article-content a:hover{-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary)}.article-content hr{border:none;border-top:1px solid var(--border);margin:2em 0}.article-content blockquote{border-left:4px solid var(--primary-border);background:var(--primary-bg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-secondary);margin:1em 0;padding:12px 16px;font-style:normal}.article-content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:13px}.article-content th{background:var(--primary-bg);color:var(--primary);border:1px solid var(--border);text-align:left;padding:10px 12px;font-weight:700}.article-content td{border:1px solid var(--border);padding:10px 12px}.article-content tr:nth-child(2n) td{background:var(--bg)}.douki-body{font-family:var(--font);letter-spacing:.03em;font-size:15px;line-height:2}.breadcrumb{color:var(--text-muted);background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:6px;max-width:840px;margin:0 auto;padding:10px 16px;font-size:12px;display:flex}.breadcrumb a{color:var(--primary);transition:var(--transition-fast)}.breadcrumb a:hover{text-decoration:underline}.breadcrumb-sep{color:var(--text-muted);font-size:10px}.footer{background:var(--text);color:#ffffff80;text-align:center;padding:28px 16px;font-size:12px}.footer a{color:#ffffffb3;transition:var(--transition-fast)}.footer a:hover{color:var(--white)}.footer-links{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:14px;display:flex}.empty-state{text-align:center;padding:60px 20px}.empty-icon{margin-bottom:16px;font-size:48px}.empty-title{margin-bottom:8px;font-size:16px;font-weight:700}.empty-desc{color:var(--text-secondary);font-size:13px}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f0f4ff 25%,#e8eeff 50%,#f0f4ff 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.seo-pagination{border-top:1px solid var(--border);text-align:center;margin-top:32px;padding-top:24px}.pagination-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.page-link{border-radius:var(--radius-sm);border:1.5px solid var(--border);min-width:36px;height:36px;color:var(--text-secondary);background:var(--white);transition:var(--transition-fast);justify-content:center;align-items:center;padding:0 10px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.page-link:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-bg)}.page-link.active{background:var(--primary);border-color:var(--primary);color:var(--white);box-shadow:0 2px 8px #2d5be34d}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (min-width:640px){.hero{padding:52px 24px 40px}.hero-title{font-size:34px}.persona-grid{grid-template-columns:repeat(4,1fr);max-width:600px}}@media (max-width:400px){.copy-full-btn{padding:14px;font-size:14px}.card-grid{gap:8px}}