/* [MOBILE] app-container: モバイル用中央寄せ枠 */
    .app-container {
      max-width: 420px;
      margin: 0 auto;
      background: #FAFAFA;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      position: relative;
    }
    
    /* ヘッダー */
    .header {
      background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
      color: white;
      padding: 20px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .header h1 {
      font-size: 22px;
      font-weight: 600;
    }
    
    .back-btn {
      background: rgba(255,255,255,0.2);
      border: none;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: white;
    }

    /* [DESKTOP] サイドナビ - モバイルでは非表示 */
    .sidebar {
      display: none;
    }
    
    /* メインコンテンツ */
    .main-content {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding-bottom: 64px;
    }

    /* [MOBILE/TABLET] メインエリア: flexboxで下部ナビを最下部に配置 */
    .main-area {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    
    .screen {
      flex: 1;
      padding: 24px 16px;
      display: none;
    }
    
    .screen.active {
      display: block;
    }

    /* ===========================================
       利用者向け初期説明画面
       =========================================== */
    .intro-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 0;
    }

    .intro-logo {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3);
    }

    .intro-title {
      font-size: 20px;
      font-weight: 700;
      color: #2E7D32;
      margin-bottom: 4px;
    }

    .intro-subtitle {
      font-size: 16px;
      color: #666;
      margin-bottom: 24px;
    }

    .intro-box {
      background: white;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      text-align: left;
      width: 100%;
    }

    .intro-text {
      font-size: 15px;
      color: #333;
      line-height: 1.8;
    }

    .intro-note {
      background: #FFF8E1;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      width: 100%;
      text-align: left;
      border: 1px solid #FFE082;
    }

    .intro-note p {
      font-size: 13px;
      color: #666;
      line-height: 1.7;
      margin: 0;
    }

    .intro-btn {
      width: 100%;
      padding: 20px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
      color: white;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    }

    .intro-btn:active {
      transform: scale(0.98);
    }

    /* ===========================================
       カード基本スタイル
       =========================================== */
    .card {
      background: white;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .card-icon {
      background: #E8F5E9;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .card-label {
      font-size: 14px;
      color: #666;
    }
    
    .card-value {
      font-size: 32px;
      font-weight: 700;
      color: #2E7D32;
    }
    
    .card-value span {
      font-size: 18px;
      font-weight: 400;
    }
    
    .card-divider {
      border-top: 1px solid #EEE;
      padding-top: 16px;
    }
    
    .card-row-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .card-row-value {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }

    /* ===========================================
       請求書ステータス
       =========================================== */
    .billing-status {
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    
    .billing-status.pending {
      background: #FFF8E1;
      border: 1px solid #FFE082;
    }
    
    .billing-status.issued {
      background: #E8F5E9;
      border: 1px solid #A5D6A7;
    }
    
    .billing-badge {
      color: white;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
    }
    
    .billing-badge.pending {
      background: #FFB300;
    }
    
    .billing-badge.issued {
      background: #2E7D32;
    }
    
    .billing-text {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    /* ===========================================
       相談ボタン（最重要UI要素）
       =========================================== */
    .consult-section {
      margin-bottom: 16px;
    }

    .consult-btn {
      width: 100%;
      padding: 24px;
      border-radius: 20px;
      border: none;
      background: linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
      color: white;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(21, 101, 192, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    
    .consult-btn:active {
      transform: scale(0.98);
    }
    
    .consult-icon {
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .consult-text {
      text-align: left;
    }
    
    .consult-title {
      font-size: 20px;
      font-weight: 700;
    }
    
    .consult-subtitle {
      font-size: 13px;
      opacity: 0.9;
      margin-top: 4px;
    }
    
    .consult-note {
      text-align: center;
      font-size: 13px;
      color: #888;
      margin-top: 12px;
      line-height: 1.6;
    }

    /* ===========================================
       履歴カード
       =========================================== */
    .history-card {
      width: 100%;
      background: white;
      border: none;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 12px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .history-date {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }
    
    .history-route {
      font-size: 15px;
      color: #666;
      margin-bottom: 4px;
    }
    
    .history-status {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      margin-top: 8px;
    }
    
    .history-status.completed {
      background: #E8F5E9;
      color: #2E7D32;
    }
    
    .history-status.cancelled {
      background: #FFEBEE;
      color: #C62828;
    }

    /* ===========================================
       サマリーボタン
       =========================================== */
    .summary-btn {
      width: 100%;
      background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
      border: 2px solid #2E7D32;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .summary-label {
      font-size: 14px;
      color: #2E7D32;
      margin-bottom: 4px;
    }
    
    .summary-title {
      font-size: 20px;
      font-weight: 600;
      color: #1B5E20;
    }

    /* ===========================================
       参考負担額カード
       =========================================== */
    .estimate-card {
      background: #FFF8E1;
      border-radius: 16px;
      padding: 24px;
      margin-top: 16px;
      border: 1px solid #FFE082;
    }
    
    .estimate-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .estimate-value {
      font-size: 28px;
      font-weight: 700;
      color: #F57C00;
      margin-bottom: 12px;
    }
    
    .estimate-note {
      background: rgba(255,255,255,0.7);
      border-radius: 8px;
      padding: 12px;
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }

    /* ===========================================
       FAQ
       =========================================== */
    .faq-item {
      background: white;
      border-radius: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      overflow: hidden;
    }
    
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px;
      cursor: pointer;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .faq-q-content {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    
    .faq-badge {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      flex-shrink: 0;
      color: white;
    }
    
    .faq-badge.q {
      background: #2E7D32;
    }
    
    .faq-badge.a {
      background: #F57C00;
    }
    
    .faq-text {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      line-height: 1.5;
    }
    
    .faq-answer {
      padding: 0 20px 20px;
      border-top: 1px solid #EEE;
      display: none;
    }
    
    .faq-answer.open {
      display: block;
    }
    
    .faq-a-content {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding-top: 16px;
    }
    
    .faq-a-text {
      font-size: 15px;
      color: #555;
      line-height: 1.8;
    }

    /* ===========================================
       メニュー
       =========================================== */
    .settings-group {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      margin-bottom: 16px;
    }
    
    .settings-item {
      width: 100%;
      background: none;
      border: none;
      border-bottom: 1px solid #EEE;
      padding: 20px;
      cursor: pointer;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .settings-item:last-child {
      border-bottom: none;
    }
    
    .settings-label {
      font-size: 17px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }
    
    .settings-desc {
      font-size: 13px;
      color: #888;
    }

    /* ===========================================
       チェックボックス・トグル
       =========================================== */
    .checkbox-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      margin-bottom: 8px;
      border-radius: 10px;
      border: 2px solid #E0E0E0;
      background: white;
      cursor: pointer;
      text-align: left;
    }
    
    .checkbox-item.checked {
      border-color: #2E7D32;
      background: #E8F5E9;
    }
    
    .checkbox-box {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 2px solid #CCC;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .checkbox-item.checked .checkbox-box {
      border: none;
      background: #2E7D32;
    }
    
    .checkbox-label {
      font-size: 15px;
      color: #333;
    }
    
    .checkbox-item.checked .checkbox-label {
      color: #2E7D32;
    }
    
    .toggle-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .toggle-btn {
      width: 56px;
      height: 32px;
      border-radius: 16px;
      border: none;
      background: #CCC;
      cursor: pointer;
      position: relative;
      transition: background 0.2s;
    }
    
    .toggle-btn.active {
      background: #2E7D32;
    }
    
    .toggle-knob {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: white;
      position: absolute;
      top: 2px;
      left: 2px;
      transition: left 0.2s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .toggle-btn.active .toggle-knob {
      left: 26px;
    }

    /* ===========================================
       フッター・ナビゲーション
       =========================================== */
    .footer {
      background: #F5F5F5;
      padding: 16px;
      border-top: 1px solid #E0E0E0;
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }
    
    .navbar {
      display: flex;
      justify-content: space-around;
      background: white;
      border-top: 1px solid #E0E0E0;
      padding: 8px 0;
      position: sticky;
      bottom: 0;
      z-index: 100;
    }
    
    .nav-item {
      background: none;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      cursor: pointer;
      color: #757575;
      min-width: 60px;
    }
    
    .nav-item.active {
      color: #2E7D32;
    }
    
    .nav-item span {
      font-size: 11px;
    }
    
    .nav-item.active span {
      font-weight: 600;
    }

    /* ===========================================
       モーダル
       =========================================== */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }
    
    .modal-overlay.open {
      display: flex;
    }
    
    .modal-overlay.center {
      align-items: center;
      padding: 20px;
    }
    
    .modal-content {
      background: white;
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 420px;
      max-height: 90vh;
      overflow: auto;
    }
    
    .modal-content.center {
      border-radius: 24px;
      max-width: 360px;
      padding: 32px 24px;
      text-align: center;
    }
    
    .modal-header {
      padding: 20px;
      border-bottom: 1px solid #EEE;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: white;
      z-index: 10;
    }
    
    .modal-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }
    
    .modal-close {
      background: #F5F5F5;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .modal-body {
      padding: 20px;
    }
    
    .modal-info {
      background: #E8F5E9;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      font-size: 14px;
      color: #2E7D32;
      line-height: 1.7;
    }
    
    .form-group {
      margin-bottom: 24px;
    }
    
    .form-label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    
    .form-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .form-option {
      padding: 14px 24px;
      border-radius: 12px;
      border: 2px solid #E0E0E0;
      background: white;
      color: #666;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .form-option.selected {
      border-color: #2E7D32;
      background: #E8F5E9;
      color: #2E7D32;
    }
    
    .form-input {
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      border: 2px solid #E0E0E0;
      font-size: 16px;
      font-family: inherit;
    }
    
    .form-input:focus {
      outline: none;
      border-color: #2E7D32;
    }
    
    .form-hint {
      margin: 8px 0 0;
      font-size: 13px;
      color: #888;
    }
    
    .form-warning {
      background: #FFF8E1;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      font-size: 13px;
      color: #F57C00;
      line-height: 1.7;
    }
    
    .submit-btn {
      width: 100%;
      padding: 20px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
      color: white;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    }

    /* 確認モーダル */
    .confirm-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #E8F5E9;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
    }
    
    .confirm-title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      margin: 0 0 16px;
    }
    
    .confirm-message {
      font-size: 16px;
      color: #666;
      line-height: 1.8;
      margin: 0 0 24px;
    }
    
    .confirm-note {
      background: #F5F5F5;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
      font-size: 14px;
      color: #888;
      line-height: 1.6;
    }
    
    .confirm-btn {
      width: 100%;
      padding: 18px;
      border-radius: 14px;
      border: none;
      background: #2E7D32;
      color: white;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
    }

    /* ===========================================
       到着通知
       =========================================== */
    .arrival-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 12px;
      display: none;
      animation: slideDown 0.3s ease-out;
    }
    
    .arrival-banner.show {
      display: block;
    }
    
    @keyframes slideDown {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    .arrival-content {
      max-width: 420px;
      margin: 0 auto;
      background: linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      color: white;
    }
    
    .arrival-content.arrived {
      background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%);
    }
    
    .arrival-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .arrival-main {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .arrival-icon {
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .arrival-label {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 4px;
    }
    
    .arrival-title {
      font-size: 20px;
      font-weight: 700;
    }
    
    .arrival-subtitle {
      font-size: 14px;
      margin-top: 8px;
      opacity: 0.9;
    }
    
    .arrival-close {
      background: rgba(255,255,255,0.2);
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: white;
    }
    
    .arrival-demo-btn {
      margin-top: 16px;
      width: 100%;
      padding: 12px;
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 12px;
      color: white;
      font-size: 14px;
      cursor: pointer;
    }

    /* ===========================================
       情報カード・詳細画面
       =========================================== */
    .info-card {
      background: #E3F2FD;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid #90CAF9;
    }
    
    .info-card p {
      font-size: 15px;
      color: #1565C0;
      line-height: 1.8;
      margin: 0;
    }
    
    .detail-section {
      margin-bottom: 24px;
    }
    
    .detail-label {
      font-size: 13px;
      color: #888;
      margin-bottom: 6px;
    }
    
    .detail-value {
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }
    
    .detail-value.small {
      font-size: 18px;
      font-weight: 500;
    }
    
    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 24px;
    }

    /* ===========================================
       [TABLET] タブレット（768px〜1023px）
       - 2カラム配置
       - ナビゲーションは下固定のまま
       =========================================== */
    @media (min-width: 768px) {
      /* [TABLET] app-container: 幅拡張 */
      .app-container {
        max-width: 960px;
      }

      /* [TABLET] ヘッダー */
      .header {
        padding: 20px 24px;
      }

      .header h1 {
        font-size: 24px;
      }

      /* [TABLET] スクリーン */
      .screen {
        padding: 32px 24px;
      }

      /* [TABLET] ホーム画面: 2カラムレイアウト用ラッパー */
      .home-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 24px;
      }

      .home-grid .card {
        margin-bottom: 0;
      }

      /* [TABLET] 相談セクション: 全幅 */
      .consult-section {
        margin-top: 8px;
      }

      /* [TABLET] 履歴画面: 2カラムグリッド */
      .history-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .history-grid .history-card {
        margin-bottom: 0;
      }

      /* [TABLET] FAQ: 2カラム */
      .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .faq-grid .faq-item {
        margin-bottom: 0;
      }

      /* [TABLET] メニュー: カード横並び */
      .settings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .settings-grid .card,
      .settings-grid .settings-group {
        margin-bottom: 0;
      }

      /* [TABLET] モーダル: 中央表示 */
      .modal-overlay {
        align-items: center;
        padding: 24px;
      }

      .modal-content {
        border-radius: 24px;
        max-width: 560px;
      }

      /* [TABLET] 到着通知: 幅拡張 */
      .arrival-content {
        max-width: 600px;
      }
    }

    /* ===========================================
       [DESKTOP] デスクトップ（1024px〜）
       - 左サイドナビ＋右メインコンテンツ
       - 完全に横長前提のレイアウト
       =========================================== */
    @media (min-width: 1024px) {
      /* [DESKTOP] body: 背景色調整 */
      body {
        background: #ECEFF1;
      }

      /* [DESKTOP] app-container: フル幅、横並びレイアウト */
      .app-container {
        max-width: none;
        flex-direction: row;
        box-shadow: none;
        background: transparent;
      }

      /* [DESKTOP] サイドナビ: 表示 */
      .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        min-width: 240px;
        background: white;
        border-right: 1px solid #E0E0E0;
        height: 100vh;
        position: sticky;
        top: 0;
      }

      .sidebar-header {
        padding: 24px;
        border-bottom: 1px solid #EEE;
      }

      .sidebar-logo {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .sidebar-logo-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .sidebar-logo-text {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
      }

      .sidebar-nav {
        flex: 1;
        padding: 16px 0;
      }

      .sidebar-nav-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #666;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        transition: all 0.2s ease;
      }

      .sidebar-nav-item:hover {
        background: #F5F5F5;
        color: #333;
      }

      .sidebar-nav-item.active {
        background: #E8F5E9;
        color: #2E7D32;
        font-weight: 600;
        border-right: 3px solid #2E7D32;
      }

      .sidebar-nav-item svg {
        flex-shrink: 0;
      }

      .sidebar-footer {
        padding: 16px 24px;
        border-top: 1px solid #EEE;
        font-size: 12px;
        color: #888;
        line-height: 1.5;
      }

      /* [DESKTOP] メインエリア */
      .main-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: #FAFAFA;
      }

      /* [DESKTOP] ヘッダー: 横長対応 */
      .header {
        padding: 20px 32px;
        position: sticky;
        top: 0;
        z-index: 100;
      }

      .header h1 {
        font-size: 26px;
      }

      /* [DESKTOP] 下部ナビ: 非表示 */
      .navbar {
        display: none;
      }

      /* [DESKTOP] メインコンテンツ */
      .main-content {
        flex: 1;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        padding: 0 32px;
        padding-bottom: 0;
      }

      /* [DESKTOP] スクリーン */
      .screen {
        padding: 32px 0;
      }

      /* [DESKTOP] ホーム画面: 3段構成 */
      /* 上段: ステータスカード横並び */
      .home-top-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 32px;
      }

      .home-top-row .card {
        margin-bottom: 0;
      }

      /* 中段: 2カラム（履歴 + 相談） */
      .home-main-row {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 32px;
        margin-bottom: 32px;
      }

      /* [DESKTOP] 相談セクション: 右カラム固定 */
      .consult-section-desktop {
        position: sticky;
        top: 120px;
      }

      .consult-section-desktop .consult-btn {
        flex-direction: column;
        padding: 32px 24px;
        text-align: center;
      }

      .consult-section-desktop .consult-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
      }

      .consult-section-desktop .consult-text {
        text-align: center;
      }

      .consult-section-desktop .consult-title {
        font-size: 22px;
      }

      .consult-section-desktop .consult-note {
        margin-top: 16px;
        text-align: center;
      }

      /* [DESKTOP] 最新履歴カード */
      .home-recent-history {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      }

      .home-recent-history-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .home-recent-history .history-card {
        margin-bottom: 12px;
        box-shadow: none;
        border: 1px solid #EEE;
      }

      .home-recent-history .history-card:last-child {
        margin-bottom: 0;
      }

      /* [DESKTOP] 下段: 注記 */
      .home-bottom-row {
        background: #F5F5F5;
        border-radius: 12px;
        padding: 20px 24px;
      }

      .home-bottom-row p {
        font-size: 13px;
        color: #666;
        line-height: 1.7;
        margin: 0;
      }

      /* [DESKTOP] グリッドレイアウトをリセット（モバイル用は非表示） */
      .home-grid {
        display: none;
      }

      /* [DESKTOP] 履歴画面 */
      .history-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      /* [DESKTOP] 詳細画面 */
      .detail-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 32px;
      }

      /* [DESKTOP] サマリー画面 */
      .summary-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      .summary-layout .card,
      .summary-layout .estimate-card {
        margin: 0;
      }

      /* [DESKTOP] 請求画面 */
      .billing-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }

      .billing-layout .card,
      .billing-layout .info-card {
        margin: 0;
      }

      /* [DESKTOP] FAQ: 2カラム維持 */
      .faq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      /* [DESKTOP] メニュー */
      .settings-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .settings-layout .settings-group {
        margin-bottom: 0;
      }

      /* 右カラム内のカード：最後以外にマージンを追加 */
      .settings-layout > div > .card:not(:last-child) {
        margin-bottom: 16px;
      }

      .settings-layout > div > .card:last-child {
        margin-bottom: 0;
      }

      /* [DESKTOP] モーダル */
      .modal-content {
        max-width: 640px;
      }

      .modal-content.center {
        max-width: 420px;
      }

      /* [DESKTOP] 到着通知 */
      .arrival-content {
        max-width: 700px;
      }

      /* [DESKTOP] フッター */
      .footer {
        padding: 20px 32px;
        text-align: center;
      }
    }

    /* ===========================================
       [LARGE DESKTOP] 大画面（1440px〜）
       =========================================== */
    @media (min-width: 1440px) {
      .sidebar {
        width: 280px;
        min-width: 280px;
      }

      .main-content {
        max-width: 1400px;
      }

      .home-main-row {
        grid-template-columns: 1fr 440px;
        gap: 48px;
      }

      .history-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }