/* ====================================== */
/*  SP CSS */
/* ====================================== */


@media only screen and (max-width: 767px), only screen and (max-device-width: 1024px) {


/* ---- com ---- */


body {
min-width: 640px;
}

.pc {
display: none!important;
}

.sp {
display: block!important;
}

/* box */

.sb {
padding: 20px;
}

/* h2 */

h2 {
font-size: 150%;
padding: 30px 20px;
margin-bottom: 30px;
}

h2 img {
padding: 0 10px;
}

/* section */

section {
width: 620px;
}


/* ---- header ---- */


header div p {
background: url("../../com/img/header/check.png") no-repeat center left 30px;
padding: 15px 15px 15px 110px;
text-align: left;
line-height: 140%;
}


/* ---- content ---- */


#intro div {
background: url("../../com/img/nav/1.png") no-repeat top 20px left;
}

#intro div p {
margin: 20px 0 0 200px;
}


/* ---- 溝 ---- */


#howto div:first-of-type {
background: url("../../com/img/content/check.jpg") no-repeat center left -60px;
}

#howto div:first-of-type p {
padding: 20px 20px 20px 280px;
}

#howto div:last-of-type p {
padding: 20px;
}

#howto:before{
width: 260px;
height: 159px;
background-size: 100%;
right: 0;
bottom: 0;
}

/* シミュレーター */

.sim div {
min-height: auto;
background-size: 250px;
margin-top: 90px;
padding-bottom: 30px;
}

.sim div p {
margin: -65px 0 0 260px;
}

#sim h3 {
padding: 20px 160px 20px 20px;
}

#sim h3:before {
right: 0;
}

/* form */

form input {
width: 250px;
}

form .validate {
width: 250px;
}

button {
width: 540px;
}

#sim #result p:first-child {
left: 30px;
}

#sim #result p.about {
left: 125px;
}

#sim #result p.month {
left: 450px;
}

/* 動画 */

.video-intro div {
background-size: 180px;
margin-top: 80px;
padding-bottom: 30px;
}

.video-intro div p {
margin: -20px 0 0 180px;
}

/* チェック */

.note div {
background: url("../../com/img/nav/5.png") no-repeat bottom left;
background-size: 200px;
margin-top: 80px;
}

.note div p {
margin: -50px 0 0 180px;
}

#note dt {
width: 180px;
}

#note #g4 dt {
padding: 80px 0 0 30px;
}

#note #g3 dt {
padding: 80px 0 0 45px;
}

#note #g3 dd {
padding: 50px 20px;
}

#note #g2 dt {
padding: 78px 0 0 43px;
}

#note #g2 dd {
padding: 50px 20px;
}

#note #g2 dd span {
font-size: 90%;
}

#note dd {
margin-left: 180px;
padding: 20px;
}

#note #g3 dd:last-child span {
font-size: 50%;
margin: 30px 0 -40px 0;
}

/* 溝 end */

#next div:last-child {
width: 580px;
margin: 0 auto;
}


/* ---- キズ・変形, ヒビ ---- */


h2.sp-title1,
h2.sp-title2 {
display: block;
}

h2.sp-title1 img,
h2.sp-title2 img {
margin-top: 10px;
}

h2.sp-title1 img {
width: 400px;
}

h2.sp-title2 {
font-size: 130%;
}

.broke img {
margin: 50px 0;
}


/* ---- 空気圧 ---- */


#air img {
margin: 30px 0;
}

/* グラフ */

#air1 {
margin: 30px 0;
}

#air1 h3 {
padding: 20px 0;
}

#air1 img {
margin: 35px 0 20px 7px;
}

#air1 p {
font-size: 50%;
margin: 0 0 0 15px;
}

/* 不具合一覧 */

#air2 h3 {
padding: 20px 0;
}

#air2 img {
margin: 10px 0 30px 0;
}

/* 空気圧 end */

#air3 {
margin: 60px 0;
}

#air3 p {
background: none;
}

#air3 p strong {
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff100 0%) repeat scroll 0 0;
display: inline-block;
}


/* ---- まとめ ---- */


#finish div {
margin-top: -40px;
}


/* ---- AI ---- */


#ai1 {
margin-top: 110px;
}

#ai1 p {
width: auto;
}

#ai1 p:after {
bottom: -30px;
right: -20px;
}

#ai1 p:before {
top: -95px;
left: -10px;
}

/* 動画 */

#ai2 {
margin-bottom: 30px;
}

/* AI バナー */

#ai3 {
margin-top: 30px;
padding-bottom: 200px;
}

#ai4:before {
left: -10px;
}

#ai4 h3 {
font-size: 110%;
line-height: 180%;
}

#ai4 h3 strong {
font-size: 140%;
}

#ai4 div {
height: auto;
background: #d11014 url("../../com/img/content/ai/banner_sp.jpg") no-repeat top left;
padding-top: 270px;
}

#ai4 div p {
font-size: 100%;
width: 100%;
height: auto;
text-align: center;
padding: 30px;
border-right: none;
border-top: 3px solid #000;
}


/* ---- footer ---- */


footer {
margin-top: 30px;
}

footer p {
padding: 50px;
}

}