@charset "utf-8";

/* -----------------------------------------------------------------
 cmn_parts.css 上書き
----------------------------------------------------------------- */
.cmn_other_links {
  margin-top: var(--margin_size_S);
}

/* -----------------------------------------------------------------
 title
----------------------------------------------------------------- */
.title_lv01{
  margin-top: 1em;
  font-weight: 700;
  font-size: 1.69rem;
}
.title_lv02 {
  margin-top: var(--margin_size_XS);
  font-weight: 700;
  color: var(--color_main);
}


/* -----------------------------------------------------------------
 intro
----------------------------------------------------------------- */
.intro {
  margin-top: var(--margin_size_S);
}
.intro p {
  margin-top: 1em;
  line-height: 2;
}


/* -----------------------------------------------------------------
 cmn_body
----------------------------------------------------------------- */
.cmn_body {
  margin-top: var(--margin_size_XXS);
}
.cmn_body p {
  margin-top: 1em;
  line-height: 2;
}


/* -----------------------------------------------------------------
 box_progress
----------------------------------------------------------------- */
.box_progress {
  display: flex;
  justify-content: center;
  margin-top: var(--margin_size_L);
  padding-bottom: 3rem;
  border-bottom: var(--color_line_light_gray) 1px solid;
}
.box_progress .item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: .9rem;
  width: 8.4rem
}
.box_progress .item::before,
.box_progress .item::after{
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--color_bg_pale_bl);
}
.box_progress .item::after {
  left: 50%;
}
.box_progress .item:first-of-type::before {
  background: transparent;
}
.box_progress .item:last-of-type::after {
  background: transparent;
}
.box_progress .disc {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--color_bg_pale_bl);
  z-index: 2;
}
.box_progress .text {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: .2rem;
}
.box_progress .step {
  font-weight: 700;
  font-size: .8rem;
  color: var(--color_main);
}
.box_progress .jp {
  line-height: 1;
  font-weight: 700;
  font-size: 1.2rem;
}
.box_progress .step,
.box_progress .jp {
  color: #b4b4b4;
}
/*---------- is_current ----------*/
.box_progress .is_current .disc {
  background: var(--color_main);
}
.box_progress .is_current .step {
  color: var(--color_main);
}
.box_progress .is_current .jp {
  color: var(--color_txt_base);
}
/* -----------------------------------------------------------------
 box_form 
----------------------------------------------------------------- */
.box_form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-top: 3rem;
}
.box_form .item {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
@media print, screen and (min-width: 768px) {
  .box_form .item {
    flex-direction: row;
    gap: 0;
  }
}
/* -----------------------------------------------------------------
 box_form .item .ttl
----------------------------------------------------------------- */
.box_form .item .ttl{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.box_form .item .ttl label {
  line-height: 1;
}
.box_form .item .ttl .reqd {
  display: flex;
  align-items: center;  
  padding: .3em;
  background: var(--color_main);
  line-height: 1;
  font-size: .77rem;
  color: #fff;
}
@media print, screen and (min-width: 768px) {
  .box_form .item .ttl{
    flex: 0 0 17rem;
    width: 17rem;
  }
}
/* -----------------------------------------------------------------
 box_form .item .cont
----------------------------------------------------------------- */
.box_form .item .cont{
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.box_form .item .cont .input_set{
  display: flex;
  gap: .7rem;
}
.box_form .item .cont .input_set input {
  flex: 1;
  min-width: 0;
}
.box_form .item .cont input[type="text"],
.box_form .item .cont input[type="email"],
.box_form .item .cont input[type="tel"],
.box_form .item .cont select,
.box_form .item .cont textarea{
  padding: .6rem .7rem;
  flex: 1;
  min-width: 0;
  border: #9c9c9c 1px solid;
  outline: none;
  background-color: #fff;
}
.box_form .item .cont input[type="text"]:selected,
.box_form .item .cont input[type="email"]:selected,
.box_form .item .cont input[type="tel"]:selected,
.box_form .item .cont select:selected,
.box_form .item .cont textarea:selected{
  background-color: #fff;
}
@media print, screen and (min-width: 768px) {
  .box_form .item .cont{
    flex: 1;
    min-width: 0;
  }
}

/* -----------------------------------------------------------------
 select
----------------------------------------------------------------- */
.select_wrap {
  position: relative;
}
.select_wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
}
.select_wrap select:focus {
/*  outline: none;*/
}
.select_wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 1.28rem;
  pointer-events: none;
  border-left: #9c9c9c 1px solid;
  background: url("../img/arrow03_dn_gray.svg") no-repeat center center;
  background-size: .88rem;
}

/* -----------------------------------------------------------------
 checkbox
----------------------------------------------------------------- */
.box_check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: relative;
}
.box_check input[type="checkbox"] {
  outline: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.box_check label {
  position: relative;
  padding-left: 2.4rem;
  cursor: pointer;
}
.box_check label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  border: #454545 1px solid;
  background: #fff;
}

/* チェックマーク */
.box_check label::after {
  content: "";
  position: absolute;
  left: .65rem;
  top: .2rem;
  width: .5rem;
  height: .8rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
}

/* checked時 */
.box_check input[type="checkbox"]:checked +label::before {
  border: var(--color_main) 1px solid;
  background: var(--color_main);
}
.box_check input[type="checkbox"]:checked + label::after {
  transform: rotate(45deg) scale(1);
}


/* -----------------------------------------------------------------
 エラー表示
----------------------------------------------------------------- */
.box_err_msg {
  margin-top: var(--margin_size_XXS);
  padding: .8rem 1rem;
  background: #fff4f4;
}
.box_err_msg .err_msg {
  font-size: .9rem;
  color: #c00;
}
.box_form .item .cont .err_txt {
  display: block;
  width: 100%;
  font-size: .9rem;
  color: #c00;
}
.box_form .item .cont input.err[type="text"],
.box_form .item .cont input.err[type="email"],
.box_form .item .cont input.err[type="tel"],
.box_form .item .cont select.err,
.box_form .item .cont textarea.err{
  border: #d36d6d 1px solid;
  background: #fff4f4;
}
.box_form .item .cont input.err[type="checkbox"]+label::before {
  border: #d36d6d 1px solid;
  background: #fff4f4;
}
.box_form .item .cont input.err[type="checkbox"]+label::after{
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}


/* -----------------------------------------------------------------
 box_form_footer
----------------------------------------------------------------- */
.box_form_footer {
  border-top: var(--color_line_light_gray) 1px solid;
}
.box_form_footer .cmn_btn_link01 {
  margin-top: var(--margin_size_S);
}
.box_form_footer .go_back .cmn_btn_link01{
  margin-top: 1rem;
}

/* -----------------------------------------------------------------
 完了画面
----------------------------------------------------------------- */
.box_thanks_msg {
  display: table;
  margin: var(--margin_size_S) auto 0;
}