@charset "UTF-8";
/*
  module.css
  流用可能なモジュール
*/
/*------------------------------------------------
  headline
------------------------------------------------*/
.hl1 {
  padding-top: 1.2em;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.hl1::before {
  display: block; content: '';
  width: .8em; height: .8em;
  margin: auto;
  border: solid #ccc;
  border-width: 0 0 1px 1px;
  transform: rotate(-45deg);
  position: absolute;
  top: 0; left: 0; right: 0;
}
.hl1 .logo {
  display: inline-block;
  box-sizing: content-box;
  width: 7.9em;
  vertical-align: middle;
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl1 {
    margin: 80px auto;
    font-size: 3.9rem;
  }
  .hl1 .logo {
    margin-right: .5em;
  }

}
@media screen and ( max-width: 767px ){ /* SP */
  .hl1 {
    margin: 1.5em auto;
    font-size: 2.2rem;
  }
  .hl1 .logo {
    display: block;
    margin: auto;
    padding-right: 1em;
  }
}
.hl2 {
  margin-bottom: 0.8em;
  font-weight: normal;
  line-height: 1.6;
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl2 { font-size: 3rem;}
}
@media screen and ( max-width: 767px ){ /* SP */
  .hl2 { font-size: 2.2rem;}
}
.hl3 {
  font-weight: normal;
}
@media screen and ( min-width: 768px ){ /* PC */
  .hl3 {
    font-size: 2.4rem;
  }
}
@media screen and ( max-width: 767px ){ /* SP */
  .hl3 { font-size: 2rem;}
}
/*------------------------------------------------
  btn
------------------------------------------------*/
.btn {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  background-color: #999;
  line-height: 1;
}
.btn, a.btn { color: #fff;}
a.btn:hover, a.btn.black:active { text-decoration: none;}
.btn:focus { box-shadow: 0 0 5px 1px #00b8e5;}
.btn:disabled { background-color: #ddd; border-color: #ddd; color: #999;}
.btn.full { width: 100%;}

@media screen and ( min-width: 768px ){ /* PC */
  .btn:not(:disabled):hover { opacity: .8;}
}

.btn_download,
.btn_download_nav,
.btn_download_nav_tracking {
  background: #20bf6b;
}
.btn_download {
  width: 270px;
  padding: 20px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.8rem;
}
.btn_download_nav {
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 1.4rem;
}
.btn_download_nav_tracking {
  padding: 12px 40px;
  font-weight: bold;
  border: 4px solid #333;
  border-radius: 10px;
}
/* btn_wrapper_center */
.btn_wrapper_center {
  display: flex;
  margin: 40px auto;
  justify-content: center;
}
/*------------------------------------------------
  label
------------------------------------------------*/
.label {
  padding: 3px 6px;
  background: #999;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.label_required,
.label_optional {
  display: inline-block;
  padding: 2px 5px;
  margin: auto 3px;
  line-height: 1;
  border: 1px solid currentColor;
}
.label_required { color: #fc5c65;}
.label_optional { color: #20bf6b;}

/*------------------------------------------------
  form
------------------------------------------------*/
/* input */
.input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='tel'] {
  margin-top: 5px; margin-bottom: 5px;
  padding: 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  vertical-align: middle;
  -webkit-appearance: none;
}
.input.size_full { width: 100%;}

.input:-ms-input-placeholder { color: #999;} /* ie */
.input::-ms-input-placeholder { color: #999;} /* edge */
.input::placeholder { color: #999;}

.input:required { background: #ffeeee;}
.input:valid { background: #fff;}

.input:disabled { background: #f2f2f2; border-color: #ccc;}
.input:disabled:-ms-input-placeholder { color: #999;} /* ie */
.input:disabled::-ms-input-placeholder { color: #999;} /* edge */
.input:disabled::placeholder { color: #999;}

/* input_checkbox */
.input_checkbox {
  width: 0; height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  position: absolute;
  opacity: 0;
}
.input_checkbox + label {
  vertical-align: middle;
  position: relative;
}
.input_checkbox + label::before {
  display: inline-block; content: '';
  width: 1em; height: 1em;
  margin-right: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.input_checkbox:checked + label::before {
  background: #20bf6b;
  border-color: #20bf6b;
}
.input_checkbox + label::after {
  display: inline-block; content: '';
  width: 6px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute; top: 10px; left: 5px;
}
.input_checkbox:focus + label { box-shadow: 0 0 5px 1px #00b8e5;}
.input_checkbox:disabled + label { color: #999; cursor: default;}
.input_checkbox:disabled + label::before { border-color: #ccc; background: #ccc;}
.input_checkbox:disabled + label::after { display: none;}

/* textarea */
.textarea {
  width: 100%;
  min-height: 180px;
  margin-top: 5px; margin-bottom: 5px;
  padding: 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-appearance: none;
  resize: vertical;
}
/* select_wrapper */
.select_wrapper {
  display: inline-block;
  margin-top: 5px; margin-bottom: 5px;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
}
.select_wrapper::after {
  display: block; content: '';
  width: 0;height: 0;
  margin: auto;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #333333 transparent transparent transparent;
  position: absolute;
  top: 0; bottom: 0; right: 15px;
  pointer-events: none;
}
.select_wrapper select {
  display: inline-block;
  height: 52px;
  padding: 0 40px 0 8px;
}
.select_wrapper.size_full { display: block;}
.select_wrapper.size_full select { width: 100%;}

.select_wrapper select:disabled {
  background-color: #f2f2f2;
  border-color: #ccc;
  color: #999;
}
@supports (-ms-ime-align: auto){ /* edgeの文字ずれ調整 */
  .select_wrapper select {
    position: relative;
    top: 0.2em;
  }
}
/* error_list */
.error_list {
  /* margin: 10px 0; */
  color: #c82506;
  font-size: 1.5rem;
}
.error_list > li {
  margin: .1em 0;
}
.error_list li::before {
  display: inline-block; content: '＊';
  margin-right: 5px;
}
/* form_row */
.form_row {
  display: block;
  margin: 1em auto;
}
/*------------------------------------------------
  def_list
------------------------------------------------*/
.def_list {
  padding-left: 30px;
  list-style: disc;
}
/*------------------------------------------------
  read_txt
------------------------------------------------*/
.read_txt {
  color: #4d4d4d;
}
@media screen and ( min-width: 768px ){ /* PC */
  .read_txt {
    margin: 40px auto;
    text-align: center;
  }
}