@charset "UTF-8";
/* ==========================================================
   商品ページ共通の見た目改善（全商品）
   - Product/detail.twig（SP・PC）と Product/item_review.twig（SP・PC）が読み込む。
   - HTML・フォーム・計算の仕組みには触れず、文字・余白・色・並び順だけを変える。
   - 色は変数。商品ごとに変えたい場合は、その商品のCSSで
     #page_item_detail, #page_item_review { --gh-accent: ...; } のように上書きする。
   ========================================================== */
:root {
    --gh-accent: #3f8f46;       /* 見出しの線・枠・リンク */
    --gh-accent-soft: #eef6ef;  /* 選択中のコース・スクロール枠の背景 */
    --gh-title: #2b3a2e;        /* 見出しの文字 */
    --gh-text: #2b3036;
    --gh-muted: #6b737b;
    --gh-star: #f39a1e;
}

/* スクロールで移動したとき、固定ヘッダーに隠れないように */
#form1, #reviewBox, .gh-reviews { scroll-margin-top: 80px; }

/* ---------- 商品情報（内容量・飲み方・全成分）SP ---------- */
#page_item_detail .gBiko {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #333 !important;
    background: #f6f7f6 !important;
    border-radius: 8px;
    padding: 14px 16px !important;
}
#page_item_detail .gBiko.seibun { font-size: 14px !important; }

/* ---------- 購入パネル：選んでいるコースをはっきり（上＝#form1、下＝#form1_2） ---------- */
:is(#form1, #form1_2) .cartBox { border-radius: 12px; }
:is(#form1, #form1_2) .radioBox { border-radius: 8px; transition: background-color .2s; }
:is(#form1, #form1_2) .radioBox:has(input:checked) { background: var(--gh-accent-soft); box-shadow: inset 0 0 0 2px var(--gh-accent); }
:is(#form1, #form1_2) .radioBox input[type="radio"] { accent-color: var(--gh-accent); }
:is(#form1, #form1_2) tr:has(input[type="radio"]:checked) > td { background: var(--gh-accent-soft); }
:is(#form1, #form1_2) input[type="radio"] { accent-color: var(--gh-accent); }

/* ==========================================================
   口コミ：スマホ（#reviewBox）
   評価 → 見出し → 口コミ → レビューを書く の順。カード型。
   ========================================================== */
#reviewBox { display: flex; flex-direction: column; font-size: 15px; }
#reviewBox > .star       { order: 1; }
#reviewBox > .reviewTtl  { order: 2; }
#reviewBox > #reviewSc   { order: 3; }
#reviewBox > .rbtn1      { order: 4; margin-top: 16px; }
#reviewBox > .kome       { order: 5; }
#reviewBox > .star {
    background: #fff8ec; border: 1px solid #f6dcb3; border-radius: 12px;
    padding: 14px 12px; text-align: center; margin-bottom: 16px;
}
#reviewBox > .star .txt { display: block; font-size: 14px; font-weight: bold; color: var(--gh-text); }
#reviewBox .reviewTtl {
    background: none !important; border-left: 0 !important;
    font-size: 18px !important; font-weight: bold; color: var(--gh-title) !important;
    text-align: center; padding: 8px 0 4px !important; margin: 4px 0 10px;
}
#reviewBox .reviewTtl::after {
    content: ""; display: block; width: 40px; height: 3px; margin: 8px auto 0;
    background: var(--gh-accent); border-radius: 2px;
}
#reviewBox #reviewSc { max-height: none; height: auto; overflow: visible; }
#reviewBox .rvBox {
    background: #fff; border: 1px solid #e3e7ec; border-radius: 12px;
    padding: 14px 14px 12px; margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
#reviewBox .rvBox .str { color: var(--gh-star); font-size: 18px; letter-spacing: .08em; margin: 0 0 6px; }
#reviewBox .rvBox .txt { font-size: 15px !important; line-height: 1.85 !important; color: #333 !important; margin: 0 0 8px; letter-spacing: .02em; }
#reviewBox .rvBox .date,
#reviewBox .rvBox .date .name { font-size: 13px !important; color: #777 !important; margin: 0; }
#reviewBox .rvBox .date .name { margin-right: 8px; }
#reviewBox .review-button {
    display: block; text-align: center; background: #fff;
    border: 2px solid var(--gh-accent); color: var(--gh-accent) !important;
    border-radius: 999px; padding: 12px; font-size: 16px; font-weight: bold;
    text-decoration: none; margin: 12px auto 0; max-width: 360px;
}
/* 商品ページでは全件を枠内スクロール（件数は detail.twig の num_reviews） */
#page_item_detail #reviewBox #reviewSc {
    max-height: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 6px 4px 2px; border-radius: 12px; background: #f6f7f8;
    overscroll-behavior: contain;
}

/* ==========================================================
   口コミ：PC（.gh-reviews でページ下部に配置）
   ========================================================== */
.gh-reviews { max-width: 860px; margin: 48px auto 32px; }
.gh-reviews section, .gh-reviews .reviewBox { width: auto !important; max-width: 100%; } /* 共通CSSの固定幅を解除 */
.gh-reviews__summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px;
    background: #fff8ec; border: 1px solid #f6dcb3; border-radius: 14px;
    padding: 14px 20px; margin-bottom: 20px;
}
.gh-reviews__summary .star { margin: 0 !important; font-size: 17px !important; }
.gh-reviews__summary .reviewLink { display: flex; align-items: center; gap: 12px; }
.gh-reviews__summary .reviewLink .rbtn1 { margin: 0 !important; }
.gh-reviews__summary .reviewLink .f14 { font-size: 12px !important; color: #777; margin: 0; }
.gh-reviews .reviewBox .reviewBoxTtl {
    font-size: 24px !important; color: var(--gh-title) !important; text-align: center;
    border-left: 0; padding: 0;
}
.gh-reviews .reviewBox .reviewBoxTtl::after {
    content: ""; display: block; width: 48px; height: 3px; margin: 10px auto 0;
    background: var(--gh-accent); border-radius: 2px;
}
.gh-reviews .reviewBox .inner {
    max-height: none !important; height: auto !important; overflow: visible !important;
    width: auto !important; margin: 18px 0 0 !important;
}
.gh-reviews .reviewBox .inner > p.subArea {
    background: #fff !important;
    border: 1px solid #e3e7ec; border-bottom: 0; border-radius: 14px 14px 0 0;
    padding: 16px 24px 2px !important; margin: 16px 0 0 !important;
}
.gh-reviews .reviewBox .inner > p.subArea .gray { font-size: 13px !important; color: #777 !important; }
.gh-reviews .reviewBox .inner > p.txtArea {
    background: #fff;
    border: 1px solid #e3e7ec; border-top: 0; border-radius: 0 0 14px 14px;
    padding: 6px 24px 20px !important; margin: 0 !important;
    font-size: 16px !important; line-height: 1.9 !important; color: var(--gh-text) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}
.gh-reviews .reviewBox .inner > a {
    display: inline-block; margin: 24px 8px 0;
    border: 2px solid var(--gh-accent); border-radius: 999px; padding: 12px 48px;
    color: var(--gh-accent) !important; font-size: 16px; font-weight: bold; text-decoration: none;
}
.gh-reviews .reviewBox .inner { text-align: center; }
.gh-reviews .reviewBox .inner > p { text-align: left; }
/* 商品ページ（PC）は全件を枠内スクロール */
#page_item_detail .gh-reviews .reviewBox .inner {
    max-height: 640px !important; overflow-y: auto !important;
    padding: 0 12px 12px !important; background: #f6f7f8; border-radius: 14px;
    overscroll-behavior: contain;
}

/* PCの購入パネルの「お客様評価」→ 下の口コミ一覧へ */
.gh-starLink { cursor: pointer; }
.gh-starLink:hover { opacity: .85; }
.gh-starLink__more { margin-left: 10px; font-size: 14px; font-weight: bold; color: var(--gh-accent) !important; text-decoration: underline !important; white-space: nowrap; }

/* 口コミ枠の下の「スクロールで全件見られる」案内（枠からはみ出すときだけ表示） */
.gh-reviewHint { display: none; text-align: center; font-size: 13px; color: var(--gh-muted); margin: 8px 0 0; }
.gh-reviewHint.is-show { display: block; }

/* ==========================================================
   レビュー一覧ページ（/item/{商品}/review/N）
   ========================================================== */
.rvp { max-width: 860px; margin: 0 auto; padding: 8px 0 0; }
.rvp__back {
    display: inline-block; margin: 8px 0 4px; font-size: 14px; font-weight: bold;
    color: var(--gh-accent) !important; text-decoration: none !important;
}
.rvp__title {
    margin: 10px 0 18px; font-size: 24px; font-weight: bold; color: var(--gh-title); text-align: center; line-height: 1.4;
}
.rvp__title::after {
    content: ""; display: block; width: 48px; height: 3px; margin: 10px auto 0; background: var(--gh-accent); border-radius: 2px;
}
.rvp .gh-reviews { margin-top: 0; }
.rvp .gh-reviews .reviewBox .reviewBoxTtl { display: none; } /* 上の見出しと重複するため */
.rvp__buyTtl {
    margin: 40px auto 12px; max-width: 860px; text-align: center;
    font-size: 20px; font-weight: bold; color: var(--gh-title);
}
@media (max-width: 767px) {
    .rvp__title { font-size: 20px; margin-bottom: 14px; }
    .rvp__buyTtl { font-size: 18px; margin-top: 28px; }
}

/* ==========================================================
   定期コース 3つのポイント（Product/elements/teiki_points.twig）
   楽臭生活（product-template.css の teikipoints）と同じ見た目。色だけ商品ごと。
   ========================================================== */
.gh-teiki { max-width: 960px; margin: 40px auto; padding: 0 16px; }
.gh-teiki__title {
    display: flex; align-items: center; gap: 14px; justify-content: center;
    font-size: 24px; font-weight: 800; color: var(--gh-accent); margin: 0 0 22px; text-align: center; line-height: 1.3;
}
.gh-teiki__title::before, .gh-teiki__title::after { content: ""; flex: 1; height: 2px; background: var(--gh-accent); }
.gh-teiki__list { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.gh-teiki__item {
    position: relative; display: grid; grid-template-columns: 38px 1fr;
    background: var(--gh-accent-soft); border-radius: 8px; overflow: hidden; list-style: none;
}
.gh-teiki__num {
    display: flex; align-items: center; justify-content: center;
    background: var(--gh-accent); color: #fff; font-size: 22px; font-weight: 800;
}
.gh-teiki__body { position: relative; min-height: 128px; padding: 16px 112px 14px 18px; }
.gh-teiki__body img { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 90px; height: auto; }
.gh-teiki__itemTtl { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--gh-accent); line-height: 1.2; }
.gh-teiki__itemTxt { margin: 0; font-size: 16px; color: var(--gh-text); line-height: 1.7; }
.gh-pc { display: none; }
.gh-teiki__note {
    margin: 25px 0 0; padding: 15px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.4;
    background: #fff; border: 2px dashed var(--gh-accent); border-radius: 8px; color: var(--gh-text);
}
.gh-teiki__note span { color: #dd4c4e; }
.gh-teiki__sub { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--gh-muted); }
@media (min-width: 768px) {
    .gh-teiki__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .gh-teiki__item { display: flex; flex-direction: column; min-height: 311px; }
    .gh-teiki__num {
        background: none; color: var(--gh-accent); font-size: 28px; line-height: 1;
        border-top: 20px solid var(--gh-accent); padding-top: 6px;
        -webkit-text-stroke: 1px #fff; text-shadow: 0 0 1px var(--gh-accent);
    }
    .gh-teiki__body {
        display: grid; grid-template-rows: auto 90px 1fr; justify-items: center;
        padding: 6px 20px 20px; text-align: center; gap: 10px; min-height: 0;
    }
    .gh-teiki__body img { position: static; transform: none; width: 100px; align-self: center; }
    .gh-teiki__itemTtl { min-height: 56px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0; }
    .gh-teiki__itemTxt { text-align: left; font-size: 18px; }
    .gh-pc { display: inline; }
    .gh-teiki__title { font-size: 30px; }
    .gh-teiki__title::before, .gh-teiki__title::after { max-width: none; }
}

/* ==========================================================
   商品共通FV（Product/elements/fv/generic.twig）
   まるごと青魚（1505）のFVと同じ構成。色は商品ごとの --gh-*。
   ========================================================== */
.gh-fv { color: var(--gh-text); font-size: 16px; line-height: 1.75; margin: 0 0 24px; font-feature-settings: "palt"; }
.gh-fv p, .gh-fv ul { margin: 0; padding: 0; }
.gh-fv li { list-style: none; }
.gh-fv img { max-width: 100%; height: auto; display: block; }

/* 導入 */
.gh-fv__intro {
    text-align: center; padding: 28px 16px 22px;
    background: linear-gradient(180deg, var(--gh-accent-soft) 0%, #fff 100%);
}
.gh-fv__introTag {
    display: inline-block; position: relative; padding-left: 1.4em;
    font-size: 13px; font-weight: bold; letter-spacing: .12em; color: var(--gh-accent);
}
.gh-fv__introTag::before { content: ""; position: absolute; left: 0; top: 50%; width: 1em; height: 1px; background: currentColor; }
.gh-fv .gh-fv__introName {
    margin: 8px 0 0; padding: 0; border: 0; background: none;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(26px, 8vw, 48px); font-weight: bold; line-height: 1.3; letter-spacing: .1em; color: var(--gh-title);
}
.gh-fv .gh-fv__introName.is-long { font-size: clamp(20px, 5.6vw, 34px); letter-spacing: .04em; }
.gh-fv__introEn { margin-top: 6px !important; font-size: 11px; letter-spacing: .32em; color: var(--gh-muted); text-transform: uppercase; }
.gh-fv__introWave { display: block; width: 120px; height: 10px; margin: 14px auto 0; color: var(--gh-accent); opacity: .5; }

/* スライド */
.gh-fv__slider { position: relative; }
.gh-fv__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.gh-fv__track::-webkit-scrollbar { display: none; }
.gh-fv__slide {
    flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
    position: relative; overflow: hidden; aspect-ratio: 750 / 620;
}
.gh-fv__slide--main {
    background:
        radial-gradient(circle at 72% 55%, #fff 0, #fff 30%, rgba(255,255,255,0) 31%),
        linear-gradient(135deg, var(--gh-accent-soft) 0%, #fff 60%, var(--gh-accent-soft) 100%);
}
.gh-fv__mainText { position: absolute; left: 6%; top: 10%; width: 50%; z-index: 2; }
.gh-fv__label {
    display: inline-block; background: var(--gh-accent); color: #fff;
    font-size: 12px; font-weight: bold; line-height: 1.4; padding: 4px 12px; border-radius: 999px;
}
.gh-fv__catch {
    margin-top: 14px !important;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(22px, 6.6vw, 40px); font-weight: bold; line-height: 1.4; color: var(--gh-title);
}
.gh-fv__mainImg {
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    width: 40% !important; aspect-ratio: 1 / 1; object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .15));
}
.gh-fv__slide--text {
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    padding: 0 8%; color: #fff;
    background: linear-gradient(135deg, var(--gh-accent) 0%, var(--gh-title) 100%);
}
.gh-fv__slide--t2 { background: linear-gradient(135deg, var(--gh-title) 0%, var(--gh-accent) 100%); }
.gh-fv__slide--text::before {
    content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 12px; pointer-events: none;
}
.gh-fv__slideSub { font-size: 15px; font-weight: bold; opacity: .95; }
.gh-fv__slideMain {
    margin: 6px 0 !important;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(26px, 8vw, 40px); font-weight: bold; line-height: 1.3;
}
.gh-fv__slideMain strong { color: #ffe08a; font-size: 1.2em; }
.gh-fv__slideNote { font-size: 13px; opacity: .9; }
.gh-fv__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.gh-fv__dots button {
    pointer-events: auto; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .2); cursor: pointer; font-size: 0;
}
.gh-fv__dots button.is-active { background: var(--gh-accent); width: 22px; border-radius: 999px; }
.gh-fv__dots button span { display: none; }
.gh-fv__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0;
    background: rgba(255, 255, 255, .9); color: var(--gh-title); font-size: 26px; line-height: 34px;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.gh-fv__arrow--prev { left: 8px; }
.gh-fv__arrow--next { right: 8px; }
.gh-fv__slider.is-first .gh-fv__arrow--prev,
.gh-fv__slider.is-last .gh-fv__arrow--next { display: none; }

/* 本文 */
.gh-fv__body { padding: 18px 16px 0; display: flex; flex-direction: column; }
.gh-fv__lead { font-size: 16px; }
.gh-fv__review {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
    margin-top: 14px; padding: 10px 12px;
    background: #fff8ec; border: 1px solid #f6dcb3; border-radius: 10px;
}
.gh-fv__review .star { margin: 0 !important; font-size: 15px !important; }
.gh-fv__review .review-star { color: var(--gh-star); font-size: 18px; }
.gh-fv__review .reviewLink { display: none; }
.gh-fv__reviewLink { font-size: 15px; font-weight: bold; color: var(--gh-accent) !important; text-decoration: underline; }
.gh-fv__recommend { margin-top: 16px; background: #fff; border: 2px dashed var(--gh-accent); border-radius: 14px; padding: 14px 16px 10px; }
.gh-fv__recommendTtl {
    display: inline-block; font-size: 17px; font-weight: bold; color: var(--gh-title);
    padding-left: 10px; border-left: 5px solid var(--gh-accent); line-height: 1.3; margin-bottom: 4px !important;
}
.gh-fv__recommendTtl em { font-style: normal; color: var(--gh-accent); }
.gh-fv__recommend li {
    position: relative; padding: 8px 0 8px 30px; font-size: 15px; font-weight: bold;
    border-bottom: 1px dotted #ccd3db;
}
.gh-fv__recommend li:last-child { border-bottom: 0; }
.gh-fv__recommend li::before {
    content: ""; position: absolute; left: 2px; top: calc(8px + .3em); width: 18px; height: 18px; border-radius: 50%; background: var(--gh-accent);
}
.gh-fv__recommend li::after {
    content: ""; position: absolute; left: 8px; top: calc(8px + .3em + 3px); width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gh-fv__points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px !important; }
.gh-fv__points li {
    display: flex; align-items: center; gap: 10px;
    background: var(--gh-accent-soft); border-radius: 10px; padding: 10px; font-size: 14px; line-height: 1.45;
}
.gh-fv__pointNum {
    flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--gh-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px;
}
.gh-fv__points strong { color: var(--gh-title); font-size: 15px; }

@media (min-width: 768px) {
    .gh-fv {
        max-width: 1040px; margin: 0 auto 48px;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; align-items: start;
    }
    .gh-fv__intro { grid-column: 1 / -1; padding: 44px 0 40px; margin-bottom: 8px; background: none; }
    .gh-fv__introTag { font-size: 15px; }
    .gh-fv .gh-fv__introName { font-size: 48px; }
    .gh-fv__introWave { width: 160px; }
    .gh-fv__slider { grid-column: 1; }
    .gh-fv__track { border-radius: 18px; }
    .gh-fv__slide { aspect-ratio: 1 / 1; }
    .gh-fv__mainText { width: 56%; top: 8%; }
    .gh-fv__catch { font-size: 34px; }
    .gh-fv__mainImg { width: 52% !important; top: auto; bottom: 6%; transform: none; }
    .gh-fv__slideMain { font-size: 40px; }
    .gh-fv__arrow { top: calc((100% - 74px) / 2); }
    /* 点の代わりに見出し付きのタブ */
    .gh-fv__dots { position: static; justify-content: flex-start; gap: 10px; margin-top: 14px; }
    .gh-fv__dots button,
    .gh-fv__dots button.is-active {
        flex: 1; width: auto; height: auto; min-height: 60px; border-radius: 12px; padding: 8px 10px;
        background: var(--gh-accent-soft); border: 2px solid transparent; font-size: 13px; font-weight: bold;
        color: var(--gh-title); line-height: 1.35; opacity: .7;
    }
    .gh-fv__dots button span { display: block; }
    .gh-fv__dots button.is-active { border-color: var(--gh-accent); opacity: 1; }
    .gh-fv__body { grid-column: 2; padding: 4px 0 0; }
    .gh-fv__lead { font-size: 17px; line-height: 1.9; }
    .gh-fv__review { padding: 10px 18px; }
    .gh-fv__recommend { margin-top: 18px; padding: 16px 22px 10px; }
    .gh-fv__recommendTtl { font-size: 19px; }
    .gh-fv__recommend li { font-size: 17px; padding-top: 10px; padding-bottom: 10px; }
    .gh-fv__points { margin-top: 18px !important; }
}


/* FVの写真スライド（まるごと青魚と同じく既存ページの写真を使う） */
.gh-fv img.gh-fv__bg {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none;
    object-fit: cover; z-index: 0;
}
.gh-fv__slide--main.has-photo { background: #fff; }
.gh-fv__slide--main.has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 40%, rgba(255,255,255,0) 72%);
}
.gh-fv__slide--main.has-photo .gh-fv__catch { text-shadow: 0 1px 8px rgba(255,255,255,.9); }
.gh-fv img.gh-fv__pac {
    position: absolute; right: 5%; bottom: 6%; z-index: 2; width: 34% !important; max-height: 82%; object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .25));
}
.gh-fv__caption { position: relative; z-index: 2; }
.gh-fv__slide--text.has-photo { justify-content: flex-end; padding: 0; text-align: left; align-items: stretch; }
.gh-fv__slide--text.has-photo::before { content: none; }
.gh-fv__slide--text.has-photo .gh-fv__caption {
    padding: 56px 6% 34px; color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.72) 100%);
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
@media (min-width: 768px) {
    .gh-fv img.gh-fv__pac { width: 32% !important; right: 7%; bottom: 7%; }
    .gh-fv__slide--text.has-photo .gh-fv__caption { padding-bottom: 28px; }
}

/* ==========================================================
   共通の見出し・ボタン（下部パーツ）
   ========================================================== */
.gh-sectionTtl {
    display: flex; align-items: center; gap: 14px; justify-content: center;
    font-size: 22px; font-weight: 800; color: var(--gh-title); margin: 0 0 20px; text-align: center; line-height: 1.3;
}
.gh-sectionTtl::before, .gh-sectionTtl::after { content: ""; flex: 1; max-width: 120px; height: 2px; background: var(--gh-accent); }
.gh-moreBtn {
    display: block; width: fit-content; margin: 24px auto 0; padding: 12px 48px;
    border: 2px solid var(--gh-accent); border-radius: 999px; background: #fff;
    color: var(--gh-accent) !important; font-weight: bold; text-decoration: none !important;
}

/* よくある質問 */
.gh-faq { max-width: 860px; margin: 48px auto; padding: 0 16px; }
.gh-faq__list { display: grid; gap: 14px; }
.gh-faq__item { background: var(--gh-accent-soft); border-radius: 12px; overflow: hidden; }
.gh-faq__item summary {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none;
    font-size: 17px; font-weight: bold; color: var(--gh-text); line-height: 1.5;
}
.gh-faq__item summary::-webkit-details-marker { display: none; }
.gh-faq__item summary::after { content: "\FF0B"; margin-left: auto; color: var(--gh-accent); font-size: 20px; }
.gh-faq__item[open] summary::after { content: "\FF0D"; }
.gh-faq__q {
    flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 18px 0 22px 0; background: var(--gh-accent); color: #fff; font-size: 22px; font-weight: 800;
}
.gh-faq__a { position: relative; margin: 0 16px 16px; padding: 18px 18px 16px 52px; background: #fff; border-radius: 8px; }
.gh-faq__aMark { position: absolute; left: 18px; top: 14px; color: var(--gh-accent); font-size: 22px; font-weight: 800; }
.gh-faq__a p { margin: 0; font-size: 16px; line-height: 1.8; }

/* お届けコースの価格案内（parts/generic.twig の part='offer'）
   まるごと青魚・楽臭生活の価格枠と同じ形。色は商品ごとの --gh-*。 */
.gh-ofr { max-width: 860px; margin: 48px auto; padding: 0 16px; color: var(--gh-text); }
.gh-sp { display: inline; }
.gh-ofr__catch { margin: 0 0 18px; text-align: center; font-size: 24px; font-weight: 800; line-height: 1.4; color: var(--gh-title); }
.gh-ofr__benefits {
    display: flex; flex-direction: column; margin-bottom: 20px;
    background: var(--gh-accent-soft); border-radius: 12px; padding: 4px 16px;
}
.gh-ofr__benefits > div { padding: 12px 0; text-align: center; font-size: 15px; line-height: 1.5; }
.gh-ofr__benefits > div + div { border-top: 2px dotted #b9c2cc; }
.gh-ofr__benefits b { color: var(--gh-accent); font-size: 17px; }
.gh-ofr__main { background: var(--gh-accent-soft); border-radius: 12px; padding: 20px 16px; }
.gh-ofr__flex { display: flex; flex-direction: column; gap: 14px; }
.gh-ofr__tag {
    display: inline-block; margin-bottom: 6px; background: var(--gh-accent); color: #fff;
    font-size: 12px; font-weight: bold; padding: 3px 10px; border-radius: 5px;
}
.gh-ofr__plan {
    width: 100%; padding: 12px 14px; font-size: 16px; border: 2px solid var(--gh-accent); border-radius: 8px;
    background: #fff; color: var(--gh-text); appearance: auto;
}
.gh-ofr__bubble { position: relative; background: #fff; border-radius: 10px; padding: 14px; text-align: center; }
.gh-ofr__unit { font-size: 30px; font-weight: 800; color: var(--gh-accent); line-height: 1.2; }
.gh-ofr__unit span { font-size: 15px; color: var(--gh-text); margin-left: 2px; }
.gh-ofr__unitSub { display: inline-block; font-size: 13px !important; font-weight: 600; color: var(--gh-muted) !important; margin: 0 6px 0 0 !important; }
.gh-ofr__badges { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.gh-ofr__badge { color: #fff; padding: 4px 10px; border-radius: 5px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.gh-ofr__badge--off { background: #e98447; }
.gh-ofr__badge--ship { background: #dd4c4e; }
.gh-ofr__badge.is-none { background: #8a939b; }
.gh-ofr__total {
    display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0;
    background: #fff; border-radius: 8px; padding: 12px 16px; font-size: 15px;
}
.gh-ofr__totalPrice { font-size: 26px; font-weight: 800; color: var(--gh-accent); }
.gh-ofr__totalPrice span { font-size: 14px; color: var(--gh-text); margin-left: 2px; font-weight: 600; }
.gh-ofr__btn, .gh-ofr__onceBtn {
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
    font-size: 18px !important; font-weight: bold; line-height: 1.3; padding: 14px 32px; border-radius: 999px;
    text-decoration: none !important;
}
.gh-ofr__btn { background: #e3572b; color: #fff !important; box-shadow: 0 4px 0 #c4431b; }
.gh-ofr__once {
    display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px;
    background: #f0f0f0; border-radius: 12px; padding: 18px 16px;
}
.gh-ofr__onceText { text-align: center; }
.gh-ofr__onceTtl { margin: 0 0 4px; font-size: 17px; font-weight: bold; padding-bottom: 4px; border-bottom: 3px double #8a939b; }
.gh-ofr__onceDetail { margin: 0; font-size: 15px; color: var(--gh-muted); }
.gh-ofr__onceAction { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.gh-ofr__oncePrice { margin: 0; font-size: 22px; font-weight: 800; white-space: nowrap; }
.gh-ofr__oncePrice span { font-size: 14px; font-weight: 600; }
.gh-ofr__onceBtn { width: 100%; background: #fff; color: #4b5560 !important; border: 2px solid #9aa3ac; box-shadow: 0 3px 0 #c9ced4; }
.gh-ofr__note { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--gh-muted); }
@media (min-width: 768px) {
    .gh-sp { display: none; }
    .gh-ofr__catch { font-size: 30px; }
    .gh-ofr__benefits { flex-direction: row; padding: 14px 0; }
    .gh-ofr__benefits > div { flex: 1; padding: 0 12px; }
    .gh-ofr__benefits > div + div { border-top: 0; border-left: 2px dotted #b9c2cc; }
    .gh-ofr__main { padding: 30px 60px; }
    .gh-ofr__flex { flex-direction: row; align-items: flex-end; gap: 20px; }
    .gh-ofr__select { flex: 1; }
    .gh-ofr__bubble { flex: 0 0 260px; }
    .gh-ofr__btn { width: fit-content; min-width: 280px; margin-left: auto; }
    .gh-ofr__once { flex-direction: row; justify-content: space-between; padding: 20px 60px; }
    .gh-ofr__onceText { text-align: left; flex: 1; min-width: 0; }
    .gh-ofr__onceAction { flex-direction: row; width: auto; gap: 20px; }
    .gh-ofr__onceBtn { width: auto; min-width: 200px; }
}

/* こちらもおすすめ */
.gh-cross { max-width: 860px; margin: 48px auto; padding: 0 16px; }
.gh-cross__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gh-cross__item {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 14px;
    background: #fff; border: 1px solid #e3e7ec; border-radius: 12px; text-decoration: none !important; color: var(--gh-text) !important;
    transition: transform .15s, box-shadow .15s;
}
.gh-cross__item:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .08); }
.gh-cross__img { display: block; width: 100%; aspect-ratio: 1 / 1; }
.gh-cross__img img { width: 100%; height: 100%; object-fit: contain; }
.gh-cross__name { font-size: 13px; font-weight: bold; text-align: center; line-height: 1.4; }
@media (min-width: 768px) {
    .gh-sectionTtl { font-size: 28px; }
    .gh-cross__grid { gap: 24px; }
    .gh-cross__name { font-size: 15px; }
}

/* ==========================================================
   既存ページ（contents）の「お客様の声・認証・よくある質問」を楽臭生活の見た目に
   - 各商品の contents/{商品コード}.twig にある section.voice / section.safety / section.faq が対象
   - HTMLは変えず見た目だけ。商品ごとのCSSより優先させるため !important を多めに使用
   - 楽臭生活（1057）は別の部品名なので対象外
   ========================================================== */

/* ---------- お客様の声 ---------- */
#page_item_detail .itemCont section.voice {
    background: var(--gh-accent-soft) !important; background-image: none !important;
    padding: 40px 16px 32px !important; margin: 40px 0 !important; border-radius: 0;
}
#page_item_detail .itemCont section.voice .contTitle_wrap {
    background: none !important; padding: 0 !important; margin: 0 0 20px !important; height: auto !important; min-height: 0 !important; text-align: center;
}
#page_item_detail .itemCont section.voice .contTitle_wrap::before,
#page_item_detail .itemCont section.voice .contTitle_wrap::after { content: none !important; }
#page_item_detail .itemCont section.voice .contTitle_en {
    display: inline-block !important; position: static !important; margin: 0 0 10px !important; padding: 4px 14px !important;
    background: var(--gh-accent) !important; color: #fff !important; border-radius: 999px; font-size: 13px !important; letter-spacing: .1em;
}
#page_item_detail .itemCont section.voice .contTitle {
    position: static !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
    font-size: 22px !important; line-height: 1.5 !important; color: var(--gh-title) !important; text-align: center !important;
}
#page_item_detail .itemCont section.voice .contTitle span { color: var(--gh-accent) !important; }
#page_item_detail .itemCont section.voice .voice_list {
    max-width: 860px; margin: 0 auto !important; padding: 28px 22px !important;
    background: #fff !important; border: 0 !important; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
#page_item_detail .itemCont section.voice .voice_list > div {
    display: flex !important; flex-direction: column; gap: 10px;
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
#page_item_detail .itemCont section.voice .voice_list > div + div { margin-top: 26px !important; padding-top: 26px !important; border-top: 2px dotted #c9d2dc !important; }
#page_item_detail .itemCont section.voice .voice_list dt {
    order: 2; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important;
    background: none !important; border: 0 !important; color: var(--gh-accent) !important; font-size: 14px !important; font-weight: bold;
}
#page_item_detail .itemCont section.voice .voice_list dt::before,
#page_item_detail .itemCont section.voice .voice_list dt::after { content: none !important; }
#page_item_detail .itemCont section.voice .voice_list dd {
    order: 1; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
    font-size: 16px !important; line-height: 1.85 !important; color: var(--gh-text) !important;
}
#page_item_detail .itemCont section.voice .voice_list dd .strong {
    display: block; margin-bottom: 6px; font-size: 19px !important; font-weight: bold; line-height: 1.5;
    color: var(--gh-title) !important; background: none !important;
}
#page_item_detail .itemCont section.voice .note { margin: 14px 0 0 !important; text-align: center; font-size: 12px !important; color: var(--gh-muted) !important; }

/* ---------- 認証（世界基準での認証を取得） ---------- */
#page_item_detail .itemCont section.safety {
    background: var(--gh-accent-soft) !important; background-image: none !important;
    padding: 40px 16px 28px !important; margin: 40px 0 !important;
}
#page_item_detail .itemCont section.safety .safety_inner { background: none !important; padding: 0 !important; max-width: 860px; margin: 0 auto; }
#page_item_detail .itemCont section.safety .contTitle {
    margin: 0 0 20px !important; padding: 0 !important; background: none !important; border: 0 !important;
    font-size: 24px !important; line-height: 1.4 !important; color: var(--gh-title) !important; text-align: center !important;
}
#page_item_detail .itemCont section.safety .contTitle::before,
#page_item_detail .itemCont section.safety .contTitle::after { content: none !important; }
#page_item_detail .itemCont section.safety .contTitle .small { display: block; font-size: 15px !important; color: var(--gh-accent) !important; }
#page_item_detail .itemCont section.safety .safety_list { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; padding: 0 !important; background: none !important; }
#page_item_detail .itemCont section.safety .safety_list > div {
    margin: 0 !important; padding: 18px 20px !important; background: #fff !important; border: 0 !important;
    border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
#page_item_detail .itemCont section.safety .safety_list dt {
    margin: 0 0 6px !important; padding: 0 0 0 12px !important; background: none !important;
    border: 0 !important; border-left: 5px solid var(--gh-accent) !important;
    font-size: 22px !important; font-weight: 800; line-height: 1.3; color: var(--gh-text) !important;
}
#page_item_detail .itemCont section.safety .safety_list dt::before { content: none !important; }
#page_item_detail .itemCont section.safety .safety_list dt span { font-size: 12px !important; color: var(--gh-muted) !important; font-weight: normal; }
#page_item_detail .itemCont section.safety .safety_list dd { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.75; color: var(--gh-muted) !important; }
#page_item_detail .itemCont section.safety .lead {
    margin: 22px auto 0 !important; padding: 16px 20px !important; max-width: 640px;
    background: #fff !important; border: 2px dashed var(--gh-accent) !important; border-radius: 16px;
    font-size: 18px !important; font-weight: bold; line-height: 1.6 !important; color: var(--gh-accent) !important; text-align: center;
}
#page_item_detail .itemCont section.safety .note { max-width: 860px; margin: 16px auto 0 !important; padding: 0 !important; background: none !important; }
#page_item_detail .itemCont section.safety .note li { font-size: 12px !important; line-height: 1.6; color: var(--gh-muted) !important; list-style: none; }
@media (min-width: 768px) {
    #page_item_detail .itemCont section.voice, #page_item_detail .itemCont section.safety { padding: 56px 24px 40px !important; border-radius: 16px; }
    #page_item_detail .itemCont section.voice .contTitle { font-size: 28px !important; }
    #page_item_detail .itemCont section.voice .voice_list { padding: 40px 36px !important; }
    #page_item_detail .itemCont section.safety .contTitle { font-size: 30px !important; }
    #page_item_detail .itemCont section.safety .safety_list { flex-direction: row; gap: 20px; }
    #page_item_detail .itemCont section.safety .safety_list > div { flex: 1; text-align: center; }
    #page_item_detail .itemCont section.safety .safety_list dt { border-left: 0 !important; padding: 0 0 10px !important; border-bottom: 3px solid var(--gh-accent) !important; }
}

/* ---------- よくある質問 ---------- */
#page_item_detail .itemCont section.faq {
    background: none !important; background-image: none !important; padding: 40px 16px !important; margin: 40px auto !important; max-width: 860px;
}
#page_item_detail .itemCont section.faq .faqTitle {
    margin: 0 0 22px !important; padding: 0 !important; background: none !important; border: 0 !important;
    font-size: 24px !important; line-height: 1.3 !important; color: var(--gh-title) !important; text-align: center !important;
}
#page_item_detail .itemCont section.faq .faqTitle::before,
#page_item_detail .itemCont section.faq .faqTitle::after { content: none !important; }
#page_item_detail .itemCont section.faq .faqList { display: grid; gap: 16px; margin: 0 !important; padding: 0 !important; background: none !important; }
/* スマホ：チェックボックスで開閉する作り（.faqBox） */
#page_item_detail .itemCont section.faq .faqBox,
#page_item_detail .itemCont section.faq .faqList > div {
    margin: 0 !important; padding: 0 0 2px !important; background: var(--gh-accent-soft) !important; border: 0 !important; border-radius: 12px; overflow: hidden;
}
#page_item_detail .itemCont section.faq .faqBox label,
#page_item_detail .itemCont section.faq .faqList dt {
    display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 12px 40px 12px 12px !important;
    background: none !important; border: 0 !important; font-size: 17px !important; font-weight: bold; line-height: 1.5; color: var(--gh-text) !important;
}
#page_item_detail .itemCont section.faq .faqBox label > span,
#page_item_detail .itemCont section.faq .faqList dt > span {
    flex: 0 0 44px; height: 44px; display: flex !important; align-items: center; justify-content: center; position: static !important;
    border-radius: 18px 0 22px 0; background: var(--gh-accent) !important; color: #fff !important; font-size: 22px !important; font-weight: 800; margin: 0 !important;
}
#page_item_detail .itemCont section.faq .faqAnswer,
#page_item_detail .itemCont section.faq .faqList dd {
    position: relative; margin: 6px 14px 14px !important; padding: 16px 18px 14px 50px !important;
    background: #fff !important; border: 0 !important; border-radius: 8px; font-size: 16px !important; line-height: 1.8 !important; color: var(--gh-text) !important;
}
#page_item_detail .itemCont section.faq .faqAnswer > span,
#page_item_detail .itemCont section.faq .faqList dd > span {
    position: absolute !important; left: 16px; top: 12px; margin: 0 !important; background: none !important;
    color: var(--gh-accent) !important; font-size: 22px !important; font-weight: 800;
}
/* 商品ページ側の古い固定幅を解除（PCで左に細く寄るのを防ぐ） */
#page_item_detail .itemCont section.faq .faqList,
#page_item_detail .itemCont section.faq .faqList > div,
#page_item_detail .itemCont section.faq .faqBox,
#page_item_detail .itemCont section.safety .safety_inner,
#page_item_detail .itemCont section.safety .safety_list,
#page_item_detail .itemCont section.voice .voice_list { width: auto !important; max-width: 100%; float: none !important; box-sizing: border-box; }
#page_item_detail .itemCont section.safety .safety_list > div { width: auto !important; float: none !important; box-sizing: border-box; }
#page_item_detail .itemCont section.voice .voice_list { max-width: 860px; }
/* PCの開閉（parts/generic.twig のスクリプトが .gh-acc を付ける）：最初の1問だけ開く */
#page_item_detail .itemCont section.faq.gh-acc .faqList > div:not(.is-open) > dd { display: none !important; }
#page_item_detail .itemCont section.faq.gh-acc .faqList dt { cursor: pointer; position: relative; }
#page_item_detail .itemCont section.faq.gh-acc .faqList dt::after {
    content: "\FF0B"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--gh-accent); font-size: 22px; font-weight: bold;
}
#page_item_detail .itemCont section.faq.gh-acc .faqList > div.is-open > dt::after { content: "\FF0D"; }
/* スマホの開閉：閉じているときは答えの余白も0にする（元の作りは高さ0＋透明で隠している） */
#page_item_detail .itemCont section.faq .faqQuestion:not(:checked) ~ .faqAnswer {
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
@media (min-width: 768px) {
    #page_item_detail .itemCont section.faq .faqTitle { font-size: 30px !important; }
}

/* ==========================================================
   FV：モール用の商品紹介画像スライド・サムネイル・3つの特長
   ========================================================== */
.gh-fv__slide--image { aspect-ratio: 1 / 1; background: #fff; }
.gh-fv__slide--image picture, .gh-fv__slide--image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* スマホ：画像の下に点。PC：サムネイル */
.gh-fv__dots--thumbs { position: static; margin-top: 10px; }
.gh-fv__dots--thumbs button { background: #c9d0d6; }
.gh-fv__dots--thumbs button img { display: none; }
@media (min-width: 768px) {
    .gh-fv__dots.gh-fv__dots--thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
    .gh-fv__dots.gh-fv__dots--thumbs button,
    .gh-fv__dots.gh-fv__dots--thumbs button.is-active {
        width: auto; height: auto; min-height: 0; padding: 0; aspect-ratio: 1 / 1; overflow: hidden;
        border-radius: 8px; border: 2px solid transparent; background: #fff; opacity: .6;
    }
    .gh-fv__dots.gh-fv__dots--thumbs button.is-active { border-color: var(--gh-accent); opacity: 1; }
    .gh-fv__dots.gh-fv__dots--thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .gh-fv__slider:has(.gh-fv__dots--thumbs) .gh-fv__arrow { top: calc((100% - 110px) / 2); }
}

/* 3つの特長 */
.gh-fv__feats { order: 4; margin-top: 16px; }
.gh-fv__featsTtl {
    margin: 0 0 8px !important; font-size: 17px; font-weight: bold; color: var(--gh-title);
    padding-left: 10px; border-left: 5px solid var(--gh-accent); line-height: 1.3;
}
.gh-fv__featsTtl em { font-style: normal; color: var(--gh-accent); }
.gh-fv__feats ol { margin: 0; padding: 0; display: grid; gap: 6px; }
.gh-fv__feats li {
    list-style: none; display: flex; gap: 10px; align-items: center;
    background: var(--gh-accent-soft); border-radius: 10px; padding: 8px 12px;
}
.gh-fv__featTtl { margin: 0 !important; font-size: 16px; font-weight: bold; color: var(--gh-title); line-height: 1.45; }
.gh-fv__featTxt { margin: 2px 0 0 !important; font-size: 13px; line-height: 1.5; color: var(--gh-muted); }
@media (min-width: 768px) {
    .gh-fv__feats { margin-top: 18px; }
    .gh-fv__featsTtl { font-size: 19px; }
    .gh-fv__featTtl { font-size: 17px; }
}

/* 写真＋HTMLの文字のスライド（slides の photo） */
.gh-fv__slide--image { position: relative; overflow: hidden; }
.gh-fv__slide--image.has-caption .gh-fv__caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 64px 7% 26px; color: #fff; text-align: left;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.7) 100%);
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.gh-fv__slide--image.has-caption .gh-fv__slideMain { margin: 4px 0 !important; }
.gh-fv__imgNote {
    position: absolute; right: 8px; top: 8px; z-index: 2;
    font-size: 10px; color: #fff; background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 3px;
}

/* 並び順：説明 → 特長 → こんな方におすすめ → 口コミ（PCの order もこの順に） */
.gh-fv__body > .gh-fv__lead { order: 1; }
.gh-fv__body > .gh-fv__points, .gh-fv__body > .gh-fv__feats { order: 2; margin-top: 16px !important; }
.gh-fv__body > .gh-fv__recommend { order: 3; }
.gh-fv__body > .gh-fv__review { order: 4; margin-top: 16px; }
/* 画像付きの特長タイル（まるごと青魚と同じ形） */
.gh-fv__points--icon li { gap: 10px; padding: 10px; }
.gh-fv__points--icon picture { flex: 0 0 52px; }
.gh-fv__points--icon img { width: 52px !important; height: 52px !important; border-radius: 50%; object-fit: cover; }
.gh-fv__points--icon span { font-size: 13px; line-height: 1.45; }
.gh-fv__points--icon strong { display: inline-block; font-size: 16px; color: var(--gh-title); }
@media (min-width: 768px) {
    .gh-fv__points--icon { grid-template-columns: repeat(2, 1fr); }
    .gh-fv__points--icon picture { flex-basis: 60px; }
    .gh-fv__points--icon img { width: 60px !important; height: 60px !important; }
    .gh-fv__points--icon span { font-size: 14px; }
    .gh-fv__points--icon strong { font-size: 17px; }
}