@charset "utf-8";

.notice {
//display:none;
  padding:40px 0px 0px;
}

.box3 {/*ボタンが利かなくなる*/
//margin:0px 0px;
//padding:0px;

}
.box31 {
max-width:700px;
margin:0px auto;
padding:0px;

}
.box31 h3{
margin:30px 0px 10px 0px;
padding:10px 0px 10px 10px;
background: #cacaca;
border-radius:10px;
font-size:16px;
box-sizing: border-box; 
}
.navi,.sform{
display:none;   
}
.box3{
margin-top:60px;
}
input:focus {
 // border: 0px solid #ffffff;
 // outline: 0;
}
/*---------------------------------------------------------
cartFlow(Active)
----------------------------------------------------------*/
.cartFlow{/* 共通 */
  --circle-size: clamp(20px, 2vw, 0rem);
  --circle-size-non: clamp(20px, 2vw, 0rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
}
.cartFlow ol {/*全体*/
margin: 20px 0px 0px 0px;
padding:0px 0px;
}
.c-stepper {/* 横並びにする*/
  display: flex;
}

.c-stepper__item {/* 丸*/
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;

  &:before {/* 丸*/
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: #cfcfcf;
    margin: 0 auto 0.3rem;
   border:4px solid  black;
  }

  &:not(:last-child) {/* 間の横棒*/
    &:after {
      content: "";
      position: relative;
      top: calc(var(--circle-size) / 2);
      width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
      left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
      height: 2px;
      background-color: #a0a0a0;
      order: -1;
    }
  }
}

.c-stepper__title {/* メインの文字*/
  font-weight: bold;
  font-size: clamp(0.8rem, 1vw, 1.25rem);
  //margin-bottom: 0.5rem;
 padding:0px 0px;
}

.c-stepper__desc {/* サブ文字*/
  color: black;
  font-size: clamp(0.6rem, 0.7vw, 1rem);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  margin:-2px;
}

/*** Non-demo CSS ***/

.wrapper {
max-width: 500px;
  margin: 0px auto 0;
}

.cartFlow {
  //font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  //padding: 1rem;
}

*:before,
*:after {
  box-sizing: border-box;
}
/*---------------------------------------------------------
cartFlow(Disabled)
----------------------------------------------------------*/
.c-stepper__itemNon {/* いろいろ*/
  color: #a0a0a0;/* 文字（大）*/
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;

  &:before {/* 丸*/
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size-non);
    height: var(--circle-size-non);
    border-radius: 50%;
    background-color: #a0a0a0;
    margin: 0 auto 0.3rem;
   border:2px solid  white;
  }

  &:not(:last-child) {/* 間の横棒*/
    &:after {
      content: "";
      position: relative;
      top: calc(var(--circle-size) / 2);
      width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
      left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
      height: 2px;
      background-color: #a0a0a0;
      order: -1;
    }
  }
}

.c-stepper__itemNon .c-stepper__title {/* メインの文字*/

  font-weight: bold;
  font-size: clamp(0.8rem, 1vw, 1.25rem);
  //margin-bottom: 0.5rem;
 padding:0px 0px;
}

.c-stepper__itemNon .c-stepper__desc {/* サブ文字*/
  color: #a0a0a0;
  font-size: clamp(0.6rem, 0.7vw, 1rem);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  margin:-2px;
}

/*---------------------------------------------------------
list
----------------------------------------------------------*/

.compare-list{
position: relative;
width: 100%;
height:150px;
background: #f3f3f3;
border-radius:20px;
border:1px solid #d0d0d0;
margin:10px 0%;
padding:0px 0px 0px 0px;
}
.compare-list h3{
background: none;
margin:0px 0%;
padding:0px 0px 0px 0px;
}
/*---------
写真
---------*/
.compare-pic{
float:left;
padding:0px 2% 0px 0%;
background: ;
height: 100%;
aspect-ratio: 3 / 4;
}
.compare-pic img{
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
width: 100%;
aspect-ratio: 3 / 4;
image-rendering: -webkit-optimize-contrast;
}

/*---------
テキスト
---------*/
.compare-text{
overflow:hidden;
margin:10px 0px;
padding:0px 0px 0px 0%;
width:60%;
height: 180px;
}
.compare-price{
font-family: 'Montserrat Alternates', sans-serif;
color: #ff0000;
font-weight:bold;
margin:2px 8px 0px 0px;

}

/*---------------------------------------------------------
cart
----------------------------------------------------------*/
.cart{
max-width:700px;
margin:auto;
}
.cartTotal {
font-size:20px;
font-weight:bold;
max-width:700px;
margin:auto;
padding:0px 0px;
overflow: hidden; /* floatでレイアウトする場合は、親要素にfloat解除のクリアフィックスを指定する必要がある */
}

.totalPrice {
   padding:0px 30px 0px 30px;
   float: right; /* 商品合計を右寄せ */
}
.toCheckout,.toComfirm,.toThanks{
color: black; 
font-size:18px;
font-weight:bold;
background-color: #FFC107;
border-radius:20px;
border:0px solid black;
padding: 10px 100px; 
display: block;
margin: 60px auto 30px auto;
}

/*---------
ボタン
---------*/
.alldeleButton {
color: black;
font-size:14px;
font-weight:bold;
float:right;
width:80px;
height:40px;
margin:-20px 0px;
padding:0px 0px;
background: #dadada; 
border:5px solid #dadada;
border-radius:80px;
}

.prePageButton {
font-size:14px;
font-weight:bold;
float:right;
width:100px;
height:25px;
margin:-20px 90px 0px 0px;
padding:5px 0px 0px 5px;
background: #dadada; 
border:5px solid #dadada;
border-radius:80px;
}

#memoButton {
font-size:12px;
font-weight:bold;
width:80px;
height:25px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background: #dadada; 
border:0px solid #dadada;
border-radius:10px;
}

.delButton {
color: black;
font-size:28px;
font-weight:bold;
position: absolute;
top: 0px;
right: 0px;
width:35px;
height:35px;
padding:0px 0px;
background:#ffffff00;
border:0px solid #ffffff00;
border-radius:80px;
}
.cart-comp{
bottom:0px;
position: absolute;
font-size:16px;
font-weight:bold;
color:#ffffff;
width:50px;
height:50px;
margin:30px auto 10px auto;
padding:0px 0px;
background: #ff3535; 
border:0px solid #ff3535;
border-radius:80px;
}

.cart-disabled{
  bottom:0px;
position: absolute;
font-size:14px;
font-weight:bold;
color:#ffffff;
width:50px;
height:50px;
margin:0px auto 10px auto;
padding:0px 0px;
background: #9E9E9E; 
border:5px solid #9E9E9E;
border-radius:80px;
}
.compare-list input:focus {
  border: 0px solid #9E9E9E;
  outline: 0;
}
/*---------------------------------------------------------
checkout
----------------------------------------------------------*/
.totalDiv{
 width:100%;
 margin:0px 0px 30px 0px;
}
.totalDiv p {
font-size: var(--FontSize);
font-weight:bold;
text-align: right;
margin:0px;
}
/*---------------------------------------------------------
Thanks
----------------------------------------------------------*/
.thanksDiv {
text-align: center;
margin:50px 0px 200px 0px;
}
.thanksDiv h3{
font-size:40px;
 text-align: center;
}
.thanksDiv p{
font-size:16px;
text-align: center;
margin:0px;
}