@charset "utf-8";
#page.flow #mainin{
  background-image: url(../images202511/guarantee-support/main.jpg);
}

#page.flow #contents {
  background-color: #fff;
}
#page.flow #contents div,
#page.flow #contents p{
  font-size:15px;
}
#page.flow #contents p{
  line-height: 2;
}
#page.flow #contents .ct{
  text-align: center;
}

#page.flow #contents .topBox{
  padding:130px 0;
  text-align: center;
}
  #page.flow #contents .topBox p{
    line-height: 2;
  }
  #page.flow #contents .topBox .cacth{
    margin:0 auto 35px;
  }
  #page.flow #contents .topBox .cacth strong{
    font-size: 28px;
    font-weight: bold;
  }

#page.flow #contents .step-flow{
	margin: 0 auto 140px;
	height:340px;
  background-color: #f2f2f2;
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
}
  #page.flow #contents .step-flow .img{
    width:1140px;
    margin:0 auto;
  }


#page.flow #contents .step-box{
  width:1040px;
  margin:0 auto 350px;
}
  #page.flow #contents .step-box dl{
    width:100%;
    margin:0 auto 65px;
    display: table;
  }
  #page.flow #contents .step-box dt{
    width:165px;
    float: left;
  }
    #page.flow #contents .step-box dt img{
      width:100%;
    }

  #page.flow #contents .step-box dd{
    width:846px;
    float: right;
    text-align: left;
    background-color: #eee;
    padding:25px 30px 25px 40px;
    border-radius: 10px;
  }
    #page.flow #contents .step-box dd h2{
      font-size: 24px;
      line-height: 1.4;
      font-weight: bold;
      margin:0 auto 10px;
    }
    #page.flow #contents .step-box dd p{
      line-height: 1.8;
      font-size: 16px;
    }
    #page.flow #contents .step-box dd h3{
      line-height: 1.6;
      font-size: 20px;
      margin-top:10px;
      font-weight: bold;
    }

  #page.flow #contents .sub-comment{
    background-color: #000;
    color:#fff;
    line-height: 1rem;
    font-size: 15px;
    width:100%;
    height:28px;
    margin:0 auto 65px;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
  }

@media (max-width: 640px) {
  #page.flow #contents div,
  #page.flow #contents p{
    text-size-adjust: none;
    font-size: 3.6vw;
  }
  #page.flow #contents .topBox{
    padding:25vw 5vw;
    text-align: center;
  }
    #page.flow #contents .topBox p{
      line-height: 2;
      text-align: left;
    }
    #page.flow #contents .topBox .cacth{
      margin:0 auto 5vw;
      text-align: center;
    }
    #page.flow #contents .topBox .cacth strong{
      font-size: 5vw;
    }

  #page.flow #contents .step-flow{
  	margin: 0 auto 25vw;
    padding:6vw 0;
  	height:auto;
    padding:8vw 0;
  }
    #page.flow #contents .step-flow .img{
      width:94vw;
    }
    #page.flow #contents .step-flow .img img{
      width:100%;
    }


  #page.flow #contents .step-box{
    width:90vw;
    margin:0 auto 30vw;
  }
    #page.flow #contents .step-box dl{
      margin:0 auto 10vw;
    }
    #page.flow #contents .step-box dt{
      width:20vw;
      float: left;
    }

    #page.flow #contents .step-box dd{
      width:68vw;
      padding:5vw 5vw;
      border-radius: 3vw;
    }
      #page.flow #contents .step-box dd h2{
        font-size: 4.2vw;
        margin:0 auto 1.5vw;
      }
      #page.flow #contents .step-box dd p{
        font-size: 3.6vw;
      }
      #page.flow #contents .step-box dd h3{
        font-size: 3.8vw;
        margin-top:4vw;
      }

    #page.flow #contents .sub-comment{
      font-size: 3.6vw;
      height:8vw;
      margin:0 auto 10vw;
    }
}