/*
Theme Name: 裏町情報局
Theme URI: https://news.uramachi.com/
Author: レオ
Author URI: https://news.uramachi.com/
Description: 事件・社会・エンタメ・ゲーム・アニメの総合まとめサイト。スマホファースト、はちま起稿風の左サムネ+右タイトルレイアウト、ダークグレー背景に白カード+赤アクセント。
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uramachi-johokyoku
*/

/* ============================================================
   裏町情報局 v2 ブランド変数
   ============================================================ */
:root{
  --bg:#2a2a2a;          /* 全体背景: ダークグレー */
  --bg-2:#1f1f1f;        /* やや濃い陰 */
  --bg-3:#363636;        /* やや薄い陰 */
  --card:#ffffff;        /* 記事カード背景: 白 */
  --card-2:#f7f7f7;      /* 控えめなカード */
  --ink:#000000;         /* 白背景の上のテキスト */
  --ink-sub:#555;        /* メタ情報 */
  --ink-soft:#222;       /* 本文 */
  --white:#ffffff;       /* ダーク背景上のテキスト */
  --white-sub:rgba(255,255,255,.65);
  --red:#dc143c;         /* アクセント: 赤 */
  --red-2:#c0392b;       /* やや渋い赤 */
  --line:rgba(255,255,255,.12);
  --line-d:#e2e2e2;
  --san:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --serif:"Yu Mincho","Hiragino Mincho ProN",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--san);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer}

/* ============================================================
   ヘッダー (sticky)
   ============================================================ */
.l-header{
  position:sticky;top:0;z-index:90;
  background:var(--bg-2);
  border-bottom:2px solid var(--red);
}
.l-header__inner{
  max-width:1180px;margin:0 auto;padding:10px 14px;
  display:flex;align-items:center;gap:14px;
}
.l-logo{
  font-weight:900;font-size:20px;letter-spacing:.04em;
  color:#fff;white-space:nowrap;
}
.l-logo b{color:var(--red)}

.l-header__search{
  margin-left:auto;display:flex;align-items:center;
  border:1px solid var(--line);background:#000;border-radius:3px;
  height:36px;
}
.l-header__search input{
  background:transparent;border:0;color:#fff;
  padding:0 10px;font:inherit;font-size:13px;width:160px;outline:none;height:100%;
}
.l-header__search button{
  background:var(--red);color:#fff;border:0;padding:0 14px;
  height:100%;font-size:13px;font-weight:700;
}

/* hamburger */
.l-burger{
  display:none;
  background:transparent;border:0;color:#fff;
  width:40px;height:40px;align-items:center;justify-content:center;
}
.l-burger span,
.l-burger span::before,
.l-burger span::after{
  content:"";display:block;width:22px;height:2px;background:#fff;
  position:relative;transition:.2s;
}
.l-burger span::before{position:absolute;top:-7px;left:0}
.l-burger span::after{position:absolute;top:7px;left:0}
.l-burger.is-open span{background:transparent}
.l-burger.is-open span::before{transform:rotate(45deg);top:0}
.l-burger.is-open span::after{transform:rotate(-45deg);top:0}

/* ============================================================
   グローバルナビ (4カテゴリ)
   ============================================================ */
.l-gnav{background:var(--bg-3);border-bottom:1px solid var(--line)}
.l-gnav__inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap}
.l-gnav a{
  flex:1;text-align:center;padding:13px 8px;
  font-weight:700;font-size:14px;color:#fff;
  border-right:1px solid var(--line);transition:.15s;
  position:relative;
}
.l-gnav a:last-child{border-right:0}
.l-gnav a:hover,.l-gnav a.current-menu-item{background:var(--red);color:#fff}

/* ============================================================
   レイアウト本体
   ============================================================ */
.l-main{
  max-width:1180px;margin:0 auto;
  padding:14px;
  display:grid;grid-template-columns:1fr;gap:20px;
}
@media(min-width:1024px){
  .l-main{grid-template-columns:1fr 310px;padding:24px 14px;gap:28px}
}

/* breadcrumb */
.c-bread{
  font-size:12px;color:var(--white-sub);
  padding:6px 4px;margin-bottom:4px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.c-bread a{color:var(--white-sub)}
.c-bread a:hover{color:var(--red)}
.c-bread .sep{opacity:.5}

/* section heading */
.c-secH{
  background:var(--bg-2);border-left:5px solid var(--red);
  padding:10px 14px;margin:0 0 12px;
  display:flex;align-items:baseline;gap:10px;
}
.c-secH h2{font-size:16px;color:#fff;font-weight:900;letter-spacing:.03em}
.c-secH .en{font-size:11px;color:var(--white-sub);font-family:Georgia,serif;font-style:italic}

/* ============================================================
   記事一覧カード (左サムネ + 右タイトル+メタ) ※はちま方式
   ============================================================ */
.p-list{display:flex;flex-direction:column;gap:0}
.p-card{
  background:var(--card);color:var(--ink);
  display:grid;grid-template-columns:120px 1fr;gap:12px;
  padding:12px;margin-bottom:2px;
  transition:.15s;
}
.p-card:hover{background:var(--card-2)}
.p-card__thumb{
  position:relative;overflow:hidden;background:#eee;
  aspect-ratio:1/1;border-radius:2px;
}
.p-card__thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.p-card__thumb .no-img{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#aaa;font-size:11px;background:repeating-linear-gradient(45deg,#eee,#eee 8px,#e2e2e2 8px,#e2e2e2 16px);
}
.p-card__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.p-card__cat{
  display:inline-block;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;padding:2px 8px;align-self:flex-start;
  letter-spacing:.05em;
}
.p-card__title{
  font-size:15px;font-weight:700;line-height:1.45;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.p-card:hover .p-card__title{color:var(--red-2)}
.p-card__meta{
  font-size:11px;color:var(--ink-sub);
  display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;
}

@media(min-width:768px){
  .p-card{grid-template-columns:160px 1fr;padding:14px;gap:14px}
  .p-card__title{font-size:16.5px}
}

.p-more{
  display:block;text-align:center;background:var(--card);color:var(--ink);
  font-weight:700;padding:14px;margin-top:14px;
  border:2px solid var(--red);
  letter-spacing:.1em;
}
.p-more:hover{background:var(--red);color:#fff}

.p-pagination{
  display:flex;justify-content:center;gap:4px;margin-top:22px;flex-wrap:wrap;
}
.p-pagination .page-numbers{
  background:var(--card);color:var(--ink);
  padding:8px 13px;font-weight:700;font-size:13px;
}
.p-pagination .page-numbers:hover,
.p-pagination .current{background:var(--red);color:#fff}

/* ============================================================
   single 個別記事
   ============================================================ */
.p-single{
  background:var(--card);color:var(--ink-soft);
  padding:14px;border-radius:2px;
}
@media(min-width:768px){.p-single{padding:24px}}
.p-single__cat{
  display:inline-block;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;margin-bottom:10px;
  letter-spacing:.05em;
}
.p-single__title{
  font-size:20px;font-weight:900;line-height:1.45;color:var(--ink);
  margin-bottom:10px;letter-spacing:.01em;
}
@media(min-width:768px){.p-single__title{font-size:26px}}
.p-single__meta{
  font-size:12px;color:var(--ink-sub);display:flex;flex-wrap:wrap;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-d);margin-bottom:18px;
}
.p-single__thumb{margin-bottom:18px;background:#eee}
.p-single__thumb img{width:100%;height:auto}

.p-single__body{font-size:15px;line-height:1.95;color:var(--ink-soft)}
.p-single__body h2{
  font-size:18px;font-weight:900;color:var(--ink);
  background:#f0f0f0;border-left:5px solid var(--red);
  padding:10px 14px;margin:28px 0 14px;
}
.p-single__body h3{
  font-size:16px;font-weight:700;color:var(--red-2);
  margin:22px 0 10px;border-bottom:1px dotted #ccc;padding-bottom:4px;
}
.p-single__body p{margin-bottom:1.2em}
.p-single__body a{color:var(--red);text-decoration:underline}
.p-single__body img{margin:14px 0;border:1px solid #ddd}
.p-single__body ul,.p-single__body ol{margin:0 0 1.2em 1.4em}
.p-single__body blockquote{
  background:#f4f4f4;border-left:4px solid #999;
  padding:12px 16px;margin:16px 0;font-size:14px;color:#444;
}
.p-single__body blockquote cite,
.p-single__body blockquote footer{
  display:block;margin-top:8px;font-size:11px;color:#777;font-style:normal;
}
.p-single__body blockquote.is-tweet{
  background:#fff;border:1px solid #ddd;border-left:4px solid #1da1f2;
}
.p-single__body blockquote.is-thread{
  background:#fff5f5;border-left:4px solid var(--red);font-family:var(--serif);
}

/* レオのひとこと */
.p-leo{
  background:#fffbe6;border:2px dashed var(--red);
  padding:14px;margin:24px 0;
}
.p-leo__head{
  font-weight:900;color:var(--red);font-size:14px;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.p-leo__head::before{content:"💬"}

/* SNSシェア */
.p-share{
  display:flex;gap:8px;margin:24px 0;flex-wrap:wrap;
}
.p-share a{
  flex:1;min-width:90px;
  text-align:center;color:#fff;font-weight:700;font-size:13px;
  padding:10px 12px;border-radius:3px;
}
.p-share .is-x{background:#000}
.p-share .is-fb{background:#1877f2}
.p-share .is-line{background:#06c755}
.p-share .is-copy{background:#666}
.p-share a:hover{opacity:.85}

/* 関連記事 */
.p-related{margin-top:30px}
.p-related .c-secH{margin-top:0}

/* ============================================================
   サイドバー (PC only)
   ============================================================ */
.l-side{display:none}
@media(min-width:1024px){.l-side{display:flex;flex-direction:column;gap:18px}}
.l-side__box{background:var(--card);color:var(--ink-soft);border-radius:2px}
.l-side__box .c-secH{margin:0;border-radius:2px 2px 0 0}

.l-rank{display:flex;flex-direction:column}
.l-rank__tabs{display:flex;border-bottom:1px solid #eee}
.l-rank__tabs button{
  flex:1;background:#f4f4f4;border:0;padding:10px 6px;font-size:12px;font-weight:700;color:#555;
  border-right:1px solid #eee;
}
.l-rank__tabs button:last-child{border-right:0}
.l-rank__tabs button.is-active{background:var(--red);color:#fff}
.l-rank__list{list-style:none;margin:0;padding:0}
.l-rank__list li{
  display:grid;grid-template-columns:30px 1fr;gap:8px;
  padding:10px 14px;border-bottom:1px solid #f0f0f0;
}
.l-rank__list li:last-child{border-bottom:0}
.l-rank__list .r{font-weight:900;font-size:20px;color:var(--red);text-align:center;line-height:1.3}
.l-rank__list .r.gray{color:#aaa}
.l-rank__list a{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45}
.l-rank__list a:hover{color:var(--red-2)}

.l-cats a,
.l-archive a{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid #f0f0f0;
  color:var(--ink-soft);font-size:13.5px;font-weight:600;
}
.l-cats a:last-child,
.l-archive a:last-child{border-bottom:0}
.l-cats a:hover,
.l-archive a:hover{background:#f7f7f7;color:var(--red-2)}
.l-cats .ct,
.l-archive .ct{color:#999;font-size:12px;font-weight:400}

/* ============================================================
   ハンバーガーで出るモバイルナビ overlay
   ============================================================ */
.l-mobnav{
  display:none;
  position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:80;
  padding:64px 24px 24px;overflow-y:auto;
}
.l-mobnav.is-open{display:block}
.l-mobnav h3{
  color:#fff;font-size:11px;letter-spacing:.2em;
  margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.l-mobnav a{
  display:block;color:#fff;font-size:15px;font-weight:700;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.l-mobnav a:hover{color:var(--red)}
.l-mobnav .search{
  display:flex;border:1px solid #fff;margin-bottom:14px;
}
.l-mobnav .search input{
  flex:1;background:transparent;border:0;color:#fff;padding:10px;font:inherit;
}
.l-mobnav .search button{background:var(--red);border:0;color:#fff;padding:0 16px}

@media(max-width:1023px){
  .l-burger{display:flex}
  .l-gnav{display:none}
  .l-header__search{display:none}
}

/* ============================================================
   フッター
   ============================================================ */
.l-footer{
  background:var(--bg-2);border-top:2px solid var(--red);
  padding:30px 14px;margin-top:30px;
}
.l-footer__inner{max-width:1180px;margin:0 auto;text-align:center}
.l-footer__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  margin:14px 0;font-size:13px;
}
.l-footer__nav a{color:var(--white-sub)}
.l-footer__nav a:hover{color:var(--red)}
.l-footer__copy{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.15em}

/* ============================================================
   404 / 検索なし
   ============================================================ */
.p-empty{
  background:var(--card);color:var(--ink);padding:40px 20px;text-align:center;
}
.p-empty h2{color:var(--red);font-size:28px;margin-bottom:10px}
.p-empty p{color:var(--ink-sub);font-size:14px}

/* ============================================================
   コメント
   ============================================================ */
.p-comments{background:var(--card);color:var(--ink-soft);padding:14px;margin-top:14px}
@media(min-width:768px){.p-comments{padding:24px}}
.p-comments .c-secH{margin:0 0 12px;background:#eee;color:var(--ink)}
.p-comments .c-secH h2{color:var(--ink)}
.commentlist{list-style:none;padding:0;margin:0 0 20px}
.commentlist .comment-item{
  background:#f7f7f7;border:1px solid #eee;padding:14px;margin-bottom:10px;list-style:none;
}
.commentlist .children{list-style:none;padding:10px 0 0 14px;margin:10px 0 0;border-left:3px solid #ddd}
.comment-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;border-bottom:1px solid #ddd;padding-bottom:6px;margin-bottom:8px;font-size:12px}
.comment-author b{color:var(--ink)}
.comment-date{color:#999}
.comment-content{font-size:14px;line-height:1.7}
.comment-actions{font-size:11px;color:#999;margin-top:6px}
.comment-actions a{color:var(--red);font-weight:700}

.comment-respond{background:#f0f0f0;padding:16px;margin-top:14px}
.comment-reply-title{font-weight:900;font-size:14px;color:var(--ink);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--red)}
.comment-reply-title .b{color:var(--red)}
.comment-notes{font-size:11px;color:#666;background:#fff;border-left:3px solid var(--red);padding:8px 10px;margin-bottom:10px}
.req{color:var(--red);font-weight:700}

.comment-form p{margin-bottom:10px}
.comment-form label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  background:#fff;border:1px solid #ccc;color:var(--ink);
  padding:8px 10px;font:inherit;font-size:14px;width:100%;outline:none;
}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--red)}
.comment-form textarea{resize:vertical;min-height:110px;line-height:1.6}
.comment-form .comment-form-author,
.comment-form .comment-form-email{display:inline-block;width:48%;vertical-align:top}
.comment-form .comment-form-email{margin-left:3%}
.comment-form .comment-submit,
.comment-form input[type=submit]{
  background:var(--red);color:#fff;border:0;
  padding:10px 24px;font-weight:900;font-size:14px;letter-spacing:.1em;
}
.comment-form input[type=submit]:hover{background:var(--red-2)}
@media(max-width:560px){
  .comment-form .comment-form-author,
  .comment-form .comment-form-email{display:block;width:100%;margin-left:0}
}

/* utility */
.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.alignleft{float:left;margin:0 14px 10px 0}
.alignright{float:right;margin:0 0 10px 14px}
.aligncenter{display:block;margin:10px auto}