@charset "UTF-8";
/* くらしの広場 — gemeinsames Stylesheet (Keijiban-Optik, dicht, hell, old-school) */
:root{
  --midori:#2e7d5b;      /* Community-Gruen: Kopfleiste, Buttons */
  --midori-dk:#236348;
  --link:#0f4c9c;        /* klassisches JP-Linkblau */
  --visited:#7a4a9c;
  --bg:#ffffff;
  --tint:#f6f5f0;        /* warmes Hellgrau/Beige alter JP-Seiten */
  --tint2:#eceae2;
  --line:#d9d5cc;
  --dot:#c9c4b8;
  --txt:#333333;
  --meta:#888888;
  --red:#c0392b;         /* NEW / 締切 */
  --orange:#d97b18;      /* 回答受付中 */
  --kaiketsu:#2e7d5b;    /* 解決済み */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:13px/1.75 "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,"MS PGothic",sans-serif}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:visited{color:var(--visited)}
a:hover{color:#d9534f}
img{max-width:100%;height:auto}

/* ---------- Kopf ---------- */
.hd-top{border-bottom:1px solid var(--line);background:#fff}
.hd-top .in{max-width:980px;margin:0 auto;padding:4px 10px;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--meta)}
.hd-top a{color:var(--link);text-decoration:none}
.hd-main{background:#fff}
.hd-main .in{max-width:980px;margin:0 auto;padding:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.logo .mark{font-size:22px;font-weight:800;color:var(--midori);letter-spacing:1px}
.logo .yomi{font-size:10.5px;color:var(--meta)}
.searchbox{display:flex;flex:1;min-width:200px;max-width:420px}
.searchbox input{flex:1;border:1px solid #aaa;border-right:0;border-radius:2px 0 0 2px;font:inherit;padding:5px 8px;background:#fff}
.searchbox button{border:1px solid var(--midori-dk);background:var(--midori);color:#fff;font:inherit;font-size:12.5px;padding:5px 12px;border-radius:0 2px 2px 0;cursor:pointer;white-space:nowrap}
.btn-post{margin-left:auto;background:#fff;border:2px solid var(--midori);color:var(--midori);font-weight:700;font-size:12.5px;text-decoration:none;padding:6px 14px;border-radius:3px;white-space:nowrap}
.btn-post:visited{color:var(--midori)}
.btn-post:hover{background:var(--midori);color:#fff}

/* Kategorienav */
.gnav{background:var(--midori);border-bottom:3px solid var(--midori-dk)}
.gnav .in{max-width:980px;margin:0 auto;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gnav a{color:#fff;text-decoration:none;font-size:12.5px;padding:7px 12px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.25)}
.gnav a:visited{color:#fff}
.gnav a:first-child{border-left:1px solid rgba(255,255,255,.25)}
.gnav a.on,.gnav a:hover{background:var(--midori-dk);color:#fff}

.oshirase{max-width:980px;margin:0 auto;padding:5px 10px;font-size:11.5px;color:var(--meta);border-bottom:1px dotted var(--dot)}
.crumb{max-width:980px;margin:0 auto;padding:7px 10px;font-size:11.5px;color:var(--meta)}
.crumb a{text-decoration:none}

/* ---------- Raster ---------- */
.wrap{max-width:980px;margin:0 auto;padding:0 10px 34px}
.cols{display:block}
@media(min-width:840px){
  .cols{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
  aside.side{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);overflow-y:auto}
}

/* ---------- Module ---------- */
.mod{border:1px solid var(--line);margin-bottom:16px;background:#fff}
.mod-hd{background:var(--tint);border-bottom:1px solid var(--line);padding:6px 10px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mod-hd .more{font-size:11.5px;font-weight:400;white-space:nowrap}
.mod-hd.green{border-top:3px solid var(--midori)}

/* Threadlisten (dicht, gepunktete Trenner) */
ul.tlist{list-style:none;margin:0;padding:0}
ul.tlist li{padding:7px 10px;border-bottom:1px dotted var(--dot)}
ul.tlist li:last-child{border-bottom:0}
.tl-t{font-size:13px}
.tl-t a{text-decoration:none}
.tl-t a:hover{text-decoration:underline}
.tl-m{font-size:11px;color:var(--meta);margin-top:1px;display:flex;flex-wrap:wrap;gap:4px 10px}
.cat-tag{color:var(--midori);text-decoration:none;font-size:11px}
.cat-tag:visited{color:var(--midori)}
.b-new{color:var(--red);font-size:10px;font-weight:700}
.b-uke{display:inline-block;font-size:10px;font-weight:700;color:var(--orange);border:1px solid var(--orange);border-radius:2px;padding:0 4px;vertical-align:1px}
.b-kai{display:inline-block;font-size:10px;font-weight:700;color:var(--kaiketsu);border:1px solid var(--kaiketsu);border-radius:2px;padding:0 4px;vertical-align:1px}
.rank{display:inline-block;width:17px;height:17px;line-height:17px;text-align:center;background:var(--midori);color:#fff;font-size:11px;font-weight:700;border-radius:2px;margin-right:6px;vertical-align:1px}
.rank.r1{background:#b3862c}.rank.r2{background:#8a8a8a}.rank.r3{background:#9c6b3f}

/* Kategorie-Uebersicht (Startseite) */
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:0}
.catgrid a{display:block;padding:8px 10px;border-bottom:1px dotted var(--dot);border-right:1px dotted var(--dot);text-decoration:none;font-size:12.5px}
.catgrid a:nth-child(even){border-right:0}
.catgrid a:nth-last-child(-n+2){border-bottom:0}
.catgrid .n{font-size:10.5px;color:var(--meta);margin-left:4px}
@media(min-width:840px){.catgrid{grid-template-columns:1fr 1fr 1fr 1fr}
  .catgrid a{border-right:1px dotted var(--dot)}
  .catgrid a:nth-child(even){border-right:1px dotted var(--dot)}
  .catgrid a:nth-child(4n){border-right:0}
  .catgrid a:nth-last-child(-n+4){border-bottom:0}}

/* ---------- Threadseite ---------- */
.q-head{border:1px solid var(--line);border-top:3px solid var(--midori);background:#fff;margin-bottom:0}
.q-cat{padding:8px 12px 0;font-size:11.5px}
.q-title{margin:2px 0 0;padding:0 12px 8px;font-size:17px;line-height:1.5;font-weight:700}
.q-meta{padding:0 12px 8px;font-size:11px;color:var(--meta);display:flex;flex-wrap:wrap;gap:4px 14px;border-bottom:1px solid var(--line)}
.q-body{padding:11px 12px;background:#fdfcf7;border-bottom:1px solid var(--line)}
.q-body p{margin:0 0 10px}
.q-body p:last-child{margin:0}
.q-foot{padding:6px 12px;font-size:11.5px;color:var(--meta);display:flex;gap:14px;align-items:center}

.res-hd{background:var(--tint);border:1px solid var(--line);border-top:0;padding:6px 12px;font-size:12.5px;font-weight:700}
.res{border:1px solid var(--line);border-top:0;background:#fff}
.res-meta{padding:7px 12px 0;font-size:11px;color:var(--meta)}
.res-no{color:var(--midori);font-weight:700;font-size:12px;margin-right:6px}
.res-name{color:var(--txt);font-weight:700;font-size:12px}
.res-name .san{font-weight:400;color:var(--meta)}
.res-body{padding:4px 12px 9px;font-size:13px}
.res-body p{margin:0 0 9px}
.res-body p:last-child{margin:0}
.res-foot{padding:0 12px 8px}
.sanko{display:inline-block;font-size:11px;color:var(--meta);border:1px solid var(--line);border-radius:2px;padding:1px 8px;text-decoration:none;background:var(--tint)}
.sanko:visited{color:var(--meta)}
.sanko.voted{color:var(--midori);border-color:var(--midori);font-weight:700}
.res.best{background:#f4faf6}
.res .b-best{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--kaiketsu);border-radius:2px;padding:0 5px;margin-left:8px;vertical-align:1px}
.quote{margin:0 0 9px;padding:6px 10px;border-left:3px solid var(--tint2);background:var(--tint);color:#666;font-size:12.5px}
.quote .qref{display:block;font-size:10.5px;color:var(--meta)}

/* Anhaenge in Antworten */
.attach{border:1px solid var(--line);background:var(--tint);padding:5px;margin:0 0 9px;max-width:460px}
.attach img{display:block;width:100%;height:auto}
.attach video{display:block;width:100%;height:auto;max-height:520px;background:#000}
.attach .cap{font-size:10.5px;color:var(--meta);margin-top:3px}

/* Produkt-Empfehlungsbox (Expertenpost) */
.osusume{border:1px solid var(--midori);margin:10px 0 4px}
.osusume-hd{background:#eaf4ee;color:var(--midori-dk);font-size:12px;font-weight:700;padding:5px 10px;border-bottom:1px solid #cfe3d6}
.osusume-bd{padding:10px}
.osusume-bd .pshot{display:block;max-width:300px;margin:0 auto 10px;border:1px solid var(--line)}
.osusume-bd .pshot img{display:block;width:100%;height:auto}
.osusume-bd h3{margin:0 0 4px;font-size:14.5px}
.osusume-bd ul{margin:0 0 10px;padding-left:18px;font-size:12.5px}
.osusume-bd li{margin-bottom:3px}
.osusume-bd li.chui{color:#8a5a08}
.btn-shop{display:block;text-align:center;background:var(--midori);border:1px solid var(--midori-dk);color:#fff !important;font-size:13.5px;font-weight:700;text-decoration:none;padding:9px 12px;border-radius:3px}
.btn-shop:visited{color:#fff !important}
.pr-note{font-size:10.5px;color:var(--meta);margin-top:5px;text-align:center}

/* Geschlossener Thread */
.closed{border:1px solid var(--line);background:var(--tint);padding:10px 12px;font-size:12.5px;color:#666;margin-top:14px}

/* Expertenpost */
.res.expert{border-left:3px solid var(--midori)}
.b-senmon{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--midori);border-radius:2px;padding:0 5px;margin-left:6px;vertical-align:1px}
.b-staff{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:#5a6b7d;border-radius:2px;padding:0 5px;margin-left:6px;vertical-align:1px}

/* Antwortformular */
.postbox{border:1px solid var(--line);margin-top:16px;background:#fff}
.postbox .bd{padding:10px 12px}
.postbox input[type=text],.postbox textarea{display:block;width:100%;border:1px solid #aaa;border-radius:2px;font:inherit;padding:6px 8px;background:#fffef8;margin-bottom:8px}
.postbox textarea{min-height:90px;resize:vertical}
.postbox .note{font-size:11px;color:var(--meta);margin-top:6px}
.btn-submit{border:1px solid var(--midori-dk);background:var(--midori);color:#fff;font:inherit;font-size:13px;font-weight:700;padding:7px 22px;border-radius:3px;cursor:pointer}
.res.pending{background:#fffdf2}
.res .b-pend{display:inline-block;font-size:10px;font-weight:700;color:#b3862c;border:1px solid #b3862c;border-radius:2px;padding:0 4px;margin-left:8px;vertical-align:1px}

/* Seitennavigation */
.pager{display:flex;gap:4px;justify-content:center;margin:14px 0;font-size:12px}
.pager a,.pager span{border:1px solid var(--line);padding:3px 9px;text-decoration:none;background:#fff}
.pager span.cur{background:var(--midori);color:#fff;border-color:var(--midori)}

/* Sidebar */
.side .mod-hd{font-size:12.5px}
ul.slist{list-style:none;margin:0;padding:0;font-size:12px}
ul.slist li{padding:6px 10px;border-bottom:1px dotted var(--dot)}
ul.slist li:last-child{border-bottom:0}
ul.slist a{text-decoration:none}
ul.slist a:hover{text-decoration:underline}
.tagcloud{padding:9px 10px;display:flex;flex-wrap:wrap;gap:6px}
.tagcloud a{font-size:11.5px;border:1px solid var(--line);border-radius:12px;padding:1px 9px;text-decoration:none;background:var(--tint)}

/* Suchseite */
.s-info{padding:9px 10px;font-size:12.5px;border:1px solid var(--line);background:var(--tint);margin-bottom:14px}
.s-info b{color:var(--red)}
.s-hit em{font-style:normal;background:#fff3b8}

/* ---------- Fuss ---------- */
footer{border-top:3px solid var(--midori);background:var(--tint);margin-top:30px}
footer .in{max-width:980px;margin:0 auto;padding:16px 10px;font-size:11.5px;color:#666}
footer .flinks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px}
footer a{color:var(--link);text-decoration:none}
.copyright{color:var(--meta);font-size:11px}

@media(max-width:600px){
  body{font-size:13.5px}
  .btn-post{margin-left:0}
  .hd-main .in{gap:8px}
  .q-title{font-size:15.5px}
}