/* =========================================================
   MEISY TCG NEWS
   画像・一覧・価格表 共通CSS
   最終整理版
========================================================= */


/* =========================================================
   1. 通常の記事画像
========================================================= */

.entry-content > .wp-block-image,
.entry-content > figure.wp-block-image {
  text-align: center;
  margin: 24px auto;
}

.entry-content > .wp-block-image img,
.entry-content > figure.wp-block-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 500px;
  object-fit: contain;
  margin: 0 auto;
}


/* =========================================================
   2. 店舗ロゴ画像
========================================================= */

.entry-content .store-logo-figure {
  width: 70%;
  max-width: 700px;
  min-height: 220px;
  padding: 16px;
  margin: 16px auto 24px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-content .store-logo-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto;
}


/* =========================================================
   3. PSA記事内画像
========================================================= */

.entry-content .psa-article .article-image,
.entry-content .psa-article figure.article-image {
  width: 100%;
  max-width: 800px;

  background: #f8f8f6;
  border: 1px solid #e0e0e0;
  border-radius: 6px;

  padding: 12px;
  margin: 24px auto;
  box-sizing: border-box;

  text-align: center;
}

.entry-content .psa-article .article-image img,
.entry-content .psa-article figure.article-image img {
  display: block;
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 400px;

  object-fit: contain;
  margin: 0 auto;
}


/* =========================================================
   4. Newspack 記事一覧サムネイル
========================================================= */

.wp-block-newspack-blocks-homepage-articles .post-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
}

.wp-block-newspack-blocks-homepage-articles .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  object-fit: cover;
}


/* =========================================================
   5. Cocoon 記事一覧サムネイル
========================================================= */

.entry-content .new-entry-cards .entry-card-thumb {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;

  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.entry-content .new-entry-cards .entry-card-thumb-image {
  display: block;
  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  object-fit: cover;
}


/* =========================================================
   6. StoreLab 商品画像
========================================================= */

.entry-content .storelab-box .storelab-image {
  box-sizing: border-box;
}

.entry-content .storelab-box .storelab-image img {
  display: block;
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 160px;

  object-fit: contain;
  margin: 0 auto;
}


/* StoreLab PC */
@media screen and (min-width: 769px) {

  .entry-content .storelab-box .storelab-inner {
    align-items: center;
  }

  .entry-content .storelab-box .storelab-inner > .storelab-image {
    width: 160px;
    flex: 0 0 160px;

    min-width: 160px;
    max-width: 160px;

    margin: 0;
  }
}


/* StoreLab タブレット・スマホ */
@media screen and (max-width: 768px) {

  .entry-content .storelab-box .storelab-inner > .storelab-image {
    width: 100%;
    max-width: 100%;

    flex: none;
    margin: 0 auto 16px;
  }

  .entry-content .storelab-box .storelab-image img {
    max-width: 140px;
    max-height: 140px;
  }
}


/* =========================================================
   7. 目次
========================================================= */

.entry-content nav.toc,
.entry-content .psa-article .toc {
  display: table;

  width: auto;
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   8. カード価格ランキング
   HTML構造：
   .card-price-row
     ├ .card-price-image
     └ .card-price-info
========================================================= */

.entry-content .psa-article .card-price-table {
  width: 100%;
  max-width: 100%;
}


/* =========================================================
   PC
   左：220px画像
   右：タイトル＋表
   画像は右情報全体に対して縦中央
========================================================= */

.entry-content .psa-article .card-price-row {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;

  column-gap: 28px !important;
  row-gap: 0 !important;

  /* 画像と情報を最初から中央基準で配置 */
  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 24px 0 !important;
  padding: 24px !important;

  box-sizing: border-box !important;

  background: #fff !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 8px !important;
}


/* 左：カード画像 */
.entry-content .psa-article .card-price-row > .card-price-image {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  align-self: center !important;

  float: none !important;
  clear: none !important;

  /* 個別位置調整を完全解除 */
  transform: none !important;
}

.entry-content .psa-article .card-price-image figure {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  float: none !important;
}

.entry-content .psa-article .card-price-image img {
  display: block !important;

  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 auto !important;
  padding: 0 !important;

  object-fit: contain !important;
}


/* 右：カード情報 */
.entry-content .psa-article .card-price-row > .card-price-info {
  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;
}


/* カード名 */
.entry-content .psa-article .card-price-name {
  display: block !important;

  width: 100% !important;

  margin: 0 0 16px !important;
  padding: 0 !important;

  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  color: #222 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* 詳細テーブル */
.entry-content .psa-article .card-price-detail {
  display: table !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;

  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.entry-content .psa-article .card-price-detail th,
.entry-content .psa-article .card-price-detail td {
  border: 1px solid #ddd !important;

  padding: 14px !important;

  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.entry-content .psa-article .card-price-detail th {
  width: 120px !important;

  text-align: left !important;

  background: #f5f5f1 !important;

  font-weight: 700 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.entry-content .psa-article .card-price-detail td {
  width: auto !important;
  min-width: 0 !important;

  background: #fff !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* =========================================================
   9. タブレット
   PCと同じ構成を維持
========================================================= */

@media screen and (min-width: 601px) and (max-width: 768px) {

  .entry-content > .wp-block-image img,
  .entry-content > figure.wp-block-image img {
    max-width: 90%;
  }

  .entry-content .store-logo-figure {
    width: 90%;
  }

  .entry-content .psa-article .card-price-row {
    grid-template-columns: 150px minmax(0, 1fr) !important;

    column-gap: 18px !important;

    align-items: center !important;

    margin: 18px 0 !important;
    padding: 16px !important;
  }

  .entry-content .psa-article .card-price-row > .card-price-image {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    align-self: center !important;
  }

  .entry-content .psa-article .card-price-image img {
    max-width: 150px !important;
  }

  .entry-content .psa-article .card-price-name {
    margin-bottom: 12px !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .entry-content .psa-article .card-price-detail th {
    width: 95px !important;

    padding: 10px !important;

    font-size: 14px !important;
  }

  .entry-content .psa-article .card-price-detail td {
    padding: 10px !important;

    font-size: 14px !important;
  }
}


/* =========================================================
   10. スマホ
   左画像 / 右情報を維持
   画像は右情報全体に対して縦中央
========================================================= */

@media screen and (max-width: 600px) {

  .entry-content > .wp-block-image img,
  .entry-content > figure.wp-block-image img {
    max-width: 95%;
  }

  .entry-content .store-logo-figure {
    width: 95%;
  }

  .entry-content .psa-article .card-price-row {
    display: grid !important;

    grid-template-columns: 100px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;

    column-gap: 12px !important;
    row-gap: 0 !important;

    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 14px 0 !important;
    padding: 12px !important;

    box-sizing: border-box !important;
  }

  /* 左：画像 */
  .entry-content .psa-article .card-price-row > .card-price-image {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;

    float: none !important;
    clear: none !important;

    transform: none !important;
  }

  .entry-content .psa-article .card-price-image figure {
    width: 100px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .entry-content .psa-article .card-price-image img {
    display: block !important;

    width: 100px !important;
    max-width: 100px !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
  }

  /* 右：情報 */
  .entry-content .psa-article .card-price-row > .card-price-info {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;
  }

  .entry-content .psa-article .card-price-name {
    width: 100% !important;

    margin: 0 0 8px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .entry-content .psa-article .card-price-detail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    border-collapse: collapse !important;
    table-layout: fixed !important;
  }

  .entry-content .psa-article .card-price-detail th,
  .entry-content .psa-article .card-price-detail td {
    padding: 7px 6px !important;

    font-size: 12px !important;
    line-height: 1.4 !important;

    vertical-align: middle !important;
  }

  .entry-content .psa-article .card-price-detail th {
    width: 78px !important;
    min-width: 78px !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .entry-content .psa-article .card-price-detail td {
    width: auto !important;
    min-width: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}


/* =========================================================
   11. 小さいスマホ
========================================================= */

@media screen and (max-width: 380px) {

  .entry-content .psa-article .card-price-row {
    grid-template-columns: 86px minmax(0, 1fr) !important;

    column-gap: 9px !important;

    padding: 9px !important;
  }

  .entry-content .psa-article .card-price-row > .card-price-image {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  .entry-content .psa-article .card-price-image figure,
  .entry-content .psa-article .card-price-image img {
    width: 86px !important;
    max-width: 86px !important;
  }

  .entry-content .psa-article .card-price-name {
    font-size: 13px !important;
  }

  .entry-content .psa-article .card-price-detail th {
    width: 68px !important;
    min-width: 68px !important;

    padding: 6px 4px !important;

    font-size: 11px !important;
  }

  .entry-content .psa-article .card-price-detail td {
    padding: 6px 4px !important;

    font-size: 11px !important;
  }
}

/* =========================================================
   よくある質問（FAQ）
   質問文・回答文の横幅崩れ修正
========================================================= */

.entry-content .faq,
.entry-content .faq-wrap,
.entry-content .faq-item,
.entry-content .wp-block-cocoon-blocks-faq {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 質問 */
.entry-content .faq-question,
.entry-content .faq-q,
.entry-content .wp-block-cocoon-blocks-faq .faq-question {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: block !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  box-sizing: border-box !important;
}

/* 回答 */
.entry-content .faq-answer,
.entry-content .faq-a,
.entry-content .wp-block-cocoon-blocks-faq .faq-answer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: block !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  box-sizing: border-box !important;
}

/* スマホ */
@media screen and (max-width: 600px) {

  .entry-content .faq,
  .entry-content .faq-wrap,
  .entry-content .faq-item,
  .entry-content .wp-block-cocoon-blocks-faq {
    display: block !important;
    width: 100% !important;
  }

  .entry-content .faq-question,
  .entry-content .faq-answer,
  .entry-content .faq-q,
  .entry-content .faq-a {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}

/* =========================================================
   HOME レイアウト
   Cocoonの記事カード内部には触れない安全版
========================================================= */


/* 外側：左メイン / 右ランキング */
.tcg-home-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 3fr)
    minmax(300px, 1fr) !important;

  gap: 30px !important;

  align-items: start !important;

  width: 100% !important;
}


/* Gutenberg標準カラムの幅指定を解除 */
.tcg-home-layout > .wp-block-column {
  width: auto !important;
  min-width: 0 !important;

  flex: none !important;
  flex-basis: auto !important;

  margin: 0 !important;
}


/* =========================================================
   左側：3カテゴリ
========================================================= */

.tcg-category-grid {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 24px !important;

  align-items: start !important;

  width: 100% !important;
}


/* Gutenbergの3カラム幅指定を解除 */
.tcg-category-grid > .wp-block-column {
  width: auto !important;
  min-width: 0 !important;

  flex: none !important;
  flex-basis: auto !important;

  margin: 0 !important;
}


/* =========================================================
   見出しだけ整える
========================================================= */

.tcg-home-main > h2 {
  margin-bottom: 24px !important;
}

.tcg-category-column > h2,
.tcg-category-column > h3 {
  font-size: 18px !important;
  line-height: 1.4 !important;

  margin-bottom: 16px !important;
}

.tcg-home-ranking > h2 {
  font-size: 20px !important;
  line-height: 1.4 !important;

  margin-bottom: 16px !important;
}


/* =========================================================
   右ランキング
========================================================= */

.tcg-home-ranking {
  min-width: 0 !important;

  padding-left: 20px !important;

  border-left: 1px solid #ddd !important;
}


/* =========================================================
   スマホ
========================================================= */

@media screen and (max-width: 768px) {

  .tcg-home-layout {
    display: block !important;
  }

  .tcg-category-grid {
    display: block !important;
  }

  .tcg-category-column {
    margin-bottom: 36px !important;
  }

  .tcg-home-ranking {
    margin-top: 40px !important;

    padding-left: 0 !important;

    border-left: 0 !important;
  }
}

/* =========================================================
   HOME デザイン調整
   レイアウト構造は変更しない
========================================================= */


/* =========================================================
   「最新情報」見出し
========================================================= */

.tcg-home-main > h2 {
  background: #ff3138 !important;
  color: #fff !important;

  margin: 0 0 18px !important;
  padding: 12px 16px !important;

  border: 0 !important;
  border-radius: 0 0 14px 0 !important;

  font-size: 20px !important;
  font-weight: 700 !important;
}


/* =========================================================
   3カテゴリの見出し
========================================================= */

.tcg-category-column > h2,
.tcg-category-column > h3 {
  background: transparent !important;

  margin: 0 0 12px !important;
  padding: 6px 0 8px !important;

  border: 0 !important;
  border-bottom: 2px solid #ff3138 !important;

  font-size: 17px !important;
  font-weight: 700 !important;

  line-height: 1.4 !important;
}


/* =========================================================
   左3列の記事
   「画像上 / タイトル下」に変更
========================================================= */

.tcg-category-list .new-entry-card-link,
.tcg-category-list a.new-entry-card-link,
.tcg-category-list .a-wrap {
  display: block !important;

  width: 100% !important;

  margin: 0 0 24px !important;
  padding: 0 !important;

  text-decoration: none !important;
}


/* =========================================================
   アイキャッチを大きく
========================================================= */

.tcg-category-list .entry-card-thumb,
.tcg-category-list .new-entry-card-thumb {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;

  aspect-ratio: 16 / 9 !important;

  margin: 0 0 7px !important;
  padding: 0 !important;

  overflow: hidden !important;
}


.tcg-category-list .entry-card-thumb img,
.tcg-category-list .entry-card-thumb-image,
.tcg-category-list .new-entry-card-thumb img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
}


/* =========================================================
   タイトルを画像の下へ
========================================================= */

.tcg-category-list .entry-card-content,
.tcg-category-list .new-entry-card-content {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


.tcg-category-list .entry-card-title,
.tcg-category-list .new-entry-card-title {
  display: -webkit-box !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;

  color: #222 !important;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden !important;

  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* 抜粋・日付・PVなどは非表示 */
.tcg-category-list .entry-card-snippet,
.tcg-category-list .entry-card-meta,
.tcg-category-list .post-date,
.tcg-category-list .post-update,
.tcg-category-list .admin-pv,
.tcg-category-list .post-comment-count {
  display: none !important;
}

/* =========================================================
   人気記事ランキング 完成版
   画像左 / タイトル右
========================================================= */

/* 一覧全体 */
.tcg-ranking-list .popular-entry-cards {
  width: 100% !important;
  counter-reset: p-rank;
}


/* リンク自体は普通のブロック */
.tcg-ranking-list .popular-entry-card-link.a-wrap {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none !important;
}


/* ★ここが重要
   画像とタイトルを横並びにする本体 */
.tcg-ranking-list .popular-entry-card {
  display: grid !important;

  grid-template-columns: 92px minmax(0, 1fr) !important;

  gap: 10px !important;
  align-items: center !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 8px !important;

  background: #f2f2f2 !important;

  border-bottom: 2px solid #fff !important;

  box-sizing: border-box !important;
}


/* =========================================================
   ランキング画像
========================================================= */

.tcg-ranking-list .popular-entry-card-thumb,
.tcg-ranking-list .widget-entry-card-thumb,
.tcg-ranking-list .card-thumb {
  position: relative !important;

  float: none !important;

  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;

  height: 58px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


.tcg-ranking-list .popular-entry-card-thumb img,
.tcg-ranking-list .widget-entry-card-thumb img,
.tcg-ranking-list .card-thumb img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;

  margin: 0 !important;
}


/* =========================================================
   タイトル側
   Cocoon標準 margin-left を完全解除
========================================================= */

.tcg-ranking-list .popular-entry-card-content,
.tcg-ranking-list .widget-entry-card-content,
.tcg-ranking-list .card-content {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
}


/* タイトル */
.tcg-ranking-list .popular-entry-card-title,
.tcg-ranking-list .widget-entry-card-title,
.tcg-ranking-list .card-title {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #222 !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden !important;
}


/* 日付等はランキングでは不要 */
.tcg-ranking-list .popular-entry-card-meta,
.tcg-ranking-list .popular-entry-card-date,
.tcg-ranking-list .post-date,
.tcg-ranking-list .post-update,
.tcg-ranking-list .post-comment-count,
.tcg-ranking-list .admin-pv {
  display: none !important;
}


/* =========================================================
   順位番号
========================================================= */

.tcg-ranking-list .card-thumb {
  counter-increment: p-rank;
}

.tcg-ranking-list .card-thumb::before {
  content: counter(p-rank) !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 24px !important;
  height: 24px !important;

  padding: 0 !important;

  line-height: 24px !important;

  background: #35b8c4 !important;
  color: #fff !important;

  opacity: 1 !important;

  text-align: center !important;

  font-size: 13px !important;
  font-weight: 500 !important;

  z-index: 2 !important;
}


/* 1〜3位も同じ色 */
.tcg-ranking-list .no-1 .card-thumb::before,
.tcg-ranking-list .no-2 .card-thumb::before,
.tcg-ranking-list .no-3 .card-thumb::before {
  background: #35b8c4 !important;
}