*{box-sizing:border-box}body{margin:0;background:#f7f5ef;color:#303b34;font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans',sans-serif}main{max-width:1500px;margin:auto;padding:0 44px}header{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;min-height:112px;gap:24px}.brand{font-family:Georgia,serif;font-size:29px;letter-spacing:.14em;color:inherit;text-decoration:none}.brand span{display:block;font-family:sans-serif;font-size:10px;letter-spacing:.12em;margin-top:8px}.top{display:flex;justify-content:center;gap:8px}button{font:inherit;cursor:pointer;color:inherit}.top button{border:0;background:transparent;padding:18px 24px;border-radius:32px;font-size:13px;transition:background .2s}.top button:hover,.top button:focus-visible{background:#e3e9df}.edition{font-size:8px;letter-spacing:.12em;text-align:right;color:#8d948b}.layout{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:30px;align-items:center}.stage{position:relative;overflow:hidden;border-radius:20px;background:#eeeae3;touch-action:none}canvas{width:100%;display:block;aspect-ratio:16/9}.intro{position:absolute;left:5%;top:9%;pointer-events:none}.intro>span{font-size:8px;letter-spacing:.22em;color:#697769}h1{font-family:'Hiragino Mincho ProN',serif;font-size:clamp(22px,3vw,42px);line-height:1.6;font-weight:500;letter-spacing:.08em;margin:18px 0 12px}.intro p{font-size:11px;line-height:2;color:#6e786e}.hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:10px;color:#747a70;pointer-events:none}.cursor{position:absolute;width:24px;height:24px;border:1px solid #6b806c88;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;display:none}.nav-label{display:block;font-size:9px;letter-spacing:.2em;color:#8a9589;margin-bottom:14px}.side button{display:flex;align-items:center;gap:15px;width:100%;padding:24px 10px;border:0;border-top:1px solid #dce0d6;background:transparent;text-align:left;font-size:15px;transition:background .2s,padding .2s}.side button:last-child{border-bottom:1px solid #dce0d6}.side button:hover,.side button:focus-visible{background:#e3e9df;padding-left:17px}.number{font-size:9px;color:#8b998a}.side small{display:block;margin-top:7px;font-size:8px;letter-spacing:.16em;color:#8b998a}.arrow{margin-left:auto;font-size:18px;color:#879780}footer{display:flex;align-items:center;gap:20px;padding:26px 0;font-size:10px;color:#83907f}.controls{display:flex;gap:8px;margin-left:auto}.controls button{border:1px solid #d7dfd2;border-radius:30px;background:transparent;padding:10px 14px;font-size:10px}.controls button:hover{background:#e3e9df}.footnote{font-size:9px}button:focus-visible,a:focus-visible{outline:2px solid #748d70;outline-offset:4px}dialog{border:0;border-radius:22px;padding:48px;max-width:520px;width:calc(100% - 40px);color:#303b34;background:#faf9f5;box-shadow:0 24px 100px #18231633}dialog::backdrop{background:#24302560;backdrop-filter:blur(4px)}#close{position:absolute;right:18px;top:12px;background:none;border:0;font-size:28px}.panel-label{font-size:9px;letter-spacing:.15em;color:#82907e}dialog h2{font-family:serif;font-size:27px;font-weight:500}dialog p{font-size:14px;line-height:2}.sample{border-top:1px solid #dde2d9;padding-top:18px;font-size:11px;color:#899183}@media(max-width:1000px){main{padding:0 24px}header{grid-template-columns:150px 1fr}.edition{display:none}.layout{grid-template-columns:minmax(0,1fr) 195px;gap:20px}.top button{padding:15px}.intro p{display:none}.side button{padding:18px 7px;font-size:13px}.footnote{display:none}}@media(max-width:680px){main{padding:0 16px}header{display:flex;flex-wrap:wrap;gap:12px;padding:22px 0 16px}.brand{font-size:24px}.brand span{display:inline;margin-left:15px}.top{width:100%;justify-content:space-between;gap:0}.top button{font-size:11px;padding:12px}.layout{grid-template-columns:minmax(0,1fr) 118px;gap:12px}.stage{border-radius:13px}canvas{aspect-ratio:4/5;object-fit:cover}.intro{top:6%;left:6%}.intro>span{font-size:6px}h1{font-size:19px;margin:10px 0}.side button{padding:20px 3px;gap:6px;font-size:11px}.side small{font-size:6px}.number{font-size:7px}.arrow{font-size:12px}.nav-label{font-size:7px}.hint{font-size:8px;bottom:12px;padding:0 12px}footer{flex-wrap:wrap;gap:10px}.controls{margin-left:auto}.controls button{font-size:9px;padding:9px}dialog{padding:36px 26px}}

/* 写真に説明文が重ならないようにします。 */
.intro p{display:none}
@media(max-width:680px){.intro{position:static;padding:15px;background:#f0eee7}.intro h1{font-size:18px;line-height:1.45;margin:8px 0 0}.intro h1 br{display:none}.intro>span{font-size:7px}.hint{display:none}canvas{aspect-ratio:16/9;object-fit:contain}.layout{align-items:start}.side button{padding:15px 3px}}