@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 出店詳細ページ　---------------------------------- */
.vendor-detail {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 20px;
  color: #222;
}

.vendor-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.main-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}

.thumb-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.thumb-list img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.category {
  display: inline-block;
  background: #b51f24;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.vendor-info h1 {
  font-size: 40px;
  line-height: 1.3;
  margin: 0 0 8px;
}

.area {
  font-weight: bold;
  color: #777;
  margin-bottom: 24px;
}

.lead {
  line-height: 1.9;
  margin-bottom: 24px;
}

.date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.date-list span {
  background: #f3c623;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 999px;
}

.menu-section,
.shop-section {
  margin-top: 56px;
}

.menu-section h2,
.shop-section h2 {
  font-size: 28px;
  margin-bottom: 24px;
  border-left: 6px solid #b51f24;
  padding-left: 14px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.menu-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  background: #fffaf0;
  border: 1px solid #ead8bd;
  border-radius: 16px;
  padding: 14px;
}

.menu-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.menu-card h3 {
  font-size: 20px;
  margin: 0 0 8px;
}

.menu-card p {
  font-weight: bold;
  color: #b51f24;
  margin: 0;
}

.shop-section dl {
  background: #fff;
  border: 1px solid #ead8bd;
  border-radius: 16px;
  overflow: hidden;
}

.shop-section dl div {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid #ead8bd;
}

.shop-section dl div:last-child {
  border-bottom: none;
}

.shop-section dt,
.shop-section dd {
  padding: 18px;
}

.shop-section dt {
  background: #fff4df;
  font-weight: bold;
}

.shop-section dd {
  margin: 0;
}

.shop-section a {
  color: #b51f24;
  font-weight: bold;
}

/* スマホ */
@media (max-width: 768px) {
  .vendor-detail {
    padding: 36px 16px;
  }

  .vendor-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vendor-info h1 {
    font-size: 30px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-card {
    grid-template-columns: 110px 1fr;
  }

  .shop-section dl div {
    grid-template-columns: 1fr;
  }

  .shop-section dt {
    padding-bottom: 6px;
  }

  .shop-section dd {
    padding-top: 6px;
  }
}

/* SNS　公式サイトのリンク　URLなければグレーアウト ------------- */
.shop-info-list .is-disabled {
  color: #aaa;
  font-weight: bold;
  pointer-events: none;
  cursor: default;
}

.shop-info-list .is-disabled::after {
  /* content: "（準備中）"; */
  font-size: 0.85em;
  margin-left: 0.4em;
  color: #bbb;
}

/* 出店可否が休店の場合はグレーにする --------------------- */
.date-list span{
    display:inline-block;
    padding:10px 18px;
    background:#f3c316;
    color:#333;
    border-radius:999px;
    font-weight:700;
}

.date-list span.closed{
    background:#d9d9d9;
    color:#666;
}

/* 店舗カテゴリによって色を分ける --------------------- */
.category {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  padding: 8px 18px;
  border-radius: 999px;
}

.category.cat-meat {
  background: #c9212e;
}

.category.cat-light {
  background: #f08a24;
}

.category.cat-marche {
  background: #b5faff;
  color: #333;
}

.category.cat-kids {
  background: #54a857;
}

/* 企業ロゴ ------------------------------------------*/
.company-logo {
	display: flex;
	/* justify-content: center; */
	align-items: center;
	margin: 40px 0 32px;
}

.company-logo__image {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	max-height: 220px;
	object-fit: contain;
}

@media screen and (max-width: 599px) {
	.company-logo {
		margin: 32px 0 24px;
		/* padding: 0 20px; */
	}

	.company-logo__image {
		max-width: 340px;
		max-height: 200px;
	}
}

/* 出店詳細ページ　ここまで　---------------------------------- */