/* ============================================================
   wp-style.css — WordPress 専用スタイル
   共通デザインは CDN: https://jcstore.itembox.cloud/item/css/2026/base.css
   ここには WP 環境でのみ必要なスタイルのみ記述する
   ============================================================ */


/* ------------------------------------------------------------
   0. Custom Properties（jc-base.css と重複定義 / 独立運用のため）
   ------------------------------------------------------------ */
:root {
  --fs-xs   : 10px;
  --fs-sm   : 11px;
  --fs-base : 13px;
  --fs-md   : 14px;
  --fs-lg   : 15px;
  --fs-xl   : 17px;
  --fs-2xl  : 20px;
  --fs-3xl  : 24px;
  --fs-4xl  : 28px;
}


/* ------------------------------------------------------------
   1. WP 管理バー（ログイン時 top に 32px 追加）
   ------------------------------------------------------------ */
body.admin-bar .l-header             { top: calc(var(--topbar-h) + 32px); }
body.admin-bar .l-header__nav        { top: calc(var(--topbar-h) + var(--header-h) + 32px); }
body.admin-bar .c-menu               { top: 32px; }
body.admin-bar .c-search             { top: calc(var(--topbar-h) + var(--header-h) + var(--nav-tab-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .l-header           { top: calc(var(--topbar-h) + 46px); }
  body.admin-bar .l-header__nav      { top: calc(var(--topbar-h) + var(--header-h) + 46px); }
  body.admin-bar .c-menu             { top: 46px; }
}



/* ------------------------------------------------------------
   3. フッター SNS アイコン（Bootstrap Icons 使用）
   FS 版は img タグ、WP 版は bi アイコン → font-size で統一
   ------------------------------------------------------------ */
.footer_sns i {
  font-size: var(--fs-2xl);
  line-height: 1;
  display: block;
}


/* ------------------------------------------------------------
   4. WP コンテンツ本文（.entry-content）
   ------------------------------------------------------------ */
.entry-content {
  font-size: var(--fs-md);
  line-height: 2;
  color: var(--color-black);
  padding: 0 0 var(--sp-lg);
  /* 長いURLや英数字の連続でボックスからはみ出すのを防ぐ。
     word-break: break-all は日本語も無条件に切れて読みにくいため、
     はみ出す時だけ折り返す overflow-wrap を使う（word-break は保険）。 */
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (min-width: 1024px) {
  .entry-content { padding: 0 0 var(--sp-xl); }
}

.entry-content h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: var(--sp-xl) 0 var(--sp-sm);
  padding-bottom: 0;
  border-bottom: none;
}

.entry-content h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: var(--sp-md) 0 var(--sp-xs);
}

.entry-content p   { margin-bottom: var(--sp-md); }
.entry-content img { margin: var(--sp-xl) 0; }
.wp-block-gallery { margin: var(--sp-sm) 0; }
.wp-block-gallery img { margin: 0; }

/* figure（キャプション付き画像）
   ・WordPress が figure に付与するインライン width を打ち消すため !important を使用
   ・figure 内の img は余白を figure 側で管理するため margin を 0 に */
.entry-content figure {
  width: 100% !important;
}
.entry-content figure img {
  margin: 0;
}
.entry-content figure figcaption {
  font-size: var(--fs-sm);
  color: var(--color-dim);
}

/* クラシックエディタの [gallery] ショートコード出力用
   .gallery-columns-{n} で 1〜5 カラムグリッド */
.gallery {
  display: grid;
  grid-gap: var(--sp-xs);
  margin: var(--sp-xl) 0;
}
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }

/* SP（〜767px）はカラム数指定に関係なく全て 1 カラム */
@media (max-width: 767px) {
  .gallery-columns-1,
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5 {
    grid-template-columns: 1fr;
  }
}
.gallery-item { margin: 0; }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.gallery a {
  pointer-events: none;
}
.entry-content a   { border-bottom: 1px solid var(--color-black); }

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 1.5em;
  margin-bottom: var(--sp-sm);
}


/* ------------------------------------------------------------
   5. ページ共通レイアウト
   topbar + header + タブナビ + ページタイトル前の標準余白
   ※ 各 inner 系コンテナ（s-news-single__inner / l-archive__inner /
     l-news-layout__side / *__head）の padding-top は 0 にリセットし、
     全ページで「ヘッダー下〜タイトル」位置を完全に揃える
   ------------------------------------------------------------ */
.l-main {
  padding-top: var(--sp-lg);
  padding-bottom:var(--sp-lg);
}

@media (min-width: 768px) {
  .l-main {
  padding-top: var(--sp-xl);
  padding-bottom:var(--sp-xl);
  }
}


/* ============================================================
   single-news — NEWS 詳細ページ
   ============================================================ */

/* ------------------------------------------------------------
   2カラムレイアウト（PC: メイン + 右サイドバー / SP: 1カラム）
   ------------------------------------------------------------ */
.l-news-layout {
  max-width: calc(1100px + var(--sp-lg));
  margin: 0 auto;
  padding: 0 var(--sp-sm);
}

@media (min-width: 1024px) {
  .l-news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--sp-lg);
    align-items: start;
    padding: 0 var(--sp-lg);
  }
  /* PC: grid auto-placement の並び順を制御
     main(左) → side(右) と先に配置し、l-related-zone を下段 全幅にスパン */
  .l-news-layout__main { order: 1; }
  .l-news-layout__side { order: 2; }
  .l-news-layout .l-related-zone { order: 3; }
}

.l-news-layout__main { min-width: 0; }

/* wide 修飾: サイドバー無しで main を全幅にスパン（TOPICS 詳細等で使用）
   詳細度を .l-news-layout と同じにするため 2クラス連結で書く */
@media (min-width: 1024px) {
  .l-news-layout.l-news-layout--wide {
    display: block;
    grid-template-columns: none;
    padding: 0 var(--sp-lg);
  }
  .l-news-layout.l-news-layout--wide .l-news-layout__main {
    max-width: none;
    width: 100%;
  }
}

/* simple グリッド: アイキャッチ + タイトルのみのシンプルカード（TOPICS 一覧等で使用）
   標準の .s-news-latest__item から不要な要素（カテゴリバッジ・日付）を消したレイアウト
   → 本テンプレートでは元々出力しないため CSS の追加ルールは不要
     （.s-news-latest__grid--simple 自体は将来の拡張用のマーカークラス） */

/* SP: サイドバーは関連記事の下（DOM 順そのまま）
   PC: 右カラム */
.l-news-layout__side {
  /* 上の余白は .l-main 側で一元管理。下のみセクション分の余白を確保 */
  padding: 0;
}
@media (min-width: 1024px) {
  .l-news-layout__side {
    padding: 0 0 var(--sp-xl);
  }
}
/* PC のみ: 最初のセクション head の padding-top を 0 にしてメインカラムの上端と揃える
   （SP では他セクションと同じ rhythm にしたいため適用しない） */
@media (min-width: 1024px) {
  .l-news-layout__side .p-side-section:first-child .p-side-section__head {
    padding-top: 0;
  }
}

/* セクション上の余白（PC / SP 共通） */
.p-side-section {
  padding-bottom: var(--sp-lg);
}

/* SP（〜1023px）: 関連記事グリッド下の隙間処理（次要素 margin/padding で間隔をとる） */
@media (max-width: 1023px) {
  .s-news-latest__grid {
    padding-bottom: 0;
  }
}


/* ------------------------------------------------------------
   コンテンツ幅・インナーラッパー（記事本文）
   ------------------------------------------------------------ */
.s-news-single__inner {
  /* 上の余白は .l-main 側で一元管理 */
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 1024px) {
  .s-news-single__inner {
    padding: 0 0 var(--sp-xl);
  }
}


/* ------------------------------------------------------------
   余白の統一
   ------------------------------------------------------------ */

/* PRODUCTS（inner内）: inner の padding-x が既にあるため section head の padding-x を 0 に */
.s-news-single__products .p-section__head {
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------------------
   関連記事エリア（l-related-zone）
   - NEWS / BLOG / STAFF REVIEW: l-news-layout 内で全幅にスパン
   - STORE: 単独で 1100px センタリング
   ------------------------------------------------------------ */
.l-related-zone {
  width: 100%;
  max-width: calc(1100px + var(--sp-lg));
  margin: 0 auto;
  /* SP は左右 var(--sp-sm)、NEWS/BLOG 単一記事と同じ構造で揃える
     l-news-layout 内では親側で水平 padding を持つため下のリセット規則で 0 化する */
  padding: 0 var(--sp-sm);
}
/* l-news-layout 内に置かれた場合は親で水平 padding を確保しているため
   左右 padding は不要（横方向の二重マージン回避） */
.l-news-layout .l-related-zone {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 1024px) {
  .l-related-zone {
    padding: 0 var(--sp-lg);
  }
  /* l-news-layout の中にある場合は 1列目から最終列までスパンして全幅表示
     親側でセンタリング/padding 済みなので、ここでは値をリセット */
  .l-news-layout .l-related-zone {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}
/* セクション内のヘッダーとグリッドは padding-x を 0 にして親側の余白に揃える */
.l-related-zone .p-section__head,
.l-related-zone .s-news-latest__grid {
  padding-left: 0;
  padding-right: 0;
}
/* 連続セクション間の余白は各 .s-related-section の padding-bottom で確保 */


/* ------------------------------------------------------------
   メタ情報（日付 + ブランドタグバッジ）
   ------------------------------------------------------------ */
.s-news-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem var(--sp-xs);
  margin-bottom: var(--sp-sm);
}

.s-news-single__date {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--color-dim);
}

.s-news-single__tag-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  padding: 2px 5px;
  color: var(--color-dim);
  transition: color 0.4s var(--ease-out-expo), border-color var(--transition);
}
/* ホバー時に左から右へスライドインする黒帯 */
.s-news-single__tag-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .s-news-single__tag-badge:hover {
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
  }
  .s-news-single__tag-badge:hover::before {
    transform: translateX(0);
  }
}

/* NEWSカテゴリバッジ：白背景＋カラー文字＋カラー枠線
   --cat-color を modifier で切り替え、hover で色反転（左→右スライドイン） */
.s-news-single__cat-badge {
  --cat-color: var(--color-black);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  background: var(--color-white);
  color: var(--cat-color);
  border: 1px solid var(--cat-color);
  padding: 2px 5px;
  text-decoration: none;
  transition: color 0.4s var(--ease-out-expo), opacity var(--transition);
}
/* ホバー時に左から右へスライドインする帯（--cat-color に追従） */
.s-news-single__cat-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cat-color);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}

/* 投稿記事ページ内: hover で色反転（opacity 変化は無効化） */
@media (hover: hover) and (pointer: fine) {
  .s-news-single__inner .s-news-single__cat-badge:hover {
    color: var(--color-white);
    opacity: 1;
  }
  .s-news-single__inner .s-news-single__cat-badge:hover::before {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
   タイトル
   ------------------------------------------------------------ */
.s-news-single__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-lg);
}



/* ------------------------------------------------------------
   single-blog ヘッダー（メタ + タイトル + 投稿者）
   SP: 縦積み（タイトル → 投稿者）
   PC: 左にメタ+タイトル、右に投稿者を配置
   ------------------------------------------------------------ */
.s-blog-single__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}


.s-blog-single__header-main {
  flex: 1 1 60%;
  min-width: 0;
}

/* ヘッダー内ではタイトルの下マージンを 0 に（ヘッダー側で margin-bottom 管理） */
.s-blog-single__header .s-blog-single__title {
  margin-bottom: 0;
}

/* 投稿者ブロック（リンク化） */
.s-blog-single__author {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .s-blog-single__author:hover { opacity: 0.7; }
}

.s-blog-single__author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray);
}
.s-blog-single__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .s-blog-single__author-avatar {
    width: 42px;
    height: 42px;
  }
}

.s-blog-single__author-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.s-blog-single__author-position {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-dim);
  text-transform: uppercase;
}

.s-blog-single__author-name {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-black);
}


/* ------------------------------------------------------------
   アイキャッチ画像（フルブリード）
   ------------------------------------------------------------ */
.s-news-single__eyecatch {
  margin: 0 calc(-1 * var(--sp-sm)) var(--sp-xl);
}
.s-news-single__eyecatch img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (min-width: 1024px) {
  .s-news-single__eyecatch {
    margin-left: 0;
    margin-right: 0;
  }

  .single-news .s-news-single__eyecatch img {
      aspect-ratio: 16 / 9;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

}

/* ------------------------------------------------------------
   TOPICS 詳細ページ ヒーロー（アイキャッチ全幅表示）
   ・FS ブランドヒーロー（.p-brand-hero）を参考にした構造
   ・SP  : アイキャッチを 1:1・ページ幅100% で表示
   ・PC  : 16:9・高さ制限つきで中央表示。左右に出る余白は
           背景（ぼかした同画像）で埋める
   ・.l-main 直下に置くことで横 padding の影響を受けず全幅になる
   ------------------------------------------------------------ */

/* TOPICS 詳細のみ：ヒーローをヘッダー直下に密着させる */
.single-topics .l-main {
  padding-top: 0;
}
/* ヒーローの下（本文エリア）に余白を確保 */
.single-topics .l-news-layout {
  margin-top: var(--sp-lg);
}
@media (min-width: 768px) {
  .single-topics .l-news-layout {
    margin-top: var(--sp-xl);
  }
}

.p-topics-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-gray);
}
.p-topics-hero__bg { display: none; }
.p-topics-hero__inner {
  position: relative;
  z-index: 1;
}
/* SP: 1:1・ページ幅100% */
.p-topics-hero__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  /* PC: 黒背景の中央に 16:9 のアイキャッチを配置。高さ制限あり */
  .p-topics-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #000;
  }
  /* 左右余白を同画像のぼかしで埋める背景レイヤー */
  .p-topics-hero__bg {
    display: block;
    position: absolute;
    inset: 0;
    background-image: var(--topics-img);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center center;
    filter: blur(3px);
    opacity: 0.3;
    transform: scale(1.5);
  }
  .p-topics-hero__inner {
    width: auto;
    height: 100%;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  }
  .p-topics-hero__img {
    width: 100%;
    max-width: 1060px;
    height: 100%;
    aspect-ratio: auto; /* PC は inner の 16:9 に従う */
    object-fit: cover;
  }
}
@media (min-width: 1024px) {
  .p-topics-hero {
    height: auto;
  }
}


/* ------------------------------------------------------------
   PRODUCTS グリッド（SP: 2col / PC: 4col）
   ------------------------------------------------------------ */
.s-news-single__products {
  border-bottom: none;
}

.s-news-products__grid {
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 var(--sp-xl);
}

@media (min-width: 768px) {
  .s-news-products__grid {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 var(--sp-xl);
  }
}
@media (min-width: 1024px) {
  .s-news-products__grid {
    margin: 0 0 var(--sp-xl);
  }
}

/* ------------------------------------------------------------
   エディター本文に AddQuicktag で挿入する商品グリッド
   ・.p-product-grid.s-news-products__grid をそのまま使用（SP:2col / 768+:4col）
   ・.entry-content の汎用 img/a スタイル（画像の上下余白・リンク下線）を打ち消す
   ------------------------------------------------------------ */
.entry-content .p-product-grid__item a {
  border-bottom: none;
}
.entry-content .p-product-grid__item img {
  margin: 0;
}




/* ------------------------------------------------------------
   PRODUCTSセクション直下リンクボタン
   ------------------------------------------------------------ */
.s-news-single__link-btn-wrap {
  margin: var(--sp-xl) 0;
  padding: 0;
  text-align: center;
}

.s-news-single__link-btn {
  position: relative;
  isolation: isolate; /* ::before の z-index: -1 をボタン内に閉じ込める */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 999px;
  padding: 0.75rem 2rem;
  text-decoration: none;
  transition: color 0.4s var(--ease-out-expo);
}
/* ホバー時に左から右へスライドインする黒帯 */
.s-news-single__link-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .s-news-single__link-btn:hover {
    color: var(--color-white);
    opacity: 1;
  }
  .s-news-single__link-btn:hover::before {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------
   スタッフプロフィールブロック（BLOG 詳細・タグ一覧の直前）
   SP: 縦並び（上:プロフィール 下:Bio+ボタン）
   PC: 横並び（左:プロフィール 右:Bio+ボタン）
   ------------------------------------------------------------ */
.s-blog-single__profile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-sm);
  border: 1px solid var(--color-gray);
  border-radius: 4px;
  background: var(--color-white);
}

@media (min-width: 768px) {
  .s-blog-single__profile {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-md);
    padding: var(--sp-md);
  }
}

/* 左カラム：アバター + 役職/名前（横並び） */
.s-blog-single__profile-id {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .s-blog-single__profile-id {
    flex-basis: 200px;
    padding-right: var(--sp-md);
    border-right: 1px solid var(--color-gray);
  }
}

/* プロフィール内のアバター */
.s-blog-single__profile-id .s-blog-single__author-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .s-blog-single__profile-id .s-blog-single__author-avatar {
    width: 64px;
    height: 64px;
  }
}

/* 役職/名前は縦並び（アバターの右） */
.s-blog-single__profile-id .s-blog-single__author-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

/* 右カラム：プロフィール文 + ボタン */
.s-blog-single__profile-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex: 1;
  min-width: 0;
}

.s-blog-single__profile-bio {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

.s-blog-single__profile-btn {
  position: relative;
  isolation: isolate; /* ::before の z-index: -1 をボタン内に閉じ込める */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  align-self: flex-start;
  padding: 0.65rem 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-black);
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.4s var(--ease-out-expo);
}
/* ホバー時に左から右へスライドインする黒帯 */
.s-blog-single__profile-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .s-blog-single__profile-btn:hover {
    color: var(--color-white);
    opacity: 1;
  }
  .s-blog-single__profile-btn:hover::before {
    transform: translateX(0);
  }
}
.s-blog-single__profile-btn .bi {
  font-size: var(--fs-base);
  line-height: 1;
}


/* ------------------------------------------------------------
   関連店舗情報セクション（NEWS / BLOG 単一記事内）
   SP: 1カラム / タブレット以上: 2カラム（左:画像 右:情報）
   ------------------------------------------------------------ */
.s-news-single__store-info {
  margin: var(--sp-lg) 0;
}
@media (min-width: 768px) {
  .s-news-single__store-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 var(--sp-sm);
  }
  .s-news-single__store-info-title {
    grid-column: 1 / 3;
  }
}
.s-news-single__store-info-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 var(--sp-sm);
}
.p-linked-store {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: var(--sp-xs);
  align-items: stretch;
  padding: 0 0 var(--sp-sm);
  margin: 0 0 var(--sp-sm);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);
}
/* SP（1カラム）: 1番目の店舗カードにのみ border-top
   タイトル下線と店舗カードの間の余白が間延びして見えるのを防ぐ */
.p-linked-store:first-of-type {
  border-top: 1px solid var(--color-gray);
  padding-top: var(--sp-sm);
}
/* タブレット以上（2カラム）: 1段目の2件（1〜2番目）に border-top */
@media (min-width: 768px) {
  .p-linked-store:nth-of-type(2) {
    border-top: 1px solid var(--color-gray);
    padding-top: var(--sp-sm);
  }
}
.p-linked-store__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-gray);
  overflow: hidden;
}
.p-linked-store__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .p-linked-store__thumb {
    height: 100%;
    aspect-ratio: auto;
  }
}
.p-linked-store__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.p-linked-store__name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--color-black);
}
.p-linked-store__name-jp {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-black);
  margin: 0;
}
.p-linked-store__address {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-black);
  margin: 0.25rem 0 0;
}
.p-linked-store__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  background: none;
  border: none;
  text-decoration: none;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-linked-store__btn:hover { opacity: 0.6; }
}
.p-linked-store__btn .bi {
  font-size: var(--fs-base);
  line-height: 1;
}


/* ------------------------------------------------------------
   タグ一覧
   ------------------------------------------------------------ */
.s-news-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-xs);
  margin: var(--sp-lg) 0;
}
@media (min-width: 1024px) {
  .s-news-single__tags { margin: var(--sp-xl) 0; }
}


/* ------------------------------------------------------------
   関連記事・新着セクション（.s-related-section）
   ------------------------------------------------------------ */
.s-related-section {
  border: none;
  padding-bottom: var(--sp-lg);
}

@media (min-width: 768px) {
  .s-related-section {
    padding-bottom: var(--sp-xl);
  }
}

.yarpp-no-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-gray);
  display: block;
}


/* ------------------------------------------------------------
   記事グリッド
   ------------------------------------------------------------ */
/* SP: 横スクロールスライド / PC: 3カラムグリッド */
.s-news-latest__grid {
  display: flex;
  gap: 0.75rem;
  padding: 0 0 var(--sp-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.s-news-latest__grid > .s-news-latest__item {
  flex: 0 0 60%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .s-news-latest__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-sm);
    overflow: visible;
    padding: 0;
  }
  .s-news-latest__grid > .s-news-latest__item {
    flex: initial;
  }
}

.s-news-latest__item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.s-news-latest__item img,
.s-news-latest__item .yarpp-no-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* TOPICS 一覧カードのサムネは常に 1:1（archive-topics.php の grid--simple 内） */
.s-news-latest__grid--simple .s-news-latest__item img,
.s-news-latest__grid--simple .s-news-latest__item .yarpp-no-img {
  aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------------
   関連記事 / アーカイブカード内のテキスト要素の縦リズム
   サムネ → cat → date → title (関連記事)
   サムネ → date → title → cat (アーカイブ)
   ------------------------------------------------------------ */

/* 画像直下の最初のテキスト要素（cat または date）: 0.5rem */
.s-news-latest__item .p-side-list__cat {
  margin-top: var(--sp-xs);
}
.s-news-latest__item .p-scroll-list__date {
  margin-top: 0;
}
.s-news-latest__item .p-scroll-list__title {
  margin-top: 0.15rem;
}

/* cat の直後に来る date は密接ペア（関連記事の場合）: 0.25rem */
.s-news-latest__item .p-side-list__cat + .p-scroll-list__date {
  margin-top: 0;
  line-height: 1;
}

/* title の直後に来る cat（アーカイブ末尾配置）: 0.5rem */
.s-news-latest__item .p-scroll-list__title + .p-side-list__cat {
  margin-top: var(--sp-xs);
}

/* TOPICS 関連記事はタイトルのみ表示（バッジ・日付なし）。
   タイトル上の余白を確保するため、img / cat / date 側の「下」に余白を置く */
.s-related-section--topics .s-news-latest__item img,
.s-related-section--topics .s-news-latest__item .yarpp-no-img,
.s-related-section--topics .s-news-latest__item .p-side-list__cat,
.s-related-section--topics .s-news-latest__item .p-scroll-list__date {
  margin-bottom: var(--sp-xs);
}
/* タイトル自身の上マージンは 0 にして、上記の下マージンで間隔を統一 */
.s-related-section--topics .s-news-latest__item .p-scroll-list__title {
  margin-top: 0;
}

/* STAFF REVIEW カードの投稿者ブロック
   記事ヘッダーの .s-blog-single__author と同じ表現に揃える
   左に丸アバター、右に役職（上）+ 名前（下） */
.s-news-latest__item .p-scroll-list__author {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}
/* cat の直後に来る author は密接ペア */
.s-news-latest__item .p-side-list__cat + .p-scroll-list__author {
  margin-top: 0;
}
.p-scroll-list__author-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray);
  display: block;
}
.p-scroll-list__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.p-scroll-list__author-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.3;
  min-width: 0;
}
.p-scroll-list__author-pos {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-scroll-list__author-name {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   NEWS 詳細ページ サイドバー（PC: 右カラム / SP: 関連記事の下）
   セクション間余白は共通ルール（先頭の「セクション間の縦余白を統一」）で管理
   ============================================================ */
.p-side-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-xs);
  padding: 0 0 var(--sp-sm);
  margin: 0;
}

.p-side-section__title {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-black);
}

.p-side-section__more {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-dim);
  border-bottom: 1px solid var(--color-dim);
  padding-bottom: 1px;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .p-side-section__more:hover { opacity: 0.6; }
}
.p-side-section__more .bi { font-size: var(--fs-sm); }

.p-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-sm);
}

/* サイドバー記事カード内: サムネ → cat → date → title の縦リズム
   body 内の各要素間は 0.3rem */
.p-side-list__body {
  gap: 0.3rem;
}

/* SP: 画像付きセクション（NEWS/BLOG/REVIEW）は横スクロールスライド */
@media (max-width: 767px) {
  .p-side-list:not(.p-side-list--text) {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-md);
  }
  .p-side-list:not(.p-side-list--text) > .p-side-list__item {
    flex: 0 0 60%;
    scroll-snap-align: start;
  }
}

/* タブレット（768px〜1023px）: 3カラムグリッド */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-side-list:not(.p-side-list--text) {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-sm);
  }
}

.p-side-list__item a {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xs);
  text-decoration: none;
  color: inherit;
}

/* PC + tablet land (1024px+): アイテムを2カラム化（左サムネ正方形 / 右タイトル+日付） */
@media (min-width: 1024px) {
  .p-side-list:not(.p-side-list--text) > .p-side-list__item a {
    grid-template-columns: 1fr 2fr;
    gap: 0.7rem;
    align-items: start;
  }
  .p-side-list:not(.p-side-list--text) .p-side-list__thumb {
    aspect-ratio: 1 / 1;
  }
}

.p-side-list__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--color-gray);
}
.p-side-list__thumb--empty { display: block; }

.p-side-list__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.p-side-list__date {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: #aaa;
  line-height: 1;
}

.p-side-list__title {
  font-size: var(--fs-sm);
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-black);
  /* 2行超えは末尾に … をつけてクリップ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

/* STAFF REVIEW のサイドバー項目（投稿者ブロックを含む）はタイトルを1行表示に */
.p-side-list__body:has(.p-side-list__author) .p-side-list__title {
  -webkit-line-clamp: 1;
}

/* サイドバー STAFF REVIEW カードの投稿者ブロック（タイトル下に表示）
   左:丸アバター（28px） / 右:役職（上）+ 名前（下） */
.p-side-list__author {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: 0.35rem;
}
.p-side-list__author-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray);
  display: block;
}
.p-side-list__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.p-side-list__author-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.3;
  min-width: 0;
}
.p-side-list__author-pos {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-side-list__author-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* カテゴリ（タイトルの下）: 小さなバッジ（デフォルト黒）
   sidebar / archive カードどちらでも使える共通バッジ */
.p-side-list__cat {
  --cat-color: var(--color-black);
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
  color: var(--cat-color);
  border: none;
  padding: 0;
  margin-top: var(--sp-xs);
  line-height: 1.4;
}

/* サイドバー本文 (.p-side-list__body 内) では cat が先頭にくるため上余白不要
   親 flex の gap で本文との間隔を確保 */
.p-side-list__body .p-side-list__cat {
  margin-top: 0;
}


/* ============================================================
   カテゴリスラッグ別の配色（NEWS / BLOG 共通）
   .p-side-list__cat--{slug}        … サイドバー
   .s-news-single__cat-badge--{slug} … 記事ヘッダー
   ============================================================ */

/* 反転表示: 白背景にカラー文字＋カラー枠線
   各 modifier では --cat-color を上書きするだけで
   color / border-color / hover反転がすべて連動する */

/* カテゴリバッジはすべて黒に統一（--cat-color のデフォルト var(--color-black) を使用） */

/* INFORMATION（テキストのみ）: 日付 + タイトル の横並び */
.p-side-list--text .p-side-list__item a {
  padding: 0;
}
.p-side-list--text .p-side-list__body {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-xs);
}
.p-side-list--text .p-side-list__date {
  flex-shrink: 0;
}
.p-side-list--text .p-side-list__title {
  flex: 1;
  min-width: 0;
}


/* ============================================================
   アーカイブ・single-store 共通スタイル
   ============================================================ */

/* ------------------------------------------------------------
   アーカイブ全体
   ------------------------------------------------------------ */
.l-archive__inner {
  /* 上の余白は .l-main 側で一元管理。SP は左右に padding を確保 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-sm) var(--sp-xl);
}
@media (min-width: 768px) {
  .l-archive__inner {
    padding: 0 var(--sp-md) var(--sp-lg);
    max-width: calc(1100px + var(--sp-lg));
  }
}

.l-archive__head {
  /* 上の余白は .l-main 側で一元管理 */
  text-align: center;
  padding: 0 var(--sp-sm) var(--sp-lg);
}

/* l-news-layout 内では layout 側で水平 padding を持つため左右 padding は不要 */
.l-news-layout__main .l-archive__head {
  padding-left: 0;
  padding-right: 0;
}
.l-news-layout__main .l-archive__pagination {
  padding-left: 0;
  padding-right: 0;
}

/* アーカイブ系では SP もグリッド表示（横スクロールスライダーを無効化）
   行間（縦の gap）は読みやすさのため広めに取る */
@media (max-width: 767px) {
  .l-archive .s-news-latest__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-sm);
    row-gap: var(--sp-md);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 0 var(--sp-md);
  }
  .l-archive .s-news-latest__grid > .s-news-latest__item {
    flex: initial;
  }
}

/* タブレット以上のアーカイブ: 行間さらに広く */
@media (min-width: 768px) {
  .l-archive .s-news-latest__grid {
    column-gap: var(--sp-sm);
    row-gap: var(--sp-lg);
  }
}

/* アーカイブのサムネイルは正方形 */
.l-archive .s-news-latest__item img,
.l-archive .s-news-latest__item .yarpp-no-img {
  aspect-ratio: 1 / 1;
}

/* アーカイブ / 店舗詳細 のページタイトル系を共通定義に統一
   .l-archive__head / .s-store-single__head 配下の title / sub の見た目を揃える */
.l-archive__title,
.s-store-single__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 var(--sp-xs);
}

.l-archive__sub,
.s-store-single__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-black);
  letter-spacing: 0.08em;
  margin: 0;
}

.l-archive__empty {
  text-align: center;
  padding: var(--sp-xl) var(--sp-sm);
  color: var(--color-dim);
  font-size: var(--fs-md);
}


/* ============================================================
   タイムライン（page-timeline）
   左: 縦ライン + 投稿タイプを表す円アイコン
   右: 記事カード（サムネ / バッジ / タイトル / 日付 / 抜粋 / ボタン）
   ============================================================ */
:root {
  --timeline-icon-size: 48px;
}
@media (min-width: 768px) {
  :root { --timeline-icon-size: 56px; }
}

.p-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* 縦のライン（アイコンの中央を通す） */
.p-timeline-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--timeline-icon-size) / 2);
  width: 1px;
  background: var(--color-gray);
}

.p-timeline-item {
  display: grid;
  grid-template-columns: var(--timeline-icon-size) 1fr;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-xl);
  position: relative;
}
@media (min-width: 768px) {
  .p-timeline-item {
    gap: var(--sp-md);
  }
}
.p-timeline-item:last-child {
  padding-bottom: 0;
}

/* --- 左カラム: アイコン --- */
.p-timeline-item__rail {
  position: relative;
}
.p-timeline-item__icon {
  position: relative;
  z-index: 1;
  width: var(--timeline-icon-size);
  height: var(--timeline-icon-size);
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.p-timeline-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 投稿タイプ別のくすみカラー（白文字で読みやすい彩度に揃える） */
.p-timeline-item__icon--news         { background: #a55a5a; } /* くすみテラコッタ */
.p-timeline-item__icon--topics       { background: #c17d3f; } /* くすみオレンジ */
.p-timeline-item__icon--blog         { background: #5a85a5; } /* くすみブルー */
.p-timeline-item__icon--staff_review { background: #8a6b9a; } /* くすみモーブ */
.p-timeline-item__icon--information  { background: #a08c5a; } /* くすみオークル */

/* --- 右カラム: カード --- */
.p-timeline-item__card {
  min-width: 0;
  border: 1px solid var(--color-gray);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-white);
}
/* 画像はカード上端いっぱい、左右もカードと同幅で表示 */
.p-timeline-item__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-gray);
  overflow: hidden;
  margin: 0;
}
.p-timeline-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像以外のコンテンツに余白 */
.p-timeline-item__body {
  padding: var(--sp-sm);
}
@media (min-width: 768px) {
  .p-timeline-item__body {
    padding: var(--sp-md);
  }
}
.p-timeline-item__body > * + * {
  margin-top: var(--sp-xs);
}

/* タブレット以上: カードを 2 カラム（左:画像 / 右:コンテンツ） */
@media (min-width: 768px) {
  .p-timeline-item__card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: stretch;
  }
  /* INFORMATION は画像がないので1カラムのまま */
  .p-timeline-item--information .p-timeline-item__card {
    grid-template-columns: 1fr;
  }
  /* 画像は左カラム全体を埋めるためアスペクト比解除＋高さ100% */
  .p-timeline-item__thumb {
    height: 100%;
    aspect-ratio: auto;
  }
  .p-timeline-item__thumb img {
    height: 100%;
  }
}

/* タブレット横以上: 画像カラムを少し狭めて 35% に */
@media (min-width: 1024px) {
  .p-timeline-item__card {
    grid-template-columns: 35% 1fr;
  }
}

.p-timeline-item__cat {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

/* STAFF REVIEW: ブランドタグ直下の「{商品名}のレビュー」見出し */
.p-timeline-item__review-target {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.p-timeline-item__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* 2行を超えたら末尾を「…」でクリップ */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-timeline-item__title a {
  color: var(--color-black);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-timeline-item__title a:hover { opacity: 0.7; }
}

.p-timeline-item__date {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-dim);
}

.p-timeline-item__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-black);
  margin: var(--sp-xs) 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* 3行を超えたら末尾を「…」でクリップ */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-timeline-item__more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  text-decoration: none;
  margin-top: var(--sp-xs);
}
@media (hover: hover) and (pointer: fine) {
  .p-timeline-item__more:hover { opacity: 0.6; }
}
.p-timeline-item__more .bi { line-height: 1; }

/* タイムラインカード内の関連商品（NEWS / BLOG・上位4件まで）
   SP は 2列でカード幅を確保、タブレット以上は 4列固定 */
.p-timeline-item__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--color-gray);
}
@media (min-width: 768px) {
  .p-timeline-item__products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-timeline-item__product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-timeline-item__product:hover { opacity: 0.7; }
}

.p-timeline-item__product-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-gray);
  overflow: hidden;
}
.p-timeline-item__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-timeline-item__product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.p-timeline-item__product-brand {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
  /* 1行で切れたら ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-timeline-item__product-name {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--color-dim);
  /* 最大2行で末尾省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* STAFF REVIEW の投稿者情報（カード上部） */
.p-timeline-item__author {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: 0;
  margin-bottom: var(--sp-sm);
}
.p-timeline-item__author-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray);
  display: block;
}
.p-timeline-item__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.p-timeline-item__author-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.p-timeline-item__author-meta {
  font-size: var(--fs-xs);
  color: var(--color-dim);
  letter-spacing: 0.04em;
}
.p-timeline-item__author-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-black);
}


/* ------------------------------------------------------------
   アーカイブ ブランド絞り込みフィルタ
   ------------------------------------------------------------ */
.l-archive__filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  margin: 0 0 var(--sp-xs);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.l-archive__filter::-webkit-scrollbar { display: none; }
.l-archive__filter-item {
  flex: 0 0 auto; /* 横スクロール時にピル幅を保つ */
}

/* タブレット以上は折り返し表示でOK（スクロール無効） */
@media (min-width: 768px) {
  .l-archive__filter {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* SP: フィルタをページ幅いっぱいに表示（親 .l-news-layout の左右 padding を相殺）。
   横スクロール領域を画面端まで広げつつ、内側 padding で先頭・末尾ピルを inset する */
@media (max-width: 767px) {
  .l-archive__filter {
    margin-left: calc(-1 * var(--sp-sm));
    margin-right: calc(-1 * var(--sp-sm));
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }
}
/* フィルタの直後に来る要素（記事グリッド / タイムライン / 空メッセージ）との余白を確保 */
.l-archive__filter + .s-news-latest__grid,
.l-archive__filter + .p-timeline-list,
.l-archive__filter + .l-archive__empty {
  margin-top: var(--sp-lg);
}
.l-archive__filter-item {
  position: relative;
  isolation: isolate; /* ::before の z-index: -1 をピル内に閉じ込める */
  overflow: hidden;   /* スライド帯をピル形状にクリップ */
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--color-gray);
  color: var(--color-black);
  background: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s var(--ease-out-expo), border-color var(--transition);
}
/* ホバー時に左から右へスライドインする黒帯 */
.l-archive__filter-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .l-archive__filter-item:hover {
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
  }
  .l-archive__filter-item:hover::before {
    transform: translateX(0);
  }
}
.l-archive__filter-item.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
/* is-active 状態はスライド帯不要（既に黒背景） */
.l-archive__filter-item.is-active::before {
  display: none;
}



/* ------------------------------------------------------------
   INFORMATION 一覧（テキストのみ・日付＋タイトルの横並び）
   ------------------------------------------------------------ */
.p-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gray);
}
.p-info-list__item {
  border-bottom: 1px solid var(--color-gray);
}
.p-info-list__link {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: var(--sp-sm) 0;
  text-decoration: none;
  color: var(--color-black);
  flex-wrap: wrap;
}
.p-info-list__date {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--color-dim);
}
.p-info-list__title {
  font-size: var(--fs-md);
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}
.p-info-list__ext {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-dim);
}
@media (min-width: 768px) {
  .p-info-list__link {
    gap: 1.25rem;
    padding: var(--sp-md) 0;
    flex-wrap: nowrap;
  }
}


/* ------------------------------------------------------------
   著者アーカイブ ヘッダー
   アバター + ポジション + 表示名 を中央寄せで表示
   ------------------------------------------------------------ */
.l-archive__head--author { padding-top: 0; }

.l-archive__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.l-archive__author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray);
}
.l-archive__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.l-archive__author-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.l-archive__author-position {
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--color-dim);
  text-transform: uppercase;
}

.l-archive__author-name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

@media (min-width: 768px) {
  .l-archive__author-avatar {
    width: 96px;
    height: 96px;
  }
}

/* ------------------------------------------------------------
   ページネーション
   ------------------------------------------------------------ */
.l-archive__pagination {
  padding: var(--sp-md) var(--sp-sm);
}

.l-archive__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-xs);
}

.l-archive__pagination .page-numbers {
  position: relative;
  isolation: isolate; /* ::before の z-index: -1 を円内に閉じ込める */
  overflow: hidden;   /* スライド帯を円形にクリップ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.4s var(--ease-out-expo), border-color var(--transition);
}
/* ホバー時に左から右へスライドインする黒帯 */
.l-archive__pagination .page-numbers::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-black);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
}

.l-archive__pagination .page-numbers.current {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
/* current 状態はスライド帯不要（既に黒背景） */
.l-archive__pagination .page-numbers.current::before {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .l-archive__pagination .page-numbers:hover:not(.current) {
    color: var(--color-white);
    border-color: var(--color-black);
  }
  .l-archive__pagination .page-numbers:hover:not(.current)::before {
    transform: translateX(0);
  }
}

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------
   STORE 一覧（都道府県別グループ）
   ------------------------------------------------------------ */
.l-archive__group {
  padding: 0 0 var(--sp-lg);
}

.l-archive__group-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0;
  margin: 0 0 var(--sp-md);
}

.l-archive__store-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

.l-archive__store-link {
  display: block;
  text-decoration: none;
  color: var(--color-black);
}

/* サムネイル: 16:9 で表示。未登録時はグレー塗りつぶし */
.l-archive__store-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-gray);
  margin-bottom: var(--sp-xs);
}

.l-archive__store-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 日本語店舗名（store_tag: shop_name_jp）: 店舗名の下に小さめで表示 */
.l-archive__store-name-jp {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-black);
  letter-spacing: 0.06em;
  margin-top: 0.1rem;
}

.l-archive__store-addr {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-dim);
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .l-archive__group { padding: 0 0 var(--sp-lg); }
  .l-archive__store-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
  }
}

/* ------------------------------------------------------------
   single-store
   ------------------------------------------------------------ */

/* 店舗情報コンテンツの最大幅（中央寄せ）— l-news-layout と同じ幅指定で統一 */
.s-store-single .s-news-single__inner {
  max-width: calc(1100px + var(--sp-lg));
  padding-left: var(--sp-sm);
  padding-right: var(--sp-sm);
}
@media (min-width: 1024px) {
  .s-store-single .s-news-single__inner {
    padding-left: var(--sp-lg);
    padding-right: var(--sp-lg);
  }
}

/* タイトル（中央寄せ） */
/* 店舗詳細のページタイトル枠（中央寄せ）
   上の余白は .l-main 側で一元管理。横 padding は親 inner で確保するため 0 */
.s-store-single__head {
  text-align: center;
  padding: 0 0 var(--sp-lg);
}
/* .s-store-single__title / __subtitle のスタイルは
   l-archive__title / l-archive__sub と統合済み（先頭の共通ルール参照） */

/* ① GoogleMAP
   SP: アスペクト比 4:3（左右パディングを打ち消し全幅）
   PC: 高さ固定 600px（ビューポート全幅にブレイクアウト） */
.s-store-single__map {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-gray);
  margin-bottom: var(--sp-sm);
}
/* タブレット縦向き（768〜1023px）は 16:9 にして横長表示に */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-store-single__map {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1024px) {
  .s-store-single__map {
    aspect-ratio: auto;
    height: 600px;
  }
}
@media (max-width: 1023px) {
  .s-store-single .s-news-single__inner > .s-store-single__map {
    margin-left: calc(var(--sp-sm) * -1);
    margin-right: calc(var(--sp-sm) * -1);
    width: auto;
  }
}
/* PC のみ: マップをビューポート全幅にブレイクアウト（他要素は 1100px 内に保持） */
@media (min-width: 1024px) {
  .s-store-single .s-news-single__inner > .s-store-single__map {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.s-store-single__map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ② Googleマップを開くリンク（右寄せ、テキスト + アイコン） */
.s-store-single__map-link {
  text-align: right;
  margin: 0 0 var(--sp-lg);
}
.s-store-single__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-base);
  color: var(--color-black);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.s-store-single__map-btn .bi {
  font-size: var(--fs-md);
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .s-store-single__map-btn:hover { opacity: 0.6; }
}

/* ④ 店舗情報 */
.s-store-single__info-list {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-base);
  margin: var(--sp-lg) 0;
}
@media (min-width: 768px) {
  .s-store-single__info-list {
    grid-template-columns: 6rem 1fr;
  }
}
.s-store-single__info-list dt {
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.04em;
}
.s-store-single__info-list dd {
  margin: 0;
  color: var(--color-black);
}

/* セクション見出し共通 */
.s-store-single__sec-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 var(--sp-sm);
}

/* 画像スライダー共通（店舗 / STAFF REVIEW）
   スライダーコンテナに固定アスペクト比を持たせ、内部の slick 要素を100%充填させる。
   こうしないと slick fade モードで height 計算が破綻し、2枚目以降が表示されない／
   高さが伸びすぎるなどのレイアウト崩れが発生する。 */
.s-store-single__slider,
.s-staff-review-single__slider {
  display: block;
  width: 100%;
  margin: 0 0 var(--sp-lg);
  position: relative;
}

.s-store-single__slider-inner,
.s-staff-review-single__slider-inner {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

/* アスペクト比はそれぞれの仕様で個別指定 */
.s-store-single__slider-inner {
  aspect-ratio: 16 / 9;  /* 店舗: 1600×900 推奨 */
}
.s-staff-review-single__slider-inner {
  aspect-ratio: 1 / 1;   /* STAFF REVIEW: 1200×1200 推奨 */
}

/* slick 初期化前のチラつき抑止 */
.s-store-single__slider-inner:not(.slick-initialized) .s-store-single__slide:not(:first-child),
.s-staff-review-single__slider-inner:not(.slick-initialized) .s-staff-review-single__slide:not(:first-child) {
  display: none;
}
.s-store-single__slider-inner:not(.slick-initialized) .s-store-single__slide,
.s-staff-review-single__slider-inner:not(.slick-initialized) .s-staff-review-single__slide {
  width: 100%;
  height: 100%;
}

/* slick が生成する各要素を高さ100%で充填 */
.s-store-single__slider-inner .slick-list,
.s-store-single__slider-inner .slick-track,
.s-staff-review-single__slider-inner .slick-list,
.s-staff-review-single__slider-inner .slick-track {
  height: 100%;
}
.s-store-single__slider-inner .slick-slide,
.s-staff-review-single__slider-inner .slick-slide {
  height: 100%;
}
.s-store-single__slider-inner .slick-slide > div,
.s-staff-review-single__slider-inner .slick-slide > div {
  /* slick の autoplay/lazy で挿入される中間 div も100% */
  height: 100%;
}

/* 個別スライド本体 */
.s-store-single__slide,
.s-staff-review-single__slide {
  margin: 0;
  width: 100%;
  height: 100%;
}
.s-store-single__slide img,
.s-staff-review-single__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* slick の矢印（slick-theme.css を読み込んでいないため position 等も自前で指定）
   背景・枠なしの白アイコン、画像下から5%の位置に配置
   店舗 / STAFF REVIEW スライダー共通 */
.s-store-single__slider .slick-prev,
.s-store-single__slider .slick-next,
.s-staff-review-single__slider .slick-prev,
.s-staff-review-single__slider .slick-next {
  position: absolute;
  bottom: 5%;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .s-store-single__slider .slick-prev:hover,
  .s-store-single__slider .slick-next:hover,
  .s-staff-review-single__slider .slick-prev:hover,
  .s-staff-review-single__slider .slick-next:hover {
    opacity: 0.7;
  }
}
.s-store-single__slider .slick-prev,
.s-staff-review-single__slider .slick-prev { left: 0.75rem; }
.s-store-single__slider .slick-next,
.s-staff-review-single__slider .slick-next { right: 0.75rem; }
.s-store-single__slider .slick-prev:before,
.s-store-single__slider .slick-next:before,
.s-staff-review-single__slider .slick-prev:before,
.s-staff-review-single__slider .slick-next:before {
  content: none;
}
.s-store-single__slider .slick-prev .bi,
.s-store-single__slider .slick-next .bi,
.s-staff-review-single__slider .slick-prev .bi,
.s-staff-review-single__slider .slick-next .bi {
  font-size: var(--fs-xl);
  color: var(--color-white);
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.s-store-single__slider .slick-prev:focus,
.s-store-single__slider .slick-next:focus,
.s-staff-review-single__slider .slick-prev:focus,
.s-staff-review-single__slider .slick-next:focus {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* 店舗スライダー: 固定グリッドのサムネイルナビ（メインスライダーと連動）
   SP: 横6列 × 折り返し / タブレット以上: 横10列 × 折り返し */
.s-store-single__slider-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
  margin-top: var(--sp-xs);
}
@media (min-width: 768px) {
  .s-store-single__slider-thumbs {
    grid-template-columns: repeat(10, 1fr);
  }
}
.s-store-single__slider-thumb {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.s-store-single__slider-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .s-store-single__slider-thumb:hover { opacity: 0.85; }
}
/* 現在表示中のサムネ */
.s-store-single__slider-thumb.is-active {
  opacity: 1;
}

/* ⑤ 取扱ブランド */
.s-store-single__brands {
  margin: var(--sp-xl) 0;
}
.s-store-single__brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

/* ブランドピル: 角丸 + 枠線。リンクあり=濃い色 / リンクなし=薄い色 */
.s-store-single__brand-pill {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: var(--sp-xs) 0.85rem;
  border-radius: 999px;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
/* リンクあり（Jコネ掲載）: 黒背景＋白文字 → hover で白黒反転 */
.s-store-single__brand-pill--linked {
  color: var(--color-white);
  border-color: var(--color-black);
  background: var(--color-black);
}
@media (hover: hover) and (pointer: fine) {
  .s-store-single__brand-pill--linked:hover {
    color: var(--color-black);
    background: var(--color-white);
    opacity: 1;
  }
}
/* リンクなし（Jコネ未掲載）: 黒ボーダー＋白背景＋黒文字 */
.s-store-single__brand-pill--plain {
  color: var(--color-black);
  border-color: var(--color-black);
  background: var(--color-white);
  cursor: default;
}

/* 店舗関連セクションの幅・余白制御は .l-related-zone に統合済み */


/* ============================================================
   STAFF REVIEW 詳細ページ専用コンテンツ
   ① 商品情報 / ② スタッフコメント / ③ スタッフの評価
   ============================================================ */

/* セクション見出し共通 */
.s-staff-review-single__sec-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--color-gray);
}

/* ① 商品情報 */
.s-staff-review-single__product {
  margin: var(--sp-lg) 0;
  padding: var(--sp-sm);
  border: 1px solid var(--color-gray);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .s-staff-review-single__product {
    padding: var(--sp-md);
    /* 2カラム: 左にブランド/名前/価格を縦積み、右にボタンを縦中央配置 */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sp-md);
    align-items: center;
  }
  .s-staff-review-single__product-brand,
  .s-staff-review-single__product-name,
  .s-staff-review-single__product-price {
    grid-column: 1;
  }
  .s-staff-review-single__product-btn {
    grid-column: 2;
    grid-row: 1 / span 3;  /* brand/name/price の3行分にスパン（implicit grid 対応） */
    justify-self: end;
    align-self: end;
  }
}

.s-staff-review-single__product-brand {
  display: inline-block;
  width: fit-content;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .s-staff-review-single__product-brand:hover { opacity: 0.6; }
}

.s-staff-review-single__product-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: var(--sp-xs) 0 var(--sp-xs);
  color: var(--color-black);
}

.s-staff-review-single__product-price {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--sp-sm);
  color: var(--color-black);
}
@media (min-width: 768px) {
  .s-staff-review-single__product-price {
    margin-bottom: 0;
  }
}

.s-staff-review-single__product-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 0.65rem 1.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: var(--color-black);
  border: 1px solid var(--color-black);
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .s-staff-review-single__product-btn:hover {
    background: var(--color-white);
    color: var(--color-black);
    opacity: 1;
  }
}
.s-staff-review-single__product-btn .bi {
  font-size: var(--fs-base);
  line-height: 1;
}


/* ② スタッフコメント */
.s-staff-review-single__comment {
  margin: var(--sp-lg) 0;
}
/* レビュー記事のタイトル本体（ヘッダーから移動して表示） */
.s-staff-review-single__comment-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--color-black);
  margin: 0 0 var(--sp-sm);
  overflow-wrap: anywhere;
}
.s-staff-review-single__comment-body {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-black);
  /* 入力された改行をそのまま反映（<br> 不要） */
  white-space: pre-line;
}


/* ③ スタッフの評価（5段階スライダー風） */
.s-staff-review-single__rating {
  margin: var(--sp-lg) 0;
}
.s-staff-review-single__rating-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md) var(--sp-lg);
}
@media (min-width: 768px) {
  .s-staff-review-single__rating-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 各評価軸 */
.p-rating-axis {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.p-rating-axis__title {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--color-black);
}
.p-rating-axis__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-xs);
  color: var(--color-dim);
  letter-spacing: 0.06em;
}

/* ドット列: 1列に5個、ラインで連結 */
.p-rating-axis__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
/* 連結ライン（背景） */
.p-rating-axis__dots::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: var(--color-gray);
  transform: translateY(-50%);
  z-index: 0;
}
.p-rating-axis__dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gray);
}
.p-rating-axis__dot.is-active {
  background: var(--color-black);
  width: 14px;
  height: 14px;
}


/* STAFF REVIEW 系の関連セクション共通: サムネイル 1:1 + PC 4カラム
   - 単一スタッフレビュー詳細ページの「この商品/このスタッフのほかのレビュー」
   - 店舗詳細ページの「STAFF REVIEW」セクション
   いずれも staff_review 投稿タイプを並べるため s-related-section--staff_review で一括指定 */
.s-related-section--staff_review .s-news-latest__item img,
.s-related-section--staff_review .s-news-latest__item .yarpp-no-img {
  aspect-ratio: 1 / 1;
}
@media (min-width: 1024px) {
  .s-related-section--staff_review .s-news-latest__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   FAQ（よくある質問）アーカイブ  archive-faq.php
   ・faq_category ごとにセクション、各問いは <details> アコーディオン
   ============================================================ */
.l-faq__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}
@media (min-width: 768px) {
  .l-faq__inner { padding: 0 var(--sp-lg); }
}

/* カテゴリ内リンク（各セクションへスムーススクロール）
   ・カテゴリ数に応じて PHP 側で自動生成される
   ・SP は横スクロール、タブレット以上は折り返し */
.p-faq__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-xs);
  margin: 0 0 var(--sp-lg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.p-faq__nav::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .p-faq__nav {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}
.p-faq__nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.p-faq__nav-item::before {
  content: '\2193'; /* ↓ */
  font-weight: 400;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .p-faq__nav-item:hover {
    color: var(--color-white);
    background: var(--color-black);
    border-color: var(--color-black);
    opacity: 1;
  }
}

/* カテゴリセクション */
.p-faq__section { margin-bottom: var(--sp-2xl, var(--sp-xl)); }
.p-faq__section + .p-faq__section { margin-top: var(--sp-xl); }
/* アンカー移動時に固定ヘッダーへ隠れないようオフセットを確保 */
.p-faq__section {
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + var(--sp-md));
}
.p-faq__section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-bottom: var(--sp-sm);
  margin: 0 0 var(--sp-xs);
  border-bottom: 2px solid var(--color-black);
}

/* アコーディオン項目 */
.p-faq__item {
  border-bottom: 1px solid var(--color-gray);
}

/* 問い（summary）
   ・<details> の既定マーカー（▼/▶）を各ブラウザで確実に消す
   ・+/− アイコンは疑似要素で右側に */
.p-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  cursor: pointer;
  list-style: none;
  padding: var(--sp-md) 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  transition: opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.p-faq__q::-webkit-details-marker { display: none; }  /* Chrome/Safari 旧 */
.p-faq__q::marker { content: ''; }                     /* Firefox/新Chrome */

/* +/− アイコン（枠線なし・大きめ。開くと − に） */
.p-faq__q::after {
  content: '+';
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-black);
}
.p-faq__item[open] > .p-faq__q::after { content: '\2212'; }

@media (hover: hover) and (pointer: fine) {
  .p-faq__q:hover { opacity: 0.6; }
}

/* 答え */
.p-faq__a {
  padding: 0 0 var(--sp-xl);
}
/* 答え本文（entry-content の上下 margin を FAQ 用に詰める） */
.p-faq__a-body {
  font-size: var(--fs-base);
  line-height: 1.8;
  padding: 0 0 var(--sp-lg);
}
.p-faq__a-body > :first-child { margin-top: 0; }
.p-faq__a-body > :last-child  { margin-bottom: 0; }

/* リンク（ボタン風・角丸ピル。hover で白黒反転）
   上余白は .p-faq__a-body 側の margin-bottom で管理するため 0 */
.p-faq__link {
  margin: 0;
}
/* リンクの直後に画像が続く場合は間隔を確保 */
.p-faq__link:not(:last-child) { margin-bottom: var(--sp-md); }
.p-faq__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.p-faq__link a::after {
  content: '\2192'; /* → */
  font-weight: 400;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .p-faq__link a:hover {
    color: var(--color-white);
    background: var(--color-black);
    opacity: 1;
  }
}

/* 挿入画像（最大3枚）
   ・SP: 1カラム・ボックス幅100%（縦並び）
   ・タブレット以上: 3カラム・各カラムボックス幅100% */
.p-faq__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  /* 上余白は直前要素（本文 or リンク）の margin-bottom で管理 */
  margin-top: 0;
}
@media (min-width: 768px) {
  .p-faq__images { grid-template-columns: repeat(3, 1fr); }
}
.p-faq__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}


/* ------------------------------------------------------------
   検索フィルターパネル（.p-filter / 右からドロワー）
   ・ヘッダー虫眼鏡／ボトムナビSEARCH（.js-filter-open）で開く
   ・FS 側 style.css と同一仕様
   ------------------------------------------------------------ */
.p-filter {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  /* 閉じるときはスライドアウト（0.5s）が終わってから非表示にする */
  transition: visibility 0s linear 0.5s;
}
.p-filter.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
/* オーバーレイ */
.p-filter__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.4);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
}
.p-filter.is-open .p-filter__overlay { opacity: 1; }
/* パネル本体 */
.p-filter__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 88%;
  max-width: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out-expo);
}
.p-filter.is-open .p-filter__panel { transform: translateX(0); }
/* ヘッダー */
.p-filter__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--content-pad-x);
  border-bottom: 1px solid var(--color-gray);
}
.p-filter__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.p-filter__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-lg);
  color: var(--color-black);
}
/* フォーム */
.p-filter__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.p-filter__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-md) var(--content-pad-x);
}
.p-filter__group { margin-bottom: var(--sp-md); }
.p-filter__label {
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
}
/* テキスト・数値入力 */
.p-filter__text,
.p-filter__num,
.p-filter__select {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
}
.p-filter__text { width: 100%; }
/* セレクトボックス：右端に▼（chevron-down）を表示 */
.p-filter__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888888'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.8rem;
}
.p-filter__text:focus,
.p-filter__num:focus,
.p-filter__select:focus {
  outline: none;
  border-color: var(--color-black);
}
/* 価格帯 */
.p-filter__price {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.p-filter__num { width: 100%; min-width: 0; }
.p-filter__price-sep { color: var(--color-dim); }
.p-filter__price-unit { font-size: var(--fs-xs); color: var(--color-dim); }
/* ピル（チェックボックス） */
.p-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.p-filter__pill { cursor: pointer; }
.p-filter__pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.p-filter__pill span {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.p-filter__pill input:checked + span {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.p-filter__pill input:focus-visible + span { outline: 2px solid var(--color-black); outline-offset: 2px; }
/* 在庫チェック */
.p-filter__check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  cursor: pointer;
}
/* チェック時に白いチェックマーク（bi-check）を表示 */
.p-filter__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  background: var(--color-white);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.p-filter__check input:checked {
  border-color: var(--color-black);
  background-color: var(--color-black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9rem;
}
/* フッター（固定アクション） */
.p-filter__foot {
  flex: none;
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--content-pad-x);
  border-top: 1px solid var(--color-gray);
}
.p-filter__reset {
  flex: 0 0 35%;
  padding: 0.7rem;
  font-size: var(--fs-sm);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-black);
  transition: border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-filter__reset:hover { border-color: var(--color-black); }
}
.p-filter__submit {
  flex: 1 1 auto;
  padding: 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 4px;
  color: var(--color-white);
  cursor: pointer;
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .p-filter__submit:hover { opacity: 0.85; }
}
/* パネル展開中は背面スクロール抑止 */
body.is-filter-open { overflow: hidden; }

/* PC：パネル内の左右余白を sp-lg に */
@media (min-width: 1024px) {
  .p-filter__head,
  .p-filter__body,
  .p-filter__foot {
    padding-left:  var(--sp-lg);
    padding-right: var(--sp-lg);
  }
}


/* ------------------------------------------------------------
   旧テーマ（jewelryconnection）記事内の商品リスト 後方互換スタイル
   ------------------------------------------------------------
   ■ 目的
     旧テーマ時代に作成した投稿を新テーマで表示してもレイアウトが
     崩れないよう、新テーマの .p-product-grid（この記事の関連商品）と
     ほぼ同じ見た目に揃える。

   ■ 旧マークアップ（新テーマ側とは構造が異なる）
     .product_list_box
       └ div
           └ a
               ├ img
               ├ span.JC_product_name
               └ span.JC_product_price      ← 「9,900円(税込)」まで含む文字列

     新テーマ側にある .p-product-grid__info のラッパーが無いため、
     内側の余白は各 span に直接与えている。
     価格は文字列に「円(税込)」が含まれるので ¥ 記号は付けない
     （新テーマの .p-product-grid__price::before とは別扱い）。
   ------------------------------------------------------------ */
.product_list_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* SP: 2列（新テーマと同じ） */
  margin: 0 0 var(--sp-xl);
}
@media (min-width: 768px) {
  .product_list_box {
    grid-template-columns: repeat(4, 1fr); /* タブレット以上: 4列 */
  }
}

/* セル：新テーマ .p-product-grid__item と同じ枠線の重ね方
   （ネガティブマージンで隣接ボーダーの二重線を打ち消す） */
.product_list_box > div {
  border: 1px solid var(--color-gray);
  margin-top: -1px;
  margin-left: -1px;
  min-width: 0;
}
.product_list_box > div > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 画像：正方形クロップ */
.product_list_box img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* 商品名・価格の共通余白 */
.product_list_box .JC_product_name,
.product_list_box .JC_product_price {
  display: block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--fs-xs);
}
/* 商品名：2行でクランプ（新テーマの __name と同じ） */
.product_list_box .JC_product_name {
  padding-top: var(--sp-xs);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 価格：太字（¥ は付けない） */
.product_list_box .JC_product_price {
  margin-top: 0.3rem;
  padding-bottom: var(--sp-sm);
  font-weight: 700;
}

/* 本文（.entry-content）の汎用スタイルを打ち消す
   ・a の下線 ・img の上下マージン */
.entry-content .product_list_box a { border-bottom: none; }
.entry-content .product_list_box img { margin: 0; }


/* 関連商品グリッド直下の価格注記
   ・グリッド（.s-news-products__grid）の下余白 var(--sp-xl) を
     打ち消して注記をグリッドに寄せ、注記側で下余白を持たせる */
.s-news-products__grid + .p-product-grid__note {
  margin-top: calc(-1 * var(--sp-xl) + var(--sp-sm));
}
.p-product-grid__note {
  margin-bottom: var(--sp-lg);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--color-dim);
}