/* base */
.c-button{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
}
.c-button_inner{
  color: #000;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  border-radius: 999px;
  box-sizing: border-box;
  position: relative;
  transition: var(--transition);
}


/* size */
.c-button-l1{
  max-width: 360px;
}
.c-button-l1_inner{
  font-size: 20px;
  max-width: 360px;
  height: 64px;
}
@media all and (max-width:960px) {
  .c-button-l1_inner{
    font-size: 12px;
    max-width: 270px;
    height: 44px;
  }
}

.c-button-l2{
  max-width: 300px;
}
.c-button-l2_inner{
  font-size: 16px;
  max-width: 300px;
  height: 64px;
  border: 1px solid var(--accentYellow);
}
@media all and (max-width:960px) {
  .c-button-l2_inner{
    max-width: 200px;
    font-size: 12px;
    height: 50px;
  }
}

.c-button-l3{
  max-width: 218px;
}
.c-button-l3_inner{
  font-size: 16px;
  max-width: 218px;
  height: 54px;
  border: 2px solid var(--accentYellow);
}
@media all and (max-width:960px) {
  .c-button-l3_inner{
    font-size: 10px;
    height: 32px;
  }
}

.c-button-res{
  width: fit-content;
}
.c-button-res_inner{
  border: 1px solid var(--accentYellow);
}
@media all and (min-width:961px) {
  .c-button-res_inner{
    min-width: 300px;
    padding: 0 50px;
    font-size: 16px;
    height: 64px;
  }
}
@media all and (max-width:960px) {
  .c-button-res_inner{
    min-width: 200px;
    padding: 0 30px;
    font-size: 12px;
    height: 50px;
  }
}

/* border */
.c-button_border-red{
  border: 1px solid var(--marusanRed);
}
.c-button_border-black{
  border: 1px solid #000;
}
.c-button-border-yellow{
  border-color: #ffd739;
}

/* hover */
.c-button_inner_hover-textWhite:hover{
  color: #fff;
}
.c-button_inner_hover-pink:hover{
  background-color: var(--accentPink);
  border-color: var(--accentPink);
}
.c-button_inner_hover-red:hover{
  background-color: var(--marusanRed);
  border-color: var(--marusanRed);
}
.c-button_inner_hover-paleRed:hover{
  background-color: var(--paleRed);
  border-color: var(--paleRed);
}
.c-button_inner_hover-yellow:hover{
  background-color: #ffd739;
  border-color: #ffd739;
}

/* type arrow */
.c-button-arrow-left::before{
  content: "";
  width: 7px;
  height: 13px;
  background: #000;
  mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  position: absolute;
  top: calc((100% - 13px)/2);
  left: 28px;
}
.c-button-arrow-left:hover::before{
  background-color: #fff;
}
@media all and (max-width:960px) {
  .c-button-arrow-left::before{
    width: 5px;
    height: 8px;
    top: calc((100% - 8px)/2);
    left: 16px;
  }
}

/* type fav */
.c-button_fav{
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
.c-button_fav_inner{
  font-size: 16px;
  font-weight: 600;
}
.c-button_fav_inner::before{
  content: "";
  width: 17px;
  height: 15px;
  background-color: #ff7145;
  mask: url(../../img/common/icon/heart.svg) no-repeat center center / contain;
    -webkit-mask: url(../../img/common/icon/heart.svg) no-repeat center center / contain;
  position: absolute;
  top: calc((100% - 15px)/2);
  left: 28px;
}
.c-button_fav_inner:hover::before{
  background-color: #fff;
}
.c-button_fav_inner::after{
  content: "";
  width: 7px;
  height: 13px;
  background: #000;
  mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/arrow.svg) no-repeat center center / contain;
  position: absolute;
  top: calc((100% - 13px)/2);
  right: 28px;
  transform: scale(-1, 1);
}
.c-button_fav_inner:hover::after{
  background-color: #fff;
}
@media all and (max-width:960px) {
  .c-button_fav_inner{
    width: 100%;
    padding: 12px 40px;
    font-size: 12px;
    text-align: center;
  }
  .c-button_fav_inner::before{
    top: calc((100% - 10px)/2);
    width: 13px;
    height: 12px;
    left: 16px;
  }
  .c-button_fav_inner::after{
    width: 6px;
    height: 9px;
    top: calc((100% - 8px)/2);
    right: 15px;
  }
}

/* type plus */
.c-button-plus::before{
  content: "+";
  font-size: 20px;
  position: absolute;
  right: 20px;
}
@media all and (max-width:960px) {
  .c-button-plus::before{
    font-size: 18px;
    font-weight: 300;
    right: 15px;
    top: 2px;
  }
}


/* type loupe */
.c-button-loupe::before{
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 24px;
  background: #fff;
  mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
}
@media all and (max-width:960px) {
  .c-button-loupe::before{
    width: 16px;
    height: 16px;
    left: 16px;
  }
}

/* type loupe plus */

.c-button-loupe.c-button-plus::before{
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 24px;
  background: #fff;
  mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/loupe.svg) no-repeat center center / contain;
}

.c-button-loupe.c-button-plus::after{
  content: "+";
  font-size: 20px;
  position: absolute;
  right: 20px;
}

@media all and (max-width:960px) {
  .c-button-loupe.c-button-plus::before{
    width: 16px;
    height: 16px;
    left: 16px;
  }
  .c-button-loupe.c-button-plus::after{
    font-size: 18px;
    font-weight: 300;
    right: 15px;
    top: 0px;
  }
}

.c-button-loupe.c-button-plus:hover::before{
  background-color: #fff;
}
.c-button-loupe.c-button-plus:hover::after{
  color: #fff;
}