@media screen and (max-width: 959px) {
  /* --- ヘッダー全体 --- */
  .site-header {
    height: 60px;
  }
  
  /* --- スマホ表示専用アプリロゴ --- */
  /* スマホ版ロゴ表示 */
  .mobile-header-logo,
  .mobile-header-logo--guest {
    display: flex;
    position: fixed;
    top: 3px;
    left: 5px;
    z-index: 16;
  }

  /* ダークモード用ロゴは非表示 */
  .mobile-header-logo .mobile-logo-image-dark,
  .mobile-header-logo--guest .mobile-logo-image-dark {
    display: none;
  }

  /* ダークモード時は通常ロゴを非表示にしてダークモード用スマホロゴを表示 */
  .dark .mobile-header-logo .mobile-logo-image,
  .dark .mobile-header-logo--guest .mobile-logo-image {
    display: none;
  }
  .dark .mobile-header-logo .mobile-logo-image-dark,
  .dark .mobile-header-logo--guest .mobile-logo-image-dark {
    display: block;
  }

  /* スマホロゴ（ダークモード用含め）高さ調整 */
  .mobile-logo-image,
  .mobile-logo-image-dark {
   height: 55px;
  }

  /* --- 中央表示部分を少し小さく --- */
  .header-center-item {
    transform: scale(0.80);
  }

  /* --- アカウントアイコン --- */
  #account-toggle {
    height: 40px;
    width: 40px;
    border-radius: 50%
  }

  /* --- アカウントアイコンのドロップダウン --- */
  #account-menu {
    top: 50px;
  }

  /* --- ベルマークのドロップダウン --- */
  .notification-dropdown {
    min-width: 300px;
    top: 30px;
    right: -50px;
  }

  #account-toggle:hover::before {
    background-color: transparent;
  }

  .notification-link:hover i.fa-bell {
    color: inherit;
  }
  
  /* --- ツールチップを非表示 --- */
  .tooltip-text {
    display: none;
  }

  /* --- ログイン前のヘッダー右群の表示調整 --- */
  .btn-guest-action {
    font-size: 14px;
    top: -5px;
  }

  /* --- スマホ画面では表示しないもの --- */
  .header-logo,
  .header-logo--guest,
  #new-record-button,

  /* サイドバー関連 */
  .sidebar,
  #sidebar-toggle,

  /* record系 */
  .clickable-row .col-date span,
  .col-memo {
    display: none;
  }

  /* --- スマホ専用ナビゲーション(画面下固定) --- */
  .mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  text-align: center;
  align-items: center;
  z-index: 1010;
  }

  .mobile-bottom-nav .mobile-nav-item {
  display: flex;             /* flex化 */
  flex-direction: column;    /* 縦並び */
  width: 20%;
  text-align: center;
  font-size: 12px;
  padding: 8px 0;
  text-decoration: none;
  color: #333;
  gap: 3px;
  }

  .mobile-bottom-nav .mobile-nav-item i {
  font-size: 20px;
  }

  /* ナビゲーション「＋」ボタン */
  .mobile-bottom-nav .mobile-nav-create {
    background: #f0f0f0;
    border-radius: 50%;
    position: relative;
    color: #333;
  }

  /* ＋アイコンを大きく */
  .mobile-bottom-nav .mobile-nav-create i {
    font-size: 26px;
  }

  /* --- home/index(ダッシュボード)  --- */
  /*タイトルのサイズ変更 */
  .dashboard-title {
  font-size: 20px;
  margin-bottom: 30px;
  }

  /* カードビュー全体を２×２に*/
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 横2枚 */
    gap: 10px;
    padding: 0 10px;
  }
  .stat-card {
    padding: 15px;
    border-radius: 10px;
    font-size: 14px;
  }
  .stat-card h3 {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .stat-value {
    font-size: 18px;
  }
  .stat-diff-container {
    margin-top: 4px;
  }
  .stat-diff {
    font-size: 12px;
  }

  /* (先週比)をカードタイトル下に移動 */
  .stat-sleep-card h3::after {
    content: "(先週比)";
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  /* (先週比)を非表示 */
  .stat-diff-label {
    display: none;
  }

  /* 「平均睡眠時間」カードの内容を縦並びにして小さく */
  .stat-value-container {
    display: flex;
    flex-direction: column;  /* 縦並び */
    align-items: center;
    font-weight: 700;
    gap: 4px;
  }
  .stat-value-container .stat-value {
    font-size: 14px;
  }
  
  /* 「平均睡眠時間」カードのdiffだけ小さく */
  .stat-sleep-card .stat-diff-container .stat-diff {
    font-size: 10px;
  }

  /*「/」を非表示 */
  .stat-divider {
    display: none;
  }

  /* 「今週の記録数」の内容を大きして中央へ */
  .stat-record-value {
    font-size: 24px;
    margin-top: 25px;
  }

  /* home/schedule一覧の幅とサイズ調整 */
  .dashboard-schedule-col-date { width: 70%; }
  .dashboard-schedule-col-title { width: 30%; }
  .dashboard-schedule-col-detail {
    display: none;
  }
  td.dashboard-schedule-col-date,
  td.dashboard-schedule-col-title {
    font-size: 14px;
  }

  /* home/record系一覧の幅とサイズ調整 */
/* 内側のブロックは横並びを維持する */
  .nav-date-controller > div {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* カレンダーだけを改行して下に落とす */
  .calendar-responsive {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 10px;
  }

  /* 「本日へ」をカレンダーの右横に */
  .calendar-responsive + a {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;  /* 日付選択との間隔 */
    margin-bottom: 10px;  /* 下余白はカレンダーと揃える */
  }

  .dashboard-col-date { width: 25%; }
  .dashboard-col-item { width: 5%; }
  .dashboard-col-detail { width: 35%; }
  .dashboard-col-memo {
    display: none;
  }
  .clickable-row span {
    display: none;
  }
  .clickable-row span.show {
  display: inline;
  }
  td.dashboard-col-date,
  td.dashboard-col-detail {
    font-size: 14px;
  }

  /* home/growthのグラフ */
  #dashboardChart {
    max-height: 300px;
    max-width: 400px;
    margin: 0 auto;
  }
  
  /* --- children/indexのレスポンシブ --- */
  .child-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .child-actions {
    flex-direction: row;      /* ボタンは横並びを維持 */
    width: 100%;
    justify-content: center;
  }

  /* --- 子供切り替えページのロゴとタイトルのサイズ調整 --- */
  .switch-logo-image,
  .switch-logo-image-dark {
    height: 50px;
  }
  .switch-child-page-title {
    font-size: 1rem;
  }

  /* --- 通知設定モーダル --- */
  .sidebar-modal {
    z-index: 1009;
    padding-top: 0;
    padding-bottom: 60px;
  }
  /* 通知設定モーダルの高さを制限 */
  .sidebar-modal-content {
    max-height: 500px;
  }
  /* 通知ドロップダウンの高さ制限 */
  .notification-dropdown {
    max-height: 400px;
    min-height: 400px;
  }

  /* --- 通知ポップアップを画面上中央へ --- */
  #notification-container {
    position: fixed;
    top: 20px;         /* 画面上に移動 */
    left: 50%;         /* 中央寄せ */
    transform: translateX(-50%);
    bottom: auto;      /* 右下指定の無効化 */
    right: auto;
    flex-direction: column; /* 上から順に積む */
    align-items: center;
    gap: 10px;
    z-index: 1000;
  }
  .notification-popup {
    min-width: 220px;
    text-align: center;
    transform: translateY(0); /* 初期状態の位置補正 */
  }
  .notification-popup.show {
    opacity: 1;
    transform: translateY(10px); /* 下にズレて出現するアニメーション */
  }

    /* --- record系indexビューのサイズ調整 --- */
  .responsive-table {
    font-size: 14px;
  }

  .col-date {
    width: 20%;
  }

  /* 調整が必要なrecordはそれぞれ命名している */
  .col-item1,
  .col-item2 {
    width: 40%;
  }

  /* 授乳 */
  .col-item1-feed,
  .col-item2-feed {
    width: 40%;
  }
  .col-item1-feed span,
  .col-item2-feed span {
    display: inline;
  }

  /* おむつ */
  .col-item1-diaper {
    width: 70%;
  }
  .col-item2-diaper {
    width: 10%;
  }

  /* 睡眠 */
  .col-date-sleep span,
  .col-item1-sleep span,
  .col-item2-sleep span {
    display: none;
  }
  .col-date-sleep::after {
    content: "〜";
  }
  .col-date-sleep {
    width: 35%;
  }
  .col-item1-sleep {
    width: 30%;
  }
  .col-item2-sleep {
    width: 35%;
  }

  /* 予防接種 */
  .col-item1-vaccination {
    width: 70%;
  }
  .col-item2-vaccination {
    width: 10%;
  }

  /* 成長グラフのサイズ調整 */
  .growth-chart {
    max-height: 300px;
    max-width: 400px;
  }

  /* --- record以外のindexビューのサイズ調整 --- */
  /* スケジュール */
  .schedule-table th,
  .schedule-table td {
    font-size: 14px;
  }
  .schedule-col-time,
  .schedule-col-item span,
  .schedule-col-memo {
    display: none;
  }
  .schedule-col-date {
    width: 45%;
  }
  .schedule-col-item {
    width: 55%;
  }

  /* 成長 */
  .growth-table th,
  .growth-table td {
    font-size: 14px;
  }
  .growth-col-item1 span,
  .growth-col-item2 span,
  .growth-col-item3 span,
  .growth-col-item4 span {
    display: block; /* ラベルと要素を縦並びに */
    margin-bottom: 2px;
  }
  .growth-col-item1,
  .growth-col-item2,
  .growth-col-item3,
  .growth-col-item4 {
    vertical-align: top;
  }

  .modal-container {
    margin-bottom: 60px;
  }
  .no-record-modal-container {
    height: 90%;
    max-height: 600px;
    margin-bottom: 60px;
  }

  .schedule-show-modern {
    width: 90%;
    margin-bottom: 60px;
  }

  /* --- feedのnewフォームのplaceholderのサイズ調整 --- */
  .form-input::placeholder {
    font-size: 2.5vw;
  }

  /* --- schedule/newのチェックボックスを縦並びに --- */
  .schedule-form-group .schedule-checkbox-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  /* ラベルの親要素で縦積みに */
  .schedule-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* --- 睡眠分析ビュー ---*/ 
  /* グラフをスマホ用4:3に縮小 */
  #dailySleepChart {
    max-height: 300px;
    max-width: 400px;
    margin-bottom: 0;
  }

  /* カードビューを縦並び＋全体的にに小さく */ 
  .sleep-summary-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .sleep-card {
    padding: 0.75rem;
    border-radius: 10px;
  }

  .sleep-card h3 {
    font-size: 12px;
  }

  .sleep-card .stat-value {
    font-size: 18px;
  }

  .sleep-card .stat-sub {
    font-size: 12px;
  }

  /* 日付検索機能バーのサイズ調整 */
  .filter-bar {
    font-size: 0.8rem;
  }
  .filter-date-input {
    width: 100px;
  }
  .filter-nav-btn {
    font-size: 12px;
  }

  /* 「利用規約」「プライバシーボリシー」タイトルを小さく */
  .static_pages-container h1 {
    font-size: 24px;
  }

  /* --- device関連 --- */
  /* ログイン画面 */
  .auth-container,
  .password-reset-container {
    margin-top: 40px;
  }  

  /* --- topページ --- */
  /* 先頭見出しのモックアップを縦並びに */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  /* サイズ調整 */
  .hero-content h1 {
    font-size: 20px;
  }

  .hero-content p {
    font-size: 14px;
  }

  .mockup {
    margin-top: 50px;
    height: 300px;
    width: auto;
  }

  /* 横並びスクロール式にしつつ必要ない場合は均等揃え */
  .top-screens-inner {
    justify-content: space-evenly;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 50px;
  }

  .top-screens-row {
    gap: 50px;
  }

  /* モックアップ下のテキストの横幅制限 */
  .top-screen-block p {
    max-width: 150px;
  }

  /* サイズ調整 */
  .top-screen-img {
    height: 260px;
    width: auto;
  }

  /* 「無料で始める」ボタンのサイズと余白調整 */
  .hero-content .btn-primary {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 20px;
    display: inline-block;
  }

  .cta .btn-primary {
  padding: 14px 26px;
  font-size: 20px;
  display: inline-block;
}

  /* 改行した時の始点をアイコンではなくテキストの先頭に合わせる */
  .use-cases li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 12px;
  }

  .use-cases li i {
    flex-shrink: 0; 
    line-height: 2; 
    font-size: 20px;
    color: inherit;
  }
  
  /* --- フッターをサイドバーの非表示分左にずらして中央表示 --- */
  footer.logged-in {
    width: 100%;
    margin-left: 0;
    margin-bottom: 60px;
  }
}