@charset "UTF-8";
:root {
  --black: 51,51,51;
  --red: 238,0,59;
  --dark_red: 207,28,85;
  --main: 171,94,173;
  --accent: 227,55,129;
  --note: 102,102,102;
  --bg: 243,243,243;
  --gray: 153,153,153;
  --dark_gray: 167,167,167;
  --border: 210,211,212;
  --light_pink: 242,238,246;
  --beige: 242,238,230;
  --green: 92,198,172;
  --blue: 16,120,237;
  --purple: 195,129,203;
  --light_purple: 250,244,255;
  --pink_purple: 203,75,138;
  --blue: 87 129 234;
  --yellow: 255 183 3;
  --beauty_main: 233,83,131;
  --beauty_light_pink: 252,229,237;
  --contents_width: 1100px;
  --body_padding_side: 60px;
  --contents_width_with_padding: 1160px;
  --sidebar_width: 250px;
  --hover_opacity: .7;
}

/* .l-container
================================================ */
#bmc_off .l-container {
  padding-top: 0;
}

/* 汎用クラス
================================================ */
@media all and (min-width: 768px) {
  .bmc_off-box {
    width: 750px;
    margin-inline: auto;
    border-radius: 30px;
  }
  .bmc_off-use .bmc_off-box {
    width: 980px;
  }
}
.bmc_off-box__head {
  font-size: 2rem;
  border-radius: 15px 15px 0 0;
  color: #fff;
  border: 2px solid;
  padding: 0.2em;
}
@media all and (min-width: 768px) {
  .bmc_off-box__head {
    font-size: 2.4rem;
  }
}
.bmc_off-rank__bmc .bmc_off-box__head {
  border-color: #ec92be;
  background-color: #ec92be;
}
.bmc_off-rank__gld .bmc_off-box__head {
  border-color: #cdaa35;
  background-color: #cdaa35;
}
.bmc_off-rank__dia .bmc_off-box__head {
  border-color: #9ca3af;
  background-color: #9ca3af;
}
.bmc_off-use .bmc_off-box__head {
  color: rgb(var(--black));
  border-color: #ffc9c7;
  background-color: #ffc9c7;
}
.bmc_off-box__txt {
  min-height: 6em;
  border-radius: 0 0 15px 15px;
  border: 2px solid;
  background-color: #fff;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media all and (min-width: 768px) {
  .bmc_off-box__txt {
    padding: 40px 30px;
  }
}
.bmc_off-rank__bmc .bmc_off-box__txt {
  border-color: #ec92be;
}
.bmc_off-rank__gld .bmc_off-box__txt {
  border-color: #cdaa35;
}
.bmc_off-rank__dia .bmc_off-box__txt {
  border-color: #9ca3af;
}
.bmc_off-use .bmc_off-box__txt {
  border-color: #ffc9c7;
}

.bmc_off-btn__link {
  color: #fff;
  font-weight: bold;
  background: linear-gradient(90deg, #9f0042 10%, #c20050 50%, #9f0042 90%);
  padding: 0.5em;
  border-radius: 100vmax;
  border: 3px solid #fff;
  filter: drop-shadow(3px 3px 0 #9f0042);
}
@media all and (min-width: 768px) {
  .bmc_off-btn__link {
    font-size: 2rem;
    border: 4px solid #fff;
    filter: drop-shadow(4px 4px 0 #9f0042);
  }
}
.bmc_off-btn__link::before {
  color: #f5f5f5;
  right: 15px;
}
@media all and (min-width: 768px) {
  .bmc_off-btn__link::before {
    right: 30px;
  }
}

/* .bmc_off-mainimg
================================================ */
.bmc_off-mainimg {
  background: #ffd3e0;
}

/* .bmc_off-intro
================================================ */
.bmc_off-intro .u-font-bold {
  color: #a10043;
}
@media all and (min-width: 768px) {
  .bmc_off-intro .c-note01 {
    width: 750px;
    margin-inline: auto;
  }
}
.bmc_off-intro__txt {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
  margin-top: -45px;
}
@media all and (min-width: 768px) {
  .bmc_off-intro__txt {
    margin-top: -95px;
  }
}

/* .bmc_off-detail
================================================ */
.bmc_off-detail {
  background: linear-gradient(90deg, #9f0042 10%, #c20050 50%, #9f0042 90%);
  padding-block: 50px;
}
@media all and (min-width: 768px) {
  .bmc_off-detail {
    padding-block: 100px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-detail__head {
    width: 59.8666666667vw;
    margin-inline: auto;
  }
}
.bmc_off-detail__list {
  display: flex;
  justify-content: center;
  gap: 15px;
}
@media all and (min-width: 768px) {
  .bmc_off-detail__list {
    gap: 30px;
  }
}
.bmc_off-detail__item {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}
.bmc_off-detail__txt {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

/* .bmc_off-rank
================================================ */
.bmc_off-rank .splide__arrow {
  top: 26.6666666667vw;
}
@media all and (min-width: 768px) {
  .bmc_off-rank .splide__arrow {
    top: 200px;
  }
}
@media all and (min-width: 768px) {
  .bmc_off-rank .splide__arrow--prev {
    left: 1em;
  }
  .bmc_off-rank .splide__arrow--next {
    right: 1em;
  }
}
.bmc_off-rank__inner {
  border-radius: 15px;
  padding: 30px 15px;
}
@media all and (min-width: 768px) {
  .bmc_off-rank__inner {
    border-radius: 30px;
    padding: 60px 30px;
  }
}
.bmc_off-rank__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-rank__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-rank__head img {
    width: 65.7333333333vw;
  }
}
.bmc_off-rank__img {
  margin-inline: auto;
}
@media all and (max-width: 767px) {
  .bmc_off-rank__img {
    width: 56vw;
  }
}
.bmc_off-rank__box-item {
  display: flex;
  gap: 0.5em;
}
.bmc_off-rank__box-item + .bmc_off-rank__box-item {
  margin-top: 0.5em;
}
.bmc_off-rank__box-item::before {
  content: "";
  display: inline-block;
  width: 7.2vw;
  height: 7.2vw;
}
@media all and (min-width: 768px) {
  .bmc_off-rank__box-item::before {
    width: 30px;
    height: 30px;
  }
}
.bmc_off-rank__box-item.free::before {
  background: url(/bmc_off/img/ico_free.png) left top/contain no-repeat;
}
.bmc_off-rank__box-item.coin::before {
  background: url(/bmc_off/img/ico_coin.png) left top/contain no-repeat;
}
.bmc_off-rank__box-item.present::before {
  background: url(/bmc_off/img/ico_present.png) left top/contain no-repeat;
}

/* .bmc_off-rate
================================================ */
.bmc_off-rate__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-rate__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-rate__head img {
    width: 87.0666666667vw;
  }
}

/* .bmc_off-use
================================================ */
.bmc_off-use__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-use__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-use__head img {
    width: 55.7333333333vw;
  }
}

/* .bmc_off-birthday
================================================ */
.bmc_off-birthday__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-birthday__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-birthday__head img {
    width: 82.6666666667vw;
  }
}

/* .bmc_off-assessment
================================================ */
.bmc_off-assessment__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-assessment__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-assessment__head img {
    width: 63.4666666667vw;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-assessment__txt {
    width: 84vw;
    margin-inline: auto;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-assessment__img img {
    max-width: initial;
    width: auto;
    height: 74vw;
  }
}
.bmc_off-assessment__img-wrapper {
  overflow-x: auto;
  width: auto;
  -webkit-overflow-scrolling: touch;
}
.bmc_off-assessment .c-list-basic01__item {
  padding-left: 0.93em;
}
.bmc_off-assessment .c-list-basic01__item::before {
  top: 0.51em;
  width: 0.5em;
  height: 0.5em;
}

.bmc_off-assessment01 .c-list-basic01__item::before {
  background: #a10043;
}

.bmc_off-assessment02 .c-list-basic01__item::before {
  background: #1916a2;
}

/* .bmc_off-ico-scroll
================================================ */
@media all and (max-width: 767px) {
  .bmc_off-ico-scroll {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 20.93vw;
    height: 22.13vw;
  }
  .bmc_off-ico-scroll.is-hidden {
    display: none;
  }
  .bmc_off-ico-scroll__wrapper {
    position: relative;
  }
}

/* .bmc_off-note
================================================ */
.bmc_off-note {
  padding-block: 50px;
}
@media all and (min-width: 768px) {
  .bmc_off-note {
    padding-block: 100px;
  }
}
.bmc_off-note__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-note__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-note__head img {
    width: 59.8666666667vw;
  }
}

/* .bmc_off-faq
================================================ */
.bmc_off-faq__head {
  border-bottom: 2px solid rgb(var(--border));
  padding-bottom: 30px;
}
@media all and (min-width: 768px) {
  .bmc_off-faq__head {
    padding-bottom: 50px;
  }
}
@media all and (max-width: 767px) {
  .bmc_off-faq__head img {
    width: 47.4666666667vw;
  }
}
.bmc_off-faq .c-bg01 {
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
}
@media all and (min-width: 768px) {
  .bmc_off-faq .c-bg01 {
    padding: 10px 20px;
    border-radius: 10px;
  }
}

/* .bmc_off-terms
================================================ */
.bmc_off-terms-contents {
  border: 1px solid rgb(var(--bg));
  background-color: #f8f4f1;
  height: 90vw;
  overflow-y: scroll;
  padding: 20px 15px;
}
@media all and (min-width: 768px) {
  .bmc_off-terms-contents {
    height: 520px;
    border: 1px solid rgb(var(--bg));
    padding: 30px 50px;
  }
}
.bmc_off-terms .c-table01 {
  table-layout: fixed;
}
.bmc_off-terms .c-table01 tr:first-child th:nth-child(1) {
  width: 20%;
}
@media all and (min-width: 768px) {
  .bmc_off-terms .c-table01 tr:first-child th:nth-child(1) {
    width: 34%;
  }
}
.bmc_off-terms .c-table01 tr:first-child th:nth-child(2) {
  width: 40%;
}
@media all and (min-width: 768px) {
  .bmc_off-terms .c-table01 tr:first-child th:nth-child(2) {
    width: 33%;
  }
}
.bmc_off-terms .c-table01 tr:first-child th:nth-child(3) {
  width: 40%;
}
@media all and (min-width: 768px) {
  .bmc_off-terms .c-table01 tr:first-child th:nth-child(3) {
    width: 33%;
  }
}
.bmc_off-terms .c-table01 th {
  background-color: rgb(var(--bg));
}
.bmc_off-terms .c-table01 th, .bmc_off-terms .c-table01 td {
  text-align: center;
}