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

/* ===============================
   強制表示画像モーダル
   =============================== */

.force-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景 */
.force-modal__bg {
  position: absolute;
  inset: 0;

  /* 背景色はここで調整 */
  background: rgba(0, 0, 0, 0.9);

  /* 背景画像を使いたい場合 */
  /*
  background: url("../images/modal/bg.jpg") no-repeat center center / cover;
  */
}

/* モーダル本体 */
.force-modal__box {
  position: relative;
  z-index: 2;

  /* 画像まわりの余白 */
  padding: 20px;

  /* 最大幅 */
  width: 90vw;
  max-width: 1000px;

  box-sizing: border-box;
}

/* 表示画像 */
.force-modal__image {
  display: block;

  /* 画像サイズはここで調整 */
  width: 100%;
  max-width: 100%;
  max-height: 85vh;

  object-fit: contain;
  margin: 0 auto;
}

/* 閉じるボタン */
.force-modal__close {
  position: fixed;
  top: 20px;
  right: 0px;
  z-index: 3;

  width: 80px;
  height: 80px;

  border: none;
  padding: 0;
  cursor: pointer;

  /* 閉じるボタン画像 */
  background: url("../images_portal/menu/b_close.png") no-repeat center center / contain;
}

/* ボタン画像が読み込めない場合のため */
.force-modal__close::before {
  content: "";
}

/* モーダル表示中は背景ページをスクロールさせない */
body.force-modal-open {
  overflow: hidden;
}

/* スマホ調整 */
@media screen and (max-width: 480px) {

  .force-modal__box {
    width: 94vw;
    padding: 10px;
  }

  .force-modal__image {
    max-height: 80vh;
  }

  .force-modal__close {
    width: 60px;
    height: 60px;
  }

}



/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   綿流し
  =======================================================*/
footer {
  position: relative;
  overflow: hidden;
}

/* particles.js の背景レイヤー */
#wata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* particles.js が生成する canvas */
#wata .particles-js-canvas-el {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* footerの中身をcanvasより前面へ */
.foot_wrap {
  position: relative;
  z-index: 1;
}





#footer_ripple {
  position: relative;
  overflow: hidden;

  /* ripplesは背景画像がないと効果が見えにくい */
  background-image: url("images_portal/tmp/bg/footer_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* particles.js用 */
#wata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* particlesのcanvas */
#wata .particles-js-canvas-el {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* footerの中身 */
.foot_wrap {
  position: relative;
  z-index: 2;
}