@charset "utf-8";

/* PC用 */
@media screen and (min-width: 561px){

.img-center {
    text-align:center;
}
#main .error-code-main img {
width: 100%;
}
/*メーカーから選ぶ*/
.ec-maker-select {
width: 100%;
display: inline-flex;
text-align: center;
justify-content: space-around;
margin: 0 0 5%;
}
#main .ec-maker-select li img {
width: 80%;
}
#main .ec-maker-select li img:hover {
outline: 3px solid #d70c25;
outline-offset: -3px;
}
/*エラー以外*/
.trouble-check img {
margin: 2% 0;
}
.trouble-check dt {
width: 100%;
padding: 0;
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #e40045;
letter-spacing: 1px;
}
.trouble-check dt::before {
content: '';
background: url(../img/icon-question.gif) no-repeat left bottom;
display: inline-block;
width: 25px;
height: 25px;
background-size: contain;
margin-right: 5px;
}
.trouble-check dd {
margin: 5px 10px;
line-height: 1.4;
}

.trouble-check .t-red, .trouble-check .t-green {
    display: block;
    width: 3em;
    color: #fff;
    padding: 0.1em 0.4em;
    margin-bottom: 0.3em;
    border-radius: 2px;
    font-weight: 600;
    text-align: center;
}
.trouble-check .t-red {
background-color: #e40045;
}
.trouble-check .t-green {
background-color: #3eae0b;
}
strong.green {
color: #66992d;
display: inline-block;
margin: 10px 0 5px;
}
strong.red {
color: #E20029;
margin-bottom: 5px;
display: inline-block;
}
/*エラーコード一覧*/
.error-code td a span.ec-no,
#trouble-list td a span.ec-no {
font-size: 0.85em;
font-weight: 400;
}
#trouble-list table,
#trouble-data table {
border-collapse: collapse;
border: 1px solid #c9c9c9;
width: 100%;
}
#trouble-list table th,
#trouble-data table th {
background-color: #e9e9e9;
text-align: center;
padding: 1% 0;
}
#trouble-list td {
border-bottom: 1px solid #c9c9c9;
}
#main #trouble-list td img,
#main #trouble-data td img {
width: 100%;
display: inline-block;
}
#trouble-list td:first-of-type {
width: 18%;
padding: 2%;
}
#trouble-data td:first-of-type {
width: 20%;
padding: 2%;
}
#trouble-list td:last-of-type {
width: 74%;
padding: 0 0 0 3%;
text-align: left;
}
#trouble-data td:not(:first-of-type) {
padding: 0 0 0 3%;
text-align: left;
}
#trouble-list table th,
#trouble-list td,
#trouble-data table th,
#trouble-data td{
border: 1px solid #c9c9c9
}
#trouble-list td:last-of-type:hover {
background-color: #fff58e;
cursor: pointer;
}
#trouble-list td a {
display: block;
width: 100%;
height: 100%;
font-size: 1.25em;
font-weight: bold;
color: #333;
text-decoration-line: none;
line-height: 1.4;
}
#trouble-data table + p {
margin: 10px auto;
}
/*ボタンのせ*/
#main .gform-btn {
position: relative;
height: auto;
width: 100%;
margin: 0 0 5%;
}
/*見積もりボタン*/
#main .gform-btn p {
position: absolute;
bottom: 15px;
right: 100px;
width: auto;
}
.estimate a {
width: 100%;
margin: 0 auto;
display: block;
padding: 20px;
color: #fff;
background-color: #0ca80f;
font-size: 16px;
font-weight: bold;
text-align: center;
border-radius: 10px;
text-decoration: none;
}
.estimate a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
}
/* スマホ用 */
@media screen and (max-width: 560px) {

.ec-maker-select {
width: 100%;
display: inline-flex;
text-align: center;
justify-content: space-around;
margin: 0 0 5%;
}
#main .ec-maker-select li img {
width: 80%;
}
#main .ec-maker-select li img:hover {
outline: 3px solid #d70c25;
outline-offset: -3px;
}
.trouble-check dt {
width: 96%;
padding: 0;
margin: 20px auto 10px;
font-size: 15px;
font-weight: bold;
color: #e40045;
letter-spacing: .5px;
}
.trouble-check dt::before {
content: '';
background: url(../img/icon-question.gif) no-repeat left bottom;
display: inline-block;
width: 25px;
height: 25px;
background-size: contain;
margin-right: 5px;
}
.trouble-check dd {
margin: 5px 10px;
font-size: 14px;
line-height: 1.5;
}

.trouble-check .t-red, .trouble-check .t-green {
    display: block;
    width: 3em;
    color: #fff;
    padding: 0.1em 0.4em;
    margin-bottom: 0.3em;
    border-radius: 2px;
    font-weight: 600;
    text-align: center;
}
.trouble-check .t-red {
background-color: #e40045;
}
.trouble-check .t-green {
background-color: #3eae0b;
}
strong.green {
color: #66992d;
display: inline-block;
margin: 10px 0 5px;
}
strong.red {
color: #E20029;
margin-bottom: 5px;
display: inline-block;
}
/*エラーコード一覧*/
.error-code td a span.ec-no,
#trouble-list td a span.ec-no {
font-size: 0.9em;
color: #333;
font-weight: 400;
}
#trouble-list table,
#trouble-data table {
border-collapse: collapse;
border: 1px solid #c9c9c9;
width: 100%;
}
#trouble-list table th,
#trouble-data table th {
background-color: #e9e9e9;
text-align: center;
padding: 1% 0;
}
#trouble-list td {
border-bottom: 1px solid #c9c9c9;
}
#main #trouble-list td img,
#main #trouble-data td img {
width: 100%;
display: inline-block;
}
#trouble-list td:first-of-type {
width: 25%;
padding: 3% 2%;
}
#trouble-data td:first-of-type {
width: 30%;
padding: 2%;
}
#trouble-list td:last-of-type {
width: auto;
padding: 2%;
text-align: left;
}
#trouble-data td:not(:first-of-type) {
padding: 0 0 0 3%;
text-align: left;
}
#trouble-list table th,
#trouble-list td,
#trouble-data table th,
#trouble-data td{
border: 1px solid #c9c9c9
}
#trouble-list td:last-of-type:hover {
background-color: #fff58e;
cursor: pointer;
}
#trouble-list td a {
display: block;
width: 100%;
height: 100%;
font-size: 14px;
font-weight: bold;
color: #333;
text-decoration-line: none;
line-height: 1.4;
}
#trouble-data table + p {
margin: 10px auto;
}
/*ボタンのせ*/
#main .gform-btn {
position: relative;
height: auto;
width: 96%;
margin: 0 auto 5%;
}
#contents .gform-btn img {
width: 100%;
}
#main .gform-btn p {
position: absolute;
bottom: 3px;
right: 0;
}
.estimate a {
margin: 0 10px 0 auto;
display: block;
padding: 12px 18px;
color: #fff;
background-color: #03ad5b;
font-size: 14px;
font-weight: bold;
text-align: center;
border-radius: 10px;
text-decoration: none;
width: 60%;
}
.estimate a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
}