body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9; /* 背景を薄いグレーに */
}

/* ヘッダー全体 (デザインの濃い背景) */
.app-header {
    background-color: #1e1e1e; /* デザイン画像の濃い色 */
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ナビゲーションバー (ロゴとリンクを左右に配置) */
.nav-bar {
    display: flex;
    align-items: center;
    max-width: 1200px; /* 最大幅を設定して中央に寄せる */
    margin: 0 auto;
    /* padding: 15px 20px; */
    gap: 10px;
}

/* ロゴのスタイル */
.logo-link {
    color: #D4AF37;
    /* Google Fonts */
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
}

/* ナビゲーションリンクエリア */
.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    margin-left: auto;
}

.nav-item {
    color: #c0c0c0; /* リンクの色を白に近いグレーに */
    text-decoration: none;
    margin-left: 20px;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap; /* ボタンが折り返さないように */
}

.nav-item:hover {
    background-color: #333333;
    color: #ffffff;
}

.user-info {
    color: #c0c0c0;
    margin-left: 20px; /* nav-item と揃える */
    padding: 8px 12px;
    border-radius: 5px;
    white-space: nowrap;
    cursor: default;
}

/* ログイン中のステータス表示 */
.user-info {
    color: #4CAF50; /* ログイン中であることを示す色 */
    font-weight: bold;
    margin-right: 10px;
}

/* --- メインコンテンツとレイアウト 
.container.main-content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}--- */

.content-flex {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

 /* メモ一覧 */
.memo-list-area {
    flex-grow: 3;
    padding-right: 20px;
}

/* サイドバー */
.sidebar-area {
    flex-grow: 1;
    min-width: 250px;
}

.schedule-link {
    display: block;
    text-align: right;
    margin-bottom: 15px;
    font-weight: bold;
    color: #4A90E2;
    text-decoration: none;
}

/* カレンダーボックス
.calendar-box {
    background-color: #9370DB;
    color: white;
    padding: 30px;
    border-radius: 8px;
    height: 300px; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: 500;
} -->

/* --- フッター --- */
footer {
    background-color: #2c2c2c;
    color: #aaaaaa;
    padding: 15px 20px;
    margin-top: 40px;
    font-size: 0.85em;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.footer-link {
    color: #aaaaaa;
    text-decoration: none;
}

.footer-link:hover {
    color: #ffffff;
    text-decoration: underline;
}





html, body {
    height: 100%; /* 画面の高さいっぱいを使う */
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column; /* 要素を縦一列に並べる */
    min-height: 100vh; /* 画面の高さが低い場合でも、最低限画面全体を占めるようにする */
}

/* メインコンテンツ部分のスタイル */
main {
    flex-grow: 1; /* メインコンテンツが利用可能なスペースを全て占有し、伸びる */
    padding: 20px; /* 必要に応じてパディングを追加 */
}

/* フッターのスタイル */
.app-footer {
    flex-shrink: 0; /* フッターは縮まないように固定 */
    background-color: #333;
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.85em;
}

/* 上段（著作権表示） */
.footer-top {
    margin-bottom: 8px; /* 上下の余白 */
}

/* 下段（リンク） */
.footer-bottom {
    display: flex;
    justify-content: center; 
    gap: 16px; /* リンク間のスペース */
    flex-wrap: wrap; /* 画面幅が狭くなったら改行 */
}

.footer-link {
    color: #aaaaaa;
    text-decoration: none;
}

.footer-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 準備中の利用規約の見た目 */
.cursor-not-allowed {
    cursor: not-allowed;
    color: #aaaaaa;
}


.hamburger {
  cursor: pointer;
  font-size: 26px;
  padding: 10px;
  color:#D4AF37;
  z-index: 1001;
  margin-left: auto;
}

.hamburger-menu {
  display: none ;
  position: absolute;
  top: 60px;
  right: 20px;
  background: #333;
  padding: 15px;
  border-radius: 8px;
  width: 200px;
  max-width: 80vw;
  z-index: 1000;
}

.hamburger-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hamburger-menu li {
  margin: 10px 0;
}

.hamburger-menu a {
  color: white;
  text-decoration: none;
}

.hamburger-menu li a {
    display: block;
    padding: 10 px 16px;
    font-size: 0.95rem;
}

.hamburger-menu li a:hover {
    background-color: rgba(255,255,255,0.1);
}

.language-switch {
  margin-top: 8px;
  font-size: 0.9rem;
  opacity: 0.9;
}


.language-switch a {
  display: block;
  padding: 10px 16px;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.language-switch a:hover {
  background-color: rgba(255,255,255,0.1);
}




/* モバイル対応のためのメディアクエリ (画面幅 768px 以下)  */
@media (max-width: 768px) {
    /*  ヘッダーの修正 */

    /* リンク全体を非表示にする（ハンバーガーメニューに格納するため） */
    .nav-links {
        display: none !important;
    }

    /* ログイン中ステータスはモバイルでも表示し、ヘッダーに合わせる */
    .login-status-mobile {
        order: 2;
        margin-right: 10px;

    }

    /* ハンバーガーメニューを表示する（デフォルトで非表示になっている場合） */
    .hamburger {
        order: 3;
        display: block; /* デフォルトで非表示設定がない場合は不要 */
    }

    /* nav-barのパディングを調整して、左右に余白を持たせる 
    .nav-bar {
        padding: 10px 15px;
    } */

    /* ロゴのサイズ調整 */
    .logo-link {
        font-size: 1.2rem;
    }

    /* --- メインコンテンツの修正（全体が左寄せになっている場合） --- */

    /* メインコンテンツのコンテナのパディングを調整し、画面端との余白を確保 */
    .container.main-content {
        padding: 15px;
        margin: 10px auto;
        /* max-widthはそのまま維持 */
    }

    /* サイドバーとメモ一覧のFlexboxを解除し、縦並びにする */
    .content-flex {
        flex-direction: column;
        gap: 15px;
    }

    /* メモ一覧とサイドバーの幅設定を解除（幅いっぱいに使う） */
    .memo-list-area,
    .sidebar-area {
        flex-grow: unset;
        min-width: unset;
        padding-right: 0;
    }
}

/* PCでは .mobile-only を非表示 */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

/* スマホでは PCリンクを非表示 */
@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
}