@charset "utf-8";
/* CSS Document */
:root {
  --bg_color:#ccc;
  --sto_color:#000;
  .type01{
  --bg_color:#F9F7BD;
  --sto_color:#928D00;
  }
  .type02{
  --bg_color:#D7E5EF;
  --sto_color:#0071BD;
  }
  .type03{
  --bg_color:#D8F2DF;
  --sto_color:#14A83B;
  }
  .type04{
  --bg_color:#EAE4F8;
  --sto_color:#653AC9;
  }
  .type05{
  --bg_color:#C9EEFB;
  --sto_color:#1EB9EE;
  }
  .type06{
  --bg_color:#FFE9DB;
  --sto_color:#FF6600;
  }
}
.under_mv{
  background: url(../../img/mv.png) no-repeat center;
  background-size: cover;
}
.store{
  padding-top: 40px;
}
.sto_inner{
  max-width: 1024px;
  width: 90%;
  margin: auto;
}
.sto_anchor{
  display: flex;
  flex-wrap: wrap;
  gap:20px;
}
.anchor_btn{
  display: flex;
  align-items: center;
  padding: 10px 20px;
  position: relative;
  font-weight: bold;
  background: var(--bg_color);
  color: var(--sto_color);
  border-radius: 6px;
  max-width: 154px;
  width: calc(50% - 5px);
  &::after{
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid var(--sto_color);
    display: block;
    position: absolute;
    right: 15px;
  }
}
.sto_block{
  padding-top: 60px;
}
.sto_head{
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--sto_color);
}
.sto_table{
  margin-top: 20px;
  width: 100%;
  thead{
    background: var(--bg_color);
    th {
      padding: 10px;
      border-right: 1px solid var(--sto_color);
      &:first-child{
        width: 310px;
      }
      &:last-child{
        border-right: none;
      }
    }
  }
  tbody{
    td {
      padding: 10px 30px;
      border-right: 1px solid var(--sto_color);
      border-bottom: 1px solid var(--sto_color);
      &:last-child{
        border-right: none;
      }
      > a{
        text-decoration: underline;
      }
    }
  }
}

@media screen and ( max-width: 1023px ) {

}
@media screen and ( max-width: 767px ) {
.sto_anchor{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  justify-content: center;
}
.sto_table{
  margin-top: 20px;
  width: 100%;
  thead{
    display: none;
  }
  tbody{
    display: block;
    width: 100%;
    border-top: 1px solid var(--sto_color);
    tr{
      display: block;
      width: 100%;
    }
    td {
      display: block;
      width: 100%;
      border-right: none;
      padding: 10px 5%;
      &:first-child{
        background: var(--bg_color);
        border-bottom:none;
      }
      > a{
        text-decoration: underline;
      }
    }
  }
}

}