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


/* apri_a
----------------------------------------------------*/
.apri_a{
	margin-top: 20px;
  	font-family: 'Noto Sans JP', sans-serif, 'Gothic';
  	font-style: normal;
    display: block;
    margin: 0;
    padding: 10px;	
}
.apri_a{
    clear: both;
    padding-top: 10px;
    font-family: 'Noto Sans JP', sans-serif, 'Gothic';
    font-style: normal;
}
.apri_a .apri_a_box{
    background:url(../img/app-guidance/apri_a_pic01.png) no-repeat;
    background-size: 100%;
    border: solid 1px #dddddd;
    box-shadow: 1px 1px 5px #dddddd;
    margin: 0;
    padding: 20px 20px 20px 10px;
}
.apri_a .apri_a_box .apri_a_text01{
    color: #4c8193;
    font-size: 1.2em;
    line-height: 140%;
    font-weight: bold;
    margin: 0 0 15px 10px;
    padding: 0;
}	
.apri_a .apri_b_box .apri_a_box02{
    margin: 20px 0 0 0;
    padding: 0;
}
.apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 0 10px 0;
    padding: 0;
}
.apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02 .apri_a_box02_text02_icon{
    width: 8%;
    margin: 0;
    padding: 0;
}
.apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02 .apri_a_box02_text02_icon img{
    width: 80%;
    margin: 0;
    padding: 0;
}
.apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02 p{
    width: 92%;
    color: #555555;
    font-size: 0.75em;
    line-height: 150%;
    margin: 0;
    padding: 0 0 0 0;
    font-weight: bold;
}
.apri_a .apri_a_box .apri_a_box03{
    width: 48%;
    margin: 20px 0 0 10px;
	padding: 0;
}
.apri_a .apri_a_box .apri_a_box03 img{
    width: 100%;
}


@media only screen and (max-width: 760px) {
    .apri_a .apri_a_box .apri_a_text01{
        font-size: 5.5vw;
    }	
    .apri_a .apri_b_box .apri_a_box02{
        margin: 10% 0 0 4%;
    }
    .apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02{
        margin: 0 0 5% 0;
    }
    .apri_a .apri_a_box .apri_a_box02 .apri_a_box02_text02 p{
        font-size: 3.5vw;
    }
    .apri_a .apri_a_box .apri_a_box03{
        margin: 20px 0 0 10px;
    }
}




/* apri_b_pc
----------------------------------------------------*/
.apri_b_pc{
	clear: both;
	padding-top: 20px;
  	font-family: 'Noto Sans JP', sans-serif, 'Gothic';
  	font-style: normal;
}
.apri_b_pc .apri_b_box{
	background-color: #cce9f3;
	padding: 20px 50px 0 50px;
}
.apri_b_pc .apri_b_box ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	margin: 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li{
	list-style: none;
	margin: 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li img{
    width: 100%;
	margin: 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box01{
    width: 27%;
}
.apri_b_pc .apri_b_box ul li.apri_b_box01 img{
	vertical-align: bottom;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02{
    width: 50%;
	margin-left: 2%;
	margin-right: 2%;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text01{
	color: #4c8193;
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 10px 0 15px 5px;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	margin: 2% 0 0 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 .apri_b_box02_text02_icon{
    width: 12%;
	margin: 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 .apri_b_box02_text02_icon img{
    width: 90%;
	margin: 0;
	padding: 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 p{
    width: 88%;
	color: #555555;
	font-size: 1.2em;
	margin: 0;
	padding: 1.5% 0 0 0;
}
.apri_b_pc .apri_b_box ul li.apri_b_box03{
    width: 19%;
	margin-top: 8%;
}
.apri_b_pc .apri_b_box ul li.apri_b_box03 .apri_b_box03_btn01{
	margin-bottom: 3%;
	padding: 0;
}
@media only screen and (max-width: 970px) {
	.apri_b_pc .apri_b_box{
		background-color: #cce9f3;
		padding: 15px 40px 0 40px;
	}
	.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text01{
		font-size: 1.4em;
	}
	.apri_b_pc .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 p{
		font-size: 0.9em;
	}
	.apri_b_pc .apri_b_box ul li.apri_b_box03{
		margin-top: 50px;
	}
}
@media only screen and (max-width: 760px) {
	.apri_b_pc {
		display: none;
	}
}


/* apri_b_sp
----------------------------------------------------*/
.apri_b_sp{
	display: none;
}
@media only screen and (max-width: 760px) {
	.apri_b_sp {
		display: block;
        margin: 0;
		padding: 10px;	
	}
	.apri_b_sp{
		clear: both;
		padding-top: 10px;
		font-family: 'Noto Sans JP', sans-serif, 'Gothic';
		font-style: normal;
	}
	.apri_b_sp .apri_b_box{
		background-color: #cce9f3;
        margin: 0;
		padding: 5% 2% 1% 5%;
	}
	.apri_b_sp .apri_b_box .apri_b_text01{
		color: #4c8193;
		font-size: 5vw;
		font-weight: bold;
		margin: 0 0 5% 0;
		padding: 0;
		text-align: center;
	}	
	.apri_b_sp .apri_b_box ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li img{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box01{
		width: 40%;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box01 img{
		vertical-align: bottom;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box02{
		width: 56%;
		margin: 5% 0 0 4%;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 7% 0 2% 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 .apri_b_box02_text02_icon{
		width: 15%;
		margin: 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 .apri_b_box02_text02_icon img{
		width: 75%;
		margin: 0;
		padding: 0;
	}
	.apri_b_sp .apri_b_box ul li.apri_b_box02 .apri_b_box02_text02 p{
		width: 80%;
		color: #555555;
		font-size: 3.5vw;
		margin: 0;
		padding: 0 0 0 0;
        font-weight: bold;
	}
	
	/* button */
	.apri_b_sp .apri_b_box .apri_b_btn{
        clear: both;
	    vertical-align: bottom;
		background-color:#4e8699;
		margin: 0 3% 0 0;
		padding: 0 0 0 0;
        
	}
	.apri_b_sp .apri_b_box .apri_b_btn .apri_b_btn_in{
		box-shadow:3px 3px #265c6e;
		background:url(../img/app-guidance/arrow.png) no-repeat 95% 50%;
	}
	.apri_b_sp .apri_b_box .apri_b_btn p{
		font-weight:bold;
		color:#ffffff;
		font-size: 5vw;
		padding:3% 10px 3% 10px;
		text-align:center;
	}	
}