@charset "UTF-8";
.c-xapping {
  --section-pad-end: var(--space-100);
  padding-block: var(--section-pad-start, var(--space-0)) var(--section-pad-end);
  position: relative;
  display: grid;
  row-gap: var(--space-0);
  column-gap: var(--space-32);
}
@media (min-width: 768px) {
  .c-xapping {
    --section-pad-end: calc(var(--space-100) * 2);
    grid-template-columns: var(--layout-desktop-small-column-width) minmax(var(--space-0), 1fr);
    column-gap: var(--layout-grid-gutter);
    padding-inline: var(--layout-content-inset) var(--space-0);
  }
}

.c-xapping > .c-heading {
  align-content: start;
}
@media (min-width: 768px) {
  .c-xapping > .c-heading {
    gap: var(--space-24);
  }
}

/* 一覧へのリンクはSPでカルーセル下の通常フローに配置しPCは左タイトル下へ絶対配置する */
.c-xapping > .c-textlink-navigation {
  inline-size: var(--ratio-full);
  margin-block-start: var(--space-32);
}
@media (min-width: 768px) {
  .c-xapping > .c-textlink-navigation {
    position: absolute;
    inset-block-start: calc(var(--space-256) + var(--space-24));
    inset-inline-start: var(--layout-content-inset);
    inline-size: var(--layout-desktop-small-column-width);
    margin-block-start: var(--space-0);
  }
}

/* libs.jsの描画先はレイアウトへ影響させない サムネイルは画面外へ退避しプレイヤーだけ残す */
.c-xapping__source {
  position: absolute;
  block-size: 0;
}

.c-xapping > .xp-block {
  display: none;
}

.c-xapping__source .xp_thumbnails {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 0;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
}

/* プレイヤーは既定で畳み 起動時（libs.jsがbodyへインラインスタイルを付与）だけ開く */
.c-xapping__source section {
  display: none;
}

body[style*=user-select] .c-xapping__source section {
  display: block;
}

/* コンポーネントのdisplay:gridより優先して未読込時は畳む */
.c-xapping[hidden] {
  display: none;
}

/* 遷移先を持たずプレイヤーを開くだけのカードなのでポインターだけ揃える */
.c-xapping :is(.c-card--shopnews, .c-card--shopnews-feed) > a {
  cursor: pointer;
}

.c-xapping[data-layout=stacked]:not([hidden]) {
  display: block;
  grid-template-columns: none;
  padding-block: var(--space-0) var(--layout-section-padding-heading-3);
  padding-inline: var(--space-0);
}

.c-xapping:not([data-xp-active=true]) .c-xapping__source section {
  display: none;
}