/* スタックカード — フロント */

/*
 * 全幅表示
 * ザラップテーマは .row > .col にブロック HTML を直接出力することがあり、
 * .wp-block-arc-editing-stack-cards ラッパーが無いケースがある。
 * セクション本体 .arc-stack-cards へビューポート幅ブレイクアウトを適用する。
 */

/* 親 .col を全幅化（calc(50% - 50vw) の基準を正す） */
.col:has(> .arc-stack-cards:not(.arc-stack-cards--editor)),
.col:has(> .arc-stack-cards-wrap),
.col:has(> .wp-block-arc-editing-stack-cards) {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow: visible !important;
}

.row:has(> .col > .arc-stack-cards:not(.arc-stack-cards--editor)),
.row:has(> .col > .arc-stack-cards-wrap),
.row:has(> .col > .wp-block-arc-editing-stack-cards) {
  overflow: visible !important;
}

.wp-block-arc-editing-stack-cards:has(.arc-stack-cards--edge-blur),
.wp-block-arc-editing-stack-cards:has(.arc-stack-cards-wrap--edge-blur) {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* WP ブロックラッパーがある場合は列幅いっぱいに */
.wp-block-arc-editing-stack-cards,
.wp-block-arc-editing-stack-cards.alignfull,
.wp-block-arc-editing-stack-cards.alignwide {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

.arc-stack-cards {
  --arc-sc-bg: var(--arc-brand-orange, #fc9200);
  --arc-sc-text: var(--arc-brand-cream, #fbf9ef);
  --arc-sc-card-bg: var(--arc-brand-surface-card, #ffffff);
  --arc-sc-card-ink: var(--arc-brand-ink, #2c2e36);
  --arc-sc-card-title-ink: var(--arc-sc-card-ink);
  --arc-sc-card-body-ink: var(--arc-sc-card-ink);
  --arc-sc-accent: var(--arc-brand-orange, #fc9200);
  --arc-sc-badge-ink: var(--arc-brand-cream, #fbf9ef);
  --arc-sc-tab-h: 1.875rem;
  --arc-sc-site-header-offset: 0px;
  --arc-sc-stick-top: clamp(1.25rem, 7vh, 4.5rem);
  --arc-sc-title-size: 2.125rem;
  --arc-sc-title-lh: 1.35;
  --arc-sc-text-start: clamp(1.5rem, 9vw, 2.25rem);
  --arc-sc-title-rule-gap: clamp(0.85rem, 2.5vw, 1.25rem);
  --arc-sc-intro-lead-gap: 4rem;
  --arc-sc-radius: 0.75rem;
  --arc-sc-edge-fade-size: clamp(2.5rem, 7vh, 5.5rem);
  --arc-sc-item-gap: clamp(3.75rem, 7.5vw, 5.25rem);

  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  background: var(--arc-sc-bg);
  color: var(--arc-sc-text);
  font-size: 1rem;
  line-height: 1.75;
  box-sizing: border-box;
}

/* 上下フェード — 紫の枠はそのまま、ラッパーの外側に透明↔単色の帯を追加 */
.arc-stack-cards-wrap--edge-blur {
  --arc-sc-edge-fade-size: clamp(2.5rem, 7vh, 5.5rem);
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
}

.arc-stack-cards-wrap__fade {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--arc-sc-edge-fade-size);
  pointer-events: none;
  z-index: 3;
}

/*
 * 上下フェード帯
 * translateY(-100%) だとサブピクセル丸めで単色背景との境に 1px の隙間が出るため、
 * bottom/top で配置し 1px 重ねて継ぎ目を消す。
 */
.arc-stack-cards-wrap__fade--top {
  top: auto;
  bottom: 100%;
  margin-bottom: -1px;
  transform: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--arc-sc-bg) calc(100% - 1px),
    var(--arc-sc-bg) 100%
  );
}

.arc-stack-cards-wrap__fade--bottom {
  top: 100%;
  margin-top: -1px;
  background: linear-gradient(
    to bottom,
    var(--arc-sc-bg) 0%,
    var(--arc-sc-bg) 1px,
    transparent 100%
  );
}

.arc-stack-cards-wrap--edge-blur > .arc-stack-cards {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  isolation: auto;
}

/* 青背景をビューポート全幅へ（エディタープレビュー・空状態は除く） */
.arc-stack-cards:not(.arc-stack-cards--editor):not(.arc-stack-cards--empty) {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.arc-stack-cards *,
.arc-stack-cards *::before,
.arc-stack-cards *::after {
  box-sizing: border-box;
}

.arc-stack-cards--empty {
  padding: 1rem;
  border: 1px dashed #c3c4c7;
  text-align: center;
  color: #646970;
  background: none;
}

.arc-stack-cards__inner {
  max-width: 90rem;
  margin: 0 auto;
}

/* ===== 左：見出し＋短文 ===== */
.arc-stack-cards__intro {
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

.arc-stack-cards__header {
  margin: 0;
}

.arc-stack-cards__header + .arc-stack-cards__lead {
  padding-top: var(--arc-sc-intro-lead-gap);
}

.arc-stack-cards__title,
.arc-stack-cards h2.arc-stack-cards__title,
.arc-stack-cards h3.arc-stack-cards__title {
  position: relative;
  display: block;
  margin: 0;
  padding-left: var(--arc-sc-text-start);
  font-family: inherit;
  font-size: var(--arc-sc-title-size);
  font-weight: 700;
  line-height: var(--arc-sc-title-lh);
  letter-spacing: 0.09em;
  color: var(--arc-sc-text);
  text-align: left;
}

.arc-stack-cards__title-text {
  display: block;
}

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

.arc-stack-cards--colorful .arc-stack-cards__cfa1-char {
  display: inline-block;
  transform-origin: 10% 90%;
  will-change: transform, color;
  color: var(--arc-sc-color-last, currentColor);
}

.arc-stack-cards--colorful .arc-stack-cards__cfa1-char.is-enter {
  animation:
    arc-sc-cfa-colorful var(--arc-sc-char-duration, 2s) cubic-bezier(0.16, 1, 0.3, 1) forwards,
    arc-sc-cfa-tilt 1.36s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
}

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

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

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

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

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

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

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

.arc-stack-cards--colorful .arc-stack-cards__cfa2-char {
  display: inline;
  color: inherit;
}

.arc-stack-cards--colorful .arc-stack-cards__cfa2-char.is-enter {
  animation: arc-sc-cfa2-sweep var(--arc-sc-cfa2-duration, 2s) ease-out var(--arc-sc-cfa2-delay, 0ms) both;
}

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

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

  100% {
    color: inherit;
  }
}

.arc-stack-cards--colorful .arc-stack-cards__cfa3-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0;
  margin: -0.14em 0;
}

.arc-stack-cards--colorful .arc-stack-cards__cfa3-inner {
  display: inline-block;
  --arc-sc-cfa3-final-color: var(--arc-sc-text, currentColor);
  transform: translateY(0);
  color: var(--arc-sc-cfa3-final-color);
  will-change: transform, color;
}

.arc-stack-cards--colorful .arc-stack-cards__cfa3-char.is-enter .arc-stack-cards__cfa3-inner {
  animation: arc-sc-cfa3-rise var(--arc-sc-cfa3-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1) var(--arc-sc-cfa3-delay, 0ms) both;
}

/* カード見出し内 CFA — カード文字色に合わせる */
.arc-stack-cards--colorful .arc-stack-cards__card-title .arc-stack-cards__card-cfa1-target {
  --arc-sc-color-last: var(--arc-sc-card-ink, currentColor);
}

.arc-stack-cards--colorful .arc-stack-cards__card-title .arc-stack-cards__card-cfa3-inner {
  --arc-sc-cfa3-final-color: var(--arc-sc-card-ink, currentColor);
  color: var(--arc-sc-cfa3-final-color);
}

@keyframes arc-sc-cfa3-rise {
  0% {
    transform: translateY(0);
    color: var(--arc-sc-cfa3-final-color, var(--arc-sc-text, currentColor));
  }

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

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

  100% {
    transform: translateY(0);
    color: var(--arc-sc-cfa3-final-color, var(--arc-sc-text, currentColor));
  }
}

.arc-stack-cards__lead {
  padding-left: var(--arc-sc-text-start);
  color: var(--arc-sc-text);
}

.arc-stack-cards__lead-p {
  margin: 0;
  font-family: inherit;
}

/* 左カラムの写真（任意） */
.arc-stack-cards__intro-media {
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  padding-left: var(--arc-sc-text-start);
}

.arc-stack-cards__intro-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--arc-sc-radius);
  object-fit: cover;
}

/* ===== 右：カードデッキ（スタック） ===== */
.arc-stack-cards__deck {
  display: flex;
  flex-direction: column;
  gap: var(--arc-sc-item-gap);
}

/* ● タイトル非表示（PC・モバイル共通）— カード上端を揃えて重ねる */
.arc-stack-cards--hide-tabs {
  --arc-sc-tab-h: 0px;
}

.arc-stack-cards--hide-tabs .arc-stack-cards__tab {
  display: none;
}

/* ボーダー（中太・ザラップパレット）— モバイルスタックなし／タブ非表示時 */
.arc-stack-cards--card-border .arc-stack-cards__card {
  border: var(--arc-sc-card-border-width, 2px) solid var(--arc-sc-card-border, var(--arc-brand-dark, #2c2e36));
  box-sizing: border-box;
}

.arc-stack-cards__item {
  position: sticky;
  top: calc(var(--arc-sc-stick-top) + var(--arc-sc-index, 0) * var(--arc-sc-tab-h));
}

/* タブ（● 見出し）は index が小さいほど手前 — 下から押し上げられても順序を維持 */
.arc-stack-cards__tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: calc(1000 + var(--arc-sc-count, 1) - var(--arc-sc-index, 0));
  height: var(--arc-sc-tab-h);
  padding: 0 0.25rem;
  background: var(--arc-sc-bg);
  color: var(--arc-sc-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* タブ文字はカードのフェード対象外 — 常に不透明 */
  opacity: 1;
}

/* スタック時にカードが背面から見えて文字が読みにくい場合のみ、タイトル文字へ背景色を適用（●は currentColor のまま） */
.arc-stack-cards__tab--needs-shield .arc-stack-cards__tab-label {
  background: var(--arc-sc-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.2em;
}

.arc-stack-cards__tab--needs-shield .arc-stack-cards__tab-dot {
  box-shadow: 0 0 0 0.2em var(--arc-sc-bg);
  border-radius: 50%;
}

/* カード本体はタブより下の層 — 前のカードの上を覆いつつタブ列は侵さない */
.arc-stack-cards__card {
  position: relative;
  z-index: calc(var(--arc-sc-index, 0) + 1);
  display: flex;
  flex-direction: column;
  border-radius: var(--arc-sc-radius);
  overflow: hidden;
  background: var(--arc-sc-card-bg);
  color: var(--arc-sc-card-body-ink, var(--arc-sc-card-ink));
  opacity: var(--arc-sc-card-opacity, 1);
  will-change: opacity;
}

/* 通過済みカード：フェードアウト（レイアウト高さは維持してスクロール位置を安定させる） */
.arc-stack-cards__item.is-folded .arc-stack-cards__card {
  opacity: 0;
  pointer-events: none;
}

/* 表示中カード：index 順で手前に出す（タブ列 z-index 1000+ より下に保つ） */
.arc-stack-cards__item.is-active .arc-stack-cards__card {
  z-index: calc(var(--arc-sc-index, 0) + 10);
  pointer-events: auto;
}

/* 最後以外の表示中カード：下方向をセクション背景で覆い、通過済みカードの残像を隠す */
.arc-stack-cards__item.is-active:not(:last-child) .arc-stack-cards__card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  background: var(--arc-sc-bg);
  pointer-events: none;
  z-index: 2;
}

/*
 * PC：カードがビューポートに収まらないとき（拡大表示など）
 * 右デッキのみモバイル「スタックなし」相当の縦並びへ。左 intro は sticky のまま。
 */
@media (min-width: 768px) {
  .arc-stack-cards--deck-plain {
    --arc-sc-tab-h: 0;
  }

  .arc-stack-cards--deck-plain .arc-stack-cards__item {
    position: static;
    top: auto;
  }

  .arc-stack-cards--deck-plain .arc-stack-cards__tab {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .arc-stack-cards--deck-plain .arc-stack-cards__item.is-folded .arc-stack-cards__card {
    opacity: 1;
    pointer-events: auto;
  }

  .arc-stack-cards--deck-plain .arc-stack-cards__item.is-active .arc-stack-cards__card {
    z-index: auto;
  }

  .arc-stack-cards--deck-plain
    .arc-stack-cards__item.is-active:not(:last-child)
    .arc-stack-cards__card::after,
  .arc-stack-cards--deck-plain
    .arc-stack-cards__item:not(:first-child)
    .arc-stack-cards__card::before {
    display: none;
  }

  /* モバイルスタックなしでもデッキは sticky スタック（static はモバイルのみ） */
  .arc-stack-cards--mobile-plain .arc-stack-cards__item,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item {
    position: sticky;
  }

  /* カード上端を揃えて重ねる（モバイルスタックなし／タブ非表示） */
  .arc-stack-cards--stack-align .arc-stack-cards__item {
    top: var(--arc-sc-stick-top);
  }

  /* めくり上げ中、前カードが上端から覗かないよう手前カードの上を背景で覆う */
  .arc-stack-cards--stack-align .arc-stack-cards__item:not(:first-child) .arc-stack-cards__card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: var(--arc-sc-bg);
    pointer-events: none;
    z-index: 3;
  }
}

.arc-stack-cards__tab-dot {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.arc-stack-cards__tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * モバイルではスタックなし（mobileNoStack）
 * static / タブ非表示は 767px 以下のみ。768px 以上は sticky スタック（下の @media min-width:768px）。
 */
@media (max-width: 767px) {
  .arc-stack-cards--mobile-plain,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] {
    --arc-sc-tab-h: 0;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__item,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item {
    position: static;
    top: auto;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__tab,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__tab {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__item.is-folded .arc-stack-cards__card,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item.is-folded .arc-stack-cards__card {
    opacity: 1;
    pointer-events: auto;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__item.is-active .arc-stack-cards__card,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item.is-active .arc-stack-cards__card {
    z-index: auto;
  }

  .arc-stack-cards--mobile-plain
    .arc-stack-cards__item.is-active:not(:last-child)
    .arc-stack-cards__card::after,
  .arc-stack-cards[data-arc-sc-mobile-plain='1']
    .arc-stack-cards__item.is-active:not(:last-child)
    .arc-stack-cards__card::after {
    display: none;
  }
}

@media (min-width: 768px) {
  .arc-stack-cards--mobile-plain:not(.arc-stack-cards--hide-tabs),
  .arc-stack-cards[data-arc-sc-mobile-plain='1']:not(.arc-stack-cards--hide-tabs) {
    --arc-sc-tab-h: 1.875rem;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__tab,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__tab {
    display: flex !important;
    height: var(--arc-sc-tab-h) !important;
    min-height: 0;
    margin: 0;
    padding: 0 0.25rem;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__item.is-folded .arc-stack-cards__card,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item.is-folded .arc-stack-cards__card {
    opacity: 0;
    pointer-events: none;
  }

  .arc-stack-cards--mobile-plain .arc-stack-cards__item.is-active .arc-stack-cards__card,
  .arc-stack-cards[data-arc-sc-mobile-plain='1'] .arc-stack-cards__item.is-active .arc-stack-cards__card {
    z-index: calc(var(--arc-sc-index, 0) + 10);
    pointer-events: auto;
  }

  .arc-stack-cards--mobile-plain
    .arc-stack-cards__item.is-active:not(:last-child)
    .arc-stack-cards__card::after,
  .arc-stack-cards[data-arc-sc-mobile-plain='1']
    .arc-stack-cards__item.is-active:not(:last-child)
    .arc-stack-cards__card::after {
    display: block;
  }
}

/* ===== カード本体（サービス紹介と同要素・オーバーレイ無し） ===== */

.arc-stack-cards__card-content {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  flex: 1 1 auto;
}

.arc-stack-cards__badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 0.35em 0.85em;
  border-radius: 0.25rem;
  background: var(--arc-sc-accent);
  color: var(--arc-sc-badge-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.arc-stack-cards__card-title,
.arc-stack-cards h3.arc-stack-cards__card-title {
  margin: 0.15rem 0 0;
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--arc-sc-card-title-ink, var(--arc-sc-card-ink));
}

.arc-stack-cards__subtitle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.25rem 0 0.35rem;
  color: var(--arc-sc-accent);
  font-size: clamp(0.82rem, 2vw, 0.92rem);
  font-weight: 600;
  line-height: 1.4;
}

.arc-stack-cards__subtitle-line {
  flex: 1 1 0;
  height: 0.0625rem;
  min-width: 1.5rem;
  background: var(--arc-sc-accent);
  opacity: 0.85;
}

.arc-stack-cards__subtitle-text {
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
}

.arc-stack-cards__card-body {
  margin: clamp(0.85rem, 2vw, 1.25rem) 0 0;
  color: var(--arc-sc-card-body-ink, var(--arc-sc-card-ink));
}

.arc-stack-cards__card-icon-button {
  margin-top: clamp(0.85rem, 2vw, 1.25rem);
}

.arc-stack-cards__card-content .arc-icon-button-wrap {
  margin-inline: 0;
  padding-inline: 0;
}

.arc-stack-cards__features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: auto 0 0;
  padding: 1rem 0 0;
  list-style: none;
}

.arc-stack-cards__feature {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--arc-sc-card-body-ink, var(--arc-sc-card-ink));
}

.arc-stack-cards__feature-icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--arc-sc-accent);
  flex-shrink: 0;
}

.arc-stack-cards__feature-icon svg {
  width: 100%;
  height: 100%;
}

.arc-stack-cards__media {
  position: relative;
  flex: 0 0 auto;
  min-height: 13.75rem;
  background: #0e1218;
}

.arc-stack-cards__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 13.75rem;
  object-fit: cover;
  object-position: center;
}

/* ===== テキストカード（ラベル＋見出し＋本文＋流れるギャラリー） ===== */
.arc-stack-cards__card--text {
  /* PC でも左右 2 カラムにせず、本文＋ギャラリーを縦に積む */
  flex-direction: column;
}

.arc-stack-cards__card--text .arc-stack-cards__card-content {
  flex: 0 0 auto;
}

.arc-stack-cards__card-gallery {
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
  min-width: 0;
}

/* 施工ギャラリー（マーキー）をカード内に収める */
.arc-stack-cards__card-gallery .arc-showcase {
  margin: 0;
  padding: 0;
}

.arc-stack-cards__card-gallery .arc-showcase--marquee {
  --arc-marquee-h: clamp(7.5rem, 16vw, 11rem);
}

.arc-stack-cards__card-gallery .arc-showcase--marquee.arc-showcase--orient-portrait {
  --arc-marquee-h: clamp(11rem, 26vw, 16rem);
}

/* ===== PC ===== */
@media (min-width: 768px) {
  .arc-stack-cards-wrap--edge-blur {
    --arc-sc-edge-fade-size: clamp(3rem, 8vh, 6.5rem);
  }

  .arc-stack-cards {
    --arc-sc-edge-fade-size: clamp(3rem, 8vh, 6.5rem);
    --arc-sc-intro-col-min: 16rem;
    --arc-sc-intro-col-max: 26rem;
    --arc-sc-card-content-ratio: 62%;
    --arc-sc-card-media-ratio: 38%;
  }

  .arc-stack-cards__inner {
    display: grid;
    grid-template-columns: minmax(var(--arc-sc-intro-col-min), var(--arc-sc-intro-col-max)) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .arc-stack-cards__intro {
    position: sticky;
    /* 画面中央付近に固定して、右のカードがめくれていくのを見せる */
    top: var(--arc-sc-stick-top);
    margin-bottom: 0;
    align-self: start;
  }

  /* サービス用カードのみ左右 2 カラム。テキストカードは本文の下にギャラリーを縦積み */
  .arc-stack-cards__card:not(.arc-stack-cards__card--text) {
    flex-direction: row;
    align-items: stretch;
  }

  .arc-stack-cards__card:not(.arc-stack-cards__card--text) .arc-stack-cards__card-content {
    flex: 1 1 var(--arc-sc-card-content-ratio);
    min-width: 0;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .arc-stack-cards__card--text .arc-stack-cards__card-content {
    flex: 0 0 auto;
    width: 100%;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.5rem)
      clamp(1rem, 2.5vw, 1.5rem);
  }

  .arc-stack-cards__features {
    justify-content: flex-start;
  }

  .arc-stack-cards__features--count-2,
  .arc-stack-cards__features--count-3 {
    gap: 1.5rem;
  }

  .arc-stack-cards__media {
    flex: 1 1 var(--arc-sc-card-media-ratio);
    min-height: 20rem;
  }

  .arc-stack-cards__image {
    min-height: 100%;
  }

}

/* ===== モバイル ===== */
@media (max-width: 767px) {
  .arc-stack-cards-wrap--edge-blur {
    --arc-sc-edge-fade-size: clamp(2rem, 6vh, 4.5rem);
  }

  .arc-stack-cards:not(.arc-stack-cards--mobile-plain):not([data-arc-sc-mobile-plain='1']):not(
      .arc-stack-cards--hide-tabs
    ) {
    /* スタックタブは縦幅を最小限に（スタックなし時はモバイルファースト側で 0） */
    --arc-sc-tab-h: 1.625rem;
  }


  .arc-stack-cards {
    --arc-sc-title-size: 1.75rem;
    --arc-sc-title-lh: 1.32;
    --arc-sc-text-start: 0;
    --arc-sc-edge-fade-size: clamp(2rem, 6vh, 4.5rem);
    --arc-sc-stick-top: calc(var(--arc-sc-site-header-offset, 50px) + 0.125rem);
    /* デッキ（カード）は全幅。見出し・タブは個別に余白 */
    padding-left: 0;
    padding-right: 0;
  }

  /* 見出し・短文：ブロック全体を中央に、文字は左揃え */
  .arc-stack-cards__intro {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, 28rem);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(3.5rem, 8vw, 5rem);
    padding-left: clamp(1rem, 5vw, 1.5rem);
    padding-right: clamp(1rem, 5vw, 1.5rem);
    text-align: left;
  }

  .arc-stack-cards__title,
  .arc-stack-cards h2.arc-stack-cards__title,
  .arc-stack-cards h3.arc-stack-cards__title {
    padding-left: 0;
    text-align: left;
  }

  .arc-stack-cards__lead,
  .arc-stack-cards__intro-media {
    padding-left: 0;
    text-align: left;
  }

  /* タブ（● 見出し）は全幅。● が端に付かないよう左右に余白 */
  .arc-stack-cards:not(.arc-stack-cards--mobile-plain):not(.arc-stack-cards--hide-tabs) .arc-stack-cards__tab {
    padding-left: clamp(1rem, 5vw, 1.5rem);
    padding-right: clamp(1rem, 5vw, 1.5rem);
    font-size: 0.7rem;
  }

  /* サービス用カード：画面端まで全幅 */
  .arc-stack-cards__card--service {
    flex-direction: column;
    border-radius: 0;
  }

  /* テキストカード：左右余白内で角丸 */
  .arc-stack-cards__card--text {
    margin-left: clamp(1rem, 5vw, 1.5rem);
    margin-right: clamp(1rem, 5vw, 1.5rem);
    border-radius: var(--arc-sc-radius);
  }

  /* カード1枚が画面に収まるよう内容をコンパクトに（サービス紹介と同じ並び順：内容 → 写真） */
  .arc-stack-cards__card-content {
    order: 1;
    gap: 0.4rem;
    padding: 0.95rem clamp(1rem, 5vw, 1.5rem) 1.05rem;
  }

  .arc-stack-cards__badge {
    padding: 0.28em 0.7em;
    font-size: 0.72rem;
  }

  .arc-stack-cards__card-title,
  .arc-stack-cards h3.arc-stack-cards__card-title {
    margin-top: 0.05rem;
    line-height: 1.3;
    min-width: 0;
  }

  .arc-stack-cards__subtitle {
    margin: 0.1rem 0 0.2rem;
  }

  .arc-stack-cards__card-body {
    margin-top: clamp(0.75rem, 2.5vw, 1.1rem);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .arc-stack-cards__features {
    gap: 0.5rem 1rem;
    padding-top: 0.55rem;
  }

  .arc-stack-cards__feature {
    font-size: 0.78rem;
  }

  /* 写真の高さは従来の半分 */
  .arc-stack-cards__media {
    order: 2;
    min-height: 6.875rem;
  }

  .arc-stack-cards__image {
    min-height: 6.875rem;
  }

  .arc-stack-cards__card-title,
  .arc-stack-cards__subtitle-text {
    white-space: nowrap;
    overflow: hidden;
  }
}

/* テーマ fixed ヘッダー（<1200px）— タブレットでも sticky 開始位置を下げる */
@media (min-width: 768px) and (max-width: 1199px) {
  .arc-stack-cards {
    --arc-sc-stick-top: calc(
      var(--arc-sc-site-header-offset, 50px) + clamp(1.25rem, 7vh, 4.5rem)
    );
  }
}

/* スティッキー非対応・モーション軽減でも内容は読める */
@supports not (position: sticky) {
  .arc-stack-cards__item,
  .arc-stack-cards__intro {
    position: static;
  }
}

/* エディタープレビュー：スクロール固定はしない（内容確認用に縦並び） */
.arc-stack-cards--editor .arc-stack-cards__item,
.arc-stack-cards--editor .arc-stack-cards__intro {
  position: static;
}

@media (prefers-reduced-motion: reduce) {
  .arc-stack-cards--colorful .arc-stack-cards__cfa1-char.is-enter {
    animation: none;
    color: var(--arc-sc-color-last, currentColor);
    transform: none;
  }

  .arc-stack-cards--colorful .arc-stack-cards__cfa2-char.is-enter {
    animation: none;
    color: inherit;
  }

  .arc-stack-cards--colorful .arc-stack-cards__cfa3-inner {
    transform: none;
    animation: none;
  }
}