/* =========================================================
   2005-2013 "女子ブログ/ホムペ" 風（PCルーム配色）
   地：グレー寄りネイビー #3A3F4B/#444A58
   文字：白
   差し色：ミント #AEE6E6
   ========================================================= */

:root{
  --bg1:#3A3F4B;
  --bg2:#444A58;
  --mint:#AEE6E6;
  --white:#FFFFFF;
  --ink:#EDEFF4;      /* 白より少し柔らかい本文色 */
  --line:#7A859C;     /* 枠線 */
  --panel:#2F343F;    /* パネル面 */
  --panel2:#262A33;   /* 濃い面 */
  --error: #E00501;
  --important: #f8a203;
}

html, body{
  margin:0;
  padding:0;
  color:var(--ink);
  font-family:"MS PGothic","ＭＳ Ｐゴシック","MS UI Gothic","メイリオ",sans-serif;
  font-size:14px;
  line-height:1.75;
}

/* =========================
   カーソル（配布物を使用）
   ※ .ani はブラウザによって効かないことがあるので保険で .cur を優先
   ========================= */
body{
  cursor: url("../assets/image/blog_common/StarC_arrow.cur"), auto;
}
a, button, .pageBtn{
  cursor: url("../assets/image/blog_common/StarC_AS.cur"), pointer;
}
input, textarea{
  cursor: url("../assets/image/blog_common/StarC_IBeam.cur"), text;
}

/* 背景：タイル素材（PCルーム感） */
body{
  background-color: var(--bg1);
  background-image: url("../assets/image/blog_common/bg_tile_pcroom.png");
  background-repeat: repeat;
}

/* 以前の“キラキラレイヤ”は使わない */
.sparkle{ display:none; }

/* 当時は固定幅が多い */
.wrap{
  width: 920px;
  margin: 14px auto 30px;
  padding: 0;
}

/* =========================
   ヘッダー：バナー画像を主役に
   ========================= */
.siteHeader{
  background: var(--panel2);
  border: 2px solid var(--mint);
  padding: 10px 12px;
  overflow: hidden;
}

/* バナー（divに背景画像で置く：平成ブログの“画像ヘッダー”感） */
.headerBanner{
  width: 760px;
  height: 150px;
  background-image: url("../assets/image/blog_common/header_banner_pcroom.png");
  background-repeat: no-repeat;
  background-position: center top; /* ←中央 */
  background-size: 760px 150px;
  border: 1px solid var(--line);
  margin: 0 auto 10px; /* ←中央 */
}


/* 更新/歓迎＆カウンター */
.miniBar{
  margin-top: 8px;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.miniLeft{
  display: table-cell;
  vertical-align: top;
}

/* 平成っぽいピル：角丸にしない */
.pill{
  display:inline-block;
  border: 1px solid var(--mint);
  background: var(--panel);
  color: var(--white);
  padding: 3px 6px;
  margin: 0 6px 6px 0;
  font-size: 12px;
}


.counterLabel{
  font-size: 12px;
  color: var(--white);
}
.counterDigits{
  font-family:"MS PGothic","ＭＳ Ｐゴシック","MS UI Gothic","メイリオ",sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--mint);
  background: #0F1218;
  border: 1px solid var(--line);
  padding: 4px 0;
  margin: 6px 0;
}

/* =========================
   2カラム
   ========================= */
.layout{
  margin-top: 12px;
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px 0;
}
.mainCol{
  display: table-cell;
  width: 610px;
  vertical-align: top;
}
.sideCol{
  display: table-cell;
  width: 300px;
  vertical-align: top;
}

/* =========================
   メイン記事：枠はミント、面は暗いパネル
   ========================= */
.card{
  background: var(--panel2);
  border: 3px solid var(--line);
  padding: 0;
}

.cardTop{
  padding: 8px 10px;
  background: #1F232C;
  color: var(--white);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 見出し左の★を“素材アイコン”に寄せる（文字でもOKだが雰囲気UP） */
.kira{
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  background: #0F1218;
  color: var(--mint);
  display: inline-block;
  text-align: center;
  line-height: 22px;
  font-weight: bold;
}

.entryTitle{
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--white);
}
.entryMeta{
  margin-top: 2px;
  font-size: 12px;
  color: #C7CFDD;
}
.entryMeta .date,
.entryMeta .cat,
.entryMeta .mood{
  color: var(--white);
  font-weight: normal;
}

/* 罫線：ここで star_line を使う */
.divider{
  height: 16px;
  background: transparent;
  background-image: url("../assets/image/blog_common/line_star_pcroom.png");
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid #111;
}
.divider.soft{
  height: 1px;
  background: var(--line);
  border: none;
}

/* 本文 */
.entryBody{
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
}
.entryBody p{
  margin: 8px 0;
}
.entryBody strong{
  color: var(--mint);
  font-weight: bold;
}

/* 箇条書きに星バレットを使いたい時用 */
.entryBody ul{
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
}
.entryBody ul li{
  padding-left: 16px;
  position: relative;
}
.entryBody ul li::before{
  content:"";
  width:10px;
  height:10px;
  position:absolute;
  left:0;
  top:6px;
  background-image:url("../assets/image/blog_common/icon_star_bullet.png");
  background-repeat:no-repeat;
  background-size:10px 10px;
}

/* 引用・警告 */
.center{ text-align:center; }
.emph{ color: var(--important); font-weight:bold; }

.quote{
  margin: 10px 0;
  padding: 8px 10px;
  background: #1F232C;
  border: 1px solid var(--line);
  color: var(--white);
}

/* “データ破損/閉鎖”の警告ボックスは、赤ではなく“冷たい警告”に */
.warn{
  margin: 10px 0;
  padding: 10px;
  background: #141821;
  border: 2px dashed var(--mint);
  color: var(--white);
  font-weight: bold;
}

.tiny{
  font-size: 12px;
  color: #000000;
}

/* 画像ボックス */
.imgBox{
  margin: 12px 0;
  border: 1px solid var(--line);
  background: #1F232C;
  padding: 8px;
}
.imgLabel{
  font-size: 12px;
  color: var(--white);
  font-weight: bold;
  margin-bottom: 6px;
}

/* 画像も当時っぽく“縁取り” */
.imgBox img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--mint);
  background: #000;
}

/* 記事末の“ENDマーク”を入れたい時のユーティリティ */
.entryEndMark{
  width: 200px;
  height: 24px;
  margin: 12px auto 0;
  background-image: url("../assets/image/blog_common/endmark_star.png");
  background-repeat: no-repeat;
  background-size: 200px 24px;
}

/* =========================
   コメント欄：交流は薄めだけど“枠”として存在
   ========================= */
.commentBox{
  margin: 0;
  border-top: 1px solid var(--line);
  background: #1F232C;
  padding: 8px 12px 10px;
}
.commentHead{
  font-weight: bold;
  color: var(--panel);
  margin-bottom: 6px;
}
.commentList{
  list-style:none;
  padding:0;
  margin:0;
}
.commentList li{
  padding: 6px 8px;
  margin: 6px 0;
  background: #141821;
  border: 1px solid var(--line);
  color: var(--ink);
}
.cname{
  font-weight:bold;
  color: var(--mint);
}

/* =========================
   ページャー：リンクっぽく四角、押し込み感
   ========================= */
.pager{
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--panel2);
  border: 1px solid var(--mint);
}
.pagerLabel{
  display:inline-block;
  font-weight:bold;
  color: var(--white);
  margin-right: 8px;
}
.pagerButtons{
  display:inline-block;
}

.pageBtn{
  width: 26px;
  height: 22px;
  margin: 2px 2px;
  padding: 0;
  border: 1px solid var(--line);
  background: #1F232C;
  color: var(--white);
  font-weight: bold;
}
.pageBtn:hover{
  background: #0F1218;
  border-color: var(--mint);
  color: var(--mint);
}
.pageBtn.active{
  background: var(--mint);
  color: #111;
  border-color: var(--mint);
}

/* =========================
   サイドバー
   ========================= */
.sideCard{
  background: var(--panel2);
  border: 1px solid var(--mint);
  margin-bottom: 10px;
  padding: 0;
}
.sideTitle{
  background: #1F232C;
  color: var(--white);
  font-weight: bold;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}

/* ピザ広告：サイドカードと同じ幅にする */
/* ピザ広告：クリック可能に */
.ad_pizza{
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 6px;
  cursor: pointer;              /* ← ポインター */
  text-decoration: none;        /* ← aタグ下線消す */
}

/* 画像はカード幅いっぱい */
.ad_pizza img{
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 6px;
  border: 1px solid var(--line);
}



/* プロフ */
.profile{
  padding: 10px;
  display: table;
  width: 100%;
}
.avatar{
  display: table-cell;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  background: #0F1218;
  color: var(--mint);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.profText{
  display: table-cell;
  vertical-align: top;
  padding-left: 10px;
}
.profName{
  font-weight: bold;
  color: var(--white);
  margin-bottom: 4px;
}
.profDesc{
  font-size: 12px;
  color: #C7CFDD;
}

/* タグ：角丸NG */
.profTags{
  margin-top: 8px;
}
.profTags span{
  display: inline-block;
  border: 1px solid var(--line);
  background: #141821;
  color: var(--mint);
  font-size: 11px;
  padding: 2px 6px;
  margin: 0 4px 4px 0;
}

/* メニュー（リンクはミント） */
.menu{
  list-style:none;
  padding: 8px 10px 10px;
  margin: 0;
}
.menu li{ margin: 6px 0; }
.menu a{
  color: var(--mint);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}
.menu a:hover{
  color: var(--white);
}

/* NEW!!（文字点滅） */
.miniBlink{
  padding: 0 10px 10px;
  text-align: right;
  font-weight: bold;
  color: var(--mint);
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink{
  50%{ opacity: .2; }
}

/* 足あと */
.footprints{
  padding: 10px;
  font-size: 12px;
  color: #C7CFDD;
}
.footprints .num{
  font-weight: bold;
  color: var(--white);
}

/* ひとこと */
.hitokoto{
  padding: 10px;
  background: #141821;
  border-top: 1px solid var(--line);
  color: var(--white);
  font-weight: bold;
}

/* フッター */
.footerNote{
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--panel2);
  border: 1px solid var(--mint);
  font-size: 12px;
  text-align: center;
  color: #C7CFDD;
}

/* スマホ（崩れない程度） */
@media (max-width: 980px){
  .wrap{ width:auto; margin: 10px; }
  .layout{ display:block; border-spacing: 0; }
  .mainCol, .sideCol{ display:block; width:auto; }
  .counterBox{ width:auto; display:block; margin-top: 8px; }
  .miniBar{ display:block; }
  .headerBanner{ width:100%; max-width:760px; background-size:100% 150px; }
}

/* すべてのカード類：枠線をやめて“ベタ塗り四角”へ */
.siteHeader,
/* .card, */
.sideCard,
.pager,
.footerNote{
  border: none;
}

/* ======================================================
   本文カードのみ：ミント背景＋黒文字（サイドバー等は触らない）
   ====================================================== */

.mainCol .card{
  background: var(--mint);
  color: #000;
}

/* 上部タイトル帯もミントに統一 */
.mainCol .cardTop{
  background: var(--mint);
  color: #000;
  border-bottom: none;
}

/* 見出し・メタ情報も黒へ */
.mainCol .entryTitle,
.mainCol .entryMeta,
.mainCol .entryMeta .date,
.mainCol .entryMeta .cat,
.mainCol .entryMeta .mood{
  color: #000;
}

/* 本文・リンク */
.mainCol .entryBody{
  color: #000;
}
.mainCol .entryBody a{
  color: #000;
  text-decoration: underline;
}

/* 強調（mint→黒背景だと見えないので） */
.mainCol .entryBody strong{
  color: #000;
  background: rgba(255,255,255,.45); /* うっすら白マーカー */
  padding: 0 2px;
}

/* 引用・警告・コメントも“本文カードの一部”としてミント系に */
.mainCol .quote,
.mainCol .commentBox,
.mainCol .commentList li,
.mainCol .imgBox{
  background: rgba(255,255,255,.35);
  color: #000;
  border: none;
}

.mainCol .warn{
  background: rgb(243, 8, 0);
  color: #ffffff;
  border: none;

}
/* コメントの名前（mint前提の色を黒に） */
.mainCol .cname{
  color: #000;
}

/* 罫線を横方向に繰り返して幅を埋める */
.divider{
  background-repeat: repeat-x;         /* ←ここがポイント */
  background-position: center;
  background-size: auto 16px;          /* 高さだけ固定 */
  border-top: none;
  border-bottom: none;
}