/* belog オンラインショップ：お客様・美容師の声（横スライド）。名前はすべて voices・vc で始まる */
.voices {
  --vc-ink: #2f2925; --vc-ink2: #4f4943; --vc-mute: #8a837b;
  --vc-ground: var(--tint, #f7f2e8); /* 置かれた欄の背景色（製品ごとの色の帯）。イラストの白地をなじませる */
  --vc-stylist: #c9ae74;
  --vc-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --vc-en: "Cormorant Garamond", "Times New Roman", serif;
  --vc-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  max-width: 860px; margin: 64px auto 0;
}
.voices[hidden] { display: none !important; }
.voices__title { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 18px !important; font-family: var(--vc-mincho); font-size: 16px; letter-spacing: .12em; color: var(--vc-ink); text-align: center; }

.vc { position: relative; padding: 6px 0 8px; background: transparent; outline: none; }
.vc:focus-visible { box-shadow: 0 0 0 2px var(--vc-stylist); border-radius: 6px; }
.vc__viewport { overflow: hidden; touch-action: pan-y; }
.vc__track { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; transition: transform .45s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .vc__track { transition: none; } }

/* 1枚：左に人物、右に吹き出し（高さはそろう） */
.vc__slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 44px; box-sizing: border-box; }
/* イラストの上に「No.1 お客様の声」 */
.vc__person { margin: 0; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vc__who { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; text-align: center; }
.vc__who em { font-family: var(--vc-en); font-style: italic; font-size: 26px; letter-spacing: .03em; color: var(--b); filter: brightness(.8); }
.vc__who span { font-family: var(--vc-mincho); font-size: 12px; letter-spacing: .14em; color: var(--vc-ink); white-space: nowrap; padding: 0 2px 2px; background: linear-gradient(transparent 60%, var(--h) 0); }
.vc__pic { display: block; width: 100%; background: var(--vc-ground);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%); }
.vc__person img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.vc__slide { --b: #a9b8c4; --f: #fff; --h: rgba(169, 184, 196, .38); }
.vc__slide:nth-child(5n+2) { --b: #c9ae74; --f: #fff; --h: rgba(201, 174, 116, .36); }
.vc__slide:nth-child(5n+3) { --b: #a9b59b; --f: #fff; --h: rgba(169, 181, 155, .38); }
.vc__slide:nth-child(5n+4) { --b: #cfa89e; --f: #fff; --h: rgba(207, 168, 158, .36); }
.vc__slide:nth-child(5n+5) { --b: #ada5bf; --f: #fff; --h: rgba(173, 165, 191, .36); }
.vc__bubble { position: relative; padding: 14px 16px 14px; border: 1px solid var(--b); border-radius: 18px; background: var(--f); }
/* 吹き出しのしっぽ（人物の方へ） */
.vc__bubble::before, .vc__bubble::after { content: ''; position: absolute; left: -10px; top: 46%; width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; }
.vc__bubble::before { border-color: transparent var(--b) transparent transparent; left: -11px; }
.vc__bubble::after { border-color: transparent var(--f) transparent transparent; }

.vc__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px !important; }
.vc__label span { font-family: var(--vc-mincho); font-size: 15px; font-weight: 500; letter-spacing: .1em; color: var(--vc-ink); background: linear-gradient(transparent 62%, var(--h) 0); }
.vc__label small { font-size: 11.5px; letter-spacing: .06em; color: var(--vc-mute); }
.vc__text { margin: 0 !important; font-family: var(--vc-sans); font-size: 14px; line-height: 1.95; letter-spacing: .03em; color: var(--vc-ink2); }
.vc__sample { margin: 10px 0 0 !important; font-size: 10.5px; letter-spacing: .04em; color: #a0563e; }

/* 矢印・点 */
.vc__arrow { position: absolute; top: calc(50% - 22px); width: 32px; height: 32px; padding: 0; border: 1px solid rgba(47, 41, 37, .25); border-radius: 50%; background: var(--vc-ground); cursor: pointer; }
.vc__arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-top: 1px solid var(--vc-ink); border-right: 1px solid var(--vc-ink); }
.vc__arrow--prev { left: 6px; }
.vc__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.vc__arrow--next { right: 6px; }
.vc__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.vc__dots { display: flex; justify-content: center; gap: 2px; margin-top: 14px; }
.vc__dot { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.vc__dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #d8d1c5; transition: background-color .3s ease, transform .3s ease; }
.vc__dot[aria-current="true"]::before { background: var(--vc-ink); transform: scale(1.15); }
.vc__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* スマホ：矢印は下の点の両側へ。人物と吹き出しを広く */
@media (max-width: 600px) {
  .vc__slide { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); padding: 0 16px 0 10px; gap: 12px; }
  .vc__arrow { top: auto; bottom: 8px; }
  .vc__arrow--prev { left: calc(50% - 74px - 40px); }
  .vc__arrow--next { right: calc(50% - 74px - 40px); }
}
@media (max-width: 420px) {
  .vc { padding-top: 4px; }
  .vc__bubble { padding: 10px 12px 11px; border-radius: 14px; }
  .vc__text { font-size: 13.5px; line-height: 1.85; letter-spacing: .02em; }
  .vc__label span { font-size: 14px; }
  .vc__arrow { width: 28px; height: 28px; }
}
@media (min-width: 960px) {
  .vc__who em { font-size: 32px; }
  .vc__who span { font-size: 13px; }
  .vc { padding: 10px 0 12px; }
  .vc__slide { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 0 72px; }
  .vc__bubble { padding: 18px 26px 20px; border-radius: 22px; }
  .vc__text { font-size: 15px; }
  .vc__arrow { width: 38px; height: 38px; }
  .vc__arrow--prev { left: 16px; }
  .vc__arrow--next { right: 16px; }
}

/* 押せる範囲を44px以上に（見た目は同じ。2026-10-23） */
.vc__arrow::after { content: ''; position: absolute; inset: -8px; }
.vc__dot { width: 34px; height: 44px; }
@media (max-width: 600px) {
  .vc__dots { margin-top: 8px; }
  .vc__arrow { bottom: 9px; }
  .vc__arrow--prev { left: calc(50% - 89px - 40px); }
  .vc__arrow--next { right: calc(50% - 89px - 40px); }
}
@media (max-width: 600px) { .vc__arrow { bottom: 14px; } }
@media (max-width: 420px) { .vc__arrow { bottom: 16px; } }
/* 矢印の押せる範囲を確実に44px以上に（点やスライドより手前に） */
.vc__arrow { z-index: 2; }
.vc__arrow::after { inset: -10px; }
/* 次の製品の欄より手前に（矢印・点の押せる範囲が下で切れないように） */
.voices { position: relative; z-index: 1; }