@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
body {
  margin: 0 0;
}
body * {
  color: slategray;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5em;
  box-sizing: border-box;
}
body header,
body footer {
  text-align: center;
  background-color: whitesmoke;
  color: slategray;
  position: relative;
  padding: 1em;
}
body header a,
body footer a {
  color: slategray;
}
body header a.logo,
body footer a.logo {
  display: inline-block;
  font-size: 0.75em;
  margin-bottom: 1em;
}
body header img.logo,
body footer img.logo {
  height: 3em;
  margin-right: 0.5em;
}
body header h1,
body footer h1 {
  margin: 0;
  font-size: 1.75em;
}
body nav.mymenu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
}
body nav.mymenu a.toggle {
  position: absolute;
  top: 1em;
  left: 1em;
  z-index: 1;
  display: inline-block;
  width: 2em;
  height: 1em;
  margin: 1em 0 0 0;
  padding: 0;
  line-height: 1;
  float: left;
  clear: left;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0);
  border-color: slategray;
  border-style: solid;
  border-radius: 100% 100% 0 0;
}
body nav.mymenu a.toggle:before {
  content: '';
  display: inline-block;
  border-color: slategray;
  border-style: solid;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0.3em;
  top: -1.2em;
  box-sizing: border-box;
}
body nav.mymenu a.toggle:after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 0.5em;
  position: absolute;
  left: 1.1em;
  top: -1.75em;
  opacity: 0;
  transition: opacity 0.25s;
  box-sizing: border-box;
  border-color: forestgreen;
  border-width: 0 0 2px 0;
  border-radius: 100%;
  border-style: solid;
}
body nav.mymenu a.profile {
  position: absolute;
  top: 1em;
  left: 1em;
  z-index: 1;
  display: inline-block;
  width: 2em;
  height: 2em;
  margin: 0;
  padding: 0;
  line-height: 1;
  float: left;
  clear: left;
  box-sizing: border-box;
  border: thin solid;
}
body nav.mymenu a.profile img {
  width: 100%;
  height: auto;
}
body nav.mymenu a.profile img[src=''] {
  display: none;
}
body nav.mymenu a.profile:has(img[src='']) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22black%22%20/%3E%3Cpath%20d%3D%22M16%2048%20A16%2016%200%200%201%2048%2048%22%20fill%3D%22black%22%20/%3E%3C/svg%3E");
  background-size: cover;
}
body nav.mymenu.open a.toggle:after {
  opacity: 1;
}
body nav.menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 400px;
  height: 1px;
}
body nav.menu a.toggle {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 1;
  display: inline-block;
  width: 2em;
  height: 2em;
  padding: 0;
  line-height: 1;
  float: right;
  clear: right;
  position: relative;
  border: none;
  box-sizing: border-box;
}
body nav.menu a.toggle:hover {
  background-color: inherit;
}
body nav.menu a.toggle:before {
  content: '';
  display: inline-block;
  border-width: 0.4em 0 0.4em 0;
  border-color: slategray;
  border-style: solid;
  width: 2em;
  height: 1.2em;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, rotate 0.25s;
}
body nav.menu a.toggle:after {
  content: '';
  display: inline-block;
  border-width: 0 0 0.4em 0;
  border-color: slategray;
  border-style: solid;
  width: 2em;
  height: 2em;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transition: left 0.25s, top 0.25s, height 0.25s, width 0.25s, rotate 0.25s;
}
body nav.menu ul {
  display: block;
  position: absolute;
  left: 0;
  top: 2em;
  z-index: -1;
  opacity: 0;
  margin-top: 2em;
  background-color: whitesmoke;
  list-style: none;
  transition: opacity 0.25s 0.1s;
  padding: 0;
  width: 100%;
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
}
body nav.menu ul li {
  margin: 0.5em 0;
  display: block;
}
body nav.menu ul li a {
  display: block;
  border: thin solid;
  background-color: white;
  padding: 1em;
}
body nav.menu.open a.toggle:before {
  border-bottom-width: 0;
  rotate: 405deg;
  top: 0.75em;
  left: -0.45em;
  height: 1px;
  width: 2.75em;
}
body nav.menu.open a.toggle:after {
  rotate: -405deg;
  top: 0.75em;
  left: -0.45em;
  height: 0.4em;
  width: 2.75em;
}
body nav.menu.open ul {
  opacity: 1;
  z-index: 2;
}
body .nowrap span {
  white-space: nowrap;
  margin-right: -0.25em;
}
body article {
  padding: 1em;
}
body header,
body article,
body footer {
  max-width: 400px;
  margin: 0 auto;
}
@media screen and (min-width: 500px) {
  body header,
  body article,
  body footer {
    max-width: 1200px;
  }
}
body *:has(>input.loading) {
  position: relative;
}
body *:has(>input.loading):before {
  content: '';
  position: absolute;
  right: 0.25em;
  top: 0.25em;
  margin: 0;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: thin solid slategray;
  box-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  border-color: slategray transparent;
  border-radius: 100%;
  animation: spin 1.5s linear 0s infinite;
  box-sizing: border-box;
}
body *:has(>input.loading):after {
  content: '';
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  margin: 0;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border: thin solid slategray;
  box-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  border-radius: 100%;
  border-color: slategray transparent;
  animation: spin 1s linear 0s infinite;
  box-sizing: border-box;
}
body *:has(>input.error) {
  position: relative;
}
body *:has(>input.error):after {
  content: '！';
  position: absolute;
  font-weight: bold;
  right: 0.25em;
  top: 0.25em;
  margin: 0;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  vertical-align: middle;
  color: crimson;
  border: thin solid crimson;
  background-color: white;
  box-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  border-radius: 100%;
}
body *:has(>input.updated) {
  position: relative;
}
body *:has(>input.updated):after {
  content: 'ヘ';
  transform: scaleY(-1);
  position: absolute;
  font-weight: bold;
  right: 0.25em;
  top: 0.25em;
  margin: 0;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  vertical-align: middle;
  color: forestgreen;
  border: thin solid forestgreen;
  background-color: white;
  box-shadow: 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  border-radius: 100%;
}
body input {
  width: 100%;
  padding: 0.75em 0.5em;
  margin: 0;
}
body input[required] {
  border: thin solid forestgreen;
}
body input.half {
  width: 50%;
}
body input[type=checkbox],
body input[type=radio] {
  display: none;
}
body input[type=checkbox] + label,
body input[type=radio] + label {
  border: thin solid slategray;
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  display: inline-block;
}
body input[type=checkbox][required] + label,
body input[type=radio][required] + label {
  border-color: forestgreen;
}
body input[type=checkbox]:checked + label,
body input[type=radio]:checked + label {
  background-color: slategray;
  color: whitesmoke;
}
body .switchbox {
  display: block;
}
body .switchbox label {
  display: inline-block;
  width: 100%;
  border: thin solid slategray;
  padding: 0.5em;
}
body .switchbox label:has(input:checked) {
  color: whitesmoke;
  background-color: slategray;
}
body .switchbox label:has(input:disabled) {
  background-color: lightgray;
}
body .switchbox label:has(input[required]) {
  border-color: forestgreen;
}
body .switchbox label:first-child {
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  padding-left: 1em;
}
body .switchbox label:last-child {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  padding-right: 1em;
}
body .switchbox input[type=checkbox] {
  display: none;
}
body .profile {
  position: relative;
  border: thin solid slategray;
  background-color: whitesmoke;
  border-radius: 0.5em;
  margin: 0 auto;
  padding: 0.5em;
  overflow: hidden;
  box-sizing: border-box;
}
body .profile dt {
  width: 30%;
  float: left;
  clear: left;
  vertical-align: middle;
  line-height: 1;
  margin: 0.5em 0 0 0;
  padding: 0;
}
body .profile dt.photo {
  height: 5em;
  line-height: 5;
  overflow: hidden;
}
body .profile dd {
  width: 70%;
  float: right;
  clear: right;
  margin: 0.5em 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
body .profile dd.photo {
  height: 5em;
}
body .profile dd.photo label {
  display: inline-block;
  cursor: pointer;
  border: thin solid gainsboro;
  background-color: lightgray;
}
body .profile dd.photo label img {
  width: auto;
  height: 5em;
  padding: 0.25em;
}
body .profile input {
  border-color: transparent;
  transition: border-color 0.5s;
}
body .profile input:focus {
  border-color: slategray;
}
body .profile input:placeholder {
  color: #e3e6e9;
  font-style: italic;
}
body .profile input[type=file] {
  opacity: 0;
  position: absolute;
  width: 1em;
}
body select {
  width: 100%;
  padding: 1em 0.5em;
  margin: 0;
  max-width: 400px;
}
body select.half {
  width: 50%;
}
@media screen and (min-width: 500px) {
  body select.full {
    max-width: 1200px;
  }
}
body select[required] {
  border: thin solid forestgreen;
}
body textarea {
  width: 100%;
  padding: 0.5em;
}
body button {
  background-color: whitesmoke;
  border: thin solid slategray;
  color: slategray;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 0.5em;
  padding: 0.5em;
  font-size: 1em;
  width: 100%;
  background-position: 0.5em center;
  background-size: 1.5em auto;
  background-repeat: no-repeat;
}
@media screen and (min-width: 500px) {
  body button.full {
    max-width: 1200px;
  }
}
body button[type=submit] {
  border-width: medium;
}
body button:hover {
  background-color: slategray;
  color: whitesmoke;
}
body button:active {
  background-color: gainsboro;
}
body button:focus {
  background-color: gainsboro;
}
body button:disabled {
  background-color: lightgray;
  color: slategray;
}
body button.highlight {
  background-color: forestgreen;
  color: white;
}
body button.mail {
  background-image: url('/icon/login_mail.svg');
}
body .avenu button,
body button.avenu {
  background-image: url('/logo.svg');
  padding-left: 2.5em;
}
body .google button,
body button.google {
  background-image: url('/icon/login_google.svg');
  padding-left: 2.5em;
}
body .facebook button,
body button.facebook {
  background-image: url('/icon/login_facebook.svg');
  padding-left: 2.5em;
}
body .instagram button,
body button.instagram {
  background-image: url('/icon/login_instagram.svg');
  padding-left: 2.5em;
}
body .line button,
body button.line {
  background-image: url('/icon/login_line.svg');
  padding-left: 2.5em;
}
body .right {
  text-align: right;
}
body nav {
  display: block;
  text-align: center;
}
body nav a {
  display: inline-block;
  padding: 0 1em;
  text-decoration: none;
  color: slategray;
}
body nav a:hover {
  opacity: 0.5;
}
body article {
  color: whitesmoke;
  position: relative;
  text-align: center;
  line-height: 1.5em;
  margin: 1em auto;
  box-sizing: border-box;
}
body article.term {
  text-align: left;
}
body article.term p {
  text-indent: 1em;
}
body article.term ol {
  padding-left: 3ex;
}
body article input {
  padding: 1em 0.5em;
}
body article input.search {
  padding: 1em 0.5em 1em 3em;
  background: url('search.svg') no-repeat 2em 2em;
  background-position: 0.5em center;
}
body article .search span {
  font-size: 1.1em;
}
body article .results {
  border: thin solid;
  display: none;
  height: 5em;
  background-color: white;
  overflow-y: auto;
  z-index: 1;
  max-height: 5em;
}
body article .results li {
  cursor: pointer;
  background-color: whitesmoke;
  color: slategray;
  margin: 0;
}
body article .results li:hover,
body article .results li.selected {
  background-color: slategray;
  color: whitesmoke;
}
@keyframes loading {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
body article .results.loading {
  animation: loading 1s infinite;
  background-color: whitesmoke;
}
body article ul.salonlist {
  border: thin solid whitesmoke;
  list-style: none;
  padding: 0;
  margin: 0;
}
body article ul.salonlist li a {
  display: block;
  color: whitesmoke;
}
body article ul.salonlist li a:hover {
  background-color: whitesmoke;
  color: slategray;
  opacity: 1;
}
body article table.calendar {
  width: 100%;
  border: thin solid whitesmoke;
}
body article table.calendar th {
  text-align: center;
  background-color: whitesmoke;
  color: slategray;
}
body article table.calendar td {
  text-align: center;
}
body article table.calendar a {
  text-decoration: none;
  color: whitesmoke;
}
body article table.calendar a:hover {
  background-color: whitesmoke;
  color: slategray;
}
body article table.calendar caption {
  position: relative;
}
body article table.calendar caption a {
  position: absolute;
  border: thin solid;
  padding: 0 1em;
}
body article table.calendar caption a.previous {
  left: 0;
}
body article table.calendar caption a.next {
  right: 0;
}
body article table.calendar tbody {
  display: inline-block;
  width: 100%;
}
body article h2 {
  font-size: 1.5em;
  margin: 1em 0;
}
body article ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
body article ul li {
  width: 100%;
  margin: 0 0 1em;
  font-size: 1em;
}
body article ul li:last-child {
  margin-bottom: 0;
}
body article ul li i {
  display: inline-block;
  width: 5em;
  height: 5em;
  background-size: 5em 5em;
  background-repeat: no-repeat;
  background-position: top center;
}
body article ul li i.icon-smartphone {
  background-image: url('smartphone.svg');
}
body article ul li i.icon-calendar {
  background-image: url('calendar.svg');
}
body article ul li i.icon-clock {
  background-image: url('clock.svg');
}
body article ul li i.icon-nocharge {
  background-image: url('nocharge.svg');
}
body article ul li i.icon-search {
  background-image: url('search.svg');
}
body article ul li i.icon-running {
  background-image: url('running.svg');
}
body article ul.borderbox li {
  padding: 1em;
  background-color: white;
  border: thin solid;
  box-sizing: border-box;
}
@media screen and (min-width: 500px) {
  body article ul.borderbox li {
    width: 33%;
    display: inline-block;
    padding: 3em 1em;
  }
}
body article ul.steps {
  vertical-align: top;
  height: 9em;
  box-sizing: border-box;
  display: inline;
}
body article ul.steps li {
  background-color: whitesmoke;
}
@media screen and (min-width: 500px) {
  body article ul.steps li {
    width: 33%;
    padding: 1em;
    display: inline-block;
    height: 10em;
    vertical-align: top;
    box-sizing: border-box;
  }
}
body dl {
  text-align: left;
}
body dl dt {
  margin: 1em 0;
  font-weight: bold;
}
body dl dd {
  margin: 0;
}
body dl dd + dd {
  margin-top: 0.5em;
}
body ol {
  text-align: left;
}
body .topnavi {
  position: absolute;
  right: 0;
  display: inline-block;
  width: 3em;
  height: 3em;
  z-index: 1;
}
body .topnavi a {
  position: fixed;
  transform: rotate(90deg);
  text-decoration: none;
  bottom: 1em;
  box-sizing: content-box;
  display: inline-block;
  line-height: 1;
  width: 1em;
  height: 1em;
  padding: 1em;
  border-radius: 100%;
  background-color: whitesmoke;
  color: slategray;
  border: thin solid slategray;
}
body .attention {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: crimson;
  color: white;
  z-index: 2;
}
body .popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .popup.loading > .window {
  display: flex;
  height: 3em;
  box-sizing: content-box;
}
body .popup.loading > .window:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  width: 3em;
  height: 3em;
  border: thick solid slategray;
  border-color: slategray transparent;
  border-radius: 100%;
  animation: spin 1.5s linear 0s infinite;
  margin: -1.5em -1.5em;
  box-sizing: border-box;
}
body .popup.loading > .window:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: thick solid slategray;
  border-radius: 100%;
  border-color: slategray transparent;
  animation: spin 1s linear 0s infinite;
  margin: -1em -1em;
  box-sizing: border-box;
}
body .popup > .window {
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: whitesmoke;
  border: thick slategray solid;
  width: 80%;
  max-width: 400px;
  max-height: 100vh;
  overflow: auto;
  padding: 1em;
}
@media screen and (min-width: 500px) {
  body .popup > .window.full {
    max-width: 1200px;
  }
}
body .popup > .window h1.title {
  position: relative;
  font-size: 1.5em;
  margin: 0 0 1em;
  padding: 0.25em 0.5em;
  background-color: lightgray;
}
body .popup > .window a.close {
  display: inline-block;
  position: absolute;
  background-color: white;
  right: 1em;
  top: 1em;
  width: 1em;
  height: 1em;
  font-size: 0.5em;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border: thin solid;
  border-radius: 100%;
  padding: 0.5em;
  box-sizing: content-box;
  line-height: 1;
  color: rgba(0, 0, 0, 0);
  z-index: 1;
}
body .popup > .window a.close:before {
  content: '';
  position: absolute;
  left: 0.55em;
  top: 0.5em;
  width: 1.4em;
  height: 0.1em;
  border-top: 4px solid slategray;
  transform-origin: left top 0;
  transform: rotate(45deg);
  margin: -1px 0 0 1px;
}
body .popup > .window a.close:after {
  content: '';
  position: absolute;
  right: 0.45em;
  top: 0.5em;
  width: 1.4em;
  height: 0.1em;
  border-top: 4px solid slategray;
  transform-origin: right top 0;
  transform: rotate(-45deg);
  margin: -1px 2px 0 0;
}
body .popup > .window a.close:has(+h1.title),
body .popup > .window a.close:has(+div>h1.title) {
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  width: 1em;
  height: 1em;
  font-size: 1em;
}
body .popup > .window ul {
  list-style: none;
  padding: 0;
}
body .popup > .window ul li {
  margin: 0.5em 0 0;
}
body .popup > .window ul li.message textarea {
  width: 100%;
  height: 20em;
  border-color: slategray;
}
body .popup > .window dl sub:before {
  content: '(';
}
body .popup > .window dl sub:after {
  content: ')';
}
body .popup.active {
  opacity: 1;
  pointer-events: all;
}
body .fold {
  display: none;
}
body .fold.expand {
  display: block;
}
body fieldset {
  border: thin solid slategray;
  border-radius: 0.5em;
  padding: 1em;
  margin: 1em 0;
  background-color: whitesmoke;
}
body fieldset legend {
  font-weight: bold;
  padding: 0 0.5em;
  background-color: whitesmoke;
  color: slategray;
  border-radius: 0.5em;
}
body .registration nav {
  text-align: left;
  background-color: lightgray;
}
@media screen and (min-width: 500px) {
  body .registration select {
    width: 33%;
  }
}
@media screen and (min-width: 500px) {
  body .registration select + input {
    width: 33%;
    margin-left: -0.5em;
    border-width: thin;
  }
}
body .registration .imagebox {
  display: inline-block;
  width: 100%;
}
body .registration .imagebox img {
  cursor: pointer;
  width: 100%;
  height: auto;
  border: thin solid gainsboro;
  box-sizing: border-box;
}
body .registration .imagebox img.required {
  border: thin solid forestgreen;
}
body .registration .imagebox input[type=file] {
  display: none;
}
@media screen and (min-width: 500px) {
  body .registration .imagebox {
    width: 33%;
  }
}
body pre.debug {
  border: thin solid;
  padding: 1em;
  box-sizing: border-box;
  margin: 0;
}
body .debug,
body .debug table {
  max-width: 1200px;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  border: thin solid slategray;
  border-collapse: collapse;
}
body .debug th,
body .debug table th,
body .debug td,
body .debug table td {
  border: thin solid slategray;
  padding: 0.5em;
  text-align: left;
  word-wrap: break-word;
}
body .debug th,
body .debug table th {
  background-color: lightgray;
  color: slategray;
}