@charset "utf-8";

/*==============================================================================
  新規ユーザー登録ページ
  対象: entry.html, entry_comp.html, select_entry_comp.html
  ファイル: common/css/entry.css
==============================================================================*/

#entry .entryWrap form .entryInner {
  margin: 0 auto;
  background-color: #ffffff;
  margin-bottom: 24px;
}
#entry .entryInner .entryBox {
  margin-bottom: 8px;
}
#entry .entryInner .entryBox .item {
  font-size: 17px;
  font-weight: bold;
  border-bottom: 2px solid #b8b8b8;
  padding: 8px 2px 6px;
  margin: 0 10px 2px;
}

#entry .entryInner .entryBox .conf_area .data {
  float: left;
}
#entry .entryInner .entryBox .conf_area #firstname {
  margin: 0;
  padding: 0 10px;
}
#entry .entryInner .entryBox .conf_area #lastname {
  margin: 0;
  padding-left: 20px;
}
#entry .entryInner .entryBox .conf_area #firstkana {
  margin: 0;
  padding: 0 10px;
}
#entry .entryInner .entryBox .conf_area #lastkana {
  margin: 0;
  padding-left: 30px;
}
#entry .entryInner .entryBox .item .req {
  font-size: 16px;
  margin-left: 1em;
  color: #ff0000;
  font-weight: normal;
}
/* 全inputを Bootstrap式でリセット */
#entry input[type="text"],
#entry input[type="tel"],
#entry input[type="email"],
#entry input[type="password"] {
  height: auto;
  box-sizing: border-box;
  width: 100%;
  font-size: 18px;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
/* 各データ行 */
#entry .entryInner .entryBox .data {
  font-size: 18px;
  padding: 10px 10px;
}
/* 姓/名・セイ/メイ — 2列グリッド＋ラベル上置き */
#entry .entryInner .entryBox .input_area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 10px 6px;
}
#entry .entryInner .entryBox .input_area .data {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}
#entry .entryInner .entryBox .input_area .data label {
  display: block;
  font-size: 15px;
  color: var(--ka-subtext);
  margin-bottom: 6px;
  font-weight: normal;
  cursor: pointer;
}
#entry .entryInner .entryBox .input_area .data input {
  width: 100%;
  margin-left: 0;
}
/* ラジオボタン */
#entry .radio-label {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  margin-right: 32px;
  margin-top: 4px;
  cursor: pointer;
  gap: 10px;
}
#entry .radio-input {
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--ka-orange);
}
/* 髪の長さ セレクト */
#entry .entry-select {
  width: 100%;
  max-width: 300px;
  padding: 12px 14px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}
/* 前日メール補足テキスト */
#entry .entryInner .entryBox .item .item-sub {
  display: block;
  font-size: 14px;
  font-weight: normal;
  color: var(--ka-subtext);
  margin-top: 4px;
  line-height: 1.5;
}
/* パスワード表示トグル */
#entry .entryInner .entryBox .data .password-wrapper {
  display: block;
  position: relative;
}
#entry .entryInner .entryBox .data .password-wrapper input {
  padding-right: 44px;
}
/* プライバシーポリシー アコーディオン */
#entry form .prv {
  margin: 0 auto;
  background-color: #efefef;
  padding: 1em;
  border-radius: 4px;
}
/* プライバシーポリシー同意通知 */
#entry form .prv-notice {
  text-align: center;
  font-size: 13px;
  color: var(--ka-subtext);
  margin: 4px 0 8px;
}
#entry form .prv-notice a {
  color: var(--ka-orange);
  text-decoration: underline;
}
/* 確認ボタン — frm_button で primary orange を継承。ラッパーのみ */
#entry .entryWrap form p.btnComfirm {
  margin-top: 50px;
}
/*新規登録 完了画面*/
#entry .thanks p.headTit {
  margin-bottom: 2em;
}
#entry .thanksInner .thanksBox .btn {
  text-align: center;
}
/* マイページへ — .ka-btn.ka-btn-outline を使用 */
#entry .fluid.entryWrap .btnMypage {
  margin-top: 20px;
}
/* 予約するボタン — .ka-btn.ka-btn-primary を使用 */
#entry .fluid.entryWrap .btnReserve {
  margin-top: 20px;
}
/* サイトTOP — .ka-btn.ka-btn-outline を使用 */
#entry .fluid.entryWrap .btnTop {
  margin-top: 20px;
}

/* 会員登録確認 コンパクトテーブル */
#entry .confTable {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}
#entry .confTable .confRow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  padding: 10px 14px;
  gap: 12px;
  min-height: 42px;
}
#entry .confTable .confRow:last-child {
  border-bottom: none;
}
#entry .confTable .confLabel {
  flex: 0 0 110px;
  font-size: 12px;
  color: var(--ka-subtext);
  font-weight: bold;
}
#entry .confTable .confVal {
  flex: 1;
  font-size: 15px;
  color: var(--ka-ink);
  word-break: break-all;
}
#entry .confTable .conf_area {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

/* 確認ページ専用 — スペース圧縮・ボタン */
#entry.confirm .entryWrap p.headTit {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#entry.confirm .entryWrap form .entryInner {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}
#entry.confirm .confTable .confRow {
  padding: 7px 14px;
  min-height: 36px;
}
#entry.confirm .entryWrap form p.btnComfirm {
  margin-top: 16px;
}
#entry.confirm .entryWrap form p.btnBack {
  margin-top: 10px;
}
/* 修正するボタン <a> — .ka-btn.ka-btn-outline を使用 */

/* インラインバリデーション */
#entry .entryInner .entryBox .data input.is-valid,
#entry .entryInner .entryBox .data select.is-valid {
  border-color: #2a9a2a;
}
#entry .entryInner .entryBox .data input.is-invalid,
#entry .entryInner .entryBox .data select.is-invalid {
  border-color: #e00;
  background-color: #fff8f8;
}

/* Tablet Layout: 481px */
@media only screen and (min-width: 481px) {

  #entry .fluid.entryWrap form .entryInner {
    width: 100%;
    max-width: 500px;
    padding: 0em 0em 2.6em;
    border: none;
  }
  #entry form .entryInner .entryBox {
    margin: 0em auto 1.2em;
    padding: 0.6em;
    background-color: #ffffff;
  }
  #entry form .entryInner .entryBox p.item {
    padding: 0.5em 1em;
  }
  #entry form .entryInner .entryBox .item {
    border-bottom: #b8b8b8 2px solid;
  }
  #entry form .entryInner .entryBox .input_area {
    gap: 14px;
    padding: 10px 10px 6px;
  }
  #entry form .prv {
    width: 100%;
    max-width: 500px;
  }
  #entry form .prv .prvBox.is-open {
    max-height: 500px;
  }
}