/*=========================================================================

アプリ開発

==========================================================================*/

.appli{
	background-image: url(img/bg.png);
	background-repeat: repeat-x;
	background-position: center top;
}

.appli_box{
	width: 890px;
	padding-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
.appli_box p{
	font-size: 24px;
	padding-top: 30px;
	padding-right: 130px;
	padding-bottom: 10px;
	padding-left: 120px;
}

.appli_box h2{
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 869px;
}
.appli_box .main{
	height: 409px;
	width: 672px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.appli_box ul{
	width: 760px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
}

.appli_box li{
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 50px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.appli .hosoku{
	background-image: url(../lp/asp/img/hosoku_bg.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 111px;
	text-align: center;
	width: auto;
	padding-top: 20px;
}

.appli_btn{
	font-size: 16px;
	background-color: #cedeff;
	padding: 10px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	height: 62px;
}
.appli_btn p{
	font-size: 16px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
}




@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される =============================================*/
    
.appli_box{
	width: 100%;
	padding-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
    
.appli_box h2{
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: calc(100% - 40px);
}
    .appli_box h2 img{
    width: 100%;
        height: auto;
    } 
    
.appli_box .main{
	height: auto;
width: calc(100% - 40px);
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
    .appli_box .main img{
    width: 100%;height: auto;
    } 
    
    
    
.appli_box ul{
width: calc(100% - 40px);
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
    display: flex;
    justify-content: space-between;
    
}

.appli_box li{
	padding: 0px;
	float: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    width: 31%;
    
}
    .appli_box li img{width: 100%;height: auto}
    
    
.appli_box p{
	font-size: 16px;
	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
    
    
    
    
    
    
    
    
/* 768pxまでの幅の場合に適応される =============================================*/
}