/* 繁盛店紹介カテゴリー：2列グリッド（顧客名 + YouTubeサムネイル） */

.popular-shop-archive .content_wrap {
  margin-bottom: 2em;
}

/* 見出し：繁盛店紹介（サイトトンマナに合わせて newsPage h2 と統一） */
.popular-shop-archive .h2_ttl {
  font-weight: bold !important;
  border-bottom: 4px solid #000 !important;
  margin-bottom: 50px !important;
  font-size: 24px;
  line-height: 1.5em;
  padding-bottom: 0.5vw !important;
}

.popular-shop-section {
  margin-bottom: 3em;
}

.popular-shop-section:last-child {
  margin-bottom: 0;
}

/* 小見出し：▼繁盛店紹介編、▼インタビュー編（content_info h3 を参考） */
.popular-shop-archive .popular-shop-section__ttl {
  font-weight: bold !important;
  font-size: 20px;
  line-height: 1.33;
  margin-bottom: 1em;
  padding: 0.5em 1em 0.2em;
  background-color: #f6ad21;
  /* border-bottom: 3px solid #f6ad21 !important; */
  color: #333;
}

.popular-shop-country {
  margin-bottom: 2em;
}

.popular-shop-country:last-child {
  margin-bottom: 0;
}

/* 小小見出し：▽ベトナム、▽シンガポール、▽その他（content_info h4 を参考）
   ※ box-shadow で左線を表現：common.css の html:not(.wp) h4 { border: 0 } と
     border 系がバッティングするため、影響を受けない box-shadow を使用 */
section.popular-shop-archive .popular-shop-country h4.popular-shop-country__ttl {
  font-weight: bold !important;
  font-size: 18px !important;
  line-height: 1.33 !important;
  margin-bottom: 0.8em !important;
  margin-top: 0 !important;
  padding-left: 13px !important;
  box-shadow: inset 6px 0 0 #ff9327;
  color: #333 !important;
}

.popular-shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}

.popular-shop-grid__item {
  margin: 0;
}

.popular-shop-grid__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.popular-shop-grid__link:hover .popular-shop-grid__thumb img {
  opacity: 0.9;
}

/* サムネイル：PCは16:9で表示 */
.popular-shop-grid__thumb {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
  background: #eee;
}

.popular-shop-grid__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.2s ease;
}

.popular-shop-grid__name {
  display: block;
  margin-top: 0.5em;
  font-weight: bold;
  line-height: 1.4;
}

/* スマホ：サムネイルが見切れないよう全体を表示 */
@media screen and (max-width: 768px) {
  .popular-shop-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .popular-shop-archive .h2_ttl {
    font-size: 20px;
    margin-bottom: 30px !important;
  }

  .popular-shop-archive .popular-shop-section__ttl {
    font-size: 18px;
    margin-bottom: 0.8em;
  }

  section.popular-shop-archive .popular-shop-country h4.popular-shop-country__ttl {
    font-size: 16px !important;
    padding-left: 10px !important;
    box-shadow: inset 4px 0 0 #ff9327;
  }

  /* サムネイル：PC版と同じ16:9・coverで上下に黒帯なし */
  .popular-shop-grid__thumb {
    padding-bottom: 56.25%;
  }

  .popular-shop-grid__thumb img {
    object-fit: cover;
    object-position: center center;
  }
}

@media only screen and (max-width: 480px) {
  .popular-shop-archive .h2_ttl {
    font-size: 6vw;
  }

  .popular-shop-archive .popular-shop-section__ttl {
    font-size: 5vw;
  }

  section.popular-shop-archive .popular-shop-country h4.popular-shop-country__ttl {
    font-size: 14px !important;
  }
}