*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;line-height:1.5;color:#111;background:#fffdf9}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.title{
  background:#fcf2cb;
  font-size:12px;
  text-align:center;
  margin:0;
  padding:3px;
}
.topbar{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid #e6e6e6;
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;gap:12px;
  max-width:1200px;margin:0 auto;
}
.topbar__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.35;
}
.topbar__title img{
  width:50%;
  height:auto;
}
.pclogo{display:block;width:30%}
.pclogo img{width:100%}
.splogo{display:none;text-align:center;padding-top:8px}
.splogo img{max-width:220px;width:55%}

.filtersBtn{
  position:relative;
  display:none;
  align-items:center;justify-content:center;
  padding:10px 14px;
  border:2px solid #b7b7b7;
  border-radius:10px;
  background:#fff;
  width:20%;
}
.filtersBtn::after{
  content:"＞";
  position:absolute;right:0;top:50%;
  transform:translate(-50%,-50%);
}
.filtersBtn:hover{background:#FFE9AB;transition:.2s}

.layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:20px;
  padding:30px 0;
  max-width:1200px;
  margin:0 auto;
}
.sidebarPc,.content{min-width:0}

.panel{
  position:sticky;top:58px;
  height:calc(100dvh - 74px);
  overflow:auto;
}
.panel__hd{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;
  background:#fff;
  border-bottom:1px solid #eee;
}
.panel__ttl{margin:0;font-size:22px}

.btnGhost{
  padding:7px 12px;
  border-radius:10px;
  border:2px solid #b7b7b7;
  background:#fff;
}
.btnGhost:hover{background:#e9e9e9;transition:.2s}
.btnSmall{padding:6px 10px;font-size:15px}

.intro{
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid #f1d9b9;
  background:#fff7ec;
  border-radius:14px;
}
.intro__lead{margin:0;font-size:15px;color:#444}

.content__hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}
.content__left{min-width:0}
.content__right{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.count{font-size:16px;color:#333;font-weight:700}
.viewHint{font-size:14px;color:#666}

.sortBox{display:flex;flex-direction:column;gap:4px;min-width:260px}
.sortBox__label{font-size:13px;color:#666}
.select{
  width:100%;
  padding:10px 10px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  font-size:16px;
}
.select--sort{min-width:260px}

.chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:8px;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border:1px solid #e3e3e3;
  border-radius:999px;
  background:#fff;
  font-size:12px;
  max-width:100%;
}
.chip__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.chip__x{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  border:1px solid #ddd;
  border-radius:999px;
  line-height:1;font-size:12px;
  background:#fff;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card{
  border:1px solid #e6e6e6;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.card__media{position:relative;background:#f7f7f7}
.card__badge{
  position:absolute;left:10px;top:10px;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:0 10px;
  border-radius:999px;
  background:#FE4F27;color:#fff;
  font-size:12px;font-weight:700;
}
.card__badge--ghost{opacity:0;pointer-events:none}
.card__img{
  width:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:1/1;
  background:#f7f7f7;
}
.card__bd{padding:10px 10px 12px}
.card__maker{
  margin:0 0 4px;
  font-size:13px;
  color:#666;
}
.card__ttl{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
}
.card__meta{
  margin:0;
  font-size:15px;
  color:#555;
  line-height:1.45;
}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{
  font-size:13px;
  padding:3px 8px;
  border:1px solid #e3e3e3;
  border-radius:999px;
  color:#444;
  background:#fff;
}

.filters{padding:12px}
.section{margin:0 0 30px;background:#fff}
.section--accent{
  padding:12px;
  border:1px solid #f1d9b9;
  border-radius:14px;
  background:#fff7ec;
}
.section__ttl{
  padding:8px;
  margin:0 0 10px;
  font-size:20px;
  font-weight:bold;
  background:#fffaf4;
  border-left:solid 5px #ffaf58;
}
.fGroup{margin:0 0 16px}
.fLabel{
  display:block;
  font-size:18px;
  font-weight:bold;
  color:#FE4F27;
  margin:0 0 6px;
}
.hint{margin:8px 0 0;font-size:14px;color:#666}
.hint--top{margin:0 0 6px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #ddd;
  border-radius:999px;
  padding:8px 10px;
  font-size:16px;
  background:#fff;
  user-select:none;
}
.pill input{margin:0}
.pill:has(input:checked){background:#FFE9AB}

.empty{
  padding:18px;
  border:1px dashed #ddd;
  border-radius:14px;
  color:#555;
  background:#fff;
}

.copyright{
  text-align:center;
  font-size:12px;
  background:#ffd7ac;
  padding:10px;
  margin-top:20px;
}
span.aks{display:inline-block}

.drawer{
  position:fixed;top:0;right:0;height:100dvh;
  width:min(92vw,420px);
  background:#fff;
  border-left:1px solid #e6e6e6;
  z-index:2147483647;
  transform:translateX(105%);
  transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.drawer__hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #eee;
}
.drawer__ttl{margin:0;font-size:22px}
.btnClose{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border:1px solid #b7b7b7;
  border-radius:10px;
  font-size:22px;
  background:#fff;
}
.btnClose:hover{background:#e3e3e3;transition:.2s}
.drawer__bd{overflow:auto;padding-bottom:12px}
.drawer__actions{padding:12px 12px 0}
.drawer__ft{border-top:1px solid #eee;padding:12px 14px;background:#fff}
.btnPrimary{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  background:#FE4F27;
  color:#fff;
  font-size:18px;
  font-weight:bold;
}
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;
  z-index:2147483646;
  transition:opacity .18s ease;
}
#filtersDrawer:target{transform:translateX(0)}
#filtersDrawer:target ~ #overlay{opacity:1;pointer-events:auto}

@media (max-width: 980px){
  .topbar__inner{padding:12px}
  .layout{grid-template-columns:1fr;padding:12px}
  .sidebarPc{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content__right{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
  .filtersBtn{display:inline-flex}
  .pclogo{display:none}
  .splogo{display:block}
  .topbar__title{font-size:18px;width:60%}
}

@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  body.filtered .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card__ttl{font-size:16px}
  .card__meta,.tag,.pill,.fLabel,.select{font-size:14px}
  .section__ttl,.panel__ttl,.drawer__ttl{font-size:18px}
  .sortBox,.select--sort{min-width:auto;width:100%}
  .content__right{width:100%}
  .btnSmall{width:100%}
  .topbar__title{font-size:16px}
  .topbar__title img{width:100%}
}

@media (max-width: 520px){
  .grid{grid-template-columns: repeat(1, minmax(0, 1fr))}
  body.filtered .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .chip__txt{max-width:180px}
  .filtersBtn{width: 40%;}
  .card__ttl{font-size:18px;}
  .viewHint{font-size:14px;}
}