html,
body {
  margin: 0px;
  padding: 0px;
  color: #000;
  font-size: 14px;
  height: 100%;
  position: relative;
  background: #e5e5e5;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
  height: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
  color: var(--base_color1, #22A7F0);
}
a img {
  border: none;
}
.left {
  float: none;
}
.right {
  float: none;
}
.message_change {
  font-weight: bold;
  color: green;
}
#section_header {
  background: #fff;
  border-bottom: solid 1px #ccc;
  height: 44px;
  position: relative;
  padding-bottom: 10px;
  padding-top:4px;
}
#section_header i {
  font-size: 25px;
  color: #333;
  position: absolute;
  top: 8px;
  right: 10px;
}
#div_header_logo_box {
  display: block;
  float: left;
}
#img_sp_header_logo {
  display: block;
  height: 40px;
  width: auto;
  float: left;
}
.img_logo_index {
  margin: 0 0 0 25px;
}
.img_logo_index_after {
  margin: 0 2.8%;
}
@media screen and (max-width: 900px) {
  .img_logo_index {
    margin: 0 0 0 4px;
  }
  .img_logo_index_after {
    margin: 0 0 0 4px;
  }
  #div_header_logo_box.logo_with_text #img_sp_header_logo,
  #section_header.logo_with_text .img_logo_index_after {
    margin-left: 0;
  }
  #div_header_logo_box.logo_with_text #img_sp_header_logo,
  #section_header.logo_with_text .img_logo_index_after {
    margin-left: 10px;
  }
  .mobile_change_customer_password_dialog {
    width: 70vw !important;
  }
  .div_label_group_input_message_password_change {
    display: block;
  }
  .div_label_group_input_message_password_change label {
    display: block;
  }
  .mobile_change_customer_password_dialog input[type="password"] {
    width: 100%;
  }
}
#header_ttl,
#header_ttl_contents_top {
  line-height: 20px;
  font-weight: normal;
  margin: 0;
  padding: 10px;
  font-size: 13px;
  text-align: left;
  display: block;
  text-shadow: 1px 1px 1px #ddd;
  -moz-text-shadow: 1px 1px 1px #ddd;
  -webkit-text-shadow: 1px 1px 1px #ddd;
  float: left;
}
#div_header_logo_box.logo_only #header_ttl {
  display: none;
}
.img_logo_index,
.img_logo_index_after {
  padding: 2px;
}
#img_sp_header_logo.img_logo_index_after.logo_only {
  width: auto;
}
#section_header.logo_only #header_ttl_contents_top {
  display: none;
}
.text_only #img_sp_header_logo {
  display: none;
}
#div_header_logo_box.text_only #img_sp_header_logo {
  display: none;
}
#div_header_logo_box.logo_with_text {
  display: flex;
}
#div_header_logo_box.logo_with_text #header_ttl {
  order: 2;
}
#section_header.logo_with_text {
  display: flex;
}
#div_header_logo_box.logo_with_text #img_sp_header_logo,
#section_header.logo_with_text .img_logo_index_after {
  order: 1;
  width: 40px;
  display: inline-block;
  margin-right: 0;
}
#section_header.logo_with_text #header_ttl_contents_top {
  order: 2;
}
#span_hum_open {
  cursor: pointer;
}
#i_hum_open {
  cursor: pointer;
}
#loading {
  height: 100%;
  position: fixed;
  z-index: 99999;
  width: 100%;
  background-color: rgba(255,255,255,0.5);
}
#loading i {
  color: #2574a9;
  font-size: 800%;
  text-align: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 30%;
}
.dow_black {
  color: #222 !important;
}
.dow_red {
  color: #D24D57 !important;
}
.dow_blue {
  color: #3498DB !important;
}
#section_auth {
  display: block;
  width: auto;
  height: auto;
  box-sizing: border-box;
  position: relative;
  background: none;
  top: initial;
  left: initial;
  margin: 0;
}
#section_auth i {
  display: none;
}
#section_bodybox {
  width: 100%;
  position: relative;
}
.section_mypage {
  display: none;
  position: absolute;
  width: 90%;
  right: 0;
  top: 0;
  box-sizing: border-box;
  padding: 0 16px;
  height: 100%;
}
.section_mypage_open {
  display: block;
}
.h3_mypage_name {
  margin: 0;
  margin-top: 15px;
  text-align: center;
  font-size: 20px;
  padding: 16px 0;
  color: #222;
}
.span_myticket_num {
  display: block;
  text-align: center;
  font-size: 12px;
  padding: 0 8px;
  font-weight: bold;
}
.span_exp_txt {
  font-size: 12px;
  text-align: left;
  display: block;
  padding: 16px 0;
  font-weight: normal;
}
#a_mypage_login {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  background: #F27935;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}
#a_mypage_logout {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  background: #666;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}
#a_mypage {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  background: var(--base_color1, #22A7F0);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  color: var(--base_text_color, #fff);
}
.a_back_index {
  text-align: center;
  display: block;
  text-decoration: underline;
  padding: 16px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin: 16px 0 0 0;
  text-decoration: none;
}
#a_back_index {
  text-align: center;
  display: block;
  text-decoration: underline;
  color: #fff;
  padding: 16px;
  font-weight: bold;
}
#section_person_area {
  width: auto;
  border-bottom: 1px solid #ccc;
}
#section_person_area h1 {
  font-size: 18px;
}
.mobile_change_customer_password_dialog {
  width: 30vw;
  margin: 25px auto;
  padding: 15px 25px;
  box-shadow: #555555 0px 0px 3px 2px;
  border-radius: 3px;
  color: #555555;
  background: #ffffff;
}
.mobile_change_customer_password_title {
  font-size: 15px;
  font-weight: bold;
}
.mobile_change_customer_password_message {
  padding: 15px 0;
}
.mobile_change_customer_password_content {
  text-align: center;
}
#wrapper_change_user_password_dialog {
  position: absolute;
  margin: 0 auto;
  background: #555555a1;
  width: 100%;
  height: 100%;
  z-index: 10000;
  left: -1px;
  top: 0;
}
#div_mobile_change_password_task_bar {
  text-align: right;
}
#button_close_change_password_wrapper {
  appearance: none;
  color: #fff;
  background: none;
  border: #ccc solid 2px;
  font-size: 30px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  margin: 10px;
}
.div_close_this_dialog {
  text-align: right;
}
.div_label_group_input_message_password_change {
  display: flex;
}
.div_label_group_input_message_password_change label {
  min-width: max-content;
  flex: 5;
}
.mobile_change_customer_password_dialog input:nth-of-type(2) {
  margin-bottom: 10px;
}
.mobile_change_customer_password_dialog input {
  margin: initial;
}
.mobile_change_customer_password_dialog input[type="password"] {
  margin: initial;
  width: 15vw;
}
.button_close_this_customer_change_password {
  width: 25px;
  height: 25px;
  appearance: none;
  border: #555555 solid 1px;
  font-size: 15px;
  background: none;
  color: #555555;
  border-radius: 50px;
  cursor: pointer;
}
.mobile_change_customer_password_button {
  appearance: none;
  padding: 5px 15px;
  border: none;
  border-radius: 3px;
  background: #005bac;
  color: #fff;
  cursor: pointer;
}
.mobile_change_customer_password_button:hover {
  opacity: 0.7;
}
.mobile_message_change_password_error div {
  background: #FF8E8E;
  color: #fff;
  margin: 5px auto;
  padding: 5px 15px;
  border-radius: 5px;
  box-shadow: #ccc 1px 1px 5px 2px;
}
.mobile_message_change_password_error div:before {
  content: "▲";
  display: block;
  font-size: 20px;
  color: #FF8E8E;
  position: relative;
  top: -10px;
  line-height: 0.5;
}
#div_cookie_agreement_dialog {
  display: block;
  width: 25%;
  position: fixed;
  z-index: 1001;
  background: #fff;
  right: 5%;
  bottom: 5%;
  box-shadow: #ccc 0px 0px 4px 1px;
  border-radius: 3px;
  padding: 1%;
}
#div_title_cookie_agreement {
  font-size: 15px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
}
#div_cookie_agreement_button_wrapper {
  width: 100%;
  text-align: center;
}
#button_cookie_agreement_accept {
  background: #33518b;
  appearance: none;
  border-radius: 3px;
  padding: 5px 15px;
  border: #ccc 1px solid;
  margin: 0 auto;
  margin-top: 10px;
  width: max-content;
  cursor: pointer;
  color: #fff;
}
#button_cookie_agreement_reject {
  background: #fff;
  appearance: none;
  border-radius: 3px;
  padding: 5px 15px;
  border: #ccc 1px solid;
  margin: 0 auto;
  margin-top: 10px;
  width: max-content;
  cursor: pointer;
}
#button_cookie_agreement_accept:hover {
  opacity: 0.5;
}
#div_cookie_agreement_body {
  font-size: 13px;
}
#section_reserve_conf_area {
  padding: 0 0 2rem;
  width: auto;
  border-bottom: 1px solid #ccc;
}
#section_reserve_conf_area h1 {
  font-size: 18px;
  border-left: 6px solid var(--base_color1, #22A7F0);
  padding: 0 0 0 10px;
}
#section_reserve_conf_area h1 time {
  margin: 0 0 0 10px;
}
#section_reserve_conf_area .section_reserve_conf_area_optmsg > dt {
  font-weight: bold;
}
#section_reserve_conf_area .section_reserve_conf_area_optmsg > dd {
  margin: 0;
}
#section_reserve_conf_area #mainmanu_ttl,
#section_reserve_conf_area #submanu_ttl,
#section_reserve_conf_area #res_num,
#section_reserve_conf_area #msg_no_reservation,
#section_reserve_conf_area .section_reserve_conf_area_optmsg,
#section_reserve_conf_area .can_msg {
  margin: 2rem 0 0;
}
#section_reserve_conf_area #mainmanu_ttl,
#section_reserve_conf_area #submanu_ttl,
#section_reserve_conf_area #res_num {
  font-weight: bold;
}
#section_reserve_conf_area #msg_no_reservation {
  display: inline-block;
}
.section_reserve {
  background-color: #fff;
}
#ul_main_menu {
  border-top: 1px solid #ccc;
  background-color: #fff;
  padding-bottom: 25px;
}
#ul_main_menu li {
  margin: 25px 40px;
  margin-bottom: 0px;
  width: auto;
  -webkit-appearance: none;
  box-shadow: 1px 1px 1px 1px #555;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  -moz-box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  -moz-text-shadow: 1px 1px 1px #888;
  -webkit-text-shadow: 1px 1px 1px #888;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#ul_main_menu li a {
  display: block;
  text-align: center;
  font-size: 18px;
  padding: 16px;
  font-weight: normal;
}
#ul_main_menu li.top_menu.nextpage {
  background: #fff;
  border: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-align: center;
}
#ul_main_menu li.top_menu.nextpage a {
  display: inline-block;
  background: none;
  padding: 0;
}
#ul_main_menu li.top_menu.nextpage a:before {
  width: 19px;
  height: 23px;
  content: " ";
  display: inline-block;
  background: url(../image/home-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
  vertical-align: middle;
}
#ul_main_menu li.dropmenu {
  background: var(--base_color1, #22A7F0);
}
#ul_main_menu li.dropmenu a {
  background: url(../image/ico_menudown.png) no-repeat;
  background-position: 95% 50%;
  color: #fff;
}
#ul_main_menu li.active a {
  background: url(../image/ico_menuup.png) no-repeat;
  background-position: 95% 50%;
}
#ul_main_menu li.nextpage {
  background: #c9c9c9;
}
#ul_main_menu li.nextpage a {
  color: #fff;
}
#ul_main_menu li[parent_flg="0"] {
  margin: 15px 60px;
}
#ul_main_menu li[parent_flg="0"] a {
  font-size: 14px;
}
#section_under_contents nav {
  background: #c9c9c9;
}
#section_under_contents nav #ul_under_menu li {
  border-top: solid 1px #ddd;
}
#section_under_contents nav #ul_under_menu li a {
  display: block;
  text-align: left;
  font-size: 13px;
  padding: 12px 12px;
  font-weight: bold;
  color: #fff;
  background: #c9c9c9;
}
#section_under_contents nav #ul_under_menu li.language a {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  color: #ccc;
  background: #333;
  border-bottom: solid 1px #222;
}
footer {
  background: #454545;
  width: 100%;
}
footer a {
  color: #fff;
}
footer #p_openfrom {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  color: #ccc;
}
footer#under_shop_info {
  padding: 20px 0;
  border-top: #ccc 1px solid;
  background: #fff;
}
footer#under_shop_info a#a_tel:before {
  width: 17px;
  height: 17px;
  content: " ";
  display: inline-block;
  background: url(../image/tel-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
}
footer#under_shop_info a#a_tel {
  color: #333;
  text-align: center;
  display: block;
  font-size: 25px;
}
footer#under_shop_info #p_openfrom {
  color: #333;
  line-height: 23px;
}
address {
  color: #fff;
  text-align: center;
  font-style: normal;
  font-size: 13px;
  padding: 16px 0;
  background: #555;
}
#bk_cover {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  background-color: rgba(0,0,0,0.7);
  display: none;
  z-index: 1000;
  left: 0;
  top: 0px;
}
.modal_box {
  width: 90%;
  border: solid 1px #ccc;
  background-color: #fff;
  position: fixed;
  top: 24px;
  left: 50%;
  margin-left: -45%;
  display: none;
  z-index: 10000;
}
.modal_box_ttl {
  font-size: 14px;
  padding: 8px;
}
.modal_inbox {
  padding: 0;
}
.modal_inbox_ttl {
  margin: 0;
  display: block;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}
.modal_inbox_txt {
  margin: 0;
  display: block;
  text-align: center;
  padding: 0 16px 16px 16px;
  font-size: 16px;
  line-height: 1.6em;
  box-sizing: border-box;
  overflow: auto;
}
.modal_inbox_close {
  font-size: 20px;
  text-align: center;
  border-top: solid 1px #ccc;
  display: block;
  padding: 8px 0;
  cursor: pointer;
}
.modal_inbox_close:hover {
  color: #999;
}
#mypage_contents {
  background-color: #fff;
  padding: 17px 17px;
  border-bottom: solid 1px #ccc;
}
#mypage_contents .profile_box .div_cus_repair,
#mypage_contents .profile_box .div_login_cus_repair,
#mypage_contents>div>div.div_cus_qr_code,
#mypage_contents>div>div.div_mynumber_uketsuke_web,
#mypage_contents>div>div.div_interview_start,
#mypage_contents>div>div.div_resign_cus,
#mypage_contents>div>div.div_cus_repair,
#mypage_contents>div>div.div_login_cus_repair,
#mypage_contents .section_reserve_conf_area_2col .div_confirm_change,
#mypage_contents .section_reserve_conf_area_2col .div_confirm_cancel,
#mypage_contents .settle_btn,
#mypage_contents .interview_input_btn {
  margin: 15px 8px 10px;
  border-radius: 5px;
}
#mypage_contents .profile_box .div_cus_repair a,
#mypage_contents .profile_box .div_login_cus_repair a,
#mypage_contents>div>div.div_mynumber_uketsuke_web a,
#mypage_contents>div>div.div_interview_start a,
#mypage_contents>div>div.div_cus_qr_code a,
#mypage_contents>div>div.div_resign_cus a,
#mypage_contents>div>div.div_cus_repair a,
#mypage_contents>div>div.div_login_cus_repair a,
#mypage_contents .section_reserve_conf_area_2col .div_confirm_change a,
#mypage_contents .section_reserve_conf_area_2col .div_confirm_cancel a,
#mypage_contents .settle_btn a,
#mypage_contents .interview_input_btn a {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 16px;
  font-size: 14px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}
#add_lang_btn {
  background: var(--base_color1, #22A7F0);
  float: right;
  line-height: 40px;
  color: var(--base_text_color, #fff);
  height: 40px;
  padding: 0 14px;
  cursor: pointer;
}
#mypage_contents .profile_box .div_cus_repair a,
#mypage_contents .profile_box .div_login_cus_repair a,
#mypage_contents>div>div.div_mynumber_uketsuke_web a,
#mypage_contents>div>div.div_interview_start a,
#mypage_contents>div>div.div_cus_qr_code a,
#mypage_contents>div>div.div_resign_cus a,
#mypage_contents>div>div.div_cus_repair a,
#mypage_contents>div>div.div_login_cus_repair a,
#mypage_contents .settle_btn {
  background: var(--base_color1, #22A7F0);
}
#mypage_contents .section_reserve_conf_area_2col .div_confirm_change a {
  background: #0097A7;
}
#mypage_contents .section_reserve_conf_area_2col .div_confirm_cancel a {
  background: #fdcb6e;
}
#section_icon_area h2 {
  text-align: center;
  margin: 0;
  font-size: 18px;
  font-weight: normal;
  padding: 8px 0 24px 0;
}
#section_contents_top {
  position: relative;
}
.article_first {
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
span.can_msg {
  text-align: center;
  display: block;
  color: #666;
}
span.repair_msg {
  text-align: center;
  display: block;
  color: #666;
}
#reserve_certification {
  width: 95%;
  margin: 0 auto;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  border-left: solid 1px #ccc;
}
#reserve_certification .error:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(218,91,91,0);
  border-width: 20px;
  margin-left: -20px;
  border-top-color: #ea3434;
}
.article_freearea h2 {
  margin: 16px 0 8px 0;
  padding: 8px;
  font-size: 16px;
  border-bottom: solid 1px #ccc;
}
.article_freearea h3 {
  margin: 16px 0 8px 0;
  padding: 8px;
  font-size: 14px;
  border-bottom: solid 1px #ccc;
}
.article_freearea h4 {
  margin: 16px 0 0 0;
  padding: 8px;
  font-size: 12px;
}
.article_freearea p {
  margin: 0;
  padding: 8px;
  font-size: 12px;
}
input {
  font-family: "メイリオ";
}
#ope_name {
  text-align: center;
  padding: 15px;
  color: #666;
  background: #eee;
  margin: 10px;
}
form#main {
  padding: 0 8px;
  margin: 0 auto;
  width: 100%;
  border: none;
  box-sizing: border-box;
}
form#main .reserve_ttls {
  background: #fff;
  padding-top: 8px;
  margin-top: 8px;
}
form#main .reserve_ttls p {
  float: none;
  padding: 0;
  font-size: 16px;
  line-height: 1.0em;
  text-align: center;
}
form#main .reserve_ttls:after {
  height: 0px;
  visibility: hidden;
  content: ".";
}
.allinq_box {
  margin-bottom: 8px;
  background: #fff;
}
.allinq_box .cusav_memo {
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  margin: 8px 12px;
  color: #444;
}
.div_opt_description {
  padding: 0px 16px 8px 16px;
  font-size: 14px;
  border-bottom: solid 1px #ccc;
}
.div_inq_ttl {
  padding: 16px 16px 8px;
  font-size: 16px;
  border-bottom: solid 1px #ccc;
  clear: both;
  background: #fff;
}
.div_inq_ttl_ini_display_none {
  display: none;
  padding: 16px 16px 8px;
  font-size: 16px;
  border-bottom: solid 1px #ccc;
  clear: both;
  background: #fff;
}

#reserve_option .div_inq_ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.div_inq_ttl span {
  color: #ff0000;
}
.div_inq_ttl + .div_inq_area_practice {
  margin-top: 20px;
}
.div_inq_area_cus_birthday {
  background-color: #fff;
}
.div_inq_area_cus_birthday {
  padding: 16px;
  border-bottom: solid 1px #ccc;
}
.div_inq_area_cus_birthday input {
  padding: 8px;
  font-size: 14px;
  width: 12%;
  margin: 0 8px;
  height: 52px;
  box-sizing: border-box;
}
.div_inq_area_cus_birthday select {
  padding: 8px;
  font-size: 14px;
  width: 20%;
  margin: 0 8px;
  height: 52px;
}
.div_inq_area_radio_checkbox {
  padding: 20px 30px;
  box-sizing: border-box;
  border-bottom: solid 1px #ccc;
}
.div_inq_area_radio_checkbox label {
  display: inline-block;
  border: solid 1px #ccc;
  padding: 16px 40px;
  margin: 8px;
}
.div_inq_area_radio_checkbox input[type="radio"] {
  display: none;
}
.div_inq_area_radio_checkbox input[type="radio"] + label {
  cursor: pointer;
}
.div_inq_area_radio_checkbox input[type="checkbox"] {
  display: none;
}
.div_inq_area_radio_checkbox input[type="checkbox"] + label {
  cursor: pointer;
}
.div_inq_area_radio_checkbox input[type="radio"]:checked + .switch-on {
  background-color: var(--base_color1, #22A7F0);
  background-image: url(/sp/image/ico_switchon.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 20px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
}
.div_inq_area_radio_checkbox input[type="radio"]:checked + .switch-off {
  background-color: #ccc;
  background-image: none;
  color: #fff;
}
.div_inq_area_radio_checkbox input[type="checkbox"]:checked + .switch-on {
  background-color: var(--base_color1, #22A7F0);
  background-image: url(/sp/image/ico_switchon.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 20px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
}
.div_inq_area_radio_checkbox input[type="checkbox"] + .switch-on {
  background-image: url(/sp/image/ico_switchoff.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 20px;
  cursor: pointer;
}
.div_inq_area_radio_checkbox input[type="checkbox"]:checked + .switch-off {
  background-color: #ccc;
  background-image: none;
  color: #fff;
}
.div_agreement_textarea {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 100px;
  font-size: 15px;
}
.div_inq_area_textarea {
  width: 100%;
  height: 5em;
}
.div_inq_area_ini_display_none {
  display: none;
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  background-color: #fff;
  overflow: hidden;
}
.div_inq_area_ini_display_none input {
  margin: 0 auto 8px auto;
  padding: 8px;
  width: 95%;
  display: block;
  font-size: 16px;
  border: solid 1px #ccc;
}
.div_inq_area {
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  background-color: #fff;
  overflow: hidden;
}
.div_inq_area .span_example {
  display: block;
  font-size: 12px;
  color: #999;
  padding: 0 0 8px 8px;
  text-align: left;
  font-weight: normal;
}
.div_inq_area input {
  margin: 0 auto 8px auto;
  padding: 8px;
  width: 95%;
  display: block;
  font-size: 16px;
  border: solid 1px #ccc;
}
.div_inq_area select {
  margin: 0 0 8px 0;
  padding: 8px;
  width: 95%;
  font-size: 16px;
  border: solid 1px #ccc;
}
.div_inq_area .span_example {
  display: block;
  font-size: 12px;
  color: #999;
  padding: 0 0 8px 8px;
  text-align: left;
  font-weight: normal;
}
.div_password_toggle {
  text-align: left;
  margin: 5px 10px;
}
.div_password_toggle input[type="checkbox"] {
  border: 1px solid #ccc;
  appearance: checkbox;
  margin: 3px 3px 3px 4px;
  padding: initial;
  width: initial;
  display: inline-block;
  vertical-align: middle;
}
.div_password_toggle label {
  font-size: 13px;
  font-weight: normal;
}
#div_certification_add_title {
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
}
.memo_front {
  margin: 15px 15px 0 15px;
}
.memo_back {
  margin: 0;
  text-align: left;
  font-size: 14px;
}
#reserve_option .div_inq_area,
.div_inq_area_practice {
  font-weight: normal;
  box-sizing: border-box;
  background-color: #fff;
}
#reserve_option .div_inq_area input[type=checkbox],
#reserve_option .div_inq_area input[type=radio],
.div_inq_area_practice input[type=checkbox],
.div_inq_area_practice input[type=radio] {
  padding: 8px;
  font-size: 16px;
  width: 10%;
  margin: 0 5px 0 0;
  display: none;
}
#reserve_option .div_inq_area input[type="radio"],
.div_inq_area_practice input[type="radio"] {
  display: none;
}
#reserve_option .div_inq_area input[type="radio"] + label,
.div_inq_area_practice input[type="radio"] + label {
  cursor: pointer;
}
#reserve_option .div_inq_area input[type="checkbox"],
.div_inq_area_practice input[type="checkbox"] {
  display: none;
}
#reserve_option .div_inq_area input[type="checkbox"] + label,
.div_inq_area_practice input[type="checkbox"] + label {
  cursor: pointer;
}
#reserve_option .div_inq_area input[type="radio"]:checked + .switch-on,
.div_inq_area_practice input[type="radio"]:checked + .switch-on {
  background-color: var(--base_color1, #22A7F0);
  background-image: url(/sp/image/ico_switchon.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 5%;
  color: var(--base_text_color, #fff);
  cursor: pointer;
}
#reserve_option .div_inq_area input[type="radio"]:checked + .switch-off,
.div_inq_area_practice input[type="radio"]:checked + .switch-off {
  background-color: #ccc;
  background-image: none;
  color: #fff;
}
#reserve_option .div_inq_area input[type="checkbox"]:checked + .switch-on,
.div_inq_area_practice input[type="checkbox"]:checked + .switch-on {
  background-color: var(--base_color1, #22A7F0);
  background-image: url(/sp/image/ico_switchon.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 5%;
  color: var(--base_text_color, #fff);
  cursor: pointer;
}
#reserve_option .div_inq_area input[type="checkbox"] + .switch-on,
.div_inq_area_practice input[type="checkbox"] + .switch-on {
  background-image: url(/sp/image/ico_switchoff.png);
  background-position: 10px;
  background-repeat: no-repeat;
  background-size: 5%;
  cursor: pointer;
}
#reserve_option .div_inq_area input[type="checkbox"]:checked + .switch-off,
.div_inq_area_practice input[type="checkbox"]:checked + .switch-off {
  background-color: #ccc;
  background-image: none;
  color: #fff;
}
#reserve_option .div_inq_area label,
.div_inq_area_practice label {
  display: block;
  cursor: pointer;
  padding: 16px;
  background: #eee;
  color: #555;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  transition: .2s;
}
#reserve_option .div_inq_area .message,
.div_inq_area_practice .message {
  text-align: center;
}
@media screen and (max-width: 900px) {
  .div_inq_area_practice label {
    font-size: 15px;
  }
}
#reserve_option {
  margin: 0 auto;
  width: 100%;
}
#reserve_option .div_inq_area textarea {
  border: 1px solid #b9c9ce;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
  font-size: 16px;
  height: 112px;
  line-height: 1.5em;
  padding: 12px 0.8em;
  width: 80%;
}
.div_inq_area_schedule {
  display: none;
  box-sizing: border-box;
  padding: 0;
  border-top: solid 1px #ccc;
}
.div_inq_area_schedule:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}
.div_inq_area_schedule label {
  display: block;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  float: left;
  margin: 0 auto;
  padding: 16px;
  background: #eee;
  color: #888;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  transition: .2s;
}
.div_inq_area_schedule input {
  padding: 8px;
  font-size: 16px;
  width: 10%;
  margin: 0 5px 0 0;
  display: none;
}
.div_inq_area_schedule input[type="radio"]:checked + .switch-on {
  background-color: var(--base_color1, #22A7F0);
  color: var(--base_text_color, #fff);
}
.div_inq_area_schedule input[type="radio"]:checked + .switch-off {
  background-color: #ccc;
  color: #fff;
}
#input_button,
#btn_set_reserve,
.input_nextbutton {
  border: none;
  padding: 16px;
  width: 70%;
  margin: 25px auto;
  display: block;
  font-size: 18px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-appearance: none;
  box-shadow: 1px 1px 1px 1px #555;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  -moz-box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  -moz-text-shadow: 1px 1px 1px #888;
  -webkit-text-shadow: 1px 1px 1px #888;
  background: var(--base_color1, #22A7F0);
}
#input_button:hover,
#btn_set_reserve:hover,
.input_nextbutton:hover {
  background: var(--base_color2, #01b3d6);
}
#section_reserve_menu .input_nextbutton {
  margin-top: 0px;
}
.input_priorbutton {
  border: none;
  padding: 16px;
  width: 70%;
  margin: 25px auto;
  display: block;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-appearance: none;
  box-shadow: 1px 1px 1px 1px #555;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  -moz-box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  -moz-text-shadow: 1px 1px 1px #888;
  -webkit-text-shadow: 1px 1px 1px #888;
  background: #ddd;
  font-size: 16px;
  color: #444;
}
.input_priorbutton:hover {
  background: #ccc;
}
#reserve_ar_logined_customer {
  text-align: center;
  padding: 8px 0 24px 0;
  color: #222;
  font-size: 16px;
  background-color: #fff;
  font-weight: bold;
}
#section_reserve_2 {
  background: #fff;
}
#section_contents {
  width: 100%;
  margin: 8px 0;
}
#section_contents:empty {
  margin: 0;
}
#section_contents #div_inq_area_practice_pre_settlement > #div_cat_box_2 > #stl_type_credit + label {
  display: block;
  margin: 2rem 0;
}
#cms_wrapper {
  background: #fff;
  padding: 17px;
  padding-top: 1px;
}
#cms_wrapper img {
  max-width: 100%;
}
#section_logined {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  position: relative;
  padding: 0 16px;
  margin: 0 auto;
}
#section_logined_customer {
  margin-bottom: 24px;
}
.div_cat_box {
  margin: 0 auto 10px auto;
  padding: 0;
  width: 70%;
  display: table;
}
.div_cat_box img {
  width: 100%;
}
.div_cat_box_2_row {
  margin: 8px 2%;
  padding: 0;
  width: 46%;
  display: table;
}
.spn_img_box {
  display: block;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.div_cancel_wait {
  position: absolute;
  top: 0;
  border: 1px solid #000;
  background: #fff;
  width: 98%;
  padding: 16px;
  box-sizing: border-box;
  left: 1%;
  margin: 0;
}
#div_cancel_wait_dialg {
  width: 90% !important;
  max-width: 900px;
  padding: 0;
  position: fixed;
  top: 24px;
  background-color: #fff;
  z-index: 1000;
  overflow: auto;
}
#div_cancel_wait_dialg .left {
  width: 98%;
  float: none;
  padding: 8px;
}
#div_cancel_wait_dialg .left h3 {
  margin: 0;
  padding: 8px 0 8px 0;
  font-size: 18px;
  font-weight: normal;
  width: 80%;
}
#div_cancel_wait_dialg .left p {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.8em;
}
#div_cancel_wait_dialg .left p span {
  color: #999;
  font-size: 14px;
  display: block;
}
#div_cancel_wait_dialg .right {
  float: none;
  padding: 8px;
}
#can_date {
  display: block;
  background: #f0f0f0;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
  font-size: 16px;
  color: #000 !important;
  margin: 8px 0;
}
#cancel_wait_email,
#cancel_wait_email_confirm {
  padding: 8px;
  display: block;
  margin: 0 0 16px 0;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #ccc;
}
#btn_cancel_wait_apply {
  padding: 8px;
  display: block;
  margin: 0 0 16px 0;
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #4d932b;
  background: #78c056;
  color: #fff;
  font-size: 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#btn_cancel_wait_close {
  position: absolute;
  top: 0;
  right: 0;
  background: #ccc;
  border: none;
  color: #000;
  font-size: 24px;
  box-sizing: border-box;
}
.div_before_reserve_begin_date {
  position: absolute;
  border: 1px solid #000;
  background: #fff;
  width: 80%;
  padding: 16px;
  box-sizing: border-box;
  left: 10%;
}
.div_before_reserve_begin_date p {
  margin: 0;
  padding: 8px 0;
  font-size: 12px;
  line-height: 1.8em;
}
.div_before_reserve_begin_date p span {
  color: #999;
  font-size: 11px;
  display: block;
}
#btn_before_reserve_begin_date_close {
  position: absolute;
  top: 0;
  right: 0;
  background: #ccc;
  border: none;
  color: #000;
  font-size: 24px;
  padding: 0 8px;
  box-sizing: border-box;
}
.div_menu_detail {
  position: absolute;
  top: 0;
  border: 1px solid #000;
  background: #fff;
  width: 98%;
  padding: 16px;
  box-sizing: border-box;
  left: 1%;
  margin: 0;
}
.div_menu_detail .left {
  width: 100%;
  float: none;
}
.div_menu_detail .right {
  width: 100%;
  float: none;
}
.select_party {
  font-family: "メイリオ";
  font-size: 18px;
  display: block;
  margin: 0 auto 8px auto;
  width: 90%;
  box-sizing: border-box;
  border: solid 1px #ccc;
  padding: 8px;
}
.error {
  position: relative;
  background: #ea3434;
  color: #fff;
  text-align: center;
  padding: 8px 0;
}
.error:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(218,91,91,0);
  border-width: 20px;
  margin-left: -20px;
  border-bottom-color: #ea3434;
}
.error.soft_error {
  background: #fff;
  color: #777;
  border-bottom: #ccc solid 1px;
}
.error.soft_error:after {
  display: none;
}
#section_reserve_1 .error:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(218,91,91,0);
  border-width: 20px;
  margin-left: -20px;
  border-top-color: #ea3434;
}
.div_confirm .div_inq_ttl {
  text-align: center;
  background: #ececec;
}
.span_fin_message {
  text-align: center;
  display: block;
  background: #ececec;
  padding: 16px 0 24px 0;
}
#reserve_date {
  border-bottom: solid 1px #ccc;
  position: relative;
  margin: 0;
  width: 100%;
}
#reserve_date .div_inq_ttl {
  align-items: center;
  background: var(--base_color1, #22A7F0);
  border-top: solid 1px #ccc;
  border-bottom: none;
  display: flex;
  font-size: 18px;
  justify-content: center;
  padding: 16px;
}
#reserve_date .div_inq_ttl::after {
  content: "\f0d7";
  color: #fff;
  font-family: "font Awesome 5 Free";
  font-weight: bold;
}
#reserve_date .div_inq_ttl:hover {
  opacity: .8;
}
#reserve_date .div_inq_ttl > span {
  color: #fff !important;
  margin: 0 auto;
}
#reserve_date .error:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(218,91,91,0);
  border-width: 20px;
  margin-left: -20px;
  border-top-color: #ea3434;
}
.input_next_date {
  border-top: solid 1px #ccc;
  border-bottom: none;
  border-right: none;
  border-left: none;
  padding: 16px;
  font-family: "メイリオ";
  font-size: 16px;
  color: #999;
  cursor: pointer;
  width: 100%;
  background: #fff;
}
.input_next_date:hover {
  color: #333;
}
.input_piror_date {
  border-top: solid 1px #ccc;
  width: 100%;
  border-bottom: none;
  border-right: none;
  border-left: none;
  padding: 16px;
  font-family: "メイリオ";
  font-size: 16px;
  color: #999;
  background: #fff;
  cursor: pointer;
}
.input_piror_date:hover {
  color: #333;
}
.div_np_area {
  margin: 0 auto;
  margin-top: 20px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 8px 0 8px 0;
}
#reserve_ar_logined_customer {
  text-align: center;
  padding: 8px 0 0 0;
  color: #666;
}
.span_number {
  float: none;
  width: 50px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  font-size: 20px;
  padding: 10px 0 0 0;
  text-align: center;
  background: var(--base_color2, #01b3d6);
  color: var(--span_number_color, #fff);
}
.span_fin_message {
  text-align: center;
  display: block;
  background: #ececec;
  padding: 16px 0 24px 0;
}
.div_res_amount {
  margin-bottom: 16px;
  padding: 8px 0;
  text-align: center;
  font-family: "メイリオ";
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  color: #333;
}
.div_card_logos {
  padding: 8px 24px 8px;
}
.div_card_logos img {
  margin-right: 8px;
}
.div_settle_area {
  text-align: center;
  margin: 20px 0 0;
}
.div_settle_area span {
  display: block;
  padding: 8px;
}
.div_settle_area span.settle_title {
  font-size: 18px;
  color: #fff;
  background-color: #acacac;
}
.div_settle_area span.settle_amount {
  background-color: #dfdfdf;
}
.div_settle_area span.settle_status {
  background-color: #efefef;
}
.div_settle_area span.settle_status span.red {
  display: inline;
  color: #ff0000;
}
.div_settle_area span.settle_status span.blue {
  display: inline;
  color: #0000ff;
}
.div_settle_area span.settle_btn {
  padding: 0;
  font-size: 18px;
  background-color: #d4a528;
}
.div_settle_area span.settle_btn a {
  padding: 16px;
  color: #fff;
  display: block;
}
#reserve_ar_logined_customer {
  font-size: 18px;
  font-weight: bold;
}
.calendar-view {
  padding: 10px;
}
.calendar-view .calendar-header span {
  background-color: #777;
  color: #fff;
  cursor: pointer;
  padding: 3px 10px;
  display: inline-block;
}
.calendar-view .calendar-header .calendar-util {
  margin-top: 10px;
  float: left;
}
.calendar-view .calendar-header .calendar-util span:before {
  width: 16px;
  height: 16px;
  content: " ";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
  vertical-align: middle;
}
.calendar-view .calendar-header .calendar-util .calendar-near:before {
  background-image: url(../image/cal-clock.png);
}
.calendar-view .calendar-header .calendar-util .calendar-datepicker:before {
  background-image: url(../image/cal-calendar.png);
}
.calendar-view .calendar-header .calendar-date-ctl {
  margin-top: 10px;
  float: right;
}
.calendar-view .calendar-header:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}
.calendar-view .calendar-grid {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  margin-top: 10px;
}
.calendar-view .calendar-grid th,
.calendar-view .calendar-grid td {
  font-weight: normal;
  border: 1px solid #ddd;
  padding: 1px;
  padding-top: 3px;
  text-align: center;
}
.calendar-view .calendar-grid .calendar-title {
  position: sticky;
  top: 0;
}
.calendar-view .calendar-grid .calendar-title th {
  background-color: #eee;
}
.calendar-view .calendar-grid .calendar-title th.calendar-saturday {
  background-color: #c7d7f7;
}
.calendar-view .calendar-grid .calendar-title th.calendar-sunday {
  background-color: #fac8c8;
}
.calendar-view .calendar-grid .calendar-title th .calendar-week {
  display: block;
  font-size: 10px;
  color: #777;
}
.calendar-view .calendar-grid .calendar-day td.calendar-active {
  background-color: var(--base_color1, #22A7F0);
}
.calendar-view .calendar-grid .calendar-day td.calendar-none {
  background-image: url(../image/cal-none.png);
}
.calendar-view .calendar-grid .calendar-day td .calendar-button {
  width: 26px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  vertical-align: middle;
}
.calendar-view .calendar-grid .calendar-day td .calendar-ok {
  background-image: url(../image/cal-yoyaku.png);
}
.calendar-view .calendar-grid .calendar-day td .calendar-few {
  background-image: url(../image/cal-wazuka.png);
}
.calendar-view .calendar-grid .calendar-day td .empty_ok_little {
  background-image: url(../image/cal-wazuka.png);
}
.calendar-view .calendar-grid .calendar-day td .calendar-cw {
  background-image: url(../image/cal-envelope_cw.png);
}
.calendar-view .calendar-grid .calendar-day td .calendar-caption {
  color: #666;
  font-size: 9px;
  display: block;
}
.calendar-view .calendar-footer {
  background-color: #eee;
  border: 1px solid #ddd;
  text-align: center;
  padding: 5px;
  font-size: 10px;
  color: #333;
}
.calendar-view .calendar-footer span {
  margin: 0 3px;
}
.calendar-view .calendar-footer span:before {
  width: 26px;
  height: 20px;
  content: " ";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
  vertical-align: middle;
}
.calendar-view .calendar-footer .calendar-desc-ok:before {
  background-image: url(../image/cal-yoyaku.png);
}
.calendar-view .calendar-footer .calendar-desc-few:before {
  background-image: url(../image/cal-wazuka.png);
}
.calendar-view .calendar-footer .calendar-desc-cw:before {
  background-image: url(../image/cal-envelope_cw.png);
}
.subpage_ttl_mypage {
  padding: 16px 0 8px 8px;
  font-weight: normal;
  font-size: 16px;
}
.article_welcome {
  background: #fff;
  color: #333;
  font-size: 13px;
  text-align: center;
  padding: 16px 8px;
  font-weight: bold;
  line-height: 23px;
}
.article_welcome.left_align {
  text-align: left;
  padding: 16px 20%;
}
.loginbtn {
  background: var(--base_color1, #22A7F0);
  color: var(--base_text_color, #fff);
  padding: 0 14px;
  line-height: 40px;
  font-size: 12px;
  font-weight: 600;
  float: right;
  cursor: pointer;
  overflow: hidden;
  height: 40px;
}
.loginbtn:hover {
  background: var(--base_color2, #01b3d6);
  color: var(--base_text_color, #fff);
}
.logoutbtn {
  background: #c9c9c9;
  color: #fff;
  padding: 0 14px;
  line-height: 40px;
  font-size: 12px;
  font-weight: 600;
  float: right;
  cursor: pointer;
  overflow: hidden;
  height: 40px;
}
.div_top_message {
  background: var(--base_color1, #22A7F0);
  color: var(--base_text_color, #fff);
  margin-top: 8px;
  padding: 16px;
  margin-bottom: 10px;
}
#section_contents_top #header_ttl_contents_top {
  background: #333;
  color: #fff;
}
.article_first {
  background: #f5f5f5;
  color: #222;
}
.article_reserve_first {
  background: #f5f5f5;
}
.article_reserve_second {
  background: #f5f5f5;
}
.article_reserve_third {
  background: #f5f5f5;
}
.span_exp_txt {
  color: #222;
}
.a_back_index {
  color: #fff;
  background-color: #ccc;
}
#ul_hum_menu {
  background: var(--base_color2, #01b3d6);
}
#ul_hum_menu li a {
  display: block;
  padding: 8px 16px;
  color: #fff;
}
.span_login_top_link {
  display: block;
  text-align: center;
  padding: 4px 0;
  font-size: 14px;
  color: #333;
  background: #fff;
}
.span_login_top_link a {
  color: var(--base_color1, #22A7F0);
  text-decoration: underline;
}
.span_login_top_link a:hover {
  color: var(--base_color2, #01b3d6);
  text-decoration: none;
}
.span_login_top_button {
  display: block;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #333;
  background: #fff;
}
.span_login_top_button input {
  font-family: "メイリオ";
  display: inline-block;
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 20px 10px;
  margin: 8px;
  font-size: 16px;
  white-space: normal; /* テキストの折り返しを許可 */
  word-wrap: break-word; /* または overflow-wrap: break-word; 単語の途中でも改行を許可 */
  width: 40%;
  background:var(--base_color1, #22A7F0); 
  color: var(--base_text_color, #fff); 
  cursor: pointer;          /* マウスカーソルをポインターに */
  transition: background-color 0.2s ease; /* 色の変化を滑らかにする（お好みで） */
}
.span_login_top_button input:hover {
  background:var(--base_color1, #22A7F0);
  color: var(--base_text_color, #fff); 
}
.span_forget_pass {
  display: block;
  text-align: center;
  padding: 4px 0;
  font-size: 14px;
  color: #333;
  background: #fff;
}
.span_forget_pass a {
  color: var(--base_color1, #22A7F0);
  text-decoration: underline;
}
.span_forget_pass a:hover {
  color: var(--base_color2, #01b3d6);
  text-decoration: none;
}
#section_icon i {
  color: var(--base_color1, #22A7F0);
}
.icon_first:before {
  background: var(--base_color2, #01b3d6);
}
.icon_first:after {
  background: var(--base_color2, #01b3d6);
}
.icon_reserve {
  background: var(--base_color1, #22A7F0);
}
.icon_reserve:after {
  background: var(--base_color2, #01b3d6);
}
.icon_home {
  border-color: transparent transparent var(--base_color1, #22A7F0) transparent;
}
.icon_home:before {
  background-color: var(--base_color2, #01b3d6);
}
.icon_home:after {
  border-left: 12px solid var(--base_color2, #01b3d6);
  border-right: 12px solid var(--base_color2, #01b3d6);
}
.icon_hum {
  background: #444;
}
.icon_user {
  background: var(--base_color1, #22A7F0);
}
.icon_user:after {
  background: var(--base_color1, #22A7F0);
}
.icon_user:before {
  border-color: transparent transparent var(--base_color2, #01b3d6) transparent;
}
.icon_rightArrow {
  border-color: transparent transparent transparent #fff;
}
.icon_rightArrow:after {
  background-color: #fff;
}
.icon_phone {
  background-color: var(--base_color1, #22A7F0);
}
.icon_phone:before {
  background: #fff;
}
#header_index .main_img {
  width: 100%;
  display: block;
}
a.cms {
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  padding: 24px;
  font-size: 20px;
  display: block;
  font-weight: normal;
  text-align: center;
  background: var(--base_color1, #22A7F0);
  color: #fff;
}
#section_icon {
  display: none;
}

#btn_sms_send,
#btn_tel_send{
  background:var(--base_color1, #22A7F0);
  color: var(--base_text_color, #fff); 
}

@media screen and (min-width: 900px) {
  .section_mypage,
  #section_bodybox {
    width: 900px;
    margin: 0 auto;
    position: relative;
    background-color: #f0f0f0;
  }
  #ul_main_menu li:not(.top_menu) {
    margin: 25px 150px;
  }
  #ul_main_menu li:not(.top_menu) a {
    font-size: 24px;
    padding: 24px;
  }
  #ul_main_menu li[parent_flg="0"] {
    margin: 25px 190px;
  }
  #ul_main_menu li[parent_flg="0"] a {
    font-size: 20px;
  }
  .span_number {
    float: left;
    margin: 16px;
    padding: 10px 0 0 0;
  }
  form#main .reserve_ttls p {
    text-align: left;
    padding: 16px 0 0 8px;
    font-size: 18px;
  }
  a.cms {
    margin: 10px 190px;
  }
}
@media screen and (min-width: 900px) {
  #section_person_area {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  #section_person_area .profile_box {
    align-items: center;
    display: flex;
  }
}
@media screen and (min-width: 900px) {
  #section_reserve_conf_area .section_reserve_conf_area_2col {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
  }
  #section_reserve_conf_area .section_reserve_conf_area_2col .section_reserve_conf_area_2col_right {
    align-items: flex-end;
    display: flex;
  }
}
@media screen and (min-width: 450px) {
  .calendar-view .calendar-grid {
    font-size: 12px;
  }
  .calendar-view .calendar-grid td,
  .calendar-view .calendar-grid th {
    padding: 5px;
  }
  .calendar-view .calendar-grid .calendar-title th .calendar-week {
    font-size: 12px;
  }
  .calendar-view .calendar-grid .calendar-day td .calendar-button {
    width: 42px;
    height: 23px;
  }
  .calendar-view .calendar-grid .calendar-day td .calendar-caption {
    font-size: 12px;
  }
  .calendar-view .calendar-footer {
    font-size: 12px;
  }
  .calendar-view .calendar-footer span:before {
    width: 42px;
    height: 23px;
  }
}
@media screen and (min-width: 600px) {
  .calendar-view .calendar-grid {
    font-size: 14px;
  }
  .calendar-view .calendar-grid td,
  .calendar-view .calendar-grid th {
    padding: 5px;
  }
  .calendar-view .calendar-grid .calendar-title th .calendar-week {
    font-size: 12px;
    display: inline;
    margin-left: 2px;
  }
  .calendar-view .calendar-grid .calendar-day td .calendar-button {
    width: 42px;
    height: 23px;
  }
  .calendar-view .calendar-grid .calendar-day td .calendar-caption {
    font-size: 12px;
  }
  .calendar-view .calendar-footer {
    font-size: 12px;
  }
  .calendar-view .calendar-footer span:before {
    width: 42px;
    height: 23px;
  }
}
.div_detail {
  padding: 5px 0px 0px 0px;
  float: right;
}

#reserve_option .div_detail {
  margin-left: 6px;
  min-width: 10%;
  max-width: 50%;
}

.div_detail:before {
  margin: 0 4px 0 0;
  content: " ";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url(../image/ico_search.png);
  background-size: contain;
  vertical-align: middle;
}
#div_menu_detail_dialg {
  width: 90% !important;
  max-width: 900px;
  padding: 0;
  position: fixed;
  top: 24px;
  background-color: #fff;
  z-index: 1000;
  overflow: auto;
}
#div_menu_detail_dialg h3.ns {
  background-color: var(--base_color2, #01b3d6);
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 60px;
}
#div_menu_detail_dialg .menu_detail_wrap {
  padding: 3%;
}
#div_menu_detail_dialg .menu_detail_wrap p {
  margin: 0;
  padding: 0;
}
#div_menu_detail_dialg .menu_detail_wrap .photo-area {
  margin-bottom: 20px;
  text-align: center;
}
.div_cat_box label .photo-area {
  padding: 2vh 15vw;
}

.div_cat_box label .photo-area img{
  margin-bottom: 15px;
}

#div_menu_detail_dialg .menu_detail_wrap .data2 {
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
}
#div_menu_detail_dialg .menu_detail_wrap .price {
  margin: 0 40px 20px 0;
  font-size: 12px;
  text-align: right;
  letter-spacing: 0.05em;
}
#div_menu_detail_dialg .menu_detail_wrap .price span {
  display: inline-block;
  line-height: 20px;
}
#div_menu_detail_dialg .menu_detail_wrap .price strong {
  margin-right: 5px;
  font-size: 18px;
  font-weight: bold;
}
#div_menu_detail_dialg .menu_detail_wrap .caption {
  background-color: #efefef;
  padding: 20px;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
#div_menu_detail_dialg .menu_detail_wrap .data3 {
  margin-bottom: 30px;
  color: #979292;
  text-align: center;
}
#div_menu_detail_dialg .menu_detail_wrap .btn-area1 .btn-type1 {
  display: none;
}
#div_menu_detail_dialg .menu_detail_wrap .btn-area1 .btn-type1:hover {
  background-color: #1c9f85;
}
#div_menu_detail_dialg .menu_detail_wrap .btn-area2 {
  margin-top: 20px;
}
#div_menu_detail_dialg .menu_detail_wrap .btn-area2 #btn_menu_detail_close {
  display: block;
  cursor: pointer;
  width: 100%;
  max-width: 350px;
  background-color: #ddd;
  border: none;
  color: #555555;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 50px;
  margin: 0 auto;
  -webkit-appearance: none;
  border-radius: 0;
}
#div_menu_detail_dialg .menu_detail_wrap .btn-area2 #btn_menu_detail_close:hover {
  background-color: #999;
  color: #fff;
}
#div_menu_detail_dialg img {
  max-width: 100%;
}
#div_menu_detail_dialg img[src=""] {
  display: none;
}
@media screen and (min-width:900px){
  .div_cat_box label .photo-area {
    padding: 2vh 7vw;
  }
  
  .div_cat_box label .photo-area img{
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 1080px) {
  #div_menu_detail {
    width: 100% !important;
  }
  #div_cookie_agreement_dialog {
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 5%;
  }
  #div_cookie_agreement_body {
    width: 85%;
  }
  #div_cookie_agreement_button_wrapper {
    width: 85%;
  }
}
.table_esth_bill {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #c7ccd7;
}

.table_esth_bill td {
  padding: 3px;
  border: 1px solid #c7ccd7;
}

.table_esth_bill .url_esth_confirm:hover,
.table_esth_bill .url_bill_confirm:hover {
  text-decoration: underline;
}
#tr_id {
  background-color: #EEEEEE;
}

/*マイページの外部問診部分*/
#mypage_contents .interview_input_btn {
  background: #2199e8;
}

#mypage_contents .interview_input_btn.interview_completed {
  background: #acacac;
  color: #fff;
  padding: 16px;
  text-align: center;
}

#mypage_contents .interview_input_btn a {
  color: #fff;
  background: #2199e8;
}

/*医技研問診版の案内*/
#alert_inbox_txt .interview-btn {
  /* UI Properties */
  background: #005BAB 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 6px #0077FF4D;
  border-radius: 30px;
  padding: 12px 35px;
  color:#FFFFFF;
  font-weight: 700;
  }

  #alert_inbox_txt .interview-description {
  /* UI Properties */
  text-align: left;
  font: normal normal normal 16px/24px Noto Sans JP;
  letter-spacing: 0.4px;
  color: #222222;
  margin-bottom: 3.5rem;
  margin-top: 3.5rem;
  font-size: 0.95rem;
  }

  #alert_inbox_txt .interview-alert {
  /* UI Properties */
  background: #FFE9EB 0% 0% no-repeat padding-box;
  padding: 3px 25px
  }

  #alert_inbox_txt .interview-alert .alert-title {
  /* UI Properties */
  text-align: center;
  font: normal normal bold 16px/24px Noto Sans JP;
  letter-spacing: 0.4px;
  color: #E32828;
  font-weight: 800;
  font-size: 0.85rem;
  }

  #alert_inbox_txt .interview-alert .alert-sentense {
  /* UI Properties */
  text-align: left;
  font: normal normal normal 16px/24px Noto Sans JP;
  letter-spacing: 0.4px;
  color: #E32828;
  font-size: 0.85rem;
  }

#reserve_ar_logined_customer .main_ttl{
  font-size: 15px;
  font-weight:normal;
  padding: 5px 10px;
}

#div_append_family .append_family_mail{
  background-color: #F5F5F4;
  padding: 10px 15px 15px 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  display: none;
}

#div_append_family label{
  display: block;
}

#div_append_family .append_family_mail .append_family_mail_ttl{
  padding: 0;
  margin: 10px 0 15px 0;
  font-size: 14px;
  font-weight: bold;
  color: #555;
}

#div_append_family .append_family_mail .append_family_mail_radio{
  display: block;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  margin-top: 10px;
}

#div_append_family .append_family_mail .append_family_mail_inputbox{
  display: none;
}

#div_append_family .append_family_mail .append_family_mail_inputbox input{
  padding: 5px;
  min-width: 280px;
}

/* Google Map 連携に必要な予約画面トップの住所表示CSS */
/* ログインボタンのすぐ下に追従させている */
#header-address {
  position: absolute;
  right:4px;
  bottom:0px;
  font-size:7px;
}

/* ------------------------------
fincode決済
------------------------------ */
.card_item {
  --padding-vertical: 20px;
  --gap: 10px;

  align-items: center;
  border-bottom: solid 1px #ccc;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--gap);
  line-height: 1.7;
  padding-top: var(--padding-vertical);
  padding-bottom: var(--padding-vertical);
}

@media screen and (max-width: 450px) {
  .card_item {
      --padding-vertical: 15px;
      --gap: 5px;

      grid-template-columns: auto;
  }
}

.card_item_detail_no {
  font-size: 15px;
  margin-block: 0;
}

.card_item_detail_expire {
  font-size: 13px;
  margin-block: 0;
  opacity: .5;
}

.card_item_detail_default {
  color: var(--base_color1, #22A7F0);
  font-size: 13px;
  font-weight: bold;
  margin-block: 0;
  margin-bottom: 5px;
}

.card_item_buttons {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.card_item_button {
  background-color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: block;
  padding: 5px 15px;
}

.card_item_button:hover {
  opacity: .8;
}

.card_item_button_default {
  border: solid 1px var(--base_color1, #22A7F0);
  color: var(--base_color1, #22A7F0);
}

.card_item_button_delete {
  border: solid 1px #333;
  color: #333;
}

.card_list_empty {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.card_list_apply_button {
  margin-top: 20px;
}

.card_apply_button {
  -webkit-appearance: none;
  appearance: none;
  border: solid 1px var(--base_color1, #22A7F0);
  background: var(--base_color1, #22A7F0);
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  box-shadow: 1px 1px 1px 1px #555;
  color: var(--base_text_color, #fff);
  cursor: pointer;
  display: block;
  font-size: 18px;
  text-align: center;
  text-shadow: 1px 1px 1px #888;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  width: 70%;
}

.card_apply_button + .card_apply_button {
  margin-top: 15px;
}

.card_apply_button_back {
  background: #ddd;
  border: solid 1px #ddd;
  color: #555;
  font-size: 16px;
}

.fincode_content {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 以下、fincode カード登録フォームのスタイル上書き */
.fincode_form {
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.fincode_form iframe {
  max-width: 100%;
}

/* ------------------------------
物販
------------------------------ */
.sale_list {
  --columns: 2;

  background-color: #fff;
  color: #333;
  display: grid;
  gap: 20px 15px;
  grid-template-columns: repeat(var(--columns), 1fr);
  padding: 20px;
}

@media screen and (min-width: 767px) {
  .sale_list-list {
    --columns: 3;
  }
}

@media screen and (min-width: 1024px) {
  .sale_list-list {
    --columns: 4;
  }
}

.sale_list-detail,
.sale_list-cart {
  --columns: 1;
}

.sale_item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale_item-detail {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sale_item-cart {
  display: grid;
  gap: 8px;
}

@media screen and (min-width: 767px) {
  .sale_item-cart {
    align-items: start;
    gap: 16px;
    grid-template-columns: 1fr min(30%, 140px);
  }
}

.sale_item-cart + .sale_item-cart {
  border-top: solid 1px #ccc;
  padding-top: 16px;
}

.sale_item_inner {
  flex: 1;
  position: relative;
}

.sale_item_inner-list,
.sale_item_inner-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sale_item_inner-cart {
  align-items: flex-start;
  display: flex;
  gap: 16px;
}

.sale_item_link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20; /* .sale_item_imageのz-indexより大きい値にする */
}

.sale_item_thumbnail {
  background-color: #f0f0f0;
  overflow: hidden;
  position: relative;
}

.sale_item_thumbnail-list {
  padding-top: 100%;
}

.sale_item_thumbnail-cart {
  --thumbnail-size: 120px;

  width: 30%;
  max-width: var(--thumbnail-size);
  padding-top: min(30%, var(--thumbnail-size));
}

.sale_item_image_active {
  --image-size: 600px;

  background-color: #f0f0f0;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  padding-top: min(100%, var(--image-size));
  position: relative;
  max-width: var(--image-size);
  width: 100%;
}

.sale_item_image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: auto;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 10;
}

.sale_item_image_list {
  --columns: 5;

  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--columns), 1fr);
  margin-top: 8px;
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
  width: 100%;
}

.sale_item_image_item {
  background-color: #f0f0f0;
  cursor: pointer;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}

.sale_item_info-cart {
  flex: 1;
}

.sale_item_title {
  margin-block: 0;
}

.sale_item_price {
  margin-block: 0;
  font-size: 18px;
  font-weight: bold;
}

.sale_item_description {
  margin-top: 20px;
}

.sale_item_description-short {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #555;
  margin-top: 8px;
}

.sale_item_button {
  border: none;
  padding: 16px;
  width: 100%;
  display: block;
  font-size: 16px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 1px 1px 1px 1px #555;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  -moz-box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  -moz-text-shadow: 1px 1px 1px #888;
  -webkit-text-shadow: 1px 1px 1px #888;
  background: var(--base_color1, #22A7F0);
}

.sale_item_button:disabled {
  background: #ddd;
  color: #444;
  box-shadow: 1px 1px 1px 1px #555;
  -webkit-box-shadow: 1px 1px 1px 1px #555;
  -moz-box-shadow: 1px 1px 1px 1px #555;
  text-shadow: 1px 1px 1px #888;
  -moz-text-shadow: 1px 1px 1px #888;
  -webkit-text-shadow: 1px 1px 1px #888;
}

.sale_item_control {
  display: flex;
  flex-direction: column;
}

.sale_item_control-detail {
  display: block;
}

.sale_item_control-cart {
  flex-direction: row-reverse;
  justify-content: space-between;
}

@media screen and (min-width: 767px) {
  .sale_item_control-cart {
    align-items: flex-end;
    flex-direction: column;
  }
}

.sale_item_amount {
  align-items: center;
  display: flex;
}

.sale_item_amount_label {
  display: block;
  margin-right: 8px;
}

.sale_item_amount_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: solid 1px #ccc;
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 20px;
}

.sale_item_delete {
  margin-top: 8px;
}


/* ------------------------------
特定商取引法に基づく表記
------------------------------ */
.commercial_transaction_title {
  font-weight: bold;
}

.commercial_transaction_list {
  border-top: solid 1px #dedede;
}

.commercial_transaction_list dd {
  margin-inline: 0;
}

.commercial_transaction_item {
  align-items: stretch;
  border-bottom: solid 1px #dedede;
  display: grid;
  grid-template-columns: max(240px, 25%) 1fr;
}

@media screen and (max-width: 767px) {
  .commercial_transaction_item {
    display: block;
  }
}

.commercial_transaction_label {
  background-color: #f5f5f5;
  margin-top: 1px;
  margin-bottom: 2px;
  padding: 16px 16px 24px;
}

@media screen and (max-width: 767px) {
  .commercial_transaction_label {
    padding: 8px 16px;
  }
}

.commercial_transaction_body {
  padding: 16px 16px 24px;
}

@media screen and (max-width: 767px) {
  .commercial_transaction_body {
    padding: 8px 16px 16px;
  }
}


/* ------------------------------
fincode 決済画面
------------------------------ */
.settlement_confirm {
  margin-top: 20px;
  margin-bottom: 30px;
  padding-right: 15px;
  padding-left: 15px;
}

.settlement_confirm_block {
  margin-top: 20px;
}

.settlement_confirm_block_title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.settlement_confirm_block_content p {
  margin-block: unset;
}

.settlement_confirm_reserve_detail {
  align-items: start;
  display: grid;
  column-gap: 15px;
  grid-template-columns: min(25%, 180px) 1fr;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .settlement_confirm_reserve_detail {
    display: block;
  }
}

.settlement_confirm_reserve_detail + .settlement_confirm_reserve_detail {
  padding-top: 15px;
}

.settlement_confirm_reserve_detail_label {
  color: #777777;
}

.settlement_confirm_reserve_detail_content {
  flex: 1;
  font-size: 16px;
}

.settlement_confirm_cards {
  margin-top: 20px;
}

.settlement_confirm_cards_item {
  align-items: center;
  border: solid 1px #ececec;
  border-radius: 5px;
  display: flex;
  outline: solid 2px transparent;
  outline-offset: -1px;
  padding: 10px 15px;
  position: relative;
}

.settlement_confirm_cards_item + .settlement_confirm_cards_item {
  margin-top: 8px;
}

.settlement_confirm_cards_item:has(.settlement_confirm_cards_radio:checked) {
  outline: solid 2px var(--base_color1, #22A7F0);
}

.settlement_confirm_cards_item:has(.settlement_confirm_cards_radio:checked)::before {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--base_color1, #22A7F0);
  display: block;
  font-weight: bold;
  transform: translateY(-50%);
}

.settlement_confirm_cards_label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  font-weight: normal !important;
  margin: 0 !important;
}

.settlement_confirm_cards_radio {
  display: none;
}

.settlement_confirm_cards_info_no {
  font-size: 16px;
}

.settlement_confirm_cards_info_expiry {
  color: #777777;
}

.settlement_confirm_cards_empty {
  font-size: 14px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.settlement_confirm_cards_login {
  cursor: pointer;
}

.settlement_confirm_cards_add {
  margin-top: 10px;
  text-align: center;
}

.settlement_confirm_cards_add_button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  height: 33px;
  line-height: 33px;
  max-width: 194px;
  width: 100%;
}

.settlement_confirm_cards_submit {
  margin-top: 30px;
  text-align: center;
}

.settlement_confirm_cards_submit_description {
  font-size: 14px;
  margin-bottom: 15px;
}

.settlement_confirm_cards_submit_button {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: solid 1px #db395f;
  border-radius: 5px;
  color: #db395f;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  line-height: 33px;
  text-align: center;
  max-width: 194px;
  width: 100%;
}

.settlement_confirm_ec_item {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
}

.settlement_confirm_ec_item + .settlement_confirm_ec_item {
  margin-top: 5px;
}

.settlement_confirm_ec_item_amount,
.settlement_confirm_ec_item_price {
  text-align: right;
}

.settlement_confirm_ec_detail_total_price {
  text-align: right;
}


/* ------------------------------
マイページ 購入履歴
------------------------------ */
.section_purchase_area {
  margin-bottom: 30px;
}

.purchase_history_content {
  display: grid;
  grid-template-columns: 1fr;
}

.purchase_history_item + .purchase_history_item {
  border-top: solid 1px #ececec;
}

.purchase_history_item_summary {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 110px;
}

.purchase_history_item_heading {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0 12px 25px;
}

.purchase_history_item_heading::before {
  --border-width: 2px;
  --box-size: 5px;

  position: absolute;
  top: 50%;
  left: 5px;
  border-right: solid var(--border-width) var(--base_color2, #68d8b3);
  border-bottom: solid var(--border-width) var(--base_color2, #68d8b3);
  content: "";
  display: block;
  height: var(--box-size);
  rotate: 45deg;
  transition: rotate .5s;
  translate: 0 -50%;
  width: var(--box-size);
}

.purchase_history_item_heading.-open::before {
  rotate: -135deg;
}

.purchase_history_item_date {
  color: #777777;
  font-size: 12px;
  margin-bottom: 5px;
}

.purchase_history_item_total_price {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.purchase_history_item_total_price_label {
  background-color: var(--base_color2, #68d8b3);
  border-radius: 100vmax;
  display: inline-block;
  font-size: 12px;
  margin-right: 10px;
  padding: 1px 8px 0;
}

.purchase_history_item_status {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  row-gap: 8px;
  padding-block: 12px;
  text-align: right;
}

.purchase_history_item_settlement {
  background-color: var(--base_color1, #22A7F0);
  border: 0;
  border-radius: 3px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
  font-size: 14px;
  padding: 5px 10px;
}

.purchase_history_item_cancel {
  color: #db395f;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
}

.purchase_history_item_complete {
  color: #777777;
  font-size: 12px;
}

.purchase_history_item_detail_list {
  background: #f5f5f5;
  border-radius: 5px;
  color: #777777;
  display: none;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 10px 15px;
}

.purchase_history_item_detail_label {
  font-weight: 700;
}

.purchase_history_footer {
  margin-top: 15px;
}

.mypage_title {
  border-bottom: solid 1px #ccc;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.mypage_button {
  background: var(--base_color1, #22A7F0);
  border: none;
  border-radius: 5px;
  color: var(--base_text_color, #fff);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  padding: 16px;
  text-align: center;
  width: 100%;
}

.mypage_footer_buttons {
  margin-inline: 15px;
}