.site-header {
  
  border-bottom: 1px solid #ccc;

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

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

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

/* 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;
}
@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）は非表示にする */
  
  
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- レスポンシブ設定（1024px以下：タブレット・スマホ） --- */
@media (max-width: 1024px) {
    .menu-mtm {
  display: flex;
  align-items: flex-start; /* 上揃え */
  justify-content: center;
  gap: 10px;               /* グリッドと縦ボタンの間の隙間 */
}
.side-button-list {
  display: flex;
  flex-direction: column;  /* 縦に並べる */
  gap: 5px;                /* ボタン同士の上下の隙間 */
}
  .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;

  }
 .site-header {
    display: block; 
  }

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

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

  /* ハンバーガーボタン自体のサイズ調整（必要であれば） */
.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;
}
.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; /* ボタン背景が明るいなら黒のまま、暗いなら白へ */
}
  /* ナビゲーションメニューの設定（既存通り） */
  .nav-menu {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
      background-image: url("img/stripe3.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] */
}
.menu-hed {
    display: flex;         /* ★ blockからflexに変更（これでgapが効くようになります） */
    gap: 20px;            /* アイコン同士の間隔 */
    align-items: center;  /* 上下中央揃え */
    
    /* 真ん中に配置するための設定 */
    position: absolute;   /* 親要素(.header-inner)に対して絶対配置 */
    left: 50%;            /* 左から50%の位置へ */
    transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して完全中央へ */
    
    margin: 0;            /* margin-right: 70px は不要なので削除 */
}
/* ロゴの絶対配置を解除し、menu-hedと並ぶようにする */
  .sp-logo {
    display: block;
    position: absolute;
    /* 中央のメニューの「さらに左」に来るように計算 */
    /* メニューが中央(50%)にあるので、それより少し左へ */
    left: calc(50% - 160px); 
    transform: translateX(-50%);
    z-index: 10;
  }

  .sp-title {
    width: auto;
  }
/* レスポンシブ設定（1024px以下：タブレット・スマホ） */
@media (max-width: 1024px) {
    .hed-menu-img{
        display: none;
    }
  
  /* --- 中略（site-headerやmenu-btnの表示設定はそのまま） --- */
.menu-hed{
    display: none;
}
  /* ナビゲーションメニューを画面全体にする設定 */
  .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;
}


.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 {
    width: auto;
    display: block;
  }

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

  /* ヘッダーの中身の並びを調整 */

}
.header-inner {
    justify-content: space-between; /* スマホではロゴ左・ボタン右に戻す */
  }
  .sp-logo {
    position: static; /* 絶対配置を解除 */
    transform: none;
    margin-right: auto;
  }
.site-header {
  width: 100%;             /* 横幅を画面いっぱいにする */
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #000000;
}

/* --- ヘッダーの内部コンテナ（内枠：中身を中央に寄せる） --- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ロゴ左、ボタン右の基本配置 */
  
  max-width: 1000px;       /* コンテンツの最大横幅をコンテンツエリアに合わせる */
  margin: 0 auto;          /* これで中央に寄ります */
  padding: 10px 20px;      /* 画面端に余裕を持たせるための余白 */
  
  /* 背景画像をヘッダー全体ではなく、中身だけに敷く場合はここに記述 */

  background-repeat: repeat;
}
/* --- メニュー内の画像ボタンコンテナ --- */
.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 {
    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);
  }
}
/* --- PC表示（1025px以上）の強制上書き設定 --- */
@media (min-width: 1025px) {
  .header-inner {
    display: flex !important;
    justify-content: center !important; /* 全体を中央寄せ */
    position: relative;
    padding: 25px 0 !important;
    gap: 30px; /* 要素間の隙間（ロゴとメニューの間など） */
  }

  /* ロゴ、中央メニュー、拍手を横に並べるための基本設定 */
  .sp-logo, .menu-hed, .hed-clap {
    display: flex !important;
    position: static !important; /* 絶対配置を解除して並べる */
    transform: none !important;
    margin: 0 !important;
  }

  /* ロゴのサイズ */


  /* 中央メニュー内のアイコン間隔 */
  .menu-hed {
    gap: 15px !important;
  }

  /* PCでは不要なハンバーガーボタンを確実に隠す */
  .menu-btn {
    display: none !important;
  }

  /* 拍手ボタンのサイズ（必要であれば） */
  .hed-menu-img img {
    width: auto;
  }
}

/* --- スマホ表示（1024px以下）の整合性確保 --- */
@media (max-width: 1024px) {
  .header-inner {
    display: flex !important;
    justify-content: space-between !important; /* ロゴ左、ボタン右 */
    padding: 10px 15px !important;
  }



  .sp-logo {
    display: block !important;
  }
}
.site-header {
  /* ...既存の設定... */
  border-radius: 0 !important; /* 角丸を完全に無効化 */
}
img {
  image-rendering: pixelated;
  
}