/* 2026-10-03 店舗ページの Google 口コミ節：差し替え版の全文。
   ベース：store-greviews.css（SHA-256: f2b25120…）。HTML・文言・JS は変更しない。
   Widget for Google Reviews の上書きは .lx-greviews 内だけに限定する。
   この CSS はプラグイン・共通 CSS より先に読み込まれるため、競合する箇所は
   詳細度と !important で上書きする。スライドの transform・初期化後の幅は触らない。 */

.lx-greviews.lx-greviews {
  --lx-navy: #14355D;
  --lx-navy2: #224995;
  --lx-line: #DCE3EE;
  --lx-pale: #F4F7FB;
  --lx-star: #F5A623;
  --lx-card-padding: 20px;
  --lx-text-height: 126px; /* 14px × 1.8 × 5 行 */
  margin: 80px auto !important;
  padding: 0 0 32px !important;
  background: #fff;
  scroll-margin-top: 74px;
}

/* 後続の相談バナーは約 34px 上へ張り出す。節内の下余白で吸収し、
   最後のボタンからバナーまで約 80px を確保する。隣の節は変更しない。 */
.lx-greviews > .thisinner {
  min-width: 0;
}

.lx-greviews .thisinner > .line-title {
  height: auto !important;
  margin: 0 0 24px !important;
  padding: 12px 20px;
  background: var(--lx-navy);
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  word-break: break-word;
}

.lx-greviews .thisinner > .line-title > span {
  line-height: 1.4;
  word-break: break-word;
}

/* ---- 評価のまとめ（点数・星・件数・Google 表記） ---- */
.lx-greviews .lx-greviews-summary {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--lx-pale);
  border: 1px solid var(--lx-line);
  border-radius: 8px;
}

.lx-greviews .lx-greviews-score {
  margin: 0;
  font-family: "Rubik", "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--lx-navy);
  white-space: nowrap;
}

.lx-greviews .lx-greviews-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 4px;
}

.lx-greviews .lx-greviews-stars {
  display: inline-block;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;
  white-space: nowrap;
  /* 実際の評価値による星の塗り分けを維持する。 */
  background: linear-gradient(90deg, var(--lx-star) calc(var(--lx-rating, 0) / 5 * 100%), #CBD3DE calc(var(--lx-rating, 0) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lx-greviews .lx-greviews-count {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--lx-navy);
  white-space: nowrap;
}

.lx-greviews .lx-greviews-source {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #527694;
  white-space: nowrap;
}

.lx-greviews .lx-greviews-source > svg {
  flex: 0 0 auto;
  display: block;
}

.lx-greviews .lx-greviews-note {
  margin: 12px 0 20px;
  font-size: 12px;
  line-height: 1.7;
  color: #527694;
  word-break: break-word;
}

/* ---- プラグイン出力の上書き ---- */
.lx-greviews .lx-greviews-feed {
  min-width: 0;
}

.lx-greviews .wp-gr {
  --rpi-star-color: var(--lx-star) !important;
  --card-gap: 16px !important;
  font-family: inherit !important;
}

/* 店名・英語の件数表記・powered by は上の要約で置き換える。 */
.lx-greviews .wp-gr .grw-header {
  display: none !important;
}

.lx-greviews .wp-gr .grw-row .grw-content {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* スライドは全幅のまま、送りボタンと点を次の行に配置する。
   .rpi-slide / .grw-review の幅・flex-basis・transform は JS と既定 CSS に任せる。 */
.lx-greviews .wp-gr .grw-content .grw-content-inner {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px 12px;
  position: relative;
  min-width: 0;
}

.lx-greviews .wp-gr .grw-content-inner > .rpi-slides {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  /* 両端の半円マスクと矢印用の横余白を解除する。 */
  -webkit-mask: none !important;
  mask: none !important;
}

.lx-greviews .wp-gr .grw-review .grw-review-inner.grw-backgnd {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: auto !important;
  min-height: calc(40px + 24px + var(--lx-text-height) + 24px + var(--lx-card-padding) + var(--lx-card-padding) + 2px) !important;
  margin: 4px 0 !important;
  padding: var(--lx-card-padding) !important;
  background: #fff !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(20, 53, 93, .04) !important;
}

/* 投稿者の行：写真 40px、名前 1 行、日付 1 行。右上の Google ロゴを避ける。 */
.lx-greviews .wp-gr .grw-review-inner > .rpi-row12-center {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 24px 0 0 !important;
}

.lx-greviews .wp-gr .grw-review .grw-img-wrap,
.lx-greviews .wp-gr .grw-review .grw-img {
  --img-size: 40px !important;
  width: 40px !important;
  height: 40px !important;
}

.lx-greviews .wp-gr .grw-review .grw-img-wrap {
  flex: 0 0 40px !important;
}

.lx-greviews .wp-gr .grw-review .grw-img {
  display: block !important;
  object-fit: cover;
  border-radius: 50% !important;
}

.lx-greviews .wp-gr .rpi-row12-center > .rpi-col6 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 4px !important;
}

.lx-greviews .wp-gr .grw-review .wp-google-name {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--lx-navy2) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

.lx-greviews .wp-gr .grw-review .wp-google-time {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: #527694 !important;
}

.lx-greviews .wp-gr .grw-review-inner > .rpi-stars {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  height: 24px !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

.lx-greviews .wp-gr .grw-review-inner > .rpi-logo-google {
  position: absolute !important;
  top: var(--lx-card-padding) !important;
  right: var(--lx-card-padding) !important;
  margin: 0 !important;
}

/* 短文・長文・本文なしでも本文の 5 行分を予約し、カードの高さを揃える。 */
.lx-greviews .wp-gr .grw-review-inner > .rpi-col4 {
  flex: 0 0 auto !important;
  min-height: var(--lx-text-height) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lx-greviews .wp-gr .grw-review .wp-google-feedback {
  height: auto !important;
  max-height: var(--lx-text-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* 本文なしの投稿に本文枠を表示しない。高さは上の親要素で予約する。 */
.lx-greviews .wp-gr .grw-review .wp-google-feedback:empty {
  display: none !important;
}

.lx-greviews .wp-gr .grw-review .wp-google-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  max-height: var(--lx-text-height) !important;
  overflow: hidden !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  white-space: pre-line !important;
  word-break: break-word !important;
}

/* ---- 送りボタン・ページ位置の点（カード下の操作行） ---- */
.lx-greviews .wp-gr .grw-content-inner > .rpi-ltgt {
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  /* ボタンの位置補正だけ解除。スライドの移動 transform は変更しない。 */
  transform: none !important;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--lx-navy2) !important;
  box-shadow: 0 2px 4px rgba(20, 53, 93, .04) !important;
  cursor: pointer;
}

.lx-greviews .wp-gr .grw-content-inner > .grw-prev {
  grid-column: 1;
}

.lx-greviews .wp-gr .grw-content-inner > .grw-next {
  grid-column: 3;
}

.lx-greviews .wp-gr .grw-content-inner > .rpi-dots-wrap {
  position: static !important;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

.lx-greviews .wp-gr .rpi-dots-wrap > .rpi-dots {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 4px 0 !important;
}

.lx-greviews .wp-gr .rpi-dots .rpi-dot {
  flex-shrink: 0;
  margin: 0 !important;
}

.lx-greviews .wp-gr .rpi-dots .rpi-dot.active,
.lx-greviews .wp-gr .rpi-dots .active {
  background: var(--lx-navy2) !important;
}

.lx-greviews .wp-gr .rpi-ltgt:hover {
  border-color: var(--lx-navy2) !important;
  background: var(--lx-pale) !important;
}

/* ---- JS が未初期化の場合の逃げ道（従来の grw-row-m 判定を維持） ----
   固定 280px の指定を除き、親幅に応じた割合だけで横スクロールにする。
   data-exec="true" ではこれらの規則は一切適用しない。 */
.lx-greviews .wp-gr[data-exec="false"] .grw-row-m .grw-review {
  flex: 0 0 calc((100% - var(--card-gap)) / 2) !important;
  width: calc((100% - var(--card-gap)) / 2) !important;
}

.lx-greviews .wp-gr[data-exec="false"] .grw-row .rpi-slides {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.lx-greviews .wp-gr[data-exec="false"] .grw-row .rpi-ltgt,
.lx-greviews .wp-gr[data-exec="false"] .grw-row .rpi-dots-wrap {
  display: none !important;
}

/* ---- Google マップへのリンク：既存の .button.whitebtn.full と矢印を使用 ---- */
.lx-greviews .lx-greviews-cta {
  width: 100%;
  max-width: 400px;
  margin: 24px auto 0;
}

.lx-greviews .lx-greviews-cta > a.button.whitebtn.full {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 64px;
  margin: 0 auto;
  padding: 18px 24px;
  border: 1px solid var(--lx-navy2);
  border-radius: 999px;
  background: #fff;
  color: var(--lx-navy2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
}

.lx-greviews .lx-greviews-cta > a.button > .arrow {
  flex-shrink: 0;
  margin-left: 8px;
}

.lx-greviews .lx-greviews-cta > a.button:focus-visible,
.lx-greviews .wp-gr .rpi-ltgt:focus-visible,
.lx-greviews .wp-gr .rpi-dot:focus-visible,
.lx-greviews .wp-gr .wp-google-name:focus-visible {
  outline: 2px solid var(--lx-navy2) !important;
  outline-offset: 3px;
}

@media (max-width: 750px) {
  .lx-greviews.lx-greviews {
    --lx-card-padding: 16px;
    margin: 52px auto !important;
    padding-bottom: 24px !important;
    scroll-margin-top: 60px;
  }

  /* 390px 画面では 358px。スライド自身ではなく外側の節コンテナを調整する。 */
  .lx-greviews > .thisinner {
    width: calc(100% - 32px) !important;
  }

  .lx-greviews .thisinner > .line-title {
    margin-bottom: 20px !important;
    padding: 12px;
    font-size: 17px;
  }

  .lx-greviews .lx-greviews-summary {
    gap: 12px;
    padding: 16px;
  }

  .lx-greviews .lx-greviews-score {
    font-size: 40px;
  }

  .lx-greviews .lx-greviews-stars {
    font-size: 18px;
  }

  .lx-greviews .lx-greviews-note {
    margin: 12px 0 16px;
  }

  .lx-greviews .wp-gr {
    --card-gap: 0px !important;
  }

  .lx-greviews .wp-gr[data-exec="false"] .grw-row-m .grw-review {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .lx-greviews .lx-greviews-cta {
    max-width: none;
    margin-top: 20px;
  }

  .lx-greviews .lx-greviews-cta > a.button.whitebtn.full {
    min-height: 56px;
    padding: 16px;
    font-size: 14px;
  }
}

/* 小幅の端末では、点数を左に 2 段ぶん置き、右に「星・件数」と「出典」を縦に並べる（出典だけが単独で次の行に回らないように） */
@media (max-width: 359px) {
  .lx-greviews .lx-greviews-summary {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 4px;
  }

  .lx-greviews .lx-greviews-score {
    grid-row: 1 / span 2;
  }

  .lx-greviews .lx-greviews-source {
    grid-column: 2;
    justify-self: start;
  }

  /* 「Google マップで口コミをすべて見る」を 1 行に収める（320 で「る」だけ 2 行目に落ちるため、左右の余白を詰める。文字は 14px のまま） */
  .lx-greviews .lx-greviews-cta > a.button.whitebtn.full {
    padding-left: 8px;
    padding-right: 8px;
  }

  .lx-greviews .lx-greviews-cta > a.button > .arrow {
    margin-left: 6px;
  }
}

/* 確認時の追加（メイン PC）：SP で点が 2 段に折り返し、送りボタンの行と「すべて見る」の間が空きすぎるのを詰める */
.lx-greviews .wp-gr .rpi-dots .rpi-dot { width: 8px !important; height: 8px !important; }
@media (max-width: 767px) {
  .lx-greviews .lx-greviews-cta { margin-top: 16px; }
  .lx-greviews .wp-gr .grw-content-inner > .rpi-ltgt,
  .lx-greviews .wp-gr .grw-content-inner > .grw-prev,
  .lx-greviews .wp-gr .grw-content-inner > .grw-next { margin-top: 0 !important; }
}

/* 確認時の追加 2（ユーザー「なんかズレてる」）：点の列が左に寄るのを、戻る・進むの間の中央にそろえる */
.lx-greviews .wp-gr .grw-content-inner > .rpi-dots-wrap {
  justify-self: stretch !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
.lx-greviews .wp-gr .rpi-dots-wrap > .rpi-dots { width: auto !important; max-width: 100%; margin: 0 auto !important; }
/* 確認時の追加 3：送りボタンの「‹」「›」が円の左に寄るのを中央に */
.lx-greviews .wp-gr .grw-content-inner > .grw-prev,
.lx-greviews .wp-gr .grw-content-inner > .grw-next {
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; text-indent: 0 !important; line-height: 1 !important;
}
.lx-greviews .wp-gr .grw-content-inner > .grw-prev::before,
.lx-greviews .wp-gr .grw-content-inner > .grw-next::before,
.lx-greviews .wp-gr .grw-content-inner > .grw-prev::after,
.lx-greviews .wp-gr .grw-content-inner > .grw-next::after {
  position: static !important; margin: 0 !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important;
}
/* 確認時の追加 4（メイン PC）：「すべて見る」の矢印（.arrow）は表示していないのに幅と左の間隔を取り、文字がボタンの中心より左に寄るため、空のときは幅と margin を 0 にする */
.lx-greviews .lx-greviews-cta > a.button > .arrow:empty {
  width: 0;
  min-width: 0;
  margin: 0;
}