*{box-sizing:border-box}html,body{margin:0;background:#e8e7e0;color:#23392f;font-family:"Yu Gothic","Meiryo",sans-serif}button,a{font:inherit;color:inherit;touch-action:manipulation}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #327ab2;outline-offset:1px}.skip{position:fixed;top:-80px;left:0;z-index:5;background:#fff;padding:10px}.skip:focus{top:0}
.workspace{min-height:100dvh;display:flex;align-items:stretch;justify-content:center;gap:8px;padding:8px}.sidebar{width:170px;min-width:0;flex:0 1 auto;align-self:stretch;max-height:calc(100dvh - 16px);overflow:auto;padding:18px 2px 14px;display:flex;flex-direction:column}.side-heading{margin-bottom:30px}.side-heading p{font-size:14px;margin:0 0 8px}.side-heading .subtitle{margin:2px 0 0}.side-heading h1{white-space:nowrap;font:600 20px/1.55 "Yu Mincho","Hiragino Mincho ProN",serif;margin:0}
.all{border:1px solid #778477;background:transparent;font-size:16px;min-height:44px;border-radius:3px;align-self:start;padding:7px 12px;margin-bottom:20px}.all[aria-pressed=true]{color:#fff;background:#264938;border-color:#264938}.choice{margin:0 0 15px}.choose{display:flex;align-items:center;gap:5px;text-align:left;width:100%;font-size:16px;font-weight:700;background:none;border:0;padding:2px 0;min-height:44px}.letter{flex:none;display:grid;place-items:center;width:24px;height:26px;font:600 17px/1 Georgia,serif;color:#fff;background:#126764}.choice:nth-child(2) .letter{background:#9e451e}.choice:nth-child(3) .letter{background:#814348}.choice[data-selected=true] .long{text-decoration:underline;text-underline-offset:5px}.short{display:none}.current-site{font-size:14px;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}.current-site{margin-top:auto}
#variants{display:flex;justify-content:center;gap:clamp(16px,calc(25vw - 326px),32px);min-width:0}#variants[data-mode=all]{flex:none}#variants[data-mode=one]{flex:1;max-width:1198px}.device{display:block;width:392px;height:calc(100dvh - 16px);border:1px solid #b1b6a9;border-radius:16px;overflow:hidden;background:#fff}.device[hidden]{display:none}.device iframe{width:100%;height:100%;display:block;border:0}
@media(min-width:1340px) and (max-width:1399px){
  .workspace{padding-inline:4px;gap:6px}
  .sidebar{padding-inline:0}
  .side-heading h1{font-size:18px}
}
@media(min-width:1340px) and (max-width:1359px){
  #variants{gap:12px}
  .choose{flex-direction:column;align-items:flex-start}
}
@media(max-width:1339px){.all{display:none}.workspace{justify-content:center}.sidebar{width:178px}#variants[data-mode=one]{flex:none}}
@media(max-width:650px){.workspace{display:flex;flex-direction:column;gap:0;padding:0;height:100dvh;min-height:0}.sidebar{width:100%;height:52px;padding:0 6px;overflow:visible;max-height:none;flex:none;display:block}.side-heading,.current-site{display:none}#variants-nav{display:flex;height:52px;align-items:center;justify-content:center;gap:3px}.choice{margin:0;flex:1;min-width:0}.choose{justify-content:center;gap:3px;padding:0 3px;min-height:44px;line-height:1.1;white-space:nowrap;font-size:14px}.letter{width:auto;min-width:16px;height:21px;font-size:14px;border-radius:2px}.long{display:none}.short{display:inline}.choice[data-selected=true]{background:#fdfaf0;border-radius:4px}#variants,#variants[data-mode=one]{width:100%;flex:1;min-height:0}.device{width:100%;height:100%;border:0;border-top:1px solid #b1b6a9;border-radius:0}}
