/*
KPKS — WORKS（施工実績）(2a STYLISH)
style.css を先に読み込む前提の、施工実績ページ固有スタイル。
共通パーツ（hero / site-header / label-row / site-footer / contact-bar）は style.css を再利用し、
ここには WORKS 固有の差分（CaseSlideshow / CaseSpec / ReviewMarquee）だけを置く。
*/

/* ── Hero（WORKS 版：高さ 400 / スクリム .45 / パン周期 26s） ── */
.hero--works { height: 400px; }
.hero--works .hero__img { animation-duration: 26s; }
.hero--works .hero__scrim { background: rgba(9, 35, 22, .45); }
.hero--works .hero__copy { padding: 0 24px 22px; }
.hero--works .hero__title {
  font-size: 32px; line-height: 1.28;
  letter-spacing: -.01em;
  margin: 12px 0 0;
}
.hero--works .hero__text {
  font-size: 12px; line-height: 1.8;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, .88);
  max-width: none;
}

/* ── App bar（写真の上に重ねる白文字版） ── */

/* ── Section label の右端に出す日付 ── */
.label-date { font: 700 10px/1 var(--num); color: var(--muted3); }

/* ── CASE ── */
.case { padding: 30px 24px 0; }
.case + .case { padding-top: 38px; }
.case__title {
  font: 900 21px/1.4 var(--sans);
  letter-spacing: -.01em;
  margin: 14px 0 0;
  color: var(--ink);
}

/* CaseSlideshow：6s/枚・ズーム 1→1.16・クロスフェード・ループ */
.slideshow {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin: 14px -24px 0;          /* 左右余白を打ち消して画面幅いっぱい */
  background: var(--emerald-deep);
}
.slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* --n（枚数）と --i（1 始まりの番号）は works.js が付与する */
  animation-duration: calc(var(--n) * 6s);
  animation-delay: calc((var(--i) - var(--n) - 1) * 6s);
  will-change: transform, opacity;
}
.slideshow img:first-child { opacity: 1; }  /* JS 無効時は 1 枚目を静止表示 */
.slideshow[data-count="3"] img { animation-name: slide3; }
.slideshow[data-count="4"] img { animation-name: slide4; }
.slideshow[data-count="5"] img { animation-name: slide5; }
.slideshow[data-count="6"] img { animation-name: slide6; }
.slideshow[data-count="7"] img { animation-name: slide7; }

.slideshow__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .3);
}
.slideshow__bar i {
  display: block; height: 100%;
  background: var(--lime);
  animation: vidbar 6s linear infinite;
}

/* 各 keyframes：フェードイン 1.2s → 表示 6s まで → フェードアウト 7.2s まで（周期 = 枚数 × 6s） */
@keyframes slide3 { 0% { opacity: 0; transform: scale(1); } 6.67% { opacity: 1; } 33.33% { opacity: 1; transform: scale(1.16); } 40% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1); } }
@keyframes slide4 { 0% { opacity: 0; transform: scale(1); } 5%    { opacity: 1; } 25%    { opacity: 1; transform: scale(1.16); } 30% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1); } }
@keyframes slide5 { 0% { opacity: 0; transform: scale(1); } 4%    { opacity: 1; } 20%    { opacity: 1; transform: scale(1.16); } 24% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1); } }
@keyframes slide6 { 0% { opacity: 0; transform: scale(1); } 3.33% { opacity: 1; } 16.67% { opacity: 1; transform: scale(1.16); } 20% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1); } }
@keyframes slide7 { 0% { opacity: 0; transform: scale(1); } 2.86% { opacity: 1; } 14.29% { opacity: 1; transform: scale(1.16); } 17.14% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1); } }
@keyframes vidbar { from { width: 8%; } to { width: 92%; } }

/* CaseSpec：使用商品／コーティングの特徴 */
.spec { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.spec__row { display: flex; gap: 12px; align-items: baseline; }
.spec__k {
  font: 700 10px/1.5 var(--sans);
  color: var(--muted);
  width: 60px; flex: none;
}
.spec__badge {
  font: 800 12.5px/1.7 var(--sans);
  color: var(--emerald-ink);
  background: var(--lime);
  padding: 1px 8px;
  border-radius: 2px;
}
.spec__v { font: 600 12px/1.7 var(--sans); color: var(--ink); flex: 1; min-width: 0; }

/* お客様の声（引用） */
.quote {
  margin: 16px 0 0;
  border-left: 2px solid var(--lime);
  padding: 2px 0 2px 14px;
}
.quote__text { font: 700 12.5px/1.8 var(--sans); color: var(--ink); margin: 0; }
.quote__by { font: 600 10px/1 var(--num); font-style: normal; margin: 7px 0 0; color: var(--muted); display: block; }

/* ── VOICE（Google レビュー 2 段マーキー） ── */
.voice {
  margin: 36px 0 34px;
  background: var(--emerald);
  padding: 26px 0;
  overflow: hidden;
}
.voice__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px;
}
.voice__label { font: 600 11px/1 var(--num); letter-spacing: .26em; color: var(--lime); }
.gbadge {
  display: flex; align-items: center; gap: 7px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 3px;
}
.gbadge svg { width: 14px; height: 14px; display: block; }
.gbadge__t { font: 700 10px/1 var(--num); color: var(--ink); }
.gbadge__n { font: 800 11px/1 var(--num); color: var(--ink); }
.stars { font: 700 10px/1 var(--num); color: #fbbc04; letter-spacing: .04em; }

.marquee { margin: 16px 0 0; overflow: hidden; }
.marquee + .marquee { margin-top: 12px; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeX 46s linear infinite;
}
.marquee--rev .marquee__track { animation: marqueeXrev 52s linear infinite; }
@keyframes marqueeX    { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marqueeXrev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* GoogleReviewCard（gap の代わりに margin-right を使い、2 周分の幅をぴったり半分にする） */
.review {
  width: 286px; flex: none;
  margin-right: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(196, 241, 53, .3);
  border-radius: 4px;
  padding: 15px 17px 16px;
  color: #fff;
  display: flex; flex-direction: column; gap: 9px;
}
.review__head { display: flex; align-items: center; gap: 10px; }
.review__avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--sans);
}
.review__avatar.is-wide { font-size: 10px; }   /* 2 文字イニシャル */
.review__who { min-width: 0; }
.review__name { font: 700 12px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review__meta { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; }
.review__meta .stars { font-size: 11px; letter-spacing: .06em; }
.review__time { font: 600 9.5px/1 var(--num); color: rgba(255, 255, 255, .6); }
.review__text {
  font: 500 11.5px/1.75 var(--sans);
  color: rgba(255, 255, 255, .92);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voice__more { padding: 18px 24px 0; display: flex; justify-content: flex-end; }
.voice__link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 var(--sans);
  color: var(--lime);
  border-bottom: 1px solid rgba(196, 241, 53, .5);
  padding-bottom: 4px;
}
.voice__link .arw { font: 700 16px/1 var(--num); }

/* ── Reduced motion：ズームを止めフェードのみ／マーキーは手動スクロールに ── */
@media (prefers-reduced-motion: reduce) {
  .slideshow[data-count="3"] img { animation-name: fade3; }
  .slideshow[data-count="4"] img { animation-name: fade4; }
  .slideshow[data-count="5"] img { animation-name: fade5; }
  .slideshow[data-count="6"] img { animation-name: fade6; }
  .slideshow[data-count="7"] img { animation-name: fade7; }
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; }
}
@keyframes fade3 { 0% { opacity: 0; } 6.67% { opacity: 1; } 33.33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade4 { 0% { opacity: 0; } 5%    { opacity: 1; } 25%    { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade5 { 0% { opacity: 0; } 4%    { opacity: 1; } 20%    { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade6 { 0% { opacity: 0; } 3.33% { opacity: 1; } 16.67% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade7 { 0% { opacity: 0; } 2.86% { opacity: 1; } 14.29% { opacity: 1; } 17.14% { opacity: 0; } 100% { opacity: 0; } }