@charset "UTF-8";

@media (max-width: 767px) {
  html:has(.subscription-selected.open){
    overflow: hidden;
  }
}

.c-heading--subscription{
  padding: 0.8rem 1.2rem;
  font-size: 1.6rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.055em;
  line-height: 1.3125;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
}

.cart__heading--subscription{
  background-color: #20B2A1;
}

.global-contents__inner{
  padding-bottom: 7rem;
}

.subscription-box:nth-of-type(n + 2){
  display: none;
}

.subscriptionboxfirstselection .top-banner{
  margin: 0 auto 2rem;
  width: calc(100% - 2.4rem);
}

.subscriptionboxfirstselection .subscription-container{
  display: grid;
  gap: 3rem;
}

@media (max-width: 767px) {
  .subscriptionboxfirstselection .global-contents__inner{
    padding-bottom: 0;
  }

  .subscriptionboxfirstselection .global-footer{
    display: none !important;
  }
  
  .subscriptionboxfirstselection .p-button__page-top{
    --page-top-position-bottom: 7rem;
  }

  .subscriptionboxfirstselection .p-button__page-top.stop{
    top: -12.2rem;
  }
}

.subscription-heading{
  margin: auto;
  padding: 1rem 1.4rem;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.055em;
  line-height: 1;
  width: calc(100% - 2rem);
  background-color: var(--color-secondary);
  border-left: 0.3rem solid var(--color-primary);
  color: var(--color-primary);
}

.subscription-container__product-list{
  margin-top: 1.8rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 1.5rem;
}

.subscription-product__name{
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  line-height: 1.3;
}

.subscription-product__counter{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.subscription-product__counter--button{
  width: 3rem;
  height: 3rem;
  background-color: var(--color-btn-yellow);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.subscription-product__counter--decrease::before,
.subscription-product__counter--increase::before,
.subscription-product__counter--increase::after{
  content: '';
  display: block;
  width: 0.85rem;
  height: 2px;
  background-color: var(--color-text-default);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.subscription-product__counter--increase::after{
  rotate: 90deg;
}

.subscription-product__counter--quantity{
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  line-height: 1.2667;
  text-align: center;
  width: 5rem;
}

.subscription-selected__heading{
  margin: auto 0 0;
  padding: 1.2rem 0 1.5rem;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.055em;
  line-height: 1;
  background-color: #F8E08E;
  cursor: pointer;
}

.subscription-selected__heading--icon{
  margin: auto;
  width: 1.5rem;
  transition: rotate var(--transition-default);
}

.subscription-selected.open .subscription-selected__heading--icon{
  rotate: 180deg;
}

.subscription-selected{
  display: grid;
  position: sticky;
  width: 100%;
  max-height: 54.5vh;
  bottom: 0;
  box-shadow: 0 0 0.6rem rgb(0 0 0 / 0.16);
}

.subscription-selected.open{
  z-index: calc(var(--zindex-header) + 10);
}

.subscription-selected__accordion-wrap{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-default);
}

.subscription-selected.open .subscription-selected__accordion-wrap{
  grid-template-rows: 1fr;
  max-height: calc(54.5vh - 5.6rem);
  overflow: auto;
}

.subscription-selected__bg{
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-default), visibility var(--transition-default);
}

.subscription-selected__bg.show{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  background-color: rgb(0 0 0 / 0.16);
  z-index: calc(var(--zindex-header) + 5);
}

.subscription-selected__inner{
  overflow: auto;
  height: 100%;
  background-color: var(--color-bg);
}

.subscription-selected-productlist > div:has(.subscription-selected-product) .subscription-selected-product{
  border-bottom: 1px solid var(--color-border);
}

.subscription-selected-productlist{
  padding: 0 2rem ;
}

.subscription-selected-product{
  padding: 2rem 0 2rem;
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.8rem;
}

.subscription-selected-product__image{
  grid-row: 1/3;
}

.subscription-selected-product__name{
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  line-height: 1.5;
}

.subscription-selected-product__actions{
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.subscription-selected-product__counter{
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.subscription-selected-product__counter--quantity{
  width: 4.8rem;
  font-family: var(--font-lato);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.025em;
  line-height: 1.2667;
  text-align: center;
}

.subscription-selected-product__counter--button{
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--color-btn-yellow);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.subscription-selected-product__counter--decrease::before,
.subscription-selected-product__counter--increase::before,
.subscription-selected-product__counter--increase::after{
  content: '';
  display: block;
  width: 0.85rem;
  height: 2px;
  background-color: var(--color-text-default);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.subscription-selected-product__counter--increase::after{
  rotate: 90deg;
}

.subscription-selected-product__remove{
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.055em;
  line-height: 1.68;
  color: var(--color-primary);
}

.subscription-selected__notice{
  margin-top: 1.6rem;
  margin-bottom: 2.2rem;
  padding-inline: 2rem;
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
}

.subscription-selected__notice :where(p){
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1.7231;
  color: var(--color-emphasis);
}

.c-button__primary--subscription{
  background-color: #20B2A1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.8rem;
  line-height: 1;
  border-color: #20B2A1;
  border-radius: 0;
}

.c-button__primary--subscription :where(svg){
  width: 3.3rem;
  height: 3.3rem;
}

@media (min-width: 768px) {
  .global-contents__inner{
    padding-bottom: 12rem;
  }

  .c-heading--subscription{
    padding: 1.1rem 2.8rem;
    font-size: 2.1rem;
  }

  .subscriptionboxfirstselection .top-banner{
    margin: 0 auto 4.8rem;
    width: 100%;
  }

  .subscription-heading{
    padding: 1.45rem 2.8rem;
    width: 100%;
    font-size: 2.1rem;
    border-left-width: 0.4rem;
  }

  .subscription-container{
    display: grid;
    grid-template-columns: 1fr 26.3157%;
    gap: 4.2105%;
  }

  .subscription-container__product-list{
    margin-top: 3.6rem;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.7rem;
  }

  .subscription-product{
    padding: 2.2rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
  }

  .subscription-product__name{
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .subscription-product__counter{
    margin-top: 2rem;
    gap: 1.3rem;
  }

  .subscription-product__counter--button{
    width: 3.4rem;
    height: 3.4rem;
  }

  .subscription-product__counter--decrease::before,
  .subscription-product__counter--increase::before,
  .subscription-product__counter--increase::after{
    width: 1rem;
  }

  .subscription-product__counter--quantity{
    font-size: 1.8rem;
    line-height: 1.4;
    width: 6rem;
  }

  .subscription-selected-product__name{
    line-height: 1.4;
  }

  .subscription-selected-product__actions{
    margin-top: 1.3rem;
    justify-content: space-between;
    gap: 0;
  }

  .subscription-selected-product__counter{
    gap: 1rem;
  }

  .subscription-selected{
    padding: 2rem;
    position: sticky;
    top: calc(var(--height-header) + 2rem);
    height: fit-content;
    max-height: calc(100dvh - var(--height-header) - 4rem);
    overflow: auto;
    display: block;
    box-shadow: none;
    background-color: var(--color-bg);
    z-index: auto;
  }

  .subscription-selected__accordion-wrap{
    display: block;
  }

  .subscription-selected__inner{
    background-color: unset;
  }

  .subscription-selected__heading{
    padding: 0.85rem 0;
    cursor: auto;
  }

  .subscription-selected-productlist{
    padding: 0;
  }

  .subscription-selected__notice{
    margin-bottom: 0;
    padding-inline: 0;
  }

  .subscription-selected-addcart{
    margin-top: 1.9rem;
  }

  .c-button__primary--subscription{
    font-size: 1.9rem;
    border-radius: 0.3rem;
  }
}


.subscriptionboxdetail .form__section--content{
  padding: 1rem 1rem 3rem;
}

.subscriptionboxdetail .form__view{
  margin-inline: auto;
  width: calc(100% - 3rem);
  grid-template-columns: 32.4159% 1fr;
  grid-template-rows: auto;
  gap: 1.5rem;
}

.subscriptionboxdetail .c-bg-area{
  padding: 4rem 2.3rem 4.8rem;
}

.subscriptionboxdetail .cartitem__image :where(img[src=""]){
  visibility: hidden;
}

.subscriptionboxdetail .form__section--item{
  margin-top: 0;
}

.subscriptionboxdetail .cart__section--content{
  padding: 1.5rem 0 3.5rem;
}

.cart__section--content.subscription-product-area{
  padding: 0 0 3.5rem;
}

.subscriptionboxdetail .cart__section--content:not(:has(*)){
  display: none !important;
}

/* .subscriptionboxdetail .cart__section--content:has(.form__changearea){
  padding-top: 0;
} */

.subscriptionboxdetail .button__group.subscription-apply-button{
  width: 100%;
  overflow: hidden;
  border-radius: 0.3rem;
}

.subscriptionboxdetail .c-button{
  padding-inline: 3.8rem 4.8rem;
  width: 100%;
}



@media (min-width: 768px) {
  .subscriptionboxdetail .form__section--content{
    padding: 0 0 4rem;
    width: 100%;
  }

  .subscriptionboxdetail .c-bg-area{
    padding: 7rem;
    border: none;
    border-radius: 0;
  }

  .subscriptionboxdetail .cart__fieldlist{
    padding-inline: 7.5rem;
  }
  
  .subscriptionboxdetail .cart__section--content:not(.cart__section--select) > .cart__fieldlist{
    gap: 12rem;
  }

  .subscription-product-area .cart__fieldlist .fieldlist--item-namearea{
    padding-left: 15rem;
    width: 55%;
  }

  .cart__fieldlist .fieldlist--item-quantityarea{
    text-align: center;
  }

  .subscription-product-area .cartitem__inner{
    padding: 2rem 7.5rem;
  }
  
  .subscription-product-area .cart__section--product:not(.cart__section--select) > .cartitem__inner{
    gap: 12rem;
  }

  .subscription-product-area .cartitem__namearea{
    width: 61%;
  }

  .subscription-product-area .cartitem__quantityarea{
    text-align: center;
  }

  .subscription-product-area .cartitem__pricearea,
  .subscription-product-area .fieldlist--item-pricearea{
    text-align: center;
  }

  .subscription-product-area .cartitem__subtotalarea,
  .subscription-product-area .fieldlist--item-subtotalarea{
    text-align: center;
  }

  .subscriptionboxdetail .button__group{
    justify-content: center;
  }
  
  .subscriptionboxdetail .c-button{
    width: fit-content;
  }

  .subscriptionboxdetail .c-button__primary--subscription{
    width: 49rem;
  }
}


.subscriptionOptionalItem__wrapper{
  margin-top: 2rem;
}
.form__section--heading-button,
.form__section--heading-select-button{
  background-color: #20B2A1;
  color: #fff;
}
.subscriptionOptionalItem__wrapper h2{
  font-size: 1.6rem;
}
.form__section--heading-button .c-button{
  width: 100%;
}
.subscriotion-item-list{
  margin-top: 1rem;
}
.subscriotion-item-list--select .cartitem__namearea:has(img[src=""]){
  display: block;
}
.subscriotion-item-list--select .cartitem__image:has(img[src=""]){
  display: none;
}
@media (min-width: 768px) {
  .subscriotion-item-list--select .fieldlist--item-namearea,
  .subscriotion-item-list--select .cartitem__namearea{
   width: 60%; 
  }

  .cart__fieldlist .fieldlist--item-deletearea,
  .subscriotion-item-list--select .cartitem__deletearea{
    width: 6.87%;
    flex-shrink: 0;
  }
  .subscriotion-item-list--select:not(:has(.cart__section--product)) .cart__fieldlist{
    display: none;
  }
}
@media (max-width: 767px) {
  .form__section--heading-button,
  .form__section--heading-select-button{
    display: grid;
    align-items: center;
    gap: 1rem;
  }
  .c-button-area-select{
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
  }
  .form__section--heading-select-button .c-button{
    min-width: 100%;
  }

  .subscription-select-item-area .cartitem__subtotalarea:empty{
    display: none;
  }

  .subscription-select-item-area .cartitem__deletearea{
    bottom: 3rem;
  }
}

img[src*="adsrvr.org"] {
    width: 1px !important;
    height: 1px !important;
    position: absolute !important; 
    opacity: 0 !important;
    pointer-events: none !important;
    left: 0;
    top: 0;
}

@media (hover: hover){
  .form__section--heading-button .c-button,
  .form__section--heading-select-button .c-button{
    transition: opacity var(--transition-default);
    cursor: pointer;
  }
  .form__section--heading-button .c-button:hover,
  .form__section--heading-select-button .c-button:hover{
    opacity: var(--hover-opacity);
  }
}

.cart__section--content.subscription-select-item-area{
  margin: 0 auto 3.5rem;
  padding: 2rem;
  background-color: #F8E5BE;
}

.subscription-select-item-area__inner{
  display: flex;
  flex-direction: column-reverse;
}

.subscription-select-item__heading{
  margin-bottom: 2rem;
  padding: 0;
  background-color: transparent;
  color: var(--color-black);
}

.subscription-select-item__action-area{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subscription-select-item__action-area:not(:has(.subscription-select-item__heading)){
  justify-content: center;
}

.subscription-select-item-area:not(:has(.subscription-select-item__action-area)){
  display: none;
}

.subscription-select-item-area .cart__section--content{
  padding: 0;
}

.subscription-select-item-area .cart__section--select:not(:has(.cart__section--product)) {
  padding: 0;
}

.subscription-select-item-area .cart__section--select:not(:has(.cart__section--product)) .cart__fieldlist{
  display: none;
}

.subscription-select-item-area .form__changearea{
  margin-top: 0;
}

@media (min-width: 768px) {

  .cart__section--content.subscription-select-item-area{
    max-width: 85%;
    margin: 0 auto 3.5rem;
    padding: 2rem;
  }

  .subscription-select-item-area__inner{
    flex-direction: column;
  }

  .subscription-select-item__heading{
    margin-bottom: 0;
  }

  .subscription-select-item__action-area{
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
  }

  .subscription-select-item__action-area + .cart__section--content{
    margin-top: 3rem;
  }

  .subscription-select-item__action-area .button__group{
    width: fit-content;
    margin: 0;
    margin-inline: 0;
  }

}

/* cart */
#CartList .subscription-select-item-area{
  margin-top: 3.5rem;
}