/* * Googleクチコミ(自社プラグイン NS Reviews)のテーマ側スコープCSS * * プラグイン本体(plugin/ns-reviews/assets/css/ns-reviews.css)は一切編集しない。 * 見た目の調整はすべてここで行う。開発 dir は ../20260930口コミプラグイン(本体)。 * * 詳細度に注意: * プラグインCSSはショートコード実行時(本文描画中)に enqueue されるため、 * ドキュメント上ではこのファイルより後(フッター)に出力される。 * したがって「後勝ち」は使えず、必ずプラグイン側より高い詳細度で書く。 * プラグイン側は .nsrev .nsrev__xxx (0,2,0) なので、 * ここは .fh-google-reviews .nsrev .nsrev__xxx (0,3,0) 以上にする。 * * 拠点別のフック .nsrev--profile- はプラグイン v1.1.0 が付けるクラス。 * プラグイン側に対応するCSSは無く、テーマが拠点別の見た目を変えるためだけにある。 */ /* ------------------------------------------------------------------ * 配色 本体サイトのパレット(白基調 + ネイビー)に寄せる * accent / bg / ink はショートコード属性で渡している。 * カードの地色とヘアラインは属性から変えられないのでここで上書きする。 * 星の色(--nsrev-star #e0a52e)は変えない。Googleの星は金色で、 * ネイビーに寄せると「Googleのクチコミ」に見えなくなるため。 * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev { /* 長いクチコミを畳む行数。CSS と JS(assets/js/reviews.js)が同じ値を読む */ --fh-rev-lines: 10; --nsrev-card: #ffffff; --nsrev-card2: #ffffff; --nsrev-line: #e7e2da; --nsrev-body: #4a4a4a; } .fh-google-reviews .nsrev .nsrev__badge { box-shadow: 0 8px 22px rgba(51, 55, 134, .08); } .fh-google-reviews .nsrev .nsrev__rating-num { font-family: var(--fh-num); font-weight: 500; letter-spacing: 0; } .fh-google-reviews .nsrev .nsrev__badge-sub { color: #5b5550; } /* 件数バッジは全拠点で非表示(2026-09-06 嶋崎さん判断。船橋の本番と同じ扱い)。 平均★と「Googleで◯件すべてのクチコミを見る」の全件リンクは残す = 抜粋であることが構造的に明示される。count の値そのものは消さない。 */ .fh-google-reviews .nsrev .nsrev__badge-count { display: none; } /* ------------------------------------------------------------------ * 見出しとリード サイト共通の .ns-tit(33px / SP 25px 明朝)に合わせる * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev .nsrev__title { font-family: var(--fh-serif); font-size: 33px; font-weight: 600; line-height: 1.4; letter-spacing: 0.8px; color: #333333; margin: 22px auto 14px; } .fh-google-reviews .nsrev .nsrev__lead { font-size: 16px; line-height: 1.7; color: #5b5550; max-width: 44em; } /* ------------------------------------------------------------------ * カード * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev .nsrev__card { border-radius: 6px; box-shadow: 0 8px 22px rgba(51, 55, 134, .07); } .fh-google-reviews .nsrev .nsrev__text { font-size: 15px; line-height: 1.85; } /* 長いクチコミの折りたたみ * * クチコミの長さは 31 字から 375 字までばらつく(2026-09-06 実測)。 * 横1行に並べるとカードの高さは一番長いものにそろうので、 * 短いカードの下に 500px 以上の空白ができる(港南台が最悪で 211px 対 766px)。 * 一定の行数を超えたものだけ畳み、「続きを読む」で全文を出す。 * * 畳むかどうかは JS(assets/js/reviews.js)が実測して決める。 * JS が動かないときは畳まない = 全文が出る(本文が読めなくなる方向には倒さない)。 * 本文は 1 文字も変えていない。 */ .fh-google-reviews .nsrev .nsrev__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--fh-rev-lines, 10); line-clamp: var(--fh-rev-lines, 10); overflow: hidden; margin-bottom: 8px; } .fh-google-reviews .nsrev .nsrev-readmore { align-self: flex-start; margin: 0 0 clamp(14px, 1.5vw, 18px); padding: 0; border: 0; background: none; color: var(--fh-navy); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.6; cursor: pointer; } .fh-google-reviews .nsrev .nsrev-readmore:hover { text-decoration: underline; } .fh-google-reviews .nsrev .nsrev__date, .fh-google-reviews .nsrev .nsrev__src { color: #8b8681; } .fh-google-reviews .nsrev .nsrev__by { border-top-color: #eeeeee; } /* イニシャルの丸。プラグイン既定は金茶のグラデーションなのでネイビーの単色にする */ .fh-google-reviews .nsrev .nsrev__avatar { background: var(--fh-navy); font-family: var(--fh-serif); } /* 「Googleで◯件すべてのクチコミを見る」 サイトのピルボタンと同系のネイビー */ .fh-google-reviews .nsrev .nsrev__more a { border: 1px solid var(--fh-navy); border-radius: 4px; color: var(--fh-navy); } .fh-google-reviews .nsrev .nsrev__more a:hover { background: #eaecf7; border-color: var(--fh-navy); } /* ------------------------------------------------------------------ * 半星(★4.x を「4個 + 半分」に見せる) * * プラグインは rating を round() して点灯数を決めるため、 * 4.6 と 4.4 が並ぶと 4.6 は 5個点灯・4.4 は 4個点灯になり、 * 実際の差(0.2)より大きく見劣りして見える。 * 5個目を薄い台座にして、その左半分に濃い星を重ねて 4.5 個に見せる。 * 対象は集約バッジの星だけ。カード1枚ずつの星は整数なので触らない。 * * 対象拠点(2026-09-06 実データ) 鶴ヶ峰 4.6 / 港南台 4.6 / 高津 4.4 * 対象外 湘南台 5.0 / 柏 5.0 (5個点灯のままにする) * * ★の値が変わったら必ずこのリストを見直すこと。 * 5.0 になった拠点に残っていると、5個目が半分に欠けたままになる。 * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev--profile-tsurugamine .nsrev__badge .nsrev__stars, .fh-google-reviews .nsrev--profile-konandai .nsrev__badge .nsrev__stars, .fh-google-reviews .nsrev--profile-takatsu .nsrev__badge .nsrev__stars { position: relative; --fh-star: clamp(16px, 1.6vw, 21px); } .fh-google-reviews .nsrev--profile-tsurugamine .nsrev__badge .nsrev__stars svg:nth-child(5) path, .fh-google-reviews .nsrev--profile-konandai .nsrev__badge .nsrev__stars svg:nth-child(5) path, .fh-google-reviews .nsrev--profile-takatsu .nsrev__badge .nsrev__stars svg:nth-child(5) path { fill: rgba(149, 102, 34, .22); } .fh-google-reviews .nsrev--profile-tsurugamine .nsrev__badge .nsrev__stars::after, .fh-google-reviews .nsrev--profile-konandai .nsrev__badge .nsrev__stars::after, .fh-google-reviews .nsrev--profile-takatsu .nsrev__badge .nsrev__stars::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: calc(var(--fh-star) / 2); width: calc(var(--fh-star) / 2); height: var(--fh-star); background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0a52e' d='M12%2017.27L18.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z'/%3E%3C/svg%3E") left top / var(--fh-star) var(--fh-star) no-repeat; } /* ------------------------------------------------------------------ * 統合セクション(湘南台・柏)の式場ラベル * * クチコミが少ない湘南台(4件)と柏(1件)は、その拠点の声に他の式場の声を * 足して 1 セクションにまとめている(2026-09-06 夜の嶋崎さん指示)。 * どの式場に寄せられた声かが分からないと取り違えるので、 * カード 1 枚ずつと集約バッジに式場名を出す。 * HTML を足しているのは inc/site-reviews.php の fh_nsrev_label_cards()。 * * プラグインのカードは縦の flex なので、そのままだと横いっぱいに伸びる。 * align-self で左端に寄せて、文字ぶんの幅だけの札にする。 * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev .nsrev__card > .fh-rev-hall { align-self: flex-start; margin: 0 0 clamp(9px, 1vw, 12px); padding: 3px 11px; border-radius: 12px; background: #eef0f8; color: var(--fh-navy); font-size: 11.5px; font-weight: 700; line-height: 1.7; letter-spacing: 0.4px; } /* 集約バッジの★がどの式場の評価かを明示する。 他の式場の声が混ざるセクションなので、これが無いと 6 枚ぶんの評価に見える。 */ .fh-google-reviews .nsrev .nsrev__badge-main .fh-rev-badge-hall { color: #5b5550; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.4px; } /* ------------------------------------------------------------------ * 「ファミリーホールへの声」(profile="group") * * 選抜した数件の平均と件数をプラグインが自動計算して出してしまうが、 * その数字は Google 上に実在しない(全社のリスティングが無い)ので * 集約バッジごと隠す。listing_url が空なので全件リンクは元から出ない。 * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev--profile-group .nsrev__badge { display: none; } /* 拠点セクションの下に続けて置くので、2つ目の上余白を詰めて一続きの帯に見せる。 0 にすると見出しの上マージンがセクションの外へ抜けて(マージンの相殺)、 間に地色の付いていない帯ができるので、わずかに残す。 */ .fh-google-reviews .nsrev + .nsrev .nsrev__inner { padding-top: clamp(10px, 1.2vw, 16px); } /* ------------------------------------------------------------------ * 横スライダー * * 3列グリッドのままだと、長文のクチコミが入った行だけカードが極端に高くなり、 * 同じ行の他のカードに大きな余白ができる(実測 鶴ヶ峰 1093字でカード高 2134px)。 * 横1行に流せば起きない。 * * 左右ナビ(.nsrev-nav)とラッパー(.nsrev-sliderwrap)は JS が実行時に作る。 * JS が動かなくても、この指定だけで指のスワイプとトラックパッドの横スクロールは効く。 * * .is-single はカードが1枚しか無い拠点(柏)に JS が付ける。 * 1枚だけを左端に置くと欠けて見えるので中央へ寄せる。 * (はみ出す複数枚に justify-content: center を当てると左端が掴めなくなるため、 * 1枚のときだけに限定している) * ------------------------------------------------------------------ */ .fh-google-reviews .nsrev-sliderwrap { position: relative; } @media (min-width: 981px) { /* 記事幅に縛らず左右へ広げる(カード約 3.7 枚が見える) */ .fh-google-reviews .nsrev-sliderwrap { margin-inline: calc((100% - min(1360px, 100vw - 48px)) / 2); } } .fh-google-reviews .nsrev .nsrev__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: clamp(14px, 1.6vw, 20px); padding: 4px 4px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fh-google-reviews .nsrev .nsrev__list::-webkit-scrollbar { display: none; } .fh-google-reviews .nsrev .nsrev__list > .nsrev__card { flex: 0 0 min(350px, 84vw); scroll-snap-align: center; } .fh-google-reviews .nsrev .nsrev__list.is-single { justify-content: center; } .fh-google-reviews .nsrev-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e7e2da; background: rgba(255, 255, 255, .96); color: #333333; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(31, 31, 31, .5); z-index: 2; transition: transform .2s, background-color .2s; } .fh-google-reviews .nsrev-nav:hover { background: #ffffff; transform: translateY(-50%) scale(1.06); } .fh-google-reviews .nsrev-nav--prev { left: -10px; } .fh-google-reviews .nsrev-nav--next { right: -10px; } /* ------------------------------------------------------------------ * SP(767px 以下はサイト全体のコンテンツ用ブレークポイント) * ------------------------------------------------------------------ */ @media screen and (max-width: 767px) { .fh-google-reviews .nsrev .nsrev__title { font-size: 25px; } .fh-google-reviews .nsrev .nsrev__lead { font-size: 15px; } .fh-google-reviews .nsrev .nsrev__card > .fh-rev-hall { font-size: 11px; } .fh-google-reviews .nsrev .nsrev__badge-main .fh-rev-badge-hall { font-size: 11.5px; } } @media screen and (max-width: 600px) { /* SP は指のスワイプで送る(次のカードが端に覗いているのが合図)。 矢印を置くとカードの上に重なって本文の左端が読めなくなるので出さない。 */ .fh-google-reviews .nsrev-nav { display: none; } }