/*body {
font-family: "Helvetica Neue" , "FW-ロダンSID-M" , "FW-ロダンSID-B" , "FW-ロダンSID-M" , Meiryo,"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
}

ul {
    list-style: none;
}*/

.btn,a.btn {
   width: 100%;
   color: #fff;
   font-size: calc(16rem / 12);
   font-weight: normal;
   border: 0 none;
   background-image: none;
   margin:0 auto;
   display: block;
   position: relative;
}

.btn i, a.btn i {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -7px;
}

.btn,a.btn,.btn:hover,a.btn:hover {
    padding: 10px;
    background: #039be5;
    border: none;
}

a.btn.gray,a.btn.gray:hover {
    background: #666;
}

.radio label, .checkbox label {
    padding-left: 0;
}

/*caution-msg style*/

 .caution-msg {
            font-size: 12px;
            font-weight: 500;
            padding:20px;
            border: 1px solid #039be5;
            margin-left: -230px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

 .caution-msg h2 {
    font-size: 16px;
    margin: 0 0 20px;
    text-align: center;
 }

 .caution-msg ul {
     list-style: none;
     margin: 30px auto;
 }

 .caution-msg ul li {
     padding-left: 15px;
     position: relative;
 }

 .caution-msg ul li:before {
     content: "※";
     margin-left: -15px;
 }

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

    .caution-msg {
        margin-left: 0;
    }

    .caution-msg ul {
        margin: 20px auto;
    }
 }

@media screen and (min-width: 768px) {

    .caution-msg {
        margin-left: -240px;
        margin-top: 60px;
        margin-bottom: 60px;
        padding:30px;
    }

    .caution-msg a {
    width: 320px;
}
}

@media (min-width: 992px) {
.caution-msg {
    margin-left: -327px;
    }

}

@media (min-width: 1200px) {
    .caution-msg {
        margin-left: -420px;
    }
}

/*caution-msg style*/

/*bapecard top style*/

.bapecard .img-area {
    width: 100%;
    max-width: 253px;
    margin: 0 auto;
}

.bapecard .img-area img {
    width: 100%;
    margin-bottom: 10px;
}

.bapecard .caution-msg ul {
    margin-top: 0;
    margin-bottom: 20px;
}

.bapecard .caution-msg ul.list-disc li:before {
    content: "・";
    margin-left: -15px;
}

.bapecard .caution-msg a {
    margin-top: 30px;
}


@media screen and (min-width: 768px) {

    .bapecard .caution-msg {
       width: 610px;
        margin: 30px auto;
    }
}

/*bapecard top style*/

/*terms style*/

.terms dl {
 margin-bottom: 30px;
}

.terms dl dt {
    margin-bottom: 20px;
}

.terms ul {
  list-style: none;
  margin-left: 0;
}

.terms ul.liststyle {
  margin-top: 20px;
}

.terms ul.liststyle + .liststyle {
  margin-top: -10px;
}

.terms ul li {
    position: relative;
    line-height: 1.6;
}
.terms ul.liststyle > li {
  padding-left: 1.5rem;
}

.terms ul.liststyle > li:not(:first-child) {
  margin-top: 10px;
}
.terms ul.liststyle > li:before {
  content: "";
  display: block;
  width: 1rem;
  position: absolute;
  left: 0;
}


.terms ul.liststyle.list01 > li:nth-child(1):before {
  content: "1";
}

.terms ul.liststyle.list01 > li:nth-child(2):before {
  content: "2";
}

.terms ul.liststyle.list01 > li:nth-child(3):before {
  content: "3";
}

.terms ul.liststyle.list01 > li:nth-child(4):before {
  content: "4";
}

.terms ul.liststyle.list01 > li:nth-child(5):before {
  content: "5";
}

.terms ul.liststyle.list01 > li:nth-child(6):before {
  content: "6";
}

.terms ul.liststyle.list01 > li:nth-child(7):before {
  content: "7";
}

.terms ul.liststyle.list01 > li:nth-child(8):before {
  content: "8";
}

.terms ul.liststyle.list01 > li:nth-child(9):before {
  content: "9";
}

.terms ul.liststyle.list01 > li:nth-child(10):before {
  content: "10";
}


.terms ul.liststyle.list02 > li:nth-child(1):before {
  Content: "⑴ ";
}

.terms ul.liststyle.list02 > li:nth-child(2):before {
  Content: "⑵ ";
}

.terms ul.liststyle.list02 > li:nth-child(3):before {
  Content: "⑶";
}

.terms ul.liststyle.list02 > li:nth-child(4):before {
  Content: "⑷ ";
}

.terms ul.liststyle.list02 > li:nth-child(5):before {
  Content: "⑸ ";
}

.terms ul.liststyle.list02 > li:nth-child(6):before {
  Content: "⑹ ";
}

.terms ul.liststyle.list02 > li:nth-child(7):before {
  Content: "⑺ ";
}

.terms ul.liststyle.list02 > li:nth-child(8):before {
  Content: "⑻ ";
}

.terms ul.liststyle.list03 > li:nth-child(1):before {
  Content: "①";
}

.terms ul.liststyle.list03 > li:nth-child(2):before {
  Content: "②";
}

.terms ul.liststyle.list03 > li:nth-child(3):before {
  Content: "③";
}

.terms ul.liststyle.list03 > li:nth-child(4):before {
  Content: "④";
}

.agreee-area {
    margin: 50px auto 20px;
    text-align: center;
}

.terms ul.btn-area {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    justify-content: space-between;
}

.terms ul.btn-area > *, .terms ul.btn-area > * a {
    width: 100%;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.terms ul.btn-area > * a {
    padding-left: 0;
    padding-right: 0;

}

.terms ul li .numbering {
    position: absolute;
    left: 0;
}

.strong-txt {
    font-size: 110%;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: bold;
    color: #039be5;
}

@media screen and (min-width: 768px) {
    .terms dl {
        margin-bottom: 30px;
    }
}

/*terms style*/

/*orders style*/

.account table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #e8e8e8;
    table-layout: fixed;
}
.account table th {
    font-size: 1.06667em;
    color: #333;
}

.account table td,.account table th {
border-bottom: 1px solid #dddddd;
}

.account .cart__image {
    width: 100%;
}

.account table input,.account table textarea,.account table select {
    border-radius: 0;
    max-width: 100%;
    background-color: #f4f4f4;
    border: 0;
    padding: 8px;
}

.account .table--no-border {
    border: 0;
}

.account .responsive-table {
    width: 100%;
    margin-bottom: 30px;
}

.account .responsive-table > thead > tr > th:first-child {
  padding-left: 0
}

.account .responsive-table.amount > tbody > tr:last-child td,.account .responsive-table.amount > tbody > tr:last-child th {
font-weight: bold;
}

.account .responsive-table.amount > tbody > tr th {
    font-weight: normal;
}

.account .responsive-table.oreders-table2.orderer td.text-left p {
    line-height: 1.8;
    margin-bottom: 0;
}

.account .responsive-table td span {
    line-height: 1.8;
}

@media only screen and (min-width: 750px) {
.account table .text-center {
    text-align: center !important;
}
.account .cart__table-cell--image {
    padding-left: 0;
    width: 15%
  }
.account .cart__table-cell--meta {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0;
    padding-bottom: 0;
    width: 35%
  }
.account .cart__table-cell--price, .cart__table-cell--line-price, .cart__table-cell--quantity {
    width: auto;
    padding: 0
  }
.account .cart__table-cell--price span, .cart__table-cell--line-price span, .cart__table-cell--quantity span {
    white-space: nowrap
  }

.account table td,.account table th {
    font-size: 15px;
    vertical-align: middle;
        padding: 15px 0;
    }

.account table .medium-up--text-center {
    text-align: center !important;
}

.account .col-3,.account .col-2 {
    display: flex;
    justify-content: space-between;
    margin-top: 50px
}

.account h2 + .col-3,.account h2 + .col-2 {
    margin-top: 30px
}

.account .col-3 {
    margin-bottom: 40px;
}

.account .col-3 > * {
    width:26%;
}

.account .col-2 > * {
    width:55%;
}

.account .col-2.w-75per > * {
    width: 20%;
}

.account .col-2 > .responsive-table.amount {
    width: 35%;
}

.account .col-2.w-75per > .responsive-table {
    width: 75%;
}

.account .col-2.w-75per > .responsive-table th {
    width: 200px;
}

.account .responsive-table.amount td,.account .responsive-table.amount th {
    padding: 25px 0;
}

.account .responsive-table.amount > tbody > tr:last-child td,.account .responsive-table.amount > tbody > tr:last-child th {
font-size: 150%;
}

.account .col-3 .responsive-table.oreders-table3 th {
    width: 100px;
}

.account .responsive-table.oreders-table2.orderer th {
    width: 20%;
    padding-right: 5%;
}

}

@media only screen and (max-width: 749px) {
.account .responsive-table.oreders-table2.userdata {
    margin-bottom: 0
    }

.account .responsive-table.oreders-table2.userdata + .userdata {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 30px
}

.account .responsive-table.userdata .responsive-table__row + .responsive-table__row {
    padding-top: 0;
    margin-top: 0;
}

.account .responsive-table thead {
    display: none
  }
.account .responsive-table tr {
    display: block
  }
.account .responsive-table th, .responsive-table td {
    display: block;
    text-align: right;
    padding: 10px 0;
    margin: 0
  }

  .account table td.cart__table-cell--image {
    border: none;
}
.account .responsive-table td:before {
    content: attr(data-label);
    float: left;
    text-align: center;
    padding-right: 10px
  }
.account .responsive-table__row + .responsive-table__row, tfoot > .responsive-table__row:first-child {
    position: relative;
    margin-top: 10px;
    padding-top: 15px
  }

  .account .col-2 {
    margin-top: 50px;
}
.account .responsive-table.oreders-table2.amount th,.account .responsive-table.oreders-table3 th,.account .responsive-table.oreders-table2.userdata th {
    display: none;
}

.account .responsive-table.amount > tbody > tr:last-child td,.account .responsive-table.amount > tbody > tr:last-child th {
font-size: 120%;
}

.account .responsive-table.oreders-table2.orderer td:before {
    content: none;
}

.account .responsive-table:not(.delivery) .responsive-table__row + .responsive-table__row {
    padding-top: 0;
    margin-top: 0;
}

.account .responsive-table.delivery .responsive-table__row {
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #dddddd;
}

.account .responsive-table.delivery .responsive-table__row + .responsive-table__row {
        margin-top: 20px
}

.account .responsive-table.delivery .responsive-table__row > td:last-child {
    border-bottom: none;
    }

.account .responsive-table.oreders-table2.orderer td.text-left,.account .responsive-table.oreders-table2.orderer th.text-left {
    text-align: left;
}

.account .responsive-table.oreders-table2.orderer th.text-left {
    font-weight: normal;
}

.account .responsive-table.oreders-table2.orderer td.text-left p {
    padding: 0;
    margin: 0;
}

}

/*orders style*/

/*mypage style*/

.account h2 {
    font-weight: bold;
    width: 100%;
}

.account h2.d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:center;
}

.account table.delivery tr.done {
    background: #f8f8f8;
}

.account h2 .btn {
    width: 120px;
    margin: 0;
}

@media only screen and (min-width: 750px) {

    .account h2 {
        font-size: 20px;
    }

    .account h2.d-flex span {
        width: calc(100% - 120px);
    }

    .account.mypage .grid__item > h2:not(:first-child) {
        margin-top: 70px;
    }

    .account table.coupon {
        width:calc(50% - 30px);
    }

    .account .oreders-table2.userdata th {
        width: 180px;
    }

    .account .oreders-table2.userdata td,.account .oreders-table2.userdata th {
        position: relative;
    }

    .account .oreders-table2.userdata .num2 {
        padding-right: 30px;
    }

    .account .oreders-table2.userdata .num3 {
        padding-left: 30px;
    }

    .account .oreders-table2.userdata .num2:after,.account .oreders-table2.userdata .num3:after {
        content: "";
        width: 30px;
        height: 100%;
        background: #fff;
        position: absolute;
        bottom: -2px;
    }

    .account .oreders-table2.userdata .num2:after {
        right: 0;
    }

    .account .oreders-table2.userdata .num3:after {
        left: 0;
    }

    .account table.delivery tr > td:first-child, .account table.delivery tr > th:first-child, .account table.delivery tr > td:last-child, .account table.delivery tr > th:last-child {
        width: 15%;
    }

.account table.delivery tr > td:first-child {
    padding-left: 10px;
}

.account table.delivery tr > td:last-child {
    padding-right: 10px;
}

}

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

    .account h2 {
        font-size: 14px;
    }

    .account.mypage .grid__item > h2:not(:first-child) {
        margin-top: 40px;
    }
}

/*mypage style*/

/*maintenance style*/

.maintenance {
    font-weight: 500;
    margin-top: -50px;
    margin-bottom: 40px;
    text-align: center;
    clear: both;
    letter-spacing: .1rem;
  }

#topic{
    text-align:center;
    font-weight: bold;
    color: #00a1e9;
    letter-spacing: .1rem;
}

#topiclead{
    text-align:center;
    letter-spacing: .1rem;
}

.maintenance .items_name {
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: .1rem;
}

.maintenance span,.items_name span {
color:#00a1e9;
display: inline-block;
line-height: 1.4;
}

.maintenance > .lang:not(:first-child) {
margin-top: 40px;
}

#topic,.items_name {
    font-size: 16px;
}

.storefront-password-form {
    margin-bottom: 40px;
}

.maintenance + .col-sm-12 .storefront-password-form #password {
    margin-right: 10px;
}

.maintenance + .col-sm-12 .storefront-password-form .btn {
    display: inline;
    width: inherit;
    margin: 0;
    padding: 5px 10px;
}

.maintenance + .col-sm-12 .storefront-password-form .btn:hover {
    color: #fff;
}

@media screen and (max-width: 767px) {
.maintenance {
    padding: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -10vw;
}
}

  @media only screen and (max-width: 749px) {
  .maintenance img {
      width: 100%;
      max-width: 180px;
  }

  .maintenance > .lang:not(:first-child) {
    margin-top: 30px;
  }

  @media screen and (min-width: 768px) {
    .maintenance {
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 30px;
    }
  }
}

/*maintenance style*/

/*sidemenu style*/

#SideMenu .side-menu-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#SideMenu .side-menu-item .close {
  position: relative;
  background: #999;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  margin-right: 5px;
  opacity: 1;
}

#SideMenu .side-menu-item .close:before {
  content: "";
  position: absolute;
  height: 8px;
  width: 1px;
  background-color: #fff;
  transform: rotate(45deg);
  Z-index: 1;
  right: 7px;
  top: 3px;
}

#SideMenu .side-menu-item .close:after {
  content: "";
  position: absolute;
  height: 8px;
  width: 1px;
  background-color: #fff;
  transform: rotate(-45deg);
  Z-index: 2;
  right: 7px;
  top: 3px;
}

/*sidemenu style*/

/*activate style*/
.activate-form {
  margin-left: auto;
  margin-right: auto;
}

.activate-form .error-list {
  list-style: disc;
  color: #e20000;
  margin-bottom: 30px;
}

.activate-form .error {
  font-weight: bold;
  display: block;
  margin-top: 10px;
  color: #e20000;
}

.activate-form > p {
  text-align: center;
}

.activate-form > p span{
  display: inline-block;
}

.activate-form-child {
  margin-bottom: 20px;
}

.activate-form-child dd input {
  width: 100%;
  float: none;
}

.activate-form .error {
  font-weight: bold;
  display: block;
  margin-top: 10px;
  color: #e20000;
}

.activate-form-child dd .birth-box {
width: 100%;
display: flex;
}

.activate-form-child dd .birth-box div {
  display: flex;
  align-items: center;
  width: 33.3%;
}

.activate-form-child dd .birth-box div input {
  width: 70%;
  -webkit-appearance: none;
}

.activate-form-child dd .birth-box div span {
  display: inline-block;
  width: 30%;
  text-align: center;
}

.templateCustomersLogin .activate-form form .btn {
  float: none;
  margin-top: 30px;
}

.templateCustomersLogin .activate-form form .btn.cancel {
  background: #999;
}

.templateCustomersLogin .activate-form form .btn:hover {
color:#fff;
}

.templateCustomersLogin .activate-form form input[type="text"],
.templateCustomersLogin .activate-form form input[type="email"],
.templateCustomersLogin .activate-form form input[type="number"],
.templateCustomersLogin .activate-form form input[type="password"] {
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .activate-form {
      margin: 40px auto 20px;
      width: auto;
      padding-left: 15px;
      padding-right: 15px;
  }

  .activate-form .btn-2 > .btn + .btn {
      margin-top: 10px;
  }

}

@media screen and (min-width: 769px) {
  .activate-form {
    width: 500px;
    margin: 40px auto 20px;
  }

  .activate-form form {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .activate-form-child {
    width: 100%;
    display: flex;
  }

  .activate-form-child dt {
    width: 160px;
  }

  .activate-form-child dd {
    width: calc(100% - 160px);
  }

  .activate-form .btn-2 {
    display: flex;
    justify-content: space-between;
  }

  .activate-form .btn-2 > * {
    width: 48%;
  }
}

/*activate style*/