/* カードスワイプ — フロント（50〜60代向け・マツダ brand 風） */

.arc-card-carousel {
  --arc-cc-type-title: clamp(1.25rem, 2.75vw, 1.5rem);
  --arc-cc-type-heading-tracking: 0.1em;
  --arc-cc-type-link: clamp(0.9375rem, 2.05vw, 1.0625rem);
  --arc-cc-type-counter: clamp(0.9rem, 1.9vw, 1rem);
  --arc-cc-gap: clamp(0.65rem, 1.8vw, 1rem);
  --arc-cc-pad-y: clamp(1.5rem, 4vw, 3rem);
  --arc-cc-pad-x: clamp(1rem, 3vw, 2rem);
  --arc-cc-card-w: min(21.25rem, 86vw);
  --arc-cc-content-pad-x: clamp(1rem, 1.8vw, 1.35rem);
  --arc-cc-radius: 0.75rem;
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--arc-cc-pad-y) var(--arc-cc-pad-x);
  color: var(--arc-cc-text-color, var(--arc-context-ink, var(--arc-brand-dark, #2c2e36)));
}

.arc-card-carousel--empty {
  padding: 1rem;
  border: 1px dashed #c3c4c7;
  text-align: center;
  color: #646970;
  font-size: 1.0625rem;
}

.arc-card-carousel__viewport {
  overflow: hidden;
  margin: 0 calc(-1 * var(--arc-cc-pad-x));
  padding: 0 var(--arc-cc-pad-x);
}

.arc-card-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--arc-cc-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.arc-card-carousel__track::-webkit-scrollbar {
  display: none;
}

.arc-card-carousel__card {
  flex: 0 0 var(--arc-cc-card-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.arc-card-carousel__media {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--arc-cc-radius);
  background: #e8e8e8;
}

.arc-card-carousel__image,
.arc-card-carousel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.arc-card-carousel--focus-top .arc-card-carousel__image,
.arc-card-carousel--focus-top .arc-card-carousel__video {
  object-position: center top;
}

.arc-card-carousel--focus-bottom .arc-card-carousel__image,
.arc-card-carousel--focus-bottom .arc-card-carousel__video {
  object-position: center bottom;
}

.arc-card-carousel__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  padding: clamp(0.9rem, 2.2vw, 1.15rem) var(--arc-cc-content-pad-x) 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.arc-card-carousel__title {
  margin: 0 0 0.85rem;
  font-size: var(--arc-cc-type-title);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: var(--arc-cc-type-heading-tracking);
  color: var(--arc-cc-heading-color, var(--arc-cc-text-color, inherit));
}

/* ===== 見出しアニメーション [cfa1]/[cfa2]/[cfa3]（view.js で1文字ずつ分割） ===== */
.arc-card-carousel--colorful .arc-card-carousel__cfa1-target {
  --arc-cc-color-last: var(--arc-cc-heading-color, var(--arc-cc-text-color, currentColor));
}

/* [cfa1] — カラフル発色（gaaboo.jp h2 風） */
.arc-card-carousel--colorful .arc-card-carousel__cfa1-char {
  display: inline-block;
  transform-origin: 10% 90%;
  will-change: transform, color;
  color: var(--arc-cc-color-last, currentColor);
}

.arc-card-carousel--colorful .arc-card-carousel__cfa1-char.is-enter {
  animation:
    arc-cc-cfa-colorful var(--arc-cc-char-duration, 2s) cubic-bezier(0.16, 1, 0.3, 1) forwards,
    arc-cc-cfa-tilt 1.36s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
}

@keyframes arc-cc-cfa-colorful {
  0% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--arc-cc-color-last, currentColor);
  }

  18% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--arc-cc-color-start);
  }

  36% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--arc-cc-color-end);
  }

  100% {
    color: var(--arc-cc-color-last, currentColor);
  }
}

@keyframes arc-cc-cfa-tilt {
  0% {
    transform: rotate(0deg);
  }

  26% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* [cfa2] — 光がきらんと走る */
.arc-card-carousel--colorful .arc-card-carousel__cfa2-char {
  display: inline;
  color: inherit;
}

.arc-card-carousel--colorful .arc-card-carousel__cfa2-char.is-enter {
  animation: arc-cc-cfa2-sweep var(--arc-cc-cfa2-duration, 2s) ease-out var(--arc-cc-cfa2-delay, 0ms) both;
}

@keyframes arc-cc-cfa2-sweep {
  0% {
    color: inherit;
  }

  26% {
    color: var(--arc-cc-cfa2-color, #009ace);
  }

  100% {
    color: inherit;
  }
}

/* [cfa3] — カラー＋バウンス（文字は常時表示、スクロール到達でアニメ開始） */
.arc-card-carousel--colorful .arc-card-carousel__cfa3-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0;
  margin: -0.14em 0;
}

.arc-card-carousel--colorful .arc-card-carousel__cfa3-inner {
  display: inline-block;
  transform: translateY(0);
  color: var(--arc-cc-heading-color, var(--arc-cc-text-color, var(--arc-context-ink, var(--arc-brand-dark, #2c2e36))));
  will-change: transform, color;
}

.arc-card-carousel--colorful .arc-card-carousel__cfa3-char.is-enter .arc-card-carousel__cfa3-inner {
  animation: arc-cc-cfa3-rise var(--arc-cc-cfa3-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1) var(--arc-cc-cfa3-delay, 0ms) both;
}

@keyframes arc-cc-cfa3-rise {
  0% {
    transform: translateY(0);
    color: var(--arc-cc-heading-color, var(--arc-cc-text-color, var(--arc-context-ink, var(--arc-brand-dark, #2c2e36))));
  }

  25% {
    transform: translateY(-14%);
    color: var(--arc-cc-cfa3-color, #009ace);
  }

  55% {
    transform: translateY(0);
    color: var(--arc-cc-cfa3-color, #009ace);
  }

  100% {
    transform: translateY(0);
    color: var(--arc-cc-heading-color, var(--arc-cc-text-color, var(--arc-context-ink, var(--arc-brand-dark, #2c2e36))));
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-card-carousel--colorful .arc-card-carousel__cfa1-char.is-enter {
    animation: none;
    color: var(--arc-cc-color-last, currentColor);
    transform: none;
  }

  .arc-card-carousel--colorful .arc-card-carousel__cfa2-char.is-enter {
    animation: none;
    color: inherit;
  }

  .arc-card-carousel--colorful .arc-card-carousel__cfa3-inner {
    transform: none;
    animation: none;
  }
}

.arc-card-carousel__body {
  margin: 0;
}

.arc-card-carousel__link-wrap {
  margin: auto 0 0;
  padding-top: 0.85rem;
}

.arc-card-carousel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--arc-cc-type-link);
  line-height: 1.5;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.arc-card-carousel__link:hover,
.arc-card-carousel__link:focus-visible {
  opacity: 0.65;
  text-decoration: none;
}

.arc-card-carousel__link-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.arc-card-carousel__link-icon svg {
  width: 100%;
  height: 100%;
}

.arc-card-carousel__nav {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.arc-card-carousel--fits .arc-card-carousel__nav {
  display: none;
}

.arc-card-carousel__progress {
  position: relative;
  height: 0.125rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 1px;
  overflow: hidden;
}

.arc-card-carousel__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: currentColor;
  border-radius: 1px;
  transition: width 0.25s ease;
}

.arc-card-carousel__counter {
  margin: 0;
  font-size: var(--arc-cc-type-counter);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.arc-card-carousel__arrows {
  display: flex;
  gap: 0.35rem;
}

.arc-card-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.arc-card-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.arc-card-carousel__arrow:not(:disabled):hover {
  opacity: 0.6;
}

.arc-card-carousel__arrow svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* モバイル：端 padding 対称・中央スナップ・横長画像 */
@media (max-width: 899.98px) {
  .arc-card-carousel {
    --arc-cc-pad-x: clamp(1.25rem, 4.5vw, 1.75rem);
    --arc-cc-edge-inset: var(--arc-cc-pad-x);
    --arc-cc-adjacent-peek: 1.5rem;
    --arc-cc-card-w: min(
      20rem,
      calc(100vw - 2 * var(--arc-cc-edge-inset) - var(--arc-cc-adjacent-peek))
    );
    --arc-cc-content-pad-x: clamp(1.25rem, 4.5vw, 1.75rem);
    --arc-cc-content-shift: 0.35rem;
  }

  .arc-card-carousel__viewport {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
  }

  .arc-card-carousel__nav {
    padding-left: var(--arc-cc-pad-x);
    padding-right: var(--arc-cc-pad-x);
    box-sizing: border-box;
  }

  .arc-card-carousel__track {
    scroll-padding-inline: var(--arc-cc-edge-inset);
    padding-inline: var(--arc-cc-edge-inset);
  }

  .arc-card-carousel__track::before,
  .arc-card-carousel__track::after {
    display: none;
  }

  .arc-card-carousel__card {
    scroll-snap-align: center;
  }

  .arc-card-carousel__card:first-child {
    scroll-snap-align: start;
  }

  .arc-card-carousel__card:last-child {
    scroll-snap-align: end;
  }

  .arc-card-carousel__content {
    padding-left: calc(var(--arc-cc-content-pad-x) + var(--arc-cc-content-shift));
    padding-right: var(--arc-cc-content-pad-x);
  }

  .arc-card-carousel__media {
    aspect-ratio: 2 / 1;
  }

  .arc-card-carousel__title {
    white-space: nowrap;
    overflow: hidden;
  }
}

@media (min-width: 900px) {
  .arc-card-carousel {
    --arc-cc-gap: clamp(1rem, 2.2vw, 1.35rem);
    --arc-cc-desktop-peek: clamp(3rem, 5vw, 5rem);
    --arc-cc-card-w: calc((100% - 2 * var(--arc-cc-gap)) / 3);
    --arc-cc-content-pad-x: clamp(1rem, 1.8vw, 1.35rem);
  }

  /* 4枚：1行に4枚すべて表示（ナビ非表示） */
  .arc-card-carousel[data-arc-card-total='4'] {
    --arc-cc-card-w: calc((100% - 3 * var(--arc-cc-gap)) / 4);
  }

  /* 5枚以上：4枚表示＋次カードを右端に少し見せる */
  .arc-card-carousel[data-arc-card-total]:not([data-arc-card-total='1']):not(
      [data-arc-card-total='2']
    ):not([data-arc-card-total='3']):not([data-arc-card-total='4']) {
    --arc-cc-card-w: calc(
      (100% - 3 * var(--arc-cc-gap) - var(--arc-cc-desktop-peek)) / 4
    );
  }

  .arc-card-carousel[data-arc-card-total]:not([data-arc-card-total='1']):not(
      [data-arc-card-total='2']
    ):not([data-arc-card-total='3']):not([data-arc-card-total='4'])
    .arc-card-carousel__track {
    padding-inline-end: var(--arc-cc-desktop-peek);
  }

  .arc-card-carousel__media {
    aspect-ratio: 2 / 1;
  }

  .arc-card-carousel__title {
    margin-bottom: 1.05rem;
  }

  .arc-card-carousel__track::before,
  .arc-card-carousel__track::after {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .arc-card-carousel__track > .arc-card-carousel__card {
    animation: arc-card-carousel-fade 0.6s ease both;
  }

  .arc-card-carousel__track > .arc-card-carousel__card:nth-child(3) {
    animation-delay: 0.08s;
  }

  .arc-card-carousel__track > .arc-card-carousel__card:nth-child(4) {
    animation-delay: 0.16s;
  }

  .arc-card-carousel__track > .arc-card-carousel__card:nth-child(5) {
    animation-delay: 0.24s;
  }
}

@keyframes arc-card-carousel-fade {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}