@charset "UTF-8";
/* CSS Document */

/* ========================================
   Next Works 共通背景ドット
======================================== */

.nw-page-bg {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.nw-bg-dots {
  position: absolute; /* 背景固定しない */
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.nw-bg-dot {
  position: absolute;
  display: block;
  left: 0;
  width: 100vw;
  height: min(1053px, 76vw);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100vw auto;
  opacity: 0.22;
  pointer-events: none;
}

/* 上背景 */
.nw-bg-dot--top {
  top: 100px;
  background-image: url("../img/bg/bg-dot-top.png");
}

/* 下背景 */
.nw-bg-dot--bottom {
  bottom: 0;
  background-image: url("../img/bg/bg-dot-bottom.png");
  background-position: center bottom;
}

/* 通常ページは下背景を非表示 */
.rinen-page .nw-bg-dot--bottom,
.works-page .nw-bg-dot--bottom,
.jigyou-page .nw-bg-dot--bottom,
.contact-page .nw-bg-dot--bottom {
  display: none;
}

/* 企業理念だけ上背景を反転 */
.rinen-page .nw-bg-dot--top {
  transform: scaleX(-1);
}

/* イベントツールは上＋下を使用 */
.event-tool-page .nw-bg-dot--top {
  display: block;
}

.event-tool-page .nw-bg-dot--bottom {
  display: block;
}

/* コンテンツを前面へ */
.nw-page-bg > *:not(.nw-bg-dots) {
  position: relative;
  z-index: 1;
}

/* フッターも前面へ */
.site-footer {
  position: relative;
  z-index: 2;
}

/* スマホ */
@media (max-width: 768px) {
  .nw-bg-dot {
    top: 190px;
    height: min(1053px, 120vw);
    background-size: 170vw auto;
    opacity: 0.16;
  }

  .nw-bg-dot--bottom {
    bottom: 0;
    top: auto;
  }
}