/*会員登録　　For PC*/
@media  screen and (min-width: 769px) {
.contact-itaku { 
      
        margin: 10px 0px;	              
	width: 75%;		                
	border-radius: 7px;	                
	padding: 15px;		                
	border: 5px solid #ff69b4;	
	text-align: center;	               
        font-family:sans-serif;
        margin-left:auto;
        margin-right:auto;
        background-image:url(/public/images/frontend/home/itaku_ope_4.png);
        background-position:left bottom;
        background-repeat:no-repeat;
        background-size:17% auto;
        }

.contact-itaku:hover{ 
        background-color:#FFD5EC;
        }

.contact-itaku a{
        color: #ff0000;
        font-size:3em;
        font-weight : bold;          
        }

}

/*ヘッダー画像　For iphone*/
@media  screen and (max-width: 768px) {  

.contact-itaku { 
      
        margin: 10px 0px;	              
	width: 75%;		                
	border-radius: 7px;	                
	padding: 15px;		                
	border: 5px solid #ff69b4;	
	text-align: center;	               
        font-family:sans-serif;
        margin-left:auto;
        margin-right:auto;
        background-image:url(/public/images/frontend/home/itaku_ope_4.png);
        background-position:left bottom;
        background-repeat:no-repeat;
        background-size:25% auto;
        }

.contact-itaku:hover{ 
        background-color:#FFD5EC;
        }

.contact-itaku a{
        color: #ff0000;
        font-size:3em;
        font-weight : bold;          
        }


}



.itaku-main {
         font-size: 1.4em;
         padding:20px;
         
}

.i-title h4{
         width: 100%;
         margin-bottom:10px;
         background-color: #ffa500;
         border-radius: 5px; /* 半径が8pxの角丸 */
         padding:10px;
         color: #000000;
         font-size: 1.5rem;
}

.outer{
         display: table;
         width: 100%;
}

.inner{
           display: table-cell;
           vertical-align: middle;           
}

/*ヘッダー画像　For PC*/
@media  screen and (min-width: 769px) {     
       
.banner_itaku {
             width: 100%;
             height: 0;
             padding-top: calc(350 / 950 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
             background: url(/public/images/frontend/home/header_itaku_pc.png) center center / cover no-repeat;
            }

}

/*ヘッダー画像　For iphone*/
@media  screen and (max-width: 768px) {  
 
.banner_itaku {
             width: 100%;
             height: 0;
             padding-top: calc(500 / 950 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
             background: url(/public/images/frontend/home/header_itaku_sp.png) center center / cover no-repeat;
            }

}

.tbl_itaku {
margin-right:auto;
margin-left:auto; 
width:100%;
text-align:center;
font-size: 1.5em;
/*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;
  }
}