:root {
  --primary-color: #000000;

  --aqua-green: #21c0b2;
  --black-color: #000000;
  --white-color: #ffffff;
  --red-color: red;

  --grey400-color: #454545;
  --grey200-color: #b9b6b8;
  --grey100-color: #d9d9d9;
  --yellow300-color: #ffeb00;
  --yellow400-color: #ffe100;
  --yellow500-color: #f3d915;
  --pink100-color: #ffeeee;
  --pink400-color: #ff007d;
  --pink500-color: #ff1d89;
  --white500-color: #f5f5f5;
  --white600-color: #E7E7E7;

  --placeholder-color: #b9b6b8;
  --bg-input-color: #f5f5f5;
}

* {
  box-sizing: border-box;
}

html {
  font-weight: 500;
  font-size: 62.5%;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

html * {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

body {
  font-size: 1.2rem;
  color: var(--primary-color);
  line-height: 1;
  min-width: unset;
}

a {
  text-decoration: none;
}

.newmypage-container {
  width: 100%;
  padding: 0 21px;
  margin: 0 auto;
}

.newmypage-description {
  margin-bottom: 26px;
}

.error-message {
  margin-bottom: 26px;
  margin-top: 20px;
}

.error-message-value {
  font-size: 1.4rem;
  padding: 13px 15px;
  background-color: var(--pink100-color);
  border-radius: 3px;
}

.error-message-value p {
  text-align: left;
  color: var(--red-color);
}

.hover-btn-yellow-color:hover {
  background-color: var(--yellow500-color);
  transition: all 0.3s ease;
}

input.input-focus-yellow-color:focus {
  border: 3px solid var(--yellow300-color);
}

@media screen and (min-width: 768px) {
  .newmypage-container {
    max-width: 580px;
    padding: 0;
  }
}

.guard-loading-mark-area {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99999999999;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
}
.guard-loading-mark-area.show {
  display: block;
}
.guard-loading-mark-area .loading-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}