/* ナビゲーションバー用スタイル */
@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&display=swap');
/* hiddenクラスの定義 */
.hidden {
  display: none !important;
}

.navbar-custom {
  background: #FFFAE6;
  border-bottom: 1px solid rgba(255,143,42,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

/* ロゴ */
.navbar-logo {
  font-family: 'Afacad', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #FF8F2A;
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar-logo:hover {
  color: #e67e22;
}

/* デスクトップナビゲーション */
.navbar-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-btn {
  background: #fff;
  color: #FF8F2A;
  border: 1px solid #FF8F2A;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.navbar-btn:hover {
  background: #FF8F2A;
  color: #fff;
}

.navbar-btn-active {
  background: #FF8F2A;
  color: #fff;
}

.navbar-icon-btn {
  background: none;
  border: none;
  color: #FF8F2A;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.navbar-icon-btn:hover {
  background: rgba(255,143,42,0.1);
}

.navbar-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* モバイルナビゲーション */
.navbar-mobile {
  display: none;
}

.navbar-hamburger {
  background: none;
  border: none;
  color: #FF8F2A;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.navbar-hamburger:hover {
  background: rgba(255,143,42,0.1);
}

.navbar-hamburger svg {
  width: 24px;
  height: 24px;
}

.close-icon {
  display: none;
}

.navbar-hamburger[aria-expanded="true"] .hamburger-icon {
  display: none;
}

.navbar-hamburger[aria-expanded="true"] .close-icon {
  display: block;
}

/* モバイルメニュー */
.navbar-mobile-menu {
  background: #fff;
  border-top: 1px solid rgba(255,143,42,0.1);
}

.mobile-menu-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu-item {
  padding: 12px 16px;
  color: #6a3b13;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mobile-menu-item:hover {
  background: rgba(255,143,42,0.1);
  color: #FF8F2A;
}

.mobile-menu-item-active {
  background: rgba(255,143,42,0.1);
  color: #FF8F2A;
}

.mobile-menu-item-logout {
  color: #e74c3c;
}

.mobile-menu-item-logout:hover {
  background: rgba(231,76,60,0.1);
  color: #c0392b;
}


/* レスポンシブ設定 */
@media (max-width: 767px) {
  /* モバイル画面：デスクトップメニューを非表示、モバイルメニューを表示 */
  .navbar-desktop {
    display: none;
  }
  
  .navbar-mobile {
    display: block;
  }
}

@media (min-width: 768px) {
  /* PC画面：モバイルメニューを完全に非表示 */
  .navbar-mobile {
    display: none;
    /* display: block; /* 一時的にblockに変更 */
    /* background: red; 目立つように赤背景 */
    /* padding: 10px; */ */
  }
  
  .navbar-mobile-menu {
    display: none !important;
    /* position: relative; 確認しやすくするため */
    /* background: yellow; 目立つように黄色背景 */
  }
}

/* フッター */
.footer-custom {
  background: #FFFAE6;
  padding: 32px 16px;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-links {
  margin-bottom: 16px;
}

.footer-link {
  color: #FF8F2A;
  text-decoration: none;
  margin: 0 16px;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #e67e22;
}

.footer-copyright {
  color: #FF8F2A;
  font-size: 12px;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .navbar-desktop {
    display: none;
  }
  
  .navbar-mobile {
    display: block;
  }
  
  .navbar-logo {
    font-size: 20px;
  }
  
  .footer-link {
    margin: 0 12px;
    font-size: 13px;
  }
  
  .footer-copyright {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  .navbar-container {
    padding: 0 24px;
  }
  
  .navbar-content {
    height: 72px;
  }
  
  .navbar-logo {
    font-size: 28px;
  }
  
  .navbar-btn {
    padding: 10px 20px;
    font-size: 15px;
  }
}