@charset "utf-8";

body {background:#eaf6ff;}
.office365 {position:relative; width:450px; margin:100px auto 0; font-family:'NotoR'; background:#fff; border-radius:20px; overflow:hidden; box-shadow:3px 3px 0 0 rgba(0, 0, 0, 0.2);}
.office365 .txt {letter-spacing:-1px; background:#3654b9 url('/images/com/office/pt.png') repeat left top;}
.office365 .txt p {padding:210px 0 50px; text-align:center; font-size:30px; color:#fff; background:url('/images/com/office/icon.png') no-repeat center 50px;}
.office365 .txt p span {font-family:'NotoB';}

.office365 .etc {padding:50px 0; font-size:20px;}
.office365 .etc p.btn {height:60px; width:300px; margin:0 auto; background:#2a384a url('/images/com/office/icon_login.png') no-repeat left top; border-radius:5px;}
.office365 .etc p.btn a {display:block; padding-left:60px; text-align:center; color:#fff; line-height:60px;}
.office365 .etc p.info {margin:40px 25px 0; text-align:center; color:#fff; line-height:50px; border-radius:25px; background:#e33d65;}
.office365 .etc p.info span {padding-left:35px; line-height:50px; background:url('/images/com/office/bu_atte.png') no-repeat left 2px;}

/********** Media quary **********/
@media screen and (max-width:999px) {
	


}

@media screen and (max-width:840px) {


}

@media screen and (max-width:768px) {



}

@media screen and (max-width:640px) {


}

@media screen and (max-width:560px) {	
	
	

}

@media screen and (max-width:480px) {

	.office365 {width:90%; margin:20px auto 0;}
	.office365 .txt p {padding:160px 20px 30px; font-size:24px; word-break:keep-all; background-size:100px; background-position:center 30px;}

	.office365 .etc {padding:30px 0; font-size:18px;}
	.office365 .etc p.btn {width:90%;}
	.office365 .etc p.info {font-size:15px;}
	.office365 .etc p.info span {padding-left:25px; background-size:18px; background-position:left 3px;}


	
}

@media screen and (max-width :380px) {



}