@charset "utf-8";

.content h4 {
	margin-bottom: 0;
	padding-bottom: 0;
}

.content p{
	margin-top:0;
}

.sub_top_img {
	background-image: url(../../common/img/pic_main_security.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 28.5%;	/*画像縦横比を保つための値*/
	position: relative;	/*画像上テキストの位置指定用*/
}

.content .small_text {
    font-size: 80%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top:0px;
	margin-left: 40px;
	padding-left: 1em;
    text-indent: -1em;
}

.riyou_box{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width:90%;
}


.riyou{
	position: relative;
	padding-left: 3.2em;/*アイコン分のスペース*/
	line-height: 1.4;
	margin-bottom: 10px;
}

.riyou::before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c";/*アイコンのユニコード*/
	font-weight: 900;
	position: absolute;/*絶対位置*/
	font-size: 1em;/*サイズ*/
	left: 27px;/*アイコンの位置*/
	top: 0;/*アイコンの位置*/
	color: #5ab9ff; /*アイコン色*/
	font-weight: 900;
}

.content .security_area{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	margin-left: 40px;
	margin-bottom:10px;
	width:40%;
}

.content .security_area li{
	flex: auto;	
}

.content .attn{
	margin-left:40px;
	padding-left: 1em;
    text-indent: -1em;
}

.content .basic_price{
	margin-bottom: 0;
}

.content .basic_price2{
	margin-left:40px;
	margin-bottom: 0px;
	padding: 0px;
	padding-left: 1em;
    text-indent: -1em;
}

.content .pay_text {
	margin-left: 40px;
	margin-right: 25px;
	display: inline-block;	/*QRコード決済画像横並び用*/
}

.content .payment {
    margin: 0px;
    padding: 0px;
}

.content .payment_indent {
    margin: 0px;
    padding: 0px;
    padding-left: 1em;
    text-indent: -1em;
}

.img_right {
    display: inline-block;
    width: 200px;
    margin-bottom: 50px;
}



/*
こんな企業様にオススメ
-------------------------------------------*/

.user {
    padding: 10px;
    margin-bottom: 30px;
    margin-top: 20px;
    margin-right: 30px;
	margin-left: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.btn-flat-border {
  padding: 5px;
  margin: 5px 1% 5px 1%;
  text-decoration: none;
  color: #FFFFFF;
  background-color: #0085B2;
  border: solid 5px #0085B2;
  border-radius: 10px;
  transition: .4s;
  width: 28%;
  font-weight: bold;
  text-align: center;
}

.btn-flat-border:hover {
  background: #FFFFFF;
  color: #0085B2;
}


@media screen and (min-width:961px){

	.br-pc{
		display: block;
	}
}
/*(961～)*/

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

	.br-pc{
		display:none;
	}
	.riyou_box{
		width:70%;
	}
	.content .area{
		width:85%;
	}

	.content .security_area{
		width:60%;
	}
		
	.content .pay_text {
		margin-right: 20px;
		margin-left: 20px;
	}

	.content .payment_indent {
		margin-bottom:20px;
	}

	.img_right {
		display: inline-block;
		padding: 13px;
		width: 200px;
		margin-left: 30px;
	}

}
/*(～960)*/


/*iPad対応*/

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

	.btn-flat-border {
  		width: 40%;
  		margin: 5px 2% 5px 3%;
	}

}

@media screen and (max-width:760px){
	.riyou_box{
		width:95%;
	}
}
/*(～760)*/

@media screen and (max-width:640px){
	
	.content .area{
		margin:0 auto;
		width:80%;
	}

	.content .security_area{
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}

	.content .attn{
		width:85%;
		margin-left:20px;
		margin-right:20px;
	}
		
	.img_left,
	.img_right {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
}
/*(～640)*/

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

	.content .small_text {
		margin-left:20px;
		margin-left: 20px;
	}

	.content .basic_price2{
		margin-left:20px;
	}

	.btn-flat-border {
  		width: 93%;
	}
}

@media screen and (max-width:375px){
	
	
}
/*(～375)*/

@media screen and (max-width:320px){
	
	.content .security_area {
		width: 70%;
	}
}
/*(～320)*/