@charset "UTF-8";

.pc_hidden {
    display: none;
}
/* -- Setting -- */
.modal-wrap,
.modal-wrap-sns, .modal-wrap-user,
.modal-what-number, .modal-thanks-wrap, .modal-point-wrap, .modal-user-registration-wrap,
.modal-wrap-alert-user {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
  visibility: hidden;
  z-index: 11;
}

.modal-wrap .no-click-overlay, .modal-wrap .overlay,
.modal-wrap-sns .overlay,
.modal-wrap-user .overlay, .modal-what-number .overlay,
.modal-thanks-wrap .overlay, .modal-point-wrap .overlay,
.modal-user-registration-wrap .overlay,
.modal-wrap-alert-user .overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(65, 65, 65, 0.6);
  cursor: pointer;
  transition: 0.5s;
}
.modal-wrap .no-click-overlay {
    position: fixed;
    top: 70px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url('/img/c/demo/modal_url_bg.jpg') no-repeat;
    background-size: cover;
    background-position-y: center;
    cursor: initial;
}
.modal-wrap .modal-inner, .modal-wrap-sns .modal-inner,
.modal-wrap-user .modal-inner, .modal-what-number .modal-inner,
.modal-wrap-alert-user .modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: calc(100% - 32px);
  text-align: center;
  padding: 1em;
  background: white;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 10px;
}
.modal-wrap .modal-inner,
.modal-wrap-user .modal-inner,
.modal-what-number .modal-inner {
    padding: 20px 30px;
}
.modal-wrap-alert-user .modal-inner {
  width: 100%;
  max-width: 512px;
  padding: 40px 30px 10px;
}
.modal-thanks-wrap .modal-inner-thanks,
.modal-user-registration-wrap .modal-inner
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: calc(100% - 32px);
  min-height: 310px;
  text-align: center;
  padding: 1em;
  background: url("/img/modal/modal_bg.png") no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal-thanks-wrap .modal-inner-thanks .thanks_inner,
.modal-user-registration-wrap .modal-inner .inner {
    width: 100%;
    max-width: calc(100% - 15px);
    margin: 0px auto 15px;
    text-align: center;
}
.modal-thanks-wrap .modal-inner-thanks .thanks_inner img,
.modal-point-wrap .modal-inner-point .thanks_inner img,
.modal-user-registration-wrap .modal-inner .inner img {
  width: 250px;
}
.modal-thanks-wrap .modal-inner-thanks .thanks_inner h3.thanks,
.modal-user-registration-wrap .modal-inner .inner h3.notification {
    font-size: 2.4rem;
    color: #F6828E;
    font-weight: 600;
}
.modal-user-registration-wrap .modal-inner .inner h3.notification {
  font-size: 1.6rem;
  color: #333;
}
.modal-user-registration-wrap .modal-inner .inner h3.notification span.num {
  color: #F6828E;
}
.modal-thanks-wrap .modal-inner-thanks .thanks_inner p,
.modal-user-registration-wrap .modal-inner .inner p {
    margin-top: 10px;
    font-size: 1.4rem;
}
.modal-point-wrap .modal-inner-point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: calc(100% - 32px);
  height: 310px;
  text-align: center;
  padding: 1em;
  background: url("/img/modal/modal_bg.png") no-repeat;
  background-size: contain;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal-point-wrap .modal-inner-point .thanks_inner,
.modal-user-registration-wrap .modal-inner .inner
 {
    width: 100%;
    max-width: calc(100% - 15px);
    margin: 15px auto;
    text-align: center;
}
.modal-point-wrap .modal-inner-point .thanks_inner h3.point {
    font-size: 2.4rem;
    min-height: 38px;
    color: #FFBC40;
    font-weight: 600;
}
.modal-point-wrap .modal-inner-point .thanks_inner p,
.modal-user-registration-wrap .modal-inner .inner p {
    margin-top: 10px;
    font-size: 1.4rem;
}
/*ファンが増えましたモーダル文字余白真ん中寄せ*/
.modal-user-registration-wrap .modal-inner .inner .text-inner-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  height: 95px;
}
img.notification {
  margin-top: 20px;
}
/*animation*/
/* 拡大 */
.zoomin{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}
/*シャドウ*/
.box-shadow {
    filter: drop-shadow(1px 0px 7px rgba(0, 0, 0, 0.4));
}

.modal-wrap-sns .modal-inner .modal-close,
.modal-wrap-user .modal-inner .modal-close,
.modal-wrap-alert-user .modal-inner .modal-close,
.modal-wrap-alert-user .modal-inner .modal-close {
  position: absolute;
  cursor: pointer;
  top: -8px;
  right: -5px;
  background: transparent;
  border: none;
}
.modal-wrap .modal-inner .modal-close,
.modal-wrap-user .modal-inner .modal-close,
.modal-wrap-alert-user .modal-inner .modal-close {
    position: absolute;
    cursor: pointer;
    top: 15px;
    right: 10px;
    background: transparent;
    border: none;
}
.modal-thanks-wrap .modal-inner-thanks .modal-close,
.modal-point-wrap .modal-inner-point .modal-close,
.modal-user-registration-wrap .modal-inner .modal-close {
    position: absolute;
    cursor: pointer;
    top: 44px;
    right: 20px;
    background: transparent;
    border: none;
}
.modal-thanks-wrap .modal-inner-thanks .modal-close {
  top: 14%;
  right: 4%;
}
.modal-wrap .modal-inner .modal-close .b-close,
.modal-wrap-user .modal-inner .modal-close .b-close,
.modal-what-number .modal-inner .modal-close .b-close,
.modal-wrap-sns .modal-inner .modal-close .b-close,
.modal-thanks-wrap .modal-inner-thanks .modal-close .b-close,
.modal-point-wrap .modal-inner-point .modal-close .b-close,
.modal-user-registration-wrap .modal-inner .modal-close .b-close,
.modal-wrap-alert-user .modal-inner .modal-close .b-close {
  display: none;
}

.modal-wrap .modal-inner .modal-close::after,
.modal-wrap-user .modal-inner .modal-close::after,
.modal-what-number .modal-inner .modal-close::after,
.modal-wrap-sns .modal-inner .modal-close::after,
.modal-thanks-wrap .modal-inner-thanks .modal-close::after,
.modal-point-wrap .modal-inner-point .modal-close::after,
.modal-user-registration-wrap .modal-inner .modal-close::after,
.modal-wrap-alert-user .modal-inner .modal-close::after
{
  content: "";
  display: inline-block;
  background: url("/img/icon/i_b-close.svg") no-repeat;
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}

.modal-wrap .modal-inner table.entry-table td,.modal-wrap-user .modal-inner table.entry-table td, .modal-wrap-sns .modal-inner table.entry-table td {
  padding: 5px;
}

.modal-wrap .modal-inner table.entry-table th, .modal-wrap-sns .modal-inner table.entry-table th {
  padding: 5px;
}

.modal-wrap .modal-inner .top-area, .modal-wrap-sns .modal-inner .top-area {
  margin-top: 10px;
}
.modal-wrap .modal-inner .top-area h3,
.modal-wrap-user .modal-inner .top-area h3,
.modal-what-number .modal-inner .top-area h3 {
    font-size: 1.8rem;
}
.modal-wrap-alert-user .modal-inner .top-area h3 {
    font-size: 1.6rem;
}
.modal-wrap-alert-user .modal-inner .top-area h3 {
  font-weight: 500;
}
.modal-what-number .modal-inner .top-area h3 {
    color: #D84A28;
}
.modal-what-number .modal-inner .top-area .link_area a{
    text-decoration: underline;
    color: #D84A28;
}
.modal-wrap .modal-inner .modal-middle,
.modal-wrap-user .modal-inner .modal-middle,
.modal-what-number .modal-inner .modal-middle,
.modal-wrap .modal-inner .singup-bottom-area,
.modal-wrap-sns .modal-inner .modal-middle,
.modal-wrap-alert-user .modal-inner .modal-middle,
.modal-wrap-sns .modal-inner .singup-bottom-area,
.modal-wrap-user .modal-inner .btn_area,
.modal-what-number .modal-inner .btn_area {
  width: 100%;
  max-width: 336px;
  margin: 0 auto;
  text-align: left;
}
.modal-wrap-alert-user .modal-inner .modal-middle .bg-gray-area {
  width: 100%;
  padding: 10px 5px;
  background: #f7f7f7;
  border-radius: 0.5rem;
  margin-bottom: 10px;
}
.modal-wrap-alert-user .modal-inner .modal-middle .bg-gray-area p {
  font-size: 1.2rem;
}
.modal-wrap-alert-user .modal-inner .modal-middle .bg-gray-area a {
  text-decoration: underline;
  font-size: 1.2rem;
}
.modal-wrap .modal-inner .singup-bottom-area p.box-btn {
    font-size: 1.4rem;
}
.modal-wrap .modal-inner .link_area, .modal-wrap-sns .modal-inner .link_area {
  position: relative;
  width: 200px;
  margin: 10px auto;
}

.modal-wrap .modal-inner .pass-ok, .modal-wrap-sns .modal-inner .pass-ok {
  position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}

.modal-wrap .modal-inner .pass-ok {
  display: contents;
}

.modal-wrap .modal-inner .under_line, .modal-wrap-sns .modal-inner .under_line, .modal-wrap-alert-user .modal-inner .under_line {
  border-bottom: 1px solid #000000;
}

.modal-wrap .modal-inner .singup-bottom-area .under_line p, .modal-wrap-sns .modal-inner .singup-bottom-area .under_line p {
  margin: 15px 0;
}

.modal-wrap .modal-inner .sns_area, .modal-wrap-sns .modal-inner .sns_area {
  border-top: 1px solid #EFEFEF;
}

.modal-wrap .modal-inner .sns_area .sns_area_inner, .modal-wrap-sns .modal-inner .sns_area .sns_area_inner {
  max-width: 336px;
  margin: 0 auto;
  text-align: left;
  padding-top: 10px;
}

.modal-wrap .modal-inner .btn_r-box-btn, .modal-wrap-sns .modal-inner .btn_r-box-btn {
  max-width: 336px;
}

.modal-wrap.show, .modal-top-wrap.show, .modal-wrap-sns.show,
.modal-wrap-user.show, .modal-what-number.show, .modal-thanks-wrap.show, .modal-point-wrap.show, .modal-user-registration-wrap.show,
.modal-wrap-alert-user.show {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
  visibility: visible;
  z-index: 10000;
}

/*インスタグラム編集用*/
.modal-wrap .modal-inner .sns_inner{
    width: 100%;
    max-width: 336px;
    margin: 10px auto;
}
.modal-wrap .modal-inner .sns_inner h3{
    font-size: 1.8rem;
}
.modal-wrap .modal-inner .sns_inner .sns_text {
    margin: 20px 0;
}
.modal-wrap .modal-inner .sns_inner .sns_text .input_text_area .label_area{
    text-align: left;
    margin: 10px 0 5px;
}
.modal-wrap .modal-inner .sns_inner .sns_text .checkbox01 input[type="checkbox"]+label::before {
    margin-top: -11px;
}
.modal-wrap .modal-inner .sns_inner .sns_text .checkbox01 input[type="checkbox"]:checked+label::after {
    margin-top: -7px;
}
/*楽しみ方 modal*/
.modal-wrap .modal-inner .fan_inner {
    width: 100%;
    position: relative;
    /* max-width: 336px;
    margin: 10px auto; */
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .slick-next {
    position: absolute;
    top: 50%;
    left: -65px;
    font-size: 0;
    transform: translateY(-50%);
    background: url("../../img/modal/l_arrow.svg") no-repeat;
    width: 75px;
    height: 75px;
    background-size: contain;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .slick-prev {
    position: absolute;
    top: 50%;
    right: -65px;
    font-size: 0;
    transform: translateY(-50%);
    background: url("../../img/modal/r_arrow.svg") no-repeat;
    width: 75px;
    height: 75px;
    background-size: contain;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step {
    width: 100%;
    max-width: 336px;
    display: flex;
    flex-direction: column;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step .img_area {
    padding: 0 5px;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step .img_area img {
    width: 100%;
    object-fit: contain;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step .step_text {
    width: 100%;
    margin-top: 5px;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step .step_text h4 {
    font-size: 1.8rem;
    text-align: center;
}
.modal-wrap .modal-inner .fan_inner .fan_howto_list .step .step_text p {
    font-size: 1.0rem;
}
.modal-wrap .modal-inner .fan_inner .slide-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.slide-dots li.slick-active button:before {
    color: #333 !important;
}
.slide-dots li button:before {
    color: #ffffff !important;
}
/* URL移動通知 */
.modal-wrap .modal-inner .change_url {
    width: 100%;
    max-width: calc(100% - 10px);
    margin: 0 auto;
    text-align: center;
}
.modal-wrap .modal-inner .change_url .img_area {
    padding: 10px 0 5px;
}
.modal-wrap .modal-inner .change_url .img_area img{
    width: 100%;
    max-width: 475px;
    height: 257px;
    object-fit: contain;
}
.modal-wrap .modal-inner .change_url .change_add_text {
    padding: 20px 0;
}
.modal-wrap .modal-inner .change_url .change_add_text p {
    font-size: 2.0rem;
}
.modal-wrap .modal-inner .change_url .btn_area {
    display: block;
    padding-bottom: 15px;
}
#modal-get-point .modal-inner {
  background: transparent;
  width: 350px;
  margin: auto auto;
  padding: 0;

}
#modal-get-point .get-daily-point {
    position: relative;
    background-image: url(../../img/modal/modal_point.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 320px;
}
#modal-get-point .get-daily-point .point-inner {
    position: absolute;
    width: 100%;
    bottom: 40px;
}
/* canvas */
#canvas4confetti{
    background-color: rgba(0, 0, 0, 0);
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
/*OMO*/
.modal-wrap-alert-user .modal-inner .top-area i {
  width: 36px;
  height: 36px;
  margin-right: 0;
  margin-bottom: 10px;
}
.modal-wrap-alert-user .modal-inner .top-area i {
  filter: invert(10%) sepia(100%) saturate(7477%) hue-rotate(17deg) brightness(95%) contrast(122%);
}
.modal-wrap-alert-user .modal-inner .top-area i.ex-twitter_join {
  filter:invert();
  width: initial;
  height: initial;
  left: -28px;
  top: -4px;
}
/* ここまで */
/*新規登録*/
.modal-wrap-user .modal-inner .top-area .mail-message-img {
  width: 100px;
  margin: 10px auto;
}
.modal-wrap-user .modal-inner .top-area h3.mail-message {
  font-size: 1.6rem;
}
/*モーダル内縦スクロール*/
.scroll_y {
  max-height: 200px;
  padding: 5px;
  overflow-y: auto;
}
@media screen and (min-width: 767px) {
  .modal-wrap .modal-inner, .modal-wrap-user .modal-inner,
  .modal-wrap-sns .modal-inner, .modal-what-number .modal-inner {
    max-width: 512px;
  }
  .modal-thanks-wrap .modal-inner-thanks,
  .modal-point-wrap .modal-inner-point,
  .modal-user-registration-wrap .modal-inner {
    max-width: 340px;
  }
  .modal-wrap .modal-inner.fan {
    max-width: 390px;
    padding: 30px 25px;
    margin: 0 auto;
  }
  .modal-wrap-sns .h-modal {
    height: 300px;
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .pc_hidden {
    display: block;
  }
  .modal-wrap .tieup-modal-inner{
    top: 5%;
  }
  .modal-wrap-alert-user .modal-inner {
    max-width: calc(100% - 32px);
  }
  .modal-wrap .modal-inner, .modal-wrap-sns .modal-inner {
    width: 90%;
  }
  .modal-wrap .modal-inner.fan {
    width: 85%;
    padding: 20px 15px;
  }
  .modal-wrap .modal-inner .btn_g-box-btn,
  .modal-wrap .modal-inner .btn_facebook,
  .modal-wrap .modal-inner .btn_twitter,
  .modal-wrap .modal-inner .btn_line, .modal-wrap-sns .modal-inner .btn_g-box-btn,
  .modal-wrap-sns .modal-inner .btn_facebook,
  .modal-wrap-sns .modal-inner .btn_twitter,
  .modal-wrap-sns .modal-inner .btn_line {
    width: 100%;
    margin: 3px 0;
  }
  .modal-wrap .modal-inner .sns_area .sns_area_inner, .modal-wrap-sns .modal-inner .sns_area .sns_area_inner {
    padding-top: 20px;
  }
  .modal-wrap .modal-inner .sns_area .singup-bottom-area, .modal-wrap-sns .modal-inner .sns_area .singup-bottom-area {
    padding-top: 20px;
  }
  /*icon*/
  .modal-wrap .modal-inner .change_url {
    max-width: calc(100% - 16px);
  }
  .modal-wrap .modal-inner .change_url .img_area img {
    max-width: 294px;
    height: 160px;
  }
  .modal-wrap .modal-inner .change_url .change_add_text p {
    font-size: 1.6rem;
    }
    .modal-what-number .modal-inner .top-area h3 {
        color: #D84A28;
        text-align: left;
        width: 100%;
        max-width: calc(100% - 30px);
        margin: 0 auto;
        margin-left: 30px;
        position: relative;
    }
    .modal-what-number .modal-inner .top-area h3.i-check_number::before {
        position: absolute;
        left: -30px;
        top: 5px;
    }
    /*slider*/
    .modal-wrap .modal-inner .fan_inner .fan_howto_list .step {
        width: 100%;
        max-width: 284px;
    }
    .modal-wrap .modal-inner .fan_inner .fan_howto_list .slick-prev {
        right: -40px;
        width: 65px;
        z-index: 1;
    }
    .modal-wrap .modal-inner .fan_inner .fan_howto_list .slick-next {
        left: -40px;
        width: 65px;
        z-index: 1;
    }
    .modal-wrap .modal-inner .fan_inner .slide-dots li button:before {
        font-size: 1.0rem;
    }
    .modal-wrap .modal-inner .fan_inner .slide-dots {
        bottom: -5px;
    }
    .modal-wrap .modal-inner .modal-close, .modal-wrap-user .modal-inner .modal-close,
    .modal-wrap-ditail-user .modal-inner .modal-close {
      top: 5px;
      right: 2px;
    }
}