@charset "utf-8";
/* CSS Document */
.l-smalltxt {
  font-size: 14px;
}
.l-link {
  border-bottom: solid 1px #000;
  display: inline;
}
.c-error-txt {
  color: #FF0023;
  font-size: 16px;
  font-weight: bold;
}
.l-center {
  text-align: center
}
.c-login-txt {
  text-align: center;
  padding: 20px 0 30px;
}
.c-error input {
  border: 1px solid #FF0023;
}
.l-title-style01 {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding: 40px 0;
}
.c-lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 40px;
}
.l-request {
  font-size: 14px;
  color: #FF0023;
}
.c-radio input[type="radio"] {
  display: none;
}
.c-radio input[type="radio"] + span {
  display: inline-block;
  position: relative;
  padding: 0 0 0 1.2em;
  margin: 0 .2em 0;
  cursor: pointer;
}
.c-radio input[type="radio"] + span::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #707070;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  display: block;
}
.c-radio input[type="radio"]:checked + span::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #000;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  border: .2em solid #fff;
  display: block;
}
.c-radio label {
  margin-right: 20px;
}
.c-birth label {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.c-birth label::after {
  content: "";
  border-top: 3px solid var(--color-grey);
  border-right: 3px solid var(--color-grey);
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: rotate(135deg);
}
.c-birth select {
  width: 80px;
  padding: .4em 2.4em .4em .8em;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: .95em;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.c-birth select::-ms-expand {
  display: none;
}
.list-form .c-listform-innerdl dt {
  padding-left: 0;
  width: 120px;
}
.list-form .c-listform-innerdl dd {
  width: calc(100% - 120px);
}
.list-form .c-listform-innerdl dd.c-listform-innerdl-zip input {
  width: 180px;
}
.list-form .c-listform-innerdl dd.c-listform-innerdl-zip {
  display: flex;
}
@media screen and (max-width: 500px) {
  .list-form .c-listform-innerdl dd.c-listform-innerdl-zip {
    display: block;
  }
  .c-birth label {
    margin-right: 10px;
  }
}
.list-form dl.c-listform-innerdl {
  display: flex;
  justify-content: flex-start;
}
.c-listform-innerdl-zip p {
  font-size: 12px;
  padding-left: 5px;
}
.list-form .c-listform-innerdl {
  margin-bottom: 20px;
}
.c-form-other {
  margin-top: 10px;
}
.c-file p {
  margin-top: 10px;
}
.c-file label {
  padding: .4em .8em;
  cursor: pointer;
  background: #707070;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
}
.c-file input[type="file"] {
  display: none;
}
.c-file #result {
  display: none;
  width: 100%;
  padding: .4em 0;
  border-radius: 0;
  background-image: none;
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: .95em;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.btn-c-grey {
  background: #707070;
  color: #fff;
  margin-top: 20px;
}
.btn-ml {
  max-width: 300px;
  width: 100%;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-c-grey.btn-ar:after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.btn-c-grey:hover {
  background: #444;
}
.c-form-other-txt {
  color: #707070;
  font-size: 14px;
}
.l-title-style02 {
  position: relative;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 60px;
  margin-bottom: 40px;
}
.l-title-style02:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #ffde00;
}
.c-step {
  display: flex;
  width: 580px;
  justify-content: space-between;
  margin: 0 auto;
}
.c-step li {
  background: #ffde00;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  border-radius: 10px;
}
.c-step li a{
  width: 100%;
  padding: 10px 45px;
}
.c-step li:hover{
  background: #D7D7D7;
  transition: 0.3s;
}
.c-step li::after {
  content: "";
  border-top: 2px solid var(--color-sub);
  border-right: 2px solid var(--color-sub);
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: rotate(45deg);
}
.c-step li.c-step-current {
  background: #D7D7D7;
}
.c-btn-area a {
  background: #000;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 40px;
  border-radius: 40px;
}
.c-btn-area a:hover {
  background: #444;
}
.c-btn-flex {
  display: flex;
  justify-content: center;
}
.c-btn-area {
  margin: 0 10px 40px;
}
.l-bgwhite {
  background: #fff;
}
.c-birth span {
  font-weight: bold;
  margin: 0 10px 0 5px;
}
.list-form.c-mypage dt {
  padding-left: 0;
  font-weight: bold;
}
.c-mypage-style, .c-mypage-style dl {
  display: flex;
  justify-content: space-between;
}
.c-mypage-style dt {
  font-weight: bold;
}
.c-mypage-style dl {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .c-step {
    display: flex;
    width: 100%;
  }
  .c-step li {
    padding: 10px 20px;
    font-size: 14px;
  }
  .c-step li::after {
    right: 10px;
  }
  .l-title-style02 {
    font-size: 20px;
    padding-top: 40px;
    margin-bottom: 30px;
  }
  .c-btn-area a {
    padding: 10px 20px;
  }
  .c-mypage-style {
    display: block;
  }
  .c-mypage-style dl {
    width: 100%;
    margin-bottom: 10px;
  }
  .c-btn-flex {
    display: block;
  }
  .c-btn-area {
    margin: 0 10px 20px;
  }
}
.c-edit {
  margin-top: 60px;
}
.l-bold {
  font-weight: bold;
}
.c-plan-edit-day p {
  display: flex;
  align-items: center;
}
.c-plan-edit-day p span {
  margin-left: 5px;
}
.c-plan-edit-day {
  display: flex;
  margin-bottom: 30px;
}
.c-plan-edit-check {
  margin-bottom: 30px;
  margin-top: 30px;
  text-align: center;
}
.c-plan-edit-check span {
  font-weight: bold;
  font-size: 16px;
}
.c-plan-edit-day-01 {
  width: 30%;
  padding-right: 5%;
  box-sizing: border-box;
}
.c-plan-edit-day-02 {
  width: 30%;
}
.c-plan-edit-day-02 span {
  width: 50%;
}
.c-plan-edit-day-02 input[type='text'] {
  width: 50%;
}
.c-btn-style {
  width: 400px;
  margin: 60px auto 0;
}
@media screen and (max-width: 767px) {
  .c-btn-style {
    width: 90%;
  }
}
.l-title-grey{
  background: #D7D7D7;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  text-align: center;
  padding: 10px 0px;
  font-weight: bold;
  width: 100%;
}
.l-bg-radius{
  border-radius: 20px;
}
.l-bg-radius-inner{
  padding:20px;
}
.c-btn-flex.c-btn-arrow{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  margin: 0 auto 40px;
  justify-content: flex-start;
}
.c-btn-arrow .c-btn-area{
  position: relative;
  width: 220px;
  margin-bottom: 20px;
}
.c-btn-arrow .c-btn-area::after{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: rotate(45deg);
}
.c-btn-area.c-btn-current a{
  background: #D7D7D7;
  color: #000;
}
.c-btn-arrow .c-btn-area.c-btn-current::after{
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.c-reserve-dl{
  display: flex;
  margin-bottom: 10px;
}
.c-reserve-dl dt{
  width: 30%;
  font-weight: bold;
}
.c-reserve-dl dd{
  width: 70%;
}
.c-reserve-day>div a{
  background: #000;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 40px;
}
.c-reserve-day>div{
  width: 100px;
  position: relative;
}
.c-reserve-day{
  display: flex;
  justify-content: space-between;
  width: 210px;
}
.c-reserve-daylist{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.c-reserve-day>div a:hover{
  background: #444;
}
.c-btn-style-03::after{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: rotate(45deg);
}
.c-btn-style-04::before{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: rotate(45deg);
}
.c-btn-style-01::after{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: rotate(225deg);
}
.c-btn-style-02::before{
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: rotate(225deg);
}
table.c-reserve-scedule{
  width: 100%;
}
.c-table-yellow{
  background: #FFDE00;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 0;
  border-left: 2px solid #F6F6F8;
}
.c-table-gr{
  background: #D7D7D7;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 2px solid #F6F6F8;

}
.c-reserve-scedule td{
  background: #fff;
  text-align: center;
  padding: 5px 0;
  border:2px solid #F6F6F8;
}
.c-reserve-more a{
  width: 100%;
  padding: 10px 0;
  background: #707070;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.c-reserve-more{padding-top: 5px;}
.c-reserve-more a:hover{
  background: #D7D7D7;
  color: #333;
}
@media screen and (max-width: 767px) {
  .c-btn-flex.c-btn-arrow {
    width: 100%;
    margin: 0 auto 20px;
  }
  .c-btn-arrow .c-btn-area{
    width: 80%;
    margin: 0 auto 20px;
  }
  .c-reserve-day{
    width: 48%;
  }
  .c-reserve-day>div{
    width: 100%;
  }
  .c-btn-style-02{
    margin-right: 5px;
  }
  .c-btn-style-04{
    margin-left: 5px;
  }
  .c-table-gr{
    font-size: 12px;
    padding: 0 3px;
  }
}
.c-reserve-dd{
  display: flex;
}
.c-reserve-dd p{
  width: 50%;
}
.l-sum-grey{
  background: #D7D7D7;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  text-align: center;
  padding: 10px 0px;
  font-weight: bold;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .c-reserve-dd{
    display: block;
  }
  .c-reserve-dd p{
    width: 100%;
  }
}
.c-lead p{
  margin-bottom: 20px;
}
.c-lead ul{
  padding-left: 20px;
  margin-bottom: 10px;
}
.c-lead ul li{
  list-style: disc;
}
.p-reservelist th{
  width: 20%;
  background: #D7D7D7;
  border-left: 5px solid #F6F6F8;
  box-sizing: border-box;
  padding: 15px;
  font-size: 14px;
}
.p-reservelist td{
  padding: 20px;
  font-size: 14px;
}
.c-reserve-cancel a{
  display: block;
  font-weight: bold;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  background: #000;
  font-size: 12px;
  text-align: center;
}
.c-reserve-cancel a:hover{
  background: #9a9a9a;
}
.c-reserve-finished{
  color: #9a9a9a;
}
.p-reservelist{
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-reservelist-wrap{
    overflow-x: scroll;
  }
  .p-reservelist{
    width: 600px;
  }
  .p-reservelist td{
    border: 2px solid #eee;
    padding: 4px 8px;
  }
}