/* public/theme/pc.css
 * where : 20サイトの公開ページを PC で見たとき（src/app/(site)/layout.tsx が User-Agent で判定。SP は sp.css）。このあとに base.css を読む。
 * what  : みんぽけの PC テーマ（minpoke.net の themes/PC/style.css・common.css。みんもりもほぼ同じ）の写し。
 *         各部品の大きさ・文字の大きさ・余白・角丸（元と同じく、タグ・入力欄・送信ボタン・「スレッド一覧はこちら」だけ）・
 *         マウスを乗せたときの動き（絵の拡大・色の変化・ボタンが沈む）は、元の値のまま。
 * why   : 2026-10-14 しゅんさんの指示「大きさやフォントサイズ、border-radius などは全てみんぽけと同じにしろ。変えて良いのは画像とか色だけ。
 *         マウスホバー時の動きもしっかり再現しろ」。
 *         変えたのは、絵（ヘッダー・背景はサイトごとの絵。--hero-img / --bg-img）と、色の目印だけ：
 *         元のピンク（#FC6F7F・hotpink・#ff80c4）→ --hover / --icon、灰色の帯（#4c4c4c）→ --bar、レスの帯（#66cdaa）→ --res など
 *         （色の割り当ては src/lib/themes.ts の themeCssVars）。元は画像を minmori.net から直接読んでいたが、すべて自前にした。
 *         ロゴと掲示板のロゴは、元は画像（top_front.png・bbs_logo_3.jpg）だったので、サイト名の文字と CSS で同じ大きさに作る。
 * 並び：1.土台 2.ヘッダー 3.2列 4.見出しの帯 5.記事一覧 6.記事ページの頭 7.本文 8.コメント 9.掲示板 10.サイドバー 11.ボタン・ページ送り 12.フッター
 */

/* ---------- 1. 土台 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'ヒラギノ丸ゴ Pro W4', 'Hiragino Maru Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Osaka, sans-serif; }
a { text-decoration: none; color: royalblue; }
a:hover { color: var(--hover); text-decoration: none !important; }
body { background: #f5f5f8 var(--bg-img) no-repeat fixed; background-size: 100% 100%; }
li { list-style-type: none; }
.clear { clear: both; }
.center { text-align: center; }
.icon { color: var(--icon); font-size: 17px; }
.bold_blue { color: cornflowerblue; font-weight: bold; }
.bold_red { color: crimson; font-weight: bold; }
.bold_orange { color: darkorange; font-weight: bold; }
/* 絵を指すと 0.2 秒で 1.2 倍（記事一覧・人気記事） */
.grow > img { transition: .2s ease-in-out; }
.article:hover div > img, .grow:hover > img, .popular_post_list:hover > div > img { transform: scale(1.2, 1.2); }

/* ---------- 2. ヘッダー（上に濃い帯 30px → 223px のサイトの絵の上にロゴ → 50px のメニュー） ---------- */
#head_wrap { width: 100%; background-color: #fff; border-top: 30px solid #333; }
#header { width: 100%; height: 223px; margin: 0 auto; text-align: center; background: var(--hero-img) no-repeat fixed; background-size: 100% 253px; }
#header > a { display: flex; height: 100%; align-items: center; justify-content: center; }
/* ロゴ（元は画像。サイト名をサイトの書体で、太い縁取りと影を付けて描く） */
.site_logo { font-family: var(--logo-font), sans-serif; font-weight: var(--logo-w); font-size: 96px; line-height: 1.1; color: var(--a); letter-spacing: .02em;
  -webkit-text-stroke: 14px #fff; paint-order: stroke fill; filter: drop-shadow(0 0 1px var(--d)) drop-shadow(3px 4px 0 var(--d)) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.slant .site_logo { font-style: italic; }
#head_menu { height: 50px; text-align: center; background: var(--menu2); background: linear-gradient(to bottom, var(--menu1) 0%, var(--menu2) 100%); }
.head_list { position: relative; display: inline-block; width: 220px; height: 50px; padding-top: 12px; font-size: 20px; text-align: center; color: #fff; }
a:hover > .head_list { color: var(--hover); background-color: #333; }

/* ---------- 3. 2列（全体 1115px・白い面 1090px、本文 760px ＋ 右 300px） ---------- */
#outer_wrap { width: 1115px; margin: 0 auto; background-color: #f5f5f8; }
#wrap { width: 1090px; margin: 0 auto; padding: 10px; background-color: #fff; }
#footer, #content, #left, #right { background-color: #fff; }
#content { float: left; width: 760px; margin-right: 10px; }
#right { float: left; width: 300px; position: relative; }

/* ---------- 4. 見出しの帯（高さ 40px・15px の白文字） ---------- */
.list_top { height: 40px; padding: 5px; font-size: 15px; line-height: 30px; color: #fff; background-color: var(--bar); }
.list_body { padding: 5px; }

/* ---------- 5. 記事一覧（枠線と影の四角い箱。絵 160×140、題名 21px） ---------- */
#article_list { margin-top: 10px; }
.article_list_unit { position: relative; margin: 10px; border: 1px solid silver; box-shadow: 0 0 10px silver; }
.article { height: 161px; margin: 10px; }
.article_img { float: left; width: 160px; height: 140px; margin: 10px 10px 20px 8px; overflow: hidden; }
.article_img > img { width: 160px; height: 140px; object-fit: cover; }
.article_right { float: right; width: 540px; height: 160px; padding: 10px; }
.article_list_unit > a:hover .article_right > .article_list_title { color: var(--hover); }
.time { float: left; height: 18px; font-size: 10px; font-weight: bold; color: #333; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; }
.article_list_title { clear: left; font-size: 21px; font-weight: bold; color: gray; }
.comment_number { float: left; margin-left: 10px; padding: 0 5px; font-size: 10px; color: #fff; background-color: var(--hover); }
.tag_area { position: absolute; bottom: 0; left: 198px; color: gray; }
.categories, .tags, .categories > a, .tags > a { color: gray; }
.categories, .tags { width: 520px; padding: 5px; border-top: 1px dashed silver; }
.categories > a:hover, .tags > a:hover { color: var(--hover); }

/* ---------- 6. 記事ページの頭（絵は白い枠と影・最大 500px、タグは金色、題名 27px） ---------- */
.article_body { padding: 0 10px 10px; }
.post_img { text-align: center; }
.post_img > img { max-width: 500px; margin: 20px; border: 4px solid #fff; box-shadow: 0 0 10px silver; }
.article_tag_area { margin-bottom: 10px; }
.article_tag { margin: 0 5px 5px 0; padding: 8px; font-size: 12px; color: #fff; border: 2px solid #ffa501; border-radius: 5px; background: #ffdb3d; background: linear-gradient(to bottom, #ffdb3d 0%, #ffb01e 50%, #ff9900 51%, #ffd800 100%); }
.article_tag:hover { opacity: .8; }
.article_title_area { margin-bottom: 25px; padding: 10px; border-top: 2px solid #eaecee; border-bottom: 2px solid #eaecee; }
.article_title { font-size: 27px; font-weight: bold; color: #4a4a4a; }

/* ---------- 7. 本文（記事の HTML はみんぽけ・みんもりと同じ書き方） ---------- */
.article_content { font-size: 17px; line-height: 1.8em; }
.article_content > img { display: block; max-width: 580px; margin: 0 auto; object-fit: contain; }
.article_content > table { width: 100%; border-collapse: collapse; border: 1px solid gray; }
.article_content > table > tbody > tr > td { padding: 10px; border: 1px solid gray; word-break: break-all; }
.article_content > table > tbody > tr > th { padding: 3px; text-align: center; color: #fff; border: 1px solid gray; background: #00b7ea; background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%); }
.midasi { margin: 20px 0; padding: 10px; font-size: 20px; font-weight: bold; border: 2px solid var(--a); border-left-width: 15px; }
.mini_midasi { margin: 10px; padding: 10px; font-size: 18px; border-left: 15px solid cornflowerblue; }
.blue_midasi { margin: 20px 0; padding: 10px; font-size: 18px; font-weight: bold; border-left: 15px solid cornflowerblue; }
div.matome_h, div.t_h { padding-left: 10px; font-size: 12px; font-weight: bold; border-left: 13px solid var(--res); box-shadow: 0 1px 2px silver; }
div.matome_b, div.t_b { margin: 20px 20px 90px 20px; font-size: 18px; color: #333; }
div.matome_b > img, div.t_b > img { max-width: 100%; height: auto; }
.matome_date { color: var(--res-date); }
.matome_quote { margin-bottom: 20px; padding-left: 5px; font-size: 12px; border-left: 13px solid var(--res); box-shadow: 0 3px 8px silver; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.admin_comment { padding-left: 10px; font-size: 13px; font-weight: bold; color: var(--res-date); border-left: 13px solid orange; box-shadow: 0 3px 8px silver; }
.innyou_text { padding: 15px; background-color: whitesmoke; border: 1px solid gainsboro; border-radius: 5px; }
.innyou_moto { font-size: 3px; color: gray; }
.twitter-tweet { margin: 0 auto; }
/* 「この記事も読まれています」（[link id]。src/lib/content.ts）。指すと絵が 1.1 倍・題名の色が変わる */
.article_content > .article_list_unit_mini { margin: 10px 0; }
.article_mini { display: table; width: 100%; border: 1px solid silver; box-shadow: 0 0 10px silver; background-image: linear-gradient(-135deg, var(--icon) 10px, transparent 0); }
.article_img_mini { display: table-cell; width: 80px; height: auto; padding: 5px; vertical-align: middle; overflow: hidden; }
.article_img_mini > img { display: block !important; width: 80px; height: 80px; object-fit: cover; transition: .2s ease-in-out; }
.article_list_unit_mini > a:hover > .article_mini > .article_img_mini > img { transform: scale(1.1, 1.1); }
.article_list_title_mini { width: calc(100% - 10px); padding: 5px; font-size: 14px; line-height: 22px; font-weight: bold; color: #333; }
a:hover > .article_mini > .article_list_title_mini { color: var(--hover); }
.title_suggest { width: 160px; margin: 0 0 6px 3px; padding: 0 3px; text-align: center; font-size: 10px; color: #fff; background-color: var(--suggest); }

/* ---------- 8. 記事のコメント ---------- */
div#respond, .comment-form { padding: 0 30px 10px; text-align: center; }
textarea#comment { width: 100%; height: 100px; padding: 10px; border: 1px solid #dcdcdc; border-radius: 5px; }
#author { width: 300px; margin-bottom: 3px; padding: 5px; border: 1px solid #dcdcdc; border-radius: 5px; }
.comment-form-author { float: left; text-align: left; }
input#submit, #bbp_reply_submit, .submit_btn { width: 100%; height: 50px; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333; border: 0; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .02), inset 0 1px 0 rgba(255, 255, 255, .96), 0 1px 2px rgba(0, 0, 0, .32); background: #00b7ea; background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%); cursor: pointer; }
/* 画像アップロード（名前欄の右。みんぽけの #add_image） */
#add_image { display: flex; float: right; width: 360px; margin-bottom: 3px; }
#add_image .add_image_btn { flex: none; margin: 0; border-radius: .25rem 0 0 .25rem; }
#add_image .form-control { flex: 1; border-radius: 0 .25rem .25rem 0; background: #fff; }
div.each-comment > p { margin: 0 0 30px; padding: 10px; }
div.comment-data { padding: 5px 10px; font-size: 12px; border-left: 13px solid var(--cmt); box-shadow: 0 1px 2px silver; }
.children div.comment-data { border-left-color: var(--cmt2); }
.children { margin-left: 20px; }
div.comment-author { float: left; }
div.comment-meta { float: left; margin-top: 3px; margin-left: 10px; }
div.reply { float: left; margin-left: 10px; }
.author_id, .commentmetadata { font-size: 10px; color: #8e8e8e; }
.admin_name { font-weight: bold; color: orange; }
.comment_img { margin-bottom: 10px; text-align: center; }
.comment_img > a > img { max-height: 200px; padding: 5px; box-shadow: 1px 1px 3px darkgrey; }

/* ---------- 9. 掲示板 ---------- */
/* 掲示板のロゴ（元は画像 bbs_logo_3.jpg：木の額縁の黒板に白い大きな文字。黒板の絵 common/bbs-board.jpg の上にサイトの掲示板名を書く） */
.bbs_title_logo { clear: left; margin: 20px 0; }
.bbs_board { position: relative; display: flex; align-items: center; height: 112px; padding: 0 0 0 46px; background: #2f4a3d url(/theme/common/bbs-board.jpg) center / 100% 100% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.bbs_board_name { font-family: var(--logo-font), sans-serif; font-weight: var(--logo-w); font-size: 36px; color: #fff; opacity: .93; text-shadow: 0 0 1px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .25); white-space: nowrap; }
#right .bbs_title_logo { margin: 5px 0 10px; }
#right .bbs_board { height: 54px; padding-left: 20px; }
#right .bbs_board_name { font-size: 19px; }
.bbs_breadcrumb { padding: 6px 4px; font-size: 13px; color: #666; }
/* スレの一覧（元の bbPress と同じく、メモ帳のアイコン＋青いリンク「スレタイ（レス数）」、行の地は交互に薄い灰色） */
.bbs_topic_list li, .bbs_side_list li { padding: 8px 4px; border-bottom: 1px solid #eee; background: #fff; }
.bbs_topic_list li:nth-child(odd), .bbs_side_list li:nth-child(odd) { background: #f9f9f9; }
.bbs_topic_list a, .bbs_side_list a { color: #007bff; }
.bbs_icon { height: 18px; margin-right: 4px; vertical-align: middle; }
.bbs_count { margin: 0 0 10px; text-align: right; font-size: 11px; color: #333; }
div.comment-data-bbs { width: 735px; padding: 0 10px; font-size: 12px; border-left: 13px solid var(--p); box-shadow: 0 1px 2px silver; }
.comment-data-bbs > div.comment-meta { margin-top: 1px; margin-left: 10px; float: left; }
div.bbs-each-comment > p { margin: 0 0 30px; padding: 10px; font-size: 16px; line-height: 22px; transition: all 2s ease; }
.bbs_name { font-weight: bold; color: var(--p); }
/* 「返信」ボタン（帯の右端。みんぽけの .bbs-reply-button） */
.bbs-reply-button { float: right; margin-top: 4px; padding: 0 10px !important; }
.bbs_pickup { background-color: var(--pickup) !important; }
.bbp-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.bbp-attachments a img { max-width: 160px; max-height: 160px; padding: 5px; border-radius: 5px; box-shadow: 0 0 10px silver; }
.bbs_back { padding: 12px; text-align: center; }
.bbs_back a { font-weight: bold; color: var(--p); }
.bbs_form { position: relative; margin: 20px 0; padding: 12px; border: 1px solid #ddd; }
.bbs_form .form-control { margin: 6px 0; }
.bbs_form .form_row { display: flex; gap: 6px; }
.bbs_form .file_label { display: block; margin: 6px 0; font-size: 13px; color: #555; }
.bbs-form-textarea { width: 100% !important; height: 130px !important; }
#bbp_reply_submit { font-size: 16px; }

/* ---------- 10. サイドバー（人気記事は 278×200 の絵の上に題名。題名の地は 5 色を順に） ---------- */
/* カテゴリ一覧（みんぽけ PC の style.css 509〜523 行と同じ値。ホバーの色はサイトの色） */
.category_list { margin: 0; }
.category_list_unit { padding: 10px 0 10px 5px; border-bottom: 1px solid #eee; }
.category_list > a { color: #4c4c4c; }
.category_list > a:hover { color: var(--hover); }
/* 人気記事の並び：右の列 300px に 278px のカード。左右・上・カードの間をすべて 11px にそろえる（2026-10-14 しゅんさんの指摘） */
.popular_list { padding: 11px 11px 0; }
.popular_post_side_link { position: relative; display: block; color: #fff; }
.popular_post_list { position: relative; width: 278px; height: 200px; margin: 0 0 11px; overflow: hidden; border: 1px solid gray; box-shadow: 0 0 10px silver; }
.popular_post_img > img { width: 278px; height: 200px; object-fit: cover; }
.popular_post_title { position: absolute; bottom: 0; width: 100%; padding: 10px; font-size: 15px; opacity: .96; }
.popular_post_side_link:hover > .popular_post_list > .popular_post_title { color: #fff; font-weight: bold; text-shadow: 0 0 3px #fff; }
.side_comment { position: absolute; z-index: 10; top: 4px; right: 4px; width: 80px; text-align: center; font-size: 12px; color: #fff; background-color: var(--hover); }
.p1 { background-color: #047da8; } .p2 { background-color: #333; } .p3 { background-color: #f73d7e; } .p4 { background-color: #ab8c26; } .p5 { background-color: #55ad47; }

/* ---------- 11. ボタン・ページ送り・広告・シェア ---------- */
/* 押し込みボタン（「スレッド一覧はこちら」「もっと読む」。角丸 10px、指すと影が消えて 10px 沈む） */
/* 最新スレッド一覧＋「スレッド一覧はこちら」の枠。みんぽけは bbs_topic_list.php で #bbpress-forums（bbpress.css：文字 12px・下 20px）に入れていたため、
   ボタンの文字（120%）は 14.4px になる。この枠が無いと 19.2px に大きくなっていた（2026-10-14 しゅんさん指摘） */
.bbs_top_forums { clear: both; overflow: hidden; margin-bottom: 20px; font-size: 12px; background: transparent; }
.hover_btn_area { height: 70px; margin: 10px; }
.btn_wrap { width: 280px; margin: auto; font-size: 120%; font-weight: bold; text-align: center; color: #fff; }
.hover_btn { padding: 12px; color: #fff !important; background: var(--btn); border-radius: 10px; box-shadow: 0 10px 0 var(--btn-shadow); }
a:hover > .hover_btn_area > .btn_wrap { padding-top: 10px; }
a:hover > .hover_btn_area > .btn_wrap > .hover_btn { box-shadow: none; }
.wp-pagenavi { height: 33px; margin: 10px; text-align: center; }
.wp-pagenavi > * { display: inline-block; min-width: 33px; min-height: 33px; margin: 3px; padding: 5px 10px; text-align: center; border: 1px solid silver; }
.wp-pagenavi > a { color: #333; }
.wp-pagenavi > a:hover { color: var(--hover); }
.wp-pagenavi > span.current { color: #fff; background-color: var(--hover); border: 1px solid var(--hover); }
.adsense { margin: 14px auto; text-align: center; }
/* 記事の下のシェア（みんもりの under_article_social の形） */
.share_area { display: flex; gap: 6px; margin: 16px 0; }
.share_btn { flex: 1; padding: 10px 4px; font-size: 13px; font-weight: bold; text-align: center; color: #fff !important; border-radius: 4px; }

/* ---------- 12. フッター（高さ 250px、白いリンク） ---------- */
#footer { clear: left; width: 100%; min-width: 1070px; height: 250px; padding: 10px !important; background-color: var(--bar); }
#footer > ul { float: left; }
#footer > ul > li { display: inline-block; margin: 20px; }
#footer > ul > li > a { font-size: 15px; color: #fff; }
#footer > ul > li > a:hover { color: var(--hover); }
#footer .icon { margin-right: 4px; }

/* ---------- マスコット（themes.ts の mascot があるサイトだけ。外側の .has_mascot。2026-10-16 ウールーちゃんねる） ----------
   ヘッダー：ロゴの両側に1体ずつ置き、右は左右反転して2体ともロゴの方を向かせる。並べた分、ロゴの文字を少し小さくする。
   見出しの帯（.list_top）：右端の下に顔だけの絵（peek.png・左向き）を置き、帯の上から顔を出しているように見せる。 */
.has_mascot .site_logo { display: inline-flex; align-items: center; gap: 22px; font-size: 72px; white-space: nowrap; }
.has_mascot .site_logo::before, .has_mascot .site_logo::after { content: ""; flex: none; width: 170px; height: 170px; background: var(--mascot) center / contain no-repeat; }
.has_mascot .site_logo::after { transform: scaleX(-1); }
.has_mascot .list_top { position: relative; }
.has_mascot .list_top::after { content: ""; position: absolute; right: 8px; bottom: 0; width: 76px; height: 56px; background: var(--peek) right bottom / contain no-repeat; pointer-events: none; }