@charset "UTF-8";

/* 1つのセクションを用途別の2倍画像で組み立てます。
   各素材の位置と幅はindex.htmlのpictureのstyleで変更できます。
   画像自体の縦横比は常に維持します。 */
.split-art {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: var(--asset-ratio);
}

.art-inner > .split-art {
  width: 140%;
  margin-left: -20%;
}

.split-art .split-art__layer {
  position: absolute;
  display: block;
  left: var(--asset-x);
  top: var(--asset-y);
  width: var(--asset-width);
  margin: 0;
  line-height: 0;
  z-index: var(--asset-z, 0);
}

.split-art .split-art__layer img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.split-art .split-art__layer--sp {
  display: none;
}

@media (max-width: 767px) {
  .split-art {
    aspect-ratio: var(--asset-ratio-sp, var(--asset-ratio));
  }

  .art-inner > .split-art {
    width: 100%;
    margin-left: 0;
  }

  .split-art .split-art__layer--pc {
    display: none;
  }

  .split-art .split-art__layer--sp {
    display: block;
  }
}