@charset "UTF-8";

html.lock,
html.spLock{
  scroll-behavior: auto;
}

@media screen and (max-width: 375px) {
  html {
    font-size: calc((10 * (100vw / 375)));
  }
}


body {
	font-family: var(--font-main);
	font-weight: 400;
  letter-spacing: 0;
	color: var(--color-text-default);
}


:placeholder-shown { color: #BFBCBC;}
::-webkit-input-placeholder { color: #BFBCBC;}
:-moz-placeholder { color: #BFBCBC;}
::-moz-placeholder { color: #BFBCBC;}
:-ms-input-placeholder { color: #BFBCBC;}

/**************************************
overRide
**************************************/
.global-contents__inner{
  padding-bottom: 0;
}


/**************************************
wrap
**************************************/
#outerWrap{
	width: 100%;
	margin: 0 auto;
}

#outerWrap.lock,
#outerWrap.spLock{
	position: fixed;
	overflow: hidden;
	top: 0;
}

/**************************************
btn
**************************************/
.btnNext > a,
.btnNext > button,
.btnNext > span,
.btnNext > input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 5rem;
  background: var(--color-primary);
  border-radius: 2.5rem;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  padding: 0 2.5rem 0;
	font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: none;
}

.btnNext > a::after,
.btnNext > button::after,
.btnNext > span::after,
.btnNext > input[type="submit"]::after{
  content: '';
  display: block;
  width: 2.4rem;
  height: 0.6rem;
  mask-image: url("../img/common/arrow_btn.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/arrow_btn.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-white);
  position: absolute;
  right: 2.5rem;
  top: calc(50% - 0.3rem);
  transition: transform 0.3s ease;
}

.btnNext.cart > a,
.btnNext.subsc > a{
  gap: 0 1.4rem;
  height: 6rem;
  font-size: 1.7rem;
  background: #CE4B4B;
}

.btnNext.cart > a::after,
.btnNext.cart > button::after,
.btnNext.cart > span::after,
.btnNext.subsc > a::after,
.btnNext.subsc > button::after,
.btnNext.subsc > span::after{
  display: none;
}

.btnNext.cart > a::before,
.btnNext.cart > button::before,
.btnNext.cart > span::before{
  content: '';
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  mask-image: url("../img/common/icon_cart.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/icon_cart.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-white);
  transition: background 0.3s ease;
}
.btnNext.subsc > a{background: #F09A0F;}





.btnNext.disabled > a,
.btnNext.disabled > button,
.btnNext.disabled > span,
.btnNext > a[disabled],
.btnNext > button[disabled],
.btnNext > span[disabled],
.btnNext > input[type="submit"][disabled]{
  background: var(--color-disable);
  pointer-events: none;
  border-color: var(--color-disable);
}


/** btnBorder *******************/
.btnBorder > a,
.btnBorder > button,
.btnBorder > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 5rem;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  border-radius: 2.5rem;
  padding: 0 2.5rem 0; 
	font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: var(--color-black);
  position: relative;
  transition: none;
}

.btnBorder > a::after,
.btnBorder > button::after,
.btnBorder > span::after,
.btnBorder > input[type="submit"]::after{
  content: '';
  display: block;
  width: 2.4rem;
  height: 0.6rem;
  mask-image: url("../img/common/arrow_btn.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/arrow_btn.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--color-black);
  position: absolute;
  right: 2.5rem;
  top: calc(50% - 0.3rem);
  transition: transform 0.3s ease;
}


.btnBorder.disabled > a,
.btnBorder.disabled > button,
.btnBorder.disabled > span,
.btnBorder > a[disabled],
.btnBorder > button[disabled],
.btnBorder > span[disabled],
.btnBorder > input[type="submit"][disabled]{
  background: var(--color-disable);
  pointer-events: none;
  border-color: var(--color-disable);
}


/** btnBack *******************/
.btnBack > a,
.btnBack > button,
.btnBack > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 5rem;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 3rem;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  padding: 0 2.5rem 0; 
	font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: var(--color-black);
  position: relative;
  transition: none;
}

/*
.btnBack > a::after,
.btnBack > button::after,
.btnBack > span::after{
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  mask-image: url("../img/system/arrow_right.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/system/arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: var(--btnColor);
  position: absolute;
  left: 0.8rem;
  top: calc(50% - 1rem);
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
*/


.btnBack.disabled > a,
.btnBack.disabled > button,
.btnBack.disabled > span,
.btnBack > a[disabled],
.btnBack > button[disabled],
.btnBack > span[disabled]{
  background: var(--disableColor);
  pointer-events: none;
  border-color: var(--disableColor);
}

/**************************************
#headAlert
**************************************/
#headAlert{
  display: block;
  width: 100%;
  height: 3.6rem;
  padding: 0 1rem 0;
  background: #F7EDD2;
  overflow: hidden;
}

#headAlert > p{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
}

#headAlert a{
  display: block;
  width: 9rem;
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: underline;
  white-space: nowrap;
  transition: opacity .3s ease;
}


#headAlert span{
  display: block;
  max-width: calc(100% -11.5rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/**************************************
#header
**************************************/
#header{
	display: block;
	width: 100%;
  padding-bottom: var(--height-header);
  position: relative;
}

#header > .outer{
	display: block;
	width: 100%;
	padding: 0 1rem 0 0.5rem;
	margin: 0 auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	background: #FFFFFF;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}

#header.fixed > .outer{
  position: fixed;
}


#header .inner{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 5rem;
  height: var(--height-header);
  margin: 0 auto;
  /*transition: height 0.3s ease;*/
}

#header.fixed .inner{
  height: 6rem;
  align-items: center;
}


#header .headLogo{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 15rem;
  height: 100%;
}


#header.fixed .headLogo{width: 13.5rem;}

#header .headLogo > a{
  display: block;
  width: 100%;
  transition: opacity .3s ease;
}

#header .headLogo picture{display: block; width: 100%;}
#header .headLogo img{
  display: block;
  width: 100%;
}

/** headBtnNav **************/
#headUtilitySP{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 1.5rem;
  height: 4.5rem;
}

#headUtilitySP > li{
  display: block; 
}

#headUtilitySP > li > a{
  display: block;
  text-decoration: none;
  position: relative;
}


#headUtilitySP > li > a > figure{
  width: 3rem;
  margin: 0 auto 0.1rem;
}

#headUtilitySP > li > a > span{
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.025em;
  color: #43AC33;
}


#headUtilitySP > li > a > em{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #FA9900;
  font-size: 1.0rem;
  font-weight: 500;
  color: #FFFFFF;
  font-style: normal;
  position: absolute;
  top: -0.2rem;
  left: calc(50% + 0.5rem);
}


/** headBtnNav **************/
#headNav{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 100%;
  position: absolute;
  right: 1rem;
  top: 0;
}


#headNav .openBtn{
  display: block;
  width: 100%;
  height: 4.5rem;
}


#headNav .openBtn > span{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0;
  width: 100%;
  height: 3rem;
  margin-bottom: 0.1rem;
  position: relative;
}

#headNav .openBtn > span > span{
  display: block;
  width: 2rem;
  height: 2px;
  background: #42AC33;
  transition: opacity .3s ease;
}

#headNav .openBtn > span::before,
#headNav .openBtn > span::after{
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: #42AC33;
  transition: transform .3s ease;
}

#headNav.open .openBtn > span > span{
  opacity: 0;
}
#headNav.open .openBtn > span::before{
  width: 2.2rem;
  left: calc(50% - 1.1rem);
	transform: translate(0,0.6rem) rotate(-45deg);
}
#headNav.open .openBtn > span::after{
  width: 2.2rem;
  left: calc(50% - 1.1rem);
 	transform: translate(0,-0.6rem) rotate(45deg);
}


#headNav .openBtn::after{
  content: 'メニュー';
  display: block;
  text-align: center;
  white-space: nowrap;
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.025em;
  color: #43AC33;
}

#headNav.open .openBtn::after{content: '閉じる';}

/*
#headNav.open::before{
  content: '';
  display: block;
  width: 100vw;
  height: 10px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) inset;
  position: absolute;
  right: -1rem;
  bottom: -10px;
  z-index: 3;
  mix-blend-mode: multiply;
  transform: translateX(100vw);
  animation: headNavShadow 0.3s ease forwards;
  opacity: 1;
}
*/

@keyframes headNavShadow{
	100% { transform: translateX(0);}
}


/** headNavInner *********/
#headNav .headNavInner{
  display: block;
  width: 100dvw;
  height: calc(100svh - var(--height-header) - var(--height-ticker-view));
  padding: 2rem 0 0;
  border-top: 1px solid #ebebeb;
  background: #FFFFFF;
  opacity: 0;
  overflow-y: auto;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: calc(var(--height-header) + var(--height-ticker-view));
  left: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(100vw,0);
  backface-visibility: hidden;
}
#header.fixed #headNav .headNavInner{
  height: calc(100svh - 6rem);
  top: 6rem;
}

#headNav > .headNavInner::after{
  content: '';
  display: block;
  height: 6rem;
}

#headNav.open > .headNavInner{
  transform: translate(0,0);
  opacity: 1;
  z-index: 1;
  pointer-events: inherit;
}



/** headTopNav **************/
#headNav .headTopNav{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 0 1rem;
}


/* headUtilityNav  **/
#headNav ul.headUtilityNav{
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0 1rem;
  width: 100%;
}

#headNav ul.headUtilityNav > li{
  display: block;
  height: 8rem;
  width: calc((100% - 1rem * 3) / 4);
}

#headNav ul.headUtilityNav > li > a,
#headNav ul.headUtilityNav > li > span{
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 1rem;
  border: 1px solid #F7EDD2;
  background: #FFFCF0;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}


#headNav ul.headUtilityNav > li > a > figure,
#headNav ul.headUtilityNav > li > span > figure{
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.2rem;
}

#headNav ul.headUtilityNav > li > a > figure > img,
#headNav ul.headUtilityNav > li > span > figure > img{display: block; width: 100%; height: auto;}

#headNav ul.headUtilityNav > li > a > span,
#headNav ul.headUtilityNav > li > span > span{
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.025em;
  line-height: 1.5;
}


/* headCartBox  **/
#headNav .headCartBox{
  display: block;
  order: 1;
  width: 100%;
  margin-bottom: 0.8rem;
}

#headNav .headCartBox > a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 1rem;
  height: 6rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid #F7EDD2;
  background: #FFFCF0;
  text-decoration: none;
  transition: opacity .3s ease;
}


#headNav .headCartBox > a > figure{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #FA9900;
  border-radius: 50%;
}

#headNav .headCartBox > a > figure > img{
  display: block;
  width: 2.7rem;
  height: auto;
}

#headNav .headCartBox .headCartDetail{
  display: block;
}

#headNav .headCartBox .headCartDetail .userName{
  display: block;
  margin-bottom: 0.1rem;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.416666666666667;
  letter-spacing: 0;
}

#headNav .headCartBox .headCartDetail .total{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1em;
  font-size: 1.6rem;
  line-height: 1.375;
  letter-spacing: 0;
  white-space: nowrap;
}


/* headCartBox  **/
#headNav .headSerchBox{
  order: 3;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: 40rem;
  height: 5rem;
  padding: 1rem 1rem 1rem 5rem;
  margin-top: 3rem;
  background: #F8F8F8;
  border: 1px solid #E3E3E3;
  border-radius: 2.5rem;
  position: relative;
}

#headNav .headSerchBox::before{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  background: url("../img/common/icon_search.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 1rem;
  top: 1rem;
}

#headNav .headSerchBox input{
  display: block;
  border: none;
  background-color: inherit;
  width: calc(100% - 6rem - 0.1rem);
  font-size: 1.6rem;
  letter-spacing: 0.025em;
  line-height: 1.375;
}

#headNav .headSerchBox input:focus {
  outline: none;
}


#headNav .headSerchBox a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 100%;
  padding-top: 0.1rem;
  border-radius: 3rem;
  background: #43AC33;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.025em;
  transition: opacity .3s ease;
}


/** headUnderNav **************/
#headUnderNav{
  display: block;
  width: 100%;
  padding: 3rem 0 0;
}


/** headCategoryNav  ***********/
#headCategoryNav{
  display: block;
  height: 100%;
}

#headCategoryNav > p{
  display: block;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 500;
  color: #43AC33;
  text-align: left;
  line-height: 1;
  letter-spacing: 0;
}

#headCategoryNav ul.navLevel1{
  display: block;
  width: 100%;
  border-top: 1px solid #EBEBEB;
}


#headCategoryNav ul.navLevel1 > li{
  display: block;
  border-bottom: 1px solid #EBEBEB;
}

#headCategoryNav ul.navLevel1 > li > dl{
  display: block;
}

#headCategoryNav ul.navLevel1 > li > dl > dt{
  display: block;
  padding: 1.7rem 4.1rem 1.8rem 1rem;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.02em;
  line-height: 1.2;
  position: relative;
}

#headCategoryNav ul.navLevel1 > li > dl > dt::before,
#headCategoryNav ul.navLevel1 > li > dl > dt::after{
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: #42AC33;
  position: absolute;
  right: 1.6rem;
  top: calc(50% - 1px);
}

#headCategoryNav ul.navLevel1 > li > dl > dt::after{
  transform: rotate(90deg);
  opacity: 1;
  transition: transform .3s ease,opacity .3s ease;
}

#headCategoryNav ul.navLevel1 > li > dl > dt.open::after{transform: rotate(0);}


/* headChildCategory *******************************/
#headCategoryNav .navLevel2{
  display: block;
  width: 100%;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .3s ease;
}
#headCategoryNav ul.navLevel1 > li > dl > dt.open + dd.navLevel2{
  height: auto;
  opacity: 1;
  background: var(--color-secondary);
}

#headCategoryNav .navLevel2 > .navInner{
  display: block;
  width: 100%;
  padding: 2rem 2rem;
}


#headCategoryNav .navLevel2 > .navInner > ul{
  display: block;
  width: 100%;
}


#headCategoryNav .navLevel2 > .navInner > ul > li{
  display: block;
  width: 100%;
}
#headCategoryNav .navLevel2 > .navInner > ul > li + li{margin-top: 1.6rem;}

#headCategoryNav .navLevel2 > .navInner > ul > li > .childeCategory{
  display: block;
}


#headCategoryNav .navLevel2 > .navInner > ul > li > a,
#headCategoryNav .navLevel2 > .navInner > ul > li > .childeCategory > a{
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  line-height: 1.4;
  text-align: left;
  color: #000000;
  text-decoration: none;
}



#headCategoryNav .navLevel2 > .navInner > ul > li > a > figure,
#headCategoryNav .navLevel2 > .navInner > ul > li > .childeCategory > a > figure{
  display: none;
}

#headCategoryNav .navLevel2 > .navInner > ul > li > .childeCategory + ul{
  display: none;
}



/** headContentsNav,headGuideNav  ***********/
#headContentsNav,
#headGuideNav{
  display: block;
  padding-top: 3rem;
}

#headContentsNav > p,
#headGuideNav > p{
  display: block;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 500;
  color: #43AC33;
  text-align: left;
  line-height: 1;
  letter-spacing: 0;
}

#headContentsNav > ul,
#headGuideNav > ul{
  display: block;
  border-top: 1px solid #EBEBEB;
}


#headContentsNav > ul > li,
#headGuideNav > ul > li{
  display: block;
  border-bottom: 1px solid #EBEBEB;
}

#headContentsNav > ul > li > a,
#headGuideNav > ul > li > a{
  display: block;
  padding: 1.7rem 4.1rem 1.8rem 1rem;
  /*font-family: var(--font-title);*/
  font-size: 1.6rem;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  background: url("../img/common/arrow_nav.svg") calc(100% - 2rem) center no-repeat;
  background-size: 0.8rem auto;
}




/**************************************
footer
**************************************/
#footer{
  display: block;
  width: 100%;
  margin-top: 7rem;
  position: relative;
}

#footer .footNavBox{
  display: block;
  width: 100%;
  padding: 3rem 1rem 3rem;
  background: #E9F5DC;
  position: relative;
}

#footer .footCategoryNav{
  display: block;
}

#footer .footCategoryNav > dl{
  display: block;
}

#footer .footCategoryNav > dl + dl{
  margin-top: 2rem;
}

#footer .footCategoryNav > dl > dt{
  display: block;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
  font-family: var(--font-title);
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 500;
  position: relative;
}

#footer .footCategoryNav > dl > dt::after{
  content: '';
  display: block;
  height: 2px;
  width: 4rem;
  background: #42AC35;
  position: absolute;
  left: 0;
  bottom: -1px;
}



#footer .footCategoryNav > dl > dt > span{
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0;
  top: 0.3rem;
}


#footer .footCategoryNav > dl > dt > span::before,
#footer .footCategoryNav > dl > dt > span::after{
  content: '';
  width: 100%;
  height: 2px;
  background: #43AC33;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
}

#footer .footCategoryNav > dl > dt > span::after{
  transform: rotate(90deg);
  transition: transform .3s ease,opacity .3s ease;
}


#footer .footCategoryNav > dl.open > dt > span::after{transform: rotate(0); opacity: 0;}


#footer .footCategoryNav > dl > dd{
  display: block;
  height: 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}

#footer .footCategoryNav > dl.open > dd{
  opacity: 1;
  padding: 2.5rem 0;
  height: auto;
}


#footer .footCategoryNav > dl > dd > ul{display: block;}
#footer .footCategoryNav > dl > dd > ul > li + li{
  margin-top: 1.6rem;
}

#footer .footCategoryNav > dl > dd > ul > li > a{
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  color: var(--color-text-default);
  transition: opacity .3s ease;
}


/* footNav ***/
#footer .footNav{
  display: block;
  width: 100%;
  padding-bottom: 6.6rem;
  position: relative;
}

#footer .footCategoryNav + .footNav{
  margin-top: 2.5rem;
}


/* footUtilityNav ***/
#footer .footUtilityNav{
  display: block;
  width: 100%;
}

#footer .footUtilityNav ul.footGuideNav{
  display: block;
}

#footer .footUtilityNav ul.footGuideNav > li{
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

#footer .footUtilityNav ul.footGuideNav > li > a{
  display: block;
  padding-left: 1.8rem;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.129411764705882;
  text-decoration: none;
  background: url(../img/common/arrow_nav.svg) left center no-repeat;
  background-size: 0.812rem auto;
  transition: opacity .3s ease;
}


#footer .footUtilityNav ul.footCompanyNav{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

#footer .footUtilityNav ul.footCompanyNav > li{
  display: block;
  width: 50%;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
#footer .footUtilityNav ul.footCompanyNav > li:nth-of-type(2n-1):nth-last-of-type(1){
  width: 100%;
}

#footer .footUtilityNav ul.footCompanyNav > li:nth-of-type(2n){
  border-left: 1px solid rgba(0,0,0,.1);
}


#footer .footUtilityNav ul.footCompanyNav > li > a{
  display: block;
  padding: 1.4rem 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.476923076923077;
  text-decoration: none;
  transition: opacity .3s ease;
}

#footer .footUtilityNav ul.footCompanyNav > li:nth-of-type(2n) > a{
  padding-left: 1rem;
}


#footer .footUtilityNav ul.footSnsBtns{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem 1.5rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#footer .footUtilityNav ul.footSnsBtns > li{
  width: 3.6rem;
}

#footer .footUtilityNav ul.footSnsBtns > li > a,
#footer .footUtilityNav ul.footSnsBtns > li > a img{
  display: block;
  width: 100%;
  height: auto;
}

#footer .footUtilityNav ul.footSnsBtns > li > a{
  transition: opacity .3s ease;
}


/* footUtilityNav ***/
#footer .footBannerList{
  display: block;
  width: 100%;
  margin-top: 3rem;
}

#footer .footBannerList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem 0.5rem;
}

#footer .footBannerList > ul > li{
  display: block;
  width: calc(50% - 0.25rem);
}

#footer .footBannerList > ul > li > a{
  display: block;
  border: 1px solid #EBEBEB;
  border-radius: 10px;
  overflow: hidden;
  transition: opacity .3s ease;
}

#footer .footBannerList > ul > li > a > img{
  display: block;
  width: 100%;
  height: auto;
}



/* footUtilityNav ***/
#footer .footUnderBox{
  display: block;
  padding: 2rem 1rem;
  width: 100%;
}

#footer .footUnderBox > .inner{
  display: block;
}

#footer .footUnderBox .footCaution{
  display: block;
  text-align: left;
}


#footer .footUnderBox .footCaution > li{
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

#footer .footUnderBox ul.footWappen{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 1.7rem;
  margin-top: 2rem;
}

#footer .footUnderBox ul.footWappen > li.jdma{width: 6.2rem;}
#footer .footUnderBox ul.footWappen > li.privacy{width: 3.9rem;}
#footer .footUnderBox ul.footWappen > li.iso9001{width: 2.8rem;}
#footer .footUnderBox ul.footWappen > li.iso22716{width: 8.6rem;}
#footer .footUnderBox ul.footWappen > li.cybertrust{width: 7.1rem;}


#footer .footUnderBox ul.footWappen > li a,
#footer .footUnderBox ul.footWappen > li img{display: block; width: 100%; height: auto;}



/* footUtilityNav ***/
#footer .footCopy{
  display: block;
  width: 100%;
  padding: 1rem 1rem;
  background: #43AC33;
}

#footer .footCopy > p{
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.476923076923077;
  color: #FFFFFF;
}



/**************************************
btnPageTop
**************************************/
#btnPageTop{
  display: block;
  width: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}

#btnPageTop > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #43AC33;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  overflow: hidden;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  transform: translate(0,6rem);
  transition: transform .6s ease,background .3s ease;
  pointer-events: none;
  opacity: 0;
}

#btnPageTop.view > a{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: inherit;
}

#btnPageTop.fixed > a{
  position: fixed;
}

#btnPageTop > a > img{
  display: block;
  width: 2.6rem;
  height: auto;
  transition: filter .3s ease;
}




/**************************************
footContactList
**************************************/
#footContactList{
  display: block;
  width: 100%;
  padding: 5rem 1rem 0;
  margin: 0 auto;
}

#footContactList > .inner{
  display: block;
  width: 100%;
  margin: 0 auto;
}
#footContactList > .inner > dl{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem 0;
  border: 2px solid #F2F2F2;
  border-radius: 20px;
  background: #FFFFFF;
}

#footContactList > .inner > dl + dl{margin-top: 1rem;}

#footContactList > .inner > dl.ecContact{background: #FFFCF0;}


#footContactList > .inner > dl > dt{
  display: block;
  margin-bottom: 0.7rem;
  text-align: center;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
}


#footContactList > .inner > dl > dd.tel{
  display: block;
  margin-bottom: 0.8rem;
}

#footContactList > .inner > dl > dd.tel > a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.8rem;
  font-family: var(--font-en);
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #43AC33;
}

#footContactList > .inner > dl > dd.tel > a::before{
  content: '';
  display: block;
  width: 2.0rem;
  height: 2.2rem;
  background: url("../img/common/icon_tel.svg") center center no-repeat;
  background-size: 100% auto;
}


#footContactList > .inner > dl > dd.reception{
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.025em;
}

#footContactList > .inner > dl > dd.reception > span{
  font-size: 1.2rem;
}


#footContactList > .caution{
  display: block;
  width: 100%;
  margin: 1.5rem auto 0;
  text-align: left;
  font-size: 1.3rem;
  letter-spacing: 0.025em;
  line-height: 1.5;
}

/**************************************
productsList
**************************************/
.itemList{display: block;}

.itemList.sliderList,
.itemList.spSliderList{
  /*overflow: hidden;*/
  position: relative;
}

.itemList.spSliderList{
  padding: 0 1rem;
  overflow: hidden;
}

.itemList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}


.itemList.spSliderList > ul.sliderWrapper,
.itemList.sliderList > ul.sliderWrapper{
  flex-wrap: nowrap;
}

.itemList > ul > li,
.itemList > ul > li.slider{
  display: block;
  width: calc((100% - 1.05rem) / 2);
  margin-right: 1.05rem;
}

.itemList > ul > li:nth-of-type(2n){margin-right: 0;}
.itemList > ul > li:nth-of-type(n + 3){margin-top: 3rem;}

.itemList.sliderList > ul > li:nth-of-type(2n),
.itemList.spSliderList > ul > li:nth-of-type(2n){margin-right: 1.05rem;}

.itemList.sliderList > ul > li:nth-of-type(n + 3),
.itemList.spSliderList > ul > li:nth-of-type(n + 3){margin-top: 0;}

.itemList.sliderList > ul > li:nth-last-of-type(1),
.itemList.spSliderList > ul > li:nth-last-of-type(1){margin-right: 0;}

.itemList.spSliderList.item6c > ul > li:nth-of-type(2n){margin-right: 1.5rem;}
.itemList.spSliderList.item6c > ul > li:nth-last-of-type(1){margin-right: 0;}


.itemList > .control{display: none;}

.itemList.spSliderList > .control{
  display: block;
}

.itemList ul.sliderPager{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  height: 0.9rem;
  margin: 1.8rem auto 0;
}

.itemList ul.sliderPager.swiper-pagination-lock{display: none;}

.itemList ul.sliderPager > li{
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #C9C9C9;
  cursor: pointer;
  transition: opacity 0.3s ease,background 0.3s ease;
}

.itemList ul.sliderPager > li.swiper-pagination-bullet-active,
.itemList ul.sliderPager > li.swiper-pagination-bullet-active{
  background: #43AC33;
  pointer-events: none;
}



/* listItem Detail ***********/
.itemList > ul > li > .outer{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  font-style: normal;
  position: relative;
}

.itemList > ul > li > a{
  text-decoration: none;
  transition: opacity .3s ease;
}


/***fig***/
.itemList > ul > li .fig{
  order: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}



.itemList > ul > li .fig .soldOut{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .3);
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.itemList > ul > li .fig .soldOut::before{
  content: '売り切れ';
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0.6rem 0 0;
  background: #707070;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.itemList > ul > li .fig > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 

/***itemIcons***/
.itemList > ul > li ul.itemIcons{
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--iconGap);
  width: 100%;
  margin-top: 1.25rem;
}


.itemList > ul > li ul.itemIcons > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-height: var(--iconHeight);
  padding: var(--iconPadding);
  border: var(--icon01Border);
  border-radius: var(--iconRadius);
  font-family: var(--iconFont);
  font-size: var(--iconFontSize);
  font-weight: var(--iconFontWeight);
  color: var(--icon01txt);
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
  order: 2;
}
.itemList > ul > li ul.itemIcons > li.icon01{ background: var(--icon01Bg); color: var(--icon01txtColor); border: var(--icon01Border);}
.itemList > ul > li ul.itemIcons > li.icon02{ background: var(--icon02Bg); color: var(--icon02txtColor); border: var(--icon02Border);}
.itemList > ul > li ul.itemIcons > li.icon03{ background: var(--icon03Bg); color: var(--icon03txtColor); border: var(--icon03Border);}
.itemList > ul > li ul.itemIcons > li.icon04{ background: var(--icon04Bg); color: var(--icon04txtColor); border: var(--icon04Border);}
.itemList > ul > li ul.itemIcons > li.icon05{ background: var(--icon05Bg); color: var(--icon05txtColor); border: var(--icon05Border);}
.itemList > ul > li ul.itemIcons > li.icon06{ background: var(--icon06Bg); color: var(--icon06txtColor); border: var(--icon06Border);}
.itemList > ul > li ul.itemIcons > li.icon07{ background: var(--icon07Bg); color: var(--icon07txtColor); border: var(--icon07Border);}
.itemList > ul > li ul.itemIcons > li.icon08{ background: var(--icon08Bg); color: var(--icon08txtColor); border: var(--icon08Border);}
.itemList > ul > li ul.itemIcons > li.icon09{ background: var(--icon09Bg); color: var(--icon09txtColor); border: var(--icon09Border);}
.itemList > ul > li ul.itemIcons > li.icon10{ background: var(--icon10Bg); color: var(--icon10txtColor); border: var(--icon10Border);}

.itemList > ul > li ul.itemIcons > li.icon01::before{ content: var(--icon01txt);}
.itemList > ul > li ul.itemIcons > li.icon02::before{ content: var(--icon02txt);}
.itemList > ul > li ul.itemIcons > li.icon03::before{ content: var(--icon03txt);}
.itemList > ul > li ul.itemIcons > li.icon04::before{ content: var(--icon04txt);}
.itemList > ul > li ul.itemIcons > li.icon05::before{ content: var(--icon05txt);}
.itemList > ul > li ul.itemIcons > li.icon06::before{ content: var(--icon06txt);}
.itemList > ul > li ul.itemIcons > li.icon07::before{ content: var(--icon07txt);}
.itemList > ul > li ul.itemIcons > li.icon08::before{ content: var(--icon08txt);}
.itemList > ul > li ul.itemIcons > li.icon09::before{ content: var(--icon09txt);}
.itemList > ul > li ul.itemIcons > li.icon10::before{ content: var(--icon10txt);}


  
/***name***/
.itemList > ul > li .name{
  order: 3;
  display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  margin-top: 1rem;
  font-size: 1.6rem;
  text-align: left;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  overflow: hidden;
}


/***price***/
.itemList > ul > li .price{
  order: 4;
  display: block;
  width: 100%;
  padding-top: 0.5rem;
  line-height: 1;
}

.itemList > ul > li .price .priceInner{
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 0.8rem;
  width: 100%;
}

.itemList > ul > li .price p{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1;
  order: 1;
}

.itemList > ul > li .price p em{
  font-size: 1.3rem;
  font-weight: 400;
  margin-left: 0.25em;
  letter-spacing: 0;
  font-style: normal;
}

.itemList > ul > li .price .rate{
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 2.1rem;
  padding: 0.1rem 0.5rem 0;
  border: 1px solid #B92E2E;
  border-radius: 3px;
  font-size: 1.3rem;
  color: #B92E2E;
  order: 4;
}
.itemList > ul > li .price .rate.active{
  display: flex;
}


.itemList > ul > li .price .subscRate,
.itemList > ul > li .price .subscRateFirst{
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 2.1rem;
  padding: 0.1rem 0.5rem 0;
  border: 1px solid #D95FCB;
  border-radius: 3px;
  font-size: 1.3rem;
  color: #D95FCB;
  order: 4;
}
.itemList > ul > li .price .subscRate.active,
.itemList > ul > li .price .subscRateFirst.active{
  display: flex;
}


/***sale***/
.itemList > ul > li .price .sale{
  gap: 0.3rem 1rem;
  width: 100%;
  color: #B92E2E;
  order: 1;
}

.itemList > ul > li .price .sale + .normal{
  width: auto;
  font-size: 1.6rem;
  color: #7C7C7C;
  position: relative;
  order: 2;
}
.itemList > ul > li .price .sale + .normal::before{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: #7C7C7C;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
}





/***subscription***/
.itemList > ul > li .price .subscription{width: 100%;}
.itemList > ul > li .price .subscription.first + .subscription{}

.itemList > ul > li .price .subscription{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem 0.6rem;
  width: auto;
  color: #D95FCB;
  order: 3;
}

.itemList > ul > li .price .subscription::before{
  content: '定期';
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 2.2rem;
  padding-top: 0.1rem;
  white-space: nowrap;
  border: 1px solid #D95FCB;
  background: #D95FCB;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.itemList > ul > li .price .subscription.first{order: 2; width: 100%;}
.itemList > ul > li .price .subscription.first::before{
  content: '初回';
}

.itemList > ul > li .price .subscription + .normal{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.6rem;
  order: 1;
  color: #7C7C7C;
  position: relative;
}
.itemList > ul > li .price .subscription + .normal::before{
  content: '通常';
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 2.2rem;
  padding-top: 0.1rem;
  white-space: nowrap;
  border: 1px solid #D6D6D6;
  background: #FFFFFF;
  border-radius: 3px;
  color: #000000;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.itemList > ul > li .price .subscription + .normal::after{
  content: '';
  display: block;
  height: 1px;
  width: calc(100% - 4.6rem);
  background: #7C7C7C;
  position: absolute;
  right: 0;
  top: calc(50% - 1px);
}


.itemList > ul > li .price .subscription + .sale + .normal{display: none;}


.itemList > ul > li .price .subscription + .sale{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.6rem;
  width: 100%;
  order: 1;
}

/*
.itemList > ul > li .price .subscription + .sale::before{
  content: 'セール';
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 2.2rem;
  padding-top: 0.1rem;
  white-space: nowrap;
  border: 1px solid #B92E2E;
  background: #FFFFFF;
  border-radius: 3px;
  color: #B92E2E;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1em;
  text-align: center;
}
*/
  

/* rankingList *******/
.itemList > ul > li .rank{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  background-color: #F7EDD2;
  padding-top: 0.1rem;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #000000;
  text-align: center;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.itemList > ul > li .rank > img{display: block; height: 100%; width: auto; margin: 0 auto;}

.itemList > ul > li:nth-of-type(1) .rank,
.itemList > ul > li:nth-of-type(2) .rank,
.itemList > ul > li:nth-of-type(3) .rank{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 3.586rem;
  padding-top: 0.3rem;
  padding-left: 0.1rem;
  border-radius: 0;
  border: none;
  background-color: inherit;
  color: #FFFFFF;
}

.itemList > ul > li:nth-of-type(1) .rank::after,
.itemList > ul > li:nth-of-type(2) .rank::after,
.itemList > ul > li:nth-of-type(3) .rank::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url("../img/common/icon_rank.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/icon_rank.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.itemList > ul > li:nth-of-type(1) .rank::after{background: #C7C078;}
.itemList > ul > li:nth-of-type(2) .rank::after{background: #8B8989;}
.itemList > ul > li:nth-of-type(3) .rank::after{background: #996633;}




/**************************************
.noItem
**************************************/
.noItem{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 20vh;
	margin: 0 auto 0;
  border: 3px solid #F2F2F2;
  border-radius: 10px;
	font-size: 2.0rem;
	text-align: center;
}

.noItem > p{
  font-size: 1.8rem;
}

/**************************************
.c-breadcrumb
**************************************/
.c-breadcrumb{
  padding: 2.6rem 0 2rem;
  margin-bottom: 0;
}

.c-breadcrumb > ol{
  padding: 0 1rem 1rem;
}

.c-breadcrumb > ol > li{font-size: 1.1rem;}

.c-breadcrumb > ol > li:not(:last-of-type)::after {
    height: 1rem;
    aspect-ratio: 6 / 10;
    margin: -0.1rem 0.9rem 0;
}

.c-breadcrumb__text{
  font-size: 1.1rem;
  color: #333333;
  white-space: nowrap;
}

.global-contents > .c-breadcrumb > ol > li:nth-last-of-type(1) .c-breadcrumb__text{
  opacity: .5;
}

/**************************************
.pagerBox
**************************************/
.pagerBox{
  margin-top: 5rem;
}
.pagerBox > .cnt{display: none;}

.listPager{
  display: block;
  width: 100%;
}

.listPager > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 1rem 0.5rem;
}

.listPager >  ul > li{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  min-height: 3rem;
  min-width: 3rem;
  font-family: var(--font-en);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  color: #000000;
  text-align: center;
  position: relative;
}

.listPager >  ul > li.ellipsis{align-items: flex-end; min-width: 2rem;}

.listPager >  ul > li > a{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  text-decoration: none;
  height: 100%;
  font-size: 1.7rem;
  border-radius: 50%;
  color: #000000;
}

.listPager >  ul > li > span{
  display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #43AC33;
  color: #FFFFFF;
  font-weight: 700;
  margin: 0 -
}

.listPager >  ul > li.prev,
.listPager >  ul > li.next{
  min-width: 2rem;
}

.listPager >  ul > li.prev > a{
  content: '';
  display: block;
  width: 2rem;
  height: 3rem;
  border-radius: 50%;
  background: url("../img/common/arrow_left.svg") left center no-repeat;
  background-size: 1.2rem auto;
  transition: opacity 0.3s ease;
}
.listPager >  ul > li.prev > a:hover{opacity: .6;}

.listPager >  ul > li.next > a{
  content: '';
  display: block;
  width: 2rem;
  height: 3rem;
  border-radius: 50%;
  background: url("../img/common/arrow_right.svg") right center no-repeat;
  background-size: 1.2rem auto;
  transition: opacity 0.3s ease;
}
.listPager >  ul > li.next > a:hover{opacity: .6;}

.listPager >  ul > li.prev > span,
.listPager >  ul > li.next > span{display: none;}


/**************************************
bottomHistoryItems
**************************************/
.bottomHistoryItems{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 0;
  overflow: hidden;
}


.recoTTL{
  display: block;
  padding: 0 1rem;
  margin-bottom: 2rem;
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.454545454545455;
  letter-spacing: 0.05em;
  color: #2B100F;
}



/**************************************
refineSearchBox
**************************************/
#refineSearchBox{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0 0 0;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  pointer-events: none;
  /*
  transition: opacity 0.3s ease;
  */
  transform: translate(100vw,0);
  backface-visibility: hidden;
}

#refineSearchBox.active{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: inherit;
}

#refineSearchBox.active #refineSearchBg{
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  background: rgba(102, 102, 102, 0);
  backdrop-filter: blur(0);
  opacity: 0;
  animation: blur-anim 0.3s ease forwards;
  z-index: -1;
}

@keyframes blur-anim {
	100% { backdrop-filter: blur(5px); background-color:  rgba(102, 102, 102, 0.6); opacity: 1;}
}


#refineSearchBox .refineTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: calc(100% - 3rem);
  height: 5.1rem;
  padding: 0 7.7rem;
  border-radius: 10px 10px 0 0;
  background: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  font-family: var(--font-title);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: 500;
  color: #2B100F;
  position: relative;
}


#refineSearchBox .refineTTL > .refineClose{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.7rem;
  font-family: var(--font-main);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #43AC33;
  position: absolute;
  right: 1.5rem;
  top: 1.9rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#refineSearchBox .refineTTL > .refineClose::after{
  content: '';
  display: block;
  width: 1.0rem;
  height: 1.0rem;
  background: url("../img/common/icon_close.svg") center center no-repeat;
  background-size: 100% auto;
}



#refineSearchBox .refineSearchInner{
  display: block;
  width: calc(100% - 3rem);
  max-height: calc(90dvh - 5.1rem);
  background: #FFFFFF;
  padding: 1rem 1.5rem 2rem;
  border-radius: 0 0 10px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

#refineSearchBox .refineSearchInner::after{
  content: '';
  display: block;
  height: 0.5rem;
}


/**共通設定***/
#refineSearchBox .refineSearchInner > dl{
  display: block;
  margin: 0 auto;
  padding: 1rem 0;
}

#refineSearchBox .refineSearchInner > dl > dt{
  display: block;
  width: 100%;
  margin-bottom: 0.6rem;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.025em;
  line-height: 1;
  color: #000000;
}


#refineSearchBox .refineSearchInner > dl > dd{
  width: 100%;
}


#refineSearchBox .refineSearchInner > dl > dd select{
  display: block;
  width: 100%;
  height: 4.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 3rem 0 1.2rem;
  background: url("../img/common/arrow_down.svg") calc(100% - 1rem) center no-repeat #FFFFFF;
  background-size: 1.141rem;
  border: 1px solid #6E6E6E;
  border-radius: 4px;
  vertical-align: middle;
  line-height: calc(4.5rem - 2px);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #000000;
  text-align: left;
  outline: none;
  cursor: pointer;
}


#refineSearchBox .refineSearchInner > dl > dd input[type="text"]{
  display: block;
  height: 4.5rem;
  width: 100%;
  padding: 0 1.2rem 0;
  border: 1px solid #6E6E6E;
  border-radius: 4px;
  vertical-align: middle;
  line-height: calc(4.5rem - 2px);
  font-size: 1.5rem;
  text-align: left;
  cursor: pointer;
}

/*
#refineSearchBox .refineSearchInner > dl > dd input[type="number"]{
  display: block;
  height: var(--formHeight);
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 var(--formLeftPadding) 0 var(--formLeftPadding);
  background: var(--formBgColor);
  border: var(--formBorder);
  border-radius: var(--formBgRadius);
  vertical-align: middle;
  line-height: var(--formLineHeight);
  font-size: var(--formFontSize);
  color: var(--txtColor);
  text-align: left;
  cursor: pointer;
  outline-color: var(--txtColor);
}
#refineSearchBox .refineSearchInner > dl > dd input[type="number"]::-webkit-inner-spin-button,
#refineSearchBox .refineSearchInner > dl > dd input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance:textfield;
}
*/


#refineSearchBox .refineSearchInner > dl > dd .priceInputBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0;
}
#refineSearchBox .refineSearchInner > dl > dd .priceInputBox > .inputPrice{
  width: calc(50% - 2rem);
}
#refineSearchBox .refineSearchInner > dl > dd .priceInputBox > p{
  display: block;
  width: 4rem;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}


#refineSearchBox .refineSearchInner > dl > dd > ul{
  display: block;
  padding: 1.5rem;
  border: 1px solid #E3E3E3;
  border-radius: 4px;
}

#refineSearchBox .refineSearchInner > dl > dd > ul > li{
  display: block;
  width: 100%;
}
#refineSearchBox .refineSearchInner > dl > dd > ul > li + li{margin-top: 1.5rem;}

#refineSearchBox .refineSearchInner > dl > dd label{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.8rem;
  transition: opacity .3s ease;
}


#refineSearchBox .refineSearchInner > dl > dd label > input[type="radio"]{
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  appearance: none;
  -webkit-appearance: none;
  align-self: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-500);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
}


#refineSearchBox .refineSearchInner > dl > dd label > input[type="radio"]:checked::before {
  content: '';
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#refineSearchBox .refineSearchInner > dl > dd label > input[type="radio"] + span{
  display: block;
  width: calc(100% - 3.2rem);
  padding-top: 0.1rem;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  line-height: 1.375;
}


#refineSearchBox .refineSearchInner > dl > dd label > input[type="checkbox"]{
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  appearance: none;
  -webkit-appearance: none;
  align-self: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-500);
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
  transition: border .3s ease, background .3s ease;
}

#refineSearchBox .refineSearchInner > dl > dd label > input[type="checkbox"]:checked{
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
}

#refineSearchBox .refineSearchInner > dl > dd label > input[type="checkbox"]::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-image: url("../img/common/icon_check.svg");
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: 100%;
  -webkit-mask-image: url("../img/common/icon_check.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100%;
  background: #EBEBEB;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#refineSearchBox .refineSearchInner > dl > dd label > input[type="checkbox"]:checked::before{
  background: #FFFFFF;
}

#refineSearchBox .refineSearchInner > dl > dd label > input[type="checkbox"] + span{
  display: block;
  width: calc(100% - 3.2rem);
  padding-top: 0.1rem;
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  line-height: 1.375;
}


/** categories ****/
#refineSearchBox  dl.categories > dd{
  display: block;
}

#refineSearchBox  dl.categories > dd > select{
  width: 100%;
}

#refineSearchBox  dl.categories > dd > select:not(:nth-of-type(1)){margin-top: 0.8rem;}

#refineSearchBox  dl.categories > dd > select.selectCtegoryChild,
#refineSearchBox  dl.categories > dd > select.selectCtegoryChildChild,
#refineSearchBox  dl.categories > dd > select.selectCtegoryChildChildChild{display: none;}
#refineSearchBox  dl.categories > dd > select.selectCtegoryChild:not(.hidden).current,
#refineSearchBox  dl.categories > dd > select.selectCtegoryChildChild:not(.hidden).current,
#refineSearchBox  dl.categories > dd > select.selectCtegoryChildChildChild:not(.hidden).current{display: block;}
/*
#refineSearchBox  dl.categories > dd > select.selectCtegoryChild.lastChild{width: 100%;}
#refineSearchBox .refineSearchInner > dl > dd > select#selectCtegoryParent{width: 100%;}
*/

/** deliveType ****/
#refineSearchBox .deliveType{}



/* serchBottmBtn **/
#refineSearchBox .serchBottmBtn{
  display: block;
  width: 100%;
  padding: 1.5rem 0 0;
  /*
  height: 13rem;
  border-radius: 0 0 10px 10px;
  background: #ffffff;
  */
}

#refineSearchBox .serchBottmBtn > ul{
  display: block;
  width: 100%;
  margin: 0 auto;
}

#refineSearchBox .serchBottmBtn > ul > li + li{margin-top: 0.8rem;}


#refineSearchBox .serchBottmBtn > ul > li.btnClose{
  width: 100%;
}
#refineSearchBox .serchBottmBtn > ul > li.btnNext{
  width: 100%;
}


#refineSearchBox .serchBottmBtn > ul > li.btnNext > a{
  height: 4.5rem;
  padding: 0 1rem 0 1rem;
  border-radius: 2.25rem;
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  transition: opacity .3s ease;
}

#refineSearchBox .serchBottmBtn > ul > li.btnNext > a::before,
#refineSearchBox .serchBottmBtn > ul > li.btnNext > a::after{display: none;}


#refineSearchBox .serchBottmBtn > ul > li.btnClose > a,
#refineSearchBox .serchBottmBtn > ul > li.btnClose > span{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 4.5rem;
  background: #FFFFFF;
  border: 1px solid #2B100F;
  border-radius: 2.25rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  padding: 0 1rem 0;
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #2B100F;
  position: relative;
  transition: opacity .3s ease;
  cursor: pointer;
}

/**************************************
static
**************************************/
.guideImg{display: block;}
.guideImg img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

ul.guidePhotoList{
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 2rem;
}

ul.guidePhotoList > li{
  display: block;
  text-align: center;
}
ul.guidePhotoList > li figure,
ul.guidePhotoList > li img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

ul.guidePhotoList > li figure{margin-bottom: 0.5rem;}


/* ---------- medicine_system ---------- */

.medicine_system {
    overflow-x: auto;
}

.medicine_system table {
    border: #ddd 1px solid;
    margin: 0 0 30px;
    width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.medicine_system p {
    padding: 0;
}

.medicine_system th {
    font-weight: 700;
    white-space: nowrap;
}

.medicine_system thead th {
    background-color: #FFF6F2;
}

.medicine_system tbody th {
    background-color: #fafafa;
}

.medicine_system th,
.medicine_system td {
    border: #ddd 1px solid;
    padding: 10px 15px;
    vertical-align: middle;
}

.medicine_system td span {
    border: #333 1px solid;
    display: inline-block;
    padding: 0 10px;
    white-space: nowrap;
}

.form__section--item:has(.fixedPurchaseStatus_解約){display:none;}

/**************************************
loginCautionAdd
**************************************/
.login__content-container .loginCautionAdd{
  display: block;
  margin-top: -2rem;
}

.login__content-container .loginCautionAdd > p{
  color: var(--color-emphasis);
  letter-spacing: 0.05em;
  line-height: 1.85;
}

.login__content-container .loginCautionAdd > ul{
  display: block;
  margin-top: 1rem;
}

.login__content-container .loginCautionAdd > ul > li{
  display: block;
  padding-left: 1.1em;
  text-indent: -1.1em;
  font-size: 1.2rem;
  line-height: 1.5;
  /*color: var(--color-emphasis);*/
}

.login__content-container .loginCautionAdd > ul > li + li{margin-top: 0.5rem;}

.login__content-container .loginCautionAdd > ul > li > a{
  color: var(--color-textlink);
  font-size: 1.2rem;
}




/**************************************
orverRide
**************************************/
.pcView{display: none!important;}