@charset "utf-8";

/* =========================================================
   voice.css — お客様の声（USER VOICE）ページ
   SPファースト / PCは min-width: 769px で上書き
   ヘッダ・フッタは共通パーツのため未実装
   ========================================================= */

.voice {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-base);
  font-size: var(--fz-base);
  line-height: 1.8;
  padding: var(--gap-l) var(--gap-m) 40px;
  text-wrap: pretty;
}

/* ---------- 見出し hero ---------- */
.hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--w-content);
  text-align: center;
}
.hero__en {
  color: var(--c-lilac);
  font-family: var(--ff-en);
  font-size: var(--fz-3xl);
  font-weight: 700;
  line-height: 1.1;
}
.hero__ja {
  color: var(--c-gray);
  line-height: 1.85;
  margin-top: 2px;
}
.hero__title {
  color: var(--c-navy);
  font-size: var(--fz-l);
  font-weight: 700;
  line-height: 1.7;
  margin-top: var(--gap-l);
}
.hero__lead {
  line-height: 1.85;
  margin-top: 20px;
  text-align: left;
}
.hero__btn { margin-top: var(--gap-l); }

/* ---------- 一覧 voices ---------- */
.voices {
  background: var(--c-white);
  border-radius: var(--r-l);
  margin: var(--gap-xl) auto 0;
  max-width: var(--w-content);
}

/* ---------- カード card ---------- */
.card { padding: var(--gap-l) var(--gap-m); }
/* カード間の区切り線はコンテンツ幅に揃える */
.card + .card::before {
  border-top: 1px solid var(--c-line);
  content: "";
  display: block;
  margin: calc(var(--gap-l) * -1) 0 var(--gap-l);
}

.card__products {
  display: grid;
  column-gap: var(--gap-s);
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--gap-m);
}
.card__review {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-top: var(--gap-m);
  padding: 0 var(--gap-s);
}

/* ---------- 商品 product ---------- */
.product {
  align-items: center;
  background: var(--c-pale);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: var(--gap-m);
  padding: var(--gap-s);
  transition: box-shadow .2s ease, transform .2s ease;
}
.product:hover {
  box-shadow: 0 6px 10px rgb(96 99 174 / 18%);
  color: inherit;
  transform: translateY(-1px);
}
.product__thumb {
  background: var(--c-white);
  border-radius: var(--r-s);
  flex: 0 0 auto;
  height: 65px;
  padding: 2px;
  width: 65px;
}
.product__thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.product__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-width: 0;
}
.product__cat {
  align-self: flex-start;
  background: var(--c-lilac);
  border-radius: 19px;
  color: var(--c-white);
  font-size: var(--fz-s);
  font-weight: 500;
  line-height: 1;
  padding: var(--gap-xs) var(--gap-s);
}
.product__name {
  color: var(--c-navy);
  font-size: var(--fz-m);
  font-weight: 700;
  line-height: 1.3;
}
.product__arrow {
  align-self: flex-end;
  background: var(--c-navy);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 16px;
  padding: 4px 0 0 6px;
  width: 16px;
}
.product__arrow svg { display: block; }

/* ---------- 投稿者 reviewer ---------- */
.reviewer {
  align-items: center;
  display: flex;
  gap: 10px;
}
.reviewer__avatar {
  background: var(--c-line-pc);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}
.reviewer__name,
.reviewer__sub {
  color: var(--c-gray);
  line-height: 1.2;
  white-space: nowrap;
}
.reviewer__name { font-size: var(--fz-m); }
.reviewer__sub { font-size: var(--fz-s); margin-top: 2px; }

/* ---------- 使用シーンタグ tags ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags__item {
  border: 1px solid var(--c-indigo);
  border-radius: var(--r-s);
  color: var(--c-indigo);
  font-size: var(--fz-s);
  line-height: 1;
  margin: 0;
  padding: var(--gap-xs) var(--gap-s);
}

/* ---------- コメント notes ---------- */
.notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes__item {
  display: flex;
  gap: 6px;
}
.notes__dot {
  background: var(--c-lilac);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 10px;
  margin-top: 6px;
  width: 10px;
}
.notes__text {
  flex: 1 1 auto;
  line-height: 1.6;
}

/* ---------- 投稿のご案内 cta ---------- */
.cta {
  margin: 60px auto 0;
  max-width: var(--w-content);
}
.cta__inner {
  align-items: center;
  background: var(--c-navy);
  border-radius: var(--r-l);
  display: flex;
  flex-direction: column;
  padding: var(--gap-l) var(--gap-m) 40px;
  text-align: center;
}
.cta__icon { color: #e2e3ff; }
.cta__icon img { height: 29px; width: 29px; }
.cta__title {
  color: var(--c-pale-2);
  font-size: var(--fz-xl);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  margin-top: var(--gap-xs);
}
.cta__text {
  color: var(--c-pale-2);
  letter-spacing: .07em;
  line-height: 2;
  margin-top: 20px;
  text-align: left;
}
.cta__btn { margin-top: var(--gap-l); }

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 769px) {
  .voice { padding: 0px var(--gap-m) var(--gap-l); }

  .hero__ja { font-weight: 500; margin-top: var(--gap-xs); }
  .hero__title { line-height: 1.95; }
  .hero__lead { line-height: 2; text-align: center; }

  .voices { margin-top: 48px; padding: var(--gap-l) 0; width: var(--w-content); }

  .card { padding: var(--gap-l) 100px; }
  .card + .card::before { border-top-color: var(--c-line-pc); }
  .card__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__review { padding: 0 0 0 var(--gap-s); }

  .product__body { gap: 6px; }

  .notes__text { line-height: 1.72; }

  .cta__inner { padding: var(--gap-l) 34px 40px; }
  .cta__text { text-align: center; }
}

.voice-archive__empty {
  margin: var(--gap-l);
  color: var(--c-gray);
  text-align: center;
}