/* ドリンクページ用の左上ロゴ表示 */
#logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  z-index: 90;
}

#logo img {
  width: 100%;
  height: auto;
}

.drink-card {
  padding-left: 5px;
  padding-right: 5px;
}

/* カード画像の白枠と影 */
.card-img-container {
  aspect-ratio: 4 / 3; /* 横:縦 = 4:3 → 高さ = 幅 × 0.75 */
  overflow: hidden;
	padding: 4px;		/*写真の周りに少し余白を作って、より写真っぽく見せる*/
	background: #fff;	/*上の10pxとの間に出る色*/
	box-shadow: 0px 0px 50px 10px rgba(255,255,255,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅、範囲。255,255,255は白の事で0.4は色が40%出た状態の事。*/
}

/* カード内画像の表示調整 */
.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;  /* ← 上寄せにして顔が切れないように調整 */
}

/* 店舗名タイトル */
.vendor-title {
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .vendor-title {
    font-size: 1rem;
  }
}