﻿
/**************************************
formSetting
**************************************/
:root {
  --asideBgColor: #F7F7F7;
  --boxPadding : 3rem;
  --bottomBtnGap : 2rem;
  --bottomBtnWidth : 24rem;
  --btnWidth: 24rem;
}


/**************************************
input
**************************************/
select{
  height: var(--formHeight);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--selectPadding);
  background: var(--selectBg);
  border: var(--formBorder);
  border-radius: var(--formBgRadius);
  vertical-align: middle;
  line-height: var(--formLineHeight);
  font-size: var(--formFontSize);
  color: var(--txtColor);
  text-align: left;
  outline: none;
  cursor: pointer;
  outline-color: var(--txtColor);
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="email"]{
  display: block;
  width: 100%;
  height: var(--formHeight);
  box-sizing: border-box;
  padding: var(--formLeftPadding);
  background: var(--formBgColor);
  border: var(--formBorder);
  border-radius: var(--formBgRadius);
  font-size: var(--formFontSize);
  line-height: var(--formLineHeight);
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: var(--txtColor);
}

input:read-only{ pointer-events: none;}
input[type="submit"]:read-only,
input[type="radio"]:read-only,
input[type="checkbox"]:read-only{ pointer-events: auto;}

textarea{
  display: block;
  width: 100%;
  height: 25rem;
  box-sizing: border-box;
  padding: 1.8rem var(--formLeftPadding) 1.8rem var(--formLeftPadding);
  background: var(--formBgColor);
  border: var(--formBorder);
  border-radius: var(--formBgRadius);
  font-size: var(--formFontSize);
  line-height: 1.6;
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: var(--txtColor);
}

:placeholder-shown { color: var(--placefolderColor); font-size: var(--formFontSize);}
::-webkit-input-placeholder { color: var(--placefolderColor); font-size: var(--formFontSize);}
:-moz-placeholder { color: var(--placefolderColor); font-size: var(--formFontSize);}
::-moz-placeholder { color: var(--placefolderColor); font-size: var(--formFontSize);}
:-ms-input-placeholder { color: var(--placefolderColor); font-size: var(--formFontSize);}

input[type="radio"],
input[type="checkbox"]{vertical-align: middle;}

input[type="text"].error_input,
input[type="tel"].error_input,
input[type="number"].error_input,
input[type="password"].error_input,
input[type="email"].error_input,
select.error_input,
textarea.error_input{
  border-color: var(--errColor);
  outline-color: var(--errColor);
}

input[type="text"][disabled],
input[type="tel"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
select[disabled],
textarea[disabled]{
  background: var(--disableColor);
  border-color: var(--disableColor);
  outline-color: var(--disableColor);
  pointer-events: none;
}

select.error_input > option{background: var(--formBgColor);}


input[type=checkbox] {
  display: inline-block;
  width: 1.9rem;
  height: 1.9rem;
  vertical-align: middle;
  background-color: #FFFFFF;
  background-image: url(../img/system/icon_check.svg);
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #738994;
  cursor: pointer;
  background-size: 100%;
  transition: background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input[type=checkbox]:checked {
  background-color: #8e4b00;
  border-color: #8e4b00;
  background-image: url(../img/system/icon_check.svg);
}
input[type=checkbox]:disabled {
  border-color: var(--disableColor);
  background-color: var(--disableColor);
  cursor: default;
}


input[type=radio] {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #FFFFFF;
  border: 1px solid #738994;
  position: relative;
  cursor: pointer;
  transition: all .15s ease-in-out;
}
input[type=radio]:checked {
  border-color: #8e4b00;
  background-color: #FFFFFF;
}

input[type=radio]:checked:after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: .4rem;
  left: .4rem;
  width: .9rem;
  height: .9rem;
  background-color: #8e4b00;
  border-radius: 50%;
  transition: all .15s ease-in-out;
}

input[type=radio]:disabled {
  border-color: var(--disableColor);
  cursor: default;
}






/**************************************
button
**************************************/



/*snsBtnList*/
ul.snsLoginBtnList{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2rem 2rem;
}

ul.snsLoginBtnList > li{
  text-align: center;
}

ul.snsLoginBtnList > li > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1.5rem;
  height: 4.8rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-align: left;
  font-weight: 700;
  font-size: 1.6rem;
  color: #FFFFFF;
  transition-property: all;
  transition-duration: 500ms;
  transition-delay: 0;
}

ul.snsLoginBtnList > li > a > figure{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4rem;
}

ul.snsLoginBtnList > li > a > span{
  text-align: left;
}

ul.snsLoginBtnList > li img{display: block; width: 100%; height: auto;}

ul.snsLoginBtnList > li.facebook > a{background-color: #305097;}
ul.snsLoginBtnList > li.twitter > a{background-color: #1da1f2;}
ul.snsLoginBtnList > li.yahoo > a{background-color: #FF0020;}
ul.snsLoginBtnList > li.google > a{height: inherit;}
ul.snsLoginBtnList > li.google > a > img{display: block; width: 100%; height: auto;}
ul.snsLoginBtnList > li.line > a{background-color: #00c300; color: #FFFFFF;}
ul.snsLoginBtnList > li.line > a > span{color: #FFFFFF;}

ul.snsLoginBtnList > li > p{
	display: block;
	margin-top: 0.5rem;
	text-align: center;
	font-size: var(--fontSizeS);
	line-height: 2;
}


/**************************************
section
**************************************/
#userContentsOuter{
  display: block;
  width: 100%;
  max-width: var(--contentsOuterWidth);
  background-color: var(--mainBg-color);
  margin: 0 auto;
  position: relative;
}
#userContentsOuter::before {
  content: "";
  display: block;
  clear: both;
} 

#userContentsOuter::after {
  content: "";
  display: block;
  clear: both;
}

#userContentsSection{
	display: block;
  width: 100%;
  max-width: var(--contentsMiddleOuterWidth);
  margin: 0 auto;
  padding: 6rem var(--contentsPadding) 10rem;
	line-height: 1;
}


/*特殊***/
#orderContentsSection{
	display: block;
  width: 100%;
  max-width: var(--contentsOuterWidth);
  margin: 0 auto;
  background-color: var(--mainBg-color);
  padding: 6rem var(--contentsPadding) 10rem;
	line-height: 1;
}


#userContentsSection .mainTTL,
#orderContentsSection .mainTTL,
.userHeadTTL{
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--sub-color);
  text-align: center;
  width: 100%;
  margin-bottom: 2.6rem;
}

#userContentsSection .mainTTL::before,
#orderContentsSection .mainTTL::before,
.userHeadTTL::before,
#userContentsSection .mainTTL::after,
#orderContentsSection .mainTTL::after,
.userHeadTTL::after{
  display: none;
}

#userContentsSection .mainTTL > span,
#orderContentsSection .mainTTL > span,
.userHeadTTL > span{
  display: block;
  padding-top: 0.5rem;
  font-size: var(--fontSizeN);
  font-family: var(--contentsOtherFont);
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--txtSubColor);
}

#userContentsSection .mainTTL.border,
#orderContentsSection .mainTTL.border{
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--borderColorHeavy);
}

.userHeadTTL{
  padding-top: 3rem;
  margin-bottom: 6rem;
}


#userContentsSection .mainTTL.left,
#orderContentsSection .mainTTL.left{text-align: left;}

#userContentsSection .subTTL,
#orderContentsSection .subTTL{
  display: block;
  margin: 0 auto 4rem;
  padding-bottom: 2rem;
  max-width: var(--contentsOuterWidth);
  border-bottom: 1px solid var(--borderColorHeavy);
  font-family: var(--contentsTitleFont);
  font-size: var(--fontSizeLL);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  color: #2C2C2C;
}

#orderContentsSection .subTTL{
  font-size: var(--ttlFontSize);
  color: #2C2C2C;
}

#userContentsSection em,
#orderContentsSection em{
	font-style: normal;
}


#orderContentsSection .easyUserCaution{
	display: block;
	padding: 2rem;
	background-color: #F2F2F2;
	border: 2px solid #E3DFD6;
	text-align: center;
	color: #FF0000;
	font-size: 1.6rem;
	font-weight: 700;
}


/**************************************
bottomBtnArea
**************************************/
.bottomBtnArea{
  display: block;
  width: 100%;
  margin: 6rem auto 0;
}
.kiyakkuSection + .bottomBtnArea{margin-top: 3rem;}

.bottomBtnArea > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  gap: var(--bottomBtnGap);
}

.bottomBtnArea > ul > li:nth-of-type(1){
	order: 2;
	min-width: var(--bottomBtnWidth);
}
.bottomBtnArea > ul > li:nth-of-type(2){
	order: 1;
	width: var(--bottomBtnWidth);
}


.bottomBtnArea > ul > li.wide{width: 30rem;}

.bottomBtnArea > ul + ul{margin-top: 3rem;}


ul.otherPayBtnList{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  margin: 2rem auto 0;
}


/**************************************
Login
**************************************/
#userContentsSection .loginBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: var(--contentsSmallWidh);
  margin: 0 auto;
  padding: 0 0 0;
}

#userContentsSection .loginBox .ledeBox{margin-bottom: 2rem;}

#userContentsSection .loginBox > .loginFormSection{
  display: block;
  width: 49%;
  padding: 4rem 2rem;
  /*border: var(--borderSettingLight);*/
  background: #fdfaf5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

#userContentsSection .loginBox > .registMoveSection{
  display: block;
  width: 49%;
  padding: 4rem 2rem;
  /*border: var(--borderSettingLight);*/
  background: #fdfaf5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}


#userContentsSection .loginBox dl.loginInputBox{ display: block; padding: 0;}
#userContentsSection .loginBox dl.loginInputBox + dl.loginInputBox{margin-top: 1rem;}

#userContentsSection .loginBox dl.loginInputBox > dt{
  display: block;
  margin-bottom: 1rem;
  text-align: left;
  font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
  font-weight: 700;
}

#userContentsSection .loginBox dl.loginInputBox > dd{
	display: block;
	line-height: 1;
}
#userContentsSection .loginBox dl.loginInputBox > dd > input{
	display: block;
	width: 100%;
	max-width: 100%;
}
#userContentsSection .loginBox dl.loginInputBox > dd > .errMsg{padding-top: 0.5rem;}

#userContentsSection .loginBox dl.loginInputBox > dd.memoryPass{
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 1rem;
}

#userContentsSection .loginBox dl.loginInputBox > dd.memoryPass .memoryPssCheck{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

#userContentsSection .loginBox dl.loginInputBox > dd.memoryPass .memoryPssCheck:hover{
  opacity: .6;
}



#userContentsSection .loginBox dl.loginInputBox > dd.memoryPass > p{
  width: 100%;
  margin-top: 1rem;
  font-size: var(--fontSizeS);
}



#userContentsSection .loginBox .memoryPassOff{
	margin-top: 4rem;
	padding-top: 4rem;
	border-top: var(--borderSetting);
}


#userContentsSection .loginBox .memoryPassOff > p{}

#userContentsSection .loginBox .memoryPassOff > p.btnNext,
#userContentsSection .loginBox .memoryPassOff > p.btnBorder{
	max-width: 80%;
  margin: 0 auto;
}

#userContentsSection .loginBox .memoryPassOff > .formSubTTL{text-align: center;}

#userContentsSection .loginBox .btnNext{
	display: block;
  max-width:80%;
	margin: 2rem auto 0;
}

#userContentsSection .loginBox ul.registBtnList{
	display: block;
}

#userContentsSection .loginBox ul.registBtnList > li{
  display: block;
  padding-top: 0;
  max-width: 80%;
  margin: 0 auto;
}

#userContentsSection .loginBox ul.registBtnList > li + li{margin-top: 2rem;}


/** noRegist *********/
#userContentsSection .loginBox .noRegist{
	padding-top: 6rem;
}

/** snsLogin *********/
#userContentsSection .loginBox .snsLogin{
	padding-bottom: 6rem;
}


#userContentsSection .loginBox .snsLogin > p{
	font-size: var(--fontSizeN);
	text-align: center;
	margin-bottom: 2rem;
	line-height: 2;
}

#userContentsSection .loginBox .snsLogin ul.snsLoginBtnList{width: 80%; margin: 0 auto; padding-top: 1rem;}

#userContentsSection .loginBox .snsLogin ul.snsLoginBtnList > li{width: 100%; text-align: center;}

#userContentsSection .loginBox .snsLogin ul.snsLoginBtnList > li > a{ transition: opacity 0.3s ease;}

@media (hover: hover) {
  #userContentsSection .loginBox .snsLogin ul.snsLoginBtnList > li > a:hover{opacity: .6;}
}

/**************************************
stepFlow
**************************************/
.stepFlow{
  display: block;
  width: 100%;
  max-width: calc(100% - var(--contentsPadding));
  padding: 0 0;
  text-align: center;
  margin: 0 auto 6rem;
}


.stepFlow > ol{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  counter-reset: stepCnt;
  z-index: 1;
}

.stepFlow > ol::after{
  content: '';
  display: block;
  width: calc(100% - 6rem);
  height: 2px;
  margin: 0;
  background-color: #CCCCCC;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2rem;
  z-index: -1;
}

.stepFlow > ol > li{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  width: 100%;
  padding-right: 3rem;
  text-align: center;
  position: relative;
}

.stepFlow > ol > li:nth-last-of-type(1){padding-right: 0;}


.stepFlow > ol > li:nth-last-of-type(1){
  margin-right: 0;
}
.stepFlow > ol > li:nth-last-of-type(1)::after{
  display: none;
}

.stepFlow > ol > li::before{
  counter-increment: stepCnt;
  content: counter(stepCnt);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: var(--fontSizeL);
  font-weight: bold;
  color: #FFFFFF;
  background: #CCCCCC;
  border: 1px solid #CCCCCC;
}
.stepFlow > ol > li.current::before{
  color: #FFFFFF;
  border-color: #8e4b00;
  background-color: #8e4b00;
}

.stepFlow > ol > li > span{
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
  color: #CCCCCC;
}
.stepFlow > ol > li.current > span{
  color: #8e4b00;
}


/**************************************
text
**************************************/
.formTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--borderColor);
  font-size: var(--fontSizeLL);
  font-weight: 700;
  line-height: var(--lineHeightSmall);
  text-align: left;
  gap: 0 2rem;
  color: var(--text-color);
}

.formTTL > span{
	display: block;
	font-size: var(--fontSizeS);
	font-weight: 500;
}

.formTTL.taPcCenter{  
  justify-content: center;
  text-align: center;
}

.formSubTTL{
	display: block;
	width: 100%;
	font-size: var(--fontSizeL);
  font-weight: 700;
  margin-bottom: 2rem;
}
.formSubTTL.Attention{color: var(--errColor)}

.formSubTTL > span{
	font-size: var(--fontSizeN);
	font-weight: 500;
	padding-top: 1rem;
}


.ledeBox{
  display: block;
  width: 100%;
  margin: 0 auto 4rem;
  padding: 0;
  font-size: var(--fontSizeN);
  text-align: left;
  line-height: var(--lineHeightBig);
}
.ledeBox.taPcCenter{text-align: center;}

.formTable > .formSubTTL + .ledeBox{margin-bottom: 1rem;}

.ledeBox:not(.taPcCenter) p + p{margin-top: 1rem;}


.iconRequired{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding: 0.3rem 0.5rem 0.3rem;
  background: var(--cautionColor);
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}
.iconRequired::before{content: '必須';}

.ledeBox > p .iconRequired{margin-right: 0.5rem;}
.ledeBox p.fwBold{font-weight: 700;}


.cautionText{
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}



.formTable > dl + .cautionText{margin-top: 1rem;}


.formTable .confirmText{text-align: left;}

.ledeBox p a,
.formSubTTL a,
.cautionText > a{
	text-decoration: underline;
}


.errMsg{
  display: block;
  color: var(--errColor);
  font-size: var(--fontSizeS);
  line-height: var(--lineHeight);
  font-weight: 700;
}
.errMsg + .cautionText{margin-top: 2rem;}

.ledeBox .errMsg{font-size: var(--fontSizeN);}

.attention{
  display: block;
  max-width: var(--contentsMaxWidth);
  margin: 0 auto 1rem;
  color: var(--cautionColor);
  font-size: var(--fontSizeSS);
  font-weight: 700;
}

.compMsg{
  display: block;
  width: 100%;
  max-width: var(--contentsMaxWidth);
  padding: 0;
  margin: 0 auto 4rem;
  text-align: center;
  font-size: var(--fontSizeL);
  font-weight: 700;
}


.securityCodeImg{
	margin-top: 1.5rem;
	width: 100%;
	max-width: 48rem;
}
.securityCodeImg img{display: block; width: 100%; height: auto;}


/**************************************
formInnerSection
**************************************/
.formInnerSection{
	display: block;
	width: 100%;
  max-width: var(--contentsSmallWidh);
	margin: 0 auto;
  text-align: left;
}

.formInnerSection + .formInnerSection{
	padding-top: 8rem;
}


.formInnerSection.mb{margin-bottom: 4rem;}

.formInnerSection .formTable + .ledeBox{margin-top: 2rem;}


.formSection > .formInnerSection{
  padding: 4rem 4rem;
  background: #fdfaf5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}


.formSection > .formInnerSection + .formInnerSection{
  margin-top: 4rem;
}

.formInnerSection + .formSection,
.formSection + .formInnerSection{
	margin-top: 4rem;
}

/**************************************
formTable
**************************************/
.formTable{
  display: block;
  width: 100%;
  margin: 0 auto;
}

.formTable.addInput{
  margin: 1px auto 1px;
  padding: 1rem;
  background-color: #f8f6ec;
}

.formTable.addInput > dl:first-child{
  border-top: none;
  padding-top: 1rem;
}

.formTable.paymentSelect{margin-top: 3rem;}
.formTable + .formTable:not(.noMargin){margin-top: 1.5rem;}

.formTable > .ledeBox{margin-bottom: 3rem;}
.formTable > dl + .ledeBox{margin-top: 2rem; margin-bottom: 2rem;}

.formTable.socialLogin + .formTable{margin-top: 0;}


.formTable > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
	border-top: 1px dotted var(--borderColor);
	border-bottom: 1px dotted var(--borderColor);
  /*
  padding: 3rem 0;
  */
  padding: 2rem 0;
}
.formTable > dl + dl{border-top: none;}
.formTTL + .formTable > dl:nth-of-type(1){border-top: none; padding-top: 1rem;}


.formTable.noMargin > dl:nth-of-type(1){border-top: none;}
.formTable.noMargin > dl:nth-last-of-type(1){border-bottom: none; padding-bottom: 0;}

.formTable.giftItem + .formTable{margin-top: 0;}
.formTable.giftItem + .formTable > dl:nth-of-type(1){border-top: none;}



.formInnerSection > .formTable > dl:nth-of-type(1){border-top: none; padding-top: 1rem;}
.formInnerSection > .formTable > dl:nth-last-of-type(1){border-bottom: none; padding-bottom: 0;}

.formTable > dl > dt{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 0.5rem;
  width: 22rem;
  text-align: left;
  font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
  font-weight: 700;
}

.formTable > dl.required > dt::after{
  content: '必須';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding: 0.3rem 0.5rem 0.4rem;
  background: var(--cautionColor);
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}


.formTable > dl > dd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - 22rem - 1px);
  padding-left: 3rem;
  font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
  word-break: break-all;
}

.formTable .inputArea{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--formHeight);
}
.formTable .inputArea.inquiryTTLSelect{
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}


.formTable .inputArea input{max-width: 34rem;}
.formTable .inputArea select{display: inline; width: auto;}

.formTable .inputArea + .inputArea{margin-top: 1rem;}
.formTable .inputArea + .errMsg + .inputArea{margin-top: 2rem;}


.formTable .notes{font-size: var(--fontSizeS); line-height: var(--lineHeightSmall); text-align: left;}
.formTable .ex{font-size: var(--fontSizeS); line-height: var(--lineHeightSmall); margin-top: 1rem;}

.formTable .notes.caution{padding-left: 1em; text-indent: -1em; padding-top: 1rem;}


.formTable .inputArea > .notes{padding-left: 1rem; max-width: 52%;}
.formTable .inputArea + .notes{padding-top: 1rem;}
.formTable .notes + .notes{padding-top: 1rem;}
.formTable .notes + .inputArea{padding-top: 1rem;}
.formTable .errMsg + .notes{padding-top: 1rem;}


.formTable .inputArea + .errMsg{margin-top: 1rem; margin-bottom: -1rem;}
.formTable .searchAddr + .errMsg{margin-top: 1rem;}

.formTable .inputArea + .cautionText{padding-top: 1rem;}
.formTable .cautionText + .inputArea{margin-top: 1rem;}


.formTable .guideImg img{display: block; width: 100%; height: auto;}
.formTable .guideImg.securityCode img{display: block; width: 100%; max-width: 33rem; height: auto;}


.formTable .inputArea > .btnNext{min-width: 20rem;}
.formTable .inputArea > .btnNext > input[type="submit"]{background-image: none; height: 4rem;}
.formTable .inputArea > .btnNext.nowOrder > input[type="submit"]{height: 3rem; font-size: var(--fontSizeN);}

.formTable .inputArea > .btnNext.input{max-width: 24rem; height: 4rem;}
.formTable .inputArea > .btnNext.input::after{height: 4rem;}


/* name ***************************/
.formTable .inputArea > ul.nameInput{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.formTable .inputArea > ul.nameInput > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  max-width: 19rem;
}
.formTable .inputArea > ul.nameInput > li + li{margin-left: 1.5rem;}


/* radioList ***************************/

.formTable .radioList{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem 2rem;
}
.formTable .radioList > span{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem var(--radioBtnGap);
}



.formTable .radioList > span > label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-right: 2rem;
  gap: 0 var(--radioBtnGap);
  font-size: var(--formFontSize);
  line-height: var(--radioBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.formTable .radioList > span > label + br{display: none;}
.formTable .radioList > span > label + br + input + label{}

.formTable .radioList > span > label:nth-last-of-type(1){margin-right: 0;}

.formTable .radioList.oneLine > span > label{width: 100%; margin-right: 0;}
.formTable .radioList.oneLine > span > label:nth-of-type(n + 2){margin-top: 1.3rem;}






/* checkBox ***************************/
.formTable .checkBox{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem 0.5rem;
}


.formTable .checkBox > span{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 0.4rem;
}

.formTable .checkBox label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  margin-right: 2rem;
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}
.formTable .checkBox label:hover{opacity: .6;}


.formTable .inputArea + .checkBox{margin-top: 1rem;}


/* birth ***************************/
.formTable .inputArea.birth{}

.formTable .inputArea.birth > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.formTable .inputArea.birth > ul > li{
  width: 11.5rem;
  padding-left: 0.8rem;
}
.formTable .inputArea.birth > ul > li:nth-of-type(1){width: 12.5rem; padding-left: 0;}

.formTable .inputArea.birth > ul > li select{
  width: calc(100% - 2.8rem);
  margin-right: 0.6rem;
}

/* zipcode ***************************/
.formTable .inputArea.zipcode{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

/*
.formTable .inputArea.zipcode input:nth-of-type(1){
    width: 6rem;
    margin: 0 0.8rem 0 0;
}
.formTable .inputArea.zipcode input:nth-of-type(2){
    width: 8rem;
    margin: 0 0 0 0.8rem;
}
*/

.formTable .inputArea.zipcode input{max-width: 12rem;}

.formTable .inputArea.zipcode .searchAddr{margin-left: 2rem; width: 9rem;}

.formTable .inputArea.zipcode .searchAddr.btnNext > a,
.formTable .inputArea.zipcode .searchAddr.btnNext > span,
.formTable .inputArea.zipcode .searchAddr.btnNext > button{ height: 4rem; font-size: 1.4rem; max-width: 12rem;}


#search-result-layer{display: none;}


/* prefectures ***************************/
.formTable .inputArea.prefectures{}
.formTable .inputArea.prefectures select{ width: 12rem;}


/* telNum ***************************/
.formTable .inputArea.telNum{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

/*
.formTable .inputArea.telNum input{
    width: 8rem;
}

.formTable .inputArea.telNum input:nth-of-type(1){margin: 0 0.8rem 0 0;}
.formTable .inputArea.telNum input:nth-of-type(2){margin: 0 0.8rem;}
.formTable .inputArea.telNum input:nth-of-type(3){margin: 0 0 0 0.8rem;}
*/


/* intervalDays ***************************/
.formTable .inputArea.intervalDays{
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	white-space: nowrap;
}
.formTable .inputArea.intervalDays select{
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}
.formTable .inputArea.intervalDays select:nth-of-type(2n){margin-left: 0.5rem;}


.shippingDate{
  margin-bottom: 1rem;
	font-size: var(--fontSizeN);
  font-weight: 700;
}

/* intervalDays ***************************/
.formTable .inputArea.pointInput{
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	white-space: nowrap;
}
.formTable .inputArea.pointInput input{
    display: inline-block;
    width: 15rem;
    margin-right: 0.5rem;
}

.availablePoint{margin-bottom: 1rem;}
.availablePoint > em{font-weight: 700; font-size: var(--fontSizeN);}


/*passWord ***********************/
.formTable .inputArea.password input[type="submit"]{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 9rem;
  height: 4rem;
  margin-left: 2rem;
  background-color: #545454;
  border-radius: calc(var(--formHeight) / 2);
  padding: 0 1rem 0 1rem;
  font-family: var(--contentsOtherFont);
  font-weight: 400;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.formTable .inputArea.password input[type="submit"]:hover{opacity: .6;}


/**************************************
paymentSelctList
**************************************/
.paymentSelctList{display: block;}

.paymentSelctList .paymentSelect{
	display: block;
	padding: 1.5rem 2rem;
	border: 1px solid var(--borderColorLight);
	margin-bottom: 2rem;
  border-radius: 6px;
  background: #FFFFFF;
}
.paymentSelctList dl.paymentSelect:nth-last-child(1){margin-bottom: 0;}

.paymentSelctList dl.paymentSelect > dt{
	display: block;
}

.paymentSelctList dl.paymentSelect > dt > span{
	display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 0.5rem;
}

.paymentSelctList dl.paymentSelect > dt > span > label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--radioBtnGap);
  font-size: var(--formFontSize);
  line-height: var(--radioBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
  font-weight: 700;
}
.paymentSelctList dl.paymentSelect > dt > span > label:hover{opacity: .6;}





.paymentSelctList dl.paymentSelect > dd{
	font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
	text-align: left;
}

.paymentSelctList dl.paymentSelect > dd > p{
	padding-top: 1.5rem;
}

.paymentSelctList dl.paymentSelect > dd > .paymentInput{
	padding-top: 1.5rem;
}

.paymentSelctList dl.paymentSelect > dd .paymentText{
  display: block;
  padding: 1.5rem 1rem 0 3.2rem;
  font-size: var(--fontSizeS);
  line-height: var(--lineHeight);
  text-align: left;
}
.paymentSelctList dl.paymentSelect > dd .paymentText img{max-width: 100%;}
.paymentSelctList dl.paymentSelect > dd .paymentText strong{font-weight: 700;}
.paymentSelctList dl.paymentSelect > dd .paymentText > div{padding: 0 0 1.5rem;}
.paymentSelctList dl.paymentSelect > dd #AmazonPayCv2Button2{margin-top: 1.5rem;}
.paymentSelctList dl.paymentSelect > dd .paymentText > div.txtc a{display: inline-block;}


.paymentSelctList dl.paymentSelect dd .formTable{
  padding-top: 1rem;
}

.paymentSelctList dl.paymentSelect .formTable > dl{
	display: block;
  padding: 0 0 1rem;
  border-top: none;
	border-bottom: 1px solid var(--borderColorLight);
}
.paymentSelctList dl.paymentSelect .formTable > dl:nth-last-of-type(1){border-bottom: none; padding-bottom: 0;}

.paymentSelctList dl.paymentSelect .formTable > dl > dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #e7e3cf;
  font-size: var(--fontSizeS);
  font-weight: 700;
  color: #000000;
}

.paymentSelctList dl.paymentSelect .formTable > dl > dd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 1.5rem 1.5rem;
  font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
  word-break: break-all;
}

.paymentSelctList dl.paymentSelect .formTable + .formInnerSection{
  padding-top: 3rem;
}




/**************************************
kiyakkuSection
**************************************/
.kiyakkuSection{
  display: block;
  width: 100%;
  max-width: var(--contentsSmallWidh);
  margin: 3rem auto 0;
}

.kiyakkuSection + .kiyakkuSection{
	margin-top: 4rem;
}

.formSection + .kiyakkuSection{
	padding-top: 4rem;
}

.kiyakkuSection > .errMsg{margin-top: 1rem; font-weight: 700; text-align: center; font-size: 1.6rem;}

.kiyakkuSection .scrollBox{
    width: 100%;
    height: 30rem;
    overflow: hidden;
    border: 1px solid var(--borderColorLight);
}

.kiyakkuSection .scrollBox > .inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  padding: 3rem;
  text-align: left;
  background: #fdfaf5;
}

.kiyakkuSection .scrollBox > .inner h4{
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.kiyakkuSection .scrollBox > .inner h4:not(:first-child){
  padding-top: 3rem;
}

.kiyakkuSection .scrollBox > .inner p{
  font-size: 1.4rem;
  line-height: 1.6;
}
.kiyakkuSection .scrollBox > .inner p + p,
.kiyakkuSection .scrollBox > .inner ul + p{
  margin-top: 1em;
}

.kiyakkuSection .scrollBox > .inner ul{
  display: block;
  margin-top: 1rem;
}

.kiyakkuSection .scrollBox > .inner ul > li{
  font-size: 1.4rem;
  color: var(--text-color);
  line-height: 1.6;
}

.kiyakkuSection .scrollBox > .inner ul > li + li{
  margin-top: 0.5rem;
}


/* kiyakuOuterSection ***********/
.kiyakuOuterSection{
	display: block;
	width: 100%;
  max-width: var(--contentsSmallWidh);
	margin: 0 auto;
	font-size: var(--fontSizeS);
	line-height: 2;
}
.kiyakuOuterSection + .kiyakuOuterSection{padding-top: 6rem;}

.kiyakuOuterSection dl.signature{
  display: block;
  margin-bottom: 4rem;
  font-size: var(--fontSizeN);
  line-height: 2;
  text-align: left;
}
.kiyakuOuterSection dl.signature > dt{font-size: var(--fontSizeL); font-weight: 700;}


.kiyakuOuterSection .kiyakuTTL{
	font-size: var(--fontSizeL);
  padding-bottom: 1.5rem;
	margin-bottom: 2rem;
  border-bottom: 2px solid var(--borderColorLight);
	font-weight: 700;
}
.kiyakuOuterSection * + .kiyakuTTL{padding-top: 4rem;}


.kiyakuOuterSection .kiyakuSubTTL{
  font-size: var(--fontSizeL);
  background: #efefef;
  padding: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.kiyakuOuterSection .kiyakuSubTTL + p{padding-left: 1.5rem;}

.kiyakuOuterSection p{margin-bottom: 1rem;}
.kiyakuOuterSection p:nth-last-child(1){margin-bottom: 0;}

.kiyakuOuterSection dl.kiyakuIndex{
	display: block;
	padding-top: 2rem;
	margin-bottom: 3rem;
}
.kiyakuOuterSection dl.kiyakuIndex > dt{font-weight: 700;}

.kiyakuOuterSection .kiyakuInnerSection{display: block;}
.kiyakuOuterSection .kiyakuInnerSection + .kiyakuInnerSection{padding-top: 4rem;}
.kiyakuOuterSection p + .kiyakuInnerSection{padding-top: 3rem;}

.kiyakuOuterSection .kiyakuInInnerSection{display: block; padding-left: 1.5rem;}
.kiyakuOuterSection .kiyakuInInnerSection + .kiyakuInInnerSection{padding-top: 3rem;}
.kiyakuOuterSection .kiyakuInInnerSection > dl{
  display: block;
}
.kiyakuOuterSection .kiyakuInInnerSection > dl + dl{margin-top: 1rem;}
.kiyakuOuterSection .kiyakuInInnerSection > dl > dt{font-weight: 700;}


.kiyakuOuterSection .kiyakuInnerSection h5{
  font-size: var(--fontSizeN);
  font-weight: 700;
	margin-bottom: 1rem;
}

.kiyakuOuterSection .kiyakuInnerSection h6{
  font-size: var(--fontSizeN);
  font-weight: 700;
	margin-bottom: 1rem;
}


.kiyakuOuterSection ol.numList > li{
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.kiyakuOuterSection ol.buraList > li{
  display: block;
  padding-left: 3.5rem;
  position: relative;  
}
.kiyakuOuterSection ol.buraList > li > em{
  display: block;
  width: 4rem;
  text-align: center;
  position: absolute;
  left: -0.5em;
  top: 0;
}

.kiyakuOuterSection ol.dotList > li,
.kiyakuOuterSection ul.dotList > li{
    text-indent: -1em;
    padding-left: 1em;
}


.kiyakuOuterSection ol.dotList > li > ul,
.kiyakuOuterSection ul.dotList > li > ul{
  display: block;
  padding-left: 1em;
}

/* kiyakuOuterSection ***********/
.kiyakkuSection .kiyakuAgreeCheck{
  display: block;
  padding: 1.5rem;
	margin-top: 1rem;
	background-color: #F2F2F2;
  text-align: center;
}

.kiyakkuSection.easyRegist .kiyakuAgreeCheck > span{text-align: center; font-weight: 700;}

.kiyakkuSection.easyRegist .errMsg{text-align: center; margin-top: 2rem; font-size: var(--fontSizeN);}



.kiyakkuSection .kiyakuAgreeCheck label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}
.kiyakkuSection .kiyakuAgreeCheck label:hover{opacity: .6;}




/**************************************
aboutSecurity
**************************************/
.aboutSecurity{
	display: block;
	margin-bottom: 3rem;
	text-align: left;
}

.formSection + .aboutSecurity{margin-top: 4rem;}

.aboutSecurity > dl{}
.aboutSecurity > dl > dt{
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.aboutSecurity > dl > dd{font-size: 1.4rem; line-height: 1.6;}

.aboutSecurity > dl > dd + dd{margin-top: 0.5rem;}


.aboutSecurity > dl > dd.signature{text-align: right;}

.aboutSecurity > dl > dd > a{
	text-decoration: underline;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}
.aboutSecurity > dl > dd > a:hover{opacity: .6;}


/**************************************
imgTTL
**************************************/
.imgTTL{
	display: block;
	width: 100%;
	margin-bottom: 4rem;
}
.imgTTL > a{display: block; width: 100%;}

.imgTTL img{display: block; width: 100%; height: auto;}




/**************************************
dotCautionList
**************************************/
ul.dotCautionList{
	display: block;
	margin-bottom: 2rem;
	font-size: var(--fontSizeN);
	line-height: var(--lineHeight);
}
ul.dotCautionList:nth-last-child(1){margin-bottom: 0;}

ul.dotCautionList > li,
.dotCautionList > ul > li{
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}

.ledeBox > p + .dotCautionList{margin-top: 1rem;}




/**************************************
cart
**************************************/
.cartNoProduct{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20vh;
  margin: 40px auto 0;
  border: 4px solid var(--borderColor);
  border-radius: 8px;
  font-size: var(--fontSizeL);
  text-align: center;
}


.cartTopTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 3rem;
  padding: 0.8rem 1.5rem;
  background-color: #777;
  color: #fff;
}

.cartTopTTL .ttl{
	max-width: calc(100% - 22rem);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.cartTopTTL .nextBtnUpside{display: block; width: 20rem;}
.cartTopTTL .nextBtnUpside .btnNext{
	background: #FFFFFF;
	border-radius: 8px;
}
.cartTopTTL .nextBtnUpside .btnNext > a{
	height: 3rem;
	font-size: 1.4rem;
	box-shadow: none;
}

.sum.Upside{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
	padding: 3rem;
  margin-bottom: 2rem;
  background: #F7F7F7;
}

.sum.downside{
	display: block;
  max-width: 1120px;
  margin: 0 auto;
	padding: 3rem 0 3rem;
	border-bottom: 1px solid var(--borderColor);
}


.sum .upsideText{
	font-size: var(--fontSizeN);
	line-height: var(--lineHeight);
	text-align: left;
}

.sum dl.priceTotal{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  font-size: var(--fontSizeL);
  font-weight: 700;
  white-space: nowrap;
}

.sum dl.priceTotal > dt{
	margin-right: 2rem;
}
.sum dl.priceTotal > dd{ font-size: var(--fontSizeLL);}
.sum dl.priceTotal > dd > span{ font-size: var(--fontSizeL);}




/**fixedPurchaseOrderPriceList *********/
.fixedPurchaseOrderPriceList{
  display: block;
  width: 100%;
  margin: 2rem auto 0;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background-color: #FFFFFF;
  transition: opacity .3s ease;
  border: 1px solid var(--borderColorLight);
}

.fixedPurchaseOrderPriceList > dl{display: block;}

.fixedPurchaseOrderPriceList > dl > dt{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--borderColor);
  font-size: var(--fontSizeN);
  font-weight: 700;
  line-height: var(--lineHeightSmall);
  text-align: left;
  gap: 0 2rem;
}

.fixedPurchaseOrderPriceList > dl > dd.msg{
	font-size: var(--fontSizeS);
	text-align: left;
	line-height: var(--lineHeight);
	margin-bottom: 2rem;
}

.fixedPurchaseOrderPriceList > dl > dd.priceList{
	display: block;
  width: 100%;
}

.fixedPurchaseOrderPriceList .priceListTTL{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #e7e3cf;
  font-size: var(--fontSizeS);
  font-weight: 700;
  color: #000000;
}


.fixedPurchaseOrderPriceList .priceList .singleProduct{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 2rem;
  padding: 1rem 0;
  border-bottom: 1px dotted var(--borderColorLight);
}

.fixedPurchaseOrderPriceList .priceList .singleProduct > img{
  display: block;
  width: 6rem;
  height: auto;
}

.fixedPurchaseOrderPriceList .priceList .singleProduct > .text{
  display: block;
  width: calc(100% - 8rem);
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: left;
}


.fixedPurchaseOrderPriceList .priceList .shipping{
  margin-bottom: 2rem;
}

.fixedPurchaseOrderPriceList .priceList .shipping > dl{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f6ec;
  padding: 1rem 1rem;
  font-size: var(--fontSizeS);
  font-weight: 700;
}

.fixedPurchaseOrderPriceList .priceList .shipping > dl > dt::after{
  content: '：';
}


.fixedPurchaseOrderPriceList > dl > dd.priceList > dl{
	display: block;
  width: 100%;
  background: #FFFFFF;
}
.fixedPurchaseOrderPriceList > dl > dd.priceList > dl + dl{margin-top: 1rem;}

.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dt{
  width: 100%;
  padding: 1rem 2rem;
  font-size: var(--fontSizeN);
  line-height: 1.4;
	text-align: left;
}
.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd{display: block;}

.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 2rem;
  font-size: var(--fontSizeN);
  line-height: 1.4;
  border-top: 1px dotted var(--borderColor);
}
.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl > dt{
    display: block;
    max-width: 60%;
    text-align: left;
}
.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl > dd{
    display: block;
    max-width: 40%;
    text-align: right;
}
.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl > dd > em{
    font-size:  var(--fontSizeN);
}

.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl.result{
    padding: 1.5rem 2rem;
    font-size:  var(--fontSizeN);
    line-height: 1.4;
    font-weight: 700;
}

.fixedPurchaseOrderPriceList > dl > dd.priceList > dl > dd > dl.result > dd > em {
    font-size: var(--fontSizeL);
}


.fixedPurchaseOrderPriceList > dl > dd.totalPrice{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 2rem 0 0;
}
.fixedPurchaseOrderPriceList > dl > dd.totalPrice > p{
	display: block;
	font-size: var(--fontSizeN);
	text-align: center;
	margin-bottom: 1.5rem;
}
.fixedPurchaseOrderPriceList > dl > dd.totalPrice > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  font-size: var(--fontSizeN);
  font-weight: 700;
}

.fixedPurchaseOrderPriceList > dl > dd.totalPrice > dl > dt{
	margin-right: 2rem;
}
.fixedPurchaseOrderPriceList > dl > dd.totalPrice > dl > dd{
  font-size: 2rem;
}

.fixedPurchaseOrderPriceList > dl > dd.totalPrice > dl > dd > span{
	font-size: var(--fontSizeN);
}


.fixedPurchaseOrderPriceList > dl > dd.cautionList{
	display: block;
	margin-top: 1rem;
	padding-top: 2rem;
	border-top: 1px solid #CCCCCC;
	font-size: var(--fontSizeS);
}
.fixedPurchaseOrderPriceList > dl > dd.cautionList > ul{display: block;}
.fixedPurchaseOrderPriceList > dl > dd.cautionList > ul > li{
	display: block;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.4;
	text-align: left;
}
.fixedPurchaseOrderPriceList > dl > dd.cautionList > ul > li + li{margin-top: 0.5rem;}


/**cartPaymentCaution *********/
.cartPaymentCaution{
	margin-top: 2rem;
	font-size: var(--fontSizeS);
	text-align: right;
}


/**cartSection *********/
.cartSection{
  display: block;
  width: 100%;
  max-width: var(--contentsMiddleOuterWidth);
  margin: 0 auto;
  padding: 0 var(--contentsPadding) 0;
  line-height: 1;
}

.cartSection + .cartSection{padding-top: 6rem;}
.cartSection:nth-of-type(n + 2){padding-top: 6rem;}

.cartTTL{
  display: block;
  padding: 2rem 1.5rem;
  background: #e7e3cf;
  font-size: var(--fontSizeL);
  font-weight: 700;
  text-align: left;
}


.cartTTL.outer{
  display: block;
  padding: 2rem 0;
  background: none;
  border-bottom: 1px solid var(--borderColorHeavy);
  text-align: left;
  font-size: var(--fontSizeLL);
  font-weight: 700;
}

/**cartTable *********/
.cartTable{
  display: block;
width: 100%;
margin: 0 auto 2rem;
padding: 1.5rem 1.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
border-radius: 6px;
background-color: #fdfaf5;
transition: opacity .3s ease;
}


.cartTable.orderConfirm{}

.cartTable > .cartTableHead{
	display: block;
	padding: 1.5rem 0;
  border-bottom: 2px solid var(--borderColor);
}

.cartTable > .cartTableHead > ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
	padding-left: 10%;
	font-size:var(--fontSizeS);
	font-weight: 700;
	line-height: 1;
}
.cartTable > .cartTableHead > ul > li.name{
  width: 33.33333333333333%;
  padding-left: 2rem;
  text-align: left;
}
.cartTable > .cartTableHead > ul > li.price{
  width: 23.33333333333333%;
  padding: 0 1.5rem;
  text-align: center;
}
.cartTable > .cartTableHead > ul > li.quantity{
  width: 11.11111111111111%;
  margin-left: 1.111111111111111%;
  text-align: center;
}

.cartTable > .cartTableHead > ul > li.subTotal{
  width: 23.33333333333333%;
  padding: 0 1.5rem;
  text-align: center;
}

.cartTable > .cartTableHead > ul > li.itemSelect{
  width: 23.33333333333333%;
  padding: 0 1.5rem;
  text-align: center;
}

.cartTable > ul{
	display: block;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.cartTable > ul > li{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 0;
  border-bottom: 1px dotted var(--borderColorLight);
  position: relative;
}


.cartTable > ul > li.setPromotionItems{padding: 0; border: none;}

.cartTable > ul.setPromotion{
  border-top: none;
  position: relative;
  border-bottom: 1px solid var(--borderColorLight);
}

.cartTable > ul.setPromotion > li{
    width: 100%;
    border-bottom: none;
}

.cartTable > ul.setPromotion > li + li{
    border-top: 1px dotted var(--borderColorLight);
}

.cartTable > ul.setPromotion > li.setTotal{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: calc(21% - 3rem);
	height: calc(100% - 3.2rem);
	border: none;
  padding: 0.5rem;
	background-color: #f8f6ec;
	position: absolute;
	left: calc(72% + 1.5rem);
	top: 1.6rem;
}

.cartTable > ul.setPromotion > li.setTotal > dl{
	display: block;
}
.cartTable > ul.setPromotion > li.setTotal > dl > dt{
  display: block;
  font-size: var(--fontSizeSS);
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  color: #FF0000;
}
.cartTable > ul.setPromotion > li.setTotal > dl > dd{
  display: block;
  font-size: var(--fontSizeS);
  text-align: center;
}
.cartTable > ul.setPromotion > li.setTotal > dl > dd > p.slash{display: inline-block; position: relative; margin-bottom: 0.5rem; font-size: 1.4rem;}
.cartTable > ul.setPromotion > li.setTotal > dl > dd > p.slash::after{
  content: '';
  height: 1px;
  width: 100%;
  background: #222222;
  position: absolute;
  left: 0;
  top: 50%;
}
.cartTable > ul.setPromotion > li.setTotal > dl > dd > p > em{font-weight: 700; font-size: var(--fontSizeL); }
.cartTable > ul.setPromotion > li.setTotal > dl > dd > p.slash > em{font-weight: 700; font-size: var(--fontSizeN); }

.cartTable > ul.setPromotion > li.setTotal > dl > dd > p.slash + p::before{content: '→'}

/** itemInfo **********/

.cartTable > ul > li .itemInfo{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
	width: 100%;
}


.cartTable > ul > li .itemInfo + .itemInfo{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    position: relative;
}
.cartTable > ul > li .itemInfo + .itemInfo::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #e7e7e7;
    position: absolute;
    left: 0;
    top: 0;
}

.cartTable > ul > li .itemInfo .namePrice{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
	width: 62%;
}

.cartTable > ul > li .itemInfo .namePrice > figure{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 16.12903225806452%;
	height: 100%;
  position: relative;
} 

.cartTable > ul > li .itemInfo .namePrice > figure a{display: block; width: 100%;}
.cartTable > ul > li .itemInfo .namePrice > figure img{display: block; width: 100%; height: auto;}

/*特殊対応**/
.cartTable > ul > li .itemInfo .namePrice > figure > .delivType{
  display: block;
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 0;
  right: 0;
}
.cartTable > ul > li .itemInfo .namePrice > figure > .delivType::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}
.cartTable > ul > li .itemInfo .namePrice > figure > .delivType.normal::before{
  background: url("../img/common/icon_deliv_type_normal.svg") center center no-repeat;
  background-size: 100% auto;
}
.cartTable > ul > li .itemInfo .namePrice > figure > .delivType.cool::before{
  background: url("../img/common/icon_deliv_type_cool.svg") center center no-repeat;
  background-size: 100% auto;
}
.cartTable > ul > li .itemInfo .namePrice > figure > .delivType.frozen::before{
  background: url("../img/common/icon_deliv_type_frozen.svg") center center no-repeat;
  background-size: 100% auto;
}
/*特殊対応ここまで**/


.cartTable > ul > li .itemInfo .namePrice > .name{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 48.38709677419355%;
	height: 100%;
	padding-left: 2rem;
	text-align: left;
}

.cartTable > ul > li .itemInfo .namePrice > .name a{color: var(--txtColor);}

.cartTable > ul > li .itemInfo .namePrice > .name > p{
  display: block;
  font-size: var(--fontSizeN);
  line-height: 1.6;
}
.cartTable > ul > li .itemInfo .namePrice > .name > p + p{margin-top: 0.5rem;}


.cartTable > ul > li .itemInfo .namePrice > .name > p.attention{
  display: block;
  margin: 0.5rem 0 0 0;
  color: var(--cautionColor);
  font-size: var(--fontSizeN);
  font-weight: 700;
  text-align: left;
}

.cartTable > ul > li .itemInfo .namePrice > .price{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 33.87096774193548%;
  height: 100%;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  text-align: center;
}

.cartTable > ul > li .itemInfo .namePrice > .price > p.slash{display: inline-block; position: relative; }
.cartTable > ul > li .itemInfo .namePrice > .price > p.slash::after{
  content: '';
  height: 1px;
  width: 100%;
  background: #222222;
  position: absolute;
  left: 0;
  top: 50%;
}
.cartTable > ul > li .itemInfo .namePrice > .price > p > em{font-size: 1.6rem;}

.cartTable > ul > li .itemInfo .namePrice > .price > p > .taxRate{
  display: block;
  margin-top: 0.8rem;
  font-size: 1.0rem;
  text-align: center;
}
.cartTable > ul > li .itemInfo .namePrice > .price > p > .taxRate::before{
  content: '消費税率：';
}


.cartTable > ul > li .itemInfo .quantityOperation{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
	width: 38%;
}

.cartTable > ul > li .itemInfo .quantityOperation > .quantity{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 26.31578947368421%;
  height: 100%;
}

.cartTable > ul > li .itemInfo .quantityOperation > .quantity > dl.quantitySelect{display: block;}
.cartTable > ul > li .itemInfo .quantityOperation > .quantity > dl.quantitySelect > dt{display: none;}
.cartTable > ul > li .itemInfo .quantityOperation > .quantity > dl.quantitySelect > dd{ font-size: 1.4rem;}
.cartTable > ul > li .itemInfo .quantityOperation > .quantity input{text-align: center; max-width: 6rem; margin: 0 auto;}


.cartTable > ul > li .itemInfo .quantityOperation > .subTotal{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 55.26315789473684%;
  height: 100%;
  padding: 0 1.5rem;
  font-size: 1.6rem;
  text-align: center;
}
.cartTable > ul > li .itemInfo .subTotal em{font-weight: bold; font-size: 1.6rem;}


.cartTable > ul > li .itemInfo .operation{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 18.42105263157895%;
  height: 100%;
  margin: 0 0 0 auto;
}

.cartTable > ul > li .operation .btnDelete{text-align: center; width: 100%;}

.cartTable > ul > li .operation .btnDelete > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 3rem;
  max-width: 28rem;
  height: 3rem;
  border-radius: 4px;
  background: url("../img/system/icon_trash.svg") center center no-repeat #CCCCCC;
  background-size: 1.2rem auto;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.cartTable > ul > li .operation .btnDelete > a:hover{opacity: .6;}



/** setItem **********/
.cartTable > ul > li .itemInfo .setItemWrap{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
	width: 62%;
}

.cartTable > ul > li .itemInfo .setItemWrap > .setItem{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
	width: 100%;
}

.cartTable > ul > li .itemInfo .setItemWrap > .setItem + .setItem{
	border-top: 1px dotted var(--borderColorLight);
}



/** noveltySelect **********/
.cartTable .noveltySelect{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0;
  border-bottom: 1px solid var(--borderColorLight);
  position: relative;
}

.cartTable .noveltySelect .title{
	display: block;
	width: 100%;
	margin-bottom: 1.5rem;
  font-size: var(--fontSizeL);
  font-weight: 700;
  line-height: var(--lineHeightSmall);
}
.cartTable .noveltySelect .title > span{font-size: var(--fontSizeSS);}

.cartTable .noveltySelect .lede{
	display: block;
	width: 100%;
  font-size: var(--fontSizeSS);
  line-height: var(--lineHeightSmall);
}

.cartTable .noveltySelect .lede .noveltyTTL{
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.cartTable .noveltySelect .lede .caution{font-size: var(--fontSizeN);}


.cartTable .noveltySelect .cartTable > ul > li{
	border: none;
	background-color: #F2F3EF;
	padding: 1rem;
	margin-top: 1rem;
}


.cartTable .noveltySelect .btnAdd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 15rem;
  margin: 0 0 0 auto;
}

.cartTable .noveltySelect .btnAdd > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: var(--btnColor);
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-family: var(--contentsOtherFont);
  font-weight: 400;
  font-size: var(--fontSizeS);
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}
.cartTable .noveltySelect .btnAdd > a:hover{opacity: .6;}



/**************************************
dvAnnounceFreeShipping
**************************************/
.dvAnnounceFreeShipping{
	display: block;
	padding-top: 4rem;
	margin-bottom: -1rem;
	text-align: center;
	font-size: var(--fontSizeL);
	line-height: 1;
}
.dvAnnounceFreeShipping .defPrice{
	color: var(--saleColor);
	font-size:  var(--fontSizeLL);
	font-weight: 700;
}
.dvAnnounceFreeShipping .freeShipping{
	
}

/**************************************
cartUnder
**************************************/
.cartUnder{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
	width: 100%;
	margin-top: 4rem;
}

/** couponPointSelect **************/
.cartUnder .couponPointSelect{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
	width: 59%;
}

.cartUnder .couponPointSelect > dl{
  display: block;
	width: 100%;
  flex-shrink: 1;
  padding: 2.5rem 1.5rem;
	border: 1px solid var(--borderColorLight);
}
.cartUnder .couponPointSelect > dl + dl{margin-left: 4.08163265306122%;}

.cartUnder .couponPointSelect > dl > dt{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--borderColor);
  font-size: var(--fontSizeL);
  font-weight: 700;
  line-height: var(--lineHeightSmall);
  text-align: left;
  letter-spacing: 0.1em;
  gap: 0 2rem;
}


.cartUnder .couponPointSelect > dl > dd{
  display: block;
  font-size: var(--fontSizeN);
  line-height: 1.6;
}



/** usePoint **********/
.cartUnder .usePoint{}

.cartUnder .usePoint .inputArea{
  display: block;
	padding: 1rem 0;
}

.cartUnder .usePoint .inputArea input{
  display: inline;
	max-width: calc(100% - 5rem);
	margin-right: 0.5rem;
}


.cartUnder .usePoint .inputArea .cbUseAllPointFlg{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem 0.4rem;
}

.cartUnder .usePoint .inputArea .cbUseAllPointFlg label{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: calc(var(--checkBtnSize) + 1rem);
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.cartUnder .usePoint .inputArea + .checkBox{margin-top: 0.5rem;}


/** couponSelect *************/
.cartUnder .couponSelect{}

.cartUnder .couponSelect .radioList{
  display: block;
}

.cartUnder .couponSelect .radioList > span{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem 0.4rem;
}


.cartUnder .couponSelect .radioList > span > label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--radioBtnGap);
  margin-right: 2rem;
  font-size: var(--formFontSize);
  line-height: var(--radioBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}


.cartUnder .couponSelect .inputArea{
  display: block;
}
.cartUnder .couponSelect * + .inputArea{
  margin-top: 2rem;
}

.cartUnder .couponSelect .inputArea select,
.cartUnder .couponSelect .inputArea input{width: 100%; max-width: 100%;}

.cartUnder .usePoint + .couponSelect select,
.cartUnder .couponSelect .inputArea input{max-width: 20rem; overflow: hidden;}

.cartUnder .couponSelect .couponBoxBtn{
  padding: 2rem 0 0 0;
	max-width: 24rem;
	margin: 0 auto;
}

.cartUnder .couponSelect .couponBoxBtn > a {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  background: #000000;
  border-radius: 2rem;
  padding: 0 1rem 0 1rem;
  border: 2px solid #000000;
  font-weight: 700;
  font-size: var(--fontSizeN);
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.cartUnder .couponSelect .couponBoxBtn > a:hover{opacity: .6;}


/** couponBoxModal **********/
.couponBoxModal{
  display: block;
  background: rgba(0,0,0,.6);
  width: 100vw;
  height: 100vh;
  padding: 0 5rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
}

.couponBoxModal .couponList{
  display: block;
  width: calc(100% - 10rem);
  height: 80%;
  max-height: 47rem;
  max-width: 90rem;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.couponBoxModal .couponList > .inner{
    display: block;
    overflow: auto;
    width: 100%;
    height: calc(100% - 8rem);
    position: relative;
}

.couponBoxModal .couponList > .inner > dl{
	padding: 2.5rem 4rem 2rem;
}
.couponBoxModal .couponList > .inner > dl > dt{
  display: block;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--borderColor);
  font-size: var(--fontSizeL);
  font-weight: 700;
  line-height: var(--lineHeightSmall);
  text-align: left;
}

.couponBoxModal .couponList > .inner > dl > dd{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.couponBoxModal .couponList > .inner > dl > dd > dl{
  display: block;
  width: 48%;
  margin-right: 4%;
  text-align: left;
  border: 1px solid var(--borderColorLight);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
}

.couponBoxModal .couponList > .inner > dl > dd > dl:nth-of-type(2n){ margin-right: 0;}
.couponBoxModal .couponList > .inner > dl > dd > dl:nth-of-type(n + 3){ margin-top: 2rem;}

.couponBoxModal .couponList > .inner > dl > dd > dl > dt{
    display: block;
    margin-bottom: 1rem;
    font-size: var(--fontSizeL);
    font-weight: 700;
}
.couponBoxModal .couponList > .inner > dl > dd > dl > dd{
	font-size: var(--fontSizeN);
	line-height: var(--lineHeight);
}

.couponBoxModal .couponList > .inner > dl > dd > dl > dd.btnNext{
	display: block;
	margin: 1rem auto 0;
}

.couponBoxModal .couponList > .inner > dl > dd > dl > dd.btnNext > a{
	height: 3rem;
	font-size: var(--fontSizeS);
	box-shadow: none;
	background-image: none;
}


.couponBoxModal .btnCouponBoxClose{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8rem;
  margin: auto 0 0 0;
  padding: 2rem 0 2rem;
  border-top: 1px solid var(--borderColor);
  border-radius: 0 0 1rem 1rem;
}

.couponBoxModal .btnCouponBoxClose > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  height: 4rem;
  border-radius: 2rem;
  border: 1px solid #000000;
  background: #FFFFFF;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #000000;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.couponBoxModal .btnCouponBoxClose > a:hover{opacity: .6;}


/** subTotalBox **************/
.subTotalBox{
  display: block;
  width: 39%;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background-color: #FFFFFF;
  transition: opacity .3s ease;
  border: 1px solid var(--borderColorLight);
}

.subTotalBox > .inner{
  width: 100%;
	background: #FFFFFF;
}

.subTotalBox > .inner > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
	padding: 1.5rem 0;
  font-size: var(--fontSizeN);
	line-height: var(--lineHeightSmall);
}
.subTotalBox > .inner > dl + dl{border-top: 1px dotted var(--borderColor);}

.subTotalBox > .inner > dl.total{
  padding: 1.5rem 0;
  font-size: var(--fontSizeL);
  line-height: var(--lineHeightSmall);
  font-weight: 700;
  border-top: 1px dotted var(--borderColor);
}

.subTotalBox > .inner > dl > dt{
  display: block;
	max-width: 60%;
  font-size: var(--fontSizeN);
	text-align: left;
}

.subTotalBox > .inner > dl > dd{
  display: block;
  max-width: 40%;
  text-align: right;
  font-size: var(--fontSizeL);
}
.subTotalBox > .inner > dl > dd > em{font-size: var(--fontSizeL);}


.subTotalBox > .inner > dl > dd.minus{
  color: var(--saleColor);
}

.subTotalBox > .inner > dl.total > dd{
    font-size: var(--fontSizeL);
}
.subTotalBox > .inner > dl.total > dd > em{font-size: var(--fontSizeLL);}





/**************************************
cartSelect
**************************************/
.cartTable.cartSelect > .cartTableHead > ul{
}

.cartTable.cartSelect > .cartTableHead > ul > li.name{
    width: 55.55555555555556%;
    padding-left: 2rem;
    text-align: left;
}
.cartTable.cartSelect > .cartTableHead > ul > li.price{
    width: 33.33333333333333%;
    padding: 0 1.5rem;
    text-align: center;
}

.cartTable.cartSelect > .cartTableHead > ul > li.itemSelect{
    width: 11.11111111111111%;
    padding: 0 1.5rem;
    text-align: center;
}


.cartTable.cartSelect > ul > li .itemInfo .namePrice{
	width: 100%;
}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > figure{
    width: 10%;
} 

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .name{
    width: 50%;
}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .price{
    width: 30%;
}


.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 10%;
}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 100%;
	height: 100%;
}
.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dt{display: none;}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
	width: 100%;
	height: 100%;
}
.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dd > span{
	display: flex;
  justify-content: center;
  align-items: center;
	width: 100%;
	height: 100%;
  position: relative;
}
.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dd > span > input[type=checkbox]{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dd label{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #222222;
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cartTable.cartSelect > ul > li .itemInfo .namePrice > .itemSlect > dl > dd label:hover{opacity: .6;}





/**************************************
orderFlowWrap
**************************************/
.paymentCartWrap{
	display: block;
}
.paymentCartWrap + .paymentCartWrap{padding-top: 8rem;}

#orderContentsSection .paymentCartWrap{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.orderFlowWrap{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
	width: 100%;
	padding: 3rem 0 0 0;
	position: relative;
}

.orderFlowWrap.giftOption{
	display: block;
	padding: 3rem 0 0 0;
}


.orderFlowWrap.payment{}
.orderFlowWrap.payment .ledeBox{margin-bottom: 1rem;}


.orderFlowWrap.confirm{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3rem 0 0 0;
  min-height: inherit;
}

.orderFlowWrap .userInfo{
	display: block;
	width: 50%;
}

.orderFlowWrap.giftOption .userInfo{
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	position: relative;
}
.orderFlowWrap.giftOption .userInfo + .userInfo{margin-top: 4rem;}


.orderFlowWrap .shippingInfoWrap{
	display: block;
	width: 50%;
	padding-left: 8rem;
}

.orderFlowWrap .shippingInfo{
	display: block;
	width: 100%;
}
.orderFlowWrap .shippingInfo + .shippingInfo{margin-top: 3rem;}


.orderFlowWrap .paymentInfo{
	display: block;
	width: 50%;
}

.orderFlowWrap .cartInfo{
	display: block;
	width: 50%;
  padding-left: 6rem;
}

.orderFlowWrap.confirm .cartInfo{float: none; order: 2; margin: 0 0 0 auto;}
.orderFlowWrap.confirm .cartInfo .cartSection{padding: 0;}

.orderFlowWrap .cartInfo .cartUnder{
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2rem;
}

.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect,
.orderFlowWrap .cartInfo .cartUnder > .subTotalBox{
	width: 100%;
}
.orderFlowWrap .cartInfo .cartUnder > .subTotalBox{margin-top: 1rem;}

.orderFlowWrap .cartInfo .cartUnder > ul.operation{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
	width: 100%;
  padding-top: 1.5rem;
}
.orderFlowWrap .cartInfo .cartUnder > ul.operation > li{
	width: 15rem;
}
.orderFlowWrap .cartInfo .cartUnder > ul.operation > li + li{margin-left: 1rem;}

.orderFlowWrap .cartInfo .cartUnder > ul.operation > li.btnWhite > a {
  height: 4rem;
  line-height: 3.8rem;
  box-shadow: none;
  font-size: 1.4rem;
}

.orderFlowWrap .orderInfo{
	display: block;
	width: 48%;
	order: 1;
}

.orderFlowWrap.confirm .orderInfo {
  display: block;
  width: 50%;
	order: 1;
}


.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect{
  display: block;
  padding-bottom: 2rem;
}

.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect > dl + dl{margin-left: 0;}
.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect > dl:not(:nth-last-child(1)){margin-bottom: 2rem;}

.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect .usePoint + .couponSelect select,
.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect .couponSelect .inputArea input{
  width: 100%;
  max-width: inherit;
}

.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect a.openUse{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 1rem;
  width: 100%;
  height: 3rem;
  background-color: var(--btnColor);
  border-radius: 1.5rem;
  padding: 0 1rem 0 1rem;
  font-family: var(--contentsOtherFont);
  font-weight: 400;
  font-size: var(--fontSizeS);
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  transition: opacity 0.3s ease;
}
.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect a.openUse:not(:nth-last-child(1)){margin-bottom: 2rem;}

.orderFlowWrap .cartInfo .cartUnder > .couponPointSelect a.openUse:hover{opacity: .6;}


/*userInfo */
.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl{align-items: center;}

.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl > dt{
  width: 15rem;
  padding-right: 1rem;
}

.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl > dd{
  width: calc(100% - 15rem);
}

/*shippingInfo */
.orderFlowWrap:not(.noRegist) .shippingInfo .formTable > dl,
.orderFlowWrap:not(.noRegist) .cartInfo .formTable > dl{
	display: block;
  padding: 0 0 1rem;
  border-top: none;
	border-bottom: 2px solid #F2F2F2;
}



.orderFlowWrap:not(.noRegist) .shippingInfo .formTable > dl > dt,
.orderFlowWrap:not(.noRegist) .cartInfo .formTable > dl > dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #F2F2F2;
  font-size: 1.4rem;
  font-weight: 700;
  color: #000000;
}

.orderFlowWrap:not(.noRegist) .shippingInfo .formTable > dl > dd,
.orderFlowWrap:not(.noRegist) .cartInfo .formTable > dl > dd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 1.5rem 1.5rem;
  font-size: 1.4rem;
  line-height: 1.6;
  word-break: break-all;
}

.orderFlowWrap:not(.noRegist) .shippingInfo .formTable + .formInnerSection{
  padding-top: 3rem;
}

/*userInfo */
.orderFlowWrap:not(.noRegist) .orderInfo .formTable > dl > dt{
  width: 15rem;
  padding-right: 2rem;
}
.orderFlowWrap:not(.noRegist) .orderInfo .formTable > dl > dd{
  width: calc(100% - 15rem);
}



/** complete ********************/
.orderFlowWrap.complete{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
	padding: 3rem 0 0 0;
	min-height: inherit;
}


.orderFlowWrap.complete .orderInfo{
	display: block;
	width: 48%;
	margin-right: 4%;
	order: 1;
}

.orderFlowWrap.complete .shippingInfo{
	display: block;
	width: 48%;
	order: 2;
}

.orderFlowWrap.complete .shippingInfo .formTable + .formSubTTL{margin-top: 3rem;}


.orderFlowWrap.complete .cartInfo{
	display: block;
	width: 100%;
	margin-top: 4rem;
  padding: 0;
	order: 3;
}
.orderFlowWrap.complete .cartInfo > .formSubTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 0;
  padding: 1rem 1.5rem 1rem 1.5rem;
  background-color: #F2F2F2;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
}

.orderFlowWrap.complete .confirmText table{
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 1.6;
}



.orderFlowWrap.complete .cartUnderResult{
	display: block;
	width: 100%;
	order: 4;
}


.cartUnderResult{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  margin-top: 4rem;
}

.cartUnderResult .pointSubTotal{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: space-between;
  justify-content: space-between;
  width: 48%;
}
.cartUnderResult .pointSubTotal > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
	height: 100%;
	width: 100%;
	padding: 2rem 2rem;
	border: 1px solid #E3DFD6;
	font-size: 1.6rem;
	font-weight: 700;
}
.cartUnderResult .pointSubTotal > dl + dl{margin-top: 3rem;}

.cartUnderResult .pointSubTotal > dl > dt{text-align: left;}
.cartUnderResult .pointSubTotal > dl > dt > span{font-size: 1.4rem; font-weight: 400;}
.cartUnderResult .pointSubTotal > dl > dd{text-align: right;}

.cartUnderResult .subTotalBox{
	width: 48%;
}


.cartTotalView{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 4rem;
	margin-top: 4rem;
	border-top: 1px solid #E3DFD6;
	border-bottom: 1px solid #E3DFD6;
}
.cartTotalView > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
	width: 100%;
	min-height: 6rem;
	padding: 2rem 2rem;
	border: 2px solid #E3DFD6;
	font-size: var(--fontSizeL);
	font-weight: 700;
}
.cartTotalView > dl + dl{margin-left: 4%;}

.cartTotalView > dl > dt{text-align: left;}
.cartTotalView > dl > dt > span{font-size: 1rem; font-weight: 400;}
.cartTotalView > dl > dd{text-align: right;}



/**************************************
orderInfoSection
**************************************/
.orderInfoSection{
	margin-bottom: 6rem;
  padding: 2rem 2rem;
  background: #fdfaf5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.orderInfoSection:nth-last-child(1){margin-bottom: 0;}

.orderInfoSection .formTable > dl:nth-of-type(1){
  padding-top: 0;
  border-top: none;
}

.orderInfoSection .operation{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
	width: 100%;
	padding-top: 1.5rem;
}

.orderInfoSection .operation .underCheckBtn{
	text-align: left;
	margin: 0;
	padding: 0;
}

.orderInfoSection .operation .btnChange{
	width: 15rem;
	text-align: left;
	margin: 0 0 0 auto;
	padding: 0;
}


.orderInfoSection .formTable > dl{padding: 1.5rem 0;}



/**************************************
orderConfirmUnderText
**************************************/
.orderConfirmUnderText{
	display: block;
	width: 80%;
	margin: 80px auto 0;
	border: 1px solid var(--borderColorLight);
	padding: 3rem;
	font-size: var(--fontSizeL);
	line-height: var(--lineHeight);
}

.orderConfirmUnderText > p{
	margin-bottom: 3rem;
	text-align: center;
}

.orderConfirmUnderText > dl{
	text-align: center;
	text-align: left;
}

.orderConfirmUnderText > dl > dt{font-weight: 700; margin-bottom: 0.5rem;}
.orderConfirmUnderText > dl > dd.caution{
	text-indent: -1em;
	padding-left: 1em;
}

.orderConfirmUnderText > dl > dd strong{font-weight: 700;}
.orderConfirmUnderText > dl > dd + dd{margin-top: 0.5rem;}




/**************************************
orderFlowCart
**************************************/
.orderFlowCartTTL{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #e7e3cf;
  font-size: var(--fontSizeN);
  font-weight: 700;
  color: #000000;
}

.orderFlowCartTTL.sub{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem 2rem 0;
  background: none;
  border-top: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
  text-align: left;
  font-size: var(--fontSizeN);
  font-weight: 700;
}

.orderFlowCartTTL.outer{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  padding: 0 2rem;
  background: #e7e3cf;
  border-bottom: none;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}


.orderFlowCartTTL > a{
	margin: 0 0 0 auto;
	font-size: var(--fontSizeS);
	font-weight: 400;
	text-decoration: underline;
	color: var(--txtColor);
  transition: opacity 0.2s ease;
}
.orderFlowCartTTL > a:hover{opacity: .6;}

.cartTableMini{
  display: block;
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 1.5rem 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background-color: #FFFFFF;
  transition: opacity .3s ease;
}

.orderFlowCartTTL + .cartTableMini{
  margin-top: 1rem;
}

.cartTableMini > ul{
	display: block;
}

.cartTableMini > ul > li:not(.setItems){
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 0;
  border-bottom: 2px solid #F2F2F2;
  position: relative;
}

.cartTableMini > ul > li > figure{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 8rem;
	margin-right: 2rem;
  position: relative;
}

.cartTableMini > ul > li > figure a{display: block; width: 100%; height: 100%; object-fit: cover;}

.cartTableMini > ul > li > figure img{
  display: block;
  width: 100%;
  height: auto;
}



.cartTableMini > ul > li > .name{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - 10rem);
  text-align: left;
}

.cartTableMini > ul > li > .name > p{
  display: block;
  font-size: var(--fontSizeN);
  line-height: var(--lineHeight);
}
.cartTableMini > ul > li > .name > p + p{margin-top: 0.5rem;}

.cartTableMini > ul > li > .name a{color: #000000;}

.cartTableMini > ul > li > .name > .quantityPrice{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
	width: 100%;
	padding-top: 1.5rem;
}

.cartTableMini > ul > li > .name > .quantityPrice > .quantity{
	font-size: var(--fontSizeN);
	padding-right: 2rem;
}
.cartTableMini > ul > li > .name > .quantityPrice > .price{
	font-size: var(--fontSizeN);
}
.cartTableMini > ul > li > .name > .quantityPrice > .price > em{font-size: 1.4rem; font-weight: 700;}


/** set *****/
.cartTableMini dl.setPromotion{
	display: block;
	margin-top: 0.1rem;
	border-top:  1px solid var(--borderColorLight);
	border-bottom: 1px solid var(--borderColorLight);
}

.cartTableMini dl.setPromotion > dt{
	display: block;
	padding: 1rem 1.5rem;
	font-size: var(--fontSizeN);
	line-height: 1;
	border-bottom: 1px dotted var(--borderColorLight);
}

.cartTableMini dl.setPromotion > dd.itemInfo{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 0;
  border-bottom: 1px dotted var(--borderColorLight);
  position: relative;
}

.cartTableMini dl.setPromotion > dd.itemInfo > figure{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 8rem;
  aspect-ratio: 1/1;
  margin-right: 2rem;
  position: relative;
}
.cartTableMini dl.setPromotion > dd.itemInfo a{
  display: block; width: 100%;
}

.cartTableMini dl.setPromotion > dd.itemInfo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}




.cartTableMini dl.setPromotion > dd.itemInfo > .name{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - 10rem);
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.6;
}

.cartTableMini dl.setPromotion > dd.itemInfo > .name > p{
    display: block;
    font-size: var(--fontSizeN);
    line-height: var(--lineHeight);
}
.cartTableMini dl.setPromotion > dd.itemInfo > .name > p + p{margin-top: 5px;}


.cartTableMini dl.setPromotion > dd.itemInfo > .name > .quantityPrice{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  padding-top: 1.5rem;
}

.cartTableMini dl.setPromotion > dd.itemInfo > .name > .quantityPrice > .quantity{
	font-size: var(--fontSizeN);
	padding-right: 2rem;
}
.cartTableMini dl.setPromotion > dd.itemInfo > .name > .quantityPrice > .price{
	font-size: var(--fontSizeN);
}
/*
.cartTableMini dl.setPromotion > dd.itemInfo > .name > .quantityPrice > .price > em{font-size: 1.6rem; font-weight: 700;}
*/

.cartTableMini dl.setPromotion > dd.setPrice{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
	font-size: var(--fontSizeN);
	padding: 1rem 1.5rem 1rem 0;
}

.cartTableMini dl.setPromotion > dd.setPrice > .slash{
	text-decoration: line-through;
}
.cartTableMini dl.setPromotion > dd.setPrice > p:not(.slash) > em{font-size: var(--fontSizeN); font-weight: 700;}
.cartTableMini dl.setPromotion > dd.setPrice > .slash + p::before{ content: '→'; display: inline-block; padding: 0 1rem;}

.cartTableMini dl.setPromotion > dd.setPrice > p.setPromotionTerm{
  margin: 0 auto 0 0;
}


/**************************************
underCheckBtn
**************************************/
.underCheckBtn{
	display: block;
	padding: 1.5rem 0 3rem;
}

.paymentCartWrap .ledeBox + .underCheckBtn{padding: 0 1rem 3rem;}


.underCheckBtn > span{
	display: block;
	text-align: right;
}
.underCheckBtn > span.left{text-align: left;}


.underCheckBtn > span > label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.underCheckBtn > span > label:hover{opacity: .6;}



/**************************************
copyCheckBtn
**************************************/
.copyCheckBtn{
	display: block;
}


.copyCheckBtn > span{
	display: block;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  border: 1px solid var(--borderColor);
}


.copyCheckBtn > span > label{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.copyCheckBtn > span > label:hover{opacity: .6;}





/**************************************
innerForm
**************************************/
.formTable .formInnerTable{
	display: block;
	width: 100%;
}

.formTable .formInnerTable > dl{display: block; padding-top: 1rem;}


.formTable .formInnerTable > dl > dt{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.formTable .formInnerTable > dl > dt + dt{margin-top: 1rem;}


.formTable .formInnerTable > dl.required > dt::after{
  content: '必須';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding: 0.3rem 0.5rem 0.4rem;
  background: var(--cautionColor);
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

.formTable .formInnerTable > dl > dd > .confirmText + .btnChange{width: 15rem;}


.formTable .innerForm > dl{display: block; padding-top: 1rem;}
.formTable .innerForm > dl > dt{
	font-weight: 700;
	margin-bottom: 0.2rem;
}


/* plusChangeBtn ***************************/
.formTable .plusBtn{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4rem;
}

.formTable .plusBtn .btnChange,
.formTable .plusBtn .btnCancel{width: 15rem; padding: 0;}


.formTable .plusBtn .btnChange > * + *,
.formTable .plusBtn .btnCancel > * + *{
	margin-top: 1rem;
}

.formTable .plusBtn + .plusBtn{margin-top: 1rem;}

.formTable p + .plusBtn{margin-top: 1rem;}

.formTable .plusBtn + .notes{margin-top: 1rem;}
.formTable .plusBtn + .errMsg{margin-top: 1rem;}

.formTable .plusBtn .notes{font-size: var(--fontSizeSS);}

#orderHistoryDetail .changeInputArea{
  padding: 2rem 0 3rem;
  background-color: #f8f6ec;
  border-top: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
}


#orderHistoryDetail .addrTTL + .changeInputArea{
  padding-top: 0;
}

#orderHistoryDetail .changeInputArea .changeInputArea{
  padding-top: 0;
  padding-bottom: 0;
}

/**************************************
orderCombineSelectlist
**************************************/
.orderCombineSelectlist{
  display: block;
  width: 100%;
  max-width: var(--contentsSmallWidh);
  margin: 0 auto;
}


.orderCombineSelectlist > ul{display: block;}
.orderCombineSelectlist > ul > li{
	display: block;
	width: 100%;
	text-align: left;
}

.orderCombineSelectlist > ul > li + li{
	margin-top: 2rem;
}

.orderCombineSelectlist > ul > li > label{
	display: block;
	width: 100%;
	border: 1px solid var(--borderColor);
	border-radius: 8px;
  overflow: hidden;
}


.orderCombineSelectlist > ul > li > label > input{display: none;}

.orderCombineSelectlist > ul > li > label > input + span{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--checkBtnGap);
  padding: 2rem 3rem;
  font-size: var(--formFontSize);
  line-height: var(--checkBtnLineHeight);
  position: relative;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.orderCombineSelectlist > ul > li > label:hover > input + span{opacity: .6;}

.orderCombineSelectlist > ul > li > label > input + span::before{
  content: '';
  display: block;
  width: var(--checkBtnSize);
  height: var(--checkBtnSize);
  border: var(--checkBtnBorder);
  border-radius: var(--checkBtnRadius);
  background: var(--checkBtnBg);
  transition: background 0.3s ease;
}

.orderCombineSelectlist > ul > li > label > input + span::after {
  content: '';
  display: block;
  width: var(--checkBtnSize);
  height: var(--checkBtnSize);
  background: var(--checkIconBg);
  background-size: var(--checkIconWidth) auto;
  position: absolute;
  left: 3rem;
  top: 2rem;
  opacity: 1;
}

.orderCombineSelectlist > ul > li > label > input:checked + span{background: #FFFFFF;}
.orderCombineSelectlist > ul > li > label:hover > input:checked  + span{opacity: 1; cursor: inherit;}
.orderCombineSelectlist > ul > li > label > input:checked + span::before{
  background: var(--checkBtnCheckedBg);
}



.orderCombineSelectlist > ul > li > label > .combineItemInfo{
	display: block;
  padding: 0;
	border-radius: 0 0 8px 8px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.orderCombineSelectlist > ul > li > label > input:checked + span + .combineItemInfo{
  height: auto;
	padding: 0 2rem 2rem 6.2rem;
  opacity: 1;
}

.orderCombineSelectlist > ul > li > label > .combineItemInfo .combineItemTTL{
  display: block;
	border-top: 1px solid var(--borderColorHeavy);
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: 700;
	font-size: var(--fontSizeN);
}

.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
	padding-top: 1.5rem;
	border-top: 1px solid var(--borderColorLight);
	font-size: var(--fontSizeS);
	line-height: var(--lineHeightSmall);
}
.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl + dl{
	margin-top: 1.5rem;
	border-top: 1px solid var(--borderColorLight);
}

.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dt{
	display: block;
	width: 12rem;
	font-weight: 700;
}
.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dd{
	display: block;
	width: calc(100% - 10rem);
}

.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dd > ul{
	display: block;
}
.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dd > ul > li{
	padding-left: 1.4em;
	text-indent: -1.4em;
}
.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dd > ul > li::before{content: '●'; margin-right: 0.4em;}

.orderCombineSelectlist > ul > li > label > .combineItemInfo > dl > dd > ul > li + li{margin-top: 8px;}


/**************************************
dvSocialLoginCooperation
**************************************/

.dvSocialLoginCooperation{display: block;}

.dvSocialLoginCooperation > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
	width: calc(100% + 2rem);
	margin-right: -2rem;
	margin-top: -1rem;
}

.dvSocialLoginCooperation > ul > li{
	display: block;
	width: 28rem;
	margin-right: 1rem;
	margin-top: 1rem;
}

.dvSocialLoginCooperation > ul > li > a{
	display: block;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  color: #FFFFFF;
  transition-property: all;
  transition-duration: 500ms;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.dvSocialLoginCooperation > ul > li > a:hover{opacity: .6;}

.dvSocialLoginCooperation > ul > li.facebook > a{background-color: #305097;}
.dvSocialLoginCooperation > ul > li.twitter > a{background-color: #1da1f2;}
.dvSocialLoginCooperation > ul > li.yahoo > a{background-color: #FF0020;}
.dvSocialLoginCooperation > ul > li.google > a{height: inherit;}
.dvSocialLoginCooperation > ul > li.google > a > img{display: block; width: 100%; height: auto;}
.dvSocialLoginCooperation > ul > li.line > a{background-color: #00c300;}

.dvSocialLoginCooperation > ul > li > p{
	display: block;
	margin-top: 0.5rem;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.4;
}


/**************************************
completeInfo
**************************************/
.completeInfo{
	display: block;
	width: 100%;
  max-width: 1120px;
	margin: 0 auto 4rem;
	text-align: center;
	font-size: var(--fontSizeN);
	line-height: var(--lineHeightBig);
}
.completeTitle{
  font-size: var(--fontSizeL);
  margin-bottom: 2rem;
  font-weight: 700;
}

.completeInfo > p + p{margin-top: 1rem;}


.completeInfo .orderResultBox{
  display: block;
  width: 100%;
  max-width: var(--contentsSmallWidh);
  margin: 0 auto 4rem;
  padding: 3rem;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: var(--fontSizeL);
  font-weight: 700;
  text-align: center;
}

.completeInfo .orderResultBox > p + p{margin-top: 0.5rem;}

.receptionInfo{
	display: block;
  max-width: var(--contentsSmallWidh);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  background: #fdfaf5;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	font-size: var(--fontSizeN);
	text-align: center;
	line-height: var(--lineHeightBig);
}


/**************************************
operation amazon
**************************************/
.operation.amazon{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  width: 100%;
  padding-top: 1.5rem;
	padding-bottom: 2rem;
}

.operation.amazon .btnBorder{
	width: 15rem;
}

.operation.amazon .btnBorder > a {
  height: 4rem;
  box-shadow: none;
  font-size: 1.4rem;
}




/**************************************
.cartCompleteWrap
**************************************/
.cartCompleteWrap + .cartCompleteWrap{margin-top: 8rem;}

/**************************************
accordionDD
**************************************/
.accordionDD{padding-top: 1rem;}



/**************************************
inquiryCaution
**************************************/
dl.inquiryCaution{
	display: block;
	padding: 4rem;
	background-color: #D6CFD3;
	text-align: center;
	margin-bottom: 4rem;
}

dl.inquiryCaution > dt{
	display: block;
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
}

dl.inquiryCaution > dd{
	display: block;
	font-size: 1.4rem;
}

dl.inquiryCaution > dd > a{
  text-decoration: underline;
  transition-property: all;
  transition-duration: 100ms;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

dl.inquiryCaution > dd > a:hover{
    color: #95711A;
}

/**************************************
AmazonPay
**************************************/

.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl.formInTerms{
  align-items: flex-start;
}
.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl.formInTerms > dt{
  padding-top: 1rem;  
}
.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl.formInTerms > dd .kiyakkuSection{
  margin-top: 1rem;
}

.orderFlowWrap:not(.noRegist) .userInfo .formTable > dl.formInTerms > dd .kiyakkuSection .forminKiyakuLede{
  margin-bottom: 1rem;
  font-size: var(--fontSizeS);
  font-weight: 700;
}


.formTable > dl > dt > .btnChange{
  margin: 0 0 0 auto;
}

.formTable > dl > dd .amazonPayCardInfo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 2rem;
  white-space: nowrap;
  font-weight: 700;
}
.formTable > dl > dd .amazonPayCardInfo > img{
  display: block;
  width: 4rem;
}

/**************************************
modal
**************************************/
#modal{
	display: none;
	position: fixed;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
}
#modal_content{
	width:500px;
	background:#fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	padding:20px;
	text-align: center;
	position:relative;
	animation:animatetop 0.4s;
}

#modal_content #authcodeinput p{
  text-align: center;
  margin: 10px 0;
}

#modal_content #authcodeinput p.input_code{
  margin: 20px 0;
}

#modal_content #telnuminput p{
	text-align: center;
	margin: 10px 0;
}

#modal_content #telnuminput p.input_code{
	margin: 20px 0;
}

#modal_content .btn_submit{
  margin-bottom: 10px;
}

#modal_content .btn_close_wrap{
  text-align: right;
}

#modal_content .title{
	text-align: center;
	margin: 10px 0;
	color: #ffffff;
	background: #000000;
	padding: 12px 17px;
}

#modal_content .modal_detail{
	margin: 5px 0;
	padding: 2px 10px;
}

#modal_content .modal_text{
	text-align: left;
}

#modal_content .toolTip {
	margin: 0px;
	padding: 20px;
	border-radius: 10px;
	top: 108px;
	left:125px;
	width: 285px;
	text-align: center;
	color: rgb(255, 255, 255);
	overflow: hidden;
	display: none;
	position: fixed;
	z-index: 9000000;
	-ms-zoom: 1;
	box-sizing: border-box;
	opacity: 0.9;
	color: #000;
	background-color: #ccc;
	-moz-border-radius: 5px;
}

@keyframes animatetop{
	from{top:-100px;opacity:0}
	to{top:0;opacity:1}
}

.authentication_success {
	color: #4db56a;
}

#modalRecommend {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(128, 128, 128, 0.75);
	z-index: 1;
}

#modalRecommend .modal-content {
	overflow-y: auto;
	position: absolute;
	width: 50%;
	height: 90%;
	background: #fff;
	top: 5%;
	left: 25%;
}

#modalRecommend div.btmbtn {
	margin: 40px 0 20px 0;
	border-top: none;
}

#modalRecommend .btn-success {
	margin-right: 20px;
}

#modalRecommend div.btmbtn.below ul {
	top: 0;
}

#modalRecommend div.btmbtn .btn-large {
	padding: 12px 17px;
}

.btn-recommend-close {
	padding: 5px 1.2rem;
	font-weight: 600;
	position: absolute;
	top: -40px;
	right: 0;
	background: #ccc;
	border-radius: 0 0 3px 3px;
}


/**************************************
goRegistBox
**************************************/
.goRegistBox{
  display: block;
  width: 100%;
  max-width: var(--contentsSmallWidh);
  margin: 3rem auto 0;
  padding: 3rem;
  border: 2px solid var(--cautionColor);
  font-weight: 700;
  font-size: var(--fontSizeL);
}

.goRegistBox .bottomBtnArea{margin-top: 2rem;}



/**************************************
shippingSelectWrap
**************************************/
.orderFlowCartTTL.outer.shipping{
  margin-top: 6rem;
}

.shippingSelectWrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 4rem;
}


.shippingSelectWrap .cartSection{
  order: 3;
  display: block;
  width: 50%;
  padding-left: 8rem;
}

.shippingSelectWrap .subTotalBox{width: 100%;}
.shippingSelectWrap .subTotalBox > .inner > dl.total.shipping{border-top: none;}
.shippingSelectWrap .subTotalBox > .inner > dl.total.shipping.notGift{display: none;}
.shippingSelectWrap .subTotalBox > .inner > dl.total.shipping.notGift + dl{border-top: none;}

.shippingSelectWrap .shippingSelect{
  order: 2;
  display: block;
  width: 50%;
}

.shippingSelectWrap .shippingSelect > .errMsg{margin-bottom: 0.5rem;}

.shippingSelectWrap .shippingSelect > .errMsg.invalidInputError{
  display: block;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

/*inputArea ***/
.shippingSelectWrap .inputArea + .confirmText{
  margin-top: 1rem;
  font-size: 1.3rem;
}
.shippingSelectWrap .inputArea + .confirmText > p + p{
  margin-top: 0.5rem;
}


/*shippingInfoTTL **/
.shippingSelectWrap .shippingSelect .shippingInfoTTL:not(.notGift){
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.shippingSelectWrap .shippingSelect .shippingInfoTTL:not(.notGift) .formSubTTL{padding: 0; margin: 0;}

.shippingSelectWrap .shippingSelect .shippingInfoTTL .btnNext{
  width: 24rem;
}

.shippingSelectWrap .shippingSelect .shippingInfoTTL .btnNext > a{
  height: 3.5rem;
  font-size: 1.4rem;
}

/*shippingLineTTLBox **/
.shippingSelectWrap .shippingLineTTLBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #F2F2F2;
  font-size: 1.4rem;
  font-weight: 700;
}

.shippingSelectWrap .shippingLineTTLBox > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 10rem;
  height: 3rem;
  border-radius: 1.5rem;
  background: #555555;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
}

.shippingSelectWrap .shippingLineTTLBox > a::before {
  content: '';
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  background: url(../img/system/icon_trash.svg) center center no-repeat;
  background-size: auto 50%;
}


/*shippingItemList */
.shippingSelectWrap .shippingItemList{}
.shippingSelectWrap .shippingItemList > ul{display: block;}

.shippingSelectWrap .shippingItemList > ul > li{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 1rem;
  border-bottom: 1px solid #F2F2F2;
}
.shippingSelectWrap .shippingItemList > ul > li > .img{
  display: block;
  width: 6rem;
}
.shippingSelectWrap .shippingItemList > ul > li > .img a,
.shippingSelectWrap .shippingItemList > ul > li > .img img{display: block; width: 100%; height: auto;}

.shippingSelectWrap .shippingItemList > ul > li > .text{
  display: block;
  width: calc(100% - 6rem - 24.4rem);
  padding: 0 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
}

.shippingSelectWrap .shippingItemList > ul > li > .text .name{font-weight: 700;}
.shippingSelectWrap .shippingItemList > ul > li > .text ul{margin-top: 0.5rem;}



.shippingSelectWrap .shippingItemList > ul > li > .quantityBox{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 14.4rem;
  gap: 0 0.2rem;
}
.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > input[type="text"],
.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > input[type="tel"],
.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > input[type="number"],
.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > input[type="password"],
.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > input[type="email"] {
  display: block;
  height: 4rem;
  width: 6rem;
  padding: 0;
  text-align: center;
  line-height: calc(4rem - 2px);
}

.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--formBgColor);
  border-radius: var(--formBgRadius);
  border: var(--formBorder);
  font-size: 1.6rem;
  line-height: 1;
}

.shippingSelectWrap .shippingItemList > ul > li > .quantityBox .quantityInput > a:nth-of-type(3){display: none;}

.shippingSelectWrap .shippingItemList > ul > li dl.price{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 10rem;
  font-size: 1.2rem;
  white-space: nowrap;
}

.shippingSelectWrap .shippingItemList > ul > li dl.price > dt{}
.shippingSelectWrap .shippingItemList > ul > li dl.price > dt::after{content: '：';}
.shippingSelectWrap .shippingItemList > ul > li dl.price > dd{font-weight: 700;}

/*shippingOneLine */
.shippingSelectWrap .shippingSelect .shippingOneLine + .shippingOneLine{
  margin-top: 4rem;
}



/*shippingInfo :not gift form */
.shippingSelectWrap .shippingSelect .shippingOneLine:not(.gift) .formTable > dl{
	display: block;
  padding: 0 0 1rem;
  border-top: none;
	border-bottom: 2px solid #F2F2F2;
}

.shippingSelectWrap .shippingSelect .shippingOneLine:not(.gift) .formTable > dl > dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  background-color: #F2F2F2;
  font-size: 1.4rem;
  font-weight: 700;
  color: #000000;
}

.shippingSelectWrap .shippingSelect .shippingOneLine:not(.gift) .formTable > dl > dd{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 1.5rem 1.5rem;
  font-size: 1.4rem;
  line-height: 1.6;
  word-break: break-all;
}

.shippingSelectWrap .shippingSelect .shippingOneLine:not(.gift) .formTable .formTable + .formInnerSection{
  padding-top: 3rem;
}



/*shippingInfo  gift form */
.shippingSelectWrap .shippingSelect .shippingOneLine .formTable + .formTable{margin: 0;}

.shippingSelectWrap .shippingSelect .shippingOneLine.gift .formTable > dl{
	padding: 1.5rem 1rem;
}

.shippingSelectWrap .shippingSelect .shippingOneLine.gift .formTable > dl > dt {
  width: 14rem;
  font-size: 1.4rem;
}

.shippingSelectWrap .shippingSelect .shippingOneLine.gift .formTable > dl > dd{
  width: calc(100% - 10rem);
  padding-left: 1.5rem;
}


.shippingSelectWrap .shippingSelect .shippingOneLine .formInnerSection{padding-top: 2rem;}


/**************************************
orverRide
**************************************/
.spView{display: none!important;}

#ctl00_ContentPlaceHolder1_cvPasswordConf{display: block; margin-top: 1rem;}

