@charset "UTF-8";

/* brand-winery個別投稿ページ用 */
/* ▼ リセット ▼ */
main#main.main {
	padding-left: 0;
	padding-right: 0;
	border: none;
}
/* ▲ リセット ▲ */
/* ▼ h1タイトル ▼ */
h1 {
	text-align: center;
	font-size: 28px;
	font-weight: 600;
	color: #6a2137;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN","Hiragino Mincho Pro", serif;
}
/* ▲ h1タイトル ▲ */
/* ▼ logo画像を表示 ▼ */
#wrap_logo-img {
	margin: 15px auto 20px;
	width: 200px;
}
.brand-winery-thumbnail {
	width: 200px;
}
.brand-winery-thumbnail__image {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
}
/* ▲ logo画像を表示 ▲ */
/* ▼ ブランド紹介の幅 ▼ */
#wrap_brand-intoro {
	margin: 0 auto 50px;
	padding-top: 1em;
	width: 880px;
	font-size: 16px;
	border-top: 1px solid #d5becc;
}
p.note-r {
	text-align: right;
}
@media (max-width: 768px) {
	#wrap_brand-intoro {
		margin: 0 auto;
		width: 100%;
	}
}
/* ▲ ブランド紹介の幅 ▲ */
/* ▼ カルーセル ▼ */
.my-carousel {
	margin: 0 auto 50px;
	max-width: 600px;
}
.my-carousel img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
@media (max-width: 768px) {
	.my-carousel {
		margin: 50px auto 30px;
	}
}
/* ▲ カルーセル ▲ */
/* ▼ ブランド商品一覧 ▼ */
#wrap_brand-card {
	margin: 50px auto 0;
	width: 90%;
}
#wrap_brand-card h2 {
	font-size: 18px;
	font-weight: 700;
	color: #6a2137;
}
.pro-brand-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.pro-brand-card {
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
}
.pro-brand-card__image img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.pro-brand-card__body {
	padding: 20px;
}
.pro-brand-card__title {
	margin: 0 0 12px;
}
@media (max-width: 768px) {
	.pro-brand-list {
		grid-template-columns: 1fr;
	}
}
/* ▲ ブランド商品一覧 ▲ */
/* ▼ ブランド説明 ▼ */
#wrap_brand-info {
	margin: 50px 0;
	padding: 30px 0 0;
	width: 100%;
}
#brand-info_text {
	margin: 0 auto;
	width: 880px;
}
#brand-info_text h3 {
	margin-bottom: 1em;
	padding-bottom: 0.3em;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #6a2137;
	border-bottom: 1px solid #d5becc;
}
#brand-info_text h3:not(:first-of-type) {
	margin-top: 50px;
}
#brand-info_text p {
	font-size: 16px;
	line-height: 1.8;
}
.brand_img,
.brand_img img {
	width: 100%;
}
@media (max-width: 768px) {
	#brand-info_text {
		margin: 0 auto;
		width: 100%;
	}
}
/* ▲ ブランド説明 ▲ */
/* ▼ YouTube サムネイル画像 ▼ */
/* --- PC向け（基本のスタイル） --- */
.youtube-thumbnail-link {
  width: 600px; /* 横幅を600pxに指定 */
  height: auto; /* 縦横比を維持 */
  margin: 0 auto 20px; /* 画像を中央寄せにする */
  display: block;
  transition: opacity 0.3s ease; /* マウスを乗せたときのアニメーション */
}
.youtube-thumbnail-link img {
  width: 100%;
  border-radius: 8px; /* 角を少し丸くする（不要なら削除） */
}

/* マウスを乗せたときに少し画像を薄くしてリンクっぽく見せる */
.youtube-thumbnail-link a:hover img {
  opacity: 0.8;
}

/* --- iPad・タブレット・スマホ向け --- */
/* 画面幅が1024px以下（iPadなど）の場合に適用 */
@media screen and (max-width: 1024px) {
  .youtube-thumbnail-link {
    width: 80%; /* 横幅を画面の80%にする */
  }
}
/* ▲ YouTube サムネイル画像 ▲ */
/* ▼ コンテンツの横幅 ▼ */
@media (max-width: 768px) {
	article {
		margin: 0 auto;
		width: 80%;
	}
	main article .wine-tile-list {
		width: 100%;
	}
	.wine-tile-list  a article {
		width: 100%;
	}
}
@media (max-width: 480px) {
	article {
		margin: 0 auto;
		width: 84%;
	}
}
/* ▲ コンテンツの横幅 ▲ */