@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
.marginBottom-x4 {
  margin-bottom: 16px;
}

.marginBottom-x1 {
  margin-bottom: 4px;
}

.marginTop-x4 {
  margin-top: 16px;
}

.marginLeft-x4 {
  margin-left: 16px;
}

.marginLeft-x10 {
  margin-left: 40px;
}

.marginRight-x1 {
  margin-right: 4px;
}

.marginHorizontal-x4 {
  margin-left: 16px;
  margin-right: 16px;
}

.paddingTop-x4 {
  padding-top: 16px;
}

.textAlign-center {
  text-align: center;
}

.textAlign-right {
  text-align: right;
}

.cellTextAlign-right {
  text-align: right;
  padding-right: 1em;
}

.nowrap {
  white-space: nowrap;
}

.prewrap {
  white-space: pre-wrap;
}

.breakWord {
  word-wrap: break-word;
}

.wordBreakAll {
  word-break: break-all;
}

.bold {
  font-weight: bold;
}

.displayInline {
  display: inline;
}

.stickyElement {
  position: sticky;
  top: 70px;
}

@media screen and (min-width: 700px) {
  .stickyElement {
    top: 0;
  }
}
.textEllipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.textEllipsis:active {
  text-overflow: unset;
  overflow: visible;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.textEllipsis-child {
  background-color: white;
}

.colWhite {
  color: #fff;
}

.colWhiteHover:hover {
  color: #fff;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 0.3s linear forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  animation: fadeOut 0.3s linear forwards;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  80% {
    transform: scale(1.3);
    opacity: 1;
  }
  90% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.popIn {
  animation: popIn 0.6s cubic-bezier(1, 0, 1, 1) forwards;
}

.textAndButton {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.va-baseline {
  vertical-align: baseline;
}

:root {
  --transX-before: 0;
  --login-bg-color: #DAEBF5;
  --login-box-bg-color: #FFFFFF;
  --regist-box-bg-color: #EFF0F2;
  --login-registerbox-bg-color: #FAFAFB;
  --confirm-header-bg-color: #fff;
  --font-color-gray: #767676;
  --font-color-cartnum: #FD3202;
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-27: 1.6875rem;
  --font-size-30: 1.875rem;
  --font-size-45: 2.8125rem;
  --login-input-color: rgba(112, 112, 112, 0.58);
  --login-btn-color: #707070;
  --btn-bg-color: rgb(49, 130, 206);
  --box-border-color: #008AE0;
  --label-font-color: #008AE0;
  --label-req-bg: #EF895B;
  --header-height: 80px;
  --header-boarder: #707070;
  --state-font-color: #008AE0;
  --cart-head-bg-color: #CCECFF;
  --cart-border: #707070;
  --font-color-cartdetail: #888888;
  --font-colorc-cart-delete: #3A34E0;
  --footer-bg-color: #008AE0;
  --form-bg-color: #EFF0F2;
  --form-bg-border: #707070;
  --form-cal-bg-color: #CCECFF;
  --form-confirm-border: #008AE0;
  --admin-bg-color: #383F41;
  --admin-sub-bg-color: #5C6263;
  --admin-setting-border: #707070;
  --admin-pcbg-color: #E9E9EA;
  --admin-status-color: #5C6263;
  --admin-font-color: #707070;
  --frame-margin: 15px;
}

html {
  font-size: 16px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.paddingTop {
  padding-top: var(--frame-margin);
}

.header {
  position: fixed;
  top: 0;
  width: 100vw;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--confirm-header-bg-color);
  border-bottom: solid var(--header-boarder) 1px;
  padding-left: 20px;
  z-index: 9;
}

.header-item {
  list-style: none;
  margin-right: 10px;
  text-align: center;
  width: 50px;
  position: relative;
}

.header-item-link {
  color: #007bff;
  cursor: pointer;
}

.header-cart-count {
  position: absolute;
  text-align: center;
  min-width: 40px;
  top: -7px;
  left: 8px;
  letter-spacing: -2px;
  color: var(--font-color-cartnum);
  font-size: var(--font-size-26);
  font-weight: bold;
}

.header-icon-text {
  font-size: var(--font-size-10);
  width: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
}

.header__menu {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
  padding-left: 0;
}

.header__menu > li {
  list-style: none;
  margin-right: 10px;
  text-align: center;
}

.header__menuname {
  font-size: var(--font-size-10);
  margin-top: 5px;
  margin-bottom: 0;
}

.header__register > img {
  width: 25px;
  padding-bottom: 4px;
}

.header__cart:hover, .header__register:hover, .header__mypage:hover {
  text-decoration: none;
}
.header__cart {
  display: block;
  position: relative;
  padding-left: 12px;
}
.header__cart::before {
  content: "";
  position: absolute;
  background-image: url(../img/cart.svg);
  top: 8px;
  left: -1px;
  width: 48px;
  height: 32px;
}
.header__cartnum {
  position: relative;
  text-align: center;
  margin: 0;
  top: -7px;
  left: -1px;
  letter-spacing: -2px;
  color: var(--font-color-cartnum);
  font-size: var(--font-size-26);
  font-weight: bold;
}
.header__mypage > img {
  width: 32px;
}

@media screen and (min-width: 500px) {
  .header {
    padding-left: 50px;
    padding-right: 50px;
  }
  .header__menu > li {
    margin-right: 20px;
  }
}
@media screen and (min-width: 900px) {
  .header {
    padding-left: 50px;
    padding-right: 90px;
  }
  .header__menu > li {
    margin-right: 50px;
  }
}
.parchasingSteps {
  padding-top: var(--header-height);
}
.parchasingSteps__list {
  list-style: none;
  margin: 40px auto 50px auto;
  display: flex;
  justify-content: center;
  padding: 0;
  align-items: center;
}
.parchasingSteps__step, .parchasingSteps__currentStep {
  width: 75px;
  height: 45px;
  font-weight: bold;
  font-size: var(--font-size-14);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888;
  border-bottom: solid #888888 3px;
}
.parchasingSteps__currentStep {
  color: black;
  border-bottom: solid var(--state-font-color) 3px;
}

@media screen and (min-width: 700px) {
  .parchasingSteps__br {
    display: none;
  }
  .parchasingSteps__list {
    margin: 60px auto 80px auto;
  }
  .parchasingSteps__step, .parchasingSteps__currentStep {
    width: 180px;
    font-size: var(--font-size-22);
  }
}
@media screen and (min-width: 800px) {
  .parchasingSteps__br {
    display: none;
  }
  .parchasingSteps__list {
    margin: 60px auto 80px auto;
  }
  .parchasingSteps__step, .parchasingSteps__currentStep {
    width: 200px;
    font-size: var(--font-size-22);
  }
}
.state {
  padding-top: var(--header-height);
}
.state__boxes {
  list-style: none;
  margin: 40px auto 50px auto;
  display: flex;
  justify-content: center;
  padding: 0;
  align-items: center;
}
.state__box, .state__active {
  width: 75px;
  height: 45px;
  font-weight: bold;
  font-size: var(--font-size-14);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888888;
  border-bottom: solid #888888 3px;
}
.state__active {
  color: black;
  border-bottom: solid var(--state-font-color) 3px;
}

@media screen and (min-width: 400px) {
  .state__box, .state__active {
    width: 80px;
  }
}
@media screen and (min-width: 700px) {
  .state__br {
    display: none;
  }
  .state__boxes {
    margin: 60px auto 80px auto;
  }
  .state__box, .state__active {
    width: 180px;
    font-size: var(--font-size-22);
  }
}
@media screen and (min-width: 800px) {
  .state__br {
    display: none;
  }
  .state__boxes {
    margin: 60px auto 80px auto;
  }
  .state__box, .state__active {
    width: 200px;
    font-size: var(--font-size-22);
  }
}
.footer__contents {
  background-color: var(--footer-bg-color);
  color: #FFF;
  height: 140px;
  font-size: var(--font-size-12);
  font-weight: lighter;
  text-align: center;
  padding-top: 8px;
  margin: 0 auto;
}

.footer__contents > p {
  margin-bottom: 10px;
}

.footer__lists {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.footer__list {
  padding: 0 16px;
  border-right: solid #fff 1px;
  margin-bottom: 10px;
}

.footer__list:last-child {
  border: none;
}

.footer__list > a {
  display: block;
  font-size: var(--font-size-12);
  color: #FFF;
}

@media screen and (min-width: 700px) {
  .footer__list {
    padding: 0 32px;
    margin-bottom: 30px;
  }

  .footer__list:nth-last-child(2) {
    border-right: solid #FFF 1px;
  }

  .footer__list:last-child {
    padding-left: 30px;
  }
}
ul.pulldown_menu {
  border: solid var(--admin-setting-border) 1px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  list-style: none;
  padding: 2px;
  width: max-content;
  margin-bottom: 0;
  position: absolute;
  right: 0px;
  top: 60px;
}

ul.pulldown_menu {
  background-color: #FFF;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

ul.pulldown_menu.menuShown {
  visibility: visible;
  opacity: 1;
  transition: 0.5s;
}

ul.pulldown_menu > li {
  padding: 10px 10px;
  font-size: var(--font-size-18);
  color: var(--admin-setting-border);
}

ul.pulldown_menu > li:hover {
  background-color: #91c9f7;
}

ul.pulldown_menu > li a {
  text-decoration: none;
}

.mypage-main {
  padding-top: var(--header-height);
}

.mypage-hello {
  font-size: var(--font-size-14);
  text-align: center;
  margin: 16px 0;
}

.mypage-section {
  max-width: 600px;
  margin: 0 auto 32px auto;
  padding: 0 16px 16px 16px;
}

.mypage-h1 {
  text-align: center;
  margin-bottom: 16px;
  font-size: var(--font-size-22);
}

.mypage-h2 {
  margin-bottom: 8px;
  font-size: var(--font-size-18);
}

.mypage-description {
  font-size: var(--font-size-14);
  color: var(--font-color-gray);
}

.mypage-button {
  cursor: pointer;
  font-size: var(--font-size-18);
  font-weight: bold;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  padding: 8px 16px;
  display: inline-block;
}

a.mypage-button:hover {
  text-decoration: none;
  color: #ffffff;
}

.mypage-dialog-button {
  cursor: pointer;
  font-size: var(--font-size-18);
  font-weight: bold;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  padding: 8px 16px;
  display: inline-block;
  min-width: 150px;
}

.mypage-line {
  display: flex;
  justify-content: space-between;
  column-gap: 15px;
  flex-wrap: wrap;
  line-height: 2;
}

.mypage-line-item-left {
  flex: 1 0 0%;
  white-space: nowrap;
}

.mypage-line-item-right {
  flex: 1 0 0%;
  white-space: nowrap;
  text-align: end;
}

.mypage-box {
  margin-bottom: 16px;
  margin-left: 16px;
}

.mypage-footer-logo {
  margin: 0 auto 8px auto;
  width: fit-content;
}

.mypage-dialog {
  background-color: var(--form-bg-color);
}

.mypage-form {
  background-color: var(--form-bg-color);
  border-radius: 10px;
  border: solid var(--form-bg-border) 1px;
  padding: 32px;
  margin: 0 16px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(117, 117, 117, 0.7);
}

.formItemDesc {
  font-size: var(--font-size-14);
  margin-bottom: 2px;
}

.formItemTitle {
  font-size: var(--font-size-14);
  margin-bottom: 2px;
  color: var(--label-font-color);
  font-weight: bold;
}

.formItemTitle-required {
  font-size: var(--font-size-14);
  margin-bottom: 2px;
  color: var(--label-font-color);
  font-weight: bold;
}
.formItemTitle-required::after {
  content: "必須";
  position: relative;
  top: -1px;
  font-size: var(--font-size-10);
  margin-left: 5px;
  padding: 0 4px 1px 4px;
  line-height: 0.9;
  border-radius: 2px;
  background-color: var(--label-req-bg);
  color: #fff;
}

.formItem-select {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  max-width: calc(100vw - 30px - 6px);
  padding-left: 10px;
  padding-right: 10px;
  border: none;
  border-radius: 5px;
  height: 36px;
  background-color: white;
  color: black;
  cursor: pointer;
}
.formItem-select:focus {
  outline: solid 2px var(--box-border-color);
}

@media screen and (min-width: 500px) {
  .formItem-select {
    max-width: 100%;
  }
}
.formItem-flexBaseline {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.formItem-text-plain {
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  min-height: 36px;
  width: 120px;
  display: inline-block;
  font-size: 16px;
  padding: 6px 6px 6px 10px;
  background-color: #e9e9ea;
}

.formItem-text,
.formItem-number,
.formItem-date {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  width: 100%;
  height: 36px;
}
.formItem-text:focus,
.formItem-number:focus,
.formItem-date:focus {
  outline: solid 2px var(--box-border-color);
}

.formItem-text-2,
.formItem-number-2,
.formItem-date-2 {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  height: 36px;
  width: auto;
}
.formItem-text-2:focus,
.formItem-number-2:focus,
.formItem-date-2:focus {
  outline: solid 2px var(--box-border-color);
}

.formItem-textarea--code, .formItem-textarea--6, .formItem-textarea--2, .formItem-textarea {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  width: 100%;
}
.formItem-textarea--code:focus, .formItem-textarea--6:focus, .formItem-textarea--2:focus, .formItem-textarea:focus {
  outline: solid 2px var(--box-border-color);
}

.formItem-textarea {
  height: 100px;
}

.formItem-textarea--2 {
  height: 52px;
}

.formItem-textarea--6 {
  height: 148px;
}

.formItem-textarea--code {
  height: 100px;
  font-family: monospace;
  font-size: 14px;
}

.formItem-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 5px;
}

.formItem-flexItem-unitPrice {
  flex-basis: 100%;
  max-width: none;
}

.formItem-flexItem-quantity {
  flex-basis: 70%;
  text-align: right;
}

.formItem-flexItem-amount {
  flex-basis: 30%;
  text-align: right;
}

.formItem-flexItem-priceList {
  flex-basis: 100%;
}

@media screen and (min-width: 500px) {
  .formItem-container {
    flex-wrap: nowrap;
  }

  .formItem-flexItem-unitPrice {
    flex-basis: 60%;
    max-width: 70%;
  }

  .formItem-flexItem-quantity,
.formItem-flexItem-amount {
    flex-basis: 20%;
    text-align: right;
  }

  .formItem-flexItem-priceList {
    flex-basis: 80%;
  }
}
.formItem-radio,
.formItem-checkbox {
  outline: solid 1px transparent;
  transition: all 250ms ease 0s;
  margin-left: 8px;
  margin-right: 16px;
  cursor: pointer;
  transform: scale(2);
}
.formItem-radio:focus,
.formItem-checkbox:focus {
  outline: solid 1px var(--box-border-color);
}

.formItem-radioLabel,
.formItem-checkboxLabel {
  font-size: var(--font-size-14);
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-right: 24px;
}

.formItem-checkboxLabel--agree {
  font-size: var(--font-size-14);
  margin-bottom: 2px;
  cursor: pointer;
  white-space: normal;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: var(--font-size-18);
  display: inline-flex;
}

.formItem-radioGroup,
.formItem-checkboxGroup {
  flex-wrap: wrap;
  display: flex;
  row-gap: 14px;
  align-items: center;
  justify-content: start;
  margin-top: 5px;
  margin-bottom: 8px;
}

.formItem-radioGroup-vertical,
.formItem-checkboxGroup-vertical {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.formItem {
  margin-bottom: 16px;
}

.error-message {
  font-size: var(--font-size-14);
  color: #FF0303;
  font-weight: normal;
}

.is-error {
  outline: solid 1px #FF0707;
}

.formItem-button {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding: 16px 40px;
}
.formItem-button:focus {
  outline: solid 2px var(--box-border-color);
}
.formItem-button:disabled {
  background-color: gray;
  border: 2px gray solid;
}
.formItem-button:active:not(:disabled) {
  background-color: #1e4e8c;
}
.formItem-button:hover:not(:disabled) {
  background-color: #2a69ac;
  color: #FFFFFF;
  text-decoration: none;
}

.formItem-button-middle {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  height: 36px;
}
.formItem-button-middle:focus {
  outline: solid 2px var(--box-border-color);
}
.formItem-button-middle:disabled {
  background-color: gray;
  border: 2px gray solid;
}
.formItem-button-middle:active {
  background-color: #1e4e8c;
}
.formItem-button-middle:hover {
  background-color: #2a69ac;
}

.formItem-button-middle2 {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding: 8px 24px;
}
.formItem-button-middle2:focus {
  outline: solid 2px var(--box-border-color);
}
.formItem-button-middle2:disabled {
  background-color: gray;
  border: 2px gray solid;
}
.formItem-button-middle2:active:not(:disabled) {
  background-color: #1e4e8c;
}
.formItem-button-middle2:hover:not(:disabled) {
  background-color: #2a69ac;
  color: #FFFFFF;
  text-decoration: none;
}

.formItem-button-small {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
}
.formItem-button-small:focus {
  outline: solid 2px var(--box-border-color);
}
.formItem-button-small:disabled {
  background-color: gray;
  border: 2px gray solid;
}
.formItem-button-small:active {
  background-color: #1e4e8c;
}
.formItem-button-small:hover {
  background-color: #2a69ac;
}

.nextStepButton {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  display: block;
  border-radius: 10px;
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  margin: 0 auto 70px auto;
}
.nextStepButton:focus {
  outline: solid 2px var(--box-border-color);
}
.nextStepButton:disabled {
  background-color: gray;
  border: 2px gray solid;
}

.formArea-postalCode {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  max-width: 290px;
}

.formItem-postalCode {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  width: 40%;
  height: 36px;
}
.formItem-postalCode:focus {
  outline: solid 2px var(--box-border-color);
}

.formItem-postalCode-searchButton {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: 2px var(--btn-bg-color) solid;
  border-radius: 8px;
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding: 0;
  border: none;
  width: 55%;
  height: 36px;
  font-size: var(--font-size-14);
  font-weight: bold;
}
.formItem-postalCode-searchButton:focus {
  outline: solid 2px var(--box-border-color);
}
.formItem-postalCode-searchButton:disabled {
  background-color: gray;
  border: 2px gray solid;
}
.formItem-postalCode-searchButton:after {
  content: ">";
  padding-left: 5px;
}
.formItem-postalCode-searchButton:active {
  background-color: #1e4e8c;
}
.formItem-postalCode-searchButton:hover {
  background-color: #2a69ac;
}

.formArea-tel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formItem-tel {
  outline: solid 2px transparent;
  transition: all 250ms ease 0s;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  max-width: 100%;
  background-color: white;
  color: black;
  width: 25%;
  height: 36px;
}
.formItem-tel:focus {
  outline: solid 2px var(--box-border-color);
}

.formItem-tel-bar {
  background-color: black;
  width: 10px;
  height: 2px;
}

.confirmationOfWorkDescription {
  text-align: center;
  margin: 30px 15px;
}

.common-input__txt, .common-input__calendar-required, .common-input__contactnum, .common-input__contactnum-required, .common-input__postnum, .common-input__txt-required, .common-input__radiobtn-required, .common-input__pulldown-required, .common-input__postnum-required {
  margin-bottom: 7px;
}
.common-input__txt > label, .common-input__calendar-required > label, .common-input__contactnum > label, .common-input__contactnum-required > label, .common-input__postnum > label, .common-input__txt-required > label, .common-input__radiobtn-required > label, .common-input__pulldown-required > label, .common-input__postnum-required > label {
  color: var(--label-font-color);
  font-size: var(--font-size-14);
  font-weight: bold;
  margin-bottom: 2px;
}
.common-input__txt > input, .common-input__calendar-required > input, .common-input__contactnum > input, .common-input__contactnum-required > input, .common-input__postnum > input, .common-input__txt-required > input, .common-input__radiobtn-required > input, .common-input__pulldown-required > input, .common-input__postnum-required > input {
  width: 100%;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  height: 36px;
}
.common-input__txt > input:focus, .common-input__calendar-required > input:focus, .common-input__contactnum > input:focus, .common-input__contactnum-required > input:focus, .common-input__postnum > input:focus, .common-input__txt-required > input:focus, .common-input__radiobtn-required > input:focus, .common-input__pulldown-required > input:focus, .common-input__postnum-required > input:focus {
  outline: solid 2px var(--box-border-color);
}
.common-input__txt-required > label::after, .common-input__radiobtn-required > label::after, .common-input__contactnum-required > label::after, .common-input__pulldown-required > label::after, .common-input__postnum-required > label::after {
  content: "必須";
  position: relative;
  top: -1px;
  font-size: var(--font-size-10);
  margin-left: 5px;
  padding: 0 4px 1px 4px;
  line-height: 0.9;
  border-radius: 2px;
  color: #fff;
  background-color: var(--label-req-bg);
}
.common-input__postbox {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 290px;
}
.common-input__postnum {
  width: 40%;
}
.common-input__postnum-required {
  width: 40%;
}
.common-input__postbtn {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  width: 55%;
  height: 36px;
  font-size: var(--font-size-14);
  font-weight: bold;
  padding: 0;
  margin-bottom: 7px;
}
.common-input__postbtn:after {
  content: ">";
  padding-left: 5px;
}
.common-input__postbtn:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}
.common-input__pulldown, .common-input__pulldown-required {
  max-width: 290px;
}
.common-input__pulldown > select, .common-input__pulldown-required > select {
  width: 100%;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  height: 36px;
}
.common-input__pulldown > select:focus, .common-input__pulldown-required > select:focus {
  outline: solid 2px var(--box-border-color);
}
.common-input__contactnum > div, .common-input__contactnum-required > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-input__contactnum > div > input, .common-input__contactnum-required > div > input {
  width: 25%;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  height: 36px;
}
.common-input__contactnum > div > input:focus, .common-input__contactnum-required > div > input:focus {
  outline: solid 2px var(--box-border-color);
}
.common-input__contactnum > div > span, .common-input__contactnum-required > div > span {
  font-size: 20px;
  font-weight: bold;
}
.common-input__contactnum-bar {
  background-color: black;
  width: 10px;
  height: 2px;
}
.common-input__radioselect {
  display: flex;
  width: 210px;
  max-width: 245px;
  justify-content: space-between;
  margin-left: 45px;
}
.common-input__radioselect > label {
  font-weight: bold;
}
.common-input__radioselect > label > input {
  margin-right: 30px;
}
.common-input__radioselect-noflex {
  display: block;
  padding-left: 20px;
  font-size: var(--font-size-14);
  font-weight: bold;
}
.common-input__radioselect-noflex input {
  margin-right: 20px;
}
.common-input__calendar {
  margin-bottom: 7px;
}
.common-input__calendar > label {
  color: var(--label-font-color);
  font-size: var(--font-size-14);
  font-weight: bold;
  margin-bottom: 2px;
}
.common-input__calendar > input {
  width: 100%;
  padding-left: 10px;
  border: none;
  border-radius: 5px;
  height: 36px;
}
.common-input__calendar > input:focus {
  outline: solid 2px var(--box-border-color);
}
.common-input__calendar-required > label::after {
  content: "必須";
  position: relative;
  top: -1px;
  font-size: var(--font-size-10);
  margin-left: 5px;
  padding: 0 4px 1px 4px;
  line-height: 0.9;
  border-radius: 2px;
  color: #fff;
  background-color: var(--label-req-bg);
}
.common-input__err {
  font-size: var(--font-size-14);
  color: #FF0303;
  font-weight: normal;
}
.common-input__err-input {
  outline: solid 1px #FF0707;
}
.common-input__err-input:focus {
  outline: solid 2px var(--box-border-color);
}

.element-space {
  margin-bottom: 25px;
}
.element-space__last {
  margin-bottom: 0px;
}

@media screen and (min-width: 375px) {
  .common-input__postnum {
    width: 45%;
  }
  .common-input__postbtn {
    width: 52%;
  }
}
@media screen and (min-width: 600px) {
  .common-input__calendar > input {
    max-width: 210px;
  }
  .common-input__calendar-required {
    max-width: 210px;
  }
}
.listSection {
  padding-top: 90px;
  margin-bottom: 50px;
  display: inline-block;
}

@media screen and (min-width: 700px) {
  .listSection {
    padding-top: 70px;
    padding-left: var(--sidebar-width);
    min-height: calc(100vh + 214px);
  }
}
@media screen and (min-width: 900px) {
  .listSection {
    min-height: calc(100vh + 126px);
  }
}
.listSection2 {
  padding-top: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  display: block;
  width: fit-content;
}

.listSection__head {
  margin: 0 15px 0px 15px;
}

@media screen and (min-width: 900px) {
  .listSection__head {
    display: flex;
    align-items: center;
    margin: 0 15px 20px 15px;
    padding-top: 20px;
    justify-content: space-between;
    max-width: calc(100vw - var(--sidebar-width) - 20px - 15px - 15px);
  }
}
.listSection__frame {
  background-color: #FFF;
  color: var(--admin-status-color);
  margin: 0 var(--frame-margin) 15px var(--frame-margin);
  border-radius: 10px 10px 0 0;
}

.listSection__newItem {
  text-align: right;
  margin: 0 15px 15px 15px;
  padding-top: 15px;
  max-width: calc(100vw - 60px);
}

@media screen and (min-width: 700px) {
  .listSection__newItem {
    max-width: calc(100vw - var(--sidebar-width) - 4 * var(--frame-margin));
  }
}
.listSection__bottomItem {
  text-align: center;
  margin: 0 15px 15px 15px;
  padding-bottom: 15px;
  max-width: calc(100vw - 60px);
}

@media screen and (min-width: 700px) {
  .listSection__bottomItem {
    max-width: calc(100vw - 60px - var(--sidebar-width));
  }
}
.listSection__bottomItem2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
  align-items: baseline;
  justify-content: center;
}

.listSection__topItems {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 15px 15px 15px;
  padding-top: 15px;
  max-width: calc(100vw - 60px);
}

@media screen and (min-width: 700px) {
  .listSection__topItems {
    max-width: calc(100vw - 60px - var(--sidebar-width));
  }
}
.listSection__pageCountInfo {
  max-width: calc(100vw - 4 * var(--frame-margin));
  margin: 0 var(--frame-margin) 15px var(--frame-margin);
}

@media screen and (min-width: 700px) {
  .listSection__pageCountInfo {
    max-width: calc(100vw - var(--sidebar-width) - 4 * var(--frame-margin));
    display: flex;
    align-items: baseline;
    gap: 15px;
    justify-content: flex-end;
  }
}
.listSection__title {
  margin-bottom: 15px;
  padding-top: 20px;
  font-size: var(--font-size-22);
}

@media screen and (min-width: 900px) {
  .listSection__title {
    margin-bottom: 0;
    padding-top: 0;
  }
}
.listSection__totalnum {
  text-align: right;
}

.listSection__displaysetting {
  text-align: right;
}

.listSection__sortbox > select,
.listSection__displaysetting > select {
  color: var(--admin-status-color);
}

@media screen and (min-width: 900px) {
  .listSection__displaysetting > label {
    margin-bottom: 0;
  }
}
.listSection__sortbox {
  margin: 0 auto 15px auto;
}

@media screen and (min-width: 900px) {
  .listSection__sortbox {
    margin-bottom: 0;
  }
}
.listSection__aboutnum {
  width: 95%;
  margin: 0 auto;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 900px) {
  .listSection__aboutnum {
    width: 40%;
    margin-bottom: 0;
    align-items: center;
    padding-bottom: 0px;
  }
}
.listSection__table {
  padding-bottom: 20px;
  width: 95%;
  box-sizing: border-box;
}

.listSection__detail {
  table-layout: fixed;
  margin-left: 16px;
  margin-right: 16px;
}

.listSection__detail > thead > tr {
  border-bottom: solid var(--admin-setting-border) 2px;
}

.listSection__detail > tbody > tr {
  border-bottom: solid var(--admin-setting-border) 1px;
}

.listSection__page {
  padding-bottom: 20px;
  max-width: 100vw;
}

@media screen and (min-width: 700px) {
  .listSection__page {
    max-width: calc(100vw - var(--sidebar-width));
  }

  .listSection2 .listSection__page {
    max-width: 100vw;
  }
}
.listSection__pagenation {
  text-align: center;
  padding: 0;
  margin-bottom: 0;
}

.listSection__pagenation__li {
  display: inline-block;
  padding: 1px 12px;
  margin: 0 3px;
  border: 1px #ccc solid;
  border-radius: 5px/5px;
  cursor: pointer;
}

.listSection__pagenation__li.paging-current {
  background: none #398AD9;
  color: white;
  font-weight: 700;
  pointer-events: none;
  border: 1px none;
}

.listSection thead th {
  position: sticky;
  top: 70px;
  z-index: 1;
  background-color: #FFF;
}

@media screen and (min-width: 700px) {
  .listSection thead th {
    top: 0px;
  }
}
@media screen and (min-width: 900px) {
  .listSection thead th {
    top: 0px;
  }
}
.sticky-thead {
  background-color: white;
}

.sticky-thead th {
  position: sticky;
  top: 80px;
  z-index: 1;
  background-color: #FFF;
}

th.table__45 {
  width: 45px;
}

th.table__50 {
  width: 50px;
}

th.table__75 {
  width: 75px;
}

th.table__100 {
  width: 100px;
}

th.table__125 {
  width: 125px;
}

th.table__150 {
  width: 150px;
}

th.table__175 {
  width: 175px;
}

th.table__200 {
  width: 200px;
}

th.table__225 {
  width: 225px;
}

th.table__250 {
  width: 250px;
}

th.table__300 {
  width: 300px;
}

th.table__500 {
  width: 500px;
}

.numberColumn {
  text-align: right;
  padding-right: 16px;
}

@media screen and (min-width: 700px) {
  .listSection__frame-stick {
    position: sticky;
    top: 50px;
    height: calc(100vh - 70px);
  }
}
.formSection {
  padding-top: 90px;
}

@media screen and (min-width: 700px) {
  .formSection {
    padding-top: 70px;
    padding-left: var(--sidebar-width);
  }
}
.formSection__frame {
  padding: 16px 16px 24px 16px;
  max-width: calc(100vw - 15px - 15px);
  background-color: #FFF;
  color: var(--admin-status-color);
  margin: 0 15px 15px 15px;
  border-radius: 10px;
}

@media screen and (min-width: 700px) {
  .formSection__frame {
    max-width: calc(100vw - var(--sidebar-width) - 15px - 15px);
  }
}
.formSection__subFrame {
  padding: 16px 16px 24px 16px;
  max-width: calc(100vw - 15px - 16px - 1px - 1px - 16px);
  background-color: #00000011;
  color: var(--admin-status-color);
  margin: 8px 1px 15px 1px;
  border-radius: 10px;
}

@media screen and (min-width: 700px) {
  .formSection__subFrame {
    max-width: calc(100vw - var(--sidebar-width) - 15px - 16px - 1px - 1px - 16px);
  }
}
.formSection__subFrame2 {
  padding: 20px 20px 30px 20px;
  max-width: calc(100vw - 20px - 15px - 10px - 1px - 1px - 8px - 8px);
  background-color: #00000011;
  color: var(--admin-status-color);
  margin: 8px 1px 15px 1px;
  border-radius: 10px;
}

.formSection__title1, .formSection-flex__title1 {
  text-align: center;
  margin-bottom: 16px;
  font-size: var(--font-size-22);
  max-width: 100vw;
}

.formSection__title {
  text-align: center;
  margin-bottom: 8px;
  font-size: var(--font-size-18);
}

.formSection__title2_left {
  margin-bottom: 8px;
  font-size: var(--font-size-18);
}

.formSection__title3 {
  margin-bottom: 8px;
  font-size: var(--font-size-16);
}

.formSection__content {
  margin-bottom: 16px;
}

.formSection__content:last-child {
  margin-bottom: 0;
}

.formSection__content_flex {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
}

.formSection__btns {
  width: 100%;
  margin-right: auto;
  margin-top: 5px;
  display: flex;
  max-width: 350px;
  justify-content: space-between;
}

.formSection__buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.formSection__buttons_left {
  display: flex;
  gap: 15px;
  justify-content: start;
  flex-wrap: wrap;
}

.formSection__buttons--vertical {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.formSection-flex__title1 {
  flex: 0 0 100%;
  margin-bottom: 0;
}

.formSection-flex {
  padding-top: 90px;
}

.formSection-flex__frame {
  padding: 16px 16px 24px 16px;
  max-width: calc(100vw - 15px - 15px);
  background-color: #FFF;
  color: var(--admin-status-color);
  margin: 0 15px 15px 15px;
  border-radius: 10px;
}

@media screen and (min-width: 700px) {
  .formSection-flex {
    padding-top: 70px;
    padding-left: calc(var(--sidebar-width) + 16px);
    padding-right: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .formSection-flex__frame {
    min-width: 300px;
    margin: 0;
    flex: 1 1 20%;
  }
}
.formSection__noListStyle {
  list-style-type: none;
}

.formSection-list-horizontal-30 {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-14);
  column-gap: 30px;
  padding: 0;
}

.formSection-list-horizontal-service {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-14);
  column-gap: 10px;
  padding: 0 50px 0 0;
  margin-bottom: 0;
}

.login {
  background-color: var(--login-bg-color);
}

.login__logo {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

@media screen and (min-width: 390px) {
  .login__logo {
    padding-top: 55px;
    padding-bottom: 30px;
  }
}
.login__logo__customer {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

.login__box,
.login__box__customer,
.login__registerbox {
  background-color: var(--login-box-bg-color);
  margin: 0 auto;
  width: 90%;
  max-width: 360px;
  padding: 13px 9.5% 22px 9.5%;
}

@media screen and (min-width: 390px) {
  .login__box,
.login__box__customer,
.login__registerbox {
    padding: 30px 35px 40px 35px;
  }
}
.login__box {
  border-radius: 20px;
}

.login__box__customer {
  border-radius: 20px 20px 0 0;
  margin-top: 55px;
}

.login__title {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 12px;
}

@media screen and (min-width: 390px) {
  .login__title {
    font-size: var(--font-size-18);
    margin-bottom: 20px;
  }
}
.login__explain {
  font-size: var(--font-size-12);
  font-weight: bold;
  margin-bottom: 12px;
}

@media screen and (min-width: 390px) {
  .login__explain {
    font-size: var(--font-size-14);
    margin-bottom: 28px;
  }
}
.login__input {
  margin-bottom: 15px;
  height: 40px;
  width: 100%;
  border-radius: 4px;
  border: solid var(--login-input-color) 1px;
  padding-left: 10px;
}

.login__input:focus {
  outline: solid 2px var(--box-border-color);
}

@media screen and (min-width: 390px) {
  .login__input {
    margin-bottom: 20px;
  }
}
.login__btn {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  width: 100%;
  font-size: var(--font-size-14);
  font-weight: bold;
  padding: 9px 6px 10px 6px;
}

@media screen and (min-width: 390px) {
  .login__btn {
    margin-top: 10px;
  }
}
.login__btn:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

.login__txt {
  color: var(--font-color-gray);
  font-size: var(--font-size-13);
  font-weight: bold;
  margin: 6px 0;
  text-align: center;
}

@media screen and (min-width: 390px) {
  .login__txt {
    margin: 10px 0;
  }
}
.login__googlebtn {
  position: relative;
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--font-color-gray);
  line-height: 2.6;
  border: solid var(--login-btn-color) 1px;
  border-radius: 10px;
  width: 100%;
  height: 36px;
  font-size: var(--font-size-14);
  font-weight: bold;
  padding-left: 5px;
  background-color: #FFFFFF;
}

.login__googlebtn:before {
  content: "";
  background: url(../img/google_icon.svg);
  position: absolute;
  top: 7px;
  left: 22px;
  width: 20px;
  height: 20px;
}

.login__googlebtn:hover {
  text-decoration: none;
  color: var(--font-color-gray);
  opacity: 0.6;
}

@media screen and (min-width: 390px) {
  .login__googlebtn:before {
    left: 45px;
  }

  .login__googlebtn:hover {
    text-decoration: none;
    color: var(--font-color-gray);
    opacity: 0.6;
  }
}
.login__registerbox {
  background-color: var(--login-registerbox-bg-color);
  border-radius: 0 0 20px 20px;
}

.login__register {
  font-size: var(--font-size-14);
  font-weight: bold;
  margin-bottom: 11px;
}

@media screen and (min-width: 390px) {
  .login__register {
    margin-bottom: 21px;
  }
}
.login__err {
  font-size: var(--font-size-14);
  color: #FF0303;
}

.login-customer-passwordReset {
  margin: 16px auto;
  width: fit-content;
  font-size: var(--font-size-13);
  font-weight: bold;
}

.orderForm_container {
  max-width: 800px;
  margin: 0 auto 40px auto;
  padding: 30px 15px;
}

@media screen and (min-width: 500px) {
  .orderForm_container {
    padding: 35px 35px 35px 25px;
  }
}
.orderForm_body {
  background-color: var(--regist-box-bg-color);
}

.cart__cartItem {
  width: calc(100vw - 32px);
  max-width: 800px;
  margin: 10px auto;
  border-radius: 5px;
  border: solid var(--cart-border) 1px;
  box-shadow: 3px 4px 0px rgba(0, 0, 0, 0.16);
}

.cart__cartItemHeader {
  background-color: var(--cart-head-bg-color);
  border-radius: 5px 5px 0 0;
  padding: 7px 15px 10px 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
}

@media screen and (min-width: 700px) {
  .cart__cartItemHeader {
    padding: 15px 50px;
  }
}
.cart__serviceName {
  font-weight: bold;
  font-size: var(--font-size-22);
}

.cart__cartItemTotalAmount {
  font-weight: bold;
  font-size: var(--font-size-20);
  text-align: end;
  white-space: nowrap;
  flex: 1 0 0%;
}

.cart__cartItemDetailList {
  padding: 12px 15px 14px 15px;
}

@media screen and (min-width: 700px) {
  .cart__cartItemDetailList {
    padding: 15px 90px 14px 90px;
  }
}
.cart__cartItemDetail {
  color: var(--font-color-cartdetail);
  font-size: var(--font-size-14);
  margin-bottom: 10px;
}

.cart__cartItemDetailMain {
  display: flex;
  justify-content: space-between;
  column-gap: 15px;
  flex-wrap: wrap;
}

.cart__serviceDetailName {
  flex: 1 0 0%;
  white-space: nowrap;
  list-style: disc;
  display: list-item;
  margin-left: 22px;
  margin-bottom: 3px;
}

.cart__priceDetail {
  flex: 1 0 0%;
  white-space: nowrap;
  text-align: end;
  margin-bottom: 3px;
}

.cart__cartItemDetailText {
  padding-left: 23px;
  margin-bottom: 3px;
  white-space: pre-wrap;
}

@media screen and (min-width: 700px) {
  .cart__cartItemDetailText {
    padding-left: 23px;
  }
}
.cart__editButton,
.cart__deleteButton {
  border: none;
  background-color: transparent;
  color: var(--font-colorc-cart-delete);
}

.cart__buttonContainer {
  text-align: right;
  padding: 0 15px 15px 15px;
}

@media screen and (min-width: 700px) {
  .cart__buttonContainer {
    padding: 0 90px 15px 90px;
  }
}
.cart__total {
  border-radius: 5px;
  margin: 20px auto;
  background-color: var(--cart-head-bg-color);
  width: calc(100vw - 32px);
  max-width: 800px;
}

.cart__totalRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 15px 10px 15px;
}

@media screen and (min-width: 700px) {
  .cart__totalRow {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.cart__totalRowItem {
  font-size: var(--font-size-22);
  font-weight: bold;
}

.cart__nextStepButton {
  display: block;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  margin: 0 auto 45px auto;
  max-width: 745px;
  width: calc(100vw - 32px);
}
.cart__nextStepButton:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

.cart__noItemScreen {
  text-align: center;
}

.cart__orderForm {
  background-color: var(--regist-box-bg-color);
  border-radius: 5px;
}

.cart__editIframe {
  width: 100%;
  border: none;
  border-radius: 5px;
}

.cart__errors {
  width: calc(100vw - 32px);
  max-width: 800px;
  margin: 10px auto;
  border-radius: 5px;
  border: solid var(--form-confirm-border) 2px;
  padding: 20px 30px;
}

.register {
  background-color: var(--login-bg-color);
}
.register__frame, .register__submit, .register__contents {
  width: 90%;
  max-width: 560px;
}
.register__title {
  text-align: center;
  width: 210px;
  margin: 120px auto 40px auto;
  padding-bottom: 7px;
  border-bottom: solid var(--box-border-color) 3px;
  font-size: var(--font-size-30);
}
.register__contents {
  background-color: var(--regist-box-bg-color);
  margin: 0 auto 40px auto;
  border: solid var(--box-border-color) 3px;
  border-radius: 20px;
  padding: 30px 15px;
}
.register__content {
  margin-bottom: 25px;
}
.register__submit {
  display: block;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  height: 54px;
  font-size: var(--font-size-18);
  font-weight: bold;
  margin: 0 auto 70px auto;
}
.register__submit:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

@media screen and (min-width: 500px) {
  .register__title {
    margin: 155px auto 40px auto;
    font-size: var(--font-size-45);
    width: 290px;
  }
  .register__contents {
    padding: 35px 35px 35px 25px;
  }
  .register__submit {
    font-size: var(--font-size-20);
  }
}
.house__frame,
.userinfo__submit,
.house__boxes,
.userinfo__boxes,
.reserve__boxes {
  width: 90%;
  max-width: 910px;
  margin: 0 auto;
}

.house__boxes,
.userinfo__boxes,
.reserve__boxes {
  margin-bottom: 30px;
  background-color: var(--form-bg-color);
  border-radius: 10px;
  border: solid var(--form-bg-border) 1px;
  padding: 30px 15px;
}

.reserve__detail {
  font-size: var(--font-size-14);
  font-weight: normal;
}

.reserve__detail-list,
.userinfo__detail-list {
  padding-left: 23px;
  font-size: var(--font-size-14);
  font-weight: normal;
}

.reserve__detail-flex {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-14);
  font-weight: normal;
}

.reserve__detail-flex > li {
  padding-right: 30px;
}

.reserve__inputbox {
  margin-bottom: 30px;
}

@media screen and (min-width: 600px) {
  .reserve__inputbox {
    display: flex;
    justify-content: space-between;
  }
}
.reserve__inputbox:last-child {
  margin-bottom: 0;
}

.reserve__checkbox,
.userinfo__checkbox {
  font-size: var(--font-size-18);
  font-weight: bold;
}

.reserve__checkbox > input,
.userinfo__checkbox > input {
  margin-left: 10px;
  margin-right: 20px;
  transform: scale(1.2);
}

@media screen and (min-width: 600px) {
  .reserve__checkbox,
.userinfo__checkbox {
    margin-top: 40px;
  }
}
.reserve__textarea-large {
  width: 100%;
  border: none;
  height: 140px;
}

.reserve__textarea-large:focus {
  outline: solid 2px var(--box-border-color);
}

.reserve__textarea-middle {
  width: 100%;
  border: none;
  height: 100px;
}

.reserve__textarea-middle:focus {
  outline: solid 2px var(--box-border-color);
}

.reserve__textarea-small {
  width: 100%;
  border: none;
  height: 60px;
  margin-top: 10px;
}

.reserve__textarea-small:focus {
  outline: solid 2px var(--box-border-color);
}

.reserve__title-small {
  font-size: 14px;
}

.userinfo__br {
  display: none;
}

@media screen and (min-width: 650px) {
  .userinfo__br {
    display: block;
  }
}
.userinfo__content {
  margin-bottom: 30px;
}

.userinfo__content:last-child {
  margin-bottom: 0;
}

.userinfo__box {
  margin-bottom: 30px;
}

.userinfo__box:last-child {
  margin-bottom: 0;
}

.userinfo__checkbox {
  padding-left: 0;
  margin-bottom: 0;
}

.userinfo__checkbox > input {
  margin-right: 10px;
}

.userinfo__submit {
  display: block;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  background-color: var(--btn-bg-color);
  height: 54px;
  font-size: var(--font-size-24);
  font-weight: bold;
  margin: 0 auto 30px auto;
  max-width: 750px;
}

.userinfo__submit:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

@media screen and (min-width: 600px) {
  .userinfo__submit {
    font-size: var(--font-size-27);
  }
}
.form__box-title {
  font-weight: bold;
  font-size: var(--font-size-18);
  margin-bottom: 15px;
}

@media screen and (min-width: 600px) {
  .reserve__explain {
    flex-basis: 30%;
  }

  .reserve__inputfield {
    flex-basis: 68%;
  }

  .userinfo__box {
    display: flex;
    justify-content: space-between;
  }

  .userinfo__explain {
    flex-basis: 30%;
  }

  .userinfo__inputfield {
    flex-basis: 68%;
  }
}
.userinfo__orderConfirmationItemDiv {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
}

@media screen and (min-width: 800px) {
  .house__boxes,
.reserve__boxes,
.userinfo__boxes {
    padding: 30px 70px;
  }
}
.calendar__detail {
  border-collapse: collapse;
  border: solid var(--form-bg-border) 1px;
  text-align: center;
  user-select: none;
  background-color: #FFF;
}
.calendar__detail > tbody > tr > th, .calendar__detail > tbody > tr > td {
  flex-shrink: 0;
  width: 35px;
  height: 45px;
  border: solid var(--form-bg-border) 1px;
}
.calendar__detail > tbody > tr > td.selected {
  background-color: var(--label-req-bg);
}

.calendar__header-tr {
  background-color: var(--form-cal-bg-color);
}

.calendar__container {
  min-width: 245px;
}

.calendar__title {
  text-align: center;
}

.calendar__list {
  display: flex;
  column-gap: 10px;
  overflow-x: scroll;
  width: 100%;
  height: 100%;
  margin: 0 auto 30px auto;
}

.calendar__today {
  background-color: var(--form-cal-bg-color);
}

.congestionDegree1,
.congestionDegree2 {
  cursor: pointer;
}

.congestionDegree3 {
  cursor: not-allowed;
}

.form-confirm__section {
  width: 90%;
  border: solid var(--form-confirm-border) 2px;
  border-radius: 10px;
  margin: 0 auto 20px auto;
  padding: 0px 30px;
  max-width: 910px;
}

@media screen and (min-width: 750px) {
  .form-confirm__section {
    padding: 0px 30px;
  }
}
.form-confirm__boxes-2 {
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and (min-width: 750px) {
  .form-confirm__boxes-2 {
    padding: 50px 70px;
    margin: 0 auto;
  }
}
.form-confirm__line {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: solid var(--form-bg-border) 1px;
}

.form-confirm__boxes {
  padding-top: 20px;
  padding-bottom: 20px;
}

@media screen and (min-width: 750px) {
  .form-confirm__boxes {
    padding: 50px 70px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
}
.form-confirm__box {
  margin-bottom: 20px;
}

.form-confirm__box:last-child {
  margin-bottom: 0;
}

.form-confirm__left {
  margin-bottom: 10px;
}

@media screen and (min-width: 750px) {
  .form-confirm__left,
.form-confirm__right {
    flex-basis: 47.5%;
  }
}
.form-confirm__detail {
  padding-left: 20px;
}

.form-confirm__detail-min > p {
  margin-bottom: 2px;
}

.form-confirm__detail-min > p:last-child {
  margin-bottom: 0;
}

.form-confirm__detail-middle > p,
.form-confirm__detail-middle > div {
  margin-bottom: 10px;
}

.form-confirm__detail-middle > p:last-child,
.form-confirm__detail-middle > div:last-child {
  margin-bottom: 0;
}

.form-confirm__title,
.form-confirm__subtitle {
  font-size: var(--font-size-14);
  font-weight: bold;
}

@media screen and (min-width: 750px) {
  .form-confirm__title {
    font-size: var(--font-size-18);
  }
}
.form-confirm__txt {
  font-size: var(--font-size-14);
  font-weight: normal;
}

.form-confirm__txtbox > p {
  margin-bottom: 8px;
  line-height: 1.1;
}

.form-confirm__btn {
  width: 90%;
  margin: 0 auto 10px auto;
}

@media screen and (min-width: 750px) {
  .form-confirm__btn {
    width: 720px;
    display: flex;
    justify-content: space-between;
  }
}
.form-confirm__btn > input {
  display: block;
  border-radius: 10px;
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  width: 100%;
  margin-bottom: 20px;
}

.form-confirm__btn > input:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

@media screen and (min-width: 750px) {
  .form-confirm__btn > input {
    font-size: var(--font-size-27);
    width: 305px;
  }
}
.form-confirm__btn-next {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: none;
}

.form-confirm__btn-rev {
  background-color: #fff;
  color: var(--btn-bg-color);
  border: solid var(--btn-bg-color) 1px;
}

.form-confirm__btn-rev,
.form-confirm__btn-next {
  display: block;
  border-radius: 10px;
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  width: 100%;
  margin-bottom: 20px;
}

.form-confirm__btn-rev:hover,
.form-confirm__btn-next:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

.form-confirm__btn-next {
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: none;
}

.form-confirm__btn-rev {
  background-color: #fff;
  color: var(--btn-bg-color);
  border: solid var(--btn-bg-color) 1px;
}

.order-complete__box {
  width: 90%;
  border: solid var(--form-confirm-border) 2px;
  border-radius: 10px;
  margin: 0 auto 45px auto;
  padding: 50px 20px;
  max-width: 910px;
}
.order-complete__txtbox {
  margin: 0 auto;
  width: 95%;
  max-width: 270px;
}
.order-complete__paragraph {
  font-weight: bold;
  font-size: var(--font-size-18);
}
.order-complete__paragraph:first-child {
  margin-bottom: 20px;
}
.order-complete__btn {
  display: block;
  width: 90%;
  max-width: 320px;
  margin: 0 auto 80px auto;
  border-radius: 10px;
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: none;
}
.order-complete__btn:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

.myPageButton {
  display: grid;
  place-content: center;
  width: 90%;
  max-width: 320px;
  margin: 0 auto 80px auto;
  border-radius: 10px;
  height: 70px;
  font-size: var(--font-size-24);
  font-weight: bold;
  background-color: var(--btn-bg-color);
  color: #FFFFFF;
  border: none;
}
.myPageButton:hover {
  text-decoration: none;
  color: white;
  opacity: 0.6;
}

@media screen and (min-width: 700px) {
  .myPageButton {
    font-size: var(--font-size-27);
  }
}
@media screen and (min-width: 700px) {
  .order-complete__txtbox {
    max-width: 320px;
  }
  .order-complete__paragraph {
    font-size: var(--font-size-22);
  }
  .order-complete__btn {
    font-size: var(--font-size-27);
  }
}
.orderDetail__cartItemDetailList {
  padding-left: 0;
}

.orderDetail__cartItemDetail {
  color: var(--font-color-cartdetail);
  font-size: var(--font-size-14);
  border-bottom: solid 1px silver;
  list-style: none;
}

.orderDetail__cartItemDetail-right {
  color: var(--font-color-cartdetail);
  font-size: var(--font-size-14);
  border-bottom: solid 1px silver;
  list-style: none;
  text-align: right;
}

.orderDetail__cartItemDetailMain {
  display: flex;
  justify-content: space-between;
  column-gap: 15px;
  flex-wrap: wrap;
}

.orderDetail__serviceDetailName {
  flex: 1 0 0%;
  white-space: nowrap;
}

.orderDetail__priceDetail {
  flex: 1 0 0%;
  white-space: nowrap;
  text-align: end;
}

.orderDetail__cartItemDetailText {
  padding-left: 23px;
  margin-bottom: 3px;
  white-space: pre-wrap;
}

.orderDetail__couponService {
  width: fit-content;
  margin-left: auto;
}

.chatSection {
  min-height: calc(100vh - 90px);
  padding-top: 90px;
}

@media screen and (min-width: 700px) {
  .chatSection {
    min-height: calc(100vh - 70px);
    padding-top: 70px;
    padding-left: var(--sidebar-width);
    max-width: calc(var(--sidebar-width) + 732px);
  }
}
.chatSection__frame {
  background-color: #7090bf;
  max-width: 700px;
  color: #000;
  margin: 0 var(--frame-margin) 0 var(--frame-margin);
  border-radius: 10px 10px 0 0;
  min-height: calc(100vh - 90px - 25px - 33px);
  padding-bottom: 120px;
}

@media screen and (min-width: 700px) {
  .chatSection__frame {
    min-height: calc(100vh - 70px - 25px - 33px);
    margin: 0 auto;
  }
}
.chatSection__inputFrame {
  background-color: #FFF;
  height: 120px;
  width: 100%;
  max-width: 700px;
  left: 0;
  position: fixed;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  column-gap: 4px;
  padding: 2px;
}

@media screen and (min-width: 700px) {
  .chatSection__inputFrame {
    width: 700px;
    left: calc(50% - 350px);
  }
}
.chatSection__inputFrame-attachment {
  flex: 0 1 64px;
}

.chatSection__inputFrame-sendButton {
  flex: 0 1 64px;
}

.chatSection__inputFrame-center {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(100vw - 68px);
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}

@media screen and (min-width: 700px) {
  .chatSection__inputFrame-center {
    flex-basis: calc(100vw - 68px - var(--sidebar-width));
  }
}
@media screen and (min-width: 940px) {
  .chatSection__inputFrame-center {
    flex-basis: 632px;
  }
}
.chatSection__inputFrame-fileContainer {
  display: flex;
  column-gap: 4px;
}

.chatSection__inputFrame-file {
  border-radius: 5px;
  border: 1px solid var(--admin-setting-border);
  width: 100%;
}

.chatSection__inputFrame-messageTemplateId {
  border: solid var(--admin-setting-border) 1px;
  border-radius: 5px;
  height: 36px;
  background-color: white;
  color: var(--admin-font-color);
  cursor: pointer;
  max-width: calc(100vw - 68px);
}
.chatSection__inputFrame-messageTemplateId:focus {
  outline: none;
  box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px;
}

@media screen and (min-width: 700px) {
  .chatSection__inputFrame-messageTemplateId {
    max-width: calc(100vw - 68px - var(--sidebar-width));
  }
}
@media screen and (min-width: 940px) {
  .chatSection__inputFrame-messageTemplateId {
    max-width: 632px;
  }
}
@media screen and (max-width: 499px) {
  .chatSection__inputFrame-hideUnder500px {
    display: none;
  }
}
.chatSection__background {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - (var(--header-height) + 42px + 32px + 33px + 16px + 120px));
}

@media screen and (min-width: 700px) {
  .chatSection__background {
    min-height: calc(100vh - 264px);
  }
}
.chatSection-tenantMessage {
  position: relative;
  margin-left: 0;
  margin-right: auto;
  width: fit-content;
  margin-bottom: 16px;
}

.chatSection-tenantMessage-header {
  margin-left: 4px;
  font-size: 13px;
}

.chatSection-tenantMessage-body {
  display: inline-block;
  white-space: pre-wrap;
  margin: 4px;
  padding: 4px 12px;
  border-radius: 10px;
  width: fit-content;
  max-width: 620px;
  background-color: #FFF;
}

.chatSection-tenantMessage-body-hidden {
  display: inline-block;
  white-space: pre-wrap;
  margin: 4px;
  padding: 4px 12px;
  border-radius: 10px;
  width: fit-content;
  max-width: 620px;
  background-color: #ffe699;
}

.chatSection-tenantMessage-read {
  display: inline;
  font-size: x-small;
  color: white;
}

.chatSection-customerMessage {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  width: fit-content;
  margin-bottom: 16px;
}

.chatSection-customerMessage-header {
  margin-left: auto;
  margin-right: 4px;
  width: fit-content;
  font-size: 13px;
}

.chatSection-customerMessage-bodyContainer {
  display: flex;
  flex-direction: row-reverse;
  align-items: end;
}

.chatSection-customerMessage-body {
  white-space: pre-wrap;
  background-color: #84e347;
  margin: 4px;
  padding: 4px 12px;
  border-radius: 10px;
  width: fit-content;
  max-width: 620px;
}

.chatSection-customerMessage-read {
  display: inline;
  font-size: x-small;
  color: white;
}

.chatSection-tenantMessage-attachment-image {
  height: auto;
  max-width: min(600px, 90%);
}

.chatSection-customerMessage-attachment > .inlineImage {
  margin: 0 4px 0 auto;
}

.chatSection-customerMessage-attachment-image {
  height: auto;
  max-width: min(600px, 90%);
}

.chatSection-inlineImage {
  text-align: right;
}

.chatSection-downloadLink {
  background-color: white;
  margin: 0 4px;
  padding: 4px 12px;
  border-radius: 10px;
  width: fit-content;
  max-width: 600px;
}

:root {
  --sidebar-width: 0;
}

html,
body {
  height: 100%;
}

body > footer {
  position: sticky;
  top: 100vh;
}

body > footer {
  left: 0;
}