@charset "utf-8";

/*------------  popup  ------------*/
#js_popup{ display: none;}
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: .6s; }
.popup.is_show { opacity: 1; visibility: visible; }

.popup_inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 640px; background: #fff; z-index: 2; border-radius: 6px; overflow: hidden; }
.popup_title { padding: 14px 4%; background: #ec6200e0; font-size: 22px; color: #fff; }
/*.popup_txt { padding: 28px 4%; font-size: 16px; line-height: 1.6; color: #c9161d; }*/

.close_btn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; text-align: center; cursor: pointer; }
.close_btn:hover { opacity: .5; }
.close_btn .close_icon { position: relative; display: block; width: 100%; height: 100%; }
.close_btn .close_icon::before { content: ""; position: absolute; top: 50%; left: 20%; width: 60%; height: 2px; background: #fff; transform: rotate(-45deg); border-radius: 1px; }
.close_btn .close_icon::after { content: ""; position: absolute; top: 50%; left: 20%; width: 60%; height: 2px; background: #fff; transform: rotate(45deg); border-radius: 1px; }

.black_background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 1; cursor: pointer; }


@media screen and (max-width: 800px) {

  .popup_title { padding: 13px 4%; font-size: 14px; }
  .popup_txt { padding: 22px 4%; font-size: 14px; }
  .close_btn { width: 44px; height: 44px; }

}

@media screen and (max-width: 420px) {

  .popup_title { padding: 13px 4%; font-size: 10px; }

}

/*スライド*/

#slide{ padding: 32% 4%; position: relative; background: none; }

#slide > div {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .8s ease;
  opacity: 0;
}
#slide > div.show {
  opacity: 1;
  z-index: 10;
}