@charset "UTF-8";

.registration,
.ui-dialog {
  --color-white: #fff;
  --color-background: #e9e9e9;
  --color-surface: var(--color-white);

  --color-black-rgb: 54,54,54;
  --color-black: rgb(var(--color-black-rgb));
  --color-gray: rgba(var(--color-black-rgb),0.65);
  --color-gray-dark: #555;
  --color-gray-light: #ccc;

  --color-primary-rgb: 11,200,192;
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-light: #ebfbfa;
  --color-primary-dark: #09a09a;
  --color-primary-inverted: var(--color-white);

  --color-secondary-rgb: 239,77,77;
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-secondary-light: #f9b8b8;
  --color-secondary-dark: #c53736;
  --color-secondary-inverted: var(--color-white);

  --color-error-rgb: 204,0,0;
  --color-error: rgb(var(--color-error-rgb));
  --color-error-light: #fee;
  --color-error-inverted: var(--color-white);

  --color-disabled: #ccc;
  --color-disabled-inverted: var(--color-white);

  --fontsize-h1: 2.14rem;
  --fontsize-h2: 1.75rem;
  --fontsize-h3: 1.28rem;
  --fontsize-h4: 1rem;
  --fontsize-small: .85rem;

  --margin-basis: 16px;
}


/* ================================================
デフォルトスタイル
================================================ */
  .registration,
  .registration *,
  .registration *::before,
  .registration *::after {
    box-sizing: border-box;
  }
  .registration:not(.modal) {
    margin: auto;
    max-width: 1600px;
  }

  .registration a:not(.button),
  .registration a:not(.button):visited {
    color: inherit;
    text-decoration: underline;
  }
  .registration a:not(.button):focus,
  .registration a:not(.button):hover {
    color: var(--color-primary);
  }

  .registration img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
  }

  .registration em {
    color: inherit;
    font-weight: 500;
  }
  .registration hr {
    margin-top: calc( var(--margin-basis) * 1.5 );
    margin-bottom: calc( var(--margin-basis) * 1.5 );
    border-top-color: rgba(var(--color-black-rgb),.35);
  }
  .registration blockquote {
    border-left: 2px solid;
  }

@media (max-width: 768px) {
  .registration:not(.modal) {
    padding: 12px;
  }
}


/* ================================================
コンポーネント - 見出し
================================================ */
  .registration .title-h1 {
    margin-top: 0;
    margin-bottom: var(--margin-basis);
    font-size: var(--fontsize-h1);
    line-height: 1.4;
    font-weight: 500;
  }
  .registration .title-h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--fontsize-h2);
    line-height: 1.4;
    font-weight: bold;
  }
  .registration .title-h1 small,
  .registration .title-h2 small {
    font-size: .8em;
  }
  .registration .title-h3 {
    font-size: var(--fontsize-h3);
    font-weight: bold;
  }
  .registration .title-h4 {
    font-size: var(--fontsize-h4);
    font-weight: bold;
  }
  .registration .title-h5 {
    font-size: var(--fontsize-h4);
    font-weight: 500;
  }
  .registration [class^="title-"]:not(:first-child),
  .registration [class*="title-"]:not(:first-child) {
    margin-top: calc( var(--margin-basis) * 2 );
  }

  /* バリエーション：下線付き */
  .registration [class^="title-"].-underline,
  .registration [class*="title-"].-underline {
    position: relative;
    margin-bottom: var(--margin-basis);
    padding-bottom: .25em;
  }
  .registration [class^="title-"].-underline::after,
  .registration [class*="title-"].-underline::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    border-bottom: 1px solid;
  }


/* ================================================
コンポーネント - テーブル
================================================ */
  .registration th,
  .registration td {
    vertical-align: top;
    text-align: left;
  }
  .registration th {
    color: var(--color-gray);
  }
  .registration th:not(:first-child),
  .registration td:not(:first-child) {
    padding-left: var(--margin-basis);
  }

  /* 通常（枠線あり） */
  .registration .table > tbody > tr > td {
    font-weight: 500;
  }
  .registration .table > tbody > tr > th,
  .registration .table > tbody > tr > td {
    padding: var(--margin-basis);
    border: 1px solid var(--color-gray-light);
    vertical-align: middle;
  }
  .registration .table > tbody > tr > td {
    font-weight: 500;
  }

  /* 幅100% */
  .registration .table.-wide {
    width: 100%;
  }

  /* バリエーション：横線のみ */
  .registration .table.-stripe > tbody > tr > th,
  .registration .table.-stripe > tbody > tr > td {
    padding-right: 0;
    border-right: none;
    border-left: none;
  }
  .registration .table.-stripe > tbody > tr > th:first-child,
  .registration .table.-stripe > tbody > tr > td:first-child {
    padding-left: 0;
  }


/* ================================================
コンポーネント - リスト
================================================ */
  /* ナンバリング */
  .registration .list_number {
    counter-reset: number;
  }
  .registration .list_number li {
    display: flex;
  }
  .registration .list_number li::before {
    counter-increment: number;
    content: "（" counter(number) "）";
  }


/* ================================================
コンポーネント - 注釈
================================================ */
  .registration .notes {
    margin-top: .25em;
    margin-bottom: .25em;
    padding: 0;
    background-color: transparent;
    border: none;
    font-size: var(--fontsize-small);
    color: var(--color-gray);
  }
  .registration .notes + .notes {
    margin-top: 0;
  }
  .registration span.notes {
    display: initial;
  }

  /* バリエーション：強調 */
  .registration .notes.-success {
    color: var(--color-primary-dark);
  }

  /* バリエーション：フォーム補足説明など */
  .registration .notes.-helper {
    color: var(--color-gray);
  }

  /* バリエーション：エラー */
  .registration .notes.-error {
    color: var(--color-error);
  }


/* ================================================
コンポーネント - アラート
================================================ */
  .registration .alert {
    margin-top: calc( var(--margin-basis) * 2 );
    margin-left: auto;
    margin-right: auto;
    padding: var(--margin-basis);
    max-width: 900px;
    background-color: rgba(var(--color-black-rgb),.12);
    font-size: 1rem;
    text-align: left;
    color: var(--color-black) !important;
  }
  .registration .alert + .alert {
    margin-top: var(--margin-basis);
  }
  .registration .alert em {
    color: var(--color-error);
  }

  /* バリエーション：プライマリー */
  .registration .alert.-primary {
    color: var(--color-black) !important;
    background-color: rgba(var(--color-primary-rgb),.1);
  }

  /* バリエーション：セカンダリー */
  .registration .alert.-secondary {
    color: var(--color-black) !important;
    background-color: rgba(var(--color-secondary-rgb),.1);
  }

  /* バリエーション：注意 */
  .registration .alert.-attention {
    color: var(--color-black) !important;
    background-color: rgba(var(--color-error-rgb),.1);
  }

  /* バリエーション：エラー */
  .registration .alert.-error {
    color: var(--color-error) !important;
    background-color: rgba(var(--color-error-rgb),.1);
  }


/* ================================================
コンポーネント - ボタン
================================================ */

/* ------------------------
デフォルト
------------------------ */
  .registration a.button,
  .registration input.button,
  .registration input[type="button"],
  .registration input[type="submit"],
  .registration input[type="reset"],
  .registration button,
  div.ui-dialog .ui-button {
    display: inline-block;
    margin: 0;
    padding: .75em 1em;
    min-width: 6em;
    height: auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--color-black);
    font-size: 1em;
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: all .3s;
    box-shadow: none;
    outline: none;
    float: none;
  }
  .registration a.button:hover,
  .registration a.button:focus,
  .registration input.button:hover,
  .registration input.button:focus,
  .registration button:hover,
  .registration button:focus,
  div.ui-dialog .ui-button.ui-state-hover {
    color: var(--color-black);
    text-decoration: none;
    background: rgba(var(--color-black-rgb),.15);
    box-shadow: none;
    outline: none;
  }
  .registration a.button.-disabled,
  .registration input.button[disabled],
  .registration input[type="button"][disabled],
  .registration input[type="submit"][disabled],
  .registration input[type="reset"][disabled],
  .registration button[disabled] {
    background: var(--color-disabled) !important;
    border-color: var(--color-disabled) !important;
    color: var(--color-white) !important;
    opacity: .6 !important;
  }

/* ------------------------
バリエーション - スタイル
------------------------ */
  /* アウトラインタイプ */
  .registration a.button.-outlined,
  .registration input.button.-outlined,
  .registration button.-outlined {
    color: var(--color-gray-dark);
    border-color: currentcolor;
  }

  /* 塗り潰しタイプ */
  .registration a.button.-filled,
  .registration input.button.-filled,
  .registration button.-filled,
  div.ui-dialog .ui-dialog-buttonset .ui-button:last-of-type {
    background: var(--color-gray-dark);
    border-color: transparent;
    color: var(--color-white);
  }
  .registration a.button.-filled:hover,
  .registration a.button.-filled:focus,
  .registration input.button.-filled:hover,
  .registration input.button.-filled:focus,
  .registration button.-filled:hover,
  .registration button.-filled:focus,
  div.ui-dialog .ui-dialog-buttonset .ui-button.ui-state-hover:last-of-type {
    background: var(--color-black);
  }

/* ------------------------
バリエーション - サイズ
------------------------ */
  /* 大きめ */
  .registration a.button.-large,
  .registration input.button.-large,
  .registration button.-large {
    padding: .75em 2em;
    font-size: var(--fontsize-h3);
  }

  /* 小さめ */
  .registration a.button.-small,
  .registration input.button.-small,
  .registration button.-small {
    font-size: var(--fontsize-small);
  }

@media (max-width: 768px) {
  .registration a.button.-large,
  .registration input.button.-large,
  .registration button.-large {
    font-size: 1rem;
  }
}


/* ------------------------
バリエーション - カラー
------------------------ */
  /* プライマリー */
  .registration a.button.-primary,
  .registration input.button.-primary,
  .registration button.-primary {
    color: var(--color-primary-dark);
  }
  .registration a.button.-primary:hover,
  .registration a.button.-primary:focus,
  .registration input.button.-primary:hover,
  .registration input.button.-primary:focus,
  .registration button.-primary:hover,
  .registration button.-primary:focus {
    background: rgba(var(--color-primary-rgb),.15);
  }
  .registration a.button.-filled.-primary,
  .registration input.button.-filled.-primary,
  .registration button.-filled.-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-inverted);
  }
  .registration a.button.-filled.-primary:hover,
  .registration a.button.-filled.-primary:focus,
  .registration input.button.-filled.-primary:hover,
  .registration input.button.-filled.-primary:focus,
  .registration button.-filled.-primary:hover,
  .registration button.-filled.-primary:focus {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
  }

  /* セカンダリー */
  .registration a.button.-secondary,
  .registration input.button.-secondary,
  .registration button.-secondary {
    color: var(--color-secondary);
  }
  .registration a.button.-secondary:hover,
  .registration a.button.-secondary:focus,
  .registration input.button.-secondary:hover,
  .registration input.button.-secondary:focus,
  .registration button.-secondary:hover,
  .registration button.-secondary:focus {
    background: var(--color-secondary-light);
  }
  .registration a.button.-filled.-secondary,
  .registration input.button.-filled.-secondary,
  .registration button.-filled.-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-secondary-inverted);
  }
  .registration a.button.-filled.-secondary:hover,
  .registration a.button.-filled.-secondary:focus,
  .registration input.button.-filled.-secondary:hover,
  .registration input.button.-filled.-secondary:focus,
  .registration button.-filled.-secondary:hover,
  .registration button.-filled.-secondary:focus {
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
  }


/* ================================================
コンポーネント - フォームパーツ
================================================ */
  .registration form {
    display: block;
  }

/* ------------------------
デフォルト
------------------------ */
  .registration input[type="text"],
  .registration input[type="email"],
  .registration input[type="url"],
  .registration input[type="password"],
  .registration textarea,
  .registration select {
    display: block;
    width: 100%;
    margin: 0;
    padding: .75em 1em;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 3px;
    color: var(--color-black);
    font-size: 1em;
    line-height: 1.2;
    font-family: inherit;
    vertical-align: middle;
    text-align: left;
    transition: .3s ease-out;
  }
  .registration .course_select{
    display: flex;
    justify-content: center;
  }
  .registration .course_select select {
    display: block;
    width: 30%;
    margin: 0;
    padding: .75em 1em;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 3px;
    color: var(--color-black);
    font-size: 1em;
    line-height: 1.2;
    font-family: inherit;
    vertical-align: middle;
    text-align: left;
    transition: .3s ease-out;
  }
  .registration input::placeholder,
  .registration textarea::placeholder {
    color: rgba( var(--color-black-rgb), .38 );
    font-style: italic;
  }
  .registration textarea {
    min-height: 4em;
  }
  .registration select {
    padding-right: 1.75rem;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpolygon fill='%23363636' points='4,4 0,0 8,0 '/%3E%3C/svg%3E") no-repeat right .75rem center;
    background-size: auto auto;
    background-size: 8px 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .registration input[type="text"].-error,
  .registration input[type="email"].-error,
  .registration input[type="url"].-error,
  .registration input[type="password"].-error,
  .registration textarea.-error,
  .registration select.-error {
    border-color: var(--color-error);
    background-color: var(--color-error-light);
  }

  .registration input[type="text"]:focus,
  .registration input[type="email"]:focus,
  .registration input[type="url"]:focus,
  .registration input[type="password"]:focus,
  .registration textarea:not([readonly]):focus,
  .registration select:focus {
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 4px rgba( var(--color-primary-rgb), .2 );
    outline: none;
  }

  .registration input[type="text"][disabled],
  .registration input[type="email"][disabled],
  .registration input[type="url"][disabled],
  .registration input[type="password"][disabled],
  .registration textarea[disabled],
  .registration select[disabled] {
    background-color: var(--color-white) !important;
    border-color: var(--color-gray-light) !important;
    box-shadow: none !important;
    opacity: .6 !important;
  }


  @media (max-width: 768px) {
    .registration input[type="text"],
    .registration input[type="email"],
    .registration input[type="url"],
    .registration input[type="password"],
    .registration textarea,
    .registration select {
      font-size: .85rem;
    }
  }


/* ------------------------
チェックボックス・ラジオボタン
------------------------ */
  /* ラベル */
  .registration .label_indent {
    display: block;
    padding-left: calc( var(--margin-basis) * 1.5 );
    text-indent: calc( var(--margin-basis) * -1.5 );
  }
  .registration .label_indent.-disabled {
    opacity: .7;
  }

  .registration .pseudo_checkbox,
  .registration .pseudo_radio {
    position: relative;
    display: inline-block;
    margin-right: calc( var(--margin-basis) * .5 );
    width: var(--margin-basis);
    height: var(--margin-basis);
    vertical-align: text-top;
  }
  .registration .pseudo_checkbox input[type="checkbox"],
  .registration .pseudo_radio input[type="radio"] {
    display: block;
    width: 0;
    opacity: 0;
  }

  /* チェックボックス */
  .registration .pseudo_checkbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: var(--margin-basis);
    height: var(--margin-basis);
    border: 2px solid var(--color-gray);
    border-radius: 1px;
    transition: .2s ease-out;
  }
  .registration .pseudo_checkbox::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 18%;
    z-index: 1;
    display: block;
    border-top: 2px solid var(--color-primary-inverted);
    border-right: 2px solid var(--color-primary-inverted);
    transform: scaleX(-1) rotate(135deg);
    transform-origin:left top;
    opacity: 0;
  }
  .registration .pseudo_checkbox.-checked::before {
    border-width: calc( var(--margin-basis) / 2 );
    border-color: var(--color-primary);
  }
  .registration .pseudo_checkbox.-checked::after {
    width: calc( var(--margin-basis) / 3 );
    height: calc( var(--margin-basis) / 1.8 );
    opacity: 1;
    transition: width .1s, height .1s .1s ease-out;
  }
  .registration .pseudo_checkbox.-disabled::before {
    opacity: .5;
  }
  .registration .pseudo_checkbox.-disabled::after {
    display: none;
  }

  /* ラジオボタン */
  .registration .pseudo_radio::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
    display: block;
    width: calc( var(--margin-basis) + 2px );
    height: calc( var(--margin-basis) + 2px );
    border: 2px solid var(--color-gray);
    border-radius: 50%;
    transition: .2s ease-out;
  }
  .registration .pseudo_radio::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background-color: var(--color-primary);
    border-radius: 50%;
    transition: .2s ease-out;
  }
  .registration .pseudo_radio.-checked::before {
    background-color: var(--color-white);
    border-color: var(--color-primary);
  }
  .registration .pseudo_radio.-checked::after {
    width: calc( var(--margin-basis) / 2 );
    height: calc( var(--margin-basis) / 2 );
    opacity: 1;
  }
  .registration .pseudo_radio.-disabled::before {
    background-color: var(--color-disabled);
    border-color: var(--color-disabled);
  }
  .registration .pseudo_radio.-disabled::after {
    display: none;
  }

  /* チェックボックス、ラジオボタンに左端を揃える */
  .registration .justify_checkbox,
  .registration .justify_radio {
    margin-left: calc( var(--margin-basis) * 1.5 );
  }


/* ================================================
コンポーネント - 進行状況（ステータス表示）
================================================ */
  .registration .section_stepper {
    margin: var(--margin-basis) auto;
  }
  .registration .stepper {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
  }
  .registration .stepper li {
    flex: 2;
    position: relative;
    overflow: visible;
    color: var(--color-gray);
    min-width: 0;
    border-top: 2px solid var(--color-disabled);
    text-align: center;
    font-size: var(--fontsize-small);
    line-height: 1.5;
    white-space: nowrap;
  }
  .registration .stepper li:first-child,
  .registration .stepper li:last-child {
    flex: 1;
  }
  .registration .stepper li::before {
    content: "";
    position: absolute;
    left: calc(50% - 5px);
    top: -6px;
    z-index: 3;
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--color-white);
    border-radius: 50%;
    border: 2px solid var(--color-disabled);
    transition: .2s ease-out;
  }
  .registration .stepper li:first-child::before {
    left: -5px;
  }
  .registration .stepper li:last-child::before {
    right: -5px;
    left: auto;
  }
  .registration .stepper .-complete:not(:first-child)::after,
  .registration .stepper .-active:not(:first-child)::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -50%;
    z-index: 2;
    display: block;
    width: 100%;
    border-top: 2px solid var(--color-primary);
  }
  .registration .stepper li span {
    position: absolute;
    top: 8px;
    display: block;
    width: 100%;
  }
  .registration .stepper li:first-child span {
    width: 200%;
    left: -100%;
  }
  .registration .stepper li:last-child span {
    width: 200%;
  }
  .registration .stepper .-complete:last-child::after,
  .registration .stepper .-active:last-child::after {
    width: 200%;
    left: -100%;
  }
  .registration .stepper .-complete::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .registration .stepper .-active::before {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    transform: scale(1.25);
  }
  .registration .stepper .-complete span {
    color: var(--color-primary-dark);
    opacity: .75;
  }
  .registration .stepper .-active span {
    color: var(--color-primary-dark);
  }

@media (max-width: 768px) {
  .registration .section_stepper {
    width: 80%;
  }
}



/* ================================================
ページタイトル
================================================ */
  .registration .section_title {
    margin: calc( var(--margin-basis) * 4) auto var(--margin-basis);
    text-align: center;
  }

  /* 優待バナー */
  .registration .section_banner {
    margin: calc( var(--margin-basis) * 2) auto;
    max-width: 1040px;
    text-align: center;
  }


/* ================================================
コース一覧
================================================ */

/* ------------------------
デフォルト
------------------------ */
  .registration .section_plans {
    margin-top: calc( var(--margin-basis) * 2);
    display: flex;
    justify-content: center;
  }
  .registration .section_plans > .plan {
    flex: 1;
  }
  .registration .section_plans + .section_plans {
    margin-top: 0;
  }
  .registration .plan {
    position: relative;
    margin: calc( var(--margin-basis) / 2 );
    padding: 4% 2.5% 2.5%;
    background-color: var(--color-surface);
    box-shadow: 0 0 6px rgba(0,0,0,.25);
  }

@media (max-width: 768px) {
  .registration .section_plans {
    flex-wrap:wrap;
  }
  .registration .section_plans > .plan {
    flex: auto;
    width: 100%;
  }
  .registration .plan {
    margin: 0;
  }
  .registration .section_plans + .section_plans {
    margin-top: 24px;
  }
  .registration .plan + .plan {
    margin-top: 12px;
  }
}




  /* コース名・セット名 */
  .registration .plan_header {
    margin-bottom: calc( var(--margin-basis) * 2.5 );
    text-align: center;
  }

  /* 料金 */
  .registration .plan_prices {
    margin-top: var(--margin-basis);
    margin-bottom: var(--margin-basis);
    text-align: center;
  }
  .registration .plan_price_main {
    padding-left: .1em;
    padding-right: .1em;
    font-size: 2.5em;
    font-weight: bold;
  }
  .registration .plan_prices em {
    color: var(--color-secondary);
  }

  /* メイン機能 */
  .registration .plan_features {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .registration .plan_features li {
    flex: 1;
    position: relative;
    max-width: 110px;
  }
  .registration .plan_features li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    display: block;
    width: 100px;
    height: 100px;
    background-color: var(--color-primary-light);
    border-radius: 400px;
  }
  .registration .plan_features_icon {
    display: block;
    margin: 0 auto;
    width: 70%;
    max-width: 60px;
  }
  .registration .plan_features_caption {
    margin-top: .5em;
    padding-right: .5em;
    padding-left: .5em;
    display: inline-block;
    color: var(--color-gray);
    font-size: 11px;
    line-height: 1.2;
  }

  /* 申込みボタン */
  .registration .plan_buttons {
    margin-bottom: calc( var(--margin-basis) * 2.5 );
    text-align: center;
  }
  .registration .plan_buttons .button {
    margin-top: calc( var(--margin-basis) * 1.5 );
    margin-bottom: 0;
  }
  .registration .button.-yearly {
    display: block;
    max-width: 400px;
    margin: 0 auto;
  }
  .registration .button.-monthly {
    width: auto;
  }

  /* 機能一覧 */
  .registration .specs_table {
    margin: 0 auto;
    width: 100%;
    max-width: 36em;
  }
  .registration .specs_table caption {
    padding-bottom: .25em;
    font-size: var(--fontsize-small);
    color: var(--color-gray);
  }
  .registration .specs_table tr:first-child {
    border-top: 1px solid var(--color-gray-light);
  }
  .registration .specs_table tr:last-child {
    border-bottom: 1px solid var(--color-gray-light);
  }
  .registration .specs_table th,
  .registration .specs_table td {
    text-align: left;
    vertical-align: middle;
  }
  .registration .specs_table th {
    padding: 1em 1em 1em 0;
    color: var(--color-gray);
    font-weight: normal;
  }
  .registration .specs_table td {
    padding: 1em 0;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
    font-weight: 500;
  }

  /* おすすめタグ表示 */
  .registration .plan_tags {
    position: absolute;
    left: 3%;
    top: 0;
    transform: translate(0, -50%);
  }
  .registration .plan_tag {
    position: relative;
    display: inline-block;
    margin-right: .25em;
    padding: .9em 1em;
    background-color: var(--color-primary);
    border-radius: 1000px;
    color: var(--color-primary-inverted);
    font-weight: 500;
    line-height: 1.2;
  }
  .registration .plan_tag::before {
    content: "";
    position: absolute;
    left: 1.5em;
    bottom: -5px;
    z-index: -1;
    display: block;
    border-top: 6px solid var(--color-primary);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
  .registration .plan:not(.-basic):not(.-recommend) .plan_tag {
    background-color: var(--color-black);
  }
  .registration .plan:not(.-basic):not(.-recommend) .plan_tag::before {
    border-top: 6px solid var(--color-black);
  }

@media (max-width: 768px) {
  .registration .plan_tag {
    padding: .5em;
  }
  .registration .specs_table,
  .registration .specs_table tbody,
  .registration .specs_table tr,
  .registration .specs_table th,
  .registration .specs_table td,
  .registration .specs_table caption {
    display: block;
  }
  .registration .specs_table th {
    padding: 1em 0 0;
  }
  .registration .specs_table td {
    padding-top: 0;
    border-top: 0;
  }
  .registration .specs_table tr:last-child {
    border-bottom: none;
  }
}


/* ------------------------
キャンペーン・優待
------------------------ */
  /* キャンペーンバナー */
  .registration .plan_banner {
    margin: 0 auto;
    width: 100%;
    max-width: 36em;
    text-align: center;
    position: relative;
  }

  .registration .plan_banner .coupon_banner {
    cursor: pointer;
  }

  .registration .plan_banner .coupon_code {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }



  /* セット内容 */
  .registration .plan_set {
    margin: 0 auto;
    width: 100%;
    max-width: 36em;
  }
  .registration .plan_set .plan_features li::before {
    background-color: var(--color-surface);
  }
  .registration .plan_set_item {
    display: flex;
    align-items: center;
  }
  .registration .plan_set_item figure {
    margin-top: calc( var(--margin-basis) / -2);
    margin-right: 0;
    margin-bottom: calc( var(--margin-basis) / -2);
    margin-left: calc( var(--margin-basis) / -2);
    padding-right: 1em;
    width: 100px;
  }
  .registration .plan_set_item .item_title {
    flex: 1;
    padding-right: 1em;
    font-weight: 500;
  }
  .registration .plan_set_item .item_price {
    text-align: right;
  }
  .registration .plan_set_main {
    margin-top: calc( var(--margin-basis) / 2 );
    padding: var(--margin-basis);
    background-color: var(--color-primary-light);
  }
  .registration .plan_set_main .plan_set_item {
    margin-bottom: calc( var(--margin-basis) / 2 );
  }
  .registration .plan_set_item.-privilege {
    margin-top: calc( var(--margin-basis) / 2 );
    padding: var(--margin-basis);
    background-color: var(--color-primary-light);
  }
  .registration .plan_set_glyph {
    margin: calc( var(--margin-basis) / 2) auto;
    width: 30px;
    height: 30px;
    color: var(--color-gray);
  }
  .registration .plan_set_glyph svg {
    width: 100%;
    height: 100%;
  }

  /* 通常コース */
  .registration .plan.-noraml .plan_header {
    margin-bottom: var(--margin-basis);
  }
  .registration .plan_more {
    margin-top: calc( var(--margin-basis) * 2 );
    text-align: center;
  }

  /* おすすめコース */
  .registration .plan.-recommend {
    background-color: var(--color-primary-light);
  }
  .registration .plan.-recommend .plan_set_main {
    background-color: var(--color-surface);
  }
  .registration .plan.-recommend .plan_set_item.-privilege {
    background-color: var(--color-surface);
  }
  .registration .plan.-recommend .plan_features li::before {
    background-color: var(--color-surface);
  }
  .registration .plan.-recommend .plan_set .plan_features li::before {
    background-color: var(--color-primary-light);
  }


  @media (max-width: 768px) {
    .registration .plan_set_main {
      position: relative;
      overflow-x: hidden;
    }
  }


/* ------------------------
エントリーコース
------------------------ */
  .registration .section_entry {
    margin: calc( var(--margin-basis) / 2 );
  }
  .registration .plan.-entry {
    margin-left: auto;
    margin-right: auto;
    padding-top: 2.5%;
  }
  .registration .plan.-entry .plan_header {
    margin-bottom: var(--margin-basis);
  }
  .registration .plan.-entry .plan_content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .registration .plan.-entry .plan_features {
    width: 220px;
    max-width: 100%;
  }
  .registration .plan.-entry .plan_prices {
    padding-right: 2em;
    padding-left: 2em;
    text-align: left;
  }
  .registration .plan.-entry .plan_buttons {
    margin-bottom: 0;
  }
  .registration .plan.-entry .plan_price_main {
    font-size: var(--fontsize-h3);
  }
  .registration .plan.-entry .plan_specs {
    padding-left: 2em;
    border-left: 1px solid var(--color-gray-light);
  }
  .registration .plan.-entry .plan_specs table th,
  .registration .plan.-entry .plan_specs table td {
    text-align: left;
    vertical-align: middle;
  }
  .registration .plan.-entry .plan_specs table th {
    padding: .5em 1em .5em 0;
    color: var(--color-gray);
    font-weight: normal;
  }
  .registration .plan.-entry .plan_specs table td {
    padding: .5em 0;
    font-weight: 500;
  }

  /* 優待・キャンペーン時の省略表示 */
  .registration .plan_lowkey {
    padding-top: calc( var(--margin-basis) * 2.5 );
    padding-bottom: calc( var(--margin-basis) * 2.5 );
    text-align: center;
  }
  .registration .plan_lowkey hr {
    margin-top: 0;
    margin-bottom: calc( var(--margin-basis) * 2.5 );
  }
  .registration .plan_lowkey .title-h4 {
    display: inline-block;
    margin-top: 0;
    padding-right: 1em;
    vertical-align: middle;
  }

@media (max-width: 768px) {
  .registration .section_entry {
    margin: 24px 0 0;
  }
  .registration .plan.-entry .plan_content {
    flex-wrap: wrap;
  }
  .registration .plan.-entry .plan_specs {
    width: 100%;
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--color-gray-light);
  }
  .registration .plan.-entry .plan_specs table,
  .registration .plan.-entry .plan_specs table tbody,
  .registration .plan.-entry .plan_specs table tr,
  .registration .plan.-entry .plan_specs table th,
  .registration .plan.-entry .plan_specs table td {
    display: block;
  }
  .registration .plan.-entry .plan_specs table th {
    padding: 1em 0 0;
  }
  .registration .plan.-entry .plan_specs table td {
    padding: 0 0 1em;
    border-bottom: 1px solid var(--color-gray-light)
  }
}


/* ------------------------
フッター
------------------------ */
  .registration .section_footer {
    margin-top: calc( var(--margin-basis) * 2 );
    margin-right: calc( var(--margin-basis) / 2 );
    margin-left: calc( var(--margin-basis) / 2 );
    text-align: center;
  }


/* ================================================
入力フォーム共通
================================================ */
  /* ラベル */
  .registration .label {
    display: inline-block;
    margin-bottom: .25em;
    font-weight: 600;
    color: var(--color-gray-dark);
  }
  .registration .label.-horizontal,
  .registration .label-horizontal {
    display: inline-block;
    padding-top: .75em;
    padding-bottom: .75em;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    line-height: 1.2;
  }

  /* 必須項目表示 */
  .registration .tag_required {
    display: inline-block;
    margin-right: calc( var(--margin-basis) / 2 );
    margin-left: calc( var(--margin-basis) / 2 );
    padding: .1em .5em;
    background-color: var(--color-error);
    border-radius: 3px;
    color: var(--color-error-inverted);
    font-size: var(--fontsize-small);
    vertical-align: middle;
  }

  /* フォームエリア */
  .registration .section_forms {
    margin-right: auto;
    margin-left: auto;
    max-width: 900px;
  }
  .registration .section_field {
    margin-top: var(--margin-basis);
    padding: 4.5%;
    background-color: var(--color-surface);
  }
  .registration .field_header [class^="title-"] + .legend {
    margin-top: calc( var(--margin-basis) / 2 );
  }
  .registration .field_body:not(:first-child) {
    margin-top: calc( var(--margin-basis) * 2 );
  }
  .registration .field_footer {
    margin-top: calc( var(--margin-basis) * 2 );
  }

  /* フォームパーツ配置 */
  .registration .formgroup {
    margin-top: calc( var(--margin-basis) * 1.5);
  }
  .registration .formgroup .formgroup {
    margin-top: 0;
  }

  /* フォームパーツ配置 - 横並び */
  .registration .formgroup.-horizontal {
    display: flex;
  }
  .registration .formgroup.-horizontal .form_label {
    flex: 0 1 auto;
  }
  .registration .formgroup.-horizontal .form_input {
    flex: 1 1 auto;
  }
  .registration .formgroup.-horizontal > .form_input:not(:first-child) {
    padding-left: var(--margin-basis);
  }

  /* フォームパーツ配置 - 縦並び */
  .registration .formgroup.-vertival > .formgroup:not(:first-child),
  .registration .formgroup.-vertival > .form_input:not(:first-child) {
    margin-top: calc( var(--margin-basis) / 2 );
  }

  /* フォームパーツ配置 - 入力欄のみを横並び */
  .registration .form_input.-horizontal {
    display: flex;
    margin-left: calc( var(--margin-basis) / -2 );
  }
  .registration .form_input.-horizontal > * {
    margin-left: calc( var(--margin-basis) / 2 );
  }
  .registration .form_input.-horizontal .input_radio:not(:first-child),
  .registration .form_input.-horizontal .input_checkbox:not(:first-child) {
    margin-left: calc( var(--margin-basis) * 2 );
  }

  /* 送信ボタン */
  .registration .section_submit {
    display: flex;
    margin-top: calc( var(--margin-basis) * 2 );
    margin-bottom: calc( var(--margin-basis) * 2 );
  }
  .registration .section_submit .nav_back {
    flex: 0 1 25%;
  }
  .registration .section_submit .nav_next {
    flex: 1 1 auto;
    text-align: center;
  }
  .registration .section_submit .nav_back + .nav_next {
    flex: 0 1 50%;
  }

  @media (max-width: 768px) {
    .registration .formgroup.-horizontal {
      flex-wrap: wrap;
    }
    .registration .formgroup.-horizontal > .form_input:not(:first-child) {
      padding-left: 0;
    }
}

/* ================================================
情報入力画面
================================================ */
  /* コース選択 */
  .registration .section_field.-plan .formgroup.-horizontal .form_label {
    /* ラジオボタンのサイズ＋文字数 */
    min-width: calc( var(--margin-basis) + 1px + var(--margin-basis) * .5 + 11em );
  }

  /* 対象コース */
  .registration .section_field.-planfixed .table th {
    width: 8em;
  }

  /* サイト情報 */
  .registration .section_field.-sitecode input[id="ftp_password"] {
    max-width: 320px;
  }

  /* 配送先住所 */
  .registration .section_field.-shipping .form_label {
    flex-basis: 5em;
  }
  .registration .section_field.-shipping .-shipping-zip input[type="text"] {
    max-width: 180px;
  }
  .registration .section_field.-shipping .-shipping-pref select {
    max-width: 300px;
  }
  .registration .section_field.-shipping .-shipping-tel input[type="text"] {
    max-width: 300px;
  }

  /* 支払方法 */
  .registration .payment_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--margin-basis);
    padding-bottom: var(--margin-basis);
    padding-left: 0;
    border-top: 1px solid var(--color-gray-light);
    text-indent: 0;
    transition: .3s ease-out;
  }
  .registration .payment_item:hover {
    background-color: rgba(var(--color-black-rgb), .08);
  }
  .registration .payment_item.-selected {
    background-color: rgba(var(--color-primary-rgb), .08);
  }
  .registration .payment_item:last-child {
    border-bottom: 1px solid var(--color-gray-light);
  }
  .registration .payment_item .payment_input {
    flex: 0 0 calc( var(--margin-basis) * 2 );
  }
  .registration .payment_item .payment_label {
    flex: 1 1 auto;
  }
  .registration .payment_item .payment_label .label {
    display: block;
  }
  .registration .payment_item .payment_available {
    flex: 0 0 auto;
    padding-left: var(--margin-basis);
  }
  .registration .payment_item[for="pay_2"] .payment_available {
    flex-basis: 50%;
  }
  .registration .payment_item[for="pay_1"] .payment_available,
  .registration .payment_item[for="pay_3"] .payment_available,
  .registration .payment_item[for="pay_6"] .payment_available {
    display: flex;
    align-items: center;
  }
  .registration .payment_item[for="pay_1"] .payment_available li:nth-child(n+1),
  .registration .payment_item[for="pay_3"] .payment_available > :nth-child(n+1),
  .registration .payment_item[for="pay_6"] .payment_available li:nth-child(n+1) {
    padding-left: var(--margin-basis);
  }
  .registration .payment_item .payment_cvs_tel {
    margin-top: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: none 0s;
  }
  .registration .payment_item.-selected .payment_cvs_tel {
    margin-top: var(--margin-basis);
    height: auto;
    opacity: 1;
    transition: .3s ease-out;
  }
  .registration .payment_item .payment_cvs_tel input[type="text"] {
    max-width: 360px;
  }

  /* クーポンコード・パートナーコード */
  .registration .section_field.-coupon input[type="text"],
  .registration .section_field.-privatecode input[type="text"] {
    max-width: 360px;
  }

  /* 利用規約 */
  .registration .section_field.-terms {
    text-align: center;
  }
  .registration .section_field.-terms .label {
    margin-top: var(--margin-basis);
  }

  .registration .payment_moderate {
    display: none;
  }

  .registration #show_moderate {
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .registration .payment_item {
      padding-left: 2em;
      flex-wrap: wrap;
      position: relative;
    }
    .registration .payment_item .payment_input {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      left: 0;
    }
    .registration .payment_item[for="pay_1"] .payment_available, .registration .payment_item[for="pay_3"] .payment_available, .registration .payment_item[for="pay_6"] .payment_available {
      padding-left: 0;
      width: 100%;
    }
    .registration .payment_item[for="pay_2"] .payment_available {
      flex-basis: auto;
      width: 100%;
    }
  }



/* ================================================
支払情報画面
================================================ */
  /* 新規カード登録 */
  .registration .section_field.-card .card_field {
    display: flex;
    margin-top: var(--margin-basis);
  }
  .registration .section_field.-card .card_form {
    flex: 1 1 auto;
    padding-right: var(--margin-basis);
  }
  .registration .section_field.-card .card_preview {
    flex: 0 0 350px;
  }
  .registration .section_field.-card .card_form .formgroup:first-child {
    margin-top: 0;
  }
  .registration .section_field.-card .card_form .-card-expiry {
    flex-basis: 170px;
  }

  /* 登録済みカード */
  .registration .regcard_item {
    display: flex;
    align-items: center;
    padding-top: var(--margin-basis);
    padding-bottom: var(--margin-basis);
    padding-left: 0;
    border-top: 1px solid var(--color-gray-light);
    text-indent: 0;
    transition: .3s ease-out;
  }
  .registration .regcard_item:hover {
    background-color: rgba(var(--color-black-rgb), .08);
  }
  .registration .regcard_item.-selected {
    background-color: rgba(var(--color-primary-rgb), .08);
  }
  .registration .regcard_item:last-child {
    border-bottom: 1px solid var(--color-gray-light);
  }
  .registration .regcard_item .regcard_input {
    flex: 0 0 calc( var(--margin-basis) * 2 );
  }
  .registration .regcard_item .regcard_validthru {
    font-size: var(--fontsize-small);
    color: var(--color-gray);
  }

  @media (max-width: 768px) {
    .registration .section_field.-card .card_field {
      flex-wrap: wrap;
    }
    .registration .section_field.-card .card_form {
      padding: 0;
    }
    .registration .section_field.-card .card_preview {
      flex: auto;
    }
    .jp-card-container {
      width: 100% !important;
    }
    .jp-card {
      min-width: 100% !important;
    }
  }



/* ================================================
確認画面
================================================ */
  .registration .section_field.-confirm .table th {
    width: 16em;
  }
  .registration .confirm_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  } 
  .registration .confirm_list dt {
    flex: 1 1 7em;
    color: var(--color-gray);
    font-weight: normal;
  } 
  .registration .confirm_list dd {
    flex: 1 1 calc( 100% - 7em );
  } 


/* ================================================
完了画面
================================================ */
  /* アンケート */
  .registration .section_field.-questionnaire .form_label {
    margin-top: calc( var(--margin-basis) * 2 );
    margin-bottom: calc( var(--margin-basis) / 2 );
  }
  .registration .section_field.-questionnaire select {
    width: auto;
  }
  .registration .section_field.-questionnaire .ans_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .registration .section_field.-questionnaire .ans_list li {
    flex: 0 0 48%;
    margin-top: calc( var(--margin-basis) / 2 );
  }
  .registration .section_field.-questionnaire .ans_list li label {
    margin-bottom: 0;
  }
  .registration .section_field.-questionnaire .ans_text_etc {
    margin-top: calc( var(--margin-basis) / 2 );
  }


/* ================================================
モーダル
================================================ */

/* ------------------------
レイアウト
------------------------ */
  .registration.modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-surface);
  }
  .registration.modal form {
    height: 100%;
  }
  .registration .modal_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
  }
  .registration .modal_header {
    flex: 0 0 auto;
    padding: var(--margin-basis);
    box-shadow: 0 0 5px -1px rgba(0,0,0,.25);
  }
  .registration .modal_body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: calc( var(--margin-basis) * 2 ) calc( var(--margin-basis) * 2 ) 0;
  }
  .registration .modal_body::after {
    content: "";
    display: block;
    padding-bottom: calc( var(--margin-basis) * 2 );
  }
  .registration .modal_body_innner {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .registration .modal_body_innner > :first-child {
    margin-top: 0;
  }
  .registration .modal_footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: calc( var(--margin-basis) / 2 ) var(--margin-basis);
    box-shadow: 0 0 5px -1px rgba(0,0,0,.25);
  }
  .registration .modal_footer > *:not(:first-child) {
    padding-left: var(--margin-basis);
  }

/* ------------------------
オプション選択
------------------------ */
  .registration.modal.-option .option_item .form_label {
    display: flex;
    justify-content: space-between;
  }
  .registration.modal.-option .option_item .notes {
    margin-left: calc( var(--margin-basis) * 1.5 );
  }

/* ------------------------
常時SSL設定代行
------------------------ */
  .registration.modal.-ssl h2 {
    margin-top: calc( var(--margin-basis) * 2 );
    margin-bottom: calc( var(--margin-basis) / 2 );
  }
  .registration.modal.-ssl h3 {
    margin-bottom: calc( var(--margin-basis) / 2 );
  }
  .registration.modal.-ssl .domain-item {
    margin-top: var(--margin-basis);
  }
  .registration.modal.-ssl .domain-item .domain-url {
    margin-top: calc( var(--margin-basis) / 2 );
    margin-left: calc( var(--margin-basis) * 1.5 );
  }
  .registration.modal.-ssl .ssl_terms {
    padding: var(--margin-basis);
    height: 12em;
    background-color: rgba(var(--color-black-rgb),.06);
    border: 1px solid var(--color-gray-light);
    overflow: auto;
  }
  .registration.modal.-ssl .ssl_terms > :nth-child(n+2) {
    margin-top: var(--margin-basis);
    margin-bottom: 0;
  }
  .registration.modal.-ssl .ssl_confirm {
    margin-top: calc( var(--margin-basis) * 2 );
  }
  .registration.modal.-ssl .ssl_confirm th {
    width: 25%;
  }


/* ================================================
jQuery UI 調整
================================================ */
  div.ui-dialog .modal_header {
    padding-top: 0;
  }

  div.ui-dialog {
    padding: 0;
  }
  div.ui-dialog .ui-dialog-titlebar {
    padding: 0;
    height: 30px;
  }
  div.ui-dialog .ui-dialog-title {
  }
  div.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 0;
  }
  div.ui-dialog .ui-dialog-titlebar-close .ui-button-text {
    display: none;
  }
  div.ui-dialog .ui-dialog-content {
    position: relative;
    border: none;
    padding: .5em 1em;
    background: none;
    overflow: auto;
  }
  div.ui-dialog .ui-dialog-buttonpane {
    margin-top: 0;
    padding: calc( var(--margin-basis) / 2 ) var(--margin-basis);
    box-shadow: 0 0 5px -1px rgba(0,0,0,.25);
  }
  div.ui-dialog .ui-dialog-buttonpane button {
    margin: 0;
  }
  div.ui-dialog .ui-dialog-buttonpane button + button {
    margin-left: calc( var(--margin-basis) / 2 );
  }
  div.ui-widget {
    font-family: inherit;
    font-size: 1em;
  }
  div.ui-widget .ui-widget {
    font-size: 1em;
  }
  div.ui-widget input,
  div.ui-widget select,
  div.ui-widget textarea,
  div.ui-widget button {
    font-family: inherit;
    font-size: 1em;
  }
  div.ui-widget-content {
    border: 1px solid rgba(0,0,0,.2);
    background: #ffffff;
    color: inherit;
  }
  div.ui-widget-content a {
    color: inherit;
  }
  div.ui-widget-header {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: bold;
  }
  div.ui-widget-header a {
    color: inherit;
  }
  button.ui-button .ui-button-text {
    line-height: inherit;
  }
  button.ui-button-text-only .ui-button-text {
    padding: 0;
  }
  div.ui-widget-overlay {
    background: rgba(0,0,0,.55);
    opacity: 1;
  }

  /* 表示位置調整 */
  .ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    max-width: 100% !important;
    max-height: 100vh !important;
  }
  .ui-dialog-content {
    max-height: calc( 100vh - 30px - 80px ) !important;
  }


/* ================================================
登録情報更新（コース一覧）
================================================ */
  .registration.modal.-profile h2 {
    margin-top: calc( var(--margin-basis) * 2 );
    margin-bottom: calc( var(--margin-basis) / 2 );
  }
  .registration.modal.-profile .-address .form_label {
    min-width: 5em;
  }
  .registration.modal.-profile .-address-zip input[type="text"] {
    max-width: 180px;
  }
  .registration.modal.-profile .-address-pref select {
    max-width: 20em;
  }
  .registration.modal.-profile .-occupation select {
    max-width: 20em;
  }
  .registration.modal.-profile .-newsletter .form_input {
    margin-top: var(--margin-basis);
  }
  .registration.modal.-profile .-newsletter .form_input:not(:last-child) {
    margin-bottom: var(--margin-basis);
  }