@charset "utf-8";

/* ==========================================================
   雑ざつおのサイト  共通スタイル
   ベースは「見本① 1998年風」（_themes/theme-1998.css）
   Windows 95/98 のパソコンで見ていたころの雰囲気。
   立体的な枠、明朝体、灰色の下地、狭い画面幅。
   ========================================================== */

body {
  background-color: #c0c0c0;
  background-image: url("img/ごみ.png");   /* 128×128 の透過タイルをしきつめ */
  background-repeat: repeat;
  color: #000000;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  padding: 16px 8px 60px;
}

a         { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover   { color: #ee0000; }

/* 昔の画面は 800×600 だったので、本文は 640px しかなかった */
#wrapper {
  width: 640px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 3px outset #dfdfdf;
}

/* ヘッダーは Windows のタイトルバーの青 */
#header {
  padding: 16px;
  background-color: #000080;
  text-align: center;
}
#header h1 {
  font-size: 27px;
  font-weight: bold;
  margin: 0 0 5px;
  letter-spacing: .05em;
}
#header h1 a { color: #ffff00; text-decoration: none; }
#header .sub { font-size: 12px; color: #b0b0e8; margin: 0; }

#nav {
  padding: 7px 6px;
  background-color: #c0c0c0;
  border-bottom: 2px groove #ffffff;
  text-align: center;
  font-size: 14px;
}

#container { display: flex; }
#main { flex: 1; padding: 14px 16px 26px; min-width: 0; }
#side {
  width: 150px;
  flex-shrink: 0;
  padding: 14px 10px 26px;
  border-left: 2px groove #dfdfdf;
  background-color: #f0f0f0;
  font-size: 13px;
  line-height: 1.6;
}

h2 {
  font-size: 17px;
  margin: 24px 0 10px;
  padding-bottom: 3px;
  border-bottom: 2px solid #000080;
  color: #000080;
}
h2:first-child { margin-top: 0; }
h2:before { content: "◆ "; }

h3 { font-size: 15px; margin: 18px 0 6px; }
h3:before { content: "・"; }

#side h2 {
  font-size: 13px;
  margin: 0 0 6px;
  padding: 2px 4px;
  border-bottom: none;
  background-color: #000080;
  color: #ffffff;
  text-align: center;
}
#side h2:before { content: ""; }
#side h2.mt { margin-top: 18px; }
#side ul { margin: 0; padding-left: 1.2em; }

p  { margin: 0 0 .9em; }
ul { margin: 0 0 1em; padding-left: 1.8em; }
li { margin-bottom: .2em; }

hr { border: none; border-top: 2px inset #c0c0c0; margin: 20px 0; }

dl.news { margin: 0; font-size: 14px; }
dl.news dt { float: left; clear: left; width: 8.5em; font-weight: bold; }
dl.news dd { margin: 0 0 .4em 8.5em; }

ul.entrylist { list-style: none; padding: 0; }
ul.entrylist li {
  margin-bottom: 4px;
  padding-left: 18px;
  background: url("data:image/gif;base64,R0lGODlhCgAKAIABAAAAgP///yH5BAEAAAEALAAAAAAKAAoAAAIUjI+py+0Po5y02ouz3rz7D4biWAAAOw==") no-repeat 0 .45em;
}
ul.entrylist .date { font-weight: bold; margin-right: .6em; }

.entry-date  { font-size: 13px; margin: 0 0 4px; }
.entry-title {
  font-size: 20px;
  margin: 0 0 16px;
  padding-bottom: 6px;
  border-bottom: 3px double #000080;
  color: #000080;
  text-align: center;
}

img { max-width: 100%; height: auto; }
figure {
  margin: 14px 0;
  padding: 6px;
  border: 2px inset #dfdfdf;
  text-align: center;
}
figcaption { font-size: 12px; margin-top: 4px; }

blockquote {
  margin: 14px 12px;
  padding: 6px 12px;
  border-left: 4px solid #808080;
  background-color: #f4f4f4;
}

.pager { margin-top: 26px; padding-top: 10px; border-top: 2px inset #c0c0c0; text-align: center; }

#footer {
  padding: 8px;
  background-color: #c0c0c0;
  border-top: 2px groove #ffffff;
  font-size: 12px;
  text-align: center;
}

/* ============================================
   ヘッダーのロゴ画像
   ============================================ */

#header h1 {
  line-height: 1;
  margin: 0 0 8px;
}
#header h1 a {
  display: inline-block;   /* リンクの範囲を画像ぴったりにする */
}
#header h1 img {
  display: block;   /* ← 画像の下にできる謎のすきまが、これで消える */
  width: 300px;     /* 表示する大きさ。ふだん変えるのはココだけ */
  max-width: 100%;  /* スマホで画面からはみ出さないための保険 */
  height: auto;     /* 縦は自動計算。タテヨコ比が崩れない */
}

/* ============================================
   アクセスカウンター（サイドバー内）
   ============================================ */

#counter {
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
/* 数字だけを独立した行に置く。サイドバーは狭いので */
#counter .counter-num {
  display: block;
  margin: .3em 0;
}
#counter img {
  display: inline;
  vertical-align: middle;
  max-width: 100%;
}

/* ============================================
   電光掲示板（ヘッダー下の、流れるお知らせ）
   文字は index.html の data-text= の中を書きかえる

   フォントは Google Fonts の DotGothic16（ドット文字）。
   各HTMLの <head> にある3行の <link> で読みこんでいる。
   あの3行を消すと、代わりに ＭＳ ゴシック で表示される。
   ============================================ */

#denko {
  position: relative;
  overflow: hidden;
  background: #241d14;
  border-top: 1px solid #5c5240;
  border-bottom: 1px solid #5c5240;
}

/* LEDの粒つぶ感。いらなければ、このカタマリごと消してよい */
#denko:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.5) 34%, transparent 36%);
  background-size: 3px 3px;
}

.denko-track {
  display: flex;
  width: max-content;
  animation: denko-nagare 18s linear infinite;   /* 秒数を増やすと ゆっくり */
}

/* 同じ文字を2つ並べて、半分ぶん動かす。だから切れ目なくつながる */
.denko-track:before,
.denko-track:after {
  content: attr(data-text);
  white-space: pre;
  padding: 6px 4em 6px 0;   /* 右の 4em が、文字と文字のあいだの間隔 */
  font-family: "DotGothic16", "ＭＳ ゴシック", "MS Gothic", monospace;
  font-size: 16px;          /* DotGothic16 は 16px 前提のドット文字。16 か 32 がキレイ */
  line-height: 1.5;
  letter-spacing: 2px;      /* ドットの格子をくずさないよう em ではなく px で指定 */
  color: #ffb43c;                            /* 琥珀色のLED */
  text-shadow: 0 0 7px rgba(255,150,20,.8);
  /* 1998デザインに合わせて緑にするなら、上の2行をこう差しかえる：
     color: #33ff33;
     text-shadow: 0 0 7px rgba(51,255,51,.5); */
}

@keyframes denko-nagare {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* マウスを乗せているあいだは止まる（読みたいとき用） */
#denko:hover .denko-track { animation-play-state: paused; }

/* パソコン側で「動きを減らす」設定にしている人には、流さない */
@media (prefers-reduced-motion: reduce) {
  .denko-track { animation: none; }
}

/* ============================================
   画面が狭いとき（スマホ）は1段組にする
   ============================================ */

@media (max-width: 700px) {
  body { padding: 0; }
  #wrapper { width: auto; border-width: 0; }
  #container { display: block; }
  #side { width: auto; border-left: none; border-top: 2px groove #dfdfdf; }
}