/* ヘッダー・フッターと重ならないようにする(body) */
.base_position {
  width: 95%;
  /*下のかぶさるエリアの指定*/
  margin: 0;
  position: relative;
  z-index:1;
  /*以下はレイアウトのための記述。削除可能*/
  padding:0px 0px 0px 5%;
padding-bottom:200px;
align-items: center;
}


/* タイトル見出しdivの配置*/
.title_position {
width: 100%; /* 幅いっぱいを指定 */
padding: 0px 0px 0px 10px;
position: fixed;
top: 20px; /* 画面上から50px */
left: 0px; /* 画面左から50px */
z-index:99;
}

/* 各月リンクdivの配置*/
.link_position {
width: 100%; /* 幅いっぱいを指定 */
padding: 0px 0px 0px 30px;
position: fixed;
top: 70px; /* 画面上から50px */
left: 0px; /* 画面左から50px */
display: block;
line-height: 1.5; /* 行間を1.5倍に設定 */
font-size: 17px;
text-decoration: none;
z-index:99;
}

/* 追加分 231019_各月リンクレスポンシブ */
@media screen and (max-width: 767px) {
  .link_position {
    padding: 0 0 0 15px;
  }
}

/*ボタンgp1の配置*/
.button_gp1_position {
width: 95%; 
height: 35px;
padding: 35px 0px 0px 5%;
position: fixed;
/* top: 120px; 画面上から50px */
top: 160px;
left: 0px; /* 画面左から50px */

z-index:97;
}

/*ボタンgp1の配置*/
.pazzle_button_gp1_position {
  width: 95%; 
  height: 50px;
  padding: 30px 0px 0px 5%;
  position: fixed;
  /* top: 120px; 画面上から50px */
  top: 110px;
  left: 0px; /* 画面左から50px */
  
  z-index:97;
  }
  

/*ボタンgp2の配置*/
.button_gp2_position {
width: 95%; 
height: 35px;
/* padding: 0px 0px 0px 5%; */
padding: 47px 0px 0px 5%;
position: fixed;
/* top: 190px; 画面上から50px */
top: 100px;
left: 0px; /* 画面左から50px */
z-index:97;
}

/*ページの配置*/
.page_position {
  width: 95%; 
  height: 30px;
  /* padding: 0px 0px 0px 5%; */
  padding: 30px 0px 0px 5%;
  position: fixed;
  /* top: 190px; 画面上から50px */
  top: 217px;
  left: 0px; /* 画面左から50px */
  z-index:96;
  }



/*表の配置*/
.zaiko_position {
  width: 100%;
  padding: 30px 0px 100px 0px;
  margin: 0px;
  top:215px;
  /*下のかぶさるエリアの指定*/
  position: relative;

}

/*表の配置*/
.zaiko_position_vip {
  width: 100%;
  padding: 30px 0px 100px 0px;
  margin: 0px;
  top:225px;
  /*下のかぶさるエリアの指定*/
  position: relative;

}


/* 全体の背景カラー*/
.base_color{
background: #ffffee;
}

/* 全体のテキストカラー*/
.base_text_color{
color: #492d11;
}

.zaiko_finish_color{
background: #bbbbbb;
}

.white_color{
background: #ffffff;
}


/* タイトル見出しdivの背景カラー*/
.title_back_color{
background: #d4baaa;
}



/*ボタンgp2の配置*/
.sikin_gp_position { 
  padding: 0px 0px 0px 0px;
  position: fixed;
  top: 187px; /* 画面上から50px */
  left: 40%; /* 画面左から50px */
  z-index:98;
  }

.button_gp1_size {
width: 33%;
height:30px;
margin-right: 2%;
font-size: 12px;
text-align: center;

/* 追加分 231019 */
border: none;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0,0,0,0.12);
cursor: pointer;

}

.button_gp1_zaiko_choice_size {
width: 25%;
height:30px;
margin-right: 2%;
font-size: 12px;

/* 追加分 231019 */
border: none;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0,0,0,0.12);
cursor: pointer;
}

.button_gp1_sort_choice_size {
width: 25%;
height:30px;
margin-right: 2%;
font-size: 12px;

/* 追加分 231019 */
border: none;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0,0,0,0.12);
cursor: pointer;

}




.button_gp2_size {
width:33%;
height:30px;
margin-right: 2%;
font-size: 12px;

/* 追加分 231019 */
border: none;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0,0,0,0.12);
cursor: pointer;
background: #55acee;
color: #fff;
transition: opacity 0.3s ease 0s;

}

.button_gp2_size_pazzle {
  width:15%;
  height:30px;
  margin-right: 2%;
  font-size: 12px;
  
  /* 追加分 231019 */
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.12);
  cursor: pointer;
  background: #55acee;
  color: #fff;
  transition: opacity 0.3s ease 0s;
  
  }


.button_gp2_size:hover {
  opacity: 0.7;
}


.button_gp3_size {
  width:30%;
  height:20px;
  margin-right: 2%;
  font-size: 12px;
}

.button_gp4_size {
  width:8%;
  height:20px;
  margin-right: 4%;
  font-size: 12px;
}

.button_gp2_size1 {
width: 25%;
height:30px;
margin-right: 2%;
font-size: 12px;

/* 追加分 231019 */
border: none;
border-radius: 3px;
box-shadow: 0 3px 4px rgba(0,0,0,0.12);
cursor: pointer;
background: #55acee;
color: #fff;
transition: opacity 0.3s ease 0s;
}

.button_gp2_size1:hover {
  opacity: 0.7;
}


/* セルの上下左右すべての線を非表示 */
.td_css_invisible { 
border-style : none; 
} 

/* チェックボックスのスタイル */
.large-checkbox {
transform: scale(1.3); /* チェックボックスのサイズを2倍にする */
margin-right: 10px; /* チェックボックスとテキストの間隔を調整 */
}

/* 在庫ない時に灰色にする*/
.zero_color{
background: #bbbbbb;
}


.toggle_input {
/* 以前のスタイル */
position: absolute;
left: -5px;
top: -27px;
z-index: 5;
opacity: 0;
cursor: pointer;
padding: 10px;
width: 40px;
height: 30px;
}

.toggle_label {
/* 以前のスタイル */
width: 40px;
height: 18px;
background: #ffffff;
border: 3px solid #a3a1a1;
position: relative;
display: inline-block;
border-radius: 40px;
transition: 0.4s;
box-sizing: border-box;
text-align: left; /* ラベル内のテキストを左寄せに設定 */
top:-22px;
padding: 10px;
}

.toggle_label:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 100%;
left: 2px;
top: 2px;
z-index: 2;
background: #b4b3b3;
transition: 0.4s;
box-sizing: border-box;
text-align: left; /* ラベル内のテキストを左寄せに設定 */
}

.toggle_input:checked + .toggle_label {
border: 3px solid #bbddaa;
}

.toggle_input:checked + .toggle_label:after {
left: 18px;
background: #bbddaa;
}



.toggle_input2 {
  /* 以前のスタイル */
  position: absolute;
  left: -5px;
  top: -27px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  padding: 10px;
  width: 40px;
  height: 30px;
  }
  
  .toggle_label2 {
  /* 以前のスタイル */
  width: 40px;
  height: 18px;
  background: #ffffff;
  border: 3px solid #a3a1a1;
  position: relative;
  display: inline-block;
  border-radius: 40px;
  transition: 0.4s;
  box-sizing: border-box;
  text-align: left; /* ラベル内のテキストを左寄せに設定 */
  top:-22px;
  padding: 10px;
  }
  
  .toggle_label2:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: #b4b3b3;
  transition: 0.4s;
  box-sizing: border-box;
  text-align: left; /* ラベル内のテキストを左寄せに設定 */
  }
  
  .toggle_input2:checked + .toggle_label {
  border: 3px solid #aadbdd;
  }
  
  .toggle_input2:checked + .toggle_label:after {
  left: 18px;
  background: #aadbdd;
  }
  .toggle_button {
    position: relative;
    margin-right: 30px; /* 右側の余白を設定 */
    margin-bottom: 8px; /* 右側の余白を設定 */
    width: 16px;
    height: 8px;
    /* margin: auto; /* マージンを削除します */
    }


  .toggle_button2 {
  position: relative;
  margin-right: 30px; /* 右側の余白を設定 */
  width: 16px;
  height: 8px;
  /* margin: auto; /* マージンを削除します */
  }

  .toggle_button3 {
    position: relative;
    margin-right: 30px; /* 右側の余白を設定 */
    width: 16px;
    height: 8px;
    /* margin: auto; /* マージンを削除します */
    }


  .toggle_input3 {
    /* 以前のスタイル */
    position: absolute;
    left: -5px;
    top: -27px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
    padding: 10px;
    width: 40px;
    height: 30px;
    }
    
    .toggle_label3 {
    /* 以前のスタイル */
    width: 40px;
    height: 18px;
    background: #ffffff;
    border: 3px solid #a3a1a1;
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
    text-align: left; /* ラベル内のテキストを左寄せに設定 */
    top:-22px;
    padding: 10px;
    }
    
    .toggle_label3:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    left: 2px;
    top: 2px;
    z-index: 2;
    background: #b4b3b3;
    transition: 0.4s;
    box-sizing: border-box;
    text-align: left; /* ラベル内のテキストを左寄せに設定 */
    }
    
    .toggle_input3:checked + .toggle_label {
    border: 3px solid #03471d;
    }
    
    .toggle_input3:checked + .toggle_label:after {
    left: 18px;
    background: #03471d;
    }
    

    .toggle_button4 {
      position: relative;
      margin-right: 30px; /* 右側の余白を設定 */
      width: 16px;
      height: 8px;
      /* margin: auto; /* マージンを削除します */
      }
  
    .toggle_input4 {
      /* 以前のスタイル */
      position: absolute;
      left: -5px;
      top: -27px;
      z-index: 5;
      opacity: 0;
      cursor: pointer;
      padding: 10px;
      width: 40px;
      height: 30px;
      }
      
      .toggle_label4 {
      /* 以前のスタイル */
      width: 40px;
      height: 18px;
      background: #ffffff;
      border: 3px solid #a3a1a1;
      position: relative;
      display: inline-block;
      border-radius: 40px;
      transition: 0.4s;
      box-sizing: border-box;
      text-align: left; /* ラベル内のテキストを左寄せに設定 */
      top:-22px;
      padding: 10px;
      }
      
      .toggle_label4:after {
      content: "";
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      left: 2px;
      top: 2px;
      z-index: 2;
      background: #b4b3b3;
      transition: 0.4s;
      box-sizing: border-box;
      text-align: left; /* ラベル内のテキストを左寄せに設定 */
      }
      
      .toggle_input4:checked + .toggle_label {
      border: 3px solid #e51b09;
      }
      
      .toggle_input4:checked + .toggle_label:after {
      left: 18px;
      background: #e51b09;
      }





      .toggle_button5 {
        position: relative;
        margin-right: 30px; /* 右側の余白を設定 */
        width: 16px;
        height: 8px;
        /* margin: auto; /* マージンを削除します */
        }
    
    
      .toggle_input5 {
        /* 以前のスタイル */
        position: absolute;
        left: -5px;
        top: -27px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
        padding: 10px;
        width: 40px;
        height: 30px;
        }
        
        .toggle_label5 {
        /* 以前のスタイル */
        width: 40px;
        height: 18px;
        background: #ffffff;
        border: 3px solid #a3a1a1;
        position: relative;
        display: inline-block;
        border-radius: 40px;
        transition: 0.4s;
        box-sizing: border-box;
        text-align: left; /* ラベル内のテキストを左寄せに設定 */
        top:-22px;
        padding: 10px;
        }
        
        .toggle_label5:after {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        left: 2px;
        top: 2px;
        z-index: 2;
        background: #b4b3b3;
        transition: 0.4s;
        box-sizing: border-box;
        text-align: left; /* ラベル内のテキストを左寄せに設定 */
        }
        
        .toggle_input5:checked + .toggle_label {
        border: 3px solid #032247;
        }
        
        .toggle_input5:checked + .toggle_label:after {
        left: 18px;
        background: #032247;
        }





/* my優待の確定ボタンの位置 */
.my_yutai_button_position {
width: 95%; 
height: 55px;
padding: 20px 0px 0px 2%;
position: fixed;
top: 120px; /* 画面上から50px */
left: 2%; /* 画面左から50px */
z-index:97;
}

/* my優待の確定ボタン */
.my_yutai_button {
width: 20%;
height:30px;
text-align:center; 
}

/* my優待のソートボタンの位置 */
.my_yutai_sort_form_positions{
width: 100%; 
height: 55px;
padding: 20px 0px 0px 0%;
position: fixed;
top: 120px; /* 画面上から50px */
left: 25%; /* 画面左から50px */
z-index:98;
}

/* my優待のソートボタンの大きさ */
.my_yutai_sort_button {
width: 41%;
height:30px;
margin-right: 2%;
font-size: 12px;
}

.cross_only_button_position {
width: 95%; 
height: 55px;
padding: 20px 0px 0px 0%;
position: fixed;
top: 120px; /* 画面上から50px */
left: 68%; /* 画面左から50px */
z-index:98;
}

.cross_only_button {
width: 30%;
height:30px;
text-align:center; 
}


.my_yutai_table_posi {
width: 95%;
/*下のかぶさるエリアの指定*/
position: relative;
z-index:1;
/*以下はレイアウトのための記述。削除可能*/
padding:180px 5% 0px 0%;
padding-bottom:10px;
}

/* チェックボックスのスタイル */
.myyutai_large_checkbox {
transform: scale(0.5); /* チェックボックスのサイズを2倍にする */
}

/*ボタンgp2の配置*/
.button_gp3_position {
  width: 95%; 
  height: 40px;
  padding: 0px 0px 5px 5%;
  position: fixed;
  top: 190px; /* 画面上から50px */
  left: 0px; /* 画面左から50px */
  z-index:97;
  }

.date_formn {
width: 1px; /* 好みに応じて幅を調整 */
height: 10px;
text-align: left;
font-size:8px
}

.cross_cost_formn {
width: 10%; /* 好みに応じて幅を調整 */
height: 5px;
text-align: center;
font-size:8px
}

.kabusuu_formn {
width: 20%; /* 好みに応じて幅を調整 */
height: 5px;
text-align: center;
font-size:8px
}

.meigi_formn {
width: 15%; /* 好みに応じて幅を調整 */
height: 5px;
text-align: center;
font-size:8px
}

.select_button_syoken {
width: 10%; /* 好みに応じて幅を調整 */
height: 10px;
text-align: left;
font-size:8px
}




/*グラフ周りの情報の位置 */
.grapjh_around_position {
width: 100%; 
height: 55px;
padding: 0px 0px 0px 4%;
top: 100px; /* 画面上から50px */
left: 0%; /* 画面左から50px */
z-index:1;
}


/*グラフの位置 */
.grapjh_graph_position {
width: 100%; 
height: 55px;
padding: 0px 0px 0px 4%;
top: 210px; /* 画面上から50px */
left: 0%; /* 画面左から50px */
z-index:1;
}

/*スクロール用*/
.scroll_position {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
top:100px;
/*下のかぶさるエリアの指定*/
position: relative;
bottom:0px;
/*以下はレイアウトのための記述。削除可能*/
padding-bottom:100px;
padding-top:20px;
}

/*グラフの大きさを画面に合わせる*/
.graph_posi {
width: 90%;
height: auto;
}

/* トップページのタイトル配置*/
.top_title_posi {
width: 100%; /* 幅いっぱいを指定 */
padding: 0px 0px 0px 0px 4%;
position: fixed;
top: 30px; /* 画面上から50px */
left: 4%; /* 画面左から50px */
z-index:99;
margin-bottom: 20px; /* 下に20pxの余白を追加 */
}


/*スクロール用*/
.top_config_posi {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
top:410px;
/*下のかぶさるエリアの指定*/
position: relative;
bottom:0px;
/*以下はレイアウトのための記述。削除可能*/
padding-bottom:400px;
padding-top:0px;

}

/* トップページのタイトル配置*/
.config_title_posi {
width: 100%; /* 幅いっぱいを指定 */
padding: 0px 0px 10px 0px;
position: fixed;
top: 310px; /* 画面上から50px */
left: 0%; /* 画面左から50px */
z-index:99;
}

/* トップページのタイトル配置*/
.config_button_posi {
width: 100%; /* 幅いっぱいを指定 */
padding: 10px 0px 0px 5%;
position: fixed;
top: 370px; /* 画面上から50px */
left: 0%; /* 画面左から50px */
z-index:99;
}

/* トップページのタイトル配置*/
.config_button {
width: 40%;
height:40px;
margin-right: 2%;
font-size: 12px;
text-align: center;
}

.toggle_buttons_container {
  display: flex;
  /* トグルボタン間の余白や配置を調整する場合、ここで設定 */
}




.radio-002 {
  display: flex;
  flex-wrap: wrap;
  gap: .0em 2em;
  border: none;
}

.radio-002 label {
  top: -20px;
  display: flex;
  align-items: flex-start;
  gap: 0 .5em;
  position: relative;
  cursor: pointer;
  margin-bottom: -10px; /* 下の余白を削除 */
}

.radio-002 label::before,
.radio-002 label::after {
  border-radius: 50%;
  content: '';
}

.radio-002 label::before {
  width: 25px;
  height: 25px;
  border: 2px solid #dee5eb;
  box-sizing: border-box;
}

.radio-002 label::after {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background-color: #dee5eb;
}

.radio-002 label:has(:checked)::after {
  background-color: #51d673;
  animation: anim-radio-002 .3s linear;
}

@keyframes anim-radio-002 {
  0% {
      box-shadow: 0 0 0 1px transparent;
  }
  50% {
      box-shadow: 0 0 0 10px #51d67333;
  }
  100% {
      box-shadow: 0 0 0 10px transparent;
  }
}

.radio-002 input {
  display: none;
}



.copy_button {
  width: 1%;
  height:20px;
  text-align:center; 
  font-size: 5px;
  }


  /*ボタンgp2の配置*/
.cross_cost1 {
  width: 20%; 
  height: 30px;
  padding: 0px 0px 0px 0%;
  position: fixed;
  top: 130px; /* 画面上から50px */
  left: 5%; /* 画面左から50px */
  text-align:right;
  z-index:97;
  }

  .cross_cost2 {
    width: 10%; 
    height: 30px;
    padding: 0px 0px 0px 0%;
    position: fixed;
    top: 130px; /* 画面上から50px */
    left: 27%; /* 画面左から50px */
    z-index:97;
    }