#pan-chan-review-widget {
--pcr-green: #00aa6c;
--pcr-dark: #222;
--pcr-border: #e8e8e8;
width: 100%;
max-width: 1200px;
margin: 0 auto;
font-family: Arial, "Noto Sans JP", sans-serif;
color: var(--pcr-dark);
}
#pan-chan-review-widget,
#pan-chan-review-widget *,
#pan-chan-review-widget *::before,
#pan-chan-review-widget *::after {
box-sizing: border-box;
}
#pan-chan-review-widget .pcr-layout {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 22px;
align-items: center;
}
#pan-chan-review-widget .pcr-summary {
padding: 8px 0;
}
#pan-chan-review-widget .pcr-summary h3 {
font-size: 25px;
line-height: 1.4;
margin: 0 0 15px;
font-weight: 700;
}
#pan-chan-review-widget .pcr-stars {
color: var(--pcr-green);
font-size: 24px;
letter-spacing: 1px;
line-height: 1.3;
}
#pan-chan-review-widget .pcr-summary strong {
font-size: 13px;
}
#pan-chan-review-widget .pcr-summary p {
color: #666;
font-size: 14px;
line-height: 1.7;
margin: 10px 0;
}
#pan-chan-review-widget .pcr-tripadvisor {
display: inline-block;
background: var(--pcr-green);
color: #fff !important;
padding: 9px 15px;
border-radius: 5px;
text-decoration: none !important;
font-size: 14px;
font-weight: 700;
}
#pan-chan-review-widget .pcr-main {
min-width: 0;
}
#pan-chan-review-widget .pcr-carousel {
position: relative;
padding: 0 22px;
}
#pan-chan-review-widget .pcr-viewport {
width: 100%;
overflow: hidden;
touch-action: pan-y;
}
#pan-chan-review-widget .pcr-track {
display: flex;
gap: 14px;
align-items: stretch;
transition: transform 600ms ease;
}
#pan-chan-review-widget .pcr-card {
flex: 0 0 calc((100% - 28px) / 3);
min-width: 0;
padding: 17px;
background: #fff;
border: 1px solid var(--pcr-border);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
#pan-chan-review-widget .pcr-card-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
#pan-chan-review-widget .pcr-avatar {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: #e9f5ef;
color: #21724e;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
#pan-chan-review-widget .pcr-name {
font-size: 15px;
font-weight: 700;
overflow-wrap: anywhere;
}
#pan-chan-review-widget .pcr-card-stars {
color: var(--pcr-green);
font-size: 17px;
letter-spacing: 1px;
margin-bottom: 10px;
}
#pan-chan-review-widget .pcr-title {
font-size: 15px;
font-weight: 700;
line-height: 1.6;
margin: 0 0 8px;
}
#pan-chan-review-widget .pcr-text {
color: #444;
font-size: 14px;
line-height: 1.8;
margin: 0;
overflow-wrap: anywhere;
}
#pan-chan-review-widget .pcr-example {
display: inline-block;
color: #777;
font-size: 11px;
margin-top: 12px;
}
#pan-chan-review-widget .pcr-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 34px;
height: 34px;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
color: #333;
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 0 3px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
#pan-chan-review-widget .pcr-arrow:hover {
background: var(--pcr-green);
color: #fff;
}
#pan-chan-review-widget .pcr-prev {
left: 0;
}
#pan-chan-review-widget .pcr-next {
right: 0;
}
#pan-chan-review-widget .pcr-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 15px 22px 0;
}
#pan-chan-review-widget .pcr-dots {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
#pan-chan-review-widget .pcr-dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d5d5d5;
cursor: pointer;
}
#pan-chan-review-widget .pcr-dot.is-active {
width: 20px;
border-radius: 5px;
background: var(--pcr-green);
}
#pan-chan-review-widget .pcr-bottom a {
color: #16865b !important;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
}
@media (max-width: 1024px) {
#pan-chan-review-widget .pcr-layout {
grid-template-columns: 155px minmax(0, 1fr);
gap: 14px;
}
#pan-chan-review-widget .pcr-card {
flex-basis: calc((100% - 14px) / 2);
}
}
@media (max-width: 767px) {
#pan-chan-review-widget .pcr-layout {
grid-template-columns: minmax(0, 1fr);
gap: 15px;
}
#pan-chan-review-widget .pcr-summary {
text-align: center;
}
#pan-chan-review-widget .pcr-summary h3 {
font-size: 21px;
margin-bottom: 8px;
}
#pan-chan-review-widget .pcr-carousel {
padding: 0 19px;
}
#pan-chan-review-widget .pcr-card {
flex-basis: 100%;
padding: 15px;
}
#pan-chan-review-widget .pcr-bottom {
justify-content: center;
flex-wrap: wrap;
margin: 15px 19px 0;
}
#pan-chan-review-widget .pcr-arrow {
width: 30px;
height: 30px;
}
}
@media (prefers-reduced-motion: reduce) {
#pan-chan-review-widget .pcr-track {
transition: none;
}
}
(function () {
"use strict";
function initPanChanReviews() {
const root = document.getElementById(
"pan-chan-review-widget"
);
if (!root || root.dataset.pcrReady === "true") {
return;
}
const track = root.querySelector(".pcr-track");
const viewport = root.querySelector(".pcr-viewport");
const dotsBox = root.querySelector(".pcr-dots");
const prevBtn = root.querySelector(".pcr-prev");
const nextBtn = root.querySelector(".pcr-next");
if (!track || !viewport || !dotsBox ||
!prevBtn || !nextBtn) return;
root.dataset.pcrReady = "true";
// DATA CONTOH, BUKAN REVIEW ASLI TRIPADVISOR.
// Ganti dengan review yang telah diverifikasi.
const reviews = [
{
name: "サンプル 1",
title: "親切で丁寧な対応",
text: "スタッフが親切で、ツアーについて分かりやすく説明してくれました。安心して観光を楽しめました。"
},
{
name: "サンプル 2",
title: "楽しい一日になりました",
text: "移動中も快適に過ごせて、景色や観光スポットを満喫できました。また利用したいです。"
},
{
name: "サンプル 3",
title: "思い出に残るツアー",
text: "素敵な場所を訪れることができ、写真もたくさん撮れました。充実した一日でした。"
},
{
name: "サンプル 4",
title: "安心して参加できました",
text: "案内が分かりやすく、旅行中もスムーズに行動できました。初めての方にもおすすめです。"
},
{
name: "サンプル 5",
title: "ガイドの対応が良かった",
text: "質問にも丁寧に答えてくれて、現地のことも知ることができました。楽しい時間でした。"
},
{
name: "サンプル 6",
title: "景色がとてもきれい",
text: "美しい景色を楽しみながら、ゆったりと観光できました。バリ旅行の良い思い出になりました。"
},
{
name: "サンプル 7",
title: "スムーズな観光でした",
text: "移動や観光の流れが分かりやすく、時間を有効に使えました。ありがとうございました。"
},
{
name: "サンプル 8",
title: "また参加したいです",
text: "楽しい雰囲気の中で観光できました。スタッフの気配りもあり、満足できる一日でした。"
},
{
name: "サンプル 9",
title: "初めてのバリ旅行におすすめ",
text: "行きたい場所を楽しめて、バリの魅力を感じられました。良い思い出ができました。"
},
{
name: "サンプル 10",
title: "充実した観光体験",
text: "見どころを楽しみながら、快適に過ごせました。旅行の計画を立てる際にもおすすめです。"
}
];
let position = 0;
let autoTimer = null;
function perPage() {
if (window.innerWidth <= 767) return 1;
if (window.innerWidth <= 1024) return 2;
return 3;
}
function maxPosition() {
return Math.max(0, reviews.length - perPage());
}
function makeCard(review) {
const card = document.createElement("article");
card.className = "pcr-card";
const top = document.createElement("div");
top.className = "pcr-card-top";
const avatar = document.createElement("div");
avatar.className = "pcr-avatar";
avatar.textContent = "旅";
const name = document.createElement("div");
name.className = "pcr-name";
name.textContent = review.name;
top.append(avatar, name);
const stars = document.createElement("div");
stars.className = "pcr-card-stars";
stars.textContent = "★★★★★";
stars.setAttribute("aria-label", "表示用の星");
const title = document.createElement("h4");
title.className = "pcr-title";
title.textContent = review.title;
const description = document.createElement("p");
description.className = "pcr-text";
description.textContent = review.text;
const label = document.createElement("span");
label.className = "pcr-example";
label.textContent = "表示サンプル・実際の口コミではありません";
card.append(top, stars, title, description, label);
return card;
}
reviews.forEach(function (review) {
track.appendChild(makeCard(review));
});
function getStep() {
const card = track.querySelector(".pcr-card");
if (!card) return 0;
const gap = parseFloat(
window.getComputedStyle(track).gap
) || 0;
return card.getBoundingClientRect().width + gap;
}
function update() {
position = Math.max(
0,
Math.min(position, maxPosition())
);
track.style.transform =
"translate3d(" +
(-position * getStep()) +
"px,0,0)";
dotsBox.innerHTML = "";
for (let i = 0; i = maxPosition()
? 0 : position + 1;
update();
}
function prev() {
position = position 40 &&
Math.abs(dx) > Math.abs(dy)) {
if (dx < 0) next();
else prev();
restartAuto();
}
}, { passive: true });
window.addEventListener("resize", update);
document.addEventListener(
"visibilitychange",
function () {
if (document.hidden) stopAuto();
else startAuto();
}
);
update();
startAuto();
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
initPanChanReviews,
{ once: true }
);
} else {
initPanChanReviews();
}
})();
