@charset "UTF-8";
@media screen and (min-width: 1001px) {
  .sw-MainBG {
    padding-top: 32px; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .sw-MainBG {
    padding-top: 5vw; } }
@media screen and (max-width: 480px) {
  .sw-MainBG {
    padding-top: 6vw; } }

.gl-GachaList_List {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
          justify-content: center; }

@media screen and (min-width: 1001px) {
  .gl-GachaList_Container {
    padding: 16px; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .gl-GachaList_Container {
    padding: 2.5vw; } }
@media screen and (max-width: 480px) {
  .gl-GachaList_Container {
    padding: 3vw; } }

.gl-GachaList_Title {
  background-image: url(../img/head-list.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  width: 100%; }
  @media screen and (min-width: 1001px) {
    .gl-GachaList_Title {
      height: 32px;
      margin-top: 32px; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .gl-GachaList_Title {
      height: 7.5vw;
      margin-top: 5vw; } }
  @media screen and (max-width: 480px) {
    .gl-GachaList_Title {
      height: 12vw;
      margin-top: 6vw; } }

.gl-HR {
  content: "";
  display: block;
  height: 2px;
  border-top: solid 1px #eee;
  border-bottom: solid 1px white; }
  @media screen and (min-width: 1001px) {
    .gl-HR {
      margin-bottom: 32px; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .gl-HR {
      margin-bottom: 5vw; } }
  @media screen and (max-width: 480px) {
    .gl-HR {
      margin-bottom: 6vw; } }

.gl-GachaList_Item {
  border: 1px solid #ff7f7f;
  background-color: white; }
  @media screen and (min-width: 1001px) {
    .gl-GachaList_Item {
      width: 220px;
      padding: 16px;
      margin-bottom: 16px;
      margin-left: 8px;
      margin-right: 8px;
      border-radius: 4px; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .gl-GachaList_Item {
      width: 28vw;
      padding: 2.5vw;
      margin-bottom: 2.5vw;
      margin-left: 1.25vw;
      margin-right: 1.25vw;
      border-radius: 0.625vw; } }
  @media screen and (max-width: 480px) {
    .gl-GachaList_Item {
      width: 42vw;
      padding: 2vw;
      margin-bottom: 2vw;
      margin-left: 1vw;
      margin-right: 1vw;
      border-radius: 0.5vw; } }

@media screen and (min-width: 1001px) {
  .gl-GachaList_ItemImageContainer {
    width: 188px;
    height: 188px;
    margin-bottom: 16px; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .gl-GachaList_ItemImageContainer {
    width: 23vw;
    height: 23vw;
    margin-bottom: 2.5vw; } }
@media screen and (max-width: 480px) {
  .gl-GachaList_ItemImageContainer {
    width: 38vw;
    height: 38vw;
    margin-bottom: 2vw; } }

.gl-GachaList_ItemImage {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer; }

.gl-GachaList_ItemNo,
.gl-GachaList_ItemTitle,
.gl-GachaList_ItemCost {
  color: black;
  font-weight: bold; }

.gl-New:after {
  content: "New!";
  color: #ff7f7f;
  margin-left: 0.5em; }

.gl-Osusume:after {
  content: "オススメ";
  color: #ff7f7f;
  margin-left: 0.5em; }

.gl-GachaList_ItemImage:hover {
  opacity: 0.7;
  transition: all 0.2s; }