@charset "UTF-8";


/* ==========================================================================
  extend
========================================================================== */

/* ----ログインなど横幅が短いコンテンツ用---- */
/* ---- PC用 ---- */
@media (min-width: 960px) {
  /* wrapper__short */
  main.l-main:has(.wrapper__short){
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
  }
  .wrapper:has(.wrapper__short){
    min-width: unset !important;

    .l-main {
      min-height: 100%;
      /* height: auto; */
    }

    .comp-bottom-bnrs{
      width: 100%;
    }
    .comp-footer{
      width: 100%;
    }
  }
  .wrapper__short{
    flex:1;
    width: 100%;
    padding-top: 80px;
  }

  /* member-wrapper */
  main.l-main:has(.member-wrapper){
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
  }
  .wrapper:has(.member-wrapper){
    min-width: unset !important;

    .l-main {
      min-height: 100%;
      /* height: auto; */
    }

    .comp-bottom-bnrs{
      width: 100%;
    }
    .comp-footer{
      width: 100%;
    }
  }
  .member-wrapper{
    flex:1;
    width: 100%;
    .l-main-wrapper,
    .u-bg-graige50{
      height: 100%;
    }
  }

  .comp-footer{
    width: 100%;
  }

  body#vertical .wrapper{
    height: 100% !important;
  }
}

/* ----モバイル用---- */
@media (max-width: 959px) {
  .content__main{
    .content__main640,
    .content__main480{
      padding: 0 !important;
    }
  }
  body#vertical .wrapper {
    display: block !important;
    min-width: unset !important;
  }
}





/* ==========================================================================
  btn
========================================================================== */
#cart .form__button__o,
#cart .form__button,
#cec .form__button{
  background-color: #443A37 !important;
  border: solid 1px #443A37 !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #FFF !important;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  position: relative;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;

  &::after{
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    position: absolute;
    top: 50%;
    right: 9%;
    transform: translateY(-50%) rotate(45deg);
    transition: var(--transition);
  }

  &:hover{
    color: #FFF !important;
    background-color: #D10035 !important;
    border: solid 1px #D10035 !important;
    &::after{
      right: 5%;
    }
  }

  &.is-back{
    background-color: #FFF !important;
    color: #443A37 !important;
    border: solid 1px #443A37 !important;
    &::after {
      right: unset;
      left: 9%;
      border-top: none;
      border-right: none;
      border-bottom: 1px solid #443A37;
      border-left: 1px solid #443A37;
    }
  }

  &.button-disabled,
  &.disabled{
    opacity: 0.1;
    pointer-events: none;
    &::after{
      display: none !important;
    }
  }
}

#cart,
#cec{
  .btn__min-w2,
  .btn__min-b2,
  .form__button.btn__min-o,
  .form__button.btn__min-w400{
    width: 260px !important;
    min-width: unset !important;
    height: 48px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 959px) {
  #cart,
  #cec{
    .btn__min-w2,
    .btn__min-b2,
    .form__button.btn__min-o,
    .form__button.btn__min-w400{
      width: 240px !important;
    }
  }
}
#cart,
#cec{
  .btn__min-w2,
  .btn__min-w{
    background-color: #FFF !important;
    border: solid 1px #443A37 !important;
    color: #443A37 !important;
    font-weight: bold !important;
    font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    &::after {
      border-color: #443A37;
    }
    &:hover{
      background-color: #443A37 !important;
      border: solid 1px #443A37 !important;
      color: #FFF !important;
      &::after {
        border-color: #FFF;
      }
    }
  }

  .btn__min-b,
  .btn__min-b2,
  .btn__min-b-input{
    background-color: #443A37 !important;
    border: solid 1px #443A37 !important;
    color: #FFF !important;
    padding: 4px 24px !important;
    font-weight: bold !important;
    &:hover{
      color: #FFF !important;
      opacity: .5;
    }
  }

  .btn__min-b-s{
    background-color: #443A37 !important;
    border: solid 1px #443A37 !important;
    line-height: 26px;
  }
  .btn__min-w-s{
    border: solid 1px #443A37 !important;
    line-height: 26px
  }

  .btn__inlineb{
    width: fit-content !important;
  }

  .btn__write__review{
    width: 160px !important;
  }



}

@media (min-width: 960px) {
  .btn__w220{
    width: 220px !important;
  }

  .btn__w160{
    width: 160px !important;
  }
}


@media (max-width: 959px) {
  #cart,
  #cec {
    .button-container{
      display: flex;
      align-items: center;
      flex-direction: column !important;
    }
  }
}




#cart{
  .cart__subtitle__delivery{
    button{
      background-color: #FFF !important;
      border: solid 1px #443A37 !important;
      color: #443A37 !important;
      font-weight: bold !important;
      font-family: "Noto Sans JP", sans-serif;
      border-radius: 8px !important;
      font-size: 1.2rem !important;

      &:hover{
        background-color: #443A37 !important;
      }
    }
  }
  .content__left{
    .btn__min-w{
      background-color: #443A37 !important;
      color: #FFF !important;

      &:hover{
        opacity: .5;
      }
    }
  }
}




.button-container{
  display: flex;
  gap: 8px !important;
  align-items: center;
  justify-content: center;
}
@media (min-width: 960px) {
  .button-container{
    .pc-order-1{
      order: 1;
    } 
    .pc-order-2{
      order: 2;
    }
  }
}




/* ==========================================================================
  account title
========================================================================== */
#cec .account__title{
  font-size: min(3.2rem, 6.9vw) !important;
}
@media (max-width: 959px) {
  .account__title{
    padding: 40px 0 32px;
    margin-bottom: 0;
  }
}

#cec .account__section{
  border-top: solid 1px #DED4BF !important;
}

/* フロー */
#cart .cart__flow,
#cec .account__flow{
  ul{
    li{
      span{
        background-color: #FFF !important;
        border: 1px solid #DED4BF;
        font-weight: bold;
        
      }
      &::after {
        top: 50% !important;
        height: 1px !important;
        background-color: #DED4BF;
      }
      &.active{
        span{
          color: #443A37 !important;
          background-color: #EDE6D9 !important;
          border: 1px solid #A89370 !important;
        }
        
      }
    }
  }
  
}
@media (max-width: 959px) {
  #cec .account__flow{
    ul{
      li{
        margin: 0 2px !important;
        span{
          min-width: 94px !important;
        }
      }
    }
  }
}











/* ==========================================================================
  form
========================================================================== */
#cart,
#cec{
  .form__label{
    display: inline-block;
    font-weight: bold !important;
    margin-bottom: 8px;
  }
  .form__label.form__required{
  
    &::before {
      content: '必須';
      font-size: 10px;
      color: #FFF;
      padding:.1em .8em;
      border-radius: 10px;
      position: relative;
      top: -2px;
      background: #D10035;
      margin-right: 4px;
    }
    &::after{
      display: none !important;
    }
  }
  .form__textarea,
  .form__input{
    border: solid 1px #DED4BF !important;
    font-family: "Noto Sans JP", sans-serif;
    padding: 8px 12px !important;
  
    &::placeholder{
      color: #AEABAA !important;
      font-size: 1.6rem !important;
    }
  }
  .form__select {
    border: solid 1px #DED4BF !important;
    font-family: "Noto Sans JP", sans-serif;
  }
  .error_message{
    font-family: "Noto Sans JP", sans-serif;
  }
  .form__input.coupon{
    border-radius: 12px 0 0 12px !important;
  }
  .form__button.coupon{
    border-radius: 0 12px 12px 0 !important;
    background-color: #443A37 !important;
    font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: bold !important;
    &:hover{
      background-color: #D10035 !important;
      background-color: #D10035 !important;
    }
  }
  .cart__option__input{
    width: 100% !important;
    border-radius: 12px !important;
    font-family: "Noto Sans JP", sans-serif;
    .form__textarea{
      border-color: #DED4BF !important;
      &::placeholder{
        color: #AEABAA !important;
        font-size: 1.6rem !important;
      }
    }
  }
  .cart__payment{
    border-color: #DED4BF !important;
    background-color: #FFF !important;
    border-radius: 12px !important;
    .cart__payment__name{
      font-weight: bold !important;
    }
  }

  input[type="checkbox"],
  input[type="radio"]{
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
  }

  .complete__number{
    background-color: #EDE6D9 !important;
    border-radius: 12px !important;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  #cart,
  #cec{
    .form__label{
      font-size: 3.3vw !important;
      &.form__required{
        &::before{
          top: 0;
        }
      }
    }
  }
}











/* ==========================================================================
  member
========================================================================== */
#cec .member-wrapper{
  .content__wrapper{
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (max-width: 959px) {
  #cec .member-wrapper{
    .content__wrapper{
      padding-top: 16px !important;
      padding-bottom: 32px !important;
    }
  }
}
#cec .member__title{
  padding-bottom:40px;
  border-bottom: 1px solid #DED4BF;
  border-radius: 0 !important;
}
@media (max-width: 959px) {
  #cec .member__title{
    padding-bottom:24px !important;
  }
}
#cec .member__section{
  border-top: none !important;
}

#cec .member__right{
  width: 100% !important;
  max-width: 100% !important;
}

.c-breadcrumb li:last-child{
  padding-left:4px;
}


/* マイページ用SPメニュー */
#cec .member-bottomNav-sp{
  .comp-header-gnav{
    display: none !important;
  }
}
@media (max-width: 959px) {
  #cec .member-bottomNav-sp{
    .comp-header-gnav{
      display: block !important;
    }
    
  }
}



/* ------------------マイページトップ*/
/* bglight-wrap */
.comp-bglght-wrap{
  background-color: #F3EEE4;
  padding: 24px !important;
  border-radius: 12px;
}
@media (max-width: 959px) {
  .comp-bglght-wrap{
    padding:4vw !important;
  }
}

.member__historylist-content,
.member__reviewlist-content{
  background-color: #FAF7F2 !important;
  border-radius: 12px;
}

.member__historylist-contentdetail{
  .goodsimgbg{
    background-position: 50% 50%;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-color: #FFF;
    border-radius: 8px;
    overflow: hidden;
  }
}

.text__c{
  .form__button{
    margin-left: auto;
    margin-right: auto;
  }
}
.button-container.text__c{
  .form__button{
    margin-left: unset !important;
    margin-right: unset !important;
  }
}



/* ------------------マイページレビュー*/
.member__reviewlist{
  .member__reviewlist-img{
    aspect-ratio: 1/1;
    background-color: #FFF;
    border-radius: 12px;
    overflow: hidden;
    img{
      object-fit: contain;
      width: 100% !important;
      height: 100% !important;
    }
  }
}
.comp-review-button-wrap{
  position: relative;
  .btn__min-w,
  .btn__min-b{
    width: 160px !important;
  }
}

@media (min-width: 960px) {
  .member__reviewlist{
    position: relative;
    min-height: 180px;
    > a{display: block;}

    .member__reviewlist-img{
      position: absolute;
      top: 24px;
      left: 24px;
    }
    .member__reviewlist-delete-requested,
    .member__reviewlist-detail{
      margin-left: 138px;    
    }
    .comp-review-button-wrap{
      margin-left: 138px;

      .btn__deleat{
        position: absolute;
        top: 0;
        left:168px;;
      }
      .btn__open-review{
        position: absolute;
        top: 0;
        left:336px;
      }
    }

  }
  
}
@media (max-width: 960px) {
  .comp-review-button-wrap{
    .btn__deleat,
    .btn__open-review{
      margin-top: 8px;
    }
  }
}
.modal-body{
  border-radius: 12px !important;
}


/* ------------------お気に入り一覧　＆　入荷お知らせ一覧*/
.member__notifylist,
.member__favoritelist{
  position: relative;
  > a{
    text-decoration: none;
    display: block;
    width: 100%;
  }
  .member__notifylist-img,
  .member__favoritelist-img{
    background: #FFF;
    border-radius: 12px;
    overflow: hidden;
    width: 40% !important;
    height: auto !important;
    max-width: 154px !important;
    display: flex;
    align-items: center;
    justify-content: center;

    img{
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: cover;
    }
  }
  .c-card-prod-txt{
    margin-top: 0 !important;
    flex: 1;
  }
  .c-card-store .honbun-s{
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sku{
    padding-top: 4px;
    font-size: 1.2rem;
    line-height: 1.3;
    color: #AEABAA;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: unset;
  }
  .c-favBtn{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
    transition: .3s all;
  }
}
@media (min-width: 960px) {
  .member__favoritelist{
    .c-favBtn{
      border-color: #F3EEE4 !important;

      &:hover{
        box-shadow: none !important;
        &::before{
          background: url(/img/common/icons/icon-heart-f.svg) no-repeat center center/24px 24px !important;
          filter: brightness(0) saturate(100%) invert(99%) sepia(58%) saturate(420%) hue-rotate(303deg) brightness(102%) contrast(90%);
        }
      }
      
    }
  }
}

.member__notifylist-btn{
  margin-top: 8px;
  a{
    background-color: #443A37 !important;
    border-color: #443A37 !important;
    width: 260px !important;
    color: #FFF !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    position: relative !important;
    margin-left: 0 !important;
  }
  a::after{
    content: "" !important;
    display: inline-block !important;
    width: 7px;
    height: 7px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    position: absolute;
    top: 50%;
    right: 9%;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: var(--transition) !important;
  }
}
@media (min-width: 960px) {
  .member__notifylist-btn{
    a{
      &:hover{
        background-color: #D10035 !important;
        border-color: #D10035 !important;
        &::after{
          right: 5% !important;
        }
      }
    }
  }
}














/* ==========================================================================
  cart
========================================================================== */

@media (min-width: 960px) {
  #cart .cart__section .cart__section__change{
    justify-content: flex-end !important;
  }
}

@media (max-width: 959px) {
  #cart .cart__section .cart__section__change{
    margin-top: 16px !important;
  }
}

#cart .cart__title{
  margin-bottom: 0 !important;
}

/* ------ カート全体のスタイル ------ */
#cart {
  .content__wrapper{
    background-color: #FAF7F2 !important;
  }
  .content__wrapper section{
    padding-bottom: 24px !important;
  }
  .cart__section{
    border-color: #DED4BF !important;
  }
  .cart__aside__orderbtn{
    background-color: #F3EEE4 !important;

    .form__button{
      margin-left: auto !important;
      margin-right: auto !important;
    }
    

    &:first-child{
      border-radius: 8px 8px 0 0 !important;
    }
  }
  .cart__aside__order{
    background-color: #EDE6D9 !important;
    border-radius: 0 0 8px 8px !important;
  }
  .cart__section__content{
    h3{
      font-weight: bold !important;
    }
    .cart__section__detailnumber,
    .cart__section__variation{
      font-family: "Noto Sans JP", sans-serif !important;
    }
  }

  .form__button__o{
    background-color: #D10035 !important;
    border: solid 1px #D10035 !important;

    &:hover{
      background-color: #443A37 !important;
      border: solid 1px #443A37 !important;
    }
    
  }


  .cart__section__img{
    aspect-ratio: 1/1;
    background-color: #FFF;
    border-radius: 12px;
    overflow: hidden;
    img{
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  .cart__aside__litemimage{
    > a{
      aspect-ratio: 1/1;
      img{
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
    }
  }
  .cart__aside__litemimage,
  .cart__deliverygroup__goods__img{
    aspect-ratio: 1/1;
    background-color: #FFF;
    border-radius: 8px;
    overflow: hidden;
    img{
      object-fit: contain;
      width: 100% !important;
      height: 100% !important;
    }
  }

  .
  
  

}

/* ------ カート内テーブル（ギフト） ------ */
#cart{
  table.table01,
  table{
    background-color: #FFF !important;
    border: solid 1px #DED4BF !important;

    thead{
      tr{
        background-color: #F3EEE4 !important;
      }
      th{
        padding:8px;
        vertical-align: middle;
        background-color: #F3EEE4 !important;
        border-right: solid 1px #DED4BF !important;
        font-size: 1.2rem !important;

        &:last-child{
          border-right: none !important;
        }
      }
    }
    tbody{
      td{
        vertical-align: middle;
        padding:8px;
        border-right: solid 1px #DED4BF !important;
        &:last-child{
          border-right: none !important;
        }

        button{
          background-color: #443A37 !important;
          border: 1px solid #443A37 !important;
          color: #FFF !important;
          font-size: 1.4rem !important;
          font-weight: bold !important;
          font-family: "Zen Kaku Gothic New", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
          padding: 4px 12px !important;
          border-radius: 16px !important;
          margin-left: 4px !important;
          transition: .3s all;

          &:hover{
            opacity: .5;
          }
        }
      }
    }
  }
}
@media (max-width: 959px) {
  #cart{
    table.table01,
    table{
      thead{
        th{
          font-size: 1rem !important;
          padding: 1vw !important;
          border-right: none !important;
        }
      }
      tbody{
        td{
          padding: 1vw !important;
          border-right: none !important;
        }
      }


      .cart__deliverygroup__goods__img{
        width: 60px !important;
        height: auto !important;
      }

      .cart__deliverygroup__goods__detail{
        flex: 1;
        width: unset !important;
      }
    }
  }
}





/* ==========================================================================
  contact
========================================================================== */
.comp-contact {
  .utility__section{
    border-top: none !important;
    padding-top: 0 !important;

    .flex-pc{
      > div{
        width: 100%;
      }
    }
  }
  .form__input.is-half{
    width: calc(50% - 4px) !important;
  }
  .contact__form__buttonwrap{

  }
}















/* ==========================================================================
  padding / margin
========================================================================== */
.pt-16 {padding-top: 16px !important;}
.pt-12 {padding-top: 12px !important;}
.pt-8 {padding-top: 8px !important;}
.pt-4 {padding-top: 4px !important;}

.pb-16 {padding-bottom: 16px !important;}
.pb-12 {padding-bottom: 12px !important;}
.pb-8 {padding-bottom: 8px !important;}
.pb-4 {padding-bottom: 4px !important;}

.pb-64 {padding-bottom: 64px !important;}
.pb-80 {padding-bottom: 80px !important;}

.mt-40 {margin-top: 40px !important;}

.u-gap16{gap: 16px !important;}
.u-gap12{gap: 12px !important;}
.u-gap8{gap: 8px !important;}
.u-gap4{gap: 4px !important;}

#cec .pb-0,
body#cart .pb-0{
  padding-bottom: 0 !important;
}



/* ==========================================================================
  font
========================================================================== */
.font-18{font-size: 1.8rem}
.font-20{font-size: 2rem}
.font-22{font-size: 2.2rem}
.font-24{font-size: 2.4rem}
.font-26{font-size: 2.6rem}
.font-28{font-size: 2.8rem}
.font-30{font-size: 3rem}
.font-32{font-size: 3.2rem}
.font-36{font-size: 3.6rem}
.font-40{font-size: 4rem}



/* ==========================================================================
  content
========================================================================== */
@media (max-width: 959px) {
  .l-inner{
    .content__main800{
      max-width: unset !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

.is-align-start{
  align-items: flex-start;
}