/*買取りヘッダー画像*/
@media only screen and (max-width: 375px) {
    .form-post {
        text-align: center;
    }
  }



@media  screen and (min-width: 769px) {

.banner_kaitori {
             width: 100%;
             height: 0;
             padding-top: calc(302 / 950 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
             background: url(/public/images/frontend/home/kaitori_head_pc.png) center center / cover no-repeat;
            }

}

@media  screen and (max-width: 768px) {

.banner_kaitori {
             width: 100%;
             height: 0;
             padding-top: calc(592 / 950 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
             background: url(/public/images/frontend/home/kaitori_head_sp.png) center center / cover no-repeat;
            }

}


.tbl_itaku {
margin-right:auto;
margin-left:auto; 
width:100%;
text-align:center;
font-size:1.3em;
border:solid 5px #ffd700;
margin-bottom:30px;
}

.tbl_itaku td{
padding:10px;
}

.membership-wrapper {
    width: 300px !important;
    margin: auto;
    border: 3px solid #1CA3D3;
    text-align: center;
    padding: 10px;
}
.membership-wrapper:hover{
    cursor: pointer;
    background: #1CA3D3;
    color: #fff;
}
.de-fee {
    border: 3px solid #ccc;
}
.de-fee p, .de-require p, .de-test p, .de-follow p {
    margin: 22px;
    font-size: 17px;
}
.de-fee p {
    border-bottom: 1px solid #ccc;
}
.de-fee span{
    margin-right: 20px;
}
.de-require p{
    border-bottom: 1px solid #ccc;
}
.de-follow p{
    border-bottom: 1px solid #ccc;
}
.de-application {
    text-align: center;
    margin-top: 45px !important;
}
.de-application p{
    font-size: 25px;
    font-weight: 600;
}
.de-application a{
    font-size: 20px;
    font-weight: 500;
}

/* modal */
.checkmark-circle {
    width: 150px;
    height: 150px;
    position: relative;
    display: inline-block;
    vertical-align: top;
  }
  .checkmark-circle .background {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #1ab394;
    position: absolute;
  }
  .checkmark-circle .checkmark {
    border-radius: 5px;
  }
  .checkmark-circle .checkmark.draw:after {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    animation-delay: 300ms;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    -moz-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

.checkmark-circle .checkmark:after {
    opacity: 1;
    height: 75px;
    width: 37.5px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    border-right: 15px solid #fff;
    border-top: 15px solid #fff;
    border-radius: 2.5px !important;
    content: '';
    left: 35px;
    top: 80px;
    position: absolute;
  }
  
  @-webkit-keyframes checkmark {
    0% {
      height: 0;
      width: 0;
      opacity: 1;
    }
    20% {
      height: 0;
      width: 37.5px;
      opacity: 1;
    }
    40% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
    100% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
  }
  @-moz-keyframes checkmark {
    0% {
      height: 0;
      width: 0;
      opacity: 1;
    }
    20% {
      height: 0;
      width: 37.5px;
      opacity: 1;
    }
    40% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
    100% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
  }
  @keyframes checkmark {
    0% {
      height: 0;
      width: 0;
      opacity: 1;
    }
    20% {
      height: 0;
      width: 37.5px;
      opacity: 1;
    }
    40% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
    100% {
      height: 75px;
      width: 37.5px;
      opacity: 1;
    }
  }
  
/* end modal */
@media only screen and (max-width: 768px) { 

    .membership-wrapper {
        width: 280px !important;
    }
}
@media only screen and (max-width: 414px) { 

    .membership{
      margin-bottom: 30px;
    }
    .membership-wrapper {
        width: 150px !important;
        height: 150px;
    }
    .membership-wrapper h1 {
        font-size: 18px;
    }
    .membership-wrapper a h3 {
        font-size: 15px;
        color: rgb(28, 163, 211);
        text-decoration: underline;
    }
    .membership-wrapper a span {
        font-size: 10px;
        color: #000;
    }
}
@media only screen and (max-width: 375px) {
  .de-application {
    margin-bottom: 20px;
  }
}