/* --- 全体の設定 --- */
body {
  background-color: #bbf1ef; /* 指定の背景色 */
  color: #333333;
  font-family: "MS PGothic", "Osaka", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 20px;
}

/* 全体のレイアウト設定 */
.contents-wrapper {
  display: flex;          /* 横並びにする */
  align-items: flex-start; /* 中身の高さが違っても上に揃える */
  max-width: 1240px;       /* サイトの最大幅（お好みで） */
  margin: 0 auto;         /* 画面中央に寄せる */
  gap: 20px;              /* メインとサイドバーの間の隙間 */
}
/* ------------------------------------------------------------------------- */

/* ヘッダー設定(PC) */
header {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;
  padding: 10px 0;
}

#menu-toggle {
  display: none; /* ← ここでPC時は完全に消す */
}

/* --- PC向け navデザイン（パターンA） --- */
header nav {
  margin: 10px auto;
  width: 100%;
  max-width: 800px;        /* コンテンツ幅に合わせる */
  background-color: #f0f0f0; /* 控えめな薄いグレー */
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}

header nav ul {
  display: flex;
  justify-content: center; /* 中央寄せ */
  list-style: none;
  padding: 5px 0;
  margin: 0;
}

header nav ul li {
  padding: 0 15px;
  border-right: 1px solid #ccc; /* 項目間の区切り線 */
}

header nav ul li:last-child {
  border-right: none; /* 最後の項目の右線は消す */
}

header nav ul li a {
  text-decoration: none;
  color: #0066cc;
  font-weight: bold;
  font-size: 13px;
}

header nav ul li a:hover {
  color: #ff6600;
  text-decoration: underline;
}

/* ------------------------------------------------------------------------- */

/* メインエリアの設定 */
main {
  flex: 1;                /* 残りの幅をすべて使う */
  padding: 15px;
}
/* ------------------------------------------------------------------------- */

/* サイドバーエリアの設定 */
aside {
  width: 300px;           /* サイドバーの幅を固定する */
  text-align: center;
}

.neocitiescat {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
}
/* ------------------------------------------------------------------------- */

/* --- 見出し --- */
h1 {
  font-size: 20px;
	font-weight: bold;
  margin-top: 0;
  padding: 3px 8px;
  border-left: 8px solid #009999; /* 濃いめの水色でアクセント */
  border-bottom: 1px solid #009999;
}
/* ------------------------------------------------------------------------- */

/* --- セクション表示設定 --- */
.section {
  max-width: 900px;
  width: 95%;
  margin: 20px auto;
}

.info-row {
  display: flex;
  margin-bottom: 5px;
}

.label, .value {
  background-color: #ffffff;
  padding: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080;
  font-family: "ＭＳ ゴシック", "MS Gothic", monospace;
}

.label {
  flex: 0 0 220px;         /* 幅を220pxに広げました */
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  white-space: nowrap;     /* 文字をできるだけ改行させない */
  background-color: #f0f0f0; /* ラベルとわかるように少しだけ色付け（任意） */
  color: #006669;
}

.value {
  flex: 1;
  line-height: 1.6;
  border-left: none;
}
/* ------------------------------------------------------------------------- */

/* 日記全体のレイアウト（白枠） */
.diary-wrapper {
  display: flex;
  max-width: 900px;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #999999;
  min-height: 400px; /* 本文が短くても高さを確保 */
}

/* 左側：日付選択エリア */
.diary-sidebar {
  width: 180px;
  border-right: 1px dotted #cccccc;
  padding: 15px;
  background-color: #f9f9f9; /* 少し色を変えて区別 */
  min-height: 1050px;
}

/* 右側：日記本文表示エリア */
.diary-content {
  flex: 1;
  padding: 20px;
  line-height: 1.6;
  min-height: 1050px;
  overflow-wrap: break-word; /* 長い英単語なども折り返す */
}

/* ★画像の設定：これが重要です★ */
.diary-content img {
  max-width: 100%;    /* 親要素の幅を超えない */
  height: auto;       /* 比率を維持する */
  display: block;      /* 下に余白ができないようにする */
  margin: 15px auto;  /* 画像を中央寄せにする */
  border: 4px solid #f0f0f0; /* 写真っぽい白いフチ */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 軽い影 */
}

/* 日記のタイトル（読み込まれるHTML内のh3などを想定） */
.diary-content h3 {
  border-bottom: 2px solid #bbf1ef;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

/* --- サイドバー内のボタン設定 --- */
#diary-nav button {
  /* デフォルトの見た目をリセット */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;

  /* デザインを整える */
  display: block;
  width: 100%;
  text-align: left;
  color: #0066cc;
  padding: 5px 10px;
  margin-bottom: 15px;
  border: 1px solid #cccccc; /* 控えめな枠線 */
  background-color: #ffffff;
}

/* ★ホバー時の挙動を日記リストと統一★ */
#diary-nav button:hover {
  background-color: #bbf1ef; /* サイトのテーマカラー */
  border-color: #009999;
  color: #0066cc;
}

/* ボタンの中の「←」記号に少し余白を作る */
#diary-nav button::before {
  margin-right: 5px;
}

/* 日記サイドバー内のリスト設定 */
#diary-nav ul {
  padding: 0;       /* 左側の余白をなくす */
  margin: 0;
}

#diary-nav li {
  margin-bottom: 2px; /* 項目ごとのわずかな隙間 */
  list-style: none; /* 箇条書きの「点」を消す */
}

/* リンク自体の見た目 */
#diary-nav li a {
  display: block;          /* 行全体をリンク範囲にする */
  padding: 8px 10px;       /* 上下左右に余白を作って押しやすくする */
  text-decoration: none;   /* 下線を消す */
  color: #333;             /* 文字色 */
  border-bottom: 1px dotted #eee; /* 項目間の区切り線（薄い点線） */
  transition: background-color 0.2s; /* 色の変化を少し滑らかに */
}

/* ★ホバー（マウスを合わせた時）の設定★ */
#diary-nav li a:hover {
  background-color: #bbf1ef; /* 背景と同じ水色にする（一体感が出る） */
  color: #0066cc;            /* 文字色を少し濃くする */
  border-bottom: 1px solid #009999; /* 下線を少し強調 */
  padding-left: 15px;        /* ほんの少し右にずれる動き（お好みで） */
}

/* 見出し（年・月）の微調整 */
#diary-nav h3 {
  font-size: 14px;
  margin: 15px 0 5px 0;
  color: #009999;
  border-bottom: 2px solid #bbf1ef;
}


/* ------------------------------------------------------------------------- */

/* 外枠（日記と共通の数値にすると綺麗です） */
.game-wrapper {
  display: flex;
  max-width: 900px;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #999999;
}

/* サイドバー */
.game-sidebar {
  width: 200px;
  border-right: 1px dotted #cccccc;
  padding: 15px;
  background-color: #f9f9f9;
  min-height: 1050px; /* 日記と高さを合わせる */
}

/* ゲームタイトルの設定 */
.game-title {
  display: block;
  font-weight: bold;
  padding: 8px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  margin-top: 10px;
  font-size: 13px;
}

.game-title:hover {
  background-color: #bbf1ef;
}

/* ★日付リスト：初期状態は隠す★ */
.date-list {
  display: none; 
  list-style: none;
  padding: 0;
  margin: 0;
}

/* JSでこのクラスがついたら表示する */
.date-list.is-open {
  display: block;
}

/* 日付リンクの見た目 */
.diary-link {
  display: block;
  padding: 5px 15px;
  font-size: 12px;
  text-decoration: none;
  color: #0066cc;
  border-bottom: 1px dotted #eee;
}

.diary-link:hover {
  background-color: #ffffcc;
}

/* 本文エリア */
.game-content {
  flex: 1;
  padding: 20px;
  min-height: 1050px;
}

.game-content img {
  max-width: 100%;
  height: auto;
  border: 4px solid #f0f0f0;
}

/* ------------------------------------------------------------------------- */

/* --- プロフィール全体の枠組み --- */
.profile-wrapper {
  display: flex;
  max-width: 900px;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #999999;
}

/* --- サイドバー（左） --- */
.profile-sidebar {
  width: 220px; /* アイコンサイズに合わせて少し広めに */
  border-right: 1px dotted #cccccc;
  padding: 15px;
  background-color: #f9f9f9;
  min-height: 600px; /* 内容が少なくても高さを確保 */
  text-align: center;
}

.profile-icon-area img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  padding: 5px;
  background: #fff;
  margin-bottom: 15px;
}

/* SNSリストを日記の目次風にデザイン */
.sns-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.sns-list li a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: #0066cc;
  border-bottom: 1px dotted #eee;
  font-size: 13px;
}

.sns-list li a:hover {
  background-color: #bbf1ef;
  color: #003366;
}

/* --- メイン本文（右） --- */
.profile-main {
  flex: 1;
  padding: 25px;
  line-height: 1.8;
}

.profile-main h3 {
  border-bottom: 2px solid #bbf1ef;
  padding-bottom: 5px;
  margin-bottom: 15px;
  color: #009999;
}

/* ------------------------------------------------------------------------- */

/* 更新情報エリア全体の枠 */
.update-section {
  margin-top: 20px;
  text-align: left;
}

.update-section h2 {
  font-size: 13px;
  background-color: #009999; /* 見出しに色をつけて「それっぽく」 */
  color: #ffffff;
  padding: 2px 5px;
  margin-bottom: 0;
}

/* スクロールする箱の部分 */
.update-box {
  height: 150px;           /* ここで高さを固定 */
  overflow-y: auto;        /* 縦方向にはみ出たらスクロールバーを出す */
  border: 1px solid #999;  /* 枠線 */
  background-color: #fafafa; /* 箱の中だけ少し色を変えると見やすい */
  padding: 5px;
  font-size: 12px;         /* 文字は少し小さめがレトロ */
}

/* リストの装飾を消す */
.update-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.update-box li {
  margin-bottom: 5px;
  border-bottom: 1px dotted #ccc; /* 項目ごとの区切り点線 */
  padding-bottom: 2px;
}

.update-box li span {
  font-weight: bold;
  color: #007a7a;
  display: block; /* 日付を改行させる場合はblock、横並びならinline */
}

/* ------------------------------------------------------------------------- */

/* スマホで見るときは縦並びに戻す設定 */
@media (max-width: 600px) {
  .contents-wrapper {
    flex-direction: column; /* 縦並びに変更 */
  }
  aside {
    width: 100%;          /* スマホでは横幅いっぱいにする */
  }

	/* ヘッダー設定 */

	#menu-toggle {
    display: block; /* ← スマホの時だけボタンを表示させる */
  }
	
	.header-top {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
  }

  .mobile-only {
    display: block; /* ボタンを表示 */
    background: none;
    border: 1px solid #999;
    padding: 5px 10px;
    margin-right: 15px; /* タイトルの左に配置 */
    cursor: pointer;
  }

  h1 {
    font-size: 1.2rem;
    margin: 0;
  }

  /* ナビゲーションメニューのドロップダウン設定 */
  header nav {
    display: none; /* 初期状態は隠す */
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    margin-top: 10px;
  }

  /* JSで 'open' クラスがついた時だけ表示する */
  header nav.open {
    display: block;
  }

  header nav ul {
    flex-direction: column; /* メニューを縦に並べる */
    gap: 0;
  }

  header nav ul li {
    border-bottom: 1px solid #eee;
  }

  header nav ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
  }
	/* ------------------------------------------------------------------------- */
	
	/* 日記とゲームの枠組みを縦並びにする */
  .diary-wrapper,
  .game-wrapper {
    flex-direction: column; /* 上下に並べる */
    margin: 10px;          /* 外側の余白を少し削る */
  }

  /* サイドバー（日付選択・ゲーム一覧）の設定 */
  .diary-sidebar,
  .game-sidebar {
    width: 100%;          /* 横幅いっぱい */
    min-height: auto;      /* PC用の1050px設定を解除 */
    max-height: 300px;     /* ★長すぎる場合はここでスクロールさせる */
    overflow-y: auto;      /* はみ出た分はスクロール */
    border-right: none;    /* 右の線を消す */
    border-bottom: 2px solid #bbf1ef; /* 下に区切り線を入れる */
    padding: 10px;
  }

  /* メイン本文エリアの設定 */
  .diary-content,
  .game-content {
    width: 100%;
    min-height: auto;      /* 本文も高さ固定を解除 */
    padding: 15px;
  }

  /* ゲームタイトルのボタンを少し大きくして押しやすくする */
  .game-title {
    padding: 12px;
    font-size: 14px;
  }
  /* ------------------------------------------------------------------------- */
  
  .profile-wrapper {
    /* 縦並び、かつ「下から上」の順に並べる */
    display: flex;
    flex-direction: column-reverse; 
    margin: 10px;
  }

  .profile-sidebar {
    width: 100%;
    min-height: auto;      /* PC用の高さをリセット */
    border-right: none;
    border-top: 2px solid #bbf1ef; /* 上側に区切り線を入れる（下がSNSになるため） */
    padding: 15px;
  }

  .profile-main {
    width: 100%;
    padding: 15px;
  }
  
  /* ------------------------------------------------------------------------- */
  
  .section {
    padding: 0 10px; /* 左右に少し余白を作る */
  }

  .info-row {
    display: block;      /* 横並びを解除して縦に並べる */
    margin-bottom: 20px; /* 各項目の間に少し広めの隙間を作る */
    border-bottom: 1px dotted #ccc; /* 下線で区切る */
    padding-bottom: 10px;
  }

  .label {
    width: 100% !important; /* 横幅いっぱいにする */
    font-weight: bold;
    margin-bottom: 5px;     /* 説明文との間の隙間 */
  }

  .label a {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    text-decoration: none;
    color: #007a7a;
  }

  .value {
    padding-left: 5px;      /* 少しだけ右に寄せて読みやすく */
    font-size: 13px;        /* 文字サイズを微調整 */
    color: #666;
  }
  
}