/* static/css/base.css */

/* リセットCSS（オプション） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ボディのスタイル */
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  padding-bottom: 60px;
}

/* 特定のクラスがある場合、padding-bottom をリセット */
body.no-padding-bottom {
  padding-bottom: 0;
}


/* コンテナのスタイル */
/* .container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  min-height: 100vh;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} */

.container {
  width: 400px; /* モバイルデバイスの標準幅 */
  margin: 0 auto; /* 中央に配置 */
  /* padding: 20px; */
  background-color: #ffffff;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  min-height: calc(100vh - 60px); /* bottom-nav の高さを引く */
}


@media (max-width: 800px) {
  .container {
    width: 100%;
    margin: 0;
  }
}



/* HEADER STYLING */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* LOGO STYLING */
.logo {
  display: flex;
  align-items: center;
}

.logo-image {
  max-height: 40px; /* Adjust the height to match the size from the example */
  width: auto; /* Maintain aspect ratio */
}

/* HEADER ACTIONS */
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* LOGIN BUTTON */
.login-button {
  background-color: #0099ff;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #007acc;
}


/* HAMBURGER MENU */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger-menu div {
  width: 100%;
  height: 2px;
  background-color: #333333;
  transition: background-color 0.3s ease;
}

.hamburger-menu:hover div {
  background-color: #007acc;
}

/* サイドメニューのスタイル */
.side-menu {
  position: fixed;
  top: 0;
  right: -250px; /* 初期状態では画面外 */
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 15px;
}

.side-menu .menu-link {
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.side-menu .menu-link:hover {
  background-color: #f0f0f0;
}

/* オーバーレイのスタイル */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ハンバーガーメニューのアクティブ状態 */
.side-menu.active {
  right: 0;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}









/* 下部ナビゲーションバーのスタイル */
.bottom-nav {
  position: fixed; /* 固定位置に設定 */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  height: 60px;
  background-color: #ffffff;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  z-index: 1000; /* 他の要素より前面に表示 */
}

/* ナビゲーションアイテムのスタイル */
.bottom-nav .nav-item {
  text-decoration: none;
  color: #555555;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative; /* バッジやアイコンの調整用 */
}

.bottom-nav .nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
  transition: color 0.3s ease;
}

/* ホバー時およびアクティブ状態のスタイル */
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item.active {
  color: #fa61bd;
}

.bottom-nav .nav-item:hover i,
.bottom-nav .nav-item.active i {
  color: #fa61bd;
}

/* レスポンシブ調整（オプション） */
@media (max-width: 500px) {
  .container {
    width: 100%;
    margin: 0;
  }

  .bottom-nav {
    max-width: 100%;
    left: 0;
    transform: none;
  }

  .bottom-nav .nav-item span {
    font-size: 10px;
  }
}

/* ボタンのスタイル（例として追加） */
button,
a.button {
  display: inline-block;
  padding: 10px 20px;
  /* background-color: #007BFF; */
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}



/* 画像のレスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
}