:root{--blue:#2563eb;--ink:#1a1a1a;--gray:#f2f2f2;--orange:#f26b21;--soft:#fdebdf}*{box-sizing:border-box}body{margin:0;background:var(--gray);color:var(--ink);font:14px/1.7 "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif}header{background:#fff;border-bottom:1px solid #ddd;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}h1{font-size:18px;margin:0}a{color:var(--blue);text-underline-offset:3px}nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px 8px;flex-wrap:wrap}button,select{font:inherit;min-height:44px;border:1px solid #aaa;background:#fff;padding:8px 14px;border-radius:0;color:var(--ink)}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}select{max-width:430px}#stage{max-width:820px;margin:0 auto;background:#fff;border:1px solid #ddd;overflow:auto}#slide{display:block;width:100%;height:auto}#stage.zoomed #slide{width:1280px;max-width:none}
#comment{max-width:820px;margin:12px auto 0;background:#fff;border:1px solid #ddd;border-radius:6px;padding:14px 16px}#comment .head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}#comment .head b{font-size:15px}#comment .head small{color:#666}#comment textarea{width:100%;min-height:110px;padding:10px;border:1px solid #bbb;background:#fffbe8;font:inherit;resize:vertical}#comment .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#666}#comment .foot .state{min-height:20px}#comment .foot .state.err{color:#b91c1c}#comment .foot .state.ok{color:#15803d}#pagedots{max-width:820px;margin:0 auto 8px}#pagedots .dots,#comment .dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}#pagedots .dots a,#comment .dots a{display:inline-block;min-width:26px;padding:2px 4px;text-align:center;border:1px solid #ccc;text-decoration:none;color:#444;font-size:11px}#pagedots .dots a.has,#comment .dots a.has{background:var(--soft);border-color:var(--orange);color:var(--ink);font-weight:700}#pagedots .dots a.cur,#comment .dots a.cur{outline:2px solid var(--blue)}
footer{max-width:820px;margin:16px auto;padding:0 16px;color:#444}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}@media(max-width:760px){header{padding:12px 16px;gap:8px}h1{font-size:16px}select{max-width:190px}nav{gap:8px}#stage{width:100%}#comment{margin:12px 0 0}}
header>a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 18px 6px 14px;border-radius:999px;border:2px solid #f7c3a0;background:#fff4ec;color:#d9591a;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 3px 0 #f7c3a0;transition:transform .12s,box-shadow .12s}
header>a::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
header>a:first-child{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
header>a[download]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");background:#f26b21;border-color:#d9591a;color:#fff;box-shadow:0 3px 0 #b8481a}
header>a:hover{transform:translateY(-2px);box-shadow:0 5px 0 #f7c3a0}
header>a[download]:hover{box-shadow:0 5px 0 #b8481a}
header>a:active{transform:translateY(2px);box-shadow:0 1px 0 #f7c3a0}
header>a[download]:active{box-shadow:0 1px 0 #b8481a}