@charset "utf-8";
/* CSS Document */


/*----------------------------------
header
----------------------------------*/
#movie {
  text-align: center;
  width: 100%;
}
video {
  width: 100%;
}

/*----------------------------------
rate01
----------------------------------*/
.rate01 {
  background: url(images/rate/bg_ratetable.jpg) no-repeat center top;
  height: 325px;
  z-index: 1;
}
.ratetable {
  width: 807px;
  margin: 0 auto;
  padding: 60px 0 0;
}
.ratetable h2 {
  margin: 0 0 0 20px;
}
.ratetable h3 {
  text-align: right;
  margin: 30px 10px 10px 0;
}

/*----------------------------------
background
----------------------------------*/
#background {
  background: url(images/rate/bg_rate.png) no-repeat center top fixed;
  padding: 30px 0 0;
}

/*----------------------------------
rate02
----------------------------------*/
.rate02 {
  background: #eeeeee url(images/rate/bg_original.png) no-repeat center 20px;
  width: 814px;
  height: auto;
  margin: 70px auto 0;
  border-bottom: 3px solid #609695;
  padding: 0 0 30px;
}
.rate02 h2 {
  padding: 35px 0 0 30px;
}
.rate02 .rate_txt {
  padding: 20px 0 0 20px;
  line-height: 1.7;
  font-size: 14px;
}
#custommade {
  position: relative;
}
#custommade .fuwa {
  position: absolute;
  margin: -110px 0 0 0;
  right: 30px;
}

.btn_contact {
  text-align: center;
  margin: 25px 0 0;
}

.example {padding: 10px;}
.exampleBox {
  border-top: 8px solid #89bac6;
  background: #fff;
  border-bottom: 3px solid #e6e5e5;
  padding: 10px 0;
}
.exampleBox_txt01 {
  margin: 0 0 0 -3px;
  background: #0d72af;
  width: 70px;
  height: 38px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  float: left;
}

.exampleBox_txt02 {
  float: left;
  color: #0d72af;
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0 0;
}
.exampleBox_txt03 {
  float: left;
  background: #ea5e00;
  font-size: 16px;
  padding: 3px 10px;
  color: #fff;
  margin: 8px 8px 0 0;
}
.exampleBox_txt04 {
  color: #ea5e00;
  font-size: 20px;
  margin: 8px 0 0;
}

.exampleBox table {
  clear: both;
  width: 764px;
  margin: 10px auto;
}
.exampleBox table th {
  background: #000;
  color: #fff;
  width: 170px;
  font-weight: bold;
}
.exampleBox table td {
  border: 7px solid #000;
  padding: 10px;
  font-weight: bold;
}
.exampleBox_txt05 {
  font-size: 28px;
  padding: 0 20px;
  font-weight: bold;
}
.exampleBox_txt05 img {
  vertical-align: middle;
  padding: 0 10px 8px 0;
}
.exampleBox_txt05_1 {
  font-size: 33px;
  color: #ea5e00;
}

.exampleBox_txt05_2 {
  font-size: 18px;
  margin: 0 0 0 10px;
}

.exampleBox_txt06 {
  margin: 0 15px;
  line-height: 1.7;
}

.btn_contact {
  text-align: center;
  margin: 25px 0 0;
}

.original_bottom_txt {
  margin: 30px 60px 0;
  line-height: 1.5;
}

.original_p {
  background: url(images/rate/bg_original2.png) no-repeat 63px bottom;
  background-size: contain;
}
/*----------------------------------
rate03
----------------------------------*/
.rate03 {
  background: #eeeeee url(images/rate/bg_template.png) no-repeat center 25px;
  width: 814px;
  height: auto;
  margin: 0 auto 0;
  padding: 0 0 30px;
  border-bottom: 3px solid #609695;
}
.rate03 h2 {
  padding: 35px 0 0 30px;
}
.rate03 .rate_txt {
  padding: 20px 0 0 20px;
  line-height: 1.7;
  font-size: 14px;
}
.templateimg {
  width: 756px;
  margin: 12px auto 0;
}
.example02 {padding: 10px;}
.exampleBox02 {
  border-top: 8px solid #ea8a00;
  background: #fff;
  border-bottom: 3px solid #e6e5e5;
  padding: 10px 0;
  overflow: hidden;
}
.exampleBox02_txt01 {
  margin: 0 0 0 -3px;
  background: #ea8a00;
  width: 70px;
  height: 38px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  float: left;
}
.exampleBox02_txt02 {
  font-size: 24px;
  margin: 8px 0 10px;
  font-weight: bold;
}
.exampleBox02_txt03 {
  float: left;
  font-size: 20px;
  font-weight: bold;
  margin:10px 0 0 18px;
}
.exampleBox02_txt03 span {
  color: #bb3500;
  font-size: 26px;
}
.exampleBox02 table {
  width: 540px;
}
.exampleBox02 table th {
  background: #000;
  color: #fff;
  width: 130px;
  font-weight: bold;
}
.exampleBox02 table td {
  border: 7px solid #000;
  padding: 10px;
  font-weight: bold;
}
.exampleBox02 table td span {
  color: #bb3500;
  font-size: 18px;
}

.exampleBox02_txt04 {
  float: left;
  font-size: 28px;
  margin: 10px 0 15px;
  padding: 0 0 0 20px;
  font-weight: bold;
}
.exampleBox02_txt04 img {
  vertical-align: middle;
  padding: 0 10px 8px 0;
}
.exampleBox02_txt04_r {
  margin: 15px 0 15px;
  line-height: 28px;
}
.exampleBox02_txt04_1 {
  color: #bb3500;
  font-size: 36px;
}
.exampleBox02_txt04_2 {
  background: #ea5e00;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  padding: 2px 10px;
  margin: 0 10px 0 5px;
  vertical-align: top;
}
.exampleBox02_txt04_3 {
  font-size: 16px;
  font-weight: normal;
  vertical-align: top;
}
#basic {
  width: 746px;
  margin: 30px auto 0;
}
#basic ul {
  background: #fff8ee;
  border-bottom: 3px solid #ffdbaa;
  overflow: hidden;
  padding: 12px 0 23px 24px;
}
#basic ul li {
  float: left;
  width: 340px;
  margin: 0 20px 0 0;
}
#basic ul li:last-child {
  margin: 0;
}

#basic2 {
  background: #fbfdff;
  width: 746px;
  margin: 0 auto;
  border-bottom: 10px solid #b7ca89;
}
.basic2_in {
  overflow: hidden;
  padding: 10px;
}
.basic2_in_01 {
  float: left;
  margin: 0 10px 0 0;
}

.basic2_in_02 {
  color: #686868;
  font-size: 28px;
  font-weight: bold;
}
.basic2_in_03 {
  color: #686868;
  font-size: 20px;
  font-weight: bold;  
}
.basic2_in_02 span {
  color: #c85556;
  font-size: 20px;
}

.basic2_in_04 {
  color: #84a632;
  font-size: 34px;
  letter-spacing: 0.08em;
  font-weight: bold; 
  padding: 0 0 0 270px; 
}
#template_in_smart {
  display: none;
}
#template_in {
  width: 749px;
  margin: 15px auto 20px;
}
#template_in dt {
  float: left;
}
.template_p01, .template_p02 {
  width: 374px;
  margin: 0 0 0 407px;
}
.template_p {
  background: url(images/rate/bg_template2.png) no-repeat 45px bottom;
  background-size: contain;
}
.template_p01 {
  padding: 38px 0 10px;
}

/*----------------------------------
rate_recruit
----------------------------------*/
.rate_recruit {
  background: #eee url(images/rate/bg_recruit.png) no-repeat center 20px;
  width: 814px;
  height: auto;
  padding: 0 0 25px;
  margin: 70px auto 0;
  border-bottom: 3px solid #9f5175;
}
.rate_recruit h2 {
  padding: 35px 0 0 30px;
}
.rate_recruit .rate_txt {
  padding: 20px 0 0 20px;
  line-height: 1.7;
  font-size: 14px;
}
#custommade {
  position: relative;
  /* height: 130px; */
}
#custommade .fuwa {
  position: absolute;
  margin: -110px 0 0 0;
  right: 30px;
}
.originalimg {
  width: 756px;
  margin: 10px auto 0;
}


.rate_recruit .original_p {
  background: url(images/rate/bg_recruit2.png) no-repeat 63px bottom;
  background-size: contain;
}
.original_p01 {
  width: 490px;
  margin: 30px 0 0 290px;
}
.original_p02 {
  width: 490px;
  margin: 10px 0 0 290px;
}

/*----------------------------------
rate_banner
----------------------------------*/
.rate_banner {
  background: #eee url(images/rate/bg_banner.png) no-repeat center 20px;
  width: 814px;
  height: auto;
  padding: 0 0 25px;
  margin: 70px auto 0;
  border-bottom: 3px solid #3c6445;
}
.rate_banner h2 {
  padding: 35px 0 0 30px;
}
.rate_banner .rate_txt {
  padding: 20px 0 0 20px;
  line-height: 1.7;
  font-size: 14px;
}
#custommade {
  position: relative;
  /* height: 130px; */
}
#custommade .fuwa {
  position: absolute;
  margin: -110px 0 0 0;
  right: 30px;
}
.originalimg {
  width: 756px;
  margin: 10px auto 0;
}


.rate_banner .original_p {
  background: url(images/rate/bg_banner2.png) no-repeat 63px bottom;
  background-size: contain;
}
.original_p01 {
  width: 490px;
  margin: 30px 0 0 290px;
}
.original_p02 {
  width: 490px;
  margin: 10px 0 0 290px;
}

/*----------------------------------
rate04
----------------------------------*/
.rate04 {
  width: 1052px;
  height: auto;
  padding-bottom: 20px;
  margin: 70px auto;
  background: #eeeeee;
  border-bottom: 3px solid #609695;
}
.rate04 h2 {
  width: 978px;
  margin: 0 auto;
  padding: 10px 0 0;
}
.rate04 p {
  margin: 15px 0 10px 20px;
}
.content_list {
  overflow: hidden;
}
#content_list_l, #content_list_r {
  background: #fff;
  border-left: 5px solid #5a8578;
  width: 473px;
  height: 750px;
}
#content_list_l {
  float: left;
  margin-left: 22px;
}
#content_list_r {
  float: right;
  margin-right: 22px;
}
.rate04 table {
  padding: 0 10px;
}
.rate04 th {
  width: 320px;
  text-align: left;
  padding: 25px 0;
  font-weight: bold;
  height: auto;
  border-bottom: 1px dashed #000;
}
.rate04 th .parenthesis {
  font-weight: normal;
}

.rate04 th .caution {
  font-weight: normal;
  font-size: 12px;
}
.rate04 td {
  text-align: right;
  padding: 25px 0 ;
  border-bottom: 1px dashed #000;
  width: 133px;
}
.rate04 th em {
  font-weight: bold;
  color: #f00;
}

.rate04 td span {
  color: #f00;
}

@media screen and (max-width:1051px){
  .rate04 {
    width: 100%;
  }
}

/*----------------------------------
ipad縦
----------------------------------*/
@media screen and (max-width:960px){
  .template_p01 img, .template_p02 img {
    width: 100%;
    height: auto;
  }
  .ratetable {
    width: 100%;
  }
  .ratetable p img {
    width: 100%;
    height: auto;
  }
  .rate02 {
    background-size: 94%;
    width: 814px;
  }
  .rate_recruit {
    
    width: 814px;    
  }
  .original_p01 {
    width: 60%;
    margin: 30px 0 0 38%;
  }
  .original_p01 img, .original_p02 img {
    width: 100%;
    height: auto;
  }
  .original_p02 {
    width: 60%;
    margin: 10px 0 0 38%;
  }  
  .rate03 {
    
    width: 814px;
  }
  .template_p01, .template_p02 {
    margin: 0 1% 0 49%;
    width: 50%;
  }
  .template_p01 {
    padding: 38px 0 10px 0;
  }
  .rate04 {
    width: 100%;
  }
  .rate04 h2 {
    width: 98%;
  }
  .rate04 h2 img {
    width: 100%;
    height: auto;
  }
  #content_list_l, #content_list_r {
    width: 45%;
  
    min-height: 850px;
}
}
@media screen and (max-width:814px){
  .rate02, .rate_recruit, .rate_banner, .rate03 {
    background-size: 94%;
    width: 100%
  }
}
@media screen and (max-width:768px){
  .rate02 .rate_txt,
  .rate_recruit .rate_txt,
  .rate_banner .rate_txt{padding: 20px 42% 0 20px;}
}
/*----------------------------------
smartphone
----------------------------------*/
@media screen and (max-width:764px){
  .originalimg img,
  .templateimg img,
  .btn_contact img,
  #basic img,
  #basic2 img {width: 100%;height: auto;}
  .exampleBox_txt02 {float: none;}
  .exampleBox table,
  .exampleBox02 table {
    width: 98%;
    border: 3px solid #000;
  }
  .exampleBox table th,
  .exampleBox table td,
  .exampleBox02 table th,
  .exampleBox02 table td {
    display: block;
    width: 100%;
  }
  .exampleBox table td,
  .exampleBox02 table td {
    width: 96%;
    padding: 2%;
    border: none;
  }
  .originalimg,
  .templateimg {width: 94%;}
  #basic, #basic2 {width: 98%;}
  .btn_contact {width: 98%;margin: 25px auto 0;}
  #basic ul {
    padding: 8px 0 12px;
    text-align: center;
    display: block;
    width: 100%;
  }
  #basic ul li {
    width: 45%;
    margin: 0 2% 0 0;
  
    float: none;
    display: inline-block;
  }
}
@media screen and (max-width:749px){
  /*template_in*/
  #template_in {
    display: none;
  }
  #template_in_smart {
    display: block;
    margin: 10px 5px 15px;
  }
  #template_in_smart th {
    background: #d04e50;
    color: #ff0;
    padding: 5px;
  }
  #template_in_smart td {
    color: #686868;
    padding: 5px 5px 10px;
    background: #fff;
  }
}
@media screen and (max-width:667px){
  .ratetable h2 img,
  .ratetable h3 img,
  .rate02 h2 img,
  .rate_recruit h2 img,
  .rate_banner h2 img,
  .rate03 h2 img,
  #custommade .fuwa img,
  #basic h3 img,
  #basic ul li img,
  .template_p01 img,
  .template_p02 img {
    width: 100%;
    height: auto;
  }
  #background {
   background: none; 
  }
  /*rate01*/
  .rate01 {
    height: auto;
  }
  .ratetable {
    padding: 20px 0 0;
  }
  .ratetable h2, .ratetable h3 {
    margin: 0 auto 5px;
    width: 94%;
  }
  /*background*/
  #background {
    padding: 30px 0 0;
  }
  /*rate02,rate03,rete_recruit*/
  .rate02, .rate03, .rate_recruit,
  .rate_banner{
    background: #eeeeee;
    height: auto;
    padding: 0 0 20px;
  
    width: 100%;
}
  .rate_recruit,
  .rate_banner {
    margin-top: 20px;
  }
  .rate02 h2, .rate03 h2, .rate_recruit h2 {  
    padding: 20px 0 10px;
    width: 85%;
    margin: 0 auto;
  }
  .rate_banner h2 {
    padding: 20px 0 10px;
    width: 60%;
    margin: 0 auto;
  }
  .rate02 {
    margin-top: 20px;
  }
  .rate_recruit h2 {
    width: 64%;
  }
  .rate02 .rate_txt, .rate03 .rate_txt, .rate_recruit .rate_txt,
  .rate_banner .rate_txt{
    padding: 0 10px;
    font-size: 12px;
  }
  .originalimg, .templateimg {
    width: 100%;
    padding: 50px 0 0;
  }
  .templateimg {
    padding: 5px 0 0;
  }
  #custommade .fuwa {
    width: 50%;
    margin: -6px 0 0;
  }
  .btn_contact {
    width: 96%;
    margin: 10px auto 0;
  }
  .original_p,
  .template_p,
  .rate_recruit .original_p,
  .rate_banner .original_p{background: none;}
  .original_p01, .original_p02 {
    width: 90%;
    margin: 10px auto;
  }
  .rate03 {
    background: #eee;
    margin: 0;
  }

  /*template_in*/
  .template_p01, .template_p02 {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 10px;
  }
  .template_p01 {
    padding-top: 10px;
  }
  .exampleBox_txt02,
  .exampleBox02_txt02 {font-size: 16px;height: 30px;margin: 0;padding: 8px 0 0;}
  .exampleBox_txt05,
  .exampleBox02_txt04 {font-size: 16px;/* overflow: hidden; */float: none;margin-bottom: 0;}
  .exampleBox_txt05_1,
  .exampleBox02_txt04_1 {font-size: 28px;}
  
  .exampleBox02_txt04_r {
    margin: 0 0 15px;
    padding: 0 0 0 15px;
}
  .basic2_in_01 {float: none;width: 45%;margin: 0 auto 10px;}
  .basic2_in_02 ,.basic2_in_03{font-size: 16px;}
  .basic2_in_04 {padding:0;font-size: 14px;}
  .exampleBox_txt06,.original_bottom_txt {margin: 0 4%;font-size: 12px;}
  /*rate04*/
  .rate04 {
    margin: 20px 0 30px;
    height: auto;
    padding: 0 0 20px;
  
    clear: both;
}
  .rate04 p {
    margin: 10px;
    font-size: 12px;
  }
  .content_list {
    overflow: hidden;
  }
  #content_list_l {
  margin: 0 auto;
  height: auto; 
  padding-bottom: 15px;
  float: none;
  width: 94%;
  min-height: 100%;
}
  #content_list_r {
    margin: 10px auto 0;
    height: auto;
    padding-bottom: 15px;
  
    float: none;
    width: 94%;
    min-height: 100%;
}
  .rate04 table {
    padding: 5px 5px;
  }
  .rate04 th {
    font-weight: bold;
    font-size: 10px;
  
    border: none;
}
  .rate04 th, .rate04 td {
    display: block;
    width: 100%;
    padding: 10px 0 10px;
  }
  .rate04 td {
    padding-top: 0;
  }
}