@media screen and (max-width: 1023px) {
  div.container {
    width: 100%;
    padding-left: 20px!important;
    padding-right: 20px !important;
  }
  .irregularity_title {
    padding: 16px 0 16px;
  }
  .irregularity_inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    height: auto;
  }
  .irregularity_inner:after {
    content: '';
    display: block;
    clear: both;
  }
  .irregularity_inner > h2 {
    position: static;
    margin-bottom: 0 !important;
    float: left;
    width: 54.8%;
    padding-top: 17px;
  }
  .irregularity_inner > h2 img {
    width: 100%;
    vertical-align: top;
  }
  .irregularity_inner > .img01 {
    position: static;
    float: right;
    width: 31.2%;
  }
  .irregularity_inner > .img01 img {
    vertical-align: top;
  }
  .irregularity_img {
    width: 548px;
    max-width: 100%;
    margin: 50px auto 44px;
  }
  .irregularity_img p {
    font-size: 20px !important;
    line-height: 1.64 !important;
    margin-top: 12px;
  }
  .before_inner,
  .after_inner,
  .before_inner > .text,
  .after_inner > .text {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
  .statuses-viewer {
    margin-top: 23px;
  }
  .before_inner .statuses-images {
    height: 50vw;
  }
  .after_inner .statuses-images {
    height: 50vw;
  }
  .before_inner {
    padding: 62px 40px 55px;
  }
  .before_inner > h3 {
    margin-bottom: 0 !important;
  }
  .before_inner > h3 img {
    height: 30px;
  }
  .switch_statebar {
    height: 41px;
    width: 116px;
  }
  .btn_switch_head {
    height: 41px;
    width: 41px;
  }
  .btn_switch .btn_switch_inner {
    margin: 0 5px;
  }
  .is-heating .btn_switch_head {
    left: 73px;
  }
  .statuses-images {
    margin: 4px 0;
  }
  .before_inner > .text,
  .after_inner > .text {
    font-size: 16px !important;
    line-height: 1.63 !important;
    margin: -9px 0 6px;
  }
  .after_inner {
    padding-top: 20.7%;
    padding-bottom: 67px;
  }
  .after_inner > h3 {
    left: 0;
    right: 0;
    padding: 0 40px;
  }
  .after_info {
    margin: 31px 0 43px !important;
  }
  .after_info:after {
    content: '';
    display: block;
    clear: both;
  }
  .after_info li {
    display: block;
    float: left;
    width: 42%;
    margin: 0;
    padding: 0;
  }
  #after_area .after_info li > p.text {
    font-size: 14px !important;
    line-height: 1.51 !important;
    margin-top: -1px;
    text-align: justify !important;
  }
  #case {
    margin: 68px auto 59px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 1023px) and (min-width: 601px) {
  #case h2 {
    margin: 0 32px;
  }
}

@media screen and (max-width: 600px) {
  .irregularity_title {
    padding: 9px 0 7px;
  }
  .irregularity_inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .irregularity_inner > h2 {
    width: 100%;
    float: none;
    padding-top: 0;
  }
  .irregularity_img {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
    padding-bottom: 45.5px;
    margin: 0;
  }
  .irregularity_img p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: justify;
    margin-top: 12.5px;
  }

  .before_inner {
    padding-top: 49.5px;
    padding-bottom: 42.5px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .before_inner > h3 {
    margin-bottom: 25px !important;
  }
  .before_inner > h3 img {
    width: 200px;
    height: auto;
  }
  .switch_statebar {
    height: 25px;
    width: 69px;
  }
  .before_inner .statuses-images {
    height: 74vw;
  }
  .after_inner .statuses-images {
    height: 77vw;
  }
  .btn_switch_head {
    width: 25px;
    height: 25px;
  }
  .is-heating .btn_switch_head {
    left: 43px;
  }
  .before_inner > .text, .after_inner > .text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding-left: 0;
    padding-right: 0;
  }
  .statuses-images {
    margin: 12px 0 12.5px;
  }
  .after_info {
    margin: 24.5px 0 35.5px;
    padding-left: 0 !important;
  }
  .after_info li {
    width: 100%;
    padding: 0;
    margin: 0 !important;
  }
  .after_inner {
    /*padding-top: 120.5px;*/
    padding-bottom: 45px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .after_inner > h3 {
    padding: 0;
    top: -14.5px;
  }
  .after_inner > h3 img {
    width: 300px;
  }
  .after_info li + li {
    margin-top: 25px;
  }
  .after_info li > .text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 0;
    text-align: justify;
  }
  .btn_switch .btn_switch_inner {
    margin: 0 2px;
  }
  .switch_status img {
    height: 41px;
  }
  .irregularity_img p {
    text-align: left !important;
  }
}