@charset "UTF-8";
/*--------------------------
 ブレークポイント設定
----------------------------*/
[data-jaccs-modal] {
  cursor: pointer; }

/*--------------------------
 jaccs-modal
----------------------------*/
.jaccs-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 150000;
  font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s; }
  .jaccs-modal.-modal-active {
    opacity: 1;
    pointer-events: auto; }
  .jaccs-modal a {
    text-decoration: none;
    color: #595959; }
  .jaccs-modal .pc-only {
    display: inherit; }
    @media screen and (max-width: 767px) {
      .jaccs-modal .pc-only {
        display: none; } }
  .jaccs-modal .sp-only {
    display: none; }
    @media screen and (max-width: 767px) {
      .jaccs-modal .sp-only {
        display: inherit; } }

.jaccs-modal__wrap {
  position: relative;
  max-width: 750px;
  max-height: calc(100vh - 140px);
  width: 100%;
  height: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__wrap {
      max-width: none;
      max-height: none;
      width: 86vw;
      height: 78vh; } }

.jaccs-modal__inner {
  height: 100%;
  padding: 40px 119px;
  background-color: #fff;
  overflow: auto; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__inner {
      padding: 8vw 5.33333vw 10.66667vw; } }

.jaccs-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #696969;
  z-index: 10;
  cursor: pointer; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__close {
      top: -4.26667vw;
      right: -4.26667vw;
      width: 8.53333vw;
      height: 8.53333vw; } }
  .jaccs-modal__close::before, .jaccs-modal__close::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 60%;
    height: 3px;
    background-color: #fff;
    margin: auto; }
    @media screen and (max-width: 767px) {
      .jaccs-modal__close::before, .jaccs-modal__close::after {
        height: 2px; } }
  .jaccs-modal__close::before {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .jaccs-modal__close::after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.jaccs-modal__head {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
  font-family: "Yu Gothic", YuGothic, sans-serif;
  font-size: 20px;
  text-align: center;
  line-height: 1.3; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__head {
      margin-bottom: 6.4vw;
      padding-bottom: 5.33333vw;
      font-size: 18px;
      font-size: 4.8vw; } }
  .jaccs-modal__head::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 60px;
    height: 2px;
    margin: 0 auto;
    background-color: #094;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxOWE0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzZDY0OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-linear-gradient(0deg, #019a44, #63d649);
    background: -webkit-linear-gradient(0deg, #019a44, #63d649);
    background: linear-gradient(90deg, #019a44, #63d649); }
    @media screen and (max-width: 767px) {
      .jaccs-modal__head::before {
        width: 16vw;
        height: 2px; } }

.jaccs-modal__step {
  margin-bottom: 32px; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__step {
      margin-bottom: 5.33333vw; } }

.jaccs-modal__step__head {
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 500;
  text-align: center;
  color: #094; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__step__head {
      margin-bottom: 6.4vw;
      font-size: 25px;
      font-size: 6.66667vw; } }

.jaccs-modal__step__txt {
  margin-bottom: 12px;
  font-size: 14px;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__step__txt {
      margin-bottom: 3.2vw;
      font-size: 12px;
      font-size: 3.2vw; } }

.jaccs-modal__step__img {
  margin-bottom: 16px; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__step__img {
      margin-bottom: 3.2vw; } }

.jaccs-modal__btn {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 12px;
  border: 2px solid #000;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__btn {
      margin-bottom: 3.73333vw;
      padding: 3.2vw;
      border-width: 1px;
      font-size: 12px;
      font-size: 3.2vw; } }
  .jaccs-modal__btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto 16px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
    @media screen and (max-width: 767px) {
      .jaccs-modal__btn::before {
        width: 3.73333vw;
        height: 3.73333vw;
        margin: auto 4.26667vw;
        border-width: 1px; } }

.jaccs-modal__btn__txt {
  display: block;
  font-size: 18px;
  font-weight: 600;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__btn__txt {
      font-size: 15px;
      font-size: 4vw; } }

.jaccs-modal__btn__notes {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__btn__notes {
      font-size: 10px;
      font-size: 2.66667vw; } }

.jaccs-modal__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .jaccs-modal__link {
      font-size: 12px;
      font-size: 3.2vw; } }

/*
  
            <div class="jaccs-modal">
              <div class="jaccs-modal__inner">
                <h2 class="jaccs-modal__head">JACCS ショッピングローン<br>（分割払い）について</h2>
                <div class="jaccs-modal__step">
                  <h3 class="jaccs-modal__step__head">お申し込みの3ステップ</h3>
                  <p class="jaccs-modal__step__txt">
                    注文完了画面で「注文を確定する」ボタンをクリック
                  </p>
                  <figure class="jaccs-modal__step__img">
                    
                  </figure>
                  <p class="jaccs-modal__step__txt">
                    （株）ジャックスのお申込み画面にて、お手続きください。
                  </p>
                  <figure class="jaccs-modal__step__img">
                    
                  </figure>
                  <p class="jaccs-modal__step__txt">
                    （株）ジャックスにおいて審査承認が確認でき次第、ご注文を確定します。
                  </p>
                <!--/.jaccs-modal__step--></div>
                <a href="/shop/pages/guide_payment_jaccs.aspx" class="jaccs-modal__btn" target="_blank">
                  <span class="jaccs-modal__btn__txt">より詳しいご説明はこちら</span>
                  <span class="jaccs-modal__btn__notes">※別ウインドウが開きます</span>
                </a>
                <a href="/shop/pages/guide_payment_jaccs.aspx#faq" class="jaccs-modal__link">よくある質問 &#9654;</a>
                <div class="jaccs-modal__close"><!--/.jaccs-modal__close--></div>
              <!--/.jaccs-modal__inner--></div>
            <!--/.jaccs-modal--></div>
*/