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

/*-----------------  共通部分  -----------------*/
body,html{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}
.wrapper{
	width: 1280px;
	margin: 0 auto;
}
.txt_left{
	text-align: left;
}

/*--- ノートパソコン  ---*/
@media screen and (min-width:768px)and (max-width:1440px) {
	.wrapper{
		width: 960px;
	}
}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.wrapper{
		width: 90%;
		margin: 0 auto;
	}
}




/*-----------------  メインビジュアル  -----------------*/
.main{
	width: 100%;
	background: url(../img/bg_main.png) no-repeat;
	background-size: cover;
	padding-top: 120px;
	border-bottom: 3px solid #fff;
}
.lr_box{
	display: flex;
}
.copy_box{
	padding-top: 20px;
}
.t_box{
	padding-bottom: 60px;
}
.b_box{
	display: flex;
	padding-bottom: 40px;
}
.qr{
	width: 130px;
	margin-right: 30px;
}
.qr img{
	width: 100%
}
.dl_btn{
	display: flex;
}
.android{
	/* width: 135px; */
	margin-right: 15px;
}
.android img{
	height: 40px;
	/* width: 100%; */
}
.apple{
	/* width: 135px; */
	align-self:center;
}
.apple img{
	/* width: 100%; */
	height: 40px;
}
.dl_txt p{
	font-weight: bold;
	margin: 5px 0;
	font-size: 14px;
	line-height: 16px;
}
.r_box{
	position: relative;
	width: 100%;
}
.r_box img{
	position: absolute;
	right: 0;
	bottom: 0;
}
/*--- ノートパソコン  ---*/
@media screen and (min-width:768px)and (max-width:1440px) {
	.t_box{
		width: 60%;
	}
	.title_box img{
	 /*width: 100%;*/
	}
	.r_box img{
		width: 95%;
	}
	.dl_txt p{
		font-size: 11px;
	}
	.qr{
		margin-right: 20px;
	}
}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.main{
		padding-top: 60px;
	}
	.lr_box{
		flex-wrap: wrap;
	}
	.l_box{
		width: 100%;
	}
	.copy_box{
		width: 80%;
		padding-top: 35px;
	}
	.t_box{
		width: 100%;
		padding-bottom: 30px;
	}
	.t_box img{
		width: 100%;
	}
	.b_box{
		text-align: center;
		width: 100%;
	}
	.dl_btn{
		justify-content: space-between;
	}
	.dl{
		margin: 0 auto;
	}
	.qr{
		display: none;
	}
	.android{
		width: 52%!important;
		margin-right: 5%;
	}
	.apple{
		width: 53%!important;
	}
	.sp_none{
		display: none;
	}
	.r_box{
		width: auto;
		margin: 0 auto;
	}
	.r_box img{
		position: relative;
		vertical-align: bottom;
		width: 100%;
	}
}


/*-----------------  はじめに  -----------------*/

.fast_contents{
	background-color: #F0F0F0;
	padding: 80px 0;
}
.center_txt{
	margin: 0 auto;
}
.center_txt p{
	text-align: center;
	line-height: 30px;
}
.page_link{
	width: 200px;
	background-color: #ff8a46;
	border-radius: 5px;
	text-align: center;
	color: #fff;
}
.page_link a{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 10px 0;
}
.page_link:hover{
	background-color:#ffa470;
	transition-property: all;
	transition: 0.3s linear;
}
.page_link:first-child{
	margin-right: 40px;
} 
.page_link_box{
	width:  240px;
	margin: 40px auto 0;
}
/*---  ノートパソコン  ---*/
@media screen and (min-width:768px)and (max-width:1440px) {
	.l_img{
		width: 15%;
	}
	.r_img{
		width: 15%;
	}
	.l_img img{
		width: 100%;
	}
	.r_img img{
		width: 100%;
	}
}

/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.fast_contents{
		padding: 40px 0;
	}
	.l_img{
		display: none
	}
	.center_txt p{
		text-align: left;
	}
	.r_img{
		display: none
	}
	.page_link_box{
		width: 100%;
	}
	.page_link{
		width: 46%;
	}
	.page_link:first-child{
		margin-right: 8%;
	}
}



/*-----------------  FP手帳とは？  -----------------*/
.fp{
	padding: 80px 0;
}
.fp_wrapper{
	width: 1280px;
	margin: 0 auto;
	background-color: #00bab3;
	border-radius: 10px;
	padding: 35px;
	box-sizing: border-box;
}
.fp h2{
	text-align: center;
	position: relative;
	color: #fff;
	letter-spacing: 3px;
}
.fp h2::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -13px;
	display: inline-block;
	width: 60px;
	height: 4px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #fff;
}
.fp p{
	color: #fff;
	font-weight: bold;
	line-height: 30px;
	margin: 50px 0 0 0;
}
.fp_box{
	display: flex;
	width: 100%;
	margin-top: 60px;
}
.fp_box img{
	vertical-align: bottom;
	height: 211px;
}
.fp_img1{
	margin: 0 auto 0 0;
	border: 2px solid #fff;
}
.fp_img2{
	margin: 0 auto;
	border: 2px solid #fff;
}
.fp_img3{
	margin: 0 auto;
	border: 2px solid #fff;
}
.fp_img4{
	margin: 0 0 0 auto;
	border: 2px solid #fff;
}

.data_link_box{
	text-align: center;
	margin: 50px 0 20px 0;
}
.data_link_box a{
	padding: 15px 20px;
	border-radius: 5px;
	background-color: #fff;
	color: #00bab3;
	text-decoration: none;
	font-weight: bold;
}
.data_link_box a:hover{
	background-color:#007671;
	color: #fff;
	transition-property: all;
	transition: 0.3s linear;
}






/*--- ノートパソコン  ---*/
@media screen and (min-width:768px)and (max-width:1440px) {
	.fp_wrapper{
		width: 960px;
	}
	.fp_box img{
		width: 100%;
		height: 172px;
	}
	.fp_img1{
		margin: 0 auto 0 0;
		border: 2px solid #fff;
		width: 29%;
	}
	.fp_img2{
		margin: 0 auto;
		border: 2px solid #fff;
		width: 29%;
		
	}
	.fp_img3{
		margin: 0 auto;
		border: 2px solid #fff;
		width: 19%;
	}
	.fp_img4{
		margin: 0 0 0 auto;
		border: 2px solid #fff;
		width: 19%;
	}
}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.fp_wrapper{
		width: 90%;
		padding: 20px;
	}
	.fp{
		padding: 40px 0;
	}
	.fp_box img{
		width: 100%;
		height: auto;
	}
	.fp_box{
		flex-wrap: wrap;
	}
	.fp_img1{
		margin: auto auto 20px auto !important;
		width: 100%;
	}
	.fp_img2{
		margin: auto auto 20px auto !important;
		width: 100%;
	}
	.fp_img3{
		margin: auto auto 20px auto !important;
		width: 100%;
	}
	.fp_img4{
		margin: auto !important;
		width: 100%;
	}
}

/*-----------------  できること  -----------------*/
.app{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: aqua;
}
.parallax-bg {
	background-image: url(../img/bg_app.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	padding: 120px 0;
}

.app h2{
	text-align: center;
	position: relative;
	color: #fff;
	letter-spacing: 3px;
}
.app h2::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -13px;
	display: inline-block;
	width: 60px;
	height: 4px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #ff8a46;
}
.app p{
	text-align: left;
	color: #fff;
	line-height: 30px;
	margin-top: 100px;
}

.app .data_link_box{
	text-align: center;
	margin: 50px 0 20px 0;
}
.app .data_link_box a{
	padding: 15px 20px;
	border-radius: 5px;
	background-color: #fff;
	color: #00bab3;
	text-decoration: none;
	font-weight: bold;
}
.app .data_link_box a:hover{
	background-color:#007671;
	color: #fff;
	transition-property: all;
	transition: 0.3s linear;
}


/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.parallax-bg p{
		text-align: left;
	}
	.parallax-bg {
		background-attachment:scroll;
	}
}

/*-----------------  旧・デジタル版閲覧サービスから大幅パワーアップ  -----------------*/
.comparison{
	padding: 60px 0;
}
.comparison h2{
	text-align: center;
	position: relative;
	letter-spacing: 3px;
}
.comparison h2::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -13px;
	display: inline-block;
	width: 60px;
	height: 4px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #ff8a46;
}
.comparison p{
	text-align: center;
	margin-top: 80px;
}
.comparison_img_pc{
	width: 100%;
	margin: 60px auto 0 ;
	text-align: center;
}
.comparison_img_sp{
	display: none;
}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.comparison p{
		text-align: left;
	}
	.comparison_img_pc{
		display: none;
	}
	.comparison_img_sp{
		display: block;
	}
	.comparison_img_sp img{
		width: 100%;
	}
}


/*-----------------  新機能 -----------------*/
.service_title{
	background-color: #ff3e80;
	padding: 20px 0;
}
.service_title_img{
	width: 556px;
	margin: 0 auto;
}
.service_lr{
	display: flex;
	padding: 50px 0;
}
.service_l{
	width: 50%;
}
.service{
	width: 100%;
}

.row {
    padding-top: 70px;
	position: relative;
}
.number_container {
    position: absolute;
	bottom: 0;
}
.container {
    position: absolute;
    left: 105px;
    display: table;
    height:70px;
    width: calc(100% - 105px);
    position:relative;
    border-bottom: solid 2px #00bab3;
}
.container h3{
	font-size: 28px;
	margin:14px 0;
	letter-spacing: 2px;
	color: #00bab3;
}
.gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
    display: table-cell;
    vertical-align: bottom;
}
.service_l p{
	margin-top: 40px;
	line-height: 28px;
}
.service_r{
	width: 50%;
	text-align: right;
}
.service_r img{
	box-sizing: border-box;
}
.back_grey{
	background-color: #F0F0F0;
}

.back_white{
	background-color: #FFFFFF;
}

@media screen and (min-width:768px)and (max-width:1440px) {
	.container h3{
		font-size: 21px;
	}
	.number_container img{
		width: 80px;
	}
	.service_l{
		width: 47%;
	}
	.service_r{
		width: 47%;
		margin-left: 6%;
	}
	.container {
		left: 95px;
		width: calc(100% - 95px);
	}
}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.container h3{
		font-size: 20px;
		text-align: left;
	}
	.service_title_img{
		width: 100%;
	}
	.service_title_img img{
		width: 100%;
	}
	.number_container{
		text-align: center;
	}
	.service_lr{
		flex-wrap: wrap;
	}
	.service_l{
		width: 100%;
		text-align: center;
	}
	.service_l p{
		text-align: left;
	}
	.service_r{
		width: 100%;
		text-align: center;
	}
	#border{
		border: 2px solid #ccc;
	}

	.service_l img{
		width: 100%;
	}
	.service_r img{
		width: 85%;
	}
	.service_l img{
		width: 85%;
	}
	.reverse{
		flex-direction:column-reverse;
	}
	.row {
		padding-top: 30px;
	}
	.container {
		left: 95px;
		width: calc(100% - 95px);
	}
}


/*-----------------  ダウンロード  -----------------*/
.dl_box{
	background-color: #e7f4f2;
	padding: 50px 0;
}
.dl_box h2{
	text-align: center;
	color: #ff8a46;
	font-weight: bold;
	font-size: 30px;
	margin: 0;
	/*border-top:3px solid #fff;*/
	/*border-bottom:3px solid #fff;*/
	padding:15px 0;

}
.dl_box h2.green{
	background-color:#20a490;
	color: #fff;
	width:80%;
	margin:0 auto;
}

.b_box_section {
	margin: 0 auto 30px;
	max-width: 1200px; 
	text-align: center; 
}
  
.b_box_section_flex {
	display: flex;
	justify-content: center; 
	align-items: center;
	flex-wrap: wrap; 
	width: 100%;
	margin: 0 auto;
}

.b_box_section_flex_min {
	display: flex;
	justify-content: center; 
	align-items: center;
	flex-direction: column;
	width: 30%;
	margin: 0 auto;
	text-align: center;
}


.b_box_section_flex_min p span.orange {
	color: #fff;
	border-radius: 8px;
	background-color: #FF8A46;
	display: inline-block;
	padding: 5px;
}

.b_box_section_flex_min p span {
	font-weight: bold;
	font-size: 18px;
	display: inline-block;
	padding: 3px;
}

.b_box_section_flex_min p span.端末数50 {
	font-size: 18px;
	display: inline-block;
	padding: 3px;
}

.b_box_section_flex_min p span.税抜 {
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	padding: 3px;
}
  

.b_box_footer{
	margin: 0 auto;
}
.b_box_flex{
	display: flex;
	width: 40%;
	margin: 25px auto 0;
}

@media screen and (min-width:768px)and (max-width:1440px) {
	.b_box_flex{
		width: 40%;
	}
	.b_box_section_flex{
		margin: 0px auto;
		width: 60%;
	}

	.b_box_section_flex_min{
		margin: 0px auto;
		width: 34%;
	}

}
/*--- スマホ  ---*/
@media screen and (max-width:768px) {
	.b_box_flex{
		width: 100%;
	}
	.dl_box h2{
		font-size: 24px;
	}
	.dl_txt p{
		text-align-last: center;
	}
	.b_box_section_flex{
		width: 70%;
	}
	.b_box_section_flex_min{
		margin: 0px auto;
		width: 60%;
	}
}
@media screen and (max-width:560px) {
	.b_box_flex{
		width: 100%;
	}
	.dl_box h2{
		font-size: 24px;
	}
	.dl_txt p{
		text-align-last: center;
	}
	.b_box_section_flex{
		width: 70%;
	}
	.b_box_section_flex_min{
		margin: 0px auto;
		width: 100%;
	}
}
/*-----------------   footer   -----------------*/
.footer{
	background-color: #20a490;
}
.footer p{
	color: #fff;
	padding: 14px 0;
	font-size: 12px;
	margin: 0;
	text-align: center;
}



/*-----------------  ページトップ  -----------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #20a490;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    background-color: #28C9AE;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}