/*
Theme Name: Gacha 3
Description: Gacha System v3
Version: 3.0
*/

html,
body,
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  box-sizing: border-box;
}

button {
  color: #000000;
}

:root {
  --col-main: #ffcc00;
}

a {
  text-decoration: none;
}

body:has(#result_actions[style]) {
  margin-bottom: 40px;
}

body {
  font-size: 12px;
  min-height: 100dvh;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

  .slick-next {
    right: 0px;
  }

  .slick-prev {
    left: 0px;
  }

}

.inner {
  width: 1000px;
  max-width: 95vw;
  margin: auto;
}

main.inner {
  overflow-x: hidden;
}

#header {
  border-bottom: 2px solid #333333;
  height: 40px;
  position: sticky;
  top: 0px;
  z-index: 100;
  background: #ffffff;

  .toggle_menu {
    i {
      width: 30px;
      height: 30px;
      display: block;
      margin-top: 0px;
      cursor: pointer;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
    }

    span,
    i:after,
    i:before {
      position: absolute;
      content: '';
      width: 20px;
      height: 2px;
      left: 5px;
      top: 7px;
      display: block;
      background: #000000;
      border-radius: 10px;
      transition-property: transform, opacity, left, top;
      transition-duration: 0.5s;
      transition-delay: 0s, 0.5s, 0.5s, 0.5s;
    }

    span {
      top: 14px;
    }

    i:after {
      top: 21px;
    }
  }

  .toggle_menu:has(input:checked) {

    span,
    i:after,
    i:before {
      transition-property: opacity, left, top, transform;
      transition-duration: 0.5s;
      transition-delay: 0s, 0s, 0.5s, 1s;
      filter: invert(1);
    }

    span {
      left: 100px;
      opacity: 0;
    }

    i:after {
      top: 14px;
      transform: rotate(45deg);
    }

    i:before {
      top: 14px;
      transform: rotate(-45deg);
    }
  }

  & .inner .header_menu:has(> label input):before {
    background: rgba(0, 0, 0, 0.5);
    content: '';
    position: fixed;
    display: block;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100dvh;
    opacity: 0;
    transition: 0.5s;
    backdrop-filter: blur(3px);
    visibility: hidden;
  }

  & .inner .header_menu:has(> label input:checked):before {
    opacity: 1;
    visibility: visible;
  }

  & .inner {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 100%;

    .header_login {
      margin-left: auto;
      display: flex;
      gap: 10px;

      a {
        border: 2px solid var(--col-main);
        border-radius: 100px;
        color: #000000;
        height: 26px;
        line-height: 22px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
      }

      .register {
        background: var(--col-main);
      }
    }

    .branding {
      height: 30px;
      display: flex;

      a {
        position: relative;
        display: inline-block;
        background-image: var(--logo-image);
        background-size: auto 30px;
        background-repeat: no-repeat;
        background-position: -20px 0px;
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        color: #000000;
        padding-left: 50px;
        text-indent: -999999px;
      }
    }

    .header_point {
      margin-left: auto;
      display: flex;
      gap: 10px;
      align-items: center;

      .point_charge {
        display: flex;
        align-items: center;
        background: #000000;
        border: 2px solid #000000;
        color: #ffffff;
        position: relative;
        padding: 2px 22px 2px 25px;
        border-radius: 100px;

        span {
          font-size: 10px
        }

        strong {
          padding-right: 3px;
        }

        span:after {
          content: '+';
          font-size: 15px;
          font-weight: bold;
          background: #cc0000;
          border-radius: 100px;
          display: inline-block;
          line-height: 13px;
          width: 17px;
          height: auto;
          aspect-ratio: 1;
          position: absolute;
          right: 0px;
          top: 1px;
          text-align: center;
        }

        i {
          left: -4px;
          position: absolute;
          background: var(--point-icon);
          background-size: 26px;
          background-position: center;
          display: inline-block;
          width: 26px;
          height: 26px;
          border: 2px solid #000000;
          border-radius: 100px;
        }
      }

      .point_xp {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 2px solid #ffcc00;
        color: #000000;
        position: relative;
        padding: 2px 10px 2px 30px;
        border-radius: 100px;

        span {
          font-size: 10px;
        }

        strong {
          padding-right: 3px;
        }

        i {
          left: 3px;
          position: absolute;
          background: var(--xp-icon);
          background-size: 16px;
          background-repeat: no-repeat;
          background-position: center;
          display: inline-block;
          width: 26px;
          height: 26px;
          border-radius: 100px;
        }
      }
    }

    & .header_menu {
      position: relative;

      &>label {
        position: relative;
        overflow: hidden;
      }

      &>label input {
        display: none;
      }

      &>label:has(input:checked)+ul {
        opacity: 1;
        visibility: visible;
      }

      & ul {
        display: flex;
        flex-direction: column;
        transition: 0.5s;
        opacity: 0;
        position: absolute;
        background: rgba(255, 255, 255, 1);
        backdrop-filter: blur(1px);
        right: 0px;
        width: 300px;
        top: 40px;
        padding: 10px;
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.5), 0px 0px 3px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        visibility: hidden;
        height: calc(100dvh - 60px);

        .member_card {
          height: auto;
          aspect-ratio: 16/9;
          border-radius: 5px;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
          margin-bottom: 20px;
        }

        li[class*="mp-link"] a:before {
          content: '';
          width: 16px;
          height: 16px;
          display: inline-block;
          background-size: 16px;
          background-repeat: no-repeat;
          background-position: center;
        }

        li.mp-link-result a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Edit%20%2F%20Layers%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M21%2012L12%2018L3%2012M21%2016L12%2022L3%2016M21%208L12%2014L3%208L12%202L21%208Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
        }

        li.mp-link-coupon {
          /* display: none; */
        }

        li.mp-link-coupon a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Interface%20%2F%20Tag%22%3E%20%3Cg%20id%3D%22Vector%22%3E%20%3Cpath%20d%3D%22M4.74791%207.64502L4.41669%2011.2885C4.36763%2011.8281%204.34289%2012.1001%204.3878%2012.3584C4.42792%2012.5892%204.50806%2012.8112%204.62496%2013.0142C4.7563%2013.2422%204.95043%2013.4363%205.33647%2013.8224L10.512%2018.9979C11.299%2019.7849%2011.6927%2020.1786%2012.148%2020.3265C12.5496%2020.4571%2012.983%2020.4573%2013.3847%2020.3268C13.8414%2020.1785%2014.2382%2019.7821%2015.0302%2018.9901L18.99%2015.0303C19.7821%2014.2382%2020.1774%2013.8424%2020.3258%2013.3857C20.4563%2012.9841%2020.4555%2012.5511%2020.325%2012.1495C20.1766%2011.6928%2019.7819%2011.297%2018.9898%2010.505L13.8271%205.34229C13.4375%204.95272%2013.2427%204.75792%2013.0136%204.62598C12.8107%204.50908%2012.5886%204.4286%2012.3579%204.38848C12.0974%204.3432%2011.823%204.36809%2011.2743%204.41797L7.64449%204.74796C6.69973%204.83384%206.22705%204.87698%205.85738%205.08255C5.53145%205.26379%205.26277%205.53248%205.08152%205.8584C4.87698%206.22623%204.83432%206.69555%204.74929%207.63092L4.74791%207.64502Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M9.71259%209.71297C10.1031%209.32244%2010.1031%208.68928%209.71259%208.29876C9.32206%207.90823%208.68845%207.90823%208.29792%208.29876C7.9074%208.68928%207.90702%209.32229%208.29755%209.71282C8.68807%2010.1033%209.32206%2010.1035%209.71259%209.71297Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
        }

        li.mp-link-points {
          display: none;
        }

        li.mp-link-points a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Edit%20%2F%20Layers%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M21%2012L12%2018L3%2012M21%2016L12%2022L3%2016M21%208L12%2014L3%208L12%202L21%208Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
        }

        li.mp-link-order a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Interface%20%2F%20Shopping_Cart_01%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M17%2017C15.8954%2017%2015%2017.8954%2015%2019C15%2020.1046%2015.8954%2021%2017%2021C18.1046%2021%2019%2020.1046%2019%2019C19%2017.8954%2018.1046%2017%2017%2017ZM17%2017H9.29395C8.83288%2017%208.60193%2017%208.41211%2016.918C8.24466%2016.8456%208.09938%2016.7291%207.99354%2016.5805C7.8749%2016.414%207.82719%2016.1913%207.73274%2015.7505L5.27148%204.26465C5.17484%203.81363%205.12587%203.58838%205.00586%203.41992C4.90002%203.27135%204.75477%203.15441%204.58732%203.08205C4.39746%203%204.16779%203%203.70653%203H3M6%206H18.8732C19.595%206%2019.9555%206%2020.1978%206.15036C20.41%206.28206%2020.5653%206.48862%2020.633%206.729C20.7104%207.00343%2020.611%207.34996%2020.411%208.04346L19.0264%2012.8435C18.9068%2013.2581%2018.8469%2013.465%2018.7256%2013.6189C18.6185%2013.7547%2018.4772%2013.861%2018.317%2013.9263C18.1361%2014%2017.9211%2014%2017.4921%2014H7.73047M8%2021C6.89543%2021%206%2020.1046%206%2019C6%2017.8954%206.89543%2017%208%2017C9.10457%2017%2010%2017.8954%2010%2019C10%2020.1046%209.10457%2021%208%2021Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
        }

        li.mp-link-profile {
          display: none;
        }

        li.mp-link-profile a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22User%20%2F%20User_Circle%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M17.2166%2019.3323C15.9349%2017.9008%2014.0727%2017%2012%2017C9.92734%2017%208.06492%2017.9008%206.7832%2019.3323M12%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021ZM12%2014C10.3431%2014%209%2012.6569%209%2011C9%209.34315%2010.3431%208%2012%208C13.6569%208%2015%209.34315%2015%2011C15%2012.6569%2013.6569%2014%2012%2014Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
        }

        li.mp-link-logout a:before {
          background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M13%2012H22M22%2012L18.6667%208M22%2012L18.6667%2016%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3Cpath%20d%3D%22M14%207V5.1736C14%204.00352%2012.9999%203.08334%2011.8339%203.18051L3.83391%203.84717C2.79732%203.93356%202%204.80009%202%205.84027V18.1597C2%2019.1999%202.79733%2020.0664%203.83391%2020.1528L11.8339%2020.8195C12.9999%2020.9167%2014%2019.9965%2014%2018.8264V17%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
        }

        li p a {
          font-size: 10px;
        }

        li>a {
          padding: 3px 0px;
          display: flex;
          gap: 5px;
          align-items: center;
          color: #000000;
          font-size: 14px;
        }

        .logout {
          margin-top: auto;
        }
      }
    }
  }
}

#header_banner:has(.slick-initialized) {
  display: block;
}

#header_banner {
  width: 100%;
  overflow: hidden;
  padding-top: 20px;
  display: none;
  background: #ffffff;

  .slick-arrow {
    z-index: 2;
  }

  .slider .slick-list {
    overflow: visible;
  }

  .slider .slide-inner {
    width: 800px;
    max-width: 78vw;
    height: auto;
    aspect-ratio: 800 / 234;
    background: #ccc;
    border-radius: 8px;
    margin: 0px 10px;
  }

  .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

#gacha_list.gacha_single {
  .gacha_buttons {
    flex-wrap: nowrap;
  }
}

#gacha_list.gacha_retry{
  position: fixed;
  bottom: 40px;
  z-index: 10;
  left: 0px;
  right: 0px;
  border-top: 1px solid #cccccc;
  background: #ffffff99;
  backdrop-filter: blur(3px);
  a {
    touch-action:none;
    pointer-events: none;
  }
  .gacha_image, .gacha_tags {
    display: none;
  }
  li {
    background: none;
    width: 100%;
    max-width: 1000px;
    border: 0px;
    border-radius: 0px;
    .gacha_buttons {
      flex-wrap: nowrap;
      gap: 5px;
      button {
        height: 30px;
      }
    }
  }
}
#gacha_list {
  margin: 20px 0px;

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .gacha_card.sold_out,
  .gacha_card.count_down {
    .gacha_footer {
      pointer-events: none;
    }

    position: relative;
  }

  .gacha_card.count_down:after {
    content: var(--cd);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: block;
    white-space: pre-wrap;
    font-weight: bold;
    text-align: center;
    font-size: 35px;
    font-family: monospace;
    filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff);
    z-index: 1;
    letter-spacing: 2px;
    background: conic-gradient(#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  }

  .gacha_card.sold_out:after {
    content: 'SOLD OUT';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: block;
    white-space: pre-wrap;
    font-weight: bold;
    text-align: center;
    font-size: 35px;
    filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #000000) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px #ffffff);
    z-index: 1;
    letter-spacing: 2px;
    background: linear-gradient(#333333, #999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gacha_card.count_down:before,
  .gacha_card.sold_out:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.2);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 9px;
    backdrop-filter: grayscale(1) blur(2px);
    z-index: 1;
  }

  .gacha_card {
    width: calc(calc(100% - 20px) / 2);
    min-width: 320px;
    margin: 0px auto;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #cccccc;
    padding: 10px;

    a:hover {
      opacity: 0.5;

      .gacha_image_inner {
        transform: scale(1.2);
      }
    }

    a {
      display: block;
      color: #000000;
    }
  }

  h2 {
    font-size: 12px;
  }

  .gacha_tags {
    margin: 5px 0px;
    display: flex;
    gap: 5px;
    height: 19px;

    --col-bg: #eeeeee;
    --col-text: #999999;
    --col-border: #999999;

    dd {
      color: var(--col-text);
      background: var(--col-bg);
      border-radius: 4px;
      border: 1px solid var(--col-border);
      font-size: 10px;
      padding: 1px 10px;
      display: flex;
      align-items: center;
    }

    .gacha_user_rank {
      font-weight: bold;
      border: none;
    }

    .gacha_user_rank_beginner {
      background: #ffffff;
      border: 1px solid #999999;
      color: #333333;
    }

    .gacha_user_rank_silver {
      background: linear-gradient(3deg, #9f9f9f, #f1f1f1 50%, #cacaca 51%);
      color: #000000;
    }

    .gacha_user_rank_gold {
      background: linear-gradient(3deg, #ffcc00, #fff5ce 50%, #ffcc00 51%);
      color: #000000;
    }

    .gacha_user_rank_platinum {
      background:
        linear-gradient(3deg, #95b1b3, #ddf6f7 50%, #95b1b3 51%);

      color: #eefcff;
      text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
    }

    .gacha_user_rank_diamond {
      background:
        linear-gradient(-5deg, #95b1b300, #ddf6f7 50%, #95b1b300 51%),
        linear-gradient(3deg, #488185, #ffffff 50%, #b1e5e9 51%);
      color: #008fb1;
      text-shadow: 0px 0px 2px rgb(255 255 255 / 80%);
    }

    .gacha_user_rank_legend {
      background: linear-gradient(#ffffff55, #ffffff33),
        linear-gradient(10deg, #ff0000 0%, #ff8000 17%, #FFFF00 33%, #00ff00 50%, #0080ff 67%, #8000ff 83%, #ff0000 100%);
      color: #ffffff;
      border: 0px;
      text-shadow: 0px 0px 3px #000000;
      font-weight: bold;
    }

    .gacha_user_rank_vip {
      background: linear-gradient(3deg, #000000, #b2b2b2);
      color: #ffffff;
    }
  }

  .gacha_image {
    width: 100%;
    height: auto;
    aspect-ratio: 128/84;
    background: #eeeeee;
    border-radius: 8px;
    overflow: hidden;

    .gacha_image_inner {
      transition: 0.5s;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  .gacha_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;

    .need_item {
      width: 100%;
      display: flex;
      gap: 19px;
      justify-content: center;
      margin-bottom: -8px;

      img {
        width: 36px;
        top: -3px;
        left: 5px;
        position: relative;
        transform: rotate(-15deg);
      }

      .need_item_info {
        display: flex;
        flex-direction: column;

        small {
          color: #666666;
        }

        strong {
          font-size: 16px;
        }
      }
    }

    .not_has_item {
      background: #cccccc;
      width: 100%;
      text-align: center;
      border-radius: 5px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      color: #666666;
    }

    & button {
      max-width: calc(calc(100% - 10px) / 2);
      width: 100%;
      border-radius: 4px;
      border: 0px;
      color: #000000;
      background: #ffcc00;
      height: 40px;
      position: relative;
      font-weight: bold;
    }

    & button.gacha_lot_item {
      width: 100%;
      max-width: 100%;
    }

    & button[data-kaisu="v"] {
      background: #ffffff;
      color: #ffffff;
      padding: 0px;
    }

    & button[data-kaisu="v"] span {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* font-weight: bold; */
      font-size: 10px;
    }

    & button[data-kaisu="v"]:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background: linear-gradient(5deg, #cc0000, #ff0000);

    }
  }

  .gacha_buttons:not(:has(button:nth-child(4))) {
    & button:nth-child(3) {
      max-width: calc(calc(100% - 0px) / 1);
    }
  }

  .gacha_buttons:has(button:nth-child(4)) {
    & button {
      max-width: calc(calc(100% - 10px) / 2);
    }

  }

  .gacha_footer:has(.need_item) {
    .gacha_points {
      /* display: none; */
    }
  }

  .gacha_stocks {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0px 10px;
    align-items: center;

    .gacha_points {
      display: flex;
      align-items: baseline;

      i {
        border-radius: 100px;
        background-image: var(--point-icon);
        background-size: 22px;
        background-position: center;
        margin-right: 3px;
        position: relative;
        top: 3px;
        display: inline-block;
        width: 20px;
        height: 20px;
      }

      strong {
        font-size: 20px;
        margin-right: 3px;
      }
    }

    .gacha_stock_number {
      margin-left: auto;
      display: flex;
      align-items: baseline;

      strong {
        font-size: 20px;
        margin: 0px 5px;
      }
    }

    .gacha_stock_progress {
      width: 100%;
      height: 5px;
      margin-top: 5px;
      background: #cccccc;
      border-radius: 100px;

      .gacha_stock_progress_inner {
        height: 5px;
        border-radius: 100px;
        background: #ff9900;
      }
    }
  }
}

body:has(#gacha_list.gacha_single) {
  padding-bottom: 110px;
}

#gacha_items {
  /* width: 100px; */
  word-break: break-all;
}

#gacha_list.gacha_single {
  .gacha_card {
    width: 100%;

    .gacha_header {
      display: flex;
      flex-direction: column;
      gap: 0px;
      align-items: center;
      margin-bottom: 10px;
    }

    h2 {
      font-size: 16px;
    }

    a {
      pointer-events: none;
    }

    .gacha_image {
      max-height: 70dvh;
      margin: auto;
    }

    .gacha_footer {
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      max-width: 100%;
      background: #ffffff;
      padding: 10px;
      z-index: 10;
      box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);

      .gach_footer_inner {
        max-width: 95vw;
        width: 1000px;
        margin: auto;
      }
    }
  }
}

#gacha_categories {
  position: sticky;
  z-index: 2;
  top: 40px;
  margin-bottom: 20px;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

  .inner {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    ul {
      display: flex;

      li.active a {
        border-bottom: 2px solid #ff9900;
        color: #ff9900;
        font-weight: bold;
      }

      li {
        a {
          color: #999999;
          display: flex;
          padding: 10px 15px;
          white-space: nowrap;
          align-items: center;
          height: 100%;
        }
      }
    }
  }
}

#gacha_items {
  .rank_header img {
    max-height: 70px;
    margin: auto;
    display: block;
  }

  ul {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px 0px;
    margin-bottom: 50px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    
    
    
    

    li.psa10_1 {
      .gacha_items_image:after {
        content: '';
        position: absolute;
        bottom: 10%;
        left: 50%;
        width: 70%;
        height: auto;
        aspect-ratio: 5/1;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 100px 10px 100px 10px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

    li {
      max-height: 50vh;
      height: auto;
      aspect-ratio: 143/200;
      position: relative;
      max-width: 500px;

      .gacha_items_count {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
        min-width: 40px;
        border-radius: 100px;
        padding: 5px;
        min-width: 50px;
        text-align: center;
        font-weight: bold;
      }

      .gacha_items_count:before {
        content: 'x';
      }

      .gacha_items_image {
        width: 100%;
        height: 100%;
        position: relative;
        text-align: center;
        /* border-radius: 10px; */
        /* overflow: hidden; */

        img {
          /* border-radius: 10px; */
          max-width: 100%;
          max-height: 100%;
          /* width: 300%; */
          height: 300%;
          display: block;
          margin: auto;
          object-fit: contain;
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  #gacha_items ul li{
    min-width: calc( calc(100vw - 80px) / 4);
  }
}

#top_news {
  margin: 30px 0px;

  a {
    color: #000000;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    align-items: center;
    border-top: 1px solid #cccccc;
    padding: 5px;

    .news_title {
      width: 300px;
    }

    --col-tag: #999999;

    .news_tags span {
      font-size: 9px;
      padding: 2px 5px;
      border-radius: 4px;
      color: var(--col-text);
      background: var(--col-bg);
      border: 1px solid var(--col-border);
    }
  }
}

#footer {
  background: #333333;
  color: #ffffff;
  /* position: sticky; */
  /* bottom: 0px; */
  /* left: 0px; */
  /* right: 0px; */
  margin-top: 60px;


  .footer_nav {
    a { color: #ffffff; }
  }
  
  a {
    color: #ffcc00;
  }

  .inner {
    padding: 20px 0px;
  }

  .copyright {
    font-size: 10px;
    text-align: center;
    padding: 10px;
  }
}

body:has(input#show_exchange:checked) {
  #result_list {
    ul {
      .result_card:has(.exchange) {
        display: block;
      }
    }
  }
}

@keyframes result_card_show {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

#result_filter {
  background: #eeeeee;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
  position: sticky;
  top: 45px;
  z-index: 10;



  label {
    display: flex;
    gap: 5px;
    align-items: center;
  }
}

#result_list {
  ul:not(:has(li:nth-child(1))):after {
    content: '\30AB\30FC\30C9\304C\3042\308A\307E\305B\3093';
    text-align: center;
    width: 100%;
    color: #666666;
    background: #eeeeee;
    border-radius: 5px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .result_card:has(.exchange) {
      display: none;

      label {
        background: #cccccc;
      }

      .result_image {
        filter: grayscale(1);
      }
    }

    .result_card {
      position: relative;
      width: calc(calc(100% - 10px) / 2);
      animation-name: result_card_show;
      animation-iteration-count: 1;
      animation-duration: 0.3s;
      /* animation-fill-mode: forwards; */
      /* background: #ffffff; */

      label:has(input:checked) {
        border: 2px solid #ff9900;
        background: #ffeecc;
      }

      label {
        border: 2px solid #cccccc;
        border-radius: 10px;
        padding: 5px;
        display: flex;
        gap: 10px;
        background: #ffffff;

        input[type="checkbox"] {
          display: none;
        }
      }

      .result_data {
        width: 100%;
        position: relative;
      }

      .result_check {
        position: absolute;
      }

      h2 {
        line-height: 1.2em;
        font-size: 16px;
        margin-bottom: 10px;
      }

      h2:has(+ .action_sub) {
        margin-bottom: 0px;
      }

      .action_sub {
        margin-bottom: 10px;
      }

      .result_code:empty {
        display: none;
      }

      .result_code {
        bottom: 0px;
        left: 0px;
        border-radius: 7px;
        font-family: monospace;
        margin-top: 5px;
        color: #666666;
      }

      .no_order {
        color: #ffffff;
        background: #cc0000;
        font-size: 10px;
        display: inline-block;
        padding: 3px 5px;
        border-radius: 5px;
      }

      .no_sell {
        color: #ffffff;
        background: #0000cc;
        font-size: 10px;
        display: inline-block;
        padding: 3px 5px;
        border-radius: 5px;
      }

      .result_point:before {
        border-radius: 100px;
        margin-right: 5px;
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: var(--point-icon);
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: center;
        filter: drop-shadow(0px 0px 1px #99660099);

      }

      .result_limit{
        margin-top: 5px;
        color: #cc0000;
        font-size: 10px;
      }
      .result_point {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        bottom: 0px;
        text-align: right;
        padding: 0px 5px 0px 0px;
        border-radius: 7px;
        font-size: 20px;
        letter-spacing: 1px;

        small {
          font-weight: bold;
          font-size: 0.8em;
          display: inline-block;
          margin-left: 2px;
          margin-top: 3px;
        }
      }

      .result_image {
        width: 143px;
        min-width: 143px;
        height: 200px;
        aspect-ratio: 143 / 200;
        border-radius: 10px;
        overflow: hidden;

        img {
          max-width: 100%;
          max-height: 100%;
          display: block;
          margin: auto;

        }
      }
    }
  }
}

#result_actions {
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: #ffffff;
  border-top: 2px solid #cccccc;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 0px;
  z-index: 11;
  
  

  .inner {
    display: flex;
    gap: 10px;

    .result_actions_left {
      white-space: nowrap;

      strong {
        font-size: 16px;
        display: inline-block;
        margin-right: 4px;
      }
    }

    .result_actions_right {
      display: flex;
      margin-left: auto;
      gap: 10px;
      width: max-content;

      button {
        width: 100px;
        white-space: nowrap;

        small {
          display: block;
        }
      }

      #btn_result_order,
      #btn_result_exchange {
        background: #ffffff;
        border: 2px solid var(--col-main);
        border-radius: 4px;
        color: #000000;
      }

      #btn_result_order {
        background: var(--col-main);
      }

      #btn_result_order[disabled],
      #btn_result_exchange[disabled] {
        background: #eeeeee;
        color: #999999;
        border-color: #999999;
      }
    }
  }
}

.custom_dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  min-height: 200px;
  max-width: 95vw;
  max-height: 80dvh;
  background: #ffffff;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);


  .custom_dialog_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;

    .custom_dialog_title {
      font-size: 14px;
      padding: 5px;
    }

    .custom_dialog_message {
      /* display: flex; */
      /* align-items: center; */
      height: 100%;
      width: 100%;
      text-align: center;
      padding: 0px 10px 20px;
      
      
      
      

      .dblup_point {
        margin-top: 10px;
        background: #000000;
        color: #ffffff;
        padding: 10px;
        border-radius: 100px;
      }

      .errors {
        color: #cc0000;
      }
    }
  }

  .custom_dialog_buttons {
    margin-top: auto;
    padding: 10px;
    gap: 10px;
    display: flex;
    justify-content: center;

    button {
      border: 0px;
      padding: 10px 10px;
      background: #cccccc;
      border-radius: 100px;
      color: #000000;
      width: 100%;
    }

    .btn_primary {
      background: var(--col-main)
    }
  }
}

.wpcf7 form .wpcf7-response-output {
  margin: 0px;
  padding: 10px;
}

.wpcf7-form .form_button {
  margin-top: 10px;

  .btn_primary {
    background: var(--col-main);
    width: 100%;
    border: none;
    border-radius: 5px;
    height: 40px;
  }
}

.exchange_confirm {
  background: #000000;
  color: #ffffff;
  padding: 20px 20px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  margin-top: 20px;
  display: flex;
  gap: 20px;
  position: relative;
  font-weight: bold;

  label {
    position: absolute;
    top: -10px;
    background: var(--col-main);
    color: #000000;
    font-size: 10px;
    border-radius: 100px;
    padding: 3px 20px;
    font-weight: normal;
  }
}

#diag_loading {
  width: 200px;
  height: 100px;
  min-height: 100px;

  .custom_dialog_content:before {
    content: '';
    display: block;
    width: 30px;
    min-height: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    background: radial-gradient(#ffffff 50%, transparent 50%, transparent 70.711%, #ffffff 70.711%),
      conic-gradient(rgba(255, 255, 255, 1) 0%, #ffffff 11%, #959595 100%);
    animation-name: loading;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#diag_charge_error .custom_dialog_content:before,
#diag_charge_fail .custom_dialog_content:before,
#diag_error .custom_dialog_content:before {
  content: '';
  display: block;
  margin: 20px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%20fill%3D%22%23ff0000%22%20stroke%3D%22%23ff0000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Ctitle%3Ecross-circle%3C%2Ftitle%3E%20%3Cdesc%3ECreated%20with%20Sketch%20Beta.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%20%3Cg%20id%3D%22Icon-Set%22%20sketch%3Atype%3D%22MSLayerGroup%22%20transform%3D%22translate(-568.000000%2C%20-1087.000000)%22%20fill%3D%22%23ff0000%22%3E%20%3Cpath%20d%3D%22M584%2C1117%20C576.268%2C1117%20570%2C1110.73%20570%2C1103%20C570%2C1095.27%20576.268%2C1089%20584%2C1089%20C591.732%2C1089%20598%2C1095.27%20598%2C1103%20C598%2C1110.73%20591.732%2C1117%20584%2C1117%20L584%2C1117%20Z%20M584%2C1087%20C575.163%2C1087%20568%2C1094.16%20568%2C1103%20C568%2C1111.84%20575.163%2C1119%20584%2C1119%20C592.837%2C1119%20600%2C1111.84%20600%2C1103%20C600%2C1094.16%20592.837%2C1087%20584%2C1087%20L584%2C1087%20Z%20M589.717%2C1097.28%20C589.323%2C1096.89%20588.686%2C1096.89%20588.292%2C1097.28%20L583.994%2C1101.58%20L579.758%2C1097.34%20C579.367%2C1096.95%20578.733%2C1096.95%20578.344%2C1097.34%20C577.953%2C1097.73%20577.953%2C1098.37%20578.344%2C1098.76%20L582.58%2C1102.99%20L578.314%2C1107.26%20C577.921%2C1107.65%20577.921%2C1108.29%20578.314%2C1108.69%20C578.708%2C1109.08%20579.346%2C1109.08%20579.74%2C1108.69%20L584.006%2C1104.42%20L588.242%2C1108.66%20C588.633%2C1109.05%20589.267%2C1109.05%20589.657%2C1108.66%20C590.048%2C1108.27%20590.048%2C1107.63%20589.657%2C1107.24%20L585.42%2C1103.01%20L589.717%2C1098.71%20C590.11%2C1098.31%20590.11%2C1097.68%20589.717%2C1097.28%20L589.717%2C1097.28%20Z%22%20id%3D%22cross-circle%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 40px;
  width: 40px;
  min-height: 40px;
  text-align: center;
  color: #ff0000;
  border-radius: 100px;
}
#diag_charge_comp{
  .order_point{
    background: #000000;
    color: #ffffff;
    padding: 5px;
    margin: 10px 0px;
    border-radius: 100px;
  }
  .order_items {
    border: 1px solid #000000;
    border-radius: 4px;
    dt {
      background: #000000;
      color: #ffffff;
      padding: 5px;
    }
    dd {
      padding: 5px;
    }
  }
}

#diag_charge_comp .custom_dialog_content:before ,
#diag_complete .custom_dialog_content:before {
  content: '';
  display: block;
  margin: 20px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Warning%20%2F%20Circle_Check%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M15%2010L11%2014L9%2012M12%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021Z%22%20stroke%3D%22%2338d100%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 40px;
  background-repeat: no-repeat;
  background-size: 40px;
  width: 40px;
  min-height: 40px;
  text-align: center;
  border-radius: 100px;
}

#diag_gacha_error {
  .custom_dialog_content:before {
    content: '';
    display: block;
    margin: 30px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%20fill%3D%22%23ff0000%22%20stroke%3D%22%23ff0000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Ctitle%3Ecross-circle%3C%2Ftitle%3E%20%3Cdesc%3ECreated%20with%20Sketch%20Beta.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%20%3Cg%20id%3D%22Icon-Set%22%20sketch%3Atype%3D%22MSLayerGroup%22%20transform%3D%22translate(-568.000000%2C%20-1087.000000)%22%20fill%3D%22%23ff0000%22%3E%20%3Cpath%20d%3D%22M584%2C1117%20C576.268%2C1117%20570%2C1110.73%20570%2C1103%20C570%2C1095.27%20576.268%2C1089%20584%2C1089%20C591.732%2C1089%20598%2C1095.27%20598%2C1103%20C598%2C1110.73%20591.732%2C1117%20584%2C1117%20L584%2C1117%20Z%20M584%2C1087%20C575.163%2C1087%20568%2C1094.16%20568%2C1103%20C568%2C1111.84%20575.163%2C1119%20584%2C1119%20C592.837%2C1119%20600%2C1111.84%20600%2C1103%20C600%2C1094.16%20592.837%2C1087%20584%2C1087%20L584%2C1087%20Z%20M589.717%2C1097.28%20C589.323%2C1096.89%20588.686%2C1096.89%20588.292%2C1097.28%20L583.994%2C1101.58%20L579.758%2C1097.34%20C579.367%2C1096.95%20578.733%2C1096.95%20578.344%2C1097.34%20C577.953%2C1097.73%20577.953%2C1098.37%20578.344%2C1098.76%20L582.58%2C1102.99%20L578.314%2C1107.26%20C577.921%2C1107.65%20577.921%2C1108.29%20578.314%2C1108.69%20C578.708%2C1109.08%20579.346%2C1109.08%20579.74%2C1108.69%20L584.006%2C1104.42%20L588.242%2C1108.66%20C588.633%2C1109.05%20589.267%2C1109.05%20589.657%2C1108.66%20C590.048%2C1108.27%20590.048%2C1107.63%20589.657%2C1107.24%20L585.42%2C1103.01%20L589.717%2C1098.71%20C590.11%2C1098.31%20590.11%2C1097.68%20589.717%2C1097.28%20L589.717%2C1097.28%20Z%22%20id%3D%22cross-circle%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: 40px;
    width: 40px;
    min-height: 40px;
    text-align: center;
    color: #ff0000;
    border-radius: 100px;
  }
}

body:has(#gacha_popup.show):after,
body:has(.custom_dialog):after {
  z-index: 100;
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

@keyframes dblup_damage_lose {
  0% {
    transform: translateX(0px);
  }

  10% {
    transform: translateX(-10px);
  }

  20% {
    transform: translateX(10px);
  }

  30% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(0px);
  }

  70% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes dblup_damage {
  0% {
    transform: translateX(0px);
  }

  10% {
    transform: translateX(-10px);
  }

  20% {
    transform: translateX(10px);
  }

  30% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(0px);
  }

  70% {
    transform: translateX(0px);
  }

  90% {
    transform: rotate(-170deg);
    opacity: 1;
  }

  100% {
    transform: rotate(-170deg);
    opacity: 1;
  }
}

@keyframes dblup_damage_hp_lose {
  0% {
    width: calc(100% - 2px);
  }

  100% {
    width: calc(100% - 2px);
  }
}

@keyframes dblup_damage_hp {
  0% {
    width: calc(100% - 2px);
  }

  100% {
    width: 0%;
  }
}

#dblup_game {
  overflow: hidden;
  height: 300px;

  .custom_dialog_message {
    background-color: #00cbff;
    background-image: url('../../uploads/2025/12/maptile_sogen_01.png');
    background-size: 150px;
    background-repeat: repeat-x;
    background-position: 50px 120px;
    width: 100%;
  }

  .win {
    #dblup_game_enemy_icon {
      animation-delay: 2s;
      animation-name: dblup_damage;
    }

    #dblup_game_enemy_bar {
      animation-delay: 2s;
      animation-name: dblup_damage_hp;
    }
  }

  .lose {
    #dblup_game_enemy_icon {
      animation-delay: 1s;
      animation-name: dblup_damage_lose;
    }

    #dblup_game_enemy_bar {
      animation-delay: 1s;
      animation-name: dblup_damage_hp_lose;
    }

  }

  #dblup_game_enemy_icon {
    text-indent: 99999px;
    width: 200px;
    height: 150px;
    background-image: url('../../uploads/2025/12/character_monster_dragon_01_red.png');
    /*
    background-image: url('../../uploads/2025/12/character_monster_slime_green.png');
    */
    background-size: 200px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 40px auto 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0px 0px 2px #ffffff);
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  #dblup_game_enemy_hp {
    width: 200px;
    background: #ffffff;
    outline: 2px solid #000000;
    height: 10px;
    border-radius: 100px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  #dblup_game_enemy_bar {
    width: calc(100% - 2px);
    height: 8px;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100px;
    background: linear-gradient(90deg, #cc0000, #ffcc00);
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  #dblup_game_enemy_data {
    position: absolute;
    right: 5px;
    top: -13px;
    font-size: 10px;
    font-family: monospace;
    font-weight: bold;
    text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;
  }

  #dblup_game_msg {
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;
    text-align: center;
  }

  .custom_dialog_buttons button {
    padding: 0px;
    height: 50px;
    width: 50px;
    text-indent: -999999px;
    background-color: #b77a00;
    background-image: url('../../uploads/2025/12/mark_question.png');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #000000;
    position: relative;
    border-radius: 5px;
  }

}

#dblup_game #dblup_game_stage.win:after {
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  background-image: url('../../uploads/2025/12/kogeki_cut_02.png');
  background-size: 120px;
  background-repeat: no-repeat;
  animation-name: dblup_slash;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;

}

@keyframes dblup_slash {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#dblup_game:has(.win),
#dblup_game:has(.lose) {
  .custom_dialog_buttons button[disabled]:after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../../uploads/2025/12/kemuri_white.png');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    animation-name: dblup_button_hazure;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .custom_dialog_buttons button[disabled]:before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #b77a00;
    background-image: url('../../uploads/2025/12/portion_01_lightblue_01.png');
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    animation-name: dblup_button_item;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}

#dblup_game:has(.win) {
  .custom_dialog_buttons button[disabled].active:before {
    background-image: url('../../uploads/2025/12/tsurugi_bronze_red.png');
    background-size: 30px;
  }

  .custom_dialog_buttons button[disabled].active {
    animation-name: dblup_attack;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
  }
}

#dblup_game:has(.lose) {
  .custom_dialog_buttons button[disabled].active:before {
    background-image: url('../../uploads/2025/12/tsurugi_bronze_red.png');
    background-size: 30px;
  }
}

@keyframes dblup_attack {
  0% {
    top: 0px;
    left: 0px;
  }

  30% {
    top: -170px;
    left: 0px;
  }

  100% {
    top: 0px;
    left: 0px;
  }

}

@keyframes dblup_button_hazure {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0;
  }

  30% {
    transform: rotate(10deg) scale(1);
    opacity: 1;
  }

  60% {
    transform: rotate(-10deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotate(0deg) scale(2);
    opacity: 0;
  }
}

@keyframes dblup_button_item {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0;
  }

  30% {
    transform: rotate(10deg) scale(1);
    opacity: 0;
  }

  60% {
    transform: rotate(-10deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

#dblup_animation {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(3px);
}

@keyframes get_dblup {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
  }

  50% {
    transform: translate(-50%, -50%) rotate(1440deg) scale(1.2);
    opacity: 1
  }
  65% {
    transform: translate(-50%, -50%) rotate(1440deg) scale(1.2);
    opacity: 1
  }

  100% {
    transform: translate(-50%, -100vh) rotate(1440deg) scale(1.5);
    opacity: 0;
  }
}

#dblup_animation.get_dblup {
  & i {
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    height: 10px;
    transform: translate(-50%, -50%);
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 50px;
    white-space: nowrap;
    animation-name: get_dblup;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  & i:before,
  & i:after{
    transform: translate(-50%, -50%);
    position: absolute;
    content: 'DOUBLEUP\a CHANCE!!!';
    white-space: pre-wrap;
  }
  & i:before {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: #000000;
    filter: drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff);
  }
  
  & i:after {
    background: linear-gradient(30deg, #775f00, #ffcc00, #705c0e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes lose_dblup {
  0% {
    transform: translate(-50%, -100px);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  80% {
    transform: translate(-50%, 0px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 30px);
    opacity: 0;
  }
}

#dblup_animation.lose_dblup {
  & i {
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    height: 10px;
    transform: translate(-50%, -50%);
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 50px;
    white-space: nowrap;
    -webkit-text-stroke-color: #ffffff;
    animation-name: lose_dblup;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  & i:after,
  & i:before {
    transform: translate(-50%, -50%);
    position: absolute;
    content: 'LOSE...';
  }
  & i:before {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: #003462;
    filter: drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff);
  }
  
  & i:after {
    background: linear-gradient(#005a93, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }}

@keyframes win_dblup {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0);
    opacity: 0;
  }

  30% {
    transform: translate(-50%, -40dvh) rotate(0deg) scale(1);
    opacity: 1
  }
  40% {
    transform: translate(-50%, -42dvh) rotate(0deg) scale(1.4);
    opacity: 1
  }
  60% {
    transform: translate(-50%, -10dvh) rotate(0deg) scale(2);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -10dvh) rotate(0deg) scale(2);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -10dvh) rotate(0deg) scale(2);
    opacity: 0;
  }
}

#dblup_animation.win_dblup {
  & i {
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    height: 10px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    font-size: 50px;
    white-space: nowrap;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
    animation-name: win_dblup;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-fill-mode: forwards;
  }

  & i:before,
  & i:after {
    content: 'WIN!!!';
    position: absolute;
    transform: translate(-50%, -50%);
  }
  & i:before {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: #000000;
    filter: drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 2px #ffffff);
  }
  
  & i:after {
    background: linear-gradient(30deg, #775f00, #ffcc00, #705c0e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

main {
  min-height: calc(100dvh - 200px);
}

main h1 {
  text-align: center;
  margin: 20px;
}

#charge_list {
  margin-bottom: 30px;

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    li {
      width: calc(calc(100% - 40px) / 3);
      border: 2px solid #cccccc;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      justify-content: center;
      align-items: center;

      i {
        width: 150px;
        height: 150px;
        display: block;
        max-width: 80%;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          max-width: 100%;
          max-height: 100%;
          display: block;
          margin: auto;

        }
      }

      .charge_point {
        font-size: 18px;
      }

      .charge_price {
        font-size: 14px;
      }

      button {
        width: 100%;
        background: #ffcc00;
        border: 0px;
        border-radius: 50px;
        padding: 10px;
        margin-top: 20px;
      }
    }
  }
}

#dblup_result {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100dvh;
  z-index: 1000;

  .btn_retry,
  .btn_cancel {
    display: none;
  }

  .thumb {
    position: fixed;
    max-width: 70%;
    width: 300px;
    height: auto;
    aspect-ratio: calc(143 / 200);
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;

    img {
      width: 100%;
      opacity: 0;
      animation-delay: 0.5s, 1s;
      animation-duration: 1s, 1s;
      animation-iteration-count: 1, infinite;
      animation-fill-mode: forwards;
      animation-name: dblup_result_card, dblup_result_card_glow;
      border-radius: 10px;
      box-shadow: 0px 0px px #ffcc00;
    }

    --sw: 2px;

    .title {
      top: -20px;
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
    }

    .points .before,
    .points .result,
    .points i,
    .title {
      position: relative;

      span {
        display: block;
        width: 100%;
        white-space: nowrap;
        left: 0px;
      }

      span:nth-child(1) {
        -webkit-text-stroke-color: #ffcc00;
        -webkit-text-stroke-width: 8px;
      }

      span:nth-child(2) {
        -webkit-text-stroke-color: #000000;
        -webkit-text-stroke-width: 4px;
        position: absolute;
        top: 0px;
      }

      span:nth-child(3) {
        background: linear-gradient(70deg, #775f00, #ffcc00, #705c0e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        top: 0px;
      }
    }

    .points {
      position: absolute;
      top: auto;
      bottom: -45px;
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 10px;

      i {
        top: -1px;
        font-size: 0.5em;

        span:nth-child(1) {
          -webkit-text-stroke-color: #ffcc00;
          -webkit-text-stroke-width: 8px !important;
        }
      }

      .before {
        font-size: 0.8em;
      }

      small {
        font-size: 0.5em;
      }
    }

    .btn_close {
      position: fixed;
      bottom: -95px;
      left: 50%;
      width: 150px;
      text-align: center;
      transform: translate(-50%, 0%);
      background: linear-gradient(70deg, #775f00, #ffcc00, #705c0e);
      font-size: 20px;
      padding: 5px;
      border-radius: 50px;
      font-weight: bold;
      border: 2px solid #ffcc00;

    }

    .points,
    .title,
    .btn_close {
      opacity: 0;
      animation-delay: 1.5s;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-name: dblup_result_after;

    }
  }
}

#dblup_result:before {
  content: '';
  display: block;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 100dvh;
  position: fixed;
  background-image: conic-gradient(at 50% -10%, rgba(40, 0, 0, 1) 110deg, rgba(112, 0, 0, 1) 160deg, rgba(213, 0, 0, 1) 180deg, rgba(112, 0, 0, 1) 200deg, rgba(40, 0, 0, 1) 250deg);
  transform: translate(0%, -50%);
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: dblup_result_bk;
}

@keyframes dblup_result_bk {
  0% {
    transform: translate(0%, -50%) scaleY(0);
  }

  100% {
    transform: translate(0%, -50%) scaleY(1);
  }
}

@keyframes dblup_result_card_glow {
  0% {
    box-shadow: 0px 0px 10px #ffcc00;
  }

  25% {
    box-shadow: 0px 0px 50px #ffcc00;
  }

  50% {
    box-shadow: 0px 0px 10px #ffcc00;
  }

  75% {
    box-shadow: 0px 0px 50px #ffcc00;
  }

  100% {
    box-shadow: 0px 0px 10px #ffcc00;
  }
}

@keyframes dblup_result_card {
  0% {
    transform: translateY(300px) scale(0) rotate(-500deg);
    opaciy: 0;
  }

  20% {
    opaciy: 1;
  }

  60% {
    transform: translateY(0px) scale(1.2);
    opaciy: 1;
  }

  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes dblup_result_after {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 600px) {
  #result_list {
    ul {
      .result_card {
        width: 100%;
      }
    }
  }

  #charge_list {
    margin-bottom: 30px;

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      li {
        width: calc(100%);
      }
    }
  }
}

body:has(.payment_form.show) {
  overflow: hidden;
}

.payment_form.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;

  .payment_form_inner {
    top: 20px;
    transition-delay: 0.3s;
  }
}

.payment_form {
  transition-duration: 0.5s;
  transition-delay: 0.5s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  width: 100%;
  height: 100dvh;

  .payment_form_inner {
    transition-delay: 0s;
    transition-duration: 0.5s;
    background: #ffffff;
    position: fixed;
    top: 100dvh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    height: calc(100dvh - 20px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
  }

  .payment_form_body {
    padding: 10px;
    overflow-y: auto;
  }

  .payment_form_title {
    display: flex;
    justify-content: center;
    min-height: 30px;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    position: sticky;
    background: #ffffff;
    top: 0px;
    width: 100%;
    border-radius: 10px 10px 0px 0px;

    button {
      position: absolute;
      right: 10px;
      border: 0px;
      background: 0px;

      img {
        width: 16px;
        height: 16px;
        display: block;
      }
    }
  }

  strong {
    display: block;
    margin-top: 15px;
    margin-bottom: 3px;
  }

  dd small {
    display: inline-block;
    width: 15px;
    text-align: right;
  }

  .payment_form_coupons {
    display: none;
    strong {
      margin-top: 0px;
    }
  }
  .payment_form_coupons:has(select option:nth-child(2)) {
    display: block;
  }

  .payment_form_summery {
    dl {
      padding: 5px 0px;
    }

    dl:has(select) {
      gap: 10px;
      padding: 0px;
      align-items: center;
      margin-bottom: 5px;

      dt {
        width: 100%;
      }

      dd {
        white-space: nowrap;
      }

      select {
        border: 0px;
        width: 100%;
        padding: 5px 0px;
        background: #f0f0f0;
        border-radius: 4px;
        height: 30px;
      }
    }

    #coupon_apply {
      border: 0px;
      background: #000000;
      color: #fff;
      font-size: 12px;
      height: 30px;
      padding: 0px 10px;
      border-radius: 5px;
    }

  }

  .payment_form_cards {
    li {
      margin-bottom: 5px;

      label {
        border: 2px solid #f0f0f0;
        display: flex;
        align-items: center;
        padding: 8px 8px;
        gap: 10px;
        background: #f0f0f0;
        border-radius: 5px;
      }

      label:has(input:checked) {
        border-color: #000000;
      }

      .card_brand {
        margin-left: auto;
        width: 28px;
        height: 18px;
        display: block;
        background-size: 100%;
        background-position: center;
      }

      input {
        width: 16px;
        height: 16px;
      }

      i {
        display: block;
        width: 16px;
        height: 16px;
        position: relative;
        background: #ffffff;
        border-radius: 100px;
      }

      img {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .payment_form_buttons {
    border-top: 1px solid #cccccc;
    background: #ffffff;
    width: 100%;
    padding: 10px;
    margin-top: auto;

    button {
      background: #000000;
      border: 0px;
      border-radius: 5px;
      display: block;
      width: 100%;
      height: 40px;
      color: #ffffff;

    }

    button[disabled] {
      background: #666666;
      color: #cccccc;
      position: relative;
    }

    button[disabled]:before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Arrow%20%2F%20Arrows_Reload_01%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M10%2016H5V21M14%208H19V3M4.58301%209.0034C5.14369%207.61566%206.08244%206.41304%207.29255%205.53223C8.50266%204.65141%209.93686%204.12752%2011.4298%204.02051C12.9227%203.9135%2014.4147%204.2274%2015.7381%204.92661C17.0615%205.62582%2018.1612%206.68254%2018.9141%207.97612M19.4176%2014.9971C18.8569%2016.3848%2017.9181%2017.5874%2016.708%2018.4682C15.4979%2019.3491%2014.0652%2019.8723%2012.5723%2019.9793C11.0794%2020.0863%209.58606%2019.7725%208.2627%2019.0732C6.93933%2018.374%205.83882%2017.3175%205.08594%2016.0239%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
      mask-size: 16px;
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: contain;
      background: #cccccc;
      position: absolute;
      top: calc(50% - 8px);
      margin-left: -20px;
      animation-name: loading_rot;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes loading_rot {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.payment_form_card {
  #fincode-ui {
    max-width: 350px !important;
  }

  #fincode-form {
    margin: 0px -10px !important;
    box-shadow: none !important;
    padding: 0px !important;
    max-width: 350px !important;
  }

  label:has(#set_default_card) {
    display: flex;
    gap: 5px;
    align-items: center;
  }
}

#fincode-error:has(li) {
  background: #ffdddd;
  border-radius: 4px;
  padding: 5px 0px;
  border: 1px solid #cc0000;
  font-size: 10px;
  margin-bottom: 10px;

  li {
    padding: 3px 10px;
    color: #cc0000;
    display: flex;
    gap: 5px;
  }

  li:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Edit%20%2F%20Close_Circle%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M9%209L11.9999%2011.9999M11.9999%2011.9999L14.9999%2014.9999M11.9999%2011.9999L9%2014.9999M11.9999%2011.9999L14.9999%209M12%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021Z%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    background: #cc0000;

  }
}

.payment_form_summery dl {
  display: flex;

  dd {
    margin-left: auto;

  }
}

.brand_VISA {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22visa%22%20fill%3D%22%23393939%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8846154%2C28.2035928%20C39.6085397%2C28.2035928%2028.8461538%2C38.7262417%2028.8461538%2C51.7065868%20L28.8461538%2C419.293413%20C28.8461538%2C432.273758%2039.6085397%2C442.796407%2052.8846154%2C442.796407%20L697.115385%2C442.796407%20C710.39146%2C442.796407%20721.153846%2C432.273758%20721.153846%2C419.293413%20L721.153846%2C51.7065868%20C721.153846%2C38.7262417%20710.39146%2C28.2035928%20697.115385%2C28.2035928%20L52.8846154%2C28.2035928%20Z%20M52.8846154%2C0%20L697.115385%2C0%20C726.322751%2C-5.0099645e-15%20750%2C23.1498275%20750%2C51.7065868%20L750%2C419.293413%20C750%2C447.850173%20726.322751%2C471%20697.115385%2C471%20L52.8846154%2C471%20C23.6772488%2C471%203.41607085e-15%2C447.850173%200%2C419.293413%20L0%2C51.7065868%20C-3.41607085e-15%2C23.1498275%2023.6772488%2C5.0099645e-15%2052.8846154%2C0%20Z%22%20id%3D%22outline%22%3E%20%3C%2Fpath%3E%20%3Cg%20id%3D%22Logo%22%20transform%3D%22translate(60.000000%2C%20139.000000)%22%3E%20%3Cpolygon%20id%3D%22Shape%22%20points%3D%22222.597614%20191.12625%20254.442205%204.26252273%20305.375795%204.26252273%20273.50925%20191.12625%22%3E%20%3C%2Fpolygon%3E%20%3Cpath%20d%3D%22M457.520795%2C8.29261364%20C447.429341%2C4.50688636%20431.61825%2C0.444340909%20411.871568%2C0.444340909%20C361.544114%2C0.444340909%20326.092295%2C25.7884773%20325.790659%2C62.1117955%20C325.507159%2C88.9622045%20351.099477%2C103.940932%20370.419477%2C112.879295%20C390.244432%2C122.038159%20396.910023%2C127.879977%20396.815523%2C136.058523%20C396.689523%2C148.584068%20380.983432%2C154.306568%20366.343568%2C154.306568%20C345.957341%2C154.306568%20335.127068%2C151.474432%20318.400568%2C144.497659%20L311.837114%2C141.527114%20L304.688523%2C183.359114%20C316.585023%2C188.57475%20338.583477%2C193.094523%20361.424795%2C193.328386%20C414.964295%2C193.328386%20449.721205%2C168.274432%20450.116386%2C129.486477%20C450.30825%2C108.229705%20436.738432%2C92.0520682%20407.353705%2C78.7161136%20C389.550477%2C70.07175%20378.647659%2C64.3034318%20378.763159%2C55.55025%20C378.763159%2C47.7831136%20387.991705%2C39.4776136%20407.931205%2C39.4776136%20C424.587068%2C39.2189318%20436.651568%2C42.8509773%20446.051932%2C46.6367045%20L450.616568%2C48.7930227%20L457.520795%2C8.29261364%22%20id%3D%22Shape%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M588.586568%2C4.26252273%20L549.229705%2C4.26252273%20C537.037295%2C4.26252273%20527.91375%2C7.59006818%20522.55875%2C19.7586136%20L446.915795%2C191.006932%20L500.399932%2C191.006932%20C500.399932%2C191.006932%20509.145477%2C167.981386%20511.123295%2C162.926114%20C516.967977%2C162.926114%20568.924841%2C163.006295%20576.353114%2C163.006295%20C577.876568%2C169.547795%20582.550023%2C191.006932%20582.550023%2C191.006932%20L629.811477%2C191.006932%20L588.586568%2C4.26252273%20Z%20M526.143068%2C124.92375%20C530.355477%2C114.157432%20546.43575%2C72.6881591%20546.43575%2C72.6881591%20C546.135068%2C73.1854773%20550.616659%2C61.8693409%20553.189159%2C54.8534318%20L556.632205%2C70.96425%20C556.632205%2C70.96425%20566.384795%2C115.569205%20568.42275%2C124.922795%20L526.143068%2C124.922795%20L526.143068%2C124.92375%20Z%22%20id%3D%22Path%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M179.361477%2C4.26252273%20L129.496023%2C131.689568%20L124.183023%2C105.793705%20C114.900068%2C75.94125%2085.9773409%2C43.5993409%2053.6430682%2C27.4073864%20L99.2388409%2C190.828432%20L153.127705%2C190.766386%20L233.313341%2C4.26252273%20L179.361477%2C4.26252273%22%20id%3D%22Path%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M82.9686136%2C4.26252273%20L0.838568182%2C4.26252273%20L0.188522727%2C8.15038636%20C64.0848409%2C23.6178409%20106.364523%2C60.9968864%20123.914795%2C105.909205%20L106.056205%2C20.0382955%20C102.973023%2C8.20575%2094.0308409%2C4.67488636%2082.9686136%2C4.26252273%22%20id%3D%22Shape%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}

.brand_MASTER {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22mastercard%22%20fill%3D%22%23393939%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8846154%2C28.2035928%20C39.6085397%2C28.2035928%2028.8461538%2C38.7262417%2028.8461538%2C51.7065868%20L28.8461538%2C419.293413%20C28.8461538%2C432.273758%2039.6085397%2C442.796407%2052.8846154%2C442.796407%20L697.115385%2C442.796407%20C710.39146%2C442.796407%20721.153846%2C432.273758%20721.153846%2C419.293413%20L721.153846%2C51.7065868%20C721.153846%2C38.7262417%20710.39146%2C28.2035928%20697.115385%2C28.2035928%20L52.8846154%2C28.2035928%20Z%20M52.8846154%2C0%20L697.115385%2C0%20C726.322751%2C-5.0099645e-15%20750%2C23.1498275%20750%2C51.7065868%20L750%2C419.293413%20C750%2C447.850173%20726.322751%2C471%20697.115385%2C471%20L52.8846154%2C471%20C23.6772488%2C471%203.41607085e-15%2C447.850173%200%2C419.293413%20L0%2C51.7065868%20C-3.41607085e-15%2C23.1498275%2023.6772488%2C5.0099645e-15%2052.8846154%2C0%20Z%22%20id%3D%22Rectangle-1%22%3E%20%3C%2Fpath%3E%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate(61.000000%2C%2040.000000)%22%3E%20%3Cpath%20d%3D%22M627.975838%2C195.157578%20C627.975838%2C302.396893%20540.546589%2C389.671093%20433.088283%2C389.671093%20C388.268202%2C389.671093%20346.949825%2C374.455828%20313.986699%2C349.01146%20C281.045378%2C374.455828%20239.727437%2C389.671093%20194.905175%2C389.671093%20C87.4494867%2C389.671093%200.0241617751%2C302.396893%200.0241617751%2C195.157578%20C0.0241617751%2C87.914347%2087.4494867%2C0.681490329%20194.905175%2C0.681490329%20C239.727437%2C0.681490329%20281.045378%2C15.8397441%20313.986699%2C41.3211038%20C346.949825%2C15.8397441%20388.268202%2C0.681490329%20433.088283%2C0.681490329%20C540.546589%2C0.681490329%20627.975838%2C87.914347%20627.975838%2C195.157578%20Z%20M432.807494%2C17.8608216%20C393.277036%2C17.8608216%20356.78168%2C30.7864643%20327.298456%2C52.5990305%20C354.038751%2C77.4362844%20373.814881%2C109.689463%20383.264688%2C146.037936%20L365.202343%2C146.037936%20C355.948772%2C113.902264%20337.860263%2C85.5311309%20313.70591%2C63.696805%20C289.577722%2C85.5311309%20271.47613%2C113.902264%20262.257444%2C146.037936%20L244.168935%2C146.037936%20C253.640545%2C109.689463%20273.416677%2C77.4362844%20300.15697%2C52.5990305%20C270.656304%2C30.7864643%20234.174467%2C17.8608216%20194.624385%2C17.8608216%20C96.6376908%2C17.8608216%2017.2034931%2C97.1337449%2017.2034931%2C194.946045%20C17.2034931%2C292.733102%2096.6376908%2C372.030832%20194.624385%2C372.030832%20C234.174467%2C372.030832%20270.656304%2C359.105625%20300.15697%2C337.294364%20C274.995279%2C313.907219%20256.01281%2C283.944099%20245.978658%2C250.215571%20L264.241599%2C250.215571%20C273.94433%2C279.748271%20291.169406%2C305.814984%20313.70591%2C326.193108%20C336.268577%2C305.814984%20353.515457%2C279.748271%20363.21819%2C250.215571%20L381.476769%2C250.215571%20C371.425174%2C283.944099%20352.447067%2C313.907219%20327.298456%2C337.294364%20C356.78168%2C359.105625%20393.277036%2C372.030832%20432.807494%2C372.030832%20C530.794188%2C372.030832%20610.23013%2C292.733102%20610.23013%2C194.946045%20C610.23013%2C97.1337449%20530.794188%2C17.8608216%20432.807494%2C17.8608216%20Z%22%20id%3D%22path14-path%22%20stroke%3D%22%23979797%22%3E%20%3C%2Fpath%3E%20%3Cpolygon%20id%3D%22path13%22%20points%3D%22122.86111%20152.432251%2094.451074%20152.432251%2076.6965997%20205.25722%2075.9570123%20152.432251%2049.6288109%20152.432251%2035.3372317%20237.781967%2052.4702943%20237.781967%2063.474283%20172.575798%2065.0110219%20237.781967%2077.4937503%20237.781967%20100.886711%20172.186288%2090.4055791%20237.781967%20108.703842%20237.781967%22%3E%20%3C%2Fpolygon%3E%20%3Cpath%20d%3D%22M170.015636%2C237.698823%20L154.848412%2C237.698823%20L155.200763%2C230.499197%20C150.570924%2C236.185609%20144.406528%2C238.905652%20136.029036%2C238.905652%20C126.091257%2C238.905652%20119.325074%2C231.162017%20119.325074%2C219.962404%20C119.325074%2C203.038516%20131.126213%2C193.200666%20151.427817%2C193.200666%20C153.507909%2C193.200666%20156.171909%2C193.394333%20158.893906%2C193.742933%20C159.459499%2C191.43242%20159.595992%2C190.46365%20159.595992%2C189.2207%20C159.595992%2C184.641018%20156.423961%2C182.913682%20147.867677%2C182.913682%20C138.924593%2C182.796612%20131.535254%2C185.030093%20128.50146%2C186.038467%20C128.697259%2C184.873853%20131.049899%2C170.435432%20131.049899%2C170.435432%20C140.15128%2C167.75804%20146.176132%2C166.74836%20152.94406%2C166.74836%20C168.656381%2C166.74836%20176.979363%2C173.772598%20176.960612%2C187.087316%20C176.979363%2C190.657317%20176.395018%2C195.062045%20175.481872%2C200.867704%20C173.887571%2C210.897916%20170.483984%2C232.440654%20170.015636%2C237.698823%20Z%20M157.159065%2C207.105471%20C155.234218%2C206.909627%20154.396076%2C206.833466%20153.074324%2C206.833466%20C142.690003%2C206.833466%20137.458812%2C210.381272%20137.458812%2C217.370258%20C137.458812%2C221.700131%20140.026003%2C224.45412%20143.993439%2C224.45412%20C151.461272%2C224.45412%20156.826774%2C217.370258%20157.159065%2C207.105471%20Z%22%20id%3D%22path15%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M409.634735%2C150.523436%20C385.384445%2C150.523436%20368.425378%2C171.831597%20368.425378%2C202.342207%20C368.425378%2C225.006908%20380.700969%2C239.176372%20400.398606%2C239.176372%20C405.452748%2C239.176372%20409.82661%2C238.513552%20416.555291%2C236.652172%20L419.764823%2C217.224104%20C413.716424%2C220.195696%20408.740776%2C221.610118%20404.223009%2C221.610118%20C393.58707%2C221.610118%20387.168004%2C213.769432%20387.168004%2C200.82377%20C387.168004%2C182.019789%20396.72247%2C168.841291%20410.38915%2C168.841291%20C415.465096%2C168.841291%20420.209623%2C170.162143%20426.742069%2C173.461881%20L429.737924%2C154.948619%20C427.056045%2C153.901511%20417.623681%2C150.523436%20409.634735%2C150.523436%20Z%22%20id%3D%22path17%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M475.451263%2C237.698823%20L460.306279%2C237.698823%20L460.655141%2C230.499197%20C456.006551%2C236.185609%20449.822967%2C238.905652%20441.458994%2C238.905652%20C431.542583%2C238.905652%20424.735408%2C231.162017%20424.735408%2C219.962404%20C424.735408%2C203.038516%20436.579283%2C193.200666%20456.861263%2C193.200666%20C458.941355%2C193.200666%20461.605791%2C193.394333%20464.331278%2C193.742933%20C464.889457%2C191.43242%20465.029002%2C190.46365%20465.029002%2C189.2207%20C465.029002%2C184.641018%20461.858716%2C182.913682%20453.320311%2C182.913682%20C444.358911%2C182.796612%20436.989196%2C185.030093%20433.954094%2C186.038467%20C434.128525%2C184.873853%20436.483346%2C170.435432%20436.483346%2C170.435432%20C445.601733%2C167.75804%20451.628329%2C166.74836%20458.35701%2C166.74836%20C474.0907%2C166.74836%20482.415426%2C173.772598%20482.393622%2C187.087316%20C482.432869%2C190.657317%20481.831082%2C195.062045%20480.915318%2C200.867704%20C479.341077%2C210.897916%20475.922227%2C232.440654%20475.451263%2C237.698823%20Z%20M462.588587%2C207.105471%20C460.682927%2C206.909627%20459.828214%2C206.833466%20458.485095%2C206.833466%20C448.119524%2C206.833466%20442.869147%2C210.381272%20442.869147%2C217.370258%20C442.869147%2C221.700131%20445.437646%2C224.45412%20449.445201%2C224.45412%20C456.893411%2C224.45412%20462.278972%2C217.370258%20462.588587%2C207.105471%20Z%22%20id%3D%22path19%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M260.067396%2C221.615331%20C258.842017%2C222.045751%20257.228529%2C222.275105%20255.148437%2C222.275105%20C250.79202%2C222.275105%20248.868916%2C220.724463%20248.868916%2C217.132701%20C248.908164%2C214.922285%20251.921461%2C198.503672%20254.023357%2C185.325175%20L263.412113%2C185.325175%20L265.902118%2C168.634122%20L256.548247%2C168.634122%20L258.667586%2C158.158694%20L240.484447%2C158.158694%20C240.484447%2C158.158694%20233.602703%2C199.008512%20232.572251%2C205.470463%20C231.405306%2C212.865498%20229.928311%2C220.918565%20230.042564%2C223.983726%20C230.042564%2C233.864227%20235.139005%2C239.241208%20244.490695%2C239.241208%20C248.733732%2C239.241208%20252.636629%2C238.539219%20257.660246%2C236.989012%20L260.067396%2C221.615331%20Z%22%20id%3D%22path21%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M315.968704%2C236.109447%20C309.706626%2C238.013477%20303.67567%2C238.905652%20297.300211%2C238.905652%20C276.917932%2C238.863436%20266.303797%2C228.250047%20266.303797%2C207.931111%20C266.303797%2C184.21408%20279.81785%2C166.74836%20298.154923%2C166.74836%20C313.14728%2C166.74836%20322.736632%2C176.509613%20322.736632%2C191.879813%20C322.736632%2C196.964335%20322.05635%2C201.913071%20320.477749%2C208.95994%20L284.270205%2C208.95994%20C283.044826%2C218.990152%20289.503139%2C223.183805%20300.082388%2C223.183805%20C306.59303%2C223.183805%20312.449556%2C221.862952%20318.982002%2C218.836959%20L315.968704%2C236.109447%20Z%20M306.432096%2C195.396698%20C306.549837%2C193.960515%20308.3552%2C182.973284%20297.972186%2C182.973284%20C292.176711%2C182.973284%20288.016529%2C187.418487%20286.34635%2C195.396698%20L306.432096%2C195.396698%20Z%22%20id%3D%22path23%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M184.505902%2C190.230815%20C184.505902%2C199.023298%20188.744142%2C205.058311%20198.428124%2C209.619278%20C205.837959%2C213.111378%20206.984407%2C214.119317%20206.984407%2C217.286753%20C206.984407%2C221.590948%20203.717311%2C223.532405%20196.464029%2C223.532405%20C191.020032%2C223.532405%20185.924899%2C222.716393%20180.070117%2C220.817585%20C180.070117%2C220.817585%20177.66166%2C236.109447%20177.543919%2C236.848864%20C181.725905%2C237.741473%20185.419049%2C238.591432%20196.600521%2C238.905652%20C215.90874%2C238.905652%20224.816066%2C231.548045%20224.816066%2C215.712174%20C224.816066%2C206.146328%20221.100683%2C200.5957%20211.920808%2C196.381158%20C204.262409%2C192.850324%20203.368014%2C192.07348%20203.368014%2C188.833365%20C203.368014%2C185.067521%20206.420558%2C183.165232%20212.350345%2C183.165232%20C215.927491%2C183.165232%20220.846886%2C183.554741%20225.47498%2C184.21408%20L228.083162%2C168.10664%20C223.337326%2C167.368529%20216.162537%2C166.74836%20211.980551%2C166.74836%20C191.505387%2C166.74836%20184.427844%2C177.402223%20184.505902%2C190.230815%20Z%22%20id%3D%22path25%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M578.456133%2C237.781967%20L561.135121%2C237.781967%20L562.007277%2C231.321757%20C556.970577%2C236.660004%20551.820498%2C238.988795%20545.131063%2C238.988795%20C531.826328%2C238.988795%20523.039359%2C227.556347%20523.039359%2C210.207697%20C523.039359%2C187.090381%20536.666792%2C167.645775%20552.806033%2C167.645775%20C559.887938%2C167.645775%20565.290943%2C170.518575%20570.292756%2C177.097597%20L574.335197%2C152.432251%20L592.38446%2C152.432251%20L578.456133%2C237.781967%20Z%20M551.503179%2C221.874678%20C560.01978%2C221.874678%20566.028932%2C212.227014%20566.028932%2C198.487099%20C566.028932%2C189.657187%20562.627525%2C184.882099%20556.32184%2C184.882099%20C548.018917%2C184.882099%20542.127505%2C194.528022%20542.127505%2C208.172192%20C542.127505%2C217.272801%20545.280348%2C221.874678%20551.503179%2C221.874678%20Z%22%20id%3D%22path27%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M495.228638%2C168.452296%20C492.934869%2C189.918437%20488.870623%2C211.67225%20485.700337%2C233.177561%20L484.863068%2C237.852553%20L503.143451%2C237.852553%20C509.697702%2C195.411183%20511.289386%2C187.123539%20521.537215%2C188.171083%20C523.168146%2C179.4565%20526.203248%2C171.871281%20528.497018%2C168.02884%20C520.822048%2C166.434242%20516.539763%2C170.783264%20510.962328%2C178.99257%20C511.407126%2C175.420828%20512.205149%2C171.984869%20512.030718%2C168.452296%20L495.228638%2C168.452296%20Z%22%20id%3D%22path29%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M334.910017%2C168.452296%20C332.611886%2C189.918437%20328.530197%2C211.67225%20325.359911%2C233.177561%20L324.522642%2C237.852553%20L342.820469%2C237.852553%20C349.374719%2C195.411183%20350.94896%2C187.123539%20361.196789%2C188.171083%20C362.849525%2C179.4565%20365.90207%2C171.871281%20368.160953%2C168.02884%20C360.516508%2C166.434242%20356.203699%2C170.783264%20350.617541%2C178.99257%20C351.066701%2C175.420828%20351.860363%2C171.984869%20351.707736%2C168.452296%20L334.910017%2C168.452296%20Z%22%20id%3D%22path31%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

.brand_JCB {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22jcb%22%20fill%3D%22%23393939%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8846154%2C28.2035928%20C39.6085397%2C28.2035928%2028.8461538%2C38.7262417%2028.8461538%2C51.7065868%20L28.8461538%2C419.293413%20C28.8461538%2C432.273758%2039.6085397%2C442.796407%2052.8846154%2C442.796407%20L697.115385%2C442.796407%20C710.39146%2C442.796407%20721.153846%2C432.273758%20721.153846%2C419.293413%20L721.153846%2C51.7065868%20C721.153846%2C38.7262417%20710.39146%2C28.2035928%20697.115385%2C28.2035928%20L52.8846154%2C28.2035928%20Z%20M52.8846154%2C0%20L697.115385%2C0%20C726.322751%2C-5.0099645e-15%20750%2C23.1498275%20750%2C51.7065868%20L750%2C419.293413%20C750%2C447.850173%20726.322751%2C471%20697.115385%2C471%20L52.8846154%2C471%20C23.6772488%2C471%203.41607085e-15%2C447.850173%200%2C419.293413%20L0%2C51.7065868%20C-3.41607085e-15%2C23.1498275%2023.6772488%2C5.0099645e-15%2052.8846154%2C0%20Z%22%20id%3D%22Rectangle-1%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M160%2C273%20C153.284454%2C270.832645%20139.148301%2C264.218733%20139%2C264%20L139%2C110%20C139.004142%2C109.802246%20138.253738%2C92.5516641%20157%2C75%20C175.65598%2C56.8671041%20196.035859%2C58.0149157%20196%2C58%20L284%2C58%20L284%2C355%20C283.798177%2C354.87759%20285.132054%2C376.972789%20269%2C395%20C251.116764%2C416.077857%20225.634959%2C414.990403%20226%2C415%20L139%2C415%20L139%2C290%20L171%2C296%20C171.349194%2C295.57805%20183.740266%2C296.836706%20196%2C297%20C206.812935%2C297.318167%20216.81919%2C296.357281%20223%2C295%20C236.159524%2C293.304956%20242.720074%2C291.549443%20255%2C284%20C272.657024%2C270.995148%20271.848629%2C250.601661%20272%2C251%20L271%2C179%20L221%2C179%20L221%2C250%20C221.301463%2C249.656697%20221.772275%2C262.821523%20211%2C271%20C206.996172%2C274.542154%20200.437452%2C277.800725%20188%2C278%20C179.511634%2C277.800697%20167.791729%2C275.210316%20160%2C273%20Z%20M303%2C198%20L303%2C119%20C303.008279%2C119.012386%20302.116079%2C95.9876443%20319%2C78%20C335.59629%2C60.6858861%20357.372514%2C60%20357%2C60%20L448%2C60%20L448%2C359%20C447.986169%2C358.661185%20449.094247%2C380.604604%20431%2C399%20C413.918995%2C416.89394%20394.534708%2C417%20395%2C417%20L303%2C417%20L303%2C280%20C303.008279%2C279.843861%20315.123214%2C292.866647%20349%2C298%20C365.601054%2C300.105544%20384.679151%2C299.757275%20400%2C298%20C418.08387%2C295.572845%20431.474315%2C291.535087%20431%2C292%20L431%2C267%20C431.110085%2C266.672958%20424.750589%2C270.6234%20405%2C277%20C385.882978%2C282.637865%20337.326797%2C285.36992%20336%2C241%20C334.625006%2C195.792983%20375.988012%2C195.395409%20395%2C198%20C413.081407%2C200.126987%20431.474317%2C210.305685%20431%2C210%20L431%2C186%20C431.474317%2C185.996139%20408.064059%2C180.611239%20398%2C179%20C385.774134%2C178.123674%20368.423717%2C176.639058%20342%2C181%20C315.288738%2C184.60385%20303.008279%2C197.761199%20303%2C198%20Z%20M464%2C294%20L464%2C415%20L555%2C415%20C555.104464%2C415%20576.013199%2C412.975098%20588%2C401%20C608.107819%2C385.283797%20609%2C360.551319%20609%2C361%20L609%2C58%20L522%2C58%20C522.123299%2C58.0039986%20498.953211%2C57.2730795%20481%2C76%20C463.244479%2C93.8776576%20464.004681%2C115.199551%20464%2C115%20L464%2C179%20L552%2C179%20C552.378117%2C179.493996%20560.497156%2C179.631375%20569%2C183%20C574.863376%2C185.394257%20581.061997%2C189.99754%20584%2C197%20C589.722871%2C213.015846%20580.652806%2C224.4734%20576%2C228%20C569.90445%2C232.979817%20558.975343%2C234.619569%20559%2C235%20C558.975343%2C234.619569%20574.792352%2C236.246558%20584%2C244%20C586.677135%2C247.170496%20590.075787%2C251.641616%20591%2C256%20C593.252488%2C262.023832%20592.534176%2C267.773287%20593%2C268%20C592.534176%2C267.773287%20591.446378%2C277.900341%20583%2C285%20C579.551555%2C287.67805%20574.718619%2C290.363539%20570%2C292%20C563.231812%2C293.761438%20556.894519%2C293.947582%20557%2C294%20L464%2C294%20Z%20M493%2C199%20L493%2C228%20L524%2C228%20C524.322847%2C228%20539%2C227.956651%20539%2C213%20C539%2C199%20524.322847%2C199%20524%2C199%20L493%2C199%20Z%20M526%2C245%20L493%2C245%20L493%2C276%20L526%2C276%20C526.585782%2C275.989497%20543%2C276.950031%20543%2C261%20C543%2C244.049971%20526.489738%2C245.010503%20526%2C245%20Z%22%20id%3D%22Path-8%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}

.brand_AMEX {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22amex%22%20fill%3D%22%23393939%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8846154%2C28.2035928%20C39.6085397%2C28.2035928%2028.8461538%2C38.7262417%2028.8461538%2C51.7065868%20L28.8461538%2C419.293413%20C28.8461538%2C432.273758%2039.6085397%2C442.796407%2052.8846154%2C442.796407%20L697.115385%2C442.796407%20C710.39146%2C442.796407%20721.153846%2C432.273758%20721.153846%2C419.293413%20L721.153846%2C51.7065868%20C721.153846%2C38.7262417%20710.39146%2C28.2035928%20697.115385%2C28.2035928%20L52.8846154%2C28.2035928%20Z%20M52.8846154%2C0%20L697.115385%2C0%20C726.322751%2C-5.0099645e-15%20750%2C23.1498275%20750%2C51.7065868%20L750%2C419.293413%20C750%2C447.850173%20726.322751%2C471%20697.115385%2C471%20L52.8846154%2C471%20C23.6772488%2C471%203.41607085e-15%2C447.850173%200%2C419.293413%20L0%2C51.7065868%20C-3.41607085e-15%2C23.1498275%2023.6772488%2C5.0099645e-15%2052.8846154%2C0%20Z%22%20id%3D%22Rectangle-1%22%3E%20%3C%2Fpath%3E%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate(27.000000%2C%20109.000000)%22%3E%20%3Cpath%20d%3D%22M1.00185169%2C114.13736%20L34.3337698%2C114.13736%20L41.8494525%2C96.0854168%20L58.6754244%2C96.0854168%20L66.1714134%2C114.13736%20L131.754546%2C114.13736%20L131.754546%2C100.336105%20L137.608557%2C114.196192%20L171.654379%2C114.196192%20L177.508389%2C100.13019%20L177.508389%2C114.13736%20L340.495068%2C114.13736%20L340.418753%2C84.5051101%20L343.572239%2C84.5051101%20C345.780417%2C84.5811032%20346.425392%2C84.7845674%20346.425392%2C88.4150574%20L346.425392%2C114.13736%20L430.722649%2C114.13736%20L430.722649%2C107.239184%20C437.521967%2C110.867222%20448.097589%2C114.13736%20462.013787%2C114.13736%20L497.477569%2C114.13736%20L505.067105%2C96.0854168%20L521.893076%2C96.0854168%20L529.315214%2C114.13736%20L597.655492%2C114.13736%20L597.655492%2C96.9899751%20L608.004634%2C114.13736%20L662.768433%2C114.13736%20L662.768433%2C0.785672%20L608.570834%2C0.785672%20L608.570834%2C14.1726435%20L600.981299%2C0.785672%20L545.3682%2C0.785672%20L545.3682%2C14.1726435%20L538.399022%2C0.785672%20L463.279121%2C0.785672%20C450.704568%2C0.785672%20439.651369%2C2.53350409%20430.722649%2C7.40439063%20L430.722649%2C0.785672%20L378.883394%2C0.785672%20L378.883394%2C7.40439063%20C373.201705%2C2.38397078%20365.459542%2C0.785672%20356.850848%2C0.785672%20L167.462041%2C0.785672%20L154.754555%2C30.0624712%20L141.704887%2C0.785672%20L82.0520781%2C0.785672%20L82.0520781%2C14.1726435%20L75.4989347%2C0.785672%20L24.6246793%2C0.785672%20L0.99939%2C54.6792028%20L0.99939%2C114.13736%20L1.00185169%2C114.13736%20Z%20M211.404045%2C97.7872512%20L191.404894%2C97.7872512%20L191.331043%2C34.134787%20L163.043223%2C97.7872512%20L145.914458%2C97.7872512%20L117.552787%2C34.0784061%20L117.552787%2C97.7872512%20L77.874511%2C97.7872512%20L70.3785219%2C79.6593152%20L29.7598625%2C79.6593152%20L22.1875597%2C97.7872512%20L0.99939%2C97.7872512%20L35.9338988%2C16.5142875%20L64.9183893%2C16.5142875%20L98.0976798%2C93.4630208%20L98.0976798%2C16.5142875%20L129.937785%2C16.5142875%20L155.468458%2C71.6482149%20L178.921427%2C16.5142875%20L211.401583%2C16.5142875%20L211.401583%2C97.7872512%20L211.404045%2C97.7872512%20Z%20M63.7112913%2C62.7923309%20L50.3588303%2C30.3924772%20L37.082683%2C62.7923309%20L63.7112913%2C62.7923309%20Z%20M290.995623%2C97.7872512%20L225.826062%2C97.7872512%20L225.826062%2C16.5142875%20L290.995623%2C16.5142875%20L290.995623%2C33.4385966%20L245.335327%2C33.4385966%20L245.335327%2C48.0880268%20L289.90015%2C48.0880268%20L289.90015%2C64.7475871%20L245.335327%2C64.7475871%20L245.335327%2C80.9781567%20L290.995623%2C80.9781567%20L290.995623%2C97.7872512%20Z%20M382.833608%2C38.4026356%20C382.833608%2C51.3606156%20374.1486%2C58.0553273%20369.087269%2C60.0654563%20C373.355921%2C61.6833654%20377.001753%2C64.5416719%20378.737277%2C66.9097023%20C381.491962%2C70.9520236%20381.967077%2C74.5629023%20381.967077%2C81.8214305%20L381.967077%2C97.7872512%20L362.290413%2C97.7872512%20L362.216561%2C87.5380426%20C362.216561%2C82.6475448%20362.686753%2C75.6145431%20359.136929%2C71.7045958%20C356.286237%2C68.8462902%20351.941271%2C68.2260919%20344.917936%2C68.2260919%20L323.975939%2C68.2260919%20L323.975939%2C97.7872512%20L304.469136%2C97.7872512%20L304.469136%2C16.5142875%20L349.339215%2C16.5142875%20C359.30925%2C16.5142875%20366.655073%2C16.7765845%20372.962043%2C20.4070745%20C379.133618%2C24.0375645%20382.833608%2C29.3374416%20382.833608%2C38.4026356%20Z%20M358.172965%2C50.470979%20C355.492133%2C52.0913399%20352.321416%2C52.1452699%20348.522956%2C52.1452699%20L324.823814%2C52.1452699%20L324.823814%2C34.093327%20L348.845443%2C34.093327%20C352.245102%2C34.093327%20355.792465%2C34.2453131%20358.096651%2C35.5592508%20C360.627317%2C36.7432665%20362.192981%2C39.263282%20362.192981%2C42.7442378%20C362.192981%2C46.2962838%20360.70363%2C49.1545894%20358.172965%2C50.470979%20Z%20M414.120367%2C97.7872512%20L394.214762%2C97.7872512%20L394.214762%2C16.5142875%20L414.120367%2C16.5142875%20L414.120367%2C97.7872512%20Z%20M645.195722%2C97.7872512%20L617.550416%2C97.7872512%20L580.572666%2C36.7871775%20L580.572666%2C97.7872512%20L540.842694%2C97.7872512%20L533.250697%2C79.6593152%20L492.725584%2C79.6593152%20L485.360067%2C97.7872512%20L462.532381%2C97.7872512%20C453.049769%2C97.7872512%20441.043878%2C95.6986772%20434.244561%2C88.7980504%20C427.388624%2C81.8974235%20423.821567%2C72.5503214%20423.821567%2C57.7709672%20C423.821567%2C45.7175456%20425.953432%2C34.6986044%20434.338108%2C25.9913117%20C440.645077%2C19.504968%20450.521566%2C16.5142875%20463.965111%2C16.5142875%20L482.851557%2C16.5142875%20L482.851557%2C33.9288719%20L464.361451%2C33.9288719%20C457.242107%2C33.9288719%20453.222091%2C34.9829635%20449.349779%2C38.7433766%20C446.023972%2C42.1654996%20443.741943%2C48.6346839%20443.741943%2C57.1532208%20C443.741943%2C65.8605125%20445.479929%2C72.1384901%20449.106068%2C76.2396441%20C452.109386%2C79.455851%20457.567057%2C80.4314997%20462.70224%2C80.4314997%20L471.463562%2C80.4314997%20L498.958702%2C16.5167384%20L528.189366%2C16.5167384%20L561.21849%2C93.3894796%20L561.21849%2C16.5167384%20L590.921808%2C16.5167384%20L625.213803%2C73.1190406%20L625.213803%2C16.5167384%20L645.195722%2C16.5167384%20L645.195722%2C97.7872512%20Z%20M526.615482%2C62.7923309%20L513.115317%2C30.3924772%20L499.689004%2C62.7923309%20L526.615482%2C62.7923309%20Z%22%20id%3D%22Path%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M694.908287%2C227.558349%20C690.169443%2C234.458977%20680.935468%2C237.957092%20668.434768%2C237.957092%20L630.760346%2C237.957092%20L630.760346%2C220.525348%20L668.282141%2C220.525348%20C672.004287%2C220.525348%20674.608804%2C220.037524%20676.176931%2C218.512767%20C677.53581%2C217.25521%20678.483578%2C215.428934%20678.483578%2C213.210438%20C678.483578%2C210.842408%20677.53581%2C208.962201%20676.100617%2C207.834568%20C674.685118%2C206.59417%20672.624644%2C206.030354%20669.227447%2C206.030354%20C650.909663%2C205.410156%20628.057359%2C206.59417%20628.057359%2C180.869417%20C628.057359%2C169.078292%20635.575503%2C156.666969%20656.047307%2C156.666969%20L694.905825%2C156.666969%20L694.908287%2C140.492781%20L658.801992%2C140.492781%20C647.906344%2C140.492781%20639.99186%2C143.091241%20634.386485%2C147.131111%20L634.386485%2C140.492781%20L580.984025%2C140.492781%20C572.44426%2C140.492781%20562.420068%2C142.600965%20557.678762%2C147.131111%20L557.678762%2C140.492781%20L462.315997%2C140.492781%20L462.315997%2C147.131111%20C454.726462%2C141.679248%20441.920507%2C140.492781%20436.009877%2C140.492781%20L373.107574%2C140.492781%20L373.107574%2C147.131111%20C367.103398%2C141.340957%20353.750937%2C140.492781%20345.612434%2C140.492781%20L275.214144%2C140.492781%20L259.104537%2C157.853435%20L244.016551%2C140.492781%20L138.856074%2C140.492781%20L138.856074%2C253.922913%20L242.037315%2C253.922913%20L258.636807%2C236.287704%20L274.273761%2C253.922913%20L337.875196%2C253.979294%20L337.875196%2C227.296052%20L344.128008%2C227.296052%20C352.566841%2C227.425975%20362.519644%2C227.087685%20371.300659%2C223.307661%20L371.300659%2C253.920461%20L423.760273%2C253.920461%20L423.760273%2C224.356851%20L426.290938%2C224.356851%20C429.520738%2C224.356851%20429.838302%2C224.489225%20429.838302%2C227.70298%20L429.838302%2C253.91801%20L589.201303%2C253.91801%20C599.319042%2C253.91801%20609.894664%2C251.339161%20615.751136%2C246.659482%20L615.751136%2C253.91801%20L666.300442%2C253.91801%20C676.819444%2C253.91801%20687.092272%2C252.449635%20694.908287%2C248.689222%20L694.908287%2C227.558349%20Z%20M378.926897%2C183.927906%20C378.926897%2C206.509994%20362.007379%2C211.172514%20344.954927%2C211.172514%20L320.613273%2C211.172514%20L320.613273%2C238.439183%20L282.695139%2C238.439183%20L258.67351%2C211.527963%20L233.709035%2C238.439183%20L156.435114%2C238.439183%20L156.435114%2C157.146609%20L234.898055%2C157.146609%20L258.89999%2C183.79308%20L283.714298%2C157.146609%20L346.0504%2C157.146609%20C361.532264%2C157.146609%20378.926897%2C161.414457%20378.926897%2C183.927906%20Z%20M223.829062%2C221.339997%20L175.864579%2C221.339997%20L175.864579%2C205.165809%20L218.693878%2C205.165809%20L218.693878%2C188.57979%20L175.864579%2C188.57979%20L175.864579%2C173.800436%20L224.774368%2C173.800436%20L246.112704%2C197.490547%20L223.829062%2C221.339997%20Z%20M301.113434%2C230.648291%20L271.161481%2C197.535087%20L301.113434%2C165.473523%20L301.113434%2C230.648291%20Z%20M345.408399%2C194.502317%20L320.197751%2C194.502317%20L320.197751%2C173.800436%20L345.634879%2C173.800436%20C352.677909%2C173.800436%20357.566917%2C176.658742%20357.566917%2C183.767736%20C357.566917%2C190.798286%20352.904388%2C194.502317%20345.408399%2C194.502317%20Z%20M477.4839%2C157.146609%20L542.59438%2C157.146609%20L542.59438%2C173.958154%20L496.911928%2C173.958154%20L496.911928%2C188.737509%20L541.479213%2C188.737509%20L541.479213%2C205.323528%20L496.911928%2C205.323528%20L496.911928%2C221.497714%20L542.59438%2C221.571256%20L542.59438%2C238.439183%20L477.4839%2C238.439183%20L477.4839%2C157.146609%20Z%20M452.452415%2C200.661007%20C456.794918%2C202.256854%20460.344743%2C205.117612%20462.008877%2C207.485642%20C464.763561%2C211.454422%20465.162362%2C215.158453%20465.241138%2C222.323829%20L465.241138%2C238.439183%20L445.655559%2C238.439183%20L445.655559%2C228.268419%20C445.655559%2C223.377921%20446.128213%2C216.136553%20442.502074%2C212.356528%20C439.651382%2C209.444293%20435.306417%2C208.748102%20428.189535%2C208.748102%20L407.341085%2C208.748102%20L407.341085%2C238.439183%20L387.738274%2C238.439183%20L387.738274%2C157.146609%20L432.778213%2C157.146609%20C442.654702%2C157.146609%20449.847897%2C157.580502%20456.250875%2C160.983014%20C462.407679%2C164.687045%20466.27999%2C169.761396%20466.27999%2C179.034957%20C466.277529%2C192.010097%20457.587597%2C198.631267%20452.452415%2C200.661007%20Z%20M441.42487%2C190.384004%20C438.815429%2C191.92592%20435.588092%2C192.058295%20431.792093%2C192.058295%20L408.092952%2C192.058295%20L408.092952%2C173.800436%20L432.114581%2C173.800436%20C435.588092%2C173.800436%20439.064065%2C173.873978%20441.42487%2C175.268812%20C443.953074%2C176.585201%20445.46458%2C179.102766%20445.46458%2C182.58127%20C445.46458%2C186.059775%20443.953074%2C188.861698%20441.42487%2C190.384004%20Z%20M617.536604%2C195.562142%20C621.335064%2C199.476992%20623.370921%2C204.418969%20623.370921%2C212.78552%20C623.370921%2C230.273646%20612.398959%2C238.436732%20592.724758%2C238.436732%20L554.727848%2C238.436732%20L554.727848%2C221.004988%20L592.572131%2C221.004988%20C596.272121%2C221.004988%20598.896333%2C220.517164%20600.540772%2C218.992407%20C601.882419%2C217.734851%20602.844958%2C215.908574%20602.844958%2C213.690078%20C602.844958%2C211.322047%20601.803643%2C209.441841%20600.464459%2C208.314207%20C598.972646%2C207.073811%20596.914634%2C206.509994%20593.517437%2C206.509994%20C575.273505%2C205.889795%20552.426124%2C207.073811%20552.426124%2C181.349057%20C552.426124%2C169.557932%20559.865493%2C157.146609%20580.317603%2C157.146609%20L619.427218%2C157.146609%20L619.427218%2C174.44843%20L583.640948%2C174.44843%20C580.093586%2C174.44843%20577.786938%2C174.580805%20575.824934%2C175.916805%20C573.688146%2C177.233195%20572.895467%2C179.186942%20572.895467%2C181.765791%20C572.895467%2C184.832464%20574.709767%2C186.918586%20577.164119%2C187.820693%20C579.22213%2C188.534044%20581.43277%2C188.742411%20584.756115%2C188.742411%20L595.257885%2C189.02432%20C605.848277%2C189.281714%20613.117786%2C191.105539%20617.536604%2C195.562142%20Z%20M694.948587%2C173.800436%20L659.393721%2C173.800436%20C655.843896%2C173.800436%20653.485552%2C173.932811%20651.498931%2C175.268812%20C649.440918%2C176.585201%20648.648239%2C178.538949%20648.648239%2C181.117798%20C648.648239%2C184.18447%20650.386226%2C186.270593%20652.914429%2C187.1727%20C654.972441%2C187.886051%20657.183081%2C188.094418%20660.432574%2C188.094418%20L671.005734%2C188.376326%20C681.674901%2C188.638623%20688.796706%2C190.464899%20693.139211%2C194.919051%20C693.929428%2C195.539251%20694.404543%2C196.235441%20694.948587%2C196.931632%20L694.948587%2C173.800436%20Z%22%20id%3D%22Path%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}

.brand_DINERS {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22diners%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8846154%2C28.2035928%20C39.6085397%2C28.2035928%2028.8461538%2C38.7262417%2028.8461538%2C51.7065868%20L28.8461538%2C419.293413%20C28.8461538%2C432.273758%2039.6085397%2C442.796407%2052.8846154%2C442.796407%20L697.115385%2C442.796407%20C710.39146%2C442.796407%20721.153846%2C432.273758%20721.153846%2C419.293413%20L721.153846%2C51.7065868%20C721.153846%2C38.7262417%20710.39146%2C28.2035928%20697.115385%2C28.2035928%20L52.8846154%2C28.2035928%20Z%20M52.8846154%2C0%20L697.115385%2C0%20C726.322751%2C-5.0099645e-15%20750%2C23.1498275%20750%2C51.7065868%20L750%2C419.293413%20C750%2C447.850173%20726.322751%2C471%20697.115385%2C471%20L52.8846154%2C471%20C23.6772488%2C471%203.41607085e-15%2C447.850173%200%2C419.293413%20L0%2C51.7065868%20C-3.41607085e-15%2C23.1498275%2023.6772488%2C5.0099645e-15%2052.8846154%2C0%20Z%22%20id%3D%22Rectangle-1%22%20fill%3D%22%23393939%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M584.867822%2C237.100205%20C584.867822%2C137.684406%20501.886887%2C68.9669461%20410.972835%2C69.0000119%20L332.730651%2C69.0000119%20C240.72761%2C68.9669461%20165%2C137.704907%20165%2C237.100205%20C165%2C328.030644%20240.72761%2C402.740298%20332.730651%2C402.303829%20L410.972835%2C402.303829%20C501.886887%2C402.739637%20584.867822%2C328.010805%20584.867822%2C237.100205%20Z%20M333.214213%2C83.0837049%20C417.303936%2C83.1101576%20485.441626%2C151.391148%20485.454165%2C235.663447%20C485.442286%2C319.921197%20417.303936%2C388.195574%20333.214213%2C388.222027%20C249.14363%2C388.195574%20181.0198%2C319.921197%20181%2C235.663447%20C181.0198%2C151.391148%20249.144289%2C83.1101576%20333.214213%2C83.0837049%20Z%20M237%2C235.250606%20C237.078539%2C276.436773%20262.746332%2C311.533533%20298.940354%2C325.480049%20L298.940354%2C145%20C262.746332%2C158.954453%20237.079199%2C194.07039%20237%2C235.250606%20Z%20M368%2C325.52568%20C404.207223%2C311.578502%20429.913954%2C276.469178%20429.979954%2C235.256558%20C429.913954%2C194.056503%20404.207223%2C158.920725%20368%2C145%20L368%2C325.52568%20Z%22%20id%3D%22Shape%22%20fill%3D%22%23373737%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}

.brand_DISCOVER {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%20-139.5%20750%20750%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22discover%22%20fill%3D%22%23393939%22%20fill-rule%3D%22nonzero%22%3E%20%3Cpath%20d%3D%22M52.8768624%2C28.2035928%20L697.123137%2C28.2035928%20C710.395555%2C28.2035928%20721.153846%2C38.7248361%20721.153846%2C51.7110718%20L721.153846%2C258.461323%20C721.153846%2C258.461323%20648.460037%2C306.480878%20564.237155%2C339.666004%20C430.470628%2C400.12562%20236.699138%2C442.796407%20223.433744%2C442.796407%20L52.8768624%2C442.796407%20C39.604445%2C442.796407%2028.8461538%2C432.275164%2028.8461538%2C419.288928%20L28.8461538%2C51.7110718%20C28.8461538%2C38.7307826%2039.6114681%2C28.2035928%2052.8768624%2C28.2035928%20Z%20M0%2C51.7110718%20L0%2C419.288928%20C0%2C447.850019%2023.6715592%2C471%2052.8768624%2C471%20L697.123137%2C471%20C726.320852%2C471%20750%2C447.844626%20750%2C419.288928%20L750%2C51.7110718%20C750%2C23.1499809%20726.32844%2C0%20697.123137%2C0%20L52.8768624%2C0%20C23.6791479%2C0%200%2C23.1553747%200%2C51.7110718%20Z%22%20id%3D%22Shape%22%3E%20%3C%2Fpath%3E%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate(64.423077%2C%20151.359281)%22%3E%20%3Cpath%20d%3D%22M0.398922596%2C3.23979415%20L0.398922596%2C97.7053066%20L29.2372175%2C97.7053066%20C44.5715587%2C97.7053066%2055.6458183%2C94.3294531%2065.3657692%2C86.8003871%20C76.9168913%2C77.8808332%2083.7474981%2C64.4394616%2083.7474981%2C50.5382428%20C83.7474981%2C22.6591652%2061.4202058%2C3.23979415%2029.3897824%2C3.23979415%20L0.398922596%2C3.23979415%20Z%20M52.4626875%2C74.2057148%20C46.2572058%2C79.4319016%2038.1963%2C81.7128837%2025.4336561%2C81.7128837%20L20.1341759%2C81.7128837%20L20.1341759%2C19.2468154%20L25.4336561%2C19.2468154%20C38.1963%2C19.2468154%2045.9391663%2C21.378166%2052.4626875%2C26.8853691%20C59.2932933%2C32.5604534%2063.402376%2C41.3522709%2063.402376%2C50.4032087%20C63.402376%2C59.4687447%2059.2932933%2C68.5306315%2052.4626875%2C74.2057148%20Z%22%20id%3D%22path20-path%22%3E%20%3C%2Fpath%3E%20%3Cpolygon%20id%3D%22path22%22%20transform%3D%22translate(102.710205%2C%2050.472551)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-102.710205%2C%20-50.472551)%20%22%20points%3D%2292.8348913%203.2397951%20112.585519%203.2397951%20112.585519%2097.7053076%2092.8348913%2097.7053076%22%3E%20%3C%2Fpolygon%3E%20%3Cpath%20d%3D%22M160.879247%2C61.9328103%20C149.027689%2C66.0239801%20145.54647%2C68.724663%20145.54647%2C73.8267637%20C145.54647%2C79.7755656%20151.747649%2C84.2973851%20160.260382%2C84.2973851%20C166.177163%2C84.2973851%20171.041246%2C82.027351%20176.186206%2C76.6478824%20L186.52072%2C89.2717514%20C178.027547%2C96.2022875%20167.869069%2C99.7460212%20156.767427%2C99.7460212%20C138.851999%2C99.7460212%20125.186092%2C88.1367343%20125.186092%2C72.6771484%20C125.186092%2C59.6627762%20131.549224%2C53.0023083%20150.098774%2C46.7724892%20C157.830687%2C44.2287375%20161.765688%2C42.5316869%20163.752162%2C41.3930206%20C167.697727%2C38.9879533%20169.673638%2C35.5865525%20169.673638%2C31.6194678%20C169.673638%2C23.9663157%20163.150118%2C18.2948818%20154.339297%2C18.2948818%20C144.918608%2C18.2948818%20137.331436%2C22.6889659%20132.782262%2C30.8932035%20L120.024312%2C19.4298988%20C129.124224%2C6.97026059%20140.051394%2C1.4484591%20155.080214%2C1.4484591%20C175.604112%2C1.4484591%20190.003504%2C14.1781647%20190.003504%2C32.4661689%20C190.003504%2C47.4732072%20183.345413%2C54.2687092%20160.879247%2C61.9328103%22%20id%3D%22path24%22%20transform%3D%22translate(155.013908%2C%2050.597240)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-155.013908%2C%20-50.597240)%20%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M196.233238%2C50.1444705%20C196.233238%2C22.378529%20219.601885%2C0.84970633%20249.676738%2C0.84970633%20C258.181256%2C0.84970633%20265.461342%2C2.40807344%20274.443114%2C6.35326017%20L274.443114%2C28.0426643%20C266.544944%2C20.6705295%20259.550429%2C17.696129%20250.596039%2C17.696129%20C230.703918%2C17.696129%20216.585793%2C31.1520998%20216.585793%2C50.2795046%20C216.585793%2C68.4178755%20231.153789%2C82.7241967%20249.676738%2C82.7241967%20C259.100558%2C82.7241967%20266.228079%2C79.5892139%20274.443114%2C72.0966442%20L274.443114%2C93.7750993%20C265.770384%2C97.8772182%20258.642862%2C99.5779181%20250.146169%2C99.5779181%20C220.223881%2C99.5779181%20196.233238%2C77.611147%20196.233238%2C50.1444705%22%20id%3D%22path26%22%20transform%3D%22translate(235.338176%2C%2050.213812)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-235.338176%2C%20-50.213812)%20%22%3E%20%3C%2Fpath%3E%20%3Cpolyline%20id%3D%22path28%22%20transform%3D%22translate(431.133178%2C%2051.539192)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-431.133178%2C%20-51.539192)%20%22%20points%3D%22431.041248%2036.5321526%20404.037253%2099.9836056%20382.463006%2099.9836056%20425.431552%203.09477816%20436.060243%203.09477816%20479.803351%2099.9836056%20458.393404%2099.9836056%20431.041248%2036.5321526%22%3E%20%3C%2Fpolyline%3E%20%3Cpolyline%20id%3D%22path30%22%20transform%3D%22translate(516.739714%2C%2050.472551)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-516.739714%2C%20-50.472551)%20%22%20points%3D%22488.734267%203.2397951%20544.745162%203.2397951%20544.745162%2019.232218%20508.469913%2019.232218%20508.469913%2044.7317757%20543.407284%2044.7317757%20543.407284%2060.7314972%20508.469913%2060.7314972%20508.469913%2081.6982864%20544.745162%2081.6982864%20544.745162%2097.7053076%20488.734267%2097.7053076%20488.734267%203.2397951%22%3E%20%3C%2Fpolyline%3E%20%3Cpath%20d%3D%22M622.944474%2C31.1298208%20C622.944474%2C13.4439966%20609.890391%2C3.23979415%20587.111272%2C3.23979415%20L557.826627%2C3.23979415%20L557.826627%2C97.7053066%20L577.554448%2C97.7053066%20L577.554448%2C59.7570607%20L580.128492%2C59.7570607%20L607.465%2C97.7053066%20L631.754121%2C97.7053066%20L599.879785%2C57.9103776%20C614.756822%2C55.0856087%20622.944474%2C45.5930732%20622.944474%2C31.1298208%20Z%20M583.324532%2C46.7280902%20L577.554448%2C46.7280902%20L577.554448%2C18.119098%20L583.637486%2C18.119098%20C595.936567%2C18.119098%20602.622041%2C22.9292334%20602.622041%2C32.122504%20C602.622041%2C41.6186898%20595.936567%2C46.7280902%20583.324532%2C46.7280902%20Z%22%20id%3D%22path32-path%22%3E%20%3C%2Fpath%3E%20%3Cpath%20d%3D%22M280.874313%2C50.4575914%20C280.874313%2C50.4575914%20280.874313%2C50.4575914%20280.874313%2C50.4904374%20C280.874313%2C78.2454299%20304.99131%2C100.712193%20334.741474%2C100.712193%20C364.491638%2C100.712193%20388.608635%2C78.2454299%20388.608635%2C50.4904374%20L388.608635%2C50.4575914%20C388.608635%2C22.702599%20364.491638%2C0.202989991%20334.741474%2C0.202989991%20C304.99131%2C0.202989991%20280.874313%2C22.702599%20280.874313%2C50.4575914%22%20id%3D%22path44%22%20transform%3D%22translate(334.741474%2C%2050.457591)%20scale(-1%2C%201)%20rotate(-180.000000)%20translate(-334.741474%2C%20-50.457591)%20%22%3E%20%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}

#wpadminbar {
  display: none;
}

.member_card {
  overflow: hidden;
  position: relative;
  background-size: 100% 100%;
  background-position: 0% 0px, 0% 0px, 0% 0px, 0px 0px;
  background-image:
    repeating-radial-gradient(200px 200px at 30% 30%, #FFFFFF00 96%, #FFFFFF11 100%),
    repeating-radial-gradient(300px 300px at 30% 30%, #FFFFFF00 96%, #FFFFFF11 100%),
    repeating-radial-gradient(5px 5px at 30% 30%, #FFFFFF00 0%, #9A9A9A11 100%),
    conic-gradient(from 355deg at 30% 30%, #D9D9D9FF 0%, #FFFFFFFF 8%, #DFDFDFFF 17%, #F1F1F1FF 24%, #C1C1C1FF 34%, #D4D4D4FF 39%, #F8F8F8FF 49%, #D2D2D2FF 55%, #D6D6D6FF 60%, #FFFFFFFF 66%, #FFFFFFFF 68%, #D5D3D3FF 72%, #F5F5F5FF 87%, #D9D9D9FF 100%);

  .member_card_inner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
}

.member_card .member_card_inner:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  mix-blend-mode: multiply;
  box-sizing: border-box;
}

.member_card .member_card_inner:after {
  content: '';
  display: block;
  width: 80px;
  height: 40px;
  background-image: var(--logo-image);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 14px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  /* filter: invert(1); */
  mix-blend-mode: darken;
}

.member_card .member_card_inner {
  * {
    position: absolute;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.5), 2px 2px 2px rgba(0, 0, 0, 0.5);
  }

  .member_rank_name {
    text-transform: uppercase;
    text-shadow: none;
    font-family: sans-serif;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000000;
    font-size: 30px;
    mix-blend-mode: overlay;
    left: -5px;
    top: -12px;
    color: #000000;
  }

  .member_name {
    bottom: 20px;
    left: 20px;
    display: none;
  }

  .member_id {
    left: 20px;
    bottom: 20px;
    letter-spacing: 4px;
  }
}

.member_card.rank_bronze {
  .member_card_inner:before {
    background: #d48632f7;
  }

  .member_rank_name {
    opacity: 0.3;
  }
}

.member_card.rank_silver {
  .member_card_inner:before {
    background: #efefeff7;
  }
}

.member_card.rank_beginner {
  .member_card_inner {
    color: #666666;
  }

  .member_card_inner:before {
    background:
      linear-gradient(100deg, #dadada, #ffffff, #dcdcdc);
    mix-blend-mode: normal;
  }
}

.member_card.rank_gold {
  .member_card_inner:before {
    background: #ffc700f7;
  }

  .member_rank_name {
    opacity: 0.6;
  }
}

.member_card.rank_platinum {
  .member_card_inner:before {
    background: #90acb4f7;
    mix-blend-mode: color-burn;
  }
}

.member_card.rank_vip {
  .member_card_inner {
    color: #cccccc;
  }

  .member_rank_name {
    color: #ffffff;
    -webkit-text-stroke-color: #ffffff;
    mix-blend-mode: normal;
    opacity: 0.3;
  }

  .member_card_inner:after {
    filter: invert(1);
    mix-blend-mode: difference;
    opacity: 0.7;
  }

  .member_card_inner:before {
    background:
      linear-gradient(100deg, #000000, #292929, #000000);
  }

}

.friend-invite {
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #eeeeee;

  .invite_message {
    margin-bottom: 10px;
    background: #ffee99;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.3em;
  }

  dl {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 10px;

    >* {
      width: calc(calc(100% - 20px) / 3);
    }

    a {
      color: #000000;
    }

    dd {
      display: flex;
      gap: 10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        display: block;
        width: 24px;
        height: 24px;
        background-size: 100%;
      }

      span {
        font-size: 10px;
      }
    }
  }
}

i.icon {
  background-repeat: no-repeat;
  background-position: center;
}

i.icon_sns_x {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M%206%204%20C%204.895%204%204%204.895%204%206%20L%204%2024%20C%204%2025.105%204.895%2026%206%2026%20L%2024%2026%20C%2025.105%2026%2026%2025.105%2026%2024%20L%2026%206%20C%2026%204.895%2025.105%204%2024%204%20L%206%204%20z%20M%208.6484375%209%20L%2013.259766%209%20L%2015.951172%2012.847656%20L%2019.28125%209%20L%2020.732422%209%20L%2016.603516%2013.78125%20L%2021.654297%2021%20L%2017.042969%2021%20L%2014.056641%2016.730469%20L%2010.369141%2021%20L%208.8945312%2021%20L%2013.400391%2015.794922%20L%208.6484375%209%20z%20M%2010.878906%2010.183594%20L%2017.632812%2019.810547%20L%2019.421875%2019.810547%20L%2012.666016%2010.183594%20L%2010.878906%2010.183594%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
}

i.icon_sns_line {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cpath%20d%3D%22M%206%204%20C%204.895%204%204%204.895%204%206%20L%204%2024%20C%204%2025.105%204.895%2026%206%2026%20L%2024%2026%20C%2025.105%2026%2026%2025.105%2026%2024%20L%2026%206%20C%2026%204.895%2025.105%204%2024%204%20L%206%204%20z%20M%2015.003906%207.6660156%20C%2019.720906%207.6660156%2023.558594%2010.780375%2023.558594%2014.609375%20C%2023.558594%2016.142375%2022.964609%2017.523813%2021.724609%2018.882812%20C%2019.929609%2020.948812%2015.916906%2023.464609%2015.003906%2023.849609%20C%2014.091906%2024.233609%2014.225719%2023.604672%2014.261719%2023.388672%20C%2014.283719%2023.260672%2014.384766%2022.65625%2014.384766%2022.65625%20C%2014.413766%2022.43725%2014.442469%2022.099812%2014.355469%2021.882812%20C%2014.258469%2021.645813%2013.880563%2021.520937%2013.601562%2021.460938%20C%209.4895625%2020.916937%206.4472656%2018.041375%206.4472656%2014.609375%20C%206.4472656%2010.781375%2010.286906%207.6660156%2015.003906%207.6660156%20z%20M%2012.626953%2012.910156%20C%2012.375953%2012.910156%2012.171875%2013.107656%2012.171875%2013.347656%20L%2012.171875%2016.652344%20C%2012.171875%2016.894344%2012.375953%2017.089844%2012.626953%2017.089844%20C%2012.877953%2017.089844%2013.082031%2016.893344%2013.082031%2016.652344%20L%2013.082031%2013.347656%20C%2013.082031%2013.107656%2012.877953%2012.910156%2012.626953%2012.910156%20z%20M%2014.5625%2012.910156%20C%2014.5175%2012.910156%2014.470781%2012.915641%2014.425781%2012.931641%20C%2014.248781%2012.991641%2014.128906%2013.157703%2014.128906%2013.345703%20L%2014.128906%2016.650391%20C%2014.128906%2016.892391%2014.3225%2017.089844%2014.5625%2017.089844%20C%2014.8025%2017.089844%2014.996094%2016.890391%2014.996094%2016.650391%20L%2014.996094%2014.605469%20L%2016.679688%2016.914062%20C%2016.760687%2017.024063%2016.889391%2017.089844%2017.025391%2017.089844%20C%2017.072391%2017.089844%2017.118109%2017.082406%2017.162109%2017.066406%20C%2017.340109%2017.006406%2017.460938%2016.840344%2017.460938%2016.652344%20L%2017.457031%2016.652344%20L%2017.457031%2013.347656%20C%2017.457031%2013.107656%2017.263391%2012.910156%2017.025391%2012.910156%20C%2016.787391%2012.910156%2016.591797%2013.107656%2016.591797%2013.347656%20L%2016.591797%2015.392578%20L%2014.908203%2013.085938%20C%2014.827203%2012.975938%2014.6985%2012.910156%2014.5625%2012.910156%20z%20M%2018.929688%2012.910156%20C%2018.678688%2012.910156%2018.474609%2013.107656%2018.474609%2013.347656%20L%2018.474609%2014.998047%20L%2018.474609%2015%20L%2018.474609%2016.650391%20C%2018.474609%2016.892391%2018.678687%2017.089844%2018.929688%2017.089844%20L%2020.654297%2017.089844%20C%2020.906297%2017.089844%2021.111328%2016.892344%2021.111328%2016.652344%20C%2021.111328%2016.412344%2020.905297%2016.216797%2020.654297%2016.216797%20L%2019.384766%2016.216797%20L%2019.384766%2015.435547%20L%2020.654297%2015.435547%20C%2020.906297%2015.435547%2021.111328%2015.24%2021.111328%2015%20C%2021.111328%2014.758%2020.905297%2014.5625%2020.654297%2014.5625%20L%2019.384766%2014.564453%20L%2019.384766%2013.783203%20L%2020.654297%2013.783203%20C%2020.906297%2013.783203%2021.111328%2013.588656%2021.111328%2013.347656%20C%2021.111328%2013.107656%2020.905297%2012.910156%2020.654297%2012.910156%20L%2018.929688%2012.910156%20z%20M%209.34375%2012.912109%20C%209.09275%2012.912109%208.8886719%2013.106656%208.8886719%2013.347656%20L%208.8886719%2016.652344%20C%208.8886719%2016.894344%209.09275%2017.089844%209.34375%2017.089844%20L%2011.068359%2017.089844%20C%2011.320359%2017.089844%2011.522438%2016.893297%2011.523438%2016.654297%20C%2011.523437%2016.414297%2011.319359%2016.21875%2011.068359%2016.21875%20L%209.7988281%2016.21875%20L%209.7988281%2013.347656%20C%209.7988281%2013.107656%209.59475%2012.912109%209.34375%2012.912109%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
}

i.icon_url {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C88.23a54.43%2C54.43%2C0%2C0%2C1-16%2C37L189.25%2C160a54.27%2C54.27%2C0%2C0%2C1-38.63%2C16h-.05A54.63%2C54.63%2C0%2C0%2C1%2C96%2C119.84a8%2C8%2C0%2C0%2C1%2C16%2C.45A38.62%2C38.62%2C0%2C0%2C0%2C150.58%2C160h0a38.39%2C38.39%2C0%2C0%2C0%2C27.31-11.31l34.75-34.75a38.63%2C38.63%2C0%2C0%2C0-54.63-54.63l-11%2C11A8%2C8%2C0%2C0%2C1%2C135.7%2C59l11-11A54.65%2C54.65%2C0%2C0%2C1%2C224%2C48%2C54.86%2C54.86%2C0%2C0%2C1%2C240%2C88.23ZM109%2C185.66l-11%2C11A38.41%2C38.41%2C0%2C0%2C1%2C70.6%2C208h0a38.63%2C38.63%2C0%2C0%2C1-27.29-65.94L78%2C107.31A38.63%2C38.63%2C0%2C0%2C1%2C144%2C135.71a8%2C8%2C0%2C0%2C0%2C16%2C.45A54.86%2C54.86%2C0%2C0%2C0%2C144%2C96a54.65%2C54.65%2C0%2C0%2C0-77.27%2C0L32%2C130.75A54.62%2C54.62%2C0%2C0%2C0%2C70.56%2C224h0a54.28%2C54.28%2C0%2C0%2C0%2C38.64-16l11-11A8%2C8%2C0%2C0%2C0%2C109%2C185.66Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
}

#diag_shipment_select {
  z-index: 110;
  width: 100%;
  max-width: 350px;
  height: calc(100dvh - 20px);
  max-height: none;
  top: auto;
  bottom: 0px;
  transform: translateX(-50%);
  border-radius: 10px 10px 0px 0px;

  select[name="saved_address"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eeeeee;
    border-right-width: 10px;
    font-size: 14px;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 14px;
    color: #000000;
    background: #eeeeee;

  }

  .new_address {
    /* display: none; */
  }

  .inp-group:has([value="new"]:checked)+.new_address {
    display: block;
  }

  label:has(input[name="save_address"]) {
    padding: 10px 0px;
    display: flex;
    gap: 5px;
  }

  label:has(input[name="save_address"])+.inp-field {
    display: none;
  }

  label:has(input[name="save_address"]:checked)+.inp-field {
    display: block;
  }

  .order_buttons {
    padding: 10px;
    width: 100%;
    border-top: 1px solid #cccccc;

    button {
      display: block;
      width: 100%;
      background: #000000;
      color: #ffffff;
      border-radius: 4px;
      border: 0px;
      font-size: 14px;
      padding: 10px 10px;
    }

    button[disabled] {
      background: #666666;
      color: #cccccc;
      position: relative;
    }

    button[disabled]:before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20id%3D%22Arrow%20%2F%20Arrows_Reload_01%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M10%2016H5V21M14%208H19V3M4.58301%209.0034C5.14369%207.61566%206.08244%206.41304%207.29255%205.53223C8.50266%204.65141%209.93686%204.12752%2011.4298%204.02051C12.9227%203.9135%2014.4147%204.2274%2015.7381%204.92661C17.0615%205.62582%2018.1612%206.68254%2018.9141%207.97612M19.4176%2014.9971C18.8569%2016.3848%2017.9181%2017.5874%2016.708%2018.4682C15.4979%2019.3491%2014.0652%2019.8723%2012.5723%2019.9793C11.0794%2020.0863%209.58606%2019.7725%208.2627%2019.0732C6.93933%2018.374%205.83882%2017.3175%205.08594%2016.0239%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
      mask-size: 16px;
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: contain;
      background: #cccccc;
      position: absolute;
      top: calc(50% - 8px);
      margin-left: -20px;
      animation-name: loading_rot;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
  }

  .inp-field:has(input[name="zip"]) button {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    background: #000000;
    color: #ffffff;
    border-radius: 4px;
    border: 0px;
    font-size: 10px;
    padding: 0px 10px;

  }

  .custom_dialog_body {
    height: calc(100% - 30px);
    width: 100%;
    position: relative;
    padding: 10px;
    overflow-y: auto;
  }

  .ship_info {
    background: #ffdddd;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #cc0000;
    padding: 5px 10px;
    font-size: 10px;
    text-align: center;
  }

  .custom_dialog_title {
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid #cccccc;

    h2 {
      text-align: center;
      font-size: 12px;
      font-weight: normal;
    }

    #shipment_close {
      position: absolute;
      top: 7px;
      right: 7px;
      background-color: transparent;
      border: none;

      img {
        display: block;
        width: 16px;
        height: 16px;
      }

    }
  }
}

.friend-invite {
  #invite_link {
    font-family: monospace;
    font-size: 11px;
  }
}

.wpcf7-form,
.friend-invite,
.custom_dialog {
  .inp-field+.inp-field {
    margin-top: 10px;
  }

  .inp-field {
    border: 1px solid #cccccc;
    position: relative;
    border-radius: 4px;
    width: 100%;

    label {
      position: absolute;
      top: -7px;
      left: 10px;
      background: #ffffff;
      font-size: 10px;
      letter-spacing: 1px;
      color: #666666;
    }

    textarea,
    input {
      outline: none;
      border-radius: 4px;
      display: block;
      width: 100%;
      border: 0px;
      font-size: 14px;
      padding: 13px 10px 8px 10px;
    }

    span.wpcf7-not-valid-tip {
      font-size: 10px;
      padding: 2px 10px;
    }

    p.note {
      font-size: 8px;
      padding: 5px 10px;
      background: #eeeeee;
      border-radius: 0px 0px 4px 4px;
      color: #666666;
    }
  }
}

#gacha_popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 110;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;
  max-width: 400px;

  #gacha_select_title {
    text-align: center;
    color: #ffffff;
    background: #000000;
    border-radius: 5px 5px 0px 0px;
    padding: 10px;
  }

  #gacha_select_counter {
    display: none;
    gap: 10px;
    justify-content: center;
    align-items: center;

    button {
      background: #000000;
      border: 0px;
      color: #ffffff;
      width: 30px;
      border-radius: 100px;
      font-size: 10px;
      height: 20px;
    }

    input {
      border: 1px solid #000000;
      border-radius: 4px;
      width: 60px;
      text-align: center;
      padding: 5px 10px;
    }
  }

  #gacha_select_points {
    display: flex;
    gap: 10px;
    padding: 10px;
    padding-bottom: 0px;

    #gacha_select_need_pt {
      background: var(--col-main);
    }

    #gacha_select_my_pt {
      background: #ffffff;
    }

    >div {
      border: 2px solid var(--col-main);
      width: 50%;
      padding: 5px 15px;
      border-radius: 100px;
      display: flex;
      align-items: center;

      strong {
        margin-left: auto;
      }
    }
  }

  #gacha_select_buttons {
    display: flex;
    gap: 10px;
    padding: 10px;

    button {
      width: 100%;
      border: none;
      height: 30px;
      border-radius: 100px;
      color: #000000;
    }

    #gacha_cancel {
      background: #cccccc;
    }

    #gacha_submit {
      position: relative;

      i {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        border-radius: 100px;
        filter: blur(3px);
        background: conic-gradient(#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%);
      }

      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        border-radius: 100px;
        background: #ffffff;
      }
    }
  }

  #gacha_select_body {
    max-width: 400px;
    padding: 10px;
    height: 250px;
    position: relative;
    background-image:
      linear-gradient(#ffffff00, #ffffff),
      repeating-conic-gradient(from 10deg at 50% -10%, rgba(255, 234, 26, 1) 0deg, rgba(213, 175, 0, 1) 20deg, rgba(255, 234, 26, 1) 40deg);
  }

  #gacha_packs_header {
    position: absolute;
    top: 13px;
    left: 17px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;

    #gacha_back_top {
      background: #000000;
      color: #ffffff;
      font-size: 10px;
      border: 0px;
      border-radius: 100px;
      padding: 3px 10px;
      width: 80px;
    }

    #gacha_select_message {
      font-weight: bold;
      text-shadow:
        -1px -1px 0px #ffffff,
        0px -1px 0px #ffffff,
        1px -1px 0px #ffffff,
        -1px 0px 0px #ffffff,
        1px 0px 0px #ffffff,
        -1px 1px 0px #ffffff,
        0px 1px 0px #ffffff,
        1px 1px 0px #ffffff,
        2px 2px 3px rgba(0, 0, 0, 0.3),
        0px 0px 0px #ffffff;
    }
  }
}

#gacha_popup[data-count="v"] {
  #gacha_select_counter {
    display: flex;
    padding: 10px;
  }
}

#gacha_popup.show {
  display: block;

  .inner {
    max-width: min(95vw, 400px);
  }

  .gacha_pack:nth-child(1),
  .gacha_pack:nth-child(2),
  .gacha_pack:nth-child(3),
  .gacha_pack:nth-child(4),
  .gacha_pack:nth-child(5),
  .gacha_pack:nth-child(6) {
    animation-name: packs_in;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    top: -500px;
  }

  .gacha_pack:nth-child(1) {
    animation-delay: 0.2s;
  }

  .gacha_pack:nth-child(2) {
    animation-delay: 0.4s;
  }

  .gacha_pack:nth-child(3) {
    animation-delay: 0.6s;
  }

  .gacha_pack:nth-child(4) {
    animation-delay: 0.8s;
  }

  .gacha_pack:nth-child(5) {
    animation-delay: 1.0s;
  }

  .gacha_pack:nth-child(6) {
    animation-delay: 1.2s;
  }

  #gacha_select_body:has(.deside) {

    ul li:before,
    ul li:after,
    ul li span {
      opacity: 0;
    }

    ul li.deside:before,
    ul li.deside:after,
    ul li.deside span {
      opacity: 1;
    }

    ul li.deside:after,
    ul li.deside:before {
      animation-name: packs_deside;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      transform-style: preserve-3d;
    }
  }

  #gacha_select_body:has(.selected) {

    ul li:before,
    ul li:after,
    ul li * {
      transition: 0.5s;
      opacity: 0;
    }
  }

  #gacha_select_body ul {

    li.selected:before,
    li.selected:after,
    li.selected * {
      transition: 0.5s;
      opacity: 1;
    }

    li.selected:before {}
  }

  #gacha_select_body ul {

    .gacha_pack.selected span,
    .gacha_pack.selected:after {
      opacity: 0;
    }

    .gacha_pack.selected:before {
      /* position: fixed; */
      /* top: 88px !important; */
      z-index: 10;
      animation-delay: 0.5s;
      animation-name: pack_selected;
      animation-duration: 1.5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      opacity: 1;
      /* left: calc(50% - 40px); */
      transition: 0.5s;
    }
  }

}

#gacha_select_body {
  overflow: hidden;

  .inner {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-color: #00000099 transparent;
    height: 100%;
    max-width: 400px;
  }

  ul {
    display: flex;
    gap: 30px;
    width: max-content;
    padding-right: 50px;
    padding-top: 40px;
    position: relative;

    .gacha_pack:after {
      display: block;
      content: '';
      left: calc(50% - 24px);
      width: 60%;
      height: 5px;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      bottom: -23px;
      border-radius: 50%;
      filter: blur(3px);
    }

    .gacha_pack:before {
      content: '';
      width: 80px;
      height: auto;
      background-size: 100%;
      background-repeat: no-repeat;
      aspect-ratio: 667 / 1280;
      position: relative;
      display: block;
      box-shadow: 0px 0px 3px #ffffff;
      transition: 1s;
    }

    .gacha_pack.sold_out {
      filter: grayscale(1) opacity(0.5)
    }

    .gacha_pack.sold_out {
      >span:before {
        content: 'SOLD OUT';
        position: absolute;
        top: -115px;
        left: 50%;
        transform: rotate(-10deg) translateX(-50%);
        font-size: 13px;
      }
    }

    .gacha_pack {
      top: 0px;
      transition: 0.5s;
      position: relative;
      width: 80px;

      span {
        background: #ffffff;
        font-size: 9px;
        font-weight: bold;
        bottom: 5px;
        left: 50%;
        white-space: nowrap;
        border-radius: 100px;
        padding: 3px 8px;
        transform: translateX(-50%);
        position: absolute;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        min-width: 30px;
        text-align: center;
      }

    }
  }
}

@keyframes packs_in {
  0% {
    top: -500px;
    opacity: 0;
  }

  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes pack_selected {
  0% {
    transform: rotateY(0deg)
  }

  50% {
    transform: rotateY(720deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(720deg) translateY(-500px);
    opacity: 0;
  }
}

@keyframes packs_deside {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(720deg);
  }

  100% {
    transform: rotateY(720deg);
  }
}
#audio_preloader,
#gacha_effect_preloader {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 1px;
  width: 1px;
}
#gacha_effect {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 0px;
}

#gacha_effect.show {
  opacity: 1;
  visibility: visible;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 110;
  background: #000;

  #gacha_effect_stage {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  video {
    max-height: 100dvh;
    max-width: 100dvh;
  }

  #gacha_effect_buttons {
    position: absolute;
    bottom: 20px;
    width: 100%;

    #gacha_effect_skip {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0px;
    }

    #gacha_effect_mute,
    #gacha_effect_volume {
      position: absolute;
      right: 20px;
      bottom: 0px;
    }

    #gacha_effect_mute {
      display: none;
    }

    button {
      border: none;
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 5px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.4)
    }

    i {
      width: 16px;
      height: 16px;
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: center;
      display: block;

    }
  }
}

#gacha_effect_skip i {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%20id%3D%22Flat%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M200%2C28a12.00028%2C12.00028%2C0%2C0%2C0-12%2C12v66.603L74.42871%2C37.19824A20.00006%2C20.00006%2C0%2C0%2C0%2C44%2C54.26465v147.4707a20.00527%2C20.00527%2C0%2C0%2C0%2C30.42969%2C17.06592L188%2C149.397V216a12%2C12%2C0%2C0%2C0%2C24%2C0V40A12.00028%2C12.00028%2C0%2C0%2C0%2C200%2C28ZM68%2C194.60352V61.39648L176.9873%2C128Z%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

#gacha_effect_mute i {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%3E%20%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M6%209H3v6h3l5%204V5L6%209z%22%3E%3C%2Fpath%3E%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M18.5%205.5a9.192%209.192%200%20010%2013%22%3E%3C%2Fpath%3E%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M15%208a5.657%205.657%200%20010%208%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

#gacha_effect_volume i {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cg%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%3E%20%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M7%209H4v6h3l5%204V5L7%209z%22%3E%3C%2Fpath%3E%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M16%209.5l5%205%22%3E%3C%2Fpath%3E%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M21%209.5l-5%205%22%3E%3C%2Fpath%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

.news_header {
  border-bottom: 1px solid #000000;
  text-align: right;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.news_body p {
  line-height: 1.5em;
  margin-bottom: 1em;
}

.no_order_list {
  background: #eeeeee;
  border-radius: 5px;
  color: #666666;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
}

#order_list {
  width: 100%;

  tbody {
    border: 2px solid #cccccc;
    border-radius: 5px;
    display: block;
    margin-bottom: 10px;

    td:has(label) {
      width: 100%;

      >div.order_item_name {
        font-weight: bold;
        background: #eeeeee;
      }

      .order_satatus span {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 4px;
      }

      .order_status_cancel {
        background: #cccccc;
        color: #333333;
      }

      .order_status_order {
        background: #c8ffb1;
        color: #1f7600;
      }

      .order_status_sent {
        background: #b8cdff;
        color: #173a8c;
      }

      .order_status_complete {
        background: #ffff47;
        color: #717100;
      }

      >div {
        padding: 2px 5px;
        width: 100%;
        border-radius: 5px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;

        >label {
          width: 5em;
          position: relative;
        }

        >label:after {
          content: ':';
          position: absolute;
          right: 5px;
          top: 1px;
        }
      }

      div.order_address {
        align-items: start;
      }
    }
  }

  td {
    vertical-align: top;
    padding: 5px;
  }

  .item_thumb {
    width: 100px;
    max-width: 20vw;
    height: auto;
    aspect-ratio: 143 / 200;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.pagination.order_list {

  .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    li {
      border: 1px solid #cccccc;
      border-radius: 4px;
      min-width: 20px;

      a,
      span {
        line-height: 1em;
        padding: 5px 8px;
        border-radius: 4px;
        color: #000000
      }
    }

    li:hover a,
    li span {
      background: #000000;
      color: #ffffff;
    }
  }
}