/* =========================================================
   和歌山のローカル食品 リサーチ隊
   Custom CSS

   運用ルール:
   - このファイルをサイト用CSSの正本とする
   - 各機能ごとに、対応するセクション内へCSSを追記する
   - 新しい種類のCSSを追加するときは、必要に応じてセクションを追加する
   ========================================================= */


/* =========================================================
   1. 共通設定
   - サイト全体で使う共通スタイル
   - 汎用クラス
   - 共通余白、文字サイズ、配置など
   ========================================================= */


/* =========================================================
   2. ヘッダー・ナビゲーション
   - ヘッダー
   - グローバルメニュー
   - ナビゲーション関連
   ========================================================= */
/* ========================================
   スマホ：ヘッダーメニューを2列で揃える
======================================== */
@media screen and (max-width: 959px) {

  .p-spHeadMenu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .p-spHeadMenu > li {
    width: 100% !important;
    margin: 0 !important;
  }

  .p-spHeadMenu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* 5個目だけ2列分を使用 */
  .p-spHeadMenu > li:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   3. トップページ
   - トップページ専用レイアウト
   - セクション間の余白
   - トップページ固有の装飾
   ========================================================= */
/* =========================================================
   トップページ：SWELL記事スライダー
   記事タイトルを最大2行に制限
   ========================================================= */

.p-postSlider.-ps-style-normal .p-postList__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* =========================================================
   4. ローカルブランドカード
   - エバグリーン
   - オークワ
   - 緑林園などのブランドカード
   ========================================================= */

/* ---------------------------------------------------------
   ブランドカード一覧
   PC：3列
   タブレット：2列
   スマホ：1列
   --------------------------------------------------------- */

.local-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}


/* ---------------------------------------------------------
   ブランドカード本体
   --------------------------------------------------------- */

.local-brand-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 275px;

  padding: 24px 24px 20px;

  /* 深いグリーン */
  background: #234a3a;

  /* 薄い白系の枠 */
  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 18px;

  /* 少ししっかりめの影 */
  box-shadow:
    0 14px 34px rgba(27, 48, 39, 0.18);

  /* カード全体がリンク */
  color: #fffaf0;
  text-decoration: none;

  overflow: hidden;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}


/* ---------------------------------------------------------
   ホバー時
   少し暗くして浮き上がる
   --------------------------------------------------------- */

.local-brand-card:hover {
  transform: translateY(-5px);

  background: #1f4335;

  box-shadow:
    0 20px 44px rgba(27, 48, 39, 0.25);

  color: #fffaf0;
  text-decoration: none;
}


/* ---------------------------------------------------------
   右上：コーナーダイヤ装飾
   --------------------------------------------------------- */

.local-brand-card__motif {
  position: absolute;

  top: 16px;
  right: 16px;

  width: 116px;
  height: 82px;

  pointer-events: none;
}


/* 右上L字ライン */

.local-brand-card__motif::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 92px;
  height: 62px;

  border-top:
    1px solid rgba(255, 250, 240, 0.13);

  border-right:
    1px solid rgba(255, 250, 240, 0.13);
}


/* ---------------------------------------------------------
   ダイヤ装飾 共通
   --------------------------------------------------------- */

.local-brand-card__diamond {
  position: absolute;

  transform: rotate(45deg);

  background: transparent;
}


/* 大きいダイヤ */

.local-brand-card__diamond--large {
  width: 42px;
  height: 42px;

  top: 16px;
  right: 18px;

  border:
    1px solid rgba(255, 250, 240, 0.30);
}


/* 小さいダイヤ */

.local-brand-card__diamond--small {
  width: 18px;
  height: 18px;

  top: 31px;
  right: 31px;

  border:
    1px solid rgba(255, 250, 240, 0.13);
}


/* ---------------------------------------------------------
   ブランド名
   --------------------------------------------------------- */

.local-brand-card__name {
  position: relative;

  /* 装飾とのバランスを取るため少し下げる */
  margin: 40px 0 16px;

  /* 真っ白ではなく暖かいアイボリー */
  color: #fffaf0;

  font-size: 34px;
  line-height: 1.2;
  font-weight: 850;

  letter-spacing: 0.03em;
}


/* ---------------------------------------------------------
   長いブランド名用
   --------------------------------------------------------- */

/* 少し長いブランド名 */
.local-brand-card__name--small {
  font-size: 29px;
}


/* かなり長いブランド名 */
.local-brand-card__name--xsmall {
  font-size: 25px;
}


/* 2行表示用 */
.local-brand-card__name--two-lines {
  font-size: 29px;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   ブランド説明
   --------------------------------------------------------- */

.local-brand-card__description {
  position: relative;

  margin: 0;

  max-width: 90%;

  /* 白すぎない、少し落ち着いた明るい文字 */
  color: #e3e7df;

  font-size: 14px;
  line-height: 1.9;
}


/* ---------------------------------------------------------
   カード下部
   横線＋レビュー件数
   --------------------------------------------------------- */

.local-brand-card__footer {
  position: relative;

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

  margin-top: auto;

  padding-top: 16px;

  /* 白系の薄い区切り線 */
  border-top:
    1px solid rgba(255, 250, 240, 0.22);
}


/* ---------------------------------------------------------
   右下：レビュー件数
   ブログ内のブラウン系アクセントとつなぐ
   --------------------------------------------------------- */

.local-brand-card__reviews {
  color: #dfc19d;

  font-size: 11px;
  font-weight: 850;

  letter-spacing: 0.12em;
}


/* ---------------------------------------------------------
   タブレット
   3列 → 2列
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .local-brand-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ---------------------------------------------------------
   スマートフォン
   2列 → 1列
   --------------------------------------------------------- */

@media (max-width: 600px) {

  .local-brand-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .local-brand-card {
    /* スマホでは内容量に応じて高さを自動調整 */
    min-height: 0;

    padding: 14px 16px 12px;

    border-radius: 14px;
  }

  .local-brand-card__motif {
    top: 10px;
    right: 10px;

    transform: scale(0.72);
    transform-origin: top right;
  }

  .local-brand-card__name {
    margin: 18px 0 7px;

    font-size: 25px;
    line-height: 1.2;
  }

  .local-brand-card__name--small {
    font-size: 23px;
  }

  .local-brand-card__name--xsmall {
    font-size: 21px;
  }

  .local-brand-card__name--two-lines {
    font-size: 23px;
    line-height: 1.25;
  }

  .local-brand-card__description {
    max-width: 95%;

    font-size: 13px;
    line-height: 1.55;
  }

  .local-brand-card__footer {
    /* PC用の margin-top:auto をスマホでは解除 */
    margin-top: 10px;

    padding-top: 8px;
  }

  .local-brand-card__reviews {
    font-size: 10px;
  }

}

/* =========================================================
   5. 商品レビューカード
   - 商品名
   - ブランドバッジ
   - 星評価
   - 商品カードのレイアウト
   ========================================================= */


/* ---------------------------------------------------------
   共通レビューカード：カード全体

   使用場所：
   - トップページ
   - ブランド別記事一覧
   - 商品カテゴリー別記事一覧
   - おすすめ度別記事一覧

   HTML側では .review-card を使用する。
   --------------------------------------------------------- */
.review-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;

    box-shadow: 0 7px 22px rgba(50, 42, 30, 0.08);

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* マウスオーバー時 */
.review-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(50, 42, 30, 0.12);

    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
   商品画像エリア

   ブランドバッジを画像右上に配置するため
   position: relative を設定する。
   --------------------------------------------------------- */
.review-card__image {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eeeeee;
}


/* 商品画像 */
.review-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------------------------------------------------------
   ブランド名バッジ

   商品画像の右上に表示する。
   --------------------------------------------------------- */
.review-card__brand {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 2;

    padding: 5px 10px;

    background: rgba(47, 105, 76, 0.94);

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.02em;

    border-radius: 5px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.12);

    white-space: nowrap;
}


/* ---------------------------------------------------------
   画像下の本文エリア
   --------------------------------------------------------- */
.review-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 15px 16px 16px;
}


/* ---------------------------------------------------------
   商品タイトル

   記事タイトルより強く表示し、
   カード内で商品名を主役にする。
   --------------------------------------------------------- */
.review-card__product-title {
    margin: 0;

    color: #2b2b2b;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;

    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
   記事タイトル

   最大2行。
   3行目以降は非表示にする。
   --------------------------------------------------------- */
.review-card__article-title {
    margin: 7px 0 0;

    color: #57534e;

    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;

    display: -webkit-box;

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

    overflow: hidden;

    /* 2行分の高さを確保して
       複数カードの高さを揃えやすくする */
    min-height: calc(1.55em * 2);
}


/* ---------------------------------------------------------
   評価エリア

   星＋数値をカード右下に配置する。
   --------------------------------------------------------- */
.review-card__rating {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 8px;

    /* 記事タイトルの長さにかかわらず
       評価位置を下部に揃える */
    margin-top: auto;

    padding-top: 15px;

    font-size: 13px;
}


/* 星 */
.review-card__stars {
    color: #d99a24;

    font-size: 15px;

    letter-spacing: 1px;

    white-space: nowrap;
}


/* 評価数値 */
.review-card__score {
    color: #333333;

    font-weight: 700;
}


/* ---------------------------------------------------------
   レビューカード一覧

   PCでは3列表示。
   スマートフォン等の調整は
   「9. レスポンシブ調整」で行う。
   --------------------------------------------------------- */
.review-card-grid {
    display: grid;

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

    gap: 24px;
}
/* ---------------------------------------------------------
   レビューカード：ページ送り

   review-cards.php が24件を超えた場合に
   自動生成するページネーション。
--------------------------------------------------------- */

.review-card-pagination {
    margin-top: 36px;
}


/* WordPressのpaginate_links()が生成するul */
.review-card-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* 各ページ番号 */
.review-card-pagination a.page-numbers,
.review-card-pagination span.page-numbers {
    display: flex;

    justify-content: center;
    align-items: center;

    min-width: 38px;
    min-height: 38px;

    padding: 6px 10px;

    background: #ffffff;

    color: #57534e;

    border: 1px solid #ded8ce;
    border-radius: 6px;

    text-decoration: none;

    font-size: 13px;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}


/* 現在ページ */
.review-card-pagination
span.page-numbers.current {
    background: #2f694c;

    color: #ffffff;

    border-color: #2f694c;

    font-weight: 700;
}


/* hover */
.review-card-pagination
a.page-numbers:hover {
    background: #f4f1ea;

    color: #2f694c;

    border-color: #2f694c;
}


/* 「…」 */
.review-card-pagination
span.page-numbers.dots {
    border-color: transparent;

    background: transparent;
}
/* =========================================================
   6. 商品カテゴリカード
   - 惣菜
   - 飲料
   - お菓子
   - 調味料
   - 加工食品
   ========================================================= */


/* =========================================================
   7. ボタン
   - SWELLボタン
   - カスタムボタン
   - CTAなど
   ========================================================= */
/* =========================================================
   おすすめ度から探す
   ========================================================= */


/* ---------------------------------------------------------
   おすすめ度カード一覧
   PC：6列
   --------------------------------------------------------- */

.rating-filter-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
}


/* ---------------------------------------------------------
   おすすめ度カード
   --------------------------------------------------------- */

.rating-filter-card {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 150px;

  padding: 12px 8px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 58%,
      #f7faf8 100%
    );

  border:
    1px solid #dce6e0;

  border-radius: 14px;

  box-shadow:
    0 3px 11px
    rgba(31, 75, 54, 0.05);

  color: inherit;

  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.rating-filter-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 18px
    rgba(31, 75, 54, 0.10);

  color: inherit;

  text-decoration: none;
}


/* ---------------------------------------------------------
   RATING ラベル
   --------------------------------------------------------- */

.rating-filter-card__label {
  display: block;

  margin-bottom: 8px;

  color: #526f62;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.17em;
}


/* ---------------------------------------------------------
   おすすめ度 数字
   --------------------------------------------------------- */

.rating-filter-card__value {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 1.2em;
  height: 1.05em;

  color: #c88628;

  font-family:
    "Times New Roman",
    Georgia,
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 50px;
  font-weight: 400;
  line-height: 1;

  /*
   * 1〜5の数字の高さ・配置を
   * できるだけ揃える
   */
  font-variant-numeric:
    lining-nums tabular-nums;

  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
}


/* ---------------------------------------------------------
   ALLカード
   --------------------------------------------------------- */

.rating-filter-card--all {
  background:
    linear-gradient(
      180deg,
      #195539 0%,
      #1c5d3e 35%,
      #206745 68%,
      #226d49 100%
    );

  border-color:
    rgba(31, 103, 69, 0.52);

  box-shadow:
    0 3px 10px
    rgba(25, 85, 57, 0.13),
    inset 0 1px 0
    rgba(255, 255, 255, 0.05);
}


.rating-filter-card--all
.rating-filter-card__label {
  color: #ffffff;
}


.rating-filter-card--all
.rating-filter-card__value {
  width: auto;
  height: auto;

  color: #ffffff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;

  font-size: 30px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.03em;
}


.rating-filter-card__sub {
  display: block;

  margin-top: 8px;

  color: #ffffff;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


/* =========================================================
   並び替え
   ========================================================= */

.rating-sort-area {
  margin-top: 22px;
}


/* おすすめ度より下位階層として表示 */

.rating-sort-title {
  position: relative;

  width: max-content;

  margin:
    0 auto 10px;

  color: #68736d;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.04em;

  text-align: center;
}


.rating-sort-title::before,
.rating-sort-title::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 26px;
  height: 1px;

  background: #d7ddd9;
}


.rating-sort-title::before {
  right:
    calc(100% + 8px);
}


.rating-sort-title::after {
  left:
    calc(100% + 8px);
}


/* ---------------------------------------------------------
   並び替えボタン
   --------------------------------------------------------- */

.rating-sort-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  max-width: 420px;

  margin:
    0 auto;
}


.rating-sort-button {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 48px;

  padding:
    8px 14px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 58%,
      #f7faf8 100%
    );

  color: #42564c;

  border:
    1px solid #dce6e0;

  border-radius: 10px;

  box-shadow:
    0 3px 11px
    rgba(31, 75, 54, 0.05);

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: 0.015em;

  text-decoration: none;
}


.rating-sort-button:hover {
  color: #42564c;

  text-decoration: none;
}


.rating-sort-button__arrow {
  color: #b87924;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 600px) {

  /* ---------------------------------------
     おすすめ度：3列 × 2段
     --------------------------------------- */

  .rating-filter-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 7px;
  }


  .rating-filter-card {
    min-height: 54px;
    height: 54px;

    padding:
      5px 4px;

    border-radius: 10px;
  }


  .rating-filter-card__label {
    margin-bottom: 2px;

    font-size: 8.5px;

    letter-spacing: 0.17em;
  }


  .rating-filter-card__value {
    width: 1.2em;
    height: 1.05em;

    font-size: 29px;
  }


  .rating-filter-card--all
  .rating-filter-card__value {
    width: auto;
    height: auto;

    font-size: 17px;
  }


  .rating-filter-card__sub {
    margin-top: 3px;

    font-size: 8.5px;
  }


  /* ---------------------------------------
     並び替え
     --------------------------------------- */

  .rating-sort-area {
    margin-top: 16px;
  }


  .rating-sort-title {
    margin-bottom: 8px;

    font-size: 13px;
  }


  .rating-sort-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 7px;

    max-width: none;
  }


  .rating-sort-button {
    min-height: 54px;
    height: 54px;

    padding:
      5px 4px;

    gap: 6px;

    font-size: 12.5px;

    border-radius: 10px;
  }


  .rating-sort-button__arrow {
    font-size: 15px;
  }

}

/* =========================================================
   8. 記事ページ
   - 記事本文内の装飾
   - 見出し
   - 表
   - 補足ボックスなど
   ========================================================= */


/* ---------------------------------------------------------
   記事下：関連記事
   記事タイトルを最大2行に制限
   --------------------------------------------------------- */

.p-relatedPosts .p-postList__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


/* =========================================================
   9. レスポンシブ調整
   - スマートフォン
   - タブレット
   - 画面幅ごとの微調整
   ========================================================= */


/* ---------------------------------------------------------
   共通レビューカード
   タブレット：2列
   --------------------------------------------------------- */
@media (max-width: 768px) {

    .review-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }
}


/* ---------------------------------------------------------
   共通レビューカード
   スマートフォン：1列
   --------------------------------------------------------- */
@media (max-width: 520px) {

    .review-card-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .review-card {
        border-radius: 13px;
    }

    .review-card__image {
        aspect-ratio: 16 / 9;
    }

    .review-card__brand {
        top: 8px;
        right: 8px;

        padding: 4px 8px;

        font-size: 10px;
    }

    .review-card__body {
        padding: 11px 13px 12px;
    }

    .review-card__product-title {
        font-size: 15px;
        line-height: 1.4;
    }

    .review-card__article-title {
        margin-top: 5px;

        font-size: 12.5px;
        line-height: 1.45;

        /* 最大2行表示は維持 */
        min-height: calc(1.45em * 2);
    }

    .review-card__rating {
        gap: 6px;

        padding-top: 9px;

        font-size: 12px;
    }

    .review-card__stars {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

}
/* ---------------------------------------------------------
   レビューカードページ送り
   スマートフォン調整
--------------------------------------------------------- */
@media (max-width: 520px) {

    .review-card-pagination {
        margin-top: 28px;
    }

    .review-card-pagination
    a.page-numbers,

    .review-card-pagination
    span.page-numbers {

        min-width: 34px;
        min-height: 34px;

        padding: 5px 8px;

        font-size: 12px;
    }

}
/* =========================================================
   10. その他
   - 上記に分類しづらいCSS
   - 一時的な調整は、可能なら後で適切なセクションへ移す
   ========================================================= */
/* Comparison archive: use the site's green section-heading vocabulary. */
.category-comparison-ranking .wakayama-section-heading {
  margin: 22px 0;
  padding-top: 13px;
  border-top: 3px solid #2f7e57;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", sans-serif;
}
.category-comparison-ranking .wakayama-section-heading__label {
  margin: 0 0 4px;
  color: #2f7e57;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.category-comparison-ranking .wakayama-section-heading h1 {
  margin: 0;
  padding: 0;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  line-height: 1.4;
  color: #24352b;
}