/* 基本設定 */
body{
  
  margin:0;
  padding:0;
  font-family: "nos", sans-serif;
  text-align:center;
  touch-action: manipulation; 
  background-image: url("img/stripe.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
}

@font-face {
  font-family: "nos";
  src: url("font/Saitamaar.ttf") format("truetype");
}
.site-header {
  
  border-bottom: 1px solid #ccc;

  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* PC用：ナビゲーションを横並びにする */
.nav-menu ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* スマホ用：ハンバーガーボタン（初期状態は隠す） */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
  flex-direction: column;
  align-items: center; /* ★中身を中央寄せにする */
  gap: 4px;            /* ★線と文字の間隔を少し詰める */
  padding: 0;
}

.menu-btn span {
  display: block;



}
.menu-btn span:not(.menu-text) {
  display: block;
  width: 25px;
  height: 2px;
  background: #333;
}
/* レスポンシブ設定（画面幅768px以下） */
@media (max-width: 768px) {
  .menu-btn {
    display: flex; /* スマホの時だけボタンを表示 */
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -250px; /* 最初は画面の外（左）に隠す */
    width: 250px;
    height: 100vh;
    background: #f9f9f9;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease; /* スライドのアニメーション */
    padding-top: 60px;
    z-index: 150;
  }

  .nav-menu ul {
    flex-direction: column; /* 縦一列にする */
    gap: 0;
  }

  .nav-menu ul li a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }

  /* メニューが開いた時のクラス */
  .nav-menu.active {
    left: 0;
  }
  
}
.title{
display: block;    /* ブロック要素にする[cite: 3] */
    margin-left: auto;  /* 左側の余白を自動調整 */
    margin-right: auto; /* 右側の余白を自動調整 */
    max-width: 100%;    /* スマホではみ出さないように（任意） */
}
.image-area{
    display: flex;
   justify-content: center;
}
.topimg{
  width: 400px;
  height: auto;
  border: 3px double;
}

/* カウンターとsinceimgを縦に並べて中央に寄せる */


/* sinceimg自体のサイズ調整（必要であれば） */
.since-img {
  width: 120px; /* お好みのサイズに[cite: 8] */
  height: auto;
}

/* スマホ用の調整[cite: 8] */

.scroll-text {
  /* サイズと配置 */
             /* wrapperいっぱい（790px）に広げる */
  max-width: 540px;
  margin: 5px auto;      /* 上下に少し余白 */

  margin-top: 0px;
  overflow: hidden;       /* はみ出し防止（必須） */
  
  /* 見た目：黒背景、ネオン黄色の文字 */
  background-color: #000000;
  border: 4px double #ff4400; /* 黄色の二重線でレトロ感 */
  border-radius: 8px;      /* 少し角を丸く */
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.5); /* ほんのり光らせる */
  
  /* 内側の余白 */
 
  
  /* 打ち消し：もし親要素の影響で文字が中央に寄るなら */
  text-align: left;
}

/* style.css の修正箇所 */

.scroll-text span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  
  color: #ffff00;
  font-family: "nos", "Courier New", monospace;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 255, 0, 0.8);
  
  /* ★ 15s から 7s に変更（数値が小さいほど速くなります） */
  animation: marquee 10s linear infinite; 
}

/* アニメーションの基本設定（全案共通） */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
   /* --- stole.css の最後の方、.timeline-container 以下をこれに差し替え --- */

/* タイムライン全体の箱 */
/* --- 95/98ウィンドウ風デザイン --- */

/* --- ポップ＆レトロウィンドウ風デザイン（オレンジ風味） --- */

.timeline-container {
  max-width: 550px;
  margin: 0px auto 0;

  /* 立体感を柔らかく調整 */
  border-left: 3px solid #ffffff;

  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.1); /* 影を柔らかく */

  border-radius: 8px; /* 角を丸くしてポップに */
  font-family: "nos", "Saitamaar", sans-serif;
  overflow: hidden; /* 角丸からはみ出さないように */
}

/* ポップなタイトルバー */
.timeline-container::before {
  content: "↓つぶやきクリックで一覧を見れます↓"; /* 文字を少しキャッチーに */
  display: block;
  /* ★グラデーションをオレンジ〜黄色系に */
  background: linear-gradient(90deg, #0c9aff, #0865f0); 
  color: #fff; /* ★文字色は白でくっきりと */
  font-weight: bold;

  padding: 4px 10px;

  text-align: center; /* 中央揃えに */
  border-radius: 4px; /* バー自体も少し角丸 */
  border: 3px double #182b63; /* 薄い線を引いて締める */
  /* 文字の影を追加して視認性アップ */
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

/* 内側のメインエリア */
#latest-news-container {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 8px; /* 余白調整 */
  background-color: #ffffff; /* 本文エリアは白でスッキリ */
  /* 内側の立体感を調整（へこんでいるように見せる） */
border: 3px double #000;
  border-radius: 4px;
}

#latest-news-container:hover {
  filter: brightness(0.98); /* ホバー時は少し暗く（へこむ感じ） */
}

/* アバター */
.avatar {
  width: 32px;
  height: 32px;
  margin-right: 12px; /* 間隔を少し広く */
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%; /* アイコンを丸くしてポップに */
  overflow: hidden;
  border: 2px solid #ffffff; /* 白い縁取り */
  /* ★外側の細線をタイトルバーに合わせたオレンジに */
  box-shadow: 0 0 0 1px #000000; 
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto; /* ピクセル感を少し和らげる */
}

/* 名前とID */
.user-name {
  font-weight: bold;
  font-size: 13px;
  color: #000;
  /* 縁取りを少し柔らかく */
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

.user-id {
  color: #777; /* IDの色を少し明るく */
  font-size: 11px;
  margin-left: 5px;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

/* 本文 */
#latest-tweet {
  font-size: 16px;
  line-height: 1.5; /* 行間を少し広くして読みやすく */
  color: #333; /* 本文の色を少し優しく */
  margin-top: 4px;
}

/* つぶやきのテキスト本文 */
/* 投稿者情報エリア（名前とID） */
.tweet-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ★左寄せにする */
  text-align: left;           /* ★文字も左揃え */
  line-height: 1;
  width: 100%;                /* 幅いっぱいに広げて左寄せを確実にする */
}

/* つぶやきの本文も念のため左寄せを確認 */
#latest-tweet {
  text-align: left;           /* ★左寄せ */
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-top: 0px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 画像エリア全体の修正 --- */
.image-area {
  display: flex;
  justify-content: center;
  /* align-items: center; から flex-start に変更して、中身を上に揃える */
  align-items: flex-start; 
  flex-wrap: wrap;
  gap: 5px; /* メイン画像とカウンターの間隔 */
  margin: 5px auto;
}

/* メイン画像の修正 */
.topimg {
  width: 100%;         /* 親要素に対して100% */
  max-width: 400px;    /* 最大でも400pxまで */
  height: auto;
  border: 3px double;
  flex-shrink: 0;      /* 画面が狭くなっても勝手に縮まないようにする */
}

/* カウンター画像の設定 */
.count {
  /* 画面幅の 15% か、最大でも 120px の小さい方を採用する */
  width: min(22vw, 120px); 
  height: auto;
  display: block; /* 余計な隙間を消す */
}

/* カウンターを包んでいる a タグもブロック要素にしておくと制御しやすいです */
.counter-group a {
    
  display: block;
  line-height: 0; /* 画像の下に謎の隙間が出るのを防ぐ */
}

.since-img {
  /* カウンターと同じくらいの比率で動くように設定 */
  width: min(22vw, 120px);
  height: auto;
 
}

.content {
  /* 左右の余白を画面幅の 5% に設定（画面が狭いほど余白も狭まる） */

  box-sizing: border-box;
  
  /* 中央寄せ */
  margin: 0 auto;

  width: 100%;

  /* --- ここが魔法の 1 行 --- */
  /* 文字サイズを「最小14px、推奨1.8vw（画面幅の1.8%）、最大18px」に自動可変させる */
  font-size: clamp(14px, 1.8vw, 18px);
}

/* 中の画像もこれに連動させる */
.topimg {
  /* 幅を「画面幅の 50%」くらいに設定しておくと、画面と一緒に縮みます */
  width: 65vw; 
  max-width: 400px; /* ただし 400px よりは大きくならない */
  height: auto;
}

.since-img {
  
  max-width: 120px;
  height: auto;
}
/* --- 画像エリア全体の修正 --- */
.image-area {
  display: flex;
  justify-content: center;
  align-items: stretch; /* 中身の要素（画像とカウンター群）の全高を揃える */
  flex-wrap: wrap;
  gap: 5px; 
  margin: 5px auto;
}

/* メイン画像の修正 */
.topimg {
  width: 65vw;          /* 画面幅の65%にする（スマホ用） */
  max-width: 400px;     /* PCなど大きな画面では400pxで止める */
  height: auto !important; /* 強制的に比率を維持させる */
  object-fit: contain;  /* 万が一枠がズレても画像を変形させない */
  border: 3px double;
  flex-shrink: 0;
}

/* カウンターグループの修正：ここが重要！ */
.counter-group {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  /* カウンターを一番上、since-imgを一番下に配置する */
  justify-content: space-between; 
  padding: 5px 0; /* メイン画像の枠線の分、上下に少し内側余白を作る */
  
}

/* カウンター画像（aタグ） */
.counter-group a {
  display: block;
  line-height: 0;
}

.count {
  /* 22vw から 15vw 程度に下げると、トップ画の縮小に合わせてより小さくなります */
  width: min(15vw, 100px) !important; 
  height: auto !important;
  display: block !important;
}

/* since-img（カレンダー等の画像）の修正 */
.since-img {
  /* カウンターと同じサイズ感に合わせる */
  width: min(15vw, 100px) !important;
  height: auto !important;
  border: #000 double !important;
}
/* --- バナーエリア全体の設定 --- */
/* --- バナーエリア全体 --- */
.banar {
  display: flex;
  flex-wrap: wrap;       
  justify-content: center; 
  align-items: center;   
  gap: 5px;             /* ★隙間を 15px から 10px に少し詰めました */
  max-width: 800px;      
  margin: 00px auto;   
  margin-top: 5px;  
}

/* --- Onionring ウィジェットの隙間対策 --- */
/* --- Onionring ウィジェットの強制サイズ調整 --- */
#web1_0 {
  display: flex !important;
  justify-content: center;
  align-items: center;

  /* 1. 外枠の幅を他のバナー（88px〜200px）に合わせる */
  width: 180px !important; 
  max-width: 180px !important;
  
  /* 2. 中身がはみ出す場合は、中身をごそっと縮小する */
  /* 0.8 は 80% の意味。隙間に合わせて 0.7〜0.9 で調整してください */
  transform: scale(0.8);
  transform-origin: center; /* 中央を基準に縮小 */

  /* 3. 余計な余白を徹底的に削る */
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* ウィジェット内のテーブルが横幅を広げようとするのを防ぐ */
#web1_0 table {
  width: auto !important;
  margin: 0 auto !important;
}

/* スマホでバナーが縦に並ぶときに重ならないよう調整 */

/* バナー画像のサイズ調整 */
.banar a img {
  display: block;
  height: auto;
  /* 横長のバナー（駄文同盟など）が大きすぎる場合はここで制限 */
  max-width: 180px; 
}
.cop{
    font-size: 13px;
    margin: 5px;
    text-align: center;
}
/* PC・タブレット共通：表示する */
.migi {
  display: block;
}

/* スマホ用設定：画面幅が480px以下の時だけ非表示にする */
@media (min-width: 1025px) {
  .migi {
    display: block;
    width: 250px; /* PCでのサイドバーの幅（お好みで調整） */
  }

  /* PCの時だけ横並びを維持する設定 */
  .migihidari {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

/* 3. タブレット・スマホ（1024px以下）の時の調整 */
@media (max-width: 1024px) {
  .migihidari {
    display: block; /* 横並びを解除して縦に積む */
  }
  .migi{
    display: none;
  }
.migi {
    display: none !important; /* ★!importantをつけて強制的に消す */
  }
  
  .hidari {
    width: 100%; /* メインエリアを横幅いっぱいにする */
  }
  
  .migihidari {
    display: block; /* 横並びを解除 */
  }
  .hidari {
    width: 100%; /* メインエリアを横幅いっぱいにする */
  }
}
/* サイドバーのバナー設定 */
.side-bana {
  /* 指定したい横幅 */
  height: auto;      /* ★これ重要！高さを自動にすることで比率を守る */
  display: block;
  flex-shrink: 0;    /* ★Flexボックス内で画像が潰されるのを防ぐ */
  align-self: flex-start; /* ★親の高さに引きずられないようにする */
}

/* 親要素（migi）の指定も確認 */

.migi {
 
  flex-direction: column; /* 中身を縦に並べる */
  align-items: center;    /* 中身を中央に寄せる */
  gap: 15px;              /* 要素ごとの上下のスキマ */
  width: 250px;           /* サイドバーの幅 */
}

.side-bana {
          /* 画像の横幅（お好みで調整） */
       margin-left: 50px;
  height: auto;
  display: block;
}

.migimenu {
       /* メニューの横幅を画像と合わせると綺麗です */
  /* ここに枠線や背景のデザインを書く */
  text-align: center;
}
/* --- ウィンドウ全体の見た目（水色の枠） --- */
.pop-window {
margin: 5px 0px;
  background-color: #00d2ff; /* ★鮮やかな水色の枠 */
border: 3px#000 double;
  border-radius: 12px;      /* 角を丸くしてポップに */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); /* 軽い影 */
  overflow: hidden;         /* 角丸からはみ出さないように */
}

/* タイトルバー（水色） */
.pop-header {
  background-color: #00d2ff;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  text-align: center;
  letter-spacing: 1px;
}

/* 中身（オレンジの背景） */
.pop-body {
      background-image: url("img/stripe.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
  background-color: #ffe600; /* ★ポップなオレンジ色 */
  border-radius: 0 0 8px 8px; /* 下側だけ角丸 */
  padding: 10px;
}

/* --- 2列2行のグリッド --- */
.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --- ボタンのデザイン --- */
.pop-btn {
  display: block;
  text-decoration: none;
  background-color: #ffffff; /* ボタンは白で読みやすく */
  color: #ff9900;            /* 文字はオレンジ */
  font-size: 13px;
  font-weight: bold;
  padding: 8px 5px;
  text-align: center;
  border-radius: 6px;
  border-bottom: 3px solid #e68a00; /* ボタンに厚みを出す */
  transition: transform 0.1s;
}

/* ボタンを押した時 */
.pop-btn:active {
transform: translateY(-3px);
  border-bottom: 1px solid #e68a00;
}

/* ホバーで少し色を変える */
.pop-btn:hover {
  background-color: #fff5e6;
}
/* ボタンの土台（余計な装飾を消す） */
.pop-btn-img {
  display: block;
  text-decoration: none;
  line-height: 0; /* 画像の下に隙間が出るのを防ぐ */
}

/* ボタン画像自体の設定 */
.pop-btn-img img {
     /* グリッドの幅いっぱいに広げる */
  height: auto;     /* 比率を維持 */
  display: block;
  /* もし画像に丸みをつけたいなら追加 */
  border-radius: 4px; 
}

/* ホバー（マウスを乗せた時）の演出 */
/* ホバー（マウスを乗せた時）の演出 */
.pop-btn-img:hover {
  filter: brightness(1.1); 
  transform: translateY(-5px); /* ← これで上に5px移動します */
}

/* クリックした時の演出 */
.pop-btn-img:active {
  /* scale(0.95) を消して、少し押し込む動きにする */
  transform: translateY(2px); 
}

/* グリッドの調整（隙間を少し広げると見やすいです） */
.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; 
}
/* PCでのレイアウト設定 */
@media (min-width: 1025px) {
  /* 1. 全体を「左：メイン / 右：サイドバー一式」で横並びにする */
  .migihidari {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
  }

  /* 2. 【ここが重要】migi と migimenu を横並びにする */
  .migi-wrapper {
    display: flex;          /* これで中の migi と migimenu が横に並びます */
    align-items: flex-start; /* 上揃えにする */
    gap: 15px;              /* migi と migimenu の間のスキマ */
  }

  /* 3. migi 自体は縦に要素が並ぶようにする */
  .migi {

    flex-direction: column;
    width: 250px;
    gap: 15px;
  }

  /* 4. migimenu の幅などを調整 */
  .migimenu {
    display: block; 
    
    text-align: center;
  }
}

/* スマホ（1024px以下）の時は横並びを解除 */
@media (max-width: 1024px) {
  .migi-wrapper {
    display: none !important; /* スマホではサイドバーごと隠す設定を維持[cite: 3] */
  }
}
/* カウンターのレイアウトを再固定する設定 */
/* --- 画像エリア全体の修正 --- */
.image-area {
  display: flex;
  justify-content: center;
  /* stretch（引き伸ばし）から center（中央）または flex-start（上）に変更 */
  align-items: center; 
  flex-wrap: wrap;
  gap: 5px; 
  margin: 0px auto;
}

.counter-group {
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;    
  justify-content: space-between !important; /* 上下に振り分ける */
  padding: 5px 0 !important;
}

.count {
  width: min(22vw, 120px) !important; 
  height: auto !important;
  display: block !important;
}

.since-img {
  border: #000 double !important;
  width: min(22vw, 120px) !important;
  height: auto !important;
  margin-top: auto !important; 
}
        .storage-box { background: linear-gradient(135deg, #e0f7ff, #f0fff4); }
        .storage-title { display: flex; justify-content: space-between; align-items: baseline; }
        .server-plan { font-size: 10px; color: #666; font-weight: normal; }
        .bar-bg { height: 16px; background: #f1f1f1; border-radius: 10px; overflow: hidden; margin: 6px 0; }
        .bar-fill { height: 100%; background: linear-gradient(90deg, #ff9ecf, #a0e7ff); }
        .storage-info { display: flex; justify-content: space-between; font-size: 10px; }
/* noho.css に追加 */
.nokori {
  clear: both;            /* 周りの回り込みを解除 */
  width: 100%;            /* 横幅いっぱい */
  max-width: 800px;       /* コンテンツ全体の幅に合わせる（お好みで） */
  box-sizing: border-box;
}

/* status.php内の枠のデザイン調整 */
.storage-box {
  border: 3px double #14c4ff; /* サイトカラーに合わせた二重線 */
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}
@media (min-width: 1025px) {
  .migi-wrapper {
 
    flex-wrap: wrap;        /* ★折り返しを許可する */
    align-items: flex-start;
    gap: 15px;
    width: 340px;           /* migi(250px) + migimenu(200px) + gap(15px) */
  }

  .nokori {
    width: 100%;            /* ★横幅いっぱいにして強制改行させる */
  }
}
/* --- ヘッダーの基本設定 --- */
.site-header {
  /* ★初期状態（PC）は非表示にする */
  display: none; 
  
  
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- レスポンシブ設定（1024px以下：タブレット・スマホ） --- */
@media (max-width: 1024px) {
 .site-header {
    display: block; 
    background-color: #fff; /* 背景色が必要な場合は追加 */
  }

  .header-inner {
    display: flex;
    /* ★ justify-content を flex-end にすると中身（ボタン）が右に寄ります */
    justify-content: flex-end; 
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;

border-bottom: 3px #7f7f7f dotted;
    /* ★ padding の最初の数値（上下）を大きくするとヘッダーが太くなります */
    /* 15px → 30px に変更例 */
    padding: 10px 5px;
  }

  /* ハンバーガーボタン自体のサイズ調整（必要であれば） */
  .menu-btn {
    display: flex;
    /* ボタン自体を少し大きくする場合 */
    scale: 1.2; 
    margin-right: 10px; /* 右端に少し余裕を持たせる */
  }

  /* ナビゲーションメニューの設定（既存通り） */
  .nav-menu {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
      background-image: url("img/stripe.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    padding-top: 60px;
    z-index: 150;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-menu ul {
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-menu ul li a {
    display: block;
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
}

/* --- PC用ナビゲーション（不要になるため整理） --- */
@media (min-width: 1025px) {
  .nav-menu ul {
    display: none; /* PCではメニュー自体を完全に消す */
  }
}
/* タイトルバー（水色）の修正 */
.pop-header {
  background-color: #29ABE2;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  
  /* ★アイコンと文字を横並びにする設定 */
  display: flex;
  align-items: center;    /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え（お好みで左寄せならflex-start） */
  gap: 6px;               /* アイコンと文字の間隔 */
  
  letter-spacing: 1px;
}

/* ★追加：ヘッダー内アイコンのサイズ設定 */
.header-icon {
  width: 16px;  /* 文字の大きさに合わせて調整 */
  height: 16px;
  object-fit: contain;
}
/* PCでは余白をつけない（フレックス崩れ防止） */
.outer-wrapper {
  padding: 0; 
  box-sizing: border-box;
  width: 100%;
}

/* タブレット・スマホ（画面が狭い時）だけ左右に余裕を持たせる */
@media (max-width: 1024px) {
  .outer-wrapper {
    padding: 5px 10px; 
  }
}

.content {
  margin: 0 auto;
  max-width: 1000px;
  /* padding は削除した状態を維持[cite: 4] */
}
/* レスポンシブ設定（1024px以下：タブレット・スマホ） */
@media (max-width: 1024px) {
  
  /* --- 中略（site-headerやmenu-btnの表示設定はそのまま） --- */

  /* ナビゲーションメニューを画面全体にする設定 */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;          /* 横幅いっぱい */
    height: 100vh;        /* 画面の高さ（縦）いっぱい[cite: 1] */
    
    
    /* 初期状態は透明にして隠す */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease; /* ふわっと出すアニメーション */
    
    display: flex;
    justify-content: center; /* メニューを左右中央へ */
    align-items: center;     /* メニューを上下中央へ */
    z-index: 150;
  }

  /* メニューが開いた時の状態 */
  .nav-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-menu ul {
    flex-direction: column; /* 縦に並べる[cite: 1] */
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;    /* 文字を中央寄せ */
  }

  .nav-menu ul li a {
    display: block;
   
    text-decoration: none;
    color: #ffffff;        /* 文字色を白に（背景が水色のため） */
    font-weight: bold;
    font-size: 24px;       /* 画面全体なので文字を大きく */
    border-bottom: none;   /* 下線は不要なので消去[cite: 1] */
  }
}

/* メニューが開いている時、ボタンの色を白に変える（背景に合わせて調整） */
.nav-menu.active ~ .menu-btn span {
  background: #fff;
}
.menu-text {
  font-size: 10px;      /* 小さめに設定 */
  font-weight: bold;
  color: #333;
  line-height: 1;
  margin-top: 2px;     /* 線との微調整 */
  font-family: "nos", sans-serif; /* サイトのフォントに合わせる */
}

/*[cite: 1] 446行目付近：メニューが開いている時の文字色（背景が濃い時用） */
.nav-menu.active ~ .menu-btn span {
  background: #fff;
}
/* ★追加：メニューが開いている時の「めにゅー」の文字色も白にする */
.nav-menu.active ~ .menu-btn .menu-text {
  color: #fff;
}
.sp-logo {
  display: none; /* ヘッダー内のロゴは隠す */
}

.pc-title {
  display: block; /* コンテンツ内のロゴを表示 */
  margin: 0 auto;
}

/* 2. レスポンシブ設定（1024px以下） */
@media (max-width: 430px) {
  /* ヘッダー内のロゴを表示する */
  .sp-logo {
    display: block;
    margin-right: auto; /* ロゴを左に寄せ、ボタンを右に寄せる */
    padding-left: 10px;
  }

  /* ロゴのサイズ調整（ヘッダーの高さに合わせる） */
  .sp-title {
    height: 60px; /* ヘッダーの太さに合わせて調整してください */
    width: auto;
    display: block;
  }

  /* もともとコンテンツの上にあったロゴを隠す */
  .pc-title {
    display: none !important;
  }

  /* ヘッダーの中身の並びを調整 */
  .header-inner {
    display: flex;
    justify-content: space-between; /* ロゴとボタンを両端に配置 */
    align-items: center;
  }
}
/* --- メニュー内の画像ボタンコンテナ --- */
.menu-btn-container {
  margin-top: 30px;      /* テキストリンクとの間隔 */

  width: 100%;
  max-width: 300px;      /* ボタンが広がりすぎないように制限 */
}

/* ナビゲーションメニューの中央寄せを維持しつつ、リストを調整 */
/* --- メニュー内の共通設定 --- */
/* --- スマホメニュー全体のレイアウト修正 --- */
@media (max-width: 1024px) {
  /* メニュー全体の箱 */
  .nav-menu {
    display: flex !important;
    justify-content: center;
    /* align-items: center; から flex-start に変更して上寄せにする */
    align-items: flex-start; 
    overflow-y: auto; /* コンテンツが多い場合にスクロールできるようにする */
  }

  .nav-menu ul.menu-list {
    display: flex;
    flex-direction: column;
    align-items: center; /* 横方向は中央 */
    /* 縦方向は上詰めに設定 */
    justify-content: flex-start; 
    
    width: 100%;
    
    /* ★ここが重要：padding-top で「どのくらい上から開始するか」を調整します */
  
    
    list-style: none;
    margin: 0;
  }

  /* --- 各要素の微調整 --- */

  /* 1. 初めての方へ */
  .link-item a {
    font-size: 20px !important; /* 少しだけ小さくしてスッキリさせる */
    color: #000000 !important;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
    padding-bottom: 3px;
    margin-bottom: 5px;
  }

  /* 2. 2x2グリッド */
  .grid-item .button-grid {
border: 3px #000 double;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
  }

  /* 3. WEB拍手 */
  .menu-label {
    color: #fff;
    font-size: 11px;
    margin-bottom: 4px;
    font-weight: bold;
    opacity: 0.9;
  }
  .clap-btn-img img {
    padding-bottom: 0px;
    height: auto;
    border-radius: 4px;
  }

  /* 4. サーバー容量 */
  .storage-item .storage-box {
    width: 300px;
    background: #fff !important;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #14c4ff;
    box-sizing: border-box;
    /* 影をつけて少し浮かせるとメニュー背景に馴染みます */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
}
/* --- Windows 95/98風 クラシックウィンドウ --- */
/* --- レスポンシブ設定（スマホメニュー内限定のレトロウィンドウ） --- */
@media (max-width: 1024px) {

  /* 2x2グリッドを包むリスト要素をウィンドウ化 */
  .nav-menu .grid-item {
    display: block;
        /* ウィンドウの幅 */
background-color: rgba(255, 255, 255, 0.5); /* 50% の透明度 */    /* 立体感を出すボーダー（上白・左白 / 右濃灰・下黒） */
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-right: 2px solid #808080;
    border-bottom: 5px solid #000000;
    list-style: none;
    border-radius: 20px;
  }

  /* タイトルバー（濃い青のグラデーション） */


  /* ボタンが並ぶ中身のエリア */
  .nav-menu .grid-item .button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;


    border: none !important;  /* 以前の枠線をリセット */
  }

  /* ボタン自体のレトロ加工 */
  .nav-menu .pop-btn-img {


    transition: none; /* アニメーションはオフがレトロ */
  }

  /* ボタンを押した時の「凹む」演出 */
  .nav-menu .pop-btn-img:active {

    transform: translate(1px, 1px);
  }

  /* ボタン画像に少しグレーを混ぜて馴染ませる（任意） */
  .nav-menu .pop-btn-img img {
    filter: contrast(0.9) brightness(1.1);
  }
}
/* --- サイドバー全体を包むクラシックウィンドウ --- */
@media (min-width: 1025px) {
/* --- 案1：超角丸・ホワイトエッジ --- */
/* --- 案2：半透明・バブルウィンドウ --- */
/* --- 案3：点線・ノート風 --- */
/* --- 案1：超角丸・ホワイトエッジ --- */
.migi-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: flex-start;
  gap: 0;
  
      background-image: url("img/stripe3.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
  border: 6px double #a98811; /* サイトカラーの太い枠 */
  border-radius: 40px;      /* 角を思い切り丸く */
  padding: 5px 15px;            /* 中身との間に余裕を持たせる */
  box-shadow: 8px 8px 0px rgb(0, 0, 0); /* 枠と同じ色の薄い影 */
}

/* タイトルバーを「浮いたバッジ」風にする */
.migi-wrapper::before {
 
  display: inline-flex;
  width: auto;              /* 横幅いっぱいにしない */
  height: 28px;
  background: #138ef3;
  color: #fff;
  border-radius: 20px;
  padding: 0 20px;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 2px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

  /* ウィンドウ内部のレイアウト調整 */
.side-contents-row {
    display: flex;
    /* ★ space-evenly または center で左右の余白を調整 */
    justify-content: center; 
    gap: 15px; 
    padding: 5px 5px; /* 上下の余白を少し増やすとより綺麗です */
    width: 100%;
    box-sizing: border-box;
  }

  /* 各サイドバー要素の幅を微調整 */
  .migi {
    width: 240px;
  }
  
.migimenu {
    margin-top: 50px;

    display: flex;
    flex-direction: column;
    gap: 8px;
    /* ★ ボタン画像を中央に寄せる */
    align-items: center; 
  }
  .migimenu .pop-btn-img img {
    margin: 0 auto;
  }

  /* サーバー容量（nokori）をウィンドウの下部に馴染ませる */
  .nokori {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-top: 1px solid #808080; /* 区切り線 */
  }
  
}
/* --- スマホメニュー内のポップなウィンドウデザイン調整 --- */
@media (max-width: 1024px) {

  /* メニュー全体の背景を少し透過させてポップに */
.nav-menu {
    /* flexからblockに変更して、通常のスクロール挙動にする */
    display: block !important; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 150;
    
    /* スクロールを有効にする */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
    
    /* 背景設定 */
    background-color: rgba(0, 210, 255, 0.95) !important;
    background-image: url("img/stripe3.png") !important;

    /* 初期状態（隠す） */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
  }

  .nav-menu ul.menu-list {
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    width: 100%;
    
    /* ★重要：上下にしっかり余白を作る */
    /* 上はヘッダー（60px〜）を避けるため、下は最後が見切れないように */
    padding-bottom: 100px; 
    
    list-style: none;
    margin: 0;
  }

  /* サーバー容量ボックスがメニューの背景で見にくい場合、少し影を強くする */
  .storage-item .storage-box {
    width: 280px;
    background: #fff !important;
    padding: 5px 10px;
    border-radius: 20px !important;
    transform: scale(1); /* 0.9だと小さすぎる場合は1に戻す */
  }
  /* --- ハンバーガーボタンのデザイン修正 --- */
.menu-btn {
display: flex;
    background: #ffcc00; /* ポップなイエロー背景 */
    border: 3px #000 double;
  border-radius: 10px;
  cursor: pointer;
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px; /* ボタンのサイズ */
  height: 60px;
  padding: 0;
  position: relative;
  transition: all 0.3s ease;
}

/* 3本の線の共通設定 */
.menu-btn span:not(.menu-text) {
  display: block;
  width: 30px;
  height: 4px; /* 少し太めにしてポップに */
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease; /* アニメーション速度 */
  position: absolute;
}

/* 線の位置固定 */
.menu-btn span:nth-child(1) { top: 12px; }
.menu-btn span:nth-child(2) { top: 22px; }
.menu-btn span:nth-child(3) { top: 32px; }

/* 「めにゅー」テキストの調整 */
.menu-text {
  position: absolute;
  bottom: 4px;
  font-size: 10px;
  font-weight: bold;
  color: #333;
}

/* --- メニューが開いている時（.activeクラス）の変形 --- */

/* 1本目を右上がりに傾ける */
.menu-btn.active span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}

/* 2本目を消す */
.menu-btn.active span:nth-child(2) {
  opacity: 0;
}

/* 3本目を右下がりに傾ける */
.menu-btn.active span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* 開いている時のボタン背景色（お好みで） */
.menu-btn.active {
  background: #ff66aa; /* 開いた時はピンクにするなど */
}

/* メニュー内の文字色を白にする既存設定との競合回避[cite: 1] */
.nav-menu.active ~ .menu-btn .menu-text {
  color: #333; /* ボタン背景が明るいなら黒のまま、暗いなら白へ */
}
}

/* --- メニュー内の横並びコンテナ --- */
.menu-mtm {
  display: flex;
  align-items: flex-start; /* 上揃え */
  justify-content: center;
  gap: 10px;               /* グリッドと縦ボタンの間の隙間 */
}

/* --- sidbtn.png を縦に並べるエリア --- */
.side-button-list {
  display: flex;
  flex-direction: column;  /* 縦に並べる */
  gap: 5px;                /* ボタン同士の上下の隙間 */
}

/* --- ボタン画像の変形防止 --- */
.side-link-img {
  display: block;
  line-height: 0;          /* 下の隙間を消す */
  text-decoration: none;
}

.side-link-img img {
  height: auto;            /* ★高さを自動にすることで変形を防ぐ */
  display: block;
  object-fit: contain;     /* 画像の比率を絶対維持 */
}

/* スマホメニュー内のグリッド幅を少し調整して sidbtn が入るスペースを作る */
/* カウンターとsinceimgをまとめる親要素 */
.counter-group {
  position: relative; /* ★これを追加！ここが .testi の基準位置になります */
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;    
  justify-content: space-between !important;
  padding: 5px 0 !important;
  /* 必要に応じて幅を固定するとより安定します */
  width: min(22vw, 120px); 
}

/* 動かしたくない文字（aa） */
/* レスポンシブ対応の testi 設定 */
.testi {
  position: absolute;
  /* top: 130px; ← これを削除 */
  top: 30%;
  /* 親要素（counter-group）の一番下から 0px の位置に固定 */
  left: 50%;
  transform: translateX(-50%);

  /* 文字サイズを画面幅に合わせて微調整（小さすぎず大きすぎず） */
border: 3px double;  
padding: 7px;
background-color: #ffcc00;
  white-space: nowrap;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 0 #fff;
border-radius: 10px;
  text-align: center;
  
  /* 画像と重なりすぎる場合は、マイナスの数値を指定して外に出す */
  margin-bottom: -15px; 
}

/* 親要素の調整（隙間を確保） */
.counter-group {
  position: relative !important;
  /* testiを表示するスペースを下に少し空ける */
}
.days-num {
  font-size: 21px;        /* 数字だけ大きく */
  color: #ff4400;         /* サイトのアクセントカラー（オレンジ系） */
  margin: 0 2px;          /* 前後の文字との隙間 */
  
  /* さらに目立たせるなら（お好みで） */
  /* text-decoration: underline double #ff4400; */ /* 二重の下線 */
  /* background: linear-gradient(transparent 60%, #ffff00 60%); */ /* 黄色のマーカー風 */
}
img {
  image-rendering: pixelated ;
  max-width: 100%;
}
  .topimg {
    image-rendering: auto !important; /* ブラウザの標準的な滑らかな表示に戻す */
  }