@charset "utf-8"; /* =========================================================== ヤバい狸の集会場 — 共通CSS ・本物のframesetは使わない。CSS Gridで「見た目だけ」フレーム風・暖色クリーム＝素人っぽさと懐かしさを出しつつ、読みやすさ優先・制作物ページでを付けると左カラムを消して全幅 =========================================================== */ :root{ --paper:#fdf3d4; --paper2:#fff8e2; --card:#fffdf3; --ink:#33240f; --brown:#6b3f1f; --tan:#d2a35f; --line:#a9743a; --red:#b22020; --green:#1a6c37; --navy:#144a86; --link:#0033cc; --visited:#7a1f99; } *{box-sizing:border-box} html{background:var(--paper)} body{ margin:0; color:var(--ink); font-family:"MS PGothic","ＭＳＰゴシック","Osaka",sans-serif; font-size:16px; line-height:1.7; background:var(--paper); height:100vh; overflow:hidden; display:flex; flex-direction:column; } a{color:var(--link)} a:visited{color:var(--visited)} .screen{flex:1;display:flex;flex-direction:column;min-height:0} /* ===== 擬似フレーム ===== */ .frameset{flex:1;display:grid;grid-template-columns:186px 1fr;min-height:0} .menu-frame{background:#f3e2ad;border-right:4px double var(--line); padding:10px 8px 16px;overflow-y:auto;min-height:0} .main-frame{background:var(--paper2);padding:0 0 18px;overflow-y:auto;min-height:0;min-width:0} body.no-side .menu-frame{display:none} body.no-side .frameset{grid-template-columns:1fr} /* ===== 左カラム ===== */ .side-counter{margin:0 0 10px;padding:6px 4px 5px;background:#fffbe8; border:2px groove var(--tan);text-align:center} .side-counter .counter{display:block;margin:0 auto 3px;padding:2px 4px;background:#111; border:2px inset #7a5a2c;color:#34ff34;font-family:"Courier New",monospace; letter-spacing:.1em;font-size:16px} .side-counter .cap{font-size:11px;color:#5a3a1c} .side-counter .today-line{margin-top:3px;font-family:"Courier New",monospace; font-size:10px;color:#4a3418} .side-counter .kiriban{display:block;margin-top:3px;color:var(--red);font-size:10px;line-height:1.4} .menu-tanuki{text-align:center;font-family:"Courier New",monospace;color:#6b3f1f;margin:0 0 6px} .menu-h{margin:0 0 8px;padding:3px 0;text-align:center;font-size:13px;font-weight:bold; color:#fff;background:var(--brown);border:1px solid #fff} .menu-btn{display:block;margin:0 0 7px;padding:7px 8px;text-align:center; font-size:15px;font-weight:bold;color:#14406e !important; background:#fff7dd;border:3px outset #f1dca0;text-decoration:none !important} .menu-btn:hover{background:#ffe6a0;border-style:inset;color:#a01414 !important} .menu-btn small{display:block;font-size:10px;font-weight:normal;color:#7a5a2c} .menu-btn:hover small{color:#8a3010} .menu-btn.current{background:#ffe6a0;border-style:inset;color:#a01414 !important} /* ===== 看板（トップ） ===== */ .pagetop{background:linear-gradient(#fff6d8,#e9c273);border-bottom:4px double var(--line); padding:8px 14px 7px;text-align:center} .rainbow-title{margin:0 0 1px;font-size:42px;font-weight:bold;letter-spacing:.06em; text-shadow:1px 1px 0 #fff,3px 3px 0 #caa25a;line-height:1.1} .pagetop .sub{font-size:13px;color:#5a3a1c} .r18-line{margin:4px 0 0;font-size:11px;color:#7a2020} /* 下層ページの見出し帯 */ .pagehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:8px 14px;background:linear-gradient(#fff6d8,#e9c273); border-bottom:4px double var(--line)} .pagehead h1{margin:0;font-size:21px;color:#6b2f0d;flex:1;min-width:180px} .back-btn{display:inline-block;padding:3px 10px;background:#fff7dd;border:3px outset #f1dca0; color:#14406e !important;text-decoration:none !important;font-size:13px;font-weight:bold} .back-btn:hover{border-style:inset;background:#ffe6a0} .news-bar{background:#fff2b8;border-bottom:2px solid #c99a2c;overflow:hidden; white-space:nowrap;padding:4px 0;color:var(--red);font-weight:bold;font-size:13px} marquee{color:var(--red)} .inner{padding:14px 16px 0} .welcome{border:3px double var(--red);background:#fff6f2;padding:10px 12px;margin-bottom:12px} .welcome .face{font-family:"Courier New",monospace;font-weight:bold;color:#663300;font-size:18px} .oshirase{margin-bottom:14px;padding:8px 10px;background:#fffbe0; border:2px solid var(--tan);border-left:10px solid #d17a1e;font-size:14px} .oshirase .ttl{font-weight:bold;color:#8a3410} .kouji{display:inline-block;margin-left:4px;padding:1px 6px;background:#ffe680; border:2px outset #e0c060;font-size:11px;font-weight:bold;color:#8a3010} .sec-head{margin:18px 0 8px;padding:3px 8px;font-size:16px;font-weight:bold; color:#fff;background:var(--brown);border-left:10px solid #d17a1e} .histbox{border:2px inset #d8c48a;background:#fff;padding:8px 12px;font-size:14px} .histbox dl{margin:0} .histbox dt{color:var(--navy);font-weight:bold;font-family:"Courier New",monospace} .histbox dd{margin:0 0 6px 12px} .new-mark{display:inline-block;background:var(--red);color:#fff;font-size:10px; padding:0 3px;margin-left:4px;font-weight:bold} .roomgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .room{border:2px ridge var(--tan);background:var(--card);padding:8px 10px} .room h4{margin:0 0 4px;font-size:15px;color:#8a3410} .room p{margin:0 0 6px;font-size:12px;color:#4a3a24} .btn-old{display:inline-block;padding:2px 8px;background:#f0e6c8;border:2px outset #ddca9a; color:#222 !important;text-decoration:none !important;font-size:12px} .btn-old:hover{border-style:inset;background:#ffe6a0} .table-old{width:100%;border-collapse:collapse;background:#fff;font-size:13px} .table-old th,.table-old td{border:1px solid var(--line);padding:5px 7px;vertical-align:top} .table-old th{background:#ecd48f;color:#3a260f;text-align:left;white-space:nowrap} .st-ok{color:var(--green);font-weight:bold} .st-wip{color:#a86a10;font-weight:bold} .st-plan{color:#5a4a30} .r18-tag{display:inline-block;padding:0 3px;background:#ffe0e0;border:1px solid var(--red); color:var(--red);font-size:10px;font-weight:bold} /* ゲームのサムネイル */ .game-thumb{display:block;width:100%;height:132px;object-fit:cover;object-position:center 32%; margin:0 0 8px;border:2px inset #d8c48a;background:#1a1420;border-radius:2px} .game-logo{display:block;width:100%;max-width:360px;height:auto;margin:0 auto} .logo-plate{background:#1a1420;border:3px ridge var(--tan);padding:8px;margin-bottom:12px;text-align:center} /* 年齢の目安バッジ（ボタンの中に入れる想定） */ .age-badge{display:inline-block;margin-left:6px;padding:0 5px;background:var(--red); color:#fff;border:1px solid #7a1010;font-size:11px;font-weight:bold; font-family:"Courier New",monospace;letter-spacing:.04em;vertical-align:1px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px} .panel{border:2px ridge var(--tan);background:var(--card);padding:8px 10px} .panel h4{margin:0 0 6px;font-size:14px;color:#6b2f0d;border-bottom:1px dotted var(--line);padding-bottom:3px} .banner-wall{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#fff;border:2px inset #d8c48a} .banner88{width:88px;height:31px;border:1px solid #4a3418;display:flex;align-items:center; justify-content:center;text-align:center;font-size:9px;line-height:1.2;color:#fff; text-decoration:none !important;font-weight:bold} .b1{background:linear-gradient(#3a6ea5,#16375e)} .b2{background:linear-gradient(#a53a3a,#5e1616)} .b3{background:linear-gradient(#3a8a52,#16401f)} .b4{background:linear-gradient(#8a6a1e,#4a3410)} .b5{background:linear-gradient(#6a3a8a,#341650)} .b6{background:linear-gradient(#2b2b2b,#000)} .own-banner{margin-top:8px;font-size:12px;color:#4a3a24} .own-banner .banner88{border:2px ridge var(--tan)} .oldhr{height:10px;border:0;margin:18px 0; background:repeating-linear-gradient(90deg,#d17a1e 0 10px,#fff8e2 10px 20px,#6b3f1f 20px 30px,#fff8e2 30px 40px)} .botnote{text-align:center;font-size:12px;color:#6a4a24;margin-top:10px} .botnote .rec{color:var(--navy)} .env-note{margin-top:10px;padding:6px 8px;background:#fffbe8;border:2px groove var(--tan); font-size:11px;color:#4a3418;text-align:center} .badge{display:inline-block;margin:2px 1px;padding:1px 3px;background:#e7e0cc; border:1px solid #7a5a2c;font-size:10px;font-family:"Courier New",monospace} .footer{background:#e9c273;color:#4a2c10;text-align:center;padding:9px;font-size:12px; border-top:4px double var(--line)} .footer a{color:var(--navy)} .footer .face{font-family:"Courier New",monospace;color:#6b3f1f} .footer-updated{display:inline-block;margin-top:4px;font-size:11px;color:#7a5228; font-family:"Courier New",monospace;letter-spacing:.03em} /* ===== 掲示板 ===== */ .form-old{border:2px ridge var(--tan);background:var(--card);padding:10px 12px;margin-bottom:14px} .form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:7px} .form-row label{font-size:13px;font-weight:bold;color:#5a3a1c;width:82px} .form-old input[type=text],.form-old input[type=password],.form-old textarea{ font-family:inherit;font-size:14px;padding:4px 6px;background:#fff; border:2px inset #d8c48a;color:var(--ink)} .form-old input[type=text]{width:220px} .form-old input[type=password]{width:130px} .form-old textarea{width:100%;min-height:110px;line-height:1.6} .form-old .hint{font-size:11px;color:#7a5a2c} .btn-submit{padding:5px 20px;font-size:15px;font-weight:bold;font-family:inherit; background:#fff7dd;border:3px outset #f1dca0;color:#14406e;cursor:pointer} .btn-submit:hover{border-style:inset;background:#ffe6a0;color:#a01414} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .msg-ok{margin-bottom:12px;padding:7px 10px;background:#eaf7ea;border:2px solid var(--green); color:#14501f;font-size:13px} .msg-ng{margin-bottom:12px;padding:7px 10px;background:#fff0f0;border:2px solid var(--red); color:#7a1010;font-size:13px} .post{margin:0 0 12px;border:2px ridge var(--tan);background:#fff} .post-head{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline; padding:4px 8px;background:#f6e6b8;border-bottom:1px dotted var(--line);font-size:12px} .post-no{font-family:"Courier New",monospace;font-weight:bold;color:#8a3410} .post-sub{font-weight:bold;color:#6b2f0d;font-size:14px} .post-name{color:var(--green);font-weight:bold} .post-date{font-family:"Courier New",monospace;color:#6a4a24;font-size:11px;margin-left:auto} .post-body{padding:8px 10px;font-size:14px;line-height:1.75;word-break:break-word;white-space:pre-wrap} .post-body a{word-break:break-all} .post-foot{padding:3px 8px;border-top:1px dotted var(--line);text-align:right} .post-foot a{font-size:11px;color:#7a5a2c} .pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:14px 0} .pager a,.pager span{display:inline-block;min-width:28px;text-align:center;padding:2px 7px; font-size:13px;border:2px outset #ddca9a;background:#f0e6c8;color:#222 !important; text-decoration:none !important} .pager a:hover{border-style:inset;background:#ffe6a0} .pager .cur{border-style:inset;background:#ffe6a0;font-weight:bold;color:#a01414 !important} /* ===== チャット ===== */ .chat-wrap{display:flex;flex-direction:column;gap:8px} .chat-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center; padding:6px 8px;background:#f6e6b8;border:2px ridge var(--tan);font-size:13px} .chat-bar .now{padding:1px 6px;background:#e6f5e6;border:1px solid var(--green); color:var(--green);font-weight:bold;font-size:12px} .chat-log{height:340px;overflow-y:auto;padding:8px 10px;background:#fff; border:2px inset #d8c48a;font-size:14px;line-height:1.7} .chat-line{margin:0 0 3px;word-break:break-word} .chat-line .t{font-family:"Courier New",monospace;font-size:11px;color:#8a7a5a;margin-right:5px} .chat-line .n{font-weight:bold;color:var(--navy)} .chat-line .n.me{color:#a0501a} .chat-line.sys{color:var(--green);font-size:12px} .chat-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .chat-form input[type=text]{font-family:inherit;font-size:14px;padding:4px 6px;background:#fff; border:2px inset #d8c48a;color:var(--ink)} .chat-form .name{width:130px} .chat-form .say{flex:1;min-width:200px} .chat-note{font-size:11px;color:#6a4a24} @media(max-width:680px){ body{display:block;height:auto;overflow:visible} .screen{display:block} .frameset{display:block} .menu-frame{overflow:visible;border-right:0;border-bottom:4px double var(--line)} .menu-btn{display:inline-block;width:auto;margin:2px} .menu-btn small{display:none} .main-frame{overflow:visible} .rainbow-title{font-size:30px} .roomgrid,.two-col{grid-template-columns:1fr} .form-old input[type=text]{width:100%} .form-row label{width:auto} }