*{margin:0;padding:0;box-sizing:border-box}html,body{background:#fafaf8;color:#333;font-family:'Noto Sans JP',sans-serif;line-height:1.6}.wrapper{max-width:1000px;margin:0 auto;padding:2rem}.header{text-align:center;padding:2rem 0;border-bottom:2px solid #8b4513}.title{font-family:'Noto Serif JP',serif;font-size:2.8rem;color:#5a2d0c;margin-bottom:0.5rem}.subtitle{color:#777;font-size:0.95rem}.content{padding:2rem 0}.hero{text-align:center;padding:2rem;background:#f5ede3;margin-bottom:3rem}.hero h2{font-family:'Noto Serif JP',serif;font-size:1.8rem;color:#5a2d0c;margin-bottom:1rem}.hero p{color:#666}.topics h2{font-size:1.6rem;color:#333;margin-bottom:2rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}.topic{background:#fff;padding:2rem;border:1px solid #ddd;border-radius:4px;text-align:center;transition:all 300ms}.topic:hover{border-color:#8b4513;box-shadow:0 4px 12px rgba(139,69,19,0.1)}.topic h3{font-family:'Noto Serif JP',serif;color:#5a2d0c;margin-bottom:0.5rem;font-size:1.3rem}.topic p{color:#888;font-size:0.9rem}.action{text-align:center;margin:3rem 0}.btn{padding:1rem 2rem;background:#8b4513;color:#fff;border:none;font-weight:600;cursor:pointer;border-radius:4px;transition:all 300ms}.btn:hover{background:#6b3410}@media(max-width:768px){.grid{grid-template-columns:1fr}.title{font-size:2rem}}