/* モーダル：会員登録の方法 */
#modal-register[hidden] { display: none; }
#modal-register .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.modal-register { box-sizing: border-box; width: 956px; max-width: calc(100% - 32px); padding: 40px 48px; background: var(--c-white); border: 1px solid var(--c-light-gray); border-radius: 16px; color: var(--c-black); }

.modal-register .modal-register-inner { display: flex; align-items: flex-start; gap: 24px; width: 860px; max-width: 100%; }
.modal-register .modal-register-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 583px; flex: none; text-align: left; word-break: break-word; }
.modal-register .modal-register-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); }
.modal-register .modal-register-body { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); }
.modal-register .modal-register-body p { white-space: pre-wrap; }

.modal-register .modal-register-list { padding-left: 24px; list-style: disc; }

.modal-register .modal-register-phone { position: relative; width: 195px; height: 387px; flex: none; }
.modal-register .modal-register-phone-img { position: absolute; left: 0; top: 0; width: 195px; height: 406.5px; max-width: none; }

.modal-register .modal-register-callout { position: absolute; left: -5px; top: 57.19px; box-sizing: border-box; width: 201px; height: 37.094px; border: 1px solid var(--c-clozy-blue); border-radius: 2.588px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); overflow: hidden; background: var(--c-white); }
.modal-register .modal-register-callout img { position: absolute; left: -1px; top: calc(-59.44px - 1px); width: 201.863px; height: 438.496px; max-width: none; }

.modal-register .modal-close { position: absolute; right: 23px; top: 23px; width: 24px; height: 24px; display: block; }
.modal-register .modal-close img { width: 24px; height: 24px; }

@media (max-width: 767px) {

  #modal-register { padding: 0 16px; box-sizing: border-box; }
  .modal-register { width: 100%; max-width: 100%; max-height: calc(100% - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px; border: 0; }
  .modal-register .modal-register-inner { flex-direction: column; align-items: center; gap: 24px; width: 100%; }
  .modal-register .modal-register-text { width: 100%; }
  .modal-register .modal-register-title { text-align: center; }

  .modal-register .modal-register-phone { width: 155.814px; height: 300px; }
  .modal-register .modal-register-phone-img { left: 3.88px; width: 151.163px; height: 315.1px; }

  .modal-register .modal-register-callout { left: 0; top: 44.33px; width: 155.814px; height: 28.755px; border-width: 0.775px; border-radius: 2.006px; box-shadow: 0 1.55px 3.101px 0 rgba(0, 0, 0, 0.15); }
  .modal-register .modal-register-callout img { left: -0.775px; top: calc(-46.08px - 0.775px); width: 156.483px; height: 339.919px; }

  .modal-register .modal-close { right: 24px; top: 21.5px; width: 32px; height: 32px; }
  .modal-register .modal-close img { width: 32px; height: 32px; }
}