:root {
  --rlp100-color--primary--default: #FFA600;
  --rlp100-color--secondary--default: #006BC9;
}

.rpl100-text-white {
  color: #ffffff !important;
}
.rpl100-text-center {
  text-align: center;
}
.rlp100-btn-bg-primary {
  color: #ffffff !important;
  background-color: var(--rlp100-color--secondary--default) !important;
}
.rlp100-btn-bg-primary-outline {
  color: var(--rlp100-color--secondary--default) !important;
  background-color: #ffffff !important;
  color: var(--rlp100-color--secondary--default);
  outline: 2px solid var(--rlp100-color--secondary--default);
  outline-offset: -2px;
}

.c-overflow-x {
  overflow-x: scroll;
}
.c-instantwin .c-overflow-x {
  margin-inline: calc( 50% - 50vw );

  @media (min-width: 768px) {
    margin-inline: 0;
  }
}

/* サイトディレクトリが表示されるので強制非表示 */
.sub-section {
  display: none;
}

@media (max-width: 767px) {
  img {
    width: 100%;
  }
}

/* ドロワーメニュー ヒット範囲の調整 */
.header-rakusta-lp__root .rlp-aside-menu-item a {
  width: 100%;
  justify-content: center;
}
/* ヘッダー ロゴ調整 */
/* .header-rakusta-lp__root {
    .rlp-header-logo {
        @media (min-width: 0px) {
          width: calc(64 * var(--as1Px));
          height: calc(22 * var(--as1Px));
        }
        @media (min-width: 768px) {
          width: calc(120 * var(--as1Px));
          height: calc(42 * var(--as1Px));
        }
    }
} */
/* メニューヘッダー固定 */
.header-rakusta-lp__root {
  position: fixed;
  background-color: white;
}
.template-rakusta-lp__body {

  @media (min-width: 0px) {
    padding-top: calc(40 * var(--as1Px));
  }
  @media (min-width: 768px) {
    padding-top: calc(80 * var(--as1Px));
  }
}

/*　コンテンツの表示・非表示 */
@media (min-width: 768px) {
  .mobile-only-rlp100 {
    display: none;
  }
}
@media (max-width: 767px) {
  .pc-only-rlp100 {
    display: none;
  }
}


/* -------------------------------------- */
/* ----------- Section Layout ----------- */
/* -------------------------------------- */
.rlp100-section {
    p {
      color: #000000;
    }

    @media (min-width: 0px) {
        padding-top: calc(50 * var(--as1Px));
        padding-bottom: calc(40 * var(--as1Px));
    }
    @media (min-width: 768px) {
          padding-top: calc(100 * var(--as1Px));
          padding-bottom: calc(80 * var(--as1Px));
    }
}
.rlp100-section--eyecatch {
  background-color: #F5F5F5;

  @media (min-width: 0px) {
    background-image: url('_images_/rakusta-lp100/bg_main_sp.png');
    background-size: cover;
    height: calc(635 * var(--as1Px));
    padding-top: calc(40 * var(--as1Px));
  }
  @media (min-width: 768px) {
    background-image: url('_images_/rakusta-lp100/bg_mian_pc.png');
    background-size: cover;
    height: calc(635 * var(--as1Px));
    max-height: 635px;
    padding-top: calc(80 * var(--as1Px));
  }
  @media (min-width: 1280px) {
    height: 635px;
    background-image: url('_images_/rakusta-lp100/bg_main_pc_xl.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

  }
}
.rlp100-section--about {
    @media (min-width: 768px) {
          padding-top: calc(120 * var(--as1Px));
    }
}
.rlp100-section--lineup {
  background-size: cover;

  @media (min-width: 0px) {
  background-image: url('_images_/rakusta-lp100/bg_lineup_sp.jpg');
  }
  @media (min-width: 768px) {
  background-image: url('_images_/rakusta-lp100/bg_lineup_pc.jpg');
  }
}
.rlp100-section--plan {
  background-color: var(--rlp100-color--secondary--default);
}
.rlp100-section--instantwin {
  background-color: #F9F9F9;
}
.rlp100-section--flow {
  background-color: #F9F9F9;
}


.rlp100-btn-ic--rakusta {
  width: calc(78 * var(--as1Px));
  margin-right: calc(6 * var(--as1Px));
}
.rlp100-btn-ic--contact {
  width: calc(48 * var(--as1Px));
  margin-right: calc(6 * var(--as1Px));
}
.rlp100-btn-ic--arrow {
  width: calc(40 * var(--as1Px));
}


/* -------------------------------------- */
/* ----------- Section Title ------------ */
/* -------------------------------------- */
.rlp100-section-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;

    div {

      @media (min-width: 0px) {
        width: calc(140 * var(--as1Px));
      }
      @media (min-width: 768px) {
        width: calc(210 * var(--as1Px));
      }
    }

    p {
      margin-bottom: 0;
      padding-left: calc(8 * var(--as1Px));
      font-weight: bold;
      color: #FFA600;

      @media (min-width: 0px) {
        font-size: calc(12 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(20 * var(--as1Px));
      }
    }
  }
.rlp100-section-title {
  text-align: center;
  letter-spacing: normal;

  @media (min-width: 0px) {
    font-size: calc(24 * var(--as1Px));
    padding-top: calc(12 * var(--as1Px));
  }
  @media (min-width: 768px) {
    font-size: calc(48 * var(--as1Px));
    padding-top: calc(20 * var(--as1Px));
  }
}


/* -------------------------------------- */
/* ----------- Section Body Common ------ */
/* -------------------------------------- */
.rlp100-section__body {

}

.c-heading {
  color: #006BC9;
  text-align: center;

  @media (min-width: 0px) {
    font-size: calc(24 * var(--as1Px));
    padding: calc(12 * var(--as1Px));
  }
  @media (min-width: 768px) {
    font-size:   calc(40 * var(--as1Px));
    padding: calc(20 * var(--as1Px));
  }

}
.c-introduction {
  font-weight: bold;

  @media (min-width: 0px) {
    font-size: calc(14 * var(--as1Px));
    padding: calc(12 * var(--as1Px));
  }
  @media (min-width: 768px) {
    text-align: center;
    font-size:   calc(20 * var(--as1Px));
    padding: calc(20 * var(--as1Px));
  }
}


/* -------------------------------------- */
/* ----------- Section eyecatch --------- */
/* -------------------------------------- */
.rlp100-section--eyecatch {
}

.c-eyecatch {
  display:flex;
  flex-flow: column;

  @media (min-width: 0px) {
    gap: calc(24 * var(--as1Px));
    width: calc(300 * var(--as1Px));
    margin-inline: auto;
  }
  @media (min-width: 768px) {
    gap: calc(24 * var(--as1Px));
    width: calc(345 * var(--as1Px));
    margin-left: calc(120 * var(--as1Px));
  }

  .c-eyecatch__logo {

    @media (min-width: 0px) {
      width: calc(250 * var(--as1Px));
      margin-inline: auto;
    }
    @media (min-width: 768px) {
      width: calc(345 * var(--as1Px));
    }
  }

  h1 {
    text-align: center;
    letter-spacing: normal;
    line-height: 170%;
    margin-bottom: 0;

    @media (min-width: 0px) {
      font-size: calc(24 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(30 * var(--as1Px));
    }

    strong {
      @media (min-width: 0px) {
      font-size: calc(40 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(48 * var(--as1Px));
      }
    }
  }
  .c-eyecatch__sub {
    background-color: var(--rlp100-color--secondary--default);
    border-radius: 9999px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0;
    line-height: normal;

    @media (min-width: 0px) {
      font-size: calc(14 * var(--as1Px));
      padding-block: calc(8 * var(--as1Px));
      padding-inline: calc(24 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(16 * var(--as1Px));
      padding-block: calc(8 * var(--as1Px));
      padding-inline: calc(24 * var(--as1Px));
    }
  }
}

.c-eyecatch-btn {
  margin-top: calc(100 * var(--as1Px));

    @media (min-width: 0px) {
      display: none;
    }
    @media (min-width: 768px) {
      display: block;
    }

  ul {
    display: flex;
    justify-content: center;
    gap: calc(24 * var(--as1Px));

    li {

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #006BC9;
        border-radius: 9999px;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        font-size: calc(24 * var(--as1Px));
        width: calc(460 * var(--as1Px));
        height: calc(92 * var(--as1Px));
       }

       .rlp100-btn-ic--arrow img {
         filter: invert(100%) sepia(79%) saturate(2%) hue-rotate(305deg) brightness(107%) contrast(101%);
       }

       /* ボタン　アウトライン */
      .rlp100-btn--outline {
        color: var(--rlp100-color--secondary--default);
        background-color: #ffffff;
        border: 2px solid var(--rlp100-color--secondary--default);

        .rlp100-btn-ic--arrow img {
          filter: invert(27%) sepia(75%) saturate(1741%) hue-rotate(189deg) brightness(99%) contrast(103%);
        }
      }
    }
  }
}


/* -------------------------------------- */
/* ----------- Section About ------------ */
/* -------------------------------------- */
.rlp100-section--about {

}


/* -------------------------------------- */
/* ----------- Section Lineup ----------- */
/* -------------------------------------- */
.rlp100-section--lineup {

}

.c-lineup {
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
  border-radius: calc(16 * var(--as1Px));

  @media (min-width: 0px) {
    width: calc(288 * var(--as1Px));
    padding-top: calc(24 * var(--as1Px));
    padding-bottom: calc(16 * var(--as1Px));
    padding-inline: calc(24 * var(--as1Px));
  }
  @media (min-width: 768px) {
    width: calc(1120 * var(--as1Px));
    padding-top: calc(40 * var(--as1Px));
    padding-bottom: calc(24 * var(--as1Px));
    padding-inline: calc(24 * var(--as1Px));
  }

  .c-lineup__list {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;
    padding-left: 0;
    margin: 0;
    color: #000000;

    @media (min-width: 0px) {
      flex-wrap: wrap;
      font-size: calc(10 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(14 * var(--as1Px));
    }

    li {
      text-align: center;
      padding: calc(12 * var(--as1Px)) 0;

      @media (min-width: 0px) {
        width: 50%;
      }
      @media (min-width: 768px) {
        flex-basis: 0;
        flex-grow: 1;
      }
    }
  }
  .c-lineup__more {
    margin-inline: auto;

    @media (min-width: 0px) {
      width: calc(4 * var(--as1Px));
    }
    @media (min-width: 768px) {
      width: calc(8 * var(--as1Px));
    }
  }

  .c-lineup__list:nth-child(1) {
    font-weight: bold;
  }
  .c-lineup__list:nth-child(2) {
    color: #7d7d7d;
  }
  .c-lineup__list:nth-child(3) {
    border-bottom: none;
    color: #c2c2c2;
  }
}


/* -------------------------------------- */
/* ----------- Section Customize -------- */
/* -------------------------------------- */
.rlp100-section--customize {
}

.c-customize-card-list {
  display: flex;
  margin-inline: auto;

  @media (min-width: 0px) {
    flex-flow: column;
    gap: calc(40 * var(--as1Px));
    width: calc(288 * var(--as1Px));
  }
  @media (min-width: 768px) {
    flex-flow: row;
    gap: calc(64 * var(--as1Px));
    width: calc(1200 * var(--as1Px));
  }
}
.c-customize-card {
  flex-basis: 0;
  flex-grow: 1;
}
.c-customize-card__head {
}
.c-customize-card__body {
  h3 {
    color: var(--rlp100-color--secondary--default);
    margin-bottom: 0;

    @media (min-width: 0px) {
      font-size: calc(20 * var(--as1Px));
      margin-top: calc(24 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(30 * var(--as1Px));
      margin-top: calc(30 * var(--as1Px));
    }
  }
  p {
    margin-bottom: 0;

    @media (min-width: 0px) {
      font-size: calc(14 * var(--as1Px));
      margin-top: calc(16 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(18 * var(--as1Px));
      margin-top: calc(30 * var(--as1Px));
    }
  }
}

/* ----------------------------------------- */
/* ----------- Section instantwin ---------- */
/* ----------------------------------------- */
.rlp100-section--instantwin {
}

.c-instantwin {
  margin-inline: auto;

  @media (min-width: 0px) {
    width: calc(288 * var(--as1Px));
  }
  @media (min-width: 768px) {
    width: calc(1000 * var(--as1Px));
  }

  .c-instantwin__title {
    text-align: center;
    color: var(--rlp100-color--primary--default);

    @media (min-width: 0px) {
      font-size: calc(20 * var(--as1Px));
    }
    @media (min-width: 768px) {
      font-size: calc(30 * var(--as1Px));
    }
  }
  .c-instantwin__image {

    @media (min-width: 0px) {
      width: calc(746 * var(--as1Px));
      padding-inline: calc(20 * var(--as1Px));
      padding-bottom: calc(16 * var(--as1Px));
    }
    @media (min-width: 768px) {
      width: calc(1000 * var(--as1Px));
      padding: calc(8 * var(--as1Px));
    }
  }
  .c-instantwin__text {
    background-color: #ffffff;

    @media (min-width: 0px) {
      padding-inline: calc(16 * var(--as1Px));
      padding-block: calc(40 * var(--as1Px));
      margin-top: calc(24 * var(--as1Px));
    }
    @media (min-width: 768px) {
      padding-inline: calc(100 * var(--as1Px));
      padding-block: calc(40 * var(--as1Px));
      margin-top: calc(40 * var(--as1Px));
    }

    .text-instantwin {
      text-align: center;
      font-weight: bold;

      @media (min-width: 0px) {
        font-size: calc(16 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(20 * var(--as1Px));
      }
    }
    p:last-child {
      margin-bottom: 0;
    }
  }
}


/* -------------------------------------- */
/* ----------- Section SNS -------------- */
/* -------------------------------------- */
.rlp100-section--sns {

}
.c-sns-image {
  margin-inline: auto;

  @media (min-width: 0px) {
     width: calc(260 * var(--as1Px));
  }
  @media (min-width: 768px) {
     width: calc(600 * var(--as1Px));
  }
}
.c-sns-text {
  color: #727272;

  @media (min-width: 0px) {
    font-size: calc(12 * var(--as1Px));
    text-align: left;
    padding-inline: calc(12 * var(--as1Px));
  }
  @media (min-width: 768px) {
    font-size: calc(20 * var(--as1Px));
    text-align: center;
    padding-inline: calc(40 * var(--as1Px));
  }
}


/* -------------------------------------- */
/* ----------- Section flow ------------- */
/* -------------------------------------- */
.rlp100-section--flow {

}

.c-flow {
  margin-inline: auto;

  @media (min-width: 0px) {
    width: 100%;
    margin-top: calc(40 * var(--as1Px));
  }
  @media (min-width: 768px) {
    width: calc(800 * var(--as1Px));
    margin-top: calc(60 * var(--as1Px));
  }

  h3 {
    background-color: var(--rlp100-color--secondary--default);
    color: #ffffff;
    margin-inline: auto;

    @media (min-width: 0px) {
      width: calc(288 * var(--as1Px));
      font-size: calc(14 * var(--as1Px));
      border-radius: calc(8 * var(--as1Px));
      padding: calc(16 * var(--as1Px));
      margin-bottom: calc(24 * var(--as1Px));
    }
    @media (min-width: 768px) {
      width: 100%;
      font-size: calc(24 * var(--as1Px));
      border-radius: calc(8 * var(--as1Px));
      padding-inline: calc(16 * var(--as1Px));
      padding-block: calc(8 * var(--as1Px));
      margin-bottom: calc(24 * var(--as1Px));
    }
  }

  .c-flow__image {

    @media (min-width: 0px) {
      width: calc(746 * var(--as1Px));
      padding-inline: calc(20 * var(--as1Px));
      padding-bottom: calc(16 * var(--as1Px));
    }
    @media (min-width: 768px) {
      width: calc(800 * var(--as1Px));
      padding: calc(8 * var(--as1Px));
    }

    img {
      filter: drop-shadow(1px 3px 4px #cbcbcb);
    }
  }
  .c-flow__text {
    margin-inline: auto;

    @media (min-width: 0px) {
      width: calc(288 * var(--as1Px));
      font-size: calc(14 * var(--as1Px));
      margin-top: calc(4 * var(--as1Px));
    }
    @media (min-width: 768px) {
      width: 100%;
      font-size: calc(18 * var(--as1Px));
      margin-top: calc(24 * var(--as1Px));
    }
  }

}


/* ------------------------------------------ */
/* ----------- Section Price plan ----------- */
/* ------------------------------------------ */
.rlp100-section--plan {

}

.c-plan {
  margin-inline: auto;

  @media (min-width: 0px) {
    width: calc(288 * var(--as1Px));
  }
  @media (min-width: 768px) {
    width: calc(950 * var(--as1Px));
  }

  .c-plan__card-list {
    display: flex;

    @media (min-width: 0px) {
      flex-flow: column;
      gap: calc(30 * var(--as1Px));
    }
    @media (min-width: 768px) {
      flex-flow: row;
      gap: calc(30 * var(--as1Px));
    }
  }
  .c-plan__card {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    background-color: #ffffff;

    @media (min-width: 0px) {
      border-radius: calc(24 * var(--as1Px));
      padding-block: calc(40 * var(--as1Px));
    }
    @media (min-width: 768px) {
      border-radius: calc(24 * var(--as1Px));
      padding-block: calc(40 * var(--as1Px));
    }

    h4 {
      color: var(--rlp100-color--secondary--default);
      background-color: #ffffff;
      border-radius: 9999px;
      margin-inline: auto;

      @media (min-width: 0px) {
        width: calc(200 * var(--as1Px));
        font-size: calc(20 * var(--as1Px));
        border: calc(3 * var(--as1Px)) solid var(--rlp100-color--secondary--default);
      }
      @media (min-width: 768px) {
        width: calc(250 * var(--as1Px));
        font-size: calc(20 * var(--as1Px));
        border: calc(3 * var(--as1Px)) solid var(--rlp100-color--secondary--default);
      }
    }
    p {

      @media (min-width: 0px) {
        font-size: calc(24 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(24 * var(--as1Px));
      }

      strong {
        @media (min-width: 0px) {
        font-size: calc(40 * var(--as1Px));
        }
        @media (min-width: 768px) {
          font-size: calc(40 * var(--as1Px));
        }
      }
    }
    ul {
      color: #000000;
      padding-left: 0;
      margin-bottom: 0;

      @media (min-width: 0px) {
        font-size: calc(18 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(18 * var(--as1Px));
      }

      li {
        display: flex;
        justify-content: center;

        div {
          @media (min-width: 0px) {
            width: calc(24 * var(--as1Px));
          }
          @media (min-width: 768px) {
            width: calc(24 * var(--as1Px));
          }
        }
      }
    }
  }
  .c-plan__card--standard {
  }
  .c-plan__card--oremium {
  }
  .c-plan-text {
    margin-bottom: 0;

    @media (min-width: 0px) {
      text-align: left;
      margin-top: calc(24 * var(--as1Px));
      font-size: calc(13 * var(--as1Px));
    }
    @media (min-width: 768px) {
      text-align: center;
      margin-top: calc(40 * var(--as1Px));
      font-size: calc(16 * var(--as1Px));
    }
  }


}