/* ============================================================
   Google Reviews Plugin (.wp-gr.rpi) - Trustindex風カスタマイズ
   v2.2  Googleバッジを前面に (z-index 9999 + isolation:isolate)
   ============================================================ */

/* -------- 0) プラグインを含む cont-wrap 自体を 1200px に制限 --------
   親のレイアウトが .is-layout-constrained で効かない場合の保険 */
.cont-wrap:has(> .wp-gr.rpi.wpac),
.is-layout-constrained:has(> .wp-gr.rpi.wpac),
.wp-block-group:has(> .wp-gr.rpi.wpac) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* -------- 1) ウィジェット自身にも複数セレクタで max-width 強制 -------- */
.wp-gr.rpi.wpac,
div.wp-gr.rpi.wpac,
body .wp-gr.rpi.wpac,
html body .wp-gr.rpi.wpac,
.is-layout-constrained > .wp-gr.rpi.wpac,
.cont-wrap > .wp-gr.rpi.wpac,
.wp-block-group > .wp-gr.rpi.wpac {
    --star-color: #f6bb06;
    --rev-color: #ffffff;
    background: transparent !important;
    color: #000000 !important;
    font-family: inherit !important;
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
}

.wp-gr.rpi.wpac,
.wp-gr.rpi.wpac *,
.wp-gr.rpi.wpac .wp-google-name,
.wp-gr.rpi.wpac .wp-google-text,
.wp-gr.rpi.wpac .wp-google-time {
    font-family: inherit !important;
}

/* -------- 2) grw-row の全サイズバリアントを100%幅に統一 -------- */
.wp-gr.rpi > .grw-row,
.wp-gr.rpi .grw-row,
.wp-gr.rpi .grw-row-xs,
.wp-gr.rpi .grw-row-x,
.wp-gr.rpi .grw-row-s,
.wp-gr.rpi .grw-row-m,
.wp-gr.rpi .grw-row-l,
.wp-gr.rpi .grw-row-xl,
.wp-gr.rpi [class*="grw-row-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;   /* ←インライン style="padding-bottom:7.99px" を無効化 */
    display: block !important;
    overflow: visible !important;
    position: relative !important;
}

/* -------- 3) スライダーコンテナ類も100%幅で揃える -------- */
.wp-gr.rpi .rpi-slides-root,
.wp-gr.rpi .grw-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
}

.wp-gr.rpi .grw-content-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
}

/* -------- 4) スライドトラック：flex + 上下padding -------- */
.wp-gr.rpi .rpi-slides,
.wp-gr.rpi .rpi-slides.grw-reviews,
.wp-gr.rpi .rpi-slides-bite,
div.wp-gr.rpi div.rpi-slides {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 56px 0 10px 0 !important;   /* 上にアイコンはみ出し分 */
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: transparent !important;
}

/* -------- 5) 1枚のスライド：ブレークポイントごとに明示幅 -------- */
.wp-gr.rpi .rpi-slide.grw-review {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: transparent !important;
}

@media (min-width: 480px) {
    .wp-gr.rpi .rpi-slide.grw-review {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}
@media (min-width: 768px) {
    .wp-gr.rpi .rpi-slide.grw-review {
        flex-basis: 33.3333% !important;
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }
}
@media (min-width: 1024px) {
    .wp-gr.rpi .rpi-slide.grw-review {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

/* -------- 6) カード本体：背景を白で強制 -------- */
.wp-gr.rpi .grw-review-inner,
.wp-gr.rpi .rpi-slide .grw-review-inner,
.wp-gr.rpi .rpi-slide .grw-review-inner.grw-backgnd,
.wp-gr.rpi .grw-backgnd,
div.wp-gr.rpi div.grw-review-inner {
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 !important;
    box-shadow: 1px 4px 10px 0 rgba(0, 0, 0, 0.1),
                0 0 2px 0 rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    color: #000000 !important;
    overflow: visible !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    isolation: isolate !important;            /* ← 独立した stacking context を作る */
}

.wp-gr.rpi .grw-review-inner * {
    box-sizing: border-box !important;
}

/* 一部ページで wpautop により挿入される <p> タグを
   レイアウト上透明化して、子要素が直接の子のように振る舞うようにする */
.wp-gr.rpi .grw-review-inner > p,
div.wp-gr.rpi div.grw-review-inner > p,
html body .wp-gr.rpi .grw-review-inner > p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* 念のため svg と stars はより緩いセレクタ (descendant) でも届くように */
.wp-gr.rpi .grw-review-inner svg,
html body .wp-gr.rpi.wpac .grw-review-inner svg {
    position: absolute !important;
    width: 26px !important;
    height: 26px !important;
    top: 5px !important;
    left: calc(50% + 5px) !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    padding: 3px !important;
    border: 2px solid #ffffff !important;
    box-sizing: content-box !important;
    z-index: 9999 !important;
    display: block !important;
    margin: 0 !important;
}

/* -------- 7) ヘッダー領域（画像・名前・日付）を縦積み中央 -------- */
.wp-gr.rpi .grw-review-inner > .rpi-flx.rpi-row12-center,
div.wp-gr.rpi div.grw-review-inner > div.rpi-flx.rpi-row12-center,
body .wp-gr.rpi .grw-review-inner > .rpi-flx.rpi-row12-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    position: relative !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    text-align: center !important;
}

/* プロフィール画像：カード上部から -52px
   親の flex が効かない環境でも自分で中央寄せできるよう margin auto に
   テーマCSSに負けないよう html body + 親クラスを含めた超高 specificity セレクタ */
.wp-gr.rpi.wpac .grw-img-wrap,
.wp-gr.rpi .grw-img-wrap,
div.wp-gr.rpi div.grw-img-wrap,
body .wp-gr.rpi .grw-img-wrap,
html body .wp-gr.rpi.wpac .grw-img-wrap,
html body .sec-box .wp-gr.rpi .grw-img-wrap,
html body .alignfull .wp-gr.rpi .grw-img-wrap,
html body .is-layout-flow .wp-gr.rpi .grw-img-wrap,
html body .wp-gr.rpi.wpac .rpi-slide .grw-img-wrap {
    margin: -52px auto 15px auto !important;   /* ← 自己中央寄せ */
    padding: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    position: relative !important;
    flex: 0 0 64px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: block !important;
    float: none !important;
    text-align: center !important;
    box-sizing: content-box !important;
}

.wp-gr.rpi .grw-img-wrap .grw-img,
.wp-gr.rpi.wpac .grw-img-wrap img.grw-img,
html body .wp-gr.rpi.wpac .grw-img-wrap .grw-img,
html body .sec-box .wp-gr.rpi .grw-img-wrap img,
html body .alignfull .wp-gr.rpi .grw-img-wrap img,
html body .is-layout-flow .wp-gr.rpi .grw-img-wrap img {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: content-box !important;
}

/* 名前＋日付カラム */
.wp-gr.rpi .grw-review-inner > .rpi-flx.rpi-row12-center > .rpi-flx.rpi-col6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.wp-gr.rpi .wp-google-name,
.wp-gr.rpi a.wp-google-name {
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.wp-gr.rpi .wp-google-name:hover {
    text-decoration: underline !important;
    color: #000000 !important;
}

.wp-gr.rpi .wp-google-time {
    color: #8a8a8a !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    display: block !important;
}

/* -------- 8) Googleバッジ（カード末尾のsvg）
   テーマCSSに負けないよう html body + 親クラス + role 属性も含めた超高 specificity */
.wp-gr.rpi .grw-review-inner > svg,
div.wp-gr.rpi div.grw-review-inner > svg,
body .wp-gr.rpi .grw-review-inner > svg,
.wp-gr.rpi.wpac .grw-review-inner > svg,
.rpi-slide > .grw-review-inner > svg,
html body .wp-gr.rpi.wpac .grw-review-inner > svg,
html body .sec-box .wp-gr.rpi .grw-review-inner > svg,
html body .alignfull .wp-gr.rpi .grw-review-inner > svg,
html body .is-layout-flow .wp-gr.rpi .grw-review-inner > svg,
html body .wp-gr.rpi.wpac .grw-review-inner > svg[role="none"],
html body .wp-gr.rpi.wpac .rpi-slide .grw-review-inner > svg {
    position: absolute !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    top: 5px !important;                     /* プロフィール画像の右下に重ねる */
    left: calc(50% + 5px) !important;
    right: auto !important;
    bottom: auto !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    padding: 3px !important;
    border: 2px solid #ffffff !important;
    box-sizing: content-box !important;
    z-index: 9999 !important;                /* ← プロフィール画像より前面に */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    transform: none !important;
}

/* -------- 9) 星 -------- */
.wp-gr.rpi .rpi-stars {
    display: block !important;
    margin: 0 auto 10px auto !important;
    text-align: center !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 18px !important;
    width: auto !important;
    color: var(--star-color, #f6bb06) !important;
    letter-spacing: 1px !important;
    flex: 0 0 auto !important;
}

.wp-gr.rpi .rpi-stars::before {
    color: var(--star-color, #f6bb06) !important;
}

/* -------- 10) 本文（4行省略） -------- */
.wp-gr.rpi .grw-review-inner > .rpi-flx.rpi-col4 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.wp-gr.rpi .wp-google-feedback {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
}

.wp-gr.rpi .wp-google-feedback.grw-scroll {
    overflow: hidden !important;
}

.wp-gr.rpi .wp-google-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 21.75px !important;
    color: #000000 !important;
    text-align: center !important;
    font-style: normal !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: calc(21.75px * 4) !important;
}

.wp-gr.rpi .wp-google-text.grw-expanded {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
}

/* -------- 11) 「続きを読む」 -------- */
.wp-gr.rpi .grw-read-more {
    display: block !important;
    padding: 8px 0 0 0 !important;
    margin: 0 !important;
    margin-top: auto !important;
    text-align: center !important;
    color: #000000 !important;
    opacity: 0.5 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: opacity 300ms ease-out !important;
    background: transparent !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}

.wp-gr.rpi .grw-read-more:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
    color: #000000 !important;
}

/* ============================================================
   12) ナビゲーション矢印 (PC表示 / SP非表示)
   ============================================================ */
.wp-gr.rpi .rpi-ltgt {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    outline: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 0 !important;
    transition: all 200ms ease-out !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
    display: none !important;               /* デフォルトは非表示 (SP) */
}

/* PC時のみ矢印を表示 (Trustindexと同じ >= 1024px) */
@media (min-width: 1024px) {
    .wp-gr.rpi .rpi-ltgt,
    .wp-gr.rpi .rpi-lt.grw-prev,
    .wp-gr.rpi .rpi-gt.grw-next {
        display: block !important;
    }
}

.wp-gr.rpi .rpi-lt.grw-prev { left: 4px !important; right: auto !important; }
.wp-gr.rpi .rpi-gt.grw-next { right: 4px !important; left: auto !important; }

.wp-gr.rpi .rpi-ltgt::before {
    content: "" !important;
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    border-style: solid !important;
    border-width: 0 0 2px 2px !important;
    border-color: #5E5E5E !important;
    top: 50% !important;
    left: 50% !important;
    background: transparent !important;
    transition: all 200ms ease-out !important;
}

.wp-gr.rpi .rpi-ltgt::after { display: none !important; }

.wp-gr.rpi .rpi-lt.grw-prev::before { transform: translate(-30%, -50%) rotate(45deg) !important; }
.wp-gr.rpi .rpi-gt.grw-next::before { transform: translate(-70%, -50%) rotate(-135deg) !important; }

.wp-gr.rpi .rpi-ltgt:hover,
.wp-gr.rpi .rpi-ltgt:focus {
    background-color: #4d4d4d !important;
    border-color: #272727 !important;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.05) !important;
}

.wp-gr.rpi .rpi-ltgt:hover::before,
.wp-gr.rpi .rpi-ltgt:focus::before {
    border-color: #ffffff !important;
}

/* ============================================================
   13) ドット
   ============================================================ */
.wp-gr.rpi .rpi-dots-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

.wp-gr.rpi .rpi-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    height: auto !important;
    width: auto !important;
}

.wp-gr.rpi .rpi-dots .rpi-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(94, 94, 94, 0.35) !important;
    cursor: pointer !important;
    font-size: 0 !important;
    color: transparent !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.wp-gr.rpi .rpi-dots .rpi-dot:hover {
    background: rgba(94, 94, 94, 0.6) !important;
}

.wp-gr.rpi .rpi-dots .rpi-dot.active,
.wp-gr.rpi .rpi-dots .rpi-dot.active.s1 {
    width: 22px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: #5E5E5E !important;
    cursor: default !important;
}

.wp-gr.rpi .rpi-dots .rpi-dot.s1,
.wp-gr.rpi .rpi-dots .rpi-dot.s2,
.wp-gr.rpi .rpi-dots .rpi-dot.s3 {
    width: 8px !important;
    height: 8px !important;
    transform: none !important;
}

/* ============================================================
   14) SP時の has-global-padding 左右余白の適用
   ============================================================ */
@media (max-width: 1000px) {
    .has-global-padding {
        padding-right: var(--wp--preset--spacing--40) !important;
        padding-left: var(--wp--preset--spacing--40) !important;
    }
}