.rc-page{
  margin:100px auto;
  max-width:1100px;
}
.rc-header{
  text-align:center;
  margin-bottom:50px;
}
.rc-header h2{
  font-size:30px;
  font-weight:bold;
  margin-bottom:10px;
}

/* ラジオボタンのボタン化 */
.button-label span {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px 10px 0;
  background-color: #ecf6f5;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  box-sizing:border-box;
  width:45%;
}

.button-label input {
  display: none;
}

.button-label input:checked + span {
  background-color: #1f5d53;
  color:#fff;
}

.dropdown{
  position:relative;
  background-color: #ecf6f5;
  cursor: pointer;
  border-radius: 5px;
  width:90%;
  box-sizing:border-box;
  border:none;
  font-size:1rem;
  padding:10px;
}

/* まとまりのコンテナ */
.time-slot-group {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #6c766f;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
  }
  
  /* time-slotのスタイル */
  .time-slot {
    flex-basis: calc(33.33% - 1px);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #758279;
    text-align: center;
    cursor:pointer;
  }
  
  /* 最初の行の最後の要素のボーダーを削除 */
  .time-slot:nth-child(3n) {
    border-right: none;
  }
  
  /* 2行目の要素の上のボーダーを削除 */
  .time-slot:nth-child(n+4) {
    border-top: none;
  }
  
  /* activeクラスのスタイル */
  .time-slot.active {
    background-color: #b0d7c6;
    color: #2c362d;
  }
  
  /* inactiveクラスのスタイル */
  .time-slot.inactive {
    background-color: #e8e8e8;
    color: #999;
  }

  /* selectedクラスのスタイル */
  .time-slot.selected {
    background-color: #caa176;
    color: #36302c;
  }


  /* 予約確認リスト */
  .rc-list-wrapper{
    margin:0 auto;
    padding:30px;
    max-width:600px;
    background-color:#ebf0f2;
    box-sizing:border-box;
    border-radius:20px;
  }
  .rc-list-wrapper h3{
    font-size:20px;
    font-weight:bold;
    margin-bottom:30px;
    text-align:center;
  }
  .rc-list-row{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .rc-list-title{
    width:150px;
    font-weight:bold;
  }
  .rc-list-data{
    width:calc(100% - 150px);
  }
  .rc-qr-image{
    width:100%;
    text-align:center;
    margin:40px auto;
  }
  .rc-qr-image img{
    width:250px;
  }

  .rc-user-edit{
    margin:40px auto;
    padding:30px;
    max-width:600px;
    background-color:#ebf0f2;
    box-sizing:border-box;
    border-radius:20px;
  }
  .rc-user-edit h3{
    font-size:20px;
    font-weight:bold;
    margin-bottom:30px;
    text-align:center;
  }
  .rc-user-edit li{
    margin-bottom:10px;
  }
  .rc-user-edit li a{
    display:block;
    padding:10px 20px;
    box-sizing:border-box;
    border-radius:5px;
    border:none;
    background-color:#021f59;
    color:#fff;
    cursor:pointer;
    width:100%;
    text-align:center;
    font-size:120%;
  }
  .rc-user-edit li a:hover{
    opacity:0.8;
  }

  a.rc-common-btn{
    display:block;
    padding:10px 20px;
    box-sizing:border-box;
    border-radius:5px;
    border:none;
    background-color:#021f59;
    color:#fff;
    cursor:pointer;
    width:100%;
    text-align:center;
    font-size:120%;
  }
  a.rc-common-btn:hover{
    opacity:0.8;
  }

  /* ユーザーログインページ */
  fieldset legend{
    display:none;
  }
  .user-login_wrapper{
    margin:200px auto 100px auto;
    max-width:1100px;
  }
  .user-registration_wrapper{
    margin:200px auto 100px auto;
    max-width:1100px;
  }
  .form-row input#user_email{
    width:300px;
  }
  .form-row{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .form-row label{
    width:200px;
  }
  .form-row .div_text{
    width:calc(100% - 200px);
  }
  .form-row .div_text input{
    border-radius:5px;
  }
  .form-notice{
    font-size:80%;
    display:block;
  }
  #wpmem_login .form-row{
    display:block;
  }
  #wpmem_login .form-row .username,#wpmem_login .form-row .password{
    width:100%;
  }
  .postcode-btn{
    display:inline-block;
    margin-top:5px;
    margin-left:5px;
    padding:5px 10px;
    border-radius:5px;
    background-color:#021f59;
    color:#fff;
    border:none;
    cursor:pointer;
  }
  #wpmem_reg .div_text #billing_postcode,#wpmem_reg .div_image input{
    width: auto;
  }
  #wpmem_reg .div_image img{
    width:300px;
  }
  #wpmem_reg .form-row label.image{
    width:200px;
  }
  #wpmem_reg,#wpmem_login{
    max-width:600px;
    margin:0 auto;
    box-sizing:border-box;
    padding:30px;
    border-radius:10px;
    background-color:#ebf0f2;
  }
  #wpmem_reg .textbox,#wpmem_login .username,#wpmem_login .password{
    border:1px solid #ddd;
    border-radius:5px;
    font-size:16px;
    padding:5px 10px;
  }
  #wpmem_reg .req{
    color:red;
  }
  .button_div input[type="submit"]{
    display:block;
    padding:10px 20px;
    border-radius:5px;
    border:none;
    background-color:#021f59;
    color:#fff;
    cursor:pointer;
    width:100%;
  }
  #wpmem_login .reg_link_btn{
    display:block;
    padding:10px 20px;
    border-radius:5px;
    border:none;
    background-color:#e70012;
    color:#fff;
    cursor:pointer;
    width:100%;
    box-sizing:border-box;
    text-align:center;
    font-size:120%;
    margin:20px 0;
  }
  #wpmem_login .reg_link_btn:hover{
    opacity:0.8;
  }
  #wpmem_login .link_txt{
    text-align:center;
    margin-top:20px;
  }
  #wpmem_reg .form-row label[for="username"],
  #wpmem_reg .form-row .div_text input#username,
  #wpmem_reg .form-row .div_text input#username + .form-notice{
    display:none;
  }