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

html,body{width:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;font-size:16px;line-height:normal;}
a {text-decoration:none;}
img{border:none;vertical-align:bottom;}
p{margin:0;padding:0;}
0ul,li{margin:0;padding:0;list-style-type:none;}
h1,h2,h3,h4,h5,h6 {font-size:16px;line-height:normal;margin:0;padding:0;}


/* PC layout */
@media screen and (min-width:980px) {
	
.pcbr{display:block;}
.sp{display:none;}
	
#afp{
	width:100%;
	color:#2b2b2b;	
	padding-bottom:0;
}	
	
#afp .kv{
	max-width:1200px;
	width: 100%;
	height: auto;
	margin:0 auto 16px;	
	padding-bottom:50px;
	text-align:center;	
}
	
#afp .kv img{
	width: 90%;
	height: auto;
}	
	
#afp .intro{
	max-width:880px;
	margin:0 auto 100px;
	padding:0 50px;
}		
	
#afp .intro .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 38px;
}	

#afp .lead{
	font-size: 1.1rem;
	margin-bottom: 32px;
}
	
#afp .intro .btnbox{	
	display: flex;
	justify-content: center;
	width:66%;
	margin: 0 auto 30px;
}
	
#afp .intro .btnbox .googleplay img{
	width: 290px;
}	
	
#afp .intro .btnbox .appstore img{
	width: 262px;
}		

#afp .intro .download{
	font-size: 1.2rem;
	line-height:2.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 18px;	
}	
	
#afp .intro p{
	font-size: 1.2rem;
	line-height:1.8rem;
}

#afp .intro .attention{
	font-size: 1.0rem;
	text-align: center;
	margin-bottom: 60px;
}

#afp .intro .intro-movie {
	width: 100%;
	margin: 0 auto 0;
	aspect-ratio: 16 / 9;
}

#afp .intro .intro-movie iframe {
	width: 100%;
	height: 100%;
}	
	
#afp .intro .gototranscript{
	font-size: 1.0rem;
	text-align: left;
	margin-top: 10px;
}	

#afp .feature{
	max-width:880px;
	margin:0 auto 100px;
	padding:0 50px;
}
	
#afp .feature .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 30px;
}
	
#afp .feature .point-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .feature .point-wrap .point .sttl{
	font-weight: bold;
	margin-bottom: 14px;
}		
	
#afp .feature .point{
	width: 30%;
}
	
#afp .feature .point img{
	width: 100%;
	margin-bottom: 24px;
	border-radius: 50%;
}	

#afp .recommend{
	max-width:880px;
	margin:0 auto 100px;
	padding:0 50px;
}	
	
#afp .recommend .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .recommend .user-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .recommend .user-wrap2{
	width: 100%;
	display: flex;
	justify-content: space-between;
}		
	
#afp .recommend .user{
	width: 48.5%;
	margin-bottom: 34px;
}
	
#afp .recommend .user ul{
	padding: 65px 0 0 20px;
	margin: 0;
}
	
#afp .recommend .user li{
	font-size: 1.15rem;
}	
	
#afp .recommend .user img{
	width: 100%;
	border-radius: 0%;
}		
	
#afp .recommend .appeal{
	font-size: 1.2rem;
	text-align: center;
	margin-top: 10px;
}	
	
#afp .about{
	max-width:880px;
	margin:0 auto 46px;
	padding:0 50px;
}
	
#afp .about .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .about .mocopi-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .about .mocopi{
	width: 48.5%;
}
	
#afp .about .mocopi img{
	width: 100%;
	border-radius: 0%;
}	

#afp .about .button-area{
	margin-top: 28px;
	text-align: left;
}	
	
#afp .about .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	
	
#afp .using{
	max-width:880px;
	margin:0 auto 80px;
	padding:0 50px;
}

#afp .using .preface{
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 64px;
}
		
#afp .using .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	

#afp .using .centralspt-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .using .centralspt{
	width: 48.5%;
	text-align: center;
}
	
#afp .using .centralspt img{
	width: 70%;
	margin-bottom: 14px;
}	
	
#afp .using .centralspt .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 10px 74px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 32px 2px;
    cursor: pointer;
}			
	
#afp .inquiry{
	max-width:880px;
	margin:0 auto 44px;
	padding:0 50px;
}
	
#afp .inquiry .catch{
	text-align: center;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 10px;	
}	
	
#afp .inquiry .inquiry-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .inquiry .inquiry{
	width: 48.5%;
}
	
#afp .inquiry .inquiry img{
	width: 100%;
	border-radius: 0%;
}	

#afp .inquiry .button-area{
	width: 100%;
	margin-top: 28px;
	text-align: center;
}	
	
#afp .inquiry .button {
	width: 70%;
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	
	
#afp .bottom{
	max-width:880px;
	margin:0 auto 90px;
	padding:0 50px;
}
	
#afp .bottom .preface{
	text-align: center;
	font-size: 1.2rem;
}		

#afp .transcript{
	max-width:880px;
	margin:36px auto 72px;
	padding:0 50px;
}	
	
#afp .transcript p{
	margin:0 auto 32px;
}		

#afp .transcript .gototop{
		margin:50px auto 50px;	
}	
	
#afp .transcript a{
	text-decoration: none;
	font-size: 0.9rem;	
	color: #ffffff;
	background: #34568e;
	padding: 14px;
}
	
}





/* Tablet layout */
@media screen and (min-width:640px) and (max-width:979px) {
	
.pcbr{display:block;}
.pcbr-m{display:block;}
.sp{display:none;}
	
#afp{
	width:100%;
	color:#2b2b2b;
	padding-bottom:0;
}
	
#afp .kv{
	max-width:1200px;
	width: 100%;
	height: auto;
	margin:0 auto 16px;	
	padding-bottom:50px;
	text-align:center;	
}
	
#afp .kv img{
	width: 100%;
	height: auto;
}	
	
#afp .intro{
	max-width:880px;
	margin:0 auto 100px;
	padding:0 50px;
}		
	
#afp .intro .catch{
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 38px;
}	

#afp .lead{
	font-size: 1.1rem;
	margin-bottom: 32px;
}
	
#afp .intro .btnbox{	
	display: flex;
	justify-content: center;
	width:63%;
	margin: 0 auto 30px;
}
	
#afp .intro .btnbox .googleplay img{
	width: 260px;
}	
	
#afp .intro .btnbox .appstore img{
	width: 240px;
}		

#afp .intro .download{
	font-size: 1.2rem;
	line-height:2.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 18px;	
}	
	
#afp .intro p{
	font-size: 1.2rem;
	line-height:1.8rem;
}

#afp .intro .attention{
	font-size: 1.0rem;
	text-align: center;
	margin-bottom: 60px;
}

#afp .intro .intro-movie {
	width: 100%;
	margin: 0 auto 0;
	aspect-ratio: 16 / 9;
}

#afp .intro .intro-movie iframe {
	width: 100%;
	height: 100%;
}
	
#afp .intro .gototranscript{
	font-size: 1.0rem;
	text-align: left;
	margin-top: 10px;
}	

#afp .feature{
	max-width:880px;
	margin:0 auto 100px;
	padding:0 50px;
}
	
#afp .feature .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 30px;
}
	
#afp .feature .point-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .feature .point-wrap .point .sttl{
	font-weight: bold;
	margin-bottom: 14px;
}		
	
#afp .feature .point{
	width: 30%;
}
	
#afp .feature .point img{
	width: 100%;
	margin-bottom: 24px;
	border-radius: 50%;
}	

#afp .recommend{
	max-width:880px;
	margin:0 auto 86px;
	padding:0 50px;
}	
	
#afp .recommend .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .recommend .user-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .recommend .user-wrap2{
	width: 100%;
	display: flex;
	justify-content: space-between;
}		
	
#afp .recommend .user{
	width: 48.5%;
	margin-bottom: 34px;
}
	
#afp .recommend .user ul{
	padding: 65px 0 0 20px;
	margin: 0;
}
	
#afp .recommend .user li{
	font-size: 1.15rem;
}	
	
#afp .recommend .user img{
	width: 100%;
	border-radius: 0%;
}		
	
#afp .recommend .appeal{
	font-size: 1.2rem;
	text-align: center;
	margin-top: 10px;
}	
	
#afp .about{
	max-width:880px;
	margin:0 auto 54px;
	padding:0 50px;
}
	
#afp .about .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .about .mocopi-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .about .mocopi{
	width: 48.5%;
}
	
#afp .about .mocopi img{
	width: 100%;
	border-radius: 0%;
}	

#afp .about .button-area{
	margin-top: 28px;
	text-align: left;
}	
	
#afp .about .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	
	
#afp .using{
	max-width:880px;
	margin:0 auto 60px;
	padding:0 50px;
}

#afp .using .preface{
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 40px;
}	
	
#afp .using .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	

#afp .using .centralspt-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .using .centralspt{
	width: 48.5%;
	text-align: center;
}
	
#afp .using .centralspt img{
	width: 70%;
	margin-bottom: 14px;
}	
	
#afp .using .centralspt .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 10px 74px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 32px 2px;
    cursor: pointer;
}		

#afp .inquiry{
	max-width:880px;
	margin:0 auto 40px;
	padding:0 50px;
}
	
#afp .inquiry .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 8px;	
}	
	
#afp .inquiry .inquiry-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}	
	
#afp .inquiry .inquiry{
	width: 48.5%;
}
	
#afp .inquiry .inquiry img{
	width: 100%;
	border-radius: 0%;
}	

#afp .inquiry .button-area{
	margin-top: 28px;
	text-align: left;
}	
	
#afp .inquiry .button {
	width: 80%;
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	

#afp .bottom{

	max-width:880px;
	margin:0 auto 80px;
	padding:0 50px;
}
	
#afp .bottom .preface{
	text-align: center;
	font-size: 1.2rem;
}		

#afp .transcript{
	max-width:880px;
	margin:36px auto 72px;
	padding:0 50px;
}	
	
#afp .transcript p{
	margin:0 auto 32px;
}		

#afp .transcript .gototop{
		margin:50px auto 50px;	
}	
	
#afp .transcript a{
	text-decoration: none;
	font-size: 0.9rem;	
	color: #ffffff;
	background: #34568e;
	padding: 14px;
}	
	
}





/* SP layout */
@media screen and (max-width:639px) and (orientation: portrait){
	
.spbr{display:block;}
.pc{display:none;}

#afp{
	width:100%;
	color:#2b2b2b;
	padding-bottom:0;
	margin: 0 auto;
}
	
#afp .kv{
	width:100%;
	height: auto;
	padding-bottom:5%;
	margin-bottom: 4%;
}
	
#afp .kv img{
	width: 100%;
	height: auto;
}		

#afp .intro{
	max-width:880px;
	margin:0 auto 80px;
	padding:0 50px;
}		
	
#afp .intro .catch{
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 38px;
}	

#afp .lead{
	font-size: 1.1rem;
	margin-bottom: 32px;
}
	
#afp .intro .btnbox{	
	display: flex;
	justify-content: space-between;
	margin: 0 auto 30px;
	text-align: center;
}
	
#afp .intro .btnbox .googleplay img{
	width: 92%;
}	
	
#afp .intro .btnbox .appstore img{
	width: 95.5%;
}		

#afp .intro .download{
	width: 100%;
	font-size: 1.2rem;
	line-height:2.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 18px;	
}	
	
#afp .intro p{
	font-size: 1.2rem;
	line-height:1.8rem;
}

#afp .intro .attention{
	font-size: 1.0rem;
	text-align: center;
	margin-bottom: 60px;
}

#afp .intro .intro-movie {
	width: 100%;
	margin: 0 auto 0;
	aspect-ratio: 16 / 9;
}

#afp .intro .intro-movie iframe {
	width: 100%;
	height: 100%;
}	

#afp .intro .gototranscript{
	font-size: 1.0rem;
	text-align: left;
	margin-top: 10px;
}
	
#afp .feature{
	max-width:90%;
	margin:0 auto 80px;
	padding:0 50px;
}
	
#afp .feature .catch{
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 30px;
}
	
#afp .feature .point-wrap{
	width: 100%;
	display: block;
	justify-content: space-between;
}	
	
#afp .feature .point-wrap .point .sttl{
	font-weight: bold;
	font-size: 1.3rem;
	margin-bottom: 14px;
}		
	
#afp .feature .point{
	width: 96%;
	margin: 0 auto 36px;
}
	
#afp .feature .point p{
	font-size: 1.15rem;
}	
	
#afp .feature .point img{
	width: 100%;
	margin-bottom: 24px;
	border-radius: 50%;
}	


#afp .recommend{
	max-width:90%;
	margin:0 auto 80px;
	padding:0 50px;
}	
	
#afp .recommend .catch{
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .recommend .user-wrap{
	width: 100%;
	display: flex;
	flex-direction: column;	
}
	
#afp .recommend .user-wrap2{
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}	
	
#afp .recommend .user{
	margin-bottom: 24px;
}
	
#afp .recommend .user ul{
	padding: 0 0 15px 20px;
	margin: 0;
}
	
#afp .recommend .user li{
	font-size: 1.15rem;
}	
	
#afp .recommend .user img{
	width: 100%;
	border-radius: 0%;
}		
	
#afp .recommend .appeal{
	font-size: 1.2rem;
	text-align: center;
	margin-top: 10px;
}	

	
#afp .about{
	width:90%;
	margin:0 auto 100px;
}
	
#afp .about .catch{
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .about .mocopi-wrap{
	width: 100%;
	display: block;
	margin: 0 auto;
}	
	
#afp .about .mocopi{
	width: 90%;
	margin: 0 auto;
}
	
#afp .about .mocopi img{
	width: 100%;
	border-radius: 0%;
}	

#afp .about .button-area{
	margin-top: 28px;
	text-align: center;
}	
	
#afp .about .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	
	
#afp .using{
	max-width:90%;
	margin:0 auto 80px;
	padding:0 50px;
}

#afp .using .preface{
	text-align: left;
	font-size: 1.2rem;
	margin-bottom: 64px;
}	
	
#afp .using .catch{
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	

#afp .using .centralspt-wrap{
	width: 100%;
	display: block;
}	
	
#afp .using .centralspt{
	width: 100%;
	text-align: center;
}
	
#afp .using .centralspt img{
	width: 70%;
	margin-bottom: 14px;
}	
	
#afp .using .centralspt .button {
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 10px 74px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 32px 2px;
    cursor: pointer;
}		

#afp .inquiry{
	width:90%;
	margin:0 auto 100px;
}
	
#afp .inquiry .catch{
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 30px;	
}	
	
#afp .inquiry .inquiry-wrap{
	width: 100%;
	display: block;
	margin: 0 auto;
}	
	
#afp .inquiry .inquiry{
	width: 90%;
	margin: 0 auto;
}
	
#afp .inquiry .inquiry img{
	width: 100%;
	border-radius: 0%;
}	

#afp .inquiry .button-area{
	margin-top: 28px;
	text-align: center;
}	
	
#afp .inquiry .button {
	width: 50%;
    background-color: #D9D9D9; 
    border: none;
	border-radius: 30px;	
    color: #0e0e0e;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
}	
	
#afp .bottom{
	max-width:90%;
	margin:0 auto 100px;
	padding:0 50px;
}
	
#afp .bottom .preface{
	text-align: center;
	font-size: 1.2rem;
}
	
#afp .transcript{
	max-width:90%;
	margin:36px auto 72px;
	padding:0 50px;
}	
	
#afp .transcript p{
	margin:0 auto 32px;
}		

#afp .transcript .gototop{
		margin:50px auto 50px;	
}	
	
#afp .transcript a{
	text-decoration: none;
	font-size: 0.9rem;	
	color: #ffffff;
	background: #34568e;
	padding: 14px;
}	

	
}