body {
  font-family: "nos", sans-serif;
      /* 左右も少し余白を持たせる */
  text-align: center;

  color: #000;
  box-sizing: border-box; /* paddingを含めたサイズ計算にする */
  touch-action: manipulation; /* スマホ遅延対策 */
  margin: 0px;
  

}
@font-face {
  font-family: "nos";
  src: url("font/Saitamaar.ttf") format("truetype");
}
/* 上部エリア */
.ti4{
  text-align:center;

font-size: 14px;
}

/* ボタン横並び */
.top-buttons {
  display: block;
  margin-right: 130px;
  display: flex;
  justify-content: center; /* ← ここを変更 */
  align-items: center;
  gap: 30px; /* ボタン間の固定間隔 */
}


/* 戻るを左に固定 */
.btn-m{
  margin-right:auto;
}

/* 中央ボタン群 */
.center-buttons{
  display:flex;
  gap:20px;
  margin:0 auto;
}

/* ホバー */
.btn-a:hover img { content:url(img/modoru2.png); }
.btn-b:hover img { content:url(img/tb9.png); }
.btn-c:hover img { content:url(img/tb2.png); }
.btn-d:hover img { content:url(img/tb6.png); }

/* 下 */
.copy{

  text-align:center;
  margin-top:10px;

  font-size: 14px;
}

.mes{
  text-align:center;
  margin-bottom:0px;

}

p{
  margin-bottom: 3px;
}
.menu-table{
  border-collapse:collapse;
  width:610px;  /* 160px × 4列 */
  margin:10px auto;
  font-size: 13px;
}

.menu-table td{
  border:3px double #000000;
  text-align:center;
  padding:10px;
  width:140px;
  background-color: #ffffff;
}
.mail-link{
  text-decoration:none;
  color:#000;
  display:inline-flex;
  align-items:center;   /* 縦中央揃え */
  gap:6px;              /* 文字との間隔 */
   text-decoration: underline;
}

.mail-icon{
  vertical-align:middle;
}
/* --- レトロなスクロールバーのカスタマイズ --- */
  
  /* 1. スクロールバー全体の幅 */

  /* --- 1. 全体設定：リキッド対応 --- */
body {
  font-family: "nos", "MS PGothic", sans-serif;
  text-align: center;
  background-color: #fff; /* 背景は白、またはblog.htmlに合わせる */
  color: #000;
  margin: 0;

  box-sizing: border-box;
  line-height: 1.6;
    background-image: url("img/stripe3.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */

}

@font-face {
  font-family: "nos";
  src: url("font/Saitamaar.ttf") format("truetype");
}

/* --- 2. メッセージ全体の囲い（掲示板風） --- */
.message-frame { 
    gap: 10px; 
    padding: 15px; 
    padding-bottom: 30px; 
    min-height: 100vh; 
    display: flex;           /* GridからFlexに変更して高さの自動調整を防ぐ */
    flex-direction: column;  /* 縦に並べる */
    box-sizing: border-box; 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* --- 3. 各投稿の区切り --- */
p {
  margin-bottom: 5px;
  font-size: 15px;
  color: #000080; /* 投稿日時は紺色 */
  border-left: 5px solid #ff00ff; /* 左側にアクセントのピンク */
  padding-left: 8px;
  text-align: left;
}

/* メッセージ本文（拍手コメント） */
strong p {
  background: #f0f0f0;
  padding: 10px;
  border: 1px dashed #999;
  color: #000;
}

/* あなたの返信部分（mesクラス） */
.mes {
  text-align: left;
  margin: 10px 0 30px 20px;
  padding: 15px;
  background-color: #ffffef; /* ほんのり黄色（便箋風） */
  border: 1px solid #ccc;
  position: relative;
  font-size: 15px;
}

/* 返信の「Re:」アイコン的な装飾 */
.mes::before {
  content: "Re:";
  font-weight: bold;
  color: #ff0000;
  margin-right: 5px;
}

/* --- 4. スクロールバー（前回のレトロ設定を継承） --- */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { 
  background: #eee; 
  background-image: radial-gradient(#ccc 1px, transparent 1px); 
  background-size: 2px 2px;
}
::-webkit-scrollbar-thumb { 
  background: #c0c0c0; 
  border: 2px solid; 
  border-color: #fff #808080 #808080 #fff; 
}
::-webkit-scrollbar-button {
  background-color: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
}

/* --- 5. 画像（ドット絵など）のドットをくっきりさせる --- */
img {
  image-rendering: pixelated;
  max-width: 100%;
}
body{
font-size: 20px;  
}
.content { 
    gap: 10px; 
    padding: 15px; 
    padding-bottom: 30px; 
    min-height: 100vh; 
    display: flex;           /* GridからFlexに変更して高さの自動調整を防ぐ */
    flex-direction: column;  /* 縦に並べる */
    box-sizing: border-box; 
    max-width: 1200px; 
    margin: 0 auto; 
}
/* メッセージ全体を包む枠の設定 */
.message-frame {
  max-width: 1000px;    /* コンテンツの最大横幅（お好みで調整してください） */
  margin: 0 auto;      /* 左右中央寄せ */
  padding: 0 20px;     /* 左右に内側の余白を作る */
  box-sizing: border-box; /* パディングを横幅に含める設定 */
}

/* メッセージ本文（拍手コメント）の枠を調整 */
strong p {
  background: #f0f0f0;
  padding: 10px;
  border: 1px dashed #999;
  color: #000;
  text-align: left;    /* 左寄せにして読みやすく */
}

/* 返信部分（mesクラス）の余白調整 */
.mes {
  text-align: left;
  margin: 10px 0 30px 0; /* 左側のマージン20pxを0にすると枠内に収まりやすくなります */
  padding: 15px;
  background-color: #ffffef;
  border: 1px solid #ccc;
  font-size: 15px;
}