/* ボトルメニューサイトのスタイル */
body{
  background-color:black;
  color:white;
  font-style: italic;
  font-family: serif;
  overflow-x: hidden;
}

.container-fluid{
  text-align: center;
}

.menu {
  color: white;
  text-decoration: underline;
  text-decoration-color: #716f6f; /* 下線の色を指定 */
  margin-bottom: 55px;
}
.menu:hover {
  color: #ddd;
  text-decoration-color: #ddd; /* ホバー時の下線の色を変更 */
}

.menu-recommend{
  color: white;
  text-decoration: underline;
  text-decoration-color: #716f6f;
  margin-bottom: 80px;
}
.menu-recommend:hover{
  color: #ddd;
  text-decoration-color:#ddd;
}

/* インデックスページの header style */
header {
  background-color: #333;
  position: fixed;
  top: 0;
  color: white;
  text-align: center;
  padding: 15px 0 0 0;
  width: 100%;
  z-index: 1000;
}

.header-container{
  display: flex;
  justify-content: center;
  padding: 0;
  position: relative;
}
/* navbarのスタイル */
.navbar {
  background-color: #333; /* 適宜色を変更 */
  padding: 10px 10px;
}

/* main-menu全体のスタイル */
.main-menu {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* ボタンのスタイル */
.back-button {
  font-size: 16px;
  padding: 8px 12px;
  background-color: transparent; /* ボタンの背景を透明に */
  color: #fff; /* 適宜色を変更 */
  border: 1px solid #fff; /* 枠線の色 */
  border-radius: 5px;
}
.back-button:hover{
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 5px;
}

/* タイトルのスタイル */
.title {
  flex-grow: 1; /* 残りのスペースを占有 */
  text-align: center;
  color: #fff; /* 適宜色を変更 */
  margin: 0 0 0 15px;
}

/* フッターのスタイル */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-container p {
  margin: 0;
}

.social-links {
  margin-top: 10px;
}

.social-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.social-links a:hover {
  color: #ddd;
}

/* 画像のスタイル */
.images{
  border: 1px solid #333;
}
.img-responsive{
  width: 100%;
  height: 100%; 
}
/* 商材情報　details */
.details-top p {
  line-height: 1.2; /* 数値を小さくするほど行間が狭くなります */
  margin: 0; /* 追加で余白があれば削除 */
}
.details-low p{
  margin-top: 20px;
}
/* 価格スタイル */
.price{
  text-align: end;
}