/* p-slider — ギャラリースライダー土台（Figma 3191:32822 実測値）
   写真列はマーキー（無限スクロール）表示。ただし TOP版のPCは
   Figma 3268:7418 の静的レイアウト（写真2枚｜中央ブロック｜写真2枚 / gap64 / 中央寄せ）。
   写真サイズ・間隔は Figma の静的レイアウト値（396x280 / gap64）を踏襲。 */

.p-slider {
  padding-bottom: var(--space-120);
}

.p-slider__inner {
  display: flex;
  justify-content: center;
  max-width: var(--container-width);
  margin-inline: auto;
}

/* TOP版のみ出力される中央ブロック（ロゴ・キャッチ・ボタン）の入れ物 */
.p-slider__slide {
  display: flex;
}

.p-slider__image {
  display: block;
  width: 24.75rem; /* 396px */
  height: 17.5rem; /* 280px */
  border-radius: var(--radius-xl); /* 24px */
  object-fit: cover;
}

/* ダーク版（Figma カフェ 3191:24177 / 背景 #3E3A39・上80/下40） */
.p-slider--dark {
  padding-top: var(--space-80);
  padding-bottom: var(--space-40);
  background: var(--color-primary);
}

/* 帯版（Figma レンタルスペース 3191:24247 / py80・ベージュ背景） */
.p-slider--band {
  padding-block: var(--space-80);
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
}

/* ==========================================================================
   TOP版（Figma 3191:23869 / 1440x636）
   ロゴ・キャッチ・お問い合わせボタンの中央ブロックの下に、280x280の写真列を流す帯。
   ========================================================================== */
.p-slider--top {
  padding-block: var(--space-80);
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
}

/* TOP版のPCは「写真2枚｜中央ブロック｜写真2枚」の静的な1行（Figma 3268:7418）。
   行幅は 1440px 超のため中央寄せのままビューポート端でクリップされる
   （html/body の overflow-x: clip 前提。スライドはさせない）。 */
.p-slider--top .p-slider__slide {
  gap: var(--space-64);
  align-items: center;
}

.p-slider--top .p-slider__image {
  width: 17.5rem;  /* 280px */
  height: 17.5rem; /* 280px */
}

.p-slider__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  flex-shrink: 0;
}

.p-slider__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.p-slider__logo {
  display: block;
  width: 15.152rem; /* 242.43px（Figma実測） */
  height: 10rem;    /* 160px */
}

.p-slider__title-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.p-slider__catch,
.p-slider__subtitle {
  margin: 0;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading); /* Figma: 1.5 */
  text-align: center;
  white-space: nowrap;
}

.p-slider__catch {
  font-size: var(--font-size-h1); /* 42.667px */
}

.p-slider__subtitle {
  font-size: var(--font-size-h2-lead); /* 25.6px */
}

/* Figma: 420px（c-button の 360/376 いずれとも異なるためセクション内で指定） */
.p-slider__action .c-button {
  width: 26.25rem;
}

/* 無限スクロール列（マーキー）。全ビューポート共通。 */
.p-slider__marquee {
  overflow: hidden;
}

/* TOP版のマーキーはSP専用（PCは上の静的1行で写真を見せる） */
.p-slider--top .p-slider__marquee {
  display: none;
}

.p-slider__marquee-track {
  display: flex;
  width: max-content;
  animation: ic-slider-marquee 60s linear infinite;
  will-change: transform;
}

/* 間隔は gap ではなく各カードの右余白で持つ（gapだと継ぎ目のぶん1周とズレる） */
.p-slider__marquee-item {
  flex-shrink: 0;
  padding-right: var(--space-64);
}

@keyframes ic-slider-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* 写真列は2周ぶん。各カードが「写真＋右余白」で等幅（トラックのgapは使わない）なので、
       トラック幅のちょうど半分＝1周ぶん動いた時点で先頭と完全に一致し、継ぎ目が出ない。 */
    transform: translateX(-50%);
  }
}

/* 動きを減らす設定の環境では自動スクロールを止め、横スクロールで閲覧できるようにする */
@media (prefers-reduced-motion: reduce) {
  .p-slider__marquee {
    overflow-x: auto;
  }

  .p-slider__marquee-track {
    animation: none;
  }
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  /* セクション上下は詰める。単一クラス同士なので、後勝ちで各variantの指定も上書きする */
  .p-slider {
    padding-block: var(--space-40) var(--space-64); /* SP共通のセクション上下余白 */
  }

  /* ダーク版（cafe）は直後も濃色セクションで地続きのため下余白を詰める */
  .p-slider--dark {
    padding-bottom: var(--space-16);
  }

  .p-slider__inner {
    padding-inline: var(--space-24);
  }

  /* SPは静的1行の写真を隠し、マーキーに切り替える */
  .p-slider--top .p-slider__slide > .p-slider__image {
    display: none;
  }

  .p-slider--top .p-slider__marquee {
    display: block;
    margin-top: var(--space-40);
  }

  /* SPは列が短いぶん同速だと遅く見えるため周期を詰める */
  .p-slider__marquee-track {
    animation-duration: 40s;
  }

  .p-slider__marquee-item {
    padding-right: var(--space-16);
  }

  /* SPは流れる装飾なので写真を小さく（PC比 約1/2。アスペクト比はPCを維持） */
  .p-slider__marquee .p-slider__image {
    width: 17rem;  /* 242px（PC 396:280 の比率維持） */
    height: 12rem; /* 171px */
  }

  .p-slider--top .p-slider__marquee .p-slider__image {
    width: 12rem;  /* 171px 正方形 */
    height: 12rem;
  }

  .p-slider__catch,
  .p-slider__subtitle {
    white-space: normal;
  }

  /* align-items:center のままだと各ブロックが内容幅まで縮み、
     width:100% のボタンがラベル幅になって矢印（右外へ絶対配置）と重なる。 */
  .p-slider--top .p-slider__slide {
    align-items: stretch;
  }

  .p-slider__content {
    gap: var(--space-32);
    align-items: stretch;
  }


  .p-slider__title {
    gap: var(--space-16);
  }

  .p-slider__title-text {
    gap: var(--space-8);
  }

  /* PC比 50%（アスペクト比 242.43:160 を維持） */
  .p-slider__logo {
    width: 7.576rem; /* 121.2px */
    height: 5rem;    /* 80px */
  }

  .p-slider__catch {
    font-size: var(--font-size-h2); /* 32px */
  }

  .p-slider__subtitle {
    font-size: var(--font-size-h3); /* 18.286px */
  }

  .p-slider__action .c-button {
    width: 100%;
  }
}