:root{
  --bg:#fbfaf6;
  --surface:#ffffff;
  --text:#23221f;
  --text-sub:#6b6a63;
  --text-hint:#9a988d;
  --border:rgba(0,0,0,0.10);
  --border-strong:rgba(0,0,0,0.18);
  --radius:8px;
  --radius-lg:14px;
  --accent:#2f6fb0;
  --accent-bg:#e9f1fa;
  --cat-blue-bg:#e6f1fb; --cat-blue-fg:#185fa5;
  --cat-amber-bg:#faeeda; --cat-amber-fg:#854f0b;
  --cat-green-bg:#eaf3de; --cat-green-fg:#3b6d11;
  --cat-pink-bg:#fbeaf0;  --cat-pink-fg:#993556;
  --cat-gray-bg:#f1efe8;  --cat-gray-fg:#5f5e5a;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
header,nav,main,footer{max-width:880px; margin:0 auto; padding-left:18px; padding-right:18px;}

.site-header{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:22px; padding-bottom:16px; border-bottom:1px solid var(--border-strong);}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand-mark{width:38px; height:38px; border-radius:var(--radius); background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:21px;}
.brand-name{display:block; font-size:19px; font-weight:600; line-height:1.2;}
.brand-sub{display:block; font-size:12px; color:var(--text-sub);}
.search{position:relative; display:flex; align-items:center; flex:1; min-width:190px; max-width:280px;}
.search .ti{position:absolute; left:11px; color:var(--text-hint); font-size:18px; pointer-events:none;}
.search input{width:100%; height:38px; padding:0 12px 0 34px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); font-size:14px; font-family:inherit; outline:none;}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,176,0.15);}

.chips{display:flex; gap:8px; flex-wrap:wrap; padding-top:16px; padding-bottom:2px;}
.chip{font-size:13.5px; padding:6px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); color:var(--text-sub); cursor:pointer; user-select:none; transition:.12s;}
.chip:hover{border-color:var(--border-strong);}
.chip.active{background:var(--accent-bg); border-color:transparent; color:var(--accent); font-weight:600;}

.ad-slot{max-width:880px; margin:16px auto 4px; padding:16px; text-align:center; color:var(--text-hint); font-size:12px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface);}

main{padding-top:14px; padding-bottom:30px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:.14s; text-decoration:none;}
.card:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.thumb{height:104px; display:flex; align-items:center; justify-content:center; font-size:36px;}
.card-body{padding:11px 13px 13px; display:flex; flex-direction:column; gap:4px; flex:1;}
.card-cat{font-size:11px; font-weight:600;}
.card-title{font-size:14.5px; font-weight:600; line-height:1.4; color:var(--text);}
.card-desc{font-size:12.5px; color:var(--text-sub); line-height:1.5; margin-bottom:4px;}
.dl-btn{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px; height:38px; border:1px solid var(--border-strong); border-radius:var(--radius); background:transparent; color:var(--text); font-size:13.5px; font-weight:500; font-family:inherit; text-decoration:none; cursor:pointer; transition:.12s;}
.dl-btn:hover{background:var(--bg);}
.dl-btn.soon{color:var(--text-hint); cursor:default; border-style:dashed;}
.dl-btn.soon:hover{background:transparent;}

.thumb.cat-blue{background:var(--cat-blue-bg); color:var(--cat-blue-fg);} .card-cat.cat-blue{color:var(--cat-blue-fg);}
.thumb.cat-amber{background:var(--cat-amber-bg); color:var(--cat-amber-fg);} .card-cat.cat-amber{color:var(--cat-amber-fg);}
.thumb.cat-green{background:var(--cat-green-bg); color:var(--cat-green-fg);} .card-cat.cat-green{color:var(--cat-green-fg);}
.thumb.cat-pink{background:var(--cat-pink-bg); color:var(--cat-pink-fg);} .card-cat.cat-pink{color:var(--cat-pink-fg);}
.thumb.cat-gray{background:var(--cat-gray-bg); color:var(--cat-gray-fg);} .card-cat.cat-gray{color:var(--cat-gray-fg);}

.empty{text-align:center; color:var(--text-sub); padding:40px 0;}

.site-footer{padding-top:18px; padding-bottom:40px; border-top:1px solid var(--border-strong); text-align:center;}
.foot-links{display:inline-flex; gap:18px; flex-wrap:wrap; justify-content:center; padding:0;}
.foot-links a{font-size:12.5px; color:var(--text-sub); text-decoration:none;}
.foot-links a:hover{text-decoration:underline;}
.copyright{font-size:12px; color:var(--text-hint); margin:10px 0 0;}

.page{max-width:720px; margin:0 auto; padding:34px 18px 50px;}
.page h1{font-size:23px; font-weight:600;}
.page h2{font-size:17px; font-weight:600; margin-top:1.8em;}
.page p,.page li{font-size:15px; color:#33322e;}
.page a{color:var(--accent);}
.back{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--text-sub); text-decoration:none; margin-bottom:8px;}

.form{display:flex; flex-direction:column; gap:14px; max-width:520px; margin-top:8px;}
.form label{display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--text-sub); font-weight:500;}
.form .req{color:#b0432f; font-weight:400; font-size:12px;}
.form input,.form textarea{width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface); font-size:15px; font-family:inherit; color:var(--text); outline:none;}
.form textarea{min-height:130px; resize:vertical; line-height:1.6;}
.form input:focus,.form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,176,0.15);}
.form .hp{position:absolute; left:-9999px; opacity:0;}
.form button{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:11px 22px; border:none; border-radius:var(--radius); background:var(--accent); color:#fff; font-size:14.5px; font-weight:500; font-family:inherit; cursor:pointer; transition:.12s;}
.form button:hover{background:#27598f;}
.form button:disabled{opacity:.55; cursor:default;}
.form-note{font-size:12.5px; color:var(--text-hint); margin-top:2px;}
.form-msg{font-size:14.5px; padding:12px 14px; border-radius:var(--radius); display:none;}
.form-msg.ok{display:block; background:var(--cat-green-bg); color:var(--cat-green-fg);}
.form-msg.err{display:block; background:#fbeaea; color:#9a3030;}