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


/* service.html */
#service{width: 100%; background-color: #ccc;}
.service > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.service h3{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.service td{vertical-align: top;}
.service span{color: #c00;}

@media screen and (min-width: 1001px) {
  #service{padding: 80px 0;}
  .service{max-width: 1200px; min-width: 1000px; margin: 0 auto;}
  .service > div{width: 94%; padding: 65px 0;}
  .service h3{font-size: 25px; text-align: center;}
  .service table{width: 80%; margin: 40px auto 0 auto;}
  .service td{font-size: 16px; line-height: 180%;}
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  #service{padding: 60px 0;}
  .service > div{width: 90%; padding: 60px 0;}
  .service h3{font-size: 25px; text-align: center;}
  .service table{width: 84%; margin: 40px auto 0 auto;}
  .service td{font-size: 16px; line-height: 180%;}
}

@media screen and (max-width: 700px) {
  #service{padding: 60px 0;}
  .service > div{width: 90%; padding: 40px 0;}
  .service h3{font-size: 20px; text-align: center;}
  .service table{width: 90%; margin: 30px auto 0 auto;}
  .service td{font-size: 15px; line-height: 160%;}
}





/* registration01, 02 */
#registration01, #registration02{width: 100%; background-color: #ccc;}
.registration > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.registration h3, .registration h4{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.regist02 input{padding: 12px; border: 1px solid #ccc; border-radius: 5px;}
.regist02 p, .regist03{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.regist02 select{-webkit-appearance: none; appearance: none; background-image: url("../images/idx_search03.gif"); background-repeat: no-repeat; background-position: right 12px center; background-color: #fff; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 150px;}
.regist06_w{width: 154px; margin: 40px auto 20px auto;}
.regist06 input{background-color: #fff; border: 1px solid #ccc; border-radius: 77px; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; width: 154px; height: 154px; cursor: pointer; color: #000;}
.regist07{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; text-align: center;}


@media screen and (min-width: 1001px) {
  #registration01, #registration02{padding-bottom: 80px;}
  .registration{max-width: 1200px; min-width: 1000px; margin: 0 auto;}
  .registration > div{width: 94%; padding: 65px 0 45px 0;}
  .registration h3{font-size: 25px; text-align: center;}
  
  .form_wrap01_w70{display: none;}
  .form_wrap01_w120{width: 700px; margin: 60px auto 0 auto;}
  .form_wrap01_w120 .regist01{font-size: 22px; float: left; padding: 10px 20px 10px 0; text-align: right; width: 150px;}
  .regist02{float: left; padding-right: 20px;}
  .form_wrap01_w120 .regist02 input{font-size: 18px; width: 400px;}
  .regist02 p{font-size: 16px; padding: 8px 0 24px 0;}
  .regist03{color: #c00; font-size: 16px; padding: 12px 0; float: left;}
  .regist04{clear: both;}
  
  .form_wrap02_w70, .form_wrap02_w100{display: none;}
  .form_wrap02_w120{width: 900px; margin: 60px auto 0 auto;}
  .form_wrap02_w120 .regist01{font-size: 22px; float: left; padding: 10px 20px 10px 0; text-align: right; width: 250px;}
  .form_wrap02_w120 .regist02 input, .form_wrap02_w120 .regist02 select{font-size: 18px;}
  .form_wrap02_w120 .regist02_1 input{width: 500px;}
  .form_wrap02_w120 .regist02_2 input{width: 150px;}
  .form_wrap02_w120 .regist02_3 input{width: 120px;}
  .form_wrap02_w120 .regist02 select{background-size: 27px auto;}
  .form_wrap02_w120 .regist05{padding-bottom: 24px;}
  
  div{
    &.regist06 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 24px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  #registration01, #registration02{padding-bottom: 60px;}
  .registration > div{width: 90%; padding: 60px 0;}
  .registration h3{font-size: 25px; text-align: center;}
  
  .form_wrap01_w120{display: none;}
  .form_wrap01_w70{width: 400px; margin: 60px auto 0 auto;}
  .form_wrap01_w70 .regist01{float: left; font-size: 22px; padding: 0 15px 8px 0;}
  .form_wrap01_w70 .regist03{float: left; color: #c00; font-size: 16px; padding: 3px 0 11px 0;}
  .form_wrap01_w70 .regist02 input{font-size: 18px; width: 400px;}
  .form_wrap01_w70 .regist02 p{font-size: 16px; padding: 8px 0 24px 0;}
  .form_wrap01_w70 .regist04{clear: both;}

  .form_wrap02_w70, .form_wrap02_w120{display: none;}
  .form_wrap02_w100{width: 500px; margin: 60px auto 0 auto;}
  .form_wrap02_w100 .regist01{font-size: 22px; float: left; padding: 0 15px 8px 0;}
  .form_wrap02_w100 .regist03{float: left; color: #c00; font-size: 16px; padding: 3px 0 11px 0;}
  .form_wrap02_w100 .regist02 input, .form_wrap02_w100 .regist02 select{font-size: 18px;}
  .form_wrap02_w100 .regist02_1 input{width: 500px;}
  .form_wrap02_w100 .regist02_2 input{width: 150px;}
  .form_wrap02_w100 .regist02_3 input{width: 120px;}
  .form_wrap02_w100 .regist02 select{background-size: 24px auto;}
  .form_wrap02_w100 .regist02 p{font-size: 16px; padding: 8px 0 24px 0;}
  .form_wrap02_w100 .regist05{padding-bottom: 24px;}
  .form_wrap02_w100 .regist04{clear: both;}
  
  div{
    &.regist06 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 700px) {
  #registration01, #registration02{padding-bottom: 60px;}
  .registration > div{width: 90%; padding: 40px 0;}
  .registration h3{font-size: 20px; text-align: center;}

  .form_wrap01_w120{display: none;}
  .form_wrap01_w70{width: 80%; margin: 40px auto 0 auto;}
  .regist01{float: left; font-size: 20px; padding: 0 15px 6px 0;}
  .regist03{float: left; color: #c00; font-size: 14px; padding: 3px 0 9px 0; float: left;}
  .regist02{padding-right: 20px;}
  .regist02 input{font-size: 16px; width: 100%;}
  .regist02 p{font-size: 14px; padding: 6px 0 20px 0;}
  .regist04{clear: both;}

  .form_wrap02_w100, .form_wrap02_w120{display: none;}
  .form_wrap02_w70{width: 80%; margin: 40px auto 0 auto;}
  .form_wrap02_w70 .regist01{font-size: 20px; float: left; padding: 0 15px 6px 0;}
  .form_wrap02_w70 .regist03{float: left; color: #c00; font-size: 14px; padding: 3px 0 9px 0;}
  .form_wrap02_w70 .regist02 input, .form_wrap02_w70 .regist02 select{font-size: 16px;}
  .form_wrap02_w70 .regist02_1 input{width: 80%;}
  .form_wrap02_w70 .regist02_2 input{width: 150px;}
  .form_wrap02_w70 .regist02_3 input{width: 80px;}
  .form_wrap02_w70 .regist02 select{background-size: 20px auto;}
  .form_wrap02_w70 .regist02 p{font-size: 16px; padding: 8px 0 24px 0;}
  .form_wrap02_w70 .regist05{padding-bottom: 24px;}
  .form_wrap02_w70 .regist04{clear: both;}
  
  div{
    &.regist06 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}






/* service_error.html */
.service_error{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.service_error h4{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.error01{margin: 15px 0;}
.error01 span{display: block; font-weight: 700; padding-bottom: 8px;}
.error02{color: #06c; text-decoration: underline; opacity: 1; transition: .5s;}
.error02:hover{opacity: 0.6; transition: .5s;}
.error03{border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px;}

@media screen and (min-width: 1001px) {
  .service_error{width: 740px; margin: 60px auto 0 auto;}
  .service_error h4{font-size: 22px;}
  .error01, .error03 p{font-size: 16px;}
  .error03 p{padding-bottom: 8px;}
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  .service_error{width: 80%; margin: 60px auto 0 auto;}
  .service_error h4{font-size: 22px;}
  .error01, .error03 p{font-size: 16px;}
  .error03 p{padding-bottom: 8px;}
}

@media screen and (max-width: 700px) {
  .service_error{width: 90%; margin: 40px auto 0 auto;}
  .service_error h4{font-size: 20px;}
  .error01, .error03 p{font-size: 14px;}
  .error03 p{padding-bottom: 6px;}
}





/* service_thanks.html */
.service_thanks{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.service_thanks h4{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
.thanks01{margin: 30px 0;}
.thanks02{color: #06c; text-decoration: underline; opacity: 1; transition: .5s;}
.thanks02:hover{opacity: 0.6; transition: .5s;}

@media screen and (min-width: 1001px) {
  .service_thanks{width: 740px; margin: 60px auto 0 auto;}
  .service_thanks h4{font-size: 22px;}
  .thanks01, .thanks02{font-size: 16px;}
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  .service_thanks{width: 80%; margin: 60px auto 0 auto;}
  .service_thanks h4{font-size: 22px;}
  .thanks01, .thanks02{font-size: 16px;}
}

@media screen and (max-width: 700px) {
  .service_thanks{width: 90%; margin: 40px auto 0 auto;}
  .service_thanks h4{font-size: 20px;}
  .thanks01, .thanks02{font-size: 14px;}
}





/* service_confirm.html */
.service_confirm, .confirm02{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.confirm03{clear: both;}
.confirm04_w{width: 154px; margin: 40px auto 0 auto;}
.confirm04 input{background-color: #fff; border: 1px solid #ccc; border-radius: 77px; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; width: 154px; height: 154px; cursor: pointer; color: #000;}


@media screen and (min-width: 1001px) {
  .service_confirm{font-size: 16px; width: 740px; margin: 40px auto 0 auto;}
  .confirm_wrap01{width: 740px; margin: 40px auto 60px auto;}
  .confirm_wrap01 > div, .confirm_wrap02_w120 > div{padding-bottom: 25px;}
  .confirm_wrap02_w120{width: 740px; margin: 40px auto 0 auto;}
  .confirm_wrap02_w70{display: none;}
  .confirm01{float: left; font-size: 22px; line-height: 22px; padding-right: 30px; text-align: right; width: 300px;}
  .confirm02{float: left; font-size: 18px; line-height: 22px;}

  div{
    &.confirm04 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 24px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  .service_confirm{font-size: 16px; width: 80%; margin: 40px auto 0 auto;}
  .confirm_wrap01{width: 80%; margin: 40px auto 60px auto;}
  .confirm_wrap01 > div, .confirm_wrap02_w120 > div{padding-bottom: 25px;}
  .confirm_wrap02_w120{width: 80%; margin: 40px auto 0 auto;}
  .confirm_wrap02_w70{display: none;}
  .confirm01{float: left; font-size: 22px; line-height: 22px; padding-right: 30px; text-align: right; width: 300px;}
  .confirm02{float: left; font-size: 18px; line-height: 22px;}

  div{
    &.confirm04 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 700px) {
  .service_confirm{font-size: 14px; width: 90%; margin: 30px auto 0 auto;}
  .confirm_wrap01{width: 80%; margin: 20px auto 60px auto;}
  .confirm_wrap01 > div, .confirm_wrap02_w70 > div{padding-bottom: 20px;}
  .confirm_wrap02_w70{width: 80%; margin: 20px auto 0 auto;}
  .confirm_wrap02_w120{display: none;}
  .confirm01{font-size: 20px; padding-bottom: 6px;}
  .confirm02{font-size: 16px; padding-left: 20px;}

  div{
    &.confirm04 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}