@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Roboto&display=swap');

body.page-menu{
  max-width: none;
  overflow-x:auto;
}
body.page-menu .container{
  min-width: auto;
}

/* パンくず */
body.page-menu .pane-topic-path{
  width: 1200px;
}

body.page-menu .block-mypage{
  width: 100%;
}

/* マイページ上部 */
body.page-menu .block-mypage .block-mypage--h1-title{
  text-align: center;
  width: 1200px;
  margin: 0 auto 45px;
}
body.page-menu .block-mypage .block-mypage--h1-title h1{
  font-family: Poppins;
  font-size: 25px;
  line-height: calc(38 / 25);
  letter-spacing: 0.15em;
}
body.page-menu .block-mypage .block-mypage--h1-title span{
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: calc(19 / 13);
}
body.page-menu .block-mypage--background-image{
  background: url(../../img/usr/menu/title_image.png) no-repeat center;
  background-size: cover;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  height: 300px;
  max-height: 300px;
  min-width: 1280px;
  /* margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw); */
}
body.page-menu .block-mypage--customer{
  /* margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw); */
  background: #F6F6F6;
  padding: 0 40px;
  margin-bottom: 74px;
  min-width: 1280px;
}

body.page-menu .block-mypage--customer-status{
  background: #E7DFCD;
  padding: 5px;
  border-radius: 0;
  color: #000000;
  display: block;
  margin-bottom: 0;
  position: relative;
  top: -50px;
  width: 100%;
  /* max-width: 1200px; */
  width: 1200px;
  margin: 0 auto;
}
body.page-menu .block-mypage--customer-status-block{
  border: 2px solid #FFFFFF;
  padding: 15px 40px 0;
  min-width: 1190px;
    overflow-x: auto;
    width: 1190px;
}
body.page-menu .block-mypage--sign{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 34px;
  /* border-bottom: 1px solid #FFFFFF; */
}
body.page-menu .block-mypage--customer-status-block-text{
  padding: 33px 0 23px;
  font-size: 16px;
  line-height: calc(28 / 16);
  border-top: 1px solid #FFFFFF;
}
body.page-menu .block-mypage--sign .block-mypage--customer-name{
  font-weight: bold;
  font-size: 24px;
}
body.page-menu .block-mypage--sign .block-mypage--logout{
  min-width: 70px;
  display: block;
  padding-right: 36px;
}
body.page-menu .block-mypage--sign .block-mypage--logout a{
  text-decoration: underline!important;
  color: #000000;
  font-size: 11px;
  padding-left: 5px;
  min-width: 70px;
}
body.page-menu .block-mypage--mypoint{
  flex-grow: 0;
  padding-left: 0;
  font-size: 14px;
}
body.page-menu .block-mypage--mypoint-point{
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
}
body.page-menu .block-mypage--rank-title{
  display: flex;
  padding-left: 30px;
  align-items: baseline;
  margin-right: 44px;
  white-space: nowrap;
}
body.page-menu .block-mypage--rank-name{
  padding-left: 5px;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
}
body.page-menu .block-mypage--rank-name.Bronze{
  color: #995828;
}
body.page-menu .block-mypage--rank-name.Silver{
  color: #A6A6A6;
}
body.page-menu .block-mypage--rank-name.Gold{
  color: #BF9230;
}
body.page-menu .block-mypage--rank-title-next{
  display: flex;
  flex-wrap: wrap;
  background: #C4B083;
  padding: 16px 20px;
  color: #FFFFFF;
  gap: 11px 25px;
  /* max-width: 474px; */
  width: 474px;
}
body.page-menu .block-mypage--rank-title-next > span{
  width: 100%;
  text-align: left;
  font-size: 16px;
  letter-spacing: 0.025em;
  line-height: calc(24 / 16);
}
body.page-menu .block-mypage--rank-condition-1,
body.page-menu .block-mypage--rank-condition-2{
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 14px;
}
body.page-menu .block-mypage--rank-condition-1{
  /* max-width: 179px; */
  text-align: left;
}
body.page-menu .block-mypage--rank-condition-2{
  /* max-width: 214px; */
  text-align: left;
}
body.page-menu .block-mypage--rank-condition-1-title,
body.page-menu .block-mypage--rank-condition-2-title{
  width: 65px;
  margin-right: 5px;
  height: 24px;
  font-size: 14px;
  color: #C4B083;
}


body.page-menu .block-mypage--customer-status-block-rank{
  background: #FFFFFF;
  margin-bottom: 68px;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title{
  padding: 17px 0;
  padding-left: 29px;
  font-size: 18px;
  position: relative;
  cursor: pointer;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title .text{
  color: #000000;
  font-weight: 400;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title .block{
  position: absolute;
  background: #000000;
  width: 21px;
  height: 21px;
  top: calc(50% - 10px);
  right: 33px;
  margin-top: 0;
  cursor: pointer;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  z-index: 2;
  background-color: #FFFFFF;
  width: 1px;
  height: 17px;
  right: 43px;
  margin-top: -8px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  cursor: pointer;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title.is-active::before{
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  z-index: 2;
  background-color: #FFFFFF;
  width: 17px;
  height: 1.2px;
  right: 35px;
  margin-top: 0px;
  cursor: pointer;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title.bronze{
  font-weight: bold;
  color: #995828;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title.silver{
  font-weight: bold;
  color: #A6A6A6;
}
body.page-menu .block-mypage--customer-status-block-rank .rank-title.gold{
  font-weight: bold;
  color: #BF9230;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank{
  background: #FFFFFF;
  border-bottom: 1px solid #C4B083;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-hidden{
  height: 220px;
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  padding-top: 23px;
  padding-bottom: 32px;
  box-sizing: content-box;
  margin-left: 29px;
  margin-right: 54px;
  border-top: 1px solid #C4B083;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-hidden.is-open{
  display: flex;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-hidden .block-rank-hidden-title{
  height: 100%;
  font-weight: bold;
  position: relative;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-hidden .block-rank-hidden-title::before{
  content: url(../../img/usr/menu/icon.png);
  margin-right: 10px;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-icon{
  display: flex;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-hidden-title-text{
  margin-bottom: 18px;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-icon .block-rank-icon-image{
  display: flex;
  flex-direction: column;
  width: 172px;
  height: 172px;
  background: #E7DFCD;
  align-items: center;
  justify-content: center;
  margin-right: 40px;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-icon .block-rank-icon-image img{
  margin-bottom: 13px;
  width: 65px;
  height: auto;
}
body.page-menu .block-mypage--customer-status-block-rank .block-rank-icon .block-rank-icon-image span{
  font-size: 13px;
  text-align: center;
}

body.page-menu .block-mypage--customer-regular{
  padding: 12px 47px 29px;
  /* max-width: 1200px; */
  width: 1200px;
  margin: 0 auto;
}
body.page-menu .block-mypage--customer-regular-block{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 38px;
}
body.page-menu .block-mypage--customer-regular-block-title{
  padding: 28px 0 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: calc(29 / 20);
  width: 100%;
}
body.page-menu .block-mypage--customer-regular-block-goods{
  padding: 29px;
  padding-right: 38px;
  background: #FFFFFF;
  /* max-width: 765px; */
  width: 765px;
  min-height: 271px;
  width: 66%;
}
body.page-menu .block-mypage--customer-regular-block-goods-title{
  display: flex;
  justify-content: space-between;
  padding-bottom: 29px;
}
body.page-menu .block-mypage--customer-regular-block-goods-list{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
}
body.page-menu .block-mypage--customer-regular-block-goods-list-item{
  max-width: 335px;
  align-items: center;
  display: flex;
  width: 47.6%;
}
body.page-menu .block-mypage--customer-regular-block-goods-list-item img{
  /* max-width: 70px; */
  width: 70px;
  height: auto;
  margin-right: 20px;
}
body.page-menu .block-mypage--customer-regular-block-goods-list-item span{
  color: #666464;
  font-size: 14px;
  line-height: calc(20 / 14);
}
body.page-menu .cal_wrapper{
  position: relative;
  background: #fff;
  width: 303px;
  padding: 23px 40px;
}
body.page-menu .cal_wrapper th,
body.page-menu .cal_wrapper td{
  text-align: center;
  height: 30px;
}
body.page-menu .cal_wrapper table{
  width: 210px;
  min-height: 208px;
}
body.page-menu .cal_wrapper td > div{
  height: 100%;
}
body.page-menu .cal_wrapper .cal_ui{
  padding-bottom: 15px;
}
body.page-menu .cal_wrapper .cal_sttr th{
  text-align: center;
  font-weight: bold;
}
body.page-menu .cal_wrapper .headline{
  font-size: 14px;
}
body.page-menu .cal_wrapper .headline th:nth-of-type(1),
body.page-menu .cal_wrapper .Sun,
body.page-menu .cal_wrapper .Holyday{
  color: #D94141;
}
body.page-menu .cal_wrapper .headline th:nth-of-type(7),
body.page-menu .cal_wrapper .Sat{
  color: #7C94C5;
}
body.page-menu .cal_wrapper .cal_ui ul li:nth-of-type(1) a{
  background-image: url(../../img/usr/pc/home/swiper_arrow.png);
  transform: rotate(180deg);
  height: 39px;
  width: 26px;
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 19.5px);
  left: -13px;
}
body.page-menu .cal_wrapper .cal_ui ul li:nth-of-type(2) a{
  background-image: url(../../img/usr/pc/home/swiper_arrow.png);
  height: 39px;
  width: 26px;
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 19.5px);
  right: -13px;
}
body.page-menu .cal_wrapper .Deadlineday{
  color: #C4B083;
  background: #FFFFFF;
  border-radius: 50%;
  border: 1.5px solid #C4B083;
}
body.page-menu .cal_wrapper .Scheduleday{
  color: #FFFFFF;
  background: #C4B083;
  border-radius: 50%;
}
body.page-menu .block-mypage--customer-regular-block-span{
  text-align: right;
  width: 100%;
  padding-top: 14px;
}
body.page-menu .block-mypage--customer-regular-block-span span{
  font-size: 14px;
  color: #444444;
  letter-spacing: 0.05em;
}
body.page-menu .block-mypage--customer-regular-block-span span:nth-of-type(1){
  margin-right: 20px;
}
body.page-menu .block-mypage--customer-regular-block-span span:nth-of-type(1)::before{
  background: #ffffff;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  display: inline-block;
  content: '';
  margin-right: 5px;
  border: 1px solid #C4B083;
}
body.page-menu .block-mypage--customer-regular-block-span span:nth-of-type(2)::before{
  background: #C4B083;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  display: inline-block;
  content: '';
  margin-right: 5px;
}
body.page-menu .block-mypage--shopping-info,
body.page-menu .block-mypage--member-info,
body.page-menu .block-mypage--inquiry-info{
  font-size: 20px;
  font-weight: bold;
  /* max-width: 1106px; */
  width: 1106px;
  margin: 0 auto;
  text-align: left;
  padding: 0;
}
body.page-menu .block-mypage--shopping-info-items,
body.page-menu .block-mypage--member-info-items,
body.page-menu .block-mypage--inquiry-info-items{
  margin: 18px auto 63px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 44px;
  padding-right: 47px;
  /* max-width: 1106px; */
  width: 1106px;
  box-sizing: content-box;
  gap: 0 30px;
}
body.page-menu .block-mypage--shopping-info-items li,
body.page-menu .block-mypage--member-info-items li,
body.page-menu .block-mypage--inquiry-info-items li{
  width: 348px;
  max-width: 348px;
  width: 348px;
  height: 100px;
  flex-grow: 1;
  border: none;
  border-bottom: #c8c8c8 1px solid;
  margin: 0;
}
body.page-menu .block-mypage--shopping-info-items li > div,
body.page-menu .block-mypage--member-info-items li > div,
body.page-menu .block-mypage--inquiry-info-items li > div{
  /* padding: 23px 0; */
}
body.page-menu .block-mypage--shopping-info-items li > div a,
body.page-menu .block-mypage--member-info-items li > div a,
body.page-menu .block-mypage--inquiry-info-items li > div a{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 100px;
}
body.page-menu .block-mypage--update-address-book{
  width: auto;
  background: transparent;
  border-radius: 0;
  text-align: start;
  padding: 0;
  margin: 0;
}
body.page-menu .block-mypage--shopping-info-items li dd,
body.page-menu .block-mypage--member-info-items li dd,
body.page-menu .block-mypage--inquiry-info-items li dd{
  padding: 12px 0 0;
}
body.page-menu .block-mypage--shopping-info-items li dl,
body.page-menu .block-mypage--member-info-items li dl,
body.page-menu .block-mypage--inquiry-info-items li dl{
  /* max-width: 370px; */
  width: 370px;
  width: 67%;
  margin-bottom: 0;
}
body.page-menu .block-mypage--purchase-history a img{
  width: 55px;
  height: auto;
}
body.page-menu .block-mypage--regular-purchase a img{
  width: 64.35px;
  height: auto;
}
body.page-menu .block-mypage--favorite a img{
  width: 45px;
  height: auto;
}
body.page-menu .block-mypage--udpate-member-info a img{
  width: 45px;
  height: auto;
}
body.page-menu .block-mypage--credit-card-confirmation a img{
  width: 47.23px;
  height: auto;
}
body.page-menu .block-mypage--update-mail-address a img{
  width: 43.65px;
  height: auto;
}
body.page-menu .block-mypage--member-info-item-create-address-book a img{
  width: 39px;
  height: auto;
}
body.page-menu .block-mypage--create-address-book.regist a img{
  width: 56.28px;
  height: auto;
}
body.page-menu .block-mypage--update-password  a img{
  width: 45px;
  height: auto;
}
body.page-menu .block-mypage--mailnews a img{
  width: 46px;
  height: auto;
}
body.page-menu .block-mypage--inquiry a img{
  width: 46px;
  height: auto;
}
body.page-menu .block-mypage--inquiry-history a img{
  width: 60.5px;
  height: auto;
}


body.page-menu .block-mypage--shopping-info-items li > div > a::before,
body.page-menu .block-mypage--member-info-items li > div > a::before,
body.page-menu .block-mypage--inquiry-info-items li > div > a::before{
  background-image: url(../../img/usr/sp/common/icon-arrow2.svg);
  background-repeat: no-repeat;
  content: "";
  background-size: contain;
  position: absolute;
  width: 10px;
  height: 10px;
  right: 22px;
  top: calc(50% - 5px);
}
body.page-menu .block-mypage--members-only{
  /* max-width: 1200px; */
  width: 1200px;
  margin: 0 auto;
}
body.page-menu .block-mypage--members-only > h2{
  text-align: center;
  font-size: 22px;
  color: #666464;
  letter-spacing: 0;
  margin-bottom: 56px;
  font-weight: 500;
}
body.page-menu .block-mypage--members-only ul{
  display: flex;
}
body.page-menu .block-mypage--members-only ul li{
  width: 31.66%;
}
body.page-menu .block-mypage--members-only ul li:not(:nth-of-type(3)){
  margin-right: 30px;
}
body.page-menu .block-mypage--members-only ul li span:nth-of-type(1){
  margin-top: 17px;
  margin-top: 17px;
  font-size: 12px;
  color: #666464;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden; 
}
body.page-menu .block-mypage--members-only ul li span:nth-of-type(2){
  display: block;
  margin-top: 7px;
  font-size: 14px;
  color: #B2B2B2;
}

body.page-menu .block-accessory-list{
  /* max-width: 1106px; */
  width: 1106px;
  margin: 0 auto;
}
body.page-menu .block-accessory-list--name{
  text-align: center;
  font-size: 22px;
  color: #666464;
  letter-spacing: 0;
  margin-bottom: 56px;
  font-weight: 500;
}
body.page-menu .block-pickup-list-p{
  
}
body.page-menu .block-pickup-list-p figure{
  display: block;
}

/*--------------------
マイページ
　定期購入商品一覧
--------------------*/
body.page-regularhistory .block-regular-purcharse-list--pager-top{
  width: 100%;
}
body.page-regularhistory .block-regular-purcharse-list--list{
  width: 100%;
  margin: 0 0 15px;
}
body.page-regularhistory .block-regular-purcharse-list--pager-bottom{
  width: 100%;
}
body.page-regularhistory .pane-topic-path{
  width: 100%;
}

/*--------------------
マイページ
　定期購入お支払い方法変更
--------------------*/
body.page-regularmethod .pane-topic-path{
  display:block;
  width: 1200px;
}

/*--------------------
マイページ
　クレジットカードの変更
--------------------*/

body.page-cardedit .pane-topic-path,
body.page-cardupdate .pane-topic-path{
  display:block;
  width: 1200px;
}
body.page-cardupdate .fieldset .form-label{
  width: 23%;
  padding: 25px 10px 25px 25px;
  text-align: left;
  background: #f9f9f9;
}
body.page-cardupdate .fieldset .form-group{
  display: table;
  width: 100%;
  border-top: #e5e5e5 1px solid;
}
body.page-cardupdate .fieldset .form-group:last-child{
  border-bottom: #e5e5e5 1px solid;
}
body.page-cardupdate .fieldset .form-control{
  padding: 5px 0 5px 20px;
  margin: 0;
  display: table-cell;
}
body.page-cardupdate input:focus{
  -webkit-box-shadow: none;
  box-shadow: none;
}
body.page-cardupdate .form-control input[type="text"]{
  padding: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: auto;
  box-shadow:none;
}
body.page-cardupdate .fieldset .form-control select{
  width: auto;
}
