@charset "UTF-8";
/**
 * 会員登録・変更フォーム（member.jsp）のレスポンシブ用スタイル
 * registration.jsp / update.jsp / studio/seat.jsp からインクルードされるフォームに適用
 */

/* seat.jsp からインクルードされている時だけ #registration の左右マージンを 1em に */
.registration-in-seat #registeration,
.registration-in-seat #registration {
  margin-left: 1em;
  margin-right: 1em;
}

.member-form-wrapper {
  max-width: 100%;
  overflow-x: hidden;
  font-size: 1.2em;
}

.member-form-wrapper .member-form-table {
  width: 100%;
  border-collapse: collapse;
}

/* テキストボックス右側の説明文などを狭い幅でも折り返す */
.member-form-wrapper .member-form-table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* input type="radio" と label（または隣接テキスト）を上下中央に揃える */
.member-form-wrapper .member-form-table input[type="radio"] {
  vertical-align: middle;
}
.member-form-wrapper .member-form-table label {
  vertical-align: middle;
}

.member-form-wrapper .member-form-table input[type="text"],
.member-form-wrapper .member-form-table input[type="password"],
.member-form-wrapper .member-form-table select,
.member-form-wrapper .member-form-table textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* member.jsp の input：size 指定時は ch 単位で max-width（ボーダー等考慮で +1ch） */
.member-form-wrapper .member-form-table input[size="3"] {
  max-width: 4ch;
}
.member-form-wrapper .member-form-table input[size="5"] {
  max-width: 6ch;
}
.member-form-wrapper .member-form-table input[size="20"] {
  max-width: 21ch;
}
.member-form-wrapper .member-form-table input[size="35"] {
  max-width: 36ch;
}

#address1 {
  max-width: 12ch;
}

.member-form-wrapper .member-form-table textarea {
  width: 100%;
  min-height: 120px;
}

/* シネマシティズン内側テーブルはインラインのまま */
.member-form-wrapper .member-form-inner {
  display: table;
}

.member-form-wrapper .member-form-inner td {
  padding-right: 1em;
}

/* #citizen_auto_renewal とその右のコンテンツ（自動更新・シネマシティズンとは？）を上下中央に揃える */
.member-form-wrapper .member-form-inner tr td {
  vertical-align: middle;
}
.member-form-wrapper .member-form-inner input#citizen_auto_renewal {
  vertical-align: middle;
}

/* スマートフォン・タブレット: テーブルを行ブロック化 */
@media screen and (max-width: 768px) {
  .member-form-wrapper .member-form-table,
  .member-form-wrapper .member-form-table tbody,
  .member-form-wrapper .member-form-table tr {
    display: block;
  }

  .member-form-wrapper .member-form-table thead {
    display: none;
  }

  .member-form-wrapper .member-form-table tr {
    margin-bottom: 0.75em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #eee;
  }

  .member-form-wrapper .member-form-table tr:last-child {
    border-bottom: none;
  }

  .member-form-wrapper .member-form-table td {
    display: block;
    padding: 0.25em 0 0.5em;
    border: none;
    width: 100% !important;
    max-width: none;
  }

  /* ラベル役のセル（1列目でテキストがある行） */
  .member-form-wrapper .member-form-table td:first-child:not([colspan]) {
    font-weight: bold;
    padding-bottom: 0.2em;
    margin-top: 0.5em;
  }

  .member-form-wrapper .member-form-table tr:first-child td:first-child {
    margin-top: 0;
  }

  /* colspan=3 のセルは全幅の1ブロック */
  .member-form-wrapper .member-form-table td[colspan="3"] {
    margin-top: 0;
  }

  /* 空の1列目（名・名の行）は余白として扱う */
  .member-form-wrapper .member-form-table tr td:first-child:empty,
  .member-form-wrapper .member-form-table tr td:only-child {
    margin-top: 0;
    padding-top: 0;
  }

  .member-form-wrapper .member-form-table input[type="text"],
  .member-form-wrapper .member-form-table input[type="password"],
  .member-form-wrapper .member-form-table select {
    width: 100%;
    min-height: 2.25em;
    font-size: 16px; /* iOS ズーム防止 */
  }

  .member-form-wrapper .member-form-table select {
    padding: 0.35em 0.5em;
  }

  .member-form-wrapper .member-form-table textarea {
    width: 100%;
    min-height: 140px;
    font-size: 14px;
  }

  /* 性別ラジオを縦並びに */
  .member-form-wrapper .member-form-table input[type="radio"] {
    margin-right: 0.5em;
    min-width: 1.25em;
    min-height: 1.25em;
  }

  .member-form-wrapper .member-form-table label {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 0.25em;
  }

  /* 説明・注意文の折り返し */
  .member-form-wrapper .member-form-table .error-message,
  .member-form-wrapper .member-form-table span[style*="color"] {
    display: block;
    word-wrap: break-word;
  }

  /* 内側テーブル（シネマシティズン）もブロック化 */
  .member-form-wrapper .member-form-inner,
  .member-form-wrapper .member-form-inner tbody,
  .member-form-wrapper .member-form-inner tr,
  .member-form-wrapper .member-form-inner td {
    display: block;
  }

  .member-form-wrapper .member-form-inner td {
    padding: 0.25em 0;
  }

  .member-form-wrapper .member-form-inner a {
    word-break: break-all;
  }
}

/* 極小画面用の余白調整 */
@media screen and (max-width: 480px) {
  .member-form-wrapper .member-form-table {
    margin-left: 0;
    margin-right: 0;
  }

  .member-form-wrapper .member-form-table tr {
    margin-bottom: 0.6em;
    padding-bottom: 0.6em;
  }
}