p,
h5,
h4,
h3,
h2,
h1,
a,
dd,
dt,
li,
figcaption,
button,
input,
label {
  font-family: var(--familyNotoSerif);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}

.content-main {
  text-align: center;
  padding-block: 7.2rem 13.5rem;
}

.main-hdg__area {
  font-size: 4rem;
  text-align: center;
}

.main-hdg__en {
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--familyCrimsonPro);
  letter-spacing: 2px;
}

.main-hdg {
  font-size: 4rem;
  letter-spacing: 16%;
  margin-top: 2.5rem;
}

.page-anchor {
  display: flex;
  justify-content: center;
  column-gap: 2.1rem;
  margin-top: 3.5rem;
}

.page-anchor li {
  width: 50%;
  max-width: 30rem;
}

.main-msg {
  font-size: 2.2rem;
  line-height: 2.1;
  letter-spacing: 2.42px;
  margin-top: 6.5rem;
}

/* 会員特典 */
.about {
  margin-top: 3.6rem;
}

.about__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 2%;
}

.about__item {
  background-color: var(--colorWhite);
  border: 1px solid var(--colorMember);
  border-radius: 2rem;
  padding: 1.4rem 4rem 2.3rem;
  width: calc((100% - 2%) / 2);
}

.about__hdg {
  border-bottom: 2px solid var(--colorBlack);
  font-size: 1.6rem;
  letter-spacing: 2.9px;
  line-height: 0.9;
  margin-inline: auto;
  text-align: center;
  width: fit-content;
}

.about__hdg-num {
  font-family: var(--familyCrimsonPro);
  font-size: 6rem;
  letter-spacing: 2.9px;
}

.about__hdg-main {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1.7;
  letter-spacing: 2.42px;
  margin-top: 1.3rem;
  min-height: calc(2em * 1.7);
  text-align: center;
}

.about__item img {
  margin-top: 1rem;
}

.about__text {
  font-size: 1.5rem;
  line-height: 1.73;
  letter-spacing: 2px;
  margin-top: 1.2rem;
  text-align: center;
}

.about__item.long {
  padding-bottom: 6.2rem;
  width: 100%;
}

.about__item.long .about__text {
  letter-spacing: 2.42px;
}

.special-offer {
  margin: 4.4rem auto 0;
  max-width: 78%;
}

.about__note {
  color: #ad0000;
  font-family: var(--familyNotoSans);
  font-size: 1.2rem;
  line-height: calc(20 / 12);
  margin-top: 1.2rem;
  margin-left: 1em;
  text-indent: -1em;
}

@media screen and (max-width: 940px) {
  .disapear940 {
    display: none;
  }
}

@media screen and (max-width: 910px) {
  .disapear910 {
    display: none;
  }
}

@media screen and (max-width: 880px) {
  .disapear880 {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .disapear940,
  .disapear910,
  .disapear880 {
    display: block;
  }
}


/* 無料VIP会員 登録フォーム */
.register-form {
  margin-top: 9rem;
}

.register-hdg {
  background-color: var(--colorMember);
  border-radius: 2rem 2rem 0 0;
  color: var(--colorWhite);
  font-size: 2.2rem;
  letter-spacing: 2.42px;
  padding-block: 2.7rem 3rem;
  text-align: center;
}

.register-text {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 2.42px;
  margin-bottom: 4.8rem;
  text-align: center;
}

.register-form__main {
  background-color: var(--colorWhite);
  border: 1px solid var(--colorMember);
  border-radius: 0 0 2rem 2rem;
  padding: 4.6rem 6.6rem 13rem;
}

.input-wrapper {
  margin: 3.2rem auto 0;
  max-width: 67rem;
}

.input-inner {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  width: 100%;
}

.input-inner label {
  font-size: 1.6rem;
  letter-spacing: 1px;
  line-height: 1.7;
  text-align: center;
  width: 12.6rem;
}

.required-tag {
  align-self: center;
  background-color: #ad0000;
  border-radius: 0.2rem;
  color: var(--colorWhite);
  font-size: 1.2rem;
  padding: 0.3rem 1.8rem;
}

.optional-tag {
  background-color: #c8c8c8;
  color: #727272;
  font-size: 1.2rem;
  padding: 0.3rem 1.8rem;
}

.input-wrapper input,
.input-wrapper textarea {
  border: 1px solid #000;
  border-radius: 0;
  font-family: var(--familyNotoSerif);
  flex: 1;
  font-size: 1.5rem;
  letter-spacing: 2.42px;
  line-height: 1.3;
  padding: 1.5rem 2.5rem;
}

.input-wrapper textarea {
  min-height: 20.75rem;
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
  color: #c8c8c8;
}

.input-wrapper input[type="checkbox"] {
  flex: initial;
  padding: 0;
}

.input-wrapper input[type="checkbox"]:checked,
.input-wrapper input[type="checkbox"]:checked:focus,
.input-wrapper input[type="checkbox"]:checked:hover {
  background-color: #7d7d7d;
}

input:where([type="checkbox"]),
input:where([type="radio"]) {
  color: var(--colorWhite);
}

.input-note {
  font-size: 1.4rem;
  letter-spacing: 2.42px;
  margin-left: 21.8rem;
  text-align: left;
}

.input-note + .input-inner {
  margin-top: 1.6rem;
}

.first-hidden {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: all 0.8s;
}

.first-hidden.show {
  height: auto;
  visibility: visible;
  pointer-events: initial;
  opacity: 1;
}

.align-top {
  align-self: flex-start;
  margin-top: 1.3rem;
}

.tel-area {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-size: 1rem;
}

.tel-area input {
  max-width: 13.6rem;
}

.dash {
  display: flex;
  background-color: var(--colorBlack);
  height: 0.1rem;
  width: 1.1rem;
}

.address-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 2.4rem;
}

.address-input__area {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 2.3rem;
}

.input-inner label.building-label {
  font-size: 1.4rem;
  letter-spacing: 2.42px;
  margin-right: 1.4rem;
  white-space: nowrap;
}

.requirement {
  flex: 1;
  font-size: 1.6rem;
  letter-spacing: 2.42px;
}

.address-right {
  display: grid;
  font-size: 1.6rem;
  grid-template-columns: 3rem 1fr;
  align-items: center;
}

.wish-area__wrapper {
  margin-top: 4.5rem;
}

.wish-area {
  display: flex;
  flex-direction: column;
  row-gap: 1.9rem;
  margin-inline: auto 0;
  width: calc(100% - (12.6rem + 6rem + 1.6rem * 2 + 0.6rem));
}

.wish-area .input-inner {
  column-gap: 0.8rem;
}

.wish-area input {
  border: 3px solid var(--colorBlack);
  border-radius: 0.2rem;
  height: 2.6rem;
  width: 2.6rem;
}

.wish-area label {
  flex: 1;
  font-size: 1.5rem;
  letter-spacing: 2.42px;
  text-align: left;
}

.domain-note {
  border-top: 1px solid var(--colorBlack);
  border-bottom: 1px solid var(--colorBlack);
  margin: 10rem auto 0;
  padding-bottom: 1.5rem;
  max-width: 66.8rem;
}

.domain-note h3 {
  background-color: var(--colorWhite);
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 2.42px;
  transform: translateY(-50%);
  padding-inline: 2rem;
}

.domain-note p {
  font-family: var(--familyNotoSans);
  font-size: 1.3rem;
  line-height: calc(28 / 13);
  letter-spacing: 2.42px;
  margin-top: 1.6rem;
  text-align: left;
}

.privacy_policy__outer {
  display: flex;
  justify-content: center;
  margin-top: 6.6rem;
}

.privacy_policy__outer input {
  height: 1.6rem;
  width: 1.6rem;
}

.privacy_policy__outer input:checked:focus,
.privacy_policy__outer input:checked:hover,
.privacy_policy__outer input:checked {
  background-color: #7d7d7d;
}

.privacy_policy__outer p {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 2px;
  margin-left: 1.2rem;
  width: auto;
}

.privacy_policy__outer a {
  display: inline;
  text-decoration: underline;
}

.btn-comfirm {
  background-color: var(--colorMember);
  border: 1px solid var(--colorMember);
  margin: 4rem auto 0;
  width: 100%;
}

@media (hover: hover) {
  .privacy_policy__outer a:hover {
    text-decoration: none;
  }

  .btn-comfirm:hover {
    border: 1px solid var(--colorMember);
    color: var(--colorMember);
  }

  .btn-comfirm:hover::after {
    background-image: url(../../images/common/icon-arrow-darkblue.svg);
  }
}

@media screen and (max-width: 930px) {
  .hidden930 {
    display: none;
  }
  .input-wrapper {
    margin-top: 2rem;
  }

  .input-wrapper.input-wrapper__email {
    margin-top: 1.8rem;
  }

  .input-inner {
    flex-wrap: wrap;
    gap: 1rem 1.2rem;
  }

  .required-tag {
    order: 1;
  }

  .input-inner label {
    order: 2;
    font-size: 1.5rem;
    width: auto;
  }

  .input-wrapper input,
  .input-wrapper textarea {
    order: 3;
    font-size: 1.4rem;
    padding: 1rem;
  }

  .preference-map-area {
    order: 3;
  }

  .align-top {
    margin-top: 0;
  }

  .tel-area {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 0.9rem 1fr 0.9rem 1fr;
  }

  .input-wrapper .tel-area input {
    order: initial;
  }

  .tel-area input {
    max-width: 7.9rem;
  }

  .dash {
    width: 0.9rem;
  }

  .address-input__area {
    order: 3;
    row-gap: 0.7rem;
    width: 100%;
  }

  .address-right {
    font-size: 1.5rem;
    grid-template-columns: 2rem 1fr;
  }

  .address-right2 {
    grid-template-columns: 1fr;
  }

  .input-inner label.building-label {
    margin-right: 0;
  }

  #building_name {
    width: 100%;
  }

  .input-wrapper textarea {
    flex-basis: 100%;
    min-height: 18.6rem;
  }

  .wish-area {
    width: 100%;
  }

  .wish-area .input-inner {
    align-items: flex-start;
  }

  .input-wrapper input[type="checkbox"] {
    order: 1;
  }

  .input-inner label {
    letter-spacing: 0;
    line-height: 1.5;
  }
}

@media screen and (max-width: 767px) {
  .container1200 {
    padding-inline: 1.5rem;
  }

  .content-main {
    padding: 4rem 0 10rem;
  }

  .main-hdg__en {
    font-size: 1.8rem;
  }

  .main-hdg {
    font-size: 2.2rem;
    margin-top: 1.8rem;
  }

  .page-anchor {
    column-gap: 1rem;
    margin-top: 4.5rem;
  }

  .btn-anchor {
    letter-spacing: 0;
    padding-inline: 1rem;
  }

  .btn-anchor::after {
    margin-right: 0;
    height: 6px;
    width: 6px;
  }

  .main-msg {
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 2.5rem;
  }

  .about__list {
    row-gap: 1.9rem;
    margin-inline: 1.5rem;
  }

  .about__item {
    padding: 1.8rem 0 2rem;
    width: 100%;
  }

  .about__hdg {
    font-size: 1.4rem;
    letter-spacing: 2.9px;
    line-height: 1;
    padding-inline: 0.4rem;
  }

  .about__hdg-num {
    font-size: 4rem;
    margin-left: 1rem;
  }

  .about__hdg-main {
    font-size: 1.6rem;
    line-height: calc(28 / 16);
    margin-top: 1.5rem;
    min-height: unset;
  }

  .about__item img {
    margin: 1.2rem 2.7rem 0;
    width: calc(100% - (2.7rem * 2));
  }

  .about__text {
    font-size: 1.5rem;
    line-height: calc(26 / 15);
    letter-spacing: 0;
    margin-top: 2rem;
  }

  .about__item.long .about__text {
    letter-spacing: 0;
    margin-top: 0.5rem;
    padding-inline: 2rem;
    text-align: left;
  }

  .special-offer {
    margin-top: 2rem;
    max-width: unset;
  }

  .about__note {
    letter-spacing: 1%;
    text-align: left;
    margin-left: calc(1em + 2.7rem);
    width: calc(100% - (2.7rem * 2));
  }

  .about__item.long {
    padding-bottom: 3.8rem;
  }

  .register-form {
    margin: 6rem 1.5rem 0;
  }

  .register-hdg {
    font-size: 1.8rem;
    letter-spacing: 2.42px;
    padding-block: 2.3rem 2rem;
    text-align: center;
  }

  .register-form__main {
    padding: 1.4rem 1.9rem 8rem;
  }

  .register-text {
    line-height: calc(28 / 15);
    margin-bottom: 0;
  }

  .input-wrapper:has(.input-note) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.2rem;
  }

  .input-note {
    order: 3;
    letter-spacing: 0;
    margin: 0.6rem 0 0;
  }

  .input-note + .input-inner {
    display: contents;
  }

  .input-note .input-wrapper .input {
    order: 4;
  }

  .domain-note {
    border-top: none;
    margin-top: 5.2rem;
    padding-bottom: 2rem;
    text-align: left;
  }

  .domain-note h3 {
    line-height: 1.5;
    padding-inline: 0;
    transform: none;
  }

  .domain-note p {
    letter-spacing: 0;
    line-height: 2;
  }

  .privacy_policy__outer {
    margin-top: 3.4rem;
  }

  .privacy_policy__outer p {
    letter-spacing: 0;
  }

  .btn-comfirm {
    letter-spacing: 2.42px;
    margin-top: 4.8rem;
  }
}

/* map */
.preference-map-area {
  position: relative;
}

.input-inner label.city-check {
  background-color: var(--colorWhite);
  display: flex;
  align-items: center;
  column-gap: 0.6rem;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  padding: 0.4rem 0.6rem;
  position: absolute;
  cursor: pointer;
  width: fit-content;
}

.city-check input {
  border: 1px solid #87a1c0;
  height: 1.8rem;
  width: 1.8rem;
}

.city {
  cursor: pointer;
  transition: fill 0.3s;
}

.city.active {
  fill: #df9e69;
}

@media (hover: hover) {
  .city:hover,
  .city.hover {
    fill: #df9e69;
  }
}

.input-wrapper .city-check input[type="checkbox"] {
  --tw-ring-color: none;
  cursor: pointer;
}

.input-wrapper .city-check input[type="checkbox"]:checked,
.input-wrapper .city-check input[type="checkbox"]:checked:focus,
.input-wrapper .city-check input[type="checkbox"]:checked:hover {
  background-color: var(--colorWhite);
  border: 1px solid #87a1c0;
  position: relative;
  --tw-ring-color: none;
}

.input-wrapper .city-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 10%;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid #df9e69;
  border-left: 2px solid #df9e69;
  transform: rotate(-45deg);
}

.city-sagamihara {
  top: 9%;
  left: 43%;
}

.city-atsugi {
  top: 31%;
  left: 6%;
}

.city-isehara {
  top: 51%;
  left: 2%;
}

.city-samukawa {
  top: 68%;
  left: 26.5%;
}

.city-zama {
  top: 29%;
  left: 40%;
}

.city-yamato {
  top: 31.5%;
  right: 17%;
}

.city-ebina {
  top: 48%;
  left: 29%;
}

.city-chigasaki {
  top: 85%;
  left: 41.7%;
}

.city-fujisawa {
  top: 82%;
  right: 7%;
}

.city-yokohama {
  top: 58%;
  right: 0.5%;
}

.city-ayase {
  top: 49%;
  right: 23%;
}

@media screen and (max-width: 930px) {
  .map-img {
    display: none;
  }

  .preference-map-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .input-inner label.city-check {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
  }
}

/* error message */
.error-msg {
  margin-left: calc(12.6rem + 1.6rem * 2 + 1.2rem * 2 + 1.8rem * 2);
}

.address-input__area .error-msg {
  margin-left: 3rem;
}

.error-msg.text-center {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .error-msg,
  .address-input__area .address-right2 + .error-msg {
    font-size: 1.3rem;
    margin-left: 0;
  }

  .address-input__area .error-msg {
    margin-left: 2rem;
  }

  .password-error {
    order: 4;
    margin-top: -0.5rem;
  }
}