@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word; }

body {
  font-size: 1.4rem;
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 750px) {
    body {
      font-size: 1.6rem; } }

*,
*::before,
*::after {
  box-sizing: border-box; }

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

a {
  text-decoration: underline; }

a img:hover {
  opacity: 0.8; }

.only_pc {
  display: none; }
  @media only screen and (min-width: 750px) {
    .only_pc {
      display: inline; } }

.only_sp {
  display: inline; }
  @media only screen and (min-width: 750px) {
    .only_sp {
      display: none; } }

@media only screen and (min-width: 1000px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }

@media only screen and (min-width: 420px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.wrap {
  position: relative; }

.close {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; }
  .close .comment {
    width: 77%;
    margin: 26vw auto 0; }
    @media only screen and (min-width: 750px) {
      .close .comment {
        width: calc(748/1000* 100vw);
        margin: calc(264/1000* 100vw) auto 0; } }
    @media only screen and (min-width: 1000px) {
      .close .comment {
        width: 748px;
        margin: 264px auto 0; } }

.kv {
  background-image: url("../img/bg_kv_ranking_sp.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; }
  @media only screen and (min-width: 750px) {
    .kv {
      background-image: url("../img/bg_kv_confetti_ranking_pcl.png"), url("../img/bg_kv_ranking_pcl.png");
      background-repeat: no-repeat,no-repeat;
      background-size: auto 100%, auto 100%;
      background-position: top center,center center; } }
  @media only screen and (min-width: 1000px) {
    .kv {
      background-size: auto auto, auto auto; } }
  @media only screen and (min-width: 2000px) {
    .kv {
      background-size: auto auto, cover; } }
  .kv_inner {
    position: relative;
    width: 100%;
    height: 175vw;
    margin: 0 auto; }
    @media only screen and (min-width: 750px) {
      .kv_inner {
        height: calc(2259/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .kv_inner {
        width: 1000px;
        height: 2259px; } }
  .kv .logo {
    position: absolute;
    width: 40.78vw;
    top: 5.781vw;
    left: 29.218vw; }
    @media only screen and (min-width: 750px) {
      .kv .logo {
        width: calc(261/1000* 100vw);
        top: calc(33/1000* 100vw);
        left: calc(39/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .kv .logo {
        width: 261px;
        top: 33px;
        left: 39px; } }
  .kv h1 {
    position: absolute;
    width: 100%;
    top: 15.156vw;
    left: 0; }
    @media only screen and (min-width: 750px) {
      .kv h1 {
        width: calc(929/1000* 100vw);
        top: calc(135/1000* 100vw);
        left: calc(52/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .kv h1 {
        width: 929px;
        top: 135px;
        left: 52px; } }
  .kv .kv_counter {
    position: absolute;
    width: 77.65vw;
    top: 114.37vw;
    left: 0;
    right: 0;
    margin: 0 auto; }
    @media only screen and (min-width: 750px) {
      .kv .kv_counter {
        width: calc(677/1000* 100vw);
        top: calc(914/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .kv .kv_counter {
        width: 677px;
        top: 914px; } }
  .kv .kv_thanks {
    position: absolute;
    width: 90vw;
    top: 144vw;
    left: 0;
    right: 0;
    margin: 0 auto; }
    @media only screen and (min-width: 750px) {
      .kv .kv_thanks {
        width: calc(1000/1000* 100vw);
        top: calc(1140/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .kv .kv_thanks {
        width: 1000px;
        top: 1140px; } }

.dot {
  position: relative;
  background-image: url("../img/bg_dot_sp.png");
  background-repeat: repeat;
  background-size: 100% auto;
  background-position: top center; }
  @media only screen and (min-width: 750px) {
    .dot {
      background-image: url("../img/bg_dot_pc.png"); } }
  @media only screen and (min-width: 1000px) {
    .dot {
      background-image: url("../img/bg_dot_pcl.png");
      background-size: auto auto; } }
  .dot .ranking {
    width: 100%;
    height: 174.062vw;
    position: absolute;
    top: -11vw; }
    @media only screen and (min-width: 750px) {
      .dot .ranking {
        top: calc(-870/1000* 100vw);
        height: calc(1418/1000* 100vw);
        background-image: url("../img/bg_ranking_pc.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: auto calc(1418/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .dot .ranking {
        top: -870px;
        height: 1418px;
        background-size: auto auto; } }
    .dot .ranking_inner {
      width: 100%;
      margin: 0 auto;
      padding: 3.9vw 0; }
      @media only screen and (min-width: 750px) {
        .dot .ranking_inner {
          width: calc(965/1000* 100vw);
          padding: calc(50/1000* 100vw) 0; } }
      @media only screen and (min-width: 1000px) {
        .dot .ranking_inner {
          width: 965px;
          padding: 50px 0; } }
  .dot_inner {
    width: 100%;
    margin: 0 auto;
    padding: 133.75vw 0 20vw; }
    @media only screen and (min-width: 750px) {
      .dot_inner {
        padding: calc(645/1000* 100vw) 0 calc(195/1000* 100vw); } }
    @media only screen and (min-width: 1000px) {
      .dot_inner {
        width: 1000px;
        padding: 645px 0 195px; } }

.rank_list {
  width: 85.31vw;
  margin: 0 auto 0; }
  @media only screen and (min-width: 750px) {
    .rank_list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: flex-end;
      width: calc(845/1000 * 100vw);
      margin: 0 auto 0; } }
  @media only screen and (min-width: 1000px) {
    .rank_list {
      width: 845px;
      margin: 0 auto 0; } }
  .rank_list li {
    position: relative;
    margin-bottom: 5.93vw; }
    @media only screen and (min-width: 750px) {
      .rank_list li {
        margin-bottom: calc(32/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .rank_list li {
        margin-bottom: 32px; } }
    .rank_list li .bt_detail {
      position: absolute;
      width: 53.9vw;
      filter: drop-shadow(0.6vw 0.6vw 0 #00693e);
      bottom: 5vw;
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 750px) {
        .rank_list li .bt_detail {
          width: calc(534/1000 * 100vw);
          filter: drop-shadow(calc(5/1000 * 100vw) calc(5/1000 * 100vw) 0 #00693e);
          bottom: calc(40/1000 * 100vw); } }
      @media only screen and (min-width: 1000px) {
        .rank_list li .bt_detail {
          width: 534px;
          filter: drop-shadow(5px 5px 0 #00693e);
          bottom: 40px; } }
  .rank_list .full {
    width: 100%;
    margin-bottom: 5.31vw;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)); }
    @media only screen and (min-width: 750px) {
      .rank_list .full {
        margin-bottom: calc(32/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .rank_list .full {
        margin-bottom: 32px; } }
  .rank_list .full02 {
    width: 100%;
    margin-bottom: 7vw;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)); }
    @media only screen and (min-width: 750px) {
      .rank_list .full02 {
        margin-bottom: calc(102/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .rank_list .full02 {
        margin-bottom: 102px; } }
  .rank_list .half {
    width: 64.6875vw !important;
    margin: 0 auto 4.68vw;
    border: #f29600 solid 0.9vw;
    border-radius: 2vw;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)); }
    @media only screen and (min-width: 750px) {
      .rank_list .half {
        width: calc(416/1000 * 100vw) !important;
        margin: 0 0 calc(33/1000 * 100vw);
        border: #f29600 solid calc(7/1000 * 100vw);
        border-radius: calc(17/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .rank_list .half {
        width: 416px !important;
        margin: 0 0 33px;
        border: #f29600 solid 7px;
        border-radius: 17px; } }
  .rank_list .note {
    width: 100% !important;
    margin: 0 auto 4.68vw;
    text-align: center;
    font-size: 2vw;
    line-height: 1.4em;
    padding: 1vw; }
    @media only screen and (min-width: 750px) {
      .rank_list .note {
        width: calc(416/1000 * 100vw) !important;
        margin: 0 0 calc(33/1000 * 100vw);
        text-align: left;
        font-size: calc(12/1000 * 100vw);
        padding: calc(7/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .rank_list .note {
        width: 416px !important;
        margin: 0 0 33px;
        font-size: 1.2rem;
        padding: 7px; } }

.thanks {
  width: 85vw;
  margin: 11vw auto 0; }
  @media only screen and (min-width: 750px) {
    .thanks {
      width: calc(720/960 * 100vw);
      margin: calc(145/960 * 100vw) auto 0; } }
  @media only screen and (min-width: 1000px) {
    .thanks {
      width: 720px;
      margin: 145px auto 0; } }

.inquiry_wrap {
  width: 100%;
  margin: 0 auto;
  padding: 18.75vw 0 40vw;
  font-size: 4.5vw;
  line-height: 1.5em; }
  @media only screen and (min-width: 750px) {
    .inquiry_wrap {
      font-size: calc(29/1000* 100vw);
      padding: calc(172/1000* 100vw) 0; } }
  @media only screen and (min-width: 1000px) {
    .inquiry_wrap {
      width: 1000px;
      font-size: 2.9rem;
      padding: 172px 0; } }
  .inquiry_wrap h2 {
    width: 41.875vw;
    margin: 0 auto; }
    @media only screen and (min-width: 750px) {
      .inquiry_wrap h2 {
        width: calc(262/1000 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .inquiry_wrap h2 {
        width: 262px; } }
  .inquiry_wrap .inquiry_name {
    width: 83.593vw;
    margin: 3.437vw auto 0; }
    @media only screen and (min-width: 750px) {
      .inquiry_wrap .inquiry_name {
        width: calc(522/1000 * 100vw);
        margin: calc(24/1000 * 100vw) auto 0; } }
    @media only screen and (min-width: 1000px) {
      .inquiry_wrap .inquiry_name {
        width: 522px;
        margin: 24px auto 0; } }
  .inquiry_wrap .freecall {
    display: block;
    width: 77.187vw;
    margin: 5vw auto 0; }
    @media only screen and (min-width: 750px) {
      .inquiry_wrap .freecall {
        width: calc(482/960 * 100vw);
        margin: calc(32/960 * 100vw) auto 0; } }
    @media only screen and (min-width: 1000px) {
      .inquiry_wrap .freecall {
        width: 482px;
        margin: 32px auto 0; } }
  .inquiry_wrap .recept {
    display: block;
    width: 90vw;
    margin: 5.2vw auto 0;
    text-align: center; }
    @media only screen and (min-width: 750px) {
      .inquiry_wrap .recept {
        width: calc(780/960 * 100vw);
        margin: calc(46/960 * 100vw) auto 0; } }
    @media only screen and (min-width: 1000px) {
      .inquiry_wrap .recept {
        width: 780px;
        margin: 46px auto 0; } }

.fix_bt {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  right: 0;
  width: 100%; }
  @media only screen and (min-width: 750px) {
    .fix_bt {
      display: block;
      width: calc(153/960 * 100vw);
      bottom: calc(15/960 * 100vw);
      right: calc(15/960 * 100vw); } }
  @media only screen and (min-width: 1000px) {
    .fix_bt {
      width: 153px;
      bottom: 15px;
      right: 15px; } }
  .fix_bt li {
    width: 34.5%;
    margin-left: -0.2%; }
    @media only screen and (min-width: 750px) {
      .fix_bt li {
        width: 100%;
        margin-top: calc(8/960 * 100vw); } }
    @media only screen and (min-width: 1000px) {
      .fix_bt li {
        width: 100%;
        margin-top: 8px; } }
    .fix_bt li a img:hover {
      opacity: 1;
      filter: saturate(180%); }
  @media only screen and (min-width: 750px) {
    .fix_bt .bt_ptop {
      margin-top: calc(18/960 * 100vw); } }
  @media only screen and (min-width: 1000px) {
    .fix_bt .bt_ptop {
      margin-top: 18px; } }