@charset "UTF-8";
/* [顧客側] 共通 css */

.msgbox-outer.mb-err { z-index: 102; }
input[name="botchk"][type="checkbox"][name="botchk"]+label { color: #fff; }

body { background-color: #fff; }
.content { max-width: 1300px; margin: auto; }

header .sys-name { display: none; cursor: pointer; }
.-rent- header .sys-name.-rent-,
.-loan- header .sys-name.-loan- { display: block; }

header .cstmrName::after { content: '様'; font-size: 80%; margin-left: 0.2em; }
header .cstmrName:empty::before { content: 'ご新規ユーザー'; }
header .hd-r-wrap { position: relative; padding-right: 20px; }
header .menu-box {
  position: absolute;
  right: 0;
  z-index: 1;
  text-align: right;
}
header .menu-box::before {
  content: '\f0d7';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-bottom: 32px;
  font-size: 24px;
}
header .menu-box li {
  width: 200px;
  background-color: #f1f1f1;
  color: #555;
  padding: 12px 20px;
  background-color: #f1f1f1;
  color: #555;
  padding: 8px 24px;
  text-align: left;
  display: none;
}
header .menu-box li[onclick] { cursor: pointer; }
header .menu-box li:hover { text-decoration: underline; }
header .menu-box li:first-of-type { border-radius: 4px 4px 0 0; }
header .menu-box li:last-of-type { border-radius: 0 0 4px 4px; }
header .menu-box li ~ li { border-top: 1px solid #ccc; }
header .menu-box li:empty { min-height: 40px; }
header .menu-box li:empty + li { border-top: none; }
header .cstmrName:hover ~ .menu-box li, header .menu-box:hover li { display: block; }

main { padding: 20px 40px 40px; }
:is(main, form) > section ~ section { margin-top: 60px; }
:is(main, form) > section:has(.pg-ttl-wrap) + section, section + form { margin-top: 40px; }
:is(main, form) > section > h4 { font-size: 28px; }
:is(main, form) > section > h4 + p { font-size: 14px; line-height: 1.3; padding-left: 12px; }

.inp-wrap > dl > dl { align-items: center; } /* 顧客側は横並びの方が見栄えがいいと判断 */

.inp-wrap + .btn-wrap-h { margin-top: 60px; }

/* 店舗（名前／電話／住所） */
.shop-info li ~ li { margin-top: 8px; }
.shop-info .name-box { font-size: 18px; }
.shop-info .tel-box::before { content: 'TEL : '; }

/* 利用規約・個人情報の取扱い */
#privacyPolicy_modal .modal-content { text-align: left; }
#privacyPolicy_modal .btn-outer { margin-top: 20px; }
#privacyPolicy_modal .modal-content h2 { margin-bottom: 20px; font-size: 20px; text-align: center; }
.rule-wrap > dl > dt { font-size: 20px; font-weight: bold; }
.rule-wrap>dl>dd .txa-box { font-size: 14px; line-height: 1.4; max-height: 200px; }
.rule-wrap > dl ~ dl { margin-top: 40px; }
.rule-wrap .pp-wrap { max-height: 300px; border-radius: 6px; padding: 4px; border: var(--inp-br); line-height: 1.3; }
.pp-wrap { padding: 7px; height: 76vh; overflow: auto; }
.pp-wrap h2 { margin: 10px 0; font-size: 18px; text-align: center; }
.pp-wrap h3 { margin-top: 8px; font-size: 16px; }
.pp-wrap p { margin: 0; font-size: 14px; }
.pp-wrap table { margin-top: 4px; font-size: 14px; }
.pp-wrap table tr th, .pp-wrap table tr td { border: var(--inp-br); padding: 8px; }
.pp-wrap table thead tr:first-of-type th { border-radius: 0px; background-color: var(--evn-bgcolor); text-align: center; }

/* メアド送信モーダル */
#email_modal .modal-content { max-width: 600px; }
#email_modal .modal-content dl { margin: 20px; text-align: left; }
#email_modal .modal-content dl dt { font-weight: bold; }



/* For SmartPhone & Tablet */
@media screen and (max-width: 1050px) {
  header { padding: 16px 8px; }
  main { padding: 6px 8px; }
}

/* For SmartPhone */
@media screen and (max-width: 767px) {

  .rule-wrap .pp-wrap {
    max-height: 200px;
  }
  .rule-wrap > dl > dt {
    font-size: 19px;
  }

  :is(main, form) > section > h4 {
    font-size: 24px;
    line-height: 1.2;
  }
  :is(main, form) > section > h4 + p {
    margin-top: 8px;
  }

}