@media (min-width: 768px) {
  .mypage {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .mypage {
    margin-top: 40px;
  }
}
.mypage__head {
  background-color: #336565;
  color: #fff;
}
@media (min-width: 768px) {
  .mypage__head {
    padding: 50px 0;
  }
}
@media (max-width: 767px) {
  .mypage__head {
    padding: 60px 0;
  }
}
.mypage__title {
  line-height: 46px;
  letter-spacing: 0.08em;
}
.mypage__body {
  background-color: #f8f9f9;
}
@media (min-width: 768px) {
  .mypage__body {
    padding: 40px 0 100px;
  }
}
@media (max-width: 767px) {
  .mypage__body {
    padding: 25px 0 60px;
  }
}
.mypage__body > .inner {
  max-width: 1200px;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .mypage__profile {
    width: 400px;
  }
}
@media (min-width: 768px) and (max-width: 870px) {
  .mypage__profile {
    width: 45.98vw;
  }
}
@media (max-width: 767px) {
  .mypage__profile img {
    width: 53.33vw;
  }
}
.mypage__name {
  position: relative;
  background-color: #fff;
  border: 1px solid #336565;
  border-radius: 10px;
  padding: 1px 20px;
  max-width: 100%;
  height: 68px;
  line-height: 68px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .mypage__name {
    width: 400px;
  }
}
@media (max-width: 767px) {
  .mypage__name {
    width: 88vw;
  }
}
.mypage__name .setting {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  background-image: url(../img/mypage/icon_setting1.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  height: 35px;
}
@media (min-width: 768px) {
  .mypage__menu {
    width: 363px;
  }
}
@media (min-width: 768px) and (max-width: 870px) {
  .mypage__menu {
    width: 41.72vw;
  }
}
@media (max-width: 767px) {
  .mypage__menu {
    width: 80vw;
  }
}
.mypage__items {
  list-style: none;
}
.mypage__anc {
  background-color: #336565;
  border: 1px solid #a5b1ba;
  border-radius: 5px;
  color: #fff;
  height: 55px;
  line-height: 36px;
}
.mypage__btn {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #fff;
  color: #336565;
  border: 6px solid #336565;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  transform: translateZ(3px);
  transition: 0.3s;
}
@media (min-width: 768px) {
  .mypage__btn {
    height: 130px;
  }
}
@media (max-width: 767px) {
  .mypage__btn {
    height: 98px;
  }
}
.mypage__btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}
@media (min-width: 768px) {
  .mypage__btn::after {
    border-top: 3px solid #336565;
    border-right: 3px solid #336565;
  }
}
@media (max-width: 767px) {
  .mypage__btn::after {
    border-top: 2px solid #336565;
    border-right: 2px solid #336565;
  }
}
.mypage__btn:hover {
  box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.4);
}
.mypage__reqtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #a5b1ba;
}
@media (min-width: 768px) {
  .mypage__reqtable {
    display: table;
  }
}
@media (max-width: 767px) {
  .mypage__reqtable {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
.mypage__reqtable tr {
  line-height: 32px;
}
.mypage__reqtable th {
  background-color: #336565;
  color: #fff;
  border: 1px solid #fff;
  padding: 5px;
  text-align: center;
}
.mypage__reqtable td {
  background-color: #fff;
  padding: 5px;
  border: 1px solid #a5b1ba;
  text-align: center;
}
.mypage__reqbtn {
  width: 100px;
  height: 40px;
  font-weight: bold;
  color: #fff;
}
.mypage__reqbtn.ok {
  background-color: #336565;
}
.mypage__reqbtn.ng {
  background-color: #aaa;
}
.mypage__paybtn {
  width: 100px;
  height: 40px;
  font-weight: bold;
  color: #fff;
  background-color: #c5465b;
}
.mypage__infotable {
  width: 100%;
  border-collapse: collapse;
}
@media (min-width: 768px) {
  .mypage__infotable {
    display: table;
  }
}
.mypage__infotable th, .mypage__infotable td {
  border: 1px solid #a5b1ba;
}
.mypage__infotable th {
  width: 30%;
  background-color: #336565;
  color: #fff;
  padding: 10px;
  text-align: left;
}
.mypage__infotable td {
  background-color: #fff;
  padding: 10px;
}
.mypage .mdc-button {
  width: 300px !important;
  height: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #336565 !important;
}

@media (min-width: 768px) {
  .index > .inner {
    max-width: 870px;
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .password > .inner {
    max-width: 870px;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .password__head img {
    width: 53.33vw;
  }
}
.password__title {
  line-height: 48px;
  letter-spacing: 0.08em;
}
.password__anc {
  color: #006fff;
  line-height: 28px;
  letter-spacing: -0.02em;
}
.password__panel {
  position: relative;
  border-bottom: 1px solid #2a465b;
  padding: 10px 5px 10px 55px;
  cursor: pointer;
}
.password__panel::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.password__panel::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border-right: 2px solid #336565;
  border-bottom: 2px solid #336565;
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.password__panel.open::after {
  transform: translateY(5px) rotate(-135deg);
}
.account .password__panel::before {
  left: 15px;
  background-image: url(../img/mypage/icon_person.svg);
  width: 23px;
  height: 33px;
}
.pass .password__panel::before {
  left: 10px;
  background-image: url(../img/mypage/icon_setting2.svg);
  width: 33px;
  height: 33px;
}
.password__content {
  display: none;
}
@media (min-width: 768px) {
  .password__content {
    max-width: 520px;
    padding: 35px 10px;
  }
}
@media (max-width: 767px) {
  .password__content {
    padding-top: 30px;
  }
}
.password__p {
  color: #2a465b;
}
.password__input {
  width: 100%;
  max-width: 100%;
  height: 45px;
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #a5b1ba;
  border-radius: 5px;
  font-size: 16px;
}
.password__btn {
  background-color: #ff7e83;
  border: 1px solid #a5b1ba;
  color: #fff;
  max-width: 100%;
  height: 55px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .password__btn {
    width: 363px;
  }
}
@media (max-width: 767px) {
  .password__btn {
    width: 300px;
  }
}
.password__btn:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .driver > .inner {
    max-width: 1140px;
    padding: 0 20px;
  }
}
.driver__img {
  position: relative;
  cursor: pointer;
}
.driver__img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 96px;
  height: 79px;
  background-image: url(../img/mypage/icon_camera.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.driver__title {
  line-height: 47px;
  letter-spacing: 0.08em;
}
.driver__body {
  border-top: 1px solid #336565;
}
.driver__notice {
  color: #c5465b;
  line-height: 28px;
}
.driver__subsection {
  align-items: flex-start;
}
@media (min-width: 768px) {
  .driver__info {
    width: 350px;
    margin-right: 40px;
  }
}
.driver__p {
  color: #2a465b;
}
.driver__input {
  width: 100%;
  height: 45px;
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #a5b1ba;
  border-radius: 5px;
  font-size: 16px;
}
@media (min-width: 768px) {
  .driver__photo {
    flex: 1;
    gap: 60px 40px;
  }
}
@media (min-width: 768px) {
  .driver__photoitem {
    width: 332px;
  }
}
.driver__upload {
  max-width: 100%;
  width: 280px;
  height: 55px;
  background-color: #d0e1e1;
  color: #336565;
  border: 1px solid #336565;
  border-radius: 5px;
}
.driver__subtitle {
  background-color: #336565;
  color: #fff;
  padding: 10px 20px;
  line-height: 32px;
  letter-spacing: 0.08em;
}
@media (min-width: 768px) {
  .driver__sub {
    gap: 0 80px;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .driver__sub {
    gap: 0 7.6vw;
  }
}
@media (min-width: 768px) {
  .driver__subitem {
    width: 435px;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .driver__subitem {
    width: 41.43vw;
  }
}
@media (min-width: 768px) {
  .driver__subitem .driver__upload {
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .driver__subitem .driver__upload {
    width: 100%;
  }
}
.driver__question {
  width: 28px;
}
.driver__btnwrap {
  background-color: #d0e1e1;
  width: 100vw;
  margin: 60px calc(50% - 50vw) 0;
}
@media (min-width: 768px) {
  .driver__btnwrap {
    padding: 40px 0 60px;
  }
}
@media (max-width: 767px) {
  .driver__btnwrap {
    padding: 30px 0 25px;
  }
}
@media (min-width: 768px) {
  .driver__btnitems {
    gap: 0 30px;
  }
}
@media (max-width: 767px) {
  .driver__btnitems {
    gap: 25px 0;
  }
}
.driver__submit {
  background-color: #ff7e83;
  border: 1px solid #a5b1ba;
  color: #fff;
  max-width: 100%;
  height: 55px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .driver__submit {
    width: 363px;
  }
}
@media (max-width: 767px) {
  .driver__submit {
    width: 80vw;
  }
}
@media (min-width: 768px) {
  .driver__submit:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
  }
}
.driver__cancel {
  background-color: #fff;
  border: 1px solid #a5b1ba;
  color: #336565;
  max-width: 100%;
  height: 55px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .driver__cancel {
    width: 176px;
  }
}
@media (max-width: 767px) {
  .driver__cancel {
    width: 47.07vw;
  }
}
@media (min-width: 768px) {
  .driver__cancel:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
  }
}
.driver__lead {
  color: #336565;
  line-height: 32px;
  letter-spacing: 0.08em;
}
.driver__selfie {
  color: #2a465b;
}
@media (min-width: 768px) {
  .driver__selfie {
    flex: 1;
    margin-right: -60px;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .driver__selfie {
    margin-right: 20px;
  }
}
.driver__foottext {
  line-height: 28px;
}
@media (min-width: 768px) {
  .driver__footimg {
    width: 385px;
    height: 385px;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .driver__footimg {
    width: 42.78vw;
    height: 42.78vw;
  }
}
@media (max-width: 767px) {
  .driver__footimg {
    width: 66.67vw;
  }
}
.driver__reserve {
  border-top: 1px solid #336565;
}
@media (min-width: 768px) {
  .driver__reserve {
    margin-top: 70px;
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .driver__reserve {
    margin-top: 40px;
    padding-top: 55px;
  }
}
@media (min-width: 768px) {
  .driver__reserve .mypage__btn {
    max-width: 820px;
  }
}

.account > .inner {
  width: 500px !important;
  max-width: 100% !important;
}

div.uimob500 .um-account-meta {
  margin-bottom: 100px !important;
}

.um-account-name a {
  font-size: 27px;
  letter-spacing: 0.08em;
}

.um-account .um-account-meta img {
  width: 284px !important;
  height: 284px !important;
}

.um-account-profile-link a {
  font-size: 16px;
  font-weight: bold;
}

.um-account .um-account-nav a {
  color: #2a465b;
  font-size: 18px;
  font-family: "m-plus-1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.um-account .um-account-nav span.ico {
  bottom: 0;
  margin: auto;
}

.um-account .um-faicon-user:before {
  content: "" !important;
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  margin: auto;
  background-image: url(../img/mypage/icon_person.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23px;
  height: 33px;
}

.um-account .um-faicon-asterisk:before {
  content: "" !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/mypage/icon_setting2.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 33px;
  height: 33px;
}

.um-account .um-account-nav {
  margin-top: 90px;
}

.um-account .um-left,
.um-account .um-right {
  float: none !important;
}

.um-account input[type=submit].um-button {
  background: #ff7e83 !important;
  border: 1px solid #a5b1ba !important;
  font-size: 18px !important;
  font-weight: bold !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 55px !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4) !important;
}
@media (min-width: 768px) {
  .um-account input[type=submit].um-button {
    width: 363px !important;
  }
}
@media (max-width: 767px) {
  .um-account input[type=submit].um-button {
    width: 300px !important;
  }
}
.um-account input[type=submit].um-button:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4) !important;
}

div.uimob960 .um-profile-photo a.um-profile-photo-img {
  top: 0 !important;
}

.um-profile .um-button {
  color: #336565;
}

.um-profile a.um-button, .um-profile a.um-button.um-disabled:active, .um-profile a.um-button.um-disabled:focus, .um-profile a.um-button.um-disabled:hover, .um-profile input[type=submit].um-button, .um-profile input[type=submit].um-button:focus {
  background: #d0e1e1;
}

.um-profile a.um-button {
  font-weight: bold !important;
  border: 1px solid #336565 !important;
}
.um-profile a.um-button:hover {
  opacity: 0.8;
  background: #d0e1e1 !important;
}

.um-profile .um-col-alt {
  background-color: #d0e1e1;
  width: 100vw;
}
@media (min-width: 768px) {
  .um-profile .um-col-alt {
    display: flex;
    justify-content: center;
    margin: 60px calc(50% - 50vw) 5px;
    padding: 40px 20px 60px;
    gap: 0 25px;
  }
}
@media (max-width: 767px) {
  .um-profile .um-col-alt {
    margin: 0 calc(50% - 50vw);
    padding: 30px 0 25px;
  }
}

.um-profile .um-half {
  width: auto;
}

.um-profile .um-left {
  float: none;
}

.um-profile .um-right {
  float: none;
}

.um-profile input[type=submit].um-button {
  max-width: 100%;
  background: #ff7e83 !important;
  border: 1px solid #a5b1ba !important;
  color: #fff !important;
  font-weight: bold !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  margin-left: auto;
}
@media (min-width: 768px) {
  .um-profile input[type=submit].um-button {
    width: 363px;
  }
}
@media (max-width: 767px) {
  .um-profile input[type=submit].um-button {
    width: 80vw;
    margin-right: auto;
  }
}
.um-profile input[type=submit].um-button:hover {
  opacity: 0.8;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

.um-profile .um-button.um-alt {
  max-width: 100%;
  background: #fff !important;
  color: #336565 !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .um-profile .um-button.um-alt {
    width: 176px;
  }
}
@media (max-width: 767px) {
  .um-profile .um-button.um-alt {
    width: 47.07vw;
    margin: 25px auto 0;
  }
}
.um-profile .um-button.um-alt:hover {
  background: #fff !important;
  opacity: 0.8;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

.um-login input[type=submit].um-button,
.um-register input[type=submit].um-button {
  background: #ff7e83 !important;
  border: 1px solid #a5b1ba !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  margin-top: 20px;
  max-width: 100% !important;
}
@media (min-width: 768px) {
  .um-login input[type=submit].um-button,
  .um-register input[type=submit].um-button {
    width: 363px !important;
  }
}
@media (max-width: 767px) {
  .um-login input[type=submit].um-button,
  .um-register input[type=submit].um-button {
    width: 300px !important;
  }
}
.um-login input[type=submit].um-button:hover,
.um-register input[type=submit].um-button:hover {
  opacity: 0.8;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

.um:not(.um-admin) {
  font-size: 16px;
}

.um-login .um-misc-ul {
  list-style: none;
}

.um-password input[type=submit].um-button {
  background: #ff7e83 !important;
  border: 1px solid #a5b1ba !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  max-width: 100% !important;
}
@media (min-width: 768px) {
  .um-password input[type=submit].um-button {
    width: 363px !important;
  }
}
@media (max-width: 767px) {
  .um-password input[type=submit].um-button {
    width: 300px !important;
  }
}
.um-password input[type=submit].um-button:hover {
  opacity: 0.8;
  background: #ff7e83 !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}/*# sourceMappingURL=mypage.css.map */