/* CSS Document */



@media screen, print {
 
/* 
======================
フォントの設定
======================
*/
 
/* 文字色 */    
    .font-blue{
        color: #2bbad8;
    }
      

/*    
======================
class main の設定
======================
*/    
    .main{
        background-image: url(../img/introduce/img-introduce-bgimg.png);
        text-align: center;
        padding-bottom: 30px;
        font-weight: bold;
    }
    .main p{
        display: inline;
        
    }
    .main-blue{
        padding: 5px 40px;
        margin-right: 10px;
        font-weight: bold;
        color: #FFFFFF;
        width: 100px;
        border-radius: 10px;
        background-color: #2bbad8;
    }
    
 /*    
======================
class secondary の設定
======================
*/     
    .secondary{
        padding: 20px 0;
        text-align: center;
        border-radius: 10px;
        border: 2px solid #f39800;
        background-color: #fffaf1;
    } 
    .secondary h3{
        font-size: 22px;
        font-weight: bold;
        line-height: 1.5em;
    }
    
 /*    
======================
class tertiary の設定
======================
*/  
    .tertiary {
        padding: 2rem 1rem;
    }  
	
	.tertiary .h3.tertiary-blue{
		margin-left: -1rem;
	}
	
    .tertiary-blue {
        text-align: center;
        font-size: 18px;
        padding: 5px 40px;
        margin-right: 10px;
        font-weight: bold;
        color: #FFFFFF;
        width: 280px;
        border-radius: 10px;
        background-color: #2bbad8;
    }
    
    .tertiary img{
        vertical-align: baseline;
    } 
    .tertiary-link a{
        display: block;
        font-weight: bold;
        border: 2px solid #0063AD;
        border-radius: 10px;
        padding: 5px 20px;
        width: 320px;
        color: #0063AD;
        transition: 0.5s ;
		margin: 1.5rem auto 0;
    } 
     .tertiary a:hover{
        color: #2bbad8;
        text-decoration: none;
        border: 2px solid #2bbad8;
    } 
 /* 
======================
quaternaryの設定
======================
*/

	.quaternary .nav{
		width: 90%;
		justify-content: space-between;
		margin: 0 auto;
	}
    .flow-p{
        padding: 15px 0 10px 70px;
        color: #0065b1;
        font-size: 20px;
        font-weight: bold;
    }
    .step{
        height: 300px;
        width: 225px;
    }
    .step-1{
        background-image: 
            url(../img/introduce/img-introduce-step1.png),
            url(../img/introduce/img-introduce-step1-a.png);
        background-repeat: 
            no-repeat,
            no-repeat;
        background-position:
        0% 0%,
        50% 100%;
    }
    .step-2{
        background-image:
            url(../img/introduce/img-introduce-step2.png),
            url(../img/introduce/img-introduce-step2-a.png);
        background-repeat:
            no-repeat,
            no-repeat;
        background-position:
            0% 0%,
            50% 100%;
    }
    .step-3{
        background-image:
            url(../img/introduce/img-introduce-step3.png),
            url(../img/introduce/img-introduce-step3-a.png);
        background-repeat:
            no-repeat,
            no-repeat;
        background-position:
            0% 0%,
            50% 100%;
    }
    .square{
        width: 20px;
        height: 300px;
        background-image: url(../img/introduce/img-introduce-square.png);
        background-repeat: no-repeat;
        background-position: 0 50%;
    }
 /* 
======================
titleの設定
======================
*/
    .introduce-t{
		font-size: 22px;
		position: relative;
		padding: 10px 20px;
		background: #2bbad8;
		border-radius: 10px;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 2rem;
    }
    
    .introduce-t:after{
        position: absolute;
        content: '';
        top: 100%;
        left: 30px;
        border: 10px solid transparent;
        border-top: 15px solid #2bbad8;
        width: 0;
        height: 0;
    }
    
 /*    
======================
class detailの設定
======================
*/     
    .detail{
        padding: 1.5rem;
        border: 2px solid #2bbad8;
        background-color: #ecfbfe;
		width: 90%;
		margin: 0 auto;
    }
	.detail .h3.detail-info{
		text-align: center;
	}
	
    .detail p {
        color: #2bbad8;
        font-weight: bold;
    }
    .detail ul {
        margin: 0 0 0 1em;
        padding: 0;
    }
    .detail-info {
        list-style:none;
        color: #2bbad8;
        font-weight: bold;
        padding-left: 0;
    }
	
}
/* タブレット （オーバーライド）*/
@media (max-width: 991px) and (min-width: 768px) {

}

/* スマホ （オーバーライド）*/
@media (max-width: 768px) {
	
}

/* スマホ （オーバーライド）*/
@media (max-width: 767px) {
    
 /* 
======================
quaternaryの設定
======================
*/
   .step{
        width: 100%;
    }
   .square{
        width: 100%;
        height: 20px;
        background-image: url(../img/introduce/img-introduce-square2.png);
        background-repeat: no-repeat;
        background-position:center;
	    margin: 1rem auto;
    }   

}
/* 0～500ピクセル（スマホ用）*/
@media screen and (max-width:500px) { 
    
/*    
======================
class main の設定
======================
*/     
    
     .main p{
        display: block;
        margin: 0 auto 10px auto;
    }
    
     .main-blue{
        padding: 5px 40px;
        font-weight: bold;
        color: #FFFFFF;
        width: 250px;
        border-radius: 10px;
        background-color: #2bbad8;
    }
    
 /*    
======================
class secondary の設定
======================
*/     
 
    .secondary{
    padding: 20px 0 10px 0;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #f39800;
    background-color: #ffaf1;
    }
    .secondary h3{
        font-size: 16px;
        padding-bottom: 10px;
    }    
    
    .secondary img{
        padding-bottom: 10px;
    }   
    
 /*    
======================
class tertiary の設定
======================
*/  
	
	.tertiary .h3.tertiary-blue{
		margin-left: 0;
	}
    .tertiary-blue{
        width: 100%;
    }    
     .tertiary-link a{
        width: 100%;
         text-align: center;
    } 
	
}