*{box-sizing:border-box}
body{margin:0;background:#fff;color:#000;font-family:'Inter','Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#000;text-decoration:none}
.wrap{max-width:480px;margin:0 auto}
.lbl{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
header{position:sticky;top:0;z-index:10;background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 16px;border-bottom:1px solid #000}
.title{padding-top:24px!important}
.logo{min-height:44px;display:flex;align-items:center;font-weight:700;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.hd-r{justify-self:end;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:flex-end}
.title{padding:8px 24px 40px}
.title .lbl{color:#555}
h1{margin:10px 0 0;font-size:26px;line-height:1.4}
.ph{width:100%;aspect-ratio:4/5;display:flex;align-items:flex-end;padding:14px}
.ch{padding-bottom:72px}
.qa{padding:28px 24px 0}
h2{margin:0;font-size:16px;line-height:1.8}
.ans{margin:12px 0 0;font-size:15px;line-height:2.1;color:#555}
.arc{margin:0 24px 64px;min-height:56px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #000;border-bottom:1px solid #000}
.t1{background:#D9D9D6;color:#000}.t2{background:#2E2E2E;color:#fff}.t3{background:#B9BEC2;color:#000}.t4{background:#8A8178;color:#fff}.t5{background:#E4E1DA;color:#000}.t6{background:#4A4A48;color:#fff}
/* search */
.sbox{padding:8px 24px 32px}
.sbox label{display:block;padding-bottom:6px;color:#555}
#q{width:100%;height:52px;border:0;border-bottom:2px solid #000;border-radius:0;background:transparent;font:700 22px 'Inter','Noto Sans JP',sans-serif;color:#000;padding:0;-webkit-appearance:none;appearance:none}
#q:focus{outline:none}
.drift{display:flex;flex-direction:column;gap:8px;padding-bottom:48px;overflow:hidden}
.row{display:flex;gap:8px;width:max-content}
.row a{flex:0 0 auto;width:112px;height:140px;display:flex;align-items:flex-end;padding:8px;font-size:10px}
.mq-l{animation:mL 46s linear infinite}.mq-r{animation:mR 58s linear infinite}.mq-l2{animation:mL 38s linear infinite}
@keyframes mL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.mq-l,.mq-r,.mq-l2{animation:none}}
.res{padding:0 24px 64px}
.res .lbl{color:#555}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;margin-top:16px}
.grid a{display:flex;flex-direction:column;gap:8px}
.grid .th{width:100%;aspect-ratio:4/5}
.grid .nm{font-size:14px;font-weight:700}
[hidden]{display:none!important}