/* ベースのタイポグラフィとリセット */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* 縦書きのクラス（必要に応じて利用） */
.vertical-text {
    writing-mode: vertical-rl;
}

/* テキストシャドウのカスタマイズ */
.text-shadow-sm {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.text-shadow-md {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 五行アイコンの回転アニメーション */
@keyframes spin-custom {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-custom {
    animation: spin-custom 12s linear infinite;
}

/* レスポンシブ調整用のユーティリティ */
@media (max-width: 640px) {
    header h1 {
        font-size: 1.75rem;
        line-height: 1.5;
    }
}
/* ロードマップの数字円のデザイン微調整 */
.absolute.left-0.top-0.w-11.h-11 {
    font-size: 1.1rem;
    line-height: 1;
}

/* ロードマップ：各ステップのホバー効果（任意） */
[data-purpose="roadmap-step"]:hover {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

/* モバイルでのテキスト可読性向上 */
@media (max-width: 640px) {
    .pl-14 {
        padding-left: 3.5rem;
    }
}
.reviews-marquee {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.reviews-marquee.is-dragging {
    cursor: grabbing;
}

.reviews-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 0 18px;
    user-select: none;
    will-change: transform;
}

.review-card {
    --card-width: 280px;
    --card-height: calc(var(--card-width) * 0.475);
    width: var(--card-width);
    height: var(--card-height);
    background: #e4e4e4;
    border-radius: calc(var(--card-width) * 0.024);
    padding: calc(var(--card-width) * 0.04);
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.review-head {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--card-width) * 0.03);
    margin-bottom: calc(var(--card-width) * 0.022);
}

.review-avatar {
    width: calc(var(--card-width) * 0.15);
    height: calc(var(--card-width) * 0.15);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.review-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--card-width) * 0.013);
    min-width: 0;
    flex: 1;
    padding-top: calc(var(--card-width) * 0.003);
}

.review-meta {
    font-size: calc(var(--card-width) * 0.057);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.review-rate {
    display: flex;
    align-items: center;
    gap: calc(var(--card-width) * 0.012);
    min-width: 0;
}

.review-rate .review-rate-label {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--card-width) * 0.004);
    font-size: calc(var(--card-width) * 0.056);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.review-rate .stars {
    display: inline-flex;
    gap: calc(var(--card-width) * 0.003);
    min-width: 0;
}

.review-rate .star {
    width: calc(var(--card-width) * 0.0615);
    height: calc(var(--card-width) * 0.0615);
    line-height: 1;
    flex-shrink: 0;
}

.review-rate .star.is-filled {
    color: #f3c230;
}

.review-rate .star.is-empty {
    color: transparent;
    stroke: #eabf37;
    stroke-width: calc(var(--card-width) * 0.0105);
}

.review-rate .score {
    font-size: calc(var(--card-width) * 0.072);
    line-height: 1;
    font-weight: 700;
}

.review-text {
    font-size: calc(var(--card-width) * 0.057);
    line-height: 1.18;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.review-empty {
    padding: 0 24px;
    color: #64748b;
}

@media (max-width: 640px) {
    .reviews-marquee {
        padding-bottom: 4px;
    }
}
/* ウィジェット全体のコンテナ（中央寄せ・横幅制限） */
.shopify-widget-wrapper {
  max-width: 500px;
  margin: 60px auto !important; /* 中央寄せ */
  padding: 0 15px;
  text-align: center;
  box-sizing: border-box;
}

/* 直接描写したキャンペーンチップのスタイル */
.campaign-tip-container {
  margin-bottom: 10px; /* ボタンとの距離 */
}

.campaign-tip-text {
  display: inline-block;
  background: #e3342f; /* キャンペーンの赤 */
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  letter-spacing: 0.05em;
}

/* Shopifyのiframeを強制中央寄せ */
.shopify-widget-wrapper iframe {
  margin: 0 auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* スマホ表示時の余白調整 */
@media (max-width: 600px) {
  .shopify-widget-wrapper {
    margin: 40px auto !important;
  }
}