@charset 'utf-8';
img { max-width: 100%; height: auto; }
input[type="text"],
select { width: 100%; font-size: 1rem; padding: 1em;border-radius: 5px; border: 1px solid #CCC; appearance: none;  }
select { background: #FFF url("../img/select-arrow.svg") no-repeat right 1em top 1.3em / 1em auto; padding-right: 3em;  }

input[type="radio"] {  position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; }

.radio-label { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: .5em; align-items: center; line-height: 1.5;  border: 1px solid #DDD; border-radius: 10px; padding: 1em; cursor: pointer; }
.radio-label::before { content: ''; width: 1.2em; height: 1.2em; border-radius: 50%; border: 1px solid #CCC; box-sizing: border-box; }
input[type="radio"]:checked + .radio-label { border: 2px solid #0053A7; background:  #e5f3fa; }
input[type="radio"]:checked + .radio-label::before { background: #0053A7; background-clip: content-box; padding: 3px;  }

.appliance-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.appliance-select .label { border: 1px solid #CCC; text-align: center; padding: 1em; border-radius: 10px; display: block; cursor: pointer;height: 100%;  line-height: 1.5; }
input[type="radio"]:checked + .label { border: 2px solid #0053A7; background:  #e5f3fa; }
.appliance-select .label img { width: 70%; margin: 0 auto; display: block; }
.hidden-phase { display: none; }

.displayd-code-wrap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.displayd-code-wrap .item { }

.symptom-list { margin: 0;  }
.symptom-list label { display: block; }

.conts-phase { margin-top: 3rem; }
.set-cond { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 10rem; gap: 5px;  }
.set-cond button { padding: 0; text-align: center; background: #f29600; color: #FFF; border: none;  font-size: 1rem; font-weight: bold; border-radius: 5px; }

.symptom-checklist .check { display: none; margin: 2em 1em; }
.symptom-checklist .check:empty { display: none; } 

.symptom-result .ttl { color:#f29600; font-weight: bold; border-bottom: 2px solid; font-size: 1.125rem; }

.conts-error-code { padding: 2em; margin-top: 1em; background: rgba(255,255,255,.2); }
.error-detail { display: none; background: #f5d5a1; padding: 2rem; }
.error-code-detail { display: none; margin-top: 1em; }
.code-found { }
.code-found .conts { margin-top: 1em; padding-left: 1em; }
.code-found .ttl { font-weight: bold; font-size: 1.125rem; color: #f29600; }
.code-found .ttl::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; margin-left: -1em; margin-right: .5em; display: inline-block; vertical-align: middle; }
.code-found .first-aid .ttl { font-size: 1em; color: #000; }
.code-found .first-aid .ttl::before { border-radius: 0; margin-left: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.support-address { border: 2px solid #f29600; border-radius: 10px; text-align: center; padding: 2em 5%; margin-top: 2em;  background: #FFF; }
.support-address .tel { font-weight: bold; font-size: 1.25rem; }
.support-address .tel .telnum { display: block; font-size: 2em; color: #f29600;}

.support-address .btn { font-weight: bold; font-size: 1.25rem; width: 80%; height: 4rem; display:flex; flex-direction:column; justify-content:center; align-items:center; margin: 0 auto; background: #f29600;border-radius: 5px; border: none;}
.support-address .btn span { color: #fff;}

.asterisk {
  font-size: .8rem;
}
@media screen and (max-width: 768px) {
  .wrapper { font-size: .9rem; }
  .appliance-select .label { font-size: .9rem; }
  .error-detail { padding: 1rem; }
  
  .conts-error-code { padding: 1em; }
  .set-cond { grid-template-columns: 1fr; }
  .set-cond .button { padding: 1em; }
  
  .symptom-checklist .check { margin: 2em 0; }
  .support-address { padding: 2em 3%; font-size: .85rem; }
  .support-address .tel { font-size: 1rem; }
  .support-address .tel .telnum { font-size: 1.5rem; }

  .asterisk {
    font-size: .7rem;
    display: block;
  }
}

.-lead {
  margin-bottom: 2rem;
}

.-note {
  border: 1px solid #ddd;
  padding: 1.5rem;
  margin-top: 2rem;
  border-radius: .6rem;
}
.-note ul {
  text-align: left;
  list-style-type: disc;
  padding-left: 1.5rem;
}
.-note ul li {
  list-style-type: disc;
  line-height: 1.5;
  font-size: .9rem;
}
.-note ul li + li {
  margin-top: .5rem;
}
.-note ul li span {
  font-size: .8rem;
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.-note ul + h4 {
  margin-top: 1.5rem;
}